@import url('https://fonts.googleapis.com/css2?family=Italiana&family=Oswald:wght@200;400;600&family=Quattrocento:wght@400;700&display=swap');

:root {
  --container-width: 90rem;
  --gutter: 1.0625rem;
  --gutter-lg: 2.0625rem;
  --font-sans: "Oswald", sans-serif;
  --font-serif: "Quattrocento", serif;
  --font-script: "Italiana", script;

  --color-blue: #4285f4;
  --color-red: #ea4335;
  --color-yellow: #fbbc04;
  --color-green: #34a853;
  --swiper-theme-color: #f0f5fe;
  --swiper-navigation-sides-offset: 0.625rem;
  --swiper-navigation-top-offset: 17%;
}
html {
  scroll-padding-top: 5.625rem;
  /* scroll-behavior: smooth; */
}
body {
  font-family: var(--font-serif);
  color: #2f2f2f;
}

.container {
  position: relative;
  width: 100%;
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  /* border-left: 0.0625rem solid var(--color-red);
  border-right: 0.0625rem solid var(--color-red); */
}

.gutter {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
@media (min-width: 800px) {
  .gutter {
    padding-left: var(--gutter-lg);
    padding-right: var(--gutter-lg);
  }
}

.preloader {
  /* display: none; */
  background: rgba(255,255,255,1);
  width: 100%;
  height: 100%;
  
  position: absolute;
  top: 0;
  left: 0;
  content: " ";
  transition: background 1s, backdrop-filter 1s;
  backdrop-filter: blur(1.3125rem);
  z-index: 2000;
}
.preloader__inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.preloader__logo {
  margin-top: -3.75rem;
  max-width: 10rem;
  width: 30%;
  transition: opacity .25s, backdrop-filter .25s;
}
.preloader.disabled .preloader__logo {
  opacity: 0;
  background-filter: blur(0.625rem);
}
.preloader.disabled {
  backdrop-filter: blur(0);
  background: rgba(255,255,255,0);
}

@keyframes fadeInOut {
  0%, 100% { opacity: 0; }
  33% { opacity: 1; } /* Adjust these percentages to control duration */
  66% { opacity: 1; }
}

.preload-first, .preload-second, .preload-third, .preload-fourth {
  opacity: 0;
  animation: fadeInOut 2s ease-in-out; /* Duration should cover the entire cycle */
}
.preload-first { animation-delay: .333s; }
.preload-second { animation-delay: .666s; }
.preload-third { animation-delay: .999s; }
.preload-fourth { animation-delay: 1.333s; }

/* 
.preload-baton {
  transform-origin: 3.125rem 3.125rem;
  animation: shake .25s ease-in-out forwards 1.25s;
}

@keyframes shake {
  0%, 100% { 
    transform: rotate(0deg) translateX(0) translateY(0);
  }
  50% { 
    transform: rotate(5deg) translateX(0) translateY(-3.125rem);
  }
} */

.hero__title, .hero__subtitle > span, .blending-bg, .header__right {
  opacity: 0;
}
.hero__title.active, .hero__subtitle > span.active, .header__right.active {
  opacity: 1;
}



p {
  font-size: 0.9375rem;
  font-size: clamp(0.9375rem, 0.8125rem + 0.625vi, 1.5625rem); /* 15px - 25px */
  line-height: 1.333;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
@media (min-width: 1920px) {
  p {
    font-size: 1.5625rem;
  }
}

strong {
  color: var(--color-blue);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  text-transform: uppercase;
}

.h-stacked {
  font-size: 4.3125rem;
  font-size: clamp(4.3125rem, 1.425rem + 14.4375vi, 18.75rem);
  font-weight: bold;
  letter-spacing: -.025em;
  color: var(--color-blue);
}
@media (min-width: 1920px) {
  .h-stacked {
    font-size: 18.75rem;
  }
}
.h-stacked small {
  display: block;
  font-weight: 200;
  font-size: 27.0.375rem;
  font-size: clamp(1.725rem, 0.57rem + 5.775vi, 7.5rem);
  letter-spacing: .2em;
  color: #000;
  position: relative;
  margin-bottom: -5.3%;
}
@media (min-width: 1920px) {
  .h-stacked small {
    font-size: 7.5rem;
  }
}




.h-stacked-small {
  font-size: 2.0625rem;
  font-size: clamp(2.0625rem, 1.8875rem + 0.875vi, 2.9375rem);
  letter-spacing: 0.2em;
  font-weight: 200;
}
@media (min-width: 1920px) {
  .h-stacked-small {
    font-size: 2.9375rem;
  }
}
.h-stacked-small strong {
  color: inherit;
}
.h-stacked-small mark {
  background: white;
  color: var(--color-blue);
  font-weight: 600;
  display: block;
}


.h-stacked-smaller {
  font-size: 1.3125rem;
  font-size: clamp(1.3125rem, 1.1125rem + 1vi, 2.3125rem);
  letter-spacing: 0.2em;
  font-weight: 200;
}
@media (min-width: 1920px) {
  .h-stacked-smaller {
    font-size: 2.3125rem;
  }
}
.h-stacked-smaller strong {
  color: inherit;
}
.h-stacked-smaller mark {
  background: white;
  color: var(--color-blue);
  font-weight: 600;
  display: block;
}






[type="submit"], .button, button:not([class]) {
  display: inline-block;
  text-decoration: none;
  transition: 0.3s border-color, 0.3s color, 0.3s background;
  border: 0.125rem solid #fff;
  background-color: transparent;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1;
  letter-spacing: 0.09em;
  font-weight: normal;
  height: auto;
  padding: 0.6875rem 1.25rem 0.75rem;
  text-transform: uppercase;
}
@media (min-width: 1920px) {
  [type="submit"], .button, button:not([class]) {
    
  }
}
button:not([class]):not([disabled]):hover, .button:hover, input[type="submit"]:hover, input[type="reset"]:hover, [type="submit"]:hover, .button:hover, button:not([class]):not([disabled]):hover  {
  background: #fff;
  border-color: #fff;
  color: #000;
  opacity: 1;
}

header {
  position: fixed;
  z-index: 999;
  width: 100%;
  top: 0;
  left: 0;
  padding-top: 0.5625rem;
  padding-bottom: 0.5625rem;
  transition: background .25s, box-shadow .25s;
}
header.sticky {
  background: rgba(66, 133, 244,.98);
  background: radial-gradient(circle at left bottom, rgb(66, 133, 244) 0%, rgb(234, 67, 53) 100%);
  box-shadow: 0 0 0.625rem rgba(0,0,0,0.1);
}
header > .container {
  
}

.header__inner {
  
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header__logo {
  transition: opacity .125s;
  opacity: 0;
}

header.sticky .header__logo {
  opacity: 1;
}

.header__right {
  transition: opacity .4s;
}

.blending-bg {
  transition: opacity 4s;
  position: absolute;
  top: 0;
  left: 0;
  mix-blend-mode: overlay;
  object-fit: cover;
  top: 0;
  left: -2vw;
  right: -2vw;
  width: 150vw;
  height: 150vh;
  animation: skewWavy ease-in-out 10s infinite alternate; 
  z-index: 1;
  
  pointer-events: none;
  user-select: none;
}
.blending-bg.active {
  opacity: 0.1;
}
@keyframes skewWavy {
  0%,100% {
    transform: translate(0%, -10%) skew(0deg, 0deg);
  }

  50% {
    transform: translate(0%, -5%) skew(2.5deg, 2.5deg);
  }
  
}

.hero {
  position: relative;
  height: 100vh;
  background: 
  radial-gradient(ellipse at right 0%, #f23c2c 0%, #ef3c3c 30%, transparent 100%) 0 0,
  linear-gradient(160deg, rgb(255, 187, 0) 0%, rgba(255,255,255,0) 50%),
  linear-gradient(90deg, rgb(62, 214, 102) 0%,  rgb(65, 208, 103)40%, rgb(71, 139, 255) 100%)
  ;
  background: radial-gradient(circle at left bottom, rgb(66, 133, 244) 0%, rgb(234, 67, 53) 100%);

  background-repeat: no-repeat;
  overflow: hidden;
}


.hero__content {
  z-index: 2;
  margin-top: 25vh;
  position: relative;
}
@media (min-width: 800px) {
  .hero__content {
    margin-top: 33.3333vh;
  }
}
.hero__content * {
  transition: opacity .3s;
}
.hero__content .container {

}
@media (min-width: 800px) {
  .hero__content .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5%;
  }
}

@media (min-width: 800px) {
  .hero__content .container > div {
    
  }
  .hero__content .container > div:first-child {
    width: 50%;
  }
  .hero__content .container > div:nth-child(2) {
    width: 50%;
  }
}

.hero__logo {
  width: 100%;

  pointer-events: none;
  user-select: none;
}


.hero__title {
  transition: 2s ease;
  margin-bottom: 3.125rem;
  width: 87%;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 800px) {
  .hero__title {
    width: 100%;

  }
}


.hero__subtitle {
  font-size: 0.9375rem;
  font-size: clamp(0.9375rem, 0.7875rem + 0.75vi, 1.6875rem);
  font-weight: 200;
  color: #fff;
  letter-spacing: 0.2em;
  text-align: center;
  
}
@media (min-width: 1920px) {
  .hero__subtitle {
    font-size: 1.8125rem;
  }
}
.hero__subtitle .line {
  position: relative; 
  display: block;
  width: 0.125rem;
  height: 2.1875rem;
  margin-top: 1.1875rem;
  margin-bottom: 1.1875rem;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  transform: rotate(180deg);
}

.hero__subtitle .line:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  background: #fff;
  width: 0.125rem;
  height: 0; 
  transition: height 0.5s ease;
}

.hero__subtitle .line.active:after {
  height: 2.1875rem; 
}
.hero__subtitle .text-script {
  font-family: var(--font-script);
  font-style: italic;
  font-size: 1.1875rem;
  font-size: clamp(1.1875rem, 0.9875rem + 1vi, 2.1875rem);
  transition: letter-spacing 1.5s;
  letter-spacing: 0;
}
@media (min-width: 1920px) {
  .hero__subtitle .text-script {
    font-size: 35x;
  }
}
.hero__subtitle .text-script.active {
  letter-spacing: .2em;
}

.info-block {
  position: relative;
  /* min-height: 100vh; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  
}
.info-block-head {
  position: relative;
  z-index: 1;
  padding-top: 7.5rem;
}
.info-block-content {
  position: relative;
  margin-top: 7.5rem;
  display: flex;
  margin-left: 6.5%;
  z-index: 2;
  padding: 0 0 7.5rem;
}
@media (min-width: 800px) {
  .info-block-content {
    /* width: 60%; */
  }
}
/* .info-block-content.text-right {
  margin-left: auto;
  margin-right: 6.5%;
} */

.logo-bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  
  width: 88.888%;
  height: 100%;
  object-fit: contain;


  pointer-events: none;
  user-select: none;
}

.rainbow-line {
  position: absolute;
  top: -0.0125rem;
  left: 0;
  background-image: linear-gradient(to bottom, rgb(234,68,54) 0%, rgb(250,188,5) 32%, rgb(52,169,83) 62%, rgb(67,132,243) 100%);
  background-image: radial-gradient(circle at left bottom, rgb(66, 133, 244) 0%, rgb(234, 67, 53) 100%);
  width: 0.3125rem;
  height: 100%;
  flex: 0 0 0.3125rem;
  z-index: 0;
}

.rainbow-line--inverted {
  background-image: radial-gradient(circle at left top, rgb(66, 133, 244) 0%, rgb(234, 67, 53) 100%);
}


.info-block-content.text-right .rainbow-line {
  left: auto;
  right: 0;
}
@media (max-width: 1023px) {
  .info-block-content.text-right .rainbow-line {
    height: 129%;
  }
}

.info-block-content__inner {
  margin-left: 2rem;
}
@media (min-width: 800px) {
  .info-block-content__inner {
    width: 60%;
  }
}
.info-block-content.text-right .info-block-content__inner {
  margin-left: 0;
  margin-right: 2rem;
}
.info-block-content--image {
  gap: 20px;
}
@media (max-width: 799px) {
  .info-block-content--image {
    flex-direction: row;
    flex-wrap: wrap;
  }  
}




.clients-block {
  position: relative;
  min-height: 37.5rem;
  background: var(--color-blue);
  background: radial-gradient(circle at left top, rgb(66, 133, 244) 0%, rgb(234, 67, 53) 100%);
  color: #fff;
  display: flex;
  align-items: center;
}
.clients-block > .container {
}
@media (min-width: 1024px) {
  .clients-block {
   
  }
  .clients-block > .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}


.clients-block__title {
  font-size: 2.8125rem;
  font-size: clamp(2.8125rem, 2.0625rem + 3.75vi, 6.5625rem); /* 45px - 105px */
  white-space: nowrap;
  text-align: center;
  margin-bottom: 1.875rem;
}
@media (min-width: 1024px) {
  .clients-block__title {
    transform: rotate(-90deg);
    margin-left: -5.5vw;
    margin-left: -5%;
  }
}

@media (min-width: 1920px) {
  .clients-block__title {
    font-size: 6.625rem;
    margin-left: -6%;
  }
}
.clients-block__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 2.5rem;
  max-width: 1280px;

}
@media (min-width: 1024px) {
  .clients-block__grid {
    gap: 0 6%;
  }
}

.clients-block__item {
  max-width: 7.5rem;
  width: calc(50% - 1.25rem);
}
@media (min-width: 800px) {
  .clients-block__item {
    max-width: 10rem;
  }  
}
@media (min-width: 1440px) {
  .clients-block__item {
    max-width: 12.5rem; 
    width: auto;
  }
}




.slider-block {
  background-image: url(images/slider-bg.jpg);
  background-size: cover;
  position: relative;
  min-height: 100vh;
  background-color: var(--color-blue);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.slider-block-title {
  margin-bottom: 5rem;
}
.slider-block-slider {
  max-width: 45rem;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.swiper {
  max-width: 32.5rem;
}
.swiper-slide p {
  text-align: center;
}
.swiper-slide mark {
  padding: 0 1.25rem;
}
.swiper__slideTitle {
  margin-bottom: 2rem;
}
.swiper__slideTitle span {
  padding: 0 1.25rem;
}
.swiper__slideContent {
  margin-bottom: 5rem;
}
.swiper-button-next, .swiper-button-prev {
  transition: 0.3s opacity;
  opacity: 0.5;
}
.swiper-button-next:hover, .swiper-button-prev:hover {
  opacity: 1;
}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
  content: '◀';
}
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
  content: '▶';
}
@media (max-width: 799px) {
  .swiper-button-next, .swiper-button-prev {
    display: none;
  }
}










.contact-block {
  position: relative;
  /* min-height: 50rem;
  height: 100vh; */
}
.contact-block > .container {
  /* min-height: 52.5rem;
  height: 100vh; */
  padding-bottom: 7.5rem;

  display: flex;
  flex-direction: column;
  justify-content: center;
  /* align-items: center; */
}
@media (min-width: 1024px) {
  .contact-block > .container {
    flex-direction: row;
  }
}
.contact-block__title {
  font-size: 2.8125rem;
  
  color: var(--color-blue);
  white-space: nowrap;
  margin-bottom: 1rem;
  text-align: center;
  margin-top: -70px;
}
@media (min-width: 800px) {
  .contact-block__title {
  }
}
@media (min-width: 1024px) {
  .contact-block__title {
    transform: rotate(-180deg) translateX(50%);
    flex: 1 1 10%;
    margin-bottom: 0;
    writing-mode: vertical-lr;
    font-size: 5.4375rem;
    margin-top: 20px;
    margin-right: -120px;
    position: relative;
    z-index: -1;
  }
}
@media (min-width: 1920px) {
  .contact-block__title {
    font-size: 6.5625rem;
  }
}

.contact-block .rainbow-line {
  position: absolute;
  top: 0;
  left: 50%;
  height: 20%;
  transform: rotate(180deg);
}

@media (min-width: 1024px) {
  .contact-block .rainbow-line {
    left: 5.7%;
  }
}
@media (min-width: 1920px) {
  .contact-block .rainbow-line {
    left: 5.5%;
  }
}

.contact-block__content {
  background: var(--color-blue);
  background: radial-gradient(circle at left top, rgb(66, 133, 244) 0%, rgb(234, 67, 53) 100%);
  color: #fff;
  padding: 2.5rem;
  text-align: center;
}
@media (min-width: 1024px) {
  .contact-block__content {
    padding: 5rem 6.25rem;
    
    flex: 1 1 80%;
  }
}
@media (min-width: 1440px) {
  .contact-block__content {
    padding: 6.25rem;
  }
  
}
@media (min-width: 1920px) {
  .contact-block__content {
  }
}
.contact-block__content p {
  font-size: 1.0625rem;
  font-size: clamp(1.0625rem, 0.8375rem + 1.125vi, 2.1875rem); /* 17px - 35px */

}
@media (min-width: 1920px) {
  .contact-block__content p {
    font-size: 2.1875rem;
  }
}
.contact-block__content strong {
  color: #fff;
}
.contact-block__content a {
  text-decoration: none;
}
.contact-block__content a:hover {
  text-decoration: underline;
}


.contact-block__more {
  display: flex;
  flex-direction: column;
  gap: 7%;
  justify-content: center;
  margin-top: 2.5rem;
}
@media (min-width: 800px) {
  .contact-block__more {
    flex-direction: row;
  }
}
.contact-block__more img {
  max-width: 2.5rem;
}
@media (min-width: 800px) {
  .contact-block__more img {
    max-width: 3.125rem;
  } 
}
@media (min-width: 1440px) {
  .contact-block__more img {
    max-width: 3.75rem;
  } 
}













.footer__inner {
  background: url(images/footer-bg.png) no-repeat top center;
  background-size: contain;
  background-size: 100% 1.5625rem;
}
@media (min-width: 800px) {
  .footer__inner {
    
  }
}
@media (min-width: 1024px) {
  .footer__inner {
    background-size: 100% 2.1875rem;
  }
}
.footer__inner > .container {
  padding-top: 4.25rem;
  padding-bottom: 0.5625rem;
}
@media (min-width: 800px) {
  .footer__inner > .container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 3rem;
    padding-bottom: 1.125rem;
  }
}
@media (min-width: 1024px) {
  .footer__inner > .container {
    padding-top: 4.25rem;
  }
}
@media (min-width: 1920px) {
  .footer__inner > .container {
  
  }
}
.footer__logo {
  margin-bottom: 2.5rem;
}
.footer__logo img {
  width: 100%;
  max-width: 12.5rem;
}
@media (min-width: 800px) {
  .footer__logo {
    width: 33%;
    margin-bottom: 0;
  }
  .footer__logo img {
    max-width: 17.5625rem;
    margin-left: 0;
  }
}

.footer__legal {
  text-align: center;
}
@media (min-width: 800px) {
  .footer__legal {
    text-align: right;
  }
}
.footer__legal p {
  font-size: 1.125rem;
  margin-bottom: 0;
}

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