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

/*==================================================
    PAGE HERO / BANNER  (same recipe as about.css)
==================================================*/
.vx-page-hero{
    position:relative;
    min-height:60vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:#0B0B0B;
    padding-top:120px;
}

.vx-page-hero-bg{
    position:absolute;
    inset:0;
    background-image:url('../img/hero-2.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%);
}

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

@keyframes vxZoom{
    0%{ transform:scale(1); }
    100%{ transform:scale(1.12); }
}

.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:600px;
    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:32px; }
    .vx-page-hero-content{ padding:20px 20px 45px; }
}

/*==================================================
    SERVICES SECTION WRAP
==================================================*/
.vx-services-section{
    background:#0b0b0b;
    position:relative;
    padding:90px 0 110px;
    overflow:hidden;
}

/* ambient floating orbs - purely automatic, never need hover */
.vx-svc-orb{
    position:absolute;
    z-index:0;
    border-radius:50%;
    pointer-events:none;
    background:radial-gradient(circle, rgba(212,175,55,.16) 0%, rgba(212,175,55,0) 70%);
    animation:vxDrift 14s ease-in-out infinite;
}
.vx-svc-orb-1{ width:420px; height:420px; top:-120px; left:-140px; animation-duration:16s; }
.vx-svc-orb-2{ width:320px; height:320px; bottom:5%; right:-120px; animation-duration:13s; animation-delay:1s; }
.vx-svc-orb-3{ width:200px; height:200px; top:40%; left:48%; animation-duration:11s; animation-delay:2s; }

/*==================================================
    GENDER TOGGLE  (For Her / For Him)
==================================================*/
.vx-gender-toggle-wrap{
    display:flex;
    justify-content:center;
    margin-bottom:50px;
    position:relative;
    z-index:2;
}

.vx-gender-toggle{
    position:relative;
    display:flex;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(212,175,55,.3);
    border-radius:60px;
    padding:6px;
    backdrop-filter:blur(10px);
    gap:4px;
}

.vx-gender-btn{
    position:relative;
    z-index:2;
    border:none;
    background:transparent;
    padding:14px 38px;
    font-family:Poppins,sans-serif;
    font-weight:600;
    font-size:14.5px;
    letter-spacing:.5px;
    color:var(--vx-text,#ececec);
    opacity:.65;
    cursor:pointer;
    border-radius:60px;
    transition:color .4s ease, opacity .4s ease;
    display:flex;
    align-items:center;
    gap:9px;
    white-space:nowrap;
}

.vx-gender-btn i{ font-size:15px; }

.vx-gender-btn.active{
    color:var(--vx-dark);
    opacity:1;
}

.vx-gender-slider{
    position:absolute;
    z-index:1;
    top:6px;
    left:6px;
    width:calc(50% - 6px);
    height:calc(100% - 12px);
    background:var(--vx-purple);
    border-radius:60px;
    box-shadow:0 10px 30px rgba(212,175,55,.4);
    transition:transform .5s cubic-bezier(.4,0,.2,1);
}

.vx-gender-toggle[data-active="him"] .vx-gender-slider{
    transform:translateX(100%);
}

@media (max-width:480px){
    .vx-gender-btn{ padding:12px 22px; font-size:13px; }
}

/*==================================================
    QUICK SEARCH
==================================================*/
.vx-svc-search-wrap{
    max-width:520px;
    margin:0 auto 55px;
    position:relative;
    z-index:2;
}

.vx-svc-search{
    width:100%;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(212,175,55,.25);
    border-radius:50px;
    padding:16px 26px 16px 50px;
    color:#fff;
    font-family:Poppins,sans-serif;
    font-size:14.5px;
    outline:none;
    transition:.35s;
}
.vx-svc-search::placeholder{ color:var(--vx-text,#ececec); opacity:.45; }
.vx-svc-search:focus{
    border-color:var(--vx-purple);
    background:rgba(212,175,55,.06);
    box-shadow:0 0 0 4px rgba(212,175,55,.1);
}

.vx-svc-search-icon{
    position:absolute;
    left:22px;
    top:50%;
    transform:translateY(-50%);
    color:var(--vx-purple);
    font-size:15px;
    pointer-events:none;
}

.vx-svc-search-clear{
    position:absolute;
    right:20px;
    top:50%;
    transform:translateY(-50%);
    color:var(--vx-text,#ececec);
    opacity:.5;
    background:none;
    border:none;
    cursor:pointer;
    font-size:13px;
    display:none;
}
.vx-svc-search-clear:hover{ opacity:1; color:var(--vx-purple); }

/*==================================================
    CATEGORY PILL NAV (sticky, scrollspy)
==================================================*/
.vx-cat-nav-wrap{
    position:sticky;
    top:0;
    z-index:15;
    background:rgba(11,11,11,.88);
    backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(212,175,55,.14);
    margin-bottom:70px;
    padding:16px 0;
}

.vx-cat-nav{
    display:flex;
    gap:10px;
    overflow-x:auto;
    scrollbar-width:none;
    padding:2px 4px;
}
.vx-cat-nav::-webkit-scrollbar{ display:none; }

.vx-cat-pill{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:8px;
    padding:11px 22px;
    border-radius:40px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.02);
    color:var(--vx-text,#ececec);
    font-family:Poppins,sans-serif;
    font-size:13px;
    font-weight:500;
    letter-spacing:.3px;
    text-decoration:none !important;
    cursor:pointer;
    transition:.35s;
    white-space:nowrap;
}

.vx-cat-pill i{ font-size:12.5px; color:var(--vx-purple); transition:.35s; }

.vx-cat-pill:hover{
    border-color:var(--vx-purple);
    color:#fff;
}

.vx-cat-pill.active{
    background:var(--vx-purple);
    border-color:var(--vx-purple);
    color:var(--vx-dark);
}
.vx-cat-pill.active i{ color:var(--vx-dark); }

/*==================================================
    MENU PANELS
==================================================*/
.vx-menu-panel{
    margin-bottom:90px;
    position:relative;
    z-index:2;
    scroll-margin-top:150px;
}

.vx-menu-panel-head{
    display:flex;
    align-items:center;
    gap:20px;
    margin-bottom:38px;
}

.vx-menu-icon{
    flex:0 0 62px;
    width:62px;
    height:62px;
    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-menu-icon i{ color:var(--vx-purple); font-size:24px; }

.vx-menu-panel-head h2{
    font-family:'Playfair Display', serif;
    color:#fff;
    font-weight:700;
    font-size:30px;
    margin:0 0 4px;
}

.vx-menu-panel-head p{
    font-family:Poppins,sans-serif;
    color:var(--vx-text,#ececec);
    opacity:.65;
    font-size:13.5px;
    margin:0;
}

@keyframes vxFloat{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-10px); }
}

.vx-menu-subhead{
    font-family:Poppins,sans-serif;
    color:var(--vx-purple);
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:12px;
    font-weight:600;
    margin:34px 0 14px;
    opacity:.9;
}
.vx-menu-subhead:first-of-type{ margin-top:0; }

.vx-menu-card{
    background:rgba(255,255,255,.025);
    border:1px solid rgba(212,175,55,.14);
    border-radius:18px;
    padding:38px 42px;
    backdrop-filter:blur(8px);
    transition:border-color .4s ease, background .4s ease;
}
.vx-menu-card:hover{
    border-color:rgba(212,175,55,.35);
    background:rgba(255,255,255,.035);
}

.vx-menu-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:50px;
}

.vx-menu-row{
    display:flex;
    align-items:baseline;
    gap:10px;
    padding:13px 0;
    border-bottom:1px dashed rgba(255,255,255,.08);
    transition:.3s;
}
.vx-menu-row:last-child{ border-bottom:none; }

.vx-menu-row:hover{ padding-left:4px; }
.vx-menu-row:hover .vx-menu-name{ color:var(--vx-purple); }

.vx-menu-name{
    font-family:Poppins,sans-serif;
    color:var(--vx-text,#ececec);
    font-size:14.5px;
    font-weight:500;
    transition:.3s;
    flex:0 0 auto;
}

.vx-menu-dots{
    flex:1 1 auto;
    height:1px;
    align-self:center;
    border-bottom:1px dotted rgba(255,255,255,.2);
    min-width:20px;
}

.vx-menu-price{
    flex:0 0 auto;
    font-family:'Playfair Display', serif;
    color:#fff;
    font-weight:700;
    font-size:15.5px;
    white-space:nowrap;
}

.vx-menu-price .vx-op{
    font-family:Poppins,sans-serif;
    font-weight:400;
    font-size:10.5px;
    color:var(--vx-purple);
    text-transform:uppercase;
    letter-spacing:.5px;
    margin-left:3px;
}

.vx-menu-price.vx-price-request{
    font-family:Poppins,sans-serif;
    font-weight:500;
    font-size:12.5px;
    color:var(--vx-purple);
    opacity:.85;
    text-transform:uppercase;
    letter-spacing:.5px;
}

@media (max-width:767px){
    .vx-menu-grid{ grid-template-columns:1fr; column-gap:0; }
    .vx-menu-card{ padding:28px 22px; }
    .vx-menu-panel-head h2{ font-size:24px; }
    .vx-menu-icon{ width:52px; height:52px; flex-basis:52px; }
    .vx-menu-icon i{ font-size:20px; }
}

/* hide rows/panels filtered out by search */
.vx-hidden{ display:none !important; }

.vx-no-results{
    text-align:center;
    padding:60px 20px;
    color:var(--vx-text,#ececec);
    opacity:.6;
    font-family:Poppins,sans-serif;
    font-size:15px;
}
.vx-no-results i{ display:block; font-size:34px; color:var(--vx-purple); margin-bottom:16px; opacity:.7; }

/*==================================================
    NOTE STRIP
==================================================*/
.vx-svc-note{
    max-width:820px;
    margin:0 auto 60px;
    text-align:center;
    font-family:Poppins,sans-serif;
    font-size:13px;
    color:var(--vx-text,#ececec);
    opacity:.55;
    line-height:1.8;
    position:relative;
    z-index:2;
}
.vx-svc-note strong{ color:var(--vx-purple); opacity:1; }

/*==================================================
    CTA — FULL BLEED, ANIMATED (same recipe as about.css)
==================================================*/
.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-3.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; }
}