body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

h2,
h3,
h5 {
  color: #005a87; /* A calming blue */
}
a,
nav ul li a {
  color: #007bff;
}

nav ul li a:focus {
  background-color: #f8f9fa;
  outline: none;
}

a:hover,
nav ul li a:hover {
  color: #0056b3;
}

header {
  background-image: url("images/header-background.jpg"); /* Add your background image here */
  background-size: cover;
  background-position: center;
  color: #4d99e1;
  text-align: right;
  padding: 20px 50px; /* Adjust padding as needed */
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  max-width: 250px; /* Adjust logo size as needed */
  height: auto;
}

nav ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  margin: 0;
}

nav ul li {
  margin: 0 10px;
  font-size: 18px;
}

nav ul li a {
  color: #0941f7;
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 5px;
  transition: background-color 0.3s ease-in-out;
}

nav ul li a:hover {
  background-color: #ffffff;
  color: #007bff;
}

footer {
  background-image: url("/images/cimaxfooter.jpg"); /* Path to your background image */
  background-size: 100%; /* Ensures the background covers the footer area */
  background-repeat: no-repeat;
  background-position: center; /* Centers the background image */
  color: #ffffff; /* Adjust text color as needed for visibility */
  text-align: center;
  padding: 10px;
  padding-bottom: 20px;
}

.image-slider {
  width: 100%;
  overflow: hidden;
}

.slide {
  display: none;
  width: 100%;
  transition: transform 0.5s ease;
}

.slide.active {
  display: block;
}

.slide img {
  width: 100%;
  height: auto;
}

.content-container {
  display: flex;
  justify-content: space-between;
  margin: 20px;
  font-weight: 700;
}

.left-content {
  position: relative;
  width: 60%; /* Adjust based on your design needs */
}
.right-content {
  width: 39%; /* Adjusts to give some space between the two divisions */
  padding-left: 100px;
}

.left-image {
  width: 50%; /* Adjust based on your design needs */
  float: left;
  margin-right: 20px; /* Adds space between the image and the text */
  bottom: 0;
}

.text-content {
  width: 100%;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}

.right-content img {
  width: 70%;
  height: auto;
  margin-top: 20px; /* Adds some space between text and image or between two images */
}

h2 {
  color: #4d99e1;
  padding-left: 20px;
}
h3 {
  color: #4d99e1;
}
h5 {
  color: black;
  padding-left: 20px;
}
.content-container1 {
  display: flex;
  justify-content: space-between;
  margin: 20px;
}

.text-content1 {
  flex: 2; /* Takes up half of the container's space */
  margin-right: 20px; /* Adds some space between the text and images */
}

.image-content1 {
  flex: 1; /* Takes up the other half of the container's space */
  display: flex;
  flex-direction: column;
  justify-content: space-around; /* Distributes space around images */
}

.image-content1 img {
  width: 80%; /* Makes images responsive */
  margin-bottom: 20px; /* Adds space between the images */
  padding-left: 80px;
}
.tables-section {
  margin: 20px;
  text-align: center; /* Centers the section title */
}

.tables-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; /* Ensures responsiveness */
  gap: 20px; /* Adds space between tables */
}

table {
  width: 30%; /* Adjusts the width of each table */
  border-collapse: collapse; /* Optional: for styling */
  margin: 0 auto; /* Centers tables in their flex container */
}

table,
th,
td {
  border: 1px solid #ccc; /* Optional: for styling */
}

th,
td {
  padding: 8px; /* Optional: for styling */
  text-align: left; /* Adjusts text alignment in cells */
}

caption {
  margin-bottom: 10px;
  font-weight: bold;
}

.tables-container h4 {
  color: black; /* Adjust text color for readability, if needed */
  padding: 5px; /* Add padding for better spacing */
  margin-top: 0; /* Adjust as needed */
  margin-bottom: 10px; /* Adds space between the title and the tables */
}
.tables-section h2 {
  background-color: rgb(
    87,
    145,
    221
  ); /* Specify the shade of blue you prefer */
  color: white; /* Adjust text color for readability, if needed */
  padding: 10px; /* Add padding for better spacing */
  margin-top: 0; /* Adjust as needed */
  margin-bottom: 20px; /* Adds space between the title and the tables */
}
table,
th,
td {
  border: 1px solid skyblue; /* Sets the border color to sky blue */
}

table {
  border-collapse: collapse; /* Ensures borders are collapsed into a single border */
}

th,
td {
  padding: 8px; /* Adjusts padding inside cells for spacing */
  text-align: left; /* Aligns text to the left; adjust as needed */
}

.services-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 20px;
}

.service {
  display: flex;
  flex-direction: column; /* Stacks title and image vertically */
  align-items: center; /* Centers items horizontally */
  flex-basis: 18%;
  text-align: center;
}

.service h3 {
  color: black;
  height: 60px; /* Example fixed height, adjust as needed */
  overflow: hidden; /* Prevents overflow if the title is too long */
}

.service img {
  width: 100%; /* Adjust as needed */
  height: auto;
}

.additional-services {
  margin: 20px;
}

.row {
  display: flex;
  justify-content: space-around; /* Evenly spaces the services */
  margin-bottom: 20px; /* Adds space between the rows */
}

.service {
  width: 30%; /* Adjust based on your layout needs */
  text-align: center;
}

.service h3 {
  margin-bottom: 10px;
}

.service img {
  width: 100%;
  height: auto;
}
.contact-container {
  display: flex;
  justify-content: space-between;
  margin: 20px;
}

.contact-info {
  width: 50%;
}

.map-container {
  flex: 1; /* Each takes up half the container's space */
  margin: 0 10px; /* Adds some space between the two sections */
}
.video-container {
  padding-top: 180px;
}

form {
  display: flex;
  flex-direction: column;
}

form label,
form input,
form textarea,
form button {
  margin: 10px 0; /* Adds space around form elements */
  width: 50%;
}

iframe {
  width: 100%; /* Ensures the map takes up the full width of its container */
  height: 450px; /* Adjust height as needed */
}

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }

  .header-content,
  .content-container,
  .contact-container,
  .services-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  nav ul {
    flex-direction: column;
    align-items: center;
  }

  .left-content,
  .right-content,
  .service,
  .contact-info,
  .map-container {
    width: 100%;
  }

  .image-content1 img,
  .service img {
    width: 90%;
    margin: 0 auto;
  }
}
@media (max-width: 768px) {
  .content-container {
    flex-direction: column;
  }

  .left-content,
  .right-content {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .service {
    flex-basis: 45%; /* Shows two items per row on smaller screens */
    margin-bottom: 20px; /* Adds space between rows */
  }
}

@media (max-width: 480px) {
  .service {
    flex-basis: 100%; /* Stacks items vertically on very small screens */
  }
}
@media (max-width: 768px) {
  .service h3 {
    height: auto; /* Allows the title to take up as much space as needed on smaller screens */
  }
}
@media (max-width: 768px) {
  .tables-container {
    flex-direction: column;
  }

  table {
    width: 100%; /* Allows tables to expand to full width */
  }
}
.image-table {
  width: 100%;
  border-collapse: collapse;
}

.image-table td {
  padding: 5px;
}

.image-table img {
  width: 100%;
  height: auto;
}

@media (max-width: 600px) {
  .image-table,
  .image-table td {
    display: block;
  }

  .image-table td {
    width: 100%;
  }
}
.right-content {
  padding-top: 40px; /* Adjust the padding as needed */
}
.right-content iframe {
  width: 100%; /* Makes the iframe responsive */
  height: 300px; /* Adjust height as needed */
  max-width: 400px; /* Adjust maximum width as needed */
}
.square {
  width: 200px; /* As the height of the original iframe */
  height: 200px; /* Making the division square */
  border: 2px solid skyblue; /* Skyblue border */
}

.exrays-text {
  margin-top: -59px;
}
.mission-section {
  display: flex; /* Using flexbox to align text and image side by side */
  align-items: flex-start;
  justify-content: center; /* Center the content horizontally */
  text-align: center; /* Text alignment */ /* Bottom margin */
}
.mission-text,
.content-image {
  max-width: 50%; /* Limit image width */
  margin-left: 20px; /* Space to the left of the image */
}
ul {
  text-align: left; /* Align list to the left */
}

img:hover {
  cursor: pointer; /* Changes cursor on hover */
}
.description {
  display: none;
  color: #333; /* Font color */
  background: #f4f4f4; /* Background color */
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #ddd; /* Border color */
}
.popup {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  padding: 20px;
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 80%;
  max-width: 600px;
}
.popup-background {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 5;
}

/* Close button style */
.close-btn {
  float: right;
  font-size: 1.2em;
  padding: 0 0.5em;
  cursor: pointer;
}

.questions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 3rem;
}

.values-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.values-list li {
  font-size: 1.5rem;
}
.big {
  background: linear-gradient(90deg, turquoise, lightblue, rgb(92, 92, 234));
  padding-top: 40px;
  padding-bottom: 100px;
}

.textandpicture {
  display: flex;
  justify-content: space-between;
  align-items: center; /* Aligns items vertically */
  gap: 20px; /* Optional: Adds space between the two divs */
}

.texto {
  flex: 1; /* Takes available space */
  font-size: 20px;
  padding-left: 30px;
}

.foto {
  flex: 1; /* Takes available space */
  display: flex;
  justify-content: center; /* Centers the image horizontally */
}

.foto img {
  max-width: 100%; /* Ensures the image doesn't overflow */
  height: auto;
}
.nosotros {
  text-align: center;
  font-size: 30px;
}
.Info {
  font-size: 20px;
  padding-left: 30px;
  padding-right: 30px;
}
.info2 {
  font-size: 20px;
  padding-left: 30px;
  padding-right: 30px;
  margin-top: -50px;
}
.texto p {
  margin-bottom: 80px; /* Adjust the value to increase/decrease spacing */
}
.info3 {
  font-size: 30px;
  color: black;
  padding-left: 30px;
}
.info4 {
  font-size: 20px;
  padding-left: 30px;
  padding-right: 30px;
}
.Info {
  margin-bottom: -50px;
}
.titulo {
  padding-left: 30px;
  padding-top: 30px;
  padding-bottom: 20px;
}