html {
    scroll-behavior: smooth;
}

.section-padding {
    padding-top: 96px;
}

/* Стили для верхнего меню */
.top-menu {
    position: fixed;
    top: -80px;
    left: 0;
    right: 0;
    background-color: var(--absolute-200);
    z-index: 999;
    transition: top 0.3s;
  }
  
  .top-menu ul {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    height: 48px;
  }
  
  .top-menu li {
    margin: 0 20px;
  }
  
  .top-menu a {
    color: #fff;
    text-decoration: none;
  }
  
  /* Стили для основного содержимого страницы */
  main {
    margin-top: 120px;
    /* Задайте свойство margin-top, чтобы сместить основное содержимое страницы вниз, чтобы оно не перекрывало верхнее меню */
  }  
  
  .top-menu a.active {
    color: var(--green-300);
  }

:root {
    --absolute-200: #000000;
    --absolute-100: #FFFFFF;
    
    --tone-30: rgba(0, 0, 0, 0.3);

    --green-300: #D9FD51;
    --pink-300: #F096E3;
    --pink-200: #F7CDE5;

    --bg: #EFEFEF;
  
    --border-radius-L: 28px;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--bg);
    font-family: 'Inter', sans-serif;
    margin: 0px;
    overflow-x: hidden;
}

h1 {
    font-family: 'Roboto Flex', sans-serif;
    font-variation-settings: 'opsz' 8, 'GRAD' 0, 'slnt' 0, 'XTRA' 533, 'XOPQ' 96, 'YOPQ' 79, 'YTLC' 514, 'YTUC' 712, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738;
    font-size: 72px;
    line-height: 87px;
    text-align: center;
    margin: 0px;
    letter-spacing: -0.02em;
}

h2 {
    margin: 0px;
}

h3 {
    margin: 0px 0px;
}

h4 {
    margin: 0px;
}

p {
    margin: 0px;
}

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

.text-m {
    font-size: 37px;
    font-weight: 500;
}

.text-s {
    font-size: 26px;
}

.text-sm {
    font-size: 16px;
}

.text-button {
    font-weight: 600;
}

.text-s-label {
    font-size: 26px;
    line-height: 24px;
    text-transform: uppercase;
}

.width {
    width: 100%;
    max-width: 1024px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* gap: 96px */
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    /* gap: 96px; */
}

section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.screen-01 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 72px;
}

.descriptor-text {
    display: flex;
    width: 100%;
    justify-content: flex-end;
}

.img-descriptor {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.text-width {
    max-width: 475px;
    margin: 0px;
}

.screen-03 {
    display: flex;
    gap: 72px;
}

.botton-off {
    border: 0px;
}

.button-main {
    padding: 16px 24px;
    border: 2px solid var(--absolute-200);
    border-radius: 50px;
    background-color: var(--green-300);
    color: var(--absolute-200);
    line-height: 26px;
    text-decoration: none;
    text-align: center;
    font-family: 'Inter', sans-serif;
}

.button-main:hover {
    background-color: var(--pink-300);
    box-shadow: 4px 6px 0px #000000;
}

.button-outline {
    padding: 16px 24px;
    border: 2px solid var(--absolute-200);
    border-radius: 50px;
    color: var(--absolute-200);
    line-height: 26px;
    text-decoration: none;
    text-align: center;
}

.button-outline:hover {
    background-color: var(--pink-300);
    box-shadow: 4px 6px 0px #000000;
}

.button-outlined {
    padding: 8px 12px;
    border: 2px solid var(--absolute-200);
    border-radius: 50px;
    color: var(--absolute-200);
    line-height: 26px;
    text-decoration: none;
    text-align: center;
}

.text-line-through {
    text-decoration-line: line-through;
    color: var(--tone-30);
}

.logo-name-product {
    display: flex;
    gap: 8px;
}

.label-info {
    padding: 8px 12px;
    border: 2px solid #000;
    border-radius: 24px;
}

.header {
    width: 100%;
}

.languages {
    display: flex;
    align-items: center;
    gap: 8px;
}

.transform-rotate {
    transform: rotate(-8deg);
}

.ui-plugin {
    position: absolute;
    margin-top: 205px;
    width: 600px;
    height: 597px;
    outline: 0px;
    border: 1px solid #e3e3e3;
    border-radius: 13px;
}

.header-logo-languages {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 21px 0px 0px;
}

.marker-h1-anim {
    padding: 0px 8px;
    border: 2px solid #000;
    border-radius: 16px 16px 0px 16px;
}

.marker-h1-one {
    padding: 0px 8px;
    border: 2px solid #000;
    border-radius: 0px 16px 16px 16px;
}

.info {
    padding: 32px;
    border-radius: var(--border-radius-L);
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
}

.info-accedental{
    background-color: var(--absolute-200);
    color: var(--absolute-100);
}

.info-transparent {
    border: 2px solid var(--absolute-200);
}

.line {
    height: 1px;
    width: 100%;
    background-color: var(--absolute-100);
}

.line-black {
    height: 1px;
    width: 100%;
    background-color: var(--absolute-200);
}

.animation-examples {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    justify-content: center;
}

.screen-04 {
    gap: 20px;
}

.screen-05 {
    gap: 32px;
}

.blur-effect {
    margin-top: -230px;
    margin-bottom: -200px;
}

.advantages {
    display: flex;
    gap: 24px;
    width: 100%;
}

.block-colum-05 {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 50%;
}

.size-time-anima {
    width: 111px;
}

.bg-green {
    background-color: var(--green-300);
    border: 0px;
}

.bg-pink {
    background-color: var(--pink-200);
    border: 0px;
}

.reviews {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px; 
}

.export-heading {
    display: flex;
    align-items: center;
    gap: 16px;
}

.formats {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.support-svg {
    display: flex;
    width: 100%;
    gap: 72px;
}

.functions-plan {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.section-functions {
    display: flex;
    gap: 16px;
}

.text-color-gray {
    color: var(--tone-30);
}

.functions-plan-free-plan {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.stretch {
    height: 100%;
    display: flex;
    justify-content: space-between;
}

.info-reviews {
    display: flex;
    gap: 16px;
    flex-direction: column;
}

.logo-svg-motion {
    /* установка ширины и высоты элемента */
    width: 128px;
    height: 128px;
  
    /* установка начального угла поворота */
    transform: rotate(0deg);
  
    /* установка продолжительности анимации */
    animation-duration: 4s;
  
    /* установка типа анимации */
    animation-timing-function: cubic-bezier(0.02, 0.02, 1, 1);
  
    /* установка бесконечной повторяемости анимации */
    animation-iteration-count: infinite;

    /* запуск анимации */
    animation-name: rotate;
  }

  @keyframes rotate {
    /* установка начального угла поворота */
    from {
      transform: rotate(0deg);
    }
    /* установка конечного угла поворота */
    to {
      transform: rotate(-360deg);
    }
  }

.plugin-name {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}

.social-network-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.social-network {
    display: flex;
    gap: 16px;
}

.product-name {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

.size-ava-plugin {
    width: 50px;
}

.product {
    display: flex;
    justify-content: space-between;
    gap: 24px;
}

.product-davv {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    width: 50%;
}

.product-name {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

.footer {
    padding: 48px 24px;
    text-align: center;
    color: var(--tone-30);
}
.label-info{
    text-align: center;
}

.pop-up-payment-header_politic{
    font-size: 15px;
    font-weight: 600;
    color: gray;
    text-align: center;
    line-height: 125%;
  }
  .pop-up-payment-header_politic_link{
    color: #3a3a3a;
    text-decoration: none;
  }
  .pop-up-payment-header_politic_link:hover{
    text-decoration: underline;
  }
  

@media screen and (max-width: 1024px) {
    .display-none {
        display: none;
    }
    .header-logo-languages {
        justify-content: center;
    }
    main{
        margin-top: 72px;
    }
    .info {
        margin: 0px 24px;
    }
    .advantages {
        flex-direction: column;
    }
    .advantages .block-colum-05 {
        width: 100%;
    }
    .info-reviews{
        padding: 0px 24px;
    }
    .reviews{
        padding: 0px 24px;
    }
    .formats img {
        margin: 0px 24px;
    }
    .support-svg {
        justify-content: center;
    } 
    h1 {
        font-size: 45px;
        line-height: 54px;
    }
    .text-m {
        font-size: 23px;
    }
    .text-s {
        font-size: 16px;
    }
    .section-padding {
        padding-top: 72px;
    }

    @media screen and (max-width: 834px) {
        .display-none-menu {
            display: none;
        }
        .display-none-video {
            display: none;
        }
        .desktop-size {
            width: 94%;
        }
        .demonstration-size {
            width: 99%;
        }
        .demonstration-size-ui {
            width: 93%;
        }
        .blur-effect {
            margin: -115px 0px;
        }
        .descriptor-text p {
            padding-right: 24px;
        }
    }

    @media screen and (max-width: 430px) {
        h1 {
            font-size: 28px;
            line-height: 35px;
        }
        .screen-01 {
            gap: 40px;
        }
        .button-main {
            padding: 8px 24px;
            font-family: 'Inter', sans-serif;
        }
        .button-outline{
            padding: 8px 24px;
        }
        .section-padding {
            padding-top: 48px;
        }
        .display-none-ui-figma {
            display: none;
        }
        .ui-plugin {
            position: relative;
            padding-top: 0px;
            width: 94%;
        }
        .info {
            margin: 0px 12px;
            padding: 24px;
            gap: 16px;
            border-radius: 14px;
        }
        .display-none-link {
            display: none;
        }
        .text-m {
            font-size: 14px;
        }
        .blur-effect {
            margin: -75px 0px;
        }
        .descriptor-text {
            justify-content: flex-start;
            padding-left: 24px;
            justify-content: center;
            text-align: center;
        }
        .text-s {
            /* font-size: 10px; */
        } 
        .text-s-label {
            font-size: 16px;
            line-height: 24px;
        }
        .formats img {
            width: 20%;
        }
        .support-svg{
            gap: 48px;
        }
        .support-svg img {
            width: 15%;
        }
        .product {
            flex-direction: column;
        }
        .product-davv {
            width: 100%;
            gap: 12px;
        }
        .product {
            gap: 48px;
        }
        .size-img {
            width: 100%;
        }
    }
}