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

.contact-hero{

height:60vh;

background:url("../images/hero.png") center/cover;

position:relative;

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;

}

.contact-overlay{

position:absolute;

inset:0;

background:rgba(0,0,0,.65);

}

.contact-hero-content{

position:relative;

z-index:2;

text-align:center;

color:white;

width:90%;

max-width:900px;

animation:fadeUp 1s ease;

}

.contact-hero-content span{

color:#c8a97e;

letter-spacing:4px;

}

.contact-hero-content h1{

font-size:70px;

margin:25px 0;

font-family:"Playfair Display",serif;

}

.contact-hero-content p{

font-size:18px;

line-height:2;

}

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

.contact-info{

padding:120px 0;

background:#f7f5f2;

}

.contact-info-grid{

display:grid;

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

gap:30px;

}

.contact-card{

background:white;

padding:70px 40px;

text-align:center;

border-radius:25px;

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

transition:.4s;

}

.contact-card:hover{

transform:translateY(-10px);

}

.contact-card i{

font-size:65px;

color:#c8a97e;

margin-bottom:35px;

}

.contact-card h3{

font-size:32px;

margin-bottom:25px;

}

.contact-card a,
.contact-card p{

color:#666;

line-height:2;

font-size:18px;

}

.contact-card a:hover{

color:#c8a97e;

}

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

.contact-form-section{

padding:150px 0;

background:white;

}

.contact-grid{

display:grid;

grid-template-columns:1fr 1.3fr;

align-items:center;

gap:0;

overflow:hidden;

border-radius:35px;

box-shadow:0 20px 60px rgba(0,0,0,.08);

}

.contact-image{

height:100%;

}

.contact-image img{

width:100%;

height:100%;

object-fit:cover;

display:block;

}

.contact-form-box{

padding:80px;

background:#fff;

}

.contact-form-box span{

color:#c8a97e;

font-size:18px;

}

.contact-form-box h2{

font-size:65px;

margin:20px 0;

line-height:1.3;

font-family:"Playfair Display",serif;

}

.contact-form-box p{

color:#666;

line-height:2;

margin-bottom:40px;

}

#contactForm{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

}

#contactForm input{

height:65px;

padding:0 20px;

border:1px solid #ddd;

outline:none;

font-family:"Cairo";

}

#contactForm textarea{

grid-column:span 2;

height:180px;

padding:20px;

resize:none;

font-family:"Cairo";

border:1px solid #ddd;

outline:none;

}

#contactForm input:focus,
#contactForm textarea:focus{

border-color:#c8a97e;

}

#contactForm button{

margin-top:10px;

width:230px;

height:65px;

border:none;

cursor:pointer;

}

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

.contact-social{

display:flex;

gap:15px;

margin-top:35px;

}

.contact-social a{

width:60px;

height:60px;

background:#121627;

color:white;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

font-size:22px;

transition:.3s;

}

.contact-social a:hover{

background:#c8a97e;

}

/* ================= WHATSAPP ================= */

.whatsapp-btn{

position:fixed;

bottom:35px;

left:35px;

width:70px;

height:70px;

background:#25D366;

color:white;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

font-size:34px;

z-index:999;

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

transition:.3s;

}

.whatsapp-btn:hover{

transform:scale(1.1);

}

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

@media(max-width:992px){

.contact-info-grid{

grid-template-columns:1fr;

}

.contact-grid{

grid-template-columns:1fr;

}

.contact-form-box{

padding:45px;

}

.contact-form-box h2{

font-size:45px;

}

.contact-image{

height:500px;

}

}

@media(max-width:768px){

.contact-hero h1,
.contact-hero-content h1{

font-size:45px;

}

#contactForm{

grid-template-columns:1fr;

}

#contactForm textarea{

grid-column:unset;

}

#contactForm button{

width:100%;

}

.contact-form-box{

padding:30px;

}

.contact-form-box h2{

font-size:36px;

}

.whatsapp-btn{

width:60px;

height:60px;

font-size:28px;

}

}