/*=========================================
VCAB Academy - Premium Medical Theme
style.css (Part 1)
=========================================*/

/* Google Font & Font Awesome Icons */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

/*========== ROOT ==========*/

:root{

    --primary:#0A66C2;
    --secondary:#19B5FE;
    --accent:#00C897;
    --dark:#102A43;
    --text:#4A5568;
    --white:#ffffff;
    --light:#F5F9FF;
    --border:#E6EEF8;

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

    --radius:14.4px;

    --transition:.35s ease;

}

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

*, *::before, *::after {
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html, body, input, button, select, textarea, h1, h2, h3, h4, h5, h6, p, a, span, li, div, section, td, th {
    font-family:'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body {
    background: var(--white);
    color: var(--text);
    overflow-x: hidden;
}

/*========== FONTAWESOME ICON DISPLAY REPAIR ==========*/
.fa-solid, .fas {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}

.fa-brands, .fab {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}

.fa-regular, .far {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}

.fa-solid::before, .fas::before,
.fa-brands::before, .fab::before,
.fa-regular::before, .far::before,
i[class*="fa-"]::before {
    font-family: inherit !important;
}

img{

    width:100%;
    display:block;

}

a{

    text-decoration:none;

}

ul{

    list-style:none;

}

/*========== COMMON ==========*/

.container{

    width:90%;
    max-width:1024px;
    margin:auto;

}

.section{

    padding:80px 0;

}

.section-title{

    text-align:center;
    margin-bottom:56px;

}

.section-title span{

    display:inline-block;

    color:var(--primary);

    font-weight:700;

    letter-spacing:1.6px;

    text-transform:uppercase;

    margin-bottom:9.6px;

}

.section-title h2{

    color:var(--dark);

    font-size:35.2px;

    margin-bottom:16px;

}

.section-title p{

    max-width:608px;

    margin:auto;

    line-height:1.8;

}

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

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

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

    color:#fff;

    padding:12px 28px;

    border-radius:40px;

    font-weight:600;

    transition:.35s;

    box-shadow:0 9.6px 24px rgba(10,102,194,.25);

}

.btn-primary:hover{

    transform:translateY(-3.2px);

}

.btn-outline{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 28px;

    border-radius:40px;

    border:1.6px solid var(--primary);

    color:var(--primary);

    font-weight:600;

    transition:.35s;

}

.btn-outline:hover{

    background:var(--primary);

    color:#fff;

}

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

.header{

    position:fixed;

    width:100%;

    left:0;

    top:0;

    z-index:999;

    background:#fff;

    box-shadow:0 8px 24px rgba(0,0,0,.05);

}

.nav-container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    height:72px;

}

.logo{

    display:flex;

    align-items:center;

    gap:12px;

}

.logo-icon{

    width:46.4px;

    height:46.4px;

    border-radius:50%;

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

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:19.2px;

}

.logo-text h2{

    color:var(--dark);

    font-size:20.8px;

}

.logo-text p{

    font-size:10.4px;

    color:gray;

}

.nav-links{

    display:flex;

    gap:28px;

}

.nav-links a{

    color:var(--dark);

    font-weight:600;

    transition:.3s;

}

.nav-links a:hover{

    color:var(--primary);

}

.menu-btn{

    display:none;

    font-size:24px;

    cursor:pointer;

}

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

.hero{

    padding-top:120px;

    background:linear-gradient(to bottom,#f8fbff,#eef7ff);

}

.hero-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:56px;

    align-items:center;

}

.badge{

    display:inline-block;

    background:#E8F3FF;

    color:var(--primary);

    padding:8px 16px;

    border-radius:40px;

    margin-bottom:20px;

    font-weight:600;

}

.hero-left h1{

    font-size:49.6px;

    line-height:1.2;

    color:var(--dark);

}

.hero-left span{

    color:var(--primary);

}

.hero-left p{

    margin:24px 0;

    font-size:14.4px;

    line-height:1.9;

}

.hero-buttons{

    display:flex;

    gap:16px;

    margin-bottom:40px;

}

.hero-stats{

    display:flex;

    gap:48px;

}

.hero-stats h2{

    color:var(--primary);

    font-size:28.8px;

}

.hero-stats span{

    color:gray;

}

.hero-right{

    position:relative;

}

.hero-right img{

    border-radius:24px;

    box-shadow:var(--shadow);

}

/*========== ABOUT ==========*/

.about{

    background:#fff;

}

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:56px;

    align-items:center;

}

.about-image img{

    border-radius:20px;

    box-shadow:var(--shadow);

}

.about-content{

    display:grid;

    gap:20px;

}

.about-box{

    display:flex;

    gap:20px;

    padding:20px;

    background:#fff;

    border-radius:14.4px;

    box-shadow:var(--shadow);

    transition:.35s;

}

.about-box:hover{

    transform:translateY(-6.4px);

}

.about-box i{

    width:56px;

    height:56px;

    border-radius:14.4px;

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

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:22.4px;

    flex-shrink:0;

}

.about-box h3{

    color:var(--dark);

    margin-bottom:8px;

}

.about-box p{

    line-height:1.8;

}

/*========== COURSES ==========*/

/* .courses{

    background:var(--light);

}

.course-grid{

    display:grid;

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

    gap:24px;

} */

/*================ COURSES =================*/

.courses{

    position: relative;

    padding:96px 0;

    overflow:hidden;

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

}

/* Dark Overlay */

.courses::before{

    content:"";

    position:absolute;

    inset:0;

    /* background:linear-gradient(
        135deg,
        rgba(8,30,64,.92),
        rgba(10,102,194,.82) */
    /* ); */

}

/* Keep Content Above Overlay */

.courses .container{

    position:relative;

    z-index:2;

}

.course-card{

    background:#fff;

    padding:32px;

    border-radius:17.6px;

    text-align:center;

    transition:.35s;

    box-shadow:var(--shadow);

}

.course-card:hover{

    transform:translateY(-8px);

}

.course-card i{

    width:72px;

    height:72px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto;

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

    color:#fff;

    font-size:27.2px;

    margin-bottom:20px;

}

.course-card h3{

    color:var(--dark);

    margin-bottom:12px;

    font-size:19.2px;

}

.course-card p{

    line-height:1.8;

}

/*========== END OF PART 1 ==========*/
/*=================================================
WHY CHOOSE US
=================================================*/

.why-us{
    background:#fff;
}

.why-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.why-card{

    background:#fff;

    padding:32px 24px;

    border-radius:16px;

    text-align:center;

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

    transition:.35s;

    border:1px solid #edf3fb;

}

.why-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 48px rgba(0,0,0,.12);

}

.why-card i{

    width:72px;

    height:72px;

    border-radius:50%;

    margin:auto;

    margin-bottom:20px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    color:#fff;

    font-size:27.2px;

}

.why-card h3{

    color:var(--dark);

    margin-bottom:12px;

    font-size:19.2px;

}

.why-card p{

    line-height:1.8;

}

/*=================================================
APP SECTION
=================================================*/

.app-section{

    background:linear-gradient(to right,#f8fbff,#eef8ff);

}

.app-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:64px;

    align-items:center;

}

.app-image img{

    border-radius:24px;

    box-shadow:var(--shadow);

}

.mini-title{

    display:inline-block;

    color:var(--primary);

    font-weight:700;

    letter-spacing:1.6px;

    margin-bottom:12px;

}

.app-content h2{

    font-size:36.8px;

    color:var(--dark);

    margin-bottom:20px;

}

.app-content p{

    line-height:1.9;

    margin-bottom:28px;

}

.app-list{

    display:grid;

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

    gap:16px;

    margin-bottom:32px;

}

.app-list div{

    display:flex;

    align-items:center;

    gap:9.6px;

    font-weight:600;

}

.app-list i{

    color:var(--accent);

    font-size:16px;

}

/*=================================================
LEARNING PROCESS
=================================================*/

.process{

    background:#fff;

}

.process-grid{

    display:grid;

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

    gap:24px;

}

.step{

    position:relative;

    background:#fff;

    padding:32px 24px;

    border-radius:16px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.35s;

}

.step:hover{

    transform:translateY(-6.4px);

}

.step span{

    width:56px;

    height:56px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto;

    margin-bottom:20px;

    border-radius:50%;

    color:#fff;

    font-size:19.2px;

    font-weight:700;

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

}

.step h3{

    margin-bottom:12px;

    color:var(--dark);

}

.step p{

    line-height:1.8;

}

/*=================================================
COUNTER
=================================================*/

.counter{

    padding:72px 0;

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

}

.counter-grid{

    display:grid;

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

    gap:24px;

}

.counter-box{

    text-align:center;

    color:#fff;

}

.counter-box h2{

    font-size:46.4px;

    margin-bottom:8px;

}

.counter-box p{

    font-size:16px;

    opacity:.9;

}

/*=================================================
TESTIMONIAL
=================================================*/

.testimonial{

    background:#f9fbff;

}

.testimonial-grid{

    display:grid;

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

    gap:24px;

}

.review{

    background:#fff;

    padding:32px;

    border-radius:16px;

    box-shadow:var(--shadow);

    transition:.35s;

}

.review:hover{

    transform:translateY(-6.4px);

}

.review p{

    line-height:1.9;

    margin-bottom:20px;

}

.review h4{

    color:#ffc107;

    margin-bottom:8px;

    font-size:17.6px;

}

.review span{

    color:var(--dark);

    font-weight:600;

}

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

.faq{

    background:#fff;

}

.faq-box{

    max-width:720px;

    margin:auto;

}

.faq-item{

    background:#fff;

    margin-bottom:16px;

    padding:24px;

    border-radius:12.8px;

    box-shadow:var(--shadow);

}

.faq-item h3{

    color:var(--dark);

    margin-bottom:9.6px;

}

.faq-item p{

    line-height:1.8;

}

/*=================================================
CALL TO ACTION
=================================================*/

.cta{

    padding:80px 0;

    text-align:center;

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

    color:#fff;

}

.cta h2{

    font-size:40px;

    margin-bottom:16px;

}

.cta p{

    width:70%;

    margin:auto;

    margin-bottom:32px;

    line-height:1.9;

}

.cta .btn-primary{

    background:#fff;

    color:var(--primary);

    box-shadow:none;

}

.cta .btn-primary:hover{

    background:#f5f5f5;

}

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

footer{

    background:#0b1f3a;

    color:#d9e5f7;

    padding-top:64px;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:32px;

    padding-bottom:48px;

}

footer h2,
footer h3{

    color:#fff;

    margin-bottom:20px;

}

footer p{

    line-height:1.9;

}

footer ul{

    display:flex;

    flex-direction:column;

    gap:12px;

}

footer ul li{

    color:#d9e5f7;

}

footer a{

    color:#d9e5f7;

    transition:.3s;

}

footer a:hover{

    color:#fff;

    padding-left:6.4px;

}

footer i{

    margin-right:8px;

    color:var(--secondary);

}

.copyright{

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

    padding:20px;

    text-align:center;

    font-size:12px;

}
/*=========================================
RESPONSIVE DESIGN
=========================================*/

@media (max-width:960px){

.hero-left h1{

font-size:41.6px;

}

.section-title h2{

font-size:32px;

}

}

@media (max-width:793.6px){

.section{

padding:64px 0;

}

.nav-links{

position:fixed;

top:72px;

left:-100%;

width:224px;

height:calc(100vh - 72px);

background:#fff;

display:flex;

flex-direction:column;

padding:32px;

gap:24px;

transition:.4s;

box-shadow:0 16px 32px rgba(0,0,0,.08);

}

.nav-links.active{

left:0;

}

.menu-btn{

display:block;

}

.header-btn{

display:none;

}

.hero-grid,

.about-grid,

.app-grid{

grid-template-columns:1fr;

}

.hero-right{

order:-1;

}

.hero{

text-align:center;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;

}

.course-grid,

.why-grid,

.process-grid,

.counter-grid,

.testimonial-grid{

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

}

.footer-grid{

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

}

}

@media(max-width:614.4px){

.hero{

padding-top:104px;

}

.hero-left h1{

font-size:33.6px;

}

.section-title h2{

font-size:27.2px;

}

.section-title p{

font-size:12px;

}

.hero-buttons{

flex-direction:column;

}

.hero-stats{

flex-wrap:wrap;

gap:24px;

}

.course-grid,

.why-grid,

.process-grid,

.counter-grid,

.testimonial-grid,

.footer-grid,

.app-list{

grid-template-columns:1fr;

}

.cta h2{

font-size:28.8px;

}

.cta p{

width:100%;

}

.app-content h2{

font-size:27.2px;

}

}

@media(max-width:400px){

.container{

width:92%;

}

.hero-left h1{

font-size:27.2px;

}

.hero-left p{

font-size:12.8px;

}

.btn-primary,

.btn-outline{

width:100%;

}

.about-box{

flex-direction:column;

text-align:center;

}

.about-box i{

margin:auto;

}

.logo-text h2{

font-size:16px;

}

.logo-text p{

font-size:9.6px;

}

.section-title h2{

font-size:24px;

}

.course-card{

padding:24px;

}

.review{

padding:24px;

}

.step{

padding:24px;

}

}

/*=========================================
SCROLLBAR
=========================================*/

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-track{

background:#edf5ff;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(var(--primary),var(--secondary));

border-radius:16px;

}

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

::selection{

background:var(--primary);

color:#fff;

}

/*=========================================
IMAGE HOVER
=========================================*/

.about-image img,
.hero-right img,
.app-image img{

transition:.5s;

}

.about-image img:hover,
.hero-right img:hover,
.app-image img:hover{

transform:scale(1.03);

}

/*=========================================
CARD HOVER
=========================================*/

.course-card,
.why-card,
.review,
.step,
.about-box{

transition:.35s;

}

.course-card:hover,
.why-card:hover,
.review:hover,
.step:hover,
.about-box:hover{

transform:translateY(-8px);

}

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

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(48px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

.hero-left,
.hero-right,
.about-image,
.about-content,
.course-card,
.why-card,
.review,
.step{

animation:fadeUp .9s ease;

}

/*=========================================
BACK TO TOP BUTTON
=========================================*/

.top-btn{

position:fixed;

right:20px;

bottom:20px;

width:44px;

height:44px;

border-radius:50%;

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

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:17.6px;

cursor:pointer;

box-shadow:0 12px 28px rgba(0,0,0,.18);

opacity:0;

visibility:hidden;

transition:.4s;

z-index:999;

}

.top-btn.show{

opacity:1;

visibility:visible;

}

.top-btn:hover{

transform:translateY(-4px);

}

/*=========================================
SMOOTH TRANSITION
=========================================*/

*{

transition:background .3s,color .3s,border .3s;

}

/*=========================================
UTILITY CLASSES
=========================================*/

.text-center{

text-align:center;

}

.mt-1{

margin-top:8px;

}

.mt-2{

margin-top:16px;

}

.mt-3{

margin-top:24px;

}

.mt-4{

margin-top:32px;

}

.mb-1{

margin-bottom:8px;

}

.mb-2{

margin-bottom:16px;

}

.mb-3{

margin-bottom:24px;

}

.shadow{

box-shadow:var(--shadow);

}

.radius{

border-radius:var(--radius);

}

/*=========================================
END OF STYLE.CSS
=========================================*/
/*================ HEADER =================*/

.header{

position:fixed;

top:16px;

left:0;

width:100%;

z-index:999;

}

.navbar{

display:flex;

justify-content:space-between;

align-items:center;

padding:12px 28px;

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

backdrop-filter:blur(14.4px);

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

border-radius:14.4px;

box-shadow:0 16px 36px rgba(0,0,0,.08);

transition:.4s;

}

/* Scroll Effect */

.header.scrolled .navbar{

padding:9.6px 28px;

background:#ffffff;

box-shadow:0 14.4px 32px rgba(0,0,0,.12);

}

/* Logo */

.logo{

display:flex;

align-items:center;

gap:12px;

}

.logo-icon{

width:48px;

height:48px;

border-radius:14.4px;

background:linear-gradient(135deg,#007BFF,#00C897);

display:flex;

align-items:center;

justify-content:center;

font-size:22.4px;

color:#fff;

box-shadow:0 8px 20px rgba(0,123,255,.25);

}

.logo-content h2{

font-size:20.8px;

color:#162447;

font-weight:700;

margin-bottom:1.6px;

}

.logo-content span{

font-size:10.4px;

color:#777;

letter-spacing:.3.2px;

}

/* Navigation */

.nav-links{

display:flex;

gap:32px;

}

.nav-links li{

position:relative;

}

.nav-links a{

font-size:12.8px;

font-weight:600;

color:#162447;

transition:.35s;

padding:6.4px 0;

position:relative;

}

/* Animated Underline */

.nav-links a::after{

content:"";

position:absolute;

bottom:0;

left:0;

width:0;

height:2.4px;

background:linear-gradient(90deg,#007BFF,#00C897);

border-radius:16px;

transition:.35s;

}

.nav-links a:hover::after,

.nav-links a.active::after{

width:100%;

}

.nav-links a:hover{

color:#007BFF;

}

/* Right Side */

.nav-right{

display:flex;

align-items:center;

gap:16px;

}

/* Download Button */

.download-btn{

display:flex;

align-items:center;

gap:8px;

padding:12px 22.4px;

border-radius:40px;

background:linear-gradient(135deg,#007BFF,#00C897);

color:#fff;

font-weight:600;

transition:.35s;

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

}

.download-btn:hover{

transform:translateY(-3.2px);

box-shadow:0 16px 36px rgba(0,123,255,.35);

}

/* Menu */

.menu-btn{

display:none;

font-size:22.4px;

cursor:pointer;

color:#162447;

}

/* Mobile */

@media(max-width:793.6px){

.nav-links{

position:fixed;

left:-100%;

top:88px;

width:224px;

height:calc(100vh - 96px);

background:white;

display:flex;

flex-direction:column;

padding:32px;

gap:24px;

border-radius:16px;

box-shadow:0 16px 36px rgba(0,0,0,.12);

transition:.4s;

}

.nav-links.active{

left:16px;

}

.download-btn{

display:none;

}

.menu-btn{

display:block;

}

}

@media(max-width:614.4px){

.logo-content h2{

font-size:17.6px;

}

.logo-content span{

display:none;

}

.logo-icon{

width:41.6px;

height:41.6px;

font-size:19.2px;

}

.navbar{

padding:11.2px 16px;

}

}

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

.hero{

position:relative;

padding:136px 0 96px;

overflow:hidden;

background:linear-gradient(135deg,#edf7ff,#ffffff,#eef9ff);

}

.hero-grid{

display:grid;

grid-template-columns:1.1fr 1fr;

align-items:center;

gap:64px;

position:relative;

z-index:10;

}

.hero-left h1{

font-size:52px;

font-weight:800;

line-height:1.15;

margin:24px 0;

color:#162447;

}

.hero-left h1 span{

background:linear-gradient(90deg,#007BFF,#00B894);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero-left p{

font-size:14.4px;

line-height:1.9;

color:#666;

margin-bottom:32px;

}

.badge{

display:inline-flex;

align-items:center;

gap:8px;

padding:9.6px 17.6px;

background:white;

border-radius:40px;

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

font-weight:600;

color:#007BFF;

}

.hero-buttons{

display:flex;

gap:16px;

margin-bottom:48px;

}

.hero-stats{

display:flex;

gap:20px;

}

.stat-box{

background:white;

padding:20px;

border-radius:14.4px;

text-align:center;

box-shadow:0 16px 36px rgba(0,0,0,.08);

min-width:128px;

transition:.4s;

}

.stat-box:hover{

transform:translateY(-8px);

}

.stat-box h2{

font-size:32px;

color:#007BFF;

margin-bottom:6.4px;

}

.image-card{

position:relative;

background:white;

padding:16px;

border-radius:24px;

box-shadow:0 24px 64px rgba(0,0,0,.12);

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

}

.image-card img{

border-radius:16px;

}

/* Background Shapes */

.hero-bg-shape{

position:absolute;

border-radius:50%;

filter:blur(72px);

opacity:.45;

}

.shape1{

width:280px;

height:280px;

background:#4facfe;

left:-80px;

top:-64px;

animation:move1 10s linear infinite;

}

.shape2{

width:240px;

height:240px;

background:#00d2ff;

right:-64px;

top:96px;

animation:move2 9s linear infinite;

}

.shape3{

width:224px;

height:224px;

background:#00c896;

bottom:-96px;

left:35%;

animation:move3 8s linear infinite;

}

/* Floating Icons */

.floating-icon{

position:absolute;

font-size:36px;

color:#007BFF;

opacity:.15;

z-index:2;

animation:floating 6s infinite ease-in-out;

}

.stethoscope{

top:18%;

left:8%;

}

.heart{

right:10%;

top:28%;

}

.syringe{

bottom:12%;

left:45%;

}

/* Animations */

@keyframes floatImage{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-14.4px);

}

100%{

transform:translateY(0);

}

}

@keyframes floating{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-24px);

}

100%{

transform:translateY(0);

}

}

@keyframes move1{

50%{

transform:translate(48px,32px);

}

}

@keyframes move2{

50%{

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

}

}

@keyframes move3{

50%{

transform:translateY(-40px);

}

}

/* Responsive */

@media(max-width:792.8px){

.hero-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;

flex-wrap:wrap;

}

.hero-left h1{

font-size:38.4px;

}

}
/*================ ABOUT =================*/

.about{

background:#f8fbff;

position:relative;

overflow:hidden;

}

.about-wrapper{

display:grid;

grid-template-columns:1fr 1fr;

gap:64px;

align-items:center;

margin-top:56px;

}

.about-left{

position:relative;

}

.about-left img{

border-radius:24px;

box-shadow:0 24px 56px rgba(0,0,0,.12);

}

.experience-card{

position:absolute;

left:-20px;

bottom:32px;

background:#fff;

padding:20px;

border-radius:16px;

box-shadow:0 16px 40px rgba(0,0,0,.10);

text-align:center;

}

.experience-card h2{

font-size:32px;

color:#0A66C2;

margin-bottom:4px;

}

.course-card-small{

position:absolute;

top:32px;

right:-24px;

display:flex;

gap:12px;

align-items:center;

background:#fff;

padding:14.4px 20px;

border-radius:14.4px;

box-shadow:0 16px 40px rgba(0,0,0,.10);

}

.course-card-small i{

font-size:24px;

color:#0A66C2;

}

.about-right h3{

font-size:36.8px;

line-height:1.3;

margin-bottom:20px;

color:#162447;

}

.about-right h3 span{

color:#0A66C2;

}

.about-right p{

line-height:1.9;

margin-bottom:16px;

}

.about-list{

display:grid;

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

gap:14.4px;

margin:28px 0;

}

.about-list div{

display:flex;

gap:9.6px;

align-items:center;

font-weight:600;

}

.about-list i{

color:#00C897;

}

.about-features{

display:grid;

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

gap:24px;

margin-top:80px;

}

.feature-card{

background:#fff;

padding:32px 24px;

border-radius:16px;

text-align:center;

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

transition:.4s;

}

.feature-card:hover{

transform:translateY(-8px);

}

.feature-card i{

font-size:33.6px;

color:#0A66C2;

margin-bottom:16px;

}

.feature-card h3{

margin-bottom:12px;

color:#162447;

}

.feature-card p{

line-height:1.8;

}

@media(max-width:792.8px){

.about-wrapper{

grid-template-columns:1fr;

}

.about-features{

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

}

.about-list{

grid-template-columns:1fr;

}

}

@media(max-width:614.4px){

.about-features{

grid-template-columns:1fr;

}

.about-right h3{

font-size:27.2px;

}

.course-card-small,

.experience-card{

position:relative;

left:0;

right:0;

top:0;

bottom:0;

margin-top:16px;

}

}
/*================ COURSES =================*/

/* /*================ COURSES =================*/

.courses{

    position: relative;

    padding:96px 0;

    overflow:hidden;

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

}

/* Dark Overlay */

.courses::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(8,30,64,.92),
        rgba(10,102,194,.82)
    );

}

/* Keep Content Above Overlay */

.courses .container{

    position:relative;

    z-index:2;

} */

.course-card{

background:#fff;

border-radius:20px;

overflow:hidden;

box-shadow:0 16px 40px rgba(0,0,0,.08);

transition:.4s;

}

.course-card:hover{

transform:translateY(-12px);

}

.course-image{

position:relative;

overflow:hidden;

}

.course-image img{

width:100%;

height:192px;

object-fit:cover;

transition:.5s;

}

.course-card:hover img{

transform:scale(1.08);

}

.course-tag{

position:absolute;

top:14.4px;

left:14.4px;

background:#0A66C2;

color:#fff;

padding:6.4px 14.4px;

border-radius:40px;

font-size:10.4px;

font-weight:600;

}

.course-content{

padding:24px;

}

.course-content h3{

font-size:22.4px;

margin-bottom:12px;

color:#162447;

}

.course-content p{

line-height:1.8;

margin-bottom:20px;

}

.course-info{

display:flex;

justify-content:space-between;

margin-bottom:24px;

font-size:11.2px;

color:#555;

}

.course-info span{

display:flex;

align-items:center;

gap:6.4px;

}

.course-info i{

color:#0A66C2;

}

.course-btn{

display:flex;

justify-content:space-between;

align-items:center;

padding:12px 17.6px;

background:#eef7ff;

border-radius:9.6px;

font-weight:600;

color:#0A66C2;

transition:.35s;

}

.course-btn:hover{

background:#0A66C2;

color:#fff;

}

.course-btn i{

transition:.35s;

}

.course-btn:hover i{

transform:translateX(6.4px);

}

@media(max-width:792.8px){

.course-grid{

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

}

}

@media(max-width:614.4px){

.course-grid{

grid-template-columns:1fr;
display:flex;

}

}
.courses .section-title span{

    color:#7dd3fc;

}

.courses .section-title h2{

    color:#fff;

}

.courses .section-title p{

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

}
.course-card{

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

    backdrop-filter:blur(9.6px);

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

    border-radius:16px;

    padding:32px 24px;

    text-align:center;

    transition:.4s;

}

.course-card:hover{

    transform:translateY(-9.6px);

    background:#ffffff;

}

.course-card i{

    font-size:44px;

    color:#00d4ff;

    margin-bottom:20px;

}

.course-card:hover i{

    color:#0A66C2;

}

.course-card h3{

    color:#fff;

    margin-bottom:12px;

    transition:.3s;

}

.course-card p{

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

    transition:.3s;

}

.course-card:hover h3{

    color:#162447;

}

.course-card:hover p{

    color:#666;

}
/*==============================
MEDICAL PROGRAMS
==============================*/

.medical-programs{

    position:relative;

    padding:96px 0;

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

    overflow:hidden;

}

.medical-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(rgba(5,20,45,.90),rgba(10,90,170,.82));

}

.medical-programs .container{

    position:relative;

    z-index:2;

}

/* Heading */

.program-heading{

    text-align:center;

    margin-bottom:56px;

}

.program-heading span{

    color:#66d9ff;

    font-weight:700;

    letter-spacing:1.6px;

    text-transform:uppercase;

}

.program-heading h2{

    color:#fff;

    font-size:38.4px;

    margin:14.4px 0;

}

.program-heading p{

    color:#e4e4e4;

    max-width:560px;

    margin:auto;

    line-height:1.8;

}

/* Grid */

.program-grid{

    display:grid;

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

    gap:28px;

}

/* Card */

.program-box{

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

    backdrop-filter:blur(12.8px);

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

    border-radius:20px;

    padding:36px 28px;

    text-align:center;

    transition:.45s;

    position:relative;

    overflow:hidden;

}

.program-box::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(90deg,#00c6ff,#00ffae);

    transform:scaleX(0);

    transition:.45s;

}

.program-box:hover::before{

    transform:scaleX(1);

}

.program-box:hover{

    transform:translateY(-12px);

    background:#fff;

}

/* Icon */

.program-icon{

    width:76px;

    height:76px;

    margin:auto;

    border-radius:50%;

    background:linear-gradient(135deg,#00b4ff,#00d68f);

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:20px;

    transition:.4s;

}

.program-icon i{

    font-size:33.6px;

    color:#fff;

}

.program-box:hover .program-icon{

    transform:rotate(10deg) scale(1.08);

}

/* Content */

.program-box h3{

    color:#fff;

    margin-bottom:12px;

    font-size:20.8px;

    transition:.3s;

}

.program-box p{

    color:#dcdcdc;

    line-height:1.8;

    margin-bottom:20px;

    transition:.3s;

}

.program-box:hover h3{

    color:#162447;

}

.program-box:hover p{

    color:#666;

}

/* Button */

.program-box a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#00d4ff;

    font-weight:600;

    transition:.3s;

}

.program-box:hover a{

    color:#0A66C2;

}

.program-box a i{

    transition:.3s;

}

.program-box:hover a i{

    transform:translateX(4.8px);

}

/* Responsive */

@media(max-width:793.6px){

.program-grid{

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

}

}

@media(max-width:614.4px){

.program-grid{

grid-template-columns:1fr;

}

.program-heading h2{

font-size:28.8px;

}

}
/*==================================
WHY VCAB
==================================*/

.vcab-benefits{

padding:96px 0;

background:#ffffff;

}

.benefit-wrapper{

display:grid;

grid-template-columns:45% 55%;

gap:56px;

align-items:center;

}

/* LEFT */

.benefit-tag{

display:inline-block;

padding:8px 16px;

border-radius:40px;

background:#eaf5ff;

color:#0A66C2;

font-weight:700;

letter-spacing:1px;

margin-bottom:20px;

}

.benefit-left h2{

font-size:38.4px;

line-height:1.3;

margin-bottom:20px;

color:#162447;

}

.benefit-left h2 span{

color:#0A66C2;

}

.benefit-left p{

line-height:1.9;

color:#666;

margin-bottom:32px;

}

.benefit-counter{

display:flex;

gap:40px;

}

.benefit-counter h3{

font-size:33.6px;

color:#0A66C2;

}

.benefit-counter span{

color:#666;

}

/* RIGHT */

.benefit-right{

display:grid;

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

gap:20px;

}

.benefit-item{

background:#fff;

padding:24px;

border-radius:16px;

display:flex;

gap:16px;

align-items:flex-start;

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

transition:.4s;

border:1px solid #eef2f7;

}

.benefit-item:hover{

transform:translateY(-8px);

}

.benefit-icon{

width:56px;

height:56px;

border-radius:14.4px;

background:linear-gradient(135deg,#0A66C2,#00C897);

display:flex;

justify-content:center;

align-items:center;

flex-shrink:0;

}

.benefit-icon i{

font-size:24px;

color:#fff;

}

.benefit-item h3{

font-size:17.6px;

margin-bottom:8px;

color:#162447;

}

.benefit-item p{

line-height:1.7;

color:#666;

}

/* stagger effect */

.benefit-item:nth-child(2),
.benefit-item:nth-child(4),
.benefit-item:nth-child(6){

margin-top:32px;

}

/* Responsive */

@media(max-width:793.6px){

.benefit-wrapper{

grid-template-columns:1fr;

}

.benefit-right{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:614.4px){

.benefit-right{

grid-template-columns:1fr;

}

.benefit-item:nth-child(2),
.benefit-item:nth-child(4),
.benefit-item:nth-child(6){

margin-top:0;

}

.benefit-counter{

justify-content:space-between;

gap:16px;

}

.benefit-left h2{

font-size:28.8px;

}

}
/*======================================
ACADEMY APP
======================================*/

.academy-app-showcase{

padding:96px 0;

background:linear-gradient(135deg,#eef7ff,#ffffff);

position:relative;

overflow:hidden;

}

.app-bg-circle{

position:absolute;

border-radius:50%;

filter:blur(64px);

opacity:.4;

}

.app-circle-one{

width:280px;

height:280px;

background:#00c6ff;

top:-96px;

left:-96px;

}

.app-circle-two{

width:240px;

height:240px;

background:#0A66C2;

bottom:-80px;

right:-64px;

}

.academy-app-layout{

display:grid;

grid-template-columns:45% 55%;

align-items:center;

gap:64px;

}

/* PHONE */

.academy-phone{

position:relative;

display:flex;

justify-content:center;

}

.phone-shadow{

position:absolute;

width:224px;

height:448px;

background:#0A66C2;

border-radius:40px;

filter:blur(32px);

opacity:.2;

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

}

.academy-phone img{

width:100%;
height :100%;

position:relative;

z-index:2;

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

border-radius:16px;
}

/* Floating Cards */

.download-card{

position:absolute;

left:-16px;

top:96px;

background:#fff;

padding:14.4px 17.6px;

border-radius:14.4px;

display:flex;

gap:12px;

align-items:center;

box-shadow:0 16px 32px rgba(0,0,0,.08);

z-index:5;

}

.download-card i{

font-size:22.4px;

color:#0A66C2;

}

.download-card h3{

font-size:22.4px;

color:#162447;

}

.rating-card{

position:absolute;

right:-8px;

bottom:72px;

background:#fff;

padding:12px 20px;

border-radius:32px;

box-shadow:0 16px 32px rgba(0,0,0,.08);

font-weight:700;

color:#ff9800;

}

/* RIGHT */

.app-small-title{

display:inline-block;

padding:8px 16px;

background:#e8f4ff;

border-radius:40px;

color:#0A66C2;

font-weight:700;

margin-bottom:20px;

}

.academy-app-info h2{

font-size:40px;

line-height:1.2;

margin-bottom:20px;

color:#162447;

}

.academy-app-info h2 span{

color:#0A66C2;

}

.academy-app-info p{

line-height:1.9;

color:#666;

margin-bottom:28px;

}

/* FEATURES */

.academy-feature-grid{

display:grid;

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

gap:16px;

margin-bottom:32px;

}

.academy-feature{

display:flex;

align-items:center;

gap:12px;

background:#fff;

padding:14.4px;

border-radius:12.8px;

box-shadow:0 12px 24px rgba(0,0,0,.06);

transition:.35s;

}

.academy-feature:hover{

transform:translateY(-4.8px);

}

.academy-feature i{

width:38.4px;

height:38.4px;

display:flex;

justify-content:center;

align-items:center;

background:linear-gradient(135deg,#0A66C2,#00c897);

color:#fff;

border-radius:11.2px;

}

/* BUTTONS */

.app-buttons{

display:flex;

gap:16px;

}

.download-app-btn{

padding:12.8px 28px;

border-radius:40px;

background:linear-gradient(135deg,#0A66C2,#00c897);

color:#fff;

font-weight:600;

display:flex;

align-items:center;

gap:9.6px;

transition:.35s;

}

.download-app-btn:hover{

transform:translateY(-4px);

}

.learn-btn{

padding:12.8px 28px;

border-radius:40px;

border:1.6px solid #0A66C2;

color:#0A66C2;

font-weight:600;

transition:.35s;

}

.learn-btn:hover{

background:#0A66C2;

color:#fff;

}

/* Animation */

@keyframes phoneFloat{

0%,100%{transform:translateY(0);}

50%{transform:translateY(-14.4px);}

}

@keyframes floatShadow{

0%,100%{transform:scale(.95);}

50%{transform:scale(1.05);}

}

/* Responsive */

@media(max-width:792.8px){

.academy-app-layout{

grid-template-columns:1fr;

text-align:center;

}

.download-card,

.rating-card{

display:none;

}

.academy-feature-grid{

grid-template-columns:1fr;

}

.app-buttons{

justify-content:center;

}

}

@media(max-width:614.4px){

.academy-app-info h2{

font-size:30.4px;

}

.academy-phone img{

width:192px;

}

}
/*====================================
LEARNING JOURNEY
====================================*/

.learning-journey{

    padding:96px 0;

    background:#f8fbff;

}

/* Heading */

.journey-heading{

    text-align:center;

    margin-bottom:72px;

}

.journey-heading span{

    color:#0A66C2;

    font-weight:700;

    letter-spacing:1.6px;

}

.journey-heading h2{

    font-size:38.4px;

    margin:14.4px 0;

    color:#162447;

}

.journey-heading p{

    max-width:560px;

    margin:auto;

    line-height:1.8;

    color:#666;

}

/* Timeline */

.journey-line{

    position:relative;

    display:grid;

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

    gap:28px;

}

.journey-line::before{

    content:"";

    position:absolute;

    top:33.6px;

    left:10%;

    width:80%;

    height:3.2px;

    background:linear-gradient(90deg,#00C6FF,#0A66C2,#00C897);

    z-index:1;

}

/* Card */

.journey-card{

    position:relative;

    text-align:center;

    z-index:2;

}

/* Number */

.journey-number{

    width:68px;

    height:68px;

    margin:auto;

    border-radius:50%;

    background:linear-gradient(135deg,#00C6FF,#0A66C2);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22.4px;

    font-weight:700;

    margin-bottom:28px;

    box-shadow:0 16px 32px rgba(10,102,194,.25);

    transition:.4s;

}

/* Content */

.journey-content{

    background:#fff;

    border-radius:19.2px;

    padding:28px 22.4px;

    box-shadow:0 16px 36px rgba(0,0,0,.07);

    transition:.4s;

}

.journey-content i{

    width:60px;

    height:60px;

    margin:auto;

    border-radius:14.4px;

    background:linear-gradient(135deg,#00C6FF,#00C897);

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:24px;

    margin-bottom:20px;

}

.journey-content h3{

    color:#162447;

    margin-bottom:14.4px;

    font-size:19.2px;

}

.journey-content p{

    color:#666;

    line-height:1.8;

}

/* Hover */

.journey-card:hover .journey-number{

    transform:scale(1.1) rotate(8deg);

}

.journey-card:hover .journey-content{

    transform:translateY(-9.6px);

    box-shadow:0 24px 48px rgba(10,102,194,.15);

}

/* Responsive */

@media(max-width:793.6px){

.journey-line{

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

}

.journey-line::before{

display:none;

}

}

@media(max-width:614.4px){

.journey-line{

grid-template-columns:1fr;

}

.journey-heading h2{

font-size:28.8px;

}

}
/*====================================
ACADEMY STATISTICS
====================================*/

.academy-statistics{

    position:relative;

    padding:96px 0;

    overflow:hidden;

    background:linear-gradient(135deg,#061A3A,#0A66C2);

}

/* Glow */

.stats-glow{

    position:absolute;

    width:280px;

    height:280px;

    border-radius:50%;

    filter:blur(72px);

    opacity:.25;

}

.glow-left{

    top:-96px;

    left:-96px;

    background:#00E1FF;

}

.glow-right{

    bottom:-120px;

    right:-96px;

    background:#00D084;

}

/* Heading */

.stats-heading{

    text-align:center;

    margin-bottom:56px;

    position:relative;

    z-index:2;

}

.stats-heading span{

    color:#8BE7FF;

    letter-spacing:1.6px;

    font-weight:700;

}

.stats-heading h2{

    color:#fff;

    font-size:36.8px;

    margin:14.4px 0;

}

.stats-heading p{

    max-width:576px;

    margin:auto;

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

    line-height:1.8;

}

/* Grid */

.stats-wrapper{

    display:grid;

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

    gap:24px;

    position:relative;

    z-index:2;

}

/* Card */

.stats-card{

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

    backdrop-filter:blur(11.2px);

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

    border-radius:19.2px;

    padding:32px 20px;

    text-align:center;

    transition:.45s;

}

.stats-card:hover{

    transform:translateY(-9.6px);

    background:#ffffff;

}

/* Icon */

.stats-icon{

    width:72px;

    height:72px;

    margin:auto;

    border-radius:50%;

    background:linear-gradient(135deg,#00C6FF,#00D084);

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:20px;

    transition:.4s;

}

.stats-icon i{

    color:#fff;

    font-size:30.4px;

}

.stats-card:hover .stats-icon{

    transform:rotate(12deg) scale(1.08);

}

/* Number */

.counter-number{

    font-size:38.4px;

    color:#fff;

    margin-bottom:9.6px;

    font-weight:800;

    transition:.3s;

}

.stats-card:hover .counter-number{

    color:#0A66C2;

}

/* Text */

.stats-card p{

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

    font-size:13.6px;

    transition:.3s;

}

.stats-card:hover p{

    color:#555;

}

/* Responsive */

@media(max-width:792.8px){

.stats-wrapper{

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

}

}

@media(max-width:614.4px){

.stats-wrapper{

grid-template-columns:1fr;

}

.stats-heading h2{

font-size:27.2px;

}

}
/*==========================
TESTIMONIAL
==========================*/

.student-feedback{

padding:96px 0;

background:#f8fbff;

}

.feedback-heading{

text-align:center;

margin-bottom:56px;

}

.feedback-heading span{

color:#0A66C2;

font-weight:700;

letter-spacing:1.6px;

}

.feedback-heading h2{

font-size:36.8px;

margin:16px 0;

color:#162447;

}

.feedback-heading p{

max-width:560px;

margin:auto;

color:#666;

line-height:1.8;

}

/* Card */

.feedback-card{

background:#fff;

border-radius:20px;

padding:36px;

box-shadow:0 16px 36px rgba(0,0,0,.08);

transition:.4s;

height:100%;

}

.feedback-card:hover{

transform:translateY(-8px);

}

.quote-icon{

width:56px;

height:56px;

border-radius:50%;

background:linear-gradient(135deg,#0A66C2,#00C897);

display:flex;

justify-content:center;

align-items:center;

margin-bottom:20px;

}

.quote-icon i{

font-size:22.4px;

color:#fff;

}

.feedback-card p{

line-height:1.9;

margin-bottom:28px;

color:#666;

}

/* User */

.feedback-user{

display:flex;

align-items:center;

gap:14.4px;

}

.feedback-user img{

width:60px;

height:60px;

border-radius:50%;

object-fit:cover;

border:3.2px solid #0A66C2;

}

.feedback-user h3{

margin-bottom:4.8px;

color:#162447;

}

.feedback-user span{

font-size:11.2px;

color:#666;

}

.stars{

margin-top:6.4px;

color:#FFD700;

font-size:14.4px;

}

/* Pagination */

.swiper-pagination{

margin-top:32px;

position:relative;

}

.swiper-pagination-bullet{

width:11.2px;

height:11.2px;

background:#0A66C2;

opacity:.3;

}

.swiper-pagination-bullet-active{

opacity:1;

width:28px;

border-radius:16px;

}
/*=================================
STUDENT VOICES
=================================*/

.student-voices{

    padding:96px 0;

    background:#f8fbff;

    overflow:hidden;

}

.voices-heading{

    text-align:center;

    margin-bottom:56px;

}

.voices-heading span{

    color:#0A66C2;

    font-weight:700;

    letter-spacing:1.6px;

}

.voices-heading h2{

    font-size:36.8px;

    margin:14.4px 0;

    color:#162447;

}

.voices-heading p{

    max-width:600px;

    margin:auto;

    color:#666;

    line-height:1.8;

}

/* Slider */

.review-slider{

    overflow:hidden;

    position:relative;

}

.review-track{

    display:flex;

    gap:24px;

    transition:transform .5s linear;

}

/* Card */

.voice-card{

    min-width:304px;

    background:#fff;

    border-radius:20px;

    padding:28px;

    box-shadow:0 16px 36px rgba(0,0,0,.08);

    transition:.35s;

    flex-shrink:0;

}

.voice-card:hover{

    transform:translateY(-8px);

}

.voice-top{

    display:flex;

    align-items:center;

    gap:14.4px;

    margin-bottom:16px;

}

.voice-top img{

    width:56px;

    height:56px;

    border-radius:50%;

    object-fit:cover;

    border:3.2px solid #0A66C2;

}

.voice-top h3{

    color:#162447;

    margin-bottom:4px;

}

.voice-top span{

    color:#666;

    font-size:11.2px;

}

.voice-stars{

    color:#ffc107;

    font-size:16px;

    margin-bottom:16px;

}

.voice-card p{

    line-height:1.9;

    color:#666;

}

/* Responsive */

@media(max-width:614.4px){

.voice-card{

min-width:256px;

}

.voices-heading h2{

font-size:27.2px;

}

}
.review-slider{
    width:100%;
    overflow:hidden;
    position:relative;
    margin-top:48px;
}

.review-track{
    display:flex;
    gap:20px;
    width:max-content;
    animation:scrollReviews 35s linear infinite;
}

.review-slider:hover .review-track{
    animation-play-state:paused;
}

@keyframes scrollReviews{

0%{
    transform:translateX(0);
}

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

}

.voice-card{

    width:304px;
    flex-shrink:0;

    background:#fff;
    border-radius:20px;
    padding:28px;
    box-shadow:0 12px 32px rgba(0,0,0,.08);

}
/*====================================
HELP CENTER
====================================*/

.help-center-section{

padding:96px 0;

background:#f7fbff;

}

.help-wrapper{

display:grid;

grid-template-columns:336px 1fr;

gap:56px;

align-items:start;

}

/* Left */

.help-left h2{

font-size:36.8px;

color:#162447;

margin:16px 0;

line-height:1.2;

}

.help-tag{

display:inline-block;

padding:6.4px 14.4px;

background:#e8f4ff;

color:#0A66C2;

font-weight:700;

border-radius:24px;

letter-spacing:1px;

}

.help-left p{

line-height:1.9;

color:#666;

margin-bottom:28px;

}

.help-info{

display:flex;

gap:20px;

margin-bottom:32px;

}

.help-count{

background:#fff;

padding:20px;

border-radius:14.4px;

box-shadow:0 8px 24px rgba(0,0,0,.06);

flex:1;

text-align:center;

}

.help-count h3{

font-size:27.2px;

color:#0A66C2;

margin-bottom:6.4px;

}

.help-btn{

display:inline-flex;

align-items:center;

gap:8px;

padding:12.8px 24px;

border-radius:40px;

background:linear-gradient(135deg,#0A66C2,#00C897);

color:#fff;

font-weight:600;

text-decoration:none;

transition:.35s;

}

.help-btn:hover{

transform:translateY(-4px);

}

.help-btn i{

transition:.35s;

}

.help-btn:hover i{

transform:translateX(4.8px);

}

/* Right */

.question-card{

background:#fff;

border-radius:16px;

margin-bottom:16px;

box-shadow:0 8px 24px rgba(0,0,0,.06);

overflow:hidden;

transition:.35s;

}

.question-card:hover{

transform:translateY(-4px);

}

.question-head{

display:flex;

justify-content:space-between;

align-items:center;

padding:19.2px 24px;

cursor:pointer;

}

.question-head h3{

font-size:16px;

color:#162447;

padding-right:16px;

}

.question-head i{

width:33.6px;

height:33.6px;

border-radius:50%;

background:#eef7ff;

display:flex;

justify-content:center;

align-items:center;

color:#0A66C2;

transition:.4s;

}

.question-body{

max-height:0;

overflow:hidden;

transition:max-height .4s ease;

}

.question-body p{

padding:0 24px 20px;

line-height:1.8;

color:#666;

}

.question-card.active .question-body{

max-height:176px;

}

.question-card.active .question-head i{

transform:rotate(45deg);

background:#0A66C2;

color:#fff;

}

/* Responsive */

@media(max-width:793.6px){

.help-wrapper{

grid-template-columns:1fr;

}

}

@media(max-width:614.4px){

.help-left h2{

font-size:27.2px;

}

.help-info{

flex-direction:column;

}

}
.help-center-section{

    position:relative;

    padding:96px 0;

    overflow:hidden;

    background:linear-gradient(135deg,#071A3D 0%,#0A66C2 100%);

}

/* Left Glow */

.help-center-section::before{

    content:"";

    position:absolute;

    width:360px;

    height:360px;

    border-radius:50%;

    background:rgba(0,212,255,.18);

    filter:blur(96px);

    top:-144px;

    left:-96px;

}

/* Right Glow */

.help-center-section::after{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    border-radius:50%;

    background:rgba(0,200,151,.18);

    filter:blur(80px);

    bottom:-144px;

    right:-80px;

}

.help-wrapper{

    position:relative;

    z-index:2;

}
.help-left h2{
    color:#fff;
}

.help-left p{
    color:rgba(255,255,255,.85);
}

.help-tag{
    background:rgba(255,255,255,.15);
    color:#fff;
}
.help-center-section{

    padding:96px 0;

    background:
    radial-gradient(circle at top left,#0A66C2 0%,transparent 40%),
    radial-gradient(circle at bottom right,#00C897 0%,transparent 40%),
    #06142F;

}
.question-card{

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

    backdrop-filter:blur(16px);

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

    border-radius:17.6px;

    margin-bottom:17.6px;

    overflow:hidden;

    transition:.4s;

}

.question-card:hover{

    transform:translateY(-6.4px);

    border-color:#00D4FF;

}
.question-card{

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

    backdrop-filter:blur(16px);

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

    border-radius:17.6px;

    margin-bottom:17.6px;

    overflow:hidden;

    transition:.4s;

}

.question-card:hover{

    transform:translateY(-6.4px);

    border-color:#00D4FF;

}
.question-head i{

    background:#fff;

    color:#0A66C2;

}.question-head h3{

    color:#fff;

}
.question-body p{

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

}
/*=========================================
CAREER CTA
=========================================*/

.career-launch-pad{

    position:relative;

    padding:96px 0;

    overflow:hidden;

    background:linear-gradient(135deg,#041C3D,#0A66C2,#00B4DB);

}

/* Floating Glow */

.career-launch-pad::before{

    content:"";

    position:absolute;

    width:336px;

    height:336px;

    border-radius:50%;

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

    filter:blur(96px);

    top:-144px;

    left:-120px;

}

.career-launch-pad::after{

    content:"";

    position:absolute;

    width:280px;

    height:280px;

    border-radius:50%;

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

    filter:blur(80px);

    right:-96px;

    bottom:-96px;

}

.career-box{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1.3fr .9fr;

    gap:56px;

    align-items:center;

}

.career-label{

    display:inline-block;

    padding:8px 17.6px;

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

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

    border-radius:40px;

    color:#fff;

    font-weight:600;

    letter-spacing:1px;

    margin-bottom:20px;

}

.career-content h2{

    font-size:44.8px;

    line-height:1.15;

    color:#fff;

    margin-bottom:20px;

}

.career-content p{

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

    line-height:2;

    margin-bottom:32px;

    font-size:13.6px;

}

/* Buttons */

.career-buttons{

    display:flex;

    gap:16px;

    flex-wrap:wrap;

}

.career-primary-btn{

    padding:14.4px 30.4px;

    border-radius:40px;

    background:#fff;

    color:#0A66C2;

    font-weight:700;

    text-decoration:none;

    transition:.35s;

}

.career-primary-btn:hover{

    transform:translateY(-4.8px);

}

.career-secondary-btn{

    padding:14.4px 30.4px;

    border-radius:40px;

    border:1.6px solid rgba(255,255,255,.5);

    color:#fff;

    text-decoration:none;

    transition:.35s;

}

.career-secondary-btn:hover{

    background:#fff;

    color:#0A66C2;

}

/* Stats */

.career-stats{

    display:grid;

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

    gap:20px;

}

.career-stat-card{

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

    backdrop-filter:blur(14.4px);

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

    border-radius:19.2px;

    padding:28px;

    text-align:center;

    transition:.35s;

}

.career-stat-card:hover{

    transform:translateY(-8px);

    background:#fff;

}

.career-stat-card i{

    font-size:32px;

    color:#fff;

    margin-bottom:14.4px;

}

.career-stat-card:hover i{

    color:#0A66C2;

}

.career-stat-card h3{

    font-size:27.2px;

    color:#fff;

    margin-bottom:8px;

}

.career-stat-card span{

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

}

.career-stat-card:hover h3{

    color:#162447;

}

.career-stat-card:hover span{

    color:#666;

}

/* Responsive */

@media(max-width:792.8px){

.career-box{

grid-template-columns:1fr;

text-align:center;

}

.career-buttons{

justify-content:center;

}

}

@media(max-width:614.4px){

.career-content h2{

font-size:30.4px;

}

.career-stats{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:460.8px){

.career-stats{

grid-template-columns:1fr;

}

}
.career-launch-pad{

    position:relative;
    padding:96px 0;
    overflow:hidden;

    background:linear-gradient(
        135deg,
        #f8fcff 0%,
        #eef7ff 40%,
        #e2f3ff 100%
    );

}
.career-launch-pad{

    position:relative;
    padding:96px 0;

    background:
    linear-gradient(rgba(255,255,255,.92), rgba(245,250,255,.95)),
    url("./images/medimg2.jpg");

    background-size:cover;
    background-position:center;

}
.career-stat-card{

    background:#ffffff;

    border:1px solid rgba(10,102,194,.12);

    box-shadow:0 16px 36px rgba(0,0,0,.06);

}

.career-stat-card i{

    color:#0A66C2;

}

.career-stat-card h3{

    color:#162447;

}

.career-stat-card span{

    color:#666;

}

.career-stat-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 48px rgba(10,102,194,.15);

}
.career-secondary-btn{

    background:#fff;

    border:1.6px solid #0A66C2;

    color:#0A66C2;

}

.career-secondary-btn:hover{

    background:#0A66C2;

    color:#fff;

}
.career-primary-btn{

    background:#0A66C2;

    color:#fff;

}

.career-primary-btn:hover{

    background:#084f99;

}
.career-content h2{

    color:#162447;

}

.career-content p{

    color:#555;

}

.career-label{

    background:#0A66C2;

    color:#fff;

}
/*=====================================
PREMIUM FOOTER
=====================================*/

.academy-footer{

    position:relative;

    padding:96px 0 24px;

    background:linear-gradient(180deg,#eef8ff,#ffffff);

    overflow:hidden;

}

/* Decorative Wave */

.footer-wave{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:96px;

    background:url("images/wave.png") center top/cover no-repeat;

    opacity:.08;

}

.academy-footer-wrapper{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1.2fr;

    gap:48px;

    position:relative;

    z-index:2;

}

/* Logo */

.footer-logo{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:16px;

}

.footer-logo i{

    width:48px;

    height:48px;

    background:#0A66C2;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:14.4px;

    font-size:22.4px;

}

.footer-logo h2{

    color:#162447;

    font-size:24px;

}

.footer-company p{

    line-height:1.9;

    color:#666;

    margin-bottom:24px;

}

/* Social */

.footer-social{

    display:flex;

    gap:12px;

}

.footer-social a{

    width:36px;

    height:36px;

    background:#fff;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#0A66C2;

    text-decoration:none;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

    transition:.35s;

}

.footer-social a:hover{

    background:#0A66C2;

    color:#fff;

    transform:translateY(-4.8px);

}

/* Titles */

.footer-links-area h3,
.footer-course-area h3,
.footer-contact-area h3{

    color:#162447;

    margin-bottom:20px;

    font-size:17.6px;

}

/* Lists */

.footer-links-area ul,
.footer-course-area ul{

    list-style:none;

    padding:0;

}

.footer-links-area li,
.footer-course-area li{

    margin-bottom:12.8px;

}

.footer-links-area a{

    color:#666;

    text-decoration:none;

    transition:.3s;

}

.footer-links-area a:hover{

    color:#0A66C2;

    padding-left:6.4px;

}

.footer-course-area li{

    color:#666;

}

/* Contact */

.footer-contact-area p{

    display:flex;

    align-items:center;

    gap:9.6px;

    margin-bottom:14.4px;

    color:#666;

}

.footer-contact-area i{

    color:#0A66C2;

    width:17.6px;

}

/* Button */

.footer-download-btn{

    display:inline-flex;

    align-items:center;

    gap:9.6px;

    margin-top:16px;

    padding:12px 22.4px;

    background:#0A66C2;

    color:#fff;

    border-radius:40px;

    text-decoration:none;

    transition:.35s;

}

.footer-download-btn:hover{

    transform:translateY(-4px);

    background:#084d95;

}

/* Bottom */

.footer-bottom-bar{

    margin-top:56px;

    padding-top:24px;

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

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:16px;

}

.footer-bottom-bar p{

    color:#666;

}

.footer-bottom-bar div{

    display:flex;

    gap:24px;

}

.footer-bottom-bar a{

    color:#666;

    text-decoration:none;

    transition:.3s;

}

.footer-bottom-bar a:hover{

    color:#0A66C2;

}

/* Responsive */

@media(max-width:793.6px){

.academy-footer-wrapper{

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

}

}

@media(max-width:614.4px){

.academy-footer-wrapper{

grid-template-columns:1fr;

text-align:center;

}

.footer-logo{

justify-content:center;

}

.footer-social{

justify-content:center;

}

.footer-contact-area p{

justify-content:center;

}

.footer-bottom-bar{

flex-direction:column;

text-align:center;

}

}
/*=========================================
PREMIUM DARK FOOTER
=========================================*/

.academy-footer{

    position:relative;
    padding:88px 0 24px;
    overflow:hidden;

    background:linear-gradient(
        135deg,
        #071A3D 0%,
        #0C2D5C 50%,
        #05142E 100%
    );

}

/* Background Glow */

.academy-footer::before{

    content:"";

    position:absolute;

    width:360px;
    height:360px;

    background:#0A66C2;

    opacity:.15;

    border-radius:50%;

    filter:blur(96px);

    top:-144px;
    left:-120px;

}

.academy-footer::after{

    content:"";

    position:absolute;

    width:304px;
    height:304px;

    background:#00D4FF;

    opacity:.10;

    border-radius:50%;

    filter:blur(96px);

    right:-96px;
    bottom:-120px;

}

.academy-footer-wrapper{

    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:2fr 1fr 1fr 1.3fr;
    gap:48px;

}
.footer-logo i{

    width:52px;
    height:52px;

    border-radius:14.4px;

    background:linear-gradient(135deg,#00D4FF,#0A66C2);

    color:#fff;

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

    font-size:22.4px;

}

.footer-logo h2{

    color:#fff;
    font-size:24px;

}
.footer-company p{

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

    line-height:1.9;

}.footer-links-area h3,
.footer-course-area h3,
.footer-contact-area h3{

    color:#fff;

    margin-bottom:20px;

    position:relative;

}

.footer-links-area h3::after,
.footer-course-area h3::after,
.footer-contact-area h3::after{

    content:"";

    width:36px;

    height:2.4px;

    background:#00D4FF;

    display:block;

    margin-top:8px;

    border-radius:40px;

}
.footer-links-area a,
.footer-course-area li,
.footer-contact-area p{

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

    transition:.35s;

}

.footer-links-area a{

    text-decoration:none;

}

.footer-links-area a:hover{

    color:#00D4FF;

    padding-left:8px;

}

.footer-course-area li{

    margin-bottom:11.2px;

}
.footer-contact-area i{

    color:#00D4FF;

    margin-right:8px;

    font-size:14.4px;

}
.footer-social{

    display:flex;

    gap:12px;

    margin-top:24px;

}

.footer-social a{

    width:38.4px;
    height:38.4px;

    border-radius:50%;

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

    color:#fff;

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

    backdrop-filter:blur(8px);

    transition:.35s;

}

.footer-social a:hover{

    background:#00D4FF;

    color:#071A3D;

    transform:translateY(-6.4px);

}
.footer-download-btn{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:16px;

    padding:12px 24px;

    border-radius:40px;

    text-decoration:none;

    background:linear-gradient(135deg,#00D4FF,#0A66C2);

    color:#fff;

    font-weight:600;

    transition:.35s;

}

.footer-download-btn:hover{

    transform:translateY(-4px);

    box-shadow:0 12px 28px rgba(0,212,255,.35);

}
.footer-bottom-bar{

    margin-top:56px;

    padding-top:24px;

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

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

}

.footer-bottom-bar p{

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

}

.footer-bottom-bar a{

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

    text-decoration:none;

    transition:.3s;

}

.footer-bottom-bar a:hover{

    color:#00D4FF;

}
@media(max-width:793.6px){

    .academy-footer-wrapper{

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

    }

}

@media(max-width:614.4px){

    .academy-footer-wrapper{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-logo{

        justify-content:center;

    }

    .footer-social{

        justify-content:center;

    }

    .footer-bottom-bar{

        flex-direction:column;

        gap:16px;

        text-align:center;

    }

}
/*======================================
Premium Header
======================================*/

.med-header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:9999;

    transition:.45s;

}

/* Scroll */

.med-header.header-scroll{

    background:#ffffff;

    box-shadow:0 9.6px 28px rgba(0,0,0,.08);

    backdrop-filter:blur(14.4px);

}

/* Navbar */

.med-navbar{

    max-width:1120px;

    margin:auto;

    height:72px;

    padding:0 32px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

/* Logo */

.brand-area{

    display:flex;

    align-items:center;

    text-decoration:none;

    gap:12.8px;

}

.brand-icon{

    width:46.4px;

    height:46.4px;

    border-radius:14.4px;

    background:linear-gradient(135deg,#0A66C2,#00D4FF);

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:19.2px;

}

.brand-text h2{

    color:#fff;

    font-size:22.4px;

    margin-bottom:2.4px;

    transition:.35s;

}

.brand-text span{

    color:#e7f3ff;

    font-size:10.4px;

    letter-spacing:.4px;

    transition:.35s;

}

/* Scroll */

.med-header.header-scroll .brand-text h2{

    color:#162447;

}

.med-header.header-scroll .brand-text span{

    color:#666;

}

/* Menu */

.desktop-menu ul{

    display:flex;

    gap:36px;

    list-style:none;

}

.desktop-menu a{

    text-decoration:none;

    color:#fff;

    font-weight:600;

    position:relative;

    transition:.35s;

}

.desktop-menu a::after{

    content:"";

    position:absolute;

    bottom:-6.4px;

    left:0;

    width:0;

    height:2.4px;

    background:#00D4FF;

    border-radius:40px;

    transition:.35s;

}

.desktop-menu a:hover::after,

.desktop-menu .menu-active::after{

    width:100%;

}

.desktop-menu a:hover{

    color:#00D4FF;

}

/* Scroll */

.med-header.header-scroll .desktop-menu a{

    color:#162447;

}

/* Download Button */

.app-download{

    padding:12px 24px;

    border-radius:40px;

    background:#fff;

    color:#0A66C2;

    text-decoration:none;

    font-weight:700;

    display:flex;

    align-items:center;

    gap:8px;

    transition:.35s;

}

.app-download:hover{

    transform:translateY(-3.2px);

    background:#0A66C2;

    color:#fff;

}

.med-header.header-scroll .app-download{

    background:#0A66C2;

    color:#fff;

}

/* Right */

.header-action{

    display:flex;

    align-items:center;

    gap:16px;

}

.mobile-toggle{

    display:none;

    font-size:22.4px;

    color:#fff;

    cursor:pointer;

}

.med-header.header-scroll .mobile-toggle{

    color:#162447;

}

/* Responsive */

@media(max-width:793.6px){

.desktop-menu{

display:none;

}

.mobile-toggle{

display:block;

}

.med-navbar{

padding:0 20px;

height:64px;

}

.brand-text h2{

font-size:17.6px;

}

.brand-icon{

width:40px;

height:40px;

}

.app-download{

display:none;

}

}
.brand-text h2{

    color:#162447;

}

.brand-text span{

    color:#666;

}

.desktop-menu a{

    color:#162447;

}

.mobile-toggle{

    color:#162447;

}

.app-download{

    background:#0A66C2;

    color:#fff;

}
.med-header.header-scroll{

    background:#fff;

    box-shadow:0 8px 24px rgba(0,0,0,.08);

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

.academy-topbar{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:9999;

    transition:.4s;

    background:transparent;

}

.academy-topbar.header-fixed{

    background:#ffffff;

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

}

.academy-nav{

    max-width:1080px;

    margin:auto;

    height:68px;

    padding:0 32px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

/* Logo */

.academy-brand{

    display:flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

}

.academy-brand-icon{

    width:46.4px;

    height:46.4px;

    border-radius:14.4px;

    background:linear-gradient(135deg,#0A66C2,#00D4FF);

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:20px;

}

.academy-brand-text h2{

    font-size:22.4px;

    color:#162447;

}

.academy-brand-text span{

    color:#666;

    font-size:10.4px;

}

/* Menu */

.academy-menu{

    display:flex;

    list-style:none;

    gap:40px;

}

.academy-menu a{

    text-decoration:none;

    color:#162447;

    font-weight:600;

    font-size:13.6px;

    position:relative;

    transition:.3s;

}

.academy-menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6.4px;

    width:0;

    height:2.4px;

    border-radius:16px;

    background:#0A66C2;

    transition:.35s;

}

.academy-menu a:hover::after,

.menu-current::after{

    width:100%;

}

.academy-menu a:hover{

    color:#0A66C2;

}

/* Download */

.academy-download{

    padding:11.2px 22.4px;

    border-radius:40px;

    background: linear-gradient(var(--primary), var(--secondary));

    color:#fff;

    text-decoration:none;

    display:flex;

    align-items:center;

    gap:8px;

    font-weight:600;

    transition:.35s;

}

.academy-download:hover{

    background:#162447;

    transform:translateY(-2.4px);

}

/* Mobile */

.academy-toggle{

    display:none;

    font-size:22.4px;

    cursor:pointer;

    color:#162447;

}

/* Responsive */

@media(max-width:792.8px){

.academy-menu{

display:none;

}

.academy-download{

display:none;

}

.academy-toggle{

display:block;

}

.academy-nav{

padding:0 16px;

}

}

@media(max-width:460.8px){

.academy-brand-text h2{

font-size:17.6px;

}

.academy-brand-text span{

display:none;

}

.academy-brand-icon{

width:38.4px;

height:38.4px;

font-size:16px;

}

}
.academy-brand{

    display:flex;
    align-items:center;
    gap:12.8px;
    text-decoration:none;

}

.academy-logo{

    width:56px;
    height:56px;
    object-fit:contain;
    transition:.35s;

}

.academy-brand:hover .academy-logo{

    transform:rotate(-5deg) scale(1.08);

}

.academy-brand-text h2{

    font-size:22.4px;
    color:#16325B;
    margin:0;
    font-weight:700;

}

.academy-brand-text span{

    display:block;
    color:#666;
    font-size:11.2px;
    margin-top:1.6px;

}
@media(max-width:614.4px){

    .academy-logo{

        width:44px;
        height:44px;

    }

    .academy-brand-text h2{

        font-size:17.6px;

    }

    .academy-brand-text span{

        font-size:9.6px;

    }

}
.academy-full-logo{

    width:176px;
    height:auto;
    object-fit:contain;
    transition:.3s;

}

.academy-full-logo:hover{

    transform:scale(1.05);

}

@media(max-width:614.4px){

    .academy-full-logo{

        width:136px;

    }

}
/*======================================
CONTACT HERO
======================================*/

.contact-hero-area{

    position:relative;

    overflow:hidden;

    padding:144px 0 96px;

    background:linear-gradient(135deg,#eef7ff,#ffffff);

}

/* Background */

.contact-shape-one{

    position:absolute;

    width:336px;
    height:336px;

    border-radius:50%;

    background:#0A66C2;

    opacity:.08;

    filter:blur(80px);

    left:-96px;
    top:-96px;

}

.contact-shape-two{

    position:absolute;

    width:304px;
    height:304px;

    border-radius:50%;

    background:#00d4ff;

    opacity:.12;

    filter:blur(80px);

    right:-96px;
    bottom:-96px;

}

/* Layout */

.contact-hero-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:56px;

}

/* Left */

.contact-mini-title{

    display:inline-block;

    padding:8px 17.6px;

    background:#dff2ff;

    color:#0A66C2;

    border-radius:40px;

    font-weight:700;

    margin-bottom:20px;

}

.contact-hero-content h1{

    font-size:49.6px;

    line-height:1.15;

    color:#16325B;

    margin-bottom:20px;

}

.contact-hero-content h1 span{

    color:#0A66C2;

}

.contact-hero-content p{

    font-size:14.4px;

    line-height:1.9;

    color:#666;

    margin-bottom:32px;

}

/* Buttons */

.contact-button-group{

    display:flex;

    gap:16px;

    flex-wrap:wrap;

}

.contact-main-btn{

    padding:14.4px 32px;

    background:#0A66C2;

    color:#fff;

    border-radius:48px;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.contact-main-btn:hover{

    transform:translateY(-4px);

    box-shadow:0 12px 28px rgba(10,102,194,.35);

}

.contact-call-btn{

    padding:14.4px 28px;

    border:1.6px solid #0A66C2;

    color:#0A66C2;

    border-radius:48px;

    text-decoration:none;

    display:flex;

    align-items:center;

    gap:8px;

    font-weight:700;

    transition:.35s;

}

.contact-call-btn:hover{

    background:#0A66C2;

    color:#fff;

}

/* Stats */

.contact-highlights{

    display:flex;

    gap:40px;

    margin-top:44px;

}

.contact-highlights h3{

    color:#0A66C2;

    font-size:28.8px;

}

.contact-highlights span{

    color:#666;

}

/* Image */

.contact-hero-image{

    position:relative;

}

.contact-hero-image img{

    width:100%;

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

}

/* Floating Cards */

.floating-card{

    position:absolute;

    background:#fff;

    border-radius:16px;

    padding:14.4px 19.2px;

    display:flex;

    align-items:center;

    gap:14.4px;

    box-shadow:0 16px 36px rgba(0,0,0,.08);

}

.floating-card i{

    width:44px;

    height:44px;

    border-radius:50%;

    background:#0A66C2;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:17.6px;

}

.card-one{

    left:-24px;

    top:18%;

}

.card-two{

    right:-24px;

    bottom:12%;

}

@keyframes floatImage{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}

/* Responsive */

@media(max-width:792.8px){

.contact-hero-wrapper{

grid-template-columns:1fr;

text-align:center;

}

.contact-button-group{

justify-content:center;

}

.contact-highlights{

justify-content:center;

}

.card-one{

left:0;

}

.card-two{

right:0;

}

}

@media(max-width:614.4px){

.contact-hero-content h1{

font-size:33.6px;

}

.contact-highlights{

flex-direction:column;

gap:20px;

}

}
/*=========================================
CONTACT DETAILS
=========================================*/

.contact-details-area{

    position:relative;
    padding:96px 0;
    background:linear-gradient(180deg,#f8fbff,#edf6ff);
    overflow:hidden;

}

/* Background */

.contact-bg-circle{

    position:absolute;
    border-radius:50%;
    filter:blur(80px);
    opacity:.25;

}

.circle-left{

    width:256px;
    height:256px;
    background:#00b4ff;
    left:-96px;
    top:-96px;

}

.circle-right{

    width:280px;
    height:280px;
    background:#0A66C2;
    right:-120px;
    bottom:-96px;

}

/* Heading */

.contact-heading{

    max-width:608px;
    margin:auto;
    text-align:center;
    margin-bottom:56px;

}

.contact-heading span{

    display:inline-block;
    padding:8px 20px;
    background:#dcefff;
    color:#0A66C2;
    border-radius:32px;
    font-weight:700;
    letter-spacing:1px;

}

.contact-heading h2{

    margin:20px 0;
    font-size:40px;
    color:#17325b;
    line-height:1.2;

}

.contact-heading h2 span{

    background:none;
    color:#0A66C2;
    padding:0;

}

.contact-heading p{

    color:#666;
    line-height:1.9;
    font-size:13.6px;

}

/* Grid */

.contact-card-wrapper{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;

}

/* Card */

.contact-info-card{

    background:#fff;
    border-radius:20px;
    padding:36px 24px;
    text-align:center;
    transition:.4s;
    position:relative;
    overflow:hidden;
    box-shadow:0 12px 32px rgba(0,0,0,.06);

}

.contact-info-card::before{

    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:linear-gradient(90deg,#00c6ff,#0A66C2);

}

.contact-info-card:hover{

    transform:translateY(-12px);
    box-shadow:0 20px 48px rgba(10,102,194,.18);

}

/* Icon */

.contact-icon-box{

    width:72px;
    height:72px;
    margin:auto;
    margin-bottom:20px;
    border-radius:50%;
    background:linear-gradient(135deg,#0A66C2,#00b4ff);
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    font-size:27.2px;
    transition:.4s;

}

.contact-info-card:hover .contact-icon-box{

    transform:rotateY(180deg);

}

/* Text */

.contact-info-card h3{

    color:#16325B;
    font-size:19.2px;
    margin-bottom:14.4px;

}

.contact-info-card p{

    color:#777;
    line-height:1.8;
    margin-bottom:20px;
    min-height:72px;

}

.contact-info-card a{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:11.2px 20px;
    border-radius:40px;
    text-decoration:none;
    background:#eef7ff;
    color:#0A66C2;
    font-weight:700;
    transition:.35s;

}

.contact-info-card a:hover{

    background:#0A66C2;
    color:#fff;

}

/* Responsive */

@media(max-width:880px){

.contact-card-wrapper{

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

}

}

@media(max-width:614.4px){

.contact-card-wrapper{

grid-template-columns:1fr;

}

.contact-heading h2{

font-size:30.4px;

}

.contact-info-card{

padding:28px 20px;

}

}
/*==========================================
CONTACT DETAILS
==========================================*/

.contact-connect-section{

position:relative;
padding:96px 0;
background:linear-gradient(180deg,#f5fbff,#ffffff);
overflow:hidden;

}

.contact-circle{

position:absolute;
border-radius:50%;
filter:blur(80px);

}

.contact-circle-1{

width:280px;
height:280px;
background:#0A66C2;
opacity:.08;
top:-96px;
left:-96px;

}

.contact-circle-2{

width:224px;
height:224px;
background:#00c2ff;
opacity:.12;
bottom:-80px;
right:-64px;

}

.contact-connect-title{

text-align:center;
max-width:608px;
margin:auto;
margin-bottom:56px;

}

.contact-connect-title span{

display:inline-block;
padding:8px 22.4px;
background:#e8f4ff;
color:#0A66C2;
font-weight:700;
border-radius:40px;

}

.contact-connect-title h2{

font-size:40px;
margin:20px 0;
color:#16325B;

}

.contact-connect-title p{

line-height:1.9;
color:#666;

}

.contact-card-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;

}

.connect-card{

background:#fff;
padding:32px 24px;
border-radius:20px;
text-align:center;
box-shadow:0 16px 36px rgba(0,0,0,.06);
transition:.4s;

}

.connect-card:hover{

transform:translateY(-9.6px);

}

.connect-icon{

width:72px;
height:72px;
margin:auto;
margin-bottom:20px;
border-radius:50%;
background:linear-gradient(135deg,#0A66C2,#00b4ff);
display:flex;
justify-content:center;
align-items:center;
color:#fff;
font-size:27.2px;

}

.connect-card h3{

margin-bottom:12px;
color:#16325B;

}

.connect-card p{

line-height:1.8;
margin-bottom:16px;
color:#666;

}

.connect-card a{

display:inline-block;
padding:11.2px 20px;
background:#eef7ff;
border-radius:32px;
color:#0A66C2;
font-weight:600;
text-decoration:none;

}

/*==========================================
FORM
==========================================*/

.contact-form-area{

padding:96px 0;
background:#fff;

}

.contact-form-layout{

display:grid;
grid-template-columns:1.2fr .8fr;
gap:48px;
align-items:start;

}

.enquiry-form-box{

background:#fff;
padding:40px;
border-radius:24px;
box-shadow:0 16px 48px rgba(0,0,0,.08);

}

.enquiry-form-box span{

color:#0A66C2;
font-weight:700;

}

.enquiry-form-box h2{

margin:12px 0;
font-size:33.6px;

}

.enquiry-form-box p{

color:#666;
margin-bottom:28px;

}

.double-input{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px;
margin-bottom:16px;

}

.enquiry-form-box input,
.enquiry-form-box textarea,
.enquiry-form-box select{

width:100%;
padding:14.4px;
border:1px solid #ddd;
border-radius:9.6px;
outline:none;
font-size:12.8px;
margin-bottom:16px;

}

.enquiry-form-box input:focus,
.enquiry-form-box textarea:focus,
.enquiry-form-box select:focus{

border-color:#0A66C2;

}

.enquiry-form-box button{

padding:14.4px 32px;
background:#0A66C2;
border:none;
color:#fff;
font-size:13.6px;
font-weight:600;
border-radius:48px;
cursor:pointer;

}

.office-info-box{

background:linear-gradient(135deg,#0A66C2,#1da1f2);
padding:40px;
border-radius:24px;
color:#fff;

}

.office-header{

margin-bottom:32px;

}

.office-item{

display:flex;
gap:16px;
margin-bottom:28px;

}

.office-item i{

width:48px;
height:48px;
background:rgba(255,255,255,.18);
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
font-size:17.6px;

}

.office-social{

display:flex;
gap:12px;
margin-top:32px;

}

.office-social a{

width:40px;
height:40px;
border-radius:50%;
background:rgba(255,255,255,.18);
display:flex;
justify-content:center;
align-items:center;
color:#fff;
text-decoration:none;

}

@media(max-width:792.8px){

.contact-card-grid{

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

}

.contact-form-layout{

grid-template-columns:1fr;

}

}

@media(max-width:614.4px){

.contact-card-grid{

grid-template-columns:1fr;

}

.double-input{

grid-template-columns:1fr;

}

.contact-connect-title h2{

font-size:28.8px;

}

.enquiry-form-box{

padding:24px;

}

.office-info-box{

padding:28px;

}

}
/*==================================
WHY CONTACT
==================================*/

.support-benefit-area{

padding:96px 0;
background:#f8fbff;

}

.support-title{

max-width:608px;
margin:auto;
text-align:center;
margin-bottom:56px;

}

.support-title span{

background:#e7f3ff;
padding:8px 19.2px;
border-radius:32px;
color:#0A66C2;
font-weight:700;

}

.support-title h2{

font-size:36.8px;
margin:20px 0;
color:#16325B;

}

.support-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;

}

.support-box{

background:#fff;
padding:36px 28px;
border-radius:20px;
text-align:center;
transition:.4s;
box-shadow:0 16px 40px rgba(0,0,0,.06);

}

.support-box:hover{

transform:translateY(-9.6px);

}

.support-icon{

width:72px;
height:72px;
margin:auto;
margin-bottom:20px;
background:linear-gradient(135deg,#0A66C2,#00c6ff);
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
font-size:27.2px;
color:#fff;

}

.support-box h3{

margin-bottom:12px;
color:#16325B;

}

.support-box p{

line-height:1.8;
color:#666;

}


/*==================================
PROCESS
==================================*/

.journey-process-area{

padding:96px 0;
background:white;

}

.journey-title{

text-align:center;
margin-bottom:56px;

}

.journey-title span{

color:#0A66C2;
font-weight:700;

}

.journey-title h2{

font-size:36.8px;
margin-top:16px;

}

.journey-wrapper{

display:flex;
align-items:flex-start;
justify-content:space-between;

}

.journey-step{

flex:1;
text-align:center;

}

.journey-number{

width:72px;
height:72px;
margin:auto;
margin-bottom:20px;
border-radius:50%;
background:linear-gradient(135deg,#0A66C2,#00bfff);
display:flex;
justify-content:center;
align-items:center;
font-size:22.4px;
font-weight:700;
color:#fff;

}

.journey-line{

width:72px;
height:3.2px;
background:#0A66C2;
margin-top:36px;

}


/*==================================
MAP
==================================*/

.location-area{

padding:96px 0;
background:#f7fbff;

}

.location-wrapper{

display:grid;
grid-template-columns:1.2fr .8fr;
gap:48px;
align-items:center;

}

.location-map iframe{

width:100%;
height:416px;
border:none;
border-radius:20px;
box-shadow:0 16px 48px rgba(0,0,0,.08);

}

.location-content span{

color:#0A66C2;
font-weight:700;

}

.location-content h2{

font-size:36.8px;
margin:16px 0;

}

.location-content p{

line-height:1.9;
margin-bottom:24px;
color:#666;

}

.location-content ul{

list-style:none;
padding:0;

}

.location-content li{

margin-bottom:16px;
font-size:13.6px;

}

.location-content i{

width:28px;
color:#0A66C2;

}

.visit-btn{

display:inline-block;
margin-top:16px;
padding:14.4px 30.4px;
background:#0A66C2;
color:#fff;
border-radius:40px;
text-decoration:none;
font-weight:600;

}

.visit-btn:hover{

background:#16325B;

}

/*=========================
Responsive
=========================*/

@media(max-width:792.8px){

.support-grid{

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

}

.location-wrapper{

grid-template-columns:1fr;

}

.journey-wrapper{

flex-direction:column;
gap:40px;

}

.journey-line{

display:none;

}

}

@media(max-width:614.4px){

.support-grid{

grid-template-columns:1fr;

}

.support-title h2,
.journey-title h2,
.location-content h2{

font-size:27.2px;

}

}
/*=========================================
GET IN TOUCH SECTION
=========================================*/

.contact-connect-section{

    position:relative;
    overflow:hidden;
    padding:96px 0;

    background:
    radial-gradient(circle at top left,#dff1ff 0%,transparent 30%),
    radial-gradient(circle at bottom right,#d8ecff 0%,transparent 28%),
    linear-gradient(135deg,#ffffff 0%,#f7fbff 55%,#eef7ff 100%);

}

/* Decorative Background */

.contact-circle{

    position:absolute;
    border-radius:50%;
    z-index:0;

}

.contact-circle-1{

    width:400px;
    height:400px;
    top:-176px;
    left:-144px;

    background:linear-gradient(135deg,#0A66C2,#5dc8ff);
    opacity:.07;

}

.contact-circle-2{

    width:336px;
    height:336px;
    bottom:-144px;
    right:-112px;

    background:linear-gradient(135deg,#38bdf8,#0A66C2);
    opacity:.06;

}

.contact-connect-section .container{

    position:relative;
    z-index:2;

}


/*==========================
Title
==========================*/

.contact-connect-title{

    text-align:center;
    max-width:624px;
    margin:auto;
    margin-bottom:56px;

}

.contact-connect-title span{

    display:inline-block;
    padding:8px 17.6px;

    background:#e7f4ff;

    color:#0A66C2;

    font-weight:700;

    border-radius:40px;

    letter-spacing:1px;

}

.contact-connect-title h2{

    font-size:38.4px;

    margin:20px 0 14.4px;

    color:#14325c;

    line-height:1.2;

}

.contact-connect-title p{

    font-size:14.4px;

    line-height:1.9;

    color:#666;

}


/*==========================
Grid
==========================*/

.contact-card-grid{

    display:grid;

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

    gap:28px;

}


/*==========================
Cards
==========================*/

.connect-card{

    position:relative;

    padding:36px 24px;

    border-radius:24px;

    text-align:center;

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

    backdrop-filter:blur(14.4px);

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

    box-shadow:0 16px 36px rgba(16,50,90,.08);

    transition:.45s;

}

.connect-card:hover{

    transform:translateY(-12px);

    box-shadow:0 24px 48px rgba(10,102,194,.15);

    border-color:#0A66C2;

}


/*==========================
Icon
==========================*/

.connect-icon{

    width:72px;

    height:72px;

    margin:auto;

    margin-bottom:22.4px;

    border-radius:50%;

    background:linear-gradient(135deg,#0A66C2,#00c6ff);

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:28.8px;

    transition:.4s;

    box-shadow:0 12px 28px rgba(10,102,194,.25);

}

.connect-card:hover .connect-icon{

    transform:rotate(360deg) scale(1.08);

}


/*==========================
Text
==========================*/

.connect-card h3{

    font-size:20px;

    margin-bottom:12px;

    color:#16325B;

}

.connect-card p{

    line-height:1.8;

    color:#666;

    min-height:48px;

}

.connect-card a{

    display:inline-block;

    margin-top:20px;

    color:#0A66C2;

    font-weight:700;

    text-decoration:none;

    transition:.35s;

    font-size:13.6px;

}

.connect-card a:hover{

    color:#16325B;

}


/*==========================
Hover Top Border
==========================*/

.connect-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:linear-gradient(90deg,#0A66C2,#00c6ff);

    transition:.45s;

    border-radius:24px 24px 0 0;

}

.connect-card:hover::before{

    width:100%;

}


/*==========================
Responsive
==========================*/

@media(max-width:960px){

.contact-card-grid{

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

}

}

@media(max-width:614.4px){

.contact-card-grid{

grid-template-columns:1fr;

}

.contact-connect-title h2{

font-size:27.2px;

}

.contact-connect-title p{

font-size:12.8px;

}

.connect-card{

padding:32px 20px;

}

}
/*=========================================
GET IN TOUCH SECTION
=========================================*/

.contact-connect-section{

    position: relative;
    overflow: hidden;
    padding: 96px 0;
    background: linear-gradient(135deg, #061A3A, #0A66C2);

}

/* Decorative circles */

.contact-circle{

    position: absolute;
    border-radius: 50%;
    filter: blur(8px);
    z-index: 0;

}

.contact-circle-1{

    width: 416px;
    height: 416px;
    top: -176px;
    left: -144px;
    background: rgba(255,255,255,.08);

}

.contact-circle-2{

    width: 336px;
    height: 336px;
    right: -120px;
    bottom: -136px;
    background: rgba(0,255,255,.08);

}

.contact-connect-section .container{

    position: relative;
    z-index: 2;

}
.contact-connect-title span{

    color:#7dd3fc;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.15);

}

.contact-connect-title h2{

    color:#fff;

}

.contact-connect-title p{

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

}
.connect-card{

    background:rgba(255,255,255,.10);
    backdrop-filter:blur(14.4px);
    -webkit-backdrop-filter:blur(14.4px);

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

    border-radius:20px;

    box-shadow:0 16px 36px rgba(0,0,0,.25);

    transition:.4s;

}

.connect-card:hover{

    transform:translateY(-9.6px);
    background:#ffffff;

}
.connect-card h3{

    color:#fff;
    transition:.3s;

}

.connect-card p{

    color:rgba(255,255,255,.75);
    transition:.3s;

}

.connect-card a{

    color:#7dd3fc;
    font-weight:600;

}

.connect-card:hover h3{

    color:#061A3A;

}

.connect-card:hover p{

    color:#666;

}

.connect-card:hover a{

    color:#0A66C2;

}
/*=================================================
CAREER SUPPORT SECTION
=================================================*/

.career-support-section{

    position:relative;
    padding:96px 0;
    overflow:hidden;

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

}

/* Overlay */
.career-overlay {
   
    position:absolute;

    inset:0;

    background: linear-gradient(rgba(5,20,45,.90),rgba(10,90,170,.82));
}
/* Content */

/* Parent Section */
.career-support-section{
    position: relative;
    overflow: hidden;

    /* Example Background Image */
    background: url("./images/medimg1.jpg") center center/cover no-repeat;
}

/* Overlay */
.section-dark-layer{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: red; /* Change color & opacity as needed */
    z-index: 1;
    pointer-events: none;
}

/* Keep Content Above Overlay */
.career-support-section .container{
    position: relative;
    z-index: 2;
}
.career-support-section .container{

    position:relative;
    z-index:2;

}

/*=================================*/

.career-heading{

    max-width:680px;
    margin:auto;
    text-align:center;
    margin-bottom:56px;

}

.career-heading span{

    display:inline-block;

    padding:8px 19.2px;

    border-radius:40px;

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

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

    color:#7dd3fc;

    font-weight:700;

    letter-spacing:1px;

}

.career-heading h2{

    font-size:38.4px;

    color:#fff;

    margin:20px 0;

    line-height:1.25;

}

.career-heading p{

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

    font-size:14.4px;

    line-height:1.9;

}

/*=================================*/

.career-support-grid{

    display:grid;

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

    gap:28px;

}

/*=================================*/

.career-card{

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

    backdrop-filter:blur(12px);

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

    border-radius:24px;

    padding:36px 28px;

    text-align:center;

    transition:.45s;

    position:relative;

    overflow:hidden;

}

.career-card::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;

    height:4px;

    background:linear-gradient(90deg,#00d4ff,#ffffff);

    transform:scaleX(0);

    transition:.45s;

}

.career-card:hover::before{

    transform:scaleX(1);

}

.career-card:hover{

    transform:translateY(-12px);

    background:#fff;

    box-shadow:0 24px 48px rgba(0,0,0,.25);

}

/*=================================*/

.career-icon{

    width:72px;
    height:72px;

    margin:auto;
    margin-bottom:22.4px;

    border-radius:50%;

    background:linear-gradient(135deg,#00c6ff,#0A66C2);

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

    color:#fff;

    font-size:28px;

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

    transition:.5s;

}

.career-card:hover .career-icon{

    transform:rotateY(360deg) scale(1.1);

}

/*=================================*/

.career-card h3{

    color:#fff;

    margin-bottom:14.4px;

    font-size:19.2px;

    transition:.3s;

}

.career-card p{

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

    line-height:1.9;

    transition:.3s;

}

.career-card:hover h3{

    color:#061A3A;

}

.career-card:hover p{

    color:#666;

}

/*=================================
Responsive
=================================*/

@media(max-width:880px){

.career-support-grid{

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

}

}

@media(max-width:614.4px){

.career-support-grid{

grid-template-columns:1fr;

}

.career-heading h2{

font-size:27.2px;

}

.career-heading p{

font-size:12.8px;

}

}
/*==================================================
VISIT OUR CAMPUS
==================================================*/

.campus-location-section{

    padding:96px 0;

    background:linear-gradient(
    180deg,
    #ffffff,
    #f6fbff);

}

/*=============================*/

.campus-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:56px;

    align-items:center;

}

/*=============================*/

.campus-tag{

    display:inline-block;

    padding:8px 19.2px;

    background:#eaf4ff;

    color:#0A66C2;

    border-radius:40px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:20px;

}

.campus-details h2{

    font-size:38.4px;

    color:#061A3A;

    line-height:1.25;

    margin-bottom:20px;

}

.campus-details>p{

    font-size:13.6px;

    color:#666;

    line-height:1.9;

    margin-bottom:32px;

}

/*=============================*/

.campus-info{

    display:grid;

    gap:16px;

}

.campus-info-box{

    display:flex;

    align-items:center;

    gap:16px;

    padding:17.6px;

    border-radius:14.4px;

    background:#fff;

    box-shadow:0 12px 32px rgba(0,0,0,.06);

    transition:.4s;

}

.campus-info-box:hover{

    transform:translateX(8px);

    box-shadow:0 16px 40px rgba(10,102,194,.15);

}

/*=============================*/

.campus-icon{

    width:52px;

    height:52px;

    border-radius:50%;

    background:linear-gradient(
    135deg,
    #061A3A,
    #0A66C2);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:19.2px;

    flex-shrink:0;

}

.campus-info-box h4{

    color:#061A3A;

    margin-bottom:4px;

    font-size:14.4px;

}

.campus-info-box p{

    color:#666;

    margin:0;

}

/*=============================*/

.campus-direction-btn{

    margin-top:32px;

    display:inline-flex;

    align-items:center;

    gap:9.6px;

    padding:12.8px 28px;

    background:linear-gradient(
    135deg,
    #061A3A,
    #0A66C2);

    color:#fff;

    border-radius:40px;

    text-decoration:none;

    font-weight:600;

    transition:.4s;

}

.campus-direction-btn:hover{

    transform:translateY(-4.8px);

    box-shadow:0 16px 36px rgba(10,102,194,.30);

}

/*=============================*/

.campus-map-box{

    position:relative;

    border-radius:24px;

    overflow:hidden;

    background:#fff;

    padding:9.6px;

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

}

.campus-map-box::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:24px;

    padding:1.6px;

    background:linear-gradient(
    135deg,
    #061A3A,
    #0A66C2);

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

            mask-composite:exclude;

}

.campus-map-box iframe{

    width:100%;

    height:448px;

    border:none;

    border-radius:17.6px;

}

/*=============================*/

@media(max-width:793.6px){

.campus-wrapper{

grid-template-columns:1fr;

}

.campus-details{

order:2;

}

.campus-map-box{

order:1;

}

.campus-details h2{

font-size:30.4px;

}

}

@media(max-width:614.4px){

.campus-location-section{

padding:64px 0;

}

.campus-map-box iframe{

height:336px;

}

.campus-details h2{

font-size:25.6px;

}

}
/*==============================
CONTACT HERO
==============================*/

.contact-hero-section{

    position:relative;
    overflow:hidden;

    min-height:100vh;

    display:flex;
    align-items:center;

    background:
    linear-gradient(135deg,#061A3A,#0A66C2);

}

/*==============================*/

.contact-shape{

    position:absolute;
    border-radius:50%;

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

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

}

.shape-one{

    width:304px;
    height:304px;

    top:-96px;
    left:-80px;

}

.shape-two{

    width:200px;
    height:200px;

    right:-48px;
    top:96px;

    animation-delay:2s;

}

.shape-three{

    width:144px;
    height:144px;

    bottom:-32px;
    left:45%;

    animation-delay:4s;

}

@keyframes floatShape{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-24px);

}

}

/*==============================*/

.contact-hero-wrapper{

display:grid;

grid-template-columns:1.1fr .9fr;

align-items:center;

gap:64px;

}

/*==============================*/

.contact-badge{

display:inline-flex;

align-items:center;

gap:8px;

padding:9.6px 19.2px;

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

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

border-radius:40px;

color:#8bd6ff;

font-weight:600;

margin-bottom:20px;

}

.contact-left h1{

font-size:51.2px;

line-height:1.15;

color:#fff;

margin-bottom:20px;

}

.contact-left h1 span{

color:#79d9ff;

}

.contact-left p{

font-size:14.4px;

line-height:1.9;

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

max-width:520px;

}

/*==============================*/

.contact-buttons{

display:flex;

gap:16px;

margin-top:32px;

flex-wrap:wrap;

}

.primary-contact-btn{

padding:14.4px 32px;

background:#fff;

color:#0A66C2;

border-radius:48px;

font-weight:700;

text-decoration:none;

transition:.4s;

}

.primary-contact-btn:hover{

transform:translateY(-6.4px);

}

.secondary-contact-btn{

padding:14.4px 32px;

border:1.6px solid rgba(255,255,255,.3);

border-radius:48px;

color:#fff;

text-decoration:none;

transition:.4s;

}

.secondary-contact-btn:hover{

background:#fff;

color:#0A66C2;

}

/*==============================*/

.hero-contact-info{

display:flex;

gap:32px;

margin-top:36px;

flex-wrap:wrap;

}

.hero-contact-info div{

display:flex;

align-items:center;

gap:9.6px;

color:#fff;

}

.hero-contact-info i{

width:36px;

height:36px;

border-radius:50%;

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

display:flex;

align-items:center;

justify-content:center;

}

/*==============================*/

.hero-image-box{

position:relative;

animation:floatImage 4s ease-in-out infinite;

}

.hero-image-box img{

width:100%;
border-radius:16px;

display:block;

}

@keyframes floatImage{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-14.4px);

}

}

/*==============================*/

.floating-card{

position:absolute;

display:flex;

align-items:center;

gap:12px;

padding:14.4px 17.6px;

background:#fff;

border-radius:14.4px;

box-shadow:0 16px 36px rgba(0,0,0,.18);

animation:floatCard 3s ease-in-out infinite;

}

.floating-card i{

font-size:19.2px;

color:#0A66C2;

}

.card-one{

left:-24px;

top:18%;

}

.card-two{

right:-16px;

bottom:15%;

animation-delay:1.5s;

}

@keyframes floatCard{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-9.6px);

}

}

/*==============================*/

.scroll-down{

position:absolute;

left:50%;

bottom:24px;

transform:translateX(-50%);

}

.scroll-down span{

display:block;

width:22.4px;

height:38.4px;

border:1.6px solid rgba(255,255,255,.5);

border-radius:32px;

position:relative;

}

.scroll-down span::before{

content:"";

position:absolute;

width:4.8px;

height:8px;

background:#fff;

left:50%;

top:6.4px;

transform:translateX(-50%);

border-radius:8px;

animation:scrollMove 2s infinite;

}

@keyframes scrollMove{

0%{

opacity:1;

top:6.4px;

}

100%{

opacity:0;

top:22.4px;

}

}

/*==============================*/

@media(max-width:793.6px){

.contact-hero-wrapper{

grid-template-columns:1fr;

text-align:center;

}

.contact-buttons{

justify-content:center;

}

.hero-contact-info{

justify-content:center;

}

.contact-left h1{

font-size:38.4px;

}

}

@media(max-width:614.4px){

.contact-left h1{

font-size:30.4px;

}

.contact-left p{

font-size:12.8px;

}

}
/*==============================
CONTACT HERO
==============================*/

.contact-hero-section{

    position:relative;
    overflow:hidden;

    min-height:100vh;

    display:flex;
    align-items:center;

    background:linear-gradient(
    135deg,
    #edf7ff,
    #ffffff,
    #eef9ff);

}

/* Decorative Circles */

.contact-shape{

    position:absolute;
    border-radius:50%;
    filter:blur(4px);
    animation:floatShape 8s ease-in-out infinite;

}

.shape-one{

    width:336px;
    height:336px;

    background:rgba(10,102,194,.08);

    top:-128px;
    left:-96px;

}

.shape-two{

    width:224px;
    height:224px;

    background:rgba(0,180,216,.08);

    right:-64px;
    top:96px;

    animation-delay:2s;

}

.shape-three{

    width:176px;
    height:176px;

    background:rgba(10,102,194,.06);

    bottom:-64px;
    left:45%;

    animation-delay:4s;

}

@keyframes floatShape{

0%,100%{

transform:translateY(0px);

}

50%{

transform:translateY(-24px);

}

}

/*==============================*/

.contact-hero-wrapper{

display:grid;

grid-template-columns:1.1fr .9fr;

gap:56px;

align-items:center;

position:relative;
z-index:5;

}

/*==============================*/

.contact-badge{

display:inline-flex;

align-items:center;

gap:8px;

padding:9.6px 20px;

background:#ffffff;

color:#0A66C2;

border-radius:40px;

font-weight:600;

box-shadow:0 8px 24px rgba(10,102,194,.10);

margin-bottom:20px;

}

/*==============================*/

.contact-left h1{

font-size:52px;

line-height:1.15;

color:#061A3A;

margin-bottom:20px;

font-weight:800;

}

.contact-left h1 span{

color:#0A66C2;

position:relative;

}

.contact-left h1 span::after{

content:"";

position:absolute;

left:0;

bottom:4px;

width:100%;

height:9.6px;

background:#b8e6ff;

z-index:-1;

border-radius:16px;

}

.contact-left p{

font-size:14.4px;

line-height:1.9;

color:#5b6775;

max-width:496px;

}

/*==============================*/

.contact-buttons{

display:flex;

gap:16px;

margin-top:32px;

flex-wrap:wrap;

}

.primary-contact-btn{

padding:14.4px 30.4px;

background:linear-gradient(
135deg,
#061A3A,
#0A66C2);

color:#fff;

border-radius:48px;

font-weight:600;

text-decoration:none;

box-shadow:0 16px 32px rgba(10,102,194,.20);

transition:.4s;

}

.primary-contact-btn:hover{

transform:translateY(-6.4px);

}

.secondary-contact-btn{

padding:14.4px 30.4px;

background:#fff;

color:#0A66C2;

border:1.6px solid #dbeeff;

border-radius:48px;

text-decoration:none;

font-weight:600;

transition:.4s;

}

.secondary-contact-btn:hover{

background:#0A66C2;

color:#fff;

}

/*==============================*/

.hero-contact-info{

display:flex;

gap:28px;

margin-top:36px;

flex-wrap:wrap;

}

.hero-contact-info div{

display:flex;

align-items:center;

gap:12px;

color:#061A3A;

font-weight:500;

}

.hero-contact-info i{

width:40px;

height:40px;

border-radius:50%;

background:#fff;

color:#0A66C2;

display:flex;

justify-content:center;

align-items:center;

box-shadow:0 12px 28px rgba(10,102,194,.12);

}

/*==============================*/

.hero-image-box{

position:relative;

animation:floatImage 4s ease-in-out infinite;

}

.hero-image-box img{

width:100%;

display:block;

}

@keyframes floatImage{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-14.4px);

}

}

/*==============================*/

.floating-card{

position:absolute;

background:#fff;

padding:14.4px 17.6px;

border-radius:14.4px;

display:flex;

align-items:center;

gap:12px;

box-shadow:0 16px 36px rgba(10,102,194,.12);

animation:floatCard 3s ease-in-out infinite;

}

.floating-card i{

font-size:19.2px;

color:#0A66C2;

}

.floating-card h4{

color:#061A3A;

margin-bottom:1.6px;

}

.floating-card p{

font-size:11.2px;

color:#777;

}

.card-one{

left:-20px;

top:18%;

}

.card-two{

right:-16px;

bottom:15%;

animation-delay:1.5s;

}

@keyframes floatCard{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-9.6px);

}

}

/*==============================*/

.scroll-down{

position:absolute;

bottom:28px;

left:50%;

transform:translateX(-50%);

}

.scroll-down span{

display:block;

width:22.4px;

height:38.4px;

border:1.6px solid #0A66C2;

border-radius:32px;

position:relative;

}

.scroll-down span::before{

content:"";

position:absolute;

width:4.8px;

height:8px;

background:#0A66C2;

left:50%;

top:6.4px;

transform:translateX(-50%);

border-radius:16px;

animation:scrollMove 2s infinite;

}

@keyframes scrollMove{

0%{

opacity:1;

top:6.4px;

}

100%{

opacity:0;

top:22.4px;

}

}

/*==============================*/

@media(max-width:793.6px){

.contact-hero-wrapper{

grid-template-columns:1fr;

text-align:center;

}

.contact-buttons,
.hero-contact-info{

justify-content:center;

}

.card-one{

left:8px;

}

.card-two{

right:8px;

}

.contact-left h1{

font-size:38.4px;

}

}

@media(max-width:614.4px){

.contact-left h1{

font-size:28.8px;

}

.contact-left p{

font-size:12.8px;

}

}
/*========================================================================*/
/*                GLOBAL RESPONSIVE OVERRIDES (MOBILE & TABLET)             */
/*========================================================================*/

@media (max-width: 793.6px) {
    .hero-grid,
    .about-wrapper,
    .benefit-wrapper,
    .academy-app-layout,
    .contact-hero-wrapper {
        grid-template-columns: 1fr !important;
        text-align: center;
        gap: 32px !important;
    }

    .hero-right,
    .about-left,
    .academy-phone {
        order: -1;
    }

    .hero-left, .about-right, .benefit-left, .academy-app-info {
        text-align: center;
    }

    .hero-buttons, .benefit-counter {
        justify-content: center;
    }
    
    .program-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }
    
    .about-features {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .hero-stats {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .academy-menu,
    .academy-download {
        display: none !important;
    }
    
    .academy-toggle {
        display: block !important;
    }
    
    .academy-nav {
        padding: 0 16px !important;
    }
}

@media (max-width: 614.4px) {
    .program-grid,
    .about-features,
    .about-list {
        grid-template-columns: 1fr !important;
    }

    .benefit-counter {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .hero-left h1 {
        font-size: 25.6px !important;
        line-height: 1.3 !important;
    }

    .about-right h3,
    .benefit-left h2,
    .academy-app-info h2 {
        font-size: 22.4px !important;
    }
    
    .stat-box h2 {
        font-size: 22.4px !important;
    }
    
    .contact-left h1 {
        font-size: 32px !important;
    }
    
    .floating-icon {
        display: none !important;
    }
}

@media (max-width: 460.8px) {
    .hero-left h1 {
        font-size: 22.4px !important;
    }
    
    .contact-left h1 {
        font-size: 25.6px !important;
    }
    
    .hero-buttons {
        flex-direction: column;
        gap: 12px;
    }
    
    .hero-buttons a {
        width: 100%;
        text-align: center;
    }
}
/*==================================
HEADER
==================================*/

.academy-topbar{

    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:999;

    background:#fff;

    transition:.4s;

    box-shadow:0 4px 16px rgba(0,0,0,.05);

}

.academy-nav{

    max-width:1056px;

    width:100%;

    margin:auto;

    padding:11.2px 20px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

/*========================*/

.academy-brand{

    display:flex;

    align-items:center;

    gap:11.2px;

    text-decoration:none;

    flex-shrink:0;

}

.academy-logo{

    width:52px;

    height:52px;

    object-fit:contain;

}

.academy-brand-text h2{

    font-size:21.6px;

    color:#061A3A;

    margin:0;

    line-height:1;

}

.academy-brand-text span{

    font-size:10.4px;

    color:#666;

}

/*========================*/

.academy-menu{

    display:flex;

    align-items:center;

    gap:36px;

    list-style:none;

}

.academy-menu a{

    text-decoration:none;

    color:#061A3A;

    font-size:13.6px;

    font-weight:600;

    transition:.35s;

    position:relative;

}

.academy-menu a:hover,

.academy-menu .menu-current{

    color:#0A66C2;

}

.academy-menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6.4px;

    width:0;

    height:2.4px;

    background:#0A66C2;

    transition:.35s;

    border-radius:16px;

}

.academy-menu a:hover::after,

.academy-menu .menu-current::after{

    width:100%;

}

/*========================*/

.academy-download{

    padding:11.2px 24px;

    border-radius:40px;

    background:linear-gradient(135deg,#061A3A,#0A66C2);

    color:#fff;

    text-decoration:none;

    font-weight:600;

    display:flex;

    align-items:center;

    gap:8px;

    transition:.35s;

}

.academy-download:hover{

    transform:translateY(-3.2px);

}

/*========================*/

.academy-toggle{

    display:none;

    font-size:22.4px;

    cursor:pointer;

    color:#061A3A;

}

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

@media(max-width:792.8px){

.academy-download{

display:none;

}

.academy-toggle{

display:block;

}

.academy-menu{

position:absolute;

top:100%;

left:0;

width:100%;

background:#fff;

flex-direction:column;

gap:0;

overflow:hidden;

max-height:0;

transition:.45s;

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

}

.academy-menu.active{

max-height:240px;

padding:16px 0;

}

.academy-menu li{

width:100%;

text-align:center;

}

.academy-menu a{

display:block;

padding:14.4px;

}

}

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

@media(max-width:614.4px){

.academy-nav{

padding:9.6px 14.4px;

}

.academy-logo{

width:40px;

height:40px;

}

.academy-brand-text h2{

font-size:16px;

}

.academy-brand-text span{

font-size:8.8px;

}

}

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

@media(max-width:384px){

.academy-nav{

padding:8px 12px;

}

.academy-logo{

width:36px;

height:36px;

}

.academy-brand{

gap:8px;

}

.academy-brand-text h2{

font-size:14.4px;

}

.academy-brand-text span{

display:none;

}

.academy-toggle{

font-size:19.2px;

}

}
/* Sticky Header */

.sticky-header{

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

    backdrop-filter:blur(12px);

    box-shadow:0 9.6px 24px rgba(0,0,0,.08);

}
/*==========================
HERO SECTION
==========================*/

.hero{
    position:relative;
    overflow:hidden;
    padding:136px 0 80px;
    background:linear-gradient(135deg,#edf7ff,#ffffff,#eef9ff);
}

.hero-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:56px;
}

.hero-left{
    position:relative;
    z-index:2;
}

.hero-right{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:center;
}

.image-card{
    width:100%;
    max-width:416px;
}

.image-card img{
    width:100%;
    display:block;
    border-radius:24px;
    box-shadow:0 20px 48px rgba(0,0,0,.12);
}

/*==========================
Heading
==========================*/

.hero h1{
    font-size:46.4px;
    line-height:1.15;
    color:#0f2b5b;
    margin:20px 0;
    font-weight:800;
}

.hero h1 span{
    color:#0A66C2;
}

.hero p{
    font-size:14.4px;
    line-height:1.9;
    color:#555;
    margin-bottom:28px;
}

/*==========================
Buttons
==========================*/

.hero-buttons{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:36px;
}

/*==========================
Stats
==========================*/

.hero-stats{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
}

.stat-box{
    flex:1;
    min-width:120px;
    background:#fff;
    border-radius:14.4px;
    padding:20px;
    text-align:center;
    box-shadow:0 8px 28px rgba(0,0,0,.08);
}

.stat-box h2{
    color:#0A66C2;
    font-size:28.8px;
    margin-bottom:6.4px;
}

.stat-box span{
    color:#666;
    font-size:12px;
}

/*==========================
Floating Icons
==========================*/

.floating-icon{
    position:absolute;
    width:56px;
    height:56px;
    border-radius:50%;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22.4px;
    color:#0A66C2;
    box-shadow:0 12px 32px rgba(0,0,0,.08);
    animation:float 4s ease-in-out infinite;
    z-index:1;
}

.stethoscope{
    top:18%;
    left:5%;
}

.heart{
    bottom:15%;
    right:6%;
    animation-delay:1s;
}

.syringe{
    top:22%;
    right:10%;
    animation-delay:2s;
}

@keyframes float{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-14.4px);
    }

    100%{
        transform:translateY(0);
    }

}

/*==========================
Background Shapes
==========================*/

.hero-bg-shape{
    position:absolute;
    border-radius:50%;
    filter:blur(64px);
    opacity:.25;
}

.shape1{
    width:224px;
    height:224px;
    background:#4ea8ff;
    top:-56px;
    left:-72px;
}

.shape2{
    width:176px;
    height:176px;
    background:#6dd5fa;
    bottom:0;
    right:-56px;
}

.shape3{
    width:144px;
    height:144px;
    background:#b4ecff;
    top:40%;
    left:42%;
}

/*==========================================
Laptop
==========================================*/

@media(max-width:960px){

.hero{

padding:120px 0 72px;

}

.hero-grid{

gap:40px;

}

.hero h1{

font-size:38.4px;

}

}

/*==========================================
Tablet
==========================================*/

@media(max-width:793.6px){

.hero{

padding:112px 0 64px;

}

.hero-grid{

grid-template-columns:1fr;
text-align:center;
gap:48px;

}

.hero-left{

order:2;

}

.hero-right{

order:1;

}

.image-card{

max-width:400px;
margin:auto;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;

}

.floating-icon{

display:none;

}

.hero h1{

font-size:33.6px;

}

.hero p{

font-size:13.6px;

}

}

/*==========================================
Mobile
==========================================*/

@media(max-width:614.4px){

.hero{

padding:96px 0 56px;

}

.hero h1{

font-size:27.2px;
line-height:1.3;

}

.hero p{

font-size:12.8px;

}

.hero-buttons{

flex-direction:column;
align-items:center;
gap:12px;

}

.hero-buttons a{

width:100%;
max-width:240px;

}

.hero-stats{

flex-direction:column;

}

.stat-box{

width:100%;
max-width:256px;
margin:auto;

}

.badge{

font-size:10.4px;
padding:8px 14.4px;

}

.image-card{

max-width:280px;

}

}

/*==========================================
Small Mobile
==========================================*/

@media(max-width:384px){

.hero{

padding:84px 0 48px;

}

.hero h1{

font-size:22.4px;

}

.hero p{

font-size:12px;
line-height:1.8;

}

.image-card{

max-width:224px;

}

.stat-box{

padding:16px;

}

.stat-box h2{

font-size:24px;

}

.hero-bg-shape{

display:none;

}

}
/*=========================================
RESPONSIVE ABOUT SECTION
=========================================*/

/* Large Laptop */
@media (max-width:960px){

.about-wrapper{
    gap:48px;
}

.about-right h3{
    font-size:32px;
}

.about-features{
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

}


/* Tablet */
@media (max-width:792.8px){

.about.section{
    padding:72px 0;
}

.about-wrapper{

    display:flex;
    flex-direction:column;
    gap:48px;
    text-align:center;

}

.about-left{

    max-width:520px;
    margin:auto;

}

.about-left img{

    width:100%;
    height:auto;
    display:block;

}

.experience-card{

    left:16px;
    bottom:16px;

}

.course-card-small{

    right:16px;
    top:16px;

}

.about-right{

    width:100%;

}

.about-right h3{

    font-size:28.8px;
    line-height:1.3;

}

.about-right p{

    font-size:12.8px;
    line-height:1.9;

}

.about-list{

    grid-template-columns:repeat(2,1fr);
    text-align:left;
    gap:14.4px;

}

.about-features{

    margin-top:56px;

    display:grid;

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

    gap:20px;

}

.feature-card{

    padding:28px 20px;

}

}


/* Mobile */
@media (max-width:614.4px){

.about.section{

    padding:56px 0;

}

.section-title h2{

    font-size:27.2px;

}

.about-right h3{

    font-size:24px;

}

.about-right p{

    font-size:12px;

}

.about-list{

    grid-template-columns:1fr;
    gap:12px;

}

.about-list div{

    font-size:12px;

}

.about-features{

    grid-template-columns:1fr;
    gap:17.6px;

}

.feature-card{

    padding:24px;

}

.feature-card h3{

    font-size:17.6px;

}

.feature-card p{

    font-size:12px;

}

.experience-card{

    width:112px;
    padding:14.4px;

}

.experience-card h2{

    font-size:24px;

}

.course-card-small{

    width:160px;
    padding:12px;

}

.course-card-small h4{

    font-size:14.4px;

}

.course-card-small span{

    font-size:10.4px;

}

}


/* Small Mobile */
@media (max-width:460.8px){

.about.section{

    padding:48px 0;

}

.section-title span{

    font-size:10.4px;

}

.section-title h2{

    font-size:22.4px;

}

.section-title p{

    font-size:12px;

}

.about-left{

    position:relative;

}

.about-left img{

    border-radius:14.4px;

}

.experience-card{

    position:relative;

    left:auto;
    bottom:auto;

    margin-top:16px;

    width:100%;

}

.course-card-small{

    position:relative;

    top:auto;
    right:auto;

    margin-top:16px;

    width:100%;

}

.about-right h3{

    font-size:20.8px;

}

.about-right .btn-primary{

    width:100%;
    justify-content:center;

}

.feature-card{

    text-align:center;

}

}


/* Very Small Mobile */
@media (max-width:320px){

.about-right h3{

    font-size:17.6px;

}

.about-right p{

    font-size:11.2px;

}

.about-list div{

    font-size:11.2px;

}

.feature-card{

    padding:20px 16px;

}

.feature-card h3{

    font-size:16px;

}

.feature-card p{

    font-size:11.2px;

}

.experience-card h2{

    font-size:20.8px;

}

}
/*====================================================
RESPONSIVE - MEDICAL PROGRAMS SECTION
====================================================*/

/* Large Laptop */

@media (max-width:960px){

.program-grid{

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

gap:20px;

}

.program-heading h2{

font-size:33.6px;

}

}


/* Tablet */

@media (max-width:792.8px){

.medical-programs{

padding:72px 0;

}

.program-heading{

text-align:center;

margin-bottom:40px;

}

.program-heading h2{

font-size:28.8px;

}

.program-heading p{

font-size:12.8px;

max-width:560px;

margin:auto;

}

.program-grid{

display:grid;

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

gap:20px;

}

.program-box{

padding:28px 20px;

}

.program-box h3{

font-size:19.2px;

}

.program-box p{

font-size:12px;

}

}


/* Mobile */

@media (max-width:614.4px){

.medical-programs{

padding:56px 0;

}

.program-heading h2{

font-size:24px;

}

.program-heading p{

font-size:12px;

}

.program-grid{

grid-template-columns:1fr;

gap:16px;

}

.program-box{

padding:24px 20px;

text-align:center;

}

.program-icon{

margin:0 auto 16px;

}

.program-box a{

justify-content:center;

}

}


/* Small Mobile */

@media (max-width:384px){

.program-heading span{

font-size:10.4px;

}

.program-heading h2{

font-size:20.8px;

line-height:1.3;

}

.program-box{

padding:20px 16px;

}

.program-box h3{

font-size:16.8px;

}

.program-box p{

font-size:11.2px;

line-height:1.7;

}

.program-icon{

width:56px;

height:56px;

font-size:22.4px;

}

}



/*====================================================
RESPONSIVE - WHY VKAB SECTION
====================================================*/

/* Large Laptop */

@media (max-width:960px){

.benefit-wrapper{

gap:40px;

}

.benefit-left h2{

font-size:33.6px;

}

}


/* Tablet */

@media (max-width:792.8px){

.VKab-benefits{

padding:72px 0 !important;

}

.benefit-wrapper{

display:flex;

flex-direction:column;

gap:48px;

}

.benefit-left{

text-align:center;

}

.benefit-left h2{

font-size:28.8px;

}

.benefit-left p{

max-width:560px;

margin:auto;

}

.benefit-counter{

justify-content:center;

flex-wrap:wrap;

gap:16px;

margin-top:28px;

}

.benefit-counter div{

min-width:128px;

}

.benefit-right{

display:grid;

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

gap:17.6px;

}

.benefit-item{

height:100%;

}

}


/* Mobile */

@media (max-width:614.4px){

.VKab-benefits{

padding:56px 0 !important;

}

.benefit-left h2{

font-size:24px;

line-height:1.3;

}

.benefit-left p{

font-size:12px;

}

.benefit-counter{

display:grid;

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

gap:12px;

}

.benefit-counter div{

padding:14.4px;

border-radius:12px;

background:#fff;

box-shadow:0 8px 20px rgba(0,0,0,.05);

}

.benefit-counter h3{

font-size:22.4px;

}

.benefit-right{

grid-template-columns:1fr;

}

.benefit-item{

padding:20px;

display:flex;

align-items:flex-start;

gap:14.4px;

}

.benefit-icon{

flex-shrink:0;

}

}


/* Small Mobile */

@media (max-width:384px){

.benefit-tag{

font-size:9.6px;

}

.benefit-left h2{

font-size:20.8px;

}

.benefit-left p{

font-size:11.2px;

line-height:1.8;

}

.benefit-counter{

grid-template-columns:1fr;

}

.benefit-counter div{

width:100%;

}

.benefit-item{

padding:16px;

}

.benefit-icon{

width:48px;

height:48px;

font-size:19.2px;

}

.benefit-item h3{

font-size:16px;

}

.benefit-item p{

font-size:11.2px;

}

}
/*==================================================
        MEDICAL PROGRAMS - RESPONSIVE
==================================================*/

/* Large Desktop */

@media (max-width:1120px){

    .program-grid{
        gap:20px;
    }

}

/* Laptop */

@media (max-width:960px){

    .medical-programs{
        padding:72px 0;
    }

    .program-grid{

        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:20px;

    }

    .program-heading h2{
        font-size:33.6px;
    }

}


/* Tablet */

@media (max-width:793.6px){

    .medical-programs{

        padding:64px 0;

    }

    .program-heading{

        text-align:center;
        margin-bottom:40px;

    }

    .program-heading h2{

        font-size:28.8px;

    }

    .program-heading p{

        max-width:520px;
        margin:auto;
        font-size:12.8px;

    }

    .program-grid{

        display:grid;

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

        gap:20px;

    }

    .program-box{

        padding:28px 20px;

    }

}


/* Mobile */

@media (max-width:614.4px){

    .medical-programs{

        padding:56px 0;

    }

    .program-heading span{

        font-size:10.4px;

    }

    .program-heading h2{

        font-size:24px;
        line-height:1.3;

    }

    .program-heading p{

        font-size:12px;
        line-height:1.8;

    }

    .program-grid{

        display:grid;

        grid-template-columns:1fr;

        gap:16px;

    }

    .program-box{

        text-align:center;

        padding:24px 20px;

    }

    .program-icon{

        margin:0 auto 20px;

    }

    .program-box h3{

        font-size:19.2px;

    }

    .program-box p{

        font-size:12px;

    }

    .program-box a{

        justify-content:center;

    }

}


/* Small Mobile */

@media (max-width:460.8px){

    .medical-programs{

        padding:48px 0;

    }

    .program-heading h2{

        font-size:20.8px;

    }

    .program-heading p{

        font-size:11.2px;

    }

    .program-box{

        padding:20px 16px;

    }

    .program-icon{

        width:56px;
        height:56px;
        font-size:22.4px;

    }

    .program-box h3{

        font-size:17.6px;

    }

    .program-box p{

        font-size:11.2px;
        line-height:1.7;

    }

}


/* Extra Small Devices */

@media (max-width:304px){

    .program-heading h2{

        font-size:19.2px;

    }

    .program-box{

        padding:17.6px 14.4px;

    }

    .program-icon{

        width:48px;
        height:48px;
        font-size:19.2px;

    }

    .program-box h3{

        font-size:16px;

    }

    .program-box p{

        font-size:10.4px;

    }

    .program-box a{

        font-size:11.2px;

    }

}
/*=========================================
MEDICAL PROGRAMS
=========================================*/

.medical-programs{
    position:relative;
    padding:96px 0;
    overflow:hidden;
    background:url("./images/medimg1.jpg") center center/cover no-repeat;
}

/* Overlay */

.medical-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        135deg,
        rgba(6,26,58,.92),
        rgba(10,102,194,.85)
    );
    z-index:1;
}

/* Container */

.medical-programs .container{
    position:relative;
    z-index:2;
}

/*=========================================
Heading
=========================================*/

.program-heading{
    text-align:center;
    margin-bottom:56px;
}

.program-heading span{

    display:inline-block;
    padding:8px 17.6px;
    border-radius:40px;
    background:rgba(255,255,255,.15);
    color:#7dd3fc;
    font-weight:700;
    letter-spacing:1px;
    margin-bottom:16px;

}

.program-heading h2{

    font-size:38.4px;
    color:#fff;
    margin-bottom:16px;
    font-weight:800;

}

.program-heading p{

    max-width:560px;
    margin:auto;
    color:rgba(255,255,255,.85);
    font-size:13.6px;
    line-height:1.9;

}

/*=========================================
Grid
=========================================*/

.program-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;

}

/*=========================================
Card
=========================================*/

.program-box{

    position:relative;

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

    backdrop-filter:blur(12px);

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

    border-radius:20px;

    padding:32px 24px;

    text-align:center;

    transition:.4s;

    overflow:hidden;

}

.program-box::before{

    content:"";

    position:absolute;

    width:96px;
    height:96px;

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

    border-radius:50%;

    top:-32px;
    right:-32px;

    transition:.4s;

}

.program-box:hover{

    transform:translateY(-9.6px);

    background:#ffffff;

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

}

.program-box:hover::before{

    transform:scale(1.5);

}

/*=========================================
Icon
=========================================*/

.program-icon{

    width:72px;
    height:72px;

    margin:0 auto 20px;

    border-radius:50%;

    background:linear-gradient(135deg,#00c6ff,#0A66C2);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:28.8px;

    transition:.4s;

}

.program-box:hover .program-icon{

    transform:rotateY(180deg);

}

/*=========================================
Text
=========================================*/

.program-box h3{

    font-size:20.8px;

    color:#ffffff;

    margin-bottom:12px;

    transition:.3s;

}

.program-box p{

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

    line-height:1.8;

    margin-bottom:20px;

    transition:.3s;

}

.program-box:hover h3{

    color:#0A66C2;

}

.program-box:hover p{

    color:#555;

}

/*=========================================
Button
=========================================*/

.program-box a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    text-decoration:none;

    font-weight:700;

    color:#7dd3fc;

    transition:.3s;

}

.program-box:hover a{

    color:#0A66C2;

}

.program-box:hover a i{

    transform:translateX(6.4px);

}

.program-box a i{

    transition:.3s;

}

/*=========================================
Responsive
=========================================*/

@media(max-width:960px){

.program-grid{

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

gap:20px;

}

.program-heading h2{

font-size:33.6px;

}

}

@media(max-width:793.6px){

.medical-programs{

padding:72px 0;

}

.program-grid{

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

}

.program-heading h2{

font-size:28.8px;

}

}

@media(max-width:614.4px){

.medical-programs{

padding:56px 0;

}

.program-grid{

grid-template-columns:1fr;

gap:16px;

}

.program-heading h2{

font-size:24px;

}

.program-heading p{

font-size:12px;

}

.program-box{

padding:28px 20px;

}

.program-icon{

width:60px;
height:60px;
font-size:24px;

}

.program-box h3{

font-size:19.2px;

}

}

@media(max-width:384px){

.program-heading span{

font-size:9.6px;

padding:6.4px 14.4px;

}

.program-heading h2{

font-size:20.8px;

}

.program-heading p{

font-size:11.2px;

}

.program-box{

padding:22.4px 16px;

}

.program-box h3{

font-size:16.8px;

}

.program-box p{

font-size:11.2px;

}

.program-icon{

width:52px;
height:52px;
font-size:20.8px;

}

}
/*=========================================
WHY VKAB RESPONSIVE
=========================================*/

.VKab-benefits{
    padding:80px 0;
    background:#fff;
    overflow:hidden;
}

.benefit-wrapper{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:48px;
    align-items:center;
}

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

.benefit-left{
    width:100%;
}

.benefit-tag{
    display:inline-block;
    background:#eaf5ff;
    color:#0A66C2;
    padding:8px 17.6px;
    border-radius:40px;
    font-size:11.2px;
    font-weight:700;
    letter-spacing:1px;
    margin-bottom:17.6px;
}

.benefit-left h2{
    font-size:36.8px;
    line-height:1.2;
    color:#0b1d3a;
    margin-bottom:20px;
}

.benefit-left h2 span{
    color:#0A66C2;
}

.benefit-left p{
    font-size:13.6px;
    color:#666;
    line-height:1.9;
    margin-bottom:28px;
}

/*================ COUNTER =================*/

.benefit-counter{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

.benefit-counter div{
    flex:1;
    min-width:112px;
    background:#f8fbff;
    padding:20px;
    border-radius:14.4px;
    text-align:center;
    transition:.35s;
    box-shadow:0 12px 32px rgba(0,0,0,.05);
}

.benefit-counter div:hover{
    transform:translateY(-6.4px);
    background:#0A66C2;
}

.benefit-counter h3{
    font-size:25.6px;
    color:#0A66C2;
    margin-bottom:6.4px;
}

.benefit-counter span{
    color:#666;
    font-size:12px;
}

.benefit-counter div:hover h3,
.benefit-counter div:hover span{
    color:#fff;
}

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

.benefit-right{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.benefit-item{
    display:flex;
    gap:14.4px;
    align-items:flex-start;
    background:#fff;
    padding:22.4px;
    border-radius:16px;
    transition:.35s;
    box-shadow:0 12px 32px rgba(0,0,0,.06);
}

.benefit-item:hover{
    transform:translateY(-6.4px);
    box-shadow:0 20px 40px rgba(0,0,0,.10);
}

.benefit-icon{
    width:52px;
    height:52px;
    flex-shrink:0;
    border-radius:14.4px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#0A66C2,#00C2FF);
}

.benefit-icon i{
    color:#fff;
    font-size:22.4px;
}

.benefit-item h3{
    font-size:16.8px;
    color:#0b1d3a;
    margin-bottom:8px;
}

.benefit-item p{
    color:#666;
    line-height:1.7;
    font-size:12px;
}

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

@media(max-width:960px){

.benefit-wrapper{
    gap:32px;
}

.benefit-left h2{
    font-size:32px;
}

.benefit-right{
    gap:16px;
}

}

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

@media(max-width:793.6px){

.benefit-wrapper{
    grid-template-columns:1fr;
    gap:40px;
}

.benefit-left{
    text-align:center;
}

.benefit-counter{
    justify-content:center;
}

.benefit-right{
    grid-template-columns:repeat(2,1fr);
}

}

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

@media(max-width:614.4px){

.VKab-benefits{
    padding:56px 0;
}

.benefit-left h2{
    font-size:27.2px;
}

.benefit-left p{
    font-size:12.8px;
}

.benefit-counter{
    flex-direction:column;
}

.benefit-counter div{
    width:100%;
}

.benefit-right{
    grid-template-columns:1fr;
}

.benefit-item{
    padding:17.6px;
}

.benefit-icon{
    width:46.4px;
    height:46.4px;
}

.benefit-icon i{
    font-size:19.2px;
}

}

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

@media(max-width:460.8px){

.VKab-benefits{
    padding:48px 0;
}

.benefit-tag{
    font-size:9.6px;
    padding:6.4px 14.4px;
}

.benefit-left h2{
    font-size:22.4px;
}

.benefit-left p{
    font-size:12px;
    line-height:1.8;
}

.benefit-counter h3{
    font-size:20.8px;
}

.benefit-item{
    flex-direction:column;
    align-items:center;
    text-align:center;
}

.benefit-item h3{
    font-size:16px;
}

.benefit-item p{
    font-size:11.2px;
}

}

/*=========================================
EXTRA SMALL DEVICES
=========================================*/

@media(max-width:304px){

.benefit-left h2{
    font-size:19.2px;
}

.benefit-counter div{
    padding:14.4px;
}

.benefit-item{
    padding:16px 14.4px;
}

.benefit-icon{
    width:44px;
    height:44px;
}

.benefit-icon i{
    font-size:17.6px;
}

}
/*=========================================
APP SHOWCASE
=========================================*/

.academy-app-showcase{
    position:relative;
    padding:88px 0;
    background:linear-gradient(135deg,#edf7ff,#ffffff,#eef8ff);
    overflow:hidden;
}

.app-bg-circle{
    position:absolute;
    border-radius:50%;
    filter:blur(64px);
    opacity:.4;
    z-index:0;
}

.app-circle-one{
    width:280px;
    height:280px;
    background:#0A66C2;
    top:-80px;
    left:-80px;
}

.app-circle-two{
    width:240px;
    height:240px;
    background:#00c6ff;
    bottom:-96px;
    right:-64px;
}

.academy-app-layout{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:56px;
}

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

.academy-phone{
    position:relative;
    text-align:center;
}

.phone-shadow{
    position:absolute;
    width:224px;
    height:224px;
    background:rgba(10,102,194,.12);
    border-radius:50%;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    filter:blur(20px);
}

.academy-phone img{
    width:100%;
    max-width:296px;
    position:relative;
    z-index:2;
    animation:phoneFloat 4s ease-in-out infinite;
}

@keyframes phoneFloat{

0%,100%{
transform:translateY(0);
}

50%{
transform:translateY(-14.4px);
}

}

.download-card{

position:absolute;
left:-16px;
bottom:64px;
display:flex;
align-items:center;
gap:12px;
background:#fff;
padding:14.4px 17.6px;
border-radius:14.4px;
box-shadow:0 16px 36px rgba(0,0,0,.12);
z-index:3;
}

.download-card i{

width:44px;
height:44px;
border-radius:50%;
background:#0A66C2;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:17.6px;
}

.download-card h3{

font-size:20.8px;
color:#0A66C2;
margin-bottom:3.2px;
}

.download-card span{

font-size:11.2px;
color:#666;
}

.rating-card{

position:absolute;
right:-8px;
top:64px;
background:#fff;
padding:11.2px 19.2px;
border-radius:40px;
font-weight:700;
color:#ff9800;
box-shadow:0 16px 36px rgba(0,0,0,.10);
z-index:3;
}

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

.academy-app-info h2{

font-size:41.6px;
line-height:1.2;
margin:16px 0;
color:#09254d;
}

.academy-app-info h2 span{

color:#0A66C2;
}

.app-small-title{

display:inline-block;
padding:8px 19.2px;
border-radius:32px;
background:#dff1ff;
color:#0A66C2;
font-weight:700;
font-size:11.2px;
letter-spacing:1px;
}

.academy-app-info p{

font-size:13.6px;
line-height:1.9;
color:#666;
margin-bottom:28px;
}

.academy-feature-grid{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:14.4px;
margin-bottom:32px;
}

.academy-feature{

display:flex;
align-items:center;
gap:11.2px;
padding:14.4px;
background:#fff;
border-radius:12px;
box-shadow:0 8px 20px rgba(0,0,0,.05);
transition:.35s;
}

.academy-feature:hover{

transform:translateY(-4.8px);
}

.academy-feature i{

width:38.4px;
height:38.4px;
background:#0A66C2;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
font-size:14.4px;
}

.academy-feature span{

font-weight:600;
color:#1b2d4d;
}

.app-buttons{

display:flex;
gap:16px;
flex-wrap:wrap;
}

.download-app-btn,
.learn-btn{

padding:12.8px 27.2px;
border-radius:40px;
text-decoration:none;
font-weight:700;
transition:.35s;
}

.download-app-btn{

background:#0A66C2;
color:#fff;
}

.download-app-btn:hover{

background:#084d94;
}

.learn-btn{

border:1.6px solid #0A66C2;
color:#0A66C2;
}

.learn-btn:hover{

background:#0A66C2;
color:#fff;
}

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

@media(max-width:960px){

.academy-app-layout{

gap:32px;

}

.academy-app-info h2{

font-size:35.2px;

}

}

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

@media(max-width:793.6px){

.academy-app-layout{

grid-template-columns:1fr;
text-align:center;
gap:48px;

}

.academy-phone{

order:1;

}

.academy-app-info{

order:2;

}

.download-card{

left:32px;
bottom:40px;

}

.rating-card{

right:32px;

}

.academy-feature-grid{

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

}

.app-buttons{

justify-content:center;

}

}

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

@media(max-width:614.4px){

.academy-app-showcase{

padding:56px 0;

}

.academy-phone img{

max-width:224px;

}

.download-card{

position:relative;
left:0;
bottom:0;
margin:20px auto 0;
width:176px;
justify-content:center;

}

.rating-card{

position:relative;
right:0;
top:0;
margin:16px auto;

}

.academy-app-info h2{

font-size:27.2px;

}

.academy-app-info p{

font-size:12px;

}

.academy-feature-grid{

grid-template-columns:1fr;

}

.academy-feature{

justify-content:flex-start;

}

}

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

@media(max-width:384px){

.academy-app-showcase{

padding:48px 0;

}

.academy-phone img{

max-width:184px;

}

.phone-shadow{

width:176px;
height:176px;

}

.download-card{

padding:11.2px 14.4px;
width:152px;

}

.download-card i{

width:36px;
height:36px;
font-size:14.4px;

}

.download-card h3{

font-size:16px;

}

.rating-card{

padding:8px 16px;
font-size:11.2px;

}

.academy-app-info h2{

font-size:22.4px;

}

.app-small-title{

font-size:9.6px;

}

.app-buttons{

flex-direction:column;

}

.download-app-btn,
.learn-btn{

width:100%;
text-align:center;

}

}
/*=========================================
SUCCESS STATISTICS
=========================================*/

.academy-statistics{
    position:relative;
    padding:88px 0;
    background:linear-gradient(135deg,#edf7ff,#ffffff,#eef9ff);
    overflow:hidden;
}

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

.stats-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(80px);
    opacity:.35;
}

.glow-left{
    width:280px;
    height:280px;
    background:#0A66C2;
    top:-96px;
    left:-96px;
}

.glow-right{
    width:240px;
    height:240px;
    background:#00cfff;
    right:-80px;
    bottom:-80px;
}

/*================ HEADING =================*/

.stats-heading{
    text-align:center;
    max-width:600px;
    margin:auto;
    margin-bottom:56px;
    position:relative;
    z-index:2;
}

.stats-heading span{
    display:inline-block;
    padding:8px 19.2px;
    border-radius:32px;
    background:#dff2ff;
    color:#0A66C2;
    font-weight:700;
    font-size:11.2px;
    letter-spacing:1px;
    margin-bottom:16px;
}

.stats-heading h2{
    font-size:38.4px;
    color:#0B214A;
    margin-bottom:16px;
    line-height:1.25;
}

.stats-heading p{
    font-size:13.6px;
    line-height:1.9;
    color:#666;
}

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

.stats-wrapper{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    position:relative;
    z-index:2;
}

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

.stats-card{
    background:#fff;
    border-radius:22.4px;
    padding:36px 20px;
    text-align:center;
    box-shadow:0 16px 40px rgba(0,0,0,.08);
    transition:.4s;
    position:relative;
    overflow:hidden;
}

.stats-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:linear-gradient(90deg,#0A66C2,#00cfff);
}

.stats-card:hover{
    transform:translateY(-9.6px);
    box-shadow:0 24px 48px rgba(0,0,0,.12);
}

/*================ ICON =================*/

.stats-icon{
    width:72px;
    height:72px;
    margin:auto;
    margin-bottom:20px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#0A66C2,#00cfff);
    color:#fff;
    font-size:27.2px;
    transition:.35s;
}

.stats-card:hover .stats-icon{
    transform:rotate(360deg) scale(1.08);
}

/*================ NUMBER =================*/

.counter-number{
    font-size:41.6px;
    font-weight:800;
    color:#0A66C2;
    margin-bottom:8px;
}

.stats-card p{
    font-size:13.6px;
    color:#555;
    font-weight:600;
}

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

@media(max-width:960px){

.stats-wrapper{
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

.stats-heading h2{
    font-size:33.6px;
}

}

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

@media(max-width:793.6px){

.academy-statistics{
    padding:72px 0;
}

.stats-heading{
    margin-bottom:40px;
}

.stats-heading h2{
    font-size:28.8px;
}

.stats-heading p{
    font-size:12.8px;
}

.stats-card{
    padding:28px 16px;
}

.counter-number{
    font-size:33.6px;
}

.stats-icon{
    width:60px;
    height:60px;
    font-size:24px;
}

}

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

@media(max-width:614.4px){

.academy-statistics{
    padding:56px 0;
}

.stats-wrapper{
    grid-template-columns:1fr;
    gap:17.6px;
}

.stats-heading h2{
    font-size:24px;
}

.stats-heading p{
    font-size:12px;
}

.stats-heading span{
    font-size:10.4px;
    padding:6.4px 14.4px;
}

.stats-card{
    padding:24px 16px;
}

.counter-number{
    font-size:30.4px;
}

.stats-card p{
    font-size:12px;
}

}

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

@media(max-width:384px){

.academy-statistics{
    padding:48px 0;
}

.stats-heading{
    margin-bottom:32px;
}

.stats-heading h2{
    font-size:20.8px;
}

.stats-heading p{
    font-size:11.2px;
    line-height:1.7;
}

.stats-heading span{
    font-size:9.6px;
    padding:6.4px 12.8px;
}

.stats-card{
    padding:20px 14.4px;
    border-radius:16px;
}

.stats-icon{
    width:52px;
    height:52px;
    font-size:20.8px;
    margin-bottom:16px;
}

.counter-number{
    font-size:25.6px;
}

.stats-card p{
    font-size:11.2px;
}

}

/*=========================================
EXTRA SMALL (256px)
=========================================*/

@media(max-width:288px){

.stats-heading h2{
    font-size:17.6px;
}

.counter-number{
    font-size:22.4px;
}

.stats-icon{
    width:46.4px;
    height:46.4px;
    font-size:17.6px;
}

.stats-card{
    padding:17.6px 12px;
}

}
/*=========================================
STUDENT VOICES
=========================================*/

.student-voices{
    padding:88px 0;
    background:linear-gradient(135deg,#edf7ff,#ffffff,#eef8ff);
    overflow:hidden;
}

.voices-heading{
    max-width:600px;
    margin:0 auto 56px;
    text-align:center;
}

.voices-heading span{
    display:inline-block;
    padding:8px 17.6px;
    border-radius:32px;
    background:#dff2ff;
    color:#0A66C2;
    font-size:11.2px;
    font-weight:700;
    letter-spacing:1px;
    margin-bottom:14.4px;
}

.voices-heading h2{
    font-size:38.4px;
    color:#09254d;
    margin-bottom:16px;
    line-height:1.25;
}

.voices-heading p{
    color:#666;
    font-size:13.6px;
    line-height:1.8;
}

/*=========================================
SLIDER
=========================================*/

.review-slider{
    width:100%;
    overflow:hidden;
    position:relative;
}

.review-track{
    display:flex;
    gap:24px;
    width:max-content;
    animation:reviewMove 35s linear infinite;
}

.review-slider:hover .review-track{
    animation-play-state:paused;
}

@keyframes reviewMove{

0%{
transform:translateX(0);
}

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

}

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

.voice-card{
    width:288px;
    flex-shrink:0;
    background:#fff;
    padding:28px;
    border-radius:19.2px;
    box-shadow:0 16px 40px rgba(0,0,0,.08);
    transition:.35s;
}

.voice-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 48px rgba(0,0,0,.12);
}

.voice-top{
    display:flex;
    align-items:center;
    gap:14.4px;
    margin-bottom:17.6px;
}

.voice-top img{
    width:56px;
    height:56px;
    border-radius:50%;
    object-fit:cover;
    border:3.2px solid #0A66C2;
}

.voice-top h3{
    font-size:17.6px;
    color:#09254d;
    margin-bottom:4px;
}

.voice-top span{
    color:#777;
    font-size:11.2px;
}

.voice-stars{
    color:#FFD54A;
    font-size:17.6px;
    margin-bottom:14.4px;
}

.voice-card p{
    font-size:12.8px;
    line-height:1.8;
    color:#555;
}

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

@media(max-width:960px){

.voice-card{
    width:264px;
}

.voices-heading h2{
    font-size:33.6px;
}

}

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

@media(max-width:793.6px){

.student-voices{
    padding:72px 0;
}

.voices-heading{
    margin-bottom:44px;
}

.voices-heading h2{
    font-size:28.8px;
}

.voices-heading p{
    font-size:12.8px;
}

.review-track{
    gap:17.6px;
}

.voice-card{
    width:240px;
    padding:24px;
}

.voice-top img{
    width:52px;
    height:52px;
}

}

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

@media(max-width:614.4px){

.student-voices{
    padding:56px 0;
}

.voices-heading h2{
    font-size:24px;
}

.voices-heading p{
    font-size:12px;
}

.review-track{
    gap:14.4px;
}

.voice-card{
    width:216px;
    padding:20px;
}

.voice-top{
    gap:12px;
}

.voice-top img{
    width:48px;
    height:48px;
}

.voice-top h3{
    font-size:16px;
}

.voice-stars{
    font-size:14.4px;
}

.voice-card p{
    font-size:12px;
}

}

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

@media(max-width:384px){

.student-voices{
    padding:48px 0;
}

.voices-heading{
    margin-bottom:32px;
}

.voices-heading span{
    font-size:9.6px;
    padding:6.4px 14.4px;
}

.voices-heading h2{
    font-size:20px;
}

.voices-heading p{
    font-size:11.2px;
}

.review-track{
    gap:12px;
}

.voice-card{
    width:192px;
    padding:16px;
    border-radius:14.4px;
}

.voice-top{
    flex-direction:column;
    text-align:center;
}

.voice-top img{
    width:46.4px;
    height:46.4px;
}

.voice-top h3{
    font-size:14.4px;
}

.voice-top span{
    font-size:10.4px;
}

.voice-stars{
    text-align:center;
    font-size:13.6px;
}

.voice-card p{
    text-align:center;
    font-size:11.2px;
}

}

/*=========================================
EXTRA SMALL (256px)
=========================================*/

@media(max-width:288px){

.voice-card{
    width:168px;
    padding:14.4px;
}

.voices-heading h2{
    font-size:17.6px;
}

.voice-top img{
    width:40px;
    height:40px;
}

.voice-top h3{
    font-size:12.8px;
}

.voice-card p{
    font-size:10.4px;
}

}
/*=========================================
HELP CENTER
=========================================*/

.help-center-section{
    padding:80px 0;
    background:#f8fbff;
    overflow:hidden;
}

.help-wrapper{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:56px;
    align-items:center;
}

.help-left,
.help-right{
    width:100%;
    min-width:0;
}

/* LEFT */

.help-tag{
    display:inline-block;
    background:#e8f4ff;
    color:#0A66C2;
    padding:8px 17.6px;
    border-radius:40px;
    font-size:11.2px;
    font-weight:700;
    letter-spacing:1px;
    margin-bottom:16px;
}

.help-left h2{
    font-size:38.4px;
    line-height:1.2;
    color:#061A3A;
    margin-bottom:16px;
}

.help-left p{
    font-size:13.6px;
    color:#666;
    line-height:1.8;
    margin-bottom:28px;
}

.help-info{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    margin-bottom:28px;
}

.help-count{
    flex:1;
    min-width:136px;
    background:#fff;
    padding:20px;
    border-radius:14.4px;
    box-shadow:0 8px 24px rgba(0,0,0,.06);
    text-align:center;
}

.help-count h3{
    font-size:27.2px;
    color:#0A66C2;
    margin-bottom:6.4px;
}

.help-count span{
    color:#666;
}

.help-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#0A66C2;
    color:#fff;
    padding:12.8px 28px;
    border-radius:40px;
    text-decoration:none;
    font-weight:600;
    transition:.4s;
}

.help-btn:hover{
    background:#061A3A;
    transform:translateY(-3.2px);
}

/* RIGHT */

.help-right{
    display:flex;
    flex-direction:column;
    gap:14.4px;
}

.question-card{
    background:#fff;
    border-radius:14.4px;
    box-shadow:0 6.4px 20px rgba(0,0,0,.06);
    overflow:hidden;
}

.question-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:17.6px 22.4px;
    cursor:pointer;
}

.question-head h3{
    font-size:15.2px;
    color:#061A3A;
    margin:0;
    line-height:1.5;
}

.question-head i{
    width:33.6px;
    height:33.6px;
    border-radius:50%;
    background:#0A66C2;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    transition:.4s;
}

.question-body{
    display:none;
    padding:0 22.4px 19.2px;
}

.question-body p{
    color:#666;
    line-height:1.8;
    margin:0;
}

.question-card.active .question-body{
    display:block;
}

.question-card.active .question-head i{
    transform:rotate(45deg);
    background:#061A3A;
}

/*=========================================
960px
=========================================*/

@media(max-width:960px){

.help-wrapper{
    gap:40px;
}

.help-left h2{
    font-size:33.6px;
}

}

/*=========================================
793.6px
=========================================*/

@media(max-width:793.6px){

.help-wrapper{
    grid-template-columns:1fr;
    gap:40px;
}

.help-left{
    text-align:center;
}

.help-info{
    justify-content:center;
}

.help-btn{
    margin:auto;
}

.help-right{
    width:100%;
}

}

/*=========================================
614.4px
=========================================*/

@media(max-width:614.4px){

.help-center-section{
    padding:64px 0;
}

.help-left h2{
    font-size:27.2px;
}

.help-left p{
    font-size:12px;
}

.help-info{
    flex-direction:column;
    align-items:center;
}

.help-count{
    width:100%;
    max-width:256px;
}

.help-btn{
    width:100%;
    max-width:256px;
    justify-content:center;
}

.question-head{
    padding:14.4px;
}

.question-head h3{
    font-size:13.6px;
}

.question-head i{
    width:30.4px;
    height:30.4px;
}

.question-body{
    padding:0 14.4px 14.4px;
}

.question-body p{
    font-size:12px;
}

}

/*=========================================
460.8px
=========================================*/

@media(max-width:460.8px){

.help-center-section{
    padding:56px 0;
}

.help-tag{
    font-size:9.6px;
    padding:6.4px 14.4px;
}

.help-left h2{
    font-size:22.4px;
}

.help-left p{
    font-size:11.2px;
}

.help-count{
    padding:16px;
}

.help-count h3{
    font-size:22.4px;
}

.question-head{
    padding:12.8px;
}

.question-head h3{
    font-size:12.8px;
}

.question-head i{
    width:27.2px;
    height:27.2px;
    font-size:11.2px;
}

.question-body{
    padding:0 12.8px 12.8px;
}

.question-body p{
    font-size:11.2px;
}

}

/*=========================================
320px
=========================================*/

@media(max-width:320px){

.help-left h2{
    font-size:19.2px;
}

.help-left p{
    font-size:10.4px;
}

.help-count h3{
    font-size:19.2px;
}

.question-head h3{
    font-size:12px;
}

.question-body p{
    font-size:10.4px;
}

.help-btn{
    padding:11.2px 16px;
    font-size:11.2px;
}

}
/*=================================================
CAREER LAUNCH PAD
=================================================*/

.career-launch-pad{
    position:relative;
    padding:80px 0;
    overflow:hidden;
    background:linear-gradient(135deg,#061A3A,#0A66C2);
}

.career-overlay{
    position:absolute;
    inset:0;
    background:url("./images/pattern.png");
    opacity:.06;
    pointer-events:none;
}

.career-box{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1.3fr .7fr;
    gap:48px;
    align-items:center;
    padding:56px;
    border-radius:28px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,.15);
    overflow:hidden;
}

.career-content{
    width:100%;
}

.career-label{
    display:inline-block;
    padding:8px 19.2px;
    border-radius:40px;
    background:rgba(255,255,255,.18);
    color:#fff;
    font-size:11.2px;
    font-weight:700;
    letter-spacing:1px;
    margin-bottom:20px;
}

.career-content h2{
    font-size:41.6px;
    line-height:1.2;
    margin-bottom:20px;
    font-weight:800;
}

.career-content p{
    font-size:14.4px;
    line-height:1.9;
    opacity:.95;
    max-width:560px;
    margin-bottom:32px;
}

.career-buttons{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
}

.career-primary-btn,
.career-secondary-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9.6px;
    padding:12.8px 27.2px;
    border-radius:48px;
    text-decoration:none;
    font-weight:700;
    transition:.4s;
}

.career-primary-btn{
    background:#fff;
    color:#0A66C2;
}

.career-primary-btn:hover{
    transform:translateY(-4px);
}

.career-secondary-btn{
    border:1.6px solid rgba(255,255,255,.5);
    color:#fff;
}

.career-secondary-btn:hover{
    background:#fff;
    color:#0A66C2;
}

.career-stats{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:17.6px;
}

.career-stat-card{
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.15);
    backdrop-filter:blur(9.6px);
    border-radius:17.6px;
    padding:24px 16px;
    text-align:center;
    transition:.4s;
}

.career-stat-card:hover{
    transform:translateY(-6.4px);
    background:rgba(255,255,255,.18);
}

.career-stat-card i{
    font-size:28.8px;
    color:#fff;
    margin-bottom:14.4px;
}

.career-stat-card h3{
    font-size:27.2px;
    color:#fff;
    margin-bottom:6.4px;
}

.career-stat-card span{
    color:#eef5ff;
    font-size:12px;
}


/*=========================================
1120px
=========================================*/

@media(max-width:1120px){

.career-box{
    gap:36px;
    padding:48px;
}

.career-content h2{
    font-size:36.8px;
}

}


/*=========================================
960px
=========================================*/

@media(max-width:960px){

.career-box{
    grid-template-columns:1fr;
    text-align:center;
}

.career-content p{
    margin:auto auto 28px;
}

.career-buttons{
    justify-content:center;
}

.career-stats{
    max-width:560px;
    margin:auto;
}

}


/*=========================================
793.6px
=========================================*/

@media(max-width:793.6px){

.career-launch-pad{
    padding:64px 0;
}

.career-box{
    padding:40px;
}

.career-content h2{
    font-size:32px;
}

.career-content p{
    font-size:13.6px;
}

}


/*=========================================
614.4px
=========================================*/

@media(max-width:614.4px){

.career-launch-pad{
    padding:56px 0;
}

.career-box{
    padding:32px 24px;
    gap:32px;
    border-radius:20px;
}

.career-content h2{
    font-size:27.2px;
}

.career-content p{
    font-size:12.8px;
    line-height:1.8;
}

.career-buttons{
    flex-direction:column;
    align-items:center;
}

.career-primary-btn,
.career-secondary-btn{
    width:100%;
    max-width:256px;
}

.career-stats{
    grid-template-columns:1fr 1fr;
    gap:14.4px;
}

.career-stat-card{
    padding:20px 12px;
}

.career-stat-card h3{
    font-size:22.4px;
}

}


/*=========================================
460.8px
=========================================*/

@media(max-width:460.8px){

.career-launch-pad{
    padding:48px 0;
}

.career-box{
    padding:24px 16px;
}

.career-label{
    font-size:9.6px;
    padding:6.4px 14.4px;
}

.career-content h2{
    font-size:22.4px;
}

.career-content p{
    font-size:12px;
}

.career-stats{
    grid-template-columns:1fr;
}

.career-stat-card{
    padding:17.6px;
}

.career-stat-card i{
    font-size:24px;
}

.career-stat-card h3{
    font-size:20.8px;
}

.career-primary-btn,
.career-secondary-btn{
    width:100%;
    font-size:12px;
    padding:12px;
}

}


/*=========================================
320px
=========================================*/

@media(max-width:320px){

.career-content h2{
    font-size:19.2px;
}

.career-content p{
    font-size:11.2px;
}

.career-label{
    font-size:8.8px;
}

.career-primary-btn,
.career-secondary-btn{
    font-size:11.2px;
    padding:11.2px;
}

.career-stat-card h3{
    font-size:17.6px;
}

.career-stat-card span{
    font-size:10.4px;
}

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

.vk-header{

position:fixed;
top:0;
left:0;
width:100%;
z-index:9999;
background:#ffffff;
transition:.35s;
box-shadow:0 3.2px 14.4px rgba(0,0,0,.05);

}

.vk-header.sticky{

background:rgba(255,255,255,.95);
backdrop-filter:blur(12px);
box-shadow:0 12px 32px rgba(0,0,0,.08);

}

.vk-navbar{

max-width:1120px;
margin:auto;

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

padding:12px 32px;

}

/*=====================
Logo
=====================*/

.vk-logo{

display:flex;
align-items:center;
gap:12px;
text-decoration:none;

}

.vk-logo img{

width:52px;
height:52px;
object-fit:contain;

}

.vk-logo-text h2{

font-size:20.8px;
color:#061A3A;
margin:0;
font-weight:700;

}

.vk-logo-text span{

font-size:10.4px;
color:#666;

}

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

.vk-menu{

display:flex;
align-items:center;
gap:36px;
list-style:none;

}

.vk-menu a{

text-decoration:none;
font-size:13.6px;
font-weight:600;
color:#061A3A;
transition:.3s;

}

.vk-menu a:hover{

color:#0A66C2;

}

.vk-active{

color:#0A66C2!important;

}

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

.vk-right{

display:flex;
align-items:center;
gap:16px;

}

.vk-download{

padding:11.2px 22.4px;
border-radius:32px;
background:linear-gradient(135deg,#0A66C2,#00A8FF);
color:#fff;
font-weight:600;
text-decoration:none;
display:flex;
align-items:center;
gap:8px;
transition:.35s;

}

.vk-download:hover{

transform:translateY(-3.2px);

}

.vk-toggle{

display:none;
background:none;
border:none;
font-size:22.4px;
cursor:pointer;
color:#061A3A;

}

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

@media(max-width:793.6px){

.vk-navbar{

padding:11.2px 20px;

}

.vk-download{

display:none;

}

.vk-toggle{

display:block;

}

.vk-menu{

position:absolute;

top:100%;
left:0;

width:100%;

background:#fff;

display:flex;
flex-direction:column;

align-items:center;

gap:0;

max-height:0;
overflow:hidden;

transition:.4s;

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

}

.vk-menu.active{

max-height:240px;
padding:16px 0;

}

.vk-menu li{

width:100%;
text-align:center;

}

.vk-menu a{

display:block;
padding:14.4px;

}

}

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

@media(max-width:614.4px){

.vk-logo img{

width:44px;
height:44px;

}

.vk-logo-text h2{

font-size:17.6px;

}

.vk-logo-text span{

font-size:8.8px;

}

.vk-navbar{

padding:9.6px 14.4px;

}

}

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

@media(max-width:384px){

.vk-logo{

gap:8px;

}

.vk-logo img{

width:36.8px;
height:36.8px;

}

.vk-logo-text h2{

font-size:14.4px;

}

.vk-logo-text span{

display:none;

}

.vk-navbar{

padding:8px 12px;

}

.vk-toggle{

font-size:19.2px;

}

}
.sticky-header{

position:fixed;
top:0;
left:0;
width:100%;
z-index:9999;
background:#ffffffee;
backdrop-filter:blur(12px);
box-shadow:0 8px 24px rgba(0,0,0,.08);
animation:slideDown .4s ease;

}

@keyframes slideDown{

from{
transform:translateY(-100%);
}

to{
transform:translateY(0);
}

}
.academy-menu.active{

display:flex !important;

}
.scroll-progress{

position:fixed;

top:0;

left:0;

width:0;

height:3.2px;

background:linear-gradient(90deg,#0A66C2,#1CB5E0);

z-index:999999;

transition:.2s;

}
button,
a{

position:relative;

overflow:hidden;

}

.ripple{

position:absolute;

width:12px;

height:12px;

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

border-radius:50%;

transform:translate(-50%,-50%);

animation:ripple .6s linear;

pointer-events:none;

}

@keyframes ripple{

0%{

width:0;

height:0;

opacity:1;

}

100%{

width:240px;

height:240px;

opacity:0;

}

}
/*======================================
CONTACT HERO RESPONSIVE
======================================*/

/* Large Desktop */
@media (max-width:1120px){

.contact-hero-wrapper{

gap:48px;

}

.contact-left h1{

font-size:44.8px;

}

.hero-image-box img{

max-width:416px;

}

}


/* Laptop */
@media (max-width:960px){

.contact-hero-section{

padding:112px 0 72px;

}

.contact-hero-wrapper{

gap:36px;

}

.contact-left h1{

font-size:38.4px;
line-height:1.2;

}

.contact-left p{

font-size:13.6px;

}

.hero-image-box img{

max-width:376px;

}

}


/* Tablet Landscape */
@media (max-width:793.6px){

.contact-hero-section{

padding:104px 0 64px;

}

.contact-hero-wrapper{

display:flex;
flex-direction:column-reverse;
align-items:center;
text-align:center;
gap:44px;

}

.contact-left{

width:100%;

}

.contact-right{

width:100%;

display:flex;
justify-content:center;

}

.contact-left h1{

font-size:33.6px;

}

.contact-left p{

max-width:560px;
margin:auto;

}

.contact-buttons{

justify-content:center;
flex-wrap:wrap;

}

.hero-contact-info{

justify-content:center;
flex-wrap:wrap;
gap:20px;

}

.hero-image-box{

max-width:360px;
width:100%;

}

.hero-image-box img{

width:100%;
height:auto;

}

}


/* Tablet */
@media (max-width:614.4px){

.contact-hero-section{

padding:96px 0 56px;

}

.contact-left h1{

font-size:28.8px;

}

.contact-left p{

font-size:12.8px;
line-height:1.8;

}

.contact-buttons{

flex-direction:column;
align-items:center;
gap:14.4px;

}

.primary-contact-btn,
.secondary-contact-btn{

width:224px;
justify-content:center;

}

.hero-contact-info{

flex-direction:column;
gap:14.4px;

}

.hero-image-box{

max-width:304px;

}

.scroll-down{

display:none;

}

}


/* Mobile */
@media (max-width:460.8px){

.contact-hero-section{

padding:88px 0 48px;

}

.contact-left h1{

font-size:24px;

}

.contact-left p{

font-size:12px;

}

.hero-image-box{

max-width:256px;

}

.primary-contact-btn,
.secondary-contact-btn{

width:100%;

}

.hero-contact-info div{

justify-content:center;
font-size:12px;

}

}


/* Small Mobile */
@media (max-width:340px){

.contact-left h1{

font-size:21.6px;

}

.contact-left p{

font-size:11.2px;

}

.hero-image-box{

max-width:224px;

}

.contact-buttons{

width:100%;

}

}


/* iPhone */
@media (max-width:300px){

.contact-left h1{

font-size:19.2px;

}

.hero-image-box{

max-width:200px;

}

.primary-contact-btn,
.secondary-contact-btn{

padding:11.2px 14.4px;
font-size:12px;

}

.hero-contact-info{

font-size:11.2px;

}

}


/* Small Devices */
@media (max-width:256px){

.contact-left h1{

font-size:17.6px;

}

.contact-left p{

font-size:10.4px;

}

.hero-image-box{

max-width:176px;

}

.primary-contact-btn,
.secondary-contact-btn{

font-size:11.2px;
padding:10.4px;

}

.hero-contact-info{

gap:9.6px;

}

.hero-contact-info div{

font-size:10.4px;

}

}
/*==========================================
GET IN TOUCH RESPONSIVE
==========================================*/

/* Large Laptop */
@media (max-width:960px){

.contact-card-grid{

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

gap:24px;

}

.contact-connect-title h2{

font-size:33.6px;

}

}


/* Tablet */
@media (max-width:793.6px){

.contact-connect-section{

padding:64px 0;

}

.contact-connect-title{

margin-bottom:40px;

}

.contact-connect-title h2{

font-size:28.8px;

}

.contact-connect-title p{

width:90%;
margin:auto;

}

.contact-card-grid{

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

gap:20px;

}

.connect-card{

padding:28px 20px;

}

.connect-icon{

width:56px;
height:56px;
font-size:22.4px;

}

}


/* Small Tablet */
@media (max-width:614.4px){

.contact-connect-section{

padding:56px 0;

}

.contact-connect-title{

text-align:center;

}

.contact-connect-title span{

font-size:11.2px;

}

.contact-connect-title h2{

font-size:25.6px;
line-height:1.3;

}

.contact-connect-title p{

width:100%;
font-size:12.8px;

}

.contact-card-grid{

grid-template-columns:1fr;

gap:20px;

}

.connect-card{

padding:28px 20px;
text-align:center;

}

.connect-icon{

margin:0 auto 16px;

}

.connect-card h3{

font-size:19.2px;

}

.connect-card p{

font-size:12px;

}

.connect-card a{

justify-content:center;
display:inline-flex;

}

.contact-circle{

display:none;

}

}


/* Mobile */
@media (max-width:460.8px){

.contact-connect-section{

padding:48px 0;

}

.contact-connect-title h2{

font-size:22.4px;

}

.contact-connect-title p{

font-size:12px;

}

.connect-card{

padding:24px 16px;

border-radius:16px;

}

.connect-icon{

width:52px;
height:52px;
font-size:20px;

}

.connect-card h3{

font-size:17.6px;

}

.connect-card p{

font-size:11.2px;
line-height:1.7;

}

.connect-card a{

font-size:12px;
word-break:break-word;

}

}


/* Mobile Small */
@media (max-width:340px){

.contact-connect-title h2{

font-size:20px;

}

.contact-connect-title p{

font-size:11.2px;

}

.connect-card{

padding:20px 14.4px;

}

.connect-icon{

width:48px;
height:48px;

}

.connect-card h3{

font-size:16px;

}

.connect-card a{

font-size:11.2px;

}

}


/* iPhone */
@media (max-width:300px){

.contact-connect-title h2{

font-size:18.4px;

}

.connect-card{

padding:17.6px 12px;

}

.connect-icon{

width:44px;
height:44px;
font-size:17.6px;

}

.connect-card h3{

font-size:15.2px;

}

.connect-card p{

font-size:10.4px;

}

.connect-card a{

font-size:10.4px;

}

}


/* Small Devices */
@media (max-width:256px){

.contact-connect-section{

padding:40px 0;

}

.contact-connect-title h2{

font-size:16.8px;

}

.contact-connect-title p{

font-size:10.4px;

}

.connect-card{

padding:16px 9.6px;

}

.connect-icon{

width:40px;
height:40px;
font-size:16px;

}

.connect-card h3{

font-size:14.4px;

}

.connect-card p{

font-size:9.6px;

}

.connect-card a{

font-size:9.6px;

}

}
/*==================================================
CONTACT FORM RESPONSIVE
==================================================*/

.contact-form-area{
    padding:72px 0;
    background:#f8fbff;
    overflow:hidden;
}

.contact-form-layout{
    display:grid;
    grid-template-columns:1.3fr .8fr;
    gap:40px;
    align-items:flex-start;
}

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

.enquiry-form-box{
    background:#fff;
    padding:36px;
    border-radius:20px;
    box-shadow:0 16px 48px rgba(0,0,0,.08);
}

.enquiry-form-box span{
    display:inline-block;
    background:#eaf4ff;
    color:#0A66C2;
    padding:6.4px 14.4px;
    border-radius:24px;
    font-size:11.2px;
    font-weight:600;
    margin-bottom:14.4px;
}

.enquiry-form-box h2{
    font-size:30.4px;
    margin-bottom:12px;
    color:#061A3A;
    line-height:1.3;
}

.enquiry-form-box p{
    color:#666;
    line-height:1.8;
    margin-bottom:28px;
}

.double-input{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-bottom:16px;
}

.enquiry-form-box input,
.enquiry-form-box select,
.enquiry-form-box textarea{
    width:100%;
    padding:13.6px 14.4px;
    border:1px solid #dbe8f5;
    border-radius:9.6px;
    outline:none;
    font-size:12px;
    transition:.3s;
    background:#fff;
    color:#061A3A;
}

.enquiry-form-box textarea{
    resize:none;
    margin-top:16px;
}

.enquiry-form-box input:focus,
.enquiry-form-box select:focus,
.enquiry-form-box textarea:focus{
    border-color:#0A66C2;
    box-shadow:0 0 0 3.2px rgba(10,102,194,.08);
}

.enquiry-form-box button{
    margin-top:20px;
    width:100%;
    padding:14.4px;
    border:none;
    border-radius:9.6px;
    background:linear-gradient(135deg,#0A66C2,#1B84F2);
    color:#fff;
    font-size:13.6px;
    font-weight:600;
    cursor:pointer;
    transition:.35s;
}

.enquiry-form-box button:hover{
    transform:translateY(-3.2px);
    box-shadow:0 14.4px 28px rgba(10,102,194,.25);
}

.enquiry-form-box button i{
    margin-left:8px;
}

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

.office-info-box{
    background:linear-gradient(135deg,#061A3A,#0A66C2);
    color:#fff;
    padding:36px;
    border-radius:20px;
    height:100%;
    box-shadow:0 16px 48px rgba(0,0,0,.15);
}

.office-header h3{
    font-size:24px;
    margin-bottom:8px;
}

.office-header p{
    color:#d7e8ff;
    margin-bottom:28px;
    line-height:1.8;
}

.office-item{
    display:flex;
    align-items:flex-start;
    gap:14.4px;
    margin-bottom:22.4px;
}

.office-item i{
    width:44px;
    height:44px;
    background:rgba(255,255,255,.12);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:17.6px;
    flex-shrink:0;
}

.office-item h4{
    margin-bottom:4.8px;
    font-size:14.4px;
}

.office-item p{
    color:#dcecff;
    line-height:1.8;
}

.office-social{
    display:flex;
    gap:12px;
    margin-top:28px;
    flex-wrap:wrap;
}

.office-social a{
    width:38.4px;
    height:38.4px;
    border-radius:50%;
    background:rgba(255,255,255,.12);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.3s;
    font-size:14.4px;
}

.office-social a:hover{
    background:#fff;
    color:#0A66C2;
    transform:translateY(-3.2px);
}

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

@media(max-width:960px){

.contact-form-layout{
    gap:28px;
}

.enquiry-form-box,
.office-info-box{
    padding:28px;
}

.enquiry-form-box h2{
    font-size:27.2px;
}

}

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

@media(max-width:793.6px){

.contact-form-layout{
    grid-template-columns:1fr;
}

.office-info-box{
    margin-top:8px;
}

}

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

@media(max-width:614.4px){

.contact-form-area{
    padding:56px 0;
}

.enquiry-form-box,
.office-info-box{
    padding:22.4px;
    border-radius:16px;
}

.enquiry-form-box h2{
    font-size:24px;
}

.office-header h3{
    font-size:20.8px;
}

.double-input{
    grid-template-columns:1fr;
    gap:14.4px;
}

.enquiry-form-box textarea{
    margin-top:14.4px;
}

.office-item{
    gap:12px;
}

.office-item i{
    width:40px;
    height:40px;
    font-size:16px;
}

.office-social{
    justify-content:center;
}

}

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

@media(max-width:460.8px){

.contact-form-area{
    padding:48px 0;
}

.enquiry-form-box,
.office-info-box{
    padding:17.6px;
}

.enquiry-form-box span{
    font-size:9.6px;
}

.enquiry-form-box h2{
    font-size:20.8px;
}

.enquiry-form-box p{
    font-size:12px;
}

.office-header h3{
    font-size:17.6px;
}

.office-item{
    flex-direction:column;
    text-align:center;
    align-items:center;
}

.office-item i{
    margin-bottom:6.4px;
}

.office-social{
    gap:9.6px;
}

.office-social a{
    width:36px;
    height:36px;
}

.enquiry-form-box button{
    font-size:12.8px;
    padding:12.8px;
}

}

/*==================================================
EXTRA SMALL DEVICES
==================================================*/

@media(max-width:304px){

.enquiry-form-box h2{
    font-size:17.6px;
}

.office-header h3{
    font-size:16px;
}

.enquiry-form-box,
.office-info-box{
    padding:14.4px;
}

.enquiry-form-box input,
.enquiry-form-box select,
.enquiry-form-box textarea{
    padding:11.2px;
    font-size:11.2px;
}

.enquiry-form-box button{
    padding:12px;
    font-size:12px;
}

.office-social a{
    width:33.6px;
    height:33.6px;
    font-size:12.8px;
}

}
/*=========================================
WHY CONTACT US RESPONSIVE
=========================================*/

/* Large Desktop */
@media (max-width:1120px){

    .career-support-section{
        padding:72px 0;
    }

    .career-support-grid{
        grid-template-columns:repeat(3,1fr);
        gap:22.4px;
    }

}

/* Laptop */
@media (max-width:960px){

    .career-heading h2{
        font-size:33.6px;
        line-height:1.3;
    }

    .career-heading p{
        width:90%;
        margin:auto;
    }

    .career-support-grid{
        grid-template-columns:repeat(2,1fr);
        gap:20px;
    }

}

/* Tablet */
@media (max-width:793.6px){

    .career-support-section{
        padding:64px 0;
    }

    .career-heading{
        margin-bottom:40px;
    }

    .career-heading span{
        font-size:11.2px;
    }

    .career-heading h2{
        font-size:27.2px;
        line-height:1.35;
    }

    .career-heading p{
        width:100%;
        font-size:12.8px;
        line-height:1.8;
    }

    .career-support-grid{
        grid-template-columns:repeat(2,1fr);
        gap:16px;
    }

    .career-card{
        padding:28px 20px;
    }

    .career-icon{
        width:56px;
        height:56px;
        font-size:22.4px;
        margin-bottom:16px;
    }

    .career-card h3{
        font-size:17.6px;
    }

    .career-card p{
        font-size:12px;
    }

}

/* Large Mobile */
@media (max-width:614.4px){

    .career-support-section{
        padding:56px 0;
    }

    .career-overlay{
        opacity:.12;
    }

    .career-heading{
        margin-bottom:32px;
    }

    .career-heading span{
        font-size:10.4px;
        letter-spacing:1.6px;
    }

    .career-heading h2{
        font-size:24px;
        margin-top:9.6px;
    }

    .career-heading p{
        font-size:12px;
        line-height:1.8;
    }

    .career-support-grid{
        grid-template-columns:1fr;
        gap:17.6px;
    }

    .career-card{
        padding:28px 22.4px;
        border-radius:16px;
        text-align:center;
    }

    .career-icon{
        margin:0 auto 17.6px;
    }

    .career-card h3{
        font-size:17.6px;
    }

}

/* Mobile */
@media (max-width:460.8px){

    .career-support-section{
        padding:48px 0;
    }

    .career-heading span{
        font-size:9.6px;
    }

    .career-heading h2{
        font-size:20.8px;
    }

    .career-heading p{
        font-size:11.2px;
    }

    .career-card{
        padding:22.4px 16px;
    }

    .career-icon{
        width:52px;
        height:52px;
        font-size:19.2px;
    }

    .career-card h3{
        font-size:16px;
        margin-bottom:9.6px;
    }

    .career-card p{
        font-size:11.2px;
        line-height:1.7;
    }

}

/* Small Mobile */
@media (max-width:320px){

    .career-support-section{
        padding:40px 0;
    }

    .career-heading h2{
        font-size:17.6px;
    }

    .career-heading p{
        font-size:10.4px;
    }

    .career-card{
        padding:19.2px 14.4px;
    }

    .career-icon{
        width:48px;
        height:48px;
        font-size:17.6px;
    }

    .career-card h3{
        font-size:14.4px;
    }

    .career-card p{
        font-size:10.4px;
    }

}
/*=========================================
JOURNEY PROCESS RESPONSIVE
=========================================*/

/* Large Desktop */
@media (max-width:1120px){

    .journey-wrapper{
        gap:16px;
    }

    .journey-step{
        flex:1;
    }

}

/* Laptop */
@media (max-width:960px){

    .journey-process-area{
        padding:72px 0;
    }

    .journey-title h2{
        font-size:33.6px;
    }

    .journey-wrapper{
        gap:14.4px;
    }

    .journey-number{
        width:68px;
        height:68px;
        font-size:24px;
    }

}

/* Tablet */
@media (max-width:793.6px){

    .journey-process-area{
        padding:64px 0;
    }

    .journey-title{
        margin-bottom:48px;
    }

    .journey-title h2{
        font-size:27.2px;
        line-height:1.4;
    }

    .journey-wrapper{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:24px;
    }

    .journey-line{
        display:none;
    }

    .journey-step{
        padding:28px 20px;
        background:#fff;
        border-radius:16px;
        box-shadow:0 9.6px 28px rgba(0,0,0,.08);
        text-align:center;
    }

    .journey-number{
        margin:0 auto 16px;
    }

}

/* Large Mobile */
@media (max-width:614.4px){

    .journey-process-area{
        padding:56px 0;
    }

    .journey-title{
        margin-bottom:36px;
    }

    .journey-title span{
        font-size:10.4px;
        letter-spacing:1.6px;
    }

    .journey-title h2{
        font-size:24px;
    }

    .journey-wrapper{
        grid-template-columns:1fr;
        gap:17.6px;
    }

    .journey-step{
        padding:24px 17.6px;
    }

    .journey-number{
        width:60px;
        height:60px;
        font-size:20.8px;
    }

    .journey-step h3{
        font-size:17.6px;
        margin:14.4px 0 8px;
    }

    .journey-step p{
        font-size:12px;
        line-height:1.7;
    }

}

/* Mobile */
@media (max-width:460.8px){

    .journey-process-area{
        padding:48px 0;
    }

    .journey-title h2{
        font-size:20.8px;
    }

    .journey-title span{
        font-size:9.6px;
    }

    .journey-step{
        padding:20px 14.4px;
    }

    .journey-number{
        width:52px;
        height:52px;
        font-size:17.6px;
    }

    .journey-step h3{
        font-size:16px;
    }

    .journey-step p{
        font-size:11.2px;
    }

}

/* Small Mobile */
@media (max-width:320px){

    .journey-process-area{
        padding:40px 0;
    }

    .journey-title h2{
        font-size:17.6px;
    }

    .journey-step{
        padding:17.6px 12px;
    }

    .journey-number{
        width:46.4px;
        height:46.4px;
        font-size:16px;
    }

    .journey-step h3{
        font-size:14.4px;
    }

    .journey-step p{
        font-size:10.4px;
        line-height:1.6;
    }

}
/*=====================================
LOCATION SECTION
======================================*/

.location-area{
    padding:80px 0;
    background:#f8fbff;
    position:relative;
    overflow:hidden;
}

.location-wrapper{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:48px;
    align-items:center;
}

.location-map{
    position:relative;
    width:100%;
}

.location-map iframe{
    width:100%;
    height:416px;
    border:0;
    border-radius:20px;
    box-shadow:0 20px 48px rgba(0,0,0,.12);
}

.location-content{
    background:#fff;
    padding:40px;
    border-radius:20px;
    box-shadow:0 16px 40px rgba(0,0,0,.08);
}

.location-content span{
    display:inline-block;
    color:#0A66C2;
    font-weight:700;
    letter-spacing:1.6px;
    margin-bottom:12px;
    text-transform:uppercase;
    font-size:11.2px;
}

.location-content h2{
    font-size:33.6px;
    line-height:1.2;
    margin-bottom:16px;
    color:#061A3A;
}

.location-content p{
    font-size:13.6px;
    line-height:1.8;
    color:#666;
    margin-bottom:24px;
}

.location-content ul{
    list-style:none;
    padding:0;
    margin:0 0 28px;
}

.location-content ul li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-bottom:14.4px;
    font-size:13.6px;
    color:#444;
    line-height:1.7;
}

.location-content ul li i{
    color:#0A66C2;
    width:19.2px;
    font-size:16px;
    margin-top:2.4px;
}

.visit-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    padding:12.8px 30.4px;
    background:linear-gradient(135deg,#061A3A,#0A66C2);
    color:#fff;
    border-radius:40px;
    font-weight:600;
    transition:.35s;
}

.visit-btn:hover{
    transform:translateY(-4px);
    box-shadow:0 14.4px 28px rgba(10,102,194,.35);
}

/*==============================
Large Laptop
==============================*/

@media(max-width:960px){

.location-wrapper{
    gap:32px;
}

.location-content{
    padding:32px;
}

.location-content h2{
    font-size:28.8px;
}

.location-map iframe{
    height:384px;
}

}

/*==============================
Tablet
==============================*/

@media(max-width:793.6px){

.location-area{
    padding:64px 0;
}

.location-wrapper{
    grid-template-columns:1fr;
    gap:32px;
}

.location-map{
    order:2;
}

.location-content{
    order:1;
    text-align:center;
    padding:32px;
}

.location-content ul li{
    justify-content:center;
    text-align:left;
}

.location-map iframe{
    height:360px;
}

}

/*==============================
Mobile
==============================*/

@media(max-width:614.4px){

.location-area{
    padding:56px 0;
}

.location-content{
    padding:24px 20px;
    border-radius:16px;
}

.location-content span{
    font-size:10.4px;
}

.location-content h2{
    font-size:24px;
}

.location-content p{
    font-size:12px;
}

.location-content ul li{
    font-size:12px;
    gap:9.6px;
}

.location-content ul li i{
    font-size:14.4px;
}

.location-map iframe{
    height:280px;
    border-radius:14.4px;
}

.visit-btn{
    width:100%;
    padding:12px;
}

}

/*==============================
Small Mobile
==============================*/

@media(max-width:460.8px){

.location-area{
    padding:48px 0;
}

.location-wrapper{
    gap:20px;
}

.location-content{
    padding:20px 16px;
}

.location-content h2{
    font-size:20.8px;
}

.location-content p{
    font-size:11.2px;
}

.location-content ul li{
    font-size:11.2px;
    align-items:flex-start;
}

.location-map iframe{
    height:240px;
}

.visit-btn{
    font-size:12px;
    padding:11.2px;
}

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

.academy-footer{
    position: relative;
    background: #061A3A;
    color: #fff;
    overflow: hidden;
    padding-top:64px;
}

.footer-wave{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:6.4px;
    background:linear-gradient(90deg,#0A66C2,#36b3ff,#0A66C2);
}

.academy-footer-wrapper{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1.3fr;
    gap:40px;
    padding-bottom:48px;
}

.footer-company p{
    margin:16px 0;
    line-height:1.8;
    color:#d7e4f7;
}

.footer-logo{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:16px;
}

.footer-logo i{
    width:48px;
    height:48px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#0A66C2;
    font-size:19.2px;
}

.footer-logo h2{
    color:#fff;
    font-size:22.4px;
}

.footer-links-area h3,
.footer-course-area h3,
.footer-contact-area h3{
    margin-bottom:20px;
    font-size:17.6px;
    color:#fff;
}

.footer-links-area ul,
.footer-course-area ul{
    list-style:none;
    padding:0;
}

.footer-links-area ul li,
.footer-course-area ul li{
    margin-bottom:11.2px;
}

.footer-links-area a{
    color:#d8e5f5;
    text-decoration:none;
    transition:.3s;
}

.footer-links-area a:hover{
    color:#fff;
    padding-left:6.4px;
}

.footer-course-area li{
    color:#d8e5f5;
}

.footer-contact-area p{
    display:flex;
    gap:9.6px;
    align-items:flex-start;
    color:#d8e5f5;
    margin-bottom:14.4px;
    line-height:1.7;
}

.footer-contact-area i{
    color:#0A66C2;
    margin-top:3.2px;
}

.footer-download-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:16px;
    background:#0A66C2;
    color:#fff;
    text-decoration:none;
    padding:11.2px 19.2px;
    border-radius:40px;
    transition:.3s;
    font-weight:600;
}

.footer-download-btn:hover{
    background:#fff;
    color:#0A66C2;
}

.footer-social{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.footer-social a{
    width:36.8px;
    height:36.8px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    color:#fff;
    transition:.35s;
}

.footer-social a:hover{
    background:#0A66C2;
    transform:translateY(-4px);
}

.footer-bottom-bar{
    border-top:1px solid rgba(255,255,255,.12);
    padding:20px 0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
}

.footer-bottom-bar p{
    color:#d7e4f7;
    margin:0;
}

.footer-bottom-bar div{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

.footer-bottom-bar a{
    color:#d7e4f7;
    text-decoration:none;
    transition:.3s;
}

.footer-bottom-bar a:hover{
    color:#fff;
}

/*==========================================
1120px
==========================================*/

@media(max-width:1120px){

.academy-footer-wrapper{
grid-template-columns:repeat(2,1fr);
gap:36px;
}

}

/*==========================================
793.6px
==========================================*/

@media(max-width:793.6px){

.academy-footer{
padding-top:56px;
}

.academy-footer-wrapper{
grid-template-columns:1fr 1fr;
gap:32px;
}

.footer-logo h2{
font-size:19.2px;
}

.footer-links-area h3,
.footer-course-area h3,
.footer-contact-area h3{
font-size:16px;
}

.footer-bottom-bar{
flex-direction:column;
text-align:center;
}

.footer-bottom-bar div{
justify-content:center;
}

}

/*==========================================
614.4px
==========================================*/

@media(max-width:614.4px){

.academy-footer{
padding-top:48px;
}

.academy-footer-wrapper{
grid-template-columns:1fr;
gap:28px;
text-align:center;
}

.footer-logo{
justify-content:center;
}

.footer-company p{
max-width:480px;
margin:16px auto;
}

.footer-social{
justify-content:center;
}

.footer-contact-area p{
justify-content:center;
text-align:left;
}

.footer-download-btn{
margin:auto;
display:inline-flex;
}

.footer-bottom-bar{
padding:16px 0;
}

.footer-bottom-bar div{
gap:14.4px;
}

}

/*==========================================
460.8px
==========================================*/

@media(max-width:460.8px){

.academy-footer{
padding-top:40px;
}

.footer-logo i{
width:41.6px;
height:41.6px;
font-size:16px;
}

.footer-logo h2{
font-size:17.6px;
}

.footer-company p,
.footer-course-area li,
.footer-links-area a,
.footer-contact-area p,
.footer-bottom-bar p{
font-size:12px;
line-height:1.7;
}

.footer-links-area h3,
.footer-course-area h3,
.footer-contact-area h3{
font-size:15.2px;
margin-bottom:14.4px;
}

.footer-download-btn{
width:100%;
justify-content:center;
padding:12px;
}

.footer-social a{
width:33.6px;
height:33.6px;
}

.footer-bottom-bar div{
flex-direction:column;
gap:8px;
}

}

/*==========================================
320px
==========================================*/

@media(max-width:320px){

.footer-logo{
flex-direction:column;
}

.footer-logo h2{
font-size:16px;
}

.footer-company p{
font-size:11.2px;
}

.footer-contact-area p{
font-size:11.2px;
}

.footer-download-btn{
font-size:11.2px;
padding:11.2px;
}

}
/*======================
Footer Logo
=======================*/

.footer-logo{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:16px;
}

.footer-logo img{
    width:52px;
    height:52px;
    object-fit:contain;
    border-radius:9.6px;
    background:#fff;
    padding:4.8px;
    box-shadow:0 6.4px 16px rgba(0,0,0,.15);
}

.footer-logo-text{
    display:flex;
    flex-direction:column;
}

.footer-logo-text h2{
    font-size:20.8px;
    color:#fff;
    margin:0;
    font-weight:700;
    line-height:1.2;
}

.footer-logo-text span{
    font-size:11.2px;
    color:rgba(255,255,255,.75);
    margin-top:2.4px;
    letter-spacing:.4px;
}

/*======================
Responsive
=======================*/

@media (max-width:614.4px){

    .footer-logo{
        justify-content:center;
        text-align:center;
        flex-direction:column;
        gap:8px;
    }

    .footer-logo img{
        width:48px;
        height:48px;
    }

    .footer-logo-text h2{
        font-size:17.6px;
    }

    .footer-logo-text span{
        font-size:10.4px;
    }

}

/* Fix for Career Launch Pad Text Colors on Dark Background */
.career-launch-pad .career-content h2 {
    color: #ffffff;
}
.career-launch-pad .career-content p {
    color: rgba(255, 255, 255, 0.88);
}
.career-launch-pad .career-label {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}
.career-launch-pad .career-secondary-btn {
    color: #ffffff;
}



/* Fix for VKab Mobile App Layout and Animations */
.phone-wrapper {
    position: relative;
    display: inline-block;
    animation: phoneFloat 4s ease-in-out infinite;
}
.academy-phone img {
    animation: none !important;
}



/*=================================================
   PREMIUM APP SHOWCASE (REDESIGN)
=================================================*/
.premium-app-showcase {
    position: relative;
    padding: 100px 0;
    background: linear-gradient(145deg, #020a1c 0%, #0a1936 100%);
    overflow: hidden;
    color: #fff;
    margin: 40px 0;
}
.premium-app-bg-glow {
    position: absolute;
    top: -20%;
    left: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(10,102,194,0.15) 0%, rgba(0,0,0,0) 70%);
    border-radius: 50%;
    z-index: 0;
}
.premium-app-showcase .container {
    position: relative;
    z-index: 2;
}
.premium-app-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.premium-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    color: #00C897;
    margin-bottom: 24px;
}
.premium-title {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
    color: #fff;
}
.premium-title .text-gradient {
    background: linear-gradient(to right, #00C897, #0A66C2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.premium-description {
    font-size: 16px;
    line-height: 1.8;
    color: rgba(255,255,255,0.8);
    margin-bottom: 32px;
}
.premium-features-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 40px;
}
.premium-features-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: #fff;
    font-weight: 500;
}
.premium-features-list li i {
    color: #00C897;
    font-size: 18px;
}
.premium-actions {
    display: flex;
    gap: 20px;
    align-items: center;
}
.premium-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #0A66C2, #00C897);
    color: #fff;
    padding: 16px 32px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 16px;
    box-shadow: 0 10px 30px rgba(10,102,194,0.3);
    transition: transform 0.3s, box-shadow 0.3s;
}
.premium-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(10,102,194,0.5);
    color: #fff;
}
.premium-btn-secondary {
    display: inline-flex;
    align-items: center;
    padding: 16px 32px;
    border-radius: 50px;
    border: 2px solid rgba(255,255,255,0.3);
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    transition: background 0.3s, border-color 0.3s;
}
.premium-btn-secondary:hover {
    background: rgba(255,255,255,0.1);
    border-color: #fff;
}

/* Right Side: Visual */
.premium-app-visual {
    position: relative;
    display: flex;
    justify-content: center;
}
.premium-visual-glow {
    position: absolute;
    width: 300px;
    height: 300px;
    background: #0A66C2;
    filter: blur(100px);
    opacity: 0.5;
    z-index: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}
.premium-phone-container {
    position: relative;
    z-index: 2;
    animation: premiumFloat 5s ease-in-out infinite;
}
.premium-phone-img {
    max-width: 400px;
    width: 100%;
    filter: drop-shadow(0 20px 50px rgba(0,0,0,0.5));
    height: auto;
    border-radius:10px;
}
.premium-float-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 12px 20px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    animation: premiumFloatCards 4s ease-in-out infinite reverse;
}
.card-left {
    bottom: 80px;
    left: -60px;
}
.card-right {
    top: 80px;
    right: -40px;
}
.premium-float-card .icon-box {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #0A66C2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
}
.premium-float-card .icon-box.warning {
    background: #ff9800;
}
.premium-float-card .text-box h4 {
    font-size: 20px;
    color: #fff;
    margin-bottom: 2px;
}
.premium-float-card .text-box span {
    font-size: 12px;
    color: rgba(255,255,255,0.8);
    text-transform: uppercase;
    letter-spacing: 1px;
}

@keyframes premiumFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}
@keyframes premiumFloatCards {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@media (max-width: 991px) {
    .premium-app-wrapper {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 80px;
    }
    .premium-features-list {
        text-align: left;
    }
    .premium-actions {
        justify-content: center;
        flex-wrap: wrap;
    }
    .card-left {
        left: -10px;
    }
    .card-right {
        right: -10px;
    }
}
@media (max-width: 576px) {
    .premium-title {
        font-size: 36px;
    }
    .premium-features-list {
        grid-template-columns: 1fr;
    }
}



/*=================================================
   ELITE CAREER CTA (REDESIGN)
=================================================*/
.elite-cta-section {
    position: relative;
    padding: 100px 0;
    background: #04122b;
    overflow: hidden;
    margin: 80px auto;
    width: 90%;
    max-width: 1280px;
    border-radius: 40px;
}
.elite-cta-bg-shape {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 100% 0%, rgba(10,102,194,0.4) 0%, transparent 50%),
        radial-gradient(circle at 0% 100%, rgba(0,200,151,0.2) 0%, transparent 50%);
    z-index: 0;
    opacity: 0.8;
}
.elite-cta-glow {
    position: absolute;
    width: 400px;
    height: 400px;
    background: #0A66C2;
    filter: blur(120px);
    border-radius: 50%;
    top: -100px;
    right: -100px;
    opacity: 0.3;
    z-index: 1;
}
.elite-cta-section .container {
    position: relative;
    z-index: 2;
}
.elite-cta-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.elite-cta-content {
    max-width: 800px;
    margin: 0 auto 60px;
}
.elite-cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50px;
    color: #00c897;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 30px;
    backdrop-filter: blur(10px);
}
.elite-cta-title {
    font-size: 52px;
    color: #ffffff;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 24px;
}
.elite-cta-title .highlight {
    background: linear-gradient(135deg, #00C897, #0A66C2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.elite-cta-desc {
    font-size: 18px;
    color: rgba(255,255,255,0.8);
    line-height: 1.8;
    margin-bottom: 40px;
}
.elite-cta-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
}
.elite-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #0A66C2, #00C897);
    color: #fff;
    padding: 18px 40px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 18px;
    box-shadow: 0 10px 30px rgba(10,102,194,0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.elite-btn-primary:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(10,102,194,0.5);
    color: #fff;
}
.elite-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.05);
    border: 2px solid rgba(255,255,255,0.2);
    color: #fff;
    padding: 18px 40px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 18px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}
.elite-btn-outline:hover {
    background: #fff;
    color: #04122b;
    border-color: #fff;
}
.elite-cta-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    width: 100%;
}
.elite-stat-item {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(15px);
    border-radius: 24px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease, background 0.3s ease;
}
.elite-stat-item:hover {
    transform: translateY(-8px);
    background: rgba(255,255,255,0.1);
}
.elite-stat-item .icon-wrap {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(10,102,194,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #00c897;
    margin-bottom: 20px;
}
.elite-stat-item h3 {
    font-size: 36px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 5px;
}
.elite-stat-item span {
    font-size: 15px;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media (max-width: 991px) {
    .elite-cta-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .elite-cta-title {
        font-size: 40px;
    }
}
@media (max-width: 576px) {
    .elite-cta-stats {
        grid-template-columns: 1fr;
    }
    .elite-cta-actions {
        flex-direction: column;
    }
    .elite-cta-title {
        font-size: 32px;
    }
    .elite-cta-section {
        border-radius: 20px;
        padding: 60px 0;
    }
}

/*=================================================
HOW TO START
=================================================*/

.how-to-start {
    background: var(--light);
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    margin-top: 40px;
}

.step-card {
    background: #fff;
    padding: 40px 24px;
    border-radius: 20px;
    text-align: center;
    box-shadow: var(--shadow);
    transition: var(--transition);
    position: relative;
    border: 1px solid var(--border);
}

.step-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 48px rgba(0,0,0,.12);
    border-color: var(--primary);
}

.step-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.step-number {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 32px;
    height: 32px;
    background: var(--accent);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #fff;
}

.step-card h3 {
    color: var(--dark);
    margin-bottom: 12px;
    font-size: 20px;
}

.step-card p {
    color: var(--text);
    line-height: 1.6;
    font-size: 15px;
}

@media (max-width: 992px) {
    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .steps-grid {
        grid-template-columns: 1fr;
    }
}

/*==================================================
  V-KAB ACADEMY CUSTOM EXTENSIONS & POLISH STYLES
==================================================*/

/* Clean & Modern Top Bar Header */
.academy-topbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    padding: 10px 0;
}

.academy-topbar.sticky-header {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    padding: 8px 0;
}

.academy-nav {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Left Brand */
.academy-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex-shrink: 0;
}

.academy-logo {
    height: 48px;
    width: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.academy-brand:hover .academy-logo {
    transform: scale(1.06);
}

.academy-brand-text h2 {
    font-size: 20px;
    font-weight: 800;
    color: #0A66C2;
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.3px;
}

.academy-brand-text span {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Middle Menu Links */
.academy-menu {
    display: flex;
    align-items: center;
    gap: 22px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.academy-menu li a {
    color: #334155;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
    padding: 6px 0;
    position: relative;
}

.academy-menu li a:hover,
.academy-menu li a.menu-current {
    color: #0A66C2;
}

.academy-menu li a.menu-current::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 3px;
    background: #0A66C2;
    border-radius: 2px;
}

.explore-course-btn {
    background: linear-gradient(135deg, #0A66C2, #00A699) !important;
    color: #ffffff !important;
    padding: 8px 18px !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(10, 102, 194, 0.25) !important;
    transition: all 0.3s ease !important;
}

.explore-course-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(10, 102, 194, 0.4) !important;
}

.explore-course-btn::after {
    display: none !important;
}

/* Right Login Button */
.academy-nav-right {
    flex-shrink: 0;
}

.nav-login-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ebf5ff;
    color: #0A66C2;
    border: 1.5px solid #bfdbfe;
    padding: 9px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.nav-login-btn:hover {
    background: #0A66C2;
    color: #ffffff;
    border-color: #0A66C2;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(10, 102, 194, 0.3);
}

/* Mobile Toggle */
.academy-toggle {
    display: none;
    font-size: 24px;
    color: #0A66C2;
    cursor: pointer;
}

@media (max-width: 992px) {
    .academy-menu {
        position: fixed;
        top: 70px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 70px);
        background: #ffffff;
        flex-direction: column;
        justify-content: flex-start;
        padding: 40px 20px;
        gap: 20px;
        transition: left 0.4s ease;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }
    
    .academy-menu.active {
        left: 0;
    }
    
    .academy-toggle {
        display: block;
    }
    
    .academy-nav-right {
        margin-right: 15px;
    }
}

/* News Board Ticker */
.news-board-ticker {
    position: relative;
    z-index: 1001;
    background: linear-gradient(90deg, #0A66C2, #1877F2, #00A699);
    color: #ffffff;
    padding: 10px 0;
    overflow: hidden;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.news-ticker-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.news-badge {
    background: #ff3b30;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    white-space: nowrap;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
    animation: pulseBadge 2s infinite;
}

@keyframes pulseBadge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.news-text-wrapper {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
}

.news-ticker-text {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 25s linear infinite;
    margin: 0;
    color: #ffffff;
}

.news-ticker-text:hover {
    animation-play-state: paused;
}

@keyframes marquee {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

/* Header & Upperbar Adjustments */
.academy-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.academy-logo {
    height: 48px;
    width: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.academy-brand:hover .academy-logo {
    transform: scale(1.06);
}

.academy-brand-text h2 {
    font-size: 20px;
    font-weight: 800;
    color: #0A66C2;
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.3px;
}

.academy-brand-text span {
    font-size: 11px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.explore-course-btn {
    background: linear-gradient(135deg, #0A66C2, #00A699) !important;
    color: #ffffff !important;
    padding: 8px 18px !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 14px rgba(10,102,194,0.25) !important;
}

.explore-course-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(10,102,194,0.4) !important;
}

/* Course Category Tabs */
.course-category-tabs {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 35px;
    flex-wrap: wrap;
}

.course-tab-btn {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    color: #4a5568;
    padding: 12px 28px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.course-tab-btn:hover, .course-tab-btn.active {
    background: linear-gradient(135deg, #0A66C2, #1877F2);
    color: #ffffff;
    border-color: #0A66C2;
    box-shadow: 0 8px 24px rgba(10,102,194,0.3);
    transform: translateY(-2px);
}

.category-grid {
    transition: all 0.4s ease;
}

/* Detailed About Us Section Styling */
.about-detailed-text {
    background: #ffffff;
    padding: 35px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    margin-bottom: 40px;
}

.about-detailed-text p {
    font-size: 16px;
    line-height: 1.8;
    color: #4a5568;
    margin-bottom: 18px;
}

.about-detailed-text p:last-child {
    margin-bottom: 0;
    font-weight: 600;
    color: #2d3748;
}

.mission-vision-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.mv-card {
    background: #ffffff;
    padding: 35px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.mv-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
}

.mv-card.mission-card {
    border-top: 5px solid #0A66C2;
}

.mv-card.vision-card {
    border-top: 5px solid #00A699;
}

.mv-icon {
    width: 60px;
    height: 60px;
    background: #f0f7ff;
    color: #0A66C2;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 20px;
}

.vision-card .mv-icon {
    background: #e6f7f5;
    color: #00A699;
}

.mv-card h3 {
    font-size: 24px;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 15px;
}

.mv-card p {
    font-size: 15px;
    line-height: 1.7;
    color: #4a5568;
    margin-bottom: 15px;
}

.mv-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mv-list li {
    font-size: 15px;
    color: #2d3748;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.mv-list li i {
    color: #0A66C2;
    font-size: 16px;
    margin-top: 3px;
}

/* Values Grid */
.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

.value-item {
    background: #ffffff;
    padding: 25px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 6px 20px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
}

.value-item:hover {
    transform: translateY(-5px);
    border-color: #0A66C2;
    box-shadow: 0 12px 30px rgba(10,102,194,0.12);
}

.val-icon {
    width: 48px;
    height: 48px;
    background: #ebf5ff;
    color: #0A66C2;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 15px;
}

.value-item h4 {
    font-size: 18px;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 10px;
}

.value-item p {
    font-size: 14px;
    color: #718096;
    line-height: 1.6;
    margin: 0;
}

/* Our Promise Banner */
.our-promise-banner {
    background: linear-gradient(135deg, #0A66C2, #1877F2, #00A699);
    border-radius: 24px;
    padding: 45px 35px;
    color: #ffffff;
    text-align: center;
    box-shadow: 0 20px 40px rgba(10,102,194,0.25);
    position: relative;
    overflow: hidden;
}

.promise-tag {
    background: rgba(255,255,255,0.2);
    color: #ffffff;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 15px;
}

.our-promise-banner h2 {
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 15px;
    color: #ffffff;
}

.our-promise-banner p {
    font-size: 17px;
    max-width: 800px;
    margin: 0 auto 25px;
    line-height: 1.7;
    opacity: 0.95;
}

.promise-brand-motto h3 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 5px;
    color: #ffffff;
}

.promise-brand-motto p {
    font-size: 15px;
    margin-bottom: 8px;
    opacity: 0.9;
}

.promise-brand-motto span {
    font-weight: 700;
    font-style: italic;
    background: #ffffff;
    color: #0A66C2;
    padding: 6px 18px;
    border-radius: 20px;
    display: inline-block;
}

/* Legal Pages Styling */
.legal-hero {
    background: linear-gradient(135deg, #0f172a, #1e293b);
    color: #ffffff;
    padding: 80px 0 50px;
    text-align: center;
}

.legal-hero h1 {
    font-size: 38px;
    font-weight: 800;
    margin-bottom: 10px;
}

.legal-hero p {
    font-size: 18px;
    opacity: 0.9;
    margin-bottom: 20px;
}

.legal-meta {
    display: flex;
    justify-content: center;
    gap: 25px;
    font-size: 14px;
    opacity: 0.8;
}

.legal-content-section {
    padding: 60px 0;
    background: #f8fafc;
}

.legal-doc-box {
    background: #ffffff;
    padding: 50px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
}

.doc-approval-box {
    background: #f1f5f9;
    padding: 25px;
    border-radius: 12px;
    margin-bottom: 35px;
    border-left: 4px solid #0A66C2;
}

.doc-approval-box h3 {
    margin-bottom: 15px;
    font-size: 18px;
    color: #0f172a;
}

.approval-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    font-size: 14px;
    color: #334155;
}

.legal-doc-box h2 {
    font-size: 22px;
    color: #0f172a;
    margin: 30px 0 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e2e8f0;
}

.legal-doc-box p {
    font-size: 15px;
    line-height: 1.8;
    color: #475569;
    margin-bottom: 15px;
}

.grievance-card {
    background: #ebf5ff;
    padding: 25px;
    border-radius: 15px;
    border: 1px solid #cbd5e1;
    margin-top: 20px;
}

.grievance-card h4 {
    font-size: 18px;
    color: #0A66C2;
    margin-bottom: 10px;
}

.grievance-card p {
    margin-bottom: 8px;
    color: #1e293b;
}

/* Plans Page Styling */
.plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.plan-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 40px 30px;
    border: 2px solid #e2e8f0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    position: relative;
    transition: all 0.3s ease;
}

.plan-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    border-color: #0A66C2;
}

.plan-card.featured {
    border-color: #0A66C2;
    box-shadow: 0 15px 35px rgba(10,102,194,0.15);
}

.featured-ribbon {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #0A66C2;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 12px;
    text-transform: uppercase;
}

.plan-badge {
    background: #f1f5f9;
    color: #0A66C2;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
}

.plan-header h3 {
    font-size: 22px;
    margin: 15px 0 8px;
    color: #0f172a;
}

.plan-header p {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 20px;
}

.plan-price {
    font-size: 36px;
    font-weight: 800;
    color: #0A66C2;
    margin-bottom: 25px;
}

.plan-price .period {
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
}

.plan-features li {
    font-size: 15px;
    color: #334155;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.plan-features li i {
    color: #10b981;
}

.plan-btn {
    display: block;
    text-align: center;
    width: 100%;
}

/* Exams Page Styling */
.exam-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
}

.exam-card {
    background: #ffffff;
    padding: 30px;
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
}

.exam-card:hover {
    transform: translateY(-5px);
    border-color: #0A66C2;
    box-shadow: 0 15px 35px rgba(10,102,194,0.12);
}

.exam-icon {
    width: 55px;
    height: 55px;
    background: #ebf5ff;
    color: #0A66C2;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
}

.exam-card h3 {
    font-size: 20px;
    color: #0f172a;
    margin-bottom: 10px;
}

.exam-card p {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
}

/* Resources Page Styling */
.resource-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

.resource-card {
    background: #ffffff;
    padding: 35px 28px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
}

.resource-card:hover {
    transform: translateY(-6px);
    border-color: #00A699;
    box-shadow: 0 15px 35px rgba(0,166,153,0.12);
}

.res-icon {
    width: 60px;
    height: 60px;
    background: #e6f7f5;
    color: #00A699;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 20px;
}

.resource-card h3 {
    font-size: 20px;
    color: #0f172a;
    margin-bottom: 12px;
}

.resource-card p {
    font-size: 15px;
    color: #64748b;
    line-height: 1.6;
}

/* Auth Section (Login / Register) */
.auth-section {
    padding: 60px 0;
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
}

.auth-box {
    max-width: 480px;
    margin: 0 auto;
    background: #ffffff;
    padding: 40px;
    border-radius: 24px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 20px 45px rgba(0,0,0,0.06);
}

.auth-header {
    text-align: center;
    margin-bottom: 30px;
}

.auth-logo {
    height: 65px;
    margin-bottom: 15px;
}

.auth-header h2 {
    font-size: 24px;
    color: #0f172a;
    margin-bottom: 8px;
}

.auth-header h2 span {
    color: #0A66C2;
}

.auth-header p {
    font-size: 13px;
    color: #64748b;
}

.auth-tabs {
    display: flex;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 12px;
    margin-bottom: 25px;
}

.auth-tab-btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px;
    font-weight: 600;
    font-size: 14px;
    color: #64748b;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.auth-tab-btn.active {
    background: #ffffff;
    color: #0A66C2;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.auth-form .input-group {
    margin-bottom: 20px;
}

.auth-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
}

.auth-form input, .auth-form select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s ease;
}

.auth-form input:focus, .auth-form select:focus {
    border-color: #0A66C2;
}

.auth-options {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 20px;
    color: #64748b;
}

.auth-options a {
    color: #0A66C2;
    text-decoration: none;
    font-weight: 600;
}

.auth-submit-btn {
    width: 100%;
    text-align: center;
    padding: 14px;
    font-size: 15px;
}

/* Responsive Media Queries */
@media (max-width: 768px) {
    .mission-vision-wrapper {
        grid-template-columns: 1fr;
    }
    .our-promise-banner h2 {
        font-size: 22px;
    }
    .legal-doc-box {
        padding: 25px;
    }
    .course-category-tabs {
        flex-direction: column;
    }
}

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

.vkabout-section{

padding:120px 0;

position:relative;

overflow:hidden;

background:linear-gradient(135deg,#f8fbff,#eef6ff);

}

.vkabout-bg-circle{

position:absolute;

border-radius:50%;

opacity:.08;

}

.vk-circle-one{

width:350px;

height:350px;

background:#0A66C2;

top:-80px;

right:-100px;

}

.vk-circle-two{

width:220px;

height:220px;

background:#22C55E;

bottom:-60px;

left:-60px;

}

.vkabout-wrapper{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:70px;

}

.vkabout-tag{

display:inline-block;

background:#e8f3ff;

padding:10px 18px;

border-radius:50px;

font-weight:600;

color:#0A66C2;

margin-bottom:25px;

}

.vkabout-tag i{

margin-right:8px;

}

.vkabout-left h1{

font-size:54px;

font-weight:800;

line-height:1.2;

margin-bottom:25px;

color:#0f172a;

}

.vkabout-left h1 span{

color:#0A66C2;

}

.vkabout-left p{

font-size:17px;

line-height:1.9;

color:#555;

margin-bottom:35px;

}

.vkabout-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

}

.vk-btn-primary{

background:#0A66C2;

color:#fff;

padding:15px 34px;

border-radius:10px;

text-decoration:none;

font-weight:700;

transition:.35s;

}

.vk-btn-primary:hover{

background:#084f98;

transform:translateY(-4px);

}

.vk-btn-outline{

border:2px solid #0A66C2;

padding:15px 34px;

border-radius:10px;

font-weight:700;

text-decoration:none;

color:#0A66C2;

transition:.35s;

}

.vk-btn-outline:hover{

background:#0A66C2;

color:#fff;

}

.vkabout-image-box{

position:relative;

}

.vkabout-image-box img{

width:100%;

border-radius:25px;

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

}

.vk-floating-card{

position:absolute;

display:flex;

align-items:center;

gap:15px;

padding:18px;

background:#fff;

border-radius:16px;

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

}

.vk-floating-card i{

font-size:26px;

color:#0A66C2;

}

.card-one{

left:-30px;

top:30px;

}

.card-two{

right:-30px;

bottom:40px;

}

/* STORY */

.vkstory-section{

padding:100px 0;

}

.vkstory-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.vkstory-image img{

width:100%;

border-radius:20px;

}

.vkstory-content span{

color:#0A66C2;

font-weight:700;

letter-spacing:1px;

}

.vkstory-content h2{

font-size:42px;

margin:20px 0;

}

.vkstory-content p{

line-height:1.9;

margin-bottom:20px;

color:#666;

}

.vkstory-content ul{

padding:0;

margin:30px 0 0;

list-style:none;

}

.vkstory-content li{

margin-bottom:15px;

font-weight:600;

}

.vkstory-content li i{

color:#22C55E;

margin-right:10px;

}

/* COUNTER */

.vkcounter-section{

padding:90px 0;

background:#0A66C2;

}

.vkcounter-grid{

display:grid;

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

gap:30px;

}

.vkcounter-card{

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

padding:40px;

border-radius:20px;

text-align:center;

color:#fff;

backdrop-filter:blur(10px);

transition:.4s;

}

.vkcounter-card:hover{

transform:translateY(-10px);

background:#fff;

color:#0A66C2;

}

.vkcounter-card i{

font-size:40px;

margin-bottom:20px;

}

.vkcounter-card h2{

font-size:42px;

margin-bottom:10px;

}

.vkcounter-card span{

font-size:16px;

}

/* RESPONSIVE */

@media(max-width:991px){

.vkabout-wrapper,

.vkstory-grid,

.vkcounter-grid{

grid-template-columns:1fr;

}

.vkabout-left h1{

font-size:38px;

}

.card-one,

.card-two{

position:relative;

left:0;

right:0;

top:0;

bottom:0;

margin-top:20px;

}

}
/*==========================
SECTION HEADING
==========================*/

.nexus-heading{

text-align:center;

max-width:800px;

margin:auto auto 70px;

}

.nexus-heading span{

display:inline-block;

padding:8px 18px;

background:#EAF4FF;

color:#0A66C2;

border-radius:40px;

font-weight:700;

margin-bottom:18px;

}

.nexus-heading h2{

font-size:42px;

font-weight:800;

color:#0d2038;

margin-bottom:20px;

}

.nexus-heading p{

font-size:17px;

line-height:1.9;

color:#666;

}

/*==========================*/

.nexus-advantage-area{

padding:110px 0;

background:#fff;

}

.nexus-feature-grid{

display:grid;

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

gap:30px;

}

.nexus-feature-box{

background:#fff;

padding:40px;

border-radius:22px;

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

transition:.4s;

border-top:4px solid transparent;

}

.nexus-feature-box:hover{

transform:translateY(-12px);

border-color:#0A66C2;

}

.nexus-feature-box i{

font-size:42px;

color:#0A66C2;

margin-bottom:25px;

}

.nexus-feature-box h3{

margin-bottom:18px;

font-size:24px;

}

.nexus-feature-box p{

line-height:1.8;

color:#666;

}

/*==========================*/

.exam-spectrum-zone{

padding:100px 0;

background:#F5F9FF;

}

.exam-chip-wrapper{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:18px;

}

.exam-chip{

padding:15px 28px;

background:#fff;

border-radius:40px;

font-weight:700;

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

transition:.35s;

cursor:pointer;

}

.exam-chip:hover{

background:#0A66C2;

color:#fff;

transform:translateY(-6px);

}

/*==========================*/

.learning-ecosystem-wrap{

padding:110px 0;

}

.ecosystem-layout{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}

.ecosystem-left span{

color:#0A66C2;

font-weight:700;

}

.ecosystem-left h2{

font-size:44px;

margin:20px 0;

}

.ecosystem-left p{

line-height:2;

color:#666;

}

.ecosystem-right{

display:grid;

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

gap:25px;

}

.eco-card{

padding:35px;

border-radius:20px;

background:#fff;

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

text-align:center;

transition:.35s;

}

.eco-card:hover{

background:#0A66C2;

color:#fff;

transform:translateY(-8px);

}

.eco-card i{

font-size:38px;

margin-bottom:20px;

color:#22C55E;

}

.eco-card:hover i{

color:#fff;

}

.eco-card h4{

font-size:20px;

}

/*==========================*/

@media(max-width:991px){

.nexus-feature-grid{

grid-template-columns:1fr;

}

.ecosystem-layout{

grid-template-columns:1fr;

}

.ecosystem-right{

grid-template-columns:1fr;

}

.nexus-heading h2{

font-size:34px;

}

.ecosystem-left h2{

font-size:34px;

}

}
/*==============================
MISSION & VISION
==============================*/

.vk-purpose-section{

padding:110px 0;

background:#F7FBFF;

position:relative;

overflow:hidden;

}

.vk-purpose-heading{

max-width:800px;

margin:auto;

text-align:center;

margin-bottom:70px;

}

.vk-purpose-heading span{

display:inline-block;

padding:10px 22px;

background:#EAF4FF;

color:#0A66C2;

font-weight:700;

border-radius:40px;

margin-bottom:20px;

letter-spacing:.5px;

}

.vk-purpose-heading h2{

font-size:46px;

font-weight:800;

color:#0f172a;

margin-bottom:20px;

}

.vk-purpose-heading p{

font-size:17px;

line-height:1.9;

color:#666;

}

.vk-purpose-grid{

display:grid;

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

gap:40px;

}

.vk-purpose-card{

background:#fff;

border-radius:28px;

padding:45px;

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

position:relative;

overflow:hidden;

transition:.4s;

}

.vk-purpose-card:hover{

transform:translateY(-10px);

box-shadow:0 28px 70px rgba(10,102,194,.15);

}

.vk-purpose-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:6px;

}

.mission-box::before{

background:linear-gradient(90deg,#0A66C2,#22C55E);

}

.vision-box::before{

background:linear-gradient(90deg,#22C55E,#0A66C2);

}

.purpose-top{

display:flex;

align-items:center;

gap:20px;

margin-bottom:30px;

}

.purpose-icon{

width:75px;

height:75px;

background:linear-gradient(135deg,#0A66C2,#1E88E5);

border-radius:20px;

display:flex;

justify-content:center;

align-items:center;

color:#fff;

font-size:30px;

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

}

.purpose-label{

font-size:13px;

font-weight:700;

letter-spacing:1px;

color:#0A66C2;

text-transform:uppercase;

}

.purpose-top h3{

font-size:30px;

margin-top:8px;

font-weight:800;

color:#1B2430;

}

.purpose-description{

font-size:16px;

line-height:2;

color:#666;

margin-bottom:25px;

}

.purpose-divider{

height:1px;

background:#E5E7EB;

margin:25px 0;

}

.vk-purpose-card h4{

font-size:22px;

margin-bottom:25px;

color:#0A66C2;

}

.purpose-list{

display:flex;

flex-direction:column;

gap:18px;

}

.purpose-item{

display:flex;

align-items:flex-start;

gap:15px;

}

.purpose-item i{

font-size:20px;

color:#22C55E;

margin-top:2px;

}

.purpose-item span{

line-height:1.8;

color:#555;

}

.vision-highlight{

margin-top:30px;

background:linear-gradient(135deg,#0A66C2,#1E88E5);

border-radius:20px;

padding:30px;

color:#fff;

}

.vision-highlight i{

font-size:34px;

margin-bottom:18px;

}

.vision-highlight p{

line-height:1.9;

font-size:16px;

margin:0;

}

@media(max-width:991px){

.vk-purpose-grid{

grid-template-columns:1fr;

}

.vk-purpose-heading h2{

font-size:34px;

}

.vk-purpose-card{

padding:30px;

}

.purpose-top{

flex-direction:column;

align-items:flex-start;

}

.purpose-top h3{

font-size:24px;

}

}
/*========================*/

.vk-values-area{

padding:120px 0;

background:#F8FBFF;

}

.vk-values-heading{

text-align:center;

max-width:760px;

margin:auto auto 70px;

}

.vk-values-heading span{

display:inline-block;

padding:10px 22px;

background:#EAF4FF;

border-radius:40px;

font-weight:700;

color:#0A66C2;

margin-bottom:20px;

}

.vk-values-heading h2{

font-size:48px;

font-weight:800;

margin-bottom:20px;

color:#10233F;

}

.vk-values-heading p{

font-size:17px;

line-height:1.9;

color:#666;

}

.vk-values-grid{

display:grid;

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

gap:30px;

}

.vk-value-card{

background:#fff;

padding:40px;

border-radius:25px;

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

transition:.4s;

position:relative;

overflow:hidden;

}

.vk-value-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:5px;

background:linear-gradient(90deg,#0A66C2,#22C55E);

transform:scaleX(0);

transition:.4s;

}

.vk-value-card:hover::before{

transform:scaleX(1);

}

.vk-value-card:hover{

transform:translateY(-12px);

}

.vk-value-icon{

width:75px;

height:75px;

background:linear-gradient(135deg,#0A66C2,#1E88E5);

border-radius:20px;

display:flex;

justify-content:center;

align-items:center;

color:#fff;

font-size:30px;

margin-bottom:25px;

}

.vk-value-card h3{

font-size:24px;

margin-bottom:15px;

}

.vk-value-card p{

line-height:1.9;

color:#666;

}

.full-card{

grid-column:span 3;

text-align:center;

}



/*========================*/

.vk-promise-area{

padding:120px 0;

background:linear-gradient(135deg,#0A66C2,#1E88E5);

}

.vk-promise-box{

padding:80px;

border-radius:35px;

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

backdrop-filter:blur(15px);

text-align:center;

color:#fff;

}

.promise-badge{

display:inline-block;

padding:10px 24px;

border-radius:40px;

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

font-weight:700;

margin-bottom:25px;

}

.vk-promise-box h2{

font-size:54px;

line-height:1.3;

margin-bottom:25px;

font-weight:800;

}

.vk-promise-box p{

font-size:18px;

line-height:2;

max-width:900px;

margin:auto auto 45px;

}

.vk-brand-box{

background:#fff;

padding:45px;

border-radius:25px;

max-width:750px;

margin:auto;

color:#222;

}

.vk-brand-box h3{

font-size:34px;

color:#0A66C2;

margin-bottom:10px;

}

.vk-brand-box h5{

color:#555;

margin-bottom:25px;

}

.brand-divider{

width:90px;

height:4px;

background:#22C55E;

margin:25px auto;

border-radius:20px;

}

.vk-brand-box span{

font-size:20px;

font-weight:700;

color:#0A66C2;

}

.vk-promise-buttons{

margin-top:45px;

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.promise-btn-one{

background:#22C55E;

padding:16px 38px;

border-radius:10px;

color:#fff;

font-weight:700;

text-decoration:none;

}

.promise-btn-two{

background:#fff;

padding:16px 38px;

border-radius:10px;

color:#0A66C2;

font-weight:700;

text-decoration:none;

}

.promise-btn-one:hover,
.promise-btn-two:hover{

transform:translateY(-5px);

transition:.3s;

}

@media(max-width:991px){

.vk-values-grid{

grid-template-columns:1fr;

}

.full-card{

grid-column:auto;

}

.vk-promise-box{

padding:40px 25px;

}

.vk-promise-box h2{

font-size:34px;

}

.vk-values-heading h2{

font-size:34px;

}

.vk-brand-box{

padding:30px;

}

}

/*=========================================
  NEW 5-COLUMN FOOTER & COMPLIANCE STYLES
=========================================*/
.academy-footer {
    background: #0A1B2D;
    color: #CBD5E1;
    padding: 60px 0 30px;
    font-size: 14px;
    position: relative;
}

.academy-footer-5col {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

.footer-col h3 {
    color: #FFFFFF;
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 8px;
}

.footer-col h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 35px;
    height: 3px;
    background: var(--primary, #0A66C2);
    border-radius: 2px;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col ul li a {
    color: #94A3B8;
    text-decoration: none;
    transition: color 0.3s ease;
    display: inline-block;
}

.footer-col ul li a:hover {
    color: #38BDF8;
    padding-left: 4px;
}

.footer-social-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-social-links a {
    color: #94A3B8;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.footer-social-links a:hover {
    color: #38BDF8;
    transform: translateX(4px);
}

.footer-social-links a i {
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.footer-bottom-legal {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 25px;
    text-align: center;
}

.footer-bottom-legal p {
    font-size: 12px;
    line-height: 1.8;
    color: #64748B;
    max-width: 1000px;
    margin: 0 auto;
}

@media (max-width: 992px) {
    .academy-footer-5col {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .academy-footer-5col {
        grid-template-columns: 1fr;
        gap: 25px;
    }
}

/* Legal Pages Styling */
.legal-hero {
    background: linear-gradient(135deg, #0A66C2, #004B93);
    color: #FFFFFF;
    padding: 60px 0;
    text-align: center;
}

.legal-hero h1 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 10px;
}

.legal-hero p {
    font-size: 18px;
    opacity: 0.9;
}

.legal-meta {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-top: 15px;
    font-size: 14px;
}

.legal-meta span {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.15);
    padding: 6px 16px;
    border-radius: 20px;
}

.legal-content-section {
    padding: 50px 0;
    background: #F8FAFC;
}

.legal-doc-box {
    background: #FFFFFF;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    line-height: 1.8;
    color: #334155;
}

.doc-approval-box {
    background: #EFF6FF;
    border-left: 4px solid #0A66C2;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
}

.doc-approval-box h3 {
    margin-top: 0;
    color: #0A66C2;
    font-size: 18px;
    margin-bottom: 15px;
}

.approval-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    font-size: 14px;
}

.legal-doc-box h2 {
    color: #0F172A;
    font-size: 22px;
    margin-top: 30px;
    margin-bottom: 15px;
    border-bottom: 2px solid #F1F5F9;
    padding-bottom: 8px;
}

.legal-doc-box h3 {
    color: #1E293B;
    font-size: 18px;
    margin-top: 20px;
    margin-bottom: 10px;
}

.legal-doc-box p {
    margin-bottom: 15px;
}

.legal-doc-box ul {
    margin-bottom: 15px;
    padding-left: 25px;

    list-style-type: disc;
}

.legal-doc-box ul li {
    margin-bottom: 8px;

}

.grievance-contact-card {
    background: #F1F5F9;
    border-radius: 12px;
    padding: 25px;
    margin-top: 25px;

    border: 1px solid #E2E8F0;

}

.grievance-contact-card h4 {
    color: #0A66C2;
    margin-top: 0;

    margin-bottom: 12px;
    font-size: 17px;
}

@media (max-width: 768px) {
    .legal-doc-box {
        padding: 25px;
    }
    .approval-grid {
        grid-template-columns: 1fr;
    }

}

/*=========================================
  PREMIUM STUNNING ABOUT HERO & CONTENT DESIGN
=========================================*/
.about-hero-section {
    position: relative;
    padding: 90px 0 70px;
    background: linear-gradient(to bottom, #f8fbff, #eef7ff);
    color: var(--dark, #102A43);
    overflow: hidden;
}

/* Background Light Floating Orbs */
.about-hero-section::before,
.about-hero-section::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.25;
    animation: orbPulse 8s infinite alternate ease-in-out;
}

.about-hero-section::before {
    width: 350px;
    height: 350px;
    background: #19B5FE;
    top: -50px;
    left: -50px;
}

.about-hero-section::after {
    width: 400px;
    height: 400px;
    background: #0A66C2;
    bottom: -100px;
    right: -50px;
    animation-delay: 4s;
}

@keyframes orbPulse {
    0% { transform: scale(1) translate(0, 0); opacity: 0.2; }
    100% { transform: scale(1.25) translate(30px, -20px); opacity: 0.4; }
}

.about-hero-wrapper {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 50px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.about-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    color: #0A66C2;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(10, 102, 194, 0.08);
}

.about-hero-badge i {
    color: #00C897;
    animation: spinSparkle 4s linear infinite;
}

@keyframes spinSparkle {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.2); }
    100% { transform: rotate(360deg) scale(1); }
}

.about-hero-left h1 {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
    color: #102A43;
}

.about-hero-left h1 span {
    color: #0A66C2;
}

.about-hero-left p {
    font-size: 16.5px;
    line-height: 1.8;
    color: #4A5568;
    margin-bottom: 35px;
    max-width: 600px;
}

.about-hero-actions {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.about-btn-primary {
    background: linear-gradient(135deg, #0A66C2 0%, #0077E6 100%);
    color: #FFFFFF;
    padding: 14px 32px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 25px rgba(10, 102, 194, 0.25);
    transition: all 0.35s ease;
}

.about-btn-primary:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(10, 102, 194, 0.4);
    color: #FFFFFF;
}

.about-btn-outline {
    background: #F1F5F9;
    border: 1px solid #CBD5E1;
    color: #0A66C2;
    padding: 14px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.35s ease;
}

.about-btn-outline:hover {
    background: #0A66C2;
    color: #FFFFFF;
    border-color: #0A66C2;
    transform: translateY(-4px);
}

/* Right Hero Visuals */
.about-hero-right {
    position: relative;
}

.about-img-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(10, 102, 194, 0.12);
    border: 4px solid #FFFFFF;
    transition: transform 0.5s ease;
}

.about-img-card:hover {
    transform: scale(1.02);
}

.about-img-card img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
}

.about-float-badge {
    position: absolute;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    padding: 14px 22px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    animation: floatBadge 5s infinite alternate ease-in-out;
}

.about-float-badge.top-left {
    top: 25px;
    left: -20px;
}

.about-float-badge.bottom-right {
    bottom: 25px;
    right: -20px;
    animation-delay: 2.5s;
}

@keyframes floatBadge {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-12px); }
}

.about-float-badge i {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, #0A66C2, #00C897);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #FFFFFF;
}

.about-float-badge h4 {
    font-size: 18px;
    font-weight: 800;
    color: #102A43;
    margin: 0;
}

.about-float-badge p {
    font-size: 12px;
    color: #64748B;
    margin: 0;
}

/* =========================================
   STUNNING ABOUT NARRATIVE & CONTENT SECTION
========================================= */
.about-narrative-section {
    padding: 90px 0;
    background: #F8FAFC;
    position: relative;
}

.narrative-header {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 60px;
}

.narrative-tag {
    display: inline-block;
    color: #0A66C2;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
    background: #EFF6FF;
    padding: 6px 18px;
    border-radius: 20px;
}

.narrative-header h2 {
    font-size: 36px;
    font-weight: 800;
    color: #0F172A;
    line-height: 1.3;
    margin-bottom: 18px;
}

.narrative-header p {
    font-size: 16px;
    color: #64748B;
    line-height: 1.7;
}

/* Narrative Grid Cards */
.narrative-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

.narrative-card {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 35px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    border: 1px solid #E2E8F0;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.narrative-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(180deg, #0A66C2, #00C897);
    border-radius: 6px 0 0 6px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.narrative-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(10, 102, 194, 0.12);
    border-color: #BFDBFE;
}

.narrative-card:hover::before {
    opacity: 1;
}

.narrative-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #0A66C2;
    margin-bottom: 22px;
    transition: all 0.35s ease;
}

.narrative-card:hover .narrative-icon {
    background: linear-gradient(135deg, #0A66C2 0%, #19B5FE 100%);
    color: #FFFFFF;
    transform: scale(1.08) rotate(-4deg);
}

.narrative-card h3 {
    font-size: 22px;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: 14px;
}

.narrative-card p {
    font-size: 15px;
    line-height: 1.8;
    color: #475569;
}

/* Exam Pills Wrapper inside Narrative Card */
.exam-pills-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.exam-pill {
    background: #F1F5F9;
    color: #0A66C2;
    font-weight: 600;
    font-size: 12.5px;
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid #E2E8F0;
}

/* Feature List inside Card */
.narrative-feature-list {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
}

.narrative-feature-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #334155;
    margin-bottom: 10px;
    font-weight: 500;
}

.narrative-feature-list li i {
    color: #00C897;
    font-size: 15px;
}

@media (max-width: 992px) {
    .about-hero-wrapper {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .about-hero-left p {
        margin: 0 auto 30px;
    }
    .about-hero-actions {
        justify-content: center;
    }
    .narrative-grid {
        grid-template-columns: 1fr;
    }
    .about-float-badge.top-left {
        left: 10px;
    }
    .about-float-badge.bottom-right {
        right: 10px;
    }
}

/*=========================================
  PREMIUM ANIMATED CONTACT PAGE DESIGN
=========================================*/
.contact-hero-section {
    position: relative;
    padding: 90px 0 70px;
    background: linear-gradient(to bottom, #f8fbff, #eef7ff);
    overflow: hidden;
}

.contact-hero-wrapper {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 50px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.contact-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    color: #0A66C2;
    margin-bottom: 22px;
    box-shadow: 0 4px 15px rgba(10, 102, 194, 0.08);
}

.contact-hero-badge i {
    color: #00C897;
    animation: spinSparkle 4s linear infinite;
}

.contact-left h1 {
    font-size: 44px;
    font-weight: 800;
    line-height: 1.25;
    color: #102A43;
    margin-bottom: 18px;
}

.contact-left h1 span {
    color: #0A66C2;
}

.contact-left p {
    font-size: 16.5px;
    line-height: 1.8;
    color: #4A5568;
    margin-bottom: 30px;
}

/* Floating Badges on Hero Image */
.contact-hero-right {
    position: relative;
}

.contact-image-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(10, 102, 194, 0.14);
    border: 4px solid #FFFFFF;
    transition: transform 0.5s ease;
}

.contact-image-card:hover {
    transform: scale(1.02);
}

.contact-image-card img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
}

.contact-float-badge {
    position: absolute;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    padding: 14px 20px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    animation: floatBadge 5s infinite alternate ease-in-out;
}

.contact-float-badge.top-left {
    top: 25px;
    left: -20px;
}

.contact-float-badge.bottom-right {
    bottom: 25px;
    right: -20px;
    animation-delay: 2.5s;
}

.contact-float-badge i {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #0A66C2, #00C897);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #FFFFFF;
}

.contact-float-badge h4 {
    font-size: 17px;
    font-weight: 800;
    color: #102A43;
    margin: 0;
}

.contact-float-badge p {
    font-size: 12px;
    color: #64748B;
    margin: 0;
}

/* Connect Section Cards */
.contact-connect-section {
    padding: 90px 0 60px;
    background: #FFFFFF;
}

.contact-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.connect-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    padding: 30px 22px;
    text-align: center;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.03);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.connect-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #0A66C2, #00C897);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.connect-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(10, 102, 194, 0.12);
    border-color: #BFDBFE;
}

.connect-card:hover::before {
    opacity: 1;
}

.connect-icon {
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #0A66C2;
    margin: 0 auto 20px;
    transition: all 0.35s ease;
}

.connect-card:hover .connect-icon {
    background: linear-gradient(135deg, #0A66C2, #00C897);
    color: #FFFFFF;
    transform: scale(1.1) rotate(-6deg);
}

.connect-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: 8px;
}

.connect-card p {
    font-size: 13.5px;
    color: #64748B;
    margin-bottom: 15px;
    line-height: 1.5;
}

.connect-card a {
    color: #0A66C2;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.connect-card a:hover {
    color: #00C897;
}

/* Contact Form & Info Grid Section */
.contact-form-area {
    padding: 80px 0;
    background: #F8FAFC;
}

.contact-form-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 40px;
    align-items: stretch;
}

.contact-info-panel {
    background: linear-gradient(135deg, #0A1B2D 0%, #0F2B48 100%);
    color: #FFFFFF;
    border-radius: 24px;
    padding: 45px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 15px 40px rgba(10, 27, 45, 0.15);
    position: relative;
    overflow: hidden;
}

.contact-info-panel::before {
    content: '';
    position: absolute;
    width: 250px;
    height: 250px;
    background: rgba(10, 102, 194, 0.25);
    border-radius: 50%;
    top: -50px;
    right: -50px;
    filter: blur(50px);
}

.contact-info-header h3 {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 12px;
    color: #FFFFFF;
}

.contact-info-header p {
    font-size: 15px;
    color: #94A3B8;
    line-height: 1.7;
    margin-bottom: 30px;
}

.contact-quick-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
}

.contact-quick-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.contact-quick-item i {
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #38BDF8;
    font-size: 18px;
    flex-shrink: 0;
}

.contact-quick-item h4 {
    font-size: 16px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 4px;
}

.contact-quick-item p {
    font-size: 13.5px;
    color: #CBD5E1;
    margin: 0;
}

.enquiry-form-box {
    background: #FFFFFF;
    border-radius: 24px;
    padding: 45px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
    border: 1px solid #E2E8F0;
}

.enquiry-form-box h2 {
    font-size: 28px;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 8px;
}

.enquiry-form-box p {
    font-size: 14.5px;
    color: #64748B;
    margin-bottom: 25px;
}

.enquiry-form-box form input,
.enquiry-form-box form select,
.enquiry-form-box form textarea {
    width: 100%;
    padding: 14px 18px;
    border-radius: 12px;
    border: 1.5px solid #E2E8F0;
    font-size: 14.5px;
    outline: none;
    transition: all 0.3s ease;
    margin-bottom: 16px;
    background: #F8FAFC;
}

.enquiry-form-box form input:focus,
.enquiry-form-box form select:focus,
.enquiry-form-box form textarea:focus {
    border-color: #0A66C2;
    background: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(10, 102, 194, 0.1);
}

.enquiry-form-box button[type="submit"] {
    width: 100%;
    padding: 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0A66C2 0%, #0077E6 100%);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 16px;
    border: none;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(10, 102, 194, 0.25);
    transition: all 0.35s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.enquiry-form-box button[type="submit"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(10, 102, 194, 0.4);
}

@media (max-width: 992px) {
    .contact-hero-wrapper,
    .contact-form-grid {
        grid-template-columns: 1fr;
    }
    .contact-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .contact-card-grid {
        grid-template-columns: 1fr;
    }
}

/*=========================================
  PREMIUM ANIMATED SUBSCRIPTION PLANS DESIGN
=========================================*/
.plans-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-items: stretch;
    margin-top: 40px;
}

.plan-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 24px;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    transition: all 0.4s ease;
    position: relative;
}

.plan-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(10, 102, 194, 0.12);
    border-color: #BFDBFE;
}

.plan-card.featured {
    background: #FFFFFF;
    border: 2.5px solid #0A66C2;
    box-shadow: 0 20px 50px rgba(10, 102, 194, 0.18);
    transform: scale(1.03);
}

.plan-card.featured:hover {
    transform: scale(1.03) translateY(-8px);
    box-shadow: 0 25px 60px rgba(10, 102, 194, 0.25);
}

.featured-ribbon {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #0A66C2 0%, #00C897 100%);
    color: #FFFFFF;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 1.5px;
    padding: 6px 20px;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(10, 102, 194, 0.3);
    text-transform: uppercase;
}

.plan-header {
    text-align: center;
    margin-bottom: 25px;
}

.plan-badge {
    display: inline-block;
    color: #0A66C2;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1px;
    background: #EFF6FF;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.plan-header h3 {
    font-size: 22px;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 8px;
}

.plan-header p {
    font-size: 13.5px;
    color: #64748B;
    line-height: 1.5;
    margin-bottom: 20px;
    min-height: 40px;
}

.plan-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    color: #0F172A;
}

.plan-price .currency {
    font-size: 24px;
    font-weight: 700;
    color: #0A66C2;
}

.plan-price .amount {
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
    color: #0A66C2;
}

.plan-price .period {
    font-size: 14px;
    color: #64748B;
    font-weight: 500;
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
}

.plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    color: #334155;
    margin-bottom: 14px;
    line-height: 1.6;
}

.plan-features li i {
    color: #00C897;
    font-size: 16px;
    margin-top: 3px;
    flex-shrink: 0;
}

.plan-btn {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 15px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.35s ease;
}

/* Feature Highlights Grid below Pricing */
.plans-benefits-section {
    padding: 80px 0;
    background: #F8FAFC;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-top: 40px;
}

.benefit-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    padding: 30px 24px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.03);
    transition: all 0.35s ease;
}

.benefit-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(10, 102, 194, 0.1);
    border-color: #BFDBFE;
}

.benefit-icon {
    width: 55px;
    height: 55px;
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #0A66C2;
    margin-bottom: 18px;
    transition: all 0.35s ease;
}

.benefit-card:hover .benefit-icon {
    background: linear-gradient(135deg, #0A66C2, #00C897);
    color: #FFFFFF;
    transform: scale(1.1) rotate(-4deg);
}

.benefit-card h4 {
    font-size: 18px;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: 8px;
}

.benefit-card p {
    font-size: 13.5px;
    color: #64748B;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 992px) {
    .plans-grid {
        grid-template-columns: 1fr;
    }
    .plan-card.featured {
        transform: scale(1);
    }
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .benefits-grid {
        grid-template-columns: 1fr;
    }
}

/*=========================================
  PREMIUM ANIMATED EXAMS PAGE DESIGN
=========================================*/
.exam-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-top: 40px;
}

.exam-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    padding: 30px 22px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.03);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.exam-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #0A66C2, #00C897);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.exam-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(10, 102, 194, 0.12);
    border-color: #BFDBFE;
}

.exam-card:hover::before {
    opacity: 1;
}

.exam-badge-tag {
    align-self: flex-start;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #0A66C2;
    background: #EFF6FF;
    padding: 4px 12px;
    border-radius: 12px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.exam-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #0A66C2;
    margin-bottom: 18px;
    transition: all 0.35s ease;
}

.exam-card:hover .exam-icon {
    background: linear-gradient(135deg, #0A66C2, #00C897);
    color: #FFFFFF;
    transform: scale(1.1) rotate(-6deg);
}

.exam-card h3 {
    font-size: 19px;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 8px;
}

.exam-card p {
    font-size: 13.5px;
    color: #64748B;
    line-height: 1.6;
    margin-bottom: 20px;
}

.exam-card-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #0A66C2;
    font-weight: 700;
    font-size: 13.5px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.exam-card-link:hover {
    color: #00C897;
    gap: 12px;
}

@media (max-width: 992px) {
    .exam-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .exam-cards-grid {
        grid-template-columns: 1fr;
    }
}

/*=========================================
  DYNAMIC HEADER SCROLL & ACTIVE LINK STYLES
=========================================*/
.academy-topbar {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: #FFFFFF;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.35s ease;
    padding: 12px 0;
}

.academy-topbar.scrolled,
.academy-topbar.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999999;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px rgba(10, 102, 194, 0.12);
    padding: 8px 0;
    border-bottom: 1px solid rgba(191, 219, 254, 0.6);
}

.academy-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.academy-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.academy-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.academy-brand:hover .academy-logo {
    transform: scale(1.05);
}

.academy-brand-text h2 {
    font-size: 20px;
    font-weight: 800;
    color: #102A43;
    margin: 0;
    letter-spacing: -0.3px;
}

.academy-brand-text span {
    font-size: 11px;
    color: #0A66C2;
    font-weight: 600;
    display: block;
}

.academy-menu {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.academy-menu li a {
    color: #334155;
    font-weight: 600;
    font-size: 14.5px;
    padding: 8px 16px;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
}

.academy-menu li a::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 60%;
    height: 3px;
    background: linear-gradient(90deg, #0A66C2, #00C897);
    border-radius: 3px;
    transition: transform 0.3s ease;
}

.academy-menu li a:hover,
.academy-menu li a.menu-current,
.academy-menu li a.active {
    color: #0A66C2;
    background: #EFF6FF;
    font-weight: 700;
}

.academy-menu li a:hover::after,
.academy-menu li a.menu-current::after,
.academy-menu li a.active::after {
    transform: translateX(-50%) scaleX(1);
}

.academy-menu li a.explore-course-btn,
.explore-course-btn {
    background: linear-gradient(135deg, #0A66C2 0%, #0077E6 100%) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    border-radius: 25px !important;
    padding: 10px 22px !important;
    box-shadow: 0 4px 15px rgba(10, 102, 194, 0.25) !important;
    transition: all 0.35s ease !important;
}

.academy-menu li a.explore-course-btn:hover,
.explore-course-btn:active {
    color: #FFFFFF !important;
    background: linear-gradient(135deg, #0077E6 0%, #00C897 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 200, 151, 0.35) !important;
}

.explore-course-btn::after {
    display: none !important;
}

.nav-login-btn {
    background: #F1F5F9;
    color: #0A66C2;
    border: 1px solid #CBD5E1;
    padding: 9px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.nav-login-btn:hover {
    background: #0A66C2;
    color: #FFFFFF;
    border-color: #0A66C2;
    transform: translateY(-2px);
}

/* Desktop Only Clean Navigation & Mobile Element Suppression */
@media (min-width: 993px) {
    .academy-toggle,
    .mobile-menu-header,
    .mobile-menu-close-row,
    .mobile-menu-login-item,
    .mobile-overlay,
    .mobile-nav-backdrop {
        display: none !important;
    }

    .academy-nav-right {
        display: block !important;
    }

    .academy-menu {
        display: flex !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: auto !important;
        height: auto !important;
        max-height: none !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .academy-menu li {
        width: auto !important;
        margin: 0 !important;
        display: inline-block !important;
    }

    .academy-menu li a {
        display: inline-block !important;
        width: auto !important;
        color: #334155 !important;
        font-weight: 600 !important;
        font-size: 14.5px !important;
        padding: 8px 16px !important;
        border-radius: 20px !important;
        background: transparent !important;
        border: none !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
    }

    .academy-menu li a:hover,
    .academy-menu li a.menu-current,
    .academy-menu li a.active {
        color: #0A66C2 !important;
        background: #EFF6FF !important;
        font-weight: 700 !important;
    }

    .academy-menu li a.explore-course-btn {
        background: linear-gradient(135deg, #0A66C2 0%, #0077E6 100%) !important;
        color: #FFFFFF !important;
        font-weight: 700 !important;
        border-radius: 25px !important;
        padding: 10px 22px !important;
        margin-top: 0 !important;
    }

    .academy-menu li a.explore-course-btn:hover {
        background: linear-gradient(135deg, #0077E6 0%, #00C897 100%) !important;
        color: #FFFFFF !important;
    }
}

/*=========================================
  PREMIUM ANIMATED RESOURCES PAGE DESIGN
=========================================*/
.resource-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.resource-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    padding: 32px 26px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.03);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.resource-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #0A66C2, #00C897);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.resource-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(10, 102, 194, 0.12);
    border-color: #BFDBFE;
}

.resource-card:hover::before {
    opacity: 1;
}

.res-badge-tag {
    align-self: flex-start;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #0A66C2;
    background: #EFF6FF;
    padding: 4px 12px;
    border-radius: 12px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.res-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #0A66C2;
    margin-bottom: 18px;
    transition: all 0.35s ease;
}

.resource-card:hover .res-icon {
    background: linear-gradient(135deg, #0A66C2, #00C897);
    color: #FFFFFF;
    transform: scale(1.1) rotate(-6deg);
}

.resource-card h3 {
    font-size: 20px;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 10px;
}

.resource-card p {
    font-size: 14px;
    color: #64748B;
    line-height: 1.6;
    margin-bottom: 22px;
}

.res-card-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #0A66C2;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.res-card-link:hover {
    color: #00C897;
    gap: 12px;
}

/* Feature Showcase Grid below Resource List */
.resources-showcase-section {
    padding: 80px 0;
    background: #F8FAFC;
}

.showcase-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 40px;
}

.showcase-card {
    border-radius: 24px;
    padding: 40px;
    color: #FFFFFF;
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.showcase-card.ai-box {
    background: linear-gradient(135deg, #0A1B2D 0%, #0F2B48 100%);
}

.showcase-card.app-box {
    background: linear-gradient(135deg, #0A66C2 0%, #0077E6 100%);
}

.showcase-card h3 {
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 12px;
    color: #FFFFFF;
}

.showcase-card p {
    font-size: 15px;
    line-height: 1.7;
    opacity: 0.9;
    margin-bottom: 25px;
}

.showcase-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #FFFFFF;
    color: #0A66C2;
    padding: 12px 26px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    transition: all 0.35s ease;
}

.showcase-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
    background: #EFF6FF;
}

@media (max-width: 992px) {
    .resource-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .showcase-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .resource-cards-grid {
        grid-template-columns: 1fr;
    }
}

/*=========================================
  PREMIUM AUTH / LOGIN & REGISTER PAGE DESIGN
=========================================*/
.auth-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #F8FAFC 0%, #EFF6FF 100%);
    min-height: 85vh;
    display: flex;
    align-items: center;
}

.auth-box {
    max-width: 520px;
    margin: 0 auto;
    background: #FFFFFF;
    border-radius: 24px;
    padding: 45px 40px;
    box-shadow: 0 20px 50px rgba(10, 102, 194, 0.08);
    border: 1px solid #E2E8F0;
}

.auth-header {
    text-align: center;
    margin-bottom: 30px;
}

.auth-logo {
    max-width: 200px;
    height: auto;
    max-height: 65px;
    object-fit: contain;
    margin: 0 auto 15px auto;
    display: block;
}

.auth-header h2 {
    font-size: 24px;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 6px;
}

.auth-header h2 span {
    color: #0A66C2;
}

.auth-header p {
    font-size: 13.5px;
    color: #64748B;
    line-height: 1.5;
}

.auth-tabs {
    display: flex;
    background: #F1F5F9;
    padding: 5px;
    border-radius: 16px;
    margin-bottom: 25px;
    gap: 5px;
}

.auth-tab-btn {
    flex: 1;
    padding: 12px;
    border: none;
    background: transparent;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    color: #64748B;
    cursor: pointer;
    transition: all 0.3s ease;
}

.auth-tab-btn.active {
    background: #FFFFFF;
    color: #0A66C2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.auth-form .input-group {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.auth-form label {
    font-size: 13.5px;
    font-weight: 600;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 8px;
}

.auth-form label i {
    color: #0A66C2;
}

.auth-form input[type="text"],
.auth-form input[type="password"],
.auth-form input[type="tel"],
.auth-form input[type="email"],
.auth-form select {
    width: 100%;
    padding: 13px 18px;
    border-radius: 12px;
    border: 1px solid #CBD5E1;
    font-size: 14px;
    color: #0F172A;
    background: #FFFFFF;
    transition: all 0.3s ease;
    font-family: 'Poppins', sans-serif;
}

.auth-form input:focus,
.auth-form select:focus {
    outline: none;
    border-color: #0A66C2;
    box-shadow: 0 0 0 4px rgba(10, 102, 194, 0.1);
}

.auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
    font-size: 13px;
}

.auth-options label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #475569;
}

.auth-options a {
    color: #0A66C2;
    font-weight: 600;
    text-decoration: none;
}

.auth-options a:hover {
    text-decoration: underline;
}

.auth-submit-btn {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0A66C2 0%, #0077E6 100%);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 15px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 6px 20px rgba(10, 102, 194, 0.25);
    transition: all 0.35s ease;
}

.auth-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(10, 102, 194, 0.4);
    background: linear-gradient(135deg, #0077E6 0%, #00C897 100%);
}

@media (max-width: 576px) {
    .auth-box {
        padding: 30px 20px;
    }
}

/*==================================================================
  MASTER SITE-WIDE RESPONSIVE MEDIA QUERIES SUITE (Mobile, Tablet, Desktop)
==================================================================*/
*, *::before, *::after {
    max-width: 100%;
    box-sizing: border-box;
}

html, body {
    overflow-x: clip;
    width: 100%;
}

img, iframe, video, picture, svg {
    max-width: 100%;
    height: auto;
}

/* --- Large Tablet / Laptop (max-width: 1199px) --- */
@media (max-width: 1199px) {
    .container {
        padding-left: 24px;
        padding-right: 24px;
    }
    .exam-cards-grid,
    .resource-cards-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

/* --- Medium Tablet & Mobile Landscape (max-width: 992px) --- */
@media (max-width: 992px) {
    /* Navigation & Header */
    .academy-topbar {
        padding: 10px 0 !important;
    }
    
    .academy-nav {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }

    .academy-brand {
        gap: 8px !important;
        max-width: calc(100% - 60px) !important;
    }

    .academy-logo {
        width: 38px !important;
        height: 38px !important;
        flex-shrink: 0;
    }

    .academy-brand-text h2 {
        font-size: 16px !important;
        margin: 0 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .academy-brand-text span {
        display: none !important;
    }

    .academy-nav-right {
        display: none !important;
    }

    .academy-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 42px !important;
        height: 42px !important;
        border-radius: 12px !important;
        background: #0A66C2 !important;
        font-size: 22px !important;
        color: #FFFFFF !important;
        cursor: pointer !important;
        z-index: 1000000 !important;
        border: none !important;
        box-shadow: 0 4px 15px rgba(10, 102, 194, 0.3) !important;
        flex-shrink: 0;
        margin-left: 10px;
    }

    .academy-topbar {
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 999999999 !important;
        background: #FFFFFF !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    }

    /* Mobile Header Navigation Dropdown Panel - Floats ON TOP of Hero Section */
    .academy-menu {
        display: none !important; /* hidden by default */
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-height: calc(100vh - 60px) !important;
        background: #FFFFFF !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 20px 20px 30px 20px !important;
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35) !important;
        border-bottom: 5px solid #0A66C2 !important;
        border-top: 1px solid #E2E8F0 !important;
        gap: 10px !important;
        z-index: 99999999 !important;
        margin: 0 !important;
        list-style: none !important;
        overflow-y: auto !important;
    }

    .academy-menu.open,
    .academy-menu.active,
    .academy-menu.show {
        display: flex !important;
    }

    .mobile-menu-close-row {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: 100% !important;
        margin-bottom: 6px !important;
        padding-bottom: 6px !important;
        border-bottom: 1px solid #E2E8F0 !important;
    }

    .menu-close-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        background: #EFF6FF !important;
        color: #0A66C2 !important;
        font-size: 18px !important;
        border: 1px solid #BFDBFE !important;
        cursor: pointer !important;
        box-shadow: 0 2px 8px rgba(10, 102, 194, 0.15) !important;
        transition: all 0.25s ease !important;
    }

    .menu-close-btn:hover,
    .menu-close-btn:active {
        background: #0A66C2 !important;
        color: #FFFFFF !important;
        transform: scale(1.08) !important;
    }



    .academy-menu li {
        width: 100% !important;
        margin: 0 !important;
        display: block !important;
    }

    .academy-menu li a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 13px 18px !important;
        background: #F8FAFC !important;
        color: #0F172A !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        border-radius: 12px !important;
        text-decoration: none !important;
        border: 1px solid #E2E8F0 !important;
        box-sizing: border-box !important;
        transition: all 0.2s ease !important;
    }

    .academy-menu li a:hover,
    .academy-menu li a.menu-current,
    .academy-menu li a.active {
        background: #0A66C2 !important;
        color: #FFFFFF !important;
        border-color: #0A66C2 !important;
    }

    .academy-menu li a.explore-course-btn {
        background: linear-gradient(135deg, #0A66C2, #00C897) !important;
        color: #FFFFFF !important;
        margin-top: 6px !important;
    }

    .mobile-menu-login-item {
        display: block !important;
        margin-top: 8px !important;
    }

    .mobile-menu-login-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        width: 100% !important;
        padding: 13px 18px !important;
        background: #F1F5F9 !important;
        color: #0A66C2 !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        border-radius: 12px !important;
        text-decoration: none !important;
        border: 1.5px solid #CBD5E1 !important;
    }

    /* Hero Wrappers */
    .hero-grid,
    .contact-hero-wrapper,
    .about-hero-wrapper {
        grid-template-columns: 1fr !important;
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }
    .contact-left,
    .about-hero-left,
    .hero-left {
        text-align: center;
    }
    .contact-left h1,
    .about-hero-left h1,
    .hero-left h1 {
        font-size: 32px !important;
    }
    .contact-hero-badge,
    .about-hero-badge {
        margin: 0 auto 15px auto;
    }
    .contact-buttons,
    .hero-buttons {
        justify-content: center;
    }
    .contact-float-badge,
    .about-float-badge {
        display: none !important; /* Hide floating overlays on small viewports for clean image visibility */
    }

    /* Grids & Cards Layout */
    .narrative-grid,
    .values-grid,
    .exam-cards-grid,
    .resource-cards-grid,
    .benefits-grid,
    .contact-connect-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px;
    }
    .plans-grid,
    .showcase-grid,
    .mission-vision-wrapper,
    .contact-split-wrapper {
        grid-template-columns: 1fr !important;
    }

    /* Footer 5-Column Grid */
    .academy-footer-5col {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 25px;
    }
}

/* --- Small Mobile Portrait (max-width: 600px) --- */
@media (max-width: 600px) {
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }
    
    /* Announcement Ticker */
    .news-ticker-text {
        font-size: 12.5px;
    }
    .news-badge {
        font-size: 10px;
        padding: 3px 8px;
    }

    /* Typography Adjustments */
    h1 {
        font-size: 26px !important;
        line-height: 1.3 !important;
    }
    h2 {
        font-size: 22px !important;
    }
    h3 {
        font-size: 18px !important;
    }

    /* Single Column Mobile Grids */
    .narrative-grid,
    .values-grid,
    .exam-cards-grid,
    .resource-cards-grid,
    .benefits-grid,
    .contact-connect-grid,
    .academy-footer-5col {
        grid-template-columns: 1fr !important;
        gap: 18px;
    }

    /* Buttons & Form Elements */
    .btn-primary,
    .btn-outline,
    .about-btn-primary,
    .about-btn-outline,
    .primary-contact-btn,
    .secondary-contact-btn {
        width: 100%;
        justify-content: center;
    }

    .auth-box {
        padding: 28px 18px !important;
        border-radius: 18px;
    }
    .auth-header h2 {
        font-size: 20px !important;
    }

/*==================================================================
  MASTER LEGAL & POLICY PAGES PREMIUM DESIGN SUITE
==================================================================*/

/* Legal Hero Banner */
.legal-hero {
    position: relative;
    background: linear-gradient(135deg, #0A66C2 0%, #003B73 50%, #0077E6 100%);
    background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px), linear-gradient(135deg, #0A66C2 0%, #003B73 50%, #0077E6 100%);
    background-size: 24px 24px, 100% 100%;
    padding: 75px 24px 65px 24px;
    text-align: center;
    color: #FFFFFF;
    box-shadow: 0 10px 30px rgba(10, 102, 194, 0.25);
    overflow: hidden;
}

.legal-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 140%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

.legal-hero h1 {
    font-size: 38px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 14px !important;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.25) !important;
}

.legal-company-tagline {
    font-size: 16px;
    font-weight: 600;
    color: #BFDBFE;
    margin-bottom: 22px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.legal-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 15px;
}

.legal-meta-item {
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
    font-size: 13.5px;
    font-weight: 600;
    padding: 8px 20px;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Legal Main Content Section */
.legal-content-section {
    background: #F8FAFC;
    padding: 60px 0 85px 0;
    min-height: 60vh;
}

.legal-container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
}

.legal-doc-box {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(10, 102, 194, 0.07);
    padding: 55px 50px;
    position: relative;
    transition: all 0.3s ease;
}

.legal-doc-box:hover {
    box-shadow: 0 25px 60px rgba(10, 102, 194, 0.12);
}

/* Executive Approval Box */
.doc-approval-box {
    background: linear-gradient(135deg, #EFF6FF 0%, #E0F2FE 100%);
    border: 1.5px solid #BFDBFE;
    border-radius: 20px;
    padding: 30px 32px;
    margin-bottom: 45px;
    box-shadow: 0 10px 25px rgba(10, 102, 194, 0.08);
}

.approval-header {
    font-size: 19px !important;
    font-weight: 800 !important;
    color: #0A66C2 !important;
    margin-bottom: 20px !important;
    border-bottom: 2px dashed #93C5FD !important;
    padding-bottom: 12px !important;
    display: flex;
    align-items: center;
    gap: 10px;
}

.approval-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.approval-item {
    background: #FFFFFF;
    border: 1px solid #DBEAFE;
    border-radius: 14px;
    padding: 14px 18px;
    font-size: 14px;
    color: #1E293B;
    box-shadow: 0 2px 8px rgba(10, 102, 194, 0.04);
    font-weight: 500;
}

.approval-item strong {
    color: #0A66C2;
    font-weight: 700;
    display: block;
    margin-bottom: 2px;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Legal Headings & Text Styling */
.legal-doc-box h2 {
    font-size: 23px !important;
    font-weight: 800 !important;
    color: #0A66C2 !important;
    margin-top: 42px !important;
    margin-bottom: 18px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid #EFF6FF !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    line-height: 1.3 !important;
}

.legal-doc-box h2:first-of-type {
    margin-top: 10px !important;
}

.legal-doc-box h3 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1E293B !important;
    margin-top: 26px !important;
    margin-bottom: 12px !important;
}

.legal-doc-box p {
    font-size: 15.5px !important;
    line-height: 1.85 !important;
    color: #334155 !important;
    margin-bottom: 18px !important;
}

.legal-doc-box ul,
.legal-doc-box ol {
    margin-left: 24px !important;
    margin-bottom: 22px !important;
    color: #334155 !important;
    line-height: 1.85 !important;
    font-size: 15px !important;
}

.legal-doc-box li {
    margin-bottom: 10px !important;
}

.legal-doc-box strong {
    color: #0F172A !important;
    font-weight: 700 !important;
}

/* Callout & Alert Boxes inside Legal Pages */
.legal-highlight-box {
    background: #EFF6FF;
    border-left: 5px solid #0A66C2;
    border-radius: 14px;
    padding: 22px 26px;
    margin: 28px 0;
    color: #1E3A8A;
    font-size: 15px;
    line-height: 1.8;
}

.legal-warning-box {
    background: #FEF2F2;
    border-left: 5px solid #EF4444;
    border-radius: 14px;
    padding: 22px 26px;
    margin: 28px 0;
    color: #991B1B;
    font-size: 15px;
    line-height: 1.8;
}

.legal-note-box {
    background: #ECFDF5;
    border-left: 5px solid #10B981;
    border-radius: 14px;
    padding: 22px 26px;
    margin: 28px 0;
    color: #065F46;
    font-size: 15px;
    line-height: 1.8;
}

/* Legal Contact Helpline Banner inside Document */
.legal-contact-card {
    background: linear-gradient(135deg, #0A66C2 0%, #0077E6 50%, #00C897 100%);
    color: #FFFFFF;
    border-radius: 20px;
    padding: 38px 40px;
    margin-top: 50px;
    box-shadow: 0 15px 35px rgba(10, 102, 194, 0.22);
    text-align: left;
    position: relative;
    overflow: hidden;
}

.legal-contact-card h3 {
    color: #FFFFFF !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    margin-bottom: 10px !important;
}

.legal-contact-card p {
    color: #E0F2FE !important;
    font-size: 15px !important;
    margin-bottom: 22px !important;
    line-height: 1.7 !important;
}

.legal-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #FFFFFF;
    color: #0A66C2;
    font-weight: 800;
    font-size: 15px;
    padding: 12px 28px;
    border-radius: 30px;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.legal-contact-btn:hover {
    transform: translateY(-3px);
    background: #F8FAFC;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    color: #0077E6;
}

/* Responsive Media Queries for Legal Pages */
@media (max-width: 768px) {
    .legal-hero {
        padding: 55px 18px 45px 18px !important;
    }

    .legal-hero h1 {
        font-size: 26px !important;
    }

    .legal-company-tagline {
        font-size: 14px !important;
    }

    .legal-meta-item {
        font-size: 12px !important;
        padding: 6px 14px !important;
    }

    .legal-doc-box {
        padding: 28px 18px !important;
        border-radius: 18px !important;
    }

    .doc-approval-box {
        padding: 20px 18px !important;
        border-radius: 16px !important;
    }

    .approval-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .legal-doc-box h2 {
        font-size: 19px !important;
        margin-top: 28px !important;
    }

    .legal-doc-box p,
    .legal-doc-box ul,
    .legal-doc-box ol {
        font-size: 14px !important;
        line-height: 1.75 !important;
    }

    .legal-contact-card {
        padding: 25px 20px !important;
        border-radius: 16px !important;
    }

    .legal-contact-card h3 {
        font-size: 18px !important;
    }

    .legal-contact-btn {
        width: 100%;
        justify-content: center;
    }
}