/* ==========================================================
   GOOGLE SANS STYLE FONT STACK
========================================================== */
:root{
    --google-font:"Google Sans","Product Sans","Segoe UI",Arial,sans-serif;
}

*{
    box-sizing:border-box;
}

body{
    margin:0;
    font-family:var(--google-font);
    color:#263238;
    background:#fff;
}

/* ==========================================================
   MAIN SECTION
========================================================== */
.outreach-section{
    position:relative;
    overflow:hidden;
    padding:55px 0 70px;
    background:
        radial-gradient(circle at 10% 5%,rgba(255,169,34,.12) 0 90px,transparent 91px),
        radial-gradient(circle at 95% 20%,rgba(43,120,255,.08) 0 130px,transparent 131px),
        #f7f8f6;
}

.outreach-section:before{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    border:32px solid rgba(255,255,255,.75);
    border-radius:50%;
    right:-90px;
    top:270px;
    pointer-events:none;
}

.outreach-section:after{
    content:"";
    position:absolute;
    width:300px;
    height:80px;
    border:2px dashed rgba(44,62,80,.09);
    border-radius:50%;
    left:-90px;
    bottom:130px;
    transform:rotate(-18deg);
}

/* ==========================================================
   SECTION TITLE
========================================================== */
.outreach-heading{
    position:relative;
    text-align:center;
    margin-bottom:35px;
    z-index:2;
}

.outreach-kicker{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:7px 16px;
    border:1px solid #e3e3e3;
    border-radius:30px;
    background:#fff;
    box-shadow:0 5px 18px rgba(0,0,0,.07);
    font-size:15px;
    font-weight:700;
    letter-spacing:.7px;
}

.outreach-heading h2{
    margin:11px 0 5px;
    font-size:clamp(30px,4vw,48px);
    font-weight:800;
    letter-spacing:-1.5px;
    color:#202529;
}

.outreach-heading h2 span{
    color:#e27618;
}

.outreach-heading p{
    margin:0 auto;
    max-width:700px;
    font-size:17px;
    color:#657079;
    font-weight:500;
}

.title-lines{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    margin-top:13px;
}

.title-lines span:nth-child(1),
.title-lines span:nth-child(3){
    height:3px;
    width:46px;
    background:#e57618;
    border-radius:20px;
}

.title-lines span:nth-child(2){
    width:9px;
    height:9px;
    border:2px solid #e57618;
    transform:rotate(45deg);
}

/* ==========================================================
   OUTER CARD
========================================================== */
.ministry-wrap{
    height:100%;
    position:relative;
    background:white;
    border:5px solid white;
    border-radius:10px;
    overflow:hidden;
    box-shadow:
        0 18px 45px rgba(23,36,45,.12),
        0 4px 10px rgba(23,36,45,.06);
    transition:.35s ease;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

.ministry-wrap:hover{
    transform:translateY(-6px);
    box-shadow:
        0 25px 55px rgba(23,36,45,.17),
        0 5px 15px rgba(23,36,45,.08);
}

/* small top color line */
.ministry-wrap:before{
    content:"";
    height:5px;
    position:absolute;
    left:0;
    top:0;
    right:0;
    z-index:10;
}

/* ==========================================================
   COMMON HEADER
========================================================== */
.ministry-head{
    min-height:136px;
    display:flex;
    position:relative;
    overflow:hidden;
    color:#fff;
}

.ministry-head:after{
    content:"";
    position:absolute;
    width:130px;
    height:130px;
    border:20px solid rgba(255,255,255,.10);
    border-radius:50%;
    right:-38px;
    bottom:-55px;
}

.head-photo{
    width:150px;
    min-width:150px;
    position:relative;
    padding:13px;
    z-index:2;
}

.head-photo img{
    width:100%;
    height:108px;
    object-fit:cover;
    border-radius:8px;
    border:3px solid rgba(255,255,255,.95);
    box-shadow:0 9px 20px rgba(0,0,0,.20);
}

.head-content{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:17px 16px 17px 5px;
}

.mini-label{
    display:inline-flex;
    align-items:center;
    width:max-content;
    gap:6px;
    padding:4px 10px;
    margin-bottom:7px;
    border-radius:4px;
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.30);
    font-size:12px;
    font-weight:750;
    text-transform:uppercase;
    letter-spacing:1px;
}

.ministry-head h3{
    margin:0 0 5px;
    font-size:clamp(21px,2.2vw,29px);
    line-height:1.08;
    font-weight:850;
    letter-spacing:1px;
}

.ministry-head p{
    margin:0;
    max-width:420px;
    font-size:15px;
    line-height:1.4;
    font-weight:500;
    opacity:.94;
}

/* ==========================================================
   MAIN CONTENT ROW
========================================================== */
.ministry-feature{
    min-height:255px;
    padding:17px;
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:stretch;
    gap:17px;
    background:#fafafa;
}

/* waves created only with CSS */
.ministry-feature:before{
    content:"";
    position:absolute;
    width:440px;
    height:140px;
    border-radius:50%;
    border:22px solid rgba(255,255,255,.8);
    bottom:-100px;
    right:-80px;
    transform:rotate(-7deg);
}

.ministry-feature:after{
    content:"";
    position:absolute;
    width:100px;
    height:100px;
    border:2px dashed rgba(0,0,0,.07);
    border-radius:50%;
    top:-48px;
    right:27%;
}

.feature-img{
    width:49%;
    position:relative;
    z-index:2;
    margin:3px;
}

.feature-img img{
    width:100%;
    height:100%;
    min-height:215px;
    object-fit:cover;
    border-radius:8px;
    border:4px solid #fff;
    box-shadow:0 8px 24px rgba(29,43,53,.17);
}

.main-badge{
    position:absolute;
    top:13px;
    left:13px;
    z-index:5;
    background:#fff;
    color:#24282c;
    border-radius:5px;
    padding:7px 11px;
    font-size:12px;
    font-weight:800;
    box-shadow:0 5px 14px rgba(0,0,0,.15);
}

.feature-content{
    width:51%;
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.feature-content h4{
    margin:0 0 8px;
    font-size:21px;
    line-height:1.2;
    color:#4f816a;
    font-weight:800;
}

.feature-content p{
    margin:0 0 12px;
    font-size:15.5px;
    line-height:1.55;
    color:#5b6369;
    font-weight:500;
}

.feature-points{
    display:grid;
    gap:7px;
}

.feature-point{
    display:flex;
    align-items:center;
    gap:9px;
    padding:7px 9px;
    border:1px solid rgba(0,0,0,.06);
    border-radius:6px;
    background:rgba(255,255,255,.82);
    font-size:14px;
    font-weight:650;
}

.feature-point i{
    width:29px;
    height:29px;
    flex:0 0 29px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
}

/* ==========================================================
   3 IMAGE GALLERY
========================================================== */
.mini-gallery{
    position:relative;
    padding:14px;
}

.photo-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:9px;
}

.gallery-photo{
    position:relative;
    overflow:hidden;
    border-radius:7px;
    cursor:pointer;
}

.gallery-photo img{
    display:block;
    width:100%;
    height:100px;
    object-fit:cover;
    border:3px solid rgba(255,255,255,.95);
    border-radius:7px;
    transition:.4s;
}

.gallery-photo:hover img{
    transform:scale(1.08);
}

.gallery-badge{
    position:absolute;
    left:7px;
    bottom:7px;
    padding:4px 7px;
    border-radius:4px;
    background:rgba(17,20,23,.83);
    backdrop-filter:blur(4px);
    color:#fff;
    font-size:10px;
    letter-spacing:.3px;
    font-weight:700;
}

.zoom-icon{
    position:absolute;
    width:29px;
    height:29px;
    right:7px;
    top:7px;
    border-radius:50%;
    background:#fff;
    color:#222;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    opacity:0;
    transform:scale(.7);
    transition:.3s;
}

.gallery-photo:hover .zoom-icon{
    opacity:1;
    transform:scale(1);
}

/* ==========================================================
   FOOTER CTA
========================================================== */
.ministry-footer{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 16px;
    background:#fff;
}

.footer-title small{
    display:block;
    color:#8b9499;
    font-size:11px;
    text-transform:uppercase;
    font-weight:800;
    letter-spacing:1px;
}

.footer-title strong{
    display:block;
    font-size:16px;
    color:#222b30;
    font-weight:800;
}

.read-btn{
    min-width:145px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:47px;
    padding:10px 18px;
    border:0;
    border-radius:6px;
    text-decoration:none;
    color:#fff !important;
    font-size:15px;
    font-weight:800;
    transition:.3s;
    box-shadow:0 8px 18px rgba(0,0,0,.14);
}

.read-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 24px rgba(0,0,0,.19);
}

.read-btn i{
    transition:.3s;
}

.read-btn:hover i{
    transform:translateX(5px);
}

/* ==========================================================
   01 VILLAGE — ORANGE / DIAGONAL
========================================================== */
.village:before{background:#ee7c16;}

.village .ministry-head{
    background:#e87512;
}

.village .ministry-feature{
    background:
        radial-gradient(circle at 5% 10%,#fff2df 0 55px,transparent 56px),
        linear-gradient(135deg,#fffaf4,#fff1dc);
}

.village .mini-gallery{
    background:#e67c1d;
}

.village .feature-point i{
    color:#c45e00;
    background:#ffe0b3;
}

.village .read-btn{
    background:#e87512;
}

/* unique cut */
.village .head-photo img{1
    border-radius:7px 7px 7px 7px;
}

/* ==========================================================
   02 CHILDREN — CHARCOAL / COLOR STRIPES
========================================================== */
.children:before{
    background:linear-gradient(90deg,#20252a 33%,#2570d8 33% 66%,#e74532 66%);
}

.children .ministry-head{
    background:#272b2e;
}

.children .head-photo img{
    border-radius:30px 8px 30px 8px;
}

.children .ministry-feature{
    flex-direction:row-reverse;
    background:
        radial-gradient(circle at 100% 100%,#dceaff 0 85px,transparent 86px),
        #f6f7f8;
}

.children .feature-content{
    padding:3px;
}

.children .feature-point:nth-child(1) i{
    color:#fff;
    background:#232629;
}

.children .feature-point:nth-child(2) i{
    color:#fff;
    background:#1769d2;
}

.children .feature-point:nth-child(3) i{
    color:#fff;
    background:#e64130;
}

.children .mini-gallery{
    background:#292d31;
}

.children .read-btn{
    background:#292d31;
}

/* ==========================================================
   03 YOUTH — ROYAL GRAY / TECH STYLE
========================================================== */
.youth:before{background:#596979;}

.youth .ministry-head{
    background:#586775;
}

.youth .ministry-head:before{
    content:"";
    position:absolute;
    height:1px;
    background:rgba(255,255,255,.18);
    left:0;
    right:0;
    top:42px;
}

.youth .head-photo img{
    transform:rotate(-2deg);
    border-radius:5px;
}

.youth .ministry-feature{
    background:
        linear-gradient(120deg,transparent 0 65%,rgba(89,105,121,.06) 65%),
        #f2f5f7;
}

.youth .feature-point i{
    background:#dce3e8;
    color:#536574;
}

.youth .mini-gallery{
    background:#596b7c;
}

.youth .gallery-photo:nth-child(2){
    transform:translateY(-4px);
}

.youth .read-btn{
    background:#526474;
}

/* ==========================================================
   04 WOMEN — PURPLE / SOFT ELEGANT
========================================================== */
.women:before{background:#873a91;}

.women .ministry-head{
    background:#853b90;
}

.women .head-photo{
    padding:13px 10px 13px 15px;
}

.women .head-photo img{
    border-radius:50px 8px 50px 8px;
}

.women .ministry-feature{
    flex-direction:row-reverse;
    background:
        radial-gradient(circle at 5% 100%,#eadff0 0 90px,transparent 91px),
        #faf7fb;
}

.women .feature-img img{
    border-radius:7px 35px 7px 35px;
}

.women .feature-point i{
    background:#ead8ed;
    color:#7b3584;
}

.women .mini-gallery{
    background:#873c91;
}

.women .gallery-photo img{
    border-radius:20px 5px 20px 5px;
}

.women .read-btn{
    background:#83368d;
}

/* ==========================================================
   05 HOSPITAL — GREEN / CLINICAL
========================================================== */
.hospital:before{background:#278458;}

.hospital .ministry-head{
    background:#278158;
}

.hospital .ministry-head:after{
    border-radius:5px;
    transform:rotate(45deg);
}

.hospital .head-photo img{
    border-radius:8px;
    outline:2px solid rgba(255,255,255,.25);
    outline-offset:4px;
}

.hospital .ministry-feature{
    background:
        repeating-linear-gradient(0deg,transparent 0 24px,rgba(39,129,88,.035) 25px),
        #f3faf6;
}

.hospital .feature-point i{
    background:#d9f1e4;
    color:#20774f;
}

.hospital .mini-gallery{
    background:#2b875e;
}

.hospital .read-btn{
    background:#247b53;
}

/* ==========================================================
   06 EVANGELISTIC — FIERY RED / ENERGETIC
========================================================== */
.evangelistic:before{background:#c8372d;}

.evangelistic .ministry-head{
    background:#be392f;
}

.evangelistic .head-photo img{
    clip-path:polygon(0 0,100% 0,92% 100%,8% 100%);
    border-radius:4px;
}

.evangelistic .ministry-feature{
    flex-direction:row-reverse;
    background:
        radial-gradient(circle at 95% 10%,rgba(213,62,48,.12) 0 75px,transparent 76px),
        #fff6f5;
}

.evangelistic .feature-point i{
    color:#b63228;
    background:#f7dbd8;
}

.evangelistic .mini-gallery{
    background:#be392f;
}

.evangelistic .gallery-photo:nth-child(1){
    transform:rotate(-1deg);
}

.evangelistic .gallery-photo:nth-child(3){
    transform:rotate(1deg);
}

.evangelistic .read-btn{
    background:#bc382e;
}

/* ==========================================================
   07 BIBLE EDUCATION — DEEP PURPLE / ACADEMIC
========================================================== */
.bible:before{background:#653987;}

.bible .ministry-head{
    background:#624080;
}

.bible .head-photo img{
    border-radius:5px;
    box-shadow:
        7px 7px 0 rgba(255,255,255,.13),
        0 9px 20px rgba(0,0,0,.17);
}

.bible .ministry-feature{
    background:
        linear-gradient(90deg,rgba(102,64,128,.05) 1px,transparent 1px),
        linear-gradient(rgba(102,64,128,.05) 1px,transparent 1px),
        #faf7fc;
    background-size:25px 25px;
}

.bible .feature-point i{
    color:#61397d;
    background:#e9dcef;
}

.bible .mini-gallery{
    background:#654284;
}

.bible .read-btn{
    background:#634180;
}

/* ==========================================================
   08 FILM SCREENINGS — TEAL / CINEMA
========================================================== */
.film:before{background:#087f7d;}

.film .ministry-head{
    background:#087b79;
}

.film .head-photo img{
    border-radius:4px;
    box-shadow:
        0 0 0 5px rgba(0,0,0,.15),
        0 9px 20px rgba(0,0,0,.2);
}

.film .ministry-feature{
    flex-direction:row-reverse;
    background:
        repeating-linear-gradient(
            135deg,
            rgba(0,126,124,.03),
            rgba(0,126,124,.03) 10px,
            transparent 10px,
            transparent 20px
        ),
        #f2fbfa;
}

.film .feature-point i{
    color:#067270;
    background:#d5eeed;
}

.film .mini-gallery{
    background:#087c7a;
}

.film .gallery-photo:before{
    content:"";
    position:absolute;
    left:3px;
    right:3px;
    top:3px;
    height:9px;
    z-index:3;
    background:repeating-linear-gradient(
        90deg,
        #111 0 9px,
        transparent 9px 16px
    );
    opacity:.6;
}

.film .read-btn{
    background:#087977;
}

/* ==========================================================
   LIGHTBOX
========================================================== */
#galleryModal .modal-content{
    background:#101214;
    border:0;
    border-radius:8px;
    overflow:hidden;
}

#galleryModal .modal-body{
    padding:8px;
}

#lightboxImage{
    width:100%;
    max-height:80vh;
    object-fit:contain;
    border-radius:5px;
}

.lightbox-close{
    position:absolute;
    z-index:20;
    right:16px;
    top:16px;
    width:42px;
    height:42px;
    border:0;
    border-radius:50%;
    color:#111;
    background:#fff;
    font-size:19px;
    box-shadow:0 5px 16px rgba(0,0,0,.3);
}

/* ==========================================================
   ANIMATIONS
========================================================== */
@keyframes cardAppear{
    from{
        opacity:0;
        transform:translateY(25px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.ministry-column{
    animation:cardAppear .7s ease both;
}

.ministry-column:nth-child(2){animation-delay:.08s;}
.ministry-column:nth-child(3){animation-delay:.12s;}
.ministry-column:nth-child(4){animation-delay:.16s;}

@keyframes badgeGlow{
    0%,100%{box-shadow:0 5px 14px rgba(0,0,0,.13);}
    50%{box-shadow:0 5px 20px rgba(255,255,255,.75);}
}

.main-badge{
    animation:badgeGlow 2.7s infinite;
}

/* ==========================================================
   RESPONSIVE
========================================================== */
@media(max-width:1199px){
    .head-photo{
        width:130px;
        min-width:130px;
    }

    .feature-content h4{
        font-size:19px;
    }

    .feature-content p{
        font-size:14.5px;
    }
}

@media(max-width:991.98px){
    .outreach-section{
        padding-top:40px;
    }

    .ministry-head h3{
        font-size:25px;
    }

    .gallery-photo img{
        height:120px;
    }
}

@media(max-width:575.98px){
    .outreach-section{
        padding:32px 0 45px;
    }

    .outreach-heading{
        padding:0 10px;
        margin-bottom:25px;
    }

    .outreach-heading h2{
        font-size:32px;
    }

    .outreach-heading p{
        font-size:15.5px;
    }

    .ministry-wrap{
        border-width:4px;
    }

    .ministry-head{
        min-height:125px;
    }

    .head-photo{
        width:115px;
        min-width:115px;
        padding:11px;
    }

    .head-photo img{
        height:100px;
    }

    .head-content{
        padding:13px 10px 13px 0;
    }

    .ministry-head h3{
        font-size:20px;
        letter-spacing: 1px;
    }

    .ministry-head p{
        font-size:13.5px;
    }

    .mini-label{
        font-size:10px;
    }

    .ministry-feature,
    .children .ministry-feature,
    .women .ministry-feature,
    .evangelistic .ministry-feature,
    .film .ministry-feature{
        flex-direction:column;
        padding:14px;
        gap:12px;
    }

    .feature-img,
    .feature-content{
        width:100%;
    }

    .feature-img img{
        min-height:220px;
        height:220px;
    }

    .feature-content{
        padding:5px 2px;
    }

    .feature-content h4{
        font-size:20px;
    }

    .feature-content p{
        font-size:15px;
    }

    .photo-grid{
        gap:6px;
    }

    .gallery-photo img{
        height:88px;
    }

    .gallery-badge{
        font-size:8px;
        padding:3px 5px;
    }

    .ministry-footer{
        padding:13px;
    }

    .footer-title{
        display:none;
    }

    .read-btn{
        width:100%;
        min-height:50px;
        font-size:16px;
    }
}