color {
  color: #021844;
  color: #1d257a;
  color: #abcde8;
}

.blue {
  color: #1d257a;
}

.service {
  padding-top: 40px;
  background-color: white;
  /* padding-bottom: 40px; */
  color: black;
}

.service-title {
  display: flex;
  justify-content: center;
  width: 100%;
  text-align: center;
  /* padding-bottom: 30px; */
  background-color: #021844;
  color: white;
  margin-bottom: 40px;
  margin-top: -40px;
}
.service-title h1 {
  margin: 40px;
  color: #ffffff;
  font-size: 40px;
  width: 100%;
  text-align: center;
  /* font-family: serif; */
}

.service-container {
  display: inline;
  /* gap: 30px; */
  padding-bottom: 30px;
}
.service-containers {
  display: flex;
  gap: 10px;
  padding-bottom: 30px;
}

.servicegalleryinfo {
  display: flex;
  color: black;
  gap: 40px;
  width: 100%;
}
.servicegalleryinfos {
  display: flex;
  color: black;
  gap: 40px;
  width: 100%;
}

.galleryinfo {
  width: 65%;
  color: black;
}

.service-gallery {
  width: 33%;
  height: 450px;
}
.service-gallerys {
  width: 33%;
  /* height: 350px; */
  justify-content: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 1px solid black;
  padding-top: 40px;
}

.service-gallery img {
  width: 100%;
  height: 300px;
  /* border: 6px solid orange; */
}

.service-gallerys img {
  width: 300px;
  height: 300px;
}

.service-desc {
  width: 100%;
  text-align: center;
  padding: 15px 20px;
  background-color: rgba(121, 120, 133, 0.496);
  font-size: larger;
  font-weight: bold;
}

.service-desc p {
  color: white;
}
.service-desc h3 {
  font-weight: 600;
  font-size: 18px;
}

.service-banner {
  margin-top: 0px;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../assets/short-banner.jpg");
  height: 70%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  width: 100%;
  height: 200px;
}

.service-banner h1 {
  font-size: 50px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.service-quote {
  background-color: #1d257a;
  padding: 50px;
  margin-bottom: 20px;
  width: 100%;
  text-align: center;
}

@media (max-width: 900px) {
  .service-container {
    display: inline;
    gap: 30px;
  }
  .service-containers {
    display: inline;
    gap: 30px;
  }
  .service-gallery {
    width: 100%;
    padding-bottom: 20px;
  }
  .service-gallerys {
    width: 100%;
    padding-bottom: 20px;
  }
  .servicegalleryinfo {
    display: inline;
  }
  .servicegalleryinfos {
    flex-direction: column-reverse;
  }
  .galleryinfo {
    width: 100%;
    text-align: justify;
    padding-bottom: 80px;
  }
  .service-gallery {
    /* width: 35%; */
    height: 350px;
  }
  .service-gallerys {
    /* width: 35%; */
    height: 500px;
  }
  .modal {
    margin-top: 100px;
  }

  .modalimage {
    width: 180px;
    height: 180px;
  }
  .service-title {
    display: flex;
    justify-content: center;
    width: 100%;
    text-align: center;
    /* padding-bottom: 30px; */
  }
}

/* pop */

/* Styles for the modal */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  /* margin-top: 100px; */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0, 0, 0, 0.4); /* Black with opacity */
}

.readmorebtn {
  background-color: #021844; /* Blue background */
  color: white; /* White text */
  padding: 10px 20px; /* Padding for better appearance */
  border: none; /* Remove border */
  border-radius: 5px; /* Add border radius */
  cursor: pointer; /* Show pointer cursor on hover */
}

/* Style for the "Read More" button when hovered */
.readmorebtn:hover {
  background-color: black; /* Darker blue background on hover */
  box-shadow: 0 0 10px rgba(5, 5, 5, 0.972);
}

.service-view {
  background-color: #f5f5f5;
}