/* 
Theme Name: Leil
Author: MagićMarinac
Author URI: https://magicmarinac.hr/
Description: Leil
*/

/* KORIŠTENE CLAMP VRIJEDNOSTI SU MIN 768PX - MAX 1500PX ŠIRINE EKRANA */

@font-face {
  font-family: 'StackSans-Variable';
  src: url('./font/StackSans-Variable.woff2') format('woff2');
  font-weight: 400 600;
  font-optical-sizing: auto;
  font-display: block;
  font-style: normal;
}

/* Default */
*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	text-shadow: none;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	font-family: sans-serif;
	font-size: 16px; /* base font size */
	line-height: 1.15;
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	text-shadow: none;
}

@media (min-width: 2048px) {
	html {
		font-size: 0.78125vw;
	}
}

/* Color and spacing variables*/
:root {
  --white: #FFFFFF;
	--black: #000000;
  
	--background: #08194A;
	--blue: #479DFF;
	--green: #18EFB7;

  --spacing-xxs: clamp(0.25rem, -0.0123rem + 0.5464vw, 0.5rem);
  --spacing-xs: clamp(0.5rem, -0.0246rem + 1.0929vw, 1rem);
  --spacing-sm: clamp(1rem, -0.0492rem + 2.1858vw, 2rem);
  --spacing-md: clamp(2rem, -0.0984rem + 4.3716vw, 4rem);
  --spacing-lg: clamp(4rem, -0.1967rem + 8.7432vw, 8rem);
  --spacing-xl: clamp(8rem, 1.7049rem + 13.1148vw, 14rem);
}

body {
	margin: 0;
	background-color: var(--background);
	color: var(--white);
	font-family: 'StackSans-Variable', sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.75;
  letter-spacing: 0;
	text-align: left;
}

h1, h2, h3, h4, h5, h6,
.as-h1, .as-h2, .as-h3, .as-h4, .as-h5, .as-h6 {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
	line-height: 1.125;
	font-weight: 400;
  display: block;
}

h1, .as-h1 {
  font-size: clamp(2.5rem, -0.123rem + 5.4645vw, 5rem);
	letter-spacing: -0.03rem;
	line-height: 100%;
	padding-top: 0;
	padding-bottom: 0;
}

h2, .as-h2 {
  font-size: clamp(1.875rem, 0.6947rem + 2.459vw, 3rem);
  letter-spacing: -3%;
  line-height: 120%;
	padding-top: 0;
	padding-bottom: 0;
}

h3, .as-h3 {
  font-size: clamp(1.75rem, 0.5697rem + 2.459vw, 2.875rem);
	letter-spacing: -0.1rem;
	line-height: 100%;
	padding-top: 0;
	padding-bottom: 0;
}

h4, .as-h4 {
  font-size: clamp(1.125rem, 0.9939rem + 0.2732vw, 1.25rem);
  line-height: 140%;
  letter-spacing: -3%;
  font-weight: 700;
	padding-top: 0rem;
	padding-bottom: 0rem;
}

p {
  font-size: clamp(0.875rem, 0.7439rem + 0.2732vw, 1rem);
  line-height: 150%;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
}

.small-xs {
  font-size: 0.75rem;
  display: inline-block;
}

small, .small {
	font-size: 0.875rem;
	display: inline-block;
}

.big {
  font-size: 1.125rem;
  display: inline-block;
}

img {
	width: 100%;
	height: auto;
	margin-bottom: 0;
}

a {
  text-decoration: none;
  color: var(--white);
  font-weight: 600;
  display: inline-block;
}

blockquote {
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 2.5rem;
	margin-right: 2.5rem;
}

pre {
	margin: 0;
	white-space: pre-wrap;
}

ol {
  counter-reset: section;
  list-style: none;
  padding-inline-start: 0;
  position: relative;
  padding-left: 0;
  margin: 0 0 1rem 0;
  line-height: 1.5;
}

ol li {
  position: relative;
  padding-left: 1.5rem;
  counter-increment: section;
  margin-bottom: 0.5rem;
}

ol li::before {
  content: counters(section, ".") ". ";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--black);
  width: 1.5rem;
}

ol ol li {
  padding-left: 2.5rem;
}

ul {
	margin-top: 0;
	margin-bottom: 1rem;
	padding-left: 0;
  padding-bottom: 0;
  list-style-type: none;
  line-height: 1.5;
}

ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
}

ul li::before {
  content: '';
  display: inline-block;
  background-image: url(./images/svg/minus.svg);
  background-size: contain;
  width: 0.875rem;
  height: 0.875rem;
  position: absolute;
  left: 0;
  top: 0.5rem;
}

strong, b {
	font-weight: 600;
}

sub,
sup {
  position: relative;
  font-size: 0.75rem;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25rem;
}

sup {
  top: -0.5rem;
}

img,
svg {
  vertical-align: middle;
}

iframe {
  border: 0;
}

table {
  caption-side: bottom;
  border-collapse: collapse;
}

caption {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: var(--black);
  text-align: left;
}

th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}

thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}

label {
  display: inline-block;
}

button:focus:not(:focus-visible) {
  outline: 0;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* Provjerit webkit appearance za iphone */
button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

button,
select {
  text-transform: none;
}

[role=button] {
  cursor: pointer;
}

select {
  word-wrap: normal;
}

select:disabled {
  opacity: 1;
}

::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

/*!
* Bootstrap Grid v5.3.3 (https://getbootstrap.com/)
* Copyright 2011-2024 The Bootstrap Authors
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
:root {
  --gap-x: 1.5rem; /* space between columns */
  --gap-y: 3rem; /* space between rows */
}

.container,
.container-fluid {
  max-width: calc(100% - 1.5rem);
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

 @media (min-width: 768px) {
  .container {
    max-width: calc(100% - 4rem);
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: calc(100% - 10rem);
  }
}

.row {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--gap-x);
  row-gap: var(--gap-y);
}

[class^="col-"] {
  flex-grow: 0;
  /* flex-shrink: 0; */
}

.col-1  { width: calc(100% * 1 / 12 - var(--gap-x) * 11 / 12); }
.col-2  { width: calc(100% * 2 / 12 - var(--gap-x) * 10 / 12); }
.col-3  { width: calc(100% * 3 / 12 - var(--gap-x) * 9 / 12); }
.col-4  { width: calc(100% * 4 / 12 - var(--gap-x) * 8 / 12); }
.col-5  { width: calc(100% * 5 / 12 - var(--gap-x) * 7 / 12); }
.col-6  { width: calc(100% * 6 / 12 - var(--gap-x) * 6 / 12); }
.col-7  { width: calc(100% * 7 / 12 - var(--gap-x) * 5 / 12); }
.col-8  { width: calc(100% * 8 / 12 - var(--gap-x) * 4 / 12); }
.col-9  { width: calc(100% * 9 / 12 - var(--gap-x) * 3 / 12); }
.col-10 { width: calc(100% * 10 / 12 - var(--gap-x) * 2 / 12); }
.col-11 { width: calc(100% * 11 / 12 - var(--gap-x) * 1 / 12); }
.col-12 { width: 100%; }

.offset-1  { margin-left: calc(100% * 1 / 12 + var(--gap-x) * 1 / 12); }
.offset-2  { margin-left: calc(100% * 2 / 12 + var(--gap-x) * 2 / 12); }
.offset-3  { margin-left: calc(100% * 3 / 12 + var(--gap-x) * 3 / 12); }
.offset-4  { margin-left: calc(100% * 4 / 12 + var(--gap-x) * 4 / 12); }
.offset-5  { margin-left: calc(100% * 5 / 12 + var(--gap-x) * 5 / 12); }
.offset-6  { margin-left: calc(100% * 6 / 12 + var(--gap-x) * 6 / 12); }
.offset-7  { margin-left: calc(100% * 7 / 12 + var(--gap-x) * 7 / 12); }
.offset-8  { margin-left: calc(100% * 8 / 12 + var(--gap-x) * 8 / 12); }
.offset-9  { margin-left: calc(100% * 9 / 12 + var(--gap-x) * 9 / 12); }
.offset-10 { margin-left: calc(100% * 10 / 12 + var(--gap-x) * 10 / 12); }
.offset-11 { margin-left: calc(100% * 11 / 12 + var(--gap-x) * 11 / 12); }

.order-first { order: -1 !important; }
.order-0     { order: 0 !important; }
.order-1     { order: 1 !important; }
.order-2     { order: 2 !important; }
.order-3     { order: 3 !important; }
.order-4     { order: 4 !important; }
.order-5     { order: 5 !important; }
.order-last  { order: 6 !important; }

@media (min-width: 576px) {
  .col-sm-1  { width: calc(100% * 1 / 12 - var(--gap-x) * 11 / 12); }
  .col-sm-2  { width: calc(100% * 2 / 12 - var(--gap-x) * 10 / 12); }
  .col-sm-3  { width: calc(100% * 3 / 12 - var(--gap-x) * 9 / 12); }
  .col-sm-4  { width: calc(100% * 4 / 12 - var(--gap-x) * 8 / 12); }
  .col-sm-5  { width: calc(100% * 5 / 12 - var(--gap-x) * 7 / 12); }
  .col-sm-6  { width: calc(100% * 6 / 12 - var(--gap-x) * 6 / 12); }
  .col-sm-7  { width: calc(100% * 7 / 12 - var(--gap-x) * 5 / 12); }
  .col-sm-8  { width: calc(100% * 8 / 12 - var(--gap-x) * 4 / 12); }
  .col-sm-9  { width: calc(100% * 9 / 12 - var(--gap-x) * 3 / 12); }
  .col-sm-10 { width: calc(100% * 10 / 12 - var(--gap-x) * 2 / 12); }
  .col-sm-11 { width: calc(100% * 11 / 12 - var(--gap-x) * 1 / 12); }
  .col-sm-12 { width: 100%; }

  .offset-sm-1  { margin-left: calc(100% * 1 / 12 + var(--gap-x) * 1 / 12); }
  .offset-sm-2  { margin-left: calc(100% * 2 / 12 + var(--gap-x) * 2 / 12); }
  .offset-sm-3  { margin-left: calc(100% * 3 / 12 + var(--gap-x) * 3 / 12); }
  .offset-sm-4  { margin-left: calc(100% * 4 / 12 + var(--gap-x) * 4 / 12); }
  .offset-sm-5  { margin-left: calc(100% * 5 / 12 + var(--gap-x) * 5 / 12); }
  .offset-sm-6  { margin-left: calc(100% * 6 / 12 + var(--gap-x) * 6 / 12); }
  .offset-sm-7  { margin-left: calc(100% * 7 / 12 + var(--gap-x) * 7 / 12); }
  .offset-sm-8  { margin-left: calc(100% * 8 / 12 + var(--gap-x) * 8 / 12); }
  .offset-sm-9  { margin-left: calc(100% * 9 / 12 + var(--gap-x) * 9 / 12); }
  .offset-sm-10 { margin-left: calc(100% * 10 / 12 + var(--gap-x) * 10 / 12); }
  .offset-sm-11 { margin-left: calc(100% * 11 / 12 + var(--gap-x) * 11 / 12); }

  .order-sm-first { order: -1 !important; }
  .order-sm-0     { order: 0 !important; }
  .order-sm-1     { order: 1 !important; }
  .order-sm-2     { order: 2 !important; }
  .order-sm-3     { order: 3 !important; }
  .order-sm-4     { order: 4 !important; }
  .order-sm-5     { order: 5 !important; }
  .order-sm-last  { order: 6 !important; }
}

@media (min-width: 992px) {
  .col-md-1  { width: calc(100% * 1 / 12 - var(--gap-x) * 11 / 12); }
  .col-md-2  { width: calc(100% * 2 / 12 - var(--gap-x) * 10 / 12); }
  .col-md-3  { width: calc(100% * 3 / 12 - var(--gap-x) * 9 / 12); }
  .col-md-4  { width: calc(100% * 4 / 12 - var(--gap-x) * 8 / 12); }
  .col-md-5  { width: calc(100% * 5 / 12 - var(--gap-x) * 7 / 12); }
  .col-md-6  { width: calc(100% * 6 / 12 - var(--gap-x) * 6 / 12); }
  .col-md-7  { width: calc(100% * 7 / 12 - var(--gap-x) * 5 / 12); }
  .col-md-8  { width: calc(100% * 8 / 12 - var(--gap-x) * 4 / 12); }
  .col-md-9  { width: calc(100% * 9 / 12 - var(--gap-x) * 3 / 12); }
  .col-md-10 { width: calc(100% * 10 / 12 - var(--gap-x) * 2 / 12); }
  .col-md-11 { width: calc(100% * 11 / 12 - var(--gap-x) * 1 / 12); }
  .col-md-12 { width: 100%; }


  .offset-md-1  { margin-left: calc(100% * 1 / 12 + var(--gap-x) * 1 / 12); }
  .offset-md-2  { margin-left: calc(100% * 2 / 12 + var(--gap-x) * 2 / 12); }
  .offset-md-3  { margin-left: calc(100% * 3 / 12 + var(--gap-x) * 3 / 12); }
  .offset-md-4  { margin-left: calc(100% * 4 / 12 + var(--gap-x) * 4 / 12); }
  .offset-md-5  { margin-left: calc(100% * 5 / 12 + var(--gap-x) * 5 / 12); }
  .offset-md-6  { margin-left: calc(100% * 6 / 12 + var(--gap-x) * 6 / 12); }
  .offset-md-7  { margin-left: calc(100% * 7 / 12 + var(--gap-x) * 7 / 12); }
  .offset-md-8  { margin-left: calc(100% * 8 / 12 + var(--gap-x) * 8 / 12); }
  .offset-md-9  { margin-left: calc(100% * 9 / 12 + var(--gap-x) * 9 / 12); }
  .offset-md-10 { margin-left: calc(100% * 10 / 12 + var(--gap-x) * 10 / 12); }
  .offset-md-11 { margin-left: calc(100% * 11 / 12 + var(--gap-x) * 11 / 12); }

  .order-md-first { order: -1 !important; }
  .order-md-0     { order: 0 !important; }
  .order-md-1     { order: 1 !important; }
  .order-md-2     { order: 2 !important; }
  .order-md-3     { order: 3 !important; }
  .order-md-4     { order: 4 !important; }
  .order-md-5     { order: 5 !important; }
  .order-md-last  { order: 6 !important; }
}

@media (min-width: 1440px) {
  .col-lg-1  { width: calc(100% * 1 / 12 - var(--gap-x) * 11 / 12); }
  .col-lg-2  { width: calc(100% * 2 / 12 - var(--gap-x) * 10 / 12); }
  .col-lg-3  { width: calc(100% * 3 / 12 - var(--gap-x) * 9 / 12); }
  .col-lg-4  { width: calc(100% * 4 / 12 - var(--gap-x) * 8 / 12); }
  .col-lg-5  { width: calc(100% * 5 / 12 - var(--gap-x) * 7 / 12); }
  .col-lg-6  { width: calc(100% * 6 / 12 - var(--gap-x) * 6 / 12); }
  .col-lg-7  { width: calc(100% * 7 / 12 - var(--gap-x) * 5 / 12); }
  .col-lg-8  { width: calc(100% * 8 / 12 - var(--gap-x) * 4 / 12); }
  .col-lg-9  { width: calc(100% * 9 / 12 - var(--gap-x) * 3 / 12); }
  .col-lg-10 { width: calc(100% * 10 / 12 - var(--gap-x) * 2 / 12); }
  .col-lg-11 { width: calc(100% * 11 / 12 - var(--gap-x) * 1 / 12); }
  .col-lg-12 { width: 100%; }


  .offset-lg-1  { margin-left: calc(100% * 1 / 12 + var(--gap-x) * 1 / 12); }
  .offset-lg-2  { margin-left: calc(100% * 2 / 12 + var(--gap-x) * 2 / 12); }
  .offset-lg-3  { margin-left: calc(100% * 3 / 12 + var(--gap-x) * 3 / 12); }
  .offset-lg-4  { margin-left: calc(100% * 4 / 12 + var(--gap-x) * 4 / 12); }
  .offset-lg-5  { margin-left: calc(100% * 5 / 12 + var(--gap-x) * 5 / 12); }
  .offset-lg-6  { margin-left: calc(100% * 6 / 12 + var(--gap-x) * 6 / 12); }
  .offset-lg-7  { margin-left: calc(100% * 7 / 12 + var(--gap-x) * 7 / 12); }
  .offset-lg-8  { margin-left: calc(100% * 8 / 12 + var(--gap-x) * 8 / 12); }
  .offset-lg-9  { margin-left: calc(100% * 9 / 12 + var(--gap-x) * 9 / 12); }
  .offset-lg-10 { margin-left: calc(100% * 10 / 12 + var(--gap-x) * 10 / 12); }
  .offset-lg-11 { margin-left: calc(100% * 11 / 12 + var(--gap-x) * 11 / 12); }

  .order-lg-first { order: -1 !important; }
  .order-lg-0     { order: 0 !important; }
  .order-lg-1     { order: 1 !important; }
  .order-lg-2     { order: 2 !important; }
  .order-lg-3     { order: 3 !important; }
  .order-lg-4     { order: 4 !important; }
  .order-lg-5     { order: 5 !important; }
  .order-lg-last  { order: 6 !important; }
}

/* Boostrap END */


/* CMS - dodati cms-content klasu na parent div u kojem zovemo the_content() ili get_the_content() (wordpress sadržaj) */
.cms-content h1 {
  padding-bottom: 1rem;
}

.cms-content .as-h1 {
  padding-top: 2rem;
  padding-bottom: 1rem;
}

.cms-content h2,
.cms-content .as-h2 {
  padding-top: 2rem;
  padding-bottom: 1rem;
}

.cms-content h3,
.cms-content .as-h3 {
  padding-top: 2rem;
  padding-bottom: 1rem;
}

.cms-content h4,
.cms-content .as-h4 {
  padding-top: 2rem;
  padding-bottom: 1rem;
}

.cms-content h5,
.cms-content .as-h5 {
  padding-top: 2rem;
  padding-bottom: 1rem;
}

.cms-content small {
  padding-bottom: 1rem;
}

.cms-content p {
  padding-bottom: 1rem;
}

.cms-content img {
  margin-bottom: 1rem;
}

.cms-content ul,
.cms-content ol {
	padding-bottom: 1rem;
}

/* CMS Links */
.cms-content a:not(.btn-solid):not(.btn-ghost) {
  display: inline;
  background: 
    linear-gradient(to right, rgba(37, 37, 37, 0.4), rgba(37, 37, 37, 0.4)),
    linear-gradient(to right, rgba(37, 37, 37, 1), rgba(37, 37, 37, 1));
  background-size: 100% 0.063rem, 0 0.063rem;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s;
}

.cms-content a:not(.btn-solid):not(.btn-ghost):hover,
.cms-content a:not(.btn-solid):not(.btn-ghost):focus {
  background-size: 0 0.063rem, 100% 0.063rem;
}

.cms-content figure a {
  background: none !important;
  transition: none !important;
}

.cms-content figure a:hover,
.cms-content figure a:focus {
  background: none !important;
}

/* WP Plugins */
/* WP Helper blocks css */
.accordion-icon {
  background-color: var(--black);
}

.centered-auto .swiper-slide > * {
  display: block !important;
  height: 70vw !important; /* Visina je potrebna, ako želimo slideove iste visine */
}

@media (min-width: 1024px) {
  .centered-auto .swiper-slide > * {
    height: 45vw !important; /* Visina je potrebna, ako želimo slideove iste visine */
  } 
}

/* Prilagođeni raspored Gutenberg stupaca - 1 stupac ispod 992px, iznad 992px svi stupci u jednom redu */
/* Varijabla --columns-gap služi za razmak između stupaca */
/* Proizvoljno promijeniti varijable --columns-gap za razmak između stupaca i media query vrijednost 992px */
:where(.wp-block-columns) {
  --columns-gap: 1.25rem;
  gap: var(--columns-gap);
}

.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
  flex-basis: 100% !important;
}

@media (min-width: 782px) and (max-width: 991.98px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile) {
    flex-wrap: wrap !important;
  }
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: 100% !important;
  }
}

@media (min-width: 992px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile) {
    flex-wrap: nowrap !important;
  }
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: 0 !important;
    flex-grow: 1 !important;
  }
}

/* Buttons */
/* 
  btn-solid - klasa za solid button s crnom pozadinom i bijelim tekstom
  btn-ghost - klasa za ghost button s transparentnom pozadinom i crnim tekstom
  full-width - klasa za button koji zauzima punu širinu
  full-width-responsive - klasa za button koji zauzima punu širinu na manjim ekranima, a na većim je širine sadržaja
*/
.btn-solid,
.btn-ghost {
  line-height: 1;
  transition: 0.3s;
}

.btn-solid {
  border: 0.063rem solid var(--green);
  border-radius: 0.625rem;
  background-color: var(--green);
  color: var(--black);
  padding: 0.75rem 1.5rem;
}

.btn-solid:hover {
  background-color: transparent;
  color: var(--green);
}

.btn-ghost {
  border: 0.063rem solid var(--green);
  border-radius: 0.625rem;
  background-color: transparent;
  color: var(--green);
  padding: 0.75rem 1.5rem;
}

.btn-ghost:hover {
  background-color: var(--green);
  color: var(--black);
}

.full-width {
  width: 100%;
  text-align: center;
}

.full-width-responsive {
  width: 100%;
  text-align: center;
}

@media (min-width: 576px) {
  .full-width-responsive {
    width: initial;
    text-align: initial;
  }
}

/* Helper klase */
.m-0 {
  margin: 0;
}
.mt-0 {
  margin-top: 0;
}
.mt-xxs {
  margin-top: var(--spacing-xxs);
}
.mt-xs {
  margin-top: var(--spacing-xs);
}
.mt-sm {
  margin-top: var(--spacing-sm);
}
.mt-md {
  margin-top: var(--spacing-md);
}
.mt-lg {
  margin-top: var(--spacing-lg);
}
.mb-0 {
  margin-bottom: 0;
}
.mb-xxs {
  margin-bottom: var(--spacing-xxs);
}
.mb-xs {
  margin-bottom: var(--spacing-xs);
}
.mb-sm {
  margin-bottom: var(--spacing-sm);
}
.mb-md {
  margin-bottom: var(--spacing-md);
}
.mb-lg {
  margin-bottom: var(--spacing-lg);
}

.p-0 {
  padding: 0;
}
.pt-0 {
  padding-top: 0;
}
.pt-xxs {
  padding-top: var(--spacing-xxs);
}
.pt-xs {
  padding-top: var(--spacing-xs);
}
.pt-sm {
  padding-top: var(--spacing-sm);
}
.pt-md {
  padding-top: var(--spacing-md);
}
.pt-lg {
  padding-top: var(--spacing-lg);
}
.pb-0 {
  padding-bottom: 0;
}
.pb-xxs {
  padding-bottom: var(--spacing-xxs);
}
.pb-xs {
  padding-bottom: var(--spacing-xs);
}
.pb-sm {
  padding-bottom: var(--spacing-sm);
}
.pb-md {
  padding-bottom: var(--spacing-md);
}
.pb-lg {
  padding-bottom: var(--spacing-lg);
}
/* END OF BASE CSS */

/* General */
.pill {
	display: inline-block;
	background-color: #EAE8D9;
	color: var(--black);
	line-height: 1;
	padding: 0.375rem 0.75rem;
	text-transform: uppercase;
	border-radius: 1.25rem;
  font-size: 0.688rem;
  font-weight: 700;
  letter-spacing: 0.05rem;
}

.percent-text {
  font-size: clamp(3.5rem, 1.2705rem + 4.6448vw, 5.625rem);
  line-height: 120%;
  letter-spacing: -4%;
  font-weight: 500;
  color: var(--blue);
}

.percent-text-smaller {
  font-size: clamp(2.5rem, 1.1885rem + 2.7322vw, 3.75rem);
  line-height: 120%;
  letter-spacing: -4%;
  font-weight: 500;
  color: var(--blue);
}

/* Navigation */
header::before {
  content: '';
  background-image: url(./images/leil-header.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.nav-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: clamp(1.5rem, 0.1224rem + 2.8699vw, 2.813rem);
	margin-bottom: clamp(5rem, -1.2951rem + 13.1148vw, 11rem);
}

.logo {
  flex: 0 0 auto;
  width: 22%;
}

@media (min-width: 576px) {
  .logo {
    width: 7rem;
  }
}

/* Front page */
/* Hero section */
.hero-subtitle {
	display: block;
	font-size: clamp(0.875rem, 0.6127rem + 0.5464vw, 1.125rem);
	line-height: 150%;
	margin-top: 1.5rem;
  margin-bottom: clamp(6rem, 3.9016rem + 4.3716vw, 8rem);
}

.leil-block-wrapper-title {
  color: var(--blue);
  text-align: center;
  margin-bottom: 2rem;
}

.leil-block-wrapper {
  margin-bottom: 5rem;
}

.leil-block {
  background-color: rgba(255, 255, 255, 0.05);
  padding: 2.5rem;
  border-radius: 0.375rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
}

.leil-block .pill {
  margin-bottom: 1.875rem;
}

.leil-block-title {
  padding-bottom: clamp(1.75rem, -0.3484rem + 4.3716vw, 3.75rem);
}

.leil-block-description {
  font-size: clamp(0.875rem, 0.6127rem + 0.5464vw, 1.125rem);
  line-height: 150%;
  margin-top: auto;
  opacity: 0.7;
}

.leil-block img {
  width: 6rem;
  margin-left: auto;
  margin-top: 1rem;
}

@media (min-width: 576px) {
  .leil-block-title,
  .leil-block-description {
    padding-right: 25%;
  }
  .leil-block img {
    width: initial;
  }
}

/* Leil data section */
.leil-data {
  margin-top: clamp(4rem, -0.1967rem + 8.7432vw, 8rem);;
  margin-bottom: clamp(4rem, -0.1967rem + 8.7432vw, 8rem);;
}

.leil-data-title {
	padding-bottom: 1rem;
}

.leil-data-description {
  opacity: 0.7;
}

.leil-data-title::before {
  content: '';
  display: block;
  width: 100%;
  height: 0.063rem;
  background-color: var(--white);
  margin-top: 1.125rem;
  margin-bottom: 1.125rem;
}

@media (min-width: 576px) {
  .leil-block {
    padding: 4rem 2.75rem 2.25rem 2.313rem;
  }
}

/* Leil OS section */
.leil-os {
  margin-top: clamp(4rem, -0.1967rem + 8.7432vw, 8rem);;
  margin-bottom: clamp(4rem, -0.1967rem + 8.7432vw, 8rem);;
}

.leil-os {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.leil-os > :first-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}

@media (min-width: 1300px) {
  .leil-os {
    align-items: center;
    flex-direction: row;
    gap: 6.25rem;
  }
  .leil-os > * {
    flex: 0 0 calc(50% - 6.25rem);
  }
}

/* Footer */
footer {
  background-color: rgba(0, 0, 0, 0.2);
  padding-top: 4rem;
  padding-bottom: 6.5rem;
}

.footer-logo {
  width: 22%;
}

.link-tel,
.link-email {
  display: flex;
  align-items: center;
  margin-bottom: 0.0625rem;
  font-size: clamp(1.125rem, 0.9939rem + 0.2732vw, 1.25rem);
  font-weight: 500;
}

.link-tel::before {
  content: '';
  display: inline-block;
  background-image: url(./images/svg/tel.svg);
  background-size: contain;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 1.5rem;
}

.link-email::before {
  content: '';
  display: inline-block;
  background-image: url(./images/svg/mail.svg);
  background-size: contain;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 1.5rem;
}

.footer-title {
  display: block;
  font-size: clamp(1.125rem, 0.9939rem + 0.2732vw, 1.25rem);
  line-height: 120%;
  font-weight: 600;
  padding-bottom: 1rem;
}

.const {
    text-align: center;
    padding: .25rem;
    background-color: #152554;
    width: 100%;
    margin: auto;
    font-size: 0.75rem;
}

.const span {
  opacity: 0.7;
}

@media (min-width: 576px) {
  .footer-logo {
    width: 7rem;
  }
  .const {
    padding: .5rem;
    font-size: 0.875rem;
}
}