/* General Styling */
body {
    font-family: 'Poppins', sans-serif;
    color: #313131;
    line-height: 1.8;
    background-color: #9d9d9d;
}

/* White background for odd sections */
section:nth-child(odd) {
    background-color: #3a3a3a; /* White */
    color: #ffff;
    /* Target Bootstrap collapsible link (more specific selector) */
a.collapsible-link, a.collapsible-link:visited {
    color: #bababa !important; /* Black */
    text-decoration: none !important;
}

a.collapsible-link:hover, a.collapsible-link:focus, a.collapsible-link:active {
    color: #dcdcdc !important; /* Light gray on hover, focus, and active */
    text-decoration: none !important;
}
}

/* Light gray background for even sections */
section:nth-child(even) {
    background-color: #484848; /* Light gray */
    color:#232323;

    /* Target Bootstrap collapsible link (more specific selector) */
a.collapsible-link, a.collapsible-link:visited {
    color: #868686 !important; /* Black */
    text-decoration: none !important;
}

a.collapsible-link:hover, a.collapsible-link:focus, a.collapsible-link:active {
    color: #bebebe !important; /* Light gray on hover, focus, and active */
    text-decoration: none !important;
}
}

/* Grey rectangle with white border around the text group in Hero Section */
.text-wrapper {
    background-color: #3c3c3c; /* Grey background */
    padding: 20px;             /* Space inside the rectangle */
    border: 5px solid #ffffff; /* White border */
    display: inline-block;     /* Ensure the border wraps tightly around the content */
    margin: 0 auto;            /* Center the rectangle inside the hero section */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Optional shadow for depth */
    text-align: center;        /* Ensure the text inside is centered */
}


.navbar {
    background-color: #3a3a3a; /* Use your preferred color */
}

/* Center text inside the About Me section */
#about .text-center {
    text-align: center;
    margin: 0 auto;
}

/* Ensure proper spacing around the text */
#about p {
    margin-bottom: 20px;
    font-size: 1.1rem;
    line-height: 1.8;
}

/* Default link color - black */
a {
    color: #ffffff; /* Black */
    text-decoration: none;
}

/* Change link hover color - light gray */
a:hover {
    color: #a8a8a8; /* Light gray */
    text-decoration: none;
}

/* General Styling */
body {
    font-family: 'Poppins', sans-serif;
    color: #333;
    line-height: 1.8;
    background-color: #7a7a7a;
}


h2.section-title {
    font-size: 2.5rem;
    margin-bottom: 2rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* Hero Section */
.bg-hero {
    background: url('./media/pcb\ background.png') no-repeat center center/cover;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.main-title {
    font-size: 3.5rem;
    font-weight: 900;
}

.lead {
    font-size: 1.25rem;
}

.btn-outline-light:hover {
    background-color: #fff;
    color: #000;
}

/* Email link styling */
.email-link {
    color: #d3d3d3; /* Gray color */
    text-decoration: none;
}

.email-link:hover, .email-link:focus, .email-link:active {
    color: #d3d3d3; /* Keep gray color on hover/focus/active */
    text-decoration: none;
}


/* Target the Experience section header */
#education .section-title {
    color: #555555; /* Change to your desired color (e.g., orange) */
    font-weight: bold; /* Optional: Make it bold */
}


/* Target the Experience section header */
#experience .section-title {
    color: #555555; /* Change to your desired color (e.g., orange) */
    font-weight: bold; /* Optional: Make it bold */
}


/* Footer */
.footer {
    background-color: #000;
    color: #fff;
    padding: 1rem 0;
}

#ev-engineer .row {
    align-items: center; /* Vertically align the image and list */
    margin-top: 20px;
}

#ev-engineer .img-fluid {
    max-width: 60%; /* Shrink the image to 50% of its container's width */
    height: auto;   /* Maintain aspect ratio */
}

/* Align image and bullet points side by side for EMERGE */
#stem-mentor .row {
    align-items: center; /* Vertically align the image and list */
    margin-top: 20px;
}

#stem-mentor .img-fluid {
    max-width: 60%; /* Shrink the image to 50% of its container's width */
    height: auto;   /* Maintain aspect ratio */
}


/* Center heading for ASL Detection */
#asl-detection .row {
    align-items: center; /* Center the heading */
}

/* Align bullet points on the left and keep them vertically centered with the video */
#asl-detection .row {
    align-items: center; /* Vertically align the video and bullet points */
}

#asl-detection .col-md-6 ul {
    list-style-type: disc; /* Bullet points */
    padding-left: 0;       /* Remove default padding */
    text-align: left;      /* Align bullet points to the left */
}

#asl-detection .col-md-6 ul li {
    list-style-position: inside; /* Keep bullet points inside the text */
}

/* Ensure video is responsive */
#asl-detection iframe {
    max-width: 100%;  /* Make the video responsive */
    height: auto;     /* Maintain aspect ratio */
}

/* Remove bullets for project headings (first-level list items) */
.project-list > li {
    list-style-type: none; /* Remove bullet points */
}

/* Keep bullets for nested list items (e.g., project details) */
.project-list li ul li {
    list-style-type: disc; /* Ensure bullets remain for sublist items */
}

/* Center the dates in the project list */
.project-list p {
    text-align: center; /* Center the text inside the <p> element */
    margin: 0; /* Remove any default margins for better alignment */
}

/* Center the heading for the Projects section */
#projects h4 {
    text-align: center; /* Center project titles */
}

/* Align bullet points on the left and keep them vertically centered with media in the Projects section */
#projects .row {
    align-items: center; /* Vertically align content */
}

#projects .col-md-6 ul {
    list-style-type: disc; /* Use bullet points */
    padding-left: 0;       /* Remove default padding */
    text-align: left;      /* Align bullet points to the left */
}

#projects .col-md-6 ul li {
    list-style-position: inside; /* Keep bullet points inside the text */
}

/* Custom styles for Function Generator */
#function-generator .row {
    justify-content: center;
}

#function-generator .col-md-8 {
    display: flex;
    justify-content: center;
    text-align: center; /* Ensure the text is centered */
}

#function-generator ul {
    list-style-type: disc;
    padding-left: 0;
    margin: 0 auto;
}

#function-generator ul li {
    text-align: center;
    margin-bottom: 10px;
}

#AEC .row {
    justify-content: center;
}

#AEC .col-md-8 {
    display: flex;
    justify-content: center;
    text-align: center; /* Ensure the text is centered */
}

#AEC ul {
    list-style-type: disc;
    padding-left: 0;
    margin: 0 auto;
}

#AEC ul li {
    text-align: center;
    margin-bottom: 10px;
}


#DTMF .row {
    justify-content: center;
}

#DTMF .col-md-8 {
    display: flex;
    justify-content: center;
    text-align: center; /* Ensure the text is centered */
}

#DTMF ul {
    list-style-type: disc;
    padding-left: 0;
    margin: 0 auto;
}

#DTMF ul li {
    text-align: center;
    margin-bottom: 10px;
}

#med .row {
    justify-content: center;
}

#med .col-md-8 {
    display: flex;
    justify-content: center;
    text-align: center; /* Ensure the text is centered */
}

#med ul {
    list-style-type: disc;
    padding-left: 0;
    margin: 0 auto;
}

#med ul li {
    text-align: center;
    margin-bottom: 10px;
}
/* Center the heading and date */
.text-center {
    text-align: center;
}

/* Custom button style for dark gray */
.btn-download {
    background-color: #59595a; /* Dark gray */
    color: white; /* White text */
    border: none; /* Remove border */
    padding: 10px 20px;
    font-size: 1rem;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease; /* Smooth transition */
}

/* Hover effect to make it lighter gray */
.btn-download:hover {
    background-color: #6c757d; /* Lighter gray */
    color: white; /* Keep text white on hover */
}

/* Ensure the image is responsive */
.img-fluid {
    max-width: 100%;
    height: auto;
}

/* Styling for Personality Assessments section */
#personality-assessments .section-title {
    color: #555555; /* Matches other section titles */
    font-weight: bold;
    margin-bottom: 30px;
}

/* Remove bullet points and center the list */
.assessment-list {
    list-style-type: none; /* Remove bullets */
    padding-left: 0; /* Remove indentation */
    margin-top: 10px; /* Space above the list */
    text-align: center; /* Center the list items */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center the list items */
}

.assessment-list li {
    margin-bottom: 5px; /* Space between list items */
}

/* Make the first column full width and center its content */
#alfc .row,
#buck-boost .row,
#mars-rover .row {
  justify-content: center;
}

#alfc .col-md-6:first-child,
#buck-boost .col-md-6:first-child,
#mars-rover .col-md-6:first-child {
  flex: 0 0 100%;
  max-width: 100%;
  display: flex;
  justify-content: center;
}

#alfc .col-md-6:first-child ul,
#buck-boost .col-md-6:first-child ul,
#mars-rover .col-md-6:first-child ul {
  text-align: center !important;
  list-style-position: inside;
  padding-left: 0;
  margin: 0 auto;
}