:root{
    --primaryBg:#FBFCFC;
    --redAccent: #C03033;
    --primaryText: #2B2A2B;
    --stroke:4px solid #000001;
    --greyAccent:#628082;
    --black: #000000;
    --audio1: block;
    --audio2: none;
}
/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: tr;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #C03033;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgb(202, 14, 14)033;
}
.switch_sound{
  --audio1: none;
  --audio2: block;
}
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Heroika (Namikus)";
    text-transform: uppercase;
    transition: all 200ms ease-in;
    color: var(--primaryText);
    transition: all 200ms ease-in;
    scroll-behavior: smooth;
}
.font_2{
  font-family: 'Staatliches';
}
@font-face {
  font-family: "Heroika (Namikus)";
  src: url("public/fonts/HeroikanamikusBold.otf");
  font-weight: 700;
  font-style: normal;
}
header{
  display: flex;
width: 100%;
padding: 24px 100px;
justify-content: center;
align-items: center;
background: var(--redAccent);
position: fixed;
z-index: 9999;
}
nav ul{
  gap: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
li{
  color: var(--primaryBg);
  font-family: Staatliches;
  font-size: 24px;
}
a{
  text-decoration: none;
  color: inherit;
  font-family: inherit;
  opacity: 1;
  transition: all 200ms ease-in-out;
}
a:hover{
  opacity: 0.8;
}
li{
  list-style-type: none;
}
body {
  background: var(--primaryBg);
  height: 3000px;
  overflow-x: hidden;
}
.fadedClick {
  opacity: 0.3;
}
.container{
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  background-color: var(--primaryBg);
  overflow: auto;
  overflow-x: hidden;
}
.coverimg{
  width: 100%;
  height: auto;
  margin: 0 auto;
  z-index: 0;
  /* margin-bottom: 1000px; */
  top: 0;
}
.logo{
  width: 150px;
  height: 55px;
  margin-left: 32px;
}
.sticky{
  width: 100%;
  position: sticky;
  top: 0;  
}
h1{
   font-size: 92px;
   margin: 20px 0;
   font-weight: 300;
   font-style: italic;
}
h2{
  font-size: 64px;
}
h3{
  font-size: 24px;
}
h4{
  font-size: 18px;;
}
h5{
  font-size: 16px;;
}
.flex_column{
  display: flex;
  flex-direction: column;
}
.logo_2{
  width: 568px;
  height: auto;
  margin-top: 300px;
}
.citybg{
  background: none;
  background-image: url(public/images/logobg.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding-top: 450px;
  width: 100%;
  max-width: 1727px;
}
.citybg .logo_2{
  opacity: 0;
  position: relative;
  top: 100px;
  transition: all 800ms ease-in-out;
}
.citybg:hover .logo_2{
  opacity: 1;
  top: 0px;
}
.citybg h1{
  opacity: 1;
  top: 0px;
  margin: 0;
  padding: 20px 0;
  background: var(--primaryBg);
}
/* SCROLL EFFECT CONTAINER */
.reveal_section {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap:22px;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  /* HORIZONTAL OFFSETT */
  --x: 100%;
}
/* IMG REVEAL */
.reveal_img {
  --y: 0;
  
  animation: reveal_animation both ease-in;
  view-timeline: --scroll-tl;
  animation-timeline: --scroll-tl;
  animation-delay: cover 10%;
  animation-range: cover 10% cover 35%;
}
/* TEXT REVEAL */
.reveal_text {
  --x: 0;
  --y: 50%;
  view-timeline: --scroll-tl;
  animation: reveal_animation both ease-out;
  animation-timeline: --scroll-tl;
  animation-delay: cover 35%;
  animation-range: cover 35% cover 50%;
  position: sticky;
  bottom: 40%;
}
.reveal_3{
  --x: 0;
  --y: 50%;
}
@keyframes reveal_animation {
  0% {
    opacity: 0;
    translate: var(--x, 0) var(--y, 0);
  }
}
.img_stroke{
  border: var(--stroke);
}
.padded_container{
  box-sizing: border-box;
  padding: 0 62px;
  width: 100%;
  background: var(--primaryBg);
}
.section1_slide2{
  width: 100%;
  position: relative;
  animation: shake_horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) forwards;
  view-timeline: --scroll-tl;
  animation-timeline: --scroll-tl;
  animation-delay: cover 35%;
  animation-range: cover 35% cover 50%;
}
@keyframes shake_horizontal {
  0%,
  100% {
            transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70% {
            transform: translateX(-10px);
  }
  20%,
  40%,
  60% {
            transform: translateX(10px);
  }
  80% {
            transform: translateX(8px);
  }
  90% {
            transform: translateX(-8px);
  }
}
.section1_slide4{
  width: 100%;
  margin: 0 auto;
}
.reveal_section2{
  grid-template-columns: auto;
}
.section1_slide5{
  width: 100%;
  max-width: 1280px;
  height: 1411px;
  background-image: url(public/images/section1slide5.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 100px auto;
  position: relative;
}
.textbox{
  display: flex;
  padding: 27px 29px;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  position: absolute;
  background: var(--primaryBg);
  box-shadow: -9px 17px 0 0 var(--redAccent);
}
.section1_textbox{
  left: 28px;
  top: -40px;
  max-width: 642px;
  border: var(--stroke);
  animation: float 3s ease-in-out infinite;
}
@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
/* .final_gif{
  width: 100%;
  height: auto;
  width: 1200px;
  height: 400px;
  margin: 0 auto;
  background: url(public/images/FinalGif.gif);
  background-position: center;
  background-size: cover;
  background-position: center;
  padding: 0 80px;
  position: sticky;
} */
.section1_slide3{
  width: 1084px;
height: 399px;
  background-image: url(public/images/section1slide3.jpg);
}
.section1_textbox2{
  border: 1px solid var(--primaryText);
  width: 247px;
  top: 22px;
  right: 294px;
}
.tilted_item{
  transform: none;
}
.tilted_item:hover{
  transform: rotateY(10deg) translateY(-3px) skewY(-1deg);
}
.section1_final{
  background-image: url(public/images/section1slide8.jpg);
  width: 1315px;
  height: 540px;
}
.section1_textbox3{
  box-shadow: -9px 4px 0 0 var(--greyAccent);
  left: 260px;
  top: 32px;
  width: 284px;
}
.section1_textbox4{
  box-shadow: -9px 4px 0 0 var(--greyAccent);
  left: unset;
  top: 142px;
  right: 123px;
  width: 300px;
  height: 134px;
}
.characters_section{
  gap: 56px;
  margin: 0 auto;
  max-width: 980px;
  align-items: center;
  justify-content: center;
}
.character_card{
  gap: 14px;
  align-items: center;
  justify-content: center;
  position: relative;
}
.character_card img{
  width: 224px;
  height: 221px;
  margin-bottom: 12px;
}
.tag{
  display: inline-flex;
  padding: 10px;
  justify-content: center;
  align-items: center;
  background: var(--primaryBg);
  border: 2px solid var(--black);
  position: absolute;
  top: -10px;
  right: -20px;
}
.characters_heading{
  margin: 120px 0;
  text-align: center;
  font-weight: 500;
  font-style: italic;
}
.section2_slide1{
  background-image: url(public/images/section2slide1.jpg);
  width: 1272px;
  height:635px ;
  animation: none;
}
.section2_slide1 .section1_textbox2{
  box-shadow: none;
  top: 0;
  left: 10px;
  width: 300px;
}
.section2_slide1 h3{
  font-size: 36px;
}
.section2_slide2{
  position: absolute;
  right: 20px;
  top: 410px;
  width: 994px;
height: 385px;
margin-bottom: 600px;
}
.section3_slide2{
  background-image: url(public/images/dubaiSlide2.png);
}
.no_bg{
  background: none;
}
.section3_slide4{
  background-image: url(public/images/dubaislide4png.png);
  width: 1288px;
  height: 1979px;
}
.section3_slide4extra{
  position: absolute;
  height: 667px;
  scale: 1.3;
  width: auto;
  top: 0;
  right: 0;
  transform: none;
  animation: float 3s ease-in-out infinite;
}
.section3_slide4:hover .section3_slide4extra{
  scale: 1.4;
  transform: rotateY(10deg) translateY(-3px) skewY(-1deg);
}
.audio_player{
  position: fixed;
  bottom: 42px;
  right: 72px;
  z-index: 999;
}
.audio_button{
  background-color: var(--redAccent);
  border: none;
  padding: 12px;
  display: flex;
  gap: 8px;
  align-items: center;
  border: 2px solid var(--black);
  width: 140px;
}
.audio_button h4{
  color: var(--primaryBg);
  font-weight: 500;
  font-family: 'Staatliches';
}
.audio_button:hover img,
.audio_button:hover h4{
  opacity: 0.8;

}
.audio1{
  display: var(--audio1);
}
.audio2{
  display: var(--audio2);
}
footer{
  display: flex;
  flex-direction: column;
  padding: 120px 20px;
  background: var(--black);
  align-items: center;
  gap: 10px;
}
.final_gif{
  width: 100px;
  height: 200px;
  background-image: url(public/images/FinalGif.gif);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.footer {
  display: flex;
  gap: 40px;
  justify-content: center;
}

.footer div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer a {
  text-decoration: none;
  color: var(--primaryBg);
  font-size: 14px;
  font-family: Staatliches;
}

.footer input {
  padding: 5px;
}

.footer button {
  padding: 5px 10px;
  cursor: pointer;
}
footer h4,
footer h5{
  font-family: Staatliches;
  color: var(--primaryBg);
  font-weight: 300;
}

.typewriter h4 {
  overflow: hidden;
  border-right: .15em solid var(--redAccent);
  white-space: wrap;
  margin: 0 auto;
  letter-spacing: .15em;
  animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
  view-timeline: --scroll-tl;
  animation-timeline: --scroll-tl;
  animation-delay: cover 10%;
  animation-range: cover 10% cover 35%;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: var(--redAccent); }
}
.story_container{
  width: 100%;
  gap: 24px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 72px;
  box-sizing: border-box;
  position: relative;
  top: -200px;
  
}
.story_container .characters_heading{
  margin: 0;
}
.final_textbox{
  position: relative;
  margin: 80px auto 200px auto;
  max-width: 600px;
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}