/*** Spinner Start ***/
body {
    overflow-x: hidden;
    /* DO NOT use overflow:hidden — it breaks sticky */
}

#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}
/*** Spinner End ***/

.back-to-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    display: flex;
    width: 45px;
    height: 45px;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
    z-index: 99;
}

/*** Button Start ***/
.btn {
    font-weight: 600;
    transition: .5s;
}

.btn-square {
    width: 32px;
    height: 32px;
}

.btn-sm-square {
    width: 34px;
    height: 34px;
}

.btn-md-square {
    width: 44px;
    height: 44px;
}

.btn-lg-square {
    width: 56px;
    height: 56px;
}

.btn-square,
.btn-sm-square,
.btn-md-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    border-radius: 50%;
}

.btn.btn-primary {
    box-shadow: inset 0 0 0 0 var(--bs-primary);
}

.btn.btn-primary:hover {
    box-shadow: inset 300px 0 0 0 var(--bs-light) !important;
    color: var(--bs-primary) !important;
}

.btn.btn-light {
    box-shadow: inset 0 0 0 0 var(--bs-primary);
}

.btn.btn-light:hover {
    box-shadow: inset 300px 0 0 0 var(--bs-primary);
    color: var(--bs-light) !important;
}

.btn-hover {
    transition: 0.5s;
}

.btn-hover:hover {
    color: var(--bs-secondary) !important;
}

/*** Section Title Start ***/
.section-title {
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    color: var(--bs-primary);
}

.section-title::before {
    content: "";
    width: 50px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    margin-right: -50px;
    border: 1px solid var(--bs-primary) !important;
}

.section-title::after {
    content: "";
    width: 50px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    margin-left: -50px;
    border: 1px solid var(--bs-primary) !important;
}

/*** Topbar Start ***/
.fixed-top .container {
    transition: 0.5s;
}

.topbar {
    padding: 2px 10px 2px 20px;
    background: var(--bs-primary) !important;
}

.topbar a,
.topbar a i {
    transition: 0.5s;
}

.topbar a:hover,
.topbar a i:hover {
    color: var(--bs-secondary) !important;
}


/*** Topbar End ***/

/*** Navbar Dropdown Fix ***/
.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
}


.dropdown .dropdown-menu a:hover {
    background: var(--bs-primary);
    color: var(--bs-white);
}

/*** Carousel Hero Header Start ***/
.carousel-header .carousel-control-prev,
.carousel-header .carousel-control-next {
    background: transparent;
}

.carousel-header .carousel-control-prev .carousel-control-prev-icon {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    padding: 25px 30px;
    border-top-left-radius: 0;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 50px;
    background-size: 60% 60%;
}

.carousel-header .carousel-control-next .carousel-control-next-icon {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    padding: 25px 30px;
    border-top-left-radius: 50px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 0;
    background-size: 60% 60%;
}

.carousel-header .carousel .carousel-indicators li {
    opacity: 0;
}

.carousel-header .carousel-inner .carousel-item {
    position: relative;
    min-height: 100vh;
}

.carousel-header .carousel-inner .carousel-item img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-header .carousel-inner .carousel-item .carousel-caption {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 85%;
    left: 0;
    padding-top: 60px;
    display: center;
    align-items: center;
    justify-content: center;
    text-align: center;
}


/*** Carousel Hero Header End ***/

/*** Single Page Hero Header Start ***/
.bg-breadcrumb {
    background: linear-gradient(rgba(19, 53, 123, 0.5), rgba(19, 53, 123, 0.5)), url(../img/breadcrumb-bg.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding: 150px 0 50px 0;
}

.bg-breadcrumb .breadcrumb-item a {
    color: var(--bs-secondary) !important;
}
/*** Single Page Hero Header End ***/

/*** Theme Colors ***/
:root {
    --primary: #13357B;
    --secondary: #F57C00;
    --light: #F5F5F5;
    --dark: #212529;
    --bs-primary: #13357B;
    --bs-secondary: #F57C00;
    --bs-light: #F5F5F5;
    --bs-dark: #212529;
    --bs-white: #ffffff;
}

/*** Topbar ***/
.bg-primary {
    background-color: var(--primary) !important;
}

.topbar-link {
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    transition: all 0.3s;
}

.topbar-link:hover {
    color: var(--secondary);
}

.btn-outline-light {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-outline-light:hover {
    background-color: #fff;
    color: var(--primary);
    border-color: #fff;
}

/*** Navbar ***/
.navbar {
    background-color: #fff;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    padding: 15px 0;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 0;
    text-decoration: none;
}

/*** School Logo ***/
.school-logo {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 32px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    flex-shrink: 0;
}

.school-logo-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    flex-shrink: 0;
    padding: 5px;
    border: 3px solid var(--primary);
}

.school-logo-img img {
    width: 110%;
    height: 110%;
    object-fit: contain;
    border-radius: 50%;
}

/*** Brand Text ***/
.brand-text {
    text-align: center;
    padding: 0 20px;
}

.brand-text h1 {
    font-size: 24px;
    font-weight: 700;
    color: #fba831;
    margin: 0;
    font-family: 'Jost', sans-serif;
    letter-spacing: 2px;
    line-height: 1.2;
}

.brand-text span {
    font-size: 16px;
    color: var(--secondary);
    font-weight: 600;
    display: block;
    margin-top: 2px;
}

.brand-text small {
    font-size: 11px;
    color: #666;
    display: block;
    margin-top: 2px;
    letter-spacing: 1px;
}

/*** Header Wrapper ***/
.header-wrapper {
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
    background: #fff !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    width: 100%;
}


.sticky-header-shell {
    position: sticky !important;
    top: 0 !important;
    z-index: 1051 !important;
    width: 100% !important;
}

.header-wrapper.scrolled {
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/*** Menu ***/
.navbar-nav {
    margin: 0 0 0 auto !important;
    gap: 0.5rem;
}

.nav-link {
    color: var(--dark) !important;
    font-weight: 600;
    padding: 10px 15px !important;
    transition: all 0.3s;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid transparent;
}

.nav-link:hover,
.nav-link.active {
    color: var(--primary) !important;
    border-bottom-color: var(--primary);
}

.dropdown-menu {
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-radius: 8px;
    margin-top: 0;
}

.dropdown-item {
    padding: 0.6rem 1.2rem;
    transition: all 0.3s ease;
    color: var(--dark);
}

.dropdown-item:hover {
    background-color: var(--primary);
    color: white !important;
    padding-left: 1.5rem;
}


/*** Facility Section ***/
.facility-img {
    overflow: hidden;
    transition: transform 0.3s ease;
}

.facility-img:hover {
    transform: scale(1.02);
}

/*** Fullscreen Modal ***/
.fullscreen-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    animation: fadeIn 0.3s;
}

.fullscreen-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.fullscreen-content {
    max-width: 95%;
    max-height: 95%;
    object-fit: contain;
    animation: zoomIn 0.3s;
}

.fullscreen-close {
    position: absolute;
    top: 20px;
    right: 40px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10000;
    transition: color 0.3s;
}

.fullscreen-close:hover {
    color: #ff4444;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes zoomIn {
    from { transform: scale(0.8); }
    to { transform: scale(1); }
}

/*** About Start ***/
.about .container .section-about-title {
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    color: var(--bs-primary);
}

.about .container .section-about-title::before {
    content: "";
    width: 50px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    margin-right: -50px;
    border: 1px solid var(--bs-primary) !important;
}
/*** About End ***/

/*** Services Start ***/
.service .service-content-inner {
    transition: 0.5s;
}
.service .service-content-inner:hover {
    position: relative;
    background: var(--bs-primary) !important;
}

.service .service-content-inner .service-content h5,
.service .service-content-inner .service-content p,
.service .service-content-inner .service-icon i {
    transition: 0.5s;
}

.service .service-content-inner:hover .service-content h5,
.service .service-content-inner:hover .service-content p,
.service .service-content-inner:hover .service-icon i {
    color: var(--bs-white) !important;
}
/*** Service End ***/

/*** Destination Start ***/
.destination .tab-class .tab-content .tab-pane .destination-img {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    z-index: 1;
}

.destination .tab-class .tab-content .tab-pane .destination-img .destination-overlay {
    position: absolute;
    bottom: -100%;
    left: 0;
    z-index: 3;
    transition: 0.5s;
}

.destination .tab-class .tab-content .tab-pane .destination-img .search-icon {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    display: flex;
    justify-content: end;
    padding: 20px 20px 0 0;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    transition: 0.5s;
}

.destination .tab-class .tab-content .tab-pane .destination-img .search-icon a i {
    opacity: 0;
    transition: 0.5s;
}

.destination .tab-class .nav-item {
    padding: 0 0 20px 0;
}
.destination .tab-class .nav-item a.active {
    background: var(--bs-primary) !important;
}

.destination .tab-class .nav-item a.active span {
    color: var(--bs-white) !important;
}

.destination .tab-class .tab-content .destination-img:hover .search-icon {
    background: rgba(19, 53, 123, 0.4);
}

.destination .tab-class .tab-content .destination-img:hover .destination-overlay {
    bottom: 0;
}

.destination .tab-class .tab-content .destination-img:hover .search-icon a i {
    opacity: 1;
}

.destination .tab-class .tab-content .destination-img img {
    transition: 0.5s;
}

.destination .tab-class .tab-content .destination-img:hover img {
    transform: scale(1.2);
}
/*** Destination End ***/

/*** Packages Start ***/
.packages .packages-item .packages-img {
    position: relative;
    overflow: hidden;
    transition: 0.5s;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    z-index: 1;
}

.packages .packages-item .packages-img .packages-info {
    background: rgba(0, 0, 0, .3);
}

.packages .packages-item .packages-img .packages-info small,
.packages .packages-item .packages-img .packages-info small i {
    color: var(--bs-white);
    transition: 0.5s;
}

.packages .packages-item .packages-img::after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 0px solid;
    border-radius: 10px !important;
    visibility: hidden;
    transition: 0.7s;
    z-index: 3;
}

.packages .packages-item .packages-img:hover.packages-img::after {
    width: 100%;
    height: 100%;
    border: 300px solid;
    border-color: rgba(19, 53, 123, 0.6) rgba(19, 53, 123, 0.6) rgba(19, 53, 123, 0.6) rgba(19, 53, 123, 0.6);
    visibility: visible;
}

.packages .packages-item .packages-img small,
.packages .packages-item .packages-img small i {
    transition: 0.5s;
}

.packages .packages-item .packages-img:hover small,
.packages .packages-item .packages-img:hover small i {
    color: var(--bs-white) !important;
}

.packages .packages-item .packages-img img {
    transition: 0.5s;
}

.packages .packages-item .packages-img:hover img {
    transform: scale(1.3);
}

.packages .packages-item .packages-img .packages-price {
    position: absolute;
    width: 100px; 
    top: 0; 
    left: 50%; 
    transform: translateX(-50%);
    display: inline-block;
    background: var(--bs-primary);
    color: var(--bs-white);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px; 
    z-index: 5;
}

.packages .packages-carousel {
    position: relative;
}

.packages .packages-carousel .owl-nav .owl-prev {
    position: absolute;
    top: -50px;
    left: 0;
    padding: 5px 30px;
    border: 1px solid var(--bs-primary);
    border-radius: 30px;
    transition: 0.5s;
}

.packages .packages-carousel .owl-nav .owl-next {
    position: absolute;
    top: -50px;
    right: 0;
    padding: 5px 30px;
    border: 1px solid var(--bs-primary);
    border-radius: 30px;
    transition: 0.5s;
}

.packages .packages-carousel .owl-nav .owl-prev i,
.packages .packages-carousel .owl-nav .owl-next i {
    color: var(--bs-primary);
    font-size: 17px;
    transition: 0.5s;
}

.packages .packages-carousel .owl-nav .owl-prev:hover,
.packages .packages-carousel .owl-nav .owl-next:hover {
    background: var(--bs-primary);
}

.packages .packages-carousel .owl-nav .owl-prev:hover i,
.packages .packages-carousel .owl-nav .owl-next:hover i {
    color: var(--bs-white);
}
/*** Packages End ***/

/*** Explore Tour Start ***/
.ExploreTour .tab-class .nav-item {
    padding: 0 0 20px 0;
}
.ExploreTour .tab-class .nav-item a.active {
    background: var(--bs-primary) !important;
}

.ExploreTour .tab-class .nav-item a.active span {
    color: var(--bs-white) !important;
}

/* National Tour Start */
.ExploreTour #NationalTab-1 .national-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.ExploreTour #NationalTab-1 .national-item img {
    transition: 0.5s;
}

.ExploreTour #NationalTab-1 .national-item:hover img {
    transform: scale(1.2);
}

.ExploreTour #NationalTab-1 .national-item .national-content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 10px;
    padding: 20px;
    background: rgba(0, 0, 0, .2);
    display: flex;
    align-items: end;
    justify-content: center;
    transition: 0.5s;
}

.ExploreTour #NationalTab-1 .national-item:hover .national-content {
    background: rgba(19, 53, 123, .6);
}

.ExploreTour #NationalTab-1 .national-item .national-plus-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.5s;
    opacity: 0;
}

.ExploreTour #NationalTab-1 .national-item:hover .national-plus-icon {
    opacity: 1;
}

.ExploreTour #NationalTab-1 .national-item .tour-offer {
    position: absolute;
    top: -1px;
    left: -1px;
    padding: 20px;
    border-top-right-radius: 40px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 80px;
    background: var(--bs-primary);
    color: var(--bs-white);
}

/* International Tour Start */
.ExploreTour #InternationalTab-2 .international-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.ExploreTour #InternationalTab-2 .international-item img {
    transition: 0.5s;
}

.ExploreTour #InternationalTab-2 .international-item:hover img {
    transform: scale(1.2);
}

.ExploreTour #InternationalTab-2 .international-item .tour-offer {
    position: absolute;
    top: -1px;
    left: -1px;
    padding: 20px;
    border-top-right-radius: 30px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 80px;
    background: var(--bs-primary);
    color: var(--bs-white);
}

.ExploreTour #InternationalTab-2 .international-item .international-content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 10px;
    padding: 20px;
    background: rgba(0, 0, 0, .3);
    display: flex;
    align-items: end;
    justify-content: center;
    transition: 0.5s;
}

.ExploreTour #InternationalTab-2 .international-item:hover .international-content {
    background: rgba(19, 53, 123, .6);
}

.ExploreTour #InternationalTab-2 .international-item .international-content .international-info a {
    font-size: 14px;
}

.ExploreTour #InternationalTab-2 .international-item .international-plus-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.5s;
    opacity: 0;
}

.ExploreTour #InternationalTab-2 .international-item:hover .international-plus-icon {
    opacity: 1;
}

/* carousel Start */
.ExploreTour #InternationalTab-2 .InternationalTour-carousel .international-item {
    position: relative;
    overflow: hidden;
}

.ExploreTour #InternationalTab-2 .InternationalTour-carousel .owl-dots {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ExploreTour #InternationalTab-2 .InternationalTour-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 15px;
    height: 15px;
    background: var(--bs-light);
    border: 1px solid var(--bs-primary);
    border-radius: 10px;
    transition: 0.5s;
}

.ExploreTour #InternationalTab-2 .InternationalTour-carousel .owl-dot.active {
    width: 40px;
    background: var(--bs-primary);
}
/*** Explore Tour End ***/

/*** Gallery Start ***/
.gallery .gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.gallery .gallery-item img {
    min-height: 300px;
    object-fit: cover;
}

.gallery .gallery-item .gallery-content {
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    transition: 0.5s;
}

.gallery .gallery-item .gallery-content .gallery-info {
    position: relative;
    margin-bottom: -100%;
    opacity: 0;
    transition: 0.5s;
}

.gallery .gallery-item .gallery-plus-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.5s;
    opacity: 0;
}

.gallery .gallery-item:hover .gallery-content .gallery-info,
.gallery .gallery-item:hover .gallery-plus-icon {
   opacity: 1;
   margin: 0;
}

.gallery .gallery-item img {
    transition: 0.5s;
}

.gallery .gallery-item:hover img {
    transform: scale(1.2);
}

.gallery .gallery-item:hover .gallery-content {
    background: rgba(19, 53, 123, 0.8);
}

.gallery .tab-class .nav-item {
    padding: 0 0 20px 0;
}
.gallery .tab-class .nav-item a.active {
    background: var(--bs-primary) !important;
}

.gallery .tab-class .nav-item a.active span {
    color: var(--bs-white) !important;
}


#imgLightbox.lb-overlay {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 99999 !important;
    background: rgba(0, 0, 0, 0.93) !important;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    overflow: hidden;
}

/* When JS sets display:flex */
#imgLightbox.lb-overlay[style*="flex"] {
    display: flex !important;
}

/* The full-size image inside the lightbox */
#lbImage {
    max-width: 90vw !important;
    max-height: 85vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 8px;
    box-shadow: 0 16px 60px rgba(0,0,0,0.7);
    display: block;
    cursor: default;
    opacity: 0;
    transition: opacity 0.25s ease;
}

/* Close ✕ button */
.lb-close {
    position: fixed !important;
    top: 18px !important;
    right: 22px !important;
    z-index: 100000 !important;
    background: rgba(255,255,255,0.18);
    border: 1.5px solid rgba(255,255,255,0.35);
    color: #fff;
    font-size: 18px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
    transition: background 0.2s;
    padding: 0;
}
.lb-close:hover { background: rgba(255,255,255,0.32); }

/* Prev ❮ / Next ❯ arrows */
.lb-prev,
.lb-next {
    position: fixed !important;
    top: 50% !important;
    transform: translateY(-50%);
    z-index: 100000 !important;
    background: rgba(255,255,255,0.18);
    border: 1.5px solid rgba(255,255,255,0.35);
    color: #fff;
    font-size: 24px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    line-height: 1;
    padding: 0;
    transition: background 0.2s;
}
.lb-prev { left: 18px !important; }
.lb-next { right: 18px !important; }
.lb-prev:hover,
.lb-next:hover { background: rgba(255,255,255,0.32); }

/* Mobile */
@media (max-width: 640px) {
    .lb-prev, .lb-next { width: 38px; height: 38px; font-size: 18px; }
    .lb-prev { left: 8px !important; }
    .lb-next { right: 8px !important; }
    #lbImage { max-width: 96vw !important; max-height: 80vh !important; }
}

/*** Gallery End ***/

/*** Tour Booking Start ***/
.booking {
    background: linear-gradient(rgba(19, 53, 123, .8), rgba(19, 53, 123, .8)), url(../img/tour-booking-bg.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.booking .container .section-booking-title {
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    color: var(--bs-white);
}

.booking .container .section-booking-title::before {
    content: "";
    width: 50px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    margin-right: -50px;
    border: 1px solid var(--bs-white) !important;
}

.booking .container form .btn.btn-primary {
    box-shadow: inset 0 0 0 0 var(--bs-primary);
}

.booking .container form .btn.btn-primary:hover {
    box-shadow: inset 800px 0 0 0 var(--bs-light) !important;
    color: var(--bs-primary) !important;
}
/*** Tour Booking end ***/

/*** Travel Guide Start ***/
.guide .guide-item .guide-img {
    position: relative;
}

.guide .guide-item .guide-img .guide-icon {
    position: absolute;
    bottom: 0; 
    left: 50%; 
    transform: translate(-50%, -50%);
    margin-bottom: -50px;
    display: flex;
    justify-content: center;
    border: 1px solid var(--bs-primary);
    background: var(--bs-light);
    z-index: 9;
}

.guide .guide-item .guide-img .guide-img-efects {
    position: relative;
    overflow: hidden;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.guide .guide-item .guide-img .guide-img-efects::after {
    content: "";
    width: 100%;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.5s;
}

.guide .guide-item:hover .guide-img-efects::after {
    height: 100%;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    background: rgba(19, 53, 123, .5);
}

.guide .guide-item .guide-img-efects img {
    transition: 0.5s;
}
.guide .guide-item:hover .guide-img-efects img {
    transform: scale(1.1);
}

.guide .guide-item .guide-title {
    position: relative;
    background: var(--bs-light);
    transition: 0.5s;
}

.guide .guide-item .guide-title::after {
    content: "";
    width: 100%;
    height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    transition: 0.5s;
}

.guide .guide-item:hover .guide-title::after {
    height: 100%;
    background: var(--bs-primary) !important;
    color: var(--bs-white);
}

.guide .guide-item .guide-title .guide-title-inner,
.guide .guide-item:hover .guide-title .guide-title-inner h4 {
    transition: 0.5s;
}

.guide .guide-item:hover .guide-title .guide-title-inner {
    position: relative;
    color: var(--bs-white) !important;
    z-index: 2;
}

.guide .guide-item:hover .guide-title .guide-title-inner h4 {
    color: var(--bs-white);
}
/*** Travel Guide End ***/

/*** Blog Start ***/
.blog .blog-item .blog-img {
    position: relative;
}

.blog .blog-item .blog-img .blog-info {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    display: flex;
    background: rgba(255, 255, 255, .2);
    color: var(--bs-white);
}

.blog .blog-item .blog-img .blog-img-inner {
    position: relative;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.blog .blog-item .blog-img .blog-img-inner .blog-icon {
    position: absolute;
    width: 100%;
    height: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
}

.blog .blog-item .blog-img .blog-img-inner .blog-icon a {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.5s;
}

.blog .blog-item .blog-img:hover .blog-img-inner .blog-icon a {
    opacity: 1;
}

.blog .blog-item .blog-img:hover .blog-img-inner .blog-icon {
    height: 100%;
    background: rgba(19, 53, 123, .6);
    opacity: 1;
}

.blog .blog-item .blog-img .blog-img-inner {
    overflow: hidden;
}

.blog .blog-item .blog-img .blog-img-inner img {
    transition: 0.5s;
}

.blog .blog-item .blog-img:hover .blog-img-inner img {
    transform: scale(1.2);
}
/*** Blog End ***/

/*** Testimonial Start ***/
.testimonial .testimonial-carousel {
    position: relative;
}

.testimonial .testimonial-carousel .testimonial-item .testimonial-img {
    position: relative;
    width: 100px; 
    height: 100px; 
    top: 0; left: 50%; 
    transform: translate(-50%, -50%);
    border: 3px solid var(--bs-primary); 
    border-style: dotted;
    border-radius: 50%;
}

.testimonial .testimonial-carousel .owl-dots {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial .testimonial-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 15px;
    height: 15px;
    background: var(--bs-light);
    border: 1px solid var(--bs-primary);
    border-radius: 10px;
    transition: 0.5s;
}

.testimonial .testimonial-carousel .owl-dot.active {
    width: 40px;
    background: var(--bs-primary);
}

.testimonial .testimonial-carousel .owl-nav .owl-prev {
    position: absolute;
    top: -55px;
    left: 0;
    padding: 5px 30px;
    border: 1px solid var(--bs-primary);
    border-radius: 30px;
    transition: 0.5s;
}

.testimonial .testimonial-carousel .owl-nav .owl-next {
    position: absolute;
    top: -55px;
    right: 0;
    padding: 5px 30px;
    border: 1px solid var(--bs-primary);
    border-radius: 30px;
    transition: 0.5s;
}

.testimonial .testimonial-carousel .owl-nav .owl-prev i,
.testimonial .testimonial-carousel .owl-nav .owl-next i {
    color: var(--bs-primary);
    font-size: 17px;
    transition: 0.5s;
}

.testimonial .testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial .testimonial-carousel .owl-nav .owl-next:hover {
    background: var(--bs-primary);
}

.testimonial .testimonial-carousel .owl-nav .owl-prev:hover i,
.testimonial .testimonial-carousel .owl-nav .owl-next:hover i {
    color: var(--bs-white);
}

.testimonial .testimonial-carousel .owl-item.center .testimonial-item .testimonial-comment {
    background: var(--bs-primary) !important;
    color: var(--bs-white);
    transition: 0.5s;
}

.testimonial .testimonial-carousel .owl-item.center .testimonial-item .testimonial-img {
    border: 3px solid var(--bs-white); 
    border-style: dotted;
    transition: 0.5s;
}
/*** Testimonial End ***/

/*** Contact Start ***/
.contact .container form .btn.btn-primary {
    box-shadow: inset 0 0 0 0 var(--bs-primary);
}

.contact .container form .btn.btn-primary:hover {
    box-shadow: inset 1000px 0 0 0 var(--bs-light) !important;
    color: var(--bs-primary) !important;
}
/*** Contact End ***/

/*** Subscribe Start ***/
.subscribe {
    background: linear-gradient(rgba(19, 53, 123, .6), rgba(19, 53, 123, .6)), url(../img/subscribe-img.jpg);
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.subscribe .subscribe-title {
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    color: var(--bs-white);
}

.subscribe .subscribe-title::before {
    content: "";
    width: 50px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    margin-right: -50px;
    border: 1px solid var(--bs-white) !important;
}

.subscribe .subscribe-title::after {
    content: "";
    width: 50px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    margin-left: -50px;
    border: 1px solid var(--bs-white) !important;
}
/*** Subscribe End ***/

/*** Footer Start ***/
.footer {
    background: var(--bs-dark);
}
.footer .footer-item a {
    line-height: 30px;
    color: var(--bs-white);
    transition: 0.5s;
}

.footer .footer-item a:hover {
    letter-spacing: 2px;
    color: var(--bs-primary);
}
/*** Footer End ***/

/*** copyright Start ***/
.copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--bs-dark) !important;
}
/*** copyright End ***/




/* responsive */

/*** Spinner Start ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}
/*** Spinner End ***/

.back-to-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    display: flex;
    width: 45px;
    height: 45px;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
    z-index: 99;
}

/*** Button Start ***/
.btn {
    font-weight: 600;
    transition: .5s;
}

.btn-square {
    width: 32px;
    height: 32px;
}

.btn-sm-square {
    width: 34px;
    height: 34px;
}

.btn-md-square {
    width: 44px;
    height: 44px;
}

.btn-lg-square {
    width: 56px;
    height: 56px;
}

.btn-square,
.btn-sm-square,
.btn-md-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    border-radius: 50%;
}

.btn.btn-primary {
    box-shadow: inset 0 0 0 0 var(--bs-primary);
}

.btn.btn-primary:hover {
    box-shadow: inset 300px 0 0 0 var(--bs-light) !important;
    color: var(--bs-primary) !important;
}

.btn.btn-light {
    box-shadow: inset 0 0 0 0 var(--bs-primary);
}

.btn.btn-light:hover {
    box-shadow: inset 300px 0 0 0 var(--bs-primary);
    color: var(--bs-light) !important;
}

.btn-hover {
    transition: 0.5s;
}

.btn-hover:hover {
    color: var(--bs-secondary) !important;
}

/*** Section Title Start ***/
.section-title {
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    color: var(--bs-primary);
}

.section-title::before {
    content: "";
    width: 50px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    margin-right: -50px;
    border: 1px solid var(--bs-primary) !important;
}

.section-title::after {
    content: "";
    width: 50px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    margin-left: -50px;
    border: 1px solid var(--bs-primary) !important;
}

/*** Topbar Start ***/
.fixed-top .container {
    transition: 0.5s;
}

.topbar {
    padding: 2px 10px 2px 20px;
    background: var(--bs-primary) !important;
}

.topbar a,
.topbar a i {
    transition: 0.5s;
}

.topbar a:hover,
.topbar a i:hover {
    color: var(--bs-secondary) !important;
}


/*** Topbar End ***/

/*** Navbar Dropdown Fix ***/
.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
}



/*** Carousel Hero Header Start ***/
.carousel-header .carousel-control-prev,
.carousel-header .carousel-control-next {
    background: transparent;
}

.carousel-header .carousel-control-prev .carousel-control-prev-icon {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    padding: 25px 20px;
    border-top-left-radius: 0;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 50px;
    background-size: 60% 60%;
}

.carousel-header .carousel-control-next .carousel-control-next-icon {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    padding: 25px 20px;
    border-top-left-radius: 50px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 0;
    background-size: 60% 60%;
}

.carousel-header .carousel .carousel-indicators li {
    opacity: 0;
}

.carousel-header .carousel-inner .carousel-item {
    position: relative;
    min-height: 100vh;
}

.carousel-header .carousel-inner .carousel-item img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-header .carousel-inner .carousel-item .carousel-caption {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 85%;
    left: 0;
    padding-top: 60px;
    display: center;
    align-items: center;
    justify-content: center;
    text-align: center;
}


/*** Carousel Hero Header End ***/

/*** Single Page Hero Header Start ***/
.bg-breadcrumb {
    background: linear-gradient(rgba(19, 53, 123, 0.5), rgba(19, 53, 123, 0.5)), url(../img/breadcrumb-bg.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding: 150px 0 50px 0;
}

.bg-breadcrumb .breadcrumb-item a {
    color: var(--bs-secondary) !important;
}
/*** Single Page Hero Header End ***/

/*** Theme Colors ***/
:root {
    --primary: #13357B;
    --secondary: #F57C00;
    --light: #F5F5F5;
    --dark: #212529;
    --bs-primary: #13357B;
    --bs-secondary: #F57C00;
    --bs-light: #F5F5F5;
    --bs-dark: #212529;
    --bs-white: #ffffff;
}

/*** Topbar ***/
.bg-primary {
    background-color: var(--primary) !important;
}

.topbar-link {
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    transition: all 0.3s;
}

.topbar-link:hover {
    color: var(--secondary);
}

.btn-outline-light {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-outline-light:hover {
    background-color: #fff;
    color: var(--primary);
    border-color: #fff;
}

/*** Navbar ***/
.navbar {
    background-color: #fff;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    padding: 15px 0;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 0;
    text-decoration: none;
}

/*** School Logo ***/
.school-logo {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 32px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    flex-shrink: 0;
}

.school-logo-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    flex-shrink: 0;
    padding: 5px;
    border: 3px solid var(--primary);
}

.school-logo-img img {
    width: 110%;
    height: 110%;
    object-fit: contain;
    border-radius: 50%;
}

/*** Brand Text ***/
.brand-text {
    text-align: center;
    padding: 0 20px;
}

.brand-text h1 {
    font-size: 24px;
    font-weight: 700;
    color: #fba831;
    margin: 0;
    font-family: 'Jost', sans-serif;
    letter-spacing: 2px;
    line-height: 1.2;
}

.brand-text span {
    font-size: 16px;
    color: var(--secondary);
    font-weight: 600;
    display: block;
    margin-top: 2px;
}

.brand-text small {
    font-size: 11px;
    color: #666;
    display: block;
    margin-top: 2px;
    letter-spacing: 1px;
}

/*** Header Wrapper ***/
.header-wrapper {
    position: sticky !important;
    top: 0 !important;
    z-index: 1050 !important;
    background: white !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.header-wrapper.scrolled {
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/*** Menu ***/
.navbar-nav {
    margin: 0 0 0 auto !important;
    gap: 0.5rem;
}

.nav-link {
    color: var(--dark) !important;
    font-weight: 600;
    padding: 10px 15px !important;
    transition: all 0.3s;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid transparent;
}

.nav-link:hover,
.nav-link.active {
    color: var(--primary) !important;
    border-bottom-color: var(--primary);
}

.dropdown-menu {
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-radius: 8px;
    margin-top: 0;
}

.dropdown-item {
    padding: 0.6rem 1.2rem;
    transition: all 0.3s ease;
    color: var(--dark);
}

.dropdown-item:hover {
    background-color: var(--primary);
    color: white !important;
    padding-left: 1.5rem;
}



/*** Services Start ***/
.service .service-content-inner {
    transition: 0.5s;
}
.service .service-content-inner:hover {
    position: relative;
    background: var(--bs-primary) !important;
}

.service .service-content-inner .service-content h5,
.service .service-content-inner .service-content p,
.service .service-content-inner .service-icon i {
    transition: 0.5s;
}

.service .service-content-inner:hover .service-content h5,
.service .service-content-inner:hover .service-content p,
.service .service-content-inner:hover .service-icon i {
    color: var(--bs-white) !important;
}
/*** Service End ***/

/*** Destination Start ***/
.destination .tab-class .tab-content .tab-pane .destination-img {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    z-index: 1;
}

.destination .tab-class .tab-content .tab-pane .destination-img .destination-overlay {
    position: absolute;
    bottom: -100%;
    left: 0;
    z-index: 3;
    transition: 0.5s;
}

.destination .tab-class .tab-content .tab-pane .destination-img .search-icon {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    display: flex;
    justify-content: end;
    padding: 20px 20px 0 0;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    transition: 0.5s;
}

.destination .tab-class .tab-content .tab-pane .destination-img .search-icon a i {
    opacity: 0;
    transition: 0.5s;
}

.destination .tab-class .nav-item {
    padding: 0 0 20px 0;
}
.destination .tab-class .nav-item a.active {
    background: var(--bs-primary) !important;
}

.destination .tab-class .nav-item a.active span {
    color: var(--bs-white) !important;
}

.destination .tab-class .tab-content .destination-img:hover .search-icon {
    background: rgba(19, 53, 123, 0.4);
}

.destination .tab-class .tab-content .destination-img:hover .destination-overlay {
    bottom: 0;
}

.destination .tab-class .tab-content .destination-img:hover .search-icon a i {
    opacity: 1;
}

.destination .tab-class .tab-content .destination-img img {
    transition: 0.5s;
}

.destination .tab-class .tab-content .destination-img:hover img {
    transform: scale(1.2);
}
/*** Destination End ***/

/*** Packages Start ***/
.packages .packages-item .packages-img {
    position: relative;
    overflow: hidden;
    transition: 0.5s;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    z-index: 1;
}

.packages .packages-item .packages-img .packages-info {
    background: rgba(0, 0, 0, .3);
}

.packages .packages-item .packages-img .packages-info small,
.packages .packages-item .packages-img .packages-info small i {
    color: var(--bs-white);
    transition: 0.5s;
}

.packages .packages-item .packages-img::after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 0px solid;
    border-radius: 10px !important;
    visibility: hidden;
    transition: 0.7s;
    z-index: 3;
}

.packages .packages-item .packages-img:hover.packages-img::after {
    width: 100%;
    height: 100%;
    border: 300px solid;
    border-color: rgba(19, 53, 123, 0.6) rgba(19, 53, 123, 0.6) rgba(19, 53, 123, 0.6) rgba(19, 53, 123, 0.6);
    visibility: visible;
}

.packages .packages-item .packages-img small,
.packages .packages-item .packages-img small i {
    transition: 0.5s;
}

.packages .packages-item .packages-img:hover small,
.packages .packages-item .packages-img:hover small i {
    color: var(--bs-white) !important;
}

.packages .packages-item .packages-img img {
    transition: 0.5s;
}

.packages .packages-item .packages-img:hover img {
    transform: scale(1.3);
}

.packages .packages-item .packages-img .packages-price {
    position: absolute;
    width: 100px; 
    top: 0; 
    left: 50%; 
    transform: translateX(-50%);
    display: inline-block;
    background: var(--bs-primary);
    color: var(--bs-white);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px; 
    z-index: 5;
}

.packages .packages-carousel {
    position: relative;
}

.packages .packages-carousel .owl-nav .owl-prev {
    position: absolute;
    top: -50px;
    left: 0;
    padding: 5px 30px;
    border: 1px solid var(--bs-primary);
    border-radius: 30px;
    transition: 0.5s;
}

.packages .packages-carousel .owl-nav .owl-next {
    position: absolute;
    top: -50px;
    right: 0;
    padding: 5px 30px;
    border: 1px solid var(--bs-primary);
    border-radius: 30px;
    transition: 0.5s;
}

.packages .packages-carousel .owl-nav .owl-prev i,
.packages .packages-carousel .owl-nav .owl-next i {
    color: var(--bs-primary);
    font-size: 17px;
    transition: 0.5s;
}

.packages .packages-carousel .owl-nav .owl-prev:hover,
.packages .packages-carousel .owl-nav .owl-next:hover {
    background: var(--bs-primary);
}

.packages .packages-carousel .owl-nav .owl-prev:hover i,
.packages .packages-carousel .owl-nav .owl-next:hover i {
    color: var(--bs-white);
}
/*** Packages End ***/

/*** Explore Tour Start ***/
.ExploreTour .tab-class .nav-item {
    padding: 0 0 20px 0;
}
.ExploreTour .tab-class .nav-item a.active {
    background: var(--bs-primary) !important;
}

.ExploreTour .tab-class .nav-item a.active span {
    color: var(--bs-white) !important;
}

/* National Tour Start */
.ExploreTour #NationalTab-1 .national-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.ExploreTour #NationalTab-1 .national-item img {
    transition: 0.5s;
}

.ExploreTour #NationalTab-1 .national-item:hover img {
    transform: scale(1.2);
}

.ExploreTour #NationalTab-1 .national-item .national-content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 10px;
    padding: 20px;
    background: rgba(0, 0, 0, .2);
    display: flex;
    align-items: end;
    justify-content: center;
    transition: 0.5s;
}

.ExploreTour #NationalTab-1 .national-item:hover .national-content {
    background: rgba(19, 53, 123, .6);
}

.ExploreTour #NationalTab-1 .national-item .national-plus-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.5s;
    opacity: 0;
}

.ExploreTour #NationalTab-1 .national-item:hover .national-plus-icon {
    opacity: 1;
}

.ExploreTour #NationalTab-1 .national-item .tour-offer {
    position: absolute;
    top: -1px;
    left: -1px;
    padding: 20px;
    border-top-right-radius: 40px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 80px;
    background: var(--bs-primary);
    color: var(--bs-white);
}

/* International Tour Start */
.ExploreTour #InternationalTab-2 .international-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.ExploreTour #InternationalTab-2 .international-item img {
    transition: 0.5s;
}

.ExploreTour #InternationalTab-2 .international-item:hover img {
    transform: scale(1.2);
}

.ExploreTour #InternationalTab-2 .international-item .tour-offer {
    position: absolute;
    top: -1px;
    left: -1px;
    padding: 20px;
    border-top-right-radius: 30px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 80px;
    background: var(--bs-primary);
    color: var(--bs-white);
}

.ExploreTour #InternationalTab-2 .international-item .international-content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 10px;
    padding: 20px;
    background: rgba(0, 0, 0, .3);
    display: flex;
    align-items: end;
    justify-content: center;
    transition: 0.5s;
}

.ExploreTour #InternationalTab-2 .international-item:hover .international-content {
    background: rgba(19, 53, 123, .6);
}

.ExploreTour #InternationalTab-2 .international-item .international-content .international-info a {
    font-size: 14px;
}

.ExploreTour #InternationalTab-2 .international-item .international-plus-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.5s;
    opacity: 0;
}

.ExploreTour #InternationalTab-2 .international-item:hover .international-plus-icon {
    opacity: 1;
}

/* carousel Start */
.ExploreTour #InternationalTab-2 .InternationalTour-carousel .international-item {
    position: relative;
    overflow: hidden;
}

.ExploreTour #InternationalTab-2 .InternationalTour-carousel .owl-dots {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ExploreTour #InternationalTab-2 .InternationalTour-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 15px;
    height: 15px;
    background: var(--bs-light);
    border: 1px solid var(--bs-primary);
    border-radius: 10px;
    transition: 0.5s;
}

.ExploreTour #InternationalTab-2 .InternationalTour-carousel .owl-dot.active {
    width: 40px;
    background: var(--bs-primary);
}
/*** Explore Tour End ***/

/*** Gallery Start ***/
.gallery .gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.gallery .gallery-item img {
    min-height: 300px;
    object-fit: cover;
}

.gallery .gallery-item .gallery-content {
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    transition: 0.5s;
}

.gallery .gallery-item .gallery-content .gallery-info {
    position: relative;
    margin-bottom: -100%;
    opacity: 0;
    transition: 0.5s;
}

.gallery .gallery-item .gallery-plus-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.5s;
    opacity: 0;
}

.gallery .gallery-item:hover .gallery-content .gallery-info,
.gallery .gallery-item:hover .gallery-plus-icon {
   opacity: 1;
   margin: 0;
}

.gallery .gallery-item img {
    transition: 0.5s;
}

.gallery .gallery-item:hover img {
    transform: scale(1.2);
}

.gallery .gallery-item:hover .gallery-content {
    background: rgba(19, 53, 123, 0.8);
}

.gallery .tab-class .nav-item {
    padding: 0 0 20px 0;
}
.gallery .tab-class .nav-item a.active {
    background: var(--bs-primary) !important;
}

.gallery .tab-class .nav-item a.active span {
    color: var(--bs-white) !important;
}
/*** Gallery End ***/

/*** Tour Booking Start ***/
.booking {
    background: linear-gradient(rgba(19, 53, 123, .8), rgba(19, 53, 123, .8)), url(../img/tour-booking-bg.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.booking .container .section-booking-title {
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    color: var(--bs-white);
}

.booking .container .section-booking-title::before {
    content: "";
    width: 50px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    margin-right: -50px;
    border: 1px solid var(--bs-white) !important;
}

.booking .container form .btn.btn-primary {
    box-shadow: inset 0 0 0 0 var(--bs-primary);
}

.booking .container form .btn.btn-primary:hover {
    box-shadow: inset 800px 0 0 0 var(--bs-light) !important;
    color: var(--bs-primary) !important;
}
/*** Tour Booking end ***/

/*** Travel Guide Start ***/
.guide .guide-item .guide-img {
    position: relative;
}

.guide .guide-item .guide-img .guide-icon {
    position: absolute;
    bottom: 0; 
    left: 50%; 
    transform: translate(-50%, -50%);
    margin-bottom: -50px;
    display: flex;
    justify-content: center;
    border: 1px solid var(--bs-primary);
    background: var(--bs-light);
    z-index: 9;
}

.guide .guide-item .guide-img .guide-img-efects {
    position: relative;
    overflow: hidden;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.guide .guide-item .guide-img .guide-img-efects::after {
    content: "";
    width: 100%;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.5s;
}

.guide .guide-item:hover .guide-img-efects::after {
    height: 100%;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    background: rgba(19, 53, 123, .5);
}

.guide .guide-item .guide-img-efects img {
    transition: 0.5s;
}
.guide .guide-item:hover .guide-img-efects img {
    transform: scale(1.1);
}

.guide .guide-item .guide-title {
    position: relative;
    background: var(--bs-light);
    transition: 0.5s;
}

.guide .guide-item .guide-title::after {
    content: "";
    width: 100%;
    height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    transition: 0.5s;
}

.guide .guide-item:hover .guide-title::after {
    height: 100%;
    background: var(--bs-primary) !important;
    color: var(--bs-white);
}

.guide .guide-item .guide-title .guide-title-inner,
.guide .guide-item:hover .guide-title .guide-title-inner h4 {
    transition: 0.5s;
}

.guide .guide-item:hover .guide-title .guide-title-inner {
    position: relative;
    color: var(--bs-white) !important;
    z-index: 2;
}

.guide .guide-item:hover .guide-title .guide-title-inner h4 {
    color: var(--bs-white);
}
/*** Travel Guide End ***/

/*** Blog Start ***/
.blog .blog-item .blog-img {
    position: relative;
}

.blog .blog-item .blog-img .blog-info {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    display: flex;
    background: rgba(255, 255, 255, .2);
    color: var(--bs-white);
}

.blog .blog-item .blog-img .blog-img-inner {
    position: relative;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.blog .blog-item .blog-img .blog-img-inner .blog-icon {
    position: absolute;
    width: 100%;
    height: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
}

.blog .blog-item .blog-img .blog-img-inner .blog-icon a {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.5s;
}

.blog .blog-item .blog-img:hover .blog-img-inner .blog-icon a {
    opacity: 1;
}

.blog .blog-item .blog-img:hover .blog-img-inner .blog-icon {
    height: 100%;
    background: rgba(19, 53, 123, .6);
    opacity: 1;
}

.blog .blog-item .blog-img .blog-img-inner {
    overflow: hidden;
}

.blog .blog-item .blog-img .blog-img-inner img {
    transition: 0.5s;
}

.blog .blog-item .blog-img:hover .blog-img-inner img {
    transform: scale(1.2);
}
/*** Blog End ***/

/*** Testimonial Start ***/
.testimonial .testimonial-carousel {
    position: relative;
}

.testimonial .testimonial-carousel .testimonial-item .testimonial-img {
    position: relative;
    width: 100px; 
    height: 100px; 
    top: 0; left: 50%; 
    transform: translate(-50%, -50%);
    border: 3px solid var(--bs-primary); 
    border-style: dotted;
    border-radius: 50%;
}

.testimonial .testimonial-carousel .owl-dots {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial .testimonial-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 15px;
    height: 15px;
    background: var(--bs-light);
    border: 1px solid var(--bs-primary);
    border-radius: 10px;
    transition: 0.5s;
}

.testimonial .testimonial-carousel .owl-dot.active {
    width: 40px;
    background: var(--bs-primary);
}

.testimonial .testimonial-carousel .owl-nav .owl-prev {
    position: absolute;
    top: -55px;
    left: 0;
    padding: 5px 30px;
    border: 1px solid var(--bs-primary);
    border-radius: 30px;
    transition: 0.5s;
}

.testimonial .testimonial-carousel .owl-nav .owl-next {
    position: absolute;
    top: -55px;
    right: 0;
    padding: 5px 30px;
    border: 1px solid var(--bs-primary);
    border-radius: 30px;
    transition: 0.5s;
}

.testimonial .testimonial-carousel .owl-nav .owl-prev i,
.testimonial .testimonial-carousel .owl-nav .owl-next i {
    color: var(--bs-primary);
    font-size: 17px;
    transition: 0.5s;
}

.testimonial .testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial .testimonial-carousel .owl-nav .owl-next:hover {
    background: var(--bs-primary);
}

.testimonial .testimonial-carousel .owl-nav .owl-prev:hover i,
.testimonial .testimonial-carousel .owl-nav .owl-next:hover i {
    color: var(--bs-white);
}

.testimonial .testimonial-carousel .owl-item.center .testimonial-item .testimonial-comment {
    background: var(--bs-primary) !important;
    color: var(--bs-white);
    transition: 0.5s;
}

.testimonial .testimonial-carousel .owl-item.center .testimonial-item .testimonial-img {
    border: 3px solid var(--bs-white); 
    border-style: dotted;
    transition: 0.5s;
}
/*** Testimonial End ***/

/*** Contact Start ***/
.contact .container form .btn.btn-primary {
    box-shadow: inset 0 0 0 0 var(--bs-primary);
}

.contact .container form .btn.btn-primary:hover {
    box-shadow: inset 1000px 0 0 0 var(--bs-light) !important;
    color: var(--bs-primary) !important;
}
/*** Contact End ***/

/*** Subscribe Start ***/
.subscribe {
    background: linear-gradient(rgba(19, 53, 123, .6), rgba(19, 53, 123, .6)), url(../img/subscribe-img.jpg);
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.subscribe .subscribe-title {
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    color: var(--bs-white);
}

.subscribe .subscribe-title::before {
    content: "";
    width: 50px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    margin-right: -50px;
    border: 1px solid var(--bs-white) !important;
}

.subscribe .subscribe-title::after {
    content: "";
    width: 50px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    margin-left: -50px;
    border: 1px solid var(--bs-white) !important;
}
/*** Subscribe End ***/

/*** Footer Start ***/
.footer {
    background: var(--bs-dark);
}
.footer .footer-item a {
    line-height: 30px;
    color: var(--bs-white);
    transition: 0.5s;
}

.footer .footer-item a:hover {
    letter-spacing: 2px;
    color: var(--bs-primary);
}
/*** Footer End ***/

/*** copyright Start ***/
.copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--bs-dark) !important;
}

 /* History Section */

        .history-description {
            font-size: 16px;
            line-height: 1.8;
            text-align: justify;
        }

        .history-description p {
            margin-bottom: 15px;
        }

        .section-title {
            font-weight: 600;
            letter-spacing: 1px;
        }


        .about-img img {
            transition: transform 0.3s ease;
        }

        .about-img:hover img {
            transform: scale(1.05);
        }



/* Activity Section */
.activity-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.activity-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
}

.activity-item:hover .activity-img img {
    transform: scale(1.05);
}

.activity-item:hover .activity-overlay {
    opacity: 1 !important;
}

.activity-content {
    min-height: 150px;
}



/* EVENT SECTION */

.event-page-header {
    position: relative;
    background-color: #2c3e70;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 300px;
    display: flex;
    align-items: center;
}

.event-page-header::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    height: 60px;
    background: #fff; /* match your page background color */
     /* clip-path: ellipse(55% 100% at 50% 100%);*/
}
.event-header-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(20,20,70,.75) 0%, rgba(102,126,234,.6) 100%);
    display: flex;
    align-items: center;
    width: 100%;
}
.event-header-overlay .container {
    position: relative;
    z-index: 1;
    padding-top: 60px;
    padding-bottom: 60px;
}
.subscribe-title {
    color: #ffd700;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 10px;
}
.header-event-name {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    background: rgba(255,255,255,.15);
    display: inline-block;
    padding: 4px 22px;
    border-radius: 30px;
    margin-bottom: 10px;
}
.event-category-btn {
    padding: 11px 28px;
    background: #f8f9fa;
    color: #333;
    border: 2px solid #dee2e6;
    border-radius: 50px;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .6px;
    text-decoration: none;
    display: inline-block;
    transition: all .28s ease;
}
.event-category-btn:hover {
    background: #e9ecef;
    border-color: #adb5bd;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,.1);
    color: #333;
    text-decoration: none;
}
.event-category-btn.active {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    border-color: #667eea;
    box-shadow: 0 4px 15px rgba(102,126,234,.45);
}
.event-info-card {
    background: #fff;
    border-top: 4px solid #667eea;
    border-left: none;
}
.event-meta-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}
.meta-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 160px;
}
.meta-item i {
    font-size: 1.4rem;
    margin-top: 2px;
    flex-shrink: 0;
}
.event-photo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.photo-cell {
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 3/4;
    background: #eee;
    transition: transform .25s ease, box-shadow .25s ease;
    box-shadow: 0 3px 10px rgba(0,0,0,.1);
}
.photo-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}
.photo-cell:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0,0,0,.2);
}
.photo-cell:hover img {
    transform: scale(1.06);
}
.lb-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,.93);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: zoom-out;
}
.lb-overlay.open { display: flex; }
.lb-overlay img {
    max-width: 90vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0,0,0,.6);
    cursor: default;
    transition: opacity .2s ease;
}
.lb-close {
    position: absolute;
    top: 18px; right: 22px;
    background: rgba(255,255,255,.15);
    border: none; color: #fff;
    font-size: 18px; width: 40px; height: 40px;
    border-radius: 50%; cursor: pointer;
    transition: background .2s;
}
.lb-close:hover { background: rgba(255,255,255,.3); }
.lb-prev, .lb-next {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,.15);
    border: none; color: #fff;
    font-size: 22px; width: 50px; height: 50px;
    border-radius: 50%; cursor: pointer;
    transition: background .2s;
}
.lb-prev { left: 18px; }
.lb-next { right: 18px; }
.lb-prev:hover, .lb-next:hover { background: rgba(255,255,255,.3); }
@keyframes fadeIn { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
.event-info-card, .event-photo-grid { animation: fadeIn .4s ease-out; }


/* ── Sub-gallery navigation buttons (Level 2) ─────────────────────────
   Add these styles to your main CSS file (e.g. sainikschool.css)
   ──────────────────────────────────────────────────────────────────── */

.event-sub-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 20px;
    border-radius: 30px;
    border: 2px solid #667eea;
    color: #667eea;
    background: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s ease;
    line-height: 1.3;
    text-align: center;
}

.event-sub-btn:hover {
    background: #667eea;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
    text-decoration: none;
}

.event-sub-btn.active {
    background: #667eea;
    color: #fff;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.sub-btn-date {
    font-size: 0.72rem;
    font-weight: 400;
    opacity: 0.8;
    margin-top: 2px;
    letter-spacing: 0.02em;
}



/* Navbar */
/* Hide submenus by default */
.dropdown-submenu {
    display: none;
    position: absolute;
    right: 100%;
    left: auto;
    top: 0;
    margin-right: 0.125rem;
    min-width: 200px;
    z-index: 1000;
}

/* Show submenu on hover - with transition delay */
.dropend:hover>.dropdown-submenu {
    display: block;
}

/* IMPORTANT: Keep submenu visible when hovering over submenu itself */
.dropdown-submenu:hover {
    display: block;
}

/* Add transition delay to prevent sudden disappearance */
.dropend {
    position: relative;
}

.dropend:hover>.dropdown-submenu,
.dropdown-submenu:hover {
    display: block;
    animation: fadeIn 0.15s ease-in;
    margin-top: -45px;
    margin-right: -10px;
}

/* Remove default Bootstrap dropdown toggle arrow */
.dropdown-toggle-custom::after {
    display: none;
}

/* Custom arrow on the LEFT side */
.dropdown-item .bx-chevron-left {
    float: left;
    margin-right: 0.5rem;
    margin-left: 0;
    transition: transform 0.2s;
}

.dropend:hover .bx-chevron-left {
    transform: translateX(-3px);
}

/* Better spacing */
.dropdown-item {
    padding: 0.5rem 1rem;
    position: relative;
}

/* Smooth animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Styling for submenu items */
.dropdown-submenu .dropdown-item {
    font-size: 0.9rem;
    white-space: nowrap;
}

.dropdown-submenu .dropdown-item:hover {
    background-color: #f8f9fa;
    padding-left: 1.5rem;
}

/* Ensure main dropdown doesn't overflow */
.dropdown-menu {
    overflow: visible !important;
}

/* Create invisible bridge between parent and submenu */
.dropend::before {
    content: '';
    position: absolute;
    right: -0.125rem;
    top: 0;
    width: 0.5rem;
    height: 100%;
    z-index: 999;
}

/* Create a gap bridge - invisible area between parent and submenu */
.dropdown-submenu::before {
    content: '';
    position: absolute;
    left: 100%;
    top: 0;
    width: 10px;
    /* Bridge width */
    height: 100%;
    background: transparent;
}

/* Adjust submenu position to account for bridge */
.dropdown-submenu {
    display: none;
    position: absolute;
    right: calc(100% + 10px);
    /* Add bridge width */
    left: auto;
    top: 0;
    min-width: 200px;
    z-index: 1000;
}


/* =============================================
   BANNER — FIXED HEIGHT BOX, IMAGE+TITLE INSIDE
   ============================================= */
.carousel-header {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block;
    overflow: hidden;
}

.carousel-header .carousel,
.carousel-header .carousel-inner { width: 100%; }

/* Each slide: fixed height container — image AND title both live inside this */
.carousel-header .carousel-item {
    position: relative !important;
    width: 100%;
    height: 72vh !important;
    min-height: 340px !important;
    max-height: 660px !important;
    overflow: hidden !important;
}

/* Image is absolute, fills the container fully */
.carousel-header .carousel-item img,
.carousel-header .carousel-item video {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    background: #000000 !important;
    z-index: 1;
}

/* Dark gradient overlay — bottom 40% of container */
.carousel-header .carousel-item .banner-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 42%;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.90) 0%,
        rgba(0,0,0,0.55) 50%,
        transparent 100%
    );
    z-index: 2;
    pointer-events: none;
}

/* Title pinned to bottom of the container */
.carousel-header .carousel-item .banner-title-block {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 4;
    padding: 14px 44px 20px 44px;
    text-align: center;
}

.carousel-header .banner-slide-title {
    font-size: clamp(0.9rem, 1.9vw, 1.75rem) !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    text-shadow:
        0 0 18px rgba(0,0,0,1),
        0 2px 8px rgba(0,0,0,1),
        1px 1px 4px rgba(0,0,0,1);
    margin: 0 !important;
    line-height: 1.3 !important;
    /* clamp to 2 lines max so it never overflows */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Dot indicators — inside bottom of container */
.carousel-header .carousel-indicators {
    bottom: 4px !important;
    z-index: 10 !important;
    margin-bottom: 0 !important;
}

.carousel-header .carousel-indicators button {
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255,255,255,0.9) !important;
    background: transparent !important;
    opacity: 1 !important;
    margin: 0 4px !important;
    transition: all 0.3s !important;
    flex: unset !important;
    padding: 0 !important;
}

.carousel-header .carousel-indicators button.active {
    background: #fff !important;
    width: 24px !important;
    border-radius: 5px !important;
}

/* Arrows — centered vertically */
.carousel-header .carousel-control-prev,
.carousel-header .carousel-control-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: rgba(0,0,0,0.45) !important;
    opacity: 0.85 !important;
    z-index: 10 !important;
}

.carousel-header .carousel-control-prev { left: 12px !important; }
.carousel-header .carousel-control-next { right: 12px !important; }

.carousel-header .carousel-control-prev-icon,
.carousel-header .carousel-control-next-icon {
    width: 20px !important;
    height: 20px !important;
}


/* =============================================
   UNIFIED TICKER BAR — NOTICE & NEWS (same style)
   ============================================= */

/* shared base */
.ticker-bar {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    min-height: 46px;
    position: relative;
    z-index: 999;
}

/* NOTICE bar — dark navy + red label */
.notice-bar {
    background: #002060;
    border-bottom: 3px solid #e63946;
}

/* NEWS bar — dark green + gold label */
.news-bar {
    background: #003d1a;
    border-bottom: 3px solid #f5a623;
}

/* Label box */
.ticker-label {
    font-weight: 800;
    font-size: 0.82rem;
    padding: 0 24px;
    letter-spacing: 1.5px;
    white-space: nowrap;
    flex-shrink: 0;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    color: #fff;
    border-right: 2px solid rgba(255,255,255,0.25);
}

.notice-label { background: #e63946; }
.news-label   { background: #f5a623; color: #1a1a1a !important; }

/* Scrolling area */
.ticker-track-wrap {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* Keyframes — both use same animation name with different class targets */
@keyframes tickerScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.ticker-track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    animation: tickerScroll 5s linear infinite;
}

.ticker-track:hover {
    animation-play-state: paused;
}

/* news runs slightly faster */
.news-track {
    animation-duration: 4s;
}

.ticker-item {
    font-size: 0.88rem;
    font-weight: 500;
    color: #fff;
    padding: 0 6px;
}

.news-track .ticker-item {
    color: #d4f7d4;
}

.ticker-sep {
    color: #ffd700;
    font-weight: 900;
    margin: 0 14px;
    font-size: 0.6rem;
    opacity: 0.8;
}

.news-track .ticker-sep {
    color: #f5a623;
}


/* =============================================
   UNIVERSAL SECTION GAPS
   ============================================= */
.container-fluid.about {
    margin-top: 50px;
}
.container-fluid.service,
.container-fluid.activity {
    margin-top: 40px;
}
.mess-menu-section,
.birthday-section,
.infrastructure-gallery-section,
.container-fluid.facility-section,
.container-fluid.subscribe {
    margin-top: 40px;
}


.mess-menu-section {
    background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%) !important;
    padding: 80px 0 !important;
    position: relative;
    overflow: hidden;
    margin-top: 40px;
    display: block !important;
    visibility: visible !important;
}
.mess-menu-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120"><path fill="rgba(255,255,255,0.1)" d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z"></path></svg>') center bottom / cover no-repeat;
    opacity: 0.3;
    pointer-events: none;
}
/* ==============================
   MESS MENU SECTION - TITLE FIX
============================== */
.mess-menu-section .section-title {
    color: #1a1a2e !important;
}

.mess-menu-section h1 {
    color: #1a1a2e !important;
}

.mess-menu-section h1 .text-primary {
    color: #1a73e8 !important;
}

.mess-menu-section .text-muted {
    color: #666666 !important;
}

/* Image Card */
.mess-img-outer {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    cursor: zoom-in;
    background: #f0f0f0;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.mess-img-outer:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 80px rgba(0,0,0,0.45);
}
.mess-img-outer img {
    width: 100%;
    height: 480px;
    object-fit: contain;
    display: block;
    background: #f8f9fa;
    transition: transform 0.4s ease;
}
.mess-img-outer:hover img {
    transform: scale(1.04);
}

/* Caption */
.mess-img-caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.72) 0%, transparent 100%);
    color: #fff;
    text-align: center;
    padding: 40px 20px 18px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    pointer-events: none;
}
.mess-img-caption i {
    font-size: 0.85rem;
    margin: 0 6px;
    opacity: 0.8;
}

/* Zoom Icon */
.mess-zoom-icon {
    position: absolute;
    top: 16px; right: 18px;
    background: rgba(255,255,255,0.2);
    border: 1.5px solid rgba(255,255,255,0.4);
    color: #fff;
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.mess-img-outer:hover .mess-zoom-icon {
    opacity: 1;
}


/* ==============================
   FULLSCREEN LIGHTBOX
============================== */
#messFullscreenOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 2147483647; /* max z-index */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

#messFullscreenOverlay.show {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Image Wrap */
#messFullscreenImgWrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 60px 30px 20px;
    box-sizing: border-box;
}

#messFullscreenImg {
    display: block;
    max-width: 88vw;
    max-height: 80vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 30px 100px rgba(0,0,0,0.7);
    cursor: zoom-out;
    animation: messImgPop 0.36s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

@keyframes messImgPop {
    from { opacity: 0; transform: scale(0.7); }
    to   { opacity: 1; transform: scale(1);   }
}

/* Close Button */
#messFullscreenClose {
    position: fixed;
    top: 16px;
    right: 20px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, transform 0.25s;
    z-index: 2147483647;
    line-height: 1;
}
#messFullscreenClose:hover {
    background: rgba(255,255,255,0.28);
    transform: rotate(90deg);
}

/* Caption */
#messFullscreenCaption {
    color: rgba(255,255,255,0.8);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-align: center;
    padding: 0 20px;
    margin-top: 4px;
}

/* Hint */
#messFullscreenHint {
    color: rgba(255,255,255,0.3);
    font-size: 0.78rem;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 16px;
    letter-spacing: 0.05em;
}
#messFullscreenHint kbd {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.45);
}


/* Birthday Section */
.birthday-section {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    padding: 80px 0;
    position: relative;
}

.birthday-card {
    background: white;
    border-radius: 15px;
    padding: 25px 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
    height: 100%;
}

.birthday-card:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(0,0,0,0.25);
}

.birthday-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid #f5576c;
    margin: 0 auto 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.birthday-placeholder {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 3rem;
    font-weight: 700;
    margin: 0 auto 15px;
    border: 5px solid #f5576c;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.birthday-card h5 {
    color: #333;
    font-weight: 700;
    margin-bottom: 8px;
}

.birthday-date {
    color: #f5576c;
    font-weight: 600;
    margin-bottom: 5px;
}

.birthday-designation {
    color: #666;
    font-size: 0.9rem;
}

/* Infrastructure Gallery */
.infrastructure-gallery-section {
    background: #f8f9fa;
    padding: 80px 0;
}

.infrastructure-card {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    height: 300px;
    margin-bottom: 30px;
    cursor: pointer;
}

.infrastructure-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.infrastructure-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.infrastructure-card:hover img {
    transform: scale(1.1);
}

.infrastructure-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
    padding: 20px;
    transform: translateY(10px);
    opacity: 0;
    transition: all 0.3s ease;
}

.infrastructure-card:hover .infrastructure-overlay {
    transform: translateY(0);
    opacity: 1;
}

.infrastructure-overlay h5 {
    color: white;
    font-weight: 700;
    margin-bottom: 5px;
}

.infrastructure-overlay p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    margin: 0;
}

.section-title-white {
    color: white;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.section-subtitle-white {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.1rem;
    margin-bottom: 40px;
}

/* Slick Slider for Birthdays */
.cadet-slider .slick-slide {
    padding: 0 15px;
}

.cadet-slider .slick-prev,
.cadet-slider .slick-next {
    z-index: 1;
    width: 45px;
    height: 45px;
    background: white;
    border-radius: 50%;
}

.cadet-slider .slick-prev:before,
.cadet-slider .slick-next:before {
    color: #f5576c;
}

.cadet-slider .slick-prev {
    left: -55px;
}

.cadet-slider .slick-next {
    right: -55px;
}

.cadet-slider .slick-dots {
    bottom: -40px;
}

.cadet-slider .slick-dots li button:before {
    color: white;
    font-size: 12px;
}

.carousel-header{
    width:100%;
    position:relative;
    overflow:hidden;
    background:transparent;
    display:block;
}
/* Bootstrap inner — MUST be block, not flex */
.carousel-header .carousel-inner{
    display:block !important;
    width:100%;
    overflow:hidden;
    position:relative;
}
/* Each slide — fixed viewport height */
.carousel-header .carousel-item{
    position:relative;
    width:100%;
    height:70vh;
    min-height:280px;
    max-height:680px;
    overflow:hidden;
    background:transparent;
    /* Bootstrap needs this to be block, not flex */
    display:none;
}
.carousel-header .carousel-item.active{
    display:block;
}
/* Transition slide (Bootstrap adds .carousel-item-next / .carousel-item-prev during slide) */
.carousel-header .carousel-item-next,
.carousel-header .carousel-item-prev{
    display:block;
    background:transparent;
}

/* IMAGE fills the slide completely — cover, centre */
.carousel-header .carousel-item img,
.carousel-header .carousel-item video{
    position:absolute;
    top:0; left:0;
    width:100% !important;
    height:100% !important;
    object-fit:cover;
    object-position:center center;
    display:block;
    z-index:1;
    /* prevent any img from going inline and creating gaps */
    vertical-align:bottom;
    background:transparent;
}

/* Dark gradient — bottom 45% only so top of image is clear */
.carousel-header .banner-overlay{
    position:absolute;
    bottom:0; left:0; right:0;
    height:45%;
    background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.45) 55%,transparent 100%);
    z-index:2;
    pointer-events:none;
}

/* Title pinned to bottom */
.carousel-header .banner-title-block{
    position:absolute;
    bottom:0; left:0; right:0;
    z-index:4;
    padding:36px 44px 18px;
    text-align:center;
}
.carousel-header .banner-slide-title{
    color:#fff;
    font-size:clamp(.9rem,2.2vw,1.6rem);
    font-weight:900;
    letter-spacing:.07em;
    text-transform:uppercase;
    margin:0;
    text-shadow:0 1px 8px rgba(0,0,0,.7),0 0 20px rgba(0,0,0,.5);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    line-height:1.3;
}

/* Dot indicators */
.carousel-header .carousel-indicators{
    z-index:5;
    bottom:8px;
    margin-bottom:0;
}
.carousel-header .carousel-indicators [data-bs-target],
.carousel-header .carousel-indicators button{
    width:10px !important; height:10px !important;
    border-radius:50% !important;
    background:rgba(255,255,255,.5) !important;
    border:2px solid rgba(255,255,255,.8) !important;
    margin:0 4px;
    padding:0;
    flex:unset;
    opacity:1;
    transition:all .3s;
}
.carousel-header .carousel-indicators [data-bs-target].active,
.carousel-header .carousel-indicators button.active{
    background:#fff !important;
    width:28px !important;
    border-radius:6px !important;
}

/* Prev / Next arrows */
.carousel-header .carousel-control-prev,
.carousel-header .carousel-control-next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:44px; height:44px;
    border-radius:50%;
    background:rgba(0,0,0,.40) !important;
    opacity:1;
    z-index:5;
    display:flex; align-items:center; justify-content:center;
    border:none;
}
.carousel-header .carousel-control-prev{left:14px;}
.carousel-header .carousel-control-next{right:14px;}
.carousel-header .carousel-control-prev-icon,
.carousel-header .carousel-control-next-icon{
    width:20px; height:20px;
    background-size:100%;
}
.carousel-header .carousel-control-prev:hover,
.carousel-header .carousel-control-next:hover{
    background:rgba(0,0,0,.60) !important;
}



/* ---- MESS MENU ---- */
.mess-menu-section {
    padding: 72px 0 80px;
    background: #ffffff;
}
.mess-img-outer {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(10,79,168,.2), 0 0 0 3px #0d6efd;
    cursor: zoom-in;
    transition: box-shadow .3s, transform .3s;
    display: block;
}
.mess-img-outer:hover {
    box-shadow: 0 18px 56px rgba(10,79,168,.3), 0 0 0 4px #0d6efd;
    transform: scale(1.006);
}
.mess-img-outer img { display: block; width: 100%; height: auto; object-fit: contain; }
.mess-img-caption {
    background: #1a2a4a;
    color: #ffc107;
    text-align: center;
    padding: 10px 20px;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .05em;
}
.mess-img-caption i { color: #0d6efd; margin: 0 6px; }

/* =============================================
   BIRTHDAY SECTION
   ============================================= */
.birthday-section {
    padding: 72px 0 80px;
    background: #ffffff !important;
}
.birthday-section::before,
.birthday-section::after { display:none !important; content:none !important; }

/* Tabs */
.bday-tabs-wrapper { display:flex; justify-content:center; margin-bottom:36px; }
.bday-tabs { display:inline-flex; background:#fff; border-radius:50px; padding:5px;
    box-shadow:0 4px 20px rgba(13,110,253,.12); border:1px solid rgba(13,110,253,.1); gap:4px; }
.bday-tab-btn { display:inline-flex; align-items:center; gap:8px; padding:10px 28px;
    border-radius:50px; border:none; background:transparent; color:#6c757d;
    font-size:.92rem; font-weight:700; cursor:pointer; transition:all .3s; white-space:nowrap; }
.bday-tab-btn .tab-count { background:#e9ecef; color:#6c757d; border-radius:20px;
    padding:1px 9px; font-size:.72rem; font-weight:800; transition:all .3s; }
.bday-tab-btn.active { background:#0d6efd; color:#fff; box-shadow:0 4px 14px rgba(13,110,253,.3); }
.bday-tab-btn.active .tab-count { background:rgba(255,255,255,.25); color:#fff; }
.bday-tab-btn:not(.active):hover { background:#e8f0fe; color:#0d6efd; }
.bday-tab-panel { display:none; }
.bday-tab-panel.active { display:block; }

/* Curtain-drop (1–2 cards centred) */
.bday-curtain-wrap {
    display:flex; justify-content:center; gap:28px;
    flex-wrap:wrap; padding:10px 0 32px;
}
@keyframes curtain-fall {
    0%   { transform:translateY(-100%) scaleY(0.3); opacity:0; }
    55%  { opacity:1; }
    75%  { transform:translateY(8px) scaleY(1.04); }
    90%  { transform:translateY(-4px) scaleY(.98); }
    100% { transform:translateY(0) scaleY(1); opacity:1; }
}
.bday-card.curtain-drop { animation: curtain-fall 1s cubic-bezier(.22,.61,.36,1) both; }
.bday-card.curtain-drop:nth-child(2) { animation-delay:.2s; }

/* Marquee */
.bday-marquee-outer {
    overflow: hidden;
    width: 100%;
    position: relative;
    padding: 14px 0 20px;
    -webkit-mask-image: linear-gradient(to right,transparent 0%,#000 7%,#000 93%,transparent 100%);
            mask-image: linear-gradient(to right,transparent 0%,#000 7%,#000 93%,transparent 100%);
}
.bday-marquee-outer:hover .bday-marquee-track { animation-play-state: paused; }
.bday-marquee-track {
    display: flex; gap: 24px; width: max-content;
    animation: bday-scroll 20s linear infinite;
}
.bday-marquee-track.spd-1    { animation-duration: 10s; }
.bday-marquee-track.spd-2    { animation-duration: 14s; }
.bday-marquee-track.spd-3    { animation-duration: 18s; }
.bday-marquee-track.spd-4    { animation-duration: 22s; }
.bday-marquee-track.spd-many { animation-duration: 38s; }
@keyframes bday-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Card */
.bday-card {
    flex: 0 0 230px; width: 230px;
    background: #fff; border-radius: 16px;
    border: 1px solid #dee2e6;
    box-shadow: 0 4px 18px rgba(0,0,0,.08);
    overflow: hidden; transition: transform .3s, box-shadow .3s, border-color .3s;
    text-align: center; position: relative;
}
.bday-card:hover { transform: translateY(-8px); box-shadow: 0 18px 45px rgba(13,110,253,.18); border-color: #0d6efd; }
.bday-card.curtain-drop:hover { transform: translateY(-8px); }
.bday-stripe { height: 5px; background: linear-gradient(90deg,#0d6efd,#1a2a4a); }
.bday-card.today .bday-stripe { background: linear-gradient(90deg,#ffc107,#ff8c00); animation: pulse-stripe 1.8s ease-in-out infinite alternate; }
@keyframes pulse-stripe { from{opacity:1;} to{opacity:.6;} }
.bday-card.today { border-color:#ffc107; box-shadow:0 0 0 3px #ffc107,0 10px 34px rgba(255,193,7,.22); }
.today-tag { position:absolute; top:10px; left:10px; background:#ffc107; color:#000;
    font-size:.64rem; font-weight:800; padding:3px 8px; border-radius:5px;
    letter-spacing:.05em; text-transform:uppercase; z-index:3; }

/* ---- PHOTO AREA — always 270px tall ---- */
.bday-img-wrap {
    width: 100%;
    height: 270px;
    overflow: hidden;
    background: #e8f0fe;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Real photo: cover + top-align face */
.bday-img-wrap img.bday-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;   /* ← shows face, not feet */
    display: block;
    transition: transform .45s;
}
.bday-card:hover .bday-img-wrap img.bday-photo { transform: scale(1.05); }

/* ---- PLACEHOLDER when NO photo ---- */
.bday-avatar-placeholder {
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(145deg, #e8f0fe 0%, #d4e3ff 50%, #c2d7ff 100%);
    position: relative;
    overflow: hidden;
}
/* subtle decorative circles */
.bday-avatar-placeholder::before {
    content: '';
    position: absolute;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: rgba(13,110,253,.07);
    top: -40px; right: -40px;
}
.bday-avatar-placeholder::after {
    content: '';
    position: absolute;
    width: 100px; height: 100px;
    border-radius: 50%;
    background: rgba(13,110,253,.07);
    bottom: -20px; left: -20px;
}
/* silhouette circle */
.bday-avatar-circle {
    width: 90px; height: 90px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d6efd 0%, #1a2a4a 100%);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 24px rgba(13,110,253,.35);
    position: relative; z-index: 1;
    border: 3px solid #fff;
}
.bday-avatar-circle .bday-initial {
    font-size: 2.4rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    text-transform: uppercase;
    font-family: Arial, sans-serif;
}
/* staff placeholder colour */
.bday-avatar-placeholder.staff-ph {
    background: linear-gradient(145deg, #f0e8ff 0%, #ddd6f3 50%, #cdc2f0 100%);
    display: none;
}
.bday-avatar-placeholder.staff-ph .bday-avatar-circle {
    background: linear-gradient(135deg, #6f42c1 0%, #1a2a4a 100%);
    box-shadow: 0 6px 24px rgba(111,66,193,.35);
}
.bday-avatar-label {
    font-size: .7rem;
    font-weight: 700;
    color: #0d6efd;
    letter-spacing: .08em;
    text-transform: uppercase;
    position: relative; z-index: 1;
    background: rgba(255,255,255,.7);
    padding: 2px 10px;
    border-radius: 20px;
}
.bday-avatar-placeholder.staff-ph .bday-avatar-label { color: #6f42c1; }

/* cake badge */
.bday-cake-badge {
    position:absolute; bottom:10px; right:10px;
    background:#ffc107; border-radius:50%; width:34px; height:34px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.05rem; border:2px solid #fff;
    box-shadow:0 2px 8px rgba(0,0,0,.2); z-index:2;
}

/* Card body */
.bday-body { padding:14px 13px 16px; }
.bday-name { font-size:.97rem; font-weight:800; color:#1a2a4a; margin-bottom:2px; line-height:1.25; }
.bday-gr   { font-size:.71rem; color:#6c757d; margin-bottom:4px; font-weight:600; }
.bday-class-pill { display:inline-block; background:#e8f0fe; color:#0d6efd;
    border:1px solid rgba(13,110,253,.2); border-radius:20px; padding:2px 10px;
    font-size:.74rem; font-weight:700; margin-bottom:7px; }
.bday-date-tag { display:inline-flex; align-items:center; gap:4px; background:#1a2a4a;
    color:#ffc107; border-radius:20px; padding:4px 11px; font-size:.77rem; font-weight:700; margin-bottom:7px; }
.bday-quote {
    font-size:.70rem; color:#3a4a5c; font-style:italic; line-height:1.5;
    padding:8px 10px 8px 12px;
    background:linear-gradient(135deg,#f0f5ff 0%,#e8f0fe 100%);
    border-left:3px solid #0d6efd;
    border-radius:0 6px 6px 0; text-align:left; margin-top:8px; min-height:44px;
    box-shadow:inset 0 1px 3px rgba(13,110,253,.07);
}

/* Month pill */
.bday-month-pill { display:inline-flex; align-items:center; gap:8px; background:#1a2a4a;
    color:#fff; border-radius:30px; padding:7px 22px; font-size:.85rem; font-weight:700; margin-bottom:28px; }
.bday-month-pill span { color:#ffc107; }



  .footer {
    background: #fff;
    color: #333;
    border-top: 1px solid #ddd;
  }

  /* ── LOGO BAR ── */
  .footer-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 36px 80px 28px;
    border-bottom: 1px solid #ddd;
    flex-wrap: wrap;
    gap: 20px;
  }

  .brand-left {
    display: flex;
    align-items: center;
    gap: 18px;
  }

  .school-logo-wrap {
    width: 110px; height: 110px;
    flex-shrink: 0;
  }
  .school-logo-wrap img {
    width: 100%; height: 100%;
    object-fit: contain;
  }

  .brand-name { display: flex; flex-direction: column; gap: 2px; }
  .brand-name .motto {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #1a6b1a;
  }
  .brand-name h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: #1a6b1a;
    letter-spacing: 1px;
    line-height: 1.1;
    text-transform: uppercase;
  }
  .brand-name .reg {
    font-size: 12.5px;
    color: #444;
    font-weight: 600;
    margin-top: 5px;
    line-height: 1.65;
  }

  .ministry-seal {
    width: 110px; height: 110px;
    border: 3px solid #1a3a6b;
    border-radius: 50%;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: #f5f8ff;
    flex-shrink: 0;
  }
  .ministry-seal img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }

  /* ── COLUMNS ── */
  .footer-columns {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    padding: 40px 80px;
    gap: 40px;
  }

  .footer-col h4 {
    font-size: 17px;
    font-weight: 700;
    color: #111;
    margin-bottom: 16px;
  }

  .addr-item {
    font-size: 13.5px;
    line-height: 1.7;
    color: #444;
    margin-bottom: 8px;
  }
  .addr-item a { color: #444; text-decoration: none; }
  .addr-item a:hover { color: #1a6b1a; text-decoration: underline; }

  .social-row { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
  .social-btn {
    width: 42px; height: 42px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; text-decoration: none; color: #fff;
    transition: opacity 0.2s, transform 0.2s;
  }
  .social-btn:hover { opacity: 0.85; transform: translateY(-2px); }
  .social-btn.fb { background: #1877f2; }
  .social-btn.ig { background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
  .social-btn.em { background: #1a6b1a; }
  .social-btn.wa { background: #25d366; }
  .social-btn.yt { background: #ff0000; }

  .link-list { list-style: none; }
  .link-list li { margin-bottom: 10px; }
  .link-list li a { font-size: 13.5px; color: #444; text-decoration: none; }
  .link-list li a:hover { color: #1a6b1a; }

  .footer-col.center { text-align: center; }
  .footer-col.right  { text-align: right; }

  /* ── COPYRIGHT ── */
  .footer-bottom {
    text-align: center;
    padding: 15px 80px;
    background: #f7f7f7;
    border-top: 1px solid #ddd;
    font-size: 13px;
    color: #555;
  }
  .footer-bottom a { color: #1a6b1a; font-weight: 600; text-decoration: none; }
  .footer-bottom a:hover { text-decoration: underline; }

 


          /* ── Footer Wrapper ── */
        .footer-section {
            background: #fff;
            border-top: 3px solid #e0e0e0;
            padding: 50px 0 20px;
        }

        /* Top logo bar */
        .footer-logo-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 30px;
            border-bottom: 1px solid #ddd;
            margin-bottom: 40px;
        }
        .footer-logo-bar .school-brand {
            display: flex;
            align-items: center;
            gap: 18px;
        }
        .footer-logo-bar .school-brand img.school-logo {
            height: 100px;
            width: 100px;
        }
        .footer-logo-bar .school-brand .brand-text h3 {
            color: #f57c00;
            font-size: 2rem;
            font-weight: 800;
            margin: 0;
            line-height: 1;
            letter-spacing: 1px;
        }
        .footer-logo-bar .school-brand .brand-text .tagline {
            color: #555;
            font-size: 0.78rem;
            font-style: italic;
            letter-spacing: 3px;
            text-transform: uppercase;
            margin-bottom: 4px;
        }
        .footer-logo-bar .school-brand .brand-text .reg-info {
            font-size: 0.75rem;
            color: #333;
            font-weight: 600;
        }
        .footer-logo-bar .ministry-seal img {
            height: 110px;
        }

        /* Columns */
        .footer-col h4 {
            font-size: 1.15rem;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 20px;
            position: relative;
            padding-bottom: 10px;
        }
        .footer-col h4::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0;
            width: 40px; height: 3px;
            background: #f57c00;
            border-radius: 2px;
        }

        /* Address col */
        .footer-col .address-item {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            margin-bottom: 10px;
            color: #444;
            font-size: 0.88rem;
            line-height: 1.5;
        }
        .footer-col .address-item i {
            color: #f57c00;
            margin-top: 3px;
            min-width: 16px;
        }

        /* Social icons */
        .social-icons { display: flex; gap: 8px; margin-top: 18px; }
        .social-icons a {
            width: 36px; height: 36px;
            border-radius: 6px;
            display: flex; align-items: center; justify-content: center;
            color: #fff;
            font-size: 0.9rem;
            text-decoration: none;
            transition: opacity 0.2s;
        }
        .social-icons a:hover { opacity: 0.85; }
        .social-icons .fb   { background: #1877f2; }
        .social-icons .ig   { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
        .social-icons .em   { background: #ea4335; }
        .social-icons .wa   { background: #25d366; }
        .social-icons .yt   { background: #ff0000; }

        /* Quick / Important links */
        .footer-col .link-list { list-style: none; padding: 0; margin: 0; }
        .footer-col .link-list li { margin-bottom: 10px; }
        .footer-col .link-list li a {
            text-decoration: none;
            color: #444;
            font-size: 0.88rem;
            transition: color 0.2s;
        }
        .footer-col .link-list li a:hover { color: #1a6b2f; }

        /* Copyright bar */
        .footer-copyright {
            background: #f57c00;
            color: #fff;
            text-align: center;
            padding: 14px 0;
            font-size: 0.85rem;
        }
        .footer-copyright a { color: #cde8d5; text-decoration: none; }


        /* trustee */
        .guide-item {
            transition: all 0.3s ease;
            height: 100%;
            display: flex;
            flex-direction: column;
            background: #fff;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
        }

        .guide-item:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        }

        .guide-img {
            position: relative;
            overflow: hidden;
            height: 300px;
        }

        .guide-img-efects {
            height: 100%;
            overflow: hidden;
        }

        .guide-img-efects img {
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .guide-item:hover .guide-img-efects img {
            transform: scale(1.1);
        }

        .guide-title {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #fff;
            padding: 20px;
        }

        .guide-title-inner {
            width: 100%;
        }

        .guide-title-inner h4 {
            color: #13357B;
            font-weight: 600;
            margin-bottom: 10px;
            font-size: 1.25rem;
        }

        .trustee-description {
            font-size: 14px;
            color: #666;
            line-height: 1.6;
            margin-top: 10px;
        }

        .trustee-description p {
            margin-bottom: 8px;
            text-align: center;
        }

        .section-title {
            color: #13357B;
            font-weight: 600;
            display: inline-block;
            padding: 5px 15px;
            background: #fff;
            border-radius: 30px;
        }

    

        


/* ═══════════════════════════════════════════════════════
   ABOUT SCHOOL PAGE 
   ═══════════════════════════════════════════════════════ */

/*** About Start ***/
.about .container .section-about-title {
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    color: var(--bs-primary);
}

.about .container .section-about-title::before {
    content: "";
    width: 50px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    margin-right: -50px;
    border: 1px solid var(--bs-primary) !important;
}
/*** About End ***/




/* ═══════════════════════════════════════════════════════
   ADMISSION PAGE
   ═══════════════════════════════════════════════════════ */

:root {
    --navy: #153969;
    --orange: #f57c00;
    --orange-light: #fff8f0;
    --orange-border: #ffe0b2;
}

/* ── Page Header ── */
.admission-hero {
    min-height: 300px;
    background-image: url('../img/Admission-banner.jpg'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.admission-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 0;
}

.admission-hero::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    height: 60px;
    background: #fff;
     /* clip-path: ellipse(55% 100% at 50% 100%);*/
}

.admission-hero-overlay {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 80px 0 90px;
}

.admission-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,.7);
    display: inline-block;
    margin-bottom: 12px;
    position: relative;
}

.admission-subtitle::before,
.admission-subtitle::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 28px;
    height: 1.5px;
    background: rgba(255,255,255,.45);
    transform: translateY(-50%);
}

.admission-subtitle::before { right: 100%; margin-right: 8px; }
.admission-subtitle::after  { left:  100%; margin-left:  8px; }
/* ── Sticky Tabs ── */
.admission-tabs-wrapper {
    background: #fff;
    border-bottom: 3px solid var(--navy);
    padding-top: 12px;
    position: sticky !important;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.admission-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
.admission-tabs .tab-btn {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -3px;
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: all .25s;
    letter-spacing: .4px;
    text-transform: uppercase;
    font-family: inherit;
}
.admission-tabs .tab-btn:hover { color: var(--orange); }
.admission-tabs .tab-btn.active {
    color: var(--orange);
    border-bottom-color: var(--orange);
}
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ── Steps ── */
.step-circle {
    width: 72px; height: 72px; border-radius: 50%;
    border: 2px solid var(--orange); background: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; font-weight: 700; color: var(--orange);
    margin: 0 auto 14px; transition: all .3s;
    box-shadow: 0 4px 14px rgba(245,124,0,.15);
}
.step-card:hover .step-circle { background: var(--orange); color: #fff; }
.step-card h6 { font-weight: 700; color: var(--navy); font-size: 15px; }
.step-card p  { font-size: 13px; color: #6c757d; margin: 0; }

/* ── Documents Card ── */
.doc-card { background: var(--navy); border-radius: 14px; padding: 40px; color: #fff; }
.doc-card h4 { font-weight: 700; font-size: 1.3rem; margin-bottom: 24px; color: #fff; }
.doc-category { margin-bottom: 20px; }
.doc-category h6 { font-weight: 700; font-size: 14px; color: var(--orange); margin-bottom: 8px; }
.doc-category ul { list-style: none; padding: 0; margin: 0; }
.doc-category ul li {
    padding: 4px 0 4px 18px; position: relative;
    font-size: 14px; color: rgba(255,255,255,.88); line-height: 1.5;
}
.doc-category ul li::before { content: '›'; position: absolute; left: 0; color: var(--orange); font-weight: 700; }
.note-banner {
    background: #2d5016; color: #fff; text-align: center;
    padding: 18px 24px; border-radius: 8px; font-weight: 700;
    font-size: 15px; margin-top: 24px; border-left: 4px solid var(--orange);
}

/* ── Buttons ── */
.btn-outline-navy {
    border: 2px solid var(--navy); color: var(--navy); background: transparent;
    font-weight: 700; font-size: 13px; padding: 9px 22px; border-radius: 6px;
    text-decoration: none; transition: all .25s; letter-spacing: .4px;
    text-transform: uppercase; cursor: pointer; display: inline-flex;
    align-items: center; gap: 6px;
}
.btn-outline-navy:hover { background: var(--navy); color: #fff; }

.btn-navy {
    background: var(--navy); color: #fff; border: 2px solid var(--navy);
    font-weight: 700; font-size: 13px; padding: 9px 22px; border-radius: 6px;
    text-decoration: none; transition: all .25s; letter-spacing: .4px;
    text-transform: uppercase; cursor: pointer; display: inline-flex;
    align-items: center; gap: 6px;
}
.btn-navy:hover { background: #0e2a4f; color: #fff; }

.btn-orange {
    background: var(--orange); color: #fff; border: 2px solid var(--orange);
    font-weight: 700; font-size: 13px; padding: 9px 22px; border-radius: 6px;
    text-decoration: none; transition: all .25s; letter-spacing: .4px;
    text-transform: uppercase; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
}
.btn-orange:hover { background: #e65100; border-color: #e65100; color: #fff; }

/* ── CTA Band ── */
.cta-band {
    background: #f0f4f9; border: 1px solid #dde3ec; border-left: 4px solid var(--orange);
    border-radius: 10px; padding: 22px 28px; display: flex;
    flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
}
.cta-band p { margin: 0; font-size: 13px; color: #555; font-weight: 600;
               text-transform: uppercase; letter-spacing: .5px; }

/* ── Contact Band ── */
.contact-info-band {
    background: var(--orange-light); border: 1px solid var(--orange-border);
    border-radius: 10px; padding: 16px 28px;
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: center; gap: 20px; margin-top: 20px;
}
.contact-info-band a {
    color: var(--navy); font-weight: 700; font-size: 14px;
    text-decoration: none; display: inline-flex; align-items: center; gap: 7px;
}
.contact-info-band a:hover { color: var(--orange); }
.contact-info-band i { color: var(--orange); }
.contact-sep { color: #ccc; }

/* ── AISSEE Banner ── */
.aissee-banner {
    background: var(--navy); color: #fff; border-radius: 10px;
    padding: 28px 32px; text-align: center; margin-top: 32px;
    border-top: 4px solid var(--orange);
}
.aissee-banner p { font-size: 15px; font-weight: 600; margin-bottom: 16px; line-height: 1.6; }

/* ── FAQ Accordion ── */
.faq-accordion { list-style: none; padding: 0; margin: 0; }
.faq-item {
    border: 1px solid var(--orange-border); border-radius: 10px;
    margin-bottom: 12px; overflow: hidden; transition: box-shadow .2s;
}
.faq-item:hover { box-shadow: 0 4px 18px rgba(245,124,0,.12); }
.faq-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 24px; background: #fff; cursor: pointer;
    user-select: none; gap: 14px; transition: background .2s;
}
.faq-header:hover { background: var(--orange-light); }
.faq-header.open  { background: var(--orange-light); }
.faq-title {
    font-size: 15px; font-weight: 700; color: var(--navy);
    flex: 1; margin: 0; display: flex; align-items: center; gap: 12px;
}
.faq-icon {
    width: 34px; height: 34px; border-radius: 50%; background: var(--orange);
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 700; flex-shrink: 0;
    transition: transform .35s cubic-bezier(.4,0,.2,1), background .2s;
    line-height: 1; border: none;
}
.faq-header.open .faq-icon { transform: rotate(45deg); background: #e65100; }
.faq-body { display: none; padding: 0 24px 22px; background: #fff;
             border-top: 1px solid var(--orange-border); }
.faq-body.show { display: block; animation: slideDown .3s ease; }
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.faq-text-content { font-size: 14px; line-height: 1.8; color: #555; padding-top: 16px; }
.faq-text-content p  { margin-bottom: 8px; }
.faq-text-content ul,
.faq-text-content ol { padding-left: 20px; }
.faq-text-content li { margin-bottom: 4px; }

/* ── PDF Viewer ── */
.faq-pdf-section { margin-top: 16px; }
.faq-pdf-toolbar {
    display: flex; align-items: center; gap: 10px; padding: 10px 16px;
    background: var(--navy); border-radius: 8px 8px 0 0;
}
.faq-pdf-toolbar .pdf-name {
    color: rgba(255,255,255,.75); font-size: 13px; flex: 1;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.faq-pdf-toolbar a {
    color: var(--orange); font-weight: 700; font-size: 12px;
    text-decoration: none; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px; border: 1px solid var(--orange);
    border-radius: 4px; transition: all .2s; flex-shrink: 0;
}
.faq-pdf-toolbar a:hover { background: var(--orange); color: #fff; }
.faq-pdf-embed {
    width: 100%; height: 500px; border: none;
    border-radius: 0 0 8px 8px; background: #f5f5f5; display: block;
}
.faq-pdf-fallback {
    background: #f8f9fa; border: 1px dashed #ccc;
    border-radius: 0 0 8px 8px; padding: 30px;
    text-align: center; color: #666; font-size: 14px;
}

/* ── Enquiry Form ── */
.enquiry-section {
    background: #fff; border-radius: 14px; padding: 40px;
    box-shadow: 0 4px 30px rgba(21,57,105,.08); border-top: 4px solid var(--orange);
}
.enquiry-section h4 { font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.form-label { font-weight: 600; font-size: 14px; color: #333; }
.form-control, .form-select {
    border: 1px solid #cdd5e0; border-radius: 7px;
    padding: 10px 14px; font-size: 14px;
    transition: border-color .2s, box-shadow .2s;
    width: 100%; box-sizing: border-box;
}
.form-control:focus, .form-select:focus {
    border-color: var(--orange); box-shadow: 0 0 0 3px rgba(245,124,0,.12); outline: none;
}
.phone-input-group { display: flex; }
.phone-flag {
    border: 1px solid #cdd5e0; border-right: none; border-radius: 7px 0 0 7px;
    padding: 10px 14px; background: #f0f4f9; font-size: 14px;
    display: flex; align-items: center; gap: 6px;
    white-space: nowrap; color: #333; font-weight: 600;
    flex-shrink: 0;
}
.phone-input-group .form-control { border-radius: 0 7px 7px 0; }
.btn-submit {
    background: var(--orange); color: #fff; border: none;
    padding: 13px 44px; border-radius: 8px; font-weight: 700;
    font-size: 15px; letter-spacing: .5px; cursor: pointer;
    transition: background .25s; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 8px;
}
.btn-submit:hover { background: #e65100; }
.btn-submit:disabled { background: #ccc; cursor: not-allowed; }
.section-divider { border: none; border-top: 1px dashed #dde3ec; margin: 40px 0; }

/* ── Success Box ── */
.success-box {
    background: var(--orange-light); border: 2px solid var(--orange);
    border-radius: 14px; padding: 50px 30px; text-align: center;
}
.success-icon {
    width: 72px; height: 72px; background: var(--orange); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;
}




/* ── Scroll animations ── */
.slide-left, .slide-right, .slide-up {
    opacity: 0;
    transition: opacity 0.75s ease, transform 0.75s ease;
    will-change: transform, opacity;
}
.slide-left  { transform: translateX(-70px); }
.slide-right { transform: translateX( 70px); }
.slide-up    { transform: translateY( 50px); }
.slide-left.in-view, .slide-right.in-view, .slide-up.in-view { opacity:1; transform:translate(0,0); }
.slide-left.delay-1,.slide-right.delay-1,.slide-up.delay-1{ transition-delay:0.10s; }
.slide-left.delay-2,.slide-right.delay-2,.slide-up.delay-2{ transition-delay:0.20s; }
.slide-left.delay-3,.slide-right.delay-3,.slide-up.delay-3{ transition-delay:0.30s; }
.slide-left.delay-4,.slide-right.delay-4,.slide-up.delay-4{ transition-delay:0.40s; }
.slide-left.delay-5,.slide-right.delay-5,.slide-up.delay-5{ transition-delay:0.50s; }

/* ══════════════════════════════════════════
   TICKER BAR — FIXED seamless scroll
   ══════════════════════════════════════════ */
.ticker-bar {
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    overflow: hidden;
    position: relative;
    z-index: 999;
}

/* Notice bar = red, News bar = green */
.notice-bar { background: #c0392b; color: #fff; }
.news-bar   { background: #1a6b1a; color: #fff; }

/* Left label badge */
.ticker-label {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 18px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1.2px;
    white-space: nowrap;
    text-transform: uppercase;
    z-index: 2;
}
.notice-label { background: #96281b; }
.news-label   { background: #145214; }

/* Scrolling area */
.ticker-track-wrap {
    flex: 1;
    overflow: hidden;
    height: 100%;
    position: relative;
}

.ticker-track {
    display: inline-flex;
    width: max-content;
    white-space: nowrap;
    will-change: transform;
    /* animation applied by JS after measuring exact px widths */
}

/* Pause on hover */
.ticker-track-wrap:hover .ticker-track {
    animation-play-state: paused;
}

/* Single fallback item — CSS only, no JS needed */
@keyframes singleScroll {
    0%   { transform: translateX(100vw); }
    100% { transform: translateX(-110%); }
}
.ticker-track.single-item {
    animation: singleScroll 14s linear infinite;
}

/* Individual item link */
a.ticker-item {
    display: inline-block;
    padding: 0 14px;
    color: #fff !important;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity .2s;
    line-height: 40px;
}
a.ticker-item:hover {
    text-decoration: underline;
    opacity: .82;
}

/* Bullet separator */
.ticker-sep {
    display: inline-block;
    margin: 0 4px;
    opacity: 0.45;
    font-size: 9px;
    line-height: 40px;
    vertical-align: middle;
    color: #fff;
}

/* about */

.page-header {
    position: relative;
    background-image: url('img/about.jpeg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 80px 0;
    overflow: hidden;
}
.page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 190, 10, 0.68);
}
.page-header .container {
    position: relative;
    z-index: 2;
}
.page-header-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,0.85);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.page-header-label::before,
.page-header-label::after {
    content: '';
    display: inline-block;
    width: 36px;
    height: 1px;
    background: rgba(255,255,255,0.55);
}
.page-header h1 {
    color: #fff;
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 700;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* Content styles */
.about-description {
    font-size: 16px;
    line-height: 1.8;
    text-align: justify;
    color: #6c757d;
}
.about-description p { margin-bottom: 15px; }
.wow { visibility: hidden; }


/* accadmic */

.academic-hero {
    min-height: 300px;
    background-image: url('../img/academic.jpg'); /* 👈 Replace with your image path */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.academic-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 0;
}

.academic-hero::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    height: 60px;
    background: #fff;
     /* clip-path: ellipse(55% 100% at 50% 100%);*/
}

.academic-hero-overlay {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 80px 0 90px;
}

.academic-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,.7);
    display: inline-block;
    margin-bottom: 12px;
    position: relative;
}

.academic-subtitle::before,
.academic-subtitle::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 28px;
    height: 1.5px;
    background: rgba(255,255,255,.45);
    transform: translateY(-50%);
}

.academic-subtitle::before { right: 100%; margin-right: 8px; }
.academic-subtitle::after  { left:  100%; margin-left:  8px; }

/* ── Breadcrumb ───────────────────────────────────────────────────── */
.academic-breadcrumb-bar { background: #f1f5f9; border-bottom: 1px solid #e2e8f0; padding: 10px 0; }
.academic-breadcrumb-bar .breadcrumb-item a { color: #2563a8; text-decoration: none; font-size: 14px; }
.academic-breadcrumb-bar .breadcrumb-item.active { color: #64748b; font-size: 14px; }
.academic-breadcrumb-bar .breadcrumb-item + .breadcrumb-item::before { color: #94a3b8; }

/* ── Section ──────────────────────────────────────────────────────── */
.academic-section { background: #f8fafc; min-height: 60vh; }

/* ── Card ─────────────────────────────────────────────────────────── */
.academic-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 20px rgba(0,0,0,.07);
    overflow: hidden;
}

/* ── Table ────────────────────────────────────────────────────────── */
.academic-table { border-collapse: collapse; font-family: 'Segoe UI', Arial, sans-serif; width: 100%; }
.academic-table thead tr { border-bottom: 2px solid #1a3c5e; }
.academic-table thead th {
    padding: 18px 24px; font-size: 12px; font-weight: 800;
    letter-spacing: 1.2px; text-transform: uppercase;
    color: #1a3c5e; background: #fff;
}
.academic-table thead th.col-sno    { width: 80px; }
.academic-table thead th.col-type   { width: 160px; }
.academic-table thead th.col-action { width: 240px; white-space: nowrap; }
.academic-table tbody tr { border-bottom: 1px solid #e8ecf0; transition: background .15s; }
.academic-table tbody tr:last-child { border-bottom: none; }
.academic-table tbody tr:hover { background: #f0f7ff; }
.academic-table tbody td { padding: 16px 24px; font-size: 13.5px; color: #1e293b; vertical-align: middle; }
.academic-table tbody td.col-sno  { font-weight: 700; color: #334155; font-size: 14px; }
.academic-table tbody td.col-doc  { font-weight: 600; font-size: 13px; letter-spacing: .3px; }
.academic-table tbody td.col-type { }

/* ── Type Badge ───────────────────────────────────────────────────── */
.type-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: rgba(26,60,94,0.08);
    color: #1a3c5e;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    border-radius: 20px;
    border: 1px solid rgba(26,60,94,0.18);
    white-space: nowrap;
}

/* ── Action Buttons ───────────────────────────────────────────────── */
.action-btns { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; white-space: nowrap; }

.btn-view {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 14px; background: #1a3c5e; color: #fff;
    font-size: 11.5px; font-weight: 700; letter-spacing: .5px;
    border: none; border-radius: 6px; cursor: pointer;
    text-decoration: none;
    transition: background .2s, transform .15s; white-space: nowrap;
}
.btn-view:hover { background: #2563a8; transform: translateY(-1px); color: #fff; }
.btn-view i { font-size: 13px; }

.btn-download {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 14px; background: #fff; color: #1a3c5e;
    font-size: 11.5px; font-weight: 700; letter-spacing: .5px;
    border: 2px solid #1a3c5e; border-radius: 6px; cursor: pointer;
    text-decoration: none;
    transition: all .2s, transform .15s; white-space: nowrap;
}
.btn-download:hover { background: #1a3c5e; color: #fff; transform: translateY(-1px); }
.btn-download i { font-size: 13px; }

/* ── Empty State ──────────────────────────────────────────────────── */
.no-docs-msg { text-align: center; padding: 60px 24px !important; color: #94a3b8; font-size: 15px; }
.no-docs-msg i { font-size: 36px; display: block; margin-bottom: 10px; color: #cbd5e1; }
.no-docs-msg span { display: block; }

/* ── PDF Modal ────────────────────────────────────────────────────── */
.pdf-modal { display: none; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; }
.pdf-modal.active { display: flex; }
.pdf-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.65); backdrop-filter: blur(4px); }
.pdf-box {
    position: relative; z-index: 1; background: #fff;
    border-radius: 14px; width: 92vw; max-width: 1050px; height: 90vh;
    display: flex; flex-direction: column;
    box-shadow: 0 30px 90px rgba(0,0,0,.4); overflow: hidden;
    animation: pdfIn .25s cubic-bezier(.16,1,.3,1);
}
@keyframes pdfIn {
    from { transform: translateY(20px) scale(.98); opacity: 0; }
    to   { transform: none; opacity: 1; }
}
.pdf-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; flex-shrink: 0;
    background: linear-gradient(135deg, #1a3c5e, #2563a8); gap: 12px;
}
.pdf-title {
    color: #fff; font-size: 13px; font-weight: 700;
    letter-spacing: .4px; text-transform: uppercase;
    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pdf-header-btns { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pdf-hbtn {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(255,255,255,.15); color: #fff;
    font-size: 11px; font-weight: 600; padding: 6px 12px;
    border-radius: 6px; text-decoration: none;
    border: 1px solid rgba(255,255,255,.2); transition: background .2s; white-space: nowrap;
}
.pdf-hbtn:hover { background: rgba(255,255,255,.28); color: #fff; }
.pdf-close {
    background: rgba(255,255,255,.15); color: #fff;
    border: 1px solid rgba(255,255,255,.2); border-radius: 6px;
    width: 32px; height: 32px; font-size: 22px; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .2s; padding: 0; flex-shrink: 0;
}
.pdf-close:hover { background: rgba(220,38,38,.75); }
.pdf-body {
    flex: 1; overflow: hidden; background: #525659;
    position: relative; display: flex; align-items: center; justify-content: center;
}
.pdf-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.pdf-loading {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: #e2e8f0; gap: 14px; font-size: 13px; z-index: 2; pointer-events: none;
}
.pdf-spinner {
    width: 40px; height: 40px;
    border: 3px solid rgba(255,255,255,.2); border-top-color: #fff;
    border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Responsive ───────────────────────────────────────────────────── */


/* CBSE */

:root {
    --primary:       #13357B;
    --primary-dark:  #0D2560;
    --primary-deep:  #071840;
    --primary-light: #1E4A9E;
    --primary-pale:  #3A6CC4;
    --accent:        #f57c00;
    --accent-light:  #fb8c00;
    --accent-pale:   #fff3e0;
    --white:         #FFFFFF;
    --off-white:     #F4F6FB;
    --text-dark:     #0D1F45;
    --text-mid:      #1E3A6E;
    --text-muted:    #5A7AAE;
    --border:        rgba(19,53,123,0.18);
    --shadow:        rgba(10,30,80,0.14);
}

/* ── Hero ─────────────────────────────────────────────────────────── */
.cbse-hero {
    min-height: 300px;
    background-image: url('../img/cbse.png'); /* 👈 Replace with your image path */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.cbse-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 0;
}

.cbse-hero::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    height: 60px;
    background: #fff;
     /* clip-path: ellipse(55% 100% at 50% 100%);*/
}

.cbse-hero-overlay {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 80px 0 90px;
}

.cbse-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,.7);
    display: inline-block;
    margin-bottom: 12px;
    position: relative;
}

.cbse-subtitle::before,
.cbse-subtitle::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 28px;
    height: 1.5px;
    background: rgba(255,255,255,.45);
    transform: translateY(-50%);
}

.cbse-subtitle::before { right: 100%; margin-right: 8px; }
.cbse-subtitle::after  { left:  100%; margin-left:  8px; }

/* ── Search ───────────────────────────────────────────────────────── */
.cbse-search-wrap {
    max-width: 520px;
    margin: 0 auto;
    position: relative;
}
.cbse-search-wrap input {
    width: 100%;
    padding: 13px 50px 13px 20px;
    border-radius: 50px;
    border: none;
    outline: none;
    font-size: 0.95rem;
    background: rgba(255,255,255,0.97);
    color: var(--text-dark);
    box-shadow: 0 4px 28px rgba(0,0,0,0.20);
}
.cbse-search-wrap input::placeholder { color: #7A9ACC; }
.cbse-search-icon {
    position: absolute;
    right: 17px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary);
    font-size: 1.2rem;
    pointer-events: none;
}

/* ── Stats Strip ──────────────────────────────────────────────────── */
.cbse-stats {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 52px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 18px var(--shadow);
}
.cbse-stat {
    flex: 1;
    min-width: 120px;
    padding: 24px 14px;
    text-align: center;
    border-right: 1px solid var(--border);
}
.cbse-stat:last-child { border-right: none; }
.cbse-stat-number {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
}
.cbse-stat-label {
    font-size: 0.71rem;
    color: var(--text-muted);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 5px;
}

/* ── Main Section ─────────────────────────────────────────────────── */
.cbse-section {
    background: var(--off-white);
    padding: 72px 0 80px;
}
.cbse-section .container {
    overflow: visible !important;
}

/* ── Section Heading ──────────────────────────────────────────────── */
.cbse-head {
    text-align: center;
    margin-bottom: 42px;
}
.cbse-head-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(19,53,123,0.08);
    border: 1px solid rgba(19,53,123,0.18);
    color: var(--primary-dark);
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    padding: 5px 16px;
    border-radius: 30px;
    margin-bottom: 10px;
}
.cbse-head h2 {
    color: var(--text-dark);
    font-size: 1.9rem;
    font-weight: 800;
    margin-bottom: 8px;
}
.cbse-head-line {
    width: 52px;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--accent-light));
    border-radius: 4px;
    margin: 0 auto;
}

/* ── Filter Tabs ──────────────────────────────────────────────────── */
.cbse-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 36px;
}
.cbse-filter-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    border: 1.5px solid var(--border);
    background: var(--white);
    color: var(--text-muted);
    transition: all 0.2s;
}
.cbse-filter-tab:hover,
.cbse-filter-tab.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.cbse-filter-tab .tc {
    background: rgba(19,53,123,0.10);
    color: var(--primary-dark);
    font-size: 0.68rem;
    padding: 1px 7px;
    border-radius: 10px;
    font-weight: 700;
}
.cbse-filter-tab.active .tc {
    background: rgba(255,255,255,0.22);
    color: #fff;
}

/* ── Accordion ────────────────────────────────────────────────────── */
.cbse-list {
    max-width: 860px;
    margin: 0 auto;
    position: relative;
    overflow: visible;
}

.cbse-item {
    border-radius: 10px;
    margin-bottom: 10px;
    border: 1px solid var(--border);
    box-shadow: 0 2px 12px var(--shadow);
    transition: box-shadow 0.35s, border-radius 0.2s;
    position: relative;
    overflow: hidden;
}
.cbse-item:hover {
    box-shadow: 0 6px 22px rgba(10,30,80,0.18);
}
.cbse-item.active {
    border-color: var(--primary);
    box-shadow: 0 8px 32px rgba(10,30,80,0.26);
    border-radius: 6px;
    position: relative;
    width:        calc(100vw - 40px);
    max-width:    1500px;
    left:         50%;
    transform:    translateX(-50%);
    margin-left:  0;
    margin-right: 0;
}
.cbse-item.hidden-search { display: none; }

/* Question row */
.cbse-question {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 17px 22px;
    cursor: pointer;
    user-select: none;
    background: var(--primary);
    transition: background 0.2s;
}
.cbse-question:hover,
.cbse-item.active .cbse-question {
    background: var(--primary-dark);
}

.cbse-q-icon {
    flex-shrink: 0;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.40);
    background: rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    transition: background 0.2s, transform 0.35s;
}
.cbse-item.active .cbse-q-icon {
    background: #f57c00;
    border-color: #fb8c00;
    transform: rotate(45deg);
}

.cbse-q-body { flex: 1; min-width: 0; }
.cbse-q-text {
    color: #fff;
    font-size: 0.97rem;
    font-weight: 600;
    line-height: 1.4;
}
.cbse-q-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.cbse-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.69rem;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 20px;
    white-space: nowrap;
}
.cbse-badge-default { background: rgba(255,255,255,0.16); color: rgba(255,255,255,0.88); border: 1px solid rgba(255,255,255,0.24); }
.cbse-badge-urgent  { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
.cbse-badge-high    { background: #fff3e0; color: #f57c00; border: 1px solid #ffcc80; }
.cbse-badge-medium  { background: rgba(255,255,255,0.16); color: rgba(255,255,255,0.88); border: 1px solid rgba(255,255,255,0.24); }
.cbse-badge-low     { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }

.cbse-q-arrow {
    flex-shrink: 0;
    color: rgba(255,255,255,0.55);
    font-size: 1.15rem;
    transition: transform 0.35s cubic-bezier(.4,0,.2,1);
}
.cbse-item.active .cbse-q-arrow {
    transform: rotate(180deg);
    color: #fff;
}

/* Answer panel */
.cbse-answer {
    max-height: 0;
    overflow: hidden;
    background: var(--white);
    transition: max-height 0.42s cubic-bezier(.4,0,.2,1);
    width: 100%;
}
.cbse-answer-inner {
    padding: 24px 28px 28px 28px;
    color: var(--text-mid);
    font-size: 0.95rem;
    line-height: 1.78;
    border-top: 4px solid var(--accent);
    width: 100%;
    box-sizing: border-box;
}

/* Valid-until alert */
.cbse-valid-strip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #b91c1c;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 14px;
}

/* ── File Viewer ──────────────────────────────────────────────────── */
.cbse-file-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    background: rgba(19,53,123,0.07);
    border: 1px solid rgba(19,53,123,0.22);
    color: var(--primary-dark);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 8px 20px;
    border-radius: 24px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    user-select: none;
}
.cbse-file-toggle:hover {
    background: rgba(19,53,123,0.13);
    border-color: var(--primary);
}
.cbse-file-toggle i { font-size: 1.1rem; }
.cbse-file-toggle .toggle-arrow { transition: transform 0.3s; }

.cbse-file-viewer {
    margin-top: 12px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 22px rgba(0,0,0,0.32);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    width: 100%;
}

/* ── PDF Viewer Toolbar ───────────────────────────────────────────── */
.pv-toolbar {
    display: flex;
    align-items: center;
    background: #3c3f41;
    height: 48px;
    padding: 0 6px 0 4px;
    gap: 0;
    position: relative;
    z-index: 2;
}
.pv-menu-btn {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; cursor: pointer; flex-shrink: 0; transition: background 0.15s;
}
.pv-menu-btn:hover { background: rgba(255,255,255,0.1); }
.pv-menu-btn i { font-size: 1.35rem; color: rgba(255,255,255,0.85); }
.pv-filename {
    color: rgba(255,255,255,0.92);
    font-size: 0.83rem; font-weight: 400;
    margin: 0 10px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
    flex: 1; min-width: 0;
}
.pv-divider {
    width: 1px; height: 24px;
    background: rgba(255,255,255,0.18);
    margin: 0 4px; flex-shrink: 0;
}
.pv-page-counter {
    display: flex; align-items: center; gap: 6px;
    color: rgba(255,255,255,0.85); font-size: 0.82rem;
    padding: 0 8px; white-space: nowrap; flex-shrink: 0;
}
.pv-page-input {
    width: 32px; text-align: center;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 3px; color: #fff;
    font-size: 0.82rem; padding: 2px 4px; outline: none;
}
.pv-zoom {
    display: flex; align-items: center;
    gap: 2px; padding: 0 6px; flex-shrink: 0;
}
.pv-zoom-btn {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; cursor: pointer;
    color: rgba(255,255,255,0.85); font-size: 1.1rem; font-weight: 400;
    transition: background 0.15s; border: none; background: transparent; line-height: 1;
}
.pv-zoom-btn:hover { background: rgba(255,255,255,0.12); }
.pv-zoom-pct {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.85);
    min-width: 38px; text-align: center;
}
.pv-actions {
    display: flex; align-items: center;
    gap: 2px; margin-left: auto; flex-shrink: 0;
}
.pv-icon-btn {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; cursor: pointer;
    color: rgba(255,255,255,0.80); font-size: 1.2rem;
    transition: background 0.15s; text-decoration: none;
    border: none; background: transparent;
}
.pv-icon-btn:hover { background: rgba(255,255,255,0.12); color: #fff; text-decoration: none; }
.pv-body {
    display: flex; background: #525659;
    height: 680px; width: 100%;
}
.pv-content {
    flex: 1; overflow: hidden;
    position: relative; width: 100%;
}
.pv-content iframe { display: block; width: 100%; height: 100%; border: none; }
.pv-content img    { display: block; width: 100%; height: 100%; object-fit: contain; background: #525659; }
.pv-no-preview {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    height: 100%; color: rgba(255,255,255,0.65);
    gap: 12px; text-align: center; padding: 30px;
}
.pv-no-preview i { font-size: 3.5rem; color: #f57c00; }
.pv-no-preview p { margin: 0; font-size: 0.92rem; }

/* ── No Results ───────────────────────────────────────────────────── */
.cbse-no-results {
    display: none;
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 0.97rem;
}
.cbse-no-results i {
    font-size: 2.8rem;
    display: block;
    margin-bottom: 12px;
    color: var(--primary-pale);
}

/* ── Empty State ──────────────────────────────────────────────────── */
.cbse-empty-state {
    max-width: 820px; margin: 0 auto;
    text-align: center; padding: 60px 30px;
    background: var(--white); border-radius: 14px;
    border: 1px solid var(--border);
    box-shadow: 0 2px 18px var(--shadow);
}
.cbse-empty-state .empty-icon {
    width: 80px; height: 80px; border-radius: 50%;
    background: rgba(19,53,123,0.07);
    display: flex; align-items: center;
    justify-content: center; margin: 0 auto 20px;
}
.cbse-empty-state .empty-icon i { font-size: 2.4rem; color: var(--primary-pale); }
.cbse-empty-state h4 { color: var(--text-dark); font-size: 1.2rem; font-weight: 700; margin-bottom: 10px; }
.cbse-empty-state p  { color: var(--text-muted); font-size: 0.93rem; margin: 0; line-height: 1.65; }

/* ── CTA ──────────────────────────────────────────────────────────── */
.cbse-cta {
    max-width: 820px; margin: 52px auto 0;
    background: linear-gradient(135deg, var(--primary-deep), var(--primary), var(--primary-light));
    border-radius: 14px; padding: 36px 32px;
    display: flex; align-items: center;
    justify-content: space-between; gap: 22px; flex-wrap: wrap;
    box-shadow: 0 8px 32px var(--shadow);
    border-bottom: 4px solid var(--accent);
}
.cbse-cta h3 { color: #fff; font-size: 1.25rem; font-weight: 700; margin-bottom: 5px; }
.cbse-cta p  { color: rgba(255,255,255,0.80); font-size: 0.93rem; margin: 0; }
.cbse-cta-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--accent); color: #fff;
    font-weight: 700; font-size: 0.92rem;
    padding: 12px 26px; border-radius: 50px;
    text-decoration: none; white-space: nowrap; flex-shrink: 0;
    transition: background 0.2s, transform 0.2s;
    border: 2px solid var(--accent-light);
}
.cbse-cta-btn:hover { background: var(--accent-light); transform: translateY(-2px); color: #fff; text-decoration: none; }


/* commitees */
:root {
    --primary:       #13357B;
    --primary-dark:  #0D2560;
    --primary-deep:  #071840;
    --primary-light: #1E4A9E;
    --primary-pale:  #3A6CC4;
    --accent:        #f57c00;
    --accent-light:  #fb8c00;
    --accent-pale:   #fff3e0;
    --white:         #FFFFFF;
    --off-white:     #F4F6FB;
    --text-dark:     #0D1F45;
    --text-mid:      #1E3A6E;
    --text-muted:    #5A7AAE;
    --border:        rgba(19,53,123,0.18);
    --shadow:        rgba(10,30,80,0.14);
}

/* ── Hero ─────────────────────────────────────────────── */
/* commitee*/
.committee-hero {
    min-height: 300px;
    background-image: url('../img/committee.jpg'); /* 👈 Replace with your image path */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.committee-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 0;
}

.committee-hero::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    height: 60px;
    background: #fff;
     /* clip-path: ellipse(55% 100% at 50% 100%);*/
}

.committee-hero-overlay {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 80px 0 90px;
}

.committee-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,.7);
    display: inline-block;
    margin-bottom: 12px;
    position: relative;
}

.committee-subtitle::before,
.committee-subtitle::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 28px;
    height: 1.5px;
    background: rgba(255,255,255,.45);
    transform: translateY(-50%);
}

.committee-subtitle::before { right: 100%; margin-right: 8px; }
.committee-subtitle::after  { left:  100%; margin-left:  8px; }


/* ── Main section ─────────────────────────────────────── */
.committee-section {
    background: var(--white);
    padding: 72px 0 80px;
}

/* Section heading */
.committee-head {
    text-align: center;
    margin-bottom: 42px;
}
.committee-head-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(19,53,123,0.08);
    border: 1px solid rgba(19,53,123,0.18);
    color: var(--primary-dark);
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    padding: 5px 16px;
    border-radius: 30px;
    margin-bottom: 10px;
}
.committee-head h2 {
    color: var(--text-dark);
    font-size: 1.9rem;
    font-weight: 800;
    margin-bottom: 8px;
}
.committee-head-line {
    width: 52px;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--accent-light));
    border-radius: 4px;
    margin: 0 auto;
}

/* ── Accordion list ───────────────────────────────────── */
.committee-list {
    max-width: 860px;
    margin: 0 auto;
    position: relative;
    overflow: visible;
}

.committee-item {
    border-radius: 10px;
    margin-bottom: 10px;
    border: 1px solid var(--border);
    box-shadow: 0 2px 12px var(--shadow);
    transition: box-shadow 0.35s;
    position: relative;
    overflow: hidden;
}
.committee-item:hover {
    box-shadow: 0 6px 22px rgba(10,30,80,0.18);
}
.committee-item.active {
    border-color: var(--primary);
    box-shadow: 0 8px 32px rgba(10,30,80,0.26);
    border-radius: 6px;
    position: relative;
    width:     calc(100vw - 40px);
    max-width: 1400px;
    left:      50%;
    transform: translateX(-50%);
    margin-left:  0;
    margin-right: 0;
    overflow: visible;
}

/* Question / Title row — navy bg */
.committee-question {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 17px 22px;
    cursor: pointer;
    user-select: none;
    background: var(--primary);
    transition: background 0.2s;
}
.committee-question:hover,
.committee-item.active .committee-question {
    background: var(--primary-dark);
}

.committee-q-icon {
    flex-shrink: 0;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.40);
    background: rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    transition: background 0.2s, transform 0.35s;
}
.committee-item.active .committee-q-icon {
    background: var(--accent);
    border-color: var(--accent-light);
    transform: rotate(45deg);
}

.committee-q-text {
    flex: 1;
    color: #fff;
    font-size: 0.97rem;
    font-weight: 600;
    line-height: 1.4;
}

.committee-q-meta {
    flex-shrink: 0;
    color: rgba(255,255,255,0.70);
    font-size: 0.8rem;
    font-weight: 500;
    background: rgba(255,255,255,0.12);
    padding: 3px 12px;
    border-radius: 20px;
    margin-right: 8px;
}

.committee-q-arrow {
    flex-shrink: 0;
    color: rgba(255,255,255,0.55);
    font-size: 1.15rem;
    transition: transform 0.35s cubic-bezier(.4,0,.2,1);
}
.committee-item.active .committee-q-arrow {
    transform: rotate(180deg);
    color: #fff;
}

/* Answer / Members panel */
.committee-answer {
    max-height: 0;
    overflow: hidden;
    background: var(--white);
    transition: max-height 0.42s cubic-bezier(.4,0,.2,1);
}
.committee-answer-inner {
    padding: 28px 28px 32px;
    border-top: 4px solid var(--accent);
}

/* Title description (if any) */
.committee-title-desc {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin-bottom: 22px;
    font-style: italic;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--border);
}

/* Members grid */
.members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

/* Member card — portrait style */
.member-card {
    background: var(--white);
    border: 1.5px solid #e8dcc8;
    border-radius: 10px;
    text-align: center;
    transition: box-shadow 0.25s, transform 0.25s;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.member-card::before {
    display: none; /* remove old top bar */
}
.member-card:hover {
    box-shadow: 0 8px 28px rgba(10,30,80,0.16);
    transform: translateY(-4px);
}

/* Photo — full width, portrait proportions */
.member-photo-wrap {
    width: 100%;
    height: 220px;
    border-radius: 8px 8px 0 0;
    margin: 0;
    overflow: hidden;
    border: none;
    background: #e8eef8;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.member-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}
.member-photo-initials {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    text-transform: uppercase;
}

/* Info footer */
.member-card-footer {
    padding: 14px 12px 16px;
    border-top: 2px solid #e8dcc8;
    background: var(--white);
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* Name */
.member-name {
    font-size: 0.97rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 2px;
    line-height: 1.3;
}

/* Designation */
.member-designation {
    font-size: 0.75rem;
    color: #f57c00;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: transparent;
    border-radius: 0;
    display: inline-block;
    padding: 0;
    margin-bottom: 0;
}

/* Contact info */
.member-contact {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
    width: 100%;
}
.member-contact a,
.member-contact span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 0.76rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s;
}
.member-contact a:hover {
    color: var(--primary);
}
.member-contact i {
    font-size: 0.88rem;
    color: var(--primary-pale);
}

/* Member description */
.member-desc {
    font-size: 0.76rem;
    color: var(--text-muted);
    margin-top: 6px;
    line-height: 1.5;
    font-style: italic;
}


/* Empty state */
.committee-empty {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    padding: 60px 30px;
    background: var(--white);
    border-radius: 14px;
    border: 1px solid var(--border);
    box-shadow: 0 2px 18px var(--shadow);
}
.committee-empty i {
    font-size: 3rem;
    color: var(--primary-pale);
    opacity: 0.5;
    display: block;
    margin-bottom: 16px;
}
.committee-empty h4 {
    color: var(--text-dark);
    font-weight: 700;
    margin-bottom: 8px;
}
.committee-empty p {
    color: var(--text-muted);
    font-size: 0.93rem;
    margin: 0;
}

/* Stats bar */
.committee-stats {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 52px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 18px var(--shadow);
}
.committee-stat {
    flex: 1;
    min-width: 120px;
    padding: 24px 14px;
    text-align: center;
    border-right: 1px solid var(--border);
}
.committee-stat:last-child { border-right: none; }
.committee-stat-number {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
}
.committee-stat-label {
    font-size: 0.71rem;
    color: var(--text-muted);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 5px;
}


/* ── CONTACT HERO ── */
.contact-hero {
    min-height: 300px;
    background-image: url('../img/contact-bg.png'); 
    background-color: #1a2a4a;                
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.contact-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 0;
}

/* Ellipse / Bump curve at bottom */
.contact-hero::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    height: 60px;
    background: #fff; /* match your page bg */
     /* clip-path: ellipse(55% 100% at 50% 100%);*/
}

.contact-hero-overlay {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 80px 0 90px;
}

.contact-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
    display: inline-block;
    margin-bottom: 12px;
    position: relative;
}

.contact-subtitle::before,
.contact-subtitle::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 28px;
    height: 1.5px;
    background: rgba(255, 255, 255, .45);
    transform: translateY(-50%);
}

.contact-subtitle::before { right: 100%; margin-right: 8px; }
.contact-subtitle::after  { left:  100%; margin-left:  8px; }

/* ── Info Cards ───────────────────────────────────── */
.contact-info-section { background: #fff; }
.contact-info-card {
    background: #fff;
    border: 1px solid #ffe0b2;
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    height: 100%;
    transition: box-shadow .25s, transform .25s;
    position: relative;
    overflow: hidden;
}
.contact-info-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,#e65100,#f57c00);
}
.contact-info-card:hover {
    box-shadow: 0 10px 32px rgba(245,124,0,.18);
    transform: translateY(-4px);
}
.ci-icon-wrap {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg,#fff3e0,#ffe0b2);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
}
.ci-icon-wrap i { font-size: 24px; color: #f57c00; }
.contact-info-card h5 { font-size: 15px; font-weight: 700; color: #e65100; margin-bottom: 8px; }
.contact-info-card p  { font-size: 13.5px; color: #334155; margin-bottom: 4px; line-height: 1.6; }
.contact-info-card a  { color: #f57c00; text-decoration: none; }
.contact-info-card a:hover { text-decoration: underline; }
.ci-sub { font-size: 12px !important; color: #94a3b8 !important; }

/* ── Form Card ────────────────────────────────────── */
.contact-form-card {
    background: #fff;
    border-radius: 14px;
    padding: 36px 32px;
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
    height: 100%;
}
.contact-form-card h3 { font-size: 20px; font-weight: 700; color: #e65100; }

.cf-field { margin-bottom: 16px; }
.cf-field input,
.cf-field textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid #ffe0b2;
    border-radius: 8px;
    font-size: 13.5px;
    color: #1e293b;
    background: #fffaf5;
    transition: border-color .2s, box-shadow .2s;
    outline: none;
    font-family: inherit;
    resize: vertical;
}
.cf-field input::placeholder,
.cf-field textarea::placeholder { color: #94a3b8; }
.cf-field input:focus,
.cf-field textarea:focus {
    border-color: #f57c00;
    box-shadow: 0 0 0 3px rgba(245,124,0,.13);
    background: #fff;
}

.cf-submit {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg,#e65100,#f57c00);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: opacity .2s, transform .15s;
    letter-spacing: .4px;
}
.cf-submit:hover  { opacity: .9; transform: translateY(-1px); }
.cf-submit:active { transform: translateY(0); }
.cf-submit.loading { opacity: .7; pointer-events: none; }

/* Alert boxes */
.alert-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1.5;
}
.alert-box i  { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.success-box  { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.success-box i{ color: #16a34a; }
.error-box    { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.error-box i  { color: #dc2626; }

/* ── Map ──────────────────────────────────────────── */
.contact-map-wrap { border-radius: 10px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,.1); }

/* ── Transport Cards ──────────────────────────────── */
.transport-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px 22px;
    height: 100%;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
    border-top: 3px solid #f57c00;
}
.tc-icon {
    width: 48px; height: 48px;
    border-radius: 10px;
    background: linear-gradient(135deg,#e65100,#f57c00);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
}
.tc-icon i { font-size: 20px; color: #fff; }
.transport-card h5 { font-size: 14px; font-weight: 700; color: #e65100; margin-bottom: 12px; }
.transport-card ul { list-style: none; padding: 0; margin: 0 0 12px; }
.transport-card ul li {
    padding: 6px 0;
    border-bottom: 1px dashed #ffe0b2;
    font-size: 13px;
    color: #334155;
    display: flex;
    justify-content: space-between;
}
.transport-card ul li:last-child { border-bottom: none; }
.tc-num  { color: #64748b; }
.tc-dist { font-weight: 700; color: #e65100; }
.tc-note {
    background: #fff8f0;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 11.5px;
    color: #f57c00;
    display: flex;
    gap: 6px;
    align-items: center;
}

/* ── Hero label ───────────────────────────────────── */
.subscribe-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,.85);
    display: inline-block;
    position: relative;
    margin-bottom: 10px;
}
.subscribe-title::before,
.subscribe-title::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30px;
    height: 1.5px;
    background: rgba(255,255,255,.55);
    transform: translateY(-50%);
}
.subscribe-title::before { right: 100%; margin-right: 6px; }
.subscribe-title::after  { left:  100%; margin-left:  6px; }


/* disclosure */
.disclosure-hero {
    min-height: 300px;
    background-image: url('../img/Mandator.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.disclosure-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 0;
}

.disclosure-hero::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    height: 60px;
    background: #fff;
     /* clip-path: ellipse(55% 100% at 50% 100%);*/
}

.disclosure-hero-overlay {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 80px 0 90px;
}

.disclosure-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,.7);
    display: inline-block;
    margin-bottom: 12px;
    position: relative;
}

.disclosure-subtitle::before,
.disclosure-subtitle::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 28px;
    height: 1.5px;
    background: rgba(255,255,255,.45);
    transform: translateY(-50%);
}

.disclosure-subtitle::before { right: 100%; margin-right: 8px; }
.disclosure-subtitle::after  { left:  100%; margin-left:  8px; }
/* Breadcrumb */
.breadcrumb-bar { background: #f1f5f9; border-bottom: 1px solid #e2e8f0; padding: 10px 0; }
.breadcrumb-bar .breadcrumb-item a { color: #2563a8; text-decoration: none; font-size: 14px; }
.breadcrumb-bar .breadcrumb-item.active { color: #64748b; font-size: 14px; }
.breadcrumb-bar .breadcrumb-item + .breadcrumb-item::before { color: #94a3b8; }

/* Section */
.disclosure-section { background: #f8fafc; min-height: 60vh; }

/* Card */
.disclosure-card {
    background: #fff; border-radius: 12px;
    box-shadow: 0 2px 20px rgba(0,0,0,.07);
    overflow: hidden;
}

/* Table */
.disclosure-table { border-collapse: collapse; font-family: 'Segoe UI', Arial, sans-serif; width: 100%; }
.disclosure-table thead tr { border-bottom: 2px solid #1a3c5e; }
.disclosure-table thead th {
    padding: 18px 24px; font-size: 12px; font-weight: 800;
    letter-spacing: 1.2px; text-transform: uppercase;
    color: #1a3c5e; background: #fff;
}
.disclosure-table thead th.col-sno    { width: 80px; }
.disclosure-table thead th.col-action { width: 240px; white-space: nowrap; }
.disclosure-table tbody tr { border-bottom: 1px solid #e8ecf0; transition: background .15s; }
.disclosure-table tbody tr:last-child { border-bottom: none; }
.disclosure-table tbody tr:hover { background: #f0f7ff; }
.disclosure-table tbody td { padding: 16px 24px; font-size: 13.5px; color: #1e293b; vertical-align: middle; }
.disclosure-table tbody td.col-sno { font-weight: 700; color: #334155; font-size: 14px; }
.disclosure-table tbody td.col-doc { font-weight: 600; font-size: 13px; letter-spacing: .3px; }

/* Action buttons */
.action-btns { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; white-space: nowrap; }

.btn-view {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 14px; background: #1a3c5e; color: #fff;
    font-size: 11.5px; font-weight: 700; letter-spacing: .5px;
    border: none; border-radius: 6px; cursor: pointer;
    text-decoration: none;
    transition: background .2s, transform .15s; white-space: nowrap;
}
.btn-view:hover { background: #2563a8; transform: translateY(-1px); }
.btn-view i { font-size: 13px; }

.btn-download {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 14px; background: #fff; color: #1a3c5e;
    font-size: 11.5px; font-weight: 700; letter-spacing: .5px;
    border: 2px solid #1a3c5e; border-radius: 6px; cursor: pointer;
    text-decoration: none;
    transition: all .2s, transform .15s; white-space: nowrap;
}
.btn-download:hover { background: #1a3c5e; color: #fff; transform: translateY(-1px); }
.btn-download i { font-size: 13px; }

/* Empty state */
.no-docs-msg { text-align: center; padding: 60px 24px !important; color: #94a3b8; font-size: 15px; }
.no-docs-msg i { font-size: 36px; display: block; margin-bottom: 10px; color: #cbd5e1; }
.no-docs-msg span { display: block; }

/* PDF Modal */
.pdf-modal { display: none; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; }
.pdf-modal.active { display: flex; }
.pdf-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.65); backdrop-filter: blur(4px); }
.pdf-box {
    position: relative; z-index: 1; background: #fff;
    border-radius: 14px; width: 92vw; max-width: 1050px; height: 90vh;
    display: flex; flex-direction: column;
    box-shadow: 0 30px 90px rgba(0,0,0,.4); overflow: hidden;
    animation: pdfIn .25s cubic-bezier(.16,1,.3,1);
}
@keyframes pdfIn {
    from { transform: translateY(20px) scale(.98); opacity: 0; }
    to   { transform: none; opacity: 1; }
}
.pdf-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; flex-shrink: 0;
    background: linear-gradient(135deg, #1a3c5e, #2563a8); gap: 12px;
}
.pdf-title {
    color: #fff; font-size: 13px; font-weight: 700;
    letter-spacing: .4px; text-transform: uppercase;
    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pdf-header-btns { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pdf-hbtn {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(255,255,255,.15); color: #fff;
    font-size: 11px; font-weight: 600; padding: 6px 12px;
    border-radius: 6px; text-decoration: none;
    border: 1px solid rgba(255,255,255,.2); transition: background .2s; white-space: nowrap;
}
.pdf-hbtn:hover { background: rgba(255,255,255,.28); color: #fff; }
.pdf-close {
    background: rgba(255,255,255,.15); color: #fff;
    border: 1px solid rgba(255,255,255,.2); border-radius: 6px;
    width: 32px; height: 32px; font-size: 22px; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .2s; padding: 0; flex-shrink: 0;
}
.pdf-close:hover { background: rgba(220,38,38,.75); }
.pdf-body {
    flex: 1; overflow: hidden; background: #525659;
    position: relative; display: flex; align-items: center; justify-content: center;
}
.pdf-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.pdf-loading {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: #e2e8f0; gap: 14px; font-size: 13px; z-index: 2; pointer-events: none;
}
.pdf-spinner {
    width: 40px; height: 40px;
    border: 3px solid rgba(255,255,255,.2); border-top-color: #fff;
    border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* faq */
:root {
    --primary:       #13357B;
    --primary-dark:  #0D2560;
    --primary-deep:  #071840;
    --primary-light: #1E4A9E;
    --primary-pale:  #3A6CC4;
    --accent:        #f57c00;
    --accent-light:  #fb8c00;
    --accent-pale:   #fff3e0;
    --white:         #FFFFFF;
    --off-white:     #F4F6FB;
    --text-dark:     #0D1F45;
    --text-mid:      #1E3A6E;
    --text-muted:    #5A7AAE;
    --border:        rgba(19,53,123,0.18);
    --shadow:        rgba(10,30,80,0.14);
}

/* ── Hero ─────────────────────────────────────────────────────────── */
.faq-hero {
    min-height: 300px;
    background-image: url('../img/faq.jpg'); /* 👈 Replace with your image path */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.faq-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 0;
}

.faq-hero::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    height: 60px;
    background: #fff;
     /* clip-path: ellipse(55% 100% at 50% 100%);*/
}

.faq-hero-overlay {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 80px 0 90px;
}

.faq-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,.7);
    display: inline-block;
    margin-bottom: 12px;
    position: relative;
}

.faq-subtitle::before,
.faq-subtitle::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 28px;
    height: 1.5px;
    background: rgba(255,255,255,.45);
    transform: translateY(-50%);
}

.faq-subtitle::before { right: 100%; margin-right: 8px; }
.faq-subtitle::after  { left:  100%; margin-left:  8px; }


/* Search */
.faq-search-wrap {
    max-width: 520px;
    margin: 0 auto;
    position: relative;
}
.faq-search-wrap input {
    width: 100%;
    padding: 13px 50px 13px 20px;
    border-radius: 50px;
    border: none;
    outline: none;
    font-size: 0.95rem;
    background: rgba(255,255,255,0.97);
    color: var(--text-dark);
    box-shadow: 0 4px 28px rgba(0,0,0,0.20);
}
.faq-search-wrap input::placeholder { color: #7A9ACC; }
.faq-search-icon {
    position: absolute;
    right: 17px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary);
    font-size: 1.2rem;
    pointer-events: none;
}

/* ── Stats Strip ──────────────────────────────────────────────────── */
.faq-stats {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 52px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 18px var(--shadow);
}
.faq-stat {
    flex: 1;
    min-width: 120px;
    padding: 24px 14px;
    text-align: center;
    border-right: 1px solid var(--border);
}
.faq-stat:last-child { border-right: none; }
.faq-stat-number {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
}
.faq-stat-label {
    font-size: 0.71rem;
    color: var(--text-muted);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 5px;
}

/* ── Main section ─────────────────────────────────────────────────── */
.faq-section {
    background: var(--white);
    padding: 72px 0 80px;
}
/* Allow active items to visually break out */
.faq-section .container {
    overflow: visible !important;
}
.faq-list {
    position: relative;
    overflow: visible;
}

/* Section heading */
.faq-head {
    text-align: center;
    margin-bottom: 42px;
}
.faq-head-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(19,53,123,0.08);
    border: 1px solid rgba(19,53,123,0.18);
    color: var(--primary-dark);
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    padding: 5px 16px;
    border-radius: 30px;
    margin-bottom: 10px;
}
.faq-head h2 {
    color: var(--text-dark);
    font-size: 1.9rem;
    font-weight: 800;
    margin-bottom: 8px;
}
.faq-head-line {
    width: 52px;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--accent-light));
    border-radius: 4px;
    margin: 0 auto;
}

/* ── Accordion ────────────────────────────────────────────────────── */
.faq-list {
    max-width: 860px;
    margin: 0 auto;
    position: relative;
    overflow: visible;
}

.faq-item {
    border-radius: 10px;
    margin-bottom: 10px;
    border: 1px solid var(--border);
    box-shadow: 0 2px 12px var(--shadow);
    transition: box-shadow 0.35s, border-radius 0.2s;
    position: relative;
    overflow: hidden;
}
.faq-item:hover {
    box-shadow: 0 6px 22px rgba(10,30,80,0.18);
}

/* Active: full viewport width, perfectly centered */
.faq-item.active {
    border-color: var(--primary);
    box-shadow: 0 8px 32px rgba(10,30,80,0.26);
    border-radius: 6px;
    position: relative;
    width:        calc(100vw - 40px);
    max-width:    1500px;
    left:         50%;
    transform:    translateX(-50%);
    margin-left:  0;
    margin-right: 0;
}
.faq-item.hidden-search { display: none; }

/* Question row — navy bg, white text */
.faq-question {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 17px 22px;
    cursor: pointer;
    user-select: none;
    background: var(--primary);
    transition: background 0.2s;
}
.faq-question:hover,
.faq-item.active .faq-question {
    background: var(--primary-dark);
}

.faq-q-icon {
    flex-shrink: 0;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.40);
    background: rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    transition: background 0.2s, transform 0.35s;
}
.faq-item.active .faq-q-icon {
    background: #f57c00;
    border-color: #fb8c00;
    transform: rotate(45deg);
}

.faq-q-text {
    flex: 1;
    color: #fff;
    font-size: 0.97rem;
    font-weight: 600;
    line-height: 1.4;
}

.faq-q-arrow {
    flex-shrink: 0;
    color: rgba(255,255,255,0.55);
    font-size: 1.15rem;
    transition: transform 0.35s cubic-bezier(.4,0,.2,1);
}
.faq-item.active .faq-q-arrow {
    transform: rotate(180deg);
    color: #fff;
}

/* Answer panel */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    background: var(--white);
    transition: max-height 0.42s cubic-bezier(.4,0,.2,1);
    width: 100%;
}
.faq-answer-inner {
    padding: 24px 28px 28px 28px;
    color: var(--text-mid);
    font-size: 0.95rem;
    line-height: 1.78;
    border-top: 4px solid var(--accent);
    width: 100%;
    box-sizing: border-box;
}

/* ── Fee-structure document style inside answers ─────────── */
.faq-answer-inner .fee-doc-header {
    text-align: center;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--accent);
}
.faq-answer-inner .fee-doc-header h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--primary-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 4px;
}
.faq-answer-inner .fee-doc-header p {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Tables inside answers styled like official fee structure doc */
.faq-answer-inner table {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0;
    font-size: 0.88rem;
}
.faq-answer-inner table thead tr {
    background: var(--primary);
    color: #fff;
}
.faq-answer-inner table thead th {
    padding: 10px 12px;
    font-weight: 700;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.2);
    font-size: 0.83rem;
    letter-spacing: 0.3px;
}
.faq-answer-inner table tbody tr:nth-child(even) {
    background: #f0f4fb;
}
.faq-answer-inner table tbody tr:hover {
    background: #fff3e0;
}
.faq-answer-inner table tbody td {
    padding: 9px 12px;
    border: 1px solid #d0d8ec;
    color: var(--text-dark);
    text-align: center;
}
.faq-answer-inner table tbody td:nth-child(2) {
    text-align: left;
}
/* Total row */
.faq-answer-inner table tfoot tr {
    background: #fff3e0;
}
.faq-answer-inner table tfoot td {
    padding: 10px 12px;
    border: 1px solid #f57c00;
    font-weight: 800;
    color: var(--primary-dark);
    text-align: center;
}
.faq-answer-inner table tfoot td:nth-child(2) {
    text-align: right;
}

/* Strikethrough price */
.faq-answer-inner .price-strike {
    text-decoration: line-through;
    color: #999;
    margin-right: 6px;
}
.faq-answer-inner .price-new {
    color: var(--accent);
    font-weight: 800;
}

/* Notes block */
.faq-answer-inner .fee-note {
    font-size: 0.83rem;
    color: var(--text-mid);
    margin: 6px 0 0;
    line-height: 1.6;
    padding-left: 2px;
}
.faq-answer-inner .fee-note strong {
    color: var(--primary-dark);
}
.faq-answer-inner .fee-note-important {
    font-size: 0.83rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin: 10px 0 0;
    padding: 8px 12px;
    background: #fff3e0;
    border-left: 4px solid var(--accent);
    border-radius: 0 6px 6px 0;
}

/* ══════════════════════════════════════════════════════════
   INLINE PDF / FILE VIEWER  — matches Chrome PDF viewer UI
   Dark toolbar #3c3f41 · Left sidebar · iframe content
   ══════════════════════════════════════════════════════════ */

/* Show/hide toggle button */
.faq-file-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    background: rgba(19,53,123,0.07);
    border: 1px solid rgba(19,53,123,0.22);
    color: var(--primary-dark);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 8px 20px;
    border-radius: 24px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    user-select: none;
}
.faq-file-toggle:hover {
    background: rgba(19,53,123,0.13);
    border-color: var(--primary);
}
.faq-file-toggle i { font-size: 1.1rem; }
.faq-file-toggle .toggle-arrow { transition: transform 0.3s; }

/* Outer wrapper */
.faq-file-viewer {
    margin-top: 12px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 22px rgba(0,0,0,0.32);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    width: 100%;
}

/* ── Top toolbar ─────────────────────────────────────────── */
.pv-toolbar {
    display: flex;
    align-items: center;
    background: #3c3f41;
    height: 48px;
    padding: 0 6px 0 4px;
    gap: 0;
    position: relative;
    z-index: 2;
}

/* hamburger / menu icon area */
.pv-menu-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}
.pv-menu-btn:hover { background: rgba(255,255,255,0.1); }
.pv-menu-btn i { font-size: 1.35rem; color: rgba(255,255,255,0.85); }

/* filename */
.pv-filename {
    color: rgba(255,255,255,0.92);
    font-size: 0.83rem;
    font-weight: 400;
    margin: 0 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

/* divider */
.pv-divider {
    width: 1px;
    height: 24px;
    background: rgba(255,255,255,0.18);
    margin: 0 4px;
    flex-shrink: 0;
}

/* page counter — "1 / 2" */
.pv-page-counter {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.85);
    font-size: 0.82rem;
    padding: 0 8px;
    white-space: nowrap;
    flex-shrink: 0;
}
.pv-page-input {
    width: 32px;
    text-align: center;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 3px;
    color: #fff;
    font-size: 0.82rem;
    padding: 2px 4px;
    outline: none;
}

/* zoom controls */
.pv-zoom {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 6px;
    flex-shrink: 0;
}
.pv-zoom-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    color: rgba(255,255,255,0.85);
    font-size: 1.1rem;
    font-weight: 400;
    transition: background 0.15s;
    border: none;
    background: transparent;
    line-height: 1;
}
.pv-zoom-btn:hover { background: rgba(255,255,255,0.12); }
.pv-zoom-pct {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.85);
    min-width: 38px;
    text-align: center;
}

/* right-side icon buttons */
.pv-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    flex-shrink: 0;
}
.pv-icon-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    color: rgba(255,255,255,0.80);
    font-size: 1.2rem;
    transition: background 0.15s;
    text-decoration: none;
    border: none;
    background: transparent;
}
.pv-icon-btn:hover { background: rgba(255,255,255,0.12); color: #fff; text-decoration: none; }

/* ── Body: content only (no sidebar) ────────────────────── */
.pv-body {
    display: flex;
    background: #525659;
    height: 680px;
    width: 100%;
}

/* Main iframe content — full width */
.pv-content {
    flex: 1;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.pv-content iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
}
.pv-content img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #525659;
}

/* no-preview state */
.pv-no-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: rgba(255,255,255,0.65);
    gap: 12px;
    text-align: center;
    padding: 30px;
}
.pv-no-preview i { font-size: 3.5rem; color: #f57c00; }
.pv-no-preview p { margin: 0; font-size: 0.92rem; }


/* No results */
.faq-no-results {
    display: none;
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 0.97rem;
}
.faq-no-results i {
    font-size: 2.8rem;
    display: block;
    margin-bottom: 12px;
    color: var(--primary-pale);
}

/* ── "No data yet" empty state ────────────────────────────────────── */
.faq-empty-state {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    padding: 60px 30px;
    background: var(--white);
    border-radius: 14px;
    border: 1px solid var(--border);
    box-shadow: 0 2px 18px var(--shadow);
}
.faq-empty-state .empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(19,53,123,0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}
.faq-empty-state .empty-icon i {
    font-size: 2.4rem;
    color: var(--primary-pale);
}
.faq-empty-state h4 {
    color: var(--text-dark);
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 10px;
}
.faq-empty-state p {
    color: var(--text-muted);
    font-size: 0.93rem;
    margin: 0;
    line-height: 1.65;
}

/* ── CTA banner ───────────────────────────────────────────────────── */
.faq-cta {
    max-width: 820px;
    margin: 52px auto 0;
    background: linear-gradient(135deg, var(--primary-deep), var(--primary), var(--primary-light));
    border-radius: 14px;
    padding: 36px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: wrap;
    box-shadow: 0 8px 32px var(--shadow);
    border-bottom: 4px solid var(--accent);
}
.faq-cta h3 { color: #fff; font-size: 1.25rem; font-weight: 700; margin-bottom: 5px; }
.faq-cta p  { color: rgba(255,255,255,0.80); font-size: 0.93rem; margin: 0; }
.faq-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: 0.92rem;
    padding: 12px 26px;
    border-radius: 50px;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.2s, transform 0.2s;
    border: 2px solid var(--accent-light);
}
.faq-cta-btn:hover {
    background: var(--accent-light);
    transform: translateY(-2px);
    color: #fff;
    text-decoration: none;
}




/* ─── Hero ─────────────────────────────────────── */
.history-hero {
    min-height: 300px;
    background-image: url('../img/about.jpeg'); /* 👈 Replace with your image path */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}
/* .history-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
} */

.history-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55); /* Adjust 0.55 = darkness (0 = clear, 1 = black) */
    z-index: 0;
}
.history-hero::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    height: 60px;
    background: #fff;
     /* clip-path: ellipse(55% 100% at 50% 100%);*/
}
.history-hero-overlay {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 80px 0 90px;
}
.history-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,.7);
    display: inline-block;
    margin-bottom: 12px;
    position: relative;
}
.history-subtitle::before,
.history-subtitle::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 28px;
    height: 1.5px;
    background: rgba(255,255,255,.45);
    transform: translateY(-50%);
}
.history-subtitle::before { right: 100%; margin-right: 8px; }
.history-subtitle::after  { left:  100%; margin-left:  8px; }

/* ─── Section ──────────────────────────────────── */
.history-section { background: #fff; }


/* ─── Entry layout ─────────────────────────────── */
.history-entry {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.entry-reverse {
    direction: rtl;
}
.entry-reverse > * { direction: ltr; }
.mt-entry { margin-top: 30px; }



/* trustee */
.trustee-hero {
    min-height: 300px;
    background-image: url('../img/trustee.png'); /* 👈 Replace with your image path */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.trustee-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55); /* Adjust 0.55 = darkness (0 = clear, 1 = black) */
    z-index: 0;
}

.trustee-hero::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    height: 60px;
    background: #fff;
     /* clip-path: ellipse(55% 100% at 50% 100%);*/
}

.trustee-hero-overlay {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 80px 0 90px;
}

.trustee-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,.7);
    display: inline-block;
    margin-bottom: 12px;
    position: relative;
}

.trustee-subtitle::before,
.trustee-subtitle::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 28px;
    height: 1.5px;
    background: rgba(255,255,255,.45);
    transform: translateY(-50%);
}

.trustee-subtitle::before { right: 100%; margin-right: 8px; }
.trustee-subtitle::after  { left:  100%; margin-left:  8px; }



/* ─── vision & Goal ──────────────────────────────────── */
.vision-hero {
    min-height: 300px;
    background-image: url('../img/vision.jpg'); /* 👈 Replace with your image path */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.vision-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 0;
}

.vision-hero::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    height: 60px;
    background: #fff;
     /* clip-path: ellipse(55% 100% at 50% 100%);*/
}

.vision-hero-overlay {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 80px 0 90px;
}

.vision-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,.7);
    display: inline-block;
    margin-bottom: 12px;
    position: relative;
}

.vision-subtitle::before,
.vision-subtitle::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 28px;
    height: 1.5px;
    background: rgba(255,255,255,.45);
    transform: translateY(-50%);
}

.vision-subtitle::before { right: 100%; margin-right: 8px; }
.vision-subtitle::after  { left:  100%; margin-left:  8px; }



/* ─── Image Column ─────────────────────────────── */
.he-image-col { position: relative; }

.he-img-wrap {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(26,60,94,.18);
    background: #e8eef5;
    aspect-ratio: 4/3;
}
.he-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.he-img-wrap:hover .he-img {
    transform: scale(1.04);
}
.he-img-placeholder {
    width: 100%;
    height: 100%;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e8eef5, #dce6f0);
    color: #6b8aad;
    gap: 12px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .5px;
}
.he-img-placeholder i { font-size: 48px; opacity: .5; }

/* Corner accent */
.he-img-corner {
    position: absolute;
    bottom: -1px; right: -1px;
    width: 60px; height: 60px;
    background: linear-gradient(135deg, transparent 50%, rgba(26,60,94,.15) 50%);
    border-bottom-right-radius: 16px;
    pointer-events: none;
}

/* Number badge */
.he-badge {
    position: absolute;
    top: 16px; left: 16px;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a3c5e, #2563a8);
    color: #fff;
    font-family: 'Playfair Display', serif;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(26,60,94,.35);
    z-index: 2;
}

/* ─── Text Column ──────────────────────────────── */
.he-text-inner {
    padding: 10px 0;
}

/* Label row */
.he-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.he-label-text {
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #2563a8;
    white-space: nowrap;
}
.he-label-line {
    flex: 1;
    height: 1.5px;
    background: linear-gradient(90deg, #2563a8, transparent);
}

/* Title */
.he-title {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    font-weight: 700;
    color: #1a3c5e;
    line-height: 1.3;
    margin-bottom: 0;
}

/* Divider */
.he-divider {
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #1a3c5e, #2563a8);
    border-radius: 2px;
    margin: 18px 0 20px;
}

/* Body text */
.he-body {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.85;
    color: #334155;
    text-align: justify;
}
.he-body p { margin-bottom: 14px; }
.he-body p:last-child { margin-bottom: 0; }
.he-body strong, .he-body b { color: #1a3c5e; font-weight: 600; }
.he-body h1,.he-body h2,.he-body h3,.he-body h4,.he-body h5 {
    font-family: 'Playfair Display', serif;
    color: #1a3c5e;
    margin: 18px 0 10px;
}
.he-body ul, .he-body ol {
    padding-left: 20px;
    margin-bottom: 14px;
}
.he-body li { margin-bottom: 6px; }
.he-body blockquote {
    border-left: 4px solid #2563a8;
    padding: 10px 16px;
    background: #f0f7ff;
    border-radius: 0 8px 8px 0;
    margin: 16px 0;
    font-style: italic;
    color: #1a3c5e;
}

/* Date tag */
.he-date {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 22px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    background: #f1f5f9;
    padding: 6px 14px;
    border-radius: 20px;
    letter-spacing: .4px;
}
.he-date i { color: #2563a8; }

/* ─── Separator ────────────────────────────────── */
.he-separator {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 60px 0;
}
.he-sep-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #cbd5e1, transparent);
}
.he-sep-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a3c5e, #2563a8);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.he-sep-icon i { font-size: 12px; color: #fff; }

/* ─── Empty state ──────────────────────────────── */
.he-empty {
    text-align: center;
    padding: 80px 20px;
    color: #64748b;
}
.he-empty h4 { font-family: 'Playfair Display', serif; color: #1a3c5e; margin-bottom: 10px; }

/* ─── Scroll Animations ────────────────────────── */
.animate-box {
    opacity: 0;
    transition: opacity .75s ease, transform .75s ease;
    will-change: opacity, transform;
}
.animate-box.from-left  { transform: translateX(-60px); }
.animate-box.from-right { transform: translateX( 60px); }
.animate-box.in-view    { opacity: 1; transform: translateX(0); }



/* news */

.breadcrumb-bar { background:#f1f5f9; border-bottom:1px solid #e2e8f0; padding:10px 0; }
.breadcrumb-bar .breadcrumb-item a { color:#2563a8; text-decoration:none; font-size:14px; }
.breadcrumb-bar .breadcrumb-item.active { color:#64748b; font-size:14px; }
.disclosure-section { background:#f8fafc; min-height:60vh; }
.disclosure-card { background:#fff; border-radius:12px; box-shadow:0 2px 20px rgba(0,0,0,.07); overflow:hidden; }
.disclosure-table { border-collapse:collapse; font-family:'Segoe UI',Arial,sans-serif; width:100%; }
.disclosure-table thead tr { border-bottom:2px solid #1a3c5e; }
.disclosure-table thead th { padding:18px 24px; font-size:12px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:#1a3c5e; background:#fff; }
.disclosure-table thead th.col-sno { width:70px; }
.disclosure-table thead th.col-date { width:120px; }
.disclosure-table thead th.col-action { width:210px; white-space:nowrap; }
.disclosure-table tbody tr { border-bottom:1px solid #e8ecf0; transition:background .15s; }
.disclosure-table tbody tr:last-child { border-bottom:none; }
.disclosure-table tbody tr:hover { background:#f0f7ff; }
.disclosure-table tbody td { padding:16px 24px; font-size:13.5px; color:#1e293b; vertical-align:middle; }
.disclosure-table tbody td.col-sno { font-weight:700; color:#334155; font-size:14px; }
.disclosure-table tbody td.col-date { font-size:12.5px; color:#64748b; white-space:nowrap; }
.doc-title { font-weight:600; font-size:13px; letter-spacing:.3px; }
.doc-desc { font-size:12px; color:#64748b; margin-top:3px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.action-btns { display:flex; align-items:center; gap:8px; flex-wrap:nowrap; white-space:nowrap; }
.btn-view { display:inline-flex; align-items:center; gap:5px; padding:7px 14px; background:#1a3c5e; color:#fff; font-size:11.5px; font-weight:700; border:none; border-radius:6px; cursor:pointer; text-decoration:none; transition:background .2s,transform .15s; white-space:nowrap; }
.btn-view:hover { background:#2563a8; transform:translateY(-1px); }
.btn-download { display:inline-flex; align-items:center; gap:5px; padding:7px 14px; background:#fff; color:#1a3c5e; font-size:11.5px; font-weight:700; border:2px solid #1a3c5e; border-radius:6px; cursor:pointer; text-decoration:none; transition:all .2s,transform .15s; white-space:nowrap; }
.btn-download:hover { background:#1a3c5e; color:#fff; transform:translateY(-1px); }
.no-docs-msg { text-align:center; padding:60px 24px !important; color:#94a3b8; font-size:15px; }
.no-docs-msg i { font-size:36px; display:block; margin-bottom:10px; color:#cbd5e1; }
.no-docs-msg span { display:block; }
.pdf-modal { display:none; position:fixed; inset:0; z-index:9999; align-items:center; justify-content:center; }
.pdf-modal.active { display:flex; }
.pdf-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(4px); }
.pdf-box { position:relative; z-index:1; background:#fff; border-radius:14px; width:92vw; max-width:1050px; height:90vh; display:flex; flex-direction:column; box-shadow:0 30px 90px rgba(0,0,0,.4); overflow:hidden; animation:pdfIn .25s cubic-bezier(.16,1,.3,1); }
@keyframes pdfIn { from { transform:translateY(20px) scale(.98); opacity:0; } to { transform:none; opacity:1; } }
.pdf-header { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; flex-shrink:0; background:linear-gradient(135deg,#1a3c5e,#2563a8); gap:12px; }
.pdf-title { color:#fff; font-size:13px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pdf-header-btns { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.pdf-hbtn { display:inline-flex; align-items:center; gap:5px; background:rgba(255,255,255,.15); color:#fff; font-size:11px; font-weight:600; padding:6px 12px; border-radius:6px; text-decoration:none; border:1px solid rgba(255,255,255,.2); transition:background .2s; white-space:nowrap; }
.pdf-hbtn:hover { background:rgba(255,255,255,.28); color:#fff; }
.pdf-close { background:rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.2); border-radius:6px; width:32px; height:32px; font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; padding:0; flex-shrink:0; }
.pdf-close:hover { background:rgba(220,38,38,.75); }
.pdf-body { flex:1; overflow:hidden; background:#525659; position:relative; display:flex; align-items:center; justify-content:center; }
.pdf-body iframe { position:absolute; inset:0; width:100%; height:100%; border:none; }
.pdf-loading { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#e2e8f0; gap:14px; font-size:13px; z-index:2; pointer-events:none; }
.pdf-spinner { width:40px; height:40px; border:3px solid rgba(255,255,255,.2); border-top-color:#fff; border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }



/* notice */

.breadcrumb-bar { background:#f1f5f9; border-bottom:1px solid #e2e8f0; padding:10px 0; }
.breadcrumb-bar .breadcrumb-item a { color:#2563a8; text-decoration:none; font-size:14px; }
.breadcrumb-bar .breadcrumb-item.active { color:#64748b; font-size:14px; }
.disclosure-section { background:#ffff; min-height:60vh; }
.disclosure-card { background:#fff; border-radius:12px; box-shadow:0 2px 20px rgba(0,0,0,.07); overflow:hidden; }
.disclosure-table { border-collapse:collapse; font-family:'Segoe UI',Arial,sans-serif; width:100%; }
.disclosure-table thead tr { border-bottom:2px solid #1a3c5e; }
.disclosure-table thead th { padding:18px 24px; font-size:12px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:#1a3c5e; background:#fff; }
.disclosure-table thead th.col-sno { width:70px; }
.disclosure-table thead th.col-date { width:120px; }
.disclosure-table thead th.col-action { width:210px; white-space:nowrap; }
.disclosure-table tbody tr { border-bottom:1px solid #e8ecf0; transition:background .15s; }
.disclosure-table tbody tr:last-child { border-bottom:none; }
.disclosure-table tbody tr:hover { background:#f0f7ff; }
.disclosure-table tbody td { padding:16px 24px; font-size:13.5px; color:#1e293b; vertical-align:middle; }
.disclosure-table tbody td.col-sno { font-weight:700; color:#334155; font-size:14px; }
.disclosure-table tbody td.col-date { font-size:12.5px; color:#64748b; white-space:nowrap; }
.doc-title { font-weight:600; font-size:13px; letter-spacing:.3px; }
.doc-desc { font-size:12px; color:#64748b; margin-top:3px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.action-btns { display:flex; align-items:center; gap:8px; flex-wrap:nowrap; white-space:nowrap; }
.btn-view { display:inline-flex; align-items:center; gap:5px; padding:7px 14px; background:#1a3c5e; color:#fff; font-size:11.5px; font-weight:700; border:none; border-radius:6px; cursor:pointer; text-decoration:none; transition:background .2s,transform .15s; white-space:nowrap; }
.btn-view:hover { background:#2563a8; transform:translateY(-1px); }
.btn-download { display:inline-flex; align-items:center; gap:5px; padding:7px 14px; background:#fff; color:#1a3c5e; font-size:11.5px; font-weight:700; border:2px solid #1a3c5e; border-radius:6px; cursor:pointer; text-decoration:none; transition:all .2s,transform .15s; white-space:nowrap; }
.btn-download:hover { background:#1a3c5e; color:#fff; transform:translateY(-1px); }
.no-docs-msg { text-align:center; padding:60px 24px !important; color:#94a3b8; font-size:15px; }
.no-docs-msg i { font-size:36px; display:block; margin-bottom:10px; color:#cbd5e1; }
.no-docs-msg span { display:block; }
.pdf-modal { display:none; position:fixed; inset:0; z-index:9999; align-items:center; justify-content:center; }
.pdf-modal.active { display:flex; }
.pdf-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(4px); }
.pdf-box { position:relative; z-index:1; background:#fff; border-radius:14px; width:92vw; max-width:1050px; height:90vh; display:flex; flex-direction:column; box-shadow:0 30px 90px rgba(0,0,0,.4); overflow:hidden; animation:pdfIn .25s cubic-bezier(.16,1,.3,1); }
@keyframes pdfIn { from { transform:translateY(20px) scale(.98); opacity:0; } to { transform:none; opacity:1; } }
.pdf-header { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; flex-shrink:0; background:linear-gradient(135deg,#1a3c5e,#2563a8); gap:12px; }
.pdf-title { color:#fff; font-size:13px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pdf-header-btns { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.pdf-hbtn { display:inline-flex; align-items:center; gap:5px; background:rgba(255,255,255,.15); color:#fff; font-size:11px; font-weight:600; padding:6px 12px; border-radius:6px; text-decoration:none; border:1px solid rgba(255,255,255,.2); transition:background .2s; white-space:nowrap; }
.pdf-hbtn:hover { background:rgba(255,255,255,.28); color:#fff; }
.pdf-close { background:rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.2); border-radius:6px; width:32px; height:32px; font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; padding:0; flex-shrink:0; }
.pdf-close:hover { background:rgba(220,38,38,.75); }
.pdf-body { flex:1; overflow:hidden; background:#525659; position:relative; display:flex; align-items:center; justify-content:center; }
.pdf-body iframe { position:absolute; inset:0; width:100%; height:100%; border:none; }
.pdf-loading { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#e2e8f0; gap:14px; font-size:13px; z-index:2; pointer-events:none; }
.pdf-spinner { width:40px; height:40px; border:3px solid rgba(255,255,255,.2); border-top-color:#fff; border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }


/* ── RECRUITMENT HERO ── */
.recr-hero {
    min-height: 300px;
    background-image: url('../img/Recruitment.jpg'); /* 👈 change to your image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.recr-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 0;
}

.recr-hero::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    height: 60px;
    background: #fff;
     /* clip-path: ellipse(55% 100% at 50% 100%);*/
}

.recr-hero-overlay {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 80px 0 90px;
}

.recr-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
    display: inline-block;
    margin-bottom: 12px;
    position: relative;
}

.recr-subtitle::before,
.recr-subtitle::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 28px;
    height: 1.5px;
    background: rgba(255, 255, 255, .45);
    transform: translateY(-50%);
}

.recr-subtitle::before { right: 100%; margin-right: 8px; }
.recr-subtitle::after  { left:  100%; margin-left:  8px; }

/* ── BREADCRUMB ── */
.breadcrumb-bar { background: #f1f5f9; border-bottom: 1px solid #e2e8f0; padding: 10px 0; }
.breadcrumb-bar .breadcrumb-item a { color: #2563a8; text-decoration: none; font-size: 14px; }
.breadcrumb-bar .breadcrumb-item.active { color: #64748b; font-size: 14px; }
.breadcrumb-bar .breadcrumb-item + .breadcrumb-item::before { color: #94a3b8; }

/* ── APPLY BANNER ── */
.recr-apply-banner {
    background: linear-gradient(135deg, #0f2744 0%, #1a3c5e 50%, #1e4d8c 100%);
    padding: 50px 0;
}
.apply-banner-inner {
    display: flex;
    align-items: center;
    gap: 50px;
}
.apply-banner-text { flex: 1; color: #fff; }
.apply-badge {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
    border-radius: 20px; padding: 5px 14px;
    font-size: 12px; font-weight: 700; letter-spacing: .8px;
    text-transform: uppercase; color: #93c5fd;
    margin-bottom: 16px;
}
.apply-banner-text h2 {
    font-size: 2rem; font-weight: 800; color: #fff;
    margin-bottom: 12px; line-height: 1.2;
}
.apply-banner-text p {
    color: rgba(255,255,255,.75); font-size: 14.5px; line-height: 1.7;
    max-width: 500px; margin-bottom: 24px;
}
.apply-steps { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.apply-step {
    display: flex; align-items: center; gap: 12px;
    color: rgba(255,255,255,.85); font-size: 13.5px;
}
.step-num {
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: #2563a8; border: 2px solid rgba(255,255,255,.3);
    font-weight: 800; font-size: 12px; color: #fff; flex-shrink: 0;
}
.apply-main-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; color: #1a3c5e;
    font-size: 13.5px; font-weight: 800; letter-spacing: .5px;
    padding: 12px 28px; border-radius: 8px; text-decoration: none;
    transition: all .2s; border: 2px solid #fff;
}
.apply-main-btn:hover { background: #e0eeff; color: #1a3c5e; transform: translateY(-2px); }
.apply-main-btn--outline {
    background: transparent; color: #1a3c5e;
    border: 2px solid #1a3c5e;
}
.apply-main-btn--outline:hover { background: #1a3c5e; color: #fff; }

/* ── QR CARD ── */
.apply-banner-qr { flex-shrink: 0; }
.qr-card {
    background: #fff; border-radius: 16px;
    padding: 20px; text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
    width: 220px;
}
.qr-card-top {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    font-size: 12px; font-weight: 800; letter-spacing: .8px;
    text-transform: uppercase; color: #1a3c5e;
    margin-bottom: 14px;
}
.qr-card-top i { font-size: 16px; }
.qr-img {
    width: 170px; height: 170px;
    object-fit: contain; border-radius: 8px;
    display: block; margin: 0 auto 14px;
    border: 3px solid #e2e8f0;
}
.qr-card.qr-missing .qr-img { display: none; }
.qr-card.qr-missing::after {
    content: 'QR code image not found.\nPlace recruitment_qr.png in root.';
    display: block; font-size: 11px; color: #94a3b8;
    white-space: pre-line; margin-bottom: 14px;
}
.qr-card-bottom {
    font-size: 11px; color: #64748b; font-weight: 500; letter-spacing: .3px;
}

/* ── MAIN SECTION ── */
.recr-section { background: #f8fafc; min-height: 60vh; }
.recr-section-head {
    display: flex; align-items: center; gap: 12px;
}
.recr-section-head h4 {
    font-size: 1.15rem; font-weight: 800; color: #1a3c5e; margin: 0;
}
.recr-count-pill {
    background: #dbeafe; color: #1d4ed8;
    font-size: 12px; font-weight: 700; padding: 3px 12px;
    border-radius: 20px; letter-spacing: .3px;
}

/* ── TABLE CARD ── */
.recr-card {
    background: #fff; border-radius: 12px;
    box-shadow: 0 2px 20px rgba(0,0,0,.07);
    overflow: hidden;
}
.recr-table { border-collapse: collapse; font-family: 'Segoe UI', Arial, sans-serif; width: 100%; }
.recr-table thead tr { border-bottom: 2px solid #1a3c5e; }
.recr-table thead th {
    padding: 18px 20px; font-size: 11.5px; font-weight: 800;
    letter-spacing: 1.2px; text-transform: uppercase;
    color: #1a3c5e; background: #fff; white-space: nowrap;
}
.recr-table thead th.col-sno    { width: 65px; }
.recr-table thead th.col-post   { width: 200px; }
.recr-table thead th.col-date   { width: 130px; white-space: nowrap; }
.recr-table thead th.col-action { width: 260px; white-space: nowrap; }
.recr-table tbody tr { border-bottom: 1px solid #e8ecf0; transition: background .15s; }
.recr-table tbody tr:last-child { border-bottom: none; }
.recr-table tbody tr:hover { background: #f0f7ff; }
.recr-table tbody td { padding: 16px 20px; font-size: 13.5px; color: #1e293b; vertical-align: middle; }
.recr-table tbody td.col-sno { font-weight: 700; color: #334155; font-size: 14px; }

.post-name {
    font-weight: 700; font-size: 13.5px; color: #1a3c5e; line-height: 1.4;
}
.recr-date {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; color: #64748b; white-space: nowrap;
}
.recr-desc-text { font-size: 13px; color: #475569; line-height: 1.55; }
.desc-toggle {
    background: none; border: none; color: #2563a8;
    font-size: 12px; font-weight: 700; cursor: pointer; padding: 0 0 0 4px;
    text-decoration: underline;
}

/* ── ACTION BUTTONS ── */
.action-btns { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }

.btn-view {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 12px; background: #1a3c5e; color: #fff;
    font-size: 11.5px; font-weight: 700; letter-spacing: .4px;
    border: none; border-radius: 6px; cursor: pointer; text-decoration: none;
    transition: background .2s, transform .15s; white-space: nowrap;
}
.btn-view:hover { background: #2563a8; transform: translateY(-1px); }

.btn-download {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 12px; background: #fff; color: #1a3c5e;
    font-size: 11.5px; font-weight: 700; letter-spacing: .4px;
    border: 2px solid #1a3c5e; border-radius: 6px; cursor: pointer;
    text-decoration: none; transition: all .2s; white-space: nowrap;
}
.btn-download:hover { background: #1a3c5e; color: #fff; transform: translateY(-1px); }

.btn-apply {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 12px; background: #16a34a; color: #fff;
    font-size: 11.5px; font-weight: 700; letter-spacing: .4px;
    border: none; border-radius: 6px; cursor: pointer; text-decoration: none;
    transition: background .2s, transform .15s; white-space: nowrap;
}
.btn-apply:hover { background: #15803d; color: #fff; transform: translateY(-1px); }

/* ── EMPTY STATE ── */
.no-recr-msg {
    text-align: center; padding: 70px 24px !important; color: #94a3b8; font-size: 15px;
}
.no-recr-msg i { font-size: 40px; display: block; margin-bottom: 12px; color: #cbd5e1; }
.no-recr-msg span, .no-recr-msg small { display: block; }
.no-recr-msg small { font-size: 13px; margin-top: 6px; }

/* ── BOTTOM CTA ── */
.recr-bottom-cta {
    text-align: center; margin-top: 32px; padding: 30px;
    background: #f0f7ff; border-radius: 12px;
    border: 1px solid #dbeafe;
}
.recr-bottom-cta p { color: #334155; font-size: 14px; margin-bottom: 16px; }

/* ── PDF MODAL ── */
.pdf-modal { display: none; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; }
.pdf-modal.active { display: flex; }
.pdf-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.65); backdrop-filter: blur(4px); }
.pdf-box {
    position: relative; z-index: 1; background: #fff;
    border-radius: 14px; width: 92vw; max-width: 1050px; height: 90vh;
    display: flex; flex-direction: column;
    box-shadow: 0 30px 90px rgba(0,0,0,.4); overflow: hidden;
    animation: pdfIn .25s cubic-bezier(.16,1,.3,1);
}
@keyframes pdfIn {
    from { transform: translateY(20px) scale(.98); opacity: 0; }
    to   { transform: none; opacity: 1; }
}
.pdf-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; flex-shrink: 0;
    background: linear-gradient(135deg, #1a3c5e, #2563a8); gap: 12px;
}
.pdf-title {
    color: #fff; font-size: 13px; font-weight: 700;
    letter-spacing: .4px; text-transform: uppercase;
    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pdf-header-btns { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pdf-hbtn {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(255,255,255,.15); color: #fff;
    font-size: 11px; font-weight: 600; padding: 6px 12px;
    border-radius: 6px; text-decoration: none;
    border: 1px solid rgba(255,255,255,.2); transition: background .2s; white-space: nowrap;
}
.pdf-hbtn:hover { background: rgba(255,255,255,.28); color: #fff; }
.pdf-close {
    background: rgba(255,255,255,.15); color: #fff;
    border: 1px solid rgba(255,255,255,.2); border-radius: 6px;
    width: 32px; height: 32px; font-size: 22px; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .2s; padding: 0; flex-shrink: 0;
}
.pdf-close:hover { background: rgba(220,38,38,.75); }
.pdf-body {
    flex: 1; overflow: hidden; background: #525659;
    position: relative; display: flex; align-items: center; justify-content: center;
}
.pdf-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.pdf-loading {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: #e2e8f0; gap: 14px; font-size: 13px; z-index: 2; pointer-events: none;
}
.pdf-spinner {
    width: 40px; height: 40px;
    border: 3px solid rgba(255,255,255,.2); border-top-color: #fff;
    border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* ── Hero ─────────────────────────────────────────────────────────── */
.result-hero {
    min-height: 300px;
    background-image: url('../img/result.jpg'); 
    background-size: cover;
    background-position: center top; 
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.result-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65); 
}
.result-hero::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    height: 60px;
    background: #fff;
     /* clip-path: ellipse(55% 100% at 50% 100%);*/
}

.result-hero-overlay {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 80px 0 90px;
}

.result-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,.7);
    display: inline-block;
    margin-bottom: 12px;
    position: relative;
}

.result-subtitle::before,
.result-subtitle::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 28px;
    height: 1.5px;
    background: rgba(255,255,255,.45);
    transform: translateY(-50%);
}

.result-subtitle::before { right: 100%; margin-right: 8px; }
.result-subtitle::after  { left:  100%; margin-left:  8px; }

/* ── Breadcrumb ───────────────────────────────────────────────────── */
.breadcrumb-bar { background: #f1f5f9; border-bottom: 1px solid #e2e8f0; padding: 10px 0; }
.breadcrumb-bar .breadcrumb-item a { color: #2563a8; text-decoration: none; font-size: 14px; }
.breadcrumb-bar .breadcrumb-item.active { color: #64748b; font-size: 14px; }
.breadcrumb-bar .breadcrumb-item + .breadcrumb-item::before { color: #94a3b8; }

/* ── Section ──────────────────────────────────────────────────────── */
.result-section { background: #ffffff; min-height: 60vh; }

/* ── Card ─────────────────────────────────────────────────────────── */
.result-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 20px rgba(0,0,0,.07);
    overflow: hidden;
}

/* ── Table ────────────────────────────────────────────────────────── */
.result-table { border-collapse: collapse; font-family: 'Segoe UI', Arial, sans-serif; width: 100%; }
.result-table thead tr { border-bottom: 2px solid #1a3c5e; }
.result-table thead th {
    padding: 18px 24px; font-size: 12px; font-weight: 800;
    letter-spacing: 1.2px; text-transform: uppercase;
    color: #1a3c5e; background: #fff;
}
.result-table thead th.col-sno    { width: 80px; }
.result-table thead th.col-action { width: 240px; white-space: nowrap; }
.result-table tbody tr { border-bottom: 1px solid #e8ecf0; transition: background .15s; }
.result-table tbody tr:last-child { border-bottom: none; }
.result-table tbody tr:hover { background: #f0f7ff; }
.result-table tbody td { padding: 16px 24px; font-size: 13.5px; color: #1e293b; vertical-align: middle; }
.result-table tbody td.col-sno { font-weight: 700; color: #334155; font-size: 14px; }
.result-table tbody td.col-doc { font-weight: 600; font-size: 13px; letter-spacing: .3px; }

/* ── Action Buttons ───────────────────────────────────────────────── */
.action-btns { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; white-space: nowrap; }

.btn-view {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 14px; background: #1a3c5e; color: #fff;
    font-size: 11.5px; font-weight: 700; letter-spacing: .5px;
    border: none; border-radius: 6px; cursor: pointer;
    text-decoration: none;
    transition: background .2s, transform .15s; white-space: nowrap;
}
.btn-view:hover { background: #2563a8; transform: translateY(-1px); }
.btn-view i { font-size: 13px; }

.btn-download {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 14px; background: #fff; color: #1a3c5e;
    font-size: 11.5px; font-weight: 700; letter-spacing: .5px;
    border: 2px solid #1a3c5e; border-radius: 6px; cursor: pointer;
    text-decoration: none;
    transition: all .2s, transform .15s; white-space: nowrap;
}
.btn-download:hover { background: #1a3c5e; color: #fff; transform: translateY(-1px); }
.btn-download i { font-size: 13px; }

/* ── Empty State ──────────────────────────────────────────────────── */
.no-docs-msg { text-align: center; padding: 60px 24px !important; color: #94a3b8; font-size: 15px; }
.no-docs-msg i { font-size: 36px; display: block; margin-bottom: 10px; color: #cbd5e1; }
.no-docs-msg span { display: block; }

/* ── PDF Modal ────────────────────────────────────────────────────── */
.pdf-modal { display: none; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; }
.pdf-modal.active { display: flex; }
.pdf-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.65); backdrop-filter: blur(4px); }
.pdf-box {
    position: relative; z-index: 1; background: #fff;
    border-radius: 14px; width: 92vw; max-width: 1050px; height: 90vh;
    display: flex; flex-direction: column;
    box-shadow: 0 30px 90px rgba(0,0,0,.4); overflow: hidden;
    animation: pdfIn .25s cubic-bezier(.16,1,.3,1);
}
@keyframes pdfIn {
    from { transform: translateY(20px) scale(.98); opacity: 0; }
    to   { transform: none; opacity: 1; }
}
.pdf-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; flex-shrink: 0;
    background: linear-gradient(135deg, #1a3c5e, #2563a8); gap: 12px;
}
.pdf-title {
    color: #fff; font-size: 13px; font-weight: 700;
    letter-spacing: .4px; text-transform: uppercase;
    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pdf-header-btns { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pdf-hbtn {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(255,255,255,.15); color: #fff;
    font-size: 11px; font-weight: 600; padding: 6px 12px;
    border-radius: 6px; text-decoration: none;
    border: 1px solid rgba(255,255,255,.2); transition: background .2s; white-space: nowrap;
}
.pdf-hbtn:hover { background: rgba(255,255,255,.28); color: #fff; }
.pdf-close {
    background: rgba(255,255,255,.15); color: #fff;
    border: 1px solid rgba(255,255,255,.2); border-radius: 6px;
    width: 32px; height: 32px; font-size: 22px; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .2s; padding: 0; flex-shrink: 0;
}
.pdf-close:hover { background: rgba(220,38,38,.75); }
.pdf-body {
    flex: 1; overflow: hidden; background: #525659;
    position: relative; display: flex; align-items: center; justify-content: center;
}
.pdf-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.pdf-loading {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: #e2e8f0; gap: 14px; font-size: 13px; z-index: 2; pointer-events: none;
}
.pdf-spinner {
    width: 40px; height: 40px;
    border: 3px solid rgba(255,255,255,.2); border-top-color: #fff;
    border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* vission */
.page-header {
    position: relative;
    background-image: url('img/vision.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 80px 0;
    overflow: hidden;
}
.page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(21, 57, 105, 0.68);
}
.page-header .container {
    position: relative;
    z-index: 2;
}
.page-header-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,0.85);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.page-header-label::before,
.page-header-label::after {
    content: '';
    display: inline-block;
    width: 36px;
    height: 1px;
    background: rgba(255,255,255,0.55);
}
.page-header h1 {
    color: #fff;
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 700;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* Content styles */
.vision-mission-description {
    font-size: 16px;
    line-height: 1.8;
    text-align: justify;
}
.vision-mission-description p { margin-bottom: 15px; }
.section-title { font-weight: 600; letter-spacing: 1px; }
.wow { visibility: hidden; }


/* ═══════════════════════════════════════════════════════════
   STAFF HERO BANNER
   ═══════════════════════════════════════════════════════════ */


   
   .staff-hero {
    min-height: 300px;
    background-color: #1a2a4a;          /* fallback if image missing */
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Dark overlay */
.staff-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 0;
}

/* Ellipse / Bump curve at bottom */
.staff-hero::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    height: 60px;
    background: #fff;                   
     /* clip-path: ellipse(55% 100% at 50% 100%);*/
}

/* Per-department tint colors */
.staff-hero[data-dept="ACADEMIC STAFF"]::before { background: rgba(15,  40,  80,  0.62); }
.staff-hero[data-dept="TEAM SSC STAFF"]::before  { background: rgba(80,  20,  20,  0.62); }
.staff-hero[data-dept="TEACHING STAFF"]::before  { background: rgba(10,  60,  40,  0.62); }
.staff-hero[data-dept="TRAINING STAFF"]::before  { background: rgba(60,  35,  10,  0.62); }
.staff-hero[data-dept="ADMIN STAFF"]::before     { background: rgba(30,  10,  70,  0.62); }
.staff-hero[data-dept="ALL STAFF"]::before       { background: rgba(0,   0,   0,   0.55); }

.staff-hero-overlay {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 80px 0 90px;
}

/* ── Subtitle with decorative side lines ── */
.staff-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .70);
    display: inline-block;
    margin-bottom: 12px;
    position: relative;
}

.staff-subtitle::before,
.staff-subtitle::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 28px;
    height: 1.5px;
    background: rgba(255, 255, 255, .45);
    transform: translateY(-50%);
}

.staff-subtitle::before { right: 100%; margin-right: 8px; }
.staff-subtitle::after  { left:  100%; margin-left:  8px; }

   /* ── Row & Columns ── */
.staff-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.staff-col {
    flex: 0 0 calc(25% - 18px);
    max-width: calc(25% - 18px);
}



/* ── Card Container ── */
.staff-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.13);
    background: #fff;
    height: 380px;
    cursor: pointer;
}

/* ── Full Image Background ── */
.staff-card .sc-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.staff-card .sc-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform 0.5s ease;
}

.staff-card:hover .sc-image img {
    transform: scale(1.05);
}

/* ── Normal State Label (name + designation at bottom) ── */
.staff-card .sc-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.0) 100%);
    padding: 40px 16px 16px;
    transition: opacity 0.35s ease;
}

.staff-card:hover .sc-label {
    opacity: 0;
}

.staff-card .sc-label h4 {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 3px;
    line-height: 1.3;
}

.staff-card .sc-label p {
    color: #f57c00;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

/* ── Badge (shown in "all" view) ── */
.staff-card .staff-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 5;
    background: #f57c00;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    letter-spacing: 0.04em;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* ── Hover Overlay — Slides Up From Bottom ── */

.staff-card .sc-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 4;
    background: rgba(145, 170, 199, 0.55);  
    backdrop-filter: blur(6px);             
    -webkit-backdrop-filter: blur(6px);
    border-radius: 12px 12px 0 0;
    padding: 20px 18px 18px;
    transform: translateY(100%);
    transition: transform 0.40s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #f57c00 rgba(21, 101, 192, 0.55);
}

.staff-card .sc-overlay::-webkit-scrollbar {
    width: 4px;
}

.staff-card .sc-overlay::-webkit-scrollbar-thumb {
    background: #f57c00;
    border-radius: 2px;
}

.staff-card:hover .sc-overlay {
    transform: translateY(0);
}

/* ── Overlay Content ── */
.staff-card .sc-overlay h4 {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 3px;
    line-height: 1.3;
    text-align: center;
}

.staff-card .sc-overlay .ov-designation {
    color: #f57c00;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    margin-bottom: 12px;
}

.staff-card .sc-overlay .ov-divider {
    width: 40px;
    height: 2px;
    background: #f57c00;
    border-radius: 2px;
    margin: 0 auto 12px;
}


/* ── Info Blocks Inside Overlay ── */
.staff-card .sc-overlay .ov-info {
    background: rgba(255, 255, 255, 0.15);  /* slightly more visible on transparent bg */
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 8px;
    text-align: left;
}

.staff-card .sc-overlay .ov-info-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #f57c00;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.staff-card .sc-overlay .ov-info ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.staff-card .sc-overlay .ov-info ul li {
    font-size: 0.73rem;
    color: #e3f2fd;
    line-height: 1.45;
    padding: 2px 0 2px 13px;
    position: relative;
}

.staff-card .sc-overlay .ov-info ul li::before {
    content: "•";
    position: absolute;
    left: 1px;
    color: #f57c00;
    font-weight: 700;
}

/* ── Contact Buttons Inside Overlay ── */
.staff-card .sc-overlay .ov-contact {
    text-align: center;
    margin-top: 10px;
}

.staff-card .sc-overlay .ov-contact .btn {
    background: #f57c00;
    border: none;
    color: #fff;
    font-size: 0.78rem;
    padding: 5px 12px;
    border-radius: 20px;
    transition: background 0.2s;
}

.staff-card .sc-overlay .ov-contact .btn:hover {
    background: #e65100;
}

/* ── Section Heading ── */
.staff-section-head {
    text-align: center;
    margin-bottom: 1.5rem;
}

.staff-section-head h5 {
    margin-bottom: 4px;
}

.staff-section-head h2 {
    margin-bottom: 0;
}



/* Achivements */
/* ── Section ── */
.achievement-gallery-section { background: #f4f6f9; }
.achievement-gallery-section .section-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #f0c040;
    display: inline-block;
}

/* ── Card ── */
.achv-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    background: #1a3a5c;
    box-shadow: 0 3px 14px rgba(13,33,55,.13);
    aspect-ratio: 4/3;
    transition: transform .28s ease, box-shadow .28s ease;
}
.achv-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(13,33,55,.22); }
.achv-card img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease, filter .3s ease;
}
.achv-card:hover img { transform: scale(1.07); filter: brightness(.85); }

/* ── NEW badge ── */
.achv-new-badge {
    position: absolute;
    top: 10px; left: 10px;
    z-index: 4;
    background: linear-gradient(90deg,#f0c040,#e8a800);
    color: #1a2a3a;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 4px 11px;
    border-radius: 20px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(240,192,64,.5);
}

/* ── Hover overlay ── */
.achv-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(13,33,55,.92) 0%, rgba(13,33,55,.3) 55%, transparent 100%);
    opacity: 0;
    transition: opacity .3s ease;
    display: flex;
    align-items: flex-end;
}
.achv-card:hover .achv-overlay { opacity: 1; }
.achv-overlay-inner { padding: 16px 14px; width: 100%; }
.achv-zoom-icon {
    display: block;
    font-size: 22px;
    color: #f0c040;
    margin-bottom: 8px;
    text-align: center;
}
.achv-label {
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    line-height: 1.4;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.achv-date {
    font-size: 12px;
    color: rgba(255,255,255,.7);
    display: flex;
    align-items: center;
    gap: 5px;
}
.achv-date i { color: #f0c040; font-size: 11px; }

/* ══ LIGHTBOX MODAL ══ */
.achv-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
.achv-modal.open { display: flex; }

.achv-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5,12,24,.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.achv-modal-box {
    position: relative;
    z-index: 2;
    background: #0d2137;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    width: min(92vw, 900px);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,.7);
    animation: achvSlideIn .25s ease;
}
@keyframes achvSlideIn {
    from { opacity:0; transform: scale(.94) translateY(20px); }
    to   { opacity:1; transform: scale(1)   translateY(0); }
}

/* header */
.achv-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    gap: 12px;
    flex-shrink: 0;
}
.achv-modal-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.achv-modal-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 600px;
}
.achv-modal-date { font-size: 12px; color: #f0c040; display: flex; align-items: center; gap: 5px; }
.achv-modal-close {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    color: #fff;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 15px;
    flex-shrink: 0;
    transition: background .2s;
}
.achv-modal-close:hover { background: rgba(255,255,255,.16); }

/* body */
.achv-modal-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    background: #060f1c;
    min-height: 200px;
}
.achv-modal-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: rgba(255,255,255,.5);
    font-size: 13px;
}
.achv-spinner {
    width: 34px; height: 34px;
    border: 3px solid rgba(240,192,64,.2);
    border-top-color: #f0c040;
    border-radius: 50%;
    animation: achvSpin .7s linear infinite;
}
@keyframes achvSpin { to { transform: rotate(360deg); } }
#achvModalImg {
    max-width: 100%;
    max-height: calc(92vh - 130px);
    object-fit: contain;
    display: block;
}

/* footer */
.achv-modal-footer {
    padding: 10px 20px;
    border-top: 1px solid rgba(255,255,255,.06);
    font-size: 12px;
    color: rgba(255,255,255,.35);
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}
.achv-modal-footer i { color: #f0c040; }

/* ESC hint */
@media (min-width:768px) {
    .achv-modal-footer::after {
        content: '— Press ESC to close';
        margin-left: auto;
    }
}


/* ═══════════════════════════════════════════════
   Academic Calendar Page — Themed Styles
   ═══════════════════════════════════════════════ */

/* Hero */
.terms-hero {
    position: relative;
    min-height: 280px;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #0d2137 0%, #1a3a5c 60%, #0d2137 100%);
    overflow: hidden;
}
.terms-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.terms-hero-overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 60px 20px;
}
.terms-hero .subscribe-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #f0c040;
    margin-bottom: 12px;
}
.terms-hero h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    color: #fff;
    margin-bottom: 12px;
}
.terms-hero p {
    color: rgba(255,255,255,0.75);
    font-size: 15px;
    max-width: 600px;
    margin: 0 auto;
}
.hero-breadcrumb {
    margin-top: 18px;
    font-size: 13px;
    color: rgba(255,255,255,0.65);
}
.hero-breadcrumb a  { color: #f0c040; text-decoration: none; }
.hero-breadcrumb span { margin: 0 7px; }

/* Main section */
.cal-section {
    background: #f4f6f9;
    padding: 60px 0 80px;
    min-height: 60vh;
}

/* Stat cards */
.stat-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(13,33,55,0.08);
    padding: 20px 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: transform .2s, box-shadow .2s;
    margin-bottom: 20px;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(13,33,55,0.12); }
.stat-card-icon {
    width: 50px; height: 50px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.stat-card-icon i { font-size: 20px; }
.stat-card-body strong {
    display: block;
    font-size: 24px;
    font-weight: 800;
    color: #1a3a5c;
    line-height: 1;
}
.stat-card-body span {
    font-size: 12.5px;
    color: #718096;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 3px;
    display: block;
}

/* Filter toolbar */
.cal-filter-bar {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(13,33,55,0.07);
    padding: 18px 24px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.cal-filter-bar .filter-label {
    font-size: 13px;
    font-weight: 700;
    color: #1a3a5c;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 6px;
}
.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f4f6f9;
    border: 1.5px solid transparent;
    color: #4a5568;
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
}
.filter-btn:hover,
.filter-btn.active { background: #1a3a5c; color: #fff; border-color: #1a3a5c; }
.filter-btn .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* Calendar / list card */
.cal-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 16px rgba(13,33,55,0.09);
    padding: 28px 28px 32px;
    margin-bottom: 28px;
}
.cal-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 2px solid #f0c040;
}
.cal-card-icon {
    width: 42px; height: 42px;
    border-radius: 10px;
    background: linear-gradient(135deg, #1a3a5c, #2e6da4);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.cal-card-icon i { color: #f0c040; font-size: 18px; }
.cal-card-header h3 { font-size: 18px; font-weight: 700; color: #1a3a5c; margin: 0; }

/* FullCalendar overrides */
.fc .fc-toolbar-title  { font-size: 18px !important; font-weight: 700 !important; color: #1a3a5c !important; }
.fc .fc-button-primary {
    background: #1a3a5c !important;
    border-color: #1a3a5c !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 7px !important;
    padding: 5px 12px !important;
}
.fc .fc-button-primary:not(:disabled):active,
.fc .fc-button-primary:not(:disabled).fc-button-active {
    background: #f0c040 !important;
    border-color: #f0c040 !important;
    color: #1a3a5c !important;
}
.fc .fc-col-header-cell-cushion { font-weight: 700; font-size: 12px; color: #1a3a5c; text-transform: uppercase; letter-spacing: .5px; }
.fc .fc-daygrid-day-number { font-size: 13px; font-weight: 600; color: #4a5568; }
.fc .fc-day-today .fc-daygrid-day-number {
    background: #f0c040; color: #1a3a5c !important;
    border-radius: 50%; width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center; font-weight: 800;
}
.fc .fc-event { border-radius: 5px !important; font-size: 12px !important; font-weight: 600 !important; padding: 2px 6px !important; cursor: pointer; }
.fc-theme-standard td, .fc-theme-standard th { border-color: #edf2f7 !important; }
.fc .fc-day-today { background: rgba(240,192,64,0.07) !important; }

/* Sidebar */
.terms-toc-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(13,33,55,0.08);
    padding: 26px 22px;
    position: sticky;
    top: 90px;
    margin-bottom: 24px;
}
.terms-toc-card h6 {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #1a3a5c;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0c040;
}
@media (max-width: 991px) { .terms-toc-card { position: static; } }

/* Upcoming events */
.upcoming-list { list-style: none; padding: 0; margin: 0; }
.upcoming-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f4f9;
}
.upcoming-item:last-child { border-bottom: none; }
.upcoming-date {
    flex-shrink: 0;
    width: 44px; height: 44px;
    background: linear-gradient(135deg, #1a3a5c, #2e6da4);
    border-radius: 10px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}
.upcoming-date .day { font-size: 15px; font-weight: 800; color: #f0c040; line-height: 1; }
.upcoming-date .mon { font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.8); text-transform: uppercase; }
.upcoming-body .ev-title { font-size: 13px; font-weight: 700; color: #1a3a5c; margin-bottom: 2px; line-height: 1.3; }
.upcoming-body .ev-type  { font-size: 11.5px; color: #718096; }
.upcoming-body .ev-type i { font-size: 11px; margin-right: 3px; }

/* Legend */
.legend-list { list-style: none; padding: 0; margin: 0; }
.legend-item  { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #4a5568; font-weight: 500; padding: 5px 0; }
.legend-dot   { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.legend-count { margin-left: auto; background: #f0f4f9; color: #1a3a5c; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }

/* Modal */
.ev-modal-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ev-modal-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; font-size: 14px; color: #4a5568; }
.ev-modal-row i { color: #f0c040; font-size: 15px; margin-top: 1px; flex-shrink: 0; width: 18px; }
.ev-modal-row strong { color: #1a3a5c; }

/* Contact box */
.terms-contact-box {
    background: linear-gradient(135deg, #0d2137 0%, #1a3a5c 100%);
    border-radius: 12px;
    padding: 30px 32px;
    color: #fff;
    margin-top: 36px;
}
.terms-contact-box h4 { font-size: 18px; font-weight: 700; color: #f0c040; margin-bottom: 8px; }
.terms-contact-box p  { font-size: 14px; color: rgba(255,255,255,0.8); margin-bottom: 16px; line-height: 1.7; }
.terms-contact-box .contact-items { display: flex; flex-wrap: wrap; gap: 16px; }
.terms-contact-box .contact-item  { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: rgba(255,255,255,0.9); }
.terms-contact-box .contact-item i { color: #f0c040; font-size: 15px; }

/* List view table */
.cal-table-wrap { overflow-x: auto; border-radius: 10px; box-shadow: 0 1px 8px rgba(13,33,55,0.07); }
.cal-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cal-table thead tr { background: linear-gradient(135deg, #1a3a5c, #2e6da4); color: #fff; }
.cal-table thead th { padding: 13px 18px; font-weight: 700; font-size: 13px; text-align: left; white-space: nowrap; }
.cal-table thead th:first-child { border-radius: 10px 0 0 0; }
.cal-table thead th:last-child  { border-radius: 0 10px 0 0; }
.cal-table tbody tr { border-bottom: 1px solid #e8edf4; transition: background .15s; }
.cal-table tbody tr:hover { background: #f0f4fb; }
.cal-table tbody td { padding: 11px 18px; color: #4a5568; vertical-align: middle; }
.cal-table .type-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 20px; }
.cal-table .date-col   { font-weight: 700; color: #1a3a5c; white-space: nowrap; }

/* View toggle */
.view-toggle-btn {
    background: #f4f6f9;
    border: 1.5px solid #e2e8f0;
    color: #4a5568;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all .2s;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.view-toggle-btn:hover,
.view-toggle-btn.active { background: #1a3a5c; color: #fff; border-color: #1a3a5c; }
#listView { display: none; }

/* Empty / no-upcoming */
.empty-state { text-align: center; padding: 50px 20px; color: #a0aec0; }
.empty-state i { font-size: 48px; margin-bottom: 12px; display: block; }
.empty-state p { font-size: 15px; margin: 0; }
.no-upcoming   { text-align: center; padding: 20px 10px; color: #a0aec0; font-size: 13px; }



/* =============================================================
   ACHIEVEMENT GALLERY SECTION  –  achievement.css
   ============================================================= */

/* ── Section wrapper ─────────────────────────────────────────── */
.achievement-gallery-section {
    background: #f4f7ff;
    padding: 60px 0;
}

/* ── Grid card ───────────────────────────────────────────────── */
.achv-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    background: #1a3a5c;
    aspect-ratio: 4 / 3;
    box-shadow: 0 4px 20px rgba(26, 58, 92, .15);
    transition: transform .3s ease, box-shadow .3s ease;
}
.achv-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 14px 40px rgba(26, 58, 92, .28);
}

/* ── Card image ──────────────────────────────────────────────── */
.achv-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s ease;
}
.achv-card:hover img {
    transform: scale(1.08);
}

/* ── Hover overlay ───────────────────────────────────────────── */
.achv-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(10, 24, 50, .88) 0%,
        rgba(10, 24, 50, .4)  50%,
        transparent           100%
    );
    display: flex;
    align-items: flex-end;
    padding: 18px 16px;
    opacity: 0;
    transition: opacity .3s ease;
}
.achv-card:hover .achv-overlay {
    opacity: 1;
}
.achv-overlay-inner {
    width: 100%;
    color: #fff;
}
.achv-zoom-icon {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 1.1rem;
    background: rgba(255,255,255,.18);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}
.achv-label {
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.3;
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.achv-sublabel {
    font-size: .76rem;
    color: rgba(255,255,255,.8);
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.achv-date {
    font-size: .73rem;
    color: rgba(255,255,255,.7);
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── "Latest" badge ──────────────────────────────────────────── */
.achv-new-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    background: linear-gradient(135deg, #f5a623, #e8870a);
    color: #fff;
    font-size: .7rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 20px;
    letter-spacing: .06em;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(245, 166, 35, .5);
}

/* ── Image count badge ───────────────────────────────────────── */
.achv-count-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 3;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: .7rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── Name label below card ───────────────────────────────────── */
.achv-card-name {
    text-align: center;
    margin-top: 9px;
    font-size: .88rem;
    font-weight: 700;
    color: #1a3a5c;
    line-height: 1.35;
    padding: 0 4px;
}

/* ── "Show all" / "Show less" toggle ────────────────────────── */
.achv-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 32px;
    padding: 11px 30px;
    background: linear-gradient(135deg, #1a3a5c, #2563eb);
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: .92rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(37, 99, 235, .35);
    transition: transform .2s, box-shadow .2s;
}
.achv-toggle-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 99, 235, .45);
}

/* ── Hidden rows (beyond first 6) ────────────────────────────── */
.achv-hidden-row {
    display: none;
}
.achv-hidden-row.achv-visible {
    display: flex; /* Bootstrap row uses flex */
}

/* ── Lightbox modal ──────────────────────────────────────────── */
.achv-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.achv-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 15, 35, .85);
    backdrop-filter: blur(6px);
}
.achv-modal-box {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    max-width: 860px;
    width: 100%;
    box-shadow: 0 30px 80px rgba(0,0,0,.5);
    animation: achvModalIn .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes achvModalIn {
    from { opacity: 0; transform: scale(.88) translateY(20px); }
    to   { opacity: 1; transform: scale(1)   translateY(0);    }
}
.achv-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: linear-gradient(135deg, #1a3a5c, #2563eb);
    color: #fff;
}
.achv-modal-meta { display: flex; flex-direction: column; gap: 2px; }
.achv-modal-title { font-size: 1rem; font-weight: 700; }
.achv-modal-date  { font-size: .78rem; opacity: .8; }
.achv-modal-close {
    background: rgba(255,255,255,.15);
    border: none;
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: background .2s;
}
.achv-modal-close:hover { background: rgba(255,255,255,.3); }

.achv-modal-body {
    position: relative;
    background: #0a0f1e;
    min-height: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.achv-modal-body img {
    width: 100%;
    max-height: 65vh;
    object-fit: contain;
    display: block;
}
.achv-modal-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #94a3b8;
    font-size: .9rem;
}
.achv-spinner {
    width: 38px;
    height: 38px;
    border: 3px solid rgba(255,255,255,.15);
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: achvSpin .7s linear infinite;
}
@keyframes achvSpin { to { transform: rotate(360deg); } }

.achv-modal-footer {
    padding: 10px 20px;
    text-align: center;
    font-size: .8rem;
    color: #64748b;
    background: #f8faff;
    border-top: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 575px) {
    .achv-label   { font-size: .8rem; }
    .achv-overlay { padding: 12px 10px; }
    .achv-card    { border-radius: 12px; }
    .achv-modal-box { border-radius: 14px; }
}


/* ================================================================
   PROUD MOMENTS  —  CSS
   File : assets/css/proud_moments.css

   Load in your <head> (add once):
   <link rel="stylesheet" href="assets/css/proud_moments.css">
================================================================ */

/* 5-equal columns on lg+ (Bootstrap has no col-lg-2dot4) ------- */
@media (min-width: 992px) {
    .col-lg-pmcol {
        flex: 0 0 auto;
        width: 20%;
    }
}

/* Section ------------------------------------------------------- */
.pm-section {
    background: #ffffff;
}

/* Subtitle ------------------------------------------------------ */
.pm-subtitle {
    color: #6c757d;
    font-size: .97rem;
    max-width: 640px;
    line-height: 1.8;
}

/* Card ---------------------------------------------------------- */
.pm-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 34px 16px 28px;
    border-radius: 16px;
    background: #ffffff;
    border: 1.5px solid var(--pmcbd);
    box-shadow: 0 4px 24px rgba(0, 0, 0, .07);
    height: 100%;
    cursor: default;
    transition: transform .35s ease,
                box-shadow .35s ease,
                border-color .35s ease,
                background .35s ease;
}

.pm-card:hover {
    transform: translateY(-10px);
    background: var(--pmcbg);
    border-color: var(--pmc);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .13);
}

/* Rings --------------------------------------------------------- */
.pm-rings {
    position: relative;
    width: 90px;
    height: 90px;
    margin-bottom: 20px;
    flex-shrink: 0;
}

/* outer solid ring */
.pm-ring-1 {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid;
    border-color: color-mix(in srgb, var(--pmc) 30%, transparent);
    animation: pmCW 11s linear infinite;
}

/* middle dashed ring */
.pm-ring-2 {
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    border: 1.5px dashed;
    border-color: color-mix(in srgb, var(--pmc) 55%, transparent);
    animation: pmCCW 7s linear infinite;
}

/* inner tinted circle */
.pm-ring-3 {
    position: absolute;
    inset: 24px;
    border-radius: 50%;
    background: var(--pmcbg);
    border: 1.5px solid;
    border-color: color-mix(in srgb, var(--pmc) 50%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* speed up on hover */
.pm-card:hover .pm-ring-1 {
    animation-duration: 2.5s;
    border-color: var(--pmc);
}
.pm-card:hover .pm-ring-2 {
    animation-duration: 1.8s;
    border-color: var(--pmc);
}

/* spin keyframes */
@keyframes pmCW  { to { transform: rotate( 360deg); } }
@keyframes pmCCW { to { transform: rotate(-360deg); } }

/* Icon ---------------------------------------------------------- */
.pm-icon {
    font-size: 1.3rem;
    color: var(--pmc);
    transition: transform .3s ease;
}
.pm-card:hover .pm-icon {
    transform: scale(1.2);
}

/* Counter number ----------------------------------------------- */
.pm-number {
    font-family: 'Rajdhani', 'Segoe UI', Arial, sans-serif;
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 700;
    line-height: 1;
    color: var(--pmc);
    margin-bottom: 8px;
}

/* Label --------------------------------------------------------- */
.pm-label {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #2c3e50;
    margin-bottom: 5px;
    line-height: 1.3;
}

/* Note ---------------------------------------------------------- */
.pm-note {
    font-size: .7rem;
    color: #9eaab7;
    line-height: 1.45;
}