@import url("https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap");

*{
    border-radius: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
  }
  body{
    background: #000;
  }
  
  /* Loader */
  
  .loader-wrapper{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .loader{
    display: inline-block;
    width: 30px;
    height: 30px;
    position: relative;
    border: 4px solid #Fff;
    animation: loader 2s infinite ease;
  }
  .loader-inner{
    vertical-align: top;
    display: inline-block;
    width: 100%;
    background-color: #fff;
    animation: loader-inner 2s infinite ease-in;
  }
  @keyframes loader{
    0%{
      transform: rotate(0deg);
    }
    25%{
      transform: rotate(180deg);
    }
    50%{
      transform: rotate(180deg);
    }
    75%{
      transform: rotate(360deg);
    }
    100%{
      transform: rotate(360deg);
    }
  }
  @keyframes loader-inner{
    0%{
      height: 0%;
    }
    25%{
      height: 0%;
    }
    50%{
      height: 100%;
    }
    75%{
      height: 100%;
    }
    100%{
      height: 0%;
    }
  }
  
  /* header */
  
  header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.6s;
    padding: 40px 100px;
    z-index: 100000;
  }
  header.sticky{
    padding: 5px 100px;
    background: #fff;
  }
  header .logo{
    position: relative;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    font-size: 2em;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: 0.6s;
  }
  header ul{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  header ul li{
    list-style: none;
  }
  header ul li a{
    margin: 0 15px;
    text-decoration: none;
    color: #fff;
    letter-spacing: 2px;
    font-weight: 500;
    transition: 0.6s;
  }
  /* ##readd this if you want an image as bg##
  .banner{
    position: relative;
    width: 100%;
    height: 100vh;
    background: url(Pictures/ggow.png);
    background-size: cover;
  }
  */
  header.sticky .logo,
  header.sticky ul li a{
    color: #000;
  }

.banner::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px; /* Adjust height as needed */
    background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    pointer-events: none; /* Ensure the pseudo-element doesn't interfere with mouse events */
}

.banner .bloc {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.banner .bloc video,
.banner .bloc .bg-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}

.banner .bloc .bg-image {
    display: none;
}

  
  /* Add media query for smaller screens */
@media only screen and (max-width: 768px) {
    header ul li:not(:first-child) {
      display: none; /* Hide all shortcuts except the first one (Home) */
    }
  }
  
  /* Add media query for even smaller screens (e.g., phones) */
  @media only screen and (max-width: 480px) {
    header ul {
      justify-content: center; /* Center-align items */
    }
  
    header ul li {
      display: none; /* Hide all shortcuts */
    }
  
    header .logo {
      margin: 0 auto; /* Center the logo */
    }
  }

  /*Video BG*/
  
  .bloc{
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
  }
  .bloc video{
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    margin: auto;
    min-width: 100%;
    min-height: 100%;
  }
  .bloc .scroll-down {
      position: absolute;
      left: 50%;
      bottom: 20px;
      display: block;
      text-align: center;
      font-size: 20px;
      z-index: 100;
      text-decoration: none;
      text-shadow: 0;
    width: 25px;
    height: 25px;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    z-index: 9;
    left: 50%;
    background: none;
    -webkit-transform: translate(-50%, 0%) rotate(45deg);
    -moz-transform: translate(-50%, 0%) rotate(45deg);
    transform: translate(-50%, 0%) rotate(45deg);
      -webkit-animation: fade_move_down 2s ease-in-out infinite;
      -moz-animation:    fade_move_down 2s ease-in-out infinite;
      animation:         fade_move_down 2s ease-in-out infinite;
  }
  /*animated scroll arrow animation*/
  @-webkit-keyframes fade_move_down {
    0%   { -webkit-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
    50%  { opacity: 1;  }
    100% { -webkit-transform:translate(0,10px) rotate(45deg); opacity: 0; }
  }
  @-moz-keyframes fade_move_down {
    0%   { -moz-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
    50%  { opacity: 1;  }
    100% { -moz-transform:translate(0,10px) rotate(45deg); opacity: 0; }
  }
  @keyframes fade_move_down {
    0%   { transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
    50%  { opacity: 1;  }
    100% { transform:translate(0,10px) rotate(45deg); opacity: 0; }
  }

/* middle section */
.middle-section {
    height: 100vh;
    background-color: #000;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.links {
    display: flex;
    flex-direction: column;
    margin-left: 5%; /* Adjust as needed */
}

.link {
    font-size: 36px; /* Adjust as needed */
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    margin-bottom: 20px;
    transition: color 0.3s ease;
    position: relative; /* Ensure proper stacking context */
}

.link:hover {
    color: #ffd700; /* Change text color on hover */
    text-shadow: 0 0 20px #ffd700; /* Add glowing effect */
}

.middle-section .links .link {
    text-decoration: none;
}

.description-box {
  position: absolute;
  top: 50%;
  right: 5%; /* Adjust distance from right side */
  transform: translateY(-50%);
  max-width: 30%; /* Adjust maximum width of description */
  padding: 10px;
  color: rgba(150, 150, 150, 0); /* Transparent initially */
  animation: fadeIn 0.5s forwards, flicker 2s infinite, shadowMove 3s infinite alternate; /* Fade and flicker in animation */
  overflow: hidden; /* Hide overflowing text */
  white-space: normal; /* Allow text to wrap */
  word-break: break-word; /* Break word if necessary */
  z-index: 1; /* Ensure the description appears above other elements */
}


@keyframes fadeIn {
  from {
      color: rgba(150, 150, 150, 0); /* Transparent */
      transform: scale(90%);
  }
  to {
      color: rgba(150, 150, 150, 1); /* Grey */
      transform: scale(100%);
  }
}

@keyframes flicker {
  0% {
      opacity: 1; /* Initial opacity */
  }
  50% {
      opacity: 0.8; /* Lower opacity */
  }
  100% {
      opacity: 1; /* Return to initial opacity */
  }
}

@keyframes shadowMove {
  0% {
      text-shadow: 0 0 2.5px rgba(255, 255, 255, 0.3), 0 0 5px rgba(255, 255, 255, 0.3); /* Initial text shadow */
  }
  50% {
      text-shadow: 0 0 5px rgba(255, 255, 255, 0.6), 0 0 7.5px rgba(255, 255, 255, 0.4); /* Move shadow effect */
  }
  100% {
      text-shadow: 0 0 2.5px rgba(255, 255, 255, 0.3), 0 0 5px rgba(255, 255, 255, 0.3); /* Return to initial shadow */
  }
}


.star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #fff;
    opacity: 0; /* Initially hide stars */
    animation: twinkle 10s infinite linear;
}

@keyframes twinkle {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* Bottom Section */
.bottom-section {
    position: relative;
    height: 100vh;
    background-color: #f3f3f3; /* Light grey background */
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 20px 40px;
    box-sizing: border-box;
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

.bottom-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px; /* Adjust height as needed */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    pointer-events: none; /* Ensure the pseudo-element doesn't interfere with mouse events */
}


.bottom-content {
    display: flex;
    flex-direction: column;
    margin-bottom: 5px; /* Adjust margin to match fade height */
}

.bottom-content a {
    margin-top: 10px;
    color: #000;
    position: relative;
    z-index: 1;
    white-space: nowrap; /* Prevent link text from wrapping */
    overflow: hidden;
    text-overflow: ellipsis; /* Display ... when text overflows */
}

.version, .creator {
    opacity: 0.5;
}

.bottom-section::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2.5px; /* Adjust height as needed */
    background: linear-gradient(to right, 
        red, orange, yellow, green, blue, indigo, violet, 
        violet, indigo, blue, green, yellow, orange, red);
    background-size: 200% auto;
    animation: rainbow-fade 5s linear infinite; /* Adjust animation duration as needed */
}

/* Animation */
@keyframes rainbow-fade {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 200% 0;
    }
}