/* =========================================================
   RESPONSIVE STYLES
   Battery Solutions Template
========================================================= */

/* =========================================================
   LARGE DESKTOP (1400px+)
========================================================= */

@media (min-width: 1400px){

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

    .section-title{
        font-size:3.5rem;
    }

    .promo-title{
        font-size:3.4rem;
    }

    .container-fluid{
        max-width:1600px;
    }

}

/* =========================================================
   DESKTOP (1200px - 1399px)
========================================================= */

@media (max-width: 1399px){

    .hero-title{
        font-size:3rem;
    }

    .application-card{
        min-width:220px;
    }

    .brand-card{
        min-width:280px;
    }

}

/* =========================================================
   LARGE TABLET / SMALL DESKTOP (992px - 1199px)
========================================================= */

@media (max-width: 1199px){

    .hero-section{
        min-height:auto;
        padding:0.1rem 0;
    }

    .hero-title{
        font-size:3rem;
    }

    .hero-description{
        font-size:1.05rem;
    }

    .battery-search-card{
        margin:0.3rem auto 0;
        max-width:100%;
    }

    .service-item{
        border-left:none;
        border-top:1px solid rgba(255,255,255,.08);
    }

    .promo-banner-large,
    .promo-banner-side{
        min-height:460px;
    }

    .promo-title{
        font-size:2.6rem;
    }

    .section-title{
        font-size:2.8rem;
    }

}

/* =========================================================
   TABLET (768px - 991px)
========================================================= */

@media (max-width: 991px){

    .top-header{
        text-align:center;
    }

    .header-contact{
        justify-content:center !important;
        margin-top:1rem;
    }

    .btn-quote{
        width:100%;
        max-width:320px;
    }

    .main-navbar .navbar-nav .nav-link{
        padding:1rem 0;
    }

    .navbar-actions{
        padding:1rem 0;
        border-top:1px solid rgba(255,255,255,.1);
        margin-top:1rem;
    }

    .hero-section{
        padding:0.1rem 0;
    }

    .hero-title{
        font-size:2.5rem;
        text-align:center;
    }

    .hero-description{
        text-align:center;
        margin:0 auto;
    }

    .hero-buttons{
        justify-content:center;
    }

    .hero-features{
        text-align:center;
    }

    .feature-item{
        justify-content:center;
    }

    .service-highlight{
        padding:1.5rem;
    }

    .service-item{
        padding:1.5rem 1rem;
    }

    .slider-controls{
        justify-content:center;
        margin-top:1rem;
    }

    .application-card{
        min-width:220px;
    }

    .brand-card{
        min-width:260px;
    }

    .promo-content{
        padding:2rem;
    }

    .promo-title{
        font-size:2.3rem;
    }

    .dockside-content{
        text-align:center;
    }

    .feature-row{
        text-align:start;
    }

    .footer-widget{
        margin-bottom:2rem;
    }

    .social-icons{
        justify-content:center;
    }

    .footer-bottom-links{
        justify-content:center;
    }

}

/* =========================================================
   MOBILE LANDSCAPE (576px - 767px)
========================================================= */

@media (max-width: 767px){

    .container-fluid{
        padding-left:1rem !important;
        padding-right:1rem !important;
    }

    .section-title{
        font-size:2.2rem;
        text-align:center;
    }

    .section-description{
        text-align:center;
        font-size:1rem;
    }

    .hero-section{
        min-height:auto;
        padding:0.1rem 0;
    }

    .hero-title{
        font-size:1.8rem;
        line-height:1;
    }

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

    .hero-buttons{
        flex-direction:column;
        align-items:stretch;
    }

    .btn-hero-primary,
    .btn-hero-secondary,
    .btn-hero-whatsapp{
        width:100%;
        min-width:100%;
    }

    .feature-item{
        flex-direction:column;
        text-align:center;
    }

    .battery-search-card{
        border-radius:18px;
    }

    .search-card-header{
        padding:0.5rem;
    }

    .search-card-header h3{
        font-size:1.6rem;
    }

    .battery-search-form{
        padding:1.5rem;
    }

    .service-highlight .d-flex{
        flex-direction:column;
        text-align:center;
    }

    .service-icon-large{
        margin-right:0;
        margin-bottom:1rem;
    }

    .application-card{
        min-width:220px;
    }

    .application-image{
        height:180px;
    }

    .promo-banner-large,
    .promo-banner-side{
        min-height:380px;
    }

    .promo-content{
        padding:1.5rem;
    }

    .promo-title{
        font-size:2rem;
    }

    .promo-actions{
        flex-direction:column;
    }

    .promo-actions .btn{
        width:100%;
    }

    .brand-card{
        min-width:240px;
        padding:1.5rem;
    }

    .dockside-card{
        padding:1.5rem;
        border-radius:18px;
    }

    .feature-row{
        flex-direction:column;
        text-align:center;
    }

    .feature-icon{
        margin:0 auto 1rem;
    }

    .coverage-item{
        justify-content:center;
        text-align:center;
    }

    .stat-card{
        margin-bottom:1rem;
    }

    .newsletter-content{
        text-align:center;
        margin-bottom:1.5rem;
    }

    .newsletter-form .input-group{
        flex-direction:column;
    }

    .newsletter-form .form-control{
        border-radius:10px;
        margin-bottom:.75rem;
    }

    .newsletter-form .btn{
        border-radius:10px;
        width:100%;
    }

    .payment-methods,
    .social-links{
        text-align:center;
    }

    .payment-icons{
        justify-content:center;
    }

}

/* =========================================================
   MOBILE PORTRAIT (480px - 575px)
========================================================= */

@media (max-width: 575px){

    .logo-main{
        font-size:1.6rem;
    }

    .logo-sub{
        font-size:.7rem;
        letter-spacing:3px;
    }

    .hero-title{
        font-size:1.3rem;
    }

    .hero-label{
        font-size:.8rem;
        letter-spacing:2px;
    }

    .section-title{
        font-size:1.9rem;
    }

    .section-label{
        font-size:.8rem;
    }

    .contact-item{
        flex-direction:column;
        text-align:center;
        gap:.35rem;
    }

    .search-card-header h3{
        font-size:1.4rem;
    }

    .service-item{
        padding:1.25rem .75rem;
    }

    .service-icon{
        width:52px;
        height:52px;
    }

    .application-card{
        min-width:220px;
    }

    .application-content{
        padding:1.25rem;
    }

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

    .promo-description{
        font-size:.95rem;
    }

    .brand-card{
        min-width:220px;
    }

    .brand-tags span{
        font-size:.75rem;
    }

    .dockside-card{
        padding:1.25rem;
    }

    .card-icon{
        width:60px;
        height:60px;
    }

    .card-icon i{
        font-size:1.6rem;
    }

    .emergency-box h2{
        font-size:1.8rem;
    }

    .footer-logo h2{
        font-size:1.8rem;
    }

    .footer-bottom{
        text-align:center;
    }

    .footer-bottom-links{
        gap:.75rem;
    }

}

/* =========================================================
   EXTRA SMALL DEVICES (under 400px)
========================================================= */

@media (max-width: 399px){

    .hero-title{
        font-size:1rem;
    }

    .section-title{
        font-size:1.7rem;
    }

    .application-card{
        min-width:210px;
    }

    .brand-card{
        min-width:200px;
    }

    .slider-btn{
        width:40px;
        height:40px;
    }

    .btn{
        padding:.85rem 1.25rem;
        font-size:.9rem;
    }

}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce){

    *{
        animation:none !important;
        transition:none !important;
        scroll-behavior:auto !important;
    }

}