:root {
    /*--green: #4E9E71;
    --mandarine: #FF6B00;
    --strawberry-red: #C31C4A;
    --viola: #773DBD;
    --teal: #007580;*/
    --black: #000000;
    --white: #ffffff;
    --silver: #8c9091;
    --green: #00843D;
    --mandarine: #B94700;
    --strawberry-red: #76232F;
    --viola: #595478;
    --teal: #007680;
    --light-green: #EDF5F1;
    --gray: #8E9093;
    --facebook: #1877F2;
    --x: #000000;
    --instagram: #833AB4;
    --youtube: #FF0000;
    --bg1: #F1F2F2;
    --bg2: #EBECEC;
    --bg3: #B7B7B7;
    --bg4: #EFEFEF;
    --bg5: #D9D9D9;
    --bg6: #EBEBEB;
    --bg7: #999999;
    --font-family: "Gotham";
    --lightorange: #ffe1cc;
    --opacity: 0.4;
    --mandarine-rgb: 255, 107, 0;
    --strawberry-red-rgb: 195, 28, 74;
    --viola-rgb: 119, 61, 189;
    --teal-rgb: 0, 117, 128;
    --silver-rgb: 140, 144, 145;
    --burgundy: #76232E;
    --lightburgundy: rgba(118, 35, 47, 0.3);
    --purple: #58517B;
    --lightpurple: rgba(88, 81, 123, 0.3);
    --teal: #007680;
    --teal-light: rgba(0, 118, 128, 0.3);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

main {
    margin-top: 180px;
}

body {
    font-family: var(--font-family);
}

a {
    color: var(--green);
    text-decoration: none;
}

.section {
    margin-top: 100px;
}


/* .section:last-child {
    margin-bottom: 100px;
} */
h1, h2, h3, h4, h5, p {
    margin-bottom: 20px;
}

.w-20 {
    width: 20% !important;
}

.link {
    color: var(--green);
    text-decoration: none;
    font-weight: bold;
}

.quote .container {
    background-color: var(--light-green);
    padding: 50px;
    border-radius: 12px;
}

.quote-custom {
    border-radius: 12px;
}

.quote-weight {
    font-weight: 400;
    line-height: 1.5;
}

.link-dhaka {
    color: var(--mandarine) !important;
}

.dhaka-links a {
    color: var(--mandarine) !important;
}

.link-mombasa {
    color: var(--teal) !important;
}

.breadcrumb-wrapper {
    background-color: var(--bg4);
    padding: 25px 0px;
}

.menu-margin .breadcrumb-wrapper {
    margin-top: 263px !important;
}

.breadcrumb-separator {
    padding: 0px 7.5px;
    font-weight: 400;
}

.breadcrumb-item {
    font-weight: 400;
}

.banner-slider {
    position: relative;
}

    .banner-slider img {
        position: relative;
        width: 2560px !important;
        height: 700px;
    }

    .banner-slider .swiper-controls {
        position: absolute;
        bottom: 50px;
        right: 300px;
        display: flex;
        gap: 10px;
        z-index: 10;
    }

    .banner-slider .swiper-button-next, .banner-slider .swiper-button-prev {
        position: static;
        color: #ccc;
    }

        .banner-slider .swiper-button-next:after, .banner-slider .swiper-button-prev:after {
            font-size: 24px;
        }

    .banner-slider .swiper-pagination {
        position: static;
        display: flex;
        gap: 5px;
        width: auto;
    }

    .banner-slider .slider-content {
        background-color: var(--bg1);
        position: absolute;
        bottom: 0px;
        width: 100%;
        padding: 30px 0px;
    }

        .banner-slider .slider-content p {
            width: 75%;
        }

.swiper-pagination-bullet {
    border-radius: 0px;
    width: 20px;
    height: 3px;
}

.swiper-pagination-bullet-active {
    background-color: var(--green);
}

.slide {
    position: relative;
}

    .slide img {
        position: relative;
    }

    .slide .slide-content {
        background-color: var(--bg1);
        position: absolute;
        bottom: 0px;
        width: 100%;
        padding: 40px 0px;
    }

.accordion .panel {
    border: none;
    border-radius: 5px;
    box-shadow: none;
    margin-bottom: 10px;
    background: transparent;
}

.accordion .panel-heading {
    padding: 0;
    border: none;
    border-radius: 5px;
    background: transparent;
    position: relative;
}

.accordion .accordion-button {
    display: block;
    padding: 20px 30px;
    margin: 0;
    background: var(--white);
    font-size: 16px;
    font-weight: bold;
    color: var(--black);
    border: 1px solid #495057;
    border-radius: 5px;
    position: relative;
    box-shadow: none;
}

    .accordion .accordion-button:not(.collapsed) {
        color: var(--white);
        background-color: var(--green);
        border-radius: 10px 10px 0px 0px;
    }

/*.accordion .panel-title a:before,
.accordion .panel-title a.collapsed:before {
    content: "\f139";
    font-family: "Font Awesome 6 Pro";
    width: 30px;
    height: 30px;
    line-height: 27px;
    text-align: center;
    font-size: 25px;
    font-weight: 900;
    color: var(--white);
    position: absolute;
    top: 15px;
    right: 30px;
    transform: rotate(0deg);
    transition: all .4s cubic-bezier(0.080, 1.090, 0.320, 1.275);
}

.accordion .panel-title a.collapsed:before {
    color: var(--black);
    transform: rotate(180deg);
}*/

.accordion .panel-title a:before,
.accordion .panel-title a.collapsed:before {
    content: "\f139";
    font-family: "Font Awesome 6 Pro";
    width: 30px;
    height: 30px;
    line-height: 27px;
    text-align: center;
    font-size: 25px;
    font-weight: 900;
    color: var(--white);
    position: absolute;
    top: 15px;
    right: 30px;
    transform: rotate(180deg); /* ← changed */
    transition: all .4s cubic-bezier(0.080, 1.090, 0.320, 1.275);
}

.accordion .panel-title a.collapsed:before {
    color: var(--black);
    transform: rotate(0deg); /* ← changed */
}

.accordion .panel-body {
    padding: 20px 30px;
    background: var(--white);
    font-size: 16px;
    color: var(--black);
    border-bottom: 1px solid #495057;
    border-left: 1px solid #495057;
    border-right: 1px solid #495057;
    border-radius: 0px 0px 10px 10px;
}

.accordion .show .panel-body {
    border-radius: 0px 0px 10px 10px;
}

.accordion .panel-title {
    margin-bottom: 0px;
}

.btn-green {
    border: 2px solid var(--green);
    border-radius: 15px;
    /*text-transform: uppercase;*/
    color: var(--green) !important;
    padding: 6px 12px;
}

    .btn-green:hover {
        border: 2px solid var(--green);
        color: var(--white) !important;
        background-color: var(--green) !important;
    }

.spotlights .card {
    border-radius: 10px;
    border: 1px solid transparent;
}

    .spotlights .card img {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

.spotlights .card-body {
    padding: 20px 40px;
}

.accordion .card {
    border: 1px solid transparent;
}

/* Keep overflow hidden so zoom stays inside */
.spotlights-swiper .card {
    overflow: hidden;
}

    /* Smooth animation */
    .spotlights-swiper .card img {
        transition: transform 1.2s ease, filter 1.2s ease;
        transform-origin: center;
    }

        /* Zoom only when the mouse is on the image */
        .spotlights-swiper .card img:hover {
            transform: scale(1.08) translateY(-4px);
        }

/* .img-fluid {
    max-width: 100%;
    height: auto;
    border-radius: 15px;
} */
.img-custom {
    max-width: 100% !important;
}

.content-border {
    border-radius: 12px;
}

/* Start Header */

/* 1. Theme Variables - Define colors once */
.dhaka-nav {
    --academy-color: var(--mandarine);
}

.hyderabad-nav {
    --academy-color: var(--purple);
}

.mombasa-nav {
    --academy-color: var(--teal);
}

.maputo-nav {
    --academy-color: var(--burgundy);
}

/* 2. Global Header & Containers */
header .container {
    padding: 0px;
}

header .navbar {
    padding: 30px 0px;
    background-color: var(--white);
    transition: all 0.3s ease;
}

.logo {
    width: 110px;
    transition: width 0.3s ease, padding 0.3s ease;
}

/* 3. Single Navbar Swap - No flicker (server-side rendered class) */
.main-nav-items {
    display: contents;
}

.academy-nav-items {
    display: none;
}

.is-academy .main-nav-items {
    display: none;
}

.is-academy .academy-nav-items {
    display: contents;
}

/* 5. Nav Link Styles */
.offcanvas-body .nav-item .nav-link {
    color: var(--black);
    font-weight: 500;
    font-size: 16px;
}

    .offcanvas-body .nav-item .nav-link.active {
        color: var(--green);
    }

.offcanvas-body .main-nav .nav-item .nav-link {
    text-decoration: none;
    transition: 0.4s;
    position: relative;
}

.offcanvas-body .main-nav .nav-item a.nav-link::before {
    content: "";
    position: absolute;
    width: 0;
    height: 4px;
    background-color: var(--green);
    bottom: 0;
    left: 0;
    transition: width 0.4s;
}

.offcanvas-body .main-nav .nav-item a.nav-link:hover::before {
    width: 100%;
}

/* 6. Academy Active/Hover Colors in Single Navbar */
.is-academy .main-nav .nav-item .nav-link.active {
    color: var(--academy-color) !important;
}

.is-academy .main-nav .nav-item a.nav-link::before {
    background-color: var(--academy-color, var(--green));
}

.is-academy .main-nav .dropdown-item.active,
.is-academy .main-nav .dropdown-item:active {
    background-color: var(--academy-color) !important;
    color: var(--white) !important;
}

.is-academy .main-nav .dropdown-item:hover,
.is-academy .main-nav .nav-link:hover {
    color: var(--academy-color) !important;
    background-color: transparent !important;
}

/* 7. Search Icon */
.fa-magnifying-glass {
    color: var(--green);
}

.is-academy .fa-magnifying-glass {
    color: var(--academy-color) !important;
}
/* 8. Scrolled State */
header.scrolled .navbar {
    padding: 0px 0px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

header.scrolled .logo {
}

/* 9. Dropdowns & UI Elements */
header .dropdown-item {
    padding: 1rem;
}

    header .dropdown-item:focus,
    header .dropdown-item:hover {
        color: var(--green);
        background-color: transparent;
    }

    header .dropdown-item.active,
    header .dropdown-item:active {
        background-color: var(--green);
        color: var(--white);
    }

header .dropdown-menu {
    background-color: var(--white);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: none;
}

/* 10. Buttons */
.btn-menu {
    border: 2px solid var(--green);
    border-radius: 15px;
    text-transform: uppercase;
    color: var(--green) !important;
    padding: 6px 12px;
}

    .btn-menu:hover {
        background-color: var(--green);
        color: var(--white) !important;
    }

.is-academy .btn-menu {
    border: 2px solid var(--academy-color);
    border-radius: 15px;
    text-transform: uppercase;
    color: var(--academy-color) !important;
    padding: 6px 12px;
}

    .is-academy .btn-menu:hover {
        background-color: var(--academy-color);
        color: var(--white) !important;
    }

/* 11. Dropdown Toggle Arrow */
.dropdown-toggle-split-custom {
    background: none !important;
    border: none !important;
    color: inherit !important;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

    .dropdown-toggle-split-custom::after {
        display: none;
    }

    .dropdown-toggle-split-custom i {
        transition: transform 0.3s ease;
    }

    .dropdown-toggle-split-custom[aria-expanded="true"] i {
        transform: rotate(180deg);
    }

    .dropdown-toggle-split-custom:focus {
        outline: none;
        box-shadow: none;
    }

/* 12. Desktop Dropdown Hover */
@media (min-width: 1200px) {
    .dropdown:hover > .dropdown-menu {
        display: block;
    }
}

/* 13. Mobile Dropdown Smooth Animation */
@media (max-width: 1199px) {
    .dropdown-menu {
        max-height: 0;
        overflow: hidden;
        display: block !important;
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, padding 0.3s ease;
        opacity: 0;
        box-shadow: none !important;
        padding: 0 !important;
        position: static !important;
        width: 100%;
        border: none;
    }

        .dropdown-menu.open {
            max-height: 500px;
            opacity: 1;
            padding: 8px 0 !important;
        }

    .dropdown-item {
        display: inline-block;
        width: 85%;
        padding: 10px 20px !important;
        white-space: normal;
    }
}

/* Mobile Search Input - Bottom Line Only */
.search-input-mobile {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid #ccc !important; /* The line below */
    border-radius: 0 !important;
    padding-left: 0 !important;
    color: inherit;
}

    .search-input-mobile:focus {
        box-shadow: none !important;
        border-bottom: 1px solid var(--green) !important; /* Darker line on focus */
    }

.is-academy .search-input-mobile:focus {
    box-shadow: none !important;
    border-bottom: 1px solid var(--academy-color) !important; /* Darker line on focus */
}

.search-container-mobile {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon-mobile {
    position: absolute;
    right: 0;
    color: #666;
    pointer-events: none;
}

/* Ensure the language menu follows the same behavior as your existing dropdowns */
.mobile-extras .dropdown-menu {
    display: none;
    list-style: none;
    padding-left: 1.5rem;
    border: none;
}

/* Show/Hide logic */
@media (min-width: 1200px) {
    .mobile-extras {
        display: none !important;
    }
}

/* End Header */


/* 9. Dropdowns & UI Elements */
/*.dropdown:hover > .dropdown-menu {
    display: block;
}

.dropdown > .dropdown-toggle:active {
    pointer-events: none;
}

.dropdown-toggle::after {
    transition: transform 0.2s ease-in-out;
    vertical-align: middle;
}

.dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

header .dropdown-item {
    padding: 1rem;
}

header .dropdown-item:focus,
header .dropdown-item:hover {
    color: var(--green);
}

header .dropdown-item.active,
header .dropdown-item:active {
    background-color: var(--green);
    color: var(--white);
}

header .dropdown-menu {
    background-color: var(--white);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: none;*/
/*margin-top: 6px;*/
/*}*/

/* 10. Buttons */
/*.btn-menu {
    border: 2px solid var(--green);
    border-radius: 15px;
    text-transform: uppercase;
    color: var(--green) !important;
    padding: 6px 12px;
}

.btn-menu:hover {
    background-color: var(--green);
    color: var(--white) !important;
}*/

/* 11. Responsive */
/*@media (max-width: 1199px) {
    .dropdown-menu {
        position: static !important;
        width: 100%;
        border: none;
    }

    .dropdown-item {
        display: inline-block;
        width: 85%;
        padding: 10px 20px !important;
        white-space: normal;
    }
}*/

/* Remove these old ones */
/*.dropdown > .dropdown-toggle:active {
    pointer-events: none;
}

.dropdown-toggle::after {
    transition: transform 0.2s ease-in-out;
    vertical-align: middle;
}

.dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}*/

/* Add these new ones */
/*.dropdown-toggle-split-custom {
    background: none !important;
    border: none !important;
    color: inherit !important;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

    .dropdown-toggle-split-custom::after {
        display: none;
    }

    .dropdown-toggle-split-custom i {
        transition: transform 0.3s ease;
    }

    .dropdown-toggle-split-custom[aria-expanded="true"] i {
        transform: rotate(180deg);
    }

    .dropdown-toggle-split-custom:focus {
        outline: none;
        box-shadow: none;
    }*/

/* Mobile dropdown smooth animation */
/*@media (max-width: 1199px) {
    .dropdown-menu {
        max-height: 0;
        overflow: hidden;
        display: block !important;
        transition: max-height 0.3s ease;
        box-shadow: none !important;
        padding: 0 !important;
        position: static !important;
        width: 100%;
        border: none;
    }

        .dropdown-menu.open {
            max-height: 250px;
        }

    .dropdown-item {
        display: inline-block;
        width: 85%;
        padding: 10px 20px !important;
        white-space: normal;
    }*/

/* Remove this old hover rule on mobile */
/*.dropdown:hover > .dropdown-menu {
        display: block;
    }
}*/

/* Start Home */

.slider .swiper-button-next, .swiper-rtl .swiper-button-prev {
    right: 70px;
    left: auto;
    color: var(--white);
}

.slider .swiper-button-prev, .swiper-rtl .swiper-button-next {
    left: 70px;
    right: auto;
    color: var(--white);
}

.slider .swiper-pagination {
    position: relative;
    margin-top: 25px;
}

.slider .slider-content {
    background-color: var(--bg1);
    padding: 30px 0px;
}

.swiper-pagination-bullet {
    border-radius: 0px;
    width: 40px;
    height: 3px;
}

.swiper-pagination-bullet-active {
    background-color: var(--green);
}

p.green {
    color: var(--green);
}

.hex-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.hex-row {
    display: flex;
    gap: 20px;
}

    .hex-row.offset {
        margin-top: -40px;
        margin-left: 0px;
    }

.circle-row {
    display: flex;
}

.hex {
    position: relative;
    width: 185px;
    aspect-ratio: 1.0;
    background-color: transparent; /* Let HTML handle the base color */
    clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    transition: transform 0.3s ease;
    overflow: hidden;
}

    /* Bottom-to-top hover overlay */
    .hex::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: translateY(100%);
        z-index: 1;
        clip-path: inherit;
        transition: transform 0.4s ease;
        pointer-events: none;
    }

    .hex:hover::before {
        transform: translateY(0);
    }

    .hex:hover {
        transform: scale(1.05) translateY(-5px);
    }

.hex1::before {
    background-color: #76232f !important;
}

.hex2::before {
    background-color: #b94700 !important;
}

.hex3::before {
    background-color: #595478 !important;
}

.hex4::before {
    background-color: #00843d !important;
}

.hex5::before {
    background-color: #999999 !important;
}

.hex6::before {
    background-color: #007680 !important;
}

.hex7::before {
    background-color: #76232f !important;
}

.hex-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 10px;
    color: #fff;
}

    .hex-content a {
        text-decoration: none;
    }

.icon {
    margin-bottom: 8px;
}

.label {
    font-weight: 900;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--white);
}

.spotlights {
    background-color: var(--bg2);
    padding: 50px 0px;
    margin-bottom: 0px !important;
}

.spotlights-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.spotlights-link {
    color: var(--green);
    font-weight: bold;
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 48px;
}

.spotlights-content, spotlight-content,
.dhaka-spotlights .spotlight-content {
    /*margin-bottom: 15px;
    font-weight: 400;
    display: -webkit-box;*/
    /*-webkit-line-clamp: 1;*/
    /*-webkit-box-orient: vertical;
    overflow: hidden;*/
    margin-bottom: 12px;
    font-weight: 400;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*.spotlights-read-more {
    color: var(--green);*/
/* font-weight: bold; */
/*margin-bottom: 0px;
    text-decoration: none;
}*/
.spotlights-read-more {
    margin-top: auto;
    align-self: flex-start;
    font-weight: bold;
    text-decoration: none;
    color: var(--green);
}

.spotlights-swiper .card {
    border: 1px solid transparent;
    border-radius: 10px;
}

.spotlights-swiper .card-body {
    padding: 20px 40px;
}

.spotlights-swiper img {
    border-radius: 10px 10px 0px 0px;
}

.spotlights-header .nav {
    margin-left: 40px;
}

.spotlights .swiper-button-next, .spotlights .swiper-button-prev {
    position: relative;
    width: 20px;
    height: 20px;
    color: var(--green);
    margin-top: 0px;
    font-weight: bold;
}

    .spotlights .swiper-button-next:after, .spotlights .swiper-button-prev:after {
        font-size: 20px;
    }

.spotlights .swiper-button-next, .swiper-rtl .swiper-button-prev {
    right: -25px;
    left: auto;
}

.spotlights .swiper-button-prev, .swiper-rtl .swiper-button-next {
    left: -30px;
    right: auto;
}

/* .spotlights .nav-pills .nav-item {
    margin: 0px 20px;
} */

.spotlights .nav-pills .nav-link {
    color: var(--gray);
    font-size: 24px;
    font-weight: 500;
    padding: 0px;
}

    .spotlights .nav-pills .nav-link.active {
        background-color: transparent;
        color: var(--black);
        border-bottom: 1px solid var(--black);
        display: inline-block;
        border-radius: 0px;
    }

.view-link {
    border: 2px solid var(--green);
    border-radius: 15px;
    text-transform: uppercase;
    color: var(--green);
    text-decoration: none;
    padding: 12px 15px;
    margin-top: 20px;
}

    .view-link:hover {
        border: 2px solid var(--green);
        color: var(--white) !important;
        background-color: var(--green);
    }

.spotlights-pulse {
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: var(--green); /* optional */
}

    .spotlights-pulse::before {
        content: "";
        position: absolute;
        width: 0;
        height: 2px; /* adjust thickness if needed */
        background-color: var(--green);
        bottom: 0;
        left: 0;
        transition: width 0.4s;
    }

    .spotlights-pulse:hover::before {
        width: 100%;
    }


/* End Home */

/* Start About Us */

.circle {
    width: 150px;
    height: 150px;
    display: block;
    margin: 0 auto 20px;
    border-radius: 50%;
    padding: 50px;
    text-align: center;
    align-content: center;
}

    .circle i {
        font-size: 40px;
        color: var(--white);
    }

.circle-mombasa {
    width: 150px;
    height: 150px;
    display: block;
    margin: 0 auto 20px;
    border-radius: 50%;
    padding: 50px;
    text-align: center;
    align-content: center;
    background-color: var(--teal) !important;
}

    .circle-mombasa i {
        font-size: 40px;
        color: var(--white);
    }

.circle-about-us {
    background-color: var(--viola);
}

.circle-our-programme {
    background-color: var(--silver);
}

.circle-our-community {
    background-color: var(--mandarine);
}

.circle-admission {
    background-color: var(--strawberry-red);
}

.circle-work-with-us {
    background-color: var(--teal);
}

.circle-donate {
    background-color: var(--viola);
}

.find-more h5 {
    color: var(--black);
}

.circle, .circle-mombasa {
    transition: transform 0.3s ease;
}

    .circle i, .circle-mombasa i {
        transition: transform 0.3s ease;
    }

    .circle:hover, .circle-mombasa:hover {
        transform: scale(1.05);
    }

        .circle:hover i, .circle-mombasa:hover i {
            transform: scale(1.2);
        }


/* End About Us */

/* Start Quick Facts */

.quick-facts-1 h3, .quick-facts-1 h5 {
    color: var(--strawberry-red);
    margin-bottom: 10px;
}


.quick-facts-2 h3, .quick-facts-2 h5 {
    color: var(--mandarine);
    margin-bottom: 10px;
}

.mombasa-quick-facts-2 h3, .mombasa-quick-facts-2 h5 {
    color: var(--purple);
    margin-bottom: 10px;
}

.quick-facts-3 h3, .quick-facts-3 h5 {
    color: var(--viola);
    margin-bottom: 10px;
}

.quick-facts-4 h3, .quick-facts-4 h5 {
    color: var(--teal);
    margin-bottom: 10px;
}

/*for Dhaka */

.dhaka .quick-facts-1 h3, .dhaka .quick-facts-1 h5 {
    color: var(--strawberry-red);
    margin-bottom: 10px;
}


.dhaka .quick-facts-2 h3, .dhaka .quick-facts-2 h5 {
    color: var(--teal);
    margin-bottom: 10px;
}

.dhaka .quick-facts-3 h3, .dhaka .quick-facts-3 h5 {
    color: var(--viola);
    margin-bottom: 10px;
}

.dhaka .quick-facts-1 i {
    color: var(--strawberry-red);
    font-size: 48px;
    margin-bottom: 10px;
}

.dhaka .quick-facts-2 i {
    color: var(--teal);
    font-size: 48px;
    margin-bottom: 10px;
}

.dhaka .quick-facts-3 i {
    color: var(--viola);
    font-size: 48px;
    margin-bottom: 10px;
}

/*.dhaka .quick-facts-4 h3, .dhaka .quick-facts-4 h5 {
    color: var(--teal);
    margin-bottom: 10px;
}*/


.border-green {
    /*border-right: 5px solid var(--green);*/
    border-right: 1px solid var(--green);
}

.border-gray {
    /*border-right: 5px solid var(--green);*/
    border-right: 1px solid var(--gray);
}

.quick-facts img {
    padding-bottom: 10px;
}

.quick-facts a {
    color: var(--black);
    font-weight: bold;
}

.quick-facts-5 h3, .quick-facts-5 h5 {
    color: var(--strawberry-red);
    margin-bottom: 10px;
}

.quick-facts-6 h3, .quick-facts-6 h5 {
    color: var(--mandarine);
    margin-bottom: 10px;
}

.quick-facts-7 h3, .quick-facts-7 h5 {
    color: var(--viola);
    margin-bottom: 10px;
}

.quick-facts-8 h3, .quick-facts-8 h5 {
    color: var(--teal);
    margin-bottom: 10px;
}

.quick-facts-1 a, .quick-facts-2 a, .quick-facts-3 a, .quick-facts-4 a, .quick-facts-5 a, .quick-facts-6 a, .quick-facts-7 a, .quick-facts-8 a {
    color: var(--black);
    font-weight: bold;
}

.quick-facts-1 i, .quick-facts-5 i {
    color: var(--strawberry-red);
    font-size: 48px;
    margin-bottom: 10px;
}

.quick-facts-2 i, .quick-facts-6 i {
    color: var(--mandarine);
    font-size: 48px;
    margin-bottom: 10px;
}

.mombasa-quick-facts-2 i {
    color: var(--purple);
    font-size: 48px !important;
    margin-bottom: 10px;
}

.quick-facts-3 i, .quick-facts-7 i {
    color: var(--viola);
    font-size: 48px;
    margin-bottom: 10px;
}

.quick-facts-4 i, .quick-facts-8 i {
    color: var(--teal);
    font-size: 48px;
    margin-bottom: 10px;
}

.quick-facts-box-icon {
    font-weight: 500;
    /*font-weight: 300;*/
}

.quick-facts-box-counter {
    font-weight: 400;
    /* font-weight: 500;
    margin: 5px;
    height: 34px;*/
}

.quick-facts-box-text {
    font-weight: 300;
    /*  font-weight: 300;
    color: black !important;
    line-height: 27px;*/
}

.quick-facts-box-link {
    font-weight: 300;
}

/*.hex-grid-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 700px;*/ /* Controls how many hexes per row */
/*margin: 0 auto;
    position: relative;
}

.hex-grid-item {
    position: relative;
    width: 185px;
    aspect-ratio: 1;
    clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    transition: transform 0.3s ease;
    overflow: hidden;
}*/

/* Honeycomb vertical offset for 2nd row */
/*.hex-grid-item:nth-child(4),
    .hex-grid-item:nth-child(5) {
        transform: translateY(-5px);
        margin-top: -50px;
    }*/

/* Optional: scale on hover */
/*.hex-grid-item:hover {
        transform: scale(1.05) translateY(-5px);
    }*/

/* Card Styling */
/*.hex-grid-item .card {
        width: 100%;
        height: 100%;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        transition: inherit;
    }

    .hex-grid-item .card-body {
        position: relative;
        z-index: 2;
        text-align: center;
        padding: 12px;
        font-size: 0.9rem;
    }

        .hex-grid-item .card-body a {
            color: white;
            text-decoration: underline;
            display: inline-block;
            margin-top: 10px;
        }*/
/* ========== HEX GRID CONTAINER ========== */
.hex-grid-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 700px; /* Controls how many hexes per row */
    margin: 0 auto;
    position: relative;
}

/* ========== HEX ITEM (HONEYCOMB SHAPE) ========== */
.hex-grid-item {
    position: relative;
    width: 220px;
    aspect-ratio: 1;
    clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    transition: transform 0.3s ease;
    overflow: hidden; /* keeps the hex shape clean */
}

    /* Slight offset for 2nd row (honeycomb staggering) */
    .hex-grid-item:nth-child(4),
    .hex-grid-item:nth-child(5) {
        transform: translateY(-5px);
        margin-top: -50px;
    }

    /* Hover scale effect */
    .hex-grid-item:hover {
        transform: scale(1.05) translateY(-5px);
    }

    /* ========== CARD INSIDE HEX ========== */
    .hex-grid-item .card {
        width: 100%;
        height: 100%;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        transition: inherit;
    }

    /* Vertically center content */
    .hex-grid-item .card-body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        text-align: center;
        position: relative;
        z-index: 2;
        padding: 12px;
        font-size: 0.9rem;
    }

        /* White text for all content */
        .hex-grid-item .card-body,
        .hex-grid-item .card-body h5,
        .hex-grid-item .card-body p,
        .hex-grid-item .card-body a {
            color: #fff;
        }

            /* ========== TEXT ANIMATION (Title vs Description) ========== */

            /* Title visible by default */
            .hex-grid-item .card-body h5 {
                opacity: 1;
                transform: translateY(0);
                transition: opacity 0.4s ease, transform 0.4s ease;
                margin: 0;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%); /* perfectly center title */
                width: 100%;
            }


            /* Description + link hidden initially */
            .hex-grid-item .card-body p,
            .hex-grid-item .card-body a {
                position: relative;
                z-index: 2;
                opacity: 0;
                transform: translateY(20px);
                transition: opacity 0.4s ease, transform 0.4s ease;
                font-size: 12px;
                /*padding-top:0px;*/
                margin-top: 9px;
                margin-bottom: 0px;
            }


    /* On hover: hide title */
    .hex-grid-item:hover .card-body h5 {
        opacity: 0;
        transform: translate(-50%, -70%); /* slide up smoothly */
    }


    /* On hover: show description + link */
    .hex-grid-item:hover .card-body p,
    .hex-grid-item:hover .card-body a {
        opacity: 1;
        transform: translateY(0);
    }

    /* Link styling */
    .hex-grid-item .card-body a {
        text-decoration: underline;
        display: inline-block;
        margin-top: 10px;
    }

/* Optional Background Colors for Each Card */
.our-programme-1 .card {
    background-color: #76232f;
}

.our-programme-2 .card {
    background-color: #b94700;
}

.our-programme-3 .card {
    background-color: #595478;
}

.our-programme-4 .card {
    background-color: #00843d;
}

.our-programme-5 .card {
    background-color: #999999;
}

.our-programme-1::before {
    background-color: #b94700;
}

.our-programme-2::before {
    background-color: #595478;
}

.our-programme-3::before {
    background-color: #00843d;
}

.our-programme-4::before {
    background-color: #999999;
}

.our-programme-5::before {
    background-color: #76232f;
}


/* Responsive Fixes */
@media (max-width: 768px) {
    .hex-grid-container {
        flex-direction: column;
        align-items: center;
    }

    .hex-grid-item {
        transform: none !important;
    }

    .circle-work-with-us, .circle {
        width: 150px;
        height: 150px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
    }

    .find-more h5 {
        font-size: 16px;
    }

    .circle
    i {
        font-size: 40px;
        position: absolute !important;
    }


    /* only this component */
    .circle-work-with-us-wrapper .row > div {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .find-more .container .row > div[class*="col-md-6"] {
        flex: 0 0 33%;
        max-width: 50%;
        padding: 1rem 0;
    }

}


/* Base card styles with transition */
.our-programme .card {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

    .our-programme .card:hover {
        transform: scale(1.05) translateY(-5px);
    }

    /* Overlay effect */
    .our-programme .card::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: translateY(100%);
        z-index: 1;
        transition: transform 0.4s ease;
        pointer-events: none;
        opacity: 0.9;
    }

    /* Reveal overlay on hover */
    .our-programme .card:hover::before {
        transform: translateY(0%);
    }

/* Keep card content above overlay */
.our-programme .card-body {
    position: relative;
    z-index: 2;
    text-align: center;
}

/* End Quick Facts */

/* Start Contact Us */

.contact-us .card {
    border: 1px solid var(--white);
    /*box-shadow: 0 0 60px 30px #00000008;*/
    border-radius: 10px;
    margin-left: -52px
}

/*.dhaka-contact-us {
    border: 1px solid var(--white);*/
/*box-shadow: 0 0 60px 30px #00000008;*/
/*border-radius: 10px;
}*/
.contact-us .card-body {
    padding: 30px 50px;
}

.contact-us .contact-left {
    background-color: var(--green);
    padding: 40px;
    border-radius: 10px;
}

.contact-left h2 {
    margin-bottom: 40px;
}

.contact-left p {
    margin-bottom: 40px;
}

.contact-left .location {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
}

/* .contact-us .contact-right {
    padding-left: 50px;
} */

.contact-right h3 {
    margin-bottom: 50px;
}

.contact-right .form-control, .contact-right .form-select {
    /*    border-bottom: 1px solid var(--black);
    border-top: 1px solid var(--white);
    border-left: 1px solid var(--white);
    border-right: 1px solid var(--white);*/
    border-radius: 0px;
    padding: 0px 0px 35px;
    margin-bottom: 45px;
}

/* End Contact Us */

/* Start Our Network */

.map-section {
    position: relative;
}

#maps {
    height: 850px;
    position: relative;
    width: 100%;
}

/*.popup-content {
    width: 300px;
    font-family: Arial, sans-serif;
    margin-top: 25px;
}

.popup-title {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 4px;
}

.popup-desc {
    font-size: 13px;
    margin-bottom: 8px;
}

.popup-link {
    color: #1da1f2;
    text-decoration: none;
    font-size: 13px;
}

.popup-video {
    display: block;
    margin-top: 8px;
    width: 100%;
    height: 150px;
    background-color: #ccc;
}*/

.mapboxgl-popup {
    max-width: 700px !important;
}

.mapboxgl-popup-close-button {
    font-size: 24px;
    right: 5px;
    top: 5px;
}

#info-content {
    display: flex;
    height: 100%;
}

    #info-content img {
        border-radius: 12px;
    }

#chartdiv {
    width: 100%;
    height: 750px;
    position: relative; /* NEW � popup will now stick to map */
}

#info-panel {
    position: absolute;
    top: 10%;
    /*left: 17%;*/
    width: 600px;
    height: 249px;
    background: #fff;
    z-index: 100;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    display: none;
    pointer-events: auto;
    border-radius: 12px;
    overflow: hidden;
    .wrap

{
    flex: 1;
    padding: 10px 14px 4px 20px;
}

}


.popup-close-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    background: #fff;
    border: none;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.25);
}

/* End Our Network */

/* Start Work With Us */

.job-card {
    background-color: var(--green);
    padding: 30px;
    border-radius: 25px;
    margin-bottom: 25px;
}

    .job-card .card-body {
        padding: 0px;
    }

    .job-card h4, .job-card a, .job-card p, .job-card i {
        color: var(--white);
    }

.view-all-link {
    border: 2px solid var(--green);
    border-radius: 15px;
    text-transform: uppercase;
    color: var(--green);
    text-decoration: none;
    padding: 12px 15px;
}

    .view-all-link:hover {
        color: var(--white);
        background-color: var(--green);
        border-color: var(--green);
    }

/* End Work With Us */

/* Start Mombasa */

.mombasa-nav .navbar-nav .nav-item .nav-link.active {
    color: var(--teal);
}

.mombasa-nav .navbar-nav .nav-item.dropdown .nav-link.active {
    color: var(--green);
}

/* End Mombasa */

/* Start The Campus Experience */

.image-section {
    padding: 50px 0px;
    background-color: var(--bg2);
}

    .image-section .card {
        background-color: transparent;
        border: 1px solid transparent;
    }

/* End The Campus Experience */

/* Start International Exchange */

.gallery {
    padding: 50px 0px;
    background-color: var(--bg2);
}

    .gallery .card {
        border: 1px solid transparent;
    }

    .gallery .card-body {
        padding: 20px 40px;
    }

/* End International Exchange */

/* Start Admissions */

.admissions {
    background-color: var(--bg2);
    padding: 50px 0px;
}

.inner-section {
    margin-top: 100px;
}

/* End Admissions */

/* Start News */

.featured-news img, .featured-news p {
    margin-bottom: 15px;
}

.news-item h5, .news-item p {
    margin-bottom: 15px;
}

.news-text {
    padding-top: 15px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

.read-more {
    margin-bottom: 15px;
    display: block;
}

.news-item {
    margin-top: 50px;
}

.border-right-green {
    border-right: 1px solid var(--green);
    padding-right: 25px;
}

.border-left-green {
    padding-left: 25px;
}

.pagination {
    margin-top: 50px;
}

.page-link {
    color: var(--black);
}

    .active > .page-link, .page-link.active {
        background-color: var(--green);
        border-color: transparent;
    }

.news-row {
    margin-top: 50px;
}

.search-filter {
    margin-top: 30px;
}

.search {
    position: relative;
    width: 48%;
    float: right;
}

    .search input {
        height: 60px;
        padding: 20px;
        text-indent: 45px;
        border: 1px solid var(--black);
    }

        .search input:focus {
            box-shadow: none;
            border: 1px solid var(--green);
        }

    .search .fa-search {
        position: absolute;
        top: 22px;
        left: 20px;
    }

    .search .form-control::placeholder {
        color: var(--black);
        font-weight: 500;
    }

.form-control:focus {
    box-shadow: none;
}

.filter {
    position: relative;
    width: 48%;
    float: left;
}

    .filter input {
        padding: 20px;
        height: 60px;
        border: 1px solid var(--black);
    }

        .filter input:focus {
            box-shadow: none;
            border: 1px solid var(--green);
        }

    .filter i {
        position: absolute;
        top: 22px;
        right: 20px;
    }

    .filter .form-control::placeholder {
        color: var(--black);
        font-weight: 500;
    }

.social-media {
    margin-top: 110px;
}

    .social-media h2 {
        margin-bottom: 35px;
    }

.twitter-news {
    margin-top: 50px;
}

    .twitter-news:first-child {
        margin-top: 35px;
    }

    .twitter-news p {
        padding-top: 20px;
        font-weight: bold;
    }

.news-right-content hr {
    border: 1px solid var(--green);
    opacity: 1;
    margin: 50px 0px;
}

.facebook-news:first-child {
    margin-top: 35px;
}

.facebook-news p {
    padding-top: 20px;
    font-weight: bold;
}

/* End News */

/* Start Spotlights */

.spotlights-row .nav-tabs {
    margin: 30px 0px;
    border: 1px solid transparent;
}

    .spotlights-row .nav-tabs .nav-item.show .nav-link, .spotlights-row .nav-tabs .nav-link.active {
        border-top: 1px solid transparent;
        border-right: 1px solid transparent;
        border-left: 1px solid transparent;
        border-bottom: 2px solid var(--black);
    }

    .spotlights-row .nav-tabs .nav-link {
        font-size: 24px;
        font-weight: bold;
        color: var(--black);
    }

        .spotlights-row .nav-tabs .nav-link:focus, .spotlights-row .nav-tabs .nav-link:hover {
            border-top: 1px solid transparent;
            border-right: 1px solid transparent;
            border-left: 1px solid transparent;
            border-bottom: 2px solid var(--black);
        }

.hyderabad-news {
    margin-top: 50px;
}

    .hyderabad-news:first-child {
        margin-top: 35px;
    }

    .hyderabad-news p {
        padding-top: 20px;
        font-weight: bold;
    }

.spotlights-right-content hr {
    border: 1px solid var(--green);
    opacity: 1;
    margin: 50px 0px;
}

.maputo-news:first-child {
    margin-top: 35px;
}

.maputo-news p {
    padding-top: 20px;
    font-weight: bold;
}

.schools {
    margin-top: 110px;
}

    .schools h2 {
        margin-bottom: 35px;
    }

/* End Spotlights */

/* Start Our Programme */

.hexagon-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.hexagon-row {
    display: flex;
    gap: 0px;
}

    .hexagon-row.offset {
        margin-top: -50px;
        margin-left: 0px;
    }

.hexagon {
    position: relative;
    width: 165px;
    aspect-ratio: 1.0;
    background-color: var(--hex-color);
    clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.hexagon1 {
    background-color: var(--teal);
}

.hexagon2 {
    background-color: var(--strawberry-red);
}

.hexagon3 {
    background-color: var(--mandarine);
}

.hexagon-content {
    text-align: center;
    padding: 10px;
}

    .hexagon-content a {
        text-decoration: none;
        color: #fff;
    }

.hexagon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(100%);
    z-index: 1;
    clip-path: inherit;
    transition: transform 0.4s ease;
}

.hexagon1:before {
    background-color: var(--strawberry-red);
}

.hexagon2:before {
    background-color: var(--mandarine);
}

.hexagon3:before {
    background-color: var(--teal);
}

.hexagon:hover::before {
    transform: translateY(0);
}

.hexagon:hover .hexagon-content {
    z-index: 10;
}

.hexagon:hover {
    transform: scale(1.05);
}

.our-programme .card-body {
    padding: 21px;
    text-align: center;
}

.our-programme a {
    color: var(--black);
}

.our-programme-1 {
    border-radius: 12px;
    border: 1px dashed var(--teal);
    background: #76232f;
}

.our-programme-2 {
    border-radius: 12px;
    border: 1px dashed var(--viola);
    background: #b94700;
}

.our-programme-3 {
    border-radius: 12px;
    border: 1px dashed var(--mandarine);
    background: #595478;
}

.our-programme-4 {
    border-radius: 12px;
    border: 1px dashed var(--strawberry-red);
    background: #00843d;
}

.our-programme-5 {
    border-radius: 12px;
    border: 1px dashed var(--silver);
    background: #999999;
}

/* Start Student Activities */
.creative-expression {
    background-color: var(--bg2);
    padding: 50px 0px;
    margin-bottom: 0px !important;
}

    .creative-expression .card {
        border-radius: 10px;
        border: 1px solid transparent;
        height: 365px;
    }

    .creative-expression .card-body {
        padding: 20px 40px;
    }

    .creative-expression .card img {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .creative-expression .swiper-button-next, .creative-expression .swiper-button-prev {
        position: relative;
        width: 20px;
        height: 20px;
        color: var(--green);
        margin-top: 0px;
        font-weight: bold;
    }

        .creative-expression .swiper-button-next:after, .creative-expression .swiper-button-prev:after {
            font-size: 20px;
        }

    .creative-expression .swiper-button-next, .swiper-rtl .swiper-button-prev {
        right: -25px;
        left: auto;
    }

    .creative-expression .swiper-button-prev, .swiper-rtl .swiper-button-next {
        left: -30px;
        right: auto;
    }


.item img {
    width: 100%;
    height: auto;
}

.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /*  overflow: auto;*/
    /*  background-color: rgba(0, 0, 0, 0.9);*/
}

.modal-box {
    margin: auto;
    display: block;
    width: 80%;
}

.close {
    color: var(--white);
    position: absolute;
    top: 15px;
    right: 35px;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

    .close:hover,
    .close:focus {
        color: var(--green);
        text-decoration: none;
        cursor: pointer;
    }

.modal-image {
    display: block;
    margin: 0 auto;
}

/* End Student Activities */
/* End Our Programme */
/* Start Our Community */
ol {
    list-style-type: lower-alpha;
}

.profile-section {
    background-color: var(--bg2);
    padding: 60px 0;
}

.news-card .news-description p:empty {
    display: none;
}

.news-card .news-description .content {
    white-space: pre;
    padding-top: 20px;
}

.news-card .news-description .Paragraph {
    margin-top: 20px;
    margin-bottom: 0px !important;
}

.profile-icon {
    /*    width: 150px;
    height: 150px;
    background-color: var(--green);
    border-radius: 50%;
    display: block;
    margin: 0 auto 25px;*/
    width: 150px;
    height: 150px;
    background-color: var(--green);
    display: block;
    margin: 0 auto 20px;
    border-radius: 50%;
    padding: 50px;
    text-align: center;
    align-content: center;
}

    .profile-icon i {
        font-size: 40px;
        color: var(--white);
        /*text-align: center;*/
        /*padding: 97px;*/
    }

.circle-pdcs {
    background-color: var(--viola);
}

.circle-our-partners {
    background-color: var(--silver);
}

.circle-alumni {
    background-color: var(--mandarine);
}

.round-image {
    /*    width: 150px;
    height: 150px;
    background-color: var(--green);
    border-radius: 50%;
    display: block;
    margin: 0 auto 25px;*/
    width: 150px;
    height: 150px;
    display: block;
    margin: 0 auto 20px;
    border-radius: 50%;
}

.round-image {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden; /* ensures no corners show */
    text-align: center;
    align-content: center;
}

    .round-image img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* keeps image proportional */
    }


/* End Our Community */

/* Start Alumni */

.keep-touch {
    background-color: var(--bg2);
    padding: 60px 0;
}

.circle-facebook {
    background-color: var(--silver);
}

.circle-instagram {
    background-color: var(--mandarine);
}

.circle-linkedin {
    background-color: var(--strawberry-red);
}

.circle-alumni-1 {
    background-color: var(--teal);
}

.partners img {
    margin-bottom: 30px;
}

/* End Alumni */

/* Start Development Centers */

.resources a {
    color: var(--black);
}

.circle-presentation {
    background-color: var(--viola);
}

.circle-teacher-notes {
    background-color: var(--silver);
}

.circle-planner {
    background-color: var(--teal);
}

.circle-materials {
    background-color: var(--strawberry-red);
}

.circle-slides {
    background-color: var(--mandarine);
}

/* End Development Centers */

/* Start Academies */

.follow-us .container {
    background-color: var(--light-green);
    padding: 50px;
}

.follow-us i {
    font-size: 36px;
}

.follow-us .fa-facebook {
    color: var(--facebook);
}

.follow-us .fa-x-twitter {
    color: var(--x);
}

.follow-us .fa-instagram {
    color: var(--instagram);
}

.follow-us .fa-youtube {
    color: var(--youtube);
}


/* End Academies */

/* Start Dhaka */

.events {
    background-color: var(--bg2);
    padding: 20px;
    margin-top: 20px;
}

.event-date {
    font-weight: 500;
    margin-bottom: 10px;
}

.events-time {
    font-weight: 500;
    margin-bottom: 10px;
}

.events-location {
    font-weight: 500;
    margin-bottom: 0px;
}

.calendar select {
    border: 2px solid var(--green);
}

.dhaka-event:hover {
    background-color: var(--mandarine);
    color: #ffffff;
    transition: 0.3s ease;
}

.selected-event {
    background-color: var(--mandarine);
    color: #ffffff;
}

.dhaka-calendar-select {
    border: 2px solid var(--mandarine) !important;
}

.hyd-calendar-select {
    border: 2px solid var(--purple) !important;
}

.dhaka-calendar a {
    color: var(--mandarine) !important;
    text-decoration: none;
}

.dhaka-calendar .fc .fc-daygrid-day.fc-day-today {
    background-color: var(--lightorange);
}

.dhaka-calendar .fc .fc-button-primary, .fc .fc-today-button:disabled,
.fc .fc-today-button.fc-button-disabled {
    background-color: var(--black);
    border-color: var(--black);
}

.dhaka-calendar .fc .fc-today-button:disabled,
.dhaka-calendar .fc .fc-today-button.fc-button-disabled {
    background-color: var(--black);
    border-color: var(--black);
    color: #fff;
    opacity: 1; /* remove faded look */
}


/* End Dhaka */
/* Start Hyderabad */
.hyderabad-nav .navbar-nav .nav-item .nav-link.active {
    color: var(--strawberry-red);
}

.hyderabad-nav .navbar-nav .nav-item.dropdown .nav-link.active {
    color: var(--green);
}

/* End Hyderabad */

/* Start Maputo */

.maputo-nav .navbar-nav .nav-item .nav-link.active {
    color: var(--burgundy);
}

.maputo-nav .navbar-nav .nav-item.dropdown .nav-link.active {
    color: var(--green);
}

/* End Maputo */

/* Start mombasa */

.mombasa-nav .navbar-nav .nav-item .nav-link.active {
    color: var(--teal);
}

.mombasa-nav .navbar-nav .nav-item.dropdown .nav-link.active {
    color: var(--green);
}

/* End mombasa */

/* Start Footer */

footer {
    background-color: var(--bg7);
    padding: 50px 0px;
}

.footer-logo {
    width: 110px;
}

footer h5 {
    color: var(--white);
    margin-bottom: 25px;
}

footer .nav-item {
    padding-bottom: 10px;
}

    footer .nav-item .nav-link {
        color: var(--white);
        padding: 0px;
        /*font-weight: bold;*/
    }

        footer .nav-item .nav-link:hover {
            color: var(--green);
        }

footer .newsletter {
    color: var(--green);
}

footer .form-control {
    border: 1px solid var(--green);
    background-color: transparent;
    color: var(--white);
    border-radius: 15px;
}

    footer .form-control:focus {
        color: var(--white);
        background-color: transparent;
        border-color: var(--green);
        outline: 0;
        box-shadow: 0 0 0 0rem rgba(13, 110, 253, .25);
    }

    footer .form-control::placeholder {
        color: var(--white);
    }

footer .btn-submit {
    background-color: var(--white);
    border: 2px solid var(--green);
    border-radius: 15px;
    color: var(--green);
}

footer .fa-brands {
    font-size: 24px;
}

.cpr-row {
    margin-top: 50px;
}

    .cpr-row p {
        text-align: center;
        color: var(--white);
        margin-bottom: 10px;
        /*font-weight: bold;*/
    }

    .cpr-row ul {
        justify-content: center;
        display: flex;
    }

        .cpr-row ul li {
            list-style: disc;
            margin: 0px 20px;
            color: var(--white);
        }

            .cpr-row ul li:first-child {
                list-style: none;
            }

            .cpr-row ul li a {
                /*font-weight: bold;*/
            }

.social-icons {
    width: 24px;
    height: 24px;
}

/* End Footer */

/* IB LInk */
.quote-link {
    Width: 15%;
    margin-top: 25px;
}

.img-width {
    width: 100%;
}

/* Duka quote */


.quote-duka .container {
    background-color: var(--lightorange);
    padding: 50px;
    border-radius: 15px;
}

.quote-mombasa .container {
    background-color: var(--teal-light);
    padding: 50px;
    border-radius: 15px;
}
/*  Duka-spotlights-link */
.spotlights-link-duka {
    color: var(--mandarine);
    font-weight: bold;
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 48px;
}

/*duka-spotlights-read-more */

.spotlights-read-more-duka {
    color: var(--mandarine);
    /* font-weight: bold; */
    margin-bottom: 0px;
    text-decoration: none;
}

.dhaka-spotlights .swiper-button-next, .dhaka-spotlights .swiper-button-prev {
    position: relative;
    width: 20px;
    height: 20px;
    color: var(--mandarine);
    margin-top: 0px;
    font-weight: bold;
}

    .dhaka-spotlights .swiper-button-next:after, .dhaka-spotlights .swiper-button-prev:after {
        font-size: 20px;
    }

.dhaka-spotlights .swiper-button-next, .swiper-rtl .swiper-button-prev {
    right: -25px;
    left: auto;
}

.dhaka-spotlights .swiper-button-prev, .swiper-rtl .swiper-button-next {
    left: -30px;
    right: auto;
}

.spotlights-pulse-dhaka {
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: var(--mandarine); /* optional */
}

    .spotlights-pulse-dhaka::before {
        content: "";
        position: absolute;
        width: 0;
        height: 2px; /* adjust thickness if needed */
        background-color: var(--mandarine);
        bottom: 0;
        left: 0;
        transition: width 0.4s;
    }

    .spotlights-pulse-dhaka:hover::before {
        width: 100%;
    }

.dhaka-view-link {
    border: 2px solid var(--mandarine);
    border-radius: 15px;
    text-transform: uppercase;
    color: var(--mandarine);
    text-decoration: none;
    padding: 12px 15px;
    margin-top: 20px;
}

    .dhaka-view-link:hover {
        border: 2px solid var(--mandarine);
        color: var(--white) !important;
        background-color: var(--mandarine);
    }

/*Mombasa View Link*/
.mombasa-view-link {
    border: 2px solid var(--teal);
    border-radius: 15px;
    text-transform: uppercase;
    color: var(--teal);
    text-decoration: none;
    padding: 12px 15px;
    margin-top: 20px;
}

    .mombasa-view-link:hover {
        border: 2px solid var(--teal);
        color: var(--white) !important;
        background-color: var(--teal);
    }

/*  btn-orange-dhaka  */
.btn-orange-dhaka {
    border: 2px solid var(--mandarine);
    border-radius: 15px;
    /*text-transform: uppercase;*/
    color: var(--mandarine) !important;
    padding: 6px 12px;
}

    .btn-orange-dhaka:hover {
        border: 2px solid var(--mandarine);
        color: var(--white) !important;
        background-color: var(--mandarine) !important;
    }
/* Btn-teal-mombasa*/
.btn-teal-mombasa {
    border: 2px solid var(--teal);
    border-radius: 15px;
    /*text-transform: uppercase;*/
    color: var(--teal) !important;
    padding: 6px 12px;
}

    .btn-teal-mombasa:hover {
        border: 2px solid var(--teal);
        color: var(--white) !important;
        background-color: var(--teal) !important;
    }

.spotlights-link-mombasa {
    color: var(--teal);
    font-weight: bold;
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 48px;
}

.spotlights-read-more-mombasa {
    margin-top: auto;
    align-self: flex-start;
    font-weight: 600;
    text-decoration: none;
    color: var(--teal);
}

.mombasa-spotlights .swiper-button-next, .mombasa-spotlights .swiper-button-prev {
    position: relative;
    width: 20px;
    height: 20px;
    color: var(--teal);
    margin-top: 0px;
    font-weight: bold;
}

.mombasa-spotlights .spotlight-content, .mombasa-spotlights .spotlights-content {
    margin-bottom: 12px;
    font-weight: 400;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mombasa-view-link {
    border: 2px solid var(--teal);
    border-radius: 15px;
    /*text-transform: uppercase;*/
    color: var(--teal);
    text-decoration: none;
    padding: 12px 15px;
    margin-top: 20px;
}

    .mombasa-view-link:hover {
        border: 2px solid var(--teal);
        color: var(--white) !important;
        background-color: var(--teal);
    }

.spotlights-pulse-mombasa {
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: var(--teal); /* optional */
}

    .spotlights-pulse-mombasa::before {
        content: "";
        position: absolute;
        width: 0;
        height: 2px; /* adjust thickness if needed */
        background-color: var(--teal);
        bottom: 0;
        left: 0;
        transition: width 0.4s;
    }

    .spotlights-pulse-mombasa:hover::before {
        width: 100%;
    }

/* accordion-duka */

.accordion .accordion-button-duka:not(.collapsed) {
    color: var(--white);
    background-color: var(--mandarine);
    border-radius: 10px 10px 0px 0px;
}

.accordion .accordion-button-mombasa:not(.collapsed) {
    color: var(--white);
    background-color: var(--teal);
    border-radius: 10px 10px 0px 0px;
}

/*Dhaka Follow Us*/
.follow-us-dhaka .container {
    background-color: var(--lightorange);
    padding: 50px;
}

.follow-us-dhaka i {
    font-size: 36px;
}

.follow-us-dhaka .fa-facebook {
    color: var(--facebook);
}

.follow-us-dhaka .fa-x-twitter {
    color: var(--x);
}

.follow-us-dhaka .fa-instagram {
    color: var(--instagram);
}

.follow-us-dhaka .fa-youtube {
    color: var(--youtube);
}

/*cricle find our more*/
.circle-dhaka {
    background-color: var(--mandarine);
}

/* Repeat for other academies similarly */


/*Action Slider Arrows */
/*Start*/

.custom-prev,
.custom-next {
    position: absolute !important;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 45px;
    height: 45px;
    border-radius: 50%;
}

.custom-prev {
    left: -20px; /* adjust as needed */
}

.custom-next {
    right: -20px; /* adjust as needed */
}

    /* Swiper built-in arrow icons */
    .custom-prev::after,
    .custom-next::after {
        font-size: 18px;
    }

/*End*/

.spotlights-readmore-bottom {
    bottom: 18px;
    position: absolute;
}


/*li space class*/



/*p space*/
.pspace {
    margin-top: 10px;
}
/*btn space*/
.spacebtn {
    margin-left: -19px;
}

.btnspace {
    margin-left: -22px;
}

.btnright {
    margin-right: 30px;
}



.link-maputo {
    color: var(--burgundy) !important;
    text-decoration: none;
    /* font-weight: bold;*/
}

.quote-maputo .container {
    background-color: var(--lightburgundy);
    padding: 50px;
    border-radius: 15px;
}

.follow-us-maputo .container {
    background-color: var(--lightburgundy);
    padding: 50px;
}

.follow-us-maputo i {
    font-size: 36px;
}

.follow-us-maputo .fa-facebook {
    color: var(--facebook);
}

.follow-us-maputo .fa-x-twitter {
    color: var(--x);
}

.follow-us-maputo .fa-instagram {
    color: var(--instagram);
}

.follow-us-maputo .fa-youtube {
    color: var(--youtube);
}

/*  Duka-spotlights-link */
.spotlights-link-maputo {
    color: var(--burgundy);
    font-weight: bold;
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 48px;
}

.spotlights-read-more-maputo {
    margin-top: auto;
    align-self: flex-start;
    font-weight: 600;
    text-decoration: none;
    color: var(--burgundy);
}

.maputo-spotlights .swiper-button-next, .maputo-spotlights .swiper-button-prev {
    position: relative;
    width: 20px;
    height: 20px;
    color: var(--burgundy);
    margin-top: 0px;
    font-weight: bold;
}

.maputo-view-link {
    border: 2px solid var(--burgundy);
    border-radius: 15px;
    /*text-transform: uppercase;*/
    color: var(--burgundy);
    text-decoration: none;
    padding: 12px 15px;
    margin-top: 20px;
}

.maputo-btn-margin {
    padding: 6px 12px !important;
}

.mombasa-btn-margin {
    padding: 6px 12px !important;
}

.hyd-btn-margin {
    padding: 6px 12px !important;
}

.dhaka-btn-margin {
    padding: 6px 12px !important;
}

.maputo-view-link:hover {
    border: 2px solid var(--burgundy);
    color: var(--white) !important;
    background-color: var(--burgundy);
}

.spotlights-pulse-maputo {
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: var(--burgundy); /* optional */
}

    .spotlights-pulse-maputo::before {
        content: "";
        position: absolute;
        width: 0;
        height: 2px; /* adjust thickness if needed */
        background-color: var(--burgundy);
        bottom: 0;
        left: 0;
        transition: width 0.4s;
    }

    .spotlights-pulse-maputo:hover::before {
        width: 100%;
    }

/*  btn-orange-dhaka  */
.btn-orange-maputo {
    border: 2px solid var(--burgundy);
    border-radius: 15px;
    /*text-transform: uppercase;*/
    color: var(--burgundy) !important;
    padding: 6px 12px;
}

    .btn-orange-maputo:hover {
        border: 2px solid var(--burgundy);
        color: var(--white) !important;
        background-color: var(--burgundy) !important;
    }

/* accordion-duka */

.accordion .accordion-button-maputo:not(.collapsed) {
    color: var(--white);
    background-color: var(--burgundy);
    border-radius: 10px 10px 0px 0px;
}

.circle-maputo {
    background-color: var(--burgundy);
}


/*social media icon hover*/
.social-link:hover,
.social-link:focus {
    color: #0d6efd; /* keeps original icon color */
    text-decoration: none;
}


. /*swiper-button-next-dhaka,  .swiper-button-prev-dhaka {
    position: relative;
    width: 20px;
    height: 20px;
    color: var(--mandarine);
    margin-top: 0px;
    font-weight: bold;
}*/
.swiper-button-prev-dhaka {
    /* position: relative;
    width: 20px;
    height: 20px;*/
    color: black !important;
    /* margin-top: 0px;*/
    font-weight: bold;
}

btspace {
    margin-right: 20;
}

.form-control.custom-input::placeholder {
    color: black;
    opacity: 1;
}


/*spotlight changes*/
.spotlights-title-dhaka {
    font-weight: 600;
    color: var(--mandarine);
    text-decoration: none;
    margin-bottom: 8px;
}

.spotlights-content {
    margin-bottom: 12px;
}

.spotlights-read-more-duka {
    margin-top: auto;
    align-self: flex-start;
    font-weight: 600;
    text-decoration: none;
    color: var(--mandarine);
}

/*Spotlight image zoom start*/
.spotlights .card img {
    transition: transform 1.2s ease, filter 1.2s ease;
    transform-origin: center;
}

.spotlight-card img {
    transition: transform 1.2s ease, filter 1.2s ease;
    transform-origin: center;
}

    .spotlight-card img:hover {
        transform: scale(1.08) translateY(-4px);
    }

.spotlights .card img:hover {
    transform: scale(1.08) translateY(-4px);
}

.spotlights .card,
.spotlight-card {
    overflow: hidden;
}
/*Spotlight image zoom end*/




.link-hydersbad {
    color: var(--purple) !important;
    text-decoration: none;
    /* font-weight: bold;*/
}

.quote-hydersbad .container {
    background-color: var(--lightpurple);
    padding: 50px;
    border-radius: 15px;
}
/*  Duka-spotlights-link */
.spotlights-link-hydersbad {
    color: var(--purple);
    font-weight: bold;
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 48px;
}
/*duka-spotlights-read-more */

/*.spotlights-read-more-hydersbad {
    color: var(--purple);*/
/*  font-weight: bold !important; */
/*margin-bottom: 0px;
    text-decoration: none;
}*/

.hydersbad-spotlights .swiper-button-next, .hydersbad-spotlights .swiper-button-prev {
    position: relative;
    width: 20px;
    height: 20px;
    color: var(--purple);
    margin-top: 0px;
    font-weight: bold;
}

.hydersbad-view-link {
    border: 2px solid var(--purple);
    border-radius: 15px;
    text-transform: uppercase;
    color: var(--purple);
    text-decoration: none;
    padding: 12px 15px;
    margin-top: 20px;
}

    .hydersbad-view-link:hover {
        border: 2px solid var(--purple);
        color: var(--white) !important;
        background-color: var(--purple);
    }

.hyderabad-spotlights .spotlight-content, .hyderabad-spotlights .spotlights-content {
    margin-bottom: 12px;
    font-weight: 400;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-orange-hyderabad {
    border: 2px solid var(--purple);
    border-radius: 15px;
    /*text-transform: uppercase;*/
    color: var(--purple) !important;
    padding: 6px 12px;
}

    .btn-orange-hyderabad:hover {
        border: 2px solid var(--purple);
        color: var(--white) !important;
        background-color: var(--purple);
    }


.circle-our-hyderabad {
    background-color: var(--purple);
}

.accordion .accordion-button-hyderabad:not(.collapsed) {
    color: var(--white);
    background-color: var(--purple);
    border-radius: 10px 10px 0px 0px;
}

/*news Fixed to 5 lines in maputo Latest News*/
.maputo-spotlights .spotlight-content, .maputo-spotlights .spotlights-content {
    margin-bottom: 12px;
    font-weight: 400;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.maputo-calendar-select {
    border: 2px solid var(--burgundy) !important;
}

.maputo-calendar a {
    color: var(--burgundy) !important;
    text-decoration: none;
}

.maputo-calendar .fc .fc-daygrid-day.fc-day-today {
    background-color: var(--lightburgundy);
}

.maputo-calendar .fc .fc-button-primary, .fc .fc-today-button:disabled,
.fc .fc-today-button.fc-button-disabled {
    background-color: var(--black);
    border-color: var(--black);
}

.maputo-calendar .fc .fc-today-button:disabled,
.maputo-calendar .fc .fc-today-button.fc-button-disabled {
    background-color: var(--black);
    border-color: var(--black);
    color: #fff;
    opacity: 1; /* remove faded look */
}

/*notification popup*/

.admissions-popup {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    width: 320px;
    display: none;
    z-index: 9999;
}

    .admissions-popup header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: none;
    }

    .admissions-popup button {
        border: none;
        background: none;
        cursor: pointer;
        font-size: 18px;
    }

    .admissions-popup .learn-more {
        display: block;
        width: 100%;
        background: var(--green);
        color: white;
        padding: 10px;
        border-radius: 5px;
        text-align: center;
        text-decoration: none;
        margin-top: 10px;
    }

.follow-us-mombasa .container {
    background-color: var(--teal-light);
    padding: 50px;
}

.follow-us-mombasa i {
    font-size: 36px;
}

.follow-us-mombasa .fa-facebook {
    color: var(--facebook);
}

.follow-us-mombasa .fa-x-twitter {
    color: var(--x);
}

.follow-us-mombasa .fa-instagram {
    color: var(--instagram);
}

.follow-us-mombasa .fa-youtube {
    color: var(--youtube);
}

.mombasa-calendar-select {
    border: 2px solid var(--teal) !important;
}

.mombasa-calendar a {
    color: var(--teal) !important;
    text-decoration: none;
}

.mombasa-calendar .fc .fc-daygrid-day.fc-day-today {
    background-color: var(--teal-light);
}

.mombasa-calendar .fc .fc-button-primary, .fc .fc-today-button:disabled,
.fc .fc-today-button.fc-button-disabled {
    background-color: var(--black);
    border-color: var(--black);
}

.mombasa-calendar .fc .fc-today-button:disabled,
.mombasa-calendar .fc .fc-today-button.fc-button-disabled {
    background-color: var(--black);
    border-color: var(--black);
    color: #fff;
    opacity: 1; /* remove faded look */
}

.hyderabad-calendar-select {
    border: 2px solid var(--purple) !important;
}

.hyderabad-calendar a {
    color: var(--purple) !important;
    text-decoration: none;
}

.hyderabad-calendar .fc .fc-daygrid-day.fc-day-today {
    background-color: var(--lightpurple);
}

.hyderabad-calendar .fc .fc-button-primary, .fc .fc-today-button:disabled,
.fc .fc-today-button.fc-button-disabled {
    background-color: var(--black);
    border-color: var(--black);
}

.hyderabad-calendar .fc .fc-today-button:disabled,
.hyderabad-calendar .fc .fc-today-button.fc-button-disabled {
    background-color: var(--black);
    border-color: var(--black);
    color: #fff;
    opacity: 1; /* remove faded look */
}

.spotlights-read-more-hydersbad {
    margin-top: auto !important;
    align-self: flex-start;
    font-weight: 600;
    text-decoration: none;
    color: var(--purple);
}

.spotlights-pulse-hyderabad {
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: var(--purple); /* optional */
}

    .spotlights-pulse-hyderabad::before {
        content: "";
        position: absolute;
        width: 0;
        height: 2px; /* adjust thickness if needed */
        background-color: var(--purple);
        bottom: 0;
        left: 0;
        transition: width 0.4s;
    }

    .spotlights-pulse-hyderabad:hover::before {
        width: 100%;
    }

.follow-us-hyderabad .container {
    background-color: var(--lightpurple);
    padding: 50px;
}

.follow-us-hyderabad i {
    font-size: 36px;
}

.follow-us-hyderabad .fa-facebook {
    color: var(--facebook);
}

.follow-us-hyderabad .fa-x-twitter {
    color: var(--x);
}

.follow-us-hyderabad .fa-instagram {
    color: var(--instagram);
}

.follow-us-hyderabad .fa-youtube {
    color: var(--youtube);
}

@media (max-width:768px) {
    .quote .container {
        width: 720px;
        padding: 30px;
    }
}

@media (max-width: 576px) {
    .section {
        margin-top: 40px !important; /*Rahim*/
    }

    .quote .container,
    .quote-duka .container,
    .quote-hydersbad .container,
    .quote-mombasa .container,
    .quote-maputo .container {
        /*width: 91.666667%!important;*/
        padding: 18px !important;
    }

    .quote-text {
        font-size: 16px !important;
    }

    .quote-meta {
        font-size: 14px !important;
    }

    .circle-work-with-us, .circle {
        width: 100px;
        height: 100px;
    }

        .circle-work-with-us
        i, .circle i {
            font-size: 32px;
        }



    .quick-facts .row > div:has(div) {
        margin-bottom: 40px !important;
        border: none;
    }

    .quick-facts-box-icon {
        margin-top: 20px;
    }

    #info-panel {
        width: 380px !important;
        height: 150px !important;
        font-size: 14px;
    }

        #info-panel .wrap {
            padding: 0 0 0 10px;
        }

        #info-panel iframe {
            width: 150px !important;
        }

        #info-panel img {
            width: 150px !important;
        }

        #info-panel p {
            height: 95px;
            overflow: hidden;
            font-size: 11px;
            margin-bottom: 5px;
        }

        #info-panel h5 {
            font-size: 14px !important;
            margin-bottom: 8px !important;
            padding-top: 5px;
        }

        #info-panel a {
            font-size: 12px;
        }
        
    /* .spotlights .nav-pills .nav-item{
        flex: 0 0 35%;
    } */
    .find-more .container .row > div[class*="col-md-6"] {
        flex: 0 0 30%;
    }

    .news-card .news-description img {
        width: 100%;
        height: auto;
        margin: 20px 0px;
        border-radius: 8px;
    }

    .news-card .news-description div + p ~ p {
        padding-top: 0px;
    }

    .related-news-section .spotlights-header {
        padding-left: 0px;
    }
}
/*@media (max-width: 576px) {
    .col-12.col-lg-5[style*="margin-left"] {
        margin-left: 0 !important;
    }
}*/

@media (max-width: 991px) {
    .col-12.col-lg-5[style*="margin-right"] {
        margin-right: 0 !important;
    }

    /* jahan FIRST column me image ho */
    .aboutus .section .row > div:first-child:has(img),
    .WorkWithUs .section .row > div:first-child:has(img),
    .ourProgramme .section .row > div:first-of-type:has(img, iframe) {
        order: 2;
    }

    .aboutus .section .row > div:nth-child(2),
    .WorkWithUs .section .row > div:nth-child(2),
    .ourProgramme .section .row > div:nth-child(2) {
        order: 1;
    }
}


@media (max-width: 576px) {
    .spotlights .swiper-slide {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 991px) {
    .swiper-next,
    .swiper-prev {
        top: 12px;
        bottom: auto;
        left: auto;
        transform: none;
        margin: 0;
    }

    .card {
        width: 414px;
        /*height:244px;*/
    }
    /*  @media (max-width: 991px) {
        .card.h-100 {
            margin-bottom: 24px;
        }
    }*/

    /*.image-section .card {
        margin-bottom: 20px;
    }*/
    .swiper-next {
        left: 670px !important;
        right: auto;
        top: -70px;
    }


    .swiper-prev {
        /*right: 52px;*/ /* next ke sath */
        left: 650px !important;
        right: auto;
        top: -70px;
    }

    .btn {
        margin-left: 0px !important;
        /*margin-top:10px!important;*/
    }
}

@media (max-width: 576px) {
    .swiper-next,
    .swiper-prev {
        top: 10px;
        bottom: auto;
        left: auto;
        transform: none;
        margin: 0;
    }


    .swiper-next {
        right: 10px; /* top right */
        left: 290px !important;
        top: -65px;
    }


    .swiper-prev {
        right: 50px; /* next ke sath */
        left: 266px !important;
        top: -65px;
    }


    */
}

.swiper {
    position: relative;
}

@media (max-width: 991px) {
    .col-12.col-lg-3[style*="margin-left"] {
        margin-left: 0 !important;
    }

    .swiper-slide {
        /*height: 47vh;*/
    }
}


@media (min-width: 992px) {

    /*.spotlights .d-flex {
        margin-bottom: 40px;
    }*/
    /*  @media (max-width: 991px) {
        .card.h-100 {
            margin-bottom: 24px;
        }
    }*/
    /* .image-section .card {
        margin-bottom: 20px;
    }*/

    .news-left-content, .spotlights-left-content {
        width: 65%;
    }

    .news-right-content, .spotlights-right-content {
        width: 35%;
    }

    .border-right {
        border-right: 1px solid var(--black);
    }
}

/*
@media (min-width: 320px) {
    .side-img {
        width: 290px !important;
    }
}

@media (max-width: 375px) {
    .side-img {
        width: 360px !important;
    }
}

@media (max-width: 425px) {
    .side-img {
        width: 390px !important;
    }
}
*/
/* 320px � 374px */
@media (min-width: 320px) and (max-width: 425px) {
    .side-img {
        width: 290px;
    }

    .title-show {
        display: flex !important;
    }
}

/* 375px � 424px */
@media (min-width: 375px) and (max-width: 424px) {
    .side-img {
        width: 360px;
    }
}

/* 425px � 480px */
@media (min-width: 425px) and (max-width: 480px) {
    .side-img {
        width: 390px;
    }
}

@media (max-width: 576px) {
    .slider-container {
        height: 160px;
    }
}

@media (max-width: 576px) {
    .accodin-img {
        width: 230px;
    }
}


.gallery-modal-slider .card-body {
    height: 112px;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
}

.gallery-modal-slider .content-height {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5em;
}

.gallery-modal-slider .spotlights-swiper-wrapper {
    position: relative;
}

.gallery-modal-slider .swiper-wrapper {
    align-items: stretch;
}

.gallery-modal-slider .swiper-slide {
    display: flex;
    height: auto;
}

@media (min-width: 992px) {
    .gallery-modal-slider .swiper-slide {
        width: calc(100% / 3);
    }
}

@media (max-width:1200px) {
    .navbar-toggler-icon {
        background-image: none !important;
        width: 26px;
        height: 20px;
        position: relative;
        display: inline-block;
        margin: 10px 0;
    }

        .navbar-toggler-icon::before,
        .navbar-toggler-icon::after {
            content: "";
            position: absolute;
            left: 0;
            width: 26px;
            height: 2px;
            background: #000;
            transition: all 0.3s ease;
        }

        /* top + middle line */
        .navbar-toggler-icon::before {
            top: 0;
            box-shadow: 0 9px 0 #000;
        }

        /* bottom line */
        .navbar-toggler-icon::after {
            bottom: 0;
        }

    /* OPEN STATE (jab collapsed remove ho) */
    .navbar-toggler:not(.collapsed) .navbar-toggler-icon::before {
        transform: rotate(45deg);
        top: 9px;
        box-shadow: none;
    }

    .navbar-toggler:not(.collapsed) .navbar-toggler-icon::after {
        transform: rotate(-45deg);
        bottom: 9px;
    }
}

.gallery-modal-slider .swiper-button-prev,
.gallery-modal-slider .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /*width: 40px;*/
    height: 40px;
    background: transparent;
    color: var(--green);
}

.gallery-modal-slider .swiper-button-prev {
    left: -36px;
}

.gallery-modal-slider .swiper-button-next {
    right: -45px;
}

@media (max-width: 767px) {
    .gallery-modal-slider .swiper-button-prev, .gallery-modal-slider .swiper-button-next {
        display: none;
    }
}

.gallery-modal-slider .card img {
    transition: none;
}

    .gallery-modal-slider .card img:hover {
        transform: none;
    }

.gallery-modal-slider .swiper-button-lock {
    display: block;
}


.btn-Maputo {
    border: 2px solid var(--burgundy);
    border-radius: 15px;
    /*text-transform: uppercase;*/
    color: var(--burgundy);
    padding: 6px 12px;
}

    .btn-Maputo:hover {
        border: 2px solid var(--burgundy);
        color: var(--white) !important;
        background-color: var(--burgundy);
    }

/*Video Side borders*/
.umbraco-video {
    background-color: black;
    display: block;
    max-width: 100%;
    height: auto;
}

video.umbraco-video {
    background-color: black;
    object-fit: contain;
/*    width: 100%;
    height: 450px;*/
    display: block;
}

.cus-p p:last-of-type {
    margin-bottom: 0 !important;
}

.panel-body p:last-of-type {
    margin-bottom: 0 !important;
}

.panel-body li:last-of-type {
    margin-bottom: 0 !important;
}

.panel-body ul {
    margin-bottom: 0 !important;
}

.custompar p:empty,
.custompar a:empty {
    display: none;
}

.EmptyTagRemoved p:empty, .EmptyTagRemoved a:empty {
    display: none;
}

.custompar p {
    margin-bottom: 0 !important;
}
/*.custom-list li:last-of-type { margin-bottom: 0 !important; }*/
.custom-list {
    margin-bottom: 0 !important;
}

    .custom-list li {
        margin-bottom: 20px !important;
    }

.custom-ul ul {
    margin-bottom: 0 !important;
}

    /*.custom-ul li {
    margin-bottom: 20px !important;
}*/
    .custom-ul ul li {
        margin-bottom: 20px !important;
    }


#tab-notices .spotlight-content,
#tab-notices .spotlights-content {
    -webkit-line-clamp: 4;
}

#tab-notices .spotlight-card {
    height: 204px;
}

/*#tab-notices .spotlights-title-dhaka,
#tab-notices .spotlights-link-hyderabad,
#tab-notices .spotlights-link-maputo,
#tab-notices .spotlights-link-mombasa {
    color: var(--mandarine);
}*/

.btn-mt20px {
    margin-top: 20px;
}

.image-mt20px {
    margin-top: 20px;
}

.p-mt20px {
    margin-bottom: 20px;
}

/*News main pages Last News margin and padding*/
#newsGrid .news-items:last-child .news-card-horizontal {
    margin-bottom: 0px !important;
    padding-bottom: 0 !important;
}

.news-items.last-visible .news-card-horizontal {
    margin-bottom: 20px !important;
    padding-bottom: 0 !important;
}

.footer-newsletter-title {
    width: 170px; /* Mobile par fixed width taake button ke sath sahi row mein aye */
}

/* Tablet, Laptop aur bari screens ke liye (Min-width use kiya hai) */
@media (min-width: 768px) {
    .footer-newsletter-title {
        width: auto !important;
    }
}

@media (max-width: 425px) {
    .footer-newsletter-title {
        width: 170px;
    }

    .news-items img {
        margin-bottom: 10px !important;
    }

    .pagination-custom {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex; /* items ko line me rakhega */
        flex-wrap: wrap; /* screen se bahar nahi jayega */
        max-width: 100%;
        overflow-x: hidden;
        gap: 5px;
    }

    .title-show {
        display: flex !important;
    }
}

@media (min-width: 320px) {
    .footer-newsletter-title {
        width: 155px;
    }
}

.pagination-custom {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* items ko line me rakhega */
    flex-wrap: wrap; /* screen se bahar nahi jayega */
    max-width: 100%;
    overflow-x: hidden;
    gap: 5px;
}
/* Baqi classes jo pehle banayi thin */
.footer-signup-btn {
    width: 120px;
    font-weight: 500;
}

.footer-policy-link {
    color: white !important;
}

.footer-bullet {
    color: white;
}

.footer-divider-container {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
}

.footer-line {
    flex: 1;
    border-bottom: 1px solid #555555;
}

.footer-copyright-text {
    padding: 0 15px;
    color: #ffffff;
}



@media (max-width: 767px) {
    .mobile-flex-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100%;
    }
}


/* Mobile screen only */
@media (max-width: 767px) {

    .row-buttons {
        display: block !important;
        gap: 0 !important;
        margin-bottom: 0 !important;
    }

    .butspace {
        text-align: left;
        /* font-size: 13px; */
        width: auto;
    }
}

@media (max-width: 767px) {
    .partner-row {
        gap: 15px; /* aap 10px, 20px jo chahen kar sakte ho */
    }

    .colspace {
        margin-left: 15px;
    }
}

.click-hexagon {
    cursor: default;
}



@media (max-width: 768px) {
    .bottomspace {
        margin-bottom: 15px !important;
    }
}



/** Rahim - mobile device 

  
*/

@media (max-width: 768px) {
    .footerimage {
        width: 100%;
        height: 29vh;
        object-fit: cover;
    }

    .slider-content a {
        font-size: 14px
    }
}

/* Rahim - Logo */
header.scrolled .logo {
    width: 65px;
    /* padding: 10px; */
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
}


.section .container .row > * > p:last-of-type {
    margin-bottom: 0;
}
/*.section .container .row > * > p:last-of-type:not(:only-of-type) {
    margin-bottom: 0;
}*/
.section .container .row > * li:last-child > p:last-of-type {
    margin-bottom: 0;
}

.section .container .row ul {
    margin-top: 20px;
}

.follow-us-dhaka .container .row ul,
.follow-us-hyderabad .container .row ul,
.follow-us-maputo .container .row ul,
.follow-us-mombasa .container .row ul {
    margin-top: 0px;
}

.marginTop {
    margin-top: 20px !important;
}

.marginBottom {
    margin-bottom: 20px !important;
}

.accordion .panel:last-of-type {
    margin-bottom: 0px !important;
}

.offcanvas-header .btn-close {
    color: var(--black);
    --bs-btn-close-opacity: 1.5;
}