/* Base styles - hide mobile elements on desktop */
.mobile-only {
    display: none !important;
}

.mobile-nav-row {
    display: none;
}

/* Mobile Responsive Overrides */
@media screen and (max-width: 1140px) {
    /* Show mobile elements */
    .mobile-only {
        display: inline-block !important;
    }

    .mobile-nav-row {
        display: block;
    }

    /* Style the hamburger icon in the header */
    .toggle-nav {
        font-size: 34px !important;
        color: #ffffff !important;
        text-decoration: none !important;
        padding: 10px !important;
        margin-left: 15px !important;
        display: inline-block !important;
        line-height: 1 !important;
    }

        .toggle-nav:hover {
            color: #1a5490;
        }

    /* Adjust rightLogosContainer to accommodate hamburger */
    .rightLogosContainer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        height: 100%;
    }

    /* Hide desktop navigation */
    .desktopNavContainer {
        display: none;
    }

    /* Style the mobile navigation menu */
    .nav-mobile {
        display: none;
        width: 100%;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        background-color: #f9f9f9;
    }

        .nav-mobile ul {
            list-style-type: none;
            padding: 0px !important;
            margin: 0px !important;
        }

        .nav-mobile a {
            display: block;
            padding: 15px 20px;
            border-bottom: 1px solid #ddd;
            text-align: center;
            background-color: #f9f9f9;
            color: #2774AE !important;
            text-decoration: none;
        }

            .nav-mobile a:hover {
                background-color: #e9e9e9;
            }

            .nav-mobile a:last-child {
                border-bottom: none;
            }

    /* Global adjustments */
    body, html {
        overflow-x: hidden;
    }

    h1 {
        font-size: 26px !important;
    }

    h2 {
        font-size: 22px !important;
    }

    h3 {
        font-size: 18px !important;
    }

    .mainContentContainer,
    .desktopHeaderContentContainer,
    .homeMobileSliderContainer,
    .footerInfoContainer,
    .undergradTitleContainer {
        width: 100% !important;
        padding: 0 15px;
        box-sizing: border-box;
    }

    .homeMobileSliderContainer {
        display: contents;
    }

        .homeMobileSliderContainer p {
            background-color: #FFD100;
            margin: 17.5px 0px 0px 0px;
            padding: 15px;
        }

    .row,
    .infoBoxContainer,
    .sliderRightSideContainer,
    .sliderLeftSideContainer,
    .threeonlinecourses-container,
    .img-stack,
    .ids-about-imgs-row,
    .donate-img-row,
    .handbook-row,
    .commencement-three-img-row {
        flex-direction: column !important;
        gap: 20px !important;
        align-items: center;
    }

    .programsDropdowns {
        flex-direction: column;
        gap: 20px;
    }

    .studentsItem .large-8,
    .infoBoxContainer .large-3,
    .undergradMinorsList .large-2,
    .undergradMajorsList .large-4 {
/*        width: 100% !important;
*/        padding: 15px !important;
        box-sizing: border-box;
    }

    .ames-studyabroad,
    .ames-timeline,
    .major-stack,
    .ids-honors,
    .advisor-info-card,
    .speaker-zoom-img img,
    .homeDesktopSliderContainer,
    .commencement-video,
    .handbook-row img {
        width: 100% !important;
        height: auto !important;
    }

    .giveBtnTopNav {
        display: none;
    }

    .desktopHeaderContainer {
        height: auto;
    }

    .footerStripe,
    .footer-address,
    .subtitle,
    .home-program-btn,
    .apply-here {
        text-align: center;
    }

    .dropdownGoBtnContainer,
    .twobox-abroad-row div,
    .container div {
        width: 90% !important;
        margin: 0 auto;
    }

    .container {
        flex-direction: column !important;
        align-items: center;
    }

    .accordion-head .ucla-blue {
        font-size: 20px;
    }

    .accordion-content p {
        font-size: 16px;
    }

    .plusminus {
        font-size: 28px;
    }

    .homeDesktopSliderContainer {
        display: none;
    }

    .undergradSubpages {
        display: block;
    }

    .undergradDropdownSubNavContainer {
        display: none;
    }

        .undergradDropdownSubNavContainer.show {
            display: block;
        }
}

/* Tablet / narrow laptop layout: make 1200px behave like smaller screens */
@media screen and (max-width: 1199px) {

    .mainContentContainer,
    .desktopHeaderContentContainer,
    .homeMobileSliderContainer,
    .footerInfoContainer,
    .undergradTitleContainer {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }

        .undergradTitleContainer.row,
        .mainContentContainer .row {
            width: 100% !important;
            max-width: 100% !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            box-sizing: border-box;
        }

    .homeDesktopSliderContainer {
        display: none !important;
    }

    .homeMobileSliderContainer {
        display: block !important;
    }

    .programsDropdowns,
    .infoBoxContainer {
        display: block !important;
    }

        .programsDropdowns .large-4,
        .infoBoxContainer .large-3,
        .careersWithStudiesContainer > .large-6,
        .careersWithStudiesContainer .large-3,
        .careersWithStudiesContainer .large-9,
        .studentsItem .large-4,
        .studentsItem .large-8 {
            width: 100% !important;
            float: none !important;
            display: block !important;
            padding-left: 15px !important;
            padding-right: 15px !important;
            box-sizing: border-box;
        }

    .careersWithStudiesContainer {
        width: 100% !important;
        min-height: 0 !important;
        box-sizing: border-box;
    }

        .careersWithStudiesContainer .row {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }

        .careersWithStudiesContainer img {
            max-width: 130px;
            height: auto !important;
            display: block;
            margin: 0 auto 10px auto;
        }

    .grad-group-img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .infoBoxContainer .large-3 {
        height: auto !important;
        min-height: 0 !important;
        margin-bottom: 25px;
    }

    .infoBoxContainer img {
        max-width: 200px;
        width: 80%;
        height: auto;
    }
}

/* Narrow desktop / iPad Pro landscape / 14-inch laptop range */
@media screen and (min-width: 1200px) and (max-width: 1300px) {

    .mainContentContainer,
    .desktopHeaderContentContainer,
    .footerInfoContainer,
    .undergradTitleContainer {
        width: 100% !important;
        max-width: 1240px !important;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }

        .undergradTitleContainer.row,
        .mainContentContainer .row {
            max-width: 1240px !important;
            width: 100% !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }

    .careersWithStudiesContainer > .large-6 {
        width: 50% !important;
        float: left !important;
    }

    .infoBoxContainer {
        display: flex !important;
        justify-content: space-between;
        gap: 20px;
    }

        .infoBoxContainer .large-3 {
            width: 31% !important;
            float: none !important;
            height: auto;
            min-height: 350px;
        }
}

@media screen and (max-width: 435px) {
    .logoContainer {
        height: 75%;
        width: 75%;
        margin-top: 15px;
    }

    .toggle-nav {
        font-size: 20px;
        margin-left: 10px;
    }

    i.fa-brands {
        font-size:35px !important; 
    }
}

@media screen and (max-width: 415px) {
    .rightLogosContainer {
        gap:unset !important; 
    }

}


@media screen and (min-width: 901px) and (max-width: 1300px) {

    .mainContentContainer,
    .desktopHeaderContentContainer,
    .homeMobileSliderContainer,
    .footerInfoContainer,
    .undergradTitleContainer {
        width: 100% !important;
        max-width: 1240px;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }

    .row {
        max-width: 1240px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    /*
       Undo the broad mobile stacking for tablet / laptop widths.
       Let Foundation columns behave normally again.
    */
    .row,
    .infoBoxContainer,
    .sliderRightSideContainer,
    .sliderLeftSideContainer,
    .threeonlinecourses-container,
    .img-stack,
    .ids-about-imgs-row,
    .donate-img-row,
    .handbook-row,
    .commencement-three-img-row {
        flex-direction: row !important;
        align-items: stretch;
    }

    .infoBoxContainer {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
    }

        .infoBoxContainer .large-3 {
            width: calc(33.333% - 20px) !important;
            max-width: 360px;
            height: auto;
            min-height: 350px;
        }

    .careersWithStudiesContainer {
        width: 100%;
        min-height: 0;
        box-sizing: border-box;
    }

        .careersWithStudiesContainer > .large-6 {
            width: 50% !important;
        }

    .grad-group-img {
        width: 100% !important;
        height: auto !important;
    }
}


@media screen and (max-width: 900px) {

    .mainContentContainer,
    .desktopHeaderContentContainer,
    .homeMobileSliderContainer,
    .footerInfoContainer,
    .undergradTitleContainer {
        width: 100% !important;
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }

        .undergradTitleContainer.row {
            margin-left: 0;
            margin-right: 0;
        }

    .careersWithStudiesContainer {
        min-height: 0;
    }

        .careersWithStudiesContainer > .large-6,
        .careersWithStudiesContainer .large-3,
        .careersWithStudiesContainer .large-9,
        .infoBoxContainer .large-3 {
            width: 100% !important;
            float: none !important;
            padding-left: 10px !important;
            padding-right: 10px !important;
            box-sizing: border-box;
        }

        .careersWithStudiesContainer .row {
            margin-left: 0;
            margin-right: 0;
        }

        .careersWithStudiesContainer img {
            height: auto !important;
            max-width: 120px;
            display: block;
            margin: 0 auto 10px auto;
        }

    .grad-group-img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
    }

    .infoBoxContainer {
        display: block;
    }

        .infoBoxContainer .large-3 {
            height: auto;
            min-height: 0;
            margin-bottom: 20px;
        }

        .infoBoxContainer img {
            max-width: 200px;
            width: 80%;
            height: auto;
        }
}


/* 1200px–1300px: keep desktop-style layout, but shrink it */
@media screen and (min-width: 1200px) and (max-width: 1300px) {

    /* Keep the desktop slider visible in this range */
    .homeDesktopSliderContainer {
        display: block !important;
        width: 100% !important;
        max-width: 1240px !important;
        height: 300px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box;
    }

    .homeMobileSliderContainer {
        display: none !important;
    }

    .sliderBackgroundContainer {
        width: 100% !important;
        max-width: 1240px !important;
    }

    .rsContent {
        width: 100% !important;
        max-width: 1240px !important;
    }

    /* Keep the three homepage dropdown boxes side by side */
    .programsDropdowns {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 20px !important;
        width: 100% !important;
        box-sizing: border-box;
    }

        .programsDropdowns .large-4 {
            width: calc((100% - 40px) / 3) !important;
            max-width: calc((100% - 40px) / 3) !important;
            flex: 0 0 calc((100% - 40px) / 3) !important;
            float: none !important;
            box-sizing: border-box;
        }

    /* Keep slider columns side by side */
    .homeDesktopSliderContainer .large-6,
    .sliderLeftSideContainer,
    .sliderRightSideContainer {
        width: 50% !important;
        float: left !important;
        display: block !important;
        box-sizing: border-box;
    }

    /* Prevent broad mobile row behavior from stacking this range */
    .homeDesktopSliderContainer.row,
    .exploreProgramsContainer.row,
    .undergradTitleContainer.row,
    .mainContentContainer .row {
        flex-direction: row !important;
        align-items: stretch !important;
    }
}


    /* --- OLD Mobile Responsive Overrides --- */
    /*@media screen and (max-width: 1300px) {*/
    /* Global adjustments */
    /*body, html {
        overflow-x: hidden;
    }

    h1 {
        font-size: 26px !important;
    }

    h2 {
        font-size: 22px !important;
    }

    h3 {
        font-size: 18px !important;
    }

    .mainContentContainer,
    .nav,
    .desktopHeaderContentContainer,
    .homeMobileSliderContainer,
    .footerInfoContainer,
    .undergradTitleContainer {
        width: 100% !important;
        padding: 0 15px;
        box-sizing: border-box;
    }
    .homeMobileSliderContainer {
        display: contents;
    }
        .homeMobileSliderContainer p {
            background-color: #FFD100;
            margin: 17.5px 0px 0px 0px;
            padding: 15px;
        }

    .desktopNavContainer {
        display: none;
    }*/

    /*    .nav-mobile {
        width: 500px;
        margin: 0px auto 0px auto !important;
    }
*/
    /*.nav {
        display: contents;
    }

    .row,
    .infoBoxContainer,
    .sliderRightSideContainer,
    .sliderLeftSideContainer,
    .threeonlinecourses-container,
    .img-stack,
    .ids-about-imgs-row,
    .donate-img-row,
    .handbook-row,
    .commencement-three-img-row {
        flex-direction: column !important;
        gap: 20px !important;
        align-items: center;
    }

    .nav {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 10px;
        font-size: 18px;
        gap: 10px;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }

    .nav-mobile {
        display: none;
    }
        .nav-mobile ul {
            list-style-type: none;
            padding: 0px !important;
            margin: 0px !important;
        }

        .nav a {
            display: block;
            padding: 10px 0;
            border-bottom: 1px solid #ddd;
            text-align: center;
            background-color: #f9f9f9;
            color: #2774AE !important;
        }

            .nav a:last-child {
                border-bottom: none;
            }

    .programsDropdowns {
        flex-direction: column;
        gap: 20px;
    }

    .studentsItem .large-8,
    .infoBoxContainer .large-3,
    .undergradMinorsList .large-2,
    .undergradMajorsList .large-4 {
        width: 100% !important;
        padding: 15px !important;
        box-sizing: border-box;
    }

    .ames-studyabroad,
    .ames-timeline,
    .major-stack,
    .ids-honors,
    .advisor-info-card,
    .speaker-zoom-img img,
    .homeDesktopSliderContainer,
    .commencement-video,
    .handbook-row img {
        width: 100% !important;
        height: auto !important;
    }

    .giveBtnTopNav {
        display: none;*/ /* Hide tall images/logos not suited for mobile */
    /*}

    .desktopHeaderContainer {
        height: auto;
    }

    .footerStripe,
    .footer-address,
    .subtitle,
    .home-program-btn,
    .apply-here {
        text-align: center;
    }

    .dropdownGoBtnContainer,
    .twobox-abroad-row div,
    .container div {
        width: 90% !important;
        margin: 0 auto;
    }

    .container {
        flex-direction: column !important;
        align-items: center;
    }

    .accordion-head .ucla-blue {
        font-size: 20px;
    }

    .accordion-content p {
        font-size: 16px;
    }

    .plusminus {
        font-size: 28px;
    }

    .homeDesktopSliderContainer {
        display: none;
    }
}

@media screen and (max-width: 435px) {
    .logoContainer {
        height: 75%;
        width: 75%;
        margin-top:15px;
    }
}*/


    /*old */
    /*@media screen and (max-width: 1024px) {
    .desktopNav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 0;
        margin: 0;
        list-style: none;
    }

        .desktopNav li {
            width: 45%;*/ /* two per row with spacing */
    /*margin: 5px;
            text-align: center;
        }

            .desktopNav li a {
                display: block;
                padding: 10px;
                background-color: #f9f9f9;
                color: #2774AE !important;
                border: 1px solid #ddd;
                border-radius: 4px;
            }

                .desktopNav li a:hover {
                    background-color: #e0e0e0;
                }
}*/

    /* --- Mobile Responsive Overrides --- */
    /*@media screen and (max-width: 767px) {*/
    /* Global adjustments */
    /*body, html {
        overflow-x: hidden;
    }

    h1 {
        font-size: 26px !important;
    }

    h2 {
        font-size: 22px !important;
    }

    h3 {
        font-size: 18px !important;
    }

    .mainContentContainer,
    .desktopNavContainer,
    .desktopHeaderContentContainer,
    .homeDesktopSliderContainer,
    .footerInfoContainer,
    .undergradTitleContainer {
        width: 100% !important;
        padding: 0 15px;
        box-sizing: border-box;
    }

    .row,
    .infoBoxContainer,
    .sliderRightSideContainer,
    .sliderLeftSideContainer,
    .threeonlinecourses-container,
    .img-stack,
    .ids-about-imgs-row,
    .donate-img-row,
    .handbook-row,
    .commencement-three-img-row {
        flex-direction: column !important;
        gap: 20px !important;
        align-items: center;
    }

    .desktopNav {
        display: none;
        flex-direction: column;
        align-items: stretch;
        padding: 10px;
        font-size: 18px;
        gap: 10px;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }

    .nav-toggle {
        display: block;
        background-color: #2774AE;
        color: white;
        text-align: center;
        padding: 10px;
        font-size: 20px;
        cursor: pointer;
    }

        .nav-toggle.active + .desktopNav {
            display: flex;
        }

    .desktopNav a {
        display: block;
        padding: 10px 0;
        border-bottom: 1px solid #ddd;
        text-align: center;
        background-color: #f9f9f9;
        color: #2774AE !important;
    }

        .desktopNav a:last-child {
            border-bottom: none;
        }

    .programsDropdowns {
        flex-direction: column;
        gap: 20px;
    }

    .studentsItem .large-8,
    .infoBoxContainer .large-3,
    .undergradMinorsList .large-2,
    .undergradMajorsList .large-4 {
        width: 100% !important;
        padding: 15px !important;
        box-sizing: border-box;
    }

    .ames-studyabroad,
    .ames-timeline,
    .major-stack,
    .ids-honors,
    .advisor-info-card,
    .speaker-zoom-img img,
    .homeDesktopSliderContainer,
    .commencement-video,
    .handbook-row img {
        width: 100% !important;
        height: auto !important;
    }

    .giveBtnTopNav {
        display: none;*/ /* Hide tall images/logos not suited for mobile */
    /*}

    .desktopHeaderContainer {
        height: auto;
    }

    .footerStripe,
    .footer-address,
    .subtitle,
    .home-program-btn,
    .apply-here {
        text-align: center;
    }

    .dropdownGoBtnContainer,
    .twobox-abroad-row div,
    .container div {
        width: 90% !important;
        margin: 0 auto;
    }

    .container {
        flex-direction: column !important;
        align-items: center;
    }

    .accordion-head .ucla-blue {
        font-size: 20px;
    }

    .accordion-content p {
        font-size: 16px;
    }

    .plusminus {
        font-size: 28px;
    }
}*/

    /* Hide toggle on larger screens */
    /*.nav-toggle {
    display: none;
}*/