.sticky-icons {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 5;
}

.sticky-icons a {
    text-decoration: none;
    color: white;
    background:linear-gradient(90deg, #00a0e2, #6bb536);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.sticky-icons a:hover {
    background: linear-gradient(90deg, #00a0e2, #00a0e2);
    color:white;
}

.sticky-icons i {
    font-size: 14px;
}
















       





.sticky-icons2 {
 position: fixed;
 bottom:-15px !important; /* Adjust as needed */
 right: 20px; /* Adjust as needed */
 transform: translateY(-50%);
 z-index: 999; /* Ensure icons appear above other content */

}

.sticky-icons2  span {
opacity: 0; /* Initially set opacity to 0 */
position: absolute;
/* Place the span below the icon */
left: 30%;
transform: translateX(-30%) translateY(0px); /* Initially translate up */
background-color: white;
color: black;
padding: 3px 10px;
margin-top:5px;
margin-right:30px;


transition: opacity 0.3s ease, transform 0.3s ease;
z-index:1000, /* Smooth transitions for opacity and transform */
}

.sticky-icons2 :hover span {
opacity: 1; /* Change opacity to 1 on hover */
transform: translateX(-122%) translateY(0); /* Move the span to its default position */
}


    

    
    /* Hover effect */
   
     






    .chat-header {
     display: flex;
     justify-content: flex-start; /* Align items at the start */
     align-items: center;
     padding: 10px;
     border-bottom: 1px solid #ccc;
    
   }
   
   .chatlogo {
     width: 35px; /* Adjust the size of the logo */
     height: 35px;
     background-color: white;
     border-radius:50%; /* Adjust the size of the logo */
      /* Add some space between the logo and text */
   }




   .chat-container {
     display: none;
     position: fixed;
     bottom: 10px;
     right: 10px;
     
     border-radius: 10px;
     box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
     overflow: hidden;
     z-index:3000;
     
   }

   .chat-box {
     background-color: #fff;
     border-radius: 10px;
     overflow: hidden;
     width: 300px;
     max-width: 100%;
     height: 400px;
     display: flex;
     flex-direction: column;
   }

   @media(min-width:768px){
     .chat-box {
         background-color: #fff;
         border-radius: 10px;
         overflow: hidden;
         width: 400px;
         max-width: 100%;
         height: 450px;
         display: flex;
         flex-direction: column;
       }
   
   }
   .chat-header {
     background: linear-gradient(90deg, #00a0e2, #6bb536);
     color: #fff;
     padding: 10px 5px 10px 5px;
     font-size: 18px;
     display: flex;
     justify-content: space-between;
     align-items: center;
   }

   .chatclose-icon {
     cursor: pointer;
     font-size: 20px;
   }

   .chat-log {
     flex-grow: 1;
     padding: 5px;
     overflow-y: auto;
   }

   .message {
     padding: 8px 12px;
     margin: 5px;
     border-radius: 5px;
   }

   .received {
     background-color: #f0f0f0;
     text-align: left;
   }

   .sent {
     background-color: #dcf8c6;
     text-align: right;
   }


   .chatbutton {
     width: 70px;
     padding: 10px;
     background-color: black;
     color: white;
     border: none;
     cursor: pointer;
     border-bottom-right-radius: 10px;
   }

   .chatbutton:hover {
     background-color: black;
   }
   input[type="text"]:focus {
     outline: none;
   }

   .message1 {
     padding: 8px 12px;
     margin: 5px;
     border-radius: 5px;
   }

   .received1 {
     background-color: #343434;
     text-align: left;
     color:white;
     border-width:0px;
   }
   .option-response{
     background-color: #f0f0f0;
     text-align: left;
     padding: 8px 12px;
     margin: 5px;
     border-radius: 5px;
     margin-left:15px;
   }
   .links{
     text-decoration: none;
     color: black;
     
    
   }
   
   @media screen and (max-width: 768px) {
     .links {
         display: block; /* Display links as block elements on small devices */
          /* Remove right margin on small devices */
         margin-bottom: 5px; /* Increase vertical spacing between links on small devices */
     }
 }  


   select {
     border: none; /* Remove default border */
     border-bottom: solid 2px white; /* Add a bottom border */
     color: white; /* Set text color to white */
     background-color: transparent; /* Make background transparent */
     padding: 5px; /* Add padding */
     font-size: 16px; /* Adjust font size as needed */
     width: 100%; /* Set width to 100% */
   }
   
   /* Style for the placeholder text */
   select option[disabled]:first-child {
     color: black;
     background-color: white; /* Set placeholder text color to white */
   }
   
   /* Style for the selected option */
   select option {
     color: white; /* Set selected option text color to black */
     background-color: black; /* Set background color of selected option to white */
   }

   select[name="services"] option {
     max-width: 300px !important; /* Adjust this value as needed */
     overflow: hidden;
     text-overflow: ellipsis;
   }


   .custom-select {
     width: 100%;
     position: relative;
     display: inline-block;
   }
 
   .custom-select select {
     display: inline-block;
     width: 100%;
     padding: 10px;
     border: 1px solid #ccc;
     border-radius: 4px;
     box-sizing: border-box;
   }
 
   .custom-select select:focus {
     outline: none;
   }
 
   .custom-select .select-selected {
     background-color: #007bff;
     color: white;
     padding: 12px 20px;
     border-radius: 4px;
   }
 
   .custom-select .select-selected:after {
     position: absolute;
     content: "";
     top: 14px;
     right: 10px;
     width: 0;
     height: 0;
     border: 6px solid transparent;
     border-color: white transparent transparent transparent;
   }
 
   .custom-select select option {
     max-width: 300px; /* Adjust this value as needed */
     overflow: hidden;
     text-overflow: ellipsis;
   }

   .popup-container {
     position: fixed;
     top: 55%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 9999;
     width:90%;
     padding: 30px;
     
     
   }
 
   .popup {
     position: absolute;
     top: 50%;
     left: 50%;
     z-index:99999999;
     transform: translate(-50%, -50%);
      background-color: rgb(0, 0, 0, 0.9);
 background-position: center;
 
     border-radius: 20px;
     padding: 20px;
     
     box-shadow: 0 0 10px rgba(255, 255, 255, 0.3), 
             0 0 20px rgba(255, 255, 255, 0.2), 
             0 0 30px rgba(255, 255, 255, 0.1);
 display: none;

  
     width:100%;
     border:solid 1px white;
   }
 
   @media(min-width:991px){
     .popup{
       width:70%
      
     }
   }
   @media(min-width:768px){
     
     .close-icon {
       position: absolute;
       top: 10px;
       right: 10px;
       font-size: 40px;
       cursor: pointer;
       color:white;
      
     }
   }
   .popup.popupactive {
     display: block;
   }
 
   .input-field {
     margin-bottom: 10px;
     width: 100% !important;
     padding: 8px;
     border: 1px solid #ccc;
     border-radius: 20px !important;
     box-sizing: border-box;
     
   }
 
   .close-icon {
     position: absolute;
     top: -5px;
     right: 15px;
     font-size: 30px;
     cursor: pointer;
     color:white;
    
   }
 
   .submit-btn {
     background-color: black;
     color: white;
     border: none;
     padding: 10px 20px;
     border-radius: 20px;
     cursor: pointer;
    width:100%;
     box-shadow: rgba(255, 255, 255, 0.35) 0px 5px 15px;
   }
 
   .submit-btn:hover {
     background-color: black;
   }
   

   @media(max-width:767px){
     .poptop{
       margin-top:20px;
     }

     .popbottom{
       margin-bottom:20px;

     }

    
   }


   .welcomepopup {
     position: fixed;
     bottom: 60px;
     right: -300px; /* Start off-screen */
     width: 250px;
     padding: 10px;
     background-color: black;
     color: white;
     border-radius: 5px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     transition: right 0.5s ease-in-out;
     display: none;
     z-index:2000; /* Initially hidden */
 }

 .welcomepopup::after {
   content: '';
   position: absolute;
   bottom: -15px;
   right: 20px;
   width: 0;
   height: 0;
   border-width: 10px;
   border-style: solid;
   border-color: black transparent transparent transparent;
}

 .welcomepopup p{
     margin:0;
     color:white;
 }

 .welcomepopup img {
     position: absolute;
     top: 5px;
     right: 10px;
     height:6px;
     width:6px;
     cursor: pointer;
     background-color: black;
 }

 .welcomepopup.welcomeshow {
     display: block; /* Show the popup */
 }

 .welcomepopup.welcomeslide-in {
     right: 20px; /* Slide into view */
 }

 .welcomepopup.welcomeslide-out {
     right: -300px; /* Slide out of view */
 }