/*---------------------------------------
  HERO              
-----------------------------------------*/
.hero {
    position: relative;
    overflow: hidden;
  }
  
  .heroText {
      position: absolute;
      z-index: 9;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 85%;
      text-align: center;
      height: 50%;
  }
  
  
  
  .imageWrapper {
      width: 100%;/*used with object-fit:cover; to make the image fit either width either height*/
      overflow: hidden; /* Hide overflow */
  }
      .imageWrapper img {/*this is in case you use image as bg*/
          width: 100%; /* Make the image take the full width */
          height: 100%; /* Make the image take the full height */
          object-fit: cover; /* Cover the area while maintaining aspect ratio */
      }
  
  
  
  
  /*related to script to parallax sky & clouds on mouse move.
  if you modify the sky's    transform: translateZ(-1px) scale(1.4)    below, make sure to modify same value at script:    document.querySelector('.sky').style.transform = `translate(${-moveX / 30}px, ${-moveY / 30}px) scale(1.4)`*/
  .parallax-container {
      position: relative;
      width: 100%;
      height: 100%;
      perspective: 1000px;
      overflow: hidden;
  }
  
  .sky {
      background: var(--image-sky) no-repeat center center;
      background-size: cover;
      position: absolute;
      width: 120%; /* Make sky bigger than screen */
      height: 120%; /* Make sky bigger than screen */
      top: 50%;
      left: 50%;
      /*transform: translate(-50%, -50%) scale(1.2);*/
      transform: translate(-50%, -50%);
      z-index: 1;
      filter: blur(2px);
  }
  
  .clouds {
      background: var(--image-clouds) no-repeat center center;
      background-size: cover;
      position: absolute;
      width: 100%; /* Set to 80% when wantImageBiggerThanScreen is false */
      height: 100%; /* Set to 80% when wantImageBiggerThanScreen is false */
      top: 50%;
      left: 50%;
      /*transform: translate(-50%, -50%) scale(1.02);*/
      transform: translate(-50%, -50%);
      z-index: 2;
  }
  /*end related*/
  
  /*glowing h1*/
  h1 {
      background: linear-gradient(
          to right,
          var(--primary-color) 0%,
          var(--primary-color) 40%,
          white 50%,
          var(--primary-color) 60%,
          var(--primary-color) 100%
      );
      background-size: 300% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: glow 3s ease-in-out 1, sweep 3s ease-in-out 1;
      text-shadow:2px 2px 5px rgba(0, 0, 0, 0.4);/*bit of text shadow*/
  }
  
  @keyframes glow {
      0%, 15% {
          text-shadow: 50px 0 20px transparent;
      }
      50% {
          text-shadow: 0 0 20px var(--white-color);
      }
      85%, 100% {
          text-shadow: -50px 0 20px transparent;
      }
  }
  
  @keyframes sweep {
      0% {
          background-position: 100% 0;
      }
      100% {
          background-position: -100% 0;
      }
  }
  /*end glowing h1*/
  
  









/*radio player play button*/
#cover {
position: absolute;
/*top: 0;*/
right: 0;
bottom: 0;
left: 0;
display: none;
direction:ltr;
}

#cover.loaded {
display: block;
}

#loading {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
z-index: 125;
}

#loading:before {
content: "";
width: 44px;
height: 44px;
border: 4px solid rgba(255, 255, 255, 0.35);
border-top-color: rgba(255, 255, 255, 0.95);
border-radius: 50%;
animation: cwLoadingSpin 0.8s linear infinite;
}

@keyframes cwLoadingSpin {
to {
    transform: rotate(360deg);
}
}

#loading.loaded {
display: none;
}

.p_img {
position: fixed;
top: 0;
left: 0;
width: 10px;
height: 10px;
opacity: 0;
}

.center {
position: absolute;
top: 50%;
right: 0;
left: 0;
margin: 0 auto;
transform: translateY(-50%);
}

#app {
width: 300px;
margin: 0 auto;
}

#main_cover {
position: relative;
display: block;
width: 120px;
height: 120px;
border: 0;
border-radius: 50%;

background-size: cover;
background-position: 50%;
background-repeat: no-repeat;
cursor: pointer;
overflow: hidden;
transition: 0.1s ease transform;
margin: 0 auto;
}

#main_cover:active {
transform: scale(0.9);
}

#main_cover.active {
background-image: url("images/bg_giphy.gif");
}

#main_cover.inactive {
background-image: url("images/f1_giphy.png");
}

#main {
width: 54px;
height: 60px;
overflow: hidden;
transform:scale(0.8) translate(4%, -62%);
}

.bar {
position: absolute;
width: 8px;
background-color: #fff;
border-radius: 10px;
transition: 0.4s ease transform, 0.4s ease top, 0.4s ease bottom;
}

#_1 {
top: 0;
bottom: 0;
}

#_2 {
top: -13px;
left: 23px;
height: 60px;
transform: rotateZ(-60deg) translateY(0px);
}

#_3 {
top: 13px;
left: 23px;
height: 60px;
transform: rotateZ(60deg) translateY(0);
}

#_4,
#_5 {
top: 27px;
right: 0;
bottom: 27px;
}

#main_cover.active #_2 {
transform: rotateZ(-60deg) translateY(53px);
}

#main_cover.active #_3 {
transform: rotateZ(60deg) translateY(-53px);
transition-delay: 0.5s;
}

#main_cover.active #_4 {
bottom: 0;
}

#main_cover.active #_5 {
top: 0;
transition-delay: 0.5s;
}

#main_cover.inactive #_2 {
transform: rotateZ(-60deg) translateY(0);
}

#main_cover.inactive #_3 {
transform: rotateZ(60deg) translateY(0);
transition-delay: 0.5s;
}

#main_cover.inactive #_4 {
bottom: 27px;
}

#main_cover.inactive #_5 {
top: 27px;
transition-delay: 0.5s;
}
/*radio player play button end*/







  
  /*
  .sticky-wrapper {
  position: sticky;
  bottom: 0;
  }
  */
  @media screen and (min-width: 992px) {
  /*can place this back if you place videowrapper back
      .hero {
          height: 100vh;
      }
  */
      .custom-video,
      .news-detail-image {
      object-fit: cover;
          width: 100vw;
          height: 100vh;
      }
  
      .sticky-wrapper {
          position: relative;
          bottom:70px;
          margin-bottom:-70px;/*to compensate empty space created after using above bottom*/
      }
  
      .imageWrapper {
          height: 100vh; /*Ensure full viewport height*/
      }
  }
  @media screen and (max-width: 991px) {
      .imageWrapper {
          max-height:90vh;
          min-height:40vh;
          
          /*instead of below 4 lines, i could use the following but didn't since aspect-ratio isn't supported in safari 2021:    aspect-ratio: 16/9;height: auto;*/
          width: 100%;
          overflow: hidden;
          position: relative;
          padding-top: 56.25%; /* Maintain aspect ratio *//* 16:9 aspect ratio */
      }
          .imageWrapper img {
              height: auto; /* Optional: Adjust for smaller screens if necessary */
          }
  }