@charset "utf-8";

/*==================================================
BARGIIN
RESPONSIVE.CSS
FINAL MOBILE / TABLET VERSION
==================================================*/


/*==================================================
GLOBAL
==================================================*/

*{
    box-sizing:border-box;
}

html,
body{
    max-width:100%;
    overflow-x:hidden;
}

img{
    max-width:100%;
    height:auto;
}

.container{
    width:min(92%,1200px);
    margin:0 auto;
}


/*==================================================
TABLET GENERAL
==================================================*/

@media(max-width:992px){

    section{
        padding:90px 0;
    }

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

    .section-description{
        width:100%;
    }

}


/*==================================================
DESKTOP HEADER OVERLAY
==================================================*/

@media(min-width:993px){

    .header-overlay{
        display:none;
    }

}


/*==================================================
HEADER — TABLET
==================================================*/

@media(max-width:992px){

    .header{
        height:80px;
        z-index:10000;
    }

    .header .container{
        height:80px;
        display:flex;
        align-items:center;
        justify-content:space-between;
    }

    .navbar{
        position:fixed;

        top:80px;
        right:-100%;

        width:320px;
        max-width:88vw;

        height:calc(100vh - 80px);

        background:#fff;

        overflow-y:auto;
        overflow-x:hidden;

        transition:right .35s ease;

        box-shadow:-10px 0 30px rgba(0,0,0,.10);

        z-index:9999;
    }

    .navbar.active{
        right:0;
    }

    .navbar ul{
        display:flex;
        flex-direction:column;

        width:100%;

        gap:0;

        padding:18px 0 30px;
        margin:0;

        list-style:none;
    }

    .navbar li{
        width:100%;
        position:relative;
    }

    .navbar > ul > li > a{
        display:flex;

        align-items:center;
        justify-content:space-between;

        width:100%;

        padding:16px 24px;

        color:#243b2d;

        border-bottom:1px solid rgba(0,0,0,.06);

        text-decoration:none;
    }

    /*==================================
    MOBILE DROPDOWN
    ==================================*/

    .dropdown-menu{
        position:static !important;

        display:none;

        width:100%;

        min-width:100%;

        padding:0;
        margin:0;

        opacity:1 !important;
        visibility:visible !important;
        transform:none !important;

        background:#f6f5ef;

        box-shadow:none !important;

        border-radius:0 !important;
    }

    .dropdown.active > .dropdown-menu{
        display:block;
    }

    .dropdown-menu a{
        display:block;

        padding:13px 38px;

        color:#526057;

        border-bottom:1px solid rgba(0,0,0,.04);

        text-decoration:none;
    }

    /*==================================
    HEADER SOCIAL
    ==================================*/

    .header-social{
        display:flex;

        align-items:center;
        justify-content:center;

        flex-wrap:wrap;

        gap:12px;

        width:100%;

        padding:22px 20px 28px;
    }

    .header-social a{
        display:flex;

        align-items:center;
        justify-content:center;

        width:42px;
        height:42px;

        flex:0 0 42px;

        border-radius:50%;

        background:#f4f3ed;
    }

    .header-social img{
        display:block;

        width:25px;
        height:25px;

        object-fit:contain;
    }

    /*==================================
    SEARCH BUTTON
    ==================================*/

    .search-btn{
        width:42px;
        height:42px;

        margin-left:10px;
    }

    /*==================================
    MOBILE BUTTON
    ==================================*/

    .menu-btn{
        display:flex;

        width:42px;
        height:42px;

        padding:8px;

        flex-direction:column;
        align-items:center;
        justify-content:center;

        gap:5px;

        cursor:pointer;
    }

    .menu-btn span{
        display:block;

        width:23px;
        height:2px;

        border-radius:5px;

        background:#243b2d;

        transition:.3s ease;
    }

    /*==================================
    OVERLAY
    ==================================*/

    .header-overlay{
        position:fixed;

        inset:0;

        background:rgba(0,0,0,.35);

        opacity:0;
        visibility:hidden;

        transition:.3s ease;

        z-index:9998;
    }

    .header-overlay.active{
        opacity:1;
        visibility:visible;
    }

}


/*==================================================
HEADER — MOBILE
==================================================*/

@media(max-width:768px){

    .header{
        height:72px;
    }

    .header .container{
        height:72px;
    }

    .navbar{
        top:72px;

        width:100%;
        max-width:100%;

        height:calc(100vh - 72px);
    }

    .logo img{
        height:48px;
        width:auto;
    }

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

    .menu-btn{
        width:42px;
        height:42px;
    }

    .navbar > ul > li > a{
        padding:15px 20px;
    }

    .dropdown-menu a{
        padding:13px 32px;
    }

}


/*==================================================
SEARCH — MOBILE
==================================================*/

@media(max-width:768px){

    .search-container{
        position:absolute;

        top:calc(100% + 8px);

        left:8px;
        right:8px;

        width:auto;
        max-width:none;

        margin:0;

        z-index:10001;
    }

    .search-box{
        width:100%;
        max-width:none;

        box-sizing:border-box;
    }

    .search-box input{
        width:100%;
        max-width:100%;

        box-sizing:border-box;
    }

    .search-results{
        width:100%;
        max-width:100%;

        box-sizing:border-box;

        overflow:hidden;
    }

}


/*==================================================
SEARCH — SMALL MOBILE
==================================================*/

@media(max-width:480px){

    .search-container{
        left:7px;
        right:7px;
    }

    .search-box{
        width:100%;
    }

}


/*==================================================
HERO
==================================================*/

@media(max-width:992px){

    .hero{
        padding-top:130px;
        min-height:auto;
    }

    .hero-container{
        grid-template-columns:1fr;

        gap:50px;

        text-align:center;
    }

    .hero-content{
        order:2;
    }

    .hero-image{
        order:1;

        justify-content:center;
    }

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

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

}

@media(max-width:768px){

    .hero{
        padding-top:110px;
        padding-bottom:70px;
    }

    .hero-title{
        font-size:2rem;
        line-height:1.7;
    }

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

    .hero-buttons{
        flex-direction:column;
        gap:16px;
        align-items:center;
    }

    .hero-buttons a{
        width:100%;
        max-width:320px;

        justify-content:center;
    }

    .hero-stats{
        flex-wrap:wrap;
        gap:18px;
    }

    .hero-image img{
        width:100%;
        max-width:420px;
    }

}

@media(max-width:480px){

    .hero{
        padding-top:100px;
    }

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

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

    .hero-image img{
        max-width:300px;
    }

    .hero-stats{
        flex-direction:column;
        align-items:center;
    }

}


/*==================================================
FEATURED HERB
==================================================*/

@media(max-width:992px){

    .featured-herb{
        padding:90px 0;
    }

    .featured-container{
        grid-template-columns:1fr;

        gap:50px;

        text-align:center;
    }

    .featured-image{
        order:1;

        justify-content:center;
    }

    .featured-content{
        order:2;
    }

    .featured-features{
        justify-content:center;
    }

    .featured-actions{
        justify-content:center;
    }

}

@media(max-width:768px){

    .featured-herb{
        padding:70px 0;
    }

    .featured-title{
        font-size:2rem;
        line-height:1.7;
    }

    .featured-text{
        font-size:1rem;
        line-height:2;
    }

    .featured-image img{
        width:100%;
        max-width:420px;
    }

    .featured-features{
        flex-direction:column;
        gap:18px;
        align-items:center;
    }

    .featured-feature{
        width:100%;
        max-width:320px;

        justify-content:center;
    }

    .featured-actions{
        flex-direction:column;
        gap:16px;
        align-items:center;
    }

    .featured-actions a{
        width:100%;
        max-width:320px;

        justify-content:center;
    }

}

@media(max-width:480px){

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

    .featured-text{
        font-size:.95rem;
    }

    .featured-image img{
        max-width:300px;
    }

}


/*==================================================
PRODUCT CATEGORIES
==================================================*/

@media(max-width:992px){

    .product-categories{
        padding:90px 0;
    }

    .categories-grid{
        grid-template-columns:repeat(2,1fr);

        gap:28px;
    }

}

@media(max-width:480px){

    .category-card{
        border-radius:22px;
    }

    .category-content{
        padding:20px;
    }

    .category-content h3{
        font-size:1.25rem;
    }

    .category-content p{
        font-size:.9rem;
    }

    .category-image img{
        max-height:220px;

        object-fit:cover;
    }

}


/*==================================================
WHY BARGIIN
==================================================*/

@media(max-width:992px){

    .why-bargiin{
        padding:90px 0;
    }

    .why-grid{
        grid-template-columns:repeat(2,1fr);

        gap:28px;
    }

    .why-banner{
        flex-direction:column;

        text-align:center;

        gap:24px;
    }

    .why-banner-content{
        order:2;
    }

    .why-banner-icon{
        order:1;
    }

}

@media(max-width:768px){

    .why-bargiin{
        padding:70px 0;
    }

    .why-grid{
        grid-template-columns:1fr;

        gap:22px;
    }

    .why-card{
        padding:28px 24px;

        text-align:center;
    }

    .why-icon{
        margin:0 auto 18px;
    }

    .why-card h3{
        font-size:1.25rem;
    }

    .why-card p{
        font-size:.95rem;

        line-height:2;
    }

    .why-banner{
        padding:30px 24px;
    }

    .why-banner-content h3{
        font-size:1.5rem;
    }

    .why-banner-content p{
        font-size:.95rem;

        line-height:2;
    }

}

@media(max-width:480px){

    .why-card{
        padding:24px 20px;

        border-radius:20px;
    }

    .why-icon{
        width:60px;
        height:60px;

        font-size:1.4rem;
    }

    .why-card h3{
        font-size:1.15rem;
    }

    .why-banner{
        border-radius:24px;

        padding:24px 18px;
    }

    .why-banner-icon{
        width:72px;
        height:72px;

        font-size:1.8rem;
    }

}


/*==================================================
ABOUT PREVIEW
==================================================*/

@media(max-width:992px){

    .about-preview{
        padding:90px 0;
    }

    .about-container{
        grid-template-columns:1fr;

        gap:60px;

        text-align:center;
    }

    .about-image{
        order:1;

        justify-content:center;
    }

    .about-content{
        order:2;
    }

    .about-features{
        max-width:650px;

        margin:40px auto 0;
    }

}

@media(max-width:768px){

    .about-preview{
        padding:70px 0;
    }

    .about-image img{
        width:100%;
        max-width:380px;
    }

    .about-image-circle{
        width:320px;
        height:320px;
    }

    .about-text{
        font-size:1rem;
        line-height:2.2;
    }

    .about-features{
        gap:18px;
    }

    .about-feature{
        padding:18px;

        text-align:right;
    }

    .about-feature-icon{
        width:54px;
        height:54px;

        font-size:1.25rem;

        flex-shrink:0;
    }

    .about-btn{
        width:100%;

        justify-content:center;

        margin-top:30px;
    }

}

@media(max-width:480px){

    .about-image img{
        max-width:280px;
    }

    .about-image-circle{
        width:250px;
        height:250px;
    }

    .about-text{
        font-size:.95rem;
    }

    .about-feature{
        flex-direction:column;

        text-align:center;

        align-items:center;

        gap:14px;
    }

    .about-feature h4{
        margin-bottom:6px;
    }

    .about-btn{
        padding:15px 24px;
    }

}


/*==================================================
LATEST ARTICLES
==================================================*/

@media(max-width:992px){

    .latest-articles{
        padding:90px 0;
    }

    .articles-grid{
        grid-template-columns:repeat(2,1fr);

        gap:28px;
    }

}

@media(max-width:768px){

    .latest-articles{
        padding:70px 0;
    }

    .articles-grid{
        grid-template-columns:1fr;

        gap:24px;
    }

    .article-card{
        width:100%;

        max-width:420px;

        margin:0 auto;
    }

    .article-image{
        height:230px;
    }

    .article-content{
        padding:22px;
    }

    .article-meta{
        flex-wrap:wrap;

        gap:10px 16px;

        font-size:.8rem;
    }

    .article-content h3{
        font-size:1.25rem;

        line-height:1.8;
    }

    .article-content p{
        font-size:.92rem;

        line-height:2;
    }

    .article-link{
        display:flex;

        align-items:center;
        justify-content:space-between;

        margin-top:20px;
    }

    .articles-more{
        margin-top:35px;

        text-align:center;
    }

    .articles-btn{
        width:100%;

        max-width:320px;

        justify-content:center;
    }

}

@media(max-width:480px){

    .article-card{
        border-radius:20px;
    }

    .article-image{
        height:200px;
    }

    .article-content{
        padding:20px;
    }

    .article-category{
        font-size:.75rem;

        padding:6px 12px;
    }

    .article-content h3{
        font-size:1.15rem;
    }

    .article-content p{
        font-size:.9rem;
    }

    .article-meta{
        font-size:.75rem;
    }

}


/*==================================================
FOOTER
==================================================*/

@media(max-width:992px){

    .footer{
        padding:70px 0 25px;
    }

    .footer-grid{
        grid-template-columns:repeat(2,1fr);

        gap:45px 35px;
    }

    .footer-brand{
        grid-column:1 / -1;

        text-align:center;

        align-items:center;
    }

    .footer-brand p{
        max-width:600px;

        margin:22px auto;

        line-height:2;
    }

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

}

@media(max-width:768px){

    .footer{
        padding:60px 0 20px;
    }

    .footer-grid{
        grid-template-columns:1fr;

        gap:38px;

        text-align:center;
    }

    .footer-brand{
        grid-column:auto;
    }

    .footer-brand p{
        font-size:.95rem;

        line-height:2.1;
    }

    .footer-column{
        align-items:center;
    }

    .footer-column h3{
        font-size:1.15rem;

        margin-bottom:18px;
    }

    .footer-column ul{
        align-items:center;
    }

    .footer-column li{
        margin-bottom:12px;
    }

    .footer-contact ul{
        align-items:center;
    }

    .footer-contact li{
        justify-content:center;
    }

    .footer-social{
        gap:18px;
    }

    .footer-bottom{
        margin-top:45px;

        padding-top:20px;

        flex-direction:column;

        text-align:center;

        gap:15px;
    }

    .footer-bottom p{
        font-size:.85rem;
    }

    .footer-links{
        justify-content:center;

        gap:18px;

        flex-wrap:wrap;
    }

}

@media(max-width:480px){

    .footer{
        padding:50px 0 18px;
    }

    .footer-logo img{
        width:145px;
    }

    .footer-brand p{
        font-size:.9rem;
    }

    .footer-column h3{
        font-size:1.1rem;
    }

    .footer-column a,
    .footer-contact a{
        font-size:.9rem;
    }

    .footer-social{
        gap:16px;
    }

    .footer-social a{
        width:42px;
        height:42px;
    }

    .footer-social img{
        width:28px;
        height:28px;
    }

    .footer-bottom p{
        font-size:.78rem;

        line-height:1.8;
    }

    .footer-links{
        gap:14px;
    }

    .footer-links a{
        font-size:.8rem;
    }

}


/*==================================================
PRELOADER
==================================================*/

body.preloader-active{
    overflow:hidden;
}

html.preloader-active{
    overflow:hidden;
}

html.preloader-active body > *:not(#preloader){
    visibility:hidden;
}

html.preloader-active #preloader{
    visibility:visible;
}

body.preloader-done,
html.preloader-done{
    overflow:auto;
}

body.preloader-done::before,
body.preloader-done::after{
    opacity:0;

    visibility:hidden;
}

#preloader{
    position:fixed;

    inset:0;

    width:100%;
    height:100vh;

    display:flex;

    align-items:center;
    justify-content:center;

    background:#1f3d2b;

    z-index:999999;

    opacity:1;
    visibility:visible;

    pointer-events:auto;

    animation:preloaderFade 1s ease 2s forwards;
}

#preloader::before{
    content:"";

    position:relative;

    width:200px;
    height:200px;

    background-image:url("../images/logo/logo-white.webp");

    background-repeat:no-repeat;

    background-position:center;

    background-size:contain;

    z-index:2;

    animation:preloaderLogo 1.4s ease-in-out infinite;
}

#preloader::after{
    content:"";

    position:absolute;

    width:220px;
    height:220px;

    border:1px solid rgba(255,255,255,.14);

    border-radius:50%;

    box-shadow:
        0 0 0 30px rgba(255,255,255,.025),
        0 0 0 60px rgba(255,255,255,.018),
        0 0 0 90px rgba(255,255,255,.012);

    animation:preloaderNature 7s linear infinite;
}


/*==================================================
PRELOADER ANIMATIONS
==================================================*/

@keyframes preloaderLogo{

    0%,
    100%{
        opacity:.7;

        transform:scale(.96);
    }

    50%{
        opacity:1;

        transform:scale(1);
    }

}

@keyframes preloaderNature{

    0%{
        transform:rotate(0deg) scale(.95);
    }

    50%{
        transform:rotate(180deg) scale(1);
    }

    100%{
        transform:rotate(360deg) scale(.95);
    }

}

@keyframes preloaderFade{

    0%{
        opacity:1;
        visibility:visible;
    }

    99%{
        opacity:0;
        visibility:visible;
    }

    100%{
        opacity:0;
        visibility:hidden;

        pointer-events:none;
    }

}


/*==================================================
PRELOADER — MOBILE
==================================================*/

@media(max-width:768px){

    #preloader::before{
        width:180px;
        height:180px;
    }

    #preloader::after{
        width:220px;
        height:220px;

        box-shadow:
            0 0 0 30px rgba(255,255,255,.025),
            0 0 0 60px rgba(255,255,255,.018),
            0 0 0 90px rgba(255,255,255,.012);
    }

}

@media(max-width:480px){

    #preloader::before{
        width:160px;
        height:160px;
    }

    #preloader::after{
        width:200px;
        height:200px;
    }

}


/*==================================================
PRODUCT GALLERY
==================================================*/

.product-gallery{
    position:relative;

    width:100%;

    height:calc(100vh - 90px);

    margin-top:90px;

    overflow:hidden;

    background:#f4f1e8;
}

.product-gallery-track{
    display:flex;

    width:100%;
    height:100%;

    gap:0;

    transform:translateX(0);

    transition:transform .65s ease-in-out;

    will-change:transform;
}

.product-gallery-slide{
    flex:0 0 100%;

    width:100%;
    height:100%;

    display:flex;

    align-items:center;
    justify-content:center;

    flex-shrink:0;

    text-decoration:none;
}

.product-gallery-slide img{
    width:100%;
    height:100%;

    display:block;

    object-fit:contain;

    object-position:center;

    user-select:none;

    -webkit-user-drag:none;
}


/*==================================================
PRODUCT GALLERY NAVIGATION
==================================================*/

.product-gallery-prev,
.product-gallery-next{
    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:48px;
    height:48px;

    display:flex;

    align-items:center;
    justify-content:center;

    padding:0;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.9);

    color:#1f3d2b;

    cursor:pointer;

    z-index:20;

    box-shadow:0 5px 18px rgba(0,0,0,.12);

    transition:
        background .2s ease,
        color .2s ease;
}

.product-gallery-prev{
    right:20px;
}

.product-gallery-next{
    left:20px;
}

.product-gallery-prev:hover,
.product-gallery-next:hover{
    background:#1f3d2b;

    color:#fff;
}


/*==================================================
PRODUCT GALLERY DOTS
==================================================*/

.product-gallery-dots{
    position:absolute;

    left:50%;
    bottom:18px;

    transform:translateX(-50%);

    display:flex;

    align-items:center;

    gap:8px;

    z-index:20;
}

.product-gallery-dots button{
    width:9px;
    height:9px;

    padding:0;

    border:none;

    border-radius:50%;

    background:rgba(31,61,43,.3);

    cursor:pointer;
}

.product-gallery-dots button.active{
    width:26px;

    border-radius:10px;

    background:#1f3d2b;
}


/*==================================================
PRODUCT GALLERY — TABLET
==================================================*/

@media(max-width:992px){

    .product-gallery{
        height:calc(100vh - 85px);

        margin-top:85px;
    }

}


/*==================================================
PRODUCT GALLERY — MOBILE
==================================================*/

@media(max-width:768px){

    .product-gallery{
        height:65vh;

        min-height:420px;
        max-height:600px;

        margin-top:72px;
    }

    .product-gallery-slide{
        width:100%;
        height:100%;
    }

    .product-gallery-slide img{
        width:100%;
        height:100%;

        object-fit:contain;

        object-position:center;
    }

    .product-gallery-prev,
    .product-gallery-next{
        width:40px;
        height:40px;
    }

    .product-gallery-prev{
        right:10px;
    }

    .product-gallery-next{
        left:10px;
    }

    .product-gallery-dots{
        bottom:14px;
    }

}


/*==================================================
PRODUCT GALLERY — SMALL MOBILE
==================================================*/

@media(max-width:480px){

    .product-gallery{
        height:58vh;

        min-height:350px;
        max-height:500px;

        margin-top:68px;
    }

    .product-gallery-prev,
    .product-gallery-next{
        width:36px;
        height:36px;

        font-size:12px;
    }

}


/*==================================================
GENERAL MOBILE SAFETY
==================================================*/

@media(max-width:768px){

    body,
    main,
    section,
    header,
    footer{
        max-width:100%;
    }

    .container{
        width:94%;
        max-width:100%;
    }

    section{
        padding:70px 0;
    }

    .section-header{
        margin-bottom:45px;
    }

    .section-title{
        font-size:1.75rem;

        line-height:1.6;
    }

    .section-description{
        width:100%;

        font-size:.95rem;

        line-height:2;
    }

}

@media(max-width:480px){

    .container{
        width:92%;
    }

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

    .section-badge{
        font-size:.78rem;
    }

}