/*==================================================
BETHLEHEM CHARITABLE TRUST
STYLE.CSS
==================================================*/

/*==============================
GOOGLE VARIABLES
===============================*/

:root{

    /* Brand Colors */

    --primary:#436691;
    --primary-dark:#35557a;

    --accent:#84930F;
    --accent-dark:#6d7c0d;

    --heading:#223248;
    --text:#5d6975;

    --light:#F7F9FC;
    

    /*--primary:#4e6e9f;        
    --primary-dark:#2f4f7f;
    
    --secondary:#4E6E9F;
    --secondary-dark:#3E5A84;

    --accent:#D73030;
    --accent-dark:#B92424;*/

    --gold:#D9B44A;

    /* Text */

    /*--heading:#1b2b40;
    --text:#5a6a7a;*/

    /* Background */

    --white:#ffffff;
    --bg-light:#f7f9fc;
    --bg-section:#F2F6EE;

    /* Border */

    --border:#E4E8DD;

    /* Shadow */

    --shadow:0 18px 45px rgba(0,0,0,.08);

    /* Transition */

    --transition:all .35s ease;

}

/*==============================
RESET
===============================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    overflow-x:hidden;
    max-width:100%;
}

body{

    font-family:'Poppins',sans-serif;
    color:var(--text);
    background:#fff;
    overflow-x:hidden;
    max-width:100%;
    width:100%;
    line-height:1.7;

}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
}

ul{
    margin:0;
    padding:0;
    list-style:none;
}

/*==============================
HEADINGS
===============================*/

h1,h2,h3,h4,h5,h6{

    font-family:'Cormorant Garamond',serif;
    color:var(--heading);

}

h1{

    font-size:68px;
    font-weight:700;
    line-height:1.05;

}

h2{

    font-size:46px;
    font-weight:700;

}

p{

    font-size:16px;

}

/*==================================================
TOP BAR REWORK
==================================================*/

.top-bar{
    background:linear-gradient(90deg, #1E2D3E 0%, #2A3F55 50%, #1E2D3E 100%);
    color:#fff;
    font-size:13px;
    padding:10px 0;
    letter-spacing:.3px;
    border-bottom:1px solid rgba(212,175,55,.15);
    position:relative;
    z-index:1000;
}

/* layout */
.top-bar-inner{

    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;

}

/* left side */
.top-info{

    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    gap:8px;
    flex-wrap:wrap;

}

.top-info li{

    display:flex;
    align-items:center;
    gap:7px;
    color:rgba(255,255,255,.85);
    font-size:13px;
    padding:0 14px;
    border-right:1px solid rgba(255,255,255,.12);

}

.top-info li:last-child{
    border-right:none;
}

.top-info li:first-child{
    padding-left:0;
}

.top-info i{

    font-size:14px;
    color:#D4AF37;
    margin-right:4px;

}

/* right side */
.top-social{

    display:flex;
    align-items:center;
    gap:10px;

}

.top-social span{

    margin-right:6px;
    font-weight:500;
    color:rgba(255,255,255,.7);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:1.5px;

}

.top-social a{

    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    color:rgba(255,255,255,.85);
    text-decoration:none;
    font-size:13px;
    transition:all .3s ease;

}

.top-social a:hover{

    background:#D4AF37;
    border-color:#D4AF37;
    color:#1E2D3E;
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(212,175,55,.35);

}

/* responsive */
@media(max-width: 768px){

    .top-bar-inner{

        flex-direction:column;
        gap:8px;
        text-align:center;

    }

    .top-info{

        justify-content:center;

    }

    .top-info li{
        border-right:none;
        padding:0 8px;
    }

}

/*==================================================
HEADER REWORK
==================================================*/

.main-header{

    position:sticky;
    top:0;
    z-index:999;
    background:rgba(255,255,255,.97);
    box-shadow:0 4px 20px rgba(0,0,0,.04);
    transition:all .4s ease;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(0,0,0,.04);

}

/* Scroll Effect */

.main-header.scrolled{

    background:rgba(255,255,255,.98);
    box-shadow:0 8px 30px rgba(0,0,0,.08);
    border-bottom-color:transparent;

}

/* Navbar */

.navbar{

    padding:12px 0;

}

.navbar-nav{

    gap:4px;

}

/* Logo */

.navbar-brand img{

    max-height:72px;
    transition:all .4s ease;

}

/* Shrink on Scroll */

.main-header.scrolled .navbar{

    padding:6px 0;

}

.main-header.scrolled .navbar-brand img{

    max-height:58px;

}

/* Nav Links */

.navbar-nav .nav-link{

    font-weight:600;
    font-size:14.5px;
    color:#243447;
    padding:10px 16px;
    position:relative;
    transition:color .3s ease;
    letter-spacing:.3px;

}

.navbar-nav .nav-link::after{
    content:'';
    position:absolute;
    bottom:4px;
    left:16px;
    right:16px;
    height:2px;
    background:#D4AF37;
    border-radius:2px;
    transform:scaleX(0);
    transform-origin:right;
    transition:transform .35s ease;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after{
    transform:scaleX(1);
    transform-origin:left;
}

.navbar-nav .nav-link:hover{
    color:#84930F;
}

.navbar-nav .nav-link.active{
    color:#84930F;
}

/* Dropdown */

.dropdown-menu{
    border:none;
    border-radius:16px;
    padding:12px 8px;
    box-shadow:0 15px 40px rgba(0,0,0,.1);
    background:#fff;
    border:1px solid rgba(0,0,0,.04);
    margin-top:8px;
    min-width:260px;
    animation:dropdownFade .25s ease;
}

@keyframes dropdownFade{
    from{opacity:0;transform:translateY(8px);}
    to{opacity:1;transform:translateY(0);}
}

.dropdown-item{
    padding:10px 18px;
    font-size:14px;
    font-weight:500;
    color:#3A4F65;
    border-radius:10px;
    transition:all .25s ease;
    border-left:3px solid transparent;
    margin-bottom:2px;
}

.dropdown-item:hover{
    background:rgba(132,147,15,.08);
    color:#84930F;
    border-left-color:#84930F;
    padding-left:22px;
}

.dropdown-item.active,
.dropdown-item:active{
    background:rgba(132,147,15,.12);
    color:#84930F;
    border-left-color:#D4AF37;
    font-weight:600;
}

.nav-item.dropdown.active > .nav-link.dropdown-toggle{
    color:#84930F;
}

.nav-item.dropdown.active > .nav-link.dropdown-toggle::after{
    transform:scaleX(1);
    transform-origin:left;
}

/*==================================================
BUTTONS
==================================================*/

.btn-primary-custom{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 34px;

    border-radius:50px;

    background:var(--primary);

    color:#fff;

    font-weight:600;

    text-decoration:none;

    transition:var(--transition);

    box-shadow:0 12px 30px rgba(141,161,0,.28);

}

.btn-primary-custom:hover{

    background:var(--primary-dark);

    color:#fff;

    transform:translateY(-4px);

}

.btn-outline-custom{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 34px;

    border-radius:50px;

    border:2px solid var(--secondary);

    color:var(--secondary);

    font-weight:600;

    text-decoration:none;

    transition:var(--transition);

}

.btn-outline-custom:hover{

    background:var(--secondary);

    color:#fff;

}

/*==================================================
HERO
==================================================*/

.hero{
    margin-top:0;
    padding-top:0;
    position:relative;

}

.hero .carousel-item{

    height:100vh;

    min-height:650px;

}

.hero-image{

    height:100vh;

    object-fit:cover;

    animation:kenburns 8s ease forwards;

}

.hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        rgba(20,32,48,.72) 0%,
        rgba(32,48,70,.55) 45%,
        rgba(0,0,0,.25) 100%
    );
}

.carousel-caption{

    position:absolute;

    top:50%;

    left:8%;

    right:auto;

    transform:translateY(-50%);

    max-width:620px;

    text-align:left;

}

.hero-subtitle{
    display:inline-block;
    padding:8px 18px;
    background:rgba(255,255,255,.15);
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.25);
    border-radius:30px;
    color:#fff;
    letter-spacing:2px;
}

.carousel-caption h1{

    font-size:68px;
    font-weight:600;

    line-height:1.08;

    margin-bottom:30px;

    color:#ffffff;

    animation: slideLeft 1s .3s forwards;

    letter-spacing:-1px;

}

.carousel-caption h1 span{

    display:block;

    color:#C7A25A;

}

.carousel-caption p{

    font-size:20px;

    line-height:1.9;

    color:rgba(255,255,255,.92);

    max-width:620px;

    margin-bottom:40px;

    animation: slideRight 1s .6s forwards;



}

.btn-outline-hero{

    color:#fff;

    border:2px solid rgba(255,255,255,.7);

    border-radius:50px;

    padding:14px 28px;

    transition:.3s;

}

.btn-outline-hero:hover{

    background:#fff;

    color:#35557A;

}

.hero-buttons{

    display:flex;

    justify-content:flex-start;

    gap:20px;

}

.btn-donate{

    background:linear-gradient(135deg, #84930F 0%, #6C7A0B 100%);

    color:#fff;

    padding:14px 28px;

    border-radius:50px;

    font-weight:600;

    text-decoration:none;

    transition:all .3s ease;

    box-shadow:0 6px 18px rgba(132,147,15,.3);

    position:relative;

    overflow:hidden;

}

.btn-donate::before{
    content:'';
    position:absolute;
    inset:0;
    border-radius:50px;
    background:rgba(255,255,255,.15);
    opacity:0;
    transition:opacity .3s ease;
}

.btn-donate:hover::before{
    opacity:1;
}

.btn-donate:hover{

    color:#fff;

    transform:translateY(-3px);

    box-shadow:0 10px 25px rgba(132,147,15,.4);

}

.btn-donate i{
    animation:pulse-heart 2s infinite;
}

@keyframes pulse-heart{
    0%,100%{transform:scale(1);}
    50%{transform:scale(1.2);}
}

.hero .btn-light{

    padding:14px 30px;

    border-radius:50px;

}

/* Fade Animation */

.carousel-caption>*{

    opacity:0;

    transform:translateY(30px);

}

.carousel-item.active .hero-subtitle{

    animation:fadeUp .7s .2s forwards;

}

.carousel-item.active h1{

    animation:fadeUp .7s .5s forwards;

}

.carousel-item.active p{

    animation:fadeUp .7s .8s forwards;

}

.carousel-item.active .hero-buttons{

    animation:fadeUp .7s 1.1s forwards;

}

.hero-buttons{

    opacity:0;

}

/* Ken Burns */

@keyframes kenburns{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.08);

    }

}

/* Fade Up */

@keyframes fadeUp{

    from{

        opacity:0;

        transform: translateY(50px);
        filter: blur(4px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

    0%{
        opacity:0;
        transform:translateY(50px);
        filter:blur(4px);
    }

    100%{
        opacity:1;
        transform:translateY(0);
        filter:blur(0);
    }

}

/* Indicators */

.carousel-indicators button{

    width:12px;

    height:12px;

    border-radius:50%;

}

.carousel-indicators .active{

    background:#84930F;

}

/* Mobile */

@media(max-width:768px){

    .carousel-caption h1{

        font-size:38px;

    }

    .carousel-caption p{

        font-size:16px;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

}



/*==================================================
STATISTICS
==================================================*/

.stats-section{

    position:relative;

    padding:90px 0;

    /*background:linear-gradient(135deg,var(--primary),var(--primary-dark));*/
    background: linear-gradient(
    180deg,
    #7E8F03 0%,
    #6F7F02 100%
);

    overflow:hidden;

}

.stats-section::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:rgba(255,255,255,.05);

    top:-220px;

    left:-120px;

}

.stats-section::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    border-radius:50%;

    background:rgba(255,255,255,.05);

    right:-150px;

    bottom:-220px;

}

.stats-box{

    position:relative;

    z-index:2;

    text-align:center;

    color:#fff;

    padding:20px;

}

.stats-icon{

    width:90px;

    height:90px;

    margin:auto auto 25px;

    border-radius:50%;

    background:rgba(255,255,255,.12);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:36px;

    backdrop-filter:blur(6px);

    transition:var(--transition);

}

.stats-box:hover .stats-icon{

    transform:translateY(-8px) rotate(8deg);

    background:rgba(255,255,255,.18);

}

.stats-box h2{

    font-size:52px;

    color:#fff;

    margin-bottom:10px;

    font-weight:700;

}

.stats-box p{

    margin:0;

    font-size:18px;

    color:rgba(255,255,255,.90);

}

/*==================================================
ABOUT
==================================================*/

.about-section{

    /*padding:120px 0;*/

    background:#FCFAF6;
    background-image:
radial-gradient(circle at top right,
rgba(132,147,15,.05),
transparent 40%);

}

.about-images{

    position:relative;

    padding-right:70px;

}

.about-main{

    width:100%;

    border-radius:28px;

    box-shadow:var(--shadow);

}

.about-small{

    position:absolute;

    width:250px;

    right:0;

    bottom:40px;

    border:8px solid #fff;

    border-radius:24px;

    box-shadow:var(--shadow);

}

.experience-box{

    position:absolute;

    left:-20px;

    bottom:30px;

    background:var(--primary);

    color:#fff;

    padding:25px;

    border-radius:20px;

    text-align:center;

    box-shadow:0 15px 40px rgba(0,0,0,.15);

}

.experience-box h2{

    color:#fff;

    margin:0;

    font-size:42px;

}

.experience-box span{

    font-size:15px;

    line-height:1.6;

}

.about-text{

    font-size:18px;

    line-height:1.9;

    color:var(--text);

    margin-bottom:35px;

}

.about-feature{

    display:flex;

    align-items:flex-start;

    gap:18px;

    margin-bottom:30px;

}

.about-feature i{

    font-size:26px;

    color:var(--primary);

}

.about-feature h5{

    margin-bottom:8px;

    color:var(--heading);

}

.about-feature p{

    margin:0;

    color:var(--text);

}

/*==================================================
Committee
==================================================*/

.committee-card{

    background:#fff;
    border-radius:24px;
    padding:40px 28px 35px;
    box-shadow:0 10px 40px rgba(34,50,72,.07);
    border:1px solid rgba(67,102,145,.08);
    transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    height:100%;
    position:relative;
    overflow:hidden;

}

.committee-card::before{

    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:4px;
    background:linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
    opacity:0;
    transition:opacity .35s ease;

}

.committee-card:hover{

    transform:translateY(-10px);
    box-shadow:0 22px 50px rgba(34,50,72,.12);
    border-color:rgba(67,102,145,.15);

}

.committee-card:hover::before{

    opacity:1;

}

.committee-card-photo{

    position:relative;
    width:160px;
    height:160px;
    margin:0 auto 28px;

}

.committee-card-photo::before{

    content:"";
    position:absolute;
    inset:-6px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--primary) 0%, var(--accent) 50%, var(--gold) 100%);
    opacity:.25;
    transition:opacity .35s ease, inset .35s ease;

}

.committee-card:hover .committee-card-photo::before{

    opacity:.85;
    inset:-8px;

}

.committee-card-photo img,
.committee-card > img{

    width:160px;
    height:160px;
    object-fit:cover;
    border-radius:50%;
    border:5px solid #fff;
    box-shadow:0 8px 25px rgba(0,0,0,.10);
    display:block;
    margin:0 auto;
    position:relative;
    z-index:1;
    transition:transform .35s ease;

}

.committee-card-photo img{

    width:100%;
    height:100%;

}

.committee-card:hover .committee-card-photo img,
.committee-card:hover > img{

    transform:scale(1.04);

}

.committee-card-name,
.committee-card h5{

    color:var(--heading);
    font-weight:600;
    font-size:20px;
    line-height:1.4;
    margin-bottom:12px;

}

.committee-card .designation{

    display:inline-block;
    color:var(--accent);
    font-weight:600;
    font-size:13px;
    letter-spacing:.5px;
    text-transform:uppercase;
    background:rgba(132,147,15,.10);
    padding:7px 18px;
    border-radius:30px;

}

/*=============================================
TIMELINE
=============================================*/

.timeline{

    position:relative;

    max-width:1100px;

    margin:70px auto 0;

}

.timeline::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    width:4px;

    height:100%;

    background:#c8a45d;

    transform:translateX(-50%);

    border-radius:5px;

}

/* Timeline Item */

.timeline-item{

    position:relative;

    width:50%;

    margin-bottom:60px;

}

.timeline-item.left{

    left:0;

    padding-right:70px;

}

.timeline-item.right{

    left:50%;

    padding-left:70px;

}

/* Timeline Icon */

.timeline-icon{

    position:absolute;

    top:20px;

    width:60px;

    height:60px;

    background:#c8a45d;

    border:5px solid #fff;

    border-radius:50%;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:24px;

    z-index:10;

    box-shadow:0 8px 25px rgba(0,0,0,.15);

}

.timeline-item.left .timeline-icon{

    right:-30px;

}

.timeline-item.right .timeline-icon{

    left:-30px;

}

/* Timeline Card */

.timeline-card{

    background:#fff;

    border-radius:20px;

    padding:35px;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    transition:.35s;

}

.timeline-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 45px rgba(0,0,0,.15);

}

/* Year Badge */

.year-badge{

    display:inline-block;

    background:#8c6b2e;

    color:#fff;

    padding:6px 18px;

    border-radius:50px;

    font-weight:700;

    font-size:14px;

    margin-bottom:18px;

    letter-spacing:1px;

}

/* Heading */

.timeline-card h4{

    font-size:22px;

    margin-bottom:15px;

    color:#2c2c2c;

}

/* Paragraph */

.timeline-card p{

    margin:0;

    line-height:1.8;

    color:#666;

}

/*=============================================
MOBILE
=============================================*/

@media(max-width:991px){

.timeline::before{

left:30px;

}

.timeline-item{

width:100%;

left:0!important;

padding-left:90px!important;

padding-right:0!important;

}

.timeline-icon{

left:0!important;

right:auto!important;

}

}

/****************************/
.chapter-section .ministry-card{

    background:#fff;

    border-radius:20px;

    padding:40px 30px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.35s;

    height:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}

.chapter-section .ministry-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.12);

}

.chapter-section .ministry-icon{

    width:80px;

    height:80px;

    border-radius:50%;

    background:#c6a15b;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    margin-bottom:25px;

}

.chapter-section .ministry-card h4{

    margin-bottom:18px;

    min-height:58px;      /* Keeps all headings aligned */

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:600;

}

.chapter-section .ministry-card p{

    color:#666;

    line-height:1.8;

    flex-grow:1;           /* Makes all cards equal height */

}

/*==================================================
SECTION HEADING
==================================================*/

.section-heading{

    margin-bottom:65px;

}

.section-subtitle{

    display:inline-block;

    color:var(--primary);

    font-size:15px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.section-heading h2{

    font-size:52px;

    color:var(--heading);

    margin-bottom:20px;

}

.section-heading p{

    max-width:700px;

    margin:auto;

    color:var(--text);

    font-size:18px;

    line-height:1.8;

}

/*==================================================
BIBLE VERSE
==================================================*/

.verse-section {
    position: relative;
    padding: 100px 0;
    background: linear-gradient(135deg, #365271 0%, #293E56 55%, #1E2D3E 100%);
    overflow: hidden;
}

.verse-section-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.verse-section-glow--gold {
    width: 420px;
    height: 420px;
    top: -160px;
    right: -120px;
    background: rgba(212, 175, 55, 0.1);
}

.verse-section-glow--green {
    width: 360px;
    height: 360px;
    bottom: -140px;
    left: -120px;
    background: rgba(132, 147, 15, 0.1);
}

.verse-box {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
    padding: 52px 56px 48px;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 28px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}

.verse-box::before {
    content: "\201C";
    position: absolute;
    top: -10px;
    left: 28px;
    font-family: "Cormorant Garamond", serif;
    font-size: 140px;
    line-height: 1;
    color: rgba(212, 175, 55, 0.12);
    pointer-events: none;
}

.verse-label {
    display: inline-block;
    padding: 8px 20px;
    margin-bottom: 20px;
    border-radius: 40px;
    background: rgba(132, 147, 15, 0.18);
    border: 1px solid rgba(132, 147, 15, 0.35);
    color: #D4AF37;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.verse-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #84930F 0%, #6d7c0d 100%);
    color: #fff;
    font-size: 26px;
    box-shadow: 0 10px 28px rgba(132, 147, 15, 0.35);
}

.verse-quote {
    margin: 0;
    padding: 0;
    border: none;
}

.verse-text {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(20px, 2.6vw, 28px);
    line-height: 1.75;
    font-style: italic;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 22px;
}

.verse-text:last-child {
    margin-bottom: 0;
}

.verse-text--highlight {
    font-size: clamp(22px, 2.8vw, 30px);
    font-weight: 600;
    color: #fff;
    padding: 22px 28px;
    margin-top: 28px;
    border-radius: 16px;
    background: rgba(132, 147, 15, 0.15);
    border-left: 3px solid #D4AF37;
    text-align: left;
}

.verse-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 32px 0 24px;
}

.verse-divider span {
    display: block;
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.6), transparent);
}

.verse-divider-symbol {
    color: #D4AF37;
    font-size: 14px;
    line-height: 1;
    opacity: 0.85;
}

.verse-reference {
    display: block;
    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #D4AF37;
}

@media (max-width: 767px) {
    .verse-section {
        padding: 70px 0;
    }

    .verse-box {
        padding: 36px 24px 32px;
        border-radius: 22px;
    }

    .verse-box::before {
        font-size: 100px;
        left: 12px;
    }

    .verse-text--highlight {
        padding: 18px 20px;
        text-align: center;
        border-left: none;
        border-top: 3px solid #D4AF37;
    }
}

/*==================================================
MINISTRIES
==================================================*/

.ministries-section{

    padding:120px 0;

    background:#f7f9fc;

}

.ministry-card{

    background:#fff;

    border-radius:24px;

    overflow:visible;

    box-shadow:0 20px 45px rgba(0,0,0,.08);

    transition:.35s;

    height:100%;

}

.ministry-card:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 60px rgba(0,0,0,.12);

}

.ministry-image{

    position:relative;

    overflow:visible;

}

.ministry-image img{

    width:100%;

    height:260px;

    object-fit:cover;

    transition:.5s;

}

.ministry-card:hover img{

    transform:scale(1.08);

}

.ministry-icon{

    position:absolute;

    bottom:-28px;

    left:30px;

    width:70px;

    height:70px;

    border-radius:50%;

    /*background:var(--primary);*/
    background:linear-gradient(135deg,var(--primary),#6f7d0d);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    border:5px solid #fff;

}

.ministry-content{

    padding:55px 30px 30px;

}

.ministry-content h4{

    margin-bottom:18px;

    color:var(--heading);

}

.ministry-content p{

    line-height:1.9;

    margin-bottom:20px;

}

.ministry-content a{

    color:var(--primary);

    text-decoration:none;

    font-weight:600;

}

.ministry-content a i{

    margin-left:6px;

    transition:.3s;

}

.ministry-content a:hover i{

    margin-left:12px;

}

/*==================================================
SERVICE CARD
==================================================*/

.service-card{

    background:#fff;
    border-radius:24px;
    padding:35px 25px;
    text-align:center;

    box-shadow:0 20px 45px rgba(0,0,0,.08);

    transition:.35s;

    height:100%;

    display:flex;
    flex-direction:column;

}

.service-card:hover{

    transform:translateY(-8px);

    box-shadow:0 30px 60px rgba(0,0,0,.12);

}

.service-card i{

    font-size:48px;
    color:var(--primary);
    margin-bottom:20px;

}

.service-card h4{

    font-size:22px;
    min-height:60px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:15px;

}

.service-card p{

    flex:1;
    margin-bottom:0;
    line-height:1.8;

}

/*==================================================
GLOBAL CARD
==================================================*/

.theme-card{

    background:#fff;

    border-radius:24px;

    box-shadow:0 18px 45px rgba(0,0,0,.08);

    transition:var(--transition);

}

.theme-card:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 60px rgba(0,0,0,.12);

}

/*==================================================
OUR IMPACT - REWORK
==================================================*/

.impact-section{

    padding:120px 0;

    background:linear-gradient(180deg,#ffffff,#f7f9fc);

}

.impact-card{

    background:#fff;

    padding:40px 30px;

    border-radius:24px;

    text-align:center;

    box-shadow:0 15px 40px rgba(0,0,0,.06);

    transition:.35s ease;

    height:100%;

}

.impact-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 60px rgba(0,0,0,.12);

}

/* icon */
.impact-icon{

    width:65px;

    height:65px;

    margin:0 auto 20px;

    border-radius:50%;

    background:rgba(78,110,159,.1);

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--primary);

    font-size:26px;

}

/* number */
.impact-card h3{

    font-size:40px;

    color:var(--heading);

    margin-bottom:10px;

    font-weight:700;

}

/* title */
.impact-card h5{

    margin-bottom:10px;

    font-weight:600;

    color:var(--primary);

}

/* description */
.impact-card p{

    font-size:14px;

    color:var(--text);

    line-height:1.7;

    margin:0;

}


/*====================== Section divider */
/*.section-divider{

    padding:85px 0;

    background:linear-gradient(135deg,var(--primary),var(--primary-dark));

    color:#fff;

    position:relative;

    overflow:hidden;

}

.section-divider::before,
.section-divider::after{

    content:"";

    position:absolute;

    width:320px;
    height:320px;

    border-radius:50%;

    background:rgba(255,255,255,0.08);

    filter:blur(2px);

}

.section-divider::before{
    top:-140px;
    left:-100px;
}

.section-divider::after{
    bottom:-140px;
    right:-100px;
}

.section-divider h3{

    color:#fff;

    font-size:30px;

    font-style:italic;

    font-weight:400;

    letter-spacing:.4px;

    line-height:1.4;

    margin-bottom:10px;

}

.section-divider span{

    color:rgba(255,255,255,0.85);

    font-size:14px;

    letter-spacing:1px;

}*/

/*=============================================
SECTION DIVIDER
=============================================*/

.section-divider{

    position:relative;

    background:url('../images/backgrounds/bible-divider.png') center center;

    background-size:cover;

    background-attachment:fixed;

    padding:140px 0;

    overflow:hidden;

}

.section-divider::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        rgba(0,0,0,.25),
        rgba(0,0,0,.55),
        rgba(0,0,0,.25)
    );
}

.section-divider .overlay{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,.55);

}

.section-divider .container{

    position:relative;

    z-index:2;

}

.section-divider h3{

    color:#fff;

    font-size:2rem;

    font-weight:600;

    line-height:1.6;

    margin-bottom:20px;

    text-shadow:0 2px 8px rgba(0,0,0,.4);

}

.section-divider span{

    color:#fff;

    font-size:1.1rem;

    letter-spacing:2px;

    text-transform:uppercase;

    text-shadow:0 2px 8px rgba(0,0,0,.4);

}

/*==================================================
GALLERY
==================================================*/

.gallery-section{

    padding:120px 0;

    background:var(--bg-light);

}

.gallery-item{

    position:relative;

    display:block;

    overflow:hidden;

    border-radius:22px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.gallery-item img{

    width:100%;

    height:280px;

    object-fit:cover;

    transition:.5s;

}

.gallery-overlay{

    position:absolute;

    inset:0;

    background:rgba(78,110,159,.75);

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    transition:.4s;

}

.gallery-overlay i{

    width:70px;

    height:70px;

    border-radius:50%;

    background:#fff;

    color:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

}

.gallery-item:hover img{

    transform:scale(1.08);

}

.gallery-item:hover .gallery-overlay{

    opacity:1;

}

/*==================================================
TESTIMONIALS
==================================================*/

.testimonials-section{

    padding:120px 0;

    background:#fff;

}

.testimonial-card{

    background:#fff;

    border-radius:24px;

    padding:40px;

    box-shadow:0 18px 45px rgba(0,0,0,.08);

    height:100%;

}

.quote{

    width:60px;

    height:60px;

    border-radius:50%;

    /*background:var(--primary);*/
    background:linear-gradient(135deg,var(--primary),#6f7d0d);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:26px;

    margin-bottom:25px;

}

.testimonial-card p{

    line-height:1.9;

    margin-bottom:30px;

    color:var(--text);

    font-style:italic;

}

.testimonial-footer{

    display:flex;

    align-items:center;

    gap:15px;

}

.testimonial-footer img{

    width:70px;

    height:70px;

    border-radius:50%;

    object-fit:cover;

}

.testimonial-footer h5{

    margin:0;

    color:var(--heading);

}

.testimonial-footer span{

    color:var(--primary);

    font-size:14px;

}

.swiper-pagination-bullet{

    background:var(--primary);

}

.swiper-pagination-bullet-active{

    width:28px;

    border-radius:20px;

}

/*==================================================
LATEST NEWS
==================================================*/

.news-section{

    padding:120px 0;

    background:#f9fbff;

}

.news-card{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    box-shadow:0 18px 45px rgba(0,0,0,.08);

    transition:.35s;

    height:100%;

}

.news-card:hover{

    transform:translateY(-8px);

}

.news-image{

    overflow:hidden;

}

.news-image img{

    width:100%;

    height:250px;

    object-fit:cover;

    transition:.5s;

}

.news-card:hover img{

    transform:scale(1.08);

}

.news-content{

    padding:30px;

}

.news-date{

    color:var(--primary);

    font-size:15px;

    margin-bottom:15px;

    font-weight:600;

}

.news-date i{

    margin-right:8px;

}

.news-content h4{

    margin-bottom:18px;

    color:var(--heading);

}

.news-content p{

    line-height:1.8;

    margin-bottom:20px;

}

.news-content a{

    color:var(--primary);

    font-weight:600;

    text-decoration:none;

}

.news-content a i{

    margin-left:6px;

    transition:.3s;

}

.news-content a:hover i{

    margin-left:12px;

}

/*=========================================
MEMORIES
=========================================*/

.memory-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    transition:.35s;

}

.memory-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.15);

}

.memory-card img{

    width:100%;

    height:260px;

    object-fit:cover;

    transition:.4s;

}

.memory-card:hover img{

    transform:scale(1.05);

}

.memory-content{

    padding:25px;

}

.memory-date{

    display:inline-block;

    background:#c6a15b;

    color:#fff;

    padding:5px 14px;

    border-radius:30px;

    font-size:13px;

    margin-bottom:15px;

}

.memory-content h5{

    margin-bottom:15px;

    font-weight:600;

}

.memory-content p{

    margin-bottom:0;

    color:#666;

    line-height:1.7;

}

.memoriesSwiper{

    padding-bottom:60px;

}

.swiper-pagination-bullet-active{

    background:#c6a15b;

}

/*==================================================
DONATION CTA
==================================================*/

.donation-section{

    padding:120px 0;

    /*background:linear-gradient(135deg,var(--primary),var(--primary-dark));*/
    background: linear-gradient(
        180deg,
        #7E8F03 0%,
        #6F7F02 100%
    );

    position:relative;

    overflow:hidden;

}

.donation-section::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    background:rgba(255,255,255,.05);

    border-radius:50%;

    top:-200px;

    left:-150px;

}

.donation-section::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    background:rgba(255,255,255,.05);

    border-radius:50%;

    bottom:-220px;

    right:-150px;

}

.donation-box{

    position:relative;

    z-index:2;

    max-width:850px;

    margin:auto;

    color:#fff;

}

.donation-box h2{

    color:#fff;

    font-size:52px;

    margin-bottom:20px;

}

.donation-box p{

    color:rgba(255,255,255,.9);

    font-size:18px;

    line-height:1.8;

    margin-bottom:35px;

}

/*==================================================
FOOTER
==================================================*/

.footer {
    position: relative;
    padding: 100px 0 36px;
    background:
        linear-gradient(165deg, #1a2a3c 0%, #152232 45%, #0f1a28 100%);
    color: rgba(255, 255, 255, 0.78);
    overflow: hidden;
}

.footer::before,
.footer::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.footer::before {
    width: 520px;
    height: 520px;
    top: -220px;
    right: -180px;
    background: rgba(132, 147, 15, 0.07);
}

.footer::after {
    width: 380px;
    height: 380px;
    bottom: -160px;
    left: -140px;
    background: rgba(212, 175, 55, 0.06);
}

.footer-accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
        transparent 0%,
        #84930F 20%,
        #D4AF37 50%,
        #84930F 80%,
        transparent 100%);
}

.footer .container {
    z-index: 1;
}

/* Brand column */
.footer-brand {
    max-width: 360px;
}

.footer-logo-link {
    display: inline-block;
    margin-bottom: 22px;
    transition: transform 0.35s ease, opacity 0.35s ease;
}

.footer-logo-link:hover {
    transform: translateY(-2px);
    opacity: 0.92;
}

.footer-logo {
    max-width: 190px;
    filter: brightness(1.05);
}

.footer-tagline {
    font-size: 15px;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 28px;
}

.footer-social {
    margin-bottom: 28px;
}

.footer-social-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 14px;
}

.footer-social-links {
    display: flex;
    gap: 10px;
}

.footer-social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 16px;
    transition: background 0.3s ease,
                border-color 0.3s ease,
                transform 0.3s ease,
                color 0.3s ease;
}

.footer-social-links a:hover {
    background: #84930F;
    border-color: #84930F;
    color: #fff;
    transform: translateY(-3px);
}

.footer-donate-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 50px;
    background: linear-gradient(135deg, #84930F 0%, #6C7A0B 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(132, 147, 15, 0.3);
    transition: transform 0.35s ease,
                box-shadow 0.35s ease,
                background 0.35s ease;
}

.footer-donate-btn:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(132, 147, 15, 0.42);
    background: linear-gradient(135deg, #72810D 0%, #5E6A09 100%);
}

.footer-donate-btn i {
    font-size: 13px;
    animation: footerHeartPulse 2s ease-in-out infinite;
}

@keyframes footerHeartPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.15); }
}

/* Headings */
.footer-heading {
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 28px;
    position: relative;
    padding-bottom: 14px;
}

.footer-heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 42px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #D4AF37, #84930F);
}

/* Link lists */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

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

.footer-links li a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    font-size: 15px;
    transition: color 0.3s ease, transform 0.3s ease;
}

.footer-links li a::before {
    content: "";
    width: 0;
    height: 1px;
    background: #D4AF37;
    transition: width 0.3s ease;
    flex-shrink: 0;
}

.footer-links li a:hover {
    color: #fff;
    transform: translateX(4px);
}

.footer-links li a:hover::before {
    width: 12px;
}

/* Contact list */
.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
}

.footer-contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #D4AF37;
    font-size: 15px;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.footer-contact li:hover .footer-contact-icon {
    background: rgba(132, 147, 15, 0.2);
    border-color: rgba(132, 147, 15, 0.35);
}

.footer-contact a {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    transition: color 0.3s ease;
    word-break: break-word;
}

.footer-contact a:hover {
    color: #fff;
}

/* Bottom bar */
.footer-bottom {
    margin-top: 56px;
}

.footer-divider {
    height: 1px;
    margin-bottom: 28px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.14) 20%,
        rgba(255, 255, 255, 0.14) 80%,
        transparent 100%);
}

.footer-copyright {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
}

.footer-credit {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.45);
}

.footer-credit a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-credit a:hover {
    color: #D4AF37;
}

@media (max-width: 991px) {
    .footer {
        padding: 80px 0 32px;
    }

    .footer-brand {
        max-width: 100%;
    }

    .footer-bottom {
        margin-top: 44px;
    }
}

@media (max-width: 767px) {
    .footer {
        padding: 64px 0 28px;
    }

    .footer-heading {
        margin-bottom: 20px;
        font-size: 20px;
    }

    .footer-main > [class*="col-"]:not(:last-child) {
        margin-bottom: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .footer-donate-btn i {
        animation: none;
    }
}


/*==================================================
BACK TO TOP
==================================================*/

.back-to-top {

    position: fixed;
    right: max(16px, env(safe-area-inset-right, 0px));
    bottom: max(16px, env(safe-area-inset-bottom, 0px));
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #84930F 0%, #6C7A0B 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 16px, 0);
    z-index: 999;
    box-shadow: 0 8px 22px rgba(132, 147, 15, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: opacity 0.35s ease,
                visibility 0.35s ease,
                transform 0.35s ease,
                box-shadow 0.35s ease;
    /* Keep fixed button from contributing to layout width */
    max-width: calc(100vw - 32px);
}

.back-to-top:hover {
    color: #fff;
    transform: translate3d(0, -3px, 0);
    box-shadow: 0 12px 28px rgba(132, 147, 15, 0.45);
}

.back-to-top.show {

    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);

}

.back-to-top.show:hover {
    transform: translate3d(0, -3px, 0);
}

@media (max-width: 575.98px) {
    .back-to-top {
        right: 14px;
        bottom: 14px;
        width: 44px;
        height: 44px;
    }
}


/*==================================================
PRELOADER
==================================================*/

.preloader {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #FCFAF6 0%, #F7F3EC 45%, #EEF1E4 100%);
    z-index: 99999;
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0.7s ease,
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
}

.preloader.loaded {
    opacity: 0;
    visibility: hidden;
    transform: scale(1.04);
    pointer-events: none;
}

.preloader-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(10px);
}

.preloader-glow--one {
    width: 420px;
    height: 420px;
    top: -120px;
    left: -100px;
    background: radial-gradient(circle, rgba(132, 147, 15, 0.16) 0%, transparent 70%);
    animation: preloaderFloat 5s ease-in-out infinite alternate;
}

.preloader-glow--two {
    width: 360px;
    height: 360px;
    right: -80px;
    bottom: -100px;
    background: radial-gradient(circle, rgba(54, 82, 113, 0.14) 0%, transparent 70%);
    animation: preloaderFloat 6.5s ease-in-out infinite alternate-reverse;
}

.loader {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.55s ease;
}

.preloader.loaded .loader {
    transform: translateY(-18px) scale(0.92);
    opacity: 0;
}

.loader-logo {
    position: relative;
    z-index: 2;
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 12px 36px rgba(34, 50, 72, 0.12),
                0 0 0 8px rgba(255, 255, 255, 0.65);
    animation: loaderLogoPulse 1.8s ease-in-out infinite;
}

.loader-logo img {
    width: 76px;
    height: auto;
    display: block;
}

.loader-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 148px;
    height: 148px;
    margin: -74px 0 0 -74px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: #84930F;
    border-right-color: rgba(212, 175, 55, 0.55);
    animation: loaderSpin 1.1s linear infinite;
    z-index: 1;
}

.loader-ring--inner {
    width: 128px;
    height: 128px;
    margin: -64px 0 0 -64px;
    border-top-color: #365271;
    border-right-color: transparent;
    border-bottom-color: rgba(132, 147, 15, 0.35);
    animation-duration: 1.6s;
    animation-direction: reverse;
}

.loader-text {
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #365271;
}

.loader-dots::after {
    content: "";
    display: inline-block;
    width: 1.4em;
    text-align: left;
    animation: loaderDots 1.4s steps(4, end) infinite;
}

@keyframes loaderSpin {
    to { transform: rotate(360deg); }
}

@keyframes loaderLogoPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 12px 36px rgba(34, 50, 72, 0.12),
                    0 0 0 8px rgba(255, 255, 255, 0.65);
    }
    50% {
        transform: scale(1.04);
        box-shadow: 0 16px 42px rgba(132, 147, 15, 0.18),
                    0 0 0 12px rgba(212, 175, 55, 0.12);
    }
}

@keyframes preloaderFloat {
    from { transform: translate(0, 0); }
    to   { transform: translate(18px, 14px); }
}

@keyframes loaderDots {
    0%   { content: ""; }
    25%  { content: "."; }
    50%  { content: ".."; }
    75%  { content: "..."; }
    100% { content: ""; }
}

@media (prefers-reduced-motion: reduce) {
    .preloader,
    .loader,
    .loader-logo,
    .loader-ring,
    .preloader-glow {
        animation: none !important;
        transition: none !important;
    }

    .preloader.loaded {
        opacity: 0;
        visibility: hidden;
    }
}

/*==============================
OFFCANVAS
===============================*/

.offcanvas{

    width:300px;

}

.mobile-nav li{

    border-bottom:1px solid #ececec;

}

.mobile-nav li a{

    display:block;

    padding:15px 5px;

    color:#333;

    font-weight:500;

}

.mobile-nav li a.active{

    color:#84930F;

    font-weight:600;

}

.mobile-nav .collapse a.active{

    color:#84930F;

    font-weight:600;

    padding-left:8px;

    border-left:3px solid #D4AF37;

}

/*==============================
SCROLL HEADER
===============================*/

.main-header.scrolled{

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

/*==============================
UTILITY
===============================*/

.section{

    padding:100px 0;

}

.section-title{

    margin-bottom:60px;
    text-align:center;

}

.section-title h2{

    margin-bottom:15px;

}

.section-title p{

    max-width:650px;
    margin:auto;

}

/*==================================================
GLOBAL POLISH LAYER
==================================================*/

/* Better scroll behavior */
html{
    scroll-behavior:smooth;
}

/* Consistent section spacing */
section{
    padding:110px 0;
}

/* Fix heading rhythm */
.section-heading{
    max-width:750px;
    margin:0 auto 60px;
}

.section-heading h2{
    font-size:42px;
    margin-bottom:15px;
}

.section-heading p{
    font-size:16px;
    line-height:1.8;
    color:var(--text);
}

/* Subtle background tone system */
.bg-light{
    background:#f7f9fc !important;
}

/* Better buttons consistency */
.btn-primary-custom,
.btn-outline-custom,
.btn-donate{
    transition:.3s ease;
}

.btn-primary-custom:hover,
.btn-outline-custom:hover{
    transform:translateY(-2px);
}

/* Card hover consistency */
.news-card,
.gallery-item,
.testimonial-card{
    transition:.35s ease;
}

/* Unified image handling */
img{
    max-width:100%;
    height:auto;
}

/* Remove accidental overflow issues */
body{
    overflow-x:hidden;
}

/* Better icon alignment globally */
.bi{
    line-height:1;
}

/* Slight fade-in feel for sections */
section{
    position:relative;
}

/* Improve focus visibility (accessibility) */
a:focus,
button:focus{
    outline:2px solid var(--primary);
    outline-offset:3px;
}

/* ==================================================
   CALLING SECTION
   Matches homepage about2 / donate2 theme
   ================================================== */

.calling-section {
    padding: 100px 0;
    background: linear-gradient(180deg, #FCFAF6 0%, #F7F3EC 100%);
    position: relative;
    overflow: hidden;
}

.calling-section::before,
.calling-section::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.calling-section::before {
    width: 420px;
    height: 420px;
    top: -180px;
    right: -140px;
    background: rgba(132, 147, 15, 0.06);
}

.calling-section::after {
    width: 320px;
    height: 320px;
    bottom: -120px;
    left: -100px;
    background: rgba(212, 175, 55, 0.07);
}

.calling-box {
    position: relative;
    max-width: 920px;
    margin: 0 auto;
    padding: 56px 50px 50px;
    text-align: center;
    background: #fff;
    border-radius: 28px;
    border: 1px solid rgba(67, 102, 145, 0.08);
    box-shadow: 0 22px 55px rgba(34, 50, 72, 0.08);
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.4s ease;
}

.calling-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 65px rgba(34, 50, 72, 0.12);
}

.calling-box-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 15% 0%,
            rgba(132, 147, 15, 0.08) 0%,
            transparent 55%),
        radial-gradient(ellipse at 85% 100%,
            rgba(67, 102, 145, 0.06) 0%,
            transparent 50%);
    pointer-events: none;
}

.calling-icon {
    position: relative;
    z-index: 1;
    width: 88px;
    height: 88px;
    margin: 0 auto 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 34px;
    color: #fff;
    background: linear-gradient(135deg, #84930F 0%, #6d7c0d 100%);
    box-shadow: 0 12px 32px rgba(132, 147, 15, 0.32);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.calling-box:hover .calling-icon {
    transform: scale(1.06);
    box-shadow: 0 16px 38px rgba(132, 147, 15, 0.4);
}

.calling-box .about2-subtitle {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin-bottom: 12px;
}

.calling-title {
    position: relative;
    z-index: 1;
    font-size: clamp(34px, 4vw, 46px);
    margin-bottom: 20px;
}

.calling-title span {
    display: block;
    color: #84930F;
}

.calling-lead {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto 32px;
    font-size: 17px;
    line-height: 1.9;
    color: #5d6975;
}

.calling-highlights {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-bottom: 34px;
}

.calling-highlight {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: linear-gradient(180deg, #FCFAF6 0%, #fff 100%);
    border: 1px solid rgba(67, 102, 145, 0.08);
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(34, 50, 72, 0.05);
    font-weight: 600;
    font-size: 14px;
    color: #243447;
    transition: transform 0.35s ease,
                box-shadow 0.35s ease,
                border-color 0.35s ease;
}

.calling-highlight:hover {
    transform: translateY(-3px);
    border-color: rgba(132, 147, 15, 0.25);
    box-shadow: 0 10px 28px rgba(34, 50, 72, 0.08);
}

.calling-highlight-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(67, 102, 145, 0.1), rgba(132, 147, 15, 0.14));
    color: #84930F;
    font-size: 17px;
    transition: background 0.35s ease, color 0.35s ease;
}

.calling-highlight:hover .calling-highlight-icon {
    background: linear-gradient(135deg, #84930F 0%, #6d7c0d 100%);
    color: #fff;
}

.calling-btn {
    position: relative;
    z-index: 1;
}

.calling-btn i {
    transition: transform 0.3s ease;
}

.calling-btn:hover i {
    transform: translateX(4px);
}

@media (max-width: 767px) {
    .calling-section {
        padding: 70px 0;
    }

    .calling-box {
        padding: 40px 24px 36px;
        border-radius: 22px;
    }

    .calling-icon {
        width: 76px;
        height: 76px;
        font-size: 28px;
    }

    .calling-highlights {
        flex-direction: column;
        align-items: stretch;
    }

    .calling-highlight {
        justify-content: flex-start;
    }
}




/*==================================================
PAGE BANNER
==================================================*/

.page-banner{

    position:relative;

    background:url("../images/banner/about-banner.jpeg") center center/cover no-repeat;

    padding:180px 0 120px;

}

.vision {
    background:url("../images/banner/vision-banner.jpg") center center/cover no-repeat;
}

.mission {
    background:url("../images/banner/mission-banner.jpg") center center/cover no-repeat;
}

.founder {
    background:url("../images/banner/founder-banner.jpg") center center/cover no-repeat;
}

.community {
    background:url("../images/banner/community-banner.jpg") center center/cover no-repeat;
}

.geriatric {
    background:url("../images/banner/geriatric-banner.jpg") center center/cover no-repeat;
}

.snehatheeram {
    background:url("../images/banner/snehatheeram-banner.jpeg") center center/cover no-repeat;
}

.moments {
    background:url("../images/banner/moments-banner.jpg") center center/cover no-repeat;
}

.momentsgallery {
    background:url("../images/banner/gallery-banner.jpg") center center/cover no-repeat;
}

.contact {
    background:url("../images/banner/contact-banner.jpeg") center center/cover no-repeat;
}

.banner-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.55);

}

.page-banner .container{

    position:relative;

    z-index:2;

}

.page-banner h1{

    color:#fff;

    font-size:56px;

    font-weight:700;

    margin-bottom:20px;

}

.page-banner p{

    color:rgba(255,255,255,.9);

    font-size:20px;

}

.breadcrumb{

    margin-top:30px;

}

.breadcrumb a{

    color:#fff;

    text-decoration:none;

}

.breadcrumb-item.active{

    color:#d8d8d8;

}

.breadcrumb-item+.breadcrumb-item::before{

    color:#fff;

}


/*==================================================
CORE VALUES
==================================================*/

.value-card{

    background:#fff;

    border-radius:18px;

    padding:40px 30px;

    text-align:center;

    transition:.35s;

    box-shadow:0 5px 20px rgba(0,0,0,.05);

    height:100%;

}

.value-card:hover{

    transform:translateY(-10px);

}

.value-card i{

    font-size:48px;

    color:#436691;

    margin-bottom:20px;

}

.value-card h4{

    margin-bottom:18px;

}

.value-card p{

    color:#666;

    margin:0;

}


/*==================================================
WHY CHOOSE US
==================================================*/

.why-item{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:20px;

    font-weight:600;

}

.why-item i{

    color:var(--secondary);

    font-size:22px;

}


/*==================================================
CTA
==================================================*/

.cta-section{

    padding:100px 0;

    /*background:linear-gradient(
        135deg,
        #35557A 0%,
        #436691 70%,
        #6A8242 90%,
        #84930F 100%
    );*/

    background: linear-gradient(
    180deg,
    #7E8F03 0%,
    #6F7F02 100%
);

    color:#fff;

}

.cta-section h2{

    font-size:48px;

    margin-bottom:25px;

    color:#fff;

}

.cta-section p{

    max-width:720px;

    margin:0 auto 40px;

    font-size:19px;

    color:rgba(255,255,255,.9);

}

/*==================================================
MINISTRY PILLARS
==================================================*/

.pillar-card,
.future-card{

    background:#fff;

    border-radius:20px;

    padding:40px 30px;

    text-align:center;

    height:100%;

    box-shadow:0 8px 30px rgba(0,0,0,.06);

    transition:var(--transition);

}

.pillar-card:hover,
.future-card:hover{

    transform:translateY(-10px);

}

.pillar-icon,
.future-card i{

    width:80px;

    height:80px;

    margin:0 auto 25px;

    border-radius:50%;

    background:linear-gradient(135deg,#436691,#84930F);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

}

.future-card i{

    display:inline-flex;

}

.pillar-card h4,
.future-card h4{

    margin-bottom:18px;

    color:var(--primary);

}

.pillar-card p,
.future-card p{

    margin:0;

    color:#666;

    line-height:1.8;

}


.quote-section{

    padding:90px 0;

    background:#fff;

}

.quote-box{

    max-width:900px;

    margin:auto;

    text-align:center;

}

.quote-box i{

    font-size:48px;

    color:#84930F;

    margin-bottom:25px;

}

.quote-box h3{

    font-size:34px;

    line-height:1.6;

    color:#2c2c2c;

    font-style:italic;

    margin-bottom:20px;

}

.quote-box span{

    color:#436691;

    font-weight:600;

    letter-spacing:1px;

}

/*==================================================
CLOSING MESSAGE
==================================================*/

.closing-message{

    background:#fff;

}

.closing-message h2{

    margin-bottom:25px;

}

.closing-message .lead{

    font-size:1.3rem;

    color:#436691;

    font-weight:500;

    line-height:1.9;

}

.closing-message p{

    font-size:17px;

    line-height:1.9;

    color:#666;

}

.feature-icon{
    width:80px;
    height:80px;
    margin:0 auto 25px;
    border-radius:50%;
    background:rgba(67,102,145,.08);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:0.4s ease;
}

.feature-icon i{
    font-size:36px;
    color:#436691;
}

.feature-card:hover .feature-icon{
    background:linear-gradient(135deg,#436691,#84930F);
    transform:translateY(-5px);
}

.feature-card:hover .feature-icon i{
    color:#fff;
}

/*==================================================
GALLERY
==================================================*/

.gallery-filter{

    margin-bottom:50px;

}

.gallery-filter .btn{

    margin:5px;
    border-radius:50px;
    padding:10px 22px;

}

.gallery-item{

    overflow:hidden;

}

.gallery-item img{

    width:100%;
    border-radius:20px;
    transition:.5s;

}

.gallery-item:hover img{

    transform:scale(1.08);

}

.gallery-item{

    overflow:hidden;

    border-radius:20px;

}

.gallery-item img{

    width:100%;

    transition:.5s ease;

}

.gallery-item:hover img{

    transform:scale(1.08);

}

.gallery-item a{

    display:block;

}

.memory-card{

    border-radius:20px;
    overflow:hidden;
    transition:.35s ease;

}

.memory-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 40px rgba(0,0,0,.12)!important;

}

.memory-card img{

    height:240px;
    object-fit:cover;

}

.memory-date{

    display:inline-block;

    color:#84930F;

    font-weight:600;

    margin-bottom:12px;

    font-size:.9rem;

}

.memory-date{
    color:#fff !important;
}

/* ==========================================================
MOMENT DETAILS
========================================================== */

.moment-hero{

    position: relative;
    min-height: 500px;

    display: flex;
    align-items: center;
    justify-content: center;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    overflow: hidden;

}

.moment-overlay{

    position: absolute;
    inset: 0;

    background: rgba(0,0,0,.55);

}

.moment-hero .container{

    position: relative;
    z-index: 2;

}

.moment-hero h1{

    color: #fff;

    font-size: 3.2rem;

    font-weight: 700;

    margin-top: 20px;

    font-family: 'Cormorant Garamond', serif;

}

.moment-hero .memory-date{

    display: inline-block;

    padding: 8px 18px;

    background: rgba(255,255,255,.18);

    color: #fff;

    border: 1px solid rgba(255,255,255,.35);

    border-radius: 50px;

    font-weight: 600;

    backdrop-filter: blur(8px);

}

.moment-hero .breadcrumb{

    margin-top: 25px;

}

.moment-hero .breadcrumb-item{

    color: rgba(255,255,255,.8);

}

.moment-hero .breadcrumb-item a{

    color: #fff;

    text-decoration: none;

}

.moment-hero .breadcrumb-item.active{

    color: #fff;

}

.moment-hero .breadcrumb-item + .breadcrumb-item::before{

    color: rgba(255,255,255,.7);

}

/* ==========================================================
DESCRIPTION
========================================================== */

.moment-content{

    padding: 80px 0;

}

.moment-description{

    max-width: 900px;

    margin: auto;

    line-height: 1.9;

    font-size: 1.05rem;

}

.moment-description img{

    max-width:100%;
    height:auto;
    border-radius:12px;
    margin:20px 0;

}

.moment-description table{

    width:100% !important;

}

.moment-description iframe{

    max-width:100%;

}

/* ==========================================================
GALLERY
========================================================== */

.moment-gallery{

    padding-bottom:80px;

}

.gallery-image{

    display:block;

    overflow:hidden;

    border-radius:16px;

}

.gallery-image img{

    width:100%;
    height:260px;
    object-fit:cover;

    transition:.4s;

}

.gallery-image:hover img{

    transform:scale(1.08);

}

/* ==========================================================
RESPONSIVE
========================================================== */

@media(max-width:991px){

    .moment-hero{

        min-height:400px;

    }

    .moment-hero h1{

        font-size:2.5rem;

    }

}

@media(max-width:767px){

    .moment-hero{

        min-height:320px;

    }

    .moment-hero h1{

        font-size:2rem;

    }

    .moment-description{

        font-size:1rem;

    }

}