/* ========================================
   CSS RESET
   ======================================== */

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,
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,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
}

/* ========================================
   @FONT-FACE — LT Superior
   ======================================== */

/* Thin — 100 */
@font-face {
  font-family: "LT Superior";
  src: url("../fonts/LT_Superior/LTSuperior-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

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

/* ExtraLight — 200 */
@font-face {
  font-family: "LT Superior";
  src: url("../fonts/LT_Superior/LTSuperior-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "LT Superior";
  src: url("../fonts/LT_Superior/LTSuperior-ExtraLightItalic.ttf")
    format("truetype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

/* Light — 300 */
@font-face {
  font-family: "LT Superior";
  src: url("../fonts/LT_Superior/LTSuperior-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

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

/* Regular — 400 */
@font-face {
  font-family: "LT Superior";
  src: url("../fonts/LT_Superior/LTSuperior-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "LT Superior";
  src: url("../fonts/LT_Superior/LTSuperior-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Medium — 500 */
@font-face {
  font-family: "LT Superior";
  src: url("../fonts/LT_Superior/LTSuperior-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "LT Superior";
  src: url("../fonts/LT_Superior/LTSuperior-MediumItalic.ttf")
    format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* SemiBold — 600 */
@font-face {
  font-family: "LT Superior";
  src: url("../fonts/LT_Superior/LTSuperior-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "LT Superior";
  src: url("../fonts/LT_Superior/LTSuperior-SemiBoldItalic.ttf")
    format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

/* Bold — 700 */
@font-face {
  font-family: "LT Superior";
  src: url("../fonts/LT_Superior/LTSuperior-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "LT Superior";
  src: url("../fonts/LT_Superior/LTSuperior-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ExtraBold — 800 */
@font-face {
  font-family: "LT Superior";
  src: url("../fonts/LT_Superior/LTSuperior-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "LT Superior";
  src: url("../fonts/LT_Superior/LTSuperior-ExtraBoldItalic.ttf")
    format("truetype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

/* Black — 900 */
@font-face {
  font-family: "LT Superior";
  src: url("../fonts/LT_Superior/LTSuperior-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

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

/* ========================================
   CSS VARIABLES
   ======================================== */

:root {
  --primary: #355fcc;
  --secondary: #f5f7fc;
  --flat: #d3ddf3;
  --dark: #010d2c;
  --light: #ffffff;

  --text-primary: #355fcc;
  --text-dark: #010d2c;
  --text-light: #ffffff;

  --gradient: linear-gradient(to right, #010d2c, #355fcc);

  --rounded-8: 0.48rem;
  --rounded-10: 0.6rem;
  --rounded-20: 1.21rem;

  --main_block_padding: 12.19rem;
}

/* ========================================
   FLUID TYPOGRAPHY BASE
   1rem = 16.4px at 1920x1080
   ======================================== */

html {
  font-size: calc(0.433vw + 0.433vh + 0.3175vmin);
}

@media (max-width: 430px) {
  html {
    font-size: calc(0.333vw + 0.333vh + 0.2175vmin);
  }
}

/* ========================================
   GLOBAL DEFAULTS
   ======================================== */

ul,
ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
  font-family: "LT Superior", sans-serif;
}

body {
  font-family: "LT Superior", sans-serif;
  background-color: var(--light);
  color: var(--text-dark);
  padding: 1.21rem 3.04rem;
}

*:focus {
  outline: none;
}

img {
  max-width: 100%;
  height: auto;
}

/* ========================================
   TYPOGRAPHY UTILITY CLASSES
   ======================================== */

/* 96px */
.text-xxl {
  font-size: 5.854rem;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* 77px */
.text-xl3 {
  font-size: 4.695rem;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* 55px */
.text-xl2 {
  font-size: 3.354rem;
  line-height: 1;
  letter-spacing: -0.01em;
}

/* 46px */
.text-xl1 {
  font-size: 2.805rem;
  line-height: 1;
  letter-spacing: -0.01em;
}

/* 32px */
.text-l {
  font-size: 1.951rem;
  line-height: 1;
}

/* 24px */
.text-m2 {
  font-size: 1.46rem;
  line-height: 1;
}

/* 20px */
.text-m1 {
  font-size: 1.22rem;
  line-height: 1.19;
}

/* 18px */
.text-m {
  font-size: 1.098rem;
  line-height: 1;
}

/* 16px */
.text-s {
  font-size: 0.976rem;
  line-height: 1;
}

/* 13px */
.text-xs {
  font-size: 0.793rem;
  line-height: 1;
}

/* ========================================
   REUSABLE CLASSES
   ======================================== */

.hover_button {
  transition: transform 0.3s ease;
  cursor: pointer;
}

.hover_button:hover {
  transform: scale(1.05);
}

.primary_button {
  display: inline-block;
  border: none;
  border-radius: var(--rounded-10);
  background-color: var(--primary);
  color: var(--text-light);
  text-transform: uppercase;
  font-size: 1.098rem;
  line-height: 1;
  font-weight: 600;
  padding: 1.2rem 2rem;
  transition: transform 0.3s ease;
  cursor: pointer;
}

.primary_button:hover {
  transform: scale(1.05);
}

.section_tag {
  width: fit-content;
  height: fit-content;
  display: inline-block;
  border: 0.06rem solid var(--primary);
  color: var(--primary);
  border-radius: 6.09rem;
  font-size: 1.22rem;
  line-height: 1;
  white-space: nowrap;
  padding: 0.67rem 1.03rem;
}

/* ========================================
   MOBILE OVERRIDES — 1024px
   ======================================== */

@media (max-width: 1024px) {
  :root {
    --main_block_padding: 1.21rem;
    --rounded-8: 1.48rem;
    --rounded-10: 1.8rem;
    --rounded-20: 3rem;
  }

  body {
    padding: 1.21rem 2.04rem;
  }

  .col-sm-12 {
    flex: 0 0 100% !important;
    width: 100% !important;
  }

  .col-sm-6 {
    flex: 0 0 50% !important;
    width: 50% !important;
  }

  /* 96px */
  .text-xxl {
    font-size: 8rem;
    line-height: 1;
  }

  /* 77px */
  .text-xl3 {
    font-size: 3.1rem;
    line-height: 1.1;
  }

  /* 55px */
  .text-xl2 {
    font-size: 5rem;
    line-height: 1.15;
  }

  /* 46px */
  .text-xl1 {
    font-size: 4.2rem;
    line-height: 1.1;
  }

  /* 32px */
  .text-l {
    font-size: 3rem;
    line-height: 1;
  }

  /* 24px */
  .text-m2 {
    font-size: 2.46rem;
    line-height: 1;
  }

  /* 20px */
  .text-m1 {
    font-size: 2rem;
    line-height: 1.2;
  }

  /* 18px */
  .text-m {
    font-size: 1.8rem;
    line-height: 1.4;
  }

  /* 16px */
  .text-s {
    font-size: 1.6rem;
    line-height: 1.5;
  }

  /* 13px */
  .text-xs {
    font-size: 1.3rem;
    line-height: 1.4;
  }

  .primary_button {
    width: 100%;
    text-align: center;
    font-size: 2.098rem;
    padding: 1.8rem 2.43rem;
  }

  .section_tag {
    font-size: 3rem;
    padding: 0.6rem 1.5rem;
  }
}

@media (min-width: 1921px) {
  .primary_button {
    padding: 1.2rem 1.7rem;
  }
}