@font-face {
    font-family: "Geometria";
    src: url("fonts/Geometria.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Geometria";
    src: url("fonts/Geometria-Medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Geometria";
    src: url("fonts/Geometria-Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
}

* {
    padding: 0;
    margin: 0;
    font-family: "Geometria";
}

a{
    text-decoration: none;
    color: inherit;
}

body {
    width: 100%;
    height: 100vh;
}

header {
    position: fixed;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 15px 14%;
    top: 0;
    left: 0;
    z-index: 1000;
}

header > .contacts{
    display: flex;
    align-items: center;
}

header > .contacts > img {
    padding: 10px;
}

header > .contacts > a.bold{
    margin-right: 17px;
}

header > .contacts > a > img{
    display: flex;
    align-items: center;
    justify-content: center;
}

.qrs{
    position: fixed;
    top: 220px;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.qr{
    background-color: white;
    padding: 13px 30px 13px 15px;
    box-shadow: 0px 35px 10px 0px rgba(0, 0, 0, 0%), 0px 22px 9px 0px rgba(0, 0, 0, 1%), 0px 13px 8px 0px rgba(0, 0, 0, 5%), 0px 6px 6px 0px rgba(0, 0, 0, 9%), 0px 1px 3px 0px rgba(0, 0, 0, 10%);
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.page{
    padding-top: 110px;
    background-image: url("img/DEYA_CROSS.svg");
    background-repeat: no-repeat;
    background-position: 98% 110%;
    padding-bottom: 30px;
}

.alert{
    min-height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 40px 40px 0px rgba(0, 0, 0, 9%), 0px 10px 22px 0px rgba(0, 0, 0, 10%);
}

.banner{
    box-shadow: 0px 31px 9px 0px rgba(0, 0, 0, 0%), 0px 20px 8px 0px rgba(0, 0, 0, 1%), 0px 11px 7px 0px rgba(0, 0, 0, 5%), 0px 5px 5px 0px rgba(0, 0, 0, 9%), 0px 1px 3px 0px rgba(0, 0, 0, 10%);
}

.banner .gradient{
    position: absolute;
    left: 57px;
    right: 47px;
    top: 77px;
    bottom: 25px;
    z-index: 4;
    border-radius: 20px;
    background: linear-gradient(to right, #fff, #CAE9EF);
}

.banner > .content{
    display: flex;
    gap: 13px;
    align-items: flex-end;
    position: relative;
    padding: 11px 47px 24px 57px;
}

.banner > .content > .text{
    display: flex;
    gap: 5px;
    flex-direction: column;
    position: relative;
    z-index: 5;
    padding-bottom: 10px;
}

.banner > .content > .img{
    flex: 1;
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 5;
}

.banner > .content .bannerm{
    display: none;
}

.banner > .content > .img > img:last-child{
    margin-right: 30px;
    margin-top: 60px;
}

.banner > .content > .text .height{
    min-height: 32px;
}

.banner ul{
    list-style-position: inside;
}

div.balert{
    display: flex;
    align-items: start;
    gap: 30px;
    box-sizing: border-box;
    padding: 30px 40px;
    margin-top: 29px;
    background: linear-gradient(to left, #fff, #CAE9EF);
    border-radius: 10px;
}

div.balert.mobile{
    display: none;
    flex-direction: column;
    gap: 20px;
    background: linear-gradient(to left, #fff, #CAE9EF);
    margin-top: 20px;
    padding: 30px 40px;
    box-sizing: border-box;
}

div.balert.mobile > div > img{
    width: 20px;
}

div.balert.mobile > div:first-child{
    display: flex;
    align-items: start;
    gap: 10px;
}

div.balert.mobile .buttons{
    width: 100%;
}

.balert #zap{
    margin-top: 18px;
    margin-bottom: 25px;
}

.balert .buttons{
    display: flex;
    gap: 30px;
}

div.info{
    margin-top: 30px;
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

.info .f{
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.info .f > img{
    width: 100%;
}

.info .work{
    padding: 0;
    display: flex;
    gap: 50px;
}

.info .work .column{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.info .work .column .title{
    margin-bottom: 4px;
}

.info .work .column .subtitle{
    margin-bottom: 4px;
    margin-top: 37px;
}

.info .work .column .data{
    display: flex;
    flex-direction: column;
    border-left: 6px solid #3CA1B4;
    padding-left: 14px;
    gap: 5px;
}

.info .work .column .data + .data{
    margin-top: 30px;
}

.info .work .column .data + .data.n{
    margin-top: 10px;
}

.info .work .column .data{
    line-height: 25.5px;
}

.info .work .column .data .details > p{
    line-height: 31.5px;
}

.info .work .column .data .times{
    display: flex;
    gap: 10px;
}

footer > div{
    padding-top: 40px;
    padding-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

footer .columns{
    flex: 0.9;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

footer .column{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

footer .column p{
    display: flex;
    align-items: center;
    min-height: 30px;
}

footer .column a.blue{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    color: #3382BF;
}

footer.mobile .column a.blue{
    margin-top: 25%;
    font-size: 14px;
}

footer .socials{
    display: flex;
    gap: 13px;
    align-items: center;
}

footer .socials a{
    display: flex;
    align-items: center;
    justify-content: center;
}

.basem{
    margin: 0 11.3%;
}

.btn{
    border: none;
    outline: none;
    border-radius: 10px;
    gap: 10px;
    padding: 15px 88px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wabtn{
    font-size: 18px;
    font-weight: bold;
    color: #3CA1B4;
    background: white;
    box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 9%), 0px 2px 4px 0px rgba(0, 0, 0, 10%);
}

.anbtn{
    font-size: 18px;
    font-weight: 500;
    color: #3CA1B4;
    border: 1px solid #3CA1B4;
    box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 9%), 0px 2px 4px 0px rgba(0, 0, 0, 10%);
}

.twogis{
    border: 2px solid #CBEAEF;
    border-radius: 6px;
    color: #0B0A07;
}

.f36{
    font-size: 36px;
}

.f20{
    font-size: 20px;
}

.f18{
    font-size: 18px;
}

.f16{
    font-size: 16px;
}

.bold{
    font-weight: bold;
}

.medium{
    font-weight: 500;
}

.white{
    color: white;
}

.lightGray{
    color: #606060;
}

.gray{
    color: #688795;
}

.bwhite{
    background-color: white;
}

.darkBlue{
    color: #005980;
}

.blue{
    color: #0097B3;
}

.bBlue{
    background-color: #DCF0F4;
}

.lightGreen{
    color: #3CA1B4;
}

.bLightBlue{
    background: #698896;
}

.black{
    color: #0B0A07;
}

.tcenter{
    text-align: center;
}

footer.mobile{
    display: none;
}

.buttons.basemm{
    display: none;
    flex-direction: column;
    gap: 20px;
    margin-top: 40px;
    margin-bottom: 40px;
}

.buttons.basemm > a:first-child{
    background-color: #3CA1B4;
    color: white;
}

@media (max-width: 1560px) {

    header {
        padding: 15px 10%;
    }

    .info .f{
        width: 100%;
    }

    .info .work .column .subtitle{
        margin-top: 0;
        margin-bottom: 4px;
    }

    footer > div > img{
        width: 275px;
    }

    div.info{
        flex-direction: column;
    }

    .info .work .column .data + .data.n{
        margin-top: 30px;
    }
}

@media (max-width: 1436px) {
    .basem{
        margin: 0 7%;
    }

    .qr{
        padding-right: 10px;
    }

    .alert {
        min-height: 48px;
        padding: 0px 4.29%;
    }
}

@media (max-width: 1310px) {
    .basem{
        margin: 0 3%;
    }

    .qrs{
        display: none;
    }
}

@media (max-width: 1180px) {
    .basem{
        margin: 0 1%;
    }

    footer > div > img{
        width: 225px;
    }
}


@media (max-width: 1140px) {
    footer{
        display: none;
    }

    footer.mobile{
        display: block;
        padding: 20px;
        padding-bottom: 52px;
    }

    footer > div {
        padding-top: 40px;
        padding-bottom: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }

    footer .footerinfo{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    footer.mobile .columns{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 80px;
    }

    footer .line{
        width: 100%;
        height: 1px;
        background-color: #3382BF;
        margin-top: 20px;
        margin-bottom: 30px;
    }

    .basem{
        margin: 0 0;
    }

    .basemm{
        margin: 0 10px;
    }

    div.balert {
        gap: 30px;
        border-radius: 0;
    }

    .banner > .content {
        padding: 11px 15px 24px 15px;
    }

    .banner .gradient {
        left: 15px;
        right: 15px;
    }

    .balert .buttons{
        gap: 15px;
    }

    .alert{
        font-size: 12px;
    }

    .f36{
        font-size: 28px;
    }

    .banner > .content > .text .height{
        min-height: unset;
        font-size: 16px;
        margin-bottom: 15px;
    }

    .banner{
        box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 9%), 0px 1px 3px 0px rgba(0, 0, 0, 10%);
    }

    div.balert{
        margin-top: 20px;
    }

    div.balert > img{
        width: 30px;
    }

    div.balert > div{
        flex: 1;
    }

    .f20{
        font-size: 14px;
    }

    .balert #zap{
        margin-top: 15px;
        margin-bottom: 28px;
        font-size: 14px;
    }

    .wabtn {
        font-size: 14px;
        box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 9%), 0px 2px 4px 0px rgba(0, 0, 0, 10%);
    }

    .anbtn {
        font-size: 14px;
    }

    .twogis {
        font-size: 16px;
        font-weight: 500;
    }

    .info .work .column .title,
    .info .work .column .subtitle {
        font-size: 14px;
    }

    .info .work .column .data .details p {
        font-size: 14px;
    }

    .info .work .column p.gray{
        font-size: 12px;
    }

    footer .column p{
        font-size: 14px;
    }

    footer .column{
        gap: 5px;
    }

    .page{
        background-image: none;
    }

    div.info{
        gap: 30px;
    }

    .info .work{
        padding: 0;
    }

    .buttons.basemm{
        display: flex;
    }

    header > img{
        width: 185px;
    }

    header > .contacts > a.bold{
        font-size: 14px;
    }
}

@media (max-width: 1060px) {
    header {
        padding: 15px 5%;
    }

    .banner > .content > .img > img {
        display: none;
    }

    .banner > .content > .img{
        justify-content: center;
    }

    .banner > .content > .img > img.bannerm{
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 4;
        display: block;
    }

    .banner > .content > .img{
        z-index: 4;
    }

    .balert .buttons{
        gap: 5px;
    }
}

@media (max-width: 1050px) {

    .banner > .content {
        padding: 30px 12px 0 50px;
    }

    .banner .gradient {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 0;
    }

    .balert .buttons{
        flex-direction: column;
        gap: 20px;
    }
}

@media (max-width:  425px) {

    header > .contacts > img{
        width: 10px;
        padding: 8px;
    }

    header > img{
        width: 110px;
    }

    header > .contacts > a.bold {
        font-size: 10px;
        margin-right: 5px;
    }

    header > .contacts > a > img{
        width: 20px;
    }

    .page{
        padding-top: 66px;
    }

    .alert{
        font-size: 8px;
    }

    .f36{
        font-size: 18px;
    }

    .banner > .content > .text .height{
        font-size: 12px;
        min-height: 21px;
    }

    .banner ul{
        font-size: 10px;
    }

    div.balert {
        margin-top: 10px;
    }

    div.balert > img{
        width: 20px;
    }

    .f20 {
        font-size: 10px;
    }

    .balert #zap {
        margin-top: 10px;
        margin-bottom: 0;
        font-size: 10px;
    }

    .wabtn {
        font-size: 10px;
        box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 9%), 0px 2px 4px 0px rgba(0, 0, 0, 10%);
        border-radius: 3px;
    }

    .btn{
        padding: 10px 0;
    }

    .wabtn img,
    .anbtn img {
        width: 20px;
   }

    .anbtn {
        font-size: 10px;
        border-radius: 3px;
        box-shadow: none;
    }

    .twogis {
        font-size: 10px;
    }

    .twogis img {
        width: 53px;
    }

    div.info {
        margin-top: 20px;
        gap: 20px;
        align-items: unset;
    }

    .info .work {
        padding: 0 20px;
        flex-direction: column;
        gap: 20px;
    }

    .info .work .column .title,
    .info .work .column .subtitle {
        font-size: 10px;
        height: 20px;
        line-height: 20px;
        margin-bottom: 0;
    }

    .info .work .column .data .details p {
        font-size: 10px;
        height: 20px;
        line-height: 20px;
    }

    .info .work .column p.gray {
        font-size: 10px;
        height: 20px;
        line-height: 20px;
    }

    .info .work .column .data {
        gap: 0px;
    }

    .info .work .column .data + .data {
        margin-top: 0;
    }

    .info .work .column {
        gap: 10px;
    }

    .info .work .column .data + .data.n {
        margin-top: 0;
    }

    .buttons.basemm {
        gap: 15px;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .footerinfo{
        box-sizing: border-box;
        padding: 0 10px;
    }

    .footerinfo > img{
        width: 140px;
    }

    .socials img{
        width: 20px;
    }

    footer.mobile {
        display: block;
        padding: 10px;
        padding-bottom: 20px;
    }

    footer > div.basemm {
        margin: 0;
    }

    footer .column p {
        font-size: 10px;
        min-height: 20px;
    }

    footer.mobile .column a.blue{
        font-size: 10px;
    }

    footer.mobile .columns {
        box-sizing: border-box;
        width: 100%;
        padding: 0 10px;
        flex: 1;
        gap: 20px 35px;
    }

    div.balert{
        display: none;
    }

    div.balert.mobile{
        padding: 20px;
        display: flex;
    }

    footer .column {
        gap: 0;
    }

    .banner > .content {
        padding: 20px 0px 0 20px;
    }

    .banner > .content > .text .height {
        margin-bottom: 5px;
    }
}