/* ==================== ROBOTO ==================== */
@font-face {
  font-family: "Roboto Thin";
  src: url("../fonts/Roboto/Roboto-Thin.ttf");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

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

@font-face {
  font-family: "Roboto ExtraLight";
  src: url("../fonts/Roboto/Roboto-ExtraLight.ttf");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto ExtraLightItalic";
  src: url("../fonts/Roboto/Roboto-ExtraLightItalic.ttf");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

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

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

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

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

@font-face {
  font-family: "Roboto Medium";
  src: url("../fonts/Roboto/Roboto-Medium.ttf");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto MediumItalic";
  src: url("../fonts/Roboto/Roboto-MediumItalic.ttf");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

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

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

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

@font-face {
  font-family: "Roboto BoldItalic";
  src: url("../fonts/Roboto/Roboto-BoldItalic.ttf");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Roboto ExtraBold";
  src: url("../fonts/Roboto/Roboto-ExtraBold.ttf");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto ExtraBoldItalic";
  src: url("../fonts/Roboto/Roboto-ExtraBoldItalic.ttf");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

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

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

/* ==================== ROBOTO CONDENSED ==================== */
@font-face {
  font-family: "Roboto Condensed Thin";
  src: url("../fonts/Roboto/Roboto_Condensed-Thin.ttf");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

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

@font-face {
  font-family: "Roboto Condensed ExtraLight";
  src: url("../fonts/Roboto/Roboto_Condensed-ExtraLight.ttf");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Condensed ExtraLightItalic";
  src: url("../fonts/Roboto/Roboto_Condensed-ExtraLightItalic.ttf");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

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

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

@font-face {
  font-family: "Roboto Condensed Regular";
  src: url("../fonts/Roboto/Roboto_Condensed-Regular.ttf");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Condensed Italic";
  src: url("../fonts/Roboto/Roboto_Condensed-Italic.ttf");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Condensed Medium";
  src: url("../fonts/Roboto/Roboto_Condensed-Medium.ttf");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Condensed MediumItalic";
  src: url("../fonts/Roboto/Roboto_Condensed-MediumItalic.ttf");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Condensed SemiBold";
  src: url("../fonts/Roboto/Roboto_Condensed-SemiBold.ttf");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Condensed SemiBoldItalic";
  src: url("../fonts/Roboto/Roboto_Condensed-SemiBoldItalic.ttf");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Condensed Bold";
  src: url("../fonts/Roboto/Roboto_Condensed-Bold.ttf");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Condensed BoldItalic";
  src: url("../fonts/Roboto/Roboto_Condensed-BoldItalic.ttf");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Condensed ExtraBold";
  src: url("../fonts/Roboto/Roboto_Condensed-ExtraBold.ttf");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Condensed ExtraBoldItalic";
  src: url("../fonts/Roboto/Roboto_Condensed-ExtraBoldItalic.ttf");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

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

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

/* ==================== ROBOTO SEMI CONDENSED ==================== */
@font-face {
  font-family: "Roboto SemiCondensed Thin";
  src: url("../fonts/Roboto/Roboto_SemiCondensed-Thin.ttf");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

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

@font-face {
  font-family: "Roboto SemiCondensed ExtraLight";
  src: url("../fonts/Roboto/Roboto_SemiCondensed-ExtraLight.ttf");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto SemiCondensed ExtraLightItalic";
  src: url("../fonts/Roboto/Roboto_SemiCondensed-ExtraLightItalic.ttf");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

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

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

@font-face {
  font-family: "Roboto SemiCondensed Regular";
  src: url("../fonts/Roboto/Roboto_SemiCondensed-Regular.ttf");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto SemiCondensed Italic";
  src: url("../fonts/Roboto/Roboto_SemiCondensed-Italic.ttf");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Roboto SemiCondensed Medium";
  src: url("../fonts/Roboto/Roboto_SemiCondensed-Medium.ttf");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto SemiCondensed MediumItalic";
  src: url("../fonts/Roboto/Roboto_SemiCondensed-MediumItalic.ttf");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Roboto SemiCondensed SemiBold";
  src: url("../fonts/Roboto/Roboto_SemiCondensed-SemiBold.ttf");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto SemiCondensed SemiBoldItalic";
  src: url("../fonts/Roboto/Roboto_SemiCondensed-SemiBoldItalic.ttf");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Roboto SemiCondensed Bold";
  src: url("../fonts/Roboto/Roboto_SemiCondensed-Bold.ttf");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto SemiCondensed BoldItalic";
  src: url("../fonts/Roboto/Roboto_SemiCondensed-BoldItalic.ttf");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Roboto SemiCondensed ExtraBold";
  src: url("../fonts/Roboto/Roboto_SemiCondensed-ExtraBold.ttf");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto SemiCondensed ExtraBoldItalic";
  src: url("../fonts/Roboto/Roboto_SemiCondensed-ExtraBoldItalic.ttf");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

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

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

/* ==================== PLAYFAIR DISPLAY ==================== */
@font-face {
  font-family: "PlayfairDisplay Regular";
  src: url("../fonts/PlayfairDisplay/PlayfairDisplay-Regular.ttf");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

@font-face {
  font-family: "PlayfairDisplay Medium";
  src: url("../fonts/PlayfairDisplay/PlayfairDisplay-Medium.ttf");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PlayfairDisplay MediumItalic";
  src: url("../fonts/PlayfairDisplay/PlayfairDisplay-MediumItalic.ttf");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

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

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

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

@font-face {
  font-family: "PlayfairDisplay BoldItalic";
  src: url("../fonts/PlayfairDisplay/PlayfairDisplay-BoldItalic.ttf");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "PlayfairDisplay ExtraBold";
  src: url("../fonts/PlayfairDisplay/PlayfairDisplay-ExtraBold.ttf");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PlayfairDisplay ExtraBoldItalic";
  src: url("../fonts/PlayfairDisplay/PlayfairDisplay-ExtraBoldItalic.ttf");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

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

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

/* Base style */
html {
  font-size: 14px;
  scroll-behavior: smooth;
}

body {
  font-family: "PlayfairDisplay Regular", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  margin: 10px 0;
}

h1 {
  font-size: 1.85rem;
}

h2 {
  font-size: 1.71rem;
}

h3 {
  font-size: 1.57rem;
}

h4 {
  font-size: 1.42rem;
}

h5 {
  font-size: 1.28rem;
}

h6 {
  font-size: 1.14rem;
}

p {
  margin-bottom: 10px;
}

a {
  text-decoration: none;
  color: var(--link-color);
}

a:hover {
  color: var(--primary-color);
}

/* Style default btn */
.btn {
  padding: 10px 15px;
  background: var(--primary-color);
  color: #fff;
}

.btn--large {
  padding: 12px 35px;
  font-size: 1.1rem;
}

/* Style default section */
.section-box {
  padding: 40px 0;
}

.section-title {
  color: #121212;
  font-family: "PlayfairDisplay Medium", sans-serif;
  font-size: 3.2rem;
  font-weight: 700;
  /* line-height: 3.53; */
  padding-top: 20px;
}

.section-subtitle {
  color: #121212;
  font-weight: 300;
  font-family: sans-serif;
}