@media only screen and (max-width: 1699px) {
    footer.footer {
        padding: 100px 0;
    }
    .ftr-icn span {
        display: inline-block;
        max-width: 120px;
    }
    .ftr-cont h2 {
        font-size: 45px;
    }
    .ftr-cont p {
        font-size: 30px;
    }
    .ftr-cont h5 {
        font-size: 32px;
    }
}
@media only screen and (max-width:1199px) {
    footer.footer {
        padding: 50px 0;
    }
    .ftr-icn span {
        max-width: 100px;
    }
    .ftr-cont h2 {
        font-size: 35px;
    }
    .ftr-cont p {
        font-size: 23px;
    }
    .ftr-cont h5 {
        font-size: 23px;
    }
}
@media only screen and (max-width:767px) {
    .ftr-cont h2 {
        font-size: 25px;
    }
    .ftr-cont p {
        font-size: 17px;
    }
    .ftr-cont h5 {
        font-size: 18px;
    }
}
@media only screen and (max-width:414px) {
    .ftr-cont h2 {
        font-size: 22px;
    }
    .ftr-cont p {
        font-size: 14px;
    }
    .ftr-cont h5 {
        font-size: 15px;
    }
}
@media only screen and (min-width: 1700px) {
    .container {
        max-width: 1670px;
    }
}
@media only screen and (min-width : 900px) and (max-width : 1290px) and (orientation : portrait) {
}
@media only screen and (min-width : 900px) and (max-width : 1920px) and (orientation : landscape) {
}
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) {
}
@media only screen and (min-width : 1200px) and (max-width : 1280px) and (orientation : landscape) {
}
@media only screen and (max-width: 1699px) {
    :root {
        --font-primary: 4.2;
        --space-primary: 4.2;
    }
}
@media only screen and (max-width: 1280px) {
}
@media only screen and (max-width:1199px) {
    :root {
        --font-primary: 3.4;
        --space-primary: 3.4;
    }
}
@media only screen and (max-width: 991px) {
    .banner-img img, .audience-img img {
        max-width: 450px;
        margin: 0 auto;
        display: block;
    }
    .AboutProject-inner {
        max-width: 70%;
    }
    .audience-inner {
        text-align: center;
    }
    .audience-list li {
        text-align: left;
    }
    .banner-txt span {
        max-width: calc(25px * var(--font-primary));
    }
    .rk {
        font-size: calc(3.8px * var(--font-primary));
        margin: calc(5.3px * var(--space-primary)) 0 0;
    }
    .banner-cont {
        padding: calc(5px * var(--space-primary)) 0;
    }
}
@media only screen and (max-width:768px) {
}
@media only screen and (max-width:767px) {
    .AboutProject-inner {
        max-width: 90%;
    }
    .AboutProject, .audience-section, .Architecture-section, .Typography-top,
    .Typography-main, .ColorPalette-section {
        padding: calc(10px * var(--space-primary)) 0;
    }
    .UiDesign-item {
        margin-top: calc(10px * var(--space-primary));
    }
    .UiDesign-section {
        padding: calc(10px * var(--space-primary)) 0 calc(15px * var(--space-primary));
    }
    .banner-img img, .audience-img img {
        max-width: 80%;
    }
}
@media only screen and (max-width:575px) {
    :root {
        --font-primary: 3;
        --space-primary: 3;
    }
    .banner-txt {
        display: none;
    }
    .banner-cont {
        padding-top: 0;
    }
    .rk {
        font-size: 11vw;
        margin: 0;
        background-image: linear-gradient(90deg, var(--secondary-color) 50%, var(--primary-color) 50%);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        text-shadow: none;
        font-weight: bold;
    }
    .ColorPalette-item img {
        max-width: 60%;
    }
    .ColorPalette-item {
        margin: 0 0 20px;
    }
    .UiDesign-item h2 span {
        font-size: calc(7px * var(--font-primary));
    }
}
@media only screen and (max-width:414px) {
}