@media (max-width: 1440px) {
  /*********************** */
  /* Project Case Study   */
  /*********************** */

  .case-study {
    padding: 0 10rem;
  }

  .case-study__title {
    font-size: 2.8rem;
  }

  .navigation__link:link,
  .navigation__link:visited {
    display: inline-block;
    position: relative;
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--color-white);
    text-decoration: none;
    transition:
      transform 0.3s ease,
      opacity 0.3s ease;
    opacity: 0.8;
  }
}

@media (max-width: 1300px) {
  .navigation__link:link,
  .navigation__link:visited {
    display: inline-block;
    position: relative;
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--color-white);
    text-decoration: none;
    transition:
      transform 0.3s ease,
      opacity 0.3s ease;
    opacity: 0.8;
  }
}

@media (max-width: 1100px) {
  /*********************** */
  /* FAQ Home             */
  /*********************** */

  .wide {
    font-size: 2.8rem;
  }

  /*********************** */
  /* Projects             */
  /*********************** */

  .projects {
    gap: 0;
  }

  .projects__card {
    width: 36.7rem;
  }

  /*********************** */
  /* Marketing Plans      */
  /*********************** */

  .faq__question {
    width: 50ch;
    line-height: 1.6;
  }

  /*********************** */
  /* Reviews              */
  /*********************** */

  .review__box {
    width: 45%;
  }

  .review__box-name::before {
    right: 25%;
  }
}
/* ===== 1024px ===== */
@media (max-width: 1024px) {
  /* ====================== */
  /* HOME HERO */
  /* ====================== */
  .home-hero {
    padding-top: 6rem;
  }
  .home-hero__heading {
    font-size: 5.2rem;
  }
  .home-hero__subheading {
    font-size: 2rem;
    margin-bottom: 6rem;
  }

  /* ====================== */
  /* CLIENTS */
  /* ====================== */
  .clients {
    padding: 12rem 3rem 0;
  }
  .client__logo {
    width: 16rem;
  }
  .clients__logos-track {
    gap: 3rem;
  }

  /* ====================== */
  /* CTA */
  /* ====================== */
  .plans__cta-wrapper {
    gap: 4rem;
  }
  .plans__cta-content {
    flex: 0 0 50%;
  }

  .cta-box__content {
    width: 100%;
    margin-right: 0;
  }

  .cta-heading {
    font-size: 4rem;
    width: auto;
  }

  .cta-field {
    width: 70%;
  }

  .cta-box__image-wrapper {
    position: static;
    transform: none;
    margin-top: 3rem;
    width: 30rem;
  }

  .cta-box__image {
    transform: rotate(-8deg);
  }

  /* ====================== */
  /* LEADS IMPACT */
  /* ====================== */
  .leads-impact__circle {
    width: 35rem;
    height: 35rem;
  }

  .leads-impact__circle--sales {
    right: 10%;
  }
  .leads-impact__circle--impact {
    right: -5%;
  }
  .leads-impact__circle--growth {
    right: 10%;
  }

  .leads-impact__title {
    font-size: 3rem;
  }
  .leads-impact__image {
    width: 10.5rem;
  }
  .leads-impact__circle--main {
    width: 11rem;
    height: 11rem;
  }
  .leads-impact__text {
    font-size: 1.8rem;
  }

  /* ====================== */
  /* FEATURE BLOG */
  /* ====================== */
  .blog-title {
    font-size: 1.6rem;
  }
  .feature__blog-wrapper {
    gap: 2rem;
  }
  .feature-blog-title {
    font-size: 1.8rem;
  }
  .feature-blog {
    width: 80%;
  }
  .close-feature-blogs {
    gap: 2rem;
  }

  /* ====================== */
  /* BLOG */
  /* ====================== */
  .blog-container {
    max-width: 55ch;
    font-size: 1.6rem;
    padding: 1rem;
  }

  .related__article-wrapper {
    gap: 3rem;
  }
  .related__article-box {
    width: 28%;
  }
  .related__articles-heading {
    font-size: 3.8rem;
  }

  /* ====================== */
  /* PROJECTS */
  /* ====================== */
  .projects {
    gap: 1rem;
    padding: 2.4rem;
  }

  .projects__card {
    width: 28rem;
  }

  /* ====================== */
  /* CASE STUDY */
  /* ====================== */
  .case-study {
    padding: 0 8rem;
  }
  .case-study__details {
    gap: 5rem;
  }

  /* ====================== */
  /* FAQ (MERGED FIX) */
  /* ====================== */
  .faq__question {
    width: 50ch;
    font-size: 1.8rem;
    line-height: 1.6;
  }

  /* ====================== */
  /* SERVICES CAROUSEL */
  /* ====================== */
  .services-carousel-section {
    flex-direction: column;
    height: auto;
    gap: 20rem;
    margin-top: 9.2rem;
  }

  .carousel-track {
    width: 38rem;
  }

  .card {
    width: 34rem;
    height: 20rem;
  }

  .card img {
    width: 35%;
    height: 35%;
  }

  /* ====================== */
  /* MARKETING PLANS */
  /* ====================== */
  .plan__card-text-list {
    padding: 5.2rem 0.4rem;
  }

  .plan__card-price {
    font-size: 6.2rem;
  }

  .plan__card-price::before {
    left: -10%;
  }

  /* ====================== */
  /* TIMELINE */
  /* ====================== */
  .plan__timeline {
    grid-template-columns: repeat(4, 1fr);
    max-width: 90%;
    height: 3px;
  }

  .plan__timeline-title {
    font-size: 1.6rem;
  }
  .plan__timeline-subtitle {
    font-size: 1rem;
  }

  /*********************** */
  /* Popup page */
  /*********************** */

  .pop-up__heading {
    font-size: 2.8rem;
  }

  .pop-up__offer {
    font-size: 2.4rem;
  }

  /*********************** */
  /* Projects page */
  /*********************** */
  .projects__viewport {
    width: 60rem;
  }
}

@media (max-width: 900px) {
  /* about page */

  .states__info-wrapper {
    top: -40rem;
  }
  /* ====================== */
  /* STORY */
  /* ====================== */
  .story {
    flex-direction: column;
  }

  .story__image-box {
    margin-right: auto;
  }

  /* ====================== */
  /* WHY US */
  /* ====================== */
  .why-us__benefit-2 {
    left: 2%;
  }

  .why-us__benefit-5 {
    position: absolute;
    top: 50%;
    right: 2%;
  }

  /* ====================== */
  /* FAQ HOME */
  /* ====================== */
  .faq-card {
    font-size: 2rem;
  }

  /* ====================== */
  /* MARKETING PLANS PAGE */
  /* ====================== */

  /* HERO */
  .plan__hero {
    padding: 3.2rem;
  }

  .plans__hero-title {
    font-size: 3.2rem;
  }

  .plans__hero-subtitle {
    font-size: 1.8rem;
    line-height: 1.4;
    text-align: center;
  }

  /* TABS */
  .plans__tabs {
    flex-wrap: wrap;
    gap: 1.6rem;
  }

  /* BENEFITS */
  .benefit__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
  }

  /* TIMELINE */
  .plan__timeline {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    background: none;
    margin-top: 4rem;
  }

  .plan__timeline::before,
  .plan__timeline::after {
    display: none;
  }

  .plan__timeline-step {
    transform: none;
    margin: 2rem 0;
  }

  .plan__timeline-line {
    width: 2px;
    height: 4rem;
    margin: 1rem 0;
  }

  .plan__timeline-title {
    font-size: 2.4rem;
  }
  .plan__timeline-subtitle {
    font-size: 1.6rem;
  }

  /* REVIEWS */
  .review__box {
    width: 100%;
  }

  .review__box-name::before {
    right: 15%;
  }

  /* PRICING */
  .plan__cards {
    flex-direction: column;
    gap: 3.2rem;
  }

  .plan__card {
    width: 100%;
    text-align: center;
  }

  .plan__card-price::before {
    left: 32%;
  }

  .plan__card-cta {
    opacity: 1;
  }

  /* ====================== */
  /* FEATURES PAGE */
  /* ====================== */
  .features__section {
    padding: 0 4rem 4rem;
    margin-top: 8rem;
    gap: 4.2rem;
  }

  .features__section-heading {
    font-size: 3.2rem;
  }

  .feature__service {
    gap: 2.4rem;
  }

  .feature__service-name {
    font-size: 2rem;
  }

  .feature__service-list {
    column-gap: 6rem;
  }

  .feature__service-item {
    width: 50%;
  }

  .feature__service-item-name {
    font-size: 1.6rem;
  }

  .feature__service-item-meta {
    font-size: 1.3rem;
    opacity: 1;
  }

  /*********************** */
  /* Projects page */
  /*********************** */
  .projects__viewport {
    width: 50rem;
  }
}

@media (max-width: 850px) {
  .projects__viewport {
    width: 40rem;
  }
}
/* (max-width: 768px) */
@media (max-width: 768px) {
  /* Home Hero */
  .home-hero {
    padding: 4rem;
  }
  .home-hero__heading {
    font-size: 3.8rem;
  }
  .home-hero__subheading {
    font-size: 1.8rem;
    margin-bottom: 7.2rem;
    line-height: 1.4;
  }

  /* Clients */
  .client__logo {
    width: 14rem;
  }
  .clients__logos-track {
    gap: 2rem;
    animation-duration: 20s;
  }

  /* Plans CTA */
  .plans__cta-wrapper {
    gap: 9.2rem;
    flex-direction: column;
    align-items: flex-start;
  }

  /* Leads */
  .leads-impact__circle {
    width: 30rem;
    height: 30rem;
  }
  .leads-impact__circle--sales {
    top: -20px;
    right: -65%;
    transform: scale(0.9);
  }
  .leads-impact__circle--impact {
    right: -93%;
    transform: translateY(-50%) scale(0.85);
  }
  .leads-impact__circle--growth {
    bottom: -20px;
    right: -65%;
    transform: scale(0.9);
  }

  /* Why Us */
  .why-us-home {
    flex-direction: column;
    gap: 3rem;
  }

  /* FAQ */
  .faq-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
  .faq-card {
    font-size: 2rem;
    min-height: 14rem;
  }
  .faq__question {
    width: 42ch;
  }

  /* Contact */
  .contact__cards {
    gap: 1.5rem;
  }
  .contact__wrapper {
    padding: 6.2rem;
    padding-top: 9.2rem;
    flex-direction: column !important;
    gap: 3.2rem;
  }

  /* Footer */
  .footer {
    padding: 7.2rem 3.2rem 0;
  }
  .footer__nav-warpper {
    flex-direction: column;
    gap: 5.2rem;
    padding: 3.2rem 1.4rem;
  }
  .footer__subtitle {
    font-size: 3.4rem;
    font-weight: 500;
  }

  /* Feature Blogs */
  .feature__blog-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    margin-bottom: 0;
  }
  .close-feature-blogs {
    margin-bottom: 3.2rem;
    gap: 4rem;
  }
  .feature-blog {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
  }

  /* Blog */
  .blog-title {
    font-size: 2.2rem;
  }
  .blog-container {
    width: 92%;
    margin-top: 5rem;
  }

  /* Related */
  .related__article-wrapper {
    flex-direction: column;
    gap: 4rem;
  }
  .related__article-box {
    width: 90%;
  }

  /* Error */
  .error__heading {
    font-size: 14rem;
  }

  /* Popup */
  .popup-wrapper {
    flex-direction: column;
    width: 92%;
    height: auto;
    padding: 3.2rem;
    gap: 2.4rem;
    overflow-y: auto;
    max-height: 90vh;
  }

  .popup__box-left,
  .popup__box-right {
    flex: none;
    width: 100%;
  }

  .pop-up__heading {
    font-size: 2.8rem;
  }

  .pop-up__offer {
    font-size: 2.2rem;
  }

  .pop-up__text {
    font-size: 1.3rem;
  }

  .cross__btn {
    top: 2rem;
    right: 2rem;
  }

  /* Projects */
  .projects {
    flex-direction: column;
    padding: 3rem;
    gap: 6rem;
  }
  .projects__card {
    width: 90%;
  }

  /* Case Study */
  .case-study {
    padding: 5rem;
  }
  .case-study__details {
    flex-direction: column;
    align-items: self-start;
    gap: 1rem;
  }

  /* Services */
  .services {
    padding: 0 1rem;
  }
  .services__heading {
    font-size: 2.4rem;
  }
  .services__wrapper {
    flex-direction: column-reverse;
    gap: 2rem;
  }
  .service__list {
    width: 100%;
    gap: 2rem;
  }
  .service__item {
    width: 100%;
  }

  /* About */
  .about__hero-heading {
    font-size: 2.4rem;
  }
  .states__heading {
    font-size: 3.6rem;
  }
  .story__heading {
    font-size: 2.4rem;
  }
  .why-us__heading {
    font-size: 2.8rem;
  }

  /* Toggle */
  .toggle-wrap {
    width: 160px;
    height: 55px;
  }
  .pill {
    font-size: 1.4rem;
  }

  /* Marketing Plans */
  .plan__sec-wrapper {
    width: 95vw;
    padding: 3.2rem;
  }

  /* Carousel */
  .services-carousel-section {
    flex-direction: column-reverse;
  }
  .carousel-track {
    width: 32rem;
  }
  .card {
    width: 30rem;
    height: 18rem;
  }

  /* CTA */
  .cta-box {
    flex-direction: column-reverse;
    text-align: center;
    padding: 2.8rem;
  }
  .growth-section {
    padding: 8rem 0;
  }
  .cta-heading {
    font-size: 3.2rem;
  }
  .cta-field {
    width: 100%;
  }
  .cta-btn {
    font-size: 1.6rem;
    padding: 1.6rem 2rem;
  }
  .cta-box__image-wrapper {
    width: 24rem;
  }

  /*********************** */
  /* Projects page */
  /*********************** */

  .projects__categories {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 2rem;
    column-gap: 1.8rem;
    font-size: 1.2rem;
  }

  /* services page */
  .services__wrapper {
    height: auto;
  }

  .closed__services-wrapper {
    width: 100%;
  }
  .service__close {
    padding: 1rem;
  }

  /* Advantages page */
  .service-advantage__item {
    width: 45%;
  }

  /* projects page  */
  .projects__slider-wrapper {
    display: block;
  }

  .projects__arrow--left {
    position: absolute;
    top: 50%;
    left: -10%;
    transform: translateY(-50%);
  }

  .projects__arrow--right {
    position: absolute;
    top: 50%;
    right: -2%;
    transform: translateY(-50%);
  }

  .faq-card {
    font-size: 1.6rem;
    min-height: 14rem;
  }

  .subcribe__box-wrapper {
    width: 80%;
  }

  .subscribe-field label {
    font-size: 1.2rem;
  }

  .subscribe-button {
    font-size: 1.2rem;
  }

  .back-to-top {
    top: -32px;
  }

  .footer__nav-icon {
    font-size: 2rem;
  }

  .image-card__cta-button {
    font-size: 1.4rem;
  }
}

@media only screen and (max-width: 650px) {
  /* about page */

  .states__info-wrapper {
    top: -30rem;
  }
}

@media only screen and (max-width: 600px) {
  .logo {
    width: 12rem;
  }

  .header__social-icon-wrapper {
    display: none;
  }

  .navigation__checkbox:checked ~ .navigation__nav {
    width: 100%;
  }

  .navigation__link:link,
  .navigation__link:visited {
    font-size: 1.6rem;
  }

  .menu__footer {
    gap: 2.2rem;
  }

  .plans__cta-heading {
    font-size: 3.2rem;
  }

  .plans__cta-subheading {
    font-size: 1.8rem;
  }

  .leads-impact__image {
    width: 8rem;
    height: auto;
  }

  .leads-impact__box {
    margin-right: auto;
  }

  .leads-impact__circle--main {
    width: 8rem;
    height: 8rem;
  }

  .leads-impact__text {
    font-size: 1.2rem;
  }

  .why-us__title-home {
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }

  .why-us__heading-home {
    font-size: 3.2rem;
  }

  .faq-home__question {
    font-size: 1.8rem;
  }

  .contact__subtitle {
    font-size: 1.8rem;
    line-height: 1.4;
  }

  .contact__title {
    font-size: 2.4rem;
  }

  /*********************** */
  /* About page */
  /*********************** */

  .about__hero-heading {
    line-height: 1.4;
  }

  .about__hero-text {
    font-size: 1.8rem;
  }

  .states__heading {
    font-size: 3.2rem;
  }

  .story {
    display: flex;
    flex-direction: column;
    gap: 5.2rem;
    padding: 0 3.2rem;
  }

  .story__text-box {
    width: 100%;
  }

  .story__image-box {
    margin: 0 auto;
  }

  .story__heading {
    font-size: 3.2rem;
  }

  .story__title {
    font-size: 2rem;
  }

  .story-icon {
    width: 5rem;
    height: 5rem;

    font-size: 1.6rem;
  }

  .why-us__heading {
    font-size: 3.2rem;
  }

  .why-us__benefit {
    font-size: 1.4rem;
    padding: 2rem;
    font-weight: 500;
  }

  .why-us__card-wrapper {
    margin: 5.2rem 3.2rem 0rem 3.2rem;
  }

  .why-us__card {
    width: 20.8rem;
    height: 41.5rem;
  }

  .why-us__card-title {
    font-size: 2.4rem;
  }

  .why-us__card-subtitle {
    font-size: 1.6rem;
  }

  .why-us__benefit-2 {
    left: 0%;
  }

  .why-us__benefit-5 {
    right: 0%;
  }

  .state__info-title {
    font-size: 4rem;
  }

  /* ********************** */
  /* feature blog page */
  /* ******************** */

  .feature__blog-heading {
    font-size: 3.2rem;
  }

  .feature__blog-subheading {
    font-size: 2.4rem;
    line-height: 1.4;
  }

  .close-feature-blogs {
    gap: 5rem;
  }
  .blog-title {
    font-size: 1.6rem;
    line-height: 1.4;
  }

  .feature__blog {
    padding: 8.2rem 3.2rem 0 3.2rem;
  }

  .article-by {
    font-size: 1.4rem;
  }

  .feature-blog-title {
    font-size: 1.6rem;
  }

  .date,
  .reading-time {
    font-size: 1rem;
  }

  /* ***************** */
  /* Blog page */
  /* ***************** */
  .related__article-wrapper {
    display: flex;
    flex-direction: column;
  }

  .related__article-box {
    width: 85%;
  }

  /* footer */
  .footer {
    padding: 7.2rem 0;
    padding-right: 4.2rem;
  }

  /* ***************** */
  /* Testimonial page */
  /* ***************** */
  .testimonials {
    padding: 0 2rem;
  }

  .testimonials__heading {
    font-size: 2.6rem;
  }

  .testimonial-accordion {
    max-width: 90%;
    margin-top: 3rem;
  }

  .testimonial-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .client-photo {
    width: 4rem;
    height: 4rem;
    margin-right: 0;
    margin-bottom: 0.8rem;
  }

  .client-info h4 {
    font-size: 1.4rem;
  }

  .client-info span {
    font-size: 1rem;
  }

  .client-rating {
    font-size: 1rem;
    margin-top: 0.5rem;
  }

  .testimonial-content {
    padding: 0rem 1.6rem 3rem 1.6rem;
  }

  .testimonial-text {
    font-size: 1.4rem;
    max-width: 100%;
  }

  .testimonial-cta {
    font-size: 1.3rem;
  }

  .testimonial-fact {
    font-size: 0.9rem;
    padding: 0.3rem 0.6rem;
  }

  /* ************** */
  /* 404 error page */
  /* ***************** */

  .error__heading {
    font-size: 10rem;
  }

  .error__subheading {
    font-size: 1.6rem;
    margin-bottom: 5rem;
    line-height: 1.4;
    margin-top: 0;
  }

  .error__emojis {
    width: 12rem;
    height: 12rem;
  }

  .error__content {
    padding: 2rem 1rem;
  }

  /*********************** */
  /* pop-up window */
  /*********************** */

  .popup-wrapper {
    width: 90%;
    height: 85%;
    padding: 0 3.2rem;
    gap: 3.2rem;
  }

  .pop-up__heading {
    font-size: 3.2rem;
  }

  .pop-up__offer {
    font-size: 2.6rem;
  }

  .cross__btn {
    top: 10%;
    right: 8%;
  }

  /*********************** */
  /* Service Advantage page */
  /*********************** */

  .service-advantage__heading {
    font-size: 2.2rem;
  }

  .service-advantage__title-number {
    margin: 0;
    font-size: 7.2rem;
  }

  .advantage__info-title {
    font-size: 1.8rem;
  }

  .service-advantage__title-text {
    font-size: 1.4rem;
  }

  /* ****************** *
  /* MARKETING PLANS PAGE */
  /* ********************* */

  .plan__hero {
    padding: 2.4rem;
  }

  .plans__hero-textbox {
    padding: 2.4rem;
  }

  .plans__hero-title {
    font-size: 2.6rem;
    line-height: 1.3;
  }

  .plans__hero-subtitle {
    font-size: 1.6rem;
    text-align: center;
  }

  /* SECTION WRAPPER */
  .plan__sec-wrapper {
    width: 90vw;
    padding: 3.2rem;
    border-radius: 3rem;
  }

  /* OVERVIEW – BENEFITS */
  .benefit__list {
    grid-template-columns: 1fr;
    gap: 3.2rem;
  }

  .section__title {
    font-size: 3rem;
  }

  .section__title::before {
    width: 20%;
  }

  /* TIMELINE */
  .plan__timeline {
    display: flex;
    flex-direction: column;
    height: auto;
    gap: 4.2rem;
    background: none;
    margin: 0;
    margin-top: 4rem;
  }

  .plan__timeline::before,
  .plan__timeline::after,
  .plan__timeline-line {
    display: none;
  }

  .plan__timeline-step {
    position: static;
    align-items: flex-start;
  }

  /* plan cards */
  .plan__card-text-list {
    align-items: center;
  }

  .plan__card-price::before {
    left: 28%;
  }

  /* REVIEWS */
  .review__box {
    padding: 3.2rem;
  }

  /* FAQ */
  .faq__question {
    font-size: 1.6rem;
  }

  .faq__toggle-wrapper {
    width: 4.4rem;
    height: 4.4rem;
  }

  /*********************** */
  /* Marketing plan features page */
  /*********************** */

  .features__section {
    padding: 0 2.4rem 3.2rem;
    margin-top: 6rem;
    gap: 3.2rem;
  }

  .features__section-heading {
    font-size: 2.6rem;
    line-height: 1.3;
  }

  /* Close icon */
  .close__icon {
    width: 4.2rem;
    height: 4.2rem;
    top: 5%;
    right: 5%;
  }

  /* Service header */
  .feature__service {
    align-items: flex-start;
    gap: 2rem;
  }

  .feature__service-toggle {
    width: 4.8rem;
    height: 4.8rem;
  }

  .feature__toggle-icon {
    width: 2rem;
    height: 2rem;
  }

  .feature__service-name {
    font-size: 1.6rem;
  }

  .feature__service-toggle {
    width: 3.8rem;
    height: 3.8rem;
  }

  .feature__service-list {
    flex-direction: column;
    gap: 2.4rem;
  }

  .feature__service-item {
    width: 100%;
    padding: 2.4rem;
    border-radius: 3rem;
  }

  .feature__service-item-meta {
    opacity: 1;
    text-align: center;
  }

  .review__box-name::before {
    right: 54%;
  }

  /* projects page */
  .projects__card {
    width: 100%;
  }

  /* popup */

  .popup-wrapper {
    width: 95%;
    height: 100vh;
    padding: 2rem;
    gap: 1.4rem;
    border-radius: 1rem;
  }

  .pop-up__heading {
    font-size: 2.2rem;
  }

  .pop-up__offer {
    font-size: 1.8rem;
    margin-bottom: 0;
  }

  .pop-up__time {
    font-size: 1.2rem;
  }

  .pop-up__text {
    font-size: 1.2rem;
  }

  .pop-up__field label {
    font-size: 1rem;
  }

  .pop-up__field input {
    font-size: 1.2rem;
  }

  .cross__btn {
    top: 1.2rem;
    right: 1.2rem;
  }
}

@media only screen and (max-width: 500px) {
  /* ***************************/
  /* FAQ home */
  /* ****************************/

  .faqs__home-heading {
    font-size: 2.4rem;
    margin-bottom: 3rem;
  }

  .faq-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
    gap: 1.6rem;
  }

  /* marketing plans page  */
  .benefit__slide {
    padding-left: 0;
  }

  /* ***************************/
  /* About page why us section */
  /* ****************************/

  .why-us__benefit {
    font-size: 0.8rem;
    padding: 1.4rem;
    background-color: var(--color-white);
  }

  /*********************** */
  /*marketing plans   FAQ */
  /*********************** */

  .faq__question {
    width: 32ch;
  }

  /*********************** */
  /* Projects page */
  /*********************** */

  .projects__heading {
    font-size: 2.4rem;
  }

  .projects__sub-heading {
    font-size: 2rem;
  }

  /* .projects__viewport {
    max-width: 35rem;
    width: 100%;
  } */
}
/* ===== Mobile (≤ 480px) ===== */
@media (max-width: 480px) {
  .home-hero {
    padding: 2rem 0 6rem 0;
  }
  .home-hero__heading {
    font-size: 2.8rem;
  }
  .home-hero__subheading {
    font-size: 1.4rem;
    margin-bottom: 3.2rem;
  }
  .features__heading {
    font-size: 2.4rem;
  }

  .clients {
    padding: 8rem 3rem 0;
  }

  /* about page */

  .about__hero-text {
    font-size: 1.4rem;
    width: 100%;
  }

  .states__info-wrapper {
    top: -24rem;
    padding: 0;
  }

  .state__info-item {
    padding: 2rem 4.2rem;
  }

  /* CTA Box */
  .cta-box {
    width: 90%;
    padding: 2rem;
    border-radius: 3rem;
  }
  .cta-heading {
    font-size: 2.6rem;
    line-height: 1.3;
  }
  .cta-box__input {
    gap: 1.6rem;
  }
  .cta-field {
    padding: 1.4rem 1.6rem;
    font-size: 1.4rem;
  }
  .cta-btn {
    width: 80%;
    text-align: center;
  }
  .cta-box__image-wrapper {
    width: 20rem;
  }
  .cta-box__image {
    transform: rotate(-5deg);
  }

  /* Services Carousel */
  .services-carousel-section {
    width: 90%;
    gap: 12rem;
    margin: 6rem auto;
  }
  .carousel-container {
    height: 55vh;
  }
  .carousel-track {
    width: 100%;
  }
  .card {
    width: 26rem;
    height: 16rem;
    row-gap: 1.6rem;
  }
  .card img {
    width: 45%;
    height: 45%;
  }
  .card-benefits-item {
    font-size: 1.1rem;
  }
  .service-name {
    font-size: 1.6rem;
  }
  .service-description {
    font-size: 1rem;
  }
  .nav-arrow {
    width: 4rem;
    height: 4rem;
  }
  .dot {
    width: 10px;
    height: 10px;
  }

  /* Leads Impact Circles */

  /* Feature Blog */
  .feature__blog-subheading {
    font-size: 1.6rem;
    line-height: 1.2;
  }
}

/* ===== Mobile (≤ 480px) ===== */
@media (max-width: 480px) {
  .image-card__cta-button {
    text-decoration: none;
    font-size: 1.4rem;
  }

  .faq-card {
    font-size: 1.6rem;
    min-height: 14rem;
  }

  .subscribe {
    width: 90%;
  }

  .subscribe__btn {
    font-size: 1rem;
  }

  .subscribe__wrapper {
    width: 100%;
  }

  .subcribe__box-wrapper {
    width: 100%;
  }

  .subscribe-field label {
    font-size: 1.2rem;
  }

  .subscribe-button {
    font-size: 1.2rem;
  }

  .back-to-top {
    top: -32px;
  }

  .footer__nav-icon {
    font-size: 2rem;
  }

  .separator-wrapper {
    bottom: 16.5%;
  }

  .story-icons__list {
    column-gap: 2.2rem;
  }

  .why-us__card-title {
    font-size: 1.2rem;
  }

  .why-us__card-subtitle {
    font-size: 1.2rem;
  }

  .why-us__card-text {
    font-size: 1.2rem;
  }

  .feature__blog {
    padding: 2.2rem 3.2rem 0 3.2rem;
  }

  .services__wrapper {
    width: 100%;
    margin-left: 0;
  }

  .services-btn {
    font-size: 1rem;
    padding: 2rem 2.4rem;
  }

  .projects__slider-wrapper {
    display: block;
  }

  .projects__viewport {
    max-width: 35rem;
    width: 100%;
  }

  .projects {
    padding: 1rem;
    padding-top: 8.2rem;
    row-gap: 3rem;
  }

  .blog-hero-info {
    width: 70%;
  }

  .blog-heading {
    font-size: 1.4rem;
  }

  .blog-quote {
    font-size: 1.4rem;
  }

  .related__articles-heading {
    font-size: 3.2rem;
  }

  .feature__service {
    gap: 1.6rem;
    align-items: flex-start;
  }

  .feature__service-toggle {
    width: 4.4rem;
    height: 4.4rem;
    flex-shrink: 0;
  }

  .feature__toggle-icon {
    width: 2rem;
    height: 2rem;
  }

  .feature__service-text {
    gap: 0.6rem;
  }

  .feature__service-name {
    font-size: 1.8rem;
    line-height: 1.2;
  }
}

/* ===== Extra-Small Mobile (≤ 400px) ===== */
@media (max-width: 400px) {
  /* ===== CTA Section ===== */
  .cta-box {
    width: 90%;
    padding: 2rem;
    border-radius: 3rem;
    flex-direction: column-reverse;
    text-align: center;
  }

  .cta-heading {
    font-size: 2.6rem;
    line-height: 1.3;
  }

  .cta-box__input {
    gap: 1.6rem;
  }

  .cta-field {
    width: 100%;
    padding: 1.4rem 1.6rem;
    font-size: 1.4rem;
  }

  .cta-btn {
    width: 100%;
    font-size: 1.6rem;
    padding: 1.6rem 2rem;
    text-align: center;
  }

  .cta-box__image-wrapper {
    width: 20rem;
  }

  .cta-box__image {
    transform: rotate(-5deg);
  }

  /* ===== Services Carousel ===== */
  .services-carousel-section {
    width: 90%;
    gap: 20rem;
    margin: 6rem auto;
    flex-direction: column-reverse;
  }

  .card-benefits-list {
    font-size: 1rem;
  }

  .dots {
    margin-top: 0;
  }

  .controls-section {
    gap: 3rem;
  }

  .carousel-container {
    height: 55vh;
  }

  .carousel-track {
    width: 100%;
  }

  .card {
    width: 26rem;
    height: 16rem;
    row-gap: 1.6rem;
  }

  .card img {
    width: 45%;
    height: 45%;
  }

  .card-benefits-item {
    font-size: 1.1rem;
  }

  .service-name {
    font-size: 1.2rem;
  }

  .service-description {
    font-size: 1rem;
  }

  .nav-arrow {
    width: 4rem;
    height: 4rem;
  }

  .dot {
    width: 10px;
    height: 10px;
  }

  /* ===== Leads Impact Circles ===== */

  /* ===== Contact Page ===== */
  .contact__heading {
    font-size: 3.2rem;
  }

  .contact__wrapper {
    padding: 4.2rem;
    padding-top: 5rem;
  }

  .contact-form__checkbox label {
    font-size: 1.2rem;
  }

  .contact-form__label {
    font-size: 1.1rem;
    font-weight: 500;
  }

  .contact__title {
    font-size: 2.8rem;
  }

  .contact__subtitle {
    font-size: 1.8rem;
    line-height: 1.4;
  }

  /* ===== Footer ===== */
  .footer {
    padding: 7.2rem 0 0 0;
  }

  .footer__logo {
    width: 2.4rem;
    margin-left: 1.2rem;
  }

  .footer__header-wrapper {
    margin-left: 5rem;
    margin-top: -4.2rem;
  }

  .footer__subtitle {
    font-size: 2rem;
    letter-spacing: -1px;
  }

  .footer__title {
    font-size: 1rem;
  }

  /* .footer__subscribe-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0rem;
  } */

  .footer__nav-link {
    font-size: 1.4rem;
  }

  /* ===== Projects Page ===== */
  .projects__hero {
    width: 95%;
    padding-top: 3rem;
  }

  .projects__heading {
    font-size: 3.2rem;
    line-height: 1.4;
  }

  .services__heading {
    font-size: 3.2rem;
  }

  .projects__sub-heading {
    font-size: 1.6rem;
    margin-bottom: 4rem;
  }

  .projects {
    flex-direction: column;
    padding: 2rem;
    gap: 4rem;
    margin-top: 8rem;
  }

  .projects__categories {
    gap: 1.2rem;
    row-gap: 1.8rem;
  }

  .projects__category {
    font-size: 1.4rem;
    padding: 0.5rem;
  }

  .projects__grid {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    width: 100%;
    margin: 0 auto;
  }

  .projects__arrow {
    display: none;
  }

  .projects__viewport {
    min-width: 30rem;
    width: 100%;
  }

  .projects__card {
    width: 100%;
    padding: 2rem;
  }

  .projects__card-title {
    font-size: 2.4rem;
  }

  .projects__card-subtitle {
    font-size: 1.6rem;
  }

  /* ===== Case Study Page ===== */
  .case-study {
    padding: 2rem;
  }

  .case-study__title {
    font-size: 3rem;
  }

  .case-study__details {
    flex-direction: column;
    align-items: flex-start;
    gap: 3rem;
    margin: 4rem 0;
  }

  .case-study__detail {
    padding-bottom: 1.4rem;
  }

  .case-study__label {
    font-size: 2rem;
  }

  .case-study__value {
    font-size: 1.4rem;
  }

  .case-study__heading {
    font-size: 1.8rem;
  }

  .case-study__text {
    font-size: 1.4rem;
    line-height: 1.6;
  }

  .m-small {
    margin: 2.2rem 3.2rem 1.6rem 3.2rem;
  }

  /* ===== About Page ===== */
  .story {
    display: flex;
    flex-direction: column;
    gap: 5.2rem;
    padding: 0 3.2rem;
  }

  .story__image-box {
    width: 100%;
    height: 100%;

    margin: 0 auto;
  }

  .story__heading {
    font-size: 2.4rem;
  }

  .story__title {
    font-size: 2rem;
  }

  .story-icon {
    width: 4rem;
    height: 4rem;
    font-size: 1rem;
  }

  .states__heading {
    font-size: 2.2rem;
  }

  .why-us__card-wrapper {
    margin: 5.2rem 1.2rem 0 1.2rem;
  }

  .why-us__heading {
    font-size: 3.2rem;
  }

  .why-us__benefit {
    font-size: 0.8rem;
    padding: 2rem;
    font-weight: 500;
  }

  /* ===== Toggle Section ===== */
  .features {
    padding: 10rem 0;
  }

  .faqs-home {
    padding: 4.2rem 0 0 0;
  }

  .features__list {
    display: none;
    max-width: 1024px;
    width: 100%;
    column-gap: 8rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
  }

  .features__heading {
    font-size: 2.4rem;
    margin-bottom: 4rem;
  }

  .toggle-wrap {
    width: 140px;
    height: 50px;
  }

  .pill {
    width: 70%;
    font-size: 1.3rem;
  }

  .features__item {
    padding: 1rem 1.6rem;
    font-size: 1.3rem;
  }

  .features__content::before {
    width: 90%;
    filter: blur(40px);
  }

  .left-icon {
    left: -20%;
    top: 65%;
  }

  .right-icon {
    right: -20%;
    top: 65%;
  }

  .left-icon img,
  .right-icon img {
    width: 12rem;
    height: 12rem;
  }

  /* ===== Marketing Plans Page ===== */
  .plans__hero-title {
    font-size: 2rem;
  }

  .plans__hero-subtitle {
    line-height: 1.6;
  }

  .plan__sec-wrapper {
    width: 95vw;
    padding: 3.2rem;
    border-radius: 3rem;
  }

  .plan__card-price {
    font-size: 6.2rem;
  }

  .plan__card-cta {
    font-size: 1.4rem;
    padding: 2rem 3.2rem;
  }

  .plan__card-price::before {
    left: 10%;
  }

  .benefit__list {
    grid-template-columns: 1fr;
    gap: 3.2rem;
  }

  .faq__list {
    width: 100%;
  }

  .faq__question {
    font-size: 1.6rem;
    width: 32ch;
    line-height: 1.6;
  }

  .faq__toggle {
    width: 2rem;
    height: 2rem;
  }

  .faq__toggle-wrapper {
    width: 3.4rem;
    height: 3.4rem;
  }

  /* ===== Feature Blogs ===== */
  .feature__blog-subheading {
    font-size: 1.4rem;
    line-height: 1;
    margin-top: 1rem;
  }

  /* services page */
  .service__note {
    font-size: 0.9rem;
  }

  .rotated-text {
    font-size: 1.2rem;
  }

  /* ***************************** */
  /* Testimonial page */
  /* ***************************** */

  .testimonial-accordion {
    width: 85%;
  }
  .testimonials__heading {
    font-size: 3.2rem;
  }

  .client-photo {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.2rem;
  }

  .client-info h4 {
    font-size: 1.3rem;
  }

  .client-info span {
    font-size: 0.95rem;
  }

  .client-rating {
    font-size: 0.95rem;
  }

  .testimonial-text {
    font-size: 1.3rem;
    line-height: 1.6;
  }

  .testimonial-cta {
    font-size: 1.25rem;
  }

  .testimonial-fact {
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
  }

  /* Advantages page */
  .service-advantage__item {
    width: 75%;
  }
}

@media only screen and (min-width: 300px) {
  .story__text {
    font-size: 1.6rem;
  }

  /* Contact */
  .contact__content-wrapper {
    width: 100%;
  }

  .contact-form {
    width: 100%;
  }

  .contact__wrapper {
    gap: 0rem;
  }

  /* ******************************* */

  .plan__timeline {
    gap: 2.2rem;
    align-items: flex-start;
  }

  .overview-fix {
    min-height: 600px;
  }
}

@media only screen and (max-width: 300px) {
  /* ***************************/
  /* FAQ home */
  /* ****************************/

  .faq-grid {
    grid-template-columns: 1fr;
  }

  .faq-card {
    font-size: 1.6rem;
  }

  /* about pge */
  .states__info-wrapper {
    top: -18rem;
  }

  .why-us__card-title {
    font-size: 1.2rem;
  }

  .why-us__card-subtitle {
    font-size: 1.2rem;
  }

  .why-us__card {
    max-width: 26.8rem;
    width: 100%;
    height: 41.5rem;
  }

  .why-us__card {
    width: 27.8rem;
  }

  .plan__timeline {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: auto;
    gap: 2.2rem;
    background: none;
    margin: 0;
    margin-top: 4rem;
    align-items: flex-start;
  }

  .review__box-name::before {
    right: 72%;
  }

  .section__title {
    font-size: 2.2rem;
  }

  .plan__timeline-subtitle {
    font-size: 1.2rem;
  }

  .benefit__slide {
    justify-content: flex-start;
  }
}