/********** Template CSS **********/
:root {
    --primary: #FEA116;
    --light: #F1F8FF;
    --dark: #0F172B;
}

.fw-medium {
    font-weight: 500 !important;
}

.fw-semi-bold {
    font-weight: 600 !important;
}

.back-to-top {
    position: fixed;
    display: none;
    right: 45px;
    bottom: 45px;
    z-index: 99;
}
   #rooms img {
        height: 270px;
        width: 100%;
    }

    #Institude img {
        height: 270px;
        width: 100%;
    }

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


/*** Button ***/
.btn {
    font-weight: 500;
    text-transform: uppercase;
    transition: .5s;
}

.btn.btn-primary,
.btn.btn-secondary {
    color: #FFFFFF;
    background-color: #FEA116;
    border-color: #FEA116;
}

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

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

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

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


/*** Navbar ***/
.navbar-dark .navbar-nav .nav-link {
    margin-right: 30px;
    padding: 25px 0;
    color: #FFFFFF;
    font-size: 15px;
    /* text-transform: uppercase; */
    outline: none;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
    color: var(--primary);
}

@media (max-width: 991.98px) {
    .navbar-dark .navbar-nav .nav-link {
        margin-right: 0;
        padding: 10px 0;
    }
}


/*** Header ***/
.carousel-caption {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 43, .7);
    z-index: 1;
}

.carousel-control-prev,
.carousel-control-next {
    width: 10%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
}

@media (max-width: 768px) {
    #header-carousel .carousel-item {
        position: relative;
        min-height: 450px;
    }

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

.page-header {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.page-header-inner {
    background: rgba(15, 23, 43, .7);
}

.breadcrumb-item+.breadcrumb-item::before {
    color: var(--light);
}

.booking {
    position: relative;
    margin-top: -100px !important;
    z-index: 1;
}


/*** Section Title ***/
.section-title {
    position: relative;
    display: inline-block;
}

.section-title::before {
    position: absolute;
    content: "";
    width: 45px;
    height: 2px;
    top: 50%;
    left: -55px;
    margin-top: -1px;
    background: var(--primary);
}

.section-title::after {
    position: absolute;
    content: "";
    width: 45px;
    height: 2px;
    top: 50%;
    right: -55px;
    margin-top: -1px;
    background: var(--primary);
}

.section-title.text-start::before,
.section-title.text-end::after {
    display: none;
}


/*** Service ***/
.service-item {
    height: 320px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background: #FFFFFF;
    box-shadow: 0 0 45px rgba(0, 0, 0, .08);
    transition: .5s;
}

.service-item:hover {
    background: var(--primary);
}

.service-item .service-icon {
    margin: 0 auto 30px auto;
    width: 100%;
    height: 65px;
    transition: .5s;
}

.service-item i,
.service-item h5,
.service-item p {
    transition: .5s;
}

.service-item:hover i,
.service-item:hover h5,
.service-item:hover p {
    color: #FFFFFF !important;
}


/*** Youtube Video ***/
.video {
    position: relative;
    height: 100%;
    min-height: 500px;
    background: linear-gradient(rgba(15, 23, 43, .1), rgba(15, 23, 43, .1)), url(../img/video.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.video .btn-play {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    box-sizing: content-box;
    display: block;
    width: 32px;
    height: 44px;
    border-radius: 50%;
    border: none;
    outline: none;
    padding: 18px 20px 18px 28px;
}

.video .btn-play:before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 100px;
    height: 100px;
    background: var(--primary);
    border-radius: 50%;
    animation: pulse-border 1500ms ease-out infinite;
}

.video .btn-play:after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 100px;
    height: 100px;
    background: var(--primary);
    border-radius: 50%;
    transition: all 200ms;
}

.video .btn-play img {
    position: relative;
    z-index: 3;
    max-width: 100%;
    width: auto;
    height: auto;
}

.video .btn-play span {
    display: block;
    position: relative;
    z-index: 3;
    width: 0;
    height: 0;
    border-left: 32px solid var(--dark);
    border-top: 22px solid transparent;
    border-bottom: 22px solid transparent;
}

@keyframes pulse-border {
    0% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
        opacity: 0;
    }
}

#videoModal {
    z-index: 99999;
}

#videoModal .modal-dialog {
    position: relative;
    max-width: 800px;
    margin: 60px auto 0 auto;
}

#videoModal .modal-body {
    position: relative;
    padding: 0px;
}

#videoModal .close {
    position: absolute;
    width: 30px;
    height: 30px;
    right: 0px;
    top: -30px;
    z-index: 999;
    font-size: 30px;
    font-weight: normal;
    color: #FFFFFF;
    background: #000000;
    opacity: 1;
}


/*** Testimonial ***/
.testimonial {
    background: linear-gradient(rgba(15, 23, 43, .7), rgba(15, 23, 43, .7)), url(../img/carousel-2.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.testimonial-carousel {
    padding-left: 65px;
    padding-right: 65px;
}

.testimonial-carousel .testimonial-item {
    padding: 30px;
}

.testimonial-carousel .owl-nav {
    position: absolute;
    width: 100%;
    height: 40px;
    top: calc(50% - 20px);
    left: 0;
    display: flex;
    justify-content: space-between;
    z-index: 1;
}

.testimonial-carousel .owl-nav .owl-prev,
.testimonial-carousel .owl-nav .owl-next {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: var(--primary);
    border-radius: 2px;
    font-size: 18px;
    transition: .5s;
}

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


/*** Team ***/
.team-item,
.team-item .bg-primary,
.team-item .bg-primary i {
    transition: .5s;
}

.team-item:hover {
    border-color: var(--secondary) !important;
}

.team-item:hover .bg-primary {
    background: var(--secondary) !important;
}

.team-item:hover .bg-primary i {
    color: var(--secondary) !important;
}


/*** Footer ***/
.newsletter {
    position: relative;
    z-index: 1;
}

.footer {
    position: relative;
    padding-top: 30px;
}

.footer .btn.btn-social {
    margin-right: 5px;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light);
    border: 1px solid #FFFFFF;
    border-radius: 35px;
    transition: .3s;
}

.footer .btn.btn-social:hover {
    color: var(--primary);
}

.footer .btn.btn-link {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-align: left;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: normal;
    text-transform: capitalize;
    transition: .3s;
}

.footer .btn.btn-link::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
}

.footer .btn.btn-link:hover {
    letter-spacing: 1px;
    box-shadow: none;
}

.footer .copyright {
    padding: 25px 0;
    font-size: 15px;
    border-top: 1px solid rgba(256, 256, 256, .1);
}

.footer .copyright a {
    color: var(--light);
}

.footer .footer-menu a {
    margin-right: 15px;
    padding-right: 15px;
    border-right: 1px solid rgba(255, 255, 255, .3);
}

.footer .footer-menu a:last-child {
    margin-right: 0;
    padding-right: 0;
    border-right: none;
}

@media screen and (min-width: 1600px) {
    #rooms .room-item h5 {
        font-size: 20px;
    }
}

@media screen and (max-width: 1300px) {
    #rooms .room-item h5 {
        font-size: 20px;
    }
}



/* Set carousel height */
#header-carousel,
#header-carousel .carousel-inner,
#header-carousel .carousel-item {
    height: 50vh;
}

/* Make images fit properly */
#header-carousel .carousel-item img {
    height: 50vh;
    object-fit: cover;
}

/* Keep caption centered */
#header-carousel .carousel-caption {
    height: 100%;
}

@media (max-width: 768px) {

    #header-carousel,
    #header-carousel .carousel-inner,
    #header-carousel .carousel-item,
    #header-carousel .carousel-item img {
        height: 50vh;
    }
}



.container {
    background-color: transparent;
    /* adjust as needed: 800–1000px */
    margin: 0 auto;
    /* center on page */
    padding: 10px;

}

.container table {
    align-items: center;
    justify-content: center;
    margin: 30px auto;
    width: 90%;
   
}

.card-header .row {

    margin: 2rem;
}

h2 {
    font-size: 40px;
    font-weight: 800;
    margin: 2rem 0 2rem;
    text-align: center;
}

h3 {
    margin: 100px 0 36px;
    font-size: 21px;
    font-weight: bold;
    text-align: center;
}

.section-title {
    text-align: center;
    font-weight: bold;
    margin: 40px 0 15px;
    font-size: 16px;
}

/* COMMON TABLE STYLE */
table {  
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    margin-bottom: 130px;
    table-layout: fixed;
    word-wrap: break-word;
}

th,
td {
    padding: 8px 10px;
    font-size: 13px;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* HEADER ROW */
table thead th,
table tr:first-child th {
    background: #0F172B;
    color: #ffffff;
    padding: 12px;
    text-align: left;
    font-size: 15px;
    border: 1px solid #ffffff;
}

/* TABLE DATA */
table tbody td,
table tr td {
    padding: 12px;
    border: 1px solid #dddddd;
    font-size: 14px;
}

/* ZEBRA STRIPING */
table tbody tr:nth-child(even),
table tr:nth-child(even):not(:first-child) {
    background: #dddddd36;
}



tr .table-light {
    background-color: #0072ff !important;
}

/* SR NO COLUMN */
.sr {
    width: 60px;
    text-align: center;
    font-weight: bold;
}

/* COMMITTEE TABLE COLUMN ALIGNMENT */
table td:nth-child(4),
table td:nth-child(5) {
    white-space: nowrap;
}

/* ===== IMAGE SECTION ===== */
.hall-image img {
    width: 100%;
    max-width: 90%;
    margin-left: 2rem;
    margin-top: 2rem;
    height: 300px;
    max-height: 500px;
    border-radius: 18px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
    transition: transform 0.4s ease;
}

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

/* ===== CAPACITY WRAPPER ===== */
.capacity-wrapper {
    display: flex;
    gap: 22px;
    /*margin-bottom: 35px;*/
    margin-top: 90px;
}

/* ===== CAPACITY BOXES ===== */
.capacity-box {
    display:grid;
    flex: 1;
    padding: 35px 20px;
    border-radius: 16px;
    text-align: center;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.15);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    background: linear-gradient(135deg, #00c6ff, #0072ff);
}

.capacity-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}


/* ===== NUMBERS ===== */
.capacity-box .number {
    font-size: 42px;
    font-weight: 800;
    letter-spacing: 1px;
    /*margin-bottom: 12px;*/
    display: inline-block;
    padding: 10px 20px;
    border-radius: 8px;
}

/* ===== LABEL ===== */
.capacity-box .label {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.35);
    display: inline-block;
    padding: 6px 14px;
    border-radius: 6px;

}

/* Remove specific color classes */
/* ===== BOOK BUTTON ===== */
.book-btn-wrap {
    text-align: center;
}

.book-btn {
    display: inline-block;
    background: linear-gradient(135deg, #0b132b, #1c2541);
    color: #ffffff;
    padding: 16px 50px;
    font-size: 15px;
    font-weight: 700;
    margin-top: 4rem;
    letter-spacing: 1px;
    text-decoration: none;
    border-radius: 8px;
    box-shadow: 0 15px 35px rgba(11, 19, 43, 0.35);
    transition: all 0.35s ease;
}

.book-btn:hover {
    background: linear-gradient(135deg, #1c2541, #3a506b);
    transform: translateY(-4px);
    box-shadow: 0 25px 45px rgba(11, 19, 43, 0.5);
}
 .footer .bg-primary.rounded {
      background-color: #0F172B !important;
 }

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {

    /* Reduce margins and gaps on larger tablets/desktops */
    .capacity-wrapper {
        gap: 16px;
        margin-top: 60px;
    }

    .hall-image img {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    h2 {
        font-size: 36px;
    }

    h3 {
        font-size: 19px;
        margin: 80px 0 24px;
    }
}

@media (max-width: 992px) {

    /* Stack capacity boxes vertically */
    .capacity-wrapper {
        flex-direction: column;
        gap: 20px;
        margin-top: 50px;
    }

    .capacity-box {
        padding: 30px 15px;
        display: grid;
        justify-items: center;
        gap: 5px;
    }

    .book-btn {
        padding: 14px 40px;
        font-size: 14px;
        margin-top: 3rem;
    }

    h2 {
        font-size: 32px;
    }

    h3 {
        font-size: 18px;
        margin: 60px 0 20px;
    }

    .container table {
        width: 100%;
        max-width: 95%;
        margin: 40px auto;
    }
}

@media (max-width: 768px) {

    /* Tablets and small screens */
    .capacity-box .number {
        font-size: 36px;
        padding: 8px 16px;
    }

    .capacity-box .label {
        font-size: 14px;
        padding: 4px 12px;
    }

    .book-btn {
        padding: 12px 30px;
        font-size: 13px;
    }

    table thead th,
    table tr:first-child th {
        font-size: 14px;
        padding: 10px;
    }

    table tbody td {
        font-size: 11px;
        padding: 8px;
        
    }
    #login-section {
        width: 100% !important;
    }
    .footer .bg-primary.rounded {
        padding: 0 !important;
        background-color: #0F172B !important;
    }
}

@media (max-width: 576px) {

    /* Mobile phones */
    .capacity-box .number {
        font-size: 30px;
        padding: 6px 12px;
    }

    .capacity-box .label {
        font-size: 19px;
        padding: 12px 8px;
        width: 50%;
        text-align: center;
       
    }

    .book-btn {
        padding: 10px 20px;
        font-size: 12px;
        margin-top: 2rem;
    }

    h2 {
        font-size: 28px;
    }

    h3 {
        font-size: 16px;
        margin: 40px 0 16px;
    }

    .hall-image img {
        max-height: 350px;
    }

    .container table {
        font-size: 12px;
        margin: 20px auto;
    }
}

/* Responsive Table Wrapper */
.table-wrapper {
    width: 100%;
    max-height: 500px;   /* Adjust the vertical scroll height */
    overflow-x: auto;    /* Horizontal scroll for too many columns */
    overflow-y: auto;    /* Vertical scroll for too many rows */
   
    margin-bottom: 30px;     /* Space after table */
}

/* Optional: ensure table doesn't shrink too much */
.table-wrapper table {
    min-width: 600px;  /* Set according to your number of columns */
    border-collapse: collapse;
}

/* Optional: prevent text from wrapping */
.table-wrapper th,
.table-wrapper td {
    white-space: nowrap;
}


/*Newly Add on 11/2/26*/
.policy-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #f8fafc;
    overflow-y: auto;
    z-index: 9999;
    padding: 60px 20px;
}

.policy-container {
    max-width: 900px;
    margin: auto;
    background: #ffffff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

.policy-list li {
    margin-bottom: 10px;
}


/* ============================================================
   SUCCESS POPUP MODAL STYLES
   ============================================================ */

/* 1. The semi-transparent background overlay */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 43, 0.7); /* Using a dark transparent tint */
    backdrop-filter: blur(4px); /* Modern blur effect */
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0; /* Hidden by default */
    pointer-events: none;
    transition: opacity 0.3s ease;
}

    /* 2. Show state for overlay */
    .popup-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }

/* 3. The actual modal card */
.popup-content {
    background: #ffffff;
    padding: 2.5rem;
    border-radius: 1.5rem;
    max-width: 400px;
    width: 95%;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: scale(0.85); /* Slightly smaller for entrance animation */
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 4. Animation effect when modal opens */
.popup-overlay.active .popup-content {
    transform: scale(1);
}

/* 5. Circular wrap for the Check icon */
.success-icon-wrap {
    width: 80px;
    height: 80px;
    background: #ecfdf5; /* Light emerald background */
    color: #10b981; /* Emerald green icon color */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    border: 4px solid #ffffff;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.1);
}

/* 6. Text styling inside popup */
.popup-content h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #0F172B;
    margin-top: 0;
}

.popup-content p {
    font-family: 'Heebo', sans-serif;
    color: #64748b;
    font-size: 0.95rem;
    margin-bottom: 2rem;
    line-height: 1.5;
}

/* 7. Button styling using your project's --primary color */
.popup-content .btn-primary {
    background-color: #FEA116;
    color: #FFFFFF;
    width: 100%;
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .popup-content .btn-primary:hover {
        background-color: #ea9210;
        transform: translateY(-2px);
        box-shadow: 0 10px 15px -3px rgba(254, 161, 22, 0.3);
    }



.field-image .uploadbx {
    border: 1px solid #495057;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
}

/* .empuploadbx{
    padding: 10px !important;
} */

.field-image input[type="file"] {
    display: none;
}

.field-image .browsebtn a label {
    display: inline-block;
    text-transform: uppercase;
    color: #fff;
    background: #4e73df;
    text-align: center;
    width: 100%;
    height: auto;
    padding: 10px;
    cursor: pointer;
    user-select: none;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
}

    .field-image .browsebtn a label:active {
        transform: scale(0.9);
    }

.browsebtn
{
    width:180px;
}