@font-face {
    font-family: "Montserrat Regular";
    src: url("/font/Montserrat/Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat light";
    src: url("/font/Montserrat/Light.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat Medium";
    src: url("/font/Montserrat/Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat SemiBold";
    src: url("/font/Montserrat/SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat Bold";
    src: url("/font/Montserrat/Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg-color: #263AB7;
    --text-color: #FFFFFF;
    --dark-blue-color: #0D1052;
}

.h1 {
    font: 700 clamp(32px, 3.167vw, 70px) "Montserrat Bold", sans-serif;
    text-transform: uppercase;
    line-height: 1;
    text-wrap: balance;
}

.h2 {
    font: 600 clamp(24px, 2.1875vw, 42px) "Montserrat SemiBold", sans-serif;
    line-height: 1.15;
    text-wrap: balance;
}

small {
    font: 400 clamp(12px, 0.9375vw, 18px) "Montserrat Regular", sans-serif;
}

body#avtodor {
    min-height: 100vh;
    background: linear-gradient(0.1turn, #F5F6F4, #FAF5F5);
    font: 500 clamp(16px, 1.25vw, 24px) "Montserrat Regular", sans-serif;
    text-rendering: optimizeSpeed;
    -moz-osx-font-smoothing: grayscale;
    font-variant-numeric: lining-nums proportional-nums;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

    .wrapper {
    background: url(/img/fon.svg) no-repeat 50% 0 / cover;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-x: hidden;
}

     /* Стили для анимации чаек */
        .banner-animation {
            position: absolute;
            top: 100px;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
        }

        /* Стили для чаек */
        .seagull {
            position: absolute;
            width: 50px;
            height: 30px;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 60"><path d="M10,30 Q30,10 50,30 Q70,10 90,30" stroke="white" stroke-width="3" fill="none"/></svg>');
            background-repeat: no-repeat;
            opacity: 0;
            z-index: 6;
        }

        /* Анимация для чаек */
        @keyframes seagullFly {
            0% {
                left: -50px;
                top: 50px;
                opacity: 0;
                transform: scale(0.8);
            }
            10% {
                opacity: 1;
            }
            50% {
                transform: scale(1.1) translateY(-10px);
            }
            90% {
                opacity: 1;
            }
            100% {
                left: 100%;
                top: 30px;
                opacity: 0;
                transform: scale(0.8);
            }
        }

     

        .seagull1 {
            animation: seagullFly 15s infinite;
            animation-delay: 0s;
        }

        .seagull2 {
            animation: seagullFly 18s infinite;
            animation-delay: 5s;
        }

        .seagull3 {
            animation: seagullFly 20s infinite;
            animation-delay: 10s;
        }
[class*="container"] {
    width: 100%;
    max-width: 1260px;
    /*height: 100%;*/
    margin-inline: auto;
    padding: 0 clamp(8px, 1.042vw, 20px);
}

.section {
    margin-bottom: clamp(60px, 8.854vw, 170px);
}

[class*="button--"] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 16px);
    max-width: 472px;
    height: clamp(70px, 3.6875vw, 90px);
    padding: 0 30px;
    border-radius: 16px;
    font: 700 clamp(16px, 1.25vw, 24px) "Montserrat Bold", sans-serif;
    box-shadow: 0 10px 18px -1px rgba(0, 0, 0, .25);
    text-decoration: none !important;
}

[class*="button--"]::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: inherit;
    z-index: -1;
    padding: 3px;
    mask-composite: exclude;
    transform: translate(clamp(10px, 0.677vw, 13px), clamp(10px, 0.677vw, 13px));
}

#avtodor .button--colored {
    background: #00D900;
    color: white;
}

#avtodor .button--colored::after {
    background: #00D900;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
}

#avtodor .button--discolored {
    color: #fff;
    background: linear-gradient(90deg, #54c8fd 0%, #0095DA 58%);
}

#avtodor .button--discolored::after {
    background: linear-gradient(45deg, #54c8fd, #0095DA);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
}

#avtodor .button--colored[disabled],
#avtodor .button--colored[disabled]::after {
    background: linear-gradient(265.13deg, rgba(240, 84, 35, 0.6) -4.35%, rgba(240, 36, 110, 0.6) 72.21%), #FFFFFF;
    pointer-events: none;
}

#avtodor .button--discolored[disabled],
#avtodor .button--discolored[disabled]::after {
    background: linear-gradient(123.43deg, rgba(155, 138, 255, 0.414) -11.98%, rgba(49, 118, 222, 0.372) 101.96%, rgba(27, 138, 242, 0) 180.89%), #FFFFFF;
    color: #556A95;
    pointer-events: none;
}

#avtodor .button--colored:active {
    background: white;
    color: #F03456;
    outline: 3px solid #F03456;
}

#avtodor .button--discolored:active {
    background: white;
    color: #50539D;
    outline: 3px solid #8EABF0;
}