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

/*==================================================
    PAGE HERO / BANNER
==================================================*/
.vx-page-hero{
    position:relative;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:#0B0B0B;
    padding:150px 0 70px;
}

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

.vx-page-hero-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(180deg, rgba(7,2,18,.92) 0%, rgba(12,1,32,.68) 22%, rgba(12,1,32,.6) 55%, rgba(11,11,11,.97) 100%);
}

/* Extra fade so the fixed, blurred navbar melts into the image
   below it instead of showing a hard edge where the backdrop-blur
   rectangle ends. */
.vx-page-hero::before{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:160px;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(180deg, rgba(6,1,15,.85) 0%, rgba(6,1,15,0) 100%);
}

.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:54px;
    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){
    /* Bumped up from a bare 95px/50px padding (which let the hero's
       height collapse to roughly just the text) to a min-height,
       matching the same recipe the About/Service page heroes use —
       so this hero reads with the same presence on mobile instead
       of feeling noticeably shorter. Kept modest, not full-height. */
    .vx-page-hero{ min-height:48vh; padding:95px 0 50px; }
    .vx-page-hero-content h1{ font-size:32px; }
    .vx-page-hero-content{ padding:20px 20px 30px; }
}

/*==================================================
    QUICK CONNECT STRIP
==================================================*/
.vx-quick-connect{
    background:#0B0B0B;
    padding:0 0 90px;
    position:relative;
    z-index:2;
    /* Was -90px, pulling the cards up to float over the hero's
       bottom edge. Switched to a positive gap so there's real
       breathing room between the hero and the cards on desktop too. */
    margin-top:50px;
}

@media (max-width:767px){
    /* On mobile the hero and the info cards below it were butting
       up against each other with the same -90px pull-up used on
       desktop (where the cards intentionally float over the hero
       edge). On a narrow screen that just reads as "no gap" —
       swapping to a small positive gap instead. */
    .vx-quick-connect{ margin-top:28px; padding:0 0 70px; }
}

.vx-qc-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
}

.vx-qc-card{
    display:block;
    text-align:center;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(212,175,55,.18);
    border-radius:16px;
    padding:34px 18px;
    backdrop-filter:blur(10px);
    transition:.4s;
    text-decoration:none !important;
}

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

.vx-qc-icon{
    width:58px;
    height:58px;
    margin:0 auto 18px;
    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;
    animation:vxFloat 5s ease-in-out infinite;
}

.vx-qc-card:nth-child(2) .vx-qc-icon{ animation-delay:.4s; }
.vx-qc-card:nth-child(3) .vx-qc-icon{ animation-delay:.8s; }
.vx-qc-card:nth-child(4) .vx-qc-icon{ animation-delay:1.2s; }

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

.vx-qc-card h4{
    font-family:'Playfair Display', serif;
    color:#fff;
    font-size:18px;
    font-weight:700;
    margin-bottom:8px;
}

.vx-qc-card p{
    font-family:Poppins,sans-serif;
    color:var(--vx-text,#ececec);
    font-size:13.5px;
    opacity:.8;
    margin:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

.vx-status-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#3ddc84;
    display:inline-block;
    box-shadow:0 0 0 0 rgba(61,220,132,.6);
    animation:vxStatusPulse 1.8s ease-out infinite;
}

.vx-status-dot.vx-status-closed{
    background:#e05a5a;
    box-shadow:0 0 0 0 rgba(224,90,90,.6);
    animation:vxStatusPulseClosed 1.8s ease-out infinite;
}

@keyframes vxStatusPulse{
    0%{ box-shadow:0 0 0 0 rgba(61,220,132,.6); }
    70%{ box-shadow:0 0 0 8px rgba(61,220,132,0); }
    100%{ box-shadow:0 0 0 0 rgba(61,220,132,0); }
}

@keyframes vxStatusPulseClosed{
    0%{ box-shadow:0 0 0 0 rgba(224,90,90,.6); }
    70%{ box-shadow:0 0 0 8px rgba(224,90,90,0); }
    100%{ box-shadow:0 0 0 0 rgba(224,90,90,0); }
}

@media (max-width:991px){
    .vx-qc-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:480px){
    .vx-qc-grid{ grid-template-columns:1fr; }
    .vx-quick-connect{ margin-top:22px; padding-bottom:60px; }
}

/*==================================================
    CONTACT INFO + FORM
==================================================*/
.vx-contact-main{
    position:relative;
    background:#0b0b0b;
    padding:20px 0 110px;
    overflow:hidden;
}

.vx-contact-blob{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    filter:blur(10px);
    background:radial-gradient(circle, rgba(212,175,55,.18) 0%, rgba(212,175,55,0) 70%);
    animation:vxDrift 14s ease-in-out infinite;
    z-index:0;
}
.vx-contact-blob-1{ width:420px; height:420px; top:-10%; left:-8%; animation-duration:16s; }
.vx-contact-blob-2{ width:320px; height:320px; bottom:-12%; right:-6%; animation-duration:13s; animation-delay:1s; }

.vx-contact-main .container{ position:relative; z-index:1; }

.vx-info-list{
    margin-top:36px;
    display:flex;
    flex-direction:column;
    gap:24px;
}

.vx-info-item{
    display:flex;
    align-items:flex-start;
    gap:18px;
}

.vx-info-icon{
    flex:0 0 50px;
    width:50px;
    height:50px;
    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;
    animation:vxFloat 6s ease-in-out infinite;
}

.vx-info-item:nth-child(2) .vx-info-icon{ animation-delay:.5s; }
.vx-info-item:nth-child(3) .vx-info-icon{ animation-delay:1s; }
.vx-info-item:nth-child(4) .vx-info-icon{ animation-delay:1.5s; }

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

.vx-info-item h5{
    font-family:'Playfair Display', serif;
    color:#fff;
    font-size:16px;
    font-weight:700;
    margin-bottom:6px;
}

.vx-info-item p{
    font-family:Poppins,sans-serif;
    color:var(--vx-text,#ececec);
    font-size:14.5px;
    opacity:.8;
    margin:0;
    line-height:1.7;
}

.vx-info-item p a{ color:var(--vx-text,#ececec); text-decoration:none; }
.vx-info-item p a:hover{ color:var(--vx-purple); }

.vx-info-social{ margin-top:32px; }

/* ---- Form Card ---- */
.vx-form-card{
    height:100%;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(212,175,55,.18);
    border-radius:20px;
    padding:48px 42px;
    backdrop-filter:blur(12px);
    transition:.4s;
}

.vx-form-card:hover{ border-color:rgba(212,175,55,.4); }

.vx-form-title{
    font-family:'Playfair Display', serif;
    color:#fff;
    font-size:28px;
    font-weight:700;
    margin-bottom:28px;
}

.vx-contact-form .row{ margin-left:-8px; margin-right:-8px; }
.vx-contact-form .row > div{ padding-left:8px; padding-right:8px; }

.vx-field{ margin-bottom:20px; }

.vx-field label{
    display:block;
    font-family:Poppins,sans-serif;
    font-size:12.5px;
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--vx-purple);
    margin-bottom:8px;
}

.vx-field input,
.vx-field select,
.vx-field textarea{
    width:100%;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.14);
    border-radius:10px;
    padding:14px 16px;
    color:#fff;
    font-family:Poppins,sans-serif;
    font-size:14.5px;
    transition:.3s;
    outline:none;
}

.vx-field input::placeholder,
.vx-field textarea::placeholder{ color:rgba(255,255,255,.35); }

.vx-field input:focus,
.vx-field select:focus,
.vx-field textarea:focus{
    border-color:var(--vx-purple);
    background:rgba(212,175,55,.06);
    box-shadow:0 0 0 3px rgba(212,175,55,.12);
}

.vx-field select{ appearance:none; -webkit-appearance:none; cursor:pointer; }
.vx-field textarea{ resize:vertical; min-height:120px; }

.vx-form-submit{
    border:2px solid var(--vx-purple);
    cursor:pointer;
    gap:12px;
    width:100%;
    margin-top:6px;
}

.vx-form-submit i{ transition:transform .3s ease; }
.vx-form-submit:hover i{ transform:translateX(4px); }

.vx-form-submit.vx-form-sent{
    background:var(--vx-gold-gradient, var(--vx-purple));
    border-color:var(--vx-gold-deep, var(--vx-purple));
    color:var(--vx-dark);
    pointer-events:none;
}

.vx-form-note{
    font-family:Poppins,sans-serif;
    font-size:12.5px;
    color:var(--vx-text,#ececec);
    opacity:.55;
    margin:16px 0 0;
    text-align:center;
    transition:.3s;
}

.vx-form-note.vx-form-note-success{
    opacity:1;
    color:var(--vx-purple);
}

@media (max-width:767px){
    .vx-form-card{ padding:34px 24px; margin-top:36px; }
}

/*==================================================
    MAP
==================================================*/
.vx-map-section{
    background:#0b0b0b;
    padding:0 0 110px;
}

.vx-map-section .section-header{ margin-bottom:40px; }

.vx-map-frame{
    position:relative;
    max-width:1200px;
    margin:0 auto;
    padding:0 15px;
}

.vx-map-frame iframe{
    display:block;
    width:100%;
    border-radius:20px;
    filter:grayscale(45%) contrast(1.1);
    box-shadow:0 30px 70px rgba(0,0,0,.5);
}

.vx-map-card{
    position:absolute;
    top:32px;
    left:32px;
    max-width:280px;
    background:rgba(11,11,11,.85);
    border:1px solid rgba(212,175,55,.3);
    border-radius:16px;
    padding:26px 26px 22px;
    backdrop-filter:blur(12px);
}

.vx-map-pulse{
    position:absolute;
    top:-8px;
    right:-8px;
    width:16px;
    height:16px;
    border-radius:50%;
    background:var(--vx-purple);
    box-shadow:0 0 0 0 rgba(212,175,55,.6);
    animation:vxStatusPulse 2s ease-out infinite;
}

.vx-map-card h5{
    font-family:'Playfair Display', serif;
    color:#fff;
    font-size:17px;
    font-weight:700;
    margin-bottom:8px;
}

.vx-map-card p{
    font-family:Poppins,sans-serif;
    color:var(--vx-text,#ececec);
    font-size:13px;
    opacity:.8;
    line-height:1.6;
    margin-bottom:16px;
}

.vx-map-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--vx-purple) !important;
    font-family:Poppins,sans-serif;
    font-size:13px;
    font-weight:600;
    text-decoration:none !important;
    border-bottom:1px solid rgba(212,175,55,.4);
    padding-bottom:2px;
    transition:.3s;
}

.vx-map-link:hover{ border-color:var(--vx-purple); gap:12px; }

@media (max-width:767px){
    .vx-map-card{
        position:relative;
        top:auto; left:auto;
        max-width:100%;
        margin-top:18px;
    }
    .vx-map-frame iframe{ height:320px !important; }
}

/*==================================================
    FRANCHISE
==================================================*/
.vx-franchise{
    position:relative;
    background:#111111;
    padding:110px 0;
    overflow:hidden;
}

.vx-franchise-shape{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    background:radial-gradient(circle, rgba(212,175,55,.16) 0%, rgba(212,175,55,0) 70%);
    animation:vxDrift 12s ease-in-out infinite;
}
.vx-franchise-shape-1{ width:340px; height:340px; top:-8%; right:-6%; animation-duration:15s; }
.vx-franchise-shape-2{ width:220px; height:220px; bottom:-8%; left:-4%; animation-duration:11s; animation-delay:.8s; }

.vx-franchise .container{ position:relative; z-index:1; }

.vx-franchise-intro{
    max-width:560px;
    margin:14px auto 0;
    text-align:center;
}

.vx-franchise-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    margin:50px 0 46px;
}

.vx-franchise-card{
    background:rgba(255,255,255,.03);
    border:1px solid rgba(212,175,55,.18);
    border-radius:18px;
    padding:38px 28px;
    text-align:center;
    transition:.4s;
}

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

.vx-franchise-card .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:0 auto 22px;
    animation:vxFloat 5s ease-in-out infinite;
}

.vx-franchise-card:nth-child(2) .vx-mv-icon{ animation-delay:.4s; }
.vx-franchise-card:nth-child(3) .vx-mv-icon{ animation-delay:.8s; }
.vx-franchise-card:nth-child(4) .vx-mv-icon{ animation-delay:1.2s; }

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

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

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

.vx-franchise-cta{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    text-align:center;
}

.vx-franchise-cta span{
    font-family:Poppins,sans-serif;
    font-size:13px;
    color:var(--vx-text,#ececec);
    opacity:.6;
}

@media (max-width:991px){
    .vx-franchise-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:480px){
    .vx-franchise-grid{ grid-template-columns:1fr; }
    .vx-franchise{ padding:80px 0; }
}

/*==================================================
    TRUST MARQUEE (continuous auto-scroll)
==================================================*/
.vx-marquee-section{
    background:#0B0B0B;
    border-top:1px solid rgba(212,175,55,.15);
    border-bottom:1px solid rgba(212,175,55,.15);
    padding:22px 0;
    overflow:hidden;
}

.vx-marquee-track{
    display:flex;
    width:max-content;
    animation:vxMarquee 26s linear infinite;
}

.vx-marquee-group{
    display:flex;
    align-items:center;
    flex-shrink:0;
    padding-right:0;
}

.vx-marquee-group span{
    font-family:'Playfair Display', serif;
    font-size:18px;
    color:var(--vx-text,#ececec);
    opacity:.75;
    white-space:nowrap;
    padding:0 14px;
}

.vx-marquee-dot{
    color:var(--vx-purple) !important;
    opacity:1 !important;
    font-size:14px !important;
}

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

.vx-marquee-section:hover .vx-marquee-track{ animation-play-state:running; }

@media (max-width:576px){
    .vx-marquee-group span{ font-size:15px; padding:0 10px; }
}

/*==================================================
    FAQ
==================================================*/
.vx-faq-section{
    background:#0b0b0b;
    padding:110px 0;
}

.vx-faq-list{
    max-width:820px;
    margin:0 auto;
}

.vx-faq-item{
    border-bottom:1px solid rgba(255,255,255,.1);
}

.vx-faq-question{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    background:none;
    border:none;
    text-align:left;
    padding:24px 4px;
    font-family:'Playfair Display', serif;
    font-size:17px;
    font-weight:700;
    color:#fff;
    cursor:pointer;
    transition:.3s;
}

.vx-faq-question:hover{ color:var(--vx-purple); }

.vx-faq-question i{
    flex:0 0 auto;
    color:var(--vx-purple);
    font-size:14px;
    transition:transform .35s ease;
}

.vx-faq-question[aria-expanded="true"] i{ transform:rotate(180deg); }

.vx-faq-item .collapse p,
.vx-faq-item .collapsing p{
    font-family:Poppins,sans-serif;
    color:var(--vx-text,#ececec);
    font-size:14.5px;
    line-height:1.85;
    opacity:.8;
    padding:0 4px 24px;
    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%);
}

.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; }
}