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

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

html{
    scroll-behavior:smooth;
}

#home, #courses, #events, #blog{
    scroll-margin-top:112px;
}

body{
    font-family:'Outfit',sans-serif;
    background:#fff;
    overflow-x:hidden;
}

/*==============================
COLORS
==============================*/
:root{
  --yellow:#E8A800;
  --yellow-dark:#FFC72C;
  --blue:#0b1f3d;
  --blue-dark:#154682;
  --navy:#0B1F3D;
  --text-dark:#16213e;
  --text-muted:#6b7688;
  --radius-lg:24px;
  --radius-md:16px;
  font-family:'Poppins',sans-serif;
}

h1,h2,h3,h4,h5,h6{
  font-family:'Jost',sans-serif;
  font-weight:700;
  color:var(--text-dark);
}
p{color:var(--text-muted); line-height:1.8;}
a{text-decoration:none;}
.text-accent{color:var(--yellow)!important;}
.section{padding:90px 0;}
.text-muted-p{color:var(--text-muted); max-width:650px;}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  color:var(--yellow-dark); font-weight:700; letter-spacing:2px;
  font-size:13px; text-transform:uppercase;
  margin-bottom:14px;
}
.eyebrow i{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; min-width:22px;
  border-radius:50%;
  background:rgba(255,182,6,.14);
  font-size:12px;
}
.section-heading{max-width:750px; margin:0 auto 50px;}
.section-heading h2{font-size:2.4rem; margin-bottom:14px;}
.section-heading .text-muted-p{margin:0 auto;}

/*=========================================================
SIGNATURE HEADING UNDERLINE — consistent short yellow bar
under every section title site-wide.
=========================================================*/
.section-heading h2::after,
.logos-heading h2::after,
.stats-heading h2::after{
  content:"";
  display:block;
  width:64px;
  height:4px;
  border-radius:30px;
  margin:16px auto 0;
  background:var(--yellow);
}
.about-section h2::after,
.video-section h2::after,
.why-section h2::after,
.enroll-skills h2::after{
  content:"";
  display:block;
  width:70px;
  height:4px;
  border-radius:30px;
  margin-top:16px;
  background:linear-gradient(90deg, var(--yellow), transparent);
}

/* Buttons */
.btn-accent{
  background:var(--yellow); color:var(--navy)!important; font-weight:600;
  border-radius:36px 36px 36px 0px; padding:13px 28px; border:none;
  display:inline-flex; align-items:center; gap:8px;
  transition:.3s; box-shadow:0 8px 20px rgba(255,199,44,.35);
}
.btn-accent:hover{background:var(--blue); color:#fff!important; transform:translateY(-3px); box-shadow:0 12px 26px rgba(30,90,168,.35);}
.btn-outline-light-pill{
  background:#fff; color:var(--navy)!important; font-weight:600;
  border-radius:36px 36px 36px 0px; padding:13px 28px;
  display:inline-flex; align-items:center; gap:8px;
  transition:.3s;
}
.btn-outline-light-pill:hover{background:var(--yellow); color:var(--navy)!important; transform:translateY(-2px);}
.btn-white-pill{
  background:#fff; color:var(--navy)!important; font-weight:700;
  border-radius:36px 36px 36px 0px; padding:14px 30px;
  display:inline-flex; align-items:center; gap:8px;
}

/*==============================
TOP BAR
==============================*/

.top-bar{

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

    height:56px;

    width:100%;

}

/* Left Orange */

.top-left{

    background:var(--yellow);

    width:32%;

    height:56px;

    display:flex;

    align-items:center;

    padding-left:60px;

    gap:14px;

    position:relative;

}

/* Creates the diagonal cut like the template */

.top-left::after{

    content:"";

    position:absolute;

    right:-35px;

    top:0;

    width:70px;

    height:56px;

    background:var(--yellow);

    transform:skewX(-35deg);

}

.social-title{

    color:white;

    font-weight:600;

    margin-right:8px;

}

.top-left a{

    width:34px;

    height:34px;

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

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    text-decoration:none;

    transition:.3s;

    z-index:2;

}

.top-left a:hover{

    background:white;

    color:var(--yellow);

}

/* Right Green */

.top-right{

    flex:1;

    background:var(--blue);

    height:56px;

    display:flex;

    justify-content:flex-end;

    align-items:center;

    padding-right:60px;

    color:white;

    gap:20px;

}

.top-item{

    display:flex;

    align-items:center;

    font-size:15px;

    font-weight:500;

    gap:10px;

}

.top-item i{

    color:#FFD166;

}

.divider{

    width:1px;

    height:22px;

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

}

/*===================================
NAVBAR
===================================*/

.Macmillan-navbar{

height:92px;

background:#fff;

position:relative;

z-index:999;

transition:.4s;

}

.Macmillan-navbar .container{

height:100%;

display:flex;

align-items:center;

}

.navbar-brand img{

height:80px;

}

.navbar-nav{

gap:15px;

}

.navbar-nav .nav-item{

position:relative;

}

.navbar-nav .nav-item>a{

display:flex;

align-items:center;

gap:6px;

padding:35px 10px;

font-size:17px;

font-weight:600;

color:var(--navy);

text-decoration:none;

transition:.35s;

}

.navbar-nav .nav-item>a:hover{

color:var(--yellow);

}

.navbar-nav .nav-item.active>a{

color:var(--yellow);

}

.navbar-nav .nav-item>a::after{

content:"";

position:absolute;

left:10px;

bottom:24px;

height:3px;

width:0;

background:var(--yellow);

transition:.35s;

}

.navbar-nav .nav-item:hover>a::after{

width:70%;

}

.navbar-nav i{

font-size:11px;

transition:.3s;

}

.nav-item:hover i{

transform:rotate(180deg);

}

.navbar-right{

display:flex;

align-items:center;

gap:18px;

}

.search-btn{

width:52px;

height:52px;

border:none;

border-radius:50%;

background:#F4F5F8;

font-size:20px;

transition:.35s;

}

.search-btn:hover{

background:var(--yellow);

color:#fff;

}

.apply-btn{

background:var(--yellow);

color:#fff;

text-decoration:none;

padding:17px 32px;

border-radius:36px 36px 36px 0px;

display:flex;

align-items:center;

gap:10px;

font-weight:700;

transition:.35s;

}

.apply-btn:hover{

background:var(--blue);

color:#fff;

transform:translateY(-3px);

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

}

.Macmillan-navbar.sticky{

position:fixed;

top:0;

left:0;

width:100%;

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

animation:slideDown .45s;

}

@keyframes slideDown{

from{

transform:translateY(-100%);

}

to{

transform:translateY(0);

}

}

/*=========================================================
    PREMIUM UNIVERSITY HERO SECTION
    PART 2
=========================================================*/

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

.hero-stats{
    display:flex;
    gap:20px;
    margin-top:60px;
    flex-wrap:wrap;
}

.hero-stat{
    min-width:170px;
    flex:1;

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

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

    border-radius:22px;

    padding:28px;

    transition:.4s;

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

.hero-stat:hover{

    transform:translateY(-10px);

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

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

}

.hero-stat h3{

    color:#fff;

    font-size:2.3rem;

    font-weight:800;

    margin-bottom:8px;

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

}

.hero-stat span{

    display:block;

    color:#FFD34D;

    font-size:13px;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

}

/*=========================================
SWIPER NAVIGATION
==========================================*/

.swiper-button-next,
.swiper-button-prev{

    width:70px;
    height:70px;

    border-radius:50%;

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

    backdrop-filter:blur(15px);

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

    color:#fff;

    transition:.35s;

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

}

.swiper-button-next{

    right:35px;

}

.swiper-button-prev{

    left:35px;

}

.swiper-button-next:hover,
.swiper-button-prev:hover{

    background:#ffb606;

    color:#fff;

    transform:scale(1.08);

}

.swiper-button-next::after,
.swiper-button-prev::after{

    font-size:22px;

    font-weight:700;

}

/*=========================================
SCROLL INDICATOR
==========================================*/

.hero-scroll{

    position:absolute;

    left:50%;

    bottom:35px;

    transform:translateX(-50%);

    z-index:20;

}

.hero-scroll span{

    display:block;

    width:30px;

    height:52px;

    border-radius:30px;

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

    position:relative;

}

.hero-scroll span::before{

    content:"";

    position:absolute;

    width:6px;

    height:6px;

    border-radius:50%;

    background:#fff;

    left:50%;

    top:8px;

    transform:translateX(-50%);

    animation:scrollDown 2s infinite;

}

@keyframes scrollDown{

    0%{

        top:8px;

        opacity:1;

    }

    100%{

        top:28px;

        opacity:0;

    }

}

/*=========================================
SMOOTH CONTENT ANIMATION
==========================================*/

.hero-content>*{

    animation:fadeHero .9s ease forwards;

}

.hero-content>*:nth-child(2){

    animation-delay:.15s;

}

.hero-content>*:nth-child(3){

    animation-delay:.3s;

}

.hero-content>*:nth-child(4){

    animation-delay:.45s;

}

.hero-content>*:nth-child(5){

    animation-delay:.6s;

}

@keyframes fadeHero{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*=========================================
OPTIONAL FLOATING CARD
==========================================*/

.hero-floating-card{

    position:absolute;

    right:8%;

    bottom:12%;

    width:280px;

    padding:30px;

    border-radius:24px;

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

    backdrop-filter:blur(20px);

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

    color:#fff;

    z-index:15;

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

}

.hero-floating-card h4{

    font-size:24px;

    margin-bottom:20px;

    font-weight:700;

}

.hero-floating-card ul{

    list-style:none;

    padding:0;

    margin:0;

}

.hero-floating-card li{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:14px;

    font-size:15px;

}

.hero-floating-card i{

    color:#ffb606;

    font-size:18px;

}

/*=========================================
DECORATIVE LIGHT
==========================================*/

.hero-section::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    top:-250px;

    right:-220px;

    background:#ffb606;

    opacity:.08;

    filter:blur(220px);

    border-radius:50%;

    z-index:0;

}

.hero-section::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    bottom:-180px;

    left:-150px;

    background:#ffffff;

    opacity:.04;

    filter:blur(180px);

    border-radius:50%;

    z-index:0;

}

/*=========================================================
    PREMIUM UNIVERSITY HERO SECTION
    PART 1
=========================================================*/

.hero-section{
    position:relative;
    overflow:hidden;
    min-height:100vh;
    background:#0f233a;
}

.heroSwiper{
    width:100%;
    height:100%;
}

.heroSwiper .swiper-slide{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
}

/*==============================
BACKGROUND IMAGE
==============================*/

.hero-bg{
    position:absolute;
    inset:0;
    overflow:hidden;
}

.hero-bg img{
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.05);
    animation:heroZoom 18s linear infinite alternate;
}

/*==============================
PREMIUM OVERLAY
==============================*/

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

    background:
        linear-gradient(
            90deg,
            rgba(8,20,40,.90) 0%,
            rgba(8,20,40,.82) 35%,
            rgba(8,20,40,.58) 70%,
            rgba(8,20,40,.35) 100%
        );

    z-index:2;
}

/*==============================
CONTAINER
==============================*/

.hero-section .container{
    position:relative;
    z-index:10;
}

.hero-content{
    position:relative;
    max-width:720px;
    color:#fff;
    padding:70px 0;
}

/*==============================
WELCOME BADGE
==============================*/

.hero-tag{

    display:inline-flex;
    align-items:center;
    gap:12px;

    padding:14px 26px;

    border-radius:50px;

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

    backdrop-filter:blur(18px);

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

    color:#fff;

    font-weight:600;

    font-size:15px;

    margin-bottom:35px;

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

}

.hero-tag i{

    color:#ffb606;

    font-size:18px;

}

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

.hero-content h1{

    font-size:72px;

    font-weight:800;

    line-height:1.05;

    letter-spacing:-2px;

    margin-bottom:28px;

    color:#fff;

}

.hero-content h1 span{

    display:block;

    color:#ffb606;

}

/* Gold underline */

.hero-content h1::after{

    content:"";

    display:block;

    width:120px;

    height:5px;

    border-radius:30px;

    margin-top:22px;

    background:linear-gradient(
        90deg,
        #ffb606,
        transparent
    );

}

/*==============================
PARAGRAPH
==============================*/

.hero-content p{

    max-width:560px;

    font-size:20px;

    line-height:1.9;

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

    margin-bottom:45px;

}

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

.hero-buttons{

    display:flex;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}

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

.btn-theme{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 40px;

    border-radius:60px;

    text-decoration:none;

    font-weight:700;

    color:#fff;

    background:
    linear-gradient(
        135deg,
        #ffcf3f,
        #ffb606
    );

    box-shadow:

    0 18px 45px rgba(255,182,6,.35);

    transition:.35s;

}

.btn-theme:hover{

    color:#fff;

    transform:translateY(-6px);

    box-shadow:

    0 30px 60px rgba(255,182,6,.45);

}

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

.btn-white{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 40px;

    border-radius:60px;

    text-decoration:none;

    font-weight:700;

    color:#fff;

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

    backdrop-filter:blur(18px);

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

    transition:.35s;

}

.btn-white:hover{

    background:#fff;

    color:#0f233a;

    transform:translateY(-6px);

}

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

.shape-one{

    position:absolute;

    width:520px;

    height:520px;

    right:-180px;

    top:-120px;

    background:#ffb606;

    opacity:.15;

    filter:blur(180px);

    border-radius:50%;

    z-index:1;

}

.shape-two{

    position:absolute;

    width:360px;

    height:360px;

    left:-120px;

    bottom:-100px;

    background:#ffffff;

    opacity:.05;

    filter:blur(170px);

    border-radius:50%;

    z-index:1;

}

.shape-three{

    position:absolute;

    width:200px;

    height:200px;

    right:18%;

    bottom:12%;

    background:#ffb606;

    opacity:.10;

    filter:blur(120px);

    border-radius:50%;

    z-index:1;

}

/*=========================================
PREMIUM HERO RINGS
==========================================*/

.hero-rings{
    position:absolute;
    right:-120px;
    top:50%;
    transform:translateY(-50%);
    width:520px;
    height:520px;
    z-index:5;
    pointer-events:none;
}

.hero-rings .ring{
    position:absolute;
    border-radius:50%;
    border-style:solid;
    animation:ringFloat 8s ease-in-out infinite;
}

/* Large Ring */

.ring-1{
    width:500px;
    height:500px;
    border-width:40px;
    border-color:rgba(255,182,6,.20);
    top:0;
    left:0;
}

/* Medium Ring */

.ring-2{
    width:340px;
    height:340px;
    border-width:28px;
    border-color:rgba(255,182,6,.35);
    top:80px;
    left:80px;
    animation-delay:1.5s;
}

/* Small Ring */

.ring-3{
    width:180px;
    height:180px;
    border-width:16px;
    border-color:rgba(255,182,6,.55);
    top:160px;
    left:160px;
    animation-delay:3s;
}

/* Soft Glow */

.ring-1::after,
.ring-2::after,
.ring-3::after{
    content:"";
    position:absolute;
    inset:-12px;
    border-radius:50%;
    box-shadow:0 0 60px rgba(255,182,6,.20);
}

/* Floating Animation */

@keyframes ringFloat{

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

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

}

/* Tablet */

@media (max-width:992px){

.hero-rings{
    width:360px;
    height:360px;
    right:-140px;
}

.ring-1{
    width:340px;
    height:340px;
    border-width:30px;
}

.ring-2{
    width:230px;
    height:230px;
    border-width:20px;
    top:55px;
    left:55px;
}

.ring-3{
    width:120px;
    height:120px;
    border-width:12px;
    top:110px;
    left:110px;
}

}

/* Mobile */

@media (max-width:768px){

.hero-rings{
    display:none;
}

}

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

.hero-flower{

    position:absolute;

    right:80px;

    top:50%;

    transform:translateY(-50%);

    width:360px;

    height:360px;

    z-index:5;

}

/* Ring Petals */

.hero-flower .petal{

    position:absolute;

    width:230px;

    height:230px;

    border:24px solid rgba(255,182,6,.35);

    border-radius:50%;

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

}

/* Top */

.petal-1{

    left:65px;

    top:0;

}

/* Bottom Left */

.petal-2{

    left:0;

    top:110px;

}

/* Bottom Right */

.petal-3{

    right:0;

    top:110px;

}

.flower-center{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:135px;

    height:135px;

    border-radius:50%;

    background:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:

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

}

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

@keyframes heroZoom{

    0%{

        transform:scale(1.04);

    }

    100%{

        transform:scale(1.12);

    }

}

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

@media(max-width:1200px){

.hero-content h1{

    font-size:60px;

}

.hero-floating-card{

    display:none;

}

}

@media(max-width:992px){

.hero-section,
.heroSwiper .swiper-slide{

    min-height:850px;

}

.hero-content{

    text-align:center;

    margin:auto;

}

.hero-content p{

    margin-left:auto;

    margin-right:auto;

}

.hero-buttons{

    justify-content:center;

}


.swiper-button-next,
.swiper-button-prev{

    display:none;

}

}

@media(max-width:768px){

.hero-content{

    padding-top:140px;

    padding-bottom:100px;

}

.hero-content h1{

    font-size:48px;

}

.hero-content p{

    font-size:18px;

    line-height:1.8;

}

.hero-buttons{

    flex-direction:column;

}

.btn-theme,
.btn-white{

    width:100%;

}

}

@media(max-width:576px){

.hero-content h1{

    font-size:40px;

}

.hero-content p{

    font-size:17px;

}

.hero-stat{

    flex:0 0 100%;

}

.hero-tag{

    font-size:14px;

    padding:12px 18px;

}

.hero-scroll{

    display:none;

}

}

@media(max-width:400px){

.hero-content h1{

    font-size:34px;

}

.hero-buttons{

    gap:15px;

}

.btn-theme,
.btn-white{

    padding:16px 20px;

    font-size:15px;

}

}

/*=====================================
PREMIUM FEATURE CARD
=====================================*/

.feature-area{

    position:relative;

    margin-top:-100px;

    z-index:20;

}

.feature-card{

    position:relative;

    overflow:hidden;

    height:90%;

    padding:45px 35px;

    border-radius:28px;

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

    border:1px solid rgba(15,35,58,.05);

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

    transition:all .45s ease;

}

/* Gold Top Line */

.feature-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:linear-gradient(
        90deg,
        #ffb606,
        #ffd55c
    );

    transform:scaleX(0);

    transform-origin:left;

    transition:.45s;

}

.feature-card:hover::before{

    transform:scaleX(1);

}

/* Hover */

.feature-card:hover{

    transform:translateY(-15px);

    box-shadow:

    0 35px 80px rgba(15,35,58,.15);

}

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

.feature-number{

    position:absolute;

    right:18px;

    top:16px;

    font-size:45px;

    font-weight:800;

    color:var(--yellow-dark);

    opacity:.90;

    line-height:1;

    z-index:0;

}

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

.feature-icon{

    position:relative;

    width:82px;

    height:82px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    color:#fff;

    background:linear-gradient(
        135deg,
        #17365d,
        #0f233a
    );

    margin-bottom:28px;

    z-index:2;

    transition:.4s;

}

.feature-icon::after{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px dashed rgba(255,182,6,.35);

    animation:spinRing 18s linear infinite;

}

/* Hover */

.feature-card:hover .feature-icon{

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

    background:linear-gradient(
        135deg,
        #ffcf3f,
        #ffb606
    );

    color:#17365d;

}

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

.feature-card h4{

    font-size:22px;

    font-weight:700;

    color:#0f233a;

    margin-bottom:15px;

    position:relative;

    z-index:2;

}

.feature-card p{

    font-size:15px;

    line-height:28px;

    color:#6b7280;

    position:relative;

    z-index:2;

}

/*=====================================
BACKGROUND SHAPE
=====================================*/

.feature-card::after{

    content:"";

    position:absolute;

    right:-60px;

    bottom:-60px;

    width:180px;

    height:180px;

    border-radius:50%;

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

    transition:.45s;

}

.feature-card:hover::after{

    transform:scale(1.3);

}

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

@keyframes spinRing{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

.feature-area{

    position:relative;

    margin-top:-80px;

    z-index:30;

}

.feature-area .feature-container{

    width:75%;

    max-width:none;

    margin-left:auto;

    margin-right:0;

    padding-right:60px;

    padding-left:0;

}

@media(max-width:992px){

.feature-area .feature-container{

    width:100%;

    padding:0 15px;

}

}

.feature-card{

    position:relative;

    padding:24px 22px;

    border-radius:22px;

}

.feature-icon{

    width:54px;

    height:54px;

    font-size:22px;

    margin-bottom:16px;

}

.feature-icon::after{

    inset:-6px;

}

.feature-number{

    font-size:56px;

    top:16px;

    right:18px;

    opacity:.50;

}

.feature-card h4{

    font-size:18px;

    margin-bottom:8px;

    line-height:1.3;

}

.feature-card p{

    font-size:14px;

    line-height:24px;

    margin:0;

}

.feature-card{

    transform:rotate(-3deg);

}

.feature-card:hover{

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

}

.col-lg-3:nth-child(1) .feature-card{

    margin-top:40px;

}

.col-lg-3:nth-child(2) .feature-card{

    margin-top:20px;

}

.col-lg-3:nth-child(3) .feature-card{

    margin-top:0;

}

.col-lg-3:nth-child(4) .feature-card{

    margin-top:20px;

}

.feature-area .row{

    --bs-gutter-x:18px;

}

.feature-area .row{
    justify-content: flex-end;
    --bs-gutter-x:18px;
}


/*=========================================================
ABOUT SECTION
Premium University Style
=========================================================*/

.about-section{

    position:relative;

    padding:90px 0 70px;

    overflow:hidden;

    background:#fff;

}

/*=========================================================
Background Decorations
=========================================================*/

.about-section::before{
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    border: 24px solid rgba(255,182,6,.07);
    border-radius: 50%;
    top: -170px;
    right: -170px;
    pointer-events: none;
}

.about-section::after{
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border: 14px solid rgba(15,35,58,.05);
    border-radius: 50%;
    left: -70px;
    bottom: -70px;
    pointer-events: none;
}

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

.about-images{

    position:relative;

    min-height:620px;

    z-index:2;

}

/* Decorative Ring */

.about-images .ring{

    position:absolute;

    width:430px;

    height:430px;

    border:24px solid rgba(255,182,6,.12);

    border-radius:50%;

    left:-90px;

    top:90px;

    z-index:0;

}

/*=========================================================
MAIN IMAGE
=========================================================*/

.about-img-main{

    position:relative;

    width:65%;

    height:440px;

    object-fit:cover;

    border-radius:40px;

    z-index:2;

    box-shadow:

        0 35px 80px rgba(15,35,58,.16);

    transition:.5s;

}

/*=========================================================
TOP CIRCLE IMAGE
=========================================================*/

.about-img-round{

    position:absolute;

    right:15px;

    top:20px;

    width:180px;

    height:180px;

    object-fit:cover;

    border-radius:50%;

    border:8px solid #fff;

    box-shadow:

        0 20px 60px rgba(0,0,0,.18);

    z-index:4;

    transition:.5s;

}

/* Gold Ring */

.about-img-round::after{

    content:"";

    position:absolute;

    inset:-14px;

    border-radius:50%;

    border:2px dashed rgba(255,182,6,.45);

}

/*=========================================================
BOTTOM IMAGE
=========================================================*/

.about-img-second{

    position:absolute;

    right:0;

    bottom:0;

    width:58%;

    height:240px;

    object-fit:cover;

    border-radius:28px;

    border:8px solid #fff;

    z-index:3;

    box-shadow:

        0 25px 70px rgba(15,35,58,.18);

    transition:.5s;

}

/*=========================================================
EXPERIENCE BADGE
=========================================================*/

.about-badge{

    position:absolute;

    left:-20px;

    bottom:40px;

    width:250px;

    padding:22px;

    border-radius:24px;

    background:var(--yellow);

    display:flex;

    align-items:center;

    gap:16px;

    z-index:5;

    box-shadow:

        0 20px 60px rgba(15,35,58,.12);

}

/* Badge Icon */

.about-badge i{

    width:62px;

    height:62px;

    min-width:62px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        #0b1f3d,
        #0B1F3D
    );

    color:#fff;

    font-size:24px;

}

/* Badge Text */

.about-badge h3{

    margin:0;

    font-size:28px;

    font-weight:800;

    color:var(--navy);

}

.about-badge span{

    display:block;

    margin-top:3px;

    font-size:14px;

    color:var(--navy);

    font-weight:600;

}

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

.about-images:hover .about-img-main{

    transform:translateY(-10px);

}

.about-images:hover .about-img-second{

    transform:translateY(10px);

}

.about-images:hover .about-img-round{

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

}

/*=========================================================
ABOUT COLLAGE — RESPONSIVE
=========================================================*/

@media(max-width:991px){

.about-images{
    max-width:480px;
    min-height:480px;
    margin:0 auto;
}

.about-images .ring{
    width:360px;
    height:360px;
    left:-50px;
    top:60px;
    border-width:20px;
}

.about-img-main{
    height:380px;
}

.about-img-round{
    width:150px;
    height:150px;
}

.about-img-second{
    height:200px;
}

.about-badge{
    width:220px;
    padding:18px;
    left:-10px;
    bottom:20px;
}

.about-badge i{
    width:52px;
    height:52px;
    min-width:52px;
    font-size:20px;
}

.about-badge span{
    font-size:13px;
}

}

@media(max-width:576px){

.about-images{
    max-width:340px;
    min-height:400px;
}

.about-images .ring{
    width:280px;
    height:280px;
    left:-30px;
    top:50px;
    border-width:16px;
}

.about-img-main{
    width:70%;
    height:300px;
    border-radius:28px;
}

.about-img-round{
    width:110px;
    height:110px;
    top:5px;
    right:5px;
    border-width:6px;
}

.about-img-second{
    width:56%;
    height:160px;
    border-radius:20px;
    border-width:6px;
}

.about-badge{
    width:180px;
    padding:14px;
    left:-10px;
    bottom:10px;
    gap:10px;
    border-radius:18px;
}

.about-badge i{
    width:42px;
    height:42px;
    min-width:42px;
    font-size:17px;
}

.about-badge span{
    font-size:11.5px;
    line-height:1.4;
}

}

/*=========================================================
FLOATING GOLD DOTS
=========================================================*/

.dot-one{

    position:absolute;

    width:16px;

    height:16px;

    border-radius:50%;

    background:var(--yellow);

    right:180px;

    top:70px;

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

}

.dot-two{

    position:absolute;

    width:10px;

    height:10px;

    border-radius:50%;

    background:rgba(255,182,6,.55);

    left:40px;

    bottom:120px;

    animation:floatDot 7s ease-in-out infinite;

}

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

@keyframes floatDot{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-16px);

    }

}

/*=========================================================
ABOUT CONTENT
Premium University Style
=========================================================*/

.about-content{

    position:relative;

    padding-left:40px;

    z-index:5;

}

/*=========================================================
SECTION TAG
=========================================================*/

.about-subtitle{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    border-radius:40px;

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

    color:var(--yellow-dark);

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:25px;

    text-transform:uppercase;

}

.about-subtitle i{

    font-size:16px;

}

/*=========================================================
TITLE
=========================================================*/

.about-title{

    font-size:52px;

    line-height:1.18;

    font-weight:800;

    color:var(--navy);

    margin-bottom:25px;

}

.about-title span{

    color:var(--yellow);

}

/*=========================================================
DESCRIPTION
=========================================================*/

.about-text{

    font-size:17px;

    line-height:32px;

    color:#6b7280;

    margin-bottom:40px;

}

/*=========================================================
FEATURES
=========================================================*/

.about-features{

    margin-bottom:40px;

}

.about-feature{

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:20px 24px;

    margin-bottom:18px;

    border-radius:22px;

    background:#fff;

    border:1px solid rgba(15,35,58,.05);

    box-shadow:

        0 15px 40px rgba(15,35,58,.05);

    transition:.35s;

}

.about-feature:hover{

    transform:translateX(10px);

    box-shadow:

        0 20px 50px rgba(15,35,58,.10);

}

.about-feature-icon{

    width:58px;

    height:58px;

    min-width:58px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

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

    color:var(--yellow-dark);

    font-size:22px;

    transition:.35s;

}

.about-feature:hover .about-feature-icon{

    background:var(--yellow);

    color:#fff;

    transform:rotate(12deg);

}

.about-feature h6{

    font-size:20px;

    font-weight:700;

    color:var(--navy);

    margin-bottom:8px;

}

.about-feature p{

    font-size:15px;

    line-height:28px;

    color:#6b7280;

    margin:0;

}

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

.about-quote{

    position:relative;

    margin:40px 0;

    padding:35px;

    border-radius:28px;

    background:linear-gradient(

        135deg,

        #17365d,

        #0f233a

    );

    overflow:hidden;

}

.about-quote::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

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

    right:-80px;

    top:-80px;

}

.about-quote p{

    color:#fff;

    line-height:32px;

    font-size:16px;

    position:relative;

    z-index:2;

    margin:0;

}

.quote-mark{

    position:absolute;

    right:30px;

    bottom:15px;

    font-size:72px;

    font-weight:800;

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

}

/*=========================================================
CALL AREA
=========================================================*/

.about-bottom{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

    margin-top:45px;

    flex-wrap:wrap;

}

.call-now{

    display:flex;

    align-items:center;

    gap:18px;

}

.call-icon{

    width:64px;

    height:64px;

    border-radius:50%;

    background:linear-gradient(

        135deg,

        #ffd659,

        #ffb606

    );

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:24px;

    box-shadow:

        0 15px 35px rgba(255,182,6,.35);

}

.small-label{

    display:block;

    font-size:13px;

    color:var(--yellow-dark);

    margin-bottom:4px;

    text-transform:uppercase;

    font-weight:700;

}

.call-now strong{

    font-size:22px;

    color:var(--navy);

}

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

.btn-about{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:16px 34px;

    border-radius:50px;

    background:var(--yellow);

    color:#fff;

    font-weight:700;

    text-decoration:none;

    transition:.35s;

}

.btn-about:hover{

    background:var(--navy);

    color:#fff;

    transform:translateY(-5px);

}

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

@media(max-width:1200px){

.about-title{

    font-size:44px;

}

.about-content{

    padding-left:20px;

}

}

@media(max-width:992px){

.about-section{

    padding:60px 0;

}

.about-content{

    padding-left:0;

    margin-top:70px;

}

.about-bottom{

    flex-direction:column;

    align-items:flex-start;

}

.about-title{

    font-size:38px;

}

}

@media(max-width:768px){

.about-title{

    font-size:32px;

    line-height:1.3;

}

.about-text{

    font-size:16px;

    line-height:30px;

}

.about-feature{

    padding:18px;

}

.about-feature-icon{

    width:50px;

    height:50px;

    min-width:50px;

    font-size:20px;

}

.call-now strong{

    font-size:18px;

}

.btn-about{

    width:100%;

    justify-content:center;

}

}

/*=========================================================
PREMIUM STATS SECTION
=========================================================*/

.stats-section{

    position:relative;

    padding:90px 0;

    overflow:hidden;

    background:#0f233a;

}

/* Background */

.stats-bg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    opacity:.35;

    transform:scale(1.08);

}

/* Premium Overlay */

.stats-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        135deg,
        rgba(15,35,58,.92),
        rgba(23,54,93,.86)
    );

}

/* Decorative Rings */

.stats-section::before{
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    border: 24px solid rgba(255,182,6,.09);
    border-radius: 50%;
    right: -170px;
    top: -140px;
    pointer-events: none;
}

.stats-section::after{
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border: 14px solid rgba(255,182,6,.13);
    border-radius: 50%;
    left: -70px;
    bottom: -70px;
    pointer-events: none;
}

.stats-section .container{

    position:relative;

    z-index:5;

}

.stat-item{

    position:relative;

    padding:28px 18px;

    border-radius:20px;

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

    backdrop-filter:blur(12px);

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

    transition:.4s;

}

.stat-item:hover{

    transform:translateY(-10px);

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

}

.stat-icon{

    width:62px;

    height:62px;

    margin:0 auto 18px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    color:var(--yellow);

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

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

    transition:.35s;

}

.stat-item:hover .stat-icon{

    background:var(--yellow);

    color:#fff;

    transform:rotate(12deg);

}

.stat-item h2{

    font-size:46px;

    font-weight:800;

    color:#fff;

    margin-bottom:6px;

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

}

.stat-item p{

    color:#dbe5ec;

    font-size:13px;

    font-weight:600;

    letter-spacing:.1px;

    text-transform:uppercase;

    margin:0;

}

.stats-section .col-md-3{

    position:relative;

}

.stats-section .col-md-3:not(:last-child)::after{

    content:"";

    position:absolute;

    top:25%;

    right:0;

    width:1px;

    height:50%;

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

}

@media(max-width:768px){

.stats-section{

    padding:80px 0;

}

.stat-item{

    margin-bottom:25px;

}

.stats-section .col-md-3::after{

    display:none;

}

.stat-item h2{

    font-size:42px;

}

.stat-icon{

    width:60px;

    height:60px;

    font-size:24px;

}

}

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

.stats-heading{

    max-width:700px;

    margin:0 auto 50px;

    position:relative;

    z-index:5;

}

.stats-subtitle{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:8px 20px;

    border-radius:50px;

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

    color:var(--yellow);

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.stats-subtitle i{

    font-size:16px;

}

.stats-heading h2{

    font-size:44px;

    font-weight:800;

    color:#fff;

    margin-bottom:14px;

    line-height:1.2;

}

.stats-heading h2 span{

    color:var(--yellow);

}

.stats-heading p{

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

    font-size:16px;

    line-height:24px;

    margin:0 auto;

    max-width:620px;

}

@media(max-width:992px){

.stats-heading{

    margin-bottom:50px;

}

.stats-heading h2{

    font-size:40px;

}

.stats-heading p{

    font-size:16px;

    line-height:30px;

}

}

@media(max-width:768px){

.stats-heading h2{

    font-size:32px;

}

.stats-heading p{

    font-size:15px;

    line-height:28px;

}

}

/*=========================================================
COURSES SECTION
Premium University UI
=========================================================*/

.courses-section{

    position:relative;

    padding:120px 0;

    background:#f8fafc;

    overflow:hidden;

}

/*=========================================================
BACKGROUND DECORATIONS
=========================================================*/

.courses-section::before{
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    border: 24px solid rgba(255,182,6,.07);
    border-radius: 50%;
    top: -170px;
    left: -170px;
    pointer-events: none;
}

.courses-section::after{
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border: 14px solid rgba(15,35,58,.05);
    border-radius: 50%;
    right: -70px;
    bottom: -70px;
    pointer-events: none;
}

.courses-section .container{

    position:relative;

    z-index:5;

}

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

.section-heading{

    max-width:760px;

    margin:0 auto 70px;

}

.section-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 24px;

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

    color:var(--yellow-dark);

    border-radius:40px;

    font-size:14px;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:22px;

}

.section-tag i{

    font-size:16px;

}

.section-heading h2{

    font-size:48px;

    font-weight:800;

    color:var(--navy);

    margin-bottom:18px;

    line-height:1.2;

}

.section-heading h2 span{

    color:var(--yellow);

}

.section-heading p{

    max-width:680px;

    margin:auto;

    font-size:17px;

    line-height:30px;

    color:#6b7280;

}

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

.course-card{

    position:relative;

    background:#fff;

    border-radius:28px;

    overflow:hidden;

    border:1px solid rgba(15,35,58,.05);

    box-shadow:

        0 15px 45px rgba(15,35,58,.08);

    transition:.45s;

    height:100%;

}

.course-card:hover{

    transform:translateY(-12px);

    box-shadow:

        0 30px 70px rgba(15,35,58,.14);

}

/*=========================================================
COURSE IMAGE
=========================================================*/

.course-card .img-wrap{

    position:relative;

    overflow:hidden;

}

.course-card img{

    width:100%;

    height:240px;

    object-fit:cover;

    transition:.55s;

}

.course-card:hover img{

    transform:scale(1.08);

}

/* Dark Gradient */

.course-card .img-wrap::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        to top,

        rgba(15,35,58,.45),

        transparent

    );

}

/*=========================================================
CATEGORY BADGE
=========================================================*/

.badge-tag{

    position:absolute;

    top:18px;

    left:18px;

    z-index:5;

    padding:8px 18px;

    border-radius:40px;

    background:var(--yellow);

    color:#fff;

    font-size:12px;

    font-weight:700;

    letter-spacing:.5px;

    text-transform:uppercase;

    box-shadow:

        0 10px 25px rgba(255,182,6,.35);

}

/*=========================================================
LEVEL BADGE
=========================================================*/

.level-badge{

    position:absolute;

    bottom:18px;

    left:18px;

    z-index:5;

    padding:8px 16px;

    border-radius:30px;

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

    color:var(--navy);

    font-size:13px;

    font-weight:700;

}

/*=========================================================
DECORATIVE CORNER
=========================================================*/

.course-card::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

    background:rgba(255,182,6,.04);

    right:-80px;

    bottom:-80px;

    transition:.45s;

}

.course-card:hover::after{

    transform:scale(1.25);

}

/*=========================================================
HOVER BORDER
=========================================================*/

.course-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:

    linear-gradient(

        90deg,

        #ffb606,

        #ffd76a

    );

    transform:scaleX(0);

    transform-origin:left;

    transition:.4s;

    z-index:10;

}

.course-card:hover::before{

    transform:scaleX(1);

}

/*=========================================================
COURSE BODY
=========================================================*/

.course-body{

    position:relative;

    padding:28px;

    z-index:5;

}

/*=========================================================
COURSE META
=========================================================*/

.course-meta-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:18px;

    font-size:13px;

}

.course-meta-top span{

    display:flex;

    align-items:center;

    gap:6px;

    color:#6b7280;

    font-weight:600;

}

.course-meta-top span i{

    color:var(--yellow);

    font-size:15px;

}

/* Rating */

.stars{

    display:flex;

    align-items:center;

    gap:3px;

    color:#ffb606;

    font-size:14px;

}

/*=========================================================
COURSE TITLE
=========================================================*/

.course-body h5{

    font-size:22px;

    font-weight:700;

    line-height:1.4;

    color:var(--navy);

    margin-bottom:14px;

    transition:.35s;

}

.course-card:hover h5{

    color:var(--yellow-dark);

}

/*=========================================================
COURSE DESCRIPTION
=========================================================*/

.course-body p{

    font-size:15px;

    line-height:28px;

    color:#6b7280;

    margin-bottom:22px;

}

/*=========================================================
COURSE FEATURES
=========================================================*/

.course-features{

    display:grid;

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

    gap:12px;

    margin-bottom:24px;

}

.course-feature{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:14px;

    color:#556070;

    font-weight:500;

}

.course-feature i{

    color:var(--yellow);

    font-size:15px;

}

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

.course-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-top:24px;

    padding-top:20px;

    border-top:1px solid rgba(15,35,58,.08);

}

/*=========================================================
PRICE TAG
=========================================================*/

.price-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 18px;

    border-radius:30px;

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

    color:var(--yellow-dark);

    font-size:16px;

    font-weight:700;

}

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

.btn-course{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:12px 24px;

    border-radius:40px;

    background:var(--navy);

    color:#fff;

    text-decoration:none;

    font-size:14px;

    font-weight:700;

    transition:.35s;

}

.btn-course i{

    transition:.35s;

}

.btn-course:hover{

    background:var(--yellow);

    color:var(--navy);

    transform:translateY(-3px);

}

.btn-course:hover i{

    transform:translateX(5px);

}

/*=========================================================
COURSE INFO BAR
=========================================================*/

.course-info{

    display:flex;

    justify-content:space-between;

    gap:10px;

    margin:20px 0;

    padding:16px;

    background:#f8fafc;

    border-radius:18px;

}

.course-info-item{

    text-align:center;

    flex:1;

}

.course-info-item h6{

    margin:0;

    font-size:18px;

    font-weight:700;

    color:var(--navy);

}

.course-info-item span{

    display:block;

    margin-top:4px;

    font-size:12px;

    color:#7b8794;

}

/*=========================================================
ENROLLMENT BADGE
=========================================================*/

.enrollment-open{

    position:absolute;

    top:18px;

    right:18px;

    padding:8px 14px;

    border-radius:30px;

    background:#28a745;

    color:#fff;

    font-size:11px;

    font-weight:700;

    letter-spacing:.5px;

    text-transform:uppercase;

    z-index:6;

}

/*=========================================================
HOVER EFFECTS
=========================================================*/

.course-card:hover .price-tag{

    background:var(--yellow);

    color:#fff;

}

.course-card:hover .course-info{

    background:#fff8e8;

}

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

@media(max-width:992px){

.course-body{

    padding:24px;

}

.course-body h5{

    font-size:20px;

}

.course-features{

    grid-template-columns:1fr;

}

}

@media(max-width:768px){

.course-card{

    border-radius:22px;

}

.course-card img{

    height:210px;

}

.course-body{

    padding:22px;

}

.course-meta-top{

    flex-direction:column;

    align-items:flex-start;

}

.course-info{

    flex-direction:column;

    gap:16px;

}

.course-footer{

    flex-direction:column;

    align-items:stretch;

}

.price-tag{

    width:100%;

}

.btn-course{

    width:100%;

}

}

/*=========================================================
PART 3
PREMIUM FINISHING EFFECTS
Animations • Decorations • Hover Effects • Responsive
=========================================================*/

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

.course-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:28px;

    padding:1px;

    background:linear-gradient(
        135deg,
        rgba(255,182,6,.65),
        rgba(255,182,6,0),
        rgba(23,54,93,.18)
    );

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

    -webkit-mask-composite:xor;

            mask-composite:exclude;

    opacity:0;

    transition:.45s;

    pointer-events:none;

}

.course-card:hover::before{

    opacity:1;

}

/*=========================================================
SOFT GOLD SHAPE
=========================================================*/

.course-card .gold-shape{

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

    right:-80px;

    bottom:-80px;

    background:radial-gradient(
        rgba(255,182,6,.12),
        transparent 70%
    );

    transition:.5s;

    pointer-events:none;

}

.course-card:hover .gold-shape{

    transform:scale(1.3);

}

/*=========================================================
IMAGE SHINE
=========================================================*/

.img-wrap{

    position:relative;

    overflow:hidden;

}

.img-wrap::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    z-index:5;

}

.course-card:hover .img-wrap::before{

    animation:shineMove 1.2s;

}

@keyframes shineMove{

    100%{

        left:150%;

    }

}

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

.btn-course{

    position:relative;

    overflow:hidden;

}

.btn-course::before{

    content:"";

    position:absolute;

    inset:0;

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

    transform:translateX(-100%);

    transition:.4s;

}

.btn-course:hover::before{

    transform:translateX(0);

}

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

.course-feature i{

    transition:.3s;

}

.course-card:hover .course-feature i{

    transform:scale(1.2);

    color:#18b45b;

}

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

.course-body h5{

    transition:.35s;

}

.course-card:hover h5{

    letter-spacing:.2px;

}

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

.price-tag{

    transition:.35s;

}

.course-card:hover .price-tag{

    transform:scale(1.05);

}

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

.course-card{

    animation:fadeCard .8s ease both;

}

@keyframes fadeCard{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

#courseGrid{

    row-gap:35px;

}

/*=========================================================
SECTION DECORATIONS
=========================================================*/

.courses-section .circle-one{

    position:absolute;

    width:420px;

    height:420px;

    border:18px solid rgba(255,182,6,.05);

    border-radius:50%;

    top:-180px;

    right:-180px;

}

.courses-section .circle-two{

    position:absolute;

    width:220px;

    height:220px;

    border:10px solid rgba(23,54,93,.05);

    border-radius:50%;

    bottom:-80px;

    left:-80px;

}

/*=========================================================
HOVER SHADOW
=========================================================*/

.course-card:hover{

    box-shadow:

        0 20px 40px rgba(15,35,58,.10),

        0 40px 80px rgba(15,35,58,.10);

}

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

@media(max-width:992px){

.courses-section{

    padding:90px 0;

}

.section-heading{

    margin-bottom:50px;

}

.section-heading h2{

    font-size:38px;

}

}

@media(max-width:768px){

.courses-section{

    padding:70px 0;

}

.section-heading{

    margin-bottom:40px;

}

.section-heading h2{

    font-size:30px;

}

.section-heading p{

    font-size:15px;

    line-height:28px;

}

.course-card{

    border-radius:22px;

}

.course-card img{

    height:210px;

}

}

@media(max-width:576px){

.course-body{

    padding:20px;

}

.course-body h5{

    font-size:20px;

}

.course-body p{

    font-size:14px;

}

.price-tag{

    font-size:15px;

}

.btn-course{

    padding:12px 18px;

    font-size:14px;

}

}

/*=========================================================
PREMIUM VIDEO SECTION
=========================================================*/

.video-section{

    position:relative;

    padding:120px 0;

    overflow:hidden;

    background:#fff;

}

.video-section::before{
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    border: 24px solid rgba(255,182,6,.07);
    border-radius: 50%;
    top: -170px;
    left: -140px;
    pointer-events: none;
}

.video-section::after{
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border: 14px solid rgba(15,35,58,.05);
    border-radius: 50%;
    right: -70px;
    bottom: -70px;
    pointer-events: none;
}

.video-section .container{

    position:relative;

    z-index:5;

}

.video-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    border-radius:40px;

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

    color:var(--yellow-dark);

    font-size:14px;

    font-weight:700;

    margin-bottom:20px;

}

.video-section h2{

    font-size:48px;

    font-weight:800;

    color:var(--navy);

    line-height:1.2;

    margin-bottom:20px;

}

.video-section h2 span{

    color:var(--yellow);

}

.video-section p{

    font-size:17px;

    line-height:32px;

    color:#6b7280;

}

.video-features{

    margin:35px 0;

}

.video-features div{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:16px;

    font-weight:600;

    color:var(--navy);

}

.video-features i{

    color:var(--yellow);

    font-size:18px;

}

.video-thumb{

    position:relative;

    border-radius:30px;

    overflow:hidden;

    box-shadow:

    0 25px 70px rgba(15,35,58,.15);

}

.video-thumb img{

    width:100%;

    height:470px;

    object-fit:cover;

    transition:.6s;

}

.video-thumb:hover img{

    transform:scale(1.08);

}

.video-thumb::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        rgba(15,35,58,.15),

        rgba(15,35,58,.45)

    );

    z-index:1;

}

.play-btn{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:95px;

    height:95px;

    border-radius:50%;

    background:var(--yellow);

    color:#fff;

    border:none;

    font-size:38px;

    z-index:5;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.35s;

    box-shadow:

    0 0 0 15px rgba(255,255,255,.20);

}

.play-btn:hover{

    transform:translate(-50%,-50%) scale(1.08);

}

.play-btn::before{

    content:"";

    position:absolute;

    inset:-18px;

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

    border-radius:50%;

    animation:pulseRing 2s infinite;

}

.play-btn::after{

    content:"";

    position:absolute;

    inset:-36px;

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

    border-radius:50%;

    animation:pulseRing 2.8s infinite;

}

@keyframes pulseRing{

    0%{

        transform:scale(.8);

        opacity:1;

    }

    100%{

        transform:scale(1.2);

        opacity:0;

    }

}

@media(max-width:992px){

.video-section{

    padding:90px 0;

}

.video-section h2{

    font-size:38px;

}

.video-thumb img{

    height:380px;

}

}

@media(max-width:768px){

.video-section h2{

    font-size:30px;

}

.video-thumb img{

    height:280px;

}

.play-btn{

    width:75px;

    height:75px;

    font-size:28px;

}

}

/*=========================================================
PREMIUM TEACHERS SECTION
=========================================================*/

.teachers-section{

    position:relative;

    padding:120px 0;

    background:#ffffff;

    overflow:hidden;

}

/* Background Shapes */

.teachers-section::before{
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    border: 24px solid rgba(255,182,6,.07);
    border-radius: 50%;
    left: -170px;
    top: -170px;
    pointer-events: none;
}

.teachers-section::after{
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border: 14px solid rgba(15,35,58,.05);
    border-radius: 50%;
    right: -70px;
    bottom: -70px;
    pointer-events: none;
}

.teachers-section .container{

    position:relative;

    z-index:5;

}

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

.teacher-card{

    position:relative;

    background:#fff;

    border-radius:28px;

    overflow:hidden;

    box-shadow:

        0 18px 50px rgba(15,35,58,.08);

    transition:.45s;

    height:100%;

    border:1px solid rgba(15,35,58,.05);

}

.teacher-card:hover{

    transform:translateY(-12px);

    box-shadow:

        0 30px 70px rgba(15,35,58,.15);

}

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

.teacher-image{

    position:relative;

    overflow:hidden;

}

.teacher-card img{

    width:100%;

    height:330px;

    object-fit:cover;

    transition:.55s;

}

.teacher-card:hover img{

    transform:scale(1.08);

}

/* Gradient */

.teacher-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        to top,

        rgba(15,35,58,.55),

        transparent 60%

    );

}

.teacher-badge{

    position:absolute;

    top:18px;

    left:18px;

    background:var(--yellow);

    color:#fff;

    padding:8px 16px;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

    z-index:5;

}

/*=========================================================
INFO
=========================================================*/

.teacher-info{

    position:relative;

    padding:28px;

    text-align:center;

}

.teacher-info h4{

    font-size:22px;

    font-weight:700;

    color:var(--navy);

    margin-bottom:6px;

}

.teacher-info span{

    display:block;

    color:var(--yellow-dark);

    font-size:14px;

    font-weight:600;

    margin-bottom:16px;

    text-transform:uppercase;

    letter-spacing:.6px;

}

.teacher-info p{

    font-size:15px;

    line-height:27px;

    color:#6b7280;

    margin-bottom:24px;

}

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

.teacher-social{

    display:flex;

    justify-content:center;

    gap:10px;

}

.teacher-social a{

    width:42px;

    height:42px;

    border-radius:50%;

    background:#f5f7fa;

    color:var(--navy);

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.35s;

    text-decoration:none;

}

.teacher-social a:hover{

    background:var(--yellow);

    color:#fff;

    transform:translateY(-4px);

}

.teacher-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:

    linear-gradient(

        90deg,

        #ffb606,

        #ffd76a

    );

    transform:scaleX(0);

    transform-origin:left;

    transition:.4s;

    z-index:10;

}

.teacher-card:hover::before{

    transform:scaleX(1);

}

.teacher-card::after{

    content:"";

    position:absolute;

    width:170px;

    height:170px;

    border-radius:50%;

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

    right:-80px;

    bottom:-80px;

    transition:.4s;

}

.teacher-card:hover::after{

    transform:scale(1.3);

}

@media(max-width:992px){

.teacher-card img{

    height:280px;

}

}

@media(max-width:768px){

.teachers-section{

    padding:80px 0;

}

.teacher-card img{

    height:250px;

}

.teacher-info{

    padding:22px;

}

.teacher-info h4{

    font-size:20px;

}

}

/* Why choose */
.why-section{background:var(--navy); position:relative; overflow:hidden;}
.why-text{color:#c7d0de;}
.why-card{
  background:#fff; border-radius:16px; padding:20px; display:flex; gap:14px; align-items:flex-start; height:100%;
}
.why-icon{
  width:50px; height:50px; min-width:50px; border-radius:12px; background:#fdf1de; color:var(--yellow);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem;
}
.why-card h6{margin-bottom:6px;}
.why-card p{font-size:.85rem; margin:0;}
.why-img-wrap img{
  width:100%; height:460px; object-fit:cover; border-radius:200px 20px 200px 20px;
  border:3px solid var(--yellow); padding:8px;
}

/* Gallery */
.gallery-section .g-3 > div img{
  width:100%; height:180px; object-fit:cover; border-radius:12px; transition:.3s;
}
.gallery-section .g-3 > div img:hover{transform:scale(1.03); box-shadow:0 15px 30px rgba(0,0,0,.15);}

/*=========================================================
PREMIUM ADMISSION CTA
=========================================================*/

.offer-section{

    position:relative;

    display:flex;

    align-items:center;

    min-height:520px;

    overflow:hidden;

    background:#0f233a;

}

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

.offer-img{

    width:60%;

    position:relative;

}

.offer-img img{

    width:100%;

    height:520px;

    object-fit:cover;

    transition:.6s;

}

.offer-section:hover .offer-img img{

    transform:scale(1.05);

}

/* Dark Overlay */

.offer-img::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        90deg,

        rgba(15,35,58,.20),

        rgba(15,35,58,.65)

    );

    z-index:1;

}

/*=========================================================
CONTENT BOX
=========================================================*/

.offer-box{

    position:absolute;

    right:6%;

    width:520px;

    background:#fff;

    border-radius:32px;

    padding:50px;

    box-shadow:

        0 30px 80px rgba(15,35,58,.18);

    z-index:5;

}

/* Gold Border */

.offer-box::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:6px;

    background:

    linear-gradient(

        90deg,

        #ffb606,

        #ffd76a

    );

    border-radius:32px 32px 0 0;

}

.offer-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    border-radius:40px;

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

    color:var(--yellow-dark);

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:20px;

}

.offer-box h2{

    font-size:42px;

    font-weight:800;

    color:var(--navy);

    line-height:1.2;

    margin-bottom:20px;

}

.offer-box h2 span{

    color:var(--yellow);

}

.offer-box p{

    font-size:16px;

    line-height:30px;

    color:#6b7280;

    margin-bottom:30px;

}

.offer-buttons{

    display:flex;

    gap:16px;

    flex-wrap:wrap;

}

.btn-offer{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:14px 28px;

    border-radius:40px;

    background:var(--yellow);

    color:#fff;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.btn-offer:hover{

    background:var(--navy);

    color:#fff;

}

.btn-outline-offer{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:14px 28px;

    border-radius:40px;

    border:2px solid var(--navy);

    color:var(--navy);

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.btn-outline-offer:hover{

    background:var(--navy);

    color:#fff;

}

.offer-stat{

    display:flex;

    gap:35px;

    margin:35px 0;

}

.offer-stat div h3{

    color:var(--yellow);

    font-size:32px;

    font-weight:800;

    margin:0;

}

.offer-stat div span{

    color:#6b7280;

    font-size:14px;

}

.offer-section::before{
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    border: 24px solid rgba(255,182,6,.09);
    border-radius: 50%;
    left: -170px;
    top: -140px;
    pointer-events: none;
}

.offer-section::after{
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border: 14px solid rgba(255,182,6,.13);
    border-radius: 50%;
    right: -60px;
    bottom: -60px;
    pointer-events: none;
}

@media(max-width:992px){

.offer-section{

    display:block;

}

.offer-img{

    width:100%;

}

.offer-box{

    position:relative;

    right:auto;

    width:90%;

    margin:-80px auto 0;

}

}

@media(max-width:768px){

.offer-box{

    padding:35px;

}

.offer-box h2{

    font-size:30px;

}

.offer-buttons{

    flex-direction:column;

}

.btn-offer,

.btn-outline-offer{

    width:100%;

    justify-content:center;

}

}
/*=========================================================
PREMIUM EVENTS SECTION
=========================================================*/

.events-section{

    position:relative;

    padding:120px 0;

    background:#f8fafc;

    overflow:hidden;

}

/* Decorative Shapes */

.events-section::before{
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    border: 24px solid rgba(255,182,6,.07);
    border-radius: 50%;
    left: -170px;
    top: -170px;
    pointer-events: none;
}

.events-section::after{
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border: 14px solid rgba(15,35,58,.05);
    border-radius: 50%;
    right: -70px;
    bottom: -70px;
    pointer-events: none;
}

.events-section .container{

    position:relative;

    z-index:5;

}

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

.event-card{

    position:relative;

    background:#fff;

    border-radius:28px;

    overflow:hidden;

    border:1px solid rgba(15,35,58,.05);

    box-shadow:

        0 18px 50px rgba(15,35,58,.08);

    transition:.45s;

    height:100%;

}

.event-card:hover{

    transform:translateY(-10px);

    box-shadow:

        0 30px 70px rgba(15,35,58,.14);

}

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

.event-image{

    position:relative;

    overflow:hidden;

}

.event-card img{

    width:100%;

    height:250px;

    object-fit:cover;

    transition:.55s;

}

.event-card:hover img{

    transform:scale(1.08);

}

.event-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        rgba(15,35,58,0),

        rgba(15,35,58,.45)

    );

}

/*=========================================================
DATE
=========================================================*/

.event-date{

    position:absolute;

    left:25px;

    bottom:-28px;

    width:78px;

    height:78px;

    background:var(--yellow);

    color:#fff;

    border-radius:22px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    box-shadow:

        0 12px 25px rgba(255,182,6,.35);

    z-index:5;

}

.event-date h3{

    font-size:28px;

    font-weight:800;

    margin:0;

    line-height:1;

}

.event-date span{

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:1px;

}

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

.event-content{

    padding:45px 30px 30px;

}

.event-meta{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-bottom:18px;

    font-size:14px;

    color:#6b7280;

}

.event-meta i{

    color:var(--yellow);

    margin-right:6px;

}

.event-content h4{

    font-size:24px;

    font-weight:700;

    color:var(--navy);

    margin-bottom:16px;

    line-height:1.4;

}

.event-content p{

    font-size:15px;

    line-height:28px;

    color:#6b7280;

    margin-bottom:24px;

}

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

.event-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-top:1px solid #edf1f5;

    padding-top:22px;

}

.event-price{

    color:var(--yellow-dark);

    font-weight:700;

}

.event-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:var(--navy);

    color:#fff;

    padding:12px 22px;

    border-radius:30px;

    text-decoration:none;

    transition:.35s;

}

.event-btn:hover{

    background:var(--yellow);

    color:#fff;

}

.event-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:

    linear-gradient(

        90deg,

        #ffb606,

        #ffd76a

    );

    transform:scaleX(0);

    transform-origin:left;

    transition:.4s;

    z-index:10;

}

.event-card:hover::before{

    transform:scaleX(1);

}

.event-card::after{

    content:"";

    position:absolute;

    width:170px;

    height:170px;

    border-radius:50%;

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

    right:-90px;

    bottom:-90px;

    transition:.4s;

}

.event-card:hover::after{

    transform:scale(1.3);

}

@media(max-width:992px){

.event-card img{

    height:220px;

}

.event-content{

    padding:42px 24px 24px;

}

}

@media(max-width:768px){

.events-section{

    padding:80px 0;

}

.event-content h4{

    font-size:20px;

}

.event-footer{

    flex-direction:column;

    align-items:flex-start;

    gap:15px;

}

.event-btn{

    width:100%;

    justify-content:center;

}

}

/*=========================================================
PREMIUM ADMISSIONS / ENROLLMENT SECTION
=========================================================*/

.enroll-section{
    position: relative;
    overflow: hidden;
    padding: 120px 0;
    background: #0f233a;
}

/*=========================
BACKGROUND
=========================*/

.enroll-bg{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: .25;
    transform: scale(1.08);
}

.enroll-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(15,35,58,.94),
        rgba(23,54,93,.88)
    );
}

.enroll-section::before{
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    border: 24px solid rgba(255,182,6,.09);
    border-radius: 50%;
    right: -170px;
    top: -140px;
    pointer-events: none;
}

.enroll-section::after{
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border: 14px solid rgba(255,182,6,.13);
    border-radius: 50%;
    left: -70px;
    bottom: -70px;
    pointer-events: none;
}

.enroll-section .container{
    position: relative;
    z-index: 5;
}

/*=========================
ROW
=========================*/

.enroll-row{
    align-items: center;
}

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

.enroll-form-card{
    background: #fff;
    border-radius: 32px;
    overflow: hidden;
    box-shadow:
        0 30px 80px rgba(0,0,0,.18);
    height: 100%;
    position: relative;
}

.enroll-form-card::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(
        90deg,
        #ffb606,
        #ffd86a
    );
}

.enroll-form-header{
    background: linear-gradient(
        135deg,
        var(--yellow),
        #ffd86a
    );
    padding: 35px;
}

.enroll-form-header h5{
    color: #fff;
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 8px;
}

.enroll-form-header span{
    color: rgba(255,255,255,.92);
    line-height: 28px;
}

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

.enroll-form{
    padding: 35px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.enroll-form .form-control,
.enroll-form .form-select{

    height: 58px;

    border-radius: 14px;

    border: 2px solid #edf2f7;

    background: #fff;

    padding: 15px 18px;

    font-size: 15px;

    box-shadow: none;

    transition: .35s;

}

.enroll-form textarea.form-control{

    height: 120px;

    resize: none;

    padding-top: 18px;

}

.enroll-form .form-control:focus,
.enroll-form .form-select:focus{

    border-color: var(--yellow);

    box-shadow: none;

}

.enroll-form button{

    margin-top: 10px;

}

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

.enroll-skills{

    padding-left: 70px;

}

.enroll-skills h2{

    font-size: 50px;

    font-weight: 800;

    color: #fff;

    line-height: 1.2;

    margin-bottom: 20px;

}

.enroll-skills h2 span{

    color: var(--yellow);

}

.why-text{

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

    font-size: 17px;

    line-height: 32px;

    margin-bottom: 35px;

}

/*=========================================================
FEATURE LIST
=========================================================*/

.admission-list{

    display: grid;

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

    gap: 18px;

    margin-bottom: 40px;

}

.admission-list div{

    color: #fff;

    font-weight: 600;

    font-size: 15px;

}

.admission-list i{

    color: var(--yellow);

    margin-right: 10px;

}

/*=========================================================
SKILL BARS
=========================================================*/

.skill-bar{

    margin-bottom: 28px;

}

.skill-label{

    display: flex;

    justify-content: space-between;

    color: #fff;

    font-weight: 700;

    font-size: 15px;

    margin-bottom: 12px;

}

.progress{

    height: 10px;

    border-radius: 50px;

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

    overflow: hidden;

}

.progress-bar{

    width: 0;

    background: linear-gradient(
        90deg,
        var(--yellow),
        #ffd86a
    );

    border-radius: 50px;

    transition: width 1.5s ease;

}

/*=========================================================
STATISTICS
=========================================================*/

.enroll-stats{

    display: flex;

    gap: 45px;

    margin-top: 45px;

}

.enroll-stats h3{

    color: var(--yellow);

    font-size: 36px;

    font-weight: 800;

    margin-bottom: 5px;

}

.enroll-stats span{

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

    font-size: 14px;

}

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

.enroll-form .btn{

    height: 58px;

    border-radius: 40px;

    font-weight: 700;

    font-size: 16px;

}

.enroll-form .btn i{

    margin-left: 8px;

}

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

@media(max-width:992px){

    .enroll-section{

        padding: 90px 0;

    }

    .enroll-skills{

        padding: 60px 0 0;

    }

    .enroll-skills h2{

        font-size: 38px;

    }

    .admission-list{

        grid-template-columns: 1fr;

    }

    .enroll-stats{

        flex-wrap: wrap;

        gap: 25px;

    }

}

@media(max-width:768px){

    .enroll-section{

        padding: 70px 0;

    }

    .enroll-form-header{

        padding: 25px;

    }

    .enroll-form{

        padding: 25px;

    }

    .enroll-skills{

        padding-top: 40px;

    }

    .enroll-skills h2{

        font-size: 30px;

    }

    .why-text{

        font-size: 15px;

        line-height: 28px;

    }

    .enroll-form-header h5{

        font-size: 24px;

    }

}

/*=========================================================
PREMIUM DEPARTMENT SECTION
PART 1 — LAYOUT, BACKGROUND, SWIPER & CARDS
=========================================================*/

.department-section{
    position: relative;
    padding: 45px 0 !important;
    background: #f8fafc;
    overflow: hidden;
}

/*=========================================
BACKGROUND DECORATION
=========================================*/

.department-section::before{
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    border: 24px solid rgba(255,182,6,.07);
    border-radius: 50%;
    left: -170px;
    top: -140px;
    pointer-events: none;
}

.department-section::after{
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border: 14px solid rgba(15,35,58,.05);
    border-radius: 50%;
    right: -60px;
    bottom: -60px;
    pointer-events: none;
}

.department-section .container{
    position: relative;
    z-index: 5;
}

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

.department-section .section-heading{
    margin-bottom: 0;
}

.department-section .section-heading .eyebrow{
    margin-bottom: 6px;
}

.department-section .section-heading h2{
    margin-bottom: 0;
}

.department-section .section-heading p{
    max-width: 560px;
    margin: 0 auto;
    line-height: 22px;
}

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

.deptSwiper{
    padding: 0 4px 12px;
    margin-top: -4px;
}

.deptSwiper .swiper-slide{
    display: flex;
    height: auto;
}

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

.dept-card{

    position: relative;

    width: 100%;

    background: #fff;

    border-radius: 20px;

    padding: 20px 18px;

    overflow: hidden;

    border: 1px solid rgba(15,35,58,.06);

    box-shadow: 0 10px 28px rgba(15,35,58,.06);

    transition: all .35s ease;

}

.dept-card:hover{

    transform: translateY(-8px);

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

}

/*=========================================
TOP GOLD BAR
=========================================*/

.dept-card::before{

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 4px;

    background: linear-gradient(
        90deg,
        var(--yellow),
        #ffd76a
    );

    transform: scaleX(0);

    transform-origin: left;

    transition: .35s;

}

.dept-card:hover::before{

    transform: scaleX(1);

}

/*=========================================
BACKGROUND DECORATION
=========================================*/

.dept-card::after{

    content: "";

    position: absolute;

    width: 120px;

    height: 120px;

    border-radius: 50%;

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

    right: -45px;

    bottom: -45px;

    transition: .35s;

}

.dept-card:hover::after{

    transform: scale(1.15);

}

/*=========================================================
PREMIUM DEPARTMENT SECTION
PART 2 — ICONS, TEXT, BUTTONS & DECORATION
=========================================================*/

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

.dept-icon{

    position: relative;

    width: 52px;

    height: 52px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 16px;

    background: linear-gradient(
        135deg,
        #17365d,
        #0f233a
    );

    color: #fff;

    font-size: 20px;

    margin-bottom: 14px;

    z-index: 2;

    transition: all .35s ease;

}

.dept-icon::after{

    content: "";

    position: absolute;

    inset: -5px;

    border-radius: 18px;

    border: 2px dashed rgba(255,182,6,.28);

    animation: spinDept 18s linear infinite;

}

/* Hover */

.dept-card:hover .dept-icon{

    background: linear-gradient(
        135deg,
        var(--yellow),
        #ffd76a
    );

    color: var(--navy);

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

}

/*=========================================
TITLE
=========================================*/

.dept-card h5{

    font-size: 18px;

    font-weight: 700;

    color: var(--navy);

    margin-bottom: 8px;

    line-height: 1.4;

}

/*=========================================
DESCRIPTION
=========================================*/

.dept-card p{

    font-size: 14px;

    color: #6b7280;

    line-height: 22px;

    margin-bottom: 12px;

}

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

.dept-card a{

    display: inline-flex;

    align-items: center;

    gap: 8px;

    text-decoration: none;

    color: var(--yellow-dark);

    font-size: 13px;

    font-weight: 700;

    transition: all .3s ease;

}

.dept-card a i{

    transition: .3s;

}

.dept-card:hover a{

    color: var(--navy);

}

.dept-card:hover a i{

    transform: translateX(5px);

}

/*=========================================
TOP RIGHT DECORATIVE RING
=========================================*/

.dept-ring{

    position: absolute;

    top: 14px;

    right: 14px;

    width: 56px;

    height: 56px;

    border-radius: 50%;

    border: 8px solid rgba(255,182,6,.12);

    transition: .35s;

}

.dept-ring::after{

    content: "";

    position: absolute;

    inset: 10px;

    border-radius: 50%;

    border: 5px solid rgba(255,182,6,.18);

}

.dept-card:hover .dept-ring{

    transform: rotate(20deg);

}

/*=========================================================
PREMIUM DEPARTMENT SECTION
PART 3 — PAGINATION, ANIMATIONS & RESPONSIVE
=========================================================*/

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

.dots-nav{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:6px;

    margin-top:6px !important;

}

.dots-nav .swiper-pagination-bullet{

    width:8px;

    height:8px;

    border-radius:50%;

    background:#d6dce3;

    opacity:1;

    transition:all .35s ease;

    margin:0 !important;

}

.dots-nav .swiper-pagination-bullet:hover{

    background:var(--yellow);

}

.dots-nav .swiper-pagination-bullet-active{

    width:24px;

    border-radius:30px;

    background:linear-gradient(
        90deg,
        var(--yellow),
        #ffd76a
    );

}

/*=========================================
OPTIONAL NUMBER BADGE
(Add <span class="dept-number">01</span> inside each card)
=========================================*/

.dept-number{

    position:absolute;

    top:14px;

    right:14px;

    font-size:44px;

    font-weight:800;

    color:rgba(255,182,6,.08);

    line-height:1;

    pointer-events:none;

    user-select:none;

    z-index:0;

    transition:.35s;

}

.dept-card:hover .dept-number{

    color:rgba(255,182,6,.15);

}

/*=========================================
HOVER IMPROVEMENTS
=========================================*/

.dept-card:hover h5{

    color:var(--yellow-dark);

}

.dept-card:hover{

    border-color:rgba(255,182,6,.20);

}

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

@keyframes spinDept{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

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

@media (max-width:992px){

    .department-section{

        padding:36px 0 !important;

    }

    .department-section .section-heading{

        margin-bottom:0;

    }

    .dept-card{

        padding:18px 16px;

    }

    .dept-icon{

        width:48px;

        height:48px;

        font-size:18px;

        margin-bottom:12px;

    }

    .dept-card h5{

        font-size:17px;

    }

}

@media (max-width:768px){

    .department-section{

        padding:28px 0 !important;

    }

    .deptSwiper{

        padding-bottom:10px;

    }

    .department-section .section-heading{

        margin-bottom:0;

    }

    .dept-card{

        border-radius:18px;

        padding:16px;

    }

    .dept-icon{

        width:44px;

        height:44px;

        border-radius:14px;

        font-size:17px;

    }

    .dept-ring{

        width:48px;

        height:48px;

        border-width:6px;

        top:12px;

        right:12px;

    }

    .dept-ring::after{

        inset:8px;

        border-width:4px;

    }

    .dept-card h5{

        font-size:16px;

        margin-bottom:6px;

    }

    .dept-card p{

        font-size:13px;

        line-height:20px;

        margin-bottom:10px;

    }

    .dept-card a{

        font-size:12px;

    }

    .dots-nav{

        margin-top:8px !important;

    }

}

/*=========================================================
PREMIUM TESTIMONIAL SECTION
=========================================================*/

.testimonial-section{

    position:relative;

    padding:42px 0;

    overflow:hidden;

    background:#0f233a;

}

/*=========================================================
BACKGROUND
=========================================================*/

.testimonial-bg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    opacity:.18;

    transform:scale(1.08);

}

.testimonial-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(15,35,58,.94),
        rgba(22,52,88,.90)
    );

}

/* Decorative circles */

.testimonial-section::before{
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    border: 24px solid rgba(255,182,6,.09);
    border-radius: 50%;
    right: -150px;
    top: -140px;
    pointer-events: none;
}

.testimonial-section::after{
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border: 14px solid rgba(255,182,6,.13);
    border-radius: 50%;
    left: -60px;
    bottom: -60px;
    pointer-events: none;
}

.testimonial-section .container{

    position:relative;

    z-index:5;

}

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

.testimonial-section .section-heading{

    margin-bottom:26px;

}

.testimonial-section .section-heading h2{

    color:#fff;

}

.testimonial-section .section-heading p{

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

    max-width:650px;

    margin:auto;

}

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

.testiSwiper{

    padding:4px 4px 12px;

}

.testiSwiper .swiper-slide{

    display:flex;

    height:auto;

}

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

.testi-card{

    position:relative;

    width:100%;

    background:#fff;

    border-radius:24px;

    padding:28px;

    overflow:hidden;

    border:1px solid rgba(15,35,58,.06);

    transition:.4s;

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

}

.testi-card:hover{

    transform:translateY(-10px);

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

}

/* Gold top border */

.testi-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:linear-gradient(
        90deg,
        var(--yellow),
        #ffd86f
    );

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.testi-card:hover::before{

    transform:scaleX(1);

}

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

.testi-quote{

    position:absolute;

    top:22px;

    right:22px;

    width:48px;

    height:48px;

    border-radius:50%;

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

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--yellow);

    font-size:22px;

}

/*=========================================================
STARS
=========================================================*/

.testi-card .stars{

    display:flex;

    gap:4px;

    color:var(--yellow);

    margin-bottom:18px;

    font-size:15px;

}

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

.testi-card p{

    color:#6b7280;

    font-size:15px;

    line-height:28px;

    font-style:italic;

    margin-bottom:28px;

}

/*=========================================================
USER
=========================================================*/

.testi-user{

    display:flex;

    align-items:center;

    gap:14px;

}

.testi-user img{

    width:60px;

    height:60px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid var(--yellow);

    padding:3px;

    background:#fff;

}

.testi-user h6{

    margin:0;

    font-size:17px;

    color:var(--navy);

    font-weight:700;

}

.testi-user span{

    display:block;

    margin-top:4px;

    color:var(--yellow-dark);

    font-size:13px;

    font-weight:600;

    letter-spacing:.5px;

}

/*=========================================================
DECORATIVE BACKGROUND
=========================================================*/

.testi-card::after{

    content:"";

    position:absolute;

    width:160px;

    height:160px;

    border-radius:50%;

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

    right:-70px;

    bottom:-70px;

    transition:.4s;

}

.testi-card:hover::after{

    transform:scale(1.2);

}

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

#testiDots{

    margin-top:35px !important;

}

#testiDots .swiper-pagination-bullet{

    width:10px;

    height:10px;

    background:#fff;

    opacity:.35;

    transition:.3s;

}

#testiDots .swiper-pagination-bullet-active{

    width:30px;

    border-radius:30px;

    background:var(--yellow);

    opacity:1;

}

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

@media(max-width:992px){

.testimonial-section{

    padding:34px 0;

}

.testimonial-section .section-heading{

    margin-bottom:24px;

}

}

@media(max-width:768px){

.testimonial-section{

    padding:26px 0;

}

.testi-card{

    padding:22px;

}

.testi-card p{

    font-size:14px;

    line-height:24px;

}

.testi-user img{

    width:52px;

    height:52px;

}

.testi-user h6{

    font-size:16px;

}

}

/*=========================================================
PREMIUM BLOG SECTION
=========================================================*/

.blog-section{

    position:relative;

    padding:80px 0;

    background:#f8fafc;

    overflow:hidden;

}

/*=========================================
BACKGROUND DECORATION
=========================================*/

.blog-section::before{
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    border: 24px solid rgba(255,182,6,.07);
    border-radius: 50%;
    top: -140px;
    right: -140px;
    pointer-events: none;
}

.blog-section::after{
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border: 14px solid rgba(15,35,58,.05);
    border-radius: 50%;
    left: -60px;
    bottom: -60px;
    pointer-events: none;
}

.blog-section .container{

    position:relative;

    z-index:2;

}

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

.blog-section .section-heading{

    margin-bottom:55px;

}

.blog-section .section-heading h2{

    margin-bottom:18px;

}

.blog-section .section-heading p{

    max-width:650px;

    margin:auto;

}

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

.blog-card{

    position:relative;

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    height:100%;

    border:1px solid rgba(15,35,58,.06);

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

    transition:.4s;

}

.blog-card:hover{

    transform:translateY(-10px);

    box-shadow:0 28px 70px rgba(15,35,58,.14);

}

/* Gold Line */

.blog-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:linear-gradient(
        90deg,
        var(--yellow),
        #ffd76a
    );

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.blog-card:hover::before{

    transform:scaleX(1);

}

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

.blog-card .img-wrap{

    position:relative;

    overflow:hidden;

}

.blog-card img{

    width:100%;

    height:240px;

    object-fit:cover;

    transition:.5s;

}

.blog-card:hover img{

    transform:scale(1.08);

}

/*=========================================================
DATE BADGE
=========================================================*/

.date-tag{

    position:absolute;

    left:18px;

    bottom:18px;

    background:var(--yellow);

    color:#fff;

    padding:8px 18px;

    border-radius:40px;

    font-size:13px;

    font-weight:700;

    box-shadow:0 10px 25px rgba(255,182,6,.35);

}

/*=========================================================
BODY
=========================================================*/

.blog-body{

    padding:28px;

}

/*=========================================================
META
=========================================================*/

.blog-meta{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-bottom:18px;

    font-size:13px;

    color:#6b7280;

}

.blog-meta i{

    color:var(--yellow);

    margin-right:6px;

}

/*=========================================================
TITLE
=========================================================*/

.blog-body h5{

    font-size:22px;

    font-weight:700;

    line-height:1.5;

    color:var(--navy);

    margin-bottom:15px;

    transition:.3s;

}

.blog-card:hover h5{

    color:var(--yellow-dark);

}

/*=========================================================
DESCRIPTION
=========================================================*/

.blog-body p{

    font-size:15px;

    line-height:28px;

    color:#6b7280;

    margin-bottom:22px;

}

/*=========================================================
READ MORE
=========================================================*/

.blog-body a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:var(--yellow-dark);

    text-decoration:none;

    font-weight:700;

    font-size:14px;

    transition:.3s;

}

.blog-body a i{

    transition:.3s;

}

.blog-card:hover .blog-body a{

    color:var(--navy);

}

.blog-card:hover .blog-body a i{

    transform:translateX(5px);

}

/*=========================================================
BOTTOM DECORATION
=========================================================*/

.blog-card::after{

    content:"";

    position:absolute;

    width:150px;

    height:150px;

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

    border-radius:50%;

    right:-70px;

    bottom:-70px;

    transition:.4s;

}

.blog-card:hover::after{

    transform:scale(1.2);

}

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

@media(max-width:992px){

.blog-section{

    padding:70px 0;

}

.blog-section .section-heading{

    margin-bottom:40px;

}

.blog-card img{

    height:220px;

}

.blog-body{

    padding:24px;

}

.blog-body h5{

    font-size:20px;

}

}

@media(max-width:768px){

.blog-section{

    padding:55px 0;

}

.blog-card img{

    height:200px;

}

.blog-body{

    padding:20px;

}

.blog-body h5{

    font-size:18px;

}

.blog-body p{

    font-size:14px;

    line-height:24px;

}

.date-tag{

    padding:7px 14px;

    font-size:12px;

}

}

/*=========================================================
PREMIUM PARTNER LOGOS SECTION
=========================================================*/

.logos-section{

    position:relative;

    padding:70px 0;

    background:#f8fafc;

    overflow:hidden;

}

/*=========================================
BACKGROUND DECORATION
=========================================*/

.logos-section::before{
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    border: 24px solid rgba(255,182,6,.07);
    border-radius: 50%;
    left: -140px;
    top: -100px;
    pointer-events: none;
}

.logos-section::after{
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border: 14px solid rgba(15,35,58,.05);
    border-radius: 50%;
    right: -60px;
    bottom: -60px;
    pointer-events: none;
}

.logos-section .container{

    position:relative;

    z-index:2;

}

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

.logos-heading{

    text-align:center;

    margin-bottom:45px;

}

.logos-heading .eyebrow{

    justify-content:center;

    margin-bottom:12px;

}

.logos-heading h2{

    font-size:42px;

    font-weight:800;

    color:var(--navy);

    margin-bottom:15px;

}

.logos-heading h2 span{

    color:var(--yellow);

}

.logos-heading p{

    max-width:650px;

    margin:auto;

    color:#6b7280;

    line-height:28px;

}

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

.logos-track{

    display:grid;

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

    gap:24px;

    align-items:center;

}

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

.logos-track a,
.logo-item{

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fff;

    border-radius:20px;

    padding:25px;

    min-height:130px;

    border:1px solid rgba(15,35,58,.06);

    box-shadow:0 12px 30px rgba(15,35,58,.05);

    transition:.35s;

}

.logos-track a:hover,
.logo-item:hover{

    transform:translateY(-8px);

    box-shadow:0 22px 50px rgba(15,35,58,.12);

    border-color:rgba(255,182,6,.25);

}

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

.logos-track img{

    max-width:100%;

    max-height:70px;

    object-fit:contain;

    filter:grayscale(100%);

    opacity:.75;

    transition:.4s;

}

.logos-track a:hover img,
.logo-item:hover img{

    filter:grayscale(0);

    opacity:1;

    transform:scale(1.08);

}

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

@media(max-width:1200px){

.logos-track{

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

}

}

@media(max-width:992px){

.logos-section{

    padding:60px 0;

}

.logos-track{

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

}

}

@media(max-width:768px){

.logos-track{

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

    gap:16px;

}

.logo-item,
.logos-track a{

    min-height:100px;

    padding:20px;

}

.logos-track img{

    max-height:55px;

}

}

@media(max-width:480px){

.logos-track{

    grid-template-columns:1fr;

}

}


/* Footer */
.footer{background:var(--navy); color:#c7d0de; padding:80px 0 30px;}
.footer-logo{
  font-family:'Jost',sans-serif; font-weight:800; font-size:1.7rem; color:#fff;
  display:flex; align-items:center; gap:8px; margin-bottom:18px;
}
.footer h5{color:#fff; margin-bottom:20px; position:relative; padding-bottom:12px;}
.footer h5::after{content:""; position:absolute; left:0; bottom:0; width:35px; height:2px; background:var(--yellow);}
.footer-contact{list-style:none; padding:0; margin-top:22px;}
.footer-contact li{display:flex; align-items:center; gap:12px; margin-bottom:14px; font-size:.92rem;}
.foot-icon{
  width:34px; height:34px; min-width:34px; background:var(--yellow); border-radius:8px;
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.footer-links{list-style:none; padding:0; margin:0;}
.footer-links li{margin-bottom:12px;}
.footer-links a{color:#c7d0de; font-size:.92rem; display:flex; align-items:center; gap:8px; transition:.2s;}
.footer-links a i{color:var(--yellow); font-size:.7rem;}
.footer-links a:hover{color:var(--yellow); padding-left:4px;}
.newsletter-form{display:flex; flex-direction:column; gap:14px; margin-top:18px;}
.newsletter-form input{
  padding:13px 16px; border-radius:8px; border:none; background:#16345f; color:#fff;
}
.newsletter-form input::placeholder{color:#93a2ba;}
.footer hr{border-color:rgba(255,255,255,.1); margin:40px 0 24px;}
/* Bottom */

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;

}

.footer-bottom p{

    margin:0;

    color:#c9d4e2;

}

.footer-bottom a{

    color:var(--yellow);

    font-weight:600;

    text-decoration:none;

}

.footer-bottom a:hover{

    color:#fff;

}

/* Social */

.footer-social{

    display:flex;

    gap:12px;

}

.footer-social a{

    width:46px;

    height:46px;

    border-radius:50%;

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

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.35s;

    font-size:18px;

}

.footer-social a:hover{

    background:var(--yellow);

    color:#0f233a;

    transform:translateY(-5px);

}

/* Responsive */

@media(max-width:991px){

.footer{

    padding:70px 0 25px;

}

.footer-bottom{

    flex-direction:column;

    text-align:center;

}

.footer-logo{

    justify-content:center;

}

.footer-text{

    margin:auto auto 30px;

}

.footer h5{

    margin-top:15px;

}

}

@media(max-width:576px){

.footer{

    padding:60px 0 20px;

}

.footer-logo{

    font-size:26px;

}

.footer h5{

    font-size:20px;

}

.footer-social{

    justify-content:center;

}

}

/* Scroll top */
.scroll-top{
  position:fixed; bottom:26px; right:26px; width:48px; height:48px; border-radius:50%;
  background:var(--yellow); color:#fff; border:none; font-size:1.2rem; z-index:999;
  display:none; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(0,0,0,.2);
}
.scroll-top.show{display:flex;}

/* Responsive (breakpoint-specific rules live in responsive.css) */
@media(max-width:991px){
  .hero-content h1{font-size:2.3rem;}
  .offer-box{position:static; transform:none; margin:-60px 20px 0; border-radius:24px;}
  .offer-section{flex-direction:column;}
  .enroll-skills{padding:40px 0;}
  .why-img-wrap img{height:320px;}
}