/* Medellin Water District reference-inspired responsive landing page */
:root{--mwd-navy:#063d70;--mwd-blue:#087ce2;--mwd-cyan:#0dd9ec} .mwd-shell{width:min(100% - 56px,1430px);margin-inline:auto}.mwd-topbar{background:#073c6c;color:white;font-size:13px}.mwd-topbar-inner{min-height:42px;display:flex;align-items:center;gap:24px;justify-content:space-between}.mwd-topbar a{color:white;text-decoration:none;white-space:nowrap}.mwd-topbar-divider{height:20px;border-left:1px solid #ffffff66}.mwd-header{background:white;position:relative;z-index:20;box-shadow:0 2px 8px #17365712}.mwd-header-inner{min-height:110px;display:flex;align-items:center;justify-content:space-between;gap:24px}.mwd-brand{display:flex;align-items:center;gap:12px;min-width:0;text-decoration:none;color:#07467e}.mwd-brand img{width:80px;height:80px;object-fit:contain;flex:none}.mwd-brand strong{font-size:clamp(18px,2vw,29px);line-height:1.1;letter-spacing:-.6px;display:block}.mwd-brand small{display:block;color:#49637e;font-size:15px;margin-top:4px}.mwd-nav{display:flex;align-items:center;gap:clamp(12px,1.7vw,29px)}.mwd-nav>a{color:#0c2342;text-decoration:none;font-weight:650;font-size:14px;white-space:nowrap;padding:12px 0}.mwd-nav>a:hover,.mwd-nav>a.active{color:#0067b9}.mwd-nav>a.active{border-bottom:3px solid #0067b9}.mwd-nav .mwd-nav-cta{background:linear-gradient(125deg,#0999ff,#0063d0);border-radius:15px;color:white;padding:15px 18px;white-space:normal;text-align:center;max-width:190px;box-shadow:0 4px 14px #087ce225}.mwd-nav .mwd-nav-cta:hover{color:white;background:#0057bb}.mwd-menu-toggle{display:none;color:#064a85;font-size:28px;border:1px solid #dbe7f2;border-radius:8px;padding:4px 12px}.mwd-hero{position:relative;isolation:isolate;min-height:530px;overflow:hidden;background:#06406c;color:white;display:flex;align-items:center}.mwd-hero-picture{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center 46%}.mwd-hero-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,39,77,.95) 0%,rgba(0,68,122,.82) 36%,rgba(0,68,122,.27) 70%,rgba(0,35,72,.06) 100%)}.mwd-hero-inner{padding-block:80px 90px}.mwd-hero-copy{max-width:850px}.mwd-hero h1{font-size:clamp(34px,4.2vw,65px);line-height:1.14;font-weight:800;letter-spacing:-1.5px;text-shadow:0 2px 12px #002f5a50}.mwd-cyan-line{width:140px;height:7px;background:var(--mwd-cyan);border-radius:10px;margin:24px 0}.mwd-hero p{font-size:clamp(17px,1.6vw,22px);line-height:1.4;max-width:660px;font-weight:500}.mwd-hero-actions{display:flex;flex-wrap:wrap;gap:18px;margin-top:28px}.mwd-button{display:inline-flex;gap:12px;align-items:center;justify-content:center;padding:16px 23px;border-radius:16px;text-decoration:none;font-weight:750;font-size:16px;box-shadow:0 5px 16px #00375a35;transition:transform .2s,box-shadow .2s}.mwd-button:hover{transform:translateY(-2px);box-shadow:0 8px 22px #00375a55}.mwd-button-light{background:white;color:#073f76}.mwd-button-blue{background:linear-gradient(135deg,#12a7ff,#0065d4);color:white}.mwd-services{background:#fff;padding:42px 0 25px}.mwd-service-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}.mwd-service-card{min-height:150px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;padding:20px 12px;border:1px solid #dbe7f1;border-radius:17px;box-shadow:0 3px 10px #0c4b8014;text-align:center;text-decoration:none;color:#082c54;transition:transform .2s,box-shadow .2s}.mwd-service-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px #0c4b8024}.mwd-service-icon{font-size:40px;line-height:1.1;color:#0876c8;font-weight:800}.mwd-service-card strong{font-size:clamp(15px,1.4vw,21px);line-height:1.15}.mwd-service-desc{font-size:12px;color:#59728b;display:none}@media(max-width:1200px){.mwd-header-inner{gap:14px}.mwd-nav{gap:12px}.mwd-brand img{width:65px;height:65px}.mwd-brand strong{font-size:21px}.mwd-nav>a{font-size:12px}.mwd-nav .mwd-nav-cta{max-width:145px;padding:12px}}@media(max-width:950px){.mwd-shell{width:min(100% - 36px,1430px)}.mwd-topbar-inner{flex-wrap:wrap;justify-content:center;gap:8px 18px;padding:8px 0}.mwd-topbar-divider{display:none}.mwd-header-inner{min-height:85px}.mwd-menu-toggle{display:block}.mwd-nav{display:none;position:absolute;top:100%;left:0;right:0;background:white;padding:18px;box-shadow:0 10px 22px #092f4e25;flex-direction:column;align-items:stretch;gap:3px}.mwd-nav.is-open{display:flex}.mwd-nav>a{font-size:15px;padding:12px}.mwd-nav>a.active{border-bottom:0;border-left:3px solid #0067b9}.mwd-nav .mwd-nav-cta{max-width:none}.mwd-service-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.mwd-hero{min-height:480px}}@media(max-width:600px){.mwd-topbar{font-size:11px}.mwd-topbar-inner>span:nth-of-type(2),.mwd-topbar-inner>span:nth-of-type(4){display:none}.mwd-brand img{width:55px;height:55px}.mwd-brand strong{font-size:17px;letter-spacing:-.3px}.mwd-brand small{font-size:12px}.mwd-hero{min-height:510px}.mwd-hero-picture{background-position:62% center}.mwd-hero-shade{background:linear-gradient(90deg,rgba(0,37,74,.95),rgba(0,56,100,.76))}.mwd-hero-inner{padding-block:65px}.mwd-hero h1{letter-spacing:-.8px}.mwd-desktop-break{display:none}.mwd-hero-actions{flex-direction:column;align-items:stretch}.mwd-button{font-size:14px;padding:15px}.mwd-service-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.mwd-service-card{min-height:132px}.mwd-service-icon{font-size:32px}.mwd-service-card strong{font-size:15px}}@media(prefers-reduced-motion:reduce){.mwd-button,.mwd-service-card{transition:none}}

/* Administrator access in desktop and mobile navigation */
.mwd-nav .mwd-admin-login{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid #0b67b5;border-radius:12px;color:#07528e;padding:12px 16px;font-weight:750;background:#eef8ff;white-space:nowrap}.mwd-nav .mwd-admin-login:hover{background:#d9f0ff;color:#063d70}@media(max-width:1200px){.mwd-nav .mwd-admin-login{padding:10px;font-size:12px}}@media(max-width:950px){.mwd-nav .mwd-admin-login{font-size:15px;padding:14px;justify-content:center}}

/* Sticky site navigation and compact mobile header (2026-11-05) */
.mwd-header{position:sticky;top:0;z-index:1000;box-shadow:0 3px 16px rgba(5,44,83,.14)}
@media(max-width:950px){
  /* Keep the navigation available without a hamburger menu. */
  .mwd-topbar{display:none}
  .mwd-menu-toggle{display:none!important}
  .mwd-header-inner{display:flex;flex-direction:column;align-items:stretch;gap:0;padding-top:9px;padding-bottom:0;min-height:0}
  .mwd-brand{align-self:flex-start;padding-bottom:9px}
  .mwd-nav,.mwd-nav.is-open{display:flex!important;position:static;flex-direction:row;align-items:center;gap:8px;padding:0 0 8px;background:transparent;box-shadow:none;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;-webkit-overflow-scrolling:touch;white-space:nowrap;width:100%}
  .mwd-nav>a,.mwd-nav .mwd-admin-login{flex:0 0 auto;font-size:13px;padding:9px 11px;white-space:nowrap}
  .mwd-nav>a.active{border-left:0;border-bottom:3px solid #0067b9}
  .mwd-nav .mwd-nav-cta{max-width:none;white-space:nowrap;padding:10px 12px;border-radius:9px}
  .mwd-nav .mwd-admin-login{padding:10px 12px;font-size:13px}
}
@media(max-width:600px){
  .mwd-shell{width:min(100% - 24px,1430px)}
  .mwd-header-inner{padding-top:7px}
  .mwd-brand img{width:48px;height:48px}
  .mwd-brand strong{font-size:16px}
  .mwd-brand small{font-size:11px;margin-top:2px}
  .mwd-nav{gap:5px}
  .mwd-nav>a,.mwd-nav .mwd-admin-login{font-size:12px;padding:8px 10px}
}


/* Medellin Water District Footer */
.mwd-footer {
    background: #082f49 !important;
    color: #ffffff !important;
    margin-top: 4rem;
}

.mwd-footer h3,
.mwd-footer strong {
    color: #ffffff;
}

.mwd-footer p,
.mwd-footer li,
.mwd-footer a {
    color: #bfdbfe;
}

.mwd-footer a {
    text-decoration: none;
    transition: color 0.2s ease;
}

.mwd-footer a:hover {
    color: #67e8f9;
}

.mwd-footer .footer-icon {
    color: #22d3ee;
    flex-shrink: 0;
}

.mwd-footer .social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50%;
}

.mwd-footer .social-link:hover {
    background: #0369a1;
    color: #ffffff;
}

.mwd-footer .footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.12);
}

.mwd-footer .footer-heading {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
}



/* MWD FOOTER - HOSTINGER COMPATIBLE */

.mwd-footer {
    background-color: #082f49 !important;
    color: #ffffff !important;
    width: 100%;
    margin-top: 64px;
    font-family: Inter, Arial, sans-serif;
}

.mwd-footer,
.mwd-footer * {
    box-sizing: border-box;
}

.mwd-footer-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 55px 24px;
}

.mwd-footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.8fr 1.2fr 1.2fr;
    gap: 36px;
}

.mwd-footer h3 {
    color: #ffffff !important;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 22px;
}

.mwd-footer p,
.mwd-footer li,
.mwd-footer a,
.mwd-footer span {
    color: #bfdbfe;
    font-size: 14px;
    line-height: 1.8;
}

.mwd-footer strong {
    color: #ffffff;
}

.mwd-footer a {
    text-decoration: none;
}

.mwd-footer a:hover {
    color: #22d3ee;
}

.mwd-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mwd-footer-links li {
    margin-bottom: 10px;
}

.mwd-footer-detail {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
}

.mwd-footer-detail svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #22d3ee;
    margin-top: 4px;
}

.mwd-footer-detail p {
    margin: 0;
    overflow-wrap: anywhere;
}

.mwd-footer-social {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.mwd-footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    color: #ffffff;
    transition: background .2s;
}

.mwd-footer-social a:hover {
    background: #0284c7;
}

.mwd-footer-bottom {
    border-top: 1px solid rgba(255,255,255,.15);
    text-align: center;
    padding: 20px;
    color: #bfdbfe;
    font-size: 13px;
}

@media (max-width: 1024px) {
    .mwd-footer-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 640px) {
    .mwd-footer-container {
        padding: 40px 20px;
    }

    .mwd-footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}