/*==========================================
KALYANI FOUNDATION
LAYOUT CSS
==========================================*/

/* ---------- TOP BAR ---------- */

.kf-topbar{
    background:var(--primary);
    color:#fff;
    height:42px;
    display:flex;
    align-items:center;
    font-size:14px;
    position:relative;
    z-index:1000;
}

.kf-topbar .kf-container{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.kf-top-left,
.kf-top-right{
    display:flex;
    align-items:center;
    gap:25px;
}

.kf-topbar i{
    color:var(--secondary);
    margin-right:8px;
}

.kf-topbar a{
    color:#fff;
}

.kf-topbar a:hover{
    color:var(--secondary);
}

/* ---------- HEADER ---------- */

.kf-header{

    position:sticky;

    top:0;

    left:0;

    width:100%;

    background:#ffffff;

    z-index:9999;

    transition:all .35s ease;

}

.kf-header.scrolled{

    box-shadow:0 12px 35px rgba(0,0,0,.08);

    backdrop-filter:blur(12px);

}

.kf-header.scrolled{

    box-shadow:var(--shadow);

}

/* ---------- NAVIGATION ---------- */

.kf-navbar{

    min-height:88px;

    display:flex;

    align-items:center;

}

.kf-navbar .kf-container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:100%;

}

.kf-logo{

    display:flex;

    align-items:center;

}

.kf-logo img{

    height:68px;

    width:auto;

    display:block;

    transition:transform .35s ease;

}

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

.kf-menu{

    display:flex;

    align-items:center;

    gap:38px;

}

.kf-menu li{

    position:relative;

}

.kf-menu a{

    font-family:var(--heading);

    font-weight:600;

    color:var(--primary);

    font-size:15px;

    transition:.3s;

}

.kf-menu a:hover{

    color:var(--secondary);

}

/* underline animation */

.kf-menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--secondary);

    transition:.3s;

}

.kf-menu a:hover::after{

    width:100%;

}

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

.kf-nav-right{

    display:flex;

    align-items:center;

    gap:20px;

}

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

.kf-mobile-toggle{

    display:none;

    width:48px;

    height:48px;

    border-radius:50%;

    border:none;

    background:#F5F7FA;

    cursor:pointer;

    font-size:20px;

    color:var(--primary);

}

.kf-mobile-toggle:hover{

    background:var(--secondary);

    color:white;

}

/* ---------- SECTION ---------- */

.kf-section{

    padding:100px 0;

}

/* ---------- GRID ---------- */

.kf-grid{

    display:grid;

    gap:40px;

}

.kf-grid-2{

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

}

.kf-grid-3{

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

}

.kf-grid-4{

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

}

/* ---------- FOOTER ---------- */

.kf-footer{

    background:var(--primary);

    color:white;

    padding:80px 0 30px;

}