.floating-widget {
    position: fixed;
    top:70%;
    right: 10%;
    transform: translateY(-50%);
    z-index: 9999;
    display: block;
    cursor: move; /* make draggable */
    transition: opacity 0.5s ease;
      touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
}



/* Other CSS remains the same */


.widget-container {
    position: relative;
    display: inline-block;
}

.main-widget {
    width: 120px;
}


.close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    position: absolute;
    top: -23px;
    left: 117px;
    background: rgb(0, 0, 0);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    z-index: 10;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

@keyframes floatEverywhere {
    0%   { transform: translate(0, 0); }
    20%  { transform: translate(15px, -20px); }
    40%  { transform: translate(-25px, 10px); }
    60%  { transform: translate(30px, 25px); }
    80%  { transform: translate(-10px, -15px); }
    100% { transform: translate(0, 0); }
}
/* To position the banner immediately below the header */
/* Ensure the header has no margin, and set relative positioning for proper control */
.header-area {
    position: relative;
    margin-bottom: 0; /* Remove any default margin */
}

/* Banner Section (Main Banner) */
.banner-container {
    position: relative;
  
    top: 0; /* Set it to appear directly below the header */
    width: 100%;
    margin-top: 10px; /* Space between header and banner */
}

/* Mobile Banner (Same positioning) */
.d-block.d-md-none {
    position: relative;
    top: 0;
    width: 109%;
    margin-top: 10px; /* Add a slight margin if needed */
}

/* Banner Image (Adjust the size) */
.banner-container img {
    width: 100vw;
    height: auto;
}

/* Additional adjustment for mobile view */
@media (max-width: 767px) {
    .banner-container {
        margin-top: 10px;
    }
}