/*==================================================
            CONTACT SECTION
==================================================*/

.contact-hero{

    position:relative;

    padding:120px 0;

    overflow:hidden;

    background:
    linear-gradient(
    180deg,
    #ffffff 0%,
    #fcfcfd 45%,
    #f7f9fc 100%);

}

/* Decorative Gold Circle */

.contact-hero::before{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    border-radius:50%;

    top:-280px;

    left:-180px;

    background:radial-gradient(circle,
    rgba(209,165,72,.16) 0%,
    rgba(209,165,72,.05) 45%,
    transparent 75%);

}

/* Decorative Blue Circle */

.contact-hero::after{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    bottom:-260px;

    right:-180px;

    background:radial-gradient(circle,
    rgba(28,55,109,.08) 0%,
    rgba(28,55,109,.03) 40%,
    transparent 72%);

}

.hero-overlay{

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(
    rgba(255,255,255,.92),
    rgba(255,255,255,.92));

    pointer-events:none;

}

/*==========================
Container
==========================*/

.contact-container{

    position:relative;

    z-index:2;

    width:100%;

    max-width:1320px;

    margin:auto;

    padding:0 25px;

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:70px;

    align-items:center;

}

/* Floating Lines */

.contact-container::before{

    content:"";

    position:absolute;

    width:160px;

    height:160px;

    border:2px solid rgba(209,165,72,.18);

    border-radius:24px;

    right:30px;

    top:-30px;

    transform:rotate(18deg);

}

.contact-container::after{

    content:"";

    position:absolute;

    width:120px;

    height:120px;

    border:2px solid rgba(28,55,109,.10);

    border-radius:18px;

    left:-40px;

    bottom:40px;

    transform:rotate(-12deg);

}

/*==================================================
LEFT FORM CARD
==================================================*/

.contact-form-card{

    position:relative;

    background:#ffffff;

    border-radius:34px;

    padding:55px;

    overflow:hidden;

    border:1px solid #ececec;

    box-shadow:

    0 18px 60px rgba(0,0,0,.07);

    transition:.45s;

}

/* Premium Gold Line */

.contact-form-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:6px;

    background:

    linear-gradient(
    90deg,
    #D1A548,
    #F3D895,
    #1C376D);

}

/* Soft Glow */

.contact-form-card::after{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    border-radius:50%;

    right:-150px;

    top:-150px;

    background:

    radial-gradient(circle,

    rgba(209,165,72,.08),

    transparent 70%);

}

.contact-form-card:hover{

    transform:translateY(-8px);

    box-shadow:

    0 30px 70px rgba(0,0,0,.10);

}

/*==========================
Heading
==========================*/

.contact-form-card h2{

    font-size:42px;

    color:#1C376D;

    font-weight:700;

    margin-bottom:12px;

    position:relative;

    z-index:2;

}

.contact-form-card p{
    color: #666;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 7px;
    position: relative;
    z-index: 2;
    text-align: justify !important;
}

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

.contact-form-card form{

    position:relative;

    z-index:5;

}

.input-group{

    margin-bottom:25px;

}

.two-column{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:22px;

}

/*==================================================
LABELS
==================================================*/

.input-group label{

    display:block;

    margin-bottom:10px;

    font-size:15px;

    font-weight:600;

    color:#1C376D;

    letter-spacing:.3px;

}

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

.input-group input,
.input-group textarea{

    width:100%;

    padding:18px 22px;

    background:#FAFBFD;

    border:1px solid #E7EAF0;

    border-radius:18px;

    outline:none;

    font-size:15px;

    color:#333;

    transition:all .35s ease;

    font-family:inherit;

}

/* Placeholder */

.input-group input::placeholder,
.input-group textarea::placeholder{

    color:#9AA3B2;

}

/*==================================================
TEXTAREA
==================================================*/

.input-group textarea{

    min-height:190px;

    resize:vertical;

    line-height:1.7;

}

/*==================================================
FOCUS EFFECT
==================================================*/

.input-group input:focus,
.input-group textarea:focus{

    background:#fff;

    border-color:#D1A548;

    box-shadow:

        0 0 0 4px rgba(209,165,72,.12),

        0 10px 30px rgba(209,165,72,.10);

}

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

.input-group input:hover,
.input-group textarea:hover{

    border-color:#D1A548;

}

/*==================================================
AUTOFILL
==================================================*/

input:-webkit-autofill{

    -webkit-box-shadow:0 0 0 1000px #fff inset;

    -webkit-text-fill-color:#333;

}

/*==================================================
OPTIONAL ICON SUPPORT
==================================================*/

.input-group{

    position:relative;

}

.input-group i{

    position:absolute;

    right:18px;

    top:49px;

    color:#D1A548;

    font-size:16px;

    pointer-events:none;

}

/*==================================================
SMOOTH TRANSITION
==================================================*/

.input-group input,
.input-group textarea{

    transition:

    border .35s,

    box-shadow .35s,

    background .35s,

    transform .25s;

}

.input-group input:focus,
.input-group textarea:focus{

    transform:translateY(-2px);

}

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

.send-btn{

    position:relative;

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    padding:18px 35px;

    border:none;

    border-radius:60px;

    cursor:pointer;

    overflow:hidden;

    background:linear-gradient(
    135deg,
    #1C376D 0%,
    #284D91 100%);

    color:#fff;

    font-size:17px;

    font-weight:600;

    letter-spacing:.5px;

    transition:.45s ease;

    box-shadow:
    0 18px 40px rgba(28,55,109,.20);

}

/* Shine Animation */

.send-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    background:

    linear-gradient(

    120deg,

    transparent,

    rgba(255,255,255,.45),

    transparent);

    transform:skewX(-25deg);

    transition:1s;

}

/* Gold Bottom Line */

.send-btn::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:0;

    transform:translateX(-50%);

    width:0;

    height:4px;

    border-radius:50px;

    background:#D1A548;

    transition:.4s;

}

/* Hover */

.send-btn:hover{

    transform:translateY(-4px);

    box-shadow:

    0 25px 55px rgba(28,55,109,.28);

}

/* Shine */

.send-btn:hover::before{

    left:150%;

}

/* Gold Line */

.send-btn:hover::after{

    width:100%;

}

/* Click */

.send-btn:active{

    transform:scale(.98);

}

/* Icon */

.send-btn i{

    font-size:18px;

}

/*==================================================
            SUCCESS
==================================================*/

.success-message{

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px 22px;

    margin-bottom:30px;

    border-radius:18px;

    background:#F4FBF6;

    border-left:5px solid #2DBE60;

    color:#2A7A42;

    font-weight:500;

    box-shadow:

    0 8px 25px rgba(45,190,96,.08);

}

.success-message i{

    font-size:24px;

    color:#2DBE60;

}

/*==================================================
            ERROR
==================================================*/

.error-message{

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px 22px;

    margin-bottom:30px;

    border-radius:18px;

    background:#FFF6F6;

    border-left:5px solid #E74C3C;

    color:#B93A2D;

    font-weight:500;

    box-shadow:

    0 8px 25px rgba(231,76,60,.08);

}

.error-message i{

    font-size:24px;

    color:#E74C3C;

}

/*==================================================
            FADE IN
==================================================*/

.contact-form-card{

    animation:cardFade .8s ease;

}

@keyframes cardFade{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
            CONTACT INFORMATION
==================================================*/

.contact-info{

    position:relative;

    padding-left:20px;

    z-index:2;

}

/* Decorative Gold Line */

.contact-info::before{

    content:"";

    position:absolute;

    left:0;

    top:8px;

    width:4px;

    height:110px;

    border-radius:20px;

    background:linear-gradient(
    180deg,
    #D1A548,
    #F3D793);

}

/*==================================================
BADGE
==================================================*/

.section-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    border-radius:50px;

    background:#FDF7EC;

    border:1px solid rgba(209,165,72,.25);

    color:#B78627;

    font-size:14px;

    font-weight:600;

    letter-spacing:.6px;

    text-transform:uppercase;

    margin-bottom:25px;

    box-shadow:

    0 8px 20px rgba(209,165,72,.10);

}

.section-tag::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:#D1A548;

}

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

.contact-info h1{

    font-size:54px;

    line-height:1.15;

    color:#1C376D;

    font-weight:700;

    margin-bottom:25px;

    letter-spacing:-1px;

}

.contact-info h1 span{

    color:#D1A548;

}

.contact-info>p{

    font-size:17px;

    line-height:1.9;

    color:#666;

    margin-bottom:45px;

    max-width:520px;

}

/*==================================================
INFO BOX
==================================================*/

.info-box{

    position:relative;

    display:flex;

    align-items:center;

    gap:22px;

    padding:26px;

    margin-bottom:22px;

    background:#ffffff;

    border-radius:24px;

    border:1px solid #ECECEC;

    overflow:hidden;

    transition:.45s;

    box-shadow:

    0 12px 35px rgba(0,0,0,.05);

}

/* Gold Strip */

.info-box::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:100%;

    background:#D1A548;

    transform:scaleY(0);

    transition:.4s;

}

.info-box:hover{

    transform:translateX(12px);

    border-color:#D1A548;

    box-shadow:

    0 22px 45px rgba(0,0,0,.09);

}

.info-box:hover::before{

    transform:scaleY(1);

}

/*==================================================
ICONS
==================================================*/

.info-icon{

    width:72px;

    height:72px;

    min-width:72px;

    border-radius:22px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
    135deg,
    #D1A548,
    #E9C979);

    color:#fff;

    font-size:28px;

    transition:.4s;

    box-shadow:

    0 12px 25px rgba(209,165,72,.25);

}

.info-box:hover .info-icon{

    transform:rotate(-10deg) scale(1.08);

}

/*==================================================
TEXT
==================================================*/

.info-content{

    flex:1;

}

.info-content h3{

    color:#1C376D;

    font-size:22px;

    font-weight:700;

    margin-bottom:8px;

}

.info-content p{

    color:#666;

    line-height:1.8;

    margin:0;

}

.info-content a{

    color:#555;

    text-decoration:none;

    transition:.35s;

    font-weight:500;

    word-break:break-word;

}

.info-content a:hover{

    color:#D1A548;

}

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

.contact-info::after{

    content:"";

    position:absolute;

    width:170px;

    height:170px;

    border-radius:50%;

    right:-70px;

    bottom:-60px;

    background:radial-gradient(circle,

    rgba(209,165,72,.10),

    transparent 72%);

    z-index:-1;

}

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

@media(max-width:1200px){

.contact-container{

    gap:45px;

}

.contact-info h1{

    font-size:46px;

}

.contact-form-card{

    padding:45px;

}

}


@media(max-width:992px){

.contact-container{

    grid-template-columns:1fr;

    gap:60px;

}

.contact-info{

    order:1;

    padding-left:0;

}

.contact-form-card{

    order:2;

}

.contact-info::before{

    display:none;

}

.contact-info h1{

    font-size:40px;

}

.contact-info>p{

    max-width:100%;

}

}


@media(max-width:768px){

.contact-hero{

    padding:70px 0;

}

.contact-container{

    padding:0 20px;

}

.contact-form-card{

    padding:30px;

    border-radius:24px;

}

.two-column{

    grid-template-columns:1fr;

    gap:0;

}

.contact-form-card h2{

    font-size:32px;

}

.contact-info h1{

    font-size:34px;

}

.info-box{

    padding:20px;

    gap:18px;

}

.info-icon{

    width:60px;

    height:60px;

    min-width:60px;

    border-radius:18px;

    font-size:22px;

}

.send-btn{

    width:100%;

}

}


@media(max-width:480px){

.contact-form-card{

    padding:22px;

}

.contact-info h1{

    font-size:28px;

}

.contact-form-card h2{

    font-size:28px;

}

.section-tag{

    font-size:12px;

    padding:10px 18px;

}

.info-content h3{

    font-size:18px;

}

.input-group input,
.input-group textarea{

    padding:15px 18px;

}

}

/*==================================================
            PREMIUM EFFECTS
==================================================*/

.contact-form-card,
.info-box,
.send-btn,
input,
textarea{

    transition:all .35s cubic-bezier(.4,0,.2,1);

}

.info-box:hover{

    transform:translateY(-6px);

}

.contact-form-card:hover{

    transform:translateY(-8px);

}

/*==================================================
            FLOAT
==================================================*/

.contact-form-card{

    animation:floatCard 5s ease-in-out infinite;

}

@keyframes floatCard{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-6px);

}

100%{

transform:translateY(0px);

}

}

/*==================================================
            FADE
==================================================*/

.contact-info{

    animation:fadeRight .9s ease;

}

.contact-form-card{

    animation:fadeLeft .9s ease;

}

@keyframes fadeLeft{

from{

opacity:0;

transform:translateX(-40px);

}

to{

opacity:1;

transform:translateX(0);

}

}

@keyframes fadeRight{

from{

opacity:0;

transform:translateX(40px);

}

to{

opacity:1;

transform:translateX(0);

}

}

::selection{

background:#D1A548;

color:#fff;

}

::-moz-selection{

background:#D1A548;

color:#fff;

}

html{

scroll-behavior:smooth;

}

/* Chrome */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#f4f4f4;

}

::-webkit-scrollbar-thumb{

background:#1C376D;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#D1A548;

}

.contact-hero .dot{

position:absolute;

width:8px;

height:8px;

border-radius:50%;

background:#D1A548;

opacity:.25;

animation:floatDots 8s infinite;

}

@keyframes floatDots{

    0%{
        transform:translateY(0);
        opacity:.2;
    }

    50%{
        transform:translateY(-25px);
        opacity:.8;
    }

    100%{
        transform:translateY(0);
        opacity:.2;
    }

}