/*==================================*
* CONTACT BANNER
*==================================*/

.contact-banner{
    position:relative;
    width:100%;
    height:45vh;

    background:
        linear-gradient(
            rgba(11,43,38,.65),
            rgba(11,43,38,.65)
        ),
        url("../images/productbg.jpeg");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

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

    overflow:hidden;

    /* Premium entrance */
    animation:contactBannerReveal 1.1s ease both;
}


/*==================================*
* BANNER BACKGROUND ANIMATION
*==================================*/

.contact-banner::before{

    content:"";

    position:absolute;

    inset:-5%;

    background:
        url("../images/productbg.jpeg")
        center/cover
        no-repeat;

    z-index:0;

    opacity:.18;

    transform:scale(1.05);

    animation:
        contactBannerZoom 14s ease-in-out infinite alternate;
}


/*==================================*
* PREMIUM GOLD GLOW
*==================================*/

.contact-banner::after{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.14),
            transparent 68%
        );

    pointer-events:none;

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

}


/*==================================*
* BANNER TITLE
*==================================*/

.contact-banner h1{

    position:relative;

    z-index:2;

    font-family:'Cormorant Garamond',serif;

    font-size:54px;

    font-weight:700;

    color:#D4AF37;

    text-transform:uppercase;

    margin:0;

    letter-spacing:1px;

    text-shadow:
        0 0 10px rgba(212,175,55,.18);

    animation:
        contactTitleReveal 1s .25s ease both;

}


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

.contact-banner .back-arrow{

    position:absolute;

    top:30px;

    left:40px;

    z-index:5;

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 28px;

    background:#D4AF37;

    color:#0B2B26;

    text-decoration:none;

    border-radius:30px;

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

    font-size:15px;

    font-weight:600;

    letter-spacing:.4px;

    box-shadow:
        0 8px 20px rgba(0,0,0,.18);

    transition:
        background .35s ease,
        color .35s ease,
        transform .35s ease,
        box-shadow .35s ease;

    animation:
        contactBackReveal .9s .35s ease both;
}


/*==================================*
* BACK ARROW ICON
*==================================*/

.contact-banner .back-arrow i{

    transition:
        transform .35s ease;

}


/*==================================*
* BACK BUTTON HOVER
*==================================*/

.contact-banner .back-arrow:hover{

    background:#FFF9F0;

    color:#0B2B26;

    transform:translateX(6px);

    box-shadow:
        0 12px 28px rgba(0,0,0,.25);

}


.contact-banner .back-arrow:hover i{

    transform:translateX(-4px);

}


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

.contact{

    position:relative;

    background:#0B2B26;

    padding:70px 8%;

    overflow:hidden;

}


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

.contact::before{

    content:"";

    position:absolute;

    width:450px;
    height:450px;

    top:-220px;
    left:-180px;

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.08),
            transparent 70%
        );

    pointer-events:none;

    animation:
        contactGlowMove 9s ease-in-out infinite alternate;

}


/*==================================*
* SECOND DECORATIVE GLOW
*==================================*/

.contact::after{

    content:"";

    position:absolute;

    width:380px;
    height:380px;

    right:-180px;
    bottom:-180px;

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.06),
            transparent 70%
        );

    pointer-events:none;

    animation:
        contactGlowMove2 10s ease-in-out infinite alternate;

}


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

.contact-container{

    position:relative;

    z-index:2;

    max-width:1250px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1.15fr;

    gap:80px;

    align-items:flex-start;

}


/*==================================*
* LEFT SIDE
*==================================*/

.contact-left .sub-title{

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

    font-size:13px;

    font-weight:600;

    letter-spacing:3px;

    text-transform:uppercase;

    color:#D4AF37;

    margin-bottom:10px;

    animation:
        contactFadeUp .8s .15s ease both;

}


.contact-left h2{

    font-family:'Cormorant Garamond',serif;

    font-size:50px;

    font-weight:600;

    line-height:1.15;

    color:#FFF9F0;

    margin-bottom:15px;

    animation:
        contactFadeUp .8s .25s ease both;

}


.contact-left h2 span{

    font-style:italic;

    color:#D4AF37;

}


/*==================================*
* CONTACT LINE
*==================================*/

.contact-line{

    width:55px;

    height:2px;

    background:#D4AF37;

    margin-bottom:30px;

    transform-origin:left;

    animation:
        contactLineReveal .8s .45s ease both;

}


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

.contact-info{

    display:flex;

    flex-direction:column;

    gap:24px;

}


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

.info-box{

    display:flex;

    align-items:flex-start;

    gap:15px;

    padding:8px 10px;

    border-radius:10px;

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

    animation:
        contactInfoReveal .7s ease both;

}


/* Staggered entrance */

.info-box:nth-child(1){
    animation-delay:.35s;
}

.info-box:nth-child(2){
    animation-delay:.45s;
}

.info-box:nth-child(3){
    animation-delay:.55s;
}

.info-box:nth-child(4){
    animation-delay:.65s;
}

.info-box:nth-child(5){
    animation-delay:.75s;
}


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

.info-box:hover{

    transform:translateX(7px);

    background:rgba(212,175,55,.045);

    box-shadow:
        0 8px 25px rgba(0,0,0,.12);

}


/*==================================*
* INFO ICON
*==================================*/

.info-box i{

    color:#D4AF37;

    font-size:18px;

    width:20px;

    margin-top:5px;

    transition:
        transform .35s ease,
        color .35s ease,
        text-shadow .35s ease;

}


.info-box:hover i{

    transform:
        translateY(-2px)
        scale(1.12);

    color:#E4C96A;

    text-shadow:
        0 0 12px rgba(212,175,55,.35);

}


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

.info-box h4{

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

    font-size:13px;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

    color:#D4AF37;

    margin-bottom:5px;

}


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

.info-box p{

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

    font-size:16px;

    font-weight:400;

    line-height:1.7;

    color:#FFF9F0;

    margin:0;

}


/*==================================*
* INFO LINKS
*==================================*/

.info-box p a{

    color:inherit;

    text-decoration:none;

    transition:
        color .3s ease;

}


.info-box p a:hover{

    color:#D4AF37;

}


/*==================================*
* ADDRESS LINK
*==================================*/

.address-link{

    color:inherit;

    text-decoration:none;

    transition:
        color .3s ease;

}


.address-link:hover{

    color:#D4AF37;

}


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

.contact-form{

    background:#12372A;

    border:1px solid rgba(212,175,55,.25);

    border-radius:12px;

    padding:35px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.25);

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

    animation:
        contactFormReveal .9s .3s ease both;

}


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

.contact-form:hover{

    transform:translateY(-5px);

    border-color:
        rgba(212,175,55,.42);

    box-shadow:
        0 18px 45px rgba(0,0,0,.32),
        0 0 30px rgba(212,175,55,.045);

}


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

.contact-form h3{

    font-family:'Cormorant Garamond',serif;

    font-size:38px;

    font-weight:600;

    color:#FFF9F0;

    margin-bottom:25px;

}


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

.form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

}


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

.contact-form input,
.contact-form select,
.contact-form textarea{

    width:100%;

    padding:14px 16px;

    margin-bottom:18px;

    border:1px solid rgba(212,175,55,.25);

    border-radius:8px;

    background:#1A4636;

    outline:none;

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

    font-size:15px;

    color:#FFF9F0;

    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease,
        transform .3s ease;

}


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

.contact-form input:hover,
.contact-form select:hover,
.contact-form textarea:hover{

    border-color:
        rgba(212,175,55,.48);

    background:#1D4B3A;

}


/*==================================*
* PLACEHOLDER
*==================================*/

.contact-form input::placeholder,
.contact-form textarea::placeholder{

    color:#D6D6D6;

    transition:
        color .3s ease;

}


/*==================================*
* PLACEHOLDER FOCUS
*==================================*/

.contact-form input:focus::placeholder,
.contact-form textarea:focus::placeholder{

    color:rgba(214,214,214,.55);

}


/*==================================*
* SELECT
*==================================*/

.contact-form select{

    color:#FFF9F0;

}


.contact-form select option{

    background:#12372A;

    color:#FFF9F0;

}


/*==================================*
* INPUT FOCUS
*==================================*/

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{

    border-color:#D4AF37;

    box-shadow:
        0 0 0 3px rgba(212,175,55,.12),
        0 5px 18px rgba(0,0,0,.10);

    background:#1B4938;

    transform:translateY(-1px);

}


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

.contact-form textarea{

    height:140px;

    resize:none;

}


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

.contact-form .btn{

    position:relative;

    overflow:hidden;

    width:100%;

    padding:15px;

    background:#D4AF37;

    color:#0B2B26;

    border:none;

    border-radius:8px;

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

    font-size:15px;

    font-weight:600;

    letter-spacing:.4px;

    cursor:pointer;

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease,
        box-shadow .35s ease;

}


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

.contact-form .btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:65%;

    height:100%;

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

    transform:skewX(-25deg);

    transition:.8s ease;

}


.contact-form .btn:hover::before{

    left:150%;

}


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

.contact-form .btn:hover{

    background:#FFF9F0;

    color:#0B2B26;

    transform:translateY(-3px);

    box-shadow:
        0 10px 25px rgba(0,0,0,.20);

}


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

.success-message{

    background:#FFF9F0;

    color:#0B2B26;

    border-left:5px solid #D4AF37;

    padding:12px 18px;

    border-radius:8px;

    margin-bottom:20px;

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

    font-size:14px;

    font-weight:600;

    text-align:center;

    box-shadow:
        0 5px 15px rgba(0,0,0,.15);

    animation:
        successMessageReveal .6s ease both;

}


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


@keyframes contactBannerReveal{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}


@keyframes contactBannerZoom{

    from{

        transform:scale(1.05);

    }

    to{

        transform:scale(1.12);

    }

}


@keyframes contactBannerGlow{

    0%,
    100%{

        opacity:.45;

        transform:
            translate(-50%,-50%)
            scale(.9);

    }

    50%{

        opacity:.9;

        transform:
            translate(-50%,-50%)
            scale(1.08);

    }

}


@keyframes contactTitleReveal{

    from{

        opacity:0;

        transform:
            translateY(30px)
            scale(.97);

        letter-spacing:7px;

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

        letter-spacing:1px;

    }

}


@keyframes contactBackReveal{

    from{

        opacity:0;

        transform:
            translateX(-25px);

    }

    to{

        opacity:1;

        transform:
            translateX(0);

    }

}


@keyframes contactFadeUp{

    from{

        opacity:0;

        transform:
            translateY(25px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}


@keyframes contactLineReveal{

    from{

        opacity:0;

        transform:scaleX(0);

    }

    to{

        opacity:1;

        transform:scaleX(1);

    }

}


@keyframes contactInfoReveal{

    from{

        opacity:0;

        transform:
            translateX(-20px);

    }

    to{

        opacity:1;

        transform:
            translateX(0);

    }

}


@keyframes contactFormReveal{

    from{

        opacity:0;

        transform:
            translateY(30px)
            scale(.98);

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}


@keyframes successMessageReveal{

    from{

        opacity:0;

        transform:
            translateY(-10px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}


@keyframes contactGlowMove{

    from{

        transform:
            translate3d(0,0,0);

    }

    to{

        transform:
            translate3d(100px,80px,0);

    }

}


@keyframes contactGlowMove2{

    from{

        transform:
            translate3d(0,0,0);

    }

    to{

        transform:
            translate3d(-80px,-60px,0);

    }

}


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

@media(max-width:768px){

    .contact-banner{

        height:38vh;

    }


    .contact-banner h1{

        font-size:42px;

    }


    .contact-banner .back-arrow{

        top:20px;

        left:20px;

        padding:10px 18px;

        font-size:13px;

    }


    .contact{

        padding:50px 5%;

    }


    .contact-left h2{

        font-size:38px;

    }


    .contact-form{

        padding:25px;

    }


    .form-row{

        grid-template-columns:1fr;

        gap:0;

    }


    .info-box{

        gap:12px;

    }


    .info-box p{

        font-size:15px;

    }


    .contact-form h3{

        font-size:32px;

    }

}


/*==================================*
* REDUCED MOTION
==================================*/

@media(prefers-reduced-motion:reduce){

    .contact-banner,
    .contact-banner::before,
    .contact-banner::after,
    .contact-banner h1,
    .contact-banner .back-arrow,
    .contact-left .sub-title,
    .contact-left h2,
    .contact-line,
    .info-box,
    .contact-form,
    .success-message,
    .contact::before,
    .contact::after{

        animation:none !important;

        transition:none !important;

    }

}
/* =========================================
   SUCCESS MESSAGE
========================================= */

.success-message {
    display: flex;
    align-items: center;
    gap: 18px;

    margin-bottom: 25px;
    padding: 20px 22px;

    background: rgba(212, 175, 55, 0.10);

    border: 1px solid #D4AF37;
    border-radius: 12px;

    animation: successFade 0.6s ease;
}

.success-icon {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

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

    background: #D4AF37;
    color: #0B2B26;

    border-radius: 50%;

    font-size: 22px;
}

.success-content h4 {
    margin: 0 0 5px;

    font-family: 'Cormorant Garamond', serif;

    font-size: 25px;
    font-weight: 600;

    color: #D4AF37;
}

.success-content p {
    margin: 0 0 4px;

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

    font-size: 14px;
    color: #FFF9F0;
}

.success-content span {
    font-family: 'Poppins', sans-serif;

    font-size: 12px;

    color: rgba(255,255,255,0.70);
}


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

@keyframes successFade {

    from {
        opacity: 0;
        transform: translateY(-15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


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

@media (max-width: 600px) {

    .success-message {
        align-items: flex-start;
        padding: 16px;
        gap: 12px;
    }

    .success-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .success-content h4 {
        font-size: 21px;
    }

    .success-content p {
        font-size: 13px;
    }

}
/* =========================================
   PHONE INPUT
========================================= */

.phone-input-wrapper {
    width: 100%;
    height: 54px;

    display: flex;
    align-items: center;

    background: #194b3b;

    border: 1px solid rgba(212, 175, 55, 0.45);

    border-radius: 8px;

    overflow: hidden;

    box-sizing: border-box;
}

.phone-input-wrapper:focus-within {
    border-color: #D4AF37;
}


/* COUNTRY CODE */

.phone-input-wrapper span {
    height: 100%;

    min-width: 65px;

    display: flex;
    align-items: center;

    padding: 0 0 0 16px;

    background: #194b3b;

    color: #D4AF37;

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

    font-size: 14px;

    font-weight: 600;

    box-sizing: border-box;
}


/* PHONE NUMBER */

.phone-input-wrapper input {
    flex: 1;

    width: 100%;
    height: 100%;

    margin: 0;

    padding: 0 15px 0 5px !important;

    border: none !important;
    outline: none !important;

    border-radius: 0 !important;

    background: #194b3b !important;

    color: #FFF9F0 !important;

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

    font-size: 14px;

    box-shadow: none !important;

    box-sizing: border-box;
}


/* PLACEHOLDER */

.phone-input-wrapper input::placeholder {
    color: rgba(255,255,255,0.65);
}


/* REMOVE BROWSER AUTOFILL WHITE BACKGROUND */

.phone-input-wrapper input:-webkit-autofill,
.phone-input-wrapper input:-webkit-autofill:hover,
.phone-input-wrapper input:-webkit-autofill:focus,
.phone-input-wrapper input:-webkit-autofill:active {

    -webkit-text-fill-color: #FFF9F0 !important;

    -webkit-box-shadow: 0 0 0 1000px #194b3b inset !important;

    box-shadow: 0 0 0 1000px #194b3b inset !important;

    transition: background-color 5000s ease-in-out 0s;
}