/*==================================================
  FIJNBOS MINISTRIES
  Main Stylesheet
  Author: UX by Mischka
==================================================*/


/*==================================================
  GOOGLE FONTS
==================================================*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Vidaloka&display=swap');

:root{

    /* Brand Colours */

    --forest:#14392F;
    --forest-light:#1E4A3E;

    --gold:#C49A47;
    --gold-light:#D7B16A;

    --sand:#F7F4EE;

    --cream:#FBFAF7;

    --white:#ffffff;

    --text:#2F3532;

    --text-light:#6E746F;

    --border:#ECE7DE;

    --shadow-small:
        0 8px 25px rgba(0,0,0,.05);

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

    --shadow-large:
        0 40px 90px rgba(0,0,0,.12);

    --radius:22px;

    --transition:.45s cubic-bezier(.19,1,.22,1);

}


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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Montserrat',sans-serif;

    background-color:#fff;

    font-size:16px;

    color:var(--text);

    overflow-x:hidden;

    line-height:1.8;

    text-rendering:optimizeLegibility;

}

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

img{

max-width:100%;

display:block;

object-fit:cover;

}

a{
text-decoration:none;
transition:var(--transition);
color:inherit;
}

ul{

    list-style:none;

}

button{

    border:none;

    cursor:pointer;

    font-family:inherit;

}

input{

    font-family:inherit;

}

.container{

width:min(92%,1320px);

margin:auto;

}

.section-heading{

display:flex;

justify-content:space-between;

align-items:flex-end;

margin-bottom:80px;

}

.section-heading h2{

    font-family:'Playfair Display',serif;

    font-size:2.6rem;

    font-weight:600;

    color:var(--forest);

}

.section-heading-row img{

    width:70px;

    height:auto;

    margin-top:18px;

}

.eyebrow{

    display:inline-block;

    font-size:.75rem;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

    color:var(--gold);

    margin-bottom:18px;

}


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

h1{

    font-size:clamp(3.5rem,6vw,6rem);

    line-height:1.05;

    letter-spacing:-2px;

    font-weight:600;

}

h2{

    font-size:clamp(2.5rem,4vw,4rem);

    line-height:1.1;

}

h3{

    font-size:1.7rem;

}

p{

    font-size:1.05rem;

    line-height:1.9;

    color:var(--text-light);

}

.text-width{

max-width:620px;

}


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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:15px 34px;

    border-radius:8px;

    font-family: "Montserrat", sans-serif;

    font-size:.9rem;

    font-weight:600;

    transition:var(--transition);

}

.icon-sprout::before{
  color:#BB812A;
}

.icon-calendar-days::before{
  color:#BB812A;
}

.fa-heart:before{
  color:#BB812A;
}

.btn-primary{

    background:var(--forest);

    color:white;

}

.btn-primary:hover{

    background:var(--forest-light);
    transform:translateY(-2px);
    box-shadow: 0 20px 40px rgba(20,57,47,.18);

}


.btn-secondary{

    background:rgba(255, 255, 255, 0.30);

    color:var(--forest);

    border:1px solid #BB812A;

    backdrop-filter:blur(3px);

}

.btn-secondary:hover{

    background:white;

}

.btn-gold{

    background:var(--gold);

    color:white;

}

.btn-gold:hover{

    background:var(--gold-light);

    transform:translateY(-3px);

}


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

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

.site-header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    background:#ffffff;

    border-bottom:1px solid #ece6da;

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

}

.header-container{

    height:96px;

    display:flex;

    align-items:center;

    justify-content:space-between;
}

.logo img{

    height:72px;

    width:auto;

    display:block;

}

.nav-link{

    position:relative;

    text-decoration:none;

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:.82rem;

    font-weight:600;

    color:var(--forest);

    padding:38px 8px;

    transition:.3s;

}

.nav-link:hover{

    color:var(--gold);

}

.nav-link.active{

    color:var(--gold);

}

.nav-link.active::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:18px;

    width:36px;

    height:3px;

    margin:auto;

    background:var(--gold);

    border-radius:2px;

}

.support-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:16px 28px;

    background:var(--forest);

    color:white;

    border-radius:999px;

    text-decoration:none;

    text-transform:uppercase;

    letter-spacing:1.5px;

    font-size:.78rem;

    font-weight:700;

    transition:.3s;

}

.support-btn:hover{

    background:#10382E;

    transform:translateY(-2px);

}

.menu-toggle{

    display:none;

}

.menu-toggle span{
    background-color:#0f2f25!important;
}


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

.hero-glow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:900px;

    height:900px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(255,248,235,.90) 0%,

            rgba(255,248,235,.72) 22%,

            rgba(255,248,235,.35) 48%,

            rgba(255,248,235,.12) 70%,

            transparent 85%

        );

    filter:blur(25px);

    z-index:1;

    pointer-events:none;

}

.hero{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    background:

    linear-gradient(
        rgba(10,25,20,.35),
        rgba(10,25,20,.35)
    ),

    url("../img/hero2.jpg")
    center center/cover no-repeat;

}

.hero-overlay{

    position:absolute;

    inset:0;

}

.hero-content{

    position:relative;

    z-index:3;

    max-width:900px;

    padding-top:40px;

    span{
      text-transform: italics;
    }

}


.hero-logo{

    width:250px;

    margin:auto;

    margin-bottom:35px;

}

.hero-subtitle{

    color:var(--gold);

    letter-spacing:5px;

    font-weight:700;

    font-size:.8rem;

    margin-bottom:24px;

}

.hero h1{
  
    font-family:"Vidaloka", serif;
    font-weight:300;

    letter-spacing: 2%;

    font-size:24px;

    color:#0f2f25;

    margin-bottom:35px;

}

.hero h1 span{

    display:block;

    font-style:italic;

    color:#0f2f25;

    margin-top:12px;

}

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:22px;

    flex-wrap:wrap;

}

/*=========================================
MINISTRY OVERVIEW
=========================================*/

.ministry-overview{

    background:#fff;

    padding:24px 0px;

    border-bottom:1px solid #e8dfd3;

}

.overview-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

}

.overview-item{

    display:grid;

    grid-template-columns:145px 1fr;

    align-items:center;

    padding:16px;

    min-height:260px;

}

.overview-item:not(:last-child){

    border-right:1px solid #e6ddd1;

}

.overview-image{

    display:flex;

    justify-content:center;

    align-items:center;

}

.overview-image img{

    width:110px;

    height:auto;

}

.overview-content{

    padding-left:25px;

}

.overview-content h3{

    font-family:'Playfair Display',serif;

    font-size:2rem;

    color:var(--forest);

    margin-bottom:18px;

    text-transform:uppercase;

    letter-spacing:1px;

}

.overview-content p{

    color:#555;

    line-height:1.8;

    margin-bottom:26px;

    max-width:260px;

}

.overview-content a{

    text-decoration:none;

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:2px;

    font-weight:600;

    font-size:.85rem;

    transition:.3s;

}

.overview-content a span{

    margin-left:10px;

    transition:.3s;

}

.overview-content a:hover span{

    margin-left:18px;

}


/*==================================================
  TWO COLUMN CONTENT
==================================================*/

.content-section{

    padding-top:120px;

}

.content-grid{

    display:grid;

    grid-template-columns:
        1.4fr
        .9fr;

    gap:70px;

    align-items:start;

}


/*==============================================
LATEST TEACHINGS + EVENTS
==============================================*/

.latest-section{

    padding:40px 0;

    background:#fff;

}

.latest-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    position:relative;

}

.latest-grid::after{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    width:1px;

    height:100%;

    background:#e9dfd2;

}

.section-heading-row{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:45px;

}

.section-heading-row h2{

    font-family:'Playfair Display',serif;

    font-size:2rem;

    color:var(--forest);

    margin-bottom:18px;

    text-transform:uppercase;

    letter-spacing:1px;

}

.heading-divider{

    width:120px;

}

.section-link{

    display:flex;

    gap:8px;

    align-items:center;

    font-size:.82rem;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:var(--forest-green);

}

.teaching-item{

    display:grid;

    grid-template-columns:170px 1fr 60px;

    gap:28px;

    align-items:center;

    margin-bottom:28px;

}

.teaching-item img{

    width:170px;

    height:120px;

    object-fit:cover;

}

.teaching-content h3{

    font-family:'Playfair Display',serif;

    font-size:18px;

    color:var(--forest);

    margin-bottom:18px;

    text-transform:uppercase;

    letter-spacing:1px;

}

.verse{

    color:var(--fynbos-gold);

    text-transform:uppercase;

    font-weight:700;

    letter-spacing:.14em;

    font-size:.8rem;

}

.teaching-content p{

    color:#666;

    line-height:1.8;

}

.fa-arrow-right:before{
    color: #b98a32;
}

.event-item{

    display:grid;

    grid-template-columns:100px 1fr;

    gap:30px;

    align-items:center;

    margin-bottom:30px;

}

.date-box{

    width:100px;

    height:100px;

    background:#f8f4ed;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}

.day{

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

    font-size:3rem;

    color:#b98a32;

    line-height:1;

}

.month{

    text-transform:uppercase;

    letter-spacing:.15em;

    color:#b98a32;

    font-weight:700;

}

.event-content h3{

    font-family:'Playfair Display',serif;

    font-size:18px;

    color:var(--forest);

    margin-bottom:18px;

    text-transform:uppercase;

    letter-spacing:1px;

}

.event-content p{

    margin:8px 0;

    color:#666;

}

.event-content i{

    color:#b98a32;

    width:18px;

    margin-right:10px;

}

.full-btn{

    width:100%;

    margin-top:20px;

}


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

.mission-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:0;
}

.mission-card,
.involved-card{

    position:relative;

    border-radius:0px;
    min-height:320px;
}

.mission-card{

    display:grid;

    grid-template-columns:220px 1fr;

    align-items:center;

    background:var(--forest);

    color:white;

    min-height:320px;

    overflow:hidden;

}

.mission-illustration{

    display:flex;

    justify-content:center;

    align-items:center;

}

.mission-illustration img{

    width:150px;

}

.mission-content{

    padding:60px;

}

.mission-content i{

    color:var(--gold);

    font-size:1.4rem;

    margin-bottom:25px;

}

.eyebrow{

    display:block;

    text-transform:uppercase;

    color:var(--gold);

    letter-spacing:3px;

    font-size:.82rem;

    margin-bottom:25px;

}

.mission-content blockquote{

    font-family:'Playfair Display',serif;

    font-size:2.2rem;

    line-height:1.45;

    font-style:italic;

    font-weight:400;

    margin-bottom:35px;

}

.verse{

    color:var(--gold);

    letter-spacing:3px;

    font-weight:600;

}

.involved-card{

    position:relative;

    background:#FBFAF7;

    overflow:hidden;

    min-height:320px;

    display:flex;

    align-items:center;

}

.involved-content{

    max-width:55%;

    padding:60px;

    z-index:2;

}

.involved-content p{

    font-family:'Playfair Display',serif;

    font-size:2rem;

    line-height:1.6;

    color:var(--forest);

    margin:30px 0;

}


.mission-floral{

    position:absolute;

    right:40px;

    top:40px;

    width:140px;

    opacity:.18;

}

.background-flower{

    position:absolute;

    right:40px;

    bottom:60px;

    width:180px;

}

.btn-gold{

    background:#C8983C;

    color:white;

    padding:16px 36px;

    letter-spacing:2px;

    text-transform:uppercase;

    border-radius:6px;

}

.involved-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 30% 40%,
        rgba(255,248,235,.9) 0%,
        rgba(255,248,235,.45) 45%,
        transparent 75%);
    pointer-events:none;
}

/*=========================================
THERAPY + NEWSLETTER
=========================================*/

.support-section{

    padding:90px 0;

    background:#FFF;

}

.support-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:28px;

}

.therapy-card{

    display:grid;

    grid-template-columns:270px 1fr;

    border:1px solid #E9E1D5;

    background:#FBFAF7;

    min-height:360px;

}

.therapy-image{

    overflow:hidden;

}

.therapy-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.therapy-content{

    padding:40px;

    display:flex;

    flex-direction:column;

}

.section-label{

    font-size:.85rem;

    text-transform:uppercase;

    letter-spacing:3px;

    color:var(--forest);

    font-weight:600;

}

.therapy-description{

    margin:22px 0;

    font-size:1.2rem;

    font-family:'Playfair Display', serif;

    line-height:1.8;

    color:#555;

}

.therapy-list{

    list-style:none;

    margin:0;

    padding:0;

}

.therapy-list li{

    position:relative;

    padding-left:30px;

    margin-bottom:18px;

}

.therapy-list li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:var(--forest);

    font-weight:700;

}

.therapy-link{

    margin-top:auto;

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:2px;

    font-weight:600;

    text-decoration:none;

}

.therapy-link span{

    margin-left:12px;

}

.newsletter-card{

    position:relative;

    border:1px solid #E9E1D5;

    background:#FBFAF7;

    min-height:360px;

    overflow:hidden;

}

.newsletter-content{

    width:60%;

    padding:45px;

}

.newsletter-content h3{

    font-family:'Playfair Display', serif;

    font-size:2rem;

    color:var(--forest);

    margin-bottom:28px;

}

.newsletter-content p{

    color:#666;

    line-height:1.8;

    margin-bottom:35px;

}

.newsletter-form{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.newsletter-form input{

    height:56px;

    border:1px solid #DDD4C7;

    padding:0 20px;

    font-size:1rem;

    background:white;

}

.newsletter-form button{

    width:220px;

    height:54px;

    background:var(--forest);

    color:white;

    border:none;

    text-transform:uppercase;

    letter-spacing:2px;

    cursor:pointer;

}

.newsletter-flower{

    position:absolute;

    right:40px;

    top:50%;

    transform:translateY(-50%);

    width:180px;

}



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

.footer{

    background:#FBFAF7;

    padding:80px 0 60px;

    border-top:1px solid #ECE7DE;

}

.footer-grid{

    display:grid;

    grid-template-columns:
        2.3fr
        1fr
        1fr
        1.2fr
        auto;

    gap:55px;

    align-items:flex-start;

}

.footer-brand img{
    width:200px;
    height:auto;
}

/*=========================================
SOCIAL ICONS
=========================================*/

.social-icons{

    display:flex;

    align-items:center;

    gap:12px;

    margin-top:20px;

}

.social-icons a{

    width:34px;

    height:34px;

    border-radius:50%;

    background:var(--forest);

    color:#ffffff;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    transition:all .3s ease;

}

.social-icons a i{

    font-size:.82rem;

    line-height:1;

}

.social-icons a:hover{

    background:var(--gold);

    transform:translateY(-2px);

}


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

.footer-bottom{

    background:var(--forest);

    border-top:1px solid rgba(255,255,255,.08);

    padding:22px 0;

}

.footer-bottom-inner{

    width:min(92%,1200px);

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:28px;

}

.footer-bottom-inner img{
  width:50px;
  height:auto;
}

.footer-copyright{

    text-align:center;

}

.footer-copyright h4{

    margin:0;

    color:rgba(255,255,255,.90);

    font-size:.95rem;

    letter-spacing:5px;

    text-transform:uppercase;

    font-family:'Montserrat', sans-serif;

    font-weight:600;

}

.footer-copyright p{

    margin-top:10px;

    color:rgba(255,255,255,.60);

    font-size:.9rem;

    line-height:1;

}


/*==================================================
  FORMS
==================================================*/

input,
textarea,
select{

    transition:.3s;

}

input:focus,
textarea:focus{

    box-shadow:
        0 0 0 4px rgba(199,155,69,.18);

}


/*==================================================
  IMAGE EFFECTS
==================================================*/

.teaching-card img,
.therapy-image img{

    transition:transform .6s ease;

}

.teaching-card:hover img,
.therapy-image:hover img{

    transform:scale(1.04);

}


/*==================================================
  SECTION SPACING
==================================================*/

.feature-section,
.content-section,
.mission-section,
.therapy-section,
.newsletter-section{

    position:relative;

}


/*==================================================
  CUSTOM SCROLLBAR
==================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:var(--sand);

}

::-webkit-scrollbar-thumb{

    background:var(--forest);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--gold);

}


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

::selection{

    background:var(--gold);

    color:white;

}