style1.css

:root {
  --circle-outline: #FFFFFF;
}

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

html,
body {
  width: 100%;
  height: 100%;
  /* overflow: hidden; */
  background: #181818;
}

.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: #333; */
  background-image: url(img5.jpg);
  background-size:contain;

  
  
}

.counter {
  width: 100%;
  height: 100%;
  position: fixed;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  color: var(--circle-outline);
  padding: 2rem 4rem;
  font-size: 10vw;
  /* font-family: "Saol Display"; */
  font-weight: lighter;
  font-style: italic;
  z-index: 1000;
  color: #7a7f81;
}

.site-teaser span {
  position: absolute;
  top: 0;
  right: 0;
  padding: 2rem 4rem;
  color: var(--circle-outline);
  font-size: 1rem;
  font-family: Titilliam Web;
  font-weight:bold;
  font-style: italic;
  color:#7a7f81
}

.circles {
  position: absolute;
  left: 5rem;
  bottom: 5rem;
  width: 400px;
  height: 400px;
  border-radius: 100%;
}

.circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: none;
  border: 1px solid var(--circle-outline);
  border-radius: 100%;
}

.circle-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
}

.circle-inner-rotator {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scale(0);
  width: 162.5px;
  height: 162.5px;
  background: none;
  border: 1px solid var(--circle-outline);
  border-radius: 100%;
}

.block {
  position: absolute;
  top: -100px;
  left: 200px;
  width: 0px;
  height: 0px;
  display: none;
  background: none;
  border: 1px solid var(--circle-outline);
  transform-origin: bottom;
}


/* .container h1 {
  font-family: "Saol Display";
  font-weight: 400;
  font-size: 7.5rem;
  letter-spacing: -0.5rem;
}

.container h1 span {
  font-style: italic ;
} */

#main{
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: aquamarine;
  overflow: hidden;
}
.o-ui-arrow-1{
  width: 3vw;
  height: 3vw;
  margin-left: 2vw;
  margin-top: 2vw;
  
  /* padding-left: 4vw; */
  /* transform: rotate(90deg); */
}

.o-ui-arrow-1 path {
  stroke: #87795f;
  stroke-width: 5px;
}

#top h2  {
  font-size: 1.5vw;
  font-weight: 900;
  font-family: Titilliam Web;
  margin-left: 5.7vw;
  margin-top: 0.5vw;
  color: #87795f;
}

#top{
  position: absolute;
  top: 0%;
  width: 100%;
  height: 50vh;
  /* background-color: #E9BEBE; */
  
  z-index: 2;
  overflow: hidden;
}
#line4{
  /* display: block; */
  /* stroke-width: 9px; */
  margin-left: 5.5vw;
  margin-top: 1.4vw;
  margin-bottom: 1vw;
  width: 18%;
  height: 1px;
  color: #333;
  border-bottom: transparent;
}

#center{
  position: relative;
  width: 100%;
  height: 100vh;
  transform-origin: center;
  background-color: rgb(0, 0, 0);
  transition: all cubic-bezier(0.19, 1, 0.22, 1)1s;
  overflow: hidden;
}

#bottom{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50vh;
  /* background-color: #E9BEBE; */
  overflow: hidden;
}

#main h1{
  font-family: Titiliam Web;
  font-size: 16vw;
  position: absolute;
  top: 33vh;
  bottom: 25vh;
  left: 50%;
  transform: translate(-50%, -50%);
}


#top-h1{
  /* position: relative; */
  bottom:50%;
  color: #87795f;
  white-space: nowrap;
}

#bottom-h1{
  top: -6% !important;
  color: #87795f;
  white-space: nowrap;
}

.content{
  margin-top: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* color: #87795f; */
  background-color: #87795f;
  justify-content: center;
  width: 100%;
  height: 100vh;
  color: #fff;
  gap: 4vh;
}

.content h4{
  font-size: 1vw;
  font-family: Founder;
  color: #FFFFFF;
}

.content h3{
  width: 22%;
  font-size: 3vw;
  font-family: CardinalR;
  text-align: center;
  font-weight: 400;
}

.content .btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8vw;
  height: 3vw;
  border-radius: 50px;
  background-color: #fff;
  color: #0d0d0d;
  font-family: Founder;
}

.content h2{
  font-size: 20vw;
  font-family: Founder;
}

#top-h1 span{
  -webkit-text-stroke: 2px #000;
  color: transparent;
}
#bottom-h1 span{
  -webkit-text-stroke: 2px #000;
  color: transparent;
}

section {
  position: relative;
  /* margin: 0; */
  /* padding: 0; */
  width: 100%;
  margin-top: 8vw;
  height: 16vh;
  overflow: hidden;
  /* background-size: cover; */
}

section .scroll{
  width: 100%;
  display: flex;
}
section .scroll div {
  color: #87795f;
  font-size: 6em;

  /* background: #fff; */
  white-space: nowrap;
  font-weight: 700;
  text-transform: uppercase;
  animation: animate 60s linear infinite;
  animation-delay: -40s;
}

section .scroll div:nth-child(2){
  animation: animate2 60s linear infinite;
  animation-delay: -10s;
}

section .scroll div span{
  -webkit-text-stroke: 1.7px #87795f;
  color: transparent;
}

@keyframes animate {
  0%{
    transform: translateX(100%);
  }
  100%{
    transform: translateX(-100%);
  }
}
@keyframes animate2 {
  0%{
    transform: translateX(0);
  }
  100%{
    transform: translateX(-200%);
  }
}

#line5{
  /* display: block; */
  /* stroke-width: 9px; */
  /* margin-left: 5.5vw; */
  margin-top: 1.4vw;
  margin-bottom: 1vw;
  width: 100%;
  height: 1px;
  color: #333;
  border-bottom: transparent;
}