@media (max-width: 450px) {

  .container .hero-content h1 {

    font-size: 32px;

    /* 2rem = 32px */

    line-height: 40px;

  }



  .container .hero-content h1 span {

    font-size: 48px;

    /* 3rem = 48px */

  }



  .hero p {

    margin: 15px 0 15px 0;

    font-size: 16px;

    /* 1rem = 16px */

    width: 100%;

    text-align: center;

  }

}



@media (max-width: 999px) {

  .hero{

    height: 96vh;

  }

  .hero .container .hero-img {

    width: 90%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: auto;

  }



  .hero h1 span {

    font-size: 64px;

    /* 4rem = 64px */

  }



  .hero p {

    font-size: 20px;

  }



  .hero .btn-get-started {

    font-size: 18px;

  }



  .hero .btn-watch-video {

    font-size: 20px;

  }



  .container .hero-content {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

  }



  .container .hero-content h1 {

    margin: 0;

    text-align: center;

  }

  .about {
margin-top: 25px;

  }

  

  .about .container {

    flex-direction: column-reverse;

  }



  .about .container .about-img {

    width: 110%;

    margin-top: 0px;

    margin: auto 0;

    clip-path: polygon(0 49%, 50% 0, 100% 50%, 100% 100%, 0% 100%);

  }



  .about .container .content {

    width: 95%;
    margin: auto;

  }



  .about .content h1 {

    font-size: 45px;

    /* 1.5rem = 24px */

  }



  .about .container .content h4 {

    font-size: 20px;

    /* 1rem = 16px */

  }



  .about .container .content p {

    /* font-size: 20px; */

    /* 0.8rem = 12px */

  }



  .about .content .read-more {

    font-size: 20px;

    /* 0.75rem = 12px */

    letter-spacing: 1px;

    padding: 10px 20px;

  }

}



/* Our Mission Start */

@media (max-width: 1199px) {

  .mission-content .mission-img {

    width: 50%;

  }



  .mission-content .mission-img .miss-img {

    margin-left: -50px;

  }

}



@media (max-width: 992px) {

  .mission-content {

    flex-direction: column;

  }



  .mission-content .mission-points {

    width: 100%;

  }



  .mission-content .mission-img {

    width: 70%;

  }



  .mission-content .mission-img .miss-img {

    margin-left: -15%;

    width: 300px;

    height: 300px;

  }



  .mission-content .mission-points .new-miss {

    gap: 10px;

    height: 150px;

  }



  .mission-content .mission-points .new-miss img {

    width: 8%;

  }



  .mission-content .mission-points .new-miss p {

    font-size: 15px;

  }

}



@media (max-width: 500px) {

  .mission-content {

    flex-direction: column;

  }



  .mission-content .mission-points {

    width: 100%;

  }



  .mission-content .mission-points .new-miss {

    flex-direction: column;

    height: auto;

    width: 100%;

    padding: 0;

  }



  .mission-content .mission-points .new-miss img {

    width: 20%;

  }



  .mission-content .mission-img {

    width: 100%;

  }



  .mission-content .mission-img .miss-img {

    border: 10px solid rgb(52, 78, 141);

    margin-left: -15%;

    width: 280px;

    height: 280px;

  }



  .mission-content .mission-img .bg-miss {

    height: 300px;

  }

}



@media (max-width: 350px) {

  .mission-content .mission-points .new-miss img {

    width: 25%;

  }



  .mission-content .mission-img .miss-img {

    margin-left: 0;

    width: 200px;

    height: 200px;

  }



}



/* Why Choose FastBrandly Start */







/* Why Choose FastBrandly End */

/* Our Service Start */





@media (max-width: 999px) {

  .service-include .card {

    width: 48%;

    height: 600px;

    /* 25rem = 400px */

  }



  .service-include .card-content p {

    font-size: 25px;

    /* 0.7rem = 11px */

  }



  .our-service .container h3 {

    font-size: 45px;

  }



  .service-include .card-content h3 {

    font-size: 24px;

    /* 1.2rem = 19px */

  }

}



@media (max-width: 770px) {

  .copyright{

    width: 50% !important;

  }

  .service-include .card {

    width: 45%;

    height: 320px;

    /* 20rem = 320px */

  }



  .service-include .card-content h3 {

    font-size: 12px;

    /* 0.8rem = 12px */

  }



  .service-include .card-content p {

    font-size: 11px;

    /* 0.7rem = 11px */

  }



  .service-include .card-content a {

    font-size: 11px;

    /* 0.7rem = 11px */

  }

}



@media (max-width: 400px) {

  .service-include .card {

    width: 100%;

    height: 320px;

    /* 20rem = 320px */

  }



  .service-include .card-content h3 {

    font-size: 12px;

    /* 0.8rem = 12px */

  }



  .service-include .card-content p {

    font-size: 11px;

    /* 0.7rem = 11px */

  }



  .service-include .card-content a {

    font-size: 11px;

    /* 0.7rem = 11px */

  }

}



/* PRICING CSS */

@media (max-width: 999px) {

  .section-title {

    padding-bottom: 0px;

  }

  .pricing h1 {

    font-size: 40px;

    /* 1.25rem = 20px */

  }



  .pricing P {

    font-size: 20px;

    /* 1.25rem = 20px */

  }



  .pricing .pricing-item {

    padding: 20px;

  }

  .pricing .pricing-item h3 {

    font-size: 30px;

    /* 1.25rem = 20px */

  }



  .pricing .pricing-item p {

    font-size: 20px;

    /* 1.25rem = 20px */

  }



  .pricing .pricing-item a {

    font-size: 22px;

    /* 1.25rem = 20px */

  }



  .pricing .pricing-item ul li i {

    font-size: 30px !important;

    /* 1.25rem = 20px */

  }



  .pricing .pricing-item ul li {

    font-size: 20px;

    line-height: 1.2;

    /* 1.25rem = 20px */

  }



  .pricing .pricing-item .popular {

    font-size: 10px;

    margin-top: -12px;

    margin-right: -12px;

    /* line-height: 1.2; */

    /* 1.25rem = 20px */

  }



}



/* PRICING CSS END*/

/* Additional Upgrade CSS */

@media (max-width: 999px) {

  .additional-upgrader h2 {

    font-size: 35px;

  }



  .additional-upgrader p {

    font-size: 20px;

  }



  .additional-card-main {

    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));

    /* 30% width per card */

  }



  .additional-card-main .additional-card {

    width: 400px;

    height: auto;

  }



  .additional-card-main .additional-card h1 {

    font-size: 30px;

    height: auto;

  }



  .additional-card-main .additional-card h4 {

    text-align: center;

    height: auto;

  }



  .additional-card-main .additional-card p {

    height: auto;

  }

}



@media (max-width: 767px) {

  .additional-card-main {

    grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));

    /* 100% width per card */

  }



  .additional-card-main .additional-card {

    width: 100%;

    height: fit-content;

  }



  .additional-card-main .additional-card h1 {

    font-size: 24px;

    /* 1.5rem = 24px */

  }



  .additional-card-main .additional-card h4 {

    text-align: center;

  }

}



@media (max-width: 300px) {

  .additional-card-main {

    grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));

    /* 100% width per card */

  }



  .additional-card-main .additional-card {

    width: 100%;

    height: 550px;

  }



  .additional-card-main .additional-card h4 {

    text-align: center;

  }

}



/* Why SEO Matters Start */

@media (max-width:999px) {

  .details .features-item .seo-matter-box {

    margin-top: -30px;

  }

  .details .features-item .seo-matter-box {

    flex-direction: column;

  }



  .details .features-item .section-title h1 {

    font-size: 35px;

    /* 1.625rem = 26px */

  }



  .details .features-item .section-title p {

    font-size: 20px;

    /* 1.625rem = 26px */

  }



  .details .features-item .section-title ul li {

    font-size: 20px;

    align-items: flex-start;

    /* 1.625rem = 26px */

  }



  .details .features-item .section-title ul li i {

    font-size: 35px;

    /* 1.625rem = 26px */

  }



  .details .features-item .seo-matter-img {

    width: 100%;

  }



  .details .features-item .seo-matter-img img {

    width: 100%;

  }



  .details .features-item h1 {

    font-size: 35px;

    margin-bottom: 25px;

  }



  .details .features-item .seo-cards {

    width: 48%;

    height:200px;

    margin: 40px auto;

  }



  .details .features-item .seo-cards h5 {

    font-size: 20px;

    text-align: center;

    height: 20%;

    margin-top: 10px;

  }

  

  .details .features-item .seo-cards p {

    font-size: 15px;

    margin-top: 10px;

    height: 40%;

  }



  .seo-card-main .seo-cards img {

    width: 70px;

    height: 70px;

  }



  .details .get-started {

    display: flex;

    flex-direction: column;

    width: 100%;

  }



  .details .get-started .get-started-img {

    width: 100%;

  }



  .details .get-started .get-started-img img {

    width: 90%;

  }



  .details .get-started .get-started-content {

    width: 100%;

  }



  .details .get-started .get-started-content h1 {

    font-size: 35px;

  }



  .details .get-started .get-started-content p {

    font-size: 20px;

  }



  .get-started button  {

    margin-left: 10px;



  }

  .get-started button a {

    font-size: 15px;

  }

}



/* Why SEO Matters End */



/* About Page Start */



@media (max-width: 1190px) {

  .about-content {

    flex-direction: column-reverse;

    margin: 9% auto;

    gap: 100px;

  }



  .animated-cube {

    margin-left: 0%;

    width: 350px;

    height: 350px;

  }



  .about-text {

    width: 100%;

    margin: auto;

  }



  .about-text h2 {

    width: 100%;

    text-align: center;

    font-size: 72px;

    /* 4.5rem = 72px */

  }



  .about-text p {

    font-size: 32px;

    /* 2rem = 32px */

  }



  .about-text .cta-button {

    display: flex;

    align-items: center;

    justify-content: center;

    margin: auto;

    width: fit-content;

    font-size: 24px;

    /* 1.5rem = 24px */

  }



  .about-text-info h2 {

    font-size: 56px;

    /* 3.5rem = 56px */

  }



  .about-text-info p {

    font-size: 30px;

    /* 1.5rem = 24px */

  }



  .about-text-info .features .feature-item p {

    font-size: 20px;

    /* 1.5rem = 24px */

  }



  .about-text-info .features .feature-item h3 {

    font-size: 30px;

    /* 1.5rem = 24px */

  }



  .mission-content .mission-image {

    width: 80%;

  }



  .leader-card h3 {

    font-size: 46px;

    /* 2.9rem = 46px */

  }



  .leader-card p {

    font-size: 24px;

    /* 1.5rem = 24px */

  }



  .leader-card .description p {

    font-size: 21px;

    /* 1.3rem = 21px */

  }



  .team-member {

    width: 350px;

  }



  .team-member img {

    width: 150px;

    height: 150px;

  }



  .team-container h2 {

    font-size: 65px;

  }



  .team-member h4 {

    font-size: 35px;

    /* 2.2rem = 35px */

  }



  .team-member p {

    font-size: 22px;

    /* 1.1rem = 18px */

  }



  .team-member .description p {

    font-size: 20px;

    /* 1rem = 16px */

  }

}



@media (max-width: 850px) {

  .animated-cube {

    margin-left: 0%;

    width: 350px;

    height: 350px;

  }



  .about-text h2 {

    font-size: 52px;

  }



  .about-text p {

    font-size: 25px;

  }



  .about-text .cta-button {

    font-size: 20px;

  }



  .about-content-info {

    padding: 0;

    width: 100%;

  }



  .about-text-info h2 {

    font-size: 45px;

    /* 3.5rem = 56px */

  }



  .about-text-info p {

    font-size: 25px;

  }



  .about-text-info .features .feature-item {

    width: 75%;

  }



  .about-text-info .features .feature-item p {

    font-size: 18px;

    /* 1.5rem = 24px */

  }



  .about-text-info .features .feature-item h3 {

    font-size: 20px;

    /* 1.5rem = 24px */

  }



  .mission-content .mission-image {

    width: 80%;

  }



  .leader-card h3 {

    font-size: 46px;

    /* 2.9rem = 46px */

  }



  .leader-card p {

    font-size: 24px;

    /* 1.5rem = 24px */

  }



  .leader-card .description p {

    font-size: 21px;

    /* 1.3rem = 21px */

  }



  .team-member {

    width: 350px;

  }



  .team-member img {

    width: 150px;

    height: 150px;

  }



  .team-container h2 {

    font-size: 65px;

  }



  .team-member h4 {

    font-size: 35px;

    /* 2.2rem = 35px */

  }



  .team-member p {

    font-size: 22px;

    /* 1.1rem = 18px */

  }



  .team-member .description p {

    font-size: 20px;

    /* 1rem = 16px */

  }

}



@media (max-width: 400px) {

  .about-content {

    gap: 50px;

  }



  .animated-cube {

    width: 200px;

    height: 200px;

  }



  .about-text h2 {

    margin-top: 20px;

    font-size: 40px;

  }



  .about-text p {

    width: 100%;

    font-size: 25px;

  }



  .about-content .about-text .cta-button {

    font-size: 21px !important;

  }

}





/* About Page End */





/* Domain Page Start  */

@media (max-width: 999px) {

  .intro-text h1{

    font-size: 40px;

  }

  .intro-text h1 span{

    font-size: 50px;

  }

  .intro-text p{

    padding: 10px;

    font-size: 25px;

  }

  .domain-info .content h1 {

    font-size: 30px;

  }



  .domain-info .content p {

    font-size: 20px;

  }



  .domain-info .content button {

    font-size: 20px;

  }



  .futuristic-section {

    padding: 5px;

  }



  .futuristic-section .section-header h2 {

    font-size: 35px;

  }



  .futuristic-section .section-header p {

    font-size: 20px;

  }



  .cards-container {

    width: 100%;

    margin: 0;

  }

  .card {

    width: 100%;

  }



  .card img {

    height: 250px;

  }



  .card h3 {

    font-size: 25px;

  }



  .card p {

    font-size: 20px;

  }



  .creation-process .creation-process-title h2 {

    font-size: 35px;

  }



  .creation-process .creation-process-title p {

    font-size: 20px;

  }



  .process-step {

    flex-basis: calc(100% - 20px);



  }



  .process-steps .process-step .step-header h3 {

    font-size: 25px;

  }



  .step-icon {

    width: 100px;

    height: 100px;

  }



  .step-icon img {

    max-width: 60px;

    max-height: 60px;

  }



  .process-steps {

    margin: auto;

    justify-content: center;



  }

   .process-steps .process-step .step-description {

      font-size: 20px;

    }

  .process-steps .process-step .tag-title {

    font-size: 25px;

    font-weight: 400



  }



  .process-steps .process-step .tag-description {

    font-size: 20px;



  }



}



@media (max-width: 600px) {

  .process-steps .process-step .step-header h3 {

    font-size: 23px;

  }



  .step-icon {

    width: 80px;

    height: 80px;

  }



  .step-icon img {

    max-width: 50px;

    max-height: 50px;

  }



  .process-steps .process-step .tag-title {

    font-size: 22px;



  }



  .process-steps .process-step .tag-description {

    font-size: 20px;



  }

}



  @media (max-width: 400px) {

    .process-steps .process-step {

      padding: 10px;

    }



    .process-steps .process-step .step-header h3 {

      font-size: 15px;

    }



    .step-icon {

      width: 60px;

      height: 60px;

    }



    .step-icon img {

      max-width: 40px;

      max-height: 40px;

    }



    .process-steps .process-step .step-description {

      font-size: 18px;

    }



    .process-steps .process-step .tag-title {

      font-size: 18px;



    }



    .process-steps .process-step .tag-description {

      font-size: 15px;



    }

  }



  @media (max-width: 320px) {

    .process-steps .process-step .step-header h3 {

      font-size: 15px;

    }



    .step-icon {

      width: 50px;

      height: 50px;

    }



    .step-icon img {

      max-width: 30px;

      max-height: 30px;

    }



    .process-steps .process-step .step-description {

      font-size: 15px;

    }



    .process-steps .process-step .tag-title {

      font-size: 15px;



    }



    .process-steps .process-step .tag-description {

      font-size: 13px;



    }

  }



  /* Domain Page End */







  /* E-com Store Page Start  */

  @media (max-width: 999px) {

    .ecommerce-content {

      margin-top: 6%;

      flex-direction: column;

    }

    

  }

  @media (max-width: 430px) {

    .browser-title{

      font-size: 10px;

   }

   .browser-buttons .button{

    width: 8px;

    height: 8px;

  }

  

}

/* E-com Store Page End  */





/* Logo  Page Start  */

@media (max-width: 999px) {

  .logo-section .logo-grid{

    padding: 10px;

    grid-template-columns: 1fr;

  }

  .logo-section .logo-grid .logo-card {

    padding: 10px;

    width: 100% !important;

  }

  .logo-section .section-header p{

    font-size: 22px;

  }

  .logo-section .logo-grid .logo-card p{

    font-size: 20px;

  }

  .cta-wrapper .cta-heading{

    font-size: 10px;

  }

  .cta-wrapper .cta-description{

    font-size: 10px;

  }

 

}

/* Logo  Page End  */