*{
    margin: 0;
    padding: 0;
   box-sizing: border-box;
   }
   body{
    overflow-x: hidden;
   width: 100%;
   }
   
   .navbar-text{
   
       font: 20px spectral;
   
       padding-right: 90px;
   }
   .nav-link {
   
       color: black;
   }
   .nav-link:hover{
   color: green !important;
   }
   
   .try{
    display:inline-flex
   }
   
   .slider img{
   width: 100%;
   height: 100vh;
   display: flex;
   
   }
   
   .form{
   
       display: flex;
   
   }
   
   .left-side {
   
     padding: 50px;
   
       overflow: hidden;
   
       height: 550px;
   
     }
   
   .scrolling-images {
    width: 100%;
    height: 100%;
    display: flex;
    animation: scroll 20s linear infinite;
   }
   
   .scrolling-images img {
    width: 100%;
    height: 300px;
  
   
       height: 100vh;
      
       max-width: 800px; /* Adjust this width to your preference */
       height: auto;
       display: block; /* Ensure the image is displayed as a block element */
       margin: 0 auto;
   
     }
    @keyframes scroll {
   
       0% {
   
         transform: translateX(0%);
   
       }
   
       100% {
   
         transform: translateX(-100%);
   
       }
   
     }
     @media (max-width: 667px) {
      /* ... (other mobile styles) */
  
      .scrolling-images {
          width: 200%; /* Adjust the width to accommodate three images */
          animation: scroll 9s linear infinite; /* Each image displays for 3 seconds */
      }
  
      @keyframes scroll {
        0% {
   
          transform: translateX(0%);
    
        }
    
        100% {
    
          transform: translateX(-100%);
    
        }
      }
  }
  
   
   .right-side {
   
    width: 30%;
   
       height: 550px;
   
       padding: 40px;
   
       background-color: #b103af;
   
       display: flex;
   
       justify-content: center;
   
       align-items: center;
   
       color: white;
   
     }
   .consultation-form {
   
       width: 100%;
   
       margin-top: 20px;
   
       padding: 1px;
   
       height: 520px;
   
       background-color:#b103af;
   
       box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
   
     }
   .form-group {
    margin-bottom: 1px;
   
     }
   
   label {
   
    display: block;
   
       margin-bottom: 1px;
   
       font-weight: bold;
   
     }
   
    input[type="text"],
   
     textarea {
   
       width: 100%;
   
       padding: 10px;
   
       border: 1px solid #ccc;
   
       border-radius: 5px;
   
       font-size: 16px;
   
     }
   
     button{
   
       padding: 10px 20px;
   color: #fff;
   
       border: none;
   
       border-radius: 5px;
   
       font-size: 16px;
   
       cursor: pointer;
   
     }
   
     #submit{
   
       width: 100%;
   
       background-color:rgb(167, 186, 119) ;
   
       font: 25px spectral;
   
     }
   
     button:hover{
   
       color: green;
   
     }
   
     .OUR{
   
       display:flex;
   
       justify-content: space-evenly;
   
       padding: px;
   
     }
   
    .ourimg img{
   
       border-radius: 50%;
   
    }
   
    .ourD{
   
       background-color: aliceblue;
   
       border: 1px #ccc;
   
    }
   
    .ourimg h2{
   
        color: royalblue;
   
    }
   
   
    .ourimg p{
   
       color: #822b81;
   
    }
   
    .ourimg{
   
       font-family: Verdana, Geneva, Tahoma, sans-serif;
   
      
   
    }
   
    .abot{
   
     display: flex;
   
    
   
    margin-top: 20px;
   
    
   
   }
   
   .abotpara button{
   
     padding: 10px 20px;
   
     background-color:rgb(167, 186, 119) ;;
   
     color: #fff;
   
     border: none;
   
     border-radius: 30px;
   
     font-size: 25px;
   
     cursor: pointer;
   
     font-family: spectral;
   
    
   
   }
   
   .abotpara button:hover{
   
     color: rgb(78, 155, 78);
   
   }
   
   .abot{
   
     padding: 50px;
   
   }
   
   .abotpara{
   
    
   
     word-break: 5px;
   
     letter-spacing: 2px;
   
     padding: 20px;
   
   }
   
   .abotpara h3{
   
     color:#822b81;
   
     font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   
   }
   
   .testimonials {
     background-color: #f4f4f4;
     padding: 40px 0;
     text-align: center;
   }
   
   .testimonial-card {
     display: none;
     max-width: 500px;
     margin: 0 auto;
     padding: 20px;
     background-color: #fff;
     border-radius: 10px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
   }
   
   .testimonial-card.active {
     display: block;
   }
   
   .testimonial-text {
     font-size: 18px;
     margin-bottom: 20px;
   }
   
   .testimonial-name {
     font-weight: bold;
   }
   
   .testimonial-rating {
     margin-top: 10px;
   }
   
   .testimonial-rating i {
     color: gold;
   }
   
   .testimonial-navigation {
     margin-top: 20px;
   }
   
   .testimonial-navigation button {
     background-color: transparent;
     border: none;
     margin: 0 5px;
     width: 30px;
     height: 30px;
     color: #4ec696;
     border-radius: 50%;
     cursor: pointer;
     outline: none;
   }
   
   .testimonial-navigation button.active {
     background-color: #333;
   }
    
   
   .customer {
   
     margin-top: 10px;
   
   }
   
    
   
   .name {
   
     font-weight: bold;
   
   }
   
    
   
   .rating {
   
     display: flex;
   
   }
   
    
   
   .stars {
   
     color: gold;
   
   }
   .about h2{
     color: rgb(40, 136, 114);
     text-align: center;
     margin-top: 40px;
   }
   .text-justify{
     width: 800px;
     text-align: justify;
     font-size: 18px;
   }
   .text-justify1{
     width: 600px;
     text-align: justify;
     font-size: 18px;
   }
   #myBtn {
   
     width: 40px;
   
     height: 40px;
   
     display: none;
   
     position: fixed;
   
     bottom: 20px;
   
     right: 30px;
   
     z-index: 99;
   
     font-size: 40px;
   
     border: none;
   
     outline: none;
   
     background-color: rgb(92, 84, 84);
   
     color: white;
   
     cursor: pointer;
   
     padding: 5px;
   
     border-radius: 4px;
   
   }
   .abv{
     padding: 100px;
     margin: 50px;
     background-color: white;
   }
   .grid-container {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 50px;
   max-width: 1500px;
   padding: 20px;
   }
   
   .doctor-box {
   background-color: #ffffff;
   border: 1px solid #ccc;
   padding: 20px;
   text-align: center;
   }
   
   .doctor-name {
   margin: 0;
   font-size: 1.2rem;
   color:#822b81;
   }
   
   .doctor-designation {
   margin: 10px 0;
   font-size: 1rem;
   color:darkcyan;
   
   }
   .abv h2{
   text-align: center;
   color: rgb(40, 136, 114);
   }
   .last {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1px;
     padding: 20px;
     }
     .last img{
         width: 350px;
     }
     .last img:hover{
         background-color: #696766;
       border: 1px solid #777;
     }
     body {
             width: 100%;
             margin: auto;
         }
     .gallery5{
             width: 100%;
             display: flex;
             flex-flow: row wrap;
         }
   
         .box {
             flex-basis: 20%;
             width: 100%;
             padding: 10px;
             margin: 8px;
             box-shadow: 1px 1px 1px 1px green;
         }
   
         .text {
             text-align: center;
             margin-top: 5px;
         }
   
         .image:hover {
             border: 3px solid green;
         }
   
         /* media query used here */
         @media only screen and (max-width: 300px) {
             .box {
                 flex-basis: 100%;
             }
         }
   
         @media only screen and (max-width:500px) {
             .box {
                 flex-basis: 40%;
             }
         }
          /* Styles for popup */
       
       
       
      
       .whats-app {
       position: fixed;
       width: 60px;
       height: 60px;
       bottom: 100px;
       right: 15px;
       background-color: #25d366;
       color: #FFF;
       border-radius: 50px;
       text-align: center;
       font-size: 30px;
       box-shadow: 2px 2px 3px #999;
       z-index: 100;
   }
   .ambulance-logo {
         width: 150px;
         margin-top: 20px;
       }
       .ambulance {
       position: fixed;
       width: 60px;
       height: 60px;
       bottom: 165px;
       right: 15px;
       background-color: #25d366;
       color: #FFF;
       border-radius: 50px;
       text-align: center;
       font-size: 30px;
       box-shadow: 2px 2px 3px #999;
       z-index: 100;
   }
   .feedback-logo {
         width: 150px;
         margin-top: 20px;
       }
       .feedback {
       position: fixed;
       width: 120px;
       height: 60px;
       bottom: 200px;
       right: 15px;
       background-color: #25d366;
       color: #FFF;
       border-radius: 50px;
       text-align: center;
       font-size: 30px;
       box-shadow: 2px 2px 3px #999;
       z-index: 100;
       left:0;
       top: 600px;
   }
   .my-float-left{
     float: left;
   }
   
   .my-float {
       margin-top: 16px;
   }
   /* Your existing styles */
   
   .whats-app:hover i {
     color: #00cc66; /* Light green color on hover */
   }
   .whats-app{
     float: left;
   }
   
   .ambulance:hover i {
     color: #00cc66; /* Light green color on hover */
   }
   
   .hover-info {
     position: absolute;
     left: -80px; /* Adjust as needed */
     top: 50%;
     transform: translateY(-50%);
     background-color:aliceblue;
     border: 1px solid #ddd;
     border-radius: 10px;
     padding: 1px;
     display: none;
     width: 80px; /* Adjust as needed */
     color: #388a66;
     
   }
   .hover-info p{
     padding: -10px;
     font-size: 10px;
   }
   
   .whats-app:hover .hover-info,
   .ambulance:hover .hover-info {
     display: block;
   }
   
    /* Your existing styles */
   
    .bottom-boxes {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 20px; /* Adjust the gap between the boxes */
      z-index: 999; /* Ensure the buttons are on top of other elements */
    }
    
    /* Add a media query for small screens */
    @media (max-width: 375px) {
      .bottom-boxes {
        display: block; /* Change to block for small screens */
        text-align: center; /* Center-align the buttons */
      }
    }
    



   .bottom-boxes {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
  z-index: 999;
}

/* Add a media query for small screens */
@media (max-width: 375px) {
  .bottom-boxes {
    flex-direction: row; /* Change back to horizontal layout for small screens */
    justify-content: center; /* Center-align the buttons horizontally */
    align-items: center; /* Center-align the buttons vertically */
    gap: 10px; /* Adjust the gap between the buttons */
    
  }
  .book-doctor,
.book-appointment {
  width: 500px;
}
}

.book-doctor,
.book-appointment {
  display: block;
  width: auto;
  width: 200px;
  height: 50px; /* Maintain the original height */
  line-height: 50px; /* Center-align text vertically */
  padding: 0 20px; /* Add horizontal padding to the buttons */
  background-color: #3498db;
  color: #fff;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  transition: background-color 0.3s, transform 0.3s;
  box-sizing: border-box;
}

.book-doctor
.book-appointment {
  flex: 1;
  max-width: 100%;
}

.book-doctor:hover,
.book-appointment:hover {
  background-color: #2c3e50;
  transform: scale(1.05);
}

    
 @media (300px <= width <= 600px){
  .book-doctor {
    width: 150px;
    font-size: 15px;
    padding: 2px;
  }
  .book-appointment{
    width: 150px;
    font-size: 15px;
    padding: 2px;
  }
 }   
    



   div.vertical
   {
   margin-left: -85px;
   position: absolute;
   width: 215px;
   transform: rotate(-90deg);
   -webkit-transform: rotate(-90deg); /* Safari/Chrome */
   -moz-transform: rotate(-90deg); /* Firefox */
   -o-transform: rotate(-90deg); /* Opera */
   -ms-transform: rotate(-90deg); /* IE 9 */
   }
   
   
           
   /* Styles for the feedback section */
   .feedback-section {
    display: none;
    position: fixed;
    right: 20px;
    bottom: 60px;
    width: 320px;
    background-color: #8dd8c4;
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.feedback-section h2 {
    font-size: 24px;
    color: #333;
    margin-bottom: 10px;
}

.feedback-textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    resize: none;
    font-size: 16px;
}

.feedback-buttons {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.feedback-buttons button {
    background-color: #007BFF;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin-left: 10px;
    transition: background-color 0.3s;
}

.feedback-buttons button:first-child {
    margin-left: 0;
}

.feedback-buttons button:hover {
    background-color: #0056b3;
}

/* Feedback Button Styles */
.feedback-btn {
    position: absolute;
    position: fixed;
    width: 45px;
    height: 100px;
    background: #00cc66;
    top: 32%;
    right: 0;
    border-left: 2px solid #fff;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
    box-shadow: 1px 1px 3px #000;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    cursor: pointer;
    transition: 0.2s ease-out;
}

@media (300px <= width <= 600px){
  .feedback-btn{
    width: 38px;
  }
}

.feedback-btn:hover {
    width: 50px;
}

.feedback-txt {
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    position: absolute;
    right: -10px;
    top: 30px;
    color: #fff;
    transition: 0.2s ease-out;
}

.feedback-btn:hover .feedback-txt {
    right: -px;
}   
   .footer {
     background-color: rgb(40, 136, 114);;
     color: #fff;
     padding: 60px 0;
    
   }
   
   .footer h4 {
     font-size: 20px;
   }
   
   .footer p {
     text-align: justify;
     font-size: 18px;
   }
   
   .footer .contact-info {
     margin-top: 20px;
   }
   
   .footer .follow-us {
     margin-top: 20px;
   }
   
   .footer .follow-us a {
     font-size: 35px;
     margin-right: 20px;
     color: #fff;
   }
   .follow-us a:hover{
    color: #d49831;
   }
   
   .footer .map {
     margin-top: 20px;
   }
   
   .map iframe {
     width: 100%;
     height: 200px;
     border: none;
   }
   
   .footer .copyright-text {
     text-align: center;
     font-size: 14px;
     margin-top: 20px;
   }
   
   /* Style for the orange span */
   .orange-text {
     color: orange;
   }