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

.about-hero{

    background:
    linear-gradient(rgba(4,8,25,0.82),rgba(4,8,25,0.88)),
    url('https://images.unsplash.com/photo-1504052434569-70ad5836ab65?q=80&w=2070');

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

    padding:200px 0 130px;

    position:relative;

    overflow:hidden;

}

.hero-overlay{

    position:absolute;

    width:400px;
    height:400px;

    background:#ff2e7a;

    filter:blur(150px);

    opacity:0.15;

    top:-100px;
    right:-100px;

}

.hero-content{

    position:relative;

    z-index:2;

}

.about-hero-title{

    font-size:75px;

    font-weight:800;

    color:white;

}

.about-hero-text{

    margin-top:25px;

    font-size:19px;

    color:#dddddd;

}



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

.about-main-img{

    border-radius:35px;

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

}

.about-text{

    margin-top:25px;

    line-height:2;

    color:#666666;

    font-size:17px;

}

.quote-box{

    margin-top:35px;

    background:#08153d;

    color:white;

    padding:25px;

    border-radius:20px;

    font-style:italic;

}

/* MINISTRY HIGHLIGHTS */

.ministry-highlights{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    margin-top:35px;

}



.highlight-item{

    background:#08153d;

    color:white;

    padding:12px 22px;

    border-radius:50px;

    font-size:14px;

    font-weight:600;

    transition:0.3s;

}



.highlight-item:hover{

    background:#ff2e7a;

    transform:translateY(-3px);

}

/* =========================================
   STATS
========================================= */

.stats-section{

    background:#f8f9fd;

    padding:100px 0;

}

.stat-box{

    padding:20px;

}

.stat-box h2{

    font-size:60px;

    color:#ff2e7a;

    font-weight:800;

}

.stat-box p{

    color:#555555;

    margin-top:10px;

}



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

.timeline{

    position:relative;

    max-width:900px;

    margin:auto;

}

.timeline::before{

    content:'';

    position:absolute;

    left:50%;

    top:0;

    width:3px;

    height:100%;

    background:#ff2e7a;

    transform:translateX(-50%);

}

.timeline-item{

    position:relative;

    margin-bottom:60px;

}

.timeline-year{

    background:#08153d;

    color:white;

    width:140px;

    text-align:center;

    padding:12px;

    border-radius:50px;

    font-weight:600;

    position:relative;

    left:50%;

    transform:translateX(-50%);

    z-index:2;

}

.timeline-content{

    background:white;

    padding:30px;

    border-radius:20px;

    margin-top:25px;

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

    text-align:center;

}
/* TIMELINE INTRO TEXT */

.timeline-main-text{

    max-width:900px;

    margin:25px auto 0;

    color:#666666;

    line-height:2;

    font-size:17px;

}



/* =========================================
   MINISTRY AREAS
========================================= */

.ministry-areas{

    background:#ffffff;

}

.areas-text{

    margin-top:25px;

    color:#666666;

    line-height:1.9;

}

.area-card{

    background:white;

    padding:22px 15px;

    border-radius:18px;

    text-align:center;

    font-weight:600;

    color:#08153d;

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

    transition:0.3s;

}

.area-card:hover{

    transform:translateY(-8px);

    background:#08153d;

    color:white;

}

/* =========================================
   FUTURE VISION
========================================= */

.future-vision{

    background:#f8f9fd;

    position:relative;

}



.future-text{

    margin-top:25px;

    color:#666666;

    line-height:2;

    font-size:17px;

}



/* VISION CARD */

.future-card{

    background:white;

    padding:45px 40px;

    border-radius:30px;

    height:100%;

    transition:0.4s;

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

    position:relative;

    overflow:hidden;

}



/* TOP GLOW */

.future-card::before{

    content:'';

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(45deg,#ff2e7a,#ff7eb3);

}



/* HOVER */

.future-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 50px rgba(0,0,0,0.12);

}



/* TITLE */

.future-card h3{

    font-size:28px;

    font-weight:700;

    color:#08153d;

    margin-bottom:20px;

}



/* TEXT */

.future-card p{

    color:#666666;

    line-height:2;

    font-size:16px;

}



/* MOBILE */

@media(max-width:576px){

    .future-card{

        padding:35px 28px;

    }

    .future-card h3{

        font-size:24px;

    }

}

/* =========================================
   WEAVING VIDEO SECTION
========================================= */

.weaving-section{

    background:#ffffff;

}



/* TOP TEXT */

.weaving-text{

    max-width:900px;

    margin:25px auto 0;

    color:#666666;

    line-height:2;

    font-size:17px;

}



/* VIDEO BOX */

.video-box{

    overflow:hidden;

    border-radius:35px;

    box-shadow:0 20px 50px rgba(0,0,0,0.12);

    margin-top:50px;

}



/* VIDEO */

.video-box video{

    width:100%;

    display:block;

}



/* BOTTOM TEXT */

.weaving-bottom-text{

    margin-top:35px;

    text-align:center;

    color:#555555;

    line-height:2;

    font-size:17px;

    max-width:900px;

    margin-left:auto;

    margin-right:auto;

}



/* MOBILE */

@media(max-width:576px){

    .video-box{

        border-radius:25px;

    }

}

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

.values-section{

    background:#f8f9fd;

}

.value-card{

    background:white;

    padding:45px 35px;

    border-radius:30px;

    text-align:center;

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

    transition:0.3s;

    height:100%;

}

.value-card:hover{

    transform:translateY(-10px);

}

.value-card h4{

    font-weight:700;

    margin-bottom:20px;

}

.value-card p{

    color:#666666;

    line-height:1.9;

}



/* =========================================
   BELIEFS
========================================= */

.belief-section{

    background:#ffffff;

}

.belief-card{

    background:white;

    padding:40px 30px;

    border-radius:25px;

    text-align:center;

    height:100%;

    transition:0.3s;

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

}

.belief-card:hover{

    transform:translateY(-10px);

}

.belief-card h4{

    font-weight:700;

    margin-bottom:20px;

}

.belief-card p{

    color:#666666;

    line-height:1.8;

}



/* =========================================
   SCRIPTURE
========================================= */

.scripture-section{

    background:#08153d;

    padding:100px 0;

    text-align:center;

    color:white;

    position:relative;

    overflow:hidden;

}

.scripture-section::before{

    content:'?';

    position:absolute;

    font-size:180px;

    opacity:0.04;

    right:40px;

    bottom:-20px;

}

.scripture-section h2{

    font-size:42px;

    font-weight:700;

    line-height:1.7;

    position:relative;

    z-index:2;

}

.scripture-section p{

    margin-top:20px;

    color:#ff9dc3;

    position:relative;

    z-index:2;

}

/* =========================================
   TESTIMONY SECTION
========================================= */

.testimony-section{

    background:#ffffff;

}



.testimony-box{

    background:linear-gradient(135deg,#ffffff,#f8f9fd);

    padding:60px;

    border-radius:35px;

    max-width:1000px;

    margin:auto;

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

    position:relative;

    overflow:hidden;

}



/* GLOW */

.testimony-box::before{

    content:'';

    position:absolute;

    top:-100px;

    right:-100px;

    width:250px;

    height:250px;

    background:#ff2e7a;

    opacity:0.08;

    border-radius:50%;

    filter:blur(60px);

}



/* TEXT */

.testimony-text{

    position:relative;

    z-index:2;

    color:#555555;

    line-height:2.1;

    font-size:17px;

    margin-bottom:28px;

}



/* VERSE */

.testimony-verse{

    margin-top:45px;

    background:#08153d;

    color:white;

    padding:30px;

    border-radius:25px;

    font-size:22px;

    font-style:italic;

    line-height:1.8;

    position:relative;

    z-index:2;

}



.testimony-verse span{

    display:block;

    margin-top:15px;

    color:#ff9dc3;

    font-size:16px;

    font-style:normal;

}



/* MOBILE */

@media(max-width:576px){

    .testimony-box{

        padding:35px 28px;

    }

    .testimony-verse{

        font-size:18px;

        padding:25px;

    }

}


/* =========================================
   FOUNDER MESSAGE
========================================= */

.founder-message-section{

    background:#f8f9fd;

    padding:100px 0;

}

.founder-message-box{

    background:white;

    padding:60px;

    border-radius:35px;

    text-align:center;

    max-width:900px;

    margin:auto;

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

}

.founder-message-box h2{

    font-size:45px;

    font-weight:800;

    margin-top:15px;

}

.founder-message-text{

    margin-top:35px;

    font-size:22px;

    line-height:2;

    color:#555555;

    font-style:italic;

}

.founder-signature{

    margin-top:35px;

    color:#ff2e7a;

    font-weight:700;

}



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

.gallery-strip{

    background:#ffffff;

}

.gallery-preview-box{

    position:relative;

    overflow:hidden;

    border-radius:25px;

}

.gallery-preview-box::before{

    content:'';

    position:absolute;

    inset:0;

    background:linear-gradient(to top,
    rgba(0,0,0,0.5),
    transparent);

    opacity:0;

    transition:0.4s;

    z-index:2;

}

.gallery-preview-box:hover::before{

    opacity:1;

}

.gallery-preview-img{

    width:100%;

    height:320px;

    object-fit:cover;

    transition:0.4s;

}

.gallery-preview-box:hover .gallery-preview-img{

    transform:scale(1.08);

}



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

.about-cta{

    background:linear-gradient(135deg,#08153d,#183785);

    padding:110px 0;

    text-align:center;

    color:white;

}

.about-cta h2{

    font-size:52px;

    font-weight:800;

}

.about-cta p{

    margin-top:20px;

    color:#dddddd;

    font-size:18px;

}

.cta-btn{

    margin-top:35px;

    border-radius:50px;

    padding:14px 35px;

    font-weight:600;

}



/* =========================================
   FLOATING PRAYER BUTTON
========================================= */

.floating-prayer-btn{

    position:fixed;

    right:25px;

    bottom:25px;

    z-index:999;

    background:linear-gradient(45deg,#ff2e7a,#ff7eb3);

    color:white;

    padding:16px 24px;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    box-shadow:0 10px 25px rgba(255,46,122,0.35);

    transition:0.3s;

}

.floating-prayer-btn:hover{

    transform:translateY(-5px);

    color:white;

}



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

@media(max-width:991px){

    .about-hero-title{

        font-size:55px;

    }

}



@media(max-width:768px){

    .timeline::before{

        display:none;

    }

}



@media(max-width:576px){

    .about-hero-title{

        font-size:40px;

    }

    .scripture-section h2{

        font-size:30px;

    }

    .about-cta h2{

        font-size:35px;

    }

    .founder-message-box{

        padding:35px;

    }

    .founder-message-box h2{

        font-size:32px;

    }

    .founder-message-text{

        font-size:18px;

    }

    .floating-prayer-btn{

        right:15px;

        bottom:15px;

        padding:14px 20px;

        font-size:14px;

    }

}