@media (min-width:600px) and (max-width:800px){


     nav{
          padding: 0 20px;
     }

     .nav-toggle{
          display: flex;
     }

     .nav-links{
          position: fixed;
          top: 0;
          right: -100%;
          width: 70%;
          height: 100vh;
          background-color: black;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          transition:right 0.3s ease;
     }

     .nav-links.active{
          right: 0;

     }

     .nav-links a{
          font-size: 20px;
     }

     .nav-toggle.active span:nth-child(1){
          transform: translateY(9px) rotate(45deg);

     }
     
     .nav-toggle.active span:nth-child(2){
          opacity: 0;

     }

     
     .nav-toggle.active span:nth-child(3){
          transform: translateY(-9px) rotate(-45deg);

     }

/* hero section */
.hero{
     padding: 10px 0px;
     .hero-content{
          height: 100vh;
          display: grid;
          grid-template-columns: repeat(1, 1fr);
          position: relative;

          .btn{
               align-items: flex-end;
               margin-top:60%;
               margin-left:10%;
               position: absolute;

               & button{
                    width: 150px;
                    height: 50px;
                    font-size: 18px;
                    font-weight: 800;
               }
          }
     }
     
}

.hero-text h1{
     margin-left: -15rem;
     font-size: 16px;
     max-width: 250px;
}

.hero-img{
     margin-left: 30%;
     margin-top: 250px;
     position: absolute;
}

.setting{
     margin-top: -900px;
     position: absolute;
     & img{
          margin-left: 50px;
          margin-top: -350px;
     }
}

/* bastob section */


.bastob{
     padding:70px 2px;

     .bastob-img {
          margin: 0 auto;
          & img{
               border-radius: 50%;
               box-shadow: 0 0 40px rgb(249, 137, 202);
               border: 1px solid greenyellow;
               width: 370px;
               height: 370px;
          }
     }

     .bastob-all{
          display:grid;
          grid-template-columns: repeat(1, 1fr);

     }
 }

 .bastop-text{
     color: white;
     font-size: 12px;
   margin-left: 12px;
   margin-top: 60px;

     & h2{
          padding: 15px 30px;
     }
 }


  /* friend section */

 .friend-content{
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 10px;
     margin: 0 auto;
     justify-content: center;

     .friend-one{
          background-color: white;
          width: 280px;
          height: 450px;
          border-radius: 20px;
          & img{
               margin-top: 20px;
               margin-left: 27px;
               width: 230px;
               height: 250px;
               border-radius: 20px;
          }

          & div{
               font-size: 13px;
               padding: 22px 32px;
          }

          & button{
               background-color: rgb(1, 140, 232);
               color: white;
               font-size: 20px;
               border: none;
               outline: none;
               padding: 7px 40px;
               font-weight: 900;
               margin-top: 1.5rem;
               margin-left: 47px;
          }

          & button:hover{
               background-color: rgb(4, 74, 144);

          }
     }

     .friend-one:hover{
          transform: translateY(-10px);
     }

     .friend-two{
          background-color: white;
          width: 280px;
          height: 450px;
          margin-top: -10px;
          border-radius: 20px;
          & img{
               margin-top: 20px;
               margin-left: 27px;
               width: 230px;
               height: 250px;
               border-radius: 20px;
          }

          & div{
               font-size: 13px;
               padding: 22px 32px;
          }

          & button{
               background-color: rgb(1, 140, 232);
               color: white;
               font-size: 20px;
               border: none;
               outline: none;
               padding: 7px 40px;
               font-weight: 900;
               margin-top: 1.5rem;
               margin-left: 47px;
          }

          & button:hover{
               background-color: rgb(4, 74, 144);

          }
     }

     .friend-two:hover{
          transform: translateY(-10px);
     }




     .friend-tree{
          background-color: white;
          width: 280px;
          height: 450px;
          border-radius: 20px;
          & img{
               margin-top: 20px;
               margin-left: 27px;
               width: 230px;
               height: 250px;
               border-radius: 20px;
          }

          & div{
               font-size: 13px;
               padding: 22px 32px;
          }

          & button{
               background-color: rgb(1, 140, 232);
               color: white;
               font-size: 20px;
               border: none;
               outline: none;
               padding: 7px 40px;
               font-weight: 900;
               margin-top: 1.5rem;
               margin-left: 47px;
          }

          & button:hover{
               background-color: rgb(4, 74, 144);

          }
     }

     .friend-tree:hover{
          transform: translateY(-10px);
     }





     .friend-four{
          background-color: white;
          width: 280px;
          height: 450px;
          border-radius: 20px;
          & img{
               margin-top: 20px;
               margin-left: 27px;
               width: 230px;
               height: 250px;
               border-radius: 20px;
          }

          & div{
               font-size: 13px;
               padding: 22px 32px;
          }

          & button{
               background-color: rgb(1, 140, 232);
               color: white;
               font-size: 20px;
               border: none;
               outline: none;
               padding: 7px 40px;
               font-weight: 900;
               margin-top: 1.5rem;
               margin-left: 47px;
          }

          & button:hover{
               background-color: rgb(4, 74, 144);

          }
     }

     .friend-four:hover{
          transform: translateY(-10px);
     }


 

 .friend-five{
     background-color: white;
     width: 280px;
     height: 450px;
     border-radius: 20px;
     & img{
          margin-top: 20px;
          margin-left: 27px;
          width: 230px;
          height: 250px;
          border-radius: 20px;
     }

     & div{
          font-size: 13px;
          padding: 22px 32px;
     }

     & button{
          background-color: rgb(1, 140, 232);
          color: white;
          font-size: 20px;
          border: none;
          outline: none;
          padding: 7px 40px;
          font-weight: 900;
          margin-top: 1.5rem;
          margin-left: 47px;
     }

     & button:hover{
          background-color: rgb(4, 74, 144);

     }
}

.friend-five:hover{
     transform: translateY(-10px);
}


.friend-six{
     background-color: white;
     width: 280px;
     height: 450px;
     border-radius: 20px;
     & img{
          margin-top: 20px;
          margin-left: 27px;
          width: 230px;
          height: 250px;
          border-radius: 20px;
     }

     & div{
          font-size: 13px;
          padding: 22px 32px;
     }

     & button{
          background-color: rgb(1, 140, 232);
          color: white;
          font-size: 20px;
          border: none;
          outline: none;
          padding: 7px 40px;
          font-weight: 900;
          margin-top: 1.5rem;
          margin-left: 47px;
     }

     & button:hover{
          background-color: rgb(4, 74, 144);

     }
}

.friend-six:hover{
     transform: translateY(-10px);
}


}


}