/*==================================================
    VALENTINO X — ABOUT PAGE (additional styles)
    Load AFTER css/style.css
==================================================*/

/*==================================================
    PAGE HERO / BANNER
==================================================*/
.vx-page-hero{
    position:relative;
    min-height:60vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:#0B0B0B;
    /* Hard floor so content never collides with the fixed navbar,
       even on short viewports where 60vh isn't very tall. */
    padding-top:120px;
}

.vx-page-hero-bg{
    position:absolute;
    inset:0;
    background-image:url('../img/hero-1.jpg');
    background-size:cover;
    background-position:center;
    animation:vxZoom 12s linear infinite alternate;
}

.vx-page-hero-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(180deg, rgba(12,1,32,.75) 0%, rgba(12,1,32,.55) 45%, rgba(11,11,11,.96) 100%);
}

/* Floating ambient shapes — pure CSS, no scroll/hover needed */
.vx-hero-shape{
    position:absolute;
    z-index:1;
    border-radius:50%;
    pointer-events:none;
    background:radial-gradient(circle, rgba(212,175,55,.22) 0%, rgba(212,175,55,0) 70%);
    animation:vxDrift 10s ease-in-out infinite;
}
.vx-hero-shape-1{ width:260px; height:260px; top:-60px; left:6%; animation-duration:11s; }
.vx-hero-shape-2{ width:180px; height:180px; bottom:-40px; right:10%; animation-duration:9s; animation-delay:1.2s; }
.vx-hero-shape-3{ width:120px; height:120px; top:30%; right:26%; animation-duration:13s; animation-delay:.6s; }

@keyframes vxDrift{
    0%,100%{ transform:translateY(0) translateX(0); }
    50%{ transform:translateY(-22px) translateX(14px); }
}

.vx-page-hero-content{
    position:relative;
    z-index:2;
    width:100%;
    text-align:center;
    padding:20px 20px 60px;
}

.vx-breadcrumb{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    font-family:Poppins,sans-serif;
    font-size:13px;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--vx-text,#ececec);
    opacity:.7;
    margin-bottom:20px;
}

.vx-breadcrumb a{ color:var(--vx-text,#ececec); text-decoration:none; transition:.3s; }
.vx-breadcrumb a:hover{ color:var(--vx-purple); }
.vx-breadcrumb i{ font-size:10px; opacity:.6; }
.vx-breadcrumb span{ color:var(--vx-purple); }

.vx-page-hero-content h1{
    font-family:'Playfair Display', serif;
    font-weight:700;
    color:#fff;
    font-size:56px;
    line-height:1.15;
    margin-bottom:18px;
}

.vx-page-hero-content p{
    max-width:560px;
    margin:0 auto;
    font-family:Poppins,sans-serif;
    color:var(--vx-text,#ececec);
    opacity:.8;
    font-size:16px;
    line-height:1.85;
}

@media (max-width:767px){
    .vx-page-hero{ min-height:48vh; padding-top:95px; }
    .vx-page-hero-content h1{ font-size:34px; }
    .vx-page-hero-content{ padding:20px 20px 45px; }
}

/*==================================================
    JOURNEY / MILESTONES TIMELINE
==================================================*/
.vx-timeline-section{
    background:#0B0B0B;
    padding:0 0 110px;
}

.vx-timeline{
    display:flex;
    justify-content:space-between;
    gap:20px;
    max-width:1140px;
    margin:0 auto;
    padding:0 15px;
    position:relative;
}

.vx-timeline::before{
    content:"";
    position:absolute;
    top:11px;
    left:6%;
    right:6%;
    height:2px;
    background:linear-gradient(90deg, rgba(212,175,55,0) 0%, rgba(212,175,55,.5) 15%, rgba(212,175,55,.5) 85%, rgba(212,175,55,0) 100%);
}

.vx-timeline-item{
    position:relative;
    flex:1;
    text-align:center;
    min-width:150px;
}

.vx-timeline-dot{
    width:24px;
    height:24px;
    margin:0 auto 22px;
    border-radius:50%;
    background:var(--vx-dark);
    border:2px solid var(--vx-purple);
    position:relative;
    z-index:2;
}

.vx-timeline-dot::after{
    content:"";
    position:absolute;
    inset:5px;
    border-radius:50%;
    background:var(--vx-purple);
    animation:vxPulseDot 2.2s ease-in-out infinite;
}

@keyframes vxPulseDot{
    0%,100%{ transform:scale(.85); opacity:.8; }
    50%{ transform:scale(1.25); opacity:1; }
}

.vx-timeline-year{
    display:block;
    font-family:'Playfair Display', serif;
    color:var(--vx-purple);
    font-weight:700;
    font-size:19px;
    margin-bottom:8px;
}

.vx-timeline-text{
    font-family:Poppins,sans-serif;
    color:var(--vx-text,#ececec);
    font-size:13.5px;
    line-height:1.7;
    opacity:.8;
    max-width:210px;
    margin:0 auto;
}

.vx-timeline-item:nth-child(1).in-view{ transition-delay:.05s; }
.vx-timeline-item:nth-child(2).in-view{ transition-delay:.2s; }
.vx-timeline-item:nth-child(3).in-view{ transition-delay:.35s; }
.vx-timeline-item:nth-child(4).in-view{ transition-delay:.5s; }

@media (max-width:767px){
    .vx-timeline{ flex-direction:column; gap:36px; }
    .vx-timeline::before{ top:0; bottom:0; left:11px; right:auto; width:2px; height:auto; background:linear-gradient(180deg, rgba(212,175,55,0) 0%, rgba(212,175,55,.5) 15%, rgba(212,175,55,.5) 85%, rgba(212,175,55,0) 100%); }
    .vx-timeline-item{ display:flex; align-items:flex-start; gap:18px; text-align:left; }
    .vx-timeline-dot{ margin:2px 0 0; flex:0 0 24px; }
    .vx-timeline-text{ max-width:100%; }
}

/*==================================================
    MISSION & VISION
==================================================*/
.vx-mv-section{
    background:#0b0b0b;
    padding:0 0 110px;
    position:relative;
}

.vx-mv-grid{
    display:flex;
    gap:35px;
    flex-wrap:wrap;
}

.vx-mv-card{
    flex:1;
    min-width:280px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(212,175,55,.18);
    border-radius:18px;
    padding:48px 40px;
    backdrop-filter:blur(10px);
    transition:.4s;
    position:relative;
    overflow:hidden;
}

.vx-mv-card:hover{
    transform:translateY(-8px);
    border-color:var(--vx-purple);
    box-shadow:0 25px 50px rgba(0,0,0,.4);
}

.vx-mv-icon{
    width:64px;
    height:64px;
    border-radius:50%;
    background:rgba(212,175,55,.12);
    border:1px solid rgba(212,175,55,.4);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:26px;
    animation:vxFloat 5s ease-in-out infinite;
}

.vx-mv-card:nth-child(2) .vx-mv-icon{ animation-delay:.6s; }

.vx-mv-icon i{
    color:var(--vx-purple);
    font-size:24px;
}

.vx-mv-card h3{
    font-family:'Playfair Display', serif;
    color:#fff;
    font-size:26px;
    font-weight:700;
    margin-bottom:16px;
}

.vx-mv-card p{
    font-family:Poppins,sans-serif;
    color:var(--vx-text,#ececec);
    font-size:15px;
    line-height:1.9;
    opacity:.8;
    margin:0;
}

/*==================================================
    CTA — FULL BLEED, ANIMATED
==================================================*/
.vx-cta{
    position:relative;
    min-height:480px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    text-align:center;
}

.vx-cta-bg{
    position:absolute;
    inset:0;
    background-image:url('../img/hero-4.jpg');
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
    animation:vxZoom 14s linear infinite alternate;
}

@media (max-width:768px){
    .vx-cta-bg{ background-attachment:scroll; }
}

.vx-cta-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(180deg, rgba(12,1,32,.88) 0%, rgba(12,1,32,.72) 50%, rgba(12,1,32,.9) 100%);
}

/* Floating particles for ambient motion */
.vx-cta-particle{
    position:absolute;
    z-index:1;
    border-radius:50%;
    background:var(--vx-purple);
    opacity:.35;
    pointer-events:none;
    animation:vxParticleFloat 7s ease-in-out infinite;
}
.vx-cta-p1{ width:10px; height:10px; top:20%; left:12%; animation-duration:8s; }
.vx-cta-p2{ width:6px; height:6px; top:65%; left:22%; animation-duration:6s; animation-delay:.8s; }
.vx-cta-p3{ width:14px; height:14px; top:30%; right:15%; animation-duration:9s; animation-delay:1.4s; }
.vx-cta-p4{ width:8px; height:8px; top:70%; right:10%; animation-duration:7s; animation-delay:.4s; }
.vx-cta-p5{ width:5px; height:5px; top:45%; left:48%; animation-duration:6.5s; animation-delay:1.8s; }

@keyframes vxParticleFloat{
    0%,100%{ transform:translateY(0) scale(1); opacity:.25; }
    50%{ transform:translateY(-30px) scale(1.4); opacity:.6; }
}

.vx-cta-content{
    position:relative;
    z-index:2;
    max-width:640px;
    padding:60px 20px;
}

.vx-cta-content .vx-eyebrow{ justify-content:center; }

.vx-cta-content h2{
    font-family:'Playfair Display', serif;
    color:#fff;
    font-weight:700;
    font-size:44px;
    line-height:1.2;
    margin-bottom:20px;
}

.vx-cta-content p{
    font-family:Poppins,sans-serif;
    color:var(--vx-text,#ececec);
    font-size:16px;
    line-height:1.85;
    opacity:.85;
    margin-bottom:36px;
}

@media (max-width:767px){
    .vx-cta{ min-height:400px; }
    .vx-cta-content h2{ font-size:30px; }
}