@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');

*{
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  box-sizing: border-box;
  list-style: none;
}

body{
  height: 100%; 
  background: url(../INDEX/IMG/fondo\ matricúlate\ ok.jpeg) no-repeat center top; 
  background-size: cover;
  font-family: poppins;
  height: 100vh;
}

/*------NAVBAR-------*/
.menu{
  background-color: #00000071;
  color: #fff;
  height: 100px;
  display: flex;
}

.menu__container{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
}

.menu__links{
  height: 100%;
  transition: transform .5s;
  display: flex;
}

.menu__item{
  list-style: none;
  position: relative;
  height: 100%;
  --clip: polygon(0 0, 100% 0, 100% 0, 0 0);
  --clip: polygon(0 0, 100% 0, 100% 0, 0 0);
  --transform: rotate(-90deg);
}

.menu__item:hover{
  --clip: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  --transform: rotate(0);
}

.menu__link{
  color: #fff;
  text-decoration: none;
  padding: 0 30px;
  display: flex;
  height: 100%;
  align-items: center;
}

.menu__link:hover{
  background-color: #34A326;
}


.menu__arrow{
  transform: var(--transform);
  transition: transform .3s;
  display: block;
  margin-left: 3px;
}

.menu__nesting{
  list-style: none;
  transition:clip-path .3s;
  clip-path: var(--clip);
  position: absolute;
  right: 0;
  bottom: 0;
  width: max-content;
  transform: translateY(100%);
  background-color: #000;
}

.menu__link--inside{
  padding: 30px 100px 30px 20px;
}

.menu__link--inside:hover{
  background-color: #798499;
}

.menu__hamburguer{
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 15px;
  cursor: pointer;
  display: none;
}

.menu__img{
  display: block;
  width: 36px;
}

@media (max-width:800px){
  .menu__hamburguer{
      display: flex;
  }

  .menu__item{
      --clip:0;
      overflow:hidden ;
  }

  .menu__item--active{
      --transform: rotate(0);
      --background: #5e7094;
  }

  .menu__item--show{
      background-color: var(--background);
  }


  .menu__links{
      position: fixed;
      max-width: 400px;
      width: 100%;
      top: 70px;
      bottom: 0;
      right: 0;
      background-color: #000;
      overflow-y: auto;
      display: grid;
      grid-auto-rows: max-content;
      transform: translateX(100%);
  }

  .menu__links--show{
      transform: unset;
      width: 100%;
  }

  .menu__link{
      padding: 25px 0;
      padding-left: 30px;
      height: auto;
  }

  .menu__arrow{
      margin-left: auto;
      margin-right: 20px;
  }

  .menu__nesting{
      display: grid;
      position: unset;
      width: 100%;
      transform: translateY(0);
      height: 0;
      transition: height .3s;
  }

  .menu__link--inside{
      width: 90%;
      margin-left: auto;
      border-left: 1px solid #798499;
  }
}

/*----FIN NAVBAR-----*/

/*--------------Formulario----------*/


.avatar{
  width: 120px;
  height: auto;
  padding: 10px;
  transform: translate(150px, 0);
}

.contact_form{  
  width: 460px; 
  height: auto;
  margin: 20px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 5px 5px #24262b;
 transition: .2s;
}
 .contact_form:hover{
  transform: translateY(-4px);
  box-shadow: 0 1px 14px 2px rgba(0, 0, 0, 1.15);
}

input{
  font-family: poppins; 
  font-size: 1rem;
  width: 408px; 
  height: 40px; 
  border-radius: 0.2em;  
  border: 1px solid #bbb0b0;
  margin-top: 10px;  
  padding-left: 10px;
  margin-bottom: 20px;
  font-weight: 100;
}



label{
  font-family: poppins;
  display: block; 
  float: center;
  color: #34A326;
  font-size: 1rem;
  font-weight: bolder;
}


button{
  font-family: poppins;
  height: 45px; 
  padding-left: 5px;
  padding-right: 5px;   
  margin-bottom: 25px; 
  margin-top: 10px;   
  background-color: #34A326; 
  border-style: solid; 
  border-radius: 20px;  
  width: 420px;   
  cursor: pointer;
  box-shadow: 5px 5px #24262b;
  transition: .2s;
  font-weight: 100;
}


button p{
  color: #fff; 
  font-size: 18px;
  font-weight: 500;
}

button:hover {
  cursor: pointer;
  color: #000;
background-color: #ffc107;
transform: translateY(-4px);
box-shadow: 0 1px 14px 2px rgba(0, 0, 0, 1.15);

}

button p:hover{
color: #000;
}


span{
  color: #000; 
}


.aviso{
  font-size: 13px;  
  color: #000;  
}


h1{
  font-family: poppins;
  font-size: 30px;  
  text-align: center; 
  color: #34A326;
}

h3{
  font-family: poppins;
  font-size: 16px; 
  padding-bottom: 20px;
  color: #000;
  font-weight: 100;
  text-align: center;
}


::-webkit-input-placeholder {
 color: #a8a8a8;
}


::-webkit-textarea-placeholder {
 color: #a8a8a8;
}


.formulario input:focus{
  outline:0;
  border: 1px solid #34A326;
}


.formulario textarea:focus{
  outline:0;
  border: 1px solid #000;
}

 /*----------FOOTER--------------*/

 .container{
  max-width: 1200px;
  margin: 20px auto;
  text-align: center;
font-family: poppins, sans-serif;
}

.footer {
background-color: #24262b;
padding: 80px 10px;
}

.footer-row{
  display: flex;
  flex-wrap: wrap;
}

.footer-links{
  width: 25%;
  padding: 0 15px;
  
}

.footer-links h4 {
  font-size: 20px;
  color: #fff;
  margin-bottom: 25px;
  font-weight: 500;
  border-bottom: 2px solid #34A326;
  padding-bottom: 10px;
  display: inline-block;
  list-style: none;
}


.footer-links ul li a {
  font-size: 18px;
  text-decoration: none;
  color: #34A326;
  display: block;
  margin-bottom: 15px;
  transition: all.3s ease;
  list-style: none;

}

.footer-links ul li a:hover{
  color: #fff;
  padding-left: 6px;
}

.social-link a {
  display: inline-block;
  min-height: 40px;
  width: 40px;
  background-color: rgba(255, 255, 255, 0.2);
  margin: 0 10px 0;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
  color: #fff;
  transition: all .5s ease;
}

.social-link a:hover {
  background-color: #34A326;
}

.fin{
  font-family: poppins, sans-serif;
  text-align: center;
  color: #fff6;
  font-size: 20px;
}

@media(max-width:991px) {
  .footer-row {
    text-align: center;
  }

  .footer-links {
    width: 100%;
    margin-bottom: 30px;
  }
}

/*----------FIN FOOTER-------------*/