/* ================================================= */
/* RESET */
/* ================================================= */

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

html{
scroll-behavior:smooth;
}

body{

background:#fdfbf8;

color:#111;

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

overflow-x:hidden;

cursor:none;

}

img{

width:100%;

display:block;

}

.container{

width:min(1400px,90%);

margin:auto;

}

h1,h2,h3{

font-family:'Cormorant Garamond',serif;

font-weight:400;

line-height:.95;

letter-spacing:-2px;

}

/* ================================================= */

#particles-js{

position:fixed;

inset:0;

z-index:-10;

}

/* ================================================= */

.cursor{

width:18px;
height:18px;

border:1px solid rgba(214,176,123,.6);

border-radius:50%;

position:fixed;

pointer-events:none;

z-index:99999;

}

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

.menu-toggle{

display:none;

flex-direction:column;

gap:6px;

cursor:pointer;

position:relative;

z-index:2000;

}

.menu-toggle span{

width:28px;
height:1px;

background:#111;

transition:.4s ease;

}

.menu-toggle.active span:nth-child(1){

transform:
rotate(45deg)
translate(5px,5px);

}

.menu-toggle.active span:nth-child(2){

opacity:0;

}

.menu-toggle.active span:nth-child(3){

transform:
rotate(-45deg)
translate(5px,-5px);

}

/* ================================================= */
/* NAVBAR */
/* ================================================= */

.navbar{

position:fixed;

top:0;
left:0;

width:100%;

padding:2rem 0;

z-index:1000;

transition:.4s;

}

.nav-content{

display:flex;

justify-content:space-between;

align-items:center;

}

.logo{

text-decoration:none;

color:#111;

font-weight:700;

letter-spacing:4px;

text-transform:uppercase;

}

.nav-menu{

display:flex;

gap:3rem;

}

.nav-menu a{

text-decoration:none;

color:#111;

font-size:.75rem;

letter-spacing:2px;

text-transform:uppercase;

position:relative;

}

.nav-menu a::after{

content:'';

position:absolute;

left:0;
bottom:-8px;

width:0;

height:1px;

background:#c59d67;

transition:.5s;

}

.nav-menu a:hover::after,
.nav-menu .active::after{

width:100%;

}

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

.contact-hero{

min-height:90vh;

display:flex;

align-items:center;

justify-content:center;

padding:10rem 8%;

text-align:center;

position:relative;

overflow:hidden;

}

.contact-bg{

position:absolute;

inset:0;

background:

linear-gradient(
to bottom,
rgba(253,251,248,.78),
rgba(253,251,248,.96)
),

url('https://images.unsplash.com/photo-1519225421980-715cb0215aed?q=80&w=1800&auto=format&fit=crop')
center/cover;

z-index:-3;

transform:scale(1.05);

transition:2s;

}

.contact-hero:hover .contact-bg{

transform:scale(1.12);

}

.contact-hero-content{

max-width:950px;

}

.mini-title{

font-size:.7rem;

letter-spacing:5px;

text-transform:uppercase;

color:#c59d67;

}

.contact-hero h1{

font-size:clamp(4rem,7vw,7rem);

margin-top:1.5rem;

}

.contact-hero p{

margin:2rem auto;

max-width:700px;

line-height:1.9;

color:#666;

}

.btn-dark{

display:inline-block;

padding:1rem 2rem;

background:#111;

color:white;

text-decoration:none;

font-size:.75rem;

letter-spacing:2px;

text-transform:uppercase;

transition:.5s;

}

.btn-dark:hover{

transform:translateY(-5px);

box-shadow:
0 20px 50px rgba(0,0,0,.1);

}

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

.contact-section{

padding:6rem 0;

display:grid;

grid-template-columns:1fr 1fr;

gap:4rem;

align-items:start;

}

.contact-info h2{

margin-top:1rem;

font-size:clamp(3rem,5vw,5rem);

}

.contact-info p{

margin-top:2rem;

line-height:1.9;

color:#666;

}

/* ================================================= */

.info-cards{

margin-top:3rem;

display:flex;

flex-direction:column;

gap:1rem;

}

.info-card{

padding:1.5rem;

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

backdrop-filter:blur(20px);

border:
1px solid rgba(214,176,123,.15);

border-radius:25px;

display:flex;

gap:1rem;

align-items:center;

transition:.6s;

}

.info-card:hover{

transform:
translateY(-8px);

box-shadow:
0 25px 60px rgba(197,157,103,.12);

}

.info-card i{

font-size:1.5rem;

color:#c59d67;

}

.info-card h3{

font-size:1.4rem;

}

.info-card p{

margin-top:.3rem;

font-size:.9rem;

}

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

.contact-form-card{

padding:2.5rem;

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

backdrop-filter:blur(20px);

border:
1px solid rgba(214,176,123,.15);

border-radius:35px;

box-shadow:
0 30px 80px rgba(0,0,0,.05);

}

.form-group{

margin-bottom:1.5rem;

}

.form-group label{

display:block;

margin-bottom:.8rem;

font-size:.85rem;

letter-spacing:2px;

text-transform:uppercase;

}

input,
select,
textarea{

width:100%;

padding:1rem;

border:none;

outline:none;

border-radius:18px;

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

font-family:inherit;

}

textarea{

height:140px;

resize:none;

}

/* ================================================= */
/* SHOWCASE */
/* ================================================= */

.contact-showcase{

height:70vh;

display:flex;

align-items:center;

justify-content:center;

position:relative;

background:

url('https://images.unsplash.com/photo-1523438885200-e635ba2c371e?q=80&w=1600&auto=format&fit=crop')
center/cover;

}

.showcase-overlay{

position:absolute;

inset:0;

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

}

.showcase-content{

position:relative;

z-index:2;

text-align:center;

color:white;

max-width:800px;

}

.showcase-content h2{

margin-top:1rem;

font-size:clamp(3rem,6vw,6rem);

}

.showcase-content p{

margin-top:2rem;

line-height:1.9;

}

/* ================================================= */
/* FOOTER */
/* ================================================= */

footer{

  padding:
  5rem
  8%
  3rem;

  text-align:center;
}

.footer-logo{

  font-size:3rem;

  font-family:'Cormorant Garamond',serif;
}

footer p{

  margin-top:1rem;

  color:#666;
}

/* SOCIALS */

.socials{

  display:flex;

  justify-content:center;

  gap:1rem;

  margin-top:2rem;
}

.socials a{

  width:50px;
  height:50px;

  border-radius:50%;

  border:
  1px solid rgba(214,176,123,.2);

  display:flex;

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

  text-decoration:none;

  color:#111;

  transition:.5s ease;
}

.socials a:hover{

  background:#111;

  color:white;

  transform:
  translateY(-5px);
}

.footer-bottom{

  margin-top:3rem;

  padding-top:2rem;

  border-top:
  1px solid rgba(0,0,0,.05);

  font-size:.75rem;

  letter-spacing:3px;

  text-transform:uppercase;

  color:#777;
}

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

@media(max-width:1100px){

body{
cursor:auto;
}

.cursor{
display:none;
}

.contact-section{
grid-template-columns:1fr;
}

.nav-menu{

position:fixed;

top:0;
right:-100%;

width:100%;
height:100vh;

background:
rgba(253,251,248,.98);

backdrop-filter:blur(20px);

flex-direction:column;

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

transition:.6s cubic-bezier(0.22,1,0.36,1);

z-index:1500;

}

.nav-menu.active{
right:0;
}

.menu-toggle{
display:flex;
}

}