*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{
    --primary:#2563eb;
    --green:#22c55e;

    --bg-deep:#020617;
    --bg-dark:#020617;
    --bg-card:#071228;
    --bg-input:#0a1830;
    --bg-input-focus:#0d1f3c;

    --card-bg:rgba(15,23,42,0.75);

    --text:#ffffff;
    --text-white:#ffffff;
    --text-gray:#94a3b8;
    --text-muted:rgba(255,255,255,0.6);
    --text-dim:rgba(255,255,255,0.38);

    --border:rgba(255,255,255,0.08);
    --border-focus:rgba(30,167,255,0.55);

    --accent: #2563eb;
    --accent-dark:#1480cc;

    --danger:#ff4d6d;
    --success:#22c55e;

    --radius:14px;
    --radius-sm:9px;
}

html,
body{
    width:100%;
    overflow-x:hidden;
    scroll-behavior:smooth;
}

body{
    font-family: 'Poppins', sans-serif;
    background:var(--bg-deep);
    color:var(--text);
    min-height:100vh;
    overflow-x:hidden;
}

/* =====================
   BACKGROUND DECORATION
===================== */

body::before{
    content:'';
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
}

/* =========================================================
   CONTAINER
========================================================= */

.container,
.contact-container{
    width:90%;
    max-width:1200px;
    margin:auto;
}

/* =========================================================
   HERO SECTION
========================================================= */

/* .contact-hero{
    position:relative;
    z-index:1;
    padding:40px 0 80px;
    overflow:hidden;
}

.contact-hero::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    background:radial-gradient(
        circle,
        rgba(37,99,235,0.18) 0%,
        transparent 70%
    );
    top:-120px;
    right:-120px;
}

.contact-hero::after{
    content:'';
    position:absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    width:160px;
    height:1px;
    background:linear-gradient(
        90deg,
        transparent,
        var(--accent),
        transparent
    );
} */

/* =========================================================
   HERO GRID
========================================================= */

/* .hero-grid{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:60px;
    align-items:center;
} */

/* =========================================================
   HERO LEFT
========================================================= */

/* .hero-content{
    position:relative;
    z-index:5;
}

.badge-premium{
    display:inline-flex;
    align-items:center;
    gap:8px;

    color:var(--green);

    letter-spacing:2px;
    font-size:0.8rem;
    font-weight:600;

    text-transform:uppercase;
}

.contact-hero h1{
    font-size:4.2rem;
    line-height:1.1;
    margin:20px 0;
    font-weight:700;
    position:relative;
    z-index:2;
}

.text-gradient{
    color:var(--primary);
}

.contact-hero p{
    color:var(--text-gray);
    font-size:1rem;
    line-height:1.8;
    position:relative;
    z-index:2;
    max-width:580px;
}

.hero-buttons{
    display:flex;
    gap:18px;
    margin-top:35px;
} */

/* =========================================================
   HERO BUTTONS
========================================================= */

/* .btn-primary{
    background:#2563eb;
    color:#fff;
    text-decoration:none;

    padding:14px 28px;

    border-radius:12px;

    font-weight:600;

    transition:0.3s;
}

.btn-primary:hover{
    transform:translateY(-3px);
    box-shadow:0 15px 30px rgba(37,99,235,0.3);
}

.btn-outline{
    border:1px solid #2563eb;
    color:#fff;

    text-decoration:none;

    padding:14px 28px;

    border-radius:12px;

    font-weight:600;

    transition:0.3s;
}

.btn-outline:hover{
    background:#2563eb;
} */

/* =========================================================
   HERO VISUAL
========================================================= */

/* .hero-visual{
    position:relative;

    height:600px;

    display:flex;
    justify-content:center;
    align-items:center;
}

.dashed-circle{
    position:absolute;

    width:500px;
    height:500px;

    border-radius:50%;

    border:2px dashed rgba(37,99,235,0.2);

    z-index:1;
}

.contact-image{
    position:relative;
    z-index:3;

    max-height:560px;
    width:auto;

    filter:drop-shadow(
        0 20px 40px rgba(37,99,235,0.25)
    );
} */

/* =========================================================
   FLOATING CARDS
========================================================= */
/* 
.floating-card{
    position:absolute;

    background:rgba(15,23,42,0.92);

    border:1px solid rgba(255,255,255,0.08);

    backdrop-filter:blur(10px);

    border-radius:16px;

    padding:14px 18px;

    display:flex;
    align-items:center;
    gap:14px;

    z-index:10;
}

.floating-icon{
    width:45px;
    height:45px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;
}

.blue-bg{
    background:rgba(37,99,235,0.15);
    color:#2563eb;
}

.green-bg{
    background:rgba(34,197,94,0.15);
    color:#22c55e;
}

.float-title{
    font-size:0.9rem;
    font-weight:600;
}

.float-sub{
    font-size:0.75rem;
    color:#94a3b8;
}

/* CARD POSITIONS */

/* .card-1{
    top:12%;
    right:0;
}

.card-2{
    left:0;
    top:45%;
}

.card-3{
    bottom:12%;
    right:5%;
} */ 

/* =====================
   MAIN LAYOUT
===================== */

.contact-main{
    position:relative;
    z-index:1;
    max-width:1280px;
    margin:0 auto;
    padding:0 24px 80px;
}

.contact-grid{
    display:grid;
    grid-template-columns:1fr 1.55fr;
    gap:28px;
    align-items:stretch;
}

/* =====================
   LEFT PANEL
===================== */

.left-panel{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.panel-card{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:32px 28px;
}

.panel-title{
    font-size:22px;
    font-weight:700;
    margin-bottom:8px;
    position:relative;
    padding-bottom:14px;
}

.panel-title::after{
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:40px;
    height:2px;
    background:var(--accent);
    border-radius:2px;
}

/* =====================
   CONTACT INFO
===================== */

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

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

.info-icon{
    width:46px;
    height:46px;
    border-radius:12px;
    background:rgba(30,167,255,0.1);
    border:1px solid rgba(30,167,255,0.2);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    font-size:16px;
    color:var(--accent);
}

.info-text strong{
    display:block;
    font-size:14px;
    font-weight:600;
    color:var(--text);
    margin-bottom:3px;
}

.info-text span,
.info-text a{
    font-size:13.5px;
    color:var(--text-muted);
    line-height:1.65;
    text-decoration:none;
    transition:color 0.2s;
}

.info-text a:hover{
    color:var(--accent);
}

/* =====================
   MAP
===================== */

.map-wrap{
    margin-top:20px;
    border-radius:10px;
    overflow:hidden;
    border:1px solid var(--border);
    flex:1;
    min-height:240px;
}

.map-wrap iframe{
    width:100%;
    height:100%;
    min-height:240px;
    display:block;
    filter:brightness(0.85) saturate(0.9);
}

/* =====================
   RIGHT PANEL — FORM
===================== */

.right-panel{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:40px 36px;
    display:flex;
    flex-direction:column;
}

.form-title{
    font-size:24px;
    font-weight:700;
    margin-bottom:8px;
    position:relative;
    padding-bottom:14px;
}

.form-title::after{
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:40px;
    height:2px;
    background:var(--accent);
    border-radius:2px;
}

.form-subtitle{
    font-size:14px;
    color:var(--text-muted);
    margin-bottom:32px;
    margin-top:8px;
}

/* =====================
   FORM GRID
===================== */

.form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-bottom:20px;
}

.form-group{
    display:flex;
    flex-direction:column;
    gap:7px;
}

.form-group.full{
    grid-column:1 / -1;
}

label{
    font-size:13px;
    font-weight:500;
    color:rgba(255,255,255,0.75);
    letter-spacing:0.3px;
}

label .req{
    color:var(--danger);
    margin-left:3px;
}

/* =====================
   INPUTS
===================== */

input[type="text"],
input[type="email"],
input[type="tel"],
textarea{
    width:100%;
    background:var(--bg-input);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    color:var(--text);

    font-family:'Poppins',sans-serif;

    font-size:14.5px;
    padding:13px 16px;

    outline:none;

    transition:
        border-color 0.25s,
        background 0.25s,
        box-shadow 0.25s;
}

input::placeholder,
textarea::placeholder{
    color:var(--text-dim);
    font-size:13.5px;
}

input:focus,
textarea:focus{
    border-color:var(--border-focus);
    background:var(--bg-input-focus);
    box-shadow:0 0 0 3px rgba(30,167,255,0.1);
}

input.error,
textarea.error{
    border-color:var(--danger) !important;
    box-shadow:0 0 0 3px rgba(255,77,109,0.1) !important;
}

textarea{
    resize:none;
    min-height:130px;
    line-height:1.7;
}

/* =====================
   ERRORS
===================== */

.field-error{
    font-size:12px;
    color:var(--danger);
    display:none;
    align-items:center;
    gap:4px;
}

.field-error.show{
    display:flex;
}

/* =====================
   SERVICES CHECKBOX
===================== */

.services-label{
    font-size:13px;
    font-weight:500;
    color:rgba(255,255,255,0.75);
    letter-spacing:0.3px;
    margin-bottom:4px;
}

.services-label .req{
    color:var(--danger);
    margin-left:3px;
}

.checkbox-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 24px;
    margin-top:4px;
}

.checkbox-item{
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
    font-size:14px;
    color:var(--text-muted);
    transition:color 0.2s;
    user-select:none;
}

.checkbox-item:hover{
    color:var(--text);
}

.checkbox-item input[type="checkbox"]{
    display:none;
}

.custom-check{
    width:18px;
    height:18px;

    border:1.5px solid rgba(30,167,255,0.35);
    border-radius:5px;

    background:var(--bg-input);

    flex-shrink:0;

    display:flex;
    align-items:center;
    justify-content:center;

    transition:all 0.2s;

    font-size:10px;
    color:transparent;
}

.checkbox-item input:checked ~ .custom-check{
    background:var(--accent);
    border-color:var(--accent);
    color:#fff;
}

.checkbox-error{
    font-size:12px;
    color:var(--danger);
    display:none;
    align-items:center;
    gap:4px;
    margin-top:4px;
}

.checkbox-error.show{
    display:flex;
}

/* =====================
   SUBMIT BUTTON
===================== */

.btn-submit{
    margin-top:28px;
    width:100%;
    padding:16px 28px;

    background:var(--accent);

    border:none;
    border-radius:var(--radius-sm);

    color:#fff;

    font-family:'Poppins',sans-serif;

    font-size:15px;
    font-weight:600;
    letter-spacing:0.5px;

    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    transition:all 0.3s;
}

.btn-submit:hover{
    background:var(--accent-dark);
    transform:translateY(-2px);
    box-shadow:0 12px 30px rgba(30,167,255,0.3);
}

.btn-submit:active{
    transform:translateY(0);
}

/* =====================
   TOAST
===================== */

.toast-wrap{
    position:fixed;
    top:28px;
    right:28px;
    z-index:9999;

    display:flex;
    flex-direction:column;
    gap:12px;

    pointer-events:none;
}

.toast{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:12px;

    padding:16px 20px;

    display:flex;
    align-items:flex-start;
    gap:14px;

    min-width:320px;
    max-width:380px;

    pointer-events:auto;

    box-shadow:0 20px 60px rgba(0,0,0,0.5);

    transform:translateX(120%);
    opacity:0;

    transition:
        transform 0.4s cubic-bezier(0.34,1.56,0.64,1),
        opacity 0.3s;
}

.toast.show{
    transform:translateX(0);
    opacity:1;
}

.toast-icon{
    width:36px;
    height:36px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:15px;

    flex-shrink:0;
}

.toast.success .toast-icon{
    background:rgba(34,197,94,0.15);
    color:var(--success);
}

.toast.error .toast-icon{
    background:rgba(255,77,109,0.15);
    color:var(--danger);
}

.toast-body strong{
    display:block;
    font-size:14px;
    font-weight:600;
    margin-bottom:3px;
}

.toast-body span{
    font-size:13px;
    color:var(--text-muted);
    line-height:1.5;
}

.toast-progress{
    position:absolute;
    bottom:0;
    left:0;

    height:3px;

    border-radius:0 0 12px 12px;

    animation:toastProgress 3.5s linear forwards;
}

.toast.success .toast-progress{
    background:var(--success);
}

.toast.error .toast-progress{
    background:var(--danger);
}

@keyframes toastProgress{
    from{
        width:100%;
    }

    to{
        width:0%;
    }
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1024px){

    .contact-grid{
        grid-template-columns:1fr 1.4fr;
        gap:22px;
    }

    .right-panel{
        padding:32px 28px;
    }
}

@media(max-width:992px){

    .hero-grid{
        grid-template-columns:1.5fr 1fr;
        text-align:center;
    }

     .hero-buttons{
        justify-content:center;
    }

    .hero-visual{
        margin-top:40px;
    }

    .contact-grid{
        grid-template-columns:1fr;
    } 
}

@media(max-width:768px){

    .contact-hero{
        padding:60px 0 48px;
    }

    /* .contact-hero h1{
        font-size:2.8rem;
    } */

    .hero-visual{
        height:450px;
    }

    .dashed-circle{
        width:320px;
        height:320px;
    }

    .contact-image{
        max-height:360px;
    }

    .floating-card{
        display:none;
    }

    .contact-main{
        padding:0 16px 60px;
    }

    .right-panel{
        order:-1;
        padding:28px 22px;
    }

    .form-row{
        grid-template-columns:1fr;
        gap:16px;
    }

    .checkbox-grid{
        grid-template-columns:1fr 1fr;
        gap:8px 16px;
    }

    .toast{
        min-width:280px;
        max-width:calc(100vw - 40px);
    }

    .toast-wrap{
        top:20px;
        right:20px;
    }
}

@media(max-width:480px){

     /* .contact-hero h1{
        font-size:2.2rem;
    } */

    .checkbox-grid{
        grid-template-columns:1fr;
    }

    .right-panel{
        padding:22px 18px;
    }

    .panel-card{
        padding:24px 18px;
    }

    .hero-buttons{
        flex-direction:column;
    }

    .btn-primary,
    .btn-outline{
        width:100%;
        text-align:center;
    }
}





















/* !------FIX FOR HERO ------- */
/* =========================================================
   CONTAINER
========================================================= */

.container{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:0 24px;
}

/* =========================================================
   HERO SECTION
========================================================= */

.contact-hero{
    position:relative;
    z-index:1;

    padding:40px 0 80px;

    overflow:hidden;
}

.contact-hero::before{
    content:"";

    position:absolute;

    width:500px;
    height:500px;

    top:-120px;
    right:-120px;

    /*background:radial-gradient(*/
    /*    circle,*/
    /*    rgba(37,99,235,0.18) 0%,*/
    /*    transparent 70%*/
    /*);*/

    pointer-events:none;
}

.contact-hero::after{
    content:'';

    position:absolute;

    bottom:0;
    left:50%;

    transform:translateX(-50%);

    width:160px;
    height:1px;

    /*background:linear-gradient(*/
    /*    90deg,*/
    /*    transparent,*/
    /*    var(--accent),*/
    /*    transparent*/
    /*);*/
}

/* =========================================================
   HERO GRID
========================================================= */

.hero-grid{
    display:grid;

    grid-template-columns:1.1fr 1fr;

    align-items:center;

    gap:60px;

    width:100%;
}

/* =========================================================
   HERO CONTENT
========================================================= */

.hero-content{
    position:relative;
    z-index:5;
}

.badge-premium{
    display:inline-flex;
    align-items:center;

    color:var(--green);

    letter-spacing:2px;
    font-size:0.8rem;
    font-weight:600;

    text-transform:uppercase;
}

.contact-hero h1{
    /* font-size:clamp(2.4rem, 5vw, 4.2rem); */

    line-height:1.1;

    margin:20px 0;

    font-weight:700;
}

.text-gradient{
    color:var(--primary);
}

.contact-hero p{
    color:var(--text-gray);

    font-size:1rem;

    line-height:1.8;

    max-width:580px;
}

/* =========================================================
   HERO VISUAL
========================================================= */

.hero-visual{
    position:relative;

    width:100%;

    min-height:580px;

    display:flex;
    align-items:center;
    justify-content:center;
}

.dashed-circle{
    position:absolute;

    width:500px;
    height:500px;

    border-radius:50%;

    border:2px dashed rgba(37,99,235,0.2);

    z-index:1;
}

.contact-image{
    position:relative;

    z-index:3;

    width:100%;
    max-width:420px;

    height:auto;

    object-fit:contain;

    filter:drop-shadow(
        0 20px 40px rgba(37,99,235,0.25)
    );
}

/* =========================================================
   FLOATING CARDS
========================================================= */

.floating-card{
    position:absolute;

    background:rgba(15,23,42,0.92);

    border:1px solid rgba(255,255,255,0.08);

    backdrop-filter:blur(10px);

    border-radius:16px;

    padding:14px 18px;

    display:flex;
    align-items:center;
    gap:14px;

    z-index:10;

    max-width:220px;
}

.floating-icon{
    width:45px;
    height:45px;

    min-width:45px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;
}

.blue-bg{
    background:rgba(37,99,235,0.15);
    color:#2563eb;
}

.green-bg{
    background:rgba(34,197,94,0.15);
    color:#22c55e;
}

.float-title{
    font-size:0.9rem;
    font-weight:600;
}

.float-sub{
    font-size:0.75rem;
    color:#94a3b8;
}

/* =========================================================
   CARD POSITIONS
========================================================= */

.card-1{
    top:12%;
    right:0;
}

.card-2{
    top:45%;
    left:0;
}

.card-3{
    bottom:12%;
    right:5%;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1024px){

    .hero-grid{
        grid-template-columns:1fr;

        gap:40px;

        text-align:center;
    }

    .hero-content{
        order:1;
    }

    .hero-visual{
        order:2;

        min-height:500px;
    }

    .contact-hero p{
        margin:0 auto;
    }

    .badge-premium{
        justify-content:center;
    }
}

@media(max-width:768px){
    .hero-visual{
        display: none;
    }

    .contact-hero{
        padding:60px 0;
    }

    .hero-grid{
        gap:30px;
    }

    .hero-visual{
        min-height:400px;
    }

    .dashed-circle{
        width:320px;
        height:320px;
    }

    .contact-image{
        max-width:300px;
    }

    .floating-card{
        display:none;
    }
}

@media(max-width:480px){

    .container{
        padding:0 16px;
    }

    .hero-visual{
        min-height:320px;
    }

    .dashed-circle{
        width:260px;
        height:260px;
    }

    .contact-image{
        max-width:240px;
    }

    /* .contact-hero h1{
        font-size:2.2rem;
    } */

    .contact-hero p{
        font-size:0.95rem;
    }
}



h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.1; font-weight: 800; }