/*=========================================================
    4Disciples.org

    Main Stylesheet

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


/*=========================================================
    CSS VARIABLES
=========================================================*/

:root{

    --navy:#0d2340;
    --navy-dark:#071423;
    --gold:#d4af37;
    --gold-light:#f1d67a;
    --white:#ffffff;
    --light:#f7f8fa;
    --gray:#d9d9d9;
    --text:#333333;

    --radius:12px;

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

    --transition:
        all .35s ease;

}



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

*{

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

}



html{

    scroll-behavior:smooth;

}



body{

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background:#ffffff;

    color:var(--text);

    line-height:1.7;

}



/*=========================================================
    LINKS
=========================================================*/

a{

    text-decoration:none;

    transition:var(--transition);

}



img{

    display:block;

    max-width:100%;

}



/*=========================================================
    CONTAINER
=========================================================*/

.container{

    width:min(1200px,92%);

    margin:auto;

}



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

#hero{

    width:100%;

    overflow:hidden;

    background:#000;

}



#heroBanner{

    width:100%;

    height:auto;

    display:block;

}



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

#mainNav{

    position:sticky;

    top:0;

    z-index:999;

    background:var(--navy);

    border-top:4px solid var(--gold);

    border-bottom:4px solid var(--gold);

    box-shadow:var(--shadow);

}



.navWrapper{

    width:min(1200px,95%);

    margin:auto;

    display:flex;

    justify-content:space-evenly;

    align-items:center;

    padding:18px 0;

    gap:10px;

    flex-wrap:wrap;

}



.navItem{

    display:flex;

    flex-direction:column;

    align-items:center;

    color:white;

    font-size:.95rem;

    font-weight:bold;

}



.navItem span{

    margin-top:8px;

}



.navIcon{

    width:78px;

    height:78px;

    display:block;

    object-fit:contain;

    transition:var(--transition);

}



.navItem:hover{

    color:var(--gold);

}



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

.goldButton{

    display:inline-block;

    padding:14px 34px;

    margin-top:30px;

    background:var(--gold);

    color:var(--navy);

    border-radius:40px;

    font-weight:bold;

    transition:var(--transition);

}



.goldButton:hover{

    background:var(--gold-light);

    transform:translateY(-3px);

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

}


/*=========================================================
    SECTION DEFAULTS
=========================================================*/

section{

    padding:110px 0;

}



.sectionTitle{

    text-align:center;

    margin-bottom:45px;

}


.sectionTitle h2{

    color:var(--navy);

    font-size:2.4rem;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:15px;

}


.titleUnderline{

    width:120px;

    height:4px;

    background:var(--gold);

    margin:auto;

}



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

#welcome{

    background:white;

    text-align:center;

}



#welcome h1{

    color:var(--navy);

    font-size:3rem;

    margin-bottom:25px;

}



#welcome p{

    max-width:850px;

    margin:auto;

    font-size:1.15rem;

}



.goldLine{

    width:160px;

    height:5px;

    background:var(--gold);

    margin:45px auto;

}

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

#about{

    background:var(--light);

}

#about h3{

    color:var(--gold);

    text-align:center;

    font-size:1.8rem;

    margin-bottom:35px;

}

#about p{

    max-width:780px;

    margin:0 auto 25px auto;

    font-size:1.08rem;

    text-align:justify;

}

#about .goldButton{

    display:table;

    margin:45px auto 0 auto;

}


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

#scripture{

    background:linear-gradient(
        rgba(13,35,64,.94),
        rgba(13,35,64,.94)
    );

    color:white;

    text-align:center;

}

#scripture blockquote{

    font-size:2rem;

    font-style:italic;

    max-width:780px;

    margin:auto;

    line-height:1.6;

}

.scriptureReference{

    margin-top:30px;

    color:var(--gold);

    font-size:1.2rem;

    letter-spacing:2px;

}


/*=========================================================
    RESOURCES
=========================================================*/

#resources{

    background:white;

}

.sectionIntro{

    text-align:center;

    max-width:780px;

    margin:0 auto 55px auto;

    font-size:1.1rem;

}


/*=========================================================
    CARD GRID
=========================================================*/

.cardGrid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(300px,1fr));

    gap:35px;

}


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

.card{

    background:white;

    border-radius:var(--radius);

    padding:40px;

    box-shadow:var(--shadow);

    transition:var(--transition);

    border-top:6px solid var(--gold);

    display:flex;

    flex-direction:column;

}

.card:hover{

    transform:translateY(-10px);

    box-shadow:
        0 18px 40px rgba(0,0,0,.18);

}


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

.cardHeader{

    display:flex;

    align-items:center;

    gap:20px;

    margin-bottom:25px;

}


/*=========================================================
    SVG ICONS
=========================================================*/

.cardIcon{

    width:70px;

    height:70px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.featureIcon{

    width:64px;

    height:64px;

}

.featureIcon circle{

    fill:none;

    stroke:var(--gold);

    stroke-width:3;

}

.featureIcon path{

    fill:none;

    stroke:var(--gold);

    stroke-width:3;

    stroke-linecap:round;

}


/*=========================================================
    CARD TITLES
=========================================================*/

.card h3{

    color:var(--navy);

    margin-bottom:20px;

    font-size:1.4rem;

}

.card p{

    margin-bottom:30px;

    color:#555;

    flex-grow:1;

}

/*=========================================================
    CARD BUTTON
=========================================================*/

.cardButton{

    display:inline-block;

    padding:12px 24px;

    background:var(--navy);

    color:white;

    border-radius:30px;

    transition:var(--transition);

    font-weight:bold;

}

.cardButton:hover{

    background:var(--gold);

    color:var(--navy);

}


/*=========================================================
    SECTION ALTERNATING BACKGROUNDS
=========================================================*/

#resources{

    background:white;

}

#teachers{

    background:var(--light);

}

#podcasts{

    background:white;

}

#contact{

    background:var(--light);

}


/*=========================================================
    MISSION SECTION
=========================================================*/

#mission{

    background:linear-gradient(
        rgba(7,20,35,.95),
        rgba(7,20,35,.95)
    );

    color:white;

    text-align:center;

}

#mission h2{

    color:var(--gold);

    font-size:2.5rem;

    margin-bottom:30px;

}

#mission p{

    max-width:850px;

    margin:auto;

    font-size:1.15rem;

}

/*=========================================================
    TEACHERS
=========================================================*/

#teachers .card{

    text-align:center;

}

#teachers .cardIcon{

    margin:0 auto 20px auto;

}

#teachers .cardGrid{
    display:flex;
    justify-content:center;
}

#teachers .card{
    max-width:500px;
    width:100%;
}


/*=========================================================
    PODCASTS
=========================================================*/

#podcasts .card{

    text-align:center;

}

#podcasts .cardIcon{

    margin:0 auto 20px auto;

}


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

#contact{

    padding-bottom:120px;

}

#contactForm{

    max-width:850px;

    margin:auto;

}

.formGroup{

    margin-bottom:28px;

}

.formGroup label{

    display:block;

    font-weight:bold;

    color:var(--navy);

    margin-bottom:10px;

    font-size:1rem;

}

.formGroup input,
.formGroup textarea{

    width:100%;

    padding:16px;

    border:2px solid #d8d8d8;

    border-radius:10px;

    font-size:1rem;

    transition:var(--transition);

    background:white;

}

.formGroup input:focus,
.formGroup textarea:focus{

    border-color:var(--gold);

    outline:none;

    box-shadow:0 0 12px rgba(212,175,55,.25);

}

.formGroup textarea{

    resize:vertical;

    min-height:180px;

}


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

footer{

    background:var(--navy-dark);

    color:white;

    text-align:center;

    padding:70px 20px;

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

}

footer h3{

    color:var(--gold);

    font-size:2rem;

    margin-bottom:20px;

}

footer p{

    margin:12px 0;

}

.copyright{

    margin-top:35px;

    font-size:.95rem;

    opacity:.85;

}


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

#backToTop{

    position:fixed;

    right:25px;

    bottom:25px;

    width:58px;

    height:58px;

    border:none;

    border-radius:50%;

    background:var(--gold);

    color:var(--navy);

    font-size:26px;

    cursor:pointer;

    display:none;

    box-shadow:var(--shadow);

    transition:var(--transition);

    z-index:9999;

}

#backToTop:hover{

    transform:translateY(-4px);

    background:var(--gold-light);

}


/*=========================================================
    SIMPLE FADE-IN ANIMATION
=========================================================*/

.fadeIn{

    opacity:0;

    transform:translateY(40px);

    transition:opacity .8s ease,
               transform .8s ease;

}

.fadeIn.visible{

    opacity:1;

    transform:translateY(0);

}


/*=========================================================
    ACCESSIBILITY
=========================================================*/

a:focus,
button:focus,
input:focus,
textarea:focus{

    outline:3px solid var(--gold);

    outline-offset:3px;

}


/*=========================================================
    SELECTION
=========================================================*/

::selection{

    background:var(--gold);

    color:var(--navy);

}

/*=========================================================
    RESPONSIVE DESIGN
=========================================================*/

@media (max-width: 992px){

    .container{
        width:94%;
    }

    #welcome h1{
        font-size:2.3rem;
    }

    .sectionTitle h2{
        font-size:2rem;
    }

    .cardGrid{
        grid-template-columns:repeat(2,1fr);
    }

    .navWrapper{
        gap:20px;
    }

    .navIcon{
        width:64px;
        height:64px;
    }

}

@media (max-width:768px){

    section{
        padding:70px 0;
    }

    #welcome h1{
        font-size:2rem;
    }

    #about h3{
        font-size:1.5rem;
    }

    .sectionTitle h2{
        font-size:1.8rem;
    }

    .cardGrid{
        grid-template-columns:1fr;
    }

    .navWrapper{
        display:flex;
        flex-wrap:nowrap;
        justify-content:space-between;
        align-items:flex-start;
        gap:4px;
        padding:10px 6px;
    }

    .navItem{
        width:25%;
        flex:0 0 25%;
        margin:0;
        font-size:.68rem;
        text-align:center;
    }

    .navIcon{
        width:48px;
        height:48px;
    }

    .navItem span{
        display:block;
        margin-top:6px;
        line-height:1.15;
    }

    .goldButton{
        width:100%;
        text-align:center;
    }

    footer{
        padding:50px 20px;
    }

}

@media (max-width:480px){

    .navWrapper{
        display:flex;
        flex-wrap:nowrap;
        justify-content:space-between;
        gap:2px;
        padding:8px 2px;
    }

    .navItem{
        width:25%;
        flex:0 0 25%;
        font-size:.60rem;
        text-align:center;
    }

    .navIcon{
        width:42px;
        height:42px;
    }

}

/*=========================================================
    HOVER ANIMATIONS
=========================================================*/

.card:hover{

    border-top-color:var(--gold-light);

}

.goldButton:hover{

    background:var(--gold-light);

    transform:translateY(-3px);

    box-shadow:0 12px 30px rgba(212,175,55,.35);

}

.navItem:hover{

    transform:translateY(-8px) scale(1.05);

}


/*=========================================================
    IMAGE IMPROVEMENTS
=========================================================*/

#heroBanner{

    user-select:none;

    -webkit-user-drag:none;

}


/*=========================================================
    SMOOTH SECTION TRANSITIONS
=========================================================*/

section{

    scroll-margin-top:120px;

}


/*=========================================================
    UTILITY CLASSES
=========================================================*/

.textCenter{

    text-align:center;

}

.mt40{

    margin-top:40px;

}

.mb40{

    margin-bottom:40px;

}

.hidden{

    display:none;

}


/*=========================================================
    PRINT STYLES
=========================================================*/

@media print{

    #mainNav,
    #backToTop,
    .goldButton{

        display:none;

    }

    body{

        color:#000;

        background:#fff;

    }

    section{

        padding:20px 0;

    }

}


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