/*=========================================
    GOOGLE FONTS
=========================================*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

/*=========================================
    GLOBAL
=========================================*/

:root{

    --primary:#C9A04A;
    --black:#0b0b0b;
    --section:#111111;
    --card:#171717;
    --text:#ffffff;
    --muted:#bdbdbd;

    --border:rgba(201,160,74,.22);

    --shadow:0 25px 60px rgba(0,0,0,.45);

    --radius:28px;

}

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

html{
    scroll-behavior:smooth;
}

body{

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

    background:var(--black);

    color:#fff;

    overflow-x:hidden;

    line-height:1.8;

}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
    transition:.35s;
}

section{

    position:relative;

}




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

.section-heading{

    max-width:760px;

    margin:0 auto 70px;

}

.section-heading span{

    color:var(--primary);

    letter-spacing:4px;

    text-transform:uppercase;

    font-size:13px;

    font-weight:600;

}

.section-heading h2{

    font-family:'Cormorant Garamond',serif;

    font-size:58px;

    font-weight:600;

    margin:18px 0;

    line-height:1.1;

}

.section-heading p{

    color:var(--muted);

    font-size:16px;

    margin-bottom:0;

}





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

.contact-hero{

    height:60vh;

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    background:url("../images/marble1.jpg") center center/cover no-repeat;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(rgba(0,0,0,.60),
    rgba(0,0,0,.72));

}

.hero-content{

    position:relative;

    z-index:5;

    text-align:center;

    color:#fff;

}

.hero-subtitle{

    display:inline-block;

    color:var(--primary);

    text-transform:uppercase;

    letter-spacing:4px;

    font-size:13px;

    margin-bottom:20px;

}

.hero-content h1{

    font-family:'Cormorant Garamond',serif;

    font-size:74px;

    font-weight:600;

    margin-bottom:18px;

}

.breadcrumb-custom{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    color:#d7d7d7;

}

.breadcrumb-custom a{

    color:#fff;

}

.breadcrumb-custom a:hover{

    color:var(--primary);

}





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

.contact-section{

    padding:120px 0;

    background:#0f0f0f;

}

.contact-section::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    left:-220px;

    top:80px;

    border-radius:50%;

    background:rgba(201,160,74,.03);

    filter:blur(120px);

}

.contact-section::after{

    content:"";

    position:absolute;

    width:380px;

    height:380px;

    right:-180px;

    bottom:50px;

    border-radius:50%;

    background:rgba(201,160,74,.03);

    filter:blur(120px);

}

.contact-section .container{

    position:relative;

    z-index:2;

}





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

.contact-info-card{

    background:

    linear-gradient(180deg,#181818,#121212);

    border:1px solid var(--border);

    border-radius:30px;

    padding:42px;

    box-shadow:var(--shadow);

    height:100%;

    position:relative;

    overflow:hidden;

}

.contact-info-card::before{

    content:"";

    position:absolute;

    top:-90px;

    right:-90px;

    width:180px;

    height:180px;

    border-radius:50%;

    background:rgba(201,160,74,.05);

}

.contact-info-card::after{

    content:"";

    position:absolute;

    bottom:-70px;

    left:-70px;

    width:140px;

    height:140px;

    border-radius:50%;

    background:rgba(201,160,74,.03);

}

.info-item{

    display:flex;

    align-items:flex-start;

    gap:18px;

    position:relative;

    z-index:2;

}

.info-item:not(:last-child){

    margin-bottom:28px;

}

.info-icon{

    width:58px;

    height:58px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(201,160,74,.08);

    border:1px solid rgba(201,160,74,.18);

    color:var(--primary);

    font-size:18px;

    flex-shrink:0;

    transition:.35s;

}

.info-item:hover .info-icon{

    transform:translateY(-4px);

    background:rgba(201,160,74,.15);

    box-shadow:0 12px 30px rgba(201,160,74,.12);

}

.info-item small{

    display:block;

    color:#9d9d9d;

    font-size:13px;

    margin-bottom:7px;

    text-transform:uppercase;

    letter-spacing:1px;

}

.info-item h6{

    color:#fff;

    margin:0;

    line-height:1.8;

    font-size:16px;

    font-weight:500;

}

.divider{

    width:100%;

    height:1px;

    background:linear-gradient(to right,
    transparent,
    rgba(201,160,74,.28),
    transparent);

    margin:28px 0;

}





/*=========================================
        SOCIAL AREA
=========================================*/

.social-title{

    color:#fff;

    font-size:17px;

    font-weight:600;

    margin-bottom:18px;

    position:relative;

    z-index:2;

}

.social-icons{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    position:relative;

    z-index:2;

}

.social-icons a{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#1c1c1c;

    color:#fff;

    border:1px solid rgba(255,255,255,.08);

    transition:.35s;

}

.social-icons a:hover{

    color:#111;

    background:var(--primary);

    border-color:var(--primary);

    transform:translateY(-5px);

    box-shadow:0 15px 35px rgba(201,160,74,.25);

}

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

.contact-form-wrapper{

    position: relative;

    background: rgba(24,24,24,.75);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    border:1px solid rgba(201,160,74,.18);

    border-radius:32px;

    padding:55px;

    box-shadow:0 30px 70px rgba(0,0,0,.45);

    overflow:hidden;

}

.contact-form-wrapper::before{

    content:"";

    position:absolute;

    width:240px;

    height:240px;

    right:-120px;

    top:-120px;

    border-radius:50%;

    background:rgba(201,160,74,.05);

}

.contact-form-wrapper::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    left:-90px;

    bottom:-90px;

    border-radius:50%;

    background:rgba(201,160,74,.03);

}

.contact-form-wrapper form{

    position:relative;

    z-index:2;

}





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

.form-group{

    position:relative;

}

.form-group label{

    color:#d6d6d6;

    font-size:14px;

    margin-bottom:10px;

    display:block;

    letter-spacing:.5px;

}





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

.form-control,
.form-select{

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    color:#fff;

    height:60px;

    padding:0 22px;

    font-size:15px;

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

    transition:all .35s ease;

    box-shadow:none;

}

textarea.form-control{

    height:auto;

    min-height:180px;

    resize:none;

    padding:18px 22px;

    line-height:1.8;

}

.form-control::placeholder{

    color:#8f8f8f;

}

textarea::placeholder{

    color:#8f8f8f;

}

.form-select{

    cursor:pointer;

}

.form-select option{

    background:#161616;

    color:#fff;

}





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

.form-control:hover,
.form-select:hover{

    border-color:rgba(201,160,74,.28);

    background:rgba(255,255,255,.045);

}





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

.form-control:focus,
.form-select:focus{

    background:rgba(255,255,255,.05);

    color:#fff;

    border-color:var(--primary);

    box-shadow:

        0 0 0 4px rgba(201,160,74,.08),

        0 15px 35px rgba(201,160,74,.08);

    outline:none;

}





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

.form-select{

    --bs-form-select-bg-img:
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23C9A04A' viewBox='0 0 16 16'%3e%3cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.343 4 3.204 4h9.592c.861 0 1.319 1.013.753 1.658L8.753 11.14a1 1 0 0 1-1.506 0z'/%3e%3c/svg%3e");

}





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

.luxury-btn{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    padding:18px 42px;

    border:none;

    border-radius:60px;

    background:linear-gradient(135deg,#C9A04A,#b8892d);

    color:#111;

    font-weight:600;

    font-size:15px;

    letter-spacing:.6px;

    overflow:hidden;

    cursor:pointer;

    transition:all .35s ease;

}

.luxury-btn span,
.luxury-btn i{

    position:relative;

    z-index:2;

}

.luxury-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:100%;

    height:100%;

    background:

    linear-gradient(

        120deg,

        transparent,

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

        transparent

    );

    transition:.8s;

}

.luxury-btn:hover::before{

    left:120%;

}

.luxury-btn:hover{

    transform:translateY(-4px);

    box-shadow:

        0 18px 40px rgba(201,160,74,.30);

}

.luxury-btn i{

    transition:.35s;

}

.luxury-btn:hover i{

    transform:translateX(6px);

}

.luxury-btn:active{

    transform:scale(.98);

}





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

.contact-form-wrapper .row>*{

    margin-bottom:5px;

}

.contact-form-wrapper .mb-4:last-child{

    margin-bottom:0 !important;

}

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

.map-section{

    padding:0 0 120px;

    background:#0f0f0f;

}

.map-wrapper{

    position:relative;

    overflow:hidden;

    border-radius:32px;

    border:1px solid rgba(201,160,74,.18);

    background:#161616;

    box-shadow:0 25px 60px rgba(0,0,0,.45);

}

.map-wrapper iframe{

    width:100%;

    height:520px;

    border:0;

    display:block;

    filter:grayscale(100%) contrast(1.05) brightness(.85);

    transition:.5s ease;

}

.map-wrapper:hover iframe{

    filter:grayscale(70%) contrast(1.05) brightness(.95);

}





/*=========================================
        SMOOTH HOVER EFFECTS
=========================================*/

.contact-info-card,
.contact-form-wrapper,
.map-wrapper{

    transition:all .4s ease;

}

.contact-info-card:hover{

    transform:translateY(-8px);

    border-color:rgba(201,160,74,.35);

    box-shadow:
        0 35px 80px rgba(0,0,0,.55);

}

.contact-form-wrapper:hover{

    transform:translateY(-8px);

    border-color:rgba(201,160,74,.28);

    box-shadow:
        0 35px 90px rgba(0,0,0,.55);

}

.map-wrapper:hover{

    transform:translateY(-6px);

    border-color:rgba(201,160,74,.30);

}





/*=========================================
        SCROLLBAR
=========================================*/

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#111;

}

::-webkit-scrollbar-thumb{

    background:#444;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary);

}





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

@media (max-width:991px){

.contact-hero{

    height:50vh;

}

.hero-content h1{

    font-size:56px;

}

.section-heading{

    margin-bottom:55px;

}

.section-heading h2{

    font-size:46px;

}

.contact-section{

    padding:90px 0;

}

.contact-info-card{

    margin-bottom:20px;

}

.contact-form-wrapper{

    padding:40px;

}

.map-section{

    padding-bottom:90px;

}

.map-wrapper iframe{

    height:420px;

}

}





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

@media (max-width:767px){

.contact-hero{

    height:42vh;

}

.hero-subtitle{

    letter-spacing:3px;

    font-size:12px;

}

.hero-content h1{

    font-size:42px;

}

.breadcrumb-custom{

    font-size:14px;

    gap:8px;

}

.section-heading{

    margin-bottom:45px;

}

.section-heading span{

    letter-spacing:3px;

    font-size:12px;

}

.section-heading h2{

    font-size:34px;

    line-height:1.2;

}

.section-heading p{

    font-size:15px;

}

.contact-section{

    padding:70px 0;

}

.contact-info-card{

    padding:28px;

    border-radius:24px;

}

.info-icon{

    width:50px;

    height:50px;

    border-radius:14px;

    font-size:17px;

}

.info-item{

    gap:14px;

}

.info-item h6{

    font-size:15px;

    line-height:1.7;

}

.social-icons{

    gap:10px;

}

.social-icons a{

    width:44px;

    height:44px;

}

.contact-form-wrapper{

    padding:28px;

    border-radius:24px;

}

.form-control,
.form-select{

    height:54px;

    padding:0 18px;

    font-size:14px;

}

textarea.form-control{

    min-height:160px;

    padding:16px 18px;

}

.luxury-btn{

    width:100%;

    justify-content:center;

    padding:16px 24px;

}

.map-wrapper{

    border-radius:24px;

}

.map-wrapper iframe{

    height:320px;

}

}





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

@media (max-width:480px){

.hero-content h1{

    font-size:36px;

}

.section-heading h2{

    font-size:30px;

}

.contact-form-wrapper{

    padding:22px;

}

.contact-info-card{

    padding:22px;

}

.map-wrapper iframe{

    height:280px;

}

}