/*==================================================
            XOOMKART PREMIUM THEME
===================================================*/

:root {


    /*=========================================
                    MAIN COLORS
    ==========================================*/

    --primary-color: #006400;
    --secondary-color: #6CD900;
    --light-green: #B9FF63;
    --theme-white: #FFFFFF;
    --theme-black: #111111;
    --theme-gray: #666666;
    --theme-light: #F6FFF3;
    --theme-border: #D9F4CF;



    /*=========================================
                  WEBSITE COLORS
    ==========================================*/

    --swiper-theme-color: #006400;

    --twc-primary-50: #F6FFF3;
    --twc-primary-100: #E9FFD9;
    --twc-primary-200: #D2FFB1;
    --twc-primary-300: #B9FF63;
    --twc-primary-400: #94F531;
    --twc-primary-500: #6CD900;
    --twc-primary-600: #2A9600;
    --twc-primary-700: #006400;
    --twc-primary-800: #005000;
    --twc-primary-900: #003D00;



    /*=========================================
                    SHADOWS
    ==========================================*/

    --shadow-sm:
    0 5px 15px rgba(0,100,0,.08);


    --shadow-md:
    0 12px 30px rgba(0,100,0,.12);


    --shadow-lg:
    0 20px 45px rgba(0,100,0,.18);


    --shadow-xl:
    0 25px 60px rgba(0,100,0,.25);



    /*=========================================
                  BUTTON SHADOW
    ==========================================*/

    --button-shadow:
    0 15px 35px rgba(108,217,0,.30);



    /*=========================================
                  BORDER RADIUS
    ==========================================*/

    --radius-sm:10px;
    --radius-md:18px;
    --radius-lg:25px;
    --radius-xl:35px;


}



/*==================================================
                    BODY
===================================================*/


body {

    background: #FFFFFF;
    color: #111111;
    overflow-x: hidden;

}



/*==================================================
                 COMMON COLORS
===================================================*/


.text-theme {

    color: var(--primary-color);

}


.text-green {

    color: var(--secondary-color);

}


.bg-theme {

    background: var(--theme-light);

}


.bg-primary {

    background: var(--primary-color);

}


.bg-secondary {

    background: var(--secondary-color);

}


.border-theme {

    border: 1px solid var(--theme-border);

}



/*==================================================
                PREMIUM GRADIENTS
===================================================*/


.green-gradient {


    background: linear-gradient(

            135deg,

            #006400,

            #2A9600,

            #6CD900

    );



}



.green-gradient-light {


    background: linear-gradient(

            135deg,

            #F6FFF3,

            #FFFFFF,

            #F6FFF3

    );


}




/*==================================================
                 PREMIUM HOVER
===================================================*/


.theme-hover {

    transition: .5s ease;

}


.theme-hover:hover {


    transform: translateY(-6px);

    box-shadow: var(--shadow-lg);

}



/*==================================================
                 SECTION DESIGN
===================================================*/


.section-space {

    padding-top: 80px;
    padding-bottom: 80px;

}


.section-title {


    color: var(--primary-color);

    font-size: 35px;

    font-weight: 700;

}


.section-subtitle {


    color: #666666;

    font-size: 17px;

}



/*==================================================
                 PREMIUM CARD
===================================================*/


.premium-card {


    background: #FFFFFF;

    border-radius: 25px;

    border: 1px solid var(--theme-border);

    box-shadow: var(--shadow-sm);

    transition: .5s ease;


}


.premium-card:hover {


    transform: translateY(-8px);

    box-shadow: var(--shadow-xl);


}




/*==================================================
                CUSTOM SCROLL BAR
===================================================*/


::-webkit-scrollbar {

    width: 7px;

}


::-webkit-scrollbar-track {

    background: #F6FFF3;

}


::-webkit-scrollbar-thumb {


    background:

            linear-gradient(

                    #006400,

                    #6CD900

            );


    border-radius: 50px;

}


::-webkit-scrollbar-thumb:hover {

    background: #006400;

}




/*==================================================
                 IMAGE EFFECT
===================================================*/


.theme-image {


    transition: .7s ease;

}


.theme-image:hover {


    transform: scale(1.06);

}



/*==================================================
                    LINKS
===================================================*/


a{

    transition:.4s ease;

    text-decoration:none;

}


a:hover{

    color:var(--primary-color);

}



/*==================================================
                  MOBILE DESIGN
===================================================*/


@media(max-width:768px){


    .section-space{

        padding-top:50px;
        padding-bottom:50px;

    }


    .section-title{


        font-size:28px;

    }


}
/*==================================================
            XOOMKART PREMIUM HEADER
===================================================*/


header{

    background:#FFFFFF;

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

}


.navbar{

    background:#FFFFFF !important;

    transition:.5s ease;

}


/*==================================================
                    LOGO
===================================================*/


.brand-logo img{


    max-width:240px;

    transition:.6s ease;

}


.brand-logo img:hover{


    transform:scale(1.05);


    filter:

    drop-shadow(
    0 15px 30px
    rgba(108,217,0,.35));


}



/*==================================================
                  NAVBAR MENU
===================================================*/


.nav-link{


    color:#111111 !important;

    font-size:17px;

    font-weight:600;

    transition:.4s ease;

    position:relative;

    padding:15px !important;


}


.nav-link:hover{


    color:#006400 !important;

}



.nav-link::after{


    content:"";

    position:absolute;

    left:15px;
    bottom:8px;

    width:0%;

    height:3px;

    background:

    linear-gradient(

    135deg,

    #006400,

    #6CD900

    );


    transition:.5s ease;


}


.nav-link:hover::after{


    width:65%;

}



/*==================================================
                  ACTIVE MENU
===================================================*/


.active .nav-link{


    color:#006400 !important;

    font-weight:700;


}



/*==================================================
                SEARCH BOX
===================================================*/


.search-box{


    width:100%;

    height:55px;

    border:none;

    outline:none;

    border-radius:50px;

    padding-left:25px;

    padding-right:20px;

    background:#F6FFF3;

    border:1px solid #D9F4CF;

    transition:.5s ease;


}


.search-box:focus{


    box-shadow:

    0 15px 35px

    rgba(108,217,0,.20);


}



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


.search-btn{


    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    cursor:pointer;


    background:

    linear-gradient(

    135deg,

    #006400,

    #6CD900

    );


    color:white;

    transition:.5s ease;


}


.search-btn:hover{


    transform:translateY(-3px);



    box-shadow:

    0 15px 35px

    rgba(108,217,0,.30);


}




/*==================================================
                 LOGIN BUTTON
===================================================*/


.login-btn{


    padding:14px 28px;

    border:none;

    border-radius:50px;

    font-size:16px;

    font-weight:700;

    cursor:pointer;


    background:white;

    color:#006400;

    border:2px solid #006400;

    transition:.5s ease;


}


.login-btn:hover{


    background:#006400;

    color:white;

}



/*==================================================
              REGISTER BUTTON
===================================================*/


.register-btn{


    padding:14px 28px;

    border:none;

    border-radius:50px;

    cursor:pointer;

    font-size:16px;

    font-weight:700;


    color:white;


    background:

    linear-gradient(

    135deg,

    #006400,

    #6CD900

    );


    box-shadow:

    0 15px 35px

    rgba(108,217,0,.25);


    transition:.5s ease;


}


.register-btn:hover{


    transform:

    translateY(-4px);


}



/*==================================================
                  CART BUTTON
===================================================*/


.cart-icon{


    width:55px;

    height:55px;

    border-radius:50%;

    background:white;

    border:1px solid #D9F4CF;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    transition:.5s ease;

}


.cart-icon:hover{


    background:#006400;

    color:white;

    box-shadow:

    0 15px 30px

    rgba(108,217,0,.25);


}



.cart-count{


    position:absolute;

    top:-8px;
    right:-5px;

    width:24px;
    height:24px;

    border-radius:50%;

    background:#6CD900;

    color:white;

    font-size:12px;

    font-weight:700;

    display:flex;

    justify-content:center;

    align-items:center;

}



/*==================================================
               STICKY HEADER
===================================================*/


.sticky-header{


    position:fixed;

    width:100%;

    top:0;

    left:0;

    z-index:999;

    background:white;

    box-shadow:

    0 15px 40px

    rgba(0,100,0,.10);


}



/*==================================================
              PREMIUM GLASS EFFECT
===================================================*/


.glass-navbar{


    backdrop-filter:

    blur(25px);


    background:

    rgba(255,255,255,.95);


}



/*==================================================
                  MOBILE MENU
===================================================*/


@media(max-width:768px){



.brand-logo img{

    max-width:170px;

}


.nav-link{


    padding:10px !important;

    font-size:16px;

}


.login-btn,
.register-btn{


    width:100%;

    margin-top:15px;

}



.search-box{

    height:50px;

}


.search-btn{


    width:50px;
    height:50px;

}



.cart-icon{


    width:50px;
    height:50px;

}


}
/*==================================================
                PRODUCT CARD DESIGN
===================================================*/


.product-card{

    position:relative;

    overflow:hidden;

    border-radius:30px;

    background:white;

    border:1px solid #E8F8E4;

    transition:.6s ease;

    box-shadow:

    0 15px 35px

    rgba(0,100,0,.08);


}


.product-card:hover{


    transform:
    translateY(-10px);


    box-shadow:

    0 30px 60px

    rgba(0,100,0,.18);


}



/*==================================================
                  PRODUCT IMAGE
===================================================*/


.product-image{


    width:100%;

    height:320px;

    object-fit:contain;

    padding:25px;

    transition:.7s ease;

}


.product-card:hover
.product-image{


    transform:
    scale(1.08);


}



/*==================================================
               PRODUCT IMAGE BOX
===================================================*/


.product-image-box{


    background:

    linear-gradient(

    135deg,

    #FFFFFF,

    #F6FFF3

    );


    overflow:hidden;


}




/*==================================================
                 PRODUCT NAME
===================================================*/


.product-name{


    color:#111111;

    font-size:22px;

    font-weight:700;

    line-height:32px;

    transition:.4s ease;


}


.product-name:hover{


    color:#006400;


}



/*==================================================
                    PRICE
===================================================*/


.product-price{


    font-size:30px;

    font-weight:800;

    color:#006400;

    margin-top:15px;

}



.old-price{


    color:#777777;

    font-size:18px;

    text-decoration:line-through;

    margin-left:10px;


}




/*==================================================
                  VIEW DETAILS
===================================================*/


.product-btn{


    width:100%;

    padding:15px;

    border:none;

    border-radius:50px;

    cursor:pointer;

    color:white;

    font-size:17px;

    font-weight:700;


    background:

    linear-gradient(

    135deg,

    #006400,

    #6CD900

    );


    transition:.5s ease;


    box-shadow:

    0 15px 35px

    rgba(108,217,0,.25);


}



.product-btn:hover{


    transform:
    translateY(-5px);


}



/*==================================================
                FEATURED PRODUCTS
===================================================*/


.featured-product{


    border-radius:30px;

    overflow:hidden;

    background:white;

    transition:.5s ease;

}


.featured-product:hover{


    transform:
    scale(1.02);


}



/*==================================================
                CATEGORY CARD
===================================================*/


.category-card{


    border-radius:25px;

    overflow:hidden;

    padding:25px;

    background:white;

    text-align:center;


    transition:.5s ease;

    box-shadow:

    0 10px 25px

    rgba(0,100,0,.08);


}


.category-card:hover{


    transform:

    translateY(-8px);


    box-shadow:

    0 25px 50px

    rgba(0,100,0,.18);


}



.category-card img{


    width:140px;

    height:140px;

    object-fit:contain;

    transition:.7s ease;


}


.category-card:hover img{


    transform:
    scale(1.1);

}



/*==================================================
                    BADGES
===================================================*/


.offer-badge{


    position:absolute;

    top:15px;

    left:15px;


    padding:

    10px 18px;


    border-radius:

    50px;


    background:

    linear-gradient(

    135deg,

    #006400,

    #6CD900

    );


    color:white;

    font-size:14px;

    font-weight:700;


    z-index:99;


}



.new-arrival{


    position:absolute;

    top:15px;

    right:15px;


    background:

    #ffffff;

    color:

    #006400;


    padding:

    10px 18px;


    border-radius:

    50px;


    font-size:14px;

    font-weight:700;


}



/*==================================================
                  SWIPER DESIGN
===================================================*/


.swiper-slide{


    padding:12px;

}


.swiper-button-next,
.swiper-button-prev{


    width:55px !important;

    height:55px !important;

    border-radius:50%;

    background:white;


    box-shadow:

    0 15px 30px

    rgba(0,100,0,.15);


}


.swiper-button-next:after,
.swiper-button-prev:after{


    font-size:20px !important;

    color:#006400;


}



/*==================================================
                  PRODUCT SECTION
===================================================*/


.homeproduct{


    margin-top:40px;

}


.homeproduct .card-3d{


    border-radius:30px;

}



/*==================================================
                IMAGE HOVER EFFECT
===================================================*/


.zoom-effect{


    overflow:hidden;

}


.zoom-effect img{


    transition:.8s ease;

}


.zoom-effect:hover img{


    transform:

    scale(1.1);

}



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


@media(max-width:768px){


.product-image{


    height:240px;

}


.product-name{


    font-size:18px;

    line-height:28px;

}


.product-price{


    font-size:24px;

}


.category-card img{


    width:110px;
    height:110px;

}


.product-btn{


    font-size:15px;

}


}
/*==================================================
                 PREMIUM FOOTER
===================================================*/


footer{

    position:relative;

    overflow:hidden;

    background:

    linear-gradient(

            135deg,

            #003D00,

            #006400,

            #2A9600

    );

    color:white;

    padding-top:80px;
    padding-bottom:30px;

}



.footer-title{


    font-size:26px;
    font-weight:700;
    margin-bottom:25px;

}


.footer-link{


    display:block;

    color:white !important;

    padding:10px 0px;

    transition:.5s ease;

}


.footer-link:hover{


    padding-left:12px;

    color:#B9FF63 !important;

}



.footer-text{

    color:#F1F1F1;
    line-height:32px;

}



/*==================================================
                 NEWS LETTER
===================================================*/


.newsletter-box{


    padding:40px;

    border-radius:30px;

    background:white;

    box-shadow:

    0 25px 60px

    rgba(0,100,0,.12);


}



.newsletter-input{


    width:100%;

    height:60px;

    border:none;

    outline:none;

    border-radius:50px;

    background:#F6FFF3;

    padding-left:30px;

}


.newsletter-btn{


    height:60px;

    padding:0px 35px;

    border:none;

    cursor:pointer;

    color:white;

    font-size:18px;

    font-weight:700;

    border-radius:50px;


    background:

    linear-gradient(

            135deg,

            #006400,

            #6CD900

    );


}



/*==================================================
                SOCIAL ICONS
===================================================*/


.social-icon{


    width:55px;
    height:55px;

    border-radius:50%;

    background:white;

    color:#006400;

    display:flex;

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

    transition:.5s ease;

}


.social-icon:hover{


    color:white;

    transform:

    translateY(-8px);


    background:

    linear-gradient(

            135deg,

            #006400,

            #6CD900

    );


}




/*==================================================
                 OFFER SECTION
===================================================*/


.offer-banner{


    overflow:hidden;

    border-radius:35px;

    padding:70px 50px;


    background:

    linear-gradient(

            135deg,

            #006400,

            #2A9600,

            #6CD900

    );


    color:white;


}


.offer-title{


    font-size:55px;
    font-weight:800;

}


.offer-text{


    font-size:20px;

    line-height:40px;

}



/*==================================================
                 TOP BUTTON
===================================================*/


.scroll-top{


    position:fixed;

    right:30px;

    bottom:30px;

    width:60px;
    height:60px;

    border-radius:50%;

    z-index:999;

    cursor:pointer;

    border:none;


    background:

    linear-gradient(

            135deg,

            #006400,

            #6CD900

    );


    color:white;


    box-shadow:

    0 20px 40px

    rgba(108,217,0,.30);


    transition:.5s ease;

}



.scroll-top:hover{


    transform:

    translateY(-10px);


}



/*==================================================
                PREMIUM LOADER
===================================================*/


.loader{


    width:80px;
    height:80px;

    border-radius:50%;

    border:8px solid #F6FFF3;

    border-top:

    8px solid #006400;


    animation:

    loading 1s linear infinite;


}


@keyframes loading{


    from{

        transform:rotate(0deg);

    }


    to{

        transform:rotate(360deg);

    }

}



/*==================================================
               PREMIUM ANIMATION
===================================================*/


.fade-up{


    animation:

    fadeup .8s ease;

}


@keyframes fadeup{


    from{

        opacity:0;

        transform:

        translateY(50px);

    }


    to{

        opacity:1;

        transform:

        translateY(0px);

    }


}



/*==================================================
             PREMIUM GLOW EFFECT
===================================================*/


.green-glow:hover{


    box-shadow:

    0 30px 60px

    rgba(108,217,0,.30);


}



/*==================================================
                 MOBILE DESIGN
===================================================*/


@media(max-width:768px){


.offer-title{

    font-size:35px;

}


.offer-banner{


    padding:40px 25px;

}


.newsletter-box{


    padding:25px;

}


.scroll-top{


    width:50px;
    height:50px;

}


.footer-title{


    font-size:22px;

}


}