@font-face {
font-family: 'CalSans';
src: url('../polices/CalSans-Regular.ttf') format('truetype');
font-weight: normal;
font-display: swap;
}
@font-face {
font-family: 'Quicksand';
src: url('../polices/Quicksand-VariableFont_wght.ttf') format('truetype');
font-weight: 100 900;
font-display: swap;
}

/* ══════════════════════════════════
VARIABLES & BASE
══════════════════════════════════ */
:root {
--brand:         #8300A8;
--brand-light:   #a500d4;
--brand-subtle:  rgba(131,0,168,.08);
--brand-border:  rgba(131,0,168,.2);
--brand-glow:    rgba(131,0,168,.35);
--dark:          #05000a;
--dark-2:        #151515;
--dark-3:        #1e1e1e;
--white:         #ffffff;
--bg:            #ffffff;
--text:          #1a1a1a;
--text-muted:    #666;
--text-light:    rgba(255,255,255,.72);
--r:             12px;
--r-lg:          20px;
--font-title:    'CalSans', Georgia, serif;
--font-body:     'Quicksand', sans-serif;
--ease:          cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.75;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; object-fit: cover; }
a { color: var(--brand); text-decoration: none; transition: color .2s; }
a:hover { color: var(--brand-light); }
select, textarea,input { font-family: 'Quicksand', sans-serif; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.section { padding: 6rem 0; }
.calltoaction {
padding: 12px 25px;
margin: 0 auto;
display: block;
width: 100%;
max-width: 500px;
text-align: center;
text-transform: uppercase;
font-weight: 800;
background: linear-gradient(270deg, #8300A8, #D342FF, #8300A8);
background-size: 200% 200%;
color: white;
border: none;
border-radius: 9999px;
cursor: pointer;
font-size: 20px;
font-family: 'Quicksand', sans-serif;
animation: gradientMove 3s linear infinite;
transition: transform 0.2s ease;
}
.calltoaction:hover {
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
background: #F9B0FF;
color: black;
transform: scale(1.05);
transition: transform 0.2s ease;
}
@keyframes gradientMove {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}


/* ══════════════════════════════════
SCROLL REVEAL
══════════════════════════════════ */
.reveal {
opacity: 0;
transform: translateY(32px);
transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }

/* ══════════════════════════════════
HERO — photo plein écran
══════════════════════════════════ */
.hero {
    position: relative;
    height: 75vh; 
    min-height: 200px;
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: flex-start;
    background-color: #05000a;
}
.hero-bg {
    position: absolute; 
    inset: 0;
    overflow: hidden;
    z-index: 0;
}
.hero-overlay {
    position: absolute; 
    inset: 0;
    background: linear-gradient(135deg, rgba(5,0,10,0.8) 0%, rgba(20,0,30,0.4) 50%, rgba(5,0,10,0.8) 100%);
    z-index: 1;
}
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(20px);
    opacity: 0;
    animation: floatBlob infinite alternate ease-in-out;
}
.blob-1 {
    width: 5vw; 
    height: 5vw;
    background-color: #a72879;
    top: 10%; 
    left: 20%;
    animation-duration: 4s;
}
.blob-2 {
    width: 3vw; 
    height: 3vw;
    background-color: #4a00e0; 
    bottom: 15%; 
    right: 25%;
    animation-duration: 5s;
    animation-delay: -1s;
}
.blob-3 {
    width: 4vw; 
    height: 4vw;
    background-color: #8e2de2; 
    top: 50%; 
    left: 60%;
    animation-duration: 6s;
    animation-delay: -2s;
}
.blob-4 {
    width: 4vw; 
    height: 4vw;
    background-color: #8e2de2; 
    top: 80%; 
    left: 40%;
    animation-duration: 4s;
    animation-delay: -5s;
}
.blob-5 {
    width: 3vw; 
    height: 3vw;
    background-color: #8e2de2; 
    top: 70%; 
    left: 10%;
    animation-duration: 3s;
    animation-delay: -2s;
}
.blob-6 {
    width: 2vw; 
    height: 2vw;
    background-color: #8e2de2; 
    top: 70%; 
    left: 50%;
    animation-duration: 4s;
    animation-delay: -4s;
}
@keyframes floatBlob {
    0% {
        transform: translate(0, 0) scale(0.8);
        opacity: 0.2; /* Presque invisible */
    }
    50% {
        transform: translate(8vw, 5vh) scale(1.1);
        opacity: 0.6; /* Apparaît doucement */
    }
    100% {
        transform: translate(-5vw, -8vh) scale(0.9);
        opacity: 0.2; /* Disparaît doucement */
    }
}
.hero-content {
position: relative;
z-index: 2;
max-width: none;
}
.hero-eyebrow {
display: inline-flex; align-items: center; gap: .6rem;
color: var(--brand-light); font-size: .78rem; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
margin-bottom: 1.6rem;
animation: fadeSlide .8s var(--ease) both;
}
.hero-eyebrow i { font-size: .9rem; }
.hero-eyebrow::before {
content: ''; display: block;
width: 32px; height: 1.5px;
background: var(--brand-light);
}
.hero h1 {
font-family: var(--font-title);
font-size: clamp(3rem, 7vw, 5.2rem);
line-height: 1.06;
color: var(--white);
margin-bottom: 1.5rem;
animation: fadeSlide .8s .1s var(--ease) both;
}
.hero h1 em {
font-style: normal;
color: var(--brand-light);
position: relative;
}
.hero-sub {
font-size: 1.15rem; color: var(--text-light);
max-width: none;
margin-bottom: 2.8rem;
animation: fadeSlide .8s .2s var(--ease) both;
}
.hero-actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
animation: fadeSlide .8s .3s var(--ease) both;
}
.hero-scroll {
position: absolute; bottom: 2.5rem; left: 50%;
transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: .5rem;
color: rgba(255,255,255,.45); font-size: .75rem; letter-spacing: .08em;
text-transform: uppercase; z-index: 2;
animation: fadeIn 1.2s .8s ease both;
}
.hero-scroll i { font-size: 1rem; animation: bounce 2s infinite; }

/* ══════════════════════════════════
BOUTONS
══════════════════════════════════ */
.btn {
display: inline-flex;
align-items: center;
gap: .6rem;
font-family: var(--font-body);
font-weight: 700;
font-size: .98rem;
padding: 10px 50px;
border-radius: 50px;
border: none;
cursor: pointer;
transition: all .25s var(--ease);
text-decoration: none;
letter-spacing: .01em;
}
.btn i { font-size: .9rem; }
.btn-primary {
background: var(--brand); color: var(--white);
box-shadow: 0 4px 28px rgba(131,0,168,.38);
}
.btn-primary:hover {
background: var(--brand-light); transform: translateY(-2px);
box-shadow: 0 10px 36px rgba(131,0,168,.5); color: var(--white);
}
.btn-ghost {
background: rgba(255,255,255,.1);
color: var(--white); border: 1.5px solid rgba(255,255,255,.35);
backdrop-filter: blur(8px);
}
.btn-ghost:hover {
background: rgba(255,255,255,.18); transform: translateY(-2px);
color: var(--white); border-color: rgba(255,255,255,.6);
}
.btn-outline-dark {
background: transparent; color: var(--brand);
border: 2px solid var(--brand);
}
.btn-outline-dark:hover {
background: var(--brand); color: var(--white); transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(131,0,168,.28);
}

/* ══════════════════════════════════
SECTION HEADERS
══════════════════════════════════ */
.label-reveal {
display: inline-flex; align-items: center; gap: .6rem;
font-size: .74rem; font-weight: 800; letter-spacing: .14em;
text-transform: uppercase; color: var(--brand);
margin-bottom: .8rem;
}
.label-reveal::before {
content: ''; display: block;
width: 20px; height: 2px; background: var(--brand);
}
h2 {
font-family: var(--font-title);
font-size: clamp(2rem, 4.5vw, 3rem);
line-height: 1.15; color: var(--text);
margin-bottom: .9rem;
}
h2.light { color: var(--white); }
.intro {
font-size: 1.08rem; color: var(--text-muted);
max-width: 600px; margin-bottom: 3.5rem;
}
.intro.light { color: var(--text-light); }

/* ══════════════════════════════════
INTRO BAND (dark)
══════════════════════════════════ */
.band-dark {
background: var(--dark);
padding: 4rem 0;
}
.band-inner {
display: grid; grid-template-columns: 1fr 2fr; gap: 4rem;
align-items: center;
}
.band-kpi {
display: flex; flex-direction: column; gap: 2rem;
}
.kpi-item { border-left: 2px solid var(--brand); padding-left: 1.4rem; }
.kpi-num {
font-family: var(--font-title); font-size: 2.8rem;
color: var(--white); line-height: 1;
}
.kpi-num span { color: var(--brand-light); }
.kpi-label { font-size: .88rem; color: var(--text-light); margin-top: .2rem; }
.band-text { color: var(--text-light); font-size: 1.06rem; line-height: 1.85; }
.band-text strong { color: var(--white); }

/* ══════════════════════════════════
POINTS FORTS — layout asymétrique
══════════════════════════════════ */
.strengths-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: 1.5rem;
}
.str-card {
background: var(--white);
border: 1px solid rgba(0,0,0,.07);
border-radius: var(--r-lg);
padding: 2.4rem 2.2rem;
position: relative; overflow: hidden;
transition: transform .3s var(--ease), box-shadow .3s var(--ease);
box-shadow: 0 2px 20px rgba(0,0,0,.06);
}
.str-card::after {
content: '';
position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
background: var(--brand);
transform: scaleX(0); transform-origin: left;
transition: transform .4s var(--ease);
}
.str-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(131,0,168,.12); }
.str-card:hover::after { transform: scaleX(1); }
.str-card.featured {
background: var(--dark);
grid-column: 2; grid-row: 1 / 3;
}
.str-card.featured::after { background: var(--brand-light); }
.str-icon {
width: 52px; height: 52px; border-radius: var(--r);
background: var(--brand-subtle); border: 1px solid var(--brand-border);
display: flex; align-items: center; justify-content: center;
margin-bottom: 1.4rem;
}
.str-icon i { color: var(--brand); font-size: 1.3rem; }
.str-card.featured .str-icon { background: rgba(131,0,168,.25); border-color: rgba(131,0,168,.4); }
.str-card.featured .str-icon i { color: var(--brand-light); }
.str-card h3 {
font-family: var(--font-title); font-size: 1.25rem;
color: var(--text); margin-bottom: .6rem;
}
.str-card.featured h3 { color: var(--white); }
.str-card p { font-size: .95rem; color: var(--text-muted); line-height: 1.7; }
.str-card.featured p { color: var(--text-light); }
.str-card.featured .str-badge {
display: inline-flex; align-items: center; gap: .5rem;
background: rgba(131,0,168,.3); color: var(--brand-light);
font-size: .75rem; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; padding: .3rem .8rem;
border-radius: 50px; margin-bottom: 1.2rem;
border: 1px solid rgba(131,0,168,.4);
}

/* ══════════════════════════════════
GALLERY — photos de prestations
══════════════════════════════════ */
.gallery-section { background: var(--dark); }
.gallery-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 280px 280px;
gap: 1rem;
}
.gallery-item {
position: relative; overflow: hidden; border-radius: var(--r-lg);
cursor: pointer;
}
.gallery-item img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .5s var(--ease);
}
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(0,0,0,.5) 0%, transparent 60%);
opacity: 0; transition: opacity .3s;
}
.gallery-item:hover::after { opacity: 1; }
.gallery-item:nth-child(1) { grid-column: 1 / 6; grid-row: 1; }
.gallery-item:nth-child(2) { grid-column: 6 / 9; grid-row: 1; }
.gallery-item:nth-child(3) { grid-column: 9 / 13; grid-row: 1; }
.gallery-item:nth-child(4) { grid-column: 1 / 5; grid-row: 2; }
.gallery-item:nth-child(5) { grid-column: 5 / 9; grid-row: 2; }
.gallery-item:nth-child(6) { grid-column: 9 / 13; grid-row: 2; }
.gallery-label {
position: absolute; bottom: 1rem; left: 1.2rem; right: 1rem;
color: var(--white); font-size: .82rem; font-weight: 700;
letter-spacing: .04em; opacity: 0; z-index: 2;
transition: opacity .3s .1s;
}
.gallery-item:hover .gallery-label { opacity: 1; }

/* ══════════════════════════════════
PRESTATION — ce qui est inclus
══════════════════════════════════ */
.inclus-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.2rem;
}
.inclus-item {
display: flex; gap: 1.1rem;
padding: 1.6rem 1.5rem;
background: var(--white);
border: 1px solid rgba(0,0,0,.07);
border-radius: var(--r);
transition: border-color .25s, box-shadow .25s, transform .25s;
box-shadow: 0 2px 14px rgba(0,0,0,.04);
}
.inclus-item:hover {
border-color: var(--brand-border);
box-shadow: 0 8px 32px rgba(131,0,168,.1);
transform: translateY(-3px);
}
.inclus-icon {
flex-shrink: 0;
width: 44px; height: 44px; border-radius: 10px;
background: var(--brand); color: var(--white);
display: flex; align-items: center; justify-content: center;
}
.inclus-icon i { font-size: 1.1rem; }
.inclus-text strong { display: block; font-size: .98rem; color: var(--text); margin-bottom: .2rem; }
.inclus-text span { font-size: .88rem; color: var(--text-muted); }

/* ══════════════════════════════════
VILLES
══════════════════════════════════ */
.villes-section { background: var(--dark-2); }
.villes-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 1rem;
}
.ville-card {
position: relative; overflow: hidden;
border-radius: var(--r); background: var(--dark-3);
border: 1px solid rgba(255,255,255,.07);
padding: 1.6rem 1.5rem;
transition: border-color .25s, transform .25s, box-shadow .25s;
text-decoration: none; display: block;
}
.ville-card:hover {
border-color: var(--brand);
transform: translateY(-4px);
box-shadow: 0 12px 36px rgba(131,0,168,.2);
}
.ville-card::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: var(--brand);
transform: scaleX(0); transform-origin: left;
transition: transform .35s var(--ease);
}
.ville-card:hover::before { transform: scaleX(1); }
.ville-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: .5rem;
}
.ville-name {
font-family: var(--font-title); font-size: 1.1rem;
color: var(--white);
}
.ville-arrow {
width: 28px; height: 28px; border-radius: 50%;
background: rgba(131,0,168,.2); border: 1px solid rgba(131,0,168,.35);
display: flex; align-items: center; justify-content: center;
transition: background .25s, transform .25s;
}
.ville-arrow i { color: var(--brand-light); font-size: .75rem; }
.ville-card:hover .ville-arrow { background: var(--brand); transform: translateX(3px); }
.ville-card:hover .ville-arrow i { color: var(--white); }
.ville-tag { font-size: .78rem; color: rgba(255,255,255,.4); }
.villes-note {
margin-top: 1.8rem; font-size: .93rem;
color: rgba(255,255,255,.45); text-align: center;
}
.villes-note a { color: var(--brand-light); }

/* ══════════════════════════════════
FAQ
══════════════════════════════════ */
.faq-wrap { max-width: 800px; margin: 0 auto; }
.faq-item {
border-bottom: 1px solid rgba(0,0,0,.09);
overflow: hidden;
}
.faq-item:first-child { border-top: 1px solid rgba(0,0,0,.09); }
.faq-btn {
width: 100%; text-align: left;
font-family: var(--font-body); font-size: 1.02rem; font-weight: 700;
color: var(--text); background: none; border: none;
padding: 1.4rem 0; cursor: pointer;
display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.faq-btn-icon {
flex-shrink: 0; width: 32px; height: 32px;
border-radius: 50%; background: var(--brand-subtle);
border: 1px solid var(--brand-border);
display: flex; align-items: center; justify-content: center;
transition: background .25s, transform .35s;
}
.faq-btn-icon i { color: var(--brand); font-size: .85rem; transition: transform .35s; }
.faq-item.open .faq-btn-icon { background: var(--brand); }
.faq-item.open .faq-btn-icon i { color: var(--white); transform: rotate(45deg); }
.faq-answer {
max-height: 0; overflow: hidden;
transition: max-height .4s var(--ease);
font-size: .97rem; color: var(--text-muted); line-height: 1.8;
}
.faq-answer-inner { padding-bottom: 1.4rem; }
.faq-item.open .faq-answer { max-height: 320px; }

/* ══════════════════════════════════
MAILLAGE INTERNE
══════════════════════════════════ */
.services-section { background: var(--dark); }
.services-row {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem;
}
.service-card {
display: flex; flex-direction: column; align-items: center;
gap: .8rem; padding: 1.6rem 1rem;
background: var(--dark-3); border-radius: var(--r);
border: 1px solid rgba(255,255,255,.06);
transition: border-color .25s, transform .25s, background .25s;
text-decoration: none;
}
.service-card:hover {
border-color: var(--brand); background: rgba(131,0,168,.12);
transform: translateY(-4px);
}
.service-card i { font-size: 1.6rem; color: var(--brand-light); }
.service-card span { font-size: .88rem; font-weight: 600; color: rgba(255,255,255,.7); text-align: center; }
.service-card:hover span { color: var(--white); }

/* ══════════════════════════════════
CTA FINAL
══════════════════════════════════ */
.cta-section {
position: relative; overflow: hidden;
background-image: url('https://images.unsplash.com/photo-1429962714451-bb934ecdc4ec?w=1800&q=80');
/* ⬆️ Remplacez par votre photo */
background-size: cover; background-position: center;
padding: 8rem 0; text-align: center;
}
.cta-overlay {
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(50,0,65,.88) 0%, rgba(0,0,0,.82) 100%);
}
.cta-inner { position: relative; z-index: 2; }
.cta-section h2 { color: var(--white); margin-bottom: 1rem; }
.cta-section p { font-size: 1.12rem; color: var(--text-light); max-width: 520px; margin: 0 auto 2.5rem; }

/* ══════════════════════════════════
ANIMATIONS
══════════════════════════════════ */
@keyframes fadeSlide {
from { opacity: 0; transform: translateY(22px); }
to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; } to { opacity: 1; }
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50%       { transform: translateY(5px); }
}

/* ══════════════════════════════════
RESPONSIVE
══════════════════════════════════ */
@media (max-width: 1024px) {
.strengths-wrap { grid-template-columns: 1fr 1fr; }
.str-card.featured { grid-column: 1 / 3; grid-row: 3; }
.gallery-item:nth-child(n) { grid-column: span 6; grid-row: auto; }
.gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
.inclus-grid { grid-template-columns: 1fr 1fr; }
.services-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
.band-inner { grid-template-columns: 1fr; gap: 2rem; }
.strengths-wrap { grid-template-columns: 1fr; }
.str-card.featured { grid-column: auto; grid-row: auto; }
.gallery-grid { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; }
.gallery-item { height: 220px; }
.gallery-item:nth-child(n) { grid-column: auto; grid-row: auto; }
.inclus-grid { grid-template-columns: 1fr; }
.villes-grid { grid-template-columns: 1fr 1fr; }
.services-row { grid-template-columns: repeat(2, 1fr); }
.section { padding: 4rem 0; }
}
@media (max-width: 480px) {
.hero h1 { font-size: 2.8rem; }
.villes-grid { grid-template-columns: 1fr; }
.services-row { grid-template-columns: repeat(2, 1fr); }
}

/* SOCIAL */
.form {
max-width: 1200px;
margin: 50px auto;
position: relative;
padding: 0 20px;
}
.social {
display: flex;
justify-content: center;
flex-flow: wrap;
gap: 1rem;
list-style: none;
margin-top: 60px;
margin-bottom: 40px;
}
.social li {
position: relative;
flex-basis: 4.5rem;
}
.social li::after {
position: absolute;
content: attr(data-tooltip);
inset: -45% auto auto 50%;
z-index: -1;
translate: -50%;
padding: 0.25rem 0.75rem;
font-size: 20px;
color: #fff;
background: var(--bg, #070707);
border-radius: 0.25rem;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: inset 0.4s cubic-bezier(0.47, 2, 0.41, 1.5),
visibility 0.3s ease-in-out, opacity 0.2s ease-in-out;
}
.social li:has(a:hover, a:focus-visible)::after {
opacity: 1;
visibility: visible;
inset-block-start: -60%;
}
.social a {
position: relative;
display: flex;
justify-content: center;
align-items: center;
aspect-ratio: 1;
font-size: 30px;
color: #82237D;
border: 1px solid;
border-radius: 100%;
text-decoration: none;
outline: none;
overflow: hidden;
transition: color 0.3s ease-in-out;
}
.social a > i {
position: relative;
z-index: 1;
}
.social a::after {
position: absolute;
content: "";
inset: 100% 0 0;
background: var(--bg, #070707);
pointer-events: none;
transition: inset 0.3s ease-in-out;
}
.social a:hover,
.social a:focus-visible {
color: #fff;
}
.social a:hover::after,
.social a:focus-visible::after {
inset-block-start: 0;
}

/* CONTACT */
#contact {
scroll-margin-top: 100px;
}
#forms-container {
background: #fff;
padding: 30px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
}
.form-field {
    width: 100%;
    position: relative;
}
.form-field.full-width {
width: 100%;
}
.input-text {
width: 100%;
padding: 15px;
border: 1px solid #82237D;
border-radius: 8px;
background-color: #fff;
font-size: 1rem;
outline: none;
transition: all 0.3s ease;
box-sizing: border-box;
}
.input-text:focus {
border-color: #fff;
background-color: #fff;
box-shadow: 0 0 0 3px rgba(150, 47, 191, 0.1);
}
select.input-text {
appearance: none;
-webkit-appearance: none;
cursor: pointer;
color: #82237D;
}
.label {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #999;
font-size: 1rem;
pointer-events: none;
transition: 0.3s ease all;
}
.label i {
margin-right: 8px;
color: #82237D;
}
.input-text:focus + .label,
.input-text:not(:placeholder-shown) + .label {
top: 0;
transform: translateY(-50%);
font-size: 0.8rem;
background: #fff;
padding: 0 5px;
color: #962fbf;
font-weight: 600;
}
select.input-text + .label {
top: 0 !important;
transform: translateY(-50%);
font-size: 0.8rem;
background: #fff;
padding: 0 5px;
}
textarea.input-text + .label {
top: 20px;
}
textarea.input-text:focus + .label,
textarea.input-text:not(:placeholder-shown) + .label {
top: 0;
}
.honeypot-field {
display: none;
opacity: 0;
position: absolute;
top: 0;
left: 0;
height: 0;
width: 0;
z-index: -1;
}

@media screen and (max-width: 900px) {
    body {
	margin-top: 20px;
	}
	.hero-scroll {
	visibility: hidden;
	}
	.form {
        margin: 30px auto;
    }
    .social {
        margin-top: 40px;
        margin-bottom: 30px;
        gap: 0.8rem;
    }
    .social li {
        flex-basis: 3.5rem;
    }
    .social a {
        font-size: 22px;
    }
    .social li::after {
        font-size: 14px;
    }
    .contact-form {
		flex-direction: column;
        width: 100%;
}
    .form-field {
        flex: 1 1 100%;
    }
    #forms-container {
        padding: 20px;
    }
    .input-text {
        padding: 12px;
        font-size: 0.95rem;
    }
    .label {
        font-size: 0.9rem;
    }
    .form-field.full-width[style*="flex"] {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .form-field.full-width input[type="number"] {
        width: 100%;
    }
    .calltoaction {
        width: 100%;
        text-align: center;
    }
}