body{
font-family:'Segoe UI',Arial;
background:#faf7f0;
}

.church-nav{
background:#1B526A;
}

/* =====================================
   PREMIUM HERO BANNER
===================================== */


.church-banner{

min-height:90vh;

position:relative;

display:flex;

align-items:center;


background:

linear-gradient(
90deg,
rgba(0,0,0,.75),
rgba(0,0,0,.35)
),

url('../images/Church Reworked Image kb.png');


background-size:cover;

background-position:center;


overflow:hidden;


}



/* decorative glow */


.church-banner:before{


content:"";


position:absolute;


width:500px;

height:500px;


background:#d49b35;


opacity:.15;


border-radius:50%;


right:-150px;


top:-150px;


}





.banner-overlay{


position:relative;


background:none;


border:none;


box-shadow:none;


text-align:left;


max-width:850px;


padding:70px;


animation:heroShow 1.2s ease;


}




@keyframes heroShow{


from{

opacity:0;

transform:translateY(50px);

}


to{

opacity:1;

transform:none;

}


}



.banner-overlay h1{


font-family:Georgia,serif;


font-size:48px;


line-height:1.15;


font-weight:800;


color:white;


margin-bottom:20px;


}





.banner-overlay h1:before{


content:"";


display:block;


width:90px;


height:5px;


/* background:#d49b35; */


margin-bottom:25px;


border-radius:10px;


}




.banner-overlay p{


font-size:25px;


color:#ffd88a;


font-weight:600;


margin-bottom:15px;


}




.banner-overlay span{


font-size:18px;


letter-spacing:4px;


color:white;


}





/* HERO BUTTONS */

/* .banner-overlay:after{


/* content:"Visit Us  |  Contact"; */


display:inline-block;


margin-top:35px;


padding:14px 35px;


/* background:#d49b35; */


color:white;


border-radius:50px;


font-weight:700;


font-size:16px;


box-shadow:

0 10px 25px rgba(0,0,0,.3);


transition:.3s;


} */


.banner-overlay:after:hover{


transform:translateY(-5px);


}




/* Floating welcome card */




@keyframes floatCard{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-15px);

}


}



/* MOBILE */


@media(max-width:768px){


.church-banner{


min-height:75vh;


background-position:center;


}




.banner-overlay{


padding:35px 25px;


}



.banner-overlay h1{


font-size:34px;


}



.banner-overlay p{


font-size:22px;


}



.banner-overlay span{


font-size:14px;


letter-spacing:2px;


}




}

.church-card{
padding:30px;
background:white;
border-radius:15px;
box-shadow:0 5px 20px #ddd;
height:100%;
}

.title{
color:#1B526A;
margin-bottom:25px;
}

.service-list li{
padding:10px;
}

.footer{
background:#2d1b0e;
color:white;
text-align:center;
padding:20px;
}

@media(max-width:768px){
.banner{
height:400px;
}
.banner-overlay h1{
font-size:25px;
}
}
/* Fixed Church Header */

.church-header{

background:#1B526A;

position:fixed;

top:0;

width:100%;

z-index:9999;

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

}


/* Logo */

.church-logo{

width:65px;

height:65px;

object-fit:contain;

margin-right:15px;

background:white;

border-radius:50%;

padding:5px;

}



/* Church Name */

.church-title h5{

margin:0;

font-weight:700;

color:#fff;

font-size:18px;

}


.church-title span{

font-size:13px;

color:#f5d7a1;

}



/* Menu */

.nav-link{

color:white !important;

font-weight:500;

margin-left:12px;

transition:.3s;

}


.nav-link:hover{

color:#ffd27f !important;

}


/* Page top spacing because header fixed */

body{

padding-top:90px;

background:#faf7f0;

}



/* Mobile */

@media(max-width:768px){


.church-logo{

width:50px;

height:50px;

}


.church-title h5{

font-size:14px;

}


.church-title span{

font-size:11px;

}

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


.church-footer{

background:#1b526a;

color:white;

padding:50px 0 20px;

margin-top:50px;

}



.footer-logo{

width:75px;

height:75px;

background:white;

border-radius:50%;

padding:6px;

margin-right:15px;

}



.footer-brand h5{

font-size:20px;

margin:0;

font-weight:700;

color:#f7d18a;

}



.footer-brand p{

font-size:14px;

margin-top:5px;

color:#ddd;

}




.footer-title{

color:#f7d18a;

font-weight:700;

margin-bottom:20px;

border-bottom:2px solid #f7d18a;

display:inline-block;

padding-bottom:5px;

}



.footer-links{

list-style:none;

padding:0;

}



.footer-links li{

margin-bottom:10px;

}



.footer-links a{

text-decoration:none;

color:white;

transition:.3s;

}



.footer-links a:hover{

color:#f7d18a;

padding-left:5px;

}



.church-footer p{

color:#ddd;

line-height:1.8;

}



.church-footer hr{

border-color:#ffffff55;

margin-top:30px;

}



.copyright{

font-size:14px;

color:#ddd;

}




@media(max-width:768px){


.footer-brand{

justify-content:center;

text-align:center;

}


.church-footer{

text-align:center;

}


}
.powered{

font-size:14px;

color:#ccc;

}


.powered a{

color:#f7d18a;

font-weight:600;

text-decoration:none;

transition:.3s;

}


.powered a:hover{

color:white;

text-decoration:underline;

}

/* Banner */


.church-card{


background:#fff;


padding:30px;


height:100%;


border-radius:20px;


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


transition:.3s;


}
.hero-buttons a{

display:inline-block;

margin-top:30px;

margin-right:15px;

padding:14px 30px;

border-radius:50px;

background:#d49b35;

color:white;

font-weight:700;

transition:.3s;

}


.hero-buttons a:last-child{

background:white;

color:#1B526A;

}


.hero-buttons a:hover{

transform:translateY(-5px);

}


.church-card:hover{


transform:translateY(-8px);


}



.church-card h3{


color:#6b421f;


}



/* History */


.history-section{


background:#f5ead8;


padding:60px 0;


}



.history-section h2{


text-align:center;


color:#6b421f;


margin-bottom:30px;


}



.history-section p{


font-size:18px;


line-height:1.8;


}



/* Gallery */


.gallery-img{


height:300px;


width:100%;


object-fit:cover;


border-radius:15px;


}




@media(max-width:768px){


.church-banner{


min-height:450px;


}



.banner-overlay{


padding:25px;


}



.banner-overlay h1{


font-size:25px;


}



}
/* Timing */

.timing-section{

padding:60px 0;

background:#f7efe2;

}


.timing-box{


max-width:850px;

margin:auto;

background:white;

padding:40px;

text-align:center;

border-radius:20px;

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


}


.timing-box h2{

color:#6b421f;

margin-bottom:30px;

}



.timing-box h5{

color:#8b5e2b;

font-weight:700;

}



/* About */


.about-section{

padding:60px 0;

}


.about-box{


background:#fff;

padding:45px;

border-radius:25px;

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

border-left:8px solid #6b421f;


}



.about-box h2{

text-align:center;

color:#6b421f;

margin-bottom:25px;

}


.about-box p{

font-size:17px;

line-height:1.9;

text-align:justify;

}



/* Cards */

.church-card{

background:white;

padding:25px;

border-radius:18px;

height:100%;

box-shadow:0 5px 20px #ddd;

}


.church-card h4{

color:#6b421f;

}

/* Spiritual Gallery */


.spiritual-section{

padding:60px 0;

background:#faf5ec;

}


.section-title{

text-align:center;

color:#6b421f;

margin-bottom:40px;

}



.spiritual-card{

background:white;

border-radius:20px;

padding:15px;

text-align:center;

box-shadow:0 5px 20px #ddd;

height:100%;

}


.spiritual-card img{

width:100%;

/* height:230px; */

object-fit:cover;

border-radius:15px;

}




/* Leaders */


.leader-card{

background:white;

padding:25px;

text-align:center;

border-radius:20px;

box-shadow:0 5px 25px #ddd;

}


.leader-card img{

width:220px;

/* height:220px; */

object-fit:cover;

border-radius:50%;

}



.leader-card h4{

color:#6b421f;

margin-top:20px;

}




/* Cathedral */


.cathedral-section{

padding:60px 0;

}


.cathedral-image{

width:100%;

max-height:450px;

object-fit:cover;

border-radius:20px;

}




/* Vicar */


.vicar-section{

background:#f5ead8;

padding:60px 0;

}



.vicar-box{

background:white;

padding:35px;

border-radius:20px;

box-shadow:0 5px 25px #ddd;

}



.vicar-image{

width:100%;

border-radius:20px;

}


.vicar-box h2{

color:#6b421f;

}

/* Vicar Message */

.vicar-message-section{

padding:60px 0;

background:#f8f2e8;

}


.vicar-message-card{

background:white;

padding:20px;

border-radius:25px;

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

max-width:900px;

margin:auto;

}


.vicar-page-image{

width:100%;

border-radius:20px;

}



/* Mobile */

@media(max-width:768px){

.vicar-message-card{

padding:10px;

}


}

/* ================================
   PARISH PREMIUM THEME
================================ */


body{

font-family:'Segoe UI',serif;

background:#fcf8f1;

color:#444;

}


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


.church-banner{


height:720px;


background:

linear-gradient(
rgba(0,0,0,.45),
rgba(0,0,0,.55)
),

url('../images/Church Reworked Image kb.png');


background-size:cover;

background-position:center;


display:flex;

align-items:center;

justify-content:center;


}



.banner-overlay{


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


backdrop-filter:blur(8px); */


/* border:1px solid rgba(255,255,255,.3); */


/* padding:60px 70px;


border-radius:35px; */


text-align:center;


color:white;


/* box-shadow:

0 20px 50px rgba(0,0,0,.4); */


}



.banner-overlay h1{


font-size:36px;


font-weight:800;


letter-spacing:.5px;


}



.banner-overlay p{


font-size:25px;


color:#ffd88a;


}



.banner-overlay span{


font-size:16px;

letter-spacing:3px;


}





/* ================================
   SECTION TITLE
================================ */


.section-title{


text-align:center;


font-size:36px;


font-weight:800;


color:#704214;


margin-bottom:45px;


}



.section-title:after{


content:"";


display:block;


width:80px;


height:4px;


background:#d49b35;


margin:15px auto;


}







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


.spiritual-section{


padding:90px 0;


}



.spiritual-card{


background:white;


border-radius:25px;


overflow:hidden;


box-shadow:

0 10px 30px rgba(0,0,0,.12);


transition:.4s;


}



.spiritual-card:hover{


transform:translateY(-12px);


box-shadow:

0 20px 40px rgba(0,0,0,.2);


}




.spiritual-card img{


width:100%;


height:300px;


object-fit:cover;


}



.spiritual-card h5{


padding:20px;


margin:0;


text-align:center;


font-size:22px;


color:#704214;


font-weight:700;


}






/* ================================
   LEADERS
================================ */


.leaders-section{


padding:80px 0;


background:#f4ead8;


}



.leader-card{


background:white;


padding:35px;


border-radius:35px;


text-align:center;


box-shadow:0 15px 35px #ddd;


transition:.4s;


}



.leader-card:hover{


transform:scale(1.03);


}



.leader-card img{


width:240px;


height:240px;


border-radius:50%;


object-fit:cover;


border:8px solid #d9b36c;


}



.leader-card h4{


margin-top:25px;


color:#704214;


font-weight:700;


}





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


.about-section{


padding:90px 0;


}



.about-box{


background:

linear-gradient(
135deg,
#ffffff,
#faf1df
);


padding:60px;


border-radius:35px;


box-shadow:

0 15px 40px rgba(0,0,0,.15);


position:relative;


}



.about-box:before{


/* content:"✝"; */


position:absolute;


top:20px;


right:35px;


font-size:70px;


color:#d9b36c;


}



.about-box h2{


text-align:center;


color:#704214;


font-size:38px;


}



.about-box p{


font-size:18px;


line-height:2;


}





/* ================================
   VICAR
================================ */


.vicar-message-section{


padding:90px 0;


background:#f6eee1;


}



.vicar-message-card{


background:white;


padding:25px;


border-radius:35px;


box-shadow:

0 20px 45px rgba(0,0,0,.18);


}



.vicar-page-image{


border-radius:25px;


}






/* ================================
   TIMING
================================ */


.timing-section{


padding:90px 0;


}



.timing-box{


max-width:900px;


margin:auto;


padding:50px;


background:white;


border-radius:35px;


box-shadow:

0 15px 35px #ddd;


text-align:center;


}



.timing-box h2{


color:#704214;


font-size:35px;


}







/* ================================
   ACTIVITIES
================================ */


.church-card{


background:white;


padding:35px;


border-radius:25px;


height:100%;


text-align:center;


box-shadow:0 10px 25px #ddd;


transition:.3s;


}



.church-card:hover{


transform:translateY(-10px);


}



.church-card h4{


color:#704214;


}







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


@media(max-width:768px){


.church-banner{


height:500px;


}



.banner-overlay{


padding:30px 20px;


}



.banner-overlay h1{


font-size:27px;


}



.banner-overlay p{


font-size:20px;


}



.section-title{


font-size:28px;


}



.spiritual-card img{


height:220px;


}



.leader-card img{


width:170px;


height:170px;


}



.about-box{


padding:30px;


}



.about-box h2{


font-size:28px;


}



.about-box p{


font-size:16px;


}


.timing-box{


padding:30px 15px;


}


}

/* ==================================================
   MODERN PARISH TEMPLATE UI
================================================== */


/* Smooth Animation */

@keyframes fadeUp{

from{
opacity:0;
transform:translateY(40px);
}

to{
opacity:1;
transform:none;
}

}



.church-banner .banner-overlay{

animation:fadeUp 1.2s ease;

}



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


.banner-overlay:after{

content:"";

display:block;

margin-top:30px;

}



.banner-overlay h1{

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

}



/* ===============================
 SECTION SPACING
================================ */


.spiritual-section,
.leaders-section,
.about-section,
.vicar-message-section,
.timing-section{


position:relative;


overflow:hidden;


}



/* ===============================
 FLOATING CARD EFFECT
================================ */


.spiritual-card,
.leader-card,
.church-card,
.timing-box,
.about-box,
.vicar-message-card{


animation:fadeUp .8s ease both;


}



.spiritual-card:hover,
.church-card:hover{


box-shadow:

0 25px 50px rgba(0,0,0,.18);


}



/* ===============================
 SPIRITUAL IMAGE STYLE
================================ */


.spiritual-card img{


background:#faf5ea;


padding:20px;


transition:.5s;


}



.spiritual-card:hover img{


transform:scale(1.08);


}





/* ===============================
 PARISH INTRO STYLE
================================ */


.about-box{


border:none;


background:

linear-gradient(
145deg,
#ffffff,
#f7ead4
);


}



.about-box h2{


position:relative;


}



.about-box h2:after{


content:"";


display:block;


height:3px;


width:70px;


background:#d49b35;


margin:15px auto;


}





/* ===============================
 LEADER PROFILE
================================ */


.leader-card{


position:relative;


overflow:hidden;


}



.leader-card:before{


content:"";


position:absolute;


width:150px;


height:150px;


background:#d49b35;


opacity:.15;


border-radius:50%;


top:-60px;


right:-60px;


}



.leader-card img{


transition:.5s;


}



.leader-card:hover img{


transform:scale(1.08);


}





/* ===============================
 TIMING MODERN BOX
================================ */


.timing-box{


border-top:6px solid #d49b35;


}



.timing-box h5{


font-size:22px;


margin-top:20px;


}





/* ===============================
 ACTIVITY CARDS
================================ */


.church-card{


border-top:5px solid transparent;


transition:.4s;


}



.church-card:hover{


border-top-color:#d49b35;


}





/* ===============================
 ADD PARISH STATS STYLE
================================ */


.stats-section{


background:#1B526A;


padding:50px 0;


color:white;


}



.stat-box{


text-align:center;


}



.stat-box h2{


font-size:45px;


color:#ffd88a;


font-weight:700;


}



.stat-box p{


font-size:18px;


}





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


.church-footer{


background:

linear-gradient(
135deg,
#12394d,
#1B526A
);


}



.footer-title{


font-size:18px;


}





/* ===============================
 SCROLL REVEAL SUPPORT
================================ */


.reveal{


opacity:0;


transform:translateY(40px);


transition:1s;


}


.reveal.active{


opacity:1;


transform:none;


}





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


@media(max-width:768px){


.banner-overlay{


margin:20px;


}



.banner-overlay h1{


line-height:1.3;


}



.spiritual-card,
.leader-card,
.church-card{


margin-bottom:20px;


}


}
/* ===========================
   PREMIUM STAT SECTION
=========================== */


.stats-section{


padding:70px 0;


background:

linear-gradient(
135deg,
#12394d,
#1B526A
);


position:relative;


overflow:hidden;


}



/* background decoration */


.stats-section:before{


content:"✝";


position:absolute;


font-size:250px;


color:white;


opacity:.04;


right:40px;


top:-40px;


}




.stat-box{


background:

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


backdrop-filter:blur(15px);


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


border-radius:25px;


padding:35px 20px;


text-align:center;


color:white;


transition:.4s;


height:100%;


}





.stat-box:hover{


transform:translateY(-12px);


background:

rgba(255,255,255,.2);


box-shadow:

0 20px 40px rgba(0,0,0,.3);


}




.stat-icon{


width:70px;


height:70px;


margin:auto;


display:flex;


align-items:center;


justify-content:center;


border-radius:50%;


background:#d49b35;


color:white;


font-size:30px;


margin-bottom:20px;


}




.stat-box h2{


font-family:Georgia;


font-size:45px;


font-weight:800;


color:#ffd88a;


margin:0;


}




.stat-box p{


font-size:17px;


letter-spacing:.5px;


margin-top:10px;


color:white;


}




/* Animation */


.stat-box{


animation:statShow 1s ease;


}



@keyframes statShow{


from{

opacity:0;

transform:translateY(40px);

}


to{

opacity:1;

transform:none;

}


}





@media(max-width:768px){


.stat-box h2{


font-size:36px;


}


}

/* ==================================
   SPIRITUAL HERITAGE SECTION
================================== */


.spiritual-section{


padding:90px 0;


background:

linear-gradient(
180deg,
#faf7f0,
#f3eadb
);


position:relative;


}



/* title */

.spiritual-section .section-title{


font-family:Georgia,serif;


font-size:38px;


color:#704214;


}





/* Card */


.spiritual-card{


background:white;


border-radius:30px;


padding:25px 20px 15px;


text-align:center;


position:relative;


overflow:hidden;


box-shadow:

0 15px 35px rgba(0,0,0,.12);


transition:.5s;


}




.spiritual-card:before{


content:"";


position:absolute;


width:120px;


height:120px;


background:#d49b35;


opacity:.12;


border-radius:50%;


top:-50px;


right:-50px;


}





.spiritual-card:hover{


transform:translateY(-15px);


box-shadow:

0 25px 50px rgba(0,0,0,.2);


}




/* image */


.spiritual-card img{


width:220px;


height:220px;


margin:auto;


object-fit:contain;


border-radius:50%;


padding:15px;


background:

linear-gradient(
135deg,
#fff,
#f4dfb0
);


border:6px solid #d49b35;


transition:.5s;


}




.spiritual-card:hover img{


transform:scale(1.08);


}





/* name */


.spiritual-card h5{


margin-top:25px;


font-family:Georgia,serif;


font-size:24px;


font-weight:700;


color:#704214;


}





/* small gold line */


.spiritual-card h5:after{


content:"";


display:block;


width:50px;


height:3px;


background:#d49b35;


margin:12px auto 0;


border-radius:5px;


}





/* Animation */


.spiritual-card{


animation:heritageFade 1s ease;


}



@keyframes heritageFade{


from{


opacity:0;


transform:translateY(40px);


}


to{


opacity:1;


transform:none;


}


}




@media(max-width:768px){


.spiritual-card img{


width:160px;


height:160px;


}



.spiritual-card h5{


font-size:20px;


}


}
@media(max-width:768px){


.spiritual-section{

padding:45px 0;

}



.spiritual-section .section-title{

font-size:28px;

margin-bottom:25px;

}



/* make cards comfortable */

.spiritual-card{


padding:18px 10px;


border-radius:22px;


box-shadow:

0 8px 20px rgba(0,0,0,.10);


}





/* remove desktop hover effect */

.spiritual-card:hover{


transform:none;


}




/* image size */


.spiritual-card img{


width:120px;


height:120px;


padding:10px;


border-width:4px;


}




.spiritual-card:hover img{


transform:none;


}




.spiritual-card h5{


font-size:18px;


margin-top:15px;


}





.spiritual-card h5:after{


width:35px;


height:2px;


margin-top:8px;


}





}



/* small mobile */

@media(max-width:480px){


/* force one card per row */


.spiritual-section .col-6{


width:100%;


}





.spiritual-card{


max-width:280px;


margin:auto;


}




.spiritual-card img{


width:140px;


height:140px;


}



}
/* =================================
   CHURCH LEADERS SECTION
================================= */


.leaders-section{


padding:90px 0;


background:

linear-gradient(
135deg,
#f7efe2,
#fff
);


position:relative;


overflow:hidden;


}




.leaders-section:before{


content:"✝";


position:absolute;


font-size:260px;


color:#d49b35;


opacity:.08;


left:-40px;


top:20px;


}




/* leader card */


.leader-card{


background:white;


border-radius:35px;


padding:45px 35px;


text-align:center;


height:100%;


position:relative;


box-shadow:


0 20px 45px rgba(0,0,0,.12);


transition:.5s;


overflow:hidden;


}





.leader-card:hover{


transform:translateY(-15px);


box-shadow:


0 30px 60px rgba(0,0,0,.2);


}




/* top gold line */


.leader-card:before{


content:"";


position:absolute;


top:0;


left:0;


width:100%;


height:6px;


background:#d49b35;


}





/* image */


.leader-card img{


width:240px;


height:240px;


object-fit:cover;


border-radius:50%;


border:10px solid #f2dfb2;


padding:5px;


background:white;


transition:.5s;


}




.leader-card:hover img{


transform:scale(1.08);


border-color:#d49b35;


}




/* name */


.leader-card h4{


font-family:Georgia,serif;


font-size:24px;


line-height:1.4;


margin-top:30px;


color:#704214;


font-weight:700;


}




/* designation */


.leader-card p{


font-size:16px;


line-height:1.8;


color:#666;


margin-top:15px;


}




/* small divider */


.leader-card p:before{


content:"";


display:block;


width:60px;


height:3px;


background:#d49b35;


margin:15px auto;


}





/* floating badge */


.leader-card:after{


content:"Leadership";


position:absolute;


right:20px;


top:20px;


background:#1B526A;


color:white;


padding:6px 15px;


border-radius:20px;


font-size:12px;


letter-spacing:1px;


}




/* Animation */


.leader-card{


animation:leaderShow .9s ease;


}



@keyframes leaderShow{


from{


opacity:0;


transform:translateY(50px);


}


to{


opacity:1;


transform:none;


}


}




@media(max-width:768px){


.leader-card{


padding:35px 20px;


}


.leader-card img{


width:170px;


height:170px;


}



.leader-card h4{


font-size:20px;


}


}

/* ==================================
   ABOUT PARISH PREMIUM SECTION
================================== */


.about-section{


padding:100px 0;


background:

linear-gradient(
135deg,
#faf6ee,
#ffffff
);


position:relative;


overflow:hidden;


}



/* Background decoration */


/* .about-section:before{


content:"✝";


position:absolute;


font-size:300px;


color:#d49b35;


opacity:.06;


right:-40px;


top:30px;


} */





.about-box{


background:white;


border-radius:35px;


padding:70px;


position:relative;


box-shadow:


0 20px 50px rgba(0,0,0,.12);


border-left:8px solid #d49b35;


animation:aboutShow 1s ease;


}





@keyframes aboutShow{


from{

opacity:0;

transform:translateY(50px);

}


to{

opacity:1;

transform:none;

}


}





/* Heading */


.about-box h2{


text-align:center;


font-family:Georgia,serif;


font-size:40px;


color:#704214;


margin-bottom:40px;


font-weight:700;


}



.about-box h2:after{


content:"";


display:block;


width:90px;


height:4px;


background:#d49b35;


margin:18px auto;


border-radius:10px;


}





/* Paragraph */


.about-box p{


font-size:18px;


line-height:2;


color:#555;


text-align:justify;


margin-bottom:25px;


padding-left:20px;


border-left:3px solid #ecd49a;


}





/* First paragraph highlight */


.about-box p:first-of-type{


font-size:20px;


font-weight:500;


color:#1B526A;


}





/* Hover */


.about-box:hover{


box-shadow:


0 30px 70px rgba(0,0,0,.18);


}





/* Add small history icon */


.about-box:after{


content:"Our Journey";


position:absolute;


top:30px;


right:40px;


background:#1B526A;


color:white;


padding:8px 22px;


border-radius:30px;


font-size:13px;


letter-spacing:1px;


}





@media(max-width:768px){


.about-box{


padding:35px 25px;


}



.about-box h2{


font-size:30px;


}



.about-box p{


font-size:16px;


padding-left:12px;


}



.about-box:after{


display:none;


}


}

/* =================================
   VICAR MESSAGE PREMIUM SECTION
================================= */


.vicar-message-section{


padding:100px 0;


background:


linear-gradient(
135deg,
#f5ead8,
#fff
);


position:relative;


overflow:hidden;


}



/* Background cross */


.vicar-message-section:before{


content:"✝";


position:absolute;


font-size:280px;


color:#d49b35;


opacity:.06;


left:-50px;


top:40px;


}





.vicar-message-card{


max-width:950px;


margin:auto;


background:white;


padding:30px;


border-radius:35px;


position:relative;


box-shadow:


0 20px 50px rgba(0,0,0,.15);


animation:vicarShow 1s ease;


}





@keyframes vicarShow{


from{


opacity:0;


transform:translateY(50px);


}


to{


opacity:1;


transform:none;


}


}





/* image */


.vicar-page-image{


width:100%;


border-radius:25px;


transition:.5s;


box-shadow:


0 10px 30px rgba(0,0,0,.15);


}




.vicar-message-card:hover 
.vicar-page-image{


transform:scale(1.03);


}





/* golden border */


.vicar-message-card:before{


content:"";


position:absolute;


top:0;


left:50%;


transform:translateX(-50%);


width:120px;


height:5px;


background:#d49b35;


border-radius:10px;


}





/* Quote badge */


.vicar-message-card:after{


content:"“ Spiritual Guidance ”";


position:absolute;


bottom:-18px;


left:50%;


transform:translateX(-50%);


background:#1B526A;


color:white;


padding:10px 30px;


border-radius:30px;


font-size:14px;


letter-spacing:1px;


}





/* Mobile */


@media(max-width:768px){


.vicar-message-card{


padding:15px;


}



.vicar-message-card:after{


font-size:12px;


padding:8px 20px;


}


}

/* =================================
   CHURCH TIMINGS PREMIUM SECTION
================================= */


.timing-section{


padding:100px 0;


background:


linear-gradient(
135deg,
#12394d,
#1B526A
);


position:relative;


overflow:hidden;


}



/* background decoration */


.timing-section:before{


content:"⛪";


position:absolute;


font-size:280px;


color:white;


opacity:.05;


right:-50px;


top:20px;


}





.timing-box{


max-width:950px;


margin:auto;


background:white;


padding:50px;


border-radius:35px;


box-shadow:


0 25px 60px rgba(0,0,0,.25);


position:relative;


animation:timingShow 1s ease;


}



@keyframes timingShow{


from{


opacity:0;


transform:translateY(50px);


}


to{


opacity:1;


transform:none;


}


}





/* Heading */


.timing-box h2{


text-align:center;


font-family:Georgia,serif;


font-size:38px;


color:#704214;


margin-bottom:45px;


}



.timing-box h2:after{


content:"";


display:block;


width:80px;


height:4px;


background:#d49b35;


margin:15px auto;


}





/* Individual timing cards */


.timing-box .col-md-6{


padding:15px;


}



.timing-box .col-md-6 > h5{


background:#1B526A;


color:white;


padding:15px;


border-radius:15px;


font-size:20px;


text-align:center;


margin-bottom:20px;


}




.timing-box .col-md-6 p{


background:#faf5eb;


padding:25px;


border-radius:20px;


text-align:center;


font-size:18px;


line-height:2;


border-left:5px solid #d49b35;


transition:.4s;


}





.timing-box .col-md-6:hover p{


transform:translateY(-8px);


box-shadow:

0 15px 30px rgba(0,0,0,.12);


}





.timing-box b{


color:#1B526A;


font-size:20px;


}





/* Mobile */


@media(max-width:768px){


.timing-box{


padding:30px 20px;


}



.timing-box h2{


font-size:30px;


}



.timing-box .col-md-6 p{


font-size:16px;


}


}

/* =================================
   PARISH ACTIVITIES
================================= */

.activities-section{

padding:100px 0;

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

position:relative;

overflow:hidden;

}



.activities-section:before{

content:"";

position:absolute;

width:350px;

height:350px;

background:#d49b35;

opacity:.05;

border-radius:50%;

top:-120px;

left:-120px;

}



.section-subtitle{

max-width:700px;

margin:0 auto 50px;

color:#666;

font-size:17px;

}



.activity-card{

background:white;

height:100%;

padding:35px 25px;

border-radius:25px;

text-align:center;

position:relative;

overflow:hidden;

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

transition:.4s;

border-top:5px solid #d49b35;

}



.activity-card:hover{

transform:translateY(-12px);

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

}



.activity-icon{

width:90px;

height:90px;

margin:auto;

display:flex;

align-items:center;

justify-content:center;

font-size:40px;

border-radius:50%;

background:
linear-gradient(
135deg,
#d49b35,
#f2cf7c
);

margin-bottom:25px;

box-shadow:
0 10px 25px rgba(212,155,53,.35);

}



.activity-card h4{

font-family:Georgia,serif;

font-size:24px;

color:#704214;

margin-bottom:15px;

}



.activity-card p{

font-size:15px;

line-height:1.8;

color:#666;

}



/* Hover glow */

.activity-card:after{

content:"";

position:absolute;

width:180px;

height:180px;

background:#d49b35;

opacity:.06;

border-radius:50%;

top:-80px;

right:-80px;

transition:.4s;

}



.activity-card:hover:after{

transform:scale(1.3);

}



@media(max-width:768px){

.activities-section{

padding:70px 0;

}

.activity-card{

padding:30px 20px;

}

}