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

body {
    font-family: Georgia, serif !important;
}

:root {
    --primary-color: #E47718;
    /* --secondary-color:#762474; */
    --secondary-color: #082041;
    --tertiary-color: #D2337E;
    --blue-color: #0B85C6;
    --white-color: #fff;
    --black-color: #000;
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
}

.main-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: var(--white-color);
}

.container {
    width: 95%;
    max-width: 1400px;
    margin: auto;
}

.topbar {
    background: var(--black-color);
    padding: 12px 0;
}

.topbar-inner {
    display: flex;
    justify-content: flex-end;
    gap: 50px;
    align-items: center;
}

.top-links {
    display: flex;
    gap: 28px;
}

.top-links a {
    color: var(--white-color);
    font-size: 15px;
    text-decoration: none;
}

.top-right {
    display: flex;
    align-items: center;
    gap: 18px;
}

.top-right a {
    color: var(--white-color);
}

.tour-btn {
    background: var(--primary-color);
    padding: 9px 22px;
    border-radius: 6px;
    color: var(--white-color) !important;
    font-weight: 600;
    text-decoration: none;
}

.navbar-area {
    background: var(--white-color);
    padding: 7px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.navbar-inner {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.logo img {
    height: 70px;
}

.desktop-menu ul {
    display: flex;
    gap: 34px;
    align-items: center;
}

.desktop-menu a {
    color: var(--secondary-color);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}

.mobile-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 28px;
    color: var(--white-color);
    cursor: pointer;
}

.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 300px;
    height: 100%;
    background: var(--white-color);
    transition: .4s;
    box-shadow: -5px 0 20px rgba(0, 0, 0, .15);
    padding: 80px 30px;
    z-index: 9999;
}

.mobile-menu.active {
    right: 0;
}

.mobile-menu ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mobile-menu a {
    color: var(--black-color);
    font-size: 18px;
}

@media(max-width:1200px) {

    .desktop-menu ul {
        gap: 18px;
    }

    .desktop-menu a {
        font-size: 15px;
    }

}

@media(max-width:1600px) {

    .desktop-menu {
        display: none;
    }

    /* .top-links {
        display: none;
    } */

    .mobile-toggle {
        display: block;
    }

    .logo img {
        height: 60px;
    }

    .top-right {
        gap: 15px;
    }

}

@media(max-width:991px) {

    /* .topbar-inner {
        justify-content: space-between;
    } */
    /* .topbar {
        display: none;
    }
    .top-links {
        display: none;
    } */

}

@media(max-width:768px) {

    .logo img {
        height: 48px;
    }

    /* .topbar {
        display: none;
    } */

    /* .tour-btn {
        display: none;
    } */

    .top-right {
        gap: 12px;
    }

}

@media(max-width:576px) {

    .logo img {
        height: 42px;
    }

    .navbar-area {
        padding: 12px 0;
    }

    .mobile-menu {
        width: 100%;
    }

}

.desktop-menu {
    position: static;
}

.desktop-menu>ul {
    position: static;
}

.desktop-menu>ul>li {
    position: static;
}

.mega-parent {
    position: static;
}

.mega-menu {

    position: absolute;

    left: 0;
    right: 0;
    top: 100%;
    margin: 0 auto;
    width: 90vw;
    height: 450px;

    background: var(--secondary-color);

    display: flex;

    opacity: 0;

    visibility: hidden;

    transform: translateY(20px);

    transition: .35s ease;

    z-index: 99999;

    overflow: hidden;

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

}

.mega-parent:hover .mega-menu {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}

.mega-left {

    width: 330px;

    background: var(--secondary-color);

    padding: 25px 0;

    flex-shrink: 0;

}

.mega-left ul {

    margin: 0;
    padding: 0;
    list-style: none;
    display: block;
}

.mega-left li {

    display: flex;

    justify-content: space-between;

    align-items: center;

    color: var(--white-color);

    padding: 18px 20px;

    cursor: pointer;

    transition: .3s;

    border-left: 4px solid transparent;

}

.mega-left li:hover,
.mega-left li.active {

    background: var(--primary-color);

    border-left: 4px solid var(--primary-color);

}

.mega-left li span {

    font-size: 16px;

    font-weight: 500;

}

.mega-left li i {

    transition: .3s;

}

.mega-left li:hover i {

    transform: translateX(6px);

}

.mega-right {

    flex: 1;

    background: var(--secondary-color);
    border-left: 1px solid #636060;

    padding: 50px 70px;

}

.mega-content {

    display: none;

}

.mega-content.active {

    display: block;

}

.mega-content h3 {

    color: var(--white-color);

    font-weight: 700;

    font-size: 25px;

    margin-bottom: 35px;

}

.mega-links {

    display: grid;

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

    gap: 25px 45px;

}

.mega-links a {

    color: var(--white-color);

    font-size: 16px;

    text-decoration: none;

    transition: .25s;

}

.mega-links a:hover {

    color: var(--primary-color);

    padding-left: 10px;

}

.mega-content {
    display: none;
    width: 100%;
    gap: 60px;
    align-items: flex-start;
}

.mega-content.active {
    display: flex;
}

.mega-links {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
}

.mega-image {
    width: 38%;
}

.mega-image img {
    width: 100%;
    height: 330px;
    object-fit: cover;
}

.faculty-dropdown {
    position: static;
}

.faculty-menu {

    position: absolute;

    top: 100%;
    left: 50%;

    transform: translateX(-50%);

    width: 1400px;
    max-width: 95vw;

    background: var(--secondary-color);

    display: flex;

    opacity: 0;
    visibility: hidden;

    transition: .3s;

    z-index: 99999;

}

.faculty-dropdown:hover .faculty-menu {

    opacity: 1;
    visibility: visible;

}

.research-menu {

    position: absolute;

    top: 100%;

    left: 50%;

    transform: translateX(-50%);

    width: 1400px;
    max-width: 95vw;

    background: var(--secondary-color);

    display: flex;

    opacity: 0;
    visibility: hidden;

    transition: .35s;

    z-index: 99999;

}

.mega-parent:hover .research-menu {

    opacity: 1;
    visibility: visible;

}

.research-logo {

    width: 180px;

    background: var(--secondary-color);

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 40px;

}

.research-logo img {

    width: 120px;

}

.research-content {

    flex: 1;

    padding: 35px;

}

.research-top {

    display: grid;

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

    gap: 30px;

    margin-bottom: 30px;

}

.research-card {

    background: var(--white-color);

    text-align: center;

    padding: 40px 20px;

    text-decoration: none;

    transition: .3s;

}

.research-card:hover {

    transform: translateY(-5px);

}

.research-card img {

    width: 55px;

    margin-bottom: 20px;

}

.research-card h4 {

    color: var(--secondary-color);

    font-size: 16px;

    line-height: 1.3;

}

.research-links {

    background: var(--secondary-color);

    display: grid;

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

    gap: 22px;

    padding: 30px 40px;

}

.research-links a {

    color: var(--white-color);

    text-decoration: none;

    font-size: 16px;

    transition: .3s;

}

.research-links a:hover {

    color: var(--primary-color);

    padding-left: 8px;

}

.mega-content {

    display: none;

    width: 100%;

    justify-content: space-between;

    gap: 60px;

    align-items: flex-start;

}

.mega-content.active {

    display: flex;

}

.mega-links {

    flex: 1;

    display: grid;

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

    gap: 30px 70px;

}

.mega-links a {

    color: var(--white-color);

    text-decoration: none;

    font-size: 16px;

    font-weight: 500;

    transition: .3s;

}

.mega-links a:hover {

    color: var(--primary-color);

    padding-left: 8px;

}

.mega-image {

    width: 360px;

    flex-shrink: 0;

}

.mega-image img {

    width: 100%;

    height: 360px;

    object-fit: cover;

    display: block;

}

/*====================================
        NEWS & EVENTS
====================================*/

.news-parent {
    position: relative;
}

.news-menu {

    position: absolute;

    top: 100%;

    right: 0;

    width: 380px;

    background: var(--secondary-color);

    opacity: 0;

    visibility: hidden;

    transition: .35s;

    z-index: 99999;

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

}

.news-parent:hover>.news-menu {

    opacity: 1;

    visibility: visible;

}

.news-item {

    position: relative;

}

.news-item>a {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 18px 24px;

    color: var(--white-color);

    text-decoration: none;

    font-size: 17px;

    transition: .3s;

}

.news-item>a:hover {

    background: var(--primary-color);

}


/*====================================
        LEFT SUBMENU
====================================*/

.news-submenu {

    position: absolute;

    top: 0;

    right: 100%;

    width: 300px;

    background: var(--secondary-color);

    opacity: 0;

    visibility: hidden;

    transition: .35s;

    z-index: 99999;

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

}

.has-sub:hover>.news-submenu {

    opacity: 1;

    visibility: visible;

}

.news-submenu a {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 18px 24px;

    color: var(--white-color);

    text-decoration: none;

    font-size: 16px;

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

    transition: .3s;

}

.news-submenu a:last-child {

    border-bottom: none;

}

.news-submenu a:hover {

    background: var(--primary-color);

    padding-left: 30px;

}


/*====================================
        Responsive
====================================*/

@media(max-width:991px) {

    .news-menu {

        display: none;

    }

}

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

.centre-parent {
    position: static;
}

.centre-mega {

    position: absolute;

    left: 50%;

    top: 100%;

    transform: translateX(-50%);

    width: 1400px;

    max-width: 95vw;

    background: var(--secondary-color);

    display: flex;

    opacity: 0;

    visibility: hidden;

    transition: .35s;

    z-index: 99999;

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

}

.centre-parent:hover .centre-mega {

    opacity: 1;

    visibility: visible;

}

/* Left */

.centre-sidebar {

    width: 360px;

    background: var(--secondary-color);

    display: flex;

    flex-direction: column;

}

.centre-top {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 24px;

    color: var(--white-color);

    font-size: 16px;

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

}

.centre-top span {

    flex: 1;

}

.centre-logo {

    flex: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 40px;

}

.centre-logo img {

    max-width: 180px;

}

/* Right */

.centre-content {

    flex: 1;

    display: grid;
    border-left: 1px solid #5d5c5c;

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

    gap: 40px;

    padding: 30px 40px;

}

.centre-column {

    display: flex;

    flex-direction: column;

}

.centre-column a {

    color: var(--white-color);

    text-decoration: none;

    font-size: 16px;

    line-height: 1.45;

    margin-bottom: 26px;

    transition: .3s;

}

.centre-column a:hover {

    color: var(--primary-color);

}

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

@media(max-width:1400px) {

    .centre-mega {

        width: 95vw;

    }

}

@media(max-width:1200px) {

    .centre-sidebar {

        width: 280px;

    }

    .centre-content {

        gap: 25px;

        padding: 25px;

    }

    .centre-column a {

        font-size: 17px;

    }

}

@media(max-width:991px) {

    .centre-mega {

        display: none;

    }

}

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

.about-parent {
    position: relative;
}

.about-menu {

    position: absolute;

    top: 100%;

    right: 0;

    width: 380px;

    background: var(--secondary-color);

    opacity: 0;

    visibility: hidden;

    transition: .35s;

    z-index: 99999;

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

}

.about-parent:hover>.about-menu {

    opacity: 1;

    visibility: visible;

}

.about-item {

    position: relative;

    display: block;

}

.about-item>a,
.about-item {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 5px 12px;

    color: var(--white-color);

    text-decoration: none;

    font-size: 17px;

    transition: .3s;

}

.about-item:hover {

    background: var(--primary-color);

}

.about-item>a:hover {

    background: var(--primary-color);

}

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

.about-submenu {

    position: absolute;

    top: 0;

    right: 100%;

    width: 310px;

    background: var(--secondary-color);

    opacity: 0;

    visibility: hidden;

    transition: .35s;

    z-index: 99999;

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

}

.has-sub:hover>.about-submenu {

    opacity: 1;

    visibility: visible;

}

/* Links */

.about-submenu a {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 10px 24px;

    color: var(--white-color);

    text-decoration: none;

    font-size: 16px;

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

    transition: .3s;

}

.about-submenu a:last-child {

    border-bottom: none;

}

.about-submenu a:hover {

    background: var(--primary-color);

    padding-left: 30px;

}

/* Responsive */

@media(max-width:991px) {

    .about-menu {

        display: none;

    }

}

/* Default tabs */

.mega-content {
    display: none;
}

.mega-content.active {
    display: block;
}


/* ===========================
   PROGRAMMES TAB ONLY
=========================== */

#programmes.active {

    display: grid;

    grid-template-columns: 420px 1fr;

    gap: 60px;

    align-items: flex-start;

}


/* Image */

#programmes .mega-image {

    width: 100%;

}

#programmes .mega-image img {

    width: 100%;

    height: 360px;

    object-fit: cover;

    border-radius: 4px;

}


/* Right Side */

#programmes .programme-links {

    display: grid;

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

    gap: 35px 55px;

}


#programmes .programme-links a {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    color: var(--white-color);

    text-decoration: none;

    font-size: 16px;

    font-weight: 500;

    line-height: 1.5;

    transition: .3s;

}


#programmes .programme-links a i {

    width: 28px;

    font-size: 24px;

    color: var(--white-color);

    margin-top: 2px;

    flex-shrink: 0;

}


#programmes .programme-links a:hover {

    color: var(--primary-color);

    padding-left: 6px;

}


/* Responsive */

@media(max-width:1200px) {

    #programmes.active {

        grid-template-columns: 320px 1fr;

        gap: 35px;

    }

    #programmes .programme-links {

        gap: 25px 35px;

    }

    #programmes .programme-links a {

        font-size: 17px;

    }

}

@media(max-width:991px) {

    #programmes.active {

        display: block;

    }

    #programmes .mega-image {

        margin-bottom: 30px;

    }

    #programmes .programme-links {

        grid-template-columns: 1fr;

    }

}

/*=========================
    DEPARTMENTS
=========================*/

#departments.active {

    display: block;

}

.department-grid {

    display: grid;

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

    gap: 28px 45px;

}

.department-grid a {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    color: var(--white-color);

    text-decoration: none;

    font-size: 16px;

    font-weight: 500;

    line-height: 1.45;

    transition: .3s;

}

.department-grid a i {

    width: 28px;

    font-size: 24px;

    color: var(--white-color);

    flex-shrink: 0;

    margin-top: 2px;

}

.department-grid a:hover {

    color: var(--primary-color);

    padding-left: 8px;

}

@media(max-width:1400px) {

    .department-grid {

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

    }

}

@media(max-width:1200px) {

    .department-grid {

        gap: 24px;

    }

    .department-grid a {

        font-size: 16px;

    }

}

@media(max-width:991px) {

    .department-grid {

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

    }

}

@media(max-width:767px) {

    .department-grid {

        grid-template-columns: 1fr;

    }

}

/*==========================================
      HIGH SCHOOL STUDENTS
==========================================*/

#high-school.active {

    display: grid;

    grid-template-columns: 1fr 42%;

    gap: 70px;

    align-items: flex-start;

}

/* Left */

.highschool-links {

    display: flex;

    flex-direction: column;

    gap: 42px;

}

.highschool-links a {

    display: flex;

    align-items: flex-start;

    gap: 18px;

    color: var(--white-color);

    text-decoration: none;

    font-size: 16px;

    font-weight: 500;

    line-height: 1.45;

    transition: .3s;

}

.highschool-links a:hover {

    color: var(--primary-color);

    padding-left: 8px;

}

.highschool-links i {

    width: 30px;

    font-size: 24px;

    flex-shrink: 0;

    margin-top: 3px;

}

/* Right */

.highschool-image {

    width: 100%;

}

.highschool-image img {

    width: 100%;

    height: 350px;

    object-fit: cover;

    border-radius: 4px;

}

/* Responsive */

@media(max-width:1200px) {

    #high-school.active {

        grid-template-columns: 1fr 360px;

        gap: 40px;

    }

    .highschool-links a {

        font-size: 17px;

    }

}

@media(max-width:991px) {

    #high-school.active {

        display: block;

    }

    .highschool-image {

        margin-top: 30px;

    }

    .highschool-image img {

        height: 280px;

    }

}

/*====================================
    Academic Support
====================================*/

#support.active {

    display: grid;

    grid-template-columns: 1fr 420px;

    gap: 70px;

    align-items: flex-start;

}


/* Left Side */

.support-links {

    display: grid;

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

    gap: 40px 60px;

}


.support-links a {

    display: flex;

    align-items: flex-start;

    gap: 16px;

    color: var(--white-color);

    text-decoration: none;

    font-size: 16px;

    font-weight: 500;

    line-height: 1.45;

    transition: .3s;

}


.support-links a i {

    width: 28px;

    font-size: 22px;

    flex-shrink: 0;

    margin-top: 3px;

}


.support-links a:hover {

    color: var(--primary-color);

    padding-left: 8px;

}


/* Right Image */

.support-image {

    width: 100%;

}


.support-image img {

    width: 100%;

    height: 380px;

    object-fit: cover;

    border-radius: 4px;

}


/* Responsive */

@media(max-width:1200px) {

    #support.active {

        grid-template-columns: 1fr 340px;

        gap: 40px;

    }

    .support-links {

        gap: 30px;

    }

    .support-links a {

        font-size: 17px;

    }

}

@media(max-width:991px) {

    #support.active {

        display: block;

    }

    .support-image {

        margin-top: 30px;

    }

    .support-image img {

        height: 300px;

    }

    .support-links {

        grid-template-columns: 1fr;

    }

}

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

#related-links.active {

    display: grid;

    grid-template-columns: 1fr 42%;

    gap: 70px;

    align-items: flex-start;

}

/* Left */

.related-links-list {

    display: flex;

    flex-direction: column;

    gap: 38px;

}

.related-links-list a {

    color: var(--white-color);

    text-decoration: none;

    font-size: 16px;

    font-weight: 500;

    line-height: 1.45;

    transition: .3s;

}

.related-links-list a:hover {

    color: var(--primary-color);

    padding-left: 8px;

}

/* Right */

.related-links-image {

    width: 100%;

}

.related-links-image img {

    width: 100%;

    height: 405px;

    object-fit: cover;

    border-radius: 4px;

}

/*=====================================
        Responsive
======================================*/

@media(max-width:1200px) {

    #related-links.active {

        grid-template-columns: 1fr 360px;

        gap: 40px;

    }

    .related-links-list {

        gap: 28px;

    }

    .related-links-list a {

        font-size: 17px;

    }

}

@media(max-width:991px) {

    #related-links.active {

        display: block;

    }

    .related-links-image {

        margin-top: 30px;

    }

    .related-links-image img {

        height: 280px;

    }

}


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

#ug.active {

    display: grid;

    grid-template-columns: 1fr 42%;

    gap: 70px;

    align-items: flex-start;

}


/* Left */

.ug-links {

    display: flex;

    flex-direction: column;

    gap: 42px;

}

.ug-links a {

    display: block;

    color: var(--white-color);

    text-decoration: none;

    font-size: 16px;

    font-weight: 500;

    line-height: 1.45;

    transition: .3s;

}

.ug-links a:hover {

    color: var(--primary-color);

    padding-left: 8px;

}


/* Right */

.ug-image {

    width: 100%;

}

.ug-image img {

    width: 100%;

    height: 360px;

    object-fit: cover;

    border-radius: 4px;

}


/*=========================================
        Responsive
=========================================*/

@media(max-width:1200px) {

    #ug.active {

        grid-template-columns: 1fr 360px;

        gap: 40px;

    }

    .ug-links a {

        font-size: 17px;

    }

}

@media(max-width:991px) {

    #ug.active {

        display: block;

    }

    .ug-image {

        margin-top: 30px;

    }

    .ug-image img {

        height: 280px;

    }

}

/*=========================================
        Graduate Admission
=========================================*/

#pg.active {

    display: block;

}

.graduate-grid {

    display: grid;

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

    gap: 35px;

}

.graduate-card {

    text-decoration: none;

    color: var(--white-color);

    transition: .35s;

}

.graduate-card img {

    width: 100%;

    height: 270px;

    object-fit: cover;

    border-radius: 4px;

    transition: .35s;

}

.graduate-card h4 {

    margin-top: 18px;

    font-size: 16px;

    font-weight: 500;

    line-height: 1.45;

    color: var(--white-color);

}

.graduate-card:hover img {

    transform: scale(1.05);

}

.graduate-card:hover h4 {

    color: var(--primary-color);

}

/*=========================
      Responsive
=========================*/

@media(max-width:1400px) {

    .graduate-grid {

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

    }

}

@media(max-width:1200px) {

    .graduate-grid {

        gap: 25px;

    }

    .graduate-card img {

        height: 220px;

    }

    .graduate-card h4 {

        font-size: 17px;

    }

}

@media(max-width:991px) {

    .graduate-grid {

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

    }

}

@media(max-width:767px) {

    .graduate-grid {

        grid-template-columns: 1fr;

    }

}

/*=====================================
        Ph.D Admission
======================================*/

#phd.active {

    display: grid;

    grid-template-columns: 1fr 380px;

    gap: 70px;

    align-items: flex-start;

}


/* Left */

.phd-links {

    display: grid;

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

    gap: 42px 70px;

}

.phd-links a {

    display: block;

    color: var(--white-color);

    text-decoration: none;

    font-size: 16px;

    font-weight: 500;

    line-height: 1.5;

    transition: .3s;

}

.phd-links a:hover {

    color: var(--primary-color);

    padding-left: 8px;

}


/* Right */

.phd-image {

    width: 100%;

}

.phd-image img {

    width: 100%;

    height: 365px;

    object-fit: cover;

    border-radius: 4px;

}


/*=====================================
        Responsive
======================================*/

@media(max-width:1200px) {

    #phd.active {

        grid-template-columns: 1fr 330px;

        gap: 40px;

    }

    .phd-links {

        gap: 30px 40px;

    }

    .phd-links a {

        font-size: 17px;

    }

}

@media(max-width:991px) {

    #phd.active {

        display: block;

    }

    .phd-image {

        margin-top: 30px;

    }

    .phd-image img {

        height: 280px;

    }

    .phd-links {

        grid-template-columns: 1fr;

    }

}

/*=====================================
      Admission Related Links
======================================*/

#related.active {

    display: block;

}

.admission-links-grid {

    display: grid;

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

    gap: 35px;

}

.admission-link-card {

    display: block;

    text-decoration: none;

    color: var(--white-color);

    transition: .35s;

}

.admission-link-card img {

    width: 100%;

    height: 265px;

    object-fit: cover;

    border-radius: 4px;

    transition: .35s;

}

.admission-link-card h4 {

    margin-top: 18px;

    color: var(--white-color);

    font-size: 16px;

    font-weight: 500;

    line-height: 1.45;

    transition: .35s;

}

.admission-link-card:hover img {

    transform: translateY(-6px);

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

}

.admission-link-card:hover h4 {

    color: var(--primary-color);

}

/*=====================================
        Responsive
======================================*/

@media(max-width:1400px) {

    .admission-links-grid {

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

    }

}

@media(max-width:1200px) {

    .admission-links-grid {

        gap: 25px;

    }

    .admission-link-card img {

        height: 220px;

    }

    .admission-link-card h4 {

        font-size: 16px;

    }

}

@media(max-width:991px) {

    .admission-links-grid {

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

    }

}

@media(max-width:767px) {

    .admission-links-grid {

        grid-template-columns: 1fr;

    }

    .admission-link-card img {

        height: 240px;

    }

}

.faculty-parent{
    position: relative;
}

.faculty-dropdown{
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);

    background: #123f70;

    min-width: 270px;      /* Only enough for links */
    width: 260px;
    padding: 0;

    opacity: 0;
    visibility: hidden;
    transition: .3s;
    z-index: 9999;

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

.faculty-parent:hover .faculty-dropdown{
    opacity: 1;
    visibility: visible;
}

.faculty-left{
    width: 100%;
    background: #123f70;
}

.faculty-left a{
    display: block;
    padding: 18px 22px;
    color: var(--white-color);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    border-bottom: 1px solid rgba(255,255,255,.08);
    transition: .3s;
}

.faculty-left a:last-child{
    border-bottom: none;
}

.faculty-left a:hover{
    background: var(--primary-color);
    padding-left: 28px;
}

@media(max-width:991px){

.faculty-dropdown{
    display:none;
}

}


/* About Us */
.about-parent {
    position: relative;
}

.about-menu {
    position: absolute;
    top: 100%;
    right: 0;

    width: 280px;
    background: #082041;

    opacity: 0;
    visibility: hidden;

    transition: all .3s ease;

    z-index: 99999;
}

.about-parent:hover > .about-menu {
    opacity: 1;
    visibility: visible;
}


/* Overview */
.about-item {
    position: relative;
}

.about-item > a {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 10px 0px;

    color: #fff !important;
    font-size: 16px;

    text-decoration: none;
}

.about-item > a:hover {
    background: #E47718;
}


/* Overview → submenu */
.about-submenu {
    position: absolute;

    top: 0;
    right: 100%;

    width: 280px;

    background: #082041;

    opacity: 0;
    visibility: hidden;

    transition: all .3s ease;

    z-index: 99999;
}

.about-item.has-sub:hover > .about-submenu {
    opacity: 1;
    visibility: visible;
}


/* About SSJU → submenu */
.about-inner-submenu {
    position: absolute;

    top: 0;
    right: 100%;   /* LEFT SIDE */

    width: 320px;

    background: #082041;

    opacity: 0;
    visibility: hidden;

    transition: all .3s ease;

    z-index: 999999;

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


/* Show when About SSJU is hovered */
.about-submenu .has-sub:hover > .about-inner-submenu {
    opacity: 1;
    visibility: visible;
}


/* Final links */
.about-inner-submenu a {
    display: block;

    padding: 18px 16px;

    color: #fff !important;

    font-size: 16px;

    text-decoration: none;

    transition: .2s ease;
}

.about-inner-submenu a:hover {
    background: #E47718;
    padding-left: 22px;
}

/* =========================================
   UNIVERSITY LOGO SECTION
========================================= */

.university-logo-section {
    width: 100%;
    background: var(--white-color);
    border-top: 2px solid var(--secondary-color);
    border-bottom: 1px solid #ddd;

    /* IMPORTANT */
    position: relative;
    z-index: 1;
    /* padding: 8px 25px; */
}

.university-logo-inner {
    /* width: 95%; */
    /* max-width: 1600px; */
    margin: auto;

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

    gap: 25px;
}

.university-logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 105px;
}

/* Second image should be BIG */
.university-logo-item:nth-child(2) {
    flex: 3;
}

/* First image normal */
.university-logo-item:nth-child(1) {
    flex: 1;
}

.university-logo-item img {
    max-width: 100%;
    max-height: 90px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Main SSJU Logo */

/* .university-main-logo {
    flex: 3;
}

.university-main-logo img {
    max-width: 100%;
    max-height: 105px;
} */


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

@media(max-width:991px) {

    .university-logo-section {
        padding: 8px 15px;
    }

    .university-logo-inner {
        gap: 15px;
    }

    .university-logo-item {
        height: 75px;
    }

    .university-logo-item img {
        max-height: 65px;
    }

    .university-main-logo img {
        max-height: 75px;
    }

}


@media(max-width:767px) {

    .university-logo-section {
        padding: 8px 10px;
    }

    .university-logo-inner {
        gap: 8px;
    }

    .university-logo-item {
        height: 55px;
    }

    .university-logo-item img {
        max-height: 48px;
    }

    .university-main-logo img {
        max-height: 55px;
    }

}


@media(max-width:576px) {

    .university-logo-inner {
        gap: 5px;
    }

    .university-logo-item {
        height: 45px;
    }

    .university-logo-item img {
        max-height: 38px;
    }

    .university-main-logo img {
        max-height: 45px;
    }

}

/* =========================================
   SCROLL NAVBAR LOGO
========================================= */

.navbar-scroll-logo {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.navbar-scroll-logo img {
    width: 70px;
    height: auto;
    object-fit: contain;
}


/* Navbar after scrolling */

.navbar-area.is-scrolled .navbar-scroll-logo {
    display: flex;
}


/* Make navbar stay on top */

.navbar-area.is-scrolled {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}


/* Keep menu beside logo */

.navbar-area.is-scrolled .navbar-inner {
    display: flex;
    align-items: center;
}


/* Desktop */

/* =========================================
   SCROLLED NAVBAR LAYOUT
========================================= */

@media (min-width: 992px) {

    .navbar-area.is-scrolled .navbar-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    /* Logo stays on LEFT */
    .navbar-area.is-scrolled .navbar-scroll-logo {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex: 0 0 auto;
        margin-right: 40px;
    }

    .navbar-area.is-scrolled .navbar-scroll-logo img {
        width: 70px;
        height: auto;
    }

    /* Menu goes to RIGHT */
    .navbar-area.is-scrolled .desktop-menu {
        flex: 0 0 auto;
        margin-left: auto;
    }

    .navbar-area.is-scrolled .desktop-menu>ul {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 35px;
        margin: 0;
        padding: 0;
    }

}


/* Mobile */

/* =========================================
   MOBILE / TABLET SCROLL NAVBAR
========================================= */

@media (max-width: 991px) {

    .navbar-area.is-scrolled .navbar-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    /* Show logo when scrolling */
    .navbar-area.is-scrolled .navbar-scroll-logo {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        flex: 0 0 auto;
        margin: 0;
    }

    .navbar-area.is-scrolled .navbar-scroll-logo img {
        width: 45px;
        height: auto;
    }

}


/* =========================================
   HEADER - DO NOT STICK
========================================= */

.main-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    transform: none !important;
}

/* Top Strip - NEVER STICK */
.main-header .topbar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    transform: none !important;
    padding: 0 30px !important;
}

/* University Logo - NEVER STICK */
.main-header .university-logo-section {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    transform: none !important;
    z-index: 1 !important;
}

/* =========================================
   ONLY NAVBAR STICKS
========================================= */

.main-header .navbar-area.is-scrolled {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    transform: none !important;
    z-index: 9999 !important;
}


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

.topbar {
    width: 100%;
    background: var(--secondary-color);
    color: var(--white-color);
    position: relative;
    z-index: 10000;
}

.topbar-inner {
    min-height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}


/* LEFT CONTACT */

.top-contact {
    display: flex;
    align-items: center;
    gap: 30px;
}

.top-contact a {
    color: var(--white-color);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 7px;
}

.top-contact a i {
    color: var(--primary-color);
}


/* RIGHT SIDE */

.top-right {
    display: flex;
    align-items: center;
    gap: 18px;
}

.top-links {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.top-links li a,
.top-right>a {
    color: var(--white-color);
    text-decoration: none;
    font-size: 14px;
}

.top-right>a i {
    font-size: 14px;
}


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

.top-mobile-toggle {
    display: none;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    padding: 7px;
    cursor: pointer;

    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.top-mobile-toggle span {
    display: block;
    width: 25px;
    height: 2px;
    background: var(--white-color);
    transition: 0.3s ease;
}


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

/* =========================================
   TOP STRIP MOBILE MENU - RIGHT SIDE
========================================= */

.top-mobile-menu {
    display: none;

    position: fixed;

    /* Start below top strip */
    top: 70px;

    /* Always attach to RIGHT */
    right: 0;
    left: auto;

    /* Right-side panel */
    width: 400px;
    max-width: 67vw;

    background: var(--secondary-color);

    padding: 10px 18px;

    z-index: 99999;

    box-shadow: -5px 5px 20px rgba(0, 0, 0, 0.20);
}


/* OPEN */

.top-mobile-menu.active {
    display: block;
}


/* MENU ITEMS */

.top-mobile-menu a {
    display: block;

    padding: 12px 0;

    color: var(--white-color);

    text-decoration: none;

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

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

    transition: 0.2s ease;
}

.top-mobile-menu a:hover {
    color: var(--primary-color);
}


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

@media (max-width: 991px) {

    .top-mobile-menu {
        top: 70px;
        right: 0;
        left: auto;

        width: 400px;
        max-width: 67vw;
    }

}


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

@media (max-width: 576px) {

    .top-mobile-menu {
        top: 68px;

        right: 0;
        left: auto;

        width: 400px;

        /* DO NOT USE width:100% */
        max-width: 67vw;

        padding: 8px 18px;
    }

    .top-mobile-menu a {
        font-size: 16px;
        padding: 11px 0;
    }

}

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

@media (max-width: 1400px) {

    .topbar-inner {
        min-height: 70px;
        padding: 7px 0;
    }

    .top-contact {
        flex-direction: column;
        align-items: flex-start;
        gap: 7px;
    }

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

    .top-right {
        display: none;
    }

    .top-mobile-toggle {
        display: flex;
        flex-shrink: 0;
    }

}


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

@media (max-width: 576px) {

    .topbar-inner {
        min-height: 68px;
    }

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


}

/* =========================================
   TOP STRIP MOBILE MENU ONLY
========================================= */

.top-mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 5px 0 10px;

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

.top-mobile-menu-header span {
    color: var(--white-color);
    font-size: 17px;
    font-weight: 600;
}

.top-mobile-close {
    width: 32px;
    height: 32px;

    padding: 0;
    border: 0;
    background: transparent;

    color: #fff;
    font-size: 22px;

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

    cursor: pointer;
}

.top-mobile-close:hover {
    color: var(--primary-color);
}


/* ONLY TOP STRIP HAMBURGER */
.top-mobile-toggle {
    cursor: pointer;
}


/* ONLY TOP STRIP BUTTON WHEN OPEN */
.top-mobile-toggle.active span {
    display: none;
}

.top-mobile-toggle.active::before {
    content: "\f00d";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;

    font-size: 22px;
    color: #fff;
}


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

.search-modal .modal-dialog {
    max-width: 700px;
    width: calc(100% - 30px);
}

.search-modal .modal-content {
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.20);
}

.search-modal .modal-header {
    padding: 22px 25px;
    border-bottom: 1px solid #eeeeee;
}

.search-modal .modal-title {
    font-size: 22px;
    font-weight: 600;
    color: #222;
}

.search-modal .modal-body {
    padding: 30px 25px 35px;
}

/* Search Input Wrapper */

.search-input-wrapper {
    display: flex;
    align-items: stretch;
    width: 100%;
    gap: 10px;
}

/* Input */

.search-input {
    height: 55px;
    flex: 1;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    padding: 0 18px;
    font-size: 16px;
    outline: none;
    box-shadow: none !important;
}

.search-input:focus {
    border-color: #333;
}

/* Search Button */

.search-submit {
    height: 55px;
    min-width: 120px;
    border: 0;
    border-radius: 6px;
    background: #222;
    color: #fff;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    font-size: 15px;
    transition: all 0.3s ease;
}

.search-submit:hover {
    background: #444;
}

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

@media (max-width: 767px) {

    .search-modal .modal-dialog {
        width: calc(100% - 24px);
        margin: auto;
    }

    .search-modal .modal-header {
        padding: 18px 20px;
    }

    .search-modal .modal-body {
        padding: 25px 20px 30px;
    }

    .search-modal .modal-title {
        font-size: 20px;
    }

}

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

@media (max-width: 575px) {

    .search-modal .modal-dialog {
        width: calc(100% - 20px);
    }

    .search-modal .modal-body {
        padding: 20px 15px 25px;
    }

    .search-input-wrapper {
        flex-direction: column;
        gap: 12px;
    }

    .search-input {
        width: 100%;
        height: 50px;
        font-size: 15px;
    }

    .search-submit {
        width: 100%;
        height: 50px;
    }

}


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

.gallery-parent {
    position: relative !important;
}

.gallery-menu {
    position: absolute;
    top: 100%;
    right: 0;
    width: 300px;

    background: var(--secondary-color);

    opacity: 0;
    visibility: hidden;

    transform: translateY(15px);
    transition: .35s ease;

    z-index: 99999;

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

.gallery-parent:hover > .gallery-menu {
    opacity: 1;
    visibility: visible;
    /* transform: translateY(0); */
}

.gallery-menu a {
    display: flex;
    align-items: center;
    gap: 14px;

    padding: 18px 24px;

    color: var(--white-color);
    text-decoration: none;

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

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

    transition: .3s ease;
}

.gallery-menu a:last-child {
    border-bottom: none;
}

.gallery-menu a i {
    width: 24px;
    font-size: 18px;
    color: var(--white-color);
}

.gallery-menu a:hover {
    background: var(--primary-color);
    color: var(--white-color);
    padding-left: 30px;
}

.gallery-menu a:hover i {
    color: var(--white-color);
}

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

@media (max-width: 991px) {

    .gallery-menu {
        display: none;
    }

}


/* Faculty + R&D dropdown */
@media (min-width: 992px) {

    .desktop-menu > ul > li.faculty-parent {
        position: static !important;
    }

    .desktop-menu > ul > li.faculty-parent > .faculty-dropdown {
        position: absolute !important;

        top: 100% !important;
        left: auto !important;
        right: auto !important;

        transform: none !important;

        width: 320px !important;
        max-width: 90vw;

        background: var(--secondary-color);

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transition: .3s ease;

        z-index: 99999;
    }

    .desktop-menu > ul > li.faculty-parent:hover > .faculty-dropdown {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}


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

    .desktop-menu > ul > li.faculty-parent > .faculty-dropdown {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
    }
}

/*======================================
    SSJ UNIVERSITY FOOTER
======================================*/

.ssj-footer {
    background: var(--black-color);
    color: var(--white-color);
    padding: 80px 0 0px;
    font-family: 'Inter', sans-serif;
}

.ssj-footer a {
    color: var(--white-color);
    text-decoration: none;
    transition: .35s;
}

.ssj-footer a:hover {
    color: var(--primary-color);
}

/*============================
Logo
============================*/

.ssj-logo img {
    width: 100px;
    max-width: 100%;
    margin-bottom: 20px;
}

.ssj-logo h3 {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

/*============================
Address
============================*/

.ssj-address {
    margin-bottom: 35px;
}

.ssj-address h4 {
    font-size: 22px;
    font-family: Georgia, serif;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ssj-address h4 i {
    color: var(--primary-color);
    font-size: 22px;
}

.ssj-address p {
    color: var(--white-color);
    font-size: 16px;
    line-height: 1.9;
    margin: 0;
}

/*============================
Social
============================*/

.ssj-social h4 {
    font-size: 28px;
    font-family: Georgia, serif;
    margin-bottom: 22px;
}

.ssj-social {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.ssj-social h4 {
    width: 100%;
}

.ssj-social a {
    width: 55px;
    height: 55px;
    border: 1px solid rgba(255, 255, 255, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: .4s;
}

.ssj-social a:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--black-color);
    transform: translateY(-5px);
}

/*============================
Newsletter
============================*/

.newsletter-title {
    font-size: 22px;
    font-family: Georgia, serif;
    font-weight: 600;
    color: var(--white-color);
    line-height: 1.2;
}

.newsletter-form {
    display: flex;
    width: 100%;
}

.newsletter-form input {
    width: 100%;
    height: 58px;
    border: 1px solid rgba(255, 255, 255, .4);
    background: transparent;
    color: var(--white-color);
    padding: 0 20px;
    outline: none;
}

.newsletter-form input::placeholder {
    color: #bcbcbc;
}

.newsletter-form button {
    min-width: 170px;
    border: none;
    background: var(--white-color);
    color: var(--secondary-color);
    font-weight: 700;
    transition: .35s;
}

.newsletter-form button:hover {
    background: var(--primary-color);
    color: var(--black-color);
}

.ssj-btn {
    background: var(--white-color);
    color: var(--secondary-color);
    border-radius: 0;
    padding: 16px 40px;
    font-weight: 700;
    transition: .35s;
}

.ssj-btn:hover {
    background: var(--primary-color);
    color: var(--black-color);
}

/*============================
Footer Headings
============================*/

.ssj-footer h3 {
    font-size: 20px;
    font-family: Georgia, serif;
    margin-bottom: 30px;
    font-weight: 700;
}

/*============================
Footer Links
============================*/

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

.ssj-footer ul li {
    margin-bottom: 18px;
}

.ssj-footer ul li:last-child {
    margin-bottom: 0;
}

.ssj-footer ul li a {
    color: var(--white-color);
    font-size: 16px;
    position: relative;
    padding-left: 0;
}

.ssj-footer ul li a:hover {
    padding-left: 10px;
}

/*============================
Bottom
============================*/

.ssj-bottom {
    border-top: 1px solid rgba(255, 255, 255, .15);
    margin-top: 30px;
    padding-top: 28px;
    color: #d6d6d6;
    font-size: 16px;
}

/*============================
Spacing
============================*/

.ssj-footer .row>div {
    margin-bottom: 20px;
}

/*============================
Tablet
============================*/

@media(max-width:991px) {

    .ssj-footer {
        padding: 70px 0 0px;
    }

    .newsletter-title {
        font-size: 26px;
        margin-bottom: 25px;
    }

    .ssj-btn {
        display: block;
        width: 100%;
        text-align: center;
    }

    .ssj-footer h3 {
        font-size: 20px;
    }

    .ssj-address h4 {
        font-size: 20px;
    }

}

/*============================
Mobile
============================*/

@media(max-width:767px) {

    .ssj-footer {
        padding: 55px 0 0px;
        text-align: left;
    }

    .ssj-logo {
        text-align: center;
        margin-bottom: 30px;
    }

    .ssj-logo img {
        width: 100px;
    }

    .ssj-logo h3 {
        font-size: 28px;
    }

    .newsletter-title {
        font-size: 28px;
        margin-bottom: 20px;
    }

    .newsletter-form {
        display: block;
    }

    .newsletter-form input {
        margin-bottom: 15px;
    }

    .newsletter-form button {
        width: 100%;
        height: 55px;
    }

    .ssj-btn {
        margin-top: 15px;
    }

    .ssj-footer h3 {
        font-size: 20px;
        margin-top: 25px;
    }

    .ssj-address h4 {
        font-size: 20px;
    }

    .ssj-address p {
        font-size: 16px;
    }

    .ssj-social {
        justify-content: flex-start;
    }

    .ssj-social a {
        width: 50px;
        height: 50px;
        font-size: 18px;
    }

    .ssj-bottom {
        text-align: center;
        margin-top: 45px;
    }

}

/*============================
Small Mobile
============================*/

@media(max-width:480px) {

    .ssj-logo h3 {
        font-size: 24px;
    }

    .newsletter-title {
        font-size: 24px;
    }

    .ssj-footer h3 {
        font-size: 20px;
    }

    .ssj-address h4 {
        font-size: 20px;
    }

    .ssj-address p {
        font-size: 15px;
        line-height: 1.7;
    }

    .ssj-social a {
        width: 45px;
        height: 45px;
    }

}

.ssj-footer ul li a {
    position: relative;
    display: inline-block;
    color: var(--white-color);
    text-decoration: none;
    transition: .35s;
}

.ssj-footer ul li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    background: var(--secondary-color);
    transition: .35s;
}

.ssj-footer ul li a:hover {
    color: var(--primary-color);
}

.ssj-footer ul li a:hover::after {
    width: 100%;
}

.ssj-footer h3 {
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 28px;
}

.ssj-footer h3::after {
    content: "";
    width: 60px;
    height: 3px;
    background: var(--secondary-color);
    position: absolute;
    left: 0;
    bottom: 0;
}

.newsletter-form input {
    transition: .35s;
}

.newsletter-form input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 12px rgba(210, 178, 109, .35);
}

.ssj-btn {
    position: relative;
    overflow: hidden;
}

.ssj-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--secondary-color);
    transition: .4s;
    z-index: 0;
}

.ssj-btn span {
    position: relative;
    z-index: 2;
}

.ssj-btn:hover::before {
    left: 0;
}

.ssj-btn:hover {
    color: var(--black-color);
}

.ssj-social a {
    overflow: hidden;
    position: relative;
}

.ssj-social a::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    /* background: var(--secondary-color); */
    left: -100%;
    top: 0;
    transition: .4s;
    z-index: 0;
}

.ssj-social a i {
    position: relative;
    z-index: 2;
}

.ssj-social a:hover::before {
    left: 0;
}

.ssj-social a:hover {
    color: var(--black-color);
}

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

.ssju-hero {
    position: relative;
    overflow: hidden;
    background: var(--white-color);
    line-height: 0;
}

/*==========================
Carousel
==========================*/

#ssjuHeroSlider {
    position: relative;
}

/* .carousel-item{
    height:70vh;
} */

@media(max-width:991px) {

    /* .carousel-item{

        height:50vh;

    } */

}

/*==========================
Left Image
==========================*/

/* .ssju-image{
    position:relative;
    height:720px;
    overflow:hidden;
} */

.ssju-image img {
    /* width:100%;
    height:100%; */
    object-fit: cover;
    transition: 0.6s ease;
}

.carousel-item.active .ssju-image img {
    transform: scale(1.03);
}

/*==========================
Right Content
==========================*/

/* .ssju-content{

    height:720px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:80px;

    background: var(--white-color);

    background-image:url("images/pattern.png");

    background-size:cover;

    background-position:center;

} */

/*==========================
Small Tag
==========================*/

.ssju-tag {

    display: inline-block;

    background: var(--primary-color);

    color: var(--white-color);

    padding: 10px 24px;

    border-radius: 50px;

    font-size: 14px;

    letter-spacing: 1px;

    margin-bottom: 25px;

    text-transform: uppercase;

}

/*==========================
Heading
==========================*/

.ssju-content h1 {

    font-size: 56px;

    font-weight: 700;

    line-height: 1.2;

    color: var(--primary-color);

    margin-bottom: 25px;

}

.ssju-content h1 span {

    display: block;

    color: var(--secondary-color);

}

/*==========================
Paragraph
==========================*/

.ssju-content p {

    font-size: 20px;

    line-height: 1.8;

    color: #555;

    margin-bottom: 15px;

}

/*==========================
Scholarship Cards
==========================*/

.ssju-card {

    background: var(--white-color);

    border: 1px solid #ececec;

    padding: 30px;

    height: 100%;

    transition: .4s;

    position: relative;

}

.ssju-card:hover {

    transform: translateY(-10px);

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

}

.ssju-card::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 5px;

    height: 100%;

    background: var(--primary-color);

}

.ssju-card h3 {

    font-size: 26px;

    color: var(--secondary-color);

    margin-bottom: 15px;

    font-weight: 700;

}

.ssju-card h4 {

    color: var(--primary-color);

    font-size: 36px;

    margin-bottom: 12px;

    font-weight: 700;

}

.ssju-card p {

    margin-bottom: 20px;

    color: #666;

    font-size: 17px;

    line-height: 1.7;

}

.ssju-card a {

    color: var(--primary-color);

    text-decoration: none;

    font-weight: 600;

    transition: .3s;

}

.ssju-card a:hover {

    letter-spacing: 1px;

}

/*==========================
Learn More Button
==========================*/

.ssju-btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    background: var(--primary-color);

    color: var(--white-color);

    padding: 15px 36px;

    text-decoration: none;

    font-weight: 600;

    margin-top: 35px;

    border-radius: 50px;

    transition: .35s;

    width: fit-content;

}

.ssju-btn:hover {

    background: var(--secondary-color);

    color: var(--white-color);

}

.ssju-btn i {

    transition: .35s;

}

.ssju-btn:hover i {

    transform: translateX(6px);

}

/*==========================
Animation
==========================*/

.carousel-item.active .ssju-content {

    animation: fadeContent .8s ease;

}

@keyframes fadeContent {

    from {

        opacity: 0;

        transform: translateY(40px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/*==========================
Hero Section
==========================*/

.ssju-hero {
    position: relative;
}

#heroSlider {
    width: 100%;
}

/* .hero-slide{
    height:100vh;
    min-height:700px;
    overflow:hidden;
} */

.hero-slide img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

/* .carousel-item.active .hero-slide img{
    transform:scale(1.08);
} */

/* Overlay */

.hero-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    /* background:rgba(0,0,0,.15); */
}


/* Tablet */

@media(max-width:991px) {

    /* .hero-slide{

height:70vh;
min-height:550px;

} */

}

/* Mobile */

@media(max-width:767px) {

    /* .hero-slide{

height:55vh;
min-height:420px; */

}

.carousel-control-prev,
.carousel-control-next {

    width: 45px;
    height: 45px;

}

.carousel-control-prev {

    left: 10px;

}

.carousel-control-next {

    right: 10px;

}


.carousel-control-prev,
.carousel-control-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 70px;
    height: 70px;
    opacity: 1;
    z-index: 100;
    background: none;
}

.carousel-control-prev {
    left: 30px;
}

.carousel-control-next {
    right: 30px;
}

.hero-arrow {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white-color);
    font-size: 22px;
    transition: .3s;
}

.hero-arrow:hover {
    background: var(--primary-color);
}

/* academics section  */
.ssju-academics {
    padding: 60px 0;
    background: var(--white-color)4e0;
}

.container {
    width: 90%;
    max-width: 1350px;
    margin: auto;
}

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

.academics-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 40px;
}

.section-title {
    max-width: 720px;
}

.section-title h2 {
    color: var(--secondary-color);
    font-size: 35px;
    font-weight: 500;
    position: relative;
    display: inline-block;
    margin-bottom: 25px;
}

.section-title h2::after {
    content: "";
    width: 70px;
    height: 3px;
    background: var(--secondary-color);
    position: absolute;
    left: 0;
    bottom: -10px;
}

.section-title p {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 35px;
}

.know-btn {
    display: inline-block;
    padding: 10px 18px;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: .3s;
}

.know-btn:hover {
    background: var(--primary-color);
    color: var(--white-color);
}

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

.academics-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nav {
    width: 60px;
    height: 60px;
    background: var(--secondary-color);
    color: var(--white-color);
    border: none;
    font-size: 22px;
    text-align: center;
    cursor: pointer;
    transition: .3s;
    align-items: center;
    justify-content: center;
}

.nav:hover {
    background: var(--primary-color);
}

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

.slider {
    overflow: hidden;
}

.track {
    display: flex;
    gap: 20px;
    transition: .5s;
}

.card {
    flex: 0 0 calc(33.333% - 14px);
    background: transparent !important;
    border: none !important;
}

.card img {
    width: 100%;
    height: 280px;
    object-fit: cover;
}

.content {
    background: var(--secondary-color);
    padding: 35px;
    color: var(--white-color);
}

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

.content p {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 25px;
}

.content a {
    color: var(--white-color);
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
}

.content a i {
    margin-left: 8px;
}

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

@media(max-width:991px) {

    .academics-top {
        flex-direction: column;
        gap: 30px;
    }

    .academics-nav {
        flex-direction: row;
    }

    .card {
        flex: 0 0 calc(50% - 10px);
    }

}

@media(max-width:768px) {

    .section-title h2 {
        font-size: 30px;
    }

    .section-title p {
        font-size: 16px;
    }

    .card {
        flex: 0 0 100%;
    }

    .nav {
        width: 55px;
        height: 55px;
    }

    .know-btn {
        padding: 14px 35px;
        font-size: 18px;
    }

}

.ssju-schools {
    padding: 60px 0;
    background: var(--white-color);
}

.ssju-schools .container {
    width: 90%;
    max-width: 1400px;
    margin: auto;
}

.ssju-heading {
    margin-bottom: 45px;
}

.ssju-heading h2 {
    font-size: 35px;
    font-weight: 500;
    color: var(--secondary-color);
    margin-bottom: 20px;
    font-family: Georgia, serif;
}

.ssju-heading p {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    max-width: 1300px;
}

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

.school-card {
    transition: .4s;
}

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

.school-image {
    overflow: hidden;
}

.school-image img {
    width: 100%;
    height: 320px;
    display: block;
    object-fit: cover;
    transition: .5s;
}

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

.school-content {
    padding-top: 28px;
}

.school-content h3 {
    font-size: 20px;
    color: var(--secondary-color);
    margin-bottom: 18px;
    line-height: 1.2;
    font-weight: 600;
}

.school-content p {
    font-size: 16px;
    line-height: 1.9;
    color: #444;
    margin-bottom: 18px;
}

.school-content a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: var(--secondary-color);
    text-decoration: none;
    transition: .3s;
}

.school-content a:hover {
    color: var(--primary-color);
}

.school-content a i {
    transition: .3s;
}

.school-content a:hover i {
    transform: translateX(6px);
}

/******** Tablet ********/

@media(max-width:992px) {

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

    .school-image img {
        height: 270px;
    }

    .school-content h3 {
        font-size: 19px;
    }

}

/******** Mobile ********/

@media(max-width:768px) {

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

    .ssju-heading p {
        font-size: 16px;
    }

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

    .school-image img {
        height: 250px;
    }

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

    .school-content p {
        font-size: 16px;
    }

    .school-content a {
        font-size: 18px;
    }

}


.ssju-ranking {

    padding: 90px 0;

    background: var(--white-color)4e0;

}

.section-heading {

    margin-bottom: 40px;

}

.section-heading h2 {

    font-size: 35px;

    color: var(--primary-color);

    font-family: Georgia, serif;

    position: relative;

    display: inline-block;

}

.section-heading h2::after {

    content: "";

    width: 70px;

    height: 3px;

    background: var(--primary-color);

    position: absolute;

    left: 0;

    bottom: -12px;

}

.ranking-track {

    display: grid;

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

    gap: 50px;

}

.ranking-card {

    text-align: center;

}

.ranking-card img {

    height: 120px;

    object-fit: contain;

    margin-bottom: 25px;

    transition: .4s;

}

.ranking-card:hover img {

    transform: scale(1.05);

}

.ranking-card h4 {

    font-size: 20px;

    margin-bottom: 15px;

    color: var(--secondary-color);

}

.ranking-card p {

    font-size: 16px;

    line-height: 1.8;

    color: #555;

}

.ssju-faculty {

    padding: 60px 0;

    background: #faf8ef;

}

.ssju-faculty p {

    font-size: 20px;

    line-height: 1.9;

    max-width: 1200px;

    color: #333;

    margin-bottom: 45px;

}

.faculty-btn {

    display: inline-block;

    padding: 15px 25px;

    border: 2px solid var(--secondary-color);

    font-size: 18px;

    font-weight: 600;

    color: var(--secondary-color);

    text-decoration: none;

    transition: .3s;

}

.faculty-btn:hover {

    background: var(--secondary-color);

    color: var(--white-color);

}

@media(max-width:992px) {

    .ranking-track {

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

    }

    .section-heading h2 {

        font-size: 35px;

    }

    .ssju-faculty p {

        font-size: 18px;

    }

}

@media(max-width:768px) {

    .ranking-track {

        grid-template-columns: 1fr;

        gap: 40px;

    }

    .section-heading {

        text-align: center;

    }

    .section-heading h2 {

        font-size: 30px;

    }

    .ssju-faculty {

        text-align: center;

    }

    .ssju-faculty p {

        font-size: 17px;

    }

    .faculty-btn {

        padding: 15px 45px;

        font-size: 18px;

    }

}

/* papers section home  */

/*=========================================
    HM Discussion Papers - Base Layout
=========================================*/

.hm-paper-section {

    background: var(--secondary-color);

    position: relative;

    padding: 120px 0 70px;

    margin-top: 180px;

    overflow: visible;

}


/*=========================
Container
=========================*/

.hm-paper-section .container {
    max-width: 1320px;
    margin: auto;
    padding: 0 15px;
}


/*=========================
Heading
=========================*/

.hm-paper-header {
    text-align: center;
    margin-bottom: 70px;
}

.hm-paper-header h2 {
    font-size: 46px;
    color: var(--white-color);
    font-weight: 700;
    margin-bottom: 18px;
    line-height: 1.2;
}

.hm-paper-header p {
    max-width: 760px;
    margin: auto;
    color: #d8d8d8;
    font-size: 18px;
    line-height: 1.8;
}


/*=========================
Slider Area
=========================*/

.hm-paper-slider-area {

    position: relative;

    margin-top: -220px;

}


/*=========================
Viewport
=========================*/

.hm-paper-viewport {
    width: 100%;
    overflow: hidden;
}


/*=========================
Track
=========================*/

.hm-paper-track {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    padding: 0 130px;
    /* Increase to 160px if you want more space */
    transition: .7s ease;
}

@media (max-width:1400px) {

    .hm-paper-track {

        padding: 0 100px;

    }

}

@media (max-width:956px) {

    .hm-paper-track {

        padding: 0 15px;

    }

}


/*=========================
Cards
=========================*/

.hm-paper-card {
    position: relative;
    flex: 0 0 34.333%;
    padding: 0 18px;
    box-sizing: border-box;
}


/*=========================
Navigation
=========================*/
/* 
.hm-paper-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:58px;
    height:58px;
    border:none;
    background: var(--white-color);
    color: var(--secondary-color);
    font-size:20px;
    cursor:pointer;
    z-index:50;
    transition:.35s;
} */

.hm-paper-btn:hover {
    background: var(--primary-color);
    color: var(--white-color);
}

.hm-paper-prev {
    left: 20px;
}

.hm-paper-next {
    right: 20px;
}


/*=========================
Footer Button
=========================*/

/* .hm-paper-footer{
    margin-top:70px;
    text-align:center;
} */

.hm-paper-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 260px;
    height: 56px;
    font-size: 17px;
    border: 2px solid var(--white-color);
    color: var(--white-color);
    text-decoration: none;
    font-weight: 600;
    transition: .3s;
}

.hm-paper-all:hover {
    background: var(--white-color);
    color: var(--secondary-color);
}

/*=========================================
    HM Paper Card
=========================================*/

.hm-paper-card {

    position: relative;

    padding-top: 120px;

}


/*==============================
Floating Image
==============================*/

.hm-paper-thumb {

    position: absolute;

    top: 0;

    left: 18px;

    right: 18px;

    height: 250px;

    overflow: hidden;

    z-index: 10;

    background: #ddd;

}

.hm-paper-thumb img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: .5s;

}

.hm-paper-card:hover .hm-paper-thumb img {

    transform: scale(1.08);

}


/*==============================
White Box
==============================*/

.hm-paper-body {

    position: relative;

    background: var(--white-color);

    padding: 160px 35px 40px;

    min-height: 360px;

}


/*==============================
Category
==============================*/

.hm-paper-category {

    display: inline-block;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: var(--primary-color);

    margin-bottom: 18px;

}


/*==============================
Title
==============================*/

.hm-paper-body h3 {

    font-size: 18px;

    line-height: 1.35;

    font-weight: 700;

    color: var(--black-color);

    margin-bottom: 20px;

}


/*==============================
Link
==============================*/

.hm-paper-body a {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: var(--secondary-color);

    text-decoration: none;

    font-weight: 700;

    font-size: 18px;

    transition: .3s;

}

.hm-paper-body a:hover {

    gap: 18px;

}


/*==============================
Image Shadow
==============================*/

.hm-paper-thumb {

    /* box-shadow:

    0 25px 50px rgba(0,0,0,.18); */

}


/*==============================
Card Hover
==============================*/

.hm-paper-body {

    transition: .35s;

}

.hm-paper-card:hover .hm-paper-body {

    transform: translateY(-8px);

}

/*=========================================
    Large Desktop
=========================================*/

@media (max-width:1400px) {

    .hm-paper-section {

        margin-top: 160px;

    }

    .hm-paper-slider-area {

        margin-top: -140px;

    }

    .hm-paper-thumb {

        height: 290px;

    }

    .hm-paper-body {

        padding: 165px 30px 30px;

        min-height: 340px;

    }

}


/*=========================================
    Laptop
=========================================*/

@media (max-width:1199px) {

    .hm-paper-card {

        flex: 0 0 50%;

    }

    .hm-paper-thumb {

        height: 280px;

    }

    .hm-paper-body {

        padding: 160px 28px 30px;

    }

    .hm-paper-body h3 {

        font-size: 26px;

    }

}


/*=========================================
    Tablet
=========================================*/

@media (max-width:991px) {

    .hm-paper-section {

        margin-top: 140px;

        padding: 90px 0 80px;

    }

    .hm-paper-slider-area {

        margin-top: -120px;

    }

    .hm-paper-header {

        margin-bottom: 55px;

    }

    .hm-paper-header h2 {

        font-size: 38px;

    }

    .hm-paper-header p {

        font-size: 16px;

    }

    .hm-paper-thumb {

        height: 250px;

    }

    .hm-paper-body {

        padding: 145px 25px 25px;

        min-height: 310px;

    }

    .hm-paper-body h3 {

        font-size: 24px;

    }

}


/*=========================================
    Mobile
=========================================*/

@media (max-width:767px) {

    .hm-paper-card {

        flex: 0 0 100%;

    }

    .hm-paper-section {

        margin-top: 110px;

        padding: 70px 0 60px;

    }

    .hm-paper-slider-area {

        margin-top: -90px;

    }

    .hm-paper-thumb {

        left: 12px;

        right: 12px;

        height: 220px;

    }

    .hm-paper-card {

        padding: 0 12px;

        padding-top: 130px;

    }

    .hm-paper-body {

        padding: 130px 20px 22px;

        min-height: auto;

    }

    .hm-paper-body h3 {

        font-size: 22px;

        line-height: 1.45;

    }

    .hm-paper-btn {

        width: 48px;

        height: 48px;

        font-size: 16px;

    }

    .hm-paper-prev {

        left: 8px;

    }

    .hm-paper-next {

        right: 8px;

    }

    .hm-paper-all {

        width: 100%;

    }

}


/*=========================================
    Small Mobile
=========================================*/

@media (max-width:480px) {

    .hm-paper-header h2 {

        font-size: 30px;

    }

    .hm-paper-thumb {

        height: 200px;

    }

    .hm-paper-body {

        padding: 120px 18px 20px;

    }

    .hm-paper-body h3 {

        font-size: 20px;

    }

}




/*=========================================
    Latest Happenings & Media
==========================================*/

.hm-news-section {
    padding: 90px 0;
    background: var(--white-color);
    overflow: hidden;
}

.hm-news-section .container {
    max-width: 1320px;
    margin: auto;
    padding: 0 15px;
}


/*=========================================
    Grid
==========================================*/

.hm-news-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 60px;
    align-items: flex-start;
}

.hm-happenings,
.hm-media {
    min-width: 0;
}

/*=========================================
    Headings
==========================================*/

.hm-section-heading {
    margin-bottom: 28px;
}

.hm-section-heading h2 {
    position: relative;
    display: inline-block;
    font-size: 35px;
    font-weight: 500;
    color: var(--primary-color);
    margin: 0;
    padding-bottom: 14px;
    line-height: 1.2;
}

.hm-section-heading h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 80px;
    height: 3px;
    background: var(--primary-color);
}


/*=========================================
    Left Slider
==========================================*/

.hm-happenings {
    position: relative;
}

.hm-happenings-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.hm-happenings-track {
    display: flex;
    transition: transform .7s ease;
    will-change: transform;
}

.hm-happening-item {
    min-width: 100%;
    flex: 0 0 100%;
}


/*=========================================
    Right Media
==========================================*/

.hm-media {
    position: relative;
}


/*=========================================
    Navigation
==========================================*/

.hm-news-navigation {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 35px;
}

.hm-news-prev,
.hm-news-next {
    width: 56px;
    height: 56px;
    border: none;
    background: var(--secondary-color);
    color: var(--white-color);
    cursor: pointer;
    font-size: 20px;
    transition: .3s;
}

.hm-news-prev:hover,
.hm-news-next:hover {
    background: var(--primary-color);
}


/*=========================================
    Buttons
==========================================*/

.hm-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 170px;
    height: 52px;
    background: var(--secondary-color);
    color: var(--white-color);
    text-decoration: none;
    font-weight: 600;
    transition: .3s;
}

.hm-btn-primary:hover {
    background: var(--primary-color);
}

.hm-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 170px;
    height: 52px;
    border: 1px solid var(--secondary-color);
    color: var(--secondary-color);
    text-decoration: none;
    font-weight: 600;
    transition: .3s;
    background: var(--white-color);
}

.hm-btn-outline:hover {
    background: var(--primary-color);
    color: var(--white-color);
}

/*=========================================
    Latest Happenings Card
==========================================*/

.hm-happening-item {
    background: var(--white-color);
}


/*=========================
Image
=========================*/

.hm-happening-image {
    width: 100%;
    height: 350px;
    overflow: hidden;
    background: var(--white-color);
}

.hm-happening-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.hm-happening-item:hover .hm-happening-image img {
    transform: scale(1.05);
}


/*=========================
Content
=========================*/

.hm-happening-content {
    padding: 28px 0 0;
}

.hm-happening-content h3 {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--black-color);
    margin: 0 0 18px;
}

.hm-news-date {
    display: block;
    color: #777;
    font-size: 15px;
    margin-bottom: 20px;
}

.hm-happening-content p {
    font-size: 18px;
    color: #444;
    line-height: 1.8;
    margin: 0 0 30px;
}


/*=========================
Buttons
=========================*/

.hm-news-buttons {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}


/*=========================
Button Styling
=========================*/

.hm-btn-primary,
.hm-btn-outline {

    width: 190px;
    height: 56px;

    font-size: 17px;

    font-weight: 600;

    border-radius: 0;

}


/*=========================
Hover
=========================*/

.hm-btn-primary:hover {

    transform: translateY(-2px);

}

.hm-btn-outline:hover {

    transform: translateY(-2px);

}


/*=========================
Animation
=========================*/

.hm-happening-item {

    animation: hmFade .5s ease;

}

@keyframes hmFade {

    from {

        opacity: 0;

        transform: translateY(20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/*=========================
Responsive
=========================*/

@media(max-width:1200px) {

    .hm-happening-image {

        height: 420px;

    }

    .hm-happening-content h3 {

        font-size: 22px;

    }

}

@media(max-width:992px) {

    .hm-happening-image {

        height: 360px;

    }

    .hm-happening-content h3 {

        font-size: 22px;

    }

    .hm-happening-content p {

        font-size: 16px;

    }

}

@media(max-width:767px) {

    .hm-happening-image {

        height: 260px;

    }

    .hm-happening-content {

        padding-top: 20px;

    }

    .hm-happening-content h3 {

        font-size: 22px;

        line-height: 1.4;

    }

    .hm-news-buttons {

        flex-direction: column;

        gap: 12px;

    }

    .hm-btn-primary,
    .hm-btn-outline {

        width: 100%;

    }

}

/*=========================================
    In The Media
=========================================*/

.hm-media {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/*=========================
Media List
=========================*/

.hm-media-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid #ececec;
}


/*=========================
Media Item
=========================*/

.hm-media-item {

    display: flex;

    align-items: center;

    gap: 24px;

    padding: 28px 0;

    text-decoration: none;

    border-bottom: 1px solid #ececec;

    transition: .35s;

}

.hm-media-item:hover {

    transform: translateX(8px);

}


/*=========================
Logo
=========================*/

.hm-media-logo {

    width: 130px;

    min-width: 130px;

    height: 70px;

    display: flex;

    justify-content: center;

    align-items: center;

}

.hm-media-logo img {

    max-width: 100%;

    max-height: 55px;

    object-fit: contain;

    filter: grayscale(100%);

    transition: .35s;

}

.hm-media-item:hover .hm-media-logo img {

    filter: none;

}


/*=========================
Title
=========================*/

.hm-media-text {

    flex: 1;

    color: var(--black-color);

    font-size: 18px;

    font-weight: 500;

    line-height: 1.45;

    transition: .3s;

}

.hm-media-item:hover .hm-media-text {

    color: var(--primary-color);

}


/*=========================
Footer
=========================*/

.hm-media-footer {

    margin-top: 35px;

}

.hm-media-footer .hm-btn-outline {

    width: 100%;

    height: 58px;

    font-size: 18px;

}


/*=========================
Responsive
=========================*/

@media(max-width:1200px) {

    .hm-media-logo {

        width: 110px;

        min-width: 110px;

    }

    .hm-media-text {

        font-size: 20px;

    }

}

@media(max-width:991px) {

    .hm-news-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .hm-happenings-image {
        height: 340px;
    }

    .hm-news-navigation {
        justify-content: flex-start;
    }

    .hm-media {

        margin-top: 10px;

    }

}

@media(max-width:767px) {

    .hm-news-section {
        padding: 60px 0;
    }

    .hm-section-heading h2 {
        font-size: 30px;
    }

    .hm-happening-image {
        height: 220px;
    }

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

    .hm-happening-content p {
        font-size: 15px;
        line-height: 1.7;
    }

    .hm-news-buttons {
        flex-direction: column;
        gap: 12px;
    }

    .hm-btn-primary,
    .hm-btn-outline {
        width: 100%;
        min-width: 100%;
    }

    .hm-news-navigation {
        justify-content: flex-end;
        margin-top: 20px;
    }

    .hm-news-prev,
    .hm-news-next {
        width: 44px;
        height: 44px;
        font-size: 16px;
    }

    .hm-media-item {

        gap: 15px;

        padding: 20px 0;

        align-items: flex-start;

    }

    .hm-media-logo {

        width: 80px;

        min-width: 80px;

        height: 55px;

    }

    .hm-media-logo img {

        max-height: 40px;

    }

    .hm-media-text {

        font-size: 17px;

        line-height: 1.5;

    }

    .hm-media-footer .hm-btn-outline {

        width: 100%;

    }

}

.hm-happenings-slider {
    overflow: hidden;
}

.hm-happenings-track {
    display: flex;
    transition: transform .6s ease;
}

.hm-happening-item {
    flex: 0 0 100%;
    min-width: 100%;
}


/* events section */


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

.ssju-events {

    padding: 60px 0;

    background: #f8f3df;

}

.ssju-events .container {

    max-width: 1380px;

    margin: auto;

    width: 90%;

}

/* Heading */

.ssju-events-heading {

    margin-bottom: 45px;

}

.ssju-events-heading h2 {

    font-size: 35px;

    color: var(--primary-color);

    font-family: Georgia, serif;

    font-weight: 500;

    position: relative;

    display: inline-block;

    padding-bottom: 15px;

}

.ssju-events-heading h2::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 70px;

    height: 3px;

    background: var(--primary-color);

}

/* Grid */

.ssju-events-grid {

    display: grid;

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

    gap: 38px;

}

/* Card */

.ssju-event-card {

    transition: .35s;

}

.ssju-event-card:hover {

    transform: translateY(-8px);

}

/* Image */

.ssju-event-image {

    display: block;

    overflow: hidden;

}

.ssju-event-image img {

    width: 100%;

    height: 300px;

    object-fit: cover;

    display: block;

    transition: .45s;

}

.ssju-event-card:hover img {

    transform: scale(1.05);

}

/* Content */

.ssju-event-content {

    padding-top: 25px;

}

.ssju-event-content h3 {

    font-size: 18px;

    line-height: 1.4;

    margin-bottom: 18px;

    font-weight: 600;

}

.ssju-event-content h3 a {

    color: var(--black-color);

    text-decoration: none;

    transition: .3s;

}

.ssju-event-content h3 a:hover {

    color: var(--primary-color);

}

.ssju-event-date {

    color: #777;

    /* font-size:18px; */

}

/* Button */

.ssju-events-btn {

    text-align: center;

    margin-top: 60px;

}

.ssju-outline-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 200px;

    height: 55px;

    border: 2px solid var(--secondary-color);

    color: var(--secondary-color);

    font-size: 18px;

    /* font-family:Georgia,serif; */

    font-weight: 600;

    text-decoration: none;

    transition: .3s;

}

.ssju-outline-btn:hover {

    background: var(--secondary-color);

    color: var(--white-color);

}

/* Tablet */

@media(max-width:992px) {

    .ssju-events-grid {

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

    }

    .ssju-event-image img {

        height: 260px;

    }

}

/* Mobile */

@media(max-width:768px) {

    .ssju-events {

        padding: 70px 0;

    }

    .ssju-events-grid {

        grid-template-columns: 1fr;

    }

    .ssju-events-heading h2 {

        font-size: 38px;

    }

    .ssju-event-image img {

        height: 240px;

    }

    .ssju-event-content h3 {

        font-size: 18px;

    }

    .ssju-outline-btn {

        width: 100%;

        font-size: 18px;

    }

}


/* campus life  */

/*=====================================
Campus Life
=====================================*/

.ssju-campus-life {

    padding: 100px 0;

    background: var(--white-color);

}

.ssju-campus-life .container {

    width: 90%;

    max-width: 1400px;

    margin: auto;

}

/* Grid */

.ssju-campus-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    grid-template-rows: auto auto;

    gap: 30px;

    align-items: start;

}

/* Left */

.ssju-campus-content {

    padding-top: 20px;

}

.ssju-campus-content h2 {

    color: var(--primary-color);

    font-size: 35px;

    font-family: Georgia, serif;

    position: relative;

    display: inline-block;

    padding-bottom: 15px;

}

.ssju-campus-content h2::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 60px;

    height: 3px;

    background: var(--primary-color);

}

.ssju-campus-content h3 {

    font-size: 20px;

    color: var(--secondary-color);

    margin: 20px 0 30px;

    font-family: Georgia, serif;

    font-weight: 500;

}

.ssju-campus-btn {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    width: 180px;

    height: 50px;

    border: 2px solid var(--secondary-color);

    color: var(--secondary-color);

    font-size: 18px;

    font-weight: 600;

    text-decoration: none;

    transition: .3s;

}

.ssju-campus-btn:hover {

    background: var(--secondary-color);

    color: var(--white-color);

}

/* Cards */

.ssju-campus-card {

    position: relative;

    display: block;

    overflow: hidden;

}

.ssju-campus-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .5s;

}

.ssju-campus-card:hover img {

    transform: scale(1.08);

}

.card-large {

    height: 365px;

}

.card-bottom-left {

    margin-top: -80px;

    height: 365px;

}

.card-bottom-right {

    height: 365px;

}

/* Overlay */

.ssju-campus-overlay {

    position: absolute;

    left: 35px;

    bottom: 35px;

    color: var(--white-color);

}

.ssju-campus-overlay h4 {

    font-size: 20px;

    font-family: Georgia, serif;

    margin-bottom: 10px;

}

.ssju-campus-overlay span {

    font-size: 18px;

    font-weight: 600;

}

.ssju-campus-overlay i {

    margin-left: 8px;

}

/* Responsive */

@media(max-width:991px) {

    .ssju-campus-grid {

        grid-template-columns: 1fr;

    }

    .card-bottom-left {

        margin-top: 0;

    }

    .card-large,

    .card-bottom-left,

    .card-bottom-right {

        height: 330px;

    }

    .ssju-campus-content {

        text-align: center;

    }

    .ssju-campus-content h2::after {

        left: 50%;

        transform: translateX(-50%);

    }

}

@media(max-width:767px) {

    .ssju-campus-life {

        padding: 70px 0;

    }

    .ssju-campus-content h2 {

        font-size: 38px;

    }

    .ssju-campus-content h3 {

        font-size: 19px;

    }

    .card-large,

    .card-bottom-left,

    .card-bottom-right {

        height: 260px;

    }

    .ssju-campus-overlay {

        left: 20px;

        bottom: 20px;

    }

    .ssju-campus-overlay h4 {

        font-size: 20px;

    }

    .ssju-campus-overlay span {

        font-size: 18px;

    }

    .ssju-campus-btn {

        width: 100%;

    }

}

.ssju-campus-card {
    position: relative;
    display: block;
    overflow: hidden;
}

.ssju-campus-card::before {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(to top,
            rgba(0, 0, 0, .75) 0%,
            rgba(0, 0, 0, .45) 35%,
            rgba(0, 0, 0, .15) 65%,
            rgba(0, 0, 0, 0) 100%);

    z-index: 1;

    transition: .35s;

}

.ssju-campus-card:hover::before {

    background: linear-gradient(to top,
            rgba(0, 0, 0, .85) 0%,
            rgba(0, 0, 0, .55) 35%,
            rgba(0, 0, 0, .25) 70%,
            rgba(0, 0, 0, .05) 100%);

}

.ssju-campus-card img {

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

    transition: .5s;

}

.ssju-campus-card:hover img {

    transform: scale(1.08);

}

.ssju-campus-overlay {

    position: absolute;

    left: 35px;
    right: 35px;
    bottom: 30px;

    z-index: 2;

    color: var(--white-color);

}

.ssju-campus-overlay h4 {

    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 12px;

    color: var(--white-color);

    text-shadow: 0 2px 8px rgba(0, 0, 0, .6);

}

.ssju-campus-overlay span {

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

    color: var(--white-color);

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

    text-shadow: 0 2px 6px rgba(0, 0, 0, .6);

}

.ssju-campus-overlay i {

    transition: .3s;

}

.ssju-campus-card:hover .ssju-campus-overlay i {

    transform: translateX(6px);

}

/* podcast section  */

/*=========================================
PODCAST
=========================================*/

.ssju-podcast {

    padding: 60px 0;

    background: #f9f4df;

}

.ssju-podcast .container {

    width: 90%;

    max-width: 1450px;

    margin: auto;

}

/* Heading */

.ssju-section-title {

    margin-bottom: 45px;

}

.ssju-section-title h2 {

    font-size: 35px;

    font-weight: 500;

    color: var(--primary-color);

    font-family: Georgia, serif;

    display: inline-block;

    position: relative;

    padding-bottom: 15px;

}

.ssju-section-title h2::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 60px;

    height: 3px;

    background: var(--primary-color);

}

/* Grid */

.ssju-podcast-grid {

    display: grid;

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

    gap: 30px;

}

/* Card */

.ssju-podcast-card {

    transition: .35s;

}

.ssju-podcast-card:hover {

    transform: translateY(-8px);

}

/* Image */

.ssju-podcast-thumb {

    position: relative;

    display: block;

    overflow: hidden;

    border-radius: 8px;

}

.ssju-podcast-thumb img {

    width: 100%;

    height: 260px;

    object-fit: cover;

    display: block;

    transition: .5s;

}

.ssju-podcast-card:hover img {

    transform: scale(1.08);

}

/* Play Button */

.ssju-play {

    position: absolute;

    left: 50%;

    top: 50%;

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

    width: 78px;

    height: 55px;

    background: var(--primary-color);

    border-radius: 15px;

    display: flex;

    justify-content: center;

    align-items: center;

    color: var(--white-color);

    font-size: 28px;

    transition: .35s;

}

.ssju-podcast-card:hover .ssju-play {

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

}

/* Content */

.ssju-podcast-content {

    padding-top: 22px;

}

.ssju-podcast-content h3 {

    font-size: 18px;

    line-height: 1.4;

    margin-bottom: 18px;

}

.ssju-podcast-content h3 a {

    color: var(--black-color);

    text-decoration: none;

    transition: .3s;

}

.ssju-podcast-content h3 a:hover {

    color: var(--primary-color);

}

.ssju-podcast-content h5 {

    font-size: 18px;

    color: var(--black-color);

    margin-bottom: 12px;

    font-weight: 500;

}

.ssju-podcast-content p {

    color: #666;

    font-size: 16px;

    margin-bottom: 8px;

}

.ssju-podcast-content span {

    color: #777;

    font-size: 17px;

}

/* Button */

.ssju-podcast-btn {

    text-align: center;

    margin-top: 60px;

}

.ssju-podcast-btn a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 300px;

    height: 60px;

    border: 2px solid var(--secondary-color);

    color: var(--secondary-color);

    font-size: 19px;

    font-weight: 500;

    /* font-family:Georgia,serif; */

    text-decoration: none;

    transition: .35s;

}

.ssju-podcast-btn a:hover {

    background: var(--secondary-color);

    color: var(--white-color);

}

/* Tablet */

@media(max-width:1200px) {

    .ssju-podcast-grid {

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

    }

}

/* Mobile */

@media(max-width:768px) {

    .ssju-podcast {

        padding: 70px 0;

    }

    .ssju-section-title h2 {

        font-size: 38px;

    }

    .ssju-podcast-grid {

        grid-template-columns: 1fr;

    }

    .ssju-podcast-thumb img {

        height: 240px;

    }

    .ssju-podcast-btn a {

        width: 100%;

        font-size: 20px;

    }

}


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

.ssju-social {

    padding: 60px 0;

    background: var(--white-color);

}

.ssju-social .container {

    width: 90%;

    max-width: 1400px;

    margin: auto;

}

.ssju-social-top {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 30px;

    margin-bottom: 70px;

}

/* Heading */

.ssju-social-heading h2 {

    color: var(--primary-color);

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

    font-family: Georgia, serif;

    display: inline-block;

    position: relative;

    padding-bottom: 15px;

}

.ssju-social-heading h2::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 65px;

    height: 3px;

    background: var(--primary-color);

}

.ssju-social-heading h3 {

    font-size: 25px;

    color: var(--secondary-color);

    margin-top: 25px;

    font-family: Georgia, serif;

    font-weight: 500;

}

/* Icons */

.ssju-social-icons {

    display: flex;

    gap: 15px;

}

.ssju-social-icons a {

    width: 60px;

    height: 60px;

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

    display: flex;

    justify-content: center;

    align-items: center;

    color: var(--secondary-color);

    font-size: 20px;

    transition: .35s;

}

.ssju-social-icons a:hover {

    background: var(--secondary-color);

    color: var(--white-color);

}

/* Instagram Button */

.ssju-instagram-btn {

    text-align: center;

}

.ssju-instagram-btn a {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    justify-content: center;

    width: 300px;

    height: 60px;

    border: 2px solid var(--secondary-color);

    color: var(--secondary-color);

    font-size: 20px;

    font-weight: 500;

    text-decoration: none;

    transition: .35s;

}

.ssju-instagram-btn a:hover {

    background: var(--secondary-color);

    color: var(--white-color);

}

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

.ssju-bottom-cta {

    width: 100%;

}

.ssju-cta-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

}

.ssju-cta {

    padding: 40px 80px;

    min-height: 300px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}

.left {

    background: var(--primary-color);

    color: var(--white-color);

}

.right {

    background: var(--secondary-color);

    color: var(--white-color);

}

.ssju-cta img {

    width: 70px;

    margin-bottom: 30px;

}

.ssju-cta h2 {

    font-size: 22px;

    font-family: Georgia, serif;

    line-height: 1.3;

    margin-bottom: 40px;

}

.ssju-cta a {

    width: 180px;

    height: 55px;

    border: 2px solid var(--white-color);

    display: flex;

    justify-content: center;

    align-items: center;

    color: var(--white-color);

    font-size: 18px;

    font-weight: 500;

    text-decoration: none;

    transition: .35s;

}

.ssju-cta a:hover {

    background: var(--white-color);

    color: var(--secondary-color);

}

/*=====================================
Responsive
======================================*/

@media(max-width:991px) {

    .ssju-social-top {

        flex-direction: column;

    }

    .ssju-social-icons {

        margin-top: 25px;

    }

    .ssju-cta-grid {

        grid-template-columns: 1fr;

    }

    .ssju-cta {

        padding: 60px 40px;

    }

}

@media(max-width:767px) {

    .ssju-social {

        padding: 70px 0;

    }

    .ssju-social-heading h2 {

        font-size: 38px;

    }

    .ssju-social-heading h3 {

        font-size: 32px;

    }

    .ssju-social-icons {

        flex-wrap: wrap;

    }

    .ssju-social-icons a {

        width: 55px;

        height: 55px;

    }

    .ssju-instagram-btn a {

        width: 100%;

        font-size: 20px;

    }

    .ssju-cta {

        padding: 45px 25px;

        min-height: 240px;

    }

    .ssju-cta h2 {

        font-size: 20px;

    }

    .ssju-cta a {

        width: 100%;

        font-size: 18px;

    }

}

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

.hm-mobile-toggle {

    display: none;

    width: 46px;

    height: 46px;

    border: none;

    background: transparent;

    cursor: pointer;

    margin-left: auto;

    position: relative;

    z-index: 1000;

}

.hm-mobile-toggle span {

    display: block;

    width: 28px;

    height: 3px;

    background: var(--secondary-color);

    margin: 6px auto;

    border-radius: 50px;

    transition: .35s;

}


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

.hm-sidebar-overlay {

    position: fixed;

    inset: 0;

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

    opacity: 0;

    visibility: hidden;

    transition: .35s;

    z-index: 99998;

}

.hm-sidebar-overlay.active {

    opacity: 1;

    visibility: visible;

}


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

.hm-mobile-sidebar {

    position: fixed;

    top: 0;

    left: -450px;

    width: 340px;

    max-width: 90vw;

    height: 100vh;

    background: var(--secondary-color);

    transition: .35s;

    z-index: 99999;

    display: flex;

    flex-direction: column;

    overflow: hidden;

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

}

.hm-mobile-sidebar.active {

    left: 0;

}


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

.hm-sidebar-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 18px 20px;

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

    background: var(--secondary-color);

}

.hm-sidebar-logo img {

    max-width: 150px;

    display: block;

}

.hm-close-sidebar {

    width: 42px;

    height: 42px;

    border: none;

    border-radius: 50%;

    background: var(--white-color);

    color: var(--secondary-color);

    cursor: pointer;

    font-size: 18px;

    transition: .3s;

}

.hm-close-sidebar:hover {

    background: var(--primary-color);

}


/*==================================================
            BODY
==================================================*/

.hm-sidebar-body {

    flex: 1;

    overflow-y: auto;

    overflow-x: hidden;

    padding: 0;

}

.hm-sidebar-body::-webkit-scrollbar {

    width: 6px;

}

.hm-sidebar-body::-webkit-scrollbar-thumb {

    background: var(--secondary-color);

    border-radius: 20px;

}


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

.hm-mobile-nav {

    list-style: none;

    margin: 0;

    padding: 0;

}

.hm-mobile-nav>li {

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

}

.hm-mobile-nav>li>a {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 18px 22px;

    color: var(--white-color);

    text-decoration: none;

    font-size: 17px;

    font-weight: 500;

    transition: .3s;

}

.hm-mobile-nav>li>a:hover {

    background: var(--secondary-color);

}

.hm-mobile-nav>li>a i {

    font-size: 14px;

}


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

.hm-mobile-nav ul {

    display: none;

    list-style: none;

    margin: 0;

    padding: 0;

    background: var(--secondary-color);

}

.hm-mobile-nav ul li {

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

}

.hm-mobile-nav ul li a {

    display: block;

    padding: 15px 35px;

    color: var(--white-color);

    text-decoration: none;

    font-size: 15px;

    transition: .3s;

}

.hm-mobile-nav ul li a:hover {

    background: var(--secondary-color);

    padding-left: 42px;

}


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

.hm-mobile-nav li.active>a {

    background: var(--secondary-color);

}

.hm-mobile-nav li.active>a i {

    transform: rotate(135deg);

    transition: .35s;

}

.hm-mobile-nav li>a i {

    transition: .35s;

}


/*==================================================
        BODY LOCK
==================================================*/

body.hm-menu-open {

    overflow: hidden;

}


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

@media(max-width:1600px) {

    .desktop-menu {

        display: none;

    }
    /* .navbar-area{
        background-color: var(--secondary-color);
    } */

    .hm-mobile-toggle {

        display: block;

    }
    /* .hm-mobile-toggle span{
        background: var(--white-color);
    } */

    .navbar-inner {

        display: flex;

        align-items: center;

    }

}

@media(max-width:767px) {

    .hm-mobile-sidebar {

        width: 310px;

    }

    .hm-sidebar-logo img {

        max-width: 130px;

    }

    .hm-mobile-nav>li>a {

        font-size: 16px;

        padding: 16px 18px;

    }

    .hm-mobile-nav ul li a {

        font-size: 14px;

        padding: 14px 28px;

    }

}

@media(max-width:480px) {

    .hm-mobile-sidebar {

        width: 100%;

        max-width: 100%;

    }

}

/*=============================
      SECOND LEVEL MENU
==============================*/

.hm-mobile-nav ul ul {

    background: var(--secondary-color);

}

.hm-mobile-nav ul ul li a {

    padding: 14px 50px;

    font-size: 14px;

}

.hm-mobile-nav ul ul ul {

    background: var(--secondary-color);

}

.hm-mobile-nav ul ul ul li a {

    padding-left: 70px;

}



/* sidebar social icon  */

.ssju-social-fixed {
    position: fixed;
    right: 15px;
    /* background-color: var(--primary-color); */
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;

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

.ssju-social-fixed a {
    width: 48px;
    height: 48px;

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

    color: var(--white-color);
    text-decoration: none;

    border-radius: 50%;

    font-size: 20px;

    transition: .3s;
}

.ssju-social-fixed a:hover {
    transform: translateX(-6px) scale(1.08);
}

.facebook {
    background: #1877F2;
}

.instagram {
    background: #E4405F;
}

.linkedin {
    background: #0A66C2;
}

.youtube {
    background: #FF0000;
}

.twitter {
    background: var(--black-color);
}

@media (max-width:991px) {

    .ssju-social-fixed {
        right: 10px;
        gap: 8px;
    }

    .ssju-social-fixed a {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }

}

@media (max-width:576px) {

    .ssju-social-fixed {
        right: 8px;
        gap: 6px;
    }

    .ssju-social-fixed a {
        width: 36px;
        height: 36px;
        font-size: 15px;
    }

}


/* ===========================
   Campus Tour Hero Section
=========================== */

.ct-campus-hero {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    background: url("/assets/images/ssju/ssju3.jpg") center center/cover no-repeat;
}

.ct-campus-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.55),
            rgba(0, 0, 0, 0.60));
    z-index: 1;
}

.ct-campus-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 850px;
    margin: auto;
    color: var(--white-color);
}

.ct-campus-subtitle {
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #f5c542;
    margin-bottom: 15px;
}

.ct-campus-title {
    font-size: clamp(42px, 6vw, 50px);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 20px;
}

.ct-campus-description {
    font-size: 18px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.92);
    max-width: 700px;
    margin: 0 auto;
}

/* Responsive */

@media (max-width: 991px) {

    .ct-campus-hero {
        min-height: 60vh;
    }

    .ct-campus-title {
        font-size: 48px;
    }

    .ct-campus-description {
        font-size: 16px;
        padding: 0 15px;
    }
}

@media (max-width: 576px) {

    .ct-campus-hero {
        min-height: 50vh;
    }

    .ct-campus-title {
        font-size: 34px;
    }

    .ct-campus-subtitle {
        font-size: 13px;
        letter-spacing: 2px;
    }

    .ct-campus-description {
        font-size: 15px;
    }
}


.ct-registration-section {
    background: #f8f9fa;
}

.ct-registration-card {
    background: var(--white-color);
    padding: 50px;
    border-radius: 12px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, .08);
}

.ct-form-title {
    font-size: 38px;
    font-weight: 700;
    color: var(--primary-color);
}

.ct-registration-card .form-control,
.ct-registration-card .form-select {
    height: 55px;
    border-radius: 8px;
    border: 1px solid #d9d9d9;
}

.ct-registration-card .form-control:focus,
.ct-registration-card .form-select:focus {
    box-shadow: none;
    border-color: var(--secondary-color);
}

.ct-submit-btn {
    background: var(--secondary-color);
    color: var(--white-color);
    height: 55px;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    transition: .3s;
}

.ct-submit-btn:hover {
    background: var(--primary-color);
    color: var(--white-color);
}

@media(max-width:768px) {

    .ct-registration-card {
        padding: 30px 20px;
    }

    .ct-form-title {
        font-size: 28px;
    }

}


/*======================================
    Resources Section
=======================================*/

.res-documents-section {
    background: var(--white-color);
    padding: 80px 0;
}

.res-handbook-section {
    background: #fdf9e9;
    padding: 80px 0;
}

.res-section-heading {
    margin-bottom: 50px;
}

.res-section-heading h2 {
    font-size: 30px;
    font-weight: 600;
    color: var(--secondary-color);
    margin: 0;
    position: relative;
}

.res-section-heading h2::after {
    content: '';
    width: 80px;
    height: 4px;
    background: var(--primary-color);
    display: block;
    margin-top: 15px;
}

/* Card */

.res-doc-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    background: var(--white-color);

    border: 1px solid #cfd8e3;

    min-height: 110px;

    padding: 25px;

    text-decoration: none;

    color: var(--secondary-color);

    transition: .35s ease;

    position: relative;

    overflow: hidden;
}

.res-doc-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--secondary-color);
    transition: .4s;
    z-index: 0;
}

.res-doc-card:hover::before {
    width: 100%;
}

.res-doc-card span,
.res-doc-card i {
    position: relative;
    z-index: 2;
}

.res-doc-card span {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
    transition: .3s;
}

.res-doc-card i {
    font-size: 22px;
    transition: .35s;
}

.res-doc-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .12);
}

.res-doc-card:hover span,
.res-doc-card:hover i {
    color: var(--white-color);
}

.res-doc-card:hover i {
    transform: translateX(8px);
}

/* Responsive */

@media(max-width:991px) {

    .res-documents-section,
    .res-handbook-section {
        padding: 60px 0;
    }

    .res-section-heading h2 {
        font-size: 40px;
    }

    .res-doc-card {
        min-height: 100px;
    }

    .res-doc-card span {
        font-size: 19px;
    }

}

@media(max-width:767px) {

    .res-section-heading {
        text-align: center;
    }

    .res-section-heading h2::after {
        margin: 15px auto 0;
    }

}

@media(max-width:576px) {

    .res-documents-section,
    .res-handbook-section {
        padding: 50px 0;
    }

    .res-section-heading h2 {
        font-size: 32px;
    }

    .res-doc-card {
        min-height: auto;
        padding: 20px;
    }

    .res-doc-card span {
        font-size: 17px;
    }

    .res-doc-card i {
        font-size: 20px;
    }

}


/*==========================
Hero Section
==========================*/

.ssju-hero {
    width: 100%;
    overflow: hidden;
    background: var(--white-color);
    line-height: 0;
    /* removes bottom white gap */
}

#heroSlider,
#heroSlider .carousel-inner,
#heroSlider .carousel-item,
.hero-slide {
    width: 100%;
    height: auto !important;
}

.hero-slide {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--white-color);
}

.hero-slide img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

.hero-slide {
    width: 100%;
}

.hero-slide img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width:727px) {

    .hero-slide {
        height: 340px;
        overflow: hidden;
    }

    .hero-slide img {
        display: block;
        position: relative;
        left: 110px;
        height: 100%;
        width: 150%;
        max-width: none;

        /* Shift image left so the right side gets cropped */
        transform: translateX(0);
    }

}


@media (max-width:440px) {


    .hero-slide img {
        display: block;
        position: relative;
        left: 90px;
        height: 100%;
        width: 150%;
        max-width: none;

        /* Shift image left so the right side gets cropped */
        transform: translateX(0);
    }

}


.slider {
    overflow: hidden;
    width: 100%;
}

.track {
    display: flex;
    gap: 30px;
    transition: .5s ease;
}

.card {
    flex: 0 0 calc(33.333% - 20px);
}

.card img {
    width: 100%;
    display: block;
}

@media(max-width:767px) {

    .track {
        gap: 20px;
    }

    .card {
        flex: 0 0 100%;
    }

}

/* Alumni page hero section  */


.alm-main-card,
.alm-side-card {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.alm-main-card img {
    width: 100%;
    height: 500px;
    object-fit: cover;
}

.alm-side-card img {
    width: 100%;
    height: 500px;
    object-fit: cover;
}

.alm-overlay,
.alm-side-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    background: linear-gradient(to top, rgba(0, 0, 0, .75), rgba(0, 0, 0, .15));
    color: var(--white-color);
}

.alm-arrow {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #222;
}

@media(max-width:991px) {

    .alm-main-card img,
    .alm-side-card img {
        height: 420px;
    }

    .col-lg-4 {
        margin-top: 25px;
    }

}


/*====================================
    Alumni Statistics Section
=====================================*/

.alm-network-section {
    background: var(--secondary-color);
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

.alm-network-content {
    max-width: 1050px;
    margin: 0 auto 70px;
    text-align: center;
}

.alm-network-content h2 {
    color: var(--white-color);
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 25px;
}

.alm-network-content p {
    color: rgba(255, 255, 255, .95);
    font-size: 18px;
    line-height: 1.8;
    margin: 0;
}

/*====================================
    Statistics
=====================================*/

.alm-stat-box {
    text-align: center;
}

.alm-stat-number {
    color: var(--white-color);
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 12px;
}

.alm-stat-title {
    color: var(--white-color);
    font-size: 22px;
    margin-bottom: 30px;
    font-weight: 500;
}

/*====================================
    Buttons
=====================================*/

.alm-stat-btn {

    display: inline-block;

    padding: 14px 32px;

    color: var(--white-color);

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

    text-decoration: none;

    text-transform: uppercase;

    font-size: 15px;

    font-weight: 600;

    letter-spacing: .5px;

    transition: .35s ease;

}

.alm-stat-btn:hover {

    background: var(--white-color);

    color: var(--secondary-color);

    border-color: var(--white-color);

}

/*====================================
    Responsive
=====================================*/

@media(max-width:991px) {

    .alm-network-section {
        padding: 50px 0;
    }

    .alm-network-content h2 {
        font-size: 28px;
    }

    .alm-network-content p {
        font-size: 18px;
    }

    .alm-stat-box {
        margin-bottom: 40px;
    }

    .alm-stat-number {
        font-size: 30px;
    }

}

@media(max-width:767px) {

    .alm-network-section {
        padding: 40px 0;
    }

    .alm-network-content {
        margin-bottom: 45px;
    }

    .alm-network-content h2 {
        font-size: 25px;
    }

    .alm-network-content p {
        font-size: 16px;
        line-height: 1.8;
    }

    .alm-stat-number {
        font-size: 28px;
    }

    .alm-stat-title {
        font-size: 18px;
        margin-bottom: 20px;
    }

    .alm-stat-btn {
        width: 100%;
        max-width: 250px;
        padding: 12px 20px;
    }

}

/*==========================
Alumni Stories
==========================*/

.alm-news-section {
    padding: 90px 0;
}

.alm-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 45px;
}

.alm-section-header h2 {
    font-size: 35px;
    color: var(--secondary-color);
    font-weight: 700;
}

.alm-view-btn {
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    text-decoration: none;
    padding: 12px 30px;
    transition: .3s;
}

.alm-view-btn:hover {
    background: var(--primary-color);
    color: var(--white-color);
}

.alm-news-card {
    transition: .35s;
}

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

.alm-news-image {
    overflow: hidden;
}

.alm-news-image img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    transition: .4s;
}

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

.alm-news-content {
    padding-top: 20px;
}

.alm-news-date {
    font-size: 14px;
    color: #777;
}

.alm-news-content h3 {
    margin: 15px 0;
    font-size: 20px;
    line-height: 1.5;
    color: var(--secondary-color);
}

.alm-news-content a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

/*==========================
Alumni Community
==========================*/

.alm-community-section {
    padding: 90px 0;
    background: #faf8f6;
}

.alm-community-card {
    background: var(--white-color);
    transition: .35s;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .05);
}

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

.alm-community-card img {
    width: 100%;
    height: 230px;
    object-fit: cover;
}

.alm-community-content {
    padding: 25px;
}

.alm-community-content h3 {
    font-size: 20px;
    color: var(--secondary-color);
    margin-bottom: 20px;
}

.alm-community-content a {
    display: inline-block;
    padding: 10px 24px;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    text-decoration: none;
    transition: .3s;
}

.alm-community-content a:hover {
    background: var(--primary-color);
    color: var(--white-color);
}

/*==========================
Responsive
==========================*/

@media(max-width:991px) {

    .alm-section-header {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
    }

    .alm-section-header h2 {
        font-size: 34px;
    }

}

@media(max-width:767px) {

    .alm-news-section,
    .alm-community-section {
        padding: 60px 0;
    }

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

    .alm-news-image img,
    .alm-community-card img {
        height: 220px;
    }

}


/*=====================================
        Alumni Gallery
======================================*/

.alm-gallery-section {
    padding: 90px 0;
    background: var(--white-color);
}

.alm-gallery-header {

    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 45px;

}

.alm-gallery-header h2 {

    font-size: 35px;
    font-weight: 700;
    color: var(--secondary-color);
    margin: 0;

}

.alm-gallery-btn {

    color: var(--primary-color);
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    transition: .3s;

}

.alm-gallery-btn:hover {

    color: var(--secondary-color);

}

.alm-gallery-card {

    transition: .35s;
    cursor: pointer;

}

.alm-gallery-card:hover {

    transform: translateY(-8px);

}

.alm-gallery-image {

    overflow: hidden;
    border-radius: 10px;

}

.alm-gallery-image img {

    width: 100%;
    height: 280px;
    object-fit: cover;
    transition: .45s;

}

.alm-gallery-card:hover .alm-gallery-image img {

    transform: scale(1.08);

}

.alm-gallery-content {

    padding-top: 18px;
    text-align: center;

}

.alm-gallery-content h4 {

    font-size: 20px;
    font-weight: 600;
    color: var(--secondary-color);
    margin: 0;
    line-height: 1.5;

}

/*=========================
Responsive
==========================*/

@media(max-width:991px) {

    .alm-gallery-section {

        padding: 70px 0;

    }

    .alm-gallery-header h2 {

        font-size: 30px;

    }

    .alm-gallery-image img {

        height: 240px;

    }

}

@media(max-width:767px) {

    .alm-gallery-section {

        padding: 60px 0;

    }

    .alm-gallery-header {

        flex-direction: column;
        gap: 15px;
        align-items: flex-start;

    }

    .alm-gallery-header h2 {

        font-size: 25px;

    }

    .alm-gallery-image img {

        height: 230px;

    }

    .alm-gallery-content h4 {

        font-size: 18px;

    }

}


/*====================================
        University Updates
=====================================*/

.alm-update-section {
    padding: 90px 0;
    background: var(--white-color);
}

.alm-update-header {

    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 45px;

}

.alm-update-header h2 {

    font-size: 35px;
    font-weight: 700;
    color: var(--secondary-color);
    margin: 0;

}

.alm-update-btn {

    display: inline-block;
    padding: 12px 32px;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    transition: .35s;

}

.alm-update-btn:hover {

    background: var(--primary-color);
    color: var(--white-color);

}

/*=====================*/

.alm-update-card {

    transition: .35s;

}

.alm-update-card:hover {

    transform: translateY(-8px);

}

.alm-update-image {

    overflow: hidden;
    border-radius: 8px;

}

.alm-update-image img {

    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: .45s;

}

.alm-update-card:hover img {

    transform: scale(1.08);

}

.alm-update-content {

    padding-top: 18px;

}

.alm-update-date {

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

    color: #777;
    font-size: 14px;
    margin-bottom: 14px;

}

.alm-update-date i {

    color: var(--primary-color);

}

.alm-update-content h3 {

    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--secondary-color);
    margin-bottom: 18px;

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

}

.alm-update-content a {

    color: var(--primary-color);
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
    transition: .35s;

}

.alm-update-content a i {

    margin-left: 6px;
    transition: .35s;

}

.alm-update-content a:hover {

    color: var(--secondary-color);

}

.alm-update-content a:hover i {

    transform: translateX(6px);

}

/*=====================
Responsive
======================*/

@media(max-width:991px) {

    .alm-update-section {

        padding: 70px 0;

    }

    .alm-update-header h2 {

        font-size: 30px;

    }

    .alm-update-image img {

        height: 240px;

    }

}

@media(max-width:767px) {

    .alm-update-section {

        padding: 60px 0;

    }

    .alm-update-header {

        flex-direction: column;
        align-items: flex-start;
        gap: 20px;

    }

    .alm-update-header h2 {

        font-size: 28px;

    }

    .alm-update-image img {

        height: 220px;

    }

    .alm-update-content h3 {

        font-size: 20px;

    }

}

/*==========================
Alumni Videos
==========================*/

.alm-video-section {
    padding: 90px 0;
    background: var(--white-color);
}

.alm-video-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 45px;
}

.alm-video-header h2 {
    font-size: 35px;
    font-weight: 700;
    color: var(--secondary-color);
}

.alm-video-btn {
    color: var(--primary-color);
    text-decoration: none;
    border: 2px solid var(--primary-color);
    padding: 12px 28px;
    transition: .3s;
}

.alm-video-btn:hover {
    background: var(--primary-color);
    color: var(--white-color);
}

.alm-video-card {
    display: block;
    text-decoration: none;
}

.alm-video-image {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.alm-video-image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: .4s;
}

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

.alm-play-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 75px;
    height: 75px;
    background: #ff0000;
    color: var(--white-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
}

.alm-video-title {
    background: #111;
    color: var(--white-color);
    padding: 16px;
    font-size: 20px;
    font-weight: 600;
}

/*==========================
Yearbook
==========================*/

.alm-yearbook-section {
    padding: 60px 0;
    background: var(--white-color);
}

.alm-yearbook-content {

    background: var(--secondary-color);
    height: 100%;
    padding: 70px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.alm-yearbook-content h2 {

    color: var(--white-color);
    font-size: 42px;
    margin-bottom: 25px;
    line-height: 1.3;
}

.alm-yearbook-content p {

    color: var(--white-color);
    font-size: 20px;
    margin-bottom: 35px;
}

.alm-yearbook-btn {

    display: inline-block;
    width: fit-content;
    background: var(--white-color);
    color: var(--primary-color);
    padding: 14px 34px;
    text-decoration: none;
    font-weight: 600;
}

.alm-yearbook-img {

    width: 100%;
    height: 170px;
    object-fit: cover;
    transition: .4s;
}

.alm-yearbook-img:hover {

    transform: scale(1.05);

}

/*==========================
Responsive
==========================*/

@media(max-width:991px) {

    .alm-yearbook-content {
        padding: 50px 35px;
    }

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

    .alm-yearbook-content p {
        font-size: 18px;
    }

}

@media(max-width:767px) {

    .alm-video-section,
    .alm-yearbook-section {
        padding: 40px 0;
    }

    .alm-video-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .alm-video-header h2 {
        font-size: 30px;
    }

    .alm-yearbook-content {
        padding: 40px 25px;
    }

    .alm-yearbook-content h2 {
        font-size: 28px;
    }

    .alm-yearbook-img {
        height: 110px;
    }

}


/*==================================
        Work With Us Hero
===================================*/

.wrk-hero {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    background: url("../images/ssju/ssju3.jpg") center center/cover no-repeat;
    overflow: hidden;
}

.wrk-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            rgba(6, 40, 63, .88) 0%,
            rgba(6, 40, 63, .55) 55%,
            rgba(6, 40, 63, .25) 100%);
}

.wrk-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    color: var(--white-color);
}

.wrk-tag {

    display: inline-block;

    background: var(--secondary-color);

    color: var(--primary-color);

    padding: 10px 24px;

    border-radius: 40px;

    font-size: 15px;

    font-weight: 600;

    margin-bottom: 25px;

}

.wrk-content h1 {

    font-size: 35px;

    font-weight: 600;

    line-height: 1.2;

    margin-bottom: 25px;

}

.wrk-content p {

    font-size: 20px;

    line-height: 1.8;

    margin-bottom: 40px;

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

}

.wrk-btn-group {

    display: flex;

    gap: 20px;

    flex-wrap: wrap;

}

.wrk-btn-primary {

    display: inline-block;

    padding: 16px 38px;

    background: var(--secondary-color);

    color: var(--primary-color);

    text-decoration: none;

    font-weight: 600;

    transition: .35s;

}

.wrk-btn-primary:hover {

    background: var(--white-color);

    color: var(--primary-color);

}

.wrk-btn-outline {

    display: inline-block;

    padding: 16px 38px;

    border: 2px solid var(--white-color);

    color: var(--white-color);

    text-decoration: none;

    font-weight: 600;

    transition: .35s;

}

.wrk-btn-outline:hover {

    background: var(--white-color);

    color: var(--secondary-color);

}

/*=========================
Responsive
==========================*/

@media(max-width:991px) {

    .wrk-hero {

        min-height: 500px;

    }

    .wrk-content h1 {

        font-size: 30px;

    }

    .wrk-content p {

        font-size: 18px;

    }

}

@media(max-width:767px) {

    .wrk-hero {

        min-height: 400px;

        text-align: center;

        background-position: center;

    }

    .wrk-content {

        max-width: 100%;

    }

    .wrk-content h1 {

        font-size: 28px;

    }

    .wrk-content p {

        font-size: 16px;

        line-height: 1.7;

    }

    .wrk-btn-group {

        justify-content: center;

    }

    .wrk-btn-primary,
    .wrk-btn-outline {

        width: 100%;
        max-width: 260px;
        text-align: center;

    }

}


/*==========================
Introduction
==========================*/

.wrk-intro-section {

    padding: 60px 0;

}

.wrk-intro-left h2 {

    font-size: 20px;

    line-height: 1.5;

    color: var(--primary-color);

    font-weight: 600;

}

.wrk-intro-right {

    padding-left: 40px;

}

.wrk-intro-right p {

    font-size: 18px;

    /* line-height:1.9; */

    color: #555;

}


/*==========================
Mission
==========================*/

.wrk-mission-box {

    background: #f7f4f1;

    padding: 60px 90px;

    height: 100%;

}

.wrk-vision-box {

    background: var(--secondary-color);

    padding: 60px 90px;

    height: 100%;

}

.wrk-mission-box h2,
.wrk-vision-box h2 {

    font-size: 35px;

    margin-bottom: 30px;

}

.wrk-mission-box h2 {

    color: var(--secondary-color);

}

.wrk-vision-box h2 {

    color: var(--white-color);

}

.wrk-mission-box p {

    color: #555;

    font-size: 20px;

    line-height: 1.9;

}

.wrk-vision-box p {

    color: var(--white-color);

    font-size: 20px;

    line-height: 1.9;

}


/*==========================
Video
==========================*/

.wrk-video-section {

    padding: 60px 0;

}

.wrk-video {

    position: relative;

    overflow: hidden;

    max-height: 400px;

    border-radius: 10px;

}

.wrk-video img {

    width: 100%;

    display: block;

}

.wrk-play-btn {

    position: absolute;

    left: 50%;

    top: 50%;

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

    width: 90px;

    height: 90px;

    background: var(--white-color);

    color: var(--secondary-color);

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 34px;

    text-decoration: none;

    transition: .35s;

}

.wrk-play-btn:hover {

    background: var(--secondary-color);

    color: var(--white-color);

}


/*==========================
Responsive
==========================*/

@media(max-width:991px) {

    .wrk-intro-section,
    .wrk-video-section {

        padding: 70px 0;

    }

    .wrk-intro-right {

        padding-left: 0;
        padding-top: 30px;

    }

    .wrk-mission-box,
    .wrk-vision-box {

        padding: 40px 40px;

    }

}

@media(max-width:767px) {

    .wrk-intro-left h2 {

        font-size: 18px;

    }

    .wrk-intro-right p,
    .wrk-mission-box p,
    .wrk-vision-box p {

        font-size: 17px;

    }

    .wrk-mission-box,
    .wrk-vision-box {

        padding: 35px 25px;

    }

    .wrk-play-btn {

        width: 70px;
        height: 70px;
        font-size: 24px;

    }

}


/*==================================
        Our Promise
===================================*/

.wrk-promise-section {

    padding: 90px 0;
    background: var(--white-color);

}

.wrk-section-title {

    text-align: center;
    margin-bottom: 60px;

}

.wrk-section-title h2 {

    font-size: 35px;
    font-weight: 700;
    color: var(--secondary-color);
    margin: 0;

}

/*==============================*/

.wrk-promise-card {

    position: relative;
    height: 400px;
    overflow: hidden;
    border-radius: 25px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .15);

}

.wrk-promise-card img {

    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .5s;

}

.wrk-promise-overlay {

    position: absolute;
    inset: 0;

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

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

    text-align: center;

    padding: 40px;

    color: var(--white-color);

    transition: .4s;

}

.wrk-promise-overlay h3 {

    font-size: 30px;
    font-weight: 600;
    margin-bottom: 20px;

}

.wrk-promise-overlay p {

    font-size: 20px;
    line-height: 1.8;
    max-width: 420px;

    opacity: 0;

    transform: translateY(25px);

    transition: .4s;

}

.wrk-promise-card:hover img {

    transform: scale(1.08);

}

.wrk-promise-card:hover .wrk-promise-overlay {

    background: rgba(6, 40, 63, .72);

}

.wrk-promise-card:hover .wrk-promise-overlay p {

    opacity: 1;

    transform: translateY(0);

}

/*==============================
Responsive
===============================*/

@media(max-width:991px) {

    .wrk-section-title h2 {

        font-size: 30px;

    }

    .wrk-promise-card {

        height: 360px;

    }

    .wrk-promise-overlay h3 {

        font-size: 28px;

    }

}

@media(max-width:767px) {

    .wrk-promise-section {

        padding: 60px 0;

    }

    .wrk-section-title {

        margin-bottom: 40px;

    }

    .wrk-section-title h2 {

        font-size: 28px;

    }

    .wrk-promise-card {

        height: 300px;

    }

    .wrk-promise-overlay {

        padding: 25px;

    }

    .wrk-promise-overlay h3 {

        font-size: 24px;

    }

    .wrk-promise-overlay p {

        font-size: 16px;

        opacity: 1;

        transform: none;

    }

}


/*=================================
        Our Values
==================================*/

.wrk-values-section {

    position: relative;

    padding: 60px 0;

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

    overflow: hidden;

}

.wrk-values-overlay {

    position: absolute;

    inset: 0;

    background: var(--secondary-color);

}

.wrk-values-section .container {

    position: relative;

    z-index: 2;

}

/*========================*/

.wrk-values-heading {

    text-align: center;

    max-width: 900px;

    margin: 0 auto 60px;

}

.wrk-values-heading h2 {

    color: var(--white-color);

    font-size: 35px;

    font-weight: 600;

    margin-bottom: 20px;

}

.wrk-values-heading p {

    color: var(--white-color);

    font-size: 18px;

    line-height: 1.8;

}

/*========================*/

.wrk-value-card {

    background: var(--white-color);

    border-radius: 24px;

    padding: 20px 15px;

    text-align: center;

    height: 100%;

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

    transition: .35s;

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

}

.wrk-value-card:hover {

    transform: translateY(-12px);

}

.wrk-value-icon {

    width: 90px;

    height: 90px;

    margin: 0 auto 10px;

    border-radius: 50%;

    background: #f8f8f8;

    display: flex;

    align-items: center;

    justify-content: center;

}

.wrk-value-icon i {

    font-size: 35px;

    color: var(--secondary-color);

}

.wrk-value-card h3 {

    font-size: 25px;

    color: var(--secondary-color);

    margin-bottom: 15px;

    line-height: 1.3;

    font-weight: 600;

}

.wrk-value-card p {

    color: #555;

    font-size: 17px;

    line-height: 1.4;

    margin: 0;

}

/*========================*/

@media(max-width:1199px) {

    .wrk-value-card h3 {

        font-size: 22px;

    }

}

@media(max-width:991px) {

    .wrk-values-section {

        padding: 80px 0;

    }

    .wrk-values-heading h2 {

        font-size: 44px;

    }

    .wrk-values-heading p {

        font-size: 18px;

    }

}

@media(max-width:767px) {

    .wrk-values-section {

        padding: 60px 0;

    }

    .wrk-values-heading {

        margin-bottom: 40px;

    }

    .wrk-values-heading h2 {

        font-size: 34px;

    }

    .wrk-values-heading p {

        font-size: 16px;

    }

    .wrk-value-card {

        padding: 25px 18px;

    }

    .wrk-value-icon {

        width: 70px;
        height: 70px;

    }

    .wrk-value-icon i {

        font-size: 30px;

    }

    .wrk-value-card h3 {

        font-size: 20px;

    }

    .wrk-value-card p {

        font-size: 15px;

    }

}


/*=============================
Why SSJU
==============================*/

.wrk-why-section {

    padding: 60px 0;

}

.wrk-section-title {

    text-align: center;
    margin-bottom: 50px;

}

.wrk-section-title h2 {

    font-size: 40px;
    font-weight: 600;
    color:  var(--secondary-color);

}

/*==============================*/

.wrk-why-card {

    position: relative;
    height: 400px;
    overflow: hidden;
    cursor: pointer;

}

.wrk-why-card img {

    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .6s;

}

/*==============================*/

.wrk-why-overlay {

    position: absolute;
    inset: 0;

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

    transition: .45s;

}

/*==============================*/

.wrk-why-content {

    position: absolute;

    left: 50px;

    right: 50px;

    bottom: 40px;

    color: var(--white-color);

}

.wrk-why-content h3 {

    font-size: 30px;

    font-weight: 600;

    margin-bottom: 0;

    transition: .4s;

}

/* Hidden by default */

.wrk-why-content p,

.wrk-why-content a {

    opacity: 0;

    visibility: hidden;

    transform: translateY(20px);

    transition: .4s;

}

.wrk-why-content p {

    font-size: 18px;

    line-height: 1.7;

    margin: 25px 0;

}

.wrk-why-content a {

    color: var(--primary-color);

    font-size: 19px;

    font-weight: 700;

    text-decoration: none;

}

/*==============================*/

.wrk-why-card:hover img {

    transform: scale(1.08);

}

.wrk-why-card:hover .wrk-why-overlay {

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

}

.wrk-why-card:hover .wrk-why-content h3 {

    margin-bottom: 25px;

}

.wrk-why-card:hover .wrk-why-content p,

.wrk-why-card:hover .wrk-why-content a {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}

/*==============================
Responsive
==============================*/

@media(max-width:991px) {

    .wrk-why-card {

        height: 450px;

    }

    .wrk-why-content {

        left: 30px;
        right: 30px;
        bottom: 30px;

    }

    .wrk-why-content h3 {

        font-size: 34px;

    }

    .wrk-why-content p {

        font-size: 18px;

        opacity: 1;
        visibility: visible;
        transform: none;

    }

    .wrk-why-content a {

        opacity: 1;
        visibility: visible;
        transform: none;

        font-size: 18px;

    }

}

@media(max-width:767px) {

    .wrk-section-title h2 {

        font-size: 36px;

    }

    .wrk-why-card {

        height: 320px;

    }

    .wrk-why-content h3 {

        font-size: 26px;

    }

    .wrk-why-content p {

        font-size: 15px;

        margin: 15px 0;

    }

    .wrk-why-content a {

        font-size: 16px;

    }

}


/* undergraduate section  */


.ug-hero{

    position:relative;
    height:500px;

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

    display:flex;
    align-items:center;

}

.ug-overlay{

    position:absolute;
    inset:0;
    background:rgba(6,40,63,.70);

}

.ug-content{

    position:relative;
    z-index:2;

    max-width:700px;
    color:var(--white-color);

}

.ug-content span{

    display:inline-block;

    background: var(--primary-color);

    color: var(--secondary-color);

    padding:8px 20px;

    margin-bottom:20px;

    font-weight:600;

}

.ug-content h1{

    font-size:40px;

    margin-bottom:20px;

}

.ug-content p{

    font-size:18px;

    line-height:1.8;

}

.ug-btn{

    display:inline-block;

    margin-top:35px;

    background: var(--primary-color);

    color: var(--secondary-color);

    padding:15px 40px;

    text-decoration:none;

    font-weight:600;

}


/*=================================
Undergraduate Content
==================================*/

.ug-content-section{

    padding:60px 0 10px;

    background:var(--white-color);

}

.ug-block{

    margin-bottom:80px;

}

.ug-block:last-child{

    margin-bottom:0;

}

.ug-block h2{

    font-size:30px;

    font-weight:600;

    color: var(--secondary-color);

    margin-bottom:30px;

    font-family:Georgia, serif;

}

.ug-block p{

    font-size:18px;

    line-height:1.6;

    color:#333;

    margin-bottom:28px;

    text-align:justify;

}

/*=========================
Responsive
==========================*/

@media(max-width:991px){

    .ug-content-section{

        padding:70px 0;

    }

    .ug-block{

        margin-bottom:60px;

    }

    .ug-block h2{

        font-size:28px;

    }

    .ug-block p{

        font-size:18px;

        line-height:1.9;

    }

}

@media(max-width:767px){

    .ug-content-section{

        padding:50px 0;

    }

    .ug-block h2{

        font-size:25px;

        margin-bottom:20px;

    }

    .ug-block p{

        font-size:16px;

        line-height:1.8;

        text-align:left;

    }

}


/*=====================================
Accordion Section
======================================*/

.ug-accordion-section{

    padding:60px 0;
    background:var(--white-color);

}

.ug-accordion .accordion-item{

    border:none;
    margin-bottom:16px;

}

/*=====================================
Header
======================================*/

.ug-accordion .accordion-button{

    background:var(--secondary-color);

    color:var(--white-color);

    /* padding:24px 35px; */

    font-size:20px;

    /* font-weight:600; */

    display:flex;

    align-items:center;

    justify-content:space-between;

    border-radius:0;

    box-shadow:none;

}

.ug-accordion .accordion-button:hover{

    background:var(--primary-color);

}

.ug-accordion .accordion-button:not(.collapsed){

    background:var(--primary-color);

}

.ug-accordion .accordion-button:focus{

    box-shadow:none;

}

/* Remove Bootstrap Arrow */

.ug-accordion .accordion-button::after{

    display:none;

}

/* Left Title */

.ug-acc-title{

    flex:1;

    text-align:left;

}
.ug-acc-title2{

    flex:1;

    text-align:right;

    font-size: 30px;

}

/* Right Icon */

.ug-accordion .accordion-button::before{

    content:"";

    margin-left:auto;

    font-size:35px;

    color:var(--white-color);

    line-height:1;

    font-weight:300;

    transition:.3s;

}

/* .ug-accordion .accordion-button:not(.collapsed)::before{

    content:"−";

} */

/*=====================================
Body
======================================*/

.ug-accordion .accordion-body{

    background:var(--white-color);

    padding:55px;

}

/*=====================================
Content
======================================*/

.ug-detail-content h3{

    color:var(--secondary-color);

    font-size:34px;

    margin-bottom:25px;

}

.ug-detail-content p{

    font-size:18px;

    line-height:1.6;

    color:#444;

    margin-bottom:30px;

}

.ug-detail-btn{

    display:inline-block;

    padding:10px 30px;

    border:2px solid var(--secondary-color);

    color:var(--secondary-color);

    text-decoration:none;

    font-size:20px;

    font-weight:600;

    transition:.35s;

}

.ug-detail-btn:hover{

    background:var(--secondary-color);

    color:var(--white-color);

}

/*=====================================
Image
======================================*/

.ug-detail-image img{

    width:100%;

    height:300px;

    object-fit:cover;

    display:block;

}

/*=====================================
Responsive
======================================*/

@media(max-width:991px){

    .ug-accordion .accordion-button{

        font-size:22px;

        padding:20px 25px;

    }

    .ug-accordion .accordion-button::before{

        font-size:30px;

    }

    .ug-accordion .accordion-body{

        padding:35px;

    }

    .ug-detail-content h3{

        font-size:28px;

    }

    .ug-detail-content p{

        font-size:17px;

        line-height:1.8;

    }

}

@media(max-width:767px){

    .ug-accordion-section{

        padding:60px 0;

    }

    .ug-accordion .accordion-button{

        font-size:18px;

        padding:18px 20px;

    }

    .ug-accordion .accordion-button::before{

        font-size:28px;

    }

    .ug-accordion .accordion-body{

        padding:25px;

    }

    .ug-detail-content h3{

        font-size:24px;

    }

    .ug-detail-content p{

        font-size:16px;

    }

    .ug-detail-btn{

        width:100%;

        text-align:center;

    }

    .ug-detail-image img{

        height:240px;

        margin-top:25px;

    }

}



.department-section{
    background:var(--white-color);
    padding:80px 0;
}

.why-study-section{
    background:var(--white-color);
    padding:40px 0 0px;
    margin-top:60px;   /* creates separation */
}

.why-content{
    background: var(--secondary-color);
    color:var(--white-color);
    padding:80px 60px;
    height:100%;
}

@media(max-width:991px){
    .why-content{
        padding:50px 40px;
    }
}

.why-study-section img{
    width:100%;
    height:100%;
    max-height:500px;
    object-fit:cover;
}

.department-section{
    padding:90px 0;
    background:#f8f9fa;
}

.section-title .sub-title{
    color: var(--secondary-color);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
}

.section-title h2{
    font-size:35px;
    font-weight:600;
    margin:10px 0;
}

.section-title p{
    color:#666;
}

.hod-card{
    background:var(--white-color);
    border-radius:12px;
    overflow:hidden;
    transition:.35s;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    height:100%;
}

.hod-card:hover{
    transform:translateY(-10px);
    box-shadow:0 18px 40px rgba(0,0,0,.15);
}

.hod-img{
    overflow:hidden;
}

.hod-img img{
    width:100%;
    height:320px;
    object-fit:cover;
    transition:.4s;
}

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

.hod-content{
    padding:25px;
    text-align:center;
}

.hod-content h4{
    font-size:22px;
    margin-bottom:8px;
    font-weight:700;
}

.hod-content span{
    color: var(--secondary-color);
    font-weight:600;
    display:block;
    margin-bottom:12px;
}

.hod-content p{
    color:#666;
    margin-bottom:20px;
}

.hod-btn{
    display:inline-block;
    padding:10px 24px;
    border-radius:30px;
    background: var(--secondary-color);
    color:var(--white-color);
    text-decoration:none;
    transition:.3s;
}

.hod-btn:hover{
    background: var(--secondary-color);
    color:var(--white-color);
}

/* scholarship section  */


.scholarship-section{
    background:#f8f9fc;
    padding:60px 0;
}

.section-title{
    max-width:900px;
    margin:auto;
    margin-bottom:60px;
}

.section-title span{
    color:var(--primary-color);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:2px;
}

.section-title h2{
    font-size:35px;
    color:var(--secondary-color);
    font-weight:600;
    margin:12px 0;
}

.section-title p{
    color:#666;
    line-height:30px;
}

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

.counter-card{
    background:var(--white-color);
    padding:35px;
    text-align:center;
    border-radius:15px;
    box-shadow:0 15px 40px rgba(0,0,0,.06);
    transition:.4s;
}

.counter-card:hover{
    transform:translateY(-10px);
}

.counter-card h3{
    color:var(--primary-color);
    font-size:42px;
    font-weight:700;
}

.counter-card p{
    margin:0;
    color:#666;
}

.scholarship-card{
    background:var(--white-color);
    padding:40px;
    border-radius:15px;
    height:100%;
    box-shadow:0 12px 40px rgba(0,0,0,.06);
    transition:.4s;
    border-top:5px solid var(--primary-color);
}

.scholarship-card:hover{
    transform:translateY(-10px);
}

.scholarship-card .icon{
    width:80px;
    height:80px;
    background:var(--secondary-color);
    color:var(--white-color);
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    font-size:32px;
    margin-bottom:25px;
}

.scholarship-card h4{
    color:var(--secondary-color);
    font-weight:700;
    margin-bottom:20px;
}

.scholarship-card p{
    color:#666;
}

.scholarship-card ul{
    padding-left:18px;
    margin:25px 0;
}

.scholarship-card ul li{
    margin-bottom:10px;
    color:#555;
}

.theme-btn{
    display:inline-block;
    padding:12px 30px;
    background:var(--primary-color);
    color:var(--white-color);
    border-radius:40px;
    text-decoration:none;
    transition:.4s;
}

.theme-btn:hover{
    background:var(--secondary-color);
    color:var(--white-color);
}

.eligibility-box{
    margin-top:80px;
    background:var(--white-color);
    border-radius:20px;
    padding:60px;
    box-shadow:0 15px 40px rgba(0,0,0,.06);
}

.eligibility-box h3{
    color:var(--secondary-color);
    font-weight:700;
    margin-bottom:25px;
}

.eligibility-box ul{
    padding-left:20px;
}

.eligibility-box li{
    margin-bottom:18px;
    color:#555;
}

.process .step{
    display:flex;
    align-items:center;
    margin-bottom:22px;
    font-weight:600;
}

.process .step span{
    width:45px;
    height:45px;
    border-radius:50%;
    background:var(--primary-color);
    color:var(--white-color);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-right:18px;
}

/* Responsive */

@media(max-width:991px){

    .section-title h2{
        font-size:30px;
    }

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

    .eligibility-box{
        padding:40px;
    }

}

@media(max-width:767px){

    .section-title h2{
        font-size:30px;
    }

    .scholarship-counter{
        grid-template-columns:1fr;
    }

    .counter-card{
        padding:25px;
    }

    .scholarship-card{
        padding:30px;
    }

    .eligibility-box{
        padding:30px 20px;
    }

}

@media(max-width:575px){

    .section-title h2{
        font-size:26px;
        line-height:1.4;
    }

    .counter-card h3{
        font-size:34px;
    }

    .scholarship-card{
        text-align:center;
    }

    .scholarship-card .icon{
        margin:0 auto 25px;
    }

    .scholarship-card ul{
        text-align:left;
    }

}

.ssju-scholarship{
    background:#f8f9fc; 
    padding:60px 0;
}

.section-title span{
    color:var(--primary-color);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:2px;
}

.section-title h2{
    color:var(--secondary-color);
    font-size:35px;
    font-weight:500;
    margin:15px 0;
}

.section-title p{
    max-width:850px;
    margin:auto;
    color:#666;
    line-height:30px;
}

.scholarship-box{

    background:var(--white-color);

    border-left:6px solid var(--primary-color);

    padding:40px;

    margin-bottom:35px;

    border-radius:15px;

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

    transition:.35s;

}

.scholarship-box:hover{

    transform:translateY(-8px);

}

.scholarship-header{

    display:flex;

    align-items:center;

    gap:20px;

    margin-bottom:25px;

}

.scholarship-header .icon{

    width:75px;

    height:75px;

    background:var(--secondary-color);

    color:var(--white-color);

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    font-size:30px;

}

.scholarship-header .secondary{

    background:var(--secondary-color);

}

.scholarship-header .blue{

    background:var(--secondary-color);

}

.scholarship-header h3{

    color:var(--secondary-color);

    font-size:30px;

    font-weight:700;

    margin-bottom:5px;

}

.scholarship-header span{

    color:var(--primary-color);

    font-weight:600;

}

.scholarship-box p{

    color:#555;

    line-height:32px;

}

.scholarship-box h5{

    margin-top:25px;

    margin-bottom:15px;

    color:var(--secondary-color);

    font-weight:700;

}

.scholarship-box ul{

    padding-left:20px;

}

.scholarship-box li{

    margin-bottom:14px;

    color:#555;

    line-height:28px;

}

/* Responsive */

@media(max-width:991px){

.section-title h2{

font-size:30px;

}

.scholarship-box{

padding:30px;

}

}

@media(max-width:767px){

.scholarship-header{

flex-direction:column;

text-align:center;

}

.scholarship-header h3{

font-size:24px;

}

.section-title h2{

font-size:30px;

}

.scholarship-box{

padding:25px;

}

}

@media(max-width:575px){

.section-title h2{

font-size:26px;

}

.scholarship-box{

padding:20px;

}

.scholarship-header .icon{

width:60px;

height:60px;

font-size:24px;

}

.scholarship-header h3{

font-size:22px;

}

}


.financial-aid-section{
    background:#f8f9fc;
    padding: 0px 0 40px;
}

.aid-card{
    background:var(--white-color);
    border-radius:18px;
    padding:50px;
    box-shadow:0 12px 40px rgba(0,0,0,.08);
    margin-bottom:70px;
}

.section-heading span{
    color:var(--primary-color);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
}

.section-heading h2{
    color:var(--secondary-color);
    font-size:35px;
    font-weight:500;
    margin-top:10px;
    margin-bottom:15px;
}

.aid-card p{
    color:#555;
    line-height:32px;
}

.aid-note{
    display:flex;
    align-items:flex-start;
    gap:18px;
    background:var(--white-color)7ef;
    border-left:5px solid var(--primary-color);
    padding:20px;
    border-radius:12px;
    margin-top:30px;
}

.aid-note i{
    color:var(--primary-color);
    font-size:28px;
    margin-top:5px;
}

.aid-note p{
    margin-bottom:0;
    line-height:28px;
}

.eligibility-box{
    background:var(--secondary-color);
    color:var(--white-color);
    border-radius:15px;
    padding:35px;
}

.eligibility-box h4{
    color:var(--white-color);
    margin-bottom:20px;
}

.eligibility-box ul{
    padding-left:20px;
    margin:0;
}

.eligibility-box li{
    margin-bottom:15px;
}

.finance-card{
    background:var(--white-color);
    padding:35px;
    border-radius:15px;
    height:100%;
    box-shadow:0 10px 35px rgba(0,0,0,.07);
    transition:.35s;
    border-top:4px solid var(--primary-color);
}

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

.finance-icon{
    width:70px;
    height:70px;
    background:var(--primary-color);
    color:var(--white-color);
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    font-size:28px;
    margin-bottom:20px;
}

.finance-icon.secondary{
    background:var(--secondary-color);
}

.finance-icon.blue{
    background:var(--blue-color);
}

.finance-icon.pink{
    background:var(--tertiary-color);
}

.finance-card h4{
    color:var(--secondary-color);
    font-weight:700;
    margin-bottom:15px;
}

.finance-card p{
    color:#666;
    line-height:30px;
}

.read-more{
    color:var(--primary-color);
    font-weight:600;
    text-decoration:none;
}

.read-more i{
    margin-left:8px;
    transition:.3s;
}

.read-more:hover i{
    margin-left:14px;
}

@media(max-width:991px){

.aid-card{
padding:35px;
}

.section-heading h2{
font-size:32px;
}

}

@media(max-width:767px){

.aid-card{
padding:25px;
}

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

.aid-note{
flex-direction:column;
}

.eligibility-box{
margin-top:30px;
}

}

@media(max-width:575px){

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

.finance-card{
padding:25px;
}

.finance-icon{
width:60px;
height:60px;
font-size:22px;
}

}


.ssju-testimonial-banner{
    overflow:hidden;
}

/* Row */

.ssju-testimonial-banner .row{
    /* min-height:650px; */
}

/* Equal height columns */

.ssju-testimonial-banner .col-lg-6{
    display:flex;
}

/* Left */

.testimonial-content{

    width:100%;

    background:var(--secondary-color);

    color:var(--white-color);

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:80px;

}

/* Subtitle */

.testimonial-content .subtitle{

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

    font-size:14px;

    font-weight:600;

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:18px;

}

/* Heading */

.testimonial-content h2{

    color:var(--white-color);

    font-size:35px;

    font-weight:600;

    margin-bottom:30px;

    line-height:1.1;

}

/* Paragraph */

.testimonial-content p{

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

    font-size:18px;

    line-height:1.6;

    margin-bottom:45px;

}

/* Button */

.testimonial-btn{

    width:200px;

    height:60px;

    border:2px solid var(--white-color);

    color:var(--white-color);

    text-decoration:none;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    font-weight:600;

    transition:.35s;

}

.testimonial-btn:hover{

    background:var(--primary-color);

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

    color:var(--white-color);

}

/* Right */

.testimonial-image{

    width:100%;

    height:100%;

    max-height: 450px;

    overflow:hidden;

}

.testimonial-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:.5s;

}

.ssju-testimonial-banner:hover .testimonial-image img{

    transform:scale(1.05);

}


/********************
Responsive
********************/

@media (min-width:1400px){

.testimonial-content{

padding:50px;

}

.testimonial-content h2{

font-size:35px;

}

}

@media (max-width:1199px){

.testimonial-content{

padding:40px;

}

.testimonial-content h2{

font-size:32px;

}

.testimonial-content p{

font-size:18px;

}

}

@media (max-width:991px){

.ssju-testimonial-banner .row{

min-height:auto;

}

.testimonial-content{

padding:50px 35px;

}

.testimonial-content h2{

font-size:30px;

}

.testimonial-content p{

font-size:18px;

}

.testimonial-image{

height:auto;

}

}

@media (max-width:767px){

.testimonial-content{

padding:40px 25px;

text-align:center;

align-items:center;

}

.testimonial-content h2{

font-size:30px;

}

.testimonial-content p{

font-size:17px;

line-height:1.6;

}

.testimonial-btn{

width:190px;

height:55px;

}

.testimonial-image{

height:300px;

}

}

@media (max-width:575px){

.testimonial-content{

padding:35px 20px;

}

.testimonial-content .subtitle{

font-size:14px;

letter-spacing:2px;

}

.testimonial-content h2{

font-size:30px;

}

.testimonial-content p{

font-size:16px;

}

.testimonial-image{

height:250px;

}

}



.yif-overview{
    background:var(--white-color);
}

.yif-content{
    padding-right:40px;
}

.yif-subtitle{

    color:var(--primary-color);

    font-size:18px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:2px;

    display:inline-block;

    margin-bottom:18px;

}

.yif-content h2{

    color:var(--secondary-color);

    font-size:52px;

    font-weight:700;

    line-height:1.2;

    margin-bottom:30px;

}

.yif-content p{

    color:#555;

    font-size:19px;

    line-height:1.9;

    margin-bottom:25px;

}

.yif-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 40px;

    background:var(--primary-color);

    color:var(--white-color);

    text-decoration:none;

    font-weight:600;

    transition:.35s;

    margin-top:15px;

}

.yif-btn:hover{

    background:var(--secondary-color);

    color:var(--white-color);

}

.yif-slider{

    position:relative;

}

.yif-slider img{

    width:100%;

    height:520px;

    object-fit:cover;

    border-radius:6px;

}

.yif-slider .swiper-pagination{

    position:relative;

    margin-top:25px;

}

.yif-slider .swiper-pagination-bullet{

    width:14px;

    height:14px;

    background:#f0c6d2;

    opacity:1;

}

.yif-slider .swiper-pagination-bullet-active{

    background:var(--primary-color);

}

/******** Responsive ********/

@media(max-width:1199px){

.yif-content h2{

font-size:44px;

}

}

@media(max-width:991px){

.yif-content{

padding-right:0;

}

.yif-content h2{

font-size:38px;

}

.yif-slider img{

height:450px;

}

}

@media(max-width:767px){

.yif-content{

text-align:center;

}

.yif-content h2{

font-size:30px;

}

.yif-content p{

font-size:17px;

}

.yif-btn{

padding:14px 30px;

}

.yif-slider img{

height:320px;

}

}

@media(max-width:575px){

.yif-content h2{

font-size:26px;

line-height:1.35;

}

.yif-slider img{

height:260px;

}

}

/* about page section  */

.ap-about-section{
    background:var(--white-color);
    padding: 40px 0;
}

.ap-heading{
    margin-bottom:35px;
    border-bottom:3px solid var(--primary-color);
    padding-bottom:10px;
}

.ap-heading h2{
    font-size:35px;
    font-weight:600;
    color:var(--secondary-color);
    margin:0;
}

.ap-wrapper{

    display:grid;

    grid-template-columns:380px 1fr;

    gap:30px;

    align-items:start;

}

.ap-image img{

    width:100%;

    border-radius:10px;

    display:block;

}

.ap-content{

    border:1px solid #e7e7e7;

    background:var(--white-color);

}

.ap-content-header{

    background:var(--secondary-color);

    color:var(--white-color);

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 25px;

}

.ap-content-header h3{

    margin:0;

    font-size:30px;

    color:var(--white-color);

}

.ap-language{

    display:flex;

}

.ap-language button{

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

    background:transparent;

    color:var(--white-color);

    padding:10px 22px;

    cursor:pointer;

}

.ap-language button.active{

    background:var(--white-color);

    color:var(--secondary-color);

}

.ap-content-body{

    padding:30px;

}

.ap-content-body h4{

    font-size:30px;

    color:var(--secondary-color);

    margin-bottom:25px;

    font-weight:700;

}

.ap-content-body p{

    font-size:17px;

    line-height:1.5;

    color:#666;

    margin-bottom:22px;

}

.ap-bottom-content{

    margin-top:35px;

}

.ap-bottom-content p{

    font-size:17px;

    line-height:1.5;

    color:#666;

    margin-bottom:20px;

}

/********************
Responsive
********************/

@media(max-width:1199px){

.ap-wrapper{

grid-template-columns:320px 1fr;

}

.ap-heading h2{

font-size:35px;

}

.ap-content-body h4{

font-size:28px;

}

}

@media(max-width:991px){

.ap-wrapper{

grid-template-columns:1fr;

}

.ap-image{

max-width:450px;

margin:auto;

}

.ap-content-header{

flex-wrap:wrap;

gap:15px;

}

}

@media(max-width:767px){

.ap-heading{

text-align:center;

}

.ap-heading h2{

font-size:30px;

}

.ap-content-header{

padding:18px;

}

.ap-content-header h3{

font-size:28px;

}

.ap-content-body{

padding:25px;

}

.ap-content-body h4{

font-size:24px;

}

.ap-content-body p,

.ap-bottom-content p{

font-size:17px;

}

.ap-language{

width:100%;

}

.ap-language button{

flex:1;

}

}

@media(max-width:575px){

.ap-heading h2{

font-size:28px;

}

.ap-content-body{

padding:20px;

}

.ap-content-body h4{

font-size:22px;

}

.ap-content-body p,

.ap-bottom-content p{

font-size:16px;

line-height:1.8;

}

}



.mv-block{

margin-bottom:50px;

}

.mv-block h2{

font-size:35px;

font-weight:600;

color:var(--secondary-color);

margin-bottom:20px;

}

.mv-block p{

font-size:17px;

line-height:1.9;

color:#666;

max-width:1200px;

}


/*====================================================
LEADERSHIP SECTION
====================================================*/

.leadership-section{
    padding:100px 0;
    background:var(--white-color);
}


/*====================================================
TABS
====================================================*/

.ldr-tabs{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:18px;
}

.ldr-tabs .nav-item{
    flex:1;
    min-width:220px;
}

.ldr-tabs .nav-link{

    width:100%;

    background:var(--secondary-color);

    color:var(--white-color);

    border:none;

    border-radius:0;

    padding:18px;

    font-size:20px;

    font-weight:600;

    transition:.35s;

}

.ldr-tabs .nav-link.active{

    background:var(--primary-color);

    color:var(--white-color);

}

.ldr-tabs .nav-link:hover{

    background:var(--primary-color);

}

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

.ldr-card{

    position:relative;

    overflow:hidden;

    background:var(--white-color);

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

    transition:.35s;

    height:100%;

}

.ldr-card:hover{

    transform:translateY(-8px);

}

.ldr-card img{

    width:100%;

    height:380px;

    object-fit:cover;

    display:block;

}

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

.ldr-bottom{

    background:var(--secondary-color);

    padding:20px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.ldr-bottom h4{

    color:var(--white-color);

    font-size:24px;

    margin:0 0 5px;

    font-weight:700;

}

.ldr-bottom span{

    color:#ddd;

    font-size:15px;

}

/*====================================================
PLUS
====================================================*/

.ldr-plus{

    width:48px;

    height:48px;

    border-radius:50%;

    border:2px solid var(--white-color);

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--white-color);

    font-size:18px;

    flex-shrink:0;

    transition:.35s;

}

.ldr-card:hover .ldr-plus{

    background:var(--primary-color);

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

}

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

.ldr-overlay{

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:100%;

    background:rgba(8,32,65,.95);

    color:var(--white-color);

    padding:35px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    transform:translateY(100%);

    transition:.45s;

}

.ldr-card:hover .ldr-overlay{

    transform:translateY(0);

}

.ldr-overlay h4{

    color:var(--white-color);

    font-size:30px;

    margin-bottom:10px;

}

.ldr-overlay h6{

    color:var(--primary-color);

    font-size:18px;

    margin-bottom:20px;

    font-weight:600;

}

.ldr-overlay p{

    color:#eee;

    font-size:16px;

    line-height:1.8;

    margin:0;

}

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

.tab-pane{

    animation:fadeEffect .45s;

}

@keyframes fadeEffect{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media (max-width:1399px){

.ldr-card img{

height:340px;

}

}

@media (max-width:1199px){

.mv-block h2{

font-size:30px;

}

.ldr-tabs .nav-item{

min-width:180px;

}

.ldr-tabs .nav-link{

font-size:18px;

}

.ldr-card img{

height:320px;

}

.ldr-bottom h4{

font-size:20px;

}

}

@media (max-width:991px){

.leadership-section{

padding:80px 0;

}

.mv-block h2{

font-size:30px;

}

.mv-block p{

font-size:16px;

}

.ldr-tabs{

gap:12px;

}

.ldr-tabs .nav-item{

flex:0 0 calc(50% - 6px);

}

.ldr-card img{

height:340px;

}

}

@media (max-width:767px){

.mv-block{

margin-bottom:40px;

}

.mv-block h2{

font-size:28px;

text-align:center;

}

.mv-block p{

text-align:center;

}

.ldr-tabs{

display:grid;

grid-template-columns:1fr;

gap:10px;

}

.ldr-tabs .nav-item{

width:100%;

}

.ldr-tabs .nav-link{

font-size:17px;

padding:15px;

}

.ldr-card img{

height:300px;

}

.ldr-bottom{

padding:16px;

}

.ldr-bottom h4{

font-size:18px;

}

.ldr-bottom span{

font-size:13px;

}

.ldr-overlay{

padding:25px;

}

.ldr-overlay h4{

font-size:24px;

}

}

@media (max-width:575px){

.leadership-section{

padding:60px 0;

}

.mv-block h2{

font-size:26px;

}

.mv-block p{

font-size:16px;

line-height:1.8;

}

.ldr-card img{

height:260px;

}

.ldr-plus{

width:42px;

height:42px;

}

.ldr-overlay h4{

font-size:22px;

}

.ldr-overlay h6{

font-size:16px;

}

.ldr-overlay p{

font-size:15px;

}

}

/* Tabs */

.ldr-tabs{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:18px;
    margin-bottom:50px;
}

.ldr-tabs .nav-item{
    flex:0 0 auto;
}

.ldr-tabs .nav-link{

    min-width:260px;

    height:65px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:0;

    border:none;

    background:var(--secondary-color);

    color:var(--white-color);

    font-size:20px;

    font-weight:700;

    transition:.35s;

}

.ldr-tabs .nav-link.active{

    background:var(--primary-color);

    color:var(--white-color);

}

.ldr-tabs .nav-link:hover{

    background:var(--primary-color);

    color:var(--white-color);

}

@media(max-width:991px){

.ldr-tabs{

gap:15px;

}

.ldr-tabs .nav-link{

min-width:220px;

font-size:18px;

}

}

@media(max-width:767px){

.ldr-tabs{

display:grid;

grid-template-columns:1fr 1fr;

gap:12px;

}

.ldr-tabs .nav-item{

width:100%;

}

.ldr-tabs .nav-link{

width:100%;

min-width:100%;

height:58px;

font-size:16px;

}

}

@media(max-width:575px){

.ldr-tabs{

grid-template-columns:1fr;

}

}



/*=============================
Partnership Section
=============================*/

.pc-section{

    padding:60px 0;

    background:var(--white-color);

}

.pc-heading{

    margin-bottom:50px;

}

.pc-heading h2{

    font-size:35px;

    font-weight:600;

    color:var(--secondary-color);

    margin-bottom:25px;

}

.pc-heading p{

    font-size:18px;

    line-height:1.5;

    color:#555;

    margin-bottom:20px;

}

/*=============================
List
=============================*/

.pc-list{

    margin:0;

    padding-left:25px;

}

.pc-list li{

    margin-bottom:22px;

    color:var(--primary-color);

    font-size:16px;

}

.pc-list li::marker{

    color:var(--primary-color);

}

.pc-list a{

    color:#0B63CE;

    text-decoration:none;

    transition:.3s;

}

.pc-list a:hover{

    color:var(--primary-color);

    padding-left:6px;

}

/*=============================
Responsive
=============================*/

@media(max-width:991px){

.pc-section{

padding:80px 0;

}

.pc-heading h2{

font-size:32px;

}

.pc-heading p{

font-size:16px;

}

.pc-list{

margin-bottom:30px;

}

}

@media(max-width:767px){

.pc-heading h2{

font-size:30px;

}

.pc-heading p{

font-size:16px;

line-height:1.8;

}

.pc-list li{

font-size:16px;

margin-bottom:16px;

}

}

@media(max-width:575px){

.pc-section{

padding:60px 0;

}

.pc-heading h2{

font-size:28px;

}

}


/*======================
Leadership Team
=======================*/

.lt-section{

padding:60px 0;

background:var(--white-color);

}

.lt-heading{

margin-bottom:60px;

}

.lt-heading span{

display:inline-block;

color:var(--primary-color);

font-weight:600;

letter-spacing:2px;

text-transform:uppercase;

margin-bottom:10px;

}

.lt-heading h2{

font-size:35px;

font-weight:600;

color:var(--secondary-color);

margin-bottom:20px;

}

.lt-heading p{

font-size:18px;

line-height:1.8;

max-width:850px;

margin:auto;

color:#666;

}

/* Card */

.lt-card{

background:var(--white-color);

height:100%;

transition:.35s;

}

.lt-card:hover{

transform:translateY(-8px);

}

.lt-image{

overflow:hidden;

}

.lt-image img{

width:100%;

height:360px;

object-fit:cover;

transition:.5s;

display:block;

}

.lt-card:hover img{

transform:scale(1.05);

}

.lt-content{

padding:22px 12px 10px;

}

.lt-content h3{

font-size:25px;

font-weight:600;

color:var(--secondary-color);

margin-bottom:10px;

}

.lt-content h6{

font-size:20px;

color:var(--black-color);

margin-bottom:12px;

font-weight:600;

}

.lt-content p{

font-size:16px;

color:#333;

margin-bottom:10px;

}

.lt-content span{

display:block;

font-size:16px;

font-style:italic;

margin-bottom:18px;

font-weight:600;

color:#111;

}

.lt-content a{

display:inline-flex;

align-items:center;

gap:10px;

font-size:17px;

color:#222;

text-decoration:none;

transition:.3s;

word-break:break-all;

}

.lt-content a:hover{

color:var(--primary-color);

}

.lt-content i{

color:var(--primary-color);

font-size:18px;

}

/*======================
Responsive
=======================*/

@media(max-width:1200px){

.lt-image img{

height:330px;

}

.lt-content h3{

font-size:24px;

}

}

@media(max-width:991px){

.lt-section{

padding:80px 0;

}

.lt-heading h2{

font-size:35px;

}

.lt-image img{

height:340px;

}

}

@media(max-width:767px){

.lt-section{

padding:70px 0;

}

.lt-heading{

margin-bottom:40px;

}

.lt-heading h2{

font-size:30px;

}

.lt-heading p{

font-size:16px;

}

.lt-image img{

height:320px;

}

.lt-content{

padding:18px 10px;

}

.lt-content h3{

font-size:22px;

}

.lt-content h6{

font-size:18px;

}

.lt-content p,

.lt-content span,

.lt-content a{

font-size:15px;

}

}

@media(max-width:575px){

.lt-image img{

height:280px;

}

.lt-heading h2{

font-size:28px;

}

}


.fd-filter-section{

background:#f7f7f7;

padding:40px 0;

}

.fd-search{

display:flex;

border:1px solid #ddd;

background:var(--white-color);

height:62px;

}

.fd-search input{

flex:1;

border:none;

outline:none;

padding:0 20px;

font-size:18px;

}

.fd-search button{

width:70px;

border:none;

background:var(--secondary-color);

color:var(--white-color);

font-size:22px;

transition:.3s;

}

.fd-search button:hover{

background:var(--primary-color);

}

.fd-select{

height:62px;

border-radius:0;

font-size:18px;

border:1px solid #ddd;

padding-left:18px;

}

.fd-select:focus{

box-shadow:none;

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

}

@media(max-width:767px){

.fd-search{

height:55px;

}

.fd-select{

height:55px;

font-size:16px;

}

}


/* ombudsperson section  */

.omb-section{

padding:60px 0;

}

.omb-heading{

margin-bottom:35px;

}

.omb-heading h2{

font-size:35px;

font-weight:600;

color:var(--secondary-color);

margin-bottom:0;

}

.omb-content p{

font-size:17px;

line-height:1.5;

color:#555;

margin-bottom:25px;

}

.omb-card{

position:relative;

overflow:hidden;

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

background:var(--white-color);

}

.omb-image{

height:400px;

overflow:hidden;

}

.omb-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}

.omb-card:hover img{

transform:scale(1.08);

}

.omb-bottom{

background:var(--secondary-color);

padding:22px;

display:flex;

justify-content:space-between;

align-items:center;

}

.omb-bottom h4{

color:var(--white-color);

font-size:20px;

margin-bottom:6px;

font-weight:600;

}

.omb-bottom span{

color:#ddd;

font-size:16px;

}

.omb-plus{

width:48px;

height:48px;

border:2px solid var(--white-color);

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

color:var(--white-color);

text-decoration:none;

transition:.35s;

}

.omb-card:hover .omb-plus{

background:var(--primary-color);

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

color:var(--white-color);

}

.omb-overlay{

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

background:rgba(8,32,65,.95);

color:var(--white-color);

padding:35px;

display:flex;

flex-direction:column;

justify-content:center;

transform:translateY(100%);

transition:.45s;

}

.omb-card:hover .omb-overlay{

transform:translateY(0);

}

.omb-overlay h4{

font-size:25px;

margin-bottom:10px;

}

.omb-overlay h6{

color:var(--primary-color);

font-size:18px;

margin-bottom:20px;

}

.omb-overlay p{

font-size:16px;

line-height:1.5;

color:#f2f2f2;

margin:0;

}

.omb-form{

border-top:1px solid #ddd;

padding-top:50px;

}

.omb-form h2{

font-size:35px;

color:var(--secondary-color);

margin-bottom:20px;

font-weight:700;

}

.omb-form p{

font-size:16px;

line-height:1.5;

color:#666;

margin-bottom:30px;

}

.omb-btn{

display:inline-block;

padding:16px 20px;

background:var(--secondary-color);

color:var(--white-color);

text-decoration:none;

font-size:16px;

font-weight:600;

transition:.35s;

}

.omb-btn:hover{

background:var(--primary-color);

color:var(--white-color);

}


@media(max-width:991px){

.omb-heading h2{

font-size:30px;

}

.omb-image{

height:350px;

}

.omb-bottom h4{

font-size:19px;

}

.omb-form h2{

font-size:30px;

}

}

@media(max-width:767px){

.omb-section{

padding:50px 0;

}

.omb-heading h2{

font-size:28px;

}

.omb-content p{

font-size:16px;

}

.omb-image{

height:320px;

}

.omb-bottom{

padding:18px;

}

.omb-bottom h4{

font-size:18px;

}

.omb-bottom span{

font-size:14px;

}

.omb-overlay{

padding:25px;

}

.omb-overlay h4{

font-size:20px;

}

.omb-overlay h6{

font-size:17px;

}

.omb-overlay p{

font-size:16px;

}

.omb-form h2{

font-size:25px;

}

.omb-btn{

width:100%;

text-align:center;

}

}

.sac-section{

padding:60px 0 0px;

}

.sac-heading{

margin-bottom:50px;

}

.sac-heading h2{

font-size:30px;

color:var(--secondary-color);

font-weight:700;

margin-bottom:20px;

}

.sac-heading p{

font-size:16px;

line-height:1.6;

color:#666;

max-width:1000px;

}

.sac-left{

background:var(--secondary-color);

color:var(--white-color);

height:100%;

padding:70px 50px;

display:flex;

flex-direction:column;

justify-content:center;

}

.sac-left h3{

font-size:30px;

font-weight:600;

margin-bottom:25px;

}

.sac-left p{

font-size:18px;

line-height:1.6;

margin:0;

}

.sac-tag{

background:var(--primary-color);

color:var(--white-color);

padding:8px 18px;

font-size:15px;

font-weight:700;

}

.sac-chair{

background:var(--white-color);

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

text-align:center;

padding-bottom:25px;

height:100%;

}

.sac-chair img{

width:100%;

height:420px;

object-fit:cover;

margin-bottom:20px;

}

.sac-chair h4{

font-size:26px;

color:var(--secondary-color);

font-weight:700;

}

.sac-chair p{

color:#666;

margin:0;

}

.sac-member{

background:var(--white-color);

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

text-align:center;

padding-bottom:18px;

height:100%;

transition:.35s;

}

.sac-member:hover{

transform:translateY(-6px);

}

.sac-member img{

width:100%;

height:170px;

object-fit:cover;

margin-bottom:15px;

}

.sac-member h5{

font-size:19px;

color:var(--secondary-color);

margin-bottom:5px;

font-weight:700;

}

.sac-member span{

color:#666;

font-size:14px;

}

.sac-content{

font-size:16px;

line-height:1.6;

color:#555;

}

.sac-content h4{

margin:35px 0 20px;

color:var(--secondary-color);

font-size:30px;

font-weight:600;

}

.sac-content ul{

    list-style:none;

    padding:0;

    margin:25px 0 0;

}

.sac-content ul li{

    position:relative;

    padding-left:50px;

    margin-bottom:18px;

    font-size:16px;

    line-height:1.6;

    color:#444;

}

.sac-content ul li::before{

    content:"";

    position:absolute;

    left:15px;

    top:12px;

    width:8px;

    height:8px;

    background:var(--black-color);

    border-radius:50%;

}

@media(max-width:991px){

.sac-left{

padding:50px 35px;

}

.sac-left h3{

font-size:28px;

}

.sac-chair img{

height:350px;

}

}

@media(max-width:767px){

.sac-section{

padding:50px 0;

}

.sac-heading h2{

font-size:28px;

}

.sac-left{

text-align:center;

padding:40px 25px;

}

.sac-left h3{

font-size:25px;

}

.sac-left p{

font-size:16px;

}

.sac-chair img{

height:320px;

}

.sac-member img{

height:150px;

}

.sac-content{

font-size:17px;

}

.sac-content h4{

font-size:28px;

}

}


.coc-section{

padding:40px 0;

}

.coc-heading{

margin-bottom:30px;

}

.coc-heading h2{

font-size:30px;

font-weight:600;

color:var(--secondary-color);

}

.coc-title{

margin-bottom:25px;

}

.coc-title h4{

font-size:25px;

font-weight:600;

color:#222;

}

.coc-card{

position:relative;

overflow:hidden;

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

background:var(--white-color);

}

.coc-card img{

width:100%;

height:300px;

object-fit:cover;

transition:.5s;

display:block;

}

.coc-card:hover img{

transform:scale(1.08);

}

.coc-bottom{

background:var(--secondary-color);

padding:18px 20px;

display:flex;

justify-content:space-between;

align-items:center;

}

.coc-bottom h4{

margin:0;

font-size:20px;

font-weight:600;

color:var(--white-color);

}

.coc-plus{

width:44px;

height:44px;

border-radius:50%;

border:2px solid var(--white-color);

display:flex;

align-items:center;

justify-content:center;

color:var(--white-color);

transition:.35s;

}

.coc-card:hover .coc-plus{

background:var(--primary-color);

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

}

.coc-overlay{

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

padding:30px;

background:rgba(8,32,65,.95);

color:var(--white-color);

display:flex;

flex-direction:column;

justify-content:center;

transform:translateY(100%);

transition:.4s;

}

.coc-card:hover .coc-overlay{

transform:translateY(0);

}

.coc-overlay h4{

font-size:25px;

margin-bottom:8px;

}

.coc-overlay h6{

color:var(--primary-color);

margin-bottom:20px;

font-size:18px;

}

.coc-overlay p{

font-size:17px;

line-height:1.6;

margin:0;

}

@media(max-width:991px){

.coc-heading h2{

font-size:28px;

}

.coc-card img{

height:300px;

}

}

@media(max-width:767px){

.coc-section{

padding:70px 0;

}

.coc-heading h2{

font-size:25px;

}

.coc-title h4{

font-size:24px;

}

.coc-card img{

height:300px;

}

.coc-bottom h4{

font-size:18px;

}

.coc-overlay{

padding:25px;

}

.coc-overlay h4{

font-size:22px;

}

}

/* newsroom page section  */

.nr-section{
    background:var(--white-color);
    padding:40px 0;
}

/* .nr-box{

    border-top:6px solid #d7d7d7;

    padding-top:25px;

} */

.nr-title{

    font-size:30px;

    font-weight:600;

    color: var(--secondary-color);

    margin-bottom:30px;

    font-family:Georgia,serif;

}

.nr-item{

    padding:18px 0;

    border-bottom:1px solid #d9d9d9;

}

.nr-date{

    display:block;

    color:#111;

    font-size:17px;

    font-weight:700;

    margin-bottom:8px;

}

.nr-item a{

    color: var(--primary-color);

    font-size:18px;

    line-height:1.5;

    text-decoration:none;

    transition:.3s;

    display:block;

}

.nr-item a:hover{

    color: var(--secondary-color);

}

.nr-btn{

    display:inline-block;

    margin-top:25px;

    background:var(--black-color);

    color:var(--white-color);

    padding:12px 20px;

    font-size:18px;

    font-weight:500;

    text-decoration:none;

    transition:.3s;

}

.nr-btn:hover{

    background: var(--primary-color);

    color:var(--white-color);

}

@media(max-width:1199px){

.nr-title{

font-size:42px;

}

.nr-item a{

font-size:17px;

}

}

@media(max-width:991px){

.nr-box{

margin-bottom:50px;

}

}

@media(max-width:767px){

.nr-section{

padding:60px 0;

}

.nr-title{

font-size:34px;

margin-bottom:20px;

}

.nr-item{

padding:15px 0;

}

.nr-item a{

font-size:17px;

line-height:1.6;

}

.nr-btn{

width:100%;

text-align:center;

font-size:17px;

padding:14px;

}

}

.nr-intro-section{

    background:#f8f6ef;

    padding:60px 0;

}

.nr-intro-content{

    max-width:1500px;

}

.nr-intro-title{

    font-family:Georgia,serif;

    font-size:30px;

    font-weight:600;

    color:var(--secondary-color);

    margin-bottom:20px;

    line-height:1.15;

}

.nr-intro-text{

    font-size:18px;

    line-height:1.6;

    color:#2d2d2d;

    margin:0;

}

/* Large Screen */

@media(max-width:1400px){

.nr-intro-title{

font-size:28px;

}

.nr-intro-text{

font-size:18px;

}

}

/* Tablet */

@media(max-width:991px){

.nr-intro-section{

padding:40px 0;

}

.nr-intro-title{

font-size:25px;

}

.nr-intro-text{

font-size:16px;

line-height:1.6;

}

}

/* Mobile */

@media(max-width:767px){

.nr-intro-section{

padding:45px 0;

}

.nr-intro-title{

font-size:24px;

margin-bottom:15px;

}

.nr-intro-text{

font-size:16px;

line-height:1.6;

}

}


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

.ssj-blog-section{

    background:var(--white-color);
    padding:60px 0; 
}

.ssj-blog-left{

    background: var(--secondary-color);

    height:100%;

    padding:70px 50px;

    color:var(--white-color);

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.ssj-blog-left h2{

    font-size:30px;

    font-weight:600;

    margin-bottom:30px;

    color:var(--white-color);

}

.ssj-blog-left p{

    font-size:18px;

    line-height:1.6;

    margin-bottom:45px;

    color:var(--white-color);

}

.ssj-blog-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    width:max-content;

    background: var(--secondary-color);

    color:var(--white-color);

    padding:12px 20px;

    font-size:18px;

    font-weight:600;

    text-decoration:none;

    transition:.35s;

}

.ssj-blog-btn:hover{

    background: var(--primary-color);

    color:var(--white-color);

}

.ssj-blog-card{

    border:1px solid #ddd;

    height:100%;

    background:var(--white-color);

    transition:.35s;

}

.ssj-blog-card:hover{

    transform:translateY(-8px);

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

}

.ssj-blog-img{

    overflow:hidden;

}

.ssj-blog-img img{

    width:100%;

    height:220px;

    object-fit:cover;

    transition:.5s;

}

.ssj-blog-card:hover img{

    transform:scale(1.08);

}

.ssj-blog-content{

    padding:25px;

}

.ssj-blog-content h4{

    font-size:20px;

    font-weight:600;

    color:#111;

    line-height:1.4;

    margin-bottom:18px;

}

.ssj-blog-content p{

    font-size:17px;

    color:#444;

    line-height:1.8;

    margin-bottom:25px;

}

.ssj-read-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    border-radius:30px;

    background: var(--secondary-color);

    color:var(--white-color);

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.ssj-read-btn:hover{

    background: var(--secondary-color);

    color:var(--white-color);

}

/*==========================
Responsive
==========================*/

@media(max-width:1199px){

.ssj-blog-left{

padding:50px 35px;

}

.ssj-blog-left h2{

font-size:28px;

}

.ssj-blog-content h4{

font-size:20px;

}

}

@media(max-width:991px){

.ssj-blog-left{

margin-bottom:30px;

}

}

@media(max-width:767px){

.ssj-blog-section{

padding:60px 0;

}

.ssj-blog-left{

padding:40px 25px;

text-align:center;

}

.ssj-blog-left h2{

font-size:25px;

}

.ssj-blog-left p{

font-size:17px;

}

.ssj-blog-btn{

margin:auto;

}

.ssj-blog-img img{

height:220px;

}

.ssj-blog-content{

padding:20px;

}

.ssj-blog-content h4{

font-size:18px;

}

}


/*==============================
News Columns
==============================*/

.ssj-news-section{

    background:var(--white-color);
    padding:60px 0;
}

.ssj-news-box h2{

    color: var(--secondary-color);

    font-size:25px;

    font-weight:600;

    margin-bottom:25px;

    padding-bottom:12px;

    border-bottom:3px solid #d9d9d9;

}

.ssj-news-item{

    display:flex;

    gap:18px;

    align-items:flex-start;

    padding:18px 0;

    border-bottom:1px solid #ddd;

}

.ssj-news-item img{

    width:145px;

    height:90px;

    object-fit:cover;

    flex-shrink:0;

}

.ssj-news-item h4{

    font-size:16px;

    line-height:1.35;

    font-weight:700;

    color:#111;

    margin-bottom:10px;

    transition:.3s;

}

.ssj-news-item:hover h4{

    color: var(--primary-color);

}

.ssj-news-item span{

    font-size:15 px;

    color:#666;

}

.ssj-view-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:25px;

    background:var(--black-color);

    color:var(--white-color);

    padding:10px 15px;

    font-size:16px;

    font-weight:600;

    text-decoration:none;

    transition:.35s;

}

.ssj-view-btn:hover{

    background: var(--secondary-color);

    color:var(--white-color);

}

/*==============================
Responsive
==============================*/

@media(max-width:1199px){

.ssj-news-box h2{

font-size:22px;

}

.ssj-news-item img{

width:120px;

height:80px;

}

.ssj-news-item h4{

font-size:16px;

}

}

@media(max-width:991px){

.ssj-news-box{

margin-bottom:40px;

}

}

@media(max-width:767px){

.ssj-news-section{

padding:60px 0;

}

.ssj-news-box h2{

font-size:20px;

}

.ssj-news-item{

gap:15px;

}

.ssj-news-item img{

width:100px;

height:70px;

}

.ssj-news-item h4{

font-size:15px;

}

.ssj-news-item span{

font-size:15px;

}

.ssj-view-btn{

width:100%;

justify-content:center;

}

}

@media(max-width:480px){

.ssj-news-item{

flex-direction:column;

}

.ssj-news-item img{

width:100%;

height:200px;

}

}


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

.evt-section{

    background:#f5f6fb;
    padding:60px 0;

}

.evt-left{

    background: var(--secondary-color);

    color:var(--white-color);

    padding:70px 45px;

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.evt-left h2{

    font-size:30px;

    font-weight:600;

    margin-bottom:28px;

    color:var(--white-color);

}

.evt-left p{

    font-size:18px;

    line-height:1.6;

    margin-bottom:40px;

}

.evt-view-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background: var(--black-color);

    color:var(--white-color);

    padding:12px 20px;

    font-size:16px;

    font-weight:600;

    text-decoration:none;

    transition:.35s;

    width:max-content;

}

.evt-view-btn:hover{

    background: var(--white-color);

    color:var(--black-color);

}

/* Card */

.evt-card{

    background:var(--white-color);

    height:100%;

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

    transition:.35s;

}

.evt-card:hover{

    transform:translateY(-8px);

}

.evt-img{

    overflow:hidden;

}

.evt-img img{

    width:100%;

    height:250px;

    object-fit:cover;

    transition:.5s;

}

.evt-card:hover img{

    transform:scale(1.08);

}

.evt-content{

    padding:28px;

}

.evt-content h4{

    font-size:20px;

    font-weight:600;

    color:#111;

    line-height:1.4;

    margin-bottom:18px;

}

.evt-content p{

    font-size:16px;

    color:#555;

    line-height:1.6;

    margin-bottom:25px;

}

.evt-read-btn{

    display:inline-block;

    background: var(--secondary-color);

    color:var(--white-color);

    padding:12px 22px;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.evt-read-btn:hover{

    background: var(--primary-color);

    color:var(--white-color);

}

.evt-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.evt-nav{

    display:flex;

    gap:12px;

}

.evt-nav button{

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    background: var(--secondary-color);

    color:var(--white-color);

    transition:.35s;

}

.evt-nav button:hover{

    background: var(--primary-color);

}

/*==========================
Responsive
==========================*/

@media(max-width:1199px){

.evt-left{

padding:50px 35px;

}

.evt-left h2{

font-size:18px;

}

.evt-content h4{

font-size:16px;

}

}

@media(max-width:991px){

.evt-left{

margin-bottom:30px;

}

}

@media(max-width:767px){

.evt-section{

padding:60px 0;

}

.evt-left{

padding:40px 25px;

text-align:center;

}

.evt-left h2{

font-size:25px;

}

.evt-left p{

font-size:17px;

}

.evt-view-btn{

margin:auto;

}

.evt-img img{

height:220px;

}

.evt-content{

padding:22px;

}

.evt-content h4{

font-size:18px;

}

.evt-content p{

font-size:16px;

}

.evt-bottom{

flex-direction:column;

gap:20px;

align-items:flex-start;

}

}


/*===================================
REFLECTIONS
===================================*/

.ref-section{

    background: var(--secondary-color);

    color:var(--white-color);

    padding: 40px 0;

}

.ref-content h2{

    font-size:30px;

    font-weight:600;

    margin-bottom:25px;

    color:var(--white-color);

}

.ref-content p{

    font-size:18px;

    line-height:1.6;

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

    margin-bottom:35px;

}

/* Subscribe */

.ref-form{

    display:flex;

    overflow:hidden;

    max-width:520px;

}

.ref-form input{

    flex:1;

    height:55px;

    border:none;

    padding:0 20px;

    font-size:17px;

    outline:none;

}

.ref-form button{

    border:none;

    background: var(--primary-color);

    color:var(--white-color);

    padding:0 35px;

    font-size:18px;

    font-weight:600;

    transition:.35s;

}

.ref-form button:hover{

    background: var(--primary-color);

}

/* Cards */

.ref-card{

    position:relative;

    overflow:hidden;

    border-radius:8px;

    transition:.35s;

}

.ref-card img{

    width:100%;

    height:330px;

    object-fit:cover;

    transition:.5s;

}

.ref-card:hover img{

    transform:scale(1.08);

}

.ref-card span{

    position:absolute;

    left:15px;

    bottom:15px;

    background: var(--secondary-color);

    color:var(--white-color);

    padding:8px 16px;

    font-size:15px;

    font-weight:600;

}

.ref-btn{

    display:inline-block;

    background: var(--black-color);

    color:var(--white-color);

    text-decoration:none;

    padding:12px 20px;

    font-size:16px;

    font-weight:600;

    transition:.35s;

}

.ref-btn:hover{

    background: var(--primary-color);

    color:var(--white-color);

}

/*===================================
Responsive
===================================*/

@media(max-width:1199px){

.ref-content h2{

font-size:28px;

}

.ref-card img{

height:290px;

}

}

@media(max-width:991px){

.ref-content{

text-align:center;

margin-bottom:40px;

}

.ref-form{

margin:auto;

}

}

@media(max-width:767px){

.ref-section{

padding:60px 0;

}

.ref-content h2{

font-size:25px;

}

.ref-content p{

font-size:17px;

}

.ref-form{

flex-direction:column;

gap:15px;

}

.ref-form input{

height:55px;

}

.ref-form button{

height:55px;

width:100%;

}

.ref-card img{

height:260px;

}

.ref-btn{

width:100%;

}

}


/*========================================
PODCAST SECTION
========================================*/

.pod-section{

    padding:60px 0;

    background:var(--white-color);

}

.pod-content h2{

    font-size:30px;

    font-weight:600;

    color:var(--secondary-color);

    margin-bottom:30px;

}

.pod-content p{

    font-size:18px;

    line-height:1.6;

    color:#555;

    margin-bottom:35px;

}

.pod-btn{

    display:inline-block;

    background:var(--secondary-color);

    color:var(--white-color);

    padding:14px 20px;

    text-decoration:none;

    font-size:16px;

    font-weight:600;

    transition:.35s;

}

.pod-btn:hover{

    background:var(--primary-color);

    color:var(--white-color);

}

.pod-card{

    background:var(--white-color);

    border-radius:10px;

    overflow:hidden;

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

    transition:.35s;

    height:100%;

}

.pod-card:hover{

    transform:translateY(-8px);

}

.pod-card img{

    width:100%;

    height:350px;

    object-fit:cover;

}

.pod-card-body{

    padding:25px;

}

.pod-card-body h4{

    font-size:20px;

    font-weight:600;

    color:var(--secondary-color);

    line-height:1.4;

    margin-bottom:18px;

}

.pod-bottom{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    gap:20px;

}

.pod-bottom p{

    margin:0;

    font-size:16px;

    line-height:1.6;

    color:#555;

}

.pod-bottom a{

    width:55px;

    height:55px;

    border-radius:50%;

    background: var(--secondary-color);

    color:var(--white-color);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

    text-decoration:none;

    flex-shrink:0;

    transition:.35s;

}

.pod-bottom a:hover{

    background:var(--primary-color);

    color:var(--white-color);

}

/*========================================
MEDIA RESOURCES
========================================*/

.media-resource{

    background:#f6f6f6;

    padding:70px 0;

}

.media-resource h2{

    font-size:30px;

    font-weight:600;

    color:var(--secondary-color);

    line-height:1.1;

}

.media-resource p{

    font-size:18px;

    line-height:1.6;

    color:#444;

    margin:0;

}

/* RED BAR */

.media-links{

    background:var(--secondary-color);

    padding:20px 0;

}

.media-item{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:15px;

    color:var(--white-color);

    text-decoration:none;

    font-size:18px;

    font-weight:600;

    transition:.35s;

}

.media-item:hover{

    color:var(--white-color);

    transform:translateY(-4px);

}

.media-item span{

    width:48px;

    height:48px;

    background:var(--white-color);

    color:var(--primary-color);

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    font-weight:700;

}

/* EMAIL */

.media-mail{

    padding:35px 0;

    background:var(--white-color);

}

.media-mail p{

    font-size:18px;

    margin:0;

    color:#333;

}

.media-mail a{

    color:var(--primary-color);

    text-decoration:none;

    font-weight:700;

}

.media-mail a:hover{

    text-decoration:underline;

}

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

@media(max-width:1199px){

.pod-card img{

height:300px;

}

.pod-content h2,

.media-resource h2{

font-size:25px;

}

}

@media(max-width:991px){

.pod-content{

text-align:center;

margin-bottom:30px;

}

.media-resource{

text-align:center;

}

.media-resource h2{

margin-bottom:20px;

}

.media-item{

justify-content:flex-start;

padding-left:20px;

}

}

@media(max-width:767px){

.pod-section{

padding:40px 0;

}

.pod-content h2,

.media-resource h2{

font-size:25px;

}

.pod-content p,

.media-resource p{

font-size:16px;

}

.pod-card img{

height:260px;

}

.pod-card-body{

padding:20px;

}

.pod-card-body h4{

font-size:20px;

}

.pod-bottom{

flex-direction:column;

align-items:flex-start;

}

.pod-bottom a{

margin-top:10px;

}

.media-links{

padding:25px 0;

}

.media-item{

justify-content:flex-start;

font-size:16px;

}

.media-item span{

width:40px;

height:40px;

font-size:16px;

}

.media-mail p{

font-size:16px;

}

}


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

.archive-section{

    padding:60px 0;

    background:var(--white-color);

}

.archive-heading{

    margin-bottom:50px;

}

.archive-heading h2{

    font-size:30px;

    font-weight:600;

    color:var(--secondary-color);

    margin-bottom:25px;

}

.archive-heading p{

    font-size:18px;

    line-height:1.6;

    color:#444;

    max-width:1300px;

}

.archive-card{

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:65px;

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

    color:var(--secondary-color);

    text-decoration:none;

    font-size:18px;

    font-weight:600;

    transition:.35s;

    background:var(--white-color);

}

.archive-card:hover{

    background:var(--secondary-color);

    color:var(--white-color);

    transform:translateY(-4px);

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

}

/*==========================
Responsive
==========================*/

@media(max-width:1199px){

.archive-heading h2{

font-size:28px;

}

.archive-card{

font-size:18px;

min-height:65px;

}

}

@media(max-width:991px){

.archive-heading h2{

font-size:25px;

}

.archive-heading p{

font-size:16px;

}

.archive-card{

font-size:16px;

}

}

@media(max-width:767px){

.archive-section{

padding:40px 0;

}

.archive-heading{

text-align:center;

}

.archive-heading h2{

font-size:22px;

}

.archive-heading p{

font-size:16px;

}

.archive-card{

font-size:16px;

min-height:60px;

}

}

@media(max-width:575px){

.archive-card{

font-size:16px;

}

}



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

.newsletter-section{

    padding:60px 0;

    background:var(--white-color);

}

/* Subscribe */

.newsletter-subscribe{

    max-width:700px;

    margin:0 auto 90px;

}

.newsletter-subscribe form{

    display:flex;

    gap:20px;

}

.newsletter-subscribe input{

    flex:1;

    height:55px;

    border:1px solid #cfcfcf;

    padding:0 22px;

    font-size:16px;

    outline:none;

}

.newsletter-subscribe button{

    background:var(--primary-color);

    color:var(--white-color);

    border:none;

    padding:0 40px;

    font-size:16px;

    font-weight:600;

    transition:.35s;

}

.newsletter-subscribe button:hover{

    background:var(--secondary-color);

}

/* Heading */

.newsletter-heading{

    margin-bottom:40px;

}

.newsletter-heading h2{

    font-size:30px;

    font-weight:600;

    color:var(--secondary-color);

}

/* Cards */

.newsletter-card{

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    min-height:65px;

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

    text-decoration:none;

    color:var(--secondary-color);

    font-size:18px;

    font-weight:600;

    transition:.35s;

    background:var(--white-color);

}

.newsletter-card:hover{

    background:var(--secondary-color);

    color:var(--white-color);

    transform:translateY(-5px);

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

}

/*==========================
Responsive
==========================*/

@media(max-width:991px){

.newsletter-heading h2{

font-size:28px;

}

.newsletter-subscribe form{

flex-direction:column;

}

.newsletter-subscribe button{

height:60px;

}

}

@media(max-width:767px){

.newsletter-section{

padding:40px 0;

}

.newsletter-heading{

text-align:center;

}

.newsletter-heading h2{

font-size:25px;

}

.newsletter-card{

font-size:18px;

min-height:70px;

}

.newsletter-subscribe{

margin-bottom:60px;

}

}


/*====================================
PODCAST ABOUT
====================================*/

.podcast-about{

    background:var(--white-color);

    padding:60px 0;

}

.podcast-heading{

    margin-bottom:60px;

}

.podcast-heading h2{

    font-size:30px;

    font-weight:600;

    color:var(--secondary-color);

    margin-bottom:25px;

}

.podcast-heading p{

    font-size:18px;

    color:#444;

    line-height:1.6;

    margin-bottom:18px;

}

.podcast-intro{

    font-weight:600;

    color:var(--secondary-color);

}

.podcast-image{

    overflow:hidden;

    border-radius:10px;

}

.podcast-image img{

    width:100%;

    height:400px;

    object-fit:cover;

    transition:.5s;

}

.podcast-image:hover img{

    transform:scale(1.05);

}

.podcast-content{

    padding-left:40px;

}

.podcast-content h3{

    font-size:25px;

    color:var(--secondary-color);

    font-weight:600;

    margin-bottom:30px;

}

.podcast-content p{

    font-size:18px;

    line-height:1.6;

    color:#555;

    margin-bottom:22px;

}

.podcast-btn{

    display:inline-block;

    margin-top:15px;

    padding:12px 20px;

    border:2px solid var(--secondary-color);

    color:var(--secondary-color);

    text-decoration:none;

    font-size:16px;

    font-weight:600;

    transition:.35s;

}

.podcast-btn:hover{

    background:var(--secondary-color);

    color:var(--white-color);

}

/*==========================
Responsive
==========================*/

@media(max-width:1199px){

.podcast-heading h2{

font-size:28px;

}

.podcast-content h3{

font-size:25px;

}

.podcast-image img{

height:350px;

}

}

@media(max-width:991px){

.podcast-content{

padding-left:0;

text-align:center;

}

.podcast-heading{

text-align:center;

}

.podcast-image img{

height:350px;

}

}

@media(max-width:767px){

.podcast-about{

padding:40px 0;

}

.podcast-heading h2{

font-size:25px;

}

.podcast-content h3{

font-size:22px;

}

.podcast-heading p,

.podcast-content p{

font-size:16px;

line-height:1.6;

}

.podcast-image img{

height:280px;

}

.podcast-btn{

width:100%;

text-align:center;

padding:15px;

}

}


/*==========================
Podcast Series
==========================*/

.podcast-series{

    padding:60px 0;

    background:var(--white-color);

}

.podcast-item{

    margin-bottom:90px;

}

.podcast-item:last-child{

    margin-bottom:0;

}

.podcast-text{

    padding-right:40px;

}

.podcast-item:nth-child(even) .podcast-text{

    padding-left:40px;

    padding-right:0;

}

.podcast-text h2{

    font-size:30px;

    font-weight:600;

    color:var(--secondary-color);

    margin-bottom:30px;

}

.podcast-text p{

    font-size:18px;

    line-height:1.6;

    color:#444;

    margin-bottom:35px;

}

.podcast-outline-btn{

    display:inline-block;

    padding:12px 20px;

    border:2px solid var(--secondary-color);

    color:var(--secondary-color);

    font-size:16px;

    font-weight:600;

    text-decoration:none;

    transition:.35s;

}

.podcast-outline-btn:hover{

    background:var(--secondary-color);

    color:var(--white-color);

}

.podcast-img{

    overflow:hidden;

    border-radius:6px;

}

.podcast-img img{

    width:100%;

    height:400px;

    object-fit:cover;

    transition:.5s;

}

.podcast-img:hover img{

    transform:scale(1.05);

}

/*=====================
Responsive
=====================*/

@media(max-width:1199px){

.podcast-text h2{

font-size:28px;

}

.podcast-img img{

height:370px;

}

}

@media(max-width:991px){

.podcast-text{

padding:0 !important;

text-align:center;

}

.podcast-item{

margin-bottom:70px;

}

.podcast-img img{

height:330px;

}

}

@media(max-width:767px){

.podcast-series{

padding:40px 0;

}

.podcast-text h2{

font-size:25px;

margin-bottom:18px;

}

.podcast-text p{

font-size:16px;

line-height:1.6;

}

.podcast-img img{

height:250px;

}

.podcast-outline-btn{

width:100%;

text-align:center;

padding:15px;

}

}


.news-filter{

padding:70px 0 40px;

}

.news-filter select,
.news-filter input{

height:56px;

border:1px solid #ddd;

border-radius:0;

}

.news-search-btn{

height:56px;

width:100%;

background:var(--secondary-color);

color:var(--white-color);

border:none;

border-radius:0;

font-weight:600;

}

.news-search-btn:hover{

background:var(--primary-color);

}

.view-btn{

width:48px;

height:48px;

border:none;

background:none;

font-size:22px;

margin-left:10px;

color:#888;

}

.view-btn.active{

color:var(--secondary-color);

}

.news-card img{

width:100%;

height:240px;

object-fit:cover;

}

.news-content{

padding:40px 0;

}

.news-content h4{

font-size:20px;

font-weight:600;

line-height:1.35;

margin-bottom:15px;

color:var(--secondary-color);

}

.news-content p{

font-size:16px;

line-height:1.6;

margin-bottom:20px;

}

.news-content a{

font-size:16px;

font-weight:600;

color:var(--secondary-color);

text-decoration:none;

}

.news-content a i{

margin-left:10px;

transition:.3s;

}

.news-content a:hover i{

transform:translateX(6px);

}

/* LIST VIEW */

.news-wrapper.list-view .news-item{

width:100%;

flex:0 0 100%;

max-width:100%;

}

.news-wrapper.list-view .news-card{

display:flex;

gap:30px;

align-items:center;

}

.news-wrapper.list-view img{

width:320px;

height:220px;

}

.news-wrapper.list-view .news-content{

padding-top:0;

}

@media(max-width:991px){

.news-wrapper.list-view .news-card{

display:block;

}

.news-wrapper.list-view img{

width:100%;

height:240px;

}

.news-content h4{

font-size:18px;

}

}


/* events page  */

.events-page{
background:var(--white-color);
}

.event-topbar{
padding-bottom:25px;
border-bottom:1px solid #e5e5e5;
}

.event-search{
position:relative;
}

.event-search i{
position:absolute;
left:18px;
top:50%;
transform:translateY(-50%);
color:#777;
}

.event-search input{
padding-left:48px;
height:58px;
border-radius:0;
}

.event-btn{
height:58px;
background:var(--secondary-color);
color:var(--white-color);
font-weight:600;
border-radius:0;
}

.event-btn:hover{
background: var(--primary-color);
color:var(--white-color);
border:none;
}

.filter-toggle{
border:none;
background:none;
font-weight:600;
}

.event-view{
display:flex;
justify-content:flex-end;
gap:15px;
}

.event-view button{
border:none;
background:none;
font-weight:600;
padding-bottom:8px;
}

.event-view button.active{
border-bottom:3px solid var(--secondary-color);
}

.event-filters{
display:none;
padding:30px;
background:#f8f9fa;
margin-top:20px;
}

.event-heading h2{
font-size:30px;
font-weight:600;
color: var(--secondary-color);
}

.event-card{
border:1px solid #ddd;
padding:22px;
transition:.3s;
height:100%;
}

.event-card:hover{
box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.event-card img{
width:100%;
height:220px;
object-fit:cover;
margin-bottom:15px;
}

.event-mode{
display:inline-block;
font-weight:700;
margin-bottom:10px;
}

.event-date{
font-weight:600;
margin-bottom:15px;
}

.event-card h3{
font-size:25px;
line-height:1.3;
margin-bottom:15px;
}

.event-card p{
font-size:16px;
color:#555;
margin-bottom:20px;
}

.event-read{
display:block;
text-align:center;
background:var(--secondary-color);
color:var(--white-color);
padding:14px;
text-decoration:none;
font-weight:600;
}

.event-read:hover{
color:var(--white-color);
background:var(--primary-color);
}

@media(max-width:991px){

.event-heading h2{
font-size:25px;
}

.event-view{
justify-content:start;
margin-top:10px;
}

}

@media(max-width:767px){

.event-card .row{
flex-direction:column;
}

.event-card img{
height:230px;
}

.event-card h3{
font-size:22px;
}

.event-search input,
.event-btn{
height:52px;
}

}


/* in the media page  */


.media-news-section{
background:var(--white-color);
padding: 60px 0;
}

.media-search{
position:relative;
margin-bottom:35px;
}

.media-search input{
width:100%;
height:50px;
padding:0 70px 0 25px;
border:1px solid #cfcfcf;
font-size:16px;
outline:none;
}

.media-search button{
position:absolute;
right:0px;
top:0;
width:70px;
height:60px;
border:none;
background: transparent;
font-size:25px;
color:var(--black-color);
}

.media-filter{
margin-bottom:60px;
}

.media-filter select{
width:300px;
height:50px;
padding:0 18px;
font-size:16px;
border:1px solid #cfcfcf;
outline:none;
}

.media-card img{
width:100%;
height:140px;
object-fit:contain;
border:1px solid #e5e5e5;
margin-bottom:22px;
}

.media-card h4{
font-size:20px;
font-weight:500;
line-height:1.18;
margin-bottom:18px;
color:var(--black-color);
}

.media-card .date{
display:block;
font-size:16px;
color:#777;
margin-bottom:18px;
}

.media-card p{
font-size:16px;
line-height:1.6;
color:#333;
margin:0;
}

.media-card{
transition:.35s;
}

.media-card:hover h4{
color:#0b2d5c;
}

@media(max-width:1199px){

.media-card h4{
font-size:18px;
}

}

@media(max-width:991px){

.media-filter select{
width:100%;
}

.media-search input{
height:50px;
}

.media-search button{
height:50px;
width:60px;
font-size:22px;
}

}

@media(max-width:767px){

.media-search{
margin-bottom:25px;
}

.media-filter{
margin-bottom:35px;
}

.media-card img{
height:170px;
}

.media-card h4{
font-size:18px;
}

.media-card{
margin-bottom:15px;
}

}



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

.contact-section{
    padding:60px 20px;
    background:#f8fafc;
}

.contact-container{
    max-width:1300px;
    margin:auto;
    display:flex;
    gap:50px;
    align-items:flex-start;
}

/* Left */

.contact-info{
    flex:1;
}

.section-tag{
    display:inline-block;
    background:var(--secondary-color);
    color:var(--white-color);
    padding:8px 18px;
    border-radius:40px;
    font-size:13px;
    letter-spacing:1px;
    margin-bottom:15px;
}

.contact-info h2{
    font-size:32px;
    color: var(--secondary-color);
    margin-bottom:15px;
}

.contact-info p{
    color:#666;
    line-height:1.8;
    margin-bottom:35px;
}

.contact-box{
    display:flex;
    gap:20px;
    margin-bottom:28px;
    align-items:flex-start;
}

.contact-box .icon{
    width:60px;
    height:60px;
    background:var(--secondary-color);
    color:var(--white-color);
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:15px;
    font-size:22px;
    flex-shrink:0;
}

.contact-box h4{
    margin-bottom:8px;
    color: var(--secondary-color);
    font-size:20px;
}

.contact-box p{
    margin:0;
    color:#666;
    line-height:1.8;
}

.contact-box a{
    color: var(--secondary-color);
    text-decoration:none;
    font-weight:600;
}

/* Right */

.contact-form{
    flex:1;
    background:var(--white-color);
    padding:20px 40px;
    border-radius:18px;
    box-shadow:0 15px 45px rgba(0,0,0,.08);
}

.contact-form h3{
    margin-bottom:25px;
    color: var(--secondary-color);
    font-size:30px;
}

.contact-form .row{
    display:flex;
    gap:15px;
    margin-bottom:15px;
}

.contact-form .row input{
    width:100%;
}

.contact-form input,
.contact-form textarea{
    width:100%;
    border:1px solid #ddd;
    padding:11px 15px;
    border-radius:10px;
    outline:none;
    font-size:14px;
    transition:.3s;
    box-sizing:border-box;
}

.contact-form input:focus,
.contact-form textarea:focus{
    border-color:var(--secondary-color);
}

.contact-form textarea{
    resize:vertical;
}

.contact-form button{
    margin-top:20px;
    background:var(--secondary-color);
    color:var(--white-color);
    border:none;
    padding:15px 35px;
    border-radius:10px;
    cursor:pointer;
    font-size:16px;
    transition:.3s;
}

.contact-form button:hover{
    background:var(--primary-color);
}

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

.map-section{
    width:100%;
}

.map-section iframe{
    width:100%;
    height:500px;
    border:0;
    display:block;
}

/*=========================
Responsive
=========================*/

@media(max-width:991px){

.contact-container{
    flex-direction:column;
}

.contact-info,
.contact-form{
    width:100%;
}

.contact-info h2{
    font-size:34px;
}

}

@media(max-width:768px){

.contact-section{
    padding:70px 15px;
}

.contact-form .row{
    flex-direction:column;
    gap:15px;
}

.contact-form{
    padding:25px;
}

.contact-info h2{
    font-size:30px;
}

.contact-form h3{
    font-size:26px;
}

.map-section iframe{
    height:380px;
}

}

@media(max-width:480px){

.contact-box{
    gap:15px;
}

.contact-box .icon{
    width:50px;
    height:50px;
    font-size:18px;
}

.contact-info h2{
    font-size:26px;
}

.contact-form{
    padding:20px;
}

.contact-form button{
    width:100%;
}

.map-section iframe{
    height:300px;
}

}


/* faculty page section  */


/*=========================================
            FACULTY DIRECTORY
=========================================*/

.faculty-directory{
    padding:70px 0 90px;
    background:var(--white-color);
}

.faculty-directory .container{
    width:92%;
    max-width:1500px;
    margin:auto;
}

/*=========================================
            FILTER SECTION
=========================================*/

.faculty-filter-wrapper{

    display:grid;
    grid-template-columns:2.2fr 1fr 1fr 1fr;
    gap:22px;
    margin-bottom:55px;
}

/* Search */

.faculty-search{

    position:relative;

}

.faculty-search input{

    width:100%;
    height:50px;

    padding:0 70px 0 22px;

    border:1px solid #d8d8d8;

    font-size:16px;

    outline:none;

    transition:.3s;

    background:var(--white-color);

}

.faculty-search input:focus{

    border-color: var(--secondary-color);

}

.faculty-search button{

    position:absolute;

    right:0;
    top:0;

    width:70px;
    height:50px;

    border:none;

    background:transparent;

    cursor:pointer;

    font-size:28px;

    color: var(--secondary-color);

}

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

.faculty-select{

    position:relative;

}

.faculty-select select{

    width:100%;
    height:50px;

    padding:0 50px 0 20px;

    border:1px solid #d8d8d8;

    font-size:16px;

    cursor:pointer;

    outline:none;

    appearance:none;

    background:var(--white-color);

    transition:.3s;

}

.faculty-select select:focus{

    border-color: var(--secondary-color);

}

.faculty-select::after{

    content:"\f107";

    font-family:"Font Awesome 6 Free";

    font-weight:900;

    position:absolute;

    right:18px;
    top:50%;

    transform:translateY(-50%);

    font-size:20px;

    color: var(--secondary-color);

    pointer-events:none;

}

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

.faculty-grid{

    display:grid;

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

    gap:45px 35px;

}

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

.faculty-card{

    background:var(--white-color);

    transition:.35s;

}

.faculty-card:hover{

    transform:translateY(-8px);

}

/* Image */

.faculty-image{

    overflow:hidden;

    aspect-ratio:1/.8;

}

.faculty-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.5s;

}

.faculty-card:hover img{

    transform:scale(1.06);

}

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

.faculty-content{

    padding:28px 15px 10px;

}

.faculty-content h3{

    font-size:25px;

    font-weight:500;

    color: var(--secondary-color);

    margin-bottom:14px;

    line-height:1.2;

    font-family:Georgia,serif;

}

.faculty-content h5{

    font-size:18px;

    color:#222;

    font-weight:500;

    line-height:1.55;

    margin-bottom:18px;

}

.qualification{

    font-size:16px;

    color:#111;

    font-style:italic;

    line-height:1.6;

    margin-bottom:18px;

}

.email{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:16px;

    color:#111;

    word-break:break-word;

}

.email i{

    color: var(--secondary-color);

    font-size:22px;

}

.view-profile{

    display:inline-block;

    margin-top:25px;

    color: var(--secondary-color);

    font-weight:600;

    text-decoration:none;

    transition:.3s;

}

.view-profile:hover{

    color: var(--primary-color);

}

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

.faculty-pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    margin-top:70px;

}

.page-btn{

    width:48px;

    height:48px;

    border:1px solid #d8d8d8;

    background:var(--white-color);

    cursor:pointer;

    transition:.3s;

    font-size:17px;

}

.page-btn:hover{

    background:var(--secondary-color);

    color:var(--white-color);

}

.page-btn.active{

    background:var(--secondary-color);

    color:var(--white-color);

    border-color:var(--secondary-color);

}

/*=========================================
            LARGE SCREEN
=========================================*/

@media(max-width:1400px){

.faculty-grid{

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

}

.faculty-content h3{

    font-size:22px;

}

}

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

@media(max-width:991px){

.faculty-filter-wrapper{

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

}

.faculty-grid{

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

}

.faculty-content h3{

    font-size:22px;

}

.faculty-content h5{

    font-size:16px;

}

}

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

@media(max-width:767px){

.faculty-directory{

    padding:45px 0 60px;

}

.faculty-filter-wrapper{

    grid-template-columns:1fr;

    gap:18px;

}

.faculty-search input{

    height:48px;

    font-size:16px;

}

.faculty-search button{

    height:48px;

    width:60px;

    font-size:22px;

}

.faculty-select select{

    height:48px;

    font-size:16px;

}

.faculty-grid{

    grid-template-columns:1fr;

    gap:35px;

}

.faculty-content{

    padding:22px 8px 5px;

}

.faculty-content h3{

    font-size:20px;

}

.faculty-content h5{

    font-size:16px;

}

.qualification{

    font-size:16px;

}

.email{

    font-size:16px;

}

.faculty-pagination{

    flex-wrap:wrap;

    margin-top:50px;

}

}



/*==============================
    WHY JOIN US
===============================*/

.fa-why-join-section{
    padding:60px 0;
    background:#f8f9fc;
}

.fa-section-title{
    max-width:750px;
    margin:0 auto 60px;
    text-align:center;
}

.fa-section-title span{
    display:inline-block;
    color:var(--primary-color);
    font-size:15px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
}

.fa-section-title h2{
    margin:15px 0 20px;
    color:var(--secondary-color);
    font-size:30px;
    font-family:Georgia, serif;
    font-weight:600;
}

.fa-section-title p{
    color:#666;
    font-size:16px;
    line-height:1.6;
}

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

.fa-join-card{
    background:var(--white-color);
    padding:30px 25px;
    text-align:center;
    border-radius:10px;
    box-shadow:0 10px 35px rgba(0,0,0,.08);
    transition:.35s;
}

.fa-join-card:hover{
    transform:translateY(-10px);
}

.fa-join-icon{
    width:85px;
    height:85px;
    margin:0 auto 25px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(228,119,24,.12);
}

.fa-join-icon i{
    font-size:34px;
    color:var(--primary-color);
}

.fa-join-card h3{
    color:var(--secondary-color);
    font-size:20px;
    margin-bottom:15px;
    font-family:Georgia, serif;
}

.fa-join-card p{
    color:#666;
    font-size:16px;
    line-height:1.8;
}

@media(max-width:991px){

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

}

@media(max-width:767px){

.fa-section-title h2{
    font: size 25px;
}

.fa-join-grid{
    grid-template-columns:1fr;
}

.fa-join-card{
    padding:30px 25px;
}

}



/*====================================
        CURRENT OPENINGS
====================================*/

.fa-opening-section{
    padding:60px 0;
    background:var(--white-color);
}

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

.fa-opening-card{
    background:var(--white-color);
    border:1px solid #ececec;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.35s;
}

.fa-opening-card:hover{
    transform:translateY(-10px);
}

.fa-opening-top{
    background:var(--secondary-color);
    padding:35px 30px;
}

.fa-opening-type{
    display:inline-block;
    background:var(--primary-color);
    color:var(--white-color);
    padding:8px 18px;
    font-size:14px;
    border-radius:30px;
    margin-bottom:18px;
}

.fa-opening-top h3{
    color:var(--white-color);
    font-size:30px;
    margin-bottom:10px;
    font-family:Georgia, serif;
}

.fa-opening-top h4{
    color:#d9d9d9;
    font-size:18px;
    font-weight:400;
}

.fa-opening-info{
    list-style:none;
    padding:30px;
    margin:0;
}

.fa-opening-info li{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:18px;
    color:#555;
    font-size:17px;
}

.fa-opening-info li:last-child{
    margin-bottom:0;
}

.fa-opening-info i{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(228,119,24,.12);
    color:var(--primary-color);
    border-radius:50%;
}

.fa-opening-btn{
    display:block;
    margin:0 30px 30px;
    padding:15px;
    text-align:center;
    background:var(--primary-color);
    color:var(--white-color);
    text-decoration:none;
    font-weight:600;
    transition:.35s;
    border-radius:6px;
}

.fa-opening-btn:hover{
    background:var(--secondary-color);
    color:var(--white-color);
}

@media(max-width:991px){

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

}

@media(max-width:767px){

.fa-opening-grid{
    grid-template-columns:1fr;
}

.fa-opening-top{
    padding:30px 25px;
}

.fa-opening-info{
    padding:25px;
}

.fa-opening-btn{
    margin:0 25px 25px;
}

}



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

/* .fa-eligibility-section{
    padding:60px 0;
    background:#f7f9fc;
}

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

.fa-eligibility-card{
    background:var(--white-color);
    padding:45px 35px;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.35s;
    border-top:5px solid var(--primary-color);
}

.fa-eligibility-card:hover{
    transform:translateY(-10px);
}

.fa-eligibility-icon{
    width:80px;
    height:80px;
    border-radius:50%;
    background:rgba(228,119,24,.12);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:25px;
}

.fa-eligibility-icon i{
    font-size:34px;
    color:var(--primary-color);
}

.fa-eligibility-card h3{
    color:var(--secondary-color);
    font-size:28px;
    margin-bottom:25px;
    font-family:Georgia, serif;
}

.fa-eligibility-card ul{
    margin:0;
    padding:0;
    list-style:none;
}

.fa-eligibility-card ul li{
    position:relative;
    padding-left:30px;
    margin-bottom:18px;
    color:#555;
    font-size:17px;
    line-height:1.7;
}

.fa-eligibility-card ul li:last-child{
    margin-bottom:0;
}

.fa-eligibility-card ul li::before{
    content:"✓";
    position:absolute;
    left:0;
    top:0;
    color:var(--primary-color);
    font-weight:700;
    font-size:18px;
}

@media(max-width:991px){

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

}

@media(max-width:767px){

.fa-eligibility-grid{
    grid-template-columns:1fr;
}

.fa-eligibility-card{
    padding:35px 25px;
}

} */


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

.fa-process-section{
    padding:90px 0;
    background:#f7f9fc;
}

.fa-process-wrapper{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}

.fa-process-item{
    position:relative;
    flex:1;
    background:var(--white-color);
    padding:40px 25px;
    text-align:center;
    border-radius:12px;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
    transition:.35s;
}

.fa-process-item:hover{
    transform:translateY(-10px);
}

.fa-process-number{
    position:absolute;
    top:-18px;
    right:20px;
    width:45px;
    height:45px;
    background:var(--primary-color);
    color:var(--white-color);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    font-weight:700;
}

.fa-process-icon{
    width:90px;
    height:90px;
    margin:0 auto 25px;
    border-radius:50%;
    background:rgba(228,119,24,.12);
    display:flex;
    align-items:center;
    justify-content:center;
}

.fa-process-icon i{
    font-size:36px;
    color:var(--primary-color);
}

.fa-process-item h3{
    color:var(--secondary-color);
    font-size:26px;
    margin-bottom:15px;
    font-family:Georgia, serif;
}

.fa-process-item p{
    color:#666;
    font-size:16px;
    line-height:1.8;
}

.fa-process-arrow{
    font-size:32px;
    color:var(--primary-color);
}

@media(max-width:991px){

.fa-process-wrapper{
    flex-wrap:wrap;
}

.fa-process-item{
    width:calc(50% - 20px);
    flex:none;
}

.fa-process-arrow{
    display:none;
}

}

@media(max-width:767px){

.fa-process-wrapper{
    display:block;
}

.fa-process-item{
    width:100%;
    margin-bottom:30px;
}

.fa-process-item:last-child{
    margin-bottom:0;
}

}


/*=================================
        BENEFITS SECTION
=================================*/

.fa-benefits-section{
    padding:60px 0;
    background:var(--white-color);
}

.fa-benefits-wrapper{
    display:grid;
    grid-template-columns:46% 54%;
    gap:70px;
    align-items:center;
}

.fa-benefits-image{
    position:relative;
}

.fa-benefits-image img{
    width:100%;
    height:650px;
    object-fit:cover;
    border-radius:15px;
    box-shadow:0 20px 50px rgba(0,0,0,.12);
}

.fa-benefits-tag{
    display:inline-block;
    color:var(--primary-color);
    font-size:15px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:15px;
}

.fa-benefits-content h2{
    color:var(--secondary-color);
    font-size:30px;
    font-family:Georgia, serif;
    margin-bottom:20px;
}

.fa-benefits-content>p{
    color:#666;
    font-size:16px;
    line-height:1.6;
    margin-bottom:40px;
}

.fa-benefits-list{
    display:flex;
    flex-direction:column;
    gap:25px;
}

.fa-benefit-item{
    display:flex;
    align-items:flex-start;
    gap:20px;
}

.fa-benefit-item i{
    width:55px;
    height:55px;
    background:rgba(228,119,24,.12);
    color:var(--primary-color);
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:20px;
    flex-shrink:0;
}

.fa-benefit-item h4{
    color:var(--secondary-color);
    font-size:20px;
    margin-bottom:8px;
    font-family:Georgia, serif;
}

.fa-benefit-item p{
    color:#666;
    font-size:16px;
    line-height:1.7;
    margin:0;
}

@media(max-width:991px){

.fa-benefits-wrapper{
    grid-template-columns:1fr;
}

.fa-benefits-image img{
    height:450px;
}

}

@media(max-width:767px){

.fa-benefits-content h2{
    font-size:28px;
}

.fa-benefits-image img{
    height:320px;
}

.fa-benefit-item{
    gap:15px;
}

.fa-benefit-item h4{
    font-size:18px;
}

}

/* placements page  */


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

.plcm-hero-slider{
    position:relative;
}

.plcmSwiper{
    width:100%;
}

.plcmSwiper .swiper-slide{
    position:relative;
    height:70vh;
    overflow:hidden;
    display:flex;
    align-items:center;
}

.plcm-slide-bg{
    position:absolute;
    inset:0;
}

.plcm-slide-bg img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.plcm-slide-bg::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(8,32,65,.72);
}

.plcm-hero-content{
    position:relative;
    z-index:5;
    max-width:720px;
    color:var(--white-color);
}

.plcm-tag{
    display:inline-block;
    padding:10px 22px;
    border-radius:50px;
    background:var(--primary-color);
    color:var(--white-color);
    font-size:15px;
    letter-spacing:1px;
    margin-bottom:25px;
}

.plcm-hero-content h1{
    font-size:30px;
    line-height:1.1;
    font-family:Georgia, serif;
    margin-bottom:25px;
}

.plcm-hero-content p{
    font-size:18px;
    line-height:1.8;
    max-width:620px;
    margin-bottom:40px;
}

.plcm-btns{
    display:flex;
    gap:18px;
    margin-bottom:55px;
}

.plcm-btn-primary{
    padding:17px 40px;
    background:var(--primary-color);
    color:var(--white-color);
    text-decoration:none;
    font-weight:600;
}

.plcm-btn-outline{
    padding:17px 40px;
    border:2px solid var(--white-color);
    color:var(--white-color);
    text-decoration:none;
}

.plcm-btn-primary:hover{
    background:var(--white-color);
    color:var(--secondary-color);
}

.plcm-btn-outline:hover{
    background:var(--white-color);
    color:var(--secondary-color);
}

.plcm-counter{
    display:flex;
    gap:25px;
}

.plcm-counter-box{
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(12px);
    padding:25px 35px;
    min-width:180px;
}

.plcm-counter-box h3{
    font-size:25px;
    color:var(--primary-color);
    margin-bottom:8px;
    font-family:Georgia, serif;
}

.plcm-counter-box span{
    font-size:16px;
}

.plcmSwiper .swiper-pagination-bullet{
    width:12px;
    height:12px;
    background:var(--white-color);
    opacity:.6;
}

.plcmSwiper .swiper-pagination-bullet-active{
    background:var(--primary-color);
    opacity:1;
}

/* Hero Navigation */

.plcm-hero-prev,
.plcm-hero-next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:55px;
    height:55px;
    border-radius:50%;
    background:rgba(255,255,255,.15);
    backdrop-filter:blur(10px);
    color:var(--white-color);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:20;
    transition:.35s;
    border:1px solid rgba(255,255,255,.25);
}

.plcm-hero-prev{
    left:35px;
}

.plcm-hero-next{
    right:35px;
}

.plcm-hero-prev i,
.plcm-hero-next i{
    font-size:18px;
}

.plcm-hero-prev:hover,
.plcm-hero-next:hover{
    background:var(--primary-color);
    color:var(--white-color);
    transform:translateY(-50%) scale(1.08);
}

/* Mobile */

@media(max-width:768px){

.plcm-hero-prev,
.plcm-hero-next{
    width:42px;
    height:42px;
}

.plcm-hero-prev{
    left:15px;
}

.plcm-hero-next{
    right:15px;
}

.plcm-hero-prev i,
.plcm-hero-next i{
    font-size:14px;
}

}

@media(max-width:991px){

.plcmSwiper .swiper-slide{
height:60vh;
}

.plcm-hero-content h1{
font-size:28px;
}

.plcm-counter{
flex-wrap:wrap;
}

}

@media(max-width:767px){

.plcmSwiper .swiper-slide{
height:55vh;
}

.plcm-hero-content h1{
font-size:25px;
}

.plcm-hero-content p{
font-size:16px;
}

.plcm-btns{
flex-direction:column;
}

.plcm-counter{
display:grid;
grid-template-columns:1fr;
gap:15px;
}

.plcm-counter-box{
min-width:100%;
}

}

/*==================================
        RECRUIT FROM SSJU
==================================*/

.plcm-recruit-section{
    padding:60px 0;
    background:var(--white-color);
}

.plcm-recruit-heading{
    max-width:900px;
    margin-bottom:60px;
}

.plcm-recruit-heading span{
    display:inline-block;
    color:var(--primary-color);
    font-size:15px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:12px;
}

.plcm-recruit-heading h2{
    font-size:30px;
    color:var(--secondary-color);
    font-family:Georgia, serif;
    margin-bottom:20px;
}

.plcm-recruit-heading p{
    color:#666;
    font-size:16px;
    line-height:1.6;
}

.plcm-recruit-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:30px;
}

.plcm-recruit-card{
    text-align:center;
    transition:.35s;
    padding:25px 15px;
}

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

.plcm-recruit-icon{
    width:90px;
    height:90px;
    margin:0 auto 25px;
    border-radius:50%;
    background:rgba(228,119,24,.10);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.35s;
}

.plcm-recruit-card:hover .plcm-recruit-icon{
    background:var(--primary-color);
}

.plcm-recruit-icon i{
    font-size:30px;
    color:var(--primary-color);
    transition:.35s;
}

.plcm-recruit-card:hover .plcm-recruit-icon i{
    color:var(--white-color);
}

.plcm-recruit-card h3{
    color:var(--secondary-color);
    font-size:20px;
    margin-bottom:15px;
    font-family:Georgia, serif;
}

.plcm-recruit-card p{
    color:#666;
    font-size:16px;
    line-height:1.6;
}

.plcm-recruit-btn{
    margin-top:60px;
}

.plcm-recruit-btn a{
    display:inline-block;
    padding:18px 45px;
    background:var(--secondary-color);
    color:var(--white-color);
    text-decoration:none;
    font-weight:600;
    transition:.35s;
}

.plcm-recruit-btn a:hover{
    background:var(--primary-color);
}

@media(max-width:1200px){

.plcm-recruit-grid{
    grid-template-columns:repeat(3,1fr);
}

}

@media(max-width:767px){

.plcm-recruit-grid{
    grid-template-columns:1fr;
}

.plcm-recruit-heading h2{
    font-size:25px;
}

.plcm-recruit-card{
    padding:20px;
}

.plcm-recruit-btn a{
    width:100%;
    text-align:center;
}

}


/*=====================================
      PLACEMENT OVERVIEW
=====================================*/

.plcm-overview-section{
    padding:60px 0;
    background:var(--white-color)4e0;
}

.plcm-overview-content{
    max-width:1150px;
}

.plcm-overview-tag{
    display:inline-block;
    padding:8px 22px;
    background:rgba(228,119,24,.12);
    color:var(--primary-color);
    font-size:14px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    border-radius:30px;
    margin-bottom:20px;
}

.plcm-overview-content h2{
    font-size:30px;
    color:var(--secondary-color);
    font-family:Georgia, serif;
    font-weight:600;
    line-height:1.2;
    margin-bottom:30px;
}

.plcm-overview-content p{
    color:#444;
    font-size:18px;
    line-height:1.6;
    margin-bottom:28px;
}

.plcm-overview-content p:last-child{
    margin-bottom:0;
}

@media(max-width:991px){

.plcm-overview-content h2{
    font-size:28px;
}

.plcm-overview-content p{
    font-size:16px;
}

}

@media(max-width:767px){

.plcm-overview-section{
    padding:40px 0;
}

.plcm-overview-content h2{
    font-size:25px;
}

.plcm-overview-content p{
    font-size:16px;
    line-height:1.6;
}

.plcm-overview-tag{
    font-size:13px;
    letter-spacing:1px;
}

}


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

.plcm-stats-section{
    padding:60px 0;
    background:var(--white-color)4e0;
}

.plcm-stats-head{
    max-width:900px;
    margin-bottom:60px;
}

.plcm-stats-head span{
    display:inline-block;
    color:var(--primary-color);
    font-size:15px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:15px;
}

.plcm-stats-head h2{
    font-size:30px;
    color:var(--secondary-color);
    font-family:Georgia, serif;
    margin-bottom:20px;
}

.plcm-stats-head p{
    font-size:16px;
    color:#666;
    line-height:1.6;
}

.plcm-stats-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:30px;
    margin-bottom:60px;
}

.plcm-stat-card{
    background:var(--white-color);
    padding:45px 20px;
    border-radius:12px;
    text-align:center;
    box-shadow:0 12px 35px rgba(0,0,0,.06);
    transition:.35s;
    border-top:4px solid var(--primary-color);
}

.plcm-stat-card:hover{
    transform:translateY(-10px);
}

.plcm-stat-card h3{
    color:var(--primary-color);
    font-size:25px;
    margin-bottom:15px;
    font-family:Georgia, serif;
    line-height:1;
}

.plcm-stat-card span{
    display:block;
    color:var(--secondary-color);
    font-size:16px;
    font-weight:600;
}

.plcm-brochure-btn a{
    display:inline-flex;
    align-items:center;
    gap:12px;
    background:var(--secondary-color);
    color:var(--white-color);
    padding:18px 38px;
    text-decoration:none;
    font-weight:600;
    transition:.35s;
}

.plcm-brochure-btn a:hover{
    background:var(--primary-color);
}

@media(max-width:1200px){

.plcm-stats-grid{
    grid-template-columns:repeat(3,1fr);
}

}

@media(max-width:767px){

.plcm-stats-head h2{
    font-size:25px;
}

.plcm-stats-grid{
    grid-template-columns:1fr;
}

.plcm-stat-card h3{
    font-size:25px;
}

.plcm-brochure-btn a{
    width:100%;
    justify-content:center;
}

}


/*==================================
    CAREER PREPARATORY PROGRAMME
===================================*/

.plcm-career-section{
    padding:60px 0;
    background:var(--white-color);
}

.plcm-career-wrapper{
    display:grid;
    grid-template-columns:1fr 520px;
    gap:80px;
    align-items:center;
}

.plcm-career-tag{
    display:inline-block;
    padding:8px 20px;
    background:rgba(228,119,24,.12);
    color:var(--primary-color);
    border-radius:30px;
    font-size:14px;
    font-weight:600;
    letter-spacing:1px;
    margin-bottom:20px;
}

.plcm-career-content h2{
    font-size:30px;
    color:var(--secondary-color);
    font-family:Georgia, serif;
    margin-bottom:25px;
}

.plcm-career-content p{
    color:#555;
    font-size:16px;
    line-height:1.6;
    margin-bottom:35px;
}

.plcm-career-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px;
    margin-bottom:40px;
}

.plcm-career-item{
    display:flex;
    gap:15px;
    align-items:flex-start;
}

.plcm-career-item i{
    color:var(--primary-color);
    font-size:20px;
    margin-top:3px;
}

.plcm-career-item span{
    color:#444;
    font-size:16px;
    line-height:1.6;
}

.plcm-career-btn{
    display:inline-block;
    padding:16px 38px;
    background:var(--primary-color);
    color:var(--white-color);
    text-decoration:none;
    font-weight:600;
    transition:.35s;
}

.plcm-career-btn:hover{
    background:var(--secondary-color);
    color:var(--white-color);
}

.plcm-career-image{
    position:relative;
}

.plcm-career-image img{
    width:100%;
    height:400px;
    object-fit:cover;
    border-radius:15px;
    box-shadow:0 25px 50px rgba(0,0,0,.15);
}

.plcm-career-floating{
    position:absolute;
    left:-40px;
    bottom:40px;
    background:var(--white-color);
    padding:25px 35px;
    border-left:5px solid var(--primary-color);
    box-shadow:0 20px 40px rgba(0,0,0,.12);
}

.plcm-career-floating h3{
    color:var(--primary-color);
    font-size:30px;
    margin-bottom:8px;
    font-family:Georgia, serif;
}

.plcm-career-floating span{
    color:var(--secondary-color);
    font-weight:600;
}

@media(max-width:991px){

.plcm-career-wrapper{
    grid-template-columns:1fr;
}

.plcm-career-image img{
    height:350px;
}

.plcm-career-floating{
    left:20px;
    bottom:20px;
}

}

@media(max-width:767px){

.plcm-career-content h2{
    font-size:25px;
}

.plcm-career-list{
    grid-template-columns:1fr;
}

.plcm-career-image img{
    height:300px;
}

.plcm-career-floating{
    position:relative;
    left:auto;
    bottom:auto;
    margin-top:20px;
}

}


/*===================================
     CAREER DEVELOPMENT PROGRAMME
====================================*/

.plcm-program-section{
    padding:60px 0;
    background:var(--white-color)4e0;
}

.plcm-section-title{
    max-width:850px;
    margin:0 auto 60px;
    text-align:center;
}

.plcm-section-title span{
    display:inline-block;
    color:var(--primary-color);
    font-size:14px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:15px;
}

.plcm-section-title h2{
    font-size:30px;
    color:var(--secondary-color);
    font-family:Georgia,serif;
    margin-bottom:20px;
}

.plcm-section-title p{
    color:#666;
    font-size:16px;
    line-height:1.6;
}

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

.plcm-program-card{
    background:var(--white-color);
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    transition:.35s;
}

.plcm-program-card:hover{
    transform:translateY(-10px);
}

.plcm-program-image{
    overflow:hidden;
}

.plcm-program-image img{
    width:100%;
    height:230px;
    object-fit:cover;
    transition:.5s;
}

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

.plcm-program-content{
    padding:30px;
}

.plcm-program-content h3{
    color:var(--secondary-color);
    font-size:25px;
    font-family:Georgia,serif;
    margin-bottom:20px;
    min-height:70px;
}

.plcm-program-content ul{
    margin:0;
    padding:0;
    list-style:none;
}

.plcm-program-content ul li{
    position:relative;
    padding-left:28px;
    margin-bottom:16px;
    color:#555;
    line-height:1.6;
    font-size:16px;
}

.plcm-program-content ul li:before{
    content:"✓";
    position:absolute;
    left:0;
    color:var(--primary-color);
    font-weight:700;
}

.plcm-program-content ul li:last-child{
    margin-bottom:0;
}

@media(max-width:1200px){

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

}

@media(max-width:767px){

.plcm-program-grid{
    grid-template-columns:1fr;
}

.plcm-section-title h2{
    font-size:25px;
}

.plcm-program-content{
    padding:25px;
}

.plcm-program-content h3{
    font-size:20px;
    min-height:auto;
}

}


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

.plcm-recruiters-section{
    padding:60px 0;
    background:var(--white-color);
}

.plcmRecruiterSlider{
    position:relative;
    padding:20px 70px;
}

.plcm-logo-box{
    height:120px;
    /* border:1px solid #e6e6e6; */
    display:flex;
    justify-content:center;
    align-items:center;
    background:var(--white-color);
    transition:.35s;
}

.plcm-logo-box:hover{
    box-shadow:0 18px 40px rgba(0,0,0,.08);
    border-color:var(--primary-color);
}

.plcm-logo-box img{
    max-width:100%;
    max-height:80px;
    object-fit:contain;
    transition:.35s;
    /* filter:grayscale(100%); */
}

.plcm-logo-box:hover img{
    filter:none;
    transform:scale(1.05);
}

.plcm-prev,
.plcm-next{
    width:55px;
    height:55px;
    border-radius:50%;
    background:var(--white-color);
    box-shadow:0 8px 25px rgba(0,0,0,.12);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:20;
    transition:.3s;
}

.plcm-prev{
    left:0;
}

.plcm-next{
    right:0;
}

.plcm-prev:hover,
.plcm-next:hover{
    background:var(--primary-color);
    color:var(--white-color);
}

.plcm-prev i,
.plcm-next i{
    font-size:20px;
}

@media(max-width:991px){

.plcmRecruiterSlider{
padding:20px;
}

.plcm-prev,
.plcm-next{
display:none;
}

}


.plcm-recruiter-speaks{
    padding:60px 0;
    position:relative;
}

.plcm-recruiter-wrapper{
    display:grid;
    grid-template-columns:1fr 42%;
    min-height:400px;
}

.plcm-recruiter-content{
    background:var(--secondary-color);
    color:var(--white-color);
    padding:80px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.plcm-recruiter-tag{
    font-size:30px;
    font-weight:600;
    margin-bottom:40px;
    color:var(--white-color);
}

.plcm-review{
    font-size:18px;
    line-height:1.6;
    margin-bottom:30px;
}

.plcm-recruiter-content h3{
    font-size:25px;
    margin-bottom:15px;
    color:var(--primary-color);
}

.plcm-recruiter-content span{
    font-size:18px;
    opacity:.9;
}

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

.plcm-speaks-prev,
.plcm-speaks-next{

    position:absolute;
    right:40px;
    width:60px;
    height:60px;
    background:var(--secondary-color);
    color:var(--white-color);

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

    z-index:20;
    cursor:pointer;
    transition:.3s;
}

.plcm-speaks-prev{

    top:45%;
}

.plcm-speaks-next{

    top:58%;
    margin-top:10px;
}

.plcm-speaks-prev:hover,
.plcm-speaks-next:hover{

    background:var(--primary-color);
}

.plcm-speaks-prev i,
.plcm-speaks-next i{

    font-size:22px;
}

@media(max-width:991px){

.plcm-recruiter-wrapper{

    grid-template-columns:1fr;
}

.plcm-recruiter-image{

    height:420px;
}

.plcm-recruiter-content{

    padding:50px 35px;
}

.plcm-recruiter-tag{

    font-size:28px;
}

.plcm-review{

    font-size:16px;
}

.plcm-recruiter-content h3{

    font-size:22px;
}

.plcm-speaks-prev,
.plcm-speaks-next{

    width:48px;
    height:48px;
    right:15px;
}

.plcm-speaks-prev{
    top:50%;
}

}


/*=============================
      Internship Section
==============================*/

.plcm-internship-section{

    padding:40px 0;
    background:var(--white-color);
}

.plcm-internship-content{

    padding-right:40px;
}

.plcm-small-title{

    display:inline-block;
    color:var(--primary-color);
    font-size:15px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:15px;
}

.plcm-internship-content h2{

    font-size:30px;
    color:var(--secondary-color);
    margin-bottom:25px;
    font-weight:600;
}

.plcm-internship-content p{

    color:#555;
    line-height:1.6;
    margin-bottom:20px;
    font-size:16px;
}

.plcm-internship-content h4{

    color:var(--secondary-color);
    margin:30px 0 20px;
    font-size:20px;
}

.plcm-internship-list{

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

.plcm-internship-list li{

    position:relative;
    padding-left:32px;
    margin-bottom:16px;
    font-size:16px;
    color:#444;
}

.plcm-internship-list li::before{

    content:"✓";
    position:absolute;
    left:0;
    top:0;
    width:22px;
    height:22px;
    border-radius:50%;
    background:var(--primary-color);
    color:var(--white-color);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
}

.plcm-btn{

    display:inline-block;
    padding:15px 35px;
    background:var(--primary-color);
    color:var(--white-color);
    text-decoration:none;
    border-radius:5px;
    transition:.3s;
    font-weight:600;
}

.plcm-btn:hover{

    background:var(--secondary-color);
    color:var(--white-color);
}

.plcm-internship-image{

    overflow:hidden;
    border-radius:15px;
    box-shadow:0 20px 60px rgba(0,0,0,.12);
}

.plcm-internship-image img{

    width:100%;
    height:450px;
    object-fit:cover;
    transition:.5s;
}

.plcm-internship-image:hover img{

    transform:scale(1.05);
}

/* Responsive */

@media(max-width:991px){

.plcm-internship-content{

padding-right:0;
margin-bottom:40px;
}

.plcm-internship-image img{

height:350px;
}

.plcm-internship-content h2{

font-size:28px;
}

}

@media(max-width:767px){

.plcm-internship-section{

padding:40px 0;
}

.plcm-internship-content h2{

font-size:25px;
}

.plcm-internship-image img{

height:300px;
}

}


/*==========================
        TEAM
==========================*/

.plcm-team-section{

    padding:60px 0;
    background:var(--white-color);

}

.plcm-section-heading{

    margin-bottom:50px;

}

.plcm-section-heading h2{

    font-size:30px;
    color:var(--secondary-color);
    font-weight:600;

}

.plcm-team-card{

    overflow:hidden;
    transition:.4s;
    background:var(--white-color);

}

.plcm-team-image{

    overflow:hidden;
    height:320px;

}

.plcm-team-image img{

    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s;

}

.plcm-team-card:hover img{

    transform:scale(1.08);

}

.plcm-team-info{

    background:var(--secondary-color);
    padding:24px 20px;

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

}

.plcm-team-info h3{

    color:var(--white-color);
    font-size:20px;
    margin-bottom:6px;
    font-weight:600;

}

.plcm-team-info span{

    color:#d9d9d9;
    font-size:15px;

}

.plcm-team-plus{

    width:46px;
    height:46px;

    border:2px solid var(--white-color);
    border-radius:50%;

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

    color:var(--white-color);
    text-decoration:none;
    transition:.35s;

}

.plcm-team-plus:hover{

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

}

.plcm-team-nav{

    display:flex;
    justify-content:flex-end;
    gap:8px;
    margin-top:35px;

}

.plcm-team-prev,
.plcm-team-next{

    width:60px;
    height:60px;

    background:var(--secondary-color);

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

    cursor:pointer;
    transition:.35s;

}

.plcm-team-prev i,
.plcm-team-next i{

    color:var(--white-color);
    font-size:24px;

}

.plcm-team-prev:hover,
.plcm-team-next:hover{

    background:var(--primary-color);

}

@media(max-width:991px){

.plcm-team-image{

height:240px;

}

.plcm-section-heading h2{

font-size:28px;

}

}

@media(max-width:767px){

.plcm-team-image{

height:240px;

}

.plcm-team-info h3{

font-size:19px;

}

.plcm-team-prev,
.plcm-team-next{

width:55px;
height:55px;

}

.plcm-section-heading h2{

font-size:25px;

}

}


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

.plcm-contact-section{

    /* padding:60px 0; */
}

.plcm-contact-content{

    background:var(--secondary-color);
    color:var(--white-color);
    padding:30px 50px;
    height:100%;
}

.plcm-contact-tag{

    color:var(--primary-color);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
    display:block;
    margin-bottom:15px;
}

.plcm-contact-content h2{

    font-size:30px;
    margin-bottom:50px;
    font-weight:600;
}

.plcm-contact-box{

    margin-bottom:45px;
    position:relative;
    padding-left:55px;
}

.plcm-contact-box i{

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

    width:40px;
    height:40px;

    background:var(--primary-color);

    border-radius:50%;

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

    font-size:16px;
}

.plcm-contact-box h4{

    color:var(--white-color);
    margin-bottom:15px;
    font-size:20px;
}

.plcm-contact-box p{

    color:#e8e8e8;
    line-height:1.8;
    margin:0;
    font-size:16px;
}

.plcm-map{

    height:100%;
}

.plcm-map iframe{

    width:100%;
    height:100%;
    min-height:500px;
    border:0;
}

/* Responsive */

@media(max-width:991px){

.plcm-contact-content{

padding:30px 35px;
}

.plcm-map iframe{

min-height:400px;
}

.plcm-contact-content h2{

font-size:28px;
}

}

@media(max-width:767px){

.plcm-contact-content{

padding:20px 25px;
}

.plcm-contact-content h2{

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

.plcm-contact-box{

padding-left:50px;
margin-bottom:30px;
}

.plcm-map iframe{

min-height:300px;
}

}


/*=============================
      PROGRAMME YIF
=============================*/

.prg-yif-section{
    padding:60px 0;
    background:var(--white-color);
}

.prg-yif-content{
    padding-right:70px;
}

.prg-yif-tag{
    display:inline-block;
    padding:10px 22px;
    background:var(--primary-color);
    color:var(--white-color);
    border-radius:40px;
    font-size:14px;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-bottom:25px;
}

.prg-yif-content h2{
    font-size:30px;
    line-height:1.2;
    color:var(--secondary-color);
    margin-bottom:30px;
    font-weight:600;
}

.prg-yif-content p{
    font-size:17px;
    line-height:1.6;
    color:#555;
    margin-bottom:20px;
}

.prg-yif-btn{
    display:inline-block;
    margin-top:20px;
    padding:16px 45px;
    background:var(--primary-color);
    color:var(--white-color);
    text-decoration:none;
    font-weight:600;
    transition:.35s;
}

.prg-yif-btn:hover{
    background:var(--secondary-color);
    color:var(--white-color);
}

.prgYifSlider{
    overflow:hidden;
}

.prgYifSlider img{
    width:100%;
    height:420px;
    object-fit:cover;
    display:block;
}

.prgYifSlider .swiper-pagination{
    position:relative;
    margin-top:30px;
}

.prgYifSlider .swiper-pagination-bullet{
    width:12px;
    height:12px;
    background:#d9c4cb;
    opacity:1;
    margin:0 6px;
    transition:.3s;
}

.prgYifSlider .swiper-pagination-bullet-active{
    background:var(--primary-color);
    width:14px;
    height:14px;
}

@media(max-width:991px){

.prg-yif-content{
    padding-right:0;
    margin-bottom:40px;
}

.prg-yif-content h2{
    font-size:28px;
}

.prgYifSlider img{
    height:320px;
}

}

@media(max-width:767px){

.prg-yif-section{
    padding:40px 0;
}

.prg-yif-content h2{
    font-size:25px;
}

.prg-yif-content p{
    font-size:16px;
    line-height:1.8;
}

.prgYifSlider img{
    height:250px;
}

}


.prg-full-image-section{
    width:100%;
    overflow:hidden;
    line-height:0;
}

.prg-full-image-section img{
    width:100%;
    height:auto;
    max-height:550px;
    display:block;
}


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

.prg-yif-admission-section{

    position:relative;

    /* background:url("assets/images/hero/hero8.png") center center/cover no-repeat; */
    background: var(--white-color)4e0;
    padding: 40px 0 60px;

    overflow:hidden;

}

.prg-yif-overlay{

    position:absolute;
    inset:0;
    background:rgba(255,255,255,.10);

}

.prg-yif-admission-section .container{

    position:relative;
    z-index:2;

}

/*============================*/

.prg-yif-content{

    max-width:1180px;

}

.prg-yif-content h2{

    font-size:30px;
    font-weight:600;
    color:#111;
    margin-bottom:25px;

}

.prg-yif-content p{

    font-size:18px;
    line-height:1.6;
    color:#222;
    margin:0;

}

/*============================*/

.prg-yif-card{

    margin-top:60px;

    background:var(--white-color);

    border-radius:22px;

    padding:45px 55px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

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

}

.prg-yif-card-content{

    flex:1;

}

.prg-yif-card-content h3{

    font-size:25px;

    color:var(--secondary-color);

    margin-bottom:18px;

    font-weight:600;

}

.prg-yif-card-content p{

    font-size:18px;

    color:#555;

    line-height:1.6;

    margin:0;

}

.prg-yif-card-btn{

    flex-shrink:0;

}

.prg-yif-card-btn a{

    display:flex;

    align-items:center;

    justify-content:center;

    width:225px;

    height:55px;

    background:var(--primary-color);

    color:var(--white-color);

    text-decoration:none;

    font-size:18px;

    font-weight:600;

    transition:.35s;

}

.prg-yif-card-btn a:hover{

    background:var(--secondary-color);

    color:var(--white-color);

}


/* Tablet */

@media(max-width:991px){

.prg-yif-admission-section{

    padding:90px 0 120px;

}

.prg-yif-content h2{

    font-size:28px;

}

.prg-yif-content p{

    font-size:16px;

    line-height:1.6;

}

.prg-yif-card{

    flex-direction:column;

    text-align:center;

    padding:35px;

    gap:30px;

}

.prg-yif-card-content h3{

    font-size:22px;

}

.prg-yif-card-content p{

    font-size:16px;

}

}

/* Mobile */

@media(max-width:767px){

.prg-yif-admission-section{

    padding:70px 0 80px;

}

.prg-yif-content h2{

    font-size:25px;

    margin-bottom:20px;

}

.prg-yif-content p{

    font-size:16px;

    line-height:1.6;

}

.prg-yif-card{

    padding:25px 20px;

    border-radius:15px;

}

.prg-yif-card-content h3{

    font-size:20px;

}

.prg-yif-card-content p{

    font-size:15px;

}

.prg-yif-card-btn{

    width:100%;

}

.prg-yif-card-btn a{

    width:100%;

    height:55px;

    font-size:16px;

}

}


/*=========================
LEARNING RESOURCES
==========================*/

.prg-yif-resource-section{

    padding:0px 0 60px;

}

.prg-yif-heading{

    margin-bottom:50px;

}

.prg-yif-heading h2{

    font-size:30px;

    color:var(--secondary-color);

    font-weight:600;

}

.prg-yif-resource-card{

    border:1px solid #d7dff2;

    border-radius:28px;

    padding:40px;

    height:100%;

    transition:.4s;

    background:var(--white-color);

}

.prg-yif-resource-card:hover{

    transform:translateY(-8px);

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

}

.prg-yif-resource-card h3{

    color:var(--secondary-color);

    font-size:25px;

    line-height:1.35;

    margin-bottom:25px;

}

.prg-yif-resource-card p{

    font-size:18px;

    line-height:1.6;

    color:#555;

    margin-bottom:30px;

}

.prg-yif-resource-card a{

    color:var(--primary-color);

    text-decoration:none;

    font-weight:600;

}

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

.prg-yif-cta-section{

    background:#fdf5dd;

    padding:40px 0 0;

}

.prg-yif-cta-btn{

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--primary-color);

    color:var(--white-color);

    text-decoration:none;

    height:60px;

    font-size:18px;

    font-weight:600;

    transition:.35s;

}

.prg-yif-cta-btn:hover{

    background:var(--secondary-color);

    color:var(--white-color);

}

.prg-yif-note{

    text-align:center;

    margin-top:45px;

    color:#666;

    font-size:15px;

}

@media(max-width:991px){

.prg-yif-heading h2{

    font-size:28px;

}

.prg-yif-resource-card{

    padding:30px;

}

.prg-yif-resource-card h3{

    font-size:22px;

}

.prg-yif-resource-card p{

    font-size:16px;

}

.prg-yif-cta-btn{

    height:65px;

    font-size:16px;

}

}

@media(max-width:767px){

.prg-yif-resource-section{

    padding:40px 0;

}

.prg-yif-heading{

    text-align:center;

}

.prg-yif-heading h2{

    font-size:25px;

}

.prg-yif-resource-card{

    padding:25px;

    border-radius:18px;

}

.prg-yif-resource-card h3{

    font-size:20px;

}

.prg-yif-resource-card p{

    font-size:16px;

}

.prg-yif-cta-section{

    padding:30px 0 0;

}

.prg-yif-cta-btn{

    width:100%;

    font-size:17px;

}

.prg-yif-note{

    font-size:13px;

}

}


/*=========================================
POST ASHOKA PATHWAY
=========================================*/

.prg-ug-pathway-section{

    padding:60px 0 0;

}

.prg-ug-heading{

    margin-bottom:45px;

}

.prg-ug-heading h2{

    font-size:30px;

    color:var(--secondary-color);

    margin-bottom:25px;

}

.prg-ug-heading p{

    max-width:1100px;

    font-size:16px;

    line-height:1.6;

    color:#555;

}

/*==============================
TABS
==============================*/

.prg-ug-tabs{

    display:flex;

    margin-bottom:60px;

}

.prg-ug-tab{

    width:50%;

    height:50px;

    border:none;

    background:var(--secondary-color);

    color:var(--white-color);

    font-size:20px;

    font-weight:600;

    cursor:pointer;

    position:relative;

    transition:.35s;

}

.prg-ug-tab.active{

    background:var(--primary-color);

}

.prg-ug-tab.active::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-12px;

    transform:translateX(-50%);

    border-left:14px solid transparent;

    border-right:14px solid transparent;

    border-top:14px solid var(--primary-color);

}

.prg-ug-tab:hover{

    background:var(--primary-color);

}

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

.prg-ug-tab-content{

    display:none;

    animation:fade .45s ease;

}

.prg-ug-tab-content.active{

    display:block;

}

@keyframes fade{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==============================
TYPOGRAPHY
==============================*/

.prg-ug-tab-content h3{

    font-size:30px;

    color:var(--secondary-color);

    margin-bottom:25px;

}

.prg-ug-tab-content p{

    font-size:16px;

    line-height:1.6;

    color:#555;

}

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

.prg-ug-tab-content img{

    width:100%;
    max-height: 450px;
    border-radius:6px;

    margin:25px 0;

}

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

.prg-ug-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 25px;

    border:2px solid var(--secondary-color);

    color:var(--secondary-color);

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.prg-ug-btn:hover{

    background:var(--primary-color);

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

    color:var(--white-color);

}

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

.prg-ug-card{

    height:100%;

}

.prg-ug-card img{

    width:100%;
    max-height: 400px;

    margin-bottom:25px;

}

.prg-ug-card h4{

    font-size:30px;

    color:var(--secondary-color);

    margin-bottom:18px;

}

.prg-ug-card p{

    margin-bottom:20px;

}

.prg-ug-card a{

    color:var(--secondary-color);

    font-weight:600;

    text-decoration:none;

    position:relative;

}

.prg-ug-card a::after{

    content:"\f054";

    font-family:"Font Awesome 6 Free";

    font-weight:900;

    margin-left:10px;

    transition:.3s;

}

.prg-ug-card:hover a::after{

    margin-left:16px;

}

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

@media(max-width:991px){

.prg-ug-pathway-section{

    padding:40px 0;

}

.prg-ug-heading h2{

    font-size:28px;

}

.prg-ug-heading p{

    font-size:16px;

}

.prg-ug-tabs{

    flex-direction:column;

}

.prg-ug-tab{

    width:100%;

}

.prg-ug-tab.active::after{

    display:none;

}

.prg-ug-tab-content h3{

    font-size:28px;

}

.prg-ug-card h4{

    font-size:25px;

}

}

@media(max-width:767px){

.prg-ug-pathway-section{

    padding:40px 0;

}

.prg-ug-heading{

    text-align:center;

}

.prg-ug-heading h2{

    font-size:25px;

}

.prg-ug-heading p{

    font-size:16px;

}

.prg-ug-tab{

    height:60px;

    font-size:16px;

}

.prg-ug-tab-content h3{

    font-size:25px;

}

.prg-ug-tab-content p{

    font-size:16px;

}

.prg-ug-card h4{

    font-size:20px;

}

.prg-ug-btn{

    width:100%;

}

}


/*======================================
FEATURE SECTION
======================================*/

.prg-ug-feature-section{

    padding:60px 0;

}

.prg-ug-feature-card{

    height:100%;

}

.prg-ug-feature-card h2{

    font-size:30px;

    color:var(--secondary-color);

    margin-bottom:35px;

    font-weight:600;

}

.prg-ug-feature-img{

    overflow:hidden;

    margin-bottom:35px;

}

.prg-ug-feature-img img{

    width:100%;

    height:350px;

    object-fit:cover;

    transition:.5s;

}

.prg-ug-feature-card:hover img{

    transform:scale(1.06);

}

.prg-ug-feature-card p{

    font-size:18px;

    line-height:1.6;

    color:#555;

    margin-bottom:30px;

}

.prg-ug-feature-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    color:var(--secondary-color);

    text-decoration:none;

    font-weight:600;

    font-size:18px;

    transition:.35s;

}

.prg-ug-feature-btn i{

    transition:.35s;

}

.prg-ug-feature-btn:hover{

    color:var(--primary-color);

}

.prg-ug-feature-btn:hover i{

    transform:translateX(8px);

}

/*========================
Responsive
========================*/

@media(max-width:991px){

.prg-ug-feature-section{

    padding:40px 0;

}

.prg-ug-feature-card h2{

    font-size:28px;

}

.prg-ug-feature-img img{

    height:300px;

}

.prg-ug-feature-card p{

    font-size:16px;

}

}

@media(max-width:767px){

.prg-ug-feature-section{

    padding:40px 0;

}

.prg-ug-feature-card h2{

    font-size:25px;

    margin-bottom:20px;

}

.prg-ug-feature-img{

    margin-bottom:20px;

}

.prg-ug-feature-img img{

    height:250px;

}

.prg-ug-feature-card p{

    font-size:16px;

    line-height:1.6;

}

.prg-ug-feature-btn{

    font-size:16px;

}

}


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

.prg-ug-blog-section{

    padding:40px 0 60px;

}

.prg-ug-section-heading{

    margin-bottom:45px;

}

.prg-ug-section-heading h2{

    font-size:30px;

    color:var(--secondary-color);

    font-weight:600;

}

/*========================*/

.prg-ug-blog-card{

    height:100%;

    transition:.4s;

}

.prg-ug-blog-img{

    overflow:hidden;

    margin-bottom:25px;

}

.prg-ug-blog-img img{

    width:100%;

    height:320px;

    object-fit:cover;

    transition:.5s;

}

.prg-ug-blog-card:hover img{

    transform:scale(1.08);

}

/*========================*/

.prg-ug-blog-content h3{

    font-size:20px;

    line-height:1.35;

    color:var(--secondary-color);

    margin-bottom:18px;

    transition:.35s;

}

.prg-ug-blog-card:hover h3{

    color:var(--primary-color);

}

.prg-ug-blog-content span{

    display:block;

    color:#888;

    font-size:16px;

    margin-bottom:18px;

}

.prg-ug-blog-content p{

    color:#555;

    font-size:16px;

    line-height:1.6;

    margin-bottom:25px;

}

/*========================*/

.prg-ug-blog-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--secondary-color);

    font-weight:600;

    text-decoration:none;

    transition:.35s;

}

.prg-ug-blog-btn i{

    transition:.35s;

}

.prg-ug-blog-btn:hover{

    color:var(--primary-color);

}

.prg-ug-blog-btn:hover i{

    transform:translateX(8px);

}

/*========================*/

.prg-ug-all-blog-btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    min-width:230px;

    height:50px;

    border:2px solid var(--secondary-color);

    color:var(--secondary-color);

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.prg-ug-all-blog-btn:hover{

    background:var(--primary-color);

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

    color:var(--white-color);

}

/*========================
Responsive
========================*/

@media(max-width:991px){

.prg-ug-blog-section{

    padding:40px 0;

}

.prg-ug-section-heading h2{

    font-size:28px;

}

.prg-ug-blog-img img{

    height:260px;

}

.prg-ug-blog-content h3{

    font-size:20px;

}

.prg-ug-blog-content p{

    font-size:16px;

}

}

@media(max-width:767px){

.prg-ug-blog-section{

    padding:40px 0;

}

.prg-ug-section-heading{

    text-align:center;

}

.prg-ug-section-heading h2{

    font-size:25px;

}

.prg-ug-blog-img img{

    height:220px;

}

.prg-ug-blog-content h3{

    font-size:18px;

}

.prg-ug-blog-content span{

    font-size:15px;

}

.prg-ug-blog-content p{

    font-size:16px;

}

.prg-ug-all-blog-btn{

    width:100%;

}

}


/* visiting programme section  */


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

.vsp-hero-section {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.vsp-hero-swiper {
    width: 100%;
    height: 550px;
}

.vsp-hero-slide {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.vsp-hero-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}


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

.vsp-hero-prev,
.vsp-hero-next {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    /* background: rgba(0, 0, 0, 0.45); */
}

.vsp-hero-prev::after,
.vsp-hero-next::after {
    font-size: 15px;
    font-weight: 700;
    color: var(--white-color);
}


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

.vsp-hero-pagination {
    bottom: 25px !important;
}

.vsp-hero-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    opacity: 1;
    background: var(--white-color);
}

.vsp-hero-pagination .swiper-pagination-bullet-active {
    width: 28px;
    border-radius: 10px;
}


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

@media (max-width: 991px) {

    .vsp-hero-swiper {
        height: 500px;
    }

}

@media (max-width: 767px) {

    .vsp-hero-swiper {
        height: 420px;
    }

    .vsp-hero-prev,
    .vsp-hero-next {
        width: 38px;
        height: 38px;
    }

    .vsp-hero-prev::after,
    .vsp-hero-next::after {
        font-size: 15px;
    }

}

@media (max-width: 575px) {

    .vsp-hero-swiper {
        height: 350px;
    }

    .vsp-hero-prev,
    .vsp-hero-next {
        display: none;
    }

    .vsp-hero-pagination {
        bottom: 15px !important;
    }

}



.vsp-intro-section {
    padding: 50px 0 0px;
    background: var(--white-color);
}

.vsp-intro-section h2 {
    margin-bottom: 25px;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 600;
    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
}

.vsp-intro-section p {
    margin-bottom: 22px;
    font-size: 18px;
    line-height: 1.6;
    color: var(--black-color);
}

@media (max-width: 991px) {

    .vsp-intro-section {
        padding: 45px 0;
    }

    .vsp-intro-section h2 {
        font-size: 28px;
    }

    .vsp-intro-section p {
        font-size: 17px;
        line-height: 1.6;
    }

}

@media (max-width: 767px) {

    .vsp-intro-section {
        padding: 35px 0;
    }

    .vsp-intro-section h2 {
        font-size: 25px;
    }

    .vsp-intro-section p {
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 18px;
    }

}


/* =====================================================
   VSP PROGRAM SECTIONS
===================================================== */

.vsp-program-section {
    padding: 60px 0;
    background: var(--white-color);
}

.vsp-program-section-alt {
    padding-top: 40px;
}


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

.vsp-program-content {
    max-width: 680px;
}

.vsp-program-content h2 {
    margin-bottom: 32px;
    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 600;
}

.vsp-program-content p {
    margin: 0;
    color: var(--black-color);
    font-size: 18px;
    line-height: 1.6;
}


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

.vsp-program-image {
    width: 100%;
    overflow: hidden;
}

.vsp-program-image img {
    width: 100%;
    height: 430px;
    display: block;
    object-fit: cover;
}


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

.vsp-program-buttons {
    display: flex;
    gap: 12px;
    margin-top: 28px;
}

.vsp-program-btn {
    min-width: 240px;
    padding: 18px 25px;
    border: 1px solid var(--secondary-color);
    background: var(--white-color);
    color: var(--secondary-color);
    text-decoration: none;
    text-align: center;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.vsp-program-btn:hover {
    background: var(--secondary-color);
    color: var(--white-color);
}


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

@media (max-width: 991px) {

    .vsp-program-section {
        padding: 40px 0;
    }

    .vsp-program-section-alt {
        padding-top: 20px;
    }

    .vsp-program-content {
        max-width: 100%;
    }

    .vsp-program-content h2 {
        font-size: 28px;
        margin-bottom: 22px;
    }

    .vsp-program-content p {
        font-size: 17px;
        line-height: 1.6;
    }

    .vsp-program-image img {
        height: 400px;
    }

}


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

@media (max-width: 767px) {

    .vsp-program-section {
        padding: 45px 0;
    }

    .vsp-program-content h2 {
        font-size: 25px;
    }

    .vsp-program-content p {
        font-size: 16px;
        line-height: 1.6;
    }

    .vsp-program-image img {
        height: 330px;
    }

    .vsp-program-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .vsp-program-btn {
        width: 100%;
        min-width: auto;
        padding: 15px 20px;
    }

}


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

@media (max-width: 575px) {

    .vsp-program-section {
        padding: 35px 0;
    }

    .vsp-program-content h2 {
        font-size: 25px;
    }

    .vsp-program-image img {
        height: 280px;
    }

}



/* =====================================================
   VSP FACILITIES SECTION
===================================================== */

.vsp-facilities-section {
    padding: 60px 0;
    background: var(--white-color);
}


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

.vsp-facilities-content {
    padding-right: 20px;
}

.vsp-facilities-content h2 {
    margin-bottom: 35px;
    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 600;
}

.vsp-facilities-content ul {
    margin: 0;
    padding-left: 25px;
}

.vsp-facilities-content li {
    margin-bottom: 22px;
    padding-left: 5px;
    color: var(--black-color);
    font-size: 17px;
    line-height: 1.6;
}

.vsp-facilities-content li:last-child {
    margin-bottom: 0;
}

.vsp-facilities-content strong {
    font-weight: 600;
}


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

.vsp-facilities-image {
    width: 100%;
    overflow: hidden;
}

.vsp-facilities-image img {
    width: 100%;
    height: 600px;
    display: block;
    object-fit: cover;
}


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

@media (max-width: 991px) {

    .vsp-facilities-section {
        padding: 50px 0;
    }

    .vsp-facilities-content {
        padding-right: 0;
    }

    .vsp-facilities-content h2 {
        font-size: 28px;
        margin-bottom: 25px;
    }

    .vsp-facilities-content li {
        font-size: 17px;
        line-height: 1.55;
        margin-bottom: 18px;
    }

    .vsp-facilities-image img {
        height: 500px;
    }

}


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

@media (max-width: 767px) {

    .vsp-facilities-section {
        padding: 40px 0;
    }

    .vsp-facilities-content h2 {
        font-size: 25px;
    }

    .vsp-facilities-content ul {
        padding-left: 20px;
    }

    .vsp-facilities-content li {
        font-size: 16px;
        line-height: 1.55;
    }

    .vsp-facilities-image img {
        height: 380px;
    }

}


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

@media (max-width: 575px) {

    .vsp-facilities-section {
        padding: 35px 0;
    }

    .vsp-facilities-content h2 {
        font-size: 25px;
    }

    .vsp-facilities-image img {
        height: 300px;
    }

}


/* =====================================================
   VSP LOCATION SECTION
===================================================== */

.vsp-location-section {
    padding: 60px 0;
    background: var(--white-color);
}


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

.vsp-location-image {
    width: 100%;
    overflow: hidden;
}

.vsp-location-image img {
    width: 100%;
    height: 650px;
    display: block;
    object-fit: cover;
}


/* Top & Bottom Decorative Bars */

.vsp-location-top {
    width: 100%;
    height: 70px;
    background: var(--secondary-color);
}

.vsp-location-bottom {
    width: 100%;
    height: 45px;
    background: var(--primary-color);
}


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

.vsp-location-content {
    padding-top: 0;
}

.vsp-location-content h2 {
    margin: 0 0 35px;
    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 600;
}

.vsp-location-content h3 {
    margin: 28px 0 15px;
    color: var(--black-color);
    font-size: 20px;
    line-height: 1.3;
    font-weight: 500;
}

.vsp-location-content p {
    margin: 0 0 20px;
    color: var(--black-color);
    font-size: 17px;
    line-height: 1.6;
}


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

.vsp-location-btn {
    display: inline-block;
    min-width: 240px;
    margin-top: 10px;
    padding: 17px 25px;
    border: 1px solid var(--secondary-color);
    background: var(--white-color);
    color: var(--secondary-color);
    text-decoration: none;
    text-align: center;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.vsp-location-btn:hover {
    background: var(--secondary-color);
    color: var(--white-color);
}


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

@media (max-width: 991px) {

    .vsp-location-section {
        padding: 50px 0;
    }

    .vsp-location-content h2 {
        font-size: 28px;
        margin-bottom: 25px;
    }

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

    .vsp-location-content p {
        font-size: 17px;
        line-height: 1.6;
    }

    .vsp-location-image img {
        height: 500px;
    }

}


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

@media (max-width: 767px) {

    .vsp-location-section {
        padding: 45px 0;
    }

    .vsp-location-content h2 {
        font-size: 25px;
    }

    .vsp-location-content h3 {
        font-size: 19px;
        margin-top: 25px;
    }

    .vsp-location-content p {
        font-size: 16px;
        line-height: 1.6;
    }

    .vsp-location-image img {
        height: 400px;
    }

    .vsp-location-top {
        height: 45px;
    }

    .vsp-location-bottom {
        height: 30px;
    }

    .vsp-location-btn {
        width: 100%;
    }

}


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

@media (max-width: 575px) {

    .vsp-location-section {
        padding: 35px 0;
    }

    .vsp-location-content h2 {
        font-size: 25px;
    }

    .vsp-location-image img {
        height: 320px;
    }

}


/* =====================================================
   GP GLOBAL EDUCATION SECTION
===================================================== */

.gp-global-section {
    padding: 35px 0 45px;
    background: var(--white-color);
}

.gp-global-content {
    width: 100%;
}


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

.gp-global-content h2 {
    margin: 0 0 28px;
    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 600;
}


/* =====================================================
   PARAGRAPHS
===================================================== */

.gp-global-content p {
    margin: 0 0 25px;
    color: var(--black-color);
    font-size: 17px;
    line-height: 1.6;
    font-weight: 400;
}

.gp-global-focus-title {
    margin-top: 27px !important;
    margin-bottom: 20px !important;
}


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

.gp-global-list {
    margin: 0;
    padding-left: 31px;
}

.gp-global-list li {
    margin-bottom: 20px;
    padding-left: 1px;
    color: var(--black-color);
    font-size: 17px;
    line-height: 1.45;
}

.gp-global-list li strong {
    font-weight: 500;
}


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

@media (max-width: 991px) {

    .gp-global-section {
        padding: 35px 0 45px;
    }

    .gp-global-content h2 {
        font-size: 28px;
        margin-bottom: 24px;
    }

    .gp-global-content p,
    .gp-global-list li {
        font-size: 17px;
        line-height: 1.55;
    }

}


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

@media (max-width: 767px) {

    .gp-global-section {
        padding: 30px 0 40px;
    }

    .gp-global-content h2 {
        font-size: 25px;
        margin-bottom: 20px;
    }

    .gp-global-content p,
    .gp-global-list li {
        font-size: 16px;
        line-height: 1.5;
    }

    .gp-global-list {
        padding-left: 23px;
    }

    .gp-global-list li {
        margin-bottom: 17px;
    }

}


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

@media (max-width: 575px) {

    .gp-global-content h2 {
        font-size: 25px;
    }

    .gp-global-content p,
    .gp-global-list li {
        font-size: 15px;
    }

}


/* =====================================================
   GP STUDY / EXCHANGE SECTIONS
===================================================== */

.gp-study-section {
    padding: 60px 0;
    background: var(--white-color);
}

.gp-study-section-alt {
    padding-top: 25px;
}


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

.gp-study-content {
    max-width: 600px;
}

.gp-study-content h2 {
    margin-bottom: 32px;
    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 600;
}

.gp-study-content p {
    margin: 0;
    color: var(--black-color);
    font-size: 17px;
    line-height: 1.6;
}


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

.gp-study-image {
    width: 100%;
    overflow: hidden;
}

.gp-study-image img {
    width: 100%;
    height: 415px;
    display: block;
    object-fit: cover;
}


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

.gp-study-buttons {
    display: flex;
    gap: 10px;
    margin-top: 28px;
}

.gp-study-btn {
    min-width: 232px;
    padding: 17px 25px;
    border: 1px solid var(--secondary-color);
    background: var(--white-color);
    color: var(--secondary-color);
    text-decoration: none;
    text-align: center;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.gp-study-btn:hover {
    background: var(--secondary-color);
    color: var(--white-color);
}


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

@media (max-width: 991px) {

    .gp-study-section {
        padding: 55px 0;
    }

    .gp-study-section-alt {
        padding-top: 20px;
    }

    .gp-study-content {
        max-width: 100%;
    }

    .gp-study-content h2 {
        font-size: 28px;
        margin-bottom: 24px;
    }

    .gp-study-content p {
        font-size: 17px;
        line-height: 1.6;
    }

    .gp-study-image img {
        height: 380px;
    }

}


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

@media (max-width: 767px) {

    .gp-study-section {
        padding: 45px 0;
    }

    .gp-study-content h2 {
        font-size: 25px;
    }

    .gp-study-content p {
        font-size: 16px;
        line-height: 1.6;
    }

    .gp-study-image img {
        height: 330px;
    }

    .gp-study-buttons {
        flex-direction: column;
    }

    .gp-study-btn {
        width: 100%;
        min-width: auto;
    }

}


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

@media (max-width: 575px) {

    .gp-study-section {
        padding: 35px 0;
    }

    .gp-study-content h2 {
        font-size: 25px;
    }

    .gp-study-image img {
        height: 280px;
    }

}



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

.gp-contact-section {
    padding: 20px 0 40px;
    background: var(--white-color)bea;
}

.gp-contact-content {
    width: 100%;
}


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

.gp-contact-content h2 {
    margin: 0 0 38px;
    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 500;
}


/* =====================================================
   CONTACT ITEM
===================================================== */

.gp-contact-item {
    padding-right: 20px;
}

.gp-contact-item h4 {
    margin: 0 0 15px;
    color: var(--black-color);
    font-size: 18px;
    line-height: 1.4;
    font-weight: 600;
}

.gp-contact-item a {
    color: var(--black-color);
    font-size: 17px;
    line-height: 1.6;
    text-decoration: none;
    word-break: break-word;
}

.gp-contact-item a:hover {
    color: var(--secondary-color);
}


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

@media (max-width: 991px) {

    .gp-contact-section {
        padding: 20px 0 55px;
    }

    .gp-contact-content h2 {
        font-size: 28px;
        margin-bottom: 30px;
    }

    .gp-contact-item h4 {
        font-size: 18px;
    }

    .gp-contact-item a {
        font-size: 17px;
    }

}


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

@media (max-width: 767px) {

    .gp-contact-section {
        padding: 20px 0 45px;
    }

    .gp-contact-content h2 {
        font-size: 25px;
        margin-bottom: 25px;
    }

    .gp-contact-item {
        padding-right: 0;
    }

    .gp-contact-item h4 {
        font-size: 17px;
    }

    .gp-contact-item a {
        font-size: 16px;
    }

}


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

.bio-hero-section {
    width: 100%;
    min-height: 420px;

    display: flex;
    align-items: center;
     border: 0 !important;
    outline: 0 !important;
    position: relative;
    overflow: hidden;

    background: url("../images/ssju/ssju1.jpg") no-repeat center center;
    background-size: cover;

    padding: 80px 0;
}

/* Dark backdrop */
.bio-hero-section::before {
    content: "";
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.55);

    z-index: 0;
}

/* Keep text above backdrop */
.bio-hero-section .container {
    position: relative;
    z-index: 2;
}


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

.bio-hero-content {
    position: relative;
    z-index: 2;
    max-width: 950px;
}

.bio-hero-content h1 {
    margin: 0 0 25px;
    color: var(--white-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 600;
}

.bio-hero-content p {
    max-width: 900px;
    margin: 0;
    color: var(--white-color);
    font-size: 18px;
    line-height: 1.6;
}


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

@media (max-width: 991px) {

    .bio-hero-section {
        min-height: 380px;
        padding: 40px 0;
    }

    .bio-hero-content h1 {
        font-size: 28px;
    }

    .bio-hero-content p {
        font-size: 17px;
        line-height: 1.6;
    }

}


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

@media (max-width: 767px) {

    .bio-hero-section {
        min-height: 350px;
        padding: 40px 0;
    }

    .bio-hero-content h1 {
        font-size: 25px;
    }

    .bio-hero-content p {
        font-size: 16px;
        line-height: 1.6;
    }

}


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

@media (max-width: 575px) {

    .bio-hero-section {
        min-height: 320px;
        padding: 50px 0;
    }

    .bio-hero-content h1 {
        font-size: 25px;
    }

    .bio-hero-content p {
        font-size: 15px;
    }

}



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

.bio-about-section {
    padding: 70px 0 45px;
    background: var(--white-color);
}

.bio-about-content h2 {
    margin: 0 0 30px;
    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 600;
}

.bio-about-content p {
    margin: 0 0 25px;
    color: var(--black-color);
    font-size: 17px;
    line-height: 1.65;
}


/* =====================================================
   PROGRAMME SECTION
===================================================== */

.bio-programme-section {
    padding: 25px 0 80px;
    background: var(--white-color);
}

.bio-programme-heading {
    margin-bottom: 30px;
}

.bio-programme-heading h2 {
    margin: 0;
    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 500;
}


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

.bio-programme-card {
    height: 100%;
    background: var(--white-color);
}

.bio-programme-image {
    width: 100%;
    height: 225px;
    overflow: hidden;
}

.bio-programme-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.bio-programme-card:hover .bio-programme-image img {
    transform: scale(1.04);
}


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

.bio-programme-content {
    padding-top: 20px;
}

.bio-programme-content h3 {
    margin: 0 0 15px;
    color: var(--black-color);
    font-size: 22px;
    line-height: 1.3;
    font-weight: 600;
}

.bio-programme-content p {
    margin: 0 0 18px;
    color: var(--black-color);
    font-size: 17px;
    line-height: 1.55;
}


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

.bio-programme-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--secondary-color);
    text-decoration: none;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.bio-programme-btn i {
    font-size: 13px;
    transition: transform 0.3s ease;
}

.bio-programme-btn:hover {
    color: var(--primary-color);
}

.bio-programme-btn:hover i {
    transform: translateX(5px);
}


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

@media (max-width: 991px) {

    .bio-about-section {
        padding: 55px 0 35px;
    }

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

    .bio-about-content p {
        font-size: 17px;
        line-height: 1.55;
    }

    .bio-programme-heading h2 {
        font-size: 23px;
    }

}


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

@media (max-width: 767px) {

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

    .bio-about-content h2 {
        font-size: 25px;
    }

    .bio-about-content p {
        font-size: 16px;
        line-height: 1.6;
    }

    .bio-programme-section {
        padding: 20px 0 50px;
    }

    .bio-programme-heading h2 {
        font-size: 20px;
    }

    .bio-programme-image {
        height: 240px;
    }

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

    .bio-programme-content p {
        font-size: 16px;
    }

}


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

@media (max-width: 575px) {

    .bio-about-content h2 {
        font-size: 25px;
    }

    .bio-programme-heading h2 {
        font-size: 20px;
    }

    .bio-programme-image {
        height: 220px;
    }

}


/* =====================================================
   BIOLOGY FACULTY SECTION
===================================================== */

.bio-faculty-section {
    padding: 65px 0 70px;
    background: var(--white-color);
}

.bio-faculty-section > .container-fluid {
    padding-left: 4.5%;
    padding-right: 4.5%;
}


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

.bio-faculty-heading {
    margin-bottom: 65px;
}

.bio-faculty-heading h2 {
    margin: 0;
    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 600;
}


/* =====================================================
   TABS
===================================================== */

.bio-faculty-tabs {
    display: flex;
    gap: 25px;
    margin-bottom: 48px;
}

.bio-faculty-tab {
    position: relative;

    width: 350px;
    height: 70px;

    border: none;
    outline: none;

    background: var(--secondary-color);
    color: var(--white-color);

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

    cursor: pointer;

    transition: all 0.3s ease;
}

.bio-faculty-tab-active {
    background: var(--primary-color);
}

.bio-faculty-tab-active::after {
    content: "";

    position: absolute;

    bottom: -17px;
    left: 50%;

    transform: translateX(-50%);

    width: 0;
    height: 0;

    border-left: 17px solid transparent;
    border-right: 17px solid transparent;
    border-top: 17px solid var(--primary-color);
}


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

.bio-faculty-slider-wrap {
    display: none;
    position: relative;
}

.bio-faculty-slider-active {
    display: block;
}

.bio-faculty-swiper {
    width: 100%;
    overflow: hidden;
}


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

.bio-faculty-card {
    width: 100%;
    background: var(--secondary-color);
    overflow: hidden;
}

.bio-faculty-image {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.bio-faculty-image > img {
    width: 100%;
    height: 100%;
    display: block;

    object-fit: cover;

    transition: transform 0.5s ease;
}


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

.bio-faculty-bottom {
    min-height: 88px;

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

    padding: 18px 20px;

    background: var(--secondary-color);
}

.bio-faculty-bottom h3 {
    margin: 0;

    color: var(--white-color);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 600;
}


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

.bio-faculty-plus {
    flex: 0 0 auto;

    width: 38px;
    height: 38px;

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

    border: 1px solid var(--white-color);
    border-radius: 50%;

    background: transparent;
    color: var(--white-color);

    cursor: pointer;
}

.bio-faculty-plus i {
    font-size: 16px;
}


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

.bio-faculty-overlay {
    position: absolute;

    inset: 0;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    padding: 28px 20px;

    background: rgba(6, 40, 79, 0.91);

    color: var(--white-color);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
}

.bio-faculty-card:hover .bio-faculty-overlay {
    opacity: 1;
    visibility: visible;
}

.bio-faculty-card:hover .bio-faculty-image > img {
    transform: scale(1.05);
}


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

.bio-faculty-overlay-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;
}

.bio-faculty-overlay-top h3 {
    margin: 0;

    color: var(--white-color);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
    line-height: 1.3;
    font-weight: 600;
}


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

.bio-faculty-info {
    margin-top: 22px;
}

.bio-faculty-info p {
    margin: 0 0 18px;

    color: var(--white-color);

    font-size: 18px;
    line-height: 1.65;
}


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

.bio-faculty-navigation {
    display: flex;
    justify-content: flex-end;
    gap: 6px;

    margin-top: 18px;
}

.bio-faculty-prev,
.bio-faculty-next {
    width: 70px;
    height: 70px;

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

    border: none;

    background: var(--secondary-color);
    color: var(--white-color);

    cursor: pointer;

    transition: all 0.3s ease;
}

.bio-faculty-prev:hover,
.bio-faculty-next:hover {
    background: var(--primary-color);
}

.bio-faculty-prev i,
.bio-faculty-next i {
    font-size: 25px;
}


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

@media (max-width: 1199px) {

    .bio-faculty-section > .container-fluid {
        padding-left: 3%;
        padding-right: 3%;
    }

    .bio-faculty-tab {
        width: 340px;
        font-size: 20px;
    }

    .bio-faculty-image {
        height: 280px;
    }

}


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

@media (max-width: 767px) {

    .bio-faculty-section {
        padding: 45px 0 55px;
    }

    .bio-faculty-heading {
        margin-bottom: 35px;
    }

    .bio-faculty-heading h2 {
        font-size: 25px;
    }

    .bio-faculty-tabs {
        gap: 10px;
        margin-bottom: 40px;
    }

    .bio-faculty-tab {
        width: 50%;
        height: 58px;
        font-size: 16px;
    }

    .bio-faculty-tab-active::after {
        bottom: -12px;
        border-left-width: 12px;
        border-right-width: 12px;
        border-top-width: 12px;
    }

    .bio-faculty-image {
        height: 280px;
    }

    .bio-faculty-bottom {
        min-height: 75px;
        padding: 14px 16px;
    }

    .bio-faculty-bottom h3 {
        font-size: 18px;
    }

    .bio-faculty-navigation {
        margin-top: 15px;
    }

    .bio-faculty-prev,
    .bio-faculty-next {
        width: 55px;
        height: 55px;
    }

}


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

@media (max-width: 575px) {

    .bio-faculty-section > .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }

    .bio-faculty-heading h2 {
        font-size: 25px;
    }

    .bio-faculty-tab {
        height: 54px;
        font-size: 14px;
    }

    .bio-faculty-image {
        height: 280px;
    }

    .bio-faculty-overlay {
        padding: 22px 17px;
    }

    .bio-faculty-overlay-top h3 {
        font-size: 20px;
    }

    .bio-faculty-info p {
        font-size: 16px;
    }

}


/* =====================================================
   BIOLOGY RESEARCH SECTION
===================================================== */

.bio-research-section {
    width: 100%;
    padding: 0;
}

.bio-research-section .row {
    align-items: stretch;
}


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

.bio-research-image {
    width: 100%;
    height: 100%;
    min-height: 500px;
    overflow: hidden;
}

.bio-research-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}


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

.bio-research-content {
    width: 100%;
    height: 100%;
    min-height: 550px;

    background: var(--secondary-color);

    padding: 55px 60px;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.bio-research-content h2 {
    margin: 0 0 20px;

    color: var(--white-color);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 30px;
    line-height: 1.2;
    font-weight: 500;
}

.bio-research-content p {
    margin: 0 0 28px;

    color: var(--white-color);

    font-size: 17px;
    line-height: 1.6;

    max-width: 850px;
}


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

.bio-research-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 250px;
    min-height: 68px;

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

    color: var(--white-color);
    text-decoration: none;

    font-family: Georgia, "Times New Roman", serif;

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

    transition: all 0.3s ease;
}

.bio-research-btn:hover {
    background: var(--white-color);
    color: var(--primary-color);
}


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

@media (max-width: 991px) {

    .bio-research-image,
    .bio-research-content {
        min-height: 450px;
    }

    .bio-research-content {
        padding: 45px 40px;
    }

    .bio-research-content h2 {
        font-size: 28px;
    }

    .bio-research-content p {
        font-size: 17px;
        line-height: 1.55;
    }

}


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

@media (max-width: 767px) {

    .bio-research-image {
        height: 350px;
        min-height: 350px;
    }

    .bio-research-content {
        min-height: auto;
        padding: 40px 25px;
    }

    .bio-research-content h2 {
        font-size: 25px;
    }

    .bio-research-content p {
        font-size: 16px;
        line-height: 1.6;
    }

    .bio-research-btn {
        width: 210px;
        min-height: 60px;
    }

}


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

.bio-research-heading {
    padding: 45px 0 35px;
}

.bio-research-heading h2 {
    margin: 0;
    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    font-weight: 500;
}


/* =====================================================
   RESEARCH TABS
===================================================== */

.bio-research-tabs {
    display: flex;
    align-items: center;
    gap: 30px;

    border-bottom: 1px solid #d8d8d8;

    margin-bottom: 38px;
}

.bio-research-tab {
    position: relative;

    border: none;
    background: transparent;

    padding: 0 0 14px;

    color: #999999;

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

    cursor: pointer;

    transition: all 0.3s ease;
}

.bio-research-tab:hover {
    color: var(--secondary-color);
}

.bio-research-tab-active {
    color: var(--black-color);
}

/* .bio-research-tab-active::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -1px;

    height: 3px;

    background: var(--secondary-color);
} */


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

.bio-research-tab-content {
    display: none;
}

.bio-research-tab-content.bio-research-tab-active {
    display: block;
}


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

.bio-research-image {
    width: 100%;
    height: 100%;
    min-height: 500px;

    overflow: hidden;
}

.bio-research-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


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

.bio-research-content {
    width: 100%;
    height: 100%;
    min-height: 550px;

    padding: 55px 60px;

    background: var(--secondary-color);

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.bio-research-content h2 {
    margin: 0 0 20px;

    color: var(--white-color);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 30px;
    line-height: 1.2;
    font-weight: 500;
}

.bio-research-content p {
    max-width: 850px;

    margin: 0 0 28px;

    color: var(--white-color);

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


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

.bio-research-btn {
    width: 250px;
    min-height: 68px;

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

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

    color: var(--white-color);

    text-decoration: none;

    font-family: Georgia, "Times New Roman", serif;

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

    transition: all 0.3s ease;
}

.bio-research-btn:hover {
    background: var(--white-color);
    color: var(--primary-color);
}


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

@media (max-width: 991px) {

    .bio-research-tabs {
        gap: 22px;
        overflow-x: auto;
        white-space: nowrap;
    }

    .bio-research-tab {
        font-size: 18px;
        flex-shrink: 0;
    }

    .bio-research-image {
        min-height: 420px;
    }

    .bio-research-content {
        min-height: 420px;
        padding: 45px 40px;
    }

    .bio-research-content h2 {
        font-size: 28px;
    }

    .bio-research-content p {
        font-size: 17px;
    }

}


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

@media (max-width: 767px) {

    .bio-research-heading {
        padding: 40px 0 25px;
    }

    .bio-research-heading h2 {
        font-size: 25px;
    }

    .bio-research-tabs {
        gap: 25px;
        margin-bottom: 25px;
    }

    .bio-research-tab {
        font-size: 16px;
    }

    .bio-research-image {
        min-height: 320px;
        height: 320px;
    }

    .bio-research-content {
        min-height: auto;
        padding: 35px 25px;
    }

    .bio-research-content h2 {
        font-size: 25px;
    }

    .bio-research-content p {
        font-size: 16px;
        line-height: 1.6;
    }

    .bio-research-btn {
        width: 210px;
        min-height: 58px;
    }

}



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

.bio-contact-section {
    padding: 20px 0 18px;
    background: #fffbea;
}

.bio-contact-heading h2 {
    margin: 0 0 18px;

    color: var(--secondary-color);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 25px;
    line-height: 1.2;
    font-weight: 500;
}

.bio-contact-heading p {
    margin: 0;

    color: var(--black-color);

    font-size: 17px;
    line-height: 1.6;
    font-weight: 600;
}


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

.bio-contact-grid {
    margin-top: 42px;
    row-gap: 45px;
}

.bio-contact-item h4 {
    margin: 0 0 12px;

    color: var(--secondary-color);

    font-size: 18px;
    line-height: 1.4;
    font-weight: 400;
}

.bio-contact-item a {
    color: var(--black-color);

    font-size: 16px;
    line-height: 1.5;

    text-decoration: none;

    transition: color 0.3s ease;
}

.bio-contact-item a:hover {
    color: var(--primary-color);
}


/* =====================================================
   HANDBOOK SECTION
===================================================== */

.bio-handbook-section {
    padding: 52px 0 65px;

    background: var(--white-color);
}

.bio-handbook-box {
    min-height: 100px;

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

    padding: 20px 50px;

    background: var(--white-color);

    border: 1px solid #eeeeee;

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

.bio-handbook-title h2 {
    margin: 0;

    color: var(--black-color);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 28px;
    line-height: 1.3;
    font-weight: 500;
}

.bio-handbook-action {
    flex-shrink: 0;
}

.bio-handbook-btn {
    width: 230px;
    height: 60px;

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

    background: var(--secondary-color);

    color: var(--white-color);

    text-decoration: none;

    font-family: Georgia, "Times New Roman", serif;

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

    transition: all 0.3s ease;
}

.bio-handbook-btn:hover {
    background: var(--primary-color);
    color: var(--white-color);
}


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

@media (max-width: 991px) {

    .bio-contact-heading h2 {
        font-size: 23px;
    }

    .bio-contact-grid {
        row-gap: 35px;
    }

    .bio-handbook-box {
        padding: 20px 35px;
    }

    .bio-handbook-title h2 {
        font-size: 25px;
    }

    .bio-handbook-btn {
        width: 210px;
    }

}


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

@media (max-width: 767px) {

    .bio-contact-section {
        padding: 40px 0 35px;
    }

    .bio-contact-heading h2 {
        font-size: 21px;
    }

    .bio-contact-heading p {
        font-size: 16px;
    }

    .bio-contact-grid {
        margin-top: 30px;
        row-gap: 28px;
    }

    .bio-contact-item h4 {
        font-size: 16px;
    }

    .bio-contact-item a {
        font-size: 15px;
    }


    /* Handbook */

    .bio-handbook-section {
        padding: 35px 0 45px;
    }

    .bio-handbook-box {
        min-height: auto;

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

        gap: 25px;

        padding: 20px 25px;
    }

    .bio-handbook-title h2 {
        font-size: 22px;
    }

    .bio-handbook-btn {
        width: 200px;
        height: 60px;
    }

}


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

@media (max-width: 575px) {

    .bio-contact-heading h2 {
        font-size: 20px;
    }

    .bio-handbook-title h2 {
        font-size: 20px;
    }

}

/* =====================================================
   COMPUTER SCIENCE CENTRES & LABS
===================================================== */

.prcs-section {
    padding: 10px 0 70px;
    background: var(--white-color);
    overflow: hidden;
}

.prcs-heading {
    margin-bottom: 30px;
}

.prcs-heading h2 {
    margin: 0;
    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 42px;
    line-height: 1.2;
    font-weight: 500;
}


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

.prcs-slider {
    width: 100%;
    overflow: hidden;
}

.prcs-track {
    display: flex;
    gap: 12px;
    transition: transform 0.5s ease;
    will-change: transform;
}

.prcs-slide {
    flex: 0 0 calc(25% - 9px);
    min-width: 0;
}


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

.prcs-card {
    height: 100%;
    background: var(--white-color);
}

.prcs-image {
    width: 100%;
    height: 228px;
    overflow: hidden;
}

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

.prcs-card:hover .prcs-image img {
    transform: scale(1.04);
}


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

.prcs-content {
    padding-top: 20px;
}

.prcs-content h3 {
    margin: 0 0 18px;
    color: #111111;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 600;
}

.prcs-content p {
    margin: 0 0 20px;
    color: #222222;
    font-size: 17px;
    line-height: 1.5;
}


/* =====================================================
   READ MORE
===================================================== */

.prcs-read-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: var(--secondary-color);
    text-decoration: none;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-weight: 700;

    transition: all 0.3s ease;
}

.prcs-read-more i {
    font-size: 14px;
    transition: transform 0.3s ease;
}

.prcs-read-more:hover {
    color: var(--primary-color);
}

.prcs-read-more:hover i {
    transform: translateX(5px);
}


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

.prcs-navigation {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    margin-top: 20px;
}

.prcs-navigation button {
    width: 68px;
    height: 68px;

    border: none;
    background: var(--secondary-color);
    color: var(--white-color);

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

    cursor: pointer;
    transition: background 0.3s ease;
}

.prcs-navigation button:hover {
    background: var(--primary-color);
}

.prcs-navigation button i {
    font-size: 24px;
}


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

@media (max-width: 1199px) {

    .prcs-slide {
        flex: 0 0 calc(33.333% - 8px);
    }

    .prcs-heading h2 {
        font-size: 38px;
    }

    .prcs-content h3 {
        font-size: 19px;
    }

}


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

@media (max-width: 767px) {

    .prcs-section {
        padding: 10px 0 50px;
    }

    .prcs-heading h2 {
        font-size: 32px;
    }

    .prcs-slide {
        flex: 0 0 100%;
    }

    .prcs-image {
        height: 240px;
    }

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

    .prcs-content p {
        font-size: 16px;
    }

    .prcs-navigation button {
        width: 55px;
        height: 55px;
    }

}


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

@media (max-width: 575px) {

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

    .prcs-image {
        height: 220px;
    }

}


/* ssju global pages  */

.glob-research-section {
    padding: 40px 0;
    background:  var(--white-color);
}

.glob-research-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.glob-research-content h2 {
    font-size: 30px;
    line-height: 1.2;
    margin-bottom: 30px;
    color: var(--secondary-color);
}

.glob-research-content p {
    font-size: 17px;
    line-height: 1.6;
    color: #222;
    margin-bottom: 30px;
}

.glob-research-image {
    width: 100%;
    overflow: hidden;
}

.glob-research-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
}

.glob-research-btn {
    display: inline-block;
    padding: 15px 40px;
    border: 1px solid var(--secondary-color);
    color: var(--secondary-color);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.glob-research-btn:hover {
    background: var(--secondary-color);
    color: var(--white-color);
}


/* Responsive */

@media (max-width: 991px) {

    .glob-research-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .glob-research-content h2 {
        font-size: 28px;
    }

    .glob-research-image img {
        height: 350px;
    }

}

@media (max-width: 576px) {

    .glob-research-section {
        padding: 50px 0;
    }

    .glob-research-content h2 {
        font-size: 25px;
    }

    .glob-research-content p {
        font-size: 16px;
        line-height: 1.6;
    }

    .glob-research-image img {
        height: 280px;
    }

}

@media (max-width: 991px) {

    .glob-research-grid {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    /* Image 1 */
    .glob-research-grid > .glob-research-content:nth-child(1) {
        order: 2;
    }

    .glob-research-grid > .glob-research-image:nth-child(2) {
        order: 1;
    }

    /* Image 2 */
    .glob-research-grid > .glob-research-image:nth-child(3) {
        order: 3;
    }

    /* Content 2 */
    .glob-research-grid > .glob-research-content:nth-child(4) {
        order: 4;
    }

}



/* =========================================
   DIMENSIONS SECTION
========================================= */

.glob-dimensions-section {
    width: 100%;
    padding: 10px 0 80px;
    background: var(--white-color);
}

.glob-dimensions-container {
    width: 100%;
    max-width: 1660px;
    margin: 0 auto;
    padding: 0 68px;

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

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

.glob-dimensions-content {
    padding-top: 2px;
}

.glob-dimensions-content h2 {
    margin: 0 0 8px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 500;
    color: var(--secondary-color);
}

.glob-dimensions-content p {
    margin: 0 0 25px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 1.5;
    color: var(--black-color);
}

.glob-dimensions-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 220px;
    height: 60px;
    margin-top: 8px;

    padding: 0 35px;

    background: var(--secondary-color);
    border: 1px solid var(--secondary-color);

    color: var(--white-color);
    text-decoration: none;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-weight: 600;

    transition: all 0.3s ease;
}

.glob-dimensions-btn:hover {
    background: transparent;
    color: var(--secondary-color);
}

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

.glob-dimensions-image {
    width: 100%;
    overflow: hidden;
}

.glob-dimensions-image img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: cover;
}

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

@media (max-width: 991px) {

    .glob-dimensions-section {
        padding: 20px 0 60px;
    }

    .glob-dimensions-container {
        padding: 0 35px;
        grid-template-columns: 1fr;
        gap: 35px;
    }

    /* Image first on mobile/tablet */
    .glob-dimensions-image {
        order: 1;
    }

    .glob-dimensions-content {
        order: 2;
    }

    .glob-dimensions-content h2 {
        font-size: 28px;
    }

    .glob-dimensions-content p {
        font-size: 18px;
        line-height: 1.65;
    }
}

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

@media (max-width: 576px) {

    .glob-dimensions-section {
        padding: 15px 0 50px;
    }

    .glob-dimensions-container {
        padding: 0 20px;
        gap: 28px;
    }

    .glob-dimensions-content h2 {
        font-size: 25px;
        line-height: 1.25;
        margin-bottom: 12px;
    }

    .glob-dimensions-content p {
        font-size: 16px;
        line-height: 1.65;
        margin-bottom: 20px;
    }

    .glob-dimensions-btn {
        width: 100%;
        min-width: auto;
        height: 58px;
        font-size: 17px;
    }
}


/* =========================================
   Collaborative Research Partnership
   ========================================= */

.rep-research-section {
    width: 100%;
    padding: 60px 0;
    background: #fff;
}

/* .rep-research-container {
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
} */

/* Heading */
.rep-research-heading {
    margin-bottom: 40px;
}

.rep-research-heading h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    font-weight: 500;
    line-height: 1.2;
    color:  var(--secondary-color);
    margin: 0 0 18px;
}

.rep-research-heading h4 {
    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #111;
    margin: 0 0 12px;
}

.rep-research-heading p {
    font-family: Arial, sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: #111;
    margin: 0;
}

/* Research Table */
.rep-research-table {
    width: 100%;
    border: 1px solid #222;
}

/* Each Row */
.rep-research-row {
    display: grid;
    grid-template-columns: 28% 72%;
    width: 100%;
    border-bottom: 1px solid #222;
}

.rep-research-row:last-child {
    border-bottom: none;
}

/* Image Column */
.rep-research-image {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border-right: 1px solid #222;
    min-height: 215px;
}

.rep-research-image img {
    width: 100%;
    max-width: 340px;
    height: 195px;
    object-fit: contain;
    display: block;
}

/* Content Column */
.rep-research-content {
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.rep-research-content h4 {
    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #111;
    margin: 0 0 8px;
}

.rep-research-content p {
    font-family: Arial, sans-serif;
    font-size: 17px;
    line-height: 1.55;
    color: #111;
    margin: 0;
}


/* =========================================
   Tablet
   ========================================= */

@media (max-width: 991px) {

    .rep-research-section {
        padding: 55px 0;
    }

    /* .rep-research-container {
        width: 92%;
    } */

    .rep-research-heading h2 {
        font-size: 28px;
    }

    .rep-research-heading p {
        font-size: 17px;
    }

    .rep-research-row {
        grid-template-columns: 32% 68%;
    }

    .rep-research-image {
        min-height: 190px;
    }

    .rep-research-image img {
        height: 170px;
    }

    .rep-research-content {
        padding: 20px;
    }

    .rep-research-content h4 {
        font-size: 17px;
    }

    .rep-research-content p {
        font-size: 16px;
        line-height: 1.65;
    }
}


/* =========================================
   Mobile
   ========================================= */

@media (max-width: 767px) {

    .rep-research-section {
        padding: 40px 0;
    }

    /* .rep-research-container {
        width: 92%;
    } */

    .rep-research-heading {
        margin-bottom: 25px;
    }

    .rep-research-heading h2 {
        font-size: 25px;
        line-height: 1.3;
    }

    .rep-research-heading h4 {
        font-size: 17px;
    }

    .rep-research-heading p {
        font-size: 16px;
        line-height: 1.6;
    }

    /*
       Mobile layout:
       Image
       Content
       Image
       Content
    */

    .rep-research-row {
        display: flex;
        flex-direction: column;
    }

    .rep-research-image {
        width: 100%;
        min-height: auto;
        padding: 15px;
        border-right: none;
        border-bottom: 1px solid #222;
    }

    .rep-research-image img {
        width: 100%;
        max-width: 100%;
        height: 200px;
        object-fit: contain;
    }

    .rep-research-content {
        width: 100%;
        padding: 20px;
        border-bottom: none;
    }

    .rep-research-content h4 {
        font-size: 18px;
        line-height: 1.4;
        margin-bottom: 8px;
    }

    .rep-research-content p {
        font-size: 15px;
        line-height: 1.65;
    }
}


/* =========================================
   Small Mobile
   ========================================= */

@media (max-width: 480px) {

    /* .rep-research-container {
        width: 94%;
    } */

    .rep-research-heading h2 {
        font-size: 25px;
    }

    .rep-research-heading h4 {
        font-size: 17px;
    }

    .rep-research-heading p {
        font-size: 15px;
    }

    .rep-research-image {
        padding: 12px;
    }

    .rep-research-image img {
        height: 170px;
    }

    .rep-research-content {
        padding: 18px 15px;
    }

    .rep-research-content h4 {
        font-size: 17px;
    }

    .rep-research-content p {
        font-size: 14px;
        line-height: 1.6;
    }
}


/* =========================================
   International Research Section
   ========================================= */

.erasmus-section {
    width: 100%;
    padding: 45px 0;
    background: #fff;
}

.erasmus-section .container {
    max-width: 1400px;
    width: 90%;
    margin: 0 auto;
}

.erasmus-content {
    margin-bottom: 28px;
}

.erasmus-content:last-child {
    margin-bottom: 0;
}

.erasmus-content h4 {
    margin: 0 0 12px;
    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    color: #111;
}

.erasmus-content p {
    margin: 0 0 12px;
    font-family: Arial, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: #111;
}

.erasmus-content ol {
    margin: 12px 0 22px;
    padding-left: 28px;
}

.erasmus-content ol li {
    padding-left: 2px;
    margin-bottom: 14px;
    font-family: Arial, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: #111;
}


/* =========================================
   Tablet
   ========================================= */

@media (max-width: 991px) {

    .erasmus-section {
        padding: 40px 0;
    }

    .erasmus-section .container {
        width: 92%;
    }

    .erasmus-content h4 {
        font-size: 19px;
    }

    .erasmus-content p,
    .erasmus-content ol li {
        font-size: 17px;
    }
}


/* =========================================
   Mobile
   ========================================= */

@media (max-width: 767px) {

    .erasmus-section {
        padding: 30px 0;
    }

    /* .erasmus-section .container {
        width: 92%;
    } */

    .erasmus-content {
        margin-bottom: 25px;
    }

    .erasmus-content h4 {
        font-size: 18px;
        line-height: 1.4;
    }

    .erasmus-content p,
    .erasmus-content ol li {
        font-size: 15px;
        line-height: 1.7;
    }

    .erasmus-content ol {
        padding-left: 24px;
    }

    .erasmus-content ol li {
        margin-bottom: 12px;
    }
}


/* =========================================
   Building Research Capabilities
   Prefix: brc-
   ========================================= */

.brc-section {
    width: 100%;
    padding: 60px 0 50px;
    background: #ffffff;
}

/* .brc-section .container {
    max-width: 1400px;
    width: 90%;
    margin: 0 auto;
} */


/* Main Heading */

.brc-heading {
    margin-bottom: 14px;
}

.brc-heading h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--secondary-color);
}


/* Content */

.brc-content {
    margin-bottom: 48px;
}

.brc-content h4 {
    margin: 0 0 12px;
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    color: #111111;
}

.brc-content h5 {
    margin: 0 0 14px;
    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 400;
    font-style: italic;
    line-height: 1.5;
    color: #111111;
}

.brc-content p {
    margin: 0 0 12px;
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    color: #111111;
}

.brc-content p:last-child {
    margin-bottom: 0;
}

.brc-content a {
    color: var(--secondary-color);
    text-decoration: none;
}

.brc-content a:hover {
    text-decoration: underline;
}


/* Research Facility */

.brc-facility {
    margin-bottom: 10px;
}


/* Image Gallery */

.brc-image-wrapper {
    width: 100%;
    margin-top: 5px;
    overflow: hidden;
}

.brc-image {
    width: 100%;
    height: 400px;
    overflow: hidden;
}

.brc-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


/* =========================================
   Tablet
   ========================================= */

@media (max-width: 991px) {

    .brc-section {
        padding: 10px 0 40px;
    }

    .brc-section .container {
        width: 92%;
    }

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

    .brc-content {
        margin-bottom: 35px;
    }

    .brc-content h4 {
        font-size: 17px;
    }

    .brc-content h5 {
        font-size: 16px;
    }

    .brc-content p {
        font-size: 15px;
        line-height: 1.55;
    }

    .brc-image {
        height: 320px;
    }
}


/* =========================================
   Mobile
   ========================================= */

@media (max-width: 767px) {

    .brc-section {
        padding: 20px 0 35px;
    }

    /* .brc-section .container {
        width: 92%;
    } */

    .brc-heading {
        margin-bottom: 15px;
    }

    .brc-heading h2 {
        font-size: 25px;
    }

    .brc-content {
        margin-bottom: 30px;
    }

    .brc-content h4 {
        font-size: 17px;
    }

    .brc-content h5 {
        font-size: 16px;
    }

    .brc-content p {
        font-size: 15px;
        line-height: 1.6;
    }

    .brc-image {
        height: 250px;
        margin-bottom: 3px;
    }

    .brc-image img {
        object-fit: cover;
    }

}


/* =========================================
   Professional Course Section
   Prefix: brc2-
   ========================================= */

.brc2-section {
    width: 100%;
    padding: 40px 0 50px;
    background: #ffffff;
}

/* .brc2-section .container {
    max-width: 1400px;
    width: 92%;
    margin: 0 auto;
} */


/* Content */

.brc2-content {
    width: 100%;
    margin-bottom: 18px;
}

.brc2-content h4 {
    margin: 0 0 16px;
    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    color: #111111;
}

.brc2-content h5 {
    margin: 0 0 18px;
    font-family: Arial, sans-serif;
    font-size: 19px;
    font-weight: 400;
    font-style: italic;
    line-height: 1.5;
    color: #111111;
}

.brc2-content p {
    margin: 0 0 14px;
    font-family: Arial, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: #111111;
}

.brc2-content p:last-child {
    margin-bottom: 0;
}


/* Course Image */

.brc2-course-image {
    width: 100%;
    max-height: 400px;
    overflow: hidden;
    margin-top: 10px;
}

.brc2-course-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}


/* =========================================
   Tablet
   ========================================= */

@media (max-width: 991px) {

    .brc2-section {
        padding: 15px 0 40px;
    }

    .brc2-section .container {
        width: 92%;
    }

    .brc2-content h4 {
        font-size: 19px;
    }

    .brc2-content h5 {
        font-size: 18px;
    }

    .brc2-content p {
        font-size: 17px;
        line-height: 1.6;
    }

    .brc2-course-image {
        margin-top: 15px;
    }
}


/* =========================================
   Mobile
   ========================================= */

@media (max-width: 767px) {

    .brc2-section {
        padding: 15px 0 30px;
    }

    /* .brc2-section .container {
        width: 92%;
    } */

    .brc2-content {
        margin-bottom: 15px;
    }

    .brc2-content h4 {
        font-size: 18px;
        line-height: 1.4;
    }

    .brc2-content h5 {
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 14px;
    }

    .brc2-content p {
        font-size: 15px;
        line-height: 1.7;
    }

    .brc2-course-image {
        width: 100%;
        margin-top: 12px;
    }

    .brc2-course-image img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

}


/* =========================================
   Exchange & Study Abroad Opportunities
   Prefix: esao-
   ========================================= */

.esao-section {
    width: 100%;
    padding: 50px 0;
    background: #ffffff;
}

/* .esao-section .container {
    max-width: 1450px;
    width: 92%;
    margin: 0 auto;
} */

.esao-row {
    display: flex;
    align-items: center;
}


/* Image */

.esao-image-col {
    padding-right: 35px;
}

.esao-image {
    width: 100%;
    overflow: hidden;
}

.esao-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}


/* Content */

.esao-content-col {
    padding-left: 35px;
}

.esao-content h2 {
    margin: 0 0 25px;
    color: #08284b;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 42px;
    font-weight: 500;
    line-height: 1.2;
}


/* Benefits Grid */

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

.esao-benefit {
    min-height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px 15px;
    background: #123f68;
}

.esao-benefit h4 {
    margin: 0;
    color: #ffffff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.35;
}


/* =========================================
   Tablet
   ========================================= */

@media (max-width: 991px) {

    .esao-section {
        padding: 40px 0;
    }

    .esao-image-col {
        padding-right: 15px;
    }

    .esao-content-col {
        padding-left: 15px;
    }

    .esao-content h2 {
        font-size: 34px;
    }

    .esao-benefits {
        gap: 12px;
    }

    .esao-benefit {
        min-height: 110px;
        padding: 15px 10px;
    }

    .esao-benefit h4 {
        font-size: 17px;
    }

}


/* =========================================
   Mobile
   ========================================= */

@media (max-width: 767px) {

    .esao-section {
        padding: 30px 0;
    }

    /* .esao-section .container {
        width: 92%;
    } */

    .esao-row {
        display: flex;
        flex-direction: column;
    }

    /* Image FIRST */
    .esao-image-col {
        width: 100%;
        padding: 0;
        order: 1;
        margin-bottom: 25px;
    }

    .esao-image {
        width: 100%;
    }

    .esao-image img {
        width: 100%;
        height: auto;
    }

    /* Content SECOND */
    .esao-content-col {
        width: 100%;
        padding: 0;
        order: 2;
    }

    .esao-content h2 {
        font-size: 30px;
        margin-bottom: 20px;
    }

    .esao-benefits {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .esao-benefit {
        min-height: 105px;
        padding: 15px 8px;
    }

    .esao-benefit h4 {
        font-size: 16px;
    }

}


/* Small Mobile */

@media (max-width: 480px) {

    .esao-content h2 {
        font-size: 27px;
    }

    .esao-benefits {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .esao-benefit {
        min-height: 95px;
    }

    .esao-benefit h4 {
        font-size: 14px;
    }

}


/* =========================================
   SSJU Genius Programme Dates
   Prefix: genius-
   ========================================= */

.genius-dates-section {
    width: 100%;
    padding: 30px 0 45px;
    background: #f3f3f3;
}

.genius-dates-section .container {
    max-width: 1400px;
    width: 92%;
    margin: 0 auto;
}

.genius-dates-content {
    text-align: center;
}

.genius-dates-content h3 {
    margin: 0 0 18px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--black-color);
}

.genius-dates-content p {
    margin: 0 0 14px;
    font-size: 19px;
    line-height: 1.5;
    color: var(--black-color);
}


/* Button Wrapper */

.genius-button-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 25px;
}


/* Know More Button */

.genius-know-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 200px;
    padding: 14px 25px;

    background: var(--secondary-color);
    color: var(--white-color);

    text-decoration: none;
    font-size: 17px;
    font-weight: 700;

    border-radius: 30px;

    transition: all 0.3s ease;
}

.genius-know-more:hover {
    background: var(--primary-color);
    color:  var(--white-color);
    text-decoration: none;
}


/* =========================================
   Tablet
   ========================================= */

@media (max-width: 991px) {

    .genius-dates-section {
        padding: 25px 0 40px;
    }

    .genius-dates-content h3 {
        font-size: 19px;
    }

    .genius-dates-content p {
        font-size: 17px;
    }

}


/* =========================================
   Mobile
   ========================================= */

@media (max-width: 767px) {

    .genius-dates-section {
        padding: 20px 0 35px;
    }

    .genius-dates-section .container {
        width: 92%;
    }

    .genius-dates-content h3 {
        font-size: 18px;
        line-height: 1.45;
    }

    .genius-dates-content p {
        font-size: 15px;
        line-height: 1.6;
        margin-bottom: 12px;
    }

    .genius-button-wrapper {
        margin-top: 22px;
    }

    .genius-know-more {
        width: 220px;
        min-width: unset;
        padding: 13px 25px;
        font-size: 16px;
    }

}


/* =========================================
   SSJU Genius Programme Tabs
   Prefix: genius-
   ========================================= */

.genius-tabs-section {
    width: 100%;
    background: var(--secondary-color);
    overflow: hidden;
}

.genius-tabs-wrapper {
    width: 100%;
    min-height: 500px;
    display: grid;
    grid-template-columns: 32% 68%;
}


/* =========================================
   LEFT TAB NAVIGATION
   ========================================= */

.genius-tabs-nav {
    background: var(--secondary-color);
    display: flex;
    flex-direction: column;
}

.genius-tab {
    width: 100%;
    min-height: 100px;
    padding: 30px 45px;

    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);

    background: var(--secondary-color);
    color: var(--white-color);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
    /* font-weight: 600; */
    line-height: 1.25;

    text-align: left;
    cursor: pointer;

    transition: all 0.3s ease;
}

.genius-tab:hover {
    background: var(--primary-color);
}

.genius-tab.active {
    background: var(--primary-color);
}


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

.genius-tabs-content {
    background: var(--secondary-color);
    color: var(--white-color);
    padding: 55px 65px 60px;

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


/* Individual Content */

.genius-tab-content {
    width: 100%;
    display: none;
    animation: geniusFadeIn 0.35s ease;
}

.genius-tab-content.active {
    display: block;
}

.genius-tab-content h2 {
    margin: 0 0 25px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.25;

    color: var(--white-color);
}

.genius-tab-content p {
    margin: 0 0 22px;

    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;

    color: var(--white-color);
}


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

.genius-know-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 200px;
    min-height: 50px;

    margin-top: 28px;

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

    color: var(--white-color);
    background: var(--secondary-color);

    text-decoration: none;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-weight: 600;

    transition: all 0.3s ease;
}

.genius-know-more:hover {
    background: var(--white-color);
    color: var(--primary-color);
}


/* =========================================
   Animation
   ========================================= */

@keyframes geniusFadeIn {

    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

}


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

@media (max-width: 1200px) {

    .genius-tabs-wrapper {
        grid-template-columns: 35% 65%;
    }

    .genius-tab {
        padding: 28px 35px;
        font-size: 25px;
    }

    .genius-tabs-content {
        padding: 45px 45px;
    }

    .genius-tab-content h2 {
        font-size: 25px;
    }

    .genius-tab-content p {
        font-size: 16px;
        line-height: 1.6;
    }

}


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

@media (max-width: 991px) {

    .genius-tabs-wrapper {
        grid-template-columns: 36% 64%;
        min-height: 600px;
    }

    .genius-tab {
        min-height: 100px;
        padding: 25px 25px;
        font-size: 22px;
    }

    .genius-tabs-content {
        padding: 35px 30px 45px;
    }

    .genius-tab-content h2 {
        font-size: 23px;
    }

    .genius-tab-content p {
        font-size: 16px;
        line-height: 1.6;
    }

    .genius-know-more {
        min-width: 220px;
        min-height: 58px;
        font-size: 16px;
    }

}


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

@media (max-width: 767px) {

    .genius-tabs-wrapper {
        display: block;
        min-height: auto;
    }


    /* Tabs become horizontal */

    .genius-tabs-nav {
        width: 100%;
        display: flex;
        flex-direction: row;

        overflow-x: auto;
        overflow-y: hidden;

        background: #092548;

        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .genius-tabs-nav::-webkit-scrollbar {
        display: none;
    }


    .genius-tab {
        flex: 0 0 auto;

        width: auto;
        min-width: 190px;
        min-height: 90px;

        padding: 18px 20px;

        border-bottom: 0;
        border-right: 1px solid rgba(255, 255, 255, 0.2);

        font-size: 18px;
        line-height: 1.25;

        text-align: center;
    }


    /* Content */

    .genius-tabs-content {
        width: 100%;
        padding: 35px 22px 45px;
    }

    .genius-tab-content h2 {
        font-size: 21px;
        line-height: 1.3;
        margin-bottom: 20px;
    }

    .genius-tab-content p {
        font-size: 15px;
        line-height: 1.7;
        margin-bottom: 17px;
    }


    .genius-know-more {
        width: 100%;
        min-width: 0;
        min-height: 55px;
        margin-top: 15px;
        font-size: 17px;
    }

}


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

@media (max-width: 480px) {

    .genius-tab {
        min-width: 165px;
        min-height: 80px;
        padding: 15px 14px;
        font-size: 16px;
    }

    .genius-tabs-content {
        padding: 30px 18px 35px;
    }

    .genius-tab-content h2 {
        font-size: 20px;
    }

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

}


/* ================================
   International Partnerships
================================ */

.ipa-section {
    width: 100%;
    padding: 20px 0 50px;
    background: #fff;
}

/* .ipa-section .container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 40px;
} */

.ipa-heading {
    margin-bottom: 20px;
}

.ipa-heading h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 500;
    color: var(--secondary-color);
}

.ipa-image {
    width: 100%;
    text-align: center;
    margin-bottom: 15px;
}

.ipa-image img {
    width: 100%;
    max-width: 1450px;
    height: auto;
    max-height: 500px;
    display: block;
    /* margin: 0 auto; */
    object-fit: contain;
}

.ipa-content {
    width: 100%;
}

.ipa-content p {
    margin: 0 0 14px;
    font-family: Arial, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: #111;
}

.ipa-content p:last-child {
    margin-bottom: 0;
}


/* ================================
   Tablet
================================ */

@media (max-width: 991px) {

    .ipa-section {
        padding: 20px 0 40px;
    }

    .ipa-section .container {
        padding: 0 25px;
    }

    .ipa-heading h2 {
        font-size: 34px;
    }

    .ipa-content p {
        font-size: 17px;
        line-height: 1.65;
    }

}


/* ================================
   Mobile
================================ */

@media (max-width: 767px) {

    .ipa-section {
        padding: 15px 0 35px;
    }

    .ipa-section .container {
        padding: 0 16px;
    }

    .ipa-heading {
        margin-bottom: 15px;
    }

    .ipa-heading h2 {
        font-size: 28px;
        line-height: 1.3;
    }

    .ipa-image {
        margin-bottom: 18px;
    }

    .ipa-image img {
        width: 100%;
        height: auto;
    }

    .ipa-content p {
        font-size: 16px;
        line-height: 1.65;
        margin-bottom: 14px;
    }

}


/* ================================
   Small Mobile
================================ */

@media (max-width: 480px) {

    .ipa-section .container {
        padding: 0 14px;
    }

    .ipa-heading h2 {
        font-size: 25px;
    }

    .ipa-content p {
        font-size: 15px;
        line-height: 1.6;
    }

}


/* =====================================
   International Partnership Gallery
===================================== */

.ipa-gallery-section {
    width: 100%;
    padding: 15px 0 40px;
    background: #fff;
}

.ipa-gallery-section .container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 20px;
}

.ipa-gallery {
    display: grid;
    grid-template-columns: 1.35fr 0.75fr 0.95fr;
    gap: 5px;
    width: 100%;
    overflow: hidden;
}

.ipa-gallery-item {
    width: 100%;
    height: 400px;
    overflow: hidden;
}

.ipa-gallery-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


/* =====================================
   Tablet
===================================== */

@media (max-width: 991px) {

    .ipa-gallery-section .container {
        padding: 0 15px;
    }

    .ipa-gallery {
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
    }

    .ipa-gallery-item {
        height: 350px;
    }

}


/* =====================================
   Mobile
===================================== */

@media (max-width: 767px) {

    .ipa-gallery {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .ipa-gallery-item {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .ipa-gallery-item img {
        object-fit: cover;
    }

}


/* =====================================
   Small Mobile
===================================== */

@media (max-width: 480px) {

    .ipa-gallery-section {
        padding: 10px 0 30px;
    }

    .ipa-gallery-section .container {
        padding: 0 10px;
    }

    .ipa-gallery {
        gap: 8px;
    }

}



/* =========================================
   International Partners
========================================= */

.ipa-partners-section {
    width: 100%;
    padding: 15px 0 50px;
    background: #fff;
}

/* .ipa-partners-section .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 25px;
} */

.ipa-partners-heading {
    margin-bottom: 30px;
}

.ipa-partners-heading h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 500;
    color: var(--secondary-color);
}


/* =========================================
   Table
========================================= */

.ipa-partners-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ipa-partners-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    border: 1px solid #222;
}

.ipa-partners-table td {
    width: 25%;
    padding: 14px 12px;
    border: 1px solid #222;
    vertical-align: middle;
    font-family: Arial, sans-serif;
    font-size: 17px;
    line-height: 1.3;
    color: #111;
}

.ipa-partners-table td a {
    color: #0000ee;
    /* color: var(--primary-color); */
    text-decoration: none;
}

.ipa-partners-table td a:hover {
    text-decoration: underline;
}


/* =========================================
   Tablet
========================================= */

@media (max-width: 991px) {

    .ipa-partners-section {
        padding: 15px 0 40px;
    }

    .ipa-partners-section .container {
        padding: 0 20px;
    }

    .ipa-partners-heading h2 {
        font-size: 34px;
    }

    .ipa-partners-table td {
        font-size: 16px;
        padding: 13px 10px;
    }

}


/* =========================================
   Mobile
========================================= */

@media (max-width: 767px) {

    .ipa-partners-section {
        padding: 10px 0 35px;
    }

    .ipa-partners-section .container {
        padding: 0 15px;
    }

    .ipa-partners-heading {
        margin-bottom: 20px;
    }

    .ipa-partners-heading h2 {
        font-size: 28px;
    }

    .ipa-partners-table {
        min-width: 850px;
    }

    .ipa-partners-table td {
        font-size: 15px;
        padding: 12px 10px;
    }

}


/* =========================================
   Small Mobile
========================================= */

@media (max-width: 480px) {

    .ipa-partners-heading h2 {
        font-size: 25px;
    }

    .ipa-partners-table {
        min-width: 800px;
    }

    .ipa-partners-table td {
        font-size: 14px;
        padding: 11px 9px;
    }

}


.ipa-image {
    width: 100%;
    height: 500px;
    overflow: hidden;
}

.ipa-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    .ipa-image {
        height: 350px;
    }
}

@media (max-width: 480px) {
    .ipa-image {
        height: 250px;
    }
}



.mwo-section {
    padding: 40px 0 50px;
}

.mwo-header h2 {
    font-size: 30px;
    line-height: 1.2;
    margin-bottom: 20px;
    color: var(--secondary-color);
    font-family: Georgia, serif;
}

.mwo-header p,
.mwo-content p {
    font-size: 17px;
    line-height: 1.6;
    color: #111;
    margin-bottom: 18px;
}

.mwo-logo {
    text-align: center;
    margin: 35px 0 45px;
}

.mwo-logo img {
    max-width: 100%;
    width: auto;
    max-height: 250px;
    height: auto;
    object-fit: contain;
}

.mwo-content {
    margin-top: 20px;
}

@media (max-width: 768px) {

    .mwo-section {
        padding: 10px 0 35px;
    }

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

    .mwo-header p,
    .mwo-content p {
        font-size: 17px;
        line-height: 1.7;
    }

    .mwo-logo {
        margin: 25px 0 30px;
    }

    .mwo-logo img {
        max-height: 140px;
    }
}

@media (max-width: 480px) {

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

    .mwo-header p,
    .mwo-content p {
        font-size: 16px;
    }

    .mwo-logo img {
        max-height: 110px;
    }
}



.mwo-upcoming-section {
    padding: 20px 0 50px;
}

.mwo-upcoming-heading h3 {
    font-size: 17px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 40px;
    color: #111;
}

.mwo-workshop-item {
    margin-bottom: 45px;
}

.mwo-workshop-content h4,
.mwo-workshop-second h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 40px;
    color: #111;
}

.mwo-workshop-content p,
.mwo-workshop-content li,
.mwo-workshop-second p {
    font-size: 16px;
    line-height: 1.6;
    color: #111;
}

.mwo-workshop-content ul {
    padding-left: 20px;
    margin-bottom: 45px;
}

.mwo-workshop-content li {
    margin-bottom: 10px;
}

.mwo-workshop-image {
    width: 100%;
    text-align: center;
}

.mwo-workshop-image img {
    width: 100%;
    max-height: 550px;
    object-fit: contain;
    display: block;
}

.mwo-workshop-second {
    margin-top: 20px;
}

.mwo-workshop-second h4 {
    margin-bottom: 12px;
    font-style: italic;
}

@media (max-width: 991px) {

    .mwo-workshop-item {
        row-gap: 30px;
    }

    .mwo-workshop-image {
        margin-top: 10px;
    }
}

@media (max-width: 767px) {

    .mwo-upcoming-section {
        padding: 15px 0 35px;
    }

    .mwo-upcoming-heading h3 {
        margin-bottom: 30px;
        line-height: 1.5;
    }

    .mwo-workshop-content h4,
    .mwo-workshop-second h4 {
        margin-bottom: 25px;
        line-height: 1.5;
    }

    .mwo-workshop-content p,
    .mwo-workshop-content li,
    .mwo-workshop-second p {
        font-size: 14px;
        line-height: 1.8;
    }

    .mwo-workshop-content ul {
        margin-bottom: 30px;
    }

    .mwo-workshop-image img {
        max-height: 500px;
    }
}


.pcam-section {
    padding: 20px 0 50px;
}

.pcam-content h2 {
    color: var(--secondary-color);
    font-family: Georgia, serif;
    font-size: 30px;
    line-height: 1.2;
    margin-bottom: 25px;
}

.pcam-content p {
    color: #111;
    font-size: 17px;
    line-height: 1.6;
    margin-bottom: 22px;
    text-align: justify;
}

@media (max-width: 768px) {
    .pcam-section {
        padding: 15px 0 35px;
    }

    .pcam-content h2 {
        font-size: 25px;
        margin-bottom: 20px;
    }

    .pcam-content p {
        font-size: 16px;
        line-height: 1.6;
        text-align: left;
    }
}

@media (max-width: 480px) {
    .pcam-content h2 {
        font-size: 25px;
    }

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


.pcam-highlights-section {
    padding: 20px 0 60px;
}

.pcam-highlights-heading h2 {
    color: var(--secondary-color);
    font-family: Georgia, serif;
    font-size: 30px;
    line-height: 1.2;
    margin-bottom: 35px;
}

.pcam-highlight-card {
    height: 100%;
    padding: 26px;
    background: #f1f4f8;
    border: 1px solid #d2d7dc;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.pcam-highlight-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.pcam-highlight-icon {
    width: 56px;
    height: 56px;
    background: var(--secondary-color);
    color:  var(--white-color);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 25px;
}

.pcam-highlight-card h3 {
    color: var(--secondary-color);
    font-family: Georgia, serif;
    font-size: 20px;
    line-height: 1.3;
    margin-bottom: 20px;
}

.pcam-highlight-card p {
    color: var(--secondary-color);
    font-family: Georgia, serif;
    font-size: 17px;
    line-height: 1.55;
    margin-bottom: 0;
}

@media (max-width: 768px) {

    .pcam-highlights-section {
        padding: 15px 0 40px;
    }

    .pcam-highlights-heading h2 {
        font-size: 25px;
        margin-bottom: 25px;
    }

    .pcam-highlight-card {
        padding: 22px;
    }

    .pcam-highlight-card h3 {
        font-size: 19px;
    }

    .pcam-highlight-card p {
        font-size: 16px;
    }
}

@media (max-width: 480px) {

    .pcam-highlights-heading h2 {
        font-size: 25px;
    }

    .pcam-highlight-card {
        padding: 20px;
    }

    .pcam-highlight-icon {
        width: 50px;
        height: 50px;
        font-size: 21px;
    }
}


.pcam-video-section {
    padding: 30px 0 60px;
}

.pcam-video-heading {
    text-align: center;
    margin-bottom: 35px;
}

.pcam-video-heading h2 {
    color: var(--secondary-color);
    font-family: Georgia, serif;
    font-size: 30px;
    line-height: 1.2;
    margin: 0;
}

.pcam-video-wrapper {
    width: 100%;
    max-width: 1000px;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 12px;
    background: #ddd;
}

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

@media (max-width: 768px) {

    .pcam-video-section {
        padding: 20px 0 40px;
    }

    .pcam-video-heading {
        margin-bottom: 25px;
    }

    .pcam-video-heading h2 {
        font-size: 25px;
    }

    .pcam-video-wrapper {
        border-radius: 8px;
    }
}

@media (max-width: 480px) {

    .pcam-video-heading h2 {
        font-size: 24px;
    }
}



.pcam-apply-section {
    padding: 25px 0 60px;
    background: #faf8f8;
}

.pcam-apply-heading h2 {
    color: var(--secondary-color);
    font-family: Georgia, serif;
    font-size: 30px;
    line-height: 1.2;
    margin-bottom: 30px;
}

.pcam-apply-card {
    background: #fff;
    border: 1px solid #e2dddd;
    border-radius: 18px;
    padding: 40px 38px;
}

.pcam-apply-card p {
    color: var(--secondary-color);
    font-family: Georgia, serif;
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 22px;
}

.pcam-apply-card p strong {
    font-weight: 700;
}

.pcam-apply-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 190px;
    padding: 16px 28px;
    margin-top: 3px;
    background: var(--secondary-color);
    color: #fff;
    border-radius: 12px;
    font-family: Georgia, serif;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
}

.pcam-apply-btn:hover {
    background: var(--primary-color);
    color: #fff;
}

@media (max-width: 768px) {

    .pcam-apply-section {
        padding: 20px 0 40px;
    }

    .pcam-apply-heading h2 {
        font-size: 25px;
        margin-bottom: 22px;
    }

    .pcam-apply-card {
        padding: 28px 22px;
        border-radius: 14px;
    }

    .pcam-apply-card p {
        font-size: 16px;
        line-height: 1.65;
    }

    .pcam-apply-btn {
        width: 100%;
        min-width: auto;
    }
}

@media (max-width: 480px) {

    .pcam-apply-heading h2 {
        font-size: 25px;
    }

    .pcam-apply-card p {
        font-size: 16px;
    }
}



.pcam-timeline-section {
    padding: 20px 0 60px;
    background: #fff;
}

.pcam-timeline-heading h2 {
    margin: 0 0 75px;
    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
}

.pcam-timeline {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

/* Vertical Line */
.pcam-timeline::before {
    content: "";
    position: absolute;
    left: 175px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #cbd5df;
}

.pcam-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 140px 70px 1fr;
    min-height: 120px;
}

/* Date */
.pcam-timeline-date {
    padding-top: 4px;
    padding-right: 20px;
    text-align: right;
    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.45;
}

.pcam-timeline-date span {
    display: block;
}

/* Marker Area */
.pcam-timeline-marker {
    position: relative;
    z-index: 2;
    width: 18px;
    height: 18px;
    margin: 3px auto 0;
    border-radius: 50%;
}

.pcam-marker-red {
    background: var(--primary-color);
}

.pcam-marker-blue {
    background: var(--secondary-color);
}

/* Content */
.pcam-timeline-content {
    padding-left: 0;
}

.pcam-timeline-content h3 {
    margin: 0 0 12px;
    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.25;
}

.pcam-timeline-content p {
    margin: 0;
    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    line-height: 1.5;
}


/* =========================
   Tablet
========================= */

@media (max-width: 991px) {

    .pcam-timeline-heading h2 {
        font-size: 28px;
        margin-bottom: 55px;
    }

    .pcam-timeline::before {
        left: 145px;
    }

    .pcam-timeline-item {
        grid-template-columns: 115px 60px 1fr;
        min-height: 150px;
    }

    .pcam-timeline-date {
        font-size: 16px;
    }

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

    .pcam-timeline-content p {
        font-size: 16px;
    }
}


/* =========================
   Mobile
========================= */

@media (max-width: 767px) {

    .pcam-timeline-section {
        padding: 20px 0 45px;
    }

    .pcam-timeline-heading h2 {
        font-size: 25px;
        margin-bottom: 45px;
    }

    .pcam-timeline {
        padding-left: 0;
    }

    .pcam-timeline::before {
        left: 88px;
    }

    .pcam-timeline-item {
        grid-template-columns: 65px 45px 1fr;
        min-height: 155px;
    }

    .pcam-timeline-date {
        padding-right: 8px;
        font-size: 14px;
        line-height: 1.35;
    }

    .pcam-timeline-marker {
        width: 16px;
        height: 16px;
        margin-top: 3px;
    }

    .pcam-timeline-content h3 {
        font-size: 19px;
        margin-bottom: 8px;
    }

    .pcam-timeline-content p {
        font-size: 15px;
        line-height: 1.45;
    }
}


/* =========================
   Small Mobile
========================= */

@media (max-width: 480px) {

    .pcam-timeline-heading h2 {
        font-size: 25px;
    }

    .pcam-timeline::before {
        left: 72px;
    }

    .pcam-timeline-item {
        grid-template-columns: 52px 40px 1fr;
        min-height: 165px;
    }

    .pcam-timeline-date {
        font-size: 12px;
    }

    .pcam-timeline-marker {
        width: 14px;
        height: 14px;
    }

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

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


.pcam-partners-section {
    padding: 20px 0 60px;
    background: #fff;
    color: var(--secondary-color);
}

.pcam-partner-block {
    margin-bottom: 32px;
}

.pcam-partner-block h2 {
    margin: 0 0 18px;
    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.25;
}

.pcam-partner-block p {
    margin: 0 0 14px;
    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    line-height: 1.6;
}

.pcam-partner-block ul {
    margin: 0;
    padding-left: 28px;
}

.pcam-partner-block li {
    margin-bottom: 7px;
    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    line-height: 1.45;
}


/* Faculty Affiliations */

.pcam-affiliation-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 80px;
}

.pcam-affiliation-grid ul {
    margin: 0;
}


/* Other Partners */

.pcam-other-partners {
    margin-top: 5px;
}

.pcam-other-partners ul {
    max-width: 650px;
}


.pcam-partners-section ul {
    list-style-type: disc;
    padding-left: 28px;
    margin: 0;
}

.pcam-partners-section li {
    display: list-item;
    list-style-type: disc;
}

/* =========================
   Tablet
========================= */

@media (max-width: 991px) {

    .pcam-partners-section {
        padding: 20px 0 50px;
    }

    .pcam-partner-block {
        margin-bottom: 30px;
    }

    .pcam-partner-block h2 {
        font-size: 27px;
    }

    .pcam-partner-block p,
    .pcam-partner-block li {
        font-size: 16px;
    }

    .pcam-affiliation-grid {
        column-gap: 40px;
    }
}


/* =========================
   Mobile
========================= */

@media (max-width: 767px) {

    .pcam-partners-section {
        padding: 15px 0 40px;
    }

    .pcam-partner-block {
        margin-bottom: 28px;
    }

    .pcam-partner-block h2 {
        font-size: 25px;
        margin-bottom: 14px;
    }

    .pcam-partner-block p {
        font-size: 16px;
        line-height: 1.5;
    }

    .pcam-partner-block li {
        font-size: 15px;
        line-height: 1.5;
        margin-bottom: 8px;
    }

    .pcam-affiliation-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .pcam-affiliation-grid ul + ul {
        margin-top: 0;
    }

    .pcam-partner-block ul {
        padding-left: 24px;
    }
}


/* =========================
   Small Mobile
========================= */

@media (max-width: 480px) {

    .pcam-partner-block h2 {
        font-size: 22px;
    }

    .pcam-partner-block p,
    .pcam-partner-block li {
        font-size: 14px;
    }

    .pcam-partner-block ul {
        padding-left: 22px;
    }
}



.pcam-faculty-section {
    padding: 20px 0 60px;
    background: #fff;
}

.pcam-faculty-heading h2 {
    margin: 0 0 35px;
    color: #06283f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 42px;
    font-weight: 400;
}

.pcam-faculty-list {
    border: 1px solid #d9e0e7;
    border-radius: 12px;
    padding: 25px 35px;
    background: #fff;
}

.pcam-faculty-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 0;
    color: #06283f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    line-height: 1.5;
}

.pcam-faculty-item strong {
    font-weight: 500;
}

.pcam-faculty-item span::before {
    content: "|";
    margin-right: 8px;
}

.pcam-faculty-item a {
    color: #004cff;
    text-decoration: none;
}

.pcam-faculty-item a::before {
    content: "|";
    color: #06283f;
    margin-right: 8px;
}

.pcam-faculty-item a:hover {
    text-decoration: underline;
}


/* Tablet */

@media (max-width: 991px) {

    .pcam-faculty-heading h2 {
        font-size: 36px;
    }

    .pcam-faculty-list {
        padding: 20px 25px;
    }

    .pcam-faculty-item {
        font-size: 16px;
    }
}


/* Mobile */

@media (max-width: 767px) {

    .pcam-faculty-section {
        padding: 15px 0 40px;
    }

    .pcam-faculty-heading h2 {
        font-size: 30px;
        margin-bottom: 25px;
    }

    .pcam-faculty-list {
        padding: 15px 20px;
    }

    .pcam-faculty-item {
        display: block;
        padding: 12px 0;
        font-size: 15px;
    }

    .pcam-faculty-item strong,
    .pcam-faculty-item span,
    .pcam-faculty-item a {
        display: inline;
    }

    .pcam-faculty-item span::before,
    .pcam-faculty-item a::before {
        margin-left: 3px;
    }
}


/* Small Mobile */

@media (max-width: 480px) {

    .pcam-faculty-heading h2 {
        font-size: 26px;
    }

    .pcam-faculty-list {
        padding: 12px 16px;
    }

    .pcam-faculty-item {
        font-size: 14px;
    }
}



.pcam-gallery-section {
    padding: 20px 0 60px;
    background: #fff;
}

.pcam-gallery-heading {
    margin-bottom: 35px;
}

.pcam-gallery-heading h2 {
    margin: 0;
    color: #06283f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 42px;
    font-weight: 400;
    line-height: 1.2;
}

/* Gallery Grid */

.pcam-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 22px;
}

.pcam-gallery-item {
    width: 100%;
    height: 290px;
    overflow: hidden;
    border-radius: 7px;
    background: #eee;
}

.pcam-gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.pcam-gallery-item:hover img {
    transform: scale(1.04);
}


/* Tablet */

@media (max-width: 991px) {

    .pcam-gallery-heading h2 {
        font-size: 36px;
    }

    .pcam-gallery-grid {
        gap: 16px;
    }

    .pcam-gallery-item {
        height: 250px;
    }
}


/* Mobile */

@media (max-width: 767px) {

    .pcam-gallery-section {
        padding: 15px 0 45px;
    }

    .pcam-gallery-heading {
        margin-bottom: 25px;
    }

    .pcam-gallery-heading h2 {
        font-size: 32px;
    }

    .pcam-gallery-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .pcam-gallery-item {
        height: 260px;
    }
}


/* Small Mobile */

@media (max-width: 480px) {

    .pcam-gallery-heading h2 {
        font-size: 28px;
    }

    .pcam-gallery-item {
        height: 220px;
    }
}


.pcam-testimonials-section {
    padding: 20px 0 60px;
    background: #f8fafc;
}

.pcam-testimonials-heading {
    margin-bottom: 45px;
}

.pcam-testimonials-heading h2 {
    margin: 0;
    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
}

.pcam-testimonials-list {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.pcam-testimonial-card {
    padding: 28px;
    background: #fff;
    border: 1px solid #dce3eb;
    border-radius: 12px;
}

.pcam-quote-icon {
    margin-bottom: 15px;
    color: var(--primary-color);
    font-size: 38px;
    line-height: 1;
}

.pcam-testimonial-text {
    margin: 0;
    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    line-height: 1.55;
    text-align: justify;
}

.pcam-testimonial-footer {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid #dce3eb;
}

.pcam-student-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    color: var(--secondary-color);
    font-size: 39px;
    line-height: 44px;
    text-align: center;
}

.pcam-student-info h4 {
    margin: 0 0 5px;
    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-weight: 500;
}

.pcam-student-info span {
    display: block;
    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
}


/* Tablet */

@media (max-width: 991px) {

    .pcam-testimonials-heading h2 {
        font-size: 28px;
    }

    .pcam-testimonial-card {
        padding: 25px;
    }

    .pcam-testimonial-text {
        font-size: 17px;
    }
}


/* Mobile */

@media (max-width: 767px) {

    .pcam-testimonials-section {
        padding: 15px 0 45px;
    }

    .pcam-testimonials-heading {
        margin-bottom: 30px;
    }

    .pcam-testimonials-heading h2 {
        font-size: 25px;
    }

    .pcam-testimonials-list {
        gap: 20px;
    }

    .pcam-testimonial-card {
        padding: 20px;
        border-radius: 10px;
    }

    .pcam-quote-icon {
        font-size: 32px;
    }

    .pcam-testimonial-text {
        font-size: 15px;
        line-height: 1.55;
        text-align: left;
    }

    .pcam-testimonial-footer {
        gap: 14px;
        margin-top: 22px;
        padding-top: 18px;
    }

    .pcam-student-icon {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
        font-size: 32px;
        line-height: 38px;
    }

    .pcam-student-info h4 {
        font-size: 16px;
    }

    .pcam-student-info span {
        font-size: 14px;
    }
}


/* Small Mobile */

@media (max-width: 480px) {

    .pcam-testimonials-heading h2 {
        font-size: 25px;
    }

    .pcam-testimonial-card {
        padding: 18px;
    }

    .pcam-testimonial-text {
        font-size: 14px;
    }
}



.pcam-career-cta-section {
    padding: 40px 0 70px;
}

.pcam-career-cta {
    background: #f1f6fa;
    border: 1px solid #d4e0ea;
    border-radius: 16px;
    padding: 55px 40px;
    text-align: center;
}

.pcam-career-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--secondary-color);
    font-size: 52px;
}

.pcam-career-cta h2 {
    margin: 0 0 18px;
    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.2;
}

.pcam-career-cta p {
    max-width: 720px;
    margin: 0 auto;
    color:  var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    line-height: 1.55;
}

.pcam-career-btn {
    display: inline-block;
    margin-top: 35px;
    padding: 16px 35px;

    background: var(--secondary-color);
    color: #fff !important;

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

    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-weight: 600;

    transition: all 0.3s ease;
}

.pcam-career-btn:hover {
    background: var(--primary-color);
    color: #fff !important;
    transform: translateY(-2px);
}

.pcam-career-contact {
    margin-top: 30px;
    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
}

.pcam-career-contact a {
    color: var(--secondary-color);
    font-weight: 600;
    text-decoration: underline;
}


/* Tablet */

@media (max-width: 991px) {

    .pcam-career-cta {
        padding: 60px 30px;
    }

    .pcam-career-cta h2 {
        font-size: 28px;
    }

    .pcam-career-cta p {
        font-size: 18px;
    }
}


/* Mobile */

@media (max-width: 767px) {

    .pcam-career-cta-section {
        padding: 25px 0 50px;
    }

    .pcam-career-cta {
        padding: 45px 20px;
        border-radius: 12px;
    }

    .pcam-career-icon {
        width: 55px;
        height: 55px;
        font-size: 42px;
        margin-bottom: 20px;
    }

    .pcam-career-cta h2 {
        font-size: 25px;
    }

    .pcam-career-cta p {
        font-size: 16px;
        line-height: 1.5;
    }

    .pcam-career-btn {
        margin-top: 28px;
        padding: 14px 25px;
        font-size: 16px;
    }

    .pcam-career-contact {
        margin-top: 25px;
        font-size: 14px;
        line-height: 1.6;
    }
}


/* Small Mobile */

@media (max-width: 480px) {

    .pcam-career-cta {
        padding: 35px 16px;
    }

    .pcam-career-cta h2 {
        font-size: 25px;
    }

    .pcam-career-cta p {
        font-size: 15px;
    }

    .pcam-career-btn {
        width: 100%;
        box-sizing: border-box;
    }
}


.ysp-section {
    padding: 40px 0 60px;
    background: #ffffff;
}

.ysp-content {
    max-width: 100%;
    margin: 0 auto;
}

.ysp-title {
    margin: 0 0 18px;
    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
}

.ysp-subtitle {
    margin: 0 0 12px;
    color: #111111;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
}

.ysp-content p {
    margin: 0 0 18px;
    color: #111111;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    line-height: 1.7;
}

.ysp-highlight {
    margin: 25px 0;
    color: var(--primary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.5;
}

.ysp-heading {
    margin: 20px 0 12px;
    color: #111111;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 600;
}

.ysp-list {
    margin: 0 0 25px;
    padding-left: 25px;
    color: #111111;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    line-height: 1.8;
}

.ysp-list li {
    margin-bottom: 5px;
    padding-left: 4px;
}

.ysp-closing {
    margin-top: 25px !important;
}

.ysp-contact {
    margin-top: 22px !important;
    font-weight: 600;
}

.ysp-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.ysp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 220px;
    padding: 13px 20px;

    border: 1px solid var(--secondary-color);
    background: var(--secondary-color);
    color: #ffffff !important;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;

    transition: all 0.3s ease;
}

.ysp-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff !important;
}

.ysp-btn-outline {
    background: transparent;
    color: var(--secondary-color) !important;
}

.ysp-btn-outline:hover {
    background: var(--primary-color);
    color: #ffffff !important;
}


/* =========================
   Tablet
========================= */

@media (max-width: 991px) {

    .ysp-section {
        padding: 20px 0 50px;
    }

    .ysp-title {
        font-size: 28px;
    }

    .ysp-subtitle {
        font-size: 20px;
    }

    .ysp-content p,
    .ysp-list {
        font-size: 16px;
    }

    .ysp-highlight {
        font-size: 18px;
    }
}


/* =========================
   Mobile
========================= */

@media (max-width: 767px) {

    .ysp-section {
        padding: 15px 0 40px;
    }

    .ysp-title {
        font-size: 25px;
        margin-bottom: 15px;
    }

    .ysp-subtitle {
        font-size: 19px;
        line-height: 1.35;
    }

    .ysp-content p {
        font-size: 15px;
        line-height: 1.65;
    }

    .ysp-highlight {
        margin: 20px 0;
        font-size: 16px;
        line-height: 1.5;
    }

    .ysp-heading {
        font-size: 19px;
    }

    .ysp-list {
        padding-left: 22px;
        font-size: 15px;
        line-height: 1.65;
    }

    .ysp-buttons {
        flex-direction: column;
    }

    .ysp-btn {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
}


.ysp-cards-section {
    padding: 30px 0 70px;
}

.ysp-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 34px;
    align-items: stretch;
}

.ysp-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--secondary-color);
    border-radius: 12px 12px 0 0;
    color: #ffffff;
}

.ysp-card-image {
    width: 100%;
    height: 260px;
    overflow: hidden;
}

.ysp-card-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.ysp-card:hover .ysp-card-image img {
    transform: scale(1.04);
}

.ysp-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 25px 27px 20px;
}

.ysp-card-body h3 {
    min-height: 105px;
    margin: 0 0 25px;
    color: var(--white-color);
    font-family: Arial, sans-serif;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.45;
}

.ysp-card-details {
    flex: 1;
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.65;
}

.ysp-card-details strong {
    font-weight: 600;
}

.ysp-card-details p {
    margin: 8px 0;
}

.ysp-card-details em {
    font-style: italic;
}

.ysp-schedule-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin: 8px 0 2px;
    padding: 14px 24px;

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

    color: var(--white-color) ;
    text-decoration: none;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    font-weight: 600;

    transition: all 0.3s ease;
}

.ysp-schedule-btn:hover {
    background: #ffffff;
    color: var(--secondary-color) !important;
}

.ysp-note {
    font-size: 14px !important;
    margin-top: 5px !important;
}

.ysp-learn-btn {
    align-self: flex-start;

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

    margin-top: 30px;
    padding: 11px 22px;

    background: var(--primary-color);
    color: var(--white-color) !important;

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

    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;

    transition: all 0.3s ease;
}

.ysp-learn-btn:hover {
    background: var(--white-color);
    color: var(--primary-color) !important;
}


/* =========================================
   Tablet
========================================= */

@media (max-width: 1100px) {

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

    .ysp-card:last-child {
        grid-column: 1 / -1;
        max-width: calc(50% - 17px);
        width: 100%;
        justify-self: center;
    }
}


/* =========================================
   Mobile
========================================= */

@media (max-width: 767px) {

    .ysp-cards-section {
        padding: 20px 0 50px;
    }

    .ysp-cards-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .ysp-card:last-child {
        grid-column: auto;
        max-width: none;
    }

    .ysp-card-image {
        height: 230px;
    }

    .ysp-card-body {
        padding: 22px 20px 20px;
    }

    .ysp-card-body h3 {
        min-height: auto;
        font-size: 21px;
        margin-bottom: 22px;
    }

    .ysp-card-details {
        font-size: 15px;
    }

    .ysp-schedule-btn {
        width: 100%;
        box-sizing: border-box;
    }

    .ysp-learn-btn {
        width: 100%;
        box-sizing: border-box;
    }
}


/* =========================================
   Small Mobile
========================================= */

@media (max-width: 480px) {

    .ysp-card-image {
        height: 210px;
    }

    .ysp-card-body h3 {
        font-size: 19px;
    }

    .ysp-card-details {
        font-size: 14px;
    }
}



.ysp-alumni-section {
    padding: 55px 0 70px;
    background: #f5f5f5;
    overflow: hidden;
}

.ysp-alumni-heading {
    text-align: center;
    margin-bottom: 45px;
}

.ysp-alumni-heading h2 {
    margin: 0;
    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
}


/* Swiper */

.ysp-alumni-swiper {
    width: 100%;
    padding-bottom: 55px !important;
}

.ysp-alumni-swiper .swiper-slide {
    height: auto;
}


/* Slide */

.ysp-alumni-slide {
    width: 100%;
    text-align: center;
}


/* YouTube */

.ysp-alumni-video {
    width: 675px;
    max-width: 100%;
    height: 380px;
    margin: 0 auto 28px;
    overflow: hidden;
    border-radius: 10px;
    background: #111;
}

.ysp-alumni-video iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}


/* Testimonial */

.ysp-alumni-quote {
    max-width: 1150px;
    margin: 0 auto;
}

.ysp-alumni-quote p {
    margin: 0;
    color: #222;
    font-family: Arial, sans-serif;
    font-size: 20px;
    font-style: italic;
    line-height: 1.8;
}

.ysp-alumni-name {
    margin-top: 25px;
    color: #222;
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: 500;
}


/* Pagination */

.ysp-alumni-pagination {
    bottom: 5px !important;
}

.ysp-alumni-pagination .swiper-pagination-bullet {
    width: 14px;
    height: 14px;
    margin: 0 5px !important;
    background: var(--secondary-color);
    opacity: 1;
}

.ysp-alumni-pagination .swiper-pagination-bullet-active {
    background: var(--primary-color);
}


/* =========================
   Tablet
========================= */

@media (max-width: 991px) {

    .ysp-alumni-section {
        padding: 45px 0 60px;
    }

    .ysp-alumni-heading {
        margin-bottom: 35px;
    }

    .ysp-alumni-heading h2 {
        font-size: 28px;
    }

    .ysp-alumni-video {
        width: 650px;
        height: 365px;
    }

    .ysp-alumni-quote {
        padding: 0 20px;
    }

    .ysp-alumni-quote p {
        font-size: 18px;
        line-height: 1.7;
    }

    .ysp-alumni-name {
        font-size: 16px;
    }
}


/* =========================
   Mobile
========================= */

@media (max-width: 767px) {

    .ysp-alumni-section {
        padding: 40px 0 50px;
    }

    .ysp-alumni-heading {
        margin-bottom: 30px;
    }

    .ysp-alumni-heading h2 {
        font-size: 25px;
    }

    .ysp-alumni-video {
        width: 100%;
        height: 260px;
        border-radius: 8px;
        margin-bottom: 25px;
    }

    .ysp-alumni-quote {
        padding: 0 10px;
    }

    .ysp-alumni-quote p {
        font-size: 16px;
        line-height: 1.65;
    }

    .ysp-alumni-name {
        margin-top: 20px;
        font-size: 15px;
        line-height: 1.5;
    }

    .ysp-alumni-pagination {
        bottom: 0 !important;
    }

    .ysp-alumni-pagination .swiper-pagination-bullet {
        width: 11px;
        height: 11px;
    }
}


/* =========================
   Small Mobile
========================= */

@media (max-width: 480px) {

    .ysp-alumni-video {
        height: 220px;
    }

    .ysp-alumni-heading h2 {
        font-size: 25px;
    }

    .ysp-alumni-quote p {
        font-size: 15px;
    }
}



/* =========================================
   YSP WHY JOIN SECTION
========================================= */

.ysp-why-section {
    padding: 50px 0 65px;
    background: #fff;
    overflow: hidden;
}


/* Heading */

.ysp-why-heading {
    max-width: 1500px;
    margin: 0 auto 65px;
    text-align: center;
}

.ysp-why-heading h2 {
    margin: 0 0 35px;
    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.25;
}

.ysp-why-heading p {
    margin: 0 auto;
    max-width: 1450px;
    color: #171717;
    font-family: Arial, sans-serif;
    font-size: 18px;
    line-height: 1.6;
}


/* =========================================
   SWIPER
========================================= */

.ysp-why-swiper {
    width: 100%;
    padding: 0 10px 60px !important;
    overflow: hidden;
}

.ysp-why-swiper .swiper-wrapper {
    align-items: flex-start;
}

.ysp-why-swiper .swiper-slide {
    height: auto;
}


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

.ysp-why-card {
    text-align: center;
    padding: 0 10px;
}

.ysp-why-image {
    width: 100%;
    max-width: 285px;
    height: 145px;
    margin: 0 auto 10px;
    overflow: hidden;
}

.ysp-why-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


.ysp-why-card p {
    max-width: 320px;
    min-height: 52px;
    margin: 0 auto;
    color: #222;
    font-family: Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
}


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

.ysp-why-pagination {
    bottom: 5px !important;
}

.ysp-why-pagination .swiper-pagination-bullet {
    width: 15px;
    height: 15px;
    margin: 0 5px !important;
    background: var(--secondary-color);
    opacity: 1;
}

.ysp-why-pagination .swiper-pagination-bullet-active {
    background: var(--primary-color);
}


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

@media (min-width: 1200px) {

    .ysp-why-swiper .swiper-slide {
        width: 25%;
    }

}


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

@media (max-width: 1199px) {

    .ysp-why-section {
        padding: 45px 0 60px;
    }

    .ysp-why-heading {
        margin-bottom: 50px;
        padding: 0 20px;
    }

    .ysp-why-heading h2 {
        font-size: 28px;
    }

    .ysp-why-heading p {
        font-size: 18px;
        line-height: 1.75;
    }

    .ysp-why-image {
        max-width: 260px;
        height: 140px;
    }

}


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

@media (max-width: 767px) {

    .ysp-why-section {
        padding: 40px 0 55px;
    }

    .ysp-why-heading {
        margin-bottom: 35px;
        padding: 0 15px;
    }

    .ysp-why-heading h2 {
        margin-bottom: 22px;
        font-size: 25px;
        line-height: 1.3;
    }

    .ysp-why-heading p {
        font-size: 16px;
        line-height: 1.6;
        text-align: center;
    }

    .ysp-why-swiper {
        padding: 0 20px 55px !important;
    }

    .ysp-why-card {
        padding: 0;
    }

    .ysp-why-image {
        max-width: 330px;
        height: 175px;
        margin-bottom: 14px;
    }

    .ysp-why-card p {
        max-width: 340px;
        font-size: 15px;
        line-height: 1.6;
    }

    .ysp-why-pagination .swiper-pagination-bullet {
        width: 12px;
        height: 12px;
        margin: 0 4px !important;
    }

}


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

@media (max-width: 480px) {

    .ysp-why-heading h2 {
        font-size: 24px;
    }

    .ysp-why-heading p {
        font-size: 15px;
    }

    .ysp-why-image {
        height: 165px;
    }

    .ysp-why-card p {
        font-size: 14px;
    }

}



/* =========================================
   INSPIRING SPEAKERS
========================================= */

.ysp-speakers-section {
    padding: 55px 0 70px;
    background: #f5f5f5;
    overflow: hidden;
}

/* .ysp-speakers-section .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
} */

.ysp-speakers-heading {
    margin-bottom: 35px;
}

.ysp-speakers-heading h2 {
    margin: 0;
    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    font-weight: 600;
}


/* =========================================
   SWIPER
========================================= */

.ysp-speakers-swiper {
    width: 100%;
    padding-bottom: 65px !important;
    overflow: hidden !important;
}

.ysp-speakers-swiper .swiper-wrapper {
    align-items: stretch;
}

.ysp-speakers-swiper .swiper-slide {
    height: auto;
    overflow: visible;
}


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

.ysp-speaker-card {
    position: relative;
    width: 100%;
    height: 395px;
    border-radius: 10px;
    overflow: hidden;
    background: #dcdcdc;
    cursor: pointer;
}


/* Image */

.ysp-speaker-image {
    width: 100%;
    height: 310px;
    overflow: hidden;
}

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

.ysp-speaker-card:hover .ysp-speaker-image img {
    transform: scale(1.03);
}


/* Bottom basic information */

.ysp-speaker-basic {
    height: 85px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #dcdcdc;
}

.ysp-speaker-basic h3 {
    margin: 0 0 5px;
    color: #111;
    font-family: Arial, sans-serif;
    font-size: 20px;
    line-height: 1.15;
    font-weight: 700;
}

.ysp-speaker-basic p {
    margin: 0;
    color: #222;
    font-family: Arial, sans-serif;
    font-size: 15px;
    line-height: 1.4;
}

.ysp-speaker-plus {
    flex-shrink: 0;
    margin-left: 10px;
    color: var(--primary-color);
    font-family: Arial, sans-serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 1;
}


/* =========================================
   HOVER DETAILS
========================================= */

.ysp-speaker-details {
    position: absolute;
    inset: 0;
    z-index: 5;

    display: flex;
    flex-direction: column;

    padding: 20px 18px;

    background: #dcdcdc;

    opacity: 0;
    visibility: hidden;

    transform: translateY(15px);
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease;
}

.ysp-details-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 10px;
}

.ysp-details-top h3 {
    margin: 0;
    color: #111;
    font-family: Arial, sans-serif;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
}

.ysp-details-top span {
    flex-shrink: 0;
    color: var(--primary-color);
    font-size: 27px;
    line-height: 1;
}

.ysp-speaker-details p {
    margin: 0 0 12px;
    color: #111;
    font-family: Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
}

.ysp-speaker-details strong {
    display: block;
    margin-bottom: 8px;
    color: #111;
    font-family: Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
}


/* Hover */

.ysp-speaker-card:hover .ysp-speaker-details {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


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

.ysp-speakers-pagination {
    bottom: 5px !important;
}

.ysp-speakers-pagination .swiper-pagination-bullet {
    width: 15px;
    height: 15px;
    margin: 0 5px !important;
    background: var(--secondary-color);
    opacity: 1;
}

.ysp-speakers-pagination .swiper-pagination-bullet-active {
    background: var(--primary-color);
}


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

@media (max-width: 1199px) {

    .ysp-speakers-section {
        padding: 45px 0 60px;
    }

    .ysp-speaker-card {
        height: 370px;
    }

    .ysp-speaker-image {
        height: 285px;
    }

    .ysp-speaker-basic {
        height: 85px;
    }

    .ysp-speaker-basic h3,
    .ysp-details-top h3 {
        font-size: 18px;
    }

}


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

@media (max-width: 767px) {

    .ysp-speakers-section {
        padding: 40px 0 55px;
    }

    .ysp-speakers-section .container {
        padding: 0 15px;
    }

    .ysp-speakers-heading {
        margin-bottom: 25px;
    }

    .ysp-speakers-heading h2 {
        font-size: 28px;
    }

    .ysp-speaker-card {
        height: 390px;
    }

    .ysp-speaker-image {
        height: 305px;
    }

    .ysp-speaker-basic {
        height: 85px;
        padding: 13px 15px;
    }

    .ysp-speaker-basic h3,
    .ysp-details-top h3 {
        font-size: 18px;
    }

    .ysp-speaker-basic p {
        font-size: 14px;
    }

    .ysp-speaker-details {
        padding: 20px 17px;
    }

}


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

@media (max-width: 480px) {

    .ysp-speakers-heading h2 {
        font-size: 24px;
    }

    .ysp-speaker-card {
        height: 370px;
    }

    .ysp-speaker-image {
        height: 285px;
    }

}



/* =========================================
   YSP NEWS SECTION
========================================= */

.ysp-news-section {
    padding: 55px 0 70px;
    background: #f5f5f5;
}

/* .ysp-news-section .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
} */


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

.ysp-news-heading {
    text-align: center;
    margin-bottom: 45px;
}

.ysp-news-heading h2 {
    margin: 0;
    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
}


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

.ysp-news-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 460px));
    justify-content: start;
    gap: 34px;
}


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

.ysp-news-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 7px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ysp-news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.20);
}


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

.ysp-news-image {
    width: 100%;
    height: 265px;
    overflow: hidden;
}

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

.ysp-news-card:hover .ysp-news-image img {
    transform: scale(1.04);
}


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

.ysp-news-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 38px 17px 32px;
}

.ysp-news-content h3 {
    margin: 0 0 24px;
    color: #111;
    font-family: Arial, sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
}

.ysp-news-meta {
    margin-bottom: 25px;
    color: #222;
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

.ysp-news-meta span {
    margin: 0 7px;
}

.ysp-news-content p {
    margin: 0 0 32px;
    color: #171717;
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 2;
}


/* =========================================
   READ MORE
========================================= */

.ysp-news-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 119px;
    min-height: 43px;
    padding: 10px 20px;

    border-radius: 7px;
    background: var(--secondary-color);
    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;

    transition: background 0.3s ease, transform 0.3s ease;
}

.ysp-news-btn:hover {
    background: var(--primary-color);
    color: #fff;
    transform: translateY(-2px);
}


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

@media (max-width: 991px) {

    .ysp-news-section {
        padding: 45px 0 60px;
    }

    .ysp-news-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 25px;
    }

    .ysp-news-image {
        height: 230px;
    }

    .ysp-news-content {
        padding: 30px 17px;
    }

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

    .ysp-news-content p {
        font-size: 15px;
        line-height: 1.6;
    }

}


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

@media (max-width: 767px) {

    .ysp-news-section {
        padding: 40px 0 50px;
    }

    .ysp-news-section .container {
        padding: 0 15px;
    }

    .ysp-news-heading {
        margin-bottom: 30px;
    }

    .ysp-news-heading h2 {
        font-size: 25px;
    }

    .ysp-news-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .ysp-news-image {
        height: 240px;
    }

    .ysp-news-content {
        padding: 28px 17px 30px;
    }

    .ysp-news-content h3 {
        font-size: 19px;
        line-height: 1.4;
        margin-bottom: 18px;
    }

    .ysp-news-meta {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .ysp-news-content p {
        font-size: 15px;
        line-height: 1.55;
        margin-bottom: 25px;
    }

}


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

@media (max-width: 480px) {

    .ysp-news-heading h2 {
        font-size: 24px;
    }

    .ysp-news-image {
        height: 210px;
    }

    .ysp-news-content h3 {
        font-size: 19px;
    }

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

}



.hap-section {
    padding: 40px 0 60px;
    background: #fff;
}

.hap-content {
    width: 100%;
}

.hap-title {
    margin: 0 0 22px;
    color: var(--secondary-color);
    font-size: 30px;
    line-height: 1.2;
    font-weight: 600;
}

.hap-text {
    margin: 0 0 22px;
    color: #222;
    font-size: 17px;
    line-height: 1.6;
}

.hap-highlight {
    margin: 28px 0;
    color: var(--primary-color);
    font-size: 19px;
    line-height: 1.6;
}

.hap-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 25px;
}

.hap-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 0 30px;
    border: 1px solid var(--secondary-color);
    background: var(--secondary-color);
    color: var(--white-color);
    text-decoration: none;
    font-size: 17px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.hap-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white-color);
}

.hap-btn-outline {
    background: transparent;
    color: var(--secondary-color);
}

.hap-btn-outline:hover {
    background: var(--secondary-color);
    color: var(--white-color);
}

.hap-video-section {
    margin-top: 45px;
}

.hap-video-title {
    margin: 0 0 20px;
    color: var(--black-color);
    font-size: 18px;
}

.hap-video-wrapper {
    width: 100%;
    max-width: 500px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #eee;
}

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


/* Responsive */

@media (max-width: 768px) {

    .hap-section {
        padding: 30px 0 45px;
    }

    .hap-title {
        font-size: 25px;
    }

    .hap-text {
        font-size: 16px;
        line-height: 1.6;
    }

    .hap-highlight {
        font-size: 18px;
    }

    .hap-buttons {
        flex-direction: column;
    }

    .hap-btn {
        width: 100%;
        min-height: 52px;
    }

    .hap-video-wrapper {
        max-width: 100%;
    }

}


.hap-explore-section {
    padding: 45px 0 60px;
    background: var(--white-color);
}

.hap-explore-content {
    width: 100%;
}

.hap-explore-title {
    margin: 0 0 22px;
    color: var(--secondary-color);
    font-size: 30px;
    line-height: 1.25;
    font-weight: 600;
}

.hap-explore-text {
    margin: 0 0 22px;
    color: var(--black-color);
    font-size: 18px;
    line-height: 1.6;
}

.hap-explore-highlight {
    margin: 28px 0;
    color: var(--primary-color);
    font-size: 19px;
    line-height: 1.6;
}

.hap-explore-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 25px;
}

.hap-explore-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 0 30px;
    border: 1px solid var(--secondary-color);
    background: var(--secondary-color);
    color: var(--white-color);
    text-decoration: none;
    font-size: 17px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.hap-explore-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white-color);
}

.hap-explore-btn-outline {
    background: transparent;
    color: var(--secondary-color);
}

.hap-explore-btn-outline:hover {
    background: var(--secondary-color);
    color: var(--white-color);
}

.hap-explore-contact {
    margin-top: 42px;
}

.hap-explore-contact p {
    margin: 0 0 22px;
    color: var(--black-color);
    font-size: 17px;
    line-height: 1.8;
}

.hap-explore-contact a {
    color: var(--secondary-color);
    text-decoration: none;
    font-weight: 600;
}

.hap-explore-contact a:hover {
    text-decoration: underline;
}

.hap-explore-social {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
}

.hap-explore-social a {
    color: var(--secondary-color);
    font-size: 17px;
    font-weight: 500;
}

.hap-explore-social span {
    color: #555;
}


/* Responsive */

@media (max-width: 768px) {

    .hap-explore-section {
        padding: 30px 0 45px;
    }

    .hap-explore-title {
        font-size: 25px;
    }

    .hap-explore-text {
        font-size: 16px;
        line-height: 1.6;
    }

    .hap-explore-highlight {
        font-size: 17px;
    }

    .hap-explore-buttons {
        flex-direction: column;
    }

    .hap-explore-btn {
        width: 100%;
        min-height: 52px;
    }

    .hap-explore-contact p {
        font-size: 16px;
    }

}


.ols-section {
    width: 100%;
    padding: 45px 0 60px;
    background: var(--white-color);
}

/* .ols-section .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 30px;
} */

.ols-content {
    width: 100%;
}

.ols-title {
    margin: 0 0 22px;
    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 600;
}

.ols-description {
    margin: 0 0 12px;
    color: var(--black-color);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    line-height: 1.6;
}

.ols-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 22px;
}

.ols-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 60px;
    padding: 12px 28px;

    margin-right: 5px;
    margin-bottom: 16px;

    border: 1px solid var(--secondary-color);
    background: var(--white-color);

    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-weight: 700;

    text-decoration: none;
    transition: all 0.3s ease;
}

.ols-btn:hover {
    background: var(--primary-color);
    color: var(--white-color);
}

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

    .ols-section {
        padding: 40px 0 50px;
    }

    .ols-section .container {
        padding: 0 25px;
    }

    .ols-title {
        font-size: 28px;
    }

    .ols-description {
        font-size: 17px;
        line-height: 1.55;
    }

    .ols-btn {
        min-height: 58px;
        padding: 10px 22px;
        font-size: 17px;
    }
}

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

    .ols-section {
        padding: 35px 0 45px;
    }

    .ols-section .container {
        padding: 0 18px;
    }

    .ols-title {
        font-size: 25px;
        margin-bottom: 18px;
    }

    .ols-description {
        font-size: 16px;
        line-height: 1.6;
    }

    .ols-buttons {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 20px;
    }

    .ols-btn {
        width: 100%;
        min-height: 55px;
        margin: 0;
        padding: 10px 18px;
        text-align: center;
        font-size: 16px;
    }
}


/* ================================
   OLS VIDEO SECTION
================================ */

.ols-video-section {
    width: 100%;
    padding: 0;
    background: var(--white-color);
}

.ols-video-section .container {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
}

.ols-video-wrapper {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
}

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


/* ================================
   OLS MESSAGE SECTION
================================ */

.ols-message-section {
    width: 100%;
    padding: 32px 0 50px;
    background: var(--white-color);
}

/* .ols-message-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 25px;
} */

.ols-message-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 45px;
    align-items: center;
}


/* Message */

.ols-message-content h2 {
    margin: 0 0 25px;

    color: var(--secondary-color);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    line-height: 1.3;
    font-weight: 500;
}

.ols-message-content p {
    margin: 0 0 18px;

    color: var(--black-color);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.75;
    font-style: italic;
}

.ols-director {
    display: flex;
    flex-direction: column;
    gap: 4px;

    margin-top: 25px;

    color: var(--secondary-color);

    font-family: Arial, Helvetica, sans-serif;
}

.ols-director strong {
    font-size: 16px;
}

.ols-director span {
    font-size: 15px;
}


/* Image */

.ols-message-image {
    width: 100%;
    overflow: hidden;
}

.ols-message-image img {
    width: 100%;
    height: 345px;
    display: block;

    object-fit: cover;
}


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

@media (max-width: 991px) {

    .ols-video-wrapper {
        height: 420px;
    }

    .ols-message-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .ols-message-image {
        order: -1;
    }

    .ols-message-image img {
        height: 350px;
    }

}


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

@media (max-width: 575px) {

    .ols-video-wrapper {
        height: 250px;
    }

    .ols-message-section {
        padding: 30px 0 40px;
    }

    .ols-message-section .container {
        padding: 0 18px;
    }

    .ols-message-grid {
        gap: 25px;
    }

    .ols-message-content h2 {
        font-size: 26px;
        margin-bottom: 18px;
    }

    .ols-message-content p {
        font-size: 15px;
        line-height: 1.6;
    }

    .ols-message-image img {
        height: 260px;
    }

}



.scwb-about-section {
    padding: 40px 0 60px;
    background: var(--white-color);
}

.scwb-container {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 45px;
}

.scwb-heading h2 {
    margin: 0 0 20px;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 600;
    color: var(--secondary-color);
}

.scwb-content p,
.scwb-block p {
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--secondary-color);
}

.scwb-block {
    margin-top: 25px;
}

.scwb-block h3 {
    margin: 0 0 18px;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--secondary-color);
}

.scwb-list {
    margin: 0;
    padding-left: 22px;
}

.scwb-list li {
    margin-bottom: 14px;
    padding-left: 3px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--secondary-color);
}

@media (max-width: 768px) {

    .scwb-container {
        padding: 0 20px;
    }

    .scwb-heading h2 {
        font-size: 25px;
    }

    .scwb-content p,
    .scwb-block p,
    .scwb-list li {
        font-size: 15px;
        line-height: 1.7;
    }

}



.scwb-services-section {
    padding: 40px 0 35px;
    background: var(--white-color);
}

.scwb-services-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 50px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: start;
}

.scwb-services-content h2 {
    margin: 0 0 42px;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--secondary-color);
}

.scwb-services-content p {
    margin: 0 0 25px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--black-color);
}

.scwb-services-quote {
    margin-top: 25px !important;
}

.scwb-know-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    height: 60px;
    margin-top: 12px;
    padding: 0 35px;
    border: 1px solid var(--secondary-color);
    color: var(--secondary-color);
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.scwb-know-more:hover {
    background: var(--primary-color);
    color: var(--white-color);
}

.scwb-services-image {
    width: 100%;
    height: 445px;
    overflow: hidden;
}

.scwb-services-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.scwb-services-links {
    max-width: 1400px;
    margin: 40px auto 0;
    padding: 0 50px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.scwb-service-link {
    min-height: 62px;
    padding: 0 24px;
    border: 1px solid var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--secondary-color);
    text-decoration: none;
    font-size: 18px;
    transition: all 0.3s ease;
}

.scwb-service-link i {
    font-size: 22px;
}

.scwb-service-link:hover {
    background: var(--primary-color);
    color: var(--white-color);
}


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

    .scwb-services-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .scwb-services-image {
        height: 400px;
    }

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

}


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

    .scwb-services-section {
        padding: 35px 0;
    }

    .scwb-services-container {
        padding: 0 20px;
        gap: 30px;
    }

    .scwb-services-content h2 {
        margin-bottom: 25px;
        font-size: 25px;
    }

    .scwb-services-content p {
        font-size: 16px;
        line-height: 1.7;
    }

    .scwb-services-image {
        height: 280px;
    }

    .scwb-services-links {
        padding: 0 20px;
        grid-template-columns: 1fr;
        gap: 15px;
        margin-top: 30px;
    }

    .scwb-service-link {
        min-height: 60px;
        font-size: 16px;
    }

    .scwb-know-more {
        min-width: 200px;
        height: 58px;
        font-size: 17px;
    }

}


/* =========================================
   SCWB - IN THE MEDIA
========================================= */

.scwb-media-section {
    background: #fffbea;
    padding: 55px 0 40px;
}

.scwb-media-section .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 30px;
}


/* Heading */

.scwb-media-heading {
    margin-bottom: 32px;
}

.scwb-media-heading h2 {
    margin: 0;
    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    font-weight: 600;
}


/* Grid */

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


/* Card */

.scwb-media-card {
    background: transparent;
    overflow: hidden;
}


/* Image */

.scwb-media-image {
    width: 100%;
    height: 255px;
    background: var(--white-color);

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

    overflow: hidden;
}

.scwb-media-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}


/* Content */

.scwb-media-content {
    padding-top: 17px;
}

.scwb-media-content h3 {
    margin: 0 0 12px;

    color: var(--black-color);

    font-family: Arial, sans-serif;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 500;
}

.scwb-media-date {
    display: block;

    color: #777777;

    font-family: Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
}


/* Footer */

.scwb-media-footer {
    display: flex;
    justify-content: center;
    margin-top: 75px;
}


/* Button */

.scwb-media-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 260px;
    padding: 15px 24px;

    border: 1px solid var(--secondary-color);
    background: transparent;

    color: var(--secondary-color);
    text-decoration: none;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    font-weight: 600;

    transition: all 0.3s ease;
}

.scwb-media-btn:hover {
    background: var(--primary-color);
    color: var(--white-color);
}


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

@media (max-width: 991px) {

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

    .scwb-media-image {
        height: 230px;
    }

}


@media (max-width: 767px) {

    .scwb-media-section {
        padding: 40px 0;
    }

    .scwb-media-section .container {
        padding: 0 20px;
    }

    .scwb-media-heading h2 {
        font-size: 25px;
    }

    .scwb-media-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .scwb-media-image {
        height: 250px;
    }

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

    .scwb-media-footer {
        margin-top: 50px;
    }

}



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

.lib-hero {
    width: 100%;
    height: 680px;
    position: relative;
    overflow: hidden;
    background: var(--secondary-color);
}

.libHeroSlider {
    width: 100%;
    height: 100%;
}

.libHeroSlider .swiper-wrapper {
    height: 100%;
}

.libHeroSlider .swiper-slide {
    height: 100%;
    overflow: hidden;
}


/* =========================================
   SLIDE
========================================= */

.lib-hero-slide {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
}


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

.lib-panel {
    position: absolute;
    top: 0;
    height: 100%;
    overflow: hidden;
}

.lib-panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

    transform: scale(1.08);
    transition:
        transform 6s ease,
        filter 1s ease;
}


/* Left Panel */

.lib-panel-left {
    left: -7%;
    width: 37%;
    clip-path: polygon(
        0 0,
        100% 0,
        72% 100%,
        0 100%
    );

    z-index: 3;
}


/* Center Panel */

.lib-panel-center {
    left: 27%;
    width: 50%;
    clip-path: polygon(
        13% 0,
        100% 0,
        87% 100%,
        0 100%
    );

    z-index: 2;
}


/* Right Panel */

.lib-panel-right {
    right: -7%;
    width: 38%;
    clip-path: polygon(
        28% 0,
        100% 0,
        100% 100%,
        0 100%
    );

    z-index: 3;
}


/* =========================================
   WHITE DIAGONAL SEPARATORS
========================================= */

.lib-hero-slide::before,
.lib-hero-slide::after {
    content: "";
    position: absolute;
    top: -10%;
    width: 8px;
    height: 120%;
    background: var(--white-color);
    z-index: 8;
    transform: rotate(19deg);
    pointer-events: none;
}

.lib-hero-slide::before {
    left: 27%;
}

.lib-hero-slide::after {
    right: 24%;
}


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

.lib-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(3, 28, 52, 0.45),
            rgba(3, 28, 52, 0.05) 45%,
            rgba(3, 28, 52, 0.35)
        );

    z-index: 5;
    pointer-events: none;
}


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

.lib-hero-content {
    position: absolute;
    z-index: 10;

    left: 8%;
    top: 50%;

    transform: translateY(-50%);

    max-width: 590px;

    color: var(--white-color);
}

.lib-hero-subtitle {
    display: block;

    margin-bottom: 12px;

    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.lib-hero-content h1 {
    margin: 0 0 18px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(48px, 5vw, 78px);
    line-height: 1;
    font-weight: 700;
}

.lib-hero-content p {
    max-width: 540px;

    margin: 0 0 28px;

    font-family: Arial, sans-serif;
    font-size: 19px;
    line-height: 1.65;
}


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

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

    padding: 14px 28px;

    background: var(--primary-color);
    color: var(--white-color);

    border: 1px solid var(--primary-color);
    border-radius: 2px;

    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;

    text-decoration: none;

    transition: all 0.3s ease;
}

.lib-hero-btn:hover {
    background: var(--white-color);
    color: var(--secondary-color);
    border-color: var(--white-color);
}


/* =========================================
   ACTIVE SLIDE IMAGE ANIMATION
========================================= */

.libHeroSlider .swiper-slide-active .lib-panel img {
    transform: scale(1.02);
}


/* Different movement for each panel */

.libHeroSlider .swiper-slide-active .lib-panel-left img {
    animation: libImageMoveLeft 6s ease-in-out infinite alternate;
}

.libHeroSlider .swiper-slide-active .lib-panel-center img {
    animation: libImageMoveCenter 6s ease-in-out infinite alternate;
}

.libHeroSlider .swiper-slide-active .lib-panel-right img {
    animation: libImageMoveRight 6s ease-in-out infinite alternate;
}


@keyframes libImageMoveLeft {

    from {
        transform: scale(1.08) translateX(-1%);
    }

    to {
        transform: scale(1.14) translateX(3%);
    }

}


@keyframes libImageMoveCenter {

    from {
        transform: scale(1.08) translateX(-2%);
    }

    to {
        transform: scale(1.14) translateX(2%);
    }

}


@keyframes libImageMoveRight {

    from {
        transform: scale(1.08) translateX(2%);
    }

    to {
        transform: scale(1.14) translateX(-2%);
    }

}


/* =========================================
   SWIPER FADE
========================================= */

.libHeroSlider .swiper-slide {
    opacity: 0 !important;
    transition: opacity 1.2s ease !important;
}

.libHeroSlider .swiper-slide-active {
    opacity: 1 !important;
}


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

.lib-hero-pagination {
    bottom: 25px !important;
    z-index: 20;
}

.lib-hero-pagination .swiper-pagination-bullet {
    width: 9px;
    height: 9px;

    background: var(--white-color);
    opacity: 0.55;
}

.lib-hero-pagination .swiper-pagination-bullet-active {
    opacity: 1;
    width: 28px;
    border-radius: 10px;
    transition: width 0.3s ease;
}


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

@media (max-width: 991px) {

    .lib-hero {
        height: 600px;
    }

    .lib-panel-left {
        width: 40%;
    }

    .lib-panel-center {
        left: 30%;
        width: 50%;
    }

    .lib-panel-right {
        width: 40%;
    }

    .lib-hero-content {
        left: 7%;
        max-width: 500px;
    }

    .lib-hero-content h1 {
        font-size: 55px;
    }

    .lib-hero-content p {
        font-size: 17px;
    }

}


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

@media (max-width: 767px) {

    .lib-hero {
        height: 620px;
    }

    /*
       Keep the three-panel visual,
       but make the center panel dominant.
    */

    .lib-panel-left {
        left: -35%;
        width: 70%;
    }

    .lib-panel-center {
        left: 15%;
        width: 70%;

        clip-path: polygon(
            12% 0,
            100% 0,
            88% 100%,
            0 100%
        );
    }

    .lib-panel-right {
        right: -35%;
        width: 70%;
    }

    .lib-hero-slide::before {
        left: 18%;
    }

    .lib-hero-slide::after {
        right: 18%;
    }

    .lib-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(3, 28, 52, 0.65),
                rgba(3, 28, 52, 0.30),
                rgba(3, 28, 52, 0.65)
            );
    }

    .lib-hero-content {
        left: 25px;
        right: 25px;
        top: 50%;
        max-width: none;
    }

    .lib-hero-subtitle {
        font-size: 13px;
    }

    .lib-hero-content h1 {
        font-size: 45px;
        line-height: 1.05;
    }

    .lib-hero-content p {
        font-size: 16px;
        line-height: 1.5;
    }

    .lib-hero-btn {
        padding: 13px 23px;
    }

}



/* =========================================
   LIBRARY ANNOUNCEMENT BAR
========================================= */

.lib-announcement {
    width: 100%;
    height: 72px;
    display: flex;
    align-items: center;

    background: var(--white-color);

    overflow: hidden;
    position: relative;

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

    z-index: 20;
}


/* Logo / Speaker */

.lib-announcement-logo {
    width: 145px;
    min-width: 145px;
    height: 100%;

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

    background: var(--white-color);

    position: relative;
    z-index: 5;
}

.lib-speaker-icon {
    width: 45px;
    height: 35px;

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

    color: var(--primary-color);

    font-size: 42px;
    font-weight: 700;

    transform: rotate(180deg);
}


/* =========================================
   MARQUEE
========================================= */

.lib-marquee {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
}

.lib-marquee-track {
    display: inline-flex;
    align-items: center;

    width: max-content;

    animation: libMarquee 32s linear infinite;
}

.lib-marquee:hover .lib-marquee-track {
    animation-play-state: paused;
}


.lib-marquee-item {
    display: inline-flex;
    align-items: center;

    margin-right: 70px;

    color: var(--secondary-color);

    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
}

.lib-marquee-item strong {
    color: var(--secondary-color);
}

.lib-marquee-item span {
    margin-left: 5px;
    color: var(--primary-color);
}

.lib-marquee-item b {
    margin-left: 7px;

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

    color: var(--white-color);
    background: var(--primary-color);

    width: 32px;
    height: 20px;

    border-radius: 50%;

    font-size: 8px;
    font-weight: 700;
}


/* Running Animation */

@keyframes libMarquee {

    0% {
        transform: translateX(0);
    }

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

}


/* =========================================
   LIBRARY SEARCH SECTION
========================================= */

.lib-search-section {
    width: 100%;

    background: var(--secondary-color);

    padding: 40px 20px 26px;
}


.lib-search-wrapper {
    width: 100%;
    max-width: 1000px;

    margin: 0 auto;
}


/* Search Box */

.lib-search-box {
    width: 100%;
    height: 66px;

    display: flex;
    align-items: center;

    background: var(--white-color);

    border-radius: 40px;

    overflow: hidden;

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


/* Select */

.lib-search-select {
    width: 170px;
    height: 100%;

    display: flex;
    align-items: center;

    padding-left: 38px;

    position: relative;
}


.lib-search-select::after {
    content: "\f078";

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

    position: absolute;
    right: 20px;

    color: var(--black-color);

    pointer-events: none;
}


.lib-search-select select {
    width: 100%;
    height: 100%;

    border: none;
    outline: none;

    background: transparent;

    appearance: none;

    color: #222222;

    font-family: Arial, sans-serif;
    font-size: 17px;

    cursor: pointer;
}


/* Search Input */

.lib-search-input {
    flex: 1;
    height: 100%;

    display: flex;
    align-items: center;
}


.lib-search-input input {
    width: 100%;
    height: 100%;

    border: none;
    outline: none;

    padding: 0 15px;

    background: transparent;

    color: #333333;

    font-family: Arial, sans-serif;
    font-size: 18px;
}


.lib-search-input input::placeholder {
    color: #999999;
}


/* Search Button */

.lib-search-btn {
    width: 70px;
    height: 100%;

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

    border: none;
    outline: none;

    background: transparent;

    color: var(--primary-color);

    font-size: 21px;

    cursor: pointer;

    transition: 0.3s ease;
}


.lib-search-btn:hover {
    color: var(--secondary-color);
}


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

@media (max-width: 991px) {

    .lib-announcement-logo {
        width: 90px;
        min-width: 90px;
    }

    .lib-marquee-item {
        font-size: 16px;
        margin-right: 50px;
    }

    .lib-search-wrapper {
        max-width: 850px;
    }

}


@media (max-width: 767px) {

    .lib-announcement {
        height: 58px;
    }

    .lib-announcement-logo {
        width: 65px;
        min-width: 65px;
    }

    .lib-speaker-icon {
        font-size: 30px;
    }

    .lib-marquee-item {
        font-size: 14px;
        margin-right: 40px;
    }

    .lib-search-section {
        padding: 25px 15px;
    }

    .lib-search-box {
        height: 58px;
    }

    .lib-search-select {
        width: 105px;
        padding-left: 18px;
    }

    .lib-search-select::after {
        right: 10px;
        font-size: 11px;
    }

    .lib-search-select select {
        font-size: 14px;
    }

    .lib-search-input input {
        font-size: 14px;
        padding: 0 8px;
    }

    .lib-search-btn {
        width: 55px;
        font-size: 18px;
    }

}


@media (max-width: 480px) {

    .lib-announcement-logo {
        width: 45px;
        min-width: 45px;
    }

    .lib-speaker-icon {
        font-size: 25px;
    }

    .lib-search-select {
        width: 90px;
        padding-left: 14px;
    }

    .lib-search-select select {
        font-size: 13px;
    }

    .lib-search-input input {
        font-size: 13px;
    }

}

.lib-search-section {
    background: linear-gradient(
        135deg,
        #123f69 0%,
        #183f68 42%,
        #c91e58 100%
    );

    padding: 28px 30px 70px;
    color: var(--white-color);
}


/* ==========================
   SEARCH BAR
========================== */

.lib-search-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 130px;
}

.lib-search-box {
    width: min(100%, 1000px);
    height: 66px;

    display: flex;
    align-items: center;

    background: var(--white-color);
    border-radius: 40px;

    padding: 0 18px 0 35px;

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

.lib-search-select {
    min-width: 120px;
}

.lib-search-select select {
    width: 100%;

    border: 0;
    outline: none;
    background: transparent;

    font-size: 18px;
    color: var(--black-color);

    cursor: pointer;
}

.lib-search-input {
    flex: 1;
}

.lib-search-input input {
    width: 100%;

    border: 0;
    outline: none;
    background: transparent;

    padding: 0 15px;

    font-size: 19px;
    color: #333;
}

.lib-search-input input::placeholder {
    color: #777;
}

.lib-search-btn {
    width: 50px;
    height: 50px;

    border: 0;
    background: transparent;

    color: var(--primary-color);

    font-size: 20px;

    cursor: pointer;
}


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

.lib-intro {
    max-width: 1350px;
    margin: 0 auto;

    text-align: center;
}

.lib-intro h1 {
    max-width: 1250px;

    margin: 0 auto 50px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 30px;
    line-height: 1.12;
    font-weight: 600;

    color: #f8f4ed;
}

.lib-intro p {
    max-width: 1320px;

    margin: 0 auto 8px;

    font-size: 18px;
    line-height: 1.55;

    color: var(--white-color);
}

.lib-read-more {
    display: inline-block;

    margin-top: 35px;

    color: var(--white-color);

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

    text-decoration: none;
}

.lib-read-more:hover {
    text-decoration: underline;
}


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

@media (max-width: 991px) {

    .lib-search-wrapper {
        margin-bottom: 80px;
    }

    .lib-intro h1 {
        font-size: 28px;
    }

    .lib-intro p {
        font-size: 17px;
    }
}


@media (max-width: 767px) {

    .lib-search-section {
        padding: 20px 15px 50px;
    }

    .lib-search-box {
        height: 58px;
        padding-left: 20px;
    }

    .lib-search-select {
        min-width: 90px;
    }

    .lib-search-select select {
        font-size: 15px;
    }

    .lib-search-input input {
        font-size: 15px;
        padding: 0 8px;
    }

    .lib-search-btn {
        font-size: 19px;
        width: 40px;
    }

    .lib-search-wrapper {
        margin-bottom: 70px;
    }

    .lib-intro h1 {
        font-size: 25px;
        margin-bottom: 30px;
    }

    .lib-intro p {
        font-size: 16px;
        line-height: 1.6;
    }

    .lib-read-more {
        font-size: 18px;
    }
}



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

.lib-highlights-section {
    padding: 35px 0 80px;
    background: var(--white-color);
}

.lib-section-title {
    text-align: center;
    margin-bottom: 25px;
}

.lib-section-title h2 {
    margin: 0;

    font-family: Georgia, "Times New Roman", serif;

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

    color: var(--primary-color);
}


.lib-highlights-grid {
    /* max-width: 1030px; */
    margin: 0 auto;

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

    gap: 20px;
}


.lib-highlight-card {
    min-height: 155px;

    padding: 25px 15px 18px;

    background: var(--white-color);

    border-radius: 12px;

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

    border-bottom: 6px solid var(--primary-color);

    display: flex;
    flex-direction: column;

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

    text-align: center;
}


.lib-highlight-icon {
    font-size: 40px;
    color: var(--primary-color);

    margin-bottom: 5px;
}

.lib-highlight-icon.lib-blue {
    color: var(--secondary-color);
}

.lib-highlight-icon.lib-green {
    color: #008c19;
}

.lib-highlight-icon.lib-black {
    color: var(--black-color);
}


.lib-highlight-number {
    font-size: 29px;
    line-height: 1;

    font-weight: 700;

    color: var(--black-color);
}

.lib-highlight-label {
    font-size: 16px;
    color: #555;

    margin-top: 3px;
}



/* =========================================
   RESOURCES
========================================= */

.lib-resources-section {
    padding: 25px 0 70px;
    background: var(--white-color);
}


.lib-tabs {
    max-width: 1000px;

    margin: 0 auto 45px;

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

    gap: 70px;
}


.lib-tab-btn {
    border: 0;
    background: transparent;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 34px;

    color: var(--secondary-color);

    cursor: pointer;

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

    transition: 0.3s ease;
}


.lib-tab-btn.active {
    color: var(--primary-color);
}


.lib-tab-btn i {
    font-size: 25px;

    transition: transform 0.3s ease;
}

.lib-tab-btn.active i {
    transform: rotate(180deg);
}


.lib-tab-divider {
    width: 3px;
    height: 43px;

    background: var(--secondary-color);
}



/* TAB CONTENT */

.lib-tab-content {
    display: none;

    /* max-width: 1100px; */
    margin: 0 auto;
}

.lib-tab-content.active {
    display: block;
}



/* =========================================
   SWIPER
========================================= */

.lib-resource-slider-wrap {
    position: relative;

    display: flex;
    align-items: center;

    gap: 15px;
}


.libNewArrivalsSlider,
.libPopularResourcesSlider {
    width: 100%;
    overflow: hidden;
}


.lib-book-item {
    height: 235px;

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


.lib-book-item img {
    width: 100%;
    height: 235px;

    object-fit: contain;

    display: block;
}


.lib-logo-item {
    height: 120px;

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

    padding: 15px;
}


.lib-logo-item img {
    max-width: 100%;
    max-height: 90px;

    object-fit: contain;
}


.lib-resource-prev,
.lib-resource-next {
    flex: 0 0 35px;

    width: 35px;
    height: 50px;

    border: 0;

    background: transparent;

    color: var(--primary-color);

    font-size: 35px;

    cursor: pointer;

    z-index: 2;
}


.lib-resource-prev:hover,
.lib-resource-next:hover {
    color: var(--secondary-color);
}


.lib-new-pagination,
.lib-popular-pagination {
    position: static !important;

    margin-top: 15px;
}


.lib-new-pagination .swiper-pagination-bullet,
.lib-popular-pagination .swiper-pagination-bullet {
    width: 6px;
    height: 6px;

    opacity: 1;

    background: #ccc;
}


.lib-new-pagination .swiper-pagination-bullet-active,
.lib-popular-pagination .swiper-pagination-bullet-active {
    background: var(--black-color);
}



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

@media (max-width: 1100px) {

    .lib-highlights-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 800px;
    }

    .lib-tabs {
        gap: 40px;
    }

}


@media (max-width: 767px) {

    .lib-highlights-section {
        padding: 30px 15px 60px;
    }

    .lib-highlights-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .lib-highlight-card {
        min-height: 140px;
    }

    .lib-highlight-number {
        font-size: 24px;
    }

    .lib-highlight-label {
        font-size: 14px;
    }

    .lib-tabs {
        gap: 15px;
        margin-bottom: 30px;
    }

    .lib-tab-btn {
        font-size: 23px;
        gap: 5px;
    }

    .lib-tab-btn i {
        font-size: 17px;
    }

    .lib-tab-divider {
        height: 35px;
    }

    .lib-resource-prev,
    .lib-resource-next {
        width: 25px;
        flex-basis: 25px;
        font-size: 25px;
    }

}


@media (max-width: 480px) {

    .lib-highlights-grid {
        grid-template-columns: 1fr 1fr;
    }

    .lib-section-title h2 {
        font-size: 30px;
    }

    .lib-tab-btn {
        font-size: 19px;
    }

    .lib-tab-divider {
        width: 2px;
    }

}



.lib-guidelines-section {
    padding: 40px 0 70px;
    background: var(--white-color);
}

.lib-guidelines-heading {
    text-align: center;
    margin-bottom: 65px;
}

.lib-guidelines-heading h2 {
    margin: 0;

    font-family: Georgia, "Times New Roman", serif;

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

    color: var(--primary-color);
}


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

.lib-guidelines-grid {
    /* max-width: 1140px; */
    margin: 0 auto;

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

    gap: 22px;
}


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

.lib-guideline-card {
    min-height: 198px;

    padding: 12px 18px 10px;

    background: var(--white-color);

    border-radius: 14px;

    box-shadow:
        0 3px 15px rgba(0, 0, 0, 0.09);

    display: flex;
    flex-direction: column;

    align-items: center;

    text-align: center;

    transition: all 0.3s ease;
}

.lib-guideline-card:hover {
    transform: translateY(-4px);

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


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

.lib-guideline-icon {
    height: 48px;

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

    font-size: 31px;

    color: var(--secondary-color);

    margin-bottom: 5px;
}


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

.lib-guideline-card h3 {
    margin: 0 0 12px;

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

    font-weight: 400;

    color: var(--black-color);
}


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

.lib-guideline-card p {
    max-width: 340px;

    margin: 0 auto 15px;

    font-size: 14px;
    line-height: 1.25;

    color: #666;
}


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

.lib-guideline-btn {
    width: 188px;

    min-height: 30px;

    margin-top: auto;

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

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

    color: var(--primary-color);

    background: var(--white-color);

    font-size: 13px;

    text-decoration: none;

    transition: all 0.3s ease;
}

.lib-guideline-btn:hover {
    background: var(--secondary-color);

    color: var(--white-color);

    border-color: var(--secondary-color);
}


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

@media (max-width: 991px) {

    .lib-guidelines-grid {
        grid-template-columns: repeat(2, 1fr);

        padding: 0 25px;
    }

}

@media (max-width: 600px) {

    .lib-guidelines-section {
        padding: 35px 15px 50px;
    }

    .lib-guidelines-heading {
        margin-bottom: 40px;
    }

    .lib-guidelines-heading h2 {
        font-size: 30px;
    }

    .lib-guidelines-grid {
        grid-template-columns: 1fr;

        padding: 0;
    }

    .lib-guideline-card {
        min-height: 200px;
    }

}



/* ==========================================
   VISITOR'S INSIGHTS
========================================== */

.lib-visitor-section {
    position: relative;

    min-height: 395px;

    padding: 55px 0;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.78),
            rgba(255, 255, 255, 0.78)
        ),
        url("../images/ssju/ssju1.jpg");

    background-size: cover;
    background-position: center;

    overflow: hidden;
}


.lib-visitor-content {
    position: relative;

    /* max-width: 1000px; */

    margin: 0 auto;

    text-align: center;
}


.lib-visitor-content h2 {
    margin: 0 0 45px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 30px;

    font-weight: 600;

    font-style: italic;

    color: var(--secondary-color);
}


/* Swiper */

.libVisitorSlider {
    width: 100%;

    padding-bottom: 35px;
}


.libVisitorSlider .swiper-slide {
    display: flex;

    justify-content: center;

    opacity: 0 !important;

    transition: opacity 0.8s ease;
}

.libVisitorSlider .swiper-slide-active {
    opacity: 1 !important;
}


/* Testimonial */

.lib-testimonial-card {
    width: min(100%, 920px);

    min-height: 190px;

    padding: 35px 55px;

    border-radius: 30px;

    background: rgba(45, 58, 66, 0.68);

    color: var(--white-color);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    box-sizing: border-box;
}


.lib-testimonial-text {
    max-width: 820px;

    margin: 0 auto 22px;

    font-size: 17px;

    line-height: 1.45;

    font-style: italic;

    font-weight: 500;

    color: var(--white-color);
}


.lib-testimonial-person {
    display: flex;

    align-items: center;

    gap: 14px;

    text-align: left;
}


.lib-testimonial-image {
    width: 58px;
    height: 58px;

    flex: 0 0 58px;

    border-radius: 50%;

    overflow: hidden;

    border: 2px solid var(--white-color);
}


.lib-testimonial-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.lib-testimonial-info h3 {
    margin: 0 0 4px;

    font-size: 17px;

    font-weight: 600;

    color: var(--white-color);
}


.lib-testimonial-info span {
    display: block;

    font-size: 14px;

    color: #e7e7e7;
}


/* Pagination */

.lib-visitor-pagination {
    bottom: 0 !important;
}

.lib-visitor-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;

    background: var(--white-color);

    opacity: 0.6;
}

.lib-visitor-pagination .swiper-pagination-bullet-active {
    opacity: 1;

    background: var(--primary-color);
}



/* ==========================================
   EXPLORE YOUR LIBRARY
========================================== */

.lib-explore-section {
    padding: 40px 0 65px;

    background: #eeeeee;

    text-align: center;
}


.lib-explore-intro {
    margin: 0 0 18px;

    font-size: 16px;

    color: var(--black-color);
}


.lib-explore-section h2 {
    margin: 0 0 60px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 36px;

    font-weight: 400;

    color: var(--primary-color);
}


/* Grid */

.lib-explore-grid {
    /* max-width: 1150px; */

    margin: 0 auto;

    display: grid;

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

    gap: 25px;

    align-items: start;
}


.lib-explore-item {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    text-decoration: none;

    color: var(--primary-color);

    transition: 0.3s ease;
}


.lib-explore-icon {
    height: 80px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 12px;

    font-size: 57px;

    color: var(--secondary-color);
}


.lib-explore-item span {
    font-size: 25px;

    line-height: 1.35;

    color: var(--primary-color);

    text-align: center;

    font-weight: 400;
}


.lib-explore-item:hover {
    transform: translateY(-5px);
}


.lib-explore-item:hover .lib-explore-icon {
    color: var(--secondary-color);
}



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

@media (max-width: 991px) {

    .lib-explore-grid {
        grid-template-columns: repeat(3, 1fr);

        gap: 35px;
    }

    .lib-testimonial-card {
        width: 90%;
    }

}


@media (max-width: 767px) {

    .lib-visitor-section {
        min-height: auto;

        padding: 45px 15px;
    }

    .lib-visitor-content h2 {
        font-size: 25px;

        margin-bottom: 30px;
    }

    .lib-testimonial-card {
        padding: 30px 20px;

        border-radius: 22px;
    }

    .lib-testimonial-text {
        font-size: 15px;
    }

    .lib-testimonial-person {
        text-align: left;
    }


    .lib-explore-section {
        padding: 40px 15px 55px;
    }

    .lib-explore-section h2 {
        font-size: 25px;

        margin-bottom: 45px;
    }

    .lib-explore-grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 35px 15px;
    }

}


@media (max-width: 450px) {

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

    .lib-explore-icon {
        font-size: 45px;
    }

    .lib-explore-item span {
        font-size: 11px;
    }

}



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

.lib-infra-section {
    padding: 55px 0 65px;

    background: var(--secondary-color);

    color: var(--white-color);
}


.lib-infra-title {
    margin: 0 0 55px;

    text-align: center;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 46px;

    font-weight: 400;

    color: var(--white-color);
}


/* Main Box */

.lib-infra-wrapper {
    max-width: 1580px;

    margin: auto;

    padding: 25px 40px 25px;

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

    border-radius: 38px;

    box-shadow:
        0 0 15px rgba(255, 255, 255, 0.45),
        inset 0 0 10px rgba(255, 255, 255, 0.05);

    box-sizing: border-box;
}


/* ==========================================
   TABS
========================================== */

.lib-infra-tabs {
    display: flex;

    justify-content: center;

    align-items: center;

    gap: 55px;

    margin-bottom: 45px;

    flex-wrap: wrap;
}


.lib-infra-tab {
    position: relative;

    padding: 0;

    border: 0;

    outline: none;

    background: transparent;

    color: var(--white-color);

    font-size: 20px;

    font-weight: 700;

    cursor: pointer;

    transition: 0.3s ease;
}


.lib-infra-tab::after {
    content: "";

    position: absolute;

    left: 0;

    bottom: -10px;

    width: 0;

    height: 3px;

    background: var(--white-color);

    transition: width 0.3s ease;
}


.lib-infra-tab:hover::after,
.lib-infra-tab.active::after {
    width: 100%;
}


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

.lib-infra-content {
    width: 100%;
}


.lib-infra-panel {
    display: none;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 55px;

    animation: libInfraFade 0.5s ease;
}


.lib-infra-panel.active {
    display: grid;
}


@keyframes libInfraFade {

    from {
        opacity: 0;

        transform: translateY(8px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }

}


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

.lib-infra-text {
    padding: 30px 0 30px 0;
}


.lib-infra-text h3 {
    margin: 0 0 12px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 30px;

    font-weight: 600;

    color: var(--white-color);
}


.lib-infra-text > p {
    margin: 0 0 18px;

    max-width: 700px;

    font-size: 18px;

    line-height: 1.5;

    color: var(--white-color);
}


.lib-infra-text ul {
    list-style: none;

    padding: 0;

    margin: 0;
}


.lib-infra-text li {
    position: relative;

    padding-left: 30px;

    margin-bottom: 12px;

    font-size: 18px;

    line-height: 1.45;

    color: var(--white-color);
}


.lib-infra-text li::before {
    content: "✓";

    position: absolute;

    left: 0;

    top: 1px;

    width: 20px;

    height: 20px;

    border-radius: 50%;

    background: #0c9b68;

    color: #062d27;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 13px;

    font-weight: 900;
}


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

.lib-infra-image {
    width: 100%;

    height: 438px;

    overflow: hidden;
}


.lib-infra-image img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    border-radius: 0;
}


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

@media (max-width: 1100px) {

    .lib-infra-wrapper {
        padding: 25px;
    }

    .lib-infra-tabs {
        gap: 30px;
    }

    .lib-infra-tab {
        font-size: 17px;
    }

    .lib-infra-panel {
        gap: 30px;
    }

    .lib-infra-text h3 {
        font-size: 30px;
    }

    .lib-infra-text > p,
    .lib-infra-text li {
        font-size: 17px;
    }

}


@media (max-width: 767px) {

    .lib-infra-section {
        padding: 40px 15px 50px;
    }

    .lib-infra-title {
        font-size: 25px;

        margin-bottom: 35px;
    }

    .lib-infra-wrapper {
        padding: 25px 20px;

        border-radius: 25px;
    }

    .lib-infra-tabs {
        gap: 22px;

        margin-bottom: 30px;
    }

    .lib-infra-tab {
        font-size: 15px;
    }

    .lib-infra-panel.active {
        display: flex;

        flex-direction: column;

        gap: 25px;
    }

    .lib-infra-text {
        padding: 10px 0;
    }

    .lib-infra-text h3 {
        font-size: 25px;
    }

    .lib-infra-text > p,
    .lib-infra-text li {
        font-size: 16px;
    }

    .lib-infra-image {
        height: 300px;
    }

}


@media (max-width: 480px) {

    .lib-infra-tabs {
        display: grid;

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

        gap: 20px;

        text-align: center;
    }

    .lib-infra-tab {
        font-size: 14px;
    }

    .lib-infra-image {
        height: 240px;
    }

}


/* ==========================================
   FREE ONLINE COURSE PLATFORM
========================================== */

.lib-online-courses-section {
    padding: 40px 0 60px;
    background: var(--white-color);
}

.lib-online-courses-heading {
    text-align: center;
    margin-bottom: 75px;
}

.lib-online-courses-heading h2 {
    margin: 0;

    color: var(--primary-color);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 30px;

    font-weight: 600;
}


/* Cards Grid */

.lib-online-courses-grid {
    /* max-width: 1400px; */

    margin: 0 auto;

    display: grid;

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

    gap: 18px;
}


/* Card */

.lib-course-card {
    min-height: 278px;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    border-radius: 8px;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);

    color: var(--white-color);
}


/* Card Colors */

.lib-course-swayam {
    background: #176cf5;
}

.lib-course-mooc {
    background: #a8adb2;
}

.lib-course-stanford {
    background: #df3047;
}

.lib-course-mit {
    background: #ffbe0b;
    color: #111;
}

.lib-course-michigan {
    background: #16c0db;
    color: #111;
}

.lib-course-ohsc {
    background: #d56d98;
}


/* Logo */

.lib-course-logo {
    height: 100px;

    padding: 18px 18px 5px;

    display: flex;

    align-items: center;

    justify-content: center;
}

.lib-course-logo img {
    max-width: 100%;

    max-height: 70px;

    width: auto;

    object-fit: contain;
}


/* Content */

.lib-course-content {
    flex: 1;

    padding: 5px 19px 10px;
}

.lib-course-content p {
    margin: 0 0 10px;

    font-size: 16px;

    line-height: 1.3;
}


/* Footer */

.lib-course-footer {
    padding: 8px;

    display: flex;

    justify-content: center;

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


/* Button */

.lib-course-btn {
    display: inline-flex;

    align-items: center;

    gap: 4px;

    padding: 5px 12px;

    background: var(--white-color);

    color: var(--black-color);

    border-radius: 4px;

    font-size: 15px;

    text-decoration: none;

    transition: 0.3s ease;
}

.lib-course-btn:hover {
    transform: translateY(-2px);

    color: var(--primary-color);
}

.lib-course-btn i {
    font-size: 14px;
}


/* Responsive */

@media (max-width: 1200px) {

    .lib-online-courses-grid {
        grid-template-columns: repeat(3, 1fr);

        max-width: 900px;
    }

}

@media (max-width: 700px) {

    .lib-online-courses-section {
        padding: 10px 15px 60px;
    }

    .lib-online-courses-heading {
        margin-bottom: 40px;
    }

    .lib-online-courses-heading h2 {
        font-size: 25px;
    }

    .lib-online-courses-grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 15px;
    }

}

@media (max-width: 480px) {

    .lib-online-courses-grid {
        grid-template-columns: 1fr;
    }

}


/* ==========================================
   EXPLORE RESOURCES
========================================== */

.lib-explore-section {
    padding: 30px 0 55px;

    background: var(--white-color);
}


.lib-explore-grid {
    max-width: 1150px;

    margin: 0 auto;

    display: grid;

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

    align-items: center;

    min-height: 150px;
}


/* Item */

.lib-explore-item {
    text-decoration: none;

    display: block;
}


.lib-explore-content {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 55px;

    transition: 0.3s ease;
}


.lib-explore-item h2 {
    margin: 0;

    text-align: center;

    color: var(--primary-color);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 30px;

    line-height: 1.2;

    font-weight: 600;
}


/* Arrow */

.lib-explore-arrow {
    color: var(--primary-color);

    font-size: 42px;

    line-height: 1;

    transition: 0.3s ease;
}


.lib-explore-item:hover .lib-explore-content {
    transform: translateX(5px);
}


.lib-explore-item:hover .lib-explore-arrow {
    transform: translateX(7px);
}


/* Divider */

.lib-explore-divider {
    width: 3px;

    height: 95px;

    background: var(--secondary-color);

    margin: 0 65px;
}


/* Responsive */

@media (max-width: 900px) {

    .lib-explore-grid {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .lib-explore-divider {
        width: 80px;

        height: 3px;

        margin: 0 auto;
    }

    .lib-explore-content {
        gap: 30px;
    }

}


@media (max-width: 500px) {

    .lib-explore-item h2 {
        font-size: 25px;
    }

    .lib-explore-arrow {
        font-size: 32px;
    }

}


/* =========================================
   SSJU ARCHIVES
========================================= */

.arc-archives-section {
    padding: 40px 0 60px;
    background: var(--white-color);
}


/* Heading */

.arc-archives-heading {
    max-width: 900px;
    margin: 0 auto 45px;
    text-align: center;
}

.arc-archives-heading h2 {
    margin: 0 0 15px;

    color: var(--secondary-color);

    font-family: Georgia, "Times New Roman", serif;

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

.arc-archives-heading p {
    margin: 0 auto;

    color: #555;

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


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

.arc-archives-grid {
    max-width: 1375px;

    margin: 0 auto;

    display: grid;

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

    gap: 38px 36px;
}


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

.arc-archive-card {
    position: relative;

    display: block;

    height: 212px;

    overflow: hidden;

    border-radius: 6px;

    text-decoration: none;

    background: var(--secondary-color);

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

    transition: 0.35s ease;
}


.arc-archive-card:hover {
    transform: translateY(-4px);

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


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

.arc-archive-image {
    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 50%;

    overflow: hidden;
}


.arc-archive-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    filter: grayscale(100%);

    transition: 0.5s ease;
}


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


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

.arc-archive-overlay {
    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;

    width: 50%;

    padding: 20px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    background: rgba(8, 48, 87, 0.94);

    overflow: hidden;
}


/*
   Creates the subtle duplicate image effect
   visible behind the blue overlay.
*/

.arc-archive-overlay::before {
    content: "";

    position: absolute;

    inset: 0;

    background: inherit;

    opacity: 0.08;

    pointer-events: none;
}


.arc-archive-overlay h3 {
    position: relative;

    z-index: 2;

    margin: 0;

    max-width: 95%;

    color: var(--white-color);

    font-size: 18px;

    line-height: 1.35;

    font-weight: 600;
}


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

.arc-archive-arrow {
    position: relative;

    z-index: 3;

    align-self: flex-end;

    width: 36px;
    height: 36px;

    display: flex;

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

    border-radius: 5px;

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

    color: var(--white-color);

    font-size: 15px;

    transition: 0.3s ease;
}


.arc-archive-card:hover .arc-archive-arrow {
    background: var(--white-color);

    color: var(--secondary-color);

    transform: translateX(4px);
}


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

@media (max-width: 1100px) {

    .arc-archives-grid {
        grid-template-columns: repeat(2, 1fr);

        padding: 0 20px;
    }

}


@media (max-width: 700px) {

    .arc-archives-section {
        padding: 45px 15px 60px;
    }

    .arc-archives-heading h2 {
        font-size: 25px;
    }

    .arc-archives-heading p {
        font-size: 15px;
    }

    .arc-archives-grid {
        grid-template-columns: 1fr;

        gap: 25px;

        padding: 0;
    }

    .arc-archive-card {
        height: 210px;
    }

}


@media (max-width: 450px) {

    .arc-archive-card {
        height: 190px;
    }

    .arc-archive-overlay {
        padding: 15px;
    }

    .arc-archive-overlay h3 {
        font-size: 17px;
    }

}



.ac-calendar-section {
    padding: 50px 0 60px;
    background: var(--white-color);
}

.ac-calendar-section .container {
    max-width: 1200px;
    margin: 0 auto;
}

.ac-calendar-item {
    margin-bottom: 42px;
}

.ac-calendar-item h2 {
    margin: 0 0 18px;
    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
}

.ac-calendar-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.ac-calendar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 61px;
    padding: 14px 22px;

    border: 1px solid var(--secondary-color);
    background: var(--white-color);

    color: var(--secondary-color);
    text-decoration: none;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    font-weight: 600;

    transition: all 0.3s ease;
}

.ac-calendar-btn:hover {
    background: var(--secondary-color);
    color: var(--white-color);
}


/* =========================
   Responsive
========================= */

@media (max-width: 767px) {

    .ac-calendar-section {
        padding: 20px 15px 45px;
    }

    .ac-calendar-item {
        margin-bottom: 32px;
    }

    .ac-calendar-item h2 {
        font-size: 25px;
        margin-bottom: 15px;
    }

    .ac-calendar-buttons {
        gap: 12px;
    }

    .ac-calendar-btn {
        width: 100%;
        min-height: 54px;
        font-size: 15px;
        padding: 12px 16px;
        text-align: center;
    }

}


/* university at a glance section  */


/* =========================================
   UAAG - INTRODUCTION
========================================= */

.uaag-introduction {
    padding: 40px 0 60px;
    background: var(--white-color);
}

.uaag-container {
    width: 90%;
    max-width: 1225px;
    margin: 0 auto;
}


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

.uaag-heading h2 {
    position: relative;

    margin: 0 0 22px;
    padding-bottom: 8px;

    color: var(--secondary-color);

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

.uaag-heading h2::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;

    width: 100%;
    height: 3px;

    background: var(--primary-color);
}


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

.uaag-content p {
    margin: 0;

    color: #5d7590;

    font-size: 17px;
    line-height: 1.6;
    font-weight: 400;
}


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

.uaag-cards {
    display: grid;

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

    gap: 24px;

    margin-top: 35px;
}

.uaag-card {
    min-height: 220px;

    padding: 35px 25px;

    background: var(--white-color);

    border-radius: 5px;

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

    text-align: center;

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

    transition: all 0.3s ease;
}

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

    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.18);
}


/* Card heading */

.uaag-card h3 {
    margin: 0 0 20px;

    color: var(--secondary-color);

    font-size: 20px;
    font-weight: 600;
}


/* Number */

.uaag-card > span {
    color: var(--primary-color);

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


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

.uaag-campus-card {
    justify-content: flex-start;
}

.uaag-campus-card h3 {
    margin-bottom: 15px;
}


/* Campus links */

.uaag-campus-links {
    width: 100%;

    display: grid;

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

    gap: 10px;
}

.uaag-campus-links a {
    display: flex;

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

    gap: 8px;

    padding: 10px 12px;

    color: var(--secondary-color);

    background: var(--white-color);

    border: 1px solid rgba(8, 32, 65, 0.15);

    border-radius: 4px;

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

    text-decoration: none;

    transition: all 0.25s ease;
}

.uaag-campus-links a i {
    color: var(--primary-color);

    font-size: 13px;

    transition: transform 0.25s ease;
}

.uaag-campus-links a:hover {
    color: var(--white-color);

    background: var(--secondary-color);

    border-color: var(--secondary-color);
}

.uaag-campus-links a:hover i {
    color: var(--primary-color);

    transform: translateX(4px);
}


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

@media (max-width: 991px) {

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

    .uaag-card:last-child {
        grid-column: span 2;
    }

    .uaag-content p {
        font-size: 17px;
    }

}


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

@media (max-width: 576px) {

    .uaag-introduction {
        padding: 30px 0 45px;
    }

    .uaag-container {
        width: 92%;
    }

    .uaag-heading h2 {
        font-size: 25px;
    }

    .uaag-content p {
        font-size: 16px;
        line-height: 1.6;
    }

    .uaag-cards {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 25px;
    }

    .uaag-card:last-child {
        grid-column: auto;
    }

    .uaag-card {
        min-height: 190px;
    }

    .uaag-card h3 {
        font-size: 21px;
    }

    .uaag-campus-links {
        grid-template-columns: 1fr;
    }

}


/* =========================================
   UAAG - VISION MISSION & GOALS
========================================= */

.uaag-vmg-section {
    padding: 35px 0 60px;
    background: var(--white-color);
}

.uaag-container {
    width: 90%;
    max-width: 1225px;
    margin: 0 auto;
}


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

.uaag-heading h2 {
    position: relative;

    margin: 0 0 38px;
    padding-bottom: 8px;

    color: var(--secondary-color);

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

.uaag-heading h2::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 3px;

    background: var(--primary-color);
}


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

.uaag-vmg-card {
    margin-bottom: 37px;

    overflow: hidden;

    background: #f3f1ed;

    border-radius: 4px;
}


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

.uaag-vmg-title {
    padding: 18px 20px;

    background: var(--secondary-color);

    text-align: center;
}

.uaag-vmg-title h3 {
    margin: 0;

    color: var(--white-color);

    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
}


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

.uaag-vmg-content {
    padding: 36px 27px;

    color: #5d7590;

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

.uaag-vmg-content p {
    margin: 0 0 20px;
}

.uaag-vmg-content p:last-child {
    margin-bottom: 0;
}


/* =========================================
   MISSION INTRO
========================================= */

.uaag-mission-intro {
    margin-top: 22px !important;

    text-align: center;
}

.uaag-mission-intro strong {
    color: #5d7590;

    font-weight: 600;
}


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

.uaag-vmg-content ol {
    margin: 20px 0 0;

    padding-left: 28px;
}

.uaag-vmg-content li {
    margin-bottom: 5px;

    padding-left: 2px;
}

.uaag-vmg-content li::marker {
    color: var(--secondary-color);
}


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

.uaag-vmg-card {
    transition: box-shadow 0.3s ease;
}

.uaag-vmg-card:hover {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}


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

@media (max-width: 991px) {

    .uaag-vmg-section {
        padding: 30px 0 50px;
    }

    .uaag-heading h2 {
        font-size: 27px;
        margin-bottom: 30px;
    }

    .uaag-vmg-title h3 {
        font-size: 23px;
    }

    .uaag-vmg-content {
        padding: 30px 24px;

        font-size: 17px;
    }

}


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

@media (max-width: 576px) {

    .uaag-vmg-section {
        padding: 25px 0 40px;
    }

    .uaag-container {
        width: 92%;
    }

    .uaag-heading h2 {
        font-size: 24px;
        margin-bottom: 25px;
    }

    .uaag-vmg-card {
        margin-bottom: 25px;
    }

    .uaag-vmg-title {
        padding: 15px 15px;
    }

    .uaag-vmg-title h3 {
        font-size: 20px;
    }

    .uaag-vmg-content {
        padding: 25px 18px;

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

    .uaag-vmg-content ol {
        padding-left: 22px;
    }

    .uaag-vmg-content li {
        margin-bottom: 10px;
    }

}



/* =========================================
   UAAG - INFRASTRUCTURE
========================================= */

.uaag-infrastructure-section {
    padding: 35px 0 60px;
    background: var(--white-color);
}

.uaag-container {
    width: 90%;
    max-width: 1225px;
    margin: 0 auto;
}


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

.uaag-heading h2 {
    position: relative;

    margin: 0 0 20px;
    padding-bottom: 8px;

    color: var(--secondary-color);

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

.uaag-heading h2::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;

    width: 100%;
    height: 3px;

    background: var(--primary-color);
}


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

.uaag-facilities-table {
    width: 100%;

    border: 1px solid #999;

    border-radius: 4px;

    overflow: hidden;
}

.uaag-facility-row {
    display: grid;

    grid-template-columns: 1fr 162px;

    min-height: 54px;

    border-bottom: 1px solid #999;
}

.uaag-facility-row:last-child {
    border-bottom: none;
}


/* Facility name */

.uaag-facility-name {
    display: flex;

    align-items: center;

    padding: 10px 14px;

    color: var(--black-color);

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

    border-right: 1px solid #999;
}


/* Check */

.uaag-facility-check {
    display: flex;

    align-items: center;

    justify-content: flex-start;

    padding-left: 18px;
}

.uaag-facility-check i {
    display: flex;

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

    width: 19px;
    height: 19px;

    color: var(--white-color);

    background: #48c985;

    border-radius: 3px;

    font-size: 12px;
}


/* =========================================
   HOSTEL SECTION
========================================= */

.uaag-hostel-heading {
    margin-top: 45px;
}


/* =========================================
   HOSTEL TABLE
========================================= */

.uaag-hostel-table-wrapper {
    width: 100%;

    overflow-x: auto;
}

.uaag-hostel-table {
    width: 100%;

    border: 1px solid #999;

    border-collapse: separate;
    border-spacing: 2px;

    background: var(--white-color);
}


/* Header */

.uaag-hostel-table thead th {
    padding: 13px 14px;

    color: var(--black-color);

    background: var(--white-color);

    border: 1px solid #999;

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

    text-align: left;
}


/* Body */

.uaag-hostel-table tbody td {
    padding: 12px 14px;

    color: #5d7590;

    border: 1px solid #999;

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

    line-height: 1.35;

    text-align: left;
}


/* Column widths */

.uaag-hostel-table th:nth-child(1),
.uaag-hostel-table td:nth-child(1) {
    width: 38%;
}

.uaag-hostel-table th:nth-child(2),
.uaag-hostel-table td:nth-child(2) {
    width: 40%;
}

.uaag-hostel-table th:nth-child(3),
.uaag-hostel-table td:nth-child(3) {
    width: 22%;
}


/* Hover */

.uaag-hostel-table tbody tr {
    transition: background 0.2s ease;
}

.uaag-hostel-table tbody tr:hover {
    background: rgba(228, 119, 24, 0.05);
}


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

@media (max-width: 991px) {

    .uaag-infrastructure-section {
        padding: 30px 0 50px;
    }

    .uaag-heading h2 {
        font-size: 27px;
    }

    .uaag-facility-row {
        grid-template-columns: 1fr 100px;
    }

    .uaag-facility-name,
    .uaag-hostel-table thead th,
    .uaag-hostel-table tbody td {
        font-size: 16px;
    }

}


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

@media (max-width: 576px) {

    .uaag-infrastructure-section {
        padding: 25px 0 40px;
    }

    .uaag-container {
        width: 92%;
    }

    .uaag-heading h2 {
        font-size: 24px;
        margin-bottom: 18px;
    }

    /* Facilities */

    .uaag-facility-row {
        grid-template-columns: 1fr 55px;
        min-height: 52px;
    }

    .uaag-facility-name {
        padding: 9px 10px;

        font-size: 15px;
    }

    .uaag-facility-check {
        padding-left: 14px;
    }

    /* Hostel */

    .uaag-hostel-heading {
        margin-top: 35px;
    }

    .uaag-hostel-table {
        min-width: 650px;
    }

    .uaag-hostel-table thead th,
    .uaag-hostel-table tbody td {
        padding: 10px;

        font-size: 15px;
    }

}



/* =========================================
   EXAMINATION SCHEDULE
========================================= */

.exam-section {
    width: 100%;
    padding: 20px 0 70px;
    background: #fff;
    overflow: hidden;
}


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

.exam-heading {
    width: 100%;
    min-height: 52px;

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

    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 29px;
}

.exam-heading h2 {
    margin: 0;

    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    color: #111;
    font-size: 24px;
    font-weight: 600;
}

.exam-heading h2 i {
    color: #1677ff;
    font-size: 22px;
}


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

.exam-search {
    width: calc(100% - 92px);
    margin: 0 auto 46px;
}

.exam-search input {
    width: 100%;
    height: 59px;

    padding: 0 22px;

    border: 1px solid #ddd;
    border-radius: 10px;

    outline: none;

    font-size: 16px;
    color: #555;

    transition: 0.3s ease;

    box-sizing: border-box;
}

.exam-search input::placeholder {
    color: #999;
}

.exam-search input:focus {
    border-color: #1677ff;
    box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.08);
}


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

.exam-list {
    width: 70%;
    margin: 0 auto;

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


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

.exam-item {
    width: 100%;
    min-height: 66px;

    display: flex;
    align-items: stretch;

    background: #fff;

    border: 1px solid #ddd;
    border-radius: 5px;

    text-decoration: none;

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

    overflow: hidden;

    transition: 0.3s ease;
}

.exam-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.12);
}


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

.exam-pdf {
    width: 65px;
    min-width: 65px;

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

    background: #ef493d;

    color: #fff;
}

.exam-pdf i {
    font-size: 27px;
}


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

.exam-content {
    flex: 1;

    min-width: 0;

    display: flex;
    align-items: center;

    gap: 15px;

    padding: 12px 14px 12px 12px;
}

.exam-content h3 {
    margin: 0;

    flex: 1;

    color: #526b82;

    font-size: 16px;
    line-height: 1.45;
    font-weight: 600;
}

.exam-content span {
    flex: 0 0 auto;

    color: #999;

    font-size: 13px;
    white-space: nowrap;
}


/* =========================================
   NO RESULT
========================================= */

.exam-no-result {
    display: none;

    width: 70%;
    margin: 25px auto;

    text-align: center;

    color: #777;
    font-size: 16px;
}


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

@media (max-width: 1199px) {

    .exam-search {
        width: calc(100% - 50px);
    }

    .exam-list {
        width: 80%;
    }

}


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

@media (max-width: 991px) {

    .exam-section {
        padding-bottom: 50px;
    }

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

    .exam-search {
        width: calc(100% - 30px);
        margin-bottom: 35px;
    }

    .exam-list {
        width: 90%;
        gap: 14px;
    }

    .exam-content h3 {
        font-size: 16px;
    }

    .exam-content span {
        font-size: 12px;
    }

}


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

@media (max-width: 767px) {

    .exam-heading {
        min-height: 55px;
        padding: 8px 15px;
    }

    .exam-heading h2 {
        font-size: 20px;
        text-align: center;
    }

    .exam-heading h2 i {
        font-size: 19px;
    }

    .exam-search {
        width: calc(100% - 30px);
        margin: 20px auto 30px;
    }

    .exam-search input {
        height: 52px;
        padding: 0 16px;
        font-size: 14px;
    }

    .exam-list {
        width: calc(100% - 30px);
        gap: 12px;
    }

    .exam-item {
        min-height: 70px;
    }

    .exam-pdf {
        width: 55px;
        min-width: 55px;
    }

    .exam-pdf i {
        font-size: 23px;
    }

    .exam-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 5px;

        padding: 10px 12px;
    }

    .exam-content h3 {
        width: 100%;
        font-size: 14px;
        line-height: 1.4;
    }

    .exam-content span {
        font-size: 11px;
        white-space: normal;
    }

}


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

@media (max-width: 480px) {

    .exam-heading h2 {
        font-size: 18px;
    }

    .exam-search {
        width: calc(100% - 20px);
    }

    .exam-list {
        width: calc(100% - 20px);
    }

    .exam-pdf {
        width: 48px;
        min-width: 48px;
    }

    .exam-pdf i {
        font-size: 20px;
    }

    .exam-content {
        padding: 9px 10px;
    }

    .exam-content h3 {
        font-size: 13px;
    }

    .exam-content span {
        font-size: 10px;
    }

}



/* =========================================
   RTI SECTION
========================================= */

.rti-section {
    width: 100%;
    padding: 35px 0 70px;
    background: var(--white-color);
}


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

.rti-layout {
    display: grid;
    grid-template-columns: 32% 38% 30%;
    align-items: start;
    gap: 0;
}


/* =========================================
   DOCUMENT
========================================= */

.rti-document {
    width: 100%;
}

.rti-image-wrap {
    position: relative;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}

.rti-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}


/* Expand button */

.rti-expand {
    position: absolute;

    top: 8px;
    right: 8px;

    width: 45px;
    height: 45px;

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

    border-radius: 50%;

    background: var(--white-color);
    color: var(--primary-color);

    text-decoration: none;

    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);

    transition: 0.3s ease;
}

.rti-expand:hover {
    background: var(--primary-color);
    color: var(--white-color);
}


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

.rti-content {
    padding: 0 25px;
}

.rti-content h2 {
    margin: 0;

    color: var(--primary-color);

    font-size: 20px;
    line-height: 1.4;
    font-weight: 600;
}

.rti-content h2 a {
    color: #0645ad;
    text-decoration: none;
}

.rti-content h2 a:hover {
    text-decoration: underline;
}

.rti-content h2 span {
    color: #555;
    font-size: 17px;
    font-weight: 600;
}

.rti-content p {
    margin: 18px 0 0;

    color: #555;

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


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

.rti-sidebar {
    width: 100%;
    padding-left: 20px;
}

.rti-related {
    background: #f3f3f3;
    border-radius: 8px;
    padding: 25px 20px;
}

.rti-related h3 {
    margin: 0 0 22px;

    color: #071f3d;

    font-size: 20px;
    font-weight: 600;
}

.rti-link {
    min-height: 58px;

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

    padding: 0 15px;

    background: var(--white-color);

    color: #60758a;

    text-decoration: none;

    font-size: 17px;

    transition: 0.3s ease;
}

.rti-link i {
    color: #777;
    font-size: 20px;
}

.rti-link:hover {
    color: var(--primary-color);
}

.rti-link:hover i {
    color: var(--primary-color);
}


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

@media (max-width: 1199px) {

    .rti-layout {
        grid-template-columns: 30% 40% 30%;
    }

    .rti-content {
        padding: 0 18px;
    }

    .rti-content h2 {
        font-size: 20px;
    }

    .rti-content h2 span {
        font-size: 16px;
    }

    .rti-content p {
        font-size: 17px;
    }

}


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

@media (max-width: 991px) {

    .rti-section {
        padding: 30px 0 60px;
    }

    .rti-layout {
        grid-template-columns: 45% 55%;
        row-gap: 30px;
    }

    .rti-content {
        padding: 10px 0 0 25px;
    }

    .rti-sidebar {
        grid-column: 1 / -1;
        padding-left: 0;
    }

    .rti-related {
        width: 100%;
    }

}


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

@media (max-width: 767px) {

    .rti-section {
        padding: 25px 0 50px;
    }

    .rti-layout {
        display: flex;
        flex-direction: column;
        gap: 25px;
    }

    .rti-document {
        width: 100%;
    }

    .rti-image-wrap {
        max-width: 100%;
    }

    .rti-content {
        padding: 0;
    }

    .rti-content h2 {
        font-size: 19px;
        line-height: 1.5;
    }

    .rti-content h2 span {
        display: block;
        margin-top: 4px;
        font-size: 15px;
    }

    .rti-content p {
        margin-top: 10px;
        font-size: 16px;
    }

    .rti-sidebar {
        padding: 0;
    }

    .rti-related {
        padding: 20px 15px;
    }

    .rti-related h3 {
        font-size: 19px;
        margin-bottom: 15px;
    }

    .rti-link {
        min-height: 52px;
        font-size: 16px;
    }

}


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

@media (max-width: 480px) {

    .rti-section {
        padding-top: 20px;
    }

    .rti-content h2 {
        font-size: 17px;
    }

    .rti-content h2 span {
        font-size: 14px;
    }

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

    .rti-expand {
        width: 38px;
        height: 38px;
        font-size: 14px;
    }

    .rti-related h3 {
        font-size: 18px;
    }

}


/* Research funding agencies  */


/* =========================================
   RESEARCH FUNDING AGENCIES
========================================= */

.rfa-section {
    width: 100%;
    padding: 0 0 70px;
    background: var(--white-color);
    overflow: hidden;
}


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

.rfa-heading {
    min-height: 58px;

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

    border-bottom: 1px solid #e5e5e5;

    margin-bottom: 25px;
}

.rfa-heading h2 {
    margin: 0;

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

    color: var(--black-color);

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

.rfa-heading h2 i {
    color: #1677ff;
    font-size: 23px;
}


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

.rfa-search {
    width: calc(100% - 95px);

    margin: 0 auto 36px;
}

.rfa-search input {
    width: 100%;
    height: 62px;

    padding: 0 22px;

    border: 1px solid #ddd;
    border-radius: 10px;

    outline: none;

    color: #555;
    font-size: 16px;

    transition: 0.3s ease;

    box-sizing: border-box;
}

.rfa-search input::placeholder {
    color: #999;
}

.rfa-search input:focus {
    border-color: #1677ff;

    box-shadow:
        0 0 0 3px rgba(22, 119, 255, 0.08);
}


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

.rfa-grid {
    width: 82%;

    margin: 0 auto;

    display: grid;

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

    gap: 28px;
}


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

.rfa-card {
    min-width: 0;

    background: var(--white-color);

    border: 1px solid #ddd;
    border-radius: 6px;

    overflow: hidden;

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

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

.rfa-card:hover {
    transform: translateY(-4px);

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


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

.rfa-image {
    height: 145px;

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

    padding: 15px;

    border-bottom: 1px solid #ddd;

    background: var(--white-color);
}

.rfa-image img {
    display: block;

    width: auto;
    max-width: 90%;
    height: 105px;

    object-fit: contain;
}


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

.rfa-content {
    min-height: 142px;

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

    padding: 20px 15px 14px;

    text-align: center;
}

.rfa-content h3 {
    margin: 0;

    color: #526b82;

    font-size: 17px;
    line-height: 1.35;
    font-weight: 600;
}


/* =========================================
   VISIT
========================================= */

.rfa-visit {
    display: inline-flex;

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

    gap: 8px;

    color: #397df6;

    text-decoration: none;

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

    transition: 0.3s ease;
}

.rfa-visit i {
    font-size: 18px;
}

.rfa-visit:hover {
    color: var(--primary-color);
}


/* =========================================
   NO RESULT
========================================= */

.rfa-no-result {
    display: none;

    margin: 30px auto;

    text-align: center;

    color: #777;

    font-size: 16px;
}


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

@media (max-width: 1199px) {

    .rfa-grid {
        width: 90%;

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

}


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

@media (max-width: 991px) {

    .rfa-section {
        padding-bottom: 55px;
    }

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

    .rfa-search {
        width: calc(100% - 40px);
    }

    .rfa-grid {
        width: calc(100% - 40px);

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

        gap: 20px;
    }

    .rfa-image {
        height: 135px;
    }

    .rfa-content {
        min-height: 135px;
    }

}


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

@media (max-width: 767px) {

    .rfa-heading {
        min-height: 55px;

        padding: 8px 15px;
    }

    .rfa-heading h2 {
        font-size: 20px;
        text-align: center;
    }

    .rfa-heading h2 i {
        font-size: 19px;
    }

    .rfa-search {
        width: calc(100% - 30px);

        margin-bottom: 28px;
    }

    .rfa-search input {
        height: 52px;

        padding: 0 16px;

        font-size: 14px;
    }

    .rfa-grid {
        width: calc(100% - 30px);

        grid-template-columns: 1fr;

        gap: 16px;
    }

    .rfa-card {
        width: 100%;
    }

    .rfa-image {
        height: 150px;
    }

    .rfa-image img {
        height: 110px;
    }

    .rfa-content {
        min-height: 125px;

        padding: 18px 15px 15px;
    }

    .rfa-content h3 {
        font-size: 16px;
    }

    .rfa-visit {
        font-size: 16px;
    }

}


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

@media (max-width: 480px) {

    .rfa-heading h2 {
        font-size: 18px;
    }

    .rfa-search {
        width: calc(100% - 20px);
    }

    .rfa-grid {
        width: calc(100% - 20px);
    }

    .rfa-image {
        height: 135px;
    }

    .rfa-image img {
        height: 95px;
    }

    .rfa-content h3 {
        font-size: 15px;
    }

}


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

.rfa-pagination {
    width: 100%;

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

    gap: 8px;

    margin-top: 40px;
}


.rfa-page-btn {
    width: 42px;
    height: 42px;

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

    border: 1px solid #ddd;
    border-radius: 5px;

    background: var(--white-color);

    color: var(--secondary-color);

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

    cursor: pointer;

    transition: 0.3s ease;
}


.rfa-page-btn:hover:not(:disabled) {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white-color);
}


.rfa-page-btn.active {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--white-color);
}


.rfa-page-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}


/* Mobile */

@media (max-width: 767px) {

    .rfa-pagination {
        gap: 5px;
        margin-top: 30px;
    }

    .rfa-page-btn {
        width: 36px;
        height: 36px;

        font-size: 13px;
    }

}


/* =========================================
   MOU SECTION
========================================= */

.mou-section {
    width: 100%;
    padding: 35px 0 60px;
    background: var(--white-color);
}


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

.mou-heading {
    width: 100%;
    border-bottom: 3px solid var(--primary-color);
    margin-bottom: 18px;
}

.mou-heading h2 {
    margin: 0 0 5px;

    color: var(--secondary-color);

    font-size: 22px;
    line-height: 1.3;
    font-weight: 600;
}


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

.mou-list {
    margin: 0;
    padding: 0;

    list-style: none;
}

.mou-list li {
    position: relative;

    padding-left: 25px;
    margin-bottom: 11px;

    color: var(--primary-color);

    font-size: 16px;
    line-height: 1.45;
    font-weight: 400;
}


/* Orange Bullet */

.mou-list li::before {
    content: "";

    position: absolute;

    left: 0;
    top: 9px;

    width: 10px;
    height: 10px;

    background: var(--secondary-color);

    border-radius: 50%;
}


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

@media (max-width: 991px) {

    .mou-section {
        padding: 30px 0 50px;
    }

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

    .mou-list li {
        font-size: 16px;
    }

}


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

@media (max-width: 767px) {

    .mou-section {
        padding: 25px 0 40px;
    }

    .mou-heading {
        margin-bottom: 15px;
    }

    .mou-heading h2 {
        font-size: 20px;
        line-height: 1.4;
    }

    .mou-list li {
        padding-left: 21px;
        margin-bottom: 10px;

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

    .mou-list li::before {
        width: 9px;
        height: 9px;

        top: 8px;
    }

}


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

@media (max-width: 480px) {

    .mou-heading h2 {
        font-size: 19px;
    }

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

}


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

.event-section {
    width: 100%;
    padding: 50px 0 70px;
    background: var(--white-color);
}


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

.event-heading {
    text-align: center;
    margin-bottom: 30px;
}

.event-heading h2 {
    margin: 0;

    color: var(--secondary-color);

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


/* =========================================
   TABS
========================================= */

.event-tabs {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    margin-bottom: 35px;

    flex-wrap: wrap;
}

.event-tab {
    min-width: 130px;

    padding: 12px 25px;

    border: 1px solid var(--secondary-color);
    border-radius: 4px;

    background: var(--white-color);

    color: var(--secondary-color);

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

    cursor: pointer;

    transition: all 0.3s ease;
}

.event-tab:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white-color);
}

.event-tab.active {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--white-color);
}


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

.event-grid {
    display: grid;

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

    gap: 28px;
}


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

.event-card {
    background: var(--white-color);

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

    overflow: hidden;

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

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

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

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


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

.event-image {
    width: 100%;
    height: 220px;

    overflow: hidden;
}

.event-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.4s ease;
}

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


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

.event-content {
    padding: 22px 20px;
}

.event-category {
    display: inline-block;

    margin-bottom: 10px;

    color: var(--primary-color);

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

    text-transform: uppercase;
}

.event-content h3 {
    margin: 0 0 10px;

    color: var(--secondary-color);

    font-size: 20px;
    line-height: 1.4;
    font-weight: 700;
}

.event-content p {
    margin: 0 0 18px;

    color: #68798a;

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


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

.event-date {
    display: flex;
    align-items: center;

    gap: 8px;

    color: #68798a;

    font-size: 14px;
}

.event-date i {
    color: var(--primary-color);
}


/* =========================================
   NO RESULT
========================================= */

.event-no-result {
    display: none;

    padding: 30px;

    text-align: center;

    color: #777;

    font-size: 16px;
}


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

@media (max-width: 991px) {

    .event-section {
        padding: 40px 0 55px;
    }

    .event-heading h2 {
        font-size: 27px;
    }

    .event-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 22px;
    }

}


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

@media (max-width: 767px) {

    .event-section {
        padding: 30px 0 45px;
    }

    .event-heading {
        margin-bottom: 22px;
    }

    .event-heading h2 {
        font-size: 23px;
    }

    .event-tabs {
        gap: 7px;
        margin-bottom: 25px;
    }

    .event-tab {
        min-width: auto;

        flex: 1;

        padding: 10px 12px;

        font-size: 14px;
    }

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

    .event-image {
        height: 200px;
    }

    .event-content {
        padding: 18px 16px;
    }

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

}


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

@media (max-width: 480px) {

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

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

    .event-tab {
        width: 100%;
    }

    .event-image {
        height: 180px;
    }

}

/* =========================================
   COURSE CATALOGUE
========================================= */

.cc-section {
    width: 100%;
    padding: 40px 0 70px;
    background: var(--white-color);
}


/* Heading */

.cc-heading h1 {
    margin: 0 0 5px;

    color: var(--secondary-color);

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


/* Description */

.cc-description p {
    margin: 0 0 14px;

    color: var(--black-color);

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

.cc-summer-link {
    margin-top: 5px !important;
}

.cc-summer-link a {
    color: var(--primary-color);
    text-decoration: none;
}

.cc-summer-link a:hover {
    text-decoration: underline;
    color: var(--secondary-color);
}


/* =========================================
   FILTER
========================================= */

.cc-filter {
    display: grid;

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

    gap: 36px;

    align-items: center;

    margin-top: 10px;
    margin-bottom: 70px;
}

.cc-select-box select {
    width: 100%;

    height: 48px;

    padding: 0 15px;

    border: 1px solid #cbd3dc;
    border-radius: 5px;

    background: var(--white-color);

    color: #30445a;

    font-family: inherit;
    font-size: 18px;

    outline: none;

    cursor: pointer;
}

.cc-select-box select:focus {
    border-color: var(--secondary-color);
}


/* Submit */

.cc-submit {
    height: 48px;

    padding: 0 22px;

    border: 0;
    border-radius: 5px;

    background: #087cf5;

    color: var(--white-color);

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

    cursor: pointer;

    transition: 0.3s ease;
}

.cc-submit:hover {
    background: var(--secondary-color);
}


/* =========================================
   COURSE RESULTS
   HIDDEN INITIALLY
========================================= */

.cc-results {
    display: none;

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

    gap: 30px;
}


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

.cc-course-card {
    padding: 25px 27px 0;

    border: 2px solid #e1e1e1;

    background: var(--white-color);

    min-height: 350px;

    display: flex;
    flex-direction: column;
}

.cc-course-line {
    width: 45px;
    height: 2px;

    background: var(--secondary-color);

    margin-bottom: 12px;
}

.cc-course-card h2 {
    margin: 0 0 8px;

    color: var(--black-color);

    font-size: 25px;
    line-height: 1.3;
    font-weight: 600;
}

.cc-code {
    margin-bottom: 30px;

    color: var(--black-color);

    font-size: 16px;
}

.cc-faculty {
    margin-bottom: 16px;

    color: var(--secondary-color);

    font-size: 17px;
}

.cc-course-card p {
    margin: 0 0 20px;

    color: var(--black-color);

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

.cc-know-more {
    display: block;

    margin-top: auto;

    padding: 15px;

    background: var(--secondary-color);

    color: var(--white-color);

    text-align: center;

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

    text-decoration: none;
}

.cc-know-more:hover {
    background: var(--primary-color);

    color: var(--white-color);
}


/* =========================================
   NO RESULTS
========================================= */

.cc-no-results {
    display: block;

    padding: 25px;

    color: #777;

    text-align: center;

    font-size: 17px;
}


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

@media (max-width: 991px) {

    .cc-heading h1 {
        font-size: 28px;
    }

    .cc-description p {
        font-size: 17px;
        line-height: 1.6;
    }

    .cc-filter {
        grid-template-columns: 1fr 1fr;

        gap: 15px;

        margin-bottom: 45px;
    }

    .cc-submit {
        width: 130px;
    }

    .cc-results {
        grid-template-columns: 1fr 1fr;
    }

}


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

@media (max-width: 767px) {

    .cc-section {
        padding: 30px 0 45px;
    }

    .cc-heading h1 {
        font-size: 25px;
    }

    .cc-description p {
        font-size: 15px;
        line-height: 1.6;
    }

    .cc-filter {
        grid-template-columns: 1fr;

        gap: 12px;

        margin-top: 20px;
        margin-bottom: 35px;
    }

    .cc-select-box select {
        height: 46px;
        font-size: 15px;
    }

    .cc-submit {
        width: 100%;
        height: 46px;
    }

    .cc-results {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .cc-course-card {
        min-height: auto;
        padding: 22px 18px 0;
    }

    .cc-course-card h2 {
        font-size: 23px;
    }

    .cc-course-card p {
        font-size: 15px;
        line-height: 1.7;
    }

}


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

@media (max-width: 480px) {

    .cc-heading h1 {
        font-size: 25px;
    }

    .cc-description p {
        font-size: 14px;
    }

    .cc-course-card h2 {
        font-size: 20px;
    }

}


/* =========================================
   UNIVERSITY BLOG SECTION
========================================= */

.us-blog-section {
    width: 100%;
    padding: 50px 0 60px;
    background: var(--white-color, #fff);
}

.us-blog-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 30px;
}


/* Heading */

.us-blog-heading {
    margin-bottom: 32px;
}

.us-blog-heading h2 {
    margin: 0;
    color: var(--secondary-color, #082041);
    font-size: 38px;
    font-weight: 500;
    line-height: 1.2;
}


/* Grid */

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


/* Card */

.us-blog-card {
    min-width: 0;
    background: var(--white-color, #fff);
}


/* Image */

.us-blog-image {
    width: 100%;
    height: 272px;
    overflow: hidden;
}

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

.us-blog-card:hover .us-blog-image img {
    transform: scale(1.03);
}


/* Content */

.us-blog-content {
    padding-top: 18px;
}

.us-blog-content h3 {
    margin: 0 0 12px;
    color: var(--black-color, #000);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
}

.us-blog-date {
    display: block;
    margin-bottom: 12px;
    color: #777;
    font-size: 16px;
    line-height: 1.4;
}

.us-blog-content p {
    margin: 0;
    color: var(--black-color, #000);
    font-size: 16px;
    line-height: 1.45;
}


/* Button */

.us-blog-button-wrap {
    display: flex;
    justify-content: center;
    margin-top: 75px;
}

.us-blog-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 248px;
    min-height: 61px;

    padding: 12px 30px;

    border: 1px solid var(--secondary-color, #082041);

    color: var(--secondary-color, #082041);
    background: var(--white-color, #fff);

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

    text-decoration: none;

    transition: all 0.3s ease;
}

.us-blog-button:hover {
    color: var(--white-color, #fff);
    background: var(--secondary-color, #082041);
}


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

@media (max-width: 1100px) {

    .us-blog-container {
        padding: 0 25px;
    }

    .us-blog-image {
        height: 230px;
    }

    .us-blog-content h3 {
        font-size: 19px;
    }

    .us-blog-content p {
        font-size: 16px;
    }

}


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

@media (max-width: 768px) {

    .us-blog-section {
        padding: 40px 0 50px;
    }

    .us-blog-container {
        padding: 0 20px;
    }

    .us-blog-heading {
        margin-bottom: 25px;
    }

    .us-blog-heading h2 {
        font-size: 32px;
    }

    .us-blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px 18px;
    }

    .us-blog-image {
        height: 220px;
    }

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

    .us-blog-content p {
        font-size: 15px;
    }

    .us-blog-button-wrap {
        margin-top: 50px;
    }

}


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

@media (max-width: 576px) {

    .us-blog-section {
        padding: 35px 0 45px;
    }

    .us-blog-container {
        padding: 0 15px;
    }

    .us-blog-heading h2 {
        font-size: 30px;
    }

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

    .us-blog-image {
        height: 240px;
    }

    .us-blog-content {
        padding-top: 15px;
    }

    .us-blog-content h3 {
        font-size: 21px;
        line-height: 1.3;
    }

    .us-blog-date {
        font-size: 14px;
    }

    .us-blog-content p {
        font-size: 15px;
        line-height: 1.5;
    }

    .us-blog-button-wrap {
        margin-top: 45px;
    }

    .us-blog-button {
        width: 100%;
        min-width: 0;
        min-height: 55px;
    }

}


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

.us-faq-section {
    width: 100%;
    padding: 50px 0 70px;
    background: #fff;
}

.us-faq-container {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 44px;
}


/* Heading */

.us-faq-heading {
    margin-bottom: 50px;
}

.us-faq-heading h2 {
    margin: 0 0 14px;
    color: var(--secondary-color, #082041);
    font-size: 30px;
    font-weight: 400;
    line-height: 1.2;
}

.us-faq-heading p {
    margin: 0;
    color: #111;
    font-size: 17px;
    line-height: 1.6;
}


/* FAQ List */

.us-faq-list {
    width: 100%;
}


/* FAQ Item */

.us-faq-item {
    width: 100%;
    border: 1px solid #ddd;
    margin-bottom: 9px;
    background: #fff;
}


/* Question */

.us-faq-question {
    width: 100%;
    min-height: 71px;

    padding: 18px;

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

    border: 0;
    background: transparent;

    color: #111;

    text-align: left;
    font-family: inherit;
    font-size: 17px;
    font-weight: 600;

    cursor: pointer;
}


/* Plus icon */

.us-faq-question i {
    flex: 0 0 auto;

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

    transition: transform 0.3s ease;
}


/* Answer */

.us-faq-answer {
    display: none;

    padding: 0 18px 20px;

    color: #555;
    font-size: 17px;
    line-height: 1.6;
}

.us-faq-answer p {
    margin: 0;
}


/* Active */

.us-faq-item.active .us-faq-answer {
    display: block;
}

.us-faq-item.active .us-faq-question i {
    transform: rotate(45deg);
}


/* Hover */

.us-faq-question:hover {
    color: var(--secondary-color, #082041);
}


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

@media (max-width: 768px) {

    .us-faq-section {
        padding: 40px 0 55px;
    }

    .us-faq-container {
        padding: 0 20px;
    }

    .us-faq-heading {
        margin-bottom: 30px;
    }

    .us-faq-heading h2 {
        font-size: 25px;
    }

    .us-faq-heading p {
        font-size: 16px;
    }

    .us-faq-question {
        min-height: 65px;
        padding: 16px;

        font-size: 17px;
    }

}


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

@media (max-width: 576px) {

    .us-faq-section {
        padding: 35px 0 45px;
    }

    .us-faq-container {
        padding: 0 15px;
    }

    .us-faq-heading {
        margin-bottom: 25px;
    }

    .us-faq-heading h2 {
        font-size: 24px;
    }

    .us-faq-heading p {
        font-size: 15px;
        line-height: 1.5;
    }

    .us-faq-item {
        margin-bottom: 8px;
    }

    .us-faq-question {
        min-height: 60px;
        padding: 15px;

        font-size: 16px;
        line-height: 1.4;
    }

    .us-faq-question i {
        font-size: 18px;
    }

    .us-faq-answer {
        padding: 0 15px 16px;
        font-size: 15px;
    }

}


/* =========================================
   Undergraduate Transfer Calendar
========================================= */

.transfer-calendar-section {
    width: 100%;
    padding: 0px 0 50px;
    background: #fff;
}

.transfer-calendar-section .container {
    width: 100%;
}

.transfer-calendar-block {
    width: 100%;
    margin-bottom: 28px;
}

.transfer-calendar-intro {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 600;
    color: #111;
}

.transfer-calendar-closed {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 600;
    color: #111;
}


/* =========================================
   Table
========================================= */

.transfer-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.transfer-calendar-table {
    width: 668px;
    max-width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0;
    color: #111;
    font-size: 16px;
}

.transfer-calendar-table th,
.transfer-calendar-table td {
    border: 1px solid #111;
    padding: 4px 8px;
    vertical-align: middle;
    line-height: 1.2;
}

.transfer-calendar-table thead tr:first-child th {
    border-color: #06283f;
}

.transfer-table-title {
    background: #06283f;
    color: #fff;
    text-align: left;
    font-weight: 700;
    font-size: 16px;
    padding: 11px 15px !important;
}

.transfer-calendar-table thead tr:nth-child(2) th {
    background: #fff;
    color: #06283f;
    font-weight: 700;
    text-align: center;
}

.transfer-calendar-table th:first-child,
.transfer-calendar-table td:first-child {
    width: 50%;
}

.transfer-calendar-table th:last-child,
.transfer-calendar-table td:last-child {
    width: 50%;
}

.transfer-calendar-table tbody td:first-child {
    font-weight: 700;
}

.transfer-calendar-table tbody td:last-child {
    font-weight: 400;
}

.transfer-calendar-note {
    margin: 16px 0 0;
    font-size: 14px;
    line-height: 1.5;
    font-style: italic;
    color: #111;
}


/* =========================================
   Tablet
========================================= */

@media (max-width: 991px) {

    .transfer-calendar-section {
        padding: 25px 0 40px;
    }

    .transfer-calendar-intro,
    .transfer-calendar-closed {
        font-size: 15px;
    }

    .transfer-calendar-table {
        min-width: 620px;
        max-width: none;
        font-size: 15px;
    }

    .transfer-table-title {
        font-size: 15px;
    }

}


/* =========================================
   Mobile
========================================= */

@media (max-width: 767px) {

    .transfer-calendar-section {
        padding: 20px 0 35px;
    }

    .transfer-calendar-block {
        margin-bottom: 30px;
    }

    .transfer-calendar-intro,
    .transfer-calendar-closed {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 15px;
    }

    .transfer-table-wrap {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 5px;
    }

    .transfer-calendar-table {
        min-width: 600px;
        width: 600px;
        font-size: 14px;
    }

    .transfer-calendar-table th,
    .transfer-calendar-table td {
        padding: 6px 8px;
    }

    .transfer-table-title {
        font-size: 14px;
        padding: 10px 12px !important;
    }

    .transfer-calendar-note {
        font-size: 12px;
        margin-top: 12px;
    }

}


/* =========================================
   Small Mobile
========================================= */

@media (max-width: 480px) {

    .transfer-calendar-section {
        padding: 18px 0 30px;
    }

    .transfer-calendar-intro,
    .transfer-calendar-closed {
        font-size: 13px;
        line-height: 1.55;
    }

    .transfer-calendar-table {
        min-width: 570px;
        width: 570px;
        font-size: 13px;
    }

    .transfer-table-title {
        font-size: 13px;
        padding: 9px 10px !important;
    }

    .transfer-calendar-table th,
    .transfer-calendar-table td {
        padding: 6px 7px;
    }

    .transfer-calendar-note {
        font-size: 11px;
    }

}



/* =========================================
   SSJU Resource Section
========================================= */

.ssju-resource-section {
    width: 100%;
    padding: 40px 0 60px;
    background: #fff;
}

.ssju-resource-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 36px;
    align-items: start;
}

.ssju-resource-item {
    width: 100%;
}

.ssju-resource-heading {
    margin-bottom: 12px;
}

.ssju-resource-heading h2 {
    margin: 0;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--secondary-color);
}

.ssju-resource-image {
    width: 100%;
    background: var(--secondary-color);
    overflow: hidden;
}

.ssju-resource-image a {
    display: block;
    width: 100%;
}

.ssju-resource-image img {
    display: block;
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.ssju-resource-image a:hover img {
    transform: scale(1.02);
}


/* =========================================
   Tablet
========================================= */

@media (max-width: 991px) {

    .ssju-resource-section {
        padding: 25px 0 45px;
    }

    .ssju-resource-grid {
        gap: 25px;
    }

    .ssju-resource-heading h2 {
        font-size: 32px;
    }

    .ssju-resource-image img {
        height: 350px;
    }

}


/* =========================================
   Mobile
========================================= */

@media (max-width: 767px) {

    .ssju-resource-section {
        padding: 20px 0 40px;
    }

    .ssju-resource-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .ssju-resource-heading {
        margin-bottom: 10px;
    }

    .ssju-resource-heading h2 {
        font-size: 28px;
    }

    .ssju-resource-image img {
        height: auto;
        aspect-ratio: 16 / 10;
        object-fit: cover;
    }

}


/* =========================================
   Small Mobile
========================================= */

@media (max-width: 480px) {

    .ssju-resource-heading h2 {
        font-size: 25px;
    }

    .ssju-resource-grid {
        gap: 25px;
    }

}



/* =========================================
   MOAIE - Graduate Studies Benefits
========================================= */

.moaie-section {
    width: 100%;
    padding: 30px 0 55px;
    background: #fff;
}

.moaie-heading {
    width: 100%;
    margin-bottom: 35px;
}

.moaie-heading h2 {
    margin: 0;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--secondary-color);
}


/* =========================================
   Grid
========================================= */

.moaie-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 55px;
    row-gap: 60px;
}

.moaie-item {
    display: flex;
    align-items: center;
    gap: 30px;
    min-height: 130px;
}

.moaie-icon {
    width: 125px;
    min-width: 125px;
    height: 125px;

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

    color: var(--secondary-color);
    font-size: 50px;
}

.moaie-icon i {
    font-size: inherit;
    line-height: 1;
}

.moaie-content {
    flex: 1;
}

.moaie-content h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 600;
    color: #06283f;
}


/* =========================================
   Bottom Note
========================================= */

.moaie-note {
    margin-top: 40px;
}

.moaie-note p {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    font-style: italic;
    color: #111;
}


/* =========================================
   Tablet
========================================= */

@media (max-width: 991px) {

    .moaie-section {
        padding: 35px 0 45px;
    }

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

    .moaie-grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 35px;
        row-gap: 40px;
    }

    .moaie-item {
        gap: 20px;
    }

    .moaie-icon {
        width: 90px;
        min-width: 90px;
        height: 90px;
        font-size: 45px;
    }

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

}


/* =========================================
   Mobile
========================================= */

@media (max-width: 767px) {

    .moaie-section {
        padding: 30px 0 40px;
    }

    .moaie-heading {
        margin-bottom: 25px;
    }

    .moaie-heading h2 {
        font-size: 25px;
    }

    .moaie-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .moaie-item {
        min-height: auto;
        gap: 20px;
    }

    .moaie-icon {
        width: 75px;
        min-width: 75px;
        height: 75px;
        font-size: 40px;
    }

    .moaie-content h3 {
        font-size: 19px;
    }

    .moaie-note {
        margin-top: 30px;
    }

    .moaie-note p {
        font-size: 15px;
        line-height: 1.7;
    }

}


/* =========================================
   Small Mobile
========================================= */

@media (max-width: 480px) {

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

    .moaie-grid {
        gap: 25px;
    }

    .moaie-item {
        gap: 15px;
    }

    .moaie-icon {
        width: 65px;
        min-width: 65px;
        height: 65px;
        font-size: 35px;
    }

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

    .moaie-note p {
        font-size: 14px;
    }

}


.moaie-admission-section {
    padding: 20px 0 40px;
    background: #ffffff;
}

.moaie-container {
    width: 90%;
    max-width: 1650px;
    margin: 0 auto;
}

.moaie-section-header {
    margin-bottom: 35px;
}

.moaie-section-title {
    margin: 0 0 20px;
    color: var(--secondary-color);
    font-size: 35px;
    line-height: 1.2;
    font-weight: 600;
}

.moaie-application-text {
    margin: 0 0 20px;
    color: #111111;
    font-size: 18px;
    line-height: 1.6;
    font-weight: 600;
}

.moaie-apply-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

.moaie-apply-link:hover {
    text-decoration: underline;
}

.moaie-timeline-title {
    margin: 0;
    color: var(--secondary-color);
    font-size: 20px;
    line-height: 1.5;
    font-weight: 600;
}

.moaie-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.moaie-admission-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #222222;
    font-size: 19px;
}

.moaie-admission-table th {
    padding: 15px 20px;
    background: var(--secondary-color);
    color: #ffffff;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    border: 1px solid #222222;
}

.moaie-admission-table td {
    padding: 14px 20px;
    color: #111111;
    text-align: center;
    font-size: 18px;
    border: 1px solid #222222;
    background: #ffffff;
    line-height: 1.5;
}

.moaie-admission-table tbody td:first-child {
    font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
    .moaie-admission-section {
        padding: 50px 0;
    }

    .moaie-container {
        width: 92%;
    }

    .moaie-section-title {
        font-size: 28px;
    }

    .moaie-application-text {
        font-size: 17px;
    }

    .moaie-timeline-title {
        font-size: 17px;
    }

    .moaie-admission-table {
        min-width: 600px;
        font-size: 16px;
    }

    .moaie-admission-table th {
        font-size: 17px;
    }
}

.moaie-rsf {
    margin-top: 20px;
    font-size: 17px;
    line-height: 1.6;
    color: #111111;
}
.moaie-rsf li{
    margin-bottom: 10px;
}

/* phd biology section */


.phd-bio-section {
    padding: 40px 0;
    background: #fff;
}

.phd-bio-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 20px;
}

.phd-bio-heading h2 {
    margin: 0 0 12px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 42px;
    line-height: 1.2;
    color: var(--secondary-color);
}

.phd-bio-heading p {
    margin: 0 0 30px;
    font-size: 16px;
    line-height: 1.8;
    color: var(--black-color);
}

.phd-bio-accordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.phd-bio-item {
    border: 1px solid #d9e8e2;
    border-radius: 12px;
    background: var(--white-color);
    overflow: hidden;
    transition: all 0.3s ease;
}

.phd-bio-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.06);
}

.phd-bio-item.active {
    background: #f4fbf7;
    border-color: #cce5d9;
}

.phd-bio-question {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 11px 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    text-align: left;
    cursor: pointer;
    color: #06283f;
}

.phd-bio-number {
    width: 42px;
    height: 32px;
    min-width: 42px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--secondary-color);
    color: var(--white-color);
    font-size: 14px;
    font-weight: 700;
}

.phd-bio-item.active .phd-bio-number {
    background: var(--primary-color);
    color: var(--white-color);
}

.phd-bio-title {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
}

.phd-bio-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border: 2px solid var(--secondary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary-color);
    font-size: 19px;
    font-weight: 500;
    line-height: 1;
}

.phd-bio-item.active .phd-bio-icon {
    background: var(--primary-color);
    color: var(--white-color);
    border: 2px solid var(--primary-color);
}

.phd-bio-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.phd-bio-answer p {
    margin: 0;
    padding: 0 70px 22px;
    font-size: 15px;
    line-height: 1.8;
    color: var(--black-color);
}

.phd-bio-item.active .phd-bio-answer {
    max-height: 300px;
}


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

    .phd-bio-section {
        padding: 40px 0;
    }

    .phd-bio-heading h2 {
        font-size: 32px;
    }

    .phd-bio-question {
        padding: 12px 15px;
        gap: 12px;
    }

    .phd-bio-number {
        width: 38px;
        min-width: 38px;
        height: 30px;
        font-size: 12px;
    }

    .phd-bio-title {
        font-size: 14px;
    }

    .phd-bio-answer p {
        padding: 0 55px 20px;
        font-size: 14px;
    }
}


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

    .phd-bio-section {
        padding: 40px 0;
    }

    .phd-bio-container {
        padding: 0 15px;
    }

    .phd-bio-heading h2 {
        font-size: 28px;
    }

    .phd-bio-heading p {
        font-size: 14px;
        line-height: 1.7;
    }

    .phd-bio-question {
        padding: 12px;
        gap: 9px;
    }

    .phd-bio-number {
        width: 34px;
        min-width: 34px;
        height: 28px;
        font-size: 11px;
    }

    .phd-bio-title {
        font-size: 13px;
        line-height: 1.4;
    }

    .phd-bio-icon {
        width: 25px;
        min-width: 25px;
        height: 25px;
        font-size: 16px;
    }

    .phd-bio-answer p {
        padding: 0 15px 18px 55px;
        font-size: 13px;
    }
}


.phd-bio-research-section {
    padding: 40px 0;
    background: var(--white-color);
}

.phd-bio-container {
    max-width: 1290px;
    margin: 0 auto;
    padding: 0 20px;
}


/* INTRO */

.phd-bio-intro p {
    margin: 0 0 18px;
    color: var(--secondary-color);
    font-size: 16px;
    line-height: 1.8;
}


/* INVESTIGATOR BOX */

.phd-bio-investigator-box {
    position: relative;
    margin-top: 40px;
    padding: 60px 35px 35px;
    border: 1px solid var(--secondary-color);
    border-radius: 10px;
    background: #fbfefd;
}

.phd-bio-box-title {
    position: absolute;
    top: -28px;
    left: 18px;

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

    padding: 14px 28px;

    background: var(--secondary-color);
    color: var(--white-color);

    border-radius: 6px;

    font-size: 18px;
    font-weight: 700;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.phd-bio-box-title i {
    font-size: 20px;
}


/* INVESTIGATOR GRID */

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

.phd-bio-investigator-grid ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.phd-bio-investigator-grid li {
    position: relative;
    margin-bottom: 18px;
    padding-left: 24px;

    color: var(--secondary-color);
    font-size: 16px;
    line-height: 1.5;
}

.phd-bio-investigator-grid li::before {
    content: "";
    position: absolute;

    left: 5px;
    top: 9px;

    width: 7px;
    height: 7px;

    border-radius: 50%;
    background: var(--secondary-color);
}

.phd-bio-investigator-grid sup {
    color: #087f52;
    font-weight: 700;
}


/* INFORMATION BOX */

.phd-bio-info-box {
    display: flex;
    align-items: flex-start;
    gap: 22px;

    margin-top: 30px;
    padding: 28px 25px;

    border: 1px solid var(--primary-color);
    border-radius: 10px;

    background: #fffaf0;
}

.phd-bio-info-icon {
    flex-shrink: 0;

    width: 52px;
    height: 52px;

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

    border-radius: 50%;

    background: var(--secondary-color);
    color: var(--white-color);

    font-size: 22px;
}

.phd-bio-info-content {
    flex: 1;
}

.phd-bio-info-content p {
    margin: 0 0 10px;

    color: var(--black-color);
    font-size: 16px;
    line-height: 1.7;
}

.phd-bio-info-content p:last-child {
    margin-bottom: 0;
}

.phd-bio-info-content strong {
    font-weight: 700;
}

.phd-bio-link {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
}

.phd-bio-link:hover {
    text-decoration: underline;
}


/* BUTTON */

.phd-bio-button-wrapper {
    margin-top: 28px;
}

.phd-bio-know-more {
    width: 235px;
    min-height: 58px;

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

    padding: 14px 25px;

    border: 1px solid var(--secondary-color);
    border-radius: 5px;

    background: var(--white-color);
    color: var(--secondary-color);

    font-size: 16px;
    font-weight: 700;

    text-decoration: none;

    transition: all 0.3s ease;
}

.phd-bio-know-more i {
    transition: transform 0.3s ease;
}

.phd-bio-know-more:hover {
    background: var(--primary-color);
    color: var(--white-color);
}

.phd-bio-know-more:hover i {
    transform: translateX(5px);
}


/* ELIGIBILITY */

.phd-bio-eligibility-box {
    display: flex;
    align-items: flex-start;
    gap: 22px;

    margin-top: 28px;
    padding: 28px 25px;

    border: 1px solid var(--secondary-color);
    border-radius: 10px;

    background: var(--white-color);
}

.phd-bio-eligibility-icon {
    flex-shrink: 0;

    width: 52px;
    height: 52px;

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

    border-radius: 50%;

    background: var(--primary-color);
    color: var(--white-color);

    font-size: 21px;
}

.phd-bio-eligibility-content {
    flex: 1;
}

.phd-bio-eligibility-content h3 {
    margin: 0 0 5px;

    color: var(--secondary-color);

    font-size: 18px;
    font-weight: 700;
}

.phd-bio-eligibility-content p {
    margin: 0;

    color: var(--secondary-color);

    font-size: 16px;
    line-height: 1.75;
}


/* TABLET */

@media (max-width: 991px) {

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

}


/* MOBILE */

@media (max-width: 767px) {

    .phd-bio-research-section {
        padding: 45px 0;
    }

    .phd-bio-container {
        padding: 0 15px;
    }

    .phd-bio-intro p {
        font-size: 14px;
        line-height: 1.7;
    }

    .phd-bio-investigator-box {
        padding: 55px 20px 20px;
    }

    .phd-bio-investigator-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .phd-bio-box-title {
        left: 15px;
        padding: 12px 20px;
        font-size: 15px;
    }

    .phd-bio-investigator-grid li {
        margin-bottom: 14px;
        font-size: 14px;
    }

    .phd-bio-info-box,
    .phd-bio-eligibility-box {
        gap: 15px;
        padding: 20px;
    }

    .phd-bio-info-icon,
    .phd-bio-eligibility-icon {
        width: 42px;
        height: 42px;
        font-size: 17px;
    }

    .phd-bio-info-content p,
    .phd-bio-eligibility-content p {
        font-size: 14px;
        line-height: 1.7;
    }

    .phd-bio-know-more {
        width: 100%;
    }

}


/* SMALL MOBILE */

@media (max-width: 480px) {

    .phd-bio-info-box,
    .phd-bio-eligibility-box {
        flex-direction: column;
    }

    .phd-bio-box-title {
        left: 10px;
        right: 10px;
        justify-content: center;
    }

}


.phd-bio-announcement {
    padding: 60px 0;
    background: var(--white-color);
    position: relative;
    overflow: hidden;
}

.phd-bio-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 25px;
}

/* Heading */

.phd-bio-header h2 {
    margin: 0 0 30px;
    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;
    line-height: 1.25;
    font-weight: 700;
}

.phd-bio-header h2 span {
    color: var(--primary-color);
}


/* Intro */

.phd-bio-intro {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 25px;
}

.phd-bio-intro-icon {
    width: 58px;
    height: 58px;
    min-width: 58px;
    border: 2px solid var(--secondary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 25px;
}

.phd-bio-intro h3 {
    margin: 0;
    color: var(--secondary-color);
    font-size: 21px;
    font-weight: 700;
}


/* Areas */

.phd-bio-areas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--secondary-color);
    border-radius: 15px;
    padding: 20px 35px;
    background: var(--white-color);
    box-shadow: 0 8px 30px rgba(0, 40, 60, 0.04);
}

.phd-bio-column {
    padding: 0 25px;
}

.phd-bio-column:first-child {
    border-right: 1px solid var(--secondary-color);
}

.phd-bio-area {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 13px 0;
    border-bottom: 1px solid var(--secondary-color);
    color: var(--secondary-color);
    font-size: 16px;
    line-height: 1.45;
}

.phd-bio-area:last-child {
    border-bottom: none;
}

.phd-bio-area > span {
    width: 23px;
    height: 23px;
    min-width: 23px;
    border: 2px solid #eaf2ee;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 10px;
    margin-top: 1px;
}


/* Deadline */

.phd-bio-deadline {
    margin-top: 20px;
    padding: 15px 25px;
    border: 1px solid var(--secondary-color);
    border-radius: 12px;
    background: var(--white-color);
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--secondary-color);
}

.phd-bio-deadline-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.phd-bio-deadline strong {
    font-size: 18px;
}

.phd-bio-deadline span {
    color: var(--primary-color);
    font-size: 18px;
    font-weight: 700;
}


/* Contact */

.phd-bio-contact {
    margin-top: 12px;
    padding: 15px 25px;
    border: 1px solid var(--secondary-color);
    border-radius: 12px;
    background: var(--white-color);
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--secondary-color);
    font-size: 16px;
}

.phd-bio-contact-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.phd-bio-contact a {
    color: var(--primary-color);
    font-weight: 700;
    text-decoration: none;
}

.phd-bio-contact a:hover {
    text-decoration: underline;
}


/* Tablet */

@media (max-width: 900px) {

    .phd-bio-header h2 {
        font-size: 30px;
    }

    .phd-bio-areas {
        padding: 15px;
    }

    .phd-bio-column {
        padding: 0 15px;
    }

}


/* Mobile */

@media (max-width: 650px) {

    .phd-bio-announcement {
        padding: 40px 0;
    }

    .phd-bio-wrap {
        padding: 0 15px;
    }

    .phd-bio-header h2 {
        font-size: 25px;
        line-height: 1.3;
    }

    .phd-bio-intro {
        align-items: flex-start;
    }

    .phd-bio-intro-icon {
        width: 45px;
        height: 45px;
        min-width: 45px;
        font-size: 19px;
    }

    .phd-bio-intro h3 {
        font-size: 17px;
        line-height: 1.4;
    }

    .phd-bio-areas {
        grid-template-columns: 1fr;
        padding: 15px 20px;
    }

    .phd-bio-column {
        padding: 0;
    }

    .phd-bio-column:first-child {
        border-right: none;
    }

    .phd-bio-area {
        font-size: 14px;
    }

    .phd-bio-deadline,
    .phd-bio-contact {
        padding: 13px 15px;
    }

    .phd-bio-deadline strong,
    .phd-bio-deadline span {
        font-size: 15px;
    }

    .phd-bio-contact {
        font-size: 14px;
        align-items: flex-start;
    }

}


/* phd chemistry section */

.phd-che-section {
    padding: 60px 0 30px;
    background: var(--white-color);
}

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


/* Header */

.phd-che-header h2 {
    margin: 0 0 18px;
    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 600;
}

.phd-che-header h2 span {
    display: block;
}

.phd-che-header p {
    margin: 0;
    color: var(--black-color);
    font-size: 16px;
    line-height: 1.6;
}


/* Banner */

.phd-che-banner {
    text-align: center;
    margin-top: 25px;
}

.phd-che-banner-title {
    display: inline-block;
    padding: 10px 70px;
    background: var(--secondary-color);
    color: var(--white-color);
    font-size: 20px;
    font-weight: 700;
}

.phd-che-banner h3 {
    margin: 12px 0;
    color: var(--secondary-color);
    font-size: 28px;
    font-weight: 800;
}

.phd-che-banner-subtitle {
    padding: 9px 20px;
    background: var(--secondary-color);
    color: var(--white-color);
    font-size: 17px;
    font-weight: 700;
}


/* Research Areas */

.phd-che-research {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--secondary-color);
    border-top: 0;
}

.phd-che-research-item {
    min-height: 145px;
    padding: 20px;
    border-right: 1px solid var(--secondary-color);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.phd-che-details{
    padding: 20px;
}
.phd-che-research-item:last-child {
    border-right: none;
}

.phd-che-research-item > i {
    width: 38px;
    height: 38px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: var(--secondary-color);
    color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.phd-che-research-item ul {
    width: 100%;
    margin: 0;
    padding-left: 20px;
}

.phd-che-research-item li {
    margin: 8px 0;
    color: var(--black-color);
    font-size: 15px;
    line-height: 1.4;
}


/* Main Information */

.phd-che-info {
    display: grid;
    grid-template-columns: 32% 68%;
    border: 1px solid var(--secondary-color);
    border-top: none;
}


/* Fellowship */

.phd-che-fellowship {
    padding: 25px;
    border-right: 1px solid var(--secondary-color);
}

.phd-che-section-title {
    margin: -25px -25px 20px;
    padding: 12px 18px;
    background: var(--secondary-color);
    color: var(--white-color);
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
}

.phd-che-fellowship ul,
.phd-che-detail-block ul {
    margin: 0;
    padding-left: 20px;
}

.phd-che-fellowship li,
.phd-che-detail-block li {
    margin-bottom: 10px;
    color: var(--black-color);
    font-size: 14px;
    line-height: 1.5;
}

.phd-che-fellowship p {
    margin: 20px 0 12px;
    font-size: 14px;
    line-height: 1.5;
}

.phd-che-fellowship a {
    color: var(--secondary-color);
    font-weight: 700;
    text-decoration: none;
}

.phd-che-apply-text {
    margin-top: 20px;
    font-size: 14px;
    font-weight: 700;
}

.phd-che-apply-btn {
    display: inline-block;
    margin-top: 15px;
    padding: 11px 25px;
    background: var(--primary-color);
    color: var(--white-color) !important;
    border-radius: 4px;
    transition: 0.3s ease;
}

.phd-che-apply-btn:hover {
    background: var(--secondary-color);
}


/* Details */

.phd-che-detail-block {
    padding: 20px 25px;
    border-bottom: 1px solid var(--secondary-color);
}

.phd-che-detail-block:last-child {
    border-bottom: none;
}

.phd-che-detail-block .phd-che-section-title {
    margin: -20px -25px 18px;
    background: transparent;
    color: var(--secondary-color);
    padding: 0;
    text-transform: uppercase;
}

.phd-che-detail-block .phd-che-section-title i {
    margin-right: 8px;
}


/* Responsive */

@media (max-width: 900px) {

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

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

    .phd-che-research-item:nth-child(2) {
        border-right: none;
    }

    .phd-che-research-item:nth-child(-n + 2) {
        border-bottom: 1px solid #c9d5df;
    }

    .phd-che-info {
        grid-template-columns: 1fr;
    }

    .phd-che-fellowship {
        border-right: none;
        border-bottom: 1px solid #c9d5df;
    }
}


@media (max-width: 600px) {

    .phd-che-section {
        padding: 40px 0;
    }

    .phd-che-container {
        padding: 0 15px;
    }

    .phd-che-header h2 {
        font-size: 25px;
    }

    .phd-che-header p {
        font-size: 14px;
    }

    .phd-che-banner-title {
        width: 100%;
        padding: 10px 15px;
        font-size: 16px;
    }

    .phd-che-banner h3 {
        font-size: 23px;
    }

    .phd-che-research {
        grid-template-columns: 1fr;
    }

    .phd-che-research-item {
        border-right: none !important;
        border-bottom: 1px solid #c9d5df;
    }

    .phd-che-research-item:last-child {
        border-bottom: none;
    }

    .phd-che-info {
        grid-template-columns: 1fr;
    }

    .phd-che-fellowship {
        padding: 20px;
    }

    .phd-che-section-title {
        margin: -20px -20px 18px;
    }

    .phd-che-detail-block {
        padding: 20px;
    }

    .phd-che-detail-block .phd-che-section-title {
        margin: -20px -20px 18px;
        padding: 0;
    }

    .phd-che-fellowship li,
    .phd-che-detail-block li {
        font-size: 13px;
    }
}


.phd-che-faq-section {
    width: 100%;
    padding: 40px 0;
    background: var(--white-color);
}

.phd-che-faq-container {
    width: 100%;
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 20px;
}


/* FAQ Item */

.phd-che-faq-item {
    margin-bottom: 9px;
    border: 1px solid #eeeeee;
    background: var(--white-color);
}


/* Header */

.phd-che-faq-header {
    width: 100%;
    min-height: 62px;
    padding: 0 40px;
    border: none;
    background: var(--secondary-color);
    color: var(--white-color);

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

    font-size: 20px;
    font-weight: 600;
    text-align: left;

    cursor: pointer;
    transition: background 0.3s ease;
}

.phd-che-faq-header:hover {
    background: var(--primary-color);
}


/* Icon */

.phd-che-faq-icon {
    width: 30px;
    height: 30px;

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

    font-size: 30px;
    font-weight: 300;
    line-height: 1;
}


/* Content */

.phd-che-faq-content {
    max-height: 0;
    overflow: hidden;

    padding: 0 40px;

    opacity: 0;

    transition:
        max-height 0.4s ease,
        padding 0.4s ease,
        opacity 0.3s ease;
}

.phd-che-faq-item.active .phd-che-faq-content {
    max-height: 800px;
    padding: 25px 40px 30px;
    opacity: 1;
}

.phd-che-faq-content ul {
    margin: 0;
    list-style-type: disc;
    padding-left: 22px;
}

.phd-che-faq-content li {
    margin-bottom: 14px;
    color: var(--secondary-color);
    font-size: 15px;
    line-height: 1.8;
}

.phd-che-faq-content li:last-child {
    margin-bottom: 0;
}

.phd-che-faq-content p {
    margin: 0 0 15px;
    color: var(--secondary-color);
    font-size: 15px;
    line-height: 1.8;
}

.phd-che-faq-content p:last-child {
    margin-bottom: 0;
}

.phd-che-faq-content a {
    color: var(--primary-color);
    text-decoration: none;
}

.phd-che-faq-content a:hover {
    text-decoration: underline;
}


/* Scholars */

.phd-che-scholars {
    min-height: 80px;
    margin-top: 18px;
    padding: 10px 48px;

    border: 1px solid #d9d9d9;
    background: var(--white-color);

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

.phd-che-scholars h2 {
    margin: 0;
    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
    font-weight: 500;
}

.phd-che-scholars-btn {
    min-width: 180px;
    padding: 12px 25px;

    background: var(--secondary-color);
    color: var(--white-color);

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

    text-decoration: none;
    font-size: 15px;
    font-weight: 600;

    transition: 0.3s ease;
}

.phd-che-scholars-btn:hover {
    background: var(--primary-color);
    color: var(--white-color);
}

.phd-che-scholars-btn span {
    font-size: 22px;
}


/* Tablet */

@media (max-width: 768px) {

    .phd-che-faq-section {
        padding: 30px 0;
    }

    .phd-che-faq-container {
        padding: 0 15px;
    }

    .phd-che-faq-header {
        min-height: 58px;
        padding: 0 25px;
        font-size: 18px;
    }

    .phd-che-faq-content {
        padding-left: 25px;
        padding-right: 25px;
    }

    .phd-che-faq-item.active .phd-che-faq-content {
        padding: 22px 25px 25px;
    }

    .phd-che-scholars {
        padding: 22px 25px;
    }

}


/* Mobile */

@media (max-width: 576px) {

    .phd-che-faq-header {
        min-height: 55px;
        padding: 0 18px;
        font-size: 16px;
    }

    .phd-che-faq-icon {
        width: 25px;
        height: 25px;
        font-size: 25px;
    }

    .phd-che-faq-content {
        padding-left: 18px;
        padding-right: 18px;
    }

    .phd-che-faq-item.active .phd-che-faq-content {
        padding: 20px 18px 22px;
    }

    .phd-che-faq-content li,
    .phd-che-faq-content p {
        font-size: 14px;
        line-height: 1.7;
    }

    .phd-che-scholars {
        min-height: auto;
        padding: 22px 18px;
        flex-direction: column;
        align-items: flex-start;
    }

    .phd-che-scholars h2 {
        font-size: 23px;
    }

    .phd-che-scholars-btn {
        width: 100%;
        min-width: auto;
    }

}



.phd-che-hero {
    position: relative;
    width: 100%;
    min-height: 550px;

    background-image: url("../images/ssju/ssju1.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

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

    overflow: hidden;
}


/* Dark overlay */

.phd-che-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.58);
}


/* Content */

.phd-che-hero-content {
    position: relative;
    z-index: 2;

    width: 90%;
    max-width: 1000px;

    text-align: center;
    color: #ffffff;
}


.phd-che-hero-content h1 {
    margin: 0 auto 38px;

    max-width: 950px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 35px;
    font-weight: 400;
    line-height: 1.25;

    color: var(--white-color);
}


.phd-che-hero-content p {
    margin: 0 0 55px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
    line-height: 1.4;

    color: var(--white-color);
}


/* Apply Button */

.phd-che-hero-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 200px;
    height: 55px;

    margin: 0 auto;

    background: var(--primary-color);
    color: var(--secondary-color);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 700;

    text-decoration: none;

    transition: all 0.3s ease;
}


.phd-che-hero-btn:hover {
    background: var(--primary-color);
    color: var(--white-color);
}


/* Right Side Tab */

.phd-che-hero::after {
    content: "Study at SSJU";

    position: absolute;
    z-index: 5;

    right: 0;
    top: 50%;

    width: 52px;
    height: 175px;

    transform: translateY(-50%);

    background: var(--secondary-color);
    color: var(--white-color);

    border-radius: 15px 0 0 15px;

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

    writing-mode: vertical-rl;
    text-orientation: mixed;

    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.3px;
}


/* Tablet */

@media (max-width: 992px) {

    .phd-che-hero {
        min-height: 450px;
    }

    .phd-che-hero-content h1 {
        font-size: 30px;
    }

    .phd-che-hero-content p {
        font-size: 20px;
        margin-bottom: 40px;
    }

    .phd-che-hero-btn {
        width: 180px;
        height: 50px;
    }

}


/* Mobile */

@media (max-width: 576px) {

    .phd-che-hero {
        min-height: 400px;
        background-position: center;
    }

    .phd-che-hero-overlay {
        background: rgba(0, 0, 0, 0.65);
    }

    .phd-che-hero-content {
        width: 88%;
    }

    .phd-che-hero-content h1 {
        font-size: 25px;
        line-height: 1.3;
        margin-bottom: 30px;
    }

    .phd-che-hero-content p {
        font-size: 18px;
        margin-bottom: 35px;
    }

    .phd-che-hero-btn {
        width: 160px;
        height: 50px;
        font-size: 18px;
    }

    .phd-che-hero::after {
        width: 42px;
        height: 145px;
        font-size: 13px;
    }

}


.phd-che-faq {
    width: 100%;
    padding: 65px 0;
    background: var(--white-color);
}

.phd-che-faq-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}


/* Heading */

.phd-che-faq-title {
    margin: 0 0 38px;

    color: var(--secondary-color);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 35px;
    line-height: 1.15;
    font-weight: 600;
}


/* FAQ list */

.phd-che-faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


/* FAQ Item */

.phd-che-faq-item {
    border: 1px solid var(--secondary-color);
    background: var(--white-color);
}
.phd-che-faq-item:hover {
    border: 1px solid var(--secondary-color);
    background: var(--white-color);
}


/* Question */

.phd-che-faq-question {
    width: 100%;
    min-height: 60px;

    padding: 15px;

    border: none;
    background: var(--white-color);

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

    gap: 30px;

    color: var(--black-color);

    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;

    text-align: left;

    cursor: pointer;

    transition: background 0.3s ease;
}

.phd-che-faq-question:hover {
    background: var(--white-color);
}


/* Plus */

.phd-che-faq-plus {
    width: 35px;
    min-width: 35px;
    height: 35px;

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

    color: var(--black-color);

    font-size: 35px;
    font-weight: 300;
    line-height: 1;

    transition: transform 0.3s ease;
}


/* Answer */

.phd-che-faq-answer {
    max-height: 0;
    overflow: hidden;

    padding: 0 20px;

    opacity: 0;

    transition:
        max-height 0.4s ease,
        padding 0.4s ease,
        opacity 0.3s ease;
}

.phd-che-faq-item.active .phd-che-faq-answer {
    max-height: 400px;
    padding: 0 20px 25px;

    opacity: 1;
}

.phd-che-faq-answer p {
    margin: 0;

    color: var(--black-color);

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


/* Active icon */

.phd-che-faq-item.active .phd-che-faq-plus {
    transform: rotate(45deg);
}


/* Tablet */

@media (max-width: 992px) {

    .phd-che-faq {
        padding: 50px 0;
    }

    .phd-che-faq-title {
        font-size: 30px;
    }

    .phd-che-faq-question {
        font-size: 18px;
    }

}


/* Mobile */

@media (max-width: 576px) {

    .phd-che-faq {
        padding: 40px 0;
    }

    .phd-che-faq-container {
        padding: 0 15px;
    }

    .phd-che-faq-title {
        margin-bottom: 25px;
        font-size: 25px;
    }

    .phd-che-faq-question {
        min-height: 65px;
        padding: 15px;

        gap: 15px;

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

    .phd-che-faq-plus {
        width: 28px;
        min-width: 28px;
        height: 28px;

        font-size: 28px;
    }

    .phd-che-faq-answer {
        padding-left: 15px;
        padding-right: 15px;
    }

    .phd-che-faq-item.active .phd-che-faq-answer {
        padding: 0 15px 20px;
    }

    .phd-che-faq-answer p {
        font-size: 14px;
        line-height: 1.7;
    }

}


.phd-cs-details {
    width: 100%;
    padding: 40px 0;
    background: var(--white-color);
}

.phd-cs-container {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 20px;
}


/* Heading */

.phd-cs-title {
    margin: 0 0 25px;

    color: #111111;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 35px;
    font-weight: 500;
    line-height: 1.2;
}


/* Intro */

.phd-cs-intro,
.phd-cs-eligibility-text {
    margin: 0 0 12px;

    color: #161616;

    font-size: 17px;
    line-height: 1.7;
}

.phd-cs-eligibility-text {
    margin-top: 20px;
}


/* Programme List */

.phd-cs-programmes {
    margin: 0;
    padding-left: 32px;

    color: #151515;

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

.phd-cs-programmes li {
    padding-left: 3px;
    list-style-type: disc;
}


/* Table Wrapper */

.phd-cs-table-wrapper {
    width: 100%;
    overflow-x: auto;
    margin-top: 10px;
}


/* Table */

.phd-cs-table {
    width: 100%;
    border-collapse: collapse;

    color: var(--black-color);

    font-size: 16px;
    line-height: 1.45;
}

.phd-cs-table th,
.phd-cs-table td {
    border: 1px solid var(--black-color);
    padding: 18px 20px;
    vertical-align: middle;
}

.phd-cs-table th {
    background: var(--white-color);

    font-size: 18px;
    font-weight: 600;
    text-align: center;
}

.phd-cs-table th:first-child {
    width: 18%;
}

.phd-cs-table th:nth-child(2) {
    width: 57%;
}

.phd-cs-table th:nth-child(3) {
    width: 25%;
}

.phd-cs-table td {
    text-align: center;
}

.phd-cs-table .phd-cs-programme-name {
    font-weight: 500;
}


/* Note */

.phd-cs-note {
    margin: 28px 0 0;

    color: var(--black-color);

    font-size: 17px;
    line-height: 1.6;

    text-align: center;
    font-style: italic;
}


/* Hover */

.phd-cs-table tbody tr {
    transition: background 0.25s ease;
}

.phd-cs-table tbody tr:hover {
    background: #f8fafc;
}


/* Tablet */

@media (max-width: 900px) {

    .phd-cs-details {
        padding: 45px 0;
    }

    .phd-cs-title {
        font-size: 38px;
    }

    .phd-cs-intro,
    .phd-cs-eligibility-text,
    .phd-cs-programmes {
        font-size: 16px;
    }

    .phd-cs-table {
        min-width: 850px;
    }

}


/* Mobile */

@media (max-width: 576px) {

    .phd-cs-details {
        padding: 35px 0;
    }

    .phd-cs-container {
        padding: 0 15px;
    }

    .phd-cs-title {
        font-size: 30px;
    }

    .phd-cs-intro,
    .phd-cs-eligibility-text,
    .phd-cs-programmes {
        font-size: 14px;
        line-height: 1.7;
    }

    .phd-cs-programmes {
        padding-left: 22px;
    }

    .phd-cs-table {
        min-width: 800px;
        font-size: 14px;
    }

    .phd-cs-table th,
    .phd-cs-table td {
        padding: 14px 15px;
    }

    .phd-cs-note {
        font-size: 14px;
    }

}


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

.phd-history-testimonial {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.phd-history-swiper {
    width: 100%;
}

.phd-history-testimonial-content {
    display: grid;
    grid-template-columns: 50% 50%;
    min-height: 500px;
    max-height: 500px;
}


/* LEFT CONTENT */

.phd-history-testimonial-text {
    background: var(--primary-color);
    color: var(--white-color);
    padding: 55px 7%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.phd-history-testimonial-text h2 {
    margin: 0 0 28px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 35px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--white-color);
}

.phd-history-testimonial-text p {
    margin: 0 0 25px;
    max-width: 700px;
    font-size: 17px;
    line-height: 1.6;
    font-weight: 500;
    color: var(--white-color);
}

.phd-history-testimonial-text h4 {
    margin: 0 0 5px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    color: var(--white-color);
}

.phd-history-testimonial-text span {
    font-size: 15px;
    color: var(--white-color);
}


/* RIGHT IMAGE */

.phd-history-testimonial-image {
    width: 100%;
    height: 100%;
    min-height: 500px;
    max-height: 500px;
    overflow: hidden;
}

.phd-history-testimonial-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}


/* NAVIGATION */

.phd-history-navigation {
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;

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

.phd-history-prev,
.phd-history-next {
    width: 70px;
    height: 70px;
    background: var(--secondary-color);
    color: var(--white-color);

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

    cursor: pointer;
    transition: 0.3s ease;
}

.phd-history-prev span,
.phd-history-next span {
    font-size: 40px;
    font-family: Arial, sans-serif;
    font-weight: 200;
    line-height: 1;
}

.phd-history-prev:hover,
.phd-history-next:hover {
    background: var(--primary-color);
}


/* PAGINATION */

.phd-history-pagination {
    position: absolute;
    left: 25% !important;
    bottom: 25px !important;
    width: auto !important;
    z-index: 10;
}

.phd-history-pagination .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    background: var(--white-color);
    opacity: 0.7;
}

.phd-history-pagination .swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--white-color);
}


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

@media (max-width: 991px) {

    .phd-history-testimonial-content {
        grid-template-columns: 1fr;
    }

    .phd-history-testimonial-text {
        min-height: auto;
        padding: 45px 40px;
    }

    .phd-history-testimonial-text h2 {
        font-size: 30px;
    }

    .phd-history-testimonial-text p {
        font-size: 16px;
    }

    .phd-history-testimonial-image {
        min-height: 500px;
        height: 500px;
    }

    .phd-history-navigation {
        right: 15px;
    }

    .phd-history-prev,
    .phd-history-next {
        width: 55px;
        height: 55px;
    }

    .phd-history-prev span,
    .phd-history-next span {
        font-size: 38px;
    }

    .phd-history-pagination {
        left: 40px !important;
        bottom: 20px !important;
    }
}


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

@media (max-width: 575px) {

    .phd-history-testimonial-text {
        padding: 40px 25px 55px;
    }

    .phd-history-testimonial-text h2 {
        font-size: 26px;
        margin-bottom: 20px;
    }

    .phd-history-testimonial-text p {
        font-size: 15px;
        line-height: 1.65;
    }

    .phd-history-testimonial-text h4 {
        font-size: 19px;
    }

    .phd-history-testimonial-image {
        min-height: 400px;
        height: 400px;
    }

    .phd-history-navigation {
        right: 10px;
        top: 75%;
    }

    .phd-history-prev,
    .phd-history-next {
        width: 45px;
        height: 45px;
    }

    .phd-history-prev span,
    .phd-history-next span {
        font-size: 30px;
    }

    .phd-history-pagination {
        left: 25px !important;
        bottom: 20px !important;
    }
}



/* =========================================
   RASSJU RESOURCES SECTION
========================================= */

.rassju-resources-section {
    width: 100%;
    padding: 20px 0 70px;
    background: var(--white-color);
}

.rassju-resources-container {
    width: 92%;
    max-width: 1200px;
    margin: 0 auto;
}


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

.rassju-resources-title {
    margin: 0 0 30px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--black-color);

    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 35px;
    font-weight: 600;
    line-height: 1.2;
}


/* =========================================
   RESOURCE ITEM
========================================= */

.rassju-resource-item {
    display: grid;
    grid-template-columns: 35% 1fr 180px;
    align-items: center;

    min-height: 100px;

    border-bottom: 1px solid var(--black-color);
}


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

.rassju-resource-name {
    display: flex;
    align-items: center;
    gap: 20px;

    min-height: 70px;
    padding: 15px 25px 15px 0;

    border-right: 1px solid var(--black-color);
}

.rassju-resource-name h3 {
    margin: 0;

    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;
    font-weight: 600;
    line-height: 1.35;
}


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

.rassju-resource-arrow {
    flex: 0 0 23px;

    width: 23px;
    height: 23px;

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

    border: 2px solid var(--primary-color);
    border-radius: 50%;

    color: var(--primary-color);

    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}


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

.rassju-resource-description {
    padding: 18px 25px;
}

.rassju-resource-description p {
    margin: 0;

    color: var(--secondary-color);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
}


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

.rassju-resource-action {
    padding-left: 20px;
}

.rassju-resource-action a {
    display: flex;
    align-items: center;
    justify-content: center;

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

    padding: 10px 18px;

    background: var(--secondary-color);
    color: var(--white-color);

    text-decoration: none;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 500;

    border-radius: 3px;

    transition: all 0.3s ease;
}

.rassju-resource-action a:hover {
    background: var(--primary-color);
}


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

@media (max-width: 991px) {

    .rassju-resources-section {
        padding: 15px 0 50px;
    }

    .rassju-resources-container {
        width: 90%;
    }

    .rassju-resources-title {
        font-size: 32px;
        margin-bottom: 20px;
    }

    .rassju-resource-item {
        grid-template-columns: 32% 1fr 150px;
    }

    .rassju-resource-name {
        gap: 12px;
        padding-right: 15px;
    }

    .rassju-resource-name h3 {
        font-size: 20px;
    }

    .rassju-resource-description {
        padding: 15px 18px;
    }

    .rassju-resource-description p {
        font-size: 15px;
        line-height: 1.6;
    }

    .rassju-resource-action {
        padding-left: 10px;
    }

    .rassju-resource-action a {
        font-size: 15px;
    }
}


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

@media (max-width: 767px) {

    .rassju-resources-section {
        padding: 10px 0 40px;
    }

    .rassju-resources-container {
        width: 90%;
    }

    .rassju-resources-title {
        margin-bottom: 20px;
        padding-bottom: 10px;
        font-size: 25px;
    }


    /* Stack each resource */
    .rassju-resource-item {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        min-height: auto;
        padding: 0;

        border-bottom: 1px solid var(--black-color);
    }


    /* Resource title */

    .rassju-resource-name {
        width: 100%;

        min-height: auto;

        padding: 18px 0;

        border-right: none;
    }

    .rassju-resource-name h3 {
        font-size: 20px;
        line-height: 1.3;
    }


    /* Description */

    .rassju-resource-description {
        padding: 0 0 17px;
    }

    .rassju-resource-description p {
        font-size: 14px;
        line-height: 1.7;
    }


    /* Button */

    .rassju-resource-action {
        width: 100%;
        padding: 0 0 20px;
    }

    .rassju-resource-action a {
        width: 100%;
        min-height: 44px;
        font-size: 15px;
    }
}


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

@media (max-width: 480px) {

    .rassju-resources-container {
        width: 92%;
    }

    .rassju-resources-title {
        font-size: 24px;
    }

    .rassju-resource-name {
        gap: 12px;
        padding: 16px 0;
    }

    .rassju-resource-name h3 {
        font-size: 18px;
    }

    .rassju-resource-description p {
        font-size: 14px;
    }

    .rassju-resource-arrow {
        flex-basis: 22px;
        width: 22px;
        height: 22px;
        font-size: 14px;
    }
}


/* =========================================
   SSJU RESEARCH STORIES
========================================= */

.rassju-research-stories {
    width: 100%;
    padding: 55px 20px 70px;
    background: #fff;
}

.rassju-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}


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

.rassju-research-header {
    margin-bottom: 45px;
}

.rassju-research-header h2 {
    margin: 0 0 22px;
    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 35px;
    font-weight: 700;
    line-height: 1.2;
}

.rassju-research-header p {
    max-width: 1250px;
    margin: 0;
    color: #111;
    font-family: Arial, sans-serif;
    font-size: 17px;
    line-height: 1.8;
}


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

.rassju-research-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 38px 20px;
}


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

.rassju-research-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.rassju-research-image {
    width: 100%;
    height: 238px;
    margin-bottom: 14px;
    overflow: hidden;
    border-radius: 10px;
    background: #f1f1f1;
    flex-shrink: 0;
}

.rassju-research-card h3 {
    margin: 0 0 12px;
    color: var(--black-color);
    font-family: Arial, sans-serif;
    font-size: 21px;
    font-weight: 500;
    line-height: 1.4;

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

.rassju-research-card p {
    margin: 0 0 20px;
    color: var(--black-color);
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.7;

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

    /* Equal content area */
    min-height: 54px;
}

.rassju-research-link {
    display: inline-block;
    margin-top: auto;
    color: var(--primary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.4;
}

.rassju-research-link:hover {
    color: var(--secondary-color);
    text-decoration: underline;
}

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

.rassju-research-card h3 {
    margin: 0 0 12px;
    color: var(--secondary-color);
    font-family: Arial, sans-serif;
    font-size: 21px;
    font-weight: 500;
    line-height: 1.4;

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

.rassju-research-card p {
    margin: 0 0 35px;
    color: var(--black-color);
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.7;

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


/* =========================================
   READ MORE
========================================= */

.rassju-research-link {
    display: inline-block;
    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

.rassju-research-link:hover {
    color: var(--primary-color);
    text-decoration: underline;
}


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

@media (max-width: 991px) {

    .rassju-research-stories {
        padding: 45px 18px 60px;
    }

    .rassju-research-header {
        margin-bottom: 35px;
    }

    .rassju-research-header h2 {
        font-size: 34px;
    }

    .rassju-research-header p {
        font-size: 16px;
        line-height: 1.7;
    }

    .rassju-research-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 35px 20px;
    }

    .rassju-research-image {
        height: 220px;
    }

}


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

@media (max-width: 600px) {

    .rassju-research-stories {
        padding: 35px 15px 50px;
    }

    .rassju-research-header {
        margin-bottom: 30px;
    }

    .rassju-research-header h2 {
        margin-bottom: 15px;
        font-size: 30px;
    }

    .rassju-research-header p {
        font-size: 15px;
        line-height: 1.65;
    }

    .rassju-research-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .rassju-research-image {
        height: 230px;
        margin-bottom: 13px;
    }

    .rassju-research-card h3 {
        font-size: 20px;
    }

    .rassju-research-card p {
        margin-bottom: 22px;
        font-size: 15px;
    }

    .rassju-research-link {
        font-size: 15px;
    }

}


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

@media (max-width: 400px) {

    .rassju-research-stories {
        padding-left: 12px;
        padding-right: 12px;
    }

    .rassju-research-header h2 {
        font-size: 27px;
    }

    .rassju-research-image {
        height: 205px;
    }

}



/* =========================================
   SSJU RESEARCH PUBLICATIONS
========================================= */

.rassju-publications {
    width: 100%;
    padding: 45px 20px;
    background: var(--white-color);
}

.rassju-publications-box {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 1480px;
    min-height: 310px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 10px;
    background:
        linear-gradient(
            90deg,
            rgba(8, 32, 65, 0.98),
            rgba(8, 32, 65, 0.94)
        ),
        url("../images/ssju/ssju1.jpg") center/cover no-repeat;
}


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

.rassju-publications-content {
    position: relative;
    z-index: 2;
    width: calc(100% - 110px);
    padding: 48px 50px;
}

.rassju-publications-content h2 {
    margin: 0 0 18px;
    color: var(--white-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 35px;
    font-weight: 600;
    line-height: 1.2;
}

.rassju-publications-content p {
    max-width: 850px;
    margin: 0 0 27px;
    color: var(--white-color);
    font-family: Arial, sans-serif;
    font-size: 20px;
    line-height: 1.65;
}


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

.rassju-publications-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 55px;
    padding: 0 30px;
    border-radius: 5px;
    background: var(--primary-color);
    color: var(--white-color);
    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.rassju-publications-btn:hover {
    background: var(--primary-color);
    color: var(--white-color);
    transform: translateY(-2px);
}


/* =========================================
   RIGHT ACCENT
========================================= */

.rassju-publications-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 115px;
    height: 100%;
    background: var(--primary-color);
    border-radius: 0 10px 10px 0;
}


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

@media (max-width: 991px) {

    .rassju-publications {
        padding: 40px 18px;
    }

    .rassju-publications-box {
        min-height: 290px;
    }

    .rassju-publications-content {
        width: calc(100% - 80px);
        padding: 42px 38px;
    }

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

    .rassju-publications-content p {
        font-size: 17px;
        line-height: 1.6;
    }

    .rassju-publications-accent {
        width: 80px;
    }

}


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

@media (max-width: 600px) {

    .rassju-publications {
        padding: 30px 15px;
    }

    .rassju-publications-box {
        display: block;
        min-height: auto;
        border-radius: 8px;
    }

    .rassju-publications-content {
        width: 100%;
        padding: 35px 25px 45px;
    }

    .rassju-publications-content h2 {
        margin-bottom: 15px;
        font-size: 25px;
    }

    .rassju-publications-content p {
        margin-bottom: 25px;
        font-size: 15px;
        line-height: 1.65;
    }

    .rassju-publications-btn {
        width: 100%;
        min-height: 50px;
        padding: 0 20px;
        font-size: 15px;
    }

    .rassju-publications-accent {
        position: absolute;
        top: auto;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 8px;
        border-radius: 0 0 8px 8px;
    }

}


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

@media (max-width: 400px) {

    .rassju-publications-content {
        padding: 30px 20px 40px;
    }

    .rassju-publications-content h2 {
        font-size: 24px;
    }

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

}



/* ================================
   Research Opportunities
================================ */

.rassju-ro-section {
    width: 100%;
    padding: 60px 0;
    background: var(--white-color);
}

.rassju-ro-container {
    width: 100%;
    max-width: 1335px;
    margin: 0 auto;
    padding: 0 20px;
}

.rassju-ro-title {
    margin: 0 0 32px;
    font-size: 36px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
}

.rassju-ro-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.rassju-ro-card {
    position: relative;
    min-height: 380px;
    padding: 48px 34px 42px;
    background: var(--secondary-color);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rassju-ro-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: var(--white-color);
    font-size: 55px;
}

.rassju-ro-card-title {
    margin: 0 0 12px;
    color: var(--white-color);
    font-size: 21px;
    line-height: 1.35;
    font-weight: 700;
}

.rassju-ro-card-text {
    margin: 0;
    max-width: 600px;
    color: var(--white-color);
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
}

.rassju-ro-link {
    margin-top: auto;
    padding-top: 30px;
    display: inline-block;
    width: fit-content;
    color: var(--white-color);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s ease;
}

.rassju-ro-link:hover {
    color: var(--primary-color);
}


/* ================================
   Tablet
================================ */

@media (max-width: 991px) {

    .rassju-ro-section {
        padding: 50px 0;
    }

    .rassju-ro-title {
        font-size: 32px;
        margin-bottom: 28px;
    }

    .rassju-ro-grid {
        gap: 18px;
    }

    .rassju-ro-card {
        min-height: 360px;
        padding: 38px 28px 34px;
    }

    .rassju-ro-icon {
        margin-bottom: 22px;
    }

    .rassju-ro-card-title {
        font-size: 19px;
    }

    .rassju-ro-card-text {
        font-size: 15px;
    }
}


/* ================================
   Mobile
================================ */

@media (max-width: 767px) {

    .rassju-ro-section {
        padding: 40px 0;
    }

    .rassju-ro-container {
        padding: 0 15px;
    }

    .rassju-ro-title {
        font-size: 28px;
        margin-bottom: 24px;
    }

    .rassju-ro-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .rassju-ro-card {
        min-height: 330px;
        padding: 32px 24px 28px;
        border-radius: 8px;
    }

    .rassju-ro-icon {
        width: 60px;
        height: 60px;
        font-size: 45px;
        margin-bottom: 20px;
    }

    .rassju-ro-card-title {
        font-size: 19px;
    }

    .rassju-ro-card-text {
        font-size: 15px;
        line-height: 1.55;
    }

    .rassju-ro-link {
        padding-top: 24px;
        font-size: 15px;
    }
}


/* ================================
   Small Mobile
================================ */

@media (max-width: 480px) {

    .rassju-ro-section {
        padding: 32px 0;
    }

    .rassju-ro-title {
        font-size: 25px;
    }

    .rassju-ro-card {
        min-height: 310px;
        padding: 28px 20px 25px;
    }

    .rassju-ro-icon {
        font-size: 40px;
        margin-bottom: 18px;
    }

    .rassju-ro-card-title {
        font-size: 18px;
    }

    .rassju-ro-card-text {
        font-size: 14px;
    }
}



/* =========================================
   SSJU - Research News
========================================= */

.rassju-rn-section {
    width: 100%;
    padding: 65px 0;
    background: var(--white-color);
}

.rassju-rn-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 35px;
}


/* Heading */

.rassju-rn-heading {
    margin-bottom: 45px;
}

.rassju-rn-title {
    margin: 0 0 20px;
    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 36px;
    line-height: 1.2;
    font-weight: 700;
}

.rassju-rn-description {
    max-width: 1250px;
    margin: 0;
    color: var(--black-color);
    font-size: 16px;
    line-height: 1.8;
}


/* Grid */

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


/* Card */

.rassju-rn-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
}


/* Image */

.rassju-rn-image-wrap {
    width: 100%;
    height: 240px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--secondary-color);
}

.rassju-rn-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.rassju-rn-card:hover .rassju-rn-image {
    transform: scale(1.04);
}


/* Content */

.rassju-rn-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-top: 12px;
}


.rassju-rn-card-title {
    margin: 0 0 12px;
    color: var(--black-color);
    font-size: 20px;
    line-height: 1.45;
    font-weight: 600;

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


.rassju-rn-date {
    margin-bottom: 10px;
    color: #666;
    font-size: 14px;
    line-height: 1.5;
}


.rassju-rn-card-text {
    margin: 0;
    color: var(--black-color);
    font-size: 15px;
    line-height: 1.55;

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


/* Read More */

.rassju-rn-read-more {
    display: inline-block;
    width: fit-content;
    margin-top: auto;
    padding-top: 28px;

    color: var(--primary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;

    transition: all 0.3s ease;
}

.rassju-rn-read-more:hover {
    color: var(--secondary-color);
}


/* Explore Button */

.rassju-rn-button-wrap {
    display: flex;
    justify-content: center;
    margin-top: 48px;
}

.rassju-rn-explore-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 55px;
    padding: 0 24px;

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

    color: var(--secondary-color);
    background: var(--white-color);

    font-size: 16px;
    font-weight: 600;
    text-decoration: none;

    transition: all 0.3s ease;
}

.rassju-rn-explore-btn:hover {
    color: var(--white-color);
    background: var(--secondary-color);
    border-color: var(--secondary-color);
}


/* =========================================
   Tablet
========================================= */

@media (max-width: 991px) {

    .rassju-rn-section {
        padding: 50px 0;
    }

    .rassju-rn-container {
        padding: 0 25px;
    }

    .rassju-rn-title {
        font-size: 32px;
    }

    .rassju-rn-heading {
        margin-bottom: 35px;
    }

    .rassju-rn-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 20px;
    }

    .rassju-rn-image-wrap {
        height: 220px;
    }

    .rassju-rn-card-title {
        font-size: 18px;
    }
}


/* =========================================
   Mobile
========================================= */

@media (max-width: 767px) {

    .rassju-rn-section {
        padding: 40px 0;
    }

    .rassju-rn-container {
        padding: 0 18px;
    }

    .rassju-rn-title {
        margin-bottom: 14px;
        font-size: 28px;
    }

    .rassju-rn-description {
        font-size: 15px;
        line-height: 1.65;
    }

    .rassju-rn-heading {
        margin-bottom: 30px;
    }

    .rassju-rn-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .rassju-rn-image-wrap {
        height: 230px;
        border-radius: 8px;
    }

    .rassju-rn-card-title {
        font-size: 19px;
        line-height: 1.4;
    }

    .rassju-rn-card-text {
        font-size: 14px;
    }

    .rassju-rn-read-more {
        padding-top: 20px;
    }

    .rassju-rn-button-wrap {
        margin-top: 40px;
    }

    .rassju-rn-explore-btn {
        width: 100%;
        max-width: 280px;
    }
}


/* =========================================
   Small Mobile
========================================= */

@media (max-width: 480px) {

    .rassju-rn-section {
        padding: 35px 0;
    }

    .rassju-rn-container {
        padding: 0 15px;
    }

    .rassju-rn-title {
        font-size: 25px;
    }

    .rassju-rn-description {
        font-size: 14px;
    }

    .rassju-rn-image-wrap {
        height: 200px;
    }

    .rassju-rn-card-title {
        font-size: 18px;
    }

    .rassju-rn-grid {
        gap: 30px;
    }
}



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

.rassju-research-events,
.rassju-past-events {
    width: 100%;
    padding: 60px 0;
    background: #cfcfcf;
}

.rassju-research-container {
    width: min(1200px, 92%);
    margin: 0 auto;
}


/* Main Heading */
.rassju-research-heading h2 {
    margin: 0 0 18px;
    color: var(--secondary-color);
    font-size: 35px;
    line-height: 1.2;
    font-weight: 700;
}

.rassju-research-heading p {
    max-width: 1150px;
    margin: 0;
    color: var(--black-color);
    font-size: 16px;
    line-height: 1.8;
}


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

.rassju-upcoming-event {
    margin-top: 45px;
}

.rassju-section-subtitle {
    margin: 0 0 25px;
    color: var(--secondary-color);
    font-size: 28px;
    line-height: 1.3;
    font-weight: 700;
}

.rassju-upcoming-wrapper {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 35px;
    align-items: center;
    min-height: 220px;
}


/* Upcoming Image */
.rassju-upcoming-image {
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
}

.rassju-upcoming-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


/* Upcoming Content */
.rassju-upcoming-content h3 {
    margin: 0 0 12px;
    color: var(--secondary-color);
    font-size: 25px;
    line-height: 1.35;
    font-weight: 700;
}

.rassju-upcoming-content p {
    max-width: 1000px;
    margin: 0;
    color: var(--black-color);
    font-size: 16px;
    line-height: 1.7;
}


/* Buttons */
.rassju-event-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.rassju-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 11px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.rassju-btn-primary {
    color: var(--white-color);
    background: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.rassju-btn-primary:hover {
    color: var(--white-color);
    opacity: 0.9;
}

.rassju-btn-secondary {
    color: var(--white-color);
    background: var(--secondary-color);
    border: 1px solid var(--secondary-color);
}

.rassju-btn-secondary:hover {
    color: var(--white-color);
    opacity: 0.9;
}


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

.rassju-past-events {
    padding-top: 20px;
}

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


/* Event Card */
.rassju-event-card {
    position: relative;
    min-height: 250px;
    overflow: hidden;
    background: var(--white-color);
    border-radius: 9px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.10);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rassju-event-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.14);
}


/* Event Status */
.rassju-event-status {
    display: block;
    width: 110px;
    padding: 9px 12px;
    color: var(--white-color);
    background: var(--primary-color);
    text-align: center;
    font-size: 13px;
    font-weight: 600;
}


/* Card Content */
.rassju-event-card-content {
    padding: 20px 28px 25px;
}

.rassju-event-card h3 {
    margin: 0 0 12px;
    color: var(--secondary-color);
    font-size: 20px;
    line-height: 1.4;
    font-weight: 700;
}

.rassju-event-date {
    margin-bottom: 14px;
    color: var(--secondary-color);
    font-size: 14px;
    font-weight: 600;
}

.rassju-event-card p {
    margin: 0 0 15px;
    color: var(--black-color);
    font-size: 15px;
    line-height: 1.65;
}

.rassju-read-more {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    transition: opacity 0.3s ease;
}

.rassju-read-more:hover {
    opacity: 0.75;
}


/* View All */
.rassju-all-events {
    display: flex;
    justify-content: center;
    margin-top: 45px;
}


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

@media (max-width: 991px) {

    .rassju-research-events,
    .rassju-past-events {
        padding: 50px 0;
    }

    .rassju-research-heading h2 {
        font-size: 30px;
    }

    .rassju-section-subtitle {
        font-size: 25px;
    }

    .rassju-upcoming-wrapper {
        grid-template-columns: 110px 1fr;
        gap: 25px;
    }

    .rassju-upcoming-image {
        width: 110px;
        height: 110px;
    }

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

}


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

@media (max-width: 767px) {

    .rassju-research-events,
    .rassju-past-events {
        padding: 40px 0;
    }

    .rassju-research-container {
        width: 90%;
    }

    .rassju-research-heading h2 {
        margin-bottom: 14px;
        font-size: 25px;
    }

    .rassju-research-heading p {
        font-size: 15px;
        line-height: 1.7;
    }

    .rassju-upcoming-event {
        margin-top: 35px;
    }

    .rassju-section-subtitle {
        margin-bottom: 20px;
        font-size: 23px;
    }

    .rassju-upcoming-wrapper {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .rassju-upcoming-image {
        width: 100%;
        height: 190px;
    }

    .rassju-upcoming-content h3 {
        font-size: 22px;
    }

    .rassju-upcoming-content p {
        font-size: 15px;
    }

    .rassju-event-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .rassju-btn {
        width: 100%;
    }

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

    .rassju-event-card {
        min-height: auto;
    }

    .rassju-event-card-content {
        padding: 18px 22px 23px;
    }

    .rassju-event-card h3 {
        font-size: 19px;
    }

    .rassju-all-events {
        margin-top: 30px;
    }

}


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

@media (max-width: 480px) {

    .rassju-research-heading h2 {
        font-size: 24px;
    }

    .rassju-section-subtitle {
        font-size: 21px;
    }

    .rassju-upcoming-image {
        height: 160px;
    }

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

    .rassju-event-card-content {
        padding: 17px 18px 20px;
    }

}



/* =========================================
   SSJU - Public Engagement Initiatives
   ========================================= */

.rassju-public-engagement {
    width: 100%;
    padding: 70px 0;
    background: var(--white-color);
}

.rassju-public-engagement-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 30px;
}

/* Heading */

.rassju-public-engagement-heading {
    margin-bottom: 45px;
}

.rassju-public-engagement-heading h2 {
    margin: 0 0 20px;
    color: var(--secondary-color);
    font-size: 35px;
    line-height: 1.2;
    font-weight: 600;
}

.rassju-public-engagement-heading p {
    max-width: 1250px;
    margin: 0;
    color: var(--black-color);
    font-size: 18px;
    line-height: 1.7;
}


/* Cards Grid */

.rassju-public-engagement-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}


/* Card */

.rassju-engagement-card {
    overflow: hidden;
    background: var(--white-color);
    border-radius: 10px;
    border: 1px solid rgba(8, 32, 65, 0.12);
    box-shadow: 0 8px 25px rgba(8, 32, 65, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rassju-engagement-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 35px rgba(8, 32, 65, 0.14);
}


/* Video/Image */

.rassju-engagement-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--secondary-color);
}

.rassju-engagement-video img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.rassju-engagement-card:hover
.rassju-engagement-video img {
    transform: scale(1.04);
}


/* Play Button */

.rassju-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 52px;
    transform: translate(-50%, -50%);
    background: var(--primary-color);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.rassju-video-play span {
    color: var(--white-color);
    font-size: 25px;
    line-height: 1;
    margin-left: 3px;
}

.rassju-video-play:hover {
    transform: translate(-50%, -50%) scale(1.08);
}


/* Content */

.rassju-engagement-content {
    display: flex;
    flex-direction: column;
    min-height: 210px;
    padding: 24px;
}

.rassju-engagement-content h3 {
    margin: 0 0 12px;
    color: var(--secondary-color);
    font-size: 22px;
    line-height: 1.35;
    font-weight: 700;
}

.rassju-engagement-content p {
    margin: 0 0 20px;
    color: #444;
    font-size: 15px;
    line-height: 1.6;
}


/* Link */

.rassju-engagement-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    color: var(--primary-color);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: gap 0.3s ease;
}

.rassju-engagement-link span {
    font-size: 20px;
    line-height: 1;
}

.rassju-engagement-link:hover {
    gap: 10px;
    color: var(--secondary-color);
}


/* Bottom Button */

.rassju-public-engagement-action {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.rassju-public-engagement-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0 32px;
    background: var(--secondary-color);
    color: var(--white-color);
    border: 2px solid var(--secondary-color);
    border-radius: 5px;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.rassju-public-engagement-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white-color);
}


/* =========================================
   Tablet
   ========================================= */

@media (max-width: 991px) {

    .rassju-public-engagement {
        padding: 55px 0;
    }

    .rassju-public-engagement-container {
        padding: 0 25px;
    }

    .rassju-public-engagement-heading {
        margin-bottom: 35px;
    }

    .rassju-public-engagement-heading h2 {
        font-size: 30px;
    }

    .rassju-public-engagement-heading p {
        font-size: 16px;
    }

    .rassju-public-engagement-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .rassju-engagement-content {
        min-height: 220px;
        padding: 20px;
    }

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


/* =========================================
   Mobile
   ========================================= */

@media (max-width: 767px) {

    .rassju-public-engagement {
        padding: 45px 0;
    }

    .rassju-public-engagement-container {
        padding: 0 18px;
    }

    .rassju-public-engagement-heading {
        margin-bottom: 30px;
    }

    .rassju-public-engagement-heading h2 {
        margin-bottom: 14px;
        font-size: 25px;
    }

    .rassju-public-engagement-heading p {
        font-size: 15px;
        line-height: 1.6;
    }

    .rassju-public-engagement-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .rassju-engagement-card {
        border-radius: 8px;
    }

    .rassju-engagement-content {
        min-height: auto;
        padding: 20px;
    }

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

    .rassju-engagement-content p {
        font-size: 15px;
    }

    .rassju-video-play {
        width: 62px;
        height: 45px;
    }

    .rassju-video-play span {
        font-size: 21px;
    }

    .rassju-public-engagement-action {
        margin-top: 35px;
    }

    .rassju-public-engagement-btn {
        width: 100%;
        min-height: 52px;
        padding: 0 20px;
        font-size: 15px;
        text-align: center;
    }
}


/* =========================================
   Small Mobile
   ========================================= */

@media (max-width: 480px) {

    .rassju-public-engagement {
        padding: 40px 0;
    }

    .rassju-public-engagement-container {
        padding: 0 15px;
    }

    .rassju-public-engagement-heading h2 {
        font-size: 24px;
    }

    .rassju-engagement-content {
        padding: 18px;
    }

    .rassju-engagement-content h3 {
        font-size: 19px;
    }

    .rassju-engagement-link {
        font-size: 15px;
    }
}



/* ================================
   SSJU TEAM SECTION
================================ */

.rassju-team-section {
    width: 100%;
    padding: 60px 0;
    background: var(--white-color);
}

.rassju-team-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 34px;
}


/* Heading */

.rassju-team-heading {
    margin-bottom: 50px;
}

.rassju-team-heading h2 {
    margin: 0 0 14px;
    color: var(--secondary-color);
    font-size: 35px;
    line-height: 1.2;
    font-weight: 700;
}

.rassju-team-heading p {
    margin: 0;
    max-width: 1250px;
    color: var(--black-color);
    font-size: 17px;
    line-height: 1.8;
}


/* Swiper */

.rassju-team-swiper {
    width: 100%;
    padding-bottom: 55px !important;
}

.rassju-team-swiper .swiper-slide {
    height: auto;
}


/* Card */

.rassju-team-card {
    height: 100%;
    overflow: hidden;
    border-radius: 0 0 15px 15px;
    background: #e5e5e5;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}


/* Image */

.rassju-team-image {
    width: 100%;
    height: 230px;
    overflow: hidden;
    background: #ddd;
}

.rassju-team-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.rassju-team-card:hover .rassju-team-image img {
    transform: scale(1.04);
}


/* Content */

.rassju-team-content {
    min-height: 200px;
    padding: 20px 18px 25px;
}


/* Name */

.rassju-team-name {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.rassju-team-name h3 {
    margin: 0;
    color: var(--black-color);
    font-size: 23px;
    line-height: 1.35;
    font-weight: 700;
}

.rassju-team-name span {
    flex-shrink: 0;
    color: var(--primary-color);
    font-size: 25px;
    line-height: 1;
    font-weight: 600;
}


/* Designation */

.rassju-team-designation {
    margin: 10px 0 25px;
    color: #555;
    font-size: 17px;
    line-height: 1.55;
}


/* Qualification */

.rassju-team-qualification {
    margin: 0;
    color: #333;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 600;
}


/* Pagination */

.rassju-team-pagination {
    bottom: 0 !important;
}

.rassju-team-pagination .swiper-pagination-bullet {
    width: 13px;
    height: 13px;
    margin: 0 5px !important;
    opacity: 1;
    background: #d0d0d0;
}

.rassju-team-pagination .swiper-pagination-bullet-active {
    background: var(--primary-color);
}


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

@media (max-width: 991px) {

    .rassju-team-section {
        padding: 50px 0;
    }

    .rassju-team-container {
        padding: 0 25px;
    }

    .rassju-team-heading {
        margin-bottom: 35px;
    }

    .rassju-team-heading h2 {
        font-size: 30px;
    }

    .rassju-team-heading p {
        font-size: 16px;
        line-height: 1.7;
    }

    .rassju-team-image {
        height: 260px;
    }

    .rassju-team-content {
        min-height: 280px;
    }

}


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

@media (max-width: 767px) {

    .rassju-team-section {
        padding: 40px 0;
    }

    .rassju-team-container {
        padding: 0 16px;
    }

    .rassju-team-heading {
        margin-bottom: 30px;
    }

    .rassju-team-heading h2 {
        font-size: 25px;
        margin-bottom: 12px;
    }

    .rassju-team-heading p {
        font-size: 15px;
        line-height: 1.65;
    }

    .rassju-team-swiper {
        padding-bottom: 50px !important;
    }

    .rassju-team-image {
        height: 300px;
    }

    .rassju-team-content {
        min-height: auto;
        padding: 18px 16px 22px;
    }

    .rassju-team-name h3 {
        font-size: 20px;
    }

    .rassju-team-name span {
        font-size: 23px;
    }

    .rassju-team-designation {
        font-size: 15px;
        margin-bottom: 20px;
    }

    .rassju-team-qualification {
        font-size: 15px;
    }

}


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

@media (max-width: 480px) {

    .rassju-team-heading h2 {
        font-size: 24px;
    }

    .rassju-team-image {
        height: 280px;
    }

    .rassju-team-name h3 {
        font-size: 19px;
    }

}


/* ================================
   Research Videos
================================ */

.rassju-rv-section {
    width: 100%;
    padding: 55px 0;
    background: #f5f5f5;
    overflow: hidden;
}

.rassju-rv-container {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Heading */

.rassju-rv-heading {
    margin-bottom: 45px;
}

.rassju-rv-heading h2 {
    margin: 0 0 22px;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--secondary-color);
}

.rassju-rv-heading p {
    max-width: 1150px;
    margin: 0;
    font-size: 18px;
    line-height: 1.7;
    color: var(--black-color);
}


/* ================================
   Slider
================================ */

.rassju-rv-slider-wrap {
    position: relative;
    width: 100%;
    padding: 0 0;
}

.rassju-rv-swiper {
    width: calc(100% - 100px);
    margin: 0 auto;
    overflow: hidden;
}

.rassju-rv-swiper .swiper-slide {
    height: auto;
}


/* ================================
   Video Card
================================ */

.rassju-rv-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 10px;
    background: var(--black-color);
}

.rassju-rv-video-link {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.rassju-rv-video-link img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.rassju-rv-video-link:hover img {
    transform: scale(1.03);
}


/* ================================
   Play Button
================================ */

.rassju-rv-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 62px;
    height: 45px;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;

    background: #ff0033;
    color: var(--white-color);

    border-radius: 12px;
    font-size: 24px;
    padding-left: 3px;

    transition: transform 0.3s ease;
}

.rassju-rv-video-link:hover .rassju-rv-play {
    transform: translate(-50%, -50%) scale(1.08);
}


/* ================================
   Bottom YouTube Overlay
================================ */

.rassju-rv-video-overlay {
    position: absolute;
    /* left: 15px; */
    right: 15px;
    bottom: 12px;
    width: fit-content;
    min-height: 48px;
    padding: 0 20px;

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

    border-radius: 30px;
    background: rgba(0, 0, 0, 0.45);
}

.rassju-rv-video-overlay span {
    color: var(--white-color);
    font-size: 17px;
    font-weight: 600;
}


/* ================================
   Navigation Buttons
================================ */

.rassju-rv-prev,
.rassju-rv-next {
    position: absolute;
    top: 50%;
    z-index: 10;

    width: 62px;
    height: 62px;

    transform: translateY(-50%);

    border: 0;
    border-radius: 0;

    background: var(--secondary-color);
    color: var(--white-color);

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

    cursor: pointer;
    transition: all 0.3s ease;
}

.rassju-rv-prev {
    left: 0;
}

.rassju-rv-next {
    right: 0;
}

.rassju-rv-prev span,
.rassju-rv-next span {
    font-size: 50px;
    font-weight: 300;
    line-height: 1;
    margin-top: -5px;
}

.rassju-rv-prev:hover,
.rassju-rv-next:hover {
    background: var(--primary-color);
}

.rassju-rv-prev.swiper-button-disabled,
.rassju-rv-next.swiper-button-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}


/* ================================
   Bottom Button
================================ */

.rassju-rv-button-wrap {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.rassju-rv-main-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 15px 30px;

    background: var(--secondary-color);
    color: var(--white-color);

    border-radius: 4px;

    font-size: 17px;
    font-weight: 600;
    text-decoration: none;

    transition: all 0.3s ease;
}

.rassju-rv-main-btn:hover {
    background: var(--primary-color);
    color: var(--white-color);
}


/* ================================
   Tablet
================================ */

@media (max-width: 991px) {

    .rassju-rv-section {
        padding: 45px 0;
    }

    .rassju-rv-heading {
        margin-bottom: 35px;
    }

    .rassju-rv-heading h2 {
        font-size: 32px;
    }

    .rassju-rv-heading p {
        font-size: 16px;
    }

    .rassju-rv-swiper {
        width: calc(100% - 80px);
    }

    .rassju-rv-prev,
    .rassju-rv-next {
        width: 50px;
        height: 50px;
    }

    .rassju-rv-prev span,
    .rassju-rv-next span {
        font-size: 40px;
    }
}


/* ================================
   Mobile
================================ */

@media (max-width: 767px) {

    .rassju-rv-section {
        padding: 35px 0;
    }

    .rassju-rv-container {
        padding: 0 15px;
    }

    .rassju-rv-heading {
        margin-bottom: 25px;
    }

    .rassju-rv-heading h2 {
        font-size: 28px;
        margin-bottom: 15px;
    }

    .rassju-rv-heading p {
        font-size: 15px;
        line-height: 1.6;
    }

    .rassju-rv-swiper {
        width: 100%;
    }

    .rassju-rv-prev,
    .rassju-rv-next {
        width: 42px;
        height: 42px;
        top: auto;
        bottom: -60px;
        transform: none;
    }

    .rassju-rv-prev {
        left: calc(50% - 50px);
    }

    .rassju-rv-next {
        right: calc(50% - 50px);
    }

    .rassju-rv-prev span,
    .rassju-rv-next span {
        font-size: 34px;
    }

    .rassju-rv-video-overlay {
        left: 8px;
        right: 8px;
        bottom: 8px;
        min-height: 40px;
        padding: 0 12px;
    }

    .rassju-rv-video-overlay span {
        font-size: 13px;
    }

    .rassju-rv-play {
        width: 52px;
        height: 38px;
        font-size: 19px;
    }

    .rassju-rv-button-wrap {
        margin-top: 85px;
    }

    .rassju-rv-main-btn {
        width: 100%;
        max-width: 300px;
        padding: 13px 20px;
        font-size: 15px;
    }
}


/* ================================
   Small Mobile
================================ */

@media (max-width: 480px) {

    .rassju-rv-heading h2 {
        font-size: 25px;
    }

    .rassju-rv-heading p {
        font-size: 14px;
    }

    .rassju-rv-video {
        aspect-ratio: 16 / 10;
    }
}



/* =========================================
   RESEARCH PARTNERSHIPS
========================================= */

.rassju-partnerships-section {
    width: 100%;
    padding: 65px 20px 70px;
    background: var(--white-color);
    overflow: hidden;
}

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

.rassju-section-heading h2 {
    margin: 0 0 18px;
    color: var(--secondary-color);
    font-size: 42px;
    line-height: 1.2;
    font-weight: 700;
}

.rassju-section-heading p {
    margin: 0;
    max-width: 1100px;
    color: var(--black-color);
    font-size: 18px;
    line-height: 1.65;
}


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

.rassju-logo-slider {
    width: 100%;
    overflow: hidden;
    margin-top: 45px;
    position: relative;
}

.rassju-logo-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: rassju-logo-scroll 28s linear infinite;
}

.rassju-logo-slider:hover .rassju-logo-track {
    animation-play-state: paused;
}

.rassju-logo-item {
    width: 180px;
    height: 100px;
    margin: 0 30px;

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

    flex-shrink: 0;
}

.rassju-logo-item img {
    max-width: 160px;
    max-height: 85px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}


/* Continuous animation */

@keyframes rassju-logo-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}


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

.rassju-partnership-btn-wrap {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.rassju-primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 14px 28px;

    background: var(--primary-color);
    color: var(--white-color);

    font-size: 16px;
    font-weight: 600;
    text-decoration: none;

    border-radius: 4px;

    transition: all 0.3s ease;
}

.rassju-primary-btn:hover {
    background: var(--secondary-color);
    color: var(--white-color);
    transform: translateY(-2px);
}


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

.rassju-contact-section {
    position: relative;
    width: 100%;
    /* min-height: 350px;

    padding: 70px 20px; */

    background-image:
        linear-gradient(
            rgba(8, 32, 65, 0.78),
            rgba(8, 32, 65, 0.78)
        ),
        url("../images/ssju/ssju1.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    overflow: hidden;
}

.rassju-contact-container {
    position: relative;
    z-index: 2;

    max-width: 1200px;
    margin: 0 auto;

    display: flex;
    justify-content: flex-end;
}

.rassju-contact-box {
    width: 55%;
    max-width: 650px;

    padding: 35px 40px;

    background: var(--secondary-color);
    color: var(--white-color);

    border-radius: 12px;

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

.rassju-contact-box h2 {
    margin: 0 0 25px;

    color: var(--white-color);

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

.rassju-contact-details {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.rassju-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.rassju-contact-icon {
    width: 25px;
    min-width: 25px;

    color: var(--primary-color);

    font-size: 21px;
    line-height: 1.5;
    text-align: center;
}

.rassju-contact-item p {
    margin: 0;

    color: var(--white-color);

    font-size: 17px;
    line-height: 1.7;
}

.rassju-contact-item a {
    color: var(--white-color);

    font-size: 17px;
    line-height: 1.6;

    text-decoration: none;

    transition: color 0.3s ease;
}

.rassju-contact-item a:hover {
    color: var(--primary-color);
}


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

@media (max-width: 991px) {

    .rassju-partnerships-section {
        padding: 55px 20px 60px;
    }

    .rassju-section-heading h2 {
        font-size: 36px;
    }

    .rassju-section-heading p {
        font-size: 17px;
    }

    .rassju-logo-item {
        width: 160px;
        margin: 0 20px;
    }

    .rassju-logo-item img {
        max-width: 140px;
    }

    .rassju-contact-container {
        justify-content: center;
    }

    .rassju-contact-box {
        width: 80%;
    }
}


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

@media (max-width: 767px) {

    .rassju-partnerships-section {
        padding: 45px 15px 50px;
    }

    .rassju-section-heading h2 {
        font-size: 30px;
        margin-bottom: 14px;
    }

    .rassju-section-heading p {
        font-size: 15px;
        line-height: 1.6;
    }

    .rassju-logo-slider {
        margin-top: 30px;
    }

    .rassju-logo-item {
        width: 130px;
        height: 80px;
        margin: 0 15px;
    }

    .rassju-logo-item img {
        max-width: 115px;
        max-height: 65px;
    }

    .rassju-logo-track {
        animation-duration: 20s;
    }

    .rassju-primary-btn {
        width: 100%;
        max-width: 260px;
        padding: 13px 20px;
    }


    /* Contact */

    .rassju-contact-section {
        min-height: auto;
        padding: 45px 15px;
    }

    .rassju-contact-container {
        width: 100%;
    }

    .rassju-contact-box {
        width: 100%;
        padding: 28px 22px;
        border-radius: 8px;
    }

    .rassju-contact-box h2 {
        font-size: 30px;
        margin-bottom: 22px;
    }

    .rassju-contact-details {
        gap: 18px;
    }

    .rassju-contact-item {
        gap: 10px;
    }

    .rassju-contact-item p,
    .rassju-contact-item a {
        font-size: 15px;
    }

    .rassju-contact-icon {
        font-size: 18px;
    }
}


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

@media (max-width: 480px) {

    .rassju-section-heading h2 {
        font-size: 27px;
    }

    .rassju-section-heading p {
        font-size: 14px;
    }

    .rassju-logo-item {
        width: 115px;
        height: 70px;
        margin: 0 12px;
    }

    .rassju-logo-item img {
        max-width: 100px;
        max-height: 55px;
    }

    .rassju-contact-box {
        padding: 24px 18px;
    }

    .rassju-contact-box h2 {
        font-size: 27px;
    }
}


/* =========================================
   GRANT DATABASE SECTION
========================================= */

.rf-grant-section {
    width: 100%;
    padding: 30px 20px 60px;
    background: var(--white-color);
    box-sizing: border-box;
}

.rf-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}


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

.rf-search-wrap {
    width: 100%;
    margin-bottom: 20px;
}

.rf-search-input {
    width: 100%;
    height: 52px;
    padding: 0 18px;

    border: 1px solid #d6d6d6;
    border-radius: 0;

    background: var(--white-color);
    color: var(--black-color);

    font-family: inherit;
    font-size: 16px;

    outline: none;
    box-sizing: border-box;

    transition: border-color 0.3s ease;
}

.rf-search-input:focus {
    border-color: var(--secondary-color);
}

.rf-search-input::placeholder {
    color: #555;
    opacity: 1;
}


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

.rf-filter-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.rf-filter-select {
    width: 100%;
    height: 43px;

    padding: 0 16px;

    border: 1px solid #d6d6d6;
    border-radius: 0;

    background-color: var(--white-color);
    color: #333;

    font-family: inherit;
    font-size: 15px;

    cursor: pointer;
    outline: none;
}

.rf-filter-select:focus {
    border-color: var(--secondary-color);
}


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

.rf-reset-wrap {
    display: flex;
    justify-content: center;

    margin: 15px 0 40px;
}

.rf-reset-btn {
    border: 0;
    padding: 0;

    background: transparent;
    color: var(--primary-color);

    font-family: inherit;
    font-size: 15px;
    font-weight: 700;

    text-decoration: underline;
    cursor: pointer;
}

.rf-reset-btn:hover {
    color: var(--secondary-color);
}


/* =========================================
   TOOLBAR
========================================= */

.rf-toolbar {
    width: 100%;

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

    gap: 25px;

    margin-bottom: 15px;
}


/* Scope */

.rf-scope {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.rf-scope-label,
.rf-sort-label {
    color: var(--secondary-color);

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

.rf-checkbox-label {
    display: flex;
    align-items: center;
    gap: 7px;

    color: var(--secondary-color);

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

    cursor: pointer;
}

.rf-checkbox {
    width: 18px;
    height: 18px;

    margin: 0;

    appearance: none;
    -webkit-appearance: none;

    border: 1px solid #888;
    background: var(--white-color);

    cursor: pointer;
    position: relative;
}

.rf-checkbox:checked {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.rf-checkbox:checked::after {
    content: "✓";

    position: absolute;

    top: 50%;
    left: 50%;

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

    color: var(--white-color);

    font-size: 12px;
    font-weight: 700;
}


/* Sort */

.rf-sort {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rf-sort-select {
    width: 170px;
    height: 40px;

    padding: 0 14px;

    border: 1px solid #d6d6d6;

    background: var(--white-color);
    color: #333;

    font-family: inherit;
    font-size: 15px;

    outline: none;
    cursor: pointer;
}


/* =========================================
   TABLE
========================================= */

.rf-table-wrapper {
    width: 100%;
    overflow-x: auto;

    border: 1px solid var(--secondary-color);
}

.rf-grant-table {
    width: 100%;

    min-width: 950px;

    border-collapse: collapse;
    table-layout: fixed;
}

.rf-grant-table th {
    padding: 15px 17px;

    background: var(--secondary-color);
    color: var(--white-color);

    border-right: 1px solid #6b7c91;

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

    text-align: left;
}

.rf-grant-table th:last-child {
    border-right: 0;
}

.rf-grant-table th.rf-number-col {
    width: 63px;
    text-align: center;
}

.rf-grant-table th:nth-child(2) {
    width: 37%;
}

.rf-grant-table th:nth-child(3) {
    width: 13%;
}

.rf-grant-table th:nth-child(4) {
    width: 24%;
}

.rf-grant-table th:nth-child(5) {
    width: 13%;
}

.rf-grant-table th:nth-child(6) {
    width: 14%;
}


/* =========================================
   NO DATA
========================================= */

.rf-no-data-row td {
    height: 330px;

    padding: 40px 20px;

    border: 0;

    text-align: center;
    vertical-align: middle;
}

.rf-no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.rf-no-data-icon {
    width: 55px;
    height: 55px;

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

    margin-bottom: 15px;

    border: 2px solid var(--primary-color);
    border-radius: 50%;

    color: var(--primary-color);

    font-size: 25px;
    font-weight: 700;
}

.rf-no-data h3 {
    margin: 0 0 8px;

    color: var(--secondary-color);

    font-size: 22px;
    font-weight: 700;
}

.rf-no-data p {
    margin: 0;

    color: #666;

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


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

@media (max-width: 991px) {

    .rf-grant-section {
        padding: 25px 15px 50px;
    }

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

    .rf-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .rf-sort {
        width: 100%;
    }

    .rf-sort-select {
        flex: 1;
        width: auto;
    }

    .rf-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

}


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

@media (max-width: 600px) {

    .rf-grant-section {
        padding: 20px 12px 40px;
    }

    .rf-search-input {
        height: 48px;
        font-size: 14px;
    }

    .rf-filter-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .rf-filter-select {
        height: 45px;
        font-size: 14px;
    }

    .rf-reset-wrap {
        margin: 15px 0 30px;
    }

    .rf-toolbar {
        gap: 20px;
        margin-bottom: 15px;
    }

    .rf-scope {
        width: 100%;
        gap: 10px;
    }

    .rf-scope-label {
        width: 100%;
    }

    .rf-sort {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .rf-sort-label {
        grid-column: 1 / -1;
    }

    .rf-sort-select {
        width: 100%;
        min-width: 0;
    }

    .rf-table-wrapper {
        border: 0;
    }

    .rf-grant-table {
        min-width: 900px;
    }

    .rf-no-data-row td {
        height: 280px;
    }

}



.crl-residence-life {
    width: 100%;
    padding: 20px 0 50px;
    font-family: Arial, sans-serif;
    color: #111;
}

.crl-section {
    width: 100%;
}

.crl-title {
    margin: 0 0 28px;
    font-family: Georgia, serif;
    font-size: 42px;
    font-weight: 500;
    line-height: 1.2;
    color: #0d2b4d;
}

.crl-subtitle {
    margin: 28px 0 18px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    color: #111;
    text-decoration: underline;
}

.crl-section-inner {
    margin-top: 35px;
}

.crl-content {
    margin-bottom: 30px;
}

.crl-heading {
    margin: 0 0 18px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
    color: #111;
}

.crl-text {
    margin: 0 0 18px;
    font-size: 17px;
    line-height: 1.65;
    color: #111;
}

.crl-list {
    margin: 0;
    padding-left: 32px;
}

.crl-list li {
    margin-bottom: 18px;
    padding-left: 5px;
    font-size: 17px;
    line-height: 1.65;
    color: #111;
}

.crl-note {
    margin: 20px 0 0;
    font-size: 17px;
    line-height: 1.65;
}

.crl-important {
    margin: 20px 0 0;
    padding: 14px 18px;
    font-size: 17px;
    line-height: 1.6;
    border-left: 4px solid #0d2b4d;
    background: #f5f7f9;
}

.crl-important strong,
.crl-note strong {
    font-weight: 700;
}


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

    .crl-residence-life {
        padding: 15px 0 35px;
    }

    .crl-title {
        font-size: 32px;
        margin-bottom: 22px;
    }

    .crl-subtitle {
        font-size: 18px;
    }

    .crl-heading {
        font-size: 17px;
    }

    .crl-text,
    .crl-list li,
    .crl-note,
    .crl-important {
        font-size: 15px;
        line-height: 1.6;
    }

    .crl-list {
        padding-left: 25px;
    }
}



.crl-sports-section {
    width: 100%;
    padding: 20px 0 50px;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--black-color);
}

.crl-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 22px;
    box-sizing: border-box;
}

/* Main Heading */
.crl-section-title {
    margin: 0 0 25px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 500;
    color: var(--secondary-color);
}

/* Content Blocks */
.crl-content-block {
    margin-bottom: 45px;
}

.crl-sub-title {
    margin: 0 0 18px;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 700;
    color: var(--black-color);
}

/* Paragraphs */
.crl-content-block p {
    margin: 0 0 14px;
    font-size: 17px;
    line-height: 1.75;
    color: var(--black-color);
}

.crl-content-block p:last-child {
    margin-bottom: 0;
}


/* ================================
   TABLE
================================ */

.crl-table-wrapper {
    width: 100%;
    overflow-x: auto;
    margin-top: 10px;
}

.crl-sports-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.crl-sports-table td {
    padding: 10px 14px;
    border: 1px solid var(--white-color);
    background: var(--secondary-color);
    color: var(--white-color);
    text-align: center;
    vertical-align: middle;

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

    height: 42px;
    box-sizing: border-box;
}


/* Empty cells */
.crl-sports-table td:empty {
    background: var(--white-color);
    border-color: var(--white-color);
}


/* University Teams */
.crl-teams-block {
    margin-top: 50px;
    margin-bottom: 0;
}


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

@media (max-width: 991px) {

    .crl-container {
        padding: 0 18px;
    }

    .crl-section-title {
        font-size: 34px;
    }

    .crl-content-block p {
        font-size: 16px;
    }

    .crl-sports-table {
        min-width: 700px;
    }

    .crl-table-wrapper {
        overflow-x: auto;
    }
}


@media (max-width: 767px) {

    .crl-sports-section {
        padding: 15px 0 35px;
    }

    .crl-container {
        padding: 0 15px;
    }

    .crl-section-title {
        font-size: 30px;
        margin-bottom: 20px;
    }

    .crl-sub-title {
        font-size: 17px;
        margin-bottom: 14px;
    }

    .crl-content-block p {
        font-size: 15px;
        line-height: 1.65;
    }

    .crl-content-block {
        margin-bottom: 35px;
    }

    .crl-teams-block {
        margin-top: 50px;
    }

    .crl-sports-table {
        min-width: 650px;
    }

    .crl-sports-table td {
        padding: 9px 10px;
        font-size: 14px;
    }
}


/* ===============================
   SSJU CLUBS & SOCIETIES
================================ */

.crl-section {
    width: 100%;
    padding: 30px 0;
    background: var(--white-color);
    box-sizing: border-box;
}

.crl-container {
    width: min(1400px, 94%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 30% 70%;
    gap: 20px;
}


/* ===============================
   TABS
================================ */

.crl-tabs {
    background: var(--secondary-color);
    width: 100%;
    height: fit-content;
}

.crl-tab {
    width: 100%;
    min-height: 66px;
    padding: 16px 38px;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,.2);
    background: transparent;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    transition: all .25s ease;
}

.crl-tab:hover {
    background: var(--primary-color);
}

.crl-tab.active {
    background: var(--primary-color);
}

.crl-arrow {
    font-size: 28px;
    line-height: 1;
    transition: transform .25s ease;
}

.crl-tab.active .crl-arrow {
    transform: translateX(4px);
}


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

.crl-content {
    min-width: 0;
}

.crl-panel {
    display: none;
}

.crl-panel.active {
    display: block;
    animation: crlFade .3s ease;
}

@keyframes crlFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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


/* ===============================
   CLUB
================================ */

.crl-club {
    width: 100%;
    padding: 0 0 28px;
    margin-bottom: 25px;
    border-bottom: 1px solid #ddd;
    display: grid;
    grid-template-columns: 1fr 230px;
    gap: 30px;
    box-sizing: border-box;
}

.crl-club-content {
    min-width: 0;
}

.crl-club h2 {
    margin: 0 0 12px;
    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 27px;
    line-height: 1.3;
}

.crl-club p {
    margin: 15px 0;
    color: #222;
    font-size: 16px;
    line-height: 1.9;
}

.crl-email {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0;
}

.crl-mail-icon {
    font-size: 22px;
    color: #111;
}

.crl-email a {
    color: #222;
    text-decoration: none;
    font-size: 15px;
}

.crl-email a:hover {
    color: var(--primary-color);
}

.crl-social {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-size: 15px;
}

.crl-social a {
    color: #111;
    text-decoration: none;
    font-size: 22px;
    transition: .2s ease;
}

.crl-social a:hover {
    color: var(--primary-color);
}


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

.crl-club-image {
    width: 230px;
    height: 180px;
    overflow: hidden;
    align-self: center;
}

.crl-club-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}


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

.crl-navigation {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.crl-navigation button {
    width: 46px;
    height: 46px;
    border: none;
    background: var(--secondary-color);
    color: var(--white-color);
    font-size: 25px;
    cursor: pointer;
    transition: .25s ease;
}

.crl-navigation button:hover {
    background: var(--primary-color);
}


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

@media (max-width: 900px) {

    .crl-container {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .crl-tabs {
        display: flex;
        overflow-x: auto;
        scrollbar-width: thin;
        background: var(--secondary-color);
    }

    .crl-tab {
        flex: 0 0 auto;
        width: auto;
        min-width: max-content;
        min-height: 55px;
        padding: 14px 22px;
        border-right: 1px solid rgba(255,255,255,.2);
        border-bottom: none;
        font-size: 15px;
    }

    .crl-arrow {
        display: none;
    }

    .crl-content {
        width: 100%;
    }
}


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

@media (max-width: 600px) {

    .crl-section {
        padding: 20px 0;
    }

    .crl-container {
        width: 92%;
    }

    .crl-tabs {
        border-radius: 2px;
    }

    .crl-tab {
        padding: 13px 18px;
        font-size: 14px;
    }

    .crl-club {
        grid-template-columns: 1fr;
        gap: 18px;
        padding-bottom: 22px;
        margin-bottom: 20px;
    }

    .crl-club-image {
        width: 100%;
        max-width: 220px;
        height: 160px;
        margin: 0 auto;
        order: -1;
    }

    .crl-club h2 {
        font-size: 23px;
    }

    .crl-club p {
        font-size: 15px;
        line-height: 1.7;
    }

    .crl-email a {
        font-size: 14px;
        word-break: break-word;
    }

    .crl-navigation {
        margin-top: 5px;
    }

}


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

@media (max-width: 400px) {

    .crl-container {
        width: 94%;
    }

    .crl-tab {
        padding: 12px 15px;
        font-size: 13px;
    }

    .crl-club h2 {
        font-size: 21px;
    }

    .crl-club p {
        font-size: 14px;
    }

}



.cf-food-section {
    width: 100%;
    padding: 20px 0 50px;
    font-family: inherit;
}

.cf-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.cf-subtitle {
    margin: 0 0 25px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
}

.cf-table-responsive {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 55px;
}

.cf-timing-table {
    width: 100%;
    max-width: 475px;
    border-collapse: collapse;
    font-size: 16px;
}

.cf-timing-table td {
    border: 1px solid #222;
    padding: 10px;
    vertical-align: middle;
    line-height: 1.4;
}

.cf-timing-table td:first-child {
    width: 34%;
}


/* ================================
   Food Outlets
================================ */

.cf-title {
    margin: 0 0 25px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.25;
    color: #09294d;
}

.cf-outlets-list {
    width: 100%;
}

.cf-outlet-item {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    margin-bottom: 18px;
    font-size: 16px;
    line-height: 1.5;
}

.cf-outlet-number {
    flex: 0 0 auto;
}

.cf-outlet-name {
    flex: 0 0 auto;
}

.cf-outlet-time {
    flex: 0 1 auto;
}


/* ================================
   Note
================================ */

.cf-note {
    margin: 28px 0 0;
    font-size: 15px;
    line-height: 1.6;
}


/* ================================
   Tablet
================================ */

@media (max-width: 991px) {

    .cf-food-section {
        padding: 20px 0 40px;
    }

    .cf-container {
        padding: 0 25px;
    }

    .cf-title {
        font-size: 30px;
    }

    .cf-outlet-item {
        font-size: 15px;
    }
}


/* ================================
   Mobile
================================ */

@media (max-width: 767px) {

    .cf-food-section {
        padding: 15px 0 35px;
    }

    .cf-container {
        padding: 0 15px;
    }

    .cf-subtitle {
        font-size: 17px;
        margin-bottom: 18px;
    }

    .cf-table-responsive {
        margin-bottom: 40px;
    }

    .cf-timing-table {
        width: 100%;
        min-width: 360px;
        font-size: 14px;
    }

    .cf-timing-table td {
        padding: 9px 8px;
    }

    .cf-title {
        font-size: 25px;
        margin-bottom: 20px;
    }

    .cf-outlet-item {
        display: block;
        margin-bottom: 16px;
        font-size: 14px;
        line-height: 1.6;
    }

    .cf-outlet-number {
        display: inline;
        margin-right: 2px;
    }

    .cf-outlet-name {
        display: inline;
        font-weight: 500;
    }

    .cf-outlet-time {
        display: inline;
    }

    .cf-note {
        font-size: 13px;
        margin-top: 25px;
    }
}


/* ================================
   Small Mobile
================================ */

@media (max-width: 480px) {

    .cf-container {
        padding: 0 12px;
    }

    .cf-title {
        font-size: 23px;
    }

    .cf-timing-table {
        min-width: 330px;
        font-size: 13px;
    }

    .cf-timing-table td {
        padding: 8px 7px;
    }

    .cf-outlet-item {
        font-size: 13px;
    }

    .cf-note {
        font-size: 12px;
    }
}


/* ===========================
   Main Section
=========================== */

.ssju-sustainability-section {
    position: relative;
    width: 100%;
    padding: 70px 20px 40px;
    overflow: hidden;
    background: #fff;
}


/* ===========================
   Container
=========================== */

.ssju-sustainability-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
}


/* ===========================
   Heading
=========================== */

.ssju-sustainability-heading {
    text-align: center;
    margin-bottom: 55px;
}

.ssju-sustainability-heading h2 {
    margin: 0;
    color: #111;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 35px;
    font-weight: 600;
    line-height: 1.15;
}


/* ===========================
   Slider Area
=========================== */

.ssju-sustainability-slider-wrap {
    position: relative;
    width: 100%;
    padding: 0 70px;
}


/* ===========================
   Swiper
=========================== */

.ssju-sustainability-swiper {
    width: 100%;
    overflow: hidden;
}


/* ===========================
   Card
=========================== */

.ssju-sustainability-card {
    width: 100%;
    min-height: 250px;

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

    padding: 35px 70px;

    background: #fff;

    border: 1px solid #dfe2e6;
    border-radius: 22px;

    box-shadow:
        0 15px 35px rgba(8, 32, 65, 0.08),
        0 30px 60px rgba(0, 0, 0, 0.08);
}


/* ===========================
   Image
=========================== */

.ssju-sustainability-image {
    flex: 0 0 320px;
    width: 320px;
    height: 250px;

    overflow: hidden;

    border-radius: 25px;

    background: #f4f4f4;
}

.ssju-sustainability-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.5s ease;
}

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


/* ===========================
   Content
=========================== */

.ssju-sustainability-content {
    flex: 1;
}

.ssju-sustainability-content h3 {
    margin: 0 0 28px;

    color: var(--secondary-color);

    font-family: Georgia, "Times New Roman", serif;

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

    line-height: 1.2;
}

.ssju-sustainability-content p {
    margin: 0;

    color: #333;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 17px;
    line-height: 1.55;
}


/* ===========================
   Navigation Buttons
=========================== */

.ssju-sustainability-prev,
.ssju-sustainability-next {
    position: absolute;

    top: 50%;
    z-index: 10;

    width: 55px;
    height: 55px;

    transform: translateY(-50%);

    border: none;
    border-radius: 50%;

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

    cursor: pointer;

    color: #fff;
    background: var(--secondary-color);

    font-size: 22px;

    box-shadow: 0 8px 20px rgba(8, 32, 65, 0.20);

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

.ssju-sustainability-prev {
    left: 0;
}

.ssju-sustainability-next {
    right: 0;
}


.ssju-sustainability-prev:hover,
.ssju-sustainability-next:hover {
    background: var(--primary-color);

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

    box-shadow:
        0 10px 25px rgba(228, 119, 24, 0.30);
}


/* Disabled Navigation */

.ssju-sustainability-prev.swiper-button-disabled,
.ssju-sustainability-next.swiper-button-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}


/* ===========================
   Pagination
=========================== */

.ssju-sustainability-pagination {
    position: relative !important;

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

    gap: 7px;

    margin-top: 42px;
}

.ssju-sustainability-pagination
.swiper-pagination-bullet {
    width: 12px;
    height: 12px;

    margin: 0 !important;

    opacity: 1;

    background: #d5d8dc;

    transition:
        width 0.3s ease,
        background 0.3s ease,
        border-radius 0.3s ease;
}

.ssju-sustainability-pagination
.swiper-pagination-bullet-active {
    width: 38px;

    border-radius: 20px;

    background: var(--secondary-color);
}


/* ===========================
   Tablet
=========================== */

@media (max-width: 991px) {

    .ssju-sustainability-section {
        padding: 55px 18px 35px;
    }

    .ssju-sustainability-heading {
        margin-bottom: 40px;
    }

    .ssju-sustainability-heading h2 {
        font-size: 30px;
    }

    .ssju-sustainability-slider-wrap {
        padding: 0 45px;
    }

    .ssju-sustainability-card {
        min-height: 230px;

        gap: 35px;

        padding: 30px;
    }

    .ssju-sustainability-image {
        flex: 0 0 260px;

        width: 260px;
        height: 260px;
    }

    .ssju-sustainability-content h3 {
        font-size: 23px;
        margin-bottom: 20px;
    }

    .ssju-sustainability-content p {
        font-size: 16px;
        line-height: 1.6;
    }

    .ssju-sustainability-prev,
    .ssju-sustainability-next {
        width: 45px;
        height: 45px;

        font-size: 18px;
    }

}


/* ===========================
   Mobile
=========================== */

@media (max-width: 767px) {

    .ssju-sustainability-section {
        padding: 45px 15px 35px;
    }

    .ssju-sustainability-heading {
        margin-bottom: 30px;
    }

    .ssju-sustainability-heading h2 {
        font-size: 27px;
        line-height: 1.2;
    }

    .ssju-sustainability-slider-wrap {
        padding: 0;
    }

    .ssju-sustainability-card {
        min-height: auto;

        flex-direction: column;

        gap: 25px;

        padding: 25px 22px 30px;

        border-radius: 18px;

        text-align: left;
    }

    .ssju-sustainability-image {
        flex: none;

        width: 100%;
        max-width: 320px;
        height: 240px;

        margin: 0 auto;

        border-radius: 18px;
    }

    .ssju-sustainability-content h3 {
        margin-bottom: 15px;

        font-size: 21px;
    }

    .ssju-sustainability-content p {
        font-size: 16px;
        line-height: 1.6;
    }


    /* Mobile navigation */

    .ssju-sustainability-prev,
    .ssju-sustainability-next {
        width: 36px;
        height: 36px;

        font-size: 15px;

        top: 120px;
    }

    .ssju-sustainability-prev {
        left: 8px;
    }

    .ssju-sustainability-next {
        right: 8px;
    }

    .ssju-sustainability-pagination {
        margin-top: 28px;
    }

    .ssju-sustainability-pagination
    .swiper-pagination-bullet {
        width: 9px;
        height: 9px;
    }

    .ssju-sustainability-pagination
    .swiper-pagination-bullet-active {
        width: 28px;
    }

}


/* ===========================
   Small Mobile
=========================== */

@media (max-width: 480px) {

    .ssju-sustainability-heading h2 {
        font-size: 25px;
    }

    .ssju-sustainability-card {
        padding: 20px;
    }

    .ssju-sustainability-image {
        height: 210px;
    }

    .ssju-sustainability-content h3 {
        font-size: 19px;
    }

    .ssju-sustainability-content p {
        font-size: 15px;
    }

    .ssju-sustainability-prev,
    .ssju-sustainability-next {
        width: 32px;
        height: 32px;
    }

}


/* =========================================
   SSJU Sustainability Programs
   Prefix: sustain-
========================================= */

.sustain-programs-section {
    width: 100%;
    padding: 45px 20px;
    background: #fff;
}

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

/* Heading */

.sustain-section-heading {
    text-align: center;
    margin-bottom: 55px;
}

.sustain-section-heading h2 {
    margin: 0;
    color: #000;
    font-size: 35px;
    line-height: 1.25;
    font-weight: 500;
}

/* Grid */

.sustain-programs-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
}

/* Card */

.sustain-program-card {
    position: relative;
    min-height: 380px;
    padding: 45px 50px;
    background: #fff;
    border: 2px solid #e2e2e2;
    border-radius: 12px;
    transition: all 0.35s ease;
    overflow: hidden;
}

.sustain-program-card:hover {
    border-color: #E47718;
    box-shadow: 0 15px 35px rgba(8, 32, 65, 0.12);
    transform: translateY(-4px);
}

/* Card content */

.sustain-card-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.sustain-card-content h3 {
    margin: 0 0 25px;
    font-size: 25px;
    line-height: 1.3;
    font-weight: 500;
}

.sustain-card-content h3 a {
    color: #082041;
    text-decoration: none;
    transition: color 0.3s ease;
}

.sustain-card-content h3 a:hover {
    color: #E47718;
}

/* Paragraph */

.sustain-card-content p {
    margin: 0;
    color: #082041;
    font-size: 17px;
    line-height: 1.55;
}

/* Learn More */

.sustain-learn-more {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    width: fit-content;
    margin-top: auto;
    padding-top: 35px;

    color: #082041;
    font-size: 18px;
    line-height: 1;
    text-decoration: none;

    transition: color 0.3s ease;
}

.sustain-learn-more span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

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

    transition: transform 0.3s ease;
}

.sustain-learn-more:hover {
    color: #E47718;
}

.sustain-learn-more:hover span {
    transform: translateX(5px);
}


/* =========================================
   Tablet
========================================= */

@media (max-width: 991px) {

    .sustain-programs-section {
        padding: 40px 20px;
    }

    .sustain-section-heading {
        margin-bottom: 40px;
    }

    .sustain-section-heading h2 {
        font-size: 30px;
    }

    .sustain-programs-grid {
        gap: 25px;
    }

    .sustain-program-card {
        min-height: 350px;
        padding: 40px 35px;
    }

    .sustain-card-content h3 {
        font-size: 23px;
    }

    .sustain-card-content p {
        font-size: 16px;
        line-height: 1.55;
    }
}


/* =========================================
   Mobile
========================================= */

@media (max-width: 767px) {

    .sustain-programs-section {
        padding: 45px 15px;
    }

    .sustain-section-heading {
        margin-bottom: 30px;
    }

    .sustain-section-heading h2 {
        font-size: 25px;
        line-height: 1.3;
    }

    .sustain-programs-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .sustain-program-card {
        min-height: auto;
        padding: 32px 25px;
    }

    .sustain-card-content h3 {
        margin-bottom: 18px;
        font-size: 20px;
    }

    .sustain-card-content p {
        font-size: 16px;
        line-height: 1.65;
    }

    .sustain-learn-more {
        margin-top: 25px;
        padding-top: 10px;
        font-size: 16px;
    }

    .sustain-learn-more span {
        font-size: 30px;
    }
}


/* =========================================
   Small Mobile
========================================= */

@media (max-width: 480px) {

    .sustain-programs-section {
        padding: 35px 12px;
    }

    .sustain-section-heading h2 {
        font-size: 23px;
    }

    .sustain-program-card {
        padding: 28px 20px;
        border-radius: 8px;
    }

    .sustain-card-content h3 {
        font-size: 19px;
    }

    .sustain-card-content p {
        font-size: 15px;
        line-height: 1.5;
    }
}


/* =========================================
   Sustainability Research Centres
   Prefix: sustain
========================================= */

.sustain-research-section {
    --primary-color: #E47718;
    --secondary-color: #082041;

    width: 100%;
    padding: 40px 20px;
    background: #ffffff;
    box-sizing: border-box;
}

.sustain-container {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
}

.sustain-section-heading {
    text-align: center;
    margin-bottom: 55px;
}

.sustain-section-heading h2 {
    margin: 0;
    color: #111111;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 35px;
    font-weight: 600;
    line-height: 1.2;
}

/* Grid */

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

/* Card */

.sustain-research-card {
    min-height: 125px;
    padding: 25px 30px;
    display: flex;
    align-items: center;
    gap: 18px;

    background: #ffffff;
    border: 2px solid #e1e5e9;
    border-radius: 12px;

    text-decoration: none;
    box-sizing: border-box;

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

.sustain-research-card:hover {
    border-color: var(--secondary-color);
    box-shadow: 0 12px 28px rgba(8, 32, 65, 0.12);
    transform: translateY(-4px);
}

/* Icon */

.sustain-research-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;

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

    border-radius: 50%;
    background: var(--secondary-color);
    color: #ffffff;

    font-size: 18px;

    transition:
        background-color 0.3s ease,
        transform 0.3s ease;
}

.sustain-research-card:hover .sustain-research-icon {
    background: var(--primary-color);
    transform: scale(1.06);
}

/* Title */

.sustain-research-title {
    color: var(--secondary-color);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.55;

    transition: color 0.3s ease;
}

.sustain-research-card:hover .sustain-research-title {
    color: var(--primary-color);
}


/* =========================================
   Tablet
========================================= */

@media (max-width: 1100px) {

    .sustain-research-section {
        padding: 40px 20px;
    }

    .sustain-research-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .sustain-research-card {
        min-height: 115px;
        padding: 22px 24px;
    }

    .sustain-research-title {
        font-size: 18px;
    }
}


/* =========================================
   Mobile
========================================= */

@media (max-width: 767px) {

    .sustain-research-section {
        padding: 35px 15px;
    }

    .sustain-section-heading {
        margin-bottom: 35px;
    }

    .sustain-section-heading h2 {
        font-size: 28px;
        line-height: 1.25;
    }

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

    .sustain-research-card {
        min-height: auto;
        padding: 20px;
        gap: 15px;
        border-radius: 10px;
    }

    .sustain-research-icon {
        width: 46px;
        height: 46px;
        min-width: 46px;
        font-size: 16px;
    }

    .sustain-research-title {
        font-size: 17px;
        line-height: 1.45;
    }
}


/* =========================================
   Small Mobile
========================================= */

@media (max-width: 480px) {

    .sustain-research-section {
        padding: 35px 12px;
    }

    .sustain-section-heading h2 {
        font-size: 25px;
    }

    .sustain-research-card {
        padding: 17px;
    }

    .sustain-research-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
    }

    .sustain-research-title {
        font-size: 16px;
    }
}


/* =========================================
   SSJU Sustainability Resources
========================================= */

.sustain-resources-section {
    --sustain-primary: #E47718;
    --sustain-secondary: #082041;

    width: 100%;
    padding: 40px 0;
    background: #fff;
    position: relative;
}

.sustain-resources-section .container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}


/* =========================================
   Resource Cards
========================================= */

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

.sustain-resource-card {
    min-height: 250px;
    padding: 38px 25px;
    border: 2px solid #e1e4e8;
    border-radius: 12px;
    background: #fff;

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

    text-align: center;
    text-decoration: none;

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

.sustain-resource-card:hover {
    border-color: var(--sustain-primary);
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(8, 32, 65, 0.12);
}

.sustain-resource-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;

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

    background: var(--sustain-secondary);
    color: #fff;

    font-size: 31px;
    margin-bottom: 24px;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.sustain-resource-card:hover .sustain-resource-icon {
    background: var(--sustain-primary);
    transform: scale(1.05);
}

.sustain-resource-card h3 {
    margin: 0;

    color: var(--sustain-secondary);
    font-family: Georgia, "Times New Roman", serif;

    font-size: 20px;
    font-weight: 400;
    line-height: 1.45;
}


/* =========================================
   Divider
========================================= */

.sustain-divider {
    width: 100%;
    height: 2px;
    background: #d7dce1;
    margin: 40px 0 80px;
}


/* =========================================
   Accordion
========================================= */

.sustain-accordion {
    width: 100%;
    margin-bottom: 20px;

    border: 2px solid #e1e4e8;
    border-radius: 12px;
    background: #fff;

    overflow: hidden;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.sustain-accordion.active {
    border-color: var(--sustain-secondary);
    box-shadow: 0 8px 25px rgba(8, 32, 65, 0.08);
}

.sustain-accordion-header {
    width: 100%;
    min-height: 80px;

    padding: 15px 30px;

    border: 0;
    background: transparent;

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

    cursor: pointer;
    text-align: left;
}

.sustain-accordion-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.sustain-accordion-icon {
    flex: 0 0 auto;

    width: 60px;
    height: 60px;

    border-radius: 50%;

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

    background: var(--sustain-secondary);
    color: #fff;

    font-size: 23px;

    transition: background 0.3s ease;
}

.sustain-accordion.active .sustain-accordion-icon,
.sustain-accordion-header:hover .sustain-accordion-icon {
    background: var(--sustain-primary);
}

.sustain-accordion-title {
    color: var(--sustain-secondary);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
    line-height: 1.3;
}

.sustain-accordion-arrow {
    color: #526071;
    font-size: 20px;

    transition:
        transform 0.3s ease,
        color 0.3s ease;
}

.sustain-accordion.active .sustain-accordion-arrow {
    transform: rotate(180deg);
    color: var(--sustain-primary);
}


/* =========================================
   Accordion Content
========================================= */

.sustain-accordion-content {
    max-height: 0;
    overflow: hidden;

    transition: max-height 0.4s ease;
}

.sustain-report-list {
    padding: 0 30px 30px 110px;

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

.sustain-report-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 16px 20px;

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

    color: var(--sustain-secondary);

    font-size: 17px;
    text-decoration: none;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}

.sustain-report-item:hover {
    background: var(--sustain-primary);
    border-color: var(--sustain-primary);
    color: #fff;
}

.sustain-report-item i {
    font-size: 14px;
}


/* =========================================
   View All
========================================= */

.sustain-view-all {
    margin-top: 45px;
    text-align: center;
}

.sustain-view-all a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    color: var(--sustain-secondary);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;

    text-decoration: none;

    transition: color 0.3s ease;
}

.sustain-view-all a:hover {
    color: var(--sustain-primary);
}

.sustain-view-all a i:last-child {
    font-size: 16px;
}


/* =========================================
   Tablet
========================================= */

@media (max-width: 1100px) {

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

    .sustain-resource-card {
        min-height: 240px;
    }

    .sustain-divider {
        margin-bottom: 55px;
    }

    .sustain-accordion-title {
        font-size: 23px;
    }
}


/* =========================================
   Mobile
========================================= */

@media (max-width: 767px) {

    .sustain-resources-section {
        padding: 35px 0;
    }

    .sustain-resources-section .container {
        padding: 0 15px;
    }

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

    .sustain-resource-card {
        min-height: 200px;
        padding: 30px 20px;
    }

    .sustain-resource-icon {
        width: 68px;
        height: 68px;
        font-size: 26px;
        margin-bottom: 18px;
    }

    .sustain-resource-card h3 {
        font-size: 19px;
    }

    .sustain-divider {
        margin: 30px 0 35px;
    }

    .sustain-accordion {
        margin-bottom: 15px;
    }

    .sustain-accordion-header {
        min-height: 80px;
        padding: 15px 18px;
    }

    .sustain-accordion-left {
        gap: 13px;
    }

    .sustain-accordion-icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .sustain-accordion-title {
        font-size: 20px;
    }

    .sustain-accordion-arrow {
        font-size: 16px;
        margin-left: 10px;
    }

    .sustain-report-list {
        padding: 0 18px 20px 18px;
    }

    .sustain-report-item {
        font-size: 15px;
        padding: 13px 15px;
    }

    .sustain-view-all {
        margin-top: 30px;
    }

    .sustain-view-all a {
        font-size: 18px;
        line-height: 1.4;
    }
}


/* =========================================
   Small Mobile
========================================= */

@media (max-width: 480px) {

    .sustain-resource-card {
        min-height: 200px;
    }

    .sustain-resource-card h3 {
        font-size: 18px;
    }

    .sustain-accordion-title {
        font-size: 18px;
    }

    .sustain-accordion-icon {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }

    .sustain-view-all a {
        font-size: 16px;
    }
}


:root {
    --primary-color: #E47718;
    --secondary-color: #082041;
}

.sustain-join-section {
    width: 100%;
    padding: 35px 20px;
    background: #fff;
    box-sizing: border-box;
}

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

.sustain-join-content {
    width: 100%;
    text-align: left;
}

.sustain-join-title {
    margin: 0 0 35px;
    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 35px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
}

.sustain-join-text {
    max-width: 1060px;
    margin: 0 auto;
}

.sustain-join-text p {
    margin: 0 0 20px;
    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.75;
    text-align: justify;
}

.sustain-join-text p:last-child {
    margin-bottom: 0;
}

.sustain-join-text strong {
    font-weight: 600;
}

.sustain-join-contact {
    max-width: 1060px;
    margin: 38px auto 0;
    padding-top: 25px;
    border-top: 1px solid rgba(8, 32, 65, 0.2);

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

    font-family: Georgia, "Times New Roman", serif;
    font-size: 19px;
}

.sustain-contact-label {
    color: var(--secondary-color);
}

.sustain-contact-link {
    color: var(--secondary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.sustain-contact-link:hover {
    color: var(--primary-color);
}


/* =========================
   Tablet
========================= */

@media (max-width: 991px) {

    .sustain-join-section {
        padding: 30px 25px;
    }

    .sustain-join-title {
        font-size: 30px;
        margin-bottom: 28px;
    }

    .sustain-join-text p {
        font-size: 17px;
        line-height: 1.5;
    }

    .sustain-join-contact {
        margin-top: 30px;
        font-size: 18px;
    }
}


/* =========================
   Mobile
========================= */

@media (max-width: 767px) {

    .sustain-join-section {
        padding: 30px 18px;
    }

    .sustain-join-title {
        font-size: 25px;
        line-height: 1.25;
        margin-bottom: 25px;
    }

    .sustain-join-text p {
        font-size: 16px;
        line-height: 1.65;
        text-align: left;
        margin-bottom: 16px;
    }

    .sustain-join-contact {
        margin-top: 28px;
        padding-top: 20px;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;

        font-size: 16px;
    }
}


/* =========================
   Small Mobile
========================= */

@media (max-width: 480px) {

    .sustain-join-section {
        padding: 30px 15px;
    }

    .sustain-join-title {
        font-size: 24px;
    }

    .sustain-join-text p {
        font-size: 15px;
    }

    .sustain-join-contact {
        font-size: 15px;
    }
}



/* =====================================================
   SSJU ANTI-RAGGING SECTION
===================================================== */

.ssju-antiragging {
    width: 100%;
    padding: 80px 20px;
    background: #fff;
    font-family: Arial, Helvetica, sans-serif;
}

.ssju-ar-container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}


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

.ssju-ar-header {
    max-width: 850px;
    margin-bottom: 42px;
}

.ssju-ar-label {
    display: inline-block;
    margin-bottom: 12px;

    color: var(--primary-color);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.ssju-ar-header h2 {
    margin: 0 0 15px;

    color: var(--secondary-color);
    font-family: Georgia, "Times New Roman", serif;

    font-size: 35px;
    line-height: 1.15;
    font-weight: 600;
}

.ssju-ar-header p {
    margin: 0;

    color: #697586;
    font-size: 16px;
    line-height: 1.7;
}


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

.ssju-ar-grid {
    display: grid;

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

    gap: 20px;

    margin-bottom: 25px;
}


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

.ssju-ar-card {
    display: flex;
    align-items: flex-start;

    gap: 20px;

    min-height: 190px;

    padding: 30px;

    background: #ffffff;

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

    box-shadow: 0 8px 30px rgba(16, 47, 85, 0.05);

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

.ssju-ar-card:hover {
    transform: translateY(-4px);

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

    box-shadow: 0 15px 35px rgba(16, 47, 85, 0.09);
}

.ssju-ar-wide {
    grid-column: 1 / -1;
    min-height: auto;
}


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

.ssju-ar-icon {
    flex: 0 0 58px;

    width: 58px;
    height: 58px;

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

    background: #edf3fa;

    border-radius: 12px;

    color: var(--secondary-color);

    font-size: 25px;
    font-weight: 700;
}


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

.ssju-ar-card-content {
    min-width: 0;
}

.ssju-ar-card h3 {
    margin: 0 0 9px;

    color: var(--secondary-color);

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

.ssju-ar-subtitle {
    display: block;

    margin-bottom: 10px;

    color: var(--primary-color);

    font-size: 14px;
}


/* =====================================================
   PHONE
===================================================== */

.ssju-ar-phone {
    display: inline-block;

    margin-bottom: 12px;

    color: var(--secondary-color);

    font-size: 23px;
    font-weight: 700;

    transition: color 0.3s ease;
}

.ssju-ar-phone:hover {
    color: var(--primary-color);
}


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

.ssju-ar-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 8px;

    font-size: 14px;
}

.ssju-ar-links a {
    color: var(--primary-color);

    text-decoration: none;

    transition: color 0.2s ease;
}

.ssju-ar-links a:hover {
    color: var(--secondary-color);
    text-decoration: underline;
}

.ssju-ar-links span {
    color: var(--primary-color);
}


/* =====================================================
   COMMITTEE
===================================================== */

.ssju-ar-card-content > p {
    margin: 0 0 18px;

    color: var(--secondary-color);

    font-size: 15px;
}

.ssju-ar-card-content > p span {
    margin: 0 8px;
    color: var(--secondary-color);
}

.ssju-ar-view-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: var(--primary-color);

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

    text-decoration: none;
}

.ssju-ar-view-link span {
    transition: transform 0.2s ease;
}

.ssju-ar-view-link:hover span {
    transform: translateX(5px);
}


/* =====================================================
   WARNING
===================================================== */

.ssju-ar-warning {
    display: flex;
    align-items: center;

    gap: 18px;

    padding: 23px 25px;

    margin-bottom: 25px;

    background: #fff9ed;

    border: 1px solid var(--secondary-color);
    border-left: 5px solid var(--secondary-color);

    border-radius: 10px;
}

.ssju-ar-warning-icon {
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

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

    border-radius: 50%;

    background: red;
    color: #ffffff;

    font-size: 22px;
    font-weight: 800;
}

.ssju-ar-warning strong {
    display: block;

    margin-bottom: 4px;

    color: var(--secondary-color);

    font-size: 15px;
    letter-spacing: 0.5px;
}

.ssju-ar-warning p {
    margin: 0;

    color: #6c6870;

    font-size: 14px;
}


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

.ssju-ar-documents {
    display: grid;

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

    gap: 20px;

    margin-bottom: 28px;
}

.ssju-ar-document {
    display: grid;

    grid-template-columns: 48px 1fr 30px;

    align-items: center;

    gap: 15px;

    padding: 22px;

    background: #ffffff;

    border: 1px solid #dce3eb;
    border-radius: 10px;

    color: var(--secondary-color);

    text-decoration: none;

    transition: all 0.3s ease;
}

.ssju-ar-document:hover {
    border-color: var(--primary-color);

    box-shadow: 0 10px 28px rgba(16, 47, 85, 0.08);

    transform: translateY(-3px);
}

.ssju-ar-document-icon {
    width: 44px;
    height: 44px;

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

    border-radius: 8px;

    background: #edf3fa;
    color: var(--secondary-color);

    font-size: 10px;
    font-weight: 800;
}

.ssju-ar-document strong {
    display: block;

    margin-bottom: 3px;

    color: #102f55;

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

.ssju-ar-document small {
    color: #87909d;

    font-size: 12px;
}

.ssju-ar-arrow {
    font-size: 20px;
    color: var(--primary-color);

    transition: transform 0.2s ease;
}

.ssju-ar-document:hover .ssju-ar-arrow {
    transform: translate(3px, -3px);
}


/* =====================================================
   UGC FOOTER LINK
===================================================== */

.ssju-ar-footer-link {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-top: 25px;

    border-top: 1px solid #dfe5ec;
}

.ssju-ar-footer-link span {
    color: var(--secondary-color);

    font-size: 13px;
}

.ssju-ar-footer-link a {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: var(--primary-color);

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

    text-decoration: none;
}

.ssju-ar-footer-link a:hover {
    text-decoration: underline;
}


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

@media (max-width: 900px) {

    .ssju-antiragging {
        padding: 65px 20px;
    }

    .ssju-ar-grid {
        grid-template-columns: 1fr;
    }

    .ssju-ar-wide {
        grid-column: auto;
    }

    .ssju-ar-documents {
        grid-template-columns: 1fr;
    }
}


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

@media (max-width: 600px) {

    .ssju-antiragging {
        padding: 50px 15px;
    }

    .ssju-ar-header {
        margin-bottom: 30px;
    }

    .ssju-ar-label {
        font-size: 10px;
        letter-spacing: 1.3px;
    }

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

    .ssju-ar-header p {
        font-size: 14px;
        line-height: 1.6;
    }

    .ssju-ar-card {
        gap: 15px;

        padding: 22px;

        min-height: auto;
    }

    .ssju-ar-icon {
        flex-basis: 48px;

        width: 48px;
        height: 48px;

        font-size: 20px;
    }

    .ssju-ar-card h3 {
        font-size: 16px;
    }

    .ssju-ar-phone {
        font-size: 20px;
    }

    .ssju-ar-links {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .ssju-ar-links span {
        display: none;
    }

    .ssju-ar-warning {
        align-items: flex-start;

        padding: 18px;

        gap: 13px;
    }

    .ssju-ar-warning-icon {
        flex-basis: 36px;

        width: 36px;
        height: 36px;

        font-size: 18px;
    }

    .ssju-ar-warning strong {
        font-size: 13px;
        line-height: 1.5;
    }

    .ssju-ar-warning p {
        font-size: 12px;
        line-height: 1.5;
    }

    .ssju-ar-document {
        grid-template-columns: 42px 1fr 22px;

        gap: 12px;

        padding: 17px;
    }

    .ssju-ar-document-icon {
        width: 40px;
        height: 40px;
    }

    .ssju-ar-document strong {
        font-size: 13px;
    }

    .ssju-ar-footer-link {
        align-items: flex-start;
        flex-direction: column;

        gap: 8px;
    }
}


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

@media (max-width: 380px) {

    .ssju-ar-header h2 {
        font-size: 25px;
    }

    .ssju-ar-card {
        padding: 18px;
    }

    .ssju-ar-card h3 {
        font-size: 15px;
    }

    .ssju-ar-phone {
        font-size: 18px;
    }

    .ssju-ar-document {
        grid-template-columns: 38px 1fr;

        padding: 15px;
    }

    .ssju-ar-arrow {
        display: none;
    }
}



/* =========================
   COURSES SECTION
========================= */

.ssju-courses {
    padding: 70px 0;
    background: var(--white-color);
}

.ssju-courses .container {
    width: 100%;
}


/* Header */

.courses-header {
    margin-bottom: 40px;
}

.courses-header h2 {
    margin: 0 0 15px;
    color: var(--secondary-color);
    font-size: 35px;
    line-height: 1.15;
    font-weight: 400;
}

.courses-header p {
    max-width: 1450px;
    margin: 0;
    color: var(--black-color);
    font-size: 18px;
    line-height: 1.6;
}


/* Course Grid */

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


/* Course Box */

.course-box {
    min-height: 90px;
    padding: 25px 20px;

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

    background: var(--secondary-color);
    color: var(--white-color);

    text-align: center;
    text-decoration: none;

    font-size: 18px;
    line-height: 1.5;
    font-weight: 400;

    transition: all 0.3s ease;
}


/* Hover */

.course-box:hover {
    background: var(--primary-color);
    color: var(--white-color);
    transform: translateY(-3px);
}


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

@media (max-width: 1199px) {

    .ssju-courses {
        padding: 60px 0;
    }

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

    .courses-header p {
        font-size: 18px;
    }

    .courses-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .course-box {
        min-height: 100px;
        font-size: 18px;
    }
}


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

@media (max-width: 991px) {

    .ssju-courses {
        padding: 50px 0;
    }

    .courses-header {
        margin-bottom: 30px;
    }

    .courses-header h2 {
        font-size: 30px;
    }

    .courses-header p {
        font-size: 17px;
        line-height: 1.6;
    }

    .courses-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .course-box {
        min-height: 95px;
        padding: 20px 15px;
        font-size: 17px;
    }
}


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

@media (max-width: 767px) {

    .ssju-courses {
        padding: 40px 0;
    }

    .courses-header {
        margin-bottom: 25px;
    }

    .courses-header h2 {
        font-size: 28px;
        margin-bottom: 12px;
    }

    .courses-header p {
        font-size: 16px;
        line-height: 1.6;
    }

    .courses-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .course-box {
        width: 100%;
        min-height: 80px;
        padding: 18px 15px;
        font-size: 16px;
        line-height: 1.4;
    }

    .course-box:hover {
        transform: none;
    }
}


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

@media (max-width: 480px) {

    .ssju-courses {
        padding: 35px 0;
    }

    .courses-header h2 {
        font-size: 25px;
    }

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

    .course-box {
        min-height: 72px;
        font-size: 15px;
        padding: 15px 12px;
    }
}



/* =========================================
   SSJU - Student Important Links
   All classes use ssju-nb prefix
========================================= */

.ssju-nb-links-section {
    width: 100%;
    background: #f5f7f8;
    padding: 42px 20px 45px;
    box-sizing: border-box;
}

.ssju-nb-container {
    width: 100%;
    max-width: 1395px;
    margin: 0 auto;
}

/* Section Title */

.ssju-nb-section-title {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
}

.ssju-nb-section-title span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 17px;
    border-radius: 25px;
    background: var(--secondary-color);
    color: var(--white-color);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

/* Grid */

.ssju-nb-links-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px 29px;
}

/* Card */

.ssju-nb-card {
    position: relative;
    min-width: 0;
    min-height: 222px;
    background: var(--white-color);
    border: 1px solid #e4e4e4;
    border-radius: 6px;
    padding: 19px 10px 20px;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
}

/* Heading */

.ssju-nb-card-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 30px;
    margin-bottom: 14px;
}

.ssju-nb-heading-icon {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
    color: #161616;
    font-size: 20px;
}

.ssju-nb-card-heading h3 {
    margin: 0;
    color: var(--secondary-color);
    font-size: 12px;
    line-height: 1.35;
    font-weight: 600;
}

/* Links */

.ssju-nb-links-list {
    width: 100%;
}

.ssju-nb-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    width: 100%;
    min-height: 25px;
    margin-bottom: 1px;
    padding: 2px 0;
    color: var(--primary-color);
    text-decoration: none;
    box-sizing: border-box;
    transition: color 0.2s ease;
}

.ssju-nb-link-left {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 500;
}

.ssju-nb-link-left > i {
    flex: 0 0 auto;
    margin-top: 2px;
    font-size: 11px;
}

.ssju-nb-link-left span {
    min-width: 0;
}

.ssju-nb-link:hover {
    color: var(--primary-color);
}

/* Normal / blue links */

.ssju-nb-link.ssju-nb-normal {
    color: #6c6c6c;
}

.ssju-nb-link.ssju-nb-normal:hover {
    color: #333333;
}

/* PDF Icon */

.ssju-nb-pdf {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 19px;
    width: 19px;
    height: 19px;
    color: var(--white-color);
    background: #ff1717;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 30%);
    font-size: 9px;
    margin-right: 1px;
}

.ssju-nb-pdf::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-style: solid;
    border-width: 5px 5px 0 0;
    border-color: var(--white-color) transparent transparent transparent;
}

.ssju-nb-pdf i {
    font-size: 8px;
}

/* More button */

.ssju-nb-more-btn {
    position: absolute;
    bottom: 13px;
    left: 50%;
    transform: translateX(-50%);
    border: 0;
    background: transparent;
    padding: 2px 7px;
    color: var(--black-color);
    cursor: pointer;
    font-size: 12px;
}

.ssju-nb-more-btn:hover {
    color: var(--secondary-color);
}


/* =========================================
   Tablet
========================================= */

@media (max-width: 1100px) {

    .ssju-nb-links-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .ssju-nb-card {
        min-height: 225px;
    }
}


/* =========================================
   Mobile
========================================= */

@media (max-width: 600px) {

    .ssju-nb-links-section {
        padding: 30px 14px 35px;
    }

    .ssju-nb-section-title {
        margin-bottom: 20px;
    }

    .ssju-nb-section-title span {
        padding: 8px 14px;
        font-size: 12px;
    }

    .ssju-nb-links-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .ssju-nb-card {
        min-height: auto;
        padding: 18px 12px 22px;
    }

    .ssju-nb-card-heading {
        margin-bottom: 12px;
    }

    .ssju-nb-card-heading h3 {
        font-size: 13px;
    }

    .ssju-nb-link-left {
        font-size: 12px;
    }

    .ssju-nb-pdf {
        width: 20px;
        height: 20px;
        flex-basis: 20px;
    }

    .ssju-nb-more-btn {
        position: static;
        display: block;
        transform: none;
        margin: 8px auto -5px;
    }
}


/* =========================================
   Small Mobile
========================================= */

@media (max-width: 380px) {

    .ssju-nb-links-section {
        padding-left: 10px;
        padding-right: 10px;
    }

    .ssju-nb-card {
        padding-left: 10px;
        padding-right: 10px;
    }

    .ssju-nb-link-left {
        font-size: 11px;
    }

    .ssju-nb-card-heading h3 {
        font-size: 12px;
    }
}


/* =========================================
   SHOW MORE / SHOW LESS
========================================= */

.ssju-nb-extra {
    display: none;
}

.ssju-nb-card.ssju-nb-expanded .ssju-nb-extra {
    display: flex;
}

/* Arrow */

.ssju-nb-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 25px;

    position: absolute;
    bottom: 7px;
    left: 50%;
    transform: translateX(-50%);

    border: 0;
    outline: none;
    background: transparent;

    color: var(--black-color);
    cursor: pointer;

    transition: all 0.25s ease;
}

.ssju-nb-more-btn i {
    font-size: 11px;
    transition: transform 0.3s ease;
}

/* Rotate arrow when opened */

.ssju-nb-card.ssju-nb-expanded .ssju-nb-more-btn i {
    transform: rotate(180deg);
}

/* Expanded card */

.ssju-nb-card.ssju-nb-expanded {
    height: auto;
    min-height: 0;
    padding-bottom: 38px;
}

/* Smooth hover */

.ssju-nb-more-btn:hover {
    color: var(--primary-color);
}



/* =========================================
   SSJU PHOTO GALLERY
   Prefix: voc-ssju-
========================================= */

.voc-ssju-gallery-section {
    width: 100%;
    padding: 0 0 55px;
    background: #fff;
    overflow: hidden;
}

.voc-ssju-gallery-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}


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

.voc-ssju-gallery-heading {
    text-align: center;
    margin-bottom: 30px;
}

.voc-ssju-gallery-heading h2 {
    margin: 0;
    color: var(--secondary-color);
    font-size: 28px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.voc-ssju-gallery-heading span {
    display: block;
    width: 190px;
    height: 3px;
    margin: 18px auto 0;
    background: #d2d2d2;
}


/* =========================================
   SWIPER
========================================= */

.voc-ssju-gallery-swiper {
    width: 100%;
    overflow: visible;
    padding: 0 36px;
    box-sizing: border-box;
}

.voc-ssju-gallery-swiper .swiper-wrapper {
    align-items: stretch;
}


/* =========================================
   SLIDE
========================================= */

.voc-ssju-gallery-slide {
    height: 608px;
    overflow: hidden;
    border-radius: 2px;
    background: #eee;
    box-sizing: border-box;
}

.voc-ssju-gallery-slide a {
    display: block;
    width: 100%;
    height: 100%;
}

.voc-ssju-gallery-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.voc-ssju-gallery-slide:hover img {
    transform: scale(1.03);
}


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

.voc-ssju-gallery-prev,
.voc-ssju-gallery-next {
    width: 42px;
    height: 42px;
    margin-top: -21px;

    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);

    color: #fff;

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

    z-index: 10;
}

.voc-ssju-gallery-prev::after,
.voc-ssju-gallery-next::after {
    display: none;
}

.voc-ssju-gallery-prev i,
.voc-ssju-gallery-next i {
    font-size: 14px;
}

.voc-ssju-gallery-prev {
    left: 45px;
}

.voc-ssju-gallery-next {
    right: 45px;
}

.voc-ssju-gallery-prev:hover,
.voc-ssju-gallery-next:hover {
    background: rgba(0, 0, 0, 0.7);
}


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

@media (max-width: 1100px) {

    .voc-ssju-gallery-heading h2 {
        font-size: 25px;
    }

    .voc-ssju-gallery-swiper {
        padding: 0 25px;
    }

    .voc-ssju-gallery-slide {
        height: 500px;
    }

    .voc-ssju-gallery-prev {
        left: 30px;
    }

    .voc-ssju-gallery-next {
        right: 30px;
    }
}


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

@media (max-width: 767px) {

    .voc-ssju-gallery-section {
        padding-bottom: 35px;
    }

    .voc-ssju-gallery-heading {
        margin-bottom: 22px;
    }

    .voc-ssju-gallery-heading h2 {
        font-size: 21px;
    }

    .voc-ssju-gallery-heading span {
        width: 130px;
        height: 2px;
        margin-top: 12px;
    }

    .voc-ssju-gallery-swiper {
        padding: 0 18px;
    }

    .voc-ssju-gallery-slide {
        height: 390px;
        border-radius: 3px;
    }

    .voc-ssju-gallery-prev,
    .voc-ssju-gallery-next {
        width: 34px;
        height: 34px;
        margin-top: -17px;
    }

    .voc-ssju-gallery-prev {
        left: 22px;
    }

    .voc-ssju-gallery-next {
        right: 22px;
    }

    .voc-ssju-gallery-prev i,
    .voc-ssju-gallery-next i {
        font-size: 11px;
    }
}


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

@media (max-width: 480px) {

    .voc-ssju-gallery-heading h2 {
        font-size: 19px;
    }

    .voc-ssju-gallery-swiper {
        padding: 0 12px;
    }

    .voc-ssju-gallery-slide {
        height: 300px;
    }

    .voc-ssju-gallery-prev {
        left: 16px;
    }

    .voc-ssju-gallery-next {
        right: 16px;
    }
}


/* =========================================
   VOCATIONAL SSJU - ABOUT US
   Prefix: voc-ssju-
========================================= */

.voc-ssju-about-section {
    width: 100%;
    padding: 35px 30px 65px;
    background: #ffffff;
    box-sizing: border-box;
}

.voc-ssju-about-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}


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

.voc-ssju-about-heading {
    text-align: center;
    margin-bottom: 38px;
}

.voc-ssju-about-heading h2 {
    margin: 0;
    color: var(--secondary-color);
    font-size: 34px;
    line-height: 1.2;
    font-weight: 700;
}

.voc-ssju-about-heading span {
    display: block;
    width: 148px;
    height: 3px;
    margin: 23px auto 0;
    background: #cfcfcf;
}


/* =========================================
   INTRODUCTION
========================================= */

.voc-ssju-about-intro {
    width: 100%;
    margin-bottom: 48px;
}

.voc-ssju-about-intro p {
    margin: 0;
    color: #333333;
    font-size: 16px;
    line-height: 1.42;
    font-weight: 400;
    text-align: left;
}


/* =========================================
   TWO COLUMN GRID
========================================= */

.voc-ssju-about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 38px;
    align-items: start;
}


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

.voc-ssju-about-block {
    width: 100%;
}

.voc-ssju-about-block + .voc-ssju-about-block {
    margin-top: 34px;
}

.voc-ssju-about-block h3 {
    margin: 0;
    color: var(--secondary-color);
    font-size: 26px;
    line-height: 1.25;
    font-weight: 700;
}

.voc-ssju-about-line {
    width: 100%;
    height: 2px;
    margin: 13px 0 20px;
    background: #eeeeee;
}


/* =========================================
   VISION / MISSION TEXT
========================================= */

.voc-ssju-about-block p {
    margin: 0;
    color: #333333;
    font-size: 16px;
    line-height: 1.45;
    font-weight: 400;
    text-align: left;
}


/* =========================================
   OBJECTIVES
========================================= */

.voc-ssju-objectives-list {
    margin: 0;
    padding: 0 0 0 20px;
    color: #333333;
    list-style-type: disc;
}


.voc-ssju-objectives-list li {
    padding-left: 0;
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.4;
}

.voc-ssju-objectives-list li:last-child {
    margin-bottom: 0;
}


/* =========================================
   LARGE DESKTOP
========================================= */

@media (max-width: 1200px) {

    .voc-ssju-about-section {
        padding-left: 25px;
        padding-right: 25px;
    }

    .voc-ssju-about-intro p,
    .voc-ssju-about-block p,
    .voc-ssju-objectives-list li {
        font-size: 17px;
    }

    .voc-ssju-about-block h3 {
        font-size: 24px;
    }
}


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

@media (max-width: 900px) {

    .voc-ssju-about-section {
        padding: 30px 20px 50px;
    }

    .voc-ssju-about-heading {
        margin-bottom: 30px;
    }

    .voc-ssju-about-heading h2 {
        font-size: 30px;
    }

    .voc-ssju-about-intro {
        margin-bottom: 40px;
    }

    .voc-ssju-about-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .voc-ssju-about-block + .voc-ssju-about-block {
        margin-top: 30px;
    }

    .voc-ssju-about-block h3 {
        font-size: 23px;
    }

    .voc-ssju-about-intro p,
    .voc-ssju-about-block p,
    .voc-ssju-objectives-list li {
        font-size: 16px;
    }
}


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

@media (max-width: 600px) {

    .voc-ssju-about-section {
        padding: 28px 15px 40px;
    }

    .voc-ssju-about-heading {
        margin-bottom: 25px;
    }

    .voc-ssju-about-heading h2 {
        font-size: 24px;
    }

    .voc-ssju-about-heading span {
        width: 115px;
        height: 2px;
        margin-top: 14px;
    }

    .voc-ssju-about-intro {
        margin-bottom: 32px;
    }

    .voc-ssju-about-intro p,
    .voc-ssju-about-block p,
    .voc-ssju-objectives-list li {
        font-size: 15px;
        line-height: 1.55;
    }

    .voc-ssju-about-grid {
        gap: 30px;
    }

    .voc-ssju-about-block h3 {
        font-size: 20px;
    }

    .voc-ssju-about-line {
        margin: 10px 0 16px;
    }

    .voc-ssju-about-block + .voc-ssju-about-block {
        margin-top: 28px;
    }

    .voc-ssju-objectives-list {
        padding-left: 18px;
    }

    .voc-ssju-objectives-list li {
        margin-bottom: 9px;
        padding-left: 2px;
    }
}


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

@media (max-width: 400px) {

    .voc-ssju-about-section {
        padding-left: 12px;
        padding-right: 12px;
    }

    .voc-ssju-about-heading h2 {
        font-size: 22px;
    }

    .voc-ssju-about-intro p,
    .voc-ssju-about-block p,
    .voc-ssju-objectives-list li {
        font-size: 14px;
    }

    .voc-ssju-about-block h3 {
        font-size: 19px;
    }
}


/* =========================================
   VOC-SSJU
   PROGRAMME & INDUSTRY PARTNERS
========================================= */

.voc-ssju-programme-section,
.voc-ssju-industry-section {
    width: 100%;
    background: #fff;
    box-sizing: border-box;
}

.voc-ssju-programme-section {
    padding: 35px 30px 40px;
}

.voc-ssju-industry-section {
    padding: 20px 30px 65px;
}

.voc-ssju-programme-container,
.voc-ssju-industry-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}


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

.voc-ssju-section-heading {
    text-align: center;
    margin-bottom: 34px;
}

.voc-ssju-section-heading h2 {
    margin: 0;
    color: var(--secondary-color);
    font-size: 29px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.voc-ssju-section-heading span {
    display: block;
    width: 126px;
    height: 3px;
    margin: 20px auto 0;
    background: #cecece;
}


/* =========================================
   INTRODUCTION
========================================= */

.voc-ssju-programme-intro {
    width: 100%;
    margin-bottom: 40px;
}

.voc-ssju-programme-intro p {
    margin: 0;
    color: #111;
    font-size: 17px;
    line-height: 1.4;
    font-weight: 400;
}


/* =========================================
   PROGRAMME TWO COLUMN GRID
========================================= */

.voc-ssju-programme-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}


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

.voc-ssju-programme-column {
    min-width: 0;
}

.voc-ssju-programme-column h3 {
    margin: 0;
    color: var(--secondary-color);
    font-size: 23px;
    line-height: 1.25;
    font-weight: 700;
}

.voc-ssju-column-line {
    width: 100%;
    height: 2px;
    margin: 10px 0 17px;
    background: #eeeeee;
}


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

.voc-ssju-number-list {
    margin: 0;
    padding-left: 28px;
    color: #333;
}

.voc-ssju-number-list li {
    padding-left: 0;
    margin-bottom: 9px;
    font-size: 16px;
    line-height: 1.4;
}

.voc-ssju-number-list li:last-child {
    margin-bottom: 0;
}


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

.voc-ssju-syllabus-wrapper {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
}

.voc-ssju-syllabus-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 218px;
    min-height: 44px;
    padding: 10px 25px;

    background: var(--secondary-color);
    color: #fff;

    border-radius: 4px;

    text-decoration: none;

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

    box-sizing: border-box;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.voc-ssju-syllabus-btn:hover {
background: var(--primary-color);
    color: #fff;
    transform: translateY(-2px);
}


/* =========================================
   INDUSTRY PARTNERS
========================================= */

.voc-ssju-industry-section
.voc-ssju-section-heading {
    margin-bottom: 45px;
}

.voc-ssju-industry-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 80px;
}

.voc-ssju-industry-column {
    min-width: 0;
}

.voc-ssju-industry-column
.voc-ssju-number-list {
    padding-left: 27px;
}

.voc-ssju-industry-column
.voc-ssju-number-list li {
    margin-bottom: 12px;
}


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

@media (max-width: 1000px) {

    .voc-ssju-programme-section {
        padding: 30px 22px 35px;
    }

    .voc-ssju-industry-section {
        padding: 20px 22px 50px;
    }

    .voc-ssju-section-heading h2 {
        font-size: 25px;
    }

    .voc-ssju-programme-intro p,
    .voc-ssju-number-list li {
        font-size: 15px;
    }

    .voc-ssju-programme-grid {
        gap: 25px;
    }

    .voc-ssju-industry-grid {
        column-gap: 40px;
    }
}


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

@media (max-width: 700px) {

    .voc-ssju-programme-section {
        padding: 28px 15px 35px;
    }

    .voc-ssju-industry-section {
        padding: 15px 15px 45px;
    }


    /* Heading */

    .voc-ssju-section-heading {
        margin-bottom: 27px;
    }

    .voc-ssju-section-heading h2 {
        font-size: 21px;
        line-height: 1.3;
    }

    .voc-ssju-section-heading span {
        width: 100px;
        height: 2px;
        margin-top: 13px;
    }


    /* Intro */

    .voc-ssju-programme-intro {
        margin-bottom: 30px;
    }

    .voc-ssju-programme-intro p {
        font-size: 15px;
        line-height: 1.55;
    }


    /* Programme */

    .voc-ssju-programme-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .voc-ssju-programme-column h3 {
        font-size: 20px;
    }

    .voc-ssju-column-line {
        margin: 9px 0 15px;
    }

    .voc-ssju-number-list {
        padding-left: 24px;
    }

    .voc-ssju-number-list li {
        font-size: 15px;
        line-height: 1.5;
        margin-bottom: 8px;
    }


    /* Button */

    .voc-ssju-syllabus-wrapper {
        justify-content: center;
        margin-top: 25px;
    }

    .voc-ssju-syllabus-btn {
        width: 100%;
        max-width: 250px;
        min-height: 45px;
        font-size: 15px;
    }


    /* Industry */

    .voc-ssju-industry-section
    .voc-ssju-section-heading {
        margin-bottom: 30px;
    }

    .voc-ssju-industry-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .voc-ssju-industry-column
    .voc-ssju-number-list {
        padding-left: 24px;
    }

    .voc-ssju-industry-column
    .voc-ssju-number-list li {
        margin-bottom: 9px;
    }
}


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

@media (max-width: 400px) {

    .voc-ssju-programme-section,
    .voc-ssju-industry-section {
        padding-left: 12px;
        padding-right: 12px;
    }

    .voc-ssju-section-heading h2 {
        font-size: 19px;
    }

    .voc-ssju-programme-intro p,
    .voc-ssju-number-list li {
        font-size: 14px;
    }

    .voc-ssju-programme-column h3 {
        font-size: 19px;
    }
}


/* =========================================
   COURSE PARTNER INSTITUTES
========================================= */

.voc-ssju-partners-section {
    width: 100%;
    padding: 35px 30px 65px;
    background: var(--white-color);
    box-sizing: border-box;
}

.voc-ssju-partners-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}


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

.voc-ssju-section-heading {
    text-align: center;
    margin-bottom: 48px;
}

.voc-ssju-section-heading h2 {
    margin: 0;

    color: var(--secondary-color);

    font-size: 29px;
    line-height: 1.25;
    font-weight: 700;

    letter-spacing: 0.4px;
}

.voc-ssju-section-heading span {
    display: block;

    width: 135px;
    height: 3px;

    margin: 20px auto 0;

    background: #cfcfcf;
}


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

.voc-ssju-partners-grid {
    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 20px 18px;
}


/* =========================================
   PARTNER CARD
========================================= */

.voc-ssju-partner-card {
    min-width: 0;

    min-height: 448px;

    padding: 28px 22px 25px;

    background: var(--white-color);

    border: 1px solid #e4e4e4;

    border-radius: 4px;

    box-shadow:
        1px 2px 5px rgba(0, 0, 0, 0.16);

    text-align: center;

    box-sizing: border-box;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.voc-ssju-partner-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 8px 20px rgba(8, 32, 65, 0.14);
}


/* =========================================
   LOGO
========================================= */

.voc-ssju-partner-logo {
    width: 200px;
    height: 200px;

    margin: 0 auto 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 50%;
}

.voc-ssju-partner-logo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    transition: transform 0.3s ease;
}

.voc-ssju-partner-card:hover
.voc-ssju-partner-logo img {
    transform: scale(1.04);
}


/* =========================================
   PARTNER NAME
========================================= */

.voc-ssju-partner-card h3 {
    margin: 0 0 14px;

    color: #333;

    font-size: 18px;
    line-height: 1.3;

    font-weight: 700;
}


/* =========================================
   CONTENT
========================================= */

.voc-ssju-partner-card p {
    margin: 0 0 13px;

    color: #333;

    font-size: 14px;
    line-height: 1.45;

    font-weight: 400;
}

.voc-ssju-partner-card p:last-child {
    margin-bottom: 0;
}


/* =========================================
   LINKS
========================================= */

.voc-ssju-partner-card a {
    color: var(--primary-color);

    text-decoration: none;

    overflow-wrap: anywhere;
    word-break: break-word;

    transition: color 0.2s ease;
}

.voc-ssju-partner-card a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1100px) {

    .voc-ssju-partners-section {
        padding-left: 22px;
        padding-right: 22px;
    }

    .voc-ssju-partners-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .voc-ssju-partner-card {
        min-height: 430px;
    }

    .voc-ssju-partner-logo {
        width: 180px;
        height: 180px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 650px) {

    .voc-ssju-partners-section {
        padding: 30px 15px 45px;
    }

    .voc-ssju-section-heading {
        margin-bottom: 30px;
    }

    .voc-ssju-section-heading h2 {
        font-size: 22px;
        line-height: 1.3;
    }

    .voc-ssju-section-heading span {
        width: 105px;
        height: 2px;

        margin-top: 13px;
    }

    .voc-ssju-partners-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .voc-ssju-partner-card {
        min-height: auto;

        padding: 25px 18px;
    }

    .voc-ssju-partner-logo {
        width: 175px;
        height: 175px;

        margin-bottom: 18px;
    }

    .voc-ssju-partner-card h3 {
        font-size: 18px;
    }

    .voc-ssju-partner-card p {
        font-size: 14px;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 400px) {

    .voc-ssju-partners-section {
        padding-left: 12px;
        padding-right: 12px;
    }

    .voc-ssju-section-heading h2 {
        font-size: 20px;
    }

    .voc-ssju-partner-logo {
        width: 155px;
        height: 155px;
    }

    .voc-ssju-partner-card {
        padding: 22px 15px;
    }

    .voc-ssju-partner-card h3 {
        font-size: 17px;
    }

    .voc-ssju-partner-card p {
        font-size: 13px;
    }
}

/* =========================================
   JOB PORTALS
   Prefix: voc-ssju-
========================================= */

.voc-ssju-job-section {
    width: 100%;
    padding: 35px 30px 70px;
    background: var(--white-color);
    box-sizing: border-box;
}

.voc-ssju-job-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}


/* =========================================
   HEADING
========================================= */

.voc-ssju-job-heading {
    text-align: center;
    margin-bottom: 45px;
}

.voc-ssju-job-heading h2 {
    margin: 0;
    color: var(--secondary-color);
    font-size: 30px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.voc-ssju-job-heading span {
    display: block;
    width: 135px;
    height: 3px;
    margin: 20px auto 0;
    background: #cfcfcf;
}


/* =========================================
   GRID
========================================= */

.voc-ssju-job-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px 26px;
}


/* =========================================
   CARD
========================================= */

.voc-ssju-job-card {
    min-width: 0;
    height: 235px;

    display: flex;
    flex-direction: column;

    background: var(--white-color);

    border: 1px solid #dedede;
    border-radius: 5px;

    overflow: hidden;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.voc-ssju-job-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 8px 20px rgba(8, 32, 65, 0.15);
}


/* =========================================
   LOGO AREA
========================================= */

.voc-ssju-job-logo {
    height: 128px;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 18px 25px;

    box-sizing: border-box;

    background: var(--white-color);

    border-bottom: 1px solid #e3e3e3;
}

.voc-ssju-job-logo img {
    display: block;

    max-width: 88%;
    max-height: 85px;

    width: auto;
    height: auto;

    object-fit: contain;
}


/* =========================================
   CONTENT
========================================= */

.voc-ssju-job-content {
    flex: 1;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    padding: 17px 0px 0;

    box-sizing: border-box;
}

.voc-ssju-job-content h3 {
    margin: 0;

    color: #68717c;

    font-size: 16px;
    line-height: 1.3;

    font-weight: 600;

    text-align: center;
}


/* =========================================
   VISIT BUTTON
========================================= */

.voc-ssju-job-visit {
    width: 100%;
    min-height: 47px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    color: var(--blue-color);

    text-decoration: none;

    font-size: 16px;
    font-weight: 600;

    margin-top: 12px;

    transition:
        background 0.25s ease,
        color 0.25s ease;
}

.voc-ssju-job-visit i {
    font-size: 16px;
}

.voc-ssju-job-visit:hover {
    background: var(--secondary-color);
    color: var(--white-color);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1050px) {

    .voc-ssju-job-section {
        padding-left: 22px;
        padding-right: 22px;
    }

    .voc-ssju-job-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .voc-ssju-job-card {
        height: 230px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 650px) {

    .voc-ssju-job-section {
        padding: 30px 15px 50px;
    }

    .voc-ssju-job-heading {
        margin-bottom: 30px;
    }

    .voc-ssju-job-heading h2 {
        font-size: 23px;
    }

    .voc-ssju-job-heading span {
        width: 105px;
        height: 2px;
        margin-top: 13px;
    }

    .voc-ssju-job-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .voc-ssju-job-card {
        height: 235px;
    }

    .voc-ssju-job-logo {
        height: 130px;
    }

    .voc-ssju-job-content h3 {
        font-size: 16px;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 400px) {

    .voc-ssju-job-section {
        padding-left: 12px;
        padding-right: 12px;
    }

    .voc-ssju-job-heading h2 {
        font-size: 21px;
    }

    .voc-ssju-job-card {
        height: 225px;
    }

    .voc-ssju-job-logo {
        height: 120px;
    }

    .voc-ssju-job-content h3 {
        font-size: 15px;
    }
}


/* =========================================
   ENTRANCE EXAM SYLLABUS
   Prefix: voc-ssju-
========================================= */

.voc-ssju-syllabus-section {
    width: 100%;
    padding: 35px 30px 65px;
    background: var(--white-color);
    box-sizing: border-box;
}

.voc-ssju-syllabus-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}


/* =========================================
   HEADING
========================================= */

.voc-ssju-syllabus-heading {
    text-align: center;
    margin-bottom: 45px;
}

.voc-ssju-syllabus-heading h2 {
    margin: 0;

    color: var(--secondary-color);

    font-size: 30px;
    line-height: 1.25;
    font-weight: 700;

    letter-spacing: 0.4px;
}

.voc-ssju-syllabus-heading span {
    display: block;

    width: 135px;
    height: 3px;

    margin: 18px auto 0;

    background: #cfcfcf;
}


/* =========================================
   LIST
========================================= */

.voc-ssju-syllabus-list {
    display: flex;
    flex-direction: column;
    gap: 27px;
}


/* =========================================
   SYLLABUS ITEM
========================================= */

.voc-ssju-syllabus-item {
    display: flex;
    align-items: stretch;

    width: 100%;
    min-height: 80px;

    background: var(--white-color);

    border: 1px solid #dedede;
    border-radius: 6px;

    overflow: hidden;

    text-decoration: none;

    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.10);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.voc-ssju-syllabus-item:hover {
    transform: translateY(-2px);

    box-shadow:
        0 7px 18px rgba(8, 32, 65, 0.15);
}


/* =========================================
   PDF ICON
========================================= */

.voc-ssju-syllabus-icon {
    flex: 0 0 100px;

    min-height: 80px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--secondary-color);

    color: var(--white-color);
}

.voc-ssju-syllabus-icon i {
    font-size: 40px;
}


/* =========================================
   INFORMATION
========================================= */

.voc-ssju-syllabus-info {
    flex: 1;

    display: flex;
    align-items: center;

    gap: 25px;

    padding: 20px 24px;

    min-width: 0;

    box-sizing: border-box;
}

.voc-ssju-syllabus-info h3 {
    flex: 1;

    margin: 0;

    color: #666;

    font-size: 16px;
    line-height: 1.3;

    font-weight: 600;
}

.voc-ssju-syllabus-info h3 span {
    font-weight: 600;
}

.voc-ssju-syllabus-info time {
    flex: 0 0 auto;

    color: #999;

    font-size: 16px;
    line-height: 1.4;

    white-space: nowrap;
}


/* =========================================
   HOVER
========================================= */

.voc-ssju-syllabus-item:hover
.voc-ssju-syllabus-info h3 {
    color: var(--primary-color);
}

.voc-ssju-syllabus-item:hover
.voc-ssju-syllabus-icon {
    background: var(--primary-color);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

    .voc-ssju-syllabus-section {
        padding-left: 22px;
        padding-right: 22px;
    }

    .voc-ssju-syllabus-info {
        gap: 15px;
    }

    .voc-ssju-syllabus-info h3 {
        font-size: 19px;
    }

    .voc-ssju-syllabus-info time {
        font-size: 14px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

    .voc-ssju-syllabus-section {
        padding: 30px 15px 50px;
    }

    .voc-ssju-syllabus-heading {
        margin-bottom: 30px;
    }

    .voc-ssju-syllabus-heading h2 {
        font-size: 23px;
    }

    .voc-ssju-syllabus-heading span {
        width: 105px;
        height: 2px;
        margin-top: 13px;
    }

    .voc-ssju-syllabus-list {
        gap: 16px;
    }

    .voc-ssju-syllabus-item {
        min-height: 90px;
    }

    .voc-ssju-syllabus-icon {
        flex: 0 0 70px;
        min-height: 90px;
    }

    .voc-ssju-syllabus-icon i {
        font-size: 32px;
    }

    .voc-ssju-syllabus-info {
        display: block;

        padding: 14px 15px;
    }

    .voc-ssju-syllabus-info h3 {
        font-size: 16px;
        line-height: 1.4;
    }

    .voc-ssju-syllabus-info time {
        display: block;

        margin-top: 7px;

        font-size: 12px;
        white-space: normal;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 400px) {

    .voc-ssju-syllabus-section {
        padding-left: 12px;
        padding-right: 12px;
    }

    .voc-ssju-syllabus-heading h2 {
        font-size: 21px;
    }

    .voc-ssju-syllabus-icon {
        flex: 0 0 58px;
    }

    .voc-ssju-syllabus-icon i {
        font-size: 27px;
    }

    .voc-ssju-syllabus-info {
        padding: 12px;
    }

    .voc-ssju-syllabus-info h3 {
        font-size: 14px;
    }

    .voc-ssju-syllabus-info time {
        font-size: 11px;
    }
}


/* =========================================
   KNOWLEDGE RESOURCES
   Prefix: ssju-kres-
========================================= */

.ssju-kres-section {
    width: 100%;
    padding: 35px 30px 70px;
    background: var(--white-color);
    box-sizing: border-box;
}

.ssju-kres-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}


/* =========================================
   HEADING
========================================= */

.ssju-kres-heading {
    text-align: center;
    margin-bottom: 45px;
}

.ssju-kres-heading h2 {
    margin: 0;
    color: var(--secondary-color);

    font-size: 30px;
    line-height: 1.25;
    font-weight: 700;

    letter-spacing: 0.5px;
}

.ssju-kres-heading span {
    display: block;

    width: 135px;
    height: 3px;

    margin: 18px auto 0;

    background: #cfcfcf;
}


/* =========================================
   GRID
========================================= */

.ssju-kres-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 18px 16px;
}


/* =========================================
   CARD
========================================= */

.ssju-kres-card {
    min-width: 0;

    display: flex;
    flex-direction: column;

    /* min-height: 295px; */

    background: var(--white-color);

    border: 1px solid #ddd;
    border-radius: 4px;

    overflow: hidden;

    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.08);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.ssju-kres-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 8px 20px rgba(8, 32, 65, 0.14);
}


/* =========================================
   LOGO
========================================= */

.ssju-kres-logo {
    width: 100%;
    height: 108px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 8px 12px;

    box-sizing: border-box;

    border-bottom: 1px solid #bbb;
}

.ssju-kres-logo img {
    display: block;

    max-width: 90%;
    max-height: 92px;

    width: auto;
    height: auto;

    object-fit: contain;
}


/* =========================================
   CONTENT
========================================= */

.ssju-kres-body {
    flex: 1;

    padding: 9px 10px 4px;

    box-sizing: border-box;
}

.ssju-kres-body h3 {
    margin: 0 0 7px;

    color: #555;

    font-size: 14px;
    line-height: 1.35;

    font-weight: 700;
}

.ssju-kres-body p {
    margin: 0 0 7px;

    color: #666;

    font-size: 12px;
    line-height: 1.45;

    text-align: justify;
}


/* =========================================
   LEARN MORE
========================================= */

.ssju-kres-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 42px;

    padding: 8px 10px;

    box-sizing: border-box;

    color: var(--secondary-color);

    text-decoration: none;

    font-size: 13px;
    font-weight: 600;

    transition:
        background 0.25s ease,
        color 0.25s ease;
}

.ssju-kres-link i {
    font-size: 13px;
}

.ssju-kres-link:hover {
    color: var(--white-color);
    background: var(--secondary-color);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1050px) {

    .ssju-kres-section {
        padding-left: 22px;
        padding-right: 22px;
    }

    .ssju-kres-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .ssju-kres-card {
        /* min-height: 300px; */
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 650px) {

    .ssju-kres-section {
        padding: 30px 15px 50px;
    }

    .ssju-kres-heading {
        margin-bottom: 30px;
    }

    .ssju-kres-heading h2 {
        font-size: 23px;
    }

    .ssju-kres-heading span {
        width: 105px;
        height: 2px;
        margin-top: 13px;
    }

    .ssju-kres-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .ssju-kres-card {
        /* min-height: 290px; */
    }

    .ssju-kres-logo {
        height: 120px;
    }

    .ssju-kres-logo img {
        max-height: 100px;
    }

    .ssju-kres-body {
        padding: 12px 14px 5px;
    }

    .ssju-kres-body h3 {
        font-size: 15px;
    }

    .ssju-kres-body p {
        font-size: 13px;
        line-height: 1.5;
    }

    .ssju-kres-link {
        min-height: 45px;
        font-size: 14px;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 400px) {

    .ssju-kres-section {
        padding-left: 12px;
        padding-right: 12px;
    }

    .ssju-kres-heading h2 {
        font-size: 21px;
    }

    .ssju-kres-card {
        /* min-height: 285px; */
    }

    .ssju-kres-logo {
        height: 110px;
    }

    .ssju-kres-body h3 {
        font-size: 14px;
    }

    .ssju-kres-body p {
        font-size: 12px;
    }
}



/* =========================================
   SSJU NOTICES / NOTIFICATIONS
   Prefix: ssju-not-
========================================= */

.ssju-not-section {
    width: 100%;
    padding: 30px 30px 65px;
    background: var(--white-color);
    overflow: hidden;
    box-sizing: border-box;
}

.ssju-not-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}


/* =========================================
   HEADING
========================================= */

.ssju-not-heading {
    text-align: center;
    margin-bottom: 55px;
}

.ssju-not-heading h2 {
    margin: 0;

    color: var(--secondary-color);

    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
}

.ssju-not-heading span {
    display: block;

    width: 100%;
    max-width: 1300px;

    height: 6px;

    margin: 22px auto 0;

    background: var(--secondary-color);

    border-radius: 10px;
}


/* =========================================
   GRID
========================================= */

.ssju-not-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 30px;

    align-items: stretch;
}


/* =========================================
   CARD
========================================= */

.ssju-not-card {
    position: relative;

    height: 550px;

    min-width: 0;

    display: flex;
    flex-direction: column;

    background: var(--white-color);

    border: 1px solid #d9dfe5;
    border-left: 6px solid var(--secondary-color);

    border-radius: 14px;

    overflow: hidden;

    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.05);

    box-sizing: border-box;
}


/* Different accent borders */

.ssju-not-card-notices {
    border-left-color: var(--secondary-color);
}

.ssju-not-card-admissions {
    border-left-color: var(--secondary-color);
}

.ssju-not-card-exams {
    border-left-color: var(--secondary-color);
}


/* =========================================
   CARD HEADER
========================================= */

.ssju-not-card-header {
    flex: 0 0 auto;

    text-align: center;

    padding: 42px 20px 15px;
}

.ssju-not-card-header i {
    display: block;

    margin-bottom: 26px;

    color: var(--black-color);

    font-size: 21px;
}

.ssju-not-card-header h3 {
    margin: 0;

    color: var(--secondary-color);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 20px;
    /* font-weight: 700; */
}


/* =========================================
   SCROLL WINDOW
========================================= */

.ssju-not-scroll {
    position: relative;

    flex: 1;

    min-height: 0;

    overflow: hidden;

    padding: 0 30px;

    /* Fade edges */
    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            black 7%,
            black 93%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            black 7%,
            black 93%,
            transparent 100%
        );
}


/* =========================================
   CONTINUOUS VERTICAL ANIMATION
========================================= */

.ssju-not-track {
    display: flex;
    flex-direction: column;

    animation:
        ssju-not-scroll-up 10s linear infinite;

    will-change: transform;
}


/* Pause when user hovers */

.ssju-not-card:hover .ssju-not-track {
    animation-play-state: paused;
}

.ssju-not-link-icon{
    color: var(--primary-color);
}

/* =========================================
   NEWS ITEM
========================================= */

.ssju-not-item {
    position: relative;

    flex: 0 0 auto;

    display: flex;

    gap: 13px;

    margin-bottom: 20px;

    padding-left: 0;
}

/* .ssju-not-item::before {
    content: "";

    flex: 0 0 auto;

    width: 24px;
    height: 13px;

    margin-top: 8px;

    background: var(--primary-color);

    clip-path: polygon(
        0 50%,
        18% 15%,
        38% 35%,
        58% 10%,
        100% 50%,
        58% 90%,
        38% 65%,
        18% 85%
    );
} */


/* =========================================
   LINK
========================================= */

.ssju-not-item a {
    display: block;

    color: var(--secondary-color);

    text-decoration: none;


    font-size: 16px;
    line-height: 1.45;

    /* font-weight: 600; */

    transition: color 0.2s ease;
}

.ssju-not-item a:hover {
    color: var(--primary-color);
}


/* =========================================
   NEW BADGE
========================================= */

.ssju-not-new {
    position: absolute;

    left: 0;

    top: 7px;

    display: none;

    padding: 2px 6px;

    background: var(--secondary-color);

    color: var(--white-color);

    font-size: 8px;

    font-weight: 700;

    border-radius: 3px;
}


/* =========================================
   FOOTER
========================================= */

.ssju-not-footer {
    position: relative;
    z-index: 5;

    flex: 0 0 auto;

    display: flex;
    justify-content: center;

    padding: 10px 20px 22px;

    background: var(--white-color);
}


/* =========================================
   VIEW MORE BUTTON
========================================= */

.ssju-not-view-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 115px;

    padding: 10px 18px;

    color: var(--white-color);

    background: var(--secondary-color);

    border-radius: 6px;

    text-decoration: none;

    font-size: 16px;
    font-weight: 600;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.ssju-not-view-btn:hover {
    background: var(--primary-color);

    color: var(--white-color);

    transform: translateY(-2px);
}


/* =========================================
   ANIMATION
========================================= */

@keyframes ssju-not-scroll-up {

    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-50%);
    }
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

    .ssju-not-section {
        padding-left: 20px;
        padding-right: 20px;
    }

    .ssju-not-heading {
        margin-bottom: 40px;
    }

    .ssju-not-heading h2 {
        font-size: 30px;
    }

    .ssju-not-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 22px;
    }

    .ssju-not-card {
        height: 500px;
    }

    .ssju-not-card:last-child {
        grid-column: 1 / -1;
        max-width: calc(50% - 11px);
        width: 100%;
        justify-self: center;
    }

    .ssju-not-item a {
        font-size: 17px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

    .ssju-not-section {
        padding: 30px 15px 50px;
    }

    .ssju-not-heading {
        margin-bottom: 35px;
    }

    .ssju-not-heading h2 {
        font-size: 27px;
    }

    .ssju-not-heading span {
        height: 4px;
        margin-top: 16px;
    }

    .ssju-not-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .ssju-not-card {
        height: 460px;
    }

    .ssju-not-card:last-child {
        grid-column: auto;
        max-width: none;
    }

    .ssju-not-card-header {
        padding-top: 30px;
    }

    .ssju-not-card-header i {
        margin-bottom: 17px;
        font-size: 19px;
    }

    .ssju-not-card-header h3 {
        font-size: 20px;
    }

    .ssju-not-scroll {
        padding: 0 20px;
    }

    .ssju-not-item {
        gap: 10px;
        margin-bottom: 18px;
    }

    .ssju-not-item::before {
        width: 20px;
        height: 11px;
        margin-top: 7px;
    }

    .ssju-not-item a {
        font-size: 16px;
        line-height: 1.4;
    }

    .ssju-not-view-btn {
        min-width: 105px;
        font-size: 15px;
        padding: 9px 15px;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 400px) {

    .ssju-not-heading h2 {
        font-size: 24px;
    }

    .ssju-not-card {
        height: 440px;
        border-radius: 10px;
    }

    .ssju-not-card-header {
        padding: 27px 15px 12px;
    }

    .ssju-not-card-header h3 {
        font-size: 18px;
    }

    .ssju-not-scroll {
        padding: 0 15px;
    }

    .ssju-not-item a {
        font-size: 15px;
    }
}


/* =========================================
   ACCESSIBILITY
========================================= */

@media (prefers-reduced-motion: reduce) {

    .ssju-not-track {
        animation: none;
    }
}


/* =========================================================
   SSJU GALLERY
========================================================= */

.ssju-gall-section {

    position: relative;

    width: 100%;

    padding: 75px 0 80px;

    background: #ffffff;

    overflow: hidden;
}


/* =========================================================
   HEADING
========================================================= */

.ssju-gall-heading {

    margin-bottom: 38px;
}


.ssju-gall-subtitle {

    display: block;

    margin-bottom: 4px;

    color: var(--primary-color);

    font-family:
        Arial,
        sans-serif;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.ssju-gall-title {

    margin: 0;

    color: var(--secondary-color);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 42px;

    font-weight: 500;

    line-height: 1.15;
}


.ssju-gall-line {

    width: 60px;

    height: 3px;

    margin: 13px auto 14px;

    background: var(--secondary-color);
}


.ssju-gall-description {

    margin: 0;

    color: #777;

    font-family:
        Arial,
        sans-serif;

    font-size: 14px;
}


/* =========================================================
   CARD
========================================================= */

.ssju-gall-card {

    position: relative;

    width: 100%;

    overflow: hidden;

    border-radius: 6px;

    background: #111;

}


.ssju-gall-open {

    position: relative;

    display: block;

    width: 100%;

    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;

    overflow: hidden;
}


.ssju-gall-card-image {

    display: block;

    width: 100%;

    height: 280px;

    object-fit: cover;

    transition:
        transform .5s ease;
}


.ssju-gall-card:hover
.ssju-gall-card-image {

    transform: scale(1.06);
}


/* =========================================================
   OVERLAY
========================================================= */

.ssju-gall-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: flex-end;

    padding: 20px;

    text-align: left;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.82) 0%,
            rgba(0,0,0,.42) 42%,
            rgba(0,0,0,0) 75%
        );

    pointer-events: none;
}


.ssju-gall-card-content {

    width: 100%;
}


.ssju-gall-card-content h3 {

    margin: 0 0 8px;

    color: #fff;

    font-family:
        "Noto Sans Devanagari",
        Arial,
        sans-serif;

    font-size: 16px;

    font-weight: 500;

    line-height: 1.45;
}


.ssju-gall-card-content span {

    display: flex;

    align-items: center;

    gap: 7px;

    color: rgba(255,255,255,.85);

    font-family:
        Arial,
        sans-serif;

    font-size: 12px;
}


.ssju-gall-card-content span i {

    font-size: 12px;
}


/* =========================================================
   VIEW MORE
========================================================= */

.ssju-gall-more-wrap {

    display: flex;

    justify-content: center;

    margin-top: 35px;
}


.ssju-gall-more-btn {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 12px 24px;

    border: 0;

    border-radius: 30px;

    color: #fff;

    background: #008b50;

    font-family:
        Arial,
        sans-serif;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background .25s ease,
        transform .25s ease;
}


.ssju-gall-more-btn:hover {

    background: #006d3e;

    transform: translateY(-2px);
}


/* =========================================================
   MODAL
========================================================= */

.ssju-gall-modal {

    --bs-modal-width: 1100px;
}

/* Dark overlay outside modal */
.ssju-gall-modal::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: -1;
}


.ssju-gall-modal .modal-dialog {

    max-width: 1100px;

    margin: 20px auto;
}


.ssju-gall-modal-content {

    position: relative;

    padding: 55px 20px 20px;

border: 0 !important;

    border-radius: 14px;

    background: transparent !important;

    overflow: hidden;
}


/* =========================================================
   CLOSE
========================================================= */

.ssju-gall-close {

    position: absolute;

    top: 15px;

    right: 15px;

    z-index: 20;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 38px;

    height: 38px;

    border: 0;

    border-radius: 50%;

    color: #222;

    background: #fff;

    box-shadow:
        0 3px 15px rgba(0,0,0,.15);

    cursor: pointer;

    transition:
        transform .2s ease;
}


.ssju-gall-close:hover {

    transform: rotate(90deg);
}


/* =========================================================
   DATE
========================================================= */

.ssju-gall-date {

    position: absolute;

    top: 15px;

    left: 20px;

    z-index: 10;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 15px;

    border-radius: 30px;

    color: #008b50;

    background: #e7f8f2;

    font-family:
        Arial,
        sans-serif;

    font-size: 12px;

    font-weight: 600;
}


/* =========================================================
   MAIN IMAGE
========================================================= */

.ssju-gall-main {

    position: relative;

    width: 100%;

    height: 650px;

    overflow: hidden;

    border-radius: 8px;

    background: #111;
}


.ssju-gall-main img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: contain;

    background: #111;
}


/* =========================================================
   MAIN NAVIGATION
========================================================= */

.ssju-gall-nav {

    position: absolute;

    top: 50%;

    z-index: 5;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 48px;

    height: 48px;

    margin-top: -24px;

    border: 0;

    border-radius: 50%;

    color: #222;

    background: #fff;

    box-shadow:
        0 3px 15px rgba(0,0,0,.25);

    cursor: pointer;

    transition:
        transform .2s ease,
        background .2s ease;
}


.ssju-gall-nav:hover {

    background: #008b50;

    color: #fff;

    transform: scale(1.08);
}


.ssju-gall-prev {

    left: 18px;
}


.ssju-gall-next {

    right: 18px;
}


/* =========================================================
   MAIN CAPTION
========================================================= */

.ssju-gall-main-caption {

    position: absolute;

    right: 0;

    bottom: 0;

    left: 0;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 20px;

    padding: 60px 28px 22px;

    color: #fff;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.85),
            rgba(0,0,0,0)
        );

    font-family:
        "Noto Sans Devanagari",
        Arial,
        sans-serif;
}


#ssjuGallCaption {

    max-width: 80%;

    font-size: 17px;

    font-weight: 500;

    line-height: 1.5;
}


.ssju-gall-counter {

    flex-shrink: 0;

    font-family:
        Arial,
        sans-serif;

    font-size: 14px;

    font-weight: 600;
}


/* =========================================================
   THUMBNAILS
========================================================= */

.ssju-gall-thumbs-wrap {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 12px;
}


.ssju-gall-thumbs {

    display: flex;

    align-items: center;

    gap: 7px;

    flex: 1;

    min-width: 0;

    overflow-x: auto;

    scrollbar-width: thin;

    padding: 2px 0 7px;
}


.ssju-gall-thumbs::-webkit-scrollbar {

    height: 4px;
}


.ssju-gall-thumbs::-webkit-scrollbar-thumb {

    background: #bbb;

    border-radius: 10px;
}


.ssju-gall-thumb {

    position: relative;

    flex: 0 0 95px;

    height: 65px;

    padding: 0;

    border: 2px solid transparent;

    border-radius: 4px;

    background: transparent;

    overflow: hidden;

    cursor: pointer;

    opacity: .75;

    transition:
        opacity .2s ease,
        border-color .2s ease;
}


.ssju-gall-thumb img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;
}


.ssju-gall-thumb:hover {

    opacity: 1;
}


.ssju-gall-thumb.active {

    border-color: #008b50;

    opacity: 1;
}


.ssju-gall-thumb-nav {

    flex: 0 0 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 32px;

    height: 32px;

    border: 0;

    border-radius: 50%;

    color: #333;

    background: #eee;

    cursor: pointer;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .ssju-gall-section {

        padding: 60px 0 65px;
    }


    .ssju-gall-card-image {

        height: 260px;
    }


    .ssju-gall-main {

        height: 520px;
    }


    #ssjuGallCaption {

        font-size: 15px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .ssju-gall-section {

        padding: 45px 0 55px;
    }


    .ssju-gall-heading {

        margin-bottom: 28px;
    }


    .ssju-gall-title {

        font-size: 34px;
    }


    .ssju-gall-description {

        padding: 0 15px;

        font-size: 13px;

        line-height: 1.6;
    }


    .ssju-gall-card-image {

        height: 240px;
    }


    .ssju-gall-overlay {

        padding: 15px;
    }


    .ssju-gall-card-content h3 {

        font-size: 14px;

        line-height: 1.4;
    }


    .ssju-gall-card-content span {

        font-size: 11px;
    }


    /* Modal */

    .ssju-gall-modal .modal-dialog {

        margin: 8px;

        max-width: none;
    }


    .ssju-gall-modal-content {

        padding: 55px 8px 10px;

        border-radius: 10px;
    }


    .ssju-gall-date {

        top: 12px;

        left: 10px;

        max-width: calc(100% - 60px);

        padding: 7px 10px;

        font-size: 10px;
    }


    .ssju-gall-close {

        top: 10px;

        right: 10px;

        width: 34px;

        height: 34px;
    }


    .ssju-gall-main {

        height: 65vh;

        min-height: 350px;

        border-radius: 6px;
    }


    .ssju-gall-nav {

        width: 38px;

        height: 38px;

        margin-top: -19px;
    }


    .ssju-gall-prev {

        left: 8px;
    }


    .ssju-gall-next {

        right: 8px;
    }


    .ssju-gall-main-caption {

        padding: 50px 15px 15px;

        gap: 10px;
    }


    #ssjuGallCaption {

        max-width: 75%;

        font-size: 13px;

        line-height: 1.4;
    }


    .ssju-gall-counter {

        font-size: 11px;
    }


    .ssju-gall-thumb {

        flex-basis: 75px;

        height: 52px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .ssju-gall-section {

        padding: 38px 0 45px;
    }


    .ssju-gall-title {

        font-size: 30px;
    }


    .ssju-gall-card-image {

        height: 220px;
    }


    .ssju-gall-main {

        height: 60vh;

        min-height: 300px;
    }


    .ssju-gall-nav {

        width: 34px;

        height: 34px;

        font-size: 11px;
    }


    #ssjuGallCaption {

        font-size: 12px;
    }


    .ssju-gall-thumb {

        flex-basis: 68px;

        height: 47px;
    }

}