@charset "UTF-8";

@font-face {
    font-family: 'open_sans_regular';
    src: url('font/OpenSans-Regular.eot');
    src: url('font/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
        url('font/OpenSans-Regular.woff2') format('woff2'),
        url('font/OpenSans-Regular.woff') format('woff'),
        url('font/OpenSans-Regular.ttf') format('truetype'),
        url('font/OpenSans-Regular.svg#OpenSans-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'open_sans_extrabold';
    src: url('font/OpenSans-ExtraBold.eot');
    src: url('font/OpenSans-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('font/OpenSans-ExtraBold.woff2') format('woff2'),
        url('font/OpenSans-ExtraBold.woff') format('woff'),
        url('font/OpenSans-ExtraBold.ttf') format('truetype'),
        url('font/OpenSans-ExtraBold.svg#OpenSans-ExtraBold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'open_sans_semibold';
    src: url('font/OpenSans-SemiBold.eot');
    src: url('font/OpenSans-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('font/OpenSans-SemiBold.woff2') format('woff2'),
        url('font/OpenSans-SemiBold.woff') format('woff'),
        url('font/OpenSans-SemiBold.ttf') format('truetype'),
        url('font/OpenSans-SemiBold.svg#OpenSans-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'open_sans_bold';
    src: url('font/OpenSans-Bold.eot');
    src: url('font/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
        url('font/OpenSans-Bold.woff2') format('woff2'),
        url('font/OpenSans-Bold.woff') format('woff'),
        url('font/OpenSans-Bold.ttf') format('truetype'),
        url('font/OpenSans-Bold.svg#OpenSans-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'open_sans_medium';
    src: url('font/OpenSans-Medium.eot');
    src: url('font/OpenSans-Medium.eot?#iefix') format('embedded-opentype'),
        url('font/OpenSans-Medium.woff2') format('woff2'),
        url('font/OpenSans-Medium.woff') format('woff'),
        url('font/OpenSans-Medium.ttf') format('truetype'),
        url('font/OpenSans-Medium.svg#OpenSans-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'avenir_next_demi';
    src: url('font/AvenirNextLTPro-Demi.eot');
    src: url('font/AvenirNextLTPro-Demi.eot?#iefix') format('embedded-opentype'),
        url('font/AvenirNextLTPro-Demi.woff2') format('woff2'),
        url('font/AvenirNextLTPro-Demi.woff') format('woff'),
        url('font/AvenirNextLTPro-Demi.ttf') format('truetype'),
        url('font/AvenirNextLTPro-Demi.svg#AvenirNextLTPro-Demi') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'avenir_next_bold';
    src: url('font/AvenirNextLTPro-Bold.eot');
    src: url('font/AvenirNextLTPro-Bold.eot?#iefix') format('embedded-opentype'),
        url('font/AvenirNextLTPro-Bold.woff2') format('woff2'),
        url('font/AvenirNextLTPro-Bold.woff') format('woff'),
        url('font/AvenirNextLTPro-Bold.ttf') format('truetype'),
        url('font/AvenirNextLTPro-Bold.svg#AvenirNextLTPro-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'avenir_next_medium';
    src: url('font/AvenirNextLTPro-Medium.eot');
    src: url('font/AvenirNextLTPro-Medium.eot?#iefix') format('embedded-opentype'),
        url('font/AvenirNextLTPro-Medium.woff2') format('woff2'),
        url('font/AvenirNextLTPro-Medium.woff') format('woff'),
        url('font/AvenirNextLTPro-Medium.ttf') format('truetype'),
        url('font/AvenirNextLTPro-Medium.svg#AvenirNextLTPro-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'crimson_bold';
    src: url('font/CrimsonText-Bold.eot');
    src: url('font/CrimsonText-Bold.eot?#iefix') format('embedded-opentype'),
        url('font/CrimsonText-Bold.woff2') format('woff2'),
        url('font/CrimsonText-Bold.woff') format('woff'),
        url('font/CrimsonText-Bold.ttf') format('truetype'),
        url('font/CrimsonText-Bold.svg#CrimsonText-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'crimson_semibold';
    src: url('font/CrimsonText-SemiBold.eot');
    src: url('font/CrimsonText-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('font/CrimsonText-SemiBold.woff2') format('woff2'),
        url('font/CrimsonText-SemiBold.woff') format('woff'),
        url('font/CrimsonText-SemiBold.ttf') format('truetype'),
        url('font/CrimsonText-SemiBold.svg#CrimsonText-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}



:root {
--body-color: rgba(34, 34, 34, 1);
--primary-color: rgba(7, 35, 68, 1);
--secondary-color: rgba(168, 132, 70, 1);
--ternary-color: rgba(0, 177, 255, 1);
--footer-color: rgba(226, 225, 224, 1);
--black-color: #000000;
--white-color: #FFFFFF;

--body-font: 'open_sans_regular';
--heading-font:'open_sans_extrabold';
--open-semibold:'open_sans_semibold';
--crimson-bold:'crimson_bold';  
--crimson-semi-bold:'crimson_semibold';
--open-bold:'open_sans_bold';
--avenir-bold:'avenir_next_bold';
}


*:focus { outline: none; }

/* 1. Create a Clean Base
------------------------------------------------------------------------------*/
html, body, br, hr, div, span, a, object, iframe, ul, ol, dl, li, dt, dd, h1, h2, h3, h4, h5, h6, p, blockquote, q, address, small, big, cite,
 dfn, ins, del, i, em, b, strong, sup, sub, strike, pre, code, samp, kbd, var, tt, form, fieldset, legend, label, input, textarea, option,
  .nobox { background: transparent; border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main { display: block; }

blockquote { quotes: none; }
br { height: 0; }
ul, ol, dl, li { margin: 0; padding: 0; list-style-type: none; }
ul, ol { margin: 0 0 0 0px; }
html, body { appearance: none; -webkit-appearance: none; border: none; -webkit-text-size-adjust: none; }


/* 2. Define Base Typography
------------------------------------------------------------------------------*/
body { padding: 0; margin: 0; font-family: var(--body-font); font-size: 20px; color: var(--body-color); line-height: 28px; box-sizing: border-box; overflow-x: hidden; }
/* section { overflow: hidden; } */
*, *:after, *:before { box-sizing: border-box; }

/* Create the Default Headers  */
h1, h2, h3, h4, h5, h6 { margin: 0; color:var(--body-color); line-height: normal; font-weight: normal; font-family: var(--heading-font); text-transform: capitalize; }

/* Specific Header Settings */
h1, .h1 { font-size: 90px;}
h2, .h2 { font-size: 80px; }
h3, .h3 { font-size: 40px; line-height: 48px;}
h4, .h4 { font-size: 30px !important; }
h5, .h5 { font-size: 25px; }
h6, .h6 { font-size: 20px; }
p { word-wrap: break-word; margin-bottom: 24px; font-size: 20px; line-height: 28px; }


/* Other Typo */
strong { font-weight: bold; }
hr { border: 0 #000 solid; border-top-width: 1px; clear: both; height: 0; }
ol { list-style: decimal; }
ul { list-style: disc; }


/* Remove border around linked images */
img { max-width: 100%; border: 0; border-style: none; height: auto; }

/* 4. Links
------------------------------------------------------------------------------*/

/* Default Link Types */
a { text-decoration: none; transition: 0.5s; color: rgba(48, 48, 48, 1); display: inline-block; font-size: 20px; line-height: 28px; }
a:hover { color: var(--secondary-color); }

/* 5. Forms
------------------------------------------------------------------------------*/
.button, a.button, button, html input[type="button"], input[type="reset"], input[type="submit"] { font-family: var(--body-font); font-weight: normal; margin: 0 0 0 0; padding: 22px 60px; border-radius: 40px; background-color: var(--white-color); border: 1px solid rgba(107, 107, 107, 1); display: inline-block; vertical-align: middle; letter-spacing: 2%; font-size: 28px; color: var(--primary-color); line-height: normal; position: relative; /*outline: 5px solid #45ce27;*/ box-shadow: none; text-align: center; text-decoration: none; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; overflow: hidden; position: relative; z-index: 0; cursor: pointer; text-transform: capitalize; }
/* .button::after, a.button::after{ content: ''; position: absolute; width: 100%; height: 100%; background-color: var(--btn-color); right: 0; top: 0; transition: all 0.3s; z-index: -1; } */
/* .button:hover::after, a.button:hover::after{ width: 0; } */
.button:hover, a.button:hover, button:hover, html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { color: #ffffff; background-color: var(--primary-color);}
input[type="search"], input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], textarea { color: var(--primary-color); padding: 10px 18px; font-family: var(--primary-font); font-size: 18px; letter-spacing: 0; line-height: 27px; outline: none !important; width: 49%; appearance: none; resize: none; background: #FFFFFF 0% 0% no-repeat padding-box; border: 1px solid #000000; border-radius: 8px; }


textarea {width: 100%; padding: 10px 24px; min-height: 96px; background: rgba(255, 255, 255, 1); resize: none; margin: 0 0 15px; }

/* input[type="submit"]:hover{ color: var(--red-color); border: 3px solid transparent;} */

input::-webkit-input-placeholder { color: #333; opacity: 37%; }
input:-moz-placeholder { color: #333; /*opacity: 0,8;*/ }
input::-moz-placeholder { color: #333; opacity: 37%; }
input:-ms-input-placeholder { color: #333; opacity: 37%; }
textarea::-webkit-input-placeholder { color: #333; opacity: 37%; }
textarea:-moz-placeholder { color: #333; opacity: 37%; }
textarea::-moz-placeholder { color: #333; opacity: 37%; }
textarea:-ms-input-placeholder { color: #333; opacity: 37%; }

/* ul li css */
ul li { position: relative; padding: 6px 8px 6px 18px; }
ul.col-2 li:before, ul.col-3 li:before, ul li:before { position: absolute; content: ""; width: 6px; height: 6px;
   background-color: var(--body-color); top: 15px; left: 0; border-radius: 50%; }

/* container */
.container { max-width: 1760px; width: 100%; padding: 0 50px; margin: 0 auto; }
.col1 { width: 100%; }
.col2 { width: 50% !important; }
.col3 { width: 33.33%; }
.col4 { width: 25%; }

.d-flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.justify-content-start { justify-content: flex-start; }
.justify-content-center { justify-content: center; }
.justify-content-end { justify-content: flex-end; } 
.justify-content-between { justify-content: space-between; }
.align-items-start { align-items: flex-start; }
.align-items-center { align-items: center; }
.align-items-end { align-items: flex-end; }
.row-reverse { flex-direction: row-reverse; }
.text-center { text-align: center; } 
.text-left { text-align: left !important; }
.text-right { text-align: right; }
.gap-100{gap: 100px;}
.mt-24{margin-top: 24px !important;}
.mt-50{margin-top: 40px !important;}
/* svg path, svg circle { transition: 0.5s; }
.white-btn{ border-color: var(--white-color) !important; color: var(--header) !important; }
.white-btn::after{ background-color: var(--white-color) !important; }
.white-btn:hover{ color: var(--white-color) !important; }
.black-btn:hover{ color: var(--header) !important; } */
/* ------------------------------------------------- */

/* slider css */
/* .slider_inr .slider_box { margin: 0 0 0 270px; padding: 40px 0 65px; }
.slider_inr .slider_box .star_img { padding: 0 0 0 10px; }
.slider_inr .slider_box p{ margin: 0; }
.slider_inr .slider_box p strong{ font-family: var(--black_font); } */
/* slider css */

/* **********--------------------- sub - menu css ----------------------------**************** */

/* **********--------------------- def-page css ----------------------------**************** */
.def-page{padding: 60px 0px 60px;}
.def-page p:last-child{margin-bottom: 0;}
.def-page p{ color: var(--body-color); font-size: 30px; font-style: normal; font-weight: normal; line-height: 41px;}
.def-page .right-img{float:right; margin:0 0 15px 40px; position: relative; z-index: 0; }
.def-page .left-img{float:left; margin:0 40px 15px 0; position: relative;}
.def-page .right-img img{border-radius: 0px; position: relative; border-radius: 8px;}
.def-page .left-img img{border-radius: 0px; position: relative; border-radius: 8px;}
.def-page h2, .def-page h3, .def-page h4, .def-page h5, .def-page h6{ margin: 0 0 23px 0;}
.def-page h2{font-size: 50px;line-height: 60px;} 
.def-page h3{font-size: 40px;line-height: 50px;}
.def-page h4{font-size: 30px;line-height: 40px;}
.def-page h5{font-size: 25px;line-height: 35px;} 
.def-page h6{font-size: 22px;line-height: 32px;}
.def-page ul {margin: 0;padding-bottom: 10px;}
.overflow{ overflow: inherit !important;}
.def-page ul li { list-style: none; text-align: left; color: var(--body-color); font-size: 30px; line-height: 36px; position: relative; padding: 5px 10px 36px 42px; overflow: hidden; }
.def-page ul li:last-of-type{padding-bottom: 5px;}
.def-page ul li:before { content: "";  width: 35px; height: 35px; top: 8px; left: 0; background-image: url(images/check-mark-1.webp); background-position: center; background-repeat: no-repeat; background-size: contain; position: absolute; background-color: transparent;   }
.def-page ol{padding-left: 0; padding-bottom: 25px;}
.def-page ol li {line-height: normal; list-style-type:none;counter-increment:item;  padding: 5px 0 5px 0;  color: var(--body-color); font-size: 30px;}
.def-page ol li:before {display:inline-block; content: counter(item) "."; color: var(--body-color); padding-right:10px;}
.def-page ul.col-2, .def-page ul.col-3 { overflow: hidden }
.def-page ul.col-2 li {width: 50%;float: left;}
.def-page ul.col-3 li {width: 33.33%;float: left;}
.def-page p {padding-bottom: 0px;}
.privacy-page ol { margin-bottom: 25px;}
.privacy-page ol>li:before { padding-right: 05px;}
.privacy-page .privacy-inner{ padding-left: 0px; margin-bottom: 20px;}
.privacy-page .privacy-inner ul{ margin-top: 05px; }
.privacy-page ul,.privacy-page ol{ margin-left:0px;}
.privacy-page ol li{padding: 5px 0px;}
.pagenotfound {width: 100%;display: block;padding: 80px 0px;text-align: center;}
.pagenotfound h2 {font-size: 50px;font-weight: 600;}
.pagenotfound p{font-size: 24px;}
.thankyou {text-align: center;}
/* .thankyou h3 strong {font-size: 46px;} */
.clearfix:after { clear: both; display: block; visibility: hidden; content: ""; }
.def-page a{ color: var(--primary-color); font-size: 30px; text-decoration: none; transition: 0.5s;}
.def-page a.button{ color: var(--primary-color); }
.def-page a.button:hover{text-decoration: none;}
.def-page a:hover{ text-decoration: underline;}
.def-page a.button:hover{color: var(--white-color); }
/* .def-page strong{ font-size: 24px; } */

/* **********--------------------- validation css ----------------------------**************** */
form .input_filed .wpcf7-not-valid-tip{ display: none !important; }
.wpcf7-not-valid{ border: 1px solid #dc3232 !important; }
form .cf7sr-recaptcha .wpcf7-not-valid-tip{ display: block !important; font-size: 15px; }
.submit-captcha { margin-top: -5px; display: flex; /* width: 100%; */ align-items: flex-start; justify-content: flex-start; }
.submit-captcha .input-fild:last-child{ margin-top: 17px; } .wpcf7 form .wpcf7-response-output { margin: 0.5em auto; padding: 0.2em 1em; border: 2px solid #00a0d2;    width: 100%; text-align: center; }



/* header css */

/* Top Header */
.header_top{ display:flex; align-items:center; justify-content:space-between; padding:20px 0 0px 0; }

.social-contact{ width:30%; }

.header_logo{ width:40%; text-align:center; line-height: 0;}

.header_logo img{ max-width:214px; display:block; margin:0 auto;     width: 100%;}

.search_box{ width:400px; height:56px; border:1px solid var(--ternary-color); border-radius:4px; display:flex; align-items:center; padding:0 16px; gap:10px; background:#fff; }

.search_btn{ width:24px; height:24px; border:none; background:transparent; padding:0; cursor:pointer; position:relative; flex-shrink:0; }

.search_btn::before{ content:''; position:absolute; height: 24px; width: 24px; inset:0; background:url('images/search-icon.png') center center/contain no-repeat; }

.search_box button:hover{background-color: transparent; color: none;}

.search_box input{ width:100%; border:none; outline:none; background:transparent; font-size:16px; }

.header_bottom{ display:flex; align-items:center; justify-content:center; position:relative; padding:0 0 12px 0; }

.header_menu ul{ display:flex; align-items:center; justify-self: center; gap: 60px; list-style:none; margin:0; padding:0; }

.header_bottom .header_menu{max-width: 50%; width: 100%;}

.header_bottom .empty_div{max-width: 33%; width: 100%;}

.header_bottom .header_btn{max-width: 25%; width: 100%;}


.header_menu ul li{ position:relative; }

.header_menu ul li:not(:last-child)::after{ content:"|"; position:absolute; right:-35px; top:50%; transform:translateY(-50%); color: var(--primary-color); }

.header_menu ul li:hover a{ -webkit-text-stroke:0.3px currentColor; }

.header_menu ul li.active a,.header_menu ul li:hover a{font-family: var(--heading-font);}

.header_menu ul li a{ font-size:16px; color:var(--primary-color); font-family: var(--open-semibold); line-height: 24px; }

.header_menu ul li::before,.header_blue_nav ul li::before{content: none;}

.header_blue_nav{
    max-width:100%;
    width:100%;
    margin: 0 auto -50px;
    position:relative;
    z-index:9;
    
}

.header_blue_nav ul{
    display:flex;
    justify-content:space-around;
    align-items:center;
    background: var(--primary-color);
    border-radius:12px;
    padding:20px;
    border-bottom: 2px solid var(--secondary-color);
}

.header_blue_nav li{
    position:relative;
    list-style:none;
}

.header_blue_nav li:not(:last-child)::after{
    content:"|";
    position:absolute;
    right:-90px;
    color:rgba(255,255,255,1);
}

.header_blue_nav a{
    font-family: var(--open-semibold);
    color:#fff;
    font-size:16px;
    line-height: 26px;
    text-decoration:none;
    text-transform:uppercase;
}
.header_blue_nav a:hover{ color: var(--secondary-color);}


.header_menu ul li,.header_blue_nav ul li{padding: 0;}

.header_btn{ display:flex; gap:12px; justify-content: flex-end; }

.header_btn .button{ padding: 8px 53px; display:flex; align-items:center; justify-content:center; text-decoration:none; text-transform:uppercase; font-size:16px; border-radius: 4px; }

.btn_give{ background:var(--secondary-color) !important; color:var(--white-color) !important;
}

.btn_give:hover{ background:transparent !important; color:var(--secondary-color) !important; transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.12); border: 1px solid var(--secondary-color); }

.btn_signin{ background:var(--primary-color) !important; color:var(--white-color) !important; border: 1px solid var(--primary-color); }

.btn_signin:hover{ background:transparent !important; color:var(--primary-color) !important; transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.12); }

.search_box input[type="search"]::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; width:17px; height:17px; cursor:pointer; border-radius:50%; background: linear-gradient(45deg, transparent 45%, #233b73 45%, #233b73 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, #233b73 45%, #233b73 55%, transparent 55%); transition:.3s ease; }

.search_box input[type="search"]::-webkit-search-cancel-button:hover{ transform:scale(1.15) rotate(90deg); }

.email-contact-content a,.mobile-contact-content span{font-size: 18px; line-height: 24px;}

.mobile-contact-content span{font-family: var(--crimson-bold); }

.mobile-contact-content a{font-family: var(--heading-font); color: var(--primary-color); font-size: 16px; line-height: 24px;}

.email-contact-content a{font-family: var(--crimson-semi-bold); color: var(--primary-color);}

.email-contact-content a:hover,.mobile-contact-content a:hover{color: var(--secondary-color);}

.mobile-contact,.email-contact{gap: 5px;}

.mobile-contact-img,.email-contact-img  {max-width: 20%; width: 100%; line-height: 0; }

.mobile-contact-img img,.email-contact-img img{ width: 48px; height: 48px; object-fit: cover;}

.chruch_school_otr{background-color: rgba(241, 235, 225, 1); gap: 8px;}

.chruch_school_left,.chruch_school_right{line-height: 0;    width:50%;
    position:relative;
    overflow:hidden;}


.chruch_school_left img,
.chruch_school_right img{
    width:100%;
    display:block;
    
}

.chruch_school_box{
    position:absolute;
    left:0;
    right:0;
    bottom:40px;
    background: linear-gradient(90deg, #334249 5.26%, #57616C 46.91%, #4E5964 60.51%, #364651 93.65%);
    padding:16px 0 14px 0;
    text-align:center;
}
.chruch_school_box::before{
    content:'';
    position:absolute;
    top:6px;
    left:0;
    width:100%;
    height:2px;
    background:rgba(168, 132, 70, 1);
}

.chruch_school_box::after{
    content:'';
    position:absolute;
    bottom:6px;
    left:0;
    width:100%;
    height:2px;
    background:rgba(168, 132, 70, 1);
}

.chruch_school_box h2{
    margin:0;
    color:#fff;
    font-size:60px;
    line-height:64px;
    text-transform:uppercase;
    letter-spacing:2px;
}

.chruch_school_hover{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    background:#0d2554;
    color:#fff;
    padding:30px;
    text-align:center;

    opacity:0;
    visibility:hidden;
    transform:translateY(100%);
    transition:all .5s ease;
}

/* Hover */
.chruch_school_left:hover .chruch_school_hover,
.chruch_school_right:hover .chruch_school_hover{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.welcome{padding: 34px 0 42px 0; background-color: rgba(241, 235, 225, 1); text-align: center;}

.welcome h2{color: var(--primary-color);   position:relative; padding-bottom: 40px;}

.welcome h2::after{ content:''; position:absolute; left:50%; transform:translateX(-50%); bottom: 20px; width:90%; height:3px; background: var(--primary-color); }

.welcome_content_otr{max-width: 66%; width: 100%; margin: 0 auto;}

.welcome_btn{width: 100%; max-width: 74%; margin: 48px auto 0;}


.mass_confesion,.mass_schedule{ padding:70px 0; }

.mass_confesion h3{ padding-bottom:12px; }

.mass_confesion p,.upcoming_head p{ max-width:82%; width:100%; }

.mass_confesion_row{ display:flex; flex-wrap:wrap; margin:0 -15px; }

.mass_otr{ width:33.33%; padding:15px; }

.mass_box{ border:1px solid #cfcfcf; border-radius:12px; padding:22px; height:100%; }

.mass_box h4{ font-size:32px !important; line-height: 40px !important; font-family: var(--open-semibold); letter-spacing:1px; color: var(--primary-color); text-transform:uppercase; padding-bottom:15px; margin-bottom:15px; border-bottom:1px solid rgba(112, 112, 112, 1); }

.mass_item{ display:flex; justify-content:space-between; align-items:flex-start; gap:15px; margin-bottom:16px; }

.mass_item:last-child{ margin-bottom:0; }

.mass_item span{ color: rgba(34, 34, 34, 1);  }

.mass_item strong{ color:#000; }

.upcoming{position: relative; padding: 42px 0; background:url("images/upcoming_bg.png") center center/cover no-repeat; }

.upcoming_head{ margin-bottom:25px; }

.upcoming_head h2{ color:#fff; font-size:42px; margin-bottom:12px; }

.upcoming_head p{ color:#fff; }

.upcoming::after {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 100%;
    height: 1px;
    background: rgba(182, 152, 91, 1);
}

.event_box{ background:#fff; border-radius:12px; padding:27px 32px; display:flex; align-items:center; gap:51px; height: 100%;    min-height: 280px;}

.event_date{ text-align:center; min-width:70px; }

.event_date span{ display:block; font-size:32px; line-height: 40px; letter-spacing: 4%; color:rgba(34, 34, 34, 1); /* margin-bottom:10px; */ font-family: var(--open-semibold); }

.event_date strong{ display:block; font-size:60px; line-height: 68px; letter-spacing: 4%; color:rgba(34, 34, 34, 1); font-family: var(--open-bold); }
.event_content { max-width: 62%; width: 100%; display: flex; flex-direction: column; height: 100%; }

.event_content h3{ font-size:32px; line-height: 40px; color:rgba(34, 34, 34, 1); /* margin-bottom:10px; */ font-family: var(--open-semibold); }
p.mb-26{margin-bottom: 20px !important;}

.event_content p{ color:rgba(34, 34, 34, 1); margin-bottom:5px; font-family: var(--open-semibold); font-size: 24PX; line-height: 32PX; }

.event_content a{ display:inline-flex; align-items:center; gap:8px; margin-top:15px; color: rgba(34, 34, 34, 1); position: relative; margin-top: auto; width: fit-content; font-size: 24PX; line-height: 32PX; font-family: var(--open-semibold); }

.event_content a:hover{color: var(--secondary-color);}

.event_content a::after{ content: ""; position: absolute; top: 50%; right: -28px; transform: translateY(-50%); width: 24px; height: 24px; background: url("images/detail_arrow.png") no-repeat center; background-size: contain; }

.new_epiphany{ padding: 70px 0 58px 0; text-align:center; position: relative; }

.new_epiphany::after{ content: ""; position: absolute; left: 0; top: -8px; width: 100%; height: 1px; background: rgba(182, 152, 91, 1); }

.new_epiphany_content{ margin:0 auto; }



.new_epiphany h2{ font-family: var(--open-bold); font-size:40px; line-height: 48px; color:rgba(34, 34, 34, 1); margin-bottom:10px; letter-spacing: 4%; text-transform:uppercase; }

.new_epiphany p.intro_text{ font-size: 24px; font-family: var(--open-semibold); line-height: 32px; letter-spacing: 4%; max-width: 70%; width: 100%; margin: 0 auto 32px; }

.new_epiphany h3{ font-size:40px; line-height: 48px; color:rgba(34, 34, 34, 1); font-family: var(--avenir-bold); letter-spacing: 0; margin-bottom:20px; text-transform: lowercase; }

.new_epiphany .sub_text{ font-size:24px; line-height: 36px; letter-spacing: 20%; color: rgba(34, 34, 34, 1); text-transform:uppercase; margin-bottom:28px; }


.new_epiphany .address p{ color: rgba(34, 34, 34, 1); font-size: 24px; line-height: 32px; text-transform:uppercase; margin-bottom: 30px; }

a.get_btn{font-family: var(--open-bold); color: rgba(34, 34, 34, 1);}


.footer{ background:rgba(226, 225, 224, 1); padding: 36px 0px;
}

.footer_col ul li::before{content: none;}

.footer_col ul li,.footer_info ul li{padding: 0;}

.footer_top{display:flex; flex-wrap:wrap; justify-content:space-between; gap:40px; padding-bottom:40px;  }

.footer_info{ width:100%; max-width: 22%; }

.footer_info img{ max-width:214px; width: 100%; margin-bottom:16px; }

.footer_contact li{ position: relative; padding-left: 40px !important; margin-bottom: 12px; }

.footer_contact li::before{ content: ""; position: absolute; left: 0; top: 0; width: 22px; height: 28px; background-repeat: no-repeat; background-position: center; background-size: 100%; background-color: transparent; border-radius:unset; }

.footer_contact .address::before{ background-image: url("images/location.png"); }

.footer_contact .phone::before{ background-image: url("images/call-footer.png"); }
.footer_contact .email::before{ background-image: url("images/email-footer.png"); }


.footer_info p,.footer_col a,.footer_info ul li{ color:rgba(34, 34, 34, 1); }


.footer_col{ width:100%; max-width: 222px; }

.footer_col h5{ font-size:24px; margin-bottom:24px; position:relative; line-height: 32px; color: rgba(77, 77, 77, 1); }

.footer_col h5:after{ content:""; width:80%; height:1px; background:rgba(182, 152, 91, 1); position:absolute; left:0; bottom:-8px; }

.footer_col ul li{ margin-bottom:16px; }


.footer_col a:hover{ color: var(--secondary-color); }

.footer_bottom{position: relative; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:20px; padding-top:20px; width: 100%; max-width: 95% ; margin: 0 auto;}


.footer_bottom::after{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: rgba(182, 152, 91, 1); }

.copyright { color: rgba(34, 34, 34, 1); letter-spacing: 4%; }

.footer_bottom_otr{width: 100%; max-width: 95%; margin: 0 auto; display: flex; justify-content: space-between;}


.footer_social{ display:flex; gap:8px; }

.footer_social a{ line-height: 0; }
.footer_social img{ width:100%; }

.footer_links{ display:flex; flex-wrap:wrap; gap:56px; text-transform: uppercase; }

.footer_links a{position: relative;}

.footer_links a:hover{color: var(--secondary-color);}

.footer_links a::before { content: "|"; position: absolute; right: -30px; top: 12px; transform: translateY(-50%); color: rgba(34, 34, 34, 1); }

.footer_links a:last-child::before{content: none;}

.footer_links a{ color: rgba(34, 34, 34, 1); }


.banner{ padding: 98px 0 200px 0; background:url("images/church_banner.png") no-repeat center center; background-size:cover; position:relative; display:flex; align-items:center; }

/* .banner::before{ content:""; position:absolute; inset:0; } */

.banner_content{ position:relative; z-index:2; width:100%; margin:0 auto; }

.banner_content span{ text-align: center; display:block; font-size:24px; letter-spacing:6px; color:rgba(34, 34, 34, 1); text-transform:uppercase; margin-bottom:34px; }

.banner_content h1{ font-size:80px; line-height: 88px; color:#fff; letter-spacing: 0; text-shadow: 0 2px 8px rgba(0,0,0,0.8); margin-bottom:24px; }

.banner_btns{ display:flex; gap:28px; margin-bottom:28px; }

.banner_btns .button{ font-family: var(--open-bold); font-size: 28px; line-height: 28px; letter-spacing: 0; }

.banner_btns a.button.mass_btn{color: white !important; background-color: var(--primary-color) !important;}
.banner_btns a.button:hover.mass_btn{color: var(--primary-color) !important; background-color: white !important;}

.banner_links{ display:flex; gap:46px; }

.banner_links a{ color: rgba(34, 34, 34, 1); font-family: var(--open-bold); font-size:20px; line-height: 28px; letter-spacing: 20%; }



.mass_schedule_row{ display:flex; flex-wrap:wrap; }

.schedule_col{ width:33.33%; padding:0 50px; border-right:1px solid rgba(196, 196, 191, 1); }

.schedule_col:last-child{ border-right:none; }

.schedule_heading{ display:flex; align-items:center; gap:19px; margin-bottom:25px; }

.schedule_heading img{ width:45px; height:45px; object-fit:contain; }

.schedule_heading h4{ margin:0; color:var(--primary-color); font-family:var(--open-semibold); font-size:32px !important; line-height:48px; letter-spacing: 0%; text-transform:uppercase; }

.schedule_item{ display:flex; justify-content:space-between; gap:15px; padding:16px 0; border-bottom:1px solid rgba(196, 196, 191, 1);
}

.schedule_item:last-of-type{ border-bottom:none; }

.schedule_item span{ color: rgba(34, 34, 34, 1); }

.schedule_item strong{ color: rgba(0, 0, 0, 1); font-family:var(--open-semibold); white-space:nowrap; }

.schedule_link{ display:inline-block; margin-top:28px; color:var(--primary-color); font-family:var(--open-bold); letter-spacing: 0; text-decoration:none; position:relative; padding-right:18px; }

.schedule_link::after{ content: ""; position: absolute; top: 50%; right: -20px; transform: translateY(-50%); width: 24px; height: 24px; background: url("images/detail_arrow.png") no-repeat center; background-size: contain; }

.we_were_glad{
    background: rgba(241, 235, 225, 1);
    padding:81px 0;
}

.we_were_glad_otr{ display:flex; align-items:center; gap:50px; }

.we_were_img{position: relative; width:40%; border-radius: 12px; overflow: hidden; }

span.sub_title{font-family: var(--open-semibold); font-size: 20px; line-height: 28px; letter-spacing: 0%; color: rgba(77, 77, 77, 1);}

.we_were_img img{ width:100%; display:block;}

.we_were_content{ width:60%; counter-reset: glad-counter; }

.white_box{position: absolute; bottom:32px; right: 32px; padding: 10px 16px; background-color: #fff; display: flex; flex-wrap: wrap; flex-direction: column; border-radius: 8px;}

.box_text{font-size: 24px; line-height: 32px; font-family: var(--open-semibold);color: var(--black-color); letter-spacing: 26%;}

.box_img{max-width: 300px; height: 113px; width: 100%;}

.box_img img{height: 100%;}

.we_were_content h2{ font-size:40px; line-height:48px; color:var(--primary-color); margin-bottom: 12px; text-transform: lowercase; }

.we_were_content > p{ margin-bottom:32px; }

.glad_item{ display:flex; gap:15px; margin-bottom:20px; }

.glad_item span{ width:40px; height:40px; border-radius:50%; background:var(--primary-color); color:#fff; display:flex; align-items:center; justify-content:center; font-family: var(--open-semibold); flex-shrink:0; font-size: 24px; line-height: 32px; margin-top: 5px; }

.glad_item span::before{ counter-increment: glad-counter; content: counter(glad-counter); }

.glad_item h3{ font-size: 32px; line-height: 40px; font-family: var(--open-semibold); margin-bottom:4px; color:var(--primary-color); }

.glad_item > div p{margin-bottom: 12px;}

.button.visitor_btn{font-family: var(--open-bold); font-size: 28px; line-height: 28px; letter-spacing: 0;}









.sacraments{ padding: 70px 0; background:#f3f3f3; text-align: center; }

.section_heading h2{ font-size: 40px; line-height: 48px; color: rgba(7, 35, 68, 1); font-family: var(--open-bold); text-transform:uppercase; position: relative;  margin: 0 auto 32px; }

.sacraments h2::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: -20px; width: 32%; height: 2px; background: rgba(168, 132, 70, 1); }

.section_heading p,.faith_box > p, .get_involved > p,.faith_card p, .involved_card p{ font-size: 20px; line-height: 28px; letter-spacing: 4%; color: rgba(34, 34, 34, 1); font-style:italic; margin-bottom: 40px; }

.sacraments_otr{ display:flex; gap:20px; }

.sacrament_card{ width:calc(33.33% - 12px); border:1px solid #6E7F92; border-radius:8px; overflow:hidden; background:#fff; position:relative; }
.sacrament_card img{ width:100%; object-fit:cover; display:block; }

.card_content h3::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: -10px; width: 100%; height: 2px; background: rgba(168, 132, 70, 1); }

/* Overlay */

.sacrament_card::before{ content:""; position:absolute; inset:0; background: linear-gradient( 180deg, rgba(10,35,65,0.10) 10%, rgba(10,35,65,0.35) 50%, rgba(10,35,65,0.84) 100% ); z-index:1; }

.card_content{ position:absolute; left:0px; right:0px; bottom:65px; color:#fff; z-index:2; padding: 0 40px 40px 40px; text-align: left; }

.card_content h3{ font-size:32px; line-height:40px; font-family: var(--open-semibold); margin-bottom:20px; color:#fff; position: relative; }

.card_content p{margin-bottom: 0;}

.card_btn{ display:flex; align-items:center; justify-content:space-between; padding:20px 32px; background:#fff; text-decoration:none; font-size:24px; line-height: 32px; font-family: var(--open-bold); position: relative; z-index: 2; transition:.3s; }

.card_btn:hover > a{ color:#b08a42; }

.card_btn a{color:#072344; margin-right: 30px; width: fit-content; position:relative; }

.card_btn a::after,.btn_wrap a::after,.faith_card span::after,
.involved_card span::after,a.content_link::after{ content: ""; position: absolute; top: 50%; right: -30px; transform: translateY(-50%); width: 24px; height: 24px; background: url(images/detail_arrow.png) no-repeat center; background-size: contain; }

.btn_wrap{ text-align:center; margin-top:40px; }

.button.scarment_btn{ padding:28px 76px 28px 48px; background: var(--secondary-color) !important; color:#fff !important; font-size:28px; line-height:28px; font-family: var(--open-bold); border:1px solid #000; position:relative; transition: all 0.4s ease; }

.button.scarment_btn:hover{ color:var(--secondary-color) !important; background-color:transparent !important; }

.btn_wrap a::after{ z-index:2; right:45px; filter:brightness(4); }

.btn_wrap a:hover::after{ filter:brightness(1); }


.involved_section{ padding: 50px 0 38px 0; background: rgba(241, 235, 225, 1); }

.involved_otr{ display:flex; gap: 112px; justify-content: flex-start; }

.faith_box { max-width:38%; width: 100%; }

.get_involved{max-width: 48%; width: 100%;}

.faith_box h2, .get_involved h2,.parish_updates h2{ font-family: var(--open-bold); font-size:40px; line-height: 48px; color: #072344; margin-bottom:10px; text-transform:uppercase; position:relative; padding-bottom:32px; }

.faith_box h2::after, .get_involved h2::after,.parish_updates h2::after{ content:""; position:absolute; left:0; bottom: 16px; width: 632px; height:2px; background:#A88446; }


.faith_cards{ display:flex; flex-direction:column; gap:16px; }
.faith_card span,
.involved_card span{ position: relative; color: #072344; font-size: 24px; line-height: 32px; font-family: var(--open-semibold);}

.faith_card, .involved_card{ display:block; text-decoration:none; background:#fff; border:1px solid #cfcfcf; border-radius:6px; padding: 22px 24px; transition:.3s; }

.faith_card:hover,
.involved_card:hover{
    box-shadow: 0 8px 20px rgba(7, 35, 68, 0.12);
}
.mt-34{margin-top: 34px;}

.faith_card a:hover span, .involved_card a:hover span{ color: var(--secondary-color) !important; transition: 0.3s all ease-in-out;}


.faith_card p, .involved_card p{ margin-top: 8px; margin-bottom:0; font-style:normal; color: #303030; }

.top_cards{ display:flex; gap:16px; margin-bottom:16px; }

.top_cards .involved_card{ width:50%; min-height: 240px; }

.full_width{ width:100%; }

.involved_card a.under_lined{ position: relative; display: inline-block; }

.involved_card a.under_lined::before{ content: ''; position: absolute; left: 0; bottom: -10px; width: 100%; height: 2px; background: rgba(168, 132, 70, 1); transition: width .4s ease; }


.parish_updates{ padding:70px 0; background:#fff; }

.parish_updates h2{margin-bottom: 20px;}

.parish_updates_otr{ display:flex; justify-content: flex-start; gap:24px; }

.parish_event_card{ max-width:31%; width:100%; }

.parish_event_img{ position:relative; overflow:hidden; border-radius:8px; margin-bottom:14px; line-height:0; }

.parish_event_img img{ width:100%; object-fit:cover; display:block; }

.parish_event_date{ position:absolute; top:18px; left:18px; color:#fff; text-align:center; }

.parish_event_date span{ display:block; font-size:24px; line-height:32px; letter-spacing: 4%; font-family:var(--open-semibold); color: #fff; }

.parish_event_date strong{ display:block; font-size: 40px; line-height:48px; letter-spacing: 4%; font-family:var(--open-bold); color: #fff; }


.parish_event_card h3{font-family: var(--open-semibold); color:#072344; font-size:32px; line-height:40px; font-family:var(--open-bold); margin-bottom:8px; }

.parish_event_card p{ color:#222222; margin-bottom: 0; letter-spacing: 4%;}

.content_box{ max-width:32%; width:100%; }

.content_item{ padding-left:18px; border-left:2px solid #E2E1E0; }

.content_item + .content_item{ margin-top:33px; }

.content_item h4{ color:#222222; font-size:24px; line-height:32px; letter-spacing: 0%; font-family:var(--open-semibold); text-transform:uppercase; margin-bottom:12px; }

.content_item p{ color:#222222; margin-bottom: 12px; }

a.content_link{ color:#000; font-size:20px; line-height:28px; font-family:var(--open-bold); text-transform:uppercase; position:relative; padding-right:22px; display:inline-block; }

a.content_link::after{right: -10px;}

.content_link:hover{ color:#A88446; }

.stewardship{ position: relative; overflow: hidden; padding: 100px 0; }

.stewardship_img{ position: absolute; inset: 0; }

.stewardship_img img{ width: 100%; height: 100%; object-fit: cover; display: block; }

.stewardship_img::before{ content: ""; position: absolute; inset: 0; background: rgba(255,255,255,0.8); z-index: 1; }

.stewardship .container{ position: relative; z-index: 2; }

.stewardship_content{ text-align: center; max-width: 55%; width: 100%; margin: 0 auto;}

.stewardship h3{color: rgba(34, 34, 34, 1); font-family: var(--open-bold); margin-bottom: 10px;}

.stewardship span{font-size: 40px; font-family: var(--body-font); line-height: 48px; font-style: italic; letter-spacing: 4%; }

.stewardship p{margin: 20px 0;}

.stewardship strong{font-family: var(--open-bold); font-style: italic; font-size: 28px; line-height: 36px; letter-spacing: 4%; text-transform: uppercase; margin-bottom: 40px; display: block;}

.stewardship_btn{margin: 0 auto; width: 100%; gap: 28px;}

.stewardship_btn a.button{color: rgba(34, 34, 34, 1); font-family: var(--open-bold); font-size: 28px; line-height: 28px; letter-spacing: 16%;}
.stewardship_btn a.button:hover{color:white !important;}

.stewardship_btn a.button.golden{background-color: var(--secondary-color) !important; color: #fff !important; }

.stewardship_btn a:hover.button.golden{background-color: white !important; color: var(--secondary-color) !important;}

.where.upcoming{padding: 95px 0 87px 0; position: relative;}

.where.upcoming h2{font-size: 40px; font-family: var(--avenir-bold); text-transform: lowercase;}

.where.upcoming p{margin: 0 auto;}

.where.upcoming span{margin-bottom: 20px; display: block; color: #fff; font-family: var(--body-font); font-size: 24px; line-height: 36px; letter-spacing: 20%;}

.where.upcoming::before { content: ""; position: absolute; left: 0; bottom: 10px; width: 100%; height: 1px; background: rgba(182, 152, 91, 1); }

.get_btn.where_btn{margin-top: 32px;}

.where.upcoming .upcoming_head{margin-bottom: 0;}

.faith-based{padding: 89px 0;}

.based_inr{    display: flex;
    justify-content: space-between;
    gap: 116px;
    flex-wrap: wrap;}

    .based_card {
    width: calc(33.33% - 78px);
    text-align: center;
    position: relative;
    text-align: left;
}

.based_card span.icon{line-height: 0px;
        margin: 0 auto 20px;
    padding: 13px;
    border-radius: 50px;
    border: 2px solid rgba(0, 177, 255, 1);
    height: 72px;
    width: 72px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.based_card span.icon img{    height: 46px;
    width: 46px;
    object-fit: contain;
}

.based_card:not(:last-child)::after{
    content: "";
    position: absolute;
    top: 0;
    right: -58px;
    width: 1px;
    height: 100%;
    background: rgba(196, 196, 191, 1);
}

.based_card h3{font-size: 32px; line-height: 40px; font-family: var(--open-semibold); letter-spacing: 0; color: var(--primary-color); padding-bottom: 16px;}

.based_card p{text-transform: capitalize; margin-bottom: 0;}


.join_family{
    padding: 80px 0;
    background: #f5f5f5;
    text-align: center;
}

.join_family h2{
    font-size: 42px;
    font-weight: 700;
    text-transform: uppercase;
    color: #252525;
    margin-bottom: 50px;
    position: relative;
}

.join_family h2::after{
    content: "";
    width: 360px;
    height: 2px;
    background: #2da7ff;
    position: absolute;
    left: 50%;
    bottom: -20px;
    transform: translateX(-50%);
}

.join_family_wrap{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.join_logo{
    max-width: 160px;
    width: 100%;
    flex-shrink: 0;
}

.join_logo img{
    width: 100%;
    display: block;
}

.join_content{
    max-width: 700px;
    margin: 0 auto;
}

.join_content p{
    font-size: 18px;
    line-height: 1.8;
    font-style: italic;
    color: #444;
    margin: 0;
}


.icon_head h3{font-size: 24px; line-height: 36px;}