/* Importing Google font - Open Sans */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}




.header-container{width:90%;margin:0 auto}
.top-header{padding:5px 0;background-color:#10182F}
.top-nav{display:flex;justify-content:space-between;align-items:center}
.top-nav ul{list-style-type:none;padding-left:0;margin:0}
.top-nav ul li{display:inline-block}
.top-nav .top-contact ul li a{color:#fff;text-decoration:none;margin-right:15px;display:flex;align-items:center}
.top-nav .top-contact ul li a img{width:20px;margin-right:5px}
.top-nav .top-social ul li a{margin-left:10px}
.top-nav .top-social ul li a img{width:25px}
.navbar{display:flex;align-items:center;justify-content:space-between;padding:12px 0;color:#fff}
.nav-links a{color:#3e3e3e;text-decoration:none;padding-bottom:8px}
.nav-links a:hover{border-bottom:2px solid #ffd700}
.logo img{width:250px}
.menu{display:flex;gap:.4em;font-size:16px;font-weight:500}
.menu li:hover{border-radius:5px;transition:.3s ease}
.menu li{padding:5px 10px;list-style:none}
.menu li:last-child{padding-right:0}
input[type=checkbox]{display:none}
.hamburger{display:none;font-size:24px;user-select:none;cursor:pointer}

@media (max-width: 991px) {
.top-nav .top-social,.top-nav .top-contact{width:50%}
.top-nav .top-social ul{text-align:right}
.menu{display:none;position:absolute;background-color:#fff;right:0;left:0;padding:16px;margin-top:25px}
.menu li:hover{display:inline-block}
.menu li + li{margin-top:20px}
input[type=checkbox]:checked ~ .menu{display:block}
.hamburger{display:block;color:#000}
}

@media (max-width: 392px) {
.top-nav .top-social,.top-nav .top-contact{width:100%;text-align:center}
.top-nav .top-social ul{text-align:center}
.top-nav{flex-direction:column}
.logo img{width:72%}
.navbar{padding:1% 0}
}

/* Section Container */
.section-container{width: 90%;margin: 0 auto;}
.section-title{color:#017063;margin:35px 0;font-size:2rem;}

.churches-container{display:flex;align-content:center;flex-wrap:wrap}
.church{width:100%;margin-bottom:50px;box-shadow:1px 5px 10px 0 rgba(0,0,0,0.1);-webkit-box-shadow:1px 5px 10px 0 rgba(0,0,0,0.1);-moz-box-shadow:1px 5px 10px 0 rgba(0,0,0,0.1)}
.church-img{height:220px;background-size:cover;background-position:center}
.church-title a{color:#017063}
.church-title a h2{padding:0 10px}
.church-address p{color:#017063;padding:0 10px;margin:15px 0;}

/* NEWS PAGES */
.news-container{display:flex;column-gap:1.46%;align-content:center;flex-wrap:wrap}
.news{width:100%;margin-bottom:50px;box-shadow:1px 5px 10px 0 rgba(0,0,0,0.1);-webkit-box-shadow:1px 5px 10px 0 rgba(0,0,0,0.1);-moz-box-shadow:1px 5px 10px 0 rgba(0,0,0,0.1)}
.news-img{height:225px;background-size:cover;background-position:center;margin-bottom: 10px;}
.news-title a{color:#017063}
.news-title a:visited{color:#017063}
.news-title a h2{padding:0 10px}

/* News Layout */
.news-layout{display:block}
.news-layout .column-1{width:100%}
.news-layout .column-1 .news-title h1{margin-bottom:10px;font-size:1.5rem;line-height:2rem}
.news-layout .column-1 .updated-on{margin-bottom:15px;font-size:14px;font-style:italic}
.news-layout .column-1 .article-share{margin:15px 0}
.news-layout .column-1 .article-share b{display:block;margin-bottom:8px}
.news-layout .column-1 .back-btn{margin-bottom:25px}
.news-layout .column-1 .back-btn a{text-decoration:none;color:#000;padding:0 0 3px;border-bottom:1px solid #000}
.news-layout .column-1 .news-image img{width:100%;margin-bottom:25px}
.news-layout .column-2{width:100%}
.news-layout .column-2 .ad-image{text-align:center}
.news-layout .column-2 .ad-image img{width:100%;margin-top:25px;margin-bottom:25px}


/* News Awi*/
.n-section{display:flex;flex-direction:column;justify-content:space-between;gap:50px}
.n-section .n-col-1{width:100%}
.n-section .n-col-2{width:100%}
.n-section .n-col-1 .news-title{padding:12px}
.n-section .n-col-2 .features-content{margin-bottom:20px}
.n-section .n-col-2 .features-content a{text-decoration:none;background-color:#f2f2f4;color:#000;display:block}
.n-section .n-col-2 .features-content h2{margin-bottom:15px}
.n-section .n-col-2 .features-content h3{padding:8px 10px}


/* Global - Copyright Section */

#copyright  { clear:both; width:100%; background-color:#FFF; text-align:center; padding:2px; position:absolute; padding-bottom:20px; margin-bottom:20px; }
#copyright  p { color:#1D1D1D; font-size:12px; }



/* Hotel Pages */
#hotel-section{display:flex;flex-wrap:wrap;justify-content:space-between}
#hotel-section .hotel{width:100%;margin-bottom:50px}
#hotel-section .hotel a{text-decoration:none}
#hotel-section .hotel .hotel-title{text-align:center;color:#000}
#hotel-section .hotel .hotel-img{margin-bottom:10px;position:relative}
#hotel-section .hotel .hotel-img .bg-img{background-size:cover;height:240px;width:100%;background-position:center}
.triangle{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:0;height:0;border-left:25px solid transparent;border-right:25px solid transparent;border-bottom:25px solid #fff}
.title h2{text-align:center;font-size:32px;display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:20px 0;grid-gap:28px}
.hotel-title a{color:#017063}
.hotel-title a:visited{color:#017063}
.title h2:after,.title h2:before{content:" ";display:block;border-bottom:1.5px solid #ccc}


.footer{position:absolute;width:100%;background:#10182F;border-radius:6px}
.footer .footer-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:3.5rem;padding:60px}
.footer-row .footer-col h4{color:#fff;font-size:1.2rem;font-weight:400}
.footer-col .links{margin-top:20px}
.footer-col .links li{list-style:none;margin-bottom:10px}
.footer-col .links li a{text-decoration:none;color:#bfbfbf}
.footer-col .links li a:hover{color:#fff}
.footer-col p{margin:20px 0;color:#bfbfbf;max-width:300px}
.footer-col form{display:flex;gap:5px}
.footer-col input{height:40px;border-radius:6px;background:none;width:100%;outline:none;border:1px solid #7489C6;caret-color:#fff;color:#fff;padding-left:10px}
.footer-col input::placeholder{color:#ccc}
.footer-col form button{background:#fff;outline:none;border:none;padding:10px 15px;border-radius:6px;cursor:pointer;font-weight:500;transition:.2s ease}
.footer-col form button:hover{background:#cecccc}
.footer-col .icons{display:flex;margin-top:30px;gap:30px;cursor:pointer}
.footer-col .icons i{color:#afb6c7}
.footer-col .icons i:hover{color:#fff}

@media (max-width: 768px) {
.footer{position:relative;bottom:0;left:0;transform:none;width:100%;border-radius:0}
.footer .footer-row{padding:20px;gap:1rem}
.footer-col form{display:block}
.footer-col form :where(input,button){width:100%}
.footer-col form button{margin:10px 0 0}
}

@media (min-width: 399px){
  .news-img{height:280px;}
}