/*==================================================
    RGT PUBLIC VIDYALAYA
    Main Stylesheet
==================================================*/


/*======================================
        GOOGLE FONTS
======================================*/

:root {

    --primary: #2563EB;
    --primary-dark: #1E3A8A;
    --primary-light: #DBEAFE;
    --secondary: #60A5FA;

    --white: #ffffff;
    --light: #F8FAFC;
    --dark: #111827;
    --text: #4B5563;
    --border: #E5E7EB;

    --success: #16A34A;
    --danger: #DC2626;

    --shadow-sm: 0 10px 30px rgba(0, 0, 0, .05);
    --shadow: 0 15px 40px rgba(37, 99, 235, .12);
    --shadow-lg: 0 30px 80px rgba(37, 99, 235, .18);

    --radius: 16px;
    --radius-lg: 24px;

    --transition: .35s ease;

}



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

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

    font-family: 'Inter', sans-serif;
    background: var(--light);
    color: var(--text);

    overflow-x: hidden;

}

h1,
h2,
h3,
h4,
h5,
h6 {

    font-family: 'Poppins', sans-serif;
    color: var(--dark);
    font-weight: 700;

}

a {

    text-decoration: none;
    transition: var(--transition);

}

ul {

    list-style: none;
    margin: 0;
    padding: 0;

}

img {

    width: 100%;
    display: block;

}

section {

    padding: 100px 0;

}



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

::-webkit-scrollbar {

    width: 10px;

}

::-webkit-scrollbar-track {

    background: #eef4ff;

}

::-webkit-scrollbar-thumb {

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

    border-radius: 20px;

}



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

#preloader {

    position: fixed;
    inset: 0;

    background: #fff;

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

    z-index: 999999;

}

.loader {

    width: 60px;
    height: 60px;

    border-radius: 50%;

    border: 5px solid #dbeafe;

    border-top: 5px solid var(--primary);

    animation: spin .8s linear infinite;

}

@keyframes spin {

    100% {

        transform: rotate(360deg);

    }

}



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

.scroll-progress {

    position: fixed;

    top: 0;
    left: 0;

    width: 0;
    height: 4px;

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

    z-index: 99999;

}



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

#backToTop {

    position: fixed;

    right: 30px;
    bottom: 30px;

    width: 50px;
    height: 50px;

    border: none;

    border-radius: 50%;

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

    color: #fff;

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

    font-size: 18px;

    cursor: pointer;

    opacity: 0;
    visibility: hidden;

    transition: .4s;

    box-shadow: var(--shadow);

    z-index: 999;

}

#backToTop.show {

    opacity: 1;
    visibility: visible;

}

#backToTop:hover {

    transform: translateY(-6px);

}


/*==========================================================
    RGT PUBLIC VIDYALAYA
    HEADER + NAVBAR
==========================================================*/


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

.top-header {

    width: 100%;

    background: #2452b8;

    color: #ffffff;

    position: relative;

    z-index: 1040;

}


.top-header .container {

    width: 100%;

}


.top-contact {

    display: flex;

    align-items: center;

    gap: 25px;

}


.top-contact a {

    display: flex;

    align-items: center;

    gap: 7px;

    color: #ffffff;

    text-decoration: none;

    font-size: 13px;

}


.top-contact a:hover {

    color: #ffffff;

}


.top-contact i {

    font-size: 13px;

}


.top-social {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 20px;

    min-height: 42px;

}


.top-social a {

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    text-decoration: none;

    font-size: 18px;

    transition: all 0.25s ease;

}


.top-social a:hover {

    color: #ffffff;

    transform: translateY(-2px);

}


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

.custom-navbar {

    width: 100% !important;

    max-width: 100% !important;

    min-height: 78px;

    margin: 0 !important;

    padding: 10px 0;

    background: #ffffff;

    position: relative;

    z-index: 1030;

    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

}


.custom-navbar .container {

    width: 100%;

    max-width: 1320px;

    margin-left: auto;

    margin-right: auto;

    display: flex;

    align-items: center;

}


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

.custom-navbar .navbar-brand {

    display: flex;

    align-items: center;

    gap: 11px;

    margin: 0;

    padding: 0;

    text-decoration: none;

    flex-shrink: 0;

}


.custom-navbar .navbar-brand img {

    width: 52px;

    height: 52px;

    min-width: 52px;

    max-width: 52px;

    object-fit: cover;

    border-radius: 50% !important;

}


.custom-navbar .brand-content {

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.custom-navbar .brand-content h5 {

    margin: 0;

    padding: 0;

    color: #172033;

    font-size: 17px;

    font-weight: 800;

    line-height: 1.1;

    white-space: nowrap;

}


.custom-navbar .brand-content span {

    display: block;

    margin-top: 4px;

    color: #666666;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

    line-height: 1;

    white-space: nowrap;

}


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

.custom-navbar .navbar-collapse {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    flex-grow: 1;

}


.custom-navbar .navbar-nav {

    display: flex;

    align-items: center;

    gap: 3px;

}


.custom-navbar .nav-item {

    position: relative;

}


.custom-navbar .nav-link {

    display: flex;

    align-items: center;

    padding: 11px 13px !important;

    color: #172033;

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;

    transition: all 0.25s ease;

}


.custom-navbar .nav-link:hover {

    color: #2452b8;

}


.custom-navbar .nav-link.active {

    color: #2452b8;

}


/*==========================================================
    DESKTOP DROPDOWN
==========================================================*/

.custom-navbar .dropdown-menu {

    min-width: 190px;

    margin-top: 8px;

    padding: 8px;

    border: none;

    border-radius: 8px;

    background: #ffffff;

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

}


.custom-navbar .dropdown-item {

    display: flex;

    align-items: center;

    gap: 7px;

    padding: 10px 12px;

    color: #333333;

    font-size: 14px;

    font-weight: 500;

    border-radius: 6px;

    transition: all 0.2s ease;

}


.custom-navbar .dropdown-item:hover {

    background: #f3f6fc;

    color: #2452b8;

}


.custom-navbar .dropdown-item i {

    width: 18px;

    font-size: 15px;

}


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

.admission-item {

    margin-left: 10px;

}


.admission-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 11px 18px;

    border: none;

    border-radius: 7px;

    background: #2452b8;

    color: #ffffff !important;

    font-size: 13px;

    font-weight: 700;

    line-height: 1.2;

    text-decoration: none;

    transition: all 0.25s ease;

}


.admission-btn:hover {

    background: #1b4298;

    color: #ffffff !important;

    transform: translateY(-1px);

}


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

.custom-navbar .navbar-toggler {

    display: none;

    align-items: center;

    justify-content: center;

    width: 44px;

    height: 44px;

    min-width: 44px;

    margin: 0;

    padding: 0;

    border: none !important;

    background: transparent !important;

    color: #172033;

    font-size: 32px;

    line-height: 1;

    box-shadow: none !important;

    outline: none !important;

}


.custom-navbar .navbar-toggler i {

    display: block;

    line-height: 1;

}


.custom-navbar .navbar-toggler:focus {

    border: none !important;

    outline: none !important;

    box-shadow: none !important;

}


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

.mobile-menu {

    width: 320px !important;

    max-width: 88vw !important;

    height: 100vh !important;

    background: #ffffff !important;

    border: none !important;

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

    z-index: 1060 !important;

}


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

.mobile-menu .offcanvas-header {

    min-height: 76px;

    padding: 15px 18px;

    border-bottom: 1px solid #eeeeee;

}


.mobile-menu-brand {

    display: flex;

    align-items: center;

    gap: 10px;

    margin: 0;

    padding: 0;

    color: inherit;

    text-decoration: none;

}


.mobile-menu-brand img {

    width: 45px;

    height: 45px;

    min-width: 45px;

    object-fit: cover;

    border-radius: 50%;

}


.mobile-menu-brand h5 {

    margin: 0;

    color: #172033;

    font-size: 15px;

    font-weight: 800;

    line-height: 1.2;

}


.mobile-menu-brand span {

    display: block;

    margin-top: 3px;

    color: #777777;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;

    line-height: 1;

}


.mobile-menu .btn-close {

    margin-left: auto;

    padding: 8px;

    box-shadow: none !important;

    outline: none !important;

}


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

.mobile-menu .offcanvas-body {

    padding: 20px 18px;

    overflow-y: auto;

}


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

.mobile-nav {

    width: 100%;

    margin: 0;

    padding: 0;

    list-style: none;

}


.mobile-nav>li {

    width: 100%;

    margin: 0 0 3px 0;

}


.mobile-nav>li>a {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    min-height: 48px;

    padding: 11px 12px;

    color: #172033;

    font-size: 15px;

    font-weight: 600;

    text-decoration: none;

    border-radius: 8px;

    transition: all 0.2s ease;

}


.mobile-nav>li>a:hover {

    background: #f5f7fb;

    color: #2452b8;

}


/*==========================================================
    MOBILE ICON + TEXT
==========================================================*/

.mobile-link {

    display: flex;

    align-items: center;

    gap: 13px;

}


.mobile-link i {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 22px;

    min-width: 22px;

    font-size: 18px;

}


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

.mobile-dropdown-toggle {

    cursor: pointer;

}


.mobile-arrow {

    font-size: 12px;

    transition: transform 0.25s ease;

}


.mobile-dropdown-toggle[aria-expanded="true"] {

    color: #2452b8;

}


.mobile-dropdown-toggle[aria-expanded="true"] .mobile-arrow {

    transform: rotate(180deg);

}


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

.mobile-submenu {

    list-style: none;

    margin: 2px 0 7px 22px;

    padding: 4px 0 4px 18px;

    border-left: 2px solid #eeeeee;

}


.mobile-submenu li {

    margin: 0;

    padding: 0;

}


.mobile-submenu a {

    display: block;

    padding: 9px 12px;

    color: #666666;

    font-size: 14px;

    font-weight: 500;

    text-decoration: none;

    border-radius: 6px;

    transition: all 0.2s ease;

}


.mobile-submenu a:hover {

    background: #f5f7fb;

    color: #2452b8;

}


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

.mobile-admission {

    width: 100%;

    margin-top: 25px;

}


.mobile-admission .admission-btn {

    display: flex;

    width: 100%;

    min-height: 48px;

    padding: 12px 15px;

}


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

.mobile-contact {

    margin-top: 25px;

    padding-top: 18px;

    border-top: 1px solid #eeeeee;

}


.mobile-contact a {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 12px;

    color: #666666;

    font-size: 12px;

    font-weight: 500;

    text-decoration: none;

}


.mobile-contact a:last-child {

    margin-bottom: 0;

}


.mobile-contact i {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 18px;

    min-width: 18px;

    color: #2452b8;

}


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

.mobile-social {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-top: 22px;

    padding-top: 18px;

    border-top: 1px solid #eeeeee;

}


.mobile-social a {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 36px;

    height: 36px;

    color: #2452b8;

    font-size: 17px;

    text-decoration: none;

    border-radius: 50%;

    background: #f3f6fc;

    transition: all 0.2s ease;

}


.mobile-social a:hover {

    background: #2452b8;

    color: #ffffff;

}


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

@media (max-width: 991.98px) {


    /*------------------------------------------------------
        HIDE TOP HEADER ON MOBILE
    ------------------------------------------------------*/

    .top-header {

        display: none !important;

    }


    /*------------------------------------------------------
        MAIN NAVBAR
    ------------------------------------------------------*/

    .custom-navbar {

        position: fixed !important;

        top: 0 !important;

        left: 0 !important;

        right: 0 !important;

        width: 100% !important;

        max-width: 100% !important;

        min-height: 68px;

        margin: 0 !important;

        padding: 8px 0 !important;

        background: #ffffff !important;

        z-index: 1050 !important;

        transform: none !important;

        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10);

    }


    /*------------------------------------------------------
        CONTAINER
    ------------------------------------------------------*/

    .custom-navbar>.container {

        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        padding-left: 14px !important;

        padding-right: 14px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: space-between !important;

        flex-wrap: nowrap !important;

    }


    /*------------------------------------------------------
        MOBILE BRAND
    ------------------------------------------------------*/

    .custom-navbar .navbar-brand {

        display: flex !important;

        align-items: center !important;

        gap: 9px;

        width: auto !important;

        max-width: calc(100% - 55px);

        margin: 0 !important;

        padding: 0 !important;

        flex-shrink: 1;

        transform: none !important;

    }


    .custom-navbar .navbar-brand img {

        width: 44px !important;

        height: 44px !important;

        min-width: 44px !important;

        max-width: 44px !important;

    }


    .custom-navbar .brand-content {

        min-width: 0;

        overflow: hidden;

    }


    .custom-navbar .brand-content h5 {

        font-size: 14px !important;

        white-space: nowrap;

    }


    .custom-navbar .brand-content span {

        font-size: 9px !important;

        letter-spacing: 1.4px;

        white-space: nowrap;

    }


    /*------------------------------------------------------
        HAMBURGER
    ------------------------------------------------------*/

    .custom-navbar .navbar-toggler {

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        width: 44px !important;

        height: 44px !important;

        min-width: 44px !important;

        max-width: 44px !important;

        margin: 0 !important;

        padding: 0 !important;

        flex-shrink: 0;

        color: #172033 !important;

        background: transparent !important;

        border: none !important;

        box-shadow: none !important;

        outline: none !important;

    }


    .custom-navbar .navbar-toggler i {

        font-size: 30px;

        line-height: 1;

    }


    /*------------------------------------------------------
        HIDE DESKTOP MENU
    ------------------------------------------------------*/

    .custom-navbar .navbar-collapse {

        display: none !important;

    }

}


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

@media (max-width: 575.98px) {


    .custom-navbar {

        min-height: 64px;

        padding: 7px 0 !important;

    }


    .custom-navbar>.container {

        padding-left: 12px !important;

        padding-right: 12px !important;

    }


    .custom-navbar .navbar-brand {

        gap: 8px;

        max-width: calc(100% - 50px);

    }


    .custom-navbar .navbar-brand img {

        width: 40px !important;

        height: 40px !important;

        min-width: 40px !important;

        max-width: 40px !important;

    }


    .custom-navbar .brand-content h5 {

        font-size: 13px !important;

    }


    .custom-navbar .brand-content span {

        font-size: 8px !important;

        letter-spacing: 1.2px;

    }


    .custom-navbar .navbar-toggler {

        width: 40px !important;

        height: 40px !important;

        min-width: 40px !important;

        max-width: 40px !important;

    }


    .custom-navbar .navbar-toggler i {

        font-size: 29px;

    }


    .mobile-menu {

        width: 300px !important;

        max-width: 88vw !important;

    }


}


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

@media (max-width: 380px) {


    .custom-navbar>.container {

        padding-left: 10px !important;

        padding-right: 10px !important;

    }


    .custom-navbar .navbar-brand img {

        width: 38px !important;

        height: 38px !important;

        min-width: 38px !important;

        max-width: 38px !important;

    }


    .custom-navbar .brand-content h5 {

        font-size: 12px !important;

    }


    .custom-navbar .brand-content span {

        font-size: 7px !important;

    }


    .custom-navbar .navbar-toggler {

        width: 38px !important;

        height: 38px !important;

        min-width: 38px !important;

        max-width: 38px !important;

    }

}

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

.hero-section {

    position: relative;

    min-height: 100vh;

    display: flex;

    align-items: center;

    overflow: hidden;

    background: linear-gradient(135deg,
            rgba(30, 58, 138, .92),
            rgba(37, 99, 235, .88));

}



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

.hero-bg {

    position: absolute;

    inset: 0;

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

    z-index: 1;

    opacity: .18;

    transform: scale(1.05);

}



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

.hero-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(120deg,
            rgba(17, 24, 39, .55),
            rgba(37, 99, 235, .20));

    z-index: 2;

}



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

.hero-content {

    position: relative;

    z-index: 5;

    color: #fff;

}

.hero-tag {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 10px 20px;

    border-radius: 50px;

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

    backdrop-filter: blur(15px);

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

    margin-bottom: 25px;

    font-weight: 600;

}

.hero-tag i {

    color: #FFD54F;

}

.hero-content h1 {

    color: #fff;

    font-size: 64px;

    line-height: 1.15;

    font-weight: 800;

    margin-bottom: 25px;

}

.hero-content h1 span {

    color: #93C5FD;

}

.hero-content p {

    max-width: 620px;

    font-size: 18px;

    line-height: 1.9;

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

    margin-bottom: 40px;

}



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

.hero-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 20px;

}

.btn-primary-custom {

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

    color: #fff;

    padding: 15px 35px;

    border-radius: 50px;

    font-weight: 600;

    box-shadow: var(--shadow);

}

.btn-primary-custom:hover {

    color: #fff;

    transform: translateY(-5px);

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

}

.btn-outline-custom {

    padding: 15px 35px;

    border-radius: 50px;

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

    color: #fff;

    backdrop-filter: blur(12px);

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

}

.btn-outline-custom:hover {

    background: #fff;

    color: var(--primary-dark);

}



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

.hero-image {

    position: relative;

    z-index: 5;

}

.hero-image img {

    max-width: 100%;

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

    filter: drop-shadow(0 35px 60px rgba(0, 0, 0, .25));

}



/*======================================
        FLOATING SHAPES
======================================*/

.shape {

    position: absolute;

    border-radius: 50%;

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

    backdrop-filter: blur(15px);

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

    z-index: 3;

}

.shape-1 {

    width: 220px;

    height: 220px;

    top: 10%;

    right: 5%;

}

.shape-2 {

    width: 120px;

    height: 120px;

    bottom: 15%;

    left: 8%;

    animation-delay: 2s;

}

.shape-3 {

    width: 80px;

    height: 80px;

    top: 35%;

    left: 45%;

    animation-delay: 4s;

}



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

.hero-wave {

    position: absolute;

    left: 0;

    right: 0;

    bottom: -2px;

    z-index: 4;

}

.hero-wave svg {

    display: block;

    width: 100%;

}



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

.hero-stats {

    margin-top: 70px;

    display: flex;

    flex-wrap: wrap;

    gap: 25px;

}

.hero-stat {

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

    backdrop-filter: blur(16px);

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

    border-radius: 20px;

    padding: 22px 28px;

    min-width: 170px;

}

.hero-stat h3 {

    color: #fff;

    margin-bottom: 8px;

    font-size: 34px;

}

.hero-stat p {

    margin: 0;

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

    font-size: 15px;

}



/*======================================
            ANIMATIONS
======================================*/

@keyframes floating {

    0% {

        transform: translateY(0px);

    }

    50% {

        transform: translateY(-20px);

    }

    100% {

        transform: translateY(0px);

    }

}



@keyframes floatShape {

    0% {

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

    }

    50% {

        transform: translateY(-25px) rotate(180deg);

    }

    100% {

        transform: translateY(0px) rotate(360deg);

    }

}

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

.section-title {

    margin-bottom: 70px;

}

.section-subtitle {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 10px 22px;

    background: var(--primary-light);

    color: var(--primary-dark);

    border-radius: 50px;

    font-size: 14px;

    font-weight: 600;

    margin-bottom: 20px;

}

.section-subtitle i {

    color: var(--primary);

}

.section-title h2 {

    font-size: 46px;

    font-weight: 800;

    line-height: 1.2;

    margin-bottom: 20px;

}

.section-title h2 span {

    color: var(--primary);

}

.section-title p {

    max-width: 700px;

    margin: auto;

    color: var(--text);

    line-height: 1.9;

    font-size: 17px;

}



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

.about-section {

    position: relative;

    background: #fff;

}

.about-image {

    position: relative;

}

.about-image img {

    border-radius: 24px;

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

}

.experience-card {

    position: absolute;

    right: -10px;

    bottom: 35px;

    background: #fff;

    border-radius: 20px;

    padding: 25px;

    box-shadow: var(--shadow);

    text-align: center;

    min-width: 200px;

}

.experience-card h2 {

    color: var(--primary);

    font-size: 42px;

    margin-bottom: 5px;

}

.experience-card span {

    font-size: 15px;

    color: var(--text);

}

.about-content {

    padding-left: 40px;

}

.about-content h3 {

    font-size: 40px;

    margin-bottom: 25px;

}

.about-content h3 span {

    color: var(--primary);

}

.about-content p {

    line-height: 1.9;

    margin-bottom: 20px;

    font-size: 16px;

}

.about-list {

    margin-top: 30px;

}

.about-list li {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    margin-bottom: 18px;

    font-size: 16px;

}

.about-list i {

    width: 45px;

    height: 45px;

    background: var(--primary-light);

    color: var(--primary);

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

    font-size: 20px;

    flex-shrink: 0;

}

.about-btn {

    margin-top: 35px;

}



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

.principal-section {

    background: #EFF6FF;

    position: relative;

    overflow: hidden;

}

.principal-card {

    background: #fff;

    border-radius: 24px;

    overflow: hidden;

    box-shadow: var(--shadow);

}

.principal-image {

    position: relative;

}

.principal-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.principal-badge {

    position: absolute;

    left: 25px;

    bottom: 25px;

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

    color: #fff;

    padding: 12px 22px;

    border-radius: 50px;

    font-size: 14px;

    font-weight: 600;

}

.principal-content {

    padding: 60px;

}

.principal-content h2 {

    font-size: 42px;

    margin-bottom: 15px;

}

.principal-content h5 {

    color: var(--primary);

    font-size: 18px;

    margin-bottom: 25px;

}

.principal-content p {

    line-height: 2;

    margin-bottom: 20px;

}

.principal-sign {

    margin-top: 35px;

}

.principal-sign h4 {

    margin-bottom: 5px;

}

.principal-sign span {

    color: var(--primary);

    font-weight: 600;

}



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

.feature-box {

    background: #fff;

    border-radius: 20px;

    padding: 30px;

    text-align: center;

    transition: .4s;

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

    height: 100%;

}

.feature-box:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow);

}

.feature-icon {

    width: 80px;

    height: 80px;

    border-radius: 50%;

    margin: auto;

    margin-bottom: 25px;

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

    display: flex;

    justify-content: center;

    align-items: center;

    color: #fff;

    font-size: 34px;

}

.feature-box h4 {

    margin-bottom: 15px;

}

.feature-box p {

    line-height: 1.8;

}



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

.theme-btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 15px 32px;

    border-radius: 50px;

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

    color: #fff;

    font-weight: 600;

    transition: .35s;

}

.theme-btn:hover {

    color: #fff;

    transform: translateY(-5px);

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

}

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

.why-section {

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

    position: relative;

    overflow: hidden;

}

.why-card {

    background: #fff;

    border-radius: 24px;

    padding: 35px;

    height: 100%;

    position: relative;

    overflow: hidden;

    transition: .4s;

    border: 1px solid var(--border);

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

}

.why-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 5px;

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

}

.why-card:hover {

    transform: translateY(-12px);

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

}

.why-icon {

    width: 85px;

    height: 85px;

    border-radius: 22px;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 34px;

    color: #fff;

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

    margin-bottom: 25px;

}

.why-card h4 {

    margin-bottom: 18px;

    font-size: 24px;

}

.why-card p {

    line-height: 1.9;

    color: var(--text);

}



/*======================================
        FACILITIES
======================================*/

.facilities-section {

    background: #EFF6FF;

}

.facility-card {

    background: #fff;

    border-radius: 24px;

    overflow: hidden;

    transition: .4s;

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

    height: 100%;

}

.facility-card:hover {

    transform: translateY(-10px);

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

}

.facility-image {

    overflow: hidden;

}

.facility-image img {

    height: 240px;

    object-fit: cover;

    transition: .6s;

}

.facility-card:hover .facility-image img {

    transform: scale(1.08);

}

.facility-content {

    padding: 28px;

}

.facility-content h4 {

    margin-bottom: 15px;

}

.facility-content p {

    line-height: 1.8;

    margin-bottom: 20px;

}

.facility-link {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: var(--primary);

    font-weight: 600;

}

.facility-link:hover {

    gap: 16px;

}



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

.academics-section {

    background: #fff;

}

.academic-card {

    border-radius: 22px;

    background: #fff;

    border: 1px solid var(--border);

    padding: 35px;

    transition: .4s;

    height: 100%;

    position: relative;

    overflow: hidden;

}

.academic-card::after {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(180deg,
            transparent,
            rgba(37, 99, 235, .04));

    opacity: 0;

    transition: .4s;

}

.academic-card:hover::after {

    opacity: 1;

}

.academic-card:hover {

    transform: translateY(-12px);

    box-shadow: var(--shadow);

}

.academic-icon {

    width: 75px;

    height: 75px;

    border-radius: 18px;

    background: var(--primary-light);

    display: flex;

    justify-content: center;

    align-items: center;

    color: var(--primary);

    font-size: 34px;

    margin-bottom: 25px;

}

.academic-card h4 {

    margin-bottom: 18px;

}

.academic-card p {

    line-height: 1.8;

    margin-bottom: 20px;

}

.academic-card ul {

    margin-top: 20px;

}

.academic-card ul li {

    margin-bottom: 12px;

    display: flex;

    align-items: center;

    gap: 12px;

    color: var(--text);

}

.academic-card ul i {

    color: var(--success);

}



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

.statistics-section {

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

    position: relative;

    color: #fff;

    overflow: hidden;

}

.statistics-section::before {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

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

    border-radius: 50%;

    top: -180px;

    right: -120px;

}

.statistics-section::after {

    content: "";

    position: absolute;

    width: 280px;

    height: 280px;

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

    border-radius: 50%;

    bottom: -120px;

    left: -100px;

}

.counter-box {

    position: relative;

    z-index: 2;

    text-align: center;

    padding: 35px 20px;

}

.counter-icon {

    width: 90px;

    height: 90px;

    border-radius: 50%;

    margin: auto;

    margin-bottom: 22px;

    display: flex;

    justify-content: center;

    align-items: center;

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

    backdrop-filter: blur(12px);

    font-size: 36px;

}

.counter-box h2 {

    color: #fff;

    font-size: 52px;

    margin-bottom: 10px;

}

.counter-box span {

    display: block;

    font-size: 17px;

    letter-spacing: .5px;

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

}



/*======================================
        FLOATING EFFECT
======================================*/

.floating-card {

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

}

@keyframes floatingCard {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-10px);

    }

    100% {

        transform: translateY(0);

    }

}



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

.section-circle {

    position: absolute;

    border-radius: 50%;

    background: rgba(37, 99, 235, .05);

    z-index: 0;

}

.circle-left {

    width: 260px;

    height: 260px;

    left: -130px;

    top: 50px;

}

.circle-right {

    width: 320px;

    height: 320px;

    right: -160px;

    bottom: 50px;

}

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

.admission-cta {

    padding: 100px 0;

    background: #F8FAFC;

}

.cta-wrapper {

    position: relative;

    overflow: hidden;

    border-radius: 30px;

    padding: 70px;

    background: linear-gradient(135deg,
            #2563EB,
            #1E3A8A);

    color: #fff;

    box-shadow: 0 30px 80px rgba(37, 99, 235, .25);

}

.cta-wrapper h2 {

    color: #fff;

    font-size: 48px;

    margin: 20px 0;

    line-height: 1.2;

}

.cta-wrapper h2 span {

    color: #93C5FD;

}

.cta-wrapper p {

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

    line-height: 1.9;

    margin-bottom: 30px;

}

.cta-badge {

    display: inline-flex;

    align-items: center;

    gap: 10px;

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

    padding: 10px 22px;

    border-radius: 50px;

    backdrop-filter: blur(10px);

}

.cta-features {

    display: flex;

    flex-wrap: wrap;

    gap: 20px;

    margin-top: 25px;

}

.cta-features span {

    color: #fff;

    font-weight: 500;

}

.cta-features i {

    color: #A7F3D0;

    margin-right: 6px;

}

.cta-buttons {

    display: flex;

    flex-direction: column;

    align-items: flex-end;

}

.cta-shape {

    position: absolute;

    border-radius: 50%;

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

}

.cta-shape.shape-1 {

    width: 220px;

    height: 220px;

    top: -60px;

    right: -60px;

}

.cta-shape.shape-2 {

    width: 140px;

    height: 140px;

    bottom: -40px;

    left: -40px;

}

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

.footer {

    position: relative;

    background: #0F172A;

    color: #CBD5E1;

    padding: 90px 0 30px;

    overflow: hidden;

}

.footer::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: linear-gradient(90deg,
            #2563EB,
            #60A5FA,
            #1E3A8A);

}

.footer-logo {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 25px;

}

.footer-logo img {

    width: 65px;

}

.footer-logo h4 {

    color: #fff;

    margin: 0;

    font-size: 24px;

}

.footer p {

    line-height: 1.9;

    color: #94A3B8;

}

.footer h5 {

    color: #fff;

    margin-bottom: 25px;

    position: relative;

}

.footer h5::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -10px;

    width: 45px;
    height: 3px;

    border-radius: 20px;

    background: #2563EB;

}

.footer-links {

    padding: 0;

    margin: 0;

}

.footer-links li {

    margin-bottom: 14px;

}

.footer-links a {

    color: #CBD5E1;

    transition: .35s;

}

.footer-links a:hover {

    color: #60A5FA;

    padding-left: 8px;

}

.footer-contact {

    padding: 0;

    margin: 0;

}

.footer-contact li {

    display: flex;

    align-items: flex-start;

    gap: 14px;

    margin-bottom: 18px;

    line-height: 1.8;

}

.footer-contact i {

    color: #60A5FA;

    font-size: 18px;

    margin-top: 3px;

}

.footer-social {

    display: flex;

    gap: 15px;

    margin-top: 30px;

}

.footer-social a {

    width: 45px;

    height: 45px;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

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

    color: #fff;

    transition: .35s;

}

.footer-social a:hover {

    background: #2563EB;

    transform: translateY(-5px);

}

.footer hr {

    border-color: rgba(255, 255, 255, .08);

    margin: 50px 0 30px;

}

.footer-bottom {

    font-size: 15px;

}

.footer-bottom p {

    margin: 0;

    color: #94A3B8;

}

.footer-bottom strong {

    color: #60A5FA;

}

.footer-wave {

    position: absolute;

    top: -2px;

    left: 0;

    width: 100%;

}

.footer-wave svg {

    display: block;

}

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

@media(max-width:991px) {

    .footer {

        text-align: center;

    }

    .footer-logo {

        justify-content: center;

    }

    .footer-social {

        justify-content: center;

    }

    .footer-contact li {

        justify-content: center;

    }

    .footer h5::after {

        left: 50%;

        transform: translateX(-50%);

    }

    .footer-bottom {

        text-align: center;

    }

    .footer-bottom .text-md-end {

        margin-top: 15px;

    }

}

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

.admission-process {

    padding: 110px 0;

    background: #F8FAFC;

}

.process-card {

    position: relative;

    background: #fff;

    padding: 40px 30px;

    border-radius: 25px;

    text-align: center;

    transition: .35s;

    box-shadow: var(--shadow);

    height: 100%;

}

.process-card:hover {

    transform: translateY(-12px);

}

.process-number {

    position: absolute;

    top: 20px;

    right: 20px;

    width: 45px;

    height: 45px;

    border-radius: 50%;

    background: var(--primary);

    color: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    font-weight: 700;

}

.process-card i {

    font-size: 55px;

    color: var(--primary);

    margin-bottom: 25px;

}



/*=========================================
        ELIGIBILITY
==========================================*/

.eligibility-section {

    padding: 110px 0;

    background: #fff;

}

.eligibility-list {

    margin-top: 30px;

    padding: 0;

    list-style: none;

}

.eligibility-list li {

    margin-bottom: 20px;

    display: flex;

    align-items: center;

    gap: 15px;

}

.eligibility-list i {

    color: var(--primary);

    font-size: 22px;

}



/*=========================================
        DOCUMENTS
==========================================*/

.documents-section {

    padding: 110px 0;

    background: #EFF6FF;

}

.document-card {

    background: #fff;

    padding: 40px;

    text-align: center;

    border-radius: 25px;

    transition: .35s;

    box-shadow: var(--shadow);

    height: 100%;

}

.document-card:hover {

    transform: translateY(-10px);

}

.document-card i {

    font-size: 48px;

    color: var(--primary);

    margin-bottom: 20px;

}

/*=========================================
        FEE SECTION
==========================================*/

.fee-section {

    padding: 110px 0;

    background: #fff;

}

.fee-card {

    position: relative;

    background: #F8FAFC;

    padding: 45px;

    border-radius: 25px;

    text-align: center;

    transition: .35s;

    box-shadow: var(--shadow);

    height: 100%;

}

.fee-card:hover {

    transform: translateY(-10px);

}

.fee-card.active {

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

    color: #fff;

}

.fee-card.active h4,
.fee-card.active p {

    color: #fff;

}

.popular-badge {

    position: absolute;

    top: 20px;

    right: 20px;

    background: #fff;

    color: var(--primary);

    padding: 8px 14px;

    border-radius: 30px;

    font-size: 13px;

    font-weight: 600;

}

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

.faq-section {

    padding: 110px 0;

    background: #EFF6FF;

}

.accordion-item {

    border: none;

    margin-bottom: 20px;

    border-radius: 18px !important;

    overflow: hidden;

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

}

.accordion-button {

    padding: 22px 25px;

    font-weight: 600;

}

.accordion-button:not(.collapsed) {

    background: var(--primary);

    color: #fff;

}

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

.admission-final-cta {

    padding: 110px 0;

    background: #fff;

}

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

@media(max-width:991px) {

    .admission-badge {

        position: static;

        margin-top: 20px;

        display: inline-block;

    }

    .cta-box {

        padding: 50px 30px;

    }

}

@media(max-width:768px) {

    .fee-card {

        margin-bottom: 20px;

    }

}

/*=========================================
        ADMISSION INTRO
==========================================*/

.admission-intro {

    padding: 110px 0;

    background: #fff;

}

.admission-image {

    position: relative;

}

.admission-image img {

    width: 100%;

    border-radius: 30px;

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

}

.admission-badge {

    position: absolute;

    right: -20px;

    bottom: 30px;

    background: linear-gradient(135deg,

            var(--primary),

            var(--primary-dark));

    color: #fff;

    padding: 30px;

    border-radius: 20px;

    text-align: center;

}

.why-admission {

    padding: 110px 0;

    background: #EFF6FF;

}

.why-card {

    background: #fff;

    padding: 45px;

    text-align: center;

    border-radius: 25px;

    transition: .35s;

    height: 100%;

    box-shadow: var(--shadow);

}

.why-card:hover {

    transform: translateY(-12px);

}

.why-card i {

    font-size: 55px;

    color: var(--primary);

    margin-bottom: 25px;

}

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

.gallery-grid-section {

    padding: 110px 0;

    background: #fff;

}

.gallery-item {

    position: relative;

    overflow: hidden;

    border-radius: 25px;

    cursor: pointer;

    box-shadow: var(--shadow);

}

.gallery-item img {

    width: 100%;

    height: 320px;

    object-fit: cover;

    transition: .5s;

}

.gallery-item:hover img {

    transform: scale(1.1);

}

.gallery-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 30px;

    background: linear-gradient(to top,

            rgba(15, 23, 42, .92),

            rgba(15, 23, 42, .10));

    opacity: 0;

    transition: .35s;

}

.gallery-item:hover .gallery-overlay {

    opacity: 1;

}

.gallery-category {

    display: inline-block;

    width: max-content;

    padding: 6px 16px;

    border-radius: 30px;

    background: #2563EB;

    color: #fff;

    font-size: 13px;

    margin-bottom: 15px;

}

.gallery-overlay h5 {

    color: #fff;

    margin-bottom: 20px;

}

.gallery-view {

    width: 55px;

    height: 55px;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    background: #fff;

    color: var(--primary);

    font-size: 22px;

    transition: .3s;

}

.gallery-view:hover {

    background: var(--primary);

    color: #fff;

}

/*=========================================
        LOAD MORE
==========================================*/

.gallery-loadmore {

    padding: 40px 0 90px;

    background: #fff;

}

.gallery-loadmore .theme-btn {

    min-width: 230px;

}



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

.gallery-cta {

    padding: 110px 0;

    background: #EFF6FF;

}

.gallery-cta-box {

    background: linear-gradient(135deg,

            var(--primary),

            var(--primary-dark));

    border-radius: 30px;

    padding: 70px;

    color: #fff;

    overflow: hidden;

    position: relative;

}

.gallery-cta-box::before {

    content: "";

    position: absolute;

    width: 280px;

    height: 280px;

    border-radius: 50%;

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

    top: -80px;

    right: -80px;

}

.gallery-cta-box span {

    display: inline-block;

    padding: 10px 22px;

    border-radius: 30px;

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

    margin-bottom: 20px;

    backdrop-filter: blur(8px);

}

.gallery-cta-box h2 {

    color: #fff;

    font-size: 46px;

    margin-bottom: 20px;

}

.gallery-cta-box p {

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

    max-width: 700px;

    line-height: 1.9;

}



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

@media(max-width:991px) {

    .gallery-badge {

        position: static;

        margin-top: 20px;

        display: inline-block;

    }

    .gallery-cta-box {

        padding: 45px 30px;

        text-align: center;

    }

    .gallery-cta-box h2 {

        font-size: 34px;

    }

    .gallery-cta-box .text-lg-end {

        text-align: center !important;

        margin-top: 30px;

    }

}

@media(max-width:768px) {

    .gallery-item img {

        height: 260px;

    }

    .filter-buttons {

        gap: 10px;

    }

    .filter-buttons button {

        padding: 10px 18px;

        font-size: 14px;

    }

}

/*=========================================
        FEATURED VIDEO
==========================================*/

.featured-video-section {

    padding: 110px 0;

    background: #fff;

}

.featured-video {

    position: relative;

    overflow: hidden;

    border-radius: 30px;

}

.featured-video img {

    width: 100%;

}

.play-btn {

    position: absolute;

    top: 50%;

    left: 50%;

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

    width: 90px;

    height: 90px;

    background: #fff;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 45px;

    color: var(--primary);

    transition: .35s;

}

.play-btn:hover {

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

}

.video-filter {

    padding: 70px 0;

    background: #F8FAFC;

}

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

.video-grid-section {

    padding: 110px 0;

    background: #fff;

}

.video-card {

    background: #fff;

    border-radius: 25px;

    overflow: hidden;

    box-shadow: var(--shadow);

    transition: .35s;

    height: 100%;

}

.video-card:hover {

    transform: translateY(-10px);

}

.video-thumbnail {

    position: relative;

    overflow: hidden;

}

.video-thumbnail img {

    width: 100%;

    height: 260px;

    object-fit: cover;

    transition: .5s;

}

.video-card:hover img {

    transform: scale(1.08);

}

.video-duration {

    position: absolute;

    top: 15px;

    right: 15px;

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

    color: #fff;

    padding: 6px 12px;

    border-radius: 30px;

    font-size: 13px;

}

.video-play {

    position: absolute;

    top: 50%;

    left: 50%;

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

    width: 70px;

    height: 70px;

    border-radius: 50%;

    background: #fff;

    color: var(--primary);

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 34px;

    opacity: 0;

    transition: .35s;

}

.video-card:hover .video-play {

    opacity: 1;

}

.video-content {

    padding: 25px;

}

.video-content span {

    color: var(--primary);

    font-size: 14px;

    font-weight: 600;

}

.video-content h5 {

    margin-top: 10px;

    line-height: 1.5;

}

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

.youtube-section {

    padding: 110px 0;

    background: #EFF6FF;

}

.youtube-box {

    background: linear-gradient(135deg,

            #2563EB,

            #1E3A8A);

    border-radius: 30px;

    padding: 70px;

    color: #fff;

    position: relative;

    overflow: hidden;

}

.youtube-box::before {

    content: "";

    position: absolute;

    width: 280px;

    height: 280px;

    border-radius: 50%;

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

    top: -90px;

    right: -90px;

}

.youtube-box span {

    display: inline-block;

    padding: 10px 20px;

    border-radius: 30px;

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

    margin-bottom: 20px;

}

.youtube-box h2 {

    color: #fff;

    font-size: 48px;

    margin-bottom: 20px;

}

.youtube-box p {

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

    line-height: 1.9;

    max-width: 650px;

}

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

@media(max-width:991px) {

    .youtube-box {

        padding: 45px 30px;

        text-align: center;

    }

    .youtube-box h2 {

        font-size: 34px;

    }

    .text-lg-end {

        text-align: center !important;

        margin-top: 30px;

    }

}

@media(max-width:768px) {

    .video-thumbnail img {

        height: 220px;

    }

    .play-btn {

        width: 70px;

        height: 70px;

        font-size: 35px;

    }

    .video-play {

        width: 60px;

        height: 60px;

        font-size: 30px;

    }

}

/*=========================================
        UPCOMING EVENT
==========================================*/

.upcoming-event {

    padding: 110px 0;

    background: #fff;

}

.event-highlight {

    background: #F8FAFC;

    padding: 50px;

    border-radius: 30px;

    box-shadow: var(--shadow);

}

.event-badge {

    display: inline-block;

    padding: 10px 22px;

    border-radius: 30px;

    background: var(--primary);

    color: #fff;

    margin-bottom: 20px;

    font-weight: 600;

}

.event-info {

    list-style: none;

    padding: 0;

    margin: 30px 0;

}

.event-info li {

    margin-bottom: 15px;

    display: flex;

    align-items: center;

    gap: 12px;

}

.event-info i {

    color: var(--primary);

}

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

.latest-events {

    padding: 110px 0;

    background: #F8FAFC;

}

.event-card {

    background: #fff;

    border-radius: 20px;

    overflow: hidden;

    transition: .35s;

    box-shadow: var(--shadow);

    height: 100%;

}

.event-card:hover {

    transform: translateY(-10px);

}

.event-card img {

    width: 100%;

    height: 240px;

    object-fit: cover;

}

.event-content {

    padding: 25px;

}

.event-content span {

    color: var(--primary);

    font-size: 14px;

    font-weight: 600;

}

.event-content h5 {

    margin: 15px 0;

}

.event-content a {

    color: var(--primary);

    font-weight: 600;

}



/*=========================================
        TIMELINE
==========================================*/

.past-events {

    padding: 110px 0;

    background: #fff;

}

.timeline {

    max-width: 700px;

    margin: auto;

}

.timeline-item {

    padding: 25px;

    margin-bottom: 20px;

    border-left: 5px solid var(--primary);

    background: #F8FAFC;

    border-radius: 15px;

}

.timeline-item span {

    color: var(--primary);

    font-weight: 700;

    display: block;

    margin-bottom: 8px;

}



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

.event-cta {

    padding: 100px 0;

    background: #EFF6FF;

}



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

@media(max-width:768px) {

    .event-highlight {

        padding: 30px;

    }

    .timeline-item {

        padding: 20px;

    }

}

/*=========================================
        NOTICES
==========================================*/

.notice-section {

    padding: 110px 0;

    background: #fff;

}

.notice-wrapper {

    display: flex;

    flex-direction: column;

    gap: 25px;

}

.notice-item {

    display: flex;

    align-items: center;

    gap: 30px;

    padding: 30px;

    background: #F8FAFC;

    border-radius: 20px;

    transition: .35s;

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

}

.notice-item:hover {

    transform: translateY(-5px);

    box-shadow: var(--shadow);

}

.notice-date {

    min-width: 80px;

    height: 80px;

    background: var(--primary);

    border-radius: 20px;

    color: #fff;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}

.notice-date span {

    font-size: 28px;

    font-weight: 700;

    line-height: 1;

}

.notice-date small {

    font-size: 13px;

    letter-spacing: 1px;

    margin-top: 6px;

}

.notice-content {

    flex: 1;

}

.notice-content h5 {

    margin-bottom: 10px;

}

.notice-content p {

    margin: 0;

    color: #64748B;

}

/*=========================================
        CIRCULARS
==========================================*/

.circular-section {

    padding: 110px 0;

    background: #EFF6FF;

}

.circular-card {

    background: #fff;

    border-radius: 20px;

    padding: 30px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    box-shadow: var(--shadow);

    transition: .35s;

}

.circular-card:hover {

    transform: translateY(-5px);

}

.circular-card h5 {

    margin-bottom: 8px;

}

/*=========================================
        ARCHIVE
==========================================*/

.notice-archive {

    padding: 110px 0;

    background: #fff;

}

.notice-archive table {

    background: #fff;

    border-radius: 15px;

    overflow: hidden;

}

.notice-archive thead {

    background: var(--primary);

    color: #fff;

}

.notice-archive th,

.notice-archive td {

    padding: 18px;

    vertical-align: middle;

}

.notice-archive a {

    color: var(--primary);

    font-weight: 600;

    text-decoration: none;

}

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

@media(max-width:768px) {

    .notice-item {

        flex-direction: column;

        align-items: flex-start;

    }

    .circular-card {

        flex-direction: column;

        align-items: flex-start;

        gap: 20px;

    }

    .notice-archive {

        overflow-x: auto;

    }

    .notice-archive table {

        min-width: 650px;

    }

}

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

.contact-info-section {

    padding: 110px 0;

    background: #EFF6FF;

}

.contact-card {

    background: #fff;

    padding: 45px;

    text-align: center;

    border-radius: 25px;

    transition: .35s;

    height: 100%;

    box-shadow: var(--shadow);

}

.contact-card:hover {

    transform: translateY(-10px);

}

.contact-card i {

    font-size: 50px;

    color: var(--primary);

    margin-bottom: 20px;

}



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

.contact-form-section {

    padding: 110px 0;

    background: #fff;

}

.contact-form-section .form-control,

.contact-form-section .form-select {

    height: 55px;

    border-radius: 15px;

}

.contact-form-section textarea {

    height: auto !important;

    padding-top: 15px;

}

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

.map-section {

    padding: 110px 0;

    background: #fff;

}

.map-wrapper {

    overflow: hidden;

    border-radius: 25px;

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

}

/*=========================================
        OFFICE HOURS
==========================================*/

.office-hours {

    padding: 110px 0;

    background: #F8FAFC;

}

.hours-card {

    background: #fff;

    border-radius: 25px;

    padding: 40px;

    box-shadow: var(--shadow);

    height: 100%;

}

.hours-card h3 {

    margin-bottom: 25px;

}

.hours-card h3 i {

    color: var(--primary);

    margin-right: 10px;

}

.hours-card ul {

    list-style: none;

    padding: 0;

    margin: 0;

}

.hours-card li {

    display: flex;

    justify-content: space-between;

    padding: 15px 0;

    border-bottom: 1px solid #E2E8F0;

}

.hours-card li:last-child {

    border-bottom: none;

}

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

.contact-faq {

    padding: 110px 0;

    background: #EFF6FF;

}

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

.contact-cta {

    padding: 110px 0;

    background: #fff;

}

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

@media(max-width:991px) {

    .hours-card {

        margin-bottom: 25px;

    }

}

@media(max-width:768px) {

    .hours-card li {

        flex-direction: column;

        gap: 6px;

    }

    .map-wrapper iframe {

        height: 350px;

    }

}