body { padding-top: 56px; }
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #343a40 !important; }
.bg-hero { background-color: #45b06cff; }

/* CALLOUT */
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #e9ecef; border-left-width:.25rem; border-radius:.25rem }
.bd-callout h4 { margin-bottom: 1.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info { border-left-color:#5bc0de }
.bd-callout-warning { border-left-color:#f0ad4e }
.bd-callout-danger { border-left-color:#d9534f }

/* Loading */
.loader {
    width: 100px; /* Adjust size as needed */
    height: 100px; /* Adjust size as needed */
    background-image: url('your-image-url.png'); /* Replace with your image URL */
    background-size: cover;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Home */
.home_container {    max-width: 1200px;    margin: auto;    padding: 20px;    animation: fadeIn 1s ease-in;}
@keyframes fadeIn {    from { opacity: 0; }    to { opacity: 1; }}
.home_section {    background: white;    border-radius: 12px;    padding: 25px;    margin-bottom: 20px;    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);    transition: transform 0.2s, box-shadow 0.2s;
    opacity: 0; /* Start hidden */    transform: translateY(20px); /* Start below */    transition: opacity 0.5s, transform 0.5s; /* Smooth transition */}
.home_section.visible {    opacity: 1; /* Make visible */    transform: translateY(0); /* Jump effect */}
.home_section:hover {    transform: translateY(-5px);    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);}
.home_section h2 {    color: #2c3e50;    font-size: 1.8em;    border-bottom: 2px solid #3498db; /* Underline effect */    padding-bottom: 10px;}
.home_section p {    line-height: 1.6;    margin: 10px 0;}
.home_video-container {    display: flex;    justify-content: center;    margin: 20px 0;}
video {    width: 100%; /* Full width */    max-width: 1000px; /* Set max width */    height: auto; /* Maintain aspect ratio */    border-radius: 12px;    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);    transition: transform 0.3s;}
video:hover {    transform: scale(1.03); /* Slight zoom on hover */}
.home_progress-list {    list-style-type: none;    padding: 0;}
.home_progress-list li {    background: #3498db;    color: white;    margin: 10px 0;    padding: 10px;    border-radius: 6px;    animation: slideIn 0.5s ease forwards;    opacity: 0;    transform: translateY(10px);}
@keyframes slideIn {    from {        opacity: 0;        transform: translateY(10px);    }    to {        opacity: 1;        transform: translateY(0);    }}
@media (max-width: 768px) {    .home_section h2 {        font-size: 1.5em;    }}

/* Member */
.member_container {    max-width: 1200px;    margin: auto;    padding: 20px;    background: white;    border-radius: 8px;    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);}
.member_photo {    width: 100%;    max-height: 300px;    object-fit: cover;    border-radius: 8px;    margin-bottom: 20px;}
.member_title {    text-align: center;    color: #333;}
.member_section {    margin-bottom: 40px;    padding: 20px; /* Add padding inside the box */    border: 1px solid #ddd; /* Border for separation */    border-radius: 8px;
                     /* Rounded corners */    background-color: #f3f3f3; /* Light background color */}
.member_section_title {    font-size: 1.8em;    color: #333;    margin-bottom: 10px;    text-align: left; /* Align title to the left */}
.member_row {    display: flex;    justify-content: space-around;    flex-wrap: wrap;}
.member_member {    display: flex;    flex-direction: column;    align-items: center;    margin: 10px;    text-align: center;    flex: 1 1 30%;    max-width: 180px;}
.member_member img {    width: 150px; /* Larger width for member photos */    height: 150px; /* Fixed height for equal display */    border-radius: 50%;    margin-bottom: 5px;    object-fit: cover;}
member_member_name {    font-size: 1.2em;    color: #333;}
@media (max-width: 600px) {    .member_member {        flex: 1 1 45%; /* Adjust for mobile */    }}
@media (max-width: 400px) {    .member_member {        flex: 1 1 100%; /* Stack for smaller screens */    }}

/* Description */
.description_content_section {    display: flex;    align-items: center;     margin-bottom: 40px;    padding-bottom: 20px;}
.description_content_section:nth-child(even) {    flex-direction: row-reverse; /* Reverse layout for even sections */}
.description_content_text {    flex: 1; /* Allow text to take 50% of the space */    max-width: 50%; /* Set max width to 50% */    padding-right: 20px; /* Space to the right */}
.description_content_section img {    max-width: 150px; max-height: 150px; width: 100%; flex: 1; padding-left: 20px; }
.description_content_text h2 {    margin-top: 0;    margin-bottom: 10px; /* Space between title and line */    border-bottom: 1px solid #ccc; /* Line under each topic */}
.description_content_text p {    line-height: 1.6;}
.description_caption {    font-size: 0.9em; /* Smaller font for captions */    color: #666; /* Caption color */    text-align: center; /* Center align captions */}
.description_description {    font-size: 0.95em; /* Font size for description */    color: #333; /* Color for description text */    margin-top: 10px; /* Space above description */    line-height: 1.5; /* Line height for better readability */}

/* Engineering */
.engineering_image_list {    display: flex;    justify-content: center;    padding: 20px 0;    background-color: #4CAF50;}
.engineering_image_list img {    width: 80px; /* Adjust as needed */    margin: 0 15px;    cursor: pointer;    border-radius: 5px;    transition: transform 0.3s;}
.engineering_image_list img:hover {    transform: scale(1.1);}
.engineering_main {    display: flex;    flex-direction: column;    padding: 20px;    max-width: 100%; /* Full width */    margin: 0; /* Remove margin for full width */}
.engineering_content {    background-color: #ffffff;    padding: 20px;    border-radius: 8px;    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);    width: 100%; /* Full width */    margin-top: 20px;}
.engineering_content h2 {    margin-top: 0;}
.engineering_content p {    line-height: 1.6;}

/* Results */
.results_overview {    margin-bottom: 20px;    padding: 15px;    background-color: #f4f4f4;    border-radius: 5px;}
.results_dropdown {    margin-bottom: 10px;}
.results_dropdown button {    width: 100%;    background: #4CAF50;    color: white;    border: none;    padding: 10px;    text-align: left;    cursor: pointer;    border-radius: 5px;    position: relative;}
.results_content {    display: none;    padding: 10px;    background-color: #e7f3fe;    border-left: 4px solid #2196F3;    border-radius: 5px;}
.arrow {    position: absolute;    right: 10px;    top: 50%;    transform: translateY(-50%) rotate(0deg);    transition: transform 0.2s;}
.open .arrow {    transform: translateY(-50%) rotate(180deg); /* Rotate to point down */}

/* Contribution */
.contribution_main {    display: flex;    padding: 20px;}
.contribution_content {    flex: 3;    padding-right: 20px;}
.contribution_part {    background-color: #f4f4f4;    margin-bottom: 20px;    padding: 15px;    border-radius: 5px;}
.contribution_sidebar {    flex: 1;    background-color: #f4f4f4;    padding: 20px;}
.contribution_sidebar ul {    list-style-type: none;    padding: 0;}
.contribution_sidebar li {    margin: 10px 0;}
.contribution_sidebar a {    text-decoration: none;    color: #4CAF50;}

/* notebook */
.notebook_overview {    margin-bottom: 20px;    padding: 15px;    background-color: #f4f4f4;    border-radius: 5px;}
.notebook_dropdown {    margin-bottom: 10px;}
.notebook_dropdown button {    width: 100%;    background: #007BFF; /* Light blue button color */    color: white;    border: none;    padding: 10px;    
                               text-align: left;    cursor: pointer;    border-radius: 5px;    position: relative;    transition: background 0.3s;}
.notebook_dropdown button:hover {    background: #0056b3; /* Darker blue on hover */}
.notebook_content {    display: none;    padding: 10px;    background-color: #e7f3fe;    border-left: 4px solid #2196F3;    border-radius: 5px;}
.arrow {    position: absolute;    right: 10px;    top: 50%;    transform: translateY(-50%) rotate(0deg);    transition: transform 0.2s;}
.open .arrow {    transform: translateY(-50%) rotate(180deg); /* Rotate to point down */}

/* safety */
.safety_main {    display: flex;    padding: 20px;}
.safety_content {    flex: 3;    padding-left: 20px;}
.safety_part {    background-color: #f4f4f4;    margin-bottom: 20px;    padding: 15px;    border-radius: 5px;}
.safety_sidebar {    flex: 1;    background-color: #f4f4f4;    padding: 20px;    display: flex;    flex-direction: column;    align-items: center;}
.safety_sidebar img {    width: 80px; /* Adjust as needed */    cursor: pointer;    margin: 10px 0;    transition: transform 0.3s;}
.safety_sidebar img:hover {    transform: scale(1.1);}

/* model */
.model_image_list {    display: flex;    justify-content: center;    padding: 20px 0;    background-color: #4CAF50;}
.model_image_list img {    width: 80px; /* Adjust as needed */    margin: 0 15px;    cursor: pointer;    border-radius: 5px;    transition: transform 0.3s;}
.model_image_list img:hover {    transform: scale(1.1);}
.model_main {    display: flex;    flex-direction: column;    padding: 20px;    max-width: 800px;    margin: auto;}
.model_content {    background-color: #ffffff;    padding: 20px;    border-radius: 8px;    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);    margin-top: 20px;}
.model_content h2 {    margin-top: 0;}
.model_content p {    line-height: 1.6;}

/* hardware */
.hardware_main {    display: flex;    padding: 20px;}
.hardware_content {    flex: 3;    padding-right: 20px;}
.hardware_part {    background-color: #f4f4f4;    margin-bottom: 20px;    padding: 15px;    border-radius: 5px;}
.hardware_sidebar {    flex: 1;    background-color: #f4f4f4;    padding: 20px;}
.hardware_sidebar ul {    list-style-type: none;    padding: 0;}
.hardware_sidebar li {    margin: 10px 0;}
.hardware_sidebar a {    text-decoration: none;    color: #4CAF50;}

/* entrepreneurship */
.entrepreneurship_overview {    margin-bottom: 20px;    padding: 15px;    background-color: #f4f4f4;    border-radius: 5px;}
.entrepreneurship_dropdown {    margin-bottom: 10px;}
.entrepreneurship_dropdown button {    width: 100%;    background: #007BFF; /* Light blue button color */    color: white;    border: none;    padding: 10px;    text-align: left;    
                                    cursor: pointer; border-radius: 5px;    position: relative;    transition: background 0.3s;}
.entrepreneurship_dropdown button:hover {    background: #0056b3; /* Darker blue on hover */}
.entrepreneurship_content {    display: none;    padding: 10px;    background-color: #e7f3fe;    border-left: 4px solid #2196F3;    border-radius: 5px;}
.arrow {    position: absolute;    right: 10px;    top: 50%;    transform: translateY(-50%) rotate(0deg);    transition: transform 0.2s;}
.open .arrow {    transform: translateY(-50%) rotate(180deg); /* Rotate to point down */}

/* human practice */
.hp_main {    display: flex;    padding: 20px;}
.hp_content {    flex: 3;    padding-left: 20px;}
.hp_part {    background-color: #f4f4f4;    margin-bottom: 20px;    padding: 15px;    border-radius: 5px;}
.hp_sidebar {    flex: 1;    background-color: #f4f4f4;    padding: 20px;    display: flex;    flex-direction: column;    align-items: center;}
.hp_sidebar img {    width: 80px; /* Adjust as needed */    cursor: pointer;    margin: 10px 0;    transition: transform 0.3s;}
.hp_sidebar img:hover {    transform: scale(1.1);}

/* education */
.education_overview {    margin-bottom: 20px;    padding: 15px;    background-color: #f4f4f4;    border-radius: 5px;}
.education_dropdown {    margin-bottom: 10px;}
.education_dropdown button {    width: 100%;    background: #4CAF50;    color: white;    border: none;    padding: 10px;    text-align: left;    cursor: pointer;    border-radius: 5px;    position: relative;}
.education_content {    display: none;    padding: 10px;    background-color: #e7f3fe;    border-left: 4px solid #2196F3;    border-radius: 5px;}
.arrow {    position: absolute;    right: 10px;    top: 50%;    transform: translateY(-50%) rotate(0deg);    transition: transform 0.2s;}
.open .arrow {    transform: translateY(-50%) rotate(180deg); /* Rotate to point down */}

/* sustainability */
.sustainable_main {    display: flex;    padding: 20px;}
.sustainable_content {    flex: 3;    padding-right: 20px;}
.sustainable_part {    background-color: #f4f4f4;    margin-bottom: 20px;    padding: 15px;    border-radius: 5px;}
.sustainable_sidebar {    flex: 1;    background-color: #f4f4f4;    padding: 20px;}
.sustainable_sidebar ul {    list-style-type: none;    padding: 0;}
.sustainable_sidebar li {    margin: 10px 0;}
.sustainable_sidebar a {    text-decoration: none;    color: #4CAF50;}

/* footer */
footer a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; }