* {
    flex-shrink: 0;
}

section {
    overflow: hidden;
}

html {
    width: 100%;
}

body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
}

main {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

/* general arabic font */
.general_ar_font {
    font: 300 12px Cairo;
}

/* Common elements */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #0c2d48;
}

h1 {
    font: 500 45px Poppins;
}

h2 {
    font: 400 40px Poppins;
}

h3 {
    font: 400 35px Poppins;
}

h4 {
    font: 400 21px Poppins;
}

h5 {
    font: 400 18px Poppins;
}

.purple-text {
    color: #7988F3;
}

.orangeDark-text {
    color: #e3562d;
}

.orange-text {
    color: #f79421;
}

.blue-text {
    color: #145da0;
}

.blueKLM-text {
    color: #2f8bc0;
}

.blueDark-text {
    color: #0c2d48;
}

.blueDark-text {
    visibility: hidden;
}

.blueDark2-text {
    color: #0c2d48;
}

.italic-h1 {
    font-size: 40px;
    font-style: italic;
    color: grey;
}

.contact-link {
    color: #0569A1 !important;
}

.contact-link-orange {
    color: #f79421 !important;
}

.top-section {
    margin-top: 25vh;
}

.justified-txt {
    text-align: justify;
}

.img-text-right,
.img-text-left {
    display: flex;
    flex-direction: column;
    width: 100%;
    font-family: Poppins;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

.img-text-right {
    align-items: flex-end;
    justify-content: center;
}

.img-text-left {
    align-items: flex-start;
}

.img-text-right article,
.img-text-left article {
    display: flex;
    flex-direction: column;
    padding: 0 3vw 6vw 0;
    width: 40vw;
}

.img-text-right article p,
.img-text-left article p {
    font-size: 13px;
    margin-top: 20px;
    line-height: 20px;
}

.italic-link {
    color: #7988F3;
    font: 300 italic 14px Poppins;
}

.italic-link:hover {
    transform: scale(1.2, 1.2);
}

/* Footer */
footer {
    z-index: 7;
    width: 100%;
    position: relative;
}

.footer-section-background {
    background: url('../images/footer/frame_06319-.jpg') no-repeat center/cover;
}

.footer-section-background2-Gif {
    background: url('../images/footer/sparkling2.gif') no-repeat center/cover;
    z-index: 8;
}

.footer-section-background2-Blk {
    background: url('../images/footer/overlay-black.png') no-repeat center/cover;
    z-index: 8;
}

.footer-scroll-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgb(0, 19, 36);
    /* Set the initial color */
    z-index: 99998;
    /* Lower z-index than the footer, but higher than the background */
    display: none;
    /* Initially hidden */
    opacity: 0;
    /* Initially transparent */
    transition: opacity 1s ease;
    /* For smooth fading */
    pointer-events: none;
    /* box-shadow: 0 -1px 8px rgba(135, 206, 250, 0.7); this is a subtle, thin glowing shadow at the top edge * /
    /* Sky Blue glow */
}

#footer-reveal-cue {
    /* Fixed properties */
    display: none;
    /* JS will show this on scroll down */
    position: fixed;
    top: 0;
    /* JS will overwrite this */
    left: 0;
    width: 100vw;
    height: 1px;
    z-index: 99999999;
    pointer-events: none;

    /* Appearance (Fixed Opacity for now) */
    background-color: rgb(135, 206, 250);
    /* Sky Blue */
    box-shadow: 0 0 10px 1px rgba(135, 206, 250, 1.0);
    opacity: 1.0;
    /* Full visibility, no animation yet */
}


.footer-grid {
    background: url('../images/footer/overlay9.png') no-repeat center/cover, url('../images/footer/sparkling2.gif') no-repeat center/auto, url('../images/footer/footer-background.jpg') no-repeat center/auto;
    background-attachment: fixed;
    height: 75vh;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    color: white;
    font: 300 14px Poppins;
    overflow: hidden;
    align-items: center;
}

.footer-grid-About {
    background: url('../images/footer/overlay10.png') no-repeat center/cover, url('../images/footer/sparkling2.gif') no-repeat center/cover, url('../images/footer/footer-background.jpg') no-repeat center/cover;
    background-attachment: fixed;
    height: 75vh;
    display: grid;
    grid-template-columns: 4fr 3fr 3fr;
    /* Keeps your existing column distribution */
    gap: 5%;
    /* This is the key: creates a 10% gap between columns */
    color: white;
    font: 300 14px Poppins;
    overflow: hidden;
    align-items: start;
    /* Ensures items are aligned to the top */
    /* If you want space from the very left/right edge of the grid, use padding-left/right here */
    padding-left: 5%;
    /* Example: 10% padding on the left */
    padding-right: 5%;
    /* Example: 10% padding on the right */
    padding-top: 5%;
    /* Example: 10% padding on the right */

}


.footer-grid-black {
    background: url('../images/footer/footer-black-overlay.png') no-repeat center/cover, url('../images/footer/footer-background.jpg') no-repeat center/cover;
    background-attachment: fixed;
    height: 75vh;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    color: white;
    font: 300 14px Poppins;
    overflow: hidden;
    align-items: center;
}

.footer-cc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: auto;
    height: 75vh;
    align-items: center;
    background: url('../images/footer/overlay.png') no-repeat center/cover, url('../images/footer/footer-background.jpg') no-repeat center/cover;
    background-attachment: fixed;
    color: white;
    font: 300 14px Poppins;
    overflow: hidden;
}

/*
.footer-logo2{
    height: auto;
    width: auto;
    max-height: 50px;
    max-width: 150px;
}
*/
.footer-logo {
    grid-column: span 3;
    justify-content: center;
    display: flex;

}

.footer-logo img {
    /*height: 80px;*/
    height: auto;
    width: auto;
    max-height: 40px;
    margin: 30px auto;
    display: none;
}

.footer-about,
.footer-icons,
.footer-form {
    height: 80%;
    margin-bottom: 2vh;
}

.footer-cc .footer-about {
    height: 90%;
    align-items: center;
    padding: 0;
    max-width: 400px;
    margin: 0 auto;
}

.footer-cc .footer-icons {
    height: 90%;
    align-items: flex-end;
    justify-items: center;
    width: 400px;
}

.footer-cc .footer-sm {
    width: 240px;
}

.footer-about {
    display: flex;
    flex-direction: column;
    line-height: 17px;
    text-indent: 50px;
    padding: 0 10px 0 7vw;
    text-align: justify;
}

.footer-about p {
    word-wrap: break-word;
    word-break: keep-all;
}

.footer-about img {
    height: auto;
    width: auto;
    max-height: 40px;
    margin: 30px auto;
    object-fit: fill;
}

.footer-icons {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: repeat(5, 60px);
    justify-self: center;
    align-self: center;
}

.footer-tab-cc {
    align-items: center;
}

.footer-tab-cc .footer-icons {
    width: max-content;
}

.footer-tab-cc .footer-icon,
.footer-tab-cc .footer-sm {
    width: 100%;
    max-width: 100%;
}

.footer-icon {
    display: flex;
    flex-direction: row;
    align-items: center !important;
    padding: 0 !important;
}

.footer-icon img {
    height: 25px;
    width: 25px;
    padding: 0 5px !important;
    /* Keep horizontal padding only padding: 0 5px;*/
    margin: 0 !important;
    /* Remove any unexpected margins */
    vertical-align: middle !important;
    /* Safety: Flexbox should handle it, but this is a fail-safe */
}

.footer-icon span {
    /* REMOVED: padding: 5px 0 5px 5px; which caused manual misalignment */
    padding: 0 0 0 5px !important;
    /* Keep only padding-left for separation */
    word-wrap: break-word;
    word-break: keep-all;
    max-width: 100%;
    line-height: normal !important;
}

.footer-icon .imgM {
    width: 25px;
    height: 14px !important;
    /* REMOVED: margin-top: 8px; which was used for manual vertical shifting */
    margin-top: 0 !important;
    /* CLEANUP: Remove the brittle fixed height/width */
    width: unset !important;
    height: unset !important;

    /* --- 2. SPECIFIC FIX: Resize and Align Email Icon --- */

    /* Requirement: Increase the size of the email icon by 20% (1.2 times original) */
    /* The image itself might be smaller, so we apply the scale transform */
    transform: scale(1.2) !important;
    transform-origin: center center !important;
}

.footer-sm {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    justify-content: space-between;
}

.footer-sm a {
    display: flex;
}

.footer-sm a:nth-child(1) {
    justify-content: flex-start;
}

.footer-sm a:nth-child(2) {
    justify-content: center;
}

.footer-sm a:nth-child(3) {
    justify-content: flex-end;
}

.footer-sm img {
    height: 20px;
}

.footer-sm a img:hover {
    transform: scale(1.2, 1.2);
}

.footer-form {
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding-right: 2vw;
    width: 100%;
}

.footer-form h5 {
    text-align: center;
}

#footer-rocket,
#form-rocket {
    z-index: 20;
    height: 150px;
    position: absolute;
    display: none;
    transform: scale(0, 0);
    animation: rocket-zoom 1s ease-in-out 1 forwards;
}

#footer-rocket {
    top: -20%;
}

.frm-rckt {
    top: -150% !important;
}

.footer-form span {
    align-items: center;
    position: relative;
    width: 90px;
    margin: 0 auto;
}

.footer-form,
.footer-form form {
    color: white;
}

.footer-form h5 {
    color: white;
}

.footer-form form input {
    border: none;
    border-radius: 5px;
    padding: 5px;
    width: 250px;
    margin: 0 auto;
}

.footer-form div {
    align-items: flex-start;
}

.footer-form form label {
    margin: 25px 10px 3px 10px;
}

.footer-form form button,
.mob-footer-btn {
    border: none;
    padding: 5px;
    border-radius: 5px;
    width: 90px;
    margin: 55px auto;
    color: #0c2d48;
}

.mob-footer-btn {
    background-color: lightgrey;
    text-decoration: none;
    width: 110px;
    padding: 5px 10px;
    text-align: center;
    margin: 10px auto;
}

.footer-form form button:hover {
    transform: scale(1.1, 1.1);
    color: grey;
}

.footer-base {
    background: black;
    text-align: center;
    color: white;
    padding: 10px;
    font: 300 14px Poppins;
    width: 100%;
    height: 35px;
    /* z-index: 7; */
    z-index: 99999;
}

.footer-base-about {
    background: green;
    text-align: center;
    color: white;
    padding: 10px;
    font: 300 14px Poppins;
    width: 100% !important;
    height: 35px;
}




/* Navigation */
header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
    background-color: white;
    overflow-x: clip;
}

.nav-top {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 0 10vw;
    height: 35px;
    border-bottom: 1px solid grey;
}

.navtop-btns {
    margin: 0 3vw;
    color: #0c2d48;
    font: 300 12px Cairo;
    border: none;
    background: none;
    cursor: pointer;
}

.navtop-btns:hover {
    transform: scale(1.1, 1.1);
}

.navbottom-logo {
    height: auto;
    width: auto;
    max-height: 50px;
    max-width: 150px;
}

.navbottom-logo .horizontalTranslateFrwd {
    transition: 1s;
    margin-right: 20px !important;
}

.navbottom-logo .horizontalTranslateBkwd {
    transition: 1s;
    margin-left: 20px !important;
}

.lang-btns {
    width: 120px;
    height: 100%;
}

.lang1,
.lang2 {
    position: absolute;
    top: 0;
    background-color: white;
}

.login,
.signup,
.reset-pw {
    display: none;
    padding: 20px 10px;
    border-radius: 10px;
    position: absolute;

    top: 35px;
    right: 50px;
    width: 250px;
    /* 
    background-color: white;
    border: 1px solid #4f5dc7;
    box-shadow: 3px 4px 15px #d3d3d3;
    */
    z-index: 4;
    align-items: center;
}

.login-sign,
.language-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.login-sign img,
.language-btn img {
    height: 20px;
    width: 20px;
    margin: 5px;
}

.login span,
.signup span,
.reset-pw span {
    align-items: center;
}

.login p {
    color: #0c2d48;
    font: 300 13px Poppins;
    margin: 5px;
}

.login p:hover {
    color: #7988F3;
    cursor: pointer;
}

.nav-top form {
    align-items: center;
    justify-content: center;
}

.nav-top form h1 {
    font: 500 28px Poppins;
    color: #0c2d48;
    margin: 10px auto;
}

.nav-top form input {
    padding: 8px;
    border-radius: 10px;
    border: 1px solid grey;
    margin: 10px;
    color: #000000;
    font: 400 12px Poppins;
    background-color: #eef0fa;
    width: 180px;
}

.back-btn {
    align-items: flex-start;
    width: 100%;
}

.back-btn button {
    background: none;
    border: none;
    font: 900 30px Poppins;
    color: black;
    line-height: 20px;
    cursor: pointer;
}

.dark-btn,
.light-btn {
    width: 180px;
    height: 38px;
    border-radius: 10px;
    border: none;
    font-family: Poppins;
    margin: 3px 0 3px 0;
    cursor: pointer;
}

.dark-btn {
    font-weight: 500;
    color: white;
    background-color: #0b416d;
}

.light-btn {
    font-weight: 300;
    color: #0c2d48;
    background-color: #7988F3;
}

.dark-btn:hover,
.light-btn:hover {
    transform: scale(1.1, 1.1);
}

.nav-btm {
    padding: 1vh 5vw;
    display: grid;
    grid-template-columns: 3fr repeat(5, 1fr) 2fr;
    align-items: center;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    height: 70px;
}

.nav-btm img {
    width: 230px;
}

.nav-btm a {
    text-decoration: none;
    color: #0c2d48;
    font: 400 14px Poppins;
}

.nav-btm a.on-page,
.on-page {
    text-decoration: underline solid !important;
    font: 500 14px Poppins !important;
}

.nav-btm a:hover,
.service-hover:hover {
    text-decoration: underline;
    transform: scale(1.1, 1.1);
    font-weight: 500;
}


/*-------- nav-btm dark modifications to meet animations of speedjet homepage -----------*/
.nav-btm-mod {
    display: grid;
    grid-template-columns: 4fr repeat(2, 1fr) repeat(2, 1.5fr) 1fr 2fr;
    /* grid-template-columns: 4fr repeat(5, 1fr) 1fr;
    */
    /*grid-template-columns: 2fr 1fr 1fr 1fr 2fr 1fr;*/

    align-items: center;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    height: 55px;

    /*------- To make it overlapping over the sections. with also z-index hight value-----*/
    /* position: absolute; */
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    padding-left: 11.3vw;
    /* overflow: hidden;*/
    z-index: 9999999;
    /*------------------*/
}

.nav-btm-mod img {
    width: 230px;
}

.nav-btm-mod a {
    text-decoration: none;
    color: #0c2d48;
    font: 400 14px Poppins;
}

.nav-btm-mod .light-link {
    text-decoration: none;
    color: #8d8e8e;
    font: 400 14px Poppins;
}

.nav-btm-mod .darkblue-link {
    text-decoration: none;
    color: #0c2d48;
    font: 400 14px Poppins;
}

.nav-btm-mod a.on-page,
.on-page {
    text-decoration: underline solid !important;
    font: 500 14px Poppins !important;
}

.nav-btm-mod .service-hover {
    background: none;
    border: none;
    font: 400 14px Poppins;
    text-align: start;
    color: #0c2d48;
}

.nav-btm-mod a:hover,
.service-hover:hover {
    text-decoration: underline;
    transform: scale(1.1, 1.1);
    font-weight: 500;
}

.nav-btm-mod section {
    display: flex;
    border: 1px solid #0c2d48;
    border-radius: 10px;
    padding: 20px;
    display: none;
    position: absolute;
    right: 10%;
    top: 65%;
    background-color: white;
}

.nav-btm-mod section div a {
    padding: 5px 0;
}

.nav-btm-mod .contact-link {
    color: #0569A1 !important;
}

/*------------------------------------------------------------------------*/
/* NAVBAR ANIMATION - SAFE VERSION */
#mainNavBar.navbar-loading {
    opacity: 0;
    /*transform: translateY(-10px);*/
    transform: translateX(-50px);
    /* Changed from translateY to translateX */
    pointer-events: none;
}

#mainNavBar.navbar-loaded {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 1.1s ease-out, transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
    /*
    transform: translateY(0);
    transition: opacity 0.8s ease-out, transform 0.6s ease-out;
    */
    pointer-events: auto;
}

#speedjet-logo.logo-loading {
    opacity: 0;
    transform: translateX(-100px);
}

#speedjet-logo.logo-loaded {
    opacity: 1;
    transform: translateX(0);
    /*transition: opacity 0.6s ease-out 0.3s, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s; */
    transition: opacity 1.1s ease-out, transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* NAVBAR TAB ANIMATIONS - ADD THIS */
/*
.nav-btm-mod a:not(.service-hover),
.nav-btm-mod .service-hover {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 1.1s ease-out, transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.nav-btm-mod a.tab-loaded,
.nav-btm-mod .service-hover.tab-loaded {
    opacity: 1;
    transform: translateX(0);
}
*/
/*------------------------------------------------------------------------*/

/*-------- nav-btm modifications to meet animations of speedjet other pages-----------*/
.nav-btm-mod2 {
    display: grid;
    grid-template-columns: 4fr repeat(2, 1fr) repeat(2, 1.5fr) 1fr 2fr;
    /*     grid-template-columns: 3fr repeat(5, 1fr) 2fr;   */
    align-items: center;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    height: 55px;
    /*------- To make it overlapping over the sections. with also z-index hight value-----*/
    /*position: absolute;*/
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    padding-left: 11.3vw;
    overflow: hidden;
    z-index: 10000 !important;
    /*------------------*/

}

.nav-btm-mod2 img {
    width: 230px;
}

.nav-btm-mod2 a {
    text-decoration: none;
    color: #0c2d48;
    font: 400 14px Poppins;
}

.nav-btm-mod2 .light-link {
    text-decoration: none;
    color: #8d8e8e;
    font: 400 14px Poppins;
}

.nav-btm-mod2 .contact-link {
    text-decoration: none;
    color: #f79421 !important;
    font: 400 14px Poppins;
}

.nav-btm-mod2 .darkblue-link {
    text-decoration: none;
    color: #0c2d48;
    font: 400 14px Poppins;
}

.nav-btm-mod2 a.on-page,
.on-page {
    text-decoration: underline solid !important;
    font: 500 14px Poppins !important;
}

.nav-btm-mod2 a:hover,
.service-hover:hover {
    text-decoration: underline;
    transform: scale(1.1, 1.1);
    font-weight: 500;
}

.nav-btm-mod2 section {
    display: flex;
    border: 1px solid #0c2d48;
    border-radius: 10px;
    padding: 20px;
    display: none;
    position: absolute;
    right: 10%;
    top: 65%;
    background-color: white;
}

.nav-btm-mod2 section div a {
    padding: 5px 0;
}

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

/*-------- nav-btm light-----------*/
.nav-btm-mod-light {
    display: grid;
    grid-template-columns: 4fr repeat(2, 1fr) repeat(2, 1.5fr) 1fr 2fr;
    align-items: center;
    box-shadow: 0 4px 4px rgba(234, 233, 233, 0.25);
    height: 55px;
    /*------- To make it overlapping over the sections. with also z-index hight value-----*/
    /*position: absolute;*/
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    padding-left: 11.3vw;
    /*overflow: hidden;*/
    z-index: 9999999 !important;
    transition: all 1s ease-out;

    /*------------------*/
}

.nav-btm-mod-light img {
    width: 230px;
}

.nav-btm-mod-light a {
    text-decoration: none;
    color: #bfbfbf;
    font: 400 14px Poppins;
}

.nav-btm-mod-light .light-link {
    text-decoration: none;
    color: #8d8e8e;
    font: 400 14px Poppins;
}

.nav-btm-mod-light .contact-link {
    text-decoration: none;
    color: #bfbfbf;
    font: 400 14px Poppins;
}

.nav-btm-mod-light .sdiv.contact-link {
    text-decoration: none;
    color: #bfbfbf;
    font: 400 14px Poppins;
}

.nav-btm-mod-light .darkblue-link {
    text-decoration: none;
    color: #0c2d48;
    font: 400 14px Poppins;
}

.nav-btm-mod-light a.on-page,
.on-page {
    text-decoration: underline solid !important;
    font: 500 14px Poppins !important;
}

.nav-btm-mod-light .service-hover {
    background: none;
    border: none;
    font: 400 14px Poppins;
    text-align: start;
    color: #bfbfbf;
}

.nav-btm-mod-light a:hover,
.service-hover:hover {
    text-decoration: underline;
    transform: scale(1.1, 1.1);
    font-weight: 500;
}

.nav-btm-mod-light section {
    display: flex;
    border: 1px solid #0c2d48;
    border-radius: 10px;
    padding: 20px;
    display: none;
    position: absolute;
    right: 10%;
    top: 65%;
    background-color: white;
}

.nav-btm-mod-light section div a {
    padding: 5px 0;
}

.nav-btm-mod-light .contact-link {
    color: #f79421 !important;
}

/*-------- nav-btm light with space in between -----------*/
.nav-btm-mod-light-spaced {
    display: grid;
    /*grid-template-columns: repeat(2, 1fr) 3fr repeat(2, 1fr); */
    grid-template-columns: 2fr repeat(6, 1fr);
    align-items: center;
    /* box-shadow: 0 4px 4px rgba(234, 233, 233, 0.25); */
    border-bottom: none;
    height: 100px;
    /*------- To make it overlapping over the sections. with also z-index hight value-----*/
    /*position: absolute;*/
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    /* padding-left: 10vw; */
    padding-left: 11.3vw;
    /*overflow: hidden; */
    z-index: 10000 !important;
    transition: 2s ease-in-out;
    /*animation: spaced-anim 2s ease-in-out 1 forwards;*/
}

/*
@keyframes spaced-anim {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.5;
    }

    70% {
        opacity: 0.8;
    }

    100% {
        opacity: 1;
    }
}
*/

.nav-btm-mod-light-spaced img {
    width: 230px;
}

.nav-btm-mod-light-spaced a {
    text-decoration: none;
    color: #bfbfbf;
    font: 400 14px Poppins;
}

.nav-btm-mod-light-spaced .light-link {
    text-decoration: none;
    color: #8d8e8e;
    font: 400 14px Poppins;
}

.nav-btm-mod-light-spaced .contact-link {
    text-decoration: none;
    color: #bfbfbf;
    font: 400 14px Poppins;
}

.nav-btm-mod-light-spaced .hide-home {
    text-decoration: none;
    display: inline;
}

.nav-btm-mod-light-spaced .sdiv.contact-link {
    text-decoration: none;
    color: #bfbfbf;
    font: 400 14px Poppins;
    position: relative;
}

.nav-btm-mod-light-spaced .darkblue-link {
    text-decoration: none;
    color: #0c2d48;
    font: 400 14px Poppins;
}

.nav-btm-mod-light-spaced a.on-page,
.on-page {
    text-decoration: underline solid !important;
    font: 500 14px Poppins !important;
}

.nav-btm-mod-light-spaced .service-hover {
    background: none;
    border: none;
    font: 400 14px Poppins;
    text-align: start;
    color: #bfbfbf;
}

.nav-btm-mod-light-spaced a:hover,
.service-hover:hover {
    text-decoration: underline;
    transform: scale(1.1, 1.1);
    font-weight: 500;
}

.nav-btm-mod-light-spaced section {
    display: flex;
    border: 1px solid #0c2d48;
    border-radius: 10px;
    padding: 20px;
    display: none;
    position: absolute;
    right: 10%;
    top: 65%;
    background-color: white;
}

.nav-btm-mod-light-spaced section div a {
    padding: 5px 0;
}

/*
.nav-btm-mod-light-spaced .service-hidden {
    position: fixed;
    top: 90px;
    right: 250px;
    width: 200px;
    display: none;
}
*/
.nav-btm-mod-light-spaced .service-hidden {
    /* Must be Absolute, not Fixed, to follow the translated parent */
    position: absolute;

    /* Reset fixed positioning values (right: 250px) */
    right: auto;
    left: 50%;
    /* Center it relative to the button */

    /* Adjust top position relative to the button/container height (100px) */
    top: 100px;

    /* Use CSS transform to fine-tune placement based on the button */
    transform: translateX(-50%);
    /* Centers the dropdown under the button */

    width: 200px;
    display: none;
    z-index: 10001;
    /* Must be higher than navbar */
}

.nav-btm-mod-light-spaced .service-links-home {
    display: flex;
    position: fixed;
    top: 65px;
    background: none;
    border: none;
    width: 200px;
    height: 100px;
}

.nav-btm-mod-light-spaced .contact-link {
    color: #f79421 !important;
}

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

.service-hover {
    background: none;
    border: none;
    font: 400 14px Poppins;
    text-align: start;
}

.service-hidden {
    /* position: absolute; */
    position: fixed;
    top: 50px;
    right: 300px;
    width: 200px;
    display: none;
}

.service-links {
    display: flex;
    position: fixed;
    position: absolute;

    top: 50px;
    background: none;
    border: none;
    width: 200px;
    height: 100px;
}

.service-links a {
    padding: 5px 10px;
    text-align: center;
    background-color: rgb(247, 148, 39, 0.8);
    border-radius: 5px;
    margin: 5px 0;
    border: 1px solid #0c2d48;
    box-shadow: 0 5px 5px grey;
}

.service-links a:hover {
    background-color: #0c2d48;
    text-transform: uppercase;
    color: #7988F3;
    font-weight: 500;
    text-decoration: #7988F3 1px;
}

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

.service-links-home {
    display: flex;
    position: fixed;
    top: 40px;
    background: none;
    border: none;
    width: 200px;
    height: 100px;
}

.service-links-home a {
    padding: 5px 10px;
    text-align: center;
    background-color: rgb(247, 148, 39, 0.8);
    border-radius: 5px;
    margin: 5px 0;
    border: 1px solid #0c2d48;
    box-shadow: 0 5px 5px grey;
}

.service-links-home a:hover {
    background-color: #0c2d48;
    text-transform: uppercase;
    color: #7988F3;
    font-weight: 500;
    text-decoration: #7988F3 1px;
}

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

.sdiv:hover .service-hidden {
    display: block;
}

.service-hidden:hover {
    display: block;
}

.nav-btm section {
    display: flex;
    border: 1px solid #0c2d48;
    border-radius: 10px;
    padding: 20px;
    display: none;
    position: absolute;
    right: 10%;
    top: 65%;
    background-color: white;
}

.nav-btm section div a {
    padding: 5px 0;
}

.nav-btm-tab {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.nav-btm-tab p {
    font: 500 40px Poppins;
    position: absolute;
    right: 10%;
}

.nav-btm-tab p:hover {
    cursor: pointer;
}

/* All Side Icons */
.right-icons,
.left-icons {
    height: 100%;
    max-height: -webkit-fill-available;
    max-height: 100em;
    width: 65px;
    position: fixed;
    top: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.home-icons-left {
    display: none;
}

.right-icons {
    right: 3%;
}

.left-icons {
    left: 3%;
}

/* Side-icons */
.side-icons {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    height: 200px;
    position: relative;
    top: 0%;
}

.side-icons img:hover {
    transform: scale(1.2, 1.2);
}

.side-icons img {
    width: 30px;
    height: 30px;
    margin: auto;
}

/* Chat Box */
.chat-icon {
    height: 200px;
    width: 320px;
    z-index: 5;
    position: absolute;
    bottom: 13%;
    display: none;
}

.chat-right {
    right: 0;
}

.chat-left {
    left: 0;
}

.chat-img img {
    width: 45px;
}

.chat-img img:hover {
    transform: scale(1.2, 1.2);
    cursor: pointer;
}

.chat-img {
    position: absolute;
    bottom: 3%;
    right: 0;
    font: 300 10px Poppins;
    align-items: center;
}

.chat-box-div {
    position: absolute;
    height: 100%;
    bottom: 0;
    right: 0;
    display: none;
}

.chat-box {
    width: 330px;
    border: 1px solid #0c2d48;
    border-radius: 10px;
    padding: 10px;
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: white;
}

.chat-box form input {
    border: 1px solid grey;
    border-radius: 5px;
    width: 90%;
    padding: 5px;
    font-style: italic;
    font-family: Poppins;
}

.chat-box form {
    display: flex;
    flex-direction: row;
}

.chat-box form button {
    width: 35px;
    border-radius: 20px;
}

.dialogues {
    overflow-y: scroll;
    height: 200px;
}

.msg-user span,
.msg-backend span {
    padding: 10px;
    border-radius: 20px;
    margin: 5px;
    width: max-content;
}

.msg-user {
    align-items: flex-start;
}

.msg-user span {
    background-color: rgb(115, 155, 219);
}

.msg-backend {
    align-items: flex-end;
}

.msg-backend span {
    background-color: lightgrey;
}

/* Image-Text */
.img-txt,
.txt-img {
    display: grid;
    grid-template-columns: 55vw 45vw;
    height: 100vh;
    width: 100%;
    justify-content: center;
    overflow: clip;
    padding: 30px;
    background: linear-gradient(to bottom left, white, #E5E5E5 60%, #F9F9F9) no-repeat 0 0/100%;
}

.img-txt article,
.txt-img article {
    width: 35vw;
    padding: 20px;
    height: 100vh;
    justify-content: center;
    text-align: center;
    align-items: center;
}

.txt-img article {
    margin: auto;
}

.img-txt article h4 {
    transform: scale(1.1, 1.1) translateX(50%);
    margin-bottom: 20px;
    opacity: 0;
}

.img-txt article p {
    margin-top: 10px;
    font: 300 13px Poppins;
    transform: scale(1.1, 1.1) translateX(50%);
}

.txt-img article h4 {
    transform: scale(1.1, 1.1) translateX(-50%);
    margin-bottom: 20px;
    opacity: 0;
}

.txt-img article p {
    margin-top: 10px;
    font: 300 13px Poppins;
    transform: scale(1.1, 1.1) translateX(-50%);
}

/* Career + Contact Form + Auth Forms */
/* Career Form */
.career-form-main {
    display: grid;
    margin: auto;
}

.career-form-tab {
    width: 70vw;
    column-gap: 40px;
    row-gap: 30px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 50px);
}


.long-input {
    grid-column: span 2;
    width: 100%;
}

.career-form-tab input,
.career-form-tab select,
.career-form-pc input,
.career-form-pc select {
    border-radius: 5px;
    border: none;
    background-color: lightgrey;
    padding: 8px;
}

.career-form-pc textarea,
.career-form-tab textarea {
    padding: 8px;
}

.career-form-tab input:focus,
.career-form-tab select:focus,
.career-form-tab:focus .career-form-pc input:focus,
.career-form-pc select:focus,
.career-form-pc textarea:focus {
    outline: 1px solid #0c2d48;
}

.form-tab-input {
    font: 400 12px Poppins;
    color: #0c2d48;
}

.form-tab-input-shadow {
    font: 400 12px Poppins;
    text-shadow: 0.5px 0.5px white;
    color: #0c2d48;
}

.form-tab-input-blue {
    font: 400 12px Poppins;
    color: #2f8bc0;
}

.form-tab-input-orange {
    font: 400 12px Poppins;
    color: #f79421;
}

label[for="file-upload"] {
    display: grid;
    grid-template-columns: 30px 1fr;
    grid-template-rows: repeat(2, 1fr);
}

label[for="file-upload"] img {
    grid-row: span 2;
}

label[for="file-upload"] p {
    margin-top: 5px !important;
    transform: none !important;

}

input[type="checkbox"] {
    /*  margin: 10px 0;*/
    width: 13px;
    height: 13px;
    padding: 0;
    margin: 0;
    vertical-align: middle;
    position: relative;
    /* top: 25px; */
    right: 5px;
}

label[for="remember"] {
    display: block;
    padding-left: -15px;
    font: 300 12px Poppins !important;
    color: #0c2d48;
    text-indent: -15px;
    margin: -35px 0 20px -30px;
}

label[for="check"] {
    margin-left: 10px;
}

.career-form-tab button,
.career-form-pc button {
    background-color: #0c2d48;
    color: white;
    font-size: 14px;
    padding: 5px;
    width: 80px;
    border: none;
    border-radius: 5px;
    margin: 5px auto;
    font-family: Poppins;
    box-shadow: 2px 2px 2px grey;
}

.career-form-tab button:hover,
.career-form-pc button:hover {
    box-shadow: none;
    transform: scale(1.1, 1.1);
}

.career-tab-top {
    align-items: center;
    padding: 30px;
    margin-top: 100px;
    width: 100%;
}

.career-form-tab1 {
    width: 70vw;
    column-gap: 40px;
    row-gap: 30px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 50px);
}

.career-form-tab1 button,
.career-form-pc button {
    background-color: #f79421;
    color: #071928;
    font-size: 14px;
    padding: 8px;
    width: 80px;
    border: none;
    border-radius: 5px;
    margin: auto;
    font-family: Poppins;
    box-shadow: 2px 2px 2px rgb(151, 151, 151);
    text-shadow: 1px 1px 1px white;

}

.career-form-tab1 button:hover,
.career-form-pc button:hover {
    /* box-shadow: none; */
    box-shadow: 3px 3px 4px rgb(249, 160, 45);
    background-color: #071928;
    color: #f79421;
    transform: scale(1.3, 1.3);
}

.form-right {
    align-items: flex-end;
}

.form-left {
    transform: scale(1.1, 1.1), translateX(-100%);
    opacity: 0;
    height: 75vh;
    margin: auto;
}

.form-left-outer {
    align-items: center;
}



.career-main article h2 {
    width: 270px;
    margin: 0 auto 15px auto;
}

.career-form-pc {
    column-gap: 40px;
    row-gap: 20px;
    grid-template-columns: repeat(2, 185px);
    grid-template-rows: repeat(3, 50px);
    margin-top: 20px;
}

.career-form-pc textarea,
.career-form-tab textarea {
    background-color: lightgray;
    border: none;
    border-radius: 10px;
}

.form-select {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    position: relative;
    margin: auto;
}

.form-select select {
    width: 150px;
}

.finfo:hover #form-info {
    display: flex;
}

.form-info {
    width: 30px;
    height: 30px;
    border-radius: 20px;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin: 0 5px;
    background-color: lightgrey;
}

.form-info p {
    font-family: Satisfy;
    margin-top: 0 !important;
    transform: none !important;
}

.form-info:hover {
    background-color: #0c2d48;
    color: white;
}

#form-info {
    padding: 5px;
    width: 160px;
    font-size: 12px;
    border: 1px solid grey;
    background-color: white;
    position: absolute;
    top: 95%;
    right: 0;
    display: none;
    border-radius: 5px;
}

#subjecttype {
    color: gray;
    font-style: italic;
}

#subjecttype option {
    color: #0c2d48;
    font-style: normal, bold;

}

/*        -------------     */
.login-form-main {
    display: grid;
    margin: auto;
}

.login-form-tab {
    width: 70vw;
    column-gap: 40px;
    row-gap: 30px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 50px);
}

.login-form-tab input,
.login-form-tab select,
.login-form-pc input,
.login-form-pc select {
    border-radius: 5px;
    border: 1px, #0c2d48;
    background-color: rgb(252, 252, 252);
    padding: 8px;
}

.login-form-pc textarea,
.login-form-tab textarea {
    padding: 8px;
}

.login-form-tab input:focus,
.login-form-tab select:focus,
.login-form-tab:focus .login-form-pc input:focus,
.career-form-pc select:focus,
.career-form-pc textarea:focus {
    outline: 1px solid #0c2d48;
}

.form-input1 {
    font: 400 14px Poppins;
    color: #7988F3;
}

.form-input {
    font: 400 14px Poppins;
    color: #0c2d48;
}

.login-form-tab button,
.login-form-pc button {
    background-color: #0c2d48;
    color: white;
    font-size: 14px;
    padding: 5px;
    width: 100px;
    border: none;
    border-radius: 5px;
    margin: -45px 0 0 0;
    font-family: Poppins;
    box-shadow: 2px 2px 2px grey;

}

.login-form-tab button:hover,
.login-form-pc button:hover {
    box-shadow: 2px 2px 2px grey;
    transform: scale(1.1, 1.1);
}

.login-tab-top {
    align-items: center;
    padding: 30px;
    margin-top: 100px;
    width: 100%;
}

.login-form-pc {
    column-gap: 40px;
    row-gap: 10px;
    grid-template-columns: repeat(2, 185px);
    grid-template-rows: repeat(3, 50px);
    margin-top: 0;
}

.login-form-pc textarea,
.login-form-tab textarea {
    background-color: lightgray;
    border: none;
    border-radius: 10px;
}

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

.label-upload {
    position: relative;
    height: 30px;
}

.label-upload p {
    height: 5px;
    margin: auto 0;
}

#upload-file {
    position: absolute;
    top: 0;
    font-size: 15px;
    opacity: 0;
}

#upload-file:hover {
    cursor: pointer;
}

/* Form Submit Overlay */
.form-overlay,
.footer-overlay {
    position: absolute;
    top: 0;
    width: 100%;
    display: none;
    z-index: 99998;
}

.form-overlay {
    background: url('../images/general-icons/Rectangle.png'), url('../images/general-icons/Rectangle\ 33.png');
    height: 100vh;
}

#career-overlay {
    height: 120vh;
}

.footer-overlay {
    background: url('../images/footer/footer-black-overlay.png'), url('../images/footer/footer-message.png');
    height: 100%;
}

.form-overlay div,
.footer-overlay div {
    height: 100%;
    width: 100%;
    justify-content: center;
}

.form-overlay div {
    align-items: center;
}

.footer-overlay div {
    align-items: flex-end;
    padding: 0 3.5vw;
}

.form-overlay p,
.footer-overlay p {
    padding: 15px 40px;
    border: 1px solid grey;
    border-radius: 10px;
    line-height: 30px;
    text-align: center;
    font: 400 17px Poppins;
}

.form-overlay p {
    width: 400px;
    background: linear-gradient(to right, #585858, #ffffff);
}

.footer-overlay p {
    width: 350px;
    height: 100px;
    transform: translateY(5%);
    background: linear-gradient(to right, #585858, #ffffff);
    justify-content: center;
    text-shadow: 0 0 2px black;
}


/*---------------  frames scrolling animations additions -----------------------*/
.s-img {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

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

.scroller {
    position: fixed;
    z-index: 20;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    display: grid;
    place-items: center;
}

.scroller p {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: black;
    background: url('./assets/scroll.png') no-repeat center/contain, black;
    color: white;
    display: grid;
    place-items: center;
    animation: hoverDown 2.5s ease-in-out infinite alternate-reverse;
}

@keyframes hoverDown {
    0% {
        transform: translateY(-25%);
    }

    100% {
        transform: translateY(25%);
    }
}

#v-sec {
    width: 100%;
    min-height: 100vh;
    /*  display: none; */
    place-items: center;
    z-index: 30;
    position: fixed;
    top: 0;
    left: 0;
}

.pause-btn {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 400;
}




/* ------------------------------------------------------------------------
    --- Flex Implementation for Uniform Text-to-Text Spacing ---
------------------------------------------------------------------------ */

/* Shared container for all link elements in the flex layout */
.nav-links-flex-container {
    /* Set to flex to arrange links horizontally */
    display: flex;
    /* Vertically align all items */
    align-items: center;
    /* UPDATED: Use 4vw for responsive gap */
    gap: 4vw;
    /* Pushes the link container to the far right, 
       ensuring 'Contact Us' remains anchored to the right edge. */
    margin-left: auto;
}

/* Ensure individual links don't shrink or grow to maintain content-based width */
.nav-btm-flex a,
.nav-btm-flex button,
.nav-btm-flex-light a,
.nav-btm-flex-light button,
.nav-btm-flex-light-spaced a,
.nav-btm-flex-light-spaced button {
    flex-shrink: 0;
    flex-grow: 0;
}


/*-------- nav-btm dark (FLEX implementation) -----------*/
.nav-btm-flex {
    display: flex;
    /* Switched from grid to flex */
    justify-content: flex-start;
    align-items: center;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    height: 55px;

    /*------- Positioning (Unchanged) -----*/
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    padding-left: 11.3vw;
    padding-right: 11.3vw;
    z-index: 9999999;
    /*------------------*/
}

.nav-btm-flex img {
    width: 230px;
}

.nav-btm-flex a {
    text-decoration: none;
    color: #0c2d48;
    font: 400 14px Poppins;
}

.nav-btm-flex a.on-page,
.on-page {
    text-decoration: underline solid !important;
    font: 500 14px Poppins !important;
}

.nav-btm-flex .service-hover {
    background: none;
    border: none;
    font: 400 14px Poppins;
    text-align: start;
    color: #0c2d48;
}

.nav-btm-flex a:hover,
.service-hover:hover {
    text-decoration: underline;
    transform: scale(1.1, 1.1);
    font-weight: 500;
}

.nav-btm-flex .contact-link {
    color: #0569A1 !important;
}


.nav-btm-flex .nav-dmc-links a {
    padding: 5px 10px;
    text-align: left;
    background-color: rgb(247, 148, 39, 0.8);
    border-radius: 5px;
    margin: 5px 0;
    border: 1px solid #0c2d48;
    box-shadow: 0 5px 5px grey;
    width: 100%;
    color: #0c2d48;
}

.nav-btm-flex .nav-dmc-links a:hover {
    background-color: #0c2d48;
    text-transform: uppercase;
    /*color: #7988F3; */
    color: rgb(247, 148, 39, 1);
    font-weight: 500;
    /*text-decoration: underline #7988F3 1px; */
    text-decoration: underline rgb(247, 148, 39, 1) 1px;
    /*text-align: center;*/
    text-shadow: 1px 1px 2px rgba(234, 238, 241, 0.5);

}

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


/*-------- nav-btm light (FLEX implementation) -----------*/
.nav-btm-flex-light {
    display: flex;
    /* Switched from grid to flex */
    justify-content: flex-start;
    align-items: center;
    box-shadow: 0 4px 4px rgba(234, 233, 233, 0.25);
    height: 55px;
    /*------- Positioning (Unchanged) -----*/
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    padding-left: 11.3vw;
    padding-right: 11.3vw;
    z-index: 9999999 !important;
    transition: all 1s ease-out;
    /*------------------*/
}

.nav-btm-flex-light img {
    width: 230px;
}

.nav-btm-flex-light a {
    text-decoration: none;
    color: #bfbfbf;
    font: 400 14px Poppins;
}

.nav-btm-flex-light a.on-page,
.on-page {
    text-decoration: underline solid !important;
    font: 500 14px Poppins !important;
}

.nav-btm-flex-light .service-hover {
    background: none;
    border: none;
    font: 400 14px Poppins;
    text-align: start;
    color: #bfbfbf;
}

.nav-btm-flex-light a:hover,
.service-hover:hover {
    text-decoration: underline;
    transform: scale(1.1, 1.1);
    font-weight: 500;
}

.nav-btm-flex-light .contact-link {
    color: #f79421 !important;
}

.nav-btm-flex-light .nav-dmc-links a {
    padding: 5px 10px;
    text-align: left;
    background-color: rgb(247, 148, 39, 0.8);
    border-radius: 5px;
    margin: 5px 0;
    border: 1px solid #2d2e2e;
    box-shadow: 0 5px 5px grey;
    width: 100%;
    color: #2d2e2e;
}

.nav-btm-flex-light .nav-dmc-links a:hover {
    background-color: #4b4b4b;
    text-transform: uppercase;
    /*color: #7988F3; */
    color: rgba(253, 115, 23, 1);
    font-weight: 500;
    /*text-decoration: underline #7988F3 1px; */
    text-decoration: underline rgb(247, 148, 39, 1) 1px;
    text-shadow: 1px 1px 2px rgba(234, 238, 241, 0.5);
}

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

/*-------- nav-btm light with space in between (FLEX implementation) -----------*/
.nav-btm-flex-light-spaced {
    display: flex;
    /* Switched from grid to flex */
    justify-content: flex-start;
    align-items: center;
    border-bottom: none;
    height: 100px;
    /*------- Positioning (Unchanged) -----*/
    position: fixed;
    /*top: 10px;*/
    top: 1.2vh;
    left: 0px;
    width: 100%;
    padding-left: 11.3vw;
    padding-right: 11.3vw;
    z-index: 10000 !important;
    transition: 2s ease-in-out;
}

/* We override the default flex container spacing for the spaced version */
.nav-btm-flex-light-spaced .nav-links-flex-container {
    display: flex;
    align-items: center;
    /* Use the standard 4vw gap for all links, except where the spacer is */
    gap: 4vw;
    margin-left: auto;
}

/* Styles for the empty div spacer in the spaced layout */
.nav-btm-flex-light-spaced #video-title-spacer {
    display: block !important;
    width: 45px;
    flex-shrink: 0;
    visibility: hidden;
}

.nav-btm-flex-light-spaced img {
    width: 230px;
}

.nav-btm-flex-light-spaced a {
    text-decoration: none;
    color: #bfbfbf;
    font: 400 14px Poppins;
}

.nav-btm-flex-light-spaced a.on-page,
.on-page {
    text-decoration: underline solid !important;
    font: 500 14px Poppins !important;
}

.nav-btm-flex-light-spaced .service-hover {
    background: none;
    border: none;
    font: 400 14px Poppins;
    text-align: start;
    color: #bfbfbf;
}

.nav-btm-flex-light-spaced a:hover,
.service-hover:hover {
    text-decoration: underline;
    font-weight: 500;
}

.nav-btm-flex-light-spaced .contact-link {
    color: #f79421 !important;
}

.nav-btm-flex-light-spaced .nav-dmc-links a {
    padding: 5px 10px;
    text-align: left;
    background-color: rgb(247, 148, 39, 0.8);
    border-radius: 5px;
    margin: 5px 0;
    border: 1px solid #2d2e2e;
    box-shadow: 0 5px 5px grey;
    width: 100%;
    color: #2d2e2e;
}

.nav-btm-flex-light-spaced .nav-dmc-links a:hover {
    background-color: #4b4b4b;
    text-transform: uppercase;
    color: rgba(253, 115, 23, 1);
    font-weight: 500;
    text-decoration: underline rgb(247, 148, 39, 1) 1px;
    text-shadow: 1px 1px 2px rgba(234, 238, 241, 0.5);
}

/* ------------------------------------------------------------------------
--- DMC HOVER MENU (Dropdown Alignment and Vertical Fix) --- 
------------------------------------------------------------------------ */

/* The parent container for the button and the hidden dropdown. */
.nav-dmc-container {
    position: relative;
    flex-shrink: 0;
}

/* The actual hidden dropdown container */
.nav-dmc-menu-wrapper {
    position: absolute;
    left: 0;
    right: auto;
    z-index: 10001;
    display: none;
    white-space: nowrap;
    padding-top: 10px;
    top: 100%;
}

/* Remove the individual top positioning and use consistent approach */
.nav-btm-flex .nav-dmc-menu-wrapper,
.nav-btm-flex-light .nav-dmc-menu-wrapper,
.nav-btm-flex-light-spaced .nav-dmc-menu-wrapper {
    top: 100%;
}

/* FIX: Create an invisible bridge element to maintain hover state */
.nav-dmc-menu-wrapper::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;
    background: transparent;
}

/* Show on hover logic - apply to both container and wrapper */
.nav-dmc-container:hover .nav-dmc-menu-wrapper,
.nav-dmc-menu-wrapper:hover {
    display: block;
}

/* --- Dropdown Link Container: .nav-dmc-links --- */
.nav-dmc-links {
    display: flex;
    flex-direction: column;
    background: none;
    border: none;
    position: relative;
    z-index: 10002;
}

.nav-btm-flex-light-spaced .nav-dmc-menu-wrapper {
    left: 0 !important;
}

.nav-btm-flex-light-spaced .nav-dmc-links {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
}

.nav-btm-flex-light-spaced .nav-dmc-links a {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.nav-btm-flex-light-spaced .nav-dmc-links a {
    transform-box: fill-box !important;
    transform-origin: center center !important;
    display: inline-block !important;
    /* Ensure scale works properly */
}

.nav-btm-flex-light-spaced .nav-dmc-menu-wrapper {
    transform: none !important;
    /* Ensure parent wrapper doesn't interfere */
}

/* ------------------------------------------------------------------------
--- ESSENTIAL FIXES FOR LIGHT-SPACED NAVBAR --- 
------------------------------------------------------------------------ */

/* Text content wrapper for smooth animations */
.text-content {
    display: inline-block;
    text-align: left;
}

/* CRITICAL: Remove ALL CSS transforms to let GSAP handle animations */
/*
.nav-btm-flex-light-spaced .nav-dmc-links a,
.nav-btm-flex-light-spaced .nav-dmc-links a:hover {
    transform: none !important;
}
*/
/* ONLY target DMC dropdown links, not all links in the navbar */
.nav-btm-flex-light-spaced .nav-dmc-container .nav-dmc-links a,
.nav-btm-flex-light-spaced .nav-dmc-container .nav-dmc-links a:hover {
    transform: none !important;
}

.nav-btm-flex-light-spaced .nav-dmc-menu-wrapper,
.nav-btm-flex-light-spaced .nav-dmc-links {
    transform: none !important;
}

.nav-btm-flex-light-spaced .nav-dmc-links a {
    transform-origin: center center !important;
    display: block !important;
}


/*
.nav-btm-flex-light-spaced a[href*="contact"],
.nav-btm-flex-light-spaced a:last-child {
    margin-right: -15vw !important;
     Counteract the 11.3vw right padding 
    position: relative;
    right: 11.3vw !important;
     Push to the very right edge 
}
*/
.contact-us-edge {
    margin-right: -20.3vw !important;
}

.nav-btm-flex-light-spaced .contact-us-edge {
    margin-right: -11.3vw !important;
    flex: none !important;
    /* Completely reset flex */
    position: relative !important;
    left: 0 !important;
    /* Push it right */
}

/* *** AGGRESSIVE FIX FOR CONTACT US MOVEMENT *** */
.contact-us-link {
    /* CRITICAL: Remove from flow, allowing GSAP to move it freely */
    position: absolute !important;
    will-change: transform;
    /* Anchor it to the inner edge of the navbar's padding-right (11.3vw) */
    right: 11.3vw !important;
    /* Vertically center it in the 100px navbar */
    top: 50%;
    /* FIX: Shift the absolutely positioned link left by 4vw to create the desired gap 
       between the DMC link (the last flex item) and the Contact Us link. */
    transform: translateY(-50%) translateX(-4vw);
}





/* Initial state of the new AJAX overlay (hidden) */
#submission-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;

    z-index: 1000000 !important;

    display: flex !important;

    /* The overlay will center its content */
    justify-content: center !important;
    align-items: center !important;

    background: transparent;
    visibility: hidden;
    opacity: 0;

    /* REMOVE transform: scale(0); */
    transform: none !important;
    /* Force browser to clear any previous scaling */
    transform-origin: center center;
}

.overlay-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* Remove fixed positioning and height constraints */
    /* This allows content to center naturally within the parent #submission-overlay */
    height: 100% !important;
    width: 100%;
    position: relative;
    /* Use relative to maintain flow inside the centered fixed parent */
}

/* --- Styling for Messages (Using Classes for better separation) --- */
.ajax-status-blue {
    color: rgb(227, 227, 226, 1.0);
    text-shadow: 0 0 7px #1785fbff, 0 0 12px #a3c8f0ff;
    font-family: Poppins, sans-serif;
    font-size: 1.5em;
    /* Updated size for prominence */
    font-weight: bold;
    margin-top: 10px;
    text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.4);
}

.ajax-status-gray {
    color: rgb(251, 133, 23);
    text-shadow: 0 0 7px rgb(64, 64, 64), 0 0 12px rgb(240, 201, 163);
    font-family: Poppins, sans-serif;
    font-size: 1.5em;
    /* Updated size for prominence */
    font-weight: bold;
    margin-top: 10px;
    text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.4);
}

/*
.ajax-success-orange {
    color: rgb(255, 128, 0);
    text-shadow: 0 0 5px rgb(251, 137, 23), 0 0 10px #a3c8f0ff;
    font-size: 1.8em;
    font-family: Poppins, sans-serif;
    font-weight: bold;
    margin-top: 10px;
    text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.4);
}
*/
.ajax-success-orange {
    /* Anchors the element to the viewport, making it independent of 80% container height */
    position: fixed !important;

    /* Calculate final position relative to the bottom: 
       58% from top is 42% from bottom (100% - 58% = 42%) */
    bottom: 42%;
    top: auto;
    /* Ensure no conflict with previous top declaration */

    /* Center horizontally */
    left: 50%;
    transform: translateX(-50%);

    /* Other styles remain for appearance */
    color: rgb(255, 128, 0);
    text-shadow: 0 0 5px rgb(251, 137, 23), 0 0 10px #a3c8f0ff;
    font-size: 1.8em;
    font-family: Poppins, sans-serif;
    font-weight: bold;
    /* margin-top: 10px; Removed since we use fixed position */
    text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.4);
}

/* CSS for the circular gradient background (managed by JS class toggle) */
.active-overlay {

    /* 1. Lightest Center (Starting Point) color stop 1*/
    background: radial-gradient(circle at center,
            rgba(121, 182, 192, 1.0) 0%,
            /* the % defines the distance from the center at which that color stop is reached.*/
            /* Start immediately at 0% */

            /* 2. Transition Point 1 (Widen the blend area) color stop 2*/
            rgba(2, 63, 85, 0.9) 50%,
            /* Pushed from 20% to 30% */

            /* 3. Transition Point 2 color stop 3*/
            rgba(2, 46, 62, 0.8) 65%,
            /* Pushed from 30% to 55% */

            /* 4. Transition Point 3 (Deepest Color) color stop 4*/
            rgba(1, 27, 40, 0.7) 83%,
            /* Pushed from 50% to 75% */

            /* 5. Edge Fade (Final, darkest color with low opacity) color stop 5*/
            rgba(1, 27, 40, 0.6) 93%
            /* Full extension to the edge */
        ) !important;
}

.active-overlay-contact {

    /* 1. Lightest Center (Starting Point) color stop 1*/
    background: radial-gradient(circle at center,
            rgb(216, 224, 225) 0%,
            /* the % defines the distance from the center at which that color stop is reached.*/
            /* Start immediately at 0% */

            /* 2. Transition Point 1 (Widen the blend area) color stop 2*/
            rgba(73, 74, 74, 0.9) 50%,
            /* Pushed from 20% to 30% */

            /* 3. Transition Point 2 color stop 3*/
            rgba(56, 56, 56, 0.8) 65%,
            /* Pushed from 30% to 55% */

            /* 4. Transition Point 3 (Deepest Color) color stop 4*/
            rgba(43, 43, 43, 0.7) 83%,
            /* Pushed from 50% to 75% */

            /* 5. Edge Fade (Final, darkest color with low opacity) color stop 5*/
            rgba(26, 26, 26, 0.6) 93%
            /* Full extension to the edge */
        ) !important;
}

#thank-you-flower svg {
    /* Sets the size of the SVG relative to the font-size of the parent #thank-you-flower */
    width: 1em;
    height: 1em;
}

#thank-you-flower {
    position: absolute;
    /* Center it horizontally and vertically within its parent (.overlay-content) */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* Styling for the Unicode character (adjust color/size for your design) */
    font-size: 3.5em;
    /* This also controls the final size of the SVG (4em tall) in case u use svg instead of emoji */

    /* Make it visible */
    line-height: 1;
    /* Ensure centering is precise */
    color: rgb(255, 128, 0);
    /* Match the orange theme */
    text-shadow: 0 0 5px rgb(251, 137, 23, 0.5);

    /* Ensure it's above the overlay but below the messages if needed (optional) */
    z-index: 99;

    /* Start hidden (opacity: 0 is already in the HTML/GSAP will handle it) */
}