/*
======================================================
 New Hope United Church of Christ
 Main Website Stylesheet

 Theme:
 African American Christian Church
 Modern Worship / Community Design

 Brand Colors:
 Red    #ea1f23
 Gold   #e8bb3e
 Green  #4b8648
 Black  #111111

======================================================
*/


/*=====================================================
 GLOBAL VARIABLES
=====================================================*/

:root {

    --primary-color:#ea1f23;
    --gold-color:#e8bb3e;
    --green-color:#4b8648;

    --black:#111111;
    --dark:#222222;
    --gray:#555555;
    --light-gray:#f6f6f6;
    --white:#ffffff;

    --heading-font:'Cinzel', sans-serif;
    --body-font:'Montserrat', sans-serif;

    --transition:all .35s ease;

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

    --container-width:1200px;

}


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


*,
*::before,
*::after {

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html {

    scroll-behavior:smooth;

}


body {

    font-family:var(--body-font);

    color:var(--gray);

    background:#ffffff;

    line-height:1.7;

    overflow-x:hidden;

}


img {

    max-width:100%;

    height:auto;

    display:block;

}


a {

    text-decoration:none;

    color:inherit;

    transition:var(--transition);

}


ul {

    list-style:none;

}


.container {

    width:92%;

    max-width:var(--container-width);

    margin:auto;

}


section {

    position:relative;

}



/*=====================================================
 TYPOGRAPHY
=====================================================*/


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

    font-family:var(--heading-font);

    color:var(--black);

    line-height:1.25;

    font-weight:700;

}


h1 {

    font-size:4rem;

}


h2 {

    font-size:2.7rem;

}


h3 {

    font-size:1.8rem;

}


p {

    margin-bottom:20px;

}


.section-padding {

    padding:100px 0;

}

.text-center {
    text-align:center;
}
.section-title {

    text-align:center;

    margin-bottom:60px;

}


.section-title span {

    display:block;

    color:var(--primary-color);

    font-size:.9rem;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:15px;

}


.section-title h2 {

    position:relative;

    display:inline-block;

    padding-bottom:20px;

}


.section-title h2::after {

    content:"";

    position:absolute;

    width:90px;

    height:4px;

    background:var(--gold-color);

    bottom:0;

    left:50%;

    transform:translateX(-50%);

}



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


.btn {

    display:inline-block;

    padding:15px 38px;

    border-radius:50px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

    font-size:.85rem;

    transition:var(--transition);

}


.btn-primary {

    background:var(--primary-color);

    color:white;

}


.btn-primary:hover {

    background:#bd1519;

    transform:translateY(-3px);

}


.btn-gold {

    background:var(--gold-color);

    color:var(--black);

}


.btn-gold:hover {

    background:#d4a62d;

    transform:translateY(-3px);

}


.btn-green {

    background:var(--green-color);

    color:white;

}


.btn-green:hover {

    background:#356934;

    transform:translateY(-3px);

}



/*=====================================================
 LOADING SCREEN
=====================================================*/


#loader {

    position:fixed;

    inset:0;

    background:#fff;

    z-index:99999;

    display:flex;

    align-items:center;

    justify-content:center;

}


.loader-logo img {

    width:150px;

    animation:
    logoPulse 1.8s infinite;

}


@keyframes logoPulse {


    0% {

        transform:scale(1);

    }


    50% {

        transform:scale(1.1);

    }


    100% {

        transform:scale(1);

    }

}



/*=====================================================
 TOP INFORMATION BAR
=====================================================*/


.top-bar {

    background:var(--black);

    color:white;

    font-size:.9rem;

}


.top-bar .container {

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:10px 0;

}


.top-bar a {

    color:white;

}


.top-bar a:hover {

    color:var(--gold-color);

}


.top-left i {

    color:var(--gold-color);

    margin-right:8px;

}


.top-right a {

    margin-left:18px;

    font-size:1rem;

}



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


#header {

    background:white;

    position:sticky;

    top:0;

    z-index:9999;

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

}


.header-container {

    height:105px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}


.logo img {

    width:85px;

}



/*=====================================================
 END PART 1
=====================================================*/

/*=====================================================
 NAVIGATION
=====================================================*/


#mainNav {

    display:flex;

    align-items:center;

}


.nav-menu {

    display:flex;

    align-items:center;

    gap:32px;

}


.nav-menu > li {

    position:relative;

}


.nav-menu > li > a {

    color:var(--black);

    font-size:.85rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.8px;

}


.nav-menu > li > a:hover {

    color:var(--primary-color);

}



.nav-arrow {

    font-size:.7rem;

    margin-left:5px;

}



/*=====================================================
 DROPDOWN MENUS
=====================================================*/


.dropdown {

    position:absolute;

    top:45px;

    left:0;

    width:250px;

    background:white;

    border-top:4px solid var(--primary-color);

    box-shadow:var(--shadow);

    opacity:0;

    visibility:hidden;

    transform:translateY(15px);

    transition:var(--transition);

}


.dropdown li {

    border-bottom:1px solid #eee;

}


.dropdown li:last-child {

    border-bottom:none;

}


.dropdown a {

    display:block;

    padding:15px 20px;

    color:var(--black);

    font-size:.9rem;

}


.dropdown a:hover {

    background:var(--light-gray);

    color:var(--primary-color);

}


.has-dropdown:hover .dropdown {

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}



/*=====================================================
 NAVIGATION CTA BUTTON
=====================================================*/


.nav-button a {

    background:var(--primary-color);

    color:white !important;

    padding:14px 25px;

    border-radius:50px;

}


.nav-button a:hover {

    background:var(--gold-color);

    color:var(--black) !important;

}



/*=====================================================
 MOBILE MENU BUTTON
=====================================================*/


.mobile-menu-button {

    display:none;

    background:none;

    border:none;

    width:45px;

    height:45px;

    cursor:pointer;

}


.mobile-menu-button span {

    display:block;

    height:3px;

    width:30px;

    background:var(--black);

    margin:6px auto;

    transition:.3s;

}



/*=====================================================
 HERO SECTION
=====================================================*/
.page-hero {

    height:50vh;

  
}



.hero {

    height:80vh;

    //min-height:650px;

    position:relative;

    display:flex;

    align-items:center;

    overflow:hidden;

}


.hero-image {

    position:absolute;

    inset:0;

    background-size:cover;

    background-position:center;

}


.hero-overlay {

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    rgba(0,0,0,.7),
    rgba(0,0,0,.30)
    );

}


.hero-content {

    position:relative;

    z-index:2;

    //max-width:900px;

    color:white;

}


.hero-content h1 {

    color:white;

    font-size:3.25rem;

    //margin-bottom:75px;

}

.hero-content h2 {

    color:var(--gold-color);

    font-size:2rem;

   // margin-bottom:10px;

}


.hero-content h1 span {

    color:var(--gold-color);

}


.hero-content p {

    font-size:1.25rem;

    color:white;

    //max-width:750px;

    margin-bottom:35px;

}


.hero-buttons {

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}



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


.hero-content {

    animation:

    heroFade 1.2s ease;

}


@keyframes heroFade {


from {

    opacity:0;

    transform:translateY(40px);

}


to {

    opacity:1;

    transform:translateY(0);

}


}



/*=====================================================
 HERO SCROLL ICON
=====================================================*/


.hero-scroll {

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

    color:white;

    font-size:28px;

    animation:
    bounce 2s infinite;

    z-index:3;

}


@keyframes bounce {


0%,
100% {

    transform:
    translate(-50%,0);

}


50% {

    transform:
    translate(-50%,12px);

}


}



/*=====================================================
 WELCOME SECTION
=====================================================*/


.welcome-section {

    padding:100px 0;

}


.welcome-grid {

    display:grid;

    grid-template-columns:

    1fr 1fr;

    gap:70px;

    align-items:center;

}


.welcome-image {

    position:relative;

}


.welcome-image img {

    border-radius:10px;

    box-shadow:var(--shadow);

}


.welcome-image::after {

    content:"";

    position:absolute;

    right:-25px;

    bottom:-25px;

    width:170px;

    height:170px;

    border:8px solid var(--gold-color);

    z-index:-1;

}


.welcome-content span {

    color:var(--primary-color);

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:3px;

}


.welcome-content h2 {

    margin-top:15px;
    margin-bottom: 15px;

}


.welcome-list {

    margin-top:30px;
    margin-bottom:30px;

}


.welcome-list li {

    margin-bottom:15px;

    font-weight:600;

}


.welcome-list i {

    color:var(--green-color);

    margin-right:12px;

}



/*=====================================================
 MISSION / VISION / VALUES
=====================================================*/


.mission-section {

    background:var(--light-gray);

    padding:100px 0;

}


.mission-grid {

    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:35px;

}


.mission-card {

    background:white;

    padding:45px 35px;

    text-align:center;

    border-radius:10px;

    box-shadow:

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

    transition:var(--transition);

}


.mission-card:hover {

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}


.mission-card .icon {

    width:85px;

    height:85px;

    margin:auto;

    margin-bottom:25px;

    border-radius:50%;

    background:var(--primary-color);

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:35px;

}


.mission-card:nth-child(2) .icon {

    background:var(--gold-color);

    color:var(--black);

}


.mission-card:nth-child(3) .icon {

    background:var(--green-color);

}


.mission-card h3 {

    margin-bottom:15px;

}

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


.ministries-section {

    padding:100px 0;

}


.ministry-grid {

    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:35px;

}


.ministry-card {

    background:white;

    border-radius:10px;

    overflow:hidden;

    box-shadow:

    0 8px 25px rgba(0,0,0,.08);

    transition:var(--transition);

}


.ministry-card:hover {

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}


.ministry-image {

    height:260px;

    overflow:hidden;

}


.ministry-image img {

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}


.ministry-card:hover img {

    transform:scale(1.08);

}


.ministry-content {

    padding:35px;
    text-align:center;

}


.ministry-content h3 {

    margin-bottom:15px;

}


.ministry-content p {

    color:var(--gray);

}


.ministry-link {

    color:var(--primary-color);

    font-weight:700;

}


.ministry-link:hover {

    color:var(--green-color);

}



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


.scripture-section {

    background-size:cover;

    background-position:center;

    padding:120px 0;

    position:relative;

}


.scripture-section::before {

    content:"";

    position:absolute;

    inset:0;

    background:

    rgba(0,0,0,.7);

}


.scripture-content {

    position:relative;

    text-align:center;

    max-width:850px;

    margin:auto;

    color:white;

}


.scripture-content h2 {

    color:white;

    font-size:3rem;

}


.scripture-content p {

    font-size:1.3rem;

   // font-style:italic;
    color: var(--gold-color)

}



/*=====================================================
 WORSHIP SERVICE CARDS
=====================================================*/


.service-section {

    padding:100px 0;

    background:var(--light-gray);

}


.service-grid {

    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:35px;

}


.service-card {

    background:white;

    padding:45px 35px;

    text-align:center;

    border-top:5px solid var(--secondary);

    border-radius:8px;

    box-shadow:

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

}


.service-card i {

    font-size:42px;

    color:var(--primary-color);

    margin-bottom:25px;

}


.service-card h3 {

    margin-bottom:15px;

}


.service-time {

    color:var(--green-color);

    font-weight:700;

    font-size:1.1rem;

}



/*=====================================================
 PASTOR FEATURE
=====================================================*/


.pastor-section {

    padding:100px 0;

}


.pastor-grid {

    display:grid;

    grid-template-columns:

    420px 1fr;

    gap:70px;

    align-items:center;

}


.pastor-image img {

    border-radius:10px;

    box-shadow:var(--shadow);

}


.pastor-content span {

    color:var(--primary-color);

    text-transform:uppercase;

    letter-spacing:3px;

    font-weight:700;

}


.pastor-content h2 {

    margin-top:15px;

}


.pastor-signature {

    margin-top:35px;

    font-family:cursive;

    font-size:2rem;

    color:var(--primary-color);

}



/*=====================================================
 EVENTS SECTION
=====================================================*/


.events-section {

    background:var(--light-gray);

    padding:100px 0;

}


.events-grid {

    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:35px;

}


.event-card {

    background:white;

    border-radius:10px;

    overflow:hidden;

    box-shadow:

    0 8px 25px rgba(0,0,0,.08);

}


.event-image {

    height:230px;

}


.event-image img {

    width:100%;

    height:100%;

    object-fit:cover;

}


.event-content {

    padding:30px;

}


.event-date {

    color:var(--primary-color);

    font-weight:700;

    margin-bottom:10px;

}


.event-content h3 {

    margin-bottom:15px;

}



/*=====================================================
 SERMON SECTION
=====================================================*/


.sermon-grid {

    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:35px;

}


.sermon-card {

    background:white;

    border-radius:10px;

    overflow:hidden;

    box-shadow:

    0 8px 25px rgba(0,0,0,.08);

}


.sermon-image {

    height:240px;

    position:relative;

}


.sermon-image img {

    width:100%;

    height:100%;

    object-fit:cover;

}


.sermon-play {

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

}


.sermon-play i {

    width:70px;

    height:70px;

    border-radius:50%;

    background:var(--primary-color);

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:25px;

}


.sermon-content {

    padding:30px;

}



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


.stats-section {

    background:

    linear-gradient(
    rgba(0,0,0,.75),
    rgba(0,0,0,.75)
    ),
    url("../images/stats-bg.jpg");

    background-size:cover;

    background-position:center;

    padding:90px 0;

}


.stats-grid {

    display:grid;

    grid-template-columns:

    repeat(4,1fr);

    text-align:center;

    gap:30px;

}


.stat-item {

    color:white;

}


.stat-item i {

    font-size:40px;

    color:var(--gold-color);

    margin-bottom:20px;

}


.stat-number {

    font-size:3rem;

    font-weight:700;

    color:white;

}


.stat-item p {

    color:white;

    text-transform:uppercase;

    letter-spacing:2px;

}

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


.gallery-section {

    padding:100px 0;

}


.gallery-grid {

    display:grid;

    grid-template-columns:

    repeat(4,1fr);

    gap:20px;

}


.gallery-item {

    position:relative;

    overflow:hidden;

    border-radius:8px;

    height:260px;

}


.gallery-item img {

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}


.gallery-item:hover img {

    transform:scale(1.1);

}


.gallery-overlay {

    position:absolute;

    inset:0;

    background:

    rgba(234,31,35,.75);

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    transition:.35s;

}


.gallery-overlay i {

    color:white;

    font-size:35px;

}


.gallery-item:hover .gallery-overlay {

    opacity:1;

}



/*=====================================================
 TESTIMONIAL SECTION
=====================================================*/


.testimonial-section {

    background:var(--light-gray);

    padding:100px 0;

}


.testimonial-grid {

    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:35px;

}


.testimonial-card {

    background:white;

    padding:40px;

    border-radius:10px;

    box-shadow:

    0 8px 25px rgba(0,0,0,.08);

    position:relative;

}


.testimonial-card::before {

    content:"\f10d";

    font-family:"Font Awesome 6 Free";

    font-weight:900;

    position:absolute;

    top:20px;

    right:25px;

    font-size:45px;

    color:var(--gold-color);

}


.testimonial-card p {

    font-style:italic;

}


.testimonial-author {

    font-weight:700;

    color:var(--primary-color);

}



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


.prayer-section {

    background:

    linear-gradient(
    120deg,
    var(--primary-color),
    #b9161a
    );

    padding:80px 0;

    color:white;

}


.prayer-container {

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

}


.prayer-section h2 {

    color:white;

}


.prayer-section p {

    color:white;

    max-width:700px;

}



/*=====================================================
 CONTACT PAGE
=====================================================*/


.contact-grid {

    display:grid;

    grid-template-columns:

    1fr 1fr;

    gap:50px;

}


.contact-info {

    padding:40px;

    background:var(--light-gray);

    border-radius:10px;

}


.contact-item {

    display:flex;

    gap:20px;

    margin-bottom:30px;

}


.contact-item i {

    color:var(--primary-color);

    font-size:25px;

}


.contact-form {

    background:white;

    padding:40px;

    box-shadow:var(--shadow);

    border-radius:10px;

}


.form-group {

    margin-bottom:20px;

}


.form-group input,
.form-group textarea,
.form-group select {


    width:100%;

    padding:15px;

    border:1px solid #ddd;

    border-radius:5px;

    font-family:var(--body-font);

}


.form-group textarea {

    height:160px;

    resize:none;

}


.form-group input:focus,
.form-group textarea:focus {

    outline:none;

    border-color:var(--primary-color);

}



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


#footer {

    background:var(--black);

    color:white;

}


.footer-cta {

    background:var(--green-color);

    padding:60px 0;

}


.footer-cta .container {

    display:flex;

    align-items:center;

    justify-content:space-between;

}


.footer-cta h2 {

    color:white;

}


.footer-main {

    padding:80px 0;

}


.footer-grid {

    display:grid;

    grid-template-columns:

    repeat(4,1fr);

    gap:40px;

}


.footer-column h3 {

    color:white;

    margin-bottom:25px;

}


.footer-column p {

    color:#ccc;

}


.footer-logo {

    width:120px;

    margin-bottom:25px;

}


.footer-column ul li {

    margin-bottom:12px;

}


.footer-column a {

    color:#ccc;

}


.footer-column a:hover {

    color:var(--gold-color);

}


.footer-social a {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:40px;

    height:40px;

    background:#333;

    border-radius:50%;

    margin-right:8px;

}


.footer-social a:hover {

    background:var(--primary-color);

    color:white;

}


.footer-bottom {

    border-top:1px solid #333;

    padding:25px 0;

}


.footer-bottom-content {

    display:flex;

    justify-content:space-between;

    color:#aaa;

    font-size:.9rem;

}



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


#backToTop {

    position:fixed;

    bottom:30px;

    right:30px;

    width:45px;

    height:45px;

    background:var(--primary-color);

    color:white;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:999;

}


#backToTop.active {

    opacity:1;

    visibility:visible;

}



/*=====================================================
 ANIMATION HELPERS
=====================================================*/


.fade-up {

    opacity:0;

    transform:translateY(40px);

    transition:1s;

}


.fade-up.show {

    opacity:1;

    transform:translateY(0);

}


.fade-left {

    opacity:0;

    transform:translateX(-40px);

    transition:1s;

}


.fade-left.show {

    opacity:1;

    transform:translateX(0);

}


.fade-right {

    opacity:0;

    transform:translateX(40px);

    transition:1s;

}


.fade-right.show {

    opacity:1;

    transform:translateX(0);

}



#loader{

position:fixed;

inset:0;

background:white;

display:flex;

align-items:center;

justify-content:center;

z-index:999999;

}


.loader-logo img{

width:120px;

animation:pulse 1.5s infinite;

}


@keyframes pulse{

50%{

transform:scale(1.1);

}

}



/*=====================================================
 END OF MAIN STYLESHEET
=====================================================*/