/* =========================
    TOP HEADER
    ========================= */
:root{
  --top-header-height:80px;
  --navbar-height:95px;
}
    .top-header{

        background:#f8fafc;

        padding:12px 40px;

        display:flex;

        justify-content:space-between;

        align-items:center;

        flex-wrap:wrap;

        gap:20px;

        border-bottom:1px solid #e5e7eb;
    }

    /* LEFT SIDE */



    .info-pill{

        background:#fff3dc;

        color:#114b5f;

        padding:10px 20px;

        border-radius:50px;

        font-size:15px;

        font-weight:600;

        box-shadow:
        0 5px 15px rgba(0,0,0,.05);
    }

    /* RIGHT SIDE */

    .top-right{

        display:flex;

        align-items:center;

        gap:15px;
    }

    /* ADMISSION BUTTON */

    .admission-btn{

        text-decoration:none;

        color:#fff;

        font-weight:700;

        padding:14px 28px;

        border-radius:50px;

        background:
        linear-gradient(
        135deg,
        #4361ee,
        #ff006e
        );

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

        transition:.35s;
    }

    .admission-btn:hover{

        transform:translateY(-3px);
    }

    /* SOCIAL */

    .social-links{

        display:flex;

        gap:12px;
    }

    .social-links a{

        width:54px;
        height:54px;

        border-radius:50%;

        display:flex;

        align-items:center;

        justify-content:center;

        color:#fff;

        text-decoration:none;

        font-size:22px;

        transition:.35s;
    }

    .social-links a:hover{

        transform:translateY(-5px);
    }

    .insta{
        background:linear-gradient(135deg,#ff006e,#8338ec);
    }

    .facebook{
        background:#1877f2;
    }

    .youtube{
        background:#ff0000;
    }

    .whatsapp{
        background:#25d366;
    }

    /* APPLY BUTTON */

    .apply-btn{

        text-decoration:none;

        color:#fff;

        font-weight:700;

        padding:14px 32px;

        border-radius:50px;

        background:
        linear-gradient(
        135deg,
        #4f46e5,
        #ec4899
        );

        box-shadow:
        0 10px 25px rgba(79,70,229,.25);

        transition:.35s;
    }

    .apply-btn:hover{

        transform:translateY(-3px);
    }

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

    @media(max-width:1200px){

    
    
        .top-right{

            justify-content:center;

            flex-wrap:wrap;
        }
    }

    @media(max-width:768px){

        .top-header{

            padding:15px;
        }

        .info-pill{

            font-size:13px;

            padding:8px 15px;
        }

        .social-links a{

            width:45px;
            height:45px;

            font-size:18px;
        }

        .admission-btn,
        .apply-btn{

            padding:12px 22px;

            font-size:14px;
        }
    }


    .top-header{
        position:fixed;

        top:0;
        left:0;

        width:100%;

        z-index:1000;

        transition:
        transform .4s ease,
        opacity .4s ease;
    }

    @media(max-width:768px){

        .top-header{

            padding:8px 10px;

            display:flex;

            flex-direction:column;

            gap:10px;
        }

        /* ROW 1 */

        .top-notice{

            width:100%;

            height:38px;
        }

        .notice-track p{

            font-size:12px;
        }

        /* ROW 2 */

        .top-right{

            width:100%;

            display:grid;

            grid-template-columns:
            1fr 1fr;

            gap:10px;
        }

        .admission-btn,
        .apply-btn{

            width:100%;

            text-align:center;

            padding:10px;

            font-size:13px;

            border-radius:12px;
        }

        /* ROW 3 */

        .social-links{

            grid-column:1 / -1;

            display:grid;

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

            gap:10px;
        }

        .social-links a{

            width:42px;
            height:42px;

            margin:auto;

            font-size:16px;
        }

    }

    .top-header{

        display:flex;

        align-items:center;

        justify-content:space-between;

        gap:20px;
    }

    .top-notice{

        flex:1;
    }

    .top-right{

        display:flex;

        align-items:center;

        gap:15px;
    }

    .top-notice{

    flex:1;

    height:52px;

    overflow:hidden;

    background:#fff3dc;

    border-radius:50px;

    display:flex;

    align-items:center;
}

    .notice-track{

    display:flex;

    align-items:center;

    white-space:nowrap;

    width:max-content;

    animation: marquee 25s linear infinite;
}

  .notice-track span{

    display:flex;

    align-items:center;

    color:#114b5f;

    font-size:15px;

    font-weight:600;

    padding-right:80px;
}


  @keyframes marquee{

    0%{
        transform:translateX(0);
    }

    100%{
        transform:translateX(-50%);
    }

}