/* ==========================================================================
   PROJECT EMMAUS
   Grace Chapel International – Kenol
   Global Styles
   ========================================================================== */

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

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    margin:0;
    padding:0;

    background:var(--background);

    color:var(--text);

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

    font-size:16px;

    line-height:1.7;

    overflow-x:hidden;

}

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

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

    margin:0 0 20px;

    color:var(--primary);

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

    line-height:1.2;

    font-weight:700;

}

h1{

    font-size:3rem;

}

h2{

    font-size:2.4rem;

}

h3{

    font-size:1.8rem;

}

h4{

    font-size:1.4rem;

}

p{

    margin:0 0 24px;

}

a{

    color:var(--primary);

    text-decoration:none;

    transition:var(--transition);

}

a:hover{

    color:var(--secondary);

}

/* ===========================
   IMAGES
=========================== */

img{

    max-width:100%;

    height:auto;

    display:block;

}

/* ===========================
   LAYOUT
=========================== */

.em-container{

    width:min(1140px,92%);

    margin:auto;

}

.em-reading{

    width:min(780px,92%);

    margin:auto;

}

.em-section{

    padding:80px 0;

}

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

.em-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 30px;

    border-radius:12px;
    
    font-family:"Montserrat",sans-serif;

    font-weight:600;

    transition:var(--transition);

    cursor:pointer;

}

.em-btn-primary{

    background:var(--primary);

    color:#fff;

}

.em-btn-primary:hover{

    background:var(--secondary);

    color:#fff;

}

.em-btn-outline{

    background:#fff;

    border:2px solid var(--primary);

    color:var(--primary);

}

.em-btn-outline:hover{

    background:var(--primary);

    color:#fff;

}

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

.em-card{

    background:#fff;

    border-radius:20px;

    padding:32px;

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.em-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow-hover);

}

/* ===========================
   SECTION TITLES
=========================== */

.em-section-title{

    text-align:center;

    margin-bottom:50px;

}

.em-section-title span{

    display:block;

    color:var(--secondary);

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:.85rem;

    font-weight:700;

    margin-bottom:10px;

}

.em-section-title h2{

    margin-bottom:15px;

}

.em-section-title p{

    max-width:650px;

    margin:auto;

    color:var(--muted);

}

/* ===========================
   UTILITIES
=========================== */

.text-center{

    text-align:center;

}

.mt-0{

    margin-top:0;

}

.mb-0{

    margin-bottom:0;

}

.mb-2{

    margin-bottom:20px;

}

.mb-3{

    margin-bottom:30px;

}

.mb-4{

    margin-bottom:40px;

}

.mb-5{

    margin-bottom:60px;

}

/* ==========================================================================
   PROJECT EMMAUS
   LAYOUT SYSTEM
   ========================================================================== */

/* ===========================
   GRID SYSTEM
=========================== */

.em-grid{

    display:grid;

    gap:30px;

}

.em-grid-2{

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

}

.em-grid-3{

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

}

.em-grid-4{

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

}

/* ===========================
   FLEX HELPERS
=========================== */

.em-flex{

    display:flex;

}

.em-flex-center{

    display:flex;

    align-items:center;

    justify-content:center;

}

.em-flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.em-flex-column{

    display:flex;

    flex-direction:column;

}

/* ===========================
   WIDTHS
=========================== */

.w-100{

    width:100%;

}

.w-75{

    width:75%;

}

.w-50{

    width:50%;

}

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

.pt-1{padding-top:20px;}
.pt-2{padding-top:40px;}
.pt-3{padding-top:60px;}

.pb-1{padding-bottom:20px;}
.pb-2{padding-bottom:40px;}
.pb-3{padding-bottom:60px;}

.py-1{
    padding-top:20px;
    padding-bottom:20px;
}

.py-2{
    padding-top:40px;
    padding-bottom:40px;
}

.py-3{
    padding-top:60px;
    padding-bottom:60px;
}

/* ===========================
   BACKGROUNDS
=========================== */

.bg-white{

    background:#fff;

}

.bg-light{

    background:var(--background);

}

.bg-primary{

    background:var(--primary);

    color:#fff;

}

.bg-secondary{

    background:var(--secondary);

    color:#fff;

}

/* ===========================
   RADIUS
=========================== */

.radius{

    border-radius:var(--radius);

}

.radius-lg{

    border-radius:var(--radius-lg);

}

/* ===========================
   SHADOWS
=========================== */

.shadow{

    box-shadow:var(--shadow);

}

.shadow-hover:hover{

    box-shadow:var(--shadow-hover);

}

/* ===========================
   TRANSITIONS
=========================== */

.transition{

    transition:var(--transition);

}

/* ==========================================================================
   PROJECT EMMAUS
   GLOBAL COMPONENTS
   ========================================================================== */


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

.em-heading{

    text-align:center;

    max-width:760px;

    margin:0 auto 60px;

}

.em-heading small{

    display:inline-block;

    color:var(--secondary);

    text-transform:uppercase;

    letter-spacing:2px;

    font-weight:700;

    margin-bottom:12px;

}

.em-heading h2{

    margin-bottom:18px;

}

.em-heading p{

    color:var(--muted);

}


/* ===========================
   BADGES
=========================== */

.em-badge{

    display:inline-block;

    padding:8px 16px;

    background:#EEF4FF;

    color:var(--primary);

    border-radius:100px;

    font-size:.85rem;

    font-weight:600;

}


/* ===========================
   DIVIDERS
=========================== */

.em-divider{

    width:90px;

    height:4px;

    background:var(--secondary);

    border-radius:100px;

    margin:20px auto;

}


/* ===========================
   IMAGE STYLES
=========================== */

.em-image{

    overflow:hidden;

    border-radius:20px;

}

.em-image img{

    transition:.4s ease;

}

.em-image:hover img{

    transform:scale(1.05);

}


/* ===========================
   CTA BOX
=========================== */

.em-cta{

    background:var(--primary);

    color:#fff;

    border-radius:24px;

    padding:60px;

    text-align:center;

}

.em-cta h2{

    color:#fff;

}

.em-cta p{

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

}


/* ===========================
   ICON BOX
=========================== */

.em-icon-box{

    text-align:center;

    padding:35px;

}

.em-icon-circle{

    width:80px;

    height:80px;

    border-radius:50%;

    background:var(--background);

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 20px;

    font-size:28px;

    color:var(--primary);

}


/* ===========================
   HOVER LIFT
=========================== */

.hover-lift{

    transition:.3s ease;

}

.hover-lift:hover{

    transform:translateY(-8px);

}


/* ===========================
   TEXT COLORS
=========================== */

.text-primary{

    color:var(--primary);

}

.text-secondary{

    color:var(--secondary);

}

.text-muted{

    color:var(--muted);

}

.text-white{

    color:#fff;

}

/* ==========================================================================
   FORM ELEMENTS
   ========================================================================== */

input,
textarea,
select,
button{

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

}

/*==============================================================
FULL WIDTH INTERNAL HERO
==============================================================*/

.internal-hero{
    width:100vw;
    max-width:100%;
    margin:0;
}
/*==============================================================
EMMAUS LAYOUT
==============================================================*/

.wrap{

    width:min(1200px,92%);
    margin:0 auto;

}

.two-column{

    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:70px;
    align-items:center;

}

.section-heading{
    max-width:760px;
    margin:0 auto 70px;
    text-align:center;
}

.section-heading h2{
    margin:18px 0;
}

.cta-buttons{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

.btn-primary{
    display:inline-block;
    padding:16px 34px;
    background:#d4af37;
    color:#fff;
    border-radius:50px;
    text-decoration:none;
    font-weight:700;
}

.btn-outline{
    display:inline-block;
    padding:16px 34px;
    border:2px solid #fff;
    color:#fff;
    border-radius:50px;
    text-decoration:none;
    font-weight:700;
}

@media(max-width:992px){

    .two-column{

        grid-template-columns:1fr;
        gap:45px;

    }

}