body {
    margin-top: 100px;
}
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background-color: rgb(23, 37, 84); color: hsl(210 30% 96%);
    transition: background-color 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
    border-bottom: 1px solid ;
}
.site-header.scrolled {
    background: rgba(255,255,255,0.9);
    -webkit-backdrop-filter: saturate(150%) blur(8px);
    backdrop-filter: saturate(150%) blur(8px);
    border-color: rgba(0,0,0,0.06);
    box-shadow: var(--shadow-sm);
}

/* Editing Start here */
.about_container {
    font-family: 'DM Sans', Arial, sans-serif;
    margin: 0 0 0.5rem;
}
.about_textbox {
    text-align: center;
    padding: 50px 20px; /* Adjusted padding for mobile */
    background-color: hsl(215, 77%, 82%);
    font-size: large; /* Adjusting font size for responsiveness */
}
html.theme.dark .about_textbox {
    background-color: hsl(217.2 32.6% 17.5%);
}
#about_title {
    color: hsl(215 80% 55%);
}
.about_subtitle {
    color: hsl(217.2 32.6% 17.5%);
}
html.theme.dark .about_title {
    color: hsl(215 80% 45%);
}

.about_content-wrapper {
    display: flex;
    flex-direction: column; /* Stacks items vertically by default (mobile-first) */
    padding: 30px; /* Adjusted padding for mobile */
    gap: 30px; /* Added a gap for spacing */
}
.about_text-content {
    width: 100%; /* Takes full width on mobile */
}
.about_images-section {
    width: 100%; /* Takes full width on mobile */
    display: flex; /* Flexbox for images within the section */
    flex-direction: column; /* Stacks images vertically on mobile */
    gap: 20px; /* Spacing between images */
}

.about_image-container {
    flex: 1; /* Allows images to take up equal space */
    position: relative;
    overflow: hidden;
    height: 250px; /* Fixed height for image container */
}

.maritime-image {
    border-radius: 10px;
    width: 100%;
    height: 100%; /* Image takes 100% of container height */
    object-fit: cover; /* Ensures images fill container without distortion */
}

.about_section-title {
    color: hsl(215 80% 45%);
    font-size: xx-large; /* Adjusted font size for responsiveness */
}

.paragraph {text-align: justify;}

/* Media query for Tablets and PC */
@media (min-width: 768px) {
    .about_textbox {
        padding: 100px; /* Restores original padding on larger screens */
        font-size: larger; /* Restores original font size */
    }
    
    .about_content-wrapper {
        flex-direction: row; /* Changes to horizontal layout on larger screens */
        padding: 60px; /* Restores original padding */
        gap: 40px; /* Restores original gap */
    }
    
    .about_text-content {
        width: 50%; /* Takes 50% width on larger screens */
    }
    
    .about_images-section {
        width: 50%; /* Takes 50% width on larger screens */
        flex-direction: row; /* Changes to horizontal layout for images */
        gap: 20px;
    }

    .maritime-image {
        height: 250px;
    }
}