@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap'); */

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

/*
body{
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}
*/

/* HOME - Preload */
.homepage-preloader {
    height: 100%;
    width: 100%;
    position: relative;
    background: #b70606;

}

.scroll {
    position: absolute;
    top: 90%;
    right: 50%;
    height: 40px;
    animation: scroll-btn 1.5s ease-in-out infinite alternate;
}

/* HOME - PC */
.home-hero {
    height: 100vh;
    width: 100%;
    display: grid;
    -ms-grid-columns: 1fr 2fr 4fr;
    grid-template-columns: 1fr 2fr 4fr;
    position: relative;
    background: linear-gradient(to right, #F9F9F9, #E5E5E5 40%, white 50%, white) no-repeat 0 0/100%;
}


.home-hero-img1 {
    height: 60vh;
    align-self: flex-end;
    background: url('../images/homepage/plant.png') no-repeat right bottom/contain;
    ;
}

.home-hero-img2 {
    height: 100vh;
    width: 100%;
    align-self: flex-end;
    background: url('../images/homepage/wg-gif1.gif') no-repeat 1vw bottom/auto 85vh;

}

.hero-empty {
    width: 100%;
    height: 100%;
}

.hero-text {
    align-items: center;
    justify-content: center;
    font-family: Poppins;
    text-align: center;
    position: absolute;
    width: 40vw;
    top: 30%;
    left: 20%;
    transform: translateY(-100%);
}

.hero-text h5 {
    color: #0F0F42;
    margin-bottom: 40px;
}

.hero-text p {
    font: 300 14px Poppins;
}

.hero-btns {
    display: flex;
    flex-direction: row;
    font-size: 11px;
    font-weight: 300;
}

.hero-btns a {
    margin: 20px 10px;
    text-decoration: none;
    padding: 12px 10px;
    border: 1px solid #0F0F42;
    border-radius: 5px;
    box-shadow: 2px 2px 4px #0F0F42;
}

.hero-btns a:hover {
    box-shadow: none;
    transform: scale(1.05, 1.05);
}

.hero-light {
    background-color: #7988F3;
    color: #030311;
}

.hero-dark {
    background-color: #0F0F42;
    color: white;
}

.preloading-1-time {
    height: 100vh;
    width: 100%;
    /*
    display: grid;
    position: relative;
    -ms-grid-columns: 1fr 2fr 4fr;
    grid-template-columns: 1fr 2fr 4fr;
    background: linear-gradient(to right, #F9F9F9, #E5E5E5 40%, white 50%, white) no-repeat 0 0/100%;
    */
}


.home-services-test article {
    text-align: justify;
    align-items: flex-start !important;
}

.home-services-img {
    height: 100vh;
    width: 55vw;
    background: url('../images/homepage/services.png') no-repeat center/cover;
    transform: translateX(-50%);
}

.home-services-test article h4 {
    margin-bottom: 40px;
}

.home-services-test article a {
    width: 200px;
    margin: 20px auto;
    display: block;
    transform: scale(1.1, 1.1) translateX(50%);
    opacity: 0;
    font: italic 400 12px Poppins;
}

.home-services-test article a:hover {
    text-decoration: none;
    color: #0F0F42;
}

.home-vids {
    margin: 8vw 0;
    height: 400px;
}

.home-vids video {
    height: 400px;
    width: 100%;
    object-fit: cover;
}

.home-testimonial,
.home-partners {
    height: 500px;
    width: 100%;
    padding: 5vw;
    align-items: center;
    margin-bottom: 30px;
    background-color: white;
    background-attachment: fixed;
}

.home-testimonial-outer,
.home-partners-outer {
    height: 300px;
    width: 80vw;
    border: 1px solid lightgrey;
    margin: auto;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-family: Poppins;
}

.home-testimonial-outer h1 {
    font: 400 26px Poppins;
}

.home-testimonial-inner {
    height: max-content;
    width: 60vw;
    border: 1px solid black;
    margin: auto;
    justify-content: center;
    padding: 50px;
    text-align: center;
}

.home-testimonial-inner p {
    font: 300 13px Poppins;
}

.partner-imgs {
    width: 60vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    overflow: hidden;
}

.partner-imgs img {
    height: 100px;
}

.partner-imgs img:hover {
    height: 120px;
}

.carousel-dots {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    width: 150px;
    padding: 2vh;
}

.owl-dots {
    margin: 10px auto !important;
    width: 150px !important;
}

.dot,
.dot2,
.owl-dot {
    height: 12px;
    width: 12px;
    border-radius: 10px;
    border: 1px solid #0F0F42 !important;
    margin: 0 5px !important;
}

.owl-dot.active,
.active-dot {
    background-color: #7988F3 !important;
}

/* HOME - TAB */
.hero-section-tab {
    position: relative;
    height: 500px;
    width: 100%;
    margin-top: 105px;
    background: url('../images/homepage/plant.png') no-repeat -20% 105%/180px,
        url('../images/homepage/wg-gif.gif') no-repeat 30% bottom/auto 87%,
        linear-gradient(to right, #F9F9F9, #E5E5E5 40%, white 50%, white) no-repeat 0 0/100%;
}

.hero-text-tab {
    align-items: center;
    position: absolute;
    top: 5%;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 200px;
    background-position: -20% 100%;
}

.hero-text-tab h2 {
    font: 400 32px Poppins;
}

.hero-text-tab h5 {
    font: 400 15px Poppins;
}

.hero-btns-tab {
    width: 55vw;
    align-items: flex-start;
    transform: translate(15%, 70%);
}

.hero-btns-tab a {
    padding: 10px;
    text-decoration: none;
    border: 1px solid #0F0F42;
    border-radius: 3px;
    margin: 10px;
    font: 400 11px Poppins;
    box-shadow: 2px 2px 3px 1px grey;
}

.hero-tab-overlay {
    align-items: flex-end;
}

.about-tab-service img {
    height: 500px;
}

.about-tab-service h2 {
    margin-top: 15px;
}

/* CAREER - PC */
.cmain {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    padding: 0 2vw;
}

.cmain-img {
    height: 100vh;
    background: url('../images/career/cw.png') no-repeat center bottom/auto 100%;
    margin-top: 105px;
    transform: translateX(-50%);
    opacity: 0;
}

.cmain article {
    height: 80%;
    width: 100%;
    align-self: flex-end;
    align-items: center;
    transform: translateX(50%);
}

.career-img {
    height: 60vh;
}

/* CONTACT - PC */


/*############################    Scrolling Magic Styling - start ################################### */
html {
    width: 100%;
    scrollbar-width: none;
    /* Also needed to disable scrollbar Firefox */
    -ms-overflow-style: none;
    /* Disable scrollbar IE 10+ */
}

@-moz-document url-prefix() {

    /* Disable scrollbar Firefox */
    html {
        scrollbar-width: none;
    }
}

html::-webkit-scrollbar {
    width: 0px;
    background: transparent;
    /* Disable scrollbar Chrome/Safari/Webkit */
}

body {
    padding: 0;
    margin: 0;
    background: #080808;
    /* this will appear as a transition set it to white for better understanding of its effect */
    /*
    position: relative;
    width: 100%;
    */
}


/* original */
/*
.scrolling-block {
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: rgba(0, 0, 0, 0.8);

    width: 100%;
    min-height: fit-content;
    height: 100vh;

    position: relative;
}

.scrolling-block img {
    width: auto;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
}
*/
/* modified */

.scrolling-block {
    position: relative;

    display: grid;
    justify-content: center;
    align-items: center;

    background-color: rgba(116, 17, 17, 0.8);

    width: 100%;
    min-height: fit-content;
    height: 100vh;

}

/* Master CSS File: Universal Media Styles */
.scrolling-block video,
.scrolling-block img.sectiond-img,
/* Targets frame image placeholders (S3) */
#whiteFrame-element {
    /* Positioning and Sizing (Ensures full screen coverage) */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;

    /* Object Fit (Per your requirement) */
    object-fit: contain !important;

    /* CRITICAL: Default State - Invisible but NOT removed from flow (Use visibility/opacity) */
    opacity: 0 !important;
    visibility: hidden !important;
    /* 🛑 REMOVED display: none !important; to ensure element stays in flow for smoother transition. */

    /* Zero-duration transition is implicit without a transition property, but explicitly good for clarity */
    transition: opacity 0ms;
}

/* The ONLY way an element becomes visible */
.scrolling-block video.active-media,
.scrolling-block img.sectiond-img.active-media,
#whiteFrame-element.active-media {
    opacity: 1 !important;
    visibility: visible !important;
    /* 🛑 ADDED display: block here, as it's ONLY applied with .active-media,
       but we will prioritize opacity/visibility control in JS for timing. */
    display: block !important;
}

/*
.scrolling-block img {
    width: auto;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
}
.scrolling-block img {
   height: 100vh;
    width:  100%;
    margin-top: 0px; 
    position: absolute; 
    overflow: hidden;
}
*/

.scrolling-block.invise {
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

.scrolling-block.active {
    opacity: 1;
    transition: opacity 0.5s ease-in;
}

.scrolling-block .div-scroll {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

.scrolling-block .div-stop {
    display: none;
    width: 100%;
    height: 100vh;
}


.scrolling-stop {
    display: none;
    width: 100%;
    height: 100vh;
    position: relative;
}


.scrolling-blocking {
    position: relative;


    display: grid;
    justify-content: center;
    align-items: center;

    background-color: rgba(116, 17, 17, 0.8);

    width: 100%;
    min-height: fit-content;
    height: 100vh;

}

.scrolling-blocking img {
    width: auto;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
}

/*############################    Scrolling Magic Styling - end ################################### */

/*############################    Scrolling Magic Styling for contact.blade.php - start ############################# */

.scrolling-block-contact {
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: rgba(0, 0, 0, 0.8);

    width: 100%;
    min-height: fit-content;
    height: 100vh;

    position: relative;
}

.scrolling-block-contact img {
    width: auto;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
}

.scrolling-block-contact.invise {
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

.scrolling-block-contact.active {
    opacity: 1;
    transition: opacity 0.5s ease-in;
}

.scrolling-block1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 1s ease-in-out;
    transform: translateY(100%);
}

.scrolling-block1.active {
    transform: translateY(0);
}

.scrolling-block1.prev {
    transform: translateY(-100%);
}

/*&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&*/
/* dot indicator section is added at the bottom but not activated */
/* easy scroll dots - codepenVersion */

/*
.scroll-indicator-controller {
  position: fixed;
  top: 50%;
  transform: translate(0, -50%);
  right: 20px;
  z-index: 2;
}
@media (max-width: 1024px) {
  .scroll-indicator-controller {
    right: 10px;
  }
}
.scroll-indicator-controller > div {
  width: 20px;
  height: 20px;
  position: relative;
  border-radius: 50%;
  border: 1px solid rgb(197, 195, 195);
  background: rgba(0, 0, 0, 0.25);
  margin: 0 0 10px 0;
  cursor: pointer;
  transition: background 0.4s ease;
  will-change: transition;
}
.scroll-indicator-controller > div span {
  color: rgb(197, 195, 195);
  position: absolute;
  right: calc(100% + 8px);
  white-space: nowrap;
  top: -1px;
  font-family: arial, sans-serif;
  font-size: 16px;
  line-height: 17px;
  width: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateX(10px);
  transition: all 0.4s ease;
  will-change: transition;
  color: #faf9f9;
  font-weight: 600;
}
.scroll-indicator-controller > div span:after {
  content: "-----";
  padding-left: 5px;
  letter-spacing: -2px;
  font-family: arial, sans-serif;
  vertical-align: text-top;
  font-weight: 400;
}
@media (hover: hover) {
  .scroll-indicator-controller > div:hover span {
    width: auto;
    opacity: 1;
    overflow: visible;
    transform: translateX(0px);
  }
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .scroll-indicator-controller > div:hover span {
    width: auto;
    opacity: 1;
    overflow: visible;
    transform: translateX(0px);
  }
}
@media (hover: none) {
    .scroll-indicator-controller > div span {
      display: none;
    }
}
.scroll-indicator-controller.indi-mobile > div span {
  display: none;
}
.scroll-indicator-controller > div.active {
  background: orange;
  border-color: rgba(0, 0, 0, 0.25);
}
@supports (-ms-ime-align:auto) {
  .scroll-indicator-controller > div span {
    transition: opacity 0.4s ease;
  }
}
*/
/*&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&*/
/*############################    Scrolling Magic Styling for contact.blade.php - end  ############################# */

/* ----------------------------------------------------------------------------*/
.map-content-wrapper {
    /* Define the actual visual boundary of the map content */
    width: 80%;
    /* Adjust width to suit your desired visual map area */
    height: 90vh;

    position: relative;
    /* CRITICAL: Children positions are relative to this */

    /* Center the block within the full-screen #map-section */
    margin: 0 auto;

    z-index: 7 !important;
    /* High enough to contain all interactive elements */

    /* NEW LINE: Shift the wrapper up by 5vh (10% of viewport height) */
    transform: translateY(-10vh);

    /* DEBUG: Expose the new boundary */
    /*border: 3px dashed orange !important; */
}

.contact-main-bg {
    /*scroll-snap-align: start; */
    background-image: url('../images/contact/finalGradBg.jpg') !important;
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
    animation: change-bg 3s ease-in-out 1 both;
    /* overflow: hidden;
       height: 115vh;*/
    /*    ---   */
    height: 100vh;
    width: 100%;
}

@keyframes change-bg {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.contact-img2 {
    /* height: 100vh;
    width: 100%;
     margin-top: 110px; */
    height: 100vh !important;
}


.contact-map {
    height: 100vh;
    width: 100%;
    padding-top: 1%;
    /*  margin-top: 70px; */
    align-items: center;
    justify-content: flex-start;
    /* background: linear-gradient(to bottom left, white, #878787 60%,  #5c5b5b) no-repeat 0 0/100%;  */
    background: linear-gradient(white, #878787 60%, #5c5b5b, black) no-repeat 0 0/100%;
    z-index: 8;
    transition: 0.7s ease-in-out;
    position: relative;

    scroll-snap-align: start;

}


.contact-map h2 {
    font: 400 70px Poppins;
    color: white;
    transform: translateY(50vh);
    z-index: 7;
    margin-top: 80px;
    /*transition: 0.7s ease-in-out; */
}



.contact-map .change-text {
    font: 400 70px Poppins;
    color: #2f8bc0;
    transform: translateY(50vh);
    z-index: 6;
    margin-top: 30px;
    /*transition: 0.7s ease-in-out; */
}

.contact-map figure {
    transform-style: preserve-3d !important;
    height: 50vh;
    width: 100%;
    position: relative !important;
    top: 10%;
    align-items: center;
    perspective: 800px !important;
    transform: translateY(0%) !important;
    z-index: 1 !important;
}

.map-img,
.map-overlay {
    position: absolute;
    top: 0;
}

.map-overlay {
    left: 0;
    height: 120%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-image: radial-gradient(at 49.5% 28%, transparent 0%, transparent 5%, rgb(0, 0, 0, 0.2) 8%, black 15%);
    opacity: 1;
    /* Assume default starting opacity is 1 */
    /* Full opacity black z-index: 5;*/
    z-index: 6 !important;
    /* Set below 7 */
}



/* 2. Styles for the invisible hover trigger overlay (Precise Targeting) */
#map-hover-trigger {
    position: absolute;

    /* Set dimensions: Adjust these percentages (e.g., 60%, 70%) to get the perfect buffer size */
    width: 60%;
    height: 60%;

    /* Center the element over the map */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* Ensure it is invisible but clickable */
    z-index: 10;
    /* Must be high enough to catch mouse events over the map image */
    pointer-events: auto;
    background-color: red;
}

*/
/*  Change navbar items with contact map hover */


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

.contact-map:hover .contact-link-mod {
    color: #21f768 !important;
}


/*.contact-map:hover .map-overlay {*/
/*
.contact-map.level1-active .map-overlay {
    display: none;
    transition: 0.7s ease-in-out;
}
*/
.contact-map.level1-active .map-img-bg {
    /* display: none !important; */
    /* Set opacity to 0 to enable a smooth fade-out */
    /* opacity: 0 !important; */

    /* Ensure it retains positioning */
    /*top: -33%; */
}

/*
.contact-map.level1-active .map-img-transform { 
    display: block !important;
    transform: rotateX(0deg) scale(1, 1) !important;
    top: -37% !important;
}
*/
/*.contact-map.level1-active #location-map { */
/*display: block !important; */
/*/
    visibility: visible !important;
    opacity: 1 !important;
*/
/* Set initial, non-animated position for L1 activation */
/*transform: rotateX(40deg) scale(0.7, 0.7) !important; */
/* transform: rotateX(0deg) scale(1, 1) !important; */
/*
    top: -37% !important;
    transition: 0.7s ease-in-out;
    */
/* Keep transition for smooth animation */
/*}*/



/*.contact-map:hover .pin-red {*/
.contact-map.level1-active .pin-red {
    display: block;
    transition: 0.7s ease-in-out;
}


.p-red {
    /* ... (debugging lines removed) ... */
    z-index: 9999 !important;

    /*  CRITICAL: Align the wrapper (.p-red) to the blue/orange pin's position */

    /* Matches .pin-blue-orange top top: -50% !important;*/
    top: -10% !important;
    /* Matches .pin-blue-orange left left: 70% !important;*/
    left: 41% !important;

    position: absolute;
    /* Already defined in your code */

    /* Because .p-red starts at 45% left, we need to center the red pin image transform: translateX(-50%);*/


    /* >>> CRITICAL DEBUGGING LINES <<< */
    /* border: 5px solid limegreen !important;*/
    /* Expose the clickable anchor area */
    /*background-color: rgba(255, 0, 0, 0.2) !important;*/
    /* Make its clickable background visible */
    width: 180px;
    /* Give it a larger physical target to test */
    height: 280px;
    /* >>> END DEBUGGING LINES <<< */
    /* NOTE: We removed the conflicting 'top: -25%; left: 63%;' from here */
    /* pointer-events: none; */
}

/*.contact-map:hover .map-img {*/
.contact-map.level1-active .map-img {
    height: 100%;
    width: 85%;
    box-shadow: 10px 30px 30px rgb(0, 0, 0);

    /* animation: map-hovering 1.5s ease-in-out 1 both;*/

    /* REMOVE the conflicting transform here, let the #location-map rule handle it */
    /*transition: 0.7s ease-in-out;*/
    /* transition: height 0.7s ease-in-out, width 0.7s ease-in-out, box-shadow 0.7s ease-in-out; */
}

@keyframes map-hovering {
    0% {
        margin-top: 20px;
    }

    50% {
        margin-top: 20px;
    }

    100% {
        margin-top: 60px;
        ;
    }
}



.map-img {
    top: -17%;
    height: 100%;
    width: 100%;
    transform: translateX(1.5%);
    /* z-index: 0 !important; left: 15%;*/
}

.map-img-bg {
    /* Dimensions: Reduce size significantly. Adjust these values */
    width: 67.8% !important;
    /* Adjust as needed */
    height: 50.4% !important;
    /* Reduced width (e.g., 35% of its container) */
    /* Maintain aspect ratio */

    /* Positioning: Center it vertically and shift slightly left */
    left: 17% !important;
    /* Shifted right from the far left edge (adjust as needed) */
    /*top: 15.8% !important; */
    top: 18% !important;
    /* Start vertical positioning from the middle */

    /* Crucial: Use transform to finalize centering relative to its own dimensions */
    /*transform: translateY(-50%) translateX(-10%); */
    /* Centers vertically, then shifts slightly left */

    /* Stacking and Visibility */
    z-index: 5 !important;
    opacity: 1;
    display: block;

    box-shadow: 10px 30px 30px rgb(0, 0, 0);

    /* Debugging */
    /* border: 5px solid red !important; */
    border: none;
    position: absolute;
    /* Ensure absolute positioning relative to its parent */
}


/* 3. Map B: Transforming Image (Hidden by default) */
/*
.map-img-transform {
    top: -33%;
    perspective: 800px;
    z-index: 0 !important;
    display: none;
}
*/
#location-map {
    /* REQUIRED: Max specificity to hide on load display: none !important; */
    display: none;
    opacity: 0;

    /* Move essential 3D properties here if they aren't on the Figure/Parent */
    perspective: 800px;
    z-index: 0 !important;
}

/*-- this is pointed to from the html to the pin-red, 
so take care that it might cause an issue because there-
is already pin-red class-
.pin-purple {
    top: 19%;
    left: 45%;
    height: 100px !important;
    position: absolute;

}
*/
.pin-blue-orange {
    top: 17%;
    left: 45%;
    height: 100px !important;
    position: absolute;

}

.speedjet-fade-text {
    /* --- POSITIONING UPDATE --- */
    /* Absolute positioning relative to the main map container (#map-section) */
    position: absolute;
    /* Aligns the text beneath the pin's horizontal center (Pin is at 45% left) */
    left: 49%;
    /* Adjust top to position it visually below the pin (was 19%, pin height ~100px) */
    top: 30%;
    /* Crucial: Centers the text itself horizontally at the 45% mark */
    transform: translateX(-50%);

    z-index: 10;
    white-space: nowrap;
    /* Prevent line breaks for the short text */
    /* -------------------------- */

    /*FIX: Allow mouse events to pass through to the element below (the .p-red link) */
    pointer-events: none;

    /* Text styling */
    color: rgb(251, 124, 20);
    /* Your specific orange color */
    font-size: 1.2em;
    /* Increased for visibility, as 1em is usually too small for a title */
    font-weight: 500;
    /* Changed to 'bold' for emphasis, as 'regular' is not a standard CSS keyword */
    font-family: Poppins, sans-serif;
    /* Added sans-serif fallback */
    text-align: center;
    padding: 20px;

    /* Initial state for fade-in (hidden) */
    display: none;
    opacity: 0;
    visibility: visible;
    /* border: 5px solid rgb(240, 216, 5) !important; */
}

.pin-orange {
    height: 120px;
    position: absolute;
    top: 30%;
    left: 44%;
}

.pin-red {
    /*  Remove absolute positioning and rely on wrapper (.p-red) */
    /*top: 7% !important; */
    /* Reset to be relative to the wrapper */
    /*left: 8% !important; */
    /* Reset to be relative to the wrapper */
    /* top: 70px;
    left: 30px;
    */
    height: 100px !important;
    display: none;
    position: relative;
    /* Keep relative positioning */
    animation: pin-red-anim 1.5s ease-in-out 1 both;
    z-index: 9999 !important;
    /*pointer-events: auto; */
}

/*
@keyframes pin-red-anim {
    0% {
        top: 10%;
    }

    50% {
        top: 10%;
    }

    100% {
        top: -25%;
        ;
    }
}

.pin-red:hover {
    margin-top: -5%;
    left: 61%;
    transform: scale(1.4, 1.4);
}
*/


/*
.contact-map .pin-red:hover .map-img{
    transform: scale(1.2,1.2);
    transition: 0.7s ease-in-out;
}
*/
.map-info {
    position: absolute;
    top: 10%;
    left: 32.5%;
    height: 200px;
    width: 300px;
    z-index: 2;

    /* border: 3px solid blue !important; */
}

.map-info article {
    position: relative;
    height: 100%;
    z-index: 3;
    /* border: 3px solid rgb(240, 5, 5) !important; */
    /* Set a definitive Z-Index */
}

.map-info article section {
    /* The Level 2 info box */
    position: absolute;
    bottom: 35%;
    left: 0%;
    background-color: rgb(249, 238, 208);
    border-radius: 15px;
    box-shadow: 3px 3px 5px grey;
    z-index: 1000 !important;
    /* Must be highest to ensure it's clickable */
    width: 350px;
    height: max-content;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 10px;
    font: 400 12px Poppins;

    opacity: 0;
    pointer-events: none;
    /* ADDED: Transition for subtle fade-in/out */
    transition: opacity 0.3s ease-in-out;
    /* border: 7px solid rgb(26, 252, 14) !important; */
}

/* ADDED: Class to make the info box visible and clickable */
.map-info-visible {
    opacity: 1;
    pointer-events: auto;
    /* Enables clicks when visible/faded in */
}



.contact-tab-map {
    display: none;
    flex-direction: column;
}

.map-icons-tab {
    display: none;
}

.contact-img {
    height: 50vh;
}


.map-icons {
    display: none;
    width: 100%;
    height: 150px;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    justify-content: flex-start;
}

.map-icons-underlay {
    width: 100%;
    /*height: 100vh;*/
    background-color: black;
}

/*********************************************/
.contact-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    height: 100%;
    /* padding: 0 2vw; */
    position: relative;
}


.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}


.tool {
    margin: 5px 0px;
}

/*
button {

    padding: 10px;
    color: #fff;
    border: 1px solid #09c;
    background-color: #09c;
    border-radius: 3px;
    cursor: pointer;   
    z-index: 1000;
    margin-left:100px !important;
    margin-top: 100px !important;
  }
*/

/*==================================== snap effect using css only =======================*/
/*--- parent --*/
/*
.whole-container{
    scroll-snap-type: y mandatory;
    height: 100vh;
    overflow-y:scroll
}
*/
/*--- children --*/
/*
.all-sectons{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    scroll-snap-align: start;
}
*/
/*=====================================================================================*/

.intro-main-bg {
    position: relative;
    /* display: grid; 
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat; */
}

.intro-main-bg.complete {
    opacity: 0;
    visibility: hidden;
    /*pointer-events: none; */
}

.intro-img1 {
    height: 100vh;
    width: 100%;
    margin-top: 0px;
    position: absolute;
    overflow: hidden;
    z-index: 1 !important;
}

.intro-img2 {
    height: 100vh;
    width: 100%;
    margin-top: 0px;
    position: absolute;
    overflow: hidden;
    z-index: 2 !important;
}

.intro-img3 {
    height: 100vh;
    width: 100%;
    margin-top: 0px;
    position: absolute;
    overflow: hidden;
    z-index: 3 !important;
}

.intro-img5 {
    height: 100vh;
    width: 100%;
    margin-top: 0px;
    position: absolute;
    overflow: hidden;
    z-index: 5 !important;
}

.intro-img7 {
    height: 100vh;
    width: 100%;
    margin-top: 0px;
    position: absolute;
    overflow: hidden;
    z-index: 7 !important;
}

.overlay-img {
    position: absolute;
    /* top: 650px;     width:  5%;   overflow: hidden !important;  top: 0;*/
    height: 15% !important;
    bottom: 0;
    left: 50%;
    z-index: 4 !important;
}

.overlay-2dplane-img {
    position: absolute;
    height: 20% !important;
    bottom: 12px;
    left: 48.4%;
    z-index: 200006 !important;
}

.hero-main-sec {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.hero-main-img {
    height: 100vh;
    width: 100%;
}

.section-c-main-bg {
    position: relative;
}

.sectionc-img {
    height: 100vh;
    width: 100% !important;
    margin-top: 0px;
    position: absolute;
    z-index: 4;
    /* overflow: scroll; */
}

.section-d-main-bg {
    position: relative;
}

.sectiond-img {
    height: 100vh;
    width: 100%;
    margin-top: 0px;
    position: absolute;
    z-index: 5;
    /* overflow: scroll; */
}


/*[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[*/


.sectiond-img-anim {
    background: #03426a;
    height: 100vh;
    width: 100%;
    border-radius: 100%;
    overflow: hidden;
    transform: translate(-50%, -50%);

    z-index: 6;
}


.sectiond-img-anim {

    animation: grow 3s 1 ease-in-out;
}

@keyframes grow {
    form {
        transform: scale(0, 0);
        transform-origin: center !important;
    }

    to {
        transform: scale(2, 2);
        transform-origin: center !important;
    }
}



/*[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[*/
.section-e-main-bg {
    position: relative;
}

.sectione-img {
    height: 100vh;
    width: 100%;
    margin-top: 0px;
    position: absolute;
    z-index: 6;
    /* overflow: scroll; */
}

.section-f-main-bg {
    position: relative;
}

.sectionf-img {
    height: 100vh;
    width: 100%;
    margin-top: 0px;
    position: absolute;
    z-index: 7;
    /* overflow: scroll; */
}


.scroller {
    position: fixed;
    z-index: 20;
    top: 675px;
    left: 0;
    width: 100%;
    height: 100px;
    display: grid;
    place-items: center;
    background: url('../images/general-icons-speedjet/scroll3C.gif') no-repeat center/contain, transparent;
    animation: hoverDown 2.5s ease-in-out infinite alternate;
}


/*
.scroller p{
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: none; 
    background: url('../images/general-icons-speedjet/scroll2.png') no-repeat center/contain, transparent;
    color: white; 
    display: grid;
    place-items: center;
    animation: hoverDown 2.5s ease-in-out infinite alternate-reverse;
}
*/
@keyframes hoverDown {
    0% {
        transform: translateY(75%);
    }

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

.mouse-anim {
    position: relative;
    display: grid;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: none;
    z-index: 25;
    overflow: hidden;
}

.mouse-anim .circle-text-mouse {
    position: absolute;
    color: #b1d4e1;
    text-shadow: 0px 0px 20px rgba(255, 255, 255);
    font: 200 12px Poppins;
    user-select: none;
    pointer-events: none;
    animation: animatetext 15s linear infinite;
}

@keyframes animatetext {
    0% {
        transform: rotate(360deg);
        color: #b1d4e1;
    }

    50% {
        transform: rotate(180deg);
        color: #f79421;

    }

    100% {
        transform: rotate(0deg);
        color: #b1d4e1;
    }
}

.mouse-anim .circle-text-mouse span {
    position: absolute;
    top: -70px;
    /* matches the y of the circle diameter in transform-origin property */
    text-transform: uppercase;
    display: inline-block;
    transform-origin: 0 70px;
    /* this controls the circle diameter */
}

/* ----- arrow animatin --*/
.scroll-down-arrow {
    /*
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2hldnJvbl90aGluX2Rvd24iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiBmaWxsPSJ3aGl0ZSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTE3LjQxOCw2LjEwOWMwLjI3Mi0wLjI2OCwwLjcwOS0wLjI2OCwwLjk3OSwwYzAuMjcsMC4yNjgsMC4yNzEsMC43MDEsMCwwLjk2OWwtNy45MDgsNy44M2MtMC4yNywwLjI2OC0wLjcwNywwLjI2OC0wLjk3OSwwbC03LjkwOC03LjgzYy0wLjI3LTAuMjY4LTAuMjctMC43MDEsMC0wLjk2OWMwLjI3MS0wLjI2OCwwLjcwOS0wLjI2OCwwLjk3OSwwTDEwLDEzLjI1TDE3LjQxOCw2LjEwOXoiLz48L3N2Zz4=);
	*/
    background-image: url('../images/general-icons-speedjet/down-arrow2.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

.scroll-down-link {
    /* cursor:pointer;*/
    height: 30px;
    width: 60px;
    margin: -15px 0 0 -14px;
    line-height: 60px;
    position: absolute;

    left: 50%;
    bottom: 0px;

    text-align: center;
    font-size: 50px;
    z-index: 100;
    text-decoration: none;
    text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.4);

    animation: fade_move_down 2s ease-in-out infinite;
}


/*animated scroll arrow animation*/

@keyframes fade_move_down {
    0% {
        transform: translate(0, -20px);
        opacity: 0;
    }

    50% {
        opacity: 0.4;
    }

    100% {
        transform: translate(0, 20px);
        opacity: 0;
    }
}

/* ----- arrow animatin --*/
/*
.contact-main-bg{
    background-image: url('../images/contact/initialWhiteBg.jpg');
    background-position: center;
    background-size: cover;
    animation: change-bg 3s ease-in-out 1 both;
   
    animation-name: change-bg;
    animation-duration: 10s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 2;
    ///*
    animation: change 2s infinite ease-in-out;
    overflow: hidden;
    animation-iteration-count: 1;
    
    
}

@keyframes change-bg{
    0%{
        background-image: url('../images/contact/initialWhiteBg.jpg');
    }
    100%{
        background-image: url('../images/contact/finalGradBg.jpg');
    }
}
*/

.contact-main article {
    height: 80%;
    align-self: flex-end;
    align-items: center;
    transform: translateX(-50%);
}

.form-left {
    align-items: flex-start;
    opacity: 1;
    justify-content: center;
    background: transparent;
}

.checkbox-wrapper-contact {
    /* Using flex for better alignment control */
    display: flex;
    align-items: center;
    gap: 5px;
    /* Spacing between checkbox and label */
    margin: 10px 0;
}

.checkbox-wrapper-contact input[type="checkbox"] {
    /* Resetting input sizing to standard for a checkbox */
    width: initial;
    height: initial;
}

.contact-headings {
    width: 80%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: baseline;
    margin-top: 20px;
}

.contact-main form select {
    width: 185px;
}

.cc-form-btn {
    align-items: center;
    position: relative;
    margin-top: 30px;
    left: 60%;
    height: 100%;
}

/* CONTACT - TAB */
.contact-tab-map {
    align-items: center;
    padding: 40px;
    margin-top: 10vh;
}

.contact-tab-map h1 {
    font: 400 30px Poppins;
}

.contact-tab-map img {
    height: 200px;
}

/* New custom class for the Contact Us Submission Overlay */
.contact-submission-style {
    /* 1. Positioning relative to the parent .contact-main (which is position: relative) */
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* 2. Initial Hidden State */
    opacity: 0;
    visibility: hidden;
    /* Important for hiding initially */

    /* 3. Stacking: Ensure it covers everything inside .contact-main */
    z-index: 1000;

    /* 4. Layout for centering content */
    display: flex;
    justify-content: center;
    align-items: center;

    /* 5. Appearance */
    background-color: rgba(255, 255, 255, 0.9);
}

/* Ensure the GSAP-controlled content inside is centered */
.contact-submission-style .overlay-content-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    /* 1. Reset Font Size (Crucial for text/emoji sizing) */
    font-size: 16px !important;
    /* Set to a standard base size */
    line-height: 1.2 !important;
    /* Standard line height */

    /* 2. Reset Transform (Ensures no inherited distortion) */
    transform: none !important;
    transform-origin: center center !important;
}

.contact-submission-style.active-overlay-contact {
    visibility: visible !important;
    /* Forces the overlay to be visible */
    opacity: 1 !important;
    /* Ensure the background is visible immediately */
}

.display-none-init {
    display: none !important;
}

/* FINAL: Define correct sizing for the animated status elements (Fixes Scaling) */
#contact-loading-message,
#contact-success-message {
    font-size: 1.5em !important;
}

#contact-thank-you-flower {
    font-size: 3em !important;
    /* Appropriate size for the emoji */
}

#contact-submission-gif {
    max-width: 220px !important;
    height: auto !important;
}

#contact-loading-dots {
    display: inline-block;
    width: 1em;
    /* Width to accommodate three dots and some space */
    text-align: left;
    /* Ensures dots start from a fixed left position */
    margin-left: 0.25em;
    /* Small gap between "Sending" and the dots */
    /* Use 'em' units so the width scales with the font size of the parent */
}

/* BUSINESS - PC */
.business-services {
    height: 100vh;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    position: relative;
    transition: height 0.5s;
    overflow: hidden;
    background: linear-gradient(to bottom left, white, #E5E5E5 60%, #F9F9F9) no-repeat 0 0/100%;
}

.business-services-img1 {
    height: 100vh;
    background: url('../images/corporate-services/yellow-hat.png') no-repeat right bottom/auto 85%;
    transform: translateY(150%) scale(2, 2);
    opacity: 0;
}

.business-services-img2 {
    height: 100vh;
    background: url('../images/corporate-services/blue-hat.png') no-repeat left bottom/auto 80%;
    transform: translateY(150%) scale(2, 2);
    opacity: 0;
}

.business-services span {
    justify-content: center;
    align-items: center;
}

.business-services article {
    width: 30vw;
    align-items: center;
    text-align: center;
    font: 400 13px Poppins;
    transform: translateY(50px);
}

.business-services h3 {
    transform: translateY(-200%) scale(1.1, 1.1);
    opacity: 0;
    min-width: max-content;
    position: absolute;
    top: 20%;
    left: 0;
    right: 0;
    width: 40vw;
    margin: 0 auto;
}

.business-services article p {
    transform: translateY(-100%) scale(1.1, 1.1);
    opacity: 0;
}

.business-carousel {
    position: absolute !important;
    bottom: 5%;
    z-index: 1;
}

.owl-carousel {
    display: none;
}

.owl-carousel.owl-loaded {
    display: block;
}

.business-carousel a {
    background: rgba(255, 255, 255, 0.3);
    padding: 5px;
    border-radius: 5px;
    display: block;
    width: 40px;
}

.business-carousel a img {
    height: 30px;
}

.business-carousel a img:hover {
    transform: scale(1.1, 1.1);
}

/*
#owl-outer{
    width: 90%;
    opacity: 0;
    position: absolute !important;
    bottom: 5%;
    z-index: 1;
    margin: 0 auto;
}
*/
.cservice-products-main {
    display: block;
    height: 100vh;
    position: relative;
    flex-shrink: 0;
    background: linear-gradient(to bottom left, white, #E5E5E5 60%, #F9F9F9) no-repeat 0 0/100%;
}

.cservice-products {
    height: 100vh;
    width: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8vh 5vw;
    position: absolute;
    top: 0;
}

.cservice-article {
    width: 37.5vw;
    align-items: center;
    text-align: center;
    font-family: Poppins;
}

.cservice-product,
.cservice-product-tab {
    font-size: 15px;
    line-height: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.cservice-product:nth-child(2n-1) {
    transform: translateX(-50%)
        /*translateY(100%)*/
    ;
}

.cservice-product:nth-child(2n) {
    transform: translateX(-50%);
}

.cservice-overlay {
    height: 80vh;
    width: 60%;
    margin: 50px auto;
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    position: relative;
    top: 0;
}

.cservice-overlay img {
    height: 40px;
}

.cservice-left img:nth-child(2n-1),
.cservice-right img:nth-child(2n) {
    align-self: center;
    justify-self: flex-start;
    transform: translateX(50vw);
}

.cservice-left img:nth-child(2n),
.cservice-right img:nth-child(2n-1) {
    align-self: center;
    justify-self: flex-end;
    transform: translateX(-50vw);
}

.request-btn,
.request-link {
    background-color: #0F0F42;
    color: white;
    text-align: center;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    width: 120px;
    font: 500 13px Poppins;
    margin-top: 20px;
    box-shadow: 0 0 3px grey;
    text-decoration: none;
    opacity: 0;
}

.request-btn:hover {
    transform: scale(1.1, 1.1);
    box-shadow: none;
}

.request-link a:hover {
    transform: scale(1.15, 1.15);
}

/* BUSINESS - TAB */
.cservice-product,
.cservice-product-tab,
.rservice-product {
    width: 70vw;
    text-align: center;
    margin: 70px auto;
    font-family: Poppins;
}

.cservice-product-tab {
    font: 300 12px Poppins;
    height: 40vh;
    justify-content: space-evenly;
    display: none;
    margin: 35px auto;
}

.cservice-product img,
.rservice-product img {
    margin: 40px;
}

.rservice-product:nth-child(4) img {
    height: 300px;
    object-fit: cover;
}

.cservice-product h1,
.rservice-product h1 {
    font: 400 30px Poppins;
}

.cservice-product p,
.rservice-product p {
    font: 400 13px Poppins;
}

.cservice-tab-top,
.rservice-tab-top {
    align-items: center;
    padding: 70px;
    background: linear-gradient(to bottom left, white, #E5E5E5 60%, #F9F9F9) no-repeat 0 0/100%;
}

.grey-bg-cservice {
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom left, white, #E5E5E5 60%, #F9F9F9) no-repeat 0 0/100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    display: none;
}

.tab-hero {
    margin-top: 50px;
}

.cservice-tab-top,
.rservice-tab-top {
    flex-direction: column;
    display: none !important;
}

.cservice-tab-top img,
.rservice-tab-top img {
    height: 50vw;
    object-position: center;
    margin: auto;
}

.cservice-tab-top article,
.rservice-tab-top article {
    width: 80vw;
    align-items: center;
    text-align: center;
}

.cservice-tab-top h1,
.rservice-tab-top h1 {
    font: 400 30px Poppins;
}

.cservice-tab-top p,
.rservice-tab-top p {
    font: 300 13px Poppins;
    line-height: 20px;
    padding: 8vw;
}


/* leisure time */

.liesure-body {
    height: 100%;
    touch-action: none;
}

.liesure-body {
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -moz-box;

    /*background: #111; 
background-color: #0f0f42 !important;
*/

    -webkit-perspective: 2000px;
    perspective: 2000px;

    transform-style: preserve-3d !important;
    -webkit-transform-style: preserve-3d;

}

#carouselcontainer,
#spinning {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -moz-box;

    margin: auto;
    top: 150%;

    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d !important;

    -webkit-transform: rotateX(-10deg);
    transform: rotateX(-10deg);

    /*
    -webkit-perspective: 1100px;
    perspective: 1100px;
    */
}

#carouselcontainer img {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d !important;


    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    line-height: 200px;
    font-size: 50px;
    text-align: center;

    /*
    box-shadow: 0 0 8px #F9F9F9;
    -webkit-box-shadow: 0 0 8px #F9F9F9;
    */
    box-shadow: 0 0 8px #b1d4e1;
    -webkit-box-shadow: 0 0 8px #b1d4e1;

    -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0f0f427b);


}

#carouselcontainer img:hover {

    box-shadow: 0 0 15px #7ad3f3;
    -webkit-box-shadow: 0 0 15px #7ad3f3;
    /*
    box-shadow: 0 0 15px #d1d1d1;
    -webkit-box-shadow: 0 0 15px #d1d1d1;
    */
    -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0f0f42bb);
}


#carouselcontainer P {

    font-family: Poppins;
    position: absolute;
    font-size: 24px;
    font-weight: 700;
    top: 60%;
    left: 50%;
    text-align: center;

    transform: translate(-50%, -50%) rotateX(90deg);
    -webkit-transform: translate(-50%, -50%) rotateX(90deg);
    /* color: #F9F9F9; color:#b1d4e1; white-space: nowrap; */
    color: #2f8bc0;


    animation: textlefting 4s ease-in-out;
}

@keyframes textlefting {
    0% {
        top: 100%;
        opacity: 0;
    }

    70% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }

}

.shadowing {

    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%) rotateX(90deg);
    border-radius: 50%;
    width: 400px;
    height: 400px;
    opacity: 0.7;

    background: radial-gradient(at center center, rgba(93, 130, 189, 0.467), rgba(93, 130, 189, 0.2), transparent);
    background: -webkit-radial-gradientgradient(at center center, rgba(93, 130, 189, 0.467), rgba(893, 130, 189, 0.2), transparent);
    /*
    background: radial-gradient(at center center, #9997, #9993, transparent);
    background: -webkit-radial-gradientgradient(at center center, #9997, #9993, transparent);
    */
    filter: blur(50px);
    -webkit-filter: blur(50px);

    /*
    width: 900px;
    height: 900px;

    position: absolute; 
    top: 100%;
    left: 50%;
    
    transform: translate(-50%,-50%) rotateX(90deg);
    -webkit-transform: translate(50%,50%) rotateX(90deg);

    background: radial-gradient(center center, farthest-side, #9993, transparent); 
    background: -webkit-radial-gradient(center center, farthest-side, #9993, transparent);
    */
}

@keyframes spin {
    from {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }

    to {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
}

@keyframes spinrevert {
    from {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }

    to {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}

/*-///////////////////////////----*/
.leisure {
    padding: 20px;
    margin-top: 0px;
}

.leisure article {
    transform: translateY(-30px);
}

.leisure-carousel {
    height: 100vh;
    align-self: flex-end;
    /*
    background: url('../images/personal-services/main-lower-size1.png') no-repeat left bottom/auto 110%;
    */
    transform: translateX(100%) scale(1.5, 1.5);
}

.leisure article h4 {
    transform: translate(0, 0);
}

.leisure article h3 {
    text-align: center;
    transform: translate(0, 0);
}

.leisure article p {
    text-align: center;
    transform: translate(0, 0);
}

.leisureCarousel {
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -moz-box;
    background: #111;
    perspective: 1000px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}


/* Personal Services */
.personal-s1,
.personal-s2,
.personal-s3,
.personal-s4,
.personal-s5,
.personal-s6,
.personal-s8 {
    padding: 20px;
}

.personal-s1 article,
.personal-s2 article,
.personal-s3 article,
.personal-s4 article,
.personal-s5 article,
.personal-s6 article,
.personal-s8 article {
    transform: translateY(-30px);
}

.personal-s1 {
    margin-top: 30px;
}

.personal-s1-img {
    height: 100vh;
    align-self: flex-end;
    background: url('../images/personal-services/main-lower-size1.png') no-repeat left bottom/auto 110%;
    transform: translateX(100%) scale(1.5, 1.5);
}

.personal-s1 article h4 {
    transform: translate(0, 0);
}

.personal-s1 article p {
    text-align: center;
    transform: translate(0, 0);
}

.personal-s2-img {
    height: 85vh;
    transform: translateX(-100%) scale(1.5, 1.5);
    align-self: flex-end;
}

.personal-s6-img {
    height: 85vh;
    transform: translateX(-100%) scale(1.5, 1.5);
    align-self: flex-end;
}


.personal-s8-img {
    height: 85vh;
    transform: translateX(-100%) scale(1.5, 1.5);
    align-self: flex-end;
}

.ps2-img1 {
    background: url('../images/personal-services/fs.png') no-repeat 100% bottom/cover;
}

.ps6-img {
    background: url('../images/personal-services/Yacht-2.png') no-repeat 100% top/contain;
}

.ps8-img {
    background: url('../images/personal-services/Personal-Accident-Insurance.png') no-repeat 50% bottom/contain;
}

.personal-s3 {
    position: relative;
}

.personal-s3-img {
    height: 100%;
    background: url('../images/personal-services/life/woman.png') no-repeat right bottom/auto 85%;
    transform: translateX(-100%) scale(1.5, 1.5);
    align-self: flex-end;
}

.personal-s3-birds {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    transform: scale(0, 0);
}

.personal-s8-butterflies {
    width: 50%;
    height: 10vh;
    position: absolute;
    top: 0;
    transform: scale(0, 0);
}

.personal-s3-imgs {
    height: 85vh;
    transform: translate(-2vw, 20vh);
    opacity: 0;
}

.personal-s3-bird:nth-child(1) {
    height: 30vh;
    transform: translate(40vw, 1vh);
}

.personal-s3-bird:nth-child(2) {
    height: 20vh;
    transform: translate(-10vw, 10vh);
}

.personal-s3-bird:nth-child(3) {
    height: 20vh;
    transform: translate(40vw, 5vh);
}

.personal-s3-bird:nth-child(4) {
    height: 15vh;
    transform: translate(-35vw, 50vh);
}

.personal-s3-bird:nth-child(5) {
    height: 20vh;
    transform: translate(5vw, 60vh);
}

.personal-s4-img {
    height: 100vh;
    align-self: flex-end;
    background: url('../images/personal-services/retirement.png') no-repeat -4vw center/auto 70%;
    transform: translateX(100%) scale(1.5, 1.5);
}

.personal-s4 article {
    transform: translate(0, 0);
    opacity: 1;
}

.personal-s5-img {
    height: 95vh;
    align-self: flex-end;
    background: url('../images/personal-services/flower-mask-lower-size.png') no-repeat left top/auto 100%;
    transform: translateX(100%) scale(1.5, 1.5);
}

.personal-s7 {
    height: 100vh;
    align-items: center;
    padding: 0 !important;
}

.personal-s7-img {
    height: 100vh;
    align-self: flex-end;
    background: url('../images/personal-services/car-reduced-size.png') no-repeat right center/120% auto;
    transform: translateX(100%) scale(1.5, 1.5);
    overflow: visible;
}

.personal-s8a-img {
    height: 100%;
    background: url('../images/personal-services/Personal-Accident-Insurance.png') no-repeat right bottom/auto 85%;
    transform: translateX(-100%) scale(1.5, 1.5);
    align-self: flex-end;
}

.personal-s8-butterfly:nth-child(1) {
    height: 8vh;
    transform: translate(40vw, 15vh);
}

.personal-s8-butterfly:nth-child(2) {
    height: 7vh;
    transform: translate(12vw, 25vh);
}

.personal-s9-a {
    height: 100vh;
    align-items: center;
    padding: 0 !important;
}

.personal-s9a-img {
    height: 100vh;
    align-self: flex-end;
    background: url('../images/personal-services/professional-indemnity.png') no-repeat -4vw center/auto 118%;
    transform: translateX(100%) scale(1.5, 1.5);
}

.personal-s4 article {
    transform: translate(0, 0);
    opacity: 1;
}

.personal-s9-imgs {
    position: relative;
}

.personal-s9-img {
    position: absolute;
}

.personal-s9-img:nth-child(1) {
    height: 25vh;
    top: 60%;
    left: 5%;
    transform: translateX(100%);
}

.personal-s9-img:nth-child(2) {
    height: 55vh;
    left: 50%;
    top: 40%;
    transform: translateX(100%);
}

.personal-s9-img:nth-child(3) {
    height: 90vh;
    top: 5%;
    transform: translateY(-50%);
    opacity: 0;
}

.personal-s9-img:nth-child(4) {
    height: 13.5vh;
    left: 23.5%;
    top: 79%;
    transform: translateX(100%);
}

.personal-s9-img:nth-child(5) {
    height: 17.5vh;
    right: 100%;
    top: 67.5%;
    transform: translateX(-100%);
}

/* ABOUT - PC */
.about-s1 {
    margin-top: 105px;
    background: linear-gradient(to bottom left, white, #E5E5E5 60%, #F9F9F9) no-repeat 0 0/100%;
}

.about-s1 article {
    align-items: flex-start !important;
}

.about-s1-img {
    height: 100vh;
    background: url('../images/about/confident-businesswoman2.png') no-repeat center bottom/auto 100%;
    transform: translateX(-50%);
    opacity: 0;
}

.about-s2 {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    width: 100%;
    padding: 5vw 0;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom left, white, #E5E5E5 60%, #F9F9F9) no-repeat 0 0/100%;
}

.about-s2-item {
    width: 100%;
    height: 45vh;
    display: grid;
    grid-template-columns: repeat(2, 50vw);
}

.compass article {
    align-items: flex-end;
    justify-content: center;
}

.about-s2-item article h4 {
    margin-bottom: 30px;
}

.about-s2-item article p {
    width: 30vw;
    font: 300 13px Poppins;
    text-align: start;
}

.compass h4 {
    transform: translateX(-50%);
}

.compass p {
    transform: translateX(-50%);
}

.about-s2-img {
    align-items: center;
    justify-content: center;
}

.compass img {
    height: 40vh;
    transform: rotate(90deg) translate(500px, -800px) scale(0, 0);
}

.chest {
    justify-content: flex-start;
    margin-top: 20px;
}

.chest article {
    align-items: flex-start;
    justify-content: center;
}

.chest h4 {
    transform: translateX(50%);
}

.chest p {
    transform: translateX(0%);
}

.chest img {
    height: 45vh;
    transform: rotate(-45deg) translate(-1600px, 400px);
    opacity: 0;
}

.about-s3 {
    background: linear-gradient(to bottom left, white, #E5E5E5 60%, #F9F9F9) no-repeat 0 0/100%;
    padding: 20px 40px;
}

.about-s3 article {
    padding: 0 15vw;
    align-items: center;
    justify-content: center;
}

.about-s3-img {
    position: relative;
    top: 20%;
    align-items: center;
    padding: 3vw 5vh;
}

.about-s3-img img {
    height: 100px;
    position: absolute;
}

.jigsaw-piece:nth-child(1) {
    top: 50px;
    left: 150px;
    transform: translateX(-150%);
}

.jigsaw-piece:nth-child(2) {
    top: -4px;
    left: 175px;
    transform: translateY(-50%);
}

.jigsaw-piece:nth-child(3) {
    top: 17px;
    left: 233px;
}

.jigsaw-piece:nth-child(4) {
    top: 75px;
    left: 203px;
    transform: translateY(100%);
}

.about-s4 {
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: 100px 100px;
    background: linear-gradient(to bottom left, white, #E5E5E5 60%, #F9F9F9) no-repeat 0 0/100%;
}

.about-s4 h3 {
    text-align: center;
    margin-bottom: 30px;
}

.leader-grid {
    width: 80vw;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 50px;
    margin: 20px 0;
    align-items: center;
    justify-content: center;
}

.leader-grid span {
    width: 25vw;
    height: 30vw;
    background-blend-mode: overlay;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 20px;
    border-radius: 15px;
}

.leader-grid span h5 {
    transform: translateY(20px);
    color: white;
}

.leader-grid span:hover h5 {
    transform: translateY(0px);
    transition: 0.3s ease-in-out;
}

.leader-grid span p {
    transform: translateY(50px);
    opacity: 0;
    color: white;
}

.leader-grid span:hover p {
    transform: translateY(0px);
    opacity: 1;
    transition: 0.3s ease-in-out;
    font: 200 13px Poppins;
}

.leader-grid span:nth-child(1) {
    background: url('../images/about/sample\ 1.jpg') no-repeat top/cover,
        linear-gradient(to top, black, rgb(41, 41, 41), rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0));
}

.leader-grid span:nth-child(1):hover {
    background: url('../images/about/sample\ 1.jpg') no-repeat top/110%,
        linear-gradient(to top, black, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0));
}

.leader-grid span:nth-child(2) {
    background: url('../images/about/sample\ 1.jpg') no-repeat top/cover,
        linear-gradient(to top, black, rgb(41, 41, 41), rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0));

}

.leader-grid span:nth-child(2):hover {
    background: url('../images/about/sample\ 1.jpg') no-repeat top/110%,
        linear-gradient(to top, black, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0));
}

.leader-grid span:nth-child(3) {
    background: url('../images/about/sample\ 3.jpg') no-repeat top/cover,
        linear-gradient(to top, black, rgb(41, 41, 41), rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0));
}

.leader-grid span:nth-child(3):hover {
    background: url('../images/about/sample\ 3.jpg') no-repeat top/110%,
        linear-gradient(to top, black, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0));
}

.j-piece {
    position: absolute;
}

.j-piece:nth-child(1) {
    top: 25%;
    right: 0;
}

.j-piece:nth-child(2) {
    transform: translate(-72%, 22%);
}

.j-piece:nth-child(3) {
    transform: translate(-12%, 44%);
}

.j-piece:nth-child(4) {
    transform: translate(-43.5%, 99%);
}

/* ABOUT - TAB */
.about-tab {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(to bottom left, white, #E5E5E5 60%, #F9F9F9) no-repeat 0 0/100%;
    display: none;
}

.about-tab img {
    height: 300px;
    margin: 0 auto;
}

.about-tab article {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.about-tab article p {
    font: 300 13px Poppins;
    width: 75vw;
    margin: 20px 0;
}

.about-s3-tab-img {
    position: relative;
    height: 300px;
}

.about-s3-tab-img img {
    height: 100px;
}

/* Login PC */
.lmain {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    height: auto;
    padding: 0 2vw;
}

.lmain-img {
    height: 100vh;
    background: url('../images/general-icons/login3.png') no-repeat center bottom/auto 100%;
    /* margin-top: 10px; */
    z-index: 4;
    transform: translateX(-50%);
    opacity: 0;
}

.lmain article {
    height: 80%;
    width: 100%;
    align-self: flex-end;
    align-items: center;
    transform: translateX(50%);
}

.login-img {
    height: 60vh;
}


/*============================= Adding Videos Styling -- Start ===================== */
/*
#videoS0V1,
#videoS0V2Loop,
#videoS1V1,
#videoS1V2Loop,
#videoS1V3,
#videoS1V4Loop,
#videoS2V1,
#videoS2V2,
#videoS2V3,
#videoS2V4Loop,
#videoS3V1 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: contain !important;
}
*/


/*============================= Adding Videos Styling -- End ===================== */

#current-video-name-display {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(146, 239, 7, 0.75);
    color: #070707;
    padding: 8px 15px;
    border-radius: 5px;
    font-family: monospace;
    font-size: 14px;
    z-index: 999999;
    opacity: 1;
    visibility: hidden;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
    pointer-events: none;
    /* Prevents it from blocking mouse events */
}

#current-video-name-display.show {
    opacity: 1;
    visibility: visible;
}

#section-id-display {
    position: fixed;
    top: 120px;
    left: 40px;
    z-index: 1000;
    background-color: rgba(243, 240, 240, 0.5);
    color: rgb(12, 230, 107);
    padding: 10px;
    border-radius: 5px;
    font-family: sans-serif;
    font-size: 16px;
}


#scroll-hint-message {
    /* Existing styles */
    position: fixed;
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    /*transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;*/
    pointer-events: none;
    /* NEW STYLES */
    background-color: transparent;
    font-family: Poppins, sans-serif;
    font-size: 18px;
    font-weight: thin;
    text-shadow: 1px 1px 2px #000000;
}

#scroll-hint-message.show {
    opacity: 1;
    visibility: visible;
}

/* Styling for Case B: the "Please Scroll" rotating hint */
#scroll-hint-circular-text {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    transform: translate(-50%, -50%);
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
    pointer-events: none;
    z-index: 999999;
    font-size: 14px;
}

#scroll-hint-circular-text .circle-text {
    /* This is the crucial part that was missing */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;

    /* The rotation animation is applied here */
    animation: rotate 10s linear infinite;

    color: orange;
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 1px 1px 2px #000000;
}

#scroll-hint-circular-text .char {
    position: absolute;
    top: 50%;
    height: 50%;
    transform: rotate(calc(var(--char-index) * (360deg / 14)));
    transform-origin: 0 100%;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}




/* 0.5s Wobble Animation for Scroll Denial Feedback */
@keyframes ux-wobble-feedback {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    90% {
        transform: translateX(-15px);
    }

    30%,
    70% {
        transform: translateX(15px);
    }

    50% {
        transform: translateX(-3px);
    }
}

/* Class to apply the animation to the circular message */
.wobble-feedback-active {
    animation: ux-wobble-feedback 0.5s ease-in-out;
}



/* --- Styles for the main Preloader container --- */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    /* Black background */
    display: flex;
    flex-direction: column;
    /* Stack elements vertically */
    justify-content: center;
    /* Center content vertically */
    align-items: center;
    /* Center content horizontally */
    z-index: 9999;
    color: #fff;
    /* White text color */
    opacity: 1;
    /* Ensure it's visible initially */
    transition: opacity 0.5s ease-out;
    /* Keep the fade-out transition */
    justify-content: center;
    align-items: center;
    flex-direction: column;
    pointer-events: all;
}

/* --- Styles for the Square Spinner Container (Outer Wrapper) --- */
.square-spinner-container {
    width: 100px;
    /* Container size */
    height: 100px;
    /* Container size */
    position: relative;
    /* margin-bottom: 20px; */
    margin-bottom: 0px;
    overflow: hidden;
    /* Ensures any overflow from the SVG is clipped */
}

.spinner-content-wrapper {
    width: 100px;
    height: 100px;
    position: relative;
    /* This holds the absolutely-positioned children */
}


/* --- Styles for the SVG that creates the border animation --- */
.spinner-border-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* SVG takes full width of its 100px parent */
    height: 100%;
    /* SVG takes full height of its 100px parent */
    z-index: 1;
    /* NEW: Initial hidden state with transition for fading */
    opacity: 0;
    pointer-events: none;
    /* Prevents interaction when hidden */
    transition: opacity 2s ease-in-out;
    /* Add a smooth transition for fade-in */
}



/* --- Styles for the <rect> elements inside the SVG --- */
.spinner-border-svg rect {
    fill: none;
    stroke-width: 3;
    /* Border thickness */
}

/* Specific style for the static background border */
.spinner-border-svg rect:first-of-type {
    stroke: rgba(255, 255, 255, 0.2);
    /* Light border color */
}

/* --- Styles for the Animated Segment --- */
.animated-segment {
    stroke: white;
    /* Initial stroke color: White */
    stroke-dasharray: 97 291;
    /* Segment length (97px) and gap (291px) for a 97x97 rect */
    stroke-dashoffset: 0;
    animation: square-segment-run 1.5s linear infinite;
    /* Runs continuously */
    transition: stroke 2s ease-in-out;
    /* For 50% color change synchronization */
}

/* Keyframes for the smooth running segment animation */
@keyframes square-segment-run {
    to {
        stroke-dashoffset: -388;
        /* Animate one full perimeter (4 * 97 = 388) */
    }
}

/* --- BASE Styles for ALL SVG icons inside the spinner --- */
.spinner-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* CENTERS THE SVG PERFECTLY */
    transform-origin: center center;
    object-fit: contain;
    z-index: 2;
    /* Ensures the SVG icon is above the animated border */
    /* CRITICAL FIX: Only transition 'opacity' and 'transform' (for centered scaling) */
    transition: opacity 2s ease-in-out, transform 2.0s linear;
}

/* --- Specific Styles for the WHITE Icon --- */
.spinner-svg.white-icon {
    opacity: 1;
    /* Keep base width/height for context, but use scale(0) for initial size */
    width: 65px;
    height: 65px;
    /* Initial state: Scale is 0. */
    transform: translate(-50%, -50%) scale(0);
}

/* --- Specific Styles for the COLORED Icon --- */
.spinner-svg.colored-icon {
    opacity: 0;
    /* Fixed size is kept for the base asset size */
    width: 65px;
    height: 65px;
    /* Starts at full scale, fades in */
    transform: translate(-50%, -50%) scale(1);
}

/* --- States Triggered by JavaScript --- */

/* State when progress reaches 10% (for white icon growth) */
#preloader.ten-percent-state .spinner-svg.white-icon {
    /* CRITICAL: End state is full scale (scale 1). Transition is now smooth and centered. */
    transform: translate(-50%, -50%) scale(1);
}

/* State when progress reaches 50% (for icon cross-fade) */
#preloader.colored-state .animated-segment {
    stroke: #f47937;
    /* Orange color */
}

#preloader.colored-state .spinner-svg.white-icon {
    opacity: 0;
    /* Fade out white icon */
}

#preloader.colored-state .spinner-svg.colored-icon {
    opacity: 1;
    /* Fade in colored icon (size already fixed above) */
}

/* --- Styles for the "Loading assets..." text and progress number --- */
#preloader p {
    display: flex;
    /* Keep flex to center the whole line */
    align-items: flex-end;
    justify-content: center;
    width: 100px;
    /* margin-top: 20px; */
    margin-top: 0 !important;
    padding-top: 60px !important;
    /* Space between spinner and text */
    font-size: 1.2em;
    font-family: 'Poppins', sans-serif;
    /* Use your desired font */
    color: #fff;
    /* Ensure text is white */
    transition: color 2s ease-in-out;
}

#progress-wrapper {
    display: flex;
    align-items: flex-end;
    /* A non-breaking space is approx 0.5em wide. 2 spaces = 1em. */
    /* Add padding-left to push it 2 spaces away from 'Loading' */
    padding-left: 1em;
    /* Represents 2 explicit spaces (approx) */
}

/* --- Styles for the Moving Ribbon --- */
.moving-ribbon-old {
    position: absolute;
    bottom: 15%;
    left: 0;
    width: 100%;
    /*height: auto; */
    height: 2px;
    min-height: 28px;
    background-color: rgba(255, 255, 255, 0.8);
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 5px 0;
    box-sizing: border-box;
    z-index: 10000;

    /* 🟢 SWIPE-IN START STATE: Start off-screen to the right */
    transform: translateX(100%);

    /* 🟢 TRANSITIONS: 
        1. transform: For the 0.6s swipe-in motion.
        2. background-color: For the 2s color change (at 50%).
        3. opacity: For the final 0.3s fade-out (when the preloader hides). 
    */
    transition:
        transform 2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        height 2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        /* Match transform speed */
        background-color 2s ease-in-out,
        opacity 0.3s ease-in;
}

.moving-ribbon {
    position: absolute;
    bottom: 15%;
    /* Keep the bottom position for vertical anchoring */
    left: 0;
    width: 100%;

    /* 🛑 REMOVE explicit height: 2px; from here */

    background-color: rgba(255, 255, 255, 0.8);
    overflow: hidden;
    display: flex;
    align-items: center;

    padding: 0;
    /* Keep padding here for clean calculation */
    box-sizing: content-box;
    z-index: 10000;

    /* 🟢 STAGE 1 POSITION: Start off-screen */
    transform: translateX(100%);

    /* 🟢 NEW STAGE 1 HEIGHT: Use a tiny initial scale (1/14th of the final size, e.g.) */
    transform: translateX(100%) scaleY(0.07);
    /* Start thin (approx 2px thick) */

    /* 🟢 ANCHOR FIX: Set the anchor point to the top edge */
    transform-origin: top;

    /* 🟢 TRANSITIONS: Swipe is 0.6s. Scale (Height) is 0.4s. */
    transition:
        transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform-origin 0.01s linear,
        /* Ensure origin is set instantly */
        background-color 2s ease-in-out,
        /* Animate the scale separately */
        0.4s ease-out 0s transform;
}


/*  NEW CLASS: Add the padding back to the inner text container */
.moving-text {
    /* Set padding here so the parent's height transition is clean */
    padding: 5px 0;
    width: 100%;
    height: 28px;
    /* Ensure it spans full width */

    white-space: nowrap;
    font-family: 'Poppins', sans-serif;
    font-size: 1.1em;
    color: #000;
    display: inline-block;
    line-height: 1;

    animation: marquee 30s linear infinite;

    transition: color 2s ease-in-out;
    /*  transition: color 2s ease-in-out, -webkit-text-stroke 2s ease-in-out, text-shadow 2s ease-in-out; */

    /*  -webkit-text-stroke: 0px transparent;
    text-stroke: 0px transparent;
*/
    text-shadow: none;
}




/* Keyframes for the marquee animation */
@keyframes marquee {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* --- Add these new rules for the colored state of the ribbon and text --- */
#preloader.colored-state .moving-ribbon {
    background-color: rgba(98, 207, 253, 0.8);
    /* Final background to lighter blue */
}

#preloader.colored-state .moving-text {
    color: rgb(1, 19, 37);
    /* Final text color to dark blue */

    /* Text outline in the colored state 
    -webkit-text-stroke: 0.4px rgb(0, 0, 0);*/
    /* Outline for WebKit browsers 
    text-stroke: 0.4px rgb(0, 0, 0);*/
    /* Standard property, but less supported */

    /* Fallback for browsers that don't support text-stroke, simulates an outline */
    /*
    text-shadow:
        -1px -1px 0 rgb(0, 0, 0),
        1px -1px 0 rgb(0, 0, 0),
        -1px 1px 0 rgb(0, 0, 0),
        1px 1px 0 rgb(0, 0, 0);
    */
}

#preloader p {
    /* Ensure the parent paragraph is a flex container to align the spans */
    display: flex;
    align-items: flex-end;
    /* Align elements to the bottom line (optional, but good practice) */
    justify-content: center;
    /* Other existing styles like margin-top, font-size, etc., remain */
    margin-top: 20px;
    font-size: 1.2em;
    font-family: 'Poppins', sans-serif;
    color: #fff;
    /* We will use a JS-controlled class for color change, not just general p styles */
    transition: color 2s ease-in-out;
    /* For the color change */
}

/* Fixed container for 'Loading' and '...' */
#loading-text-fixed {
    /* Adjust width as needed, ensuring it's enough for "Loading" */
    width: 65px;
    text-align: right;
}

/* Fixed container for the animated dots. Wide enough for five dots and spaces. */
#loading-dots-animated {
    width: 20px;
    text-align: left;
}

/* Fixed container for the percentage number '0' through '100' */
#loading-progress-fixed {
    /* Max width needed for 100% plus the '%' sign. Approx. 4 characters. */
    /* Estimate based on 1.2em font size */
    width: 40px;
    text-align: left;
    padding-left: 1em;
    /* Represents 2 explicit spaces (approx) */
}

/* Define the new color transition state for the text based on the parent class */
#preloader.colored-state p,
#preloader.colored-state p span {
    color: #f47937 !important;
    /* The Orange color for the colored state */
}

#preloader p,
#preloader p span {
    transition: color 2s ease-in-out;
    /* Keep the 2s transition for color morphing */
}

.videos-contained {
    /* Critical for containing the video within the viewport */
    width: 100vw;
    height: 100vh;

    /* 1. Ensure the video covers the entire box */
    /* object-fit: cover; is what causes the cropping you see now */
    /* object-fit: contain; is what gives you the "fit the height" (letterboxing) */
    object-fit: contain;

    /* 2. Positioning */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}



infodesk_text_line {
    display: block;
    color: #F79421;
    font-family: 'Poppins, Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-weight: 900;
    font-size: 8px;
    /* Small because of the 3.5x scale */
    line-height: 1.1;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-shadow: 0 0 1px #f79421;
    /* Recreates the 'stroke' feel */
}

/* Positioning for the anchor containers */
#nationalgsa_txt,
#internationalgsa_txt {
    position: absolute;
    text-decoration: none;
    z-index: 30;
    pointer-events: auto;
    /* Swipe initial state: Hidden via clip-path */
    clip-path: inset(0 0 0 100%);
}

/* Using your specific coordinates */
#nationalgsa_txt {
    left: 20%;
    top: 27.5%;
    /* Adjusting slightly to align with end of Link 4 */
}

#internationalgsa_txt {
    left: 20%;
    top: 35.1%;
    /* Adjusting slightly to align with end of Link 5 */
}

.svgtxtdiv_info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 5px;
}




/* These elements move during animation and steal the hover focus */
h2.blueDark-text,
.change-text,
.speedjet-fade-text,
figure.flex-column {
    pointer-events: none !important;
}

/* Ensure the wrapper and the red pin can still receive mouse events */
.map-content-wrapper,
.p-red,
.p-red img {
    pointer-events: auto !important;
}


/* Page-specific override to ensure the white icon grows smoothly from start */
.contact-page-preloader #contact-icon-white {
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease !important;
    transform: translate(-50%, -50%) scale(1) !important;
    opacity: 1 !important;
}

.contact-page-preloader #contact-icon-colored {
    transition: opacity 0.4s ease !important;
}