/* Extracted from https://cigma-design.webflow.io/ */
.wf-force-outline-none[tabindex="-1"]:focus{outline:none;}

/* Extracted from https://cigma-design.webflow.io/ */
:root {
    --font-from: 16;
    --font-to: 16;
    --vw-from: calc(1440 / 100);
    --vw-to: calc(2401 / 100);
    --coefficient: calc((var(--font-to) - var(--font-from)) / (var(--vw-to) - var(--vw-from)));
    --base: calc((var(--font-from) - var(--vw-from) * var(--coefficient)) / 16);
  }

  html {
    font-size: calc(var(--base) * 1rem + var(--coefficient) * 1vw);
  }

  @media screen and (max-width: 1440px) {
    :root {
      --font-from: 5.32;
      --font-to: 16;
      --vw-from: calc(479 / 100);
      --vw-to: calc(1440 / 100);
      }
  }

  @media screen and (max-width: 479px) {
    :root {
      --font-from: 16;
      --font-to: 19.65;
      --vw-from: calc(390 / 100);
      --vw-to: calc(479 / 100);
      }
  }

  @media screen and (max-width: 390px) {
    :root {
      --font-from: 0;
      --font-to: 16;
      --vw-from: calc(1 / 100);
      --vw-to: calc(390 / 100);
      }
  }

/* Extracted from https://cigma-design.webflow.io/ */
/* 1. ГРУППА СТИЛЕЙ: Общие настройки анимации и градиентный фон */

/* --- АНИМАЦИОННЫЕ ОСНОВЫ (Применяется ко всем трем кнопкам) --- */
.btn-gradient, .btn-up, .btn-circle {
    /* Обязательно установите display, padding, color и font-size в настройках Webflow */
    cursor: pointer;
    border: none; 
    overflow: hidden; /* Скрывает блеск до его появления */
    z-index: 1; 
    
    /* Плавность для основных эффектов (масштаб и тень) */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* --- ВИЗУАЛЬНЫЕ СТИЛИ (Градиент) --- */
/* Этот блок задает фон только для btn-gradient */
.btn-gradient {
    background: linear-gradient(90deg, #8E3B88 0%, #C5487B 100%);
    border-radius: 8px; 
}


/* 2. Создание эффекта "Блеска" с помощью ::before (Применяется ко всем трем кнопкам) */
.btn-gradient::before, .btn-up::before, .btn-circle::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* Начинаем за пределами кнопки слева */
    width: 100%;
    height: 100%;
    
    /* Градиентный блеск (диагональный, белый, полупрозрачный) */
    background: linear-gradient(
        90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.5) 50%, /* Яркое пятно */
        transparent 100%
    );
    
    /* Плавность перехода для эффекта блеска */
    transition: left 0.5s ease;
    z-index: 2; 
}


/* 3. Анимация при наведении (Ховере) */

/* Эффект: Сдвиг блеска (Применяется ко всем трем кнопкам) */
.btn-gradient:hover::before, .btn-up:hover::before, .btn-circle:hover::before {
    /* Сдвигаем блеск через всю кнопку, создавая эффект шиммера */
    left: 100%; 
}

/* Эффект: Легкое увеличение и тень для тактильного отклика (Применяется ко всем трем кнопкам) */
.btn-gradient:hover, .btn-up:hover, .btn-circle:hover {
    /* Добавляем rotate(0deg) к transform для предотвращения конфликтов поворота */
    transform: scale(1.05) rotate(0deg); 
    /* Тень тоже используем градиентную */
    box-shadow: 0 8px 15px rgba(142, 59, 136, 0.4); 
}

/* Дополнительно: Немного уменьшаем, когда пользователь нажимает (Применяется ко всем трем кнопкам) */
.btn-gradient:active, .btn-up:active, .btn-circle:active {
    /* Добавляем rotate(0deg) для безопасности */
    transform: scale(0.98) rotate(0deg);
    box-shadow: none;
}

/* Extracted from https://cigma-design.webflow.io/ */
.w-locales-item a[aria-current="page"] {
    display: none !important;
  }

/* Extracted from https://cigma-design.webflow.io/about-us */
/* 1. Настройки для SELECT и ОБЕРТКИ (без изменений) */
.select-field {
    /* Скрываем нативную стрелку */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2.5rem !important; 
    position: relative; 
    z-index: 2; 
    background-color: transparent; 
}
.select-wrapper {
    position: relative;
}

/* 2. Кастомная иконка (без изменений) */
.select-wrapper::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    width: 1.5rem; 
    height: 1.5rem;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.031 9.53068L12.531 17.0307C12.4614 17.1004 12.3787 17.1557 12.2876 17.1935C12.1966 17.2312 12.099 17.2506 12.0004 17.2506C11.9019 17.2506 11.8043 17.2312 11.7132 17.1935C11.6222 17.1557 11.5394 17.1004 11.4698 17.0307L3.96979 9.53068C3.82906 9.38995 3.75 9.19907 3.75 9.00005C3.75 8.80103 3.82906 8.61016 3.96979 8.46943C4.11052 8.32869 4.30139 8.24963 4.50042 8.24963C4.69944 8.24963 4.89031 8.32869 5.03104 8.46943L12.0004 15.4397L18.9698 8.46943C19.0395 8.39974 19.1222 8.34447 19.2132 8.30676C19.3043 8.26904 19.4019 8.24963 19.5004 8.24963C19.599 8.24963 19.6965 8.26904 19.7876 8.30676C19.8786 8.34447 19.9614 8.39974 20.031 8.46943C20.1007 8.53911 20.156 8.62183 20.1937 8.71288C20.2314 8.80392 20.2508 8.9015 20.2508 9.00005C20.2508 9.0986 20.2314 9.19618 20.1937 9.28722C20.156 9.37827 20.1007 9.46099 20.031 9.53068Z' fill='%238E3B88'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
    
    /* 💥 ДОБАВЛЕНИЕ: Плавный переход для вращения */
    transition: transform 0.3s ease;
}

/* 3. НОВЫЙ КЛАСС: Класс для вращения иконки на 180° */
.select-wrapper.is-open::after {
    transform: translateY(-50%) rotate(180deg);
}



.locale-img.en { background-image: url('https://cdn.prod.website-files.com/6911fe5cc21ff7d49c067183/6914bc8a8ab616fd1d7fce5a_en.png'); }

/* Reversed block-grid: swaps image and text columns */
.block-grid.is-reversed {
    direction: rtl;
}
.block-grid.is-reversed > * {
    direction: ltr;
}

.w-webflow-badge { display: none !important; }


/* --- Flip Card Implementation --- */
.flip-card {
    perspective: 1500px;
    transform-style: preserve-3d;
    display: grid !important;
    grid-template-areas: "card";
}
.card-front, .card-back {
    grid-area: card;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    height: 100%;
}
.card-front {
    z-index: 2;
    transform: rotateY(0deg);
}
.card-back {
    background-color: var(--_colors---gold) !important;
    display: flex !important;
    transform: rotateY(-180deg);
    z-index: 1;
    pointer-events: none;
}
.flip-card.is-flipped .card-front {
    transform: rotateY(180deg);
    pointer-events: none;
    z-index: 1;
}
.flip-card.is-flipped .card-back {
    transform: rotateY(0deg);
    z-index: 2;
    pointer-events: auto;
}


.flip-grid {
    align-items: stretch;
}
.grid-image {
    height: 100%;
    min-height: 400px;
    object-fit: cover;
}
.card-back {
    padding: 2rem !important;
    flex-direction: column;
}
.flip-card-tag.is-violet {
    margin-bottom: 1.5rem;
    background-color: var(--_colors---violet) !important;
    color: var(--_colors---white) !important;
}


/* Overriding Grid Proportions */
.card-front, .card-back {
    width: 100% !important;
    min-width: 0 !important;
}
.flip-grid {
    grid-template-columns: 1.5fr 1fr !important;
}
.flip-grid.is-wrap {
    grid-template-columns: 1fr 1.5fr !important;
}


/* --- CUSTOM STYLES FOR WORK-WITH-US CARDS (Why CIGMA DESIGN) --- */
.elementor-element-2f10b9e1 > .e-con-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
}

@media (max-width: 991px) {
  .elementor-element-2f10b9e1 > .e-con-inner {
    grid-template-columns: 1fr;
  }
}

.elementor-element-2f10b9e1 .e-child {
  background-color: var(--_colors---off-white, #f5f5f3);
  border-radius: 12px;
  padding: 40px 30px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
}

.elementor-element-2f10b9e1 .e-child:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.06);
}

.elementor-element-2f10b9e1 .e-child h6.elementor-heading-title {
  background-color: var(--_colors---violet, #7A2871);
  color: var(--_colors---white, #ffffff);
  padding: 6px 16px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 24px;
  display: inline-block;
}

.elementor-element-2f10b9e1 .e-child span.elementor-heading-title,
.elementor-element-2f10b9e1 .e-child h5.elementor-heading-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--_colors---black, #2E2A2F);
  margin-bottom: 12px;
  line-height: 1.3;
}

.elementor-element-2f10b9e1 .e-child p {
  font-size: 15px;
  color: var(--_colors---black, #2E2A2F);
  opacity: 0.8;
  line-height: 1.6;
  margin: 0;
}

/* FAQ SECTION STYLES */
.faq-section {
    max-width: 1000px;
    margin: 40px auto 80px;
    padding: 0 5%;
}
.faq-title {
    display: none;
}
.faq-item {
    border-bottom: 1px solid var(--_colors---black-10);
    padding: 24px 0;
}
.faq-item:first-child {
    border-top: 1px solid var(--_colors---black-10);
}
.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}
.faq-question h3 {
    margin: 0;
    font-size: 1.125rem;
    color: var(--_colors---black, #2E2A2F);
    font-weight: 500;
}
.faq-toggle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--_colors---gold, #d8b46a);
    position: relative;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin-left: 20px;
}
.faq-toggle::before, .faq-toggle::after {
    content: '';
    position: absolute;
    background-color: var(--_colors---gold, #d8b46a);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.faq-toggle::before {
    width: 12px;
    height: 1px;
}
.faq-toggle::after {
    width: 1px;
    height: 12px;
}
.faq-item.active .faq-toggle {
    transform: rotate(45deg);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, margin-top 0.4s ease;
}
.faq-item.active .faq-answer {
    margin-top: 16px;
    max-height: 2000px;
}
.faq-answer p, .faq-answer li {
    font-size: 0.95rem;
    color: var(--_colors---gray, #737373);
    line-height: 1.6;
    margin-bottom: 12px;
    font-weight: 400;
}
.faq-answer ul {
    padding-left: 20px;
    margin-bottom: 16px;
}

/* LEGAL PAGES STYLES */
.legal-section {
    max-width: 860px;
    margin: 0 auto;
    padding: 60px 24px 80px;
}
.legal-section h1 {
    margin-bottom: 40px;
}
.legal-section h2, .legal-section h3 {
    color: var(--_colors---violet);
    margin-top: 48px;
    margin-bottom: 16px;
    font-size: 1.5rem;
    font-weight: 600;
}
.legal-section p, .legal-section li {
    font-size: 1rem;
    color: var(--_colors---gray);
    line-height: 1.7;
    margin-bottom: 12px;
}
.legal-section ul {
    padding-left: 24px;
    margin-bottom: 20px;
}
.legal-section ul li {
    list-style: disc;
}