:root {
    --vt-dark: #0C0C0C;
    --vt-gray: #CCC;
    --vt-border: #2E2E2E;
    --vt-card-bg: #141414;
    --vt-purple: #6026C6;
    --vt-purple-light: #8D2BE8;
    --gradient-primary: linear-gradient(200deg, #844FFC 13.57%, #491EB8 98.35%);
    --gradient-hero: linear-gradient(0deg, #FFF 13.02%, rgba(255, 255, 255, 0.30) 79.43%);
    --gradient-card: linear-gradient(211deg, #141414 59.07%, #220C37 85.22%);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', -apple-system, Roboto;
    background-color: var(--vt-dark);
    color: white;
    overflow-x: hidden;
}

/* Remove left/right padding from all containers */
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Satoshi', -apple-system, Roboto;
}

/* Header */
.vt-header {
    position: fixed;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1200;
    width: 100%;
    max-width: 850px;
    padding: 12px 12px;
}

.vt-navbar {
    background: rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(500px) !important;
    width: 100%;
    height: 73px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    padding: 1px;
}

.vt-navbar .container-fluid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 0;
    flex-wrap: nowrap;
}

.vt-navbar .navbar-nav {
    display: flex;
    align-items: center;
    margin: 0;
    padding-left: 0;
    flex-wrap: nowrap;
}

.vt-navbar .vt-nav-link {
    white-space: nowrap;
    font-size: 14px;
}

@media (min-width: 992px) {
    .gap-lg-3 {
        gap: 1.8rem !important;
    }
}

.vt-logo-img {
    width: auto;
    height: 35px;
    opacity: 1;
}

.header-cta {
    flex-shrink: 0; /* keep CTA pinned to the right end */
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Extra small screens: reduce logo height further */
@media (max-width: 577px) {
    .vt-logo-img { height: 30px; }
}

.vt-nav-link {
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    text-decoration: none;
    padding: 0 8px;
}

.vt-nav-link:hover,
.vt-nav-link.active {
    color: white;
}

.vt-btn-primary {
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--gradient-primary);
    color: white;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    border: none;
    cursor: pointer;
    transition: opacity 0.3s;
}

.vt-btn-primary:hover {
    opacity: 0.9;
}

.vt-btn-secondary {
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
    color: var(--vt-gray);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.3s;
    text-decoration: none;
}

.vt-btn-secondary:hover {
    border-color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 576.98px){
    .vt-btn-primary {
        padding: 14px 16px;
        font-size: 12px;
        width:132px;
    }

    .vt-btn-secondary {
        padding: 8px 12px;
        font-size: 12px;
    }
    
}

.vt-btn-outline {
    width: 158px;
    padding: 18px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    color: #F2F2F7;
    font-family: 'Poppins', sans-serif;
    font-size: 17px;
    cursor: pointer;
    transition: background 0.3s;
}

.vt-btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 480px) {
    .vt-btn-outline {
        width: 120px;
        padding: 12px 8px;
        font-size: 14px;
    }

    .vt-hero-buttons{
        margin-bottom: 30px !important;
    }
}

/* Hero Section */
.vt-hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 271px 16px 80px;
}

.vt-blur-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.vt-blur-1 {
    position: absolute;
    top: 15px;
    left: 465px;
    width: 581px;
    height: 639px;
    border-radius: 332px;
    background: linear-gradient(to bottom, rgba(50, 17, 81, 0.6), rgba(104, 46, 179, 0.6));
    filter: blur(315px);
}

.vt-blur-2 {
    position: absolute;
    top: 5537px;
    left: 1123px;
    width: 388px;
    height: 852px;
    border-radius: 332px;
    background: linear-gradient(to bottom, rgba(50, 17, 81, 0.6), rgba(104, 46, 179, 0.6));
    filter: blur(315px);
}

.vt-hero-content {
    position: relative;
    z-index: 10;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.vt-hero-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.vt-hero-title2 {
    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: 464px;
}
.vt-hero-title {
    font-family: 'Satoshi', sans-serif;
    font-size: 80px !important;
    font-weight: 700 !important;
    line-height: 120%;
    background: var(--gradient-hero);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.vt-hero-buttons{
    margin-bottom: 30px !important;
}

@media (max-width: 767.98px) {
    .vt-hero-subtitle {
        font-size: 14px !important;
        line-height: 1.5;
    }
}

@media (max-width: 490px) {
    .vt-hero-line1 {
        font-size: 20px;
        display: block;
        line-height: 110%;
        letter-spacing: -1px;
    }
    .vt-hero-line2 {
        font-size: 26px;
        display: block;
        line-height: 110%;
    }

    .vt-pain-card{
        padding: 40px 0 50px !important;
    }
    .vt-pain-card h3{
        font-size: 18px !important;
    }

    .vt-pain-card p{
        font-size: 12px !important;
    }
}

@media (min-width: 1000px) {
    .vt-hero-title {
        margin-bottom: 0 !important;
        width: 950px;
    }
}

@media (min-width: 992px) {
    .vt-hero-section {
        padding-top: 271px !important;
    }
}

.vt-hero-subtitle {
    color: var(--vt-gray);
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    line-height: 140%;
    max-width: 905px;
}

@media (min-width: 768px) {
    .vt-hero-subtitle {
        font-size: 20px;
    }
}

.vt-video-player {
    position: relative;
    width: 100%;
    max-width: 1272px;
    height: 400px;
    border-radius: 50px;
    overflow: hidden;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
}

@media (max-width: 490px) {
    .vt-video-player {
        height: 259px;
        border-radius: 16px;
        width: 351px;
    }
}

@media (min-width: 768px) {
    .vt-video-player {
        height: 500px;
    }
}

@media (min-width: 992px) {
    .vt-video-player {
        height: 623px;
    }
}

.vt-video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background-color: #000000;
}

.vt-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 10;
    opacity: 1;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.vt-video-overlay.hidden {
    opacity: 0;
    visibility: hidden;
}

.vt-play-btn-glow {
    position: absolute;
    inset: 0;
    border-radius: 50px;
    animation: pulse 2s infinite;
}

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

.vt-play-btn-inner {
    position: relative;
    width: 77px;
    height: 77px;
    border-radius: 50%;
    
    backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
}

.vt-play-btn:hover .vt-play-btn-inner {
    transform: scale(1.1);
}

/* Hero play button (exact same as standalone – circular, dark ring, purple gradient, white triangle) */
.vt-hero-play-btn {
    position: relative;
    width: 90px;
    height: 90px;
    padding: 6px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background: #3d3d3d;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}
.vt-hero-play-btn-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 50%, #5b21b6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.4);
    transition: transform 0.2s ease;
}
.vt-hero-play-btn:hover .vt-hero-play-btn-inner {
    transform: scale(1.08);
}
.vt-hero-play-btn:focus-visible {
    outline: 2px solid rgba(168, 85, 247, 0.8);
    outline-offset: 4px;
}
.vt-hero-play-btn svg {
    width: 26px;
    height: 30px;
    margin-left: 4px;
    flex-shrink: 0;
}

/* Play button click animation (before overlay disappears) */
.vt-video-overlay.vt-play-btn-clicked {
    transition: opacity 0.4s ease-out;
    opacity: 0.7;
}
.vt-play-btn-clicked.vt-hero-play-btn {
    pointer-events: none;
}
.vt-play-btn-clicked .vt-hero-play-btn-inner {
    animation: vt-play-btn-press 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
/* Expanding ring on click */
.vt-hero-play-btn::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(168, 85, 247, 0.6);
    opacity: 0;
    pointer-events: none;
}
.vt-play-btn-clicked.vt-hero-play-btn::after {
    animation: vt-play-ring 0.45s ease-out forwards;
}
@keyframes vt-play-ring {
    0% {
        transform: scale(0.85);
        opacity: 1;
    }
    100% {
        transform: scale(1.35);
        opacity: 0;
    }
}
@keyframes vt-play-btn-press {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    35% {
        transform: scale(0.88);
        opacity: 1;
    }
    65% {
        transform: scale(1.05);
        opacity: 1;
    }
    100% {
        transform: scale(0.95);
        opacity: 0.75;
    }
}

/* Force native controls to stay visible (Chrome/Firefox) */
.vt-video-bg::-webkit-media-controls {
    display: flex !important;
}
.vt-video-bg::-webkit-media-controls-panel {
    opacity: 1 !important;
    transition: opacity 0.2s;
}

/* Functional benefits slider */
.vt-benefits-slider {
    position: relative;
    overflow: hidden;
}
.vt-benefits-track {
    display: flex;
    transition: transform 0.6s ease;
    width: 200%;
}
.vt-benefits-slide {
    width: 50%; /* two slides */
    flex: 0 0 50%;
    padding: 12px 0;
}

.slider-dots-small {
    display: flex;
    gap: 8px;
    justify-content: left;
    margin-top: 18px;
}
.slider-dots-small .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
}
.slider-dots-small .dot.active {
    width:20px;
    height: 10px;
    background: white;
    border-radius: 40%;
}

/* Benefits images: arrange in two rows */
.vt-benefits-images {
    position: relative;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    gap: 14px;
}

@media (min-width: 768px) {
    .vt-benefits-images {
        height: 450px;
    }
}

.vt-benefits-img-row {
    display: flex;
    gap: 12px;
    position: relative;
    justify-content: space-between;
    margin-bottom: 12px;
    z-index: 1;
}
.vt-benefits-img-row img {
    width: 48%;
    height: auto;
    border-radius: 12px;
    position: relative;
}

.vt-benefits-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.vt-benefit-item {
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.vt-benefit-item:last-child {
    border-bottom: none;
}

.vt-benefit-item h3 {
    color: white;
    font-family: 'Satoshi', sans-serif;
    font-size: 28px;
    font-weight: 500;
    line-height: 150%;
    margin-bottom: 20px;
}

.vt-benefit-item p {
    color: var(--vt-gray);
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 140%;
    text-align: justify;
}

.vt-benefits-img-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    z-index: 1;
}

.vt-benefits-img-col img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    flex: 1;
    object-fit: cover;
}

.vt-benefits-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), #141314, #141314);
    border-radius: 20px;
    z-index: 2;
    pointer-events: none;
}

/* Override: ensure image rows stack vertically inside the functional benefits column */
.vt-benefits-wrapper .vt-benefits-images {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
}
.vt-benefits-wrapper .vt-benefits-img-row {
    display: flex !important;
    gap: 12px !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.vt-benefits-wrapper .vt-benefits-img-row img {
    flex: 1 1 0 !important;
    width: auto !important;
    height: 88px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
}

@media (max-width: 768px) {
    .vt-benefits-wrapper .vt-benefits-img-row img { height: 72px !important; }
    .vt-benefits-wrapper .vt-benefits-img-row img:nth-child(n) { flex: 0 0 50% !important; }
}

@media (max-width: 992px) {
    .vt-benefits-track { width: auto; }
    .vt-benefits-slide { width: 100%; flex: 0 0 100%; }
}

/* Benefits Section */
.vt-benefits-wrapper {
    border-radius: 20px;
    background: linear-gradient(to bottom, rgba(20, 20, 20, 0.5), rgba(33, 33, 33, 0.5));
    padding: 32px;
}

@media (min-width: 768px) {
    .vt-benefits-wrapper {
        padding: 30px;
    }
}

/* Section Styles */
.vt-section {
    position: relative;
    padding: 80px 16px;
}

@media (min-width: 768px) {
    .vt-section {
        padding: 90px 32px;
    }
    .vt-section2{
        padding-top: 0px !important;
    }
}

.vt-section-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin-bottom: 60px;
}

.vt-section-title {
    font-family: 'Satoshi', sans-serif;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -1.5px;
    background: var(--gradient-hero);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.vt-section-title1 {
    font-family: 'Satoshi', sans-serif;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -1.1px;
    background: var(--gradient-hero);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@media (max-width: 390px) {
    .vt-section-title {
        font-size: 22px;
    }
    .vt-section-title1 {
        font-size: 30px !important;
    }

    .vt-section{
        padding-top: 0px !important;
    }

    .vt-section-subtitle{
        font-size: 14px !important;
    }

    .vt-pain-bento{
        padding: 0px !important;
        background: none !important;
    }

    .vt-pain-column .vt-pain-points-grid .vt-pain-col-left{
        background: none !important;
    }
}

@media (min-width: 768px) {
    .vt-section-title1 {
        font-size: 48px;
    }
}

@media (min-width: 992px) {
    .vt-section-title {
        font-size: 60px;
    }
    .vt-section-title1 {
        font-size: 60px;
    }
}

.vt-section-subtitle {
    color: var(--vt-gray);
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    line-height: 140%;
    max-width: 905px;
}

@media (min-width: 768px) and (max-width: 900px){
    .vt-section-subtitle {
        font-size: 20px;
    }
    .vt-hero-title{
        font-size: 42px !important;
        max-width: 850px;
    }
    .vt-about-row1{
        flex-direction: column;
        align-items: flex-start;
    }
    .vt-section-content h2{
        font-size: 48px !important;
    }
    .vt-about-hero {
        padding-top: 40px;
        padding-bottom: 30px;
        display: grid;
        gap: 40px;
    }
    .vt-about-row2 {
        padding: 0 30px;
    }
}

/* Desktop-only utilities to force one-line or two-line presentation */
@media (min-width: 992px) {
    .vt-one-line-desktop {
        white-space: nowrap;
        overflow-wrap: normal;
    }

    .vt-two-line-desktop {
        /* 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-desktop {
        max-width: 1300px; /* forces wrapping to two lines at 80px font-size */
    }

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

    .vt-meet-title.vt-one-line-desktop {
        white-space: nowrap; /* keep the meet title on a single line */
        display: inline-block;
    }
}

/* Pain Points Section (lines 387-636)*/
/* Bento outer box with blurred dark background */
.vt-pain-bento {
    position: relative;
    padding: 10px;
    border-radius: 32px;
    background: rgba(26, 26, 26, 1);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.35);
    overflow: hidden;
    min-height: 975px; /* allow bento to grow but provide a sensible desktop minimum */
}

/* Grid: keep three equal columns; equal spacing for rows and columns */
.vt-pain-points-grid {
        --pain-gap: 10px;
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* equal width columns so all cards have same width */
        gap: var(--pain-gap); /* equal spacing between rows and columns */
        row-gap: var(--pain-gap); /* explicit vertical spacing between rows (desktop) */
        column-gap: var(--pain-gap); /* explicit horizontal spacing between columns */
        align-items: stretch; /* make columns equal height */
        position: relative; /* above pseudo bg */
        z-index: 1;
        min-height: 955px;
}

/* Stack cards inside each column and add vertical gap between them */
.vt-pain-column {
    display: grid;
    gap: 10px;
    height: 100%; /* ensure each column fills the grid height */
}

/* Column-specific row proportions (fractions approximate requested percentages) */
.vt-pain-column.vt-pain-col-left {
    /* 3 rows, total gaps = 2 * --pain-gap */
    grid-template-rows: 
        calc((100% - 2 * var(--pain-gap)) * 0.4) 
        calc((100% - 2 * var(--pain-gap)) * 0.5) 
        calc((100% - 2 * var(--pain-gap)) * 0.1);
}
.vt-pain-column.vt-pain-col-center {
    /* 2 rows, total gaps = 1 * --pain-gap */
    grid-template-rows: 
        calc((50% - 2 * var(--pain-gap)) * 0.5) 
        calc((50% - 2 * var(--pain-gap)) * 0.5);
}
.vt-pain-column.vt-pain-col-right {
    /* 3 rows, total gaps = 2 * --pain-gap */
    grid-template-rows: 
        calc((100% - 2 * var(--pain-gap)) * 0.15) 
        calc((100% - 2 * var(--pain-gap)) * 0.45) 
        calc((100% - 2 * var(--pain-gap)) * 0.4);
}
.vt-pain-points-grid .vt-pain-card {
    align-self: stretch;
    width: 100%;
}

/* Ensure each card fills its assigned grid row (tracks) inside a column */
.vt-pain-column > .vt-pain-card {
  min-height: 0; /* allow grid to size down properly */
  box-sizing: border-box;
}

/* Center column cards: keep same width as others, but taller (rectangular) */
.vt-pain-col-center .vt-pain-card {
  width: 100%;
  aspect-ratio: auto;
  min-height: 420px; /* larger height to make rectangular shape on desktop */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.25rem;
  border-radius: 24px;
  overflow: hidden;
}

/* If center card contains an image, ensure it fits the taller rectangle */
.vt-pain-card-large .vt-img-opacity {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 0.75rem;
}

/* Responsive: stack to single column on small screens, keep consistent widths and reduce center heights */
@media (max-width: 991.98px) {
  .vt-pain-points-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
      height: auto; /* allow grid to grow with stacked columns on small screens */
  }

    /* revert column grid behavior on small screens to stack naturally */
    .vt-pain-column {
        display: flex;
        flex-direction: column;
        gap: 16px;
        height: auto; /* let columns size to their stacked content on small screens */
    }
    .vt-pain-bento {
        max-height: none;
        overflow: visible;
        height: auto; /* ensure bento expands to fit stacked content */
        min-height: 0;
    }
    /* On tablet and smaller, keep the bento inside the normal container width */
    .vt-pain-bento {
        margin: 0;
        padding: 10px;
        box-sizing: border-box;
    }

    /* Cards should size to content on small screens */
    .vt-pain-column > .vt-pain-card {
        height: auto;
        min-height: 0;
    }

  .vt-pain-col-center .vt-pain-card {
    min-height: 180px; /* reduced height on smaller screens */
    padding: 0.9rem;
  }

  .vt-pain-card-large .vt-img-opacity {
    height: 120px;
    object-fit: cover;
    margin-bottom: 0.5rem;
  }

}

img.vt-img-opacity.vt-first-image{
    object-fit: contain;
}

/* Card Styles */
.vt-pain-card {
    border-radius: 24px;
    border: 1px solid var(--vt-border);
    overflow: hidden;
    background: rgba(20, 20, 20, 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px;
    position: relative;
    transition: transform 0.2s ease;
}

.vt-pain-card-gradient{
    background: linear-gradient(210.71deg, #141414 59.07%, #220C37 85.22%);
    height: 468px;
    gap:95px;
}

.vt-pain-card-gradient1{
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(3.75deg, #141414 38.8%, #220C37 96.93%);
}

.vt-pain-card-gradient2{
    background: linear-gradient(166.34deg, #141414 55.25%, #220C37 98.35%);
}

.vt-pain-card-gradient3{
    background: linear-gradient(158.77deg, #141414 54.71%, #220C37 85.69%);
}

/* Large Card (Coordination Nightmare) */
.vt-pain-card-large {
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px;
    border-radius: 24px;
    background: linear-gradient(3.75deg, #141414 38.8%, #220C37 96.93%);
}

.vt-pain-card-large img {
    width: 100%;
    height: 184px;
    object-fit: cover;
    border-radius: 20px 20px 0 0;
    margin-bottom: 16px;
}

/* Purple Cards (Time Thief, Miscommunication Tax) */
.vt-pain-card-purple {
    background: linear-gradient(135deg, rgba(40, 10, 60, 0.8), rgba(20, 5, 30, 0.8));
}

/* Dark Cards (Budget Blackhole, Secure Transactions) */
.vt-pain-card-dark {
    background: linear-gradient(180deg, #141414 0%, #212121 100%);
}

/* Specific background for the first left pain card (requested) */
.vt-pain-card-bg1 {
    background: url("../images/home-pain-points/card1_background.webp");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 100%;
}

/* Hide the inline image on larger screens to avoid duplicate visuals; show on small screens */
.vt-pain-card-bg1 img { display: none; }
@media (max-width: 991.98px) {
    .vt-pain-card-bg1 img { display: block; }
}

.vt-pain-card-bg2 {
    background: url("../images/home-pain-points/miscomm_tax.webp");
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat;
    height: 100%;
}
.vt-pain-card-bg{
    background: rgba(20, 20, 20, 1);
}
/* Hide the inline image on larger screens to avoid duplicate visuals; show on small screens */
.vt-pain-card-bg2 img { display: none; }
@media (max-width: 991.98px) {
    .vt-pain-card-bg2 img { display: block; }
}

/* Icon Wrapper for all cards */
.vt-icon-wrapper {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 8px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

/* Price Tag for Budget Blackhole */
.vt-price-tag {
    background: #1A1A1A;
    color: white;
    font-weight: bold;
    font-size: 20px;
    padding: 8px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Content Area */
.vt-pain-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    padding-bottom: 40px;
}

/* Headings */
.vt-pain-card h3 {
    color: white;
    font-family: 'Satoshi', sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 150%;
    margin: 0;
}

@media (min-width: 768px) {
    .vt-pain-card h3 {
        font-size: 28px;
    }
}

/* Paragraphs */
.vt-pain-card p {
    color: var(--vt-gray);
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 140%;
    margin: 0;
    max-width: 80%;
}

@media (min-width: 768px) {
    .vt-pain-card p {
        font-size: 18px;
    }
}

/* Responsive adjustments for large cards */
@media (max-width: 991px) {
    .vt-pain-card-large {
        grid-row: span 1;
    }
}

/* Image handling for pain cards: show images by default and make them responsive */
.vt-pain-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}

.vt-pain-card-large img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin-top: -18px;
}

/* Desktop-specific styling for two referenced pain images */
@media (min-width: 992px) {
    /* small circular pill for card1_column1.webp */
    .vt-pain-col-left img[src*="card1_column1.webp"] {
        width: 64px;
        height: 64px;
        display: block;
        object-fit: cover;
        background: rgba(255, 255, 255, 0.1);
        border: 8px solid rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(12px);
        border-radius: 500px;
        opacity: 1;
        margin: 0 auto 16px;
    }

    /* larger rectangular image for card2_column1.webp */
    .vt-pain-col-left img[src*="card2_column1.webp"] {
        width: 330.6666564941406px;
        height: 184px;
        display: block;
        object-fit: cover;
        opacity: 1;
        margin: 0 auto 16px;
        margin-top: -40px;
    }
}

.vt-pain-card .vt-img-small,
.vt-pain-card .vt-img-opacity {
    opacity: 1;
    height: auto;
}

/* Meet VisualTake Section */
.vt-meet-section {
    position: relative;
    height: 600px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media(max-width:390px){
    .vt-meet-section {
        height: 376px !important;
    }
    .vt-meet-overlay{
        background: radial-gradient(47.17% 47.17% at 50% 50%, rgba(0, 0, 0, 0.6) 0%, #0B0B0B 100%) !important;
    }
    .vt-meet-content{
        padding: 0 !important;
    }
    .vt-meet-title.vt-one-line-desktop{
        font-size: 30px !important;
    }
    .vt-meet-subtitle{
        font-size: 12px !important;
    }
}

@media (min-width: 768px) {
    .vt-meet-section {
        height: 800px;
    }
}

@media (min-width: 992px) {
    .vt-meet-section {
        height: 1043px;
    }
}

/* Background Image Grid */
.vt-meet-images {
    position: absolute;
    inset: 0;
    display: flex;
    z-index: 1;
}

.vt-meet-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vt-meet-col img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.vt-meet-col img:hover {
    transform: scale(1.02);
}

/* Dark Overlay */
.vt-meet-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(30% 30% at 40% 40%, rgba(0, 0, 0, 0.695) 0%, #0B0B0B 100%);
    z-index: 2;
}

@media (min-width: 768px) {
    .vt-meet-overlay{
        background: radial-gradient(47.17% 47.17% at 50% 50%, rgba(0, 0, 0, 0.6) 0%, #0B0B0B 100%) !important;
    }
}

@media (min-width: 992px) {
    .vt-meet-overlay {
        background: radial-gradient(40% 40% at 55% 50%, rgba(0, 0, 0, 0.695) 0%, #0B0B0B 100%);
    }
}
/* Text Content */
.vt-meet-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    max-width: 90%;
    text-align: center;
}

.vt-meet-title {
    font-family: 'Satoshi', sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.5px;
    margin-bottom: 30px;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    max-width: 1000px;
}

@media (min-width: 768px) {
    .vt-meet-title {
        font-size: 48px;
    }
}

@media (min-width: 992px) {
    .vt-meet-title {
        font-size: 60px;
    }
}

/* AI-Native Gradient Text */
.vt-purple-gradient {
    background: rgba(141, 43, 232);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}

/* Subtitle */
.vt-meet-subtitle {
    color: #B3B3B3;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    max-width: 785px;
    margin: 0 auto;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

@media (min-width: 768px) {
    .vt-meet-subtitle {
        font-size: 18px;
    }
}   

/* Comparison Table */
.vt-blur-3 {
    position: absolute;
    right: 15px;
    left: 465px;
    width: 581px;
    height: 639px;
    border-radius: 332px;
    background: linear-gradient(to right, rgba(50, 17, 81, 0.6), rgba(104, 46, 179, 0.6));
    filter: blur(315px);
}
.vt-blur-4 {
    position: absolute;
    right: 5537px;
    left: 1123px;
    width: 388px;
    height: 852px;
    border-radius: 332px;
    background: linear-gradient(to bottom, rgba(50, 17, 81, 0.6), rgba(104, 46, 179, 0.6));
    filter: blur(415px);
}

.vt-comparison-table-wrapper {
    overflow-x: auto;
}

.vt-comparison-table {
    min-width: 1000px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 84px; /* force every row to the same height */
    position: relative; /* for pseudo-element background of 4th column */
}

.vt-comparison-row {
    display: contents;
}

.vt-comparison-cell {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
    color: white;
    font-family: 'Satoshi', sans-serif;
    font-size: 20px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.vt-comparison-header .vt-comparison-cell:nth-child(4) {
    font-size: 26px;
    font-weight: 700;
}

.vt-comparison-header .vt-comparison-cell:not(:nth-child(4)) {
    background: rgba(18, 19, 32, 1);
    font-size: 26px;
    font-weight: 700;
}

.vt-bold {
    font-weight: 700 !important;
}

/* Ensure the first cell of each comparison row is left-aligned */
.vt-comparison-cell:first-child {
    text-align: left; /* fallback for inline content */
    justify-content: flex-start; /* align flex content to left */
    padding-left: 20px; /* add breathing room from the left edge */
}

/* Place a single gradient block behind the 4th column using a pseudo element
   so the column appears as a continuous background rather than per-cell. */
.vt-comparison-table::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 75%;
    width: 25%;
    background: linear-gradient(200.42deg, #844FFC 13.57%, #491EB8 98.35%);
    z-index: 0;
    border-top-left-radius: 20px; /* top-left corner of the 4th column */
    border-bottom-left-radius: 20px; /* bottom-left corner of the 4th column */
    border-top-right-radius: 20px; /* top-right corner of the 4th column */
    border-bottom-right-radius: 20px; /* bottom-right corner of the 4th column */
}

/* Ensure cells render above the pseudo background */
.vt-comparison-cell {
    position: relative;
    z-index: 1;
}

/* Platform Comparison */
.vt-platform-comparison {
    border-radius: 20px;
    overflow: hidden;
}

.vt-platform-card {
    border: 1px solid var(--vt-border);
    padding: 50px 20px 20px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(166.34deg, #141414 55.25%, #262626 98.35%);
}

.vt-platform-card-highlight {
    background: rgba(96, 38, 198, 0.2);
}

.vt-platform-card img {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.vt-platform-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0 20px;
}

.vt-platform-card-content h3 {
    color: white;
    font-family: 'Satoshi', sans-serif;
    font-size: 28px;
    font-weight: 500;
    line-height: 150%;
}

.vt-platform-card-content p {
    color: var(--vt-gray);
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    line-height: 140%;
}

@media(max-width: 390px){
    .vt-platform-card-content h3 {
        font-size: 20px !important;
        font-weight: 500;
    }
    .vt-platform-card-content p {
        font-size: 14px !important;
    }
    .vt-win-card{
        padding: 5 !important;
    }
}
/* Make platform comparison columns equal height on tablet/mobile */
@media (max-width: 991.98px) {
    .vt-platform-comparison .row { align-items: stretch; }
    .vt-platform-card { height: 100%; display: flex; flex-direction: column; justify-content: center; }
}

/* Features Table */
.vt-features-table-wrapper {
    overflow-x: auto;
}

.vt-features-table {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #0F0F0F;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 120px; /* make all feature table rows equal height */
}

/* Desktop-specific fixed sizing for the features matrix */
@media (min-width: 992px) {
    .vt-features-table {
        grid-template-columns: repeat(3, 440px);
        grid-auto-rows: 87px;
    }
    .vt-features-cell {
        align-items: center;
    }
}

.vt-features-row {
    display: contents;
}

.vt-features-cell {
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    font-family: 'Satoshi', sans-serif;
    font-size: 18px;
    display: flex;
    align-items: center;
}

.vt-features-header .vt-features-cell {
    background: #9747FF;
    font-weight: 700;
    font-size: 22px;
}

.vt-features-row:nth-child(even) .vt-features-cell {
        background: rgba(255, 255, 255, 0.02);
}

/* Make savings cells on even rows slightly more transparent than the default */
.vt-features-row:nth-child(even) .vt-features-savings {
    background: rgba(0, 142, 59, 0.12) !important;
}

.vt-features-savings {
    background: rgba(0, 142, 59, 0.2) !important;
}

/* Make savings cells on even rows slightly more transparent than the default */
.vt-features-row:nth-child(even) .vt-features-savings {
    background: rgba(0, 142, 59, 0.12) !important;
}

/* Integrated Platforms */
.vt-platform-integrated {
    display: flex;
    flex-direction: column;
    gap: 65px;
}

/* Integrated Platforms: 30px gap between columns on tablet+desktop, center columns on small screens */
@media (min-width: 577px) {
    .vt-platform-integrated {
        margin: 0 15px; /* left+right 15px → 30px total gap between the two columns */
    }
}

@media (max-width: 576px) {
    .vt-platform-integrated {
        margin: 0 auto 20px; /* center each column on small screens */
        max-width: 540px;
        display: grid;
        justify-content: center;
    }
}

.vt-platform-preview {
    position: relative;
    width: 610px;
    height: 445px;
    border-radius: 40px;
    background: linear-gradient(180deg, rgba(250, 250, 250, 0.06) 0%, rgba(250, 250, 250, 0) 100%);
    backdrop-filter: blur(60px);
    padding: 18px 20px 18px 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vt-platform-preview-celegram {
    display: flex;
    align-items: center;
    justify-content: center;
    
}

.vt-celegram-mockup {
    filter: drop-shadow(0 2px 100px rgba(23, 132, 73, 0.1));
    position: relative;
    z-index: 10;
}

.vt-platform-preview vt-platform-preview-celegram {
    position: relative;
}

.vt-platform-preview vt-platform-preview-celegram::before {
    content: "";
    position: absolute;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 5), transparent);
}

.vt-platform-preview vt-platform-preview-celegram img.vt-celegram-mockup {
    position: relative;
    z-index: 1;
}

.vt-platform-preview-movycart {
    position: relative;
}

.vt-movycart-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
}

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

/* Responsive: make preview full-width and ensure images fit nicely on tablet/mobile */
@media (max-width: 991.98px) {
    .vt-platform-preview {
        width: 100%;
        height: auto;
        padding: 12px;
        border-radius: 20px;
    }

    .vt-platform-preview img {
        height: 100%;
        max-width: 100%;
        object-fit: cover;
        display: block;
        border-radius: 40px;
        margin-top: -45px;
    }

    .vt-movycart-overlay,
    .vt-movycart-bg {
        width: 100%;
        object-fit: cover !important;
        margin-top: -50px;
    }
}

@media (max-width: 760px) {
    .vt-celegram-mockup {
        width: fit-content;
        height: 100%;
        max-width: 100%;
        object-fit: cover;
        display: block;
        border-radius: 40px;
        margin-top: -45px;
    }
}

.vt-platform-badge span {
    padding-left: 20px;
    color: white;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
}

.vt-platform-badge svg {
    margin-left: 8px;
}

.vt-platform-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.vt-platform-info h3 {
    color: white;
    font-family: 'Satoshi', sans-serif;
    font-size: 50px;
    font-weight: 700;
    line-height: 70px;
}

.vt-platform-info p {
    color: var(--vt-gray);
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    line-height: 140%;
}

/* === Responsive Design === */
@media (max-width: 1024px) {
    .vt-platform-preview {
        width: 500px;
        height: 360px;
        padding: 15px 16px;
    }

    .vt-platform-info h3 {
        font-size: 40px;
        line-height: 56px;
    }

    .vt-platform-info p {
        font-size: 16px;
    }

    .vt-platform-badge span {
        font-size: 18px;
    }
}

@media (max-width: 768px) {
    .col-lg-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .vt-platform-preview {
        width: 400px;
        height: 300px;
        padding: 12px 14px;
    }

    .vt-platform-info h3 {
        font-size: 32px;
        line-height: 44px;
    }

    .vt-platform-info p {
        font-size: 14px;
    }

    .vt-platform-badge span {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .vt-platform-preview {
        width: 320px;
        height: 240px;
        padding: 10px 12px;
    }

    .vt-platform-info h3 {
        font-size: 28px;
        line-height: 38px;
    }

    .vt-platform-info p {
        font-size: 14px;
    }

    .vt-platform-badge span {
        font-size: 14px;
    }

    .vt-platform-badge svg {
    height: 40%;
    width: 30%;
    margin-left: 4px;
}
}

/* Role Cards */
/* Slider Wrapper */
.vt-role-slider-wrapper {
    position: relative;
    overflow: hidden;
    padding: 0 20px; 
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.vt-role-slider-wrapper::-webkit-scrollbar {
    display: none;
}
/* Slider Container */
.vt-role-slider {
    display: flex;
    gap: 20px;
    width: auto;
    position: relative;
    will-change: transform;
    transition: transform 0.6s ease;
    cursor: grab; /* show draggable cursor when over the slider */
}

/* Role Card Base Style */
.vt-role-card {
    border-radius: 24px;
    border: 1px solid var(--vt-border);
    padding: 24px;
    background: linear-gradient(to bottom right, rgba(20, 20, 20, 1), rgba(34, 34, 34, 1));
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    opacity: 1 !important;
    visibility: visible !important;
    gap:24px;
    min-width: 100%;
    max-width: 100%;
    min-height: auto;
}

/* Hover Effect */
.vt-role-card: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);
}

/* Card Title */
.vt-role-card h3 {
    color: white;
    font-family: 'Satoshi', sans-serif;
    font-size: 28px !important;
    font-weight: 500;
    line-height: 150%;
    text-align: center;
    margin-bottom: 8px;
}

@media (min-width: 768px) {
    .vt-role-card h3 {
        font-size: 28px;
    }
}

/* Content Area */
.vt-role-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.vt-role-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vt-role-item h4 {
    color: white;
    font-family: 'Satoshi', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
}

.vt-role-item p {
    color: var(--vt-gray);
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
}

@media(max-width: 390px){
    .vt-role-item p{
        font-size: 12px !important;
    }
    .vt-role-card h4{
        font-size: 16px !important;
    }
    .vt-role-card h3{
        font-size: 20px !important;
    }
    .vt-role-card{
        height: content;
    }
    .vt-role-content{
        padding-bottom: 0 !important;
    }
}

/* Dots Indicator */
.slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: background 0.2s;
}

.slider-dot.active {
    background: white;
}

/* Responsive Card Width */
@media (min-width: 992px) {
    .vt-role-card {
        flex: 0 0 calc(33.333% - 13px);
        min-width: 0;
    }
    .vt-role-slider {
        width: auto;
        overflow: visible;
    }
}

@media (min-width: 577px) and (max-width: 992px) {
    .vt-role-card {
        flex: 0 0 calc(50% - 9px);
        min-width: 0;
        min-height: 420px;
    }
    .vt-role-slider {
        width: auto;
        overflow: visible;
    }
}

@media (max-width: 576px) {
    .vt-role-card {
        flex: 0 0 100%;
    }
    .vt-role-slider {
        width: 100%;
        overflow: visible;
    }
    .vt-role-card h3 {
        margin-bottom: 8px; /* Even tighter on mobile */
    }
    .vt-role-content {
        gap: 12px;
    }
}

/* Mobile: allow vertical page scroll when touching the slider (pan-y = only vertical scroll handled by browser) */
@media (max-width: 768px) {
    .vt-role-slider-wrapper,
    .vt-role-slider,
    .vt-role-card {
        touch-action: pan-y;
    }
}

/* Why VisualTake Wins */
.vt-wins-grid {
    display: grid;
    grid-template-columns: 1fr;
    box-sizing: border-box;
}

/* Justify paragraph text inside wins grid and benefit cards */
.vt-wins-grid p,
.vt-benefit-item p,
.vt-wins-column p {
    text-align: left;
}

@media(max-width: 390px){
    .vt-benefit-item h3{
        font-size: 18px !important;
    }
    .vt-benefit-item p{
        font-size: 12px !important;
        width: 280px !important;
    }
    .vt-benefit-list{
        width: 311px !important;
    }
    .vt-benefits-wrapper{
        padding: 20px !important;
    }
    .vt-benefits-wrapper .vt-benefits-images {
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important;
        height: 291px !important;
    }

    /* Play button: reduce inner size and border for small screens */
    .vt-play-btn {
        border-width: 4px;
    }
    .vt-play-btn-inner {
        width: 43px !important;
        height: 43px !important;
    }

    .vt-hero-play-btn {
        width: 72px;
        height: 72px;
        padding: 5px;
    }
    .vt-hero-play-btn svg {
        width: 22px;
        height: 26px;
        margin-left: 3px;
    }

    /* Make each benefits slide full width on small screens so transform works per-slide */
    .vt-benefits-track {
        width: 100% !important;
        transition: transform 0.5s ease !important;
    }
    .vt-benefits-slide {
        width: 100% !important;
        flex: 0 0 100% !important;
        padding: 12px 0 !important;
    }

    /* Smaller dots and center alignment */
    .slider-dots-small .dot {
        width: 6px;
        height: 6px;
    }
    .slider-dots-small .dot.active {
        width: 12px;
        height: 6px;
    }
    .slider-dots-small {
        display: flex;
        gap: 6px;
        justify-content: center; /* center dots on very small screens */
        margin-top: 10px;
    }
}

/* Desktop: 3 columns with controlled widths and fixed layout height so percentage row heights resolve predictably */
@media (min-width: 992px) {
    .vt-wins-grid {
        grid-template-columns: 33% 34% 30%;
        gap: 20px;
        column-gap: 20px; /* ensure equal horizontal gap between columns */
        row-gap: 24px;
        /* prefer a flexible minimum height so layout can grow and percentages resolve predictably */
        min-height: 520px;
        align-items: stretch;
        margin-bottom: 40px; /* ensure spacing so next section won't overlap */
    }

    /* Make sure the navbar collapse display override elsewhere remains intact */
    #vtNavbar {
        display: flex;
        align-items: center;
        gap: 1.5rem;
    }

    .vt-wins-column {
        display: flex;
        flex-direction: column;
        gap: 20px;
        height: 100%;
        margin: 0; /* remove any accidental column margins so grid gaps are uniform */
    }

     /* Assign proportional flex values so stacked cards share column height
         in the intended 40/35/25 split. Using flex ensures consistent pixel math
         across columns (avoids differing '100% - gaps' calc issues). */
     .vt-wins-col-left > .vt-win-card:nth-child(1) { flex: 40 1 0%; }
     .vt-wins-col-left > .vt-win-card:nth-child(2) { flex: 35 1 0%; }
     .vt-wins-col-left > .vt-win-card:nth-child(3) { flex: 25 1 0%; }
    }

    /* Center column: two rows 40% / 60% */
    .vt-wins-col-center {
        /* center column: two stacked cards; use flex proportions 40/60 */
        grid-template-rows: none;
    }

    .vt-wins-col-center > .vt-win-card:nth-child(2) { flex: 60 1 0%; }

    /* Right column: single card fills 100% of column height */
    .vt-wins-col-right {
        grid-template-rows: none;
    }

    .vt-wins-col-right > .vt-win-card { flex: 1 1 0%; }

    /* Make the large/regular cards behave inside the column (remove previous grid-column based layout) */
    .vt-win-card, .vt-win-card-large, .vt-win-card-primary {
        grid-column: auto !important;
        border-radius: 16px;
    }
    .vt-win-card-large h3{
        font-size: 24px !important;
    }
    /* Desktop: reduce gap between nav items inside the ul */
    .vt-navbar .navbar-nav {
        gap: 0rem;
    }

    /* Remove right padding/margin for the logo anchor on desktop so it sits flush */
    .vt-navbar .navbar-brand.vt-nav-link {
        padding-right: 0 !important;
        margin-right: 0 !important;
    }

    /* Full card: internal split - image 60%, content 40% */
    .vt-win-card-full {
        display: grid;
        grid-template-rows: 60% 40%;
        padding: 30px 21px !important;
        overflow: hidden;
        border-radius: 16px;
    }

    .vt-win-card-full img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: 16px 16px 16px 16px; /* ensure top corners are rounded on desktop */
    }
    
    .vt-win-full-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 12px;
        
    }

    .vt-win-card h3 {
        margin: 0 0 6px 0;
        font-family: 'Satoshi', sans-serif;
    }

    .vt-wins-column h3 {
        font-size: 24px !important;
    }

    @media(max-width: 390px){
        .vt-win-card h3{
            font-size: 18px !important ;
        }
        .vt-win-card p{
            font-size: 12px !important ;
        }
    }

/* Ensure sensible stacking and spacing on smaller screens */
@media (max-width: 991.98px) {
    .vt-wins-grid {
        grid-template-columns: 1fr;
        height: auto;
        gap: 12px;
        padding: 0 16px;
        box-sizing: border-box;
    }

    .vt-win-card-large img{
        height: -webkit-fill-available;
        object-fit: cover;
        border-radius: 16px;
    }

    .vt-wins-column {
        display: grid; /* use grid so `gap` applies between cards */
        gap: 12px;
        height: auto;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
    }

    .vt-wins-column > .vt-win-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        margin: 0;
    }

    .vt-win-card-full {
        display: block;
    }

    .vt-win-card-full img {
        width: 100%;
        height: auto;
    }

    .vt-win-full-content {
        padding: 10px;
    }
}

/* Tablet breakpoint: two-column layout inspired by vt-pain-bento stacking */
@media (min-width: 577px) and (max-width: 991.98px) {
    .vt-wins-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        min-height: auto;
        margin-bottom: 32px;
    }

    /* Place left column in column 1, center in column 2, right spans both below */
    .vt-wins-col-left {
        grid-column: 1;
        display: flex;
        flex-direction: column;
        gap: 16px;
        height: auto;
    }
    .vt-wins-col-center {
        grid-column: 2;
        display: flex;
        flex-direction: column;
        gap: 16px;
        height: auto;
    }
    .vt-wins-col-right {
        grid-column: 1 / -1; /* span both columns */
        display: flex;
        flex-direction: column;
        gap: 16px;
        height: auto;
    }

    /* Cards should size to content on tablet (no fixed column row percentages) */
    .vt-wins-column > .vt-win-card {
        height: auto;
        min-height: 0;
    }

    /* Full card image: give a fixed comfortable height on tablet */
    .vt-win-card-full img {
        height: 260px;
        object-fit: cover;
        display: block;
        width: 100%;
    }

    .vt-win-card {
        padding: 24px;
        font-family: 'Satoshi', sans-serif;
    }
}

/* Mobile breakpoint: single-column layout */
@media (max-width: 576.98px) {
    .vt-wins-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        height: auto;
        padding: 0 16px;
        box-sizing: border-box;
    }

    .vt-wins-column {
        display: flex;
        flex-direction: column;
        gap: 12px;
        height: auto;
    }

    /* ensure columns match grid width on mobile */
    .vt-wins-column { 
        /* make the column's visual width match the grid content width exactly */
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0;
        margin: 0;
        align-self: stretch;
    }

    .vt-wins-column > .vt-win-card {
        height: auto;
        min-height: 0;
    }

    .vt-win-card {
        padding: 20px;
    }

    .vt-win-card-full img {
        height: 200px;
        object-fit: cover;
        width: 100%;
    }
}

/* Restore original card padding, hover and theme-consistent gaps */
.vt-win-card {
    border-radius: 24px;
    border: 1px solid var(--vt-border);
    padding: 40px 30px;
    background: linear-gradient(to bottom right, var(--vt-card-bg), #222);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    box-sizing: border-box;
}

/* Primary win card: use the requested purple gradient */
.vt-win-card-primary {
    background: linear-gradient(200.42deg, #844FFC 13.57%, #491EB8 98.35%);
}

@media (min-width: 768px) {
    .vt-win-card {
        padding: 40px;
        font-family: 'Satoshi', sans-serif;
    }
}

.navbar-collapse{
    flex-grow: 0.5;
}
/* Custom responsive fixes requested by user */
@media (min-width: 992px) {
    /* remove paddings/margins from collapse navbar on desktop */
    #vtNavbar {
        padding: 0 !important;
        margin: 0 !important;
    }
    .vt-navbar .collapse.navbar-collapse { padding: 0 !important; margin: 0 !important; }
}

/* Dropdown menu styles to match navbar */
.dropdown-menu {
    background: #2b2b2c;
    border: none;
    border-radius: 8px;
    padding: 8px 0;
    box-shadow: none;
}

.dropdown-item {
    color: rgba(255, 255, 255, 0.6) !important;
    padding: 8px 20px;
    transition: color 0.3s;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: white !important;
    background: transparent !important;
}

.dropdown-item.active,
.dropdown-item:active {
    color: white !important;
    background: transparent !important;
}

/* Ensure dropdown items maintain original color when selected */
.navbar .dropdown-menu .dropdown-item:active,
.navbar .dropdown-menu .dropdown-item.active,
.navbar .dropdown-menu .dropdown-item:visited,
.navbar .dropdown-menu .dropdown-item:focus {
    color: white !important;
}
.nav-link{
    transition: none;
}
/* Ensure the dropdown toggle maintains color when active */
.navbar .nav-link.dropdown-toggle:active,
.navbar .nav-link.dropdown-toggle.active {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Ensure the dropdown toggle maintains color when showing (dropdown open) */
.navbar .nav-link.dropdown-toggle.show {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Pain bento: responsive card/image behavior and hide specified cards on tablet/mobile */
@media (max-width: 991.98px) {
    .vt-pain-card { width: 100%; height: auto; min-height: 0; }
    .vt-pain-card img, .vt-pain-card .vt-img-opacity { width: 100%; height: auto; object-fit: cover; display: block; }
    /* hide specified cards on responsive: 3rd in left column and 1st in right column */
    .vt-pain-col-left > .vt-pain-card:nth-child(3),
    .vt-pain-col-right > .vt-pain-card:nth-child(1) { display: none !important; }
    .vt-pain-bento { margin:0; padding:10px; box-sizing:border-box; overflow: visible; }
}

@media (max-width: 576.98px) {
        .vt-pain-column .vt-pain-card img { height: 120px; }
        .vt-pain-col-center .vt-pain-card img { height: auto; }
}

/* Ensure center and right column images start from top border of their cards */
.vt-pain-col-center .vt-pain-card img,
.vt-pain-col-right .vt-pain-card img {
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
}

/* Reduce the small left-column circular image on tablet/mobile */
@media (max-width: 991.98px) {
    .vt-pain-col-left img[src*="card1_column1.webp"] {
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 576.98px) {
    .vt-pain-col-left img[src*="card1_column1.webp"] {
        width: 52px;
        height: 52px;
    }
}


/* Platform comparison: pill background for icons and responsive sizing */
.vt-platform-card-image{
    background: rgba(255,255,255,1);
    width: 136px;
    height: 65px;
    border-radius: 100px;
    object-fit: contain;
    display: block;
    margin: 0 auto 12px;
}

.vt-platform-card img {
    width: 100%;
    height: inherit;
    margin-bottom: 20px;
}

.image-1 {
    object-fit: scale-down;
    display: block;
}

.image-2 {
    object-fit: scale-down;
    display: block;
}

.image-3 {
    object-fit: scale-down;
    display: block;
}

@media (max-width: 991.98px) {
    .vt-platform-card-image { width: 110px; height: 52px; padding: 6px 16px; align-items: center; justify-content: center; }
    .image-1, .image-2, .image-3 {
        object-fit: scale-down;
        display: block;
        height: 32px !important;
    }
}
@media (max-width: 576.98px) {
    .vt-platform-card-image { width: 90px; height: 44px; padding: 6px 12px; align-items: center; justify-content: center; }
    .image-1, .image-2, .image-3 {
        object-fit: scale-down;
        display: block;
    }
}

/* Make sure platform previews are not clipped on small screens and Celegram mockup is fully visible */ 
.vt-platform-preview { overflow: visible; }
.vt-platform-preview-celegram .vt-celegram-mockup { max-width: 100%; height: auto; display: block; object-fit: contain; }

/* Footer */
.vt-footer {
    position: static !important;
    background: rgba(0, 0, 0, 0.26);
    padding: 80px 16px;
}

@media (min-width: 768px) {
    .vt-footer {
        padding: 80px 32px;
    }
}

@media (max-width: 390px){
    .vt-footer h3{
        font-size: 18px !important ;
    }
    .vt-footer h4 a{
        font-size: 16px !important ;
    }
    .vt-footer h4{
        font-size: 16px !important ;
    }
    .vt-footer p{
        font-size: 14px !important ;
    }
    .vt-footer a{
        font-size: 14px !important ;
    }
    .vt-footer-copyright{
        font-size: 16px !important ;
    }
}
/* Footer: distribute first-row columns across the full width so
   leftmost and rightmost columns sit at the extremes */
.vt-footer .row.g-4.mb-4 {
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

@media (min-width: 992px) {
    .col-lg-3 {
        flex: 0 0 auto;
        width: auto;
        padding-right: 0 !important;
    }
}

@media (min-width: 768px) {
    .col-lg-3 {
        flex: 0 0 auto;
        width: auto;
        padding-right: 0 !important;
    }
}

/* Make the footer container span the full viewport width on small screens
   so the footer row matches the responsive screen width */
@media (max-width: 991.98px) {
    .vt-footer > .container {
        max-width: 100%;
        padding-left: 16px;
        padding-right: 16px;
        width: 100%;
        display: block;
        justify-items: anchor-center;
    }

    /* Keep the two 'col-lg-2' columns side-by-side on tablet/mobile */
    .vt-footer .col-lg-2 {
        flex: 0 0 50%;
        max-width: 55%;
    }
}

body {
    overflow-y: auto !important;
}

/* Critical: iOS Safari fix — prevent "rubber band" clipping */
@media screen and (max-width: 1024px) {
    body {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
}

@media (max-width: 575.98px) {
    .vt-footer .col-lg-2 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

.vt-footer-company {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 280px;
}

.vt-footer-company h3 {
    color: white;
    font-family: 'Satoshi', sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 140%;
}

.vt-footer-company p {
    color: #999;
    font-family: 'Satoshi', sans-serif;
    font-size: 18px;
    line-height: 140%;
}

.vt-footer-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vt-footer-links h4 {
    color: white;
    font-family: 'Satoshi', sans-serif;
    font-size: 24px;
    line-height: 140%;
    margin-bottom: 8px;
}

.vt-footer-links h4 a {
    color: white;
    text-decoration: none;
    font-size: 24px;
}
.vt-footer-links h4 a:hover {
    opacity: 0.9;
}

.vt-footer-links a {
    color: #999;
    font-family: 'Satoshi', sans-serif;
    font-size: 18px;
    line-height: 140%;
    text-decoration: none;
    transition: color 0.3s;
}

.vt-footer-links a:hover {
    color: white;
}

.vt-footer-social {
    width: 100%;
}

@media (min-width: 992px) {
    .vt-footer-social {
        width: 281px;
    }
}

.vt-social-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 14px;
    background: white;
    border: none;
    transition: background 0.3s;
    margin-bottom: 10px;
    text-decoration: none;
}

.vt-social-btn:hover {
    background: #f0f0f0;
}

.vt-social-icon {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vt-social-btn span {
    color: black;
    font-family: 'Satoshi', sans-serif;
    font-size: 18px;
}

.vt-qr-code {
    border-radius: 14px;
    background: #1F1F1F;
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.vt-qr-code img {
    width: 110px;
    height: 110px;
}

.vt-qr-code p {
    color: white;
    font-family: 'Satoshi', sans-serif;
    font-size: 16px;
    text-align: center;
    line-height: 140%;
}

.vt-footer-copyright {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    color: #999;
    font-family: 'Satoshi', sans-serif;
    font-size: 18px;
    justify-content: space-between;
}

/* Left side: copyright text */
.vt-footer-copyright > div:first-child {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* Social Icons Container */
.social-icons {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: 14px;
    flex-wrap: wrap;
}

/* "Connect @" label */
.social-icons > span:first-child {
    white-space: nowrap;
}

/* Each Icon Wrapper */
.socialmedia-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
}

/* Ensure SVG scales correctly */
.socialmedia-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Desktop: Change social media icon size to 20x20 */
@media (min-width: 992px) {
    .socialmedia-icon {
        width: 20px;
        height: 20px;
    }
}

/* Mobile & Tablet: copyright layout - keep first two items (copyright + dot)
   on the first line and site name on the second line */
@media (max-width: 991.98px) {
    .vt-footer-copyright {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }
    
    .vt-footer-copyright span:nth-child(3) {
        order: 2;
        flex-basis: 100%;
    }
}

/* Responsive behavior on small screens */
@media (max-width: 768px) {
    .vt-footer-copyright {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .vt-footer-copyright > div:first-child,
    .social-icons {
        justify-content: center;
    }

    .vt-footer-copyright .social-icons {
        display: flex;
        flex-direction: column;
    }
}

/* Animations */
.vt-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.vt-section.vt-visible {
    opacity: 1;
}

/* Hero top padding: 16px desktop, reduced on smaller screens */

@media (min-width: 768px) and (max-width: 991.98px) {
  .vt-hero-section {
    padding-top: 200px;
  }
}

@media (max-width: 767.98px) {
  .vt-hero-section {
    padding-top: 200px;
  }
}

/* Small-screen floating nav panel and backdrop */
@media (max-width: 991px) {
  /* Make the collapse a centered floating window when opened */
  #vtNavbar {
        position: fixed;
        left: 50%;
        top: 12vh;
        transform: translate(-50%, -12%);
        width: calc(100% - 32px);
        max-width: 350px;
        background: #010101;
        padding: 16px;
        border-radius: 12px;
        box-shadow: 0 20px 50px rgba(0,0,0,0.25);
        z-index: 1050;
        display: flex !important; /* keep fixed positioning; control visibility with opacity/visibility */
        flex-direction: column;
        align-items: stretch;
        visibility: hidden;
        opacity: 0;
        transition: transform 0.35s ease, opacity 0.35s ease, visibility 0.35s;
  }

  /* When Bootstrap adds .show to the collapse, display panel and show backdrop */
    #vtNavbar.show {
        visibility: visible;
        opacity: 1;
        left: 0;
        top: 0;
        transform: none;
        width: 100%;
        padding-top: 60px;
        max-width: none;
        height: 100vh;
    }
  /* a full-screen dim backdrop using pseudo-element on the shown panel */
  #vtNavbar.show::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1040; /* below the panel */
  }

  /* Close button align inside panel */
  #vtNavbar .collapse-close {
    align-self: flex-end;
  }

  /* Center nav items and make them stacked for better visibility */
  #vtNavbar .navbar-nav {
        flex-direction: column;
        gap: 8px;
        align-items: flex-end;
        margin: 0;
        padding: 0;
  }

    /* Collapsed panel: white text on light background as requested */
    #vtNavbar .vt-nav-link {
        color: #ffffff;
    }
    #vtNavbar .vt-nav-link:hover {
        color: #ffffff;
        opacity: 0.9;
    }
    #vtNavbar .vt-btn-primary {
        width: 85%;
        justify-content: center;
        color: #ffffff;
    }

        /* Style the Sign In link inside the collapsed header-cta to match the CTA button shape */
        #vtNavbar .header-cta a.vt-nav-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 8px 24px;
            border-radius: 8px;
            width: 100%;
            border: 1px solid rgba(103, 37, 179, 0.991);
            background: transparent;
            color: #ffffff;
            text-decoration: none;
        }

    /* Mobile CTA styling inside panel: align to right and reduce gap */
    #vtNavbar .header-cta {
        justify-content: flex-end;
        gap: 8px;
        align-items: flex-end;
    }

  /* Hide desktop CTA on small screens (we already added d-none d-lg-flex, but keep fallback) */
  .header-cta.d-lg-flex,
  .header-cta.d-none {
    display: none !important;
  }

  /* Ensure brand + toggler always remain above backdrop */
  .vt-navbar .navbar-toggler,
  .vt-navbar .navbar-brand {
    z-index: 1060;
  }
}

.navbar-toggler{
    border: none;
    box-shadow: none;
}

.navbar-toggler:focus{
    border: none;
    box-shadow: none;
}

/* About page */
.vt-hero-section2 {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 233px 16px 90px;
}

.vt-hero-text2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    width: auto;
}

.vt-about-hero {
    width: 100%;
    max-width: 1272px;
    height: auto;
    opacity: 1;
    border-radius: 24px;
    gap: 50px;
    border-width: 1px;
    padding-top: 40px;
    padding-bottom: 30px;
    background: linear-gradient(306.67deg, #141414 27.1%, #220C37 95.47%);
    border: 1px solid var(--vt-border);
}

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

.vt-about-text h3 {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    font-family: 'Satoshi', sans-serif;
}

.vt-about-text p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--vt-gray);
    text-align: justify;
    gap: 20px;;
}

/* Row 1: Text + Image Side-by-Side */
.vt-about-row1 {
    display: flex;
    width: 100%;
    max-width: 1272px;
    height: auto;
    justify-content: space-between;
    opacity: 1;
    padding-right: 30px;
    padding-left: 30px;
    gap: 40px;
}

.vt-about-image {
    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;
}

.native-image {
    border-radius: 16px;
    aspect-ratio: 16/9;
    object-fit: cover;
}

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

.vt-about-row2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    width: 100%;
    padding: 30px 30px 0;
}

.vt-card {
    background: linear-gradient(to bottom right, var(--vt-card-bg), #222);
    border: 1px solid var(--vt-border);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
    font-family: 'Satoshi', sans-serif;
    opacity: 1;
    border-radius: 14px;
}

.vt-card:hover {
    background: linear-gradient(158.77deg, #141414 54.71%, #220C37 85.69%);
}

.vt-card h3 {
    font-size: 28px;
    font-weight: 500;
    line-height: 150%;
    text-align: center;
    color: white;
    font-family: 'Satoshi', sans-serif;
}

.vt-card p {
    font-size: 16px;
    line-height: 140%;
    color: var(--vt-gray);
    text-align: justify;
}

/* Reduce heading width so it remains readable on large overlay images */
.vt-about-section-full .vt-section-content h2 {
    width: 100%;
    max-width: 920px;
}

.vt-section-content {
    height: 210px;
    opacity: 1;
    gap: 30px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.vt-section-content h2 {
    font-family: 'Satoshi', sans-serif;
    font-size: 75px !important;
    font-weight: 700;
    letter-spacing: -1px;
    background: var(--gradient-hero);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.vt-section-content p {
    font-family: 'Poppins', sans-serif;
    font-size: 18px !important;
    line-height: 1.6;
    color: var(--vt-gray);
    width: 800px;
}

.vt-quote-box {
    opacity: 1;
    border-radius: 14px;
    padding: 30px;
    width: fit-content;
    position: relative;
    z-index: 3;
    gap: 24px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    margin-top: -40px;
    border: 1px solid var(--vt-border);
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(174px);
}

.vt-quote-box p {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--vt-gray);
    margin: 0;
}

/* Make section content span the full overlay area */
.vt-about-section-full .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;
}

.vt-section-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        linear-gradient(99.22deg, rgba(0, 0, 0, 0) 47.95%, #250D43 94.14%);
    z-index: 1;
}

.vt-about-section-full .vt-section-overlay {
    border-radius: 0 !important; /* remove border radius specifically for about page */
    margin-bottom: 0 !important; /* remove the gap to quote box */
    height: 424px; /* leave room for quote box */
}

.vt-about-section-full .vt-section-overlay img {
    width: 100%;
    object-fit: cover;
    display: block;
    height: 100%;
}

.vt-about-section-full{
    padding-left: 0 !important; /* remove padding for full-width about section */
    padding-right: 0 !important; /* remove padding for full-width about section */
    min-height: auto;
    position: relative;
}

/* Ensure overlay image exactly matches overlay height and block layout */
.vt-about-section-full .vt-section-overlay img {
    display: block;
    height: 100%;
    width: 100% !important;
    object-fit: cover;
}

.vt-section-main-content {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.vt-section-main-content img {
    width: 100%;
    min-height: 381px;
    opacity: 1;
    top: 1309.47px;
    object-fit: cover;
    filter: brightness(0.6);
}

/* === Responsive Adjustments === */
@media (max-width: 767px) {
    .vt-about-row1 {
        gap: 20px;
    }
    .vt-about-row2{
        padding: 0 30px 30px;
    }

    .vt-about-image {
        height: auto;
    }

    .vt-card {
        padding: 20px;
    }

    .vt-card h3 {
        font-size: 22px;
    }

    .vt-section-content {
        max-width: 90%;
        padding: 16px;
    }

    .vt-section-content p {
        font-size: 14px !important;
        max-width:fit-content;
        padding: 5px;
    }

    .vt-about-section-full .vt-quote-box {
        margin-top:-30px;
        border-radius: 14px;
        margin-bottom: 90px; /* add space below quote box on mobile */
        width: 80% ;
        padding: 10px;
    }

    .vt-section-main-content img{
        min-height: 281px;
    }
}

@media (max-width: 480px) {
    .vt-hero-section2 {
        padding: 180px 16px 90px;
    }
    .vt-about-hero {
        padding: 20px 0 0;
        border: none;
    }

    .vt-about-row1 {
        flex-direction: column;
        gap: 20px;
        padding: 0 20px 20px;
    }
    .vt-about-text p {
        margin-bottom: 0 !important;
        text-align: left;
    }
    .vt-about-text h3 {
        font-size: 20px;
    }
    .vt-about-section-full .vt-quote-box {
        position: relative;
        z-index: 3;
        height: fit-content;
    }
    .vt-card {
        padding: 16px;
    }

    .vt-card h3 {
        font-size: 20px;
    }
    .vt-section-content{
        gap:3px
    }
    .vt-section-content h2 {
        font-size: 30px !important;
        line-height: 1.2;
    }

    .vt-section-content p {
        font-size: 12px !important;
    }

    .vt-quote-box p {
        font-size: 12px;
    }
}

@media (min-width: 992px) {
    .vt-section-content h2 {
        font-size: 60px;
        line-height: 1.2;
    }
    .vt-two-line-desktop2 {
        /* limit width so content wraps to two lines on desktop */
        white-space: normal;
        display: inline-block;
        overflow-wrap: normal;
        width: 760px !important;
    }

    .vt-about-hero {
        padding-top: 40px;
        padding-bottom: 30px;
        gap: 50px;
    }

    .vt-hero-title.vt-two-line-desktop2 {
        max-width: 1300px !important; /* forces wrapping to two lines at 80px font-size */
    }
}

@media(max-width:992px){
    .vt-about-section-full .vt-section-overlay img {
        height: 360px !important;
        width: 100% !important;
        object-fit: cover;
        transform: translateY(-0px); /* can tweak if you want it pulled further up */
        object-position: top center;
    }

    /* Keep the overlay container matching the image height */
    .vt-about-section-full .vt-section-overlay {
        height: 300px;
        overflow: hidden;
    }
}
@media (min-width: 768px) {
    .vt-about-section-full{
        padding: 80px 32px;
    }
     .vt-about-section-full .vt-section-overlay {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .vt-about-section-full .vt-section-content {
        max-width: 92%;
        padding: 8px 12px;
    }
    .vt-about-text h3 {
        font-size: 32px;
        padding-top: 12px;
    }
    .vt-about-text p {
        font-size: 18px;
    }
    .vt-about-image {
        height: auto;
    }
    .vt-card {
        padding-top: 24px;
        padding-right: 30px;
        padding-bottom: 40px;
        padding-left: 30px;
        gap: 24px;
    }
    .vt-card h3 {
        font-size: 28px;
    }
    .vt-card p {
        font-size: 16px;
    }

    .vt-about-section-full .vt-quote-box p {
        font-size: 16px;
    }
}

/* Desktop-specific hero split-line styling for about page (matches screenshot) */
@media (min-width: 992px) {
    .vt-hero-title2.vt-two-line-desktop2 {
        text-align: center;
        display: block;
        max-width: 1000px;
        margin: 0 auto 8px;
    }
    .vt-hero-title2.vt-two-line-desktop2 .vt-hero-line1 {
        color: rgba(255,255,255,0.28);
        font-size: 36px;
        font-weight: 600;
        display: block;
        line-height: 1.1;
    }
    .vt-hero-title2.vt-two-line-desktop2 .vt-hero-line2 {
        color: white;
        font-size: 56px;
        font-weight: 700;
        display: block;
        line-height: 1.02;
        letter-spacing: -1px;
    }

    /* About section: fix overall height and allow quote box to overlap into content */
    .vt-about-section-full {
        min-height: 470px;
    }
    .vt-section-main-content {
        height: 470px;
        overflow: hidden;
    }
}

/* Tablet and mobile: keep about-section responsive and remove overlap */
@media (max-width: 991px) {
    .vt-about-section-full {
        min-height: auto;
        padding-left: 0 !important;
        padding-right: 0 !important;
        border-bottom: 90px;
    }
    .vt-section-main-content {
        height: auto;
    }
    .vt-hero-title2.vt-two-line-desktop2 .vt-hero-line1 {
        font-size: 22px;
        color: rgba(255,255,255,0.5);
    }
    .vt-hero-title2.vt-two-line-desktop2 .vt-hero-line2 {
        font-size: 34px;
    }
}

/* Future Section-FAQ */
.future-section {
    padding: 80px 0;
    background: url('https://via.placeholder.com/1200x400') no-repeat center center;
    background-size: cover;
    position: relative;
}

.future-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
}

.future-section .container {
    position: relative;
    z-index: 1;
}

.future-section h2 {
    font-size: 3rem;
    margin-bottom: 20px;
    text-align: center;
    color: #fff;
}

.future-section p {
    font-size: 1rem;
    margin-bottom: 30px;
    text-align: center;
    color: #ddd;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.quote-box {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    border: 1px solid var(--vt-border);
}

.quote-box p {
    font-size: 1.1rem;
    font-style: italic;
    color: #fff;
}

/* Responsive Design */
@media (max-width: 768px) {
    .faq-container {
        flex-direction: column;
    }
    
    .faq-sidebar {
        width: 100%;
    }
    
    .faq-content {
        width: 100%;
    }
    
    .future-section h2 {
        font-size: 2rem;
    }
}

@media (min-width: 768px) and (max-width: 900px){
    .vt-hero-title5 {
        letter-spacing: -1px;
        line-height: 1;
        max-width: 650px;
    }
    .vt-hero-line1 {
        font-size: 32px;
    }
    .vt-hero-line2 {
        font-size: 50px;
    }
    .vt-section-title.vt-two-line-desktop2 {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    max-width: 600px !important;
    margin: 0 auto;
}
    .vt-footer-copyright {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }

    .social-icons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-right: 14px;
    flex-wrap: wrap;
}

.vt-celegram-mockup{
    width: -webkit-fill-available !important;
    margin-top: auto !important;
}

    .vt-movycart-overlay{
        margin-top: auto !important;
    }

  .vt-platform-badge {
    top: 510px !important;
    width: 75px;
    height: 35px;
  }

   .vt-section-content p {
        font-size: 14px !important;
        max-width: fit-content;
        padding: 5px;
    }

}

/* === Integrated Platforms — Enhanced Preview Design === */

.vt-platform-integrated {
  position: relative;
  /* Ensure badge stays within column bounds */
}

.vt-platform-badge {
  position: absolute;
  top: 460px;
  z-index: 2;
  align-self: flex-start;
  display: flex;
  align-items: center;
  width: 101px;
  height: 51px;
  border-radius: 24px;
  border: 1px solid white;
  background: rgba(0, 0, 0, 0.5);
}

.vt-platform-preview {
  position: relative;
  width: 100%;
  max-width: 610px;
  height: auto;
  min-height: 445px;
  border-radius: 40px;
  background:linear-gradient(180deg, rgba(250, 250, 250, 0.06) 0%, rgba(250, 250, 250, 0) 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Vignette overlay behind content */
.vt-preview-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(10, 10, 15, 0.7) 0%,
    rgba(5, 5, 8, 0.95) 70%,
    transparent 100%
  );
  z-index: 0;
}

/* Mockup images — ensure they’re centered and not stretched */
.vt-celegram-mockup,
.vt-movycart-overlay {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 90%;
  object-fit: contain;
  filter: drop-shadow(0 10px 40px rgba(0, 0, 0, 0.3));
}

/* For Movycart: laptop mockup should be slightly smaller than phone */
.vt-platform-preview-movycart .vt-movycart-overlay {
  max-height: 80%;
  border-radius: 24px;
}

/* Responsive: reduce size on smaller screens */
@media (max-width: 992px) {
  .vt-platform-preview {
    min-height: 380px;
    padding: 12px;
  }
  .vt-celegram-mockup {
    max-height: 85%;
  }
}

@media (max-width: 767px) {
  .vt-platform-preview {
    min-height: 320px;
  }
  .vt-platform-badge {
    top: 335px;
    width: 75px;
    height: 35px;
  }
}

.navbar .nav-link.dropdown-toggle:active,
.navbar .nav-link.dropdown-toggle.active,
.navbar .nav-link.dropdown-toggle.show {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Ensure dropdown toggles keep correct color in all states */
.vt-nav-link.dropdown-toggle:focus,
.vt-nav-link.dropdown-toggle:focus-visible,
.vt-nav-link.dropdown-toggle:active,
.vt-nav-link.dropdown-toggle:hover {
  color: rgba(255, 255, 255, 0.6) !important;
}

.vt-nav-link.dropdown-toggle.show,
.vt-nav-link.dropdown-toggle[aria-expanded="true"] {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Explicitly override Bootstrap's focus ring & color */
.navbar .nav-link.dropdown-toggle:focus {
  outline: none !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

.nav-link:focus, .nav-link:hover{
    color: rgba(255, 255, 255, 0.6) !important;
}

.vt-role-slider-wrapper {
  touch-action: auto; /* Allows vertical scroll, blocks horizontal pan */
}