@media(max-width: 1400px){
    h1{ font-size: 54px; line-height: 58px;}
    h2{ font-size: 44px; line-height: 48px;}
    h3{ font-size: 28px; line-height: 32px;}
    .hero-avatars img{width: 50px; height: 50px;}
    .carousel-card-badge{ gap: .5rem;}
    .carousel-card-badge span{ padding: 8px 12px;}
    .stats-content, .breadcrumb-container,
    .banner-content{ padding: 50px;}
    #testimonialSlider .splide__arrow--next{   right: -5.25rem;}
    #testimonialSlider .splide__arrow--prev{   left: -5.25rem;}
    .stats-number span{ font-size: 38px; line-height: 42px;}
    .footer-links-wrp{ gap: 20px; flex-wrap: wrap;}
    .gear-card-2 img{ right: -6.5rem;}
    .gear-card-1 img{ right: -18rem;}
    .gear-card-1 .gear-card-content{ padding-top: 30px;}
    .stroller-content{ padding: 20px;}
    .stroller-content-btn-wrp{ flex-direction: column; gap: 10px; align-items: flex-start;}
    .stroller-content-title h4{ font-size: 20px;}
    .stroller-content-title{ gap: 8px;}
    .stroller-content > span{ gap: 10px;}
    .order-summary-title{ gap: .5rem;}
    .open-time span{ font-size: 40px;}
}
@media(max-width: 1200px){
    h1{ font-size: 48px; line-height: 52px;}
    h2{ font-size: 38px; line-height: 42px;}
    h3{ font-size: 24px; line-height: 28px;}
    .hero-avatars-text span{ font-size: 18px; font-weight: 600;}
    .breadcrumb-content,
    .hero-content p{ font-size: 14px;}
    .hero-avatars img:nth-child(4){ display: none;}
    .hero-content-wrp{ gap: 10px;}
    .carousel-card-content-top, .banner-content, .breadcrumb-content,
    .hero-content{ gap: 20px;}
    .banner-content, .stats-content, .breadcrumb-content, .breadcrumb-container,
    .hero-content{ padding: 40px;}
    #testimonialSlider .splide__arrow--next{   right: 0;}
    #testimonialSlider .splide__arrow--prev{   left: 0;}
    #testimonialSlider .splide__arrows{
        position: relative;
        bottom: -2.5rem;
        margin-bottom: 3rem;
    }
    .stats-content-wrp{ gap: 10px;}
    .gear-card-1{ min-height: 300px; }
    .gear-card-1 img{ max-width: 350px; right: 0rem;}
    .gear-card-content{ justify-content: flex-end;}
    .gear{ padding-bottom: 4rem;}
    .gear-card-2 img{ right: -5rem;}
    .breadcrumb-wrp span{ font-size: 20px;}
    .stroller-content-btn-wrp{ flex-direction: row;}
    .cart-delivery .form-check-label p{ width: 80%;}
    .contact-card a{ font-size: 20px;}
    .about-content{ padding: 0;}
    .open-time span{ font-size: 32px;}
}
@media(max-width: 992px){
    .btn{ padding: 10px 20px;}
    .stats-img,
    .hero-img{ aspect-ratio: 16/9;}
    .banner-content, .stats-content,
    .breadcrumb-content,
    .hero-content{ padding: 30px; text-align: center; align-items: center;}
    .breadcrumb-container{ padding: 30px;}
    .carousel-card-badge span{ padding: 6px 10px;}
    .gear .container, .testimonial-container, .detail-stroller .container, .blog .container, .breadcrumb .container, .adds .container,
    .carousel .container{ gap: 30px;}
    .footer-contact, .footer-links, .footer-links-wrp,
    .footer-left{ align-items: center; text-align: center; justify-content: center;}
    .gear-card-2 img{ right: -6.5rem;}
    .order-title{ width: 80%;}
    .cart-url{ gap: 10px;}
    .cart-link.active{ font-size: 28px; line-height: normal;}
    .cart-url span, .cart-link{ font-size: 14px;}
    .cart-url{ flex-wrap: wrap;}
    .footer{ margin-top: 60px;}
    .main-wrp{ gap: 60px;}
    .testimonial-container{ padding: 30px 0;}
    /* offcanvas filters */
    .offcanvas{ max-width: 70%;}
    .offcanvas-body{ display: flex; flex-direction: column; gap: 1rem;}
    .resetFilterBtn,
    .filter-button{ width: 100%; text-align: center; justify-content: center;}
    .dropdown-menu{ width: 100%;}
    .about-img{ aspect-ratio: 16/9;}
    .open-time-wrp{ gap: 40px;}
    /* nav menu */
    .nav-logo img{  width: 200px; height: 61px;}
    .header-lower .btn, .nav-menu{ display: none;}
    .hamburger-toggler{ 
        display: flex; 
        flex-direction: column;
        gap: 5px; 
        border-radius: 5px;
        cursor: pointer;
        z-index: 99;
    }
    .hamburger-toggler span{
        width: 30px;
        height: 3px;
        background-color: var(--black);
        border-radius: 5px;
    }
    .mobile-menu{
        position: fixed; 
        top: 0;
        right: -100%;
        width: 100%; 
        height: 100%;
        background: linear-gradient(132deg, #059271 0.83%, #55DD9F 100%);
        z-index: 99;
        transition: right 0.4s ease-in-out;
        display: flex; 
        flex-direction: column;
        justify-content: flex-start; 
        align-items: flex-start
    }
    .mobile-menu.open{  
        right: 0;
    }
    .mobile-menu-content{
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        justify-content: space-between;
        padding: 2rem 0.75rem;
    }
    .mobile-menu-logo{
        padding: 1rem 1rem 0;
    }
    .mobile-menu-logo img{
        width: 180px;
    }
    .hamburger-closing {
        width: 30px;
        height: 30px;
        position: absolute;
        cursor: pointer;
        z-index: 100;
        top: 2rem;
        right: 2rem;
    }
    .hamburger-closing span {
        position: absolute;
        left: 0;    
        top: 50%;
        width: 100%;
        height: 3px;
        background: var(--white);
        display: block;
        transition: all 0.3s ease;
    }
    .hamburger-closing span:first-child { transform: rotate(45deg); }
    .hamburger-closing span:last-child { transform: rotate(-45deg); }
    .hamburger-toggler.rotated { transform: rotate(90deg); }
    .mobile-menu-wrapper{
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        height: 100%;
    }
    .mobile-menu-item{
        color: var(--white);
        font-size: 2rem;
        text-decoration: none;
        font-weight: 700;
        transition: color 0.3s ease;
        padding: 10px 0;
    }
    .mobile-menu-bottom{
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .mobile-menu-socials{
        display: flex;
        align-items: center;
        gap: 10px;
    }
    /* nav menu */
    .mobile-menu-btn{
        background: var(--white);
        color: var(--black);
        border: 1px solid var(--white);
        width: 100%;
        display: flex;
        align-items: center;
        gap: .5rem;
        justify-content: center;
    }
}
@media(max-width: 768px){
    h1{ font-size: 38px; line-height: 42px;}
    h2{ font-size: 30px; line-height: 34px;}
    h3{ font-size: 22px; line-height: 26px;}
    .detail-blog-content ol li, .detail-blog-content ul li,
    p{ font-size: 14px;}
    .btn{font-size: 14px;}
    .header-upper-left{ display: none;}
    .header-upper-right{ gap: 0; justify-content: space-between; flex: 1}
    .footer-contact,
    .section-header{ gap: .5rem; }
    .gear .container, .testimonial-container, .detail-stroller .container, .blog .container, .breadcrumb .container, .adds .container,
    .carousel .container{ gap: 20px;}
    .testimonial-btn-wrp{ justify-self: center;}
    .testimonials .hero-content-wrp{ justify-content: center;}
    .gear-card-2 img{ right: -5rem;}
    .breadcrumb-wrp span{ font-size: 18px;}
    .stroller-content-badges{ gap: 5px;}
    .stroller-content-badges span{ font-size: 12px; padding: 6px 12px;}
    .stroller-content-btn-wrp .btn{ padding: 6px 12px; font-size: 14px; gap: 5px;}
    .stroller-content-btn-wrp .btn img{ width: 16px; height: 16px;}
    .cart-link.active{ font-size: 24px;}
    .footer{ margin-top: 50px;}
    .main-wrp{ gap: 50px;}
    .detail-stroller-content{ gap: 20px;}
    .footer{ padding-top: 30px;}
    .contact-card{ align-items: center; text-align: center;}
}
@media(max-width: 576px){
    .nav-logo img{  width: 164px; height: 50px;}
    .header-upper{ padding: 8px 0;}
    .header-lower{ padding: 12px 0;}
    .hamburger-closing{ top: 1.5rem; right: 1rem;}
    .hamburger-toggler span{ width: 27px;}
    .hero-content-wrp{ flex-direction: column;}
    .banner-content, .stats-content,
    .breadcrumb-content,
    .order-information-form, .order-summary, .detail-stroller-content, .detail-stroller-price, .cart-card, .blog-content, .gear-card-content, 
    .testimonial-card, .contact-form, .breadcrumb-container, .how-card, .how-banner, .document-card,
    .hero-content{ padding: 20px; gap: 10px; }
    #carouselSlider .splide__track{ clip-path: inset(-100vw -100vw -100vw -100vw);}
    #blogSlider .splide__track{ clip-path: inset(-100vw -100vw -100vw -100vw);}
    #gearSlider .splide__track{ clip-path: inset(-100vw -100vw -100vw -100vw);}
    #categorySlider .splide__track{ clip-path: inset(-100vw -100vw -100vw -100vw); overflow: visible;}
    #similiarSlider .splide__track{ clip-path: inset(-100vw -100vw -100vw -100vw); overflow: visible;}
    .carousel-card-img{ aspect-ratio: 5/4;}
    .gear-card-2 img{ right: -8rem;}
    .gear-card-content-top{ width: 100%;}
    .strollers{ overflow-x: clip;}
    #categorySlider .splide__arrow--prev{ left: -0.5rem;}
    #categorySlider .splide__arrow--next{ right: -0.5rem;}
    .cart-link.active{ font-size: 18px;}
    .detail-stroller-price{ flex-direction: column; gap: 10px; align-items: center; text-align: center;}
    .detail-stroller-price h3{ font-size: 32px;}
    .detail-stroller-price > span{ display: flex; flex-direction: column; gap: 5px;}
    .footer{ margin-top: 40px;}
    .main-wrp{ gap: 40px;}
    .cart-back, .detail-blog-wrp, .breadcrumb .breadcrumb-url,
    .detail-stroller .breadcrumb-url{ padding-top: 10px;}
    .testimonial-container{ padding: 20px 0;}
    .order-information-form .form-group input{ padding: 10px;}
    .order-price-final,
    .order-summary-title span{ font-size: 1.75rem;}
    .order-information-form .form-group{ gap: 5px;}
    .order-information-form .form-title{ font-size: 22px; padding-bottom: .5rem;}
    .order-information-form .form-group p{ font-size: 14px; line-height: normal;}
    .detail-blog-content{ gap: 10px;}
    #cartIcon{ padding: 1rem !important;}
    .cart-icon-link svg{ height: 2.5rem !important; width: 2.5rem !important;}
    .cart-icon-price{ font-size: 1.125rem !important;}
    .cart-icon-wrp p{ font-size: 12px;}
    .footer{ padding-top: 20px;}
    .accordion-button{ font-size: 24px; line-height: 28px;}
    .cart-delivery .form-check-label{ flex-direction:  column; text-align: center;}
    .cart-delivery .form-check-label p{ width: 100%;}
    .cart-card-price, .cart-card-upper > span{ font-size: 20px; line-height: 24px;}
    .cart-card-lower,
    .cart-card-upper{ flex-direction: column; gap: 5px; text-align: center;}
    .cart-card{ position: relative;}
    .cart-card-upper > a{ position: absolute; right: 10px; top: 50%; transform: translateY(-50%);}
    .cart-card-wrp{ margin-right: 10px;}
    .footer-btn{ font-size: 18px;}
    .open-time-wrp{ gap: 10px; flex-direction: column;}
    .faq-question{ padding-bottom: 10px;}
    .faq-content{ gap: 10px;}
    .header-upper-right a{ gap: 5px;}
    .data-info-content{ gap: 10px;}
    .data-info-content h2 {font-size: 1.25rem;}
    .data-info-content h3 {font-size: 1.1rem;}
    .data-info-content h4 {font-size: 1rem;}
    .data-info-content ul li {padding-left: 1.5rem;}
    .data-info-content ul li::before {width: 0.85rem;height: 0.85rem;top: 0.35rem;}
    .document-card figure img{ width: 32px; height: 32px;}
    .detail-blog-wrp{ gap: 10px;}
    .mobile-menu-item{ font-size: 1.5rem;}
}