body{
  height: 100%; 
  font-family: var(--font-medium, sans-serif);
 background-image: url('../static/img/SociosFondo.webp');
 background-size: cover
}

.encabezado{
 
  width: 70%; /* Ocupa el 100% del ancho de la pantalla */
  background-color:#EEF6F6 ;
  border-radius: 20px;
  padding-bottom: 2%;
  vertical-align: middle;
position: relative;
left:15%;
opacity: .9;
}
.contenedor {
  background-color:#EEF6F6 ;
  border-radius: 20px;
  padding-bottom: 2%;
  vertical-align: middle;
  opacity: .9;
  flex-direction: column;
  justify-content: space-between;
}
.contenido{
  width: 100%;
}
.imagen1{ 
  background-color:#EEF6F6 ;
  opacity: .9;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 50px;
  position: relative;
  place-items: center;
  top:20%;
}

.img1{
  width: 100%!important;
  height: auto;
  border-radius: 50px;
  position: relative;
  top:20%;
}

#p1{
  text-align: center;
  font-weight: bolder;
  color:#008e7b; 
}
#p3{
  text-align: center;
   color:#002f45;
}
#m1{
  text-align: center;
  font-weight: bolder;
  color:#000000;
}
#m2{
  text-align: center;
  color:#000000;
}
@media (min-aspect-ratio: 1/1) {
  .contenido{
    display: flex;
  }
  #p1{
    font-size: 2vw;
  }
.imagen1{
  display: flex;
  width: 50%;
}
  #p3{
    font-size: 1.5vw;
  }
  #m1{
    font-size: 4vw;
  }
  #m2{
    font-size: 2.5vw;
  }
 
  .contact_form{
    width: 80%!important;
    position: relative;
    left: 10%;
  }
  #cshead{
       font-size: 5vw;
  }
  textarea{
    font-size:1.5vw;
    height: 8vw;
  }
  input{
    font-size: 1.5vw;
  }
  label{
    font-size:2vw;
  }
  .button1{
    font-size: 2.5vw;
  }
  .flag1{
    height:2vw;
  }
  select{
    height: 2.5vw;
    font-size: 1.5vw; 
  }
  .csocial{
    height: 7vw;
  }
#btncontacto{
  left:26%;
 }
 .contenedor{
  width: 50%; 
  display:flex;
 }
}
 @media (max-aspect-ratio: 1/1)  {
  .contenido{
   display: block
  }
  #p1{
    font-size: 3.5vh;
  }
  .imagen1{
    width: 100%;
  }
  #p2{
    font-size: 5.5vh;
  }
  #p3{
    font-size: 3vh;
  }
  #m1{
    font-size: 4.5vh;
  }
  #m2{
    font-size: 3vh;
  }
 
    .contact_form{
      width: 100%!important;
    }
    #cshead{
      font-size: 4.5vh;
    }
    #tcsocial{
      font-size: 3vh;
    }
    textarea{
      font-size:2vh;
      height: 18vh;
    }
    input{
      font-size: 2.2vh;
    }
    label{
      font-size:3vh;
    }
    .button1{
      font-size: 3.5vh;
    }
    .flag1{
      height:4vh;
    }
    select{
      height: 3.5vh; 
      font-size: 2.5vh;
    }
    .csocial{
      height: 8vh;
    }
    
#btncontacto{
  left:20%;
}
.contenedor{
  width: 100%; 
}
 }
.contact_form{  
  height: auto;
  border-radius: 10px;  
  padding-top: 1%;
  padding-bottom: 1%;  
  background-color: transparent;
  padding-left: 5%; 
}
#flag1{
  width:8%;
  padding-right: 0%;
  margin-bottom: 10px; 
  margin-top: 5px; 
  border-style: solid; 
  border-width: 1px; 
  border-color: #008e7b; 
}
select{
  background-color: #ffffff; 
  color: #000000;
  width: 18%;
  border-radius: 5px;  
  border-style: solid; 
  border-width: 1px; 
  border-color: #008e7b; 
  padding-left: 2%;
  padding-right: 2%;
  margin-bottom: 10px; 
  margin-top: 5px; 
}
::placeholder{
  color: #000000;
  
}
#contacto_whatsapp{
  width: 100%;
  height: auto;
  position: relative;
}
#acontacto{
  width: 100%;
  height: auto;
}
#imgcontacto,#imgcontactoh{
  width: 100%;
  height: auto;
}

#btncontacto{
  width: auto;
  height: 40%;
  position: absolute;
  bottom: 5%;
  }
#imgbtncontacto{
  width: auto;
  height: 100%;
}
#telefono{
  background-color: #ffffff; 
  height: auto; 
  width: 63%!important;
  border-radius: 5px;  
  border-style: solid; 
  border-width: 1px; 
  border-color: #008e7b; 
  padding-left: 2%;
  padding-right: 2%;
  margin-bottom: 10px; 
  margin-top: 5px; 
  color: #000000;
}
input{
  background-color:#ffffff; 
  height: auto; 
  width: 90%;
  border-radius: 5px;  
  border-style: solid; 
  border-width: 1px; 
  border-color: #008e7b; 
  margin-top: 5px;  
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 10px; 
color: #000000;
}
textarea{
  background-color: #ffffff;
  color: #000000; 
  width: 90%; 
  border-radius: 5px;  
  border-style: solid; 
  border-width: 1px; 
border-color: #008e7b;
  margin-top: 5px;  
  padding-left: 10px;
  margin-bottom: 10px; 
  padding-top: 15px; 
}

label{
  display: block; 
  float: center;  
  color: #000000;
  }

.button1{
  position: relative;
  left:60%;
  height: auto; 
  width: auto;
 font-weight: bold;
  padding-left: 5%;
  padding-right: 5%;   
  margin-bottom: 2%; 
  margin-top: 2%;   
  background-color: #008e7b; 
  border-color:#FFFFFF; 
  border-style: solid; 
  border-radius: 25px;  
  color: #FFFFFF;
  cursor: pointer;
}
#cshead{
  display: block;
  width: 100%;
  text-align: center;
  color: #000000;
  font-weight: bold;
  }
.acsocial{
  align-items: left;
  height: 20%;
  line-height: 30%;
  width: auto;
  vertical-align: middle;
  padding-top: 1.5%;
  padding-bottom: 1.5%;
  padding-left: 2%;
  
}
.csocial{
  width: auto;
  padding-left: 4%;
  position: relative;
  padding-right:2.5% ;
}
#tcsocial{
  background-color: #000000;
  color: #B5923E;
  padding-left:5% ;
  padding-right: 5%;
  padding-top: 2%;
  padding-bottom: 2%;
  border-radius: 50px;
  vertical-align: middle;
}