/* ==========================================================
   RPG50 Botanical Garden Website
   Main Stylesheet
========================================================== */


/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap');



:root{

--primary:#2E7D32;

--secondary:#43A047;

--light:#F4FFF4;

--dark:#1b1b1b;

--white:#ffffff;

--shadow:0 10px 25px rgba(0,0,0,.12);

--radius:18px;

}



/* ================= RESET ================= */


*{

margin:0;

padding:0;

box-sizing:border-box;

}



html{

scroll-behavior:smooth;

}



body{

font-family:'Sarabun',sans-serif;

background:#f8fdf8;

color:#333;

overflow-x:hidden;

}



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


.navbar{

height:70px;

padding:0;

z-index:9999;

}



.navbar .container{

max-width:1450px;

}



.navbar-brand{

font-size:18px;

font-weight:700;

white-space:nowrap;

}



.navbar-nav{

display:flex;

align-items:center;

gap:3px;

flex-wrap:nowrap;

}



.navbar .nav-link{

font-size:13px;

padding:8px 8px!important;

white-space:nowrap;

border-radius:8px;

transition:.3s;

}



.navbar .nav-link:hover,

.navbar .nav-link.active{

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

}



.navbar .btn{

font-size:13px;

padding:7px 15px;

border-radius:30px;

}





@media(max-width:1200px){


.navbar-brand{

font-size:16px;

}


.navbar .nav-link{

font-size:12px;

padding:7px 5px!important;

}


}



@media(max-width:992px){


.navbar{

height:auto;

}



.navbar-nav{

flex-wrap:wrap;

padding:15px 0;

}


}






/* ===============================
   HOME HERO SLIDER
================================ */


.hero{

position:relative;

width:100%;

height:100vh;

overflow:hidden;

}





.hero .carousel,

.hero .carousel-inner,

.hero .carousel-item{


height:100%;

width:100%;

}



.hero .carousel-item img{


width:100%;

height:100vh;

object-fit:cover;

object-position:center;

display:block;

}




.hero .carousel-item.active img{


animation:kenburns 10s infinite alternate;


}




@keyframes kenburns{


from{

transform:scale(1);

}


to{

transform:scale(1.12);

}


}


/* =================================================
   HOME HERO OVERLAY
================================================= */


.hero-overlay{


position:absolute;

top:0;

left:0;

width:100%;

height:100%;

z-index:10;


display:flex;

align-items:center;

justify-content:center;



background:

linear-gradient(

rgba(0,80,20,.45),

rgba(0,40,10,.65)

);


}




.hero h1{


font-size:4rem;

font-weight:700;

text-shadow:

3px 3px 15px rgba(0,0,0,.7);


}



.hero h2{


font-weight:400;

}



.hero p{


max-width:750px;

margin:auto;

font-size:1.3rem;

line-height:1.8;


}



.hero .btn{


padding:14px 35px;

font-size:20px;

font-weight:600;

border-radius:50px;


}







/* ===============================
   CAROUSEL
================================ */


.carousel-control-prev,

.carousel-control-next{


z-index:20;


}



.carousel-indicators button{


width:12px;

height:12px;

border-radius:50%;


}




.carousel-fade .carousel-item{


opacity:0;

transition:opacity 1.5s;


}


.carousel-fade .carousel-item.active{


opacity:1;


}








/* =================================================
   PLANT DATABASE HERO
================================================= */


.plant-hero{


position:relative;

height:450px;

width:100%;

overflow:hidden;


}





.plant-hero .carousel,


.plant-hero .carousel-inner,


.plant-hero .carousel-item{


height:100%;

width:100%;


}





.plant-hero .carousel{


position:relative;

z-index:1;


}






.plant-hero .carousel-item img{


width:100%;

height:450px;


object-fit:cover;

object-position:center;


display:block;


}




/* Overlay Background */


.plant-hero::before{


content:"";

position:absolute;

inset:0;


z-index:2;



background:

linear-gradient(

rgba(0,70,20,.45),

rgba(0,30,10,.70)

);


}






/* Text Over Image */


.plant-overlay{


position:absolute;


top:0;

left:0;


width:100%;

height:100%;



z-index:5;



display:flex;

align-items:center;

justify-content:center;



text-align:center;


}





.plant-overlay h1{


font-size:3.5rem;

font-weight:700;



color:white;



text-shadow:

3px 3px 15px rgba(0,0,0,.8);


}





.plant-overlay p{


font-size:1.3rem;

color:white;



line-height:1.8;



text-shadow:

2px 2px 8px rgba(0,0,0,.8);


}







/* Plant Ken Burns */


.plant-hero .carousel-item.active img{


animation:

plantZoom 8s ease-in-out infinite alternate;


}




@keyframes plantZoom{


from{


transform:scale(1);


}



to{


transform:scale(1.10);


}


}









/* =================================================
   PAGE BANNER
================================================= */


.page-banner{


height:350px;


margin-top:70px;



background:

linear-gradient(

rgba(0,80,30,.6),

rgba(0,50,20,.75)

),

url("../img/map-banner.jpg");



background-size:cover;

background-position:center;



display:flex;

align-items:center;


}



.page-banner h1{


font-size:3rem;

font-weight:700;

color:white;


}



.page-banner p{


font-size:1.2rem;

color:white;


}








/* =================================================
   CONTACT BANNER
================================================= */


.contact-banner{


background:

linear-gradient(

rgba(0,80,30,.65),

rgba(0,50,20,.75)

),

url("../img/contact-banner.jpg");



background-size:cover;

background-position:center;


}






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


section{


padding-top:60px;

padding-bottom:60px;


}



section h2{


font-weight:700;

color:var(--primary);


}







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


.card{


border:none;

border-radius:var(--radius);

overflow:hidden;

box-shadow:var(--shadow);

transition:.35s;


}



.card:hover{


transform:translateY(-10px);


}




.card img{


width:100%;

height:240px;

object-fit:cover;


}





.plant-card img{


height:260px;


}




.card h4,

.card h5{


font-weight:700;


}




/* =================================================
   PLANT DATABASE HERO
================================================= */


.plant-hero{

    position:relative;

    width:100%;

    height:450px;

    overflow:hidden;

}



.plant-hero .carousel,

.plant-hero .carousel-inner,

.plant-hero .carousel-item{

    width:100%;

    height:100%;

}



.plant-hero .carousel{

    position:relative;

    z-index:1;

}





.plant-hero .carousel-item img{


    width:100%;

    height:450px;


    object-fit:cover;


    object-position:center center;


    display:block;


}






/* ==============================
   Plant Overlay Dark
============================== */


.plant-hero::before{


    content:"";


    position:absolute;


    top:0;

    left:0;


    width:100%;

    height:100%;


    z-index:2;



    background:

    linear-gradient(

    rgba(0,80,30,.45),

    rgba(0,40,10,.70)

    );


}







/* ==============================
   Plant Text
============================== */


.plant-overlay{


    position:absolute;


    top:0;

    left:0;


    width:100%;


    height:100%;



    z-index:5;



    display:flex;


    align-items:center;


    justify-content:center;


    text-align:center;


}




.plant-overlay h1{


    font-size:3.5rem;


    font-weight:700;


    color:white;



    text-shadow:

    3px 3px 15px rgba(0,0,0,.8);


}




.plant-overlay p{


    color:white;


    font-size:1.3rem;


    line-height:1.8;


    text-shadow:

    2px 2px 10px rgba(0,0,0,.8);


}







/* ==============================
   Plant Ken Burns
============================== */


.plant-hero .carousel-item.active img{


    animation:

    plantZoom 8s ease-in-out infinite alternate;


}





@keyframes plantZoom{


    from{


        transform:scale(1);


    }


    to{


        transform:scale(1.10);


    }


}









/* =================================================
   PAGE BANNER
================================================= */


.page-banner{


    height:350px;


    margin-top:70px;



    background:


    linear-gradient(

    rgba(0,80,30,.6),

    rgba(0,50,20,.75)

    ),


    url("../img/map-banner.jpg");



    background-size:cover;


    background-position:center;



    display:flex;


    align-items:center;


}




.page-banner h1{


    color:white;


    font-size:3rem;


    font-weight:700;


}




.page-banner p{


    color:white;


    font-size:1.2rem;


}








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


.contact-banner{


    background:


    linear-gradient(

    rgba(0,80,30,.65),

    rgba(0,50,20,.75)

    ),


    url("../img/contact-banner.jpg");



    background-size:cover;


    background-position:center;


}








/* =================================================
   SECTION STYLE
================================================= */


section{


    padding-top:60px;


    padding-bottom:60px;


}



section h2{


    color:var(--primary);


    font-weight:700;


}







/* =================================================
   CARD STYLE
================================================= */


.card{


    border:none;


    border-radius:var(--radius);


    overflow:hidden;


    box-shadow:var(--shadow);


    transition:.35s;


}





.card:hover{


    transform:translateY(-10px);


}





.card img{


    width:100%;


    height:240px;


    object-fit:cover;


}







/* Plant Card */


.plant-card img{


    height:260px;


}



.plant-card{


    transition:.4s;


}



.plant-card:hover{


    transform:translateY(-12px);


    box-shadow:

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


}




.card h4,

.card h5{


    font-weight:700;


}