body, html {
  height: 100%;
  overflow-y: scroll;
  font-family: Arial, Helvetica, sans-serif;
}

.button {
  background-color: #285fae; 
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
h1 {
  font-size: 40px;
}
.button1{
    background-color: #d21818;
}


nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

nav ul li {
    float: right;
}
.container{
    overflow-y: scroll;
}
nav ul li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}


nav ul li a:hover {
    background-color: #111;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content li {
    float: none;
}

.dropdown-content li a {
    padding: 12px 16px;
    color: black;
    text-decoration: none;
    display: block;
    text-align: left;
}
.hero-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("./asserts/care1.jpg");
  height: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}




.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.dropdown-content li a:hover {
    background-color: #ddd;
}

main {
    padding: 20px;
    text-align: center;
}

.context{
     padding : 100px;
}

/*footer {*/
/*    background-color: #d21818;*/
/*    color: white;*/
/*    text-align: center;*/
/*    padding: 10px 0;*/
    
/*    width: 100%;*/
/*    bottom: 0;*/
/*}*/


  footer {
    background-color: #34495e;
    color: #fff;
    text-align: center;
    padding: 20px 0;
  }
  .footer1 {
    background-color: #d21818;
    color: #fff;
    text-align: center;
    padding: 10px 0;
  }
  .footer-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
  }
  .footer-logo img {
    max-width: 200px;
  }
  .footer-links ul, .footer-locations ul {
    list-style: none;
    padding: 0;
  }
  .footer-links li, .footer-locations li {
    display: block;
    margin: 5px 0;
  }
  .footer-links a {
    color: #fff;
    text-decoration: none;
    font-size :20px;
    
  }
  .footer-social img {
    width: 200px;
    height : auto;
    
   
    margin: 0 10px;
  }
  .footer-locations a {
    margin-bottom: 10px;
    font-size :20px;
  }
  .popup-container{
       color: #000000;
  }
  .popup-container img{
       width :150 px;
  }



    /*.gallery {*/
    /*        display: flex;*/
    /*        justify-content: center;*/
    /*        gap: 20px;*/
    /*        flex-wrap: wrap;*/
    /*    }*/
    /*    .image-container {*/
    /*        text-align: center;*/
    /*    }*/
        /*.img {*/
        /*    width: 300px;*/
        /*    height: 300px;*/
        /*    object-fit: cover;*/
        /*    border-radius: 10px;*/
        /*}*/
    /*    @media (max-width: 600px) {*/
    /*        .gallery {*/
    /*            justify-content: center;*/
    /*        }*/
    /*        .image-container1 {*/
                /* Makes sure two images fit per row */
    /*        }*/
    /*    }*/
        
        
        .checked {
  color: orange;
}
      .container { 
            width: 100%; 
            max-width: 1500px; 
            margin: auto; 
            padding: 20px; 
            background: linear-gradient(135deg, #ff4b2b, #ff416c); 
            border-radius: 10px; 
            box-shadow: 0 4px 10px rgba(0,0,0,0.3); 
            color: white;
            position: relative;
      }
        .slideshow-container { position: relative;  }
        .slide { display: none; padding: 20px;margin-left: 50px;margin-right: 50px; }
        .active { display: block; }
        .dots { text-align: center; margin-top: 10px; }
        .dot { height: 10px; width: 10px; margin: 0 5px; background-color: #bbb; border-radius: 50%; display: inline-block; cursor: pointer; }
        .active-dot { background-color: #717171; }
             .arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0);
    border: none;
    padding: 15px;
    cursor: pointer;
    font-size: 15px;
    border-radius: 50%;
    z-index: 10; /* Ensures it appears above other elements */
    color: black; /* Makes the arrow visible */
}

.arrow-left { 
    left: -3px; /* Move it further left if it's not visible */
}

.arrow-right { 
    right: 2px; /* Adjust as needed */
}

/* Hover effect for better UI */
.arrow:hover {
    background-color: none;
    color: red;
}


      .popup-container {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
        }
        .popup {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0px 0px 10px #000;
            text-align: center;
            position: relative;
        }
        .close-btn {
            position: absolute;
            top: 10px;
            right: 15px;
            cursor: pointer;
            font-size: 20px;
            color: red;
        }
   
   
#image-container1{
    
              height: auto;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }
 .image-container1  {
     width: 300px;
            height: auto;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            transition: transform 0.5s ease-in-out;
        }
         /*@media (max-width: 768px) {*/
           /*img {*/
           /*     width: 90%;*/
           /*     height:auto;*/
           /*     transform: scale(1.1) rotate(0deg);*/
           /* }}*/
     
     
    .scroll-container {
    display: flex;
    overflow-x: scroll;
    white-space: nowrap;
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
}
.scroll-container::-webkit-scrollbar {
    display: none; /* For Chrome, Safari, and Opera */
}

        .image-wrapper {
            display: inline-block;
            margin: 0 10px;
        }
        .image-wrapper img {
            width: 600px;
            height: auto;
            border-radius: 10px;
            object-fit: cover;
        }
        
        
            .gallery-container {
      overflow-x: auto;
      white-space: nowrap;
      padding: 20px;
      scroll-behavior: smooth;
    }

    .gallery-container::-webkit-scrollbar {
      height: 8px;
    }

    .gallery-container::-webkit-scrollbar-thumb {
      background: #888;
      border-radius: 4px;
    }

    .gallery-container img {
      width: 800px;
      height: 300px;
      object-fit: cover;
      margin-right: 15px;
      border-radius: 10px;
      display: inline-block;
      transition: transform 0.3s ease;
    }

    .gallery-container img:hover {
      /*transform: scale(1.5);*/
    }
    
     @media (max-width: 768px) {
      .gallery-container img {
        width: 400px;
        height: auto;
        padding: 0px;
      }
    }

    @media (max-width: 480px) {
      .gallery-container img {
         width: 400px;
        height: auto;
         padding: 0px;
      }
    }
    
    
        .map {
      width: 100%;  /* Full width */
      height: 400px; /* Full height of the container */
    }

    /* Add a container for the map to control its aspect ratio */
    .map-container {
      position: relative;
      width: 100%;
      
      height: 500px;
      overflow: hidden;
    }