: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-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);
    }

.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); }

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

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

    header .navbar {
        padding: 10px 5px;
        transition: all 0.3s ease;
    }

    .dhaka-nav,
    .maputo-nav,
    .mombasa-nav,
    .hyderabad-nav {
        margin-top: 115px;
        padding: 0px 0px !important;
    }

    .menu-margin {
        margin-top: 208px !important;
    }

    .header.scrolled .bottom-nav {
        top: -56px !important;
    }
}


@media (min-width: 576px) and (max-width: 767.98px) {
    header .navbar {
        padding: 15px 0px;
    }

    .dhaka-nav,
    .maputo-nav,
    .mombasa-nav,
    .hyderabad-nav {
        margin-top: 150px;*/ /* tweak as needed */
        /*padding: 12px 0px !important;
    }

    .menu-margin {
        margin-top: -49px !important;*/ /* adjust until aligned */
    /*}

   .header.scrolled .bottom-nav {
        top: -56px !important;
    }
}*/

/* 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. Positioning & Margins (Exactly as provided) */
header .bottom-nav {
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 1000;
    background-color: var(--bg6);
    padding: 30px 0px;
}

.dhaka-nav, .hyderabad-nav, .maputo-nav, .mombasa-nav { margin-top: 180px; }
.academy-inner { margin-top: 265px !important; }
.menu-margin { margin-top: 264px !important; }

/* 4. Bottom Nav Specifics */
header .bottom-nav .navbar { padding: 5px 0px; background-color: transparent; }
header .bottom-nav .navbar .nav-item { padding: 0px 25px; }
header .bottom-nav .navbar .nav-item .nav-link {
    font-weight: 500;
    color: var(--black);
    padding: 0px;
    position: relative;
}
.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%;
}

.fa-magnifying-glass {
    color: var(--green);
}
/* 5. Consolidated City Styles (Active/Hover/Pulse) */
.bottom-nav .navbar-nav .nav-item .nav-link.active { color: var(--academy-color) !important; }
.bottom-nav .sub-navbar .nav-link.active,
.bottom-nav .sub-navbar .nav-link:hover,
.bottom-nav .sub-navbar .dropdown-item:hover {
    color: var(--academy-color) !important;
    background-color: transparent !important;
}

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

/* Pulse effect shared logic */
.bottom-nav .navbar-nav > .nav-item a.nav-link::before {
    content: "";
    position: absolute;
    width: 0;
    height: 4px;
    background-color: var(--academy-color, var(--green));
    top: 25px;
    left: 0;
    transition: width 0.4s;
}
.bottom-nav .navbar-nav > .nav-item a.nav-link:hover::before {
    width: 100%;
}

/* 6. Scrolled State */
header.scrolled .navbar { padding: 0px 0px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
header.scrolled .sub-navbar { padding: 10px 0px; box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1); }
header.scrolled .logo { width: 90px; padding: 10px; }
header.scrolled .bottom-nav { top: -80px; padding: 10px 0; }

/* 7. 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); }

.bottom-nav .sub-navbar .dropdown-menu {
    background-color: var(--white) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: none;
    margin-top: 6px;
}

/* 8. Offcanvas & 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; }

/* 9. Responsive Queries */
@media (max-width: 1199px) {
    .dropdown-menu { position: static !important; width: 100%; border: none; }
    .dropdown-item, .bottom-nav .dropdown-item {
        display: inline-block;
        width: 85%;
        padding: 10px 20px !important;
        white-space: normal;
    }
}

/* End Header */

/* 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 50%;
        max-width: 50%;
        padding: 1rem 0;
    }
    .resized{
        width:100%;
        height:450px;
    }
    
}


/* 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);
    }
/* 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);
    }

.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);
    }

/* 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;
    }
    .quote .container{
        width: 91.666667%!important;
        padding:0.75rem!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;

        .wrap{
            padding:0 0 0 10px;
        }
        iframe{
            width: 150px !important;
        }
        img{
            width:150px!important;
        }
        p{
            height: 95px;
            overflow: hidden;
            font-size:11px;
            margin-bottom: 5px;
        }
        h5{
            font-size:14px!important;
            margin-bottom:8px!important;
            padding-top: 5px;
        }
        a {
            font-size: 12px;
        }
    }
    .resized{
        width:100%;
        height:200px!important;
    }
    /* .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: -45px;
}

.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;
}


#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;
    }
}