@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
:root {
    --secondary: #6aa100;
    --primary: #154001;
    --buttons: #2a7906;
}
html, body {
  /* height: 100%; */
  margin: 0;
  font-family: "Nunito", sans-serif;
  scroll-behavior: smooth;
  overflow-x: hidden;
  font-weight: 400;
  font-size: 16px;
}

/* .title-font {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
} */

.primary-bg-color {
    background-color: var(--primary);
}
.secondary-bg-color {
    background-color: var(--buttons);
}
.secondary-text-color {
    color: var(--buttons);
}

/* *********************************
******* INDEX PAGE SECTION 1 *******
************************************/
/* Top bar  */
.top-bar {
    background-color: #064c1f;
}
/* Navbar */
.navbar-nav .nav-link.active {
    color: #4CAF50 !important;
    font-weight: 600;
}
.navbar-nav a {
    padding: 1em 4em;
}
/* Hero Slider */
.carousel-item {
    height: 80vh;
    /* min-height: 500px; */
    background-size: cover;
    background-position: center;
    position: relative;
}
.carousel-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}
.carousel-caption {
    bottom: 30%;
    text-align: left;
    z-index: 2;
}
.carousel-caption h1 {
    font-size: 3rem;
    font-weight: 700;
}
.carousel-caption p {
    font-size: 1.2rem;
    margin-bottom: 25px;
}
.btn-green {
    background: #6BBE44;
    color: #fff;
    padding: 10px 30px;
    border-radius: 25px;
    font-weight: 600;
}
.btn-green:hover {
    background: #5aa639;
}
.btns {
    background: var(--buttons);
    color: #fff;
    border-style: solid;
    border-width: 2px;
}
.btns:hover {
    color: var(--buttons);
    border-color: var(--buttons);
    border-style: solid;
    border-width: 2px;
    background-color: transparent;
}
.service-tags {
    /* font-size: 14px; */
    margin-bottom: 15px;
    text-align: left;
}
.service-tags span {
    margin-right: 15px;
    color: #fff;
    font-weight: 500;
}
/* Carousel Indicators */
.carousel-indicators [data-bs-target] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #fff;
}

/* Default navbar style */
#mainNavbar {
  transition: all 0.4s ease;
  width: 80%;
  z-index: 1000;
}

/* Sticky navbar style when scrolled */
#mainNavbar.scrolled {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100% !important;
  border-radius: 0 !important;
  margin-top: 0 !important;
  transform: none !important;
}

/* Smooth fade for top bar */
#topBar {
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

#topBar.hidden {
  opacity: 0;
  visibility: hidden;
}

/* **********************************
******* INDEX PAGE SECTION 2 *******
************************************/
.program-section {
    padding: 60px 0;
    position: relative;
    background-image: url('templates/img/about_us_bg.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
}
.highlight {
    color: var(--secondary); 
    font-weight: bold;
}
.program-images {
    position: relative;
}
.program-images img {
    border-radius: 15px;
    width: 100%;
    height: auto;
}
.main-img {
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.small-img {
    position: absolute;
    bottom: -30px;
    right: -40px;
    width: 55%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    border-radius: 15px;
}
.award-icon {
    background: var(--secondary);
    color: #fff;
    border-radius: 50%;
    padding: 15px;
    font-size: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-custom {
    background: var(--secondary);
    color: #fff;
    font-weight: bold;
    padding: 10px 30px;
    border-radius: 30px;
}
.btn-custom:hover {
    background: #558000;
    color: #fff;
}
.program-list {
    background-image: url('templates/img/shapes.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}
.footer{
    background-image: url('templates/img/bottom_elements.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}
.pages {
    background-image: url('templates/img/about.png');
    background-size: cover;
    background-repeat: no-repeat;
}
.overlay {
    background-color: rgba(0, 0, 0, 0.7);
}
.pages .container {
    height: 30vh;
}

.program-icon {
    width: 100px;
    height: 100px;
    border-radius: 100%;
    border: 6px solid #fff;
    line-height: 100px;
    background: var(--primary);
    transition: 500ms;
}

.greatest-project {
    position: relative;
}
.greatest-project::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('templates/img/projects_bg.jpg') no-repeat center center/cover;
  opacity: 0.7;   /* only background fades */
  z-index: -1;    /* keep it behind content */
}

.dotted-border-1 {
    border-style: dashed;
    border-width: 1px;
    border-color: var(--secondary);
}
.dotted-border-2 {
    border-style: dashed;
    border-width: 1px;
    border-color: var(--primary);
}

.reach-out {
    background-image: url('templates/img/logistics.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

/* **************************************
************ Carousel ***********
**************************************** */
/* --- Initial (hidden) state for the caption children on non-active slides --- */
.carousel-item .carousel-caption > * {
    opacity: 0;
    transform: translateY(18px);
}

/* --- Keyframes: slide-up + fade-in --- */
@keyframes slideUpFade {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Apply animations only when the slide has the .active class --- 
    Staggered delays make them appear one after another. */
.carousel-item.active .carousel-caption .service-tags {
    animation-name: slideUpFade;
    animation-duration: 520ms;
    animation-timing-function: cubic-bezier(.2,.9,.3,1);
    animation-fill-mode: both;
    animation-delay: 0.15s;
}
.carousel-item.active .carousel-caption h1 {
    animation-name: slideUpFade;
    animation-duration: 560ms;
    animation-timing-function: cubic-bezier(.2,.9,.3,1);
    animation-fill-mode: both;
    animation-delay: 0.40s;
}
.carousel-item.active .carousel-caption p {
    animation-name: slideUpFade;
    animation-duration: 560ms;
    animation-timing-function: cubic-bezier(.2,.9,.3,1);
    animation-fill-mode: both;
    animation-delay: 0.70s;
}
.carousel-item.active .carousel-caption .btn-green {
    animation-name: slideUpFade;
    animation-duration: 520ms;
    animation-timing-function: cubic-bezier(.2,.9,.3,1);
    animation-fill-mode: both;
    animation-delay: 0.95s;
}

.carousel-indicators .active { background-color: var(--secondary); }

/* **************************************
************ Fade in Scroll ***********
**************************************** */
.fade-in-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease-out;
}
.fade-in-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* **************************************
************ About Page ***********
**************************************** */
.profile-card {
  position: relative;
  overflow: hidden;
}

.profile-info {
  background: #fff;
  padding: 15px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  transform: translateY(100%);
  opacity: 0;
  transition: all 0.5s ease;
  pointer-events: none; /* prevent interfering with hover */
}

.profile-card:hover .profile-info {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto; /* allow text to be selectable */
}

/* *************************************************************************
**** Mobile Nav Style
****************************************************************************/
#mobile-nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-color: var(--soft-white);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  z-index: 9999;
}
#mobile-nav-overlay.d-block {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* **************************************
************ Responsive Starts here ***********
**************************************** */
@media (max-width: 992px) {
    .carousel-caption h1 { font-size: 2.2rem; }
    .carousel-caption p  { font-size: 1rem; }
}
@media (max-width: 576px) {
    .carousel-caption { text-align: center; bottom: 20%; }
    .carousel-caption .service-tags { text-align:center; }
    .carousel-caption h1 { font-size: 1.8rem; }
}
/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .carousel-item .carousel-caption > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    }
}