/* ---------------- Google fonts ------------------ */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

/* External fonts */
@font-face {
  font-family: "Mundial";
  src: url("fonts/Mundial-BoldItalic.ttf") format("truetype");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Mundial";
  src: url("fonts/Mundial-Demibold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Mundial";
  src: url("fonts/Mundial-DemiboldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Mundial";
  src: url("fonts/Mundial-Hair.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Mundial";
  src: url("fonts/Mundial-HairItalic.ttf") format("truetype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Mundial";
  src: url("fonts/Mundial-Italic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Mundial";
  src: url("fonts/Mundial-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Mundial";
  src: url("fonts/Mundial-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Mundial";
  src: url("fonts/Mundial-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Mundial";
  src: url("fonts/Mundial-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aeonik TRIAL";
  src: url("fonts/AeonikTRIAL-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aeonik TRIAL";
  src: url("fonts/AeonikTRIAL-BoldItalic.ttf") format("truetype");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Mundial";
  src: url("fonts/Mundial-ThinItalic.ttf") format("truetype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Aeonik TRIAL";
  src: url("fonts/AeonikTRIAL-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aeonik TRIAL";
  src: url("fonts/AeonikTRIAL-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Aeonik TRIAL";
  src: url("fonts/AeonikTRIAL-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aeonik TRIAL";
  src: url("fonts/AeonikTRIAL-RegularItalic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Mundial";
  src: url("fonts/Mundial-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Mundial";
  src: url("fonts/Mundial-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Mundial";
  src: url("fonts/Mundial-BlackItalic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

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

html {
  font-size: 0.694vw;
}

:root {
  scroll-behavior: unset;
  --white: #ffffff;
  --black: #000000;

  --white_img: brightness(0) saturate(100%) invert(99%) sepia(0%)
    saturate(7498%) hue-rotate(67deg) brightness(112%) contrast(100%);
  --black_img: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(16%);

  --primaryfont: "Inter", sans-serif;
  --secondaryfont: "Aeonik TRIAL", sans-serif;
  --thirdfont: "Mundial", sans-serif;

  --MenuHeight: 9.1rem;

  --shadow: 0 0 0.4rem 0 #00000040;
}

img {
  width: 100%;
}

html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
strong,
i,
ol,
ul,
li,
form,
label,
footer,
header,
menu,
nav,
section {
  margin: 0;
  padding: 0;
}

ol,
ul {
  list-style: none;
}

a {
  text-decoration: none !important;
  transition: 200ms;
  color: inherit;
}

.f-right {
  float: right;
}
button:focus,
a:focus,
input:focus,
textarea:focus {
  outline: none;
}

button {
  background: none;
  border: none;
  outline: none;
  padding: 0;
}

/* body */
body {
  font-size: 1.6rem;
  line-height: 1.6;
  font-weight: 400;
  color: #535862;
  overflow-x: hidden;
  font-family: var(--primaryfont);
  background-color: #ffffff;
  background-image: url("../img/main_bg.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}

.container {
  margin: 0 auto;
  width: 100%;
}

main {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.figure img,
.figure {
  width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  font-family: var(--secondaryfont);
}

/* image colros */
.white_img {
  -webkit-filter: brightness(0) saturate(100%) invert(99%) sepia(0%)
    saturate(7498%) hue-rotate(67deg) brightness(112%) contrast(100%);
  filter: brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(7498%)
    hue-rotate(67deg) brightness(112%) contrast(100%);
}
.black_img {
  -webkit-filter: brightness(0) saturate(100%) invert(0%) sepia(0%)
    saturate(16%) hue-rotate(309deg) brightness(93%) contrast(107%);
  filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(16%)
    hue-rotate(309deg) brightness(93%) contrast(107%);
}

/* Font Weights */
.f_300 {
  font-weight: 300 !important;
}
.f_400 {
  font-weight: 400 !important;
}
.f_500 {
  font-weight: 500 !important;
}
.f_600 {
  font-weight: 600 !important;
}
.f_700 {
  font-weight: 700 !important;
}
.f_800 {
  font-weight: 800 !important;
}
.f_900 {
  font-weight: 900 !important;
}

/* texts */
.text_xl {
  font-size: 2rem;
  line-height: 1;
}
.text_lg {
  font-size: 1.8rem;
  line-height: 1;
}
.text_md {
  font-size: 1.6rem;
  line-height: 1;
}
.text_sm {
  font-size: 1.4rem;
  line-height: 1;
}
.text_xsm {
  font-size: 1.2rem;
  line-height: 1;
}
.text_2xsm {
  font-size: 1rem;
  line-height: 1;
}

/* ====================== header ======================= */
.site_header {
  padding: 1.2rem 0;
  position: sticky;
  top: 0;
  width: 100%;
  left: 0;
  z-index: 9999;
}

.site_header nav {
  background: #ffffff;
  height: 7.4rem;
  padding: 0 1.6rem;
  box-shadow: 0 0.1rem 0.2rem 0 #0a0d120d;
  border: 0.1rem solid #00000014;
  border-radius: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header_logo svg {
  width: 11.6rem;
  height: 2.4rem;
}

.menu_actions {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.language_btn {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  font-family: var(--secondaryfont);
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 1;
  color: #000000;
  cursor: pointer;
}

.blue_circle {
  width: 4.8rem;
  height: 5rem;
  background: #0c25c7;
  border-radius: 100rem;
}

.language_select {
  position: relative;
}

.language_dropdown {
  background: #fff;
  border-radius: 0.6rem;
  min-width: 10rem;
  box-shadow: 0 0.5rem 1.5rem 0.1rem rgba(0, 0, 0, 0.15);
  padding: 0.5rem 0;
  position: absolute;
  z-index: 1;
  transform: translateY(1.5rem);
  pointer-events: none;
  opacity: 0;
  transition: 0.35s ease;
}

.language_select.active .language_dropdown {
  transform: translateY(0.5rem);
  pointer-events: all;
  opacity: 1;
}

.language_dropdown li {
  padding: 0 1.2rem;
  font-size: 1.8rem;
  height: 3.2rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: 0.35s ease;
  color: #000000;
}

.language_dropdown li.active,
.language_dropdown li:hover {
  background: #f1f1f1;
  color: #000000;
  font-weight: 500;
}

.language_btn span {
  display: block;
  width: 3.5rem;
}

.menu_actions a {
  color: #414651;
  font-size: 1.4rem;
  height: 3.3rem;
  display: flex;
  align-items: center;
  border-radius: 10rem;
  box-shadow: 0 0 0 0.1rem #0a0d120d;
  padding: 0 1.8rem;
  border: 0.1rem solid #d5d7da;
}

.menu_actions a:hover {
  background: #d5d7da;
  color: #000;
}

/* ============ Main Section ============ */
.content {
  text-align: center;
  display: grid;
}

.content h1 {
  color: #181d27;
  font-size: 6rem;
  line-height: 1.15;
  font-weight: 400;
  font-family: var(--secondaryfont);
  letter-spacing: -0.02em;
  max-width: 102.4rem;
  margin: 0 auto;
}

.content p {
  padding: 2.4rem 0 4.8rem;
  color: #535862;
  font-size: 2rem;
  font-weight: 400;
  max-width: 76.8rem;
  margin: 0 auto;
  line-height: 1.5;
}

.content a {
  height: 5.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 0 auto;
  position: relative;
  color: #fff;
  padding: 0 1.8rem;
  border-radius: 10rem;
  transition: 0.35s ease;
}

.content a span {
  position: relative;
  z-index: 1;
}

.content a svg {
  position: absolute;
  width: calc(100% + 1rem);
  height: calc(100% + 1rem);
  left: 50%;
  top: calc(50% + 0.15rem);
  transform: translate(-50%, -50%);
  transition: 0.35s ease;
}

.content a:hover svg {
  filter: brightness(0.5);
}

.site_img {
  margin-top: 6.4rem;
}

.main_section {
  padding-top: 7.4rem;
}

/* ============= footer_section =========== */
.footer_section {
  background: #31542a;
  padding: 5.1rem 0 4.8rem;
  color: #94979c;
}

.footer_logo svg {
  width: 11.6rem;
  height: 2.4rem;
  display: block;
  width: fit-content;
}

.footer_logo {
  display: block;
}

.footer_top p {
  padding: 3.2rem 0;
  font-size: 1.6rem;
}

.footer_mid {
  display: flex;
  align-items: center;
  gap: 3.2rem;
  margin-bottom: 6.4rem;
}

.footer_mid a {
  font-size: 1.6rem;
  font-weight: 600;
}

.footer_mid a:hover {
  color: #fff;
}

.footer_bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #d8d8d8;
}

.footer_bottom ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
}

.footer_bottom ul a svg,
.footer_bottom ul a img {
  transition: 0.35s ease;
  filter: brightness(0) saturate(100%) invert(81%) sepia(0%) saturate(682%)
    hue-rotate(315deg) brightness(109%) contrast(72%);
  width: 2.4rem;
  height: 2.4rem;
}

.footer_bottom ul a:hover svg,
.footer_bottom ul a:hover img {
  filter: var(--black_img);
}