.hero-content-container {
  height: fit-content !important;
  min-height: none !important;
}

#hero {
  height: fit-content !important;
}

#contact-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* background-color: rgba(255, 0, 0, 0.255); */
  
}


.contact-box{
  /* background-color: rgb(122, 255, 253); */
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 96%;
  max-width: 62rem;
  margin-bottom: 4rem;
  /* background-color: var(--lightgray); */
  padding: 2rem 1rem;


  
}

.contact-title{
  text-align: left;
  /* background-color: red; */
  padding:  0.8rem 0.5rem 0.5rem 0.5rem;
}

h3{
  font-size: clamp(2rem, 3.5vw, 3rem);

}


.contact-content{
  display: flex;
  justify-content: space-between;
  /* background-color: red; */
  height: 100%;
  width: 100%;
}

.contact-image{
  background-color: green;
  width: 44%;
  min-height: 15rem;
  border-radius: 1rem;

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.contact-image-1{
  background-image: url(/images/people/mustafa-office-03.jpg);
      background-position: center top;

}

.contact-image-2{
  background-image: url(/images/people/hanna-hamed-profile-wide.jpg);
}


.contact-image-3{
  background-image: url(/images/people/recca-desktop-007.jpg);
  background-position: center top;

  
}

.fat{
  font-family: "rubik-medium", sans-serif;
}

.contact-infos{
  width: 54%;
  /* background-color: aqua; */
  height: fit-content;
  min-height: 15rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-left: 1rem;
}

.contact-info-line{
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
  margin-top: 0.3rem;

}



.data a{
  cursor: pointer;
  width: fit-content;
  color: blue;
  user-select: all;
  user-select: text !important;
  -webkit-user-select: text !important;
  -ms-user-select: text !important;
  margin-top: 0.5rem;
  font-family: "rubik-light", sans-serif;
}

.data a:hover{
  color: var(--accent-color);
  text-decoration: underline;
}

@media (min-width: 52rem){


  .hero-content-container{
    width: 80vw;


  }
}

@media (max-width: 52rem) {

  .hero-content-container{
    width: 1rem;

  }
}

@media (max-width: 38rem) {


  .contact-content{
    flex-direction: column;
    align-items: center;
  }

  .contact-box{
    margin-bottom: 0;
  }

  .contact-title{
    padding-left: 1.7rem;
  }

  .contact-image{
    width: 90%;
  }

  .contact-infos{
    width: 100%;
    padding: 2rem;
  }
}

@media (max-width: 52rem){
  #hero {
    height: fit-content !important;
    min-height: 10rem !important;
  }

  .hero-content-container{
    margin: 5rem 0 4rem 0;
    max-width: 96vw;
        
  }
}