.tabs-link{

     flex-wrap: wrap;
     display: flex;
     justify-content: space-evenly;
     gap:20px;

}


@media (max-width:768px){
   
   .tabs-link{

         justify-content:space-between;
          gap:8px;
  
    } 
    
}

body{
    overflow-x:hidden;
}

a:hover{

    opacity:0.5;
}

.navbar .home-link{
    font-weight:bold;
}

.tabs-link div {
     flex-wrap: wrap;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: 20px;
     height: 150px;
     width: 210px;
     padding: 0px 20px;
     box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
    .tabs-link div {
      
         gap: 10px;
         height: 120px;
         width: 100%;  /* Responsive width for mobile */
         max-width: 130px; /* Or use a max-width to control how wide it can go */
    }
}



.section-volunteer img{
     width:100%;
     height:auto;
}

.volunteer-content{
     display:flex;
    /* justify-content:center; */
     align-items:flex-end;
}



.lawyer-content-container img{
   
     height:250px;
     object-fit: cover;
     

}


@media screen and (max-width:768px) {
      
    .volunteer-content{
         margin-top:30px;
    }
   

}


   
.volunteer-content div{
 gap:10px;
}

.btn-dark{
    width:25%;
}

@media screen and (max-width:768px) {
      
     .btn-dark{
         width:100%;
    }
    

}


.bg-seeker{
    background-image:url("../images/circles.png"); 
}

.seeker-container{
    width:23%;
}

@media screen and (max-width:768px) {
 
    .seeker-container{
        flex-wrap: wrap;
        gap:15px;
        width:100%;
    }
}


.image-container-profile{

     width:50%;
     height:300px;
  
}

.image-container-profile img{
     width: 100%;
     height:100%;
     object-fit: cover;
}

.connect-container{
    width:49%;
    background-image:url("../images/circles.png"); 
    background-size:contain;
    background-position:100% 100%;
    background-repeat: no-repeat;
}

@media screen and (max-width:768px) {
    
    .connect-home {

        gap:15px;

     }


    .connect-container{
         width:100%;
         gap:15px;
    }

}


.banner-learn{
      display: flex;
      justify-content:space-between;
}


@media screen and (max-width:768px) {

    .banner-learn{
        flex-direction: column;
    }  
    
} 


.banner-learn-content div{
     display: flex;
     width:48%;
     gap:30px;
     flex-direction: column;
     justify-content:center;
    /* align-items: center; */
 
}

@media screen and (max-width:768px) {

    .banner-learn-content div{
        
         width:100%;

    }

}


.banner-learn-img{
      width:50%;
      height:auto;
      background-image: url("../images/circles.png");
      background-repeat: no-repeat;
      background-size: cover;
}


.banner-learn-img img{
      width:40%;
      height:auto;
}


@media screen and (max-width: 768px){
   
    .banner-learn{
        gap:30px;
        padding:10px 10px;
    }


    .banner-learn-img{
         width:100%;
         height:auto;
    
  }

     .banner-learn-img img{
         width:80%;
        
     }
}

.g-1{
     gap:5px;
}


.group-container{
     width:17rem;
}


@media screen and (max-width:768px) {

     .group-home{
          
        flex-direction: column;
        gap:15px;
     }

}




@media screen and (max-width:768px) {

    .group-container{
         width:100%;
   }

}


@media screen and (max-width:768px) {

.video-container{
    flex-wrap: wrap;
}

}



.video-container div{
     width:25%;
     height:200px;
}


@media screen and (max-width:768px) {
    
    .video-container div{
          width:100%;
          height:200px;
    }

}

.video-container div video{
    width:100%;
    height:100%;
}


.news{
     display: flex;
     gap:15px;
     justify-content:space-between;
     /* flex-wrap: wrap; */
}

@media screen and (max-width: 768px){
    
    .news{

         flex-wrap: wrap;
   }


}

.news div{
     width: 300px;
     height: 350px;
     gap:15px;
    
}

.news img{

     width:100%;
     height:auto;
     object-fit: cover;
}

@media screen and (max-width:768px){
    .news div{
         width: 100%;
         height: 350px;
         gap: 20px;
         position: relative;
        
    }   
    
    

    .news img{

        width:100%;
        height:100%;
        object-fit: cover;
   }


   .package-container{

         width:13em !important;
   }

   .package img{
     width:100%;
     height:10em;
     object-fit: cover;
   }
}