html,body{
    background: #F3F6F9;
    padding: 0;
    margin: 0;
    font-family: 'Inter', sans-serif;
    color: #171318;
}

button{
    font-family: 'Inter', sans-serif;
}

h1,h2,p{
    margin: 0;
}

h2{
    font-style: normal;
    font-weight: 900;
    font-size: 40px;
    line-height: 40px;
    letter-spacing: -0.04em;
    color: #3D77FF;
    text-align: center;
}

h2::before{
    content: "";
    display: inline-block;
    width: 24px;
    height: 28px;
    background-image: url('/image/flag-mini.svg');
    background-repeat: no-repeat;
    position: relative;
    top: -38px;
    left: 4px;
}

ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

.content{
    max-width: 1128px;
    margin: auto;
    position: relative;
}

header{
    margin-top: 40px;
    margin-bottom: 40px;
}

header .content{
    display: flex;
    align-items: center;
    height: 48px;
}

header nav a{
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #171318;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    margin-right: 36px;
    white-space: nowrap;
}

header nav a:hover{
    border-bottom: solid 3px #FFDA21;
}

header button,
header a.btn{
    height: 48px;
    border-radius: 12px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    border: none;
    outline: none;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

header .contact-btn{
    width: 135px;
    background: #3D77FF;
    color: #FFFFFF;
    margin-right: 12px;
    margin-left: auto;
}

header .contact-btn:hover{
    background: #2666fb;
}

header .donate-btn{
    width: 204px;
    background: #FFDA21;
    color: #171318;
}

header .donate-btn:hover{
    background: #fbd410;
}

header .mob-menu{
    background: none;
    display: none;
    margin-left: auto;
}

header .mob-menu-bg{
    display: none;
}

.section-1{
    background-image: url('/image/bg.png');
    background-position: 0% 100%;
    background-repeat: repeat-x;
}

.section-1 .content{
    background-image: url('/image/soldier-2.png');
    background-position: 55% 100%;
    background-repeat: no-repeat;
}

.section-1 h1{
    letter-spacing: -0.01em;
    font-weight: 900;
    font-size: 70px;
    line-height: 70px;
    max-width: 498px;
    margin-bottom: 16px;
}

.section-1 p{
    font-weight: 500;
    font-size: 18px;
    line-height: 26px;
    color: #76859B;
    max-width: 334px;
}

.requisites{
    font-weight: 700;
    font-size: 18px;
    line-height: 20px;
    margin-top: 24px;
}

 .requisites li{
    display: flex;
    align-items: center;
}

.requisites li img{
   margin-right: 8px;
}

.section-1 .requisites li + li{
    margin-top: 8px;
}

.section-1 .qr{
    width: 169px;
    text-align: center;
    position: absolute;
    top: 34px;
    right: 6px;
}

.section-1 .qr span{
    display: block;
    text-align: center;
    margin-top: 20px;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    color: #7e8ca1;
    text-transform: uppercase;
}

.section-1 .qr span::before{
    content: "[";
    color: #3D77FF;
    font-weight: 400;
    margin-right: 4px;
}

.section-1 .qr span::after{
    content: "]";
    color: #3D77FF;
    font-weight: 400;
    margin-left: 4px;
}

.section-1 .decor{
    height: 240px;
    margin-top: 21px;
    background-image: url('/image/soldier-1.png'),url('/image/soldier-3.png'),url('/image/soldier-4.png'),url('/image/soldier-5.png');
    background-position: 0% 100%, 59% 100%, 75% 100%, 100% 100%;
    background-repeat: no-repeat;
}

.section-2{
    padding-top: 80px;
}

.section-2 p{
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    text-align: center;
    color: #76859B;
    max-width: 744px;
    margin: 20px auto 32px;
}

.report-page p a,
.contact-page p a,
.section-2 p a{
    text-decoration: none;
    outline: none;
    color: #3D77FF;
}

.report-page p a:hover,
.contact-page p a:hover,
.section-2 p a:hover{
    border-bottom: solid 2px #3D77FF;
}

.report-page p a.instagram::before,
.contact-page p a.instagram::before,
.section-2 p a.instagram::before{
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('/image/instagram.png');
    margin-right: 2px;
    transform: translateY(1px);
}

.social-media{
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-media a{
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    outline: none;
    width: 56px;
    height: 56px;
    transition: transform 0.2s linear;
}

.social-media a:hover{
    transform: scale(1.1);
}

.social-media a + a{
    margin-left: 10px;
}

.social-media a.instagram{
    background: #ffda21;
    border-radius: 12px;
}

.social-media a.instagram img{
    width: 32px;
    height: auto;
}

.section-3{
    padding-top: 148px;
    background-image: url('/image/bg.png');
    background-position: 0% 100%;
    background-repeat: repeat-x;
}

.section-3 .content{
    max-width: 936px;
    padding-bottom: 78px;
    margin: auto;
    position: relative;
}

.section-3 .decor{
    background-image: url('/image/soldier-6.png');
    background-repeat: no-repeat;
    width: 362px;
    height: 460px;
    position: absolute;
    bottom: 0;
    left: -78px;
}

.section-3 h2{
    margin-bottom: 86px;
}

.d-item{
    display: flex;
}

.d-item + .d-item{
    margin-top: 70px;
}

.d-item.right{
    flex-direction: row-reverse;
}

.d-wr{
    width: 552px;
}

.d-wr > span{
    font-style: normal;
    font-weight: 900;
    font-size: 64px;
    line-height: 70px;
    letter-spacing: -0.01em;
    color: #171318;
}

.d-wr > a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    background: #FFDA21;
    border-radius: 12px;
    padding: 0 24px;
    box-sizing: border-box;
    color: #171318;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    text-decoration: none;
    outline: none;
    margin-top: 40px;
}

.d-wr > a:hover{
    background: #fbd410;
}

.d-item.right .d-img{
    margin-left: 0;
    margin-right: 100px;
    background-image: url('/image/blue-bg-inverse.svg');
}

.d-img{
    width: 370px;
    height: 370px;
    background-image: url('/image/blue-bg.svg');
    background-position: top center;
    background-repeat: no-repeat;
    margin-left: 100px;
    position: relative;
}

.d-img img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.donate-page .d-progress{
    width: 100%;
}

.d-progress{
    width: 456px;
    margin-top: 15px;
}

.progress-title{
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #76859B;
    margin-bottom: 8px;
    display: block;
    display: flex;
    align-items: center;
}

.success .progress-title::after{
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('/image/check.png');
    background-position: center;
    background-repeat: no-repeat;
    margin-left: 6px;
}

.amounts-wr{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.amounts-wr .current{
    font-weight: 900;
    font-size: 48px;
    line-height: 48px;
    display: flex;
    align-items: flex-end;
    letter-spacing: -0.01em;
    color: #000000;
}

.amounts-wr .current > span{
    font-size: 16px;
    line-height: 26px;
}

.amounts-wr .total{
    font-weight: 900;
    font-size: 20px;
    line-height: 20px;
    letter-spacing: -0.01em;
    color: #171318;
    display: flex;
    align-items: flex-end;
}

.amounts-wr .total > span{
    font-size: 16px;
line-height: 20px;
}

.amounts-wr .total::before{
    content: "";
    display: inline-block;
    width: 17px;
    height: 17px;
    background-image: url('/image/price-label-gray.svg');
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 6px;
}

.success .amounts-wr .total::before{
    background-image: url('/image/price-label-green.svg');
}

.amounts-wr .total > span{
    font-size: 16px;
}

.donate-page .progressbar{
    width: 100%;
}

.progressbar{
    width: 456px;
    height: 12px;
    background: rgba(118, 133, 155, 0.2);
    border-radius: 4px;
    position: relative;
    margin-top: 12px;
}

.progressbar .progress{
    position: absolute;
    left: 0;
    top: 0;
    height: 12px;
    background:  #00B54D;
    border-radius: 4px;
}

.d-list{
    display: flex;
    flex-wrap: wrap;
    margin-top: 138px;
}

.d-list li{
    align-self: flex-start;
}

.d-list li:nth-child(odd){
    margin-right: 40px;
}

.d-list li a{
    display: flex;
    align-items: flex-start;
    width: 440px;
    min-height: 40px;
    text-decoration: none;
    outline: none;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.01em;
    color: #171318;
    border-radius: 6px;
    box-sizing: border-box;
    padding: 10px 12px;
}

.d-list li a:hover{
    background: rgba(61, 119, 255, 0.08);
    color: #3D77FF;
}

.d-list li a > span:first-child {
    margin-right: 24px;
}

.d-list li a .pcs{
    font-weight: 400;
    color: #76859B;
    margin-left: 4px;
}

.d-list li a .price{
    margin-left: auto;
    font-weight: 900;
    color: #171318;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.d-list li a.success .price::before{
    background-image: url('/image/price-label-green.svg');
}

.d-list li a .price::before{
    content: "";
    display: inline-block;
    width: 17px;
    height: 17px;
    background-image: url('/image/price-label-gray.svg');
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 6px;
}

.total-progress{
    margin-top: 100px;
}

.total-progress .amounts-wr .current,
.total-progress .amounts-wr .total{
    font-weight: 900;
    font-size: 64px;
    line-height: 64px;
    position: relative;
    min-width: 140px;
}

.total-progress .amounts-wr .current::after,
.total-progress .amounts-wr .total::after{
    content: attr(data-title);
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #76859B;
    position: absolute;
    top: -20px;
}

.total-progress .amounts-wr .current::after{
    left: 0;
}

.total-progress .amounts-wr .total::after{
    right: 0;
}

.total-progress .amounts-wr .total::before{
    display: none;
}

.total-progress .progressbar{
    height: 48px;
    width: 100%;
    border-radius: 12px;
    margin-top: 12px;
}

.total-progress .progressbar .progress{
    border-radius: 12px;
    height: 48px;
}

.requisites-wr{
    margin-top: 120px;
    padding-left: 340px;
}

.requisites-wr > p{
    font-style: normal;
    font-weight: 900;
    font-size: 70px;
    line-height: 70px;
    letter-spacing: -0.01em;
    color: #171318;
    max-width: 575px;
}

.requisites-wr .requisites{
    font-size: 20px;
    display: flex;
    margin-top: 33px;
}

.requisites-wr .requisites li:first-child{
    margin-right: 30px;
}

.requisites-wr .requisites li img{
    width: 40px;
    height: 40px;
}

.requisites-wr > a{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 237px;
    height: 60px;
    background: #FFDA21;
    border-radius: 12px;
    text-decoration: none;
    outline: none;
    text-transform: uppercase;
    color: #171318;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    margin-top: 40px;
}

.requisites-wr > a:hover{
    background: #fbd410;
}

.section-4{
    padding-top: 148px;
    padding-bottom: 96px;
}

.section-4 h2{
    margin-bottom: 40px;
}

.photos{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.photos .photo-item{
    width: 360px;
    margin-bottom: 24px;
}

.photo-item .img-link{
    text-decoration: none;
    display: block;
    overflow: hidden;
    width: 100%;
    border-radius: 16px;
}

.photo-item .img-link:hover img{
    transform: scale(1.1);
}

.photo-item img{
    width: 100%;
    height: auto;
    transition: transform 0.2s linear;
    border-radius: 16px;
}

.photo-item .title{
    display: flex;
    margin-top: 20px;
    margin-bottom: 8px;
}

.photo-item .title .place{
    font-style: normal;
    font-weight: 900;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.01em;
    color: #3D77FF;
}

.photo-item .title .date{
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #76859B;
    margin-left: 12px;
}

.photo-item .title .date a{
    text-decoration: none;
    outline: none;
    color: #76859B;
}

.photo-item .title .date a:hover{
    color: #3D77FF;
}

.photo-item > p{
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 26px;
    color: #171318;
}

footer{
    width: 100%;
    height: 289px;
    background: #3571FF;
}

footer h2{
    color: #fff;
    text-align: left;
    position: relative;
    margin-bottom: 20px;
}

footer .content{
    padding-left: 27px;
    padding-top: 77px;
    display: flex;
    justify-content: space-between;
}

footer h2::before{
    position: absolute;
    left: -22px;
    top: -27px;
}

footer .footer-text{
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    color: #FFFFFF;
}

footer .footer-text a{
    color: #fff;
    text-decoration: none;
    transition: color 0.2s linear;
    position: relative;
    /* border-bottom: solid 3px #FFDA21; */
}

footer .footer-text a span{
    position: relative;
    z-index: 2;
}


footer .footer-text a::after{
    content: "";
    display: block;
    height: 3px;
    width: 100%;
    background: #ffda21;
    position: absolute;
    left: 0;
    bottom: -4px;
    transition: height 0.2s ease-in-out;
}

footer .footer-text a:hover{
    color: #171318;
}

footer .footer-text a:hover::after {
    height: 28px;
}

.report-page section,
.contact-page section,
.donate-page section{
    background-image: url('/image/bg.png');
    background-position: 0% 100%;
    background-repeat: repeat-x;
    padding-bottom: 106px;
    min-height: calc(100vh - 523px);
}

.donate-page section .content{
    max-width: 559px;
}

.report-page h1,
.contact-page h1,
.donate-page h1{
    font-weight: 900;
    font-size: 70px;
    line-height: 70px;
    text-align: center;
    letter-spacing: -0.01em;
    color: #171318;
    margin-bottom: 20px;
}

.report-page h1{
    font-size: 52px;
    line-height: 52px;
}

.contact-page p{
    margin-top: 32px;
    margin-bottom: 80px;
}

.report-page p,
.contact-page p,
.donate-page p{
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 26px;
    text-align: center;
    color: #76859B;
}

.report-page p{
    margin: 24px 0;
}

a.return{
    display: flex;
    align-items: center;
    border-bottom: solid 3px transparent;
    position: relative;
}

a.return:hover{
    border-bottom: solid 3px #ffda21;
}

a.return::before{
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('/image/arrow.svg');
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 16px;
    position: absolute;
    left: -32px;
    transition: transform 0.2s linear;
}

a.return:hover::before{
    transform: translateX(-5px);
}

.dropdown{
    margin-top: 32px;
    min-height: 71px;
    background: #FFFFFF;
    border-radius: 12px;
    font-weight: 900;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.01em;
    color: #171318;
    position: relative;
    box-sizing: border-box;
    padding: 8px 132px 8px 24px;
    cursor: default;
    max-width: 552px;
}

.dropdown + .cards-wr{
    margin-top: 24px;
}

.dropdown .img{
    width: 64px;
    height: 64px;
    position: absolute;
    right: 24px;
    top: 3px;
}

.dropdown .img img{
    height: 100%;
    width: auto;
    position: absolute;
    right: 0;
}

.dropdown .dropdown-title{
    display: block;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #76859B;
    margin-bottom: 4px;
}

.cards-wr{
    display: flex;
    justify-content: space-between;
    max-width: 552px;
    margin-top: 32px;
}

.bank-card{
    width: 264px;
    height: 272px;
    background: #FFFFFF;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 32px;
    box-sizing: border-box;
}

.bank-card .bank-name{
    display: block;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: #76859B;
    margin-bottom: 8px;
}

.bank-card .card-number{
    display: block;
    font-weight: 900;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    letter-spacing: -0.01em;
    color: #171318;
}

.bank-card .button-group{
    display: flex;
    justify-content: space-between;
    width: 168px;
}

.bank-card .button-group a{
    width: 48px;
    height: 48px;
    background: rgba(61, 119, 255, 0.12);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    outline: none;
    transition: transform 0.2s linear;
}

.bank-card .button-group a:hover{
    transform: scale(1.1);
}

.message{
    position: fixed;
    top: 25px;
    left: 50%;
    transform: translate(-50%, -200%);
    background: #3571FF;
    color: #fff;
    border-radius: 12px;
    display: inline-block;
    padding: 12px 16px;
    box-shadow: 0px 0px 10px #dbdbdb;
    font-weight: 500;
    font-size: 16px;
    transition: transform 0.3s ease-in-out, opacity 0.2s linear;
    white-space: nowrap;
    opacity: 0;
}

.show-message .message{
    transform: translate(-50%, 0%);
    opacity: 1;
}

.popup-bg{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.5;
    z-index: 5;
    display: none;
    opacity: 0;
    transition: opacity 0.2s linear;
}

.popup{
    width: 260px;
    height: 260px;
    background: #fff;
    border-radius: 12px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2 linear;
    padding: 20px;
    box-sizing: border-box;
}

.popup img{
    display: none;
    max-width: 100%;
    height: auto;
}

.popup.mono img.mono-qr{
    display: block;
}

.popup.privat img.privat-qr{
    display: block;
}

.show-popup .popup-bg{
    opacity:  0.5;
}

.show-popup .popup{
    opacity: 1;
}

.report-page .img-cover{
    max-width: 100%;
    height: auto;
}

.report-page .gallery{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 24px;
}

.report-page .gallery::after {
    content: "";
    display: block;
    min-width: 360px;
    height: 1px;
}

.report-page .gallery .gallery-item{
    overflow: hidden;
    border-radius: 16px;
    margin-bottom: 24px;
    display: block;
}

.report-page .gallery .gallery-item img{
    max-width: 360px;
    height: auto;
    border-radius: 16px;
}

@media (max-width: 1140px){
    h2{
        font-size: 24px;
        line-height: 24px;
    }

    h2::before{
        width: 18px;
        height: 22px;
        background-size: contain;
        top: -22px;
    }

    header{
        margin-top: 14px;
        margin-bottom: 24px;
        padding: 0 20px;
    }
    header nav{
        position: fixed;
        top: 0;
        left: 0;
        width: 60%;
        height: 100%;
        background: #fff;
        z-index: 10;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        transform: translate(-100%, 0);
        transition: transform 0.25s ease-in-out;
    }

    
    header nav.open{
        transform: translate(0%,0);
    }

    header nav a{
        margin-right: 0;
        font-size: 18px;
        margin-top: 20px;
    }

    header .contact-btn{
        margin-left: 0;
        width: 106px;
        height: 36px;
    }

    header .donate-btn{
        width: 114px;
        height: 36px;
    }

    header .donate-btn span{
        display: none;
    }

    header .mob-menu{
        display: block;
    }

    header .mob-menu-bg{
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: #171318;
        opacity: 0.6;
        z-index: 9;
    }

    header nav.open ~ .mob-menu-bg{
        display: block;
    }

    .section-1{
        padding: 0 20px;
    }

    .section-1 h1{
        font-size: 40px;
        line-height: 40px;
    }

    .section-1 p{
        font-size: 14px;
        line-height: 20px;
    }

    .requisites{
        font-size: 14px;
        line-height: 20px;
        margin-top: 17px;
    }

    .requisites li img{
        width: 24px;
        height: 24px;
        margin-right: 4px;
    }

    .section-1 .content{
        padding-bottom: 190px;
        background-size: contain;
        background-size: 70%;
        background-position: 65% 100%;
    }

    .section-1 .requisites li + li{
        margin-top: 4px;
    }

    .section-1 .qr{
        display: none;
    }

    .section-1 .decor{
        display: none;
    }

    .section-2{
        padding: 53px 20px 0px;
    }

    .section-2 p{
        font-size: 14px;
        line-height: 20px;
        margin-top: 16px;
        margin-bottom: 24px;
    }

    .social-media a img{
        width: 48px;
        height: 48px;
    }

    .social-media a.instagram{
        width: 48px;
        height: 48px;
        margin-left: 16px;
    }

    .social-media a.instagram img{
        width: 24px;
    }

    .section-3{
        padding-top: 66px;
        background-image: url('/image/bg.png'), url('/image/soldier-7.png');
        background-position: 0% 100%, 100% 100%;
        background-repeat: repeat-x, no-repeat;
    }

    .section-3 .decor{
        display: none;
    }

    .section-3 h2{
        margin-bottom: 25px;
    }

    .section-3 .content{
        padding: 0 20px 80px;
    }

    .d-wr > span{
        font-size: 32px;
        line-height: 40px;
    }

    .progress-title{
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        display: block;
        margin-bottom: 2px;
    }

    .amounts-wr{
        flex-direction: column;
        align-items: center;
    }

    .amounts-wr .current{
        font-size: 32px;
        line-height: 40px;
        margin-bottom: 34px;
    }

    .amounts-wr .total{
        font-size: 20px;
        line-height: 20px;
    }

    .d-item.right .d-img{
        background-image: none;
    }

    .d-item{
        flex-direction: column;
        min-width: 320px;
        max-width: 420px;
        width: 100%;
        position: relative;
        background-image: url('/image/blue-bg.svg');
        background-position: 0% 0%;
        background-repeat: no-repeat;
        margin: auto;
        padding-top: 20px;
    }

    .d-item + .d-item{
        margin-top: 52px;
    }

    .d-wr{
        min-width: 320px;
        max-width: 420px;
        width: 100%;
        text-align: center;
    }

    .d-wr > a{
        font-size: 14px;
        height: 48px;
        margin-top: 12px;
    }

    .d-wr > span{
        margin-bottom: 240px;
        display: block;
    }

    .donate-page .d-progress{
        padding: 0 20px;
        box-sizing: border-box;
    }

    .d-progress{
        min-width: 320px;
        max-width: 420px;
        width: 100%;
    }

    .progressbar{
        min-width: 320px;
        max-width: 420px;
        width: 100%;
        margin-top: 0;
        transform: translateY(-43px);
    }

    .d-img{
        margin-left: 0;
        width: 240px;
        height: 240px;
        position: absolute;
        bottom: 185px;
        left: 50%;
        transform: translate(-50%,0);
        background-image: none;
    }

    .d-img img{
        height: 100%;
        width: auto;
    }

    .d-item.right .d-img{
        margin-right: 0;
    }

    .d-list{
        margin: 48px auto 0;
        flex-direction: column;
        align-items: center;
        min-width: 320px;
        max-width: 420px;
        width: 100%;
    }

    .d-list li{
        width: 100%;
    }

    .d-list li:nth-child(odd){
        margin-right: 0;
    }

    .d-list li a{
        font-size: 14px;
        min-width: 320px;
        max-width: 420px;
        width: 100%;
        height: auto;
        align-items: center;
        padding: 4px 12px;
    }

    .d-list li + li{
        margin-top: 8px;
    }

    .total-progress{
        min-width: 320px;
        max-width: 420px;
        width: 100%;
        margin: 60px auto 0;
    }

    .total-progress .progressbar{
        height: 36px;
        margin-top: 0;
        transform: translate(0px, -130px);
    }

    .total-progress .progressbar .progress{
        height: 36px;
    }

    .total-progress .amounts-wr .current{
        margin-bottom: 88px;
    }

    .total-progress .amounts-wr .current::after,
    .total-progress .amounts-wr .total::after{
        left: 0;
        right: 0;
        display: block;
        text-align: center;
    }

    .requisites-wr{
        margin: 64px auto 0;
        min-width: 320px;
        max-width: 420px;
        width: 100%;
        padding: 0;
    }

    .requisites-wr > p{
        font-size: 40px;
        line-height: 40px;
    }

    .requisites-wr .requisites{
        display: none;
    }

    .requisites-wr > a{
        height: 48px;
        font-size: 14px;
        margin-top: 36px;
    }

    .section-4{
        padding-top: 60px;
        padding-bottom: 48px;
    }

    .section-4 h2{
        margin-bottom: 28px;
    }

    .photos{
        min-width: 320px;
        max-width: 420px;
        width: 100%;
        margin: auto;
        justify-content: center;
    }

    footer .content{
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        padding-top: 37px;
        padding-left: 20px;
        padding-right: 20px;
    }

    footer h2{
        text-align: center;
        margin-bottom: 12px;
    }

    footer h2::before{
        position: relative;
        top: -20px;
        left: 0;
    }

    footer .social-media{
        margin-top: 40px;
    }
    
    .report-page nav,
    .contact-page nav,
    .donate-page nav{
        display: block;
    }

    .report-page h1,
    .contact-page h1,
    .donate-page h1{
        font-size: 40px;
        line-height: 40px;
        padding: 0 20px;
    }

    .report-page p,
    .contact-page p,
    .donate-page p{
        font-size: 14px;
        line-height: 20px;
        padding: 0 20px;
    }

    .report-page .gallery{
        justify-content: center;
    }

    .report-page .gallery .gallery-item{
        margin: 12px;
    }
    
}

@media (max-width: 530px){
    .dropdown{
        margin: 32px 20px 24px;
    }

    .cards-wr{
        overflow-x: auto;
        padding: 0 20px;    
        -ms-overflow-style: none;
        scrollbar-width: none;    
    }

    .cards-wr::-webkit-scrollbar{
        display: none;
    }

    

    .bank-card{
        width: 216px;
        min-width: 216px;
        height: 256px;
        padding: 36px 0 24px;
    }

    .bank-card + .bank-card{
        margin-left: 16px;
    }

    .bank-card .bank-name{
        margin-bottom: 4px;
    }
}