/* ==========================
   ROOT VARIABLES
========================== */

:root {
  /* Primary */
  --primary: #6344F5;
  --primary-light: #f4efff;
  --primary-bg: #F8F7FF;

  /* Text */
  --text-dark: #1f2937;
  --text-medium: #48556b;
  --text-light: #6f7b92;
  --text-muted: #76819a;
  --text-gray: #a1acc0;
  --text-placeholder: #b2b7c6;

  /* Backgrounds */
  --bg-body: #fafafa;
  --bg-white: #ffffff;
  --bg-social: #eef2f7;
  --bg-input: #f4f5f8;

  /* Border */
  --border-light: #ececf8;

  /* Shadows */
  --shadow-card: 0 20px 40px rgba(0, 0, 0, 0.08);

  /* Radius */
  --radius-card: 24px;
  --radius-large: 34px;
  --radius-medium: 18px;
  --radius-small: 12px;
  --radius-circle: 50%;
}

/* ==========================
   RESET
========================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
}

body {
  background: var(--bg-body);
}

/* ==========================
   hero section
========================== */
.contact-section{
    max-width:1200px;
    margin:auto;
    background:#fff;
    border-radius:28px;
    overflow:hidden;
    display:grid;
    grid-template-columns:330px 1fr;
    box-shadow:0 10px 40px rgba(0,0,0,.08);
    margin-top: 100px;
    margin-bottom: 50px;
        position:relative;
    z-index:100;
    margin-top:-120px;
    margin-bottom:50px;
}



/* LEFT PANEL */

.contact-left{
    position:relative;
    padding:30px;
    background:
    radial-gradient(circle at top left,
    rgba(190,130,255,.28),
    transparent 60%),
    radial-gradient(circle at bottom right,
    rgba(255,180,120,.18),
    transparent 60%),
    #faf8ff;
}

.contact-left::before{
    content:"";
    position:absolute;
    width:800px;
    height:800px;
    border:3px solid rgba(255,255,255,.6);
    border-radius:50%;
    left:-550px;
    bottom:-180px;
}

.contact-left h2{
    font-size:27px;
    font-weight:700;
    color:#111827;
    margin-bottom:20px;
}

.contact-left p{
    color:#6b7280;
    line-height:1.7;
    margin-bottom:50px;
     font-size:15px;
}

.info-item{
    display:flex;
    gap:18px;
    margin-bottom:35px;
    color:#111827;
     font-size:15px;
}

.info-item i{
    font-size:22px;
    margin-top:2px;
}

.info-item div{
    display:flex;
    flex-direction:column;
    gap:4px;
}

/* RIGHT */

.contact-right{
    padding:45px 40px;
}

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

.input-group{
    margin-bottom:28px;
}

.input-group label{
    display:block;
    font-size:13px;
    font-weight:700;
    color:#9ca3af;
    letter-spacing:1px;
    margin-bottom:14px;
}

.message-label{
    color:#5b4cff !important;
}

.input-group input{
    width:100%;
    border:none;
    border-bottom:1px solid #e5e7eb;
    padding-bottom:14px;
    font-size:18px;
    color:#111827;
    outline:none;
}

.input-group textarea{
    width:100%;
    height:140px;
    border:none;
    border-bottom:1px solid #e5e7eb;
    resize:none;
    outline:none;
    font-size:18px;
    padding-top:10px;
    color:#111827;
}

.input-group textarea::placeholder{
    color:#c5c7cf;
}

.send-btn{
    margin-top:20px;
    border:none;
    background:#635bff;
    color:#fff;
    font-weight:600;
    font-size:16px;
    padding:16px 30px;
    border-radius:8px;
    cursor:pointer;
    box-shadow:0 10px 20px rgba(99,91,255,.25);
    transition:.3s;
}

.send-btn:hover{
    transform:translateY(-2px);
}

/* RESPONSIVE */

@media(max-width:900px){

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

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

.contact-left{
    padding:30px;
}

.contact-right{
    padding:30px;
}

.contact-left h2{
    font-size:32px;
}
}


.error-message{
    display:block;
    margin-top:6px;
    color:#EF4444;
    font-size:13px;
    font-weight:500;
}

.input-error{
    border:1px solid #EF4444 !important;
    box-shadow:0 0 0 2px rgba(239,68,68,.15);
}

.input-success{
    border:1px solid #22C55E !important;
}




    /* =====================================================
   CTA SECTION
===================================================== */

.cta-section{
    padding:80px 20px;
    background:#ffffff;
}

.cta-card{

    position:relative;
    overflow:hidden;

    max-width:1280px;
    margin:auto;

    border-radius:32px;

    background:
    linear-gradient(
        90deg,
        #f7f8fd 0%,
        #f9f8ff 55%,
        #fff4f7 100%
    );

    border:1px solid #e8eaf6;

    box-shadow:
        0 25px 60px rgba(15,23,42,.06);

}


/* ==========================================
   Background Wave
========================================== */

.cta-bg-pattern{

    position:absolute;

    inset:0;

    pointer-events:none;

    background-image:
    radial-gradient(circle at 78% 30%,rgba(124,77,255,.08),transparent 48%),

    radial-gradient(circle at 92% 90%,rgba(255,80,180,.08),transparent 42%);

}


/* Animated Curved Lines */

.cta-bg-pattern::before{

    content:"";

    position:absolute;

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

    width:650px;
    height:650px;

    opacity:.55;

    background:url("../assets/images/wave-pattern.svg") center/contain no-repeat;

    animation:waveFloat 10s ease-in-out infinite;

}


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

.cta-content{

    position:relative;

    z-index:2;

}


/* ==========================================
   HEADING
========================================== */

.cta-title{

    font-family:"Plus Jakarta Sans",sans-serif;

    font-weight:700;

    color:#111827;

    letter-spacing:-.03em;

}

.cta-title span{

    background:linear-gradient(90deg,#6C63FF,#7C3AED);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}


/* ==========================================
   SUBTEXT
========================================== */

.cta-subtitle{

    color:#64748B;

    font-size:15px;

    line-height:1.7;

}

.cta-note{

    color:#94A3B8;

    font-size:14px;

}


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

.cta-button{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:18px 34px;

    border-radius:999px;

    text-decoration:none;

    color:#fff;

    font-weight:600;

    background:
    linear-gradient(
        135deg,
        #5B4CF8,
        #7C3AED
    );

    box-shadow:
        0 14px 40px rgba(92,74,255,.35);

    transition:
        transform .35s,
        box-shadow .35s;

}

.cta-button:hover{

    transform:
        translateY(-4px);

    box-shadow:
        0 18px 48px rgba(92,74,255,.45);

}

.cta-button svg{

    transition:.35s;

}

.cta-button:hover svg:last-child{

    transform:
        translateX(5px);

}


/* ==========================================
   LOGO
========================================== */

.cta-logo{

    transition:.35s;

}

.cta-card:hover .cta-logo{

    transform:scale(1.04);

}


/* ==========================================
   ANIMATIONS
========================================== */

@keyframes waveFloat{

    0%{

        transform:
        translateY(0)
        rotate(0deg);

    }

    50%{

        transform:
        translateY(-12px)
        rotate(2deg);

    }

    100%{

        transform:
        translateY(0)
        rotate(0deg);

    }

}

/* =====================================================
   LARGE DESKTOP (1600px+)
===================================================== */

@media (min-width:1600px){

    .cta-card{
        max-width:1500px;
        padding:55px 70px;
    }

    .cta-title{
        font-size:54px;
    }

    .cta-button{
        padding:20px 42px;
        font-size:17px;
    }

    .cta-logo{
        width:220px;
    }

}

/* =====================================================
   DESKTOP
===================================================== */

@media (max-width:1400px){

    .cta-card{
        padding:48px;
    }

    .cta-title{
        font-size:42px;
    }

}

/* =====================================================
   LAPTOP
===================================================== */

@media (max-width:1200px){

    .cta-card{
        padding:42px;
    }

    .cta-title{
        font-size:38px;
    }

    .cta-button{
        padding:16px 30px;
    }

    .cta-logo{
        width:190px;
    }

}

/* =====================================================
   TABLET
===================================================== */

@media (max-width:992px){

    .cta-content{

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

        text-align:center;

        gap:35px;

    }

    .cta-left{

        display:flex;
        flex-direction:column;
        align-items:center;

        gap:25px;

    }

    .cta-title{

        font-size:34px;

    }

    .cta-subtitle,
    .cta-note{

        max-width:620px;
        margin:auto;

    }

    .cta-button{

        width:auto;

    }

}

/* =====================================================
   MOBILE LANDSCAPE
===================================================== */

@media (max-width:768px){

    .cta-card{

        border-radius:24px;

        padding:35px 24px;

    }

    .cta-title{

        font-size:30px;
        line-height:1.3;

    }

    .cta-logo{

        width:170px;

    }

    .cta-button{

        width:100%;

        justify-content:center;

        padding:16px;

    }

}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width:576px){

    .cta-card{

        padding:28px 20px;

        border-radius:20px;

    }

    .cta-title{

        font-size:26px;

    }

    .cta-subtitle{

        font-size:14px;

    }

    .cta-note{

        font-size:13px;

    }

    .cta-logo{

        width:150px;

    }

    .cta-button{

        font-size:14px;

        gap:10px;

    }

}

/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width:420px){

    .cta-card{

        padding:22px 18px;

    }

    .cta-title{

        font-size:22px;

    }

    .cta-logo{

        width:135px;

    }

    .cta-button{

        padding:15px;

        font-size:13px;

    }

}

/* =====================================================
   320px DEVICES
===================================================== */

@media (max-width:320px){

    .cta-title{

        font-size:20px;

    }

    .cta-logo{

        width:120px;

    }

    .cta-subtitle{

        font-size:13px;

    }

    .cta-note{

        font-size:12px;

    }

    .cta-button{

        padding:14px;

        font-size:12px;

    }

}

/* ==========================================================
   PREMIUM BACKGROUND WAVE
========================================================== */

.cta-card::before{

    content:"";

    position:absolute;

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

    width:700px;
    height:700px;

    border-radius:50%;

    background:
        repeating-radial-gradient(
            circle,
            rgba(124,77,255,.08) 0px,
            rgba(124,77,255,.08) 2px,
            transparent 2px,
            transparent 18px
        );

    animation:waveRotate 22s linear infinite;

    opacity:.8;

    pointer-events:none;

}

.cta-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(circle at 85% 40%,
        rgba(124,77,255,.12),
        transparent 45%);

    pointer-events:none;

}


/* ==========================================================
   FLOATING CARD
========================================================== */

.cta-card{

    animation:cardFloat 7s ease-in-out infinite;

}


/* ==========================================================
   BUTTON SHINE EFFECT
========================================================== */

.cta-button{

    position:relative;

    overflow:hidden;

}

.cta-button::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:60%;
    height:100%;

    background:
    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    transform:skewX(-25deg);

    transition:0s;

}

.cta-button:hover::before{

    left:140%;

    transition:1.2s;

}


/* ==========================================================
   BUTTON GLOW
========================================================== */

.cta-button:hover{

    box-shadow:
        0 18px 45px rgba(92,74,255,.45),
        0 0 0 8px rgba(92,74,255,.08);

}


/* ==========================================================
   LOGO HOVER
========================================================== */

.cta-logo{

    transition:.45s;

}

.cta-card:hover .cta-logo{

    transform:
        translateY(-4px)
        scale(1.03);

}


/* ==========================================================
   TITLE ANIMATION
========================================================== */

.cta-title{

    animation:titleFade .8s ease both;

}

.cta-subtitle{

    animation:titleFade 1s .2s both;

}

.cta-note{

    animation:titleFade 1s .35s both;

}

.cta-button{

    animation:titleFade 1s .5s both;

}


/* ==========================================================
   HOVER LIFT
========================================================== */

.cta-card{

    transition:
        transform .4s ease,
        box-shadow .4s ease;

}

.cta-card:hover{

    transform:translateY(-6px);

    box-shadow:
        0 30px 80px rgba(15,23,42,.12);

}


/* ==========================================================
   KEYFRAMES
========================================================== */

@keyframes waveRotate{

    from{

        transform:
        rotate(0deg);

    }

    to{

        transform:
        rotate(360deg);

    }

}

@keyframes cardFloat{

    0%,100%{

        transform:
        translateY(0px);

    }

    50%{

        transform:
        translateY(-5px);

    }

}

@keyframes titleFade{

    from{

        opacity:0;

        transform:
        translateY(20px);

    }

    to{

        opacity:1;

        transform:
        translateY(0);

    }

}

.cta-bg-pattern{
    position:absolute;
    right:0;
    top:0;
    width:45%;
    height:100%;
    background:url("../assets/images/cta-wave-pattern.svg") right center/contain no-repeat;
    opacity:.9;
    pointer-events:none;
}