:root {
    --common-banner-title-fs: 130px;
    --common-section-title-fs: 48px;
    --common-section-disc-fs: 24px;
    
    --fw-100: 100;
    --fw-200: 200;
    --fw-300: 300;
    --fw-400: 400;
    --fw-500: 500;
    --fw-600: 600;
    --fw-700: 700;
    --fw-800: 800;
    --fw-900: 900;
    
    --color-black: #000000;
    --color-white: #FFFFFF;

    --color-theme: #9ba8c5;

    --color-description: #212529;

    --letter-spacing-4: 4%;
    --letter-spacing-minus-4: -4%;

    --section-padding-120px: 120px;

    --section-space-30px: 30px;
    --section-space-60px: 60px;
    --section-space-100px: 100px;
}




/* =========================== [ Common Start ] =========================== */
.space-bottom-v2 { margin-bottom: var(--section-space-100px); }

/* Max Width */
.container-1470 { max-width: calc(1470px + 40px); padding-inline: 20px; width: 100%; margin-inline: auto; }

/* Section Spacing (Top) */
.section-pt-30 { padding-top: var(--section-space-30px); }
.section-pt-60 { padding-top: var(--section-space-60px); }
.section-pt-100 { padding-top: var(--section-space-100px); }

/* Section Spacing (Bottom) */
.section-pb-30 { padding-bottom: var(--section-space-30px); }
.section-pb-60 { padding-bottom: var(--section-space-60px); }
.section-pb-100 { padding-bottom: var(--section-space-100px); }

/* Common Button */
.btn {
    width: fit-content;
    border-radius: 38px;
    padding: 19px 44px;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.4px;
    line-height: 1.5;
    font-weight: normal;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all .3s ease-in-out;
    text-align: center;
    -webkit-border-radius: 38px;
    -moz-border-radius: 38px;
    -ms-border-radius: 38px;
    -o-border-radius: 38px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

/* Button Primary */
.btn-primary { color: #000; background-color: #cad4eb; border-color: #acb4c8; }
.btn-primary:is(:hover,:active,:focus-visible) { color: #FFF; background-color: #000; border-color: #000; }


/* Custom Shape */
.custom-shape-parent { overflow-x: clip; --shape-value: 110px; background-color: #cad4eb; height: fit-content; width: 100%; }
.custom-shape-parent .custom-shape { width: calc(100% + 10px); margin-block: -2px; margin-inline: -5px; height: calc(var(--shape-value) + 4px); background-color: #ffffff; clip-path: polygon( var(--shape-value) 0, 100% 0, 100% 100%, 0 100%, 0 var(--shape-value) ); }

/* Image Wrapper */
.img-cover * { height: 100%; width: 100%; object-fit: cover; object-position: center; }

/* Common Title Banner */
.common-title-banner { padding-block: 75px 65px; }

.common-banner-title * { font-family: inherit; font-style: normal; font-weight: var(--fw-400); font-size: var(--common-banner-title-fs); line-height: 1; letter-spacing: var(--letter-spacing-minus-4); white-space: normal; color: var(--color-black); }

/* Common Section Banner */
.common-section-title * { font-family: inherit; font-style: normal; font-weight: var(--fw-400); font-size: var(--common-section-title-fs); line-height: 100%; letter-spacing: -.1%; white-space: normal; color: var(--color-black); margin-bottom: 0; }
.common-section-disc * { color: var(--color-description); }
.common-section-disc strong { font-weight: var(--fw-800); }
.common-section-disc *:last-child { margin-bottom: 0; }

/* Value Card */
.value-card { 
    --card-title-fs: 40px;
    --card-disc-fs: 24px;

    --card-border-color: #394854;
    --card-title-color: #394854;
    --card-disc-color: #000000;

    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 20px;
    padding: 140px 40px 60px 60px;
}

.value-card .title * { font-family: inherit; font-style: normal; font-weight: var(--fw-800); font-size: var(--card-title-fs); line-height: 1; white-space: normal; color: var(--card-title-color); margin-bottom: 0; }
.value-card .disc * { font-family: inherit; font-style: normal; font-weight: var(--fw-400); font-size: var(--card-disc-fs); line-height: 1.1; white-space: normal; color: var(--card-disc-color); margin-bottom: 0; }

.value-card .value-card-shape { pointer-events: none; user-select: none; top: 0; left: 0; position: absolute; height: 100%; width: 100%; }
.value-card .value-card-shape img { height: 100%; width: 100%; }


.stats-card { 
    display: flex;
    flex-direction: column;

    --text-color: #CAD4EB;
    --border-color: #7f7f7f;

    --card-title-font-size: 1.25vw;
    --card-value-font-size: 7.813vw;
}

.stats-card .title * { font-family: inherit; font-style: normal; font-weight: var(--fw-400); font-size: var(--card-title-font-size); line-height: 1; letter-spacing: -.13%; white-space: normal; color: var(--text-color); margin-bottom: 0; padding-bottom: 12px; border-bottom: 1px solid var(--border-color); }
.stats-card .value * { font-family: inherit; font-style: normal; font-weight: var(--fw-400); font-size: var(--card-value-font-size); line-height: 1; letter-spacing: -.15%; white-space: normal; color: var(--text-color); margin-bottom: 0; }
/* =========================== [ Common End ] =========================== */


/* =========================== [ Core Values Start ] =========================== */
.core-values { padding-block: 0 var(--section-padding-120px); }
.core-values .core-values-block { display: flex; align-items: center; justify-content: center; gap: 60px; flex-direction: column; }
.core-values .image-block { max-width: 902px; width: 100%; height: auto; aspect-ratio: 902 / 1005; margin-top: 65px; }

.core-values .card-block { 
    --row-gap: 50px;
    --column-gap: 34px;
}
.core-values .card-block .row { margin-inline: calc(-1/2 * var(--column-gap)); row-gap: var(--row-gap); }
.core-values .card-block .row >* { padding-inline: calc(1/2 * var(--column-gap)); }
/* =========================== [ Core Values End ] =========================== */

/* =========================== [ New Home Banner Start ] =========================== */
.new-home-banner {
    --home-banner-title-fs: 85px;
    --home-banner-disc-fs: 50px;
}

.new-home-banner { padding-block: 240px 120px; display: flex; justify-content: center; position: relative; max-width: 100%; width: 100%; min-height: 600px; max-height: 940px; height: auto; aspect-ratio: 16 / 9; background-color: #000000; }
.new-home-banner .new-home-banner-content { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.new-home-banner .new-common-banner-title * { font-family: inherit; font-size: var(--home-banner-title-fs); font-weight: var(--fw-400); color: var(--color-white); letter-spacing: var(--letter-spacing-minus-4); line-height: 1; margin-bottom: 15px; }
.new-home-banner .new-common-banner-disc * { font-family: inherit; font-size: var(--home-banner-disc-fs); font-weight: var(--fw-400); color: var(--color-white); letter-spacing: var(--letter-spacing-minus-4); line-height: 1; }

.new-home-banner .custom-shape-parent { position: absolute; left: 0; bottom: 0; z-index: 2; }

/* Scroll Down Common */
.scroll-down-common { width: 44px; height: 44px; background: #000; border-radius: 100%; line-height: 46px; text-align: center; color: #9aa7c4; font-size: 16px; position: absolute; bottom: 0; right: 0; }
.scroll-down-common:hover { background: #fff; color: #000; }

/* New Banner Shape */
.new-home-banner-shape { position: absolute; right: 30px; max-width: 55%; width: 100%; top: 100px; z-index: 1; }
.new-home-banner-shape img { width: 100%; }
/* =========================== [ New Home Banner End ] =========================== */


/* =========================== [ Our Impact Start ] =========================== */
.our-impact .our-impact-block { display: flex; flex-direction: column; }
.our-impact .common-section-title { max-width: 500px; }
.our-impact .common-section-disc { max-width: 92%; margin-inline: auto 0; }

.our-impact .text-block { margin-bottom: 80px; }

.our-impact .image-block { max-width: 100%; width: 100%; aspect-ratio: 1920 / 803; min-height: 400px; height: auto; }

.our-impact .stats-block { --stats-row-gap: 3.125vw; --stats-column-gap: 3.646vw; max-width: 86%; width: 100%; margin-inline: auto 0; padding: 7.292vw 3.646vw 9.375vw 3.646vw; margin-bottom: -23.438vw; z-index: 1; }
.our-impact .stats-block .row { margin-inline: calc(-1/2 * var(--stats-column-gap)); row-gap: var(--stats-row-gap); }
.our-impact .stats-block .row >* { padding-inline: calc(1/2 * var(--stats-column-gap)); }

.our-impact .stats-card-block { max-width: 77.083vw; width: 100%; margin-inline: auto 0; }
/* =========================== [ Our Impact End ] =========================== */

/* =========================== [ Our Impact Start ] =========================== */
.our-key-sectors { --key-card-row-gap: 64px; --key-card-column-gap: 64px; padding-block: 116px 72px; }

.our-key-sectors .row { margin-inline: calc(-1/2 * var(--key-card-column-gap)); row-gap: var(--key-card-row-gap); }
.our-key-sectors .row >* { padding-inline: calc(1/2 * var(--key-card-column-gap)); }

.key-sector-card {
    --key-sector-card-title-fs: 75px;
    --key-sector-card-disc-fs: 24px;

    display: flex;
    flex-direction: column;
}

.key-sector-card .card-title * { font-family: inherit; font-style: normal; font-weight: var(--fw-400); font-size: var(--key-sector-card-title-fs); line-height: 1; letter-spacing: var(--letter-spacing-minus-4); vertical-align: center; white-space: normal; color: var(--color-black); margin-bottom: 16px; }
.key-sector-card .card-disc * { color: var(--color-black); }

.key-sector-card .image-content { margin-bottom: 48px; aspect-ratio: 657 / 504; height: auto; max-width: 100%; }
.key-sector-card .btn { margin-top: 32px; }

.our-key-sectors .top-block { --top-block-fs: 24px; display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid #b3b3b3; margin-bottom: 80px; } 
.our-key-sectors .top-block .title * { font-family: inherit; font-style: normal; font-weight: var(--fw-400); font-size: var(--top-block-fs); line-height: 1; letter-spacing: var(--letter-spacing-minus-4); vertical-align: center; white-space: normal; color: var(--color-black); margin-bottom: 0; }

.view-all-link { --view-all-link-fs: 24px;  display: flex; align-items: center; gap: 8px; font-family: inherit; font-style: normal; font-weight: var(--fw-400); font-size: var(--view-all-link-fs); line-height: 1; letter-spacing: var(--letter-spacing-minus-4); text-align: center; white-space: normal; color: var(--color-black); }
.view-all-link img { position: relative; left: 0; height: 24px; width: 24px; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; }
.view-all-link:hover img { left: 2px; }
/* =========================== [ Our Impact End ] =========================== */

/* =========================== [ Our Work Start ] =========================== */
.our-work { position: relative; padding-block: 95px 107px; }
.our-work::after { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 73%; background-color: #cad4eb; }
.our-work .our-work-block { position: relative; z-index: 2; max-width: 1670px; width: 100%; margin-inline: auto; }

.our-work .view-all-link { margin-top: 50px; } 

.our-work .our-work-block { 
    --our-work-row-gap: 30px;
    --our-work-column-gap: 30px;

    padding-inline: 50px;
} 

.our-work .our-work-block .row { align-items: end; row-gap: var(--our-work-row-gap); margin-inline: calc(-1/2 * var(--our-work-column-gap)); } 
.our-work .our-work-block .row >* { padding-inline: calc(1/2 * var(--our-work-column-gap)); } 

.our-work .text-block { display: flex; flex-direction: column; justify-content: end; margin-inline: auto 0; max-width: 464px; width: 100%; gap: 20px; } 
.our-work .video-block { background-color: #000000; aspect-ratio: 1078 / 673; max-width: 100%; height: auto; width: 100%; } 

.our-work .common-section-disc * { line-height: 1.2; }

/* =========================== [ Our Work End ] =========================== */


/* ======================== [ Service (Repeated) Start ] ======================== */
.service-home-v2 { 
    --slider-img-height: 1000px; 
    --slider-data-padding-top: 220px;
}

.service-home-v2 .service-title-rw .service-inrw { border-bottom: 1px solid #9aa7c4 !important; max-width: 100%; }
.service-home-v2 .pager-rw .swiper-pagination { max-width: 100%; }
.service-home-v2 .service-title-rw h3 { color: #9AA7C4; min-height: 30px; }
.service-home-v2 .service-row .service-img img { height: var(--slider-img-height); }
.service-home-v2 .service-row .service-data { padding: var(--slider-data-padding-top) 0 0 0;     }

/* Service Details Typo */
.service-details-typo {
    --details-typo-fs-base: 24px;
    --details-typo-fs-heading: 36px;

    --details-heading-mb: 30px;
    --details-base-mb: 24px;
}

.service-details-typo :is(h1,h2,h3,h4,h5,h6) { position: static !important; font-family: inherit; font-size: var(--details-typo-fs-heading); font-weight: var(--fw-800); color: #9AA7C4; line-height: 1; display: block !important; letter-spacing: 0; text-align: start !important; margin: 0 0 var(--details-heading-mb) 0 !important; }

.service-details-typo { font-family: inherit; font-size: var(--details-typo-fs-base); font-weight: var(--fw-400); color: #9AA7C4; line-height: 1.1; text-align: start !important; }
.service-details-typo p { margin-bottom: var(--details-base-mb); }

.service-details-typo strong { color: #FFFFFF; font-weight: var(--fw-800); }
.service-details-typo ul { padding-left: 20px; list-style-type: disc; }
.service-details-typo ul li { list-style: disc; }
/* ======================== [ Service (Repeated) End ] ======================== */

/* ======================== [ Project Details Page Wrapper Start ] ======================== */
.project-detail-page-wrapper { --row-gap: 30px; --column-gap: 24px; padding-block: var(--section-space-60px) var(--section-space-100px); }
.project-detail-page-wrapper .row { margin-inline: calc(-1/2 * var(--column-gap)); row-gap: var(--row-gap); }
.project-detail-page-wrapper .row >* { padding-inline: calc(1/2 * var(--column-gap)); }
/* ======================== [ Project Details Page Wrapper End ] ======================== */

/* ======================== [ Project Title Start ] ======================== */
.project-title { 
    --title-font-size: 64px;
}

.project-title .project-title-block { display: flex; align-items: start; gap: 30px; justify-content: space-between; max-width: 1130px; width: 100%; }

.project-title .title * { font-family: inherit; font-weight: var(--fw-800); font-size: var(--title-font-size); line-height: 1; letter-spacing: var(--letter-spacing-minus-4); color: var(--color-black); margin-bottom: 0; max-width: 900px; width: 100%; }

/* Common Back Arrow */
.common-back-arrow { --button-background: var(--color-black); --button-size: 88px; --arrow-size: calc(1/3 * var(--button-size)); position: relative; height: var(--button-size); width: var(--button-size); display: flex; align-items: center; justify-content: center; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; background-color: var(--button-background); }
.common-back-arrow::after { content: ""; position: absolute; background: url('data:image/svg+xml,<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(%23clip0_172_124)"> <path d="M12.8841 26L0.00575105 13.5223L12.8841 1L14.8743 2.96723L5.26294 12.1959L28 12.1959L28 14.8041L5.22268 14.8041L14.8685 24.0718L12.8784 26L12.8841 26Z" fill="%239AA7C4"/> </g> <defs> <clipPath id="clip0_172_124"> <rect width="28" height="28" fill="white"/> </clipPath> </defs> </svg> ') no-repeat; background-position: center; background-size: 100%; height: var(--arrow-size); width: var(--arrow-size); }
.common-back-arrow::after { transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; }

.common-back-arrow:hover { background-color: var(--color-theme); }
.common-back-arrow:hover::after { background: url('data:image/svg+xml,<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(%23clip0_172_124)"> <path d="M12.8841 26L0.00575105 13.5223L12.8841 1L14.8743 2.96723L5.26294 12.1959L28 12.1959L28 14.8041L5.22268 14.8041L14.8685 24.0718L12.8784 26L12.8841 26Z" fill="%23000000"/> </g> <defs> <clipPath id="clip0_172_124"> <rect width="28" height="28" fill="white"/> </clipPath> </defs> </svg> ') no-repeat; background-position: center; background-size: 100%; height: var(--arrow-size); width: var(--arrow-size); }
/* ======================== [ Project Title End ] ======================== */

/* ======================== [ Project Media Start ] ======================== */
.project-media .media-block { background-color: #000000; max-width: 100%; width: 100%; height: auto; aspect-ratio: 1126 / 709; max-height: 709px; }
.project-media .media-block-sm { background-color: #000000; max-width: 100%; width: 100%; height: auto; aspect-ratio: 559 / 384; max-height: 400px; }
/* ======================== [ Project Media End ] ======================== */

/* ======================== [ Title BLock Start ] ======================== */
.title-block { 
    --title-fs: 32px;
    --subtitle-fs: 24px;
    --title-lg-fs: 64px;
}

.title-block .title-lg * { font-family: inherit; font-style: normal; font-weight: var(--fw-400); font-size: var(--title-lg-fs); line-height: 1; letter-spacing: var(--letter-spacing-minus-4); white-space: normal; color: #394854; margin-bottom: 0; }
.title-block .sub-title * { font-family: inherit; font-style: normal; font-weight: var(--fw-400); font-size: var(--subtitle-fs); line-height: 1.5; white-space: normal; color: #212529; margin-bottom: 0; }
.title-block .title * { font-family: 'PP Telegraf', sans-serif; font-style: normal; font-weight: var(--fw-800); font-size: var(--title-fs); line-height: 1; white-space: normal; color: #212529; margin-bottom: 0; }
/* ======================== [ Title Block End ] ======================== */

/* ======================== [ Project Detail Typography Start ] ======================== */
.project-detail-typo {
    --project-detail-fs: 24px;
}

.project-detail-typo { font-family: inherit; font-style: normal; font-weight: var(--fw-400); font-size: var(--project-detail-fs); line-height: 1.4; white-space: normal; color: #212529; }
.project-detail-typo p { margin-bottom: .3lh; }
.project-detail-typo p:has(+ ul) { margin-bottom: 0; }

.project-detail-typo ul { list-style: disc; padding-left: 20px; }
.project-detail-typo ul li { list-style: disc; }
.project-detail-typo ul li::marker { font-size: 20px; }
/* ======================== [ Project Detail Typography End ] ======================== */

/* ======================== [ Common Typography Start ] ======================== */
.common-typo {
    --common-typo-base-font-size: 24px;

    --common-typo-h1-font-size: calc(1.75 * var(--common-typo-base-font-size)); /* 42px */
    --common-typo-h2-font-size: calc(1.55 * var(--common-typo-base-font-size)); /* 37.2px */
    --common-typo-h3-font-size: calc(1.4 * var(--common-typo-base-font-size));  /* 33.6px */
    --common-typo-h4-font-size: calc(1.25 * var(--common-typo-base-font-size)); /* 30px */
    --common-typo-h5-font-size: calc(1.1 * var(--common-typo-base-font-size));  /* 26.4px */
    --common-typo-h6-font-size: calc(1 * var(--common-typo-base-font-size));    /* 24px */

    --common-typo-margin-bottom: 20px;    /* 20px */
}

.common-typo { font-family: inherit; font-style: normal; font-weight: var(--fw-400); font-size: var(--common-typo-base-font-size); line-height: 1.4; white-space: normal; color: #212529; }
.common-typo p { margin-bottom: var(--common-typo-margin-bottom); }
.common-typo >* { margin-bottom: var(--common-typo-margin-bottom) !important; }
.common-typo >*:last-child { margin-bottom: 0 !important; }

.common-typo ul { padding-left: 20px; }
.common-typo ul li { color: #212529; list-style: disc; padding: 0; font-size: var(--common-typo-base-font-size) !important; line-height: 1.4 !important; margin-bottom: var(--common-typo-margin-bottom) !important; }
.common-typo ul li:last-child { margin-bottom: 0 !important; }
.common-typo ul li::after { display: none; }
.common-typo ul li::marker { font-size: var(--common-typo-base-font-size); line-height: 1.4; }

.common-typo strong { font-weight: var(--fw-800); }

.common-typo :is(h1,h2,h3,h4,h5,h6) { font-weight: var(--fw-600); line-height: 1.3; margin-bottom: .3lh; }

.common-typo h1 { font-size: var(--common-typo-h1-font-size); }
.common-typo h2 { font-size: var(--common-typo-h2-font-size); }
.common-typo h3 { font-size: var(--common-typo-h3-font-size); }
.common-typo h4 { font-size: var(--common-typo-h4-font-size); }
.common-typo h5 { font-size: var(--common-typo-h5-font-size); }
.common-typo h6 { font-size: var(--common-typo-h6-font-size); }
/* ======================== [ Common Typography End ] ======================== */