/* colors and other vars */
:root {
    --dark-blue: #283657;
    --mid-blue: #003DA0;
    --light-blue: #3F75CD;
    --orange: #F87F1E;
    --yellow: #FCBF49;
    --beige: #EFEACF;
    --font-family--primary: "Poppins, serif";
}

/* Poppins font import from Google Fonts */

/* Poppins Thin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 100;
    src: url('fonts/Poppins/Poppins-Thin.ttf') format('truetype');
}

/* Poppins Thin Italic */
@font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 100;
    src: url('fonts/Poppins/Poppins-ThinItalic.ttf') format('truetype');
}

/* Poppins Extra-Light */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 200;
    src: url('fonts/Poppins/Poppins-ExtraLight.ttf') format('truetype');
}

/* Poppins Extra-Light Italic */
@font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 200;
    src: url('fonts/Poppins/Poppins-ExtraLightItalic.ttf') format('truetype');
}

/* Poppins Light */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    src: url('fonts/Poppins/Poppins-Light.ttf') format('truetype');
}

/* Poppins Light Italic */
@font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 300;
    src: url('fonts/Poppins/Poppins-LightItalic.ttf') format('truetype');
}

/* Poppins Regular */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/Poppins/Poppins-Regular.ttf') format('truetype');
}

/* Poppins Regular Italic */
@font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 400;
    src: url('fonts/Poppins/Poppins-Italic.ttf') format('truetype');
}

/* Poppins Medium */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    src: url('fonts/Poppins/Poppins-Medium.ttf') format('truetype');
}

/* Poppins Medium Italic */
@font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 500;
    src: url('fonts/Poppins/Poppins-MediumItalic.ttf') format('truetype');
}

/* Poppins Semi-Bold */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    src: url('fonts/Poppins/Poppins-SemiBold.ttf') format('truetype');
}

/* Poppins Semi-Bold Italic */
@font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 600;
    src: url('fonts/Poppins/Poppins-SemiBoldItalic.ttf') format('truetype');
}

/* Poppins Bold */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/Poppins/Poppins-Bold.ttf') format('truetype');
}

/* Poppins Bold Italic */
@font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 700;
    src: url('fonts/Poppins/Poppins-BoldItalic.ttf') format('truetype');
}

/* Poppins Extra-Bold */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 800;
    src: url('fonts/Poppins/Poppins-ExtraBold.ttf') format('truetype');
}

/* Poppins Extra-Bold Italic */
@font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 800;
    src: url('fonts/Poppins/Poppins-ExtraBoldItalic.ttf') format('truetype');
}

/* Poppins Black */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 900;
    src: url('fonts/Poppins/Poppins-Black.ttf') format('truetype');
}

/* Poppins Black Italic */
@font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 900;
    src: url('fonts/Poppins/Poppins-BlackItalic.ttf') format('truetype');
}

/* porting style from Yoko theme */

/************************* BODY *************************/
body {
    background-color: #FFF;
}



/************************* FONT FAMILY *************************/
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Poppins", sans-serif;
}

p,
a {
    font-family: "Poppins", sans-serif;
}



/************************* HEADINGS *************************/
/* HEADINGS - GENERAL STYLE */
h1 {
    font-size: 40px;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: -0.8px;
}

h2 {
    font-size: 32px;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: -0.64px;
}

h3 {
    font-size: 26px;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: -0.52px;
}

h4 {
    font-size: 22px;
    line-height: 1.5;
    font-weight: 500;
}

h5 {
    font-size: 20px;
    line-height: 1.3;
    font-weight: 500;
}

h6 {
    font-size: 18px;
    line-height: 1.3;
    font-weight: 500;
}

@media screen and (max-width: 768px) {
    h1 {
        font-size: 30px;
        line-height: 1.15;
        letter-spacing: -0.9px;
    }

    h2 {
        font-size: 26px;
        line-height: 1.15;
        letter-spacing: -0.78px;
    }

    h3 {
        font-size: 24px;
        line-height: 1.15;
        letter-spacing: -0.72px;
    }

    h4 {
        font-size: 22px;
        line-height: 1.2;
        letter-spacing: -0.66px;
    }

    h5 {
        font-size: 18px;
        line-height: 1.3;
        letter-spacing: -0.54px;
    }

    h6 {
        font-size: 16px;
        line-height: 1.4;
    }
}

/* HEADINGS - DARK BACKGROUND*/
.bg-dark h1,
.bg-dark h2,
.bg-dark h3,
.bg-dark h4,
.bg-dark h5,
.bg-dark h6 {
    color: #FFF;
}

/* HEADINGS - BLUE BACKGROUND*/
.bg-blue h1,
.bg-blue h2,
.bg-blue h3,
.bg-blue h4,
.bg-blue h5,
.bg-blue h6 {
    color: #FFF;
}

/************************* TEXT *************************/
p {
    color: rgba(40, 54, 87, 0.70);
    font-size: 18px;
    line-height: 1.7;
    font-weight: 500;
}

@media screen and (max-width: 768px) {
    p {
        font-size: 16px;
        line-height: 1.5;
    }
}

a {
    color: #003DA0;
    text-decoration: underline;
}

a:hover {
    color: #283657;
    text-decoration: underline;
}

/* TEXT - DARK BACKGROUND*/
.bg-dark p {
    color: rgba(255, 255, 255, 0.70);
}

.bg-dark a {
    color: #FCBF49;
}

.bg-dark a:hover {
    color: #EFEACF;
}

/* TEXT - BLUE BACKGROUND*/
.bg-blue p {
    color: rgba(255, 255, 255, 0.70);
}

.bg-blue a {
    color: #FCBF49;
}

.bg-blue a:hover {
    color: #EFEACF;
}



/*************************** BUTTONS ***************************/
button {
    text-align: center;
    border: 0;
    background-color: transparent;
    padding: 0;
}

button a {
    display: inline-block;
    border: 1.5px solid transparent;
    border-radius: 60px;
    font-size: 16px;
    font-weight: 500;
    text-align: center !important;
    text-decoration: none !important;
    line-height: 1;
    padding: 20px 24px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

button.default a {
    background-color: #003DA0;
    color: #FFF;
}

button.alternative a {
    border-color: #F87F1E;
    background-color: transparent;
    color: #003DA0;
    text-shadow: none;
}

button a:hover {
    border-color: #F87F1E;
    background-color: #F87F1E !important;
    color: #283657 !important;
}

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

    button,
    button a {
        min-width: 100%;
        width: 100%;
    }
}



/************************* SEPARATOR *************************/
hr {
    border: 0;
    height: 1px;
    background: rgba(0, 0, 0, 0.30);
    margin: 20px 0;
}



/************************* BACKGROUNDS *************************/
.bg-blue {
    background-color: #003DA0;
}

.bg-white {
    background-color: #FFF;
}

.bg-dark {
    background-color: #283657;
}



/************************* SUBMENU *************************/
.sub-menu nav {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    flex-direction: column;
    width: fit-content;
}

.sub-menu nav a {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 20px;
    color: #002D64;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.7;
    padding: 12px 16px 12px 0;
    border-bottom: 1px solid #DFE4EF;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.sub-menu nav a::after {
    content: '';
    display: block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='21' viewBox='0 0 20 21' fill='none'%3E%3Cpath d='M11.6667 4.66675L17.5 10.5001M17.5 10.5001L11.6667 16.3334M17.5 10.5001L2.5 10.5001' stroke='%23F87F1E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: center;
    width: 20px;
    height: 20px;
}

.sub-menu nav a:hover {
    padding: 12px 0 12px 0;
}

@media screen and (max-width: 768px) {
    .sub-menu nav {
        width: 100%;
    }
}



/************************* ICONS *************************/
svg {
    display: inline-block;
    width: 20px;
    stroke: #0866ff;
    stroke-width: 1px;
}

/**** END WP THEME STYLES PORT ******/

/* main site width adjustment */

.AGAauxNav #ste_container_ciUtilityNavigation,
.container,
.header-top-container,
.SliderPage1,
.body-container,
#pagetitle {
    max-width: 1208px;
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* undo past theme aux nav bg */
.AGAauxNav {
    background: transparent;
    padding-top: 0;
    font-size: unset;
    line-height: 16px;
}

.AGAauxNav a {
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    color: var(--dark-blue) !important;
    padding: 10px;
    padding-left: 30px;
}

.AGAauxNav a:hover {
    color: black !important;
}

.AGAauxNav {
    border-top: 4px var(--mid-blue) solid;
}

/* header background */
#hd>div.header-top-container>div.ClearFix.header-bottom-container {
    background: transparent;
}

#hd>div.header-top-container>div.ClearFix.header-bottom-container .rmLink {
    color: var(--dark-blue) !important;
    display: block;
    letter-spacing: normal !important;
    font-weight: 400;
    line-height: 1;
    padding: 0 18px;
    text-decoration: none;
}

/* header link hover styles */
.AGAHeaderRight .RadMenu.RadMenu_NaturalHeritageSites .rmRootGroup>.rmItem:hover {
    background: transparent;
    text-decoration: underline;
}

.RadMenu.RadMenu ul.rmHorizontal {
    float: right
}

/* Reset some Telerik defaults */
.RadMenu.RadMenu_NaturalHeritageSites {
    float: right;
    width: auto;
}

/* ---  Main Header Container --- */
/* Establishes the primary side-by-side layout */
.header-top-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 65px;
    background: #fff;
    padding: 0;
}

#masterLogoArea {
    flex-shrink: 0;
}

.header-bottom-container {
    display: flex;
    justify-content: flex-end;
    /* Pushes its content (the nav menu) to the right */
    align-items: center;
    flex-grow: 1;
    /* Allows this wrapper to grow and fill available space */
}

/* Stacks everything on smaller screens */
@media (max-width: 992px) {

    .header-top-container,
    .header-bottom-container {
        display: block;
        /* Revert back to default block behavior */
        width: 100%;
    }
}

/* override margin from previous theme iterations */
#hd>div.header-top-container>div.ClearFix.header-bottom-container {
    margin-top: 25px;
}

/* top right nav item bg */
.NavigationListItem.become-a-member a {
    background: var(--mid-blue);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 16px 24px;
    transition: 0.3s ease;
}

.NavigationListItem.become-a-member a:hover {
    background: var(--orange);
    transition: 0.3s ease;
}

.NavigationListItem.become-a-member a span {
    color: #fff;
    transition: 0.3s ease;
}

.NavigationListItem.become-a-member a:hover span,
.NavigationListItem.become-a-member a span:hover {
    color: var(--dark-blue);
    transition: 0.3s ease;
}

/* Make the main navigation container a flexbox and align its content to the right */
.UtilityNavigation {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    justify-content: flex-end;
}

/* Style the unordered list inside the navigation (no changes here) */
.UtilityNavigation .NavigationUnorderedList {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* main page bg color */
#masterContentArea {
    margin-top: 45px;
    padding: 60px 0;
    background: #F5F7F9;
    max-width: unset;
}

/* auth link icon */
a.UtilitySection.UtilityAuthenticationLink {
    background-image: url('images/user-icon.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 20px;
    transition: background-image ease 0.3s;
}

a.UtilitySection.UtilityAuthenticationLink:hover {
    background-image: url('images/user-icon-hover.svg');
    transition: background-image ease 0.3s;
}

/* overall header height */
#hd {
    /* min-height: 220px; */
}

/* footer overrides */
.footer-nav-copyright,
.footer-content {
    background-color: #fff;
    border-top: none;
}

#ste_container_FooterLinks a {
    color: var(--dark-blue) !important;
}

/* page title area */
.InternalHeaderArea {
    background: var(--mid-blue);
    overflow: unset;
    height: 125px;
    margin-top: 120px;
    /* border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    border-bottom: 60px solid var(--mid-blue); */
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), none;
    animation: none;
}

#pagetitle {
    color: #fff;
    width: 100%;
    font-size: 30px;
    font-weight: 500;
    /*    margin-bottom: 40px; */
}

#ste_container_PageTitleHTML {
    display: flex;
    align-items: center;
    height: 125px;
}

@media (max-width:991px) {
    .UtilityNavigation.nav-auxiliary .UtilityNavigationList {
        display: none;
    }

    .AGAauxNav {
        border-top: none;
    }

    .navbar-toggle {
        height: 34px;
        width: 34px;
    }

    .AGAMobileMenuTop {
        display: none;
    }

    .AGAHeaderRight .RadMenu.RadMenu_NaturalHeritageSites .rmRootGroup>.rmItem {
        display: block;
    }

    .RadMenu.RadMenu_NaturalHeritageSites,
    .rmRootGroup.rmToggleHandles.rmHorizontal {
        width: 100%;
        position: absolute;
        background: #fff;
    }

    .navbar-toggle .icon-bar {
        width: 25px;
        height: 5px;
    }

    .UtilityNavigation {
        gap: 5px;
    }

    .UtilitySection.UtilityAuthentication {
        min-width: 100px;
    }

    /* overall header height */
    /* page title area */
    .header-top-container,
    .InternalHeaderArea {
        margin-top: 10px;
    }

    #masterContentArea {
        margin-top: 450px;
    }

}


#ste_container_FooterLinks a {
    text-decoration: none;
    font-size: 22px;
}

#ste_container_FooterLinks a:hover {
    text-decoration: none;
}

#ste_container_Hr {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: transparent;
}

/* This creates the horizontal line */
#ste_container_Hr::before {
    content: '';
    flex-grow: 1;
    /* Allows the line to fill available space */
    height: 1px;
    background-color: var(--orange);
}

/* This creates the 12px box for the background image */
#ste_container_Hr::after {
    content: '';
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    background-image: url('images/separator-accent-primary-star.svg');
    background-size: contain;
}

#ste_container_AddressSocialHTML {
    padding: 50px 0px;
    text-align: left;
    font-size: 16px;
    font-weight: 400;
}

/* top nav hover styles */
#ste_container_FooterLinks a span,
.RadMenu.RadMenu_NaturalHeritageSites.MainMenu .rmText {
    padding: 15px 0;
    border-bottom: 2px solid transparent;
    transition: border-bottom ease-in 0.5s;
    position: relative;
}

#ste_container_FooterLinks li {
    padding: 10px 0px;
}

#ste_container_FooterLinks a span::after,
.RadMenu.RadMenu_NaturalHeritageSites.MainMenu .rmText::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--orange);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease-in-out;
}

#ste_container_FooterLinks a span:hover::after,
.RadMenu.RadMenu_NaturalHeritageSites.MainMenu .rmText:hover::after {
    transform: scaleX(1);
}

#ste_container_FooterLinks li a:hover,
#ste_container_FooterLinks a span:hover {
    color: var(--dark-blue) !important;
}

/* footer join CTA */
.aga-footer-become-a-member {
    background: #F5F7F9;
    text-align: left;
    padding: 50px;
    border-radius: 30px;
}

.aga-footer-become-a-member .cta-header {
    color: var(--mid-blue);
    font-size: 32px;
    letter-spacing: -0.64px;
    line-height: 1.4;
    font-weight: 400;
}

/* footer socials */
#ste_container_AddressSocialHTML ul {
    list-style: none;
    display: inline-block;
    padding-left: 0;
}

#ste_container_AddressSocialHTML li {
    float: left;
    padding: 5px;
}

#ste_container_ciFooterContent2 {
    border: none;
}

#ste_container_AddressSocialHTML svg:hover {
    transform: scale(1.1);
}

@media (max-width:991px) {
    #ste_container_AddressSocialHTML {
        text-align: center;
    }
}

/* BUTTONS */

html:not(.t-safari) .btn,
html:not(.t-safari) .TextButton,
html:not(.t-safari) .PrimaryButton,
html:not(.t-safari) .SaveAndClose,
html:not(.t-safari) .SaveAs,
html:not(.t-safari) .UsePrimaryButton .TextButton,
html:not(.t-safari) .UsePrimaryButton .TextButtonWithImage,
html:not(.t-safari) #masterHeaderActionArea a,
html:not(.t-safari) .RadGrid input.PrimaryButton,
html:not(.t-safari) .Spotlight .TextButton,
html:not(.t-safari) .BigButtonPanelArea2 .btn,
html:not(.t-safari) .RadUpload .ruButton,
html:not(.t-safari) .ruButton,
html:not(.t-safari) .ruFileInput {
    background: none !important;
    background-size: 100% 100% !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 400;
    background-color: var(--mid-blue) !important;
    border-radius: 50px !important;
    padding: 10px 20px !important;
}

html:not(.t-safari) .btn:hover,
html:not(.t-safari) .TextButton:hover,
html:not(.t-safari) .PrimaryButton:hover,
html:not(.t-safari) .SaveAndClose,
html:not(.t-safari) .SaveAs:hover,
html:not(.t-safari) .UsePrimaryButton .TextButton:hover,
html:not(.t-safari) .UsePrimaryButton .TextButtonWithImage:hover,
html:not(.t-safari) #masterHeaderActionArea a:hover,
html:not(.t-safari) .RadGrid input.PrimaryButton:hover,
html:not(.t-safari) .Spotlight .TextButton:hover,
html:not(.t-safari) .BigButtonPanelArea2 .btn:hover,
html:not(.t-safari) .RadUpload .ruButton:hover,
html:not(.t-safari) .ruButton:hover,
html:not(.t-safari) .ruFileInput:hover {
    color: #fff !important;
    background-color: var(--orange) !important;
    color: var(--dark-blue) !important;
}

.btn:hover,
.btn:focus,
.TextButton:hover,
.TextButton:focus,
.ruButton:hover,
.ruButton:focus {
    transform: none !important;
}

/* footer copyright */
.footer-nav-copyright {
    background: #F5F7F9;
    margin-top: 30px;
}

#ft {
    background-color: #fff;
}

#ste_container_ciFooterContent2,
#ste_container_FooterCopyright {
    width: 100%;
}

#ste_container_FooterCopyright {
    color: #000;
}

/* profile page header font */
.mini-profile-banner-large .mini-profile-name-section .SectionLabel,
.mini-profile-banner-small .mini-profile-name-section .SectionLabel {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
}

.account-banner:before {
    background: transparent;
    border-radius: 30px;
}

.account-banner {
    padding: 10px;
}

.RadGrid.RadGrid_MetroTouch .rgMasterTable .rgSelectedCell,
.RadGrid.RadGrid_MetroTouch .rgSelectedRow,
.RadGrid.RadGrid_MetroTouch td.rgEditRow .rgSelectedRow,
.RadGrid.RadGrid_MetroTouch .rgSelectedRow td.rgSorted,
.RadGrid.RadGrid_MetroTouch th.rgSorted,
.RadGrid.RadGrid_Metro .rgMasterTable .rgSelectedCell,
.RadGrid.RadGrid_Metro .rgSelectedRow,
.RadGrid.RadGrid_Metro td.rgEditRow .rgSelectedRow,
.RadGrid.RadGrid_Metro .rgSelectedRow td.rgSorted,
.RadGrid.RadGrid_Metro th.rgSorted,
.RadTabStrip_MetroTouch.RadTabStrip,
.RadTabStrip_MetroTouch.RadTabStripVertical .rtsUL {
    background-color: var(--dark-blue)
}


.RadTabStrip_MetroTouch .rtsLevel1 .rtsLink {
    background-color: var(--dark-blue) !important;
    border-color: var(--dark-blue) !important;
}

/* file upload buttons */
html:not(.t-safari) .TextButton.aga-button-secondary,
html:not(.t-safari) .ruButton.ruRemove.aga-button-secondary,
html:not(.t-safari) .ruButton.ruBrowse.aga-button-secondary,
html:not(.t-safari) .ruButton.ruRemove {
    border: solid var(--mid-blue) 1px;
    background: transparent !important;
    color: var(--mid-blue) !important;
}

html:not(.t-safari) .TextButton.aga-button-secondary:hover,
html:not(.t-safari) .ruButton.ruRemove.aga-button-secondary:hover,
html:not(.t-safari) .ruButton.ruBrowse.aga-button-secondary:hover,
html:not(.t-safari) .ruButton.ruRemove:hover {
    transform: none;
    border: solid var(--mid-blue) 1px !important;
    background: transparent !important;
}

/* CCO background */
html .RadTabStrip_MetroTouch.RadTabStrip {
    background-color: transparent !important;
}

/* prevent wrapping overlap on top nav */
@media (max-width:1075px) {
    #hd>div.header-top-container>div.ClearFix.header-bottom-container .rmLink {
        margin: auto 0px;
    }
}

/* --- Core Flexbox Layout (From Previous Solution) --- */
#WTZone1_Page1 {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    max-width: 1178px;
    margin-left: auto;
    margin-right: auto;
}

#ste_container_ciUtilityNavigation,
#ste_container_ciJoinLink_dc12841ea7d54d6f976f9fbdc0badb61 {
    flex-grow: 0;
    flex-shrink: 0;
}

#ste_container_ciUtilityNavigation {
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    align-items: center;
}

#ste_container_ciUtilityNavigation>div {
    display: flex;
    align-items: center;
}

/* ------------------------------------------------ */



/* --- Media Query for Mobile/Tablet Optimization --- */

@media (max-width: 768px) {
    #WTZone1_Page1 {
        flex-direction: column;
        justify-content: flex-start;
    }

    #ste_container_ciUtilityNavigation,
    #ste_container_ciJoinLink_dc12841ea7d54d6f976f9fbdc0badb61 {
        width: 100%;
        flex-basis: auto;
    }

    /* Reset padding for mobile layout (optional based on mobile design) */
    #ste_container_ciUtilityNavigation a:first-child {
        padding-left: 30px !important;
        /* Re-apply or adjust for standard mobile spacing */
    }
}

/* adjust for new header styles */
.AGAauxNav #ste_container_ciUtilityNavigation {
    margin-right: 0;
}

@media (max-width:992px) {
    #ste_container_ciJoinLink_dc12841ea7d54d6f976f9fbdc0badb61 {
        display: none !important;
    }
}

.become-a-member {
    margin-top: 10px;
}

/* myaga link icon */
.myaga a.NavigationLink {
    background-image: url('images/download.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 20px;
    transition: background-image ease 0.3s;
}

.myaga a.NavigationLink:hover {
    background-image: url('images/download-hover.svg');
    transition: background-image ease 0.3s;
}

/* cart link icon */
.aga-cart a.NavigationLink {
    background-image: url('images/cart-icon.png');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 20px;
    transition: background-image ease 0.3s;
}

.aga-cart a.NavigationLink:hover {
    background-image: url('images/cart-icon-hover.png');
    transition: background-image ease 0.3s;
}