.vt-hero-title4 {
    font-family: 'Satoshi', sans-serif;
    font-size: 60px;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: -1.8px;
    background: var(--gradient-hero);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    max-width: 940px;
}

.vt-about-image2 {
    width: 100%;
    max-width: 693px;
    min-height: 180px;
    opacity: 1;
    border-radius: 14px;
    flex: 1;
    position: relative;
    overflow: hidden;
    height: auto;
}

.vt-about-image-overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(258.39deg, rgba(0, 0, 0, 0) 39.24%, #191121 92.84%);
    border-radius: 14px;
    z-index: 1;
}

.vt-about-image2 img {
    opacity: 1;
    border-radius: 14px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    .vt-about-image2 {
        height: auto;
    }
}

@media (min-width: 768px) {
    .vt-about-image2 {
        height: 330px;
    }
}

.vt-about-text2 h3{
    font-family: 'Satoshi', sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 150%;
    color: #FFFFFF;
    line-height: 1.3;
    vertical-align: middle;
}

.vt-about-text2 p{
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    color: rgba(204, 204, 204, 1);
    line-height: 1.6;
    text-align: justify;
}

.vt-about-text2{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 452px;
    height: auto;
    opacity: 1;
}

@media (min-width: 992px) {
    .vt-two-line-desktop6 {
        /* limit width so content wraps to two lines on desktop */
        white-space: normal;
        display: inline-block;
        overflow-wrap: normal;
    }
    
    /* Specific limits for common targets */
    .vt-hero-title.vt-two-line-desktop6 {
        max-width: 1300px; /* forces wrapping to two lines at 80px font-size */
    }

    .vt-section-title.vt-two-line-desktop6 {
        max-width: 700px; /* suitable for section headings to wrap into two lines */
    }
}

/* Style for the overlay on the background image */
.vt-about-section-full2 .vt-section-overlay2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180.05deg, #0B0B0B 6.72%, rgba(18, 14, 22, 0.481529) 55.64%, #0B0B0B 101.07%);
    z-index: 1;
}

/* Ensure overlay image exactly matches overlay height and block layout */
.vt-about-section-full2 .vt-section-overlay2 img {
    background: linear-gradient(180.05deg, #0B0B0B 6.72%, rgba(18, 14, 22, 0.481529) 55.64%, #0B0B0B 101.07%);
    display: block;
    height: 100%;
    width: 100% !important;
    object-fit: cover;
}

.vt-about-section-full2 .vt-section-content2 {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 100%;
    margin-top: -70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 24px;
    color: white;
    z-index: 2; /* Ensure text is above the overlay */
}

.vt-about-section-full2 .vt-section-content2 p {
    font-family: 'Satoshi', sans-serif;
    font-size: 20px !important;
    line-height: 1.6;
    color: var(--vt-gray);
    margin: 0 auto;
}

/* Container for the two quote boxes */
.quote-box-container2 {
    display: flex;
    justify-content: space-between; /* Space them out horizontally */
    gap: 90px; /* Add a small gap between the boxes */
    padding: 0 180px; /* Add horizontal padding to match the design */
    position: absolute;
    top: auto; /* Reset top positioning */
    bottom: -70px; /* Position above the bottom of the container, leaving space */
    left: 0;
    right: 0;
    z-index: 10; /* Higher z-index to ensure it appears above other content */
}

/* Style for each quote box */
.vt-quote-box3 {
    flex: 1; /* Allow boxes to grow and fill available space */
    min-width: 300px; /* Minimum width for each box */
    background: linear-gradient(86.16deg, #0E0E0E 11.14%, #1E1E1E 113.29%);
    border: 1px solid rgba(255, 255, 255, 0.1); /* Thin white border */
    border-radius: 20px; /* Rounded corners */
    padding: 30px; /* Padding inside the box */
    display: flex;
    flex-direction: column;
    gap: 24px; /* Gap between title and text */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Subtle shadow */
}

.vt-quote-box3:hover {
    background: linear-gradient(158.77deg, #141414 54.71%, #220C37 85.69%);
    background-repeat: no-repeat;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Style for the title inside the quote box */
.vt-quote-box3 h4 {
    font-family: 'Satoshi', sans-serif;
    font-size: 28px;
    font-weight: 500;
    color: white;
    margin: 0 0 8px 0; /* Margin below the title */
}

/* Style for the paragraph inside the quote box */
.vt-quote-box3 p {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8); /* Slightly faded white text */
    margin: 0;
    text-align: justify;
}

.vt-content2{
    max-width: 945px !important;
}

.vt-content2 p{
    width: 925px !important;
}

/* Tablet and smaller screens */
@media (max-width: 991px) {
    .vt-about-section-full2 .vt-section-main-content2 {
        min-height: 300px; /* Reduce height on smaller screens */
    }

    .vt-about-section-full2 .vt-section-content2 h2 {
        font-size: 48px !important;
        max-width: 80%;
    }

    .vt-about-section-full2 .vt-section-content2 p {
        font-size: 14px;
        width: 80%;
    }

    .quote-box-container2 {
        flex-direction: column; /* Stack boxes vertically on smaller screens */
        padding: 40px 20px; /* Reduce horizontal padding */
        gap: 20px; /* Reduce gap between stacked boxes */
    }

    .vt-quote-box3 {
        min-width: auto; /* Allow boxes to be full width on small screens */
        padding: 20px; /* Reduce padding */
    }

    .vt-quote-box3 h4 {
        font-size: 16px;
    }

    .vt-quote-box3 p {
        font-size: 14px;
        text-align: left;
    }
}

/* Tablet screens */
@media (max-width: 991px) and (min-width: 769px) {
    /* Adjustments for "Ready to Take Control of Your Career?" section */
    .vt-about-section-full2 .vt-section-content2 h2 {
        font-size: 40px !important; /* Reduce font size for tablet */
    }

    .vt-about-section-full2 .vt-section-content2 p {
        font-size: 16px; /* Reduce font size for tablet */
        width: 90%; /* Reduce width */
    }

    .vt-quote-box3 {
        min-width: 250px; /* Adjust width for tablet */
        padding: 20px; /* Adjust padding */
    }

    .vt-quote-box3 h4 {
        font-size: 16px; /* Reduce font size */
    }

    .vt-quote-box3 p {
        font-size: 14px; /* Reduce font size */
        text-align: left;
    }
}

/* Mobile screens */
@media (max-width: 768px) {    
    .vt-card {
        width: 100%; /* Full width on small screens */
    }

    /* Adjustments for "Ready to Take Control of Your Career?" section */
    .vt-about-section-full2 .vt-section-main-content2 {
        min-height: 450px; /* Adjust height for mobile */
    }

    .vt-about-section-full2 .vt-section-content2 h2 {
        font-size: 28px !important; /* Reduce font size for mobile */
        width: 95%; /* Adjust width */
    }

    .vt-about-section-full2 .vt-section-content2 p {
        font-size: 14px; /* Reduce font size for mobile */
        width: 95%; /* Adjust width */
    }

    .vt-about-section-full2 .vt-section-content2.vt-content2 p {
        font-size: 14px; /* Reduce font size for mobile */
        width: 100%; /* Full width for the specific content2 class */
    }

    .quote-box-container2 {
        padding: 0 20px; /* Adjust padding */
    }

    .vt-quote-box3 h4 {
        font-size: 16px; /* Reduce font size */
    }

    .vt-quote-box3 p {
        font-size: 14px; /* Reduce font size */
        text-align: left;
    }
}

/* --- Department Modules Slider Styles (FIXED VISIBILITY & LAYOUT) --- */
 .vt-role-slider-wrapper {
                position: relative;
                height: 750px;
                min-height: 500px;
                width: 100%;
                overflow: hidden;
                padding-top: 20px;
            }
            .vt-role-slider {
                display: block;
                width: 100%;
                height: 100%;
                position: relative;
                will-change: transform;
                cursor: grab;
            }
            .vt-role-slider:active {
                cursor: grabbing;
            }
            .vt-role-card2 {
                position: absolute; /* This is the key fix */
                top: 50%;
                left: 50%;
                transform-origin: center center;
                transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
                backface-visibility: hidden;
                -webkit-backface-visibility: hidden;
                width: 380px;
                background: rgba(20, 20, 25, 0.95);
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 24px;
                padding: 32px;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                height: auto;
                min-height: 450px;
                overflow: hidden;
            }
            .vt-role-card2 h3 {
                font-family: 'Satoshi', sans-serif !important;
                font-size: 28px !important;
                text-align: center !important;
                color: #ffffff;
                margin-bottom: 24px;
                padding-bottom: 16px;
            }
            .vt-role-content2 {
                display: flex;
                flex-direction: column;
                gap: 24px;
                flex-grow: 1;
            }
            .vt-role-item2 {
                display: flex;
                flex-direction: column;
                gap: 8px;
            }
            .vt-role-item2 h4 {
                font-family: 'Satoshi', sans-serif !important;
                font-size: 24px !important;
                letter-spacing: 1px;
                margin-bottom: 8px;
            }
            .vt-role-item2 p {
                font-family: 'Poppins', sans-serif;
                font-size: 16px !important;
                color: #d1d5db;
                line-height: 1.6;
                margin: 0;
            }
            .slider-dots {
                display: flex;
                justify-content: center;
                gap: 12px;
                margin-top: -20px;
                position: relative;
                z-index: 20;
            }
            .slider-dot {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.2);
                cursor: pointer;
                transition: all 0.3s ease;
            }
            .slider-dot.active {
                background: #7c3aed;
                transform: scale(1.3);
                box-shadow: 0 0 10px rgba(124, 58, 237, 0.6);
            }
            @media (max-width: 768px) {
                .vt-role-slider-wrapper {
                    height: 600px;
                    min-height: 400px;
                    overflow: hidden;
                }
                .vt-role-card2 {
                    width: 100%;
                    min-height: 400px;
                    padding: 24px;
                }
                .vt-role-card2 h3 {
                    font-size: 22px !important;
                }
                .vt-role-item2 h4 {
                    font-size: 18px !important;
                }
                .vt-role-item2 p {
                    font-size: 14px !important;
                }
            }

 /* Section: Trust & Authority */
.vt-section-subtitle2 {
    color: var(--vt-gray);
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    line-height: 140%;
    max-width: 700px;
}

.quote-box-container3 {
    display: flex;
    justify-content: space-between; /* Space them out horizontally */
    gap: 90px; /* Add a small gap between the boxes */
    padding: 0 180px; /* Add horizontal padding to match the design */
    position: absolute;
    top: auto; /* Reset top positioning */
    bottom: -120px; /* Position above the bottom of the container, leaving space */
    left: 0;
    right: 0;
    z-index: 10; /* Higher z-index to ensure it appears above other content */
}

.quote-box-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0;
    position: relative;
    z-index: 1;
    overflow: visible;
    height: 359px;
}

.box1 {
    display: flex;
    flex-direction: column;
    width: 636px;
    min-height: 280px;
    gap: 30px;
    border-radius: 20px;
    padding: 40px;
    background: linear-gradient(86.16deg, #1E1E1E 11.14%, #19181A 113.29%);
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.25);
    position: absolute; /* Critical: allows stacking */
    transition: transform 0.4s ease, opacity 0.4s ease, z-index 0.4s ease, box-shadow 0.4s ease;
    overflow: hidden;
    backdrop-filter: blur(2px); /* Soft blur for depth */
}

/* Center/Focused Card */
.box1:nth-child(1) {
    z-index: 3;
    opacity: 1;
    transform: translateY(0) scale(1);
    box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.4);
    background: linear-gradient(86.16deg, #252525 11.14%, #201F21 113.29%);
    animation: float 3s ease-in-out infinite;
}

/* Left Card (behind and faded) */
.box1:nth-child(2) {
    z-index: 1;
    opacity: 0.4;
    transform: translateX(-180px) translateY(15px) scale(0.9);
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2);
    filter: blur(1px); /* Blur for depth */
}

/* Right Card (behind and faded) */
.box1:nth-child(3) {
    z-index: 1;
    opacity: 0.4;
    transform: translateX(180px) translateY(15px) scale(0.9);
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2);
    filter: blur(1px); /* Blur for depth */
}

/* Floating Animation */
@keyframes float {
    0% {
        transform: translateY(0px) scale(1);
    }
    50% {
        transform: translateY(-5px) scale(1.01);
    }
    100% {
        transform: translateY(0px) scale(1);
    }
}

/* Hover Effect on Focused Card */
.box1:nth-child(1):hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0px 12px 40px 0px rgba(0, 0, 0, 0.5);
    background: linear-gradient(86.16deg, #2A2A2A 11.14%, #252426 113.29%);
}

/* Quote text styling */
.vt-box-text {
    font-family: 'Satoshi', sans-serif;
    color: rgba(204, 204, 204, 1);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    text-align: justify;
    flex-grow: 1;
}

/* Responsive design for smaller screens */
@media (max-width: 992px) {
    .quote-box-wrapper {
        flex-direction: column;
        gap: 20px;
        padding: 20px 0;
    }
    
    .box1 {
        width: 100%;
        max-width: 600px;
        padding: 30px;
        transform: none !important;
        opacity: 1 !important;
        z-index: 1 !important;
        box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.25);
    }
    
    .vt-box-text {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .box1 {
        width: 100%;
        padding: 20px;
        min-height: 250px;
    }
    
    .box1 img {
        width: 30px;
        margin-bottom: 15px;
    }
    
    .vt-box-text {
        font-size: 14px;
        line-height: 1.5;
    }
}

.quote-box-container4 {
    display: flex;
    justify-content: space-between; /* Space them out horizontally */
    gap: 50px; /* Add a small gap between the boxes */
    padding: 0 180px; /* Add horizontal padding to match the design */
    position: absolute;
    top: auto; /* Reset top positioning */
    bottom: -70px; /* Position above the bottom of the container, leaving space */
    left: 0;
    right: 0;
    z-index: 10; /* Higher z-index to ensure it appears above other content */
}

.vt-content3 p {
    width: 750px !important;
}

.vt-about-section-full3 .vt-section-content {
    position: absolute;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 24px;
    color: white;
    z-index: 2;
}

.vt-content4 {
    max-width: 920px !important;
}

/* === REQUIRED FIX: Equal-height text & image in .vt-about-row1 === */
.vt-about-row1 {
    display: flex;
    gap: 50px; /* or your current gap */
    align-items: stretch; /* ensures both children take full height */
    width: 100%;
    max-width: 1272px;
}

.vt-about-text2,
.vt-about-image2 {
    flex: 1; /* both take equal available width */
    display: flex;
    flex-direction: column;
}

/* Ensure image container fills its flex parent height */
.vt-about-image2 {
    position: relative;
    min-height: 0; /* reset any min-height */
    height: 100%; /* critical: match text column height */
    border-radius: 14px;
    overflow: hidden;
}

.vt-about-image2 img {
    width: 100%;
    height: 100%; /* fill container vertically */
    object-fit: cover;
    display: block;
}

.vt-about-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Remove fixed height overrides */
@media (min-width: 768px) {
    .vt-about-image2 {
        /* ❌ Remove this line if present: */
        /* height: 330px; */
        /* Keep only: */
        height: 100%;
    }
}

/* On mobile: stack vertically, but still equal-height within row (optional) */
@media (max-width: 768px) {
    .vt-about-row1 {
        flex-direction: column;
        gap: 30px;
    }
    .vt-about-image2,
    .vt-about-text2 {
        height: auto; /* stack mode — no need for equal height */   
    }
    .vt-section-content2.vt-content2{
        top:50% !important;
    }
}

@media (min-width: 768px) and (max-width: 900px){
    .vt-about-image2, .vt-about-text2 {
        height: auto;
        max-width: 100% !important;
    }
    .vt-about-text2 p {
        font-size: 14px !important;
    }
    .vt-about-text2 h3 {
        font-size: 26px !important;
        letter-spacing: -0.8px;
        line-height: 1.2;
    }
    .vt-section-content2.vt-content2 {
        top: 50% !important;
    }
    .vt-about-section-full2 .vt-section-content2.vt-content2 p {
        font-size: 18px !important;
    }
    .quote-box-container2 {
        padding: 0 20px;
        display: flex;
        flex-direction: row !important;
    }
    .vt-quote-box3 {
        padding: 20px;
        gap: 10px;
        width: 350px !important;
    }
    .vt-quote-box3 h4 {
        font-size: 18px;
    }
    .vt-quote-box3 p {
        font-size: 14px;
        text-align: left;
    }
}

/* Crew management page */
.vt-crew-page {
    background: #0b0b0b;
    color: #fff;
    padding-top: 168px;
}

.vt-crew-hero,
.vt-crew-section {
    padding: 50px 0;
}

.vt-crew-hero {
    padding-top: 52px;
    padding-bottom: 24px;
}

.vt-crew-hero-content {
    max-width: 1380px;
    margin: 0 auto 44px;
    padding: 0 42px;
    text-align: center;
}

.vt-crew-hero-image-wrap {
    width: calc(100% - 140px);
    margin: 0 auto;
    min-height: calc(100vh - 170px);
    max-height: 820px;
    overflow: hidden;
    border-radius: 14px;
}

.vt-crew-hero-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}



@media (max-width: 1199.98px) {
    .vt-crew-hero-image-wrap {
        min-height: 0;
        height: clamp(300px, 52vw, 560px);
        max-height: none;
    }
}

.vt-crew-row {
    display: flex;
    align-items: stretch;
    gap: 28px;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 22px;
}

.vt-crew-row-reverse {
    flex-direction: row-reverse;
}

.vt-crew-content,
.vt-crew-image {
    flex: 1 1 50%;
}

.vt-crew-image {
    display: flex;
    align-items: center;
}

.vt-crew-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.vt-crew-hero-content .vt-hero-title {
    font-family: 'Satoshi', sans-serif;
    font-size: clamp(2rem, 4vw, 3.6rem);
    font-weight: 600;
    line-height: 1.15;
    margin: 0 auto 20px;
    color: #fff;
    max-width: 980px;
}

.vt-crew-hero-content > p {
    max-width: 980px;
    margin: 0 auto;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.05rem, 1.3vw, 1.2rem);
    line-height: 1.85;
    color: #d7d9e0;
}

.vt-crew-hero-content > p + p {
    margin-top: 16px;
}

.vt-crew-content h2 {
    font-family: 'Satoshi', sans-serif;
    font-size: clamp(1.6rem, 2.8vw, 2.5rem);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 14px;
    color: #fff;
}

.vt-crew-content h3 {
    font-family: 'Satoshi', sans-serif;
    font-size: 1.22rem;
    font-weight: 500;
    margin: 16px 0 8px;
    color: #fff;
}

.vt-crew-content p,
.vt-crew-content li {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: #c9cbd2;
}

.vt-crew-content ul {
    margin: 0 0 14px 18px;
    padding: 0;
}

.vt-crew-image img {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: 540px;
    object-fit: contain;
    border-radius: 14px;
    display: block;
}

@media (max-width: 991.98px) {
    .vt-crew-page {
        padding-top: 128px;
    }

    .vt-crew-hero {
        padding-top: 28px;
        padding-bottom: 10px;
    }

    .vt-crew-section {
        padding: 20px 0;
    }

    .vt-crew-hero-content {
        margin-bottom: 16px;
        padding: 0 22px;
    }

    .vt-crew-hero-image-wrap {
        width: calc(100% - 44px);
        min-height: 0;
        height: clamp(220px, 56vw, 420px);
        max-height: none;
    }

    .vt-crew-row,
    .vt-crew-row-reverse {
        flex-direction: column;
        gap: 20px;
    }

    .vt-crew-hero-content .vt-hero-title {
        font-size: clamp(1.8rem, 7vw, 2.5rem);
    }

    .vt-crew-hero-content > p {
        font-size: 1rem;
        line-height: 1.75;
    }

    .vt-crew-image img {
        min-height: 0;
        max-height: 360px;
    }
}