@import url('https://fonts.googleapis.com/css2?family=Forum&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Quicksand:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Forum&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
:root{
    --bg-dark-green:#132A13;
    --bg-mid-green:#31572C;
    --bg-lemon-green:#4F772D;
    --bg-light-green:#90A955;
    --bg-off-green:#ECF39E;
    --bg-dark-maroon:#3C1518;
    --bg-light-maroon:#69140E;
    --bg-dark-orange:#A44200;
    --bg-light-orange:#D58936;
    --bg-off-orange:#F2F3AE;
    --bg-black:#202020;
    --bg-gray:#333533;
    --bg-red:#bf0603;
    --bg-blue:#0466c8;
    
    --primary-font:Quicksand;
    --secondary-font:'Poppins',sans-serif;
}
body{
    font-family: var(--primary-font);
    font-weight: 400;
    /* background-color: var(--bg-off-green); */
    /* background-color: #f4e285; */
   
}
::-webkit-scrollbar{
   display: none;
}
/* Navbar */
 .header_wrapper navbar{
    -webkit-transition: all linear 0.2s;
    -o-transition: all linear 0.2s;
    -moz-transition: all linear 0.2s;
    -ms-transition: all linear 0.2s;
    transition: all linear 0.2s;
    
 }
 .header_wrapper .navbar{
   background-color: #132A13;
 }
 .header_wrapper .navbar-brand img{
    width: 80px;
    height: auto;
 }
 .header_wrapper .menu-navbar-nav{
width: 70%;
display: flex;
justify-content: center;


 }
 .header_wrapper .nav-item{
    margin:0 10px;
 }
 .header_wrapper .nav-item .nav-link{
    font-weight: 600;
    font-size: 18px;
    color: var(--bg-off-green);
    line-height: 1;
 }
 .header_wrapper .nav-item .nav-link.active{
    color: lawngreen;
 }
 .learn-more-btn{
   border-radius: 10px; 
   margin: 0 15px;
   background-color:rgb(98, 188, 9);
   /* color:var(--bg-dark-green); */
   color: #132A13;
   font-weight: 600;
   box-shadow: 1px 2px 5px rgb(24, 22, 22);
   padding: 12px 26px !important;
   display: inline-block;
   transition: 0.7s;
   font-size: 18px;
 }
 .learn-more-btn:hover{
     background-color: transparent;
     border: 2px solid lawngreen;
     color: lawngreen;
 }
 .header-scrolled{
    position: fixed;
    top: 0;
    left: 0;
    margin-top: 0;
    width: 100%;
    height: 85px;
    background-color: var(--bg-dark-green);
    --webkit-box-shadow: 0 4px 6px rgb(47, 46, 46);
    box-shadow: 0 4px 6px rgb(47, 46, 46);
 }
 .header-scrolled .navbar-brand img{
    width: 110px;
    height: auto;
    animation: animated 0.1s ease-in-out;
 }
 @keyframes animated{
    0%{
       width:  80px;
    }
    50%{
       width:  70px;
    }
    100%{
       width:  60px;
    }
 }
 .header-scrolled .nav-item .nav-link{
   font-size: 17px;
 }

 #navbarDropdown2{
   color: rgb(6, 44, 1);
 }
 #navbarDropdown2:hover{
   background-color: #ecf4e5;
 
 }
 .dropdown .dropdown-menu{
   display: none;
 }



 /* General dropdown menu styles */
.dropdown:hover > .dropdown-menu,
.dropend:hover > .dropdown-menu {
  display: block;
  margin-top: 0.5em;
  width: 230px;
  background-color: #adef50;
  color: white !important;
  padding: 10px;
  font-size: 18px;
}

/* Nested dropdown positioning for larger screens */
.dropend:hover > .dropdown-menu {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: 0.06em;
  margin-top: 0.215em;
  background-color: #f9f577;
}

/* Override for small screens to stack dropdowns vertically */
.nav-item .nav-link:hover{
   color: #adef50;
}


/* Banner */

.banner_wrapper{
   position: relative;
   min-height: 100vh;
  width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   overflow: hidden;
   padding: 100px 0 90px;
   background-color: var(--bg-dark-green);
   background-color: #123212;
}
/* .home img{
   position: absolute;
   top: 170px;
   left: 0;
   height: 70%;
   pointer-events: none;
} */
.header-img-section img{
   width: 40%;
   position: absolute;
   top: 170px;
   left: 0;
}


#obj{
   transform:translate(-40%, 100%);
   animation: phone 1.3s ease forwards;
}
#hand{
   transform:translate(40%, 100%);
   animation: hand 1.5s ease forwards 0.6s;
}

@keyframes to_bottom{
   0%{
opacity: 0;
transform:translateY(-50px);
   }
   100%{
       opacity: 1;
       transform:translateY(0);
   }
}
@keyframes to_right{
   0%{
opacity: 0;
transform:translateX(-50px);
   }
   100%{
       opacity: 1;
       transform:translateX(0);
   }
}
@keyframes to_top{
   0%{
opacity: 0;
transform:translateY(50px);
   }
   100%{
       opacity: 1;
       transform:translateY(0);
   }
}
@keyframes phone{
   0%{
opacity: 0;
transform:translate(-40%, 100%);
   }
   100%{
       opacity: 1;
       transform:translate(0);
   }
}
@keyframes hand{
   0%{
opacity: 0;
transform:translate(40%, 100%);
   }
   100%{
       opacity: 1;
       transform:translate(0);
   }
}
.banner-subtitle{
   color: #4F772D;
   padding-top: 30px;
 
}
.banner-title{
   color: var(--bg-light-green);
}
.banner-title-text{
   color: #adef50;
   margin-top: 40px;
}

.banner_wrapper .banner-subtitle{
font-size: 30px;
font-weight: 700; line-height: 1.5;
margin-bottom: 15px;
 color:rgb(218, 246, 163);
 
 text-align: left;
 margin-top: 40px;
 margin-right: 190px;
margin-bottom: 15px;


}
.banner_wrapper .banner-title{
font-family:
var(--secondary-font);
font-weight: 800;
font-size: 60px;
text-transform: capitalize;
line-height: 1.15;
color:#fbb02d;
margin-top: 80px;
margin-bottom: 30px;
padding-top: 0px;
}
.banner_wrapper .banner-title span{
   color:#affc41;
   }.banner_wrapper .banner-title-text{ font-size: 17px;
   font-weight: 600;
   line-height: 1.5;
   margin-bottom: 40px;
   max-width:450px;
   color:rgb(97, 131, 1);
   
   text-align: justify;
   
   }
   .btn-header{
      position: relative;
      background-color: #affc41;
      width: 350px;
      text-align: center;
      border-radius: 17px;
      top: 20px;
      margin-left: 50px;
   }

  .catagory{
   width: 100%;
   min-height: 100vh;
  }
  .cat-row{
   min-height: 100vh;
  }
   .stat-card {
      background-color: #2c85dd;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
  }

  .stat-card h4 {
      font-size: 2rem;
      color: #007bff;
  }

  .stat-card p {
      font-size: 1rem;
      color: #6c757d;
  }

  .container {
      margin-top: 50px;
  }



  /* Popular Categories */
.popular-categories .category-card img {
   width: 130px;
   height: 100px;
   border-radius: 10px;
}
.popular-categories .category-card h5 {
   margin-top: 10px;
   margin-bottom: 30px;
}

/* Trending Jobs */
.trending-jobs .job-card h5 {
   color: #0466c8;
   font-weight: bold;
}
.trending-jobs .job-card span {
   display: inline-block;
   margin-top: 10px;
}

/* Services */
.services .service-card i {
   color: var(--bg-light-green);
}

/* About Section */
.about img {
   max-height: 400px;
}

/* Footer */
footer a {
   text-decoration: none;
}
/* General image styling */
.header-img-section img {
   max-width: 100%;
   height: auto;
 }
 
 /* Hide the images below 766px */
 @media (max-width: 900px) {
   .header-img-section img {
     display: none !important;
   }

 }
 
 @media (max-width: 1024px) {
   .header-img-section img {
    width: 500px;
    height: 400px;
   }
body{
   overflow-x: hidden;
}
 }