@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
    --green-1:#063f2c;
    --green-2:#075d3b;
    --green-3:#0a7449;
    --green-4:#15945d;
    --green-5:#32bd7a;
    --cream:#fff8e9;
    --gold:#ffd56a;
    --orange:#ff943d;
    --white:#ffffff;
    --dark:#062c20;
}

*{
    box-sizing:border-box;
}

body{
    margin:0;
    font-family:"Google Sans","Manrope",Arial,sans-serif;
    background:#f7f9f7;
}

a{
    text-decoration:none;
}

.jms-header{
    position:relative;
    overflow:visible;
    z-index:1000;
    background:
        radial-gradient(circle at 12% 25%,rgba(255,255,255,.10) 0 5px,transparent 6px),
        radial-gradient(circle at 81% 33%,rgba(255,213,106,.12) 0 8px,transparent 9px),
        linear-gradient(118deg,#043c2a 0%,#075837 28%,#087148 56%,#075437 80%,#063b2b 100%);
    color:#fff;
    isolation:isolate;
}

.jms-header:before{
    content:"";
    position:absolute;
    width:460px;
    height:460px;
    border:2px solid rgba(255,255,255,.10);
    border-radius:50%;
    left:-190px;
    top:-240px;
    box-shadow:
        0 0 0 55px rgba(255,255,255,.025),
        0 0 0 110px rgba(255,255,255,.018);
    animation:ringFloat 12s ease-in-out infinite alternate;
    pointer-events:none;
}

.jms-header:after{
    content:"";
    position:absolute;
    width:500px;
    height:180px;
    right:-90px;
    bottom:-100px;
    border-radius:50%;
    border:3px solid rgba(255,216,107,.16);
    transform:rotate(-8deg);
    box-shadow:
        0 -25px 0 rgba(255,255,255,.025),
        0 -48px 0 rgba(255,255,255,.02);
    animation:waveMove 8s ease-in-out infinite alternate;
    pointer-events:none;
}

.header-graphics{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:-1;
}

.bubble{
    position:absolute;
    border-radius:50%;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.14);
    animation:bubbleMove 8s ease-in-out infinite alternate;
}

.bubble.b1{
    width:32px;
    height:32px;
    left:9%;
    top:48%;
}

.bubble.b2{
    width:16px;
    height:16px;
    left:24%;
    top:18%;
    animation-delay:1s;
}

.bubble.b3{
    width:46px;
    height:46px;
    right:11%;
    top:18%;
    animation-delay:2s;
}

.bubble.b4{
    width:20px;
    height:20px;
    right:34%;
    bottom:16%;
    animation-delay:3s;
}

.graphic-ring{
    position:absolute;
    border-radius:50%;
    border:2px solid rgba(255,216,107,.15);
}

.ring1{
    width:170px;
    height:170px;
    right:8%;
    top:-75px;
}

.ring2{
    width:95px;
    height:95px;
    left:42%;
    bottom:-45px;
}

.header-row{
    position:relative;
    z-index:5;
}

.top-row{
    padding:10px 0 8px;
    border-bottom:1px solid rgba(255,255,255,.16);
}

.top-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    flex-wrap:wrap;
}

.contact-badges{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.contact-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:36px;
    padding:6px 12px;
    border-radius:8px;
    font-size:13px;
    font-weight:650;
    color:#183127;
    border:1px solid rgba(255,255,255,.72);
    box-shadow:0 5px 14px rgba(0,0,0,.10);
    transition:.25s ease;
}

.contact-badge:hover{
    transform:translateY(-2px);
}

.badge-phone{
    background:#fff4ce;
}

.badge-email{
    background:#f2f3f4;
}

.badge-location{
    background:#e7f4ed;
}

.contact-badge i{
    width:22px;
    height:22px;
    display:grid;
    place-items:center;
    border-radius:6px;
    color:#fff;
    font-size:11px;
}

.badge-phone i{
    background:#dd9221;
}

.badge-email i{
    background:#69717c;
}

.badge-location i{
    background:#148957;
}

.social-wrap{
    width:max-content;
    display:flex;
    align-items:center;
    gap:7px;
    padding:5px 7px;
    border-radius:9px;
    background:rgba(255,255,255,.92);
    border:1px solid rgba(255,255,255,.9);
    box-shadow:0 5px 17px rgba(0,0,0,.12);
}

.follow-text{
    color:#244639;
    font-size:11px;
    font-weight:800;
    padding:0 4px;
    text-transform:uppercase;
    letter-spacing:.7px;
}

.social-btn{
    width:30px;
    height:30px;
    border-radius:7px;
    display:grid;
    place-items:center;
    color:#fff;
    font-size:14px;
    transition:.25s ease;
    box-shadow:0 4px 9px rgba(0,0,0,.13);
}

.social-btn:hover{
    color:#fff;
    transform:translateY(-3px) scale(1.04);
}

.facebook{background:#1877f2;}
.instagram{background:linear-gradient(135deg,#f9ce34,#ee2a7b,#6228d7);}
.youtube{background:#ff0000;}
.whatsapp{background:#25d366;}
.linkedin{background:#0a66c2;}

.brand-row{
    padding:18px 0;
}

.brand-grid{
    display:grid;
    grid-template-columns:auto minmax(260px,1fr) minmax(260px,.9fr) auto;
    align-items:center;
    gap:18px;
}

.logo-frame{
    position:relative;
    width:102px;
    height:102px;
    min-width:102px;
    padding:7px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#fff;
    box-shadow:
        0 0 0 3px #ffd666,
        0 0 0 7px rgba(255,255,255,.85),
        0 0 25px rgba(255,218,101,.55);
}

.logo-frame:before{
    content:"";
    position:absolute;
    inset:-11px;
    border-radius:50%;
    border:2px dashed rgba(255,217,102,.8);
    animation:logoPulse 2.2s ease-in-out infinite;
}

.logo-frame img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
}

.brand-title{
    min-width:0;
}

.brand-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:7px;
    background:#ffe39a;
    color:#294335;
    padding:4px 10px;
    border-radius:6px;
    margin-bottom:5px;
    font-weight:800;
    font-size:11px;
    letter-spacing:.7px;
    text-transform:uppercase;
}

.brand-title h1{
    margin:0;
    color:#fff;
    font-size:clamp(29px,4vw,47px);
    font-weight:800;
    line-height:1;
    letter-spacing:-1px;
    text-shadow:0 3px 14px rgba(0,0,0,.2);
}

.reg-no{
    margin-top:7px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:4px 10px;
    background:rgba(255,255,255,.11);
    border:1px solid rgba(255,255,255,.23);
    border-radius:6px;
    color:#fdf5d7;
    font-size:12px;
    font-weight:600;
}

.slogan-panel{
    position:relative;
    padding:11px 14px;
    border-left:3px solid #ffd76d;
    border-right:1px solid rgba(255,255,255,.16);
    background:rgba(0,0,0,.09);
    border-radius:6px;
}

.slogan-label{
    color:#ffd970;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:1px;
}

.slogan{
    margin-top:3px;
    color:#fff;
    font-size:16px;
    font-weight:650;
    line-height:1.4;
}

.place{
    margin-top:6px;
    display:flex;
    align-items:center;
    gap:7px;
    color:#dff7e8;
    font-size:13px;
    font-weight:600;
}

.action-buttons{
    display:flex;
    gap:9px;
}

.header-action{
    border:0;
    border-radius:8px;
    padding:11px 15px;
    min-width:128px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-weight:800;
    font-size:13px;
    transition:.25s ease;
    white-space:nowrap;
}

.header-action:hover{
    transform:translateY(-3px);
}

.donate-btn{
    color:#253c2f;
    background:#ffd869;
    box-shadow:0 7px 19px rgba(255,201,74,.22);
}

.join-btn{
    background:#fff;
    color:#0b6541;
    box-shadow:0 7px 19px rgba(0,0,0,.15);
}

.nav-row{
    position:relative;
    z-index:10000;
    padding:0 0 14px;
}

.nav-shell{
    position:relative;
    z-index:10001;
    background:rgba(255,255,255,.97);
    border:1px solid #e4ede7;
    border-radius:9px;
    padding:5px 6px;
    box-shadow:0 10px 24px rgba(0,30,18,.18);
}

.nav-shell:before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 10% 20%,rgba(14,130,80,.06) 0 5px,transparent 6px),
        radial-gradient(circle at 84% 60%,rgba(255,187,67,.08) 0 7px,transparent 8px);
}

.desktop-nav{
    position:relative;
    display:flex;
    align-items:center;
}

.main-nav{
    flex:1;
    justify-content:center;
    gap:1px;
}

.main-nav .nav-link{
    position:relative;
    display:flex;
    align-items:center;
    gap:7px;
    color:#1d4635;
    font-size:15px;
    font-weight:750;
    padding:11px 12px !important;
    border-radius:7px;
    transition:.25s ease;
}

.main-nav .nav-link i{
    color:#15945d;
    font-size:15px;
}

.main-nav .nav-link:hover,
.main-nav .nav-link.show{
    background:#ecf8f1;
    color:#087447;
}

.main-nav .dropdown-menu{
    position:absolute;
    z-index:10050 !important;
    border:1px solid #dfeae3;
    padding:7px;
    border-radius:9px;
    box-shadow:0 15px 35px rgba(7,62,39,.16);
    min-width:235px;
}

.main-nav .dropdown-item{
    border-radius:6px;
    padding:9px 10px;
    display:flex;
    gap:9px;
    align-items:center;
    font-size:14px;
    font-weight:650;
    color:#284c3b;
}

.main-nav .dropdown-item i{
    width:22px;
    color:#14935c;
}

.main-nav .dropdown-item:hover{
    background:#eef8f2;
    color:#087044;
}

.contact-btn{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    gap:8px;
    color:#fff;
    background:#117c4e;
    border:2px solid #117c4e;
    padding:10px 15px;
    border-radius:7px;
    font-size:14px;
    font-weight:800;
    transition:.25s ease;
    white-space:nowrap;
}

.contact-btn:hover{
    color:#fff;
    background:#075d3b;
    border-color:#075d3b;
    transform:translateY(-2px);
}

.mobile-menu-btn{
    border:0;
    background:#fff;
    color:#086b45;
    height:44px;
    width:48px;
    border-radius:8px;
    font-size:22px;
    box-shadow:0 7px 20px rgba(0,0,0,.15);
}

.mobile-menu{
    position:fixed;
    z-index:99999;
    top:0;
    left:0;
    width:min(365px,90vw);
    height:100vh;
    background:#f6fbf7;
    transform:translateX(-105%);
    transition:transform .4s cubic-bezier(.77,0,.18,1);
    box-shadow:20px 0 60px rgba(0,0,0,.3);
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:#15945d #e8f1eb;
}

.mobile-menu::-webkit-scrollbar{
    width:7px;
}

.mobile-menu::-webkit-scrollbar-track{
    background:#e8f1eb;
}

.mobile-menu::-webkit-scrollbar-thumb{
    background:#15945d;
    border-radius:10px;
}

.mobile-menu.active{
    transform:translateX(0);
}

.mobile-menu-head{
    position:relative;
    padding:22px 18px;
    color:#fff;
    background:
        radial-gradient(circle at 80% 20%,rgba(255,255,255,.12) 0 8px,transparent 9px),
        linear-gradient(125deg,#06452e,#0a8051);
    border-bottom:4px solid #f5cf61;
}

.mobile-brand{
    display:flex;
    align-items:center;
    gap:11px;
}

.mobile-brand-logo{
    width:59px;
    height:59px;
    border-radius:50%;
    background:#fff;
    border:3px solid #ffda70;
    padding:3px;
}

.mobile-brand-logo img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
}

.mobile-brand h3{
    margin:0;
    font-size:22px;
    font-weight:800;
}

.mobile-brand small{
    color:#e5f6eb;
}

.mobile-close{
    position:absolute;
    top:9px;
    right:9px;
    width:36px;
    height:36px;
    border:0;
    border-radius:50%;
    color:#12422f;
    background:#fff;
    font-size:18px;
    display:grid;
    place-items:center;
    box-shadow:0 4px 12px rgba(0,0,0,.2);
}

.mobile-nav-body{
    padding:15px;
}

.mobile-nav-link{
    width:100%;
    min-height:48px;
    margin-bottom:7px;
    padding:9px 12px;
    border:1px solid #dceae1;
    background:#fff;
    border-radius:8px;
    display:flex;
    align-items:center;
    gap:10px;
    color:#214735;
    font-size:16px;
    font-weight:750;
    box-shadow:0 4px 12px rgba(16,85,52,.05);
}

.mobile-nav-link i:first-child{
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border-radius:6px;
    background:#e8f7ef;
    color:#0d8b55;
}

.mobile-nav-link .chevron{
    margin-left:auto;
    font-size:12px;
}

.mobile-submenu{
    padding:0 0 6px 22px;
}

.mobile-submenu a{
    display:flex;
    align-items:center;
    gap:8px;
    color:#466254;
    font-weight:650;
    font-size:14px;
    padding:8px 10px;
    margin-bottom:3px;
    border-left:2px solid #8bc9a7;
}

.mobile-contact{
    margin-top:13px;
    background:#0b774b;
    color:#fff;
    justify-content:center;
    border-color:#0b774b;
}

.mobile-contact i:first-child{
    background:rgba(255,255,255,.15);
    color:#fff;
}

.mobile-menu-overlay{
    position:fixed;
    inset:0;
    z-index:99998;
    background:rgba(1,25,15,.65);
    opacity:0;
    visibility:hidden;
    transition:.3s ease;
}

.mobile-menu-overlay.active{
    opacity:1;
    visibility:visible;
}

@keyframes ringFloat{
    from{transform:translate(0,0) scale(1);}
    to{transform:translate(45px,30px) scale(1.08);}
}

@keyframes waveMove{
    from{transform:translateY(0) rotate(-8deg);}
    to{transform:translateY(-18px) rotate(-4deg);}
}

@keyframes bubbleMove{
    0%{transform:translateY(0) translateX(0);}
    100%{transform:translateY(-30px) translateX(15px);}
}

@keyframes logoPulse{
    0%,100%{
        opacity:.65;
        transform:scale(1);
        box-shadow:0 0 5px rgba(255,215,105,.3);
    }
    50%{
        opacity:1;
        transform:scale(1.035);
        box-shadow:0 0 18px rgba(255,215,105,.8);
    }
}

@media (max-width:1199.98px){
    .brand-grid{
        grid-template-columns:auto 1fr auto;
    }

    .slogan-panel{
        grid-column:2 / 4;
    }

    .main-nav .nav-link{
        font-size:13px;
        padding:10px 8px !important;
    }
}

@media (max-width:991.98px){
    .top-inner{
        justify-content:center;
    }

    .brand-grid{
        grid-template-columns:auto 1fr;
    }

    .slogan-panel{
        grid-column:1 / -1;
    }

    .action-buttons{
        grid-column:1 / -1;
        justify-content:center;
    }

    .desktop-nav{
        display:none;
    }

    .nav-shell{
        background:transparent;
        border:0;
        box-shadow:none;
        padding:0;
        display:flex;
        justify-content:flex-end;
    }

    .brand-title h1{
        font-size:37px;
    }
}

@media (max-width:575.98px){
    .top-row{
        padding-top:8px;
    }

    .contact-badges{
        width:100%;
        justify-content:center;
    }

    .contact-badge{
        font-size:11px;
        padding:5px 8px;
    }

    .social-wrap{
        margin:auto;
    }

    .brand-row{
        padding:15px 0 13px;
    }

    .brand-grid{
        gap:12px;
    }

    .logo-frame{
        width:78px;
        height:78px;
        min-width:78px;
    }

    .brand-eyebrow{
        font-size:9px;
    }

    .brand-title h1{
        font-size:30px;
        letter-spacing:-.5px;
    }

    .reg-no{
        font-size:10px;
    }

    .slogan{
        font-size:14px;
    }

    .action-buttons{
        display:grid;
        grid-template-columns:1fr 1fr;
        width:100%;
    }

    .header-action{
        padding:10px 8px;
        min-width:0;
        font-size:12px;
    }
}

@media (prefers-reduced-motion:reduce){
    *,
    *:before,
    *:after{
        animation:none !important;
        transition:none !important;
    }
}

/* Keep carousel/slider below the navigation dropdown */
.carousel,
.carousel-inner,
.carousel-item {
    position:relative;
    z-index:1;
}