/* =========================================================
   ULTRA PREMIUM TOP HEADER
   PUBLIC WEBSITE VERSION
========================================================= */

.header-topbar{

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #020617 0%,
            #0f172a 35%,
            #172554 75%,
            #1e3a8a 100%
        );

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

    backdrop-filter:blur(18px);

    z-index:99999;
}

/* =========================================================
   TOPBAR GLOW EFFECTS
========================================================= */

.header-topbar::before{

    content:'';

    position:absolute;

    top:-160px;
    right:-120px;

    width:360px;
    height:360px;

    border-radius:50%;

    background:
        radial-gradient(
            rgba(59,130,246,.20),
            transparent 70%
        );

    pointer-events:none;
}

.header-topbar::after{

    content:'';

    position:absolute;

    bottom:-180px;
    left:-120px;

    width:300px;
    height:300px;

    border-radius:50%;

    background:
        radial-gradient(
            rgba(14,165,233,.14),
            transparent 70%
        );

    pointer-events:none;
}

/* =========================================================
   WRAPPER
========================================================= */

.topbar-wrapper{

    position:relative;

    z-index:5;

    min-height:54px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:10px 0;
}

/* =========================================================
   LEFT CONTACT
========================================================= */

.topbar-contact{

    display:flex;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;
}

/* =========================================================
   CONTACT ITEMS
========================================================= */

.topbar-link,
.topbar-time{

    position:relative;

    display:flex;

    align-items:center;

    gap:9px;

    text-decoration:none;

    color:rgba(255,255,255,.86);

    font-size:13px;

    font-weight:600;

    letter-spacing:.2px;

    transition:.35s ease;

    padding:7px 12px;

    border-radius:12px;

    overflow:hidden;
}

/* HOVER LIGHT */

.topbar-link::before,
.topbar-time::before{

    content:'';

    position:absolute;

    top:0;
    left:-100%;

    width:100%;
    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.08),
            transparent
        );

    transition:.55s ease;
}

.topbar-link:hover::before,
.topbar-time:hover::before{

    left:100%;
}

/* HOVER */

.topbar-link:hover,
.topbar-time:hover{

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

    color:#ffffff;

    transform:translateY(-2px);
}

/* =========================================================
   ICONS
========================================================= */

.topbar-link i,
.topbar-time i{

    width:26px;
    height:26px;

    border-radius:8px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
        rgba(96,165,250,.15);

    color:#60a5fa;

    font-size:12px;

    flex-shrink:0;
}

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

.topbar-right{

    display:flex;

    align-items:center;

    gap:16px;
}

/* =========================================================
   SOCIAL LINKS
========================================================= */

.topbar-social{

    display:flex;

    align-items:center;

    gap:10px;
}

.topbar-social a{

    position:relative;

    width:34px;
    height:34px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    text-decoration:none;

    color:#ffffff;

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

    border:
        1px solid rgba(255,255,255,.05);

    transition:.35s ease;
}

/* LIGHT */

.topbar-social a::before{

    content:'';

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.12),
            transparent
        );

    opacity:0;

    transition:.35s ease;
}

.topbar-social a:hover::before{

    opacity:1;
}

/* HOVER */

.topbar-social a:hover{

    transform:
        translateY(-3px)
        scale(1.05);

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        );

    box-shadow:
        0 12px 25px rgba(37,99,235,.30);
}

/* =========================================================
   ADMISSION BUTTON
========================================================= */

.topbar-admission-btn{

    position:relative;

    height:38px;

    padding:0 18px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    overflow:hidden;

    text-decoration:none;

    color:#ffffff;

    font-size:13px;

    font-weight:700;

    letter-spacing:.2px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        );

    box-shadow:
        0 12px 28px rgba(37,99,235,.32);

    transition:.35s ease;
}

/* BUTTON LIGHT */

.topbar-admission-btn::before{

    content:'';

    position:absolute;

    top:0;
    left:-100%;

    width:100%;
    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.18),
            transparent
        );

    transition:.6s ease;
}

.topbar-admission-btn:hover::before{

    left:100%;
}

/* HOVER */

.topbar-admission-btn:hover{

    transform:
        translateY(-3px)
        scale(1.02);

    color:#ffffff;

    box-shadow:
        0 16px 35px rgba(37,99,235,.40);
}

/* =========================================================
   LARGE DESKTOP
========================================================= */

@media(min-width:1400px){

    .topbar-wrapper{

        min-height:58px;
    }

    .topbar-link,
    .topbar-time{

        font-size:14px;
    }
}

/* =========================================================
   LAPTOP
========================================================= */

@media(max-width:1200px){

    .topbar-contact{

        gap:12px;
    }

    .topbar-link,
    .topbar-time{

        font-size:12px;

        padding:6px 10px;
    }

    .topbar-admission-btn{

        padding:0 16px;

        font-size:12px;
    }
}

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

@media(max-width:991px){

    .header-topbar{

        padding:12px 0;
    }

    .topbar-wrapper{

        flex-direction:column;

        align-items:center;

        justify-content:center;

        gap:16px;

        text-align:center;
    }

    .topbar-contact{

        justify-content:center;

        gap:10px;
    }

    .topbar-right{

        justify-content:center;

        flex-wrap:wrap;

        gap:14px;
    }

    .topbar-link,
    .topbar-time{

        justify-content:center;
    }
}

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

@media(max-width:576px){

    .header-topbar{

        padding:14px 0;
    }

    .topbar-wrapper{

        gap:14px;
    }

    /* CONTACT */

    .topbar-contact{

        width:100%;

        flex-direction:column;

        gap:10px;
    }

    .topbar-link,
    .topbar-time{

        width:100%;

        justify-content:center;

        font-size:12px;

        padding:10px 14px;

        border-radius:14px;

        background:
            rgba(255,255,255,.04);
    }

    /* SOCIAL */

    .topbar-social{

        gap:8px;
    }

    .topbar-social a{

        width:36px;
        height:36px;

        border-radius:12px;
    }

    /* BUTTON */

    .topbar-admission-btn{

        width:100%;

        min-width:240px;

        height:44px;

        border-radius:16px;

        font-size:13px;
    }
}