/* ==========================================================
   KLI THEME
   APP.CSS v2.0
   ========================================================== */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    background:#ffffff;
    color:#111827;
    line-height:1.6;
    overflow-x:hidden;
}

a{
    color:inherit;
    text-decoration:none;
}

img{
    display:block;
    max-width:100%;
}

.kli-container{
    width:min(1280px,92%);
    margin:0 auto;
}

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

.kli-header{

    position:sticky;
    top:0;
    z-index:999;

    background:#fff;

    border-bottom:1px solid #ececec;

}

.kli-header .kli-container{

    display:grid;

    grid-template-columns:360px 1fr 250px;

    align-items:center;

    height:100px;

}

/* ---------- LOGO ---------- */

.kli-logo{

    display:flex;
    align-items:center;

}

.kli-logo img{

    height:72px;

    width:auto;

    max-width:none;

}

/* ---------- MENU ---------- */

.kli-nav{

    display:flex;

    justify-content:center;

    gap:52px;

}

.kli-nav a{

    font-size:18px;

    font-weight:600;

    color:#111827;

    transition:.25s;

}

.kli-nav a:hover{

    color:#e60012;

}

/* ---------- BUTTON ---------- */

.kli-btn-wa{

    justify-self:end;

    background:#e60012;

    color:#fff;

    padding:16px 30px;

    border-radius:14px;

    font-size:17px;

    font-weight:700;

    transition:.25s;

}

.kli-btn-wa:hover{

    background:#c60010;

}

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

.hero{

    padding:70px 0 40px;

    background:#fff;

}

.hero-grid{

    display:grid;

    grid-template-columns:1.05fr .95fr;

    gap:70px;

    align-items:center;

}

/* ---------- LEFT ---------- */

.hero-badge{

    display:inline-block;

    background:#fff1f2;

    color:#e60012;

    padding:12px 22px;

    border-radius:999px;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:28px;

}

.hero h1{

    font-size:74px;

    line-height:1.03;

    font-weight:800;

    margin-bottom:26px;

    color:#e60012;

}

.hero h1 span{

    color:#111827;

}

.hero p{

    font-size:24px;

    color:#4b5563;

    max-width:650px;

    margin-bottom:40px;

}

.hero-buttons{

    display:flex;

    gap:18px;

}

.hero-btn-primary{

    background:#e60012;

    color:#fff;

    padding:18px 34px;

    border-radius:14px;

    font-size:19px;

    font-weight:700;

}

.hero-btn-secondary{

    background:#fff;

    border:1px solid #e5e7eb;

    color:#111827;

    padding:18px 34px;

    border-radius:14px;

    font-size:19px;

    font-weight:700;

}

/* ---------- RIGHT ---------- */

.hero-right{

    display:flex;

    justify-content:flex-end;

    align-items:center;

}

.hero-right img{

    width:100%;

    max-width:720px;

}

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

@media(max-width:1100px){

.kli-header .kli-container{

    grid-template-columns:280px 1fr 220px;

}

.kli-logo img{

    height:60px;

}

.hero h1{

    font-size:58px;

}

.hero p{

    font-size:20px;

}

}

@media(max-width:992px){

.kli-header .kli-container{

    display:flex;

    justify-content:space-between;

    height:82px;

}

.kli-nav{

    display:none;

}

.kli-logo img{

    height:52px;

}

.kli-btn-wa{

    padding:12px 18px;

    font-size:15px;

}

.hero{

    padding:50px 0;

}

.hero-grid{

    grid-template-columns:1fr;

    gap:40px;

}

.hero h1{

    font-size:46px;

}

.hero p{

    font-size:18px;

}

.hero-buttons{

    flex-direction:column;

}

.hero-right{

    justify-content:center;

}

.hero-right img{

    max-width:500px;

}

}

@media(max-width:576px){

.hero h1{

    font-size:38px;

}

.hero-badge{

    font-size:12px;

}

.hero-btn-primary,
.hero-btn-secondary{

    width:100%;
    text-align:center;

}

}