* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

body {
    background: #f4f4f4;
    padding: 20px;
}

/* ===== GRID LAYOUT ===== */
.layout {
    display: grid;
    grid-template-columns: max-content 1fr; /* LEFT hugs logo width */
    grid-template-rows: max-content auto auto; /* TOP hugs logo height */
    max-width: 1200px;
    margin: auto;
    gap: 0;
    align-items: stretch;
}

.menu-btn {
    max-width: 100%;
}

/* ===== AREA STYLING ===== */
.area {
    background: #fff;
    padding: 0; /*  NO padding at all */
    border: 2px solid #d4af37;
}

    .area.logo {
        padding: 0;
    }

/* ===== SPECIFIC AREAS ===== */
/* Top-left logo area */
.logo {
    padding: 0;
    display: block;
}

    .logo img {
        display: block;
        height: 280px; /* fixed height */
        width: auto; /* proportional width */
        max-width: none; /*  CRITICAL: do NOT stretch */
        object-fit: contain;
    }

.slideshow {
    padding: 0;
}

    .slideshow img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .slideshow img {
        transition: opacity 0.6s ease-in-out;
    }

/* ===== TRUE SLIDING CAROUSEL ===== */

.slideshow {
    padding: 0;
    overflow: hidden;
}

.slider-window {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.slider-track {
    display: flex;
    height: 100%;
    transform: translateX(0);
    transition: transform 1s ease-in-out;
}

    .slider-track img {
        width: 100%;
        height: 100%;
        flex-shrink: 0;
        object-fit: cover;
    }

.accordion {
    padding: 0 0 20px 20px; /* 👈 adds bottom breathing room */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.area.accordion {
    align-self: stretch; /* ✅ fill grid row height */
    height: 100%;
}

.area.logo,
.area.accordion {
    max-width: 100%;
    overflow: hidden;
}

.accordion button {
    width: 85%;
    max-width: 260px;
    padding: 12px;
    margin: 0;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    text-align: left;
}

    /* ONLY text buttons get blue background */
    .accordion button:not(.menu-btn):hover {
        background: #125aa3;
    }

/* ===== HOME ICON ACCORDION ===== */
.home-icon {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
    padding-top: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

/* Remove gap between Home button and icon */
.home-wrapper .home-btn {
    margin-bottom: 0;
}

/* Visible state */
.home-icon.active {
    max-height: 200px; /* safely larger than icon height */
    opacity: 1;
}

.home-icon img {
    width: 100%; /* scales with container */
    height: auto; /*  proportional height */
    display: block;
    object-fit: contain; /* safety */
}

/* Default state */
.home-btn {
    background-image: url("Images/Home.png");
    padding: 0 !important;
    line-height: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

    /* Hover state */
    .home-btn:hover {
        background-image: url("Images/HomeOver.png");
    }

    /* Clicked / active state */
    .home-btn.active {
        background-image: url("Images/HomeClicked.png");
    }

/* ===== IMAGE-BASED ABOUT US BUTTON ===== */

.home-wrapper,
.about-wrapper,
.agi-wrapper,
.software-wrapper,
.webdev-wrapper {
    width: auto;
    max-width: 100%;
}

.home-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0;
    margin: 0;
    margin-top: 12px; /* adjust value as needed */
}

.about-btn {
    background-image: url("Images/AboutUs.png");
    padding: 0 !important;
    line-height: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

    /* Hover state */
    .about-btn:hover {
        background-image: url("Images/AboutUsOver.png");
    }

    /* Clicked / active state */
    .about-btn.active {
        background-image: url("Images/AboutUsClicked.png");
    }

.about-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0;
    margin: 0;
}

.about-icon {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

    .about-icon.active {
        max-height: 200px;
        opacity: 1;
    }

    .about-icon img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
    }

/* ===== IMAGE-BASED AGI BUTTON ===== */

.agi-btn {
    background-image: url("Images/AGI.png");
    padding: 0 !important;
    line-height: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

    /* Hover */
    .agi-btn:hover {
        background-image: url("Images/AGIOver.png");
    }

    /* Clicked */
    .agi-btn.active {
        background-image: url("Images/AGIClicked.png");
    }

/* Wrapper */
.agi-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0;
    margin: 0;
}

/* Icon accordion */
.agi-icon {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

    .agi-icon.active {
        max-height: 200px;
        opacity: 1;
    }

    .agi-icon img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
    }

/* ===== WEB DEV BUTTON ===== */

.webdev-btn {
    background-image: url("Images/WebMaker.png");
    padding: 0 !important;
    line-height: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

    .webdev-btn:hover {
        background-image: url("Images/WebMakerOver.png");
    }

    .webdev-btn.active {
        background-image: url("Images/WebMakerClicked.png");
    }

.webdev-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
    margin-bottom: 20px; /* adjust if you want more/less space */
}

.webdev-icon {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin: 0; /* ✅ important */
    padding: 0; /* ✅ important */
    line-height: 0; /* ✅ important */
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

    .webdev-icon.active {
        max-height: 200px;
        opacity: 1;
    }

    .webdev-icon img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
    }

.home-icon,
.about-icon,
.agi-icon,
.webdev-icon {
    width: auto;
}

/* ===== PRIVACY BUTTON ===== */
.privacy-btn {
    background-image: url("Images/PrivacyPolicy.png");
    padding: 0 !important;
    line-height: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

    .privacy-btn:hover {
        background-image: url("Images/PrivacyPolicyOver.png");
    }

    .privacy-btn.active {
        background-image: url("Images/PrivacyPolicyClicked.png");
    }

.privacy-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
    margin-bottom: 20px;
}

.privacy-icon {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

    .privacy-icon.active {
        max-height: 200px;
        opacity: 1;
    }

    .privacy-icon img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
    }

.webdev-wrapper,
.privacy-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0; /* remove extra gap */
    padding: 0;
}

/* ===== SOFTWARE BUTTON ===== */

.software-btn {
    background-image: url("Images/Software.png");
    padding: 0 !important;
    line-height: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

    .software-btn:hover {
        background-image: url("Images/SoftwareOver.png");
    }

    .software-btn.active {
        background-image: url("Images/SoftwareClicked.png");
    }

.software-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
}

/* Sub-accordion */
/* Software sub menu container */
.software-accordion {
    max-height: 0; /* ✅ collapse */
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    width: 100%;
}

    /* Open state */
    .software-accordion.active {
        max-height: 500px; /* enough for 4 buttons + icons */
        opacity: 1;
    }

/* Software sub-buttons same size as Home button */
.sub-btn {
    height: auto;
    padding: 0;
    margin: 6px 0;
    cursor: pointer;
    /* match Home button sizing */
    border: none;
    display: block;
    width: 100%;
    box-sizing: border-box;
    background-size: contain; /* important */
    background-repeat: no-repeat;
    background-position: center;
}

/* Keep each sub-button + icon as a centered vertical pair */
.sub-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center; /* centers icon under the button */
    width: 100%;
}

.menu-btn,
.sub-btn {
    background-color: transparent; /* ✅ important */
    border: none; /* remove border */
    outline: none; /* remove focus ring */
}

/* ===== SOFTWARE SUB BUTTONS ===== */
/* Audio */
.audio-btn {
    background-image: url("Images/Audio.png");
}

    .audio-btn:hover {
        background-image: url("Images/AudioOver.png");
    }

    .audio-btn.active {
        background-image: url("Images/AudioClicked.png");
    }

/* Electromagnetic */
.em-btn {
    background-image: url("Images/Electromagnetic.png");
}

    .em-btn:hover {
        background-image: url("Images/ElectromagneticOver.png");
    }

    .em-btn.active {
        background-image: url("Images/ElectromagneticClicked.png");
    }

/* Optimization */
.opt-btn {
    background-image: url("Images/Optimization.png");
}

    .opt-btn:hover {
        background-image: url("Images/OptimizationOver.png");
    }

    .opt-btn.active {
        background-image: url("Images/OptimizationClicked.png");
    }

/* Video */
.vid-btn {
    background-image: url("Images/Video.png");
}

    .vid-btn:hover {
        background-image: url("Images/VideoOver.png");
    }

    .vid-btn.active {
        background-image: url("Images/VideoClicked.png");
    }

/* Sub icons */
.sub-icon {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    width: 100%;
    /* ✅ center the icon image */
    display: flex;
    justify-content: center;
    align-items: center;
}


    .sub-icon.active {
        max-height: 200px;
        opacity: 1;
    }

    .sub-icon img {
        width: 75%;
        height: auto;
        display: block;
    }

/* ===== CONTENT ===== */
.menu-btn {
    width: auto; /* adjust if needed */
    height: auto;
    padding: 0;
    cursor: pointer;
    padding-top: 0;
    padding-bottom: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-size: cover;
}

#contentArea img {
    max-width: 100%;
    height: auto;
    display: block;
}

.content {
    font-size: 1.1rem;
    min-height: auto; /* REMOVE forced height */
}

.footer {
    grid-column: 1 / -1;
    text-align: center;
    font-size: 0.9rem;
    background: #212121;
    color: #fff;
}

/* ===== BACKGROUND FOR LEFT, RIGHT, AND BOTTOM AREAS ===== */

/* Background image for middle-left, middle-right, and bottom areas */

.area.accordion,
.area.content {
    background-image: url("Images/LeftBackground.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* Bottom area background */
/* Footer container */
.area.footer {
    display: flex;
    justify-content: center; /* center group horizontally */
    align-items: center; /* center vertically */

    width: 100%;
    min-height: 180px;
    /* background-color: white; */
    background-image: url("Images/LeftBackground.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    */
}

/* Image group (joined block) */
.footer-group {
    display: flex;
    align-items: center;
    gap: 0; /* no space */
}

/* Left image */
.footer-img-left {
    height: 100%;
    max-height: 160px; /* adjust to fit footer */
    width: auto;
    display: block;
}

/* Right image: 50% size */
.footer-img-right {
    height: 100%;
    max-height: 160px; /* half of left */
    width: auto;
    display: block;
}



/* Middle right text area formatting */
.area.content {

    /* Space from gold border */
    padding: 20px;

    /* Text formatting */
    text-align: justify;
    text-justify: inter-word;
    line-height: 1.6;
    box-sizing: border-box;
    align-self: stretch;
    height: 100%;
}

    /* Space between paragraphs */
    .area.content p {
        margin: 0 0 1.2em 0;
    }