.yt-facade{
    position:relative; width:100%; aspect-ratio:16/9; display:block; border:0; padding:0; margin:0;
    cursor:pointer; background:#000 center/cover no-repeat; border-radius:12px; overflow:hidden;
    box-shadow:0 6px 24px rgba(0,0,0,.15);
  }
  .yt-facade__shade{
    position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.35));
  }
  .yt-facade__play{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:72px; height:72px; border-radius:50%; background:rgba(255,255,255,.9);
    box-shadow:0 4px 16px rgba(0,0,0,.25);
  }
  .yt-facade__play:after{
    content:""; position:absolute; left:50%; top:50%; transform:translate(-35%,-50%);
    border-style:solid; border-width:12px 0 12px 20px; border-color:transparent transparent transparent #e62117;
  }
  .yt-facade__badge{
    position:absolute; left:12px; top:12px; font:600 12px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial;
    background:#ff0000; color:#fff; padding:6px 8px; border-radius:6px; opacity:.9;
  }
  .yt-iframe{
    position:relative; inset:0; width:100%; min-height:230px; border:0; border-radius:12px;
  }



   .fn-h3,
   h2 {
     font-size: 35px !important;
     color: #39234a !important;
   }

   @media (max-width: 768px) {

     h1,
     h2 {
       font-size: 26px !important;
     }

     h3,
     h5 {
       font-size: 16px !important;
     }
   }
 
 
.video-popup {
display: none;
position: fixed;
top: 20%;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
.video-popup-content {
position: relative;
width: 80%;
max-width: 900px;
}
.video-popup-content video {

width: 100%;
height: auto;
}
.close-popup {

position: absolute;

top: -40px;
right: 0;
color: white;
font-size: 35px;
cursor: pointer;
}

.close-popup:hover {
color: #ccc;
}

   .rounded-button-call {
     position: fixed;
     bottom: 224px;
     right: 30px;
     background-color: white;
     color: #39234a;
     padding: 15px;
     border-radius: 50%;
     box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
     text-align: center;
     display: flex;
     justify-content: center;
     align-items: center;
     width: 50px;
     height: 50px;
     font-size: 24px;
     text-decoration: none;
     z-index: 1000;
     transition: background-color 0.3s ease;
     border: none;
   }

   .rounded-button-call:hover {
     background-color: #39234a;
     color: #c96c32;
   }

   .whatsapp-button {
     position: fixed;
     bottom: 120px;
     right: 30px;
     z-index: 1000;
   }

   .whatsapp-button img {
     width: 50px;
     height: 50px;
     border-radius: 25px;
     box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease;
   }

   .whatsapp-button img:hover {
     transform: scale(1.1);
   }

   .rounded-button {
     position: fixed;
     bottom: 170px;
     right: 30px;
     background-color: white;
     color: #39234a;
     padding: 15px;
     border-radius: 50%;
     box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
     text-align: center;
     display: flex;
     justify-content: center;
     align-items: center;
     width: 50px;
     height: 50px;
     font-size: 24px;
     text-decoration: none;
     z-index: 1000;
     transition: background-color 0.3s ease;
   }

   .rounded-button:hover {
     background-color: #39234a;
   }

   .rounded-button i {
     margin: 0;
   }
 
 
 <!--//for slider-->
 
     /*
 * 1. SLIDER AREA STYLING
 * Sets the container's height and hides anything that overflows.
*/
.slider-area {
  position: relative;
  width: 100%;
  /*height: 80vh; */
  overflow: hidden; 
  background: #141b22; 
}

/* On smaller screens, you might want a shorter slider */
@media (max-width: 768px) {
  .slider-area {
    height: 29vh;
  }
}


/*
 * 2. SINGLE SLIDE STYLING
 * Each slide must fill the slider area.
*/
.single-slider {
  position: relative;
  width: 100%;
  height: 80vh; /* Match the main container's height */
}

@media (max-width: 768px) {
  .single-slider {
    height: 25vh; /* Match the main container's height */
  }
}


/*
 * 3. MEDIA STYLING (IMAGE AND VIDEO)
 * This is the magic for responsiveness. It makes the media
 * cover the entire slide area without stretching or squashing.
*/
.single-slider img,
.single-slider video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the media */
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;

  /* A simpler, more modern alternative to the above positioning: */
  /*
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* This crops the media to fit, preserving aspect ratio */
  */
}

@media (max-width: 375px) {
    .slider-btn{
        margin-left: 0px !important;
        margin-bottom: 10px !important;
    }
}
 
 
 <!--for stats elements-->
 
        /* Overriding Bootstrap's default colors to match the logo */
        :root {
            --bs-primary: #4A235A; /* Deep purple from the logo */
            --bs-primary-rgb: 74, 35, 90;
        }

        /* Custom class for the orange accent color from the logo */
        .text-accent {
            color: #E8743B;
        }

        /* Setting a consistent size for the SVG icons */
        .stat-icon {
            width: 32px;
            height: 32px;
        }

        /* Custom focus ring color for accessibility */
        .btn-primary:focus {
            box-shadow: 0 0 0 0.25rem rgba(74, 35, 90, 0.5);
        }
        .counter {
    display: flex;
    padding-left: 0px !important; 
}
     
   .btn.close {
     background-color: #ffffff;
     /* White background for contrast */
     border: 1px solid #ccc;
     /* Light gray border */
     color: #000;
     /* Black color for the '×' */
     font-size: 1.2rem;
     /* Slightly larger font size for visibility */
     width: 35px;
     height: 35px;
     padding: 10px !important;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
     text-align: right;
   }

   .btn.close:hover {
     background-color: #f0f0f0;
     /* Light gray background on hover */
     color: #c96c32;
     /* Red color for the '×' on hover */
     transform: rotate(90deg);
     /* Slight rotation for a dynamic effect */
   }

   .btn.close:focus {
     outline: none;
     /* Remove default focus outline */
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
     /* Add a subtle shadow on focus */
   }
 
 


 
   .video-toggle-bottom-left {
     position: absolute;
     bottom: 20px;
     left: 20px;
     z-index: 10;
     background: rgba(0, 0, 0, 0.6);
     color: white;
     border: none;
     padding: 14px;
     font-size: 18px;
     border-radius: 50%;
     cursor: pointer;
     transition: background 0.3s;
     display: flex;
     width: 50px;
     height: 50px;
     align-items: center;
     justify-content: center;
   }

   .video-toggle-bottom-left:hover {
     background: rgba(255, 255, 255, 0.85);
     color: #000;
   }

   .video-toggle-bottom-left i {
     pointer-events: none;
   }