/*====================================
  RESET
====================================*/
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    transition:color .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease,transform .3s ease;
    
}

body{
    font-family:'Poppins',sans-serif;
}

a{
    text-decoration:none !important;
}

ul{
    list-style:none;
    margin:0;
    padding:0;
}

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


.header-top {
    background: #d8cf98;
    height: 48px;
}

.header-top .container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.mode-wrap {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* LEFT CONTACT */
.contact-nav {
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-nav li a {
    color: #222;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
}

.contact-nav i {
    margin-right: 6px;
}

/* RIGHT BUTTONS */
.top-nav {
    display: flex;
    align-items: center;
    gap: 25px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.top-nav li a {
    text-decoration: none;
}

.btn-top {
    background: #198754;
    color: #fff !important;
    padding: 6px 14px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

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

@media (max-width: 1399px) {

    .header-top .container {
        max-width: 100%;
        padding: 0 25px;
    }

}

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

    .header-top {
        height: auto;
    }

    .mode-wrap {
        height: auto;
        min-height: 48px;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        padding: 7px 0;
    }

    .contact-nav {
        gap: 15px;
    }

    .top-nav {
        gap: 12px;
    }

    .contact-nav li a {
        font-size: 13px;
    }

    .btn-top {
        padding: 5px 12px;
        font-size: 12px;
    }

}


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

    .header-top .container {
        padding: 0 15px;
    }

    .mode-wrap {
        flex-direction: column;
        padding: 8px 0;
    }

    .contact-nav {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 5px 18px;
    }

    .top-nav {
        width: 100%;
        justify-content: center;
        gap: 10px;
    }

    .contact-nav li a {
        font-size: 12px;
    }

    .btn-top {
        padding: 5px 12px;
        font-size: 12px;
    }

}


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

    .contact-nav {
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }

    .top-nav {
        gap: 8px;
    }

}

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




/*====================================
 STARTA MAIN HEADER
====================================*/

.header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10);
}


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

.main-navbar {
    width: 100%;
    background: #fff;
}

.main-navbar .container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}


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

.main-navbar .navbar {
    min-height: 105px;
    padding: 0;
    background: #fff;
}

.main-navbar .navbar-brand {
    padding: 0;
    margin: 0;
    flex-shrink: 0;
}


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

.brand-wrapper {
    display: flex;
    align-items: center;
    min-width: 0;
}

.logo {
    width: 70px;
    height: 70px;
    flex: 0 0 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo img {
    width: 70px;
    height: 70px;
    object-fit: contain;
    display: block;
}


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

.brand-text {
    margin-left: 16px;
    flex: 1;
    min-width: 0;
    max-width: 560px;
}

.brand-text h2 {
    margin: 0;
    /* padding: 0; */
    color: #2b2b7b;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


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

.main-navbar .navbar-collapse {
    justify-content: flex-end;
}

.main-navbar .navbar-nav {
    margin-left: auto;
    align-items: center;
    gap: 0;
}

.main-navbar .navbar-nav .nav-item {
    position: relative;
    margin: 0;
}

.main-navbar .navbar-nav .nav-link {
    display: flex;
    align-items: center;

    padding: 40px 10px;

    color: #111 !important;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;

    white-space: nowrap;

    transition: color 0.25s ease;
}


/*==================================================
    NAV HOVER
==================================================*/

.main-navbar .navbar-nav .nav-link:hover {
    color: #198754 !important;
}


/*==================================================
    ACTIVE MENU
==================================================*/

.main-navbar .navbar-nav .nav-item.active > .nav-link,
.main-navbar .navbar-nav .dropdown.active > .nav-link {
    color: #198754 !important;
    font-weight: 600;
}


/*==================================================
    DROPDOWN ARROW
==================================================*/

.main-navbar .dropdown-toggle::after {
    margin-left: 6px;
    vertical-align: middle;
}


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

.main-navbar .dropdown-menu {
    min-width: 220px;

    margin-top: 0;
    padding: 8px 0;

    background: #fff;

    border: 1px solid #e5e5e5;
    border-radius: 8px;

    overflow: hidden;

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

.main-navbar .dropdown-menu li {
    margin: 0;
}

.main-navbar .dropdown-item {
    padding: 11px 18px;

    color: #333;

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

    transition: all 0.25s ease;
}

.main-navbar .dropdown-item:hover,
.main-navbar .dropdown-item:focus {
    background: #198754 !important;
    color: #fff !important;
}


/*==================================================
    ACTIVE DROPDOWN
==================================================*/

.main-navbar .dropdown-menu li.active > .dropdown-item,
.main-navbar .dropdown-menu .dropdown-item.active,
.main-navbar .dropdown-menu .dropdown-item:active {
    background: #198754 !important;
    color: #fff !important;
}


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

.main-navbar .navbar-toggler {
    border: 0;
    padding: 7px;
    margin-left: 15px;

    box-shadow: none !important;
    outline: none !important;
}

.main-navbar .navbar-toggler:focus {
    box-shadow: none !important;
}

.main-navbar .navbar-toggler-icon {
    width: 28px;
    height: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='black' stroke-width='2.5' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}


/*==================================================*
    LARGE DESKTOP
    1200px - 1399px
*==================================================*/

@media (max-width: 1399px) {

    .main-navbar .container {
        max-width: 100%;
        padding-left: 25px;
        padding-right: 25px;
    }

    .main-navbar .navbar {
        min-height: 95px;
    }

    .logo {
        width: 65px;
        height: 65px;
        flex-basis: 65px;
    }

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

    .brand-text {
        max-width: 430px;
        margin-left: 14px;
    }

    .brand-text h2 {
        font-size: 20px;
    }

    .main-navbar .navbar-nav .nav-link {
        padding-left: 10px;
        padding-right: 10px;
        font-size: 16px;
    }
}


/*==================================================*
    TABLET / SMALL DESKTOP
    992px - 1199px
*==================================================*/

@media (max-width: 1199px) {

    .main-navbar .container {
        max-width: 100%;
        padding-left: 22px;
        padding-right: 22px;
    }

    .main-navbar .navbar {
        min-height: 85px;
        padding: 10px 0;
    }

    .logo {
        width: 60px;
        height: 60px;
        flex-basis: 60px;
    }

    .logo img {
        width: 60px;
        height: 60px;
    }

    .brand-text {
        max-width: 360px;
        margin-left: 12px;
    }

    .brand-text h2 {
        font-size: 19px
    }

    /* Collapsed menu */

    .main-navbar .navbar-collapse {
        width: 100%;
        margin-top: 15px;
    }

    .main-navbar .navbar-nav {
        width: 100%;
        align-items: flex-start;
    }

    .main-navbar .navbar-nav .nav-item {
        width: 100%;
    }

    .main-navbar .navbar-nav .nav-link {
        width: 100%;
        padding: 12px 15px;
        font-size: 16px;
    }

    .main-navbar .dropdown-menu {
        width: 100%;
        min-width: auto;
        padding-left: 15px;

        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
}


/*==================================================*
    MOBILE
    768px - 991px
*==================================================*/

@media (max-width: 991px) {

    .main-navbar .container {
        padding-left: 18px;
        padding-right: 18px;
    }

    .main-navbar .navbar {
        min-height: 75px;
        padding: 10px 0;
    }

    .main-navbar .navbar > .container {
        display: flex;
        align-items: center;
    }

    .main-navbar .navbar-brand {
        max-width: calc(100% - 55px);
        min-width: 0;
    }

    .brand-wrapper {
        width: 100%;
    }

    .logo {
        width: 55px;
        height: 55px;
        flex: 0 0 55px;
    }

    .logo img {
        width: 55px;
        height: 55px;
    }

    .brand-text {
        max-width: calc(100% - 67px);
        margin-left: 12px;
    }

    .brand-text h2 {
         font-size: 18px;
        line-height: 1.2;
        white-space: nowrap;
    }

    .main-navbar .navbar-toggler {
        display: block;
        margin-left: auto;
    }

    .main-navbar .navbar-collapse {
        margin-top: 12px;
    }
}


/*==================================================*
    SMALL MOBILE
    576px - 767px
*==================================================*/

@media (max-width: 576px) {

    .main-navbar .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .main-navbar .navbar {
        min-height: 70px;
        padding: 8px 0;
    }

    .main-navbar .navbar-brand {
        max-width: calc(100% - 50px);
    }

    .logo {
        width: 48px;
        height: 48px;
        flex: 0 0 48px;
    }

    .logo img {
        width: 48px;
        height: 48px;
    }

    .brand-text {
        max-width: calc(100% - 58px);
        margin-left: 10px;
    }

    .brand-text h2 {
        font-size: 17px;
        line-height: 1.2;
    }

    .main-navbar .navbar-toggler {
        padding: 5px;
    }

    .main-navbar .navbar-toggler-icon {
        width: 25px;
        height: 25px;
    }

    .main-navbar .navbar-nav .nav-link {
        padding: 11px 10px;
        font-size: 15px;
    }
}


/*==================================================*
    EXTRA SMALL MOBILE
    380px BELOW
*==================================================*/

@media (max-width: 380px) {

    .main-navbar .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .logo {
        width: 43px;
        height: 43px;
        flex-basis: 43px;
    }

    .logo img {
        width: 43px;
        height: 43px;
    }

    .brand-text {
        max-width: calc(100% - 51px);
        margin-left: 8px;
    }

    .brand-text h2 {
        font-size: 15px;
    }

    .main-navbar .navbar-toggler {
        padding: 4px;
    }
}


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

.main-navbar .navbar-toggler {
    border: 0;
    box-shadow: none !important;
}

.main-navbar .navbar-toggler:focus {
    box-shadow: none !important;
}

.main-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='black' stroke-width='2.5' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

/*==============================
  END MAIN HEADER
==============================*/

/*==================================================
    SCHOOL HERO SLIDER
==================================================*/

.school-hero-section{
    position:relative;
    width:100%;
    overflow:hidden;
    background:#fff;
}

.school-hero-slider{
    position:relative;
    width:100%;
    overflow:hidden;
}

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

.school-hero-slides{
    width:100%;
}

.school-hero-slides .carousel-item{
    position:relative;
    width:100%;
}

/* Banner Image */

.school-hero-slides .carousel-item img{
    display:block;
    width:100%;
    height:540px;
    object-fit:cover;
    object-position:center;
}


/*==================================================
    OPTIONAL BANNER CONTENT
==================================================*/

.school-hero-content{
    position:absolute;
    top:50%;
    left:50%;
    width:100%;
    max-width:1400px;
    padding:0 30px;
    transform:translate(-50%,-50%);
    z-index:5;
    pointer-events:none;
}

.school-hero-content-inner{
    max-width:520px;
    pointer-events:auto;
}

.school-hero-content h1{
    margin:0;
    font-size:52px;
    line-height:1.15;
    font-weight:700;
    color:#202020;
}

.school-hero-content h1 span{
    color:#198754;
}

.school-hero-content p{
    margin:18px 0 24px;
    max-width:500px;
    font-size:16px;
    line-height:1.7;
    color:#555;
}


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

.school-hero-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;

    padding:13px 28px;

    background:#c82626;
    color:#fff;

    border-radius:40px;

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

    text-decoration:none;

    transition:all .3s ease;
}

.school-hero-btn:hover{
    background:#991919;
    color:#fff;
    transform:translateY(-2px);
}


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

.school-hero-control{
    width:65px;
    opacity:1;
    z-index:10;
}

.school-hero-prev{
    justify-content:flex-start;
    padding-left:18px;
}

.school-hero-next{
    justify-content:flex-end;
    padding-right:18px;
}

.school-hero-arrow{
    width:46px;
    height:46px;

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

    border-radius:50%;

    background:#fff;
    color:#198754;

    font-size:16px;

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

    transition:all .3s ease;
}

.school-hero-control:hover{
    opacity:1;
}

.school-hero-control:hover .school-hero-arrow{
    background:#198754;
    color:#fff;
    transform:scale(1.05);
}


/*==================================================
    INDICATORS
==================================================*/

.school-hero-indicators{
    bottom:45px;
    z-index:15;
    margin-bottom:0;
}

.school-hero-indicators button{
    width:9px;
    height:9px;

    margin:0 5px;

    padding:0;

    border:0;

    border-radius:50%;

    opacity:.65;

    transition:all .3s ease;
}

.school-hero-indicators button.active{
    width:25px;
    border-radius:10px;
    opacity:1;
}


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

.school-hero-wave{
    position:absolute;
    left:0;
    bottom:-1px;

    width:100%;

    z-index:20;

    pointer-events:none;
}

.school-hero-wave svg{
    display:block;

    width:100%;
    height:75px;
}


/*==================================================
    LARGE DESKTOP
    1200px - 1399px
==================================================*/

@media (max-width:1399px){

    .school-hero-slides .carousel-item img{
        height:510px;
    }

    .school-hero-content{
        padding-left:25px;
        padding-right:25px;
    }

    .school-hero-content h1{
        font-size:46px;
    }

}


/*==================================================
    TABLET
    992px - 1199px
==================================================*/

@media (max-width:1199px){

    .school-hero-slides .carousel-item img{
        height:450px;
    }

    .school-hero-content{
        padding-left:30px;
        padding-right:30px;
    }

    .school-hero-content-inner{
        max-width:460px;
    }

    .school-hero-content h1{
        font-size:40px;
    }

    .school-hero-content p{
        font-size:15px;
        line-height:1.6;
        margin:15px 0 20px;
    }

    .school-hero-arrow{
        width:42px;
        height:42px;
        font-size:14px;
    }

    .school-hero-control{
        width:55px;
    }

    .school-hero-prev{
        padding-left:12px;
    }

    .school-hero-next{
        padding-right:12px;
    }

}


/*==================================================
    MOBILE
    768px - 991px
==================================================*/

@media (max-width:991px){

    .school-hero-slides .carousel-item img{
        height:390px;
    }

    .school-hero-content{
        padding-left:25px;
        padding-right:25px;
    }

    .school-hero-content-inner{
        max-width:400px;
    }

    .school-hero-content h1{
        font-size:34px;
    }

    .school-hero-content p{
        font-size:14px;
        line-height:1.55;
        margin:12px 0 18px;
    }

    .school-hero-btn{
        padding:11px 23px;
        font-size:14px;
    }

    .school-hero-wave svg{
        height:60px;
    }

    .school-hero-indicators{
        bottom:32px;
    }

}


/*==================================================
    SMALL MOBILE
    576px - 767px
==================================================*/

@media (max-width:767px){

    .school-hero-slides .carousel-item img{
        height:330px;
    }

    .school-hero-content{
        padding-left:20px;
        padding-right:20px;
    }

    .school-hero-content-inner{
        max-width:310px;
    }

    .school-hero-content h1{
        font-size:28px;
        line-height:1.2;
    }

    .school-hero-content p{
        font-size:13px;
        line-height:1.5;
        margin:10px 0 15px;
    }

    .school-hero-btn{
        padding:10px 20px;
        font-size:13px;
    }

    .school-hero-control{
        width:45px;
    }

    .school-hero-prev{
        padding-left:8px;
    }

    .school-hero-next{
        padding-right:8px;
    }

    .school-hero-arrow{
        width:36px;
        height:36px;
        font-size:12px;
    }

    .school-hero-indicators{
        bottom:25px;
    }

    .school-hero-indicators button{
        width:7px;
        height:7px;
        margin:0 4px;
    }

    .school-hero-indicators button.active{
        width:20px;
    }

    .school-hero-wave svg{
        height:48px;
    }

}


/*==================================================
    EXTRA SMALL MOBILE
    0 - 575px
==================================================*/

@media (max-width:575px){

    .school-hero-slides .carousel-item img{
        height:270px;
    }

    .school-hero-content{
        padding-left:15px;
        padding-right:15px;
    }

    .school-hero-content-inner{
        max-width:250px;
    }

    .school-hero-content h1{
        font-size:22px;
    }

    .school-hero-content p{
        display:none;
    }

    .school-hero-btn{
        margin-top:10px;
        padding:9px 17px;
        font-size:12px;
    }

    .school-hero-control{
        width:40px;
    }

    .school-hero-arrow{
        width:32px;
        height:32px;
        font-size:10px;
    }

    .school-hero-prev{
        padding-left:5px;
    }

    .school-hero-next{
        padding-right:5px;
    }

    .school-hero-indicators{
        bottom:20px;
    }

    .school-hero-wave svg{
        height:40px;
    }

}
/*==================================================
    END SCHOOL HERO SLIDER
==================================================*/


/*==================================================
    SCHOOL VALUES SECTION
==================================================*/

/*==================================================
  SCHOOL VALUES SECTION
==================================================*/

.school-values-section {
    position: relative;
    width: 100%;
    padding: 25px 0 30px;
    background: linear-gradient(180deg, #fffdf7 0%, #f8fbff 100%);
    overflow: hidden;
}

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

.school-values-section::before {
    content: "";
    position: absolute;

    width: 380px;
    height: 380px;

    top: -180px;
    left: -170px;

    background: rgba(255, 179, 71, 0.10);
    border-radius: 50%;

    pointer-events: none;
}

.school-values-section::after {
    content: "";
    position: absolute;

    width: 360px;
    height: 360px;

    right: -170px;
    bottom: -180px;

    background: rgba(55, 179, 107, 0.08);
    border-radius: 50%;

    pointer-events: none;
}

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

.school-values-container {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1400px;

    margin: 0 auto;

    padding-left: 20px;
    padding-right: 20px;
}

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

.school-values-heading {
    position: relative;
    z-index: 2;

    max-width: 1000px;
    margin: 0 auto 18px;

    text-align: center;
}

.school-values-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 4px;
    color: #0b6b45;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.school-values-subtitle::after {
    content: "";
    display: inline-block;
    width: 48px;
    height: 2px;
    background: #e53935;
    flex-shrink: 0;
}

.school-values-heading h2 {
    margin: 6px 0 8px;

    color: #222;

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

    line-height: 1.25;
}

.school-values-heading p {
    /* max-width: 850px; */

    margin: 0 auto;

    color: #666;

    font-size: 15px;
    line-height: 30px;
}

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

.school-values-intro {
    position: relative;
    z-index: 2;

    max-width: 1100px;

    margin: 0 auto 25px;

    text-align: center;
}

.school-values-intro p {
    margin: 0;

    color: #555;

    font-size: 15px;
    line-height: 1.6;
}

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

.school-values-grid {
    position: relative;
    z-index: 2;

    display: grid;

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

    gap: 16px;

    width: 100%;
}

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

.school-value-item {
    min-width: 0;
}

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

.school-value-card {
    position: relative;

    width: 100%;
    min-height: 180px;

    padding: 20px 12px;

    border-radius: 18px;

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

    text-align: center;

    overflow: hidden;

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

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.school-value-card:hover {
    transform: translateY(-5px);

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.10);
}

/*==================================================
  CARD BACKGROUND COLORS
==================================================*/

.school-value-1 {
    background: #fff0f7;
}

.school-value-2 {
    background: #fff6e8;
}

.school-value-3 {
    background: #eafafd;
}

.school-value-4 {
    background: #eef7ff;
}

.school-value-5 {
    background: #f1faf2;
}

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

.school-value-icon {
    width: 68px;
    height: 68px;

    flex: 0 0 68px;

    margin: 0 auto 14px;

    border-radius: 50%;

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

    color: #fff;

    font-size: 27px;
}

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

.school-value-1 .school-value-icon {
    background: linear-gradient(
        135deg,
        #ff5aa8,
        #ff3c78
    );
}

.school-value-2 .school-value-icon {
    background: linear-gradient(
        135deg,
        #ffbe55,
        #ff8a00
    );
}

.school-value-3 .school-value-icon {
    background: linear-gradient(
        135deg,
        #4dd0e1,
        #00acc1
    );
}

.school-value-4 .school-value-icon {
    background: linear-gradient(
        135deg,
        #64b5f6,
        #1e88e5
    );
}

.school-value-5 .school-value-icon {
    background: linear-gradient(
        135deg,
        #81c784,
        #43a047
    );
}

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

.school-value-card h4 {
    margin: 0;

    color: #222;

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

    line-height: 1.4;

    word-break: normal;
}

/*==================================================*
* LARGE DESKTOP *
* 1200px - 1399px
*==================================================*/

@media (max-width: 1399px) {

    .school-values-section {
        padding: 25px 0 30px;
    }

    .school-values-container {
        padding-left: 25px;
        padding-right: 25px;
    }

    .school-values-grid {
        gap: 16px;
    }

    .school-values-subtitle {
        font-size: 13px;
        letter-spacing: 1.5px;
        gap: 14px;
    }

    .school-values-subtitle::after {
        width: 45px;
        height: 2px;
    }

    .school-value-card {
        min-height: 175px;
        padding: 20px 12px;
    }

    .school-value-icon {
        width: 66px;
        height: 66px;
        flex-basis: 66px;
        font-size: 26px;
    }

    .school-value-card h4 {
        font-size: 16px;
    }
}


/*==================================================*
* TABLET *
* 992px - 1199px
*==================================================*/

@media (max-width: 1199px) {

    .school-values-section {
        padding: 25px 0 30px;
    }

    .school-values-container {
        padding-left: 22px;
        padding-right: 22px;
    }

    .school-values-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 15px;
    }

    .school-values-heading {
        margin-bottom: 15px;
    }

    .school-values-subtitle {
        font-size: 13px;
        letter-spacing: 1.4px;
        gap: 12px;
    }

    .school-values-subtitle::after {
        width: 42px;
        height: 2px;
    }

    .school-values-heading h2 {
        font-size: 30px;
    }

    .school-values-heading p {
        font-size: 14px;
    }

    .school-values-intro {
        margin-bottom: 22px;
    }

    .school-values-intro p {
        font-size: 14px;
    }

    .school-value-card {
        min-height: 165px;
        padding: 20px 12px;
    }

    .school-value-icon {
        width: 64px;
        height: 64px;
        flex-basis: 64px;
        font-size: 25px;
        margin-bottom: 12px;
    }

    .school-value-card h4 {
        font-size: 15px;
    }
}


/*==================================================*
* MOBILE TABLET *
* 768px - 991px
*==================================================*/

@media (max-width: 991px) {

    .school-values-section {
        padding: 22px 0 28px;
    }

    .school-values-container {
        padding-left: 18px;
        padding-right: 18px;
    }

    .school-values-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .school-values-heading h2 {
        font-size: 28px;
    }

    .school-values-heading p {
        font-size: 14px;
        line-height: 1.5;
    }

    .school-values-subtitle {
        font-size: 14px;
        letter-spacing: 1.3px;
        gap: 10px;
    }

    .school-values-subtitle::after {
        width: 35px;
        height: 2px;
    }

    .school-values-intro {
        margin-bottom: 20px;
    }

    .school-values-intro p {
        font-size: 14px;
        line-height: 1.6;
    }

    .school-value-card {
        min-height: 155px;
        padding: 18px 10px;
    }

    .school-value-icon {
        width: 60px;
        height: 60px;
        flex-basis: 60px;
        font-size: 24px;
        margin-bottom: 11px;
    }

    .school-value-card h4 {
        font-size: 15px;
    }
}


/*==================================================*
* MOBILE *
* 576px - 767px
*==================================================*/

@media (max-width: 767px) {

    .school-values-section {
        padding: 20px 0 25px;
    }

    .school-values-container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .school-values-heading {
        margin-bottom: 12px;
    }

    .school-values-subtitle {
        font-size: 12px;
        letter-spacing: 1.2px;
        gap: 10px;
    }

    .school-values-subtitle::after {
        width: 35px;
        height: 2px;
    }

    .school-values-heading h2 {
        font-size: 25px;
        line-height: 1.25;
    }

    .school-values-heading p {
        font-size: 13px;
    }

    .school-values-intro {
        margin-bottom: 16px;
    }

    .school-values-intro p {
        font-size: 13px;
        line-height: 1.55;
    }

    .school-values-grid {
        gap: 11px;
    }

    .school-value-card {
        min-height: 145px;
        padding: 16px 8px;
        border-radius: 15px;
    }

    .school-value-icon {
        width: 56px;
        height: 56px;
        flex-basis: 56px;
        font-size: 22px;
        margin-bottom: 9px;
    }

    .school-value-card h4 {
        font-size: 14px;
        line-height: 1.35;
    }

    .school-values-section::before {
        width: 250px;
        height: 250px;
    }

    .school-values-section::after {
        width: 240px;
        height: 240px;
    }
}


/*==================================================*
* EXTRA SMALL *
* Below 576px
*==================================================*/

@media (max-width: 575px) {

    .school-values-section {
        padding: 18px 0 22px;
    }

    .school-values-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .school-values-subtitle {
        font-size: 11px;
        letter-spacing: 1px;
        gap: 8px;
    }

    .school-values-subtitle::after {
        width: 30px;
        height: 2px;
    }

    .school-values-heading h2 {
        font-size: 22px;
    }

    .school-values-heading p {
        font-size: 13px;
    }

    .school-values-intro p {
        font-size: 13px;
    }

    .school-value-card {
        min-height: 135px;
        padding: 14px 6px;
    }

    .school-value-icon {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
        font-size: 21px;
        margin-bottom: 8px;
    }

    .school-value-card h4 {
        font-size: 13px;
    }
}


/*==================================================*
* VERY SMALL *
* Below 380px
*==================================================*/

@media (max-width: 380px) {

    .school-values-container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .school-values-grid {
        gap: 8px;
    }

    .school-values-subtitle {
        font-size: 10px;
        letter-spacing: 0.9px;
        gap: 7px;
    }

    .school-values-subtitle::after {
        width: 26px;
        height: 2px;
    }

    .school-values-heading h2 {
        font-size: 21px;
    }

    .school-value-card {
        min-height: 125px;
        padding: 12px 5px;
    }

    .school-value-icon {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
        font-size: 19px;
    }

    .school-value-card h4 {
        font-size: 12px;
    }
}
/*==================================================
  END SCHOOL VALUES SECTION
==================================================*/




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

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

.school-about-container {
    position: relative;
    z-index: 2;
}

.school-about-row {
    row-gap: 25px;
}


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

.school-about-image-col {
    position: relative;
}

.school-about-image-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 14px;
}

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


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

.school-about-year-box {
    position: absolute;
    top: 15px;
    right: 15px;

    width: 88px;
    height: 88px;

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

    background: #0d5b3d;
    color: #ffffff;

    border-radius: 7px;

    text-align: center;
    z-index: 3;
}

.school-about-year-box span {
    display: block;
    margin-bottom: 2px;

    font-size: 14px;
    line-height: 1.2;
}

.school-about-year-box h4 {
    margin: 0;

    font-size: 23px;
    line-height: 1.2;
    font-weight: 700;
}


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

.school-about-content-col {
    position: relative;
}

.school-about-content {
    padding-left: 35px;
}


/*==================================================
  SUBTITLE
==================================================*/

.school-about-subtitle {
    position: relative;
    display: inline-block;
    padding-right: 52px;

    color: #0b6b45;

    font-size: 13px;
    line-height: 1.3;
    font-weight: 700;

    letter-spacing: 1px;
    text-transform: uppercase;
}

.school-about-subtitle::after {
    content: "";

    position: absolute;

    width: 38px;
    height: 2px;

    right: 0;
    top: 50%;

    background: #cc3d2b;

    transform: translateY(-50%);
}


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

.school-about-title {
    margin: 12px 0 15px;

    color: #1f3b2e;

    font-size: 30px;
    line-height: 1.25;
    font-weight: 700;
}

.school-about-title span {
    color: #166534;
}


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

.school-about-description {
    max-width: 700px;

    margin: 0 0 22px;

    color: #666;

    font-size: 15px;
    line-height: 1.8;
}


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

.school-about-button {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 11px 22px;

    background: #1f5d42;
    color: #ffffff;

    border-radius: 50px;

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

    text-decoration: none;

    transition: all .3s ease;
}

.school-about-button:hover {
    background: #0f3d2c;
    color: #ffffff;
}

.school-about-button i {
    width: 25px;
    height: 25px;

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

    background: #ffffff;
    color: #1f5d42;

    border-radius: 50%;

    font-size: 13px;
}


/*==================================================
  BIRD
==================================================*/

.school-about-bird {
    position: absolute;

    right: 150px;
    top: 45px;

    width: 55px;
    max-width: 55px;

    z-index: 4;

    pointer-events: none;

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

@keyframes schoolAboutBirdFly {

    0% {
        transform: translateX(0) translateY(0) rotate(0deg);
    }

    20% {
        transform: translateX(-25px) translateY(-12px) rotate(-4deg);
    }

    40% {
        transform: translateX(-50px) translateY(8px) rotate(3deg);
    }

    60% {
        transform: translateX(-75px) translateY(-10px) rotate(-3deg);
    }

    80% {
        transform: translateX(-100px) translateY(6px) rotate(2deg);
    }

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


/*==================================================
  LARGE DESKTOP
  1200px - 1399px
==================================================*/

@media (max-width: 1399px) {

    .school-about-section {
        padding: 30px 0;
    }

    .school-about-content {
        padding-left: 25px;
    }

    .school-about-image {
        height: 350px;
    }

    .school-about-title {
        font-size: 30px;
    }

    .school-about-description {
        font-size: 15px;
        line-height: 1.75;
        margin-bottom: 20px;
    }

    .school-about-bird {
        right: 100px;
        width: 50px;
    }
}


/*==================================================
  TABLET
  992px - 1199px
==================================================*/

@media (max-width: 1199px) {

    .school-about-section {
        padding: 28px 0;
    }

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

    .school-about-content {
        padding-left: 15px;
    }

    .school-about-title {
        font-size: 27px;
        margin: 10px 0 13px;
    }

    .school-about-description {
        font-size: 14px;
        line-height: 1.7;
        margin-bottom: 18px;
    }

    .school-about-button {
        padding: 10px 19px;
        font-size: 13px;
    }

    .school-about-bird {
        right: 50px;
        top: 35px;
        width: 45px;
    }
}


/*==================================================
  MOBILE TABLET
  768px - 991px
==================================================*/

@media (max-width: 991px) {

    .school-about-section {
        padding: 25px 0;
    }

    .school-about-row {
        row-gap: 20px;
    }

    .school-about-image {
        height: 330px;
    }

    .school-about-content {
        padding-left: 0;
        padding-top: 5px;
    }

    .school-about-title {
        font-size: 25px;
        margin: 10px 0 12px;
    }

    .school-about-description {
        max-width: 100%;
        font-size: 14px;
        line-height: 1.7;
        margin-bottom: 18px;
    }

    .school-about-bird {
        display: none;
    }
}


/*==================================================
  MOBILE
  576px - 767px
==================================================*/

@media (max-width: 767px) {

    .school-about-section {
        padding: 22px 0;
    }

    .school-about-image {
        height: 280px;
    }

    .school-about-year-box {
        top: 12px;
        right: 12px;

        width: 72px;
        height: 72px;
    }

    .school-about-year-box span {
        font-size: 12px;
    }

    .school-about-year-box h4 {
        font-size: 19px;
    }

    .school-about-subtitle {
        padding-right: 45px;
        font-size: 12px;
        letter-spacing: .8px;
    }

    .school-about-subtitle::after {
        width: 32px;
    }

    .school-about-title {
        font-size: 24px;
        line-height: 1.25;
        margin: 9px 0 11px;
    }

    .school-about-description {
        font-size: 13px;
        line-height: 1.65;
        margin-bottom: 16px;
    }

    .school-about-button {
        padding: 9px 17px;
        font-size: 13px;
    }

    .school-about-button i {
        width: 23px;
        height: 23px;
        font-size: 12px;
    }
}


/*==================================================
  SMALL MOBILE
  Below 576px
==================================================*/

@media (max-width: 575px) {

    .school-about-section {
        padding: 20px 0;
    }

    .school-about-image {
        height: 240px;
    }

    .school-about-year-box {
        width: 65px;
        height: 65px;
        top: 10px;
        right: 10px;
    }

    .school-about-year-box span {
        font-size: 11px;
    }

    .school-about-year-box h4 {
        font-size: 17px;
    }

    .school-about-title {
        font-size: 24px;
    }

    .school-about-description {
        font-size: 13px;
        line-height: 1.6;
    }
}


/*==================================================
  VERY SMALL MOBILE
  Below 380px
==================================================*/

@media (max-width: 380px) {

    .school-about-section {
        padding: 18px 0;
    }

    .school-about-image {
        height: 210px;
    }

    .school-about-title {
        font-size: 22px;
    }

    .school-about-description {
        font-size: 12.5px;
        line-height: 1.6;
    }

    .school-about-button {
        padding: 8px 15px;
        font-size: 12px;
    }
}

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


/*==================================================
  SCHOOL QUICK ACCESS
==================================================*/

.school-quick-section {
    position: relative;
    overflow: hidden;

    padding: 30px 0;

    background: #ffffff;
}

.school-quick-container {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}


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

.school-quick-heading {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 15px;

    margin-bottom: 22px;

    text-align: center;
}

.school-quick-heading-line {
    width: 55px;
    height: 1px;

    display: block;

    background: #d7d7d7;
}

.school-quick-heading h2 {
    margin: 0;

    color: #163b35;

    font-size: 32px;
    line-height: 1.2;
    font-weight: 600;
}


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

.school-quick-row {
    row-gap: 16px;
}

.school-quick-col {
    display: flex;
}


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

.school-quick-card {
    width: 100%;

    padding: 22px 15px;

    border: 1px solid #ececec;
    border-radius: 14px;

    text-align: center;

    transition:
        transform .3s ease,
        box-shadow .3s ease;

    height: 100%;
}

.school-quick-card:hover {
    transform: translateY(-5px);

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


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

.school-quick-icon {
    width: 68px;
    height: 68px;

    margin: 0 auto 14px;

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

    border-radius: 50%;

    font-size: 29px;
}


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

.school-quick-card h4 {
    margin: 0 0 8px;

    font-size: 19px;
    line-height: 1.3;
    font-weight: 700;
}


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

.school-quick-card p {
    max-width: 230px;

    margin: 0 auto 12px;

    color: #555;

    font-size: 14px;
    line-height: 1.6;
}


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

.school-quick-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    font-size: 18px;

    text-decoration: none;

    transition: transform .3s ease;
}

.school-quick-card:hover .school-quick-link {
    transform: translateX(4px);
}


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

.school-quick-admission {
    background: #fff7f7;
    border-color: #f6dddd;
}

.school-quick-admission .school-quick-icon {
    background: #ffd9d9;
    color: #e53935;
}

.school-quick-admission h4,
.school-quick-admission .school-quick-link {
    color: #e53935;
}


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

.school-quick-facility {
    background: #fffcf2;
    border-color: #f6e4b5;
}

.school-quick-facility .school-quick-icon {
    background: #ffe3a3;
    color: #c28100;
}

.school-quick-facility h4,
.school-quick-facility .school-quick-link {
    color: #c28100;
}


/*==================================================
  LIBRARY
==================================================*/

.school-quick-library {
    background: #f8fff5;
    border-color: #deedc9;
}

.school-quick-library .school-quick-icon {
    background: #d8efc4;
    color: #5f9128;
}

.school-quick-library h4,
.school-quick-library .school-quick-link {
    color: #5f9128;
}


/*==================================================
  PORTAL
==================================================*/

.school-quick-portal {
    background: #f5fbff;
    border-color: #d7ebfa;
}

.school-quick-portal .school-quick-icon {
    background: #d8efff;
    color: #1f74c5;
}

.school-quick-portal h4,
.school-quick-portal .school-quick-link {
    color: #1f74c5;
}


/*==================================================
  LARGE DESKTOP
  1200px - 1399px
==================================================*/

@media (max-width: 1399px) {

    .school-quick-section {
        padding: 28px 0;
    }

    .school-quick-container {
        padding-left: 25px;
        padding-right: 25px;
    }

    .school-quick-heading {
        margin-bottom: 20px;
    }

    .school-quick-heading h2 {
        font-size: 30px;
    }

    .school-quick-heading-line {
        width: 50px;
    }

    .school-quick-row {
        row-gap: 15px;
    }

    .school-quick-card {
        padding: 20px 14px;
    }

    .school-quick-icon {
        width: 64px;
        height: 64px;

        margin-bottom: 12px;

        font-size: 27px;
    }

    .school-quick-card h4 {
        font-size: 18px;
        margin-bottom: 7px;
    }

    .school-quick-card p {
        font-size: 13px;
        line-height: 1.55;
        margin-bottom: 10px;
    }
}


/*==================================================
  TABLET
  992px - 1199px
==================================================*/

@media (max-width: 1199px) {

    .school-quick-section {
        padding: 25px 0;
    }

    .school-quick-container {
        padding-left: 22px;
        padding-right: 22px;
    }

    .school-quick-heading {
        margin-bottom: 18px;
    }

    .school-quick-heading h2 {
        font-size: 28px;
    }

    .school-quick-heading-line {
        width: 45px;
    }

    .school-quick-card {
        padding: 19px 12px;
    }

    .school-quick-icon {
        width: 60px;
        height: 60px;

        font-size: 25px;
        margin-bottom: 11px;
    }

    .school-quick-card h4 {
        font-size: 17px;
    }

    .school-quick-card p {
        font-size: 13px;
        line-height: 1.5;
    }

    .school-quick-link {
        width: 26px;
        height: 26px;

        font-size: 17px;
    }
}


/*==================================================
  MOBILE TABLET
  768px - 991px
==================================================*/

@media (max-width: 991px) {

    .school-quick-section {
        padding: 23px 0;
    }

    .school-quick-container {
        padding-left: 18px;
        padding-right: 18px;
    }

    .school-quick-heading {
        gap: 12px;
        margin-bottom: 18px;
    }

    .school-quick-heading h2 {
        font-size: 26px;
    }

    .school-quick-heading-line {
        width: 38px;
    }

    .school-quick-row {
        row-gap: 12px;
    }

    .school-quick-card {
        padding: 18px 10px;
        border-radius: 12px;
    }

    .school-quick-icon {
        width: 58px;
        height: 58px;

        font-size: 24px;
        margin-bottom: 10px;
    }

    .school-quick-card h4 {
        font-size: 16px;
        margin-bottom: 6px;
    }

    .school-quick-card p {
        font-size: 12.5px;
        line-height: 1.5;

        margin-bottom: 9px;
    }

    .school-quick-link {
        font-size: 16px;
    }
}


/*==================================================
  MOBILE
  576px - 767px
==================================================*/

@media (max-width: 767px) {

    .school-quick-section {
        padding: 20px 0;
    }

    .school-quick-container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .school-quick-heading {
        gap: 10px;
        margin-bottom: 16px;
    }

    .school-quick-heading h2 {
        font-size: 24px;
    }

    .school-quick-heading-line {
        width: 30px;
    }

    .school-quick-row {
        row-gap: 10px;
    }

    .school-quick-card {
        padding: 16px 8px;
        border-radius: 11px;
    }

    .school-quick-icon {
        width: 54px;
        height: 54px;

        font-size: 22px;
        margin-bottom: 9px;
    }

    .school-quick-card h4 {
        font-size: 15px;
        line-height: 1.3;
    }

    .school-quick-card p {
        font-size: 12px;
        line-height: 1.45;
        margin-bottom: 8px;
    }

    .school-quick-link {
        width: 24px;
        height: 24px;
        font-size: 15px;
    }
}


/*==================================================
  SMALL MOBILE
  Below 576px
==================================================*/

@media (max-width: 575px) {

    .school-quick-section {
        padding: 18px 0;
    }

    .school-quick-container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .school-quick-heading {
        margin-bottom: 14px;
    }

    .school-quick-heading h2 {
        font-size: 22px;
    }

    .school-quick-heading-line {
        width: 25px;
    }

    .school-quick-row {
        margin-left: -5px;
        margin-right: -5px;
    }

    .school-quick-col {
        padding-left: 5px;
        padding-right: 5px;
    }

    .school-quick-card {
        padding: 14px 6px;
        border-radius: 10px;
    }

    .school-quick-icon {
        width: 50px;
        height: 50px;

        font-size: 20px;
        margin-bottom: 8px;
    }

    .school-quick-card h4 {
        font-size: 14px;
    }

    .school-quick-card p {
        font-size: 11.5px;
        line-height: 1.4;
    }
}


/*==================================================
  VERY SMALL
  Below 380px
==================================================*/

@media (max-width: 380px) {

    .school-quick-section {
        padding: 16px 0;
    }

    .school-quick-container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .school-quick-heading h2 {
        font-size: 20px;
    }

    .school-quick-heading-line {
        width: 22px;
    }

    .school-quick-card {
        padding: 12px 5px;
    }

    .school-quick-icon {
        width: 46px;
        height: 46px;

        font-size: 18px;
    }

    .school-quick-card h4 {
        font-size: 13px;
    }

    .school-quick-card p {
        font-size: 11px;
    }

    .school-quick-link {
        font-size: 14px;
    }
}
/*==================================================
  END SCHOOL QUICK ACCESS
==================================================*/

/*=========================================================
  EVENTS SECTION
=========================================================*/
/* =========================================================
   SCHOOL EVENTS SECTION
   All classes are uniquely prefixed with school-events-
========================================================= */

.school-events-section {
    width: 100%;
    padding: 30px 0 35px;
    background: #f6fbf8;
    position: relative;
    overflow: hidden;
}

.school-events-wrapper {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

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

.school-events-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.school-events-title {
    margin: 0;
    padding: 0;
    color: #143b37;
    font-size: 36px;
    line-height: 1.2;
    font-weight: 600;
}

/* =========================================================
   VIEW ALL BUTTON
========================================================= */

.school-events-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-height: 44px;
    padding: 8px 16px 8px 20px;

    background: #0b6b45;
    color: #ffffff !important;

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

    font-size: 14px;
    font-weight: 600;
    line-height: 1;

    transition:
        background-color .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}

.school-events-view-btn i {
    width: 28px;
    height: 28px;

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

    background: #ffffff;
    color: #0b6b45;

    border-radius: 50%;

    font-size: 12px;

    transition: transform .3s ease;
}

.school-events-view-btn:hover {
    background: #084f34;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 7px 18px rgba(11, 107, 69, .18);
}

.school-events-view-btn:hover i {
    transform: translateX(3px);
}

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

.school-events-carousel-wrap {
    width: 100%;
    position: relative;
}

/* =========================================================
   OWL CAROUSEL
========================================================= */

.school-events-slider {
    width: 100%;
}

.school-events-slider .owl-stage {
    display: flex;
    align-items: stretch;
}

.school-events-slider .owl-item {
    display: flex;
    height: auto;
}

.school-events-slider .owl-item > .school-events-item {
    width: 100%;
    height: 100%;
    display: flex;
}

.school-events-slider .owl-stage-outer {
    padding: 8px 5px 18px;
    margin: 0 -5px;
}

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

.school-events-card {
    width: 100%;
    height: 100%;

    /* min-height: 500px; */

    display: flex;
    flex-direction: column;

    background: #ffffff;

    border: 1px solid #e8ecea;
    border-radius: 18px;

    overflow: hidden;

    box-shadow: 0 8px 24px rgba(0, 0, 0, .06);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.school-events-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 16px 35px rgba(0, 0, 0, .11);
}

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

.school-events-image {
    width: 100%;
    height: 270px;

    flex-shrink: 0;

    position: relative;
    overflow: hidden;

    background: #eeeeee;
}

.school-events-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform .5s ease;
}

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

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

.school-events-content {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
}

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

.school-events-card-title {
    margin: 0 0 12px;
    color: #252525;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    min-height: 56px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

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

.school-events-date {
    margin: 0;

    color: #777777;

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

    line-height: 1.5;

    min-height: 21px;
}

/* =========================================================
   ACTION
========================================================= */

.school-events-action {
    margin-top: auto;
    padding-top: 18px;

    min-height: 58px;

    display: flex;
    align-items: flex-end;
}

/* =========================================================
   MORE DETAILS BUTTON
========================================================= */

.school-events-btn {
    appearance: none;
    -webkit-appearance: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-height: 42px;

    padding: 9px 18px;

    border: 0;
    border-radius: 30px;

    background: #0b6b45;
    color: #ffffff;

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;

    cursor: pointer;

    text-decoration: none;

    transition:
        background-color .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}

.school-events-btn i {
    font-size: 11px;

    transition: transform .3s ease;
}

.school-events-btn:hover {
    background: #084f34;
    color: #ffffff;

    transform: translateY(-2px);

    box-shadow: 0 7px 16px rgba(11, 107, 69, .18);
}

.school-events-btn:hover i {
    transform: translateX(4px);
}

/* =========================================================
   EMPTY / ERROR
========================================================= */

.school-events-empty {
    width: 100%;
    min-height: 250px;

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

    background: #ffffff;

    border: 1px solid #e8ecea;
    border-radius: 15px;

    color: #666666;

    text-align: center;
}

.school-events-empty p {
    margin: 0;

    font-size: 15px;
}

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

.school-events-slider .owl-nav {
    margin: 0;
}

.school-events-slider .owl-prev,
.school-events-slider .owl-next {
    position: absolute;

    top: 50%;

    width: 48px;
    height: 48px;

    margin: 0 !important;

    transform: translateY(-50%);

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

    background: #ffffff !important;

    color: #333333 !important;

    border: 0 !important;
    border-radius: 50% !important;

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

    z-index: 20;

    transition:
        background-color .3s ease,
        color .3s ease,
        transform .3s ease;
}

.school-events-slider .owl-prev {
    left: -18px;
}

.school-events-slider .owl-next {
    right: -18px;
}

.school-events-slider .owl-prev i,
.school-events-slider .owl-next i {
    font-size: 16px;
}

.school-events-slider .owl-prev:hover,
.school-events-slider .owl-next:hover {
    background: #0b6b45 !important;
    color: #ffffff !important;
}

.school-events-slider .owl-prev:hover {
    transform: translateY(-50%) translateX(-2px);
}

.school-events-slider .owl-next:hover {
    transform: translateY(-50%) translateX(2px);
}

/* =========================================================
   LARGE DESKTOP
   1200px - 1399px
========================================================= */

@media (max-width: 1399px) {

    .school-events-section {
        padding: 28px 0 32px;
    }

    .school-events-wrapper {
        max-width: 1320px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .school-events-title {
        font-size: 34px;
    }

    .school-events-header {
        margin-bottom: 20px;
    }

    .school-events-card {
        min-height: 436px;
    }

    .school-events-image {
        height: 255px;
    }

    .school-events-content {
        padding: 19px;
    }

    .school-events-card-title {
        font-size: 19px;
    }

    .school-events-slider .owl-prev {
        left: -15px;
    }

    .school-events-slider .owl-next {
        right: -15px;
    }
}

/* =========================================================
   TABLET
   992px - 1199px
========================================================= */

@media (max-width: 1199px) {

    .school-events-section {
        padding: 26px 0 30px;
    }

    .school-events-wrapper {
        padding-left: 18px;
        padding-right: 18px;
    }

    .school-events-title {
        font-size: 32px;
    }

    .school-events-card {
        min-height: 405px;
        border-radius: 16px;
    }

    .school-events-image {
        height: 235px;
    }

    .school-events-content {
        padding: 18px;
    }

    .school-events-card-title {
        font-size: 18px;
        min-height: 51px;
    }

    .school-events-date {
        font-size: 14px;
    }

    .school-events-btn {
        min-height: 40px;
        padding: 8px 16px;
        font-size: 13px;
    }

    .school-events-slider .owl-prev,
    .school-events-slider .owl-next {
        width: 44px;
        height: 44px;
    }

    .school-events-slider .owl-prev {
        left: -12px;
    }

    .school-events-slider .owl-next {
        right: -12px;
    }
}

/* =========================================================
   MOBILE TABLET
   768px - 991px
========================================================= */

@media (max-width: 991px) {

    .school-events-section {
        padding: 24px 0 28px;
    }

    .school-events-wrapper {
        padding-left: 16px;
        padding-right: 16px;
    }

    .school-events-header {
        margin-bottom: 18px;
    }

    .school-events-title {
        font-size: 30px;
    }

    .school-events-view-btn {
        min-height: 40px;
        padding: 7px 13px 7px 16px;
        font-size: 13px;
    }

    .school-events-view-btn i {
        width: 25px;
        height: 25px;
        font-size: 11px;
    }

    .school-events-card {
        min-height: 400px;
    }

    .school-events-image {
        height: 225px;
    }

    .school-events-slider .owl-prev,
    .school-events-slider .owl-next {
        width: 42px;
        height: 42px;
    }

    .school-events-slider .owl-prev {
        left: -8px;
    }

    .school-events-slider .owl-next {
        right: -8px;
    }
}

/* =========================================================
   MOBILE
   576px - 767px
========================================================= */

@media (max-width: 767px) {

    .school-events-section {
        padding: 22px 0 25px;
    }

    .school-events-wrapper {
        padding-left: 14px;
        padding-right: 14px;
    }

    .school-events-header {
        gap: 12px;
        margin-bottom: 16px;
    }

    .school-events-title {
        font-size: 27px;
    }

    .school-events-view-btn {
        min-height: 38px;
        padding: 6px 10px 6px 13px;
        font-size: 12px;
    }

    .school-events-view-btn i {
        width: 24px;
        height: 24px;
        font-size: 10px;
    }

    .school-events-card {
        min-height: 389px;
        border-radius: 15px;
    }

    .school-events-image {
        height: 215px;
    }

    .school-events-content {
        padding: 17px;
    }

    .school-events-card-title {
        font-size: 18px;
        line-height: 1.35;
        min-height: 49px;
        margin-bottom: 10px;
    }

    .school-events-date {
        font-size: 13px;
    }

    .school-events-action {
        padding-top: 16px;
    }

    .school-events-btn {
        min-height: 39px;
        padding: 8px 15px;
        font-size: 13px;
    }

    .school-events-slider .owl-stage-outer {
        padding-left: 2px;
        padding-right: 2px;
    }

    .school-events-slider .owl-prev,
    .school-events-slider .owl-next {
        display: none !important;
    }
}

/* =========================================================
   SMALL MOBILE
   Below 576px
========================================================= */

@media (max-width: 575px) {

    .school-events-section {
        padding: 20px 0 23px;
    }

    .school-events-wrapper {
        padding-left: 12px;
        padding-right: 12px;
    }

    .school-events-header {
        align-items: center;
        margin-bottom: 15px;
    }

    .school-events-title {
        font-size: 25px;
    }

    .school-events-view-btn {
        min-height: 36px;
        padding: 5px 9px 5px 12px;
        gap: 6px;
        font-size: 11px;
    }

    .school-events-view-btn i {
        width: 22px;
        height: 22px;
    }

    .school-events-card {
        min-height: 368px;
        border-radius: 14px;
    }

    .school-events-image {
        height: 200px;
    }

    .school-events-content {
        padding: 15px;
    }

    .school-events-card-title {
        font-size: 17px;
        min-height: 46px;
    }

    .school-events-date {
        font-size: 13px;
    }

    .school-events-action {
        min-height: 53px;
        padding-top: 14px;
    }

    .school-events-btn {
        min-height: 38px;
        padding: 8px 14px;
        font-size: 12px;
    }
}

/* =========================================================
   VERY SMALL
   Below 380px
========================================================= */

@media (max-width: 380px) {

    .school-events-wrapper {
        padding-left: 10px;
        padding-right: 10px;
    }

    .school-events-title {
        font-size: 23px;
    }

    .school-events-view-btn span {
        display: none;
    }

    .school-events-view-btn {
        width: 36px;
        height: 36px;
        padding: 0;
    }

    .school-events-view-btn i {
        width: 25px;
        height: 25px;
    }

    .school-events-card {
        min-height: 348px;
    }

    .school-events-image {
        height: 185px;
    }

    .school-events-content {
        padding: 14px;
    }

    .school-events-card-title {
        font-size: 16px;
        min-height: 43px;
    }

    .school-events-date {
        font-size: 12px;
    }
}

/*==================================================*
 * END SCHOOL EVENTS SECTION
 *==================================================*/

 /* =========================================================
   SCHOOL FACILITIES SECTION
   ========================================================= */

.school-facilities-section {
    width: 100%;
    padding: 30px 0 35px;
    position: relative;
    overflow: hidden;
    background: #fff;
}

.school-facilities-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    /* padding: 0 20px; */
    padding-left: 20px;
    padding-right: 20px;
}


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

/* .school-facilities-heading {
    width: 100%;
    text-align: center;
    margin-bottom: 22px;
} */

.school-facilities-heading {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 22px;
}


.school-facilities-heading::before,
.school-facilities-heading::after {
    content: "";
    width: 45px;
    height: 2px;
    background: #d9d9d9;
    display: block;
    flex-shrink: 0;
}

/* .school-facilities-title {
    margin: 0;
    color: #163d36;
    font-size: 34px;
    line-height: 1.2;
    font-weight: 600;
} */

.school-facilities-title {
    margin: 0;
    color: #163d36;
    font-size: 34px;
    line-height: 1.2;
    font-weight: 600;
}

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

.school-facilities-slider {
    position: relative;
    width: 100%;
}

.school-facilities-slider .owl-stage {
    display: flex;
}

.school-facilities-slider .owl-item {
    display: flex;
    height: auto;
}

.school-facilities-slider .item {
    width: 100%;
    height: 100%;
    padding: 8px 10px 12px;
    display: flex;
}


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

.school-facilities-card {
    width: 100%;
    height: 100%;

    background: #fff;
    border-radius: 15px;
    overflow: hidden;

    border: 1px solid #eeeeee;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .07);

    display: flex;
    flex-direction: column;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.school-facilities-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, .12);
}


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

.school-facilities-image {
    width: 100%;
    height: 210px;
    flex: 0 0 210px;

    overflow: hidden;
    background: #f5f5f5;
}

.school-facilities-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transition: transform .45s ease;
}

.school-facilities-card:hover
.school-facilities-image img {
    transform: scale(1.06);
}


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

.school-facilities-content {
    min-height: 66px;

    padding: 14px 16px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    text-align: center;

    color: #fff;
    background: linear-gradient(
        90deg,
        #0b6b45,
        #18864c
    );
}

.school-facilities-content h5 {
    margin: 0;

    color: #fff;

    font-size: 16px;
    line-height: 1.35;
    font-weight: 600;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}


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

.school-facilities-slider .owl-nav {
    position: absolute;

    top: 50%;
    left: 0;

    width: 100%;

    margin: 0;
    transform: translateY(-50%);

    pointer-events: none;
}

.school-facilities-slider .owl-prev,
.school-facilities-slider .owl-next {
    position: absolute;

    width: 48px;
    height: 48px;

    margin: 0 !important;
    padding: 0 !important;

    border: 0;
    border-radius: 50% !important;

    background: #fff !important;
    color: #0b6b45 !important;

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

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

    pointer-events: auto;

    transition: all .3s ease;
}

.school-facilities-slider .owl-prev {
    left: -4px;
}

.school-facilities-slider .owl-next {
    right: -4px;
}

.school-facilities-slider .owl-prev:hover,
.school-facilities-slider .owl-next:hover {
    background: #0b6b45 !important;
    color: #fff !important;
}

.school-facilities-slider .owl-prev i,
.school-facilities-slider .owl-next i {
    font-size: 16px;
}


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

.school-facilities-slider .owl-dots {
    margin-top: 18px;
}

.school-facilities-slider .owl-dot span {
    width: 9px;
    height: 9px;
}

.school-facilities-slider .owl-dot.active span {
    background: #0b6b45 !important;
}


/* =========================================================
   EMPTY / ERROR
   ========================================================= */

.school-facilities-empty {
    width: 100%;
    min-height: 180px;

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

    border: 1px solid #eeeeee;
    border-radius: 15px;
    background: #fff;
}

.school-facilities-empty p {
    margin: 0;
    color: #777;
    font-size: 14px;
}


/* =========================================================
   1200px - 1399px
   ========================================================= */

    @media (max-width: 1399px) {

        .school-facilities-container {
            padding-left: 18px;
            padding-right: 18px;
        }   

        .school-facilities-heading {
            gap: 16px;
        }

        .school-facilities-heading::before,
        .school-facilities-heading::after {
            width: 45px;
            height: 1px;
            background: #cfcfcf;
        }

        .school-facilities-title {
            font-size: 32px;
        }

        .school-facilities-image {
            height: 200px;
            flex-basis: 200px;
        }

        .school-facilities-content {
            min-height: 64px;
            padding: 13px 14px;
        }

        .school-facilities-content h5 {
            font-size: 15px;
        }
    }


/* =========================================================
   992px - 1199px
   ========================================================= */

@media (max-width: 1199px) {

    .school-facilities-section {
        padding: 28px 0 32px;
    }

    .school-facilities-heading {
        margin-bottom: 20px;
        gap: 22px;
    }

    .school-facilities-heading::before,
    .school-facilities-heading::after {
        width: 55px;
        height: 1px;
        background: #cfcfcf;
    }

    .school-facilities-title {
        font-size: 30px;
    }

    .school-facilities-image {
        height: 195px;
        flex-basis: 195px;
    }

    .school-facilities-content {
        min-height: 62px;
    }

    .school-facilities-content h5 {
        font-size: 15px;
    }

    .school-facilities-slider .owl-prev,
    .school-facilities-slider .owl-next {
        width: 44px;
        height: 44px;
    }
}


/* =========================================================
   768px - 991px
   ========================================================= */

@media (max-width: 991px) {

    .school-facilities-section {
        padding: 25px 0 30px;
    }

    .school-facilities-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .school-facilities-title {
        font-size: 28px;
    }

    .school-facilities-heading {
        margin-bottom: 18px;
        gap: 20px;
    }

    .school-facilities-heading::before,
    .school-facilities-heading::after {
        width: 50px;
        height: 1px;
        background: #cfcfcf;
    }

    .school-facilities-image {
        height: 200px;
        flex-basis: 200px;
    }

    .school-facilities-content {
        min-height: 62px;
        padding: 12px 14px;
    }

    .school-facilities-content h5 {
        font-size: 15px;
    }

    .school-facilities-slider .owl-prev,
    .school-facilities-slider .owl-next {
        display: none !important;
    }
}


/* =========================================================
   576px - 767px
   ========================================================= */

@media (max-width: 767px) {

    .school-facilities-section {
        padding: 22px 0 28px;
    }

    .school-facilities-container {
        padding-left: 14px;
        padding-right: 14px;
    }

   
    .school-facilities-heading {
        margin-bottom: 16px;
         gap: 16px;
    }

       .school-facilities-heading::before,
    .school-facilities-heading::after {
        width: 40px;
        height: 1px;
        background: #cfcfcf;
    }

     .school-facilities-title {
        font-size: 26px;
    }


    .school-facilities-image {
        height: 190px;
        flex-basis: 190px;
    }

    .school-facilities-content {
        min-height: 60px;
        padding: 11px 12px;
    }

    .school-facilities-content h5 {
        font-size: 14px;
    }
}


/* =========================================================
   BELOW 576px
   ========================================================= */

@media (max-width: 575px) {

    .school-facilities-section {
        padding: 20px 0 25px;
    }

    .school-facilities-container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .school-facilities-heading {
        margin-bottom: 16px;
        gap: 12px;
    }

     .school-facilities-heading::before,
    .school-facilities-heading::after {
        width: 30px;
        height: 1px;
        background: #cfcfcf;
    }

    .school-facilities-title {
        font-size: 24px;
    }

    .school-facilities-image {
        height: 185px;
        flex-basis: 185px;
    }

    .school-facilities-content {
        min-height: 58px;
        padding: 10px 12px;
    }

    .school-facilities-content h5 {
        font-size: 14px;
        line-height: 1.3;
    }
}


/* =========================================================
   BELOW 380px
   ========================================================= */

@media (max-width: 380px) {

    .school-facilities-heading {
        margin-bottom: 14px;
        gap: 10px;
    }

    .school-facilities-heading::before,
    .school-facilities-heading::after {
        width: 25px;
        height: 1px;
        background: #cfcfcf;
    }

    .school-facilities-title {
        font-size: 22px;
    }

    .school-facilities-image {
        height: 170px;
        flex-basis: 170px;
    }

    .school-facilities-content {
        min-height: 56px;
    }

    .school-facilities-content h5 {
        font-size: 13px;
    }
}

/* =========================================================
  END SCHOOL FACILITIES SECTION
========================================================= */


/* =========================================================
   SCHOOL GALLERY SECTION
   All classes are unique to avoid CSS conflicts
========================================================= */

.school-gallery-section {
    width: 100%;
    padding: 30px 0;
    background: linear-gradient(
        180deg,
        #f8fff8 0%,
        #f4fbf7 45%,
        #ffffff 100%
    );
    position: relative;
    overflow: hidden;
}


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

.school-gallery-section::before {
    content: "";
    position: absolute;

    width: 260px;
    height: 260px;

    top: -130px;
    left: -130px;

    border-radius: 50%;

    background: rgba(29, 122, 74, 0.07);

    filter: blur(70px);

    pointer-events: none;
}

.school-gallery-section::after {
    content: "";
    position: absolute;

    width: 260px;
    height: 260px;

    right: -130px;
    bottom: -130px;

    border-radius: 50%;

    background: rgba(29, 122, 74, 0.07);

    filter: blur(70px);

    pointer-events: none;
}


/* =========================================================
   MAIN CONTAINER
   Maximum width = 1400px
========================================================= */

.school-gallery-container {
    width: calc(100% - 30px);
    max-width: 1400px;
    /* padding: 35px; */
    padding-left: 20px;
    padding-right: 20px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}


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

.school-gallery-heading {
    display: flex;

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

    gap: 16px;

    margin-bottom: 28px;

    text-align: center;
}

.school-gallery-heading span {
    display: block;

    width: 45px;
    height: 2px;

    background: #d3d8d5;

    flex-shrink: 0;
}

.school-gallery-heading h2 {
    margin: 0;

    font-size: 36px;

    line-height: 1.2;

    font-weight: 600;

    color: #163b35;
}


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

.school-gallery-grid {
    width: 100%;

    display: grid;

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

    gap: 18px;
}


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

.school-gallery-item {
    width: 100%;

    min-width: 0;
}


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

.school-gallery-card {
    width: 100%;

    position: relative;

    overflow: hidden;

    border-radius: 12px;

    background: #ffffff;

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

    cursor: pointer;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.school-gallery-card:hover {
    transform: translateY(-5px);

    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14);
}


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

.school-gallery-image {
    width: 100%;

    height: 220px;

    overflow: hidden;

    background: #eeeeee;
}


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

.school-gallery-image img {
    display: block;

    width: 100%;
    height: 100%;

    max-width: 100%;

    object-fit: cover;

    object-position: center;

    transition: transform 0.45s ease;
}

.school-gallery-card:hover
.school-gallery-image img {
    transform: scale(1.07);
}


/* =========================================================
   OPTIONAL IMAGE OVERLAY
========================================================= */

.school-gallery-overlay {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    padding: 35px 14px 14px;

    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.65),
        rgba(0, 0, 0, 0)
    );

    opacity: 0;

    transition: 0.3s ease;
}

.school-gallery-card:hover
.school-gallery-overlay {
    opacity: 1;
}


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

.school-gallery-item-title {
    margin: 0;

    color: #ffffff;

    font-size: 15px;

    font-weight: 600;

    line-height: 1.4;
}


/* =========================================================
   VIEW MORE
========================================================= */

.school-gallery-footer {
    display: flex;

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

    margin-top: 26px;
}

.school-gallery-view-btn {
    display: inline-flex;

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

    gap: 10px;

    min-height: 44px;

    padding: 7px 10px 7px 22px;

    border-radius: 40px;

    background: #0c6b44;

    color: #ffffff;

    text-decoration: none;

    font-size: 15px;

    font-weight: 600;

    line-height: 1;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.school-gallery-view-btn:hover {
    background: #084b30;

    color: #ffffff;

    transform: translateY(-2px);
}

.school-gallery-view-btn i {
    width: 30px;
    height: 30px;

    display: flex;

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

    border-radius: 50%;

    background: #ffffff;

    color: #0c6b44;

    font-size: 13px;
}


/* =========================================================
   1200px - 1399px
========================================================= */

@media (max-width: 1399px) {

    .school-gallery-container {
        max-width: 1200px;
    }

    .school-gallery-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));

        gap: 16px;
    }

    .school-gallery-image {
        height: 205px;
    }

}


/* =========================================================
   992px - 1199px
========================================================= */

@media (max-width: 1199px) {

    .school-gallery-container {
        max-width: 960px;
    }

    .school-gallery-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));

        gap: 18px;
    }

    .school-gallery-image {
        height: 200px;
    }

    .school-gallery-heading h2 {
        font-size: 32px;
    }

}


/* =========================================================
   768px - 991px
========================================================= */

@media (max-width: 991px) {

    .school-gallery-section {
        padding: 28px 0;
    }

    .school-gallery-container {
        width: calc(100% - 30px);

        max-width: 720px;
    }

    .school-gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));

        gap: 16px;
    }

    .school-gallery-image {
        height: 190px;
    }

    .school-gallery-heading {
        gap: 12px;

        margin-bottom: 24px;
    }

    .school-gallery-heading span {
        width: 38px;
    }

    .school-gallery-heading h2 {
        font-size: 30px;
    }

}


/* =========================================================
   576px - 767px
========================================================= */

@media (max-width: 767px) {

    .school-gallery-section {
        padding: 26px 0;
    }

    .school-gallery-container {
        width: calc(100% - 24px);

        max-width: 540px;
    }

    .school-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 14px;
    }

    .school-gallery-image {
        height: 180px;
    }

    .school-gallery-heading {
        margin-bottom: 22px;
    }

    .school-gallery-heading h2 {
        font-size: 28px;
    }

    .school-gallery-heading span {
        width: 32px;
    }

}


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

@media (max-width: 575px) {

    .school-gallery-section {
        padding: 25px 0;
    }

    .school-gallery-container {
        width: calc(100% - 20px);
    }

    .school-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 12px;
    }

    .school-gallery-image {
        height: 145px;
    }

    .school-gallery-heading {
        gap: 10px;

        margin-bottom: 20px;
    }

    .school-gallery-heading span {
        width: 25px;
    }

    .school-gallery-heading h2 {
        font-size: 25px;
    }

    .school-gallery-footer {
        margin-top: 22px;
    }

    .school-gallery-view-btn {
        min-height: 42px;

        padding-left: 18px;

        font-size: 14px;
    }

    .school-gallery-view-btn i {
        width: 28px;
        height: 28px;

        font-size: 12px;
    }

}


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

@media (max-width: 380px) {

    .school-gallery-image {
        height: 130px;
    }

    .school-gallery-grid {
        gap: 10px;
    }

    .school-gallery-heading h2 {
        font-size: 23px;
    }

}

/* =========================================================
   END SCHOOL GALLERY SECTION
========================================================= */


/* =========================================================
   SCHOOL WHAT'S NEW SECTION
   All classes are unique to avoid conflicts
========================================================= */

.school-whatsnew-section {

    width: 100%;

    padding: 30px 0;

    background: linear-gradient(
        180deg,
        #f8fcfb 0%,
        #f4faf7 50%,
        #ffffff 100%
    );

    position: relative;

    overflow: hidden;
}


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

.school-whatsnew-section::before {

    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    top: -180px;
    left: -140px;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(234,247,241,.9) 0%,
        rgba(234,247,241,0) 70%
    );

    pointer-events: none;
}


.school-whatsnew-section::after {

    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    right: -180px;
    bottom: -180px;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(238,249,244,.9) 0%,
        rgba(238,249,244,0) 70%
    );

    pointer-events: none;
}


/* =========================================================
   CONTAINER
   Maximum 1400px
========================================================= */

.school-whatsnew-container {

    width: calc(100% - 30px);
    padding-left: 70px;
    padding-right: 70px;
    max-width: 1400px;

    margin: 0 auto;

    position: relative;

    z-index: 2;
}


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

.school-whatsnew-heading {

    /* text-align: center;

    margin-bottom: 26px; */

    width: 100%;
    text-align: center;
    margin-bottom: 26px;
}

.school-whatsnew-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.school-whatsnew-title-row .whats-heading-line {
    display: block;
    width: 45px;
    height: 1px;
    background: #cfcfcf;
    flex-shrink: 0;
}

.school-whatsnew-title-row h2 {
    margin: 0;
    color: #173c35;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.2;
}

.school-whatsnew-heading h2 {
    margin: 0;
    color: #173c35;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.2;
}


.school-whatsnew-heading p {
    margin: 8px 0 0;
    color: #666;
    font-size: 15px;
    line-height: 1.5;
}

/* =========================================================
   NEWS LIST
========================================================= */
.school-whatsnew-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}


/* =========================================================
   NEWS ITEM
========================================================= */
.school-whatsnew-item {
    width: 100%;
    min-height: 76px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px 10px 20px;
    background: #ffffff;
    border: 1px solid #edf1ef;
    border-radius: 14px;
    text-decoration: none;
    box-shadow: 0 7px 22px rgba(0,0,0,.06);
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
}

.school-whatsnew-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 13px 30px rgba(0,0,0,.10);
}


/* =========================================================
   LEFT COLOR LINE
========================================================= */

.school-whatsnew-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: #198754;
}


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

.school-whatsnew-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #edf8f2;
    color: #198754;
    font-size: 19px;
}


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

.school-whatsnew-content {
    flex: 1;
    min-width: 0;
}

.school-whatsnew-title {
    margin: 0 0 7px;
    color: #1f2d3d;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


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

.school-whatsnew-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 20px;
    background: #e7f7ee;
    color: #198754;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

/* =========================================================
   DATE
========================================================= */
.school-whatsnew-date {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 145px;
    color: #777;
    font-size: 13px;
    white-space: nowrap;
}

.school-whatsnew-date i {
    color: #198754;
    font-size: 14px;
}

/* =========================================================
   ARROW
========================================================= */

.school-whatsnew-arrow {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #198754;
    color: #ffffff;
    font-size: 15px;
    transition: transform .3s ease;
}

.school-whatsnew-item:hover
.school-whatsnew-arrow {
    transform: translateX(4px);
}


/* =========================================================
   COLOR VARIATIONS
========================================================= */

.school-whatsnew-item[data-color="green"]::before {
    background: #198754;
}

.school-whatsnew-item[data-color="green"]
.school-whatsnew-icon {

    background: #edf8f2;
    color: #198754;
}

.school-whatsnew-item[data-color="green"]
.school-whatsnew-badge {

    background: #e7f7ee;
    color: #198754;
}


/* ORANGE */

.school-whatsnew-item[data-color="orange"]::before {
    background: #f39c12;
}

.school-whatsnew-item[data-color="orange"]
.school-whatsnew-icon {

    background: #fff5e7;
    color: #f39c12;
}

.school-whatsnew-item[data-color="orange"]
.school-whatsnew-badge {

    background: #fff5e7;
    color: #f39c12;
}


/* BLUE */

.school-whatsnew-item[data-color="blue"]::before {
    background: #0d6efd;
}

.school-whatsnew-item[data-color="blue"]
.school-whatsnew-icon {

    background: #e9f3ff;
    color: #0d6efd;
}

.school-whatsnew-item[data-color="blue"]
.school-whatsnew-badge {

    background: #e9f3ff;
    color: #0d6efd;
}


/* PURPLE */

.school-whatsnew-item[data-color="purple"]::before {
    background: #7b4ce2;
}

.school-whatsnew-item[data-color="purple"]
.school-whatsnew-icon {

    background: #f1ebff;
    color: #7b4ce2;
}

.school-whatsnew-item[data-color="purple"]
.school-whatsnew-badge {

    background: #f1ebff;
    color: #7b4ce2;
}


/* PINK */

.school-whatsnew-item[data-color="pink"]::before {
    background: #ff4f87;
}

.school-whatsnew-item[data-color="pink"]
.school-whatsnew-icon {

    background: #ffeef4;
    color: #ff4f87;
}

.school-whatsnew-item[data-color="pink"]
.school-whatsnew-badge {

    background: #ffeef4;
    color: #ff4f87;
}


/* =========================================================
   VIEW MORE
========================================================= */

.school-whatsnew-footer {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}


.school-whatsnew-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 42px;

    padding: 6px 10px 6px 20px;

    border-radius: 40px;

    background: #0c6b44;

    color: #ffffff;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    line-height: 1;

    transition:
        background .3s ease,
        transform .3s ease;
}


.school-whatsnew-view-btn:hover {

    background: #084b30;

    color: #ffffff;

    transform: translateY(-2px);
}


.school-whatsnew-view-btn i {

    width: 29px;
    height: 29px;

    display: flex;

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

    border-radius: 50%;

    background: #ffffff;

    color: #198754;

    font-size: 12px;
}


/* =========================================================
   EMPTY / LOADING
========================================================= */

.school-whatsnew-empty {

    width: 100%;

    padding: 30px 15px;

    text-align: center;

    color: #666;

    background: #ffffff;

    border-radius: 14px;

    border: 1px solid #edf1ef;
}


/* =========================================================
   1200px - 1399px
========================================================= */

@media (max-width: 1399px) {

    .school-whatsnew-container {
        max-width: 1200px;
    }

    .school-whatsnew-list {
        gap: 13px;
    }

    .school-whatsnew-title-row {
        gap: 24px;
    }

    .school-whatsnew-title-row .whats-heading-line {
        width: 60px;
        height: 1px;
    }

    .school-whatsnew-title-row h2 {
        font-size: 32px;
    }

}


/* =========================================================
   TABLET
   992px - 1199px
========================================================= */

@media (max-width: 1199px) {

    .school-whatsnew-container {
        max-width: 960px;
    }

    .school-whatsnew-item {
        padding: 10px 15px 10px 18px;
    }

    .school-whatsnew-date {
        min-width: 125px;
    }

    /* Heading */
    .school-whatsnew-title-row {
        gap: 22px;
    }

    .school-whatsnew-title-row .whats-heading-line {
        width: 55px;
        height: 1px;
    }

    .school-whatsnew-title-row h2 {
        font-size: 30px;
    }

}


/* =========================================================
   TABLET
   768px - 991px
========================================================= */

/* =========================================================
   TABLET
   768px - 991px
========================================================= */

@media (max-width: 991px) {

    .school-whatsnew-section {
        padding: 28px 0;
    }

    .school-whatsnew-container {
        width: calc(100% - 30px);
        max-width: 720px;
    }

    .school-whatsnew-heading {
        margin-bottom: 23px;
    }

    /* Heading with lines */
    .school-whatsnew-title-row {
        gap: 20px;
    }

    .school-whatsnew-title-row .whats-heading-line {
        width: 50px;
        height: 1px;
        background: #cfcfcf;
    }

    .school-whatsnew-title-row h2 {
        font-size: 28px;
    }

    .school-whatsnew-item {
        min-height: 72px;
        gap: 13px;
        padding: 9px 13px 9px 17px;
    }

    .school-whatsnew-icon {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        font-size: 17px;
    }

    .school-whatsnew-title {
        font-size: 15px;
    }

    .school-whatsnew-date {
        min-width: 110px;
        font-size: 12px;
    }

    .school-whatsnew-arrow {
        width: 37px;
        height: 37px;
        flex-basis: 37px;
        font-size: 14px;
    }
}


/* =========================================================
   MOBILE
   576px - 767px
========================================================= */

@media (max-width: 767px) {

    .school-whatsnew-section {
        padding: 26px 0;
    }

    .school-whatsnew-container {
        width: calc(100% - 24px);
        max-width: 540px;
    }

    /* Heading */
    .school-whatsnew-heading {
        margin-bottom: 20px;
    }

    .school-whatsnew-title-row {
        gap: 16px;
    }

    .school-whatsnew-title-row .whats-heading-line {
        width: 40px;
        height: 1px;
        background: #cfcfcf;
    }

    .school-whatsnew-title-row h2 {
        font-size: 26px;
    }

    .school-whatsnew-item {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        column-gap: 12px;
        row-gap: 8px;
        padding: 12px 13px 12px 16px;
    }

    .school-whatsnew-icon {
        grid-row: span 2;
    }

    .school-whatsnew-content {
        width: 100%;
    }

    .school-whatsnew-title {
        font-size: 15px;
        margin-bottom: 5px;
    }

    .school-whatsnew-date {
        min-width: 0;
        grid-column: 2;
        font-size: 12px;
    }

    .school-whatsnew-arrow {
        display: none;
    }

    .school-whatsnew-list {
        gap: 11px;
    }
}

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

@media (max-width: 575px) {

    .school-whatsnew-section {
        padding: 24px 0;
    }

    .school-whatsnew-container {
        width: calc(100% - 20px);
    }

    .school-whatsnew-heading {
        margin-bottom: 20px;
    }

    /* Heading */
    .school-whatsnew-title-row {
        gap: 12px;
    }

    .school-whatsnew-title-row .whats-heading-line {
        width: 30px;
        height: 1px;
        background: #cfcfcf;
    }

    .school-whatsnew-title-row h2 {
        font-size: 24px;
    }

    .school-whatsnew-item {
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: 10px;
        padding: 11px 11px 11px 14px;
        border-radius: 12px;
    }

    .school-whatsnew-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        font-size: 16px;
    }

    .school-whatsnew-title {
        font-size: 14px;
    }

    .school-whatsnew-badge {
        font-size: 10px;
        padding: 5px 8px;
    }

    .school-whatsnew-date {
        font-size: 11px;
    }

    .school-whatsnew-view-btn {
        min-height: 40px;
        padding-left: 17px;
        font-size: 13px;
    }

    .school-whatsnew-view-btn i {
        width: 27px;
        height: 27px;
    }
}
/* =========================================================
  END SCHOOL WHAT'S NEW SECTION
  
========================================================= */
/* =========================================================
   COMMITTEE & TEACHER STAFF
   Unique Prefix: tg-staff-
   ========================================================= */

.tg-staff-section {
    position: relative;
    width: 100%;
    padding: 32px 0;
    background: #ffffff;
    overflow: hidden;
}

/* Background Glow */
.tg-staff-section::before {
    content: "";
    position: absolute;

    width: 280px;
    height: 280px;

    left: -150px;
    top: -130px;

    background: rgba(30, 120, 70, 0.07);

    border-radius: 50%;

    filter: blur(70px);

    pointer-events: none;
}

.tg-staff-section::after {
    content: "";
    position: absolute;

    width: 280px;
    height: 280px;

    right: -150px;
    bottom: -130px;

    background: rgba(30, 120, 70, 0.06);

    border-radius: 50%;

    filter: blur(70px);

    pointer-events: none;
}


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

.tg-staff-container {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1400px;

    margin-left: auto;
    margin-right: auto;

    padding-left: 15px;
    padding-right: 15px;
}


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

.tg-staff-heading {
    width: 100%;

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

    gap: 14px;

    margin-bottom: 28px;
}

.tg-staff-title {
    margin: 0;

    color: #173b35;

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

    line-height: 1.2;

    text-align: center;
}

.tg-staff-heading-line {
    display: block;

    width: 45px;
    height: 1px;

    flex: 0 0 45px;

    background: #d4d4d4;
}


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

.tg-staff-slider {
    position: relative;

    width: 100%;
    padding: 5px 0 10px;
}

.tg-staff-slider .owl-stage {
    display: flex;
}

.tg-staff-slider .owl-item {
    display: flex;
    height: auto;
}

.tg-staff-slider .owl-item > .tg-staff-slide {
    display: flex;
    width: 100%;
}


/* =========================================================
   SLIDE
   ========================================================= */

.tg-staff-slide {
    width: 100%;
    padding: 5px;
}


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

.tg-staff-card {
    width: 100%;
    height: 100%;

    min-height: 265px;

    padding: 24px 15px 20px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    text-align: center;

    background: #ffffff;

    border-radius: 16px;

    border: 1px solid #edf1ef;

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

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;

    box-sizing: border-box;
}

.tg-staff-card:hover {
    transform: translateY(-6px);

    border-color: rgba(25, 135, 84, 0.15);

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


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

.tg-staff-image {
    width: 125px;
    height: 125px;

    flex: 0 0 125px;

    margin: 0 auto 17px;

    overflow: hidden;

    border-radius: 50%;

    background: #f3f5f4;

    border: 4px solid #ffffff;

    box-shadow:
        0 0 0 2px #198754,
        0 8px 20px rgba(0, 0, 0, 0.10);
}

.tg-staff-image img {
    width: 100% !important;
    height: 100% !important;

    min-width: 100%;
    max-width: 100%;

    min-height: 100%;
    max-height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    border-radius: 50%;

    transition: transform 0.35s ease;
}

.tg-staff-card:hover .tg-staff-image img {
    transform: scale(1.06);
}


/* =========================================================
   STAFF INFORMATION
   ========================================================= */

.tg-staff-info {
    width: 100%;
}

.tg-staff-name {
    margin: 0;

    color: #222222;

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

    line-height: 1.35;

    word-break: break-word;
}

.tg-staff-designation {
    display: inline-flex;

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

    max-width: 100%;

    margin-top: 10px;

    padding: 6px 14px;

    background: #edf8f2;

    color: #198754;

    border-radius: 30px;

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

    line-height: 1.3;

    text-align: center;

    word-break: break-word;
}


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

.tg-staff-slider .owl-nav {
    margin: 0 !important;
}

.tg-staff-slider .owl-nav button {
    position: absolute;

    top: 50%;

    width: 42px !important;
    height: 42px !important;

    margin: 0 !important;
    padding: 0 !important;

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

    border-radius: 50% !important;

    background: #ffffff !important;

    box-shadow: 0 7px 22px rgba(0, 0, 0, 0.14);

    transform: translateY(-50%) !important;

    transition:
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;

    z-index: 20;
}

.tg-staff-slider .owl-nav .owl-prev {
    left: -18px;
}

.tg-staff-slider .owl-nav .owl-next {
    right: -18px;
}

.tg-staff-slider .owl-nav button i {
    color: #198754;

    font-size: 14px;

    line-height: 1;

    transition: color 0.3s ease;
}

.tg-staff-slider .owl-nav button:hover {
    background: #198754 !important;

    box-shadow: 0 9px 25px rgba(25, 135, 84, 0.25);

    transform: translateY(-50%) scale(1.05) !important;
}

.tg-staff-slider .owl-nav button:hover i {
    color: #ffffff;
}


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

.tg-staff-slider .owl-dots {
    display: none;
}


/* =========================================================
   EMPTY / ERROR
   ========================================================= */

.tg-staff-empty {
    width: 100%;

    padding: 35px 15px;

    text-align: center;

    color: #666666;

    font-size: 15px;
}

.tg-staff-empty i {
    display: block;

    margin-bottom: 10px;

    font-size: 30px;

    color: #198754;
}

.tg-staff-empty p {
    margin: 0;
}


/* =========================================================
   MAX WIDTH 1400
   ========================================================= */

@media (min-width: 1400px) {

    .tg-staff-container {
        max-width: 1400px;
    }

}


/* =========================================================
   1200 - 1399
   ========================================================= */

@media (max-width: 1399px) {

    .tg-staff-title {
        font-size: 34px;
    }

    .tg-staff-card {
        min-height: 260px;

        padding: 22px 14px 18px;
    }

    .tg-staff-image {
        width: 120px;
        height: 120px;

        flex-basis: 120px;
    }

    .tg-staff-name {
        font-size: 16px;
    }

}


/* =========================================================
   992 - 1199
   ========================================================= */

@media (max-width: 1199px) {

    .tg-staff-section {
        padding: 30px 0;
    }

    .tg-staff-heading {
        margin-bottom: 25px;
    }

    .tg-staff-title {
        font-size: 31px;
    }

    .tg-staff-card {
        min-height: 250px;

        padding: 20px 12px 17px;
    }

    .tg-staff-image {
        width: 115px;
        height: 115px;

        flex-basis: 115px;

        margin-bottom: 15px;
    }

    .tg-staff-slider .owl-nav .owl-prev {
        left: -10px;
    }

    .tg-staff-slider .owl-nav .owl-next {
        right: -10px;
    }

}


/* =========================================================
   768 - 991
   ========================================================= */

@media (max-width: 991px) {

    .tg-staff-section {
        padding: 28px 0;
    }

    .tg-staff-title {
        font-size: 29px;
    }

    .tg-staff-heading-line {
        width: 38px;
        flex-basis: 38px;
    }

    .tg-staff-heading {
        gap: 11px;
        margin-bottom: 23px;
    }

    .tg-staff-card {
        min-height: 245px;

        padding: 20px 12px 17px;
    }

    .tg-staff-image {
        width: 110px;
        height: 110px;

        flex-basis: 110px;
    }

    .tg-staff-slider .owl-nav button {
        width: 38px !important;
        height: 38px !important;
    }

    .tg-staff-slider .owl-nav .owl-prev {
        left: -7px;
    }

    .tg-staff-slider .owl-nav .owl-next {
        right: -7px;
    }

}


/* =========================================================
   576 - 767
   ========================================================= */

@media (max-width: 767px) {

    .tg-staff-section {
        padding: 25px 0;
    }

    .tg-staff-container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .tg-staff-title {
        font-size: 27px;
    }

    .tg-staff-heading-line {
        width: 30px;
        flex-basis: 30px;
    }

    .tg-staff-heading {
        gap: 9px;
        margin-bottom: 20px;
    }

    .tg-staff-card {
        min-height: 235px;

        padding: 18px 12px 16px;
    }

    .tg-staff-image {
        width: 105px;
        height: 105px;

        flex-basis: 105px;

        margin-bottom: 14px;
    }

    .tg-staff-name {
        font-size: 16px;
    }

    .tg-staff-designation {
        margin-top: 8px;

        padding: 5px 12px;

        font-size: 12px;
    }

    .tg-staff-slider .owl-nav button {
        width: 36px !important;
        height: 36px !important;
    }

    .tg-staff-slider .owl-nav .owl-prev {
        left: 0;
    }

    .tg-staff-slider .owl-nav .owl-next {
        right: 0;
    }

}


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

@media (max-width: 575px) {

    .tg-staff-section {
        padding: 23px 0;
    }

    .tg-staff-title {
        font-size: 25px;
    }

    .tg-staff-heading-line {
        width: 24px;
        flex-basis: 24px;
    }

    .tg-staff-heading {
        gap: 7px;
        margin-bottom: 18px;
    }

    .tg-staff-slide {
        padding: 5px 25px;
    }

    .tg-staff-card {
        min-height: 225px;

        padding: 17px 12px 15px;
    }

    .tg-staff-image {
        width: 100px;
        height: 100px;

        flex-basis: 100px;
    }

    .tg-staff-slider .owl-nav .owl-prev {
        left: 2px;
    }

    .tg-staff-slider .owl-nav .owl-next {
        right: 2px;
    }

}


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

@media (max-width: 400px) {

    .tg-staff-title {
        font-size: 23px;
    }

    .tg-staff-heading-line {
        width: 18px;
        flex-basis: 18px;
    }

    .tg-staff-card {
        min-height: 220px;
    }

    .tg-staff-image {
        width: 95px;
        height: 95px;

        flex-basis: 95px;
    }

}


/* =========================================================
   END COMMITTEE & TEACHER STAFF
  
   ========================================================= */

/* =========================================================
   TRACEABLE GIVING - TESTIMONIAL SECTION
   All custom classes are prefixed with tg-testimonial-
   to prevent CSS conflicts with other sections.
========================================================= */


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

.tg-testimonial-section {
    position: relative;
    width: 100%;
    padding: 30px 0;
    background: #ffffff;
    overflow: hidden;
}


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

.tg-testimonial-section::before {
    content: "";
    position: absolute;

    width: 300px;
    height: 300px;

    left: -160px;
    top: -140px;

    background: rgba(25, 135, 84, 0.07);

    border-radius: 50%;

    filter: blur(70px);

    pointer-events: none;
}

.tg-testimonial-section::after {
    content: "";
    position: absolute;

    width: 300px;
    height: 300px;

    right: -160px;
    bottom: -150px;

    background: rgba(25, 135, 84, 0.06);

    border-radius: 50%;

    filter: blur(70px);

    pointer-events: none;
}


/* =========================================================
   BOOTSTRAP CONTAINER
   Only limiting width here.
========================================================= */

.tg-testimonial-section > .container {
    position: relative;
    z-index: 2;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    /* max-width: 1400px; */
}


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

.tg-testimonial-heading {
    display: flex;

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

    gap: 16px;

    margin-bottom: 25px;

    text-align: center;
}

.tg-testimonial-heading h2 {
    margin: 0;

    color: #173c35;

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

    line-height: 1.2;
}

.tg-testimonial-line {
    display: block;

    width: 45px;
    height: 1px;

    background: #d8d8d8;

    flex-shrink: 0;
}


/* =========================================================
   MAIN TESTIMONIAL BOX
========================================================= */

.tg-testimonial-box {
    position: relative;

    width: 100%;

    padding: 28px 55px;

    background: #fffaf2;

    border-radius: 18px;

    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.07);
}


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

.tg-testimonial-slider {
    position: relative;
    width: 100%;
}

.tg-testimonial-slider .owl-stage {
    display: flex;

    align-items: stretch;
}

.tg-testimonial-slider .owl-item {
    display: flex;

    height: auto;
}

.tg-testimonial-slider .owl-item > div {
    width: 100%;
}


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

.tg-testimonial-card {
    position: relative;

    width: 100%;
    height: 100%;

    padding: 8px 28px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


/* Vertical separator */

.tg-testimonial-card::after {
    content: "";

    position: absolute;

    top: 8px;
    right: 0;

    width: 1px;
    height: calc(100% - 16px);

    background: #dedede;
}

.tg-testimonial-slider .owl-item:last-child
.tg-testimonial-card::after {
    display: none;
}


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

.tg-testimonial-text {
    margin: 0 0 18px;

    color: #555;

    font-size: 15px;
    font-weight: 400;

    line-height: 1.7;

    display: -webkit-box;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;

    overflow: hidden;

    text-overflow: ellipsis;
}


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

.tg-testimonial-user {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: auto;
}


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

.tg-testimonial-user-image {
    width: 52px !important;
    height: 52px !important;

    min-width: 52px !important;
    max-width: 52px !important;

    border-radius: 50%;

    object-fit: cover;
    object-position: center;

    display: block;

    border: 3px solid #ffffff;

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

    transition: transform 0.3s ease;
}

.tg-testimonial-card:hover
.tg-testimonial-user-image {
    transform: scale(1.06);
}


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

.tg-testimonial-user-info {
    min-width: 0;

    display: flex;
    flex-direction: column;

    justify-content: center;
}

.tg-testimonial-user-name {
    margin: 0;

    color: #222;

    font-size: 16px;
    font-weight: 700;

    line-height: 1.3;

    white-space: nowrap;

    overflow: hidden;
    text-overflow: ellipsis;
}

.tg-testimonial-user-designation {
    margin-top: 4px;

    color: #777;

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

    line-height: 1.3;

    white-space: nowrap;

    overflow: hidden;
    text-overflow: ellipsis;
}


/* =========================================================
   STAR RATING
   Optional if you decide to use it.
========================================================= */

.tg-testimonial-stars {
    margin-bottom: 10px;

    color: #f4b400;

    font-size: 16px;

    letter-spacing: 2px;
}


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

.tg-testimonial-slider .owl-nav {
    margin: 0 !important;
}

.tg-testimonial-slider .owl-nav button {
    position: absolute;

    top: 50%;

    width: 42px !important;
    height: 42px !important;

    margin: 0 !important;

    padding: 0 !important;

    display: flex !important;

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

    border-radius: 50% !important;

    background: #ffffff !important;

    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.13);

    transform: translateY(-50%);

    transition:
        background 0.3s ease,
        box-shadow 0.3s ease;

    z-index: 10;
}

.tg-testimonial-slider .owl-prev {
    left: -22px;
}

.tg-testimonial-slider .owl-next {
    right: -22px;
}

.tg-testimonial-slider .owl-nav button i {
    color: #333;

    font-size: 15px;

    transition: color 0.3s ease;
}

.tg-testimonial-slider .owl-nav button:hover {
    background: #0b6b45 !important;

    box-shadow: 0 8px 20px rgba(11, 107, 69, 0.25);
}

.tg-testimonial-slider .owl-nav button:hover i {
    color: #ffffff;
}


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

.tg-testimonial-slider .owl-dots {
    margin-top: 18px;

    text-align: center;
}

.tg-testimonial-slider .owl-dot span {
    width: 8px;
    height: 8px;

    margin: 4px;

    background: #d5d5d5;
}

.tg-testimonial-slider .owl-dot.active span {
    background: #0b6b45;
}


/* =========================================================
   EMPTY / ERROR MESSAGE
========================================================= */

.tg-testimonial-empty {
    width: 100%;

    padding: 25px 15px;

    text-align: center;

    color: #666;

    font-size: 15px;
}


/* =========================================================
   1200px - 1399px
========================================================= */

@media (max-width: 1399px) {

    .tg-testimonial-section {
        padding: 32px 0;
    }

    .tg-testimonial-section > .container {
        max-width: 1200px;
    }

    .tg-testimonial-box {
        padding: 26px 50px;
    }

    .tg-testimonial-heading h2 {
        font-size: 34px;
    }

    .tg-testimonial-card {
        padding: 8px 22px;
    }

}


/* =========================================================
   992px - 1199px
========================================================= */

@media (max-width: 1199px) {

    .tg-testimonial-section {
        padding: 30px 0;
    }

    .tg-testimonial-box {
        padding: 25px 45px;
    }

    .tg-testimonial-heading {
        margin-bottom: 22px;
    }

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

    .tg-testimonial-line {
        width: 40px;
    }

    .tg-testimonial-card {
        padding: 8px 18px;
    }

    .tg-testimonial-text {
        font-size: 14px;
        line-height: 1.65;
    }

    .tg-testimonial-slider .owl-prev {
        left: -20px;
    }

    .tg-testimonial-slider .owl-next {
        right: -20px;
    }

}


/* =========================================================
   768px - 991px
========================================================= */

@media (max-width: 991px) {

    .tg-testimonial-section {
        padding: 28px 0;
    }

    .tg-testimonial-box {
        padding: 24px 38px;
    }

    .tg-testimonial-heading h2 {
        font-size: 30px;
    }

    .tg-testimonial-card {
        padding: 5px 18px;
    }

    .tg-testimonial-card::after {
        display: none;
    }

    .tg-testimonial-text {
        font-size: 15px;
        line-height: 1.65;
    }

    .tg-testimonial-slider .owl-nav button {
        width: 38px !important;
        height: 38px !important;
    }

    .tg-testimonial-slider .owl-prev {
        left: -19px;
    }

    .tg-testimonial-slider .owl-next {
        right: -19px;
    }

}


/* =========================================================
   576px - 767px
========================================================= */

@media (max-width: 767px) {

    .tg-testimonial-section {
        padding: 25px 0;
    }

    .tg-testimonial-heading {
        gap: 10px;

        margin-bottom: 18px;
    }

    .tg-testimonial-heading h2 {
        font-size: 27px;
    }

    .tg-testimonial-line {
        width: 30px;
    }

    .tg-testimonial-box {
        padding: 20px 18px;

        border-radius: 15px;
    }

    .tg-testimonial-card {
        padding: 5px 8px;
    }

    .tg-testimonial-text {
        margin-bottom: 15px;

        font-size: 14px;
        line-height: 1.65;

        -webkit-line-clamp: 4;
    }

    .tg-testimonial-user-image {
        width: 48px !important;
        height: 48px !important;

        min-width: 48px !important;
        max-width: 48px !important;
    }

    .tg-testimonial-user-name {
        font-size: 15px;
    }

    .tg-testimonial-user-designation {
        font-size: 12px;
    }

    .tg-testimonial-slider .owl-nav button {
        width: 34px !important;
        height: 34px !important;
    }

    .tg-testimonial-slider .owl-prev {
        left: -10px;
    }

    .tg-testimonial-slider .owl-next {
        right: -10px;
    }

}


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

@media (max-width: 575px) {

    .tg-testimonial-section {
        padding: 22px 0;
    }

    .tg-testimonial-heading {
        gap: 8px;
    }

    .tg-testimonial-heading h2 {
        font-size: 25px;
    }

    .tg-testimonial-line {
        width: 24px;
    }

    .tg-testimonial-box {
        padding: 18px 15px;

        border-radius: 14px;
    }

    .tg-testimonial-card {
        padding: 5px 4px;
    }

    .tg-testimonial-text {
        font-size: 14px;

        line-height: 1.6;

        -webkit-line-clamp: 4;
    }

    .tg-testimonial-slider .owl-prev {
        left: -8px;
    }

    .tg-testimonial-slider .owl-next {
        right: -8px;
    }

}
/* =========================================================
   END TRACEABLE GIVING - TESTIMONIAL SECTION (What People Say)

========================================================= */

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

.school-contact-section {
    padding: 35px 0;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.school-contact-section::before {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    left: -160px;
    top: -160px;
    background: rgba(29, 122, 74, 0.06);
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
}

.school-contact-section::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    right: -160px;
    bottom: -160px;
    background: rgba(29, 122, 74, 0.05);
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
}


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

.school-contact-container {
    position: relative;
    z-index: 2;
    max-width: 1400px;
}


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

.school-contact-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 8px;
}

.school-contact-heading::before,
.school-contact-heading::after {
    content: "";
    width: 55px;
    height: 2px;
    background: #d8d8d8;
}

.school-contact-heading h2 {
    margin: 0;
    color: #163d35;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.25;
}


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

.school-contact-description {
    max-width: 760px;
    margin: 0 auto 28px;
    text-align: center;
}

.school-contact-description p {
    margin: 0;
    color: #666;
    font-size: 15px;
    line-height: 1.7;
}


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

.school-contact-row {
    align-items: stretch;
}


/*==================================================
    CONTACT INFORMATION
==================================================*/

.school-contact-info {
    height: 100%;
    padding: 28px 22px;
    border-radius: 16px;
    background: linear-gradient(
        135deg,
        #1d72d8 0%,
        #4ea5ff 100%
    );
    color: #ffffff;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
    transition: 0.3s ease;
}

.school-contact-info:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.14);
}


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

.school-contact-info-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.school-contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
}

.school-contact-info-item:last-child {
    margin-bottom: 0;
}


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

.school-contact-info-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;

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

    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);

    font-size: 13px;
}


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

.school-contact-info-content {
    min-width: 0;
    flex: 1;
}

.school-contact-info-content > span {
    display: block;
    margin-bottom: 5px;

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

    opacity: 0.85;
}

.school-contact-info-content p {
    margin: 0;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.6;
}

.school-contact-info-content a {
    display: block;

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

    text-decoration: none;
    word-break: break-word;

    transition: 0.25s ease;
}

.school-contact-info-content a:hover {
    color: #ffe36e;
}


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

#contactTiming p {
    margin: 0 0 4px;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.5;
}

#contactTiming p:last-child {
    margin-bottom: 0;
}


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

.school-contact-form {
    height: 100%;
    padding: 28px;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: 0.3s ease;
}

.school-contact-form:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.12);
}

.school-contact-form h3 {
    margin: 0 0 20px;

    color: #222;
    text-align: center;

    font-size: 21px;
    font-weight: 600;
    line-height: 1.3;
}

.school-contact-form-row {
    row-gap: 0;
}


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

.school-contact-field {
    margin-bottom: 16px;
}

.school-contact-form .form-control {
    width: 100%;
    height: 50px;

    padding: 0 15px;

    border: 1px solid #e1e1e1;
    border-radius: 9px;

    background: #ffffff;

    color: #333;
    font-size: 14px;

    box-shadow: none;
    outline: none;

    transition: 0.25s ease;
}

.school-contact-form textarea.form-control {
    height: 125px;
    padding-top: 13px;
    resize: none;
}

.school-contact-form .form-control::placeholder {
    color: #999;
}

.school-contact-form .form-control:focus {
    border-color: #0b6b45;
    box-shadow: 0 0 0 3px rgba(11, 107, 69, 0.08);
}


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

.school-contact-submit {
    width: 100%;
    height: 48px;

    border: 0;
    border-radius: 9px;

    background: linear-gradient(
        90deg,
        #e62b2b,
        #d81f1f
    );

    color: #ffffff;

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

    cursor: pointer;

    transition: 0.3s ease;
}

.school-contact-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(230, 43, 43, 0.22);
}


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

.school-contact-map {
    height: 100%;
    min-height: 360px;

    overflow: hidden;

    border-radius: 16px;
    background: #f5f7f6;

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

    transition: 0.3s ease;
}

.school-contact-map:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.12);
}

.school-contact-map iframe {
    display: block;

    width: 100%;
    height: 100%;
    min-height: 360px;

    border: 0;
}

.school-contact-map-empty {
    width: 100%;
    height: 100%;
    min-height: 360px;

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

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


/*==================================================
    LARGE DESKTOP
==================================================*/

@media (max-width: 1399px) {

    .school-contact-container {
        max-width: 1320px;
    }

}


/*==================================================
    LAPTOP
==================================================*/

@media (max-width: 1199px) {

    .school-contact-section {
        padding: 30px 0;
    }

    .school-contact-heading h2 {
        font-size: 34px;
    }

    .school-contact-description {
        margin-bottom: 24px;
    }

    .school-contact-info {
        padding: 25px 18px;
    }

    .school-contact-form {
        padding: 25px;
    }

    .school-contact-info-item {
        gap: 10px;
        margin-bottom: 17px;
    }

    .school-contact-map,
    .school-contact-map iframe,
    .school-contact-map-empty {
        min-height: 350px;
    }

}


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

@media (max-width: 991px) {

    .school-contact-section {
        padding: 30px 0;
    }

    .school-contact-heading h2 {
        font-size: 30px;
    }

    .school-contact-description {
        max-width: 700px;
        margin-bottom: 25px;
    }

    .school-contact-description p {
        font-size: 14px;
    }

    .school-contact-info,
    .school-contact-form {
        height: auto;
    }

    .school-contact-map,
    .school-contact-map iframe,
    .school-contact-map-empty {
        min-height: 320px;
    }

}


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

@media (max-width: 767px) {

    .school-contact-section {
        padding: 28px 0;
    }

    .school-contact-heading {
        gap: 10px;
    }

    .school-contact-heading::before,
    .school-contact-heading::after {
        width: 35px;
    }

    .school-contact-heading h2 {
        font-size: 27px;
    }

    .school-contact-description {
        margin-bottom: 22px;
    }

    .school-contact-description p {
        font-size: 14px;
        line-height: 1.6;
    }

    .school-contact-info {
        padding: 22px 18px;
        border-radius: 14px;
    }

    .school-contact-form {
        padding: 22px 18px;
        border-radius: 14px;
    }

    .school-contact-form h3 {
        font-size: 19px;
        margin-bottom: 17px;
    }

    .school-contact-info-item {
        margin-bottom: 16px;
    }

    .school-contact-info-icon {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }

    .school-contact-info-content p,
    .school-contact-info-content a,
    #contactTiming p {
        font-size: 13px;
    }

    .school-contact-map,
    .school-contact-map iframe,
    .school-contact-map-empty {
        min-height: 280px;
    }

}


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

@media (max-width: 480px) {

    .school-contact-section {
        padding: 25px 0;
    }

    .school-contact-heading h2 {
        font-size: 24px;
    }

    .school-contact-heading::before,
    .school-contact-heading::after {
        width: 28px;
    }

    .school-contact-description p {
        font-size: 13px;
    }

    .school-contact-form,
    .school-contact-info {
        padding: 20px 16px;
    }

    .school-contact-form .form-control {
        height: 47px;
        font-size: 13px;
    }

    .school-contact-form textarea.form-control {
        height: 110px;
    }

    .school-contact-submit {
        height: 46px;
        font-size: 14px;
    }

}

/*==================================================
    END SCHOOL CONTACT SECTION
==================================================*/


/*=========================================
            ABOUT PAGE
=========================================*/

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

.about-section {
    position: relative;
    background: #f7f9fc;
    padding: 45px 0 70px;
    overflow: hidden;
}

/* Optional decorative background */
.about-section::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    background: rgba(31, 111, 93, 0.04);
    border-radius: 50%;
    top: 180px;
    left: -140px;
    z-index: 0;
}

.about-section .container {
    position: relative;
    z-index: 1;
}


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

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

.page-title {
    margin: 0;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 500;
    color: #1c2c3a;
    letter-spacing: -0.5px;
}

.title-decoration {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 12px 0 15px;
}

.title-decoration span {
    width: 38px;
    height: 2px;
    background: #145943;
    display: block;
}

.title-decoration i {
    font-size: 8px;
    color: #145943;
}

.page-subtitle {
    margin: 0 auto;
    max-width: 750px;
    color: #5e6570;
    font-size: 17px;
    margin-top: 12px;
    line-height: 1.7;
}


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

.about-sidebar {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
    border: 1px solid #e8edf1;
    position: sticky;
    top: 100px;
}

.sidebar-title {
    background: linear-gradient(135deg,#1d72d8,#4ea5ff);
    color: #ffffff;
    padding: 22px 24px;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.about-sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.about-sidebar li {
    border-bottom: 1px solid #edf0f2;
}

.about-sidebar li:last-child {
    border-bottom: none;
}

.about-sidebar li a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 19px 22px;

    color: #333d46;
    text-decoration: none;

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

    transition: all 0.3s ease;
}

.about-sidebar li a::after {
    content: "\f285";
    font-family: bootstrap-icons;
    font-size: 14px;
    opacity: 0.7;
    transition: transform 0.3s ease;
}

.about-sidebar li:hover a {
    color: #1d72d8;
    background: #f8fafe;
    padding-left: 27px;
}

.about-sidebar li:hover a::after {
    transform: translateX(4px);
}

.about-sidebar li.active a {
    color: #1d72d8;
    font-weight: 600;
    background: #f8fafe;
}

.about-sidebar li.active a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #1d72d8;
}


/* =========================================
   MAIN ABOUT CARD
========================================= */

.about-card {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #e8edf1;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);

    padding: 35px 38px;

    margin-bottom: 28px;

    transition: all 0.3s ease;
}

.about-card:hover {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.09);
}


/* =========================================
   CONTENT + IMAGE
========================================= */

.about-content-row {
    display: flex;
    align-items: center;
    gap: 35px;
}


/* LEFT CONTENT */

.about-content {
    flex: 1;
    min-width: 0;
}

.about-card h2 {
    color: #1c2c3a;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;

    margin: 0 0 14px;
     overflow-wrap: anywhere;
    word-break: break-word;
}

.section-line {
    width: 50px;
    height: 4px;
    background: #1c2c3a;
    border-radius: 10px;

    margin-bottom: 25px;
}

.about-card p {
    color: #5d6670;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 14px;
}


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

.about-image-wrapper {
    flex: 0 0 46%;
    max-width: 46%;
}

.about-img {
    width: 100%;
    height: 330px;

    object-fit: cover;

    border-radius: 10px;

    display: block;

    border: 1px solid #e4e8eb;

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


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

.about-video {
    width: 100%;
    max-height: 400px;
    border-radius: 10px;
    display: block;
}


/* =========================================
   TEACHER ACHIEVEMENT
========================================= */

.teacher-card {
    display: flex;
    align-items: center;
    gap: 30px;
}

.teacher-profile {
    flex: 0 0 180px;
    text-align: center;
}

.teacher-profile img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    border: 5px solid #edf7f3;
}

.teacher-profile h4 {
    margin: 15px 0 5px;
    color: #1d72d8;
    font-size: 19px;
}

.teacher-profile p {
    font-size: 14px;
    margin: 0;
    color: #777;
}


/* =========================================
   LOADING
========================================= */

.loading-card {
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-card p {
    color: #777;
}


/* =========================================
   NO DATA
========================================= */

.no-data-card {
    text-align: center;
    padding: 70px 30px;
}

.no-data-card i {
    font-size: 45px;
    color: #17664f;
    margin-bottom: 15px;
}

.no-data-card h3 {
    color: #333;
    margin-bottom: 8px;
}

.no-data-card p {
    color: #777;
}


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

@media (max-width: 991px) {

    .about-sidebar {
        position: static;
        margin-bottom: 5px;
    }

    .about-content-row {
        flex-direction: column;
    }

    .about-image-wrapper {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
        order: 2;
    }

    .about-content {
        width: 100%;
    }

    .about-img {
        height: 300px;
    }

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

    .teacher-profile {
        flex: none;
    }
}


@media (max-width: 767px) {

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

    .page-title {
        font-size: 34px;
    }

    .page-subtitle {
        font-size: 15px;
        padding: 0 15px;
    }

    .about-card {
        padding: 25px 20px;
    }

    .about-card h2 {
        font-size: 23px;
    }

    .about-img {
        height: 250px;
    }

    .about-sidebar li a {
        padding: 16px 18px;
    }
}


@media (max-width: 480px) {

    .page-title {
        font-size: 30px;
    }

    .about-header {
        margin-bottom: 30px;
    }

    .about-card {
        padding: 20px 16px;
    }

    .about-img {
        height: 220px;
    }

    .sidebar-title {
        font-size: 17px;
        padding: 18px;
    }
}


/*====================================================
    END SCHOOL ABOUT PAGE
====================================================*/

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

.events-page-section{

    padding:30px 0;
    background:#f8fbfb;
}

.events-heading{

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

.events-heading span{

    color:#198754;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
}

.events-heading h2{

    font-size:38px;
    font-weight:500;
    margin:10px 0;
    color:#173c35;
}

.events-heading p{

    color:#777;
    /* max-width:600px; */
    margin:auto;
    font-size:16px;
}

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

.event-card{

    background:#fff;
    border-radius:18px;
    overflow:hidden;

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

    transition:.35s;

    height:100%;
}

.event-card:hover{

    transform:translateY(-8px);

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

.event-image{

    position:relative;
    overflow:hidden;
}

.event-image img{

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

    transition:.4s;
}

.event-card:hover img{

    transform:scale(1.08);
}

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

.event-date{

    position:absolute;

    left:18px;
    bottom:18px;

    width:72px;

    background:#ef3d3d;

    color:#fff;

    text-align:center;

    border-radius:10px;

    padding:10px 0;
}

.event-date span{

    display:block;

    font-size:30px;

    font-weight:700;

    line-height:1;
}

.event-date small{

    display:block;

    font-size:12px;

    font-weight:600;

    text-transform:uppercase;
}

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

.event-content{

    padding:28px;
}

.event-content h4{

    font-size:20px;

    font-weight:700;

    color:#222;

    margin-bottom:15px;

    min-height:auto;
}

.event-duration{

    color:#777;

    font-size:15px;

    margin-bottom:22px;
}

.event-btn{
    display:inline-block;
    background:#0d6b43;
    color:#fff;
    text-decoration:none;
    padding:12px 28px;
    border-radius:35px;
    font-weight:600;
    transition:.3s;
    border: none;
}

.event-btn:hover{
    background:#084c31;
    color:#fff;
}

/*==============================
        Responsive
==============================*/

@media(max-width:991px){

.event-image img{

    height:230px;
}

.section-heading h2{

    font-size:34px;
}

}

@media(max-width:767px){

.events-page-section{

    padding:60px 0;
}

.event-image img{

    height:210px;
}

.event-content{

    padding:22px;
}

.event-content h3{

    font-size:22px;
}
}


/*==========================================
    END EVENT PAGE 
==========================================*/

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

.gallery-page-section{

    padding:30px 0;
    background:#f8fbfc;
}

/*=============================
        Heading
=============================*/

.gallery-heading{

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

.gallery-heading span{

    display:inline-block;
    color:#198754;
    font-size:14px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    position:relative;
}

.gallery-heading span:before,
.gallery-heading span:after{

    content:"";

    position:absolute;
    top:50%;

    width:55px;
    height:2px;

    background:#82c7a8;
}

.gallery-heading span:before{

    right:115%;
}

.gallery-heading span:after{

    left:115%;
}

.gallery-heading h2{

    margin:12px 0 15px;

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

    color:#1c2c3a;
}

.gallery-heading p{

    color:#6d7680;
    font-size:18px;

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

/*=============================
        Card
=============================*/

.gallery-page-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

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

    transition:.35s;

    height:100%;
}

.gallery-page-card:hover{

    transform:translateY(-8px);

    box-shadow:0 22px 45px rgba(0,0,0,.14);
}

/*=============================
        Image
=============================*/

.gallery-page-image{

    position:relative;
    overflow:hidden;
}

.gallery-page-image img{

    width:100%;
    height:260px;

    object-fit:cover;

    transition:.5s;
}

.gallery-page-card:hover img{

    transform:scale(1.08);
}

/*=============================
        Overlay
=============================*/

.gallery-overlay{

    position:absolute;

    inset:0;

    background:rgba(18,85,53,.55);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    transition:.35s;
}

.gallery-page-card:hover .gallery-overlay{

    opacity:1;
}

.gallery-overlay i{

    width:70px;
    height:70px;

    border-radius:50%;

    background:#fff;

    color:#198754;

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

    font-size:24px;

    transform:scale(.7);

    transition:.35s;
}

.gallery-page-card:hover .gallery-overlay i{

    transform:scale(1);
}

/*=============================
        Content
=============================*/

.gallery-page-content{

    padding:22px;
}

.gallery-page-content h4{

    font-size:20px;

    font-weight:500;

    line-height:1.45;

    color:#1d2a35;

    margin-bottom:10px;

    min-height:40px;
    cursor: pointer;
}

.gallery-page-content span{

    display:flex;

    align-items:center;

    gap:8px;

    color:#7d8691;

    font-size:15px;
}

.gallery-page-content i{

    color:#198754;
}

/*=============================
        Responsive
=============================*/

@media(max-width:991px){

.gallery-heading h2{

    font-size:42px;
}

.gallery-page-image img{

    height:230px;
}

}

@media(max-width:767px){

.gallery-page-section{

    padding:60px 0;
}

.gallery-heading h2{

    font-size:34px;
}

.gallery-heading p{

    font-size:16px;
}

.gallery-page-content h4{

    font-size:20px;

    min-height:auto;
}

.gallery-page-image img{

    height:210px;
}

}
/*==========================================
    END GALLERY PAGE
==========================================*/


/*==================================================
        GALLERY DETAILS PAGE
==================================================*/

.gallery-details-section{
    padding:30px 0 30px;
    background:linear-gradient(180deg,#f7fbfa 0%,#ffffff 100%);
}

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

.gallery-page-title{
    text-align:center;
    margin-bottom:50px;
}

.gallery-page-title h2{
    margin:0;
    font-size:38px;
    font-weight:500;
    color:#163a43;
    line-height:1.3;
}

.gallery-page-title span{
    color:#198754;
    font-weight:600;
}

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

.back-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#198754;
    font-weight:600;
    font-size:16px;
    text-decoration:none;
    margin-bottom:30px;
    transition:.3s;
}

.back-btn:hover{
    color:#0b5c38;
    transform:translateX(-5px);
}

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

.gallery-header{

    background:#fff;

    border-radius:24px;

    padding:30px;

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

    margin-bottom:50px;

    position:relative;

    overflow:hidden;
}

.gallery-header::before{

    content:"";

    position:absolute;

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

    width:260px;
    height:260px;

    border-radius:50%;

    background:rgba(25,135,84,.05);

}

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

.gallery-tag{

    display:inline-block;

    background:#19875412;

    color:#198754;

    padding:8px 20px;

    border-radius:40px;

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:22px;
}

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

.gallery-header h1{

    font-size:20px;

    font-weight:500;

    color:#163a43;

    line-height:1.3;

    margin-bottom:22px;
}

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

.gallery-meta{

    display:flex;

    flex-wrap:wrap;

    gap:30px;

    margin-bottom:25px;
}

.gallery-meta span{

    display:flex;

    align-items:center;

    gap:8px;

    color:#666;

    font-size:15px;

    font-weight:500;
}

.gallery-meta i{

    color:#198754;
}

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

.gallery-header p{

    margin:0;

    color:#666;

    font-size:17px;

    line-height:32px;
}

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

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));

    gap:28px;
}

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

.gallery-grid .item{

    position:relative;

    overflow:hidden;

    border-radius:20px;

    background:#fff;

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

    transition:.35s;
}

.gallery-grid .item:hover{

    transform:translateY(-8px);

    box-shadow:0 22px 45px rgba(0,0,0,.14);
}

.gallery-grid .item a{

    display:block;

    position:relative;
}

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

.gallery-grid img{

    width:100%;

    height:280px;

    object-fit:cover;

    transition:.5s;
}

.gallery-grid .item:hover img{

    transform:scale(1.08);
}

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

.gallery-details-overlay{

    position:absolute;

    inset:0;

    background:rgba(18,34,28,.45);

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    transition:.35s;
}

.gallery-grid .item:hover .gallery-details-overlay{

    opacity:1;
}

.gallery-details-overlay i{

    width:70px;
    height:70px;

    background:#fff;

    color:#198754;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    transform:scale(.8);

    transition:.35s;
}

.gallery-grid .item:hover .gallery-details-overlay i{

    transform:scale(1);
}

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

@media(max-width:991px){

.gallery-header{
    padding:35px;
}

.gallery-header h1{
    font-size:34px;
}

.gallery-page-title h2{
    font-size:36px;
}

}

@media(max-width:767px){

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

.gallery-page-title{
    margin-bottom:35px;
}

.gallery-page-title h2{
    font-size:28px;
}

.gallery-header{
    padding:25px;
    border-radius:18px;
}

.gallery-header h1{
    font-size:28px;
}

.gallery-meta{
    flex-direction:column;
    gap:12px;
}

.gallery-header p{
    font-size:15px;
    line-height:28px;
}

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

.gallery-grid img{
    height:240px;
}

.gallery-details-overlay i{
    width:60px;
    height:60px;
    font-size:24px;
}

}
/*==========================================
    END GALLERY DEATILS PAGE
==========================================*/
/*==================================
E-LIBRARY
==================================*/

.library-section{

    padding:30px 0;

    background:#f5f7fb;

}

.library-section-title{

    text-align:center;

    margin-bottom:70px;

}

.library-section-title span{

display:inline-block;

padding:8px 20px;

background:#e9fff2;

color:#0f9d58;

font-size:14px;

font-weight:600;

border-radius:30px;

letter-spacing:1px;

margin-bottom:20px;

}

.library-section-title h2{

    font-size:38px;

    font-weight:500;

    color:#173c35;

    margin-bottom:18px;

}

.library-section-title p{

max-width:650px;

margin:auto;

font-size:17px;

line-height:30px;

color:#666;

}

.library-grid{

display:grid;

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

gap:35px;

}

.library-card{

background:#fff;

padding:45px 35px;

border-radius:25px;

text-align:center;

transition:.4s;

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

position:relative;

overflow:hidden;

}

.library-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:6px;

background:linear-gradient(90deg,#00b09b,#96c93d);

}

.library-card:hover{

transform:translateY(-12px);

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

}

.library-image{
    width: 180px;
    height: 100px;
    margin: 0 auto 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 0;
}

.library-image img{
    max-width: 260px;
    max-height: 161px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.library-card h3{

font-size:28px;

font-weight:600;

color:#23395d;

margin-bottom:18px;

}

.library-card p{

font-size:16px;

line-height:30px;

color:#666;

margin-bottom:30px;

}

.is_description {
    min-height:auto;
    display:-webkit-box;
    -webkit-line-clamp:4;
    -webkit-box-orient:vertical;
    overflow: hidden;
}

/* .library-btn{

    display:inline-block;

    padding:15px 38px;

    background: linear-gradient(135deg, #1d72d8, #4ea5ff);

    color:#fff;

    text-decoration:none;

    border-radius:50px;

    font-weight:600;

    transition:.3s;

} */

.library-btn{
    display:inline-block;
    padding:15px 38px;
    background:linear-gradient(135deg,#1d72d8,#4ea5ff);
    color:#fff;
    text-decoration:none;
    border-radius:50px;
    font-weight:600;
    transition:.3s;
}

/* .library-btn:hover{

    transform:translateY(-3px);

    box-shadow: 0 10px 30px rgba(29, 114, 216, 0.35);
} */

.library-btn:hover{
    background:linear-gradient(135deg,#0f5cc0,#1d72d8);
    box-shadow:0 12px 30px rgba(29,114,216,.35);
    transform:translateY(-3px);
}

@media(max-width:991px){

.library-section{

padding:70px 0;

}

.library-section-title h2{

font-size:35px;

}

}

@media(max-width:576px){

.library-grid{

grid-template-columns:1fr;

}

.library-card{

padding:35px 25px;

}

.library-section-title h2{

font-size:30px;

}

.library-section-title p{

font-size:15px;

}

}
/*==========================================
    END library
==========================================*/


/*=====================================
        TGF EDUCATION LIBRARY HERO
======================================*/

.tgf_education_library-hero{

    position:relative;
    padding:90px 0;
    background:linear-gradient(135deg,#1d72d8,#4ea5ff);
    overflow:hidden;

}

.tgf_education_library-hero::before{

    content:"";
    position:absolute;
    width:550px;
    height:550px;
    top:-220px;
    right:-150px;
    border-radius:50%;
    background:rgba(255,255,255,.08);

}

.tgf_education_library-hero::after{

    content:"";
    position:absolute;
    width:350px;
    height:350px;
    left:-120px;
    bottom:-180px;
    border-radius:50%;
    background:rgba(255,255,255,.05);

}

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

.tgf_education_library-hero-content{

    position:relative;
    z-index:10;

}

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

.tgf_education_library-badge{

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

    padding:10px 20px;

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

    color:#fff;

    border-radius:50px;

    backdrop-filter:blur(10px);

    font-size:15px;

    font-weight:600;

    margin-bottom:25px;

}

.tgf_education_library-badge i{

    font-size:18px;

}

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

.tgf_education_library-hero-content h1{

    font-size:58px;

    font-weight:700;

    line-height:1.2;

    color:#fff;

    margin-bottom:20px;

}

.tgf_education_library-hero-content h1 span{

    color:#FFD54F;

}

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

.tgf_education_library-hero-content p{

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

    font-size:18px;

    line-height:32px;

    max-width:650px;

}

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

.tgf_education_library-search{

    margin-top:40px;

    display:flex;

    align-items:center;

    max-width:620px;

    background:#fff;

    border-radius:60px;

    overflow:hidden;

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

}

.tgf_education_library-search input{

    flex:1;

    border:none;

    outline:none;

    padding:18px 25px;

    font-size:16px;

    background:transparent;

}

.tgf_education_library-search button{

    width:70px;

    border:none;

    cursor:pointer;

    color:#fff;

    background:#1d72d8;

    transition:.35s;

    font-size:20px;

}

.tgf_education_library-search button:hover{

    background:#135db4;

}

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

.tgf_education_library-stats{

    display:grid;

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

    gap:20px;

    position:relative;

    z-index:10;

}

.tgf_education_library-stat-card{

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

    backdrop-filter:blur(12px);

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

    border-radius:22px;

    padding:30px;

    text-align:center;

    transition:.35s;

}

.tgf_education_library-stat-card:hover{

    transform:translateY(-8px);

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

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

}

.tgf_education_library-stat-card h2{

    color:#fff;

    font-size:40px;

    font-weight:700;

    margin-bottom:10px;

}

.tgf_education_library-stat-card span{

    color:#fff;

    font-size:16px;

    opacity:.95;

}

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

@media(max-width:991px){

.tgf_education_library-hero{

padding:70px 0;

}

.tgf_education_library-hero-content{

text-align:center;

}

.tgf_education_library-search{

margin:40px auto 0;

}

.tgf_education_library-stats{

margin-top:50px;

}

.tgf_education_library-hero-content h1{

font-size:42px;

}

}

@media(max-width:767px){

.tgf_education_library-hero{

padding:60px 0;

}

.tgf_education_library-hero-content h1{

font-size:34px;

}

.tgf_education_library-hero-content p{

font-size:16px;

line-height:28px;

}

.tgf_education_library-search{

max-width:100%;

}

.tgf_education_library-search input{

padding:15px 20px;

font-size:15px;

}

.tgf_education_library-search button{

width:60px;

}

.tgf_education_library-stats{

grid-template-columns:1fr;

}

.tgf_education_library-stat-card{

padding:25px;

}

.tgf_education_library-stat-card h2{

font-size:34px;

}

}


/*============================================================
        Part 2 – Filter Sidebar CSS
==========================================================*/

/*========================================
    Part 2.1 — Content Layout + Sidebar
=========================================*/
/*==========================================
        CONTENT SECTION
==========================================*/

.tgf_education_library-content{

    padding:80px 0;

    background:#f5f8fd;

}

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

.tgf_education_library-sidebar{

    background:#fff;

    border-radius:20px;

    padding:25px;

    border:1px solid #edf2f7;

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

    position:sticky;

    top:100px;

}

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

.tgf_education_library-sidebar-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

    padding-bottom:15px;

    border-bottom:1px solid #edf2f7;

}

.tgf_education_library-sidebar-header h4{

    margin:0;

    color:#17325C;

    font-size:24px;

    font-weight:700;

}

.tgf_education_library-sidebar-header h4 i{

    color:#1d72d8;

    margin-right:8px;

}

.tgf_clear_filter{

    color:#1d72d8;

    font-size:14px;

    text-decoration:none;

    font-weight:600;

}

.tgf_clear_filter:hover{

    color:#0f5fc0;

}


/*==========================================
        Part 2.2 SEARCH
==========================================*/

.tgf_education_library-filter-group{

    margin-bottom:25px;

}

.tgf_education_library-filter-group h6{

    font-size:16px;

    font-weight:600;

    color:#17325C;

    margin-bottom:12px;

}

.tgf_education_library-input{

    position:relative;

}

.tgf_education_library-input i{

    position:absolute;

    left:18px;

    top:17px;

    color:#8c98b5;

}

.tgf_education_library-input input{

    width:100%;

    height:50px;

    border:1px solid #dce6f4;

    border-radius:12px;

    padding-left:48px;

    outline:none;

    transition:.3s;

}

.tgf_education_library-input input:focus{

    border-color:#1d72d8;

    box-shadow:0 0 0 4px rgba(29,114,216,.12);

}


/*==========================================
      Part 2.3  CHECKBOX
==========================================*/

.tgf_checkbox{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:12px;

    cursor:pointer;

}

.tgf_checkbox input{

    width:18px;

    height:18px;

    accent-color:#1d72d8;

}

.tgf_checkbox span{

    color:#4b5563;

    font-size:15px;

    transition:.3s;

}

.tgf_checkbox:hover span{

    color:#1d72d8;

}

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

.tgf_education_library-sidebar-buttons{

    margin-top:35px;

}

.tgf_apply_btn{

    width:100%;

    height:52px;

    border:none;

    border-radius:50px;

    background:linear-gradient(135deg,#1d72d8,#4ea5ff);

    color:#fff;

    font-weight:600;

    transition:.3s;

}

.tgf_apply_btn:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 35px rgba(29,114,216,.35);

}

.tgf_reset_btn{

    width:100%;

    height:52px;

    margin-top:15px;

    border:2px solid #1d72d8;

    border-radius:50px;

    background:#fff;

    color:#1d72d8;

    font-weight:600;

    transition:.3s;

}

.tgf_reset_btn:hover{

    background:#1d72d8;

    color:#fff;

}

@media(max-width:991px){

.tgf_education_library-sidebar{

    position:relative;

    top:0;

    margin-bottom:30px;

}

}

@media(max-width:767px){

.tgf_education_library-content{

    padding:50px 0;

}

.tgf_education_library-sidebar{

    padding:20px;

}

.tgf_education_library-sidebar-header{

    flex-direction:column;

    align-items:flex-start;

    gap:10px;

}

}

/*====================================
    Part 3 CSS
=====================================*/


/*======================================
        TOOLBAR
======================================*/

.tgf_education_library-toolbar{

    background:#fff;

    border-radius:18px;

    padding:18px 25px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    box-shadow:0 10px 35px rgba(0,0,0,.06);
     margin-bottom:35px;


}


.tgf_toolbar_left{

    min-width:180px;

}

.tgf_result_badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    background:#eef5ff;

    color:#1d72d8;

    padding:10px 18px;

    border-radius:50px;

    font-weight:600;

}


.tgf_toolbar_center{

    flex:1;

}
/*======================================
        RESULTS
======================================*/

.tgf_toolbar_results h5{

    margin:0;

    font-size:18px;

    font-weight:600;

    color:#17325C;

}

.tgf_toolbar_results span{

    color:#1d72d8;

    font-weight:700;

}

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

.tgf_toolbar_search{

    position:relative;

}

.tgf_toolbar_search i{

    position:absolute;

    left:18px;

    top:15px;

    color:#8a98b8;

}

.tgf_toolbar_right{

    display:flex;

    gap:12px;

    align-items:center;

}

.tgf_toolbar_search input{

    
    width:100%;

    height:48px;

    border-radius:50px;

    border:1px solid #dce6f4;

    padding-left:48px;

}

.tgf_toolbar_search input:focus{

    border-color:#1d72d8;

    box-shadow:0 0 0 4px rgba(29,114,216,.12);

}

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

.tgf_toolbar_actions{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:12px;

}

/*======================================
        SORT
======================================*/

/* .tgf_toolbar_sort{

    width:170px;

    height:50px;

    border:1px solid #dce6f4;

    border-radius:50px;

       padding:0 15px;

    outline:none;

    background:#fff;

    transition:.3s;

} */

.tgf_toolbar_sort{

    width:140px;

    height:48px;

    border-radius:50px;

    border:1px solid #dce6f4;

    padding:0 15px;

}


.tgf_toolbar_sort:focus{

    border-color:#1d72d8;

}

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

.tgf_view_btn{

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    background:#eef5ff;

    color:#1d72d8;

    transition:.3s;

}
.tgf_view_btn.active,
.tgf_view_btn:hover{

    background:#1d72d8;

    color:#fff;

}

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

.tgf_mobile_filter{

    display:none;

    width:50px;

    height:50px;

    border:none;

    border-radius:50%;

    background:#1d72d8;

    color:#fff;

}

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

@media(max-width:991px){

.tgf_toolbar_actions{

justify-content:flex-start;

margin-top:15px;

}

}

@media(max-width:767px){

.tgf_education_library-toolbar{

padding:20px;

}

.tgf_toolbar_results{

margin-bottom:15px;

}

.tgf_toolbar_actions{

flex-wrap:wrap;

}

.tgf_toolbar_sort{

width:100%;

}

.tgf_mobile_filter{

display:inline-flex;

align-items:center;

justify-content:center;

}

}


/*==========================================
       Part 4 – Premium Video Card 
==========================================*/

/*==================================================
            PREMIUM VIDEO CARD
==================================================*/

.tgf_video_card{

    width:100%;

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    display:flex;

    flex-direction:column;

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

    transition:.35s ease;

    border:1px solid #edf2f7;

    position:relative;

}

.tgf_video_card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 55px rgba(29,114,216,.15);

}

/*==================================================
            THUMBNAIL
==================================================*/

.tgf_video_thumbnail{

    position:relative;

    width:100%;

    aspect-ratio:16/9;

    overflow:hidden;

    background:#eef4fc;

}

.tgf_video_thumbnail::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(to top,
    rgba(0,0,0,.45),
    rgba(0,0,0,.05));

    opacity:0;

    transition:.35s;

    z-index:1;

}

.tgf_video_card:hover .tgf_video_thumbnail::before{

    opacity:1;

}

.tgf_video_thumbnail img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

    display:block;

}

.tgf_video_card:hover .tgf_video_thumbnail img{

    transform:scale(1.08);

}

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

.tgf_video_play{

    position:absolute;

    top:50%;

    left:50%;

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

    width:70px;

    height:70px;

    border-radius:50%;

    background:#1d72d8;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    text-decoration:none;

    z-index:2;

    transition:.35s;

}

.tgf_video_play:hover{

    background:#0d5fc0;

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

    color:#fff;

}

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

.tgf_video_free{

    position:absolute;

    top:15px;

    left:15px;

    z-index:3;

    background:#16a34a;

    color:#fff;

    padding:6px 12px;

    border-radius:30px;

    font-size:12px;

    font-weight:600;

}

.tgf_video_duration{

    position:absolute;

    bottom:15px;

    right:15px;

    z-index:3;

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

    color:#fff;

    padding:5px 10px;

    border-radius:20px;

    font-size:12px;

}

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

.tgf_video_body{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:22px;

}

.tgf_video_subject{

    display:inline-block;

    width:max-content;

    background:#eef5ff;

    color:#1d72d8;

    padding:6px 14px;

    border-radius:30px;

    font-size:12px;

    font-weight:600;

    margin-bottom:15px;

}

.tgf_video_body h4{

    font-size:22px;

    color:#17325C;

    font-weight:700;

    margin-bottom:12px;

    line-height:1.4;

}

.tgf_video_body p{

    color:#64748b;

    font-size:15px;

    line-height:26px;

    margin-bottom:15px;

}

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

.tgf_video_meta{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    color:#64748b;

    font-size:14px;

    margin-bottom:25px;

}

.tgf_video_meta span{

    display:flex;

    align-items:center;

    gap:6px;

}

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

.tgf_video_footer{

    margin-top:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.tgf_watch_btn{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:12px 22px;

    border-radius:50px;

    background:linear-gradient(135deg,#1d72d8,#4ea5ff);

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.tgf_watch_btn:hover{

    color:#fff;

    transform:translateY(-2px);

    box-shadow:0 12px 25px rgba(29,114,216,.30);

}

.tgf_favourite_btn{

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    background:#eef5ff;

    color:#1d72d8;

    transition:.35s;

}

.tgf_favourite_btn:hover{

    background:#1d72d8;

    color:#fff;

}

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

@media(max-width:991px){

.tgf_video_body h4{

font-size:20px;

}

}

@media(max-width:767px){

.tgf_video_body{

padding:18px;

}

.tgf_video_body h4{

font-size:18px;

}

.tgf_watch_btn{

padding:10px 18px;

font-size:14px;

}

}

/*=============================================
        Part 6 – Pagination CSS
============================================*/

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

.tgf_pagination_wrapper{

    margin-top:50px;

    display:flex;

    justify-content:center;

}

.tgf_pagination{

    display:flex;

    align-items:center;

    gap:12px;

    padding:0;

    margin:0;

    list-style:none;

}

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

.tgf_page_btn,
.tgf_page_number{

    width:46px;

    height:46px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    font-weight:600;

    font-size:15px;

    background:#fff;

    color:#17325C;

    border:1px solid #dce6f4;

    transition:.35s;

    box-shadow:0 5px 15px rgba(0,0,0,.05);

}

.tgf_page_btn:hover,
.tgf_page_number:hover{

    background:#1d72d8;

    border-color:#1d72d8;

    color:#fff;

    transform:translateY(-3px);

}

/*==========================================
        ACTIVE PAGE
==========================================*/

.tgf_page_number.active{

    background:linear-gradient(135deg,#1d72d8,#4ea5ff);

    border:none;

    color:#fff;

    box-shadow:0 12px 25px rgba(29,114,216,.35);

}

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

.tgf_page_dots{

    padding:0 5px;

    color:#64748b;

    font-size:18px;

    font-weight:700;

}

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

@media(max-width:576px){

.tgf_pagination{

    gap:8px;

}

.tgf_page_btn,
.tgf_page_number{

    width:40px;

    height:40px;

    font-size:14px;

}

}


/*==============================================
            Part 8 – Responsive Design
====================================================*/

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

/*==========================================
        Large Desktop
==========================================*/

@media (min-width:1400px){

.container{

    max-width:1320px;

}

}

/*==========================================
        Laptop
==========================================*/

@media (max-width:1199px){

/* Hero */

.tgf_education_library-hero{

    padding:70px 0;

}

.tgf_education_library-hero-content h1{

    font-size:46px;

}

.tgf_education_library-stats{

    gap:15px;

}

/* Toolbar */

.tgf_toolbar_actions{

    gap:8px;

}

.tgf_toolbar_sort{

    width:140px;

}

/* Card */

.tgf_video_body h4{

    font-size:20px;

}

}

/*==========================================
        Tablet
==========================================*/

@media (max-width:991px){

/* Hero */

.tgf_education_library-hero{

    padding:60px 0;

}

.tgf_education_library-hero-content{

    text-align:center;

}

.tgf_education_library-search{

    margin:30px auto;

}

.tgf_education_library-stats{

    margin-top:40px;

}

/* Sidebar */

.tgf_education_library-sidebar{

    position:relative;

    top:0;

    margin-bottom:30px;

}

/* Toolbar */

.tgf_education_library-toolbar{

    padding:20px;

}

.tgf_toolbar_results{

    margin-bottom:15px;

}

.tgf_toolbar_actions{

    justify-content:flex-start;

    flex-wrap:wrap;

    margin-top:15px;

}

/* Video */

.tgf_video_card{

    margin-bottom:20px;

}

}

/*==========================================
        Mobile
==========================================*/

@media (max-width:767px){

/* Hero */

.tgf_education_library-hero{

    padding:50px 0;

}

.tgf_education_library-hero-content h1{

    font-size:34px;

}

.tgf_education_library-hero-content p{

    font-size:15px;

    line-height:26px;

}

.tgf_education_library-search{

    max-width:100%;

}

.tgf_education_library-search input{

    padding-left:18px;

}

.tgf_education_library-search button{

    width:60px;

}

/* Stats */

.tgf_education_library-stats{

    grid-template-columns:1fr;

}

/* Sidebar */

.tgf_education_library-sidebar{

    padding:20px;

}

.tgf_education_library-sidebar-header{

    flex-direction:column;

    align-items:flex-start;

    gap:10px;

}

/* Toolbar */

.tgf_education_library-toolbar{

    display:block;

}

.tgf_toolbar_left{

    margin-bottom:15px;

}

.tgf_toolbar_center{

    margin-bottom:15px;

}

.tgf_toolbar_right{

    justify-content:flex-start;

    flex-wrap:wrap;

}

/* Sort */

.tgf_toolbar_sort{

    width:100%;

}

/* Video */

.tgf_video_body{

    padding:18px;

}

.tgf_video_body h4{

    font-size:18px;

}

.tgf_video_footer{

    flex-direction:column;

    gap:15px;

    align-items:stretch;

}

.tgf_watch_btn{

    justify-content:center;

    width:100%;

}

.tgf_favourite_btn{

    width:100%;

    border-radius:50px;

}

/* Pagination */

.tgf_pagination{

    gap:6px;

}

.tgf_page_btn,
.tgf_page_number{

    width:38px;

    height:38px;

    font-size:14px;

}

}

/*==========================================
        Small Mobile
==========================================*/

@media (max-width:480px){

.tgf_education_library-hero-content h1{

    font-size:28px;

}

.tgf_education_library-badge{

    font-size:13px;

}

.tgf_video_thumbnail{

    height:190px;

}

.tgf_toolbar_results h5{

    font-size:16px;

}

.tgf_video_subject{

    font-size:11px;

}

.tgf_video_body h4{

    font-size:17px;

}

.tgf_video_body p{

    font-size:14px;

}

}



/*==================================================
        PART 10.1
        PREMIUM GLOBAL ANIMATIONS
==================================================*/


/*==========================================
        FADE UP
==========================================*/

.tgf_fade_up{

    animation:tgfFadeUp .8s ease forwards;

}

@keyframes tgfFadeUp{

    0%{

        opacity:0;

        transform:translateY(40px);

    }

    100%{

        opacity:1;

        transform:translateY(0);

    }

}

/*==========================================
        FADE DOWN
==========================================*/

.tgf_fade_down{

    animation:tgfFadeDown .8s ease forwards;

}

@keyframes tgfFadeDown{

    0%{

        opacity:0;

        transform:translateY(-40px);

    }

    100%{

        opacity:1;

        transform:translateY(0);

    }

}

/*==========================================
        FADE LEFT
==========================================*/

.tgf_fade_left{

    animation:tgfFadeLeft .8s ease forwards;

}

@keyframes tgfFadeLeft{

    0%{

        opacity:0;

        transform:translateX(-50px);

    }

    100%{

        opacity:1;

        transform:translateX(0);

    }

}

/*==========================================
        FADE RIGHT
==========================================*/

.tgf_fade_right{

    animation:tgfFadeRight .8s ease forwards;

}

@keyframes tgfFadeRight{

    0%{

        opacity:0;

        transform:translateX(50px);

    }

    100%{

        opacity:1;

        transform:translateX(0);

    }

}

/*==========================================
        ZOOM IN
==========================================*/

.tgf_zoom_in{

    animation:tgfZoomIn .6s ease forwards;

}

@keyframes tgfZoomIn{

    0%{

        opacity:0;

        transform:scale(.85);

    }

    100%{

        opacity:1;

        transform:scale(1);

    }

}

/*==========================================
        SCALE HOVER
==========================================*/

.tgf_scale{

    transition:.35s;

}

.tgf_scale:hover{

    transform:scale(1.04);

}

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

.tgf_float{

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

}

@keyframes tgfFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

/*==========================================
        ROTATE
==========================================*/

.tgf_rotate{

    transition:.4s;

}

.tgf_rotate:hover{

    transform:rotate(8deg);

}

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

.tgf_shadow{

    transition:.35s;

}

.tgf_shadow:hover{

    box-shadow:0 25px 60px rgba(29,114,216,.20);

}

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

.tgf_image_zoom{

    overflow:hidden;

}

.tgf_image_zoom img{

    transition:transform .6s ease;

}

.tgf_image_zoom:hover img{

    transform:scale(1.08);

}

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

.tgf_btn_effect{

    position:relative;

    overflow:hidden;

}

.tgf_btn_effect::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

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

    transition:.5s;

}

.tgf_btn_effect:hover::before{

    left:100%;

}

/*==========================================
        RIPPLE
==========================================*/

.tgf_ripple{

    position:relative;

    overflow:hidden;

}

.tgf_ripple::after{

    content:"";

    position:absolute;

    width:20px;

    height:20px;

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

    border-radius:50%;

    transform:scale(0);

    opacity:0;

    transition:.5s;

}

.tgf_ripple:hover::after{

    transform:scale(12);

    opacity:0;

}

/*==========================================
        DELAY CLASSES
==========================================*/

.delay-1{

    animation-delay:.1s;

}

.delay-2{

    animation-delay:.2s;

}

.delay-3{

    animation-delay:.3s;

}

.delay-4{

    animation-delay:.4s;

}

.delay-5{

    animation-delay:.5s;

}


/*==================================================
        PART 10.2
        HERO PREMIUM ANIMATIONS
==================================================*/

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

.tgf_education_library-hero{

    position:relative;

    overflow:hidden;

}

/*==========================================
        BACKGROUND CIRCLE 1
==========================================*/

.tgf_education_library-hero::before{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    top:-180px;

    right:-180px;

    border-radius:50%;

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

    animation:heroCircleOne 18s linear infinite;

}

/*==========================================
        BACKGROUND CIRCLE 2
==========================================*/

.tgf_education_library-hero::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    left:-120px;

    bottom:-150px;

    border-radius:50%;

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

    animation:heroCircleTwo 14s linear infinite;

}

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

.tgf_education_library-hero-content{

    position:relative;

    z-index:5;

    animation:heroContent .9s ease;

}

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

.tgf_education_library-hero-content h1{

    animation:titleAnimation .9s ease;

}

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

.tgf_education_library-hero-content p{

    animation:textAnimation 1.1s ease;

}

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

.tgf_education_library-search{

    animation:searchAnimation 1.3s ease;

}

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

.tgf_education_library-badge{

    animation:badgeAnimation 1s ease;

}

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

.tgf_education_library-stat-card{

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

}

.tgf_education_library-stat-card:nth-child(2){

    animation-delay:.3s;

}

.tgf_education_library-stat-card:nth-child(3){

    animation-delay:.6s;

}

.tgf_education_library-stat-card:nth-child(4){

    animation-delay:.9s;

}

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

@keyframes heroCircleOne{

    0%{

        transform:translateX(0) translateY(0);

    }

    50%{

        transform:translateX(-40px) translateY(20px);

    }

    100%{

        transform:translateX(0) translateY(0);

    }

}

@keyframes heroCircleTwo{

    0%{

        transform:translateX(0);

    }

    50%{

        transform:translateX(35px);

    }

    100%{

        transform:translateX(0);

    }

}

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

@keyframes heroContent{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@keyframes titleAnimation{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@keyframes textAnimation{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@keyframes searchAnimation{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@keyframes badgeAnimation{

    from{

        opacity:0;

        transform:scale(.8);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/*==========================================
        FLOATING CARDS
==========================================*/

@keyframes statFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

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

.tgf_education_library-stat-card{

    transition:.35s;

}

.tgf_education_library-stat-card:hover{

    transform:translateY(-10px) scale(1.03);

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

}

/*==========================================
        SEARCH HOVER
==========================================*/

.tgf_education_library-search{

    transition:.35s;

}

.tgf_education_library-search:hover{

    box-shadow:0 25px 60px rgba(29,114,216,.25);

}

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

.tgf_education_library-search button{

    transition:.35s;

}

.tgf_education_library-search button:hover{

    transform:scale(1.08);

}

/*==================================================
        PART 10.3
        PREMIUM SIDEBAR ANIMATIONS
==================================================*/

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

.tgf_education_library-sidebar{

    animation:tgfSidebarFade .7s ease;

}

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

@keyframes tgfSidebarFade{

    from{

        opacity:0;

        transform:translateX(-35px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/*==========================================
        FILTER GROUP
==========================================*/

.tgf_education_library-filter-group{

    transition:.35s;

    padding-bottom:18px;

    margin-bottom:20px;

    border-bottom:1px solid #edf2f7;

}

.tgf_education_library-filter-group:last-child{

    border-bottom:none;

    margin-bottom:0;

}

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

.tgf_education_library-filter-group h6{

    display:flex;

    justify-content:space-between;

    align-items:center;

    cursor:pointer;

    transition:.3s;

}

.tgf_education_library-filter-group h6:hover{

    color:#1d72d8;

}

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

.tgf_education_library-input{

    transition:.35s;

}

.tgf_education_library-input:hover{

    transform:translateY(-2px);

}

.tgf_education_library-input input{

    transition:.35s;

}

.tgf_education_library-input input:focus{

    border-color:#1d72d8;

    box-shadow:0 0 0 5px rgba(29,114,216,.12);

}

/*==========================================
        CHECKBOX
==========================================*/

.tgf_checkbox{

    display:flex;

    align-items:center;

    gap:12px;

    padding:8px 12px;

    border-radius:10px;

    transition:.3s;

    cursor:pointer;

}

.tgf_checkbox:hover{

    background:#eef5ff;

    transform:translateX(6px);

}

.tgf_checkbox input{

    accent-color:#1d72d8;

    transition:.3s;

}

.tgf_checkbox span{

    transition:.3s;

}

.tgf_checkbox:hover span{

    color:#1d72d8;

    font-weight:500;

}

/*==========================================
        SUBJECT LIST
==========================================*/
.tgf_more_subjects{

    display:none;

}


/*==========================================
        CHECKED
==========================================*/

.tgf_checkbox input:checked + span{

    color:#1d72d8;

    font-weight:600;

}

/*==========================================
        VIEW MORE
==========================================*/

.tgf_view_more{

      /* display:inline-flex;

    align-items:center;

    gap:6px;

    margin-top:12px;

    color:#1d72d8;

    font-size:14px;

    font-weight:600;

    text-decoration:none;

    transition:.35s; */

        display:inline-flex;

    align-items:center;

    gap:6px;

    margin-top:12px;

    color:#1d72d8;

    font-size:14px;

    font-weight:600;

    text-decoration:none;

    cursor:pointer;

}

.tgf_view_more:hover{

    transform:translateX(6px);
    color:#0f5fc0;

}

.tgf_view_more i{
     font-size:14px;
    transition:.35s;

}

.tgf_view_more.active i{

    transform:rotate(180deg);

}

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

.tgf_apply_btn,
.tgf_reset_btn{

    transition:.35s;

}

.tgf_apply_btn:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 35px rgba(29,114,216,.35);

}

.tgf_reset_btn:hover{

    transform:translateY(-4px);

}

/*==========================================
        CLEAR FILTER
==========================================*/

.tgf_clear_filter{

    transition:.35s;

}

.tgf_clear_filter:hover{

    color:#0d5fc0;

    transform:translateX(4px);

}

/*==========================================
        STICKY EFFECT
==========================================*/

.tgf_education_library-sidebar{

    transition:.35s;

}

.tgf_education_library-sidebar:hover{

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

}

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

.tgf_education_library-sidebar::-webkit-scrollbar{

    width:6px;

}

.tgf_education_library-sidebar::-webkit-scrollbar-thumb{

    background:#d8e4f8;

    border-radius:20px;

}

.tgf_education_library-sidebar::-webkit-scrollbar-thumb:hover{

    background:#1d72d8;

}

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

@media(max-width:767px){

.tgf_checkbox{

padding:10px;

}

.tgf_checkbox:hover{

transform:none;

}

}

/*==================================================
        PART 10.4
        PREMIUM TOOLBAR ANIMATIONS
==================================================*/

/*==========================================
        TOOLBAR
==========================================*/

.tgf_education_library-toolbar{

    position:relative;

    overflow:hidden;

    animation:tgfToolbarFade .7s ease;

}

/*==========================================
        TOOLBAR FADE
==========================================*/

@keyframes tgfToolbarFade{

    from{

        opacity:0;

        transform:translateY(-30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==========================================
        TOOLBAR HOVER
==========================================*/

.tgf_education_library-toolbar{

    transition:.35s;

}

.tgf_education_library-toolbar:hover{

    box-shadow:0 25px 55px rgba(29,114,216,.12);

}

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

.tgf_result_badge{

    transition:.35s;

    cursor:default;

}

.tgf_result_badge:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 25px rgba(29,114,216,.25);

}

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

.tgf_toolbar_search{

    position:relative;

    transition:.35s;
    width: 100%;

}

.tgf_search_suggestion{

    /* position:absolute; */
    top:calc(100% + 8px);
      left:0;

    right:0;
    width:100%;

    background:#fff;

    border-radius:15px;

    margin-top:8px;

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

    display:none;

    max-height:300px;

    overflow-y:auto;

    z-index:999;

}

.tgf_search_item{

    padding:12px 18px;

    cursor:pointer;

    border-bottom:1px solid #eee;

     transition:.25s;

}

.tgf_search_empty{

    padding:14px 18px;

    color:#999;

    text-align:center;

    font-size:14px;

    cursor:default;

}

.tgf_search_item:hover{

    background:#f4f8ff;

}

.tgf_search_item + .tgf_search_item{

    border-top:1px solid #edf2fa;

}
.tgf_search_item:last-child{

    border-bottom:none;
}

.tgf_toolbar_search:hover{

    transform:translateY(-2px);

}

.tgf_toolbar_search input{

    transition:.35s;

}

.tgf_toolbar_search input:focus{

    border-color:#1d72d8;

    box-shadow:0 0 0 5px rgba(29,114,216,.12);

}

.tgf_toolbar_search i{

    transition:.35s;

}

.tgf_toolbar_search:hover i{

    color:#1d72d8;

}

/*==========================================
        SORT
==========================================*/

.tgf_toolbar_sort_wrapper{

    transition:.35s;

}

.tgf_toolbar_sort_wrapper:hover{

    transform:translateY(-2px);

}

.tgf_toolbar_sort{

    transition:.35s;

}

.tgf_toolbar_sort:focus{

    border-color:#1d72d8;

    box-shadow:0 0 0 5px rgba(29,114,216,.12);

}

/*==========================================
        GRID/LIST BUTTON
==========================================*/

.tgf_view_btn{

    transition:.35s;

}

.tgf_view_btn:hover{

    transform:translateY(-3px) scale(1.08);

}

.tgf_view_btn.active{

    animation:tgfPulse 2s infinite;

}

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

.tgf_mobile_filter{

    transition:.35s;

}

.tgf_mobile_filter:hover{

    transform:rotate(15deg);

}

/*==========================================
        PULSE
==========================================*/

@keyframes tgfPulse{

    0%{

        box-shadow:0 0 0 0 rgba(29,114,216,.35);

    }

    70%{

        box-shadow:0 0 0 14px rgba(29,114,216,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(29,114,216,0);

    }

}

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

.tgf_view_btn,
.tgf_mobile_filter{

    position:relative;

    overflow:hidden;

}

.tgf_view_btn::before,
.tgf_mobile_filter::before{

    content:"";

    position:absolute;

    width:0;

    height:0;

    left:50%;

    top:50%;

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

    border-radius:50%;

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

    transition:.45s;

}

.tgf_view_btn:hover::before,
.tgf_mobile_filter:hover::before{

    width:120px;

    height:120px;

}

/*==========================================
        SEARCH SHINE
==========================================*/

.tgf_toolbar_search::after{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60px;

    height:100%;

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

    transform:skewX(-20deg);

}

.tgf_toolbar_search:hover::after{

    animation:tgfSearchShine .9s linear;

}

@keyframes tgfSearchShine{

    from{

        left:-120%;

    }

    to{

        left:120%;

    }

}

/*==========================================
        STAGGER EFFECT
==========================================*/

.tgf_toolbar_left{

    animation:tgfFadeLeft .7s ease;

}

.tgf_toolbar_center{

    animation:tgfFadeUp .9s ease;

}

.tgf_toolbar_right{

    animation:tgfFadeRight 1s ease;

}

@keyframes tgfFadeLeft{

    from{

        opacity:0;

        transform:translateX(-30px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes tgfFadeRight{

    from{

        opacity:0;

        transform:translateX(30px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes tgfFadeUp{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media(max-width:767px){

.tgf_toolbar_search:hover,
.tgf_toolbar_sort_wrapper:hover{

transform:none;

}

.tgf_view_btn:hover{

transform:none;

}

}

/*==================================================
        PART 10.5
        PREMIUM VIDEO CARD ANIMATIONS
==================================================*/

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

.tgf_video_card{

    position:relative;

    overflow:hidden;

    transition:all .35s ease;

    animation:tgfCardFade .8s ease;

}

@keyframes tgfCardFade{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

.tgf_video_card:hover{

    transform:translateY(-12px);

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

}

/*==========================================
        THUMBNAIL
==========================================*/

.tgf_video_thumbnail{

    position:relative;

    overflow:hidden;

}

/* Dark Overlay */

.tgf_video_thumbnail::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:100%;

    background:linear-gradient(to top,
    rgba(0,0,0,.55),
    rgba(0,0,0,.05));

    opacity:0;

    transition:.35s;

    z-index:1;

}

.tgf_video_card:hover .tgf_video_thumbnail::before{

    opacity:1;

}

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

.tgf_video_thumbnail img{

    transition:transform .7s ease;

}

.tgf_video_card:hover .tgf_video_thumbnail img{

    transform:scale(1.10);

}

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

.tgf_video_play{

    z-index:5;

    opacity:0;

    transform:translate(-50%,-50%) scale(.8);

    transition:.35s;

}

.tgf_video_card:hover .tgf_video_play{

    opacity:1;

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

}

/* Pulse */

.tgf_video_play::after{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

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

    animation:playPulse 2s infinite;

}

@keyframes playPulse{

    0%{

        transform:scale(1);

        opacity:1;

    }

    100%{

        transform:scale(1.6);

        opacity:0;

    }

}

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

.tgf_video_free{

    transition:.35s;

}

.tgf_video_card:hover .tgf_video_free{

    transform:translateY(-3px);

}

/*==========================================
        DURATION
==========================================*/

.tgf_video_duration{

    transition:.35s;

}

.tgf_video_card:hover .tgf_video_duration{

    background:#1d72d8;

}

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

.tgf_video_subject{

    transition:.35s;

}

.tgf_video_card:hover .tgf_video_subject{

    background:#1d72d8;

    color:#fff;

}

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

.tgf_video_body h4{

    transition:.35s;

}

.tgf_video_card:hover h4{

    color:#1d72d8;

}

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

.tgf_video_meta span{

    transition:.35s;

}

.tgf_video_card:hover .tgf_video_meta span{

    color:#1d72d8;

}

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

.tgf_watch_btn{

    position:relative;

    overflow:hidden;

}

.tgf_watch_btn::before{

    content:"";

    position:absolute;

    left:-100%;

    top:0;

    width:100%;

    height:100%;

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

    transform:skewX(-25deg);

    transition:.6s;

}

.tgf_watch_btn:hover::before{

    left:120%;

}

.tgf_watch_btn:hover{

    transform:translateY(-3px);

}

/*==========================================
        FAVOURITE
==========================================*/

.tgf_favourite_btn{

    transition:.35s;

}

.tgf_favourite_btn:hover{

    background:#ff4d6d;

    color:#fff;

    transform:rotate(15deg) scale(1.1);

}

/*==========================================
        STAGGER
==========================================*/

.tgf_video_grid .col-xl-4:nth-child(1){

    animation-delay:.1s;

}

.tgf_video_grid .col-xl-4:nth-child(2){

    animation-delay:.2s;

}

.tgf_video_grid .col-xl-4:nth-child(3){

    animation-delay:.3s;

}

.tgf_video_grid .col-xl-4:nth-child(4){

    animation-delay:.4s;

}

.tgf_video_grid .col-xl-4:nth-child(5){

    animation-delay:.5s;

}

.tgf_video_grid .col-xl-4:nth-child(6){

    animation-delay:.6s;

}

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

.tgf_video_card::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:4px;

    background:linear-gradient(90deg,#1d72d8,#4ea5ff);

    transform:scaleX(0);

    transition:.35s;

}

.tgf_video_card:hover::after{

    transform:scaleX(1);

}

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

@media(max-width:767px){

.tgf_video_card:hover{

transform:none;

}

.tgf_video_thumbnail img{

transition:.35s;

}

.tgf_video_card:hover .tgf_video_thumbnail img{

transform:none;

}

.tgf_video_play{

opacity:1;

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

}

}

/*==================================================
        PART 10.6
        PREMIUM BUTTON ANIMATIONS
==================================================*/

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

.tgf_watch_btn,
.tgf_apply_btn,
.tgf_reset_btn,
.tgf_page_btn,
.tgf_page_number,
.tgf_view_btn,
.tgf_mobile_filter,
.tgf_favourite_btn{

    position:relative;

    overflow:hidden;

    transition:all .35s ease;

    cursor:pointer;

}

/*==========================================
        BUTTON SHINE EFFECT
==========================================*/

.tgf_watch_btn::before,
.tgf_apply_btn::before,
.tgf_reset_btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

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

    transform:skewX(-25deg);

}

.tgf_watch_btn:hover::before,
.tgf_apply_btn:hover::before,
.tgf_reset_btn:hover::before{

    animation:tgfShine .8s linear;

}

@keyframes tgfShine{

    from{

        left:-120%;

    }

    to{

        left:150%;

    }

}

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

.tgf_watch_btn:hover,
.tgf_apply_btn:hover,
.tgf_reset_btn:hover{

    transform:translateY(-4px);

}

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

.tgf_watch_btn:hover{

    box-shadow:0 18px 35px rgba(29,114,216,.30);

}

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

.tgf_apply_btn:hover{

    box-shadow:0 18px 35px rgba(29,114,216,.35);

}

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

.tgf_reset_btn:hover{

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

}

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

.tgf_favourite_btn:hover{

    background:#ff4d6d;

    color:#fff;

    animation:heartBeat .6s;

}

@keyframes heartBeat{

    0%{

        transform:scale(1);

    }

    25%{

        transform:scale(1.2);

    }

    50%{

        transform:scale(.95);

    }

    75%{

        transform:scale(1.15);

    }

    100%{

        transform:scale(1);

    }

}

/*==========================================
        GRID/LIST BUTTON
==========================================*/

.tgf_view_btn:hover{

    transform:translateY(-3px) rotate(5deg);

}

.tgf_view_btn.active{

    animation:gridPulse 2s infinite;

}

@keyframes gridPulse{

    0%{

        box-shadow:0 0 0 0 rgba(29,114,216,.35);

    }

    70%{

        box-shadow:0 0 0 12px rgba(29,114,216,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(29,114,216,0);

    }

}

/*==========================================
        MOBILE FILTER BUTTON
==========================================*/

.tgf_mobile_filter:hover{

    transform:rotate(15deg);

}

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

.tgf_page_btn:hover,
.tgf_page_number:hover{

    transform:translateY(-4px);

    box-shadow:0 12px 25px rgba(29,114,216,.25);

}

/*==========================================
        ACTIVE PAGE
==========================================*/

.tgf_page_number.active{

    animation:pageGlow 2s infinite;

}

@keyframes pageGlow{

    0%{

        box-shadow:0 0 0 0 rgba(29,114,216,.30);

    }

    70%{

        box-shadow:0 0 0 14px rgba(29,114,216,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(29,114,216,0);

    }

}

/*==========================================
        BUTTON CLICK EFFECT
==========================================*/

.tgf_watch_btn:active,
.tgf_apply_btn:active,
.tgf_reset_btn:active,
.tgf_view_btn:active,
.tgf_page_btn:active,
.tgf_page_number:active{

    transform:scale(.95);

}

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

button:disabled,
.tgf_watch_btn.disabled{

    opacity:.55;

    cursor:not-allowed;

    pointer-events:none;

}

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

.tgf_watch_btn i,
.tgf_apply_btn i,
.tgf_reset_btn i{

    transition:.35s;

}

.tgf_watch_btn:hover i{

    transform:translateX(5px);

}

.tgf_apply_btn:hover i{

    transform:rotate(-10deg);

}

.tgf_reset_btn:hover i{

    transform:rotate(180deg);

}

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

@media(max-width:767px){

.tgf_watch_btn:hover,
.tgf_apply_btn:hover,
.tgf_reset_btn:hover,
.tgf_page_btn:hover,
.tgf_page_number:hover{

    transform:none;

}

}

/*==================================================
        PART 10.7
        PREMIUM SKELETON & LOADING ANIMATIONS
==================================================*/

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

.tgf_loading_wrapper{

    position:relative;

    width:100%;

}

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

.tgf_skeleton_card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    border:1px solid #edf2f7;

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

    animation:tgfSkeletonFade .6s ease;

}

/*==========================================
        FADE
==========================================*/

@keyframes tgfSkeletonFade{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==========================================
        THUMBNAIL
==========================================*/

.tgf_skeleton_thumbnail{

    width:100%;

    aspect-ratio:16/9;

    background:#e8eef8;

    position:relative;

    overflow:hidden;

}

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

.tgf_skeleton_body{

    padding:20px;

}

.tgf_skeleton_badge{

    width:90px;

    height:24px;

    border-radius:30px;

    margin-bottom:18px;

    background:#e8eef8;

}

.tgf_skeleton_title{

    width:100%;

    height:18px;

    border-radius:6px;

    margin-bottom:12px;

    background:#e8eef8;

}

.tgf_skeleton_title.small{

    width:70%;

}

.tgf_skeleton_text{

    width:85%;

    height:15px;

    border-radius:6px;

    margin-bottom:25px;

    background:#e8eef8;

}

.tgf_skeleton_button{

    width:140px;

    height:46px;

    border-radius:50px;

    background:#e8eef8;

}

/*==========================================
        SHIMMER
==========================================*/

.shimmer{

    position:relative;

    overflow:hidden;

    background:#e8eef8;

}

.shimmer::before{

    content:"";

    position:absolute;

    top:0;

    left:-150px;

    width:150px;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.75),

        transparent

    );

    animation:tgfShimmer 1.3s infinite;

}

@keyframes tgfShimmer{

    100%{

        left:120%;

    }

}

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

.tgf_loading_overlay{

    position:absolute;

    inset:0;

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

    backdrop-filter:blur(3px);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99;

}

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

.tgf_loader{

    width:60px;

    height:60px;

    border:5px solid #dce6f4;

    border-top:5px solid #1d72d8;

    border-radius:50%;

    animation:tgfSpin .9s linear infinite;

}

@keyframes tgfSpin{

    to{

        transform:rotate(360deg);

    }

}

/*==========================================
        NO RECORD
==========================================*/

.tgf_no_record{

    background:#fff;

    border-radius:20px;

    padding:80px 30px;

    text-align:center;

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

    animation:tgfNoRecord .7s ease;

}

@keyframes tgfNoRecord{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.tgf_no_record i{

    font-size:70px;

    color:#1d72d8;

    margin-bottom:20px;

    animation:tgfBounce 2s infinite;

}

@keyframes tgfBounce{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

.tgf_no_record h3{

    color:#17325C;

    font-size:28px;

    font-weight:700;

    margin-bottom:10px;

}

.tgf_no_record p{

    color:#64748b;

    font-size:15px;

}

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

.tgf_video_card{

    animation:tgfLoaded .45s ease;

}

@keyframes tgfLoaded{

    from{

        opacity:0;

        transform:scale(.96);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

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

@media(max-width:767px){

.tgf_no_record{

padding:50px 20px;

}

.tgf_no_record i{

font-size:55px;

}

.tgf_no_record h3{

font-size:22px;

}

}


/*====================================================================================================================================
   =============================================LOGIN MODEL CSS=====================================================================
======================================================================================================================================*/


/*====================================================
           Part 1 – CSS (Modal Layout)
====================================================*/

/*====================================================
            PREMIUM LOGIN MODAL
====================================================*/

#loginModal .modal-dialog{

    max-width:1350px;

}

#loginModal .modal-content{

    border:none;

    border-radius:28px;

    overflow:hidden;

    background:#ffffff;

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

}

#loginModal .modal-backdrop{

    backdrop-filter:blur(6px);

}

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

.login-wrapper{

    min-height:760px;

}

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

.login-left{

    position:relative;

    min-height:760px;

    overflow:hidden;

}

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

.login-right{

    min-height:760px;

    background:#fff;

    overflow-y:auto;

}

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

.login-close{

    position:absolute;

    top:24px;

    right:24px;

    width:54px;

    height:54px;

    border:none;

    border-radius:50%;

    background:#ffffff;

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

    z-index:999;

    transition:.35s;

}

.login-close:hover{

    transform:rotate(90deg);

}

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

.login-right::-webkit-scrollbar{

    width:8px;

}

.login-right::-webkit-scrollbar-thumb{

    background:#1d72d8;

    border-radius:20px;

}

.login-right::-webkit-scrollbar-track{

    background:#edf2f7;

}

/*=========================================================
                PART 2 - LEFT GREEN PANEL
=========================================================*/

.login-left{

    position:relative;

    height:100%;

    min-height:760px;

    overflow:hidden;

    background:linear-gradient(135deg,#1d72d8,#4ea5ff);

    display:flex;

    flex-direction:column;

}

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

.left-login-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(255,255,255,.02),
        rgba(0,0,0,.08)
    );

    z-index:1;

}

/*=========================================================
                DECORATIVE CIRCLES
=========================================================*/

.left-login-circle{

    position:absolute;

    border-radius:50%;

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

    z-index:2;

}

.left-login-circle-1{

    width:230px;

    height:230px;

    left:-90px;

    top:-90px;

}

.left-login-circle-2{

    width:250px;

    height:250px;

    right:-90px;

    bottom:-90px;

}

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

.left-login-content{

    position:relative;

    z-index:10;

    text-align:center;

    padding:60px 35px 30px;

}

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

.left-logo-model{

    width:150px;

    height:150px;

    margin:auto;

    background:#fff;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

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

}

.left-logo-model img{

    max-width:90px;

    max-height:90px;

    object-fit:contain;

}

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

.left-login-content h2{

    margin:28px 0 10px;

    color:#fff;

    font-size:30px;

    font-weight:800;

    line-height:1.08;

}

.left-login-content p{

    margin-top:18px;

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

    font-size:18px;

    line-height:1.8;

}

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

.left-login-facilities{

    position:relative;

    z-index:10;

    padding:0 38px 40px;

}

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

.facility-login-title{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    margin-bottom:28px;

}

.facility-login-title span{

    flex:1;

    height:2px;

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

}

.facility-login-title h4{
    margin:0;
    color:#fff;
    font-size:17px;
    font-weight:700;
    letter-spacing:1px;
    white-space:nowrap;
}

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

.left-login-facilities ul{

    margin:0;

    padding:0;

    list-style:none;

}

.left-login-facilities li{

    display:flex;

    align-items:flex-start;

    gap:15px;

    padding:14px 0;

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

    transition:.35s;

}

.left-login-facilities li:last-child{

    border-bottom:none;

}

.left-login-facilities li:hover{

    padding-left:8px;

}

/*=========================================================
                BULLET
=========================================================*/

.left-login-facilities li i{
    color:#fff;
    font-size:9px;
    margin-top:0;
}

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

.left-login-facilities li div{
    flex:1;
}

.left-login-facilities h5{
    margin:0 0 5px;
    color:#fff;
    font-size:14px;
    font-weight:550;
}


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

.left-logo-model{

    transition:.35s;

}

.left-logo-model:hover{

    transform:scale(1.06);

}

.left-login-facilities li:hover i{

    transform:scale(1.2);

}

.left-login-facilities li:hover h5{

    color:#fff;
  

}

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

@media(max-width:1200px){

.left-login-content h2{

    font-size:46px;

}

.left-login-content p{

    font-size:16px;

}

.left-logo-model{

    width:130px;

    height:130px;

}

.left-logo-model img{

    max-width:75px;

}

.left-login-facilities h5{

    font-size:18px;

}



}

@media(max-width:991px){

.login-left{

    min-height:auto;

}

.left-login-content{

    padding:45px 30px 25px;

}

.left-login-facilities{

    padding:20px 30px 35px;

}

}

@media(max-width:576px){

.left-login-content h2{

    font-size:34px;

}

.left-logo-model{

    width:110px;

    height:110px;

}

.left-logo-model img{

    max-width:60px;

}

.left-login-facilities{

    padding:20px;

}

.facility-login-title h4{

    font-size:17px;

}

.left-login-facilities h5{

    font-size:16px;

}

}

/*=========================================================
                PART 3 - RIGHT PANEL
=========================================================*/

.login-right{

    background:#fff;

    height:760px;

    overflow-y:auto;

    padding:45px;

}

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

.login-right::-webkit-scrollbar{

    width:8px;

}

.login-right::-webkit-scrollbar-thumb{

    background:#1aa85b;

    border-radius:20px;

}

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

.login-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:35px;

}

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

.login-header-left{

    display:flex;

    align-items:center;

}

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

.login-header-icon{

    width:72px;

    height:72px;

    border-radius:18px;

    background:linear-gradient(135deg,#1d72d8,#4ea5ff);

    display:flex;

    justify-content:center;

    align-items:center;

    margin-right:20px;

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

}

.login-header-icon i{

    color:#fff;

    font-size:30px;

}

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

.login-header-content h2{
    margin:0;
    font-size:30px;
    font-weight:800;
    color:#1f2937;
}

.login-header-content p{

    margin-top:8px;

    color:#6b7280;

    font-size:16px;

}



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

.login-header-divider{

    border:none;

    border-top:1px solid #edf2f7;

    margin:35px 0;

}

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

.login-header-icon{

    transition:.35s;

}

.login-header-icon:hover{

    transform:rotate(-8deg);

}



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

@media(max-width:991px){

.login-right{

    height:auto;

    padding:35px;

}

.login-header{

    flex-direction:column;

    align-items:flex-start;

}



}

@media(max-width:576px){

.login-right{

    padding:25px;

}

.login-header-icon{

    width:58px;

    height:58px;

}

.login-header-icon i{

    font-size:24px;

}

.login-header-content h2{

    font-size:28px;

}

.login-header-content p{

    font-size:14px;

}

}

/*=========================================================
                PART 4 - LOGIN FORM
=========================================================*/

.login-form{

    margin-top:10px;

}

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

.login-form .form-group{

    margin-bottom:28px;

}

/*=========================================
        LABEL
=========================================*/

.login-form label{

    /* display:block; */

    margin-bottom:10px;

    color:#344054;

    font-size:15px;

    font-weight:600;

}

.required{

    color:#ef4444;

}

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

.login-input{

    position:relative;

}

.login-input .form-control{

    width:100%;

    height:60px;

    border:1px solid #d8dee8;

    border-radius:15px;

    background:#fff;

    padding-left:58px;

    padding-right:55px;

    font-size:15px;

    transition:.35s;

    box-shadow:none;

}

.login-input .form-control::placeholder{

    color:#98a2b3;

}

.login-input .form-control:focus{

    border-color:#1d72d8;

    box-shadow:

        0 0 0 4px rgba(25,135,84,.10);

}

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

.input-icon{

    position:absolute;

    left:20px;

    top:50%;

    transform:translateY(-50%);

    color:#1d72d8;

    z-index:5;

    font-size:18px;

}

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

.password-toggle{

    position:absolute;

    right:18px;

    top:50%;

    transform:translateY(-50%);

    background:none;

    border:none;

    color:#667085;

    font-size:18px;

    cursor:pointer;

}

.password-toggle:hover{

    color:#1d72d8;

}

/*=========================================
        OPTION
=========================================*/

.login-option{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:28px;

}

.forgot-link{

    color:#1d72d8;

    text-decoration:none;

    font-weight:600;

}

.forgot-link:hover{

    text-decoration:underline;

}

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

.login-btn{

    width:100%;

    height:58px;

    border:none;

    border-radius:15px;

    background:linear-gradient(135deg,#22c55e,#198754);

    color:#fff;

    font-size:17px;

    font-weight:700;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    transition:.35s;

    box-shadow:

        0 18px 35px rgba(25,135,84,.22);

}

.login-btn:hover{

    transform:translateY(-3px);

}

.login-btn i{

    font-size:18px;

}

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

.login-divider{

    position:relative;

    text-align:center;

    margin:35px 0;

}

.login-divider::before{

    content:"";

    position:absolute;

    left:0;

    right:0;

    top:50%;

    height:1px;

    background:#e5e7eb;

}

.login-divider span{

    position:relative;

    background:#fff;

    padding:0 20px;

    color:#98a2b3;

    font-weight:600;

}

/*=========================================
        REGISTER
=========================================*/

.register-area{

    text-align:center;

}

.register-area p{

    margin:0;

    color:#667085;

}

.register-area a{

    color:#1d72d8;

    font-weight:700;

    text-decoration:none;

}

.register-area a:hover{

    text-decoration:underline;

}

/*=========================================================
            PART 5 - PREMIUM LOGIN EFFECTS
=========================================================*/

/*=========================================
        REMEMBER ME
=========================================*/

.custom-checkbox{

    display:flex;

    align-items:center;

    cursor:pointer;

    user-select:none;

    gap:12px;

    margin:0;

    font-size:15px;

    font-weight:500;

    color:#475467;

}

.custom-checkbox input{

    display:none;

}

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

.checkmark{

    width:22px;

    height:22px;

    min-width:22px;

    border:2px solid #cbd5e1;

    border-radius:7px;

    background:#fff;

    position:relative;

    transition:.35s;

}

/* Tick */

.checkmark::after{

    content:"";

    position:absolute;

    left:6px;

    top:1px;

    width:6px;

    height:12px;

    border:solid #fff;

    border-width:0 2px 2px 0;

    transform:rotate(45deg) scale(0);

    transition:.25s;

}

/* Checked */

.custom-checkbox input:checked + .checkmark{

    background:#1d72d8;

    border-color:#1d72d8;

}

.custom-checkbox input:checked + .checkmark::after{

    transform:rotate(45deg) scale(1);

}

/* Hover */

.custom-checkbox:hover .checkmark{

    border-color:#1d72d8;

}

/*=========================================
        PASSWORD TOGGLE
=========================================*/

.password-toggle{

    transition:.30s;

}

.password-toggle:hover{

    color:#1d72d8;

    transform:translateY(-50%) scale(1.15);

}

.password-toggle i{

    transition:.30s;

}

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

.login-btn{

    position:relative;

    overflow:hidden;

}

.login-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.login-btn:hover::before{

    left:150%;

}

.login-btn:hover{

    box-shadow:

        0 18px 40px rgba(25,135,84,.30);

}

.login-btn:active{

    transform:scale(.98);

}

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

.login-input{

    transition:.30s;

}

.login-input:hover{

    transform:translateY(-2px);

}

.login-input:focus-within{

    transform:translateY(-2px);

}

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

.register-area a{

    position:relative;

}

.register-area a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-2px;

    width:0;

    height:2px;

    background:#1d72d8;

    transition:.35s;

}

.register-area a:hover::after{

    width:100%;

}

/*=========================================
        FORGOT PASSWORD
=========================================*/

.forgot-link{

    transition:.30s;

}

.forgot-link:hover{

    color:#1d72d8;

}

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

.login-form .form-group{

    transition:.30s;

}

.login-form .form-group:hover{

    transform:translateY(-2px);

}

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

@media(max-width:992px){

.login-option{

    flex-direction:column;

    align-items:flex-start;

    gap:18px;

}

.login-btn{

    height:56px;

}

}

@media(max-width:768px){

.login-form{

    margin-top:15px;

}

.login-form label{

    font-size:14px;

}

.login-input .form-control{

    height:54px;

    font-size:14px;

    padding-left:54px;

}

.input-icon{

    left:18px;

    font-size:16px;

}

.password-toggle{

    right:16px;

}

.login-btn{

    height:54px;

    font-size:15px;

}

.custom-checkbox{

    font-size:14px;

}

.checkmark{

    width:20px;

    height:20px;

}

}

@media(max-width:576px){

.login-option{

    gap:14px;

}

.login-btn{

    height:52px;

}

.login-divider{

    margin:28px 0;

}

.register-area{

    font-size:14px;

}

}
/*=========================================================
            PART 6 - LOGIN BUTTON
=========================================================*/

.login-action{

    margin-top:35px;

}

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

.login-btn{

    position:relative;

    width:100%;

    height:60px;

    border:none;

    border-radius:16px;

    background:linear-gradient(135deg,#1d72d8,#4ea5ff);

    color:#fff;

    font-size:17px;

    font-weight:700;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    cursor:pointer;

    overflow:hidden;

    transition:.35s;

    box-shadow:
        0 18px 35px rgba(25,135,84,.22);

}

/* Shine */

.login-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-130%;

    width:60%;

    height:100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.35),

            transparent

        );

    transform:skewX(-25deg);

    transition:.8s;

}

.login-btn:hover::before{

    left:150%;

}

/* Hover */

.login-btn:hover{

    transform:translateY(-3px);

    box-shadow:

        0 22px 40px rgba(25,135,84,.32);

}

/* Active */

.login-btn:active{

    transform:scale(.98);

}

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

.btn-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

}

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

.btn-loader{

    display:none;

    align-items:center;

    justify-content:center;

    font-size:18px;

}

/* Loading State */

.login-btn.loading .btn-loader{

    display:flex;

}

.login-btn.loading .btn-icon{

    display:none;

}

.login-btn.loading .btn-text{

    opacity:.9;

}

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

.login-divider{

    position:relative;

    margin:38px 0;

    text-align:center;

}

.login-divider::before{

    content:"";

    position:absolute;

    left:0;

    right:0;

    top:50%;

    height:1px;

    background:#e5e7eb;

}

.login-divider span{

    position:relative;

    background:#fff;

    padding:0 20px;

    color:#98a2b3;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

}

/*=========================================
        REGISTER
=========================================*/

.register-area{

    text-align:center;

}

.register-area p{

    margin:0;

    color:#667085;

    font-size:15px;

}

.register-area a{

    color:#1d72d8;

    font-weight:700;

    text-decoration:none;

    margin-left:6px;

    transition:.30s;

    position:relative;

}

.register-area a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-3px;

    width:0;

    height:2px;

    background:#1d72d8;

    transition:.35s;

}

.register-area a:hover{

    color:#1d72d8;

}

.register-area a:hover::after{

    width:100%;

}

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

@media(max-width:768px){

.login-btn{

    height:55px;

    font-size:15px;

}

.login-divider{

    margin:30px 0;

}

.register-area p{

    font-size:14px;

}

}
/*=========================================================
            PART 7 - RESPONSIVE & ANIMATIONS
=========================================================*/

/*=========================================
        GLOBAL TRANSITION
=========================================*/

.login-left,
.login-right,
.login-btn,
.left-logo-model,
.left-login-facilities li,
.login-header-icon,
.login-school-badge,
.login-input,
.password-toggle,
.register-area a{

    transition:all .35s ease;

}

/*=========================================
        MODAL OPEN ANIMATION
=========================================*/

#loginModal.fade .modal-dialog{

    transform:scale(.92) translateY(40px);

    opacity:0;

}

#loginModal.show .modal-dialog{

    transform:scale(1) translateY(0);

    opacity:1;

    transition:.45s ease;

}

/*=========================================
        LEFT PANEL
=========================================*/

.login-left{

    animation:leftSlide .8s ease;

}

@keyframes leftSlide{

    from{

        opacity:0;

        transform:translateX(-60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/*=========================================
        RIGHT PANEL
=========================================*/

.login-right{

    animation:rightSlide .8s ease;

}

@keyframes rightSlide{

    from{

        opacity:0;

        transform:translateX(60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/*=========================================
        FLOATING LOGO
=========================================*/

.left-logo-model{

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

}

@keyframes logoFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

.left-logo-model:hover{

    transform:scale(1.08);

}

/*=========================================
        CIRCLES
=========================================*/

.left-login-circle{

    animation:circleRotate 16s linear infinite;

}

@keyframes circleRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

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

.left-login-facilities li{

    /* border-radius:12px; */

     display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom:12px;
    border-radius:14px;
    background: rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.10);
    transition:.35s;

}

.left-login-facilities li:hover{

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

    padding-left:15px;
       transform:translateX(8px);

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

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

}

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

.login-header-icon:hover{

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

}

.login-school-badge:hover{

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

}

/*=========================================
        INPUT
=========================================*/

.login-input:hover{

    transform:translateY(-2px);

}

.login-input:focus-within{

    transform:translateY(-2px);

}

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

.login-btn:hover{

    transform:translateY(-4px);

}

.login-btn:active{

    transform:scale(.98);

}

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

.register-area a:hover{

    letter-spacing:.5px;

}

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

@media(max-width:1400px){

.login-left,
.login-right{

    min-height:720px;

}

.left-login-content h2{

    font-size:46px;

}

}

@media(max-width:1200px){

#loginModal .modal-dialog{

    max-width:96%;

}

.login-right{

    padding:35px;

}

.left-login-content{

    padding:45px 30px;

}

.left-login-content h2{

    font-size:40px;

}

.left-login-facilities{

    padding:0 30px 35px;

}

}

@media(max-width:991px){

.login-wrapper{

    flex-direction:column;

}

.login-left{

    min-height:auto;

}

.login-right{

    min-height:auto;

    padding:35px;

}

.left-login-content{

    padding:45px 30px 25px;

}

.left-login-facilities{

    padding:25px 30px 35px;

}

.login-header{

    flex-direction:column;

    align-items:flex-start;

}

.login-school-badge{

    margin-top:20px;

}

}

@media(max-width:768px){

#loginModal .modal-dialog{

    margin:12px;

}

#loginModal .modal-content{

    border-radius:18px;

}

.login-right{

    padding:25px;

}

.login-header-icon{

    width:60px;

    height:60px;

}

.login-header-content h2{

    font-size:30px;

}

.left-logo-model{

    width:120px;

    height:120px;

}

.left-logo-model img{

    max-width:70px;

}

.left-login-content h2{

    font-size:34px;

}

.left-login-facilities{

    padding:20px;

}

.left-login-facilities h5{

    font-size:16px;

}

.left-login-facilities p{

    font-size:13px;

}

.login-option{

    flex-direction:column;

    align-items:flex-start;

    gap:15px;

}

.login-btn{

    height:55px;

}

}

@media(max-width:576px){

.login-close{

    width:44px;

    height:44px;

    top:15px;

    right:15px;

}

.login-right{

    padding:20px;

}

.login-header-content h2{

    font-size:26px;

}

.login-header-content p{

    font-size:14px;

}

.left-login-content{

    padding:35px 20px 20px;

}

.left-logo-model{

    width:100px;

    height:100px;

}

.left-logo-model img{

    max-width:60px;

}

.left-login-content h2{

    font-size:28px;

}

.left-login-facilities{

    padding:15px;

}

.facility-login-title h4{

    font-size:16px;

}

.left-login-facilities li{

    gap:12px;

}

.left-login-facilities h5{

    font-size:15px;

}

.left-login-facilities p{

    font-size:12px;

}

.login-btn{

    height:52px;

    font-size:15px;

}

.register-area{

    font-size:13px;

}

}

@media(max-width:400px){

.login-header{

    gap:15px;

}

.login-header-icon{

    width:52px;

    height:52px;

}

.login-header-icon i{

    font-size:20px;

}

.login-header-content h2{

    font-size:22px;

}

.left-login-content h2{

    font-size:24px;

}

.left-login-facilities{

    display:none;

}

}

/* =========================================================
   FACILITY VIEW MORE / VIEW LESS
========================================================= */

.facility-hidden {
    display: none !important;
}

.facility-hidden.facility-show {
    display: flex !important;
}

/* Toggle Button */

.facility-toggle-btn {
    width: 100%;
    height: 50px;

    margin-top: 8px;
    padding: 0 20px;

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

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 12px;

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

    color: #fff;

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

    cursor: pointer;

    transition: all 0.3s ease;
    
}


/* Hover */

/* .facility-toggle-btn:hover {

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

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

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(0,0,0,.12);
} */

.facility-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.18);
}
/* Arrow */


.facility-arrow {
    width: 9px;
    height: 9px;

    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;

    transform: rotate(45deg);

    margin-top: -4px;

    transition: transform 0.3s ease;
}


/* .facility-toggle-btn i {

    width: 18px;
    height: 18px;

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

    font-size: 13px;

    transition: transform .3s ease;

} */

/* View More */
.facility-toggle-btn:not(.active) i {
    transform: translateY(1px);
}

/* View Less */
.facility-toggle-btn.active .facility-arrow {
    transform: rotate(225deg);

    margin-top: 4px;
}

.facility-toggle-text {
    line-height: 1;
}

/* Expanded arrow */

.facility-toggle-btn.active i {

    transform: rotate(180deg);
}


/* Facility animation */
/* Hidden facilities container */
.facility-list {
    overflow: hidden;
}

.facility-list li {

    animation: facilityFadeIn .35s ease;
}


@keyframes facilityFadeIn {

    from {

        opacity: 0;

        transform: translateY(-8px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* Mobile */

@media(max-width:576px) {

    .facility-toggle-btn {

        height: 46px;

        font-size: 14px;

    }

}



/*=========================================================================
                        *START ENROLL MODEL CSS*
===========================================================================*/

/*=========================================================
            PART 1 - PREMIUM ENROLL MODAL LAYOUT
=========================================================*/

#enrollNowModal .modal-dialog{

    max-width:1320px;

    width:96%;

    margin:20px auto;

}

#enrollNowModal .modal-content{

    position:relative;

    border:none;

    border-radius:28px;

    overflow:hidden;

    background:#ffffff;

    box-shadow:
        0 30px 80px rgba(15,23,42,.18);

}

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

.premium-enroll{

    min-height:92vh;

    display:flex;

    flex-direction:column;

}

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

.premium-enroll>.row{

    flex:1;

    min-height:92vh;

}

/*=========================================================
            LEFT PANEL
=========================================================*/

.premium-enroll .col-lg-4{

    padding:0;

}

/*=========================================================
            RIGHT PANEL
=========================================================*/

.premium-enroll .col-lg-8{

    padding:0;

    background:#fff;

}

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

.enroll-close{

    position:absolute;

    top:18px;

    right:18px;

    width:54px;

    height:54px;

    border:none;

    border-radius:50%;

    background:#ffffff;

    color:#2b2b2b;

    font-size:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    z-index:999;

    box-shadow:

        0 12px 35px rgba(0,0,0,.15);

    transition:.35s ease;

}

.enroll-close:hover{

    transform:rotate(90deg);

    background:#1d72d8;

    color:#fff;

}

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

.enroll-right{

    height:92vh;

    overflow-y:auto;

}

.enroll-right::-webkit-scrollbar{

    width:8px;

}

.enroll-right::-webkit-scrollbar-track{

    background:#f1f5f9;

}

.enroll-right::-webkit-scrollbar-thumb{

    background:#1d72d8;

    border-radius:20px;

}

/*=========================================================
            MODAL OPEN ANIMATION
=========================================================*/

#enrollNowModal.fade .modal-dialog{

    transform:scale(.92) translateY(40px);

    opacity:0;

}

#enrollNowModal.show .modal-dialog{

    transform:scale(1) translateY(0);

    opacity:1;

    transition:all .45s ease;

}

/*=========================================================
            BACKDROP
=========================================================*/

.modal-backdrop.show{

    opacity:.60;

}

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

@media(max-width:1200px){

#enrollNowModal .modal-dialog{

    width:98%;

}

}

@media(max-width:991px){

.premium-enroll>.row{

    min-height:auto;

}

.enroll-right{

    height:auto;

    overflow:visible;

}

}

@media(max-width:768px){

#enrollNowModal .modal-dialog{

    margin:12px;

}

#enrollNowModal .modal-content{

    border-radius:20px;

}

.enroll-close{

    width:46px;

    height:46px;

    top:15px;

    right:15px;

}

}

@media(max-width:576px){

#enrollNowModal .modal-dialog{

    width:auto;

    margin:8px;

}

#enrollNowModal .modal-content{

    border-radius:16px;

}

.enroll-close{

    width:42px;

    height:42px;

    font-size:18px;

}

}

/*=========================================================
                PART 2 - LEFT PANEL
=========================================================*/

/*=========================================================
            ENROLL LEFT PANEL
=========================================================*/

.enroll-left{

    position:relative;

    height:100%;

    min-height:760px;

    display:flex;
    
    flex-direction:column;

    overflow:hidden;

    background:linear-gradient(135deg,#2D7BE5 0%,#5AA8FF 100%);

}

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

.left-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        rgba(255,255,255,.03),

        rgba(0,0,0,.08)

    );

    z-index:1;

}

/*=========================================================
            DECORATIVE CIRCLES
=========================================================*/

.left-enroll-circle{

    position:absolute;

    border-radius:50%;

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

    z-index:2;

}

.left-enroll-circle-1{

    width:230px;

    height:230px;

    left:-90px;

    top:-90px;

}

.left-enroll-circle-2{

    width:250px;

    height:250px;

    right:-90px;

    bottom:-90px;

}

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

.left-content{

    position:relative;

    z-index:5;

    text-align:center;

    padding:50px 35px 25px;

}

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

.left-enroll-logo{

    width:145px;

    height:145px;

    margin:auto;

    border-radius:50%;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:

        0 18px 40px rgba(0,0,0,.18);

}

.left-enroll-logo img{

    width:85px;

    object-fit:contain;

}

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

.left-content h2{
    margin:28px 0 18px;
    color:#fff;
    font-size:29px;
    font-weight:800;
    line-height:1.08;
}

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

.left-content p{

    margin:0 auto;

    max-width:310px;

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

    font-size:18px;

    line-height:1.8;

}

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

.left-enroll-facilities{

    position:relative;

    z-index:5;

    padding:0 35px 35px;

}

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

.facility-enroll-title{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    margin-bottom:25px;

}

.facility-enroll-title span{

    flex:1;

    height:2px;

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

}

.facility-enroll-title h4{
    margin:0;
    color:#fff;
    font-size:17px;
    font-weight:700;
    letter-spacing:1px;
    white-space:nowrap;
}

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

.left-enroll-facilities ul{

    margin:0;

    padding:0;

    list-style:none;

}

.left-enroll-facilities li{

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px 16px;

    margin-bottom:12px;

    border-radius:14px;

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

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

    transition:.35s;

}

.left-enroll-facilities li:last-child{

    margin-bottom:0;

}

.left-enroll-facilities li:hover{

    transform:translateX(8px);

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

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

}

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

.left-enroll-facilities li i{

    width:10px;

    color:#fff;

    font-size:9px;

    flex-shrink:0;

}

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

.left-enroll-facilities li h5{
    margin:0 0 5px;
    color:#fff;
    font-size:14px;
    font-weight:550;
    line-height:1.2;
}

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

.left-enroll-logo{

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

}

@keyframes logoFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

.left-enroll-circle{

    animation:circleMove 16s linear infinite;

}

@keyframes circleMove{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

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

@media(max-width:1200px){

.left-content h2{

    font-size:44px;

}

.left-content p{

    font-size:16px;

}

.left-enroll-logo{

    width:130px;

    height:130px;

}

.left-enroll-logo img{

    width:75px;

}

.left-enroll-facilities h5{

    font-size:17px;

}

}

@media(max-width:991px){

.enroll-left{

    min-height:auto;

}

.left-content{

    padding:40px 30px 20px;

}

.left-enroll-facilities{

    padding:25px 30px 35px;

}

}

@media(max-width:576px){

.left-content{

    padding:30px 20px 20px;

}

.left-enroll-logo{

    width:100px;

    height:100px;

}

.left-enroll-logo img{

    width:58px;

}

.left-content h2{

    font-size:30px;

}

.left-content p{

    font-size:15px;

}

.left-enroll-facilities{

    padding:20px;

}

.facility-enroll-title h4{

    font-size:17px;

}

.left-enroll-facilities li{

    padding:12px;

}

.left-enroll-facilities li h5{

    font-size:15px;

}

}

/*=========================================================
            PART 3 - RIGHT HEADER
=========================================================*/

.enroll-right{

    background:#fff;

    height:92vh;

    overflow-y:auto;

    padding:40px 42px;

}

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

.enroll-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;

}

/*=========================================
        LEFT SIDE
=========================================*/

.enroll-header-left{

    display:flex;

    align-items:center;

    gap:18px;

}

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

.enroll-header-icon{

    width:72px;

    height:72px;

    min-width:72px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        135deg,
        #2D7BE5,
        #5AA8FF
    );

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

}

.enroll-header-icon i{

    color:#fff;

    font-size:30px;

}

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

.enroll-header-content h2{

    margin:0;

    font-size:30px;

    font-weight:800;

    color:#1f2937;

    line-height:1.15;

}

.enroll-header-content p{

    margin-top:8px;

    color:#64748b;

    font-size:16px;

    line-height:1.6;

}

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

.enroll-school-badge{

    width:90px;

    height:90px;

    border-radius:50%;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    border:5px solid #eef5ff;

    overflow:hidden;

    box-shadow:

        0 12px 30px rgba(0,0,0,.10);

}

.enroll-school-badge img{

    width:56px;

    height:56px;

    object-fit:contain;

}

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

.enroll-header-divider{

    border:none;

    border-top:1px solid #e8edf5;

    margin:35px 0;

}

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

.enroll-header-icon{

    transition:.35s;

}

.enroll-header-icon:hover{

    transform:rotate(-8deg);

}

.enroll-school-badge{

    transition:.35s;

}

.enroll-school-badge:hover{

    transform:scale(1.08);

}

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

@media(max-width:991px){

.enroll-right{

    height:auto;

    padding:35px;

}

.enroll-header{

    flex-direction:column;

    align-items:flex-start;

    gap:20px;

}

}

@media(max-width:576px){

.enroll-right{

    padding:22px;

}

.enroll-header-icon{

    width:58px;

    height:58px;

    min-width:58px;

}

.enroll-header-icon i{

    font-size:24px;

}

.enroll-header-content h2{

    font-size:28px;

}

.enroll-header-content p{

    font-size:14px;

}

.enroll-school-badge{

    width:70px;

    height:70px;

}

.enroll-school-badge img{

    width:42px;

}

}

/*=========================================================
            PART 4 - PREMIUM SECTION HEADING
=========================================================*/
/*=========================================================
            STUDENT SECTION
=========================================================*/

.student-section{

    margin-bottom:40px;

}

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

.enroll-section-heading{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:30px;

}

.enroll-section-icon{

    width:64px;

    height:64px;

    min-width:64px;

    border-radius:18px;

    background:linear-gradient(135deg,#2D7BE5,#5AA8FF);

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:0 15px 35px rgba(45,123,229,.20);

    transition:.35s;

}

.enroll-section-icon i{

    color:#fff;

    font-size:24px;

}

.enroll-section-heading:hover .enroll-section-icon{

    transform:rotate(-8deg);

}

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

.enroll-section-heading h4{

    margin:0;

    color:#1f2937;

    font-size:21px;

    font-weight:700;

}

.enroll-section-heading span{

    display:block;

    margin-top:5px;

    color:#64748b;

    font-size:15px;

}

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

.enroll-section-body{

    background:#fff;

    border:1px solid #e8edf5;

    border-radius:20px;

    padding:30px;

    box-shadow:0 10px 35px rgba(15,23,42,.05);

}

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

.enroll-section-body .form-group{

    margin-bottom:24px;

}

/*=========================================================
            LABEL
=========================================================*/

.enroll-section-body label{

    display:block;

    margin-bottom:10px;

    color:#344054;

    font-size:15px;

    font-weight:600;

}

.required{

    color:#ef4444;

}

/*=========================================================
            INPUTS
=========================================================*/

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

    height:56px;

    border:1px solid #d8dee8;

    border-radius:14px;

    font-size:15px;

    color:#344054;

    background:#fff;

    transition:.35s;

    box-shadow:none;

}

.enroll-section-body .form-control{

    padding:0 18px;

}

.enroll-section-body .form-select{

    padding:0 40px 0 18px;

}

.enroll-section-body .form-control::placeholder{

    color:#98a2b3;

}

/*=========================================================
            FOCUS
=========================================================*/

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

    border-color:#2D7BE5;

    box-shadow:0 0 0 4px rgba(45,123,229,.12);

}

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

.enroll-section-body .form-control:hover,
.enroll-section-body .form-select:hover{

    border-color:#5AA8FF;

}

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

.enroll-section-body input[type="date"]{

    cursor:pointer;

}

/*=========================================================
            SELECT
=========================================================*/

.enroll-section-body select{

    cursor:pointer;

}

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

.enroll-section-body .row{

    --bs-gutter-x:24px;

}

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

@media(max-width:768px){

.enroll-section-heading{

    gap:14px;

}

.enroll-section-icon{

    width:56px;

    height:56px;

    min-width:56px;

}

.enroll-section-icon i{

    font-size:20px;

}

.enroll-section-heading h4{

    font-size:20px;

}

.enroll-section-heading span{

    font-size:14px;

}

.enroll-section-body{

    padding:22px;

}

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

    height:52px;

    font-size:14px;

}

}

@media(max-width:576px){

.enroll-section-heading{

    align-items:flex-start;

}

.enroll-section-body{

    padding:18px;

}

.enroll-section-heading h4{

    font-size:18px;

}

.enroll-section-heading span{

    font-size:13px;

}

}

/*=========================================================
            PART 5 - PREMIUM SECTION ACADEMIC
=========================================================*/

/*=========================================================
            ACADEMIC SECTION
=========================================================*/

.academic-section{

    margin:45px 0;

}

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

.academic-section .enroll-section-body{

    background:#ffffff;

    border:1px solid #e8edf5;

    border-radius:20px;

    padding:30px;

    box-shadow:0 10px 30px rgba(15,23,42,.05);

    transition:.35s;

}

.academic-section .enroll-section-body:hover{

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

}

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

.academic-section .form-group{

    margin-bottom:24px;

}

/*=========================================================
            LABEL
=========================================================*/

.academic-section label{

    display:block;

    margin-bottom:10px;

    font-size:15px;

    font-weight:600;

    color:#344054;

}

.academic-section .required{

    color:#ef4444;

}

/*=========================================================
            SELECT
=========================================================*/

.academic-section .form-select{

    height:56px;

    border:1px solid #d8dee8;

    border-radius:14px;

    background:#fff;

    color:#344054;

    font-size:15px;

    padding:0 18px;

    box-shadow:none;

    transition:.35s;

    cursor:pointer;

}

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

.academic-section .form-select:hover{

    border-color:#5AA8FF;

}

/*=========================================================
            FOCUS
=========================================================*/

.academic-section .form-select:focus{

    border-color:#2D7BE5;

    box-shadow:0 0 0 4px rgba(45,123,229,.12);

}

/*=========================================================
            PLACEHOLDER OPTION
=========================================================*/

.academic-section .form-select option:first-child{

    color:#98a2b3;

}

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

.academic-section .row{

    --bs-gutter-x:24px;

    --bs-gutter-y:10px;

}

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

@media(max-width:768px){

.academic-section{

    margin:35px 0;

}

.academic-section .enroll-section-body{

    padding:22px;

}

.academic-section .form-select{

    height:52px;

    font-size:14px;

}

}

@media(max-width:576px){

.academic-section{

    margin:30px 0;

}

.academic-section .enroll-section-body{

    padding:18px;

}

.academic-section label{

    font-size:14px;

}

.academic-section .form-select{

    height:50px;

    font-size:14px;

}

}
/*=========================================================
            PART 6 - PREMIUM SECTION PARENT 
=========================================================*/

/*=========================================================
            PARENT SECTION
=========================================================*/

.parent-section{

    margin:45px 0;

}

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

.parent-section .enroll-section-body{

    background:#ffffff;

    border:1px solid #e8edf5;

    border-radius:20px;

    padding:30px;

    box-shadow:0 10px 30px rgba(15,23,42,.05);

    transition:.35s;

}

.parent-section .enroll-section-body:hover{

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

}

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

.parent-section .form-group{

    margin-bottom:24px;

}

/*=========================================================
            LABEL
=========================================================*/

.parent-section label{

    display:block;

    margin-bottom:10px;

    font-size:15px;

    font-weight:600;

    color:#344054;

}

.parent-section .required{

    color:#ef4444;

}

/*=========================================================
            INPUTS
=========================================================*/

.parent-section .form-control{

    height:56px;

    border:1px solid #d8dee8;

    border-radius:14px;

    padding:0 18px;

    background:#fff;

    color:#344054;

    font-size:15px;

    box-shadow:none;

    transition:.35s;

}

.parent-section .form-control::placeholder{

    color:#98a2b3;

}

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

.parent-section .form-control:hover{

    border-color:#5AA8FF;

}

/*=========================================================
            FOCUS
=========================================================*/

.parent-section .form-control:focus{

    border-color:#2D7BE5;

    box-shadow:0 0 0 4px rgba(45,123,229,.12);

}

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

.parent-section .row{

    --bs-gutter-x:24px;

    --bs-gutter-y:10px;

}

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

.parent-section .form-control{

    transition:all .30s ease;

}

.parent-section .form-control:focus{

    transform:translateY(-2px);

}

.parent-section .form-group{

    transition:.30s;

}

.parent-section .form-group:hover{

    transform:translateY(-2px);

}

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

@media(max-width:768px){

.parent-section{

    margin:35px 0;

}

.parent-section .enroll-section-body{

    padding:22px;

}

.parent-section .form-control{

    height:52px;

    font-size:14px;

}

}

@media(max-width:576px){

.parent-section{

    margin:30px 0;

}

.parent-section .enroll-section-body{

    padding:18px;

}

.parent-section label{

    font-size:14px;

}

.parent-section .form-control{

    height:50px;

    font-size:14px;

}

}

/*=========================================================
            PART 7 - PREMIUM ADDRESS SECTION
=========================================================*/
/*=========================================================
            ADDRESS SECTION
=========================================================*/

.address-section{

    margin:45px 0;

}

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

.address-section .enroll-section-body{

    background:#ffffff;

    border:1px solid #e8edf5;

    border-radius:20px;

    padding:30px;

    box-shadow:0 10px 30px rgba(15,23,42,.05);

    transition:.35s;

}

.address-section .enroll-section-body:hover{

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

}

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

.address-section .form-group{

    margin-bottom:24px;

}

/*=========================================================
            LABEL
=========================================================*/

.address-section label{

    display:block;

    margin-bottom:10px;

    font-size:15px;

    font-weight:600;

    color:#344054;

    line-height:1.5;

}

.address-section .required{

    color:#ef4444;

}

/*=========================================================
            INPUT
=========================================================*/

.address-section .form-control{

    border:1px solid #d8dee8;

    border-radius:14px;

    background:#fff;

    color:#344054;

    font-size:15px;

    padding:14px 18px;

    box-shadow:none;

    transition:.35s;

}

/* Postal Code */

.address-section input.form-control{

    height:56px;

    padding:0 18px;

}

/*=========================================================
            TEXTAREA
=========================================================*/

.address-section textarea.form-control{

    min-height:90px;

    resize:vertical;

}

.address-section textarea.form-control::placeholder{

    color:#98a2b3;

    line-height:1.6;

}

/*=========================================================
            SELECT
=========================================================*/

.address-section .form-select{

    height:56px;

    border:1px solid #d8dee8;

    border-radius:14px;

    background:#fff;

    color:#344054;

    font-size:15px;

    padding:0 18px;

    box-shadow:none;

    cursor:pointer;

    transition:.35s;

}

/*=========================================================
            PLACEHOLDER
=========================================================*/

.address-section .form-control::placeholder{

    color:#98a2b3;

}

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

.address-section .form-control:hover,
.address-section .form-select:hover{

    border-color:#5AA8FF;

}

/*=========================================================
            FOCUS
=========================================================*/

.address-section .form-control:focus,
.address-section .form-select:focus{

    border-color:#2D7BE5;

    box-shadow:0 0 0 4px rgba(45,123,229,.12);

}

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

.address-section .row{

    --bs-gutter-x:24px;

    --bs-gutter-y:10px;

}

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

.address-section .form-group{

    transition:.30s;

}

.address-section .form-group:hover{

    transform:translateY(-2px);

}

.address-section .form-control,
.address-section .form-select{

    transition:all .30s ease;

}

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

@media(max-width:768px){

.address-section{

    margin:35px 0;

}

.address-section .enroll-section-body{

    padding:22px;

}

.address-section .form-control,
.address-section .form-select{

    font-size:14px;

}

.address-section textarea.form-control{

    min-height:80px;

}

.address-section input.form-control,
.address-section .form-select{

    height:52px;

}

}

@media(max-width:576px){

.address-section{

    margin:30px 0;

}

.address-section .enroll-section-body{

    padding:18px;

}

.address-section label{

    font-size:14px;

}

.address-section textarea.form-control{

    min-height:75px;

    font-size:14px;

}

.address-section input.form-control,
.address-section .form-select{

    height:50px;

    font-size:14px;

}

}


/*=========================================================
            PART 8 - PREMIUM FOOTER SECTION
=========================================================*/

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

.enroll-form-footer{

    margin-top:45px;

    padding-top:30px;

    border-top:1px solid #e8edf5;

}

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

.enroll-footer-wrapper{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:25px;

    flex-wrap:wrap;

}

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

.enroll-footer-left{

    flex:1;

}

/*=========================================================
            CUSTOM CHECKBOX
=========================================================*/

.enroll-custom-check{

    display:flex;

    align-items:flex-start;

    gap:12px;

}

.enroll-custom-check input{

    width:20px;

    height:20px;

    margin-top:2px;

    accent-color:#2D7BE5;

    cursor:pointer;

}

.enroll-custom-check label{

    margin:0;

    color:#64748b;

    font-size:15px;

    line-height:1.7;

}

.enroll-custom-check a{

    color:#2D7BE5;

    font-weight:600;

    text-decoration:none;

    transition:.30s;

}

.enroll-custom-check a:hover{

    color:#1557B5;

    text-decoration:underline;

}

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

.enroll-footer-right{

    display:flex;

    align-items:center;

    gap:15px;

    flex-wrap:wrap;

}

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

.footer-btn{

    height:52px;

    padding:0 24px;

    border:none;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:all .35s ease;

}

.footer-btn i{

    font-size:15px;

}

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

.btn-reset{

    background:#f8fafc;

    color:#475569;

    border:1px solid #d8dee8;

}

.btn-reset:hover{

    background:#eef4ff;

    color:#2D7BE5;

    border-color:#2D7BE5;

    transform:translateY(-2px);

}

/*=========================================================
            CANCEL
=========================================================*/

.btn-cancel{

    background:#fff1f2;

    color:#dc2626;

    border:1px solid #fecaca;

}

.btn-cancel:hover{

    background:#dc2626;

    color:#fff;

    transform:translateY(-2px);

}

/*=========================================================
            SUBMIT
=========================================================*/

.btn-submit{

    background:linear-gradient(135deg,#2D7BE5,#5AA8FF);

    color:#fff;

    min-width:210px;

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

    position:relative;

    overflow:hidden;

}

/* Shine Effect */

.btn-submit::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

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

    transform:skewX(-25deg);

    transition:.8s;

}

.btn-submit:hover::before{

    left:140%;

}

.btn-submit:hover{

    transform:translateY(-3px);

    box-shadow:0 20px 40px rgba(45,123,229,.35);

}

/*=========================================================
            LOADING STATE
=========================================================*/

.btn-submit.loading{

    pointer-events:none;

    opacity:.9;

}

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

@media(max-width:992px){

.enroll-footer-wrapper{

    flex-direction:column;

    align-items:flex-start;

}

.enroll-footer-right{

    width:100%;

}

.footer-btn{

    flex:1;

}

.btn-submit{

    min-width:auto;

}

}

@media(max-width:768px){

.enroll-footer-right{

    flex-direction:column;

    width:100%;

}

.footer-btn{

    width:100%;

}

.enroll-custom-check label{

    font-size:14px;

}

}

@media(max-width:576px){

.enroll-form-footer{

    margin-top:35px;

    padding-top:25px;

}

.enroll-custom-check{

    align-items:flex-start;

}

.enroll-custom-check label{

    font-size:13px;

}

.footer-btn{

    height:50px;

    font-size:14px;

}

}
/*=========================================================
            PART 7 - RESPONSIVE
=========================================================*/

/*=========================================================
            LARGE DESKTOP
=========================================================*/

@media (max-width:1400px){

.enroll-right{

    padding:35px;

}

.left-content h2{

    font-size:48px;

}

.left-content p{

    font-size:17px;

}

.left-enroll-logo{

    width:130px;

    height:130px;

}

.left-enroll-logo img{

    width:78px;

}

.left-enroll-facilities{

    padding:0 28px 28px;

}

.left-enroll-facilities li h5{

    font-size:17px;

}

}

/*=========================================================
            LAPTOP
=========================================================*/

@media (max-width:1200px){

.enroll-right{

    padding:30px;

}

.enroll-header-content h2{

    font-size:34px;

}

.enroll-header-content p{

    font-size:15px;

}

.left-content{

    padding:40px 25px 20px;

}

.left-content h2{

    font-size:40px;

}

.left-content p{

    font-size:16px;

}

.left-enroll-logo{

    width:115px;

    height:115px;

}

.left-enroll-logo img{

    width:70px;

}

.left-enroll-facilities{

    padding:0 22px 22px;

}

.left-enroll-facilities li{

    padding:12px;

}

.left-enroll-facilities li h5{

    font-size:16px;

}

}

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

@media (max-width:991px){

.premium-enroll{

    height:auto;

}

.enroll-left{

    min-height:auto;

}

.left-content{

    padding:35px 30px 20px;

}

.left-content h2{

    font-size:38px;

}

.left-content p{

    max-width:100%;

}

.left-enroll-facilities{

    padding:25px 30px 35px;

}

.enroll-right{

    height:auto;

    padding:30px;

    overflow:visible;

}

.enroll-header{

    flex-direction:column;

    align-items:flex-start;

    gap:20px;

}

.enroll-school-badge{

    display:none;

}

.enroll-form-footer{

    margin-top:35px;

}

.enroll-footer-wrapper{

    flex-direction:column;

    align-items:flex-start;

}

.enroll-footer-right{

    width:100%;

    justify-content:flex-start;

}

}

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

@media (max-width:768px){

#enrollNowModal .modal-dialog{

    margin:12px;

}

#enrollNowModal .modal-content{

    border-radius:18px;

}

.enroll-right{

    padding:22px;

}

.enroll-header{

    margin-bottom:25px;

}

.enroll-header-icon{

    width:56px;

    height:56px;

}

.enroll-header-icon i{

    font-size:22px;

}

.enroll-header-content h2{

    font-size:28px;

}

.enroll-header-content p{

    font-size:14px;

}

.enroll-section-heading{

    gap:12px;

    margin-bottom:20px;

}

.enroll-section-icon{

    width:54px;

    height:54px;

}

.enroll-section-icon i{

    font-size:20px;

}

.enroll-section-heading h4{

    font-size:20px;

}

.enroll-section-heading span{

    font-size:14px;

}

.enroll-section-body{

    padding:20px;

}

.enroll-section-body .row{

    --bs-gutter-x:16px;

}

.form-control,
.form-select{

    height:50px;

    font-size:14px;

}

textarea.form-control{

    min-height:80px;

}

.footer-btn{

    min-width:140px;

    height:50px;

    font-size:14px;

}

}

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

@media (max-width:576px){

.enroll-right{

    padding:18px;

}

.left-content{

    padding:30px 20px 15px;

}

.left-enroll-logo{

    width:90px;

    height:90px;

}

.left-enroll-logo img{

    width:55px;

}

.left-content h2{

    font-size:30px;

}

.left-content p{

    font-size:14px;

}

.facility-enroll-title h4{

    font-size:16px;

}

.left-enroll-facilities{

    padding:20px;

}

.left-enroll-facilities li{

    padding:10px 12px;

}

.left-enroll-facilities li h5{

    font-size:14px;

}

.enroll-section-body{

    padding:16px;

}

.enroll-footer-right{

    flex-direction:column;

    width:100%;

}

.footer-btn{

    width:100%;

}

.enroll-custom-check{

    align-items:flex-start;

}

.enroll-custom-check label{

    font-size:13px;

    line-height:1.5;

}

}

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

@media (max-width:420px){

.left-content h2{

    font-size:26px;

}

.enroll-header-content h2{

    font-size:24px;

}

.enroll-section-heading h4{

    font-size:18px;

}

.enroll-section-icon{

    width:48px;

    height:48px;

}

.enroll-section-icon i{

    font-size:18px;

}

.form-control,
.form-select{

    font-size:13px;

}

.footer-btn{

    height:48px;

    font-size:13px;

}

}

/*=========================================================
        PART 8 - PREMIUM ANIMATIONS
=========================================================*/

/* Smooth Transition */

*{

    transition:
        background .30s ease,
        color .30s ease,
        border-color .30s ease,
        box-shadow .30s ease,
        transform .30s ease;

}

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

#enrollNowModal.fade .modal-dialog{

    transform:scale(.92) translateY(40px);

    opacity:0;

}

#enrollNowModal.show .modal-dialog{

    transform:scale(1) translateY(0);

    opacity:1;

    transition:.45s ease;

}

/*=========================================================
        LEFT PANEL
=========================================================*/

.enroll-left{

    animation:leftSlide .8s ease;

}

@keyframes leftSlide{

    from{

        opacity:0;

        transform:translateX(-60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/*=========================================================
        RIGHT PANEL
=========================================================*/

.enroll-right{

    animation:rightSlide .8s ease;

}

@keyframes rightSlide{

    from{

        opacity:0;

        transform:translateX(60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/*=========================================================
        LOGO FLOAT
=========================================================*/

.left-enroll{

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

}

@keyframes logoFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

.left-enroll:hover{

    transform:scale(1.08);

}

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

.left-enroll-circle{

    animation:circleMove 18s linear infinite;

}

@keyframes circleMove{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

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

.enroll-header-icon:hover{

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

}

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

.school-badge:hover{

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

}

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

.enroll-section-icon:hover{

    transform:translateY(-4px);

}

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

.form-control,
.form-select{

    transition:.30s;

}

.form-control:hover,
.form-select:hover{

    transform:translateY(-2px);

}

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

    transform:translateY(-2px);

}

/*=========================================================
        TEXTAREA
=========================================================*/

textarea.form-control{

    transition:.30s;

}

textarea.form-control:hover{

    transform:translateY(-2px);

}

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

.footer-btn{

    transition:.35s;

}

.footer-btn:hover{

    transform:translateY(-3px);

}

.footer-btn:active{

    transform:scale(.96);

}

/*=========================================================
        CHECKBOX
=========================================================*/

.enroll-custom-check label{

    transition:.30s;

}

.enroll-custom-check:hover label{

    color:#1d72d8;

}

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

.enroll-close{

    transition:.35s;

}

.enroll-close:hover{

    transform:rotate(90deg);

}

/*=========================================================
        FEATURE ITEMS
=========================================================*/

.feature-item{

    transition:.35s;

}

.feature-item:hover{

    transform:translateX(8px);

}

.feature-item:hover .feature-icon{

    transform:scale(1.1);

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

}

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

.left-school-image img{

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

}

@keyframes buildingFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

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

.enroll-right::-webkit-scrollbar{

    width:8px;

}

.enroll-right::-webkit-scrollbar-thumb{

    background:#1d72d8;

    border-radius:20px;

}

.enroll-right::-webkit-scrollbar-track{

    background:#f5f5f5;

}

/*=========================================================
        SECTION FADE
=========================================================*/

.student-section,
.academic-section,
.parent-section,
.address-section{

    animation:fadeSection .8s ease;

}

@keyframes fadeSection{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

.enroll-header-content h2{

    animation:titleZoom .7s ease;

}

@keyframes titleZoom{

    from{

        opacity:0;

        transform:scale(.92);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}


/* =========================================================
   ENROLL MODAL
   FACILITIES - COMPLETE CSS
========================================================= */


/* =========================================================
   FACILITIES MAIN AREA
========================================================= */

.left-enroll-facilities {
    width: 100%;
    position: relative;
    z-index: 2;
}


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

.facility-enroll-title {
    width: 100%;

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

    gap: 16px;

    margin-bottom: 18px;
}


.facility-enroll-title span {
    height: 2px;
    flex: 1;

    max-width: 90px;

    background: rgba(255,255,255,.45);
}


.facility-enroll-title h4 {
    margin: 0;

    color: #fff;

    font-size: 16px;
    font-weight: 700;

    line-height: 1;

    white-space: nowrap;
}


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

.enroll-facility-list {

    width: 100%;

    margin: 0;
    padding: 0;

    list-style: none;

    overflow: hidden;
}


/* =========================================================
   NORMAL FACILITY ITEM
========================================================= */

.enroll-facility-list li {

    width: 100%;

    min-height: 50px;

    margin: 0 0 10px 0;

    padding: 0 14px;

    display: flex;

    align-items: center;

    gap: 12px;

    border-radius: 12px;

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

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

    color: #fff;

    box-sizing: border-box;

    transition:
        background-color .3s ease,
        border-color .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}


/* =========================================================
   FACILITY DOT
========================================================= */

.enroll-facility-list li > i {

    flex: 0 0 auto;

    font-size: 8px;

    color: #fff;

    opacity: .95;
}


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

.enroll-facility-list li h5 {

    margin: 0;

    padding: 0;

    color: #fff;

    font-size: 13px;

    font-weight: 600;

    line-height: 1.4;
}


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

.enroll-facility-list li:hover {

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

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

    transform: translateX(3px);

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


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

/*
   IMPORTANT:

   display:none is NOT used.

   max-height is used so the facilities
   can smoothly expand/collapse.
*/

.enroll-facility-hidden {

    display: flex !important;

    max-height: 0 !important;

    min-height: 0 !important;

    height: auto !important;

    opacity: 0;

    overflow: hidden;

    transform: translateY(-10px);

    margin-top: 0 !important;

    margin-bottom: 0 !important;

    padding-top: 0 !important;

    padding-bottom: 0 !important;

    border-width: 0 !important;

    pointer-events: none;

    visibility: hidden;

    transition:
        max-height .45s ease,
        min-height .45s ease,
        opacity .30s ease,
        transform .40s ease,
        margin .40s ease,
        padding .40s ease,
        border .40s ease,
        visibility 0s linear .45s;
}


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

.enroll-facility-hidden.enroll-facility-show {

    max-height: 80px !important;

    min-height: 50px !important;

    opacity: 1;

    transform: translateY(0);

    margin-top: 0 !important;

    margin-bottom: 10px !important;

    padding-top: 0 !important;

    padding-bottom: 0 !important;

    border-width: 1px !important;

    pointer-events: auto;

    visibility: visible;

    transition:
        max-height .50s ease,
        min-height .50s ease,
        opacity .35s ease,
        transform .45s ease,
        margin .45s ease,
        padding .45s ease,
        border .45s ease,
        visibility 0s linear 0s;
}


/* =========================================================
   VIEW MORE / VIEW LESS BUTTON
========================================================= */

.facility-enroll-toggle-btn {

    width: 100%;

    height: 50px;

    margin: 0;

    padding: 0 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

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

    border-radius: 12px;

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

    color: #fff;

    font-family: inherit;

    font-size: 13px;

    font-weight: 700;

    line-height: 1;

    cursor: pointer;

    outline: none;

    box-shadow: none;

    transition:
        background-color .35s ease,
        border-color .35s ease,
        box-shadow .35s ease,
        transform .25s ease;
}


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

.facility-enroll-toggle-btn:hover {

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

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

    box-shadow:
        0 6px 16px rgba(0,0,0,.10);

    transform: translateY(-1px);
}


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

.facility-enroll-toggle-btn.active {

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

    border-color: rgba(255,255,255,.65);
}


/* =========================================================
   ARROW
========================================================= */

.enroll-facility-arrow {

    width: 8px;

    height: 8px;

    flex: 0 0 8px;

    display: block;

    border-right: 2px solid #fff;

    border-bottom: 2px solid #fff;

    transform: rotate(45deg);

    margin-top: -4px;

    transition:
        transform .45s cubic-bezier(.4,0,.2,1),
        margin-top .35s ease;
}


/* =========================================================
   ARROW - VIEW LESS
========================================================= */

.facility-enroll-toggle-btn.active
.enroll-facility-arrow {

    transform: rotate(225deg);

    margin-top: 4px;
}


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

.enroll-facility-toggle-text {

    display: inline-block;

    color: #fff;

    line-height: 1;

    transition:
        opacity .25s ease,
        transform .25s ease;
}


/* =========================================================
   FACILITY OPEN ANIMATION
========================================================= */

.enroll-facility-hidden.enroll-facility-show {

    animation: enrollFacilityOpen .45s ease both;
}


@keyframes enrollFacilityOpen {

    0% {

        opacity: 0;

        transform: translateY(-10px);

    }

    100% {

        opacity: 1;

        transform: translateY(0);

    }

}


/* =========================================================
   FACILITY CLOSE ANIMATION
========================================================= */

.enroll-facility-hidden:not(.enroll-facility-show) {

    animation: enrollFacilityClose .35s ease both;
}


@keyframes enrollFacilityClose {

    0% {

        opacity: 1;

        transform: translateY(0);

    }

    100% {

        opacity: 0;

        transform: translateY(-10px);

    }

}


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

@media (max-width: 991px) {

    .facility-enroll-title {

        margin-bottom: 15px;

    }

    .facility-enroll-title span {

        max-width: 70px;

    }

}


@media (max-width: 576px) {

    .facility-enroll-title {

        gap: 10px;

        margin-bottom: 14px;

    }

    .facility-enroll-title span {

        max-width: 50px;

    }

    .facility-enroll-title h4 {

        font-size: 14px;

    }

    .enroll-facility-list li {

        min-height: 46px;

        margin-bottom: 8px;

        padding: 0 12px;

        border-radius: 10px;

    }

    .enroll-facility-list li h5 {

        font-size: 12px;

    }

    .facility-enroll-toggle-btn {

        height: 40px;

        font-size: 12px;

        border-radius: 10px;

    }

}



/* =========================================================
   SCHOOL E-LIBRARY
========================================================= */

.school-elibrary-section {
    position: relative;
    padding: 60px 0 100px;
    background: #f7f9fc;
    overflow: hidden;
}


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

.school-elibrary-section .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}


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

.school-elibrary-heading {
    text-align: center;
    margin-bottom: 42px;
}


.heading-label {
    display: inline-flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 12px;

    color: #d71920;

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

    letter-spacing: 1.2px;
    text-transform: uppercase;
}


.heading-label i {
    display: block;

    width: 28px;
    height: 2px;

    background: #d71920;
}


.school-elibrary-heading h2 {
    margin: 0 0 12px;

    color: #1c2c3a;

    font-size: 38px;
    line-height: 1.15;

    font-weight: 500;
    letter-spacing: -1px;
}


.school-elibrary-heading p {
    max-width: 720px;

    margin: 0 auto;

    color: #667085;

    font-size: 17px;
    line-height: 1.7;
}


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

.school-library-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}


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

.school-library-card {
    position: relative;

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

    min-height: 112px;

    padding: 20px 22px 20px 28px;

    background: #ffffff;

    border: 1px solid #edf0f5;
    border-left: 4px solid #d71920;

    border-radius: 14px;

    box-shadow:
        0 8px 25px rgba(25, 41, 82, 0.055);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


.school-library-card:hover {
    transform: translateY(-3px);

    border-left-color: #b9151b;

    box-shadow:
        0 16px 35px rgba(25, 41, 82, 0.10);
}


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

.library-card-content {
    display: flex;
    align-items: center;

    min-width: 0;
}


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

.library-icon {
    flex: 0 0 72px;

    width: 72px;
    height: 72px;

    margin-right: 24px;

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

    border-radius: 50%;

    background: #fff0f1;

    color: #d71920;

    font-size: 30px;

    transition: .3s;
}


.school-library-card:hover .library-icon {
    background: #d71920;
    color: #ffffff;

    transform: scale(1.05);
}


/* =========================================================
   INFORMATION
========================================================= */

.library-info {
    min-width: 0;
}


.library-meta {
    margin-bottom: 5px;

    color: #d71920;

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

    line-height: 1.3;
}


.library-meta span {
    padding: 0 5px;
    color: #d71920;
}


.library-info h3 {
    margin: 0 0 4px;

    color: #192952;

    font-size: 18px;
    line-height: 1.4;

    font-weight: 700;
}


.library-info p {
    margin: 0;

    color: #667085;

    font-size: 15px;
    line-height: 1.5;
}


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

.library-actions {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-left: 25px;

    flex-shrink: 0;
}


.library-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 42px;

    padding: 0 18px;

    border-radius: 7px;

    text-decoration: none;

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

    white-space: nowrap;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


.library-actions a i {
    margin-right: 8px;
    font-size: 14px;
}


.library-actions a:hover {
    transform: translateY(-2px);
}


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

.download-btn {
    background: #ed1c24;
    color: #ffffff;

    box-shadow:
        0 5px 12px rgba(237, 28, 36, 0.18);
}


.download-btn:hover {
    background: #c9141b;
    color: #ffffff;

    box-shadow:
        0 8px 18px rgba(237, 28, 36, 0.25);
}


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

.whatsapp-btn {
    background: #08a878;
    color: #ffffff;

    box-shadow:
        0 5px 12px rgba(8, 168, 120, 0.15);
}


.whatsapp-btn:hover {
    background: #078d66;
    color: #ffffff;
}


/* =========================================================
   FACEBOOK
========================================================= */

.facebook-btn {
    background: #35579a;
    color: #ffffff;

    box-shadow:
        0 5px 12px rgba(53, 87, 154, 0.15);
}


.facebook-btn:hover {
    background: #29477e;
    color: #ffffff;
}


#library_view_more_box {
    text-align: center;
    margin-top: 25px;
    margin-bottom: 25px;
}

#library_view_more {
    border: none;
    outline: none;
    background: #087f5b;
    color: #fff;
    text-transform: capitalize;
    font-size: 15px;
    font-weight: 600;
    padding: 11px 28px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

#library_view_more:hover {
    background: #066b4d;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}

#library_view_more:active {
    transform: translateY(0);
}

#library_view_more:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

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

@media (max-width: 1100px) {

    .school-elibrary-section {
        padding: 70px 0 80px;
    }


    .school-elibrary-heading h2 {
        font-size: 40px;
    }


    .school-library-card {
        padding: 18px;
    }


    .library-actions {
        gap: 8px;
        margin-left: 18px;
    }


    .library-actions a {
        padding: 0 13px;
        font-size: 12px;
    }

}


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

@media (max-width: 767px) {

    .school-elibrary-section {
        padding: 55px 0 65px;
    }


    .school-elibrary-section .container {
        padding: 0 15px;
    }


    .school-elibrary-heading {
        margin-bottom: 30px;
    }


    .heading-label {
        font-size: 12px;
        gap: 9px;
    }


    .heading-label i {
        width: 20px;
    }


    .school-elibrary-heading h2 {
        font-size: 32px;
        letter-spacing: -.5px;
    }


    .school-elibrary-heading p {
        font-size: 15px;
    }


    .school-library-list {
        gap: 12px;
    }


    .school-library-card {
        display: block;

        padding: 20px;

        border-left-width: 3px;
    }


    .library-card-content {
        align-items: flex-start;
    }


    .library-icon {
        flex: 0 0 58px;

        width: 58px;
        height: 58px;

        margin-right: 16px;

        font-size: 24px;
    }


    .library-meta {
        font-size: 12px;
    }


    .library-info h3 {
        font-size: 16px;
    }


    .library-info p {
        font-size: 14px;
    }


    .library-actions {
        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 9px;

        margin: 18px 0 0;
    }


    .download-btn {
        grid-column: 1 / -1;
    }


    .library-actions a {
        width: 100%;
        height: 42px;
    }

}


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

@media (max-width: 480px) {

    .school-elibrary-heading h2 {
        font-size: 28px;
    }


    .library-card-content {
        align-items: flex-start;
    }


    .library-icon {
        flex: 0 0 50px;

        width: 50px;
        height: 50px;

        margin-right: 13px;

        font-size: 21px;
    }


    .library-info h3 {
        font-size: 15px;
    }


    .library-info p {
        font-size: 13px;
    }

}

/* =========================================
   CONTACT PAGE
========================================= */

.contact-page {
    max-width: 1320px;
    margin: 0 auto;
    padding: 35px 24px 50px;
    /* font-family: "Poppins", Arial, sans-serif; */
    color: #111943;
}


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

.contact-header {
    text-align: center;
    margin-bottom: 35px;
}

.contact-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 18px;

    background: #edf4ff;
    color: #1165ed;

    border-radius: 30px;

    font-size: 14px;
    font-weight: 700;
}

.contact-badge i {
    font-size: 16px;
}

.contact-header h2 {
    margin: 12px 0 8px;

    font-size: 38px;
    line-height: 1.2;
    font-weight: 500;

    color: #111943;
}

.contact-header p {
    margin: 0;

    font-size: 17px;
    color: #59627e;
}


/* =========================================
   TOP CONTACT INFORMATION
========================================= */

.contact-info-wrapper {
    display: flex;
    gap: 20px;

    margin-bottom: 25px;
}


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

.timing-card {
    width: 305px;
    flex-shrink: 0;

    padding: 25px;

    background: #ffffff;

    border-radius: 15px;

    box-shadow: 0 5px 25px rgba(24, 48, 90, 0.08);

    border: 1px solid #f0f2f7;
}

.info-icon,
.detail-icon,
.benefit-icon {
    width: 56px;
    height: 56px;

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

    background: #edf4ff;

    color: #1165ed;

    border-radius: 50%;

    font-size: 25px;
}

.timing-card .info-icon {
    margin-bottom: 12px;
}

.timing-card h3 {
    margin: 0;

    font-size: 18px;
    font-weight: 700;

    color: #111943;
}

.blue-line {
    width: 48px;
    height: 3px;

    margin: 10px 0 22px;

    background: #1165ed;
}

.timing-row {
    display: flex;
    align-items: flex-start;

    gap: 12px;
}

.timing-row > i {
    margin-top: 2px;

    color: #1165ed;

    font-size: 19px;
}

.timing-row strong {
    display: block;

    margin-bottom: 5px;

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

    color: #1b2348;
}

.timing-row span {
    display: block;

    font-size: 14px;

    color: #5c6580;
}

.timing-row .closed {
    color: #e52222;
    font-weight: 600;
}

.timing-divider {
    margin: 18px 0;

    border-top: 1px dashed #d8dce6;
}


/* =========================================
   ADDRESS / PHONE / EMAIL
========================================= */

.contact-details {
    flex: 1;

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

    background: #ffffff;

    border-radius: 15px;

    border: 1px solid #f0f2f7;

    box-shadow: 0 5px 25px rgba(24, 48, 90, 0.08);

    overflow: hidden;
}

.detail-box {
    padding: 25px 28px;

    border-right: 1px solid #e1e4eb;
}

.detail-box:last-child {
    border-right: none;
}

.detail-icon {
    margin-bottom: 12px;
}

.detail-box h3 {
    margin: 0;

    font-size: 18px;
    font-weight: 700;

    color: #111943;
}

.detail-box .blue-line {
    margin-bottom: 18px;
}

.detail-box p {
    margin: 0;

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

    color: #4e5875;
}


/* =========================================
   FORM + MAP
========================================= */

.main-contact-card {
    display: grid;

    grid-template-columns: 400px 1fr;

    gap: 35px;

    padding: 28px;

    background: #ffffff;

    border-radius: 15px;

    border: 1px solid #f0f2f7;

    box-shadow: 0 5px 25px rgba(24, 48, 90, 0.08);
}


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

.contact-us-form h2,
.map-section h2 {
    margin: 0;

    font-size: 27px;
    font-weight: 700;

    color: #111943;
}

.section-line {
    width: 48px;
    height: 3px;

    margin: 10px 0 25px;

    background: #1165ed;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;

    margin-bottom: 8px;

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

    color: #17204b;
}

.form-group input,
.form-group textarea {
    width: 100%;

    padding: 13px 14px;

    border: 1px solid #d8dce5;

    border-radius: 6px;

    outline: none;

    background: #fff;

    color: #333;

    font-family: inherit;

    font-size: 14px;

    transition: all 0.25s ease;
}

.form-group input {
    height: 46px;
}

.form-group textarea {
    height: 120px;

    resize: vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #9aa1b1;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #1165ed;

    box-shadow: 0 0 0 3px rgba(17, 101, 237, 0.08);
}


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

.submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 13px 28px;

    border: 0;
    border-radius: 5px;

    background: #1165ed;

    color: #ffffff;

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

    cursor: pointer;

    transition: all 0.25s ease;
}

.submit-btn:hover {
    background: #0954cc;

    transform: translateY(-1px);

    box-shadow: 0 5px 15px rgba(17, 101, 237, 0.20);
}

.submit-btn i {
    font-size: 13px;
}


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

.map-section {
    min-width: 0;
}

.map-container {
    width: 100%;
    height: 510px;

    overflow: hidden;

    border-radius: 5px;

    background: #eef1f5;
}

.map-container iframe {
    width: 100%;
    height: 100%;

    display: block;

    border: 0;
}


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

.benefits-card {
    display: grid;

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

    margin-top: 25px;

    background: #ffffff;

    border-radius: 15px;

    border: 1px solid #f0f2f7;

    box-shadow: 0 5px 25px rgba(24, 48, 90, 0.08);

    overflow: hidden;
}

.benefit {
    display: flex;
    align-items: center;

    gap: 15px;

    padding: 25px 30px;

    border-right: 1px solid #e0e3ea;
}

.benefit:last-child {
    border-right: none;
}

.benefit-icon {
    width: 50px;
    height: 50px;

    flex-shrink: 0;

    margin: 0;

    font-size: 22px;
}

.benefit h4 {
    margin: 0 0 5px;

    font-size: 15px;
    font-weight: 700;

    color: #17204b;
}

.benefit p {
    margin: 0;

    font-size: 12px;

    color: #69728a;
}


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

.timing-card,
.contact-details,
.main-contact-card,
.benefits-card {
    transition: all 0.25s ease;
}

.timing-card:hover,
.contact-details:hover,
.main-contact-card:hover,
.benefits-card:hover {
    box-shadow: 0 10px 30px rgba(24, 48, 90, 0.11);
}


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

@media (max-width: 1100px) {

    .contact-info-wrapper {
        flex-direction: column;
    }

    .timing-card {
        width: 100%;
    }

    .main-contact-card {
        grid-template-columns: 1fr;
    }

    .map-container {
        height: 450px;
    }

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

    .benefit:nth-child(2) {
        border-right: none;
    }

    .benefit:nth-child(-n+2) {
        border-bottom: 1px solid #e0e3ea;
    }
}


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

@media (max-width: 700px) {

    .contact-page {
        padding: 25px 15px 40px;
    }

    .contact-header {
        margin-bottom: 25px;
    }

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

    .contact-header p {
        font-size: 14px;
        line-height: 1.6;
    }

    .contact-details {
        grid-template-columns: 1fr;
    }

    .detail-box {
        border-right: none;

        border-bottom: 1px solid #e1e4eb;
    }

    .detail-box:last-child {
        border-bottom: none;
    }

    .main-contact-card {
        padding: 20px;

        gap: 30px;
    }

    .contact-us-form h2,
    .map-section h2 {
        font-size: 23px;
    }

    .map-container {
        height: 350px;
    }

    .benefits-card {
        grid-template-columns: 1fr;
    }

    .benefit {
        border-right: none;

        border-bottom: 1px solid #e0e3ea;
    }

    .benefit:last-child {
        border-bottom: none;
    }
}


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

@media (max-width: 450px) {

    .contact-header h2 {
        font-size: 30px;
    }

    .contact-badge {
        font-size: 12px;

        padding: 7px 14px;
    }

    .timing-card,
    .detail-box {
        padding: 20px;
    }

    .main-contact-card {
        padding: 16px;
    }

    .map-container {
        height: 300px;
    }

    .submit-btn {
        width: 100%;
    }
}




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

.school-footer {
    position: relative;
    padding: 50px 0 0;
    background: linear-gradient(
        110deg,
        #0f1e33 0%,
        #15284b 48%,
        #232f69 100%
    );
    color: #fff;
    overflow: hidden;
}


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

.school-footer::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image: url("images/pattern.png");
    background-repeat: repeat;

    opacity: 0.04;
    pointer-events: none;
}


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

.school-footer__container {
    width: 100%;
    max-width: 1400px;

    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;

    position: relative;
    z-index: 2;
}


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

.school-footer__row {
    row-gap: 30px;
}


/*==========================================
    WIDGET
==========================================*/

.school-footer__widget {
    position: relative;
    z-index: 2;
}

.school-footer__title {
    margin: 0 0 16px;

    color: #fff;

    font-size: 20px;
    font-weight: 700;

    line-height: 1.3;
}

.school-footer__text {
    max-width: 390px;

    margin: 0;

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

    font-size: 14px;
    line-height: 1.8;
}


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

.school-footer__links {
    list-style: none;

    padding: 0;
    margin: 0;
}

.school-footer__links li {
    margin-bottom: 10px;
}

.school-footer__links li:last-child {
    margin-bottom: 0;
}

.school-footer__links a {
    display: inline-block;

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

    font-size: 14px;
    line-height: 1.5;

    text-decoration: none;

    transition: all 0.3s ease;
}

.school-footer__links a:hover {
    color: #ffd54f;
    transform: translateX(5px);
}


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

.school-footer__social {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-top: 18px;
}

.school-footer__social a {
    width: 38px;
    height: 38px;

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

    border-radius: 50%;

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

    color: #fff;

    font-size: 14px;

    text-decoration: none;

    transition: all 0.3s ease;
}

.school-footer__social a:hover {
    background: #ffd54f;
    color: #172442;

    transform: translateY(-3px);
}


/*==========================================
    ENROLL
==========================================*/

.school-footer__enroll {
    padding-left: 5px;
}

.school-footer__enroll .school-footer__text {
    margin-bottom: 18px;
}


.school-footer__enroll-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 10px 20px;

    border-radius: 6px;

    background: #fff;
    color: #172442;

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

    text-decoration: none;

    transition: all 0.3s ease;
}

.school-footer__enroll-btn i {
    font-size: 13px;

    transition: transform 0.3s ease;
}

.school-footer__enroll-btn:hover {
    background: #ffd54f;
    color: #172442;

    transform: translateY(-2px);
}

.school-footer__enroll-btn:hover i {
    transform: translateX(4px);
}


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

.school-footer__bottom {
    position: relative;

    margin-top: 38px;

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

    z-index: 2;
}

.school-footer__bottom-inner {
    width: 100%;
    max-width: 1400px;

    margin: 0 auto;

    padding: 15px;

    text-align: center;
}

.school-footer__bottom p {
    margin: 0;

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

    font-size: 13px;
    line-height: 1.5;
}


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

.school-footer__back-top {
    position: absolute;

    right: 25px;
    bottom: 65px;

    width: 42px;
    height: 42px;

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

    border-radius: 50%;

    background: #78b84b;
    color: #fff;

    font-size: 14px;

    text-decoration: none;

    z-index: 5;

    transition: all 0.3s ease;
}

.school-footer__back-top:hover {
    background: #ffd54f;
    color: #172442;

    transform: translateY(-4px);
}


/*==========================================
    LARGE DESKTOP
==========================================*/

@media (max-width: 1399px) {

    .school-footer {
        padding-top: 45px;
    }

    .school-footer__title {
        font-size: 19px;
    }

}


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

@media (max-width: 991px) {

    .school-footer {
        padding-top: 40px;
    }

    .school-footer__row {
        row-gap: 28px;
    }

    .school-footer__widget {
        text-align: center;
    }

    .school-footer__text {
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

    .school-footer__social {
        justify-content: center;
    }

    .school-footer__links a:hover {
        transform: none;
    }

    .school-footer__enroll {
        padding-left: 0;
    }

    .school-footer__back-top {
        right: 18px;
        bottom: 62px;
    }

}


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

@media (max-width: 767px) {

    .school-footer {
        padding-top: 35px;
    }

    .school-footer__row {
        row-gap: 25px;
    }

    .school-footer__title {
        margin-bottom: 12px;
        font-size: 18px;
    }

    .school-footer__text {
        font-size: 14px;
        line-height: 1.7;
    }

    .school-footer__links li {
        margin-bottom: 8px;
    }

    .school-footer__links a {
        font-size: 14px;
    }

    .school-footer__social {
        margin-top: 15px;
    }

    .school-footer__bottom {
        margin-top: 30px;
    }

    .school-footer__bottom-inner {
        padding: 13px 15px;
    }

    .school-footer__bottom p {
        font-size: 12px;
    }

    .school-footer__back-top {
        width: 38px;
        height: 38px;

        right: 12px;
        bottom: 55px;

        font-size: 12px;
    }

}


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

@media (max-width: 480px) {

    .school-footer {
        padding-top: 30px;
    }

    .school-footer__title {
        font-size: 17px;
    }

    .school-footer__social a {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }

    .school-footer__enroll-btn {
        padding: 9px 18px;
        font-size: 13px;
    }

}


/*==========================================
    END SCHOOL FOOTER
==========================================*/



/*============= OTHER MODEL CSS =================*/

/*Model CSS*/
.response_gif {
  background-color: #fff;
  background-image: url("../img/loading.gif");
  background-position: center center;
  background-repeat: no-repeat;
  display: none;
  background-size: 100px auto;
  display: none;
  opacity: 0.9;
  position: fixed;
  width: 100%;
  z-index: 99999;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.modal-dialog.mw-900{

    max-width:800px;
    /* width:calc(100% - 20px); */
    margin:30px auto;
}


.traceablegiving_modal .modal-footer {
   	background: #f3f4f6;
	border-top: 1px solid #e5e7eb;
	padding: 1.25rem;
	gap: 0.75rem;
}

.traceablegiving_modal .modal-footer .btn-reset{
    border: 1px solid #4D4D4D;
    background-color: #4D4D4D;
    color:#ffffff;
}

.btn1 {
    font-size:14px;
    font-weight:500;
    padding:10px 30px;
    border-radius:8px;

}

.traceablegiving_modal .modal-footer .btn-reset:hover {
    border: 1px solid #4D4D4D;
  	background-color: #4D4D4D;
  	color: #ffffff;
	opacity: 0.9;
}

#view_view_url {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}