/* --- Core Slider Container Styling --- */
.full-screen-slider {
  width: 100%; /* Ensure the slider takes full width of its parent */
  max-width: 100%; /* Prevent it from exceeding its parent's width */
  margin: 0 auto; /* Center the slider if its parent isn't full width */
  overflow: hidden; /* Important: Hides any parts of images that might spill over */
  position: relative; /* Needed for absolute positioning of elements inside if applicable */
}

/* --- Image Styling within Slides --- */
.full-screen-slider img {
  width: 90%; /* Make images take 100% width of their slide container */
  height: 670px; /* IMPORTANT: Maintain aspect ratio to prevent stretching/squishing */
  display: block; /* Remove any extra space below the image */
  max-width: 100%; /* Ensure images don't overflow */
}

/* --- Slick Carousel Specific Overrides (if needed) --- */
/* These target the internal structure of Slick to ensure proper sizing */

.full-screen-slider .slick-list {
  /* This is the viewport for the slides */
  overflow: hidden; /* Ensure only one slide is visible at a time */
}

.full-screen-slider .slick-track {
  /* This contains all the slides and moves them */
  display: flex !important; /* Ensures slides are laid out correctly */
}

.full-screen-slider .slick-slide {
  /* Individual slide container */
  float: left; /* Essential for older slick versions, good practice */
  height: auto; /* Let content define height, or specify if needed */
  display: flex !important; /* Ensures content within slide respects its dimensions */
  justify-content: center; /* Center image horizontally if it's smaller than slide */
  align-items: center; /* Center image vertically if it's smaller than slide */
}


/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
  .full-screen-slider {
  }

  .full-screen-slider img {
    width: 95%;
    height: 95%;
    object-fit: cover; /* Maintain full coverage without stretching */
  }
}

@media (max-width: 480px) {
  .full-screen-slider {
  }

  .full-screen-slider img {
    width: 95%;
    height: 95%;
  }
}

/* Optional: If you want fixed height slides and images to cover */
/* Use this if you want a consistent height for all slides */
/*
.full-screen-slider .slick-slide {
  height: 500px; // Example fixed height
  display: flex;
  align-items: center;
  justify-content: center;
}
.full-screen-slider img {
  height: 100%; // Make image take full height of the slide
  width: 100%;
  object-fit: cover; // Crop image to cover the area without distorting
  object-position: center; // Center the cropped image
}
*/

/* Nopa logo container */
/*#banner-animation .nopa-logo {*/
/*  position: absolute;*/
/*  right: 20px;*/
/*  bottom: 20px;*/
/*  display: block;*/
/*}*/

/* Banner container */
#banner-animation {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 300px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden; /* Prevent logo from spilling out */
}

/* Optional center element */
.transform-center {
  width: 100%;
  height: 100%;
}

/* Nopa logo container */
.nopa-logo {
  position: absolute;
  bottom: 73px;
  right: 20px;
  max-width: 20vw;
  min-width: 60px;
  z-index: 10;
}

/* Nopa logo image */
.nopa-logo img {
  width: 100%;
  height: 40px;
  display: block;
}

/* Tablet view */
@media (max-width: 768px) {
  #banner-animation {
    min-height: 220px;
  }
  
   .click-here {
        font-size: 5px !important;
        font-weight: bold;
        margin-top: -16px !important;
    }
}

/* Mobile view */
@media (max-width: 480px) {
  #banner-animation {
    min-height: 180px;
  }
  
  .nopa-logo {
      bottom: 90px !important;
      right: 20px;
      max-width: 20vw;
      min-width: 60px;
      z-index: 10;
  }

  .click-here {
        font-size: 4px !important;
        font-weight: bold;
        margin-top: -15px !important;
    }
    
    .click-here1 {
        font-size: 4px !important;
        font-weight: bold;
        margin-bottom: -13px !important;
    }
    
    .scroll-down {
        display: none !important;
    }
}
.slick-track {
    background: #f3f3f3 !important;
}

.slick-prev,
.slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background-color: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 0px;
  cursor: pointer;
}

.slick-prev {
  left: 20px;
}

.slick-next {
  right: 20px;
}
.full-screen-slider {
  position: relative;
}

.click-here {
    font-size: 13px;
    font-weight: bold;
    margin-top: -5px;
}
.click-here1 {
    font-size: 13px;
    font-weight: bold;
    margin-top: -5px;
}
.nopa-logo:hover {
    font-size: 13px;
    font-weight: bold;
    color: #000072 !important;
}

/* ↓ Scroll Down (Blue Arrow + Text) */
.scroll-down {
  position: absolute;
  bottom: 65px;
  left: 52%;
  transform: translateX(-50%);
  text-align: center;
  cursor: pointer;
  animation: bounce 1.5s infinite;
}

.scroll-text {
    font-size: 12px;
    color: white;
    margin-bottom: 5px;
    font-weight: 500;
    letter-spacing: 1px;
    background: #000072;
    padding: 3px 12px 1px 11px;
    border-radius: 4px;
}

.scroll-down i {
    font-size: 25px;
    color: #000072;
    margin-top: -5px;
}


/* Position slick dots inside image bottom */
.full-screen-slider .slick-dots {
  position: absolute;
  bottom: 20px; /* adjust spacing from bottom */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex !important;
  justify-content: center;
  width: 100%;
  padding: 28px;
  margin: 0;
}

/* Customize dots */
.full-screen-slider .slick-dots li button:before {
  font-size: 12px;
  color: #fff; /* white dots */
  opacity: 0.7;
}

.full-screen-slider .slick-dots li.slick-active button:before {
  color: #00aaff; /* active dot color */
  opacity: 1;
}

/* Optional: Add dark gradient overlay for better contrast */
.full-screen-slider .slick-slide::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
  z-index: 5;
}