/** mediaqueries for index*/
/* less than 1200px 
@media screen and (max-width: 1200px) → Targets only screens when the viewport width is ≤ 1200px. ex: keep links visible not in hamburger wen printing
@media (max-width: 1200px) → Targets all devices (screens, print, etc.) when the width is ≤ 1200px.
*/
@media screen and (max-width: 1200px) {
    /*About Me*/
    
    .about_me_container img {
        margin-top: 5%;
        max-width: 700px;
        max-height: 400px;
    }

    .about_me_text {
        width: 40%;
    
    }

    .about_me_container {
        gap: 4%;
    }

    
    .about_me_text .learn_more_btn img {
        width: 35px;
        height: 25px;
        margin-top: 2px;
    }

    
}


@media (max-width: 1024px) {}



/* === RESPONSIVE DESIGN === */
@media (max-width: 800px) {
    /*Services*/
   
   .services_list {
        flex-direction: column;
   }

    /*About Me Section*/
 
    .blue_background img {
        height: 110%;
        
    }

    .about_me_container {
        display: flex;
        flex-direction: column;
        align-items: center;
       /* justify-content: center;*/
        gap: 1%;
        
    }

    .about_me_container img {
        width: 200px;
        height: 55%;
        margin-top: 20%;
    }

    .about_me_text {
        display: flex;
        flex-direction: column;
        max-width: 600px; 
        background-color: rgb(255, 255, 255, 0.8);
        padding: 5%;
        box-sizing: border-box;
        height: 65%;
        width: 60%;
        justify-content: flex-start;
        align-items: flex-start;
        margin-top: 0;
    }


    .book_appointment {
        margin-top: 20vh;
    }

    .about_me_text .learn_more_btn {
       height: 30px;
       font-size: 1.2rem;
       
    }

    .about_me_text .learn_more_btn img {
        width: 35px;
        height: 25px;
        margin-top: 2px;
    }
    

   
}

@media (max-width: 600px) {
    .about_me_container {
        margin-top: 10%;
    }

   .blue_background img {
        height: 130%;
    }

    .about_me_container .profile_pic  {
        margin-top: 10%;
    }

    .about_me_text {
       width: 60vw; /*make test fit on small screens*/
       height: 60vh;
       margin-top: 0%;
    }

    
    #About_me {
        
        display: block;
        height: 30%;
        
    }
/*
    .hamburger-menu {
        margin-top: 5px;
    }*/

    .book_appointment {
        margin-top: 15vh;
    }
 
}

@media (max-width: 450px) {
    
    #About_me {
        
        display: block;
        height: 140%;
        
    }

     .about_me_text {
       width: 60vw; /*make test fit on small screens*/
       height: 130%;
       margin-top: 0%;
    }

    .blue_background img {
        height: 140%;
    }


   /* .about_me_container {
        margin-bottom: 30vh;
    }*/
/*
    .about_me_text {
        margin-bottom: 20vh;
    }*/

    .blue_background img {
        display: block;
    }
   /* .book_appointment {
        margin-top: 40vh;
    }*/

    .buttons_container {
        gap: 5px;
       
    }
    .book_appoint_container a {
        font-size: 1rem;
        padding: 10px;
    }




    
}