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

     .header{
          width: 100%;
     }

     nav{
          padding: 0 15px;
     }

     .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: 78vh;
          display: grid;
          grid-template-columns: repeat(1, 0.1fr);

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

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

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

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

     & img{
          width: 300px;
          height: 350px;
     }

     .setting{
          
          & img{
               margin-top: -280px;
              position: absolute;

          }
     }
}

/* bastob section */


.bastob{
     padding:40px 0px;

     .bastob-img {
          margin-left: 50px;
          & img{
               border-radius: 50%;
               box-shadow: 0 0 30px rgb(242, 86, 201);
               width: 250px;
               height: 250px;
          }
     }

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

     }
 }

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

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


  /* friend section */

  .friend{
     margin: 0 auto;

     & h2{
          font-size: 30px;
          color: white;
          align-items: center;
          text-align: center;


     }
 }

 .friend-content{
     display: grid;
     grid-template-columns: repeat(1, 1fr);
     gap: 40px;

     .friend-one{
          background-color: white;
          width: 250px;
          height: 400px;
          border-radius: 20px;
          transition: all 1s;
          cursor: pointer;
          & img{
               margin-top: 20px;
               margin-left: 27px;
               width: 200px;
               height: 240px;
               border-radius: 20px;
          }

          & div{
               font-size: 12px;
               padding: 22px 28px;
          }

          & button{
               font-size: 16px;
               padding: 5px 30px;
               font-weight: 700;
               margin-top: 1rem;
               margin-left: 48px;
               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: 250px;
          height: 400px;
          border-radius: 20px;
          transition: all 1s;
          cursor: pointer;
          & img{
               margin-top: 20px;
               margin-left: 27px;
               width: 200px;
               height: 240px;
               border-radius: 20px;
          }

          & div{
               font-size: 12px;
               padding: 22px 28px;
          }

          & button{
               font-size: 16px;
               padding: 5px 30px;
               font-weight: 700;
               margin-top: 1rem;
               margin-left: 48px;
               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: 250px;
          height: 400px;
          border-radius: 20px;
          transition: all 1s;
          cursor: pointer;
          & img{
               margin-top: 20px;
               margin-left: 27px;
               width: 200px;
               height: 240px;
               border-radius: 20px;
          }

          & div{
               font-size: 12px;
               padding: 22px 28px;
          }

          & button{
               font-size: 16px;
               padding: 5px 30px;
               font-weight: 700;
               margin-top: 1rem;
               margin-left: 48px;
               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: 250px;
          height: 400px;
          border-radius: 20px;
          transition: all 1s;
          cursor: pointer;
          & img{
               margin-top: 20px;
               margin-left: 27px;
               width: 200px;
               height: 240px;
               border-radius: 20px;
          }

          & div{
               font-size: 12px;
               padding: 22px 28px;
          }

          & button{
               font-size: 16px;
               padding: 5px 30px;
               font-weight: 700;
               margin-top: 1rem;
               margin-left: 48px;
               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: 250px;
     height: 400px;
     border-radius: 20px;
     transition: all 1s;
     cursor: pointer;
     & img{
          margin-top: 20px;
          margin-left: 27px;
          width: 200px;
          height: 240px;
          border-radius: 20px;
     }

     & div{
          font-size: 12px;
          padding: 22px 28px;
     }

     & button{
          font-size: 16px;
          padding: 5px 30px;
          font-weight: 700;
          margin-top: 1rem;
          margin-left: 48px;
          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: 250px;
          height: 400px;
          border-radius: 20px;
          transition: all 1s;
          cursor: pointer;
          & img{
               margin-top: 20px;
               margin-left: 27px;
               width: 200px;
               height: 240px;
               border-radius: 20px;
          }

          & div{
               font-size: 12px;
               padding: 22px 28px;
          }

          & button{
               font-size: 16px;
               padding: 5px 30px;
               font-weight: 700;
               margin-top: 1rem;
               margin-left: 48px;
               border-radius: 12px;
               cursor: pointer;
               transition: 0.5s;
          }

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

          }
}

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


}


}