* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Exo 2", sans-serif;
    /* font-family: "Poetsen One", sans-serif; */
    list-style-type: none;
    text-decoration: none;
}

/* variables */
:root {
    --primary-color: #8835b2;
    --secondary-color: #006031;
    --tertiary-color: #df4328;
    --quaternary-color: #efb33a;
    --text-color1: #ffffff;
    --text-color2: #1b1b1b;
    --link-color: #4CAF50;
}

/* common styles */
html {
    scroll-behavior: smooth;
    font-size: 10px;
}
body{
    font-size: 1.6rem;
}
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
.sec-df-js{ display: flex; justify-content: space-between;}
.sec-gap{ margin-top: 10rem; }
h1, h2, h3, h4, h5, h6{/* font-family: "Winky Sans", sans-serif; */ font-family: "Poetsen One", sans-serif;}
h2{color: var(--tertiary-color);}
p{margin: 1rem 0;}
.btn{ margin-top: 5rem; }
.btn a{background-color: var(--primary-color); color: var(--text-color1); padding: 1rem 2rem; text-decoration: none; border-radius: 5px; transition: 0.3s ease; }
.btn a:hover{background-color: var(--link-color); }
/* color */
.black{color: #000;}
/* -------------------------------------- */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
}
.menu-toggle { display: none; }
.logo img {  width: 15rem;  height: auto;}
.logo-color{ display: none;}
.logo-white{ display: block;}
.stickynav .logo-color{ display: block;}
.stickynav .logo-white{ display: none;}
.menu ul { display: flex; gap: 2rem;}
.menu ul li a { color: var(--text-color1); transition: color 0.3s ease; font-family: "Poetsen One", sans-serif;}
.menu ul li a:hover { color: var(--quaternary-color);}
div#navbar { position: fixed; width: 100%; top: 0; left: 0; }
.stickynav #navbar .menu ul li a{ color: var(--text-color2);}
.stickynav #navbar { top: 0; background: #fff; animation: navslid 1s; z-index: 9; box-shadow: 0 0 20px #00000057;}
.stickynav #navbar .menu ul li a:hover { color: var(--quaternary-color);}
/* Hero Section */
.hero-wrap{background:url(../img/hero-bg.png);min-height: 55rem; width: 100%; max-width: 100%; background-repeat: no-repeat; background-position: center; background-size: cover;}
.hero-section .content { max-width: 50%; padding-top: 16rem;}
.hero-section .content h1{margin-bottom: 3rem; font-size: 5.5rem; color: var(--primary-color); -webkit-text-stroke: 0.1px var(--text-color1); -moz-text-stroke: 0.1px var(--text-color1);}
.hero-section .content p{font-size: 1.7rem; color: var(--text-color2); line-height: 2.6rem; margin-bottom: 2rem; }

/* About Section */
.about-wrap{display: flex; gap: 6rem;}
.about-img{width: 35%;}
.about-img img{width: 100%; height: auto;}
.content{width: 65%;}
.content h2{font-size: 3.5rem; margin-bottom: 1rem;}
.content p{font-size: 1.7rem; line-height: 2.6rem;}
.about-section{position: relative;}
.illustrator{width: 35%;}
.illustrator img{position: absolute; bottom: 0; right: 0;}
.about-list h3{ color: var(--secondary-color); margin-top: 3rem;}
.about-list ol{ margin-top: 2rem;}
.about-list ol li{margin-bottom: 1rem;}
.about-list ol li::before{content: "✏️";}

.objectiv img{width: 100%; height: 100%;}
.mobile-object{display: none;}
/* Total Count Section */
.total-count{background:url(../img/count-bg.png);min-height: 60rem; width: 100%; max-width: 100%; background-repeat: no-repeat; background-position: center; background-size: cover;}
.card-wrap { display: flex; flex-wrap: wrap;}
.card-wrap .card{background: #fff; padding: 2rem; margin: 2rem; border-radius: 0.5rem; box-shadow: 0 0 10px rgb(223 67 40 / 50%); text-align: center; width: 30%;}
.card-wrap .card i{font-size: 4rem; margin-bottom: 1rem;}
.card-wrap .card h3{font-size: 3rem; margin-bottom: 1rem;}
.count-content{padding-top: 10rem;}
.latest-news { width: 50%; margin-top: 6rem; }
.news-wrap marquee { height: 30rem; }
.news-wrap marquee ul li{ padding: 0.5rem 0; font-size: 1.7rem; font-weight: 600;}
.news-wrap marquee ul li b{ color: var(--secondary-color);}

/* gallery */
.gallery-wrap {display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(6, 6rem); grid-gap: 1rem;}
.gallery-wrap .gallery-item a img{ width: 100%; height: 100%; border-radius: 10px; object-fit: cover;}
.gallery-section h2{text-align: center; font-size: 4rem; margin-bottom: 4rem;}
 /* Custom Grid Positioning */
 .gallery-item:nth-child(1){ width: auto; height: auto; grid-column-start: 1; grid-column-end: 5; grid-row-start: 1; grid-row-end: 5;}
 .gallery-item:nth-child(2){ width: auto; height: auto; grid-column-start: 5; grid-column-end: 7; grid-row-start: 1; grid-row-end: 3;}
 .gallery-item:nth-child(3){width: auto; height: auto; grid-column-start: 5; grid-column-end: 7; grid-row-start: 3; grid-row-end: 5;}
 .gallery-item:nth-child(4){width: auto; height: auto; grid-column-start: 7; grid-column-end: 8; grid-row-start: 1; grid-row-end: 3;}
 .gallery-item:nth-child(5){width: auto; height: auto; grid-column-start: 8; grid-column-end: 9; grid-row-start: 1; grid-row-end: 3;}
 .gallery-item:nth-child(6){width: auto; height: auto; grid-column-start: 7; grid-column-end: 9; grid-row-start: 3; grid-row-end: 7;}
 .gallery-item:nth-child(7){width: auto; height: auto; grid-column-start: 1; grid-column-end: 3; grid-row-start: 5; grid-row-end: 7;}
 .gallery-item:nth-child(8){width: auto; height: auto; grid-column-start: 3; grid-column-end: 5; grid-row-start: 5; grid-row-end: 7;}
 .gallery-item:nth-child(9){width: auto; height: auto; grid-column-start: 5; grid-column-end: 7; grid-row-start: 5; grid-row-end: 7;}
 /*Founder  */
 .founder-wrap{display: flex; justify-content: space-between; align-items: center;}
 .founder-img{width: 60%;}
 .founder-img img{width: 100%; height: 100%;}

/* Footer Section */
footer{background: url(../img/footer-bg.png); color: #fff; padding: 2rem 0; background-repeat: no-repeat; background-position: center; background-size: cover;}
footer .footer-content{display: flex; justify-content: space-between; padding-top: 10rem;}
footer .footer-logo{width: 35%;}
footer .footer-logo img{width: 15rem; height: auto;}
footer .footer-menu ul li a{color: #fff;}
footer .footer-menu ul li{margin-bottom: 1rem;}
footer .footer-info p{color: #fff; font-size: 1.7rem; text-align: center;}
footer .contact-form{width: 35%;}
footer .contact-form input, footer .contact-form select, footer .contact-form textarea{width: 100%; margin-bottom: 1rem; padding: 1rem; border-radius: 5px; border: 1px solid #fff; background: transparent; color: var(--text-color1);}
input::placeholder, textarea::placeholder{ color: var(--text-color1);}
footer .contact-form button{width: 100%; padding: 1rem; border-radius: 5px; border: 1px solid #fff; background: transparent; color: #fff; transition: all 0.3s ease; cursor: pointer;}
footer .contact-form button:hover{background-color: #fff; color: #000;}
footer .form-box{ display: flex; gap: 1rem;}
footer h4{ margin-bottom: 1.5rem;}
footer .socail{ display: flex; gap: 1rem; margin: 2rem 0}
footer .socail a, footer .contect a{ color: #fff;}

select option {
    background: #00351b;
}


.mobile{display: none;}

/* keyframes */
@keyframes navslid {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(0%); }
}