:root {
    --navy: #192943;
    --burgundy: #A21F37;
    --white: #FFFFFF;
    --light-grey: #e0e0e0;
}

body {
    font-family: 'Roboto', sans-serif;
    color: var(--navy);
}

/* navbar */

#openEnquire{
    
}

/* Hero */
.hero-section {
    background: var(--navy);
    height: 100vh;
}

.hero-section {
    background-image: linear-gradient(rgba(25, 41, 67, 0.85), rgba(25, 41, 67, 0.85)),
                      url('https://images.unsplash.com/photo-1541339907198-e08756dedf3f?w=1600&q=80');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

/* Container Spacing */
.hero-content {
    /* padding-top: 60px; */
    padding-bottom: 30px;
}

/* Primary Heading */
.hero-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: calc(2rem + 3vw); /* Scales with screen size */
    color: white; /* Navy */
    line-height: 1.1;
    margin-bottom: 20px;
    text-align: left;
}

/* Highlight Box (Matching the yellow style from the image but using your colors) */
.highlight-box {
    background-color: #A21F37; /* Burgundy */
    color: #FFFFFF;
    padding: 0 15px;
    display: inline-block;
}

/* Sub-heading / Description */
.hero-subtitle {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 1.2rem;
    color: white; /* Navy */
    opacity: 0.9;
    max-width: 600px; /* Prevents text from stretching too wide */
    line-height: 1.5;
    text-align: left;
    margin-top: 15px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }
    .hero-subtitle {
        font-size: 1rem;
    }
}


/* form */

:root {
    --burgundy: #A21F37;
    --navy-dark: #0D1626;
    --glass-border: rgba(255, 255, 255, 0.12);
    --text-muted: rgba(255, 255, 255, 0.5);
}

/* Card Structure */
.glass-form-card {
    background: linear-gradient(165deg, rgba(20, 30, 48, 0.9), rgba(13, 22, 38, 0.95));
    backdrop-filter: blur(25px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 35px;
}

/* Professional Badge */
.form-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 255, 136, 0.05);
    border: 1px solid rgba(0, 255, 136, 0.2);
    padding: 6px 12px;
    border-radius: 100px;
    margin-bottom: 20px;
}

.pulse-dot {
    width: 6px;
    height: 6px;
    background: #00ff88;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.badge-text {
    font-size: 0.65rem;
    font-weight: 800;
    color: #00ff88;
    letter-spacing: 1px;
}

/* Form Elements */
.field-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 2px;
}

.form-control-custom {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 8px 16px;
    color: white;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.form-control-custom:focus {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--burgundy);
    outline: none;
    box-shadow: 0 0 0 4px rgba(162, 31, 55, 0.15);
}

/* Phone Group Special Handling */
.phone-input-group {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
}

.phone-input-group .prefix {
    padding: 0 12px;
    color: var(--text-muted);
    font-weight: 600;
    border-right: 1px solid var(--glass-border);
}

.phone-input-group .form-control-custom {
    border: none !important;
}

/* Professional CTA */
.btn-submit-professional {
    width: 100%;
    background: var(--burgundy);
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-submit-professional:hover {
    background: #bd2440;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(162, 31, 55, 0.3);
}

.security-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 15px;
    font-size: 0.7rem;
    color: var(--text-muted);
}

@keyframes pulse {
    0% { opacity: 0.4; }
    50% { opacity: 1; }
    100% { opacity: 0.4; }
}





/* Select Customization */
.select-custom {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='white' stroke-opacity='0.5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
}

/* Premium Button */
.btn-premium-cta {
    width: 100%;
    background: linear-gradient(135deg, var(--burgundy) 0%, #7a172a 100%);
    color: white;
    border: none;
    border-radius: 8px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn-premium-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(162, 31, 55, 0.4);
}

.btn-arrow {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.btn-premium-cta:hover .btn-arrow {
    transform: translateX(5px);
}

.form-security-note {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 15px;
}


/* Ticker Layout Base */
.ticker-wrapper-left {
    margin-top: 0px;
}

.ticker-header {
    color: white;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 25px;
    opacity: 0.7;
}

.ticker-container {
    overflow: hidden;
    width: 100%;
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.ticker-track {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: scrollLeft 40s linear infinite;
    padding: 15px 0;
}

/* Box Style Course Card */
/* Compact Box Style Course Card */
.course-box {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 200px;
    padding: 16px 16px; /* reduced padding */
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px; /* reduced gap */
    transition: all 0.3s ease;
    cursor: pointer;
}

.course-box:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #A21F37;
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.box-tag {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 0.55rem;
    font-weight: 700;
    background: #A21F37;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
}

.box-icon {
    width: 40px;   /* reduced */
    height: 40px;  /* reduced */
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.box-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.box-content {
    display: flex;
    flex-direction: column;
    gap: 3px; /* tighter */
}

.box-code {
    color: #FFFFFF;
    font-weight: 700;
    font-size: 1rem; /* slightly smaller */
}

.box-detail {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem; /* smaller */
    line-height: 1.2;
}

/* Animation Loop */
@keyframes scrollLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

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



.bg-navy { background-color: var(--navy) !important; }
.bg-burgundy { background-color: var(--burgundy) !important; }
.text-burgundy { color: var(--burgundy); }
.text-yellow { color: #FFD700; } /* Highlight color from image */

/* Buttons */
.btn-burgundy {
    background-color: var(--burgundy);
    color: white;
}

.btn-burgundy:hover {
    background-color: #8b1a2f;
    color: white;
}

.btn-navy-fill {
    background-color: var(--navy);
    color: white;
}

.btn-outline-navy {
    border: 1px solid var(--navy);
    color: var(--navy);
}

.btn-light-grey {
    background-color: var(--light-grey);
    color: #757575;
    border-radius: 30px;
    border: none;
}

/* Custom Modal Components */
.modal-xl { max-width: 1100px; }

.sidebar-box {
    min-height: 550px;
    position: relative;
}

.custom-img {
    max-height: 250px;
    margin-top: 20px;
}

.form-control {
    border-radius: 12px;
    padding: 10px 15px;
    border: 1px solid #ced4da;
}

/* Matching the toggle look from images */
.custom-toggle .btn {
    border-radius: 5px;
    margin-right: 10px;
    padding: 8px 30px;
    font-size: 14px;
    font-weight: 500;
}

.custom-toggle-small .btn {
    border-radius: 5px;
    padding: 5px 25px;
    font-size: 13px;
    margin-right: 10px;
}

/* Adjust Row for Mobile */
@media (max-width: 991.98px) {
    .hero-section {
        height: auto;
        padding-bottom: 50px;
    }
    
    .min-vh-100 {
        min-height: auto !important;
        padding-top: 100px; /* Space for fixed/absolute nav */
    }

    .hero-content {
        text-align: center;
        margin-bottom: 40px;
    }

    .hero-title {
        font-size: 2.8rem;
        text-align: center;
    }

    .hero-subtitle {
        text-align: center;
        margin: 15px auto;
    }

    /* Adjust ticker for smaller screens */
    .ticker-wrapper-left {
        margin-bottom: 40px;
    }
    
    /* Center the form column on mobile */
    .ps-lg-5 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* ==========================================================================
   Hero Section - Mobile & Tablet Gap Reductions
   ========================================================================== */

/* 1. Mobile Extra Small (Phones < 576px) */
@media (max-width: 575.98px) {
    /* Reduce overall section breathing room */
    .hero-section {
        padding-top: 20px !important;
        padding-bottom: 30px !important;
    }

    /* Tighten Navbar to Content gap */
    .min-vh-100 {
        padding-top: 70px !important; 
    }

    /* Tighten Hero Text Area */
    .hero-content {
        margin-bottom: 20px !important; /* Reduced from 40px */
    }

    .hero-title {
        font-size: 2rem;
        margin-bottom: 10px !important;
    }

    .hero-subtitle {
        margin-top: 5px !important;
        font-size: 0.95rem;
        line-height: 1.4;
    }

    /* Reduce gap between text and ticker */
    .ticker-wrapper-left {
        margin-top: 15px !important;
        margin-bottom: 25px !important;
    }

    .ticker-header {
        margin-bottom: 10px !important;
    }

    /* Form Card Adjustments */
    .glass-form-card {
        padding: 20px;
        margin-top: 0; /* Ensures no extra gap above form */
    }

    /* Reduce spacing inside form fields */
    .field-group {
        gap: 4px; /* Tighter labels to inputs */
        margin-bottom: 12px;
    }

    .form-header-badge {
        margin-bottom: 12px !important;
    }
}

/* 2. Mobile Small/Medium (Phones to Tablets: 576px - 767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .hero-section {
        padding-top: 30px;
        padding-bottom: 40px;
    }

    .min-vh-100 {
        padding-top: 80px !important;
    }

    /* Reduce vertical spacing between left content and right form */
    .hero-content {
        margin-bottom: 30px !important;
    }

    .hero-title {
        font-size: 2.4rem;
        margin-bottom: 15px;
    }

    .ticker-wrapper-left {
        margin-top: 20px;
        margin-bottom: 30px;
    }

    .glass-form-card {
        padding: 25px;
        max-width: 450px; /* Keeps form from looking too stretched */
        margin: 0 auto;
    }
}

/* Fix for the Navbar items on mobile */
/* @media (max-width: 400px) {
    .navbar .container {
        flex-direction: column;
        gap: 10px;
    }
    .navbar .ms-auto {
        margin-left: 0 !important;
        width: 100%;
        justify-content: center;
    }
} */



/*************************
 online-programs 
 ***********************/

:root {
    --navy: #192943;
    --burgundy: #A21F37;
    --text-muted: #6c757d;
}

/* Section Foundation */
.online-programs { background-color: #f8f9fa; }
.header-line { width: 50px; height: 4px; background: var(--burgundy); margin-top: 15px; }

/* Filter Buttons */
.filter-btn {
    border: 1px solid #ddd;
    background: white;
    color: var(--navy);
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-btn.active {
    background: var(--navy);
    color: white;
    border-color: var(--navy);
    box-shadow: 0 4px 12px rgba(25, 41, 67, 0.2);
}

/* Card Architecture */
.program-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.program-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

/* Image Section */
.card-img-wrap {
    height: 180px;
    position: relative;
    overflow: hidden;
}

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

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

/* Badges */
.badge-stack {
    position: absolute;
    top: 15px;
    left: 15px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tag-category {
    background: rgba(25, 41, 67, 0.9);
    backdrop-filter: blur(4px);
    color: white;
    font-size: 0.65rem;
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.tag-accent {
    background: var(--burgundy);
    color: white;
    font-size: 0.65rem;
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: 800;
}

/* Body Section */
.card-body-custom {
    padding: 10px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.collab-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.collab-strip img {
    height: 18px;
    filter: grayscale(1);
    opacity: 0.7;
}

.collab-strip span {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
}

.program-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--navy);
    line-height: 1.4;
    margin-bottom: 15px;
    min-height: 3.2rem; /* Ensures alignment across rows */
}

.program-features {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

.feature-item {
    font-size: 0.8rem;
    color: #444;
    font-weight: 500;
}

/* Footer & Action */
.card-footer-custom {
    border-top: 1px dashed #e9ecef;
    /* padding-top: 18px; */
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.price-container small {
    display: block;
    font-size: 0.65rem;
    color: var(--text-muted);
    font-weight: 700;
    letter-spacing: 1px;
}

.price-value {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--navy);
}

.btn-card-action {
    width: 40px;
    height: 40px;
    background: #f0f0f0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--navy);
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.program-card:hover .btn-card-action {
    background: var(--burgundy);
    color: white;
}

/* ==========================================================================
   Responsive Program Cards & Filters
   ========================================================================== */

/* 1. Mobile Extra Small (Phones < 576px) */
@media (max-width: 575.98px) {
    .online-programs { padding: 40px 0; }
    
    .display-6 { font-size: 1.75rem; }
    
    /* Make filters a horizontally scrollable row so they don't stack and take up 5 rows */
    .filter-wrapper .d-flex {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        padding-bottom: 15px;
        justify-content: flex-start !important;
        -webkit-overflow-scrolling: touch;
        gap: 10px !important;
    }
    
    .filter-btn {
        white-space: nowrap;
        padding: 8px 18px;
        font-size: 0.75rem;
    }

    /* Card adjustments for single column */
    .program-card { margin-bottom: 10px; }
    .card-img-wrap { height: 160px; }
    .program-title { font-size: 1.05rem; min-height: auto; }
    .price-value { font-size: 1.1rem; }
}

/* 2. Mobile Small/Medium (Phones to Tablets: 576px - 767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .filter-btn {
        padding: 10px 16px;
        font-size: 0.8rem;
    }

    /* Grid creates 2 cards per row usually, so we adjust height */
    .card-img-wrap { height: 150px; }
    .program-title { font-size: 1.1rem; min-height: 3rem; }
    
    .program-features { gap: 10px; }
    .feature-item { font-size: 0.75rem; }
}

/* 3. Tablets/Small Laptops (768px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .online-programs { padding: 60px 0; }

    /* Ensure 2-column grid works perfectly */
    .program-card {
        transition: transform 0.3s ease; /* Faster transition for touch */
    }

    .program-title {
        font-size: 1.1rem;
        min-height: 3.2rem;
    }

    .card-img-wrap { height: 170px; }
    
    /* Adjust badges for smaller space */
    .tag-category, .tag-accent {
        font-size: 0.6rem;
        padding: 3px 10px;
    }
}

/* 4. General Responsive Touch Fixes (Shared) */
@media (max-width: 991.98px) {
    /* Prevent hover effects from "sticking" on touch devices */
    .program-card:hover {
        transform: none; 
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    }
    
    .program-card:active {
        transform: scale(0.98);
    }

    .btn-card-action {
        background: var(--navy);
        color: white;
    }
    
    /* Custom Scrollbar for the horizontal filter row */
    .filter-wrapper .d-flex::-webkit-scrollbar {
        height: 3px;
    }
    .filter-wrapper .d-flex::-webkit-scrollbar-thumb {
        background: #ddd;
        border-radius: 10px;
    }
}


/******************
 why-choose 
 ******************/

:root {
    --navy: #1b2e4b;
    --burgundy: #8e1d35;
    --burgundy-dark: #5c1323;
}

/* ================================
   SECTION BACKGROUND (DIAGONAL)
================================ */

.why-choose-us {
    position: relative;
    padding: 20px 0;
    overflow: hidden;
    color: #ffffff;
}

/* Diagonal Background */
.why-choose-us::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        var(--navy) 40%,
        var(--burgundy) 70%,
        var(--burgundy-dark) 100%
    );
    z-index: -2;
}

/* Extra overlay depth */
.why-choose-us::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        transparent 35%,
        rgba(0,0,0,0.15) 60%
    );
    z-index: -1;
}

/* ================================
   HEADER
================================ */

.sub-badge {
    background: rgba(255,255,255,0.1);
    color: #ffffff;
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1px;
}

.section-title {
    font-size: 2.4rem;
    font-weight: 800;
    color: #ffffff !important;
}

/* ================================
   IMAGE STYLE
================================ */

.visual-stack {
    position: relative;
}

.main-img-holder {
    overflow: hidden;
    border-radius: 25px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5);
   
}

.main-img-holder img {
    width: 100%;
    
    transition: 0.6s ease;
}


/* ================================
   BENEFIT CARDS
================================ */

.benefit-item {
    display: flex;
    gap: 20px;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 18px;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(12px);
    transition: 0.4s ease;
}

.benefit-item:hover {
    background: rgba(255,255,255,0.15);
    transform: translateX(12px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}

.benefit-item h4 {
    font-weight: 700;
    margin-bottom: 8px;
}

.benefit-item p {
    margin: 0;
    font-size: 0.95rem;
    opacity: 0.85;
}

/* Icon */
.icon-box {
    width: 55px;
    height: 55px;
    background: rgba(255,255,255,0.15);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

/* ==========================================================================
   Why Choose Us - Responsive Scaling
   ========================================================================== */

/* 1. Mobile Extra Small (Phones < 576px) */
@media (max-width: 575.98px) {
    .why-choose-us {
        padding: 40px 0; /* Increase padding for breathing room */
    }

    .section-title {
        font-size: 1.8rem; /* Scale down heading */
        line-height: 1.2;
    }

    /* Image Adjustments */
    .main-img-holder {
        border-radius: 15px; /* Slightly smaller radius for small screens */
        margin-bottom: 30px;
    }

    /* Benefit Cards */
    .benefit-item {
        flex-direction: column; /* Stack icon on top of text */
        text-align: center;
        gap: 15px;
        padding: 20px 15px;
    }

    .icon-box {
        margin: 0 auto; /* Center the icon */
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }

    .benefit-item h4 {
        font-size: 1.1rem;
    }

    .benefit-item p {
        font-size: 0.85rem;
        line-height: 1.5;
    }

    /* Disable the translateX hover to prevent horizontal overflow issues */
    .benefit-item:hover {
        transform: translateY(-5px); /* Move up instead of right */
    }
}

/* 2. Mobile Small/Medium (Phones/Small Tablets: 576px - 767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .why-choose-us {
        padding: 50px 0;
    }

    .section-title {
        font-size: 2.1rem;
    }

    /* Maintain Flex layout but adjust spacing */
    .benefit-item {
        padding: 20px;
        gap: 15px;
    }

    .icon-box {
        width: 55px;
        height: 55px;
    }

    .benefit-item h4 {
        font-size: 1.2rem;
    }

    /* Image stack adjustment */
    .visual-stack {
        max-width: 450px;
        margin: 0 auto 40px; /* Center image and add gap before benefits */
    }
    
    .benefit-item:hover {
        transform: translateX(8px); /* Subtle slide */
    }
}

@media (max-width: 991px) {

    .why-choose-us {
        padding: 80px 0;
    }

    .main-img-holder {
        transform: none;
    }

    .main-img-holder img {
        transform: none;
    }

    .benefit-item:hover {
        transform: none;
    }
}



/* =====================================
   INTERNATIONAL COLLABORATION SECTION
===================================== */
:root {
    --primary-navy: #0f1b3d;
    --primary-maroon: #8b1e3f;
    --primary-gradient: linear-gradient(135deg, #0f1b3d 0%, #8b1e3f 100%);
    --light-bg: #f8f9fc;
    --text-muted: #6c757d;
}

/* Section */
.international-collab {
    position: relative;
    background: var(--light-bg);
    padding: 100px 0;
    overflow: hidden;
}

/* Overlay */
.collab-overlay {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    background: var(--primary-gradient);
    clip-path: polygon(30% 0%, 100% 0%, 100% 100%, 0% 100%);
    opacity: 0.06;
    z-index: 1;
}

/* Header */
.sub-badge {
    background: rgba(139, 30, 63, 0.1);
    color: var(--primary-maroon);
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.section-title {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--primary-navy);
}

.section-subtitle {
    max-width: 700px;
    margin: 15px auto 0;
    color: var(--text-muted);
    font-size: 1rem;
}

/* Slider */
.logo-slider {
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.logo-track {
    display: flex;
    gap: 30px;
    width: calc(250px * 16);
    animation: scrollLogos 30s linear infinite;
}

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

/* Animation */
@keyframes scrollLogos {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Logo Card */
.collab-logo-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 30px;
    min-width: 200px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: all 0.4s ease;
}

.collab-logo-card img {
    max-height: 50px;
    filter: grayscale(100%);
    transition: 0.4s ease;
}

.collab-logo-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}

.collab-logo-card:hover img {
    filter: grayscale(0%);
    transform: scale(1.05);
}

/* ==========================================================================
   International Collaborations - Global Responsive Scaling
   ========================================================================== */

/* 1. Mobile Extra Small (Phones < 576px) */
@media (max-width: 575.98px) {
    .international-collab { padding: 50px 0; }
    .section-title { font-size: 1.6rem; }
    .section-subtitle { font-size: 0.9rem; padding: 0 10px; }
    
    .collab-logo-card {
        min-width: 130px; /* Thinner cards for small screens */
        height: 80px;
        padding: 12px;
        border-radius: 12px;
    }
    .collab-logo-card img { max-height: 30px; filter: grayscale(0%); }
    
    .logo-track {
        gap: 15px;
        width: calc(145px * 16); /* (min-width + gap) * total logos */
        animation-duration: 15s; /* Faster scroll for shorter track */
    }
    @keyframes scrollLogos {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(-145px * 8)); }
    }
}

/* 2. Mobile Small/Medium (Phones to Tablets: 576px - 767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .international-collab { padding: 60px 0; }
    .section-title { font-size: 1.9rem; }
    
    .collab-logo-card {
        min-width: 150px;
        height: 90px;
        padding: 15px;
    }
    .logo-track {
        gap: 20px;
        width: calc(170px * 16);
        animation-duration: 20s;
    }
    @keyframes scrollLogos {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(-170px * 8)); }
    }
}

/* 3. Tablets/Small Laptops (768px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .international-collab { padding: 80px 0; }
    .section-title { font-size: 2.2rem; }
    
    .collab-logo-card {
        min-width: 170px;
        height: 100px;
    }
    .logo-track {
        gap: 25px;
        width: calc(195px * 16);
        animation-duration: 25s;
    }
    @keyframes scrollLogos {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(-195px * 8)); }
    }
}

/* 4. Large Tablets / Laptops (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .section-title { font-size: 2.4rem; }
    .collab-logo-card {
        min-width: 190px;
        height: 110px;
    }
    .logo-track {
        gap: 30px;
        width: calc(220px * 16);
        animation-duration: 30s;
    }
    @keyframes scrollLogos {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(-220px * 8)); }
    }
}

/* 5. Desktop (1200px - 1399px) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .collab-logo-card {
        min-width: 200px;
        height: 120px;
    }
    .logo-track {
        gap: 30px;
        width: calc(230px * 16);
    }
    @keyframes scrollLogos {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(-230px * 8)); }
    }
}

/* 6. Extra Large Desktop (1400px+) */
@media (min-width: 1400px) {
    .container { max-width: 1320px; }
    .collab-logo-card {
        min-width: 220px;
        height: 130px;
    }
    .logo-track {
        gap: 40px;
        width: calc(260px * 16);
    }
    @keyframes scrollLogos {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(-260px * 8)); }
    }
}

/* Smooth Touch Fix */
@media (max-width: 1024px) {
    .logo-slider:hover .logo-track {
        animation-play-state: running; /* Prevents "stuck" logos on mobile touch */
    }
}

/****************************
 future-awaits-section 
 *****************************/

/* Full Width Section Container */
.future-awaits-section-full {
    padding: 40px 0;
    background-color: #192943; /* Full Width Navy */
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* Side Pattern that stretches to the right edge of the screen */
.cta-side-pattern {
    position: absolute;
    top: 0;
    right: 0;
    width: 35%; /* Width of the Burgundy area */
    height: 100%;
    background: linear-gradient(135deg, #A21F37 0%, #192943 100%);
    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
    z-index: 1;
    opacity: 0.9;
}

/* Typography & Layout Adjustments */
.future-awaits-section-full .container {
    position: relative;
    z-index: 2; /* Ensures content is above the side pattern */
}

.cta-badge {
    background-color: #A21F37;
    color: #FFFFFF;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    display: inline-block;
}

.cta-main-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin: 0;
    letter-spacing: -1px;
}

.cta-sub-title {
    font-size: 1.8rem;
    font-weight: 300;
}

.text-burgundy {
    color: #A21F37;
    font-weight: 700;
}

.cta-description {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
    max-width: 650px;
    line-height: 1.7;
}

/* Re-using your Pulse & Button Logic */
.intake-text { color: #FFFFFF; font-size: 0.95rem; }
.pulse-indicator {
    width: 10px; height: 10px; background-color: #00ff88;
    border-radius: 50%; animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(0, 255, 136, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 255, 136, 0); }
}

.btn-apply-now {
    background-color: #A21F37;
    color: #FFFFFF;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-apply-now:hover {
    background-color: #FFFFFF;
    color: #192943;
    transform: translateY(-3px);
}

.btn-outline-white {
    border: 2px solid rgba(255,255,255,0.3);
    color: #FFFFFF;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-outline-white:hover {
    background-color: #FFFFFF;
    color: #192943;
    border-color: #FFFFFF;
}

/* Mobile Responsive */
@media (max-width: 991px) {
    .cta-main-title { font-size: 2.5rem; }
    .future-awaits-section-full { padding: 60px 0; }
}

/* ==========================================================================
   Future Awaits Section - Responsive Scaling
   ========================================================================== */

/* 1. Mobile Extra Small (Phones < 576px) */
@media (max-width: 575.98px) {
    .future-awaits-section-full {
        padding: 40px 10px;
        text-align: center; /* Center align for a stronger mobile CTA */
    }

    .cta-main-title {
        font-size: 2.2rem; /* Significantly smaller to fit phone width */
        line-height: 1.1;
    }

    .cta-sub-title {
        font-size: 1.2rem;
        margin-top: 10px;
    }

    .cta-description {
        font-size: 0.95rem;
        margin: 0 auto 25px;
    }

    /* Stack buttons vertically on very small screens */
    .cta-actions {
        flex-direction: column;
        width: 100%;
    }

    .cta-actions .btn {
        width: 100%;
        padding: 12px !important;
    }

    /* Center the pulse indicator row */
    .d-flex.align-items-center.gap-2 {
        justify-content: center;
    }

    .intake-text {
        font-size: 0.85rem;
    }
}

/* 2. Mobile Small/Medium (Phones to Tablets: 576px - 767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .future-awaits-section-full {
        padding: 60px 20px;
    }

    .cta-main-title {
        font-size: 2.8rem;
    }

    .cta-sub-title {
        font-size: 1.4rem;
    }

    .cta-description {
        max-width: 100%;
    }

    /* Keep buttons side-by-side but ensure they don't overlap */
    .cta-actions {
        justify-content: flex-start;
    }

    .btn {
        padding: 12px 30px !important;
        font-size: 0.9rem;
    }
}

/* 3. Tablets/Small Laptops (768px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .future-awaits-section-full {
        padding: 70px 0;
    }

    .cta-main-title {
        font-size: 3.2rem;
    }

    .cta-sub-title {
        font-size: 1.6rem;
    }

    /* On tablets, the side-pattern might start overlapping text, 
       so we fade it out further or hide it */
    .cta-side-pattern {
        opacity: 0.4;
        width: 45%;
    }
}

/* 4. Global Touch/Responsive Tweaks */
@media (max-width: 991.98px) {
    /* Ensure the side-pattern doesn't cover text on smaller viewports */
    .cta-side-pattern {
        clip-path: none; 
        background: linear-gradient(to bottom, rgba(162, 31, 55, 0.2), transparent);
        width: 100%;
        height: 100%;
        opacity: 0.3;
    }
    
    .btn:active {
        transform: scale(0.96); /* Tactile feedback for mobile */
    }
}


/***************************
 corporate-journey 
 *************************/
:root {
    --burgundy: #A21F37;
    --navy: #192943;
    --white: #FFFFFF;
}

.corporate-journey {
    background-color: var(--white);
    padding: 100px 0;
}

/* Heading Typography */
.journey-title {
    color: var(--burgundy); /* Burgundy for the top line */
    font-weight: 700;
    font-size: 3.5rem;
    line-height: 1.1;
    letter-spacing: -1px;
}

.italic-serif {
    color: var(--navy); /* Navy for the emphasized text */
    font-family: 'Playfair Display', serif; /* Use a serif font for that "Executive" look */
    font-style: italic;
    font-weight: 400;
}

/* Body Text */
.journey-text {
    color: #4b5563; /* Subtle gray-navy for readability */
    font-size: 1.15rem;
    line-height: 1.8;
}

.intake-notice {
    color: var(--navy);
    font-size: 1rem;
    border-left: 3px solid var(--burgundy);
    padding-left: 15px;
}

/* Image Framing */
.main-frame {
    border-radius: 4px;
    width: 100%;
    aspect-ratio: 1 / 1; /* Keeps it square like the reference */
    object-fit: cover;
}

/* Button */
.btn-corporate {
    display: inline-block;
    padding: 15px 40px;
    background-color: var(--navy);
    color: var(--white);
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    border-radius: 2px;
}

.btn-corporate:hover {
    background-color: var(--burgundy);
    color: var(--white);
    transform: translateY(-2px);
}

/* Responsive Styles */
@media (max-width: 991px) {
    .journey-title { font-size: 2.5rem; }
    .corporate-journey { padding: 60px 0; }
}

/* ==========================================================================
   Corporate Journey - Responsive Scaling
   ========================================================================== */

/* 1. Mobile Extra Small (Phones < 576px) */
@media (max-width: 575.98px) {
    .corporate-journey {
        padding: 40px 0;
        text-align: center;
    }

    .journey-title {
        font-size: 2rem; /* Scaled down for readability */
        line-height: 1.2;
    }

    .journey-text {
        font-size: 1rem;
        line-height: 1.6;
    }

    .image-container {
        margin-bottom: 30px;
    }

    /* Center the intake notice border on mobile */
    .intake-notice {
        border-left: none;
        border-top: 3px solid var(--burgundy);
        padding-left: 0;
        padding-top: 15px;
        display: inline-block;
    }

    .btn-corporate {
        width: 40%; /* Full width button for easier tapping */
        padding: 12px 20px;
    }
}

/* 2. Mobile Small/Medium (Phones to Tablets: 576px - 767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .corporate-journey {
        padding: 60px 0;
    }

    .journey-title {
        font-size: 2.4rem;
        text-align: center;
    }

    .journey-text {
        text-align: center;
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    .image-container {
        max-width: 400px;
        margin: 0 auto 40px;
    }

    .intake-notice {
        text-align: center;
        border-left: none;
        border-bottom: 2px solid var(--burgundy);
        padding-left: 0;
        padding-bottom: 10px;
    }

    .content-wrapper {
        text-align: center;
    }

    
}

/* 3. Tablets/Small Laptops (768px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .corporate-journey {
        padding: 80px 0;
    }

    .journey-title {
        font-size: 2.8rem;
    }

    /* Ensure image and text balance well when stacked */
    .image-container {
        max-width: 500px;
        margin: 0 auto 50px;
    }

    .ps-lg-5 {
        padding-left: 0 !important;
    }
    
    .content-wrapper {
        text-align: center;
    }
}

/* 4. Global Touch Fixes */
@media (max-width: 991.98px) {
    .btn-corporate:active {
        transform: scale(0.98);
        background-color: var(--burgundy);
    }
}

/***************************
 testimonial-scroller 
 *************************/

 :root {
    --navy-deep: #192943;
    --burgundy-main: #A21F37;
    --white: #ffffff;
}

.premium-testimonials {
    background: linear-gradient(135deg, #192943 0%, #111c33 100%);
    padding: 100px 0;
}

.text-burgundy {
    color: var(--burgundy-main);
}

.badge-custom {
    background: rgba(162, 31, 55, 0.2);
    color: var(--burgundy-main);
    padding: 8px 18px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
}

.trust-pill {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 10px 22px;
    border-radius: 12px;
    font-size: 0.9rem;
}

/* Testimonial Card */
.testimonial-card {
    background: var(--white);
    padding: 40px;
    border-radius: 25px;
    max-width: 550px;
    margin: auto;
}

.testimonial-card p {
    font-size: 1rem;
    color: #444;
    line-height: 1.6;
}

.quote-mark {
    font-size: 3rem;
    color: var(--burgundy-main);
    font-family: serif;
}

.user-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
}

.user-meta img {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: 3px solid var(--burgundy-main);
}

.user-meta h6 {
    margin: 0;
    font-weight: 700;
}

.user-meta span {
    font-size: 0.85rem;
    color: #777;
}

/* Indicators */
.carousel-indicators [data-bs-target] {
    background-color: var(--burgundy-main);
}



/* 1. Mobile Extra Small (Phones < 576px) */
@media (max-width: 575.98px) {
    .premium-testimonials {
        padding: 50px 0;
    }

    .display-4 {
        font-size: 2.2rem; /* Scaled down heading */
        line-height: 1.2;
    }

    .lead {
        font-size: 1rem;
    }

    /* Stack Trust Pills vertically for better fit */
    .d-flex.gap-3.mt-4 {
        flex-direction: column;
        gap: 10px !important;
    }

    .trust-pill {
        width: fit-content;
        padding: 8px 16px;
        font-size: 0.8rem;
    }

    /* Testimonial Card Adjustments */
    .testimonial-card {
        padding: 25px;
        border-radius: 15px;
        margin: 0 10px; /* Side margin to prevent edge-touching */
    }

    .quote-mark {
        font-size: 2rem;
        line-height: 1;
    }

    .testimonial-card p {
        font-size: 0.95rem;
    }

    /* Hide carousel controls on very small screens to save space */
    .carousel-control-prev, 
    .carousel-control-next {
        display: none;
    }
}

/* 2. Mobile Small/Medium (Phones to Tablets: 576px - 767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .premium-testimonials {
        padding: 60px 0;
    }

    .display-4 {
        font-size: 2.6rem;
    }

    /* Center content since it's stacked */
    .col-lg-5 {
        text-align: center;
        margin-bottom: 40px;
    }

    .d-flex.gap-3.mt-4 {
        justify-content: center;
    }

    .testimonial-card {
        padding: 30px;
        max-width: 100%;
    }

    /* Position indicators higher so they don't overlap user meta */
    .carousel-indicators {
        bottom: -40px;
    }
}

/* ==========================================================================
   Improved Left Content Area - Premium Testimonials
   ========================================================================== */

/* 1. Mobile Extra Small (Phones < 576px) */
@media (max-width: 575.98px) {
    .premium-testimonials .col-lg-5 {
        text-align: center; /* Center everything for a clean mobile stack */
        padding: 0 15px;
        margin-bottom: 40px;
    }

    .badge-custom {
        display: inline-block;
        margin-bottom: 15px;
        font-size: 0.75rem;
        letter-spacing: 1px;
    }

    .display-4 {
        font-size: 2.1rem;
        line-height: 1.2;
        margin-top: 10px !important;
    }

    .lead {
        font-size: 0.95rem;
        margin-top: 15px !important;
        padding: 0 10px;
    }

    /* Trust Pills: Stacked for narrow screens */
    .premium-testimonials .d-flex.gap-3.mt-4 {
        flex-direction: column;
        align-items: center;
        gap: 12px !important;
        margin-top: 25px !important;
    }

    .trust-pill {
        width: 100%;
        max-width: 200px; /* Prevents them from being too wide */
        padding: 10px;
        justify-content: center;
        display: flex;
        background: rgba(255, 255, 255, 0.12); /* Slightly higher visibility */
    }
}

/* 2. Mobile Small/Medium (Phones to Tablets: 576px - 767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .premium-testimonials .col-lg-5 {
        text-align: center;
        margin-bottom: 50px;
    }

    .display-4 {
        font-size: 2.5rem;
    }

    /* Trust Pills: Side-by-side but centered */
    .premium-testimonials .d-flex.gap-3.mt-4 {
        justify-content: center;
        margin-top: 30px !important;
    }

    .trust-pill {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
}

/* 3. Tablets/Small Laptops (768px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .premium-testimonials .col-lg-5 {
        text-align: center;
        margin-bottom: 60px;
        padding: 0 10%; /* Adds breathing room on sides of text */
    }

    .display-4 {
        font-size: 3rem;
    }

    .premium-testimonials .d-flex.gap-3.mt-4 {
        justify-content: center;
    }
}


/************************
 recruiters-section
 ************************/


:root {
    --burgundy: #A21F37;
    --navy: #192943;
    --white: #FFFFFF;
}

.recruiters-section {
    background-color: var(--white);
    padding: 80px 0;
    overflow: hidden; /* Important for the slider */
}

.text-navy { color: var(--navy); }
.text-burgundy { color: var(--burgundy); }

.accent-line-center {
    width: 60px;
    height: 3px;
    background: var(--burgundy);
    margin: 15px auto;
    border-radius: 10px;
}

/* Slider Container */
.logo-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 40px 0;
}

/* Add a fade effect to the edges */
.logo-slider::before,
.logo-slider::after {
    content: "";
    height: 100%;
    position: absolute;
    width: 150px;
    z-index: 2;
    pointer-events: none;
}

.logo-slider::before {
    left: 0;
    background: linear-gradient(to right, white, transparent);
}

.logo-slider::after {
    right: 0;
    background: linear-gradient(to left, white, transparent);
}

/* Animation Track */
.logo-track {
    display: flex;
    width: calc(250px * 12); /* Width of logo * total number of logos */
    animation: scroll 30s linear infinite;
}

.logo-item {
    width: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 40px;
}

.logo-item img {
    width: 100%;
    max-width: 140px;
    filter: grayscale(100%); /* Keeps it professional */
    opacity: 0.6;
    transition: all 0.3s ease;
}

.logo-item img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

/* Keyframes for the Infinite Loop */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-250px * 6)); } /* Move by half the track */
}

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

/* ==========================================================================
   Recruiters Section - Responsive Logo Slider
   ========================================================================== */

/* 1. Mobile Extra Small (Phones < 576px) */
@media (max-width: 575.98px) {
    .recruiters-section {
        padding: 40px 0;
    }

    .recruiters-section h2 {
        font-size: 1.6rem;
        padding: 0 15px;
    }

    /* Reduce the size of the fade effect so logos are visible sooner */
    .logo-slider::before,
    .logo-slider::after {
        width: 50px;
    }

    .logo-slider{
        padding:0px;
    }


    /* Shrink the items and speed up the animation for smaller track */
    .logo-item {
        width: 150px; /* Smaller width for mobile */
        padding: 0 20px;
    }

    .logo-item img {
        max-width: 90px;
        filter: grayscale(0%); /* Show color by default on mobile */
        opacity: 0.8;
    }

    .logo-track {
        width: calc(150px * 12); /* Match the new item width */
        animation: scroll 15s linear infinite; /* Faster scroll for mobile */
    }

    @keyframes scroll {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(-150px * 6)); }
    }
}

/* 2. Mobile Small/Medium (Phones to Tablets: 576px - 767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .recruiters-section {
        padding: 50px 0;
    }

    .logo-slider::before,
    .logo-slider::after {
        width: 80px;
    }

    .logo-slider{
        padding:0px;
    }

    .logo-item {
        width: 180px;
        padding: 0 25px;
    }

    .logo-item img {
        max-width: 110px;
    }

    .logo-track {
        width: calc(180px * 12);
        animation: scroll 20s linear infinite;
    }

    @keyframes scroll {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(-180px * 6)); }
    }
}

/* 3. Tablets/Small Laptops (768px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .recruiters-section {
        padding: 60px 0;
    }

    .logo-item {
        width: 200px;
        padding: 0 30px;
    }

    .logo-track {
        width: calc(200px * 12);
        animation: scroll 25s linear infinite;
    }

    @keyframes scroll {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(-200px * 6)); }
    }
}

/* 4. Global Touch Interaction */
@media (max-width: 991.98px) {
    /* Prevent the slider from pausing on touch, as it feels 'stuck' */
    .logo-slider:hover .logo-track {
        animation-play-state: running; 
    }
}




/* ***********************
 footer  
 ***********************/
 
 :root {
    --navy: #192943;
    --burgundy: #A21F37;
    --white: #FFFFFF;
}

/* Main Footer */
.lp-final-footer {
    background-color: var(--navy); /* Solid Navy BG */
    color: var(--white);
    padding: 60px 0 30px;
    font-family: 'Inter', sans-serif;
}

/* Logo */
.footer-logo {
    font-weight: 800;
    font-size: 1.6rem;
    color: var(--white);
    letter-spacing: 1px;
}

.footer-logo span {
    color: var(--burgundy);
}

/* Social Icons */
.social-icon-container {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.social-icon {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--white);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: lowercase;
    transition: all 0.3s ease;
}

.social-icon:hover {
    background: var(--burgundy);
    border-color: var(--burgundy);
    transform: translateY(-3px);
}

/* Buttons */
.footer-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.btn-outline-white {
    padding: 10px 24px;
    border: 2px solid var(--white);
    color: var(--white);
    border-radius: 4px; /* Professional square-round mix */
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.btn-outline-white:hover {
    background: var(--white);
    color: var(--navy);
}

.btn-filled-burgundy {
    padding: 10px 24px;
    background: var(--burgundy);
    color: var(--white);
    border: 2px solid var(--burgundy);
    border-radius: 4px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.btn-filled-burgundy:hover {
    background: transparent;
    border-color: var(--white);
}

/* Bottom Bar */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 40px;
    padding-top: 20px;
    text-align: center;
    font-size: 0.8rem;
    opacity: 0.6;
    letter-spacing: 0.5px;
}

/* Responsive Scaling */
@media (max-width: 991px) {
    .footer-logo { margin-bottom: 10px; }
    .footer-buttons { justify-content: center; margin-top: 10px; }
}

/* ==========================================================================
   Management School Footer - Responsive Scaling
   ========================================================================== */

/* 1. Mobile Extra Small (Phones < 576px) */
@media (max-width: 575.98px) {
    .lp-final-footer {
        padding: 40px 0 20px;
    }

    .footer-logo {
        font-size: 1.3rem;
        margin-bottom: 25px;
    }

    /* Stack buttons vertically for better mobile tap targets */
    .footer-buttons {
        flex-direction: column;
        width: 100%;
        max-width: 280px;
        margin: 25px auto 0;
    }

    .btn-outline-white, 
    .btn-filled-burgundy {
        width: 100%;
        text-align: center;
        padding: 12px;
    }

    .social-icon-container {
        margin-bottom: 10px;
    }

    .footer-bottom {
        margin-top: 30px;
        font-size: 0.75rem;
        padding: 15px 10px 0;
    }
}

/* 2. Mobile Small/Medium (Phones to Tablets: 576px - 767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .lp-final-footer {
        padding: 50px 0 25px;
    }

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

    /* Keep buttons side-by-side but centered */
    .footer-buttons {
        margin-top: 20px;
        justify-content: center;
    }

    .social-icon-container {
        margin: 15px 0;
    }
}

/* 3. Tablets/Small Laptops (768px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .lp-final-footer {
        padding: 60px 0 30px;
    }

    /* On tablets, we stack them but keep the row-like feel */
    .footer-logo {
        margin-bottom: 0;
    }

    .social-icon-container {
        margin: 20px 0;
    }

    .footer-buttons {
        margin-top: 0;
    }
}

/* 4. Global Accessibility/Interaction Tweak */
@media (max-width: 991.98px) {
    /* Increase icon touch area slightly for mobile thumbs */
    .social-icon {
        width: 42px;
        height: 42px;
        font-size: 0.9rem;
    }
    
    /* Remove hover translate on mobile to prevent "sticky" hover states */
    .social-icon:hover {
        transform: none;
    }
}