body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
    background-color: #F5F5DC; /* Beige background color */
}

header {
    background-color: #F5F5DC; /* Ensure the header background is the same as the body */
    padding: 20px;
    border-bottom: 1px solid #ccc;
}

.container {
    display: flex;
}

.side-panel {
    width: 15%; /* 1/5th of the screen width */
    background-color: #E3D9B0; /* Slightly darker beige */
    padding: 20px;
    text-align: left;
}

.side-panel ul {
    list-style-type: none;
    padding: 0;
}

.side-panel ul li {
    margin: 20px 0;
}

.side-panel ul li a {
    text-decoration: none;
    color: #000;
    font-weight: bold;
}

.side-panel ul li a.active {
    background-color: rgb(235, 237, 190);
    color: black;
    width: 108%;
    display: block;
    box-sizing: border-box;
    padding: 10px 20px; /* Adjust padding for the desired look */
}

.maincontent {
    width: 80%;
    padding: 20px;
}

.tabs {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}

.tab {
    padding: 10px 20px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.3s;
}

.tab.active {
    border-bottom: 4px solid black;
    font-weight: bold;
}

.line {
    border-bottom: 1px solid black;
    margin-bottom: 20px;
}

.section {
    display: none;
}

.section.active {
    display: block;
}

.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.left-box {
    width: 45%;
}

.caption-image-container {
    display: flex;
    justify-content: space-between;
    width: 54%; /* Adjust this percentage based on your requirement */
}

.caption-box {
    background-color: #e3e3e3;
    padding: 10px;
    width: 47%; /* Adjust the width based on your requirement */
    border: 1px solid #ddd;
    border-radius: 5px;
    text-align: left;
}

.BB-Image-Box {
    width: 47%; /* Adjust the width based on your requirement */
    display: flex;
    align-items: center; /* Center the image vertically */
    justify-content: center; /* Center the image horizontally */
}

.BB-Image-Box img {
    max-width: 100%;
    height: auto;
}
.video-box {
    width: 47%; /* Adjust the width based on your requirement */
    display: flex;
    align-items: center; /* Center the video vertically */
    justify-content: center; /* Center the video horizontally */
}

.video-box video {
    max-width: 100%;
    height: auto;
}

.expandable-box {
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 10px;
}

.title {
    padding: 10px;
    background-color: #e3e3e3;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}

.content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, padding 0.5s ease-out;
    padding: 0 10px; /* Add horizontal padding */
}

.content.expanded {
    max-height: 500px; /* Adjust as needed to fit content */
    padding: 10px;
}


.mechanical-description-flex-container {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* Ensure both containers stretch to the same height */
}
.mechanical-image-flex-container {
    width: 50%;
    display: flex;
    justify-content: space-between;
    align-items: center; /* Center the images vertically */
}

.assembly-left-image,
.assembly-right-image {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.assembly-left-image img,
.assembly-right-image img {
    max-width: 100%;
    max-height: 400px; /* Set a maximum height to ensure images are the same height */
    width: auto;
    height: auto;
}

.mechanical-description-textbox {
    width: 50%; /* Half the width of the main content area */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.text-box {
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    text-align: left;
    height: 100%; /* Make sure the text box takes the full height of its container */
    display: flex;
    align-items: center; /* Center the text vertically */
    flex-direction: column;
}

.mechanical-components {
    margin-top: 20px; /* Space between the description and the components section */
    
}

.component1-flexbox,
.component2-flexbox,
.component3-flexbox,
.component4-flexbox {
    display: flex;
    align-items: center; /* Center items vertically */
    margin-bottom: 20px; /* Space between component sections */
}

.component1-flexbox .comp1-image-container,
.component2-flexbox .comp2-image-container,
.component3-flexbox .comp3-image-container,
.component4-flexbox .comp4-image-container {
    width: 30%; /* Image takes 30% of the width */
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.component1-flexbox .comp1-image-container img,
.component2-flexbox .comp2-image-container img,
.component3-flexbox .comp3-image-container img,
.component4-flexbox .comp4-image-container img {
    max-width: 100%;
    max-height: 100%;
}

.component1-flexbox .comp1-text-container,
.component2-flexbox .comp2-text-container,
.component3-flexbox .comp3-text-container,
.component4-flexbox .comp4-text-container {
    width: 70%; /* Text container takes 70% of the width */
    height: 200px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 20px;
    margin-left: 20px; /* Space between image and text container */
    display: flex;
    align-items: flex-start; /* Align items at the start vertically */
    justify-content: flex-start; /* Align items at the start horizontally */
    flex-direction: column; /* Stack elements vertically */
    text-align: left;
}