/* Font Imports */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');

/* CSS Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    font-size: 16px;
}

body {
    background-color: #f0f0f0;
    font-family: 'Mulish', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-image: url('../images/seamless-paper.png');
    background-repeat: repeat;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    color: inherit;
}

ul, ol {
    list-style: none;
}

/* Main Tag Styles */
h1, h2, h3, h4 {
    font-family: 'Crimson Pro', sans-serif;
    font-weight: normal;
    color: #2B3C73;
    font-weight: 300;
}

h1 {
    position: relative;
    z-index: 2;
    font-size: clamp(2.8rem, 8vw, 5.4rem);
    line-height: 0.83;
    text-align: center;
    letter-spacing: -3px;
    margin-bottom: 0.8rem;
    
}

h2 {
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    line-height: 0.9;
    text-align: left;
    margin-bottom: 1rem;
    letter-spacing: -2px;
}

h2.hidden {
    position: absolute;
    left: -999999px;
}

h3 {
    font-size: clamp(1.8rem, 3vw, 2.1rem);
    line-height: 0.9;
    letter-spacing: -2px;
    text-align: center;
}

h4 {
    font-size: clamp(2rem, 3vw, 2.3rem);
    line-height: 0.9;
    text-align: center;
    padding: 1.3rem 0 2rem 0;
    letter-spacing: -2px;
}

/* Consent Banner */
#CybotCookiebotDialogHeader {
    display: none !important;
}
#CybotCookiebotDialogPoweredbyCybot {
    display: none !important;
}
#CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyEdgeMoreDetails a {
    color: #ffffff !important;
}
#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink.CybotCookiebotDialogActive {
    color: #77b8f9 !important;
}
#CybotCookiebotDialog *, #CybotCookiebotDialogBodyUnderlay * {
    text-align: left;
}

/* Navigation Styles */
nav {
    position: fixed;
    top: 0;
    z-index: 100;
    width: 100%;
    font-size: 1.1rem;
    font-weight: 800;
    padding: 1.5rem 0;
    color: #2B3C73;
    background-color: transparent;
    transition: background-color 0.2s ease;
}

nav.sticky {
    background-color: hsla(0, 0%, 100%, 0.95);
    padding: 0.5rem 0 0.3rem 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
}

body.no-scroll nav.sticky {
    background-color: #ffffff !important;
    z-index: 999 !important;
    position: fixed !important;
    top: 0;
    width: 100%;
}

.navInnerWrapper {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start; /* Changed from space-between to flex-start */
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: auto;
}

.logo {
    width: 100%;
    min-width: 150px;
    max-width: 200px;
    fill: #2B3C73;
    stroke: #2B3C73;
}

.logo .st0, .menu .st0 {
    fill: #2B3C73;
}

nav #mountain-shadow .st1 {
    fill: #ffffff;
}

.menu {
    display: none;
    width: 30px;
    height: 30px;
    margin-left: 1.2vw;
    cursor: pointer;
    transition: all 0.2s;
}

.mainNav {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: center;
    justify-content: flex-end;
    width: auto;
    max-width: 1920px;
    margin-left: auto;
}
.mainNav .lightDark svg {
    color: #fff;
    height: auto;
    width: 30px;
    cursor: pointer;
    transition: all 0.2s;
}
.mainNav .lightDark svg:hover {
    scale: 112%;
}
.mainNav .lightDark.lightMode svg {
    fill: #016AD4;
}
body.dark-mode .mainNav .lightDark.darkMode svg {
    fill: yellow;
}

.mainNav a.textLink {
    display: inline-block;
    transition: all 0.3s;
    padding: 10px;
}

.mainNav a.textLink:hover, .menu:hover {
    scale: 115%;
}

.buttonNav {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: center;
    justify-content: flex-end;
    padding: 7px;
    margin-left: 2.2rem;
    border-radius: 12px;
}

.buttonNav .linkButtonPrimary, .buttonNav .linkButtonSecondary {
    font-size: 1rem;
    padding: 0.7rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.buttonNav li {
    margin-left: 0.6rem;
}

.mainNav li {
    margin-left: 1.5vw;
}

@media screen and (max-width: 1230px) {
    nav .navInnerWrapper {
        padding-left: 3vw;
        padding-right: 3vw;
    }
}

@media screen and (max-width: 1100px) {
    nav .navHide {
        display: none;
    }
}

@media screen and (max-width: 960px) {
    .menu {
        display: block;
    }
    .mainNav, .buttonNav {
        display: none;
    }
    nav {
        justify-content: flex-end;
    }
    nav .navInnerWrapper {
        padding-left: 5vw;
        padding-right: 5vw;
    }
    .logo {
        margin-right: auto;
        margin-left: auto;
    }
}

@media screen and (max-width: 520px) {
    .logo {
        max-width: 180px;
    }
    .menu {
        margin-top: -4px;
        width: 30px;
        height: 30px;
    }
}

/* --- Mobile Overlay Menu Styles --- */

.overlay-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%; /* Adjust width as needed */
    max-width: none; /* Optional max width */
    height: 100%;
    background-color: #2B3C73;
    z-index: 1100; /* Higher than main nav */
    transform: translateX(100%);
    transition: transform 0.4s ease-in-out;
    overflow-y: none; /* Allow scrolling if content overflows */
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Keep items left-aligned within the menu */
    box-shadow: -5px 0px 15px rgba(0,0,0,0.2);
}

.extraPaddingTop {
    margin-top: 2vh;
}

/* Slide-in state */
.overlay-menu.visible {
    transform: translateX(0);
}

/* Close Button */
.close-menu {
    font-family: 'Mulish', sans-serif;
    position: absolute;
    top: 0.85rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 3.5rem; /* Make it easily tappable */
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    padding: 0.5rem; /* Increase tap area */
    z-index: 1110;
}

/* Logo inside Overlay */
.overlay-menu .overlay-logo {
    position: relative;
    z-index: 2;
    display: block; /* Ensure it takes block space */
    width: 100%;
    max-width: 180px; /* Adjust size as needed */
    margin-bottom: 2rem; /* Space below logo */
}
.overlay-menu .overlay-logo .st0 {
    fill: #fff;
}
.overlay-menu .overlay-logo .st1 { /* Style for mountain shadow if needed */
    fill: transparent;
}

/* Links List */
.overlay-nav-links {
    position: relative;
    z-index: 2;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.overlay-nav-links li {
    width: 100%;
}
.overlay-nav-links li:last-child {
    border-bottom: none;
}

/* Individual Links */
.overlay-nav-links li a {
    display: block; /* Make whole area clickable */
    padding: 0.8rem 0; /* Vertical padding */
    color: #fff;
    text-decoration: none;
    font-size: 1.2rem; /* Adjust as needed */
    font-weight: 800;
    text-align: center;
    transition: background-color 0.2s ease;
}

.overlay-nav-links li a:hover,
.overlay-nav-links li a:focus {
    background-color: rgba(255, 255, 255, 0.1); /* Subtle hover effect */
}

/* Button Links Styling in Overlay */
.overlay-nav-links li a.overlay-button {
    display: block; 
    text-align: center;
    margin-top: 1rem; /* Space above buttons */
    padding: 0.9rem 1rem; 
    border-radius: 8px;
    font-weight: 900;
    width: auto;
    max-width: 250px; 
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.5rem; /* Space below button */
    transition: all 0.2s;
}
.overlay-nav-links li a.linkButtonPrimary {
     background-color: #9d3aaf; /* Keep original colors */
     color: #fff;
     border: none; /* Remove potential inherited border */
}
.overlay-nav-links li a.linkButtonSecondary {
     background-color: #016AD4;
     color: #fff;
     border: none;
}

/* Prevent body scroll when overlay is active */
body.overlay-active {
    overflow: hidden;
}

.mobileMenuMountains {
    position: absolute;
    z-index: 1;
    bottom: -2rem;
    left: 0;
    width: 100%;
    height: 28vh;
    margin-top: auto;
    background-image: url('../images/seamless-mountains-withaimee-white.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    opacity: 0.3;
}

/* Ensure menu trigger is visible only on mobile (redundant if already in place) */
/* Hide overlay menu on desktop */
@media screen and (min-width: 961px) {
    .overlay-menu {
        /* Ensure it's hidden on desktop even if JS adds class */
        transform: translateX(100%) !important; /* Use right value */
        visibility: hidden; /* Add visibility for robustness */
    }
     body.overlay-active {
         /* Ensure body scroll isn't locked on desktop */
        overflow: auto !important;
    }
}

/* Dark mode considerations */
@media (prefers-color-scheme: dark) {
    .overlay-menu .overlay-logo .st0 {
         /* Ensure logo is still white */
        fill: #fff;
    }
}

p, .mainSection li {
    font-size: clamp(1.1rem, 2vw, 1.2rem);
    line-height: 1.2;
    color: #444444;
    font-weight: 500;
    margin-bottom: 2rem;
}

main {
    position: relative;
    z-index: 1; 
    margin-top: 0;
    padding: 0;
}

main ul {
    list-style-type: disc;
    margin-left: 2rem;
}


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

    main {
        padding: 0 1.3rem;
    }


}

figcaption {
    margin-top: 25px;
    font-family: 'Mulish', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1.2rem;
    color: #444444;
    letter-spacing: 0;
}

.ctaButton {
    display: inline-block;
    padding: 1.1rem 1.3rem;
    border-radius: 8px;
    font-weight: 900;
    text-align: center;
    line-height: 1;
    transition: all 0.2s;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

.linkButtonPrimary {
    background-color: #9d3aaf;
    color: #fff;
}
.linkButtonSecondary {
    background-color: #016AD4;
    color: #fff;
}
.linkButtonTertiary {
    background-color: #ffffff;
    color: #2B3C73 !important;
}
.linkButtonTertiary:hover {
    background-color: #ffffff !important;
}

.linkButtonHollowWhite {
    background-color: transparent;
    color: #fff;
    border: solid 3px #fff;
    margin-left: 1vw;
}
.linkButtonWhite {
    background-color: #fff;
    color: #2B3C73;
    margin-left: 1vw;
}
.linkButtonPrimary:hover, .linkButtonSecondary:hover, .linkButtonTertiary:hover, .linkButtonHollowWhite:hover, .linkButtonWhite:hover {
    scale: 104%;
}

.noMarginRight {
    margin-right: 0 !important;
}

.noMarginBottom {
    margin-bottom: 0 !important;
}

.noMarginLeft {
    margin-left: 0 !important;
}

.noMarginTop {
    margin-top: 0 !important;
}

/* Page Styles */
.responsive {
    width: 100%;
    height: auto;
}

.hero {
    position: relative;
    display: flex;
    overflow-x: hidden;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
    min-height: 850px;
    height: auto;
    width: 100%;
    margin-top: 0;
    padding-top: 16vh;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.0) 0%, rgba(115, 168, 212, 0.691) 100%);
}

.hero.bannerPaddingAdjustment {
    padding-top: 19vh;
}

.announcement-banner {
  background-color: #2B3C73;
  padding: 12px 20px;
  text-align: center;
  margin-top: -1.5rem;
  margin-bottom: 1rem;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  z-index: 1050;
  border-bottom: 1px solid #d1e0ff;
}

.announcement-banner__content {
  flex-grow: 1; 
  margin-right: 15px;
}

.announcement-banner__content p {
  margin: 0; 
  font-size: 0.95rem;
  color: #fff !important; 
  line-height: 1.4;
}

.announcement-banner__close-button {
  background: none;
  border: none;
  color: #fff !important;
  font-size: 1.8rem; 
  font-weight: bold;
  cursor: pointer;
  padding: 0 5px;
  line-height: 1; 
  opacity: 0.7;
  transition: opacity 0.2s ease-in-out;
}

.announcement-banner a, .announcement-banner a:visited {
    color: #9fcfff !important;
    font-weight: 800 !important;
}

.announcement-banner__close-button:hover {
  color: #000;
  opacity: 1;
}

nav.sticky .announcement-banner {
    display: none;
}

.banner-hidden {
  display: none !important;
}

@media screen and (max-height: 900px) { 
    .hero {
        padding-top: 10rem;
    }
    .hero.bannerPaddingAdjustment {
        padding-top: 13rem;
    }
}
@media screen and (max-height: 844px) {
    .hero {
        padding-top: 7.7rem;
    }
    .hero.bannerPaddingAdjustment {
        padding-top: 10.7rem;
    }
}
@media screen and (max-height: 800px) {
    .hero {
        padding-top: 8.5rem;
    }
    .hero.bannerPaddingAdjustment {
        padding-top: 11.5rem;
    }
}

.mgtMountains {
    position: relative;
    z-index: 2;
    bottom: 0;
    width: 100%;
    height: auto;
    margin-top: auto;
}

.lightMode {
    display: block !important; 
}

.darkMode {
    display: none !important;
}

.hero p {
    position: relative;
    z-index: 2;
    font-size: clamp(1.1rem, 3vw, 1.3rem);
    width: 100%;
    font-weight: 500;
    max-width: 900px;
    color: #444;
    text-align: center;
    margin: 0.4rem 0 0 0;
    padding: 0 5vw;
}

.darkModeTagline {
    display: none;
}

.callToActionArea {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    padding: 1.5rem 1rem 1rem 1rem;
    margin: 1rem auto;
}

.callToActionArea .ctaButton {
    font-size: 1.2rem;
    padding-left: 3.7rem;
    padding-right: 3.7rem;
    width: 100%;
    min-width: 330px;
}

.twoButtonWrapper {
    position: relative;
    z-index: 2;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    background-color: hsla(0, 0%, 100%, 0.5);
    padding: 1.3rem;
    border-radius: 12px; 
    box-shadow: 0px 0px 25px 5px rgba(0,0,0,0.12);
}

.twoButtonWrapper a {
    margin-right: 1.3rem;
}

.auroraLeft {
    position: absolute;
    z-index: 1;
    background-image: url('../images/aurora-large.webp');
    background-repeat: no-repeat;
    background-size: contain;
    left: 4%;
    bottom: 27vh;
    width: 600px;
    height: 800px;
    opacity: 0;
    will-change: transform, opacity;
    transform: translateY(-10px) rotate(-5deg) scale(0.95);
    animation:
        fadeInLeft 1.8s ease-out forwards 0.5s,
        opacity-pulse-left 5s infinite alternate ease-in-out 2.3s,
        auroraLeftTransform 11s infinite alternate ease-in-out 2.3s;
}

@keyframes fadeInLeft {
    to {
        opacity: 0.1;
    }
}

@keyframes opacity-pulse-left {
    from {
        opacity: 0.1;
    }
    to {
        opacity: 0.3;
    }
}

@keyframes auroraLeftTransform {
    0% {
        transform: translateY(-10px) rotate(-5deg) scale(0.95);
    }
    100% {
        transform: translateY(10px) rotate(5deg) scale(1.10);
    }
}

.auroraRight {
    position: absolute;
    z-index: 1;
    right: 6%;
    bottom: 24vh;
    background-image: url('../images/aurora-small.webp');
    background-repeat: no-repeat;
    background-size: contain;
    width: 500px;
    height: 700px;
    opacity: 0;
    will-change: transform, opacity;
    transform: translateY(10px) rotate(5deg) scale(0.9);
    animation:
        fadeIn 1.8s ease-out forwards 0.5s,
        opacity-pulse-right 6s infinite alternate ease-in-out 2.3s,
        auroraRightTransform 12s infinite alternate ease-in-out 2.3s;
}

@keyframes fadeIn {
    to {
        opacity: 0.1;
    }
}

@keyframes opacity-pulse-right {
    from {
        opacity: 0.1;
    }
    to {
        opacity: 0.3;
    }
}

@keyframes auroraRightTransform {
    0% {
        transform: translateY(10px) rotate(5deg) scale(0.9);
    }
    100% {
        transform: translateY(-10px) rotate(-5deg) scale(1.15);
    }
}

@media screen and (max-width: 1076px) {
    .auroraRight {
        display: none;
    }
}
@media screen and (max-width: 768px) {
    .callToActionArea {
        max-width: 100%;
    }
    .twoButtonWrapper {
        width: 80%;
        flex-flow: column nowrap;
    }
    .auroraLeft {
        bottom: 16vh;
    }
    .callToActionArea .ctaButton {
        display: block;
        width: 100%;
        margin-right: 0;
        margin-bottom: 1.3rem;
        min-width: 0;
    }
    .twoButtonWrapper a:last-child {
        margin-bottom: 0;
    }
    .mgtMountains {
        width: 150%;
    }
}

@media screen and (max-width: 515px) {
    .mgtMountains {
        width: 240%;
    }
    .twoButtonWrapper {
        width: 95%;
    }
}

:root {
    --color-text: navy;
    --color-bg: papayawhip;
    --color-bg-accent: transparent;
    --size: clamp(10rem, 1rem + 40vmin, 15rem);
    --longsize: clamp(
        calc(10rem * 1.45),            /* Increase min value by 15% */
        calc((1rem + 40vmin) * 1.45),  /* Increase preferred value by 15% */
        calc(15rem * 1.45)             /* Increase max value by 15% */
    );
    --shortsize: clamp(
        calc(10rem * 0.65),            /* Decrease min value to 65% */
        calc((1rem + 40vmin) * 0.65),  /* Decrease preferred value to 65% */
        calc(15rem * 0.65)             /* Decrease max value to 65% */
    );
    --gap: calc(var(--longsize) / 4);
    --duration: 55s;
    --scroll-start: 0;
    --scroll-end: calc(-100% - var(--gap));
    }

    @media (prefers-color-scheme: dark) {
    :root {
        --color-text: papayawhip;
        --color-bg: navy;
        --color-bg-accent: transparent;
    }
    }
    .marquee {
        display: flex;
        overflow: hidden;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        padding: 0;
        gap: var(--gap);
        -webkit-mask-image: linear-gradient(
            var(--mask-direction, to right),
            hsl(0 0% 0% / 0),
            hsl(0 0% 0% / 1) 20%,
            hsl(0 0% 0% / 1) 80%,
            hsl(0 0% 0% / 0)
        );
        mask-image: linear-gradient(
            var(--mask-direction, to right),
            hsl(0 0% 0% / 0),
            hsl(0 0% 0% / 1) 20%,
            hsl(0 0% 0% / 1) 80%,
            hsl(0 0% 0% / 0)
        );
    }

    .marquee__group {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: space-around;
        gap: var(--gap);
        min-width: 100%;
        margin-left: -30px;
        animation: scroll-x var(--duration) linear infinite;
    }

    .marquee .xxsmall { max-height:40px; }
    .marquee .xsmall { max-height:50px; }
    .marquee .small { max-height:60px; }
    .marquee .medium { max-height:70px; } 
    .marquee .large { max-height:80px; }
    .marquee .xlong { width: var(--longsize); }
    .marquee .xshort { width: var(--shortsize); }
    .marquee .lastLogo { margin-right:35px; }

    @media (prefers-reduced-motion: reduce) {
    .marquee__group {
        animation-play-state: paused;
    }
    }

    .marquee--vertical {
    --mask-direction: to bottom;
    }

    .marquee--vertical,
    .marquee--vertical .marquee__group {
    flex-direction: column;
    }

    .marquee--vertical .marquee__group {
    animation-name: scroll-y;
    }

    .marquee--reverse .marquee__group {
    animation-direction: reverse;
    animation-delay: -3s;
    }

    @keyframes scroll-x {
    from {
        transform: translateX(var(--scroll-start));
    }
    to {
        transform: translateX(var(--scroll-end));
    }
    }

    @keyframes scroll-y {
    from {
        transform: translateY(var(--scroll-start));
    }
    to {
        transform: translateY(var(--scroll-end));
    }
    }

    /* Element styles */
    .marquee img {
        display: grid;
        place-items: center;
        width: var(--size);
        fill: var(--color-text);
        background: var(--color-bg-accent);
        aspect-ratio: 16/9;
        padding: calc(var(--size) / 100);
        border-radius: 0.5rem;
    }

    /* Parent wrapper */
    .wrapper {
        display: flex;
        flex-direction: column;
        gap: var(--gap);
        margin: auto;
        max-width: 100vw;
        margin-top: auto;   
        margin-bottom: 0;
        padding-bottom: 20px;
    }

    .wrapper--vertical {
        flex-direction: row;
        height: 100vh;
    }

    @keyframes fade {
    to {
        opacity: 0;
        visibility: hidden;
    }
 }

 @media screen and (max-width: 515px) {
    .marquee img {
        max-height: 60% !important;
    }
 }

.partnerTestimonials {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    margin: 5rem 0 6vh 0;
    padding: 0 8vw;
}

.quoteButton {
    width: 85px;
    transition: all 0.2s;
    cursor: pointer;
}
.quoteButton svg .cls-1 {
    fill: #2B3C73;
}

.quoteButton:hover {
    scale: 112%;
}
.quoteButton:hover svg .cls-1 {
    fill: #016AD4;
    stroke: none;
}

.leftChevron {
    margin-right: 3vw;
}

.rightChevron {
    margin-left: 3vw;
}

.currentTestimonial {
    position: relative;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 845px;
    min-height: 290px;
    font-family: 'Crimson Pro', serif;
    font-weight: 300;
    line-height: 1;
    color: #2B3C73;
    letter-spacing: -1px;
    font-size: clamp(1.7rem, 3vw, 2.1rem);
    text-align: center;
    padding: 4rem 2.4rem 2.4rem 2.4rem;
    border-radius: 12px;
    background-color: #fff; 
    box-shadow: 0px 0px 25px 5px rgba(0,0,0,0.08);
}

.testimonial-fade {
    transition: opacity 0.5s ease-in-out;
}

.testimonial-fade.out {
    opacity: 0;
}

.testimonialText,
.testimonialAuthor,
.testimonialCompany {
    opacity: 1; /* Default opacity */
}

.circleIcon {
    position: absolute;
    top: -40px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    font-family: Georgia, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 8rem;
    vertical-align: baseline;
    color: #ffffff;
    background-color: #2B3C73;
}

.circleIcon span {
    display: inline-block;
    margin-bottom: -76%;
}

figcaption span {
    display: block;
}

figcaption .testimonialAuthor, figcaption .testimonialCompany {
    font-size: clamp(1rem, 3vw, 1.3rem);
    font-style: normal;
    font-weight: 400;
    line-height: 1.3;
}

figcaption .testimonialCompany {
    font-style: italic;
}

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

    .quoteButton {
        display: none;
    }

}

.mainSection {
    width: 100%;
    max-width: 1100px;
    padding: 0 2vw;
    margin-top: 10vh;
    margin-bottom: 10vh;
    margin-left: auto;
    margin-right: auto;
}

.mainSection .ctaButton {
    font-size: 1.2rem;
    width: 75%;
}

.recentNews .individualBlogPost .ctaButton {
    width: 100%;
    max-width: none;
}


.flexRow, .flexRowReverse {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: stretch;
    margin-bottom: 7vh;
}

.flexRowReverse {
    flex-direction: row-reverse;
}

.flexRowReverse h2 {
    text-align: left;
}

.flexRowReverse p {
    text-align: left;
    margin-right: auto;
}

.flexRowReverse .leftSide {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-start;
    text-align: right;
    min-width: 336px;
    padding-top: 2%;
    padding-left: 2rem;
}

.flexRowReverse .linkButtonPrimary {
    margin-right: 1vw;
}

.flexRow .leftSide {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-start;
    width: 35%;
}

.leftSide p {
    max-width: 350px;
}

.rightSide {
    width: 65%;
}

.mgtFeatureHighlight {
    position: relative;
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    margin-right: 3vw;
    border-radius: 12px;
    padding: 4rem 2rem 2rem 2rem; 
    box-shadow: 0px 0px 25px 5px rgba(0,0,0,0.08);
    transition: all 0.2s;
}

.mgtFeatureHighlight:hover {
    scale: 104%;
}

.appetiteMap .rightSide a {
    cursor: pointer;
}

.comingSoon {
    cursor: wait;
}

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

    .mgtFeatureHighlight {
        padding: 3.5rem 1.5rem 1.5rem 1.5rem;
    }

}

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

    .flexRow, .flexRowReverse {
        flex-flow: column nowrap;
        align-items: center;
        margin-bottom: 4vh;
    }
    .appetiteMap .flexRow {
        width: 100%;
    }
    .mainSection {
        margin-bottom: 5vh;
    }
    .leftSide, .rightSide, .leftSide p, .rightSide p {
        width: 100%;
        max-width: 100%;
        text-align: center;
    }
    .appetiteDownload .leftSide, .appetiteDownload .rightSide {
        padding-left: 4vw !important;
        padding-right: 4vw !important;
    }
    h1, h2, h3, h4, p, .flexRowReverse h2, .flexRowReverse p {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .linkButtonPrimary, .linkButtonSecondary, .linkButtonTertiary, .linkButtonHollowWhite {
        margin: auto;
        min-width: 60%;
    }
    .flexRowReverse .leftSide {
        padding-left: 0;
    }
    .mainSection .linkButtonPrimary, .mainSection .linkButtonSecondary, .mainSection .linkButtonTertiary  {
        display: block;
        width: 100%;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 1.5vh;
    }
    .mgtMainstreet {
        order: 1;
        margin-top: -4vh;
        margin-bottom: 2vh;
    }
    .youCanTrustMGT p, .flexRowReverse p, .recentNews p {
        max-width: 80%;
        margin-bottom: 3vh;
        margin-left: auto;
        margin-right: auto;
    }
    .youCanTrustMGT .leftSide {
        width: 100%;
        order: 2;
    }
    .mgtFeatureHighlightWrapper {
        margin-top: 5rem;
        padding:0 5vw;
    }
    .mgtFeatureHighlight {
        padding-top: 3rem;
        margin-bottom: 3.8rem;
        max-width: 430px;
        margin-right: 0;
        width: 100%;
    }
    .mgtFeatureHighlight:last-child {
        margin-bottom: 0;
    }
    .circleIcon {
        scale: 80%;
    }

}
@media screen and (max-width: 520px) {
    .mgtFeatureHighlight {
        max-width: 320px;
    }
}

.circleIcon .agrade {
    width: 45%;
}

.circleIcon img {
    max-width: 35px;
    margin-top: -3px;
}

.appetiteMap svg {
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.13));
}

.appetiteChatAndGuide {
    color: #fff;
    background-color: #2B3C73;
    padding: 1.5rem 3rem;
    width: 100%;
    position: relative;
}

.appetiteChatAndGuide .leftSide {
    width: 40%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-start;
    padding-right: 2rem;
}

.appetiteChatAndGuide .leftSide p {
    color: #fff;
}

.appetiteChatAndGuide .rightSide {
    width: 60%;
}

.appetiteChatAndGuide .ctaButton {
    font-size: 1.2rem;
    max-width: 320px;
    width: 100%;
}

.appetiteChatAndGuide .linkButtonPrimary {
    background: #016AD4;
    color: #ffffff;
    padding-bottom: 1rem;
}

.appetiteChatAndGuide h2 {
    margin-bottom: 1.5rem;
}

.appetiteChatAndGuide .flexRow {
    margin-bottom: 0;
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 3rem;
}

.appetiteChatAndGuide h2 {
    color: #fff;
    font-size: clamp(2.5rem, 6vw, 3.5rem);
}

.bannerButtons.flexRow {
    padding: 0;
    justify-content: flex-start;
}

.chatWrapper {
    position: relative;
    background-color: #fff;
    border: solid 2px #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 700px;
    min-width: 400px;
    margin-bottom: -60px;
    margin-top: -60px;
    box-shadow: 0px 0px 25px 5px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.chatHeader {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1rem;
    color: #fff;
    font-weight: 700;
    background-color: #2B3C73;
}
.chatHeader div {
    display: flex;
    flex-flow: row nowrap;
}

.chatStatus span {
    color: #92ff92;
}

.chatHeader div svg {
    display: inline-block;
    margin-right: 1rem;
}

.appetiteAgentChat {
    width: 100%;
    height: 500px;
    margin: 0 auto;
    display: block;
    overflow: none;
}

.message {
    /* position: absolute; */
    left: 1rem;
    /*width: calc(100% - 2rem);*/
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    border-radius: 12px;
    padding: 1rem;
    opacity: 1;
    transition: opacity 1s ease-in-out;
}

.message p {
    margin-bottom: 0; 
    font-size: clamp(1rem, 1.5vw, 1.2rem);
}

.userMessage p {
    color: #2b3c73;
}

.userMessage {
    background-color: hsla(207, 53%, 64%, 23%);
}

.userIcon,
.mgtIcon {
    display: block;
    height: auto;
    width: 60px;
    margin-right: 1rem;
}

@media screen and (max-width: 1220px) {
    .userIcon, .mgtIcon {
        width: 40px;
    }
    .chatWrapper {
        margin-top:0;
    }
}
@media screen and (max-width: 1100px) {
    .appetiteChatAndGuide {
        padding-left: 0;
        padding-right: 0;
    }
    .appetiteChatAndGuide .rightSide {
        padding-left: 2rem;
    }
    .appetiteChatAndGuide .flexRow {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .appetiteChatAndGuide .bannerButtons {
        padding: 0;
    }

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

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

}
@media screen and (max-width: 768px) {
    main {
        padding-left: 0;
        padding-right: 0;
    }
    .appetiteChatAndGuide {
        margin-left: 0;
        width: 100%;
        padding-left: 2vw;
        padding-right: 2vw;
        overflow-x: hidden !important;
    }

    .appetiteChatAndGuide .leftSide {
        width: 100%;
        padding-right: 0;
        padding-left: 0;
        order: 2
    }
    .appetiteChatAndGuide .rightSide {
        width: 100%;
        padding-right: 0;
        padding-left: 0;
        order: 1;
    }
    .appetiteChatAndGuide .rightSide .chatWrapper {
        margin-bottom: 2rem;
    }

    .appetiteChatAndGuide .ctaButton {
        width: 100%;
        max-width: 320px;
        margin-bottom: 1rem;
    }
    .bannerButtons {
        width: 100%;
    }
    .chatWrapper {
        max-width: 588px;
        min-width: 0;
        margin: 1rem auto 0 auto;
    }
    .message p {
        margin-top: 0;
        text-align: left;
    }
}
@media screen and (max-width: 515px) {
    .appetiteChatAndGuide .flexRow {
        padding: 0 0.5rem;
    }
}

/*
.message:nth-child(1) {
    animation: fadeIn 1s ease-in-out 0s forwards;
}

.message:nth-child(2) {
    animation: fadeIn 1s ease-in-out 1.75s forwards;
}

.message:nth-child(3) {
    animation: fadeIn 1s ease-in-out 3.5s forwards;
}

.message:nth-child(4) {
    animation: fadeIn 1s ease-in-out 5.25s forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
*/
a.fakeLink {
    color: #016AD4;
    font-weight: 900;
}

.recentNews {
    scroll-margin-top: 120px;
    margin-bottom: 0;
    padding: 0 1rem;
}

.recentNews h2, .recentNews p {
    text-align: center;
}

.recentNews p {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.blogPostsWrapper {
    margin-top: 3rem;
}

.individualBlogPost {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 330px;
    background: #fff;
    padding: 1rem;
    margin-right: 2vw;
    border-radius: 12px; 
    box-shadow: 0px 0px 25px 5px rgba(0,0,0,0.08);
}

.individualBlogPost .ctaButton {
    max-width: 125px;
}

.individualBlogPost h4 {
    transition: all 0.2s;
}

.individualBlogPost h4:hover {
    scale: 104%;
}

.date {
    display: inline-block;
    font-family: "Mulish", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #2B3C73;
    border: solid 3px #2B3C73;
    padding: 0.4rem;
    border-radius: 12px;
    text-align: center;
    min-width: 80px;
}

footer .footerDrawing {
    background-color: transparent;
    background-image: url('../images/line-of-spruce-trees.svg');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    height: 30vh;
    min-height: 380px;
    width: 100%;
    margin-top: -7vh;
    margin-bottom: -5px;
}

footer .footerPrimary {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    min-height: 300px;
    padding: 0 3vw;
    background-color: #2B3C73;
}

footer p, footer address {
    color: #fff;
    text-align: left;
    font-size: 1rem;
    font-style: normal;
    margin-bottom: 0.9rem;
}

.bottomFooter {
    align-items: center;
    width: 100%;
    max-width: 1060px;
    padding-top: 4vh;
    padding-bottom: 3vh;
    margin: 3vh auto 0 auto;
    border-top: solid 2px #fff;
    color: #fff;
}

.footerNavigation li.extraPaddingRight {
    margin-right: 5vw;
}

.bottomFooter .flexRow {
    justify-content: space-between;
}

.footerLogo {
    max-width: 400px;
    padding-right: 5vw;
}

.footerLogo .st0 {
    fill: #fff;
}

.upperFooter {
    padding-top: 3vh;
}

.footerNavigation {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1;
}

.mobileTextLink {
    display: none;
}

.footerNavigation li {
    margin-right: 2vw;
}

.footerNavigation .linkButtonHollowWhite:hover {
    color: #2B3C73;
    background-color: #fff;
}

.intercom-lightweight-app-launcher {
    background-color: #006cdb !important;
}

#hubspot-messages-iframe-container {
    display: none !important;
    visibility: hidden;
    right: 99999999999999999999999px;
    z-index: -999999999999;
}

.bottomFooter .footerLegal {
    justify-content: flex-start;
    margin-top: 1rem;
    margin-bottom: 0;
}

.bottomFooter .footerLegal a {
    text-transform: uppercase;
    font-weight: 800;
    font-size: 0.7rem;
    transition: all 0.2s;
}

.bottomFooter .footerLegal a:hover {
    text-decoration: underline;
    scale: 112% !important;
}

.bottomFooter .footerLegal li {
    margin-right: 1rem;
}

.amBestRating {
    display: block;
    width: 100%;
    height: auto;
    max-width: 150px;
}
.footerLongArea {
    flex-grow: 2;
}
footer p.doNotSell {
    margin-top: 1rem;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 0.7rem;
    transition: all 0.2s;
}
footer p.doNotSell a {
    color: #fff;
}
p.doNotSell a:hover {
    text-decoration: underline !important;
}

@media screen and (max-width: 920px) {
    footer .navHide {
        display: none;
    }
}

  

@media screen and (max-width: 855px) {
    .mobileTextLink {
        display: inline-block;
    }
    .buttonLink {
        display: none;
    }
    .footerNavigation li {
        margin-right: 5.5vw;
    }
}

@media screen and (max-width: 768px) {
    
    footer p.doNotSell {
        margin-top: 0.3rem;
    }
    .upperFooter, .bottomFooter {
        max-width: 85%;
    }
    .footerNavigation {
        flex-flow: column nowrap;
    }
    .footerNavigation li {
        margin-right: 0 !important;
        margin-bottom: 2.8vh;
    }
    footer .flexRow .leftSide {
        width: 100%;
        align-items: center;
    }
    .bottomFooter .footerLegal {
        margin-top: 4vh;
    }
    .amBestRating {
        margin-top: 1.5rem; 
    }
    .footer .navHide {
        display: inline;
    }
    .bottomFooter .footerLegal li {
        margin-right: 0;
        margin-bottom: 2vh;
    }
    footer .navHide {
        display: inline;
    }
    footer address {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .blogPostsWrapper {
        align-items: center;
    }
    footer .footerDrawing {
        height: auto;
        min-height: 200px;
    }
    .footerLogo {
        max-width: 200px;
        margin-bottom: 2vh;
        padding-right: 0;
    }
    .individualBlogPost {
        margin-bottom: 2vh;
        margin-right: 0;
    }
    .individualBlogPost:last-child {
        margin-bottom: 0;
    }
    .date {
        display: block;
        margin: auto;
        max-width: 30%;
    }
    .footerArea p {
        text-align: center;
    }
    .individualBlogPost a {
        margin-bottom: 0 !important;
    }
    footer .footerTop {
        height: 20vh;
    }
}


/* Form Lightbox Style */
body.no-scroll {
    overflow: hidden;
    height: 100vh;
    position: fixed;
    width: 100%;
}


/* --- Modal Hidden State --- */
.formLightbox {
    display: flex; /* allows centering */
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transform: scale(0.98);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 1000;
  }
  
  /* --- Modal Active State --- */
  .formLightbox.active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
  }
  
  /* Modal content */
  .formLightboxContent {
    background: #fff;
    border-radius: 8px;
    padding: 2rem;
    max-width: 600px;
    width: 90%;
    position: relative;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    animation: popIn 0.3s ease forwards;
    max-height: 85vh;
    overflow-y: auto;
    box-sizing: border-box;
  }
  
  /* Optional keyframe animation for inner content */
  @keyframes popIn {
    from {
      opacity: 0;
      transform: translateY(20px) scale(0.98);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  
  /* Close button */
  .close-modal {
    position: absolute;
    top: 4px;
    right: 14px;
    font-size: 30px;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
}
  
  .close-modal:hover {
    color: black;
  }

  .formLightbox form {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
  }

  div.hs-firstname, div.hs-lastname {
    width: 48%;
  }

  div.hs-email, div.hs-phone, div.hs-company, .hs_message {
    width: 100%;
  }

  .formLightbox h2 {
    text-align: center;
    padding-top: 0.85rem;
    margin-bottom: 2rem;
  }

  .formLightbox input {
    width: 100%;
    padding: 1rem;
    border-radius: 8px;
    border: solid 1px #B2B2B2;
    font-family: 'Mulish', sans-serif;
    font-size: 1rem;
    color: #444;
    font-style: italic;
  }

  .formLightbox input.error {
    border-color: red;
  }

  .formLightbox .field {
    margin-bottom: 1rem;
  }

  .hs-error-msgs, .hs_error_rollup {
    display: none;
  }

  .formLightbox textarea {
    width: 100%;
    border-color: #B2B2B2;
    border-radius: 8px;
    padding: 1rem;
    min-height: 75px;
    font-family: 'Mulish', sans-serif;
    font-size: 1rem;
    color: #444;
    font-style: italic;
  }

  .hs-form-required {
    color: red;
    padding-left: 3px;
  }

  .formLightbox label {
    color: #2B3C73;
    font-weight: bold;
    font-size: 0.9rem;
    margin-bottom: 6px;
    display: block;
    padding-left: 3px;
}

.hs_submit {
    width: 60%;
    min-width: 250px;
    margin-top: 1rem;
}

.formLightbox input.hs-button {
    display: inline-block;
    padding: 1.1rem 1.3rem;
    border-radius: 8px;
    font-weight: 900;
    font-family: 'Mulish', sans-serif;
    text-align: center;
    font-size: 1.2rem;
    font-style: normal;
    background-color: #9d3aaf;
    color: #fff;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: all 0.2s;
}

.formLightbox input.hs-button:hover {
    scale: 104%;
}

.formLightbox input::-moz-placeholder, textarea::-moz-placeholder {
    opacity: 0;
}

.formLightbox input::placeholder, textarea::placeholder {
    opacity: 0;
}

.hs_recaptcha {
    position: absolute;
    bottom: -3%;
    right: -10%;
    opacity: 0.9;
    scale: 0.6;
}

.submitted-message {
    font-size: clamp(1.1rem, 2vw, 1.2rem);
    line-height: 1.2;
    color: #444444;
    font-weight: 500;
    text-align: center;
}

#confirmationLightbox .confirmation-box-content {
    background-color: #c3e6cb;
    color: #016ad4;
    text-align: center;
    max-width: 450px;
    padding: 40px;
}

#confirmationLightbox .confirmation-text {
    font-size: 2rem;
    line-height: 1.2;
    font-weight: 800;
    margin: 0;
    color:  #016ad4;
}

#confirmationLightbox .checkmark-svg {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: block;
    stroke-width: 5;
    stroke:  #016ad4;
    stroke-miterlimit: 10;
    margin: 0 auto 20px auto;
}
.formLightbox.active .checkmark-circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.formLightbox.active .checkmark-check {
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@media screen and (max-width: 535px) {
    
    .formLightboxContent {
        padding: 0.6rem 1rem 1rem 1rem;
    }
    .formLightbox h2 {
        padding-top: 30px;
        margin-bottom: 1.2rem;
    }

    .formLightbox input::-moz-placeholder, .formLightbox textarea::-moz-placeholder {
        opacity: 1;
        color: #666666;
    }

    .formLightbox input::placeholder, .formLightbox textarea::placeholder {
        opacity: 1;
        color: #666666;
    }

    .formLightbox label {
        display: none;
    }

    .hs_submit {
        width: 100%;
        margin-top: 0;
    }

    .hs_recaptcha {
        bottom: -23%;
        left: 3%;
        scale: 0.65;
        opacity: 1
    }

}

.not-found.terms-conditions-legal .hero {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    height: 85vh;
    padding-left: 0;
    padding-right: 0;
}
.not-found.terms-conditions-legal h1 {
    margin-bottom: 2rem;
}
.not-found.terms-conditions-legal .footerDrawing {
    display: none;
}
.not-found.terms-conditions-legal .mgtMountains {
    max-width: 100%;
    height: 350px;
    margin-top: auto;
}

/* Sign In Modal Styles */
#signInModal .sign-in-modal-content {
    max-width: 800px;
    /* min-width: 700px; */
    text-align: center;
}
.navyLightbox {
    background: #2B3C73;
    color: #fff;
    padding: 1.5rem 2rem 2rem 2rem;
}

#signInModal .close-modal {
    color: #fff;
    font-weight: 900;
}

#signInModal .sign-in-options {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

#signInModal .sign-in-heading {
    padding: 0;
    margin: 0 0 4rem 0;
    font-size: clamp(2.5rem, 3vw, 2.85rem);
    font-weight: 400;
    font-family: 'Crimson Pro', sans-serif;
    color: #ffffff;
    letter-spacing: -1px;
}

.flying-color-bars {
    position: absolute;
    left: 0;
    top: 15%;
    width: 94%;
}

#signInModal .sign-in-subheading {
    font-weight: 500;
    margin: 0 0 1rem 0;
    padding: 0;
}

/* Two-section layout */
#signInModal .sign-in-sections {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    width: 100%;
}

#signInModal .sign-in-section {
    position: relative;
    overflow: hidden;
    padding: 0 1.2rem 0.2rem 1.2rem;
    width: 50%;
}
.sign-in-card {
    border-radius: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.7rem 1.5rem;
    background-color: #fff;
}

.sign-in-card.legacy {
    background-color: #fff;
}

#signInModal .sign-in-section-left {
    padding-right: 0;
}

#signInModal .sign-in-section-right {
    padding-left: 0;
}

.sign-in-card.next-gen {
    background-color: #fff;
}

.portal-icon {
    width: 160px;
    margin: 0 auto;
}

/* Screenshot images at top (order: 1) */
#signInModal .sign-in-screenshot {
    width: 100%;
    max-width: 100%;
    height: 180px;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
    margin: 0 0 1.5rem 0;
    display: block;
    background-color: #f5f5f5;
    order: 1;
}

/* Brand button styling - after screenshot (order: 2) */
#signInModal .sign-in-section .linkButtonSecondary {
    width: 100%;
    text-align: center;
    padding: 1.2rem 1.8rem;
    font-size: 1.1rem;
    font-weight: 900;
    border-radius: 8px;
    margin: 1rem 0 0 0;
    order: 2;
}
#signInModal .sign-in-section .linkButtonHollow {
    width: 100%;
    text-align: center;
    padding: 1.2rem 1.8rem;
    font-size: 1.1rem;
    font-weight: 900;
    border-radius: 8px;
    margin: 1rem 0 0 0;
    order: 2;
    background-color: transparent !important;
    box-shadow: inset 0 0 0 5px #2B3C73 !important;
    color: #2B3C73 !important;
}
#signInModal .sign-in-section .linkButtonHollow:hover {
    scale: 104%;
}

/* Text after button (order: 3) */
#signInModal .sign-in-section-text {
    max-width: 270px;
    font-size: 1rem;
    line-height: 1.2;
    color: #ffffff;
    margin: 1rem auto 0 auto;
    text-align: center;
    font-family: 'Mulish', sans-serif;
    font-style: italic;
    order: 3;
}

#signInModal .sign-in-link {
    color: #0066cc !important;
    font-weight: 600;
    text-decoration: underline;
    transition: color 0.2s ease;
}

#signInModal .sign-in-section-text .sign-in-link {
    color: #0066cc !important;
}

@media screen and (max-width: 800px) {
    #signInModal .sign-in-section {
        padding: 0;
    }
}

@media screen and (max-width: 670px) {
    #signInModal .sign-in-sections {
        flex-direction: column !important;
        gap: 0;
    }
    #signInModal .sign-in-section-text {
        display: none;
    }
    #signInModal .sign-in-section {
        width: 100% !important;
        padding: 1.5rem 1rem;
    }
    #signInModal .sign-in-section-left, #signInModal .sign-in-section-right {
        padding-bottom: 0;
        margin-bottom: 0;
    }
    #signInModal .sign-in-heading {
        margin-bottom: 0;
    }
    #signInModal .portal-icon {
        width: 110px;
    }
    .flying-color-bars {
        display: none;
    }
}

@media screen and (max-width: 555px) {
    #signInModal .sign-in-section-left {
        margin-top: 0;
        padding-top: 0;
    }
    #signInModal .sign-in-heading {
        display: none;
    }
    .navyLightbox {
        padding: 2.2rem 1rem;
    }
}

/*
@media screen and (max-width: 768px) {
    #signInModal .sign-in-modal-content {
        min-width: 90%;
        max-width: 90%;
        padding: 1.5rem 1rem;
    }
    
    #signInModal .sign-in-heading {
        display: none;
    }
    
    #signInModal .sign-in-sections {
        flex-direction: column !important;
        gap: 1.5rem;
    }
    
    #signInModal .sign-in-section {
        width: 100% !important;
        padding: 1.5rem 1rem;
    }
    
    #signInModal .sign-in-section-text {
        display: none;
    }
    
    #signInModal .sign-in-screenshot {
        height: 120px;
        margin: 0 0 1.5rem 0;
        order: 1;
    }
    
    #signInModal .sign-in-section .linkButtonSecondary {
        width: 100%;
        max-width: none;
        order: 2;
        margin: 0;
    }
    
}
*/
#signInModal .sign-in-link:hover {
    color: #9d3aaf;
}

body.dark-mode #signInModal .sign-in-subheading {
    color: #ffffff;
}

body.dark-mode .sign-in-card {
    background-color: transparent;
    border: solid 5px #ffffff;
}

body.dark-mode #signInModal .sign-in-section .linkButtonHollow {
    color: #ffffff !important;
    box-shadow: inset 0 0 0 5px #ffffff !important;
}


/* =================================== */
/* Dark Mode Styles (Triggered by Class) */
/* =================================== */

/* General Text & Element Colors */
body.dark-mode .formLightbox input::-moz-placeholder, body.dark-mode .formLightbox textarea::-moz-placeholder {
    color: #fff;
}
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode p,
body.dark-mode nav,
body.dark-mode nav a,
body.dark-mode .date,
body.dark-mode .formLightbox label,
body.dark-mode .formLightbox input,
body.dark-mode .formLightbox textarea,
body.dark-mode .formLightbox input::placeholder,
body.dark-mode .formLightbox textarea::placeholder,
body.dark-mode .submitted-message,
body.dark-mode footer a,
body.dark-mode footer p {
    color: #fff;
} 

/* Body Background */
body.dark-mode {
    background-color: #000;
    background-image: none;
    /* Consider adding transition for smoothness */
    /* transition: background-color 0.3s ease, color 0.3s ease; */
}

body.dark-mode .lightMode {
    display: none !important;
}
body.dark-mode .darkMode {
    display: block !important;
}

/* Sticky Nav Background */
body.dark-mode.no-scroll nav.sticky,
body.dark-mode nav.sticky {
    /* Note: body.dark-mode added to both parts of original selector */
    background-color: hsla(0, 0%, 0%, 0.90) !important; /* Use !important carefully */
     /* Consider adding transition */
    /* transition: background-color 0.3s ease; */
}

/* Form Elements Background/Border */
body.dark-mode input,
body.dark-mode textarea {
    background-color: transparent;
}
body.dark-mode input[type=submit] {
    border: none;
}
body.dark-mode .date,
body.dark-mode .formLightbox input,
body.dark-mode .formLightbox textarea {
    border-color: #fff;
}
body.dark-mode .formLightbox input.error {
    border: solid 2px red; /* Error state likely needs to override border-color */
}
body.dark-mode .formLightbox input::-moz-placeholder {
    color: #fff; /* Ensure this overrides default placeholder color if needed */
}
body.dark-mode .formLightbox input::placeholder {
    color: #fff; /* Ensure this overrides default placeholder color if needed */
}


/* Logo & Menu SVG Fills */
body.dark-mode .logo #mountain-shadow .st1 {
    fill: transparent;
}
body.dark-mode .logo .st0,
body.dark-mode .menu .st0 {
    fill: #fff;
    /* transition: fill 0.3s ease; */ /* Add transition to SVG fill */
}
body.dark-mode .sticky .logo .st0 {
    fill: #fff; /* Assumes sticky logo is also white in dark mode */
}

/* Buttons & Links */
body.dark-mode .linkButtonPrimary {
    background-color: #9d3aaf; /* Primary button color in dark mode */
}

/* Layout Specific Backgrounds/Colors */
body.dark-mode .hero,
body.dark-mode.level2 .hero {
    background: transparent !important; /* Use !important carefully */
}
body.dark-mode .auroraLeft,
body.dark-mode .auroraRight {
    bottom: 12vh;
}
body.dark-mode .hero p,
body.dark-mode .mainSection p,
body.dark-mode .mainSection ul li {
    color: #b1abab; /* Specific paragraph color in dark mode */
}

/* Tagline Visibility */
body.dark-mode .lightModeTagline {
    display: none;
}
body.dark-mode .darkModeTagline {
    display: inline;
}

/* Wrappers & Highlights */
body.dark-mode .twoButtonWrapper,
body.dark-mode .buttonNav, /* Affects the sign-in/appoint buttons wrapper */
body.dark-mode .mgtFeatureHighlight {
    background: hsla(0, 0%, 0%, 0.50);
    border: solid 3px #fff;
}
body.dark-mode .mgtFeatureHighlight .circleIcon {
    border: solid 3px #fff;
}

/* Testimonials */
body.dark-mode .quoteButton svg .cls-1 {
    fill: #6679c4;
}
body.dark-mode .currentTestimonial {
    background: transparent;
    border: solid 3px #fff;
    color: #fff;
}

/* Chat */
body.dark-mode .chatWrapper {
    background-color: #000;
    box-shadow: 0px 0px 25px 5px rgba(255, 255, 255, 0.12);
    border-color: #016ad4 !important;
}
body.dark-mode .message p {
    color: #fff; /* Ensure chat message text is white */
}
body.dark-mode .chatHeader {
    background-color: #016ad4;
}

/* Map */
body.dark-mode #usaMap .cls-1 {
    fill: #000;
    stroke: #6679c4; /* Map stroke color in dark mode */
    stroke-width: 3px;
}

/* Misc */
body.dark-mode figcaption {
    color: #b1abab;
}
body.dark-mode .circleIcon {
    background-color: #000;
}
body.dark-mode .individualBlogPost {
    background-color: transparent;
    border: solid 3px #fff;
}
body.dark-mode .formLightboxContent {
    background-color: #2B3C73; /* Specific lightbox background */
}