html {
  scroll-behavior : smooth ;
}
body {
  margin : 0 ;
  font : 1em "Fira Sans", sans-serif ;
}
h1, h2 {
  /* text-align : center ; */
  margin-top : 2rem ;
  overflow-wrap : break-word ;
}

.head {
  text-align : center ;
}

section > h1, section > h2 {
  text-align : center ;
}

.long {
  overflow-wrap: anywhere;
}


@media (min-width: 1050px) {
  header > div {
    padding-right : 15rem ;
  }
}

header {
  /* display : flex ; */
  /* flex-direction : column ; */
  /* align-items  : center ; */
  padding : 2rem ;
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)),
    url("/img/header.jpg");
  background-position : top center ;
  display : flex ;
  flex-direction : column ;
  justify-content : center ;
  align-items : center ;
}


header h1 {
  color : white ;
  font-size : 3rem ;
  margin-top : 0 ;
  text-align : left ;
  max-width : 28rem ;
}

header ul {
  font-size : 2.5rem ;
  color : lightgray ;
  list-style-type : none ;
  padding-left : 0 ;
}

header ul li {
  margin-top : .8rem ;
  width : 100% ;
}

header .signup-button {
  display : inline-block ;
  margin-top : 2rem ;
  color : white ;
  background-color : teal ;
  padding : 1rem 2rem ;
  text-decoration : none ;
  min-width : fit-content ;
  white-space: nowrap;
  font-weight : bolder ;
}

header .signup-button:hover {
  background-color : blue ;
}

.kid-courses {
  display : flex ;
  flex-direction : row ;
  flex-wrap : wrap ;
  gap : 1rem ;
  justify-content : center ;
}

.course-card {
  display : flex ;
  flex-direction : row ;
  flex-wrap : wrap ;
  justify-content : center ;
  gap : 1rem ;
}

@media (min-width: 1050px) {
  .course-card {
    flex-direction : column ;
    justify-content : normal ;
  }
}

.course-card img {
  width : 20rem ;
}

.course-card .description {
  width : 20rem ;
}

.course-card .description ul {
  padding-left : 1rem ;
}

.illustration {
  /* border-radius : 1rem ; */
}

.slogan {                                                                                                                                                                                                   
  display : flex ;                                                                                                                                                                                          
  align-items : center ;                                                                                                                                                                                    
  justify-content : center ;                                                                                                                                                                                
  font-size : 2.5rem ;                                                                                                                                                                                      
  font-weight : bolder ;                                                                                                                                                                                    
  padding: 3rem 5rem ;                                                                                                                                                                                      
  text-align : center;                                                                                                                                                                                      
}    
.slogan p {                                                                                                                                                                                                 
  max-width : 35rem ;                                                                                                                                                                                       
  display: inline-block ;                                                                                                                                                                                   
  text-align : left;                                                                                                                                                                                        
  width: fit-content ;                                                                                                                                                                                      
  box-sizing : content-box ;                                                                                                                                                                                
}                                                                                                                                                                                                           
@media (max-width: 600px) {

    
.slogan {                                                                                                                                                                                                 
  font-size : 2rem ;                                                                                                                                                                                      
 }                                                                                                                                                                                                        
}

.mission {
  color : white ;
  padding : 2rem 4rem ;
  font-size : 1.5rem ;
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
    url("/img/mission.jpg");
  background-position : top center ;
  background-size : cover ;
  display : flex ;
  flex-direction : column ;
  /* justify-content : center ; */
  align-items : center;
}

@media (width < 400) {
  .mission h2 {
    font-size : 2rem ;
  }

  .mission p {
    font-size : .5rem ;
  }
  .mission {
    padding : 1rem ;
  }
}

.mission h2 {
  font-size : 4rem ;
  text-align : left ;
}

.mission > div {
  max-width : 35rem ;
}

.feats, .team .card-container {
  display : flex ;
  flex-direction : row ;
  flex-wrap : wrap ;
  gap : 1rem ;
  justify-content : center ;
}

.feat-row, .team-row {
  display : flex ;
  flex-direction : column ;
  gap: 1rem ;
}

.feat-card, .team-card {
  display : flex ;
  flex-direction : row ;
  flex-wrap : wrap ;
  justify-content : center ;
  gap : 1rem ;
}

@media (min-width: 1000px) {
  .feat-card, .team-card {
    flex-direction : column ;
    justify-content : normal ;
  }
  .feat-row, .team-row {
    flex-direction : row;
    /* justify-content : normal ; */
  }
}

@media (min-width: 500px) and (max-width: 1000px) {
  .feat-card, .team-card {
    flex-direction : column ;
    justify-content : normal ;
  }
  .feat-row, .team-row {
    flex-direction : row;
    justify-content : normal ;
  }
}

.feat-card img,
.team-card img {
  width : 15rem ;
  height : 15rem ;
}

.feat-card .description {
  width : 15rem ;
  height : 15rem ;
}

.team-card .description {
  width : 15rem ;
  height : 15rem ;
}

.first-lesson-clothing {
  padding : 4rem ;
  display : flex ;
  flex-direction : column ;
  align-items : center;
}

.first-lesson-clothing > div {
  display : flex ;
  flex-direction : row ;
  flex-wrap : wrap ;
  justify-content : center ;
  gap : 1rem ;
  font-size : 1.5rem ;
}

.first-lesson-clothing img {
  border-radius : 2rem ;
  width : 30rem ;
}

@media (max-width: 600px) {
  .first-lesson-clothing img {
    width : 20rem ;
  }
}

.first-lesson-clothing div p {
  max-width : 30rem ;
}

.first-lesson-clothing h2 {
  font-size : 3rem ;
}

.team {
  display : flex ;
  flex-direction : column ;
  align-items : center ;
}

.team > h2 {
  font-size : 3rem ;
  text-align : center ;
  font-weight : normal ;
  margin-bottom : 1rem ;
}

.team > p {
  text-align : center ;
  font-size : 1.3rem ;
  max-width : 35rem ;
  /* padding : 1rem ; */
  margin-top : 0rem ;
  margin-bottom : 5rem ;
}

.join-family {
  display : flex ;
  flex-direction : column ;
  align-items : center ;
  justify-content : center ;
  color : white ;
  height : 60rem ;
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    url("/img/join-family.jpg");
  background-position : top center ;
  background-size : cover ;
  
}

.join-family h2 {
  font-size : 2.5rem ;
}

.join-family a {
  font-size : 2rem ;
  padding :  1rem 2rem  ;
  background : teal ;
  color : white ;
  text-decoration : none ;
  border-radius : 2rem ;
}

.join-family a:hover {
  background-color : lightblue ;
}

.signup {
  padding : 2rem ;
  background : rgb(242, 238, 233) ;
}

.signup > h2 {
  font-size : 3rem ;
  text-align : center ;
}

.signup > p {
  font-size : 2rem ;
  text-align : center ;
}

.signup form {
  display : flex ;
  flex-direction : column ;
  gap : 1rem ;
  align-items : center ;
}

.signup form * {
  width : 100% ;
  height : 3rem ;
  max-width : 30rem ;
  padding-left : 1rem ;
}

.signup form .submit {
  display : block ;
  background-color : teal ;
  color : white ;
  border-style : none ;
  border-radius : .5rem ;
  font-size : 1.5rem ;
  border-width : 0 ;
}

.signup form .submit:hover {
  background-color : blue ;
}

.map iframe {
  width : 100% ;
}

.contacts h2 {
  text-align : left ;
}

.contacts address {
  padding : 0 ;
}

.contacts {
  padding : 2rem 0 ;
  display : flex ;
  flex-direction : column ;
  justify-content : center ;
  align-items : center ;
}


.medias * {
  width : 2rem ;
  height : 2rem ;
}

.medias .whatsapp > img {
  width : 2.5rem ;
  height : 2.5rem ;
}

.profiles {
  padding : 4rem ;
  background : rgb(242, 238, 233) ;
}

.profiles {
  display : flex ;
  flex-direction : column ;
  align-items : center ;
  gap : 3rem ;
}

.profiles div {
  display : flex ;
  flex-direction : row ;
  align-items : center ;
  justify-content : center ;
  gap : 1rem ;
}

.profiles div * {
  width : 3rem ;
  height : 3rem ;
}

.amoforms-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
}

.schedule {
  padding : 2rem ;
  display : flex ;
  flex-direction : column ;
  align-items : center ;
  justify-content : center ;
}

.schedule .day-name {
  font-size : .8rem ;
}

.schedule .days,
.schedule .courses  {
  display: flex ;
  flex-direction : row ;
  flex-wrap : wrap ;
  gap : 1rem ;
  /* align-items : center ; */
  justify-content : center ;
}

.schedule .days {
  gap : 2rem ;
}

.schedule .day {
  max-width : 25rem ;
  display : flex ;
  flex-direction : column ;
  /*justify-content : space-evenly ;*/
}

.schedule .course {
  max-width : 12rem ;
  width : 12rem ;
  display : flex ;
  flex-direction : column ;
  gap : .5rem ;
}

.schedule .day-name {
  border-top: .1rem solid lightgrey;
  font-weight : normal ;
}

.schedule .course-name {
  text-decoration : none ;
  font-weight : normal ;
  margin-top : .2rem ;
  margin-bottom : .2rem ;
}

.schedule .time {
  color : darkkhaki ;
  font-size : .8rem ;
}

.schedule .desc {
  font-size : .8rem ;
}

.schedule .join.btn {
  margin-top : 2rem ;
  padding : 1rem 5rem ;
  background-color : rgba(0, 0, 0, 0);
  border: .1rem solid darkkhaki;
  text-decoration : none ;
  color : black ;
}

.schedule .join.btn:hover {
  background-color : darkkhaki ;
  color : white ;
}