@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond&display=swap");

@font-face {
  font-family: 'domain';
  src: url('./domain.ttf') format('truetype');
}

@font-face {
  font-family: 'ny';
  src: url('./NewYork.otf') format('opentype');
}

/* fonts used : ny, domain,cormorant garamond,playfair display sc, lato,outfit,poppins,
overpass,montserrat,work sans, nunito sans,source sans 3, philosopher,gloock,gilda display */


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

:root {
  --color-primary: #855923;
  --color-secondary: #ffd20c;
  --color-goldmatte: #ebc931a1;
  --color-gold: #dac71e;
  --color-s1: #e2be1d;
  --color-white: #f2f0ec;
  --color-black: #0a0806;
  --color-grey-1: #d4cfc3;
  --color-grey-2: #64635e;
  --color-grey-3: #24231a;
}

/* .light {
  --color-primary: #C4BCB3;
  --color-secondary: #1e1812;
  --color-goldmatte: #ebc931a1;
  --color-gold: #dac71e;
  --color-s1: #e2be1d;
  --color-white: #1a1710;
  --color-black: #f2f0ec;
  --color-grey-1: #e8e4db;
  --color-grey-2: #64635e;
  --color-grey-3: #161614;
} */


body {
  margin: 0;
  padding: 0;
  height: 100vh;
  color: white;
  background: black;
  font-family: "Work Sans", serif;
}

a {
  text-decoration: none;
  color: inherit;
}

.section-heading {
  font-size: clamp(2rem, 5.1vw, 5rem);
  font-weight: 400;
  text-align: center;
  margin: .5rem;
  letter-spacing: 0.5em;
  color: #d7d4c9;
  z-index: 2;
  font-family: "Gilda Display";
  /*or ny or CG or ph*/
  text-shadow: 1px 1px 5px #201f1a;
}

#aboutline::after {
  content: "";
  position: absolute;
  left: 35%;
  top: 0%;
  width: 30vw;
  z-index: 9;
  height: 1px;
  background: linear-gradient(to right, transparent, #d1cabc8e, transparent);
  transform: translateX(-50%);
  transition: all ease-in-out .5s;
}

#para2 {
  font-size: clamp(0.8rem, 1.4vw, 1.6rem);
  margin: 1.5rem 1rem;
  max-width: clamp(100px, 70vw, 950px);
  font-family: "Montserrat";
  z-index: 9;
}

#para1 {
  font-size: clamp(1rem, 2.8vw, 3rem);
  margin: 1rem;
  font-family: "Philosopher";
  color: #d7d4c9;
}

.bg::after {
  content: "scroll down...";
  position: fixed;
  top: 90%;
  color: #e9e3d583;
}

header {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5%;
  width: 100%;
  z-index: 3;
  height: 7em;
  font-family: "Lato", sans-serif;
  font-size: clamp(0.66rem, 2vw, 1rem);
  letter-spacing: 0.4em;
}

section {
  height: 100%;
  width: 100%;
  top: 0;
  position: fixed;
  visibility: hidden;
}

section .outer,
section .inner {
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

section .bg {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  height: 100%;
  width: 100%;
  top: 0;
  background-size: cover;
  background-position: center;
}

.glass {
  position: relative;
  backdrop-filter: blur(4.5px);
  border-radius: 1.7em;
  box-shadow: 3px 2px 30px #13131394;
  overflow: hidden;
  padding: 1.4rem;
  transition: all ease-in-out .4s;
}

.glass:hover #aboutline::after {
  left: 50%;
  width: 40vw;
  background: linear-gradient(to right, transparent, #f3ecdb, transparent);
}

.glass:hover {
  backdrop-filter: blur(12px);
  box-shadow: 7px 5px 30px #141212c6;
  /* transform: translateY(-2px); */
}

section .bg .clip-text {
  overflow: hidden;
}

.first .bg {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 100%), url(https://images.unsplash.com/photo-1481627834876-b7833e8f5570?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1528&q=80);
}

.second .bg {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.46) 100%), url("./img/g_4.jpg");
}

.third .bg {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 100%), url(https://images.unsplash.com/photo-1617438817509-70e91ad264a5?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNzU2MDk4Mg&ixlib=rb-1.2.1&q=75&w=1920);
}

h2 * {
  will-change: transform;
}

.theme-btn {
  top: 5%;
  right: 3%;
  width: 70px;
  z-index: 3;
  height: 70px;
  border-radius: 50%;
  background-color: #5f593f63;
  cursor: pointer;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 3px 15px rgba(97, 82, 13, 0.3);
  transition: all 0.3s ease-in-out;
}


.theme-btn:hover {
  transform: translateY(-5%)
}

.theme-btn i {
  font-size: 1.4rem;
  color: var(--color-grey-2);
  pointer-events: none
}

.controls {
  position: fixed;
  z-index: 10;
  top: 50%;
  right: 3%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
}

.controls .control {
  padding: 1rem;
  cursor: pointer;
  background-color: transparent;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  border: 2px solid var(--color-white);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.7rem 0;
  transition: all 0.3s ease-in-out;
}

.controls .control i {
  font-size: 1.2rem;
  color: var(--color-grey-2);
  pointer-events: none;
}

.controls .active-btn {
  background-color: #7a6d2e7b;
  transition: all 0.4s ease-in-out;
}

.controls .active-btn i {
  color: var(--color-grey-1);
}

.controls .control:hover {
  transform: scale(1.08);
}