/* =====================================================
   CHAKA PLANTS GLOBAL STYLE
===================================================== */

/* ===============================
 GLOBAL HEADER SPACE
================================ */

body{

    padding-top:90px;

}
:root{

    --primary:#2e7d32;
    --primary-dark:#1b4332;
    --secondary:#43a047;
    --light-green:#81c784;
    --background:#f8fbf8;
    --white:#ffffff;
    --text:#333;
    --gray:#6c757d;

}


*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}



body{

    font-family:'Poppins',sans-serif;
    background:var(--background);
    color:var(--text);
    overflow-x:hidden;

}



html{

    scroll-behavior:smooth;

}



a{

    text-decoration:none;

}



img{

    max-width:100%;

}





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


.navbar{

    padding:20px 0;
    transition:.4s;
    z-index:1000;

}



.navbar.scrolled{

    background:white;
    box-shadow:0 5px 25px rgba(0,0,0,.1);

}



.navbar-brand{

    font-size:28px;
    font-weight:800;
    color:var(--primary)!important;

}



.nav-link{

    font-weight:500;
    color:#333!important;
    margin:0 10px;
    transition:.3s;

}



.nav-link:hover{

    color:var(--primary)!important;

}



.navbar-toggler{

    border:none;

}


.navbar-toggler:focus{

    box-shadow:none;

}





/* =====================================================
   BUTTONS
===================================================== */


.btn-green{

    background:var(--primary);
    color:white;
    padding:13px 32px;
    border-radius:50px;
    font-weight:600;
    transition:.3s;
    border:none;

}



.btn-green:hover{

    background:var(--primary-dark);
    color:white;
    transform:translateY(-3px);

}




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


.hero{

    min-height:100vh;

    background:

    linear-gradient(
    rgba(0,0,0,.45),
    rgba(0,0,0,.45)
    ),

    url("../images/hero.jpg");


    background-size:cover;
    background-position:center;

    display:flex;
    align-items:center;

    color:white;

    padding-top:80px;

}




.hero h1{

    font-size:70px;
    font-weight:800;
    line-height:1.15;

}



.hero p{

    font-size:20px;
    max-width:600px;
    margin-top:20px;
    color:#f5f5f5;

}




.hero img{

    border:8px solid rgba(255,255,255,.2);

}





@media(max-width:992px){


.hero h1{

    font-size:50px;

}


}





@media(max-width:576px){


.hero h1{

    font-size:38px;

}



.hero p{

    font-size:16px;

}


}






/* =====================================================
   STATISTICS
===================================================== */


.stats{

    margin-top:-80px;
    position:relative;
    z-index:10;

}



.stat-card{

    background:white;

    padding:35px 20px;

    text-align:center;

    border-radius:25px;

    box-shadow:

    0 15px 35px rgba(0,0,0,.08);

    transition:.4s;

}



.stat-card:hover{

    transform:translateY(-10px);

}



.stat-card h2{

    color:var(--primary);

    font-size:42px;

    font-weight:800;

}



.stat-card p{

    color:var(--gray);

    margin:0;

}






/* =====================================================
   SECTION HEADINGS
===================================================== */


section h2{

    font-weight:800;
    color:var(--primary-dark);
    position:relative;

}



section h2:after{

    content:"";

    width:60px;

    height:4px;

    background:var(--primary);

    display:block;

    margin-top:12px;

    border-radius:10px;

}





/* =====================================================
   CATEGORY CARDS
===================================================== */


.category-card{


background:white;

padding:35px 15px;

border-radius:25px;

text-align:center;

height:180px;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;


box-shadow:

0 10px 30px rgba(0,0,0,.07);


transition:.4s;


}



.category-card:hover{


transform:translateY(-10px);

background:var(--primary);

color:white;


}



.category-card .icon{


font-size:55px;

margin-bottom:15px;


}



.category-card h5{


font-weight:600;

}







/* =====================================================
   PLANT CARDS
===================================================== */


.plant-card{


background:white;

border-radius:25px;

overflow:hidden;

height:100%;

box-shadow:

0 10px 30px rgba(0,0,0,.08);

transition:.4s;


}



.plant-card:hover{


transform:translateY(-10px);


box-shadow:

0 20px 45px rgba(0,0,0,.15);


}



.plant-card img{


height:260px;

width:100%;

object-fit:cover;

transition:.5s;


}



.plant-card:hover img{


transform:scale(1.08);


}




.plant-card h5{


font-weight:700;

color:var(--primary-dark);


}




/* =====================================================
   SERVICE CARDS
===================================================== */


.service-card{


background:white;

padding:40px 25px;

border-radius:25px;

text-align:center;

height:100%;


box-shadow:

0 10px 25px rgba(0,0,0,.08);


transition:.4s;


}




.service-card:hover{


background:var(--primary);

color:white;

transform:translateY(-10px);


}



.service-card i{


font-size:45px;

color:var(--primary);

margin-bottom:20px;


}



.service-card:hover i{


color:white;


}



.service-card h5{


font-weight:700;


}








/* =====================================================
   WHY SECTION
===================================================== */


.bg-success{


background:

linear-gradient(
135deg,
#2e7d32,
#1b4332
)!important;


}




.bg-success h2{

color:white;

}



.bg-success h2:after{

background:white;

}



.bg-success li{


font-size:18px;

margin:15px 0;


}







/* =====================================================
   CTA
===================================================== */


.cta{


background:

linear-gradient(
135deg,
#81c784,
#2e7d32
);


color:white;


}



.cta h2{

color:white;

}



.cta h2:after{

display:none;

}



.cta p{

font-size:18px;

}






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


.footer{


background:#102a1c;

color:white;

padding:70px 0 30px;


}



.footer h3{


font-weight:800;

color:#81c784;


}



.footer h5{


margin-bottom:20px;

font-weight:700;


}



.footer a{


display:block;

color:#ddd;

margin-bottom:10px;

transition:.3s;


}



.footer a:hover{


color:#81c784;

padding-left:5px;


}



.footer p{


color:#ddd;

}



.footer hr{


border-color:rgba(255,255,255,.2);

}



.social{


display:inline-block!important;

font-size:22px;

margin-right:15px;

}








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


@keyframes float{


0%{

transform:translateY(0);

}


50%{

transform:translateY(-15px);

}


100%{

transform:translateY(0);

}


}



.hero img{


animation:float 5s infinite;

}








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


@media(max-width:768px){


.stats{

margin-top:30px;

}



.navbar{

background:white;

}



.navbar-brand{

font-size:22px;

}



.stat-card h2{

font-size:32px;

}



.category-card{

height:160px;

}


}
/* =====================================================
 SHOP PAGE CONSISTENCY
===================================================== */


/* SHOP HERO */

.shop-hero{

    min-height:350px;

    display:flex;

    align-items:center;

    background:
    linear-gradient(
    rgba(0,0,0,.45),
    rgba(0,0,0,.45)
    ),
    url("../images/shop.jpg");

    background-size:cover;

    background-position:center;

    color:white;

}



.shop-hero h1{

    font-size:55px;

    font-weight:800;

}





/* FILTER SIDEBAR */

.filter-card{

    background:white;

    padding:30px;

    border-radius:25px;

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

    position:sticky;

    top:100px;

}




.filter-card h4{

    color:#1b4332;

    font-weight:700;

}






/* PRODUCT GRID */


.plant-card{


height:100%;

background:white;

border-radius:25px;

overflow:hidden;

box-shadow:

0 8px 25px rgba(0,0,0,.08);

transition:.35s;

display:flex;

flex-direction:column;


}



.plant-card:hover{


transform:translateY(-8px);


box-shadow:

0 18px 40px rgba(0,0,0,.15);


}





/* PRODUCT IMAGE */


.plant-card img{


width:100%;

height:260px;

object-fit:cover;


}





/* PRODUCT CONTENT */


.plant-card .p-3{


display:flex;

flex-direction:column;

flex-grow:1;


}




.plant-card h5{


font-weight:700;

color:#1b4332;

min-height:50px;


}





.plant-card .btn{


margin-top:auto;


}







/* FEATURED LABEL */


.featured-badge{


position:absolute;

top:15px;

left:15px;

background:#2e7d32;

color:white;

padding:6px 15px;

border-radius:50px;

font-size:12px;

font-weight:600;


}





/* PRICE */


.plant-card h6{


font-size:18px;


}







/* PRODUCT IMAGE WRAPPER */


.plant-card .position-relative{


overflow:hidden;


}



.plant-card .position-relative img{


transition:.5s;


}



.plant-card:hover img{


transform:scale(1.08);


}








/* PAGINATION */


.pagination .page-link{


color:#2e7d32;

border-radius:10px;

margin:0 4px;


}


.pagination .active .page-link{


background:#2e7d32;

border-color:#2e7d32;

color:white;


}







/* LAPTOP OPTIMIZATION */


@media(min-width:1200px){


.shop-products .col-xl-4{


width:33.333%;


}



}





/* TABLETS */


@media(max-width:991px){


.filter-card{


position:relative;

top:0;

}



.shop-hero h1{


font-size:42px;


}


}






/* MOBILE */


@media(max-width:576px){


.shop-hero{


min-height:250px;


}


.shop-hero h1{


font-size:34px;


}



.plant-card img{


height:220px;


}


}
/* ===============================
 ABOUT PAGE
================================ */


.about-hero{

height:380px;

display:flex;

align-items:center;

background:

linear-gradient(
rgba(0,0,0,.5),
rgba(0,0,0,.5)
),

url("../images/about.jpg");

background-size:cover;

background-position:center;

color:white;

}




.about-hero h1{

font-size:55px;

font-weight:800;

}




.about-hero p{

font-size:20px;

max-width:700px;

margin:auto;

}




@media(max-width:768px){

.about-hero h1{

font-size:38px;

}

}
/* ===============================
 CONTACT PAGE
================================ */


.contact-hero{

height:350px;

display:flex;

align-items:center;

background:

linear-gradient(
rgba(0,0,0,.45),
rgba(0,0,0,.45)
),

url("../images/contact.jpg");

background-size:cover;

color:white;

}





.contact-hero h1{

font-size:55px;

font-weight:800;

}





.contact-card{


background:white;

padding:35px;

border-radius:25px;

text-align:center;

box-shadow:

0 10px 30px rgba(0,0,0,.08);


}



.contact-card i{


font-size:40px;

color:#2e7d32;

margin-bottom:15px;


}



.contact-card h5{


font-weight:700;

color:#1b4332;


}




.map-box{


border-radius:25px;

overflow:hidden;

box-shadow:

0 10px 30px rgba(0,0,0,.1);


}



.form-control{


border-radius:15px;

padding:12px 15px;


}




@media(max-width:768px){

.contact-hero h1{

font-size:38px;

}

}
/* =====================================
 PRODUCT IMAGE DISPLAY
===================================== */


.product-image-box{


background:#ffffff;

padding:25px;

border-radius:35px;

box-shadow:

0 15px 45px rgba(0,0,0,0.08);

position:relative;

overflow:hidden;


}



.main-product-image{


height:600px;

display:flex;

align-items:center;

justify-content:center;

background:#f8faf8;

border-radius:25px;

overflow:hidden;


}





.main-product-image img{


width:100%;

height:100%;

object-fit:=contain;

transition:transform .5s ease;


}





.main-product-image:hover img{


transform:scale(1.08);


}





/* MOBILE */


@media(max-width:991px){


.main-product-image{


height:450px;


}



}





@media(max-width:576px){


.product-image-box{


padding:15px;

border-radius:20px;


}



.main-product-image{


height:350px;


}



}
.share-box h5{
    font-weight:700;
}


.share-box .btn{

    width:45px;
    height:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;

}


.share-box .btn:hover{

    transform:translateY(-3px);
    transition:.3s;

}