@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;
}
*/
html,
body {
    /*background: #03011a;*/
    background: #0C2D48;
    font: 100% poppins, Helvetica, sans-serif;
    overflow: hidden !important;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
}

audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline;
}

.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-color: #f2f2f2;
    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: 400 1.0em 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 */
}


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

}


.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 Magic Styling for contact.blade.php - end  ############################# */

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

.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;


    scroll-snap-align: start;

}

.contact-map h2 {
    font: 400 70px Poppins;
    color: white;
    transform: translateY(50vh);
    z-index: 6;
    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 {
    height: 50vh;
    width: 100%;
    position: relative;
    top: 10%;
    align-items: center;
    perspective: 800px;
    transform: translateY(0%);
}

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

.map-overlay {
    height: 120%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-image: radial-gradient(at 49.5% 30%, transparent 0%, transparent 8%, black 15%);
    z-index: 5;
}



/*  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 {
    display: none;
    transition: 0.7s ease-in-out;
}

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


.contact-map:hover .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;

    transform: rotateX(40deg) scale(0.7, 0.7);
    transition: 0.7s ease-in-out;
}



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

    50% {
        margin-top: 20px;
    }

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





.contact-map:hover h2 {
    font: 400 50px Poppins;
    color: #0c2d48;
    transform: translateY(20px);
    transition: 0.7s ease-in-out;
}

.contact-map:hover .change-text {
    font: 400 50px Poppins;
    color: #f79421;
    transform: translateY(0);
    transition: 0.7s ease-in-out;
}

.map-img {
    top: -33%;
    height: 100%;
    width: 100%;
    z-index: 0;
}

.pin-purple {
    top: 19%;
    left: 45%;
    height: 100px !important;
    position: absolute;

}

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

.pin-red {
    top: -25%;
    left: 63%;
    z-index: 1;
    height: 110px !important;
    display: none;
    position: absolute;
    animation: pin-red-anim 1.5s ease-in-out 1 both;
}


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

.map-info {
    position: absolute;
    top: 10%;
    left: 32.5%;
    height: 200px;
    width: 300px;
    z-index: 2;
}

.map-info article {
    position: relative;
    height: 100%;
}

.map-info article section {
    position: absolute;
    bottom: 35%;
    left: 30%;
    background-color: rgb(249, 238, 208);
    border-radius: 15px;
    box-shadow: 3px 3px 5px grey;
    z-index: 1;
    width: 350px;
    height: max-content;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 10px;
    font: 400 12px Poppins;
    display: none;
}



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


.intro-main-bg {
    position: relative;
}

.intro-main-bg.complete {
    opacity: 0;
    visibility: hidden;
}

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

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

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

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

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

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


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

@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('../images/general-icons-speedjet/down-arrow2.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

.scroll-down-link {
    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;
    }
}

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

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

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

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

#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 #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;
    -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: #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);
    filter: blur(50px);
    -webkit-filter: blur(50px);
}

@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;
    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; */
    margin-top: 10px;

    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;

    width: 50vw;
    position: absolute;


}

.about_s1_txt {
    margin-top: 40px;
    height: 100vh;
    width: 50vw;
    position: absolute;
    margin-left: 50% !important;
    opacity: 0;

}

/* NEW class for the <img> tag within Section 0 */
.about-s1-img-mod {
    width: 100vw;
    /* Matches the original container width */
    height: 120vh;
    /* Matches the original container height */
    top: -10vh;
    left: -5%;
    position: absolute;
    /* Matches the original container position */
    object-fit: cover;
    /* Ensures the image covers the area */
    /* Initial state for animation */
    transform: translateX(-50%);
    /* Start position based on slide-left keyframe's 100% state */
    opacity: 0;
    /* Initial opacity based on slide-left keyframe's from state (implicitly 0 if not defined at 0% or 'from') */
}

.about-s1-img-mod1 {
    width: 50%;
    height: auto;
    top: 20%;
    left: 2%;
    position: absolute;
    object-fit: contain;
    transform: translateX(-50%);
    opacity: 0;
    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0) 70%);
    mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0.8) 30%, rgba(0, 0, 0, 0) 70%);
}



.about-s1-txt-mod {
    margin-left: 50%;
    height: 100vh;
    width: 50vw;
    position: absolute;
    opacity: 0;
    /* Initial state for animation */
    transform: translateX(50%);
    /* Start position based on slide-left keyframe's 100% state */
}



.right-half-article1 {
    position: absolute;
    top: 0;
    left: 50%;
    /* Final static position of the left edge */
    width: 50%;
    /* Final static width */
    height: 100vh;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    opacity: 1;
    /* Final static opacity */
    /* Optimize rendering for animation */
    will-change: transform, opacity;
}

.right-half-article {
    position: absolute;
    top: 0;
    left: 50%;
    /* Final static position of the left edge */
    width: 50%;
    /* Final static width */
    height: 100vh;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    opacity: 1;
    /* Final static opacity */
    /* Optimize rendering for animation */
    will-change: transform, opacity;

    animation: slideInFromRight 2s ease-out forwards;
}

@keyframes slideInFromRight {
    0% {
        transform: translateX(50vw);
        /* Moves article from its static left:50% to 100% off screen (50% + 50vw) */
        opacity: 0;
    }

    40% {
        opacity: 0;
    }

    90% {
        transform: translateX(-10vw);
        /* Moves article from its static left:50% to 40% (overshoot: 50% - 10vw) */
        opacity: 1;
    }

    100% {
        transform: translateX(5vw);
        /* Returns to its static left:50% */
        opacity: 1;
    }
}


/* NEW CSS to fix misalignment of H3 and P within the animating article */
.right-half-article .justified-txt p {
    /* This overrides the problematic `transform: translateX(50%)`
       applied by the more general `.img-txt article h4/p` rules. */
    transform: none !important;
    /* Crucial: Ensures no unwanted transform */

    /* Ensure they are visible, in case opacity: 0 was applied by other general rules */
    opacity: 1 !important;

    /* Reset any margins or padding that might be pushing them inconsistently */
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;

    /* Ensure box-sizing consistency if not already globally set */
    box-sizing: border-box;
}

.right-half-article .justified-txt h3 {
    transform: none !important;
    /* Crucial: Ensures no unwanted transform */

    /* Ensure they are visible, in case opacity: 0 was applied by other general rules */
    opacity: 1 !important;
    /* Reset any margins or padding that might be pushing them inconsistently */
    margin-left: 35% !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;

    box-sizing: border-box;
}

.h3-center-offset-mod {

    margin-left: 40% !important;
    margin-right: 0 !important;
    margin-top: 15% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    box-sizing: border-box;
}

.p-left-offset-mod {
    margin-left: 15% !important;
    margin-right: 20% !important;
    margin-top: 1% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    box-sizing: border-box;
}



/* Add padding to the justified-txt container to control spacing from article edges */
.right-half-article .justified-txt {
    padding: 0 20px;
    /* Adjust 20px as needed for desired spacing from left/right edges of article */
    box-sizing: border-box;
}



.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: 40vh;
    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;
}



/**/

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

.about-s2-item1 article h4 {
    margin-bottom: 40px;
}

.about-s2-item1 article p {
    width: 40vw;
    font: 400 16px 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: -10%;
}

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

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

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

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

.about-s3 {
    height: 100%;
    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;
    margin-top: 40%;
}

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

.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%);
}


/*-----------------------*/
/* --- New Specific Classes for Section 3 Layout --- */

/* 1. Main container for Section 3 content */
.about-s4-forS3 {
    display: flex;
    /* Ensure it's a flex container */
    flex-direction: row;
    /* CRITICAL FIX: Arrange children side-by-side */
    height: 100%;
    /* Ensure it takes full height */
    width: 100%;
    /* Ensure it takes full width */
    align-items: center;
    /* Vertically center content within the row */
    justify-content: center;
    /* Horizontally center content within the row */
    padding: 0;
    /* Remove padding from this container */
    background: linear-gradient(to right, #F9F9F9, #E5E5E5 40%, white 50%, white) no-repeat 0 0/100%;
    /* You had background-color: blue !important; inline. Consider moving it here if needed: */
    /* background-color: blue; */
}

/* 2. Image wrapper */
.about-s4-img-mod-forS3 {
    flex: 1;
    /* CRITICAL FIX: Make both image and content halves take equal width */
    height: 100%;
    /* Take full height of their parent (.about-s4-forS3) */
    display: flex;
    /* Use flex for internal image alignment */
    flex-direction: column;
    /* Align image vertically (though single item, good practice) */
    justify-content: center;
    /* Center image vertically */
    align-items: center;
    /* Center image horizontally */
    margin: 0 !important;
    /* Ensure no external margins */
    padding: 0 5%;
    /* Add some internal horizontal padding for spacing, adjust as needed */
    box-sizing: border-box;
    /* Ensure padding doesn't increase element size */
    overflow: hidden;
    /* Keep this to prevent image overflow */
}

/* 3. Text content wrapper */
.about-s4-content-mod-forS3 {
    flex: 1;
    /* CRITICAL FIX: Make both image and content halves take equal width */
    height: 100%;
    /* Take full height of their parent (.about-s4-forS3) */
    display: flex;
    /* Use flex for internal text content arrangement */
    flex-direction: column;
    /* Stack text elements vertically */
    justify-content: center;
    /* Vertically center text block within its half */
    align-items: flex-start;
    /* Align text content to the left within its container */
    margin: 0 !important;
    /* CRITICAL FIX: Remove any problematic margins (like the old margin-left: 668px) */
    padding: 0 5%;
    /* Add some internal horizontal padding for spacing, adjust as needed */
    box-sizing: border-box;
    /* Ensure padding doesn't increase element size */
    background-color: transparent;
    /*Consider moving it here if needed: */
    /* background-color: transparent; */
}

/* 4. The image itself */
#leaderMeeting,
#leaderLoop {
    display: block;
    width: 150% !important;
    height: 150%!important;
    object-fit: contain;
    position: absolute;
    left: -40% !important;
    opacity: 0;
    /* transition: opacity 1s linear makes the cross-fade smooth 
    transition: top 0.8s ease-in-out, opacity 1s linear;*/
}

#leaderMeeting {
    opacity: 1;
    z-index: 2;
    /* Very fast transition to prevent "transparency dip" */
    /*transition: opacity 0.2s linear, top 0.8s ease-in-out !important;*/
    transition: top 0.8s ease-in-out !important;
}

#leaderLoop {
    z-index: 3;
    transition: opacity 0.5s linear, top 0.8s ease-in-out !important;
    opacity: 0;
    /* top: 0vh; Loop is already at final position */
    /* transition: opacity 1s linear; */

    /* THE BLURRED BOTTOM EDGE */
    /* This creates a solid mask from the top to 80%, then fades to transparent by 100% */
    /*
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    */
}

/* 5. Specific text elements inside the content wrapper */
.about-s4-content-mod-forS3 h3,
.about-s4-content-mod-forS3 h5,
.about-s4-content-mod-forS3 p {
    margin-top: 0 !important;
    /* CRITICAL FIX: Remove negative margin-top from h3 */
    margin-bottom: 0 !important;
    /* Remove other default margins if needed */
    text-align: left;
    /* Ensure text alignment within its content half */
    width: auto !important;
    /* Let content define width unless explicitly restricted */
    /* Adjust font-sizes, colors etc. as needed here if they are not inheriting correctly */
}

/* 6. Wrapper for h5/p */
.about-s4-txt-forS3 {
    margin-top: 0 !important;
    /* Remove specific margin if it's causing issues */
    width: 100%;
    /* Ensure it takes full width of its parent for alignment */
}

/* #frameIndexDisplay3 remains unchanged, as its ID is unique and its computed styles are correct */
#frameIndexDisplay3 {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1000;
    /* Other styles already set inline for testing */
}



/* Styles for the Orange and Blue Lines only */

.orange-line {
    background-color: rgb(246, 98, 13);
    /* Your specified orange color */
    /* Position, width, height, and display properties are now handled inline in the HTML */
    z-index: 5;
    /* Ensure they are above the image */
}

.orangeL-line {
    background-color: rgb(255, 162, 56);
    /* Your specified orange color */
    /* Position, width, height, and display properties are now handled inline in the HTML */
    z-index: 5;
    /* Ensure they are above the image */
}

.blue-line {
    background-color: rgb(12, 9, 49);
    /* Your specified blue color */
    /* Position, width, height, and display properties are now handled inline in the HTML */
    z-index: 5;
    /* Ensure they are above the image */
}

.blueL-line {
    background-color: rgb(52, 153, 248);
    /* Your specified blue color */
    /* Position, width, height, and display properties are now handled inline in the HTML */
    z-index: 5;
    /* Ensure they are above the image */
}

.gray-line {
    background-color: rgb(42, 42, 42);
    /* Your specified blue color */
    /* Position, width, height, and display properties are now handled inline in the HTML */
    z-index: 5;
    /* Ensure they are above the image */
}

.grayL-line {
    background-color: rgb(141, 140, 140);
    /* Your specified blue color */
    /* Position, width, height, and display properties are now handled inline in the HTML */
    z-index: 5;
    /* Ensure they are above the image */
}

/* Keyframe Animations for the lines */

/* Orange line: Animates top-to-bottom, then disappears */
@keyframes orangeLineAnimation {
    0% {
        height: 0;
        top: 0;
        opacity: 1;
    }

    /* Start hidden at top */
    50% {
        height: 100%;
        top: 0;
        opacity: 1;
    }

    /* Line fully visible, reaches bottom */
    100% {
        height: 0;
        top: 100%;
        opacity: 0;
    }

    /* Line disappears from bottom */
}

/* Blue line: Animates bottom-to-top, then disappears */
@keyframes blueLineAnimation {
    0% {
        height: 0;
        bottom: 0;
        opacity: 1;
    }

    /* Start hidden at bottom */
    50% {
        height: 100%;
        bottom: 0;
        opacity: 1;
    }

    /* Line fully visible, reaches top */
    100% {
        height: 0;
        bottom: 100%;
        opacity: 0;
    }

    /* Line disappears from top */
}

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

/* New rules for the Section 3 image container (mohie6.png as full background) */
.about-s4-img-mod {
    position: absolute;
    /* Position relative to .about-s4 */
    top: 0;
    left: 0;
    width: 100%;
    /* Make it span the full width of .about-s4 */
    height: 100%;
    /* Make it span the full height of .about-s4 */
    overflow: hidden;
    /* Hide any overflow from the image */
    z-index: 1;
    /* Place image behind text content */
    /* background-color: tranparent !important; */
    /* Commented out for clarity, as it's transparent */
}


/* New wrapper for text content in Section 3 to place it over the image */
.about-s4-content-mod {
    position: relative;
    /* Keep it in flow, but allow z-index */
    z-index: 2;
    /* Place text above the image */
    display: flex;
    /* Make it a flex container to align its children */
    flex-direction: column;
    /* Stack title and text vertically */
    /* align-items: right; */
    /* Old value commented out */
    align-items: center;
    /* Changed to center align content horizontally within its width */
    justify-content: center;
    /* Center vertically within the wrapper */
    width: 50%;
    /* Take 50% width of parent (.about-s4) */
    height: 100%;
    /* Take full height of parent (.about-s4) */
    text-align: center;
    /* Center text within this container */
    margin-left: 50%;
    /* Position it on the right half of .about-s4 */
    /* Padding should come from .about-s4 as it encompasses all content */
}

/* New wrapper for text content in Section 3 to place it over the image */
.about-s0-content-mod {
    position: relative;
    /* Keep it in flow, but allow z-index */
    z-index: 2;
    /* Place text above the image */
    display: flex;
    /* Make it a flex container to align its children */
    flex-direction: column;
    /* Stack title and text vertically */
    /* align-items: right; */
    /* Old value commented out */
    align-items: center;
    /* Changed to center align content horizontally within its width */
    justify-content: center;
    /* Center vertically within the wrapper */
    width: 50%;
    /* Take 50% width of parent (.about-s4) */
    height: 100%;
    /* Take full height of parent (.about-s4) */
    text-align: center;
    /* Center text within this container */
    margin-left: 50%;
    /* Position it on the right half of .about-s4 */
    /* Padding should come from .about-s4 as it encompasses all content */
}

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


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


.about-s4 {
    width: 100%;
    height: 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%;
    position: relative;
    /* Ensure positioning context for absolute children */
    display: flex;
    /* Maintain flex container for its children */
    flex-direction: column;
    /* Stack children vertically */
}

.about-s4 h3 {
    text-align: center;
    margin-top: -35%;
}

.about-s4-img {
    height: 90%;
    /*
    transform: translateX(-50%);
    opacity: 0;
    */
    opacity: 1;
    width: 50vw;
    position: absolute;
    top: 5%;
    left: 0%
}

.about-s4-txt {
    /* height: 100%; */
    /* Commented out: height should be auto for content flow */
    opacity: 1;
    /* width: 50vw; */
    /* Old value commented out */
    width: 100%;
    /* Changed to 100% of parent (.about-s4-content-mod) */
    /* position: absolute; */
    /* THIS WAS THE PROBLEM - COMMENTED OUT */
    /* padding-top:20%; */
    /* Old value commented out */
    /* top: 2%; */
    /* Old value commented out */
    /* left: 2%; */
    /* Old value commented out */
    /* align-items: center; */
    /* Not applicable for non-flex container */
    /* justify-content: center; */
    /* Not applicable for non-flex container */
    text-align: center;
    /* Ensure text inside is centered */
    margin-top: 8%;
}


.leader {
    margin-top: 5%;
    margin-bottom: 5%;
    height: 100vh;
    width: 50vw;
    position: absolute;

}

.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/mohie.png') 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;
}



/* ---------------------------------------------------------------------*/
.s3d__side {
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.s3d__side.active h1 {
    left: -1%;
    font-size: 2em;
    font-family: poppins;
}

.s3d__side h1 {
    /*=== legend on the left side ===*/
    display: inline-block;
    position: absolute;
    left: -100%;
    top: 20%;
    padding: .2% 1.5% .2% 2.5%;
    background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6));
    background: linear-gradient(-90deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6));
    color: rgb(248, 130, 57);
    text-shadow: 1px 1px 0 rgba(248, 130, 57, 0.551);
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
    -webkit-transition: left 1s cubic-bezier(0.175, 0.885, 0.32, 1.05);
    transition: left 1s cubic-bezier(0.175, 0.885, 0.32, 1.05);
    z-index: 3;
}


/* Isolated Section 3 Layout */
.s3-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 255, 0, 0.2) !important;
    /* Green Debug */
}

/* Left Half: Blue Stage */
.s3-left-half {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: rgba(0, 0, 255, 0.7) !important;
    /* Blue Debug */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    opacity: 0;
}

/* Right Half: Yellow Child */
.s3-right-half {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    background-color: rgba(255, 255, 102, 1) !important;
    /* Yellow Debug */
    z-index: 10;
    opacity: 0;
}












/*(((((((((((((((((((((((((((((((((((((((((((())))))))))))))))))))))))*/

/* The class applied to the right div */
.slide-in-right {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 7% 5% 0 5%; /* Top: 5%, Right: 5%, Bottom: 0, Left: 5% */
    box-sizing: border-box;
    
    /* Animation Trigger */
    animation: slideInFromRight 1s ease-out forwards;
}

/* Keyframes for the slide-in effect */
@keyframes slideInFromRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    /* Overshoot point: moves past the center to the left */
    90% {
        transform: translateX(-5%); /* Adjust this to -10% for a stronger bounce */
        opacity: 1;
    }
    /* Settle point: returns to its original flex position */
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}