@media only screen and (max-width: 767px) {

    .pps-pdf-area .pdf-viewer-body {
        flex-direction: column;
        min-height: auto !important;
    }

    .pps-pdf-area .pdf-main-area {
        min-width: 100% !important;
    }

    /**/

    .metro-header {
        height: 90px;
    }

    .metro-header .metro-head-main .metro-head-main-group .head-col.head-logos .logo img {
        width: 200px;
    }

    .metro-header .metro-head-main {
        padding: 15px 0;
    }

    .metro-hero .metro-hero-container .metro-hero-shapes {
        display: none;
    }

    .metro-hero .metro-hero-container::before,
    .metro-hero .metro-hero-container::after {
        display: none;
    }

    .metro-hero .metro-hero-container .metro-hero-wrapper .metro-hero-card {
        width: 100%;
        padding: 30px 0 0;
    }

    .metro-hero .metro-hero-container .metro-hero-wrapper .metro-hero-card .metro-head h2 {
        font-size: 30px;
        line-height: 30px;
    }

    .metro-hero .metro-hero-container .metro-hero-wrapper .metro-hero-card .metro-head h2 span {
        font-size: 22px;
    }

    .metro-hero .metro-hero-container .metro-hero-wrapper .metro-hero-card .card-head {
        margin: 0 0 30px;
    }

    .metro-hero .metro-hero-container .metro-hero-wrapper .metro-hero-card .card-body .metro-hero-search .search-card {
        width: 100%;
    }

    .metro-hero .metro-hero-container .metro-hero-wrapper .metro-hero-card .card-body .metro-hero-search .search-result {
        width: 100%;
    }

    .search-result .search-result-list .result-item {
        padding: 15px;
    }

    .search-result .search-result-list .result-item .result-icon {
        width: 40px;
        height: 40px;
    }

    .search-result .search-result-list .result-item .result-icon i {
        font-size: 16px;
    }

    .search-result .search-result-list .result-item .result-content .title {
        font-size: 14px;
    }

    .search-result .search-result-list .result-item .result-content span {
        font-size: 12px;
    }

    .metro-hero .metro-hero-container .metro-hero-wrapper .metro-hero-card .card-body .search-most .search-most-group {
        flex-direction: column;
        gap: 5px;
    }

    .metro-hero .metro-hero-container .metro-hero-wrapper .metro-hero-card .card-body .search-most .search-most-group .label {
        font-size: 12px;
    }

    .metro-hero .metro-hero-container .metro-hero-wrapper .metro-hero-card .card-body .search-most .search-most-group .group-list a {
        font-size: 11px;
        height: 25px;
    }

    .metro-hero .metro-hero-container .metro-hero-wrapper .metro-hero-card .card-foot .metro-search-boxes .row {
        row-gap: 20px;
    }

    .metro-hero .metro-hero-container .metro-hero-wrapper .metro-hero-card .card-foot .metro-search-boxes .boxes-card {
        padding: 20px;
    }

    .metro-hero .metro-hero-container .metro-hero-wrapper .metro-hero-card .card-foot .metro-search-boxes .boxes-card p {
        height: auto;
    }

    .metro-courses {
        margin: 50px 0 0;
    }

    .metro-courses .metro-head a {
        font-size: 12px;
        height: 40px;
        padding: 0px 10px 0 20px;
        gap: 5px;
    }

    .metro-courses .metro-head a i {
        font-size: 16px;
        top: 0;
    }

    .metro-courses .metro-head a::before {
        width: 40px;
        height: 40px;
    }

    .metro-head .subtitle {
        font-size: 12px;
    }

    .metro-head h2 {
        font-size: 24px;
        margin: 0;
    }

    .search-card {
        height: 50px;
    }

    .search-card input {
        font-size: 14px;
        padding: 0 0 0 50px;
    }

    .search-card .icon i {
        font-size: 24px;
    }

    .search-card .icon {}


    .metro-courses::before {
        border-radius: 0 0 20px 20px;
    }

    .courses-card {}

    .courses-card .card-content {}

    .courses-card .card-content h3 {
        font-size: 15px;
    }

    .courses-card .card-content .card-sub .sub-item {
        font-size: 12px;
    }

    .courses-card .card-content .card-sub .sub-item i {
        font-size: 14px;
    }


    .metro-information {
        margin: 50px 0 0;
    }

    .information-head .head-center .head-logos img {
        height: 20px;
    }

    .information-head .head-center .head-logos {
        padding: 10px 20px;
        border-radius: 0 0 20px 20px;
    }

    .navigation-button {
        width: 40px;
        height: 40px;
    }

    .navigation-button::before {
        border-radius: 10px;
    }

    .navigation-button i {
        font-size: 20px;
    }

    .metro-information .metro-information-wrapper .information-slider .info-bg {
        display: none;
    }

    .information-head {
        margin: 0 0 50px;
    }

    .information-card .card-content h3 {
        font-size: 18px;
    }

    .information-card .card-content .metro-button {
        height: 40px;
    }

    .information-card .card-content .metro-button i {}

    .information-card .card-content .metro-button::before {}

    .metro-button {
        height: 40px;
        font-size: 14px;
        gap: 5px;
        padding: 0 10px 0 20px;
    }

    .metro-button::before {
        width: 40px;
        height: 40px;
    }

    .metro-button i {
        font-size: 18px;
    }

    .information-card .card-content {
        height: 150px;
    }


    .metro-posts {
        margin: 50px 0 0;
    }

    .metro-posts .metro-posts-wrapper .metro-head {
        flex-direction: column;
        gap: 20px;
    }

    .posts-card .card-content {
        padding: 20px;
        height: 176px;
    }

    .posts-card .card-content .date {
        font-size: 12px;
    }

    .posts-card .card-content .date i {
        font-size: 14px;
    }

    .posts-card .card-content h3 {
        font-size: 16px;
    }

    .posts-card .card-content .metro-button {
        height: 40px;
    }

    .metro-footer .metro-footer-wrapper .metro-footer-group .metro-footer-col a img {
        width: auto;
        height: 70px;
    }

    .metro-footer .metro-footer-wrapper .metro-footer-group {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .metro-footer {
        margin: -175px 0 0;
    }

    .metro-footer .metro-footer-wrapper {
        padding: 220px 0 50px;
    }

    .metro-footer .metro-footer-wrapper .metro-footer-group .metro-footer-col .metro-social {
        gap: 10px;
    }

    .metro-footer .metro-footer-wrapper .metro-footer-group .metro-footer-col .metro-social a {
        font-size: 20px;
    }

    .metro-footer .metro-copyright {
        height: auto;
        padding: 12px 0;
    }

    .metro-footer .metro-copyright .metro-copyright-group {
        flex-direction: column;
        gap: 10px;
    }

    .metro-footer .metro-copyright .metro-copyright-group .metro-copyright-col p {
        font-size: 12px;
        text-align: center;
    }

    .metro-footer .metro-copyright .metro-copyright-group .metro-copyright-col a {
        font-size: 12px;
    }

    .metro-chat {
        right: 30px;
        bottom: 30px;
    }

    .metro-chat .metro-chat-wrapper .metro-chat-box {
        height: 55px;
        width: 110px;
    }

    .metro-chat .metro-chat-wrapper .metro-chat-box .chat-icon img {
        width: 18px;
    }

    .metro-chat .metro-chat-wrapper .metro-chat-box .chat-content {
        font-size: 12px;
        line-height: 16px;
    }

    .metro-chat .metro-chat-wrapper .metro-chat-box .shadow {
        width: 125px;
        height: 70px;
    }

    .metro-chat .metro-chat-wrapper .metro-chat-box .shadow::before {
        height: 90px;
        width: 145px;
    }

    .metro-about-hero {
        height: 450px;
    }

    .metro-about-hero .metro-about-wrapper .metro-about-head .subtitle {
        font-size: 12px;
        padding: 0 10px;
        height: 35px;
    }

    .metro-about-hero .metro-about-wrapper .metro-about-head h2 {
        font-size: 26px;
        line-height: 36px;
    }

    .metro-about-hero .metro-about-wrapper .metro-about-head h2 span {
        font-size: 26px;
    }

    .metro-about-hero .metro-about-wrapper .metro-about-head p {
        font-size: 15px;
        max-width: 100%;
    }

    .metro-about-features .metro-about-features-wrapper .features-group {
        width: max-content;
    }

    .metro-about-features .metro-about-features-wrapper .features-group .features-card {
        width: 200px;
        padding: 10px;
        height: 150px;
        border: 1px solid #D0D0D0;
    }

    .metro-about-features .metro-about-features-wrapper {
        overflow-x: scroll;
        overflow-y: hidden;
    }

    .metro-about-features .metro-about-features-wrapper::-webkit-scrollbar {
        display: none;
    }

    .metro-about-features .metro-about-features-wrapper .features-group .features-card .icon {
        height: 35px;
        width: 35px;
    }

    .metro-about-features .metro-about-features-wrapper .features-group .features-card .icon i {
        font-size: 16px;
    }

    .metro-about-features .metro-about-features-wrapper .features-group .features-card .title {
        font-size: 14px;
        line-height: 1;
    }

    .metro-about-features .metro-about-features-wrapper .features-group .features-card p {
        font-size: 11px;
    }

    .metro-about-what-do {
        margin: 50px 0 0;
    }

    .metro-about-what-do .metro-head {
        margin: 0 0 30px;
        align-items: flex-start;
    }

    .metro-about-what-do .what-do-wrapper .row {
        flex-direction: column-reverse;
    }

    .swiper.swiper-what-do-list {
        height: auto;
    }

    .metro-about-what-do .what-do-list-wrapper {
        padding: 0;
    }

    .metro-about-what-do .what-do-list-wrapper .what-do-list {
        margin: 0;
        width: 100%;
    }

    .metro-about-what-do .what-do-list-wrapper .what-do-list .what-do-item {
        height: 90px;
    }

    .metro-about-what-do .what-do-list-wrapper .what-do-list .what-do-item .icon {
        width: 45px;
        height: 45px;
        min-width: 45px;
    }

    .metro-about-what-do .what-do-list-wrapper .what-do-list .what-do-item .icon i {
        font-size: 22px;
    }

    .metro-about-what-do .what-do-list-wrapper .what-do-list .what-do-item .content h3 {
        font-size: 16px;
        line-height: 20px;
    }

    .metro-about-what-do .what-do-list-wrapper .what-do-list .what-do-item .content p {
        font-size: 12px;
        line-height: 16px;
    }

    .swiper.swiper-what-do-media .swiper-wrapper .swiper-slide img {
        height: 300px;
    }

    .metro-about-what-do .what-do-wrapper .what-do-media .navigation-button {
        transform: translate(0, -50%);
    }

    .metro-about-what-do .what-do-wrapper .what-do-media .navigation-button.prev {
        left: 20px;
    }

    .metro-about-what-do .what-do-wrapper .what-do-media .navigation-button.next {
        right: 20px;
    }

    .metro-about-content .metro-about-content-boxes .about-boxes-group {
        flex-direction: column;
        width: 85%;
        gap: 20px;
    }

    .metro-about-content .metro-about-content-boxes .about-boxes-group .about-boxes .title {
        font-size: 20px;
    }

    .metro-about-content .metro-about-content-boxes .about-boxes-group .about-boxes {
        padding: 30px 20px 20px;
    }

    .metro-about-content .metro-about-content-boxes .about-boxes-group .about-boxes p {
        font-size: 12px;
    }

    .metro-about-content .metro-about-content-main .about-content-wrapper .about-content {
        text-align: center;
    }

    .metro-about-content .metro-about-content-main .about-content-wrapper .about-content p {
        font-size: 13px;
        line-height: 23px;
    }

    .metro-about-content .metro-about-content-main .about-content-wrapper .about-content h2 {
        font-size: 24px;
    }

    .metro-about-content .metro-about-content-main button {
        font-size: 13px;
        height: 40px;
        padding: 0 15px;
        margin: 40px auto 0;
    }

    .metro-about-content .metro-about-content-main button i {
        font-size: 16px;
        top: 1px;
    }

    .metro-head.page-head {
        margin: 0 0 30px;
    }

    .metro-problem-page .metro-problem-page-wrapper .problem-container .problem-card {
        padding: 30px;
        width: 100%;
        box-shadow: -1px 1px 14px 0px rgb(9 40 87 / 10%);
        -webkit-box-shadow: -1px 1px 14px 0px rgb(9 40 87 / 10%);
        -moz-box-shadow: -1px 1px 14px 0px rgb(9 40 87 / 10%);
        border-radius: 30px;
    }

    .metro-form-card {}

    .metro-form-card input,
    .metro-form-card textarea,
    .metro-form-card select {
        height: 50px;
        font-size: 13px;
    }

    .metro-problem-page .metro-problem-page-wrapper .problem-container .problem-card form .row {
        row-gap: 15px;
    }

    .metro-form-card.file {
        height: 50px;
    }

    .metro-form-card.file::before {
        width: 50px;
        height: 50px;
        background-size: 20px;
    }

    .metro-form-card.file::after {
        left: 60px;
    }

    .metro-form-card textarea {
        height: 120px;
    }


    .metro-app-page {
        margin: 40px 0 50px;
    }

    .metro-app-page .metro-app-page-wrapper .app-card {
        flex-wrap: wrap;
    }

    .metro-app-page .metro-app-page-wrapper .app-card .card-image {
        flex: unset;
        width: 30%;
    }

    .metro-app-page .metro-app-page-wrapper .app-card .card-content {
        flex: unset;
        width: 65%;
    }

    .metro-app-page .metro-app-page-wrapper .app-card .card-button {
        flex-direction: row;
    }

    .metro-app-page .metro-app-page-wrapper .app-card .card-button a {}

    .metro-app-page .metro-app-page-wrapper .app-card .card-content h3 {
        font-size: 16px;
    }

    .metro-app-page .metro-app-page-wrapper .app-card .card-content p {
        font-size: 12px;
    }

    .metro-activity-page {
        margin: 40px 0 50px;
    }

    .metro-activity-page .metro-activity-page-wrapper .activity-container .activity-filter .activity-filter-group {}

    .metro-activity-page .metro-activity-page-wrapper .activity-container .activity-filter .activity-filter-group .metro-form-card {
        width: 140px;
        box-shadow: -1px 1px 14px 0px rgb(9 40 87 / 6%);
        -webkit-box-shadow: -1px 1px 14px 0px rgb(9 40 87 / 6%);
        -moz-box-shadow: -1px 1px 14px 0px rgb(9 40 87 / 6%);
        height: 40px;
    }

    .metro-activity-page .metro-activity-page-wrapper .activity-container .activity-filter .activity-filter-group .metro-form-card select {
        height: 100%;
        font-size: 12px;
        padding: 0 15px;
    }

    .metro-activity-page .metro-activity-page-wrapper .activity-container .activity-filter .activity-filter-group .metro-form-card::after {
        width: 38px;
        height: 38px;
    }

    .activity-card {
        width: 100%;
        box-shadow: -1px 1px 14px 0px rgb(9 40 87 / 10%);
        -webkit-box-shadow: -1px 1px 14px 0px rgb(9 40 87 / 10%);
        -moz-box-shadow: -1px 1px 14px 0px rgb(9 40 87 / 10%);
        margin: 30px 0 0;
    }

    .activity-card .activity-card-list .activity-card-item {
        flex-wrap: wrap;
        padding: 20px;
    }

    .activity-card .activity-card-list .activity-card-item .card-icon {}

    .activity-card .activity-card-list .activity-card-item .card-icon img {
        width: 40px;
        height: 40px;
    }

    .activity-card .activity-card-list .activity-card-item .card-content {}

    .activity-card .activity-card-list .activity-card-item .card-button {
        width: 100%;
        flex: unset;
        margin: 20px 0 0;
    }

    .activity-card .activity-card-list .activity-card-item .card-button a {
        height: 35px !important;
        font-size: 12px !important;
        padding: 0 20px !important;
    }

    .activity-card .activity-card-list .activity-card-item .card-content h3 {
        font-size: 14px;
        margin: 0 0 5px;
    }

    .activity-card .activity-card-list .activity-card-item .card-content .date {
        font-size: 11px;
    }

    .metro-post-detail .post-detail-content {
        padding: 0;
        margin-top: 24px;
    }

    .post-detail-title {
        font-size: 1.4rem;
        line-height: 1.35;
    }

    .post-detail-gallery .post-gallery-title {
        font-size: 1.1rem;
    }

    .post-detail-gallery {
        margin-top: 40px;
        padding-top: 32px;
    }

    .post-detail-gallery .slider-area .navigation-button {
        width: 36px;
        height: 36px;
    }

    .post-detail-gallery .slider-area .navigation-button.next {
        right: 0;
    }

    .post-detail-gallery .slider-area .navigation-button.prev {
        left: 0;
    }

    .metro-post-detail {
        margin: 24px 0 50px;
    }
}

@media only screen and (min-width:768px) and (max-width: 991px) {

    .metro-header {
        height: 90px;
    }

    .metro-header .metro-head-main .metro-head-main-group .head-col.head-logos .logo {
        justify-content: flex-start;
    }

    .metro-header .metro-head-main .metro-head-main-group .head-col.head-logos .logo img {
        width: 220px;
    }

    .metro-header .metro-head-main {
        padding: 15px 0;
    }

    .metro-hero .metro-hero-container .metro-hero-shapes {
        display: none;
    }

    .metro-hero .metro-hero-container::before,
    .metro-hero .metro-hero-container::after {
        display: none;
    }

    .metro-hero .metro-hero-container .metro-hero-wrapper .metro-hero-card {
        width: 100%;
        padding: 30px 0 0;
    }

    .metro-hero .metro-hero-container .metro-hero-wrapper .metro-hero-card .metro-head h2 {
        font-size: 30px;
        line-height: 30px;
    }

    .metro-hero .metro-hero-container .metro-hero-wrapper .metro-hero-card .metro-head h2 span {
        font-size: 22px;
    }

    .metro-hero .metro-hero-container .metro-hero-wrapper .metro-hero-card .card-head {
        margin: 0 0 30px;
    }

    .metro-hero .metro-hero-container .metro-hero-wrapper .metro-hero-card .card-body .metro-hero-search .search-card {
        width: 100%;
    }

    .metro-hero .metro-hero-container .metro-hero-wrapper .metro-hero-card .card-body .metro-hero-search .search-result {
        width: 100%;
    }

    .search-result .search-result-list .result-item {
        padding: 15px;
    }

    .search-result .search-result-list .result-item .result-icon {
        width: 40px;
        height: 40px;
    }

    .search-result .search-result-list .result-item .result-icon i {
        font-size: 16px;
    }

    .search-result .search-result-list .result-item .result-content .title {
        font-size: 14px;
    }

    .search-result .search-result-list .result-item .result-content span {
        font-size: 12px;
    }

    .metro-hero .metro-hero-container .metro-hero-wrapper .metro-hero-card .card-body .search-most .search-most-group {
        flex-direction: column;
        gap: 5px;
    }

    .metro-hero .metro-hero-container .metro-hero-wrapper .metro-hero-card .card-body .search-most .search-most-group .label {
        font-size: 12px;
    }

    .metro-hero .metro-hero-container .metro-hero-wrapper .metro-hero-card .card-body .search-most .search-most-group .group-list a {
        font-size: 11px;
        height: 25px;
    }

    .metro-hero .metro-hero-container .metro-hero-wrapper .metro-hero-card .card-foot .metro-search-boxes .row {
        row-gap: 20px;
    }

    .metro-hero .metro-hero-container .metro-hero-wrapper .metro-hero-card .card-foot .metro-search-boxes .boxes-card {
        padding: 20px;
        height: 180px;
    }

    .metro-hero .metro-hero-container .metro-hero-wrapper .metro-hero-card .card-foot .metro-search-boxes .boxes-card p {
        height: auto;
    }

    .metro-courses {
        margin: 50px 0 0;
    }

    .metro-courses .metro-head a {
        font-size: 14px;
        height: 45px;
        padding: 0px 15px 0 25px;
        gap: 5px;
    }

    .metro-courses .metro-head a i {
        font-size: 16px;
        top: 0;
    }

    .metro-courses .metro-head a::before {
        width: 45px;
        height: 45px;
    }

    .metro-head .subtitle {
        font-size: 14px;
    }

    .metro-head h2 {
        font-size: 30px;
        margin: 0;
    }

    .search-card {
        height: 50px;
    }

    .search-card input {
        font-size: 14px;
        padding: 0 0 0 50px;
    }

    .search-card .icon i {
        font-size: 24px;
    }

    .search-card .icon {}


    .metro-courses::before {
        border-radius: 0 0 20px 20px;
    }

    .courses-card {}

    .courses-card .card-content {}

    .courses-card .card-content h3 {
        font-size: 15px;
    }

    .courses-card .card-content .card-sub .sub-item {
        font-size: 12px;
    }

    .courses-card .card-content .card-sub .sub-item i {
        font-size: 14px;
    }


    .metro-information {
        margin: 50px 0 0;
    }

    .information-head .head-center .head-logos img {
        height: 20px;
    }

    .information-head .head-center .head-logos {
        padding: 10px 20px;
        border-radius: 0 0 20px 20px;
    }

    .navigation-button {
        width: 40px;
        height: 40px;
    }

    .navigation-button::before {
        border-radius: 10px;
    }

    .navigation-button i {
        font-size: 20px;
    }

    .metro-information .metro-information-wrapper .information-slider .info-bg {
        display: none;
    }

    .information-head {
        margin: 0 0 50px;
    }

    .information-card .card-content h3 {
        font-size: 18px;
    }

    .information-card .card-content .metro-button {
        height: 40px;
    }

    .information-card .card-content .metro-button i {}

    .information-card .card-content .metro-button::before {}

    .metro-button {
        height: 40px;
        font-size: 14px;
        gap: 5px;
        padding: 0 10px 0 20px;
    }

    .metro-button::before {
        width: 40px;
        height: 40px;
    }

    .metro-button i {
        font-size: 18px;
    }

    .information-card .card-content {
        height: 150px;
    }


    .metro-posts {
        margin: 50px 0 0;
    }

    .metro-posts .metro-posts-wrapper .metro-head {
        flex-direction: column;
        gap: 20px;
    }

    .posts-card .card-content {
        padding: 20px;
        height: 176px;
    }

    .posts-card .card-content .date {
        font-size: 12px;
    }

    .posts-card .card-content .date i {
        font-size: 14px;
    }

    .posts-card .card-content h3 {
        font-size: 16px;
    }

    .posts-card .card-content .metro-button {
        height: 40px;
    }

    .metro-footer .metro-footer-wrapper .metro-footer-group .metro-footer-col a img {
        width: auto;
        height: 100px;
    }

    .metro-footer .metro-footer-wrapper .metro-footer-group {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .metro-footer {
        margin: -175px 0 0;
    }

    .metro-footer .metro-footer-wrapper {
        padding: 220px 0 50px;
    }

    .metro-footer .metro-footer-wrapper .metro-footer-group .metro-footer-col .metro-social {
        gap: 10px;
    }

    .metro-footer .metro-footer-wrapper .metro-footer-group .metro-footer-col .metro-social a {
        font-size: 20px;
    }

    .metro-footer .metro-copyright {
        height: auto;
        padding: 12px 0;
    }

    .metro-footer .metro-copyright .metro-copyright-group {}

    .metro-footer .metro-copyright .metro-copyright-group .metro-copyright-col p {
        font-size: 12px;
        text-align: center;
    }

    .metro-footer .metro-copyright .metro-copyright-group .metro-copyright-col a {
        font-size: 12px;
    }

    .metro-chat {
        right: 30px;
        bottom: 30px;
    }

    .metro-chat .metro-chat-wrapper .metro-chat-box {
        height: 55px;
        width: 110px;
    }

    .metro-chat .metro-chat-wrapper .metro-chat-box .chat-icon img {
        width: 18px;
    }

    .metro-chat .metro-chat-wrapper .metro-chat-box .chat-content {
        font-size: 12px;
        line-height: 16px;
    }

    .metro-chat .metro-chat-wrapper .metro-chat-box .shadow {
        width: 125px;
        height: 70px;
    }

    .metro-chat .metro-chat-wrapper .metro-chat-box .shadow::before {
        height: 90px;
        width: 145px;
    }

    .metro-about-hero {
        height: 400px;
    }

    .metro-about-hero .metro-about-wrapper .metro-about-head .subtitle {
        font-size: 12px;
        padding: 0 10px;
        height: 35px;
    }

    .metro-about-hero .metro-about-wrapper .metro-about-head h2 {
        font-size: 30px;
        line-height: 40px;
    }

    .metro-about-hero .metro-about-wrapper .metro-about-head h2 span {
        font-size: 26px;
    }

    .metro-about-hero .metro-about-wrapper .metro-about-head p {
        font-size: 16px;
        max-width: 100%;
    }

    .metro-about-features .metro-about-features-wrapper .features-group {
        width: max-content;
    }

    .metro-about-features .metro-about-features-wrapper .features-group .features-card {
        width: 250px;
        padding: 10px;
        height: 150px;
        border: 1px solid #D0D0D0;
    }

    .metro-about-features .metro-about-features-wrapper {
        overflow-x: scroll;
        overflow-y: hidden;
    }

    .metro-about-features .metro-about-features-wrapper::-webkit-scrollbar {
        display: none;
    }

    .metro-about-features .metro-about-features-wrapper .features-group .features-card .icon {
        height: 40px;
        width: 40px;
    }

    .metro-about-features .metro-about-features-wrapper .features-group .features-card .icon i {
        font-size: 20px;
    }

    .metro-about-features .metro-about-features-wrapper .features-group .features-card .title {
        font-size: 16px;
        line-height: 1;
    }

    .metro-about-features .metro-about-features-wrapper .features-group .features-card p {
        font-size: 11px;
    }

    .metro-about-what-do {
        margin: 50px 0 0;
    }

    .metro-about-what-do .metro-head {
        margin: 0 0 30px;
        align-items: center;
    }

    .metro-about-what-do .what-do-wrapper .row {
        flex-direction: column-reverse;
    }

    .swiper.swiper-what-do-list {
        height: auto;
    }

    .metro-about-what-do .what-do-list-wrapper {
        padding: 0;
    }

    .metro-about-what-do .what-do-list-wrapper .what-do-list {
        margin: 0;
        width: 100%;
    }

    .metro-about-what-do .what-do-list-wrapper .what-do-list .what-do-item {
        height: 90px;
        justify-content: center;
    }

    .metro-about-what-do .what-do-list-wrapper .what-do-list .what-do-item .icon {
        width: 45px;
        height: 45px;
        min-width: 45px;
    }

    .metro-about-what-do .what-do-list-wrapper .what-do-list .what-do-item .icon i {
        font-size: 22px;
    }

    .metro-about-what-do .what-do-list-wrapper .what-do-list .what-do-item .content h3 {
        font-size: 16px;
        line-height: 20px;
    }

    .metro-about-what-do .what-do-list-wrapper .what-do-list .what-do-item .content p {
        font-size: 12px;
        line-height: 16px;
    }

    .swiper.swiper-what-do-media .swiper-wrapper .swiper-slide img {
        height: 300px;
    }

    .metro-about-what-do .what-do-wrapper .what-do-media .navigation-button {
        transform: translate(0, -50%);
    }

    .metro-about-what-do .what-do-wrapper .what-do-media .navigation-button.prev {
        left: 20px;
    }

    .metro-about-what-do .what-do-wrapper .what-do-media .navigation-button.next {
        right: 20px;
    }

    .metro-about-content::before {
        height: 90%;
    }

    .metro-about-content .metro-about-content-boxes .about-boxes-group {
        flex-direction: column;
        width: 70%;
        gap: 20px;
    }

    .metro-about-content .metro-about-content-boxes .about-boxes-group .about-boxes .title {
        font-size: 20px;
    }

    .metro-about-content .metro-about-content-boxes .about-boxes-group .about-boxes {
        padding: 30px 20px 20px;
    }

    .metro-about-content .metro-about-content-boxes .about-boxes-group .about-boxes p {
        font-size: 12px;
    }

    .metro-about-content .metro-about-content-main .about-content-wrapper .about-content {
        text-align: center;
    }

    .metro-about-content .metro-about-content-main .about-content-wrapper .about-content p {
        font-size: 13px;
        line-height: 23px;
    }

    .metro-about-content .metro-about-content-main .about-content-wrapper .about-content h2 {
        font-size: 24px;
    }

    .metro-about-content .metro-about-content-main button {
        font-size: 13px;
        height: 40px;
        padding: 0 15px;
        margin: 40px auto 0;
    }

    .metro-about-content .metro-about-content-main button i {
        font-size: 16px;
        top: 1px;
    }

    .metro-head.page-head {
        margin: 0 0 30px;
    }

    .metro-problem-page .metro-problem-page-wrapper .problem-container .problem-card {
        padding: 30px;
        width: 100%;
        box-shadow: -1px 1px 14px 0px rgb(9 40 87 / 10%);
        -webkit-box-shadow: -1px 1px 14px 0px rgb(9 40 87 / 10%);
        -moz-box-shadow: -1px 1px 14px 0px rgb(9 40 87 / 10%);
        border-radius: 30px;
    }

    .metro-form-card {}

    .metro-form-card input,
    .metro-form-card textarea,
    .metro-form-card select {
        height: 50px;
        font-size: 13px;
    }

    .metro-problem-page .metro-problem-page-wrapper .problem-container .problem-card form .row {
        row-gap: 15px;
    }

    .metro-form-card.file {
        height: 50px;
    }

    .metro-form-card.file::before {
        width: 50px;
        height: 50px;
        background-size: 20px;
    }

    .metro-form-card.file::after {
        left: 60px;
    }

    .metro-form-card textarea {
        height: 120px;
    }


    .metro-app-page {
        margin: 40px 0 50px;
    }

    .metro-app-page .metro-app-page-wrapper .app-card {
        flex-wrap: wrap;
    }

    .metro-app-page .metro-app-page-wrapper .app-card .card-image {
        flex: unset;
        width: 30%;
    }

    .metro-app-page .metro-app-page-wrapper .app-card .card-content {
        flex: unset;
        width: 65%;
    }

    .metro-app-page .metro-app-page-wrapper .app-card .card-button {
        flex-direction: row;
    }

    .metro-app-page .metro-app-page-wrapper .app-card .card-button a {}

    .metro-app-page .metro-app-page-wrapper .app-card .card-content h3 {
        font-size: 16px;
    }

    .metro-app-page .metro-app-page-wrapper .app-card .card-content p {
        font-size: 12px;
    }

    .metro-activity-page {
        margin: 40px 0 50px;
    }

    .metro-activity-page .metro-activity-page-wrapper .activity-container .activity-filter .activity-filter-group {}

    .metro-activity-page .metro-activity-page-wrapper .activity-container .activity-filter .activity-filter-group .metro-form-card {
        width: 140px;
        box-shadow: -1px 1px 14px 0px rgb(9 40 87 / 6%);
        -webkit-box-shadow: -1px 1px 14px 0px rgb(9 40 87 / 6%);
        -moz-box-shadow: -1px 1px 14px 0px rgb(9 40 87 / 6%);
        height: 40px;
    }

    .metro-activity-page .metro-activity-page-wrapper .activity-container .activity-filter .activity-filter-group .metro-form-card select {
        height: 100%;
        font-size: 12px;
        padding: 0 15px;
    }

    .metro-activity-page .metro-activity-page-wrapper .activity-container .activity-filter .activity-filter-group .metro-form-card::after {
        width: 38px;
        height: 38px;
    }

    .activity-card {
        width: 70%;
        box-shadow: -1px 1px 14px 0px rgb(9 40 87 / 10%);
        -webkit-box-shadow: -1px 1px 14px 0px rgb(9 40 87 / 10%);
        -moz-box-shadow: -1px 1px 14px 0px rgb(9 40 87 / 10%);
        margin: 30px 0 0;
    }

    .activity-card .activity-card-list .activity-card-item {
        flex-wrap: wrap;
        padding: 20px;
    }

    .activity-card .activity-card-list .activity-card-item .card-icon {}

    .activity-card .activity-card-list .activity-card-item .card-icon img {
        width: 40px;
        height: 40px;
    }

    .activity-card .activity-card-list .activity-card-item .card-content {}

    .activity-card .activity-card-list .activity-card-item .card-button {
        width: 100%;
        flex: unset;
        margin: 20px 0 0;
    }

    .activity-card .activity-card-list .activity-card-item .card-button a {
        height: 35px !important;
        font-size: 12px !important;
        padding: 0 20px !important;
    }

    .activity-card .activity-card-list .activity-card-item .card-content h3 {
        font-size: 14px;
        margin: 0 0 5px;
    }

    .activity-card .activity-card-list .activity-card-item .card-content .date {
        font-size: 11px;
    }

    .metro-activity-detail-page .activity-detail-page-wrapper .detail-content {
        padding: 0;
        margin: 20px 0 0;
    }

    .metro-activity-detail-page .activity-detail-page-wrapper .detail-content .metro-head .subtitle {}

    .metro-activity-detail-page .activity-detail-page-wrapper .detail-content .metro-head h2 {
        line-height: 30px;
        margin: 0;
        font-size: 26px;
    }

    .detail-page-slider h2 {
        font-size: 24px;
    }

    .detail-page-slider {
        margin: 50px 0 0;
    }

    .swiper.swiper-activity {
        margin: 30px 0 0;
    }

    .detail-page-slider .slider-area .navigation-button {
        width: 35px;
        height: 35px;
    }

    .detail-page-slider .slider-area .navigation-button.next {
        right: 10px;
    }

    .detail-page-slider .slider-area .navigation-button.prev {
        left: 10px;
    }

    .metro-activity-detail-page .activity-detail-page-wrapper .detail-content .metro-head {
        width: 100%;
        align-items: flex-start;
        text-align: left;
    }

    .metro-activity-detail-page {
        margin: 40px 0 75px;
    }

}

@media only screen and (max-width: 991px) {

    html,
    html body {
        overflow-x: hidden !important;
    }

    .metro-header .metro-head-main .metro-head-main-group .head-col.head-nav,
    .metro-header .metro-head-main .metro-head-main-group .head-col.head-actions {
        display: none;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .metro-hero .metro-hero-container .metro-hero-wrapper .metro-hero-card .card-foot .metro-search-boxes .boxes-card {
        height: 190px;
    }

    .information-card .card-content h3 {
        font-size: 16px;
    }
}

@media only screen and (min-width:1201px) and (max-width: 1440px) {
    .metro-header .metro-head-main .metro-head-main-group .head-col .menu-group ul li a:not(.problem-action){
        font-size: 14px;
    }
    .metro-header .metro-head-main .metro-head-main-group .head-col.head-logos .logo img {
        width: 300px;
    }
    .metro-header .metro-head-main .metro-head-main-group .head-col .menu-group ul {
        display: flex;
        gap: 30px;
        align-items: center;
    }
    
}

@media only screen and (min-width:992px) {
    .metro-header .metro-head-main .metro-head-main-group .head-col.head-mobil {
        display: none;
    }

    .metro-mobil-menu {
        display: none;
    }
}

@media only screen and (min-width:1201px) {}

@media only screen and (min-width:1441px) {}


/** MOBIL MENU **/

.metro-mobil-menu {
    position: absolute;
    width: 100%;
    top: 90px;
    background-color: #fff;
    z-index: 99999;
    box-shadow: -1px 1px 14px 0px rgb(9 40 87 / 6%);
    -webkit-box-shadow: -1px 1px 14px 0px rgb(9 40 87 / 15%);
    -moz-box-shadow: -1px 1px 14px 0px rgb(9 40 87 / 6%);
    border-radius: 0 0 30px 30px;
    display: none;
}

.metro-mobil-menu .mobil-menu-wrapper {}

.metro-mobil-menu .mobil-menu-wrapper .menu-list {
    padding: 30px;
}

.metro-mobil-menu .mobil-menu-wrapper .menu-list ul {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.metro-mobil-menu .mobil-menu-wrapper .menu-list ul li {}

.metro-mobil-menu .mobil-menu-wrapper .menu-list ul li a {
    width: fit-content;
    color: #092857;
    display: block;
    font-size: 16px;
}

.metro-mobil-menu .mobil-menu-wrapper .menu-list ul li a.problem-action {
    padding: 0 20px 0 20px;
    color: #fff;
    display: flex;
}