@import url(http://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic);
@import url('https://fonts.googleapis.com/css2?family=Allura&family=Caudex:ital,wght@0,400;0,700;1,400;1,700&family=Cormorant:ital,wght@0,300..700;1,300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Allura&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
 
}

body {
  background: #7e9c76;
  font-family: Arial, sans-serif;
  overflow-x: hidden;
}

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



.brand{
  font-family: Righteous, sans-serif;  
   color: rgb(197, 224, 196);
}

/* NAVBAR */
.main-nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 60px;
  width: 100%;
  background: #002708;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  z-index: 99999;
}

/* Logo */
.logo {
  height: 40px;
}

/* Desktop menu */
.desktop-menu {
  display: flex;
  gap: 20px;
}

.desktop-menu a {
  color:#f1fded;
  text-decoration: none;
  font-size: 16px;
}

/* Mobile button */
.menu-btn {
  display: none;
  font-size: 30px;
  background: none;
  border: none;
  color:  rgb(197, 224, 196);
}

/* Push content below navbar */
body {
  padding-top: 60px;
}

/* MOBILE MENU */
.mobile-menu {
  position: fixed;
  top: 60px;
  left: 0;
  width: 100%;
  height: calc(100vh - 60px);
  background: #002708;
  display: none;
  flex-direction: column;
  padding: 10px;
    
  justify-content: center;
  gap: 25px;
  z-index: 100000;
  text-align: start;
}

.mobile-menu a {
  color:#cbe9c5;
  font-size: 18px;
  text-decoration: none;
  padding: 10px;
  
}

/* MOBILE RULES */
@media (max-width: 768px) {

  .desktop-menu {
    display: none; /* 🔴 THIS FIXES YOUR SCREENSHOT ISSUE */
  }

  .menu-btn {
    display: block;
  }

  .mobile-menu.active {
    display: flex;
  }
}

/*@media(max-width:768px){
  .links-container{
    
    flex-direction: column;
    align-items: flex-start;
    position: fixed;
    top: 0;
    right: -100%;
    z-index: 10;
    width: 300px;

    background-color: #002708;
    box-shadow: -15px 0 5px rgba(0,0,0,0.25);
    transition: .75s ease-out;
  }

  
  nav a{
    box-sizing: border-box;
    height: auto;
    width: 100%;
    padding: 25px 30px;
    justify-content: flex-start;

  }

  .open-sidebar-button, .close-sidebar-button{
   padding: 20px;
    display: block;
  
  }

  #sidebar-active:checked ~ .links-container{
    right: 0;
  }
  #sidebar-active:checked ~ #overlay{
    
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
  }
  
  }*/



  .carousals{
    margin: 100px auto;
    width: 90%;
   
    display: flex;
    overflow-x: auto;
    margin-top: 10px;
  }
  .groups{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    animation: spin 19s infinite linear;
  padding-right: 1em;
  }
  .carousals::-webkit-scrollbar{
    display: none;}
    .cards{
  
    
      background:#002708;
      
      
    text-align: center;
    
    align-content: center;
    color: #7e9c76;
    }











/* ================= .main-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #002708;
  padding: 10px 15px;
}

.logo {
  width: 45px;
}

.brand {
  color: #cbe9c5;
  font-size: 26px;
  font-weight: bold;
  margin-left: 10px;
}

.nav-left {
  display: flex;
  align-items: center;
}

.nav-links a {
  color: white;
  margin-left: 20px;
  text-decoration: none;
}

.menu-btn {
  display: none;
  color: white;
  font-size: 28px;
}

#menu-toggle {
  display: none;
}================= */

/* ================= HERO ================= */
.hero {
  position: relative;
  background-color: #7e9c76;
  
}
/* fallback for older browsers */
@supports not (height: 100svh) {
  .hero {
    height: 90vh;
  }
}


.hero video {
  
 
  
 
  width: 100%;
  height: 70vh;
  object-fit: cover;
  
 
 
}
.hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero-overlay img {
  width: 85%;
  max-width: 350px;
}

.hero-overlay button {
  margin-top: 20px;
  padding: 12px 30px;
  border-radius: 25px;
  background:  rgb(197, 224, 196);;
  border: none;
  font-weight: bold;
  filter: opacity(80%);
}

/* ================= GRI ================= */
.gri{
  background-color: #002708;
}
/* ================= ABOUT ================= */
.about {
  background-color:#7e9c76;
  text-align: center;
  padding: 40px 15px;
  margin-top: -200px;
}
.about video{
  max-width: 100%;
  height: auto;
}
.about img {
  width: 80%;
  max-width: 300px;
  margin: 15px auto;
}
.about h1{
  font-family:cursive;
    color: #002708; 
    margin-top: 110px;
}
.about p{
  color: #002708;
}
.carousal{
  margin: 100px auto;
  width: 100%;
  border: 5px solid rgb(54, 114, 73);
  border-style:double;
  display: flex;
  overflow-x: auto;
 margin-top: 10px;
 

}
.carousal::-webkit-scrollbar{
  display: none;

}
.group{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  animation: spin 19s infinite linear;
padding-right: 1em;

}


.card{
  height: 60px;
    width: 100px;
  
  
   
  text-align: center;
  background-color: #002708;
  align-content: center;
  color:#002708;
  }

@keyframes spin{
  from{translate: 0;}
  to{translate: -100%;}
}

#about-us h1::after
{
	content: '';
	background:#002708;
	display: block;
	height:1px;
	width:110px;
	margin: 10px auto 5px;
}

.categories video {
  
 
  
 
  width: 100%;
  height: auto;
  object-fit: cover;
  margin-top: 40px;
 border-radius: 30px;
 border-style:groove;
 border-color: #002708;
 
}

/* ================= CATEGORIES ================= */
.categories {
  padding: 40px 10px;
  background-color: #7e9c76;
  margin-top: -30px;
}

.circle-img {
 /* width: 100%;
  max-width: 200px;*/
  border-radius: 50%;
  
  border: 5px double #002708;
  margin-bottom: 15px;
  height: 250px; 
  width: 250px;
}

.categories h4{
  font-family:cursive;
    color: #002708;
}
.categories p{
  font-weight: 300;
  color: #002708;
  text-align: center;
  font-size: 60px;
  margin-top: -40px;
}
.yo{
  
 
  
 
  width: 100%;
  height: auto;
  align-items: end;
  object-fit: cover;
  
  
 
}
/* ================= SERVICES ================= */
.services {
  background: #002708;
  color: white;
  padding: 40px 10px;
  text-align: center;
}

.services i {
  font-size: 40px;
  margin-bottom: 10px;
}
.services h1{
  font-family:cursive;
    color:#ecfdeb; 
    margin-bottom: 30px;
    margin-top: 30px;
}

#services h1::after
{
	content: '';
	background:#ecfdeb;
	display: block;
	height:1px;
	width:130px;
	margin: 10px auto 5px;
}

.icon
{
	font-size:40px;
	margin:20px auto;
	padding: 10px;
	height: 80px;
	width:80px;
	border:1px solid #7e9c76;
	border-radius:50%;
}

.services h3{
  font-size: 20px;
  font-family: sans-serif;
  color: #ffffff;
}

.services p{
  font-family: sans-serif;
  font-size: 15px;
  color: #effff2;
}

.services .col-md-4:hover{
	background:#4c7a55;
	cursor: pointer;
	transition: 0.7s;
	
}
/* ================= CONTACT ================= */
.contact {
  padding: 40px 10px;
  background-color: #7e9c76;
  text-align: center;
}

.contact input{
 
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
}
.contact textarea{
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  height: 120px;
}
.contact h1{
  font-family:cursive;
    color:#002708; 
    margin-bottom: 30px;
    margin-top: 30px;
}
.contact button{
  background-color: #002708;
  border-radius: 10px;
  width: 100%;
  color: #c3e4ba;
filter: opacity(80%);
border-color: #f0f7ee;
}





.fa
{
	margin: 10px;
	color:#7e9c76;
	font-weight: bold;
}






::placeholder
{
	color:rgb(138, 138, 138)!important;
}

.follow
{
	
 text-align: start;
	background:#002708;
margin-top: 15px;
	color: #7e9c76;
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
	font-size: 12px;
}
.b{
 margin-left: 10px;
 
}

#contact h1::after
{
	content: '';
	background:#002708;
	display: block;
	height:1px;
	width:130px;
	margin: 10px auto 5px;
}
/* ================= FOOTER ================= */
footer {
  background: #002708;
  color: white;
  text-align: center;
  padding: 15px;
}

/* ================= MOBILE ================= */
@media (max-width: 768px) {
  .nav-links {
    position: absolute;
    background: #002708;
    top: 60px;
    right: 0;
    width: 200px;
    display: none;
    flex-direction: column;
  }

  #menu-toggle:checked ~ .nav-links {
    display: flex;
  }

  .menu-btn {
    display: block;
  }
}