@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
@use "sass:math";
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  padding: 0; }

html {
  font-size: 16px;
  overflow-x: hidden; }

body {
  font-family: "Roboto", sans-serif;
  color: #000000;
  background-color: #272727;
  overflow-x: hidden;
  color: #ffffff; }

.container {
  max-width: 100%;
  padding-inline: 100px; }

nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  padding: 48px 0; }

.hero-about-wrapper {
  position: relative; }

.hero {
  min-height: 60vh;
  padding-block: 200px 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  position: relative; }
  .hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../assets/top-circles-1.svg");
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    z-index: -1; }
  .hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    max-width: 940px;
    margin-inline: auto; }
    .hero__content h2 {
      font-family: "Roboto Serif", sans-serif;
      font-weight: 500;
      line-height: 1.2;
      color: #ffffff;
      text-align: center; }
      .hero__content h2 {
        font-size: 40px; }
        @media screen and (min-width: 420px) {
          .hero__content h2 {
            font-size: calc(40px + 20 * ((100vw - 420px) / 1180)); } }
        @media screen and (min-width: 1600px) {
          .hero__content h2 {
            font-size: 60px; } }
    .hero__content h5 {
      font-family: "Roboto Serif", sans-serif;
      font-weight: 500;
      color: #CF3339;
      text-align: center;
      letter-spacing: -0.34px; }
      .hero__content h5 {
        font-size: 26px; }
        @media screen and (min-width: 420px) {
          .hero__content h5 {
            font-size: calc(26px + 8 * ((100vw - 420px) / 1180)); } }
        @media screen and (min-width: 1600px) {
          .hero__content h5 {
            font-size: 34px; } }
    .hero__content p {
      font-weight: 300;
      line-height: 147%;
      color: #ffffff;
      text-align: center;
      letter-spacing: -0.16px; }
      .hero__content p {
        font-size: 18px; }
        @media screen and (min-width: 420px) {
          .hero__content p {
            font-size: calc(18px + 4 * ((100vw - 420px) / 1180)); } }
        @media screen and (min-width: 1600px) {
          .hero__content p {
            font-size: 22px; } }
    .hero__content button {
      all: unset;
      display: block;
      font-size: 16px;
      font-weight: 400;
      color: #ffffff;
      cursor: pointer;
      transition: all 0.3s ease-in-out;
      border-radius: 4px;
      background-color: #CF3339;
      padding: 9px 32px;
      min-width: 250px;
      text-align: center;
      cursor: initial; }

.about {
  padding: 0 0 64px 0; }
  .about__content h2 {
    font-family: "Roboto Serif", sans-serif;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 16px;
    text-align: start;
    margin-bottom: 48px; }
    .about__content h2 {
      font-size: 30px; }
      @media screen and (min-width: 420px) {
        .about__content h2 {
          font-size: calc(30px + 10 * ((100vw - 420px) / 1180)); } }
      @media screen and (min-width: 1600px) {
        .about__content h2 {
          font-size: 40px; } }
  .about__content p {
    flex: 0 0 45%;
    font-weight: 300;
    line-height: 147%;
    color: #ffffff;
    letter-spacing: -0.16px; }
    .about__content p {
      font-size: 18px; }
      @media screen and (min-width: 420px) {
        .about__content p {
          font-size: calc(18px + 4 * ((100vw - 420px) / 1180)); } }
      @media screen and (min-width: 1600px) {
        .about__content p {
          font-size: 22px; } }
    .about__content p span {
      font-weight: 700; }
  .about__content__text {
    display: flex;
    gap: 10%; }

.why-choose-us__content {
  margin-bottom: 48px; }
  .why-choose-us__content h2 {
    font-family: "Roboto Serif", sans-serif;
    font-weight: 500;
    color: #ffffff; }
    .why-choose-us__content h2 {
      font-size: 30px; }
      @media screen and (min-width: 420px) {
        .why-choose-us__content h2 {
          font-size: calc(30px + 10 * ((100vw - 420px) / 1180)); } }
      @media screen and (min-width: 1600px) {
        .why-choose-us__content h2 {
          font-size: 40px; } }
.why-choose-us__items-wrapper {
  display: flex;
  flex-wrap: wrap; }
.why-choose-us__item {
  position: relative;
  margin-bottom: 48px; }
  .why-choose-us__item::after {
    content: '';
    position: absolute;
    top: 0;
    right: 8px;
    width: 1px;
    height: 100%;
    background-color: #666666; }
  .why-choose-us__item:last-child::after {
    display: none; }
  .why-choose-us__item h3 {
    font-weight: 700;
    color: #CF3339;
    margin-bottom: 16px;
    line-height: 1.1;
    padding-inline-end: 8px; }
    .why-choose-us__item h3 {
      font-size: 20px; }
      @media screen and (min-width: 420px) {
        .why-choose-us__item h3 {
          font-size: calc(20px + 2 * ((100vw - 420px) / 1180)); } }
      @media screen and (min-width: 1600px) {
        .why-choose-us__item h3 {
          font-size: 22px; } }
  .why-choose-us__item p {
    font-size: 15px;
    font-weight: 300;
    color: #ffffff;
    line-height: 1.6;
    padding-inline-end: 8px; }

.solutions {
  padding: 64px 0;
  overflow-x: hidden; }
  .solutions__title-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 48px; }
    .solutions__title-section__content h2 {
      font-family: "Roboto Serif", sans-serif;
      font-weight: 500;
      color: #ffffff;
      margin-bottom: 16px; }
      .solutions__title-section__content h2 {
        font-size: 30px; }
        @media screen and (min-width: 420px) {
          .solutions__title-section__content h2 {
            font-size: calc(30px + 10 * ((100vw - 420px) / 1180)); } }
        @media screen and (min-width: 1600px) {
          .solutions__title-section__content h2 {
            font-size: 40px; } }
    .solutions__title-section__content p {
      font-size: 20px;
      font-weight: 200;
      color: #ffffff;
      opacity: 0.8;
      line-height: 1;
      letter-spacing: -0.2px; }
  .solutions__swiper-arrows {
    display: flex;
    gap: 16px; }
    .solutions__swiper-arrows .swiper-button-prev,
    .solutions__swiper-arrows .swiper-button-next {
      position: static;
      margin: 0;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: #CF3339;
      backdrop-filter: blur(10px);
      transition: all 0.3s ease; }
      .solutions__swiper-arrows .swiper-button-prev:after,
      .solutions__swiper-arrows .swiper-button-next:after {
        width: 30px;
        font-weight: bold;
        color: transparent;
        background-image: url("../assets/arrow-right.svg");
        background-size: 30px 15px;
        background-position: center;
        background-repeat: no-repeat; }
      .solutions__swiper-arrows .swiper-button-prev:hover,
      .solutions__swiper-arrows .swiper-button-next:hover {
        transform: scale(1.05); }
      .solutions__swiper-arrows .swiper-button-prev.swiper-button-disabled,
      .solutions__swiper-arrows .swiper-button-next.swiper-button-disabled {
        opacity: 0.3;
        cursor: not-allowed; }
        .solutions__swiper-arrows .swiper-button-prev.swiper-button-disabled:hover,
        .solutions__swiper-arrows .swiper-button-next.swiper-button-disabled:hover {
          transform: none;
          background: rgba(255, 255, 255, 0.1);
          border-color: rgba(255, 255, 255, 0.2); }
    .solutions__swiper-arrows .swiper-button-prev:after {
      transform: rotate(180deg); }
  .solutions__swiper-wrapper {
    position: relative; }
    .solutions__swiper-wrapper .swiper {
      overflow: visible;
      pointer-events: auto; }
      .solutions__swiper-wrapper .swiper-wrapper {
        align-items: stretch;
        pointer-events: auto; }
      .solutions__swiper-wrapper .swiper-slide {
        height: auto;
        transition: all 0.6s ease;
        cursor: grab;
        min-height: 380px; }
        .solutions__swiper-wrapper .swiper-slide:active {
          cursor: grabbing; }
  .solutions__swiper-slide__content {
    background: #1d1e1c;
    border-radius: 12px;
    padding: 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    pointer-events: none; }
    .solutions__swiper-slide__content:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.2);
      transform: translateY(-5px); }
    .solutions__swiper-slide__content h3 {
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      color: #CF3339;
      margin-bottom: 24px;
      line-height: 1.1;
      letter-spacing: -0.4px; }
      .solutions__swiper-slide__content h3 {
        font-size: 30px; }
        @media screen and (min-width: 420px) {
          .solutions__swiper-slide__content h3 {
            font-size: calc(30px + 10 * ((100vw - 420px) / 1180)); } }
        @media screen and (min-width: 1600px) {
          .solutions__swiper-slide__content h3 {
            font-size: 40px; } }
    .solutions__swiper-slide__content p {
      font-size: 16px;
      font-weight: 300;
      color: #ffffff;
      line-height: 1.2;
      flex-grow: 1;
      letter-spacing: -0.16px; }
    .solutions__swiper-slide__content ul {
      list-style: none;
      padding: 0;
      margin: 0; }
      .solutions__swiper-slide__content ul li {
        font-size: 16px;
        font-weight: 300;
        color: #ffffff;
        line-height: 1.2;
        letter-spacing: -0.16px;
        position: relative;
        padding-left: 16px;
        margin-bottom: 8px; }
        .solutions__swiper-slide__content ul li::before {
          content: '•';
          position: absolute;
          left: 0;
          top: 0; }
  .solutions__progress {
    margin-top: 48px;
    position: relative;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px; }
  .solutions__progress-text {
    font-size: 16px;
    font-weight: 300;
    color: #ffffff;
    line-height: 1.2;
    letter-spacing: -0.16px;
    margin-top: 32px;
    max-width: 880px;
    font-style: italic; }
  .solutions .swiper-scrollbar-horizontal {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 2px !important; }
    .solutions .swiper-scrollbar-horizontal .swiper-scrollbar-drag {
      background: #CF3339;
      cursor: grab !important;
      transition: all 0.3s ease !important;
      height: 12px;
      top: calc(50% - 6px);
      border-radius: 10px; }
      .solutions .swiper-scrollbar-horizontal .swiper-scrollbar-drag:active {
        cursor: grabbing !important; }

.how-we-work {
  padding: 128px 0 0 0; }
  .how-we-work__content h2 {
    font-family: "Roboto Serif", sans-serif;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 48px; }
    .how-we-work__content h2 {
      font-size: 30px; }
      @media screen and (min-width: 420px) {
        .how-we-work__content h2 {
          font-size: calc(30px + 10 * ((100vw - 420px) / 1180)); } }
      @media screen and (min-width: 1600px) {
        .how-we-work__content h2 {
          font-size: 40px; } }
  .how-we-work__items-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 64px; }
  .how-we-work__item {
    flex: 0 0 190px;
    max-width: 190px;
    display: flex;
    flex-direction: column; }
    .how-we-work__item h3 {
      font-weight: 700;
      color: #CF3339;
      margin-bottom: 24px;
      line-height: 1.1;
      letter-spacing: -0.4px;
      text-align: center;
      flex-grow: 1; }
      .how-we-work__item h3 {
        font-size: 20px; }
        @media screen and (min-width: 420px) {
          .how-we-work__item h3 {
            font-size: calc(20px + 4 * ((100vw - 420px) / 1180)); } }
        @media screen and (min-width: 1600px) {
          .how-we-work__item h3 {
            font-size: 24px; } }
    .how-we-work__item__rounded-text {
      border: 1px solid #606060;
      border-radius: 50%;
      padding: 16px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0; }
      .how-we-work__item__rounded-text p {
        font-weight: 300;
        color: #ffffff;
        line-height: 1.2;
        letter-spacing: -0.16px;
        width: 100%;
        height: auto;
        position: relative;
        text-align: center; }
        .how-we-work__item__rounded-text p {
          font-size: 16px; }
          @media screen and (min-width: 420px) {
            .how-we-work__item__rounded-text p {
              font-size: calc(16px + 4 * ((100vw - 420px) / 1180)); } }
          @media screen and (min-width: 1600px) {
            .how-we-work__item__rounded-text p {
              font-size: 20px; } }

.contact {
  padding: 128px 0 48px 0;
  position: relative;
  min-height: 80vh; }
  .contact__content {
    display: flex;
    align-items: flex-start; }
  .contact__form-section {
    flex: 0 0 50%;
    max-width: 50%;
    background: #1d1e1c;
    padding: 135px 80px 135px 80px;
    border-radius: 8px 0 0 8px;
    height: 80vh;
    min-height: 620px; }
    .contact__form-section h2 {
      font-family: "Roboto Serif", sans-serif;
      font-weight: 400;
      color: #ffffff;
      margin-bottom: 48px;
      line-height: 1.2; }
      .contact__form-section h2 {
        font-size: 32px; }
        @media screen and (min-width: 420px) {
          .contact__form-section h2 {
            font-size: calc(32px + 10 * ((100vw - 420px) / 1180)); } }
        @media screen and (min-width: 1600px) {
          .contact__form-section h2 {
            font-size: 42px; } }
  .contact__info {
    display: flex;
    flex-direction: column;
    gap: 32px; }
    .contact__info a {
      font-weight: 400;
      color: #ffffff;
      letter-spacing: -0.22px;
      text-decoration: underline;
      width: fit-content;
      transition: all 0.3s ease; }
      .contact__info a {
        font-size: 18px; }
        @media screen and (min-width: 420px) {
          .contact__info a {
            font-size: calc(18px + 4 * ((100vw - 420px) / 1180)); } }
        @media screen and (min-width: 1600px) {
          .contact__info a {
            font-size: 22px; } }
      .contact__info a:hover {
        color: #CF3339; }
    .contact__info h5 {
      font-weight: 700;
      color: #ffffff;
      letter-spacing: -0.22px; }
      .contact__info h5 {
        font-size: 16px; }
        @media screen and (min-width: 420px) {
          .contact__info h5 {
            font-size: calc(16px + 4 * ((100vw - 420px) / 1180)); } }
        @media screen and (min-width: 1600px) {
          .contact__info h5 {
            font-size: 20px; } }
    .contact__info ul {
      list-style: none;
      padding: 0;
      margin: 0; }
      .contact__info ul li {
        font-weight: 200;
        color: #ffffff;
        letter-spacing: -0.22px;
        position: relative;
        padding-left: 24px;
        margin-bottom: 8px; }
        .contact__info ul li {
          font-size: 16px; }
          @media screen and (min-width: 420px) {
            .contact__info ul li {
              font-size: calc(16px + 4 * ((100vw - 420px) / 1180)); } }
          @media screen and (min-width: 1600px) {
            .contact__info ul li {
              font-size: 20px; } }
        .contact__info ul li::before {
          content: '';
          position: absolute;
          left: 0;
          top: 3px;
          background-image: url("../assets/location-pin.svg");
          background-size: 18px 18px;
          background-position: center;
          background-repeat: no-repeat;
          width: 18px;
          height: 18px; }
  .contact__form {
    display: flex;
    flex-direction: column;
    gap: 24px; }
  .contact__form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative; }
    .contact__form-group label {
      font-size: 16px;
      font-weight: 300;
      color: #ccc6c6; }
    .contact__form-group input,
    .contact__form-group textarea {
      all: unset;
      padding: 16px 24px;
      background: #343333;
      border: 1px solid #8d8d8d;
      border-radius: 4px;
      color: #ffffff;
      font-size: 14px;
      font-weight: 300;
      transition: all 0.3s ease;
      backdrop-filter: blur(10px); }
      .contact__form-group input::placeholder,
      .contact__form-group textarea::placeholder {
        color: #8D8D8D; }
      .contact__form-group input:focus,
      .contact__form-group textarea:focus {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.4);
        outline: none;
        box-shadow: 0 0 0 2px #343333; }
    .contact__form-group textarea {
      resize: vertical;
      min-height: 120px;
      font-family: "Roboto", sans-serif; }
    .contact__form-group input.error,
    .contact__form-group textarea.error {
      border-color: #e74c3c;
      background: rgba(231, 76, 60, 0.1);
      box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.2); }
      .contact__form-group input.error:focus,
      .contact__form-group textarea.error:focus {
        border-color: #e74c3c;
        background: rgba(231, 76, 60, 0.15);
        box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.3); }
    .contact__form-group .error-message {
      position: absolute;
      bottom: -22px;
      left: 0;
      color: #e74c3c;
      font-size: 14px;
      font-weight: 300;
      margin: 0;
      padding: 0;
      line-height: 1.2;
      z-index: 10;
      transition: opacity 0.3s ease;
      pointer-events: none;
      opacity: 1;
      transform: translateY(0); }
      .contact__form-group .error-message.fade-in {
        animation: errorFadeIn 0.3s ease forwards; }
      .contact__form-group .error-message.fade-out {
        animation: errorFadeOut 0.3s ease forwards; }
  .contact .form-message {
    border-radius: 4px;
    margin-top: 15px;
    text-align: center;
    font-weight: 300;
    font-size: 14px;
    transition: all 0.3s ease;
    position: absolute;
    bottom: -30px;
    left: 0;
    animation: messageSlideIn 0.3s ease forwards; }
    .contact .form-message.success {
      color: #27ae60; }
    .contact .form-message.error {
      color: #e74c3c; }
  .contact__submit-btn {
    background: #CF3339;
    border: none;
    color: #ffffff;
    padding: 16px 32px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 300;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    align-self: flex-start;
    box-shadow: 0 4px 15px rgba(207, 51, 57, 0.3);
    margin-top: 16px;
    min-width: 230px;
    max-width: 100%; }
    .contact__submit-btn:hover {
      background: #b0292f;
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(207, 51, 57, 0.4); }
    .contact__submit-btn:active {
      transform: translateY(0); }
  .contact__image-section {
    flex: 0 0 50%;
    position: relative;
    border-radius: 0 8px 8px 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1d1e1c;
    max-height: 80vh;
    min-height: 620px; }
  .contact__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center; }
  .contact__logo-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 2; }
  .contact__logo {
    width: 280px;
    height: auto; }
  .contact_rights {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 48px; }
    .contact_rights__contact-info {
      display: flex;
      gap: 64px; }
      .contact_rights__contact-info a {
        font-size: 16px;
        font-weight: 300;
        color: #ffffff;
        letter-spacing: -0.16px;
        position: relative;
        transition: all 0.3s ease;
        text-decoration: none;
        line-height: 1; }
        .contact_rights__contact-info a:hover {
          color: #CF3339; }
        .contact_rights__contact-info a::after {
          content: '';
          display: block;
          width: 1px;
          height: 100%;
          background: #ffffff;
          position: absolute;
          top: 0;
          right: -32px; }
        .contact_rights__contact-info a:last-child::after {
          display: none; }
    .contact_rights p {
      font-size: 16px;
      font-weight: 300;
      color: #ffffff;
      letter-spacing: -0.16px; }

@keyframes errorFadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
@keyframes errorFadeOut {
  from {
    opacity: 1;
    transform: translateY(0); }
  to {
    opacity: 0;
    transform: translateY(-5px); } }
@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
.solutions-contact-wrapper {
  position: relative; }
  .solutions-contact-wrapper::after {
    content: '';
    position: absolute;
    top: 18%;
    right: 0;
    width: 800px;
    height: 80%;
    background-image: url("../assets/side-circles-1.svg");
    background-size: contain;
    background-position: right top;
    background-repeat: no-repeat;
    z-index: -1;
    opacity: 0.3; }
  .solutions-contact-wrapper section {
    position: relative;
    z-index: 1; }

/*# sourceMappingURL=main.css.map */