/*==================================================
CONTACT PAGE
Clinique Juridique JusDivinum
==================================================*/

:root{

    --primary:#0B3D91;
    --primary-dark:#082d6c;
    --secondary:#F4B400;
    
    --success:#17a34a;
    
    --danger:#dc2626;
    
    --light:#ffffff;
    
    --gray:#f5f7fa;
    
    --gray2:#eef2f7;
    
    --text:#1f2937;
    
    --text-light:#6b7280;
    
    --radius:22px;
    
    --shadow:
    0 18px 45px rgba(0,0,0,.08);
    
    --transition:.35s;
    
    --max-width:1300px;
    
    }
    
    *{
    
    margin:0;
    
    padding:0;
    
    box-sizing:border-box;
    
    }
    
    html{
    
    scroll-behavior:smooth;
    
    }
    
    body{
    
    font-family:'Inter',sans-serif;
    
    background:#fff;
    
    color:var(--text);
    
    line-height:1.7;
    
    overflow-x:hidden;
    
    }
    
    img{
    
    max-width:100%;
    
    display:block;
    
    }
    
    a{
    
    text-decoration:none;
    
    }
    
    section{
    
    padding:110px 0;
    
    position:relative;
    
    }
    
    .contactContainer{
    
    width:min(92%,var(--max-width));
    
    margin:auto;
    
    }
    
    /*==================================================
    SECTION TITLE
    ==================================================*/
    
    .sectionTitle{
    
    max-width:760px;
    
    margin:auto;
    
    text-align:center;
    
    margin-bottom:70px;
    
    }
    
    .sectionTitle span{
    
    display:inline-block;
    
    padding:10px 24px;
    
    border-radius:100px;
    
    background:#eef4ff;
    
    color:var(--primary);
    
    font-size:.82rem;
    
    font-weight:700;
    
    letter-spacing:2px;
    
    text-transform:uppercase;
    
    margin-bottom:18px;
    
    }
    
    .sectionTitle h2{
    
    font-size:clamp(2rem,4vw,3.2rem);
    
    margin-bottom:20px;
    
    font-weight:800;
    
    line-height:1.2;
    
    }
    
    .sectionTitle p{
    
    font-size:1.08rem;
    
    color:var(--text-light);
    
    }
    
    /*==================================================
    HERO
    ==================================================*/
    
    .contactHero{
    
    min-height:92vh;
    
    display:flex;
    
    align-items:center;
    
    overflow:hidden;
    
    background:
    
    linear-gradient(
    135deg,
    #072d67,
    #0B3D91 45%,
    #1158cf
    );
    
    color:#fff;
    
    }
    
    .heroOverlay{
    
    position:absolute;
    
    inset:0;
    
    background:
    
    radial-gradient(circle at top right,
    rgba(255,255,255,.18),
    transparent 35%),
    
    radial-gradient(circle at bottom left,
    rgba(255,255,255,.08),
    transparent 45%);
    
    }
    
    .contactHero .contactContainer{
    
    display:grid;
    
    grid-template-columns:
    
    1.1fr
    
    .9fr;
    
    gap:70px;
    
    align-items:center;
    
    position:relative;
    
    z-index:2;
    
    }
    
    .heroBadge{
    
    display:inline-flex;
    
    align-items:center;
    
    gap:12px;
    
    padding:12px 22px;
    
    border-radius:999px;
    
    background:
    
    rgba(255,255,255,.12);
    
    backdrop-filter:blur(15px);
    
    font-weight:700;
    
    margin-bottom:30px;
    
    }
    
    .heroBadge i{
    
    color:var(--secondary);
    
    }
    
    .heroLeft h1{
    
    font-size:clamp(2.9rem,5vw,4.7rem);
    
    font-weight:900;
    
    line-height:1.08;
    
    margin-bottom:28px;
    
    }
    
    .heroLeft p{
    
    font-size:1.18rem;
    
    opacity:.94;
    
    max-width:670px;
    
    }
    
    .heroButtons{
    
    display:flex;
    
    gap:20px;
    
    margin-top:45px;
    
    flex-wrap:wrap;
    
    }
    
    /*==================================================
    BOUTONS
    ==================================================*/
    
    .btnPrimary{
    
    background:var(--secondary);
    
    color:#000;
    
    padding:17px 34px;
    
    border-radius:999px;
    
    font-weight:700;
    
    display:inline-flex;
    
    align-items:center;
    
    gap:12px;
    
    transition:var(--transition);
    
    box-shadow:
    
    0 10px 25px rgba(0,0,0,.18);
    
    }
    
    .btnPrimary:hover{
    
    transform:translateY(-6px);
    
    box-shadow:
    
    0 18px 40px rgba(0,0,0,.22);
    
    }
    
    .btnSecondary{
    
    padding:17px 34px;
    
    border-radius:999px;
    
    border:2px solid rgba(255,255,255,.35);
    
    color:#fff;
    
    display:inline-flex;
    
    align-items:center;
    
    gap:12px;
    
    font-weight:700;
    
    transition:var(--transition);
    
    backdrop-filter:blur(8px);
    
    }
    
    .btnSecondary:hover{
    
    background:#fff;
    
    color:var(--primary);
    
    transform:translateY(-6px);
    
    }
    
    /*==================================================
    IMAGE HERO
    ==================================================*/
    
    .heroRight{
    
    position:relative;
    
    display:flex;
    
    justify-content:center;
    
    align-items:center;
    
    }
    
    .heroRight img{
    
    width:100%;
    
    max-width:560px;
    
    animation:
    
    floating
    
    6s ease-in-out infinite;
    
    filter:
    
    drop-shadow(0 35px 70px rgba(0,0,0,.35));
    
    }
    
    /*==================================================
    STATISTIQUES
    ==================================================*/
    
    .heroStats{
    
    display:flex;
    
    gap:30px;
    
    margin-top:65px;
    
    flex-wrap:wrap;
    
    }
    
    .heroStats div{
    
    background:
    
    rgba(255,255,255,.12);
    
    padding:25px;
    
    border-radius:18px;
    
    backdrop-filter:blur(14px);
    
    min-width:170px;
    
    }
    
    .heroStats strong{
    
    display:block;
    
    font-size:2rem;
    
    margin-bottom:8px;
    
    font-weight:900;
    
    }
    
    .heroStats span{
    
    font-size:.95rem;
    
    opacity:.88;
    
    }
    
    /*==================================================
    ANIMATIONS
    ==================================================*/
    
    @keyframes floating{
    
    0%{
    
    transform:translateY(0);
    
    }
    
    50%{
    
    transform:translateY(-18px);
    
    }
    
    100%{
    
    transform:translateY(0);
    
    }
    
    }
    
    @keyframes fadeUp{
    
    from{
    
    opacity:0;
    
    transform:translateY(40px);
    
    }
    
    to{
    
    opacity:1;
    
    transform:none;
    
    }
    
    }
    
    .contactHero h1,
    
    .contactHero p,
    
    .heroButtons,
    
    .heroStats{
    
    animation:
    
    fadeUp
    
    1s ease both;
    
    }
    
    .heroButtons{
    
    animation-delay:.2s;
    
    }
    
    .heroStats{
    
    animation-delay:.4s;
    
    }
    
    /*==================================================
    RESPONSIVE HERO
    ==================================================*/
    
    @media(max-width:1050px){
    
    .contactHero .contactContainer{
    
    grid-template-columns:1fr;
    
    text-align:center;
    
    }
    
    .heroLeft{
    
    order:2;
    
    }
    
    .heroRight{
    
    order:1;
    
    }
    
    .heroButtons{
    
    justify-content:center;
    
    }
    
    .heroStats{
    
    justify-content:center;
    
    }
    
    }
    /*==================================================
CARTES DE CONTACT
==================================================*/

.contactCards{

    background:linear-gradient(
    180deg,
    #ffffff,
    #f7f9fc);
    
    }
    
    .cardsGrid{
    
    width:min(92%,var(--max-width));
    
    margin:auto;
    
    display:grid;
    
    grid-template-columns:
    repeat(4,1fr);
    
    gap:30px;
    
    }
    
    .contactCard{
    
    position:relative;
    
    padding:45px 35px;
    
    background:#fff;
    
    border-radius:28px;
    
    overflow:hidden;
    
    box-shadow:
    0 18px 45px rgba(15,23,42,.08);
    
    transition:
    transform .45s,
    box-shadow .45s;
    
    border:1px solid rgba(11,61,145,.08);
    
    }
    
    .contactCard::before{
    
    content:"";
    
    position:absolute;
    
    top:-120px;
    
    right:-120px;
    
    width:220px;
    
    height:220px;
    
    border-radius:50%;
    
    background:
    radial-gradient(
    circle,
    rgba(244,180,0,.22),
    transparent 70%);
    
    transition:.5s;
    
    }
    
    .contactCard:hover{
    
    transform:
    translateY(-12px);
    
    box-shadow:
    0 35px 70px rgba(15,23,42,.14);
    
    }
    
    .contactCard:hover::before{
    
    transform:scale(1.3);
    
    }
    
    .cardIcon{
    
    width:82px;
    
    height:82px;
    
    border-radius:22px;
    
    display:flex;
    
    justify-content:center;
    
    align-items:center;
    
    font-size:2rem;
    
    background:
    
    linear-gradient(
    135deg,
    var(--primary),
    #2768d4);
    
    color:#fff;
    
    margin-bottom:30px;
    
    box-shadow:
    0 18px 35px rgba(11,61,145,.25);
    
    transition:.4s;
    
    }
    
    .contactCard:hover .cardIcon{
    
    transform:
    rotate(-8deg)
    scale(1.08);
    
    }
    
    .contactCard h3{
    
    font-size:1.45rem;
    
    margin-bottom:16px;
    
    font-weight:800;
    
    color:var(--text);
    
    }
    
    .contactCard p{
    
    color:var(--text-light);
    
    margin-bottom:22px;
    
    min-height:65px;
    
    }
    
    .contactCard a{
    
    display:inline-flex;
    
    align-items:center;
    
    gap:10px;
    
    font-weight:700;
    
    color:var(--primary);
    
    transition:.35s;
    
    }
    
    .contactCard a::after{
    
    content:"→";
    
    transition:.35s;
    
    }
    
    .contactCard:hover a{
    
    gap:18px;
    
    }
    
    .contactCard:hover a::after{
    
    transform:translateX(6px);
    
    }
    
    /*==================================================
    FORMULAIRE
    ==================================================*/
    
    .contactSection{
    
    background:#ffffff;
    
    }
    
    .contactFormWrapper{
    
    width:min(92%,1000px);
    
    margin:auto;
    
    background:#fff;
    
    padding:60px;
    
    border-radius:32px;
    
    box-shadow:
    
    0 30px 70px rgba(15,23,42,.08);
    
    border:1px solid rgba(0,0,0,.05);
    
    }
    
    .formGrid{
    
    display:grid;
    
    grid-template-columns:
    
    repeat(2,1fr);
    
    gap:28px;
    
    }
    
    .formGroup{
    
    display:flex;
    
    flex-direction:column;
    
    }
    
    .fullWidth{
    
    grid-column:1/-1;
    
    }
    
    .formGroup label{
    
    font-weight:700;
    
    margin-bottom:10px;
    
    color:var(--text);
    
    }
    
    .formGroup input,
    
    .formGroup textarea,
    
    .formGroup select{
    
    width:100%;
    
    padding:18px 20px;
    
    border-radius:16px;
    
    border:1px solid #d7dde7;
    
    font-family:inherit;
    
    font-size:1rem;
    
    transition:.35s;
    
    background:#fff;
    
    }
    
    .formGroup textarea{
    
    resize:vertical;
    
    min-height:180px;
    
    }
    
    .formGroup input:focus,
    
    .formGroup textarea:focus,
    
    .formGroup select:focus{
    
    outline:none;
    
    border-color:var(--primary);
    
    box-shadow:
    
    0 0 0 5px rgba(11,61,145,.10);
    
    }
    
    /*==================================================
    UPLOAD
    ==================================================*/
    
    .uploadSection{
    
    margin-top:45px;
    
    }
    
    .uploadBox{
    
    display:flex;
    
    flex-direction:column;
    
    align-items:center;
    
    justify-content:center;
    
    padding:45px;
    
    border:2px dashed #cfd8e6;
    
    border-radius:24px;
    
    cursor:pointer;
    
    transition:.35s;
    
    text-align:center;
    
    background:#fafcff;
    
    }
    
    .uploadBox:hover{
    
    border-color:var(--primary);
    
    background:#f3f7ff;
    
    }
    
    .uploadBox i{
    
    font-size:3rem;
    
    color:var(--primary);
    
    margin-bottom:20px;
    
    }
    
    .uploadBox h4{
    
    font-size:1.3rem;
    
    margin-bottom:10px;
    
    }
    
    .uploadBox p{
    
    color:var(--text-light);
    
    margin-bottom:16px;
    
    }
    
    .uploadBox input{
    
    display:none;
    
    }
    
    #selectedFile{
    
    font-weight:700;
    
    color:var(--primary);
    
    word-break:break-word;
    
    }
    
    /*==================================================
    CONSENTEMENT
    ==================================================*/
    
    .checkboxArea{
    
    margin-top:35px;
    
    padding:25px;
    
    background:#f7f9fc;
    
    border-radius:18px;
    
    }
    
    .checkboxArea label{
    
    display:flex;
    
    align-items:flex-start;
    
    gap:15px;
    
    cursor:pointer;
    
    color:var(--text-light);
    
    line-height:1.8;
    
    }
    
    .checkboxArea input{
    
    margin-top:4px;
    
    transform:scale(1.2);
    
    accent-color:var(--primary);
    
    }
    
    /*==================================================
    BOUTON ENVOI
    ==================================================*/
    
    .sendButton{
    
    margin-top:35px;
    
    border:none;
    
    background:
    
    linear-gradient(
    135deg,
    var(--primary),
    #2768d4);
    
    color:#fff;
    
    padding:20px 38px;
    
    border-radius:999px;
    
    font-size:1rem;
    
    font-weight:800;
    
    cursor:pointer;
    
    display:inline-flex;
    
    align-items:center;
    
    gap:14px;
    
    transition:.35s;
    
    box-shadow:
    
    0 15px 35px rgba(11,61,145,.25);
    
    }
    
    .sendButton:hover{
    
    transform:translateY(-6px);
    
    box-shadow:
    
    0 22px 45px rgba(11,61,145,.35);
    
    }
    /*==================================================
HORAIRES
==================================================*/

.openingHours{

    background:linear-gradient(
    180deg,
    #f8fafc,
    #ffffff);
    
    }
    
    .hoursGrid{
    
    width:min(92%,var(--max-width));
    
    margin:auto;
    
    display:grid;
    
    grid-template-columns:repeat(3,1fr);
    
    gap:30px;
    
    }
    
    .hourCard{
    
    background:#fff;
    
    padding:45px 35px;
    
    border-radius:28px;
    
    text-align:center;
    
    box-shadow:
    0 20px 50px rgba(15,23,42,.08);
    
    transition:.45s;
    
    border-top:6px solid var(--secondary);
    
    }
    
    .hourCard:hover{
    
    transform:translateY(-10px);
    
    box-shadow:
    0 35px 70px rgba(15,23,42,.12);
    
    }
    
    .hourCard h3{
    
    font-size:1.45rem;
    
    margin-bottom:18px;
    
    font-weight:800;
    
    color:var(--primary);
    
    }
    
    .hourCard p{
    
    font-size:1.08rem;
    
    color:var(--text-light);
    
    }
    
    /*==================================================
    CARTE GOOGLE MAPS
    ==================================================*/
    
    .mapSection{
    
    background:#eef4fb;
    
    }
    
    .mapWrapper{
    
    width:min(92%,var(--max-width));
    
    margin:auto;
    
    overflow:hidden;
    
    border-radius:30px;
    
    box-shadow:
    0 30px 70px rgba(15,23,42,.10);
    
    }
    
    .mapWrapper iframe{
    
    width:100%;
    
    height:550px;
    
    border:0;
    
    display:block;
    
    }
    
    /*==================================================
    RESEAUX SOCIAUX
    ==================================================*/
    
    .socialSection{
    
    background:#fff;
    
    }
    
    .socialGrid{
    
    width:min(92%,var(--max-width));
    
    margin:auto;
    
    display:grid;
    
    grid-template-columns:repeat(4,1fr);
    
    gap:32px;
    
    }
    
    .socialCard{
    
    position:relative;
    
    overflow:hidden;
    
    background:#fff;
    
    padding:45px 35px;
    
    border-radius:28px;
    
    text-align:center;
    
    box-shadow:
    0 18px 45px rgba(15,23,42,.08);
    
    transition:.45s;
    
    color:var(--text);
    
    border:1px solid rgba(0,0,0,.05);
    
    }
    
    .socialCard::before{
    
    content:"";
    
    position:absolute;
    
    top:-120px;
    
    right:-120px;
    
    width:240px;
    
    height:240px;
    
    border-radius:50%;
    
    transition:.45s;
    
    opacity:.15;
    
    }
    
    .socialCard:hover{
    
    transform:
    translateY(-12px);
    
    box-shadow:
    0 40px 80px rgba(15,23,42,.15);
    
    }
    
    .socialIcon{
    
    width:90px;
    
    height:90px;
    
    margin:auto;
    
    margin-bottom:28px;
    
    border-radius:50%;
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    font-size:2.2rem;
    
    color:#fff;
    
    transition:.45s;
    
    }
    
    .socialCard:hover .socialIcon{
    
    transform:
    rotate(-10deg)
    scale(1.08);
    
    }
    
    .socialCard h3{
    
    font-size:1.5rem;
    
    margin-bottom:18px;
    
    font-weight:800;
    
    }
    
    .socialCard p{
    
    color:var(--text-light);
    
    margin-bottom:25px;
    
    min-height:72px;
    
    }
    
    .socialCard span{
    
    font-weight:700;
    
    display:inline-flex;
    
    align-items:center;
    
    gap:8px;
    
    transition:.35s;
    
    }
    
    .socialCard:hover span{
    
    gap:16px;
    
    }
    
    /*==================================================
    FACEBOOK
    ==================================================*/
    
    .facebook::before{
    
    background:#1877f2;
    
    }
    
    .facebook .socialIcon{
    
    background:#1877f2;
    
    }
    
    /*==================================================
    YOUTUBE
    ==================================================*/
    
    .youtube::before{
    
    background:#ff0000;
    
    }
    
    .youtube .socialIcon{
    
    background:#ff0000;
    
    }
    
    /*==================================================
    LINKEDIN
    ==================================================*/
    
    .linkedin::before{
    
    background:#0a66c2;
    
    }
    
    .linkedin .socialIcon{
    
    background:#0a66c2;
    
    }
    
    /*==================================================
    WHATSAPP
    ==================================================*/
    
    .whatsapp::before{
    
    background:#25d366;
    
    }
    
    .whatsapp .socialIcon{
    
    background:#25d366;
    
    }
    
    /*==================================================
    ANIMATION D'APPARITION
    ==================================================*/
    
    .contactCard,
    .hourCard,
    .socialCard{
    
    opacity:0;
    
    transform:translateY(45px);
    
    animation:fadeCard .8s forwards;
    
    }
    
    .contactCard:nth-child(1),
    .socialCard:nth-child(1){
    
    animation-delay:.1s;
    
    }
    
    .contactCard:nth-child(2),
    .socialCard:nth-child(2){
    
    animation-delay:.2s;
    
    }
    
    .contactCard:nth-child(3),
    .socialCard:nth-child(3){
    
    animation-delay:.3s;
    
    }
    
    .contactCard:nth-child(4),
    .socialCard:nth-child(4){
    
    animation-delay:.4s;
    
    }
    
    .hourCard:nth-child(1){
    
    animation-delay:.2s;
    
    }
    
    .hourCard:nth-child(2){
    
    animation-delay:.3s;
    
    }
    
    .hourCard:nth-child(3){
    
    animation-delay:.4s;
    
    }
    
    @keyframes fadeCard{
    
    to{
    
    opacity:1;
    
    transform:none;
    
    }
    
    }
    /*==================================================
FAQ
==================================================*/

.faqSection{

    background:#f7f9fc;
    
    }
    
    .faqContainer{
    
    width:min(92%,900px);
    
    margin:auto;
    
    display:flex;
    
    flex-direction:column;
    
    gap:22px;
    
    }
    
    .faqItem{
    
    background:#fff;
    
    border-radius:24px;
    
    overflow:hidden;
    
    box-shadow:
    0 15px 35px rgba(15,23,42,.08);
    
    transition:.35s;
    
    }
    
    .faqItem:hover{
    
    box-shadow:
    0 25px 50px rgba(15,23,42,.12);
    
    }
    
    .faqQuestion{
    
    width:100%;
    
    border:none;
    
    background:#fff;
    
    padding:28px 35px;
    
    display:flex;
    
    justify-content:space-between;
    
    align-items:center;
    
    cursor:pointer;
    
    font-size:1.12rem;
    
    font-weight:700;
    
    font-family:inherit;
    
    color:var(--text);
    
    transition:.35s;
    
    }
    
    .faqQuestion:hover{
    
    background:#f4f7fc;
    
    }
    
    .faqQuestion i{
    
    transition:.4s;
    
    color:var(--primary);
    
    }
    
    .faqItem.active .faqQuestion i{
    
    transform:rotate(45deg);
    
    }
    
    .faqAnswer{
    
    max-height:0;
    
    overflow:hidden;
    
    transition:max-height .45s ease;
    
    background:#fafcff;
    
    }
    
    .faqAnswer p{
    
    padding:0 35px 30px;
    
    color:var(--text-light);
    
    line-height:1.9;
    
    }
    
    /*==================================================
    PARTENARIAT
    ==================================================*/
    
    .partnershipSection{
    
    background:
    
    linear-gradient(
    135deg,
    var(--primary),
    #1158cf);
    
    color:#fff;
    
    text-align:center;
    
    overflow:hidden;
    
    }
    
    .partnershipSection::before{
    
    content:"";
    
    position:absolute;
    
    width:600px;
    
    height:600px;
    
    right:-250px;
    
    top:-250px;
    
    border-radius:50%;
    
    background:
    
    rgba(255,255,255,.05);
    
    }
    
    .partnershipContent{
    
    width:min(92%,900px);
    
    margin:auto;
    
    position:relative;
    
    z-index:2;
    
    }
    
    .partnershipContent>i{
    
    font-size:4rem;
    
    margin-bottom:30px;
    
    color:var(--secondary);
    
    }
    
    .partnershipContent h2{
    
    font-size:clamp(2rem,4vw,3.3rem);
    
    margin-bottom:25px;
    
    font-weight:900;
    
    }
    
    .partnershipContent p{
    
    font-size:1.15rem;
    
    opacity:.92;
    
    margin-bottom:40px;
    
    }
    
    .partnershipButtons{
    
    display:flex;
    
    justify-content:center;
    
    gap:20px;
    
    flex-wrap:wrap;
    
    }
    
    /*==================================================
    LOADER
    ==================================================*/
    
    .contactLoader{
    
    position:fixed;
    
    inset:0;
    
    background:rgba(255,255,255,.92);
    
    backdrop-filter:blur(10px);
    
    display:none;
    
    justify-content:center;
    
    align-items:center;
    
    z-index:9999;
    
    }
    
    .loaderCard{
    
    background:#fff;
    
    padding:50px;
    
    border-radius:30px;
    
    text-align:center;
    
    box-shadow:
    0 30px 70px rgba(15,23,42,.15);
    
    max-width:420px;
    
    }
    
    .loaderSpinner{
    
    width:75px;
    
    height:75px;
    
    margin:auto;
    
    margin-bottom:30px;
    
    border-radius:50%;
    
    border:7px solid #e7edf7;
    
    border-top-color:var(--primary);
    
    animation:spin .8s linear infinite;
    
    }
    
    @keyframes spin{
    
    to{
    
    transform:rotate(360deg);
    
    }
    
    }
    
    /*==================================================
    CONFIRMATION
    ==================================================*/
    
    .confirmationScreen{
    
    display:none;
    
    min-height:100vh;
    
    background:#f5f8fd;
    
    padding:120px 20px;
    
    }
    
    .confirmationCard{
    
    max-width:700px;
    
    margin:auto;
    
    background:#fff;
    
    padding:70px 50px;
    
    border-radius:35px;
    
    text-align:center;
    
    box-shadow:
    0 30px 80px rgba(15,23,42,.12);
    
    }
    
    .successIcon{
    
    width:120px;
    
    height:120px;
    
    margin:auto;
    
    margin-bottom:35px;
    
    border-radius:50%;
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    background:
    
    linear-gradient(
    135deg,
    #16a34a,
    #22c55e);
    
    color:#fff;
    
    font-size:3.4rem;
    
    box-shadow:
    0 20px 50px rgba(34,197,94,.35);
    
    animation:successPulse 2s infinite;
    
    }
    
    @keyframes successPulse{
    
    0%{
    
    transform:scale(1);
    
    }
    
    50%{
    
    transform:scale(1.08);
    
    }
    
    100%{
    
    transform:scale(1);
    
    }
    
    }
    
    .confirmationCard h2{
    
    font-size:2.6rem;
    
    margin-bottom:20px;
    
    font-weight:900;
    
    }
    
    .confirmationCard>p{
    
    font-size:1.08rem;
    
    color:var(--text-light);
    
    margin-bottom:35px;
    
    }
    
    .trackingNumber{
    
    background:#f3f7ff;
    
    border-left:5px solid var(--primary);
    
    padding:22px;
    
    border-radius:18px;
    
    margin-bottom:35px;
    
    }
    
    .trackingNumber strong{
    
    display:block;
    
    margin-bottom:10px;
    
    font-size:1rem;
    
    }
    
    .trackingNumber span{
    
    font-size:1.4rem;
    
    font-weight:800;
    
    letter-spacing:2px;
    
    color:var(--primary);
    
    word-break:break-word;
    
    }
    
    .confirmationButtons{
    
    display:flex;
    
    justify-content:center;
    
    gap:20px;
    
    flex-wrap:wrap;
    
    margin-top:40px;
    
    }
    
    /*==================================================
    RESPONSIVE
    ==================================================*/
    
    @media(max-width:1200px){
    
    .cardsGrid{
    
    grid-template-columns:repeat(2,1fr);
    
    }
    
    .socialGrid{
    
    grid-template-columns:repeat(2,1fr);
    
    }
    
    .hoursGrid{
    
    grid-template-columns:repeat(2,1fr);
    
    }
    
    }
    
    @media(max-width:768px){
    
    section{
    
    padding:80px 0;
    
    }
    
    .contactFormWrapper{
    
    padding:35px 25px;
    
    }
    
    .formGrid{
    
    grid-template-columns:1fr;
    
    }
    
    .fullWidth{
    
    grid-column:auto;
    
    }
    
    .cardsGrid,
    
    .hoursGrid,
    
    .socialGrid{
    
    grid-template-columns:1fr;
    
    }
    
    .heroButtons,
    
    .partnershipButtons,
    
    .confirmationButtons{
    
    flex-direction:column;
    
    align-items:center;
    
    }
    
    .heroStats{
    
    flex-direction:column;
    
    align-items:center;
    
    }
    
    .heroStats div{
    
    width:100%;
    
    max-width:320px;
    
    text-align:center;
    
    }
    
    .contactCard,
    
    .hourCard,
    
    .socialCard{
    
    padding:35px 28px;
    
    }
    
    .mapWrapper iframe{
    
    height:380px;
    
    }
    
    .confirmationCard{
    
    padding:45px 25px;
    
    }
    
    .successIcon{
    
    width:90px;
    
    height:90px;
    
    font-size:2.4rem;
    
    }
    
    }
    
    @media(max-width:480px){
    
    .heroLeft h1{
    
    font-size:2.3rem;
    
    }
    
    .sectionTitle h2{
    
    font-size:2rem;
    
    }
    
    .sectionTitle p{
    
    font-size:1rem;
    
    }
    
    .btnPrimary,
    
    .btnSecondary,
    
    .sendButton{
    
    width:100%;
    
    justify-content:center;
    
    }
    
    }
    
    /*==================================================
    FIN
    ==================================================*/