body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 70px 0 0 0; /* Add padding-top to account for fixed header height */
            background-color: #070707; /* Dark blue background */
            color: #E0E0E0; /* Light grey text */
        }
        header {
            background-color: #070707; /* Black background */
            color: white;
            padding: 10px 20px;
            display: flex; /* Use flexbox for header layout */
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #FFC107; /* Yellow line below header */
            position: fixed; /* Make header fixed */
            width: 100%; /* Ensure it spans full width */
            top: 0; /* Stick to the top of the viewport */
            left: 0; /* Align to the left of the viewport */
            z-index: 1001; /* Ensure header is above other content */
        }
        .header-left {
            display: flex;
            flex-direction: column;
            align-items: center; /* Center items horizontally within the column */
            background-color: #070707; /* Matches body background */
            padding: 5px 10px;
            min-width: 100px; /* Reduced width for the left box */
        }
        .header-right {
            display: flex;
            align-items: center;
            flex-grow: 1; /* Allow right box to take remaining space */
        }
        header .logo {
            font-size: 24px;
            font-weight: bold;
            color: #1E90FF; /* Dodger blue for logo */
            margin-bottom: 5px; /* Space between logo and About Us */
        }
        header .logo a {
            text-decoration: none;
            color: #1E90FF;
        }
        header nav {
            flex-grow: 1; /* Allow navigation to take space */
            background-color: #070707; /* Matches body background */
            padding: 0 10px;
        }
        header nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center; /* Center items */
            align-items: center;
            height: 100%; /* Ensure ul takes full height of nav */
        }
        header nav ul li {
            margin: 0 20px; /* Increased margin for more spacing between menu items */
        }
        header nav ul li a {
            color: white;
            text-decoration: none;
            padding: 5px 0;
            transition: color 0.3s ease;
            white-space: normal; /* Allow text to wrap within the link */
            word-wrap: break-word; /* Ensure long words break */
            line-height: 1.4;
        }
        header nav ul li a:hover {
            color: #1E90FF; /* Dodger blue on hover */
        }

        header nav ul li.active a {
            color: #1E90FF; /* Dodger blue for active state */
        }

        .search-bar {
            padding: 8px 12px;
            border: 1px solid #1E90FF; /* Dodger blue border */
            border-radius: 5px;
            background-color: #1c1c1c; /* Very dark grey for search bar */
            color: white;
            margin-right: 5px;
        }
        .search-bar::placeholder {
            color: #E0E0E0;
        }
        header > div:last-child {
            background-color: #070707; /* Matches body background */
            padding: 5px 10px;
            display: flex; /* Make it a flex container */
            justify-content: center; /* Center content horizontally */
            align-items: center; /* Center content vertically */
        }
        header button {
            background-color: transparent; /* Removed yellow background */
            color: white;
            border: none;
            padding: 5px; /* Adjusted padding to make the icon smaller */
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            font-size: 1em; /* Reduced font size for the icon */
            transition: color 0.3s ease; /* Changed transition to color */
        }
        header button:hover {
            color: #1E90FF; /* Dodger blue on hover */
            background-color: transparent; /* Ensure background remains transparent on hover */
        }
        .hero-section {
            background-color: #070707; /* Matches body background */
            padding: 60px 20px 20px 20px; /* Changed top padding to 60px, other paddings remain */
            text-align: center;
            margin-bottom: 20px;
            border-radius: 8px;
            border: none; /* Remove border */
            box-shadow: none; /* Remove box-shadow */
            color: white;
        }
        .hero-section h1 {
            color: white; /* Dodger blue for hero title */
            font-size: 3em;
            margin-bottom: 30px; /* Doubled margin-bottom for spacing before image */
        }
        .hero-section img {
            margin-top: 0; /* Adjust margin for image */
            margin-bottom: 20px; /* Adjust margin for image */
        }

        /* Hero Slider Styles */
        .hero-slider {
            position: relative;
            width: 65%; /* Set slider width to 65% of screen */
            height: 550px; /* Set height to 550px */
            margin: 0 auto 20px auto;
            border-radius: 8px;
            overflow: hidden;
        }

        .slider-track {
            display: flex;
            width: 600%; /* 6개 슬라이드 (3개 원본 + 3개 복제) */
            height: 100%;
            animation: pauseSlide 15s ease-in-out infinite; /* 15초에 한 사이클 (5초 × 3개) */
        }

        .hero-slider .slide {
            flex: 0 0 16.666%; /* 100% / 6 = 16.666% (각 슬라이드 폭) */
            height: 100%;
        }

        .hero-slider .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px;
            margin: 0;
        }

        @keyframes pauseSlide {
            /* 첫 번째 이미지 (A) - 3초 정지 */
            0% {
                transform: translateX(0);
            }
            20% {
                transform: translateX(0); /* 3초 정지 (3/15 = 20%) */
            }
            
            /* 두 번째 이미지로 슬라이드 (B) - 2초 슬라이딩 */
            33.33% {
                transform: translateX(-16.666%); /* 2초 슬라이딩 */
            }
            53.33% {
                transform: translateX(-16.666%); /* 3초 정지 */
            }
            
            /* 세 번째 이미지로 슬라이드 (C) - 2초 슬라이딩 */
            66.67% {
                transform: translateX(-33.333%); /* 2초 슬라이딩 */
            }
            86.67% {
                transform: translateX(-33.333%); /* 3초 정지 */
            }
            
            /* 첫 번째 이미지로 돌아가기 (무한 반복을 위해) - 2초 슬라이딩 */
            100% {
                transform: translateX(-50%); /* 2초 슬라이딩 */
            }
        }
        .hero-section p {
            font-size: 1.2em;
            max-width: 800px;
            margin: 20px auto 0 auto; /* Adjust margin for paragraph */
            line-height: 1.6;
        }

        /* Side Menu Styling */
        .side-menu {
            position: fixed;
            top: 70px; /* Position below the fixed header */
            left: -300px; /* Hidden by default */
            width: 280px;
            height: calc(100% - 70px); /* Adjust height to fill remaining space */
            background-color: #1a1a1a; /* Dark grey background */
            padding-top: 0; /* Remove padding-top as 'top' now handles positioning */
            box-shadow: 2px 0 5px rgba(0,0,0,0.5);
            transition: left 0.3s ease;
            z-index: 1000;
            overflow-y: auto;
            border-right: 1px solid #FFC107;
        }

        .side-menu.active {
            left: 0; /* Show menu */
        }

        .side-menu ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .side-menu ul li a {
            display: block;
            padding: 12px 20px;
            color: #E0E0E0;
            text-decoration: none;
            font-weight: normal;
            transition: background-color 0.3s ease, color 0.3s ease;
            border-bottom: 1px solid #282828; /* Separator */
            text-align: left; /* Ensure left alignment */
        }

        .side-menu ul li a:hover {
            background-color: #282828;
            color: #1E90FF;
        }

        .side-menu ul li.submenu-item {
            padding-left: 30px; /* Indent for sub-items */
        }

        .side-menu ul li.executive-item {
            padding-left: 45px; /* Further indent for executive items */
        }
        
        .side-menu .close-btn {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 30px;
            color: #E0E0E0;
            cursor: pointer;
            background: none;
            border: none;
            line-height: 1;
        }

        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            z-index: 999;
            display: none; /* Hidden by default */
        }

        /* Adjust main content when side menu is active - for larger screens */
        @media (min-width: 769px) {
            body.menu-open main {
                margin-left: 280px; /* Shift main content when menu is open */
                transition: margin-left 0.3s ease;
            }
        }


        /* Mobile responsiveness */
        @media (max-width: 768px) {
            header {
                flex-direction: column;
                align-items: center;
                padding: 10px;
            }

            .header-left {
                min-width: unset; /* Remove fixed min-width */
                width: 100%;
                border-right: none;
                align-items: center;
                padding-bottom: 10px;
                border-bottom: 1px solid #FFC107; /* Yellow line below left box */
            }

            .header-right {
                flex-direction: column;
                width: 100%;
                flex-grow: unset; /* Remove flex-grow */
            }

            header nav {
                width: 100%;
                border-right: none;
                padding: 10px 0;
                border-bottom: 1px solid #FFC107; /* Yellow line below nav */
            }

            header nav ul {
                flex-direction: column; /* Stack navigation items vertically */
            }

            header nav ul li {
                margin: 5px 0; /* Add vertical margin for stacked items */
            }

            header > div:last-child {
                width: 100%;
                padding-top: 10px;
                background-color: #070707; /* Ensure background consistency */
            }

            .search-bar {
                width: calc(100% - 20px); /* Adjust width to fit padding */
            }
        }

        header .header-left div {
            /* background-color: #070707; */
            /* text-align: center; */
            padding: 5px 10px;
        }
        header .header-left div a {
            color: white; /* Default color for About Us link */
            text-decoration: none;
            font-weight: normal; /* Make font weight consistent with other nav items */
            transition: color 0.3s ease;
            padding: 5px 0;
        }
        header .header-left div a:hover {
            color: #1E90FF; /* Dodger blue on hover */
        }

        header .header-left div a.active {
            color: #1E90FF; /* Dodger blue for active state */
        }

/* About Us Page Specific Styling */
.about-container {
    display: flex;
    min-height: calc(100vh - 70px - 80px); /* viewport height - header height - footer height */
}

.left-side-container {
    width: 290px; /* Increased width by 10px */
    background-color: #070707; /* Dark grey background */
    padding-top: 120px; /* Increased top padding to 120px to avoid header overlap */
    padding-bottom: 20px; /* Add bottom padding */
    border-right: none; /* Remove right border */
    overflow-y: auto;
    flex-shrink: 0; /* Prevent shrinking */
    opacity: 0; /* Start hidden for slide-down animation */
    transform: translateY(20px); /* Start below and slide up to normal position */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Decreased transition duration by 1 second */
}

/* Specific animation duration for the About Us page */
body.about-page-animation .left-side-container,
body.about-page-animation .about-content .content-item {
    transition: opacity 1.5s ease-out, transform 1.5s ease-out; /* Decreased transition duration by 1 second */
}

.left-side-container.loaded {
    opacity: 1;
    transform: translateY(0);
}

.left-side-container ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.left-side-container ul li a {
    display: block;
    padding: 12px 20px;
    color: #E0E0E0;
    text-decoration: none;
    font-weight: normal;
    transition: background-color 0.3s ease, color 0.3s ease;
    border-bottom: 1px solid #282828; /* Separator */
    text-align: left; /* Ensure left alignment */
}

/* Consistent styling for all menu items */
.left-side-container ul li a:hover,
.left-side-container ul li a.active {
    background-color: #1c1c1c;
    color: #1E90FF;
}

/* Ensure submenu items have consistent spacing */
.left-side-container ul li ul li a {
    padding-left: 40px; /* Indent submenu items more */
}

/* Additional styling for submenu items */
.left-side-container ul li.submenu-item a {
    padding-left: 40px; /* Consistent indentation for all submenu items */
    font-size: 0.9em; /* Slightly smaller font for submenu items */
}

/* Additional styling for executive sub-submenu items */
.left-side-container ul li.executive-item a {
    padding-left: 60px; /* Even more indentation for executive items */
    font-size: 0.85em; /* Smaller font for nested executive items */
}

.left-side-container ul li.submenu-item {
    padding-left: 20px; /* Adjust to match main item padding */
}

.left-side-container ul li.executive-item {
    padding-left: 40px; /* Adjust to match previous level indentation */
    color: #E0E0E0; /* Ensure text color is light grey */
    margin-bottom: 20px; /* Add margin-bottom for spacing */
}
.left-side-container ul li.executive-item:last-child {
    margin-bottom: 0; /* Remove margin-bottom from the last item */
}

.about-content {
    flex-grow: 1;
    padding: 80px 150px 20px 150px; /* Increased top padding to 80px to avoid header overlap */
    background-color: #070707; /* Matches body background */
    overflow-x: auto; /* Add horizontal scroll if content overflows */
}

.about-content p {
    padding-left: 100px; /* Add left padding to paragraphs */
    padding-right: 100px; /* Add right padding to paragraphs */
    font-size: 1.1em; /* Increased font size for paragraphs */
    line-height: 2em; /* Doubled line spacing */
}

.about-content section {
    margin-bottom: 40px;
    padding: 30px;
    background-color: #070707; /* Lighter black for sections */
    border: none; /* Removed yellow border */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.about-content h2 {
    color: #1E90FF; /* Dodger blue for section titles */
    border-bottom: 2px solid #FFC107; /* Yellow line below section titles */
    padding-bottom: 10px;
    margin-bottom: 25px;
    font-size: 2em;
}

.about-content h3 {
    color: #1E90FF; /* Dodger blue for sub section titles */
    border-bottom: 2px solid #FFC107; /* Yellow line below sub section titles */
    padding-bottom: 10px;
    margin-bottom: 25px;
    font-size: 1.8em; /* Slightly smaller than h2 */
    font-weight: bold;
}

.about-content h4 {
    color: #1E90FF; /* Dodger blue for sub-sub section titles */
    border-bottom: 2px solid #FFC107; /* Yellow line below sub-sub section titles */
    padding-bottom: 10px;
    margin-bottom: 25px;
    font-size: 1.5em; /* Slightly smaller than h2 but still prominent */
    font-weight: bold;
}

.about-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.about-content section ul li {
    margin-bottom: 40px; /* Increased margin-bottom to 40px for list items */
    padding-left: 20px;
    position: relative;
    line-height: 1.6; /* Added line-height for better readability */
}

.about-content ul li::before {
    content: '•';
    color: #FFC107; /* Yellow bullet points */
    position: absolute;
    left: 0;
}

.about-content #oilbi-at-a-glance img {
    width: 60%; /* Set image width to 60% for this specific section */
}

.about-content img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 60%; /* Adjusted to 60% of the width */
    height: auto; /* Maintain aspect ratio */
    margin-top: 20px; /* Re-apply margin-top */
    border-radius: 8px; /* Re-apply border-radius */
}

.about-content section:not(.content-item) {
    display: none; /* Hide all content sections by default */
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 1.5s ease-out, transform 1.5s ease-out; /* Decreased transition duration by 1 second */
}

/* Hide all content items by default - consistent with sidebar animation */
.about-content .content-item {
    display: none;
    opacity: 0;
    transform: translateY(20px); /* Start below and slide up, consistent with sidebar */
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
    margin-top: 0; /* Ensure consistent top positioning for all sections */
    padding-top: 0; /* Remove any top padding */
}

.about-content section.active-content, .about-content div.active-content {
    display: block; /* Show active content section */
}

.about-content .content-item.loaded {
    opacity: 1;
    transform: translateY(0);
}

/* Removed unused active-parent-container rules for consistency */

.about-content #block-3r-papa-field,
.about-content #block-2r {
    width: 90%; /* Set width to 90% */
    margin: 20px auto; /* Center the blocks and add vertical margin */
}

/* Removed unused -details rules for consistency */

/* Styling for main content sections on index.html to enable slide-down animation */
main > section, .hero-section {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 1.5s ease-out, transform 1.5s ease-out; /* Decreased transition duration by 1 second */
}

main > section.loaded, .hero-section.loaded {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile responsiveness for about page */
@media (max-width: 768px) {
    .about-container {
        flex-direction: column;
    }

    .left-side-container {
        width: 100%;
        height: auto; /* Allow height to adjust */
        border-right: none;
        border-bottom: 1px solid #FFC107; /* Yellow line below side menu */
        padding-bottom: 10px;
    }

    .left-side-container ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .left-side-container ul li {
        margin: 5px 10px;
    }

    .left-side-container ul li a {
        border-bottom: none;
    }

    .about-content {
        padding: 10px;
    }
}

footer {
    background-color: #070707; /* Dark blue background */
    color: white;
    text-align: center;
    padding: 20px;
    margin-top: 0; /* Remove top margin from footer */
    border-top: 1px solid #FFC107; /* Yellow line above footer */
}

/* Removed duplicate active-parent-container rule */