#overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.7);
   /* Semi-transparent black */
   display: none;
   /* Hidden by default */
   justify-content: center;
   align-items: center;
   z-index: 9999;
   /* Ensure it's on top */

 }

 #popup-form {
   padding: 20px;
   border-bottom-right-radius: 8px;
   border-top-right-radius: 8px;
   text-align: center;
   box-shadow: none;
   background-color:transparent;
 }

 /* popup */
 /* .overpop {
   background-image: url('../../img/Untitled design (13).png');
   background-size: cover;
   border-radius: 8px;
   margin: 10px;
 } */

 #cl-button {
   background-color: #2A0134;
   /* Sets the background color to red */
   color: white;
   /* Sets the text color to white for contrast */
   border: none;
   /* Removes the default button border */
   padding: 5px 10px;
   /* Adds padding around the "X" */
   padding-bottom: 9px;
   cursor: pointer;
   /* Changes the cursor to a pointer on hover */
   font-size: 20px;
   /* Adjusts the size of the "X" */
   line-height: 1;
   /* Ensures proper vertical alignment of the "X" */
   border-radius: 5px;
   /* Adds slight rounded corners */
   float: right;
 }

 #cl-button:hover {
   background-color: #2A0134;
   /* Darkens the background on hover for visual feedback */
 }

 /* for popup */
 @media screen and (max-width: 576px) {
   #overlay {
     align-items: start;
     padding-top: 75px;
   }

   #overlay .overpop {
     border-radius: 8px;
     background-color: #f8edff;
     background-image: none !important;
     position: relative;
   }

   #popup-form {  
     border-top-right-radius: 0px;
     border-bottom-right-radius: 0px;
     background-color: #f8edff;
   }

   #overlay .row {
     border-radius: 8px;
   }

   #overlay #cl-button {
     position: absolute;
     top: 12px;
     right: 12px;
   }
 }