/* ==========================================
   Premium Contact Banner - Final Version
========================================== */

.contact-banner{
    position:relative;
    width:100%;
    height:470px;                 /* Reduced from 520px */
    margin-top:-120px;            /* Floating header overlap */
    padding-top:120px;
    overflow:hidden;
    background:linear-gradient(135deg,#fffdf8,#faf4ff,#fff8f0);
    isolation:isolate;
}

/* =========================
   Animated Background
========================= */

.banner-gradient{
    position:absolute;
    inset:-30%;
    background:
        radial-gradient(circle at 20% 30%, rgba(212,165,116,.35), transparent 35%),
        radial-gradient(circle at 80% 70%, rgba(122,17,122,.22), transparent 42%),
        radial-gradient(circle at 55% 25%, rgba(255,224,178,.45), transparent 32%);
    animation:bannerFlow 14s ease-in-out infinite alternate;
}

/* =========================
   Floating Glow Effects
========================= */

.banner-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(90px);
    pointer-events:none;
}

.glow-left{
    width:280px;
    height:280px;
    background:#e8c693;
    top:-70px;
    left:-50px;
    opacity:.55;
    animation:floatBlob 8s ease-in-out infinite;
}

.glow-right{
    width:330px;
    height:330px;
    background:#8b2f8d;
    bottom:-120px;
    right:-90px;
    opacity:.18;
    animation:floatBlob 10s ease-in-out infinite reverse;
}

/* =========================
   Content
========================= */

.banner-content{
    position:relative;
    z-index:2;
    max-width:1400px;
    height:100%;
    margin:auto;
    padding:0 6% 65px;      /* Content slightly above bottom */
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
}

.banner-label{
    display:flex;
    align-items:center;
    gap:18px;
}

.banner-label span{
    width:90px;
    height:2px;
    border-radius:999px;
    background:linear-gradient(to right,#d4a574,#b8860b);
}

.banner-label h1{
    margin:0;
    font-family:"Cormorant Garamond",serif;
    font-size:clamp(3rem,5vw,5rem);
    font-weight:700;
    color:#7a117a;
    line-height:1;
}

.banner-subtitle{
    margin:16px 0 0 108px;
    max-width:520px;
    font-family:"Poppins",sans-serif;
    font-size:1.05rem;
    line-height:1.8;
    color:#6b5a62;
}

/* =========================
   Mouse Follow Light
========================= */

.contact-banner::after{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,.35), transparent 70%);
    left:var(--mx,50%);
    top:var(--my,42%);
    transform:translate(-50%,-50%);
    pointer-events:none;
    transition:left .2s linear, top .2s linear;
}

/* =========================
   Animations
========================= */

@keyframes bannerFlow{

    0%{
        transform:translate(-5%,2%) rotate(0deg) scale(1);
    }

    50%{
        transform:translate(4%,-4%) rotate(7deg) scale(1.08);
    }

    100%{
        transform:translate(6%,3%) rotate(-5deg) scale(1.03);
    }

}

@keyframes floatBlob{

    0%{
        transform:translate(0,0) scale(1);
    }

    50%{
        transform:translate(25px,-18px) scale(1.08);
    }

    100%{
        transform:translate(-12px,18px) scale(.98);
    }

}

/* =========================
   Tablet
========================= */

@media (max-width:992px){

    .contact-banner{
        height:430px;
    }

}

/* =========================
   Mobile
========================= */

@media (max-width:768px){

    .contact-banner{
        height:355px;        /* Reduced from 420px */
        margin-top:-100px;
        padding-top:100px;
    }

    .banner-content{
        padding:0 24px 48px;
    }

    .banner-label{
        gap:12px;
    }

    .banner-label span{
        width:55px;
    }

    .banner-label h1{
        font-size:clamp(2.5rem,8vw,3.4rem);
    }

    .banner-subtitle{
        margin:14px 0 0 67px;
        max-width:260px;
        font-size:.95rem;
        line-height:1.7;
    }

}