/*==================================================
    RESPONSIVE.CSS
    FIJNBOS MINISTRIES
==================================================*/


/*==================================================
    LARGE DESKTOPS
==================================================*/

@media (max-width:1400px){

.container{

    width:min(92%,1200px);

}

.hero h1{

    font-size:24px;
    line-height:40px;

}

.therapy-content h2{

    font-size:2.7rem;

}

}


/*==================================================
    LAPTOPS
==================================================*/

@media (max-width:1200px){

.header-container{

    height:85px;

}


.navbar ul{

    gap:28px;

}

.hero{

    padding-top:100px;

}

.hero h1{

    font-size:3.6rem;

}

.content-grid{

    gap:50px;

}

.newsletter-wrapper{

    padding:55px;

}

.newsletter-form input{

    width:280px;

}

}

@media (max-width:1200px){

.footer-grid{

    grid-template-columns:
        2fr
        1fr
        1fr
        1.2fr
        .8fr;

    gap:35px;

}

.footer-logo{

    width:220px;

}

.footer-badge img{

    width:140px;

}

}


/*==================================================
    TABLETS
==================================================*/

@media (max-width:992px){

section{

    padding:0;

}

/* Navigation */

.support-btn{

    display:none;

}

.menu-toggle{

    display:flex;

    flex-direction:column;

    gap:5px;

}

.menu-toggle span{

    width:28px;
    height:2px;

    background:white;

    transition:.3s;

}

.header.scrolled .menu-toggle span{

    background:var(--forest);

}

.navbar{

    position:fixed;

    top:85px;
    left:-100%;

    width:100%;

    background:white;

    padding:50px;

    transition:.4s;

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

}

.navbar.active{

    left:0;

}

.navbar ul{

    flex-direction:column;

    gap:25px;

}

/* Hero */

.hero{

    min-height:85vh;

}

.hero-logo{

    width:180px;

}

.hero h1{

    font-size:3rem;

}

.hero-buttons{

    flex-direction:column;

    align-items:center;

}

/* Cards */

.content-grid{

    grid-template-columns:1fr;

}


/* Therapy */

.therapy-grid{

    grid-template-columns:1fr;

}

.therapy-image{

    order:1;

}

.therapy-content{

    order:2;

}

/* Newsletter */

.newsletter-wrapper{

    grid-template-columns:1fr;

    text-align:center;

}

.newsletter-form{

    justify-content:center;

}

}

@media (max-width:992px){

.footer{

    padding:70px 0 50px;

}

.footer-grid{

    display:grid;

    grid-template-columns:

        1fr
        1fr;

    gap:50px;

}

.footer-brand{

    grid-column:1;

    border:none;

    padding:0;

}

.footer-badge{

    grid-column:2;

    justify-content:flex-end;

}

.footer-column{

    border:none;

    padding:0;

}

}

@media(max-width:992px){

.mission-grid{

grid-template-columns:1fr;

}

.mission-card{

grid-template-columns:1fr;

text-align:center;

}

.mission-content{

padding:50px 35px;

}

.mission-illustration{

padding-top:40px;

}

.involved-content{

max-width:100%;

padding:50px 35px;

}

.background-flower{

position:static;

display:block;

margin:30px auto 0;

opacity:.25;

}

}

@media (max-width:992px){

.support-grid{

    grid-template-columns:1fr;

}

.therapy-card{

    grid-template-columns:1fr;

}

.therapy-image{

    height:280px;

}

.newsletter-content{

    width:100%;

}

.newsletter-flower{

    position:static;

    display:block;

    margin:30px auto;

    transform:none;

    opacity:.2;

}

}

@media(max-width:992px){

.overview-grid{

    grid-template-columns:1fr;

}

.overview-item{

    grid-template-columns:110px 1fr;

    border-right:none !important;

    border-bottom:1px solid #e8dfd3;

}

.overview-item:last-child{

    border-bottom:none;

}

}

@media (max-width:992px){

.latest-grid{

grid-template-columns:1fr;

gap:70px;

}

.latest-grid::after{

display:none;

}

.section-heading-row{

flex-direction:column;

gap:20px;

}

.teaching-item{

grid-template-columns:1fr;

}

.teaching-item img{

width:100%;

height:230px;

}

.play-btn{

margin-top:20px;

}

.event-item{

grid-template-columns:80px 1fr;

}

.date-box{

width:80px;

height:80px;

}

.day{

font-size:2.3rem;

}

}


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

@media (max-width:768px){

.container{

    width:92%;

}

.hero{

    min-height:100vh;

}

.hero h1{

    font-size:2.4rem;

}

.hero h1 span{

    display:block;

}

.section-heading{

    flex-direction:column;

    align-items:flex-start;

    gap:20px;

}

.section-heading h2{

    font-size:2rem;

}

.play-button{

    position:absolute;

    right:20px;
    top:20px;

}


.involved-card h2{

    font-size:2rem;

}

.therapy-content h2{

    font-size:2.2rem;

}

.newsletter-wrapper{

    padding:45px 35px;

}

.newsletter-text h2{

    font-size:2rem;

}

.newsletter-form{

    flex-direction:column;

}

.newsletter-form input{

    width:100%;

}

}

@media (max-width:768px){

.footer{

    text-align:center;

}

.footer-grid{

    grid-template-columns:1fr;

    gap:40px;

}

.footer-brand{

    text-align:center;

}

.footer-logo{

    margin:auto auto 20px;

}

.footer-tagline{

    margin-bottom:25px;

}

.social-icons{

    justify-content:center;

}

.footer-column{

    text-align:center;

}

.footer-badge{

    justify-content:center;

}

.footer-badge img{

    width:150px;

}

}


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

@media (max-width:576px){

section{

    padding:0;

}

.hero{

    padding-top:120px;

}

.hero-logo{

    width:150px;

}

.hero-subtitle{

    font-size:.7rem;

    letter-spacing:3px;

}

.hero h1{

    font-size:2rem;

}

.btn{

    width:100%;

}



.newsletter-wrapper{

    padding:35px 25px;

}


}

@media (max-width:400px){

.footer{

    padding:55px 0 40px;

}

.footer-logo{

    width:180px;

}

.footer-badge img{

    width:120px;

}

.footer-column h4{

    font-size:.8rem;

}

.footer-column p,

.footer-column a{

    font-size:.95rem;

}

.social-icons{

    gap:10px;

}

.social-icons a{

    width:36px;

    height:36px;

}

}


/*==================================================
    VERY SMALL DEVICES
==================================================*/

@media (max-width:400px){

.hero h1{

    font-size:1.7rem;

}

.section-heading h2{

    font-size:1.8rem;

}

.therapy-content h2{

    font-size:1.8rem;

}



}