/* Change scrollbar track */
::-webkit-scrollbar {
  width: 10px;
}

/* Change scrollbar thumb */
::-webkit-scrollbar-thumb {
  background: #0d6efd; /* Your color */
  border-radius: 5px;
}

/* Change scrollbar track background */
::-webkit-scrollbar-track {
  background: #f8f9fb; /* Your color */
}
@media (max-width: 762px) {
    
    .navbar h1{
        font-size: 1.5rem;
    }

      .links_container{
        display: none;
    }
    .nav_links .hamburger{ 

        display: block;

    }
    #checkbox:checked ~ .links_container{
        width: 100%;
        background-color: #0d6efd;
        display: block;
        position: absolute;
        top: 60px;
        left: 0px;
        z-index: 1000;
    }
    .links_container li{
        padding: 0.5rem 2rem;
    }
    .btn_signup{
        width: 100%;
        text-align: center;
        transition: all 100ms;
    }
    .btn_signup:hover{
        background-color: #f8f9fa;
        color: #0d6efd;
    }
    
      .hero{
        padding:3rem 0;
    }


    .flex_container{
        flex-direction: column;
    }
    .text_wrapper{
        width: 100%;
        padding: 10rem 0;
        text-align: center;
    }
    .text_wrapper h1{
        font-size: 35px;
    }

    .text_wrapper p{
        line-height: 2rem;
    }
    
    .img_wrapper{
        width: 100%;
     }
     
    .our_services h1{
        font-size: 2rem;
       }

    .our_services .p1{
        padding-top: 1rem;
    }

    .card_wrapper{
        flex-direction: column;
        align-items: center;
        padding:2rem 0;
    }
    .card-item{
        padding: 2rem;
        width: 90%;
        border-bottom: none;
    }

    .login_card {
        width: 100%;
    }
  
}
 

@media (max-width: 900px) and (min-width: 601px){

 .flex_wrapper {
        flex-direction: column;
        gap: 2rem;
    }
    .flex_item {
        width: 100%;
    }
    .footnote_wrapper {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }


     /* our services media styles */



    .about_wrapper{
        flex-direction: column;
        padding: 2rem 0;
    }
    .about_wrapper .about_text, .about_img{
        width: 100%;
        padding: 1rem;
    }
      .aitem{
    width: 50%; 
}
.about_staff {
    grid-template-columns: repeat(2, 1fr);
}
.about_staff .staff_card {
    max-width: 350px;
    max-height: 300px;
}
.about_staff_wrapper h2 {
    font-size: 2rem;
}
.about_staff_wrapper p {
    font-size: 1rem;
}
.about_staff_wrapper i {
    font-size: 1rem;
}
  .services_grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    .service_card {
        padding: 1.5rem 1rem;
    }
    .services_header h1 {
        font-size: 2rem;
    }
}
/* Phone: 600px and below */
@media (max-width: 600px) {

    .about_wrapper{
        flex-direction: column;
        padding: 2rem 0;
    }
    .about_wrapper .about_text, .about_img{
        width: 100%;
        padding: 1rem;
    }
    .aitem{
    width: 50%; 
}
.about_goal_wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.about_goal_card {
    width: 100%;
}

.about_staff {
    grid-template-columns: repeat(1, 1fr);
}
 .services_grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .service_card {
        padding: 1rem 0.5rem;
    }
    .services_header h1 {
        font-size: 1.5rem;
    }
    .services_header p {
        font-size: 1rem;
    }
}