/* Home page-specific CSS */
    .hero-section { background:linear-gradient(rgba(10,64,12,0.6), rgba(10,64,12,0.6)), url('https://images.unsplash.com/photo-1535131749006-b7f58c99034b?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover no-repeat; min-height:100vh; display:flex; align-items:center; color:var(--white); position:relative; }
    .hero-content h1 { font-size:4.0rem; font-weight:bold; margin-bottom:0px; text-shadow:2px 2px 4px rgba(0,0,0,0.3);}
    .hero-content p { font-size:1.3rem; margin-bottom:30px; text-shadow:1px 1px 2px rgba(0,0,0,0.3);}
    .cta-button { background-color:var(--white); color:var(--primary-green); border:none; padding:15px 40px; font-size:1.1rem; font-weight:bold; border-radius:50px; cursor:pointer; transition:all 0.3s ease; text-transform:uppercase; letter-spacing:1px; }
    .cta-button:hover { background-color:var(--primary-green); color:var(--white); border:2px solid var(--white); transform:translateY(-3px); box-shadow:0 10px 20px rgba(0,0,0,0.2);}
    .section-padding { padding:40px 0; }
    .section-title { font-size:2.5rem; font-weight:bold; color:var(--primary-green); margin-bottom:20px; text-align:center; }
    .section-subtitle { font-size:1.2rem; color:var(--text-gray); text-align:center; margin-bottom:50px; }
    .card { border:none; border-radius:15px; box-shadow:0 10px 30px rgba(0,0,0,0.1); transition:all 0.3s ease; overflow:hidden;}
    .card:hover { transform:translateY(-10px); box-shadow:0 20px 40px rgba(0,0,0,0.15);}
    .card-img-top { height:200px; object-fit:cover; }
    .card-body { padding:25px;}
    .card-title { color:var(--primary-green); font-weight:bold; margin-bottom:15px;}
    .partners-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:30px; margin-top:50px;}
    .partner-card { background:var(--white); padding:30px; border-radius:15px; text-align:center; box-shadow:0 5px 20px rgba(0,0,0,0.1); transition:all 0.3s ease;}
    .partner-card:hover { transform:translateY(-5px); box-shadow:0 15px 30px rgba(0,0,0,0.15);}
    .partner-logo { width:80px; height:80px; background-color:var(--primary-green); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 15px; color:var(--white); font-size:1.5rem;}
    .hero-content .subtitle {font-size: 1.7rem; font-weight:bold; margin-bottom:10px; text-shadow:2px 2px 4px rgba(0,0,0,0.3);}
    .section-pading {
        padding: 60px 0;
        background: #f8f9fa;
        text-align: center;
    }
    .section-header {
        font-size: 28px;
        font-weight: bold;
        margin-bottom: 10px;
    }
    .section-subheader {
        font-size: 16px;
        color: #666;
        margin-bottom: 40px;
    }
    .logo-slider {
        overflow: hidden;
        position: relative;
        width: 100%;
    }
    .logo-track {
        display: flex;
        animation: scroll 60s linear infinite;
        width: max-content;
        will-change: transform;
        animation-delay: 2s;
    }
    .logo-track img {
        height: 130px;
        width: auto;
        margin: 0 5px;
        object-fit: contain;
    }
    /* Scrolling animation */
    @keyframes scroll {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(-50%);
        }
    }
    .director-card {
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  background: #fff;
}

.director-card img {
  width: 100%;
  height: 500px;   /* reduced height for balance */
  object-fit: cover;
  transition: transform 0.5s ease;
  border-radius: 5px 5px 0 0;
}

/* Card Title (always below image) */
.director-card .card-title {
  font-size: 1.1rem;
  font-weight: bold;
  margin: 10px 0;
  color: #203d20;
  text-transform: uppercase;
}

/* Overlay only for description */
.director-info {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(32 61 32 / 61%);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.5s ease;
  text-align: justify;
  border-radius: 5px;
}

.director-card:hover img {
  transform: scale(1.03);
}

.director-card:hover .director-info {
  opacity: 1;
}

.director-info p {
    font-style: italic;
}

/* =====================
   Responsive Layer
   (does not override unless needed)
===================== */

/* Base: Ensure scaling */
img { max-width: 100%; height: auto; }

/* ✅ Mobile View Fix (320px - 425px) */
@media screen and (max-width: 430px) {
    body {
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }

    /* Containers */
    .container, 
    .container-fluid.extra-left-space, 
    .row, 
    .col, 
    [class*="col-"] {
        margin: 0 auto !important;
        padding: 0 10px !important;   /* ✅ balanced small padding */
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Headings */
    h1 { font-size: 20px !important; }
    h2 { font-size: 18px !important; }
    h3 { font-size: 16px !important; }
    h4, h5, h6 { font-size: 14px !important; }

    /* Text */
    body, span, label, input, button, a {
        font-size: 12px !important;
        line-height: 1.4 !important;
        word-wrap: break-word !important;
        text-align: justify !important; 
    }
    p {
        font-size: 13px !important;
        line-height: 1.4 !important;
        word-wrap: break-word !important;
    }
    /* ✅ Fix service cards overlap */
    .services .col, 
    .services [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 15px !important;
    }

    /* ✅ Center the line under titles */
    .section-title::after {
        margin: 8px auto 0 auto !important;
        display: block !important;
        float: none !important;
    }

    /* ✅ Director section fix */
    .director-card {
        max-width: 80% !important;
        margin: 0 auto 20px auto !important;
        display: block !important;
    }

    .director-card img {
        height: 300px !important;
        width: 100% !important;
        object-fit: cover !important;
    }

    .director-info {
        font-size: 0.75rem !important;
        padding: 10px !important;
        text-align: justify !important;
    }

    /* ✅ Buttons */
    .btn, .cta-button {
        font-size: 12px !important;
        padding: 6px 14px !important;
        margin-top: 0 !important;  /* ✅ Small gap above "See More" */
    }

    .services .card {
        margin-bottom: 20px !important; /* Add vertical spacing */
    }

    /* ✅ Our Partners logos smaller */
    .logo-slider img {
        max-height: 50px !important;  /* smaller height */
        max-width: 90px !important;   /* smaller width */
        margin: 0 6px !important;     /* keep some spacing */
    }
}

/* Tablets: 577px–991px */
@media (max-width: 770px) {
  .hero-section { min-height: 80vh; }
  .hero-content h1 { font-size: 2.8rem; }
  .hero-content .subtitle { font-size: 1.3rem; }
  .hero-content p { font-size: 1rem; }
  .cta-button { font-size: 1rem; }
  .director-info { text-align: justify !important; }
  body, span, label, input, button, a { text-align: justify !important; }

  .section-title { font-size: 2rem; }
  .section-subtitle { font-size: 1.05rem; }
  
  .services .col, 
    .services [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 15px !important;
    }

  .card-img-top { height: 180px; }
  .logo-track img { height: 90px; }

  .director-card img { height: 350px; }
  
      /* Containers */
    .container, 
    .container-fluid.extra-left-space, 
    .row, 
    .col, 
    [class*="col-"] {
        margin: 0 auto !important;
        padding: 0 10px !important;   /* ✅ balanced small padding */
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* Laptops / Desktops: 992px–1440px */
@media (min-width: 1020px) and (max-width: 1440px) {
  .hero-content h1 { font-size: 3.5rem; }
  .hero-content .subtitle { font-size: 1.5rem; }
  .hero-content p { font-size: 1.1rem; }

  .section-title { font-size: 2.2rem; }
  .section-subtitle { font-size: 1.1rem; }

  .logo-track img { height: 110px; }
  .director-card img { height: 420px; }
}

@media (width: 1024px) {
  .director-card h5 {
    font-size: 1rem; /* director name smaller */
  }

  .director-info p {
    font-size: 0.75rem; /* bio text smaller */
    line-height: 1.4;   /* improve readability */
  }
}


/* Large screens: 1441px–2560px */
@media (min-width: 1441px) {
  .hero-section { min-height: 100vh; }
  .hero-content h1 { font-size: 4rem; }
  .hero-content .subtitle { font-size: 1.7rem; }
  .hero-content p { font-size: 1.3rem; }

  .section-title { font-size: 2.5rem; }
  .section-subtitle { font-size: 1.2rem; }

  .logo-track img { height: 130px; }
  .director-card img { height: 500px; }
}