/* ==================================== */
/* **********   COMMON CSS   ********** */
/* ==================================== */
:root {
    --project-primary-font: 'primary-font';
    --project-secondry-font: 'secondary-font';

    --bg-primary: #0B3454;
    --text-primary: #0B3454;
    --border-primary: #0B3454;

    --bg-blue: #007DC3;
    --bg-blue-60: rgba(0, 125, 195, 0.6);
    --text-blue: #007DC3;
    --border-blue: #007DC3;

    --bg-white: #FFFFFF;
    --text-white: #FFFFFF;
    --border-white: #FFFFFF;

    --bg-off-white: #F8F8F8;
    --text-off-white: #F8F8F8;
    --border-off-white: #F8F8F8;

    --bg-orange: #E7B368;
    --text-orange: #E7B368;
    --border-orange: #E7B368;

    --bg-light-blue: #A6D9F5;
    --text-light-blue: #A6D9F5;
    --border-light-blue: #A6D9F5;

    --bg-dark-blue: #0A3352;
    --text-dark-blue: #0A3352;
    --border-dark-blue: #0A3352;

    --bg-light-gray: #E4DDCD;
    --text-light-gray: #E4DDCD;
    --border-light-gray: #E4DDCD;

    --bg-black: #000000;
    --bg-black-40: rgba(0, 0, 0, 0.4);
    --text-black: #000000;
    --border-black: #000000;

    --bg-light-black: #404041;
    --bg-light-black-80: rgba(64, 64, 65, 0.8);
    --bg-light-black-40: rgba(64, 64, 65, 0.4);
    --text-light-black: #404041;
    --border-light-black: #404041;

    --bg-gray: #7F8285;
    --text-gray: #7F8285;
    --border-gray: #7F8285;

    --bg-dark-gray: #414044;
    --text-dark-gray: #414044;
    --border-dark-gray: #414044;

    --bg-red: #D11242;
    --text-red: #D11242;
    --border-red: #D11242;

    --bg-purple: #51378E;
    --text-purple: #51378E;
    --border-purple: #51378E;

    --primary-font: "Poppins", sans-serif;
    --color-transparent: transparent;
    --font-64px: 4rem;
    --font-60px: 3.75rem;
    --font-54px: 3.375rem;
    --font-48px: 3rem;
    --font-44px: 2.75rem;
    --font-42px: 2.625rem;
    --font-40px: 2.5rem;
    --font-36px: 2.25rem;
    --font-34px: 2.125rem;
    --font-32px: 2rem;
    --font-30px: 1.875rem;
    --font-28px: 1.75rem;
    --font-26px: 1.625rem;
    --font-24px: 1.5rem;
    --font-22px: 1.375rem;
    --font-20px: 1.25rem;
    --font-18px: 1.125rem;
    --font-16px: 1rem;
    --font-14px: 0.875rem;
    --font-12px: 0.75rem;
    --max-width: 980px;
}

a {
    text-decoration: none;
}

@font-face {
    font-family: "secondary-font";
    src: url("../fonts/Axiforma-Light.woff") format("woff2");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "secondary-font";
    src: url("../fonts/Axiforma-Regular.woff") format("woff2");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "secondary-font";
    src: url("../fonts/Axiforma-Bold.woff") format("woff2");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "primary-font";
    src: url("../fonts/impact.woff") format("woff2");
    font-weight: 700;
    font-style: normal;
}

*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    list-style: none;
    list-style-type: none;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

html {
    font-size: 100%;
    box-sizing: inherit;
    scroll-behavior: auto !important;
    height: -webkit-fill-available;
}

body {
    background-color: var(--body-bg);
    font-family: var(--project-secondry-font);
    transition: all 0.3s ease;
    position: relative;
}

section {
    overflow: hidden;
}

a,
button {
    cursor: pointer;
    border: none;
    outline: none;
    color: inherit;
    background: none;
    box-shadow: none;
}

img,
video {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

img,
picture {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.section-padding-top {
    padding-top: 60px;
}

.section-padding-bottom {
    padding-bottom: 60px;
}

.main-container {
    padding: 0 110px !important;
}

.right-container {
    padding-right: 140px;
}

.left-container {
    padding-left: 140px;
}

.header-container {
    padding: 0 120px;
}

.cd-flex {
    display: flex;
}

.flex-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.common-heading {
    width: 100%;
    max-width: 80%;
    margin: 0 auto 36px;
    text-align: center;
}

.heading-select {
    display: flex;
    gap: 10px;
}

select.form-control {
    appearance: auto;
    -webkit-appearance: auto;
    -moz-appearance: auto;
}

.heading-btn-position {
    text-align: right;
}

.main-heading-row {
    display: flex;
    justify-content: space-between;
}

.heading-col-right h2 {
    font-size: var(--font-48px) !important;
}

.common-heading h6 {
    font-family: var(--project-primary-font);
    color: var(--text-dark-gray);
    font-size: var(--font-20px);
    text-transform: capitalize;
    font-weight: 400;
    margin-bottom: 10px;
    text-align: left;
}

.common-heading h2 {
    font-family: var(--project-primary-font);
    color: var(--text-gray);
    font-size: var(--font-54px);
    text-transform: capitalize;
    font-weight: 400;
    line-height: normal;
}

.common-heading h2 span {
    font-weight: 500;
}

.common-heading p {
    font-family: var(--project-primary-font);
    color: var(--text-dark-gray);
    font-size: var(--font-20px);
    text-transform: capitalize;
    font-weight: 400;
    margin-top: 25px;
    margin-bottom: 0;
}

/* ==================================== */
/* *****   CUSTOM CARD CSS START  ***** */
/* ==================================== */
.custom-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.custom-card .custom-card-top {
    position: relative;
}

.custom-card .custom-card-top img {
    width: 100%;
    height: 350px;
    object-fit: cover;
}

.custom-card .custom-card-bottom {
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.custom-card .custom-card-bottom .custom-card-content-top {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.custom-card .custom-card-bottom .custom-card-content-top h4 {
    font-family: var(--project-secondry-font);
    color: var(--text-gray);
    font-size: var(--font-22px);
    font-weight: 400;
    flex: 1;
}

.custom-card .custom-card-bottom .custom-card-content-top p {
    font-family: var(--project-secondry-font);
    color: var(--text-dark-gray);
    font-size: var(--font-16px);
    font-weight: 400;
    flex: 1;
}

.custom-card .custom-card-bottom .custom-card-content-top .card-badge-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.custom-card .custom-card-bottom .custom-card-content-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.custom-card .custom-card-bottom .custom-card-content-bottom .date {
    display: block;
    font-family: var(--project-secondry-font);
    color: var(--text-blue);
    font-size: var(--font-16px);
}

.product-card {
    background: var(--bg-blue);
    padding: 30px 15px;
}

.product-card .product-card-top img {
    width: 70px;
    height: 70px;
    margin: 0 auto 26px;
    object-fit: contain;
}

.product-card .product-card-content .product-card-content-top p {
    font-family: var(--project-secondry-font);
    color: var(--text-white);
    font-size: var(--font-18px);
    font-weight: 400;
    text-align: center;
    margin-bottom: 0;
}

/* ==================================== */
/* ******   CUSTOM CARD CSS END  ****** */
/* ==================================== */

/* ==================================== */
/* *********   HOME PAGE CSS   ******** */
/* ==================================== */

/* ==================================== */
/* *********  ARABIC CONTENT  ********* */
/* ==================================== */
body.ar .luxury-living-section .luxury-text-block {
    text-align: left;
}

body.ar .luxury-living-section .luxury-text-block h2 {
    margin-right: auto;
    margin-left: 0;
}

body.ar .luxury-living-section .luxury-text-block .desc {
    margin-right: auto;
    margin-left: 0;
}

body.ar .amenities-section .accordion-button::after {
    right: auto;
    left: 20px;
}

body.ar .close-btn {
    right: auto;
    left: 40px;
}

body.ar .footer-help {
    right: auto;
    left: 40px;
}

.logo {
    width: 275px;
}

.navbar {
    background-image: url(../img/header-b.jpg);
    background-position: center;
    background-size: cover;
}

.offcanvas {
    background-image: url("../img/body-image.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.fixed-body-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-image: url("../img/body-image.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    z-index: -1;
    pointer-events: none;
}

.nav-link {
    font-size: 20px !important;
    font-family: var(--project-primary-font) !important;
    color: #23272C !important;
}

.navbar .nav-link {
    position: relative;
    font-weight: 500;
    transition: color 0.3s ease;
}

.navbar .nav-link:hover {
    color: #025D4E;
}

.navbar-nav {
    gap: 40px;
}

.comman-green-background {
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.comman-green-background img {
    width: 79%;
    margin: auto;
}

p {
    font-weight: 500;
    font-size: 18px;
    margin-bottom: 10px !important;
    font-family: var(--project-secondry-font) !important;
    color: #23272C !important;
    /* text-align: justify; */
}


.about-section h4 {
    font-weight: 600;
    font-size: 30px;
    font-family: var(--project-secondry-font) !important;
    color: #A5A4A5;
    line-height: 40px;
}


#foundation .comman-green h2 {
    font-family: var(--project-primary-font);
    font-weight: 400;
    line-height: 30px;
    font-size: 62px;
    color: #fff;
    text-transform: uppercase;
}

.comman-green p {
    color: #fff !important;
    /* font-size: 14px; */
    font-size: 11px;
    line-height: 25px;
    font-family: var(--project-secondry-font) !important;
    max-width: 635px;
}

.humna-card-comman-green {
    font-size: 14px !important;
}

.comman-green p span {
    font-weight: 500;
    font-size: 14px;
    font-family: var(--project-secondry-font) !important;
    color: #fff !important;
}

.paading-common {
    padding-top: 70px;
}

.comman-green h4 {
    font-weight: 500;
    /* font-size: 21px; */
    font-size: 19px;
    font-family: var(--project-secondry-font) !important;
    color: #D5A84E !important;
    padding-bottom: 10px;
    margin-bottom: 0px;
}

.card-hover {
    position: relative;
    width: 100%;
    /* height: 400px; */
    overflow: hidden;
    cursor: pointer;
}

.defult-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #025D4E;
    justify-content: center;
    align-items: center;
    transition: 0.3s ease;
}

.defult-card img {
    width: 130px;
    height: 130px;
    object-fit: contain;
}

.defult-card h4 {
    color: #025D4E !important;
    font-size: 18px;
    font-weight: 600;
}

.overlay-card {
    position: absolute;
    inset: 0;
    background: #7a6248;
    padding: 25px;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.overlay-card h4 {
    color: #fff !important;
    font-size: 18px;
    font-weight: 700;
}

.overlay-card p {
    color: #fff !important;
    font-size: 14px;
    line-height: 1.6;
    max-width: 90%;
}

.card-hover:hover .overlay-card {
    opacity: 1;
    visibility: visible;
}

.card-hover:hover .defult-card {
    opacity: 0;
    visibility: hidden;
}

.heading-technology h2 {
    font-weight: 400;
    font-family: var(--project-primary-font);
    font-size: 55px;
    /* color: #025D4E; */
    color: #FFFFFF !important;
}

.tech-backhground .text-content,
.tech-backhground .read-more-btn {
    color: #FFFFFF !important;
}

.tech-backhground .text-content {
    max-width: 635px;
}

.tech-backhground .navi {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7427%) hue-rotate(23deg) brightness(118%) contrast(118%);
}

.more-text {
    display: none;
}

.read-more-btn {
    background: none;
    border: none;
    color: #025D4E;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    transition: 0.3s ease;
}


.text-content .bold-text {
    font-weight: 600;
    max-width: 610px;
}

.primary-btn {
    background-color: #025D4E;
    color: #FFFFFF;
    justify-content: center;
    width: fit-content;
    text-decoration: none;
    display: flex;
    text-align: center;
    width: 100%;
    font-weight: 600;
    line-height: 20px;
    font-size: 16px;
    padding: 6px 22px;
}



.color-yellow {
    font-weight: 600;
    text-transform: uppercase;
    font-family: var(--project-primary-font);
    margin: 0px;
    font-size: 55px;
    /* font-size: 45px; */
    color: #D5A84E !important;
}

.image-card h5 {
    font-weight: 600;
    font-size: 21px;
    color: #fff !important;
}

.black-background {
    background-color: #23272C;
}


.black-background p {
    font-family: var(--project-secondry-font);
    font-weight: 400;
    font-size: 14px;
    text-align: justify;
    max-width: 700px;
    color: #FFFFFF !important;
}

.swiper {
    width: 100%;
    height: 100%;
}

.mySwiper h3 {
    color: #fff !important;
    font-size: 18px;
    font-weight: 400;
    margin: 0px;
}

.mySwiper .heading-small-p {
    font-weight: 400;
    font-size: 14px;
    color: #fff !important;
}

.swiper-button-prev {
    color: #fff !important;
}

.swiper-button-next {
    color: #fff !important;
}

.backgeound-card {
    background-color: #D5A84E;
    height: 100%;
    border: 1px solid #fff;

}

.backgeound-card p {
    color: #000000 !important;
    font-weight: 400;
    font-size: 13px;
    line-height: 16px !important;
}

.backgeound-card h3 {
    font-weight: 400;
    font-family: var(--project-primary-font);
    font-size: 40px;
    color: #fff !important;
}

.image-icon img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    background-color: #025D4E;
    padding: 10px;
}

.more-text {
    display: none;
}

.last-p {
    color: #025D4E !important;
    font-size: 14px;
}

/* Let's Talk intro: match the form's 14px (`.comman-green p` forced 11px) */
.comman-green .last-p {
    font-size: 14px;
}

.navbar-expand-lg .navbar-nav .nav-link {
    padding: 0 !important;
}

.about-image {
    width: 150px;
}

.about-section p {
    font-size: 14px;
    max-width: 635px;
    text-align: justify;
}

.mission-image {
    width: 42%;
}

.core-image {
    width: 30%;
}

.whatsapp-icon {
    mix-blend-mode: difference;
}

.core-titles {
    padding-top: 30px;
}

.text-content {
    font-size: 14px;
    margin-bottom: 10px;
    max-width: 500px;
    text-align: justify;
}

.media-image {
    width: 27%;
}

.swiper-button-prev {
    left: -11px !important;
}

.swiper-button-next {
    right: -10px !important;
}

.mySwiper .swiper-slide img {
    border: 1px solid #fff;
}

.success-img {
    width: 180px;
}

.image-flip {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    height: 204px;
}


.swiper-button-prev {
    left: -9px !important;
}

.swiper-button-next {
    right: -9px !important;
}


.last-section {
    width: 215px;
}

.bg-black-color {
    background: #025D4E !important;
}


.bg-black-color p {
    color: #fff !important;
    font-size: 14px !important;
}

.comman-orenge {
    background-color: #025D4E;
}

.openx {
    width: 142px;
}

.navi {
    width: 200px;
}

.icon-image-nav img {
    height: 30px;
    width: 30px;
}


.overlay-card {
    position: absolute;
    inset: 0;
    background: #025D4E;
    padding: 25px;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.overlay-icon {
    width: 140px;
    margin: 0 auto;
    object-fit: contain;
    height: 120px;
    fill: #fff;
    z-index: 0;
    pointer-events: none;
}

.overlay-card h4,
.overlay-card p {
    position: relative;
    z-index: 2;
    text-align: center;
}

.mySwiper .swiper-slide {
    display: flex;
    justify-content: center;
}

.mySwipers .swiper-button-prev {
    position: absolute;
    left: -10px !important;
}

.mySwipers .swiper-button-next {
    position: absolute;
    right: -10px !important;
}


.parallax-section {
    position: relative;
    overflow: hidden;
}

.parallax-section img {
    will-change: transform;
}


html,
body {
    height: 100%;
    scroll-behavior: auto !important;
}

body {
    overflow-x: hidden !important;
    background: transparent !important;
    position: relative;
}

.navbar .nav-link {
    color: #fff;
    font-weight: 500;
    padding: 10px 16px;
    transition: 0.3s ease;
    position: relative;
}

.navbar .nav-link:hover {
    color: #0E5C4E !important;
}

.parallax-section .gif-img {
    width: 100%;
    height: auto;
    display: block;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.main-desktop-banner {
    position: relative;
}

.banner-heading {
    position: absolute;
    top: 50%;
    /* left: 35%; */
    left: auto;
    transform: translate(-2%, 80%);
    width: 100% !important;
    max-width: 420px !important;
}
.p-relative {
    position: relative;
}

.main-desktop-banner h4 {
    font-weight: 600;
    font-size: 20px;
    font-family: var(--project-secondry-font) !important;
    /* color: #A5A4A5; */
    /* color: #FFFFFF; */
    color: #23272c;
    line-height: normal;
}

.main-desktop-banner p {
    font-size: 14px;
    max-width: 678px;
    text-align: justify;
    color: #23272c !important;
}

.main-desktop-banner .big-s path {
    fill: #FFFFFF;
}

.gif-img {
    background-image: url(../img/latest.jpeg);
    background-position: right;
    /* background-position: center; */
    background-size: contain;
    /* background-size: cover; */
    background-repeat: no-repeat;
    background-color: #D6D7DB;
    height: 100vh;
    margin-top: 83px;
    position: relative;
    z-index: 1;
}

/* .gif-img::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #D6D7DB;
    z-index: -1;
} */

.gif-mobile {
    background-image: url(../img/latest.jpeg);
    background-position: center;
    background-size: cover;
    height: 100vh;
}

.comman-green {
    background-color: #025D4E;
}

:root {
    --bg: url("./img/body-image - Copy.png");
}

body {
    background: var(--bg) center/cover no-repeat fixed;
}

.mission-section {
    background: #025D4E;
}

.mission-section h2,
.mission-section p {
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background: var(--bg) center/cover no-repeat fixed;
}

.tech-backhground {
    /* background-image: url(../img/back-ground-image.svg); */
    /* background-image: url(../img/back-ground-image.jpeg); */
    background-color: rgb(2, 93, 78) !important;
    background-position: center;
    background-size: cover;
}

.btn-width {
    width: 207px;
}


.mission-img {
    width: 163px;
    fill: #fff;
}

.image-human {
    width: 163px;
}

.linkedin-link {
    color: #fff;
    font-size: 14px;
    text-decoration: underline;
}

.butn:link,
.butn:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    font-size: 14px;
    text-decoration: none;
    background-color: #025D4E;
    height: 54px;
    width: 180px;
    margin-right: 13px;
    font-weight: 500;
    border: none;
    text-align: center;
    font-family: var(--project-secondry-font);
    color: #fff;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}

.butn::before {
    background: #fff;
    content: "";
    height: 155px;
    opacity: 0;
    position: absolute;
    top: -50px;
    transform: rotate(35deg);
    width: 50px;
    transition: all 3000ms cubic-bezier(0.19, 1, 0.22, 1);
}

.butn::after {
    background: #fff;
    content: "";
    height: 20rem;
    opacity: 0;
    position: absolute;
    top: -50px;
    transform: rotate(35deg);
    transition: all 3000ms cubic-bezier(0.19, 1, 0.22, 1);
    width: 8rem;
}

.butn__new::before {
    left: -50%;
}

.butn__new::after {
    left: -100%;
}

.butn:hover,
.butn:active {
    transform: translateY(-3px);
    color: #fff;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.3);
}

.butn__new:hover::before {
    left: 120%;
    opacity: 0.5s;
}

.butn__new:hover::after {
    left: 200%;
    opacity: 0.6;
}

.butn span {
    z-index: 20;
}

.image-iconcard {
    fill: #025D4E;
}

.icon-image {
    fill: #025D4E;
    width: 153px;
    padding-bottom: 20px;
    height: auto;
}

.defult-card {
    background-color: transparent;
}

/* 
.video-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.video-content {
    width: 80%;
    max-width: 900px;
    position: relative;
}

.close-video {
    position: absolute;
    top: -40px;
    right: 0;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
} */


.custom-slider {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.slider-track {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    transition: transform 0.5s ease;
    cursor: grab;
}

.slide {
    min-width: 220px;
    height: 280px;
    background: #0f5c4d;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transform: scale(0.85);
    transition: all 0.4s ease;
    border-radius: 10px;
}

.slide.active {
    transform: scale(1.1);
    opacity: 1;
    z-index: 2;
}

@media (max-width: 768px) {
    .slider-track {
        gap: 20px;
    }

    .slide {
        min-width: 180px;
        height: 240px;
    }

    .slide.active {
        transform: scale(1.1);
    }
}

#preloader {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 100%;
    z-index: 1000000000000000000;
    display: flex;
}

#preloader:before,
#preloader:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    z-index: -1;
    background-color: #025D4E;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

#preloader:after {
    left: auto;
    right: 0;
}

#preloader .loader_line {
    margin: auto;
    width: 1px;
    height: 250px;
    position: relative;
    overflow: hidden;
    -webkit-transition: all 0.8s ease 0s;
    -o-transition: all 0.8s ease 0s;
    transition: all 0.8s ease 0s;
}

.loader_line:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 0%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: #fff;
    -webkit-animation: lineheight 1000ms ease-in-out 0s forwards;
    -o-animation: lineheight 1000ms ease-in-out 0s forwards;
    animation: lineheight 1000ms ease-in-out 0s forwards;
}

.loader_line:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background-color: #999999;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-animation: lineround 1200ms linear 0s infinite;
    -o-animation: lineround 1200ms linear 0s infinite;
    animation: lineround 1200ms linear 0s infinite;
    animation-delay: 2000ms;
}

@keyframes lineheight {
    0% {
        height: 0%;
    }

    100% {
        height: 100%;
    }
}

@keyframes lineround {
    0% {
        -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -o-transform: translateY(-100%);
        transform: translateY(-100%);
    }

    100% {
        -webkit-transform: translateY(200%);
        -ms-transform: translateY(200%);
        -o-transform: translateY(200%);
        transform: translateY(200%);
    }
}

.portfolio_list {
    min-height: 50vh;
}

.preloaded .loader_line:after {
    opacity: 0;
}

.preloaded .loader_line {
    opacity: 0;
    height: 100% !important;
}

.preloaded:before,
.preloaded:after {
    -webkit-animation: preloadedzero 300ms ease-in-out 500ms forwards;
    -o-animation: preloadedzero 300ms ease-in-out 500ms forwards;
    animation: preloadedzero 300ms ease-in-out 500ms forwards;
}

@keyframes preloadedzero {
    0% {
        width: 50%;
    }

    100% {
        width: 0%;
    }
}


.slick-prev:before,
.slick-next:before {
    display: none;
}

.success-slider .slick-prev:before,
.success-slider .slick-next:before {
    display: none;
}

.success-slider .slick-prev::after, 
.success-slider .slick-next::after {
    border-top: 2px solid #025D4E;
    border-right: 2px solid #025D4E;
}

.human-slider h3 {
    font-family: var(--project-secondry-font);
    font-weight: 400;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
    margin-bottom: 3px !important;
    color: #fff !important;
}
.human-slider .heading-small-p {
    /* color: #000 !important; */
    color: #c2c2c2 !important;
}
.human-slider .slick-slide {
    margin: 0px 20px 0 0;
}

.content-center {
    display: grid;
    justify-content: center;
}
.content-center img {
    height: 234ox;
    width: 234px !important;
}

.slick-prev,
.slick-next {
    width: 40px;
    height: 40px;
    z-index: 10;
}

.slick-prev {
    left: -50px;
}

.slick-next {
    right: -50px;
}

.slick-prev::after,
.slick-next::after {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center;
}

.slick-prev::after {
    transform: translate(-50%, -50%) rotate(-135deg);
}

.slick-next::after {
    transform: translate(-50%, -50%) rotate(45deg);
}

.slick-next {
    right: -20px !important;
}

.why-slider .slide-item {
    transition: all 0.4s ease;
    /* transform: scale(0.85); */
}

.why-slider .slide-item:hover {
    transform: scale(1.3);
    position: relative;
    z-index: 3;
}

/* .why-slider .slide-item.active {
    transform: scale(1.3);
} */

.slide-item.active .content-absolute {
    opacity: 1;
    visibility: visible;
}

.why-slider .slick-active.slick-center {
    transform: scale(1);
    opacity: 1;
}

.why-slider h4 {
    color: #fff !important;
    padding-top: 10px;
}

.video-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: 0.4s ease;
    z-index: 9999;
}

.video-modal.active {
    opacity: 1;
    visibility: visible;
}

.award-section {
    background: #f8f9fa;
}

.award-card {
    margin: 0 auto;
    min-height: 200px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* LEFT IMAGE */
.award-image {
    height: 100%;
}

.award-image img {
    object-fit: cover;
    height: 100%;
}

/* RIGHT CONTENT */
.award-content {
    background: #18496b;
    padding: 20px 24px;
}

.award-contents {
    background: #cda456;
    padding: 20px 24px;
}

.award-contents h3 {
    font-size: 38px;
    font-weight: 800;
    color: #fff !important;
}

.award-contents p {
    font-size: 14px;
    text-align: justify;
    height: 95px;
    overflow: auto;
    line-height: 1.7;
    color: #ffffff !important;
}

.award-content h3 {
    font-size: 38px;
    font-weight: 800;
    color: #fff !important;
}

.award-content p {
    font-size: 14px;
    line-height: 1.7;
    height: 100px;
    overflow: auto;
    text-align: justify;

    color: #fff !important;
}


.award-content p {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.award-content p::-webkit-scrollbar {
    display: none;
}

.award-contents p {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.award-contents p::-webkit-scrollbar {
    display: none;
}


img.person-slide {
    height: 100% !important;
    width: 100%;
}

.comman-p {
    max-width: 700px;
}

.background-image-mission {
    background-image: url(../img/mission-vision-bg.jpg);
    background-size: cover;
}

.background-image-mission .heading-fonts-white {
    color: #000000 !important;
}

#services .heading-fonts-white {
    color: rgb(2, 93, 78) !important;
}

#services .big-s-white-sky path {
    fill: rgb(2, 93, 78) !important;
}

#services .why-slider h4 {
    color: #1b3934 !important;
    text-align: center;
}

.background-image-mission p {
    font-size: 14px;
    max-width: 678px;
    text-align: justify;
    color: #000000 !important;
}

.heading-fonts {
    font-size: 55px;
    color: #025D4E;
    font-family: var(--project-primary-font) !important;
    font-weight: 600;
    text-transform: uppercase;
}

.heading-fonts-white {
    font-size: 55px;
    /* font-size: 45px; */
    text-transform: uppercase;
    color: #fff;
    font-family: var(--project-primary-font) !important;
    font-weight: 600;
}

.big-s {
    width: 26px;
    height: auto;
}

.big-s-white {
    width: 26px;
    /* width: 21px; */
    height: auto;
}

.big-s-white-sky {
    width: 80px;
    height: 65px;

    /* width: 67px;
    height: 55px; */
}

.font-flex {
    display: flex;
    align-items: center;
}

.big-s-white-success {
    width: 26px;
    height: 66px;
}

img.person-slide {
    height: 100% !important;
}

.value-card-bottom .value-card-content-top h6 {
    /* color: #025D4E; */
    color: #FFFFFF;
    font-size: 18px;
}

.value-card {
    padding: 40px;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all ease-in-out .3s;
}

.value-card-content-bottom p {
    font-size: 14px !important;
    color: #fff !important;
    text-align: left;
}

.value-card:hover {
    /* background: #025D4E; */
    background: rgb(255, 255, 255);
}

.value-card:hover .value-card-bottom .value-card-content-bottom p {
    opacity: 1;
    /* color: #FFFFFF; */
    color: #025D4E !important;
    transition: all ease-in-out 0s;
}

.value-card:hover .value-card-bottom .value-card-content-top h6 {
    /* color: #FFFFFF; */
    color: #025D4E;
    transition: all ease-in-out 0s;

}

.value-card .value-card-top .value-card-ic {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.value-card .value-card-top .value-card-ic img {
    /* height: 148px;
    width: 148px; */
    object-fit: contain;
    object-position: bottom;
    filter: brightness(0) saturate(100%) invert(100%) sepia(6%) saturate(7454%) hue-rotate(74deg) brightness(125%) contrast(111%);
}

.value-card:hover .value-card-top .value-card-ic img {
    /* filter: brightness(0) saturate(100%) invert(100%) sepia(6%) saturate(7454%) hue-rotate(74deg) brightness(125%) contrast(111%); */
    filter: inherit;
    transition: all ease-in-out 0s;
}

.value-card .value-card-top .value-card-ic .core-icon {
    height: 143px;
}

.value-card .value-card-top .value-card-ic .core-icon-width {
    width: 180px;
    height: 143px;
}

.value-card .value-card-bottom {
    text-align: center;
}

.value-card .value-card-bottom .value-card-content-bottom p {
    opacity: 0;
    text-align: center;
}


.why-slider .slick-slide img {
    transition: transform 0.3s ease;
    height: 240px;
}

.why-slider .slick-slide:hover {
    transform: scale(1) !important;
}

.why-slider .slick-list.draggable {
    padding: 10px 0px !important;

}

.why-slider .slick-slide img {
    width: 100%;
}

.why-slider .slide-item {
    margin: 0 10px;
}

.why-slider .slick-list {
    margin: 0 -10px;
}

.height-1 {
    height: 50vh;
}

.core-section {
    height: 100vh;
    background-image: url(../img/core-value-background.jpg);
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* .core-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0.15;
    mix-blend-mode: luminosity;
    z-index: -1;
} */

.tech-backhground {
    height: 50vh;
    display: flex;
    align-items: center;
    

    position: relative;
}

/* .tech-backhground::before {
    content: "" !important;
    position: absolute;
    inset: 0;
    background: rgb(255 255 255) !important;
    opacity: 0.40;
    mix-blend-mode: luminosity;
    z-index: 1;
} */

.tech-backhground .w-100 {
    position: relative;
    z-index: 2;
}

.core-section .heading-fonts .big-s path {
    fill: #fff;
}

.core-section .heading-fonts {
    color: #FFFFFF;
}

.comman-green-background.main-desktop-banner .heading-fonts {
    color: rgb(2, 93, 78) !important;
}

.comman-green-background.main-desktop-banner .heading-fonts .big-s path {
    fill: rgb(2, 93, 78) !important;
}

.video-container {
    position: relative;
    width: 640px;
    margin: 20px auto;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
}

video {
    width: 100%;
    display: block;
    border-radius: 10px;
}

/* Custom control button */
.controls {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* button {
    background: rgba(0, 0, 0, 0.6);
    border: none;
    color: white;
    font-size: 32px;
    padding: 10px 20px;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s;
}

button:hover {
    background: rgba(255, 255, 255, 0.3);
    color: #000;
}
*/

.modal-content {
    background-color: transparent !important;
    border: none !important;
}

.modal-header {
    border: none !important;
}

.modal-dialog {
    max-width: none !important;
}

.humna-card {
  background-color: rgb(2, 93, 78) !important;
  /* background-color: #A6A5A5 !important; */
}

.link-deco {
    text-decoration: none;
}

#mainHeader {
    transition: transform 0.3s ease, background 0.3s ease;
    background: #e9f3f2;
}

/* .nav-hide {
    transform: translateY(-100%);
} */

.navbar-expand-lg .navbar-nav {
    align-items: center;
}

.whatsapp-float {
    position: fixed;
    right: 30px;
    bottom: 60px;
    z-index: 99999;
}

.btn-whatsaap {
    width: 40px;
    height: 40px;
    display: block;
    object-fit: contain;
    background: transparent;
}

.content-center p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    /* number of lines to show */
    line-clamp: 1;
    font-size: 14px;
    -webkit-box-orient: vertical;
}

.content-succes-stories img {
    height: 70dvh;
    width: 100%;
    object-position: top;
    object-fit: cover;
}

.content-succes-stories p {
    font-size: var(--font-16px);
    font-weight: 500;
    padding-bottom: 10px;
}

.content-succes-stories h3 {
    font-size: 22px;
}

.content-succes-stories ul li {
    font-size: var(--font-16px);
    font-weight: 500;
    list-style-type: disc;
}

.content-relative {
    position: relative;
    cursor: pointer;
}

.content-absolute {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #d2fff8c7;
    height: 100%;
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000 !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.slide-item:hover .content-absolute {
    opacity: 1;
    visibility: visible;
}

.content-absolute p {
    color: #000 !important;
    margin: 0;
    height: 100px;
    overflow: auto;
    width: 100%;
    text-align: center;
}

.content-absolute p {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.content-absolute p::-webkit-scrollbar {
    display: none;
}

.why-slider .slick-slide.center-active {
    transform: scale(1.1);
    opacity: 1;
}

.navbar-toggler:focus {
    box-shadow: none !important;
}

.technology-content{
    padding-top: 20px;
}

.technology-content li{
    padding-top: 20px;
    list-style-type: disc;
    font-weight: 500;
     color: #23272C !important;
    font-size: 16px;
        font-family: var(--project-secondry-font) !important;
}

.technology-content p {
    font-weight: 500;
    font-size: 14px;
    line-height: normal;
    margin-bottom: 10px !important;
  
    color: #23272C !important;
}

.why-slider-card {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
}

.scroll-section .award-image .person-slide {
    width: 100%;
    height: 240px !important;
}

.succes-story-details-wapper {
    position: relative;
}

.succes-story-details-wapper::before {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    background: rgb(35 39 44 / 74%);
    position: absolute;
    top: 0;
    z-index: 1;
}

.scroll-section.section.section--bg.background-image-mission {
    position: relative;
}

.scroll-section.section.section--bg.background-image-mission::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #dfe3e83d;
}

.succes-story-details-content {
    position: absolute;
    top: 0;
    left: 0;
    color: #FFFFFF !important;
    height: 80vh;
    overflow-Y: scroll !important;
    padding: 40px 0;
    z-index: 2;
    width: 100%;
}

.succes-story-details-content p {
    color: #FFFFFF !important;
    font-size: 14px;
}

.succes-story-details-img .person-slide {
    height: 80vh !important;
    object-position: top;
}


.customized-scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: #aaaaaa; 
}

.customized-scrollbar::-webkit-scrollbar-thumb {
  background: #025D4E;
}

.succes-story-details-wapper .main-container {
    padding: 0 60px !important;
}



.succes-story-details-wapper .main-container ul li {
    list-style: disc;
}

#SuccesStoryModel .slick-dots li button:before,
#SuccesStoryModelTwo .slick-dots li button:before,
#SuccesStoryModelThree .slick-dots li button:before,
#SuccesStoryModelFour .slick-dots li button:before {
    font-size: 10px !important;
}

#SuccesStoryModel .slick-dots li button:before,
#SuccesStoryModelTwo .slick-dots li button:before,
#SuccesStoryModelThree .slick-dots li button:before,
#SuccesStoryModelFour .slick-dots li button:before {
    opacity: .25;
    color: #ffffff !important;
}

#SuccesStoryModel .slick-dots li.slick-active button:before,
#SuccesStoryModelTwo .slick-dots li button:before,
#SuccesStoryModelThree .slick-dots li button:before,
#SuccesStoryModelFour .slick-dots li button:before {
    opacity: .75 !important;
    color: #ffffff !important;
}

.popup-main-heading {
    font-size: 38px;
    text-align: center;
    margin-bottom: 25px !important;
}

.succes-story-details-wapper .main-container h3 {
    margin-bottom: 20px;
}

.custome-close-btn {
    color: #FFFFFF;
    width: 40px;
    height: 40px;
    border: 1px solid #025D4E;
    background: #025D4E;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    z-index: 1;
    pointer-events: auto;
    cursor: pointer;
}

.custome-close-btn span {
    display: block;
    margin-top: -3px;
}


.tech-pop-up-backhground {
    height: auto;
    padding: 90px 0 !important;
    background-image: url(../img/back-ground-image.jpeg);
    background-position: center;
    background-size: cover;
}

.read-more{
    text-decoration: none;
    border-bottom: 1px solid #025D4E;
}

#success {
    /* background: #23272C; */
    background: #dfe3e8 !important;
}

#success .heading-fonts {
    /* color: #FFFFFF; */
    color: #025D4E;
}

#success .big-s path {
    fill: #025D4E !important;
}





.about-child-section .comman-p {
    margin-left: 48px;
}

.tech-backhground .content-first {
    margin-left: 48px;
}


section.scroll-section.section-padding-top.section.section--bg.section-padding-bottom.comman-green .image-icon img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    background-color: #025D4E;
    padding: 0;
}


section#success .slick-list.draggable {
    height: auto !important;
}

.tech-backhground .butn,
.tech-backhground .butn:visited {
    background-color: #000000;
    color: #FFFFFF;
}

/* ==================================== */
/* ****   ABOUT US - KEY STATS    ***** */
/* ==================================== */
.about-section .about-stats {
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    padding-top: 40px;
    margin-top: 10px;
}

.about-section .about-stat {
    display: flex;
    flex-direction: column;
}

.about-section .about-stat__value {
    font-family: var(--project-primary-font) !important;
    font-weight: 600;
    font-size: 42px;
    line-height: 1.1;
    color: #FFFFFF;
    text-transform: uppercase;
}

.about-section .about-stat__label {
    font-family: var(--project-secondry-font) !important;
    font-size: 14px;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.75);
    padding-top: 10px;
}

.about-section .about-stats__note {
    display: block;
    font-family: var(--project-secondry-font) !important;
    font-size: 12px;
    line-height: 18px;
    color: rgba(255, 255, 255, 0.55);
    padding-top: 30px;
    /* max-width: 678px; */
    max-width: 100%;
}


/* ==================================== */
/* ***  TECHNOLOGY - HOW IT WORKS  **** */
/* ==================================== */
.tech-backhground {
    height: auto;
    /* min-height: 50vh; */
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    padding-top: 60px;
    padding-bottom: 60px;
}

.tech-flow {
    padding-top: 26px;
}

.tech-flow__title {
    font-family: var(--project-primary-font) !important;
    font-weight: 600;
    font-size: 32px;
    line-height: 1.2;
    color: #FFFFFF;
    text-transform: uppercase;
    margin-bottom: 40px;
}

.tech-flow__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
}

.tech-flow__step {
    position: relative;
    padding-top: 28px;
    transition: all 0.3s ease;
}

.tech-flow__step:hover .tech-flow__num {
    transform: translateY(-33px);
    color: #FFFFFF;
    scale: 1.1;
}

.tech-flow__step::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 0;
    right: -24px;
    height: 1px;
    background: rgba(255, 255, 255, 0.25);
}

.tech-flow__step:last-child::before {
    right: 0;
}

.tech-flow__step::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #FFFFFF;
}

.tech-flow__num {
    display: block;
    font-family: var(--project-primary-font) !important;
    font-weight: 600;
    font-size: 30px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.45);
    transition: all 0.3s ease;
}

.tech-flow__step-title {
    font-family: var(--project-primary-font) !important;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.2;
    color: #FFFFFF;
    text-transform: uppercase;
    padding-top: 12px;
    margin-bottom: 0;
}

.tech-flow__step-text {
    font-family: var(--project-secondry-font) !important;
    font-size: 14px !important;
    font-weight: 500;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.78) !important;
    padding-top: 8px;
    margin-bottom: 0 !important;
}


/* ==================================== */
/* ****  WHY TRAVEL DATA - CARDS  ***** */
/* ==================================== */
#traveldata .why-slider h4 {
    color: #1b3934 !important;
    font-family: var(--project-secondry-font) !important;
    font-size: 20px !important;
    text-align: center;
}

/* Hover description text. Why Skyformance (#services) gets 11px / 25px from
   .comman-green p; #traveldata has no .comman-green, so the text fell back to
   the global p { font-size: 18px } and was then enlarged by the 1.3x hover scale. */
#traveldata .why-slider .content-absolute p {
    font-size: 11px;
    line-height: 25px;
}


/* ==================================== */
/* ******   TEAM BIO MODALS    ******** */
/* ==================================== */
.bio-modal-img {
    width: 100%;
    max-width: 260px;
    height: auto;
}

.technology-content .bio-modal-name {
    font-family: var(--project-primary-font) !important;
    font-weight: 600;
    font-size: 32px;
    line-height: 1.2;
    text-transform: uppercase;
    color: #025D4E;
    margin-bottom: 4px;
}

.technology-content .bio-modal-role {
    font-size: 14px !important;
    font-weight: 500;
    color: #025D4E !important;
    margin-bottom: 16px !important;
}

.technology-content .bio-modal-link {
    display: inline-block;
    font-family: var(--project-secondry-font) !important;
    font-size: 14px;
    font-weight: 500;
    color: #025D4E;
    text-decoration: underline;
    margin-top: 12px;
}


/* ==================================== */
/* ***  TEAM BIO MODALS - BACKGROUND ** */
/* ==================================== */
/* Scoped to the four bio modals only. The global
   .modal-content rule forces background-color: transparent,
   and .tech-pop-up-backhground points at back-ground-image.svg,
   which is not present in /img (only the .jpeg is). Together
   that left these modals fully see-through. */
#BioHamzaFarhat .modal-content,
#BioJoelleAtallah .modal-content,
#BioKarimZeineddine .modal-content,
#BioIshaanAhuja .modal-content {
    background-color: var(--bg-off-white) !important;
}

#BioHamzaFarhat .tech-pop-up-backhground,
#BioJoelleAtallah .tech-pop-up-backhground,
#BioKarimZeineddine .tech-pop-up-backhground,
#BioIshaanAhuja .tech-pop-up-backhground {
    background-color: var(--bg-off-white);
    background-image: url(../img/back-ground-image.jpeg);
}


/* ==================================== */
/* ***  SUCCESS STORIES - CASE STUDY ** */
/* ==================================== */
/* Reusable: .case-study-grid holds any number of
   .case-study-card blocks and reflows on its own. */
.case-study-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 24px;
}

.case-study-card {
    background: #025D4E;
    padding: 32px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.case-study-card__eyebrow {
    display: block;
    font-family: var(--project-secondry-font) !important;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

.case-study-card .case-study-card__title {
    font-family: var(--project-primary-font) !important;
    font-weight: 600;
    font-size: 38px;
    line-height: 1.1;
    text-transform: uppercase;
    color: #FFFFFF !important;
    padding-top: 6px;
    margin-bottom: 0;
}

/* Same stat treatment as the About Us stat row */
.case-study-card__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    width: 100%;
    padding-top: 28px;
    margin-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.case-study-stat {
    display: flex;
    flex-direction: column;
}

.case-study-stat__value {
    font-family: var(--project-primary-font) !important;
    font-weight: 600;
    font-size: 42px;
    line-height: 1.1;
    color: #FFFFFF;
    text-transform: uppercase;
}

.case-study-stat__label {
    font-family: var(--project-secondry-font) !important;
    font-size: 14px;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.75);
    padding-top: 10px;
}

/* Site button, inverted so it reads on the green card */
.case-study-card .case-study-card__btn:link,
.case-study-card .case-study-card__btn:visited {
    background-color: var(--bg-white);
    color: #025D4E;
    width: auto;
    padding: 0 28px;
    margin-right: 0;
    margin-top: 32px;
    gap: 8px;
}

.case-study-card .case-study-card__btn:hover {
    color: #025D4E;
}

.case-study-card__arrow {
    font-size: 16px;
    line-height: 1;
}

/* Stat lines on the .success-slider cards. Any number of <li> per card. */
.award-stats {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
}

.award-stats li {
    font-family: var(--project-secondry-font) !important;
    font-size: 16px;
    line-height: 1.5;
    color: #FFFFFF;
    padding: 8px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.award-stats li:first-child {
    padding-top: 0;
    border-top: 0;
}

.award-stats strong {
    font-family: var(--project-primary-font) !important;
    font-weight: 600;
    font-size: 24px;
    line-height: 1.1;
}

/* ---- Client logo strip ---- */
.client-logos__marquee {
    overflow: hidden;
}

.client-logos__track {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: client-logos-scroll 45s linear infinite;
}

/* pause so a logo can be read (standard marquee UX) */
.client-logos__marquee:hover .client-logos__track,
.client-logos__marquee:focus-within .client-logos__track {
    animation-play-state: paused;
}

.client-logos__group,
.client-logos__set {
    display: flex;
    align-items: center;
}

/* Spacing lives on margin-right, NOT gap. A flex gap would add one extra
   gap between the two groups, so translateX(-50%) would land half a gap
   off and the loop would visibly jump. Per-item margin keeps both halves
   exactly equal. */
.client-logo {
    flex: 0 0 auto;
    margin-right: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes client-logos-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .client-logos__track {
        animation: none;
    }
}

/* Fixed height, natural width: the 16 logos have very different aspect
   ratios, so locking width would squash the wide ones (flydubai, Atlantis)
   and balloon the square ones (Aldar, Dubai Duty Free). Equal height plus
   equal margin is what makes a mixed logo strip read evenly. */
.client-logo img {
    height: 40px;
    width: auto;
    max-width: none;
    object-fit: contain;
}


/* ==================================== */
/* * DMO CASE STUDY MODAL - FULLSCREEN * */
/* ==================================== */
/* Scoped to #SuccesStoryModel only. The other
   SuccesStoryModel* popups keep their 80vh sizing. */
#SuccesStoryModel .modal-content,
#SuccesStoryModel .modal-body,
#SuccesStoryModel .slideshow,
#SuccesStoryModel .success-slider-slider-popup,
#SuccesStoryModel .succes-story-details-wapper,
#SuccesStoryModel .succes-story-details-img {
    height: 100%;
}

#SuccesStoryModel .succes-story-details-content {
    height: 100vh;
    height: 100dvh;
}

#SuccesStoryModel .succes-story-details-img .person-slide {
    height: 100vh !important;
    height: 100dvh !important;
    width: 100%;
}

/* The old inline transform on .modal-dialog created a stacking
   context that kept the X above .succes-story-details-content
   (z-index: 2). Removing the transform removes that context, so
   the close button needs an explicit z-index here. */
#SuccesStoryModel .custome-close-btn {
    z-index: 3;
}


/* ==================================== */
/* ** CASE STUDY MODAL - REGIONAL DMO * */
/* ==================================== */
/* Scoped to .case-study-modal. Does not touch the team bio
   modals (#Bio*) or the Success Stories slider modals. */
.case-study-modal .modal-content {
    /* the global .modal-content rule forces transparent */
    background-color: var(--bg-off-white) !important;
    height: 100%;
}

.case-study-modal .case-study-modal__body {
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* same backdrop the standalone page drew via .fixed-body-bg */
    background-image: url(../img/body-image.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* keep the X above the scrolling content */
.case-study-modal .custome-close-btn {
    z-index: 3;
}


/* ==================================== */
/* *****   CONTACT FORM (Let's Talk) *** */
/* ==================================== */
.contact-form {
    padding-top: 50px;
}

.contact-form__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.contact-form__field--full {
    grid-column: 1 / -1;
}

.contact-form__label {
    display: block;
    font-family: var(--project-secondry-font) !important;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 8px;
}

.contact-form__req {
    color: #FFFFFF;
}

.contact-form__opt {
    text-transform: none;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.45);
}

.contact-form__input,
.contact-form__textarea {
    width: 100%;
    height: 54px;
    padding: 0 16px;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 0;
    color: #FFFFFF;
    font-family: var(--project-secondry-font) !important;
    font-size: 14px;
    font-weight: 500;
    transition: border-color 0.3s ease-in-out;
}

.contact-form__textarea {
    height: auto;
    min-height: 130px;
    padding: 16px;
    resize: vertical;
}

.contact-form__input:focus,
.contact-form__textarea:focus {
    outline: none;
    box-shadow: none;
    border-color: #FFFFFF;
    background-color: transparent;
    color: #FFFFFF;
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

/* stop Chrome autofill repainting the field white-on-white */
.contact-form__input:-webkit-autofill,
.contact-form__input:-webkit-autofill:hover,
.contact-form__input:-webkit-autofill:focus {
    -webkit-text-fill-color: #FFFFFF;
    caret-color: #FFFFFF;
    transition: background-color 5000s ease-in-out 0s;
}

.contact-form__actions {
    padding-top: 24px;
}

/* .butn box styles live on .butn:link/:visited (anchors only), so a
   <button> needs them restated. Values copied from .butn, inverted
   to read on this section's #025D4E background. */
.contact-form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 54px;
    width: auto;
    padding: 0 32px;
    border: none;
    text-transform: uppercase;
    font-family: var(--project-secondry-font);
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    background-color: var(--bg-white);
    color: #025D4E;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.contact-form__submit:hover {
    color: #025D4E;
}

.contact-form__submit:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* Inline validation error, shown above the fields. */
.contact-form__error {
    display: block;
    padding: 12px 16px;
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background-color: rgba(0, 0, 0, 0.15);
    color: #FFFFFF;
    font-family: var(--project-secondry-font) !important;
    font-size: 14px;
    font-weight: 500;
}

.contact-form__error[hidden],
.contact-form__success[hidden] {
    display: none;
}

/* "Thank you so much!" message that replaces the form on success. */
.contact-form__success {
    padding-top: 24px;
}

.contact-form__success-title {
    margin: 0 0 12px;
    color: #FFFFFF;
    font-family: var(--project-secondry-font);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
}

.contact-form__success-text {
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--project-secondry-font);
    font-size: 16px;
    font-weight: 500;
}

/* Honeypot field: invisible, off-screen and ignored by screen readers. */
.contact-form__hp {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}


/* ==================================== */
/* ** WHY SKYFORMANCE - SLICK SLIDER ** */
/* ==================================== */
/* Scoped to .why-skyformance-slider. Why Travel Data (#traveldata) reuses
   this same slider class, so both sections share these rules. */

/* Site arrows default to white (.slick-prev/next::after), which would be
   invisible on this section's #dfe3e8 background. Same green the
   .success-slider arrows already use. */
.why-skyformance-slider .slick-prev::after,
.why-skyformance-slider .slick-next::after {
    border-top-color: #025D4E;
    border-right-color: #025D4E;
}

/* dots: matches the modal slider treatment (10px, brand green) */
.why-skyformance-slider .slick-dots {
    position: relative;
    bottom: auto;
    padding-top: 0px;
    margin: 0;
}

.why-skyformance-slider .slick-dots li button:before {
    font-size: 10px;
    color: #025D4E !important;
    opacity: 0.25;
}

.why-skyformance-slider .slick-dots li.slick-active button:before {
    color: #025D4E !important;
    opacity: 1;
}

/* --- Restore the hover SCALE inside Slick --------------------------------
   Slick adds .slick-slide to the slider's DIRECT CHILDREN; it wraps them
   collectively in .slick-track / .slick-list but does NOT wrap each one
   individually. The direct children here are the .slide-item divs, so after
   init every card is ONE element carrying BOTH classes:

       <div class="slide-item slick-slide">

   (This stylesheet's own gutter pattern confirms it -- .why-slider .slide-item
   { margin: 0 10px } paired with .why-slider .slick-list { margin: 0 -10px }
   only works when the margin sits on the slide element itself.)

   That makes these two rules collide on the SAME element and property:

       .why-slider .slide-item:hover  { transform: scale(1.3); }           (0,3,0)
       .why-slider .slick-slide:hover { transform: scale(1) !important; }  (0,3,0)+!

   The !important wins, so the zoom was being reset to scale(1) -- nothing
   rendered. That scale(1) rule is a leftover from the original carousel and
   lay dormant for as long as this section was a CSS grid (no .slick-slide
   existed then); re-adding Slick woke it up.

   Values below are copied from .why-slider .slide-item(:hover), i.e. exactly
   what Why Travel Data still uses untouched.                                */
.why-skyformance-slider .slide-item:hover,
.why-skyformance-slider .slick-slide:hover {
    transform: scale(1.3) !important;
    transform-origin: center center;
    position: relative;
    z-index: 3;
}

/* transition already comes from .why-slider .slide-item { transition: all 0.4s ease }
   -- restated so the eased zoom survives any later override of that rule */
.why-skyformance-slider .slide-item {
    transition: all 0.4s ease;
}

/* Slick's .slick-list has overflow:hidden, which crops the 1.3x zoom -- nothing
   clipped it when this section was a plain grid. Vertical padding gives the
   grown card room. Beats .why-slider .slick-list.draggable (same specificity,
   declared later in the file). */
.why-skyformance-slider .slick-list,
.why-skyformance-slider .slick-list.draggable {
    padding-top: 45px !important;
    padding-bottom: 45px !important;
}

section#aboutus {
    padding: 60px 0;
}

img, picture {
    image-rendering: unset !important;
}

/* ==================================================================
   [SF sticky navbar 2026-10-12] START
   - Anchor links land below the fixed #mainHeader. Fallback values only:
     skyformance-main.js sets the exact navbar height on html at runtime.
   - Logged-in users: the WordPress admin bar no longer covers the navbar
     or the mobile menu. Selectors are specific enough to beat Bootstrap,
     which loads after this file.
   To revert: delete this block.
   ================================================================== */
html {
    scroll-padding-top: 83px;
}

@media (max-width: 1140px) {
    html {
        scroll-padding-top: 68px;
    }
}

.admin-bar #mainHeader,
.admin-bar .offcanvas.offcanvas-start {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar #mainHeader,
    .admin-bar .offcanvas.offcanvas-start {
        top: 46px;
    }
}

@media screen and (max-width: 600px) {
    .admin-bar #wpadminbar {
        position: fixed;
    }
}
/* [SF sticky navbar 2026-10-12] END */

/* ==================================================================
   [SF slider edge zoom 2026-10-12] START
   Why Skyformance (#services) + Why Travel Data (#traveldata) both use
   .why-slider.why-skyformance-slider. The 1.3x hover zoom grows from the
   card centre, and .slick-list (overflow: hidden) cuts off the part of the
   first and last visible cards that grows past the frame, so those cards
   look off-centre. Only the zoom origin changes here; zoom size, timing,
   card sizes and fonts are untouched. Uses Slick's .slick-active classes,
   so it follows arrows, dots and swipe.
   To revert: delete this block.
   ================================================================== */
/* leftmost visible card: zoom from its left edge */
.why-skyformance-slider .slick-slide:not(.slick-active) + .slick-slide.slick-active,
.why-skyformance-slider .slick-slide.slick-active:first-child {
    transform-origin: left center !important;
}

/* rightmost visible card: zoom from its right edge */
.why-skyformance-slider .slick-slide.slick-active:has(+ .slick-slide:not(.slick-active)),
.why-skyformance-slider .slick-slide.slick-active:last-child {
    transform-origin: right center !important;
}
/* [SF slider edge zoom 2026-10-12] END */


/* ==================================================================
   [SF slider phone no-zoom 2026-10-12] START
   Phones (max-width: 575px): one card fills the frame, so the 1.3x hover
   zoom would be cut off on both sides. Turn the zoom off there; the hover
   text overlay still shows.
   To revert: delete this block.
   ================================================================== */
@media (max-width: 575px) {
    .why-slider.why-skyformance-slider .slide-item.slick-slide:hover,
    .why-slider.why-skyformance-slider .slide-item:hover {
        transform: none !important;
    }
}
/* [SF slider phone no-zoom 2026-10-12] END */