@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');

html::-webkit-scrollbar {
    width: 0px;
}

body {
    display: flex;
    flex-flow: column nowrap;
    gap: 0px;
    margin: 0px auto;
    width: 100%;
    background: #FCF7F8;
}

header {
    display: flex;
    flex-flow: row nowrap;
    gap: 32px;
    margin: 0px auto;
    width: 100%;
    height: 115px;
    background: #202A25;
    align-items: center;
    justify-content: center;
}

@media screen and (min-width: 640px) and (max-width: 1919px) {
    header {
        gap: 2%;
    }
}

@media screen and (max-width: 639px) {
    header {
        height: auto;
        gap: 2%;
    }

    #servicesId,
    #workAreaId,
    #aboutCompanyId,
    #contactId {
        display: none;
    }
}

a {
    width: auto;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 34px;
    height: 34px;
    text-align: center;
    color: #FCF7F8;
    cursor: pointer;
}

a:hover {
    color: #E84855;
    cursor: pointer;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

@media screen and (min-width: 640px) and (max-width: 1919px) {
    a {
        font-size: 160%;
        height: auto;
    }
}

p {
    color: #FCF7F8;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    line-height: normal;
}

#logo {
    width: 400px;
    height: 96px;
}

@media screen and (min-width: 640px) and (max-width: 1919px) {
    #logo {
        width: 20%;
        height: auto;
    }
}

@media screen and (max-width: 639px) {
    #logo {
        width: 20%;
        height: auto;
        padding: 1% 0px 1% 0px;
    }
}

.mainSlider {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    gap: 72px;
    width: 100%;
    height: 885px;
    background: #202A25;

}

@media screen and (min-width: 640px) and (max-width: 1919px) {
    .mainSlider {
        gap: 6%;
        height: auto;
    }
}

@media screen and (max-width: 639px) {
    .mainSlider {
        gap: 6%;
        height: auto;
    }
}

#mainImg {
    width: 610px;
    height: 800px;
}

@media screen and (min-width: 640px) and (max-width: 1919px) {
    #mainImg {
        width: 35%;
        height: auto;
    }
}

@media screen and (max-width: 639px) {
    #mainImg {
        display: none;
    }
}

.titleForm {
    width: 918px;
    height: 728px;
    display: flex;
    flex-flow: column nowrap;
    gap: 24px;
    align-items: center;
    padding-top: 15px;
}

@media screen and (min-width: 640px) and (max-width: 1919px) {
    .titleForm {
        width: 40%;
        height: auto;
        padding-top: 0px;
        gap: 12px;
    }
}

@media screen and (max-width: 639px) {
    .titleForm {
        width: 80%;
        height: auto;
        padding-top: 2%;
        gap: 0px;
    }
}

.title {
    position: relative;
    width: 918px;
    height: 352px;
    background: url("sources/titleBg.png") no-repeat;
    background-size: 100% 100%;
}

@media screen and (min-width: 640px) and (max-width: 1919px) {
    .title {
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
    }
}

@media screen and (max-width: 639px) {
    .title {
        width: 100%;
        height: 100%;
        background-size: 100% 90%;
    }
}

.titleText {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 918px;
    height: 352px;
    font-size: 48px;
    font-weight: 500;
    margin: 0px;
}

@media screen and (min-width: 640px) and (max-width: 1919px) {
    .titleText {
        width: 100%;
        height: 200%;
        font-size: 180%;
        margin-top: 10%;
        margin-bottom: 10%;
    }
}

@media screen and (max-width: 639px) {
    .titleText {
        width: 100%;
        height: auto;
        font-size: 100%;
        margin-top: 10%;
        margin-bottom: 10%;
    }
}

form {
    width: 450px;
    height: 352px;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

@media screen and (min-width: 640px) and (max-width: 1919px) {
    form {
        width: 100%;
        height: auto;
        gap: 12px;
    }
}

@media screen and (max-width: 639px) {
    form {
        width: 80%;
        height: auto;
        gap: 4px;
    }
}

input {
    width: 450px;
    height: 70px;
    border-radius: 25px;
    border: 1px solid #E84855;
    background: #FCF7F8;
    text-indent: 25px;
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

input::-webkit-input-placeholder {
    color: #838383;
}

@media screen and (min-width: 640px) and (max-width: 1919px) {
    input {
        width: 80%;
        height: 50px;
        font-size: 140%;
    }
}

@media screen and (max-width: 639px) {
    input {
        width: 80%;
        height: 25px;
        font-size: 80%;
        text-indent: 4%;
    }
}

.submit {
    width: 450px;
    height: 70px;
    border-radius: 25px;
    border: 1px solid #E84855;
    background: #E84855;
    color: #FCF7F8;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 34px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

@media screen and (min-width: 640px) and (max-width: 1919px) {
    .submit {
        width: 80%;
        height: 50px;
        font-size: 140%;
    }
}

@media screen and (max-width: 639px) {
    .submit {
        width: 80%;
        height: 25px;
        font-size: 80%;
        margin-bottom: 10%;
    }
}

#separator {
    height: 50px;
}

@media screen and (max-width: 639px) {
    #separator {
        display: none;
    }
}

.servicesBlock {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 0px;
}

.firstSection {
    display: flex;
    flex-flow: row nowrap;
    gap: 254px;
    width: 100%;
    height: 911px;
    padding-top: 24px;
    justify-content: center;
    align-items: center;
    padding-bottom: 41px;
}

@media screen and (min-width: 640px) and (max-width: 1919px) {
    .firstSection {
        height: auto;
        gap: 150px;
        align-items: normal;
    }
}

@media screen and (max-width: 639px) {
    .firstSection {
        width: 80%;
        padding-top: 1%;
        padding-bottom: 1%;
        flex-flow: column nowrap;
        height: auto;
        gap: 6px;
        align-items: normal;
    }
}

.compInfo {
    display: flex;
    flex-flow: column nowrap;
    gap: 24px;
    align-items: center;
}

@media screen and (min-width: 640px) and (max-width: 1919px) {
    .compInfo {
        width: 40%;
        gap: 16px;
    }
}

@media screen and (max-width: 639px) {
    .compInfo {
        width: 100%;
        gap: 6px;
    }
}

#sectionIcon {
    width: 80px;
    height: 96px;
}

#compInfoText {
    display: flex;
    width: 550px;
    height: 671px;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    color: #000;
    text-align: justify;
    font-feature-settings: 'dlig' on;
    font-size: 40px;
    font-weight: 400;
    margin: 0px;
}

@media screen and (min-width: 640px) and (max-width: 1919px) {
    #sectionIcon {
        width: 5%;
        height: auto;
    }

    #compInfoText {
        width: 100%;
        height: auto;
        font-size: 140%;
    }
}

@media screen and (max-width: 639px) {
    #sectionIcon {
        width: 5%;
        height: auto;
    }

    #compInfoText {
        width: 100%;
        height: auto;
        font-size: 80%;
    }
}

.workPicture {
    position: relative;
    width: 580px;
    height: 680px;
}

#picture {
    position: absolute;
    width: 550px;
    height: 650px;
    top: 0px;
    left: 0px;
}

.pictureBg {
    position: relative;
    width: 550px;
    height: 650px;
    border: 10px solid #E84855;
    background: rgba(217, 217, 217, 0.00);
    top: 30px;
    left: 30px;
}

@media screen and (min-width: 640px) and (max-width: 1919px) {
    .workPicture {
        width: 15%;
        height: auto;
    }

    #picture {
        width: 100%;
        height: 100%;
    }

    .pictureBg {
        width: 100%;
        height: 100%;
        top: 1%;
        left: 1%;
        margin: 0px;
        border: 5px solid #E84855;
    }
}

@media screen and (max-width: 639px) {
    .workPicture {
        display: none;
    }
}

.secondSection {
    display: flex;
    flex-flow: column nowrap;
    gap: 15px;
    width: 100%;
    align-items: center;
    justify-content: center;
    height: 603px;
    background: #202A25;
}

@media screen and (min-width: 640px) and (max-width: 1919px) {
    .secondSection {
        width: 100%;
        height: auto;
    }
}

@media screen and (max-width: 639px) {
    .secondSection {
        width: 100%;
        height: auto;
    }
}

#sectionTitle {
    text-align: center;
    font-feature-settings: 'dlig' on;
    font-size: 40px;
    font-weight: 800;
    margin: 0px;
    padding-top: 24px;
    line-height: 40px;
}

@media screen and (min-width: 640px) and (max-width: 1919px) {
    #sectionTitle {
        font-size: 180%;
        line-height: auto;
        padding-top: 0px;
    }
}

@media screen and (max-width: 639px) {
    #sectionTitle {
        font-size: 100%;
        line-height: 100%;
        padding-top: 3%;
    }
}

.cards {
    width: 1586px;
    height: 385px;
    display: flex;
    flex-flow: row nowrap;
    gap: 30px;
    padding-top: 21px;
}

@media screen and (min-width: 640px) and (max-width: 1919px) {
    .cards {
        width: 50%;
        height: auto;
        flex-flow: row wrap;
        justify-content: center;
        gap: 12px;
        padding-top: 0px;
    }
}

@media screen and (max-width: 639px) {
    .cards {
        width: 80%;
        height: auto;
        flex-flow: row wrap;
        justify-content: center;
        gap: 6px;
        padding-top: 0px;
    }
}

.card {
    width: 374px;
    height: 355px;
    display: flex;
    flex-flow: column nowrap;
    gap: 24px;
    align-items: center;
    justify-content: center;
    background: url("sources/cardBg.png") no-repeat;
}

.card:hover {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

@media screen and (min-width: 640px) and (max-width: 1919px) {
    .card {
        width: 35%;
        height: 100%;
        gap: 10%;
        background-size: 100% 100%;
    }
}

@media screen and (max-width: 639px) {
    .card {
        width: 45%;
        height: 100%;
        gap: 10%;
        background-size: 100% 100%;
    }
}

#cardIcon {
    width: 100px;
    height: 100px;
}

#cardDescr {
    display: flex;
    width: 334px;
    height: 171px;
    flex-direction: column;
    justify-content: center;
    color: #000;
    text-align: center;
    font-size: 34px;
    font-weight: 400;
    margin: 0px;
}

@media screen and (min-width: 640px) and (max-width: 1919px) {
    #cardIcon {
        padding-top: 10%;
        width: 20%;
        height: 20%;
    }

    #cardDescr {
        width: 90%;
        height: 100%;
        font-size: 140%;
        padding-bottom: 10%;
        hyphens: auto;
        word-wrap: break-word;
    }
}

@media screen and (max-width: 639px) {
    #cardIcon {
        padding-top: 10%;
        width: 30%;
        height: 30%;
    }

    #cardDescr {
        width: 90%;
        height: 100%;
        font-size: 70%;
        padding-bottom: 10%;
        hyphens: auto;
        word-wrap: break-word;
    }
}

.toForm {
    width: 450px;
    height: 99px;
    background: url("sources/buttonBg.png");
    color: #FCF7F8;
    text-align: center;
    font-family: Montserrat;
    font-size: 34px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border: none;
}

.toFormFromMap {
    width: 450px;
    height: 99px;
    background: url("sources/buttonBg.png");
    color: #FCF7F8;
    text-align: center;
    font-family: Montserrat;
    font-size: 34px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border: none;
}

@media screen and (min-width: 640px) and (max-width: 1919px) {
    .toForm {
        width: 20%;
        height: 50px;
        font-size: 120%;
        background-size: 100% 100%;
    }
}

@media screen and (max-width: 639px) {
    .toForm {
        width: 40%;
        height: 25px;
        font-size: 80%;
        background-size: 100% 100%;
        margin-bottom: 5%;
    }
}

button:hover {
    cursor: pointer;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

.thirdSection {
    display: flex;
    flex-flow: column nowrap;
    gap: 20px;
    align-items: center;
    height: 941px;
}

@media screen and (min-width: 640px) and (max-width: 1919px) {
    .thirdSection {
        height: auto;
        gap: 12px;
    }
}

@media screen and (max-width: 639px) {
    .thirdSection {
        width: 100%;
        height: auto;
        gap: 6px;
    }
}

.cardsDark {
    width: 1586px;
    height: 740px;
    display: flex;
    flex-flow: row wrap;
    row-gap: 0px;
    column-gap: 30px;
    justify-content: center;
}

@media screen and (min-width: 640px) and (max-width: 1919px) {
    .cardsDark {
        width: 80%;
        height: auto;
        flex-flow: row wrap;
        justify-content: center;
        gap: 12px;
        padding-top: 0px;
    }
}

@media screen and (max-width: 639px) {
    .cardsDark {
        width: 80%;
        height: auto;
        flex-flow: row wrap;
        justify-content: center;
        gap: 6px;
        padding-top: 0px;
    }
}

.cardDark {
    width: 374px;
    height: 355px;
    display: flex;
    flex-flow: column nowrap;
    gap: 24px;
    align-items: center;
    justify-content: center;
    background: url("sources/cardBgDark.png");
}

.cardDark:hover {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

@media screen and (min-width: 640px) and (max-width: 1919px) {
    .cardDark {
        width: 35%;
        height: 100%;
        gap: 10%;
        background-size: 100% 100%;
    }
}

@media screen and (max-width: 639px) {
    .cardDark {
        width: 45%;
        height: 100%;
        gap: 10%;
        background-size: 100% 100%;
    }
}

#cardDescrDark {
    display: flex;
    width: 334px;
    height: 70px;
    flex-direction: column;
    justify-content: center;
    color: #FFF;
    text-align: center;
    font-size: 34px;
    font-weight: 400;
}

#cardDescrDarkLarge {
    display: flex;
    width: 334px;
    height: 70px;
    flex-direction: column;
    justify-content: center;
    color: #FFF;
    text-align: center;
    font-size: 34px;
    font-weight: 400;
}

@media screen and (min-width: 640px) and (max-width: 1919px) {
    #cardDescrDark {
        width: 90%;
        height: 100%;
        font-size: 140%;
        padding-bottom: 10%;
        hyphens: auto;
        word-wrap: break-word;
    }

    #cardDescrDarkLarge {
        width: 90%;
        height: 100%;
        font-size: 140%;
        padding-bottom: 10%;
        hyphens: auto;
        word-wrap: break-word;
        margin: 0px;
        padding-bottom: 10%;
    }
}

@media screen and (max-width: 639px) {
    #cardDescrDark {
        width: 90%;
        height: 100%;
        font-size: 70%;
        padding-bottom: 10%;
        hyphens: auto;
        word-wrap: break-word;
    }

    #cardDescrDarkLarge {
        width: 90%;
        height: 100%;
        font-size: 70%;
        padding-bottom: 10%;
        hyphens: auto;
        word-wrap: break-word;
    }
}

.cardDarkLarge {
    width: 778px;
    height: 355px;
    display: flex;
    flex-flow: column nowrap;
    gap: 24px;
    align-items: center;
    justify-content: center;
    background: url("sources/cardBgDarkLarge.png");
}

.cardDarkLarge:hover {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

@media screen and (min-width: 640px) and (max-width: 1919px) {
    .cardDarkLarge {
        width: 72%;
        height: 100%;
        gap: 12px;
        background-size: 100% 100%;
    }
}

@media screen and (max-width: 639px) {
    .cardDarkLarge {
        width: 93%;
        height: 100%;
        gap: 6px;
        background-size: 100% 100%;
    }
}

#cardIconLarge {
    width: 472px;
    height: 100px;
}

@media screen and (min-width: 640px) and (max-width: 1919px) {
    #cardIconLarge {
        padding-top: 10%;
        width: 40%;
        height: auto;
    }
}

@media screen and (max-width: 639px) {
    #cardIconLarge {
        padding-top: 10%;
        width: 40%;
        height: auto;
    }
}

.map {
    height: 790px;
    display: flex;
    flex-flow: row nowrap;
    gap: 161px;
    justify-content: center;
    align-items: center;
    background: #202A25;
}

@media screen and (min-width: 640px) and (max-width: 1919px) {
    .map {
        width: 100%;
        height: auto;
        gap: 2%;
        align-items: normal;
    }
}

@media screen and (max-width: 639px) {
    .map {
        flex-flow: column nowrap;
        align-items: center;
        width: 100%;
        height: auto;
        gap: 6px;
        align-items: center;
    }
}

.mapDescr {
    width: 795px;
    height: 437px;
    display: flex;
    flex-flow: column nowrap;
    gap: 24px;
    align-items: center;
    justify-content: center;
}

@media screen and (min-width: 640px) and (max-width: 1919px) {
    .mapDescr {
        width: 40%;
        height: auto;
        gap: 12px;
    }

    #yaMap {
        width: 40%;
        height: auto;
    }
}

@media screen and (max-width: 639px) {
    .mapDescr {
        width: 100%;
        height: auto;
        gap: 6px;
    }

    #yaMap {
        width: 80%;
        height: 320px;
        margin-bottom: 10%;
    }
}

#details {
    display: flex;
    width: 795px;
    height: 250px;
    flex-direction: column;
    justify-content: center;
    color: #FFF;
    text-align: justify;
    font-size: 34px;
    font-weight: 400;
    margin: 0px;
}

@media screen and (min-width: 640px) and (max-width: 1919px) {
    #details {
        width: 90%;
        height: auto;
        font-size: 120%;
    }

    .toFormFromMap {
        width: 60%;
        height: 50px;
        font-size: 120%;
        background-size: 100% 100%;
    }
}

@media screen and (max-width: 639px) {
    #details {
        width: 90%;
        height: auto;
        font-size: 80%;
    }

    .toFormFromMap {
        width: 40%;
        height: 25px;
        font-size: 80%;
        background-size: 100% 100%;
    }
}

.company {
    display: flex;
    flex-flow: column nowrap;
    gap: 24px;
    align-items: center;
}

@media screen and (min-width: 640px) and (max-width: 1919px) {
    .company {
        gap: 12px;
    }
}

@media screen and (max-width: 639px) {
    .company {
        width: 100%;
        align-items: center;
        gap: 6px;
    }
}

#sectionIconLarge {
    width: 80px;
    height: 96px;
}

#detailsInfo {
    display: flex;
    width: 1576px;
    height: 630px;
    flex-direction: column;
    justify-content: center;
    color: #000;
    text-align: justify;
    font-size: 40px;
    font-weight: 400;
}

@media screen and (min-width: 640px) and (max-width: 1919px) {
    #sectionIconLarge {
        width: 2%;
        height: auto;
    }

    #detailsInfo {
        margin: 0px;
        width: 80%;
        height: auto;
        font-size: 120%;
    }
}

@media screen and (max-width: 639px) {
    #sectionIconLarge {
        width: 5%;
        height: auto;
    }

    #detailsInfo {
        margin: 0px;
        width: 80%;
        height: auto;
        font-size: 80%;
    }
}

.workPics {
    width: 1234px;
    height: 680px;
    display: flex;
    flex-flow: row nowrap;
    gap: 80px;
    align-items: center;
}

.workPictureWk {
    position: relative;
    width: 580px;
    height: 680px;
}

#pictureWk {
    position: absolute;
    width: 550px;
    height: 650px;
    top: 0px;
    left: 0px;
}

.pictureBgWk {
    position: relative;
    width: 550px;
    height: 650px;
    border: 10px solid #E84855;
    background: rgba(217, 217, 217, 0.00);
    top: 30px;
    left: 30px;
}

@media screen and (min-width: 640px) and (max-width: 1919px) {
    .workPics {
        display: none;
    }
}

@media screen and (max-width: 639px) {
    .workPics {
        display: none;
    }
}

.workVideo {
    position: absolute;
    width: 1234px;
}

.videoBg {
    position: relative;
    width: 1204px;
    height: 649px;
    border: 10px solid #E84855;
    background: rgba(217, 217, 217, 0.00);
    top: 30px;
    left: 30px;
    margin-bottom: 50px;
}

#video {
    position: relative;
    top: -30px;
    left: -30px;
}

.workProcTitle {
    padding-top: 26px;
}

@media screen and (min-width: 640px) and (max-width: 1919px) {
    .workVideo {
        display: none;
    }

    .workProcTitle {
        padding-top: 12px;
    }

    .videoBg {
        width: 50em;
        height: 40em;
    }

    #video {
        width: 50em;
        height: 40em;
    }
}

@media screen and (max-width: 639px) {
    .workVideo {
        display: none;
    }

    .workProcTitle {
        padding-top: 10%;
    }

    .videoBg {
        top: 0px;
        left: 0px;
        width: 15em;
        height: 12em;
        border: 2px solid #E84855;
        margin-bottom: 10%;
    }

    #video {
        top: -1%;
        left: -1%;
        width: 15em;
        height: 12em;
    }
}

footer {
    background: #202A25;
    height: auto;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    gap: 45px;
}

@media screen and (min-width: 640px) and (max-width: 1919px) {
    footer {
        width: 100%;
        align-items: center;
        justify-content: center;
        gap: 5%;
    }
}

@media screen and (max-width: 639px) {
    footer {
        width: 100%;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
}

.footerFullInfo {
    display: flex;
    flex-flow: row nowrap;
    gap: 140px;
    align-items: center;
    justify-content: center;
}

@media screen and (min-width: 640px) and (max-width: 1919px) {
    .footerFullInfo {
        width: 100%;
        gap: 5%;
        align-items: normal;
    }
}

@media screen and (max-width: 639px) {
    .footerFullInfo {
        flex-flow: column nowrap;
        width: 100%;
        gap: 5%;
        align-items: center;
    }
}

.footerMenu {
    padding-top: 40px;
    display: flex;
    flex-flow: column nowrap;
    gap: 12px;
}

@media screen and (min-width: 640px) and (max-width: 1919px) {
    .footerMenu {
        padding-top: 10px;
        gap: 5%;
        width: 25%;
    }
}

@media screen and (max-width: 639px) {
    .footerMenu {
        padding-top: 4%;
        gap: 5%;
        width: 60%;
        align-items: center;
    }
}

.contacts {
    padding-top: 40px;
    width: 520px;
    height: 210px;
    display: flex;
    flex-flow: column nowrap;
    gap: 10px;
}

#contactText {
    display: flex;
    height: 34px;
    flex-direction: column;
    justify-content: center;
    color: #FCF7F8;
    text-align: center;
    font-size: 34px;
    font-weight: 400;
    margin: 0px;
}

@media screen and (min-width: 640px) and (max-width: 1919px) {
    .contacts {
        padding-top: 10px;
        width: 25%;
        height: auto;
        gap: 5%;
    }

    #contactText {
        height: auto;
        font-size: 120%;
        word-wrap: break-word;
    }
}

@media screen and (max-width: 639px) {
    .contacts {
        padding-top: 1%;
        width: 100%;
        height: auto;
        gap: 5%;
    }

    #contactText {
        height: auto;
        font-size: 80%;
        word-wrap: break-word;
    }
}

.footerInfo {
    padding-top: 40px;
    display: flex;
    flex-flow: column nowrap;
    gap: 24px;
}

#jurInfo {
    display: flex;
    width: 400px;
    height: 172px;
    flex-direction: column;
    justify-content: center;
    color: #FCF7F8;
    text-align: center;
    font-size: 34px;
    font-weight: 400;
    margin: 0px;
}

@media screen and (min-width: 640px) and (max-width: 1919px) {
    .footerInfo {
        padding-top: 10px;
        gap: 5%;
        width: 25%;
    }

    #jurInfo {
        width: 100%;
        height: auto;
        font-size: 140%;
    }
}

@media screen and (max-width: 639px) {
    .secondPic {
        display: none;
    }

    .footerInfo {
        padding-top: 4%;
        gap: 5%;
        width: 60%;
    }

    #jurInfo {
        width: 100%;
        height: auto;
        font-size: 80%;
    }
}

#designed {
    color: #FCF7F8;
    font-size: 34px;
    font-weight: 400;
    margin: 0px;
}

@media screen and (min-width: 640px) and (max-width: 1919px) {
    #designed {
        font-size: 120%;
    }

    #telegram {
        font-size: 120%;
    }
}

@media screen and (max-width: 639px) {
    #designed {
        padding-top: 4%;
        font-size: 80%;
    }

    #telegram {
        font-size: 80%;
    }
}

#logoFooter {
    width: 400px;
    height: 96px;
    padding-bottom: 12px;
}

@media screen and (min-width: 640px) and (max-width: 1919px) {
    #logoFooter {
        width: 100%;
        height: 100%;
    }
}

@media screen and (max-width: 639px) {
    #logoFooter {
        padding-bottom: 0px;
        width: 100%;
        height: 100%;
    }
}