/* Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::-webkit-scrollbar {
  display: none !important;
}

/* Hide scrollbar for IE, Edge and Firefox */
*{
  -ms-overflow-style: none !important;  /* IE and Edge */
  scrollbar-width: none !important;  /* Firefox */
}

.active{
  background-color: white;
  color: black !important;
}


body {
  font-family: Arial, sans-serif;
  /* background-color: rgb(3, 7, 41); */
  background-image: url("bg.png");
  max-height: 100vh;
  max-width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  color: white;
  overflow: hidden;
}

.navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30vw;
  height: 40px; /* Adjust based on your design needs */
  background-color: #000;
  border-radius: 10px;
  border: 2px solid transparent;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* Glowing effect */
}

.navbar:hover {
  box-shadow: 0 0 15px rgba(255, 255, 255, 1); /* Enhanced glowing on hover */
  border: 2px solid #fff;
}

.nav-links {
  list-style-type: none;
  display: flex;
  justify-content: space-around;
  width: 100%;
  padding: 0 0;
}

.nav-links li {
  text-align: center;
}

.nav-links a {
  color: #fff;
  text-decoration: none;
  padding: 2px 6px;
  border: 2px solid #fff;
  border-radius: 10px;
  transition: all 0.3s ease;
  width:5vw;
}

@media (orientation:landscape) {
    #logo{
      max-height: 2.3vw;
    }
}

/* Hover Effects */
.nav-links a:hover {
  background-color: #fff;
  color: #000;
  box-shadow: 0 4px 10px rgba(255, 255, 255, 0.5);
  animation: ease-in;
}


#home{
  height: 90vh;
  background-color: black !important;
  width: 95vw;
  border-radius: 20px;
  padding: 20px 20px;
  display: flex;
  justify-content: top;
  align-items: center;
  flex-direction: column;
}

.hero{
  position: relative;
  min-height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  scroll-snap-align: start;
  padding-top: 20px;
}

/* Parent container */
#home {
  scroll-snap-type: y mandatory;
  overflow-y: scroll; /* Enable scrolling when needed */
  height: 100vh; /* Full viewport height */
}

/* Child sections */
.hero {
  scroll-snap-align: start; /* Ensure each section aligns during scroll */
  height: 100vh; /* Full viewport height for jump scrolling */
  overflow-y: auto; /* Allow scrolling if content exceeds the height */
}


@media (orientation: portrait) {
  .navbar {
    position: fixed;
    top: 0;
    margin-top: 3.5vh;
    width: max-content;
    border-radius: 2vw;
  }

  .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
  }

  .nav-links a{
    margin: 0vw 1vw;
  }

  #home{
    height: 85vh;
    background-color: black !important;
    width: 95vw;
    border-radius: 10px;
    margin-top:7vh;
    overflow:scroll;
  }

}

@media (orientation: landscape) {
  .navbar {
    position: fixed;
    top: 0;
    margin-top: 3.5vh;
    width: max-content;
  }

  .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    padding: 5px 5px;
  }

  .nav-links a{
    margin: 0vw 0.3vw;
  }

  #home{
    height: 92vh;
    background-color: black !important;
    width: 95vw;
    border-radius: 20px;
    margin-top:7vh;
    overflow:scroll;
  }
}




/* home styling */

  @media (orientation:portrait) {
    #home h1{
      font-size: 5vw;
    }

    #dlogo {
      pointer-events: none;
      height: 40vh;
    }
  }

  @media (orientation:landscape) {
    #home h1{
      font-size: 2vw;
    }

    #dlogo {
      pointer-events: none;
      height: 50vh;
    }
  }


/* Arrow container */
.arrow-down {
  position: absolute;
  bottom: 10px; /* Position near the bottom */
  right: 20px; /* Position near the right edge */
  width: 20px;
  height: 20px;
  animation: bounce 1.5s infinite; /* Smooth bounce animation */
  cursor: pointer;
}

/* Arrow symbol */
.arrow-down::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  margin: auto;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid yellow; /* Arrow color */
}

.play {
  position: absolute;
  bottom: 10px; /* Position near the bottom */
  left: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

/* Arrow symbol */
.play::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  margin: auto;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid white; /* Arrow color */
  transform: rotate(-90deg);
}

/* Bounce animation */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

/* Carousel Container */
.carousel-container {
  position: relative;
  width: 100%;
  height: 100%;  /* Make the carousel cover the whole div */
  overflow: hidden;
}

.carousel {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-images {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}

.carousel-item {
  min-width: 100%;  /* Ensure each carousel item covers full width */
  min-height: 100%; /* Ensure each carousel item covers full height */
  position: relative;
  background-color: transparent !important;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.carousel-item img {
  width: 100%;
  height: 100%;  /* Make the image cover the whole carousel item */
  object-fit: cover;  /* Ensures the image is scaled properly without distortion */
  border-radius: 10px;
}

/* images slides */

.carousel-item:nth-child(1){
  background-image: url("./logos/lb1.png");
}

.carousel-item:nth-child(2){
  background-image: url("./logos/lb2.png");
}

.carousel-item:nth-child(3){
  background-image: url("./logos/lb3.png");
}

@media (orientation:portrait){

  .carousel-item{
    background-position: top;
    background-size: contain;
  }

  .carousel-item:nth-child(1){
    background-image: url("./logos/pb1.png");
  }

  .carousel-item:nth-child(2){
    background-image: url("./logos/pb2.png");
  }

  .carousel-item:nth-child(3){
    background-image: url("./logos/pb3.png");
  }
}




.carousel-description {
  position: absolute;
  bottom: 20%;
  left: 5%; /* Darker background for better readability */
  color: #fff;
  padding: 15px;
  border-radius: 5px;
  width: 90%; /* Ensures the description doesn't stretch too wide */
  box-sizing: border-box;
}

@media (orientation:portrait){
  .carousel-description {
    bottom: 10%;
    left: 10%;
  }
}

.carousel-description h3 {
  font-size: 2em; /* Make title size responsive */
  margin-bottom: 5px;
}

.carousel-description p {
  font-size: 1.2em; /* Make text size responsive */
  margin: 0;
}

.carousel-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
}

.carousel-nav button {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  font-size: 2em;
  transition: background-color 0.3s ease;
}

.carousel-nav button:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.carousel-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transform: translateY(-50%);
}

.carousel-nav button {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  font-size: 2em;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.carousel-nav button:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

#play-pause-button {
  position: absolute;
  left: 48%; /* Center the play/pause button */
  bottom: 10px;
  font-size: 2em;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transition: transform 0.3s ease;
}

#play-pause-button:hover {
  background-color: white;
  transform: scale(1.1); /* Slight zoom effect on hover */
}


/* Responsive Design for Different Screens */
@media (max-width: 768px) {
  .carousel-description h3 {
    font-size: 1.5em; /* Smaller title size for mobile screens */
  }

  .carousel-description p {
    font-size: 1em; /* Smaller text size for mobile screens */
  }

  .carousel-nav button {
    font-size: 1.5em; /* Adjust button size for mobile */
  }
}

@media (max-width: 480px) {
  .carousel-description h3 {
    font-size: 1.2em; /* Further reduce title size for very small screens */
  }

  .carousel-description p {
    font-size: 0.9em; /* Further reduce text size for very small screens */
  }

  .carousel-nav button {
    font-size: 1.2em; /* Further adjust button size for very small screens */
  }
}