/* 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: 1300px) {
    /* 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;
        }
}

@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; 
    }

}





    /* --- 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;
}*/