﻿

body {
    display: block;
    margin: 0;
    font-family: "DM Sans", sans-serif;
    padding: 0;
    box-sizing: border-box;
    background-color: #ffffff !important;
}

:root {
    color-scheme: light;
}


div {
    box-sizing: border-box;
}


.landing_wrap {
position:relative;
box-sizing:border-box;
margin:0;
overflow:hidden;
}

.social-icon {
    width: 12px;
    margin-top: 6px;
    height: 12px;
    cursor: pointer;
}


.shapka {
    display: grid;
    grid-template-columns: auto 120px;
    width: 100%;
    max-width: 900px;
    align-content: center;
    align-items: center;
    margin: auto;
}


.content_wrap {
    display: grid;
    grid-template-columns: 400px auto;
    width: 100%;
    max-width: 900px;
    align-content: center;
    grid-column-gap: 45px;
    align-items: center;
    margin: -40px auto 0 auto;
}

.social-icon-btn {
    display: inline-block;
    margin-right: 2px;
    background-color: rgb(255 255 255 / 0.30);
    border-radius: 100%;
    width: 24px;
    height: 24px;
    text-align: center;
}

.header_section {
    background: linear-gradient(130deg, #5ce0e6 0%, #8b55ff 100%);
    padding-left: 20px;
    padding-right: 20px;
}


.bang_img {
    width: 400px;
}


.header {
    font-size: 82px;
    font-family: "League Spartan", sans-serif;
    font-weight: 700;
    margin-top: -80px;
    letter-spacing: -5px;
    margin-bottom: 30px;
}

.header_text_wrap {
text-align:center;
color:white;
}


.logo_link :hover {
opacity:0.8;
}

.sub_header_hande {
    font-family: "Kalam", cursive;
    font-weight: 400;
    font-size: 32px;
    margin-top: 15px;
}

.sub_header {
font-size:17px;
}



.button_wrap {
    display: grid;
    grid-template-columns: 32.6% 32.6% 32.6%;
    width: 100%;
    max-width: 900px;
    align-content: center;
    grid-column-gap: 1%;
    grid-row-gap: 20px;
    margin-top: -30px;
    align-items: center;
    margin: -30px auto 0 auto;
    position: relative;
    z-index: 2;
}

.button_violet {
    background-color: rgb(84, 43, 164);
    padding: 20px;
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 34px;
    font-size: 19px;
}



.arrow {
    color: rgb(84, 43, 164);
    font-family: "Kalam", cursive;
    text-align: center;
    font-weight: 600;
    line-height: 1.3;
    transform: rotate(8deg);
    grid-column-start: 3;
    text-transform: uppercase;
    position: relative;
    font-size: 18px;
    right: -100px;
    top: 30px;
}


.arrow_img {
    width: 100px;
    position: absolute;
    transform: rotate(226deg);
    left: -20px;
    top: -25px;
}


.section_1 {
text-align:center;
margin:20px auto 60px auto;
background-color: #ffffff;
}


.header_1 {
    font-size: 76px;
    font-family: "League Spartan", sans-serif;
    font-weight: 700;
    letter-spacing: -5px;
    display: inline-block;
    height: 90px;
    line-height: 1.4;
    background: linear-gradient(130deg, #5ce0e6 0%, #8b55ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.vrezka {
    font-size: 17px;
    display: block;
    line-height: 1.1;
    text-align: center;
    font-weight: 400;
    margin: 20px auto 55px auto;
    max-width: 500px;
}


.section_3 .button_violet:hover {
    background: linear-gradient(90deg, #4bccd1 -20%, #6e3dd5 120%);
    opacity:1;
}

.section_1 .button_wrap {
    margin: 10px auto 0 auto;
}


.section_1 .button_violet {
    background-color: rgb(127, 101, 224);
}

.button_text {
    color: rgb(84, 43, 164);
    font-size: 38px;
    font-family: "League Spartan", sans-serif;
    text-align: right;
    font-weight: 700;
    line-height: 0.9;
    margin-right: 30px;
}


.gradient {
    border: 6px solid transparent;
    background: linear-gradient(white, white) padding-box, linear-gradient(90deg, #5ce0e6, #8b55ff) border-box;
    text-align: center;
    font-weight: 700;
    padding: 17px 10px;
    letter-spacing: -0.8px;
    color: rgb(84, 43, 164);
    font-size: 19px;
}

.grey {
    background-color: rgb(244 244 244) !important;
    padding: 40px 5px 80px 5px;
}




    .grey .gradient {
        background: linear-gradient(rgb(244 244 244), rgb(244 244 244)) padding-box, linear-gradient(90deg, #5ce0e6, #8b55ff) border-box;
    
    }



    .grey .vrezka {
        max-width: 850px;
    }



.section_2, .section_4 {
    text-align: center;
    position:relative;
    overflow:hidden;
    margin: -60px auto 60px auto;
    padding: 60px 15px 60px 15px;
    background: linear-gradient(130deg, #5ce0e6 0%, #8b55ff 100%);
}

    .section_2 .header_1 {
        font-size: 62px;
        font-family: "League Spartan", sans-serif;
        font-weight: 700;
        letter-spacing: -2px;
        display: inline-block;
        height: 90px;
        color: white;
        -webkit-text-fill-color: white;
        line-height: 1.4;
    }


.bulet_img {
    width: 190px;
}

.section_2 .button_wrap {
    color: white;
    grid-template-columns: 30% 30% 30%;
    width: 100%;
    max-width: 900px;
    align-content: center;
    margin: -110px auto 20px auto;
    grid-column-gap: 5%;
}


.section_2 .vrezka {
    color: rgb(84, 43, 164);
    font-family: "Kalam", cursive;
    text-align: center;
    font-weight: 600;
    line-height: 1.3;
    transform: rotate(356deg);
    position: relative;
    font-size: 44px;
    top: -55px;
}


.section_2 .sub_header {
    font-size: 24px;
    font-family: "League Spartan", sans-serif;
    font-weight: 700;
    margin-bottom:20px;
}


.wave_l {
    position: absolute;
    left: -120px;
    top: -50px;
    width: 300px;
    opacity: 0.5;
}

.wave_r {
    position: absolute;
    right: -202.2px;
    top: -230px;
    width: 400px;
    opacity: 0.5;
}


.section_3 {
    text-align: center;
    position: relative;
    overflow: hidden;
    background-image: url(../images/width_2400.webp);
    margin: -60px auto 60px auto;
    background-size: cover;
    padding: 80px 5px 80px 5px;
}

    .section_3 .header_1 {
        color: rgb(84, 43, 164);
        font-family: "Kalam", cursive;
        text-align: center;
        font-weight: 600;
        font-size: 56px;
        letter-spacing: 0;
        line-height: 1.3;
        display: inline-block;
        height: 60px;
        position:relative;
        background: none;
        -webkit-background-clip: unset;
        -webkit-text-fill-color: unset;
        line-height: 1.4;
        z-index: 5;
    }


    .section_3 .vrezka {
        font-size: 38px;
        color: rgb(84, 43, 164);
        font-weight: 800;
        position: relative;
        letter-spacing: 2px;
        margin-bottom: 40px;
        z-index: 5;
    }

.white_color {
    position: absolute;
    width: 100%;
    background-color: #ffffff73;
    height: 100%;
    top: 0;
    z-index: 1;
}



.section_3 .button_wrap {
    display: grid;
    grid-template-columns: 49% 49%;
    width: 100%;
    max-width: 700px;
    align-content: center;
    grid-column-gap: 2%;
    grid-row-gap: 20px;
    align-items: center;
    margin: 20px auto 0 auto;
    position: relative;
    z-index: 2;
}


.section_3 .button_violet {
    background: linear-gradient(90deg, #5ce0e6 0%, #8b55ff 100%);
    display:block;
    font-size:26px;
}


.section_3 .arrow_img {
    width: 120px;
    position: absolute;
    transform: rotateX(180deg);
    left: -130px;
    top: -44.3px;
}

.section_4 .header_1 {
    font-size: 38px;
    font-family: "League Spartan", sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
    display: inline-block;
    text-transform: uppercase;
    height: 90px;
    color: white;
    margin-bottom: 30px;
    position: relative;
    margin-left: 100px;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    line-height: 1.4;
}


.section_4 .vrezka {
    color: rgb(84, 43, 164);
    font-family: "Kalam", cursive;
    text-align: left;
    font-weight: 600;
    font-size: 24px;
    width: 200px;
    left: -200px;
    top: -32px;
    line-height: 1.3;
    transform: rotate(357deg);
    font-weight: 800;
    text-transform: uppercase;
    position: absolute;
    letter-spacing: -0.5px;
    margin-bottom: 40px;
    z-index: 5;
}


.feedback {
    border-radius: 20px;
    background-color: white;
    padding: 30px;
    position: relative;
    text-align: left;
    font-size: 14px;
    letter-spacing: -0.5px;
    font-style: italic;
    line-height: 1.1;
}


.ee {
    position: absolute;
    width: 100px;
    right: -36.1px;
    top: -30px;
}


.section_4 .button_wrap {
align-items:stretch;
}

.big {
    margin-top: 20px;
    grid-column-end: 4;
    grid-column-start: 1;
    font-size: 23px;
    font-family: "League Spartan", sans-serif;
    font-weight: 700;
    letter-spacing: -0.5px;
    display: inline-block;
    text-align:center;
    font-style: normal;
    text-transform: uppercase;
    color: black;
}


.stars {
    width: 120px;
    margin-right:20px;

}



.wave_l_2 {
    position: absolute;
    left: -120px;
    top: -50px;
    width: 300px;
    opacity: 0.5;
}




.section_4 .wave_r {
    position: absolute;
    right: 87.8px;
    top: -430px;
    transform: rotate(318deg);
    width: 400px;
    opacity: 0.5;
}


.wave_r_2 {
    position: absolute;
    right: -352.2px;
    top: 80px;
    width: 400px;
    transform: rotate(85deg);
    opacity: 0.5;
}


.wave_r_3 {
    position: absolute;
    left: -242.2px;
    top: -100px;
    width: 400px;
    transform: rotate(215deg);
    opacity: 0.5;
}


.section_4 .wave_l {
    position: absolute;
    left: -82.2px;
    top: 210px;
    transform: rotate(250deg);
    width: 300px;
    opacity: 0.5;
}


.section_5 {
    text-align: center;
    position: relative;
    overflow: hidden;
    margin: 60px auto 60px auto;
    background-size: cover;
    background-color: #ffffff;
}


    .section_5 .header_1 {

        letter-spacing: -1px;

        font-size:60px;
     
    }



.col_2 {
    display: grid;
    grid-template-columns: 35% 65%;
    width: 100%;
    max-width: 900px;
    align-content: center;
    grid-column-gap: 1%;
    grid-row-gap: 20px;
    align-items: start;
    margin: 25px auto 0 auto;
    position: relative;
    z-index: 2;
}


.foto {
    display: inline-block;
    text-align: left;
    margin:0 5px;
}

.small_header {
    font-family: "Kalam", cursive;
    text-align: left;
    font-weight: 400;
    letter-spacing: -1px;
    margin-top: 25px;
    margin-bottom: 15px;
    font-size: 28px;
}


.name {
    font-size: 20px;
    margin-bottom: 2px;
    margin-top:10px;
    letter-spacing: -1px;
}

.amats {
font-size:11px;
margin-top:0;
}

.small_text {
    font-size: 18px;
    text-align: justify;
    line-height: 1.5;
}

.foto img {
width:170px;
}

.footer_violet {
    display: grid;
    grid-template-columns: auto 150px 200px 80px;
    width: 100%;
    max-width: 850px;
    align-content: center;
    margin:auto;
    grid-column-gap: 60px;
    grid-row-gap: 20px;
    align-items: center;
}


.footer_violet_wrap {
    padding: 40px 0;
    background-color: rgb(84, 43, 164);
    display: grid;
    width: 100%;

  
}

.part {
    color: white;
    font-family: "Kalam", cursive;
    text-align: left;
    font-weight: 600;
    font-size: 28px;
    line-height: 1.3;
    transform: rotate(357deg);
    letter-spacing: -0.5px;
    z-index: 5;
}


.part_logo img {
height:80px;
display:inline-block;
}

.uzd {
width:150px;
}



.button_violet:hover {
opacity:0.5;
}


.desck .button_violet:hover {
    opacity: 1;
    background-color: rgb(106 51 213);
}

.uzd_logo_heade {
    margin: 20px -40px;
}


@media screen and (max-width: 767px) {

    .desck {
    display:none;
    }

    .img_wrap {
        width: 250px;
        margin: auto;
        margin-top: 30px;
        margin-bottom: -10px;
    }

    .header_section {
        padding-left: 0;
        padding-right: 0;
    }

    .shapka {
 
        padding-left: 20px;
        padding-right: 20px;
  
    }

    .uzd_logo_heade {
        margin: -17px -40px -20px -45px;
    }

    .wave_l .wave_r, .wave_r_3, .wave_r_2, .wave_r, .wave_l, .arrow_img {
        display: none;
    }

    .content_wrap {
        display: grid;
        grid-template-columns: 100%;
        width: 100%;
        max-width: 300px;
        align-content: center;
        grid-column-gap: 45px;
        align-items: center;
        margin: -40px auto 0 auto;
    }

    .bang_img {
        width: 100%;
    }

    .header {
        font-size: 45px;
        font-family: "League Spartan", sans-serif;
        font-weight: 700;
        margin-top: 20px;
        letter-spacing: -2px;
        margin-bottom: 5px;
    }

    .sub_header_hande {
        font-family: "Kalam", cursive;
        font-weight: 400;
        font-size: 24px;
        line-height: 1;
        /* max-width: 250px; */
        display: inline-block;
        margin-top: 15px;
        margin-bottom: 40px;
    }


    .section_1 {
        text-align: center;
        padding:20px;
        margin: 20px auto;
    }

    .button_wrap {
        grid-template-columns: auto;
        width: 100%;
        max-width: 300px;
        align-content: center;
        grid-column-gap: 1%;
        grid-row-gap: 10px;
        margin-top: -30px;
        align-items: center;
        margin: -30px auto 0 auto;
        position: relative;
        z-index: 2;
    }

    .button_text {
    display:none;
    }

    .vrezka {
  
        margin: 10px auto 30px auto;
    }


    .header_1 {
        font-size: 55px;
        height: 70px;
    }


    .section_2, .section_4 {
    
        margin: -20px auto 40px auto;
      
    }


    .grey {
    padding-bottom:40px;
    }


    .section_2 .button_wrap {
        color: white;
        grid-template-columns: auto !important;
        width: 100%;
        max-width: 300px;
        align-content: center;
        margin: -10px auto 20px auto;
        grid-column-gap: 5%;
    }

    .section_2 .header_1 {
    line-height:1;
    font-size:45px;
    }


    .section_2 .vrezka {
        font-size: 35px;
        top: 0;
    }

    .mob_mrg {
    margin-bottom:-20px;
    }

    .section_2 .sub_header {
   
        margin-bottom: 10px;
    }

    .section_3 {
           margin: -60px auto 20px auto;
        padding: 40px 5px 40px 5px;
    }

        .section_3 .header_1 {
           height:auto;
           margin-bottom:10px;
            font-size: 40px;
            line-height: 1;
            z-index: 5;
        }

        .section_3 .vrezka {
            font-size: 28px;            
            margin-bottom: 20px;
        }

        .section_3 .button_wrap {
            grid-template-columns: auto;
            width: 100%;
            max-width: 300px;
            grid-row-gap: 10px;
            align-items: center;
            margin: 10px auto 0 auto;
        
            z-index: 2;
        }

        .section_3 .button_violet {
                font-size: 22px;
                padding:15px;
        }

    .big {
        margin-top: 20px;
        font-size: 20px;
        grid-column-end: 1;
        grid-column-start: 1;
    }

    .stars {
        width: 120px;
        display: block;
        margin: auto;
        margin-bottom: 20px;
    }


    .ee {
        position: absolute;
        width: 50px;
        right: -10px;
        top: -5px;
    }


    .section_4 .header_1 {
        font-size: 36px;
        letter-spacing: 0;
        display: inline-block;
        text-transform: uppercase;
        height: auto;
        max-width:300px;
        color: white;
        margin-bottom: 30px;
        position: relative;
        margin-left: auto;
        background: none;
        -webkit-background-clip: unset;
        -webkit-text-fill-color: unset;
        line-height: 1;
    }

    .section_4 .vrezka {
        font-weight: 600;
        font-size: 24px;
        width: 200px;
        left: 0;
        text-align: center;
        line-height: 1.3;
        transform: rotate(357deg);
        font-weight: 800;
        text-transform: uppercase;
        position: relative;
        letter-spacing: -0.5px;
         margin-bottom: -20px; 
        z-index: 5;
    }

    .section_4 .button_wrap {
        align-items: stretch;
        margin: -10px auto 0 auto;
    }

    .col_2 {
        grid-template-columns: 100%;
        width: 100%;
        max-width: 500px;
        align-content: center;
        grid-column-gap: 1%;
        grid-row-gap: 20px;
        align-items: start;
        margin: 25px auto 0 auto;
        position: relative;
        z-index: 2;
    }

    .foto img {
        width: 140px;
    }


    .small_header {
              text-align: center;
        letter-spacing: -1px;
        margin-top: 0;
        line-height: 1;
        margin-bottom: 15px;
        font-size: 24px;
    }

    .section_5 .header_1 {
        letter-spacing: -1px;
        font-size: 40px;
        line-height:1;
        height: auto;
    }

    .section_5 {
        padding: 0 15px;
        margin: 40px auto 40px auto;
    }

  .section_4 {
        margin: -20px auto 20px auto;
    }

    .small_text {
        font-size: 18px;
        text-align: center;
        line-height: 1.5;
    }

    .part {
      
        text-align: center;
        font-weight: 600;
        font-size: 28px;
        line-height: 1.3;
        grid-column-start: 1;
        grid-column-end: 4;
      margin-bottom:10px;
      margin-top:0;
        z-index: 5;
    }

    .footer_violet {
        display: grid;
        grid-template-columns: 120px auto auto;
        width: 100%;
        max-width: 400px;
        align-content: center;
        margin: auto;
        margin: auto;
        justify-items: center;
        grid-column-gap: 10px;
        grid-row-gap: 5px;
        align-items: center;
    }

    .part_logo img {
        height: 60px;
        display: inline-block;
    }

    .uzd {
        width: 120px;
    }

    .footer_violet_wrap {
        padding: 20px 10px;

    }


    .foto {
        text-align: center;
    }

    .name {
        font-size: 18px;
        margin-bottom: 2px;
        margin-top: 5px;
        letter-spacing: -1px;
    }
}


@media screen and (max-width: 450px) {

    .footer_violet {
        display: grid;
        grid-template-columns: 110px auto auto;
        width: 100%;
        max-width: 300px;
        align-content: center;
        margin: auto;
        margin: auto;
        justify-items: center;
        grid-column-gap: 10px;
        grid-row-gap: 5px;
        align-items: center;
    }

    .header {
        font-size: 42px;
    
    }

    .uzd_logo_heade {
        margin: -17px -40px -20px -38px;
        width: 220px;
    }

    .img_wrap {
        width: 250px;
        margin: auto;
        margin-top: 30px;
        margin-bottom: -10px;
    }

    .part_logo img {
        height: 40px;
        display: inline-block;
    }

    .footer_violet_wrap {
        padding: 20px 0px;
    }

    .uzd {
        margin-top: 10px;
    }
}