/*==========================
Responsive Navbar
==========================*/

@media(max-width:991px){

.logo{

    width:130px;

}

.navbar-toggler{

    display:block;

}

.order-btn{

    padding:10px 18px;

    font-size:14px;

}

}

@media(max-width:575px){

.logo{

    width:110px;

}

.order-btn{

    padding:9px 16px;

    font-size:13px;

}

.navbar{

    padding:10px 0;

}

}



/* hero  responsiveness */

@keyframes floatImage{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

}

@media(max-width:991px){

.hero-section{

padding:7rem 0 4rem;

}

.hero-btn-group{

margin-bottom:45px;

}

.hero-image{

border-radius:24px;

}

}

@media(max-width:576px){

.hero-section{

padding:6.5rem 0 3rem;

}

.hero-description{

font-size:1rem;

}
.hero-image-title{
    font-size:2.3rem;
}

.hero-btn-group{

flex-direction:column;

align-items:center;

}

.hero-btn-group .btn-theme,

.hero-btn-group .btn-outline-theme{

width:100%;

max-width:280px;

}

}

@keyframes textReveal{

    from{

        opacity:0;

        transform:translate(-50%,25px);

        letter-spacing:12px;

    }

    to{

        opacity:1;

        transform:translate(-50%,0);

        letter-spacing:2px;

    }

}

@keyframes floatText{

    0%,100%{

        transform:translate(-50%,0);

    }

    50%{

        transform:translate(-50%,-5px);

    }

}

/* feature strips  responsiveness */

@keyframes scrollFeature{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

@media(max-width:991px){

.feature-strip{

    padding:15px 0;

}

.feature-item{

    margin-right:50px;

    font-size:1.2rem;

}

.feature-item i{

    font-size:1.6rem;

}

}

@media(max-width:576px){

.feature-strip{

    padding:13px 0;

}

.feature-item{

    margin-right:35px;

    gap:10px;

    font-size:1rem;

}

.feature-item i{

    font-size:1.3rem;

}

}

/* products section responsiveness */

/* --- Mobile Responsiveness --- */
@media (max-width: 991px) {
  .why-fitchal {
    padding: 60px 0;
  }
  .section-main-title {
    font-size: 1.9rem;
  }
  .fitchal-card {
    padding: 30px 20px;
  }
}

@media (max-width: 575px) {
  .section-main-title {
    font-size: 1.65rem;
  }
  .section-desc-text {
    font-size: 1rem;
  }
}



/* how its work section  responsiveness */

/* --- Mobile Responsiveness --- */
@media (max-width: 767.98px) {
  .step-container {
    padding: 25px 20px;
  }
  
  .step-img {
    height: 200px; /* Reduced height on mobile to look compact */
  }

  .step-title {
    font-size: 1.45rem;
    margin-bottom: 10px;
  }

  .step-desc {
    font-size: 0.95rem;
  }
  
  /* Adds a subtle gap between step layers on mobile view */
  .how-it-works-steps {
    gap: 20px !important;
  }
}


/* --- Benefits Section responsiveness --- */
/* --- Viewport Responsiveness Adjustments --- */
@media (max-width: 1199.98px) {
  .custom-prev-btn { left: -5px; }
  .custom-next-btn { right: -5px; }
}

@media (max-width: 991.98px) {
  .carousel-outer-wrapper {
    padding: 0 !important; /* Removes outer boundaries padding constraints */
  }
  .custom-nav-btn {
    display: none; /* Auto hides arrows on mobile tablet touch interface viewports */
  }
}

@media (max-width: 575.98px) {
  .review-card {
    padding: 35px 25px 25px 25px;
  }
  .review-text {
    font-size: 1.05rem;
  }
}


/* FAQ Section Responsiveness */
/* --- Responsive Adaptability --- */
@media (max-width: 767.98px) {
  .faq-sec {
    padding: 60px 0;
  }
  
  .faq-btn {
    font-size: 1.05rem !important;
    padding: 18px 20px !important;
  }
  
  .faq-body {
    padding: 15px 20px 20px 20px !important;
    font-size: 0.95rem;
  }
  
  .custom-accordion {
    gap: 12px;
  }
}



/* Contact Section Responsiveness */

/* --- Responsive Adjustments --- */
@media (max-width: 991.98px) {
  .contact-section {
    padding: 60px 0;
  }
  .contact-main-title {
    font-size: 1.85rem;
  }
}

/* Footer responsiveness */
/* --- Responsive Adjustments --- */
@media (max-width: 991.98px) {
  .footer-col-title {
    margin-bottom: 16px;
    font-size: 1.25rem;
  }
  .footer-logo {
    max-width: 140px;
  }
}

@media (max-width: 575.98px) {
  .site-footer {
    padding-top: 45px;
  }
  .footer-col-title {
    margin-top: 15px; /* Adds spacing when columns stack on small screens */
  }
}