:root {
    --primary-blue: #1f4379;
    --primary-blue-soft: #1f4379;
    --secondary-blue: #34a6de;
    --teal: #1f4379;
    --orange: #f9c004;
    --orange-soft: #f9c004;
    --red: #cc2909;
    --light-bg: #f3f6fb;
    --panel-bg: #ffffff;
    --text-dark: #1f4379;
    --text-light: #1f4379;
    --white: #ffffff;
    --shadow-soft: 0 18px 45px rgba(31, 67, 121, 0.10);
    --shadow-card: 0 14px 30px rgba(31, 67, 121, 0.08);
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 12px;
}

/* Global foundation */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Manrope', sans-serif;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

button,
a,
label,
input {
    -webkit-tap-highlight-color: transparent;
}

button,
a,
label {
    touch-action: manipulation;
}

html {
    overflow-x: hidden;
    max-width: 100vw;
}

body {
    background: linear-gradient(180deg, #f5f7fb 0%, #edf4fc 100%);
    color: var(--text-dark);
    overflow-x: clip;
    width: 100%;
    position: relative;
}

body.modal-open {
    overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
.section-heading,
.hero-title {
    font-family: 'Manrope', sans-serif !important;
}

.section-heading,
.hero-title {
    font-size: 2.5rem !important;
    line-height: 1.2 !important;
}

img {
    display: block;
    max-width: 100%;
}

/* Scroll-reveal animation */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.topbar {
    display: flex;
    align-items: center;
    background: var(--orange);
    color: var(--primary-blue);
    min-height: 38px;
    padding: 0;
    overflow: hidden;
    box-shadow: inset 0 -1px 0 rgba(16, 29, 61, 0.10);
}

/* Hide individual static items globally — the ticker replaces them everywhere now */
.topbar-status,
.topbar-affiliation,
.topbar-phone {
    display: none;
}

/* Ticker wrapper fills the bar */
.topbar-ticker {
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden;
    height: 100%;
}

/* The track holds 2 copies of the text for seamless looping */
.topbar-ticker-track {
    display: flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
    animation: topbarScroll 90s linear infinite;
}

.topbar-ticker-track span {
    display: inline-block;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-blue);
}

@keyframes topbarScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Navigation */
.navbar {
    background: var(--white);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 52px;
    color: var(--text-dark);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(31, 67, 121, 0.08);
    box-shadow: 0 4px 20px rgba(16, 29, 61, 0.08);
}

.clg-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    margin-left: 10px;
}

.clg-logo img {
    display: block;
    height: 52px;
    width: auto;
    object-fit: contain;
    transform: scale(1.5);
    transform-origin: left center;
}

.clg-logo .logo-mark {
    display: none;
}

.menu-toggle,
.hamburger {
    display: none;
}

.mobile-header-left,
.mobile-brand,
.mobile-brand-collage {
    display: none;
}

.sidebar-overlay {
    display: none;
}

/* Hidden on desktop, only visible inside mobile sidebar */
.mobile-topbar-strip,
.close-sidebar-btn {
    display: none;
}

.nav-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;
    margin-left: 40px;
    min-width: 0;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
}

.nav-links a {
    color: var(--text-dark);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: color 0.25s ease, transform 0.25s ease;
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 100%;
    height: 2px;
    background: var(--orange);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s ease;
}

.nav-links a:hover {
    color: var(--orange);
    transform: translateY(-1px);
}

.nav-links a:hover::after {
    transform: scaleX(1);
}

.contact-info {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark);
}

.contact-info span {

    display: flex;
    gap: 10px;
    opacity: 0.95;

}

/* Whole call row is one tappable link (icon + number side by side) */
.contact-call {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.contact-info a {
    color: var(--text-dark);
    text-decoration: none;
    transition: color 0.25s ease, transform 0.25s ease;
}

.nav-action-btn {
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    display: inline-block;
    transition: all 0.3s ease;
}

.contact-info .nav-call-btn,
.contact-info .nav-apply-btn {
    background-color: var(--primary-blue);
    color: var(--white);
    box-shadow: 0 4px 10px rgba(31, 67, 121, 0.2);
}

.contact-info .nav-call-btn:hover,
.contact-info .nav-apply-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(31, 67, 121, 0.3);
    color: var(--white);
}

/* Hero */
.hero {
    position: relative;
    min-height: calc(100vh - 72px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 80px 60px 60px;
    color: var(--white);
    overflow: hidden;
    scroll-margin-top: 70px;
    background: #1f4379;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../images/New%20Photos/Admissions%20Open%20Banner%20Desktop.webp');
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(28, 42, 79, 0.9) 0%, rgba(28, 42, 79, 0.4) 100%);
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 660px;
    animation: slideUp 0.8s ease-out;
}

.hero-form-container {
    position: relative;
    z-index: 2;
    margin-left: auto;
    margin-right: 100px;
    margin-top: -90px;
    width: 100%;
    max-width: 380px;
    animation: slideUp 0.8s ease-out 0.2s both;
}

.hero-form-card {
    background: transparent;
    padding: 0;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    color: var(--text-dark);
    overflow: hidden;
}

.hero-form-card .modal-kicker {
    font-size: 13px;
    font-weight: 800;
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
}

.hero-form-card h2 {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 16px;
    color: var(--primary-blue);
}

.hero-form-card .modal-description {
    font-size: 13px;
    color: rgba(31, 67, 121, 0.8);
    margin-bottom: 20px;
    font-weight: 500;
}

.hero-admission-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hero-admission-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-blue);
}

.hero-admission-form input,
.hero-admission-form select {
    padding: 10px 14px;
    border: 1px solid rgba(31, 67, 121, 0.15);
    border-radius: 12px;
    font-size: 14px;
    background: var(--white);
    color: var(--text-dark);
    font-weight: 500;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.hero-admission-form input:focus,
.hero-admission-form select:focus {
    outline: none;
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(249, 192, 4, 0.15);
}

.hero-form-card .admission-submit {
    background: linear-gradient(135deg, #f9c004, #f9c004);
    color: var(--primary-blue);
    border: none;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    margin-top: 4px;
}

.hero-form-card .admission-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(249, 192, 4, 0.25);
}

.mobile-hero-form {
    display: none;
}

.hero-title {
    font-size: clamp(2.8rem, 5vw, 15rem);
    font-weight: 800;
    line-height: 0.96;
    margin-bottom: 24px;
    color: var(--orange);
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.hero-title span {
    color: var(--white);
    font-size: clamp(1.6rem, 2.5vw, 2.8rem);
    letter-spacing: 2px;
    display: inline-block;
    margin: 8px 0;
}

.specializations {
    margin-top: 26px;
}

.specializations p {
    font-size: 16px;
    margin-bottom: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.92);
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 34px;
}

.chips span {
    background: rgba(255, 255, 255, 0.94);
    color: var(--primary-blue);
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    box-shadow: 0 10px 25px rgba(16, 29, 61, 0.08);
    transition: all 0.3s ease;
}

.chips span:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 14px 30px rgba(16, 29, 61, 0.12);
    cursor: pointer;
}

.chips span.highlight {
    background: linear-gradient(135deg, #f9c004, #f9c004);
    color: var(--white);
}

.logo-box {
    background: var(--white);
    color: var(--text-dark);
    padding: 12px 25px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.logo-box img {
    height: 24px;
    width: auto;
    object-fit: contain;
}

.logo-box:hover {
    transform: translateY(-5px);
}

.scholarship {
    display: inline-flex;
    align-items: flex-end;
    gap: 12px;
    padding: 18px 22px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 22px;
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(6px);
}

.scholarship p {
    font-size: 14px;
    margin: 0;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.scholarship h2 {
    font-size: 4rem;
    color: var(--orange);
    line-height: 0.9;
    margin: 0;
}

.scholarship h2 span {
    font-size: 2rem;
}

.scholarship-text {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
}

.scholarship-text span {
    font-size: 12px;
    font-weight: 500;
    opacity: 0.8;
}

.enquiry-form-section {
    background: linear-gradient(180deg, #1f4379 0%, #1f4379 100%);
    padding: 18px 50px;
    position: relative;
    z-index: 2;
}

.form-container {
    display: flex;
    align-items: center;
    gap: 22px;
    max-width: 1200px;
    min-width: 0;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    padding: 18px 20px;
}

.form-title {
    color: var(--white);
    font-size: 18px;
    font-weight: 800;
    white-space: nowrap;
    letter-spacing: 0.03em;
}

.enquiry-form {
    display: flex;
    gap: 12px;
    flex-grow: 1;
    min-width: 0;
}

.enquiry-form input {
    flex: 1;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--text-dark);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.enquiry-form input:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(249, 192, 4, 0.25);
    transform: translateY(-1px);
}

.enquiry-form button {
    background: linear-gradient(135deg, #f9c004, #f9c004);
    color: var(--primary-blue);
    border: none;
    padding: 0 28px;
    border-radius: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 12px 24px rgba(249, 192, 4, 0.25);
}

.enquiry-form button:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(245, 159, 26, 0.30);
}

.section {
    padding: 40px 50px;
    text-align: center;
    scroll-margin-top: 70px;
    display: flex;
    flex-direction: column;
}

.placements {
    padding-top: 0;
}

.placements .section-heading {
    margin-top: 0;
}

.section-heading {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 12px;
    margin-top: 20px;
    position: relative;
    display: inline-block;
    align-self: center;
}

.section-heading::after {
    content: '';
    display: block;
    width: 78px;
    height: 4px;
    background: linear-gradient(90deg, var(--orange), var(--primary-blue));
    border-radius: 999px;
    margin: 12px auto 0;
}

/* Placement highlight cards */
.placement-highlights {
    position: relative;
    top: -80px;
    z-index: 10;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    height: 90%;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto 20px auto;
    border-radius: 20px;
    overflow: hidden;
}

.highlight-card {
    border-radius: 0;
    padding: 20px 16px;
    text-align: center;
    color: var(--white);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.highlight-card::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -30%;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

.highlight-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
}

.highlight-card h3 {
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 6px;
}

.highlight-card h3 span {
    font-size: 1.6rem;
    font-weight: 700;
}

.highlight-card p {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    opacity: 0.92;
    line-height: 1.4;
}

.highlight-card .fortune-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    opacity: 0.8;
    margin-bottom: 4px;
}

.highlight-orange {
    background: linear-gradient(135deg, #F25022 0%, #F25022 100%);
    box-shadow: 0 12px 28px rgba(242, 80, 34, 0.3);
}

.highlight-navy {
    background: linear-gradient(135deg, #1f4379 0%, #1f4379 100%);
    box-shadow: 0 12px 28px rgba(31, 67, 121, 0.3);
}

.highlight-red {
    background: linear-gradient(135deg, #cc2909 0%, #cc2909 100%);
    box-shadow: 0 12px 28px rgba(204, 41, 9, 0.3);
}

.highlight-teal {
    background: linear-gradient(135deg, #34a6de 0%, #34a6de 100%);
    box-shadow: 0 12px 28px rgba(52, 166, 222, 0.3);
}

/* Placement student details */
.placement-student-details {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.placement-student-details .student-card {
    min-width: 0;
    padding: 12px 10px;
    border-radius: 18px;
    text-align: center;
    background: var(--white);
    box-shadow: 0 8px 24px rgba(16, 29, 61, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.placement-student-details .student-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 32px rgba(16, 29, 61, 0.14);
}

.placement-student-details .student-card>img {
    width: 100%;
    aspect-ratio: 1 / 0.9;
    object-fit: cover;
    object-position: top center;
    background: radial-gradient(circle at top center, #ffffff 0%, #edf4fc 100%);
    border-radius: 14px;
    margin-bottom: 10px;
    transition: transform 0.4s ease;
}

.placement-student-details .student-card:hover>img {
    transform: scale(1.02);
}

.placement-student-details .student-name {
    margin-bottom: 2px;
    color: var(--primary-blue);
    font-size: 16px;
}

.placement-student-details .student-card>p {
    margin-bottom: 8px;
    color: var(--text-light);
    font-size: 12px;
}

.placement-student-details .student-card>h3 {
    margin-bottom: 14px;
    color: var(--orange);
    font-size: 23px;
    line-height: 1;
}

.placement-student-details .company-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 6px 8px;
    border-top: 1px solid rgba(16, 29, 61, 0.08);
}

.placement-student-details .company-logo img {
    width: auto;
    max-width: 100%;
    height: 36px;
    min-height: 36px;
    object-fit: contain;
    transform: scale(1.4);
}

.programme-details {
    background: linear-gradient(135deg, #edf4fc 0%, #f8fbff 56%, #fffbea 100%);
    padding-top: 36px;
    padding-bottom: 38px;
    overflow: hidden;
}

.programme-intro {
    max-width: 620px;
    margin: 0 auto 28px;
    color: var(--text-light);
    font-size: 15px;
    line-height: 1.7;
}

.programme-carousel-controls {
    display: none;
}

.student-slider-controls {
    display: none;
}

.course-slider-controls {
    display: none;
}

.courses-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px 14px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.course-card {
    background: var(--white);
    border: 1px solid rgba(16, 29, 61, 0.07);
    border-radius: 18px;
    overflow: hidden;
    /* box-shadow: var(--shadow-card); */
    transition: box-shadow 0.3s ease;
}

.course-card:hover {
    box-shadow: 0 16px 28px rgba(16, 29, 61, 0.13);
}

.course-card img {
    width: 100%;
    aspect-ratio: 3 / 2;
    height: auto;
    object-fit: cover;
    object-position: center;
    background: #edf4fc;
}

.course-card p {
    font-size: 15px;
    font-weight: 800;
    padding: 10px 12px;
    text-align: center;
    color: var(--primary-blue);
}

/* Microsoft centre */
.center-excellence {
    background-color: var(--light-bg);
}

.coe-banner {
    display: flex;
    border-radius: 12px;
    max-width: 1000px;
    margin: 0 auto;
    overflow: hidden;
    text-align: left;
}

.coe-content {
    padding: 50px;
    flex: 1;
}

.coe-content h2 {
    font-size: 2.5rem;
    color: var(--text-dark);
    line-height: 1.2;
    margin-bottom: 20px;
}

.coe-content h2 span {
    color: var(--orange);
}

.highlight-box {
    background-color: var(--primary-blue);
    color: var(--white);
    padding: 10px 15px;
    display: inline-block;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 20px;
}

.coe-features {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.coe-features li {
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.coe-features li::before {
    content: '•';
    color: var(--primary-blue);
    font-size: 20px;
    margin-right: 10px;
}

.coe-image {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.coe-image img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

/* Campus gallery */
.campus-life {
    background-color: var(--white);
    padding: 0;
}

.campus-life>.section-heading {
    padding-top: 60px;
}

.campus-container {
    background-color: var(--primary-blue);
    padding: 60px 20px;
    color: var(--white);
}

.campus-container p {
    font-size: 12px;
    letter-spacing: 2px;
}

.campus-container h3 {
    font-size: 2.5rem;
    margin-bottom: 30px;
}

/* Campus Mosaic Layout */
.campus-mosaic {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: 155px;
    grid-auto-flow: dense;
    gap: 5px;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 12px;
}

.mosaic-item {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 4px;
}

.mosaic-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* Ensure bottom part of these important images is not cropped */
.mosaic-item img[src*="IMG_8446.JPG"],
.mosaic-item img[src*="IMG_8026.JPG"] {
    object-position: center bottom;
}

.mosaic-item:hover img {
    transform: scale(1.05);
    filter: brightness(1.1);
}

.mosaic-item.tall {
    grid-row: span 2;
}


/* Gallery Slider - hidden on desktop, shown on mobile */
.gallery-wrapper {
    display: none;
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.gallery-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 12px;
}

.gallery-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out, transform 0.6s ease-in-out;
    transform: scale(0.95);
}

.gallery-slide.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    z-index: 2;
}

.collage-layout {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
    height: 100%;
}

.collage-layout img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.img-1 {
    grid-area: 1 / 1 / 3 / 3;
}

.img-2 {
    grid-area: 1 / 3 / 2 / 4;
}

.img-3 {
    grid-area: 1 / 4 / 2 / 5;
}

.img-4 {
    grid-area: 2 / 3 / 3 / 4;
}

.img-5 {
    grid-area: 2 / 4 / 3 / 5;
}

.gallery-controls {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.gallery-progress {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 68px;
    color: var(--white);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-align: center;
}

.gallery-btn {
    background: var(--white);
    color: var(--primary-blue);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: background 0.3s, color 0.3s, transform 0.3s;
}

.gallery-btn:hover {
    background: var(--primary-blue);
    color: var(--white);
    transform: scale(1.1);
}

.industry-learning {
    position: relative;
    background-image: url('../images/industry-integrated-bg.png');
    background-size: cover;
    background-position: center;
    padding: 50px 20px;
}

.industry-learning .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1;
    pointer-events: none;
}

.industry-learning .content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    padding: 0px 0px;
    margin: 0 auto;
}

/* Affiliation Integration - white background variant */
.affiliation-integration {
    background: var(--white);
    padding: 50px 20px;
}

/* Industry marquee */
.industry-marquee-overflow {
    overflow: hidden;
    width: 100%;
    margin-bottom: 12px;
}

.industry-slider-track {
    display: flex;
    align-items: center;
    gap: 40px;
    transition: transform 0.5s ease-in-out;
}

.industry-logo-box {
    flex: 0 0 calc((100% - 120px) / 4);
    background: var(--white);
    /* padding: 10px; */
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 16px 34px rgba(16, 29, 61, 0.12);
    border: 1px solid rgba(16, 29, 61, 0.08);
    height: 180px;
}

.industry-logo-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Specific Logo Adjustments */
.industry-logo-box img[alt="AWS"],
.industry-logo-box img[alt="Oracle Academy"] {
    transform: scale(0.65);
}

.industry-logo-box img[alt="MongoDB"] {
    transform: scale(0.95);
}

.industry-logo-box img[alt="coursera"] {
    width: 85%;
    max-height: none;
    object-fit: contain;
    transform: scale(1.0);
}

.industry-logo-box .logo-text {
    font-weight: 800;
    color: var(--primary-blue);
    font-size: 24px;
    text-align: center;
    white-space: nowrap;
}

.industry-features-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 30px;
    margin-bottom: 40px;
    position: relative;
}

.industry-features-row::before,
.industry-features-row::after {
    content: '';
    position: absolute;
    top: 30px;
    bottom: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.2);
}

.industry-features-row::before {
    left: 25%;
}

.industry-features-row::after {
    right: 25%;
}

.industry-feature:nth-child(2)::after {
    content: '';
    position: absolute;
    top: 30px;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: rgba(255, 255, 255, 0.2);
}

.industry-feature {
    flex: 1;
    text-align: center;
    color: var(--white);
    padding: 0 10px;
}

.feature-icon {
    font-size: 40px;
    margin-bottom: 15px;
    color: var(--orange);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.industry-feature p {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.5px;
}

.industry-banner {
    background: rgba(16, 29, 61, 0.9);
    border: 2px solid #f9c004;
    border-radius: 30px;
    padding: 15px 40px;
    display: block;
    width: fit-content;
    margin: 0 auto;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.industry-banner h3 {
    color: var(--white);
    font-size: 22px;
    letter-spacing: 1px;
    margin: 0;
}

/* Recruiters */
.top-recruiters {
    background-color: #edf4fc;
    min-height: auto;
    padding: 50px 50px 30px;
    overflow: hidden;
}

.recruiters-header {
    margin-bottom: 10px;
}

.recruiters-subtitle {
    margin-bottom: 40px;
    font-size: 18px;
    font-weight: 500;
    color: #1f4379;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.stats-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 70px;
    max-width: 1200px;
    margin: 0 auto 40px auto;
    padding: 0 30px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.stat-item {
    flex: 1;
    padding: 20px 15px;
    text-align: center;
}

.stat-item h3 {
    font-size: 3.2rem;
    line-height: 1;
    font-weight: 900;
    margin-bottom: 2px;
}

.stat-item h3.stat-orange {
    color: #f9c004;
}

.stat-item h3.stat-navy {
    color: #1f4379;
}

.stat-item h3.stat-red {
    color: #cc2909;
}

.stat-item h3.stat-yellow {
    color: #f9c004;
}

.stat-fortune-label {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #cc2909 !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 0 !important;
}

.stat-label-blue {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #1f4379 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 4px 0 8px !important;
}

.stat-label-navy {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #1f4379 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 4px 0 8px !important;
}

.stat-item p {
    font-size: 13px;
    font-weight: 700;
    margin: 8px 0 6px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-dark);
}

.stat-item span {
    font-size: 13px;
    font-weight: 700;
    color: #1f4379;
    line-height: 1.4;
    white-space: nowrap;
}

/* Recruiter Logo Strip */
.recruiter-strip {
    background: var(--white);
    padding: 25px 50px;
    max-width: 1200px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(16, 29, 61, 0.08);
}

.recruiter-strip-line {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(31, 67, 121, 0.15), transparent);
    margin-bottom: 30px;
}

.recruiter-logos-overflow {
    overflow: hidden;
    width: 100%;
    min-width: 0;
}

.recruiter-logos-track {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: max-content;
    gap: 30px;
    animation: scrollLogos 40s linear infinite;
}

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

@keyframes scrollLogos {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-50% - 15px));
    }
}

.recruiter-logo-item {
    flex: 0 0 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}

.recruiter-logo-item img {
    height: 65px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    filter: none;
    transition: transform 0.3s;
}

.recruiter-logo-item img:hover {
    transform: scale(1.06);
}

/* Testimonials */
.testimonials {
    background: linear-gradient(145deg, #f5f7fb 0%, #edf4fc 100%);
    position: relative;
    overflow: hidden;
}

.testimonial-heading {
    margin-bottom: 34px;
}

.section-kicker {
    color: var(--orange);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.testimonial-intro {
    max-width: 520px;
    margin: 0 auto;
    color: var(--text-light);
    font-size: 15px;
    line-height: 1.6;
}

.testimonials-wrapper {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
    width: 100%;
}

.testimonial-controls {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
}

.testimonial-controls .gallery-btn {
    width: 60px;
    height: 60px;
    font-size: 28px;
}

.testimonial-progress {
    min-width: 68px;
    color: var(--text-light);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-align: center;
}

.test-slider-overflow {
    overflow: hidden;
    width: 100%;
    padding: 12px 0 22px;
}

.test-grid {
    display: flex;
    gap: 40px;
    flex-wrap: nowrap;
    transition: transform 0.5s ease-in-out;
}

.test-card {
    background: var(--white);
    padding: 0;
    flex: 0 0 calc((100% - 80px) / 3);
    /* 3 items on desktop */
    aspect-ratio: 1080 / 1350;
    height: auto;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(16, 29, 61, 0.08);
    box-shadow: 0 16px 34px rgba(16, 29, 61, 0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.test-card::after {
    content: '“';
    position: absolute;
    top: 10px;
    left: 16px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(16, 29, 61, 0.82);
    color: var(--orange);
    font-family: 'Manrope', sans-serif;
    font-size: 30px;
    line-height: 1;
    z-index: 2;
    box-shadow: 0 8px 18px rgba(16, 29, 61, 0.18);
}

.test-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 42px rgba(16, 29, 61, 0.17);
}

.test-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    transition: transform 0.4s ease;
}

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

/* Fee information */
.footer-lead {
    background-color: var(--light-bg);
}

.footer-lead>.container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: min(100%, 1200px);
    margin: 20px auto;
}

.footer-lead>.container>div {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 15px;
    border-radius: 16px;
}

.footer-lead>.container img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
}


.footer-lead span {
    color: var(--red);
}

.fees-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.red-btn {
    display: flex;
    width: 100%;
    justify-content: center;
    background-color: var(--red);
    color: var(--white);
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
}

.fees-images {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
}

.fees-images img {
    width: 250px;
    height: 260px;
    object-fit: cover;
    border-radius: 8px;
}

.unlock-btn {
    display: flex;
    justify-content: center;
    align-self: center;
    align-items: center;
    background: var(--red);
    color: var(--white);
    border: none;
    padding: 10px 10px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    width: 200px;
}

/* Footer */
.main-footer {
    background-color: var(--teal);
    color: var(--white);
    padding: 40px 50px 20px;
}

.footer-content {
    max-width: 1000px;
    margin: 0 auto;
    text-align: left;
}

.footer-content h3 {
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.apply-now-btn {
    background-color: var(--orange);
    color: var(--primary-blue);
    border: none;
    padding: 10px 30px;
    border-radius: 4px;
    font-weight: 700;
    margin-bottom: 30px;
    cursor: pointer;
}

@media (min-width: 769px) {
    .contact-info .nav-apply-btn,
    .apply-now-btn {
        background-color: #CC2909;
        color: var(--white);
    }
}

.download-brochure-btn {
    display: inline-block;
    background-color: var(--white);
    color: var(--primary-blue);
    padding: 10px 30px;
    border: 1px solid rgba(16, 29, 61, 0.18);
    border-radius: 4px;
    font-weight: 700;
    margin: 0 0 30px 8px;
    text-decoration: none;
}

/* The logo asset is a 2000x2000 square whose mark sits in the middle 26%
   band, so rendering it at a fixed height floated the mark in ~110px of empty
   canvas. Crop that padding away and show the mark itself. */
.footer-logo {
    display: block;
    width: 232px;
    height: auto;
    aspect-ratio: 3.5 / 1;
    object-fit: cover;
    object-position: center;
    margin-bottom: 18px;
}

@media (min-width: 769px) {
    .footer-logo {
        margin-top: -10px;
    }
}

/* The mobile sliders in script.js clone their cards so their loop can wrap
   seamlessly. Those clones only make sense inside the mobile tracks: from 769px
   up the same containers are grids (courses, placements) or full rows that lay
   every child out, so a clone left over from a narrower window renders as a
   duplicate card. Hiding them is the backstop that holds even if the width
   changed without the cleanup in script.js running. */
@media (min-width: 769px) {
    .clone {
        display: none !important;
    }

    #testimonialGrid .clone {
        display: block !important;
    }

    /* The same tracks are the only ones that must never be translated on
       desktop: their mobile sliders clear the translate themselves when the
       window widens, so if that reset is missed the grid would otherwise sit
       shifted. Declaring it here makes it independent of the resize handler
       running. The industry track and testimonial track are deliberately not in this list — they are
       sliders on desktop too. */
    #studentSliderTrack,
    #courseSliderTrack,
    #approvalSliderTrack {
        transform: none !important;
    }
}

.footer-info {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    font-size: 13px;
}

.privacy-link {
    color: #f9c004;
    text-decoration: none;
}

.footer-phone-link {
    color: var(--white);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: color 0.25s ease;
}

.footer-phone-link:hover {
    color: #f9c004;
}

.copyright {
    text-align: center;
    font-size: 12px;
    margin-top: 40px;
    color: rgba(255, 255, 255, 0.7);
}

.admission-modal[hidden] {
    display: none;
}

.admission-modal {
    position: fixed;
    top: var(--modal-viewport-top, 0px);
    left: var(--modal-viewport-left, 0px);
    width: var(--modal-viewport-width, 100%);
    height: var(--modal-viewport-height, 100%);
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 24px;
}

.admission-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 14, 32, 0.72);
    backdrop-filter: blur(5px);
    animation: modalFadeIn 0.25s ease both;
}

.admission-modal-card {
    position: relative;
    z-index: 1;
    width: min(100%, 400px);
    max-height: min(92dvh, 720px);
    overflow-x: hidden;
    /* The embedded form is a fixed 455px tall, so on a short viewport — a phone
       in landscape, a small laptop window — `hidden` silently clipped the
       Register button with no way to reach it. Let the card scroll instead. */
    overflow-y: auto;
    padding: 0;
    border: none;
    border-radius: 24px;
    background: var(--primary-blue);
    color: var(--text-dark);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28);
    animation: modalSlideUp 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
    /* Makes the card a query container so the embedded form's own width — the
       thing that decides how it wraps — can be tested directly below, instead of
       inferred from the viewport. */
    container-type: inline-size;
}

/* The form the vendor embeds is a navy card with 12px rounded corners sitting on
   their own white page, and that page shows under it: the 455px iframe is taller
   than the form, so the leftover page reads as a white bar under the
   "Already Registered?" row. Ending our wrapper at the form's own bottom edge
   drops that leftover out of the dialog, so the card behind shows through
   instead of an opaque strip — the white is cut off rather than painted over,
   which is why this is a clip and not a coloured band.

   That edge was measured from screenshots taken with the card's background
   swapped for magenta, so the embed's white page stood out against the card
   behind it: the rounded form panel ends 445-450px into the 455px iframe — it
   moves by a couple of pixels because the consent line re-wraps with the form's
   width — and its links row ends at ~433-437px. A crop at 444px therefore cuts
   above the panel's edge on every width measured, with a pixel or two in hand
   for the wrap moving, while still clearing the links row below it. Cropping
   exactly at the panel's own edge (450px) leaves nothing in hand: one extra
   wrapped line and the white page is showing again. If the vendor restyles the
   form, re-measure with the same magenta-card screenshot rather than guessing.

   The wrapper clips rather than resizing the iframe on purpose: shrinking the
   iframe would re-lay-out a form we cannot inspect, and the embed provides no
   height to size against. */
/* Deliberately not positioned: the desktop card has no top padding, so the
   wrapper's box starts at the card's top edge where the close button sits, and
   a positioned wrapper would paint over that button. `overflow: hidden` clips
   without creating a positioned element. */
.admission-modal-card .leadx-form-wrapper {
    overflow: hidden;
}

.admission-modal-card #leadx-modal-iframe {
    display: block;
    width: min(100%, 400px);
    height: 455px;
    margin-inline: auto;
    border: 0;
    background-color: transparent;
}

/* The crop is guarded on the form's own width rather than the viewport, because
   the viewport includes the scrollbar while the container does not — a 390px
   window actually holds a 341px form.

   The guard sits below the narrowest form measured with a bar showing, because
   that bar is not there at every width: at ~300px the embed's consent line wraps
   enough that its card runs past the iframe's bottom edge, so there is no white
   to crop while the links row is already pressed against that same edge —
   cropping that case cut the row in half for nothing. */
@container (min-width: 320px) {
    .admission-modal-card .leadx-form-wrapper {
        height: 444px;
    }
}

.admission-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(16, 29, 61, 0.10);
    border-radius: 50%;
    background: var(--white);
    color: var(--text-dark);
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}

.admission-modal-close:hover {
    transform: rotate(90deg);
    background: var(--orange-soft);
}

.modal-kicker {
    margin-bottom: 8px;
    color: var(--orange);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.admission-modal-card h2 {
    margin-bottom: 10px;
    font-size: 2rem;
}

.modal-description {
    margin-bottom: 24px;
    color: var(--text-light);
    font-size: 14px;
    line-height: 1.55;
}

.admission-modal-form {
    display: grid;
    gap: 14px;
}

.admission-modal-form label {
    display: grid;
    gap: 7px;
    color: var(--text-dark);
    font-size: 12px;
    font-weight: 800;
}

.admission-modal-form input,
.admission-modal-form select {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid rgba(16, 29, 61, 0.14);
    border-radius: 10px;
    background: var(--white);
    color: var(--text-dark);
    font: inherit;
    font-size: 14px;
}

.admission-modal-form input:focus,
.admission-modal-form select:focus {
    outline: none;
    border-color: var(--orange);
    box-shadow: 0 0 0 4px rgba(245, 159, 26, 0.16);
}

.admission-submit {
    min-height: 50px;
    margin-top: 6px;
    border: 0;
    border-radius: 10px;
    background: var(--primary-blue);
    color: var(--white);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}

.admission-submit:hover {
    transform: translateY(-2px);
    background: var(--orange);
    color: var(--primary-blue);
}

.admission-success {
    padding: 16px;
    border-radius: 10px;
    background: rgba(52, 166, 222, 0.12);
    color: #1f4379;
    font-size: 14px;
    line-height: 1.5;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Approvals Section */
.approvals .approval-images-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.approval-image-box {
    flex: 1 1 calc(20% - 20px);
    max-width: calc(20% - 20px);
    border: 2px solid rgba(31, 67, 121, 0.15);
    border-radius: 8px;
    padding: 10px;
    background: #ffffff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    transition: transform 0.3s ease;
}

.approval-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
    text-align: center;
}

.approval-image-box:hover {
    transform: translateY(-5px);
    border-color: var(--orange);
}

.approval-image-box img {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.approval-slider-controls {
    display: none;
}

.approval-slider-wrapper {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.appinventiv-logo {
    transform: scale(1.2);
    margin-left: 30px;
}

/* Microsoft Center of Excellence Text */
.coe-banner-text-top {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    z-index: 10;
}

.coe-banner-text-top h2 {
    font-size: 2.2rem;
    color: #1f4379;
    /* Theme dark blue */
    margin: 0;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.coe-banner-text-bottom {
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    z-index: 10;
}

.coe-banner-text-bottom h3 {
    font-size: 1.5rem;
    color: #b92b27;
    /* Red/Maroon */
    margin: 0;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.mobile-break {
    display: none;
}

@media (max-width: 768px) {
    .coe-banner-text-top {
        top: 8%;
    }

    .coe-banner-text-top h2 {
        font-size: 2rem;
    }

    .coe-banner-text-bottom {
        bottom: 15%;
    }

    .coe-banner-text-bottom h3 {
        font-size: 1.2rem;
    }

    .mobile-break {
        display: inline;
    }
}

/* ============================================================
   Microsoft CoE Gallery Slider  –  full-width, one image, overlay controls
   ============================================================ */

.coe-gallery {
    padding: 0;
    margin: 0;
    background: #000;
    line-height: 0;
    /* kill white-space gap below inline img */
}

/* Wrapper is the positioning parent for all overlays */
.coe-gallery-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

/* Clip window */
.coe-gallery-overflow {
    overflow: hidden;
    width: 100%;
}

/* Sliding track */
.coe-gallery-track {
    display: flex;
    transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* Each slide = 100 % of the wrapper width */
.coe-gallery-slide {
    flex: 0 0 100%;
    min-width: 100%;
    padding: 0;
    box-sizing: border-box;
    line-height: 0;
}

.coe-gallery-slide img {
    width: 100%;
    height: auto;
    /* matches the banner: natural image height */
    display: block;
    transition: opacity 0.3s ease;
}

/* ── Prev / Next arrows ── */
.coe-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.coe-arrow:hover {
    background: rgba(31, 67, 121, 0.85);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}

.coe-arrow-prev {
    left: 20px;
}

.coe-arrow-next {
    right: 20px;
}

/* ── Bottom bar (dots + pause) ── */
.coe-overlay-bar {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.40);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 50px;
    padding: 8px 18px;
}

/* Dots inside the bar */
.coe-gallery-dots {
    display: flex;
    align-items: center;
    gap: 7px;
}

.coe-gallery-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.50);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.2s ease, width 0.25s ease;
    flex-shrink: 0;
}

.coe-gallery-dot.active {
    background: #fff;
    width: 22px;
    border-radius: 4px;
    transform: none;
}

/* Pause / Play button inside the bar */
.coe-pause-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.20);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.2s ease;
    flex-shrink: 0;
    padding: 0;
}

.coe-pause-btn:hover {
    background: rgba(255, 255, 255, 0.40);
    transform: scale(1.1);
}

.coe-pause-btn.is-paused {
    background: rgba(249, 192, 4, 0.70);
    /* yellow-ish when paused */
}

/* Progress counter – top-right corner */
.coe-gallery-progress {
    position: absolute;
    top: 16px;
    right: 20px;
    z-index: 20;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: rgba(0, 0, 0, 0.40);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 4px 12px;
    border-radius: 50px;
    letter-spacing: 0.05em;
    line-height: 1.6;
}

/* ── Mobile ── */
@media (max-width: 768px) {
    .coe-gallery {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .coe-gallery-wrapper,
    .coe-gallery-overflow,
    .coe-gallery-track,
    .coe-gallery-slide {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .coe-gallery-slide picture {
        display: block;
        width: 100%;
    }

    .coe-gallery-slide img {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        display: block;
    }

    .coe-arrow {
        width: 40px;
        height: 40px;
        font-size: 15px;
    }

    .coe-arrow-prev {
        left: 10px;
    }

    .coe-arrow-next {
        right: 10px;
    }

    .coe-overlay-bar {
        bottom: 12px;
        padding: 6px 14px;
        gap: 10px;
    }

    .coe-gallery-dot {
        width: 6px;
        height: 6px;
    }

    .coe-gallery-dot.active {
        width: 16px;
    }

    .coe-pause-btn {
        width: 26px;
        height: 26px;
    }

    .coe-gallery-progress {
        top: 10px;
        right: 12px;
        font-size: 11px;
        padding: 3px 10px;
    }
}

/* Allow native scrolling inside the chatbot over Lenis smooth scroll */
.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}