/*=====================================================================
    Eagles College of Nursing Sciences
    Main Stylesheet
    Version: 1.0
    Author: Exelsor Projects Ltd.
======================================================================*/


/*=====================================================================
    GOOGLE FONTS
======================================================================*/

:root{

    /* Brand Colours */

    --primary:#041A57;
    --primary-dark:#153D78;
    --primary-light:#4E8FDF;

    --gold:#C9A227;
    --gold-light:#E8C85D;

    --success:#1FA971;
    --danger:#D64545;
    --warning:#F7A928;

    --white:#ffffff;
    --offwhite:#F8FAFC;
    --light:#EEF3F8;

    --text:#1F2937;
    --text-light:#6B7280;

    --border:#E4E8EE;
	
	--hero-accent:#1F5FAF;
    --hero-glow:rgba(31,95,175,.30);

    /* Layout */

    --container:1320px;

    --radius-xs:8px;
    --radius-sm:12px;
    --radius:18px;
    --radius-lg:28px;
    --radius-xl:40px;

    /* Shadows */

    --shadow-xs:0 2px 8px rgba(0,0,0,.04);

    --shadow-sm:0 8px 30px rgba(0,0,0,.07);

    --shadow:0 20px 60px rgba(0,0,0,.10);

    --shadow-lg:0 40px 80px rgba(0,0,0,.15);

    /* Transition */

    --transition:.35s ease;
	

}



/*=====================================================================
    RESET
======================================================================*/

*,
*::before,
*::after{

    margin:0;
    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Inter',sans-serif;

    font-size:16px;

    line-height:1.7;

    color:var(--text);

    background:#fff;

    overflow-x:hidden;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

}


/*=====================================================================
    IMAGES
======================================================================*/

img{

    display:block;

    max-width:100%;

    height:auto;

}


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

a{

    text-decoration:none;

    color:inherit;

    transition:var(--transition);

}


/*=====================================================================
    LISTS
======================================================================*/

ul{

    list-style:none;

    margin:0;

    padding:0;

}


/*=====================================================================
    BUTTONS
======================================================================*/

button{

    border:none;

    outline:none;

    cursor:pointer;

    background:none;

    font-family:inherit;

}

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 34px;

    border-radius:999px;

    font-weight:600;

    transition:var(--transition);

}

.btn-primary-custom{

    background:var(--primary) !important;

    color:#fff;

    box-shadow:var(--shadow-sm);

}

.btn-primary-custom:hover{

    background:var(--primary-dark) !important;

    color:#fff;

    transform:translateY(-3px);

}

.btn-outline-custom{

    border:2px solid rgba(255,255,255,.6);

    color:#fff;

}

.btn-outline-custom:hover{

    background:#fff;

    color:var(--primary);

}

/*=========================================
            NEWS BUTTON
=========================================*/

.news-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:14px 34px;
    background:#fff;
    color:var(--primary);
    border:2px solid var(--primary);
    border-radius:50px;
    font-size:15px;
    font-weight:600;
    text-decoration:none;
    line-height:1;
    box-shadow:0 12px 30px rgba(31,95,175,.12);
    transition:all .35s ease;
}

.news-btn i{
    font-size:14px;
    transition:transform .35s ease;
}

.news-btn:hover{
    background:var(--primary);
    color:#fff;
    border-color:var(--primary);
    transform:translateY(-3px);
    box-shadow:0 18px 40px rgba(31,95,175,.25);
}

.news-btn:hover i{
    transform:translateX(4px);
}
/*=====================================================================
    TYPOGRAPHY
======================================================================*/

h1,
h2,
h3,
h4,
h5,
h6{

    font-family:'Montserrat',sans-serif;

    color:var(--text);

    line-height:1.2;

    margin-bottom:18px;

}

h1{

    font-size:clamp(42px,6vw,72px);

    font-weight:800;

}

h2{

    font-size:clamp(32px,4vw,50px);

    font-weight:700;

}

h3{

    font-size:30px;

}

h4{

    font-size:24px;

}

h5{

    font-size:20px;

}

p{

    color:var(--text-light);

    margin-bottom:20px;

}


/*=====================================================================
    SECTIONS
======================================================================*/

section{

    position:relative;

}

.section-padding{

    padding:100px 0;

}

.bg-light{

    background:var(--offwhite);

}


/*=====================================================================
    UTILITIES
======================================================================*/

.text-primary{

    color:var(--primary)!important;

}

.text-gold{

    color:var(--gold)!important;

}

.rounded-xl{

    border-radius:var(--radius-xl);

}

.shadow-custom{

    box-shadow:var(--shadow);

}

.overflow-hidden{

    overflow:hidden;

}


/*=====================================================================
    LOADER / SELECTION
======================================================================*/

::selection{

    background:var(--primary);

    color:#fff;

}

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#EDF2F7;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-dark);

}
/*=====================================================================
    TOP ANNOUNCEMENT BAR
======================================================================*/

.topbar{

    background:linear-gradient(90deg,var(--primary-dark),var(--primary));

    color:#fff;

    font-size:14px;

    position:relative;

    z-index:1050;

}

.topbar .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:46px;

}

.topbar-wrapper{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.topbar-left,
.topbar-right{

    display:flex;

    align-items:center;

    gap:22px;

}

.topbar a{

    color:#fff;

    opacity:.95;

}

.topbar a:hover{

    opacity:1;

    color:var(--gold-light);

}

.topbar i{

    margin-right:6px;

}


/*=====================================================================
    HEADER
======================================================================*/

.site-header{

    position:sticky;

    top:0;

    left:0;

    width:100%;

    z-index:1040;

    background:#fff;

    transition:.35s;

    border-bottom:1px solid rgba(0,0,0,.05);

    box-shadow:0 6px 30px rgba(0,0,0,.04);

}

.site-header.scrolled{

    box-shadow:0 15px 45px rgba(0,0,0,.10);

}

.header-wrapper{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:72px;

}


/*=====================================================================
    BRAND
======================================================================*/

.brand{

    display:flex;

    align-items:center;

    gap:2px;

    flex-shrink:0;

}

.brand img{

    width:70px;

    height:70px;

    object-fit:contain;

}

.brand-text h2{

    margin:0;

    font-size:22px;

    font-weight:800;

    color:var(--primary-dark);

    line-height:1.1;

}

.brand-text span{

    display:block;

    margin-top:3px;

    font-size:13px;

    color:var(--text-light);

}


/*=====================================================================
    DESKTOP NAVIGATION
======================================================================*/



.main-nav>ul{

    display:flex;

    align-items:center;
}

.main-nav>ul>li{

    position:relative;

}

.main-nav>ul>li>a{

    display:flex;

    align-items:center;

    gap:3px;

    padding:34px 8px;

    font-size:14px;

    font-weight:600;

    color:var(--text);

    transition:var(--transition);

}

.main-nav>ul>li:hover>a{

    color:var(--primary);

}

.main-nav>ul>li.active>a{

    color:var(--primary);

}

.main-nav>ul>li.active>a::after{

    content:"";

    position:absolute;

    left:16px;

    right:16px;

    bottom:22px;

    height:3px;

    background:var(--gold);

    border-radius:20px;

}


/*=====================================================================
    SIMPLE DROPDOWN
======================================================================*/

.dropdown-menu-simple{

    position:absolute;

    left:0;

    top:80%;

    width:250px;

    background:#fff;

    border-radius:18px;
	
	border-top: 2px solid var(--gold);

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

    padding:14px 0;

    opacity:0;

    visibility:hidden;

    transform:translateY(15px);

    transition:.30s;

}

.has-dropdown:hover>.dropdown-menu-simple{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.dropdown-menu-simple a{

    display:block;

    padding:12px 24px;

    color:var(--text);

    font-weight:500;

}

.dropdown-menu-simple a:hover{

    background:var(--offwhite);

    color:var(--primary);

}

.dropdown-menu-simple a i{

    color:var(--gold);

    width:18px;

}
/*=====================================================================
    MEGA MENU
======================================================================*/

.mega-menu{

    position:absolute;

    left:50%;

    top:80%;

    transform:translateX(-50%) translateY(15px);

    width:700px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

    background:#fff;

    border-radius:22px;
	
	border-top: 2px solid var(--gold);

    padding:25px;

    box-shadow:0 30px 80px rgba(0,0,0,.12);

    opacity:0;

    visibility:hidden;

    transition:.35s;

}

.has-dropdown:hover>.mega-menu{

    opacity:1;

    visibility:visible;

    transform:translateX(-50%) translateY(0);

}

.mega-column h5{

    font-size:17px;

    margin-bottom:18px;

    color:var(--primary-dark);

}

.mega-column a{

    display:block;

    padding:10px 0;

    color:var(--text-light);

    font-size:15px;

    transition:var(--transition);

}

.mega-column a:hover{

    color:var(--primary);

    padding-left:8px;

}

.mega-column a i{

    color:var(--gold);

    width:18px;

}


/*=====================================================================
    HEADER ACTIONS
======================================================================*/

.header-actions{

    display:flex;

    align-items:center;

    gap:12px;

}

.search-btn{

    width:46px;

    height:46px;

    border-radius:50%;

    border:1px solid var(--border);

    display:flex;

    align-items:center;

    justify-content:center;

    transition:var(--transition);

}

.search-btn:hover{

    background:var(--primary);

    color:#fff;

    border-color:var(--primary);

}

.btn-apply{

    background:var(--gold);

    color:#fff;

    padding:12px 24px;

    border-radius:999px;

    font-weight:600;

    transition:var(--transition);

}

.btn-apply:hover{

    background:#b88f12;

    color:#fff;

}

.btn-portal{

    background:var(--gold);

    color:#fff;

    padding:12px 26px;

    border-radius:999px;

    font-weight:600;

    transition:var(--transition);

}

.btn-portal:hover{

    background:var(--primary-dark);

    color:#fff;

}

.mobile-toggle{

    display:none;

    width:46px;

    height:46px;

    border-radius:50%;

    border:1px solid var(--border);

    align-items:center;

    justify-content:center;

}

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

.mobile-toggle{

    display:none;

    width:48px;

    height:48px;

    border-radius:50%;

    border:1px solid var(--border);

    background:#fff;

    color:var(--primary);

    align-items:center;

    justify-content:center;

    font-size:18px;

    transition:var(--transition);

}

.mobile-toggle:hover{

    background:var(--primary);

    color:#fff;

    border-color:var(--primary);

}


/*=====================================================================
    OFF CANVAS MENU
======================================================================*/

.mobile-menu{

    position:fixed;

    top:0;

    right:-380px;

    width:360px;

    max-width:90%;

    height:100vh;

    background:#fff;

    z-index:1200;

    overflow-y:auto;

    transition:.45s ease;

    box-shadow:-20px 0 60px rgba(0,0,0,.15);

}

.mobile-menu.active{

    right:0;

}

.mobile-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:22px 25px;

    border-bottom:1px solid var(--border);

}

.mobile-header img{

    width:58px;

}

.close-menu{

    width:42px;

    height:42px;

    border-radius:50%;

    background:var(--offwhite);

    color:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.3s;

}

.close-menu:hover{

    background:var(--primary);

    color:#fff;

}

.mobile-menu nav{

    padding:20px 0;

}

.mobile-menu nav a{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:16px 28px;

    color:var(--text);

    font-weight:600;

    border-bottom:1px solid rgba(0,0,0,.05);

    transition:var(--transition);

}

.mobile-menu nav a:hover{

    background:var(--offwhite);

    color:var(--primary);

    padding-left:36px;

}

.mobile-portal-btn{

    margin:25px;

    border-radius:999px;

    background:var(--primary);

    color:#fff !important;

    justify-content:center !important;

    border:none !important;

    font-weight:700;

}

.mobile-portal-btn:hover{

    background:var(--primary-dark)!important;

}


/*=====================================================================
    MENU OVERLAY
======================================================================*/

.mobile-menu-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.55);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:1190;

    backdrop-filter:blur(4px);

}

.mobile-menu-overlay.active{

    opacity:1;

    visibility:visible;

}


/*=====================================================================
    STICKY HEADER
======================================================================*/

.site-header.scrolled{

    min-height:78px;

    animation:headerSlide .35s ease;

    box-shadow:0 15px 45px rgba(0,0,0,.12);

}

.site-header.scrolled .header-wrapper{

    min-height:78px;

}

.site-header.scrolled .brand img{

    width:60px;

}

.site-header.scrolled .main-nav>ul>li>a{

    padding:27px 16px;

}


/*=====================================================================
    HEADER ANIMATION
======================================================================*/

@keyframes headerSlide{

    from{

        opacity:0;

        transform:translateY(-18px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


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

@media (max-width:1199px){

    .main-nav{

        display:none;

    }

    .btn-apply{

        display:none;

    }

    .mobile-toggle{

        display:flex;

    }

}


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

.mobile-overlay{

    position:fixed;

    inset:0;

    background:rgba(8,18,36,.65);

    backdrop-filter:blur(6px);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:1200;

}

.mobile-overlay.show{

    opacity:1;

    visibility:visible;

}

.mobile-sidebar{

    position:fixed;

    top:0;

    left:-380px;

    width:360px;

    max-width:90%;

    height:100vh;

    background:#fff;

    display:flex;

    flex-direction:column;

    z-index:1210;

    transition:.45s cubic-bezier(.22,.61,.36,1);

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

}

.mobile-sidebar.show{

    left:0;

}

.sidebar-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:22px;

    border-bottom:1px solid var(--border);

}

.sidebar-brand{

    display:flex;

    align-items:center;

    gap:14px;

}

.sidebar-brand img{

    width:55px;

}

.sidebar-brand h5{

    margin:0;

    color:var(--primary);

    font-size:18px;

}

.sidebar-brand small{

    color:#777;

}

.close-sidebar{

    width:42px;

    height:42px;

    border-radius:50%;

    background:#f5f7fb;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.3s;

}

.close-sidebar:hover{

    background:var(--primary);

    color:#fff;

}

.sidebar-body{

    flex:1;

    overflow-y:auto;

}

.mobile-nav{

    list-style:none;

    margin:0;

    padding:0;

}

.mobile-nav>li>a,

.mobile-dropdown-toggle{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 24px;

    background:none;

    border:0;

    font-size:15px;

    font-weight:600;

    color:#333;

}

.mobile-nav a i,

.mobile-dropdown-toggle span i{

    width:28px;

    color:var(--primary);

}

.mobile-dropdown{

    border-bottom:1px solid #eef2f6;

}

.mobile-submenu{

    max-height:0;

    overflow:hidden;

    transition:max-height .35s ease;

    background:#f8fafc;

}

.mobile-dropdown.active .mobile-submenu{

    max-height:400px;

}

.mobile-submenu a{

    display:block;

    padding:14px 60px;

    color:#666;

}

.mobile-submenu a:hover{

    color:var(--primary);

}

.mobile-dropdown.active .arrow{

    transform:rotate(180deg);

}

.arrow{

    transition:.3s;

}

.sidebar-footer{

    padding:20px;

    border-top:1px solid var(--border);

    display:grid;

    gap:12px;

}

.mobile-btn{

    padding:14px;

    border-radius:12px;

    text-align:center;

    font-weight:600;

}

.mobile-btn.apply{

    background:var(--gold);

    color:#fff;

}

.mobile-btn.portal{

    background:var(--gold);

    color:#fff;

}

/*=========================================================================
    HERO
=========================================================================*/

.hero{

    position:relative;

    overflow:hidden;

    background:
    radial-gradient(circle at top right,#dfeeff 0,#ffffff 55%),
    linear-gradient(180deg,#ffffff,#f8fbff);

    padding:90px 0 70px;

}

.hero::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    border-radius:50%;

    background:rgba(31,95,175,.05);

    right:-220px;

    top:-250px;

}

.hero::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    border-radius:50%;

    background:rgba(201,162,39,.08);

    left:-180px;

    bottom:-180px;

}

.hero>.container{

    position:relative;

    z-index:2;

}


/*=========================================================================
    HERO CONTENT
=========================================================================*/

.hero-content{

    max-width:620px;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 20px;

    background:#fff;

    border:1px solid rgba(31,95,175,.12);

    border-radius:50px;

    box-shadow:var(--shadow-xs);

    color:var(--primary);

    font-weight:600;

    margin-bottom:30px;

}

.hero-badge i{

    color:var(--gold);

}

.hero-content h1{

    font-size:68px;

    line-height:1.05;

    font-weight:800;

    margin-bottom:28px;

    color:#102B52;

}

.hero-content h1 span{

    color:var(--primary);

}

.hero-content p{

    font-size:19px;

    color:#5E6D82;

    line-height:1.9;

    margin-bottom:35px;

}


/*=============================================================
        HERO NAVIGATION
=============================================================*/

.hero-prev,
.hero-next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:58px;

    height:58px;

    border-radius:50%;

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

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.35s;

    z-index:20;

    opacity:0;

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

}

.hero-prev{

    left:25px;

}

.hero-next{

    right:25px;

}

.hero-image-wrapper:hover .hero-prev,
.hero-image-wrapper:hover .hero-next{

    opacity:1;

}

.hero-prev:hover,
.hero-next:hover{

    background:var(--hero-accent);

    color:#fff;

}

/*=============================================================
        HERO PAGINATION
=============================================================*/

.hero-pagination{

    bottom:30px !important;

}

.hero-pagination .swiper-pagination-bullet{

    width:12px;

    height:12px;

    background:#fff;

    opacity:.5;

    transition:.3s;

}

.hero-pagination .swiper-pagination-bullet-active{

    width:34px;

    border-radius:20px;

    background:var(--hero-accent);

    opacity:1;

}

/*=========================================================================
    HIGHLIGHTS
=========================================================================*/

.hero-highlights{

    display:flex;

    gap:45px;

    flex-wrap:wrap;

}

.hero-highlights div{

    display:flex;

    flex-direction:column;

}

.hero-highlights strong{

    font-size:34px;

    font-family:Montserrat;

    color:var(--primary);

    line-height:1;

}

.hero-highlights span{

    color:#6E7B90;

    margin-top:6px;

}

/*=============================================================
        HERO SWIPER
=============================================================*/

.hero-image-wrapper{

    position:relative;

}

.heroSwiper{

    overflow:hidden;

    border-radius:32px;

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

}

.heroSwiper .swiper-slide{

    overflow:hidden;

    border-radius:32px;

}

.hero-image{

    width:100%;

    height:680px;

    object-fit:cover;

    display:block;

    transition:transform 8s ease;

}

.swiper-slide-active .hero-image{

    transform:scale(1.08);

}


/*=========================================================================
    QUICK ACCESS
=========================================================================*/

.quick-access{

    margin-top:-45px;

    position:relative;

    z-index:10;

    padding-bottom:80px;

}

.quick-box{

    display:block;

    background:#fff;

    border-radius:22px;

    padding:38px 30px;

    text-align:center;

    transition:.35s;

    box-shadow:0 20px 55px rgba(0,0,0,.07);

    height:100%;

}

.quick-box:hover{

    transform:translateY(-10px);

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

}

.quick-icon{

    width:82px;

    height:82px;

    border-radius:22px;

    background:rgba(31,95,175,.08);

    color:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto;

    margin-bottom:22px;

    font-size:30px;

    transition:.35s;

}

.quick-box:hover .quick-icon{

    background:var(--primary);

    color:#fff;

}

.quick-box h4{

    font-size:21px;

    margin-bottom:12px;

}

.quick-box p{

    margin:0;

    color:#66768C;

}

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

@media(max-width:991px){

.hero{

padding:70px 0 40px;

}

.hero-content{

text-align:center;

margin-bottom:50px;

max-width:100%;

}

.hero-buttons{

justify-content:center;

}

.hero-highlights{

justify-content:center;

}

.hero-content h1{

font-size:48px;

}

.hero-image-wrapper{

min-height:auto;

}

.card-one,
.card-two,
.card-three{

position:relative;

left:auto;
right:auto;
top:auto;
bottom:auto;

margin:20px auto;

max-width:340px;

}

.quick-access{

margin-top:30px;

}

}

@media(max-width:576px){

.hero-content h1{

font-size:38px;

}

.hero-content p{

font-size:16px;

}

.hero-highlights{

gap:25px;

}

.hero-buttons .btn-primary-custom,
.hero-buttons .btn-outline-dark{

width:100%;

}

}

@media(max-width:991px){

.hero-image{

height:500px;

}

.hero-prev,
.hero-next{

display:none;

}

}

/*=============================================================
        PREMIUM HERO CAPTION
=============================================================*/

.hero-caption{

    position:absolute;

    left:40px;

    bottom:40px;

    width:520px;

    max-width:calc(100% - 80px);

    padding:32px;

    border-radius:26px;

    overflow:hidden;

    z-index:15;

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

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

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

    box-shadow:

        0 25px 70px rgba(0,0,0,.22),

        inset 0 1px rgba(255,255,255,.30);

}

.hero-caption::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(135deg,

        rgba(255,255,255,.12),

        rgba(255,255,255,.02));

    pointer-events:none;

}

.hero-caption>*{

    position:relative;

    z-index:2;

}
.hero-caption::after{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:6px;

    height:100%;

    background:var(--hero-accent);

    box-shadow:

        0 0 20px var(--hero-glow);

}
/*=============================================================
        INITIAL STATE
=============================================================*/

.hero-label,
.hero-caption h2,
.hero-caption p,
.hero-caption a{

    opacity:0;

    transition:all .75s cubic-bezier(.22,.61,.36,1);

}

.hero-label{

    transform:translateY(-18px);

}

.hero-caption h2{

    transform:translateY(35px);

}

.hero-caption p{

    transform:translateY(22px);

}

.hero-caption a{

    transform:translateX(-30px);

}

.hero-caption a:hover{

    background:var(--hero-accent);

    color:#fff;

}
.hero-label i{

    color:var(--hero-accent);

    transition:.5s;

}
/*=============================================================
        STAGGERED ANIMATION
=============================================================*/

.swiper-slide-active .hero-label{

    opacity:1;

    transform:none;

    transition-delay:.35s;

}

.swiper-slide-active .hero-caption h2{

    opacity:1;

    transform:none;

    transition-delay:.65s;

}

.swiper-slide-active .hero-caption p{

    opacity:1;

    transform:none;

    transition-delay:.95s;

}

.swiper-slide-active .hero-caption a{

    opacity:1;

    transform:none;

    transition-delay:1.25s;

}

.hero-caption h2{

    color:#fff;

    font-size:42px;

    line-height:1.15;

    margin-bottom:18px;

    font-weight:700;

    text-shadow:

        0 3px 15px rgba(0,0,0,.35);

}

.hero-caption p{

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

    line-height:1.8;

    margin-bottom:24px;

    font-size:16px;

}

.hero-caption a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:13px 26px;

    border-radius:50px;

    background:#fff;

    color:var(--primary);

    font-weight:700;

    transition:.35s;

}


.hero-image{

    transition:

        transform 9s ease,

        filter .8s ease;

}

.swiper-slide-active .hero-image{

    transform:scale(1.12);

}

.swiper-slide-prev .hero-image,
.swiper-slide-next .hero-image{

    filter:brightness(.9);

}
.heroSwiper .swiper-slide::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:32px;

    background:

    linear-gradient(

        135deg,

        var(--hero-glow),

        rgba(0,0,0,.08),

        rgba(0,0,0,.55)

    );

}

.hero-caption::after,
.hero-label i,
.hero-caption a,
.hero-pagination .swiper-pagination-bullet-active,
.hero-prev,
.hero-next,
.floating-card i,
.heroSwiper .swiper-slide::after{

    transition:

        background .6s ease,

        color .6s ease,

        border-color .6s ease,

        box-shadow .6s ease;

}

/*======================================================
        WHY + NEWS
======================================================*/

.section-why-news{

background:#f7f9fc;

}

.section-heading h2{

font-size:40px;

font-weight:700;

margin-bottom:12px;

color:#102B52;

}

.section-heading p{

color:#66768C;

line-height:1.8;

}

.section-badge{

display:inline-block;

padding:8px 18px;

background:rgba(31,95,175,.08);

border-radius:50px;

color:var(--primary);

font-weight:600;

margin-bottom:15px;

}

.news-card{

display:flex;

gap:22px;

background:#fff;

border-radius:22px;

padding:24px;

margin-bottom:22px;

box-shadow:0 20px 50px rgba(0,0,0,.06);

transition:.35s;

border-left:5px solid transparent;

}

.news-card:hover{

transform:translateY(-6px);

border-color:var(--gold);

box-shadow:0 30px 70px rgba(0,0,0,.12);

}

.news-date{

width:80px;

height:80px;

flex-shrink:0;

background:linear-gradient(135deg,var(--primary),#0f4e94);

border-radius:18px;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

color:#fff;

}

.news-date span{

font-size:30px;

font-weight:700;

line-height:1;

}

.news-date small{

text-transform:uppercase;

letter-spacing:1px;

}

.news-body{

flex:1;

}

.news-body h4{

font-size:16px;

margin-bottom:10px;

}

.news-body h4 a{

color:#102B52;

}

.news-body p{

color:#66768C;

margin-bottom:18px;

}

.news-meta{

display:flex;

justify-content:space-between;

align-items:center;

font-size:14px;

}

.news-meta a{

font-weight:600;

color:var(--primary);

}

.feature-box{

display:flex;

gap:20px;

padding:24px;

background:#fff;

border-radius:22px;

margin-bottom:18px;

transition:.35s;

box-shadow:0 18px 45px rgba(0,0,0,.05);

border:1px solid transparent;

}

.feature-box:hover{

transform:translateX(8px);

border-color:rgba(31,95,175,.15);

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

}

.feature-icon{

width:72px;

height:72px;

border-radius:20px;

background:rgba(31,95,175,.08);

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

color:var(--primary);

flex-shrink:0;

transition:.35s;

}

.feature-box:hover .feature-icon{

background:var(--primary);

color:#fff;

transform:rotate(-8deg);

}

.feature-box h4{

margin-bottom:8px;

font-size:22px;

color:#102B52;

}

.feature-box p{

margin:0;

color:#66768C;

line-height:1.7;

}

@media(max-width:991px){

.news-card{

flex-direction:column;

}

.news-date{

width:70px;

height:70px;

}

.feature-box{

padding:20px;

}

}

/*======================================================
                    FOOTER
======================================================*/

.footer{

background:#0B2346;

color:#d8e1ef;

padding:20px 0 0;

position:relative;

overflow:hidden;

}

.footer::before{

content:"";

position:absolute;

right:-180px;

top:-180px;

width:420px;

height:420px;

border-radius:50%;

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

}

.footer-logo{

display:flex;

align-items:center;

gap:18px;

margin-bottom:25px;

}

.footer-logo img{

width:70px;

}

.footer-logo h3{

color:#fff;

margin:0;

font-size:24px;

}

.footer-logo span{

color:#9fb5d7;

}

.footer-about{

line-height:1.9;

margin-bottom:28px;

}

.footer h4{

color:#fff;

margin-bottom:25px;

font-size:20px;

position:relative;

}

.footer h4::after{

content:"";

display:block;

width:45px;

height:3px;

margin-top:10px;

background:var(--gold);

border-radius:20px;

}

.footer ul{

margin:0;

padding:0;

list-style:none;

}

.footer ul li{

margin-bottom:15px;

}

.footer ul li a{

color:#cfd8e7;

transition:.3s;

}

.footer ul li a:hover{

color:#fff;

padding-left:8px;

}

.footer-social{

display:flex;

gap:12px;

}

.footer-social a{

width:42px;

height:42px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

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

color:#fff;

transition:.35s;

}

.footer-social a:hover{

background:var(--gold);

transform:translateY(-4px);

}

.footer-contact li{

display:flex;

gap:15px;

align-items:flex-start;

}

.footer-contact i{

margin-top:5px;

color:var(--gold);

font-size:18px;

}

/*======================================================
                COPYRIGHT
======================================================*/

.footer-bottom{
padding:10px 0;

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

font-size:15px;

background:var(--gold);

}

.footer-bottom a{

color:var(--white);

font-weight:600;

}

.footer-bottom a:hover{

color:#fff;

}


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

.page-header{

    position:relative;

    overflow:hidden;

    padding:75px 0 70px;

    background:
        linear-gradient(135deg,#081F43 0%,#123D75 55%,#1F5FAF 100%);

    color:#fff;

    isolation:isolate;

}

/*======================================================
                HEXAGON PATTERN
======================================================*/

.page-header::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

        radial-gradient(circle,
        rgba(255,255,255,.045) 2px,
        transparent 2px);

    background-size:48px 48px;

    opacity:.35;

    animation:moveGrid 40s linear infinite;

    z-index:-3;

}

@keyframes moveGrid{

    from{

        transform:translate(0,0);

    }

    to{

        transform:translate(-48px,-48px);

    }

}

/*======================================================
                    GOLD GLOW
======================================================*/

.page-header::after{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    top:-260px;

    right:-180px;

    border-radius:50%;

    background:

    radial-gradient(circle,

        rgba(212,169,55,.22),

        rgba(212,169,55,.08),

        transparent 72%);

    filter:blur(15px);

    animation:pulseGlow 8s ease-in-out infinite;

    z-index:-2;

}

@keyframes pulseGlow{

    50%{

        transform:scale(1.08);

        opacity:.8;

    }

}

/*======================================================
                ECG
======================================================*/

.ecg-container{

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:90px;

    overflow:hidden;

    opacity:.22;

}

.ecg-line{

    position:absolute;

    left:0;

    bottom:10px;

    width:200%;

    height:90px;

    background-repeat:repeat-x;

    background-size:800px 90px;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='90' viewBox='0 0 800 90'%3E%3Cpath d='M0 50 H120 L150 50 L175 20 L205 75 L235 35 L270 50 H420 L455 50 L480 18 L515 75 L550 35 L590 50 H800' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    animation:heartbeat 18s linear infinite;

}

@keyframes heartbeat{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-800px);

    }

}

/*======================================================
            FLOATING CROSSES
======================================================*/

.med-cross{

    position:absolute;

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

    z-index:-1;

    animation:floatCross 9s ease-in-out infinite;

}

.med-cross i{

    font-size:30px;

}

.cross1{

    top:60px;

    right:8%;

    animation-delay:0s;

}

.cross2{

    top:180px;

    left:9%;

    animation-delay:2s;

}

.cross3{

    top:120px;

    right:32%;

    animation-delay:4s;

}

.cross4{

    bottom:80px;

    left:34%;

    animation-delay:6s;

}

.cross5{

    bottom:120px;

    right:18%;

    animation-delay:3s;

}

@keyframes floatCross{

    0%{

        transform:translateY(0px) rotate(0deg);

        opacity:.08;

    }

    50%{

        transform:translateY(-12px) rotate(8deg);

        opacity:.16;

    }

    100%{

        transform:translateY(0px) rotate(0deg);

        opacity:.08;

    }

}

/*======================================================
                GLASS CONTENT
======================================================*/

.page-header-content{

    position:relative;

    z-index:10;

    max-width:760px;

}

.page-label{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    border-radius:40px;

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

    backdrop-filter:blur(12px);

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

    font-weight:600;

    margin-bottom:20px;

}

.page-header h1{

    font-size:58px;

    font-weight:800;

    line-height:1.12;

    margin-bottom:20px;

}

.page-header p{

    max-width:650px;

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

    line-height:1.9;

    font-size:18px;

}

/*======================================================
                    DNA
======================================================*/

.dna-wrapper{

    position:absolute;

    top:50%;

    right:7%;

    transform:translateY(-50%);

    width:170px;

    height:420px;

    display:flex;

    justify-content:center;

    align-items:center;

    pointer-events:none;

    z-index:-1;

    opacity:.18;

}

.dna{

    position:relative;

    width:120px;

    height:100%;

    transform-style:preserve-3d;

    animation:dnaRotate 24s linear infinite;

}

@keyframes dnaRotate{

    from{

        transform:rotateY(0deg);

    }

    to{

        transform:rotateY(360deg);

    }

}

.dna span{

    position:absolute;

    left:50%;

    top:calc(var(--i) * 22px);

    width:90px;

    height:2px;

    margin-left:-45px;

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

    transform-origin:center;

    animation:dnaWave 5s ease-in-out infinite;

    animation-delay:calc(var(--i) * -.15s);

}

.dna span::before,

.dna span::after{

    content:"";

    position:absolute;

    top:-6px;

    width:14px;

    height:14px;

    border-radius:50%;

}

.dna span::before{

    left:-7px;

    background:#ffffff;

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

}

.dna span::after{

    right:-7px;

    background:#D4A937;

    box-shadow:0 0 12px rgba(212,169,55,.35);

}

@keyframes dnaWave{

    0%{

        transform:rotateY(0deg);

    }

    50%{

        transform:rotateY(180deg);

    }

    100%{

        transform:rotateY(360deg);

    }

}

/*======================================================
            FLOATING PARTICLES
======================================================*/

.medical-particles{

    position:absolute;

    inset:0;

    pointer-events:none;

    z-index:-2;

}

.medical-particles span{

    position:absolute;

    width:5px;

    height:5px;

    border-radius:50%;

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

    left:calc(var(--n) * 7%);

    bottom:-20px;

    animation:particleRise calc(8s + var(--n) * .6s) linear infinite;

    animation-delay:calc(var(--n) * -.8s);

}

.medical-particles span:nth-child(odd){

    background:rgba(212,169,55,.28);

}

@keyframes particleRise{

    from{

        transform:translateY(0) scale(.6);

        opacity:0;

    }

    20%{

        opacity:1;

    }

    80%{

        opacity:.6;

    }

    to{

        transform:translateY(-650px) scale(1.5);

        opacity:0;

    }

}



/*=========================================
            CONTENT CARD
=========================================*/

.about-card{

background:#fff;

padding:45px;

border-radius:24px;

box-shadow:0 20px 60px rgba(0,0,0,.06);


}

.about-card p{

font-size:16px;

line-height:2;

color:#58677a;

margin-bottom:22px;

text-align:justify;

}

/*=========================================
        MISSION / VISION
=========================================*/

.mission-card{

background:#fff;

padding:35px;

border-radius:22px;

text-align:center;

box-shadow:0 15px 45px rgba(0,0,0,.06);

transition:.35s;

}

.mission-card:hover{

transform:translateY(-8px);

}

.mission-icon{

width:75px;

height:75px;

margin:auto auto 20px;

border-radius:20px;

background:rgba(31,95,175,.08);

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

color:var(--primary);

}

.mission-card h3{

font-size:24px;

margin-bottom:15px;

color:#102B52;

}

.mission-card p{

margin:0;

line-height:1.9;

}

/*=========================================
            VALUES
=========================================*/

.value-list{

padding:0;

margin:0;

list-style:none;

}

.value-list li{

padding:12px 0;

font-size:17px;

display:flex;

align-items:center;

gap:12px;

border-bottom:1px solid #edf2f7;

}

.value-list li:last-child{

border:none;

}

.value-list i{

color:var(--gold);

font-size:18px;

}

/*====================================================
                STAFF
====================================================*/

.staff-card{

background:#fff;

border-radius:24px;

overflow:hidden;

box-shadow:0 18px 50px rgba(0,0,0,.06);

transition:.35s;

height:100%;

position:relative;

}

.staff-card:hover{

transform:translateY(-10px);

box-shadow:0 30px 70px rgba(0,0,0,.12);

}

.staff-top{

position:relative;

padding:35px 30px 20px;

text-align:center;

background:

linear-gradient(135deg,

rgba(31,95,175,.06),

rgba(31,95,175,.02));

}

.staff-image{

width:150px;

height:150px;

margin:auto;

border-radius:50%;

padding:6px;

background:#fff;

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

}

.staff-image img{

width:100%;

height:100%;

border-radius:50%;

object-fit:cover;

}

.staff-position{

display:inline-block;

margin-top:20px;

padding:8px 18px;

background:var(--primary);

color:#fff;

border-radius:40px;

font-size:13px;

font-weight:600;

letter-spacing:.5px;

text-transform:uppercase;

}

.staff-body{

padding:30px;

text-align:center;

}

.staff-body h3{

font-size:24px;

font-weight:700;

color:#102B52;

margin-bottom:15px;

}

.staff-body p{

line-height:1.9;

color:#66768C;

margin-bottom:25px;

min-height:110px;

}

.staff-contact{

display:flex;

justify-content:center;

gap:12px;

flex-wrap:wrap;

}

.staff-contact a{

display:inline-flex;

align-items:center;

gap:8px;

padding:12px 18px;

border-radius:50px;

text-decoration:none;

font-size:14px;

font-weight:600;

background:#F4F8FD;

color:var(--primary);

transition:.3s;

}

.staff-contact a:hover{

background:var(--primary);

color:#fff;

}

.staff-contact a i{

font-size:14px;

}

/*======================================================
                    GALLERY
======================================================*/

.gallery-grid{

display:grid;

grid-template-columns:repeat(auto-fill,minmax(260px,1fr));

gap:22px;

}

.gallery-item{

position:relative;

overflow:hidden;

border-radius:22px;

display:block;

background:#fff;

box-shadow:0 18px 50px rgba(0,0,0,.08);

}

.gallery-item img{

width:100%;

height:270px;

object-fit:cover;

display:block;

transition:all .6s ease;

}

.gallery-overlay{

position:absolute;

inset:0;

display:flex;

align-items:center;

justify-content:center;

background:

linear-gradient(

180deg,

rgba(0,0,0,.05),

rgba(8,31,67,.82)

);

opacity:0;

transition:.45s;

}

.gallery-overlay div{

text-align:center;

color:#fff;

transform:translateY(20px);

transition:.4s;

}

.gallery-overlay i{

font-size:34px;

margin-bottom:12px;

display:block;

color:var(--gold);

}

.gallery-overlay span{

font-size:18px;

font-weight:600;

letter-spacing:.4px;

}

.gallery-item:hover img{

transform:scale(1.12);

}

.gallery-item:hover .gallery-overlay{

opacity:1;

}

.gallery-item:hover .gallery-overlay div{

transform:none;

}

/*======================================================
                PREMIUM MASONRY GALLERY
======================================================*/

.gallery-masonry{

    column-count:4;

    column-gap:22px;

}

.gallery-card{

    position:relative;

    display:block;

    margin-bottom:22px;

    break-inside:avoid;

    overflow:hidden;

    border-radius:22px;

    background:#fff;

    box-shadow:

        0 12px 35px rgba(0,0,0,.08);

    transition:.45s;

}

.gallery-card img{

    width:100%;

    display:block;

    transition:

        transform .8s ease,

        filter .5s ease;

}

.gallery-card:hover{

    transform:translateY(-8px);

    box-shadow:

        0 25px 60px rgba(0,0,0,.14);

}

.gallery-card:hover img{

    transform:scale(1.08);

    filter:brightness(.82);

}

/*-----------------------------------
        Overlay
-----------------------------------*/

.gallery-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    background:

    linear-gradient(

        rgba(8,31,67,.10),

        rgba(8,31,67,.88)

    );

    transition:.45s;

}

.gallery-card:hover .gallery-overlay{

    opacity:1;

}

.gallery-overlay-content{

    text-align:center;

    color:#fff;

    transform:translateY(30px);

    transition:.45s;

}

.gallery-card:hover .gallery-overlay-content{

    transform:none;

}

.gallery-overlay i{

    display:block;

    width:72px;

    height:72px;

    line-height:72px;

    margin:auto auto 18px;

    border-radius:50%;

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

    backdrop-filter:blur(10px);

    color:#fff;

    font-size:24px;

}

.gallery-overlay span{

    font-size:18px;

    font-weight:600;

    letter-spacing:.5px;

}

/*=========================================
            ELIBRA CARD
=========================================*/

.elibra-card{

background:linear-gradient(135deg,#0B2346,#1F5FAF);

border-radius:24px;

padding:40px;

text-align:center;

color:#fff;

box-shadow:0 25px 60px rgba(31,95,175,.25);

height:100%;

position:relative;

overflow:hidden;

}

.elibra-card::before{

content:"";

position:absolute;

width:220px;

height:220px;

border-radius:50%;

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

top:-90px;

right:-70px;

}

.elibra-icon{

width:90px;

height:90px;

margin:auto auto 25px;

border-radius:24px;

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

display:flex;

align-items:center;

justify-content:center;

font-size:38px;

color:var(--gold);

backdrop-filter:blur(10px);

}

.elibra-card h3{

font-size:18px;

opacity:.85;

margin-bottom:8px;

}

.elibra-card h2{

font-size:42px;

font-weight:800;

margin-bottom:10px;

letter-spacing:1px;

}

.elibra-card p{

margin:0;

opacity:.9;

}

/*=========================================
            PROXAMS CARD
=========================================*/

.proxams-card{

background:linear-gradient(135deg,#0B2346,#1F5FAF);

border-radius:24px;

padding:40px;

text-align:center;

color:#fff;

height:100%;

position:relative;

overflow:hidden;

box-shadow:0 25px 60px rgba(31,95,175,.25);

}

.proxams-card::before{

content:"";

position:absolute;

width:230px;

height:230px;

border-radius:50%;

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

top:-80px;

right:-80px;

}

.proxams-icon{

width:90px;

height:90px;

margin:auto auto 25px;

border-radius:22px;

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

display:flex;

align-items:center;

justify-content:center;

font-size:40px;

color:var(--gold);

backdrop-filter:blur(12px);

}

.proxams-card h3{

font-size:18px;

opacity:.85;

margin-bottom:10px;

}

.proxams-card h2{

font-size:40px;

font-weight:800;

margin-bottom:10px;

}

.proxams-card p{

opacity:.9;

margin-bottom:20px;

}

.proxams-url{

display:inline-block;

padding:10px 20px;

border-radius:50px;

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

font-weight:600;

letter-spacing:.5px;

font-size:15px;

}

/*==============================
        CONTACT BANNER
===============================*/

.contact-banner{

background:linear-gradient(135deg,#0B2346,#1F5FAF);

padding:45px;

border-radius:24px;

color:#fff;

overflow:hidden;

position:relative;

box-shadow:0 20px 55px rgba(31,95,175,.20);

}

.contact-banner::before{

content:"";

position:absolute;

right:-80px;

top:-80px;

width:220px;

height:220px;

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

border-radius:50%;

}

.contact-banner h3{

font-size:30px;

font-weight:700;

margin-bottom:15px;

}

.contact-banner p{

margin:0;

opacity:.95;

}

.mission-card a{

color:inherit;

text-decoration:none;

font-weight:600;

}

.mission-card a:hover{

color:var(--primary);

}

/*==========================
        LOGIN
==========================*/

.login-wrapper{

display:flex;

justify-content:center;

align-items:center;

padding:70px 20px;

}

.login-card{

width:100%;

max-width:500px;

background:#fff;

border-radius:30px;

padding:25px;

position:relative;

overflow:hidden;

box-shadow:

0 25px 80px rgba(0,0,0,.08);

}

.login-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:5px;

background:linear-gradient(90deg,

#0B3E91,

#2E7BEF,

#D7A428);

}


.login-card h2{

font-weight:700;

margin-bottom:10px;

}

.login-card p{

color:#6d7c90;

margin-bottom:0;

}

/*====================
ROLE
====================*/

.role-selector{

display:flex;

gap:10px;

}

.role-selector input{

display:none;

}

.role-selector label{

flex:1;

padding:12px;

border-radius:16px;

text-align:center;

background:#f5f7fb;

cursor:pointer;

transition:.3s;

font-size:14px;

font-weight:600;

}

.role-selector label i{

display:block;

font-size:22px;

margin-bottom:10px;

}

.role-selector input:checked+label{

background:#0B3E91;

color:#fff;

}

/*=====================
INPUTS
=====================*/

.floating-group{

    position:relative;

}

.floating-group .form-input{

    width:100%;
    height:45px;

    padding:0 60px 0 58px;

    border:2px solid #E5EBF3;

    border-radius:10px;

    outline:none;

    font-size:16px;

    transition:.3s;

    background:#fff;

}

.floating-group .form-input:focus{

    border-color:var(--primary);

}

.floating-group label{

    position:absolute;

    left:28px;

    top:50%;

    transform:translateY(-50%);

    background:#fff;

    padding:0 6px;

    color:#7D8AA2;

    pointer-events:none;

    transition:.25s;

}

.floating-group .form-input:focus + label,
.floating-group .form-input:not(:placeholder-shown) + label{

    top:0;

    transform:translateY(-50%);

    font-size:12px;

    color:var(--primary);

    font-weight:600;

}

.input-icon{

    position:absolute;

    left:20px;

    top:50%;

    transform:translateY(-50%);

    color:#7D8AA2;

    font-size:18px;

    z-index:2;

}

.toggle-password{

    position:absolute;

    right:18px;

    top:50%;

    transform:translateY(-50%);

    width:38px;

    height:38px;

    border:none;

    border-radius:50%;

    background:transparent;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    color:#7D8AA2;

    transition:.25s;

    z-index:3;

}

.toggle-password:hover{

    background:#F2F5FA;

    color:var(--primary);

}

.toggle-password:focus{

    outline:none;

    box-shadow:none;

}

/*========================
OPTIONS
========================*/

.login-options{

display:flex;

justify-content:space-between;

margin:25px 0;

font-size:14px;

}

.login-options a{

text-decoration:none;

font-weight:600;

}

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

.login-btn{

width:100%;

height:58px;

border:none;

border-radius:18px;

background:linear-gradient(135deg,

#0B3E91,

#2E7BEF);

color:#fff;

font-size:17px;

font-weight:600;

transition:.3s;

}

.login-btn:hover{

transform:translateY(-3px);

box-shadow:

0 15px 35px rgba(11,62,145,.30);

}

/*=====================
DIVIDER
=====================*/

.divider{

display:flex;

align-items:center;

margin:35px 0;

}

.divider::before,

.divider::after{

content:"";

flex:1;

height:1px;

background:#e5e5e5;

}

.divider span{

padding:0 15px;

color:#999;

}

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

.portal-links{

display:grid;

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

gap:10px;

}

.portal-links a{

padding:15px;

background:#f7f9fc;

border-radius:15px;

text-align:center;

text-decoration:none;

font-size:13px;

font-weight:600;

transition:.3s;

}

.portal-links a:hover{

background:#eef5ff;

transform:translateY(-2px);

}

.security-note{

margin-top:30px;

padding:15px;

background:#f9fbff;

border-radius:14px;

text-align:center;

color:#567;

font-size:14px;

}

.security-note i{

color:#18a558;

margin-right:8px;

}


/*=====================================================
                NOTICE
=====================================================*/

.admission-notice{

display:flex;

align-items:center;

gap:30px;

background:#fff;

border-radius:24px;

padding:35px;

margin:30px 0;

box-shadow:0 15px 40px rgba(0,0,0,.06);

border-left:5px solid var(--primary);

}

.notice-icon{

width:75px;

height:75px;

flex-shrink:0;

display:flex;

align-items:center;

justify-content:center;

border-radius:20px;

background:rgba(25,86,179,.08);

color:var(--primary);

font-size:30px;

}

.notice-content h3{

font-size:26px;

font-weight:700;

margin-bottom:12px;

}

.notice-content p{

margin:0;

color:#6b7280;

line-height:1.9;

}


/*=====================================================
            PROGRAMMES
=====================================================*/

.programme-card{

background:#fff;

border-radius:24px;

padding:35px;

height:100%;

transition:.35s;

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

border:1px solid #edf2f7;

display:flex;

flex-direction:column;

}

.programme-card:hover{

transform:translateY(-8px);

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

}

.programme-icon{

width:70px;

height:70px;

display:flex;

align-items:center;

justify-content:center;

border-radius:20px;

background:rgba(25,86,179,.08);

font-size:30px;

color:var(--primary);

margin-bottom:25px;

}

.programme-card h3{

font-size:24px;

font-weight:700;

margin-bottom:25px;

}

.programme-meta{

display:flex;

justify-content:space-between;

gap:20px;

margin-bottom:30px;

padding:20px 0;

border-top:1px solid #eee;

border-bottom:1px solid #eee;

}

.programme-meta small{

display:block;

color:#8a94a6;

margin-bottom:8px;

}

.programme-meta strong{

font-size:18px;

color:#1d2939;

}

.programme-btn{

margin-top:auto;

display:flex;

align-items:center;

justify-content:center;

gap:10px;

padding:14px;

border-radius:14px;

background:var(--primary);

color:#fff;

font-weight:600;

text-decoration:none;

transition:.3s;

}

.programme-btn:hover{

background:var(--gold
);

color:#fff;

}
/*=====================================================
            APPLICATION PROCESS
======================================================*/

.application-process{

margin:90px 0;

}

.process-wrapper{

display:grid;

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

gap:30px;

}

.process-step{

position:relative;

background:#fff;

padding:40px 30px;

border-radius:24px;

text-align:center;

box-shadow:0 18px 45px rgba(0,0,0,.05);

border:1px solid #edf2f7;

transition:.35s;

overflow:hidden;

}

.process-step:hover{

transform:translateY(-8px);

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

}

.step-number{

position:absolute;

top:18px;

right:20px;

width:34px;

height:34px;

border-radius:50%;

background:var(--primary);

color:#fff;

display:flex;

align-items:center;

justify-content:center;

font-size:14px;

font-weight:700;

}

.step-icon{

width:80px;

height:80px;

margin:auto auto 25px;

display:flex;

align-items:center;

justify-content:center;

border-radius:22px;

background:rgba(25,86,179,.08);

color:var(--primary);

font-size:34px;

}

.process-step h4{

font-size:22px;

font-weight:700;

margin-bottom:15px;

}

.process-step p{

margin:0;

line-height:1.8;

color:#6b7280;

}


/*=====================================================
                    CTA
======================================================*/

.admission-cta{

margin-top:90px;

background:linear-gradient(135deg,var(--primary),#0f4fa5);

border-radius:30px;

padding:60px;

display:flex;

justify-content:space-between;

align-items:center;

gap:40px;

color:#fff;

overflow:hidden;

position:relative;

}

.admission-cta::before{

content:"";

position:absolute;

width:280px;

height:280px;

border-radius:50%;

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

right:-120px;

top:-100px;

}

.cta-content{

position:relative;

z-index:2;

}

.cta-content h2{

font-size:38px;

font-weight:800;

margin-bottom:18px;

}

.cta-content p{

font-size:17px;

opacity:.92;

max-width:650px;

margin:0;

}

.cta-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

position:relative;

z-index:2;

}

.btn-start,
.btn-continue{

display:inline-flex;

align-items:center;

gap:12px;

padding:16px 28px;

border-radius:16px;

font-weight:600;

text-decoration:none;

transition:.3s;

}

.btn-start{

background:#fff;

color:var(--primary);

}

.btn-start:hover{

background:#f4f7fb;

color:var(--primary);

transform:translateY(-3px);

}

.btn-continue{

border:2px solid rgba(255,255,255,.35);

color:#fff;

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

backdrop-filter:blur(8px);

}

.btn-continue:hover{

background:#fff;

color:var(--primary);

transform:translateY(-3px);

}


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

@media(max-width:991px){

.process-wrapper{

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

}

.admission-cta{

flex-direction:column;

text-align:center;

padding:50px 35px;

}

.cta-buttons{

justify-content:center;

}

}

@media(max-width:767px){

.process-wrapper{

grid-template-columns:1fr;

}

.admission-hero{

padding:60px 30px;

}

.admission-hero h1{

font-size:34px;

}

.admission-notice{

flex-direction:column;

text-align:center;

}

.programme-meta{

flex-direction:column;

gap:15px;

}

.cta-content h2{

font-size:30px;

}

}
/*==================================================
            ADMISSION CLOSED
==================================================*/

.admission-closed-card{

    position:relative;

    max-width:900px;

    margin:70px auto;

    padding:70px 60px;

    background:#fff;

    border-radius:30px;

    text-align:center;

    overflow:hidden;

    border:1px solid #edf2f7;

    box-shadow:0 25px 70px rgba(0,0,0,.06);

}

.closed-pattern{

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at top right,
    rgba(25,86,179,.05) 0,
    transparent 35%),

    radial-gradient(circle at bottom left,
    rgba(25,86,179,.04) 0,
    transparent 35%);

    pointer-events:none;

}

.closed-icon{

    width:110px;

    height:110px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(25,86,179,.08);

    color:var(--primary);

    font-size:48px;

    position:relative;

    z-index:2;

}

.closed-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:30px;

    padding:10px 22px;

    border-radius:50px;

    background:rgba(25,86,179,.08);

    color:var(--primary);

    font-weight:600;

    font-size:15px;

}

.admission-closed-card h2{

    margin:30px 0 20px;

    font-size:42px;

    font-weight:800;

    color:#1d2939;

}

.admission-closed-card .lead{

    font-size:20px;

    color:#4b5563;

    max-width:700px;

    margin:0 auto 20px;

    line-height:1.8;

}

.admission-closed-card p{

    color:#6b7280;

    font-size:17px;

    line-height:1.9;

    max-width:760px;

    margin:0 auto 18px;

}

.closed-divider{

    width:120px;

    height:4px;

    background:linear-gradient(to right,var(--primary),#6aa7ff);

    border-radius:20px;

    margin:40px auto;

}

.closed-actions{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.closed-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:16px 30px;

    border-radius:16px;

    font-weight:600;

    text-decoration:none;

    transition:.35s;

}

.home-btn{

    background:#f5f8fc;

    color:#1d2939;

    border:1px solid #dfe7f1;

}

.home-btn:hover{

    background:#eef4fb;

    transform:translateY(-4px);

    color:#1d2939;

}

.contact-btn{

    background:var(--primary);

    color:#fff;

}

.contact-btn:hover{

    background:var(--gold);

    color:#fff;

    transform:translateY(-4px);

}


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

@media(max-width:768px){

.admission-closed-card{

    padding:50px 25px;

}

.admission-closed-card h2{

    font-size:30px;

}

.closed-icon{

    width:90px;

    height:90px;

    font-size:38px;

}

.closed-actions{

    flex-direction:column;

}

.closed-btn{

    width:100%;

}

}

/*=========================================
            ACTION BUTTONS
=========================================*/

.btn-pay,
.btn-print{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    min-width:220px;

    height:58px;

    padding:0 30px;

    border:none;

    border-radius:16px;

    font-size:15px;

    font-weight:600;

    text-decoration:none;

    cursor:pointer;

    transition:all .35s ease;

}

/*=========================================
            PAY BUTTON
=========================================*/

.btn-pay{

    background:linear-gradient(135deg,var(--primary),var(--gold));

    color:#fff;

    box-shadow:0 12px 30px rgba(25,86,179,.25);

}

.btn-pay:hover{

    color:#fff;

    transform:translateY(-4px);

    box-shadow:0 18px 40px rgba(25,86,179,.35);

}

.btn-pay:active{

    transform:translateY(-1px);

}

/*=========================================
            PRINT BUTTON
=========================================*/

.btn-print{

    background:#fff;

    color:#1e293b;

    border:2px solid #e5e7eb;

}

.btn-print:hover{

    background:#f8fafc;

    border-color:var(--primary);

    color:var(--primary);

    transform:translateY(-4px);

    box-shadow:0 12px 30px rgba(15,23,42,.08);

}

.btn-print:active{

    transform:translateY(-1px);

}

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

.btn-pay i,
.btn-print i{

    font-size:16px;

}

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

@media(max-width:768px){

    .btn-pay,
    .btn-print{

        width:100%;

        min-width:100%;

    }

}

/*====================================================
    FAQ SECTION
====================================================*/

.faq-section{

    background:#f7f9fc;

}

.faq-header{

    max-width:760px;

    margin:auto auto 50px;

}

.faq-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    border-radius:50px;

    background:rgba(10,30,82,.08);

    color:#0A1E52;

    font-weight:700;

    margin-bottom:20px;

}

.faq-header h2{

    font-size:2.7rem;

    font-weight:800;

    color:#0A1E52;

    margin-bottom:18px;

}

.faq-header p{

    color:#6b7280;

    font-size:1.05rem;

}


/*====================================================
    SEARCH
====================================================*/

.faq-search{

    position:relative;

    max-width:700px;

    margin:0 auto 35px;

}

.faq-search input{

    width:100%;

    height:65px;

    border:none;

    background:#fff;

    border-radius:60px;

    padding:0 28px 0 65px;

    box-shadow:0 20px 45px rgba(15,23,42,.08);

    font-size:16px;

}

.faq-search i{

    position:absolute;

    left:28px;

    top:50%;

    transform:translateY(-50%);

    color:#0A1E52;

}


/*====================================================
    CATEGORIES
====================================================*/

.faq-categories{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:15px;

    margin-bottom:45px;

}

.faq-categories span{

    padding:12px 24px;

    border-radius:50px;

    background:#fff;

    cursor:pointer;

    transition:.3s;

    font-weight:600;

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

}

.faq-categories span.active,

.faq-categories span:hover{

    background:#0A1E52;

    color:#fff;

}


/*====================================================
    ACCORDION
====================================================*/

.faq-accordion{

    max-width:950px;

    margin:auto;

}

.faq-item{

    background:#fff;

    border-radius:18px;

    margin-bottom:18px;

    overflow:hidden;

    box-shadow:0 15px 40px rgba(0,0,0,.06);

    transition:.3s;

}

.faq-item:hover{

    transform:translateY(-2px);

}

.faq-question{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    border:none;

    background:none;

    padding:26px 30px;

    cursor:pointer;

    font-size:18px;

    font-weight:700;

    color:#0A1E52;

}

.faq-number{

    display:inline-flex;

    width:42px;

    height:42px;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    background:#DEA52A;

    color:#fff;

    margin-right:18px;

    font-size:15px;

}

.faq-question i{

    color:#0A1E52;

    transition:.35s;

}

.faq-answer{

    display:none;

    padding:0 30px 28px 90px;

    color:#4b5563;

    line-height:1.9;

}

.faq-item.active .faq-answer{

    display:block;

}

.faq-item.active .faq-question i{

    transform:rotate(45deg);

}

.faq-list{

    margin:20px 0;

    padding-left:22px;

}

.faq-list li{

    margin-bottom:10px;

}

.faq-note,

.faq-highlight{

    margin-top:20px;

    padding:18px 20px;

    border-left:4px solid #DEA52A;

    background:#f9fbff;

    border-radius:12px;

}

.faq-note i{

    color:#DEA52A;

    margin-right:10px;

}

/*==========================================
    PRICE CARD
==========================================*/

.faq-price-card{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

    margin:25px 0;

}

.price-box{

    background:linear-gradient(135deg,#0A1E52,#173B8A);

    color:#fff;

    border-radius:18px;

    padding:30px;

    text-align:center;

    box-shadow:0 20px 40px rgba(10,30,82,.12);

}

.price-box small{

    display:block;

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

    margin-bottom:10px;

    text-transform:uppercase;

    letter-spacing:.08em;

}

.price-box h3{

    color:#DEA52A;

    font-size:2rem;

    margin-bottom:8px;

}

.price-box span{

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

    font-size:.9rem;

}



/*==========================================
    TIMELINE
==========================================*/

.faq-timeline{

    margin:30px 0;

    position:relative;

    padding-left:32px;

}

.faq-timeline::before{

    content:"";

    position:absolute;

    left:11px;

    top:0;

    bottom:0;

    width:2px;

    background:#dde5f2;

}

.timeline-item{

    position:relative;

    margin-bottom:28px;

    padding-left:20px;

    color:#4b5563;

    line-height:1.8;

}

.timeline-item:last-child{

    margin-bottom:0;

}

.timeline-item span{

    position:absolute;

    left:-32px;

    width:26px;

    height:26px;

    background:#0A1E52;

    color:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:12px;

    font-weight:700;

    box-shadow:0 5px 18px rgba(10,30,82,.2);

}



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

@media(max-width:768px){

.faq-price-card{

    grid-template-columns:1fr;

}

.timeline-item{

    font-size:15px;

}

}

/*==========================================
    FACILITY GRID
==========================================*/

.facility-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

    margin-top:30px;

}

.facility-card{

    padding:30px;

    border-radius:18px;

    background:#fff;

    border:1px solid #eef2f7;

    text-align:center;

    transition:.35s;

}

.facility-card:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 45px rgba(10,30,82,.08);

}

.facility-card i{

    font-size:34px;

    color:#0A1E52;

    margin-bottom:18px;

}

.facility-card h6{

    font-weight:700;

    margin-bottom:10px;

}



/*==========================================
    CAREER GRID
==========================================*/

.career-grid{

    display:grid;

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

    gap:18px;

    margin:30px 0;

}

.career-grid div{

    background:#F7F9FC;

    padding:18px;

    border-radius:14px;

    font-weight:600;

}

.career-grid i{

    color:#DEA52A;

    margin-right:10px;

}



/*==========================================
    ACTIVITIES
==========================================*/

.activity-grid{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    margin-top:25px;

}

.activity-grid span{

    padding:14px 20px;

    border-radius:50px;

    background:#fff;

    box-shadow:0 10px 30px rgba(0,0,0,.06);

    font-weight:600;

}

.activity-grid i{

    color:#DEA52A;

    margin-right:8px;

}



/*==========================================
    ENTRY PATHWAY
==========================================*/

.entry-pathway{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:25px;

    margin:30px 0;

}

.entry-pathway>div{

    background:#F8FAFD;

    border-radius:18px;

    padding:28px;

    border-left:5px solid #DEA52A;

}

.entry-pathway h5{

    color:#0A1E52;

    margin-bottom:12px;

}



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

@media(max-width:768px){

.career-grid{

    grid-template-columns:1fr;

}

}
/*==========================================
    CONTACT SECTION
==========================================*/

.faq-contact{

    margin-top:90px;

}

.faq-contact-card{

    max-width:1100px;

    margin:auto;

    background:linear-gradient(
        135deg,
        #07183F,
        #0A1E52
    );

    border-radius:28px;

    padding:70px 60px;

    color:#fff;

    position:relative;

    overflow:hidden;

    box-shadow:0 30px 80px rgba(10,30,82,.18);

}

.faq-contact-card::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

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

    border-radius:50%;

    right:-140px;

    top:-180px;

}

.faq-contact-icon{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

    font-size:34px;

    color:#DEA52A;

    margin-bottom:25px;

}

.faq-contact-card{

    text-align:center;

}

.faq-contact-badge{

    display:inline-block;

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

    color:#DEA52A;

    padding:10px 22px;

    border-radius:40px;

    margin-bottom:20px;

    font-weight:700;

}

.faq-contact-card h2{

    color:#fff;

    font-size:2.4rem;

    margin-bottom:18px;

}

.faq-contact-card>p{

    max-width:760px;

    margin:0 auto 45px;

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

    line-height:1.9;

}



/*==========================================
    CONTACT GRID
==========================================*/

.contact-grid{

    display:grid;

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

    gap:25px;

    margin-bottom:45px;

}

.contact-item{

    display:flex;

    align-items:flex-start;

    gap:18px;

    text-align:left;

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

    padding:25px;

    border-radius:18px;

    transition:.35s;

}

.contact-item:hover{

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

    transform:translateY(-4px);

}

.contact-icon{

    width:60px;

    height:60px;

    border-radius:16px;

    background:#DEA52A;

    color:#0A1E52;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    flex-shrink:0;

}

.contact-item h6{

    color:#fff;

    margin-bottom:8px;

    font-weight:700;

}

.contact-item span{

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

    line-height:1.7;

}



/*==========================================
    BUTTONS
==========================================*/

.faq-cta{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.faq-btn{

    min-width:220px;

    padding:16px 32px;

    border-radius:60px;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

}

.faq-btn.primary{

    background:#DEA52A;

    color:#0A1E52;

}

.faq-btn.primary:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 40px rgba(222,165,42,.35);

    color:#0A1E52;

}

.faq-btn.secondary{

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

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

    color:#fff;

}

.faq-btn.secondary:hover{

    background:#fff;

    color:#0A1E52;

}



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

@media(max-width:991px){

.contact-grid{

    grid-template-columns:1fr;

}

.faq-contact-card{

    padding:45px 25px;

}

}

@media(max-width:576px){

.faq-contact-card h2{

    font-size:1.9rem;

}

.faq-btn{

    width:100%;

}

}