/*=========================================================
  Franklin Theme v1.0
  Responsive Stylesheet
==========================================================*/


/*=========================================================
Large Desktop
1400px
==========================================================*/

@media (max-width:1400px){

.container{
    max-width:1140px;
}

.desktop-menu ul{
    gap:28px;
}

.header-search{
    width:220px;
}

}


/*=========================================================
Laptop
1200px
==========================================================*/

@media (max-width:1200px){

.container{
    max-width:960px;
}

.header-wrapper{
    height:85px;
}

.desktop-menu ul{
    gap:22px;
}

.desktop-menu a{
    font-size:14px;
}

.header-search{
    width:200px;
}

.section{
    padding:70px 0;
}

.section-title h2{
    font-size:36px;
}

}


/*=========================================================
Tablet Landscape
992px
==========================================================*/

@media (max-width:992px){

.topbar{
    display:none;
}

.header-wrapper{

    height:80px;

}

.desktop-menu{

    display:none;

}

.header-search{

    display:none;

}

.mobile-toggle{

    display:flex;

    align-items:center;

    justify-content:center;

}

.site-logo img{

    max-height:50px;

}

.header-right{

    gap:10px;

}

.header-icon{

    width:40px;

    height:40px;

}

.section{

    padding:60px 0;

}

.section-title{

    margin-bottom:40px;

}

.section-title h2{

    font-size:34px;

}

}


/*=========================================================
Tablet Portrait
768px
==========================================================*/

@media (max-width:768px){

.header-wrapper{

    height:75px;

}

.site-logo img{

    max-height:45px;

}

.header-icon{

    width:38px;

    height:38px;

    font-size:16px;

}

.cart-area{

    display:none;

}

.section{

    padding:50px 0;

}

.section-title h2{

    font-size:30px;

}

.section-title p{

    font-size:14px;

}

}


/*=========================================================
Mobile
576px
==========================================================*/

@media (max-width:576px){

.header-wrapper{

    height:70px;

}

.site-logo img{

    max-height:42px;

}

.header-right{

    gap:8px;

}

.header-icon{

    width:36px;

    height:36px;

}

.mobile-toggle{

    width:42px;

    height:42px;

}

.section{

    padding:45px 0;

}

.section-title{

    margin-bottom:30px;

}

.section-title h2{

    font-size:26px;

}

.section-title p{

    font-size:13px;

}

}


/*=========================================================
Small Mobile
480px
==========================================================*/

@media (max-width:480px){

.site-logo img{

    max-width:170px;

}

.header-wrapper{

    height:68px;

}

.header-icon{

    width:34px;

    height:34px;

    font-size:15px;

}

.mobile-toggle{

    width:40px;

    height:40px;

}

.section-title h2{

    font-size:24px;

}

}


/*=========================================================
Extra Small Mobile
375px
==========================================================*/

@media (max-width:375px){

.site-logo img{

    max-width:145px;

}

.header-wrapper{

    height:65px;

}

.header-icon{

    width:32px;

    height:32px;

}

.mobile-toggle{

    width:36px;

    height:36px;

}

.section{

    padding:40px 0;

}

.section-title h2{

    font-size:22px;

}

}


/*=========================================================
Landscape Phones
==========================================================*/

@media (max-height:500px){

.header-wrapper{

    height:65px;

}

}


/*=========================================================
Future Components
==========================================================*/

/*

Hero
Featured Categories
Best Sellers
Testimonials
Footer

Responsive styles will be added
section-by-section as we build
the homepage.

*/

@media(max-width:992px){

.hero-section{

padding:60px 0;

}

.hero-content{

text-align:center;

padding:0;

margin-bottom:40px;

}

.hero-content h1{

font-size:42px;

}

.hero-buttons{

justify-content:center;

}

}

@media(max-width:576px){

.hero-content h1{

font-size:32px;

}

.hero-content p{

font-size:15px;

}

.hero-buttons{

flex-direction:column;

}

}

/*=========================================================
TRUST SECTION
=========================================================*/

@media(max-width:992px){

.trust-section{

    padding:60px 0;

}

.trust-box{

    padding:30px 20px;

}

}

@media(max-width:576px){

.trust-section{

    padding:45px 0;

}

.trust-icon{

    width:65px;

    height:65px;

    font-size:28px;

}

.trust-box h5{

    font-size:18px;

}

}
/*=========================================
Health Categories
=========================================*/

@media(max-width:992px){

.health-category-section{

padding:70px 0;

}

.health-image img{

height:150px;

}

}

@media(max-width:576px){

.health-category-section{

padding:50px 0;

}

.health-content{

padding:18px;

}

.health-content h5{

font-size:17px;

}

.health-image{

padding:20px;

}

.health-image img{

height:120px;

}

}

/*=========================================
Franklin Collection
=========================================*/

@media(max-width:992px){

.product-image img{

height:180px;

}

}

@media(max-width:768px){

.product-content{

padding:18px;

}

.product-content h5{

font-size:16px;

}

.product-image img{

height:150px;

}

}

@media(max-width:576px){

.product-image{

padding:15px;

}

.product-image img{

height:130px;

}

.product-content h5{

font-size:15px;

min-height:auto;

}

.product-content p{

display:none;

}

.price,
.special-price{

font-size:18px;

}

}
@media(max-width:991px){

.why-image{

margin-bottom:40px;

}

.why-item{

padding:18px;

}

.why-icon{

width:55px;
height:55px;
font-size:24px;

}

}

@media(max-width:576px){

.why-item{

flex-direction:column;
text-align:center;
align-items:center;

}

}

/*=========================================================
PROMOTIONAL BANNER
=========================================================*/

@media(max-width:992px){

.promo-banner{

padding:70px 0;
text-align:center;

}

.promo-content h2{

font-size:36px;

}

.promo-buttons{

justify-content:center;

margin-bottom:40px;

}

}

@media(max-width:576px){

.promo-content h2{

font-size:28px;

}

.promo-content p{

font-size:15px;

}

.promo-buttons .btn{

width:100%;

}

}
/*=========================================
PROMO CARDS
=========================================*/

@media(max-width:992px){

.promo-cards{

padding:70px 0;

}

.promo-card{

padding:35px;

}

}

@media(max-width:576px){

.promo-card{

padding:25px;

}

.promo-card h3{

font-size:26px;

}

.promo-card .btn{

width:100%;

}

}

/* Footer */

@media(max-width:768px){

.footer{

text-align:center;

}

.footer-social{

justify-content:center;

}

.footer-bottom{

text-align:center;

}

.footer-bottom .text-md-end{

margin-top:10px;

text-align:center !important;

}

}


/* Desktop: left-align main navigation */
@media (min-width: 992px) {
    .menu-wrapper .navbar-collapse,
    .franklin-navbar .navbar-collapse,
    .franklin-navbar .navbar-collapse.justify-content-center,
    .desktop-menu {
        justify-content: flex-start !important;
    }

    .menu-wrapper .navbar-nav,
    .franklin-navbar .navbar-nav {
        margin-left: 0 !important;
        margin-right: auto !important;
    }
}

/* Mobile header */
@media (max-width: 767.98px) {

    .main-header {
        padding: 12px 0 !important;
    }

    .main-header .row {
        flex-wrap: nowrap;
    }

    .header-logo {
        display: flex;
        align-items: center;
    }

    .header-logo .header-logo-img {
        width: auto;
        max-width: 100%;
        max-height: 82px !important;
    }

    .header-right {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end;
        gap: 8px !important;
    }

    .header-icon {
        flex: 0 0 40px;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px;
        font-size: 17px;
    }

    .franklin-cart {
        flex: 0 0 auto;
        min-width: 0;
    }

    /* Mobile cart becomes a clean icon button */
    .header-cart {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px;
        padding: 0 !important;
        gap: 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50% !important;
        background: #f8fbf7;
    }

    .header-cart .cart-text {
        display: none !important;
    }

    .header-cart .cart-icon {
        font-size: 21px;
        line-height: 1;
    }

    .header-cart .cart-count {
        top: -6px;
        right: -8px;
    }

    /* Keep mobile mini-cart inside the screen */
    .franklin-cart-menu {
        width: calc(100vw - 24px) !important;
        min-width: 0 !important;
        max-width: 380px !important;
    }

    /* Keep the generated menu/hamburger aligned to the left */
    .menu-wrapper .navbar,
    .franklin-navbar {
        justify-content: flex-start;
    }

    .navbar-toggler {
        margin-left: 0 !important;
        margin-right: auto !important;
    }
}

/* Extra-small phones */
@media (max-width: 390px) {

    .header-right {
        gap: 6px !important;
    }

    .header-icon {
        flex-basis: 36px;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px;
        font-size: 16px;
    }

    .header-cart {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px;
    }

    .header-cart .cart-icon {
        font-size: 19px;
    }

    .header-logo .header-logo-img {
        max-height: 76px !important;
    }
}