*{
      scroll-behavior: smooth;

}


h3, p {
font-family: Lato, sans-serif;

}


.custom-module-container {
    width: 100%;
    background-color: #e51b3d;
    padding: 20px 20px 0 0px;
font-family: Lato, sans-serif;
}

.buttons {
    text-align: start;
    margin-bottom: 20px;
}

.button {
    border-radius: 25px 0px !important;

    padding: 10px 20px;
    margin: 5px;
    border: none;
    background-color: black;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.button.active {
    background-color: white;
    color: black;
}

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

.text {
    width: 45%;
    font-size: 18px;
    line-height: 1.6;
    width: 60%;
  padding: 20px;
box-shadow: 10px 10px 56px -3px rgba(0,0,0,0.75);
-webkit-box-shadow: 10px 10px 56px -3px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 56px -3px rgba(0,0,0,0.75);
}

.image {
    width: 30%;
  display: flex;
}

.image img {
    width: 100%;
    border-radius: 8px;
}

.text{
  background-color: white;
  color: black;
padding: 20px 40px;
  border-radius: 0 30px;
}

.contact_btn{
  color: #e51b3d !important;
  border:2.5px solid #e51b3d !important;
  background-color: white;
  border-radius: 25px 0px;
  padding: 14px 25px;
  color: white;
  font-size: 20px;
}

.contact_btn:hover, .contact_btn:focus  {
  background-color: #e51b3d;
  border-radius: 25px 0px;
  padding: 14px 25px;
  border: 0;
  color: white !important;
  font-size: 20px;
}


.btn_container{
      display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}



#titleContent{
   color: black;
  font-size: 25px;

}


p{
    font-size: 17px;

}

.button:hover{
    background-color: black;
  border: 0px;
    border-radius: 25px 0px !important;

}

.button.active:hover {
    background-color: white;
    color: black;
  border: 0px;
    border-radius: 25px 0px !important;

}

@media (min-width: 830px) and (max-width: 1235px) {
  .content {
      align-items: center;
  }
  
  .image{
   width: 42%;
  }
  .text{
    padding: 12px 20px;
  }
  
  h3#titleContent{
   margin-bottom: 0px;
        font-size: 19.5px;
  }
  #textContent{
     margin-bottom: 0px;
        font-size: 17.2px;

  }
  .contact_btn{
      padding: 8.9px 20px;
  }
     
}


@media (min-width: 769px) and (max-width: 1200px) {
   #imageContent{
     width: 100%;
   }
     
}


@media (max-width: 830px) {
  
  
  .content {
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }
  .text{
    padding: 30px;
    width: 90%;
} 
  .custom-module-container{
        padding: 0px;

    height: 100%;
  }
  
  .image{
        width: 100%;
    display: flex;
    justify-content: center;
  }
  .image img {
    width: 60%;
}
  
   
}

  
  
}



@media (min-width: 1569px) and (max-width: 1820px) {
    .image img {
        width: 20%;
    }
}