/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  vertical-align: baseline;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  outline: 0;
  font-size: 100%;
}

h1, h2, h3, h4 {
  font-weight: lighter;
}

html {
  line-height: 1.15; /* 1 */
  text-size-adjust: 100%; /* 2 */
}

a {
  vertical-align: baseline;
  border: 0;
  background-color: transparent;
  color: currentcolor;
  font: inherit;
  text-decoration: none;
}

img {
  display: block;
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: auto;
  border-style: none;
}

ol,
ul {
  list-style: none;
}

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  margin: 0; /* 2 */
  font-size: 100%; /* 1 */
  font-family: inherit; /* 1 */
  line-height: 1.15; /* 1 */
}

/**
  * Show the overflow in IE.
  * 1. Show the overflow in Edge.
  */
button,
input { /* 1 */
  overflow: visible;
  border: 0;
  background: transparent;
  outline: none;
}

/**
  * Remove the inheritance of text transform in Edge, Firefox, and IE.
  * 1. Remove the inheritance of text transform in Firefox.
  */
button,
select { /* 1 */
  text-transform: none;
}

/**
  * Correct the inability to style clickable types in iOS and Safari.
  */
button,
[type=button],
[type=reset],
[type=submit] {
  appearance: button;
}

/**
  * Remove the inner border and padding in Firefox.
  */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

/**
  * Restore the focus styles unset by the previous rule.
  */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  appearance: button; /* 1 */
  font: inherit; /* 2 */
}

blockquote,
q {
  quotes: none;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
  content: "";
  content: none;
}

/* remember to define focus styles! */
:focus {
  outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
  text-decoration: none;
}

del {
  text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-spacing: 0;
  border-collapse: collapse;
}

@keyframes top-fade-in {
  0% {
    transform: translateY(-0.9375rem);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes bottom-fade-in {
  0% {
    transform: translateY(0.9375rem);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes blur {
  0% {
    opacity: 0;
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}
/*
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/
/*
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/
/*
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/
/*
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/
/*
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/
/*
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  position: relative;
  height: fill-available;
  font-family: var(--font-family-base);
}
@media (max-width: 768px) {
  html {
    font-size: 20px !important;
  }
}

body {
  height: var(--doc-height, 100vh);
  min-height: fill-available;
  background: var(--color-bg);
}

h1 {
  font-size: 3.125rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.375rem;
}

h4 {
  font-size: 1.125rem;
}

h5 {
  font-size: 1rem;
}

h6 {
  font-size: 0.875rem;
}

.title {
  color: var(--text-primary);
  line-height: 1.2;
}
@media (max-width: 768px) {
  .title {
    line-height: 1;
  }
}

h1.title {
  line-height: 1;
  color: var(--title-blue);
}
h1.title .txt--point {
  color: var(--color-gray-1);
}
@media (max-width: 768px) {
  h1.title {
    font-size: 7.5vw;
    line-height: 7.5vw;
  }
}

h2.title {
  color: #ffffff;
  font-size: 1.625rem;
}
h2.title .txt--point {
  color: var(--title-blue);
}
@media (max-width: 768px) {
  h2.title {
    font-size: 4vw;
    line-height: 5vw;
  }
}

h3.title {
  display: inline-block;
  background-color: #353535;
  padding: 0.375rem 0.625rem;
  border-radius: 0.1875rem;
  color: var(--title-gray);
}
h3.title .txt--point {
  color: var(--title-blue);
}
@media (max-width: 768px) {
  h3.title {
    font-size: 4.5vw;
    line-height: 6vw;
  }
}

.multi-section h3.title, .card-section h3.title {
  background-color: initial;
  color: var(--text-primary-2);
}

.card-section h3.title {
  font-weight: 600;
  padding: 0;
  margin-bottom: 0.5rem;
}
@media (max-width: 768px) {
  .card-section h3.title {
    margin-bottom: 1vw;
    text-align: center;
  }
}
@media (max-width: 768px) {
  .card-section .txt {
    position: relative;
    inset: auto;
    transform: none;
    text-align: center;
  }
}

.word-break {
  display: none;
}
@media (max-width: 768px) {
  .word-break {
    display: block;
  }
}

h4.title {
  color: var(--color-title-blue);
}
@media (max-width: 768px) {
  h4.title {
    font-size: 4vw;
    margin: 2vw 0;
  }
}

.txt {
  color: var(--text-primary-light);
  font-size: 1rem;
  line-height: 1.5;
  animation: blur 0.5s 0.5s 1 ease-in-out both;
}
.txt--point {
  color: var(--color-primary);
}
@media (max-width: 768px) {
  .txt {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    font-size: 3vw;
    line-height: 4.8vw;
  }
}

:root {
  --font-family-base: "Almarai", ui-sans-serif, system-ui, -apple-system, roboto, blinkmacsystemfont, "Segoe UI", "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-crimson-pro: "Crimson Pro", serif;
  --text-primary-light: var(--color-emphasis-7);
  --text-primary: var(--color-emphasis-10);
  --text-primary-2: var(--color-primary);
  --text-button: var(--color-emphasis-1);
  --color-footer: var(--color-primary-dark);
  --title-blue: var(--color-title-blue);
  --title-gray: var(--color-title-gray);
  --title-dark-blue-bg: var(--color-title-dark-blue-bg);
  --g-bdrs: 3px;
  --filter-main-logo: brightness(1);
  --shadow-primary-light: 0 1px 4px rgba(var(--color-gray-10-rgb), 0.2);
  --color-gray-1: #FFFFFF;
  --color-gray-1-rgb: 255, 255, 255;
  --color-gray-2: #F7F7F7;
  --color-gray-2-rgb: 247, 247, 247;
  --color-gray-3: #F0F0F0;
  --color-gray-3-rgb: 240, 240, 240;
  --color-gray-4: #D9D9D9;
  --color-gray-4-rgb: 217, 217, 217;
  --color-gray-5: #BFBFBF;
  --color-gray-5-rgb: 191, 191, 191;
  --color-gray-6: #8C8C8C;
  --color-gray-6-rgb: 140, 140, 140;
  --color-gray-7: #595959;
  --color-gray-7-rgb: 89, 89, 89;
  --color-gray-8: #434343;
  --color-gray-8-rgb: 67, 67, 67;
  --color-gray-9: #262626;
  --color-gray-9-rgb: 38, 38, 38;
  --color-gray-10: #121212;
  --color-gray-10-rgb: 18, 18, 18;
  --color-white: #FFFFFF;
  --color-white-rgb: 255, 255, 255;
  --color-black: #000000;
  --color-black-rgb: 0, 0, 0;
  --color-emphasis-1: var(--color-gray-1);
  --color-emphasis-2: var(--color-gray-2);
  --color-emphasis-3: var(--color-gray-3);
  --color-emphasis-4: var(--color-gray-4);
  --color-emphasis-5: var(--color-gray-5);
  --color-emphasis-6: var(--color-gray-6);
  --color-emphasis-7: var(--color-gray-7);
  --color-emphasis-8: var(--color-gray-8);
  --color-emphasis-9: var(--color-gray-9);
  --color-emphasis-10: var(--color-gray-10);
}
:root[data-theme=theme-light] {
  color-scheme: light;
  --color-primary-dark: #242424;
  --color-primary-dark-rgb: 36, 36, 36;
  --color-primary: rgb(0, 66, 111);
  --color-primary-rgb: 0, 66, 111;
  --color-primary-light: #008AE8;
  --color-primary-light-rgb: 0, 138, 232;
  --color-title-blue: #A3CFD4;
  --color-title-blue-rgb: 163, 207, 212;
  --color-title-gray: #F1F1F1;
  --color-title-gray-rgb: 241, 241, 241;
  --color-title-dark-blue-bg: #193042;
  --color-title-dark-blue-bg-rgb: 25, 48, 66;
  --color-bg: #F1F1F1;
  --color-bg-rgb: 241, 241, 241;
}
:root[data-theme=theme-dark] {
  --filter-main-logo: brightness(10);
  --color-emphasis-1: var(--color-gray-10);
  --color-emphasis-2: var(--color-gray-9);
  --color-emphasis-3: var(--color-gray-8);
  --color-emphasis-4: var(--color-gray-7);
  --color-emphasis-5: var(--color-gray-6);
  --color-emphasis-6: var(--color-gray-5);
  --color-emphasis-7: var(--color-gray-4);
  --color-emphasis-8: var(--color-gray-3);
  --color-emphasis-9: var(--color-gray-2);
  --color-emphasis-10: var(--color-gray-1);
  color-scheme: dark;
  --color-primary-dark: #23446E;
  --color-primary-dark-rgb: 35, 68, 110;
  --color-primary: #FEAE22;
  --color-primary-rgb: 254, 174, 34;
  --color-primary-light: #FFBA42;
  --color-primary-light-rgb: 255, 186, 66;
  --color-bg: #0D1F36;
  --color-bg-rgb: 13, 31, 54;
}

.ic-box {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.ic-box .ic {
  width: 100%;
  height: 100%;
}

.ic {
  display: inline-block;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
.ic--arrow-up {
  background-image: url(..//img/icon/ic-arrow-up.svg);
}
.ic--bullseye-arrow {
  background-image: url(..//img/icon/ic-bullseye-arrow.svg);
}
.ic--code {
  background-image: url(..//img/icon/ic-code.svg);
}
.ic--computer {
  background-image: url(..//img/icon/ic-computer.svg);
}
.ic--data {
  background-image: url(..//img/icon/ic-data.svg);
}
.ic--earth {
  background-image: url(..//img/icon/ic-earth.svg);
}
.ic--location {
  background-image: url(..//img/icon/ic-location.svg);
}
.ic--message {
  background-image: url(..//img/icon/ic-message.svg);
}
.ic--phone {
  background-image: url(..//img/icon/ic-phone.svg);
}
.ic--premium {
  background-image: url(..//img/icon/ic-premium.svg);
}
.ic--team {
  background-image: url(..//img/icon/ic-team.svg);
}
.ic--trend {
  background-image: url(..//img/icon/ic-trend.svg);
}
.ic--hand-holding-medical-solid {
  background-image: url(..//img/icon/ic-hand-holding-medical-solid.svg);
}
.ic--bell-concierge-solid {
  background-image: url(..//img/icon/ic-bell-concierge-solid.svg);
}
.ic--briefcase-solid {
  background-image: url(..//img/icon/ic-briefcase-solid.svg);
}
.ic--money-bills-solid {
  background-image: url(..//img/icon/ic-money-bills-solid.svg);
}
.ic--plane-solid {
  background-image: url(..//img/icon/ic-plane-solid.svg);
}
.ic--sack-dollar-solid {
  background-image: url(..//img/icon/ic-sack-dollar-solid.svg);
}
.ic--wallet-solid {
  background-image: url(..//img/icon/ic-wallet-solid.svg);
}
.ic--calendar-check-solid {
  background-image: url(..//img/icon/ic-calendar-check-solid.svg);
}
.ic--mug-hot-solid {
  background-image: url(..//img/icon/ic-mug-hot-solid.svg);
}
.ic--champagne-glasses-solid {
  background-image: url(..//img/icon/ic-champagne-glasses-solid.svg);
}
.ic--house-laptop-solid {
  background-image: url(..//img/icon/ic-house-laptop-solid.svg);
}

.figure-section,
.unit-section,
.multi-section,
.contact-section {
  display: flex;
  flex: 1 0 100%;
}
@media (max-width: 768px) {
  .figure-section,
  .unit-section,
  .multi-section,
  .contact-section {
    flex-wrap: wrap;
  }
}

.figure-section, .multi-section {
  max-width: 75rem;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.unit-section {
  flex: 1 0 100%;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  padding: 1.875rem 10%;
  text-align: center;
  background-color: var(--title-dark-blue-bg);
}
@media (max-width: 768px) {
  .unit-section {
    padding: 3vw 10%;
  }
}
.unit-section p {
  flex: 1 0 100%;
}
.unit-section .txt {
  color: var(--color-gray-4);
}
@media (max-width: 768px) {
  .unit-section .txt {
    font-size: 2.5vw;
  }
}

.figure-section {
  gap: 3.75rem;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
}
@media (max-width: 768px) {
  .figure-section {
    gap: 1vw;
    margin-top: 0.5rem;
    margin-bottom: 1.875rem;
  }
}
.figure-section .title {
  margin-bottom: 0.5rem;
}
@media (max-width: 768px) {
  .figure-section .title {
    margin-bottom: 1vw;
  }
}
.figure-section .img-box {
  animation: top-fade-in 0.5s 0s 1 linear both, blur 0.5s 0s 1 ease-in-out both;
}

.multi-section {
  gap: 1.875rem 2.5rem;
  align-items: center;
  margin: 2.5rem 0 1.875rem;
}
.multi-section .title {
  flex: 1;
}
.multi-section .txt {
  flex: 3;
}
@media (max-width: 768px) {
  .multi-section {
    flex-wrap: wrap;
    gap: 1vw 3.75rem;
    text-align: center;
    margin: 5vw 0 8vw 0;
  }
  .multi-section .ic-box,
  .multi-section .title,
  .multi-section .txt {
    flex: 1 0 100%;
  }
}

.contact-section {
  gap: 2.5rem;
  justify-content: center;
  text-align: center;
  background: var(--color-title-dark-blue-bg);
  padding-top: 1.875rem;
  padding-bottom: 1.875rem;
}
@media (max-width: 768px) {
  .contact-section {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    gap: 2vw;
  }
}
.contact-section .title {
  margin: 1.3vw 0;
}
.contact-section .txt {
  font-size: 0.875rem;
  color: var(--color-gray-2);
}
@media (max-width: 768px) {
  .contact-section .txt {
    font-size: 3.5vw;
  }
}

.multi-section .ic-box,
.contact-section .ic-box {
  flex-shrink: 0;
  color: var(--title-blue);
  width: 3.125rem;
  height: 3.125rem;
}
@media (max-width: 768px) {
  .multi-section .ic-box,
  .contact-section .ic-box {
    width: 1.5625rem;
    height: 1.5625rem;
  }
}

.card-section {
  padding: 1rem;
  background-color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.5rem;
  border-radius: 0.375rem;
  min-height: 7.125rem;
  flex-direction: row;
}
@media (max-width: 768px) {
  .card-section {
    gap: 1vw;
    justify-content: center;
    flex-direction: column;
    min-height: 14.844vw;
  }
}
.card-section__container {
  max-width: 75rem;
  width: calc(100% - 10vw);
  position: relative;
  gap: 2rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  margin: 0 auto 2.5rem auto;
}
@media (max-width: 768px) {
  .card-section__container {
    gap: 5vw;
  }
  .card-section__container .figure-section {
    margin-bottom: calc(1.875rem - 5vw);
  }
}
.card-section .detail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
@media (max-width: 768px) {
  .card-section .detail {
    align-items: center;
    width: 100%;
  }
}
.card-section.half {
  width: calc(50% - 1rem);
}
@media (max-width: 768px) {
  .card-section.half {
    width: 100%;
  }
}
.card-section.full {
  width: 100%;
}
.card-section .ic-box {
  width: 3rem;
  height: 3rem;
  aspect-ratio: 1/1;
}
.card-section .ic-box i {
  color: #A3CFD4;
}
@media (max-width: 768px) {
  .card-section .ic-box {
    width: 6.25vw;
    height: 6.25vw;
    min-width: 1.5625rem;
    min-height: 1.5625rem;
  }
}

.hamburger {
  z-index: 99;
  display: flex;
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  color: var(--color-primary);
  cursor: pointer;
  width: 1.25rem;
  height: 1.25rem;
}
@media (max-width: 768px) {
  .hamburger {
    display: flex;
  }
}
.hamburger .line {
  display: block;
  width: 100%;
  height: 0.125rem;
  border-radius: var(--g-bdrs);
  background: var(--color-primary);
  transition: all 0.3s ease-in-out;
}
.hamburger .line:nth-child(2) {
  width: 80%;
}
.hamburger--active .line:nth-child(1) {
  transform: translateY(calc(1.25rem / 3)) rotate(45deg);
}
.hamburger--active .line:nth-child(2) {
  opacity: 0;
}
.hamburger--active .line:nth-child(3) {
  transform: translateY(calc(1.25rem / -3)) rotate(-45deg);
}

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(var(--color-primary-rgb), 1);
  color: var(--text-button);
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
}
.btn:hover {
  background: rgba(var(--color-primary-light-rgb), 1);
}
@media (hover: none) {
  .btn:hover {
    background: rgba(var(--color-primary-rgb), 1);
  }
}

.btn--filled {
  width: 15.625rem;
  margin-top: 0.9375rem;
  padding: 0.9375rem 1.875rem;
  border-radius: 50px;
  font-size: 1.125rem;
}
@media (max-width: 768px) {
  .btn--filled {
    margin: 1.875rem auto 0;
  }
}

.go-top-layout {
  position: fixed;
  right: 5rem;
  bottom: 6.25rem;
  z-index: 2;
  transition: bottom 0.8s ease-in;
}
@media (max-width: 768px) {
  .go-top-layout {
    right: 0.9375rem;
    bottom: 1.875rem;
  }
}
.go-top-layout .btn {
  width: 3.125rem;
  height: 3.125rem;
  border-radius: 50px;
  border: 1px var(--color-gray-2) solid;
  transition: 0.25s ease-in-out;
}
.go-top-layout .btn .ic {
  width: 1.125rem;
  height: 1.125rem;
  color: currentcolor;
}
@media (max-width: 768px) {
  .go-top-layout .btn .ic {
    width: 5vw;
    height: 5vw;
  }
}
@media (max-width: 768px) {
  .go-top-layout .btn {
    width: 12vw;
    height: 12vw;
  }
}

.slider-section {
  width: 100%;
  height: auto;
  aspect-ratio: 2/1.25;
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
}
@media (max-width: 768px) {
  .slider-section {
    margin-top: 5vw;
    margin-bottom: 8vw;
  }
}
.slider-section .title {
  min-width: 20%;
  text-align: center;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
@media (max-width: 768px) {
  .slider-section {
    aspect-ratio: 2/1.55;
  }
}
.slider-section .swiper-button-prev,
.slider-section .swiper-button-next {
  background: rgba(3, 44, 80, 0.75);
  width: 2.5rem;
  aspect-ratio: 2.5/4;
  height: auto;
}
@media (max-width: 768px) {
  .slider-section .swiper-button-prev,
  .slider-section .swiper-button-next {
    width: 1.25rem;
  }
}
.slider-section .swiper-button-prev::after,
.slider-section .swiper-button-next::after {
  color: var(--title-blue);
  font-size: 2rem;
  transition: 0.25s ease-in-out;
}
@media (max-width: 768px) {
  .slider-section .swiper-button-prev::after,
  .slider-section .swiper-button-next::after {
    font-size: 1rem;
  }
}
.slider-section .swiper-button-prev:hover::after,
.slider-section .swiper-button-next:hover::after {
  color: var(--color-white);
}
.slider-section .swiper-button-prev {
  border-top-right-radius: 0.1875rem;
  border-bottom-right-radius: 0.1875rem;
}
.slider-section .swiper-button-prev:hover::after {
  margin-right: 0.35rem;
}
@media (max-width: 768px) {
  .slider-section .swiper-button-prev:hover::after {
    margin-right: 0.2rem;
  }
}
.slider-section .swiper-button-next {
  border-top-left-radius: 0.1875rem;
  border-bottom-left-radius: 0.1875rem;
}
.slider-section .swiper-button-next:hover::after {
  margin-left: 0.35rem;
}
@media (max-width: 768px) {
  .slider-section .swiper-button-next:hover::after {
    margin-left: 0.2rem;
  }
}
.slider-section .swiper-button-next,
.slider-section .swiper-rtl .swiper-button-prev {
  right: var(--swiper-navigation-sides-offset, 0px);
}
.slider-section .swiper-button-prev,
.slider-section .swiper-rtl .swiper-button-next {
  left: var(--swiper-navigation-sides-offset, 0px);
}

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

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

.swiper-careers {
  width: 100%;
  height: 85%;
}
@media (max-width: 768px) {
  .swiper-careers {
    height: 80%;
  }
}

.swiper-careers-thumbs {
  height: 15%;
  box-sizing: border-box;
  padding: 10px 0;
}
.swiper-careers-thumbs .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
  transition: 0.3s;
  cursor: pointer;
}
.swiper-careers-thumbs .swiper-slide.swiper-slide-thumb-active {
  opacity: 1;
}
@media (max-width: 768px) {
  .swiper-careers-thumbs {
    height: 20%;
  }
}

.main-layout {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.main-layout::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  animation: bottom-fade-in 0.5s 0s 1 linear both, blur 0.5s 0s 1 ease-in-out both;
  mix-blend-mode: overlay;
  width: 100%;
  height: 100%;
}

.main-header {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 10;
  display: flex;
  flex: 0 0 3.125rem;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0.5rem 1.875rem 0.5rem;
  background: rgb(var(--color-bg-rgb), 1);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-primary-light);
}
@media (max-width: 768px) {
  .main-header {
    position: fixed;
    padding: 3.4vw 0.9375rem;
  }
}

.main-content {
  flex: 1;
  width: 100%;
}
.main-content .btn {
  animation: blur 0.5s 0.3s 1 ease-in-out both;
}
.main-content .title {
  animation: blur 0.3s 0.1s 1 ease-in-out both;
}

.about-us .txt, .services .txt {
  animation: blur 0.8s 0.3s 1 ease-in-out both;
  border-left: 1px var(--title-blue) solid;
  padding-left: 1.5625rem;
}
@media (max-width: 768px) {
  .about-us .txt, .services .txt {
    padding: 0 2.5vw;
    border: none;
  }
}

.main-footer {
  display: flex;
  flex: 0 0 calc(5rem + env(safe-area-inset-bottom));
  justify-content: center;
  align-items: center;
  width: 100%;
  background: var(--color-footer);
  color: var(--color-bg);
  font-size: 0.875rem;
  padding: 1.875rem 0;
}
@media (max-width: 768px) {
  .main-footer {
    flex: auto;
    padding: 5vw 0;
    font-size: 2.5vw;
  }
}

.header-layout {
  display: flex;
  flex: 0 1 75rem;
  justify-content: space-between;
  align-items: center;
}
.header-layout .main-logo {
  width: 10.9375rem;
  height: auto;
  filter: var(--filter-main-logo);
  cursor: pointer;
}
@media (max-width: 768px) {
  .header-layout .main-logo {
    width: 5.9375rem;
  }
}

.navbar {
  display: flex;
  align-items: center;
}
@media (max-width: 768px) {
  .navbar {
    position: fixed;
    top: 0;
    right: -200px;
    align-items: flex-start;
    overflow-y: auto;
    width: 200px;
    height: 100vh;
    padding: 5rem 0.5rem;
    border: 1px solid var(--color-bg);
    background: linear-gradient(270deg, rgba(var(--color-bg-rgb), 1) 50%, rgba(var(--color-bg-rgb), 0.7) 100%);
    box-shadow: var(--shadow-primary);
    transition: 0.25s ease-in-out;
    backdrop-filter: blur(15px);
    pointer-events: none;
  }
  .navbar .nav {
    flex-wrap: wrap;
  }
  .navbar .nav__item {
    flex: 1 0 100%;
  }
  .navbar--active {
    right: 0;
    pointer-events: visible;
  }
}
.navbar .nav {
  display: flex;
  gap: 0.9375rem;
  justify-content: center;
  align-items: center;
}
.navbar .nav__item {
  display: flex;
  gap: 0 0.25rem;
  justify-content: flex-end;
  align-items: center;
  height: 3.125rem;
  padding: 0.9375rem;
  color: var(--text-primary-light);
  text-align: center;
  cursor: pointer;
}
.navbar .nav__item :hover {
  color: var(--color-primary);
}
.navbar .nav__item--active {
  color: var(--color-primary);
}
@media (max-width: 768px) {
  .navbar .nav__item {
    height: 1.875rem;
  }
}
.navbar .nav .ic-box {
  width: 1.25rem;
  height: 1.25rem;
}

.cover {
  background: linear-gradient(180deg, #0F171E 0%, #193042 100%);
}
@media (max-width: 768px) {
  .cover {
    margin-top: 2.5rem;
  }
}
.cover .txt {
  border: none;
  padding: 0;
}
.cover .article {
  flex: 1;
  position: absolute;
  top: 50%;
  left: 6.25rem;
  transform: translateY(-50%);
  z-index: 1;
  padding: 1.875rem;
  background: rgba(3, 44, 80, 0.88);
}
.cover .article .txt {
  max-width: 18.75rem;
  color: var(--color-gray-4);
}
@media (max-width: 768px) {
  .cover .article .txt {
    max-width: none;
  }
}
@media (max-width: 768px) {
  .cover .article {
    flex: auto;
    text-align: center;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    padding: 0.625rem;
    width: 80vw;
  }
}
.cover .img-box {
  width: 100%;
  background-color: #558877;
}
@media (max-width: 768px) {
  .cover .img-box {
    height: 56vw;
    flex: auto;
    order: -1;
  }
  .cover .img-box img {
    height: 100%;
  }
}
.cover .figure-section {
  gap: 1.875rem;
  margin: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
}
.container .article {
  flex: 1;
}
.container .img-box {
  flex: 1;
}
@media (max-width: 768px) {
  .container .article {
    flex: auto;
    text-align: center;
  }
  .container .img-box {
    flex: 0 1 15.625rem;
    order: -1;
  }
}
@media (max-width: 768px) {
  .container .figure-section {
    justify-content: center;
  }
}
.container .contact-section .article {
  flex: 0 1 20rem;
  margin-bottom: 2vw;
}
@media (max-width: 768px) {
  .container .contact-section .article {
    flex: 1 0 100%;
  }
}