/* ================================================= */
/* 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 */
/* ================================================= */

#particles-js{

  position:fixed;
  inset:0;

  z-index:-10;
}

/* ================================================= */
/* CURSOR */
/* ================================================= */

.cursor{

  width:18px;
  height:18px;

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

  border-radius:50%;

  position:fixed;

  pointer-events:none;

  z-index:99999;

  backdrop-filter:blur(5px);
}

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

.navbar{

  position:fixed;

  top:0;
  left:0;

  width:100%;

  padding:2rem 0;

  z-index:1000;

  backdrop-filter:blur(10px);

  background:
  rgba(253,251,248,.75);
}

.nav-content{

  display:flex;

  align-items:center;

  justify-content:space-between;
}

.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:.78rem;

  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%;
}

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

.menu-toggle{

  display:none;

  flex-direction:column;

  gap:6px;

  cursor:pointer;

  z-index:9999;
}

.menu-toggle span{

  width:28px;
  height:1px;

  background:#111;
}

/* ================================================= */
/* MENU TOGGLE ANIMATION */
/* ================================================= */

.menu-toggle{
  position:relative;
  z-index:2000;
}

.menu-toggle span{
  transition:.4s ease;
}

/* TOP LINE */

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

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

/* MIDDLE LINE */

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

  opacity:0;
}

/* BOTTOM LINE */

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

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

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

.hero{

  min-height:75vh;

  display:flex;

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

  text-align:center;

  padding:
  10rem
  8%
  5rem;

  position:relative;

  overflow:hidden;
}

.hero::before{

  content:'';

  position:absolute;

  inset:0;

  background:
  linear-gradient(
    to bottom,
    rgba(255,255,255,.75),
    rgba(255,255,255,.92)
  );

  z-index:-1;
}

.hero-content h1{

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

  max-width:900px;

  margin:
  1.5rem auto 0;
}

.hero-content p{

  margin:
  2rem auto 0;

  max-width:650px;

  line-height:1.9;

  color:#666;
}

.mini-title{

  font-size:.7rem;

  letter-spacing:5px;

  text-transform:uppercase;

  color:#c59d67;
}

/* ================================================= */
/* SECTION TITLE */
/* ================================================= */

.section-title{

  margin-bottom:4rem;
}

.section-title h2{

  margin-top:1rem;

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

  max-width:700px;
}

/* ================================================= */
/* CATEGORIES */
/* ================================================= */

.categories{

  padding:
  4rem
  0
  6rem;
}

.categories-grid{

  display:grid;

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

  gap:2rem;
}

/* ================================================= */
/* CARD */
/* ================================================= */

.design-card{

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

  backdrop-filter:blur(20px);

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

  border-radius:34px;

  overflow:hidden;

  transition:
  transform .8s cubic-bezier(0.22,1,0.36,1),
  box-shadow .8s ease;

  position:relative;
}

.design-card:hover{

  transform:
  translateY(-12px);

  box-shadow:
  0 35px 90px rgba(197,157,103,.14);
}

/* IMAGE */

.design-image{

  overflow:hidden;

  height:340px;
}

.design-image img{

  width:100%;
  height:100%;

  object-fit:cover;

  transition:1.4s ease;
}

.design-card:hover img{

  transform:
  scale(1.08);
}

/* SHINE */

.design-card::before{

  content:'';

  position:absolute;

  inset:0;

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

  transform:
  translateX(-140%);

  transition:1.5s ease;

  z-index:3;
}

.design-card:hover::before{

  transform:
  translateX(140%);
}

/* CONTENT */

.design-content{

  padding:2rem;
}

.design-content span{

  font-size:.7rem;

  letter-spacing:3px;

  text-transform:uppercase;

  color:#c59d67;
}

.design-content h3{

  margin-top:1rem;

  font-size:2.5rem;
}

.design-content p{

  margin-top:1rem;

  line-height:1.9;

  color:#666;
}

/* BUTTON */

.design-content button{

  margin-top:2rem;

  padding:
  1rem
  2rem;

  border:none;

  background:#111;

  color:white;

  cursor:pointer;

  font-size:.7rem;

  letter-spacing:2px;

  text-transform:uppercase;

  transition:.5s ease;
}

.design-content button:hover{

  transform:
  translateY(-5px);

  background:#c59d67;
}

/* ================================================= */
/* EXPERIENCE */
/* ================================================= */

.experience{

  min-height:70vh;

  display:flex;

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

  text-align:center;

  position:relative;

  overflow:hidden;

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

.experience-overlay{

  position:absolute;
  inset:0;

  background:
  rgba(0,0,0,.45);
}

.experience-content{

  position:relative;

  z-index:2;

  color:white;
}

.experience-content h2{

  margin-top:1rem;

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

.experience-content p{

  margin:
  2rem auto 0;

  max-width:650px;

  line-height:1.9;

  color:rgba(255,255,255,.85);
}

/* ================================================= */
/* 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;
}

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

@media(max-width:1100px){

  body{
    cursor:auto;
  }

  .cursor{
    display:none;
  }

  .categories-grid{

    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 ease;
  }

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

  .menu-toggle{
    display:flex;
  }

}

@media(max-width:768px){

  .hero-content h1{

    font-size:4rem;
  }

  .design-image{

    height:280px;
  }

}

.whatsapp-float{
  position:fixed;
  right:28px;
  bottom:28px;
  width:60px;
  height:60px;
  border-radius:50%;
  background:#25D366;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.8rem;
  text-decoration:none;
  z-index:9999;
  box-shadow:0 20px 50px rgba(37,211,102,.35);
  transition:.5s ease;
}

.whatsapp-float:hover{
  transform:translateY(-8px) scale(1.05);
  box-shadow:0 30px 70px rgba(37,211,102,.45);
}

@media(max-width:768px){
  .whatsapp-float{
    width:54px;
    height:54px;
    right:20px;
    bottom:20px;
    font-size:1.6rem;
  }
}