/* ============================
MAIN OPTIONS
============================ */
.headerImage {
  position: relative;
  width: 100%;
}

.headerImage img {
  width: 100%;
  display: block;
}

.contentSection {
  width: calc(100vw - 14.48vw);

  margin: 5.31vw auto 3.28vw auto;
  display: flex;
  justify-content: space-between;
}

.textContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;

  gap: 1.27vw;

  height: 25.31vw;
  width: 22.03vw;

  padding-left: 1.15vw;
}

.titleSubtitle {
  display: flex;
  flex-direction: column;
  gap: 0.6vw;
}

.titleSubtitle h2 {
  font-weight: 300;
  color: #000000;
  font-size: 2.2vw;
  text-align: left;
}

.titleSubtitle h2 b {
  font-weight: 500;
}

.textContainer h4 {
  font-weight: 300;
  color: black;
  font-size: .95vw;
  text-align: left;

}

.textContainer li {
  font-size: 0.8vw;

}

.textContainer p,
.text p {
  font-weight: 300;
  color: #393939;
  line-height: 1.2vw;
  text-align: justify;
}

.textContainer li {
  font-weight: 300;
  color: #393939;
  line-height: 1.2vw;
  width: fit-content;
}

.textoAmanda{
  font-size: 0.9vw;
}

.textoAmanda b{
  font-weight: 500;
}
.imageContainer {
  display: flex;
  gap: 0.36vw;

  height: 25.31vw;
  width: 57.81vw;
}

.imageContainer img {
  object-fit: contain;
}

/* ============================
Google Maps Options
============================ */
.googleMaps {
  display: flex;
  height: 16.98vw;
  width: 80.9375vw;
  padding: 0 5.63vw;
  margin: 0 auto;

  justify-content: center;
  align-items: center;
  gap: 2.19vw;

  background-color: rgb(247, 246, 246);
  border-radius: 3.54vw;
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
}

.googleMaps .map {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 13.75vw;
  width: 27.6vw;
}

.googleMaps .map iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.googleMaps .text {
  height: 13.75vw;
  width: 39.74vw;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: space-between;
}

/* ============================
Description
============================ */
.text {
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding-bottom: 0.2vw;
}

.text p {
  font-size: 1vw;
  text-align: center !important;
  line-height: 1.45vw !important;
  font-weight: 200;
}

.text p span{
  font-size: 0.8vw;
}

.text h2 {
  font-weight: 300;
  color: #393939;
  font-size: 1.63vw;
  text-align: left;
}

.buttonEnalces {
  width: 100%;

  display: flex;
  justify-content: center;
  gap: 1.09vw;
}

.enlaceDescription {
  background-color: #fff;
  border-radius: 1.5vw;
  box-shadow: 0px 3px 6px #00000029;

  font-size: 0.8vw;
  padding: 0.6vw 2vw;

  transition: background-color 0.2s ease;
}

.enlaceDescription:hover {
  background-color: rgb(240, 240, 240);
  cursor: pointer;
}

/* ============================
NEWS
============================ */
.newsLondon {
  width: calc(100vw - 14.48vw);
  margin: 5.9375vw auto 5.9375vw auto;

  display: flex;
  flex-direction: column;
  gap: 1.41vw;
}

.newsLondon h2 {
  font-weight: 300;
  color: #393939;
  font-size: 1.82vw;
  text-align: left;

}

.newsFatherContainer {
  display: flex;
  justify-content: space-between;

  gap: 1.41vw;
}

.newsContainer {
  display: flex;
  flex-direction: column;

  width: 27.71vw;

  align-items: flex-start;

  gap: 0.52vw;

  text-align: left;
  overflow: hidden;
}

.newsContainer .newsPic {
  width: 100%;
  transition: transform 0.3s ease;
}

.newsContainer h3 {
  font-size: 1.2vw;
  color: #393939;
  font-weight: 100;

  line-height: 1.72vw;
}

.newsContainer b {
  font-weight: 400;
}

.newsContainer p {
  font-size: 0.8vw;
  color: #393939;
  font-weight: 400;

  line-height: 1.2vw;
}

/* ============================
Modal Video Options
============================ */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes scaleIn {
  from {
    transform: scale(0.7);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes scaleOut {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0.7);
    opacity: 0;
  }
}

.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  justify-content: center;
  align-items: center;
}

.modal.opening {
  animation: fadeIn 0.3s ease;
}

.modal.closing {
  animation: fadeOut 0.3s ease;
}

.modal-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal.opening .modal-content {
  animation: scaleIn 0.3s ease;
}

.modal.closing .modal-content {
  animation: scaleOut 0.3s ease;
}

.modal-content video {
  width: 100%;
  height: auto;
  max-height: 80vh;
  display: block;
  border-radius: 8px;
}

.close {
  position: absolute;
  top: -50px;
  right: 10px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.3s;
  z-index: 9999;
}

.close:hover,
.close:focus {
  color: #ccc;
}

.newsContainer {
  cursor: pointer;
}

.newsContainer:hover .newsPic {
  transform: scale(1.1);
}

.newsContainer div {
  overflow: hidden;
}


/* ============================
WHO MAKES PROJECTS
============================ */
.makeProjects {
  height: 34.03125vw;
  width: 100%;

  background-color: #EDEDED;

  padding: 0 7.29vw;

  text-align: left;
}

.makeProjects h2{
  margin-top: 2.7083vw;
  font-size: 1.8229vw;
  font-weight: 400;
}

.makeProjects p{
  margin-top: 1.5625vw;
  font-size: 1.04vw;
}


.imageTeamWork{
  margin-top: 2vw;
  display: flex;
  gap: 0.83vw;
}
.makeProjects img{
  
  height: 20.46vw;
  width:  42.765625vw;
}