/* GLOBAL */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}

.container{
max-width:1200px;
margin:auto;
padding:0 20px;
}



/* TOP BAR */

.topbar{
background:linear-gradient(
90deg,
#710014,
#9a1a33
);
font-size:14px;
}

.topbar-inner{
padding:8px 0;
display:flex;
align-items:center;
}

.top-links{
display:flex;
align-items:center;
flex-wrap:wrap;
}

.top-links a{
color:#f2f1ef;
text-decoration:none;
margin:0 8px;
display:flex;
align-items:center;
gap:6px;
}

.sep{
width:1px;
height:14px;
background:#000;
margin:0 8px;
}



/* MAIN NAV */
/* MAIN NAV */

.main-nav{
background:#161616;
position:relative;
}

.nav-container{
display:flex;
align-items:center;
justify-content:space-between;
padding:15px 0;
}

.logo img{
height:60px;
transition:0.3s;
}


/* MENU */

.menu ul{
display:flex;
list-style:none;
}

.menu li{
margin-left:35px;
}

.menu a{
color:#fff;
text-decoration:none;
font-weight:500;
}




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


.mega-menu{

    position:absolute;

    top:100%;

    left:50%;

    width:1180px;

    max-width:calc(100vw - 40px);

    background:rgba(242,241,239,0.96);

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

    opacity:0;
    visibility:hidden;

    transform:
    translateX(-50%)
    translateY(18px)
    scale(0.98);

    transition:
    opacity .35s ease,
    transform .35s ease,
    visibility .35s;

    box-shadow:
    0 18px 50px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.55);

    border-top:1px solid rgba(179,142,113,0.18);

    border-radius:0 0 28px 28px;

    padding:45px 0;

    z-index:999;

    overflow:hidden;
}


/* =========================================
   SHOW MENU
========================================= */

.mega:hover .mega-menu{

    opacity:1;

    visibility:visible;

    transform:
    translateX(-50%)
    translateY(0)
    scale(1);
}


/* =========================================
   GLOSSY OVERLAY
========================================= */

.mega-menu::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:60%;
    height:100%;

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

    transform:skewX(-20deg);

    transition:1s ease;
}

.mega:hover .mega-menu::before{

    left:140%;
}


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

.mega-menu::after{

    content:"";

    position:absolute;

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

    width:260px;
    height:260px;

    border-radius:50%;

    background:rgba(113,0,20,0.05);

    filter:blur(40px);

    pointer-events:none;
}



/* =========================================
   SHOW DROPDOWN
========================================= */
/* =========================================
   SHOW DROPDOWN
========================================= */

.mega:hover .mega-menu{

    opacity:1;

    visibility:visible;

    transform:
    translateX(-50%)
    translateY(0)
    scale(1);
}


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

.mega-inner{

    position:relative;

    z-index:2;

    max-width:1180px;

    margin:auto;

    display:grid;

    grid-template-columns:
    minmax(180px,220px)
    minmax(260px,320px)
    1fr
    1fr;

    gap:35px;

    padding:0 35px;

    align-items:start;
}

.mega-links{

    min-width:0;
}

.mega-links ul{

    display:flex;

    flex-direction:column;

    gap:14px;

    flex-wrap:wrap;
}


/* =========================================
   IMAGE + DESCRIPTION SAME HEIGHT
========================================= */

.mega-image,
.mega-desc{

    height:180px;
}


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

.mega-image{

    position:relative;

    overflow:hidden;

    border-radius:24px;

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

    isolation:isolate;

    background:#161616;
}


/* image */

.mega-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:
    transform 0.8s ease,
    filter 0.6s ease;
}


/* cinematic overlay */

.mega-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        to top,
        rgba(22,22,22,0.58),
        rgba(22,22,22,0.08)
    );

    z-index:1;
}


/* glow */

.mega-image::before{

    content:"";

    position:absolute;

    top:-45px;
    right:-45px;

    width:130px;
    height:130px;

    border-radius:50%;

    background:rgba(179,142,113,0.20);

    filter:blur(45px);

    z-index:1;
}


/* hover effect */

.mega-image:hover img{

    transform:scale(1.08);

    filter:brightness(1.04);
}


/* glossy shine */

.mega-image .shine{

    position:absolute;

    top:0;
    left:-130%;

    width:55%;
    height:100%;

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

    transform:skewX(-24deg);

    z-index:2;

    transition:1.1s ease;
}

.mega-image:hover .shine{

    left:150%;
}


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

.mega-badge{

    position:absolute;

    top:16px;
    left:16px;

    z-index:3;

    padding:8px 15px;

    background:rgba(255,255,255,0.14);

    backdrop-filter:blur(10px);

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

    border:1px solid rgba(255,255,255,0.18);

    border-radius:40px;

    font-size:10px;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

    color:#ffffff;

    box-shadow:
    0 8px 20px rgba(0,0,0,0.14);
}


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

.mega-icon{

    position:absolute;

    bottom:16px;
    right:16px;

    z-index:3;

    width:48px;
    height:48px;

    border-radius:50%;

    background:#710014;

    display:flex;

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

    color:#ffffff;

    font-size:16px;

    box-shadow:
    0 12px 26px rgba(113,0,20,0.35);

    animation:megaFloat 3s ease-in-out infinite;
}


/* floating animation */

@keyframes megaFloat{

    0%{
        transform:translateY(0px);
    }

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

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


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

.mega-desc{

    display:flex;

    flex-direction:column;

    justify-content:center;

    border:1px solid rgba(179,142,113,0.16);

    padding:28px;

    background:rgba(255,255,255,0.64);

    border-radius:24px;

    backdrop-filter:blur(14px);

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

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

    transition:0.4s ease;
}


/* hover */

.mega-desc:hover{

    transform:translateY(-2px);

    box-shadow:
    0 18px 38px rgba(0,0,0,0.08);
}


/* mini title */

.mega-mini{

    display:inline-block;

    margin-bottom:12px;

    font-size:10px;

    font-weight:600;

    letter-spacing:3px;

    text-transform:uppercase;

    color:#b38e71;
}


/* heading */

.mega-desc h4{

    font-size:30px;

    line-height:1.1;

    margin:0 0 14px;

    color:#161616;

    letter-spacing:-1px;
}


/* paragraph */

.mega-desc p{

    margin:0;

    font-size:15px;

    line-height:1.8;

    color:#30373e;
}
/* =========================================
   LINKS
========================================= */

.mega-links h5{

    margin-bottom:16px;

    font-size:13px;

    letter-spacing:2px;

    text-transform:uppercase;

    color:#710014;
}

.mega-links ul{

    list-style:none;

    padding:0;
    margin:0;
}

.mega-links li{

    margin-bottom:14px;
}

.mega-links a{

    position:relative;

    text-decoration:none;

    color:#30373e;

    font-size:15px;

    font-weight:500;

    display:inline-flex;

    align-items:center;

    gap:10px;

    transition:0.35s ease;
}


/* elegant icon */

.mega-links a::before{

    content:"✦";

    font-size:10px;

    color:#b38e71;

    transition:0.3s ease;
}


/* hover */

.mega-links a:hover{

    color:#710014;

    transform:translateX(4px);
}

.mega-links a:hover::before{

    transform:rotate(180deg);
}


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

@media(max-width:900px){

    .mega-inner{

        grid-template-columns:1fr;

        gap:24px;
    }

    .mega-image{

        height:180px;
    }

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

#header{

    position:sticky;

    top:0;

    z-index:9999;

    transition:
    background 0.35s ease,
    box-shadow 0.35s ease,
    backdrop-filter 0.35s ease;
}


/* shrink */

#header.shrink{

    backdrop-filter:blur(18px);

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

    background:rgba(22,22,22,0.88);

    box-shadow:
    0 10px 35px rgba(0,0,0,0.18);

    border-bottom:
    1px solid rgba(255,255,255,0.05);
}


/* logo */

#header .logo img{

    transition:0.35s ease;
}

#header.shrink .logo img{

    height:50px;
}


/* =========================================
   HAMBURGER
========================================= */

.hamburger{

    display:none;

    flex-direction:column;

    justify-content:center;

    cursor:pointer;

    position:relative;

    z-index:10001;
}

.hamburger span{

    width:26px;
    height:2px;

    background:#ffffff;

    margin:5px 0;

    border-radius:20px;

    transition:0.35s ease;
}


/* hover */

.hamburger:hover span:nth-child(2){

    width:18px;
}


/* animated hamburger */

.hamburger.open span:nth-child(1){

    transform:
    translateY(7px)
    rotate(45deg);
}

.hamburger.open span:nth-child(2){

    opacity:0;
}

.hamburger.open span:nth-child(3){

    transform:
    translateY(-7px)
    rotate(-45deg);
}


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

@media(max-width:900px){

    body.menu-open{

        overflow:hidden;
    }

    .menu{

        position:fixed;

        top:0;
        right:-100%;

        width:290px;
        height:100%;

        background:linear-gradient(
            180deg,
            rgba(113,0,20,0.98),
            rgba(22,22,22,0.98)
        );

        backdrop-filter:blur(16px);

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

        padding:95px 28px 40px;

        transition:0.45s ease;

        overflow-y:auto;

        box-shadow:
        -10px 0 30px rgba(0,0,0,0.18);
    }

    .menu.active{

        right:0;
    }


    /* subtle glossy layer */

    .menu::before{

        content:"";

        position:absolute;

        top:-80px;
        right:-80px;

        width:220px;
        height:220px;

        border-radius:50%;

        background:rgba(255,255,255,0.05);

        filter:blur(40px);
    }


    .menu ul{

        flex-direction:column;
    }

    .menu li{

        margin-bottom:22px;
    }

    .menu > ul > li > a{

        color:#ffffff;

        font-size:18px;

        font-weight:500;

        letter-spacing:0.4px;
    }

    .hamburger{

        display:flex;
    }


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

    .mega-menu{

        position:static;

        width:100%;

        opacity:1;
        visibility:visible;

        transform:none;

        display:none;

        box-shadow:none;

        padding:20px 0 5px;

        background:none;

        border:none;

        backdrop-filter:none;
    }

    .mega.active .mega-menu{

        display:block;
    }

    .mega-inner{

        grid-template-columns:1fr;

        gap:22px;
    }

    .mega-image{

        height:170px;

        border-radius:18px;
    }

    .mega-links a{

        color:#f2f1ef;
    }

    .mega-links a:hover{

        color:#b38e71;
    }

    .mega-desc{

        background:rgba(255,255,255,0.05);

        border:1px solid rgba(255,255,255,0.08);

        color:#f2f1ef;

        border-radius:22px;
    }

    .mega-desc h4{

        color:#ffffff;
    }

    .mega-links h5{

        color:#b38e71;
    }
}


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

.search-overlay{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(22,22,22,0.82);

    backdrop-filter:blur(14px);

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

    display:none;

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

    z-index:99999;

    opacity:0;

    visibility:hidden;

    transition:0.35s ease;
}


/* active */

.search-overlay.active{

    opacity:1;

    visibility:visible;
}


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

.search-box{

    background:rgba(255,255,255,0.96);

    padding:24px;

    border-radius:24px;

    box-shadow:
    0 20px 45px rgba(0,0,0,0.18);

    display:flex;

    align-items:center;
}

.search-box input{

    padding:14px 16px;

    width:320px;

    border:1px solid rgba(179,142,113,0.22);

    border-radius:14px;

    outline:none;

    font-size:15px;

    color:#30373e;

    background:#ffffff;
}

.search-box input:focus{

    border-color:#710014;

    box-shadow:
    0 0 0 4px rgba(113,0,20,0.08);
}


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

.close-search{

    margin-left:12px;

    cursor:pointer;

    color:#710014;

    font-size:20px;

    transition:0.3s ease;
}

.close-search:hover{

    transform:rotate(90deg);
}





/* =========================================
   HOME HERO BANNER
========================================= */

.home-banner{

    position:relative;

    height:92vh;

    min-height:620px;

    overflow:hidden;

    background:#161616;
}


/* =========================================
   SLIDES
========================================= */

.banner-slide{

    position:absolute;

    inset:0;

    background-size:cover;

    background-position:center;

    display:flex;

    align-items:center;

    opacity:0;

    transition:1s ease;

    transform:scale(1.02);
}

.banner-slide.active{

    opacity:1;

    transform:scale(1);
}


/* cinematic image animation */

.banner-slide::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:inherit;

    background-size:cover;

    background-position:center;

    animation:bannerZoom 12s ease forwards;

    z-index:0;
}


/* zoom */

@keyframes bannerZoom{

    from{
        transform:scale(1);
    }

    to{
        transform:scale(1.08);
    }
}


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

.banner-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(10,10,10,0.78) 0%,
        rgba(10,10,10,0.42) 45%,
        rgba(10,10,10,0.18) 100%
    );

    z-index:1;
}


/* elegant glow */

.banner-overlay::after{

    content:"";

    position:absolute;

    top:-180px;
    right:-120px;

    width:420px;
    height:420px;

    border-radius:50%;

    background:rgba(113,0,20,0.20);

    filter:blur(100px);
}


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

.banner-content{

    position:relative;

    z-index:3;

    max-width:720px;

    color:#ffffff;
}


/* mini text */

.banner-mini{

    display:inline-block;

    margin-bottom:18px;

    font-size:11px;

    letter-spacing:4px;

    text-transform:uppercase;

    color:#fff;
}


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

.banner-content h1{

    font-size:72px;

    line-height:1.02;

    letter-spacing:-3px;

    font-weight:700;

    margin-bottom:24px;

    color:#f2f1ef;

    text-shadow:
    0 10px 30px rgba(0,0,0,0.25);
}


/* highlighted word */

.banner-content h1 span{

    background:linear-gradient(
        90deg,
        #f2d2b6,
        #b38e71
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    font-style:italic;

    font-weight:600;

    text-shadow:none;
}

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

.banner-content p{

    font-size:19px;

    line-height:1.9;

    color:rgba(242,241,239,0.88);

    max-width:620px;

    margin-bottom:38px;

    font-weight:300;
}


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

.banner-buttons{

    display:flex;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;
}


/* main button */

.banner-btn{

    position:relative;

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:16px 34px;

    background:#710014;

    color:#ffffff;

    text-decoration:none;

    border-radius:60px;

    font-size:14px;

    font-weight:600;

    letter-spacing:1px;

    overflow:hidden;

    transition:0.45s ease;

    box-shadow:
    0 14px 35px rgba(113,0,20,0.35);
}


/* glossy shine */

.banner-btn::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:60%;
    height:100%;

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

    transform:skewX(-25deg);

    transition:1s ease;
}

.banner-btn:hover::before{

    left:140%;
}

.banner-btn:hover{

    transform:translateY(-3px);

    background:#8f0621;
}


/* secondary */

.banner-outline{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#f2f1ef;

    text-decoration:none;

    font-size:14px;

    letter-spacing:1px;

    transition:0.35s ease;
}

.banner-outline:hover{

    color:#b38e71;
}


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

.banner-slide h1,
.banner-slide p,
.banner-slide .banner-buttons,
.banner-slide .banner-mini{

    transform:translateY(40px);

    opacity:0;

    transition:1s ease;
}

.banner-slide.active h1,
.banner-slide.active p,
.banner-slide.active .banner-buttons,
.banner-slide.active .banner-mini{

    transform:translateY(0);

    opacity:1;
}


/* =========================================
   ARROWS
========================================= */

.slider-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:58px;
    height:58px;

    border-radius:50%;

    display:flex;

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

    color:#ffffff;

    font-size:20px;

    cursor:pointer;

    background:rgba(255,255,255,0.08);

    backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,0.12);

    z-index:10;

    transition:0.35s ease;
}

.slider-arrow:hover{

    background:#710014;

    transform:translateY(-50%) scale(1.08);
}

.slider-arrow.left{
    left:28px;
}

.slider-arrow.right{
    right:28px;
}


/* =========================================
   DOTS
========================================= */

.slider-dots{

    position:absolute;

    bottom:42px;

    width:100%;

    display:flex;

    justify-content:center;

    gap:12px;

    z-index:10;
}

.slider-dots span{

    width:12px;
    height:12px;

    border-radius:50%;

    background:rgba(255,255,255,0.35);

    cursor:pointer;

    transition:0.35s ease;
}

.slider-dots span.active{

    width:42px;

    border-radius:30px;

    background:#b38e71;
}


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

.scroll-indicator{

    position:absolute;

    bottom:18px;

    left:50%;

    transform:translateX(-50%);

    z-index:10;
}

.scroll-indicator span{

    display:block;

    width:28px;
    height:48px;

    border:2px solid rgba(255,255,255,0.7);

    border-radius:30px;

    position:relative;
}

.scroll-indicator span::before{

    content:"";

    position:absolute;

    top:8px;
    left:50%;

    transform:translateX(-50%);

    width:5px;
    height:9px;

    border-radius:20px;

    background:#ffffff;

    animation:scrollMove 2s infinite;
}

@keyframes scrollMove{

    0%{
        opacity:0;
        transform:translate(-50%,0);
    }

    50%{
        opacity:1;
    }

    100%{
        opacity:0;
        transform:translate(-50%,12px);
    }
}


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

@media(max-width:768px){

    .home-banner{

        height:88vh;

        min-height:560px;
    }

    .banner-content h1{

        font-size:46px;

        line-height:1.08;
    }

    .banner-content p{

        font-size:16px;

        line-height:1.8;
    }

    .banner-buttons{

        gap:14px;
    }

    .banner-btn{

        padding:14px 26px;

        font-size:13px;
    }

    .slider-arrow{

        width:48px;
        height:48px;

        font-size:16px;
    }

}


/* =========================================
   HOME MENU OVER HERO
========================================= */

body.home .main-nav{

    position:absolute;

    top:32px;

    left:0;

    width:100%;

    background:rgba(255,255,255,0.02);

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

    border-top:1px solid rgba(255,255,255,0.05);
    border-bottom:1px solid rgba(255,255,255,0.05);

    z-index:1000;

    box-shadow:
    0 8px 30px rgba(0,0,0,0.12);

    transition:0.4s ease;
}


/* subtle glossy effect */

body.home .main-nav::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:50%;
    height:100%;

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

    transform:skewX(-25deg);

    transition:1s ease;
}

body.home .main-nav:hover::before{

    left:140%;
}


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

body.home .main-nav .menu > ul > li > a{

    color:#ffffff;

    font-weight:500;

    letter-spacing:0.4px;

    transition:0.35s ease;
}


/* elegant hover */

body.home .main-nav .menu > ul > li > a:hover{

    color:#b38e71;
}


/* =========================================
   STICKY MENU
========================================= */

body.home #header.shrink .main-nav{

    position:fixed;

    top:0;

    background:rgba(22,22,22,0.88);

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

    border:none;

    box-shadow:
    0 10px 35px rgba(0,0,0,0.18);
}


/* shrink links */

body.home #header.shrink .menu > ul > li > a{

    color:#f2f1ef;
}


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

body.home .mega-menu{

    background:rgba(242,241,239,0.96);

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

    border-top:1px solid rgba(179,142,113,0.18);
}


/* links */

body.home .mega-links a{

    color:#30373e;
}

body.home .mega-links a:hover{

    color:#710014;
}


/* headings */

body.home .mega-links h5{

    color:#710014;
}


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

@media(max-width:900px){

    body.home .main-nav{

        top:18px;

        background:transparent;

        border:none;

        box-shadow:none;

        backdrop-filter:none;
    }

}

/* prevent scroll when menu open */

body.menu-open{

    overflow:hidden;
}


/* hamburger animation */

.hamburger.open span:nth-child(1){

    transform:translateY(7px) rotate(45deg);
}

.hamburger.open span:nth-child(2){

    opacity:0;
}

.hamburger.open span:nth-child(3){

    transform:translateY(-7px) rotate(-45deg);
}


/* smooth search overlay */

.search-overlay{

    opacity:0;

    visibility:hidden;

    transition:0.35s ease;
}

.search-overlay.active{

    opacity:1;

    visibility:visible;
}

.menu > ul > li > a{

    display:flex;

    align-items:center;

    gap:8px;
}

.menu > ul > li > a i{

    font-size:11px;

    opacity:0.7;

    transition:0.3s ease;
}

.mega:hover > a i{

    transform:rotate(180deg);

    opacity:1;
}

.mega-mini{

    display:inline-block;

    margin-bottom:10px;

    font-size:10px;

    letter-spacing:3px;

    text-transform:uppercase;

    color:#b38e71;
}

.mega-links h5{

    margin-bottom:16px;

    font-size:13px;

    letter-spacing:2px;

    text-transform:uppercase;

    color:#710014;
}

/* EVENTS SECTION */

.home-events{
margin-top:-60px;
padding-bottom:70px;
position:relative;
z-index:5;
}


/* GRID */

.events-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}


/* COMMON BOX */
/* COMMON EVENT BOX */

.event-box{

position:relative;

padding:25px;

min-height:200px;

display:flex;

align-items:center;

color:#fff;

border:2px solid rgba(255,255,255,0.6);

border-radius:6px;

box-shadow:0 8px 25px rgba(0,0,0,0.15);

overflow:hidden;

transition:all 0.3s ease;

}


/* SOFT GLASS OVERLAY */

.event-box::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:linear-gradient(
to bottom,
rgba(255,255,255,0.12),
rgba(255,255,255,0)
);

pointer-events:none;

}


/* HOVER EFFECT */

.event-box:hover{

transform:translateY(-6px);

box-shadow:0 14px 35px rgba(0,0,0,0.25);

}


/* ACADEMIC CALENDAR */

.calendar-box{

background:linear-gradient(
135deg,
#102f52,
#0b2340
);

}


/* WEBINAR */

.webinar-box{

background:linear-gradient(
135deg,
#d4a93c,
#b8912c
);

flex-direction:column;
align-items:flex-start;

}


/* SPECIAL EVENT */

.special-box{

background:linear-gradient(
135deg,
#7a1e1e,
#4d0f0f
);

}

/* DATE STYLE */

.event-date{
background:#fff;
color:#000;
padding:8px 14px;
text-align:center;
margin-right:15px;
}

.event-date .day{
font-size:22px;
font-weight:bold;
display:block;
}

.event-date .month{
font-size:12px;
}


/* CONTENT */

.event-content h4{
margin-bottom:6px;
font-size:16px;
}

.event-content p{
font-size:14px;
margin-bottom:6px;
}

.event-content a{
color:#c79b3b;
font-size:13px;
text-decoration:none;
}


/* IMAGE BOX */

.image-box{
padding:0;
overflow:hidden;
}

.image-box img{
width:100%;
height:100%;
object-fit:cover;
}

.image-overlay{
position:absolute;
bottom:0;
left:0;
width:100%;
background:rgba(0,0,0,0.6);
color:#fff;
padding:15px;
}


/* WEBINAR */

.webinar-title{
font-weight:600;
margin:10px 0;
}

.webinar-time{
font-size:13px;
margin-bottom:15px;
}

.event-btn{
background:#0b2340;
color:#fff;
padding:8px 18px;
text-decoration:none;
font-size:13px;
}


/* RESPONSIVE */

@media(max-width:1000px){

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

}

@media(max-width:600px){

.events-grid{
grid-template-columns:1fr;
}

}

/* =========================================
   HOME EVENTS MODERN
========================================= */

.home-events-modern{

    position:relative;

    padding:55px 20px;

    background:#f2f1ef;

    overflow:hidden;

    min-height:100vh;

    display:flex;

    align-items:center;
}


/* =========================================
   SECTION HEAD
========================================= */

.events-head{

    text-align:center;

    margin-bottom:35px;
}

.events-mini{

    display:inline-block;

    margin-bottom:12px;

    font-size:10px;

    letter-spacing:4px;

    text-transform:uppercase;

    color:#b38e71;
}

.events-head h2{

    font-size:52px;

    line-height:1.05;

    letter-spacing:-2px;

    color:#710014;

    font-weight:700;
}


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

.events-layout{

    display:grid;

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

    gap:20px;

    align-items:stretch;

    min-height:680px;
}


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

.events-left,
.events-right{

    display:flex;

    flex-direction:column;

    gap:18px;

    height:100%;
}

.floating-event{

    min-height:190px;
}



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

.floating-event{

    position:relative;

    background:#ffffff;

    border-radius:26px;

    padding:24px;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    justify-content:center;

    transition:0.45s ease;

    box-shadow:0 10px 30px rgba(0,0,0,0.05);
}


/* glossy animation */

.glow-card::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:70%;
    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.65),
        transparent
    );

    transform:skewX(-20deg);

    transition:0.9s ease;
}

.glow-card:hover::before{

    left:150%;
}

.floating-event:hover{

    transform:translateY(-6px);

    box-shadow:
    0 20px 40px rgba(113,0,20,0.10);
}


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

.event-icon{

    width:58px;
    height:58px;

    display:flex;

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

    border-radius:18px;

    margin-bottom:16px;

    background:linear-gradient(
        135deg,
        #710014,
        #9a1a33
    );

    color:#ffffff;

    font-size:20px;
}


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

.event-label{

    display:block;

    margin-bottom:8px;

    font-size:10px;

    letter-spacing:2px;

    text-transform:uppercase;

    color:#b38e71;

    font-weight:600;
}

.floating-event h3{

    font-size:22px;

    line-height:1.25;

    color:#161616;

    margin-bottom:10px;

    font-weight:700;
}

.event-meta{

    font-size:13px;

    color:#666;

    margin-bottom:12px;
}

.floating-event p{

    font-size:14px;

    line-height:1.7;

    color:#555;
}

.floating-event a{

    display:inline-flex;

    align-items:center;

    margin-top:10px;

    color:#710014;

    text-decoration:none;

    font-size:11px;

    letter-spacing:2px;

    text-transform:uppercase;

    font-weight:600;

    transition:0.3s ease;
}

.floating-event a:hover{

    transform:translateX(4px);
}


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

.events-center{

    position:relative;

    min-height:680px;

    overflow:hidden;

    border-radius:34px;

    
}

.events-center img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:1s ease;
}

.events-center:hover img{

    transform:scale(1.05);
}


/* overlay */

.center-overlay{

    position:absolute;
    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:38px;

    background:
    linear-gradient(
        to top,

        rgba(0,0,0,0.78) 0%,
        rgba(0,0,0,0.45) 18%,
        rgba(0,0,0,0.12) 32%,
        rgba(0,0,0,0.00) 55%
    );
}


.center-overlay h2{

    text-shadow:
    0 4px 18px rgba(0,0,0,0.45);
}

.center-overlay p{

    text-shadow:
    0 2px 12px rgba(0,0,0,0.35);
}
.center-overlay span{

    margin-bottom:14px;

    color:#b38e71;

    font-size:10px;

    letter-spacing:3px;

    text-transform:uppercase;
}

.center-overlay h2{

    font-size:46px;

    line-height:1.02;

    letter-spacing:-2px;

    color:#ffffff;

    margin-bottom:16px;

    font-weight:700;
}

.center-overlay p{

    font-size:15px;

    line-height:1.8;

    color:rgba(255,255,255,0.80);
}


/* =========================================
   VISION BLOCK
========================================= */

.vision-text{

    position:relative;

    background:linear-gradient(
        135deg,
        #710014,
        #4a000d
    );

    border-radius:26px;

    padding:28px;

    color:#ffffff;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    justify-content:center;
}

.vision-text i{

    font-size:34px;

    color:#b38e71;

    margin-bottom:16px;
}

.vision-text p{

    font-size:18px;

    line-height:1.7;

    font-weight:300;
}


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

@media(max-width:991px){

    .home-events-modern{

        min-height:auto;

        padding:70px 20px;
    }

    .events-layout{

        grid-template-columns:1fr;

        height:auto;
    }

    .events-left,
    .events-right{

        grid-template-rows:auto;
    }

    .events-center{

        height:450px;
    }

    .events-head h2{

        font-size:42px;
    }

}


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

@media(max-width:480px){

    .home-events-modern{

        padding:55px 15px;
    }

    .events-head{

        margin-bottom:28px;
    }

    .events-head h2{

        font-size:32px;

        line-height:1.12;

        letter-spacing:-1px;
    }

    .floating-event{

        padding:20px;
    }

    .floating-event h3{

        font-size:20px;
    }

    .events-center{

        height:340px;

        border-radius:24px;
    }

    .center-overlay{

        padding:24px;
    }

    .center-overlay h2{

        font-size:30px;

        line-height:1.08;
    }

    .center-overlay p{

        font-size:14px;
    }

    .vision-text{

        padding:24px;
    }

    .vision-text p{

        font-size:16px;
    }

}


/* =========================================
   WELCOME SECTION
========================================= */

.welcome-section{

    width:100%;

    height:100vh;

    background:#f8f5f2;

    overflow:hidden;
}

/* =========================================
   SPLIT LAYOUT
========================================= */

.welcome-split{

    display:grid;

    grid-template-columns:
    48% 52%;

    height:100vh;
}



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

.welcome-image-side{

    position:relative;

    height:100vh;

    overflow:hidden;
    background:#ffffff;
}

.welcome-image-side img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;
}

/* OVERLAY */

.welcome-content-side{

    justify-content:flex-start;

    padding-top:70px;
}


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

.welcome-content-side{

    height:100vh;

    padding:
    55px   /* top */
    70px   /* right */
    55px   /* bottom */
    80px;  /* left */

    display:flex;

    flex-direction:column;

    justify-content:center;

    background:#ffffff;

    overflow:hidden;
}

.welcome-content-side{

    max-width:760px;
}

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

.mini-title{

    display:inline-block;

    margin-bottom:14px;

    color:#7a0019;

    font-size:11px;

    letter-spacing:4px;

    text-transform:uppercase;

    font-weight:700;
}

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

.kingdom-title{

    font-size:42px;

    line-height:0.95;

    letter-spacing:-2px;

    color:#161616;

    margin-bottom:18px;
}

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

.welcome-content-side p{

    font-size:15px;

    line-height:1.7;

    color:#5f5f5f;

    margin-bottom:12px;
}

/* =========================================
   TAGS
========================================= */

.welcome-tags{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin:14px 0 18px;
}

.welcome-tags span{

    padding:8px 14px;

    border-radius:40px;

    background:#f3f4f6;

    color:#161616;

    font-size:10px;

    font-weight:600;
}
/* =========================================
   TESTIMONIAL
========================================= */

.testimonial-bubble{

    margin-top:6px;

    padding:20px;

    border-radius:20px;

    background:#faf7f5;

    border:1px solid #ece8e4;

    margin-bottom:20px;
}

.testimonial-bubble p{

    margin-bottom:10px;

    font-size:14px;

    line-height:1.7;

    font-style:italic;
}

.testimonial-bubble span{

    color:#7a0019;

    font-size:13px;

    font-weight:600;
}

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

.welcome-btn{

    width:max-content;

    padding:14px 28px;

    border-radius:60px;

    background:#7a0019;

    color:#fff;

    text-decoration:none;

    font-size:11px;

    letter-spacing:2px;

    text-transform:uppercase;

    font-weight:700;

    transition:0.4s ease;

    margin-bottom:16px;
}

.welcome-btn:hover{

    transform:translateY(-4px);
}

/* =========================================
   ACCREDITATION
========================================= */

.accreditation-panel{

    display:flex;

    flex-direction:column;

    gap:10px;
}

.accreditation-item{

    display:flex;

    align-items:center;

    gap:14px;

    padding:12px 16px;

    border-radius:18px;

    background:#fafafa;

    border:1px solid #ececec;
}

.accreditation-item img{

    width:52px;

    height:52px;

    object-fit:contain;
}

.accreditation-text span{

    display:block;

    margin-bottom:4px;

    color:#8b8b8b;

    font-size:11px;

    letter-spacing:1px;

    text-transform:uppercase;
}

.accreditation-text h4{

    font-size:15px;

    line-height:1.3;
}

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

@media(max-width:991px){

    .welcome-section{

        height:auto;
    }

    .welcome-split{

        grid-template-columns:1fr;

        height:auto;
    }

    .welcome-image-side{

        height:420px;
    }

    .welcome-content-side{

        height:auto;

        padding:55px 35px;
    }

    .kingdom-title{

        font-size:42px;
    }
}

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

@media(max-width:480px){

    .welcome-image-side{

        height:320px;
    }

    .welcome-content-side{

        padding:45px 22px;
    }

    .kingdom-title{

        font-size:32px;

        line-height:1.1;
    }

    .welcome-content-side p{

        font-size:15px;
    }

    .welcome-tags{

        gap:8px;
    }

    .welcome-tags span{

        font-size:10px;

        padding:9px 14px;
    }

    .testimonial-bubble{

        padding:16px;
    }

    .accreditation-item{

        flex-direction:column;

        text-align:center;

        padding:18px;
    }

    .welcome-btn{

        width:100%;

        justify-content:center;
    }
}
/* =========================================
   MODERN COURSES SECTION
========================================= */

.courses-showcase{

    position:relative;

    padding:110px 0;

    background:#f7f3ef;

    overflow:hidden;
}


/* =========================================
   ABSTRACT SHAPES
========================================= */

.courses-showcase::before{

    content:"";

    position:absolute;

    top:80px;
    right:140px;

    width:240px;
    height:240px;

    background:#710014;

    border-radius:45% 55% 60% 40%;

    opacity:0.08;

    z-index:1;
}

.courses-showcase::after{

    content:"";

    position:absolute;

    bottom:40px;
    right:320px;

    width:180px;
    height:180px;

    background:#b38e71;

    border-radius:50%;

    opacity:0.10;

    z-index:1;
}


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

.courses-showcase .container{

    position:relative;

    z-index:5;

    display:grid;

    grid-template-columns:1fr 520px;

    align-items:center;

    gap:50px;
}


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

.courses-left{

    max-width:620px;
}

.section-mini{

    display:inline-block;

    margin-bottom:18px;

    font-size:11px;

    letter-spacing:4px;

    text-transform:uppercase;

    color:#710014;
}

.courses-left h2{

    font-size:45px;

    line-height:0.96;

    letter-spacing:-3px;

    color:#161616;

    margin-bottom:28px;

    font-weight:800;
}

.courses-left h2 span{

    color:#710014;
}

.courses-left p{

    font-size:18px;

    line-height:1.9;

    color:#5b5b5b;

    margin-bottom:38px;
}


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

.courses-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:18px 34px;

    background:#710014;

    color:#ffffff;

    text-decoration:none;

    border-radius:60px;

    font-size:14px;

    font-weight:600;

    letter-spacing:1px;

    transition:0.35s ease;

    box-shadow:
    0 16px 30px rgba(113,0,20,0.18);
}

.courses-btn:hover{

    transform:translateY(-4px);

    background:#8d0320;
}


/* =========================================
   FEATURE PROGRAM BOXES
========================================= */

.course-features{

    display:grid;

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

    gap:20px;

    margin-top:60px;
}


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

.feature-box{

    position:relative;

    background:#ffffff;

    border-radius:28px;

    padding:28px;

    overflow:hidden;

    transition:0.4s ease;

    box-shadow:
    0 12px 28px rgba(0,0,0,0.05);
}


/* top glow */

.feature-box::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:5px;

    background:#710014;

    transform:scaleX(0);

    transform-origin:left;

    transition:0.4s ease;
}

.feature-box:hover::before{

    transform:scaleX(1);
}


/* hover */

.feature-box:hover{

    transform:translateY(-8px);

    box-shadow:
    0 18px 38px rgba(0,0,0,0.08);
}


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

.feature-icon{

    width:62px;
    height:62px;

    border-radius:20px;

    background:rgba(113,0,20,0.08);

    display:flex;

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

    color:#710014;

    font-size:24px;

    margin-bottom:22px;
}


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

.feature-box h4{

    font-size:22px;

    line-height:1.3;

    margin-bottom:14px;

    color:#161616;

    font-weight:700;
}


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

.feature-box p{

    font-size:14px;

    line-height:1.8;

    color:#666666;

    margin-bottom:24px;
}


/* =========================================
   LINK
========================================= */

.feature-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    font-size:13px;

    font-weight:600;

    letter-spacing:1px;

    text-transform:uppercase;

    color:#710014;

    transition:0.3s ease;
}

.feature-link i{

    font-size:12px;

    transition:0.3s ease;
}

.feature-link:hover{

    gap:14px;
}

.feature-link:hover i{

    transform:translateX(3px);
}


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

@media(max-width:991px){

    .course-features{

        grid-template-columns:1fr;
    }
}

/* =========================================
   RIGHT IMAGE AREA
========================================= */

.courses-right{

    position:relative;

    height:680px;

    display:flex;

    align-items:flex-end;

    justify-content:center;
}


/* main maroon background */

.image-shape{

    position:absolute;

    width:470px;
    height:360px;

    background:#710014;

    border-radius:60px;

    right:20px;
    bottom:0;

    overflow:hidden;

    z-index:1;
}


/* smooth top overlay */

.image-shape::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:120px;

    background:linear-gradient(
        to bottom,
        rgba(255,255,255,0.08),
        transparent
    );

    z-index:2;
}


/* elegant bottom fade */

.image-shape::after{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:100%;
    height:140px;

    background:linear-gradient(
        to top,
        rgba(113,0,20,0.22),
        transparent
    );

    z-index:3;
}


/* circle bg */

.image-shape-two{

    position:absolute;

    width:180px;
    height:180px;

    border-radius:50%;

    background:#d8c5b6;

    opacity:0.22;

    left:40px;
    bottom:30px;

    z-index:0;
}




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

.courses-bandana{

    position:absolute;

    width:540px;

    right:-10px;

    bottom:-10px;

    z-index:5;

    object-fit:contain;

    transform:translateY(-330px);

    filter:
    drop-shadow(0 28px 40px rgba(0,0,0,0.22));
}


/* make only head go outside */

.courses-bandana{

    clip-path:none;
}


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

.image-shape{

    position:absolute;

    width:350px;
    height:360px;

    background:#710014;

    border-radius:60px;

    right:20px;
    bottom:0;

    overflow:hidden;

    z-index:1;
}


/* =========================================
   PUSH IMAGE UP
========================================= */

.courses-bandana{

    bottom:-5px;

    right:35px;

    width:440px;
}


/* head outside effect */

.courses-bandana{

    transform:translateY(-70px);
}


/* smoother blending */

.image-shape::after{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:100%;
    height:120px;

    background:linear-gradient(
        to top,
        rgba(113,0,20,0.25),
        transparent
    );

    z-index:3;
}


/* =========================================
   GLASS INFO CARD
========================================= */

.floating-card{

    position:absolute;

    background:rgba(255,255,255,0.92);

    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,0.4);

    border-radius:28px;

    padding:10px 26px;

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

    z-index:10;
}

.card-top{

    top:140px;
    left:10px;
}

.card-bottom{

    bottom:50px;
    left:140px;
}

.floating-card h5{

    font-size:42px;

    line-height:1;

    color:#710014;

    margin-bottom:6px;

    font-weight:800;
}

.floating-card span{

    font-size:14px;

    color:#666666;

    line-height:1.6;
}


/* =========================================
   EXTRA DESIGN LAYER
========================================= */

.image-frame{

    position:absolute;

    width:520px;
    height:610px;

    border:1px solid rgba(255,255,255,0.12);

    border-radius:70px;

    right:-10px;
    bottom:-20px;

    z-index:0;
}
/* =========================================
   MOBILE
========================================= */

@media(max-width:991px){

    .courses-showcase .container{

        grid-template-columns:1fr;
    }

    .courses-left h2{

        font-size:52px;
    }

    .courses-right{

        height:auto;

        margin-top:50px;
    }

    .courses-bandana{

        width:340px;
    }

    .image-shape{

        width:300px;
        height:380px;

        right:50%;
        transform:translateX(50%);
    }

    .floating-card{

        display:none;
    }
}


@media(max-width:600px){

    .courses-showcase{

        padding:80px 0;
    }

    .courses-left h2{

        font-size:40px;

        line-height:1.08;
    }

    .course-features{

        grid-template-columns:1fr;
    }

    .courses-bandana{

        width:260px;
    }

    .image-shape{

        width:240px;
        height:320px;
    }
}
/* =========================================
   TESTIMONIAL MODERN
========================================= */

.hbi-testimonial-modern{

    position:relative;

    padding:120px 20px;

    overflow:hidden;

    background:#161616;
}

/* SECTION */

.hbi-testimonial-modern{

    background:
    linear-gradient(
        135deg,
        #710014 0%,
        #161616 100%
    );
}

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

.testimonial-bg{

    position:absolute;
    inset:0;
}

.testimonial-bg img{

    width:100%;
    height:100%;

    object-fit:cover;

    filter:
    blur(5px)
    brightness(0.78);

    transform:scale(1.04);
}

.testimonial-overlay{

    position:absolute;
    inset:0;

    background:linear-gradient(
        to bottom,
        rgba(113,0,20,0.42),
        rgba(22,22,22,0.68)
    );
}

/* =========================================
   HEAD
========================================= */

.testimonial-head{

    position:relative;
    z-index:2;

    text-align:center;

    max-width:900px;

    margin:0 auto 80px;
}

.mini-tag{

    display:inline-block;

    margin-bottom:18px;

    font-size:12px;
    letter-spacing:4px;
    text-transform:uppercase;

    color:#b38e71;
}

.testimonial-head h2{

    font-size:78px;
    line-height:1;

    color:#f2f1ef;

    margin-bottom:22px;

    font-weight:700;

    letter-spacing:-3px;
}

.testimonial-head h2 em{

    color:#b38e71;

    font-style:italic;

    font-weight:500;
}

.testimonial-head p{

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

    color:rgba(255,255,255,0.72);
}


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

.testimonial-slider{

    position:relative;
    z-index:2;

    display:grid;

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

    gap:35px;
}




.testimonial-card{

    position:relative;

    padding:95px 35px 42px;

    background:linear-gradient(
        145deg,
        rgba(113,0,20,0.58),
        rgba(48,55,62,0.46)
    );

    border:1px solid rgba(179,142,113,0.24);

    border-radius:35px;

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

    overflow:visible;

    transition:0.5s ease;

    box-shadow:
    0 12px 35px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.05);
}
/* glossy shine */

.testimonial-card::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:70%;
    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.14),
        transparent
    );

    transform:skewX(-25deg);

    transition:0.9s ease;
}


/* soft top gloss */

.testimonial-card::after{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:120px;

    background:linear-gradient(
        to bottom,
        rgba(255,255,255,0.08),
        transparent
    );

    border-radius:35px 35px 0 0;

    pointer-events:none;
}


/* hover */

.testimonial-card:hover{

    transform:translateY(-12px);

    border-color:rgba(179,142,113,0.5);

    box-shadow:
    0 25px 60px rgba(0,0,0,0.45),
    0 0 40px rgba(179,142,113,0.08);
}

.testimonial-card:hover::before{

    left:150%;
}


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

.student-image{

    position:absolute;

    top:-55px;
    left:50%;

    transform:translateX(-50%);

    width:120px;
    height:120px;

    border-radius:50%;

    overflow:hidden;

    background:#fff;

    border:4px solid rgba(179,142,113,0.75);

    box-shadow:
    0 10px 30px rgba(0,0,0,0.35),
    0 0 20px rgba(179,142,113,0.18);

    z-index:5;
}

.student-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    object-position:center top;
}

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

.quote-icon{

    font-size:90px;

    color:rgba(179,142,113,0.15);

    line-height:1;

    margin-bottom:10px;

    font-family:serif;
}


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

.testimonial-content{

    text-align:center;
}

.testimonial-content p{

    font-size:20px;

    line-height:1.9;

    color:#f2f1ef;

    margin-bottom:30px;

    font-weight:300;
}


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

.student-info{

    margin-bottom:28px;
}

.student-info h4{

    font-size:24px;

    color:#ffffff;

    margin-bottom:8px;

    font-weight:600;
}

.student-info span{

    font-size:14px;

    letter-spacing:1px;

    color:#b38e71;
}


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

.story-btn{

    display:inline-flex;

    align-items:center;
    gap:12px;

    padding:14px 28px;

    border:1px solid rgba(179,142,113,0.35);

    border-radius:60px;

    color:#f2f1ef;

    text-decoration:none;

    font-size:13px;
    letter-spacing:2px;
    text-transform:uppercase;

    transition:0.4s ease;

    background:rgba(255,255,255,0.02);
}

.story-btn span{

    font-size:18px;

    transition:0.3s ease;
}

.story-btn:hover{

    background:#710014;

    border-color:#b38e71;

    transform:translateY(-2px);
}

.story-btn:hover span{

    transform:translateX(5px);
}


/* =========================================
   DOTS
========================================= */

.testimonial-dots{

    position:relative;
    z-index:2;

    display:flex;
    justify-content:center;

    gap:12px;

    margin-top:50px;
}

.testimonial-dots span{

    width:10px;
    height:10px;

    border-radius:50%;

    background:rgba(255,255,255,0.25);
}

.testimonial-dots span.active{

    background:#b38e71;

    box-shadow:0 0 10px #b38e71;
}


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

@media(max-width:991px){

    .testimonial-slider{

        grid-template-columns:1fr;

        gap:90px;
    }

    .testimonial-head h2{

        font-size:54px;
    }

}


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

@media(max-width:480px){

    .hbi-testimonial-modern{

        padding:90px 15px;
    }

    .testimonial-head{

        margin-bottom:70px;
    }

    .testimonial-head h2{

        font-size:38px;

        line-height:1.15;

        letter-spacing:-1px;
    }

    .testimonial-head p{

        font-size:16px;

        line-height:1.8;
    }

    .testimonial-card{

        padding:80px 24px 30px;

        border-radius:24px;
    }

    .student-image{

        width:100px;
        height:100px;

        top:-50px;
    }

    .testimonial-content p{

        font-size:17px;

        line-height:1.85;
    }

    .student-info h4{

        font-size:21px;
    }

}

/* =========================================
   HBI STORIES
========================================= */

.hbi-stories{

    position:relative;

    padding:70px 20px;

    background:#f2f1ef;

    overflow:hidden;
}


/* =========================================
   LAYOUT
========================================= */

.stories-container{

    max-width:1450px;

    margin:auto;

    display:grid;

    grid-template-columns:1.15fr 0.85fr;

    gap:24px;

    align-items:stretch;
}


/* =========================================
   FEATURED STORY
========================================= */

.featured-story{

    position:relative;

    height:500px;

    overflow:hidden;

    border-radius:34px;

    text-decoration:none;

    display:flex;

    align-items:flex-end;

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

    transition:0.5s ease;
}

.featured-story img{

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:1s ease;
}

.featured-story:hover img{

    transform:scale(1.08);
}


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

.story-overlay{

    position:absolute;
    inset:0;

    background:linear-gradient(
        to top,
        rgba(22,22,22,0.92),
        rgba(22,22,22,0.12)
    );
}


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

.featured-content{

    position:relative;
    z-index:2;

    padding:38px;

    max-width:620px;
}

.story-tag{

    display:inline-block;

    padding:9px 16px;

    background:rgba(255,255,255,0.08);

    border:1px solid rgba(255,255,255,0.12);

    border-radius:40px;

    color:#f2f1ef;

    font-size:10px;
    letter-spacing:2px;
    text-transform:uppercase;

    margin-bottom:20px;

    backdrop-filter:blur(10px);
}

.featured-content h2{

    font-size:48px;

    line-height:1.05;

    letter-spacing:-2px;

    color:#ffffff;

    margin-bottom:18px;

    font-weight:700;
}

.featured-content p{

    font-size:16px;

    line-height:1.8;

    color:rgba(255,255,255,0.78);

    margin-bottom:22px;
}


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

.story-meta{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:22px;

    color:rgba(255,255,255,0.65);

    font-size:13px;
}


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

.read-story{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#ffffff;

    font-size:12px;

    letter-spacing:2px;

    text-transform:uppercase;

    transition:0.35s ease;
}

.read-story span{

    font-size:22px;

    transition:0.35s ease;
}

.featured-story:hover .read-story span{

    transform:translateX(6px);
}


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

.side-stories{

    display:flex;

    flex-direction:column;

    gap:18px;

    height:500px;
}


/* =========================================
   MINI STORY
========================================= */

.mini-story{

    display:grid;

    grid-template-columns:145px 1fr;

    gap:16px;

    align-items:center;

    background:#ffffff;

    padding:14px;

    border-radius:24px;

    flex:1;

    text-decoration:none;

    overflow:hidden;

    transition:0.4s ease;

    box-shadow:0 10px 25px rgba(0,0,0,0.04);
}

.mini-story:hover{

    transform:translateY(-5px);

    box-shadow:0 18px 35px rgba(113,0,20,0.08);
}


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

.mini-image{

    height:100%;

    min-height:120px;

    overflow:hidden;

    border-radius:18px;
}

.mini-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:0.8s ease;
}

.mini-story:hover img{

    transform:scale(1.08);
}


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

.mini-tag{

    display:inline-block;

    margin-bottom:10px;

    color:#710014;

    font-size:10px;

    letter-spacing:2px;

    text-transform:uppercase;

    font-weight:600;
}

.mini-content h3{

    font-size:21px;

    line-height:1.25;

    color:#161616;

    margin-bottom:14px;

    font-weight:700;
}

.mini-link{

    color:#710014;

    font-size:12px;

    letter-spacing:2px;

    text-transform:uppercase;

    font-weight:600;
}


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

@media(max-width:991px){

    .stories-container{

        grid-template-columns:1fr;

        gap:24px;
    }

    .featured-story{

        height:460px;
    }

    .side-stories{

        height:auto;
    }

}


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

@media(max-width:480px){

    .hbi-stories{

        padding:60px 15px;
    }

    .featured-story{

        height:380px;

        border-radius:22px;
    }

    .featured-content{

        padding:24px;
    }

    .featured-content h2{

        font-size:32px;

        line-height:1.1;

        letter-spacing:-1px;
    }

    .featured-content p{

        font-size:15px;

        line-height:1.7;
    }

    .mini-story{

        grid-template-columns:110px 1fr;

        padding:12px;

        border-radius:18px;
    }

    .mini-image{

        min-height:90px;
    }

    .mini-content h3{

        font-size:17px;
    }

}

/* =========================================
   HBI CALLING SECTION
========================================= */

.hbi-calling{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    padding:70px 20px;

    overflow:hidden;

    background:linear-gradient(
        135deg,
        #710014 0%,
        #4d000d 55%,
        #161616 100%
    );
}


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

.calling-container{

    position:relative;
    z-index:5;

    width:100%;

    max-width:1450px;

    margin:auto;

    display:grid;

    grid-template-columns:1.1fr 0.9fr;

    gap:50px;

    align-items:center;
}


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

.calling-content{

    max-width:720px;
}

.calling-mini{

    display:inline-block;

    margin-bottom:22px;

    font-size:12px;

    letter-spacing:4px;

    text-transform:uppercase;

    color:#b38e71;
}

.calling-content h2{

    font-size:78px;

    line-height:0.98;

    letter-spacing:-3px;

    color:#f2f1ef;

    margin-bottom:28px;

    font-weight:700;
}

.calling-content p{

    max-width:620px;

    font-size:20px;

    line-height:1.9;

    color:rgba(255,255,255,0.78);

    margin-bottom:40px;
}


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

.calling-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;
}

.apply-btn,
.prospectus-btn{

    position:relative;

    display:inline-flex;

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

    padding:16px 34px;

    border-radius:60px;

    text-decoration:none;

    font-size:13px;

    letter-spacing:2px;

    text-transform:uppercase;

    overflow:hidden;

    transition:0.4s ease;

    backdrop-filter:blur(10px);
}


/* apply */

.apply-btn{

    background:#b38e71;

    color:#161616;

    font-weight:700;

    box-shadow:
    0 10px 30px rgba(179,142,113,0.25);
}

.apply-btn:hover{

    transform:translateY(-4px);

    box-shadow:
    0 18px 40px rgba(179,142,113,0.35);
}


/* prospectus */

.prospectus-btn{

    border:1px solid rgba(255,255,255,0.15);

    background:rgba(255,255,255,0.05);

    color:#f2f1ef;
}

.prospectus-btn:hover{

    background:rgba(255,255,255,0.08);

    transform:translateY(-4px);
}


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

.calling-stats{

    display:grid;

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

    gap:22px;
}


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

.stat-card{

    position:relative;

    padding:45px 30px;

    border-radius:30px;

    background:rgba(255,255,255,0.06);

    border:1px solid rgba(255,255,255,0.08);

    backdrop-filter:blur(16px);

    overflow:hidden;

    transition:0.45s ease;
}


/* glossy effect */

.stat-card::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:70%;
    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.15),
        transparent
    );

    transform:skewX(-25deg);

    transition:0.8s ease;
}

.stat-card:hover::before{

    left:150%;
}

.stat-card:hover{

    transform:translateY(-10px);

    border-color:rgba(179,142,113,0.3);

    box-shadow:
    0 18px 45px rgba(0,0,0,0.28);
}


/* number */

.stat-card h3{

    font-size:56px;

    line-height:1;

    color:#ffffff;

    margin-bottom:16px;

    font-weight:700;
}


/* text */

.stat-card span{

    font-size:15px;

    line-height:1.7;

    color:rgba(255,255,255,0.72);

    letter-spacing:1px;
}


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

.glow{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    opacity:0.18;
}

.glow-one{

    top:-100px;
    left:-100px;

    width:400px;
    height:400px;

    background:#b38e71;
}

.glow-two{

    bottom:-120px;
    right:-100px;

    width:450px;
    height:450px;

    background:#710014;
}


/* =========================================
   FLOATING BUBBLES
========================================= */

.bubble{

    position:absolute;

    border-radius:50%;

    background:rgba(255,255,255,0.05);

    backdrop-filter:blur(10px);

    animation:floatBubble linear infinite;
}

.bubble1{

    width:120px;
    height:120px;

    left:8%;
    top:18%;

    animation-duration:10s;
}

.bubble2{

    width:70px;
    height:70px;

    right:10%;
    top:28%;

    animation-duration:8s;
}

.bubble3{

    width:160px;
    height:160px;

    bottom:10%;
    left:40%;

    animation-duration:14s;
}

.bubble4{

    width:90px;
    height:90px;

    bottom:18%;
    right:20%;

    animation-duration:9s;
}


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

@keyframes floatBubble{

    0%{
        transform:translateY(0px);
    }

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

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


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

@media(max-width:991px){

    .calling-container{

        grid-template-columns:1fr;

        gap:45px;
    }

    .calling-content h2{

        font-size:56px;
    }

}


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

@media(max-width:480px){

    .hbi-calling{

        min-height:auto;

        padding:80px 15px;
    }

    .calling-content h2{

        font-size:38px;

        line-height:1.1;

        letter-spacing:-1px;
    }

    .calling-content p{

        font-size:16px;

        line-height:1.8;
    }

    .calling-stats{

        grid-template-columns:1fr;
    }

    .stat-card{

        padding:35px 24px;
    }

    .stat-card h3{

        font-size:42px;
    }

}

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

.hbi-footer{

    position:relative;

    overflow:hidden;

    color:#ffffff;

    padding-top:90px;

    background:linear-gradient(
        to bottom,
        rgba(113,0,20,0.82),
        rgba(48,55,62,0.92)
    );
}


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

.footer-bg{

    position:absolute;
    inset:0;
}

.footer-bg img{

    width:100%;
    height:100%;

    object-fit:cover;

    transform:scale(1.05);

    filter:brightness(0.85);
}

.footer-overlay{

    position:absolute;
    inset:0;

    background:linear-gradient(
        to bottom,
        rgba(113,0,20,0.45),
        rgba(22,22,22,0.72)
    );
}


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

.footer-content{

    position:relative;
    z-index:2;
}


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

.footer-top{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:30px;

    margin-bottom:70px;
}


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

.footer-brand img{

    width:260px;

    margin-bottom:20px;
}

.footer-brand p{

    font-size:18px;

    color:rgba(255,255,255,0.75);

    line-height:1.8;
}


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

.footer-social{

    text-align:right;
}

.footer-social span{

    display:block;

    margin-bottom:18px;

    font-size:13px;

    letter-spacing:3px;

    text-transform:uppercase;

    color:#b38e71;
}

.social-icons{

    display:flex;

    justify-content:flex-end;

    gap:14px;
}

.social-icons a{

    width:52px;
    height:52px;

    display:flex;

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

    border-radius:50%;

    background:rgba(255,255,255,0.08);

    color:#ffffff;

    text-decoration:none;

    font-size:18px;

    backdrop-filter:blur(8px);

    transition:0.4s ease;
}

.social-icons a:hover{

    background:#710014;

    transform:translateY(-5px);
}


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

.footer-cta{

    text-align:center;

    margin-bottom:80px;
}

.footer-cta h2{

    font-size:72px;

    line-height:1.05;

    letter-spacing:-3px;

    margin-bottom:40px;

    font-weight:700;
}


/* buttons */

.footer-buttons{

    display:flex;

    justify-content:center;

    gap:22px;

    flex-wrap:wrap;
}

.footer-btn{

    padding:18px 42px;

    background:rgba(255,255,255,0.10);

    border:1px solid rgba(255,255,255,0.12);

    color:#ffffff;

    text-decoration:none;

    font-size:14px;

    letter-spacing:2px;

    text-transform:uppercase;

    backdrop-filter:blur(8px);

    transition:0.4s ease;
}

.footer-btn:hover{

    background:#710014;

    border-color:#710014;

    transform:translateY(-5px);
}


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

.footer-links-grid{

    display:grid;

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

    gap:50px;

    padding-bottom:55px;

    border-bottom:1px solid rgba(255,255,255,0.08);
}


/* column */

.footer-column h4{

    font-size:18px;

    margin-bottom:22px;

    color:#ffffff;
}

.footer-column a,
.footer-column p{

    display:block;

    margin-bottom:14px;

    color:rgba(255,255,255,0.72);

    text-decoration:none;

    line-height:1.8;

    transition:0.3s ease;
}

.footer-column a:hover{

    color:#b38e71;

    transform:translateX(4px);
}


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

.footer-bottom{

    padding:28px 0;

    text-align:center;
}

.footer-bottom p{

    font-size:14px;

    color:rgba(255,255,255,0.55);
}


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

@media(max-width:991px){

    .footer-top{

        flex-direction:column;

        align-items:flex-start;
    }

    .footer-social{

        text-align:left;
    }

    .social-icons{

        justify-content:flex-start;
    }

    .footer-cta h2{

        font-size:52px;
    }

    .footer-links-grid{

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

}


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

@media(max-width:480px){

    .hbi-footer{

        padding-top:70px;
    }

    .footer-top{

        margin-bottom:50px;
    }

    .footer-brand img{

        width:210px;
    }

    .footer-brand p{

        font-size:15px;
    }

    .footer-cta{

        margin-bottom:60px;
    }

    .footer-cta h2{

        font-size:34px;

        line-height:1.15;

        letter-spacing:-1px;
    }

    .footer-buttons{

        flex-direction:column;

        gap:14px;
    }

    .footer-btn{

        width:100%;

        text-align:center;

        padding:16px 20px;
    }

    .footer-links-grid{

        grid-template-columns:1fr;

        gap:35px;
    }

    .footer-bottom{

        padding:22px 0;
    }

}



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

.welcome-hero{

    position:relative;

    height:560px;

    overflow:hidden;

    display:flex;

    align-items:center;
}


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

.welcome-bg{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    z-index:0;

    transform:scale(1.02);
}


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

.welcome-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(10,10,10,0.84) 12%,
        rgba(10,10,10,0.46) 58%,
        rgba(10,10,10,0.16) 100%
    );

    z-index:1;
}


/* =========================================
   FLOATING LIGHTS
========================================= */

.floating-light{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    opacity:0.22;

    z-index:2;

    animation:floatLight 8s ease-in-out infinite;
}

.light-one{

    width:300px;
    height:300px;

    background:#710014;

    top:-120px;
    right:-100px;
}

.light-two{

    width:220px;
    height:220px;

    background:#b38e71;

    bottom:-80px;
    left:-50px;

    animation-delay:2s;
}


/* floating animation */

@keyframes floatLight{

    0%{
        transform:translateY(0px);
    }

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

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


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

.welcome-hero .container{

    position:relative;

    z-index:5;
}

.welcome-content{

    max-width:620px;

    color:#ffffff;

    padding-top:30px;
}


/* mini text */

.welcome-mini{

    display:inline-block;

    margin-bottom:16px;

    font-size:10px;

    letter-spacing:5px;

    text-transform:uppercase;

    color:#d8b08f;
}


/* heading */

.welcome-content h1{

    font-size:76px;

    line-height:0.94;

    letter-spacing:-3px;

    margin-bottom:14px;

    font-weight:400;

    color:#f2f1ef;

    text-shadow:
    0 10px 30px rgba(0,0,0,0.22);
}

.welcome-content h1 span{

    color:#d8b08f;

    font-style:italic;

    font-weight:500;
}


/* paragraph */

.welcome-content p{

    font-size:17px;

    line-height:1.9;

    color:#161616;

    max-width:540px;

    margin-bottom:34px;
}


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

.welcome-buttons{

    display:flex;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;
}


/* primary button */

.welcome-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:16px 34px;

    background:#710014;

    color:#ffffff;

    text-decoration:none;

    border-radius:60px;

    font-size:14px;

    font-weight:600;

    letter-spacing:1px;

    position:relative;

    z-index:10;

    transition:0.35s ease;

    box-shadow:
    0 14px 32px rgba(113,0,20,0.34);
}

.welcome-btn:hover{

    transform:translateY(-4px);

    background:#92021f;

    box-shadow:
    0 18px 40px rgba(113,0,20,0.42);
}


/* icon */

.welcome-btn i{

    font-size:13px;

    transition:0.35s ease;
}

.welcome-btn:hover i{

    transform:translateX(4px);
}


/* secondary */

.welcome-outline{

    color:#f2f1ef;

    text-decoration:none;

    font-size:14px;

    letter-spacing:1px;

    display:flex;

    align-items:center;

    transition:0.35s ease;
}

.welcome-outline:hover{

    color:#d8b08f;
}


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

.scroll-down{

    position:absolute;

    bottom:22px;

    left:50%;

    transform:translateX(-50%);

    z-index:5;
}

.scroll-down span{

    display:block;

    width:28px;
    height:48px;

    border:2px solid rgba(255,255,255,0.72);

    border-radius:30px;

    position:relative;
}

.scroll-down span::before{

    content:"";

    position:absolute;

    top:8px;
    left:50%;

    transform:translateX(-50%);

    width:5px;
    height:10px;

    border-radius:20px;

    background:#ffffff;

    animation:scrollAnim 2s infinite;
}


/* scroll animation */

@keyframes scrollAnim{

    0%{
        opacity:0;
        transform:translate(-50%,0);
    }

    50%{
        opacity:1;
    }

    100%{
        opacity:0;
        transform:translate(-50%,12px);
    }
}


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

@media(max-width:991px){

    .welcome-hero{

        height:500px;
    }

    .welcome-content h1{

        font-size:58px;
    }

    .welcome-content p{

        font-size:16px;
    }
}


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

@media(max-width:600px){

    .welcome-hero{

        height:auto;

        padding:120px 0 90px;
    }

    .welcome-content{

        padding-top:10px;
    }

    .welcome-content h1{

        font-size:42px;

        line-height:1.05;

        letter-spacing:-2px;
    }

    .welcome-content p{

        font-size:15px;

        line-height:1.8;
    }

    .welcome-buttons{

        gap:14px;
    }

    .welcome-btn{

        padding:14px 26px;

        font-size:13px;
    }

    .scroll-down{

        display:none;
    }
}

/* =========================================
   STORY
========================================= */

.welcome-story{

    padding:120px 0;

    background:#f2f1ef;
}

.story-grid{

    display:grid;

    grid-template-columns:1.1fr 1fr;

    gap:70px;

    align-items:center;
}

.story-image{

    position:relative;

    overflow:hidden;

    border-radius:34px;

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

.story-image img{

    width:100%;

    display:block;
}

.story-badge{

    position:absolute;

    top:20px;
    left:20px;

    padding:10px 18px;

    background:rgba(255,255,255,0.16);

    backdrop-filter:blur(10px);

    border-radius:40px;

    color:#ffffff;

    letter-spacing:2px;

    font-size:10px;
}


/* content */

.section-mini{

    display:inline-block;

    margin-bottom:16px;

    font-size:11px;

    letter-spacing:4px;

    text-transform:uppercase;

    color:#b38e71;
}

.story-content h2{

    font-size:58px;

    line-height:1.05;

    margin-bottom:24px;

    color:#161616;
}

.story-content p{

    font-size:18px;

    line-height:1.9;

    color:#30373e;

    margin-bottom:40px;
}


/* features */

.welcome-features{

    display:grid;

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

    gap:20px;
}

.feature-box{

    padding:28px;

    background:#ffffff;

    border-radius:24px;

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

    transition:0.35s ease;
}

.feature-box:hover{

    transform:translateY(-6px);
}

.feature-box i{

    font-size:22px;

    color:#710014;

    margin-bottom:16px;
}

.feature-box h4{

    font-size:18px;

    color:#161616;
}


/* =========================================
   CALLING SECTION
========================================= */

.calling-section{

    position:relative;

    min-height:520px;

    display:flex;

    align-items:center;

    overflow:hidden;

    border-radius:40px 40px 0 0;
}


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

.calling-bg{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    transform:scale(1.05);
}


/* =========================================
   OVERLAYS
========================================= */

.calling-dark-overlay{

    position:absolute;

    inset:0;

    background:rgba(10,10,10,0.62);

    z-index:1;
}


/* cinematic gradient */

.calling-gradient-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        135deg,
        rgba(113,0,20,0.45),
        rgba(10,10,10,0.2),
        rgba(179,142,113,0.12)
    );

    z-index:2;
}


/* =========================================
   FLOATING LIGHTS
========================================= */

.calling-light{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    opacity:0.28;

    z-index:2;

    animation:callingFloat 8s ease-in-out infinite;
}

.calling-light.light-one{

    width:320px;
    height:320px;

    background:#710014;

    top:-120px;
    right:-100px;
}

.calling-light.light-two{

    width:240px;
    height:240px;

    background:#b38e71;

    bottom:-100px;
    left:-80px;

    animation-delay:2s;
}


/* animation */

@keyframes callingFloat{

    0%{
        transform:translateY(0px);
    }

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

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


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

.calling-content{

    position:relative;

    z-index:5;

    max-width:760px;

    color:#ffffff;
}


/* mini */

.section-mini.light{

    display:inline-block;

    margin-bottom:18px;

    font-size:11px;

    letter-spacing:5px;

    text-transform:uppercase;

    color:#d8b08f;
}


/* heading */

.calling-content h2{

    font-size:72px;

    line-height:0.95;

    letter-spacing:-3px;

    margin-bottom:24px;

    color:#f2f1ef;

    text-shadow:
    0 10px 30px rgba(0,0,0,0.24);
}


/* paragraph */

.calling-content p{

    font-size:19px;

    line-height:1.9;

    color:rgba(255,255,255,0.88);

    max-width:620px;

    margin-bottom:36px;
}


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

.calling-buttons{

    display:flex;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;
}


/* primary */

.calling-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:18px 36px;

    background:#710014;

    color:#ffffff;

    text-decoration:none;

    border-radius:60px;

    font-size:14px;

    letter-spacing:1px;

    font-weight:600;

    transition:0.35s ease;

    box-shadow:
    0 16px 35px rgba(113,0,20,0.32);
}

.calling-btn:hover{

    transform:translateY(-4px);

    background:#92021f;
}


/* outline */

.calling-outline{

    color:#f2f1ef;

    text-decoration:none;

    font-size:14px;

    letter-spacing:1px;

    transition:0.35s ease;
}

.calling-outline:hover{

    color:#d8b08f;
}


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

@media(max-width:991px){

    .calling-content h2{

        font-size:54px;
    }

    .calling-section{

        min-height:460px;
    }
}


@media(max-width:600px){

    .calling-section{

        min-height:auto;

        padding:90px 0;
    }

    .calling-content h2{

        font-size:40px;

        line-height:1.05;
    }

    .calling-content p{

        font-size:16px;

        line-height:1.8;
    }

    .calling-buttons{

        gap:14px;
    }

    .calling-btn{

        padding:15px 28px;
    }
}
/* =========================================
   MOBILE
========================================= */

@media(max-width:991px){

    .story-grid{

        grid-template-columns:1fr;
    }

    .welcome-content h1{

        font-size:62px;
    }

    .story-content h2,
    .calling-content h2{

        font-size:46px;
    }
}

@media(max-width:600px){

    .welcome-content h1{

        font-size:46px;

        line-height:1.1;
    }

    .welcome-content p,
    .story-content p,
    .calling-content p{

        font-size:16px;
    }

    .welcome-features{

        grid-template-columns:1fr;
    }

    .story-content h2,
    .calling-content h2{

        font-size:34px;
    }
}



/* =========================================
   PRINCIPAL SECTION
========================================= */

.principal-message{

    position:relative;

    margin-top:-120px;

    padding-bottom:110px;

    z-index:20;
}


/* layout */

.principal-wrapper{

    display:grid;

    grid-template-columns:340px 1fr;

    background:#f8f5f0;

    border-radius:40px;

    overflow:hidden;

    box-shadow:
    0 30px 60px rgba(0,0,0,0.12);
}



/* =========================================
   LEFT INFO BOXES
========================================= */

.principal-info-grid{

    background:#f2f1ef;

    padding:28px;

    display:grid;

    grid-template-columns:1fr;

    gap:18px;
}


/* info box */

.principal-info-box{

    padding:26px 24px;

    background:#ffffff;

    border-radius:24px;

    transition:0.35s ease;

    box-shadow:
    0 10px 24px rgba(0,0,0,0.05);
}

.principal-info-box:hover{

    transform:translateY(-5px);
}


/* icon */

.principal-info-box i{

    font-size:20px;

    color:#710014;

    margin-bottom:14px;
}


/* title */

.principal-info-box h4{

    font-size:18px;

    margin-bottom:10px;

    color:#161616;
}


/* text */

.principal-info-box p{

    font-size:14px;

    line-height:1.8;

    color:#555;
}



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

.principal-content{

    position:relative;

    padding:75px;

    background:
    repeating-linear-gradient(
        to bottom,
        #f8f5f0,
        #f8f5f0 36px,
        #ece6dc 37px
    );
}


/* notebook line */

.principal-content::before{

    content:"";

    position:absolute;

    top:0;
    left:58px;

    width:2px;
    height:100%;

    background:rgba(113,0,20,0.12);
}


/* mini */

.section-mini{

    display:inline-block;

    margin-bottom:16px;

    font-size:11px;

    letter-spacing:4px;

    text-transform:uppercase;

    color:#b38e71;
}


/* heading */

.principal-content h2{

    font-size:46px;

    line-height:1;

    margin-bottom:28px;

    color:#161616;

    letter-spacing:-2px;
}


/* text */

.principal-text{

    position:relative;

    font-size:18px;

    line-height:2.1;

    color:#30373e;

    margin-bottom:50px;

    max-width:760px;
}


/* quote */

.principal-text::before{

    content:"“";

    position:absolute;

    top:-45px;
    left:-14px;

    font-size:120px;

    color:rgba(179,142,113,0.14);

    line-height:1;
}



/* =========================================
   SIGN AREA
========================================= */

.principal-sign-area{

    display:flex;

    align-items:center;

    gap:24px;

    margin-top:10px;
}


/* photo */

.principal-photo{

    width:90px;
    height:90px;

    border-radius:50%;

    overflow:hidden;

    flex-shrink:0;

    border:4px solid #ffffff;

    box-shadow:
    0 10px 24px rgba(0,0,0,0.08);
}

.principal-photo img{

    width:100%;
    height:100%;

    object-fit:cover;
}


/* sign */

.principal-sign img{

    width:160px;

    margin-bottom:10px;
}

.principal-sign h4{

    font-size:22px;

    margin-bottom:6px;

    color:#710014;
}

.principal-sign span{

    color:#666;

    font-size:15px;
}

/* =========================================
   PRINCIPAL LETTER
========================================= */

.principal-letter{

    position:relative;

    max-width:760px;

    padding-top:20px;
}


/* pen image */

.letter-pen{

    position:absolute;

    top:-40px;
    right:-20px;

    width:170px;

    opacity:0.45;

    transform:rotate(-8deg);

    pointer-events:none;

    animation:penFloat 6s ease-in-out infinite;
}


/* floating animation */

@keyframes penFloat{

    0%{
        transform:translateY(0px) rotate(-8deg);
    }

    50%{
        transform:translateY(-10px) rotate(-5deg);
    }

    100%{
        transform:translateY(0px) rotate(-8deg);
    }
}


/* mobile */

@media(max-width:600px){

    .letter-pen{

        width:110px;

        top:-10px;
        right:0;

        opacity:0.08;
    }
}


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

@media(max-width:991px){

    .principal-wrapper{

        grid-template-columns:1fr;
    }

    .principal-content{

        padding:45px;
    }

    .principal-content h2{

        font-size:42px;
    }
}


@media(max-width:600px){

    .principal-message{

        margin-top:-70px;
    }

    .principal-content{

        padding:30px;
    }

    .principal-content::before{

        left:30px;
    }

    .principal-content h2{

        font-size:32px;
    }

    .principal-text{

        font-size:15px;

        line-height:1.9;
    }

    .principal-sign-area{

        flex-direction:column;

        align-items:flex-start;
    }
}

/* =========================================
   PRINCIPAL LETTER
========================================= */

.principal-letter{

    position:relative;

    max-width:760px;

    font-size:15px;

    line-height:2.05;

    color:#30373e;

    font-style:italic;

    font-weight:300;

    font-family:'Cedarville Cursive', cursive;

    letter-spacing:0.2px;

    z-index:2;
}


/* paragraph spacing */

.principal-letter p{

    margin-bottom:24px;
}


/* greeting */

.letter-greeting{

    font-size:24px;

    color:#710014;

    margin-bottom:30px;

    font-family:'Cedarville Cursive', cursive;

    font-style:normal;

    line-height:1.3;
}


/* highlight */

.principal-letter span{

    color:#710014;

    font-weight:500;
}


/* closing */

.letter-closing{

    margin-top:36px;

    font-size:20px;

    color:#161616;

    font-family:'Cedarville Cursive', cursive;

    font-style:normal;

    line-height:1.4;
}


/* elegant quote */

.principal-letter::before{

    

    position:absolute;

    top:-55px;
    left:-24px;

    font-size:150px;

    line-height:1;

    color:rgba(179,142,113,0.14);

    font-style:normal;

    font-family:'Cedarville Cursive', cursive;

    z-index:-1;
}


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

@media(max-width:600px){

    .principal-letter{

        font-size:15px;

        line-height:1.9;
    }

    .letter-greeting{

        font-size:24px;
    }

    .letter-closing{

        font-size:22px;
    }

    .principal-letter::before{

        font-size:110px;

        top:-40px;
        left:-12px;
    }
}

/* =========================================
   FIX HORIZONTAL SCROLL
========================================= */

html,
body{

    overflow-x:hidden;
}


/* prevent overflow */

section{

    overflow:hidden;
}


/* images */

img{

    max-width:100%;

    display:block;
}

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

.welcome-hero{

    position:relative;

    height:480px;

    overflow:hidden;

    display:flex;

    align-items:center;

    padding:80px 0 60px;
}


/* content */

.welcome-content{

    position:relative;

    z-index:5;

    

    
}


/* heading spacing */

.welcome-content h1{

    margin-bottom:24px;
}


/* paragraph */

.welcome-content p{

    margin-bottom:38px;

    max-width:620px;
}


/* button */

.welcome-btn{

    display:inline-flex;
}


/* =========================================
   PAGE SECTION
========================================= */

.about-page{

    width:100%;
    overflow:hidden;
    background:#f8f5f6;
}


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

.container{

    width:90%;
    max-width:1250px;
    margin:auto;
}


/* =========================================
   VISION & MISSION SECTION
========================================= */

.vision-mission{

    padding:100px 0;
}

.vm-wrapper{

    display:grid;
    grid-template-columns:420px 1fr;
    height:100vh; /* full screen height */
    max-height:900px;
    min-height:650px;
    background:#f1ecee;
    overflow:hidden;
    border-radius:30px;
    position:relative;
}


/* LEFT IMAGE */

.vm-image{

    position:relative;
    overflow:hidden;
}

.vm-image img{

    width:100%;
    height:100%;
    object-fit:cover;
}


/* RIGHT CONTENT */

.vm-content{

    padding:90px 90px 80px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    position:relative;
}

.vm-top{

    position:absolute;
    top:70px;
    right:90px;
    font-size:14px;
    letter-spacing:6px;
    color:#710014;
    text-transform:uppercase;
    font-weight:600;
}

.vm-title{

    font-size:60px;
    line-height:0.92;
    font-weight:300;
    color:#710014;
    margin-bottom:40px;
    font-family:serif;
}

.vm-text{

    max-width:400px;
}

.vm-text p{

    font-size:18px;
    line-height:1.9;
    color:#161616;
    margin-bottom:28px;
}

@media(max-width:992px){

    .vm-wrapper{

        grid-template-columns:1fr;
        height:auto;
        min-height:auto;
    }

    .vm-image{

        height:350px;
    }
}

/* =========================================
   VISION CARDS
========================================= */

.vision-cards{

    margin-top:60px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

.vision-card{

    background:#ffffff;
    padding:40px;
    border-radius:24px;
    transition:0.4s ease;
    box-shadow:0 10px 30px rgba(0,0,0,0.06);
    border-top:5px solid #710014;
}

.vision-card:hover{

    transform:translateY(-8px);
}

.vision-card h3{

    font-size:30px;
    margin-bottom:20px;
    color:#710014;
    font-family:serif;
}

.vision-card p{

    font-size:18px;
    line-height:1.8;
    color:#161616;
}


/* =========================================
   FOUNDER SECTION
========================================= */

.founder-section{

    padding:110px 0;
    background:#ffffff;
}

.founder-wrapper{

    display:grid;
    grid-template-columns:500px 1fr;
    gap:70px;
    align-items:center;
}


/* IMAGE STYLE */

.founder-image{

    position:relative;
}

.founder-image::before{

    content:"";
    position:absolute;
    width:100%;
    height:100%;
    border:2px solid #710014;
    top:25px;
    left:25px;
    border-radius:30px;
    z-index:1;
}

.founder-image img{

    width:100%;
    border-radius:30px;
    position:relative;
    z-index:2;
    display:block;
    object-fit:cover;
}


/* CONTENT */

.founder-content span{

    display:inline-block;
    margin-bottom:18px;
    letter-spacing:5px;
    color:#710014;
    font-size:14px;
    text-transform:uppercase;
    font-weight:600;
}

.founder-content h2{

    font-size:62px;
    line-height:1;
    margin-bottom:25px;
    color:#710014;
    font-family:serif;
    font-weight:300;
}

.founder-content p{

    font-size:18px;
    line-height:1.9;
    color:#161616;
    margin-bottom:22px;
}

.founder-name{

    margin-top:35px;
}

.founder-name h4{

    font-size:28px;
    margin-bottom:5px;
    color:#710014;
}

.founder-name small{

    font-size:16px;
    color:#161616;
    opacity:0.7;
}

.founder-action{

    margin-top:35px;
}

.history-btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:16px 34px;
    background:#710014;
    color:#fff;
    text-decoration:none;
    border-radius:50px;
    font-size:15px;
    letter-spacing:2px;
    text-transform:uppercase;
    transition:0.4s ease;
    font-weight:600;
}

.history-btn:hover{

    background:#161616;
    transform:translateY(-4px);
}

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

@media(max-width:992px){

    .vm-wrapper,
    .founder-wrapper{

        grid-template-columns:1fr;
    }

    .vm-image{

        height:500px;
    }

    .vm-content{

        padding:70px 40px;
    }

    .vm-title{

        font-size:80px;
    }

    .founder-content h2{

        font-size:56px;
    }
}

@media(max-width:768px){

    .vision-cards{

        grid-template-columns:1fr;
    }

    .vm-title{

        font-size:60px;
    }

    .vm-text p,
    .vision-card p,
    .founder-content p{

        font-size:18px;
    }

    .founder-content h2{

        font-size:44px;
    }

    .vm-top{

        right:40px;
    }
}

/* =========================================
   HISTORY PAGE
========================================= */

.history-page{

    width:100%;
    overflow:hidden;
    background:#f8f5f6;
}


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

.container{

    width:90%;
    max-width:1250px;
    margin:auto;
}

.small-title{

    display:inline-block;
    font-size:14px;
    letter-spacing:5px;
    color:#710014;
    text-transform:uppercase;
    margin-bottom:20px;
    font-weight:600;
}


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

.history-hero{

    padding:140px 0 120px;
    text-align:center;
    background:linear-gradient(to bottom,#710014 0%, #5a0010 100%);
    color:#fff;
    position:relative;
}

.history-tag{

    display:inline-block;
    padding:12px 28px;
    border:1px solid rgba(255,255,255,0.2);
    border-radius:50px;
    font-size:13px;
    letter-spacing:4px;
    margin-bottom:30px;
    text-transform:uppercase;
}

.history-hero h1{

    font-size:110px;
    line-height:0.95;
    margin-bottom:30px;
    font-weight:300;
    font-family:serif;
}

.history-hero p{

    font-size:22px;
    color:rgba(255,255,255,0.85);
    max-width:700px;
    margin:auto;
    line-height:1.8;
}


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

.history-section{

    padding:120px 0;
}

.alt-bg{

    background:#ffffff;
}

.history-grid{

    display:grid;
    grid-template-columns:1fr 480px;
    gap:80px;
    align-items:center;
}

.history-grid.reverse{

    grid-template-columns:480px 1fr;
}


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

.history-content h2{

    font-size:70px;
    line-height:1;
    margin-bottom:30px;
    color:#710014;
    font-weight:300;
    font-family:serif;
}

.history-content p{

    font-size:20px;
    line-height:1.95;
    color:#161616;
    margin-bottom:24px;
}


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

.history-image{

    position:relative;
}

.history-image::before{

    content:"";
    position:absolute;
    width:100%;
    height:100%;
    border:2px solid #710014;
    border-radius:30px;
    top:25px;
    left:25px;
}

.history-image img{

    width:100%;
    border-radius:30px;
    position:relative;
    z-index:2;
    display:block;
    object-fit:cover;
    box-shadow:0 20px 40px rgba(0,0,0,0.08);
}


/* =========================================
   QUOTE BOX
========================================= */

.history-quote{

    background:#710014;
    color:#fff;
    text-align:center;
    padding:50px;
    border-radius:30px;
    margin:20px auto 80px;
    font-size:34px;
    line-height:1.6;
    font-family:serif;
    box-shadow:0 20px 40px rgba(113,0,20,0.15);
}

.final-quote{

    margin-top:40px;
    margin-bottom:120px;
}


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

.history-stats{

    padding:120px 0;
    background:#161616;
}

.stats-header{

    text-align:center;
    margin-bottom:70px;
}

.stats-header h2{

    font-size:70px;
    color:#ffffff;
    font-weight:300;
    font-family:serif;
}

.stats-grid{

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

.stat-box{

    background:#1f1f1f;
    padding:50px 30px;
    border-radius:26px;
    text-align:center;
    border-top:4px solid #710014;
    transition:0.4s ease;
}

.stat-box:hover{

    transform:translateY(-10px);
}

.stat-box h3{

    font-size:42px;
    margin-bottom:14px;
    color:#ffffff;
    font-family:serif;
}

.stat-box p{

    font-size:18px;
    color:rgba(255,255,255,0.75);
    line-height:1.7;
}


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

@media(max-width:1100px){

    .history-grid,
    .history-grid.reverse{

        grid-template-columns:1fr;
    }

    .history-image{

        max-width:600px;
        margin:auto;
    }

    .history-content{

        text-align:center;
    }
}

@media(max-width:992px){

    .stats-grid{

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

    .history-hero h1{

        font-size:80px;
    }

    .history-content h2,
    .stats-header h2{

        font-size:54px;
    }
}

@media(max-width:768px){

    .history-section{

        padding:90px 0;
    }

    .history-hero{

        padding:120px 0 90px;
    }

    .history-hero h1{

        font-size:58px;
    }

    .history-hero p{

        font-size:18px;
    }

    .history-content h2,
    .stats-header h2{

        font-size:42px;
    }

    .history-content p{

        font-size:18px;
    }

    .stats-grid{

        grid-template-columns:1fr;
    }

    .history-quote{

        font-size:26px;
        padding:40px 25px;
    }
}


/* =========================================
   ACADEMICS PAGE
========================================= */

.academics-page{

    width:100%;
    overflow:hidden;
    background:#f8f5f6;
}


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

.container{

    width:92%;
    max-width:1450px;
    margin:auto;
}


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

.academics-hero{

    width:100%;
    height:270px;
    overflow:hidden;
    position:relative;
}

.academics-hero img{

    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}



/* =========================================
   FACULTY TOP SECTION
========================================= */

.faculty-top-section{

    position:relative;
    z-index:50;
    margin-top:-240px;
    margin-bottom:-90px;
}


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

.faculty-top-card{

    width:340px;
    background:linear-gradient(145deg,#b38e71,#a57f63);
    padding:40px 32px 35px;
    border-radius:38px;
    text-align:center;
    margin-left:auto;
    margin-right:40px;
    position:relative;
    overflow:hidden;

    box-shadow:
    0 20px 45px rgba(0,0,0,0.12),
    0 8px 20px rgba(179,142,113,0.25);

    animation:facultyFloat 5s ease-in-out infinite;
}


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

.faculty-top-card::before{

    content:"";
    position:absolute;
    width:180px;
    height:180px;
    border-radius:50%;
    background:rgba(255,255,255,0.08);
    top:-70px;
    right:-70px;
}

.faculty-top-card::after{

    content:"";
    position:absolute;
    width:90px;
    height:90px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,0.12);
    bottom:28px;
    left:28px;
}


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

.faculty-badge{

    display:inline-block;
    padding:10px 18px;
    border-radius:50px;
    background:rgba(255,255,255,0.12);
    color:#ffffff;
    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:28px;
    position:relative;
    z-index:2;
}


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

.faculty-image-wrap{

    width:100px;
    height:100px;
    margin:auto;
    margin-bottom:28px;
    position:relative;
    z-index:2;
}


/* IMAGE */

.faculty-image-wrap img{

    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
    border:6px solid #ffffff;
    background:#ffffff;

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

    transition:0.5s ease;
}


/* IMAGE HOVER */

.faculty-top-card:hover .faculty-image-wrap img{

    transform:scale(1.05) translateY(-6px);
}



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

.faculty-top-card h3{

    font-size:18px;
    line-height:1.45;
    margin-bottom:24px;
    color:#ffffff;
    font-family:serif;
    font-weight:400;
    position:relative;
    z-index:2;
}


/* =========================================
   NAME
========================================= */

.faculty-top-card h4{

    display:inline-block;
    background:#161616;
    color:#ffffff;
    padding:14px 24px;
    border-radius:14px;
    font-size:18px;
    margin-bottom:16px;
    font-weight:500;
    position:relative;
    z-index:2;
}


/* =========================================
   EMAIL
========================================= */

.faculty-top-card p{

    font-size:15px;
    color:rgba(255,255,255,0.92);
    line-height:1.7;
    margin-bottom:24px;
    position:relative;
    z-index:2;
}


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

.faculty-social{

    display:flex;
    justify-content:center;
    gap:14px;
    position:relative;
    z-index:2;
}

.faculty-social a{

    width:34px;
    height:34px;
    border-radius:50%;
    background:#161616;
    color:#ffffff;

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

    text-decoration:none;
    transition:0.4s ease;
    font-size:16px;
}

.faculty-social a:hover{

    background:#710014;
    transform:translateY(-5px);
}


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

@keyframes facultyFloat{

    0%{

        transform:translateY(0px);
    }

    50%{

        transform:translateY(-10px);
    }

    100%{

        transform:translateY(0px);
    }
}

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

@keyframes facultyFloat{

    0%{

        transform:translateY(0px);
    }

    50%{

        transform:translateY(-10px);
    }

    100%{

        transform:translateY(0px);
    }
}


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

@media(max-width:992px){

    .faculty-top-section{

        margin-top:-140px;
        margin-bottom:-40px;
    }

    .faculty-top-card{

        width:100%;
        max-width:340px;
        margin:auto;
    }
}

/* =========================================
   MAIN SECTION
========================================= */

.academics-main{

    padding:20px 0 100px;
}

/* =========================================
   MAIN SECTION MOVE UP
========================================= */

.academics-main{

    padding-top:0;
    padding-bottom:100px;
}

/* =========================================
   2 COLUMN LAYOUT
========================================= */

.academics-layout{

    display:grid;
    grid-template-columns:250px 1fr;
    gap:35px;
    align-items:start;
    margin-top:0;
}


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

.academics-sidebar{

    position:relative;
    z-index:100;
    
}

.sidebar-card{

    background:#ffffff;
    padding:24px;
    border-radius:30px;
    box-shadow:0 15px 40px rgba(0,0,0,0.05);
    margin-bottom:28px;
}

.program-btn{

    width:100%;
    border:none;
    background:#f4f1f2;
    margin-bottom:16px;
    padding:18px 20px;
    border-radius:18px;
    text-align:left;
    cursor:pointer;
    font-size:15px;
    font-weight:600;
    color:#161616;
    transition:0.4s ease;
    display:flex;
    align-items:center;
    gap:14px;
}

.program-btn:last-child{

    margin-bottom:0;
}

.program-btn i{

    color:#710014;
    font-size:18px;
}

.program-btn:hover,
.program-btn.active{

    background:#710014;
    color:#ffffff;
    transform:translateX(5px);
}

.program-btn:hover i,
.program-btn.active i{

    color:#ffffff;
}


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

.sidebar-links{

    background:#161616;
    padding:24px;
    border-radius:30px;
    display:flex;
    flex-direction:column;
    gap:16px;
}

.sidebar-links a{

    text-decoration:none;
    color:#ffffff;
    padding:16px 18px;
    border-radius:16px;
    background:rgba(255,255,255,0.05);
    transition:0.4s ease;
    display:flex;
    align-items:center;
    gap:12px;
    font-size:15px;
    font-weight:500;
}

.sidebar-links a:hover{

    background:#710014;
    transform:translateX(5px);
}


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

.academics-center{

    width:100%;
    background:#ffffff;
    border-radius:40px;
    padding:60px;
    box-shadow:0 15px 40px rgba(0,0,0,0.05);
    overflow:hidden;
}

.program-content{

    display:none;
    animation:fadeUp 0.5s ease;
}

.program-content.active{

    display:block;
}

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(20px);
    }

    to{

        opacity:1;
        transform:translateY(0);
    }
}


/* =========================================
   PROGRAM INTRO
========================================= */

.program-intro{

    display:flex;
    align-items:center;
    gap:28px;
    margin-bottom:40px;
}

.program-intro img{

    width:120px;
    height:120px;
    border-radius:50%;
    object-fit:cover;
    border:5px solid #710014;
    box-shadow:0 12px 25px rgba(113,0,20,0.15);
    flex-shrink:0;
}

.program-intro span{

    display:inline-block;
    color:#710014;
    letter-spacing:4px;
    font-size:13px;
    margin-bottom:14px;
    text-transform:uppercase;
    font-weight:600;
}

.program-intro h2{

    font-size:44px;
    line-height:1.05;
    margin-bottom:18px;
    color:#161616;
    font-family:serif;
    font-weight:300;
}

.program-intro p{

    font-size:18px;
    line-height:1.9;
    color:#444;
}


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

.program-features{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    margin-top:35px;
}

.feature-item{

    background:#f7f3f4;
    padding:18px 20px;
    border-radius:18px;
    font-size:15px;
    font-weight:600;
    color:#161616;
    display:flex;
    align-items:center;
    gap:14px;
    transition:0.4s ease;
}

.feature-item i{

    width:42px;
    height:42px;
    border-radius:50%;
    background:#710014;
    color:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
}

.feature-item:hover{

    transform:translateY(-5px);
    background:#ffffff;
    box-shadow:0 12px 25px rgba(0,0,0,0.06);
}


/* =========================================
   WHY CHOOSE
========================================= */

.why-choose{

    margin-top:45px;
    padding:35px;
    background:#fff7f8;
    border-left:5px solid #710014;
    border-radius:24px;
}

.why-choose h3{

    font-size:30px;
    margin-bottom:18px;
    color:#710014;
    font-family:serif;
    font-weight:400;
}

.why-choose p{

    font-size:17px;
    line-height:1.9;
    color:#444;
}


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

.program-courses{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
    margin-top:35px;
}

.program-courses button{

    border:none;
    background:#710014;
    color:#ffffff;
    padding:22px;
    border-radius:22px;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:0.4s ease;
    box-shadow:0 12px 24px rgba(113,0,20,0.15);
}

.program-courses button:hover{

    background:#161616;
    transform:translateY(-8px);
}


/* =========================================
   ADMISSION SECTION
========================================= */

.admission-section{

    padding:0 0 120px;
}

.admission-box{

    background:linear-gradient(135deg,#710014,#4a0010);
    border-radius:40px;
    padding:70px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:50px;
    overflow:hidden;
    position:relative;
}

.admission-box::before{

    content:"";
    position:absolute;
    width:300px;
    height:300px;
    border-radius:50%;
    background:rgba(255,255,255,0.05);
    top:-120px;
    right:-90px;
}

.admission-content{

    position:relative;
    z-index:2;
}

.admission-content span{

    display:inline-block;
    color:#ffffff;
    letter-spacing:4px;
    font-size:13px;
    text-transform:uppercase;
    margin-bottom:16px;
}

.admission-content h2{

    font-size:58px;
    line-height:1.05;
    color:#ffffff;
    margin-bottom:24px;
    font-family:serif;
    font-weight:300;
}

.admission-content p{

    font-size:18px;
    line-height:1.9;
    color:rgba(255,255,255,0.85);
    max-width:700px;
}


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

.admission-buttons{

    display:flex;
    flex-direction:column;
    gap:18px;
    position:relative;
    z-index:2;
}

.download-btn,
.apply-btn{

    text-decoration:none;
    padding:18px 34px;
    border-radius:18px;
    font-size:15px;
    font-weight:600;
    transition:0.4s ease;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
}

.download-btn{

    background:#ffffff;
    color:#710014;
}

.apply-btn{

    background:#161616;
    color:#ffffff;
}

.download-btn:hover,
.apply-btn:hover{

    transform:translateY(-5px);
}


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

@media(max-width:992px){

    .academics-layout{

        grid-template-columns:1fr;
    }

    .program-intro{

        flex-direction:column;
        text-align:center;
    }

    .program-features{

        grid-template-columns:1fr;
    }

    .program-courses{

        grid-template-columns:1fr;
    }

    .faculty-top-card{

        margin:auto;
    }

    .admission-box{

        flex-direction:column;
        text-align:center;
        padding:50px 35px;
    }

    .admission-content h2{

        font-size:42px;
    }
}

@media(max-width:768px){

    .academics-center{

        padding:35px;
    }

    .program-intro h2{

        font-size:36px;
    }

    .why-choose{

        padding:25px;
    }
}

.sidebar-program{

    margin-bottom:24px;
}

.program-links{

    display:none;

    flex-direction:column;
    gap:10px;

    padding-left:18px;
    margin-top:16px;
}

.program-links.active-links{

    display:flex;
}

.program-links a{

    text-decoration:none;
    color:#666;
    font-size:13px;
    line-height:1.6;
    display:flex;
    align-items:center;
    gap:10px;
    transition:0.3s ease;
}

.program-links a i{

    color:#710014;
    font-size:11px;
}

.program-links a:hover{

    color:#710014;
    transform:translateX(4px);
}

/* =========================================
   PROGRAMS PAGE
========================================= */

.programs-page{

    width:100%;
    overflow:hidden;
    background:#f8f5f6;
}


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

.container{

    width:92%;
    max-width:1450px;
    margin:auto;
}


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

.programs-hero{

    width:100%;
    height:270px;
    overflow:hidden;
    position:relative;
}

.programs-hero img{

    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}


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

.course-top-section{

    position:relative;
    z-index:50;
    margin-top:-250px;
    margin-bottom:-120px;
}

.course-top-card{

    width:360px;
    background:#ffffff;
    padding:38px 34px;
    border-radius:38px;
    margin-left:auto;
    margin-right:40px;
    position:relative;
    overflow:hidden;

    box-shadow:
    0 20px 45px rgba(0,0,0,0.10),
    0 8px 18px rgba(0,0,0,0.05);

    animation:floatCard 5s ease-in-out infinite;
}

.course-top-card::before{

    content:"";
    position:absolute;
    width:180px;
    height:180px;
    border-radius:50%;
    background:rgba(113,0,20,0.05);
    top:-70px;
    right:-70px;
}

.course-badge{

    display:inline-block;
    padding:10px 18px;
    border-radius:50px;
    background:#710014;
    color:#ffffff;
    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:24px;
}

.course-top-card h2{

    font-size:26px;
    line-height:1.1;
    color:#161616;
    margin-bottom:28px;
    font-family:serif;
    font-weight:400;
}


/* META */

.course-meta{

    display:flex;
    align-items:center;
    gap:18px;

    margin:28px 0;
}

.meta-item{

    display:flex;
    align-items:center;
    gap:10px;

    background:#f4efef;

    padding:14px 22px;

    border-radius:16px;

    font-size:16px;
    font-weight:600;
    color:#161616;
}

.meta-item i{

    color:#710014;
    font-size:15px;
}
.course-meta div{

    flex:1;
    background:#f7f3f4;
    padding:18px;
    border-radius:18px;
    text-align:center;
}

.course-meta i{

    color:#710014;
    margin-bottom:10px;
    display:block;
    font-size:18px;
}

.course-meta span{

    font-size:15px;
    font-weight:600;
    color:#161616;
}


/* ACTION BUTTONS */

.course-actions{

    display:flex;
    flex-direction:column;
    gap:14px;
}

.apply-status,
.fees-btn{

    text-decoration:none;
    text-align:center;
    padding:16px;
    border-radius:16px;
    font-size:15px;
    font-weight:600;
    transition:0.4s ease;
}

.apply-status{

    background:#710014;
    color:#ffffff;
}

.fees-btn{

    background:#161616;
    color:#ffffff;
}

.apply-status:hover,
.fees-btn:hover{

    transform:translateY(-4px);
}


/* =========================================
   MAIN SECTION
========================================= */

.programs-main{

    padding:20px 0 100px;
}


/* =========================================
   LAYOUT
========================================= */

.programs-layout{

    display:grid;
    grid-template-columns:280px 1fr;
    gap:40px;
    align-items:start;
}


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

.programs-sidebar{

    position:sticky;
    position:relative;
    z-index:100;
}

.sidebar-card{

    background:#ffffff;
    padding:24px;
    border-radius:30px;
    box-shadow:0 15px 40px rgba(0,0,0,0.05);
    margin-bottom:28px;
}

.sidebar-program{

    margin-bottom:28px;
}

.program-btn{

    width:100%;
    border:none;
    background:#f4f1f2;
    padding:18px 20px;
    border-radius:18px;
    text-align:left;
    cursor:pointer;
    font-size:15px;
    font-weight:600;
    color:#161616;
    transition:0.4s ease;

    display:flex;
    align-items:center;
    gap:14px;
}

.program-btn i{

    color:#710014;
    font-size:18px;
}

.program-btn:hover,
.program-btn.active{

    background:#710014;
    color:#ffffff;
    transform:translateX(5px);
}

.program-btn:hover i,
.program-btn.active i{

    color:#ffffff;
}


/* PROGRAM LINKS */

.academic-links{

    display:flex;

    flex-direction:column;
    gap:10px;

    padding-left:18px;
    margin-top:16px;
}


.academic-links a{

    display:flex;
    align-items:center;
    gap:10px;

    text-decoration:none;

    color:#666666;

    font-size:13px;
    font-weight:500;

    line-height:1.5;

    transition:0.3s ease;
}

.academic-links a i{

    color:#710014;
    font-size:11px;
    width:14px;
}


.academic-links a:hover{

    color:#710014;
    transform:translateX(4px);
}


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

.sidebar-links{

    background:#161616;
    padding:24px;
    border-radius:30px;
    display:flex;
    flex-direction:column;
    gap:16px;
}

.sidebar-links a{

    text-decoration:none;
    color:#ffffff;
    padding:16px 18px;
    border-radius:16px;
    background:rgba(255,255,255,0.05);

    transition:0.4s ease;

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

    font-size:15px;
    font-weight:500;
}

.sidebar-links a:hover{

    background:#710014;
    transform:translateX(5px);
}


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

.programs-content{

    background:#ffffff;
    border-radius:40px;
    padding:60px;
    box-shadow:0 15px 40px rgba(0,0,0,0.05);
}

.program-box{

    display:none;
    animation:fadeUp 0.5s ease;
}

.program-box.active{

    display:block;
}


/* TAG */

.program-tag{

    display:inline-block;
    color:#710014;
    letter-spacing:4px;
    font-size:13px;
    margin-bottom:18px;
    text-transform:uppercase;
    font-weight:600;
}


/* TITLE */

.program-box h2{

    font-size:34px;
    line-height:1.05;
    margin-bottom:24px;
    color:#161616;
    font-family:serif;
    font-weight:300;
}


/* PARAGRAPH */

.program-box p{

    font-size:16px;
    line-height:1.9;
    color:#444;
}


/* CONTENT SECTIONS */

.content-section{

    margin-top:30px;
    padding:25px;
    border-radius:26px;
    background:#faf7f8;
    border-left:3px solid #710014;
}

.content-section h3{

    font-size:18px;
    color:#710014;
    margin-bottom:16px;
    font-family:serif;
    font-weight:400;
}


/* =========================================
   APPLY SECTION
========================================= */

.apply-section{

    padding:0 0 120px;
}

.apply-box{

    background:linear-gradient(135deg,#710014,#4b0010);
    border-radius:40px;
    padding:70px;
    text-align:center;
    overflow:hidden;
    position:relative;
}

.apply-box::before{

    content:"";
    position:absolute;
    width:300px;
    height:300px;
    border-radius:50%;
    background:rgba(255,255,255,0.05);
    top:-120px;
    right:-90px;
}

.apply-box span{

    display:inline-block;
    color:#ffffff;
    letter-spacing:4px;
    font-size:13px;
    text-transform:uppercase;
    margin-bottom:18px;
}

.apply-box h2{

    font-size:50px;
    color:#ffffff;
    margin-bottom:50px;
    font-family:serif;
    font-weight:300;
}


/* STEPS */

.apply-steps{

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

.step{

    background:rgba(255,255,255,0.08);
    padding:35px 25px;
    border-radius:26px;
    transition:0.4s ease;
}

.step:hover{

    transform:translateY(-8px);
    background:rgba(255,255,255,0.12);
}

.step i{

    font-size:32px;
    color:#ffffff;
    margin-bottom:20px;
}

.step h4{

    color:#ffffff;
    font-size:20px;
    line-height:1.5;
}


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

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(20px);
    }

    to{

        opacity:1;
        transform:translateY(0);
    }
}

@keyframes floatCard{

    0%{

        transform:translateY(0px);
    }

    50%{

        transform:translateY(-10px);
    }

    100%{

        transform:translateY(0px);
    }
}


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

@media(max-width:992px){

    .programs-layout{

        grid-template-columns:1fr;
    }

    .course-top-card{

        width:100%;
        max-width:360px;
        margin:auto;
    }

    .apply-steps{

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

    .program-box h2{

        font-size:32px;
    }

    .apply-box h2{

        font-size:42px;
    }
}

@media(max-width:768px){

    .programs-content{

        padding:35px;
    }

    .apply-steps{

        grid-template-columns:1fr;
    }

    .course-meta{

        flex-direction:column;
    }

    .program-box h2{

        font-size:34px;
    }
}

.course-group{

    margin-bottom:16px;
}

.sub-link{

    padding-left:28px;
    margin-top:6px;
    font-size:12px !important;
    opacity:0.8;
}

.sub-link i{

    font-size:10px !important;
}

/* =========================================
   COURSE ACTIONS
========================================= */

.course-actions{

    margin-top:32px;
}


/* =========================================
   ADMISSION STATUS
========================================= */

.admission-status{

    display:flex;
    align-items:center;
    gap:16px;

    padding:20px 22px;
    border-radius:22px;

    margin-bottom:18px;

    position:relative;
    overflow:hidden;
}


/* OPEN */

.admission-status.open{

    background:rgba(18,140,70,0.08);
    border:1px solid rgba(18,140,70,0.15);
}


/* CLOSED */

.admission-status.closed{

    background:rgba(180,40,40,0.08);
    border:1px solid rgba(180,40,40,0.15);
}


/* STATUS DOT */

.status-dot{

    width:16px;
    height:16px;
    border-radius:50%;
    flex-shrink:0;
}


/* OPEN DOT */

.open .status-dot{

    background:#1c9b55;
    box-shadow:0 0 0 8px rgba(28,155,85,0.12);
}


/* CLOSED DOT */

.closed .status-dot{

    background:#c23b3b;
    box-shadow:0 0 0 8px rgba(194,59,59,0.12);
}


/* CONTENT */

.status-content small{

    display:block;
    font-size:12px;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-bottom:4px;
}


/* OPEN TEXT */

.open .status-content small{

    color:#1c9b55;
}


/* CLOSED TEXT */

.closed .status-content small{

    color:#c23b3b;
}


.status-content h4{

    font-size:16px;
    color:#161616;
    font-weight:700;
}


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

.fees-download{

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

    text-decoration:none;

    font-size:14px;
    font-weight:600;

    color:#710014;

    transition:0.3s ease;
}

.fees-download i{

    font-size:13px;
}

.fees-download:hover{

    transform:translateX(4px);
}

.academic-links{

    display:flex;

    flex-direction:column;
    gap:10px;

    padding-left:18px;
    margin-top:16px;
}


.academic-links a{

    display:flex;
    align-items:center;
    gap:10px;

    text-decoration:none;

    color:#666666;

    font-size:13px;
    font-weight:500;

    line-height:1.5;

    transition:0.3s ease;
}

.academic-links a i{

    color:#710014;
    font-size:11px;
    width:14px;
}


.academic-links a:hover{

    color:#710014;
    transform:translateX(4px);
}

.eligibility-box ul{

    margin:15px 0 30px;
    padding-left:0;
    list-style:none;
}

.eligibility-box ul li{

    position:relative;
    padding-left:32px;
    margin-bottom:14px;

    font-size:15px;
    line-height:1.8;
    color:#444;
}

.eligibility-box ul li::before{

    content:"\f058";
    font-family:"Font Awesome 6 Free";
    font-weight:900;

    position:absolute;
    left:0;
    top:2px;

    color:#710014;
    font-size:14px;
}

.online-requirements{

    margin-top:35px;
}

.online-grid{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    margin-top:22px;
}

.online-item{

    background:#fff;
    border:1px solid rgba(113,0,20,0.12);
    border-radius:20px;
    padding:22px;

    display:flex;
    gap:16px;
    align-items:flex-start;

    box-shadow:0 10px 30px rgba(0,0,0,0.04);
}

.online-item i{

    width:42px;
    height:42px;
    min-width:42px;

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

    border-radius:50%;
    background:#710014;
    color:#fff;
    font-size:15px;
}

.online-item p{

    font-size:14px;
    line-height:1.7;
    color:#444;
    margin:0;
}

@media(max-width:768px){

    .online-grid{

        grid-template-columns:1fr;
    }
}

.online-highlight{

    display:flex;
    align-items:flex-start;
    gap:16px;

    margin:18px 0 24px;
    padding:18px 20px;

    background:rgba(113,0,20,0.08);
    border-left:5px solid #710014;
    border-radius:18px;
}

.online-icon{

    width:44px;
    height:44px;
    min-width:44px;

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

    border-radius:50%;
    background:#710014;
    color:#ffffff;
    font-size:17px;
}

.online-highlight h4{

    font-size:16px;
    color:#161616;
    margin-bottom:6px;
}

.online-highlight p{

    font-size:15px;
    line-height:1.6;
    color:#555;
    margin:0;
}

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

.requirements-accordion{

    margin-top:28px;
}

.req-accordion-item{

    background:#ffffff;
    border:1px solid rgba(113,0,20,0.12);
    border-radius:20px;
    margin-bottom:16px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,0.04);
}

.req-accordion-btn{

    width:100%;
    border:none;
    background:#ffffff;

    padding:20px 22px;

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

    cursor:pointer;

    font-size:15px;
    font-weight:500;
    color:#161616;
}

.req-accordion-btn span{

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

.req-accordion-btn span i{

    width:36px;
    height:36px;

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

    border-radius:50%;
    background:rgba(113,0,20,0.08);
    color:#710014;
    font-size:15px;
}

.req-accordion-btn > i{

    color:#710014;
    transition:0.3s ease;
}

.req-accordion-item.active .req-accordion-btn > i{

    transform:rotate(180deg);
}

.req-accordion-content{

    display:none;
    padding:0 24px 24px;
}

.req-accordion-item.active .req-accordion-content{

    display:block;
}

.req-accordion-content ul{

    list-style:none;
    padding:0;
    margin:10px 0 0;
}

.req-accordion-content ul li{

    position:relative;
    padding-left:30px;
    margin-bottom:14px;

    font-size:14px;
    line-height:1.7;
    color:#444;
}

.req-accordion-content ul li::before{

    content:"\f058";
    font-family:"Font Awesome 6 Free";
    font-weight:900;

    position:absolute;
    left:0;
    top:2px;

    color:#710014;
    font-size:15px;
}
.course-link.active-course::after,
.requirement-link.active-requirement::after{
    content:"";
    width:9px;
    height:9px;
    margin-left:auto;
    border-radius:50%;
    background:#710014;
    box-shadow:0 0 0 rgba(113,0,20,0.45);
    animation:activePulse 1.4s infinite;
}

@keyframes activePulse{
    0%{
        box-shadow:0 0 0 0 rgba(113,0,20,0.45);
    }
    70%{
        box-shadow:0 0 0 8px rgba(113,0,20,0);
    }
    100%{
        box-shadow:0 0 0 0 rgba(113,0,20,0);
    }
}

.course-link.active-course,
.requirement-link.active-requirement{
    color:#161616;
    font-weight:700;
}

.program-tag-link{
    display:inline-flex;
    width:max-content;
    position:relative;
    z-index:9999;
    pointer-events:auto;
    text-decoration:none;
    cursor:pointer;
}

.course-top-card,
.program-box{
    position:relative;
    z-index:110;
}

.program-box ul{
    list-style:none;
    padding:0;
    margin:18px 0 0;
}

.program-box ul li{
    position:relative;
    padding:14px 18px 14px 46px;
    margin-bottom:12px;

    background:#ffffff;
    border:1px solid rgba(113,0,20,0.12);
    border-radius:14px;

    color:#161616;
    font-size:16px;
    font-weight:600;

    box-shadow:0 8px 22px rgba(0,0,0,0.04);
}

.program-box ul li::before{
    content:"\f058";
    font-family:"Font Awesome 6 Free";
    font-weight:900;

    position:absolute;
    left:18px;
    top:50%;
    transform:translateY(-50%);

    color:#710014;
    font-size:15px;
}
.course-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:12px 22px;
    margin:6px 8px 6px 0;

    background:#710014;
    color:#ffffff;

    border-radius:30px;
    text-decoration:none;

    font-size:14px;
    font-weight:600;

    transition:0.3s ease;
}

.course-btn:hover{
    background:#161616;
    color:#ffffff;
    transform:translateY(-3px);
}
.course-btn{
    display:inline-flex;
    text-decoration:none;
}


.admission-box{
    position:relative;
    overflow:visible;
    background:#710014;
    border-radius:36px;
    min-height:480px;

    padding:00px 70px 00px 100px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
}

.admission-image{
    position:absolute;
    left:450px;   /* changed from 120px */
    bottom:0;
    z-index:2;
    pointer-events:none;
}

.admission-image img{
    height:470px;
    width:auto;
    display:block;
}

.admission-content,
.admission-buttons{
    position:relative;
    z-index:5;
}

.click-bubble{
    position:fixed;
    width:8px;
    height:8px;
    background:#710014;
    border-radius:50%;
    pointer-events:none;
    z-index:99999;
    animation:bubbleFly 0.7s ease-out forwards;
}

@keyframes bubbleFly{
    0%{
        transform:translate(0,0) scale(1);
        opacity:1;
    }
    100%{
        transform:translate(var(--x), var(--y)) scale(0);
        opacity:0;
    }
}

.apply-section{
    padding:90px 0;
    background:#fafafa;
}

.apply-box{
    background:#ffffff;
    border-radius:36px;
    padding:60px;
    box-shadow:0 20px 50px rgba(0,0,0,0.08);
}

.apply-box > span{
    color:#710014;
    font-size:14px;
    font-weight:800;
    letter-spacing:6px;
    text-transform:uppercase;
}

.apply-box h2{
    font-size:46px;
    margin:18px 0;
    color:#161616;
}

.apply-intro{
    font-size:18px;
    line-height:1.8;
    color:#555;
    max-width:850px;
    margin-bottom:35px;
}

.apply-steps{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin-bottom:40px;
}

.step{
    background:#f7f3f4;
    border-radius:22px;
    padding:28px 18px;
    text-align:center;
    transition:0.3s ease;
}

.step i{
    width:56px;
    height:56px;
    background:#710014;
    color:#ffffff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 16px;
    font-size:22px;
}

.step h4{
    font-size:16px;
    color:#161616;
    margin:0;
}

.step:hover{
    transform:translateY(-6px);
    box-shadow:0 14px 30px rgba(0,0,0,0.08);
}

.bank-contact-grid{
    display:grid;
    grid-template-columns:1.2fr 0.8fr;
    gap:24px;
}

.bank-card,
.contact-card{
    background:#fff;
    border:1px solid rgba(113,0,20,0.12);
    border-radius:24px;
    padding:30px;
}

.bank-card h3,
.contact-card h3{
    color:#710014;
    font-size:22px;
    margin-bottom:18px;
}

.bank-card h3 i,
.contact-card h3 i{
    margin-right:10px;
}

.bank-card ul{
    list-style:none;
    padding:0;
    margin:0 0 18px;
}

.bank-card li{
    padding:10px 0;
    border-bottom:1px dashed rgba(0,0,0,0.12);
    color:#444;
    font-size:15px;
}

.bank-card p,
.contact-card p{
    color:#555;
    line-height:1.8;
    font-size:15px;
}

@media(max-width:900px){
    .apply-box{
        padding:35px 22px;
    }

    .apply-steps,
    .bank-contact-grid{
        grid-template-columns:1fr;
    }

    .apply-box h2{
        font-size:34px;
    }
}

.faculty-profile-section{
    padding:90px 0;
    background:#f8f6f6;
}

.faculty-profile-card{
    display:grid;
    grid-template-columns:380px 1fr;
    gap:50px;
    background:#710014;
    border-radius:36px;
    padding:50px;
    align-items:center;
}

.faculty-photo-box{
    background:#ffffff;
    border-radius:30px;
    padding:18px;
    box-shadow:0 20px 45px rgba(0,0,0,0.18);
}

.faculty-photo-box img{
    width:100%;
    height:430px;
    object-fit:cover;
    border-radius:24px;
}

.faculty-label{
    color:#ffffff;
    letter-spacing:6px;
    text-transform:uppercase;
    font-size:13px;
    font-weight:800;
}

.faculty-right h1{
    color:#ffffff;
    font-size:52px;
    margin:18px 0 8px;
}

.faculty-right h4{
    color:#f4d9df;
    font-size:22px;
    margin-bottom:18px;
}

.faculty-location{
    color:#ffffff;
    margin-bottom:25px;
}

.faculty-contact-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
}

.faculty-contact-grid div{
    background:rgba(255,255,255,0.12);
    color:#ffffff;
    padding:16px;
    border-radius:16px;
}

.faculty-contact-grid i{
    margin-right:10px;
}

.faculty-social{
    display:flex;
    gap:12px;
    margin-top:25px;
}

.faculty-social a{
    width:42px;
    height:42px;
    background:#ffffff;
    color:#710014;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
}

.faculty-details-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
    margin-top:35px;
}

.faculty-detail-card{
    background:#ffffff;
    border-radius:26px;
    padding:30px;
    box-shadow:0 14px 35px rgba(0,0,0,0.06);
}

.faculty-detail-card h3{
    color:#710014;
    font-size:24px;
    margin-bottom:18px;
}

.faculty-detail-card h3 i{
    margin-right:10px;
}

.faculty-detail-card p{
    color:#555;
    line-height:1.8;
}

.timeline-item{
    border-left:4px solid #710014;
    padding-left:18px;
    margin-bottom:18px;
}

.timeline-item strong{
    color:#111;
    font-size:18px;
}

.timeline-item span{
    color:#710014;
    font-weight:700;
}

.list-item{
    display:flex;
    gap:14px;
    margin-bottom:14px;
}

.list-item i{
    color:#710014;
    margin-top:6px;
}

.list-item span{
    color:#710014;
    font-weight:700;
}

.publication-item{
    border-bottom:1px solid #eee;
    padding-bottom:15px;
    margin-bottom:15px;
}

.publication-item span{
    background:#710014;
    color:#ffffff;
    padding:5px 12px;
    border-radius:20px;
    font-size:12px;
}

.publication-item h4{
    margin:12px 0 6px;
    color:#111;
}

.full-width{
    grid-column:1 / -1;
}

.faculty-links{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
}

.faculty-links a{
    background:#f7f3f4;
    color:#710014;
    padding:14px 20px;
    border-radius:16px;
    text-decoration:none;
    font-weight:700;
}

@media(max-width:900px){

    .faculty-profile-card,
    .faculty-details-grid{
        grid-template-columns:1fr;
    }

    .faculty-right h1{
        font-size:36px;
    }

    .faculty-contact-grid{
        grid-template-columns:1fr;
    }

    .faculty-photo-box img{
        height:360px;
    }
}

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

    .faculty-profile-card{
        grid-template-columns:320px 1fr;
        gap:35px;
        padding:40px;
    }

    .faculty-photo-box img{
        height:380px;
    }

    .faculty-right h1{
        font-size:42px;
    }

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

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

    .faculty-profile-card{
        grid-template-columns:1fr;
        text-align:center;
    }

    .faculty-photo-box{
        max-width:360px;
        margin:0 auto;
    }

    .faculty-contact-grid{
        grid-template-columns:1fr 1fr;
    }

    .faculty-social{
        justify-content:center;
    }

    .faculty-details-grid{
        grid-template-columns:1fr;
    }
}

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

    .faculty-profile-section{
        padding:50px 0;
    }

    .faculty-profile-card{
        padding:25px;
        border-radius:24px;
    }

    .faculty-photo-box{
        padding:10px;
        border-radius:22px;
    }

    .faculty-photo-box img{
        height:300px;
        border-radius:18px;
    }

    .faculty-label{
        letter-spacing:3px;
        font-size:11px;
    }

    .faculty-right h1{
        font-size:30px;
    }

    .faculty-right h4{
        font-size:18px;
    }

    .faculty-contact-grid{
        grid-template-columns:1fr;
    }

    .faculty-detail-card{
        padding:22px;
        border-radius:20px;
    }

    .faculty-detail-card h3{
        font-size:20px;
    }

    .faculty-links{
        flex-direction:column;
    }

    .faculty-links a{
        width:100%;
    }
}
#pageLoader{
    position:fixed;
    inset:0;
    background:#ffffff;
    z-index:999999;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:opacity 0.5s ease, visibility 0.5s ease;
}

#pageLoader img{
    width:80px;
    height:auto;
}

#pageLoader.hide-loader{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}


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

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

.calendar-days-header{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    background:#6b0013;
    color:#fff;
}

.calendar-days-header div{
    text-align:center;
    padding:16px 10px;
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
}

.calendar-grid{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    background:#fff;
}

.calendar-cell{
    min-height:125px;
    padding:10px;
    border-right:1px solid #f1f1f1;
    border-bottom:1px solid #f1f1f1;
    position:relative;
    transition:.3s;
    background:#fff;
}

.calendar-cell:hover{
    background:#fcfcfc;
}

.calendar-cell:nth-child(7n){
    border-right:none;
}

.calendar-cell.empty{
    background:#fafafa;
}

.calendar-date{
    font-size:15px;
    font-weight:700;
    color:#222;
    margin-bottom:8px;
}

/* TODAY */

.calendar-cell.today{
    background:#fff8f1;
}

.calendar-cell.today .calendar-date{
    width:32px;
    height:32px;
    border-radius:50%;
    background:#6b0013;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* =========================================
   EVENT INDICATORS
========================================= */

.calendar-chip{
    height:8px;
    border-radius:50px;
    margin-top:6px;
    cursor:pointer;
    transition:.25s;
}

.calendar-chip:hover{
    transform:scaleX(1.03);
}

.calendar-chip.calendar{
    background:#eef3ff;
    color:#174ea6;
    border-left:4px solid #174ea6;
}

.calendar-chip.webinar{
    background:#edf9f0;
    color:#188038;
    border-left:4px solid #188038;
}

.calendar-chip.special{
    background:#fff1f1;
    color:#c5221f;
    border-left:4px solid #c5221f;
}


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

.campus-calendar-hero{
    height:300px;
    background:url('../images/event.jpg') center center/cover no-repeat;
    position:relative;
    display:flex;
    align-items:center;
    overflow:hidden;
}

.campus-calendar-overlay{
    position:absolute;
    inset:0;
    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.75),
        rgba(0,0,0,.35)
    );
}

.campus-calendar-content{
    position:relative;
    z-index:2;
    color:#fff;
    max-width:700px;
}

.campus-calendar-content span{
    color:#d9b56d;
    letter-spacing:4px;
    font-size:13px;
    font-weight:700;
}

.campus-calendar-content h1{
    font-size:58px;
    line-height:1.1;
    margin:15px 0;
    font-weight:800;
}

.campus-calendar-content p{
    font-size:18px;
    opacity:.95;
}

/* =========================================
   MAIN SECTION
========================================= */

.campus-calendar-section{
    padding:80px 0;
    background:#f7f7f7;
}

.campus-calendar-layout{
    display:grid;
    grid-template-columns:3fr 1.1fr;
    gap:30px;
    align-items:start;
}
/* =========================================
   CALENDAR SECTION
========================================= */

.campus-calendar-section{
    padding:80px 0;
    background:#f7f8fb;
}

.campus-calendar-layout{
    display:grid;
    grid-template-columns:2.6fr 1fr;
    gap:30px;
    align-items:start;
}

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

.campus-calendar-heading{
    text-align:center;
    margin-bottom:25px;
}

.campus-calendar-tag{
    display:inline-block;
    color:#6b0013;
    font-size:13px;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;
}

.campus-calendar-heading h2{
    margin:15px 0;
    font-size:44px;
    color:#111;
}

.campus-calendar-heading p{
    max-width:700px;
    margin:auto;
    color:#666;
    line-height:1.8;
}

/* =========================================
   LEGEND
========================================= */

.calendar-legend{
    display:flex;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
    margin-bottom:30px;
}

.calendar-legend span{
    display:flex;
    align-items:center;
    gap:8px;

    background:#fff;
    padding:10px 18px;
    border-radius:50px;

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

.legend-dot{
    width:12px;
    height:12px;
    border-radius:50%;
}

.legend-dot.academic{
    background:#174ea6;
}

.legend-dot.webinar{
    background:#188038;
}

.legend-dot.special{
    background:#c5221f;
}

/* =========================================
   LEFT CALENDAR CARD
========================================= */

.campus-calendar-left{

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.98),
        rgba(249,249,249,.98)
    );

    border-radius:30px;

    overflow:hidden;

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

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

/* =========================================
   TOOLBAR
========================================= */

.calendar-toolbar{

    padding:20px 25px;

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    flex-wrap:wrap;

    background:#fff;
    border-bottom:1px solid #ececec;
}

.calendar-view-switch{

    background:#f6f6f6;
    padding:5px;
    border-radius:50px;

    display:flex;
    gap:5px;
}

.calendar-view-switch button{

    border:none;
    background:none;

    padding:10px 18px;
    border-radius:30px;

    cursor:pointer;
    transition:.3s;
}

.calendar-view-switch button.active{

    background:#6b0013;
    color:#fff;
}

.calendar-export-btn{

    border:none;
    cursor:pointer;

    background:#6b0013;
    color:#fff;

    padding:12px 18px;
    border-radius:50px;

    font-weight:600;
}

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

.campus-calendar-top{

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

    padding:22px 30px;

    background:#fff;
    border-bottom:1px solid #ececec;
}

.campus-calendar-top h2{

    margin:0;
    color:#6b0013;

    font-size:38px;
    font-weight:800;
}

.campus-calendar-top button{

    width:48px;
    height:48px;

    border:none;
    border-radius:50%;

    background:#f4f4f4;

    cursor:pointer;
    transition:.3s;
}

.campus-calendar-top button:hover{

    background:#6b0013;
    color:#fff;

    transform:translateY(-2px);
}

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

.calendar-days-header{

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

    background:
    linear-gradient(
        180deg,
        #83001a,
        #6b0013
    );

    color:#fff;
}

.calendar-days-header div{

    text-align:center;

    padding:15px;

    font-size:13px;
    font-weight:700;

    letter-spacing:1px;
    text-transform:uppercase;
}

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

.calendar-grid{

    display:grid;
    grid-template-columns:repeat(7,1fr);
}

.calendar-cell{

    min-height:125px;

    padding:10px;

    border-right:1px solid #ececec;
    border-bottom:1px solid #ececec;

    background:#fff;

    transition:.25s;
    position:relative;
}

.calendar-cell:hover{

    background:#faf7f2;
}

.calendar-cell:nth-child(7n){

    border-right:none;
}

.calendar-cell.empty{

    background:#fafafa;
}

.calendar-date{

    width:34px;
    height:34px;

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

    font-size:16px;
    font-weight:700;

    color:#222;

    border-radius:50%;

    margin-bottom:10px;
}

.calendar-cell.today{

    background:#fff8ef;
}

.calendar-cell.today .calendar-date{

    background:#6b0013;
    color:#fff;

    box-shadow:
    0 8px 18px rgba(107,0,19,.25);
}

/* =========================================
   EVENT PILLS
========================================= */

.calendar-marker{
    height:8px;
    border-radius:20px;
    margin-bottom:6px;
    cursor:pointer;
    transition:.3s;
}

.calendar-marker:hover{
    transform:scaleX(1.05);
}

.calendar-marker.calendar{
    background:#174ea6;
}

.calendar-marker.webinar{
    background:#188038;
}

.calendar-marker.special{
    background:#c5221f;
}

.event-count{
    position:absolute;
    top:12px;
    right:12px;

    width:22px;
    height:22px;

    border-radius:50%;
    background:#d9b56d;

    color:#fff;
    font-size:11px;
    font-weight:700;

    display:flex;
    align-items:center;
    justify-content:center;
}
/* =========================================
   RIGHT PANEL
========================================= */

.campus-event-panel{

    background:#fff;

    border-radius:30px;

    padding:30px;

    min-height:650px;

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

    position:sticky;
    top:100px;
}

.event-badge{

    display:inline-block;

    padding:10px 18px;

    border-radius:50px;

    color:#fff;

    text-transform:uppercase;
    font-size:12px;
    letter-spacing:1px;
}

.event-badge.calendar{
    background:#174ea6;
}

.event-badge.webinar{
    background:#188038;
}

.event-badge.special{
    background:#c5221f;
}

.event-detail-card h2{

    margin:20px 0;

    font-size:36px;
    line-height:1.25;
}

.event-info-row{

    display:flex;
    align-items:center;

    gap:12px;

    padding:14px 16px;

    margin-bottom:12px;

    background:#fafafa;

    border:1px solid #ececec;
    border-radius:14px;
}

.event-info-row i{

    color:#6b0013;
}

.event-description{

    margin-top:25px;

    line-height:1.9;
    color:#555;
}

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

.event-about-box{

    margin-top:25px;

    background:#fafafa;

    padding:20px;

    border-radius:18px;

    border:1px solid #ececec;
}

.event-about-box h4{

    margin-bottom:12px;
    color:#6b0013;
}

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

.calendar-action-box{

    margin-top:20px;

    display:flex;
    flex-direction:column;
    gap:10px;
}

.calendar-action-btn{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;

    padding:14px;

    border-radius:14px;

    text-decoration:none;

    background:#6b0013;
    color:#fff;
}

.calendar-action-btn.outline{

    background:#fff;

    color:#6b0013;

    border:1px solid #6b0013;
}

/* =========================================
   CATEGORY GUIDE
========================================= */

.event-type-guide{

    margin-top:25px;

    padding-top:20px;

    border-top:1px solid #eee;
}

.event-type-guide h4{

    margin-bottom:15px;
}

.guide-item{

    display:flex;
    align-items:center;

    gap:10px;

    margin-bottom:10px;
}

.guide-dot{

    width:12px;
    height:12px;

    border-radius:50%;
}

.guide-dot.academic{
    background:#174ea6;
}

.guide-dot.webinar{
    background:#188038;
}

.guide-dot.special{
    background:#c5221f;
}

.calendar-scroll-wrapper{
    overflow-x:auto;
}

/* =========================================
   EMPTY STATE
========================================= */

.empty-state{

    text-align:center;
    padding-top:120px;
}

.empty-state i{

    font-size:60px;
    color:#d9b56d;
    margin-bottom:20px;
}

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

@media(max-width:992px){

    .campus-calendar-layout{
        grid-template-columns:1fr;
    }

    .campus-event-panel{
        position:static;
        min-height:auto;
    }

    .campus-calendar-heading h2{
        font-size:36px;
    }
}

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

@media(max-width:768px){

    .campus-calendar-section{
        padding:50px 0;
    }

    .campus-calendar-left{
        overflow-x:auto;
    }

    .calendar-days-header,
    .calendar-grid{
        min-width:850px;
    }

    .calendar-cell{
        min-height:95px;
    }

    .campus-calendar-top{
        padding:18px;
    }

    .campus-calendar-top h2{
        font-size:26px;
    }

    .campus-event-panel{
        padding:20px;
    }

    .event-detail-card h2{
        font-size:28px;
    }

    .calendar-toolbar{
        justify-content:center;
    }
}

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

@media(max-width:480px){

    .campus-calendar-heading h2{
        font-size:30px;
    }

    .calendar-days-header,
    .calendar-grid{
        min-width:800px;
    }
}

.speakers-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
    margin-top:50px;
}

.speaker-card{
    position:relative;
    overflow:hidden;
    border-radius:18px;
    height:420px;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
    cursor:pointer;
}

.speaker-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .5s ease;
}

.speaker-card:hover img{
    transform:scale(1.08);
}

/* OVERLAY */

.speaker-overlay{
    position:absolute;
    left:0;
    bottom:0;

    width:100%;
    height:220px;

    background:rgba(184,142,113,0.92); /* #b38e71 */

    color:#9a1a33;
    text-align:center;

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

    transform:translateY(100%);
    transition:.4s ease;

    padding:20px;
}

/* DIAGONAL TOP EDGE */

.speaker-overlay::before{
    content:"";

    position:absolute;
    top:-70px;
    left:0;

    width:100%;
    height:120px;

    background:rgba(184,142,113,0.92); /* #b38e71 */

    transform:skewY(-12deg);
}

/* SHOW OVERLAY ON HOVER */

.speaker-card:hover .speaker-overlay{
    transform:translateY(0);
}

/* TEXT */

.speaker-overlay h3{
    position:relative;
    z-index:2;

    font-size:20px;
    font-weight:700;
    margin-bottom:10px;

    color:#fff;
}

.speaker-overlay p{
    position:relative;
    z-index:2;

    font-size:15px;
    margin-bottom:18px;

    color:#000;
}

/* ICON WRAPPER */

.speaker-social{
    position:relative;
    z-index:2;

    display:flex;
    gap:12px;
}

/* ICONS */

.speaker-social a{
    width:42px;
    height:42px;

    border-radius:50%;

    background:rgba(154,26,51,.15);
    color:#9a1a33;

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

    text-decoration:none;

    transition:.3s ease;
}

.speaker-social a:hover{
    background:#9a1a33;
    color:#fff;

    transform:translateY(-3px);
}

/* HEADER */

.faculty-page-header{
    text-align:center;
    margin-bottom:40px;
}

.faculty-page-header span{
    display:inline-block;

    color:#9a1a33;

    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;

    margin-bottom:10px;
}

.faculty-page-header h1{
    font-size:42px;
    margin-bottom:15px;

    color:#222;
}

.faculty-page-header p{
    max-width:750px;
    margin:auto;

    color:#666;
    line-height:1.8;
}

/* MOBILE */

@media(max-width:768px){

    .speaker-card{
        height:360px;
    }

    .speaker-overlay{
        height:200px;
    }

    .speaker-overlay h3{
        font-size:20px;
    }
}


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

.admission-section{
    padding:80px 0;
}

.section-title{
    text-align:center;
    margin-bottom:50px;
}

.section-title h2{
    font-size:42px;
    color:#9a1a33;
}

/* ELIGIBILITY / INFO BOX */

.info-card{
    background:#fff;
    padding:40px;
    border-radius:24px;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
    border-top:5px solid #b38e71;
}

.info-card p{
    font-size:17px;
    line-height:1.9;
    color:#555;
}

/* ENTRANCE EXAM */

.exam-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:25px;
}

.exam-card{
    background:#fff;
    padding:35px;
    border-radius:24px;
    text-align:center;
    box-shadow:0 10px 25px rgba(0,0,0,.05);
    transition:.3s;
}

.exam-card:hover{
    transform:translateY(-8px);
}

.exam-card i{
    font-size:42px;
    color:#9a1a33;
    margin-bottom:20px;
}

.exam-card h3{
    color:#9a1a33;
    margin-bottom:12px;
}

.exam-card p{
    color:#666;
    line-height:1.8;
}

/* SELECTION PROCESS */

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

.select-box{
    background:#9a1a33;
    color:#fff;
    padding:40px;
    text-align:center;
    border-radius:24px;
}

.select-box h3{
    margin-bottom:10px;
}

.select-box span{
    color:#b38e71;
    font-size:34px;
    font-weight:700;
}

.note{
    margin-top:25px;
    text-align:center;
    color:#666;
    font-style:italic;
}

/* DOCUMENTS */

.documents-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:25px;
}

.documents-grid > div{
    background:#fff;
    padding:30px;
    border-radius:24px;
    box-shadow:0 10px 25px rgba(0,0,0,.05);
}

.documents-grid h3{
    color:#9a1a33;
    margin-bottom:20px;
}

.documents-grid ul{
    list-style:none;
    padding:0;
}

.documents-grid li{
    padding:10px 0;
    border-bottom:1px solid #eee;
    color:#555;
}

.documents-grid li:last-child{
    border-bottom:none;
}

.documents-grid li::before{
    content:"✓ ";
    color:#b38e71;
    font-weight:bold;
}

/* INTERVIEW PANEL */

.interview-panel{
    background:linear-gradient(135deg,#9a1a33,#7a1328);
    color:#fff;
    padding:50px;
    border-radius:30px;
    text-align:center;
}

.interview-panel h3{
    margin-bottom:15px;
    color:#b38e71;
}

.interview-panel p{
    line-height:1.9;
}

.admission-hero{
    background:
    linear-gradient(
        rgba(154,26,51,.82),
        rgba(154,26,51,.82)
    ),
    url('../images/academics.jpg') center center/cover no-repeat;

    padding:140px 0;
    text-align:center;
    color:#fff;
}

/* MOBILE */

@media(max-width:768px){

    .selection-grid{
        grid-template-columns:1fr;
    }

    .section-title h2{
        font-size:32px;
    }

    .info-card,
    .exam-card,
    .select-box,
    .documents-grid > div{
        border-radius:18px;
    }
}


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

.apply-cta{
    padding:100px 20px;
    text-align:center;

    background:linear-gradient(
        135deg,
        #9a1a33,
        #710014
    );

    color:#fff;

    border-radius:30px;

    margin:80px auto;
}

.apply-cta h2{
    font-size:48px;
    line-height:1.1;
    margin-bottom:18px;
    font-weight:700;
}

.apply-cta p{
    max-width:700px;
    margin:0 auto 35px;
    font-size:18px;
    line-height:1.8;
    color:rgba(255,255,255,.85);
}

.apply-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:16px 40px;

    background:#b38e71;
    color:#fff;

    text-decoration:none;

    border-radius:60px;

    font-size:14px;
    font-weight:600;
    letter-spacing:1px;
    text-transform:uppercase;

    transition:.3s ease;
}

.apply-btn:hover{
    transform:translateY(-4px);

    background:#c19b7c;

    box-shadow:
    0 15px 30px rgba(179,142,113,.35);
}

/* MOBILE */

@media(max-width:768px){

    .apply-cta{
        padding:70px 20px;
        border-radius:20px;
    }

    .apply-cta h2{
        font-size:34px;
    }

    .apply-cta p{
        font-size:16px;
    }
}

.quote-banner{
    background:#faf7f4;
    padding:120px 40px;
    text-align:center;
    position:relative;
}

.quote-inner{
    max-width:1000px;
    margin:auto;
}

.quote-banner::before{
    content:"❦";
    display:block;
    font-size:36px;
    color:#b38e71;
    margin-bottom:25px;
}

.quote-banner blockquote{
    font-family:'Cormorant Garamond', serif;
    font-size:clamp(2.3rem,4vw,4rem);
    line-height:1.45;
    font-weight:400;
    color:#fff;
    font-style:italic;
    margin:0 auto 30px;
    max-width:900px;
}

.quote-banner span{
    display:inline-block;
    margin-top:10px;

    color:#9a1a33;

    font-size:14px;
    font-weight:700;

    letter-spacing:4px;
    text-transform:uppercase;
}

.quote-label{
    color:#b38e71;
    letter-spacing:4px;
    text-transform:uppercase;
    font-size:12px;
    font-weight:600;
    margin-bottom:30px;
}

/* ===========================
   SPIRITUAL FORMATION
=========================== */

.feature-section{
    max-width:1300px;
    margin:120px auto;
    padding:70px;

    background:#fff;
    border-radius:30px;

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

    display:grid;
    grid-template-columns:450px 1fr;
    gap:60px;

    position:relative;
}



.feature-image img{
    width:100%;
    height:550px;
    object-fit:cover;
    border-radius:25px;
}

.feature-tag{
    color:#b38e71;
    text-transform:uppercase;
    letter-spacing:4px;
    font-size:13px;
    font-weight:700;
}

.feature-content h2{
    font-size:52px;
    color:#9a1a33;
    margin:15px 0 25px;
    line-height:1.15;
}

.feature-content p{
    line-height:2;
    color:#555;
    margin-bottom:35px;
}

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

.mini-card{
    background:#faf7f4;
    padding:25px;
    border-radius:18px;
    text-align:center;
}

.mini-card i{
    font-size:28px;
    color:#9a1a33;
    margin-bottom:12px;
}

.mini-card h4{
    margin:0;
    color:#333;
}

/* ===========================
   ACADEMIC SECTION
=========================== */

.academic-section{
    position:relative;

    margin:120px 0;

    background:
    linear-gradient(rgba(154,26,51,.85),
    rgba(154,26,51,.85)),
    url('images/academicc.jpg');

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

    padding:120px 40px;
}

.academic-content{
    max-width:1100px;
    margin:auto;
    text-align:center;
    color:#fff;
}

.academic-content span{
    color:#b38e71;
    text-transform:uppercase;
    letter-spacing:4px;
    font-size:13px;
    font-weight:700;
}

.academic-content h2{
    font-size:54px;
    margin:20px 0;
}

.academic-content p{
    max-width:850px;
    margin:auto;
    line-height:2;
    color:rgba(255,255,255,.9);
}

.academic-pillars{
    margin-top:50px;

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

.pillar-card{
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(10px);

    padding:35px 20px;

    border-radius:20px;
}

.pillar-card i{
    font-size:32px;
    color:#b38e71;
    margin-bottom:15px;
}

.pillar-card h4{
    margin:0;
    color:#fff;
}

/* MOBILE */

@media(max-width:991px){

    .feature-section{
        grid-template-columns:1fr;
        padding:40px;
    }

    .feature-image img{
        height:350px;
    }

    .feature-content h2{
        font-size:38px;
    }

    .academic-content h2{
        font-size:38px;
    }

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

@media(max-width:600px){

    .academic-pillars,
    .feature-grid{
        grid-template-columns:1fr;
    }

    .feature-number{
        font-size:100px;
    }
}

.academic-pathway{
    padding:120px 20px;
    background:#faf7f4;
}

.academic-header{
    max-width:900px;
    margin:0 auto 80px;
    text-align:center;
}

.academic-header span{
    color:#b38e71;
    text-transform:uppercase;
    letter-spacing:4px;
    font-size:13px;
    font-weight:700;
}

.academic-header h2{
    font-size:52px;
    color:#9a1a33;
    margin:20px 0;
}

.academic-header p{
    color:#666;
    line-height:2;
}

.pathway{
    max-width:1200px;
    margin:auto;

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

    position:relative;
}

.pathway::before{
    content:"";
    position:absolute;
    top:45px;
    left:10%;
    right:10%;

    height:3px;
    background:#b38e71;
    z-index:1;
}

.path-step{
    text-align:center;
    position:relative;
    z-index:2;
}

.step-icon{
    width:90px;
    height:90px;

    margin:0 auto 25px;

    background:#fff;
    border:4px solid #b38e71;
    border-radius:50%;

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

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

.step-icon i{
    font-size:32px;
    color:#9a1a33;
}

.path-step h3{
    color:#9a1a33;
    margin-bottom:15px;
    font-size:24px;
}

.path-step p{
    color:#666;
    line-height:1.8;
}

@media(max-width:900px){

    .pathway{
        grid-template-columns:1fr;
        gap:50px;
    }

    .pathway::before{
        display:none;
    }

    .academic-header h2{
        font-size:38px;
    }
}

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

.hero-buttons{
    margin-top:35px;
    display:flex;
    gap:15px;
    justify-content:center;
    flex-wrap:wrap;
}

.hero-btn{
    display:inline-block;
    padding:14px 28px;
    background:#9a1a33;
    color:#fff;
    text-decoration:none;
    border-radius:50px;
    font-weight:600;
    transition:.3s;
}

.hero-btn:hover{
    background:#7f142b;
    transform:translateY(-2px);
}

.hero-btn.outline{
    background:transparent;
    border:2px solid #fff;
}

.hero-btn.outline:hover{
    background:#fff;
    color:#9a1a33;
}

/* ==========================
   QUICK FACTS
========================== */

.quick-facts{
    padding:80px 0;
    background:#faf7f4;
}

.facts-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.fact-card{
    background:#fff;
    text-align:center;
    padding:40px 20px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.fact-card h3{
    font-size:42px;
    color:#9a1a33;
    margin-bottom:10px;
}

.fact-card p{
    color:#666;
    margin:0;
}

/* ==========================
   PROGRAM PATHS
========================== */
.path-card{
    position:relative;
    background:#fff;
    padding:45px 35px;
    border-radius:28px;

    border-top:5px solid #b38e71;

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

    transition:.35s ease;
    overflow:hidden;
}

.path-card::before{
    content:"";
    position:absolute;
    top:0;
    right:0;

    width:120px;
    height:120px;

    background:rgba(179,142,113,.08);

    border-radius:0 0 0 100%;
}

.path-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 60px rgba(154,26,51,.15);
}

.path-card i{
    width:75px;
    height:75px;

    border-radius:18px;

    background:#faf3ee;

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

    font-size:32px;
    color:#9a1a33;

    margin-bottom:25px;
}

.path-card h3{
    color:#9a1a33;
    font-size:28px;
    margin-bottom:20px;
}

.path-card ul{
    list-style:none;
    padding:0;
    margin:0 0 25px;
}

.path-card li{
    padding:10px 0;
    color:#555;
    border-bottom:1px solid #f0f0f0;
}

.path-card li:last-child{
    border-bottom:none;
}

.path-card li::before{
    content:"✓";
    color:#b38e71;
    font-weight:bold;
    margin-right:10px;
}

.path-card a{
    display:inline-flex;
    align-items:center;
    gap:8px;

    color:#9a1a33;
    font-weight:700;
    text-decoration:none;
}

.path-card a:hover{
    color:#b38e71;
}
/* ==========================
   ROADMAP
========================== */

.roadmap-section{
    background:#faf7f4;
    padding:100px 0;
}

.roadmap{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:20px;
}

.road-step{
    text-align:center;
}

.road-step span{
    width:70px;
    height:70px;
    margin:auto auto 15px;

    border-radius:50%;
    background:#9a1a33;
    color:#fff;

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

    font-size:24px;
    font-weight:700;
}

.road-step h4{
    font-size:15px;
    color:#333;
}

/* ==========================
   CHECKLIST
========================== */

.checklist-section{
    padding:100px 0;
}

.checklist-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
}

.check-box{
    background:#fff;
    padding:35px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.check-box h3{
    color:#9a1a33;
    margin-bottom:20px;
}

.check-box ul{
    list-style:none;
    padding:0;
    margin:0;
}

.check-box li{
    padding:12px 0;
    color:#555;
    border-bottom:1px solid #eee;
}

.check-box li::before{
    content:"✓";
    color:#b38e71;
    font-weight:bold;
    margin-right:10px;
}

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

.contact-cards{
    background:#faf7f4;
    padding:100px 0;
}

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

.contact-card{
    background:#fff;
    padding:40px;
    border-radius:20px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.contact-card i{
    font-size:38px;
    color:#b38e71;
    margin-bottom:20px;
}

.contact-card h3{
    color:#9a1a33;
    margin-bottom:15px;
}

.contact-card p{
    color:#666;
    line-height:1.8;
}

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

.apply-cta{
    background:linear-gradient(
        135deg,
        #9a1a33,
        #7d1429
    );

    color:#fff;
    text-align:center;

    padding:80px 40px;
    border-radius:30px;

    margin:100px auto;
}

.apply-cta h2{
    font-size:42px;
    margin-bottom:20px;
}

.apply-cta p{
    max-width:700px;
    margin:auto auto 30px;
    line-height:1.8;
}

.apply-btn{
    display:inline-block;
    background:#b38e71;
    color:#fff;
    padding:14px 32px;
    border-radius:50px;
    text-decoration:none;
    font-weight:600;
}

.apply-btn:hover{
    opacity:.9;
}

.path-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
    align-items:stretch;
}

.path-card{
    display:flex;
    flex-direction:column;
    height:100%;
}

.path-card a{
    margin-top:auto;
}

.section-subtitle{
    display:inline-block;
    color:#b38e71;
    text-transform:uppercase;
    letter-spacing:4px;
    font-size:13px;
    font-weight:700;
    margin-bottom:10px;
}

.section-title p{
    max-width:850px;
    margin:20px auto 0;
    color:#666;
    line-height:1.8;
}

.path-card{
    background:#fff;
    border-top:5px solid #b38e71;
    border-radius:28px;

    padding:35px;

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

    transition:.35s;
}

.path-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 60px rgba(154,26,51,.12);
}

.path-card i{
    width:75px;
    height:75px;

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

    background:#faf3ee;

    border-radius:20px;

    color:#9a1a33;
    font-size:32px;

    margin-bottom:25px;
}

.path-card a{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-top:auto;

    background:#faf3ee;

    padding:15px 20px;

    border-radius:16px;

    color:#9a1a33;
    font-weight:700;
    text-decoration:none;
}
/* ==========================
   MOBILE
========================== */

@media(max-width:991px){

    .facts-grid,
    .path-grid,
    .contact-grid,
    .checklist-grid{
        grid-template-columns:1fr;
    }

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

}

@media(max-width:600px){

    .roadmap{
        grid-template-columns:1fr;
    }

    .apply-cta h2{
        font-size:32px;
    }

}

/* =========================
   FINANCIAL OVERVIEW
========================= */

.financial-overview{
    padding:100px 0;
    background:#faf7f4;
}

.overview-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.overview-card{
    background:#fff;
    padding:40px 25px;
    border-radius:24px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
    transition:.3s;
}

.overview-card:hover{
    transform:translateY(-8px);
}

.overview-card i{
    font-size:38px;
    color:#b38e71;
    margin-bottom:18px;
}

.overview-card h3{
    color:#9a1a33;
    margin-bottom:12px;
    font-size:22px;
}

.overview-card span{
    color:#666;
    font-weight:600;
}

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

.financial-section{
    padding:100px 0;
}

.bg-light{
    background:#faf7f4;
}

.section-title{
    text-align:center;
    margin-bottom:60px;
}

.section-title h2{
    color:#9a1a33;
    font-size:48px;
    margin-bottom:15px;
}

.section-title p{
    max-width:700px;
    margin:auto;
    color:#666;
    line-height:1.8;
}

/* =========================
   FEES
========================= */

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

.fee-card{
    background:#fff;
    padding:40px;
    border-radius:24px;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
    border-top:5px solid #b38e71;
}

.fee-card i{
    font-size:34px;
    color:#9a1a33;
    margin-bottom:20px;
}

.fee-card h3{
    color:#9a1a33;
    margin-bottom:20px;
}

.fee-card ul{
    list-style:none;
    padding:0;
    margin:0;
}

.fee-card li{
    padding:12px 0;
    border-bottom:1px solid #eee;
    color:#555;
}

.fee-card li:last-child{
    border-bottom:none;
}

/* =========================
   PAYMENT METHODS
========================= */

.payment-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.payment-card{
    background:#fff;
    padding:35px 25px;
    text-align:center;
    border-radius:24px;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.payment-card i{
    font-size:36px;
    color:#b38e71;
    margin-bottom:18px;
}

.payment-card h3{
    color:#9a1a33;
    margin-bottom:12px;
}

.payment-card p{
    color:#666;
    line-height:1.7;
}

/* =========================
   BANK DETAILS
========================= */

.bank-card{
    max-width:900px;
    margin:auto;
    background:#fff;
    border-radius:28px;
    padding:40px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    border-top:6px solid #b38e71;
}

.bank-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 0;
    border-bottom:1px solid #eee;
}

.bank-row:last-child{
    border-bottom:none;
}

.bank-row strong{
    color:#9a1a33;
}

.bank-row span{
    color:#555;
}

/* =========================
   SCHOLARSHIP
========================= */

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

.scholar-card{
    background:#fff;
    padding:40px;
    border-radius:24px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.scholar-card i{
    font-size:40px;
    color:#b38e71;
    margin-bottom:20px;
}

.scholar-card h3{
    color:#9a1a33;
    margin-bottom:15px;
}

.scholar-card p{
    color:#666;
    line-height:1.8;
}

/* =========================
   POLICIES
========================= */

.policy-timeline{
    max-width:1000px;
    margin:auto;
    position:relative;
}

.policy-timeline::before{
    content:"";
    position:absolute;
    left:25px;
    top:0;
    bottom:0;
    width:3px;
    background:#b38e71;
}

.policy-item{
    position:relative;
    padding-left:80px;
    margin-bottom:40px;
}

.policy-item::before{
    content:"";
    position:absolute;
    left:14px;
    top:5px;

    width:24px;
    height:24px;

    background:#9a1a33;
    border-radius:50%;
}

.policy-item h3{
    color:#9a1a33;
    margin-bottom:10px;
}

.policy-item p{
    color:#666;
    line-height:1.8;
}

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

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

.contact-card{
    background:#fff;
    padding:40px;
    border-radius:24px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.contact-card i{
    font-size:38px;
    color:#b38e71;
    margin-bottom:20px;
}

.contact-card h3{
    color:#9a1a33;
    margin-bottom:15px;
}

.contact-card p{
    color:#666;
    line-height:1.8;
}

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

.apply-cta{
    background:linear-gradient(
        135deg,
        #9a1a33,
        #7a1328
    );
    color:#fff;
    text-align:center;
    padding:80px 40px;
    border-radius:30px;
    margin:100px auto;
}

.apply-cta h2{
    font-size:42px;
    margin-bottom:15px;
}

.apply-cta p{
    max-width:700px;
    margin:auto auto 30px;
    line-height:1.8;
}

.apply-btn{
    display:inline-block;
    background:#b38e71;
    color:#fff;
    text-decoration:none;
    padding:14px 32px;
    border-radius:50px;
    font-weight:600;
    transition:.3s;
}

.apply-btn:hover{
    transform:translateY(-3px);
}

/* =========================
   PAYMENT INFORMATION
========================= */

.bank-contact-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:50px;
}

/* COMMON CARD */

.bank-card,
.payment-card,
.contact-card{
    background:#fff;
    padding:35px;
    border-radius:24px;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    border-top:5px solid #b38e71;
    transition:.3s ease;
}

.bank-card:hover,
.payment-card:hover,
.contact-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 45px rgba(154,26,51,.12);
}

/* HEADINGS */

.bank-card h3,
.payment-card h3,
.contact-card h3{
    color:#9a1a33;
    font-size:24px;
    margin-bottom:25px;

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

.bank-card h3 i,
.payment-card h3 i,
.contact-card h3 i{
    color:#b38e71;
}

/* BANK DETAILS */

.bank-card ul{
    list-style:none;
    padding:0;
    margin:0;
}

.bank-card li{
    padding:14px 0;
    border-bottom:1px solid #eee;
    color:#555;
    line-height:1.7;
}

.bank-card li:last-child{
    border-bottom:none;
}

.bank-card strong{
    color:#333;
}

/* NOTE */

.payment-note{
    margin-top:25px;
    padding:15px;
    background:#faf7f4;
    border-left:4px solid #b38e71;
    border-radius:12px;

    color:#666;
    line-height:1.7;
    font-size:14px;
}

.payment-note i{
    color:#b38e71;
    margin-right:8px;
}

/* PAYMENT CARD */

.payment-card{
    text-align:center;
}

.payment-card p{
    color:#666;
    line-height:1.8;
    margin-bottom:20px;
}

.payment-btn{
    display:inline-block;

    background:#9a1a33;
    color:#fff;

    text-decoration:none;

    padding:14px 28px;
    border-radius:50px;

    font-weight:600;

    transition:.3s;
}

.payment-btn:hover{
    background:#7a1328;
    transform:translateY(-2px);
}

/* QR CODE */

.qr-box{
    margin-top:30px;
}

.qr-box img{
    width:180px;
    max-width:100%;

    background:#fff;
    padding:10px;

    border:1px solid #eee;
    border-radius:16px;
}

.qr-box p{
    margin-top:12px;
    color:#666;
    font-size:14px;
}

/* CONTACT */

.contact-card p{
    color:#555;
    line-height:1.9;
    margin-bottom:18px;
}

.contact-card strong{
    color:#9a1a33;
}

/* MOBILE */

@media(max-width:991px){

    .bank-contact-grid{
        grid-template-columns:1fr;
    }

    .bank-card,
    .payment-card,
    .contact-card{
        padding:30px;
    }

}

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

@media(max-width:991px){

    .overview-grid,
    .fee-grid,
    .payment-grid,
    .scholarship-grid,
    .contact-grid{
        grid-template-columns:1fr 1fr;
    }

}

@media(max-width:768px){

    .overview-grid,
    .fee-grid,
    .payment-grid,
    .scholarship-grid,
    .contact-grid{
        grid-template-columns:1fr;
    }

    .bank-row{
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
    }

    .section-title h2{
        font-size:36px;
    }

    .apply-cta h2{
        font-size:32px;
    }

}

.payment-hub{
    display:grid;
    grid-template-columns:1.3fr 1fr 1fr;
    gap:30px;
}

.payment-panel{
    background:#fff;
    border-radius:22px;
    padding:30px;
    box-shadow:0 12px 35px rgba(0,0,0,.06);
    border:1px solid rgba(179,142,113,.15);
    transition:.3s;
}

.payment-panel:hover{
    transform:translateY(-5px);
    box-shadow:0 20px 45px rgba(154,26,51,.10);
}

.panel-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:25px;
}

.panel-header i{
    font-size:24px;
    color:#b38e71;
}

.panel-label{
    display:block;
    color:#b38e71;
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:11px;
    margin-bottom:8px;
}

.panel-header h3{
    color:#9a1a33;
    margin:0;
    font-size:28px;
}

.detail-row{
    display:flex;
    justify-content:space-between;
    gap:15px;
    padding:14px 0;
    border-bottom:1px solid #eee;
}

.detail-row span{
    color:#777;
}

.detail-row strong{
    color:#333;
    text-align:right;
}

.payment-checklist{
    margin-top:25px;
    padding:20px;
    background:#faf7f4;
    border-radius:15px;
}

.payment-checklist h4{
    color:#9a1a33;
    margin-bottom:15px;
}

.payment-checklist ul{
    margin:0;
    padding-left:18px;
}

.payment-checklist li{
    margin-bottom:10px;
    color:#555;
}

.online-panel p{
    color:#666;
    line-height:1.8;
}

.payment-options{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:20px 0;
}

.payment-options span{
    background:#f6f1ed;
    color:#9a1a33;
    padding:8px 14px;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
}

.pay-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#9a1a33;
    color:#fff;
    text-decoration:none;
    padding:14px 22px;
    border-radius:10px;
    font-weight:600;
}

.pay-btn:hover{
    background:#7d1429;
}

.qr-wrap{
    text-align:center;
    margin-top:25px;
}

.qr-wrap img{
    width:180px;
    border-radius:16px;
    border:1px solid #eee;
    padding:10px;
}

.qr-wrap p{
    margin-top:12px;
    font-size:14px;
}

.contact-info p{
    line-height:1.9;
    color:#555;
}

.contact-info strong{
    color:#9a1a33;
}

@media(max-width:991px){

    .payment-hub{
        grid-template-columns:1fr;
    }

}

.payment-methods-modern{
    
    background:#fff;
}

.method-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:60px;
}

.method-card{
    background:#fff;
    padding:40px;
    border-radius:28px;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,.06);
    transition:.35s;
}

.method-card:hover{
    transform:translateY(-8px);
}

.method-card i{
    width:85px;
    height:85px;
    border-radius:22px;
    background:#faf3ee;

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

    margin:0 auto 25px;

    color:#9a1a33;
    font-size:34px;
}

.method-card h3{
    color:#9a1a33;
    margin-bottom:15px;
}

.method-card p{
    color:#666;
    line-height:1.8;
}

.featured{
    background:linear-gradient(
        135deg,
        #9a1a33,
        #7c1428
    );

    color:#fff;
}

.featured h3,
.featured p{
    color:#fff;
}

.featured i{
    background:rgba(255,255,255,.15);
    color:#fff;
}

.payment-center{
    padding:120px 0;
    background:#faf7f4;
}

.payment-layout{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:40px;
}

.bank-side{
    background:#fff;
    padding:50px;
    border-radius:30px;
}

.bank-side span{
    color:#b38e71;
    text-transform:uppercase;
    letter-spacing:3px;
    font-size:12px;
}

.bank-side h2{
    color:#9a1a33;
    margin:15px 0 30px;
}

.bank-table div{
    padding:18px 0;
    border-bottom:1px solid #eee;
}

.bank-table label{
    display:block;
    color:#888;
    margin-bottom:5px;
}

.bank-table strong{
    color:#333;
}

.payment-side{
    background:#9a1a33;
    color:#fff;
    text-align:center;
    padding:40px;
    border-radius:30px;
}

.payment-side img{
    width:220px;
    margin:auto;
    display:block;
    background:#fff;
    padding:10px;
    border-radius:20px;
}

.payment-side h3{
    margin-top:25px;
}

.pay-online-btn{
    display:inline-block;
    margin-top:20px;
    background:#fff;
    color:#9a1a33;
    padding:14px 30px;
    border-radius:50px;
    text-decoration:none;
    font-weight:600;
}

.scholarships-modern{
    padding:120px 0;
}

.scholar-modern-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:60px;
}

.scholar-modern-card{
    background:#fff;
    padding:40px;
    border-radius:28px;
    border-top:5px solid #b38e71;
    box-shadow:0 12px 35px rgba(0,0,0,.06);
}

.scholar-modern-card h3{
    color:#9a1a33;
    margin-bottom:18px;
}

.scholar-modern-card p{
    color:#666;
    line-height:1.9;
}

.finance-quick-info{
    margin-top:-60px;
    position:relative;
    z-index:10;
}

.finance-quick-info .container{
    background:#fff;
    border-radius:24px;
    padding:25px;

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

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

.quick-card{
    display:flex;
    align-items:center;
    gap:18px;
    padding:20px;
}

.quick-card i{
    width:60px;
    height:60px;
    border-radius:16px;

    background:#faf3ee;
    color:#9a1a33;

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

    font-size:24px;
}

.quick-card h4{
    margin:0 0 5px;
    color:#9a1a33;
    font-size:18px;
}

.quick-card span{
    color:#666;
    font-size:14px;
    line-height:1.6;
}
.finance-quick-info .container{
    background:#fff;
    border-radius:24px;
    padding:25px;

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

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

    /* ADD THESE */
    border:1px solid rgba(179,142,113,.25);
}

.quick-card{
    padding:20px;
    border-radius:18px;
    transition:.3s;
    border:1px solid transparent;
}

.quick-card:hover{
    border-color:#b38e71;
    background:#faf7f4;
}
@media(max-width:991px){

    .finance-quick-info .container{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:768px){

    .finance-quick-info{
        margin-top:30px;
    }

    .finance-quick-info .container{
        grid-template-columns:1fr;
    }

}

.finance-hero{
    position:relative;
    overflow:hidden;

    background:linear-gradient(
        135deg,
        #9a1a33 0%,
        #7b1329 100%
    );

    padding:140px 0;
}

.finance-hero .container{
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.finance-hero-content{
    max-width:700px;
    position:relative;
    z-index:5;
}

.finance-hero-content span{
    display:inline-block;

    color:#d8b79c;

    text-transform:uppercase;
    letter-spacing:3px;

    font-size:13px;
    font-weight:600;

    margin-bottom:20px;
}

.finance-hero-content h1{
    color:#fff;

    font-size:64px;
    line-height:1.1;

    margin-bottom:25px;
}

.finance-hero-content p{
    color:rgba(255,255,255,.88);

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

    max-width:650px;
}

/* RIGHT STRIPS */

.hero-strips{
    position:absolute;

    right:-20px;
    top:50%;

    transform:translateY(-50%);

    width:420px;
    height:420px;
}

.strip{
    position:absolute;

    width:140px;
    height:420px;

    border-radius:30px;

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

    transform:skew(-18deg);

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

.strip-1{
    right:220px;
    top:0;

    background-image:url('../images/fin1.jpg');
}

.strip-2{
    right:110px;
    top:30px;

    background-image:url('../images/fin2.jpg');
}

.strip-3{
    right:0;
    top:60px;

    background-image:url('../images/fin3.jpg');
}

/* SOFT OVERLAY EFFECT */

.strip::after{
    content:"";

    position:absolute;
    inset:0;

    background:linear-gradient(
        to bottom,
        rgba(154,26,51,.15),
        rgba(0,0,0,.25)
    );

    border-radius:30px;
}

/* DECORATIVE SHAPE */

.finance-hero::before{
    content:"";

    position:absolute;

    width:700px;
    height:700px;

    right:-250px;
    top:-250px;

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

    border-radius:50%;
}

/* MOBILE */

@media(max-width:991px){

    .hero-strips{
        display:none;
    }

    .finance-hero-content{
        max-width:100%;
    }

    .finance-hero-content h1{
        font-size:46px;
    }
}

@media(max-width:768px){

    .finance-hero{
        padding:100px 0;
    }

    .finance-hero-content h1{
        font-size:38px;
    }

    .finance-hero-content p{
        font-size:16px;
    }
}

/* =====================================
   INTRO
===================================== */

.guide-intro{
    padding:100px 0;
}

.intro-grid{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:60px;
    align-items:center;
}

.mini-title{
    color:#b38e71;
    text-transform:uppercase;
    letter-spacing:3px;
    font-size:13px;
    font-weight:700;
}

.guide-intro h2{
    font-size:52px;
    color:#9a1a33;
    margin:20px 0;
    line-height:1.2;
}

.guide-intro p{
    color:#666;
    line-height:2;
    font-size:17px;
}

.intro-stats{
    display:grid;
    gap:20px;
}

.stat-box{
    background:#fff;
    border-left:5px solid #b38e71;
    padding:25px;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.stat-box h3{
    color:#9a1a33;
    font-size:42px;
    margin-bottom:8px;
}

.stat-box span{
    color:#666;
}

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

.section-title{
    text-align:center;
    margin-bottom:60px;
}

.section-title h2{
    font-size:48px;
    color:#9a1a33;
}

/* =====================================
   JOURNEY FLOW
===================================== */

.journey-section{
    padding:110px 0;
    background:#faf7f4;
}

.journey-flow{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:20px;
}

.journey-step{
    background:#fff;
    width:180px;
    height:180px;
    border-radius:50%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;

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

.journey-step i{
    font-size:34px;
    color:#b38e71;
    margin-bottom:15px;
}

.journey-step h3{
    color:#9a1a33;
    font-size:18px;
}

.journey-arrow{
    font-size:40px;
    color:#b38e71;
    font-weight:700;
}

/* =====================================
   LEARNING MODEL
===================================== */

.learning-model{
    padding:120px 0;
}

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

.model-content h2{
    font-size:48px;
    color:#9a1a33;
    margin:20px 0;
}

.model-content p{
    color:#666;
    line-height:2;
}

.bar-item{
    margin-bottom:30px;
}

.bar-item label{
    display:block;
    margin-bottom:10px;
    color:#333;
    font-weight:600;
}

.bar{
    height:14px;
    background:#ece7e2;
    border-radius:50px;
    overflow:hidden;
}

.bar span{
    display:block;
    height:100%;
    background:linear-gradient(
        90deg,
        #9a1a33,
        #b38e71
    );
    border-radius:50px;
}

/* =====================================
   ASSESSMENT
===================================== */

.assessment-section{
    padding:110px 0;
    background:#faf7f4;
}

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

.assessment-grid div{
    background:#fff;
    padding:35px;
    text-align:center;
    border-radius:18px;
    color:#9a1a33;
    font-weight:600;
    box-shadow:0 8px 25px rgba(0,0,0,.05);
}

/* =====================================
   MINISTRY FORMATION
===================================== */

.formation-section{
    padding:120px 0;
}

.formation-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.formation-card{
    background:#fff;
    padding:40px 20px;
    text-align:center;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.formation-card i{
    font-size:42px;
    color:#b38e71;
    margin-bottom:20px;
}

.formation-card h3{
    color:#9a1a33;
    font-size:20px;
}

/* =====================================
   STUDENT SUPPORT
===================================== */

.support-section{
    padding:110px 0;
    background:#faf7f4;
}

.support-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

.support-box{
    background:#fff;
    padding:35px;
    border-radius:20px;
    border-left:5px solid #b38e71;
}

.support-box h3{
    color:#9a1a33;
    margin-bottom:12px;
}

.support-box p{
    color:#666;
    line-height:1.8;
}

/* =====================================
   GRADUATION PATHWAY
===================================== */

.graduation-path{
    padding:120px 0;
}

.pathway{
    max-width:450px;
    margin:auto;
    text-align:center;
}

.pathway div{
    background:#fff;
    padding:22px;
    border-radius:15px;
    margin:10px 0;

    color:#9a1a33;
    font-weight:700;

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

.pathway span{
    display:block;
    color:#b38e71;
    font-size:32px;
    margin:8px 0;
}

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

.academic-quote{
    padding:140px 0;
    background:linear-gradient(
        135deg,
        #9a1a33,
        #7a1328
    );
    text-align:center;
}

.academic-quote blockquote{
    max-width:900px;
    margin:auto;

    color:#fff;
    font-size:42px;
    line-height:1.6;

    font-family:Georgia, serif;
    font-style:italic;
}

.academic-quote span{
    display:block;
    margin-top:25px;

    color:#d8b79c;

    text-transform:uppercase;
    letter-spacing:4px;

    font-weight:700;
}

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

@media(max-width:991px){

    .intro-grid,
    .model-grid{
        grid-template-columns:1fr;
    }

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

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

}

@media(max-width:768px){

    .guide-intro h2,
    .model-content h2,
    .section-title h2{
        font-size:36px;
    }

    .assessment-grid,
    .formation-grid,
    .support-grid{
        grid-template-columns:1fr;
    }

    .journey-arrow{
        display:none;
    }

    .academic-quote blockquote{
        font-size:28px;
    }

}

/* =====================================
   ACADEMIC PATHWAY
===================================== */

.academic-pathway{
    padding:120px 0;
    background:#faf7f4;
    position:relative;
}

.academic-pathway .section-title{
    text-align:center;
    max-width:850px;
    margin:0 auto 80px;
}

.academic-pathway .section-title span{
    display:inline-block;
    color:#b38e71;
    text-transform:uppercase;
    letter-spacing:3px;
    font-weight:700;
    margin-bottom:15px;
}

.academic-pathway .section-title h2{
    font-size:54px;
    color:#9a1a33;
    margin-bottom:20px;
}

.academic-pathway .section-title p{
    color:#666;
    line-height:2;
    font-size:17px;
}

/* LINE */

.pathway-line{
    position:absolute;
    left:10%;
    right:10%;
    top:420px;

    height:4px;
    background:#d9c4b1;
    z-index:1;
}

/* GRID */

.pathway-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:25px;
    position:relative;
    z-index:2;
}

/* CARD */

.pathway-card{
    background:#fff;
    padding:35px 25px;

    border-radius:24px;

    text-align:center;

    position:relative;

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

    transition:.35s;
}

.pathway-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 45px rgba(0,0,0,.12);
}

/* STEP */

.step-no{
    position:absolute;
    top:15px;
    right:18px;

    font-size:14px;
    font-weight:700;

    color:#d6c0ad;
}

/* ICON */

.pathway-card i{
    width:85px;
    height:85px;

    border-radius:50%;

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

    margin:0 auto 20px;

    font-size:34px;

    background:#9a1a33;
    color:#fff;
}

/* ALTERNATE ICONS */

.pathway-card:nth-child(even) i{
    background:#b38e71;
}

/* TITLES */

.pathway-card h3{
    color:#9a1a33;
    font-size:22px;
    margin-bottom:12px;
}

.pathway-card p{
    color:#666;
    line-height:1.8;
    font-size:15px;
}

/* GRADUATION CARD */

.graduation-card{
    background:linear-gradient(
        135deg,
        #9a1a33,
        #7d152b
    );

    color:#fff;

    transform:scale(1.05);
}

.graduation-card h3,
.graduation-card p,
.graduation-card .step-no{
    color:#fff;
}

.graduation-card i{
    background:#b38e71 !important;

    width:100px;
    height:100px;

    font-size:40px;

    box-shadow:
        0 0 0 8px rgba(255,255,255,.15);
}

/* PREMIUM EFFECT */

.graduation-card::before{
    content:"";

    position:absolute;
    top:-30px;
    right:-30px;

    width:120px;
    height:120px;

    border-radius:50%;

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

/* RESPONSIVE */

@media(max-width:1200px){

    .pathway-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .pathway-line{
        display:none;
    }

}

@media(max-width:768px){

    .academic-pathway{
        padding:90px 0;
    }

    .academic-pathway .section-title h2{
        font-size:38px;
    }

    .pathway-grid{
        grid-template-columns:1fr;
    }

    .graduation-card{
        transform:none;
    }

}

.academic-hero-pro{
    padding:120px 0;
    background:
    linear-gradient(
        135deg,
        #9a1a33 0%,
        #7b1429 100%
    );

    overflow:hidden;
    position:relative;
}

.hero-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:80px;
    align-items:center;
}

.hero-content{
    color:#fff;
}

.hero-tag{
    display:inline-block;

    padding:10px 18px;

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

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

    border-radius:40px;

    letter-spacing:2px;
    text-transform:uppercase;
    font-size:13px;
    font-weight:700;

    margin-bottom:25px;
}

.hero-content h1{
    font-size:72px;
    line-height:1.05;
    margin-bottom:25px;
}

.hero-content p{
    font-size:20px;
    line-height:1.9;
    color:rgba(255,255,255,.85);

    max-width:700px;
}

.hero-features{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;

    margin-top:40px;
}

.hero-features div{
    background:rgba(255,255,255,.08);

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

    padding:15px 18px;

    border-radius:14px;
}

.hero-features i{
    margin-right:10px;
    color:#d6b79d;
}

.hero-buttons{
    display:flex;
    gap:18px;
    margin-top:40px;
}

.hero-btn-primary{
    background:#fff;
    color:#9a1a33;
    padding:16px 32px;
    border-radius:50px;
    text-decoration:none;
    font-weight:700;
}

.hero-btn-outline{
    border:1px solid rgba(255,255,255,.35);
    color:#fff;
    padding:16px 32px;
    border-radius:50px;
    text-decoration:none;
}

/* RIGHT SIDE */

.hero-visual{
    position:relative;
    height:550px;
}

.hero-strip{
    position:absolute;
    overflow:hidden;

    border-radius:25px;

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

.hero-strip img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.strip-1{
    width:240px;
    height:420px;
    top:20px;
    right:250px;

    transform:rotate(-8deg);
}

.strip-2{
    width:240px;
    height:480px;
    top:0;
    right:120px;

    transform:rotate(4deg);
}

.strip-3{
    width:240px;
    height:420px;
    top:60px;
    right:0;

    transform:rotate(-6deg);
}

.hero-stat{
    position:absolute;

    background:#fff;

    border-radius:20px;

    padding:20px 25px;

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

.hero-stat strong{
    display:block;
    color:#9a1a33;
    font-size:28px;
}

.hero-stat span{
    color:#666;
}

.stat-1{
    left:20px;
    top:70px;
}

.stat-2{
    left:70px;
    bottom:80px;
}

@media(max-width:991px){

    .hero-grid{
        grid-template-columns:1fr;
    }

    .hero-content h1{
        font-size:46px;
    }

    .hero-visual{
        height:420px;
        margin-top:40px;
    }

    .hero-features{
        grid-template-columns:1fr;
    }
}

/* =========================================
   FORMATION PREMIUM SECTION
========================================= */

.formation-premium{
    padding:120px 0;
    background:#faf8f5;
}

/* TOP SHOWCASE */

.formation-showcase{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
    margin-bottom:80px;
}

.formation-image{
    position:relative;
}

.formation-image img{
    width:100%;
    height:600px;
    object-fit:cover;

    border-radius:30px;

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

/* Gold Accent */

.formation-image::before{
    content:"";

    position:absolute;

    width:180px;
    height:180px;

    border:10px solid #b38e71;

    border-radius:30px;

    top:-30px;
    left:-30px;

    z-index:-1;
}

/* CONTENT */

.formation-content span{
    display:inline-block;

    color:#b38e71;

    text-transform:uppercase;

    letter-spacing:4px;

    font-size:13px;

    font-weight:700;

    margin-bottom:20px;
}

.formation-content h2{
    font-size:58px;
    line-height:1.15;

    color:#9a1a33;

    margin-bottom:25px;
}

.formation-content p{
    color:#666;

    font-size:18px;

    line-height:2;

    margin-bottom:35px;
}

/* QUOTE */

.formation-content blockquote{

    background:#fff;

    border-left:5px solid #b38e71;

    padding:30px;

    border-radius:18px;

    font-size:22px;

    line-height:1.8;

    color:#333;

    font-style:italic;

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

.formation-content blockquote strong{

    display:block;

    margin-top:15px;

    color:#9a1a33;

    font-size:15px;

    letter-spacing:2px;

    text-transform:uppercase;

    font-style:normal;
}

/* VALUE BOXES */

.formation-values{

    display:grid;

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

    gap:25px;
}

.value-box{

    background:#fff;

    padding:40px 30px;

    border-radius:24px;

    text-align:center;

    position:relative;

    overflow:hidden;

    transition:.35s;

    border-top:4px solid #b38e71;

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

.value-box:hover{

    transform:translateY(-10px);

    box-shadow:
    0 20px 50px rgba(154,26,51,.12);
}

/* Hover Overlay */

.value-box::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:0;

    background:
    linear-gradient(
        135deg,
        #9a1a33,
        #7b1429
    );

    transition:.4s;

    z-index:0;
}

.value-box:hover::before{
    height:100%;
}

.value-box *{
    position:relative;
    z-index:2;
}

.value-box i{

    width:80px;
    height:80px;

    border-radius:20px;

    background:#9a1a33;

    color:#fff;

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

    margin:0 auto 25px;

    font-size:32px;

    transition:.4s;
}

.value-box h3{

    color:#9a1a33;

    font-size:28px;

    margin-bottom:15px;

    transition:.4s;
}

.value-box p{

    color:#666;

    line-height:1.8;

    transition:.4s;
}

/* Hover Colors */

.value-box:hover i{
    background:#b38e71;
}

.value-box:hover h3,
.value-box:hover p{
    color:#fff;
}

/* RESPONSIVE */

@media(max-width:1100px){

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

    .formation-showcase{
        grid-template-columns:1fr;
    }

    .formation-image img{
        height:500px;
    }

    .formation-content h2{
        font-size:46px;
    }
}

@media(max-width:768px){

    .formation-premium{
        padding:80px 0;
    }

    .formation-values{
        grid-template-columns:1fr;
    }

    .formation-content h2{
        font-size:34px;
    }

    .formation-image img{
        height:350px;
    }

    .formation-content blockquote{
        font-size:18px;
    }
}

/* =========================================
   ACADEMIC GUIDE — 70:30 LAYOUT
   Replaces previous standalone section CSS
========================================= */

.academic-guide-split{
    padding:80px 0 100px;
    background:#fff;
}

.ags-grid{
    display:grid;
    grid-template-columns:7fr 3fr;
    gap:50px;
    align-items:start;
}

/* =========================================
   SHARED LABEL STYLES
========================================= */

.mini-title{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom:16px;
    color:#b38e71;
    font-size:11px;
    letter-spacing:4px;
    text-transform:uppercase;
    font-weight:700;
}

.mini-title::before{
    content:"";
    width:28px;
    height:1px;
    background:#b38e71;
}

.ags-eyebrow{
    display:inline-block;
    margin-bottom:12px;
    color:#b38e71;
    font-size:10.5px;
    letter-spacing:3px;
    text-transform:uppercase;
    font-weight:800;
}

/* =========================================
   LEFT — MAIN GUIDE COLUMN
========================================= */

.ags-main{
    display:flex;
    flex-direction:column;
    gap:64px;
}

.ags-block{
    scroll-margin-top:100px;
}

#guide-intro h2{
    font-size:36px;
    line-height:1.18;
    letter-spacing:-1px;
    color:#161616;
    font-weight:800;
    margin-bottom:18px;
}

#guide-intro > p{
    font-size:15px;
    line-height:1.9;
    color:#5a5a5a;
    margin-bottom:32px;
}

.ags-block-head{
    margin-bottom:34px;
}

.ags-block-head h3{
    font-size:28px;
    color:#161616;
    font-weight:800;
    letter-spacing:-.5px;
    margin-bottom:12px;
}

.ags-block-head p{
    font-size:14.5px;
    line-height:1.8;
    color:#666;
    max-width:560px;
}

/* HIGHLIGHTS (intro block) */

.qas-highlights{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

.qas-highlight{
    display:flex;
    gap:13px;
    align-items:flex-start;
    background:#faf7f4;
    border:1px solid #f0eee8;
    border-radius:16px;
    padding:18px;
    transition:.3s ease;
}

.qas-highlight:hover{
    background:#fff;
    box-shadow:0 14px 35px rgba(0,0,0,.06);
    transform:translateY(-4px);
}

.qas-highlight i{
    width:38px;
    height:38px;
    flex-shrink:0;
    border-radius:11px;
    background:#710014;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
}

.qas-highlight h4{
    font-size:13.5px;
    color:#161616;
    font-weight:700;
    margin-bottom:4px;
}

.qas-highlight p{
    font-size:12px;
    color:#777;
    line-height:1.6;
    margin:0;
}

/* =========================================
   PATHWAY (within guide)
========================================= */

.pathway-line{
    position:relative;
    height:0;
}

.pathway-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    position:relative;
}

.pathway-card{
    background:#fff;
    border:1px solid #f0eee9;
    padding:26px 20px;
    border-radius:20px;
    text-align:center;
    position:relative;
    box-shadow:0 12px 30px rgba(0,0,0,.045);
    transition:.35s ease;
}

.pathway-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(113,0,20,.12);
    border-color:rgba(179,142,113,.3);
}

.step-no{
    position:absolute;
    top:12px;
    right:14px;
    font-size:11px;
    font-weight:800;
    color:#e3d6c8;
}

.pathway-card i{
    width:54px;
    height:54px;
    border-radius:50%;
    background:#710014;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    margin:0 auto 16px;
    transition:.3s ease;
}

.pathway-card:nth-child(even) i{
    background:#b38e71;
}

.pathway-card:hover i{
    transform:scale(1.1) rotate(-4deg);
}

.pathway-card h3{
    color:#161616;
    font-size:15.5px;
    font-weight:700;
    margin-bottom:8px;
}

.pathway-card p{
    color:#777;
    font-size:12px;
    line-height:1.65;
}

.graduation-card{
    background:linear-gradient(150deg,#710014 0%,#4a000d 100%);
    border:none;
}

.graduation-card h3,
.graduation-card p{
    color:#fff;
}

.graduation-card p{
    color:rgba(255,255,255,.78);
}

.graduation-card .step-no{
    color:rgba(255,255,255,.35);
}

.graduation-card i{
    background:#fff;
    color:#710014;
}

/* =========================================
   LEARNING MODEL BARS
========================================= */

.model-bars{
    display:flex;
    flex-direction:column;
    gap:24px;
    max-width:640px;
}

.bar-item label{
    display:flex;
    justify-content:space-between;
    margin-bottom:9px;
    color:#161616;
    font-weight:700;
    font-size:13.5px;
}

.bar-pct{
    color:#710014;
    font-weight:800;
}

.bar{
    height:11px;
    background:#eee7dd;
    border-radius:50px;
    overflow:hidden;
}

.bar span{
    display:block;
    height:100%;
    border-radius:50px;
    background:linear-gradient(90deg,#710014,#b38e71);
    animation:barGrow 1.2s ease forwards;
}

@keyframes barGrow{
    from{ width:0 !important; }
}

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

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

.assessment-grid div{
    background:#faf7f4;
    border:1px solid #f0eee8;
    padding:24px 16px;
    text-align:center;
    border-radius:16px;
    color:#710014;
    font-weight:700;
    font-size:13.5px;
    transition:.3s ease;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
}

.assessment-grid i{
    font-size:20px;
    color:#b38e71;
}

.assessment-grid div:hover{
    background:#710014;
    color:#fff;
    transform:translateY(-5px);
    box-shadow:0 16px 32px rgba(113,0,20,.16);
}

.assessment-grid div:hover i{
    color:#fff;
}

/* =========================================
   MINISTRY FORMATION GRID
========================================= */

.formation-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}

.formation-card{
    background:#fff;
    border:1px solid #f0eee9;
    padding:30px 22px;
    text-align:center;
    border-radius:20px;
    box-shadow:0 12px 30px rgba(0,0,0,.045);
    transition:.35s ease;
    border-top:3px solid transparent;
}

.formation-card:hover{
    transform:translateY(-8px);
    border-top-color:#b38e71;
    box-shadow:0 20px 42px rgba(113,0,20,.1);
}

.formation-card i{
    width:56px;
    height:56px;
    border-radius:16px;
    background:rgba(113,0,20,.07);
    color:#710014;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    margin:0 auto 16px;
    transition:.3s ease;
}

.formation-card:hover i{
    background:#710014;
    color:#fff;
}

.formation-card h3{
    color:#161616;
    font-size:14.5px;
    font-weight:700;
    margin-bottom:6px;
}

.formation-card p{
    color:#888;
    font-size:12px;
    line-height:1.6;
}

/* =========================================
   END CTA INSIDE GUIDE
========================================= */

.ags-end-cta{
    background:#faf7f4;
    border:1px solid #f0eee8;
    border-radius:24px;
    padding:36px;
    text-align:center;
}

.ags-end-cta h4{
    font-size:21px;
    color:#161616;
    font-weight:800;
    margin-bottom:8px;
}

.ags-end-cta p{
    font-size:13.5px;
    color:#777;
    margin-bottom:20px;
}

.ags-end-cta .qas-cta-btn{
    max-width:280px;
    margin:0 auto;
}

/* =========================================
   RIGHT — STICKY SIDEBAR
========================================= */

.qas-sidebar{
    position:sticky;
    top:100px;
}

.qas-sidebar-card{
    background:#faf7f4;
    border:1px solid #f0eee8;
    border-radius:24px;
    padding:26px;
}

.qas-sidebar-label{
    display:block;
    font-size:10px;
    letter-spacing:3px;
    text-transform:uppercase;
    color:#b38e71;
    font-weight:800;
    margin-bottom:14px;
}

.qas-sidebar-divider{
    height:1px;
    background:#e8e2d8;
    margin:20px 0;
}

/* JUMP LINKS (in-page nav) */

.ags-jumplinks{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.ags-jumplink{
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px 10px;
    border-radius:10px;
    font-size:12.5px;
    font-weight:600;
    color:#777;
    text-decoration:none;
    transition:.25s ease;
}

.ags-jump-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#d9cfc2;
    flex-shrink:0;
    transition:.25s ease;
}

.ags-jumplink:hover{
    background:#fff;
    color:#710014;
}

.ags-jumplink.active{
    background:#fff;
    color:#710014;
    font-weight:800;
    box-shadow:0 6px 18px rgba(0,0,0,.05);
}

.ags-jumplink.active .ags-jump-dot{
    background:#710014;
}

/* QUICK LINKS */

.qas-links{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:20px;
}

.qas-links a{
    display:flex;
    align-items:center;
    gap:12px;
    background:#fff;
    border:1px solid #f0eee8;
    border-radius:14px;
    padding:13px 14px;
    text-decoration:none;
    transition:.25s ease;
}

.qas-links a:hover{
    border-color:#710014;
    background:#fff7f5;
    transform:translateX(4px);
}

.qas-link-icon{
    width:36px;
    height:36px;
    flex-shrink:0;
    border-radius:10px;
    background:rgba(113,0,20,.08);
    color:#710014;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    transition:.25s ease;
}

.qas-links a:hover .qas-link-icon{
    background:#710014;
    color:#fff;
}

.qas-link-text{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:2px;
    font-size:12.5px;
    font-weight:700;
    color:#161616;
    min-width:0;
}

.qas-link-text small{
    font-size:10.5px;
    color:#999;
    font-weight:500;
}

.qas-arrow{
    font-size:9px;
    color:#ccc;
    transition:.25s ease;
    flex-shrink:0;
}

.qas-links a:hover .qas-arrow{
    color:#710014;
    transform:translateX(3px);
}

/* CTA BUTTON */

.qas-cta-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    background:#710014;
    color:#fff;
    text-decoration:none;
    padding:14px;
    border-radius:14px;
    font-size:13px;
    font-weight:700;
    letter-spacing:.3px;
    transition:.3s ease;
}

.qas-cta-btn:hover{
    background:#8f021d;
    transform:translateY(-3px);
    box-shadow:0 14px 30px rgba(113,0,20,.25);
}

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

@media(max-width:991px){

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

    .qas-sidebar{
        position:static;
    }

    .qas-sidebar-card{
        max-height:none;
    }

    .qas-highlights,
    .pathway-grid,
    .assessment-grid,
    .formation-grid{
        grid-template-columns:1fr 1fr;
    }

    #guide-intro h2{
        font-size:30px;
    }
}

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

@media(max-width:600px){

    .academic-guide-split{
        padding:60px 0 70px;
    }

    .ags-main{
        gap:48px;
    }

    .qas-highlights,
    .pathway-grid,
    .assessment-grid,
    .formation-grid{
        grid-template-columns:1fr;
    }

    #guide-intro h2{
        font-size:26px;
    }

    .ags-block-head h3{
        font-size:23px;
    }

    .ags-end-cta{
        padding:26px 20px;
    }
}

/* =========================================
   ELIGIBILITY TEASER CARD — HOMEPAGE
========================================= */

.elig-teaser-section{
    padding:50px 20px;
    background:#fff;
}

.elig-teaser-card{
    max-width:1100px;
    margin:0 auto;
    background:linear-gradient(120deg,#710014 0%,#4a000d 100%);
    border-radius:28px;
    padding:42px 48px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
    position:relative;
    overflow:hidden;
}

.elig-teaser-card::before{
    content:"";
    position:absolute;
    width:280px;
    height:280px;
    border-radius:50%;
    background:rgba(255,255,255,.04);
    top:-120px;
    right:60px;
}

.elig-teaser-card::after{
    content:"";
    position:absolute;
    width:160px;
    height:160px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.08);
    bottom:-70px;
    left:8%;
}

/* LEFT */

.elig-teaser-left{
    position:relative;
    z-index:2;
    max-width:600px;
}

.elig-teaser-tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 16px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.16);
    border-radius:30px;
    color:#e8c79a;
    font-size:11px;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
    margin-bottom:18px;
}

.elig-teaser-left h3{
    font-size:28px;
    line-height:1.25;
    color:#fff;
    font-weight:800;
    letter-spacing:-.5px;
    margin-bottom:12px;
}

.elig-teaser-left p{
    font-size:14.5px;
    line-height:1.8;
    color:rgba(255,255,255,.82);
    margin-bottom:18px;
}

.elig-teaser-meta{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

.elig-teaser-meta span{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12.5px;
    color:rgba(255,255,255,.7);
    font-weight:600;
}

.elig-teaser-meta i{
    color:#e8c79a;
}

/* RIGHT */

.elig-teaser-right{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    flex-shrink:0;
}

.elig-teaser-btn{
    display:inline-flex;
    align-items:center;
    gap:12px;
    background:#fff;
    color:#710014;
    text-decoration:none;
    padding:17px 32px;
    border-radius:50px;
    font-size:14.5px;
    font-weight:800;
    letter-spacing:.3px;
    transition:.3s ease;
    box-shadow:0 16px 35px rgba(0,0,0,.22);
    white-space:nowrap;
}

.elig-teaser-btn i{
    font-size:18px;
    color:#b38e71;
}

.elig-teaser-btn:hover{
    transform:translateY(-4px);
    box-shadow:0 22px 45px rgba(0,0,0,.28);
}

.elig-teaser-subtext{
    font-size:11px;
    color:rgba(255,255,255,.55);
    letter-spacing:.3px;
}

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

@media(max-width:900px){

    .elig-teaser-card{
        flex-direction:column;
        text-align:center;
        padding:36px 28px;
    }

    .elig-teaser-meta{
        justify-content:center;
    }

    .elig-teaser-left{
        max-width:100%;
    }
}

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

@media(max-width:480px){

    .elig-teaser-section{
        padding:36px 16px;
    }

    .elig-teaser-card{
        padding:28px 22px;
        border-radius:20px;
    }

    .elig-teaser-left h3{
        font-size:22px;
    }

    .elig-teaser-btn{
        width:100%;
        justify-content:center;
    }
}

/* =========================================
   HBI STORIES — EDITORIAL FEATURE LAYOUT
========================================= */

.hbi-stories-feature{
    position:relative;
    padding:100px 20px;
    background:#161616;
    overflow:hidden;
}

.hbi-stories-feature::before{
    content:"";
    position:absolute;
    width:480px;
    height:480px;
    border-radius:50%;
    background:rgba(113,0,20,.18);
    filter:blur(80px);
    top:-200px;
    right:-120px;
    pointer-events:none;
}

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

.stories-feature-head{
    text-align:center;
    max-width:700px;
    margin:0 auto 56px;
    position:relative;
    z-index:2;
}

.stories-feature-head .mini-tag{
    display:inline-block;
    margin-bottom:16px;
    color:#b38e71;
    font-size:11px;
    letter-spacing:4px;
    text-transform:uppercase;
    font-weight:700;
}

.stories-feature-head h2{
    font-size:46px;
    line-height:1.08;
    color:#f2f1ef;
    font-weight:700;
    letter-spacing:-1.5px;
    margin-bottom:18px;
}

.stories-feature-head h2 em{
    font-style:italic;
    color:#b38e71;
    font-weight:500;
}

.stories-feature-head p{
    font-size:15.5px;
    line-height:1.8;
    color:rgba(242,241,239,.62);
}

/* =========================================
   LAYOUT
========================================= */

.stories-feature-layout{
    display:grid;
    grid-template-columns:1.7fr 1fr;
    gap:30px;
    position:relative;
    z-index:2;
}

/* =========================================
   MAIN FEATURE CARD
========================================= */

.story-feature-main{
    position:relative;
    background:#1f1f1f;
    border-radius:32px;
    overflow:hidden;
    display:grid;
    grid-template-columns:1fr 1fr;
    min-height:480px;
    transition:opacity .3s ease;
}

.story-feature-main.story-fade-out{
    opacity:0;
}

/* IMAGE SIDE */

.story-feature-img{
    position:relative;
    overflow:hidden;
}

.story-feature-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.story-feature-img-fade{
    position:absolute;
    inset:0;
    background:linear-gradient(
        to right,
        transparent 60%,
        #1f1f1f 100%
    );
}

/* TEXT SIDE */

.story-feature-text{
    padding:54px 50px 50px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    position:relative;
}

.story-feature-quote-mark{
    font-family:Georgia, serif;
    font-size:80px;
    line-height:1;
    color:rgba(179,142,113,.25);
    margin-bottom:6px;
}

.story-feature-quote{
    font-size:23px;
    line-height:1.55;
    color:#f2f1ef;
    font-weight:300;
    margin-bottom:32px;
}

.story-feature-quote em{
    font-style:italic;
    font-weight:700;
    color:#e8c79a;
}

.story-feature-person h4{
    font-size:18px;
    color:#fff;
    font-weight:700;
    margin-bottom:6px;
}

.story-feature-person span{
    font-size:13px;
    color:#b38e71;
    letter-spacing:.5px;
}

.story-feature-link{
    display:inline-flex;
    align-items:center;
    gap:12px;
    margin-top:28px;
    color:#fff;
    text-decoration:none;
    font-size:12.5px;
    letter-spacing:2px;
    text-transform:uppercase;
    font-weight:600;
    padding:14px 26px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:50px;
    width:fit-content;
    transition:.3s ease;
}

.story-feature-link:hover{
    background:#fff;
    color:#161616;
    border-color:#fff;
    gap:16px;
}

/* =========================================
   SIDE RAIL
========================================= */

.story-feature-rail{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.rail-label{
    font-size:10.5px;
    letter-spacing:3px;
    text-transform:uppercase;
    color:#b38e71;
    font-weight:700;
    margin-bottom:6px;
}

.story-rail-item{
    display:flex;
    align-items:center;
    gap:14px;
    background:#1f1f1f;
    border:1px solid rgba(255,255,255,.06);
    border-radius:18px;
    padding:12px;
    cursor:pointer;
    transition:.3s ease;
    position:relative;
    overflow:hidden;
}

.story-rail-item:hover{
    background:#262626;
    border-color:rgba(179,142,113,.3);
}

.story-rail-item.active{
    border-color:#b38e71;
    background:#262220;
}

.story-rail-item.active::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:3px;
    background:#b38e71;
}

.rail-item-img{
    width:54px;
    height:54px;
    border-radius:14px;
    overflow:hidden;
    flex-shrink:0;
}

.rail-item-img img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.rail-item-text{
    flex:1;
    min-width:0;
}

.rail-item-text p{
    font-size:13px;
    color:#f2f1ef;
    font-weight:600;
    line-height:1.4;
    margin-bottom:4px;
}

.rail-item-text span{
    font-size:11px;
    color:rgba(242,241,239,.5);
}

.rail-play-icon{
    font-size:10px;
    color:rgba(255,255,255,.25);
    flex-shrink:0;
    transition:.3s ease;
}

.story-rail-item.active .rail-play-icon{
    color:#b38e71;
}

/* VIEW ALL */

.rail-viewall{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-top:8px;
    padding:15px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:16px;
    color:#f2f1ef;
    text-decoration:none;
    font-size:12px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    font-weight:600;
    transition:.3s ease;
}

.rail-viewall:hover{
    background:#fff;
    color:#161616;
    border-color:#fff;
}

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

@media(max-width:991px){

    .stories-feature-layout{
        grid-template-columns:1fr;
    }

    .story-feature-main{
        grid-template-columns:1fr;
        min-height:auto;
    }

    .story-feature-img{
        height:300px;
    }

    .story-feature-img-fade{
        background:linear-gradient(
            to bottom,
            transparent 60%,
            #1f1f1f 100%
        );
    }

    .story-feature-text{
        padding:36px 30px;
    }

    .story-feature-quote{
        font-size:19px;
    }

    .stories-feature-head h2{
        font-size:34px;
    }
}

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

@media(max-width:480px){

    .hbi-stories-feature{
        padding:70px 16px;
    }

    .story-feature-text{
        padding:28px 22px;
    }

    .story-feature-quote-mark{
        font-size:60px;
    }

    .story-feature-quote{
        font-size:17px;
    }

    .stories-feature-head h2{
        font-size:28px;
    }

    .rail-item-img{
        width:46px;
        height:46px;
    }
}

/* =========================================
   HBI STORIES — DUAL FEATURED (BLOG + NEWS)
========================================= */

.hbi-stories-dual{
    position:relative;
    padding:90px 20px;
    background:#f2f1ef;
    overflow:hidden;
}

/* =========================================
   HEAD
========================================= */

.stories-dual-head{
    text-align:center;
    max-width:680px;
    margin:0 auto 50px;
}

.stories-dual-head .mini-tag{
    display:inline-block;
    margin-bottom:14px;
    color:#b38e71;
    font-size:11px;
    letter-spacing:4px;
    text-transform:uppercase;
    font-weight:700;
}

.stories-dual-head h2{
    font-size:42px;
    line-height:1.12;
    color:#161616;
    font-weight:700;
    letter-spacing:-1.2px;
}

.stories-dual-head h2 em{
    font-style:italic;
    color:#710014;
    font-weight:600;
}

/* =========================================
   DUAL FEATURED GRID
========================================= */

.stories-dual-featured{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:26px;
    margin-bottom:30px;
}

.dual-feature-card{
    position:relative;
    display:block;
    text-decoration:none;
    height:520px;
    border-radius:30px;
    overflow:hidden;
    box-shadow:0 18px 45px rgba(0,0,0,.08);
    transition:.45s ease;
}

.dual-feature-card:hover{
    transform:translateY(-6px);
    box-shadow:0 28px 60px rgba(0,0,0,.14);
}

.dual-feature-img{
    position:absolute;
    inset:0;
}

.dual-feature-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:1s ease;
}

.dual-feature-card:hover .dual-feature-img img{
    transform:scale(1.06);
}

.dual-feature-fade{
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(10,10,10,.92) 0%,
        rgba(10,10,10,.55) 38%,
        rgba(10,10,10,.10) 65%,
        transparent 100%
    );
}

/* CONTENT */

.dual-feature-content{
    position:relative;
    z-index:2;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:36px;
}

/* TYPE TAG — Blog vs News */

.dual-type-tag{
    display:inline-flex;
    align-items:center;
    gap:7px;
    width:fit-content;
    padding:7px 14px;
    border-radius:30px;
    font-size:11px;
    font-weight:800;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-bottom:14px;
}

.tag-blog{
    background:#1f3a93;
    color:#dce6ff;
}

.tag-news{
    background:#a3271c;
    color:#ffe3df;
}

/* TOPIC TAG */

.story-tag{
    display:inline-block;
    width:fit-content;
    padding:7px 15px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.18);
    border-radius:30px;
    color:#f2f1ef;
    font-size:10px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    font-weight:600;
    margin-bottom:16px;
    backdrop-filter:blur(6px);
}

.dual-feature-content h2{
    font-size:27px;
    line-height:1.22;
    color:#fff;
    font-weight:700;
    letter-spacing:-.5px;
    margin-bottom:12px;
}

.dual-feature-content p{
    font-size:13.5px;
    line-height:1.75;
    color:rgba(255,255,255,.78);
    margin-bottom:18px;
    max-width:90%;
}

.story-meta{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:12px;
    color:rgba(255,255,255,.6);
    margin-bottom:18px;
}

.story-meta i{
    margin-right:4px;
    font-size:11px;
}

.meta-dot{
    opacity:.5;
}

.read-story{
    display:inline-flex;
    align-items:center;
    gap:12px;
    color:#fff;
    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
    font-weight:700;
}

.read-story-arrow{
    width:30px;
    height:30px;
    border-radius:50%;
    background:rgba(255,255,255,.15);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    transition:.3s ease;
}

.dual-feature-card:hover .read-story-arrow{
    background:#fff;
    color:#161616;
    transform:translateX(4px);
}

/* =========================================
   MINI RAIL
========================================= */

.stories-mini-rail{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin-bottom:38px;
}

.mini-story{
    display:flex;
    flex-direction:column;
    background:#fff;
    border-radius:22px;
    overflow:hidden;
    text-decoration:none;
    box-shadow:0 10px 28px rgba(0,0,0,.05);
    transition:.35s ease;
}

.mini-story:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 38px rgba(113,0,20,.08);
}

.mini-image{
    height:150px;
    overflow:hidden;
}

.mini-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.7s ease;
}

.mini-story:hover .mini-image img{
    transform:scale(1.08);
}

.mini-content{
    padding:18px;
    display:flex;
    flex-direction:column;
    gap:10px;
    flex:1;
}

.mini-tag-pill{
    width:fit-content;
    padding:4px 11px;
    border-radius:20px;
    font-size:9.5px;
    font-weight:800;
    letter-spacing:.8px;
    text-transform:uppercase;
}

.mini-tag-pill.tag-blog{
    background:#eaf0ff;
    color:#1f3a93;
}

.mini-tag-pill.tag-news{
    background:#fde9e7;
    color:#a3271c;
}

.mini-content h3{
    font-size:14.5px;
    line-height:1.4;
    color:#161616;
    font-weight:700;
    flex:1;
}

.mini-link{
    display:flex;
    align-items:center;
    gap:7px;
    color:#710014;
    font-size:11px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    font-weight:700;
}

.mini-link i{
    font-size:10px;
    transition:.25s ease;
}

.mini-story:hover .mini-link i{
    transform:translateX(3px);
}

/* =========================================
   VIEW ALL BUTTONS
========================================= */

.stories-viewall-wrap{
    display:flex;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap;
}

.stories-viewall-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 28px;
    border-radius:50px;
    text-decoration:none;
    font-size:13px;
    font-weight:700;
    letter-spacing:.4px;
    transition:.3s ease;
}

.stories-viewall-btn.outline{
    border:1.5px solid rgba(113,0,20,.25);
    color:#710014;
    background:transparent;
}

.stories-viewall-btn.outline:hover{
    background:#710014;
    color:#fff;
    border-color:#710014;
}

.stories-viewall-btn.filled{
    background:#710014;
    color:#fff;
}

.stories-viewall-btn.filled:hover{
    background:#8f021d;
    transform:translateY(-3px);
}

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

@media(max-width:991px){

    .stories-dual-featured{
        grid-template-columns:1fr;
    }

    .dual-feature-card{
        height:440px;
    }

    .stories-mini-rail{
        grid-template-columns:repeat(2,1fr);
    }

    .stories-dual-head h2{
        font-size:32px;
    }
}

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

@media(max-width:480px){

    .hbi-stories-dual{
        padding:60px 16px;
    }

    .dual-feature-card{
        height:400px;
        border-radius:22px;
    }

    .dual-feature-content{
        padding:24px;
    }

    .dual-feature-content h2{
        font-size:21px;
    }

    .stories-mini-rail{
        grid-template-columns:1fr;
    }

    .stories-dual-head h2{
        font-size:26px;
    }

    .stories-viewall-wrap{
        flex-direction:column;
    }

    .stories-viewall-btn{
        justify-content:center;
    }
}