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

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

/* =========================
   CULTURE SECTION
========================= */

.culture-section{
  position:relative;
  background:#050505;
  padding:90px 0;
  overflow:hidden;
}

/* =========================
   DIVIDERS
========================= */

.culture-divider-top,
.culture-divider-bottom{
  width:100%;
  height:45px;
  position:relative;
  background:#050505;
}

.culture-divider-top::before,
.culture-divider-bottom::before{
  content:"";
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(255,255,255,0.03),
      transparent
    );

  opacity:0.7;
}

/* =========================
   HEADER
========================= */

.culture-header{
  text-align:center;
  max-width:900px;
  margin:auto;
  padding:0 20px;
  margin-bottom:60px;
}

.culture-mini-title{
  display:inline-block;
  color:#9c9c9c;

  letter-spacing:6px;
  text-transform:uppercase;

  font-size:0.72rem;
  font-family:'Inter', sans-serif;

  margin-bottom:20px;
}

.culture-header h2{
  font-size:6rem;
  color:white;

  margin-bottom:20px;

  font-weight:600;
  letter-spacing:-2px;

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

.culture-header p{
  color:#b5b5b5;

  font-size:1.15rem;
  line-height:1.9;

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

  max-width:700px;
  margin:auto;
}

/* =========================
   CAROUSEL
========================= */

.carousel-wrapper{
  position:relative;
  width:100%;
  height:90vh;
  overflow:hidden;

  box-shadow:
    0 30px 80px rgba(0,0,0,0.45);
}

.carousel{
  display:flex;
  height:100%;
  transition:transform 0.9s ease;
}

.slide{
  min-width:100%;
  height:90vh;
  position:relative;

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

  display:flex;
  align-items:flex-end;

  padding:90px;
}

.overlay{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,0.90),
      rgba(0,0,0,0.12)
    );
}

.content{
  position:relative;
  z-index:2;
  max-width:720px;
}

/* =========================
   TAG
========================= */

.tag{
  display:inline-block;

  padding:10px 20px;
  border-radius:40px;

  background:rgba(255,255,255,0.12);

  backdrop-filter:blur(10px);

  color:#f2f2f2;

  font-size:0.75rem;
  letter-spacing:4px;

  margin-bottom:28px;

  text-transform:uppercase;

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

/* =========================
   TITLES
========================= */

.content h1{
  font-size:5.5rem;
  line-height:0.95;

  margin-bottom:28px;

  color:white;

  letter-spacing:-3px;

  font-weight:600;

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

/* =========================
   PARAGRAPH
========================= */

.content p{
  color:#dddddd;

  font-size:1.18rem;
  line-height:1.9;

  margin-bottom:38px;

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

  max-width:620px;
}

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

.content a{
  display:inline-flex;
  align-items:center;
  gap:10px;

  padding:16px 34px;

  border-radius:50px;

  background:white;
  color:black;

  text-decoration:none;

  font-weight:500;
  font-size:0.95rem;

  letter-spacing:1px;

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

  transition:0.35s;
}

.content a:hover{
  transform:translateY(-4px);
  background:#e9e9e9;
}

/* =========================
   CONTROLS
========================= */

.controls{
  position:absolute;

  right:40px;
  bottom:40px;

  z-index:5;

  display:flex;
  gap:12px;
}

.btn{
  width:58px;
  height:58px;

  border:none;
  border-radius:50%;

  background:rgba(255,255,255,0.12);
  color:white;

  backdrop-filter:blur(10px);

  font-size:20px;
  cursor:pointer;

  transition:0.3s;
}

.btn:hover{
  background:white;
  color:black;
}

/* =========================
   INDICATORS
========================= */

.indicators{
  position:absolute;

  bottom:45px;
  left:50%;

  transform:translateX(-50%);

  display:flex;
  gap:12px;

  z-index:5;
}

.dot{
  width:12px;
  height:12px;

  border-radius:50px;

  background:rgba(255,255,255,0.35);

  transition:0.4s;
}

.dot.active{
  width:45px;
  background:white;
}

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

@media(max-width:900px){

  .culture-section{
    padding:70px 0;
  }

  .culture-header{
    margin-bottom:40px;
  }

  .culture-header h2{
    font-size:3.8rem;
  }

  .culture-header p{
    font-size:1rem;
  }

  .carousel-wrapper{
    height:75vh;
  }

  .slide{
    height:75vh;
    padding:35px;
  }

  .content h1{
    font-size:3rem;
  }

  .content p{
    font-size:1rem;
  }

  .content a{
    padding:14px 24px;
    font-size:0.9rem;
  }

  .controls{
    right:20px;
    bottom:20px;
  }

  .btn{
    width:50px;
    height:50px;
  }

  .indicators{
    bottom:25px;
  }

}