/*---------------------------------------------

  Font

---------------------------------------------*/



@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap");



/*---------------------------------------------

  Utility

---------------------------------------------*/



:root {

  --primary-color: #0b0f18;

  --secondary-color: #131417;

  --brand-color: #327DC2;

  --white-color: #ffffff;

  --font-smoothing-webkit: antialiased;

  --moz-osx-font-smoothing: grayscale; 

}



html {

  scroll-behavior: smooth;

  

}



/* Applies to all scrollable elements */

::-webkit-scrollbar {

  height: 8px;

  width: 8px;

}



::-webkit-scrollbar-thumb {

  background: var(--brand-color); /* use your CSS variable or replace with a color */

  border-radius: 10px;

}



::-webkit-scrollbar-track {

  background: #222; /* optional: customize the track background */

}



body {

  font-family: "Poppins", sans-serif;

  background: var(--primary-color);

  overflow-x: hidden;

}



body, html {

  overflow-x: auto; /* Allow horizontal scrolling */

  width: 100%; /* Ensure full width */

}



h1, h2, h3, h4, h5, h6 {

  font-family: "Montserrat", sans-serif;

  font-weight: 600;

  color: #ffffff;

}



p, ul, ol {

  font-family: "Poppins", sans-serif;

  font-size: 16px;

  line-height: 1.75em;

  color: #ffffff;

}



b, strong {

  font-weight: 600;

  color: var(--brand-color);

}



a.button, 
button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--brand-color);
  color: #ffffff; /* This will always be white */
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  border-radius: 12px;
  padding: 12px 24px;
  margin-top: 10px;
  margin-right: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

a.button:hover, 
button:hover {
  background-color: var(--brand-color-darker);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15), 0 0 25px var(--brand-color-glow);
}

a.button:focus,
button:focus {
  outline: none;
}


/* Hyperlink style */

a {

  color: var(--brand-color); /* Use brand color */

  text-decoration: none; /* Remove underline for cleaner look */

  transition: color 0.3s; /* Smooth transition effect */

}



a:hover {

  color: #5A9BEF;

}



img {

  max-width: 100%;

}



svg {

  position: relative;

  z-index: 1;

}



section {

  position: relative;

  margin-top: 100px;

  z-index: 1;

}



.section-title {

  display: block;

  font-size: 16px;

  font-weight: 700;

  color: #ffffff;

  margin-bottom: 25px;

}



.section-title::after {

  content: "";

  width: 50px;

  height: 3px;

  background-color: var(--brand-color);

  display: block;

  margin: 10px auto 0;

}



.section-title strong {

  display: block;

  color: var(--brand-color);

  font-weight: 700;

  font-size: 36px;

}



.package {

  background: var(--secondary-color);

  padding: 20px;

  margin-bottom: 20px;

  border-radius: 8px;

  color: #ffffff;

}



#snow-canvas {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 9999; /* Ensure it is above all other content */

  pointer-events: none; /* Prevent interaction with other elements */

  background: transparent;

  z-index: -1; /* Ensure the canvas is behind other elements */

}



@keyframes fall {

    0% { transform: translateY(0); }

    100% { transform: translateY(100vh); }

}





/* Style for the dynamically loaded Official Host */

#official-host-container {

  position: fixed;

  top: 20%;

  right: 20px; /* Adjust distance from the right edge */

  z-index: 1000;

  max-width: 300px;

  display: none; /* Hidden initially */

}



/* Styling for the Official Host Card */

.official-host-card {

  background-color: #1e1e2f;

  color: #ffffff;

  border-radius: 15px;

  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);

  padding: 20px;

  font-family: 'Arial', sans-serif;

  text-align: center;

}



.official-host-header .official-host-logo {

  width: 120px; /* Set a fixed width */

  height: 120px; /* Set a fixed height */

  object-fit: contain; /* Ensures the logo scales proportionally within the given dimensions */

  margin-bottom: 15px;

}

.official-host-content .official-host-description {

  font-size: 16px;

  margin-bottom: 15px;

  color: var(--white-color);

}



.official-host-content .official-host-button {

  display: inline-block;

  background-color: var(--brand-color);

  color: #ffffff;

  text-decoration: none;

  padding: 10px 20px;

  border-radius: 25px;

  font-weight: bold;

  font-size: 1em;

  margin-top: 10px;

}



/* Updated Fancy Button Styling */

.official-host-button {

  display: inline-block;

  background: linear-gradient(135deg, var(--brand-color), #0056b3); /* Gradient effect */

  color: #ffffff;

  text-decoration: none;

  padding: 10px 20px;

  border-radius: 30px;

  font-weight: bold;

  font-size: 1em;

  margin-top: 10px;

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Subtle shadow */

  transition: all 0.3s ease; /* Smooth transitions */

  position: relative;

  overflow: hidden;

}



.official-host-button::before {

  content: '';

  position: absolute;

  top: 50%;

  left: -75px;

  width: 50px;

  height: 200%;

  background: rgba(255, 255, 255, 0.4);

  transform: rotate(45deg);

  transition: all 0.3s ease;

  opacity: 0;

}



/* Hover effect */

.official-host-button:hover {

  transform: translateY(-3px); /* Lift on hover */

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);

  background: linear-gradient(135deg, var(--brand-color), #0073e6);

}



/* Shine animation on hover */

.official-host-button:hover::before {

  left: 150%;

  opacity: 1;

  transition: all 0.5s ease;

}



/*---------------------------------------------

  Preloader

---------------------------------------------*/



#loader {

  position: relative;

  z-index: 40;

}



#loader .loader-wrapper {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  background: linear-gradient(to top right, #0b0f18, #131417);

  color: #ededed;

}



#loader .logo-wrapper {

  position: relative;

}



#loader .logo-wrapper .logo-spinner {

  position: relative;

  height: 128px;

  width: 128px;

  animation: spin 1s linear infinite;

  border-radius: 100%;

  border-width: 5px;

  border-style: solid;

  border-left-color: var(--brand-color);

  border-right-color: rgb(0 0 0/0.05);

  border-top-color: rgb(0 0 0/0.05);

  border-bottom-color: rgb(0 0 0/0.05);

}



#loader .logo-wrapper .logo-image {

  position: absolute;

  top: 50%;

  left: 50%;

  height: 85%;

  width: 85%;

  transform: translate(-50%, -50%);

  border-radius: 100%;

  background: rgb(0 0 0/0.05);

  padding: 1.3rem;

  text-align: center;

}



#loader .logo-wrapper .logo-image img {

  height: 100%;

  max-width: 100%;

}



#loader .loader-status {

  padding: 0 10px;

  text-align: center;

  line-height: 28px;

}



#loader .loader-status h2 {

  text-align: center;

  font-family: "Montserrat", sans-serif;

  font-size: 36px;

  line-height: 20px;

  font-weight: 700;

  color: #ffffff;

  margin: 0;

}



#loader .loader-status noscript {

  margin: 0 auto;

  margin-top: auto;

  margin-bottom: 5px;

  display: block;

  width: fit-content;

  border-radius: 5px;

  background: #ef4444;

  padding: 2px 5px;

  color: #ededed;

}



@keyframes spin {

  from {

    transform: rotate(0deg);

  }

  to {

    transform: rotate(360deg);

  }

}



#loader.loaded {

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

}



#loader .loader-status p,

#loader .loader-status noscript {

  margin: 5px 0; /* Consistent spacing between paragraphs */

}



#loader .loader-status noscript {

  display: inline-block;

  background: #ef4444;

  padding: 2px 5px;

  border-radius: 5px;

}



/* Timeout message */

#timeout-message {

  text-align: center;

  color: red;

  margin-top: 20px;

}



/* Skip button */

#skip-button {

  display: none;

  padding: 10px 20px;

  background-color: var(--brand-color);

  color: #fff;

  border: none;

  border-radius: 5px;

  cursor: pointer;

  margin-top: 20px;

  transition: background-color 0.3s ease;

}



#skip-button:hover {

  background-color: #2158b3;

}



/* Keyframes for spinning and fading */

@keyframes spin {

  from {

    transform: rotate(0deg);

  }

  to {

    transform: rotate(360deg);

  }

}



@keyframes fadeIn {

  to {

    opacity: 1;

  }

}



@keyframes fadeOut {

  to {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

  }

}



/* Fading out the loader */

#loader.loaded {

  animation: fadeOut 0.5s forwards;

}





/*---------------------------------------------

  Cookies

---------------------------------------------*/



#cookie-popup {

  position: fixed;

  bottom: 20px;

  width: 350px;

  margin: 0 20px;

  border-radius: 5px;

  background-color: var(--secondary-color);

  padding: 15px;

  z-index: 100; /* Ensure it is above other content */

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Add shadow for depth */

  display: none; /* Hidden by default */

}



#cookie-popup.show {

  display: block; /* Show when needed */

}



#cookie-popup #cookie-header img {

  width: 60px;

  height: 60px;

  display: block;

  margin: 0 auto 10px; /* Center image and add margin */

}



#cookie-popup #cookie-body p,

#cookie-popup #cookie-body a {

  font-size: 14px; /* Adjust font size for readability */

  margin: 0;

  color: #ffffff; /* Ensure text color is white */

}



#cookie-popup #cookie-body a {

  color: var(--brand-color); /* Use brand color for links */

  text-decoration: underline; /* Underline links */

}



#cookie-popup #btn-cookie {

  display: block;

  width: 100%;

  margin-top: 10px;

  background-color: var(--brand-color);

  color: #ffffff;

  border: none;

  padding: 10px;

  font-family: "Montserrat", sans-serif;

  font-weight: 600;

  border-radius: 5px;

  cursor: pointer;

  transition: background-color 0.3s ease;

}



#cookie-popup #btn-cookie:hover {

  background-color: #2158b3; /* Darken on hover */

}



@media screen and (max-width: 400px) {

  #cookie-popup {

    width: auto;

    margin: 0 10px; /* Adjust margin for smaller screens */

  }

}



/*---------------------------------------------

  Header

---------------------------------------------*/



#hero {

  padding-bottom: 30px; /* Reduced bottom padding */

  margin: 0;

  position: relative;

  overflow: hidden;

  text-align: center; /* Center text for mobile and tablet views */

}



#hero:after {

  content: "";

  position: absolute;

  background: linear-gradient(0deg, var(--primary-color) 1%, transparent 100%);

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  z-index: -1;

}



#hero h1 {

  font-size: 50px;

  font-weight: 800;

  color: #ffffff;

  text-transform: uppercase;

  margin-bottom: 25px;

  text-shadow: 0 2px 4px rgba(0,0,0,0.3);

}



#hero p {

  font-size: 1.25rem; /* Adjust font size as needed */

  line-height: 1.5; /* Improve line height for readability */

  color: #ffffff;

  opacity: 0.9;

  margin: 0 auto; /* Center the paragraph */

  max-width: 80%; /* Limit width for better text alignment */

  text-align: center; /* Center the text */

  text-shadow: 0 2px 4px rgba(0,0,0,0.3);

}



#hero .hero-image {

  width: 250px; /* Adjusted size for better visibility */

  height: auto; /* Maintain aspect ratio */

  display: block;

  margin: 20px auto 10px auto; /* Reduced top margin, small bottom margin */

}



.text-center {

  text-align: center;

}



.scroll-down {

  text-decoration: none; /* Remove the underline */

  display: inline-block; /* Ensure it's treated as an inline block */

}



.scroll-down i {

  font-size: 3rem; /* Adjust the size as needed */

  color: #ffffff; /* Set the color to white */

  margin: 0 auto; /* Center the icon */

  display: block; /* Make the icon a block element */

}



@media screen and (max-width: 767px) {

  #hero {

  background-attachment: scroll; /* Change to scroll for mobile */

  }

}



@media screen and (max-width: 1199px) {

  #hero {

  padding-top: 150px; /* Adjust top padding for medium screens */

  padding-bottom: 20px; /* Further reduced bottom padding for medium screens */

  }

}



@media screen and (max-width: 767px) {

  #hero {

  padding-top: 100px; /* Further reduced top padding for smaller screens */

  padding-bottom: 10px; /* Further reduced bottom padding for smaller screens */

  }



  #hero .hero-image {

  width: 150px; /* Further adjustment for smaller screens */

  }

}