html, body {
    overflow-x: hidden;
}
.certificates-page {
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;
}
.certificates-heading {
    position: relative;
    margin-top: 7.70833vw;
    width: 89.58333vw;
    justify-content: center;
    align-items: flex-start;
    display: flex;
}

.certificates-heading-txt {
    color:  #0000E9;
    text-align: center;
    font-family: "Despair Display";
    font-size: 10.41667vw;
    font-style: normal;
    font-weight: 700;
    line-height: 80%; /* 8.33333vw */
    letter-spacing: -0.20833vw;
    text-transform: uppercase;
    z-index: 1;
}


  .certificates-about {
    margin-top: 5.208vw;
    width: 89.58333vw;
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;
  }
  
  .certificates-about-heading{
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;
    width: 48.02083vw;
    color:  #0A0A0A;
    text-align: center;
    /* Desktop/Headlines/H3 */
    font-family: "Despair Display";
    font-size: 3.33333vw;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 3.33333vw */
    letter-spacing: -0.06667vw;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .certificates-about-txt{
    margin-top: 1.5625vw;
    margin-right: 0;
    margin-left: auto;
    color:  #0A0A0A;
    font-family: "Inter";
    font-size: 1.25vw;
    font-style: normal;
    font-weight: 500;
    line-height: 110%; /* 1.375vw */
    letter-spacing: -0.0375vw;
    text-transform: uppercase;
    width: 44.27083vw;
  }
  .certificates-about-png {
    margin-top: 2.08333vw;
    gap: 1.04167vw;
    display: flex;
    justify-content: center; /* Центрирование по горизонтали */
    align-items: center; /* Центрирование по вертикали */
    position: relative;
    height: 38.54167vw;
    width: 89.58333vw;
  }
  
  .certificates-about-png::before {
    content: '';
    position: absolute;
    width: 8.85417vw;
    height: 8.85417vw;
    background: url('../images/circle_cleaning.png') center/contain no-repeat;
    animation: rotate var(--sticker-animation-speed, 10s) linear infinite;
  }
  
  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  .certificates-about-card {
    width: 44.27083vw;
    height: 38.54167vw;
  }
  
  .certificates-about-card.card-1 { /* Используем составной класс */
    background: url('../images/certificates_card_5.png') lightgray -0.05953vw -11.59974vw / 100.269% 172.839% no-repeat;
  }
  
  .certificates-about-card.card-2 { /* Используем составной класс */
    background: url('../images/certificates_card_6.png') lightgray 0vw -12.11719vw / 100% 136.284% no-repeat;
  }

  .certificates-about-text-group {
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;
    margin-top: 1.5625vw;
    gap: 1.09375vw;
    margin-right: 15.10417vw;
    margin-left: auto;
  }
  .certificates-about-txt2{
    color: #0A0A0A;
    font-family: "Inter";
    font-size: 0.9375vw;
    font-style: normal;
    font-weight: 400;
    line-height: 110%; /* 1.03125vw */
    letter-spacing: -0.01875vw;
    width: 29.16667vw;
  }
  .contact-link {
    background: none;
    border: none;
    padding: 0;
    margin-left: 0;
    margin-right: auto;
    text-decoration: none;
    display: flex;
    gap: 0.78125vw;
    color: #0A0A0A;
    font-family: "Inter";
    font-size: 1.25vw;
    font-style: normal;
    font-weight: 700;
    line-height: 110%; /* 1.375vw */
    letter-spacing: -0.025vw;
    text-transform: uppercase;
  }
  .arrow-icon{
  width: 1.458vw; /* 28/1920 */
  height: 1.458vw; /* 28/1920 */
  background-image: url('../images/arrow.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
  filter: invert(100%);
  }


  .contact-link:hover {
  color: #0000E9;
  }
  .contact-link:hover .arrow-icon{
      filter: 
    brightness(0) 
    invert(10%) 
    sepia(100%) 
    saturate(5000%) 
    hue-rotate(247deg) 
    brightness(94%) 
    contrast(143%);
  }
  .certificates-card-group{
    margin-top: 9.375vw;
    width: 89.58333vw;
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;
  }
  .certificates-card-group-text{
    color: #0A0A0A;
    font-family: "Inter";
    font-size: 0.9375vw;
    font-style: normal;
    font-weight: 400;
    line-height: 110%; /* 1.03125vw */
    letter-spacing: -0.01875vw;
    width: 29.16667vw;
    display: flex;
    margin-top: 1.5625vw;
    margin-right: 15.10417vw;
    margin-left: auto;
  }
  .certificates-png{
    margin-top: 2.08333vw;
    gap: 1.04167vw;
    display: flex;
    justify-content: center; /* Центрирование по горизонтали */
    align-items: center; /* Центрирование по вертикали */
    position: relative;
    width: 89.58333vw;
  }

  .certificates-card-number{
    margin-top: 2.08333vw;
    margin-left: 2.08333vw;
    color:  #0A0A0A;
    font-family: "Despair Display";
    font-size: 1.66667vw;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 1.66667vw */
    text-transform: uppercase;
  }
  .certificates-card-text-group{
    position: absolute;
    left: 50%;
    top: 13.33333vw;
    transform: translate(-50%);
    display: flex;
    flex-direction: column;
    gap: 1.04167vw;
  }

  /* Добавляем плавность для фона */
.certificates-card-png {
    width: 44.27083vw;
    height: 28.125vw;
    aspect-ratio: 85/54;
    background: url('../images/gift_2.png') lightgray 50% / cover no-repeat;
    position: relative;
    transition: background-image 0.5s ease; /* Плавная смена фона */
  }
  
  .certificates-card-png:hover {
    background: url('../images/gift_1.png') lightgray 50% / cover no-repeat;
  }
  
  /* Плавное появление кнопки */
  .design-link {
    border: none;
    display: none;
    padding: 0.41667vw 1.30208vw;
    justify-content: center;
    align-items: center;
    gap: 0.52083vw;
    border-radius: 2.08333vw;
    background: #0000E9;
    color: #FFF;
    font-family: "Inter";
    font-size: 1.04167vw;
    font-style: normal;
    font-weight: 500;
    line-height: 110%;
    letter-spacing: -0.02083vw;
    text-transform: uppercase;
    opacity: 0; /* Начальная прозрачность */
    transform: translateY(1.04167vw); /* Начальное смещение */
    transition: 
      opacity 0.4s ease,
      transform 0.4s ease,
      background 0.3s ease,
      color 0.3s ease,
      border 0.3s ease; /* Анимации для всех свойств */
  }
  
  .certificates-card-png:hover .design-link {
    display: flex; /* Показываем кнопку */
    opacity: 1; /* Конечная прозрачность */
    transform: translateY(0); /* Возвращаем на место */
  }
  
  .design-link:hover {
    background: #FFF;
    color: #0000E9;
    border: 0.05208vw solid #0000E9;
  }
  
  /* Плавность для текста (опционально) */
  .certificates-card-text {
    color: #0A0A0A;
    text-align: center;
    font-family: "Despair Display";
    font-size: 2.08333vw;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: -0.04167vw;
    text-transform: uppercase;
    width: 21.875vw;
    transition: transform 0.4s ease, color 0.4s ease; /* Анимация текста */
  }
  .certificates-about-heading.tablet{
    display: none;
  }
  @media (max-width: 1024px) {
    .certificates-heading {
        margin-top: 10.57031vw;
        width: 96.09375vw;
    }
    
    .certificates-heading-txt {
        font-size: 9.375vw;
        font-weight: 700;
        line-height: 80%; /* 7.5vw */
        letter-spacing: -0.1875vw;
        z-index: 1;
    }
    

    
      .certificates-about {
        margin-top: 3.90625vw;
        width: 96.09375vw;
      }
      
      .certificates-about-heading{
        width: 47.36328vw;
        font-family: "Despair Display";
        font-size: 3.125vw;
        font-style: normal;
        font-weight: 700;
        line-height: 100%; /* 3.125vw */
        letter-spacing: -0.0625vw;
      }
      .certificates-about-heading.deck{
        display: none;
      }
      .certificates-about-heading.tablet{
        display: flex;
      }
      .certificates-about-txt{
        margin-top: 1.95312vw;
        width: 47.26562vw;
        font-size: 1.36719vw;
        font-weight: 500;
        line-height: 110%; /* 1.50391vw */
        letter-spacing: -0.02734vw;
      }
      .certificates-about-png {
        margin-top: 2.92969vw;
        gap: 1.46484vw;
        height: 41.21094vw;
        width: 96.09375vw;
      }
      
      .certificates-about-png::before {
        width: 14.64844vw;
        height: 14.64844vw;
      }
      
      .certificates-about-card {
        width: 47.36328vw;
        height: 41.21094vw;
      }
      
      .certificates-about-card.card-1 { /* Используем составной класс */
        background: url('../images/certificates_card_5.png') lightgray -0.06367vw -12.40312vw / 100.269% 172.839% no-repeat;
      }
      
      .certificates-about-card.card-2 { /* Используем составной класс */
        background: url('../images/certificates_card_6.png') lightgray 0vw -12.95635vw / 100% 136.284% no-repeat;
      }
    
      .certificates-about-text-group {
        margin-top: 1.95312vw;
        gap: 2.92969vw;
        margin-right: 0;
      }
      .certificates-about-txt2{
        font-size: 1.36719vw;
        font-weight: 400;
        line-height: 120%; /* 1.64062vw */
        letter-spacing: -0.02734vw;
        width: 47.26562vw;
      }
      .contact-link {
        display: flex;
        padding:  1.95312vw 12.59766vw;
        justify-content: center;
        align-items: center;
        gap: 0.97656vw;
        border-radius: 3.90625vw;
        background:  #0000E9;
        color:  #FFF;
        font-size: 1.36719vw;
        font-style: normal;
        font-weight: 700;
        line-height: 110%; /* 1.50391vw */
        letter-spacing: -0.02734vw;
        text-transform: uppercase;
        border: 0.09766vw solid #0000E9;
        width: 100%;
      }
      .contact-link:hover {
        background: #FFF;
        color: #0000E9;
      }
      .arrow-icon{
        display: none;
      }
      .certificates-card-group{
        margin-top: 9.76562vw;
        width: 95.99609vw;
      }
      .certificates-card-group-text{
        font-size: 1.36719vw;
        font-style: normal;
        font-weight: 400;
        line-height: 120%; /* 1.64062vw */
        letter-spacing: -0.02734vw;
        width: 47.26562vw;
        margin-top: 1.95312vw;
        margin-right: 0;
        margin-left: auto;
      }
      .certificates-png{
        margin-top: 2.92969vw;
        gap: 1.46484vw;
        width: 95.99609vw;
      }
    
      .certificates-card-number{
        margin-top: 1.95312vw;
        margin-left: 1.95312vw;
        font-size: 1.95312vw;
        font-style: normal;
        font-weight: 700;
        line-height: 100%; /* 1.95312vw */
        text-transform: uppercase;
      }
      .certificates-card-text-group{
        top: 14.35547vw;
        gap: 0.97656vw;
      }
    
      /* Добавляем плавность для фона */
    .certificates-card-png {
        width: 47.26562vw;
        height: 30.27344vw;
        aspect-ratio: 242/155;
        background: url('../images/gift_1.png') lightgray 0vw -0.00117vw / 100.826% 100.008% no-repeat;
      }
      
      .certificates-card-png:hover {
        background: url('../images/gift_1.png') lightgray 0vw -0.00117vw / 100.826% 100.008% no-repeat;
      }
      
      /* Плавное появление кнопки */
      .design-link {
        display: flex;
        padding: 0.97656vw  2.44141vw;
        border-radius: 3.90625vw;
        font-size: 1.36719vw;
        font-style: normal;
        font-weight: 500;
        line-height: 110%; /* 1.50391vw */
        letter-spacing: -0.02734vw;
        text-transform: uppercase;
        opacity: 1; /* Начальная прозрачность */
      }
      
      .design-link:hover {
        background: #FFF;
        color: #0000E9;
        border: 0.09766vw solid #0000E9;
      }
      
      /* Плавность для текста (опционально) */
      .certificates-card-text {
        font-size: 2.34375vw;
        font-style: normal;
        font-weight: 700;
        line-height: 100%; /* 2.34375vw */
        letter-spacing: -0.04688vw;
        text-transform: uppercase;
        width: 23.4375vw;
      }
  }

  @media (max-width: 375px) {
    .certificates-heading {
        margin-top: 20.8vw;
        width: 90.93333vw;
    }
    
    .certificates-heading-txt {
      font-size: 10.66667vw;
      font-style: normal;
      font-weight: 700;
      line-height: 100%; /* 10.66667vw */
      letter-spacing: -0.21333vw;
      text-transform: uppercase;
    }
    

    
      .certificates-about {
        margin-top: 8vw;
        width: 94.66667vw;
      }
      
      .certificates-about-heading{
        width: 100%;
        font-size: 6.4vw;
        font-style: normal;
        font-weight: 700;
        line-height: 90%; /* 5.76vw */
        letter-spacing: -0.128vw;
        text-transform: uppercase;
        white-space: normal;
        text-align: left;
      }
      .certificates-about-heading span{
        margin-left: 0;
        margin-right: auto;
      }
    
      .certificates-about-txt{
        margin-top: 4vw;
        width: 100%;
        font-size: 3.73333vw;
        font-style: normal;
        font-weight: 500;
        line-height: 110%; /* 4.10667vw */
        letter-spacing: -0.07467vw;
        text-transform: uppercase;
      }
      .certificates-about-png {
        margin-top: 5.33333vw;
        gap: 2.66667vw;
        height: auto;
        width: 100%;
        flex-direction: column;
      }
      
      .certificates-about-png::before {
        width: 21.33333vw;
        height: 21.33333vw;
        left: 5.3333vw;
      }
      
      .certificates-about-card {
        width: 94.66667vw;
        height: 82.4vw;
      }
      
      .certificates-about-card.card-1 { /* Используем составной класс */
        background: url('../images/certificates_card_5.png') lightgray -0.1272vw -24.79973vw / 100.269% 172.839% no-repeat;
      }
      
      .certificates-about-card.card-2 { /* Используем составной класс */
        background: url('../images/certificates_card_6.png') lightgray 0vw -25.90587vw / 100% 136.284% no-repeat;
      }
    
      .certificates-about-text-group {
        margin-top: 4vw;
        gap: 5.33333vw;
        margin-right: 0;
      }
      .certificates-about-txt2{
        font-size: 3.73333vw;
        font-style: normal;
        font-weight: 400;
        line-height: 120%; /* 4.48vw */
        letter-spacing: -0.07467vw;
        width: 100%;
      }
      .contact-link {
        width: 94.66667vw;
        padding:  5.33333vw 34.4vw;
        gap: 2.66667vw;
        border-radius: 10.66667vw;
        font-size: 3.73333vw;
        font-style: normal;
        font-weight: 700;
        line-height: 110%; /* 4.10667vw */
        letter-spacing: -0.07467vw;
        text-transform: uppercase;
        border: 0.26667vw solid #0000E9;
        white-space: nowrap;
      }
      
      .certificates-card-group{
        margin-top: 21.33333vw;
        width: 94.66667vw;
      }
      .certificates-card-group-text{
        font-size: 3.73333vw;
        font-style: normal;
        font-weight: 400;
        line-height: 120%; /* 4.48vw */
        letter-spacing: -0.07467vw;
        width: 100%;
        margin-top: 4vw;
        margin-right: 0;
        margin-left: auto;
      }
      .certificates-png{
        margin-top: 5.33333vw;
        gap: 4vw;
        width: 100%;
        flex-direction: column;
      }
    
      .certificates-card-number{
        margin-top: 4vw;
        margin-left: 4vw;
        font-size: 3.2vw;
        font-style: normal;
        font-weight: 700;
        line-height: 100%; /* 3.2vw */
        text-transform: uppercase;
      }
      .certificates-card-text-group{
        top: 28.8vw;
        gap: 2.66667vw;
      }
    
      /* Добавляем плавность для фона */
    .certificates-card-png {
        width: 94.66667vw;
        height: 64vw;
        background: url('../images/gift_1.png') lightgray 0vw -0.0024vw / 100.826% 100.008% no-repeat;
      }
      
      .certificates-card-png:hover {
        background: url('../images/gift_1.png') lightgray 0vw -0.0024vw / 100.826% 100.008% no-repeat;
      }
      
      /* Плавное появление кнопки */
      .design-link {
        padding:  2.66667vw 6.66667vw;
        border-radius: 10.66667vw;
        font-size: 3.73333vw;
        font-style: normal;
        font-weight: 500;
        line-height: 110%; /* 4.10667vw */
        letter-spacing: -0.07467vw;
        text-transform: uppercase;
        opacity: 1; /* Начальная прозрачность */
        white-space: nowrap;
      }
      
      .design-link:hover {
        border: 0.26667vw solid #0000E9;
      }
      
      /* Плавность для текста (опционально) */
      .certificates-card-text {
        font-size: 5.33333vw;
        font-style: normal;
        font-weight: 700;
        line-height: 100%; /* 5.33333vw */
        letter-spacing: -0.10667vw;
        text-transform: uppercase;
        width: 66.66667vw;
      }
  }


   .cart-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    display: none;
    z-index: 999;
}

/* Анимация появления */
/* Базовые стили модалки (центрирование) */
.cart-modal_contact_us {
  position: fixed;
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #F4F4F4;
  z-index: 1000;
  box-shadow: 0 0 1.041666666666667vw rgba(0,0,0,0.3);
  padding: 5.2083vw 2.083333vw;
  display: none;
  overflow-y: auto;
  scrollbar-width: none;
}

/* Анимация появления (сверху в центр) */
@keyframes modalSlideIn_certificates {
  from {
    transform: translate(-50%, -100%); /* Начало: выше экрана */
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%); /* Конец: центр экрана */
    opacity: 1;
  }
}

/* Анимация закрытия (из центра вверх) */
@keyframes modalSlideOut_certificates {
  from {
    transform: translate(-50%, -50%); /* Начало: центр */
    opacity: 1;
  }
  to {
    transform: translate(-50%, -100%); /* Конец: выше экрана */
    opacity: 0;
  }
}

/* Классы для анимации */
.modal-slide-in_certificates {
  animation: modalSlideIn_certificates 0.4s ease-out forwards;
}

.modal-slide-out_certificates {
  animation: modalSlideOut_certificates 0.4s ease-out forwards;
}

.contact_us-modal-render {
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;
    gap: 2.083vw; /* 40px */
}

.contact_us-title {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    color: #0A0A0A;
    text-align: center;
    font-family: "Despair Display";
    font-size: 2.083vw; /* 40px */
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: -0.042vw; /* -0.8px */
    text-transform: uppercase;
}

.contact_us-modal-header {
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;
    gap: 1.042vw; /* 20px */
    width: 44.271vw; /* 850px */
}
.contact_us-title-wrapper {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 2.083vw; /* 40px */
}
.cart-modal-close {
    width: 2.5vw;
    height: 2.5vw;
    background: transparent url("../images/X.svg") center/1.25vw no-repeat;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    left: auto;
    right: 0;
    margin-left: auto;
    margin-right: 0;
}

.social-icons{
  display: flex;
  gap: 0.52083vw;
  width: 100%;
  flex-wrap: wrap; 
  justify-content: center;
}
.social-icon{
  width: 2.29167vw;
  height: 2.29167vw;
}
.social-icon img{
  width: 100%;
  height: 100%;
    filter: invert(100%);
}

@media (max-width: 1024px) {
    .cart-modal_contact_us {
        padding: 6.84vw 1.95vw; /* 70px 20px */
        box-shadow: 0 0 1.46vw rgba(0,0,0,0.3); /* 15px */
    }
    
    .contact_us-modal-render {
        gap: 2.93vw; /* 30px */
    }
    
    .contact_us-title {
        font-size: 3.13vw; /* 32px */
        letter-spacing: -0.06vw; /* -0.64px */
    }
    .cart-modal-close {
        width: 2.34vw;
        height: 2.34vw;
        background: transparent url("../images/X.svg") center/1.3vw no-repeat;
    }
    
    .contact_us-modal-header {
        gap: 1.46vw; /* 15px */
        width: 64.45vw; /* 660px */
    }
    
    .contact_us-title-wrapper {
        gap: 1.95vw; /* 20px */
    }
    .social-icons{
      display: flex;
      gap: 0.52083vw;
    }
    .social-icon{
      width: 3.90625vw;
      height: 3.90625vw;
    }

}

@media (max-width: 375px) {

    .cart-modal-close {
        width: 6.4vw;
        height: 6.4vw;
        background: transparent url("../images/X.svg") center/3.4vw no-repeat;
    }
    .cart-modal_contact_us {
        height: 100vh;

        overflow-y: auto;
        box-shadow: 0 0 4vw rgba(0,0,0,0.3); /* 15px → 4vw */
        padding: 5.333vw 2.667vw 54.667vw 2.667vw; /* 20px 10px 205px 10px */
        width: 100%;
    }
    .cart-contact_us::-webkit-scrollbar {
        display: none;
    }
    
    .contact_us-modal-render {
        gap: 8vw; /* 30px → 8vw */
    }
    
    .contact_us-title {
        font-size: 6.4vw; /* 24px → 6.4vw */
        letter-spacing: -0.128vw; /* -0.48px → -0.128vw */
        margin-top: 18.667vw; /* 70px → 18.667vw */
    }
    
    .contact_us-modal-header {
        gap: 2.667vw; /* 10px → 2.667vw */
        width: 100%;
    }
    
    .contact_us-title-wrapper {
        gap: 3.333vw; /* 12.5px → 3.333vw */
        align-items: flex-start;
    }

    .social-icons{
      display: flex;
      gap: 2.13333vw;
    }
    .social-icon{
      width: 10.66667vw;
      height: 10.66667vw;
    }
}