.top-navbar {
        background-color: #032f62;
        color: white;
        padding: 0.5rem 1rem;
    }
    
    a {
        background-color: transparent;
        text-decoration: underline;
        color: #09828b;
    }
    
    .top-navbar .navbar-brand {
        display: flex;
        align-items: center;
        color: white;
        font-weight: 500;
    }
    
    .top-navbar img {
        height: 150px;
        /* margin-right: 10px; */
    }
    
    .top-navbar a {
        color: white;
        text-decoration: none;
        margin-right: 1rem;
    }
    /* Second Navbar */
    
    .bottom-navbar {
        background-color: #c3002f;
    }
    
    .bottom-navbar .nav-link,
    .bottom-navbar .navbar-brand {
        color: white !important;
        font-weight: 500;
    }
    
    .bottom-navbar .dropdown-menu {
        background-color: #006a6a;
    }
    
    .bottom-navbar .dropdown-item {
        color: white;
    }
    
    .bottom-navbar .dropdown-item:hover {
        background-color: #005555;
    }
    /* Search Bar */
    
    .search-box input {
        border: none;
        border-radius: 4px 0 0 4px;
        padding: 5px 10px;
    }
    
    .search-box button {
        border: none;
        border-radius: 0 4px 4px 0;
        background-color: #c3002f;
        color: white;
        padding: 6px 10px;
    }
    
    .main-background-top-sec1 {
        background-color: #032f62;
        color: white;
        padding-bottom: 100px !important;
    }
    
    .btn-top-sec a:hover {
        text-decoration: none;
    }
    
    .top-cl-sec1 {
        background: white;
        color: black;
        height: 500px;
        border-radius: 7px;
    }
    
    .top-sec-text-1.pt-4 {
        padding-left: 15px;
    }
    
    .top-sec-img-1 img {
        border-top-left-radius: 9px;
        border-top-right-radius: 9px;
    }
    
    /* .news-right-sec1 {
        border-right: 1px dashed black;
        padding-right: 20px;
    } */
    
    .news-sec2 h2 a {
        color: #032f62;
        text-decoration: none;
    }
    
    .news-sec2 h2 a:hover {
        text-decoration: underline;
    }
    
    .news-sec2 h4 a {
        color: #032f62;
        text-decoration: none;
    }
    
    .news-sec2 h4 a:hover {
        text-decoration: underline;
    }
    
    .related-sub-news-sec1 {
        border-bottom: 1px solid black;
    }
    
    .homeroom-blog-mian-sec1 {
        background-color: #032f62;
        padding-top: 50px;
        padding-bottom: 50px;
        border-radius: 7px;
        margin-top: 50px;
    }
    
    .homeroom-blog-sec1 h2 {
        font-size: 2.5rem;
        margin-bottom: 0;
        padding-right: 2rem;
        line-height: 50px;
    }
    
    .homeroom-blog-link a {
        padding: 35px 25px;
        background-color: #c3002f;
        color: white;
        font-size: 20px;
        font-weight: 700;
        margin-top: 25px;
    }
    
    .protection-sec2 h4 {
        letter-spacing: -.6px;
        font-family: "Rubik", "Source Sans Pro Web", sans-serif;
        color: #fff;
        font-size: 32px;
        font-weight: 400;
        line-height: 1.25;
        font-weight: bold;
    }
    
    .protection-sec2 p {
        margin: 16px 0px;
        color: white;
    }
    
    .protection-main {
        background-color: #032f62;
        border-radius: 7px;
    }
    
    .foot-last-line {
        color: #000 !important;
    }
    
    .foot-site-link {
        color: #000;
    }
    
    .protection-sec3 a {
        padding: 1.25rem 2rem;
        font-size: 1rem;
        font-weight: 700;
        text-decoration: none;
        border-radius: 4px;
        display: inline-block;
        margin-bottom: .25rem;
        background-color: #032f62;
        color: #002029;
        border: 1px solid transparent;
        color: #fff
    }
    
    .protection-sec3 a:hover {
        color: #032f62;
        background-color: #002029;
    }
    
    .depart-sec1 h2 {
        letter-spacing: -.4px;
        font-family: "Rubik", "Source Sans Pro Web", sans-serif;
        color: #000;
        font-size: 26px;
        font-weight: 700;
        line-height: 1.25;
    }
    
    .depart-sec1 p {
        letter-spacing: normal;
        font-size: 16px;
        line-height: 1.6;
        font-weight: 300;
        margin-bottom: 1.5rem;
        color: #000;
    }
    
    .depart-sec1 a {
        letter-spacing: normal;
        font-family: "Rubik", "Source Sans Pro Web", sans-serif;
        color: #09828b;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.2;
        margin: 7px;
    }
    
    .depart-sec1 a:hover {
        text-decoration: none;
    }
    
    .multi-carousel-container {
        cursor: grab;
        margin: 0 auto;
        max-width: 100%;
        overflow: hidden;
        position: relative;
    }
    /* Cursor styles for dragging */
    
    .multi-carousel-container.dragging,
    #multiCarousel.dragging {
        cursor: grabbing;
    }
    /* Wrapper for all slides */
    
    .multi-carousel-inner {
        display: flex;
        transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    /* Individual slide */
    
    .multi-carousel-item,
    .clone {
        box-sizing: border-box;
        flex: 0 0 33.333333%;
        padding: 0 5px;
        position: relative;
        /* Essential for item-number positioning */
    }
    /* Control buttons */
    
    .multi-carousel-control-prev,
    .multi-carousel-control-next {
        align-items: center;
        background-color: rgba(0, 0, 0, 0.5);
        border: none;
        border-radius: 50%;
        color: white;
        cursor: pointer;
        display: flex;
        height: 40px;
        justify-content: center;
        position: absolute;
        text-decoration: none;
        top: 50%;
        transform: translateY(-50%);
        transition: background-color 0.3s ease;
        width: 40px;
        z-index: 10;
    }
    
    .multi-carousel-control-prev:hover,
    .multi-carousel-control-next:hover {
        background-color: rgba(0, 0, 0, 0.7);
    }
    
    .multi-carousel-control-prev {
        left: 10px;
    }
    
    .multi-carousel-control-next {
        right: 10px;
    }
    /* Image container with dynamic height */
    
    .img-container {
        border-radius: 1.5rem;
        height: var(--carousel-height, 80vh);
        overflow: hidden;
        position: relative;
    }
    /* Image styling */
    
    .img-container img,
    #carouselInner img {
        /* height: 100%; */
        object-fit: cover;
        object-position: top;
        pointer-events: none;
        user-drag: none;
        width: 100%;
        -webkit-user-drag: none;
        transition: transform 0.3s ease;
    }
    
    .img-container:hover img {
        transform: translateZ(0) scale(1.02);
    }
    /* Item number styling - guaranteed visibility */
    
    .item-number {
        align-items: center;
        background-color: rgba(255, 255, 255, 0.75);
        border-radius: 50%;
        display: inline-flex;
        font-size: 120%;
        font-weight: bold;
        height: 35px;
        justify-content: center;
        left: 1rem;
        position: absolute;
        top: 1rem;
        width: 35px;
        z-index: 2;
        /* Higher than default but below controls */
        /* Isolation prevents z-index context issues */
        isolation: isolate;
    }
    /* Carousel cursor styling */
    
    #multiCarousel {
        cursor: grab;
        touch-action: pan-y;
    }
    /* Disable text selection during drag */
    
    #multiCarousel.dragging {
        user-select: none;
        -webkit-user-select: none;
    }
    /* Responsive adjustments for screens smaller than 720px (45em) */
    
    @media (max-width: 45em) {
        .multi-carousel-item,
        .clone {
            flex: 0 0 100%;
        }
    }
    
    .top-sec-edu h5 {
        font-size: 18px !important;
        font-weight: 500;
        text-transform: uppercase;
        font-weight: bold;
        color: white;
    }
    
    .top-sec-edu-2 h4 {
        font-size: 2.5rem;
        font-weight: 400;
        width: 75%;
        margin: 18px 0 24px -1px;
        line-height: 3rem;
        color: white;
    }
    
    .top-sec-edu-2 p {
        letter-spacing: normal;
        font-family: "Rubik", "Source Sans Pro Web", sans-serif;
        font-size: 18px;
        line-height: 1.6;
        color: #fff;
        font-weight: 300;
        width: 60%;
        margin: 0 0 72px;
    }
    
    .multi-carousel-container {
        width: 100%;
        overflow: hidden;
        position: relative;
    }
    
    .multi-carousel-inner {
        display: flex;
        gap: 15px;
        transition: transform 0.4s ease;
    }
    
    .multi-carousel-item {
        /* min-width: 260px; */
        /* height: 200px; */
        flex-shrink: 0;
        overflow: hidden;
        border-radius: 12px;
    }
    
    .multi-carousel-item img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
    /* Overlay */
    
    .multi-carousel-item .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgb(255 255 255 / 79%);
        /* semi-transparent black */
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
        color: #fff;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        padding: 10px;
        bottom: 25px;
    }
    
    .overlay-inner {
        padding-left: 15px;
        padding-bottom: 15px;
        text-align: left;
    }
    
    .overlay-inner a {
        color: white;
        text-decoration: none;
        bottom: 1.5rem;
        left: 2rem;
        padding: 20px 32px;
        border-radius: 4px;
        background-color: #032f62;
    }
    
    .overlay-inner h4 {
        margin-bottom: 25px;
        text-align: left;
        font-weight: bold;
        font-size: 25px;
    }
    
    .top-heading-foot {
        font-weight: 700;
        text-decoration: none;
        color: #fff;
        font-size: 18px;
    }
    
    .foot-main-top-inner1 a:hover {
        /* text-decoration: underline; */
        color: #fff;
        border-bottom: 1px solid #fff;
    }
    
    .main-foot-sec {
        background-color: #0A2F3D;
        color: white;
    }
    
    .inner-li-foot a {
        /* margin-left: 20px; */
        color: white;
        text-decoration: none !important;
        /* margin-top: 25px !important; */
        font-size: 16px;
    }
    
    .foot-main-top-inner1 ul {
        list-style: none;
    }
    
    .inner-li-foot {
        margin-left: 20px;
    }
    
    .us-depart-foot h2 {
        margin-top: 0;
        word-break: break-word;
        font-family: "Rubik", "Source Sans Pro Web", sans-serif;
        font-weight: 400;
        line-height: 30px;
        font-size: 1.5625rem;
        margin-bottom: 0;
        color: #032f62;
    }
    
    .us-depart-foot-icon i {
        font-size: 25px;
    }
    
    .foot-site-link a {
        text-decoration: none;
        font-size: 16px;
        color: #032f62;
    }
    
    .foot-site-link a:hover {
        border-bottom: 1px solid #fff;
    }
    
    .foot-site-link p {
        font-weight: 600;
        margin: 6px 0 0;
        text-transform: capitalize;
    }
    
    .foot-all-a a {
        color: black;
        margin-right: 30px;
    }
    
    .accreditation-section {
        position: relative;
        background-image: url('/mnt/data/7a1d8ef0-a40f-4c77-9393-477cfc973629.png');
        background-size: cover;
        background-position: center;
        color: white;
        min-height: 250px;
        display: flex;
        align-items: center;
        padding: 2rem;
    }
    
    .accreditation-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        /* dark overlay for text readability */
        z-index: 1;
    }
    
    .accreditation-content {
        position: relative;
        z-index: 2;
        /* max-width: 600px; */
    }
    
    .accreditation-title {
        font-size: 2.5rem;
        font-weight: 600;
        color: #032f62;
        /* golden color */
        margin-bottom: 1rem;
    }
    
    .accreditation-text {
        font-size: 1.2rem;
        margin-bottom: 1.5rem;
        font-weight: 400;
        line-height: 1.4;
    }
    
    h2.staff-title span {
        color: #c3002f !important;
    }
    
    .btn-apply {
        background-color: #032f62;
        color: #fff;
        font-weight: 700;
        padding: 0.5rem 1.3rem;
        border-radius: 30px;
        transition: rgb(0 0 0 / 20%);
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        text-decoration: none;
    }
    
    .btn-apply:hover {
        background-color: #fff;
        color: #006a6a;
        text-decoration: none;
    }
    
    .btn-apply i {
        font-size: 1rem;
    }
    
    .about-sec-p-aa p {
        letter-spacing: normal;
        font-family: "Rubik", "Source Sans Pro Web", sans-serif;
        color: inherit;
        font-size: 19px;
        font-weight: 300;
        line-height: 1.6;
        margin-bottom: 15px;
    }
    
    .ece-sec-a a {
        background: #276A69;
        padding: 1.25rem 2rem;
        font-size: 1rem;
        font-weight: 700;
        text-decoration: none;
        border-radius: 4px;
        display: inline-block;
        margin-bottom: .25rem;
        background-color: #032f62;
        color: #002029;
        border: 1px solid transparent;
        margin-left: 10px;
    }
    
    .ece-sec-a a:hover {
        background-color: white;
        border: 1px solid #002029;
    }
    
    .ece-sec-aa a:hover {
        background-color: #002029;
        border: 3px solid transparent;
        color: #fff;
    }
    
    .ece-sec-aa a {
        background: #fff;
        padding: 1.25rem 2rem;
        font-size: 1rem;
        font-weight: 700;
        text-decoration: none;
        border-radius: 4px;
        display: inline-block;
        margin-bottom: .25rem;
        background-color: #FFF;
        color: #002029;
        border: 3px solid #002029;
        margin-left: 10px;
    }
    
    .inner-sec-1 h2 {
        letter-spacing: -.6px;
        font-family: "Rubik", "Source Sans Pro Web", sans-serif;
        color: #032f62;
        font-size: 32px;
        font-weight: 400;
        line-height: 1.25;
    }
    
    .inner-sec-1 p {
        letter-spacing: normal;
        font-family: "Rubik", "Source Sans Pro Web", sans-serif;
        color: inherit;
        font-size: 18px;
        font-weight: 300;
        line-height: 1.6;
    }
    
    .bottom-tag-inner-sec a {
        border-radius: 25px;
        background-color: #008080;
        color: white;
        text-decoration: none;
        padding: 10px 6px;
        margin-left: 15px;
    }
    
    .initi-sec01 h2 {
        letter-spacing: -.6px;
        font-family: "Rubik", "Source Sans Pro Web", sans-serif;
        color: #032f62;
        font-size: 32px;
        font-weight: 400;
        line-height: 1.25;
        font-weight: bold;
    }
    
    .initi-sec01 p {
        font-size: 1.5625rem;
        margin-top: 0;
        margin-bottom: .33em;
        word-break: break-word;
        color: #032f62;
        font-family: "Rubik", "Source Sans Pro Web", sans-serif;
        line-height: 30px;
    }
    
    .right-initiat-sec-pp {
        padding: 29px;
        border-right: 1px solid #00000042;
        margin-top: 35px;
    }
    
    .homeroom-blog-link22 a {
        padding: 6px 16px;
        background-color: #032f62;
        color: white;
        font-size: 20px;
        font-weight: 700;
        margin-top: 25px;
        text-decoration: none;
    }
    
    tr.header-in-table-gg th {
        color: white !important;
        background: #0A2F3D;
    }
    
    .new-bg-sec1 {
        background-color: #EBEBEB;
        border-radius: 7px;
        margin-top: 15px;
    }
    
    a.btn.dropdown-toggle.form-control {
        background: transparent;
        display: flex;
        justify-content: space-between;
        /* ← text left, icon right */
        align-items: center;
        color: #0A2F3D;
        font-weight: bold;
    }
    
    .fsa-sec1 i {
        font-size: 45px;
        background-color: #032f62;
        padding-right: 65px;
        padding-left: 33px;
        padding-top: 40px;
        padding-bottom: 40px;
        border-radius: 53px;
    }
    
    .fsa-sec-1 a {
        padding: 1.25rem 1.75rem;
        text-decoration: none;
        color: #000;
        border-radius: 5px;
        background: #032f62;
        font-weight: 700;
    }
    
    .fsa-top-back {
        background-color: #EBEBEB;
    }
    
    .tab-section-ed-office .nav-tabs .nav-item.show .nav-link,
    .nav-tabs .nav-link.active {
        border: none;
        border-bottom: 4px solid #032f62;
        font-weight: bold;
    }
    
    .tab-section-ed-office .nav-tabs .nav-link:focus,
    .nav-tabs .nav-link:hover {
        border: none;
        border-bottom: 4px solid #032f62;
        font-weight: bold;
    }
    
    .tab-section-ed-office .nav-tabs {
        border-bottom: 2px solid gray;
    }
    
    .tab-section-ed-office li a {
        display: inline-block;
        /* padding: 1em 1.2em;
    text-align: center; */
        height: 100%;
        width: 100%;
        color: #032f62;
        text-decoration: none;
    }
    
    .border-top-ies {
        border-top: 1px dotted;
        padding-top: 25px;
    }
    
    .top-cl-sec12 {
        background: white;
        color: black;
        height: 250px;
        border-radius: 7px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .card {
        height: 280px;
        /* width: 300px; */
        border-radius: 10px;
        border: none;
    }
    
    .card-inner {
        position: relative;
        width: 100%;
        height: 150px;
        padding-bottom: 100%;
        transition: transform 0.6s;
        transform-style: preserve-3d;
    }
    
    .card:hover .card-inner {
        transform: rotateY(180deg);
    }
    
    .card-front,
    .card-back {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 20px;
    }
    
    .card-front {
        /* background: Yellow; */
        background-image: url("../img/crition1.jpg");
        height: 280px;
    }
    
    .card-front1 {
        /* background: Yellow; */
        background-image: url("../img/crition2.jpg");
        height: 280px;
    }
    
    .card-front2 {
        /* background: Yellow; */
        background-image: url("../img/crition3.jpg");
        height: 280px;
    }
    
    .card-front3 {
        /* background: Yellow; */
        background-image: url("../img/crition4.jpg");
        height: 280px;
    }
    
    .card-front4 {
        /* background: Yellow; */
        background-image: url("../img/crition5.jpg");
        height: 280px;
    }
    
    .card-back {
        background: #0a2f3d;
        color: #fff;
        transform: rotateY(180deg);
        height: 280px;
    }
    
    .card-front h2 {
        font-size: 19px;
        /* font-weight: 400; */
        line-height: 1.4;
        width: 100%;
        background: #276A69;
        color: white;
        display: flex;
        justify-content: center;
        padding: 5px 0px;
    }
    
    .card-back h2 {
        font-size: 16px;
        color: white;
        text-align: center;
        padding: 0px 5px;
    }
    
    .box {
        min-height: 220px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .bg-1 {
        background: #1F5549;
    }
    
    .bg-2 {
        background: #296A5C;
    }
    
    .bg-3 {
        background: #338270;
    }
    /* Hover effect (Optional) */
    
    .box:hover {
        opacity: 0.9;
        cursor: pointer;
        transition: 0.3s ease-in-out;
    }
    
    .search-sec010 {
        /* min-height: 60vh;
     background: url("../img/search-bg.jpg") no-repeat center center fixed;
     background-size: cover;
     position: relative;
     color: #000;
     font-family: Georgia, serif; */
        min-height: 60vh;
        background: url("../img/search-bg.jpg") no-repeat center center/cover;
        /* background-size: cover; */
        position: relative;
        /* color: #000; */
        font-family: Georgia, serif;
        display: flex;
        align-items: center;
    }
    /* Overlay for dimming background */
    
    .search-sec010::before {
        /* content: "";
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(255, 255, 255, 0.7);
     z-index: -1; */
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 45%);
        /* nice dark overlay */
        z-index: 1;
    }
    
    .search-sec0100 {
        z-index: 2;
    }
    
    .left-section h2 {
        text-transform: uppercase;
        font-weight: 700;
        margin-bottom: 20px;
        font-size: 1.75rem;
    }
    
    .left-section p {
        font-size: 1rem;
        margin-bottom: 30px;
    }
    /* Dropdown styling */
    
    select.form-select {
        max-width: 400px;
        border-radius: 30px;
        padding: 7px 20px;
        font-size: 1rem;
    }
    /* Right section styling */
    
    .right-section {
        background: white;
        padding: 40px;
        border-radius: 6px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        max-width: 500px;
    }
    
    .right-section h2 {
        font-weight: 700;
        margin-bottom: 20px;
        font-size: 1.5rem;
    }
    
    .right-section p {
        font-size: 1rem;
        line-height: 1.7;
    }
    /* Responsive adjustments */
    
    @media (max-width: 768px) {
        .container {
            padding-left: 20px;
            padding-right: 20px;
        }
        .left-section,
        .right-section {
            max-width: 100%;
            padding-bottom: 40px;
        }
        .top-heading-sec1.w-100 h2 {
            font-size: 20px;
        }
        .top-cl-sec1 {
            height: 450px;
        }
        .top-heading-sec1.w-50 {
            width: 100% !important;
            margin-top: 25px !important;
        }
        .protection-sec2.p-md-2.p-4 h4 {
            font-size: 28px;
        }
        .news-right-sec1 {
            border: none;
            padding: 0;
        }
        .related-sub-news-sec1 {
            border: 1px solid black;
            margin-top: 25px;
            border-radius: 15px;
            padding-left: 10px;
        }
        .perf-sec10 {
            margin-top: 25px;
        }
        .protection-main {
            padding-top: 25px;
            padding-bottom: 25px;
        }
        .top-sec-edu-2 h4 {
            width: 100% !important;
        }
        .top-sec-edu-2 p {
            width: 100% !important;
        }
        .homeroom-blog-sec1 {
            margin-bottom: 40px;
        }
        .homeroom-blog-sec1 h2 {
            padding-right: 0 !important;
            font-size: 2.0rem;
        }
        .homeroom-blog-link a {
            padding: 35px 7px !important;
        }
        .new-release-sec01010122{
            border: none !important;
        }
    }
    
    .contact-map-sec1 {
        background-color: #FFF;
        padding-top: 50px;
        padding-bottom: 25px;
        background: #092E3D;
        background: linear-gradient(174deg, rgba(1, 47, 87) 15%, rgba(9, 46, 61, 1) 45%, rgba(43, 104, 55, 1) 80%);
    }
    
    .contact-select-search-sec1 {
        /* height: 347.246px; */
        /* background: white; */
        background: #fff;
        border-top: 4px #032f62 solid;
        border-radius: 4px;
        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .25);
        padding: 32px;
        min-height: 100%;
    }
    
    .contact-select-search-sec1 .btn-top-sec a {
        color: #076369 !important;
    }
    
    .contact-select-search-sec1 .fsqa-heading h4 {
        letter-spacing: -.4px;
        font-family: "Rubik", "Source Sans Pro Web", sans-serif;
        color: #032f62;
        font-size: 22px;
        font-weight: 500;
        line-height: 1.25;
    }
    
    .perf-sec1 {
        padding: 12px;
        border: 1px dotted white;
        border-radius: 50%;
        padding: 14px 14px;
        width: 120px;
    }
    
    .perf-sec1 p {
        margin: 0;
        text-align: center;
    }
    
    .perf-sec1 h4 {
        margin-bottom: 0;
        color: #D8AE00
    }
    
    .depart-sec1 {
        /* background: #b51717; */
        color: black;
        /* height: 473px; */
        border-radius: 7px;
        display: inline;
        align-items: inherit;
        /* background-color: pink !important; */
        display: flex;
        align-items: center;
        padding-left: 16px;
    }
    
    .dapart-sec00 {
        background-image: url(../img/dcBg.jpg);
        height: 400px;
        background-size: cover;
    }
    
    .dapart-sec000 {
        background-image: url(../img/offeredbox.jpg);
        height: 100% !important;
        background-size: cover;
        padding-top: 27px;
    }
    
    .search-section {
        padding: 80px 0;
    }
    
    .red-divider {
        width: 50px;
        height: 3px;
        background-color: #dc3545;
        margin-bottom: 20px;
    }
    
    .text-navy-head {
        color: #1a2b4e;
        font-weight: 700;
    }
    
    .custom-input,
    .custom-select {
        border: 1px solid #dee2e6;
        border-radius: 4px;
        padding: 12px;
        font-size: 15px;
    }
    
    .search-country-selection {
        max-width: 100% !important;
        border-radius: 8px !important;
    }
    /* Media query taake sirf desktop screens par hover kaam kare (mobile par click hi behtar hai) */
    
    @media (min-width: 992px) {
        .navbar-nav .nav-item.dropdown:hover .dropdown-menu {
            display: block;
            margin-top: 0;
            /* Menu ko navbar ke sath chipka kar rakhne ke liye */
        }
        /* Jab mouse dropdown se hat jaye toh menu foran band ho jaye */
        .navbar-nav .nav-item.dropdown .dropdown-menu {
            display: none;
        }
    }
    
    .ushec-staff-section {
        padding: 60px 0;
        position: relative;
    }
    /* Top Heading Styles */
    
    .red-line-top {
        width: 50px;
        height: 2px;
        background-color: #276a69;
        /* Professional Red */
        margin-bottom: 15px;
    }
    
    .staff-title {
        color: #032f62;
        /* Navy Blue */
        font-weight: 700;
        font-size: 2.2rem;
        margin-bottom: 20px;
    }
    
    .staff-title1 {
        color: #000;
        /* Navy Blue */
        font-weight: 700;
        font-size: 2.0rem;
        margin-bottom: 20px;
    }
    
    .staff-description {
        color: #555;
        font-size: 0.95rem;
        line-height: 1.7;
        max-width: 90%;
    }
    /* Custom Grid for 5 Columns on Desktop */
    
    @media (min-width: 992px) {
        .custom-col-5 {
            flex: 0 0 auto;
            width: 20%;
        }
    }
    /* Director Card Styling */
    
    .director-card {
        background-color: #232b43;
        /* Dark Navy from Image */
        height: 320px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 30px 15px;
        position: relative;
        text-align: center;
        transition: transform 0.3s ease;
        margin-bottom: 20px;
    }
    
    .designation {
        color: #ffffff;
        font-size: 0.85rem;
        font-weight: 400;
        margin-bottom: 10px;
        min-height: 50px;
        /* To keep lines consistent */
    }
    
    .card-line {
        width: 30px;
        height: 2px;
        background-color: #D8AE00;
        margin: 15px 0;
    }
    
    .member-name {
        color: #ffffff;
        font-size: 1.1rem;
        font-weight: 600;
    }
    /* Bottom Slanted Stripe Pattern */
    
    .card-footer-pattern {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 30px;
        /* Creating the slanted red stripes pattern */
        background: repeating-linear-gradient( -45deg, #c3002f, #c3002f 10px, #032f62 10px, #032f62 20px)
    }
    /* Layout spacing for the second row */
    
    .mt-custom {
        margin-top: 2rem;
    }
    
    .staff-name {
        color: #232b43;
        font-weight: 700;
        font-size: 1.25rem;
        border-left: 3px solid #c3002f;
        padding-left: 15px;
        margin-bottom: 5px;
    }
    
    .staff-role {
        padding-left: 18px;
        font-size: 0.9rem;
    }
    
    .alltaff-color {
        color: #c3002f;
    }
    
    .staff-bio {
        padding-left: 18px;
        font-size: 0.88rem;
        color: #666;
        text-align: justify;
    }
    /* Keeping the custom 5-column grid from before */
    
    @media (min-width: 992px) {
        .custom-col-5 {
            flex: 0 0 auto;
            width: 20%;
        }
    }
    
    .transfer-sec1010 {
        display: flex;
        justify-content: center;
    }
    
    .transfer-sec1011010 {
        background-image: url("../img/offeredBg.jpg");
        background-size: cover;
    }
    
    .credit-transfer-sec0100 {
        display: flex;
        align-items: center;
    }
    
    .red-line-top {
        width: 40px;
        height: 2px;
        background-color: #be1e2d;
        margin-bottom: 10px;
    }
    
    .faq-title {
        color: #232b43;
        font-weight: 700;
        font-size: 2rem;
        margin-bottom: 30px;
    }
    /* FAQ Accordion Customization */
    
    .custom-faq .accordion-item {
        border: 1px solid #dee2e6;
        border-radius: 0 !important;
        margin-bottom: 10px;
    }
    
    .custom-faq .accordion-button {
        background-color: #f8f9fa;
        /* Light grey header */
        color: #333;
        font-size: 0.95rem;
        padding: 15px 20px;
        border-radius: 0 !important;
        box-shadow: none;
        border: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    /* Active State (When Open) */
    
    .custom-faq .accordion-button:not(.collapsed) {
        background-color: #f8f9fa;
        color: #333;
    }
    /* Custom +/- Icons instead of Arrows */
    
    .custom-faq .accordion-button::after {
        content: '+';
        background-image: none;
        font-size: 1.4rem;
        font-weight: 400;
        color: #333;
        width: auto;
        height: auto;
        transform: none !important;
    }
    
    .custom-faq .accordion-button:not(.collapsed)::after {
        content: '-';
        font-size: 1.8rem;
    }
    /* Accordion Body (The Answer Part) */
    
    .custom-faq .accordion-body {
        background-color: #eaedf0;
        /* Darker grey as per image */
        color: #444;
        font-size: 0.92rem;
        line-height: 1.6;
        padding: 30px;
        border-top: 1px solid #dee2e6;
    }
    /* Remove default focus outline */
    
    .accordion-button:focus {
        border-color: rgba(0, 0, 0, .125);
        box-shadow: none;
    }
    
    .main-background-top-sec1010 {
        background-image: url("../img/offeredBg.jpg");
        background-size: cover;
    }
    
    @media (max-width: 768px) {
        .faq-title {
            font-size: 1.5rem;
        }
    }
    
    .hero-banner-in-aid-sec0 {
        background-color: #c3002f;
        color: white;
        min-height: 350px;
    }
    
    .hero-text-box {
        padding: 40px;
    }
    
    .financial-aid-sec0101 {
        background-color: #F2F2F2;
        padding: 40px 40px;
    }
    
    .finalcial-aid-dark-sec1 {
        background: #152040;
        color: white !important;
        padding: 20px 20px;
    }
    
    @media screen(max-width:758px) {
        .financial-aid-sec0101 {
            padding: 0px
        }
    }
    
    .job-section {
        padding: 80px 0;
        background: #F0F2F5;
        background-image: url("../assest/img/goalBg.png");
        background-size: cover;
        background-position: center;
    }
    
    .section-title {
        font-weight: 700;
        color: #333;
    }
    
    .section-title span {
        color: #D8AE00;
        /* Red color from image */
    }
    
    .red-line {
        width: 50px;
        height: 3px;
        background-color: #D8AE00;
        margin-bottom: 15px;
    }
    /* Card Styling */
    
    .job-card {
        border: none;
        border-radius: 0;
        overflow: hidden;
        background-color: #1a1e43;
        /* Dark Navy Blue */
        position: relative;
        transition: transform 0.3s ease;
    }
    
    .job-card:hover {
        transform: translateY(-5px);
    }
    
    .job-card-img {
        height: 200px;
        object-fit: cover;
        width: 100%;
        border-bottom: 4px solid #fff;
    }
    
    .job-card-body {
        padding: 25px;
        min-height: 180px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .job-title {
        color: #ffffff;
        font-size: 1.25rem;
        font-weight: 700;
        margin-bottom: 20px;
        line-height: 1.2;
    }
    
    .btn-apply {
        background-color: #D8AE00;
        color: white;
        border-radius: 0;
        font-size: 12px;
        font-weight: bold;
        text-transform: uppercase;
        padding: 8px 15px;
        border: none;
        width: fit-content;
    }
    
    .btn-apply:hover {
        background-color: #a00d25;
        color: white;
    }
    /* Red/White Stripe Detail at Bottom */
    
    .card-footer-stripe {
        height: 40px;
        background: linear-gradient(135deg, transparent 70%, #fff 70.1%, #fff 85%, #D8AE00 85.1%);
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
    }
    
    .red-accent-line {
        width: 45px;
        height: 3px;
        background-color: #D8AE00;
        margin-bottom: 10px;
    }
    
    .main-title {
        font-weight: 700;
        color: #1a1e43;
        text-transform: uppercase;
        margin-bottom: 50px;
    }
    
    .main-title span {
        color: #D8AE00;
    }
    /* Essential for Equal Height Alignment */
    
    .step-card {
        display: flex;
        flex-direction: column;
        height: 100%;
        /* Makes all cards same height */
        text-align: center;
        position: relative;
    }
    
    .step-icon-wrapper {
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
    }
    
    .step-icon {
        max-height: 55px;
        width: auto;
    }
    
    .step-text {
        font-size: 11.5px;
        color: var(#444);
        line-height: 1.6;
        padding: 0 10px;
        margin-bottom: 30px;
        /* Space before the line */
    }
    
    .bottom-indicator {
        height: 4px;
        background-color: #1a1e43;
        width: 90%;
        margin: 0 auto;
        margin-top: auto;
        /* Pushes the line to the very bottom */
    }
    /* Curved Arrows */
    
    .step-col {
        position: relative;
    }
    
    @media (min-width: 992px) {
        .step-col:not(:last-child)::after {
            content: "";
            position: absolute;
            top: 40px;
            right: -25%;
            width: 50%;
            height: 30px;
            border: 1px dashed #999;
            border-color: #999 transparent transparent transparent;
            border-radius: 50%/15px 15px 0 0;
            z-index: 1;
        }
        /* Arrow tip */
        .step-col:not(:last-child)::before {
            content: "➤";
            position: absolute;
            top: 50px;
            right: -5%;
            font-size: 8px;
            color: #333;
            z-index: 2;
        }
    }
    
    .red-line {
        width: 40px;
        height: 3px;
        background: #D8AE00;
        margin-bottom: 10px;
    }
    
    .title {
        font-weight: bold;
        margin-bottom: 40px;
    }
    
    .title span {
        color: #D8AE00;
    }
    /* Icon Styling */
    
    .value-box {
        text-align: center;
        padding: 15px;
    }
    
    .circle-wrapper {
        position: relative;
        width: 150px;
        height: 150px;
        margin: 0 auto 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .dotted-ring {
        position: absolute;
        width: 100%;
        height: 100%;
        border: 1px dashed rgba(255, 255, 255, 0.3);
        border-radius: 50%;
    }
    
    .inner-circle {
        width: 110px;
        height: 110px;
        background: #1a1e43;
        border: 2px solid #D8AE00;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
        box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.6);
    }
    
    .inner-circle img {
        width: 45px;
        filter: brightness(0) invert(1);
    }
    
    .label {
        font-size: 14px;
        margin-top: 10px;
    }
    /* --- Custom Arrows Styling --- */
    
    .carousel-control-prev,
    .carousel-control-next {
        width: 5%;
        /* Arrows ki position control karne ke liye */
        opacity: 1;
    }
    
    .arrow-btn {
        background-color: #D8AE00;
        /* Red color matching the theme */
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.3s;
    }
    
    .arrow-btn:hover {
        background-color: #a00d25;
        transform: scale(1.1);
    }
    /* Bootstrap Indicators (Dots) position adjust */
    
    .carousel-indicators {
        bottom: -60px;
    }
    
    .carousel-indicators [button],
    .carousel-indicators button {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #555;
        border: none;
    }
    
    .carousel-indicators .active {
        background-color: #D8AE00;
    }
    
    .core-value-sec0100 {
        background-color: #1a1e43;
        color: white;
        padding: 80px 0;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    
    core-value-sec0100 {
        background-color: #1a1e43;
        color: white;
        padding: 80px 0;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    /* --- Generic Styles (Desktop + Mobile) --- */
    
    body {
        /* background-color: #0f172a; */
        color: #000;
        margin: 0;
        overflow-x: hidden;
    }
    /* Desktop Headers: 768px se niche hide honge */
    
    @media (max-width: 768px) {
        nav.navbar.top-navbar,
        nav.navbar.navbar-expand-lg.bottom-navbar {
            display: none !important;
        }
    }
    /* --- Mobile Specific Styles (991px and below) --- */
    
    @media (max-width: 991px) {
        /* Header Bar */
        .mobile-header-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: rgba(30, 41, 59, 0.95);
            backdrop-filter: blur(10px);
            padding: 15px 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        /* Full Screen Overlay */
        .menu-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #0f172a;
            z-index: 3000;
            transform: translateX(100%);
            transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
        }
        .menu-overlay.active {
            transform: translateX(0);
        }
        /* Top Bar inside Menu */
        .menu-top-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 25px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            height: 80px;
            /* Fixed height for calculation */
        }
        /* Drill-down Panels Wrapper */
        .menu-wrapper {
            display: flex;
            /* Width dynamically handle hogi (7 panels hain to 700%) */
            width: 700%;
            height: calc(100% - 80px);
            transition: transform 0.4s cubic-bezier(0.7, 0, 0.3, 1);
        }
        .menu-panel {
            /* 100% divided by total panels (7) */
            width: calc(100% / 7);
            flex-shrink: 0;
            padding: 30px 25px;
            overflow-y: auto;
        }
        /* Menu Items Styling */
        .menu-list {
            list-style: none;
            padding: 0;
        }
        .menu-item {
            font-size: 1.1rem;
            font-weight: 600;
            padding: 15px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            text-transform: uppercase;
            color: white
        }
        .menu-item a {
            color: white;
            text-decoration: none;
        }
        /* Back Button */
        .back-btn {
            background: rgba(56, 189, 248, 0.1);
            color: #38bdf8;
            padding: 12px;
            border-radius: 5px;
            margin-bottom: 25px;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
        }
    }
    /* Desktop per mobile menu hide karne ke liye */
    
    @media (min-width: 992px) {
        .mobile-header-nav,
        .menu-overlay {
            display: none !important;
        }
    }


    .row.border-bottom.py-2.gx-0.search-search-sec01 {
    overflow: scroll;
}
.new-release-sec01010122{
    border-left: 1px dashed #000 ;
    padding-left: 20px;
}

.btn-close-menu {
    color: white !important;
    font-size: x-large;
}