@charset "UTF-8";
/* CSS Document */

/* ==========================================================================
   1. BASE STYLES (Mobile First) Applies to all screens by default (0px to 767px)
   ========================================================================== */

 .bg-slider {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1; 
      overflow: hidden;
        opacity: 1;
    }

    .slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      opacity: 0;
      transform: scale(1);
      z-index: 2;
    }

    .slide.active {
      opacity: 1;
      transform: scale(1.3);
      transition: opacity 2.5s ease-in-out, transform 7.5s ease-out;
    }

    .bg-slider::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.3); 
      z-index: 4; 
    }


/* ==========================================================================
   2. TABLET BREAKPOINT (768px) Applies to screens 768px wide and up (e.g., iPads, portrait tablets)
   ========================================================================== */
@media (min-width: 768px) {

 .bg-slider {opacity: 0.85;}
}


/* ==========================================================================
   3. DESKTOP BREAKPOINT (1024px) Applies to screens 1024px wide and up (e.g., Laptops, landscape tablets)
   ========================================================================== */
@media (min-width: 1024px) {
.bg-slider {opacity: 0.66;}
    
}