/*
    Project: Nanomed
    Developed by: Eximius-Solutions

    Table of content:
    01. Colors
    02. Background colors
    03. Fonts
    04. Globals
    05. Partials
    06. Components
    07. Spacings
    08. Sections

*/
/* 
	==== Colors ==== 
*/
/*
    ==== COLORS.VARIABLES ====

    Description:
        All variables related to colors.

    Modificators:
        No modificators.
*/
.text-color-white {
  color: #FFFFFF;
}

.text-color-black {
  color: #000000;
}

.text-color-dark-blue {
  color: #0B60B0;
}

.text-color-light-blue {
  color: #40A2D8;
}

.text-color-whiteish {
  color: #F0EDCF;
}

/* 
    ==== Backgrounds ==== 
*/
/*
    File Name: _variables.scss

    Description:
    This is the variables SCSS file that imports all variables that are used all over project.

    Note:
    This file should not contain any actual CSS styles. Its purpose is to
    bring together all the variables that are used accros project.
    Any direct styles added to this file may be overridden by the imported files.

*/
/*
    ==== COLORS.VARIABLES ====

    Description:
        All variables related to colors.

    Modificators:
        No modificators.
*/
/*
    ==== FONT.VARIABLES ====

    Description:
        All variables related to fonts.

    Modificators:
        No modificators.

*/
.bg-white {
  background-color: #FFFFFF;
}

.bg-pure-black {
  background-color: #000000;
}

.bg-dark-blue {
  background-color: #0B60B0;
}

.bg-dark-grey {
  background-color: #0F1C3B;
}

.bg-light-blue {
  background-color: #40A2D8;
}

.bg-whiteish {
  background-color: #F0EDCF;
}

.bg-blue-green-gradient {
  background: linear-gradient(to top, #5B86E5, #36D1DC);
}

/* 
	==== Fonts ==== 
*/
/*
    File Name: _fonts.scss

    Description:
    This is the fonts SCSS file that imports styles realted to fonts.

    Note:
    This file should not contain any actual CSS styles. Its purpose is to
    bring together all the variables that are used accros project.
    Any direct styles added to this file may be overridden by the imported files.

*/
/*
    ==== FONT FAMILY ====

    Description:
        All font familys used accros the project.

    Modificators:
        No modificators.

*/
@font-face {
  font-family: "primary-light";
  src: url("../../fonts/SourceCodePro-Light.woff2");
  font-display: swap;
}
@font-face {
  font-family: "primary-regular";
  src: url("../../fonts/SourceCodePro-Regular.woff2");
  font-display: swap;
}
@font-face {
  font-family: "primary-medium";
  src: url("../../fonts/SourceCodePro-Medium.woff2");
  font-display: swap;
}
@font-face {
  font-family: "primary-semi-bold";
  src: url("../../fonts/SourceCodePro-SemiBold.woff2");
  font-display: swap;
}
@font-face {
  font-family: "primary-bold";
  src: url("../../fonts/SourceCodePro-Bold.woff2");
  font-display: swap;
}
@font-face {
  font-family: "primary-italic";
  src: url("../../fonts/Poppins-Italic.woff2");
  font-display: swap;
}
/*
    ==== FONT.VARIABLES ====

    Description:
        All variables related to fonts.

    Modificators:
        No modificators.

*/
.font--extra-small {
  font-size: 1.4rem;
}

.font--small {
  font-size: 2rem;
}

.font--medium-small {
  font-size: 3rem;
}

.font--medium {
  font-size: 4rem;
}

.font--large {
  font-size: 5rem;
}

.font--medium-large {
  font-size: 6rem;
}

.font--extra-large {
  font-size: 7rem;
}

/* 
	==== Global ==== 
*/
/*
    File Name: _variables.scss

    Description:
    This is the variables SCSS file that imports all variables that are used all over project.

    Note:
    This file should not contain any actual CSS styles. Its purpose is to
    bring together all the variables that are used accros project.
    Any direct styles added to this file may be overridden by the imported files.

*/
/*
    ==== COLORS.VARIABLES ====

    Description:
        All variables related to colors.

    Modificators:
        No modificators.
*/
/*
    ==== FONT.VARIABLES ====

    Description:
        All variables related to fonts.

    Modificators:
        No modificators.

*/
/*
    ==== GLOBALS ====

    Description:
        Global styles.

    Modificators:
        No modificators.

*/
:root {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

*,
*::after,
*::before {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  scroll-margin-top: 50px;
}

html.screen-locked {
  overflow-y: hidden;
  padding-right: var(--scrollbarWidth, 17px);
}
html.screen-locked header {
  padding-right: var(--scrollbarWidth, 17px);
}

body {
  margin: 0;
  padding: 0;
  font-family: "primary-regular", Arial, Helvetica, sans-serif;
  font-size: 2rem;
  color: #000000;
  padding-top: var(--headerHeight);
}

h1 {
  font-family: "primary-bold", Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 7rem;
  line-height: 8rem;
  margin-top: 70px;
  margin-bottom: 40px;
}

h2 {
  font-family: "primary-bold", Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 6rem;
  line-height: 7rem;
  margin-top: 70px;
  margin-bottom: 35px;
}

h3 {
  font-family: "primary-bold", Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 5rem;
  line-height: 6rem;
  margin-top: 65px;
  margin-bottom: 30px;
}

h4 {
  font-family: "primary-bold", Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 4rem;
  line-height: 5rem;
  margin-top: 60px;
  margin-bottom: 25px;
}

h5 {
  font-family: "primary-bold", Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 3rem;
  line-height: 4rem;
  margin-top: 40px;
  margin-bottom: 20px;
}

h6 {
  font-family: "primary-bold", Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 2rem;
  line-height: 3rem;
  margin-top: 30px;
  margin-bottom: 20px;
}

a {
  color: #0B60B0;
  font-size: 2rem;
  line-height: 2rem;
}

p {
  font-size: 2rem;
  line-height: 3.2rem;
}

strong {
  font-family: "primary-semi-bold", Arial, Helvetica, sans-serif;
}

.dot {
  color: #ffde4c;
}

.heading .title:not(:last-child) {
  margin-bottom: 30px;
}
.heading .subtitle *:first-child {
  margin-top: 0;
}
.heading .subtitle *:last-child {
  margin-bottom: 0;
}

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

section {
  position: relative;
}
section .section-bg-image {
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}
section .section-bg-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
section .section-bg-image.overlay::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background: #0F1C3B;
  opacity: 0.85;
}
section .section-bg-image.not-cover {
  width: auto;
  height: auto;
  -o-object-fit: unset;
     object-fit: unset;
}
section .section-bg-image.not-cover img {
  width: auto;
  height: auto;
  -o-object-fit: unset;
     object-fit: unset;
  left: unset;
  top: 0;
}
section .section-bg-image.not-cover.overlay::before {
  opacity: 0.5;
}
section .container-fluid {
  position: relative;
  z-index: 3;
}

blockquote {
  border-radius: 12px;
  font-style: italic;
}
blockquote > img:first-child {
  vertical-align: text-bottom;
}
blockquote > img:last-child {
  vertical-align: text-top;
}

.bg-dark-grey blockquote {
  margin-left: 0;
  margin-right: 0;
  padding: 25px 20px;
  background-color: #FFFFFF;
  color: #000000;
  font-size: 1.6rem;
}

ul {
  padding-left: 0;
  list-style: none;
}
ul li {
  position: relative;
  padding-left: 25px;
}
ul li:not(:last-child) {
  margin-bottom: 7px;
}
ul li::before {
  content: "";
  display: block;
  width: 13px;
  height: 16px;
  position: absolute;
  top: 5px;
  left: 0;
  background-image: url("../../img/icons/arrows/icon--arrow-blue.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

ol li::marker {
  color: #0B60B0;
}

.text-center {
  text-align: center !important;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.relative {
  position: relative !important;
}

.absolute {
  position: absolute !important;
}

.screen-locked.ios-device {
  position: fixed;
  touch-action: manipulation;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

.screen-locked.ios-device {
  position: fixed;
}

.bg-dark-grey,
.bg-dark-blue,
.bg-blue {
  color: #FFFFFF;
}
.bg-dark-grey p,
.bg-dark-grey a:not(.button):not(.button--bubbles):not(.button-bubbles--tertiary):not(.button-bubbles--secondary):not(.button-bubbles--primary):not(.button-off):not(.button-off--tertiary):not(.button-off--secondary):not(.button-off--primary),
.bg-dark-grey li,
.bg-dark-blue p,
.bg-dark-blue a:not(.button):not(.button--bubbles):not(.button-bubbles--tertiary):not(.button-bubbles--secondary):not(.button-bubbles--primary):not(.button-off):not(.button-off--tertiary):not(.button-off--secondary):not(.button-off--primary),
.bg-dark-blue li,
.bg-blue p,
.bg-blue a:not(.button):not(.button--bubbles):not(.button-bubbles--tertiary):not(.button-bubbles--secondary):not(.button-bubbles--primary):not(.button-off):not(.button-off--tertiary):not(.button-off--secondary):not(.button-off--primary),
.bg-blue li {
  color: inherit;
}

.spinner {
  display: none;
  width: 21px;
  height: 21px;
  margin-left: 20px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  vertical-align: middle;
}
.spinner.show {
  display: inline-block;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* 
	==== Partials ==== 
*/
/*
    File Name: _partials.scss

    Description:
    This is the partials SCSS file that imports all partials.

    Note:
    This file should not contain any actual CSS styles. Its purpose is to
    bring together all the variables that are used accros project.
    Any direct styles added to this file may be overridden by the imported files.

*/
/*
    File Name: _variables.scss

    Description:
    This is the variables SCSS file that imports all variables that are used all over project.

    Note:
    This file should not contain any actual CSS styles. Its purpose is to
    bring together all the variables that are used accros project.
    Any direct styles added to this file may be overridden by the imported files.

*/
/*
    ==== COLORS.VARIABLES ====

    Description:
        All variables related to colors.

    Modificators:
        No modificators.
*/
/*
    ==== FONT.VARIABLES ====

    Description:
        All variables related to fonts.

    Modificators:
        No modificators.

*/
/*
    ==== HEADER ====

    Description: 
        This is header of website. Also, this file contains style for main site menu.

    Modificators:
        No modificators.
*/
/*
    File Name: _variables.scss

    Description:
    This is the variables SCSS file that imports all variables that are used all over project.

    Note:
    This file should not contain any actual CSS styles. Its purpose is to
    bring together all the variables that are used accros project.
    Any direct styles added to this file may be overridden by the imported files.

*/
/*
    ==== COLORS.VARIABLES ====

    Description:
        All variables related to colors.

    Modificators:
        No modificators.
*/
/*
    ==== FONT.VARIABLES ====

    Description:
        All variables related to fonts.

    Modificators:
        No modificators.

*/
/*
    ==== NAVIGATION MENU ====

    Description: 
        This is navigation menu in header.

    Modificators:
        No modificators.
*/
header .navigation-menu {
  display: flex;
  align-items: center;
  flex-direction: column;
  /*
      ==== FIRST LEVEL ====
  */
}
header .navigation-menu ul {
  margin: 0;
  padding: 0;
}
header .navigation-menu > ul {
  display: flex;
  align-items: center;
}
header .navigation-menu ul li {
  position: relative;
  padding-left: 0;
  list-style: none;
  display: inline-block;
  margin-right: 20px;
  padding-left: 0;
  margin-bottom: 0;
  font-size: 1.6rem;
  line-height: 1.6rem;
}
header .navigation-menu ul li:last-child {
  margin-right: 0;
}
header .navigation-menu ul li::before {
  content: none;
}
header .navigation-menu ul li.active-section a {
  background: linear-gradient(to right, #5B86E5, #48ACE0, #36D1DC);
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  transition: 0.2s ease;
}
header .navigation-menu ul li a {
  display: inline-block;
  font-size: inherit;
  line-height: inherit;
  text-decoration: none;
  color: #FFFFFF;
  padding: 10px 15px;
}
header .navigation-menu ul li:not(.active-section):hover {
  transition: 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
}
header .navigation-menu > ul > li {
  background: linear-gradient(0deg, #FFFFFF, #FFFFFF) no-repeat right bottom/0 var(--bg-h);
  transition: background-size 350ms;
  --bg-h: 2px;
}
header .navigation-menu > ul > li:where(:hover, :focus-visible) {
  background-size: 100% var(--bg-h);
  background-position-x: left;
}
header .navigation-menu > ul > li:last-child {
  margin-right: 0;
}

@media (max-width: 1199px) {
  header .navigation-menu {
    position: fixed;
    top: var(--headerHeight, 100px);
    right: 0;
    height: calc(100% - var(--headerHeight, 100px));
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scrollbar-width: none;
    align-items: flex-start;
    width: 350px;
    transform: translateX(100%);
    transition: transform 0.4s ease-out;
    padding-bottom: 100px;
    background-color: #0F1C3B;
    box-shadow: 7px 39px 12px 10px rgba(0, 0, 0, 0.2);
    /*
        ==== FIRST LEVEL ====
    */
    /*
        ==== SECOND LEVEL ====
    */
    /*
        ==== THIRD LEVEL ====
    */
  }
  header .navigation-menu.active {
    transform: translateX(0);
    transition: transform 0.4s ease-out;
  }
  header .navigation-menu ul {
    background-color: transparent;
  }
  header .navigation-menu ul li {
    width: 100%;
    display: block;
  }
  header .navigation-menu > ul {
    width: 100%;
    max-height: 100%;
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scrollbar-width: none;
    flex-direction: column;
  }
  header .navigation-menu > ul::-webkit-scrollbar {
    display: none;
  }
  header .navigation-menu > ul > li {
    padding-bottom: 10px;
    padding-top: 10px;
    padding-left: 15px;
    padding-right: 15px;
    margin-right: 0;
  }
  header .navigation-menu > ul > li.dropdown-parent:not(:last-child) > .dropdown-button {
    right: 48px;
  }
  header .navigation-menu > ul > li:not(.active-section), header .navigation-menu > ul > li {
    background: none;
  }
  header .navigation-menu > ul > li:not(.active-section):hover::after, header .navigation-menu > ul > li:hover::after {
    width: calc(100% - 60px);
    transition: 0.3s ease;
  }
  header .navigation-menu > ul > li.active-section a::before {
    background: transparent;
    box-shadow: none;
    animation: none;
  }
  header .navigation-menu > ul > li::before {
    content: "";
    display: inline-block;
    bottom: 0;
    top: unset;
    transform: none;
    width: calc(100% - 60px);
    height: 1px;
    background-image: none;
    left: 30px;
    right: 30px;
    background-color: #0b1939;
  }
  header .navigation-menu > ul > li::after {
    content: "";
    display: inline-block;
    bottom: 0;
    top: unset;
    transform: none;
    width: calc(100% - 60px);
    height: 2px;
    background-image: none;
    left: 30px;
    right: 30px;
    background-color: #FFFFFF;
    width: 0;
    transition: 0.3s ease;
    position: absolute;
  }
  header .navigation-menu > ul > li:last-child {
    margin-bottom: 0;
    border-bottom: none;
  }
  header .navigation-menu > ul > li > .dropdown-button {
    top: 11px;
    right: 48px;
  }
  header .navigation-menu > ul > li > a {
    color: #FFFFFF;
    transition: 0.2s ease;
  }
  header .navigation-menu > ul > li > a:hover {
    transform: translateX(5px);
    text-decoration: none;
  }
  header .navigation-menu > ul > li > ul {
    position: static;
    min-width: unset;
    width: 100%;
    transform: translateY(0);
    border-radius: 0;
    padding-bottom: 0;
    padding-top: 20px;
    padding-right: 0;
    background-color: transparent;
    box-shadow: none;
  }
  header .navigation-menu > ul > li > ul::before {
    content: none;
  }
  header .navigation-menu > ul > li > ul > li {
    padding-bottom: 10px;
    padding-top: 0;
  }
  header .navigation-menu > ul > li > ul > li > a {
    color: #FFFFFF;
  }
  header .navigation-menu > ul > li > ul > li:first-child {
    padding-top: 0;
  }
  header .navigation-menu > ul > li > ul > li:last-child {
    padding-bottom: 10px;
  }
  header .navigation-menu > ul > li > ul > li > .dropdown-button {
    top: 0;
    right: -10px;
  }
  header .navigation-menu > ul > li > ul > li > ul > li > a {
    color: #FFFFFF;
  }
  header button.hamburger-button {
    display: flex;
    margin-right: -5px;
  }
}
@media (max-width: 500px) {
  header .navigation-menu {
    width: 100%;
    /*
        ==== FIRST LEVEL ====
    */
  }
  header .navigation-menu > ul > li {
    padding-left: 15px;
    padding-right: 15px;
  }
  header .navigation-menu > ul > li:not(.active-section), header .navigation-menu > ul > li {
    background: none;
  }
  header .navigation-menu > ul > li.dropdown-parent:not(:last-child) > .dropdown-button {
    right: 6px;
  }
  header .navigation-menu > ul > li.dropdown-parent:not(:last-child) {
    padding-right: 15px;
  }
  header .navigation-menu > ul > li > .dropdown-button {
    right: 6px;
  }
}
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 10;
  background-color: #0F1C3B;
  padding: 10px 0;
  min-height: 89px;
}
header button.hamburger-button {
  display: none;
}
header.hide {
  transform: translateY(-100%);
}
header.floating-header {
  box-shadow: 0px 5px 9.5px 0.5px rgba(0, 0, 0, 0.15);
}
header .header__inner {
  display: flex;
  gap: 50px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
header .logo-holder {
  width: 100px;
}

@media (max-width: 1199px) {
  header button.hamburger-button {
    display: flex;
  }
}
/*
    File Name: _variables.scss

    Description:
    This is the variables SCSS file that imports all variables that are used all over project.

    Note:
    This file should not contain any actual CSS styles. Its purpose is to
    bring together all the variables that are used accros project.
    Any direct styles added to this file may be overridden by the imported files.

*/
/*
    ==== COLORS.VARIABLES ====

    Description:
        All variables related to colors.

    Modificators:
        No modificators.
*/
/*
    ==== FONT.VARIABLES ====

    Description:
        All variables related to fonts.

    Modificators:
        No modificators.

*/
/*
    ==== FOOTER ====

    Description: 
        This is footer of website. Also, this file contains styles for the postfooter of the website.

    Modificators:
        No modificators.
*/
footer {
  color: red;
}

/* 
	==== Components ==== 
*/
/*
    File Name: _components.scss

    Description:
    This is the components SCSS file that imports styles realted to components.

    Note:
    This file should not contain any actual CSS styles. Its purpose is to
    bring together all the components that are used accros project.
    Any direct styles added to this file may be overridden by the imported files.

*/
/*
    File Name: _variables.scss

    Description:
    This is the variables SCSS file that imports all variables that are used all over project.

    Note:
    This file should not contain any actual CSS styles. Its purpose is to
    bring together all the variables that are used accros project.
    Any direct styles added to this file may be overridden by the imported files.

*/
/*
    ==== COLORS.VARIABLES ====

    Description:
        All variables related to colors.

    Modificators:
        No modificators.
*/
/*
    ==== FONT.VARIABLES ====

    Description:
        All variables related to fonts.

    Modificators:
        No modificators.

*/
/*
    ==== BUTTONS ====

    Component description:
        Website buttons.

    Modificators:

    1. Button off

        Description:             Button style for off background. It has 3 variation: .button-off--(primary || secondary || tertiary)
        Hook element selector:   button, a
        Class to add:            button--off
*/
button,
.button,
.button--bubbles,
.button-bubbles--tertiary,
.button-bubbles--secondary,
.button-bubbles--primary,
.button-off,
.button-off--tertiary,
.button-off--secondary,
.button-off--primary {
  width: auto;
  display: inline-block;
  margin: 0;
  padding: 13px 50px 13px;
  border: 1px solid transparent;
  outline: none;
  cursor: pointer;
  font-family: "primary-regular", Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 2rem;
  line-height: 2.2rem;
  transition: 0.3s ease;
  color: #000000;
  text-decoration: none;
}
button:hover,
.button:hover,
.button--bubbles:hover,
.button-bubbles--tertiary:hover,
.button-bubbles--secondary:hover,
.button-bubbles--primary:hover,
.button-off:hover,
.button-off--tertiary:hover,
.button-off--secondary:hover,
.button-off--primary:hover {
  transition: 0.3s ease;
}
button[disabled=true],
.button[disabled=true],
[disabled=true].button--bubbles,
[disabled=true].button-bubbles--tertiary,
[disabled=true].button-bubbles--secondary,
[disabled=true].button-bubbles--primary,
[disabled=true].button-off,
[disabled=true].button-off--tertiary,
[disabled=true].button-off--secondary,
[disabled=true].button-off--primary {
  opacity: 0.7;
  cursor: not-allowed;
}

a.button:hover, a.button--bubbles:hover, a.button-bubbles--tertiary:hover, a.button-bubbles--secondary:hover, a.button-bubbles--primary:hover, a.button-off:hover, a.button-off--tertiary:hover, a.button-off--secondary:hover, a.button-off--primary:hover {
  text-decoration: none;
}

/*
    ==== BUTTON OFF ====
*/
.button-off, .button-off--tertiary, .button-off--secondary, .button-off--primary {
  letter-spacing: 1px;
  background-color: transparent;
  position: relative;
  border: 1px solid #000000;
  color: #000000;
}
.button-off::after, .button-off--tertiary::after, .button-off--secondary::after, .button-off--primary::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  content: "";
  background-color: #40A2D8;
  z-index: -1;
  top: 7px;
  left: 7px;
  transition: 0.2s;
}
.button-off:hover::after, .button-off--tertiary:hover::after, .button-off--secondary:hover::after, .button-off--primary:hover::after {
  top: 0px;
  left: 0px;
}

.button-off--secondary {
  color: #FFFFFF;
}
.button-off--secondary::after {
  background-color: #0B60B0;
}

.button-off--tertiary {
  color: #000000;
}
.button-off--tertiary::after {
  background-color: #ffde4c;
}

/*
    ==== BUBBLES BUTTON ====
*/
@keyframes translateToBottom {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes translateToTop {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0);
  }
}
.button--bubbles, .button-bubbles--tertiary, .button-bubbles--secondary, .button-bubbles--primary {
  border: none;
  color: #000000;
  filter: url("#gooey");
  position: relative;
  background-color: #40A2D8;
}
.button--bubbles:hover, .button-bubbles--tertiary:hover, .button-bubbles--secondary:hover, .button-bubbles--primary:hover {
  background-color: #ffd20b;
}
.button--bubbles:hover .letter:nth-child(even), .button-bubbles--tertiary:hover .letter:nth-child(even), .button-bubbles--secondary:hover .letter:nth-child(even), .button-bubbles--primary:hover .letter:nth-child(even) {
  animation: translateToBottom 0.5s;
  display: inline-block;
}
.button--bubbles:hover .letter:nth-child(odd), .button-bubbles--tertiary:hover .letter:nth-child(odd), .button-bubbles--secondary:hover .letter:nth-child(odd), .button-bubbles--primary:hover .letter:nth-child(odd) {
  animation: translateToTop 0.5s;
  display: inline-block;
}
.button--bubbles:hover .bubbles .bubble, .button-bubbles--tertiary:hover .bubbles .bubble, .button-bubbles--secondary:hover .bubbles .bubble, .button-bubbles--primary:hover .bubbles .bubble {
  background-color: #ffd20b;
}
.button--bubbles svg, .button-bubbles--tertiary svg, .button-bubbles--secondary svg, .button-bubbles--primary svg {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
}
.button--bubbles:focus, .button-bubbles--tertiary:focus, .button-bubbles--secondary:focus, .button-bubbles--primary:focus {
  outline: none;
}
.button--bubbles .bubbles, .button-bubbles--tertiary .bubbles, .button-bubbles--secondary .bubbles, .button-bubbles--primary .bubbles {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.button--bubbles .bubbles .bubble, .button-bubbles--tertiary .bubbles .bubble, .button-bubbles--secondary .bubbles .bubble, .button-bubbles--primary .bubbles .bubble {
  background-color: #40A2D8;
  border-radius: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  z-index: -1;
}
.button--bubbles .bubbles .bubble:nth-child(1), .button-bubbles--tertiary .bubbles .bubble:nth-child(1), .button-bubbles--secondary .bubbles .bubble:nth-child(1), .button-bubbles--primary .bubbles .bubble:nth-child(1) {
  left: 56px;
  width: 25px;
  height: 25px;
  animation: move-1 3.02s infinite;
  animation-delay: 0.2s;
}
.button--bubbles .bubbles .bubble:nth-child(2), .button-bubbles--tertiary .bubbles .bubble:nth-child(2), .button-bubbles--secondary .bubbles .bubble:nth-child(2), .button-bubbles--primary .bubbles .bubble:nth-child(2) {
  left: 19px;
  width: 25px;
  height: 25px;
  animation: move-2 3.04s infinite;
  animation-delay: 0.4s;
}
.button--bubbles .bubbles .bubble:nth-child(3), .button-bubbles--tertiary .bubbles .bubble:nth-child(3), .button-bubbles--secondary .bubbles .bubble:nth-child(3), .button-bubbles--primary .bubbles .bubble:nth-child(3) {
  left: 25px;
  width: 25px;
  height: 25px;
  animation: move-3 3.06s infinite;
  animation-delay: 0.6s;
}
.button--bubbles .bubbles .bubble:nth-child(4), .button-bubbles--tertiary .bubbles .bubble:nth-child(4), .button-bubbles--secondary .bubbles .bubble:nth-child(4), .button-bubbles--primary .bubbles .bubble:nth-child(4) {
  left: 37px;
  width: 25px;
  height: 25px;
  animation: move-4 3.08s infinite;
  animation-delay: 0.8s;
}
.button--bubbles .bubbles .bubble:nth-child(5), .button-bubbles--tertiary .bubbles .bubble:nth-child(5), .button-bubbles--secondary .bubbles .bubble:nth-child(5), .button-bubbles--primary .bubbles .bubble:nth-child(5) {
  left: 92px;
  width: 25px;
  height: 25px;
  animation: move-5 3.1s infinite;
  animation-delay: 1s;
}
.button--bubbles .bubbles .bubble:nth-child(6), .button-bubbles--tertiary .bubbles .bubble:nth-child(6), .button-bubbles--secondary .bubbles .bubble:nth-child(6), .button-bubbles--primary .bubbles .bubble:nth-child(6) {
  left: 55px;
  width: 25px;
  height: 25px;
  animation: move-6 3.12s infinite;
  animation-delay: 1.2s;
}
.button--bubbles .bubbles .bubble:nth-child(7), .button-bubbles--tertiary .bubbles .bubble:nth-child(7), .button-bubbles--secondary .bubbles .bubble:nth-child(7), .button-bubbles--primary .bubbles .bubble:nth-child(7) {
  left: 70px;
  width: 25px;
  height: 25px;
  animation: move-7 3.14s infinite;
  animation-delay: 1.4s;
}
.button--bubbles .bubbles .bubble:nth-child(8), .button-bubbles--tertiary .bubbles .bubble:nth-child(8), .button-bubbles--secondary .bubbles .bubble:nth-child(8), .button-bubbles--primary .bubbles .bubble:nth-child(8) {
  left: 26px;
  width: 25px;
  height: 25px;
  animation: move-8 3.16s infinite;
  animation-delay: 1.6s;
}
.button--bubbles .bubbles .bubble:nth-child(9), .button-bubbles--tertiary .bubbles .bubble:nth-child(9), .button-bubbles--secondary .bubbles .bubble:nth-child(9), .button-bubbles--primary .bubbles .bubble:nth-child(9) {
  left: 66px;
  width: 25px;
  height: 25px;
  animation: move-9 3.18s infinite;
  animation-delay: 1.8s;
}
.button--bubbles .bubbles .bubble:nth-child(10), .button-bubbles--tertiary .bubbles .bubble:nth-child(10), .button-bubbles--secondary .bubbles .bubble:nth-child(10), .button-bubbles--primary .bubbles .bubble:nth-child(10) {
  left: 45px;
  width: 25px;
  height: 25px;
  animation: move-10 3.2s infinite;
  animation-delay: 2s;
}

@keyframes move-1 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -114px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
@keyframes move-2 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -99px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
@keyframes move-3 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -61px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
@keyframes move-4 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -85px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
@keyframes move-5 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -116px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
@keyframes move-6 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -99px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
@keyframes move-7 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -81px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
@keyframes move-8 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -78px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
@keyframes move-9 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -97px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
@keyframes move-10 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -69px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
.button-bubbles--primary {
  color: #FFFFFF;
}
.button-bubbles--primary:hover {
  color: #000000;
}

.button-bubbles--secondary {
  background-color: #0B60B0;
  color: #FFFFFF;
}
.button-bubbles--secondary .bubbles .bubble {
  background-color: #0B60B0;
}

.button-bubbles--tertiary {
  background-color: #ffde4c;
}
.button-bubbles--tertiary:hover {
  background-color: #ffd20b;
}
.button-bubbles--tertiary:hover .bubbles .bubble {
  background-color: #ffd20b;
}
.button-bubbles--tertiary .bubbles .bubble {
  background-color: #ffde4c;
}

button.hamburger-button {
  display: flex;
  flex-flow: column;
  align-items: center;
  position: relative;
  cursor: pointer;
  flex: 0;
  padding: 5px;
  background-color: transparent;
}
button.hamburger-button .btn-bar {
  position: relative;
  width: 25px;
  height: 3px;
  border-radius: 5px;
  background: #FFFFFF;
}
button.hamburger-button .btn-bar.btn-bar--to-open {
  transition: transform 0.2s ease-in-out 0.2s, opacity 0.15s ease-in-out 0.2s;
}
button.hamburger-button .btn-bar.btn-bar--to-open:nth-child(2n) {
  width: 32px;
}
button.hamburger-button .btn-bar.btn-bar--to-open {
  transition: transform 0.2s ease-in-out 0.2s, opacity 0.15s ease-in-out 0.2s;
}
button.hamburger-button .btn-bar.btn-bar--to-close {
  transform-origin: center center;
  position: absolute;
  margin-top: -1.5px;
  opacity: 0;
  top: 50%;
}
button.hamburger-button .btn-bar.btn-bar--to-close:not(:last-child) {
  transform: rotate(45deg) translateX(-250%);
}
button.hamburger-button .btn-bar.btn-bar--to-close:last-child {
  transform: rotate(-45deg) translateX(250%);
}
button.hamburger-button .btn-bar.btn-bar--to-open:not(:first-child) {
  margin-top: 3px;
}
button.hamburger-button.active .btn-bar.btn-bar--to-open {
  opacity: 0;
}
button.hamburger-button.active .btn-bar.btn-bar--to-close {
  opacity: 1;
}
button.hamburger-button.active .btn-bar.btn-bar--to-open:nth-child(2n+1) {
  transform: translateX(-400%);
}
button.hamburger-button.active .btn-bar.btn-bar--to-open:nth-child(2n) {
  transform: translateX(200%);
}
button.hamburger-button.active .btn-bar.btn-bar--to-close:not(:last-child) {
  transform: rotate(45deg);
}
button.hamburger-button.active .btn-bar.btn-bar--to-close:last-child {
  transform: rotate(-45deg);
}
button.hamburger-button.active .btn-bar.btn-bar--to-close {
  transition: transform 0.3s ease-in-out 0.2s, opacity 0.05s ease-in-out 0.3s;
}

/*
    File Name: _variables.scss

    Description:
    This is the variables SCSS file that imports all variables that are used all over project.

    Note:
    This file should not contain any actual CSS styles. Its purpose is to
    bring together all the variables that are used accros project.
    Any direct styles added to this file may be overridden by the imported files.

*/
/*
    ==== COLORS.VARIABLES ====

    Description:
        All variables related to colors.

    Modificators:
        No modificators.
*/
/*
    ==== FONT.VARIABLES ====

    Description:
        All variables related to fonts.

    Modificators:
        No modificators.

*/
/*
    ==== FORM ELEMENTS ====

    Component description:
        Form elements of website.

    Modificators:
        No modificators.
*/
input {
  width: 100%;
  padding: 15px;
  border: 1px solid transparent;
  border-bottom: 1px solid #dadadb;
  color: #000000;
  background-color: transparent;
  font-family: "primary-regular", Arial, Helvetica, sans-serif;
  font-weight: initial;
  font-size: 2rem;
  line-height: 2rem;
}
input:focus {
  outline: none;
}
input.active:focus {
  border: 1px solid #dadadb;
}
input.active {
  outline: none;
  border: 1px solid #0B60B0;
}
input.active + label {
  color: #0B60B0;
  transform: translateY(-12px);
  bottom: unset;
  font-size: 16px;
  background-color: #fff;
  transition: 0.2s ease;
}

.input-wrapper {
  position: relative;
  z-index: 1;
}
.input-wrapper:not(:last-child) {
  margin-bottom: 30px;
}
.input-wrapper label {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 0 5px;
  font-family: "primary-regular", Arial, Helvetica, sans-serif;
  font-weight: initial;
  font-size: 2rem;
  line-height: 2.6rem;
  color: #0F1C3B;
  cursor: text;
  transition: 0.2s ease;
}
.input-wrapper textarea + label {
  bottom: unset;
  top: 10px;
}

textarea {
  width: 100%;
  min-height: 150px;
  resize: none;
  outline: none;
  background-color: transparent;
  padding: 15px;
  border: 1px solid #dadadb;
  color: #000000;
  font-family: "primary-regular", Arial, Helvetica, sans-serif;
  font-weight: initial;
  font-size: 2rem;
  line-height: 2.6rem;
}
textarea:focus {
  outline: none;
}
textarea.active:focus {
  border: 1px solid #dadadb;
}
textarea.active {
  outline: none;
  border: 1px solid #0B60B0;
}
textarea.active + label {
  color: #0B60B0;
  transform: translateY(-12px);
  bottom: unset;
  top: unset;
  font-size: 16px;
  background-color: #fff;
  transition: 0.2s ease;
}

.column-wrapper {
  margin-bottom: 30px;
}

.bg-dark-grey input,
.bg-dark-grey textarea {
  color: #FFFFFF;
}
.bg-dark-grey input.active + label,
.bg-dark-grey textarea.active + label {
  background-color: #0F1C3B;
}

.bg-whiteish input {
  border-bottom: 1px solid #b5b5b9;
}
.bg-whiteish textarea {
  border-color: #b5b5b9;
}
.bg-whiteish input.active + label,
.bg-whiteish textarea.active + label {
  background-color: #F0EDCF;
}
.bg-whiteish input.active,
.bg-whiteish textarea.active {
  border: 1px solid #0F1C3B;
}
.bg-whiteish input.active + label,
.bg-whiteish textarea.active + label {
  background-color: #F0EDCF;
  color: #0F1C3B;
}

.just-validate-error-label {
  font-size: 14px;
  position: absolute;
}

@media (min-width: 768px) {
  .column-wrapper {
    display: flex;
    gap: 40px;
  }
  .column-wrapper:not(:last-child) {
    margin-bottom: 30px;
  }
  .column-wrapper .input-wrapper {
    width: calc(50% - 20px);
    margin-bottom: 0;
  }
}
/*
    File Name: _variables.scss

    Description:
    This is the variables SCSS file that imports all variables that are used all over project.

    Note:
    This file should not contain any actual CSS styles. Its purpose is to
    bring together all the variables that are used accros project.
    Any direct styles added to this file may be overridden by the imported files.

*/
/*
    ==== COLORS.VARIABLES ====

    Description:
        All variables related to colors.

    Modificators:
        No modificators.
*/
/*
    ==== FONT.VARIABLES ====

    Description:
        All variables related to fonts.

    Modificators:
        No modificators.

*/
/*
    ==== SLIDER ====

    Component description:
        Website buttons.

    Modificators:
        No modificators.
*/
.slider-controls {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.slider-control {
  width: 60px;
  height: 60px;
  margin-bottom: 30px;
  position: relative;
  background: transparent;
  border: 1px solid #ffde4c;
  padding: 0;
  border-radius: 10px;
}
.slider-control::before {
  content: "";
  display: block;
  width: 33px;
  height: 35px;
  background-image: url("../../img/icons/arrows/arrow-left-yellow.svg");
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.slider-control:hover {
  background-color: #ffde4c;
}
.slider-control:hover::before {
  background-image: url("../../img/icons/arrows/arrow-left-dark-grey.svg");
}
.slider-control.slider-control--next::before {
  background-image: url("../../img/icons/arrows/arrow-right-yellow.svg");
}
.slider-control.slider-control--next:hover::before {
  background-image: url("../../img/icons/arrows/arrow-right-dark-grey.svg");
}

/* 
	==== Spacings ==== 
*/
/*
    ==== SPACING ====

    Description:
        List of all aviailable spacings (padding and margin) accross the website.

    Modificators:
        No modificators.
*/
.padding-0 {
  padding: 0 !important;
}

.padding-top-0 {
  padding-top: 0 !important;
}

.padding-bottom-0 {
  padding-bottom: 0 !important;
}

.padding-top-50 {
  padding-top: 50px !important;
}

.padding-bottom-50 {
  padding-bottom: 50px !important;
}

.padding-top-100 {
  padding-top: 100px !important;
}

.padding-bottom-100 {
  padding-bottom: 100px !important;
}

.padding-top-150 {
  padding-top: 150px !important;
}

.padding-bottom-150 {
  padding-bottom: 150px !important;
}

.padding-top-200 {
  padding-top: 200px !important;
}

.padding-bottom-200 {
  padding-bottom: 200px !important;
}

.margin-0 {
  margin: 0 !important;
}

.margin-top-0 {
  margin-top: 0 !important;
}

.margin-bottom-0 {
  margin-bottom: 0 !important;
}

.margin-top-50 {
  margin-top: 50px !important;
}

.margin-bottom-50 {
  margin-bottom: 50px !important;
}

.margin-top-100 {
  margin-top: 100px !important;
}

.margin-bottom-100 {
  margin-bottom: 100px !important;
}

.margin-top-150 {
  margin-top: 150px !important;
}

.margin-bottom-150 {
  margin-bottom: 150px !important;
}

.margin-top-200 {
  margin-top: 200px !important;
}

.margin-bottom-200 {
  margin-bottom: 200px !important;
}

/* 
	==== Sections ==== 
*/
/*
    File Name: all-sections.scss

    Description:
    This is the all-secitons SCSS file that imports all sections SCSS files.

    Note:
    This file should not contain any actual CSS styles. Its purpose is to
    bring together all the necessary styles from the smaller SCSS files.
    Any direct styles added to this file may be overridden by the imported files.

*/
/*
    File Name: _variables.scss

    Description:
    This is the variables SCSS file that imports all variables that are used all over project.

    Note:
    This file should not contain any actual CSS styles. Its purpose is to
    bring together all the variables that are used accros project.
    Any direct styles added to this file may be overridden by the imported files.

*/
/*
    ==== COLORS.VARIABLES ====

    Description:
        All variables related to colors.

    Modificators:
        No modificators.
*/
/*
    ==== FONT.VARIABLES ====

    Description:
        All variables related to fonts.

    Modificators:
        No modificators.

*/
/*
    ==== HERO SECTION ====

    Description: 
        Hero section of website.

    Modificators:
        No modificators.

*/
.hero-section {
  min-height: calc(100dvh - var(--headerHeight));
  padding-top: 100px;
  padding-bottom: 100px;
  overflow: hidden;
}
.hero-section .section-bg-image.not-cover img {
  top: 0;
  transform: rotate(135deg);
}
.hero-section .section-bg-image::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  transition: 2s ease;
  opacity: 1;
  background-color: #0F1C3B;
  z-index: 5;
}
.hero-section .heading {
  max-width: 900px;
}
.hero-section .heading .title {
  margin-bottom: 40px;
}
.hero-section .heading .title h1,
.hero-section .heading .title h2,
.hero-section .heading .title h3,
.hero-section .heading .title h4,
.hero-section .heading .title h5,
.hero-section .heading .title h6 {
  font-size: 7rem;
  line-height: 8rem;
  margin-top: 0;
  margin-bottom: 0;
}
.hero-section .content {
  max-width: 700px;
}
.hero-section .content .text > *:first-child {
  margin-top: 0;
}
.hero-section .content .text > *:last-child {
  margin-bottom: 0;
}
.hero-section .cta-wrapper {
  margin-top: 50px;
}

html.dom-content-loaded .hero-section .section-bg-image::after {
  transform: scaleY(0);
  transform-origin: bottom;
}

@media (max-width: 767px) {
  .hero-section .heading .title h1,
  .hero-section .heading .title h2,
  .hero-section .heading .title h3,
  .hero-section .heading .title h4,
  .hero-section .heading .title h5,
  .hero-section .heading .title h6 {
    font-size: 5rem;
    line-height: 5.5rem;
  }
}
@media (max-width: 575px) {
  .hero-section {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .hero-section .heading .title h1,
  .hero-section .heading .title h2,
  .hero-section .heading .title h3,
  .hero-section .heading .title h4,
  .hero-section .heading .title h5,
  .hero-section .heading .title h6 {
    font-size: 4rem;
    line-height: 4.5rem;
  }
}
/*
    File Name: _variables.scss

    Description:
    This is the variables SCSS file that imports all variables that are used all over project.

    Note:
    This file should not contain any actual CSS styles. Its purpose is to
    bring together all the variables that are used accros project.
    Any direct styles added to this file may be overridden by the imported files.

*/
/*
    ==== COLORS.VARIABLES ====

    Description:
        All variables related to colors.

    Modificators:
        No modificators.
*/
/*
    ==== FONT.VARIABLES ====

    Description:
        All variables related to fonts.

    Modificators:
        No modificators.

*/
/*
    ==== CONTACT SECTION ====

    Description: 
        Contact of website.

    Modificators:
        No modificators.

*/
.contact {
  padding-top: 100px;
  padding-bottom: 100px;
  background-color: #0F1C3B;
}
.contact .heading-and-text {
  color: #FFFFFF;
}
.contact .heading {
  margin-bottom: 20px;
}
.contact .heading .title h1,
.contact .heading .title h2,
.contact .heading .title h3,
.contact .heading .title h4,
.contact .heading .title h5,
.contact .heading .title h6 {
  font-size: 6rem;
  line-height: 7rem;
  margin-top: 0;
  margin-bottom: 0;
}
.contact .text {
  margin-bottom: 50px;
  max-width: 800px;
}
.contact .text > *:first-child {
  margin-top: 0;
}
.contact .text > *:last-child {
  margin-bottom: 0;
}
.contact .contact__inner {
  padding: 50px;
  border-radius: 32px;
}
.contact .contact__inner .cta-wrapper {
  margin-top: 60px;
}
.contact .contact-phone {
  color: #FFFFFF;
  display: inline-block;
}
.contact .contact-phone a {
  background: linear-gradient(to right, #5B86E5, #48ACE0, #36D1DC);
  background-clip: border-box;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  transition: 0.2s ease;
}
.contact .contact-phone a:hover {
  text-decoration: none;
}
.contact .contact-phone .phone {
  display: flex;
  align-items: center;
}
.contact .contact-phone .phone .arrow {
  display: flex;
  margin: 0 35px;
}
.contact .contact-phone .contact-phone__title {
  margin-bottom: 50px;
}
.contact .contact-phone .contact-phone__title h1,
.contact .contact-phone .contact-phone__title h2,
.contact .contact-phone .contact-phone__title h3,
.contact .contact-phone .contact-phone__title h4,
.contact .contact-phone .contact-phone__title h5,
.contact .contact-phone .contact-phone__title h6 {
  font-size: 3rem;
  line-height: 3.5rem;
  margin-top: 0;
  margin-bottom: 0;
}
.contact .contact-phone .contact-phone__title .separator {
  display: block;
  height: 1px;
  width: 100%;
  background-color: #ffde4c;
  margin: 35px 0;
}
.contact #submit-message.success {
  padding: 20px 20px 20px 60px;
  border: 2px solid #40A2D8;
  margin-top: 60px;
  position: relative;
}
.contact #submit-message.success::before {
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  left: 10px;
  top: 20px;
  background-image: url("../../img/icons/check-solid.svg");
  background-size: 20px auto;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #40A2D8;
  border-radius: 50%;
}
.contact #submit-message.error {
  padding: 20px 20px 20px 60px;
  border: 2px solid #AF0606;
  margin-top: 60px;
  position: relative;
}
.contact #submit-message.error::before {
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  left: 10px;
  top: 20px;
  background-image: url("../../img/icons/xmark-solid.svg");
  background-size: 20px auto;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #AF0606;
  border-radius: 50%;
}

@media (max-width: 767px) {
  .contact .heading .title h1,
  .contact .heading .title h2,
  .contact .heading .title h3,
  .contact .heading .title h4,
  .contact .heading .title h5,
  .contact .heading .title h6 {
    font-size: 5rem;
    line-height: 5.5rem;
  }
}
@media (max-width: 575px) {
  .contact {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .contact .heading .title h1,
  .contact .heading .title h2,
  .contact .heading .title h3,
  .contact .heading .title h4,
  .contact .heading .title h5,
  .contact .heading .title h6 {
    font-size: 4rem;
    line-height: 4.5rem;
  }
  .contact .contact__inner {
    padding: 30px;
  }
  .contact .contact__inner .heading .title h1,
  .contact .contact__inner .heading .title h2,
  .contact .contact__inner .heading .title h3,
  .contact .contact__inner .heading .title h4,
  .contact .contact__inner .heading .title h5,
  .contact .contact__inner .heading .title h6 {
    font-size: 4rem;
    line-height: 4.5rem;
  }
  .contact .contact-phone .phone {
    display: block;
  }
  .contact .contact-phone .phone .arrow {
    display: inline-block;
    margin: 20px 0;
    transform: rotate(90deg);
  }
  .contact .contact-phone .phone a {
    display: block;
  }
}
@media (max-width: 450px) {
  .contact #submit-message.success,
  .contact #submit-message.error {
    padding-left: 20px;
    font-size: 16px;
  }
  .contact #submit-message.success::before,
  .contact #submit-message.error::before {
    position: initial;
    display: block;
    margin-bottom: 20px;
  }
}
/*
    File Name: _variables.scss

    Description:
    This is the variables SCSS file that imports all variables that are used all over project.

    Note:
    This file should not contain any actual CSS styles. Its purpose is to
    bring together all the variables that are used accros project.
    Any direct styles added to this file may be overridden by the imported files.

*/
/*
    ==== COLORS.VARIABLES ====

    Description:
        All variables related to colors.

    Modificators:
        No modificators.
*/
/*
    ==== FONT.VARIABLES ====

    Description:
        All variables related to fonts.

    Modificators:
        No modificators.

*/
/*
    ==== SERVICES SECTION ====

    Description: 
        Services section.

    Modificators:
        No modificators.

*/
.services {
  padding-top: 100px;
  padding-bottom: 100px;
}
.services .heading {
  margin-bottom: 100px;
}
.services .heading .title h1,
.services .heading .title h2,
.services .heading .title h3,
.services .heading .title h4,
.services .heading .title h5,
.services .heading .title h6 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 5rem;
  line-height: 6rem;
}
.services .heading .subtitle {
  margin: 30px auto 0 auto;
  max-width: 700px;
}
.services .heading .subtitle p {
  margin-top: 0;
}
.services .heading .subtitle p:last-child {
  margin-bottom: 0;
}
.services .box {
  border: 2px solid #ebf0f4;
  padding: 40px;
}
.services .box:nth-child(4n+1) {
  border-bottom-right-radius: 30px;
}
.services .box:nth-child(4n+2) {
  border-top-right-radius: 30px;
}
.services .box:nth-child(4n+3) {
  border-bottom-left-radius: 30px;
}
.services .box:nth-child(4n) {
  border-top-left-radius: 30px;
}
.services .box .icon-and-title-wrapper {
  display: flex;
  text-align: left;
  gap: 20px;
  justify-content: space-between;
}
.services .box .icon {
  font-size: 0;
  max-width: 50px;
}
.services .box .icon img {
  max-width: 100%;
  height: auto;
}
.services .box .title {
  margin-bottom: 30px;
}
.services .box .title h1,
.services .box .title h2,
.services .box .title h3,
.services .box .title h4,
.services .box .title h5,
.services .box .title h6 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3rem;
  line-height: 3.5rem;
}
.services .box .content > *:first-child {
  margin-top: 0;
}
.services .box .content > *:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .services .boxes-holder__inner {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
  }
}
@media (min-width: 992px) {
  .services .boxes-holder__inner .box {
    width: calc(50% - 40px);
  }
}
@media (max-width: 991px) {
  .services .box {
    text-align: center;
  }
  .services .box .icon-and-title-wrapper {
    justify-content: center;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
  }
}
@media (max-width: 767px) {
  .services .boxes-holder__inner .box {
    width: 100%;
  }
  .services .boxes-holder__inner .box:not(:last-child) {
    margin-bottom: 40px;
  }
  .services .heading .title h1,
  .services .heading .title h2,
  .services .heading .title h3,
  .services .heading .title h4,
  .services .heading .title h5,
  .services .heading .title h6 {
    font-size: 5rem;
    line-height: 5.5rem;
  }
}
@media (max-width: 575px) {
  .services {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .services .heading .title h1,
  .services .heading .title h2,
  .services .heading .title h3,
  .services .heading .title h4,
  .services .heading .title h5,
  .services .heading .title h6 {
    font-size: 4rem;
    line-height: 4.5rem;
  }
}
/*
    File Name: _variables.scss

    Description:
    This is the variables SCSS file that imports all variables that are used all over project.

    Note:
    This file should not contain any actual CSS styles. Its purpose is to
    bring together all the variables that are used accros project.
    Any direct styles added to this file may be overridden by the imported files.

*/
/*
    ==== COLORS.VARIABLES ====

    Description:
        All variables related to colors.

    Modificators:
        No modificators.
*/
/*
    ==== FONT.VARIABLES ====

    Description:
        All variables related to fonts.

    Modificators:
        No modificators.

*/
/*
    ==== PROJECTS ====

    Description: 
        Projects of website.

    Modificators:
        No modificators.

*/
.projects {
  padding-top: 100px;
  padding-bottom: 100px;
  scroll-margin-top: 150px;
}
.projects .heading {
  margin-bottom: 100px;
}
.projects .heading .title h1,
.projects .heading .title h2,
.projects .heading .title h3,
.projects .heading .title h4,
.projects .heading .title h5,
.projects .heading .title h6 {
  font-size: 6rem;
  line-height: 7rem;
  margin-top: 0;
  margin-bottom: 0;
}
.projects .box .box__inner > a {
  display: inline-flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: #000000;
}
.projects .box .box__inner > a:hover .featured-image .overlay {
  opacity: 1;
  transition: 0.3s ease;
}
.projects .box .featured-image {
  position: relative;
  margin-bottom: 20px;
  font-size: 0;
  line-height: 0;
}
.projects .box .featured-image .overlay {
  opacity: 0;
  transition: 0.3s ease;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(64, 162, 216, 0.9);
  color: #FFFFFF;
  font-size: 2.2rem;
  line-height: 2.5rem;
}
.projects .box .labels-wrapper-title {
  margin-bottom: 10px;
}
.projects .box .labels-wrapper {
  display: flex;
  margin-bottom: 10px;
  font-size: 1.7rem;
  flex-wrap: wrap;
  gap: 10px;
}
.projects .box .labels-wrapper .label {
  position: relative;
  background-color: #ffde4c;
  padding: 4px 10px;
}
.projects .box .title {
  margin-bottom: auto;
}
.projects .box .title h1,
.projects .box .title h2,
.projects .box .title h3,
.projects .box .title h4,
.projects .box .title h5,
.projects .box .title h6 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3rem;
  line-height: 4rem;
}
.projects .box .separator {
  height: 2px;
  width: 100%;
  background-color: #ffde4c;
  margin: 30px 0;
}
.projects .box .project-information {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}
.projects .box .project-information .information.information.business-area {
  flex: 1 1 100%;
}
.projects .box .project-information .information .title {
  font-size: 1.7rem;
  margin-bottom: 10px;
}
.projects .box .project-information .information .value {
  font-size: 3rem;
  line-height: 3.5rem;
}
.projects .box .cta {
  margin-top: 50px;
}

@media (min-width: 768px) {
  .projects .projects-list {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
  }
  .projects .projects-list .box {
    width: calc(50% - 40px);
  }
}
@media (max-width: 767px) {
  .projects .heading .title h1,
  .projects .heading .title h2,
  .projects .heading .title h3,
  .projects .heading .title h4,
  .projects .heading .title h5,
  .projects .heading .title h6 {
    font-size: 5rem;
    line-height: 5.5rem;
  }
  .projects .projects-list .project:not(:last-child) {
    margin-bottom: 50px;
    padding-bottom: 50px;
    border-bottom: 1px solid #0F1C3B;
  }
}
@media (max-width: 575px) {
  .projects {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .projects .heading .title h1,
  .projects .heading .title h2,
  .projects .heading .title h3,
  .projects .heading .title h4,
  .projects .heading .title h5,
  .projects .heading .title h6 {
    font-size: 4rem;
    line-height: 4.5rem;
  }
}
/*
    File Name: _variables.scss

    Description:
    This is the variables SCSS file that imports all variables that are used all over project.

    Note:
    This file should not contain any actual CSS styles. Its purpose is to
    bring together all the variables that are used accros project.
    Any direct styles added to this file may be overridden by the imported files.

*/
/*
    ==== COLORS.VARIABLES ====

    Description:
        All variables related to colors.

    Modificators:
        No modificators.
*/
/*
    ==== FONT.VARIABLES ====

    Description:
        All variables related to fonts.

    Modificators:
        No modificators.

*/
/*
    ==== PRICING SECTION ====

    Description: 
        pricing section of website.

    Modificators:
        No modificators.

*/
.pricing {
  padding-top: 100px;
  padding-bottom: 100px;
  scroll-margin-top: 150px;
}
.pricing .heading {
  margin-bottom: 50px;
}
.pricing .heading .title h1,
.pricing .heading .title h2,
.pricing .heading .title h3,
.pricing .heading .title h4,
.pricing .heading .title h5,
.pricing .heading .title h6 {
  font-size: 6rem;
  line-height: 7rem;
  margin-top: 0;
  margin-bottom: 0;
}
.pricing .text > *:first-child {
  margin-top: 0;
}
.pricing .text > *:last-child {
  margin-bottom: 0;
}

@media (min-width: 992px) {
  .pricing__inner .cta-and-text {
    display: flex;
    align-items: center;
    gap: 70px;
  }
  .pricing__inner .cta-and-text .section-cta {
    min-width: 300px;
    display: flex;
    justify-content: flex-end;
  }
}
@media (max-width: 767px) {
  .pricing .heading .title h1,
  .pricing .heading .title h2,
  .pricing .heading .title h3,
  .pricing .heading .title h4,
  .pricing .heading .title h5,
  .pricing .heading .title h6 {
    font-size: 5rem;
    line-height: 5.5rem;
  }
}
@media (max-width: 575px) {
  .pricing {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .pricing .heading .title h1,
  .pricing .heading .title h2,
  .pricing .heading .title h3,
  .pricing .heading .title h4,
  .pricing .heading .title h5,
  .pricing .heading .title h6 {
    font-size: 4rem;
    line-height: 4.5rem;
  }
}
/*
    File Name: _variables.scss

    Description:
    This is the variables SCSS file that imports all variables that are used all over project.

    Note:
    This file should not contain any actual CSS styles. Its purpose is to
    bring together all the variables that are used accros project.
    Any direct styles added to this file may be overridden by the imported files.

*/
/*
    ==== COLORS.VARIABLES ====

    Description:
        All variables related to colors.

    Modificators:
        No modificators.
*/
/*
    ==== FONT.VARIABLES ====

    Description:
        All variables related to fonts.

    Modificators:
        No modificators.

*/
/*
    ==== TESTIMONIALS SECTION ====

    Description: 
        Testimonials section.

    Modificators:
        No modificators.

*/
.testimonials {
  padding-top: 100px;
  padding-bottom: 100px;
}
.testimonials .heading {
  margin-bottom: 100px;
}
.testimonials .heading .title h1,
.testimonials .heading .title h2,
.testimonials .heading .title h3,
.testimonials .heading .title h4,
.testimonials .heading .title h5,
.testimonials .heading .title h6 {
  font-size: 6rem;
  line-height: 7rem;
  margin-top: 0;
  margin-bottom: 0;
}
.testimonials .swiper-slide .slider__inner .image {
  margin-bottom: 30px;
}
.testimonials .swiper-slide .slider__inner .image img {
  max-width: 100%;
  width: 500px;
  height: 267px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
}
.testimonials .swiper-slide .slider__inner .title {
  margin-bottom: 10px;
}
.testimonials .swiper-slide .slider__inner .title > * {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3rem;
  line-height: 3.5rem;
}
.testimonials .swiper-slide .slider__inner .content {
  max-width: 500px;
}
.testimonials .swiper-slide .slider__inner .content .position {
  margin-bottom: 10px;
}
.testimonials .swiper-slide .slider__inner .content .project {
  background: linear-gradient(to right, #5B86E5, #48ACE0, #36D1DC);
  background-clip: border-box;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

@media (max-width: 767px) {
  .testimonials .heading .title h1,
  .testimonials .heading .title h2,
  .testimonials .heading .title h3,
  .testimonials .heading .title h4,
  .testimonials .heading .title h5,
  .testimonials .heading .title h6 {
    font-size: 5rem;
    line-height: 5.5rem;
  }
}
@media (max-width: 575px) {
  .testimonials {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .testimonials .heading .title h1,
  .testimonials .heading .title h2,
  .testimonials .heading .title h3,
  .testimonials .heading .title h4,
  .testimonials .heading .title h5,
  .testimonials .heading .title h6 {
    font-size: 4rem;
    line-height: 4.5rem;
  }
}