/* ==========================================================
   SERENGETI HEROES
   WHY SERENGETI HEROES
   Luxury Editorial Section
==========================================================*/

:root{

    --acacia-green:#1C2B24;
    --khaki-sand:#EDE6D6;
    --savanna-gold:#B8863B;
    --olive-black:#1B211A;
    --sand:#F8F5EE;
    --body:#5F655F;

}

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

.why-serengeti-section{

    background:var(--sand);

    padding:130px 0;

    position:relative;

    overflow:hidden;

}

.why-serengeti-section::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:1px;

    height:90px;

    background:rgba(184,134,59,.25);

}

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

.why-serengeti-section .container{

    max-width:1320px;

    margin:auto;

    padding:0 40px;

}

/* ==========================================================
   HEADING
==========================================================*/

.why-heading{

    max-width:760px;

    margin:0 auto 90px;

    text-align:center;

}

.section-label{

    display:inline-block;

    margin-bottom:26px;

    font-family:'IBM Plex Mono',monospace;

    font-size:11px;

    letter-spacing:.35em;

    text-transform:uppercase;

    color:var(--savanna-gold);

}

.why-heading h2{

    margin:0;

    font-family:'Fraunces',serif;

    font-size:clamp(42px,5vw,68px);

    line-height:1.08;

    font-weight:500;

    color:var(--olive-black);

}

.why-heading h2 span{

    color:var(--savanna-gold);

    font-style:italic;

}

.why-heading p{

    margin:34px auto 0;

    max-width:720px;

    font-family:'Work Sans',sans-serif;

    font-size:18px;

    line-height:1.9;

    color:var(--body);

}

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

.why-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px 90px;

}

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

.why-card{

    position:relative;

    padding-top:40px;

    border-top:1px solid rgba(28,43,36,.12);

    transition:.45s ease;

}

.why-card:hover{

    transform:translateY(-8px);

}

.why-number{

    margin-bottom:24px;

    font-family:'Fraunces',serif;

    font-size:68px;

    font-weight:300;

    line-height:1;

    color:rgba(184,134,59,.18);

}

.why-card h3{

    margin:0 0 20px;

    font-family:'Fraunces',serif;

    font-size:30px;

    font-weight:500;

    color:var(--olive-black);

}

.why-card p{

    margin:0;

    font-family:'Work Sans',sans-serif;

    font-size:17px;

    line-height:1.85;

    color:var(--body);

}

/* ==========================================================
   PREMIUM HOVER
==========================================================*/

.why-card::after{

    content:"";

    position:absolute;

    left:0;

    top:-1px;

    width:0;

    height:2px;

    background:var(--savanna-gold);

    transition:.5s;

}

.why-card:hover::after{

    width:120px;

}

.why-card:hover .why-number{

    color:rgba(184,134,59,.34);

}

.why-card:hover h3{

    color:var(--savanna-gold);

}

/* ==========================================================
   SECTION DIVIDER
==========================================================*/

.why-serengeti-section::after{

    content:"";

    position:absolute;

    bottom:0;

    left:50%;

    transform:translateX(-50%);

    width:180px;

    height:1px;

    background:rgba(184,134,59,.28);

}

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

.why-heading{

    animation:fadeUp .9s ease both;

}

.why-card{

    animation:fadeUp .9s ease both;

}

.why-card:nth-child(2){

    animation-delay:.15s;

}

.why-card:nth-child(3){

    animation-delay:.3s;

}

.why-card:nth-child(4){

    animation-delay:.45s;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

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

@media(max-width:1100px){

    .why-grid{

        grid-template-columns:1fr;

        gap:55px;

    }

}

@media(max-width:768px){

    .why-serengeti-section{

        padding:90px 0;

    }

    .why-serengeti-section .container{

        padding:0 24px;

    }

    .why-heading{

        margin-bottom:60px;

    }

    .why-heading h2{

        font-size:42px;

    }

    .why-heading p{

        font-size:16px;

        line-height:1.8;

    }

    .why-number{

        font-size:54px;

    }

    .why-card h3{

        font-size:25px;

    }

}

@media(max-width:480px){

    .section-label{

        letter-spacing:.22em;

        font-size:10px;

    }

    .why-heading h2{

        font-size:36px;

    }

    .why-card{

        padding-top:28px;

    }

    .why-number{

        font-size:46px;

    }

    .why-card h3{

        font-size:22px;

    }

    .why-card p{

        font-size:15px;

    }

}