*{
  margin: 0;
  padding:0;
  box-sizing: border-box;
}
html{
  scroll-behavior: smooth;
}
ul li{
  list-style: none;
 
}


a{
  text-decoration: none;
}

header{
  padding:18px 0;
}

.container{
  padding-left: 10px;
  padding-right:10px;
  margin-left: auto;
  margin-right: auto;
}

header .container{
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
}

.mobiles{
  background-image: url("images/bg-intro-desktop.svg");
}


@media(min-width:768px){
  .container{
  width:750px;
  }
  .toggle{
    display: none;
  }
  
  .container ul li:hover{
    text-decoration:  hsl(136, 65%, 51%) underline;
    text-underline-offset: 29px;
   }
  
   .mobiles{
    height: 97vh;
    margin-right: -150px;
   }
 

}


@media(min-width:992px){
  .container{
  width:970px;
  }
}


@media(min-width:1200px){
  .container{
 width:1170px;
  }
  .mobiles{
    margin-right:-230px;
    }
}

header .container ul{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap:20px;
  transition: 0.5s;
}

.invite {
  padding: 10px;  
  cursor: pointer;
  border: none;
  background-image: linear-gradient(
    to right,
    hsl(136, 65%, 51%),
    hsl(192, 70%, 51%)
  );
  color: white;
  border-radius: 10px;

}


@media(max-width:768px){

 .container ul{
  position: absolute;
  left:0;
  right:0;
  top:50px;
  max-height: 0 ;
  flex-direction: column;
  align-items: center;
  text-align: center;

  background-color:white;

  transition:0.5s; 
  overflow:hidden ;
 }
 ul li {
  padding-top:20px;
 }
 ul li:last-child{
  padding-bottom: 20px;
 }

 ul li a{
  color:hsl(233, 8%, 62%);
 }
 .toggle{
  display: block;
 }
 .invite{
  display: none;
 }
  
.one .container{
  flex-direction: column-reverse;
  text-align: center;
  overflow: hidden;
 
}

.mobiles{
  background-image: url("images/bg-intro-mobile.svg");
  background-size: cover;
  
}

.first{
  padding-top:10px;
}

.second{
  padding-top:10px;
}

.mobiles{
 height: 50vh;
}

.parent .container{
  flex-wrap: wrap;
}
.card{
  width: 70%;
  margin:auto;
}


.two,.three{
  text-align: center;
}
.four .container{
  color:white;
  display:flex;
  flex-direction: column;
  text-align: center;
  justify-content: space-between;
  align-items: center;
}
}

.toggle{
  cursor:pointer;
}
a{
  color:hsl(233, 8%, 62%);
}




.invite2{
  padding: 10px;  
  cursor: pointer;
  border: none;
  background-image: linear-gradient(
    to right,
    hsl(136, 65%, 51%),
    hsl(192, 70%, 51%)
  );
  color: white;
  border-radius: 10px;
  margin-top:10px;

}
.one{
  background-color:hsl(220, 16%, 96%) ;
  
}
body{
  overflow-x: hidden;
}
.one .container{
  padding-top:10px;
  padding-bottom: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.two,.three{
  padding-top: 100px;
  padding-bottom: 100px;
}

.parent .container{
  padding-top:20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap:5px;
  
}

.card h1 ,.card h4{
  padding-top:20px;
  padding-bottom: 20px;
}

.two .card img{
  padding-top:25px;
}


.three{
  background-color: hsl(220, 16%, 96%);
}
.card h2{

  padding-bottom: 20px;
}

.three .card img{

  width:100%
}

.four{
  background-color: hsl(233, 26%, 24%);
  padding-top:40px;
  padding-bottom:40px;
}
.four .container{
  color:white;
  display:flex;
  justify-content: space-between;
  align-items: center;
}
.social img{
  margin-left:5px;
  margin-right:5px;
}
.first ,.second,.buttonandright{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap:10px;
}
.four p,img{
  cursor: pointer;
}

.four p:hover{
  color:hsl(136, 65%, 51%)  
}