/* ==========================================
   KEDTL HERO SECTION
========================================== */


.kedtl-hero{

    min-height:90vh;

    min-height:90svh;


    background:

    linear-gradient(
        rgba(11,31,58,.75),
        rgba(11,31,58,.75)
    ),

    url("../images/hero.jpg");


    background-size:cover;

    background-position:center;


    display:flex;

    align-items:center;

    padding:100px 0 60px;

}



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


.hero-content{

    position:relative;

    z-index:2;

}





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


.hero-badge{

    background:var(--kedtl-gold);

    color:var(--kedtl-navy);


    padding:8px 18px;


    border-radius:30px;


    font-weight:700;


    font-size:14px;


    display:inline-block;

}





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


.kedtl-hero h1{


    font-size:clamp(38px,5vw,60px);


    font-weight:800;


    line-height:1.15;


    margin-top:25px;


    margin-bottom:20px;


}




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


.kedtl-hero p{


    font-size:20px;


    line-height:1.7;


    max-width:650px;


    margin-bottom:0;


}







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


.hero-buttons{


    margin-top:40px;


}



.hero-buttons a{


    margin-right:15px;


}







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


.hero-dashboard{


    display:grid;


    gap:20px;


}







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


.impact-card{


    background:white;


    color:var(--kedtl-navy);


    padding:30px;


    border-radius:25px;


    text-align:center;


    box-shadow:

    0 20px 40px rgba(0,0,0,.2);


}




.impact-card h3{


    font-size:45px;


    font-weight:800;


    color:var(--kedtl-green);


}







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


@media(max-width:991px){


    .kedtl-hero{

        min-height:auto;

        padding-top:100px;

        padding-bottom:50px;

        align-items:flex-start;

    }



    .kedtl-hero h1{

        font-size:clamp(34px,7vw,45px);

        line-height:1.2;

        margin-top:20px;

    }



    .kedtl-hero p{

        font-size:18px;

        line-height:1.6;

    }



    .hero-buttons{

        margin-top:30px;

    }



    .hero-dashboard{

        margin-top:45px;

    }



    .impact-card{

        padding:25px;

    }



    .impact-card h3{

        font-size:38px;

    }


}







/* ==========================================
   MOBILE DEVICES
========================================== */


@media(max-width:576px){


    .kedtl-hero{

        padding-top:110px;

        padding-bottom:40px;

    }



    .kedtl-hero h1{

        font-size:32px;

        line-height:1.25;

    }



    .kedtl-hero p{

        font-size:16px;

        line-height:1.6;

    }



    .hero-buttons a{

        width:100%;

        margin-right:0;

        margin-bottom:15px;

    }



    .hero-dashboard{

        margin-top:35px;

    }


}







/* ==========================================
   EXTRA SMALL DEVICES
========================================== */


@media(max-width:360px){


    .kedtl-hero{

        padding-top:100px;

    }



    .kedtl-hero h1{

        font-size:29px;

    }


}