:root{
    --primaryBg:#FBFCFC;
    --redAccent: #C03033;
    --primaryText: #2B2A2B;
    --stroke:4px solid #000001;
    --greyAccent:#628082;
    --black: #000000;
    --audio1: block;
    --audio2: none;
}
#preloader{
  position: fixed;
  inset: 0;
  z-index: 99999;
  top:0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.preloader_base{
  position: absolute;
  inset: 0;
  background: #151522;
  z-index: 0;
}
.preloader_transit{
  position: relative;
  z-index: 1;
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#preloader.loaded .preloader_base{
  animation: exit_base 1000ms ease-out forwards;
}
@keyframes exit_base{
  0%{
    opacity: 1;
  background: radial-gradient(circle at center, #7a1414bc 0%, #2b050549 25%, #151522de 70%);
  
  }
  60%{ 
    opacity: 0,5;
  background: radial-gradient(circle at center, #7a1414bc 0%, #2b050549 25%, #15152200 70%);
  
  }
  100%{ 
  background: radial-gradient(circle at center, #7a141400 0%, #2b050549 25%, #15152200 70%);
    
    opacity: 0; 
  
  }
}
.preloader_bg{
  position: absolute;
  width: 900px;
  height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle at center, #7a1414bc 0%, #2b050500 25%, #15152200 70%);
  pointer-events: none;
}
.preloader_scope{
  position: relative;
  width: 220px;
  height: 220px;
}
.preloader_logo{
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  animation: spin_scope 1s linear infinite;
}
@keyframes spin_scope{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
.crosshair_line{
  stroke: var(--primaryBg);
  stroke-width: 1.5;
}
.crosshair_circle{
  fill: none;
  stroke: var(--primaryBg);
  stroke-width: 2.5;
}
.widow_logo{
  fill: var(--redAccent);
}

#preloader.loaded .preloader_transit{
  animation: exit_move 900ms cubic-bezier(0.455, 0.030, 0.515, 0.955) forwards;
}
@keyframes exit_move{
  0%{
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  50%{
    transform: translate(310px, 37px) scale(0.8);
    opacity: 1;
  }
   98%{
    transform: translate(310px, 37px) scale(0.5);
    opacity: 1;
  }
  100%{
    transform: translate(310px, 37px) scale(0.5);
    opacity: 0;
  }
}
body.loading{
  overflow: hidden;
}
/* width */
::-webkit-scrollbar {
  width: 5px;
}
@keyframes load{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
/* 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;
opacity: 0;
justify-content: center;
align-items: center;
background: var(--redAccent);
position: fixed;
z-index: 9999;
  animation: load 900ms cubic-bezier(0.455, 0.030, 0.515, 0.955) 1.9s forwards;

}
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: 8px;
}
.sticky{
  width: 100%;
  position: sticky;
  top: 0;  
}
h1{
   font-size: 92px;
   margin: 20px 0;
   font-weight: 300;
   font-style: italic;
}
h2{
  font-size: 3.25rem;
}
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;
}
.citybg{
  background: none;
  background-image: url(public/images/logobg.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding-top: 350px;
  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;
  text-align: center;
  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;
  display: flex;
flex-wrap: wrap;
    view-timeline: --scroll-tl;
  max-width: 980px;
  min-height: unset;
  margin-top: 40px;
  margin-bottom: 100px;
  align-items: bottom;
  justify-content: space-between;
}
.character_card{
  gap: 14px;
  width: 282.580px;
  align-items: center;
  justify-content: center;
  position: relative;
}
.character_card img{
  width: 224px;
  height: 221px;
  position: relative;
  bottom: 0px;
  box-shadow: 2px 0px 0px #000000;

  object-fit: cover;

  margin-bottom: 12px;
}
.character_card:hover .tag{
top: -25px;
right: -25px;
}
.character_card:hover img{
  bottom: 10px;
  box-shadow: 5px 10px 0px #000000;
  width: 100%;
}
.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;
}
.character_card h3{
  /* width: 282.580px; */
  text-align: center;
}
.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);
}
.link{
  color: var(--redAccent);
}
main{
  position: sticky;
}
footer{
  display: flex;
  flex-direction: column;
  background: var(--black);
  height: 100vh;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 99999;
  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;
  padding: 20px 0;
}

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

 
  .story_container {
    width: 100%;
    gap: 24px;
    max-width: 1440px;
    margin: 0 auto;
  margin-bottom: 100px;
    padding: 0 72px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    position: relative;
  }
  .characters_heading { margin: 0; }
 
  .typewriter h4 {
    font-size: 20px;
    line-height: 1.6;
    letter-spacing: .02em;
    max-width: 900px;
  }
 
  .char {
    opacity: 0;
    transition: opacity 0ms linear;
  }
  .char.visible {
    opacity: 1;
  }
  .word {
    white-space: nowrap;
    display: inline-block;
  }
 .spacer{
  display: block;
  height: 100px;
 }
  #storyText{
    text-align: center;
    
  }
  .caret {
    display: inline-block;
    width: 1px;
    margin-left: 2px;
    border-right:1px solid var(--redAccent);
    animation: blink-caret .75s step-end infinite;
    vertical-align: -0.1em;
  }
  @keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: var(--redAccent); }
  }
.final_textbox{
  position: relative;
  margin: 80px auto 200px auto;
  max-width: 600px;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.appearing_text{
  view-timeline: --scroll-tl;
  animation-timeline: --scroll-tl;
  animation-delay: cover 35%;
  animation-range: cover 35% cover 50%;
  opacity: 0;
  animation: fade-in 1s ease-in forwards;
}
.phone{
  display: none;
}
@media (max-width: 768px) {
  .laptop{
    display: none;
  }
  .phone{
    display: flex;
  }
  li{
    display: none;
  }
  footer{
    display: flex;
    z-index: 999;
    flex-direction: column;
  }
  #preloader{
    display: none;
  }
  header{
    animation-delay: 0s;
  }
  @keyframes load{
  0%{
    height: 100vh;
    opacity: 1;
  }
  100%{
    height: 100px;
    opacity: 1;
  }
}
  .footer{
    flex-direction: column;
  }
  .section2_slide8{
  background-image: url(public/images/laptop.jpg);
  animation: none;
  background-position: center;
  height: 100%;
  background-size: cover;
}
.section2_slide8 .section1_textbox2{
  margin-top:100px;
  padding: 15px;
  box-shadow:-5px 5px 0 0 var(--redAccent)
}
h4{
  font-size: 16px;
}
aside{
  display: none;
}
body{
  height: 100vh;
}
}
.final{
      animation-range: cover 10% cover 20%;
}
.scroll_arrow{
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: opacity 400ms ease;
  pointer-events: none;
}
.scroll_arrow.hidden{
  opacity: 0;
}
.scroll_arrow span{
  display: block;
  width: 26px;
  height: 26px;
  border-right: 3px solid var(--primaryBg);
  border-bottom: 3px solid var(--primaryBg);
  transform: rotate(45deg);
  animation: arrow_bounce 1.4s ease-in-out infinite;
}
.scroll_arrow span:nth-child(2){
  animation-delay: 200ms;
}
@keyframes arrow_bounce{
  0%, 100%{
    opacity: 0.3;
    transform: rotate(45deg) translate(0, 0);
  }
  50%{
    opacity: 1;
    transform: rotate(45deg) translate(6px, 6px);
  }
}
.floatIn{
  animation: float-in 500ms cubic-bezier(0.550, 0.085, 0.680, 0.530) both  ;
}
@keyframes float-in {
  0%   { 
    opacity: 0;
    transform: translateY(100px) }
  100%  { 
    opacity: 1;
    transform: translateY(0) }
}
@keyframes fade-in {
  0%   { 
    opacity: 0;
  }
  100%  { 
    opacity: 1;
  }
}

.fadeIn{
  animation: fade-in 1200ms 200ms ease-in-out both ;
}
.floatIn{
  animation: float-in 1200ms 200ms ease-in-out both ;
}
.scrollAnimate{
    view-timeline: --scroll-tl;
    animation-timeline: --scroll-tl;
    animation-delay: cover 50%;
    animation-range: cover 10% cover 35%;
}