/*======================================================
    NEXUS INTERNATIONAL SCHOOL
    PREMIUM MODERN CSS - PART 1A-1
    FOUNDATION • TYPOGRAPHY • ROOT • RESET
    (Completely New Design Language)
======================================================*/

/*==============================
GOOGLE FONTS
==============================*/
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap');

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

:root{

    /* Primary Palette */
    --primary:#5B3DF5;
    --primary-light:#8168FF;
    --primary-dark:#3920C4;

    /* Accent */
    --accent:#00C2A8;
    --accent-light:#44E3CB;

    /* Highlight */
    --highlight:#FF7A18;
    --highlight-soft:#FFD9BC;

    /* Neutral */
    --white:#ffffff;
    --light:#F6F8FC;
    --surface:#FFFFFF;
    --dark:#111827;
    --dark-light:#374151;

    --gray:#6B7280;
    --gray-light:#E5E7EB;
    --border:#EDF1F7;

    /* Backgrounds */
    --bg:#F5F7FB;
    --bg-alt:#EEF4FF;

    /* Gradients */

    --gradient-main:
    linear-gradient(
    135deg,
    #5B3DF5 0%,
    #7B61FF 45%,
    #00C2A8 100%
    );

    --gradient-dark:
    linear-gradient(
    135deg,
    #101828,
    #1E293B
    );

    --gradient-orange:
    linear-gradient(
    135deg,
    #FF7A18,
    #FFB347
    );

    /* Shadows */

    --shadow-xs:
    0 4px 12px rgba(17,24,39,.05);

    --shadow-sm:
    0 10px 25px rgba(17,24,39,.08);

    --shadow-md:
    0 20px 45px rgba(17,24,39,.12);

    --shadow-lg:
    0 30px 70px rgba(17,24,39,.18);

    /* Radius */

    --radius-sm:10px;
    --radius-md:18px;
    --radius-lg:28px;
    --radius-xl:40px;

    /* Transition */

    --transition:.45s cubic-bezier(.25,.8,.25,1);

}

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

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

html{
    scroll-behavior:smooth;
}

body{

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

    background:
    radial-gradient(circle at top right,#EEF4FF 0%,#F8FAFD 45%,#FFFFFF 100%);

    color:var(--dark);

    line-height:1.8;

    overflow-x:hidden;

    font-size:16px;

}

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

::selection{

    background:var(--primary);

    color:#fff;

}

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

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:#ECEFF5;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(
    to bottom,
    #5B3DF5,
    #00C2A8
    );

    border-radius:100px;

}

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

.container{

    width:92%;

    max-width:1450px;

    margin:auto;

}

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

section{

    position:relative;

    padding:110px 0;

}

/*==============================
HEADINGS
==============================*/

.section-title{

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

    font-size:52px;

    font-weight:800;

    text-align:center;

    color:var(--dark);

    margin-bottom:18px;

    letter-spacing:-1px;

}

.section-title span{

    color:var(--primary);

}

.section-subtitle{

    max-width:760px;

    margin:auto;

    text-align:center;

    color:var(--gray);

    font-size:18px;

    margin-bottom:70px;

}

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

h1,h2,h3,h4,h5{

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

    font-weight:700;

}

p{

    color:var(--gray);

}

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

a{

    text-decoration:none;

    transition:var(--transition);

}

ul{

    list-style:none;

}

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

img{

    width:100%;

    display:block;

}

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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:16px 36px;

    border:none;

    cursor:pointer;

    border-radius:100px;

    font-size:15px;

    font-weight:700;

    transition:var(--transition);

}

.btn-primary{

    background:var(--gradient-main);

    color:#fff;

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

}

.btn-primary:hover{

    transform:translateY(-6px);

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

}

.btn-outline{

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

    color:var(--primary);

    background:transparent;

}

.btn-outline:hover{

    background:var(--primary);

    color:#fff;

}

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

.card{

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

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

    backdrop-filter:blur(18px);

    border-radius:28px;

    padding:40px;

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

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-12px);

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

}

/*==============================
GLASS EFFECT
==============================*/

.glass{

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

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

    backdrop-filter:blur(20px);

}

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

.text-center{

    text-align:center;

}

.rounded{

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

}

.shadow{

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

}

.mt-1{margin-top:10px;}
.mt-2{margin-top:20px;}
.mt-3{margin-top:30px;}
.mt-4{margin-top:40px;}
.mt-5{margin-top:60px;}

.mb-1{margin-bottom:10px;}
.mb-2{margin-bottom:20px;}
.mb-3{margin-bottom:30px;}
.mb-4{margin-bottom:40px;}
.mb-5{margin-bottom:60px;}
/*======================================================
    PREMIUM SCHOOL WEBSITE
    PART 1A-2
    HEADER • NAVIGATION • MOBILE MENU
======================================================*/

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

header{
    position:fixed;
    top:18px;
    left:50%;
    transform:translateX(-50%);
    width:94%;
    max-width:1450px;
    z-index:9999;
    transition:.45s ease;
}

header.scrolled{

    top:0;

    width:100%;

    max-width:100%;

    transform:translateX(-50%);

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

    backdrop-filter:blur(18px);

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

    border-bottom:1px solid rgba(91,61,245,.08);

}

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

nav{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px 40px;

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

    backdrop-filter:blur(20px);

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

    border-radius:70px;

    transition:.4s;

}

header.scrolled nav{

    background:transparent;

    border:none;

    border-radius:0;

    padding:18px 6%;

}

/*==============================
LOGO AREA
==============================*/

.logo-area{

    display:flex;

    align-items:center;

    gap:16px;

}

.logo-area img{

    width:72px;

    height:72px;

    object-fit:cover;

    border-radius:18px;

    background:#fff;

    padding:6px;

    box-shadow:0 12px 30px rgba(91,61,245,.18);

    transition:.4s;

}

header.scrolled .logo-area img{

    width:62px;

    height:62px;

}

.logo-text{

    display:flex;

    flex-direction:column;

}

.logo-text h2{

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

    font-size:24px;

    color:#ffffff;

    font-weight:700;

    letter-spacing:.4px;

    transition:.4s;

}

header.scrolled .logo-text h2{

    color:var(--dark);

}

.logo-text p{

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

    font-size:13px;

    margin-top:3px;

    letter-spacing:.6px;

}

header.scrolled .logo-text p{

    color:var(--gray);

}

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

nav{
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: auto;
}

nav ul{
    display: flex;
    align-items: center;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav ul li{
    position: relative;
}

nav ul li a{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 22px;
    text-decoration: none;
    color: #222;
    font-size: 18px;
    font-weight: 600;
    border-radius: 40px;
    transition: .35s;
    white-space: nowrap;
}

nav ul li a:hover{
    color: #5B4DFF;
}

nav ul li a.active{
    color: #fff;
    background: linear-gradient(135deg,#6755ff,#18d4c5);
    box-shadow: 0 10px 25px rgba(103,85,255,.35);
}

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

.nav-action{

    display:flex;

    align-items:center;

    gap:15px;

}

.nav-btn{

    background:var(--gradient-orange);

    color:#fff;

    padding:13px 26px;

    border-radius:40px;

    font-weight:700;

    box-shadow:0 10px 30px rgba(255,122,24,.30);

    transition:.4s;

}

.nav-btn:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 40px rgba(255,122,24,.35);

}

/*==============================
MENU TOGGLE
==============================*/

.menu-toggle{

    display:none;

    width:55px;

    height:55px;

    border-radius:50%;

    background:var(--gradient-main);

    color:#fff;

    font-size:24px;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0 10px 30px rgba(91,61,245,.25);

}
.menu-btn{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

    background: linear-gradient(135deg,#6755ff,#18d4c5);

    color: white;
    font-size: 26px;
    cursor: pointer;

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

    transition: .3s;
}

.menu-btn:hover{
    transform: translateY(-3px);
}

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

@media(max-width:1200px){

header .container{
    padding:15px 25px;
}

.logo-area img{
    width:65px;
    height:65px;
}

.logo-text h1{
    font-size:20px;
}

nav ul{
    gap:8px;
}

nav ul li a{
    padding:12px 16px;
    font-size:16px;
}

}
.nav-links{

position:fixed;

top:95px;

left:-100%;

width:90%;

margin:0 5%;

padding:35px;

background:#fff;

border-radius:30px;

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

flex-direction:column;

align-items:flex-start;

gap:12px;

transition:.45s;

}

.nav-links.active{

left:0;

}

.nav-links li{

width:100%;

}

.nav-links a{

display:block;

width:100%;

padding:15px 20px;

color:var(--dark);

border-radius:15px;

}

.nav-links a:hover{

background:var(--primary);

color:#fff;

}

.nav-action{

display:none;

}

nav{

padding:18px 25px;

}



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

@media(max-width:576px){

header{

width:96%;

top:10px;

}

.logo-area img{

width:58px;

height:58px;

}

.logo-text h2{

font-size:18px;

}

.logo-text p{

font-size:11px;

}

nav{

padding:15px 18px;

border-radius:22px;

}

}
/*======================================================
    PREMIUM SCHOOL WEBSITE
    PART 1B
    HERO SECTION
======================================================*/

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

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:
    radial-gradient(circle at top left,
    rgba(91,61,245,.30),
    transparent 35%),

    radial-gradient(circle at bottom right,
    rgba(0,194,168,.22),
    transparent 35%),

    linear-gradient(
    135deg,
    #07142d 0%,
    #182848 45%,
    #243b55 100%);

}

/* Decorative Circles */

.hero::before{

    content:'';

    position:absolute;

    width:650px;

    height:650px;

    border-radius:50%;

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

    top:-220px;

    right:-150px;

}

.hero::after{

    content:'';

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(0,194,168,.08);

    bottom:-150px;

    left:-120px;

}

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

.hero-content{

    position:relative;

    z-index:5;

    max-width:760px;

    color:#fff;

}

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

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:12px 22px;

    border-radius:100px;

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

    backdrop-filter:blur(15px);

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

    color:#fff;

    font-weight:700;

    margin-bottom:30px;

    letter-spacing:.4px;

}

.hero-badge i{

    color:#00C2A8;

}

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

.hero-content h1{

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

    font-size:78px;

    line-height:1.08;

    font-weight:800;

    margin-bottom:28px;

    color:#fff;

}

.hero-content h1 span{

    color:#00C2A8;

}

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

.hero-content p{

    max-width:650px;

    font-size:20px;

    line-height:1.9;

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

    margin-bottom:40px;

}

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

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.hero-buttons .btn{

    min-width:190px;

}

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

.hero-stats{

    margin-top:70px;

    display:flex;

    gap:40px;

    flex-wrap:wrap;

}

.hero-stat h2{

    font-size:46px;

    color:#00C2A8;

    margin-bottom:6px;

}

.hero-stat p{

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

    font-size:15px;

}

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

.hero-image{

    position:relative;

    z-index:5;

}

.hero-image img{

    width:100%;

    max-width:620px;

    border-radius:35px;

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

}

/* Floating Cards */

.hero-card{

    position:absolute;

    background:#fff;

    border-radius:20px;

    padding:18px 24px;

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

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

}

.hero-card h4{

    color:var(--primary);

    margin-bottom:5px;

}

.hero-card p{

    color:#666;

    font-size:14px;

}

.card-top{

    top:10%;

    left:-60px;

}

.card-bottom{

    bottom:10%;

    right:-50px;

}

/*==============================
WAVE
==============================*/

.hero-wave{

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    line-height:0;

}

.hero-wave svg{

    display:block;

    width:100%;

    height:120px;

}

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

@keyframes floatY{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

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

@media(max-width:1200px){

.hero-content h1{

font-size:62px;

}

.hero-image img{

max-width:520px;

}

}

@media(max-width:991px){

.hero{

text-align:center;

padding:160px 0 100px;

}

.hero-content{

margin:auto;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;

}

.hero-image{

margin-top:70px;

}

.card-top,

.card-bottom{

display:none;

}

}

@media(max-width:768px){

.hero-content h1{

font-size:48px;

}

.hero-content p{

font-size:17px;

}

.hero-stat h2{

font-size:34px;

}

}

@media(max-width:480px){

.hero-content h1{

font-size:38px;

}

.hero-buttons{

flex-direction:column;

}

.hero-buttons .btn{

width:100%;

}

}
/*======================================================
    PREMIUM SCHOOL WEBSITE
    PART 1C
    FEATURES • COUNTERS • NEWS • EVENTS • GALLERY
    Completely New UI Design
======================================================*/

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

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

.card{
    position:relative;
    overflow:hidden;
    background:#fff;
    padding:45px 35px;
    border-radius:30px;
    transition:.45s;
    box-shadow:0 20px 45px rgba(0,0,0,.08);
    border:1px solid rgba(91,61,245,.08);
}

.card::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:6px;
    background:var(--gradient-main);
    transform:scaleX(0);
    transform-origin:left;
    transition:.45s;
}

.card:hover::before{
    transform:scaleX(1);
}

.card:hover{
    transform:translateY(-15px);
    box-shadow:0 35px 70px rgba(0,0,0,.12);
}

.card i{
    width:90px;
    height:90px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:36px;
    border-radius:24px;
    margin-bottom:25px;
    color:#fff;
    background:var(--gradient-main);
}

.card h3{
    font-size:26px;
    margin-bottom:18px;
}

.card p{
    color:var(--gray);
}

/*==============================
HIGHLIGHT BOXES
==============================*/

.highlight-box{
    background:#fff;
    border-radius:30px;
    padding:45px 35px;
    text-align:center;
    transition:.45s;
    border:1px solid #edf2ff;
}

.highlight-box:hover{
    transform:scale(1.03);
    box-shadow:0 30px 60px rgba(0,0,0,.10);
}

.highlight-box img{
    width:95px;
    margin:auto;
    margin-bottom:25px;
}

.highlight-box h3{
    margin-bottom:12px;
}

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

.counter-section{
    background:var(--gradient-dark);
    color:#fff;
    position:relative;
    overflow:hidden;
}

.counter-section::before{
    content:'';
    position:absolute;
    width:550px;
    height:550px;
    border-radius:50%;
    background:rgba(255,255,255,.04);
    top:-250px;
    right:-180px;
}

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

.counter-box{
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(12px);
    padding:40px;
    border-radius:25px;
    text-align:center;
}

.counter-box h2{
    font-size:60px;
    color:var(--accent);
    margin-bottom:10px;
}

.counter-box p{
    color:#ddd;
    font-size:17px;
}

/*==============================
NEWS BAR
==============================*/

.news-ticker{

    background:#111827;

    color:#fff;

    overflow:hidden;

    padding:18px 0;

    border-top:3px solid var(--accent);

    border-bottom:3px solid var(--accent);

}

.news-content{

    display:inline-block;

    white-space:nowrap;

    animation:newsMove 28s linear infinite;

    font-size:17px;

    font-weight:600;

}

@keyframes newsMove{

0%{
transform:translateX(100%);
}

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

}

/*==============================
EVENTS
==============================*/

.events-grid{

display:grid;

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

gap:35px;

}

.event-card{

background:#fff;

border-radius:30px;

overflow:hidden;

transition:.45s;

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

}

.event-card:hover{

transform:translateY(-12px);

}

.event-card img{

height:260px;

object-fit:cover;

transition:.6s;

}

.event-card:hover img{

transform:scale(1.08);

}

.event-content{

padding:30px;

}

.event-date{

display:inline-block;

padding:8px 18px;

background:var(--gradient-main);

color:#fff;

border-radius:30px;

font-size:13px;

margin-bottom:15px;

}

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

.gallery-grid{

display:grid;

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

gap:28px;

}

.gallery-item{

position:relative;

overflow:hidden;

border-radius:28px;

cursor:pointer;

}

.gallery-item img{

height:320px;

object-fit:cover;

transition:.7s;

}

.gallery-item:hover img{

transform:scale(1.12) rotate(2deg);

}

.gallery-item::after{

content:'';

position:absolute;

inset:0;

background:linear-gradient(

to top,

rgba(17,24,39,.85),

transparent 60%

);

opacity:0;

transition:.45s;

}

.gallery-item:hover::after{

opacity:1;

}

.gallery-caption{

position:absolute;

left:30px;

bottom:25px;

color:#fff;

z-index:2;

opacity:0;

transform:translateY(20px);

transition:.45s;

}

.gallery-item:hover .gallery-caption{

opacity:1;

transform:translateY(0);

}

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

.testimonial-card{

background:#fff;

padding:45px;

border-radius:30px;

text-align:center;

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

}

.testimonial-card img{

width:100px;

height:100px;

border-radius:50%;

margin:auto;

margin-bottom:20px;

border:6px solid #eef2ff;

}

/*==============================
REVEAL
==============================*/

.reveal{

opacity:0;

transform:translateY(80px);

transition:1s ease;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}

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

@media(max-width:1200px){

.grid-3,
.events-grid,
.counter-grid{

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

}

}

@media(max-width:768px){

.grid-3,
.events-grid,
.counter-grid{

grid-template-columns:1fr;

}

.gallery-grid{

grid-template-columns:1fr;

}

.counter-box h2{

font-size:42px;

}

}

@media(max-width:480px){

.card,
.highlight-box,
.event-content{

padding:25px;

}

.gallery-item img{

height:240px;

}

}
/*======================================================
    PART 2A
    ABOUT PAGE
    PREMIUM MODERN DESIGN
======================================================*/

/*==============================
PAGE BANNER
==============================*/

.page-banner{

    position:relative;

    min-height:460px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    overflow:hidden;

    background:
    linear-gradient(
    135deg,
    rgba(20,32,70,.92),
    rgba(91,61,245,.82)),
    url("images/page-banner.jpg") center/cover;

}

.page-banner::before{

    content:'';

    position:absolute;

    width:650px;

    height:650px;

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

    border-radius:50%;

    right:-220px;

    top:-180px;

}

.page-banner-content{

    position:relative;

    z-index:2;

    max-width:850px;

    color:#fff;

}

.page-banner h1{

    font-size:64px;

    margin-bottom:18px;

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

}

.page-banner p{

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

    font-size:20px;

}

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

.about-intro{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.about-image{

    position:relative;

}

.about-image img{

    border-radius:35px;

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

}

.about-image::after{

    content:'';

    position:absolute;

    width:220px;

    height:220px;

    background:var(--gradient-main);

    border-radius:35px;

    bottom:-35px;

    right:-35px;

    z-index:-1;

}

.about-content h2{

    font-size:46px;

    margin-bottom:25px;

    color:var(--dark);

}

.about-content h2 span{

    color:var(--primary);

}

.about-content p{

    margin-bottom:22px;

    font-size:17px;

    color:var(--gray);

}

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

.vision-mission{

    display:grid;

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

    gap:40px;

}

.vision-card,
.mission-card{

    background:#fff;

    padding:45px;

    border-radius:30px;

    position:relative;

    overflow:hidden;

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

    transition:.45s;

}

.vision-card:hover,
.mission-card:hover{

    transform:translateY(-12px);

}

.vision-card::before,
.mission-card::before{

    content:'';

    position:absolute;

    inset:0;

    background:var(--gradient-main);

    opacity:.03;

}

.vision-card i,
.mission-card i{

    width:80px;

    height:80px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:22px;

    color:#fff;

    font-size:34px;

    background:var(--gradient-main);

    margin-bottom:25px;

}

.vision-card h3,
.mission-card h3{

    font-size:28px;

    margin-bottom:18px;

}

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

.values-grid{

    display:grid;

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

    gap:30px;

}

.value-card{

    background:#fff;

    padding:40px 30px;

    border-radius:28px;

    text-align:center;

    transition:.45s;

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

}

.value-card:hover{

    background:var(--gradient-main);

    transform:translateY(-12px);

    color:#fff;

}

.value-card:hover p{

    color:#fff;

}

.value-card:hover i{

    background:#fff;

    color:var(--primary);

}

.value-card i{

    width:90px;

    height:90px;

    margin:auto;

    margin-bottom:25px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--gradient-main);

    color:#fff;

    font-size:34px;

}

.value-card h4{

    margin-bottom:15px;

}

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

@media(max-width:1100px){

.about-intro{

grid-template-columns:1fr;

}

.values-grid{

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

}

}

@media(max-width:768px){

.vision-mission{

grid-template-columns:1fr;

}

.values-grid{

grid-template-columns:1fr;

}

.page-banner h1{

font-size:42px;

}

.about-content h2{

font-size:34px;

}

}
/*======================================================
    PART 2B
    PRINCIPAL • CHAIRMAN • MANAGEMENT • METHODOLOGY
    PREMIUM REDESIGNED STYLE
======================================================*/

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

.principal-section{
    position:relative;
    background:linear-gradient(135deg,#f8fbff 0%,#eef5ff 100%);
    overflow:hidden;
}

.principal-section::before{
    content:'';
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:rgba(91,61,245,.08);
    top:-180px;
    left:-180px;
}

.principal-wrapper{
    display:grid;
    grid-template-columns:380px 1fr;
    gap:70px;
    align-items:center;
    position:relative;
    z-index:2;
}

/*=====================================
   PRINCIPAL PHOTO
=====================================*/

.principal-photo{
    position:relative;
}

.principal-photo img{
    border-radius:35px;
    box-shadow:0 30px 60px rgba(0,0,0,.12);
    transition:.5s;
}

.principal-photo:hover img{
    transform:scale(1.03);
}

.principal-photo::after{
    content:'';
    position:absolute;
    width:130px;
    height:130px;
    border-radius:30px;
    background:var(--gradient-main);
    right:-25px;
    bottom:-25px;
    z-index:-1;
}

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

.principal-message{
    background:#fff;
    padding:55px;
    border-radius:35px;
    box-shadow:0 25px 60px rgba(0,0,0,.08);
    position:relative;
}

.principal-message::before{
    content:'“';
    position:absolute;
    top:15px;
    left:30px;
    font-size:120px;
    color:rgba(91,61,245,.08);
    font-family:Georgia,serif;
}

.principal-message h2{
    font-size:42px;
    color:var(--dark);
    margin-bottom:20px;
}

.principal-message h2 span{
    color:var(--primary);
}

.principal-message p{
    color:var(--gray);
    margin-bottom:18px;
    line-height:1.9;
}

.principal-sign{
    margin-top:30px;
}

.principal-sign h4{
    color:var(--primary);
    margin-bottom:5px;
}

.principal-sign small{
    color:#777;
}

/*=====================================
   CHAIRMAN SECTION
=====================================*/

.chairman-wrapper{
    display:grid;
    grid-template-columns:1fr 380px;
    gap:70px;
    align-items:center;
}

.chairman-photo img{
    border-radius:35px;
    box-shadow:0 30px 60px rgba(0,0,0,.12);
    transition:.45s;
}

.chairman-photo:hover img{
    transform:rotate(-2deg) scale(1.03);
}

.chairman-message{
    background:#fff;
    padding:55px;
    border-radius:35px;
    box-shadow:0 20px 50px rgba(0,0,0,.08);
}

.chairman-message h2{
    font-size:42px;
    margin-bottom:20px;
}

.chairman-message h2 span{
    color:var(--accent);
}

.chairman-message p{
    color:var(--gray);
    margin-bottom:18px;
}

/*=====================================
   MANAGEMENT SECTION
=====================================*/

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

.member-card{
    background:#fff;
    border-radius:30px;
    overflow:hidden;
    text-align:center;
    transition:.45s;
    box-shadow:0 20px 45px rgba(0,0,0,.08);
    position:relative;
}

.member-card:hover{
    transform:translateY(-12px);
}

.member-card img{
    width:100%;
    height:320px;
    object-fit:cover;
    transition:.5s;
}

.member-card:hover img{
    transform:scale(1.08);
}

.member-info{
    padding:30px;
}

.member-info h4{
    font-size:24px;
    color:var(--dark);
    margin-bottom:8px;
}

.member-info p{
    color:var(--primary);
    font-weight:600;
    margin-bottom:18px;
}

.member-social{
    display:flex;
    justify-content:center;
    gap:12px;
}

.member-social a{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#eef2ff;
    color:var(--primary);
    transition:.35s;
}

.member-social a:hover{
    background:var(--gradient-main);
    color:#fff;
}

/*=====================================
   TEACHING METHODOLOGY
=====================================*/

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

.method-card{
    background:#fff;
    padding:45px;
    border-radius:30px;
    transition:.45s;
    box-shadow:0 18px 45px rgba(0,0,0,.08);
    border-top:6px solid transparent;
}

.method-card:hover{
    border-top:6px solid var(--accent);
    transform:translateY(-10px);
}

.method-card i{
    width:90px;
    height:90px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:24px;
    background:var(--gradient-main);
    color:#fff;
    font-size:36px;
    margin-bottom:25px;
}

.method-card h3{
    margin-bottom:15px;
    font-size:28px;
}

.method-card p{
    color:var(--gray);
}

/*=====================================
   FUTURE GOALS
=====================================*/

.future-goals{
    position:relative;
    overflow:hidden;
    border-radius:40px;
    padding:90px 70px;
    background:var(--gradient-main);
    color:#fff;
    text-align:center;
}

.future-goals::before{
    content:'';
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    top:-220px;
    right:-220px;
}

.future-goals::after{
    content:'';
    position:absolute;
    width:320px;
    height:320px;
    border-radius:50%;
    background:rgba(255,255,255,.06);
    bottom:-140px;
    left:-120px;
}

.future-goals h2{
    position:relative;
    z-index:2;
    font-size:46px;
    margin-bottom:20px;
}

.future-goals p{
    position:relative;
    z-index:2;
    max-width:900px;
    margin:auto;
    color:rgba(255,255,255,.92);
    font-size:18px;
    line-height:1.9;
}

.future-goals .btn{
    margin-top:35px;
    background:#fff;
    color:var(--primary);
}

.future-goals .btn:hover{
    transform:translateY(-5px);
}

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

@media(max-width:1200px){

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

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

}

@media(max-width:991px){

.principal-wrapper,
.chairman-wrapper{
grid-template-columns:1fr;
}

.principal-photo,
.chairman-photo{
max-width:450px;
margin:auto;
}

}

@media(max-width:768px){

.management-grid,
.method-grid{
grid-template-columns:1fr;
}

.principal-message,
.chairman-message{
padding:35px;
}

.future-goals{
padding:60px 30px;
}

.future-goals h2{
font-size:34px;
}

}

@media(max-width:480px){

.principal-message h2,
.chairman-message h2{
font-size:30px;
}

.member-card img{
height:260px;
}

}
/*======================================================
    PART 2C
    ACADEMICS • FACILITIES
    PREMIUM MODERN DESIGN
======================================================*/

/*=====================================
ACADEMIC OVERVIEW
=====================================*/

.academic-overview{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}

.academic-image{
    position:relative;
}

.academic-image img{
    width:100%;
    border-radius:35px;
    box-shadow:0 30px 60px rgba(0,0,0,.12);
}

.academic-image::before{
    content:'';
    position:absolute;
    width:220px;
    height:220px;
    border-radius:40px;
    background:var(--gradient-main);
    top:-25px;
    left:-25px;
    z-index:-1;
}

.academic-content h2{
    font-size:46px;
    margin-bottom:20px;
}

.academic-content h2 span{
    color:var(--primary);
}

.academic-content p{
    color:var(--gray);
    margin-bottom:18px;
    line-height:1.9;
}

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

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

.curriculum-card{

    background:#fff;

    padding:40px 30px;

    border-radius:30px;

    text-align:center;

    transition:.45s;

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

    position:relative;

    overflow:hidden;

}

.curriculum-card::before{

    content:'';

    position:absolute;

    inset:0;

    background:var(--gradient-main);

    opacity:0;

    transition:.45s;

}

.curriculum-card:hover::before{

    opacity:1;

}

.curriculum-card>*{

    position:relative;

    z-index:2;

}

.curriculum-card:hover{

    color:#fff;

    transform:translateY(-12px);

}

.curriculum-card:hover p{

    color:#fff;

}

.curriculum-card:hover i{

    background:#fff;

    color:var(--primary);

}

.curriculum-card i{

    width:90px;

    height:90px;

    margin:auto;

    margin-bottom:25px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--gradient-main);

    color:#fff;

    font-size:34px;

}

/*=====================================
ACADEMIC PROGRAMS
=====================================*/

.program-card{

    display:flex;

    gap:30px;

    align-items:flex-start;

    background:#fff;

    padding:35px;

    margin-bottom:30px;

    border-radius:30px;

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

    transition:.4s;

}

.program-card:hover{

    transform:translateX(10px);

}

.program-icon{

    width:90px;

    height:90px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:25px;

    background:var(--gradient-main);

    color:#fff;

    font-size:34px;

}

.program-content h3{

    margin-bottom:12px;

}

.program-content p{

    color:var(--gray);

}

/*=====================================
SMART CLASSROOM
=====================================*/

.smart-class{

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

}

.smart-grid{

    display:grid;

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

    gap:35px;

}

.smart-card{

    background:#fff;

    padding:40px;

    text-align:center;

    border-radius:30px;

    transition:.45s;

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

}

.smart-card:hover{

    transform:translateY(-12px);

}

.smart-card i{

    font-size:42px;

    color:var(--primary);

    margin-bottom:20px;

}

/*=====================================
LAB SECTION
=====================================*/

.lab-grid{

    display:grid;

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

    gap:35px;

}

.lab-card{

    background:#fff;

    overflow:hidden;

    border-radius:30px;

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

}

.lab-card img{

    width:100%;

    height:260px;

    object-fit:cover;

    transition:.6s;

}

.lab-card:hover img{

    transform:scale(1.08);

}

.lab-content{

    padding:30px;

}

/*=====================================
SCHOLARSHIP
=====================================*/

.scholarship-box{

    padding:80px 60px;

    border-radius:40px;

    text-align:center;

    background:var(--gradient-main);

    color:#fff;

    position:relative;

    overflow:hidden;

}

.scholarship-box::before{

    content:'';

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

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

    right:-180px;

    top:-180px;

}

.scholarship-box h2{

    position:relative;

    z-index:2;

    font-size:42px;

    margin-bottom:20px;

}

.scholarship-box p{

    position:relative;

    z-index:2;

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

}

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

.facility-grid{

    display:grid;

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

    gap:40px;

}

.facility-card{

    overflow:hidden;

    border-radius:35px;

    background:#fff;

    transition:.45s;

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

}

.facility-card:hover{

    transform:translateY(-12px);

}

.facility-card img{

    width:100%;

    height:340px;

    object-fit:cover;

    transition:.6s;

}

.facility-card:hover img{

    transform:scale(1.08);

}

.facility-content{

    padding:35px;

}

.facility-content h3{

    margin-bottom:18px;

}

.facility-features{

    margin-top:20px;

}

.facility-features li{

    padding:10px 0;

    color:var(--gray);

}

.facility-features li::before{

    content:'◆';

    color:var(--primary);

    margin-right:12px;

}

/*=====================================
SPORTS
=====================================*/

.sports-grid{

    display:grid;

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

    gap:30px;

}

.sport-card{

    background:#fff;

    text-align:center;

    padding:35px;

    border-radius:30px;

    transition:.45s;

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

}

.sport-card:hover{

    transform:translateY(-12px);

}

.sport-card i{

    font-size:48px;

    color:var(--accent);

    margin-bottom:20px;

}

/*=====================================
DIGITAL INFRASTRUCTURE
=====================================*/

.digital-infra{

    background:var(--gradient-dark);

    color:#fff;

    border-radius:40px;

    padding:80px 60px;

}

.digital-grid{

    display:grid;

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

    gap:30px;

}

.digital-box{

    text-align:center;

}

.digital-box i{

    font-size:48px;

    color:var(--accent);

    margin-bottom:18px;

}

/*=====================================
ACHIEVEMENTS
=====================================*/

.achievement-grid{

    display:grid;

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

    gap:35px;

}

.achievement-card{

    background:#fff;

    text-align:center;

    padding:45px;

    border-radius:30px;

    transition:.45s;

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

}

.achievement-card:hover{

    transform:translateY(-12px);

}

.achievement-card h3{

    color:var(--primary);

    margin:20px 0 12px;

}

.achievement-card i{

    font-size:55px;

    color:var(--highlight);

}

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

@media(max-width:1200px){

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

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

}

@media(max-width:991px){

.academic-overview{
grid-template-columns:1fr;
}

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

}

@media(max-width:768px){

.curriculum-grid,
.smart-grid,
.lab-grid,
.sports-grid,
.digital-grid,
.achievement-grid{
grid-template-columns:1fr;
}

.scholarship-box,
.digital-infra{
padding:50px 25px;
}

.program-card{
flex-direction:column;
}

}

@media(max-width:480px){

.academic-content h2{
font-size:32px;
}

.scholarship-box h2{
font-size:30px;
}

.facility-card img{
height:240px;
}

}
/*======================================================
    PART 3A
    CONTACT PAGE • CONTACT FORM • MAP • TIMING
    PREMIUM MODERN DESIGN
======================================================*/

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

.contact-section{
    position:relative;
    padding:120px 0;
    background:linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);
    overflow:hidden;
}

.contact-section::before{
    content:'';
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:rgba(91,61,245,.05);
    top:-220px;
    right:-180px;
}

.contact-grid{
    display:grid;
    grid-template-columns:380px 1fr;
    gap:50px;
    align-items:start;
    position:relative;
    z-index:2;
}

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

.contact-info{
    display:flex;
    flex-direction:column;
    gap:30px;
}

.contact-card{

    background:#fff;

    padding:35px;

    border-radius:30px;

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

    transition:.4s;

    position:relative;

    overflow:hidden;

}

.contact-card::before{

    content:'';

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:100%;

    background:var(--gradient-main);

}

.contact-card:hover{

    transform:translateY(-10px);

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

}

.contact-card i{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    color:#fff;

    background:var(--gradient-main);

    border-radius:20px;

    margin-bottom:20px;

}

.contact-card h3{

    font-size:24px;

    margin-bottom:12px;

    color:var(--dark);

}

.contact-card p,
.contact-card a{

    color:var(--gray);

    line-height:1.8;

}

.contact-card a:hover{

    color:var(--primary);

}

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

.contact-form{

    background:#fff;

    padding:50px;

    border-radius:35px;

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

}

.contact-form h2{

    font-size:40px;

    margin-bottom:12px;

}

.contact-form p{

    margin-bottom:35px;

}

.form-row{

    display:grid;

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

    gap:25px;

}

.form-group{

    margin-bottom:25px;

}

.form-group label{

    display:block;

    margin-bottom:10px;

    font-weight:700;

    color:var(--dark);

}

.form-control{

    width:100%;

    padding:18px 22px;

    border:2px solid #edf2ff;

    border-radius:18px;

    background:#fdfdff;

    font-size:15px;

    transition:.35s;

}

.form-control:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 5px rgba(91,61,245,.12);

    background:#fff;

}

textarea.form-control{

    min-height:180px;

    resize:vertical;

}

.contact-form button{

    margin-top:10px;

}

/*=====================================
SCHOOL TIMING
=====================================*/

.timing-box{

    margin-top:45px;

    padding:45px;

    border-radius:35px;

    background:var(--gradient-main);

    color:#fff;

    overflow:hidden;

    position:relative;

}

.timing-box::before{

    content:'';

    position:absolute;

    width:280px;

    height:280px;

    border-radius:50%;

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

    right:-120px;

    top:-120px;

}

.timing-box h3{

    position:relative;

    z-index:2;

    margin-bottom:25px;

    font-size:28px;

}

.timing-box ul{

    position:relative;

    z-index:2;

}

.timing-box ul li{

    display:flex;

    justify-content:space-between;

    padding:12px 0;

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

}

.timing-box ul li:last-child{

    border-bottom:none;

}

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

.map-container{

    margin-top:70px;

    overflow:hidden;

    border-radius:35px;

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

}

.map-container iframe{

    width:100%;

    height:520px;

    border:none;

    filter:grayscale(20%) contrast(105%);

}

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

.contact-cta{

    margin-top:70px;

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

    padding:50px;

    border-radius:35px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

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

}

.contact-cta h2{

    font-size:38px;

    margin-bottom:12px;

}

.contact-cta p{

    max-width:650px;

}

.contact-cta .btn{

    white-space:nowrap;

}

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

@media(max-width:1100px){

.contact-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.form-row{

grid-template-columns:1fr;

}

.contact-form{

padding:35px 25px;

}

.contact-cta{

flex-direction:column;

text-align:center;

padding:40px 25px;

}

.map-container iframe{

height:350px;

}

}

@media(max-width:480px){

.contact-form h2{

font-size:30px;

}

.contact-card{

padding:25px;

}

.timing-box{

padding:30px 25px;

}

}
/*======================================================
    PART 3B
    NEWSLETTER • FAQ • FOOTER • SOCIAL ICONS
    PREMIUM MODERN DESIGN
======================================================*/

/*=====================================
NEWSLETTER
=====================================*/

.newsletter{

    position:relative;

    overflow:hidden;

    padding:90px 60px;

    border-radius:40px;

    background:linear-gradient(135deg,#4F46E5,#7C3AED,#06B6D4);

    color:#fff;

    text-align:center;

}

.newsletter::before{

    content:'';

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

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

    top:-220px;

    right:-180px;

}

.newsletter::after{

    content:'';

    position:absolute;

    width:320px;

    height:320px;

    border-radius:50%;

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

    bottom:-120px;

    left:-100px;

}

.newsletter>*{

    position:relative;

    z-index:2;

}

.newsletter h2{

    font-size:46px;

    margin-bottom:18px;

}

.newsletter p{

    max-width:700px;

    margin:auto;

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

    margin-bottom:35px;

}

.newsletter-form{

    max-width:760px;

    margin:auto;

    display:flex;

    background:#fff;

    padding:8px;

    border-radius:70px;

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

}

.newsletter-form input{

    flex:1;

    border:none;

    background:transparent;

    padding:18px 24px;

    font-size:16px;

    outline:none;

}

.newsletter-form button{

    border:none;

    padding:18px 36px;

    border-radius:60px;

    background:var(--gradient-main);

    color:#fff;

    font-weight:700;

    cursor:pointer;

    transition:.4s;

}

.newsletter-form button:hover{

    transform:scale(1.05);

}

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

.faq-container{

    max-width:1000px;

    margin:auto;

}

.faq-item{

    background:#fff;

    margin-bottom:20px;

    border-radius:24px;

    overflow:hidden;

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

}

.faq-question{

    position:relative;

    padding:25px 70px 25px 30px;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    transition:.35s;

}

.faq-question:hover{

    background:#f8fbff;

}

.faq-question::after{

    content:'+';

    position:absolute;

    right:30px;

    top:50%;

    transform:translateY(-50%);

    width:42px;

    height:42px;

    border-radius:50%;

    background:var(--gradient-main);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

}

.faq-item.active .faq-question::after{

    content:'−';

}

.faq-answer{

    display:none;

    padding:0 30px 30px;

    color:var(--gray);

    line-height:1.9;

}

.faq-item.active .faq-answer{

    display:block;

}

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

footer{

    position:relative;

    margin-top:100px;

    background:#0F172A;

    color:#fff;

    overflow:hidden;

}

footer::before{

    content:'';

    position:absolute;

    width:550px;

    height:550px;

    border-radius:50%;

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

    top:-250px;

    right:-180px;

}

.footer-top{

    position:relative;

    z-index:2;

    padding:90px 0 60px;

}

.footer-grid{

    display:grid;

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

    gap:45px;

}

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

.footer-logo{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:25px;

}

.footer-logo img{

    width:75px;

    height:75px;

    object-fit:contain;

    background:#fff;

    padding:8px;

    border-radius:18px;

}

.footer-brand h3{

    font-size:28px;

    margin-bottom:8px;

}

.footer-brand p{

    color:#CBD5E1;

}

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

.footer-column h3{

    color:#fff;

    margin-bottom:25px;

    position:relative;

}

.footer-column h3::after{

    content:'';

    position:absolute;

    left:0;

    bottom:-10px;

    width:45px;

    height:4px;

    border-radius:10px;

    background:var(--gradient-main);

}

.footer-column ul li{

    margin-bottom:14px;

}

.footer-column ul li a{

    color:#CBD5E1;

    transition:.35s;

}

.footer-column ul li a:hover{

    color:#fff;

    padding-left:10px;

}

/*=====================================
CONTACT LIST
=====================================*/

.footer-contact li{

    display:flex;

    align-items:flex-start;

    gap:12px;

    color:#CBD5E1;

}

.footer-contact i{

    color:var(--accent);

    margin-top:4px;

}

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

.social-links{

    display:flex;

    gap:15px;

    margin-top:30px;

}

.social-links a{

    width:50px;

    height:50px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

    color:#fff;

    font-size:18px;

    transition:.4s;

}

.social-links a:hover{

    background:var(--gradient-main);

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

}

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

.footer-bottom{

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

    padding:25px 0;

    text-align:center;

    color:#CBD5E1;

    position:relative;

    z-index:2;

}

.footer-bottom a{

    color:var(--accent);

    font-weight:600;

}

.footer-bottom a:hover{

    color:#fff;

}

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

@media(max-width:1200px){

.footer-grid{

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

}

}

@media(max-width:768px){

.newsletter{

padding:60px 25px;

}

.newsletter h2{

font-size:34px;

}

.newsletter-form{

flex-direction:column;

padding:15px;

border-radius:30px;

}

.newsletter-form button{

width:100%;

margin-top:10px;

}

.footer-grid{

grid-template-columns:1fr;

}

.footer-logo{

flex-direction:column;

text-align:center;

}

.social-links{

justify-content:center;

}

.footer-column{

text-align:center;

}

.footer-column h3::after{

left:50%;

transform:translateX(-50%);

}

.footer-contact li{

justify-content:center;

}

}

@media(max-width:480px){

.newsletter h2{

font-size:28px;

}

.faq-question{

font-size:16px;

padding:22px 60px 22px 20px;

}

.faq-answer{

padding:0 20px 20px;

}

}
/*======================================================
    PART 3C
    FLOATING BUTTONS • LOADER • POPUP • MODAL
    SCROLL PROGRESS • DARK MODE • UTILITIES
======================================================*/

/*=====================================
SCROLL PROGRESS BAR
=====================================*/

.progress-bar{
    position:fixed;
    top:0;
    left:0;
    width:0%;
    height:5px;
    background:linear-gradient(90deg,#5B3DF5,#00C2A8,#FF7A18);
    z-index:99999;
    transition:width .15s linear;
}

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

.back-to-top{

    position:fixed;

    right:35px;

    bottom:35px;

    width:58px;

    height:58px;

    border-radius:50%;

    background:var(--gradient-main);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transform:translateY(40px);

    transition:.4s;

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

    z-index:999;

}

.back-to-top.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.back-to-top:hover{

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

}

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

.whatsapp-btn{

    position:fixed;

    left:35px;

    bottom:35px;

    width:62px;

    height:62px;

    border-radius:50%;

    background:#25D366;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    box-shadow:0 20px 45px rgba(37,211,102,.35);

    z-index:999;

    animation:whatsappPulse 2s infinite;

}

@keyframes whatsappPulse{

0%{

box-shadow:0 0 0 0 rgba(37,211,102,.45);

}

70%{

box-shadow:0 0 0 18px rgba(37,211,102,0);

}

100%{

box-shadow:0 0 0 0 rgba(37,211,102,0);

}

}

/*=====================================
PRELOADER
=====================================*/

.preloader{

    position:fixed;

    inset:0;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:999999;

}

.loader{

    width:85px;

    height:85px;

    border-radius:50%;

    border:8px solid #eef2ff;

    border-top-color:var(--primary);

    animation:spin .8s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

/*=====================================
ANNOUNCEMENT POPUP
=====================================*/

.popup{

    position:fixed;

    inset:0;

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

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.4s;

    z-index:99999;

}

.popup.active{

    opacity:1;

    visibility:visible;

}

.popup-box{

    width:92%;

    max-width:600px;

    background:#fff;

    border-radius:35px;

    padding:50px;

    text-align:center;

    position:relative;

    animation:popupZoom .45s;

}

@keyframes popupZoom{

from{

transform:scale(.75);

opacity:0;

}

to{

transform:scale(1);

opacity:1;

}

}

.popup-close{

    position:absolute;

    top:18px;

    right:18px;

    width:42px;

    height:42px;

    border-radius:50%;

    background:#f3f4f6;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.3s;

}

.popup-close:hover{

    background:var(--primary);

    color:#fff;

}

/*=====================================
MODAL
=====================================*/

.modal{

    position:fixed;

    inset:0;

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

    display:none;

    justify-content:center;

    align-items:center;

    z-index:99999;

}

.modal.show{

    display:flex;

}

.modal-content{

    width:90%;

    max-width:900px;

    background:#fff;

    border-radius:30px;

    overflow:hidden;

    animation:modalOpen .35s;

}

@keyframes modalOpen{

from{

transform:translateY(60px);

opacity:0;

}

to{

transform:translateY(0);

opacity:1;

}

}

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

.zoom-effect{

    overflow:hidden;

    border-radius:24px;

}

.zoom-effect img{

    transition:.7s;

}

.zoom-effect:hover img{

    transform:scale(1.12);

}

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

.section-divider{

    width:110px;

    height:6px;

    border-radius:100px;

    margin:20px auto 60px;

    background:var(--gradient-main);

}

/*=====================================
BADGES
=====================================*/

.badge{

    display:inline-block;

    padding:10px 22px;

    border-radius:50px;

    background:rgba(91,61,245,.10);

    color:var(--primary);

    font-weight:700;

}

.badge-success{

    background:rgba(0,194,168,.12);

    color:#00A88D;

}

.badge-warning{

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

    color:#E66A00;

}

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

.radius-10{border-radius:10px;}
.radius-20{border-radius:20px;}
.radius-30{border-radius:30px;}
.radius-40{border-radius:40px;}

.shadow-sm{box-shadow:0 10px 25px rgba(0,0,0,.08);}
.shadow-md{box-shadow:0 20px 45px rgba(0,0,0,.10);}
.shadow-lg{box-shadow:0 35px 70px rgba(0,0,0,.14);}

.text-primary{color:var(--primary);}
.text-accent{color:var(--accent);}
.text-center{text-align:center;}

.bg-light{background:#f8fbff;}
.bg-white{background:#fff;}
.bg-dark{
    background:#111827;
    color:#fff;
}

.d-flex{
    display:flex;
}

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

.justify-between{
    justify-content:space-between;
}

.gap-20{
    gap:20px;
}

.gap-30{
    gap:30px;
}

/*=====================================
DARK MODE
=====================================*/

body.dark-mode{

    background:#0f172a;

    color:#f3f4f6;

}

body.dark-mode section{

    background:#111827;

}

body.dark-mode .card,
body.dark-mode .contact-card,
body.dark-mode .facility-card,
body.dark-mode .program-card,
body.dark-mode .event-card{

    background:#1f2937;

    color:#fff;

}

body.dark-mode p{

    color:#d1d5db;

}

body.dark-mode .form-control{

    background:#111827;

    color:#fff;

    border-color:#374151;

}

body.dark-mode footer{

    background:#020617;

}

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

@media(max-width:768px){

.back-to-top{

right:20px;
bottom:20px;

}

.whatsapp-btn{

left:20px;
bottom:20px;

}

.popup-box{

padding:35px 25px;

}

.modal-content{

width:95%;

}

}

@media(max-width:480px){

.back-to-top,
.whatsapp-btn{

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

}

.loader{

width:60px;
height:60px;

}

.popup-box{

border-radius:20px;

}

}
/*======================================================
    SCHOOL TIMINGS SECTION
    PREMIUM MODERN DESIGN
======================================================*/

.bg-light{
    background:linear-gradient(180deg,#f8fbff 0%,#eef5ff 100%);
    position:relative;
    overflow:hidden;
}

.bg-light::before{
    content:'';
    position:absolute;
    width:420px;
    height:420px;
    background:rgba(91,61,245,.05);
    border-radius:50%;
    top:-180px;
    right:-150px;
}

.bg-light::after{
    content:'';
    position:absolute;
    width:260px;
    height:260px;
    background:rgba(0,194,168,.08);
    border-radius:50%;
    bottom:-100px;
    left:-100px;
}

.section-header{
    text-align:center;
    margin-bottom:55px;
    position:relative;
    z-index:2;
}

.section-header h2{

    font-family:'Outfit',sans-serif;
    font-size:46px;
    font-weight:800;
    color:var(--dark);
    position:relative;
    display:inline-block;
    padding-bottom:15px;

}

.section-header h2::after{

    content:'';

    position:absolute;

    left:50%;

    bottom:0;

    transform:translateX(-50%);

    width:90px;

    height:5px;

    border-radius:50px;

    background:var(--gradient-main);

}

.table-responsive{

    position:relative;

    z-index:2;

    overflow-x:auto;

    border-radius:30px;

    background:#fff;

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

    padding:15px;

}

.disclosure-table{

    width:100%;

    border-collapse:collapse;

    overflow:hidden;

    border-radius:25px;

}

.disclosure-table thead{

    background:var(--gradient-main);

}

.disclosure-table thead th{

    color:#fff;

    padding:22px 30px;

    font-size:17px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.8px;

}

.disclosure-table tbody tr{

    transition:.35s;

}

.disclosure-table tbody tr:nth-child(even){

    background:#f8fbff;

}

.disclosure-table tbody tr:hover{

    background:#eef4ff;

    transform:scale(1.01);

}

.disclosure-table td{

    padding:22px 30px;

    border-bottom:1px solid #edf2ff;

    font-size:16px;

    color:var(--gray);

}

.disclosure-table tbody td:first-child{

    font-weight:700;

    color:var(--dark);

}

.disclosure-table tbody tr:last-child td{

    border-bottom:none;

}

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

@media(max-width:768px){

.section-header h2{

font-size:34px;

}

.disclosure-table thead th,
.disclosure-table td{

padding:16px;

font-size:14px;

}

.table-responsive{

padding:10px;

border-radius:20px;

}

}

@media(max-width:480px){

.section-header{

margin-bottom:35px;

}

.section-header h2{

font-size:28px;

}

.disclosure-table{

min-width:500px;

}

}
/*======================================================
    ASSESSMENT SYSTEM
    PREMIUM MODERN DESIGN
======================================================*/

.assessment-section{
    position:relative;
    background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
    overflow:hidden;
}

.assessment-section::before{
    content:'';
    position:absolute;
    width:450px;
    height:450px;
    border-radius:50%;
    background:rgba(91,61,245,.05);
    top:-180px;
    right:-180px;
}

.assessment-section::after{
    content:'';
    position:absolute;
    width:300px;
    height:300px;
    border-radius:50%;
    background:rgba(0,194,168,.06);
    bottom:-120px;
    left:-120px;
}

.assessment-section .container{
    position:relative;
    z-index:2;
}

.assessment-section .section-header{
    text-align:center;
    margin-bottom:60px;
}

.assessment-section .section-header h2{
    font-size:46px;
    font-family:'Outfit',sans-serif;
    font-weight:800;
    color:var(--dark);
    position:relative;
    display:inline-block;
    padding-bottom:18px;
}

.assessment-section .section-header h2::after{
    content:'';
    position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    width:90px;
    height:5px;
    border-radius:30px;
    background:var(--gradient-main);
}

/*==============================
ASSESSMENT LIST
==============================*/

.assessment-section ul{

    list-style:none;

    display:grid;

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

    gap:25px;

    padding:0;

    margin:0;

}

.assessment-section ul li{

    position:relative;

    background:#fff;

    padding:28px 28px 28px 85px;

    border-radius:24px;

    font-size:17px;

    font-weight:600;

    color:var(--dark);

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

    transition:.4s;

    overflow:hidden;

}

.assessment-section ul li::before{

    content:"✓";

    position:absolute;

    left:25px;

    top:50%;

    transform:translateY(-50%);

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--gradient-main);

    color:#fff;

    font-size:18px;

    font-weight:bold;

}

.assessment-section ul li::after{

    content:'';

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:100%;

    background:var(--gradient-main);

}

.assessment-section ul li:hover{

    transform:translateY(-10px);

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

}

.assessment-section ul li:hover::before{

    transform:translateY(-50%) rotate(360deg);

    transition:.5s;

}

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

@media(max-width:768px){

.assessment-section .section-header h2{

font-size:34px;

}

.assessment-section ul{

grid-template-columns:1fr;

}

.assessment-section ul li{

padding:22px 22px 22px 75px;

font-size:16px;

}

}

@media(max-width:480px){

.assessment-section .section-header{

margin-bottom:40px;

}

.assessment-section .section-header h2{

font-size:28px;

}

.assessment-section ul li{

padding:20px 20px 20px 68px;

}

.assessment-section ul li::before{

width:36px;

height:36px;

font-size:16px;

left:20px;

}

}