@import url('https://fonts.googleapis.com/css2?family=Bokor&family=Kantumruy+Pro:wght@300;400;500;700&display=swap');
*{
    
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Kantumruy Pro',sans-serif;
}

body{
background:#edf3fb;
display:flex;
height:100vh;
overflow:hidden;
}

/* Sidebar */

.sidebar{

width:260px;

background:linear-gradient(
180deg,
#041F4A,
#062C67,
#0A3F94
);

color:white;

display:flex;

flex-direction:column;

box-shadow:8px 0 25px rgba(0,0,0,.18);

}
.logo{

padding:30px;
text-align:center;

border-bottom:1px solid rgba(255,255,255,.15);

}

.logo h1{

font-size:40px;

}

.logo p{

font-size:13px;

opacity:.8;

}

.sidebar ul{

list-style:none;

padding:20px;

}

.sidebar li{

padding:15px;

margin-bottom:8px;

border-radius:12px;

cursor:pointer;

transition:.3s;

display:flex;

align-items:center;

gap:15px;

}

.sidebar li:hover{

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

}

.sidebar .active{

background:white;

color:#0b57d0;

font-weight:bold;

}

/* Main */

.main-content{

flex:1;

padding:35px;

}
.topbar{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

}

.menu-btn{

width:45px;

height:45px;

background:white;

border-radius:12px;

display:flex;

justify-content:center;

align-items:center;

box-shadow:0 10px 25px rgba(0,0,0,.08);

font-size:20px;

cursor:pointer;

}

.top-right{

display:flex;

align-items:center;

gap:20px;

}

.bell{

font-size:24px;

color:#0b57d0;

cursor:pointer;

}

.profile{

display:flex;

align-items:center;

gap:12px;

background:white;

padding:10px 18px;

border-radius:15px;

box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.profile img{

width:48px;

height:48px;

border-radius:50%;

}

.profile h4{

font-size:15px;

}

.profile small{

color:gray;

}

/* =========================
   DASHBOARD BANNER
   ========================= */

.banner{
    position:relative;
    width:100%;
    height:320px;
    margin-top:20px;

    border-radius:25px;
    overflow:hidden;

    display:flex;
    align-items:center;

    padding:35px 45px;
    box-sizing:border-box;

    background:#06356f;
    color:white;

    box-shadow:0 18px 40px rgba(0,0,0,.20);
}

/* =========================
   JUKI IMAGE
   ========================= */

.banner::before{
    content:"";

    position:absolute;
    top:0;
    right:0;
    bottom:0;

    width:62%;

    background-image:url("../images/Juki.png");

    background-repeat:no-repeat;
    background-position:center right;
    background-size:cover;

    z-index:0;
}


/* =========================
   BLUE OVERLAY
   ========================= */

.banner::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(3,35,105,.98) 0%,
            rgba(3,35,105,.92) 0%,
            rgba(3,35,105,.72) 0%,
            rgba(3,35,105,.35) 0%,
            rgba(3,35,105,.05) 5%,
            rgba(3,35,105,0) 30%
        );

    z-index:1;

    pointer-events:none;
}

/* =========================
   BANNER TEXT
   ========================= */

.banner-text{
    position:relative;

    z-index:3;

    width:52%;
    padding-left:20px;
    padding-right:20px;

    box-sizing:border-box;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
}


/* SMALL KHMER HEADER */

.banner-text h2{
    margin:0 0 8px 0;

    font-family:'Bokor',serif;
    font-size:24px;
    line-height:1.3;
    font-weight:400;

    color:#ffffff;

    text-shadow:0 3px 10px rgba(0,0,0,.45);
}


/* MAIN SN1 */

.banner-text h1{
    margin:0 0 14px 0;

    font-family:'Bokor',serif;
    font-size:50px;
    line-height:1.05;
    font-weight:400;

    color:#ffffff;

    text-shadow:0 4px 14px rgba(0,0,0,.50);
}


/* DESCRIPTION */

.banner-text p{
    margin:0 0 22px 0;

    max-width:520px;

    font-family:'Kantumruy Pro',sans-serif;
    font-size:15px;
    line-height:1.7;

    color:#eaf3ff;

    text-shadow:0 2px 8px rgba(0,0,0,.40);
}


/* SEARCH BOX */

.banner-text input{
    width:330px;
    max-width:100%;

    height:48px;

    padding:0 20px;

    box-sizing:border-box;

    border:none;
    outline:none;

    border-radius:25px;

    background:rgba(255,255,255,.94);

    color:#183b78;

    font-family:'Kantumruy Pro',sans-serif;
    font-size:15px;

    box-shadow:0 6px 20px rgba(0,0,0,.20);
}


.banner-text input::placeholder{
    color:#7b8ba8;
}


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

@media(max-width:900px){

    .banner{
        height:300px;
        padding:30px;
    }

    .banner::before{
        background-size:
            100% 100%,
            auto 100%;
    }

    .banner-text{
        width:65%;
        padding-left:10px;
    }

    .banner-text h1{
        font-size:48px;
    }

    .banner-text h2{
        font-size:24px;
    }
}


@media(max-width:600px){

    .banner{
        height:280px;
        padding:25px;
    }

    .banner::before{
        background-image:
            linear-gradient(
                90deg,
                rgba(3,35,105,.90),
                rgba(3,35,105,.45)
            ),
            url("../images/Juki.png");

        background-size:
            100% 100%,
            auto 100%;

        background-position:
            center,
            center right;
    }

    .banner-text{
        width:100%;
        padding:0;
    }

    .banner-text h1{
        font-size:42px;
    }

    .banner-text h2{
        font-size:22px;
    }

    .banner-text p{
        font-size:14px;
        line-height:1.6;
    }

    .banner-text input{
        width:100%;
    }
}
/* =========================
   FINAL BANNER FIX
   ========================= */

.banner::after{
    z-index:1;
    background:
        linear-gradient(
            90deg,
            rgba(3,35,105,.96) 0%,
            rgba(3,35,105,.88) 25%,
            rgba(3,35,105,.60) 45%,
            rgba(3,35,105,.22) 65%,
            rgba(3,35,105,0) 100%
        );
}

.banner-text{
    position:relative !important;
    z-index:10 !important;

    opacity:1 !important;

    width:52% !important;

    color:#ffffff !important;
}

.banner-text h1,
.banner-text h2,
.banner-text p{
    opacity:1 !important;
    visibility:visible !important;
    position:relative !important;
    z-index:11 !important;
}

.banner-text h1{
    color:#ffffff !important;
    font-size:50px !important;
    text-shadow:0 3px 12px rgba(0,0,0,.65) !important;
}

.banner-text h2{
    color:#ffffff !important;
    font-size:24px !important;
    text-shadow:0 2px 8px rgba(0,0,0,.60) !important;
}

.banner-text p{
    color:#ffffff !important;
    font-size:15px !important;
    text-shadow:0 2px 8px rgba(0,0,0,.55) !important;
}

.banner-text input{
    position:relative !important;
    z-index:11 !important;
    opacity:1 !important;
}
/* =========================
   FINAL BANNER - MATCH HTML
   ========================= */

.banner{
    position:relative;
    width:100%;
    height:320px;

    margin-top:20px;
    padding:0;

    border-radius:25px;
    overflow:hidden;

    display:flex;
    align-items:center;

    box-sizing:border-box;

    background-image:url("../images/Juki.png");
    background-repeat:no-repeat;
    background-position:center right;
    background-size:cover;

    box-shadow:0 18px 40px rgba(0,0,0,.20);
}


/* REMOVE OLD PSEUDO LAYERS */

.banner::before,
.banner::after{
    content:none !important;
}


/* =========================
   BLUE OVERLAY
   ========================= */

.banner-overlay{
    position:absolute;
    inset:0;

    z-index:1;

    background:
        linear-gradient(
            90deg,
            rgba(3,35,105,.98) 0%,
            rgba(3,35,105,.94) 25%,
            rgba(3,35,105,.78) 42%,
            rgba(3,35,105,.48) 58%,
            rgba(3,35,105,.18) 72%,
            rgba(3,35,105,0) 100%
        );

    pointer-events:none;
}


/* =========================
   TEXT - THIS MATCHES HTML
   ========================= */

.banner .left{
    position:relative;

    z-index:2;

    width:52%;

    padding-left:55px;
    padding-right:25px;

    box-sizing:border-box;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;

    color:#ffffff;
}


/* KHMER TITLE */

.banner .left h2{
    margin:0 0 12px 0;

    font-family:'Bokor',serif;
    font-size:30px;
    line-height:1.3;
    font-weight:400;

    color:#ffffff !important;

    opacity:1 !important;

    text-shadow:
        0 3px 12px rgba(0,0,0,.65);
}


/* DESCRIPTION */

.banner .left p{
    margin:0 0 22px 0;

    max-width:520px;

    font-family:'Kantumruy Pro',sans-serif;
    font-size:16px;
    line-height:1.7;

    color:#ffffff !important;

    opacity:1 !important;

    text-shadow:
        0 2px 8px rgba(0,0,0,.60);
}


/* SEARCH */

.banner .left input{
    width:330px;
    max-width:100%;
    height:48px;

    padding:0 20px;

    box-sizing:border-box;

    border:none;
    outline:none;
    border-radius:25px;

    background:rgba(255,255,255,.96);

    color:#183b78;

    font-family:'Kantumruy Pro',sans-serif;
    font-size:15px;

    box-shadow:
        0 6px 20px rgba(0,0,0,.22);
}


.banner .left input::placeholder{
    color:#7b8ba8;
}