*,html{margin: 0;padding: 0;box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

section{width: 100%;padding:50px 5%;}
.line-100{width: 50%;margin: 20px auto; margin: 20px 0 20px auto; border-bottom: 2px solid white;}
.line-sm1{width: 100px;margin: 20px 0; border-bottom: 2px solid #ffd9d9;}
.line-sm2{width: 100px;margin: 20px auto; border-bottom: 2px solid #4c4c4c;}
.line-sm3{width: 100px;margin: 20px 0; border-bottom: 2px solid #a395d2;}
.line-sm4{width: 100px;margin: 20px auto; border-bottom: 2px solid white;}


.bg-grey{background-color: #e7e7e7;}
.bg-white{background-color: #ffffff;}
.bg-purple{background-color: #a395d2;}


#Classes>h2, #Gallery>h2{color: #a395d2; font-size: 18px;font-weight: 400;text-align: center;}
#Classes>h3, #Gallery>h3{color: #4c4c4c; font-size: 24px;text-align: center;margin-bottom: 20px;}

h1, h2, h3{font-family: "Quicksand",sans-serif;}
/* ******** */


/* HOME */
#Home{ background: radial-gradient(circle, rgba(209,194,202,0.5) 0%, rgba(132,130,135,0.5) 100%), url(img/img-home.png) no-repeat;background-size: cover; color: #ffffff;background-position: center;
  min-height: 100vh;/*img 1440*815*/}
.sup-navbar{display: flex; flex-direction: row; justify-content: end;gap: 15px;color: white;}
nav{display: flex; flex-direction: row; justify-content: end;/*igap: 30px;*/}
nav>a{text-decoration: none; color: white;padding: 15px 15px;}
nav>a:hover{background-color: #a395d2a5;}

.intro{display: flex;width: 40%; flex-direction: column; justify-content: end;margin: 150px 0 0px auto;}
.intro p{text-shadow: 1px 1px 3px gray;}

/* BENEFITS */
#Benefits{display: flex; gap: 30px;}
.container-img{position: relative;}
#Benefits img{width: 120px; margin:0 auto;}
#Benefits>div{text-align: center;gap: 20px;display: flex;flex-direction: column;}
#Benefits p{text-align: justify;}


#About{display:flex; color: #ffffff;gap: 80px;align-items: center;justify-content: space-between;}
#About p {width: 600px;}

/* CLASSES */


.container-classes{display: flex; flex-wrap: wrap;}
.container {position: relative;width: 30%; margin: 5px; flex-grow: 1;}
  
  .image {opacity: 1;display: block;width: 100%;height: auto; transition: .5s ease;backface-visibility: hidden; }
  
  .middle {transition: .5s ease;opacity: 0;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%); width: 100%;height: 100%;}
  
  .container:hover .image {opacity: 0.3;background: #a395d2; }
  
  .container:hover .middle {opacity: 1; width: 100%;height: 100%; background-color: rgba(132, 115, 159, 0.5);}
  
  .text {color: white;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);}

  /* EVENTS */
  #Events>h2{margin-bottom: 30px;}
  #Events img{box-shadow: 0px 2px 4px gray;}
.container-events{display: flex; gap:50px;}
.container-events-side{display: flex; gap: 30px;}
.description-event{display: flex; flex-direction: column; gap: 20px;}

/* BTN */
.btn{text-decoration: none; background-color: #a395d2;color: #ffffff;border-radius: 7px; padding: 15px 5px;width: 100px;padding: 5px 12px;box-shadow: 0px 2px 4px gray;}
.btn:hover{background-color: #ffffff; color: #a395d2}


  /* GALLERY */
.container-btn{display: block;margin: 30px 0 70px 0;text-align: center;}
.zoom {background-color: #a395d2;transition: transform .2s; /* Animation */width: 30%;height: auto;margin: 0 auto;box-shadow: 2px 2px 4px gray;}
.container-zoom{display: flex; justify-content: space-between;margin-top: 50px;}

  .zoom:hover {transform: scale(1.2);}

  /* CONTACT */
  #Contact{font-family: "Quicksand",sans-serif;color: #ffffff;}
  #Contact h3{color: #ffffff; text-align: center;font-size: 24px;margin-bottom: 20px;}
  .container-contact{display: flex; justify-content: space-around;}
  .container-contact__item{flex-grow: 1;}


  .form{display:flex; color: #ffffff;}
  .first{display: flex;justify-content: space-between;}
  input{width: 100%;height: 30px;border: none; border-radius: 5px; margin: 5px 0 10px 0}
  /* input[name="Name"], input[name="Phone"]{width: 50%;margin: auto;} */

  button{border: 0;background-color:rgb(225, 221, 236);color: #a395d2;border-radius: 5px; width: 100%;padding: 15px 0;margin-top: 20px;cursor: pointer;font-weight: bold;}
  button:hover{background-color:#ffd9d9;}

  .container-contact>div:nth-child(2){display: flex;flex-direction: column; gap: 20px;color: #313131;}
  #details-title{color: #313131; font-size: 24px; font-weight: bold;}

  /* FOOTER */
#Footer{background-color: #4c4c4c; }
.container-footer{width: 1000px; margin: auto;display: flex; justify-content: space-between;color: #ffffff;}
#container-footer-about{width: 400px;}
/* #Footer div{width: 30%;} */
#Footer a,#Footer i{text-decoration: none; color: white; margin-right: 20px;}
#Footer .ft{font-family: "Quicksand",sans-serif;margin-bottom: 10px;font-weight: bold;}

/* MEDIA QUERY */

@media screen and (max-width:1350px) {
  #About{flex-direction: column;}
  #About p , #About img{width: 100%;}
}

@media screen and (max-width:1350px) {
.container-footer{flex-direction: column; gap:30px; width: 90%; margin: auto;}
}

@media screen and (max-width:780px) {
  .intro {width: 100%;}
  .line-100{width: 100%;margin: 20px auto;}
  nav {flex-direction: column;gap: 0;}
  #Benefits{flex-direction: column;}

  .container-classes{flex-direction: column;}
  .container{width: 90%;margin: 20px auto;}

  .container-events,.container-events-side, .container-zoom, .first{flex-direction: column;}
  .zoom {width: 90%;margin: 20px auto;}

  .container-contact {flex-direction: column; gap: 30px;}
}