/*
 * File: mobile.css
 * Author: Yash Balotiya
 * Description: This file contains all the styling part for mobile view of index page
 * Created on: 25/11/2024
 * Last Modified: 25/11/2024
**/

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

    /* Main Content */
    body {
        width: 100vw;
        display: flex;
        flex-direction: column;
        /* padding: 8px; */
        padding-top: 0;
    }

    /* All sections */
    #aboutSection,
    #ourProgramsChild1,
    #ourWorkDiv,
    #ourWorkSection,
    #ourProgramsSection,
    #teamLeadersSection,
    #teamLeadersChild1,
    #certificateSection,
    #introSection {
        display: flex;
        flex-direction: column;
        max-width: 100vw;
        align-items: center;
    }

    /* Main section */
    main {
        width: 100vw;
    }

    /* About section */
    #aboutSection {
        width: 90%;
        align-items: center;
        line-height: normal;
        padding: 20px;
    }

    #aboutImg {
        width: 75%;
        margin: 0 0 20px 0;
    }

    .knowMoreBtn {
        width: 100%;
    }

    /* Our Programs section */
    #wellnessImg1 {
        width: 90vw;
    }

    /* Our work section */
    #ourWorkSection {
        width: 90vw;
    }

    .ourWork {
        line-height: normal;
        width: 100%;
        padding: 20px;
    }

    /* Certificate section */
    #certificateSection img {
        width: 90%;
    }

    #certificateSection button {
        width: 80%;
    }

    h2 {
        font-size: 24px;
    }
}