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


     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: 5px 0px;
     .hero-content{
          height: 100vh;
          display: grid;
          grid-template-columns: repeat(1, 1fr);

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

               & button{
                    width: 100px;
                    height: 40px;
                    font-size: 16px;
                    font-weight: 600;
               }
          }
     }
     
}

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

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

/* bastob section */


.bastob{
     padding:50px 2px;

     .bastob-img {
          margin-left: 50px;
          & img{
               border-radius: 50%;
               box-shadow: 0 0 20px rgb(251, 93, 185);
               width: 370px;
               height: 370px;
          }
     }

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

     }
 }

 .bastop-text{
     color: white;
     font-size: 10px;
   margin-left: 10px;
   margin-top: 50px;

     & h2{
          padding: 7px 20px;
     }
 }


  /* friend section */



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

     .friend-one{
          background-color: white;
          width: 320px;
          height: 520px;
          border-radius: 20px;
          transition: all 0.4s;
          cursor: pointer;
          & img{
               margin-top: 20px;
               margin-left: 27px;
               width: 270px;
               height: 300px;
               border-radius: 20px;
          }

          & div{
               font-size: 14px;
               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: 1rem;
               margin-left: 60px;
               border-radius: 12px;
               cursor: pointer;
               transition: 0.5s;
          }

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

          }
     }

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

     .friend-two{
          background-color: white;
          width: 320px;
          height: 520px;
          border-radius: 20px;
          transition: all 0.4s;
          cursor: pointer;
          & img{
               margin-top: 20px;
               margin-left: 27px;
               width: 270px;
               height: 300px;
               border-radius: 20px;
          }

          & div{
               font-size: 14px;
               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: 1rem;
               margin-left: 60px;
               border-radius: 12px;
               cursor: pointer;
               transition: 0.5s;
          }

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

          }
     }

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




     .friend-tree{
          background-color: white;
          width: 320px;
          height: 520px;
          border-radius: 20px;
          transition: all 0.4s;
          cursor: pointer;
          & img{
               margin-top: 20px;
               margin-left: 27px;
               width: 270px;
               height: 300px;
               border-radius: 20px;
          }

          & div{
               font-size: 14px;
               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: 1rem;
               margin-left: 60px;
               border-radius: 12px;
               cursor: pointer;
               transition: 0.5s;
          }

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

          }
     }

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





     .friend-four{
          background-color: white;
          width: 320px;
          height: 520px;
          border-radius: 20px;
          transition: all 0.4s;
          cursor: pointer;
          & img{
               margin-top: 20px;
               margin-left: 27px;
               width: 270px;
               height: 300px;
               border-radius: 20px;
          }

          & div{
               font-size: 14px;
               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: 1rem;
               margin-left: 60px;
               border-radius: 12px;
               cursor: pointer;
               transition: 0.5s;
          }

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

          }
     }

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


 

 .friend-five{
     background-color: white;
     width: 320px;
     height: 520px;
     border-radius: 20px;
     transition: all 0.4s;
     cursor: pointer;
     & img{
          margin-top: 20px;
          margin-left: 27px;
          width: 270px;
          height: 300px;
          border-radius: 20px;
     }

     & div{
          font-size: 14px;
          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: 1rem;
          margin-left: 60px;
          border-radius: 12px;
          cursor: pointer;
          transition: 0.5s;
     }

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

     }
}

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


.friend-six{
     background-color: white;
     width: 320px;
     height: 520px;
     border-radius: 20px;
     transition: all 0.4s;
     cursor: pointer;
     & img{
          margin-top: 20px;
          margin-left: 27px;
          width: 270px;
          height: 300px;
          border-radius: 20px;
     }

     & div{
          font-size: 14px;
          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: 1rem;
          margin-left: 60px;
          border-radius: 12px;
          cursor: pointer;
          transition: 0.5s;
     }

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

     }
}

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


}


}