:root{
      --bg:#0b132b;           /* deep night blue */
      --bg-2:#1c2541;         /* steel blue */
      --accent:#2ec4b6;       /* aqua-green */
      --accent-2:#8bc34a;     /* sustainable green */
      --accent-3:#ffd166;     /* sunrise yellow */
      --text:#edf2f7;         /* soft white */
      --muted:#cbd5e1;        /* slate */
      --card:#101a36e0;       /* translucent card */
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;  color:var(--text); background:radial-gradient(1200px 600px at 10% -10%, #9da923 0%, #a6af2847 60%), linear-gradient(180deg, #8ca321 0%, #8da524 100%);
      overflow-x:hidden;
      margin: 0;
       font-family: "Comfortaa", sans-serif;
      
      background-size: cover;
      background-attachment: fixed;
      background-position: center;
      color: #fff;
      line-height: 1.6;
    }
    a, p, li, div, h2, h1, strong, span, h3, h4, h5, div{
        font-family: "Comfortaa", sans-serif!important;
    }
    /* Animated gradient grid background */
    .grid-bg{position:fixed; inset:0; background-image:linear-gradient(transparent 96%, rgba(255,255,255,.06) 97%), linear-gradient(90deg, transparent 96%, rgba(255,255,255,.06) 97%); background-size:40px 40px; opacity:.25; mask-image:radial-gradient(1200px 600px at 70% -10%, black 40%, transparent 80%); pointer-events:none}
    .blob{position:absolute; filter:blur(40px); opacity:.35; mix-blend-mode:screen}
    .blob.b1{width:420px;height:420px; background:radial-gradient(circle at 30% 30%, #30e3ca, transparent 65%); top:-80px; left:-60px; animation:float 14s ease-in-out infinite}
    .blob.b2{width:520px;height:520px; background:radial-gradient(circle at 70% 70%, #8bc34a, transparent 60%); bottom:-120px; right:-80px; animation:float 18s ease-in-out infinite reverse}
    @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(18px)}}

    header {
    position: relative;
    padding: 27px 24px 46px;
    text-align: center;
    overflow: hidden;
    background: radial-gradient(1000px 400px at 50% -10%, rgb(69 238 222 / 25%) 0%, #3f86338c 60%), radial-gradient(900px 500px at 90% 10%, rgb(0 90 31 / 51%) 0%, transparent 60%);
}
    .badge{display:inline-flex; align-items:center; gap:10px; padding:8px 14px; border:1px solid rgba(255,255,255,.15); border-radius:999px; font-weight:600; letter-spacing:.3px; background:rgba(16,26,54,.6); backdrop-filter: blur(6px)}
    .badge .dot{width:8px;height:8px;border-radius:50%; background:linear-gradient(45deg,var(--accent),var(--accent-2)); box-shadow:0 0 10px var(--accent)}
    h1{
        color: white;
        text-align: left;
        font-size: 36px;
        font-weight: 600;
    }
    .subtitle{text-align: justify; margin:0 auto 26px; color:white; font-size: 15px;
    line-height: 29px;}
    .subtitle strong{
        font-size: 18px;
    }
    .badge{
        margin-bottom: 30px;
    }
    .d-desk{
    display:block!important;
}
.d-mob{
    display:none!important;
}
    .hero-cta{display:flex; gap:12px; flex-wrap:wrap}
    .btn{padding:14px 18px; border-radius:14px; border:1px solid rgba(255,255,255,.12); font-weight:700; letter-spacing:.2px; cursor:pointer; transition:.35s; text-decoration:none; color:var(--text); display:inline-flex; align-items:center; gap:10px}
.btn.primary {
    background: linear-gradient(135deg, #26692e 0%, #5e7d04 50%, #e6ac65 100%);
    color: white;
    border: none;
    box-shadow: 0 10px 24px rgba(46, 196, 182, .28);
}    .btn.primary:hover{transform:translateY(-2px) scale(1.02)}
    .btn.ghost:hover{background:rgba(255,255,255,.06)}
    .about-inner{
           text-align: center;
    box-shadow: rgb(0 0 0 / 40%) 0px 10px 30px;
    position: relative;
    padding: 2rem;
    border-radius: 15px;
    background: linear-gradient(135deg, rgb(0 76 40), rgb(29 73 116 / 1%));
    overflow: hidden;
    }
    .btn.primary i{
        font-size: 20px;
    }
    .subtitle i{
        font-size: 20px;
        margin-bottom: 0;
        margin-right: 15px!important;
    }
    .icoo{
        margin-bottom: 15px!important;
    }



      .water-modern-section {
      padding: 80px 20px;
      /* max-width: 900px; */
      margin: auto;
      position: relative;
    }
.water-inner{
    max-width: 900px;
    justify-content: center;
}
    .water-modern-title {
        text-align: center;
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 28px;
      background: white;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: gradientFlow 6s infinite linear;
      background-size: 200% 200%;
    }

    @keyframes gradientFlow {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    .water-modern-item {
      position: relative;
      margin: 40px 0;
      padding-left: 80px;
      opacity: 0;
      transform: translateX(-50px);
      transition: all 0.8s ease;
    }

    .water-modern-item.active {
      opacity: 1;
      transform: translateX(0);
    }

    .water-modern-item p {
   font-size: 16px;
    line-height: 31px;
    background: linear-gradient(135deg, rgb(0 76 40), rgb(29 73 116 / 55%));
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: transform 0.3s ease;
    }

    .water-modern-item p:hover {
      transform: scale(1.03);
      animation: ripple 1s infinite;
    }

    /* Big number behind text */
    .water-modern-number {
      position: absolute;
      top: 10px;
      left: 0;
      font-size: 3.5rem;
      font-weight: bold;
      color: rgb(0 119 182 / 62%);
      z-index: -1;
    }

    /* Ripple hover effect */
    @keyframes ripple {
      0% { box-shadow: 0 0 0 0 rgba(0,180,216,0.5); }
      70% { box-shadow: 0 0 0 15px rgba(0,180,216,0); }
      100% { box-shadow: 0 0 0 0 rgba(0,180,216,0); }
    }
    .water-modern-section{
        background: url(images/Water\ Treatment\ Facility\ Infrastructure.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-attachment: fixed;
    }

    /* Progress Bar */
    .water-focus-progress {
      position: fixed;
      top: 0; left: 0;
      height: 4px;
      width: 0;
      background: linear-gradient(90deg, #43b0f1, #63e6be);
      z-index: 1000;
    }

    /* Section Wrapper */
    .water-focus-section {
      /* min-height: 100vh; */
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem 2rem;
      opacity: 0;
      transform: translateY(50px);
      transition: all 1s ease;
    }
    #key-focus-area{
        padding: 40px;
        background: radial-gradient(1000px 400px at 50% -10%, rgb(69 238 222 / 25%) 0%, #3f86338c 60%), radial-gradient(900px 500px at 90% 10%, rgb(0 90 31 / 51%) 0%, transparent 60%);
    }
    .water-focus-section.in-view {
      opacity: 1;
      transform: translateY(0);
    }

    /* Grid */
    .water-focus-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      width: 100%;
      max-width: 1200px;
    }

    /* Card */
    .water-focus-card {
      border-radius: 16px;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow: 0 10px 25px rgba(0,0,0,0.4);
      transition: transform 0.4s ease;
    }

    .water-focus-card:hover {
      transform: translateY(-8px);
    }

    .water-focus-card img {
      width: 100%;
      height: 200px;
      object-fit: cover;
      display: block;
    }

    .water-focus-card-content {
      padding: 1.5rem;
      text-align: center;
    }

    .water-focus-card-content h2 {
   font-size: 19px;
    margin-bottom: 1rem;
    color: white;
    line-height: 31px;
    }

    .water-focus-card-content p {
      font-size:15px;
      line-height: 30px;
      color: white;
    }

    /* Waves Background */
    .water-focus-waves {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }
    #key-topic{
         margin: 0;
      background: radial-gradient(1000px 400px at 50% -10%, rgb(69 238 222 / 25%) 0%, #3f86338c 60%), radial-gradient(900px 500px at 90% 10%, rgb(0 90 31 / 51%) 0%, transparent 60%);
      color: white;
      /* min-height: 100vh; */
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 50px 20px;
    }
    .water-focus-waves svg {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 100%;
    }
    .water-timeline {
      position: relative;
      max-width: 1000px;
      margin: auto;
    }

    .water-timeline::after {
      content: '';
      position: absolute;
      width: 6px;
      background: #00d4ff;
      top: 0;
      bottom: 0;
      left: 50%;
      margin-left: -3px;
      border-radius: 6px;
      box-shadow: 0 0 15px #00d4ff;
    }

    .water-card {
      padding: 20px 25px;
      position: relative;
      background: rgba(255,255,255,0.08);
      border-radius: 15px;
      width: 45%;
      box-shadow: 0 5px 20px rgba(0,0,0,0.4);
      animation: fadeInUp 1s forwards;
      opacity: 0;
    }

    .water-left { left: 0; }
    .water-right { left: 55%; }

    /* icon inside card */
    .water-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 10px;
    }

    .water-header i {
      background: #00d4ff;
      color: #000;
      font-size: 20px;
      border-radius: 50%;
      width: 42px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 15px #00d4ff;
    }

    .water-card h2 {
      margin: 0;
      font-size: 19px;
      line-height: 28px;
      color: #00d4ff;
    }

    .water-card p {
      margin: 0;
      font-size: 15px;
      line-height: 25px;
    }

    /* Animation */
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(40px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Responsive Mobile View */
    @media screen and (max-width: 768px) {
      .water-timeline::after {
        left: 30px;
      }

      .water-card {
        width: 100%;
        padding: 20px;
        margin-bottom: 30px;
      }

      .water-right, .water-left {
        left: 0;
      }
    }
    .about-low-area{
    padding-top: 40px;
    padding-bottom: 40px;
    background: linear-gradient(135deg, rgb(0 76 40), rgb(29 73 116 / 1%));
    position: relative;
}
footer{
    background: black;
}
.footer-bottom-area .footer-border {
    padding: 33px 0px 20px;
}
.footer-bottom-area .footer-copy-right p {
    color: #888888;
    font-weight: 300;
    font-size: 16px;
    line-height: 2;
    margin-bottom: 12px;
}
.f-right {
    float: right;
}
.footer-bottom-area .footer-social a {
    color: #fff;
    font-size: 14px;
    padding-left: 25px;
}
.navbar {
    /* margin: auto; */
    background: rgb(71 183 81);
    padding-top: 15px;
    padding-bottom: 15px;
}
.navbar-nav {
    margin: auto;
    /* background: #b0783a; */
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: rgb(255 221 124);
}
.nav-link {
    color: white;
    font-size: 15px;
}

    @media screen and (max-width: 768px) {
        .d-desk{
    dispaly:none!important;
}
.d-mob{
    dispaly:block!important;
}
        .badge{
            margin-left: -9px;
        }
        header {
    position: relative;
    padding: 22px 7px 22px;
}
h1 {
    color: white;
    text-align: left;
    font-size: 30px;
    font-weight: 600;
}
.water-focus-section {
    padding: 0;
}
.water-timeline::after{
    margin-left: -50px;
}
.hero-cta {
    margin-top: 20px;
}
  .d-desk{
    display:none!important;
}
.d-mob{
    display:block!important;
}
    }
    .card-title{
        font-size:19px;
    }
    .card-body{
        height:34vh;
    }
     @media screen and (max-width: 768px) {
          .card-body{
        height:23vh;
    }
         
     }