/* =========================================
   GOOGLE FONTS
========================================= */
@import url("https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap");
@import url("https://fonts.googleapis.com/css?family=Finger+Paint&display=swap");
@import url("https://fonts.googleapis.com/css?family=Cabin+Sketch:400,700&display=swap");
@import url("https://fonts.googleapis.com/css?family=Tahoma:200,300,400,500,600,700,800&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* =========================================
   EXTERNAL CSS
========================================= */
@import url(css/bootstrap.min.css);
@import url(css/classy-nav.css);
@import url(css/owl.carousel.min.css);
@import url(css/animate.css);
@import url(css/magnific-popup.css);
@import url(css/font-awesome.min.css);
@import url(css/elegant-icon.css);

/* =========================================
   GLOBAL RESET
========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
    font-family: 'Inter', sans-serif;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    padding: 0 15px;
}

a{
    font-family: "Roboto", "Inter", Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.1px;
    text-decoration: none;
    color: inherit;
}

/* Optional: smooth hover feel everywhere */
a:hover{
    text-decoration: none;
    transition: 0.2s ease;
}

/* =========================================
   SECTION SPACING
========================================= */
.section-padding-50 {
    padding: 50px 0;
}

.section-padding-80 {
    padding: 80px 0;
}

.section-padding-100 {
    padding: 100px 0;
}

.section-padding-100-0 {
    padding-top: 100px;
    padding-bottom: 0;
}

.section-padding-150 {
    padding: 150px 0;
}

.section-padding-70 {
    padding-top: 70px;
    padding-bottom: 150px;
}

/* =========================================
   ANIMATION
========================================= */
.animated {
    visibility: hidden;
}

.visible {
    visibility: visible;
}

/* =========================================
   HEADER AREA
========================================= */
.header-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background: transparent;
}

.header-area .top-header-area {
    height: 42px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

.nav-brand img {
    max-width: 120px;
    margin-top: 10px;
}

.header-area .fadfar-main-menu {
    position: relative;
    z-index: 10;
    transition: 0.3s ease;
}

.header-area .is-sticky .fadfar-main-menu {
    position: fixed;
    top: 0;
    width: 100%;
    background: #111;
}

.header-area .fadfar-main-menu .classy-navbar {
    height: 90px;
    padding: 0;
}

.header-area .fadfar-main-menu .classynav ul li a {
    color: #333333;
    font-size: 16px;
    font-weight: 500;
    padding: 0 25px;
}

.header-area .fadfar-main-menu .classynav ul li a:hover {
    color: #666666;
}

    .header-area .fadfar-main-menu .classynav ul li a:hover, .header-area .fadfar-main-menu .classynav ul li a:focus {
        color: #333333; }
    .header-area .fadfar-main-menu .classynav ul li a::after {
        color: #333333; }
    .header-area .fadfar-main-menu .classynav ul li ul li a {
      padding: 0 20px;
      color: #333333;
      font-size: 14px;
      border-bottom: none; }
      .header-area .fadfar-main-menu .classynav ul li ul li a::after {
        color: #333333; }

/* =========================================
   TOP HEADER
========================================= */
.top-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-header-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.top-header-meta a {
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* =========================================
   HERO SLIDER
========================================= */
/* ================= HERO AREA ================= */

.hero-area {
    width: 100%;
    overflow: hidden;
}

/* EACH SLIDE */
.single-hero-slide {
    min-height: 100vh;
    display: flex;
    justify-content: space-between;
    background: linear-gradient(135deg, #1e3c2f, #0f1f18);
    overflow: hidden;
}

/* LEFT SIDE */
.hero-left {
    flex: 1;
    display: flex;
    align-items: center;
}

/* CONTENT */
.hero-content {
    max-width: 600px;
}

.hero-content h1 {
    font-size: 48px;
    line-height: 1.25;
    font-weight: 800;
    color: #fff;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
}

.hero-content p {
    font-size: 17px;
    line-height: 1.9;
    color: rgba(255,255,255,0.85);
    margin-bottom: 30px;
}

/* BUTTONS */
.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.hero-buttons a.hero-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding: 14px 26px;   /* ✅ THIS IS THE FIX */
    border-radius: 10px;

    font-family: "Roboto", "Inter", Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;

    text-decoration: none;

    transition: all 0.25s ease;

    gap: 8px;

    /* IMPORTANT: override bootstrap */
    min-width: 120px;
}

/* Primary */
.hero-buttons a.hero-btn.primary{
    background:#1a73e8;
    color:#fff;
}

.hero-buttons a.hero-btn.primary:hover{
    background:#1558b0;
    transform: translateY(-2px);
}

/* Secondary */
.hero-buttons a.hero-btn.secondary{
    background:#e8f0fe;
    color:#1a73e8;
}

.hero-buttons a.hero-btn.secondary:hover{
    background:#d2e3fc;
    transform: translateY(-2px);
}

/* RIGHT SIDE */
.hero-right {
    flex: 1;
    height: 100vh;
    overflow: hidden;
    display: flex;
}

/* FULL HEIGHT IMAGE */
.hero-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* FLOAT EFFECT */
@keyframes floatImage {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-12px);
    }
    100% {
        transform: translateY(0px);
    }
}

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

@media (max-width: 992px) {

    .single-hero-slide {
        padding: 120px 40px 60px;
        gap: 30px;
    }

    .hero-content h1 {
        font-size: 3rem;
    }
    .about-school-content h2 {
        font-size: 40px;
    }

    .about-text {
        font-size: 16px;
    }
}

/* =========================================
   MOBILE HERO SLIDER ONLY
========================================= */
@media (max-width: 768px) {

    .hero-area {
        width: 100%;
        overflow: hidden;
        background: #000;
    }

    /* SINGLE SLIDE */
    .single-hero-slide {
        position: relative;
        width: 100%;
        height: 85vh;
        overflow: hidden;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        background: #000;
    }

    /* IMAGE WRAPPER */
    .hero-right {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    /* IMAGE */
    .hero-right img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }

    /* DARK OVERLAY */
    .hero-right::after {
        content: "";
        position: absolute;
        inset: 0;
        /*background: linear-gradient(*/
        /*    to top,*/
        /*    rgba(0,0,0,0.85) 10%,*/
        /*    rgba(0,0,0,0.45) 45%,*/
        /*    rgba(0,0,0,0.15) 100%*/
        /*);*/
    }

    /* CONTENT */
    .hero-left {
        position: relative;
        z-index: 5;
        width: 100%;
        padding: 25px 20px 40px;
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }

    /* TEXT AREA */
    .hero-content {
        width: 100%;
        text-align: center;
    }

    /* TITLE */
    .hero-content h1 {
        color: #fff;
        font-size: 2rem;
        font-weight: 800;
        line-height: 1.25;
        margin-bottom: 14px;
    }

    /* DESCRIPTION */
    .hero-content p {
        color: rgba(255,255,255,0.88);
        font-size: 0.95rem;
        line-height: 1.7;
        margin-bottom: 24px;
    }

    /* BUTTON WRAPPER */
    .hero-buttons {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }
    
    .hero-buttons a{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        padding:10px 18px;
        border-radius:10px;
        font-size:15px;
        font-weight:500;
        font-family: "Roboto", "Inter", Arial, sans-serif;
        transition: all 0.2s ease;
        margin-right:10px;
    }
    
    /* Primary button */
    .hero-buttons a.btn-primary{
        background:#1a73e8;
        color:#fff;
    }
    
    .hero-buttons a.btn-primary:hover{
        background:#1558b0;
        transform:translateY(-2px);
    }
    
    /* Info button */
    .hero-buttons a.btn-info{
        background:#e8f0fe;
        color:#1a73e8;
    }
    
    .hero-buttons a.btn-info:hover{
        background:#d2e3fc;
        transform:translateY(-2px);
    }

    /* BUTTONS */
    .fadfar-btn {
        width: 100%;
        min-height: 52px;
        background: #0d6efd;
        color: #fff;
        font-size: 0.95rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: 0.3s ease;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    .fadfar-btn:hover {
        background: #0056d6;
        color: #fff;
    }

    /* SECOND BUTTON */
    .fadfar-btn.active {
        background: rgba(255,255,255,0.12);
        border: 1px solid rgba(255,255,255,0.25);
    }

    .fadfar-btn.active:hover {
        background: rgba(255,255,255,0.2);
    }

    /* OWL DOTS */
    .owl-dots {
        position: absolute;
        bottom: 10px;
        left: 0;
        width: 100%;
        text-align: center;
        z-index: 10;
    }

    .owl-dot span {
        width: 8px !important;
        height: 8px !important;
        margin: 4px !important;
        background: rgba(255,255,255,0.4) !important;
        transition: 0.3s ease;
    }

    .owl-dot.active span {
        width: 24px !important;
        background: #fff !important;
    }

    /* REMOVE NAV ARROWS */
    .owl-prev,
    .owl-next {
        display: none !important;
    }
}

/* =========================================
   SMALL DEVICES
========================================= */
@media (max-width: 480px) {

    .single-hero-slide {
        height: 78vh;
    }

    .hero-left {
        padding: 20px 15px 35px;
    }

    .hero-content h1 {
        font-size: 1.65rem;
    }

    .hero-content p {
        font-size: 0.9rem;
        margin-bottom: 20px;
    }

    .fadfar-btn {
        min-height: 48px;
        font-size: 0.9rem;
    }
}


/* =========================================
   BUTTONS
========================================= */
.welcome-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.fadfar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 30px;
    border-radius: 50px;
    background: #007bff;
    color: #fff;
    font-weight: 600;
    transition: 0.3s ease;
}

.fadfar-btn:hover {
    background: #0056b3;
    color: #fff;
}

.fadfar-btn.active {
    background: #ffb703;
    color: #000;
}

/* =========================================
   OWL CAROUSEL
========================================= */
.owl-carousel .owl-item {
    display: flex;
}

/* =========================================
   FEATURE SECTION
========================================= */
.feature-section {
    padding: 80px 0;
    background: #178f5d;
}

.feature-wrapper {
    display: flex;
    align-items: center;
    gap: 50px;
}

.feature-image,
.feature-content {
    flex: 1;
}

.feature-image img {
    border-radius: 15px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

.feature-content h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.feature-text {
    line-height: 1.8;
    margin-bottom: 25px;
}

.feature-btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 50px;
    background: #007bff;
    color: #fff;
    font-weight: 600;
}

.feature-btn:hover {
    background: #0056b3;
    color: #fff;
}


/* =========================================
   FOOTER
========================================= */
    
         /* ===== MODERN FOOTER ===== */
            .footer-area {
                background: linear-gradient(135deg, #1e3c2f, #0f1f18);
                color: #fff;
                position: relative;
                overflow: hidden;
            }
            
            /* subtle glow */
            .footer-area::before {
                content: "";
                position: absolute;
                width: 400px;
                height: 400px;
                background: rgba(255,255,255,0.05);
                border-radius: 50%;
                top: -100px;
                left: -100px;
                filter: blur(80px);
            }
            
            /* spacing */
            .main-footer-area {
                padding: 80px 0 50px;
            }
            
            /* widget */
            .single-footer-widget {
                margin-bottom: 40px;
            }
            
            /* title */
            .widget-title h5 {
                font-size: 20px;
                margin-bottom: 25px;
                font-weight: 700;
                letter-spacing: 1px;
                position: relative;
            }
            
            /* underline effect */
            .widget-title h5::after {
                content: "";
                width: 40px;
                height: 3px;
                background: #00c853;
                display: block;
                margin-top: 8px;
                border-radius: 2px;
            }
            
            /* links grid */
            .widget-nav ul {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 8px;
                padding: 0;
            }
            
            /* links */
            .widget-nav ul li a {
                color: #dcdcdc;
                font-size: 15px;
                text-decoration: none;
                transition: all 0.3s ease;
            }
            
            /* hover effect */
            .widget-nav ul li a:hover {
                color: #00e676;
                padding-left: 6px;
            }
            
            /* SOCIAL ICONS */
            .social-info {
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
                margin-top: 20px;
            }
            
            .social-info a {
                width: 42px;
                height: 42px;
                border-radius: 50%;
                background: rgba(255,255,255,0.08);
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                transition: all 0.3s ease;
            }
            
            /* hover glow */
            .social-info a:hover {
                background: #00c853;
                transform: translateY(-4px);
                box-shadow: 0 8px 20px rgba(0,200,83,0.4);
            }
            
            /* ===== FOOTER BOTTOM ===== */
            .footer-bottom-area {
                border-top: 1px solid rgba(255,255,255,0.1);
                padding: 20px 0;
            }
            
            /* copyright */
            .copywrite-text p {
                font-size: 14px;
                color: #ccc;
            }
            .copywrite-text p a{
                font-size: 14px;
                color: #ccc;
            }
            
            /* ===== FOOTER NAV DEFAULT ===== */
            
                .footer-nav ul {
                    display: flex !important;
                    flex-direction: row !important;
                    flex-wrap: nowrap !important;
                    overflow-x: auto;
                    white-space: nowrap;
                    gap: 10px;
                    padding: 0;
                    margin: 0;
                }
                
                .footer-nav ul li {
                    display: inline-block !important;
                    flex: 0 0 auto !important;
                    list-style: none;
                }
                
                .footer-nav ul li a {
                    display: inline-block;
                    padding: 6px 12px;
                    white-space: nowrap;
                    color: #ccc;
                }
                
                /* ===== MOBILE FIX (REAL FIX) ===== */
                @media (max-width: 768px) {

                    /* stack footer bottom */
                    .footer-bottom-area .row {
                        flex-direction: column;
                        align-items: center;
                    }
                
                    /* center copyright */
                    .copywrite-text {
                        text-align: center;
                        margin-bottom: 10px;
                    }
                
                    /* make nav full width scrollable */
                    .footer-nav {
                        width: 100%;
                        overflow-x: auto;
                    }
                
                    .footer-nav ul {
                        justify-content: flex-start !important;
                    }
                }
           
            
            /* ===== PREMIUM MOBILE FOOTER ===== */
            @media (max-width: 768px) {
            
                .footer-area {
                    text-align: center;
                }
            
                .main-footer-area {
                    padding: 60px 20px 30px;
                }
            
                /* Each section becomes a card */
                .single-footer-widget {
                    background: rgba(255,255,255,0.05);
                    padding: 20px;
                    border-radius: 12px;
                    margin-bottom: 20px;
                    backdrop-filter: blur(6px);
                }
            
                /* Title centered */
                .widget-title h5 {
                    text-align: center;
                    font-size: 18px;
                }
            
                .widget-title h5::after {
                    margin: 8px auto 0;
                }
            
                /* LINKS → STACKED BUTTON STYLE */
                .widget-nav ul {
                    grid-template-columns: 1fr;
                    gap: 10px;
                }
            
                .widget-nav ul li a {
                    display: block;
                    background: rgba(255,255,255,0.08);
                    padding: 10px;
                    border-radius: 8px;
                    transition: 0.3s;
                }
            
                .widget-nav ul li a:hover {
                    background: #00c853;
                    color: #fff;
                    padding-left: 0;
                }
            
                /* SOCIAL ICONS CENTERED + BIGGER */
                .social-info {
                    justify-content: center;
                    margin-top: 10px;
                }
            
                .social-info a {
                    width: 48px;
                    height: 48px;
                    font-size: 18px;
                }
            
                /* FOOTER BOTTOM STACK */
                .footer-bottom-area {
                    text-align: center;
                }
            
                
            
                .copywrite-text {
                    margin-bottom: 10px;
                }
            }



/* =========================================
   MOBILE
========================================= */
@media (max-width: 768px) {

    .header-area .fadfar-main-menu .classy-navbar {
        height: 70px;
    }

    .header-area .fadfar-main-menu .classy-menu {
       background: #333333;
    }
    
    .header-area .fadfar-main-menu .classynav ul li a {
        background: #333333;
        color: #ffffff;
        font-size: 16px;
        font-weight: 500;
        padding: 0 25px;
        }
    
    .header-area .fadfar-main-menu .classynav ul li a:hover {
        color: #ffffff;
    }
    
    .header-area .fadfar-main-menu .classynav ul li ul li a {
          padding: 0 45px;
          text-align: left;
          color: #ffffff; } 

    /* HERO MOBILE FIX */
    .single-hero-post {
        flex-direction: column-reverse;
        min-height: auto;
    }

    .hero-image-side {
        width: 100%;
        height: 45vh;
        min-height: 45vh;
    }

    .hero-image-side .slide-img {
        height: 45vh;
        min-height: 45vh;
    }

    .hero-content-side {
        width: 100%;
        padding: 40px 20px 60px;
        text-align: left;
        align-items: flex-start;
    }

    .hero-slides-content {
        max-width: 100%;
    }

    .hero-slides-content h2 {
        font-size: 2rem;
        line-height: 1.3;
    }

    .hero-slides-content p {
        font-size: 0.95rem;
        line-height: 1.7;
    }

    .welcome-btn-group {
        flex-direction: column;
        width: 100%;
    }

    .fadfar-btn {
        width: 100%;
    }

    /* TOP HEADER MOBILE */
    .top-header-meta span {
        display: none;
    }

    .top-header-meta a {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        justify-content: center;
        background: rgba(255,255,255,0.15);
    }

   

    .widget-nav ul {
        grid-template-columns: 1fr;
    }

    .widget-title h5::after {
        margin-left: auto;
        margin-right: auto;
    }

    .social-info {
        justify-content: center;
    }

   
   
}



/* =========================================
   PARALLAX VIDEO SECTION
========================================= */
.parallax-video-section{
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    background: #000;
}

/* VIDEO WRAPPER */
.parallax-video-wrapper{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* FULLSCREEN VIDEO */
.parallax-video-wrapper iframe{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120vw;
    height: 120vh;
    transform: translate(-50%, -50%);
    pointer-events: none;
    border: 0;
}

/* DARK OVERLAY */
.parallax-video-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0,0,0,0.45),
        rgba(0,0,0,0.65)
    );
    z-index: 2;
}

/* CONTENT */
.parallax-video-content{
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 900px;
    padding: 20px;
    text-align: center;
    color: #fff;
}

/* TAG */
.video-tag{
    display: inline-block;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    color: #fff;
    padding: 10px 22px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 25px;
    font-family: 'Roboto', sans-serif;
}

/* TITLE */
.parallax-video-content h2{
    font-size: 64px;
    line-height: 1.15;
    font-weight: 800;
    margin-bottom: 25px;
    color: #fff;
    font-family: 'Roboto', sans-serif;
}

/* TEXT */
.parallax-video-content p{
    font-size: 20px;
    line-height: 1.8;
    color: rgba(255,255,255,0.92);
    max-width: 760px;
    margin: 0 auto;
    font-family: 'Roboto', sans-serif;
}

/* =========================================
   LAPTOP
========================================= */
@media (max-width: 1200px){

    .parallax-video-content h2{
        font-size: 54px;
    }

    .parallax-video-content p{
        font-size: 18px;
    }
}

/* =========================================
   TABLET
========================================= */
@media (max-width: 992px){

    .parallax-video-section{
        height: 85vh;
    }

    .parallax-video-content h2{
        font-size: 46px;
    }

    .parallax-video-content p{
        font-size: 17px;
        line-height: 1.7;
    }
}

/* =========================================
   MOBILE
========================================= */
@media (max-width: 768px){

    .parallax-video-section{
        height: 75vh;
    }

    .parallax-video-wrapper iframe{
        width: 220vw;
        height: 100vh;
    }

    .parallax-video-content{
        padding: 20px 18px;
    }

    .video-tag{
        font-size: 13px;
        padding: 8px 18px;
        margin-bottom: 18px;
    }

    .parallax-video-content h2{
        font-size: 34px;
        line-height: 1.25;
        margin-bottom: 18px;
    }

    .parallax-video-content p{
        font-size: 16px;
        line-height: 1.7;
    }
}

/* =========================================
   SMALL MOBILE
========================================= */
@media (max-width: 480px){

    .parallax-video-section{
        height: 70vh;
    }

    .parallax-video-content h2{
        font-size: 28px;
    }

    .parallax-video-content p{
        font-size: 15px;
    }

    .parallax-video-wrapper iframe{
        width: 260vw;
        height: 100vh;
    }
}







/* =========================================
   TABLET
========================================= */
@media (max-width: 992px) {

    .single-hero-post {
        flex-direction: column-reverse;
    }

    .hero-content-side,
    .hero-image-side {
        width: 100%;
    }

    .hero-content-side {
        padding: 60px 30px;
        text-align: center;
    }

    .hero-image-side {
        min-height: 55vh;
    }

    .hero-image-side .slide-img {
        min-height: 55vh;
    }

    .welcome-btn-group {
        justify-content: center;
    }

    .feature-wrapper {
        flex-direction: column;
        text-align: center;
    }
}




/* =========================================
   ABOUT SCHOOL SECTION
========================================= */

.about-school-section {
    padding: 100px 0;
    background: #f7fafc;
    position: relative;
    overflow: hidden;
}

/* WRAPPER */
.about-school-wrapper {
    display: flex;
    align-items: center;
    gap: 60px;
}

/* IMAGE SIDE */
.about-school-image {
    flex: 1;
    position: relative;
}

.about-school-image img {
    width: 100%;
    height: 650px;
    object-fit: cover;
    border-radius: 20px;
    display: block;
}

/* EXPERIENCE BADGE */
.experience-badge {
    position: absolute;
    bottom: 30px;
    left: 30px;
    background: #0d6efd;
    color: #fff;
    padding: 25px 30px;
    border-radius: 18px;
    box-shadow: 0 15px 40px rgba(13,110,253,0.25);
}

.experience-badge h3 {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.2;
}

.experience-badge span {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
}

/* CONTENT SIDE */
.about-school-content {
    flex: 1;
}

/* TAG */
.section-tag {
    display: inline-block;
    background: rgba(13,110,253,0.1);
    color: #0d6efd;
    padding: 10px 18px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 20px;
}

/* TITLE */
.about-school-content h2 {
     font-size: 48px;
    line-height: 1.25;
    font-weight: 800;
    /*color: #0f172a;*/
    /*margin-bottom: 25px;*/
}

/* TEXT */
.about-text {
    font-size: 17px;
    line-height: 1.9;
    font-weight: 400;
}

/* FEATURES */
.about-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-top: 35px;
    margin-bottom: 40px;
}

/* SINGLE FEATURE */
.single-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    padding: 16px 18px;
    border-radius: 14px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
    transition: 0.3s ease;
}

.single-feature:hover {
    transform: translateY(-5px);
}

.single-feature i {
    color: #0d6efd;
    font-size: 1.2rem;
}

.single-feature span {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
}

/* BUTTON */
.about-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    min-height: 56px;
    padding: 0 30px;
    background: linear-gradient(135deg, #0d6efd, #0056d6);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    border-radius: 50px;
    text-decoration: none;
    transition: 0.3s ease;
    box-shadow: 0 12px 30px rgba(13,110,253,0.25);
}

.about-btn:hover {
    transform: translateY(-3px);
    color: #fff;
}

/* =========================================
   TABLET RESPONSIVE
========================================= */
@media (max-width: 992px) {

    .about-school-wrapper {
        flex-direction: column;
        gap: 50px;
    }

    .about-school-image img {
        height: 500px;
    }

    .about-school-content {
        text-align: center;
    }

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

    .single-feature {
        justify-content: center;
    }
}

/* =========================================
   MOBILE RESPONSIVE
========================================= */
@media (max-width: 768px) {
    
    .about-school-section {
        padding: 70px 0;
    }

    .about-school-wrapper {
        gap: 40px;
    }

    .about-school-image img {
        height: 380px;
        border-radius: 16px;
    }

    .experience-badge {
        left: 15px;
        bottom: 15px;
        padding: 18px 22px;
        border-radius: 12px;
    }
    .experience-badge h3 {
        font-size: 32px;
        
    }.experience-badge span {
        font-size: 15px;
    }

    .about-school-content h2 {
        font-size: 34px;
        line-height: 1.35;
    }

    .about-text {
        font-size: 16px;
        line-height: 1.8;
    }
    .about-features {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .single-feature {
        justify-content: flex-start;
        text-align: left;
    }

    .single-feature span {
        font-size: 15px;
    }
    
    .about-btn {
        font-size: 15px;
    }
}

/* =========================================
   SMALL MOBILE DEVICES
========================================= */
@media (max-width: 480px) {

    .about-school-image img {
        height: 320px;
    }

    .about-school-content h2 {
        font-size: 30px;
    }
    
    .about-text {
        font-size: 15px;
    }
    
     .experience-badge h3 {
        font-size: 28px;
    }
    
    .experience-badge span {
        font-size: 14px;
    }
    
    .section-tag {
        font-size: 13px;
    }
    .single-feature {
        padding: 14px 15px;
    }
    
     .single-feature span {
        font-size: 14px;
    }
}



/* =========================================
   MODERN FEATURE VIDEO SECTION
========================================= */

.modern-feature-section {
    position: relative;
    padding: 110px 0;
    background: #f8fafc;
    overflow: hidden;
}

/* WRAPPER */

.modern-feature-wrapper {
    display: flex;
    align-items: center;
    gap: 70px;
}

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

.modern-feature-content {
    flex: 1;
}

/* TAG */

.feature-tag {
    display: inline-block;
    padding: 10px 18px;
    background: rgba(13,110,253,0.08);
    color: #0d6efd;
    font-size: 14px;
    font-weight: 700;
    border-radius: 50px;
    margin-bottom: 24px;
    font-family: 'Inter', sans-serif;
}

/* TITLE */

.modern-feature-content h2 {
    font-size: 48px;
    line-height: 1.25;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 24px;
    font-family: 'Inter', sans-serif;
}

/* TEXT */

.modern-feature-text {
    font-size: 17px;
    line-height: 1.9;
    color: #475569;
    margin-bottom: 35px;
    font-family: 'Inter', sans-serif;
}

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

.modern-feature-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 40px;
}

.modern-feature-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.modern-feature-item i {
    width: 28px;
    height: 28px;
    background: #0d6efd;
    color: #fff;
    font-size: 13px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modern-feature-item span {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    font-family: 'Inter', sans-serif;
}

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

.modern-feature-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 190px;
    min-height: 58px;
    padding: 0 34px;
    background: linear-gradient(135deg, #0d6efd, #0056d6);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 50px;
    transition: 0.3s ease;
    font-family: 'Inter', sans-serif;
}

.modern-feature-btn:hover {
    transform: translateY(-3px);
    color: #fff;
}

/* =========================================
   VIDEO SIDE
========================================= */

.modern-feature-video {
    flex: 1;
}

/* VIDEO WRAPPER */

.video-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 24px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.12);
}

/* RESPONSIVE VIDEO */

.video-wrapper iframe {
    width: 100%;
    height: 550px;
    border: 0;
    display: block;
}

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

@media (max-width: 992px) {

    .modern-feature-wrapper {
        flex-direction: column;
        gap: 50px;
    }

    .modern-feature-content {
        text-align: center;
    }

    .modern-feature-list {
        align-items: center;
    }

    .modern-feature-content h2 {
        font-size: 40px;
    }

    .video-wrapper iframe {
        height: 450px;
    }
}

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

@media (max-width: 768px) {

    .modern-feature-section {
        padding: 80px 0;
    }

    .modern-feature-wrapper {
        gap: 40px;
    }

    .modern-feature-content h2 {
        font-size: 32px;
        line-height: 1.35;
    }

    .modern-feature-text {
        font-size: 16px;
        line-height: 1.8;
    }

    .modern-feature-item {
        align-items: flex-start;
        text-align: left;
    }

    .modern-feature-item span {
        font-size: 15px;
    }

    .video-wrapper {
        border-radius: 18px;
    }

    .video-wrapper iframe {
        height: 320px;
    }

    .modern-feature-btn {
        width: 100%;
    }
}

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

@media (max-width: 480px) {

    .modern-feature-content h2 {
        font-size: 28px;
    }

    .modern-feature-text {
        font-size: 15px;
    }

    .feature-tag {
        font-size: 13px;
    }

    .video-wrapper iframe {
        height: 240px;
    }
}




/* Section */
.blog-modern{
    padding:90px 0;
}

/* Header */
.blog-head{
    text-align:left;
    margin-bottom:40px;
    max-width:700px;
}

.blog-head h2{
    font-size:38px;
    font-weight:700;
    letter-spacing:-0.8px;
    margin-bottom:8px;
}

.blog-head p{
    font-size:16px;
    color:#5f6368;
    line-height:1.6;
}

/* Grid (better than Bootstrap feel) */
.blog-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:24px;
}

/* Card */
.blog-item{
    background:#fff;
    border-radius:16px;
    overflow:hidden;
    border:1px solid #e7eaf0;
    transition:0.25s ease;
}

.blog-item:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 40px rgba(0,0,0,0.08);
}

/* Image */
.blog-image img{
    width:100%;
    height:200px;
    object-fit:cover;
    display:block;
}

/* Content */
.blog-info{
    padding:18px;
}

/* Meta */
.blog-meta{
    font-size:12px;
    color:#80868b;
    margin-bottom:10px;
    font-weight:500;
}

/* Title */
.blog-title{
    display:block;
    font-size:18px;
    font-weight:600;
    color:#202124;
    text-decoration:none;
    line-height:1.4;
    margin-bottom:10px;
}

.blog-title:hover{
    color:#1a73e8;
}

/* Excerpt */
.blog-excerpt{
    font-size:14px;
    color:#5f6368;
    line-height:1.6;
    margin-bottom:16px;
}

/* CTA */
.blog-read{
    font-size:14px;
    font-weight:500;
    color:#1a73e8;
    text-decoration:none;
}

.blog-read:hover{
    text-decoration:underline;
}

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

/* Tablet */
@media (max-width: 1024px){
    .blog-grid{
        grid-template-columns:repeat(2, 1fr);
    }
}

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

    .blog-modern{
        padding:60px 0;
    }

    .blog-head h2{
        font-size:26px;
    }

    .blog-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .blog-image img{
        height:190px;
    }
}


/* ================= TESTIMONIAL SECTION ================= */
.testimonials-section{
    background:#f8fafc;
}

/* HEADER */
.testimonial-header{
    text-align:center;
    margin-bottom:40px;
}

.testimonial-header h2{
    font-size:38px;
    font-weight:800;
    color:#0f172a;
    margin-bottom:10px;
}

.testimonial-header p{
    font-size:16px;
    color:#64748b;
}

/* GRID */
.testimonial-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:25px;
}

/* CARD */
.testimonial-card{
    background:#fff;
    padding:25px;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(0,0,0,0.06);
    transition:0.3s ease;
    position:relative;
    overflow:hidden;
}

/* subtle top accent */
.testimonial-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:linear-gradient(90deg,#0d6efd,#00c853);
}

/* hover */
.testimonial-card:hover{
    transform:translateY(-6px);
}

/* TEXT */
.testimonial-text{
    font-size:15px;
    line-height:1.8;
    color:#334155;
    margin-bottom:20px;
}

/* AUTHOR */
.testimonial-author h4{
    font-size:16px;
    font-weight:700;
    margin-bottom:3px;
    color:#0f172a;
}

.testimonial-author span{
    font-size:13px;
    color:#64748b;
}

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

/* Tablet */
@media (max-width: 992px){
    .testimonial-grid{
        grid-template-columns:repeat(2, 1fr);
    }

    .testimonial-header h2{
        font-size:32px;
    }
}

/* Mobile */
@media (max-width: 768px){
    .testimonial-grid{
        grid-template-columns:1fr;
    }

    .testimonial-header h2{
        font-size:28px;
    }

    .testimonial-card{
        padding:20px;
    }
}



/* =========================================
   ABOUT US SECTION
========================================= */

.modern-about-section{
    padding:200px 0px 0px 0px;
    background:#f8fafc;
    overflow:hidden;
    font-family:'Inter', sans-serif;
}

/* WRAPPER */

.modern-about-wrapper{
    display:flex;
    align-items:center;
    gap:70px;
}

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

.modern-about-content{
    flex:1;
}

/* TAG */

.about-tag{
    display:inline-block;
    padding:10px 18px;
    background:rgba(13,110,253,0.08);
    color:#0d6efd;
    border-radius:50px;
    font-size:14px;
    font-weight:700;
    margin-bottom:22px;
}

/* TITLE */

.modern-about-content h2{
    font-size:48px;
    line-height:1.2;
    font-weight:800;
    color:#0f172a;
    margin-bottom:25px;
    letter-spacing:-1px;
}

/* DESCRIPTION */

.about-description{
    font-size:17px;
    line-height:1.9;
    color:#475569;
}

.about-description p{
    margin-bottom:18px;
}

/* FEATURES */

.about-feature-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:18px;
    margin-top:40px;
}

/* SINGLE FEATURE */

.about-feature-item{
    display:flex;
    align-items:center;
    gap:12px;
    background:#fff;
    padding:16px 18px;
    border-radius:14px;
    box-shadow:0 10px 30px rgba(0,0,0,0.04);
    transition:0.3s ease;
}

.about-feature-item:hover{
    transform:translateY(-4px);
}

.about-feature-item i{
    width:28px;
    height:28px;
    min-width:28px;
    border-radius:50%;
    background:#0d6efd;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
}

.about-feature-item span{
    font-size:15px;
    font-weight:600;
    color:#1e293b;
    line-height:1.5;
}

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

.modern-about-side{
    flex:1;
}

/* CARD */

.about-card{
    background:#fff;
    padding:45px;
    border-radius:24px;
    box-shadow:0 20px 60px rgba(0,0,0,0.08);
    position:relative;
    overflow:hidden;
}

/* TOP ACCENT */

.about-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,#0d6efd,#00c853);
}

/* ICON */

.about-card-icon{
    width:75px;
    height:75px;
    border-radius:20px;
    background:linear-gradient(135deg,#0d6efd,#0056d6);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:25px;
    box-shadow:0 12px 35px rgba(13,110,253,0.25);
}

.about-card-icon i{
    font-size:30px;
    color:#fff;
}

/* CONTENT */

.about-card-content{
    font-size:17px;
    line-height:1.9;
    color:#475569;
}

.about-card-content p{
    margin-bottom:18px;
}

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

@media (max-width:992px){

    .modern-about-wrapper{
        flex-direction:column;
        gap:50px;
    }

    .modern-about-content{
        text-align:center;
    }

    .modern-about-content h2{
        font-size:40px;
    }

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

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

@media (max-width:768px){

    .modern-about-section{
        padding:175px 0 50px 0px;
    }

    .modern-about-wrapper{
        gap:40px;
    }

    .modern-about-content h2{
        font-size:32px;
        line-height:1.3;
    }

    .about-description{
        font-size:16px;
        line-height:1.8;
    }

    .about-feature-grid{
        grid-template-columns:1fr;
        gap:14px;
    }

    .about-feature-item{
        text-align:left;
    }

    .about-card{
        padding:30px 24px;
        border-radius:20px;
    }

    .about-card-content{
        font-size:16px;
    }
}

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

@media (max-width:480px){

    .modern-about-content h2{
        font-size:28px;
    }

    .about-description{
        font-size:15px;
    }

    .about-card-content{
        font-size:15px;
    }

    .about-feature-item span{
        font-size:14px;
    }

    .about-tag{
        font-size:13px;
    }
}




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

.management-section{
    padding:50px 0px 80px 0px;
    background:#f8fafc;
    font-family:'Inter', sans-serif;
    overflow:hidden;
}

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

.management-header{
    text-align:center;
    max-width:760px;
    margin:0 auto 60px;
}

/* TAG */

.management-tag{
    display:inline-block;
    padding:10px 18px;
    background:rgba(13,110,253,0.08);
    color:#0d6efd;
    border-radius:50px;
    font-size:14px;
    font-weight:700;
    margin-bottom:22px;
}

/* TITLE */

.management-header h2{
    font-size:48px;
    line-height:1.2;
    font-weight:800;
    color:#0f172a;
    margin-bottom:20px;
    letter-spacing:-1px;
}

/* TEXT */

.management-header p{
    font-size:17px;
    line-height:1.9;
    color:#64748b;
}

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

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

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

.management-card{
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 15px 45px rgba(0,0,0,0.06);
    transition:0.35s ease;
    position:relative;
}

/* HOVER */

.management-card:hover{
    transform:translateY(-8px);
}

/* TOP ACCENT */

.management-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,#0d6efd,#00c853);
    z-index:2;
}

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

.management-image{
    width:100%;
    height:320px;
    overflow:hidden;
}

.management-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:0.5s ease;
}

.management-card:hover .management-image img{
    transform:scale(1.05);
}

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

.management-content{
    padding:28px 24px 30px;
    text-align:center;
}

/* NAME */

.management-content h3{
    font-size:22px;
    font-weight:700;
    color:#0f172a;
    margin-bottom:8px;
}

/* ROLE */

.management-role{
    display:inline-block;
    font-size:14px;
    font-weight:600;
    color:#0d6efd;
    margin-bottom:18px;
}

/* TEXT */

.management-content p{
    font-size:15px;
    line-height:1.8;
    color:#64748b;
}

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

@media (max-width:992px){

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

    .management-header h2{
        font-size:40px;
    }
}

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

@media (max-width:768px){

    .management-section{
        padding:50px 0px 75px 0px;
    }

    .management-header{
        margin-bottom:45px;
    }

    .management-header h2{
        font-size:32px;
        line-height:1.3;
    }

    .management-header p{
        font-size:16px;
        line-height:1.8;
    }

    .management-grid{
        grid-template-columns:1fr;
        gap:22px;
    }

    .management-image{
        height:300px;
    }

    .management-content{
        padding:24px 20px 28px;
    }

    .management-content h3{
        font-size:20px;
    }
}

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

@media (max-width:480px){

    .management-header h2{
        font-size:28px;
    }

    .management-header p{
        font-size:15px;
    }

    .management-content p{
        font-size:14px;
    }

    .management-tag{
        font-size:13px;
    }

    .management-image{
        height:260px;
    }
}




/* =========================================
   CURRICULUM CALENDAR SECTION
========================================= */

.curriculum-calendar-section{
    padding:200px 0px 100px 0px;
    background:#f8fafc;
    font-family:'Inter', sans-serif;
    overflow:hidden;
}

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

.calendar-section-header{
    text-align:center;
    max-width:760px;
    margin:0 auto 60px;
}

/* TAG */

.calendar-tag{
    display:inline-block;
    padding:10px 18px;
    background:rgba(13,110,253,0.08);
    color:#0d6efd;
    border-radius:50px;
    font-size:14px;
    font-weight:700;
    margin-bottom:22px;
}

/* TITLE */

.calendar-section-header h2{
    font-size:48px;
    line-height:1.2;
    font-weight:800;
    color:#0f172a;
    margin-bottom:20px;
    letter-spacing:-1px;
}

/* TEXT */

.calendar-section-header p{
    font-size:17px;
    line-height:1.9;
    color:#64748b;
}

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

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

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

.calendar-card{
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 18px 45px rgba(0,0,0,0.06);
    transition:0.35s ease;
}

.calendar-card:hover{
    transform:translateY(-8px);
}

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

.calendar-month{
    background:linear-gradient(135deg,#0d6efd,#0056d6);
    color:#fff;
    text-align:center;
    padding:22px 20px;
    font-size:24px;
    font-weight:700;
}

/* COLOR VARIANTS */

.calendar-month.secondary{
    background:linear-gradient(135deg,#7c3aed,#5b21b6);
}

.calendar-month.success{
    background:linear-gradient(135deg,#16a34a,#15803d);
}

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

.calendar-list{
    list-style:none;
    padding:25px;
    margin:0;
}

/* ITEM */

.calendar-list li{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:18px 0;
    border-bottom:1px solid #eef2f7;
}

/* LAST */

.calendar-list li:last-child{
    border-bottom:none;
    padding-bottom:0;
}

/* LABEL */

.calendar-list li span{
    font-size:15px;
    font-weight:600;
    line-height:1.5;
    color:#1e293b;
}

/* DATE */

.calendar-list li strong{
    font-size:14px;
    font-weight:700;
    color:#0d6efd;
    white-space:nowrap;
}

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

@media (max-width:992px){

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

    .calendar-section-header h2{
        font-size:40px;
    }
}

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

@media (max-width:768px){

    .curriculum-calendar-section{
        padding:165px 0 75px 0px;
    }

    .calendar-section-header{
        margin-bottom:45px;
    }

    .calendar-section-header h2{
        font-size:32px;
        line-height:1.3;
    }

    .calendar-section-header p{
        font-size:16px;
        line-height:1.8;
    }

    .calendar-wrapper{
        grid-template-columns:1fr;
        gap:22px;
    }

    .calendar-month{
        font-size:22px;
        padding:20px;
    }

    .calendar-list{
        padding:22px;
    }
}

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

@media (max-width:480px){

    .calendar-section-header h2{
        font-size:28px;
    }

    .calendar-section-header p{
        font-size:15px;
    }

    .calendar-tag{
        font-size:13px;
    }

    .calendar-list li{
        flex-direction:column;
        align-items:flex-start;
        gap:6px;
    }

    .calendar-list li span{
        font-size:14px;
    }

    .calendar-list li strong{
        font-size:13px;
    }
}





/* =========================================
   EVENTS CALENDAR SECTION
========================================= */

.events-calendar-section{
    padding:0px 0 100px 0px;
    background:#f8fafc;
    font-family:'Inter', sans-serif;
    overflow:hidden;
}

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

.events-header{
    max-width:760px;
    margin:0 auto 60px;
    text-align:center;
}

/* TAG */

.events-tag{
    display:inline-block;
    padding:10px 18px;
    background:rgba(13,110,253,0.08);
    color:#0d6efd;
    border-radius:50px;
    font-size:14px;
    font-weight:700;
    margin-bottom:22px;
}

/* TITLE */

.events-header h2{
    font-size:48px;
    line-height:1.2;
    font-weight:800;
    color:#0f172a;
    margin-bottom:20px;
    letter-spacing:-1px;
}

/* TEXT */

.events-header p{
    font-size:17px;
    line-height:1.9;
    color:#64748b;
}

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

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

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

.event-card{
    background:#fff;
    border-radius:24px;
    padding:28px;
    display:flex;
    gap:22px;
    align-items:flex-start;
    box-shadow:0 18px 45px rgba(0,0,0,0.06);
    transition:0.35s ease;
}

.event-card:hover{
    transform:translateY(-8px);
}

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

.event-date{
    min-width:82px;
    height:82px;
    border-radius:20px;
    background:linear-gradient(135deg,#0d6efd,#0056d6);
    color:#fff;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    box-shadow:0 12px 30px rgba(13,110,253,0.25);
}

.event-date span{
    font-size:28px;
    font-weight:800;
    line-height:1;
}

.event-date small{
    font-size:13px;
    font-weight:600;
    margin-top:5px;
    letter-spacing:1px;
}

/* COLOR VARIANTS */

.event-date.purple{
    background:linear-gradient(135deg,#7c3aed,#5b21b6);
}

.event-date.green{
    background:linear-gradient(135deg,#16a34a,#15803d);
}

.event-date.orange{
    background:linear-gradient(135deg,#f59e0b,#d97706);
}

.event-date.red{
    background:linear-gradient(135deg,#ef4444,#dc2626);
}

.event-date.dark{
    background:linear-gradient(135deg,#1e293b,#0f172a);
}

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

.event-content{
    flex:1;
}

/* BADGE */

.event-badge{
    display:inline-block;
    padding:7px 14px;
    border-radius:50px;
    background:rgba(13,110,253,0.08);
    color:#0d6efd;
    font-size:12px;
    font-weight:700;
    margin-bottom:16px;
}

/* BADGE COLORS */

.purple-badge{
    background:rgba(124,58,237,0.1);
    color:#7c3aed;
}

.green-badge{
    background:rgba(22,163,74,0.1);
    color:#16a34a;
}

.orange-badge{
    background:rgba(245,158,11,0.12);
    color:#d97706;
}

.red-badge{
    background:rgba(239,68,68,0.1);
    color:#dc2626;
}

.dark-badge{
    background:rgba(30,41,59,0.1);
    color:#0f172a;
}

/* TITLE */

.event-content h3{
    font-size:22px;
    line-height:1.4;
    font-weight:700;
    color:#0f172a;
    margin-bottom:14px;
}

/* TEXT */

.event-content p{
    font-size:15px;
    line-height:1.8;
    color:#64748b;
}

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

@media (max-width:992px){

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

    .events-header h2{
        font-size:40px;
    }
}

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

@media (max-width:768px){

    .events-calendar-section{
        padding:75px 0;
    }

    .events-header{
        margin-bottom:45px;
    }

    .events-header h2{
        font-size:32px;
        line-height:1.3;
    }

    .events-header p{
        font-size:16px;
        line-height:1.8;
    }

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

    .event-card{
        padding:24px 20px;
        border-radius:20px;
    }

    .event-content h3{
        font-size:20px;
    }
}

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

@media (max-width:480px){

    .events-header h2{
        font-size:28px;
    }

    .events-header p{
        font-size:15px;
    }

    .events-tag{
        font-size:13px;
    }

    .event-card{
        flex-direction:column;
        align-items:flex-start;
    }

    .event-date{
        width:78px;
        height:78px;
    }

    .event-content h3{
        font-size:18px;
    }

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



/* =========================================
   MODERN GALLERY SECTION
========================================= */

.modern-gallery-section{
    position: relative;
    padding: 200px 0px 50px 0px;
    background: #f8fafc;
    overflow: hidden;
}

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

.modern-gallery-head{
    text-align: center;
    max-width: 820px;
    margin: 0 auto 55px;
}

.gallery-tag{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background: rgba(13,110,253,0.08);
    color: #0d6efd;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    font-family: "Inter", sans-serif;
    margin-bottom: 20px;
}

.modern-gallery-head h2{
    font-size: 52px;
    line-height: 1.2;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 20px;
    font-family: "Inter", sans-serif;
    letter-spacing: -1px;
}

.modern-gallery-head p{
    font-size: 17px;
    line-height: 1.9;
    color: #64748b;
    font-family: "Roboto", sans-serif;
}

/* =========================================
   FILTERS
========================================= */

.modern-filter-wrap{
    margin-bottom: 45px;
}

.portfolio-filter{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.portfolio-filter .btn{
    border: none;
    outline: none;
    padding: 12px 24px;
    border-radius: 50px;
    background: #ffffff;
    color: #334155;
    font-size: 15px;
    font-weight: 600;
    font-family: "Inter", sans-serif;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.portfolio-filter .btn:hover,
.portfolio-filter .btn.active{
    background: linear-gradient(135deg, #0d6efd, #0056d6);
    color: #fff;
    transform: translateY(-2px);
}

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


.single_portfolio_item{
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 15px 40px rgba(0,0,0,0.06);
    transition: all 0.35s ease;
}

.single_portfolio_item:hover{
    transform: translateY(-8px);
}

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

.portfolio-thumbnail{
    position: relative;
    width: 100%;
    height: 320px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* IMAGE ZOOM */

.single_portfolio_item:hover .portfolio-thumbnail{
    transform: scale(1.05);
    transition: transform 0.5s ease;
}

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

.portfolio-hover-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.78),
        rgba(0,0,0,0.15)
    );

    display: flex;
    align-items: flex-end;
    opacity: 0;
    transition: all 0.35s ease;
}

.single_portfolio_item:hover .portfolio-hover-overlay{
    opacity: 1;
}

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

.portfolio-img{
    width: 100%;
    height: 100%;
    padding: 25px;
    text-decoration: none;
}

.port-hover-text{
    width: 100%;
}

.port-hover-text h3{
    font-size: 20px;
    line-height: 1.4;
    color: #fff;
    font-weight: 700;
    margin: 0;
    font-family: "Inter", sans-serif;
}

.portfolio-thumbnail img{
    width:100%;
    height:260px;
    object-fit:cover;
    display:block;
}

/* =========================================
   VIDEO ITEMS
========================================= */

.single_portfolio_item iframe{
    width: 100%;
    height: 320px;
    border: none;
    display: block;
    border-radius: 24px;
}

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

.pagination{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}

.pagination .page-link{
    min-width: 50px;
    height: 50px;
    border-radius: 14px !important;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #334155;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.pagination .page-link:hover{
    background: #0d6efd;
    color: #fff;
    transform: translateY(-2px);
}

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

#load{
    text-align: center;
    padding-top: 20px;
}

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

@media (max-width: 992px){

    .modern-gallery-section{
        padding: 80px 0;
    }

    .modern-gallery-head h2{
        font-size: 42px;
    }

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

    .portfolio-thumbnail{
        height: 280px;
    }
}

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

@media (max-width: 768px){

    .modern-gallery-section{
        padding: 165px 0 50px 0px;
    }

    .modern-gallery-head{
        margin-bottom: 40px;
    }

    .modern-gallery-head h2{
        font-size: 32px;
        line-height: 1.3;
    }

    .modern-gallery-head p{
        font-size: 15px;
        line-height: 1.8;
    }

    .gallery-tag{
        font-size: 13px;
        padding: 9px 18px;
    }

    .portfolio-filter{
        gap: 10px;
    }

    .portfolio-filter .btn{
        padding: 10px 18px;
        font-size: 14px;
    }

    .fadfar-portfolio{
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .portfolio-thumbnail{
        height: 260px;
    }

    .port-hover-text h3{
        font-size: 18px;
    }

    .pagination .page-link{
        min-width: 46px;
        height: 46px;
        font-size: 14px;
    }
}

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

@media (max-width: 480px){

    .modern-gallery-head h2{
        font-size: 28px;
    }

    .portfolio-thumbnail{
        height: 240px;
    }

    .portfolio-img{
        padding: 20px;
    }

    .port-hover-text h3{
        font-size: 17px;
    }

    .portfolio-filter .btn{
        width: auto;
        font-size: 13px;
        padding: 9px 16px;
    }
}


/* =========================================
   IMAGE SKELETON LOADER
========================================= */

.gallery-loading-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    margin-top:25px;
}

.gallery-skeleton{
    height:280px;
    border-radius:22px;
    overflow:hidden;
    position:relative;
    background:#e5e7eb;
}

.gallery-skeleton::before{
    content:"";
    position:absolute;
    inset:0;
    transform:translateX(-100%);
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.6),
        transparent
    );

    animation:skeletonLoading 1.2s infinite;
}

@keyframes skeletonLoading{
    100%{
        transform:translateX(100%);
    }
}

/* TABLET */
@media(max-width:992px){

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

}

/* MOBILE */
@media(max-width:768px){

    .gallery-loading-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .gallery-skeleton{
        height:240px;
    }

}

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

@media(max-width:992px){

    .single_portfolio_item{
        width:50%;
    }

}

@media(max-width:768px){

    .single_portfolio_item{
        width:100%;
    }

}


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

.gallery-image-wrapper{
    position:relative;
    overflow:hidden;
    border-radius:24px;
    background:#f3f4f6;
}


/* IMAGE */

.gallery-image-wrapper img{
    width:100%;
    height:320px;
    object-fit:cover;
    display:block;
    transition:0.4s ease;
}

@media(max-width:768px){

    .gallery-image-wrapper img{
        height:260px;
    }

}


/* =========================================
   SKELETON
========================================= */

.image-skeleton{
    position:absolute;
    inset:0;
    background:#e5e7eb;
    overflow:hidden;
}

.image-skeleton::before{
    content:"";
    position:absolute;
    inset:0;
    transform:translateX(-100%);
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.7),
        transparent
    );

    animation:skeleton 1.2s infinite;
}

@keyframes skeleton{

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

}


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

.gallery-loading-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    margin-top:25px;
}

.gallery-skeleton{
    height:280px;
    border-radius:24px;
    background:#e5e7eb;
    position:relative;
    overflow:hidden;
}

.gallery-skeleton::before{
    content:"";
    position:absolute;
    inset:0;
    transform:translateX(-100%);
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.7),
        transparent
    );

    animation:skeleton 1.2s infinite;
}

@media(max-width:992px){

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

}

@media(max-width:768px){

    .gallery-loading-grid{
        grid-template-columns:1fr;
    }

}



/* =========================================
   ISOTOPE GALLERY LAYOUT
========================================= */

.fadfar-portfolio{
    width:100%;
}

/* ITEM */
.single_portfolio_item{
    width:25%;
    float:left;
    padding:12px;
}

/* TABLET */
@media(max-width:992px){

    .single_portfolio_item{
        width:50%;
    }

}

/* MOBILE */
@media(max-width:768px){

    .single_portfolio_item{
        width:100%;
        padding:10px 0;
    }

}


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

.gallery-image-wrapper{
    position:relative;
    display:block;
    overflow:hidden;
    border-radius:24px;
    background:#f1f5f9;
}

/* IMAGE */

.gallery-image-wrapper img{
    width:100%;
    height:320px;
    object-fit:cover;
    display:block;
    transition:0.4s ease;
}

/* MOBILE */

@media(max-width:768px){

    .gallery-image-wrapper img{
        height:260px;
    }

}

/* HOVER */

.single_portfolio_item:hover img{
    transform:scale(1.05);
}

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

.image-skeleton{
    position:absolute;
    inset:0;
    background:#e5e7eb;
    overflow:hidden;
    z-index:2;
}

.image-skeleton::before{
    content:"";
    position:absolute;
    inset:0;
    transform:translateX(-100%);
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.7),
        transparent
    );

    animation:skeletonLoading 1.2s infinite;
}

@keyframes skeletonLoading{

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

}


/* =========================================
   MODERN BLOG SECTION
========================================= */

.modern-blog-section{
    padding:180px 0 80px;
    background:#f8fafc;
}

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

.modern-blog-header{
    text-align:center;
    max-width:800px;
    margin:0 auto 60px;
}

.blog-tag{
    display:inline-block;
    padding:10px 22px;
    border-radius:50px;
    background:rgba(13,110,253,0.08);
    color:#0d6efd;
    font-size:14px;
    font-weight:700;
    font-family:"Inter",sans-serif;
    margin-bottom:20px;
}

.modern-blog-header h2{
    font-size:52px;
    font-weight:800;
    line-height:1.2;
    color:#0f172a;
    margin-bottom:18px;
    font-family:"Inter",sans-serif;
}

.modern-blog-header p{
    font-size:17px;
    line-height:1.9;
    color:#64748b;
    font-family:"Roboto",sans-serif;
}

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

.modern-blog-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:28px;
}

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

.modern-blog-card{
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 15px 45px rgba(0,0,0,0.06);
    transition:0.35s ease;
}

.modern-blog-card:hover{
    transform:translateY(-8px);
}

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

.blog-image-wrap{
    display:block;
    position:relative;
    overflow:hidden;
}

.blog-image-wrap img{
    width:100%;
    height:260px;
    object-fit:cover;
    display:block;
    transition:0.4s ease;
}

.modern-blog-card:hover img{
    transform:scale(1.05);
}

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

.blog-image-skeleton{
    position:absolute;
    inset:0;
    background:#e5e7eb;
    overflow:hidden;
}

.blog-image-skeleton::before{
    content:"";
    position:absolute;
    inset:0;
    transform:translateX(-100%);
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.7),
        transparent
    );

    animation:blogSkeleton 1.2s infinite;
}

@keyframes blogSkeleton{

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

}

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

.modern-blog-content{
    padding:28px;
}

.blog-meta{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    margin-bottom:18px;
}

.blog-meta span{
    font-size:14px;
    color:#64748b;
    font-family:"Inter",sans-serif;
    font-weight:600;
}

.blog-meta i{
    margin-right:6px;
    color:#0d6efd;
}

.modern-blog-content h3{
    margin-bottom:15px;
}

.modern-blog-content h3 a{
    font-size:24px;
    line-height:1.45;
    font-weight:800;
    color:#0f172a;
    text-decoration:none;
    font-family:"Inter",sans-serif;
}

.modern-blog-content p{
    font-size:16px;
    line-height:1.9;
    color:#64748b;
    margin-bottom:22px;
    font-family:"Roboto",sans-serif;
}

.blog-read-more{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 24px;
    border-radius:50px;
    background:linear-gradient(135deg,#0d6efd,#0056d6);
    color:#fff;
    text-decoration:none;
    font-size:14px;
    font-weight:700;
    font-family:"Inter",sans-serif;
}

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

.modern-blog-sidebar{
    position:sticky;
    top:120px;
}

.sidebar-widget{
    background:#fff;
    border-radius:24px;
    padding:28px;
    box-shadow:0 15px 45px rgba(0,0,0,0.05);
}

.sidebar-title{
    margin-bottom:28px;
}

.sidebar-title h3{
    font-size:26px;
    font-weight:800;
    color:#0f172a;
    font-family:"Inter",sans-serif;
}

.sidebar-post{
    display:flex;
    gap:16px;
    margin-bottom:22px;
    text-decoration:none;
}

.sidebar-thumb{
    width:95px;
    min-width:95px;
    height:85px;
    border-radius:16px;
    overflow:hidden;
}

.sidebar-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.sidebar-content h4{
    font-size:15px;
    line-height:1.7;
    color:#0f172a;
    margin-bottom:8px;
    font-weight:700;
    font-family:"Inter",sans-serif;
}

.sidebar-content span{
    font-size:13px;
    color:#64748b;
    font-family:"Roboto",sans-serif;
}

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

#blog-loader{
    margin-top:35px;
}

.blog-loading-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:28px;
}

.blog-loading-card{
    height:380px;
    border-radius:24px;
    background:#e5e7eb;
    position:relative;
    overflow:hidden;
}

.blog-loading-card::before{
    content:"";
    position:absolute;
    inset:0;
    transform:translateX(-100%);
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.7),
        transparent
    );

    animation:blogSkeleton 1.2s infinite;
}

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

@media(max-width:992px){

    .modern-blog-grid{
        grid-template-columns:1fr;
    }

    .modern-blog-sidebar{
        margin-top:50px;
        position:relative;
        top:0;
    }

}

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

@media(max-width:768px){

    .modern-blog-section{
        padding:160px 0 60px;
    }

    .modern-blog-header h2{
        font-size:34px;
    }

    .modern-blog-header p{
        font-size:15px;
    }

    .modern-blog-content{
        padding:22px;
    }

    .modern-blog-content h3 a{
        font-size:21px;
    }

    .blog-image-wrap img{
        height:230px;
    }

    .blog-loading-grid{
        grid-template-columns:1fr;
    }

}