/* Global */
body {font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif;
    line-height: 1.5; color: #494e52; background-color: rgb(248, 248, 248); margin: 0; padding: 0;}
header {background-color: rgb(252, 252, 252); display: flex; padding: 1em; justify-content: space-between;
    align-items: center; border-bottom: 1px solid #f2f3f3;}
h1 {font-size: 22px; font-family: helvetica; font-weight: bold; margin: 0;}
h2 {font-size: 20px; font-weight: bold; margin-top: 1.5em;}

/* Global: Header & Navigation */
header h1 a {color: black; text-decoration: none;}
nav ul {display: flex; list-style-type: none; margin: 0; padding: 0;}
nav ul li {margin-left: 1em;}
nav ul li a {text-decoration: none; color: #494e52;}
#nav_menu_toggle_button {display: none; background: none; border: none; font-size: 1.5em; cursor: pointer;}

/* Global: Main */
main {display: flex; max-width: 1280px; margin: 0 auto; padding: 2em 1em;}

/* Global: Logo */
.logo {width: 80px; height: 80px; background-color: 000000; border-radius: 50%; display: flex;
    justify-content: center; align-items: center; color: white; font-weight: bold; margin-right: 10px;}

/* Global: Container */
.container {display: flex; align-items: center; background-color: rgb(253, 253, 253); border-radius: 8px; 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); margin: 10px 0; padding: 10px 20px;}
.container:hover {transform: translateY(-2px);}
.reward_container {background-color: rgb(253, 253, 253); border-radius: 8px; 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); margin: 10px 0; padding: 10px 20px;}
.reward_container:hover {transform: translateY(-2px);}


/* Global: Profile Intro */
aside {width: 25%; padding-right: 3em;}
.profile_image {width: 100%; border-radius: 50%; margin-bottom: 1em;}
.contact_info {list-style-type: none; padding: 0;}
.contact_info li {margin-bottom: 0.5em;}
.icon {margin-right: 0.5em;}
.contact_info_a {color: #2980b9; text-decoration: none;}
.contact_info_a:hover {text-decoration: underline;}

/* Global: Content */
#content {width: 75%;}

/* Global: ID (Education, Experience, Publications, Leadership Experience, Engineering Projects, Gallery */
#education, #work_experience, #publications, #leadership_experience, #awards, #projects, #gallery {margin-top: 3rem;}



/* Home: About Me! (About Me) */
.main_AboutMe_par {font-size: 15px;}
.cv_button {display: inline-block; background: transparent; color: black; border: 1px solid #ddd; text-decoration: none; margin-top: 5px;
    padding: 0.5rem 1rem; border-radius: 50px; transition: all 0.3s ease-in; font-size: 12px; font-family: Arial, sans-serif; cursor: pointer;}
.cv_button:hover {background-color: #212c3a; color: #fff;}

/* Home: Company Description (Education, Work Experience, Leadership Experience) */ 
.company_description {display: flex; flex-direction: column; justify-content: center;}
.company_name {font-size: 18px; font-weight: bold;}
.company_sub_name {font-size: 16px; font-weight: bold;}
.company_location {font-size: 14px; margin-top: 3px; margin-bottom: 5px;}
.title {color: #3d33ab; font-size: 16px; padding-top: 8px;}
.degree, .year {font-size: 14px;}
.courses {font-size: 14px; padding-top:5px;}

/* Home: Work Experience (Work Experience) */
.job_description {font-size: 14px; margin-top: -10px; margin-right: 25px;}
.job_description_ul {list-style-type: disc;}
.work_experience_button {display: inline-block; background: transparent; color: black; border: 1px solid #ddd; text-decoration: none; margin-top:10px;
    padding: 0.5rem 1rem; border-radius: 50px; transition: all 0.3s ease-in; font-size: 12px; font-family: Arial, sans-serif; cursor: pointer;}
.work_experience_button:hover {background-color: #212c3a; color: #fff;}

/* Home: Publications (Publications) */
.publication_types {font-size: 16px; font-weight: bold; margin-top: 10px;}
.publication_grid {display: grid; flex-wrap: wrap; justify-content: space-between; width: 100%;
    background-color: rgb(248, 248, 248); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px;}
.publication_card {display: flex; flex-direction: column; justify-content: space-between;}
.publication_card_row1 {flex: 10;}
.publication_card_row2 {flex: .1;}
.publication_button {display: inline-block; background: transparent; color: black; border: 1px solid #ddd; text-decoration: none; margin-top:10px;
    padding: 0.5rem 1rem; border-radius: 50px; transition: all 0.3s ease-in; font-size: 12px; font-family: Arial, sans-serif; cursor: pointer;}
.publication_button:hover {background-color: #212c3a; color: #fff;}

/* Home: Awards & Honors (Awards) */
.award_year {font-size: 16px; font-weight: bold;}
.award_ul {font-size: 14px; margin-top: 0px; margin-bottom: 15px; list-style-type: disc;}

/* Home: Engineering Projects (Projects) */
.project_grid {display: grid; flex-wrap: wrap; justify-content: space-between; 
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px;}
.project_card {display: flex; flex-direction: column; justify-content: space-between;}
.project_card:hover {transform: translateY(-2px);}
.project_name {font-size: 18px; font-weight: bold;}
.project_type {font-size: 14px;}
.skills {font-size: 14px; padding-bottom: 10px;}
.project_img {width: 100%; height: auto; border-radius: 10px;}
.project_description {font-size: 14px;margin-top: 5px; text-align: justify;}
.project_button {display: inline-block; background: transparent; color: black; border: 1px solid #ddd; text-decoration: none; margin-top:10px;
    padding: 0.5rem 1rem; border-radius: 50px; transition: all 0.3s ease-in; font-size: 12px; font-family: Arial, sans-serif; cursor: pointer;}
.project_button:hover {background-color: #212c3a; color: #fff;}

/* Home: Gallery (Gallery) */
.gallery_section {border: 1px solid #7187a5; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px; padding: 18px;}
.gallery_company_name {font-size: 18px; font-weight: bold; text-align: center; padding-bottom: 10px;}
.gallery_desc {font-size: 16px; font-weight: bold; padding-top: 20px; padding-bottom: 10px;}
.gallery_grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px;}
.gallery_grid:hover{transform: translateY(-2px);}
.gallery_section img {display: block; max-width: 100%; height: auto; margin: 0 auto;}

.gallery_srbl {background-color: #ecf2fc;}
.gallery_mbl {background-color: #f5ecfc;}
.gallery_zero {background-color: #ecf2fc;}
.gallery_mars_rover {background-color: #f5ecfc;}
.gallery_terrier_motorsport {background-color: #ecf2fc;}




/* Company: Intro */
.company_intro {font-size: 18px; padding-bottom: 15px;}
.company_summary_card {background-color: rgba(235, 248, 233, 0.9); border: 0px; margin-top: 16px;}

/* Company: Publications (Publications) */
.company_publication_card {border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 1rem; background-color: white; transition: transform 0.2s; margin-bottom: 16px;}
.company_publication_card:hover {transform: translateY(-2px);}
.company_publication_button {display: inline-block; background: transparent; color: black; border: 1px solid #ddd; text-decoration: none; margin-top:10px;
    padding: 0.5rem 1rem; border-radius: 50px; transition: all 0.3s ease-in; font-size: 12px; font-family: Arial, sans-serif; cursor: pointer;}
.company_publication_button:hover {background-color: #212c3a; color: #fff;}

/* Company: Projects (Projects) */
.company_project_container {margin-bottom: 7rem;}
.project_summary {margin-bottom: 16px; padding: 16px; background-color: #e2e8f0; border-radius: 8px;}
.project_title {font-size: 18px; font-weight: bold; padding-bottom: 15px;}
.company_project_details {font-size: 16px;}
.sub_project {border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px; background-color: #eff1f4; transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); display: flex; align-items: center; margin: 16px 0; font-size: 16px;}
.sub_project:hover {transform: translateY(-2px);}
.sub_project img {width: 150px; height: auto; border-radius: 8px; margin-right: 16px;}
.sub_project_title {font-size: 16px; font-weight: bold; padding-top: 5px;}



@media (max-width: 768px) {
    main {
        flex-direction: column;
    }

    aside, #content {
        width: 100%;
    }

    nav ul {
        display: none;
    }

    #menu-toggle {
        display: block;
    }
}