@import url('https://fonts.googleapis.com/css2?family=Anybody:ital,wght@0,100..900;1,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  font-family: "Anybody", sans-serif;
  background-color: #dfdfd8;
}

img{
  width: 100%;
}
.container{
 width:min(90% , 1120px);
 margin-inline: auto;


}
header{
  background-color:#fafaf6;
  height: 4.5rem;
}
.desctop-menu{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
 

}
.menus-link{
 display: flex;
 gap: 1.25rem;
 padding: 20px;
}
.menus-link li {
  list-style: none;
}
.menus-link a{
  text-decoration: none;
  font-size: 1.25rem;
  font-weight: 500;
 
  color: #2b2b2b
;

}
.menus-link a:hover{
  color: #5f6ad6;

}
.desctop-menu h1{
  font-size: 1.5625rem;
  font-weight: 700;
}
.mobile-menu{
  display: none;
}
i{
  z-index: 1;
}
.hamberger{
  display: none;
}
 .mobile-menu-actions{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
      width:100%;
   }
.btn-primary ,.btn-secondary{

display: inline-block;
background-color:#5f6ad6;
color: #fafaf6;
padding: 20px;
margin: 7px;
text-decoration: none;
border-radius: 8px;
  width:80%;
  text-align: center;
  font-size: 1.25rem;

}
.btn-secondary{
  background-color: transparent;
  border: 2px solid white;
}
.hero{

  background-color: aqua;
  height: calc(100vh - 4.5rem);
  background:  linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.4)),
  
   url("	https://mobirise.com/extensions/retreatm5/outdoor-yoga-classes/assets/images/pexels-min-an-1234035.jpg" )bottom  /cover  no-repeat ;
  display: flex;
} 
.hero .container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}
.hero h1{
  font-size: 5rem;
  color: white;
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
}

.btn{
  padding: 0.9375rem 3.75rem;
  background-color: #5f6ad6;
  font-size: 2rem;
  color: white;
  border-radius: 0.625rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.btn:hover{
  background-color: #fafaf6;
  color: black;
}


.yoga {
  height: 90vh;
  border-radius: 1.6rem;
  margin-top: 6rem;
  background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
  url('https://mobirise.com/extensions/retreatm5/outdoor-yoga-classes/assets/images/pexels-lucas-pezeta-2121066.jpg')center/cover no-repeat;
  display: flex;
  align-items: flex-end;

}

.yoga .content{
  display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-inline: auto;
max-width: 728px;
color: white;
margin-bottom: 7.5rem;
gap: 2rem;
}

.yoga .content h1{
  font-size: 3.125rem;
  font-weight: 700;
  text-align: center;
}

.yoga .content p{
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
}

.info-boxes{
  display: grid;
  grid-template-columns: 1fr 1fr;
 gap:5rem ;
 margin-block:6rem ;

}
.box{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5625rem;

}
.box h1{
  font-size: 1.5625rem;
  color: #2b2b2b;
}
.box p{
  font-size: 1.25rem;
  color: #646464;
}

.info-boxes .box img{
  border-radius: 15px;
  height: 100%;
}
.btn1{
 padding: 0.9375rem 3.75rem;
  background-color: #5f6ad6;
  font-size: 1.5rem;
  color: #ffffff;
  border-radius: 0.625rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.btn1:hover{
  background-color: #fafaf6;
  color: black;
}

.perfect-condition{
  height: 438px;
  padding-block: 2rem;
  background:  linear-gradient(rgba(201, 200, 200, 0.5),rgba(186, 182, 182, 0.5)),
  url('https://mobirise.com/extensions/retreatm5/outdoor-yoga-classes/assets/images/pexels-andrea-piacquadio-3779750.jpeg')center/cover no-repeat;
    display: flex;
   flex-direction: column;
  justify-content: center;
  align-items: center;
  background-attachment: fixed;
  }
.perfect-condition h2{
  font-size: 3.125rem;
  color: #2a2a2a;
  font-weight: 400;
  margin-bottom: 2rem;
}
.perfect-condition p{
  font-size: 1.25rem;
  color: #2b2b2b;
  font-weight: 400;
}

.yoga-class{
  height:355.188px;
   background:  linear-gradient(rgba(201, 200, 200, 0.5),rgba(186, 182, 182, 0.5)),
  url('https://mobirise.com/extensions/retreatm5/outdoor-yoga-classes/assets/images/pexels-lucas-pezeta-2985098.jpg')center/cover no-repeat;
    display: flex;
   flex-direction: column;
  justify-content: center;
  align-items: center;
   padding-block: 2rem;
    margin-block: 5rem;
}
.yoga-box {
    height: 50%;
    border-radius: 25px;
    border: 3px solid #5f6ad4;
    background-color: #dfdfd8;
    color: #2a2a2a;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
}


.video-section img{
 height: 100%;
}


.video-section{
 height: 620px;
  padding-block: 2rem;
    display: flex;
   flex-direction: column;
  justify-content: center;
  align-items: center;

}
.video-section h2{
  margin-block: 2rem;
}
footer {
    background-color: #2a2a2a;
    color: white;
    font-size: 1.25rem;
    padding: 2rem;
}
@media (max-width:768px){
  .desctop-menu{
    display: none;
  }
  header{
    height: 0;
  }
  .hamberger{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    background-color: #5f6ad6;
    color: #fafaf6;

    width: 50px;
    height: 50px;
    right: 5%;
    border-radius: 50%;
    top: 8%;
    font-size: 2rem;
 
  }
  .mobile-menu{
  
    display: flex;
    justify-content: center;
     flex-direction: column;
    position: fixed;
    background-color: #2b2b2b;
     inset: 0 0 0 0;
     transform: translateX(0%);
     transition: transform 0.1s ease-in-out;

   
  }
   .mobile-menu[data-visible="false"] {
        transform: translateX(100%);
    }


    
    .hamberger i[data-visible="true"]{
        display: block;
    }

    .hamberger i[data-visible="false"]{
        display: none;
    }
   .mobile-menu .navigation{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
      width:100%;
    
   }
   .mobile-menu .navigation .menus-link {
     display: flex;
    flex-direction: column;
   list-style: none;
   text-decoration: none;
   
   }
   .mobile-menu .navigation .menus-link  a{
        color: white !important;
       display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
   }
   .mobile-menu .navigation h1{
    font-size: 2.3125rem;
    font-weight: 700 ;
    color: #fafaf6;
     border-bottom: 1px solid white;
    padding: 10px;
   
   }
  .hero {
    height: 100vh;
  }
  .hero h1{
     font-size: 3.2605rem;
  }
.btn:hover{
  background-color: #fafaf6;
  color: black;
}
  .yoga .content {
    margin-bottom: 2rem;
  }
  .yoga .content h1{
    font-size: 2.125rem;
  }
    .yoga .content p{
      padding: 1rem;
    font-size: 1.3125rem;
  }
  .info-boxes{
    grid-template-columns: 1fr;
  }

  
.perfect-condition h2{
  font-size: 2.125rem;
 
}
.perfect-condition p{
  font-size: 1.125rem;
  
}
 .yoga-box {
        flex-direction: column;
        height: 70%;
    }

    .yoga-box h2 {
        font-size: 1.3125rem;
        font-weight: 400;
        padding: 1rem;
    }
}