.kumaon-hero{
    height:100vh;
    background:url("images/kumaon_region.jpg") center/cover;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
}

.hero-content{
    position:relative;
    color:#fff;
    text-align:center;
    z-index:2;
}

.hero-content h1{
    font-size:65px;
    margin:15px 0;
}

.hero-content p{
    font-size:20px;
    max-width:700px;
}

.treks{
    padding:90px 8%;
}

.trek-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:30px;
}

.trek-card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    text-decoration:none;
    color:#222;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.3s;
}

.trek-card:hover{
    transform:translateY(-10px);
}

.trek-card img{
    width:100%;
    height:240px;
    object-fit:cover;
}

.trek-card h3{
    padding:20px;
    font-size:24px;
}
/* =====================================================
   KUMAON PAGE - FINAL DESIGN FIX
===================================================== */


/* ================= PAGE ================= */

.kumaon-page{
    background:#f8fafc !important;
    color:#111827 !important;
}


/* =====================================================
   NAVBAR
===================================================== */

.kumaon-page .navbar{
    position:absolute !important;

    top:20px !important;
    left:50% !important;
    transform:translateX(-50%) !important;

    width:calc(100% - 90px) !important;
    max-width:1480px !important;

    height:78px !important;

    padding:0 18px 0 28px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    z-index:1000 !important;

    background:rgba(13,24,43,.68) !important;

    border:1px solid rgba(255,255,255,.15) !important;
    border-radius:40px !important;

    backdrop-filter:blur(18px) !important;
    -webkit-backdrop-filter:blur(18px) !important;

    box-shadow:0 12px 35px rgba(0,0,0,.25) !important;

    box-sizing:border-box !important;
}


/* ================= LOGO ================= */

.kumaon-page .navbar .logo{

    display:flex !important;
    align-items:center !important;
    gap:9px !important;

    flex:0 0 270px !important;
    width:270px !important;

    color:#fff !important;

    text-decoration:none !important;

    font-size:25px !important;
    font-weight:800 !important;

    white-space:nowrap !important;
}

.kumaon-page .logo-plane{
    font-size:24px !important;
}


/* ================= MAIN NAV ================= */

.kumaon-page .main-nav{

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    gap:4px !important;

    flex:1 1 auto !important;
    min-width:0 !important;
}

.kumaon-page .main-nav .nav-item{

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:auto !important;
    min-width:auto !important;

    height:48px !important;

    padding:0 12px !important;

    color:#fff !important;

    text-decoration:none !important;

    font-size:15px !important;
    font-weight:700 !important;

    white-space:nowrap !important;

    border-radius:25px !important;

    transition:.25s ease !important;
}

.kumaon-page .main-nav .nav-item:hover{
    background:rgba(255,255,255,.12) !important;
}

.kumaon-page .main-nav .home-link{
    background:#2563eb !important;
}


/* ================= RIGHT SIDE ================= */

.kumaon-page .right-nav{

    display:flex !important;
    align-items:center !important;

    gap:12px !important;

    flex:0 0 auto !important;

    margin-left:10px !important;
}


/* ================= NOTIFICATIONS ================= */

.kumaon-page .notification-link{

    display:flex !important;
    align-items:center !important;

    position:relative !important;

    padding:0 10px !important;

    color:#fff !important;

    text-decoration:none !important;

    font-size:15px !important;
    font-weight:600 !important;

    white-space:nowrap !important;
}


/* ================= LOGOUT ================= */

.kumaon-page .logout-btn{

    width:145px !important;
    min-width:145px !important;

    height:50px !important;

    padding:0 !important;

    border:none !important;
    border-radius:18px !important;

    background:#ff4148 !important;

    color:#fff !important;

    font-family:inherit !important;

    font-size:16px !important;
    font-weight:700 !important;

    cursor:pointer !important;
}


/* ================= HAMBURGER ================= */

.kumaon-page .menu-toggle{

    width:58px !important;
    min-width:58px !important;

    height:58px !important;

    display:flex !important;

    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;

    gap:6px !important;

    padding:0 !important;

    background:rgba(255,255,255,.03) !important;

    border:1px solid rgba(255,255,255,.22) !important;

    border-radius:18px !important;

    cursor:pointer !important;
}

.kumaon-page .menu-toggle span{

    display:block !important;

    width:29px !important;
    height:4px !important;

    background:#fff !important;

    border-radius:5px !important;
}


/* =====================================================
   KUMAON HERO - FIX DASHBOARD.CSS CONFLICT
===================================================== */

.kumaon-page .kumaon-hero{

    height:100vh !important;

    min-height:700px !important;

    background:url("images/kumaon_region.jpg") center center/cover no-repeat !important;

    position:relative !important;

    display:flex !important;

    justify-content:center !important;
    align-items:center !important;

    text-align:center !important;

    margin:0 !important;
}


/* DARK OVERLAY */

.kumaon-page .kumaon-hero .hero-overlay{

    position:absolute !important;

    inset:0 !important;

    background:rgba(0,0,0,.45) !important;

    z-index:1 !important;
}


/* HERO CONTENT */

.kumaon-page .kumaon-hero .hero-content{

    position:relative !important;

    z-index:2 !important;

    width:100% !important;
    max-width:900px !important;

    padding:30px !important;

    margin:80px auto 0 !important;

    color:#fff !important;

    text-align:center !important;

    background:transparent !important;

    box-shadow:none !important;

    border:none !important;
}


/* SMALL TITLE */

.kumaon-page .kumaon-hero .hero-content > span{

    display:inline-block !important;

    padding:10px 20px !important;

    margin-bottom:15px !important;

    border-radius:30px !important;

    background:rgba(255,255,255,.15) !important;

    backdrop-filter:blur(10px) !important;

    color:#fff !important;

    font-size:14px !important;

    font-weight:600 !important;

    letter-spacing:2px !important;

    line-height:1.4 !important;
}


/* MAIN HEADING */

.kumaon-page .kumaon-hero .hero-content h1{

    display:block !important;

    width:auto !important;
    max-width:none !important;

    margin:15px 0 20px !important;

    padding:0 !important;

    background:transparent !important;

    color:#fff !important;

    font-size:65px !important;

    line-height:1.1 !important;

    font-weight:800 !important;

    letter-spacing:1px !important;

    white-space:normal !important;

    text-shadow:0 4px 20px rgba(0,0,0,.35) !important;
}


/* DESCRIPTION */

.kumaon-page .kumaon-hero .hero-content p{

    display:block !important;

    max-width:700px !important;

    margin:0 auto !important;

    padding:0 !important;

    background:transparent !important;

    color:#fff !important;

    font-size:20px !important;

    line-height:1.7 !important;

    font-weight:400 !important;
}


/* =====================================================
   TREKS
===================================================== */

.kumaon-page .treks{

    padding:100px 8% !important;

    background:#f8fafc !important;

    color:#111827 !important;
}


.kumaon-page .treks .section-title{

    text-align:center !important;

    margin-bottom:55px !important;
}


.kumaon-page .treks .section-title span{

    display:block !important;

    margin-bottom:15px !important;

    color:#ff6b35 !important;

    font-size:15px !important;

    font-weight:700 !important;

    letter-spacing:4px !important;
}


.kumaon-page .treks .section-title h2{

    margin:0 !important;

    color:#111827 !important;

    font-size:48px !important;

    font-weight:800 !important;
}


.kumaon-page .trek-grid{

    display:grid !important;

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

    gap:30px !important;
}


.kumaon-page .trek-card{

    display:block !important;

    background:#fff !important;

    border-radius:20px !important;

    overflow:hidden !important;

    text-decoration:none !important;

    color:#111827 !important;

    box-shadow:0 10px 30px rgba(0,0,0,.08) !important;

    transition:.3s ease !important;
}


.kumaon-page .trek-card:hover{

    transform:translateY(-8px) !important;

    box-shadow:0 18px 40px rgba(0,0,0,.14) !important;
}


.kumaon-page .trek-card img{

    display:block !important;

    width:100% !important;

    height:240px !important;

    object-fit:cover !important;
}


.kumaon-page .trek-card h3{

    margin:0 !important;

    padding:22px !important;

    background:#fff !important;

    color:#111827 !important;

    font-size:22px !important;

    font-weight:700 !important;
}


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

@media(max-width:1100px){

    .kumaon-page .navbar{

        width:calc(100% - 40px) !important;

    }

    .kumaon-page .navbar .logo{

        flex-basis:220px !important;
        width:220px !important;

        font-size:21px !important;
    }

    .kumaon-page .main-nav .nav-item{

        padding:0 8px !important;

        font-size:13px !important;
    }

    .kumaon-page .notification-link{

        font-size:13px !important;
    }

    .kumaon-page .logout-btn{

        width:120px !important;
        min-width:120px !important;
    }

    .kumaon-page .trek-grid{

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


@media(max-width:900px){

    .kumaon-page .navbar{

        top:12px !important;

        width:calc(100% - 24px) !important;

        height:64px !important;

        padding:0 10px 0 18px !important;
    }

    .kumaon-page .navbar .logo{

        flex:1 !important;
        width:auto !important;

        font-size:18px !important;
    }

    .kumaon-page .main-nav{

        display:none !important;
    }

    .kumaon-page .notification-link{

        display:none !important;
    }

    .kumaon-page .logout-btn{

        width:auto !important;
        min-width:auto !important;

        height:44px !important;

        padding:0 18px !important;

        font-size:13px !important;
    }

    .kumaon-page .menu-toggle{

        width:50px !important;
        min-width:50px !important;

        height:50px !important;
    }

    .kumaon-page .kumaon-hero .hero-content h1{

        font-size:48px !important;
    }
}


@media(max-width:600px){

    .kumaon-page .kumaon-hero .hero-content{

        padding:20px !important;
    }

    .kumaon-page .kumaon-hero .hero-content h1{

        font-size:38px !important;
    }

    .kumaon-page .kumaon-hero .hero-content p{

        font-size:16px !important;
    }

    .kumaon-page .treks{

        padding:70px 18px !important;
    }

    .kumaon-page .treks .section-title h2{

        font-size:32px !important;
    }

    .kumaon-page .trek-grid{

        grid-template-columns:1fr !important;

        gap:20px !important;
    }
}