@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) {
    .banner-left-cont {
        padding: 230px 0 0;
    }
    header.header {
        top: 25px;
    }
    .sec-cont h2, .Understanding-cont h3 {
        font-size: 32px;
    }
    .sec-cont p, .sec-cont ul li, .Understanding-cont p {
        font-size: 22px;
    }
    .Typography-hd {
        font-size: 29px;
        margin: 0 0 40px;
    }
    .Typography-lft {
        font-size: 94px;
        width: 125px;
    }
    .banner-left-item, .section-cont-itm {
        margin: 0 0 30px;
    }
    .banner-left-item ul li {
        margin-right: 10px;
    }
    .Typography-rit {
        padding-left: 40px;
        font-size: 24px;
    }
    .banner-left-item ul li img {
        max-height: 70px;
    }
    .logo img {
        max-width: 150px;
    }
    .main-banner {
        min-height: 900px;
    }
    .section-cont-itm ul li::marker, .following-features-cont ul li::marker {
        font-size: 32px;
    }
    .section-cont-itm ul li, .following-features-cont ul li {
        margin-bottom: 10px;
    }
    .UserInterface {
        padding: 100px 0 50px;
    }
    .following-features, .ProjectTimeline, .Understanding, .Typography-section, .Colors-section {
        padding: 50px 0;
    }
    .UserInterface-head, .ProTime-head, .Under-head {
        padding: 0 0 60px;
    }
    .Colors-head {
        padding: 0 0 40px;
    }
    .ProTime-headTop {
        font-size: 25px;
    }
    .table-hd {
        font-size: 20px;
    }
    .table-col-item h3 { 
        font-size: 20px; 
    }
    .table-col-item p {
        font-size: 16px; 
    }
    .ProjectTimeline-table .container {
        overflow: auto;
        padding: 0 15px 20px;
    }
    .ProjectTimeline-table .ProTime-table {
        width: 1640px;
    }
    .Colors-img img {
        max-width: 80%;
    }
    .Colors-main .Colors-itm {
        font-size: 33px;
    }
    footer.footer {
        padding: 100px 0;
    }
    .ftr-cont h2 { 
        font-size: 45px; 
    }
    .ftr-cont p { 
        font-size: 30px; 
    }
    .ftr-cont h5 { 
        font-size: 32px; 
    }
    .ftr-icn span {
        display: inline-block;
        max-width: 120px;
    }
    .following-features-img {
        margin-top: -160px;
    }
}
@media only screen and (max-width: 1280px) {
}
@media only screen and (max-width:1199px) {
    .logo img {
        max-width: 120px;
    }
    .banner-left-cont {
        padding: 180px 0 0;
    }
    .sec-cont h2, .Understanding-cont h3 {
        font-size: 25px;
        margin-bottom: 15px;
    }
    .sec-cont p, .sec-cont ul li, .Understanding-cont p {
        font-size: 19px;
    }
    .banner-left-item ul li img {
        max-height: 55px;
    }
    .banner-left-item, .section-cont-itm {
        margin: 0 0 20px;
    }
    .main-banner {
        min-height: 710px;
    }
    .UserInterface {
        padding: 50px 0;
    }
    .Typography-hd {
        font-size: 24px;
        margin: 0 0 40px;
    }
    .Typography-lft {
        font-size: 64px;
        width: 88px;
    }
    .Typography-rit {
        padding-left: 30px;
        font-size: 20px;
    }
    .Colors-main .Colors-itm {
        font-size: 20px;
    }
    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: 991px) {
    .banner-img {
        position: static;
        margin: 0 auto;
    }
    .main-banner {
        min-height: auto;
        padding: 100px 0 0;
    }
    .logo img {
        max-width: 100px;
    }
    .banner-left-cont {
        padding: 20px 0;
    }
    .ProjectOverview {
        padding: 50px 0;
    }
    .ProjectOverview-img {
        margin-top: 0;
        text-align: center;
    }
    .ProjectOverview-img img {
        max-height: 500px;
    }
    .Understand-img-main img {
        max-height: 500px;
    }
    .Understand-img-icn {
        position: static;
        max-width: 130px;
        margin: -75px auto 0;
    }
    .Typography-section {
        padding-top: 0;
    }
    .Typography-hd {
        margin: 0 0 10px;
    }
    .Typography-main .col-lg-6:not(:last-child) .Typography-txt {
        margin: 0 0 30px;
    }
    .Understanding-item:last-child {
        padding: 0;
    }
}
@media only screen and (max-width:768px) {
}
@media only screen and (max-width:767px) {
    .Colors-main .Colors-itm {
        padding: 15px 0;
    }
    .ftr-cont h2 {
        font-size: 25px;
    }
    .ftr-cont p {
        font-size: 17px;
    }
    .ftr-cont h5 {
        font-size: 18px;
    }
    .following-features-img {
        margin-top: -50px;
    }
    .Typography-lft {
        border-radius: 25px;
    }
}
@media only screen and (max-width:575px) {
    .UserInterface-head, .ProTime-head, .Under-head {
        padding: 0 0 30px;
    }
    .ProjectOverview, .UserInterface, .following-features, .ProjectTimeline, .Understanding, .Typography-section, .Colors-section {
        padding: 20px 0;
    }
}
@media only screen and (max-width:414px) {
    .following-features-img {
        margin-top: 0;
    }
    .Typography-lft {
        font-size: 35px;
        width: 52px;
    }
    .Typography-rit {
        font-size: 17px;
    }
    .Typography-lft span {
        top: -4px;
        left: -6px;
    }
    .ftr-cont p {
        font-size: 14px;
    }
    .ftr-cont h2 {
        font-size: 22px;
    }
    .ftr-cont h5 {
        font-size: 15px;
    }
}