@media only screen and (max-width:1600px) {
    .footer-title {
        font-size: 14px !important;
    }

    .footer-text {
        font-size: 20px;
    }
}

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

    /* general */
    .emoji {
        width: 40px;
        height: 40px;
    }

    .footer-social-media a {
        width: 60px;
        height: 60px;
    }

    .footer-title {
        font-size: 10px;
    }

    .footer-text {
        font-size: 16px;
    }

    /* nav bar */
    .logo {
        width: 200px;
        height: 74px;
        background-size: contain;
    }

    .menu-size {
        width: 279px;
        height: 44px;
    }

    .menu-text {
        font-size: 25px;
        line-height: 40px;
        margin: 0;
    }

    .blue-circle {
        width: 21px;
        height: 21px;
    }

    .btn-size {
        width: 30px;
        height: 30px;
    }

    .position {
        height: 350px;
    }

    .position a {
        font-size: 30px;
        line-height: 40px;
        width: 400px;
    }

    .position hr {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        border-width: 1px;
    }

    /* home */
    .chat-bot {
        font-size: 24px;
    }

    .chat-bot-choose {
        font-size: 24px;
    }

    #chat-box-art {
        padding-left: 100px;
        padding-right: 100px;
    }

    .chat-box-shape {
        top: -3.5px;
        left: -49px;
    }

    .project-box {
        width: 800px;
        height: 600px;
    }

    .project-box-text {
        font-size: 40px;
        line-height: 60px;
        width: auto;
        margin: 20px auto 10px;
    }

    .project-box-image {
        margin: auto;
        width: 600px;
        height: auto;
    }

    .project-box-image img {
        margin: auto;
        width: 100%;
        height: auto;
    }

    .service-box {
        width: 800px;
        height: 500px;
        padding: 30px;
    }

    .service-box h1 {
        font-size: 40px;
        line-height: 60px;
        margin-bottom: 40px;
    }

    .service-box p {
        font-size: 20px;
        line-height: 30px;
        margin-bottom: 100px;
    }

    .service-box a {
        font-size: 20px;
        line-height: 28px;
    }

    .check {
        width: 25px;
        height: 25px;
        font-size: 18px;
    }

    .check-list .text {
        font-size: 18px;
        line-height: 32px;
    }

    .chat-bot-explore {
        font-size: 24px;
        height: 80px;
        width: 320px;
    }

    .chat-bot-explore span {
        font-size: 24px;
    }

    /* project */

    .nav-pills .title {
        height: auto;
        font-size: 30px;
        margin-right: 10px;
    }

    .nav-pills .nav-item {
        margin-left: 20px;
    }

    .nav-pills .nav-link {
        font-size: 14px;
    }

    /* .tab-content .project {
        width: 540px;
        height: 450px;
    } */

    .tab-content .project h1 {
        font-size: 34px;
        /* line-height: 20px; */
        /* height: auto; */
        /* margin: 30px auto 20px; */
    }

    /* .tab-content .project .image-part {
        width: 430px;
        height: auto;
    }

    .tab-content .project img {
        display: block;
        width: 100%;
    } */

    /* design */

    .tab-content .design {
        /* width: 350px; */
        height: 550px;
        padding: 20px;
    }

    .tab-content .design .category {
        margin-bottom: 140px;
    }

    .tab-content .design .logo-part {
        width: 113px;
        height: 101px;
    }

    .tab-content .design .logo-part img {
        width: 100%;
        height: 100%;
    }

    /* .tab-content .design .type-part {
        width: 43px;
        height: 56px;
    } */

    /* .tab-content .design .type-part h1 {
        font-size: 44px;
        line-height: 24px;
    } */

    /* .tab-content .design .type-part h2 {
        font-size: 12px;
        line-height: 18px;
    } */

    .tab-content .design .title h1 {
        height: 83px;
        font-size: 26px;
        line-height: 34px;
    }

    /* .tab-content .design .text p {
        width: 250px;
        font-size: 16px;
        line-height: 20px;
    } */

    /* service */
    .expertise {
        width: 100%;
    }

    .expertise h1 {
        width: 500px;
        font-size: 44px;
    }

    .expertise p {
        width: 100%;
        font-size: 28px;
    }

    .service-profile-box {
        width: 100%;
        height: auto;
    }

    .service-profile {
        height: 500px;
    }

    .service-profile .left {
        padding: 0 10px 0 46px;
    }

    .service-profile .left img {
        width: 38px;
        height: 42.11px;
    }

    .service-profile .left p {
        width: 95%;
        height: auto;
        font-size: 22px;
        line-height: 38px;
    }

    .service-profile .right img {
        width: 100%;
        height: auto;
    }

    .service-message {
        height: 200px;
    }

    .service-message h1 {
        font-size: 40px;
        line-height: 88px;
    }

    .service-page {
        width: 90%;
        height: 450px;
    }

    .last-message .chat-bot {
        font-size: 24px;
        text-align: left;
        text-indent: 30px;
    }

    .last-message .chat-box-shape {
        top: -3.5px;
        left: -50px;
    }

    .last-message .chat-bot-explore {
        font-size: 26px;
        margin-left: 40px;
    }

    /* about */

    .expertise {
        height: auto !important;
        margin-top: 30px !important;
        margin-bottom: 30px !important;
    }

    .about-title h1 {
        font-size: 41px;
    }

    .about-data-left img {
        width: 382.43px;
        height: 382.43px;
    }

    .about-data-right p {
        font-size: 20px;
        line-height: 30px;
    }

    .about-link a {
        font-size: 20px;
        line-height: 30px;
    }

    .done-slider {
        height: 500px;
    }

    .done-title h1 {
        font-size: 40px;
    }

    .done-slider .swipe-slider-list img {
        width: 120px;
        height: 120px;
        margin: 0 80px;
    }

    .awards-slider {
        height: 550px;
    }

    .awards-title img {
        display: block;
        width: 50px;
        height: 50px;
    }

    .awards-title h1 {
        font-size: 28px;
    }

    .awards-slider .swipe-slider-list img {
        width: 207px;
        height: 305px;
    }

    .press {
        padding-top: 50px;
        width: 100%;
        height: auto;
    }

    .press-title {
        margin: 20px 0 100px;
    }

    .press-title h1 {
        font-size: 40px;
    }

    .press-first-line>div {
        width: auto;
        flex: 1;
        /* height: 309px; */
    }

    .press-middle-line>div {
        width: auto;
        flex: 1;
        /* height: 400px; */
    }

    .press-last-line>div {
        width: auto;
        flex: 1;
    }

    .event .left img {
        width: 480px;
        height: 480px;
    }

    .event .right h1 {
        width: 95%;
        font-size: 44px;
        line-height: 60px;
    }

    .event .right p {
        width: 100%;
        font-size: 26px;
        line-height: 36px;
    }

    .event .right a {
        font-size: 24px;
    }

    .value-first .left h1 {
        font-size: 30px;
        line-height: 38.61px;
        margin-bottom: 40px;
    }

    .value-first .left .check {
        width: 30px;
        height: 30px;
    }

    .value-first .left .text {
        font-size: 22px;
        line-height: 28px;
    }

    .value-first .right img {
        width: 300px;
        height: 300px;
    }

    .value-middle .left img {
        width: 300px;
        height: 300px;
    }

    .value-middle .right h1 {
        font-size: 30px;
        line-height: 38.61px;
        margin-bottom: 40px;
    }

    .value-middle .right h2 {
        font-size: 16px;
        line-height: 20px;
    }

    .value-last .left h1 {
        font-size: 30px;
        line-height: 38.61px;
    }

    .value-last .left h3 {
        height: 150px;
        font-size: 16px;
        line-height: 22px;
    }

    .value-last .right img {
        width: 300px;
        height: 300px;
    }

    .about-end-logo {
        height: 100px;
        padding-top: 10px;
    }

    .about-end-logo .swipe-slider-list img {
        width: 128px;
        margin: 0 40px;
    }

    /* single project */
    .single-project-title {
        font-size: 44px;
        line-height: 50px;
    }

    .single-project-paragraph {
        font-size: 16px;
        line-height: 30px;
    }

    .single-project {
        margin-top: 100px;
    }

    .single-project h1 {
        width: 100%;
        font-size: 58px;
        line-height: 58px;
        margin-bottom: 50px;
    }

    .single-project .image-part {
        margin: auto;
        width: 90%;
        height: 600px;
    }

    .overview .top h1 {
        font-size: 44px;
        line-height: 40px;
        margin-bottom: 60px;
    }

    .overview .top p {
        font-size: 20px;
        line-height: 30px;
    }

    .overview .bottom {
        padding-top: 60px;
    }

    .overview .bottom .service-profile .left p {
        font-size: 16px;
        line-height: 30px;
        width: 95%;
    }

    .overview-sub h1 {
        font-size: 44px;
        line-height: 50px;
    }

    .overview-sub p {
        font-size: 16px;
        line-height: 30px;
    }

    .discovery h1 {
        font-size: 44px;
        line-height: 50px;
    }

    .discovery p {
        font-size: 16px;
        line-height: 30px;
    }

    .research .research-title {
        font-size: 44px;
        line-height: 50px;
        margin-bottom: 60px;
    }

    .research .research-data h1 {
        font-weight: 500;
        font-size: 30px;
        line-height: 40px;
    }

    .research .research-data p {
        font-size: 16px;
        line-height: 30px;
    }

    .research .research-data .research-image-box {
        width: 100%;
        height: auto;
    }

    .research .research-data .research-image-box img {
        margin-bottom: 10px;
    }

    .ideation-image-box {
        width: 100%;
        height: auto;
    }

    .ideation-title {
        margin-top: 10px;
        font-size: 30px;
        line-height: 40px;
        height: 100px;
    }

    .Arts2Do-image1 {
        left: 45%;
        top: 5%;
    }

    .Arts2Do-image2 {
        height: 170px;
    }

    .Arts2Do-image3 {
        height: 170px;
    }

    .Arts2Do-image4 {
        left: 47%;
        top: 75%;
    }

    .fs-lg {
        font-size: 24px !important;
    }

    .mobile-post {
        margin-bottom: 30px !important;
    }

    .library-top-image {
        width: 70% !important;
    }

    .library-post {
        height: 150px !important;
        margin-bottom: 0px !important;
    }

    .pro-mach-mb {
        margin-bottom: 30px !important;
    }

    .mus-post {
        height: 130px !important;
    }

    .last-message {
        width: 100%;
        height: 349px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        margin: 50px auto 0;
        transition: all var(--transition-duration);

    }

    .last-message .chat-bot {
        font-size: 25px;
        text-align: left;
        text-indent: 30px;
    }

    .last-message .chat-bot-explore {
        font-size: 25px;
        margin-left: 40px;
    }

    .last-message>.position-relative .chat-box-avatar {
        opacity: 0;
        left: -70px !important;
        top: -80px !important;
        transition: all var(--transition-duration);

    }

    .last-message>.position-relative .chat-box-avatar, #shape-box {
        transition: opacity var(--transition-duration);
    }

    .last-message .chat-bot-explore {
        height: 80px;
        width: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-left: 30px;
        padding-right: 30px;
        transition: all var(--transition-duration);
    }

    .last-message>.position-relative .shape {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        height: 80px;
        clear: both;
        opacity: 0;
        transition: all var(--transition-duration);

    }

    .last-message>.position-relative .shape-box {
        float: left;
        height: 100%;
        transform: translateX(7px);
        transition: all var(--transition-duration);

    }

    .last-message>.position-relative .shape-box img {
        width: 50px;
        height: 100%;
        transition: all var(--transition-duration);

    }

    .last-message>.position-relative .shape-text {
        display: flex;
        justify-content: center;
        align-items: center;
        width: auto !important;
        height: 100% !important;
        font-size: 24px !important;
        font-weight: 400 !important;
        line-height: 28px !important;
        font-family: Inter;
        float: left;
        background-color: var(--chat-box);
        border-radius: 100px 100px 100px 0;
        padding-left: 30px;
        padding-right: 30px;
        transition: all var(--transition-duration);

    }

    .position-relative .shape {
        height: 100px;
    }

    .position-relative .chat-box-avatar {
        left: -70px !important;
        top: -70px !important;
    }

    .position-relative .shape-box {
        height: 100%;
        transform: translateX(7px);
    }

    .position-relative .shape-box img {
        width: 50px;
    }

    .position-relative .shape-text {
        width: auto !important;
        height: 100% !important;
        font-size: 24px !important;
        line-height: 28px !important;
        padding-left: 10px;
        padding-right: 50px;
    }

    iframe {
        height: 500px;
    }
}

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

    /* general */
    .emoji {
        width: 25px;
        height: 25px;
    }

    .footer-social-media a {
        width: 60px;
        height: 60px;
    }

    .footer-contact>div:nth-child(2) {
        flex: 1;
    }

    .footer-title {
        font-size: 10px;
    }

    .footer-text {
        font-size: 14px;
        line-height: 20px;
    }

    /* nav bar */
    .logo {
        width: 200px;
        height: 74px;
        background-size: contain;
    }

    .menu-size {
        width: 279px;
        height: 44px;
    }

    .menu-text {
        font-size: 25px;
        line-height: 40px;
        margin: 0;
    }

    .blue-circle {
        width: 21px;
        height: 21px;
    }

    .btn-size {
        width: 30px;
        height: 30px;
    }

    .position {
        height: 350px;
    }

    .position a {
        font-size: 30px;
        line-height: 40px;
        width: 400px;
    }

    .position hr {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        border-width: 1px;
    }

    /* home */
    .chat-bot {
        font-size: 20px;
        line-height: 24px;
    }

    .chat-bot-choose {
        font-size: 20px;
        line-height: 24px;
    }

    #chat-box-art {
        padding-left: 100px;
        padding-right: 100px;
    }

    .chat-box-shape {
        height: 80px;
        top: -6px;
        left: -38px;
    }

    .project-box {
        width: 600px;
        height: 400px;
    }

    .project-box-text {
        font-size: 30px;
        line-height: 40px;
        width: auto;
        margin: 20px auto 10px;
    }

    .project-box-image {
        margin: auto;
        width: 400px;
        height: auto;
    }

    .project-box-image img {
        margin: auto;
        width: 100%;
        height: auto;
    }

    .service-box {
        width: 600px;
        height: 400px;
        padding: 10px;
    }

    .service-box h1 {
        font-size: 30px;
        line-height: 40px;
        margin-bottom: 50px;
    }

    .service-box p {
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 50px;
    }

    .service-box a {
        font-size: 16px;
        line-height: 28px;
    }

    .check {
        width: 20px;
        height: 20px;
        font-size: 16px;
    }

    .check-list .text {
        font-size: 16px;
        line-height: 24px;
    }

    .chat-bot-explore {
        font-size: 16px;
        height: 40px;
        width: 220px;
    }

    .chat-bot-explore span {
        font-size: 16px;
    }

    /* project */

    .nav-pills .title {
        height: auto;
        font-size: 20px;
        margin-right: 0px;
    }

    .nav-pills .nav-item {
        margin-left: 10px;
    }

    .nav-pills .nav-link {
        font-size: 12px;
    }

    /* .tab-content .project {
        width: 450px;
        height: 380px;
    } */

    .tab-content .project h1 {
        font-size: 26px;
        line-height: 32px;
        height: 200px;
        /* height: auto;
        margin: 10px auto; */
    }

    .tab-content .project h1 p {
        margin-bottom: 10px;
        /* height: auto;
        margin: 10px auto; */
    }

    /* .tab-content .project .image-part {
        width: 320px;
        height: auto;
    }

    .tab-content .project img {
        display: block;
        width: 100%;
    } */
    .versa-mt {
        margin-top: 140px !important;
    }

    /* design */

    /* .tab-content .design {
        width: 280px;
        height: 380px;
        padding: 20px;
    } */

    /* .tab-content .design .category {
        margin-bottom: 40px;
    } */

    /* .tab-content .design .logo-part {
        width: 80px;
        height: 70px;
    } */

    /* .tab-content .design .type-part {
        width: 43px;
        height: 56px;
    } */

    /* .tab-content .design .type-part h1 {
        font-size: 34px;
        line-height: 20px;
    } */

    /* .tab-content .design .type-part h2 {
        font-size: 10px;
        line-height: 14px;
    } */

    /* .tab-content .design .title h1 {
        width: 80%;
        height: 53px;
        font-size: 20px;
        line-height: 24px;
        margin-top: 80px;
    } */

    /* .tab-content .design .text p {
        width: 100%;
        font-size: 14px;
        line-height: 20px;
    } */

    /* service */
    .expertise {
        height: auto !important;
        margin-top: 30px !important;
        margin-bottom: 30px !important;
        width: 100% auto;
    }

    .expertise h1 {
        width: 100%;
        font-size: 40px;
        height: auto;
    }

    .expertise p {
        width: 100%;
        font-size: 24px;
        line-height: 30px;
        height: auto;
    }

    .service-profile-box {
        width: 100%;
        height: auto !important;
        padding-top: 30px !important;
    }

    .service-profile {
        height: 350px;
        margin-top: 0px;
    }

    .service-profile .left {
        padding: 30px 10px 30px 36px;
    }

    .service-profile .left img {
        width: 36px;
        height: 40px;
        margin: 10px;
    }

    .service-profile .left p {
        width: 95%;
        height: auto;
        font-size: 16px;
        line-height: 28px;
        margin: 10px 0;
    }

    .service-profile .right img {
        width: 100%;
        height: auto;
    }

    .service-message {
        height: 100px;
    }

    .service-message h1 {
        font-size: 30px;
        line-height: 68px;
    }

    .service-page {
        width: 90%;
        height: 350px;
    }

    .last-message .chat-bot {
        font-size: 14px;
        text-align: left;
        text-indent: 0;
    }

    .last-message .chat-box-shape {
        top: -6.5px;
        left: -38px;
    }

    .last-message .chat-bot-explore {
        font-size: 16px;
        margin-left: 40px;
        padding: 40px 0;
    }

    /* about */

    .about-title h1 {
        font-size: 31px;
    }

    .about-data-left img {
        width: 300px;
        height: 300px;
    }

    .about-data-right p {
        font-size: 16px;
        line-height: 22px !important;
    }

    .about-link a {
        font-size: 16px;
        line-height: 30px;
    }

    .done-slider {
        height: 450px;
    }

    .done-title h1 {
        font-size: 30px;
    }

    .done-slider .swipe-slider-list img {
        width: 80px;
        height: 80px;
        margin: 0 40px;
    }

    .awards-slider {
        height: 550px;
    }

    .awards-title img {
        display: block;
        width: 40px;
        height: 40px;
    }

    .awards-title h1 {
        font-size: 20px;
    }

    .awards-slider .swipe-slider-list img {
        width: 200px;
        height: 300px;
    }

    .press {
        padding-top: 50px;
        width: 100%;
        height: auto;
    }

    .press-title {
        margin: 20px 0 80px;
    }

    .press-title h1 {
        font-size: 40px;
    }

    .press-first-line>div {
        width: auto;
        flex: 1;
    }

    .press-middle-line>div {
        width: auto;
        flex: 1;
    }

    .press-last-line>div {
        width: auto;
        flex: 1;
    }

    .event {
        height: auto;
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .event .left span {
        width: 330px;
        height: 330px;
    }

    .event .left img {
        width: 330px;
        height: 330px;
    }

    .event .right h1 {
        width: 100%;
        font-size: 30px;
        line-height: 40px;
    }

    .event .right p {
        width: 100%;
        font-size: 16px;
        line-height: 26px;
    }

    .event .right a {
        font-size: 16px;
        width: 200px;
    }

    .value {
        height: auto;
        padding: 80px 0;
    }

    .value-first {
        margin-bottom: 80px;
    }

    .value-first .left h1 {
        font-size: 24px;
        line-height: 28.61px;
        margin-bottom: 40px;
    }

    .value-first .left .check {
        width: 25px;
        height: 25px;
    }

    .value-first .left .text {
        font-size: 16px;
        line-height: 18px;
    }

    .value-first .right img {
        width: 200px;
        height: 200px;
    }

    .value-middle .left img {
        width: 200px;
        height: 200px;
    }

    .value-middle .right h1 {
        font-size: 24px;
        line-height: 28.61px;
        margin-bottom: 40px;
    }

    .value-middle .right h2 {
        font-size: 14px;
        line-height: 16px;
    }

    .value-last .left h1 {
        font-size: 24px;
        line-height: 28.61px;
    }

    .value-last .left h3 {
        height: 140px;
        font-size: 14px;
        line-height: 16px;
    }

    .value-last .right img {
        width: 200px;
        height: 200px;
    }

    .about-end-logo {
        height: 100px;
        padding-top: 10px;
    }

    .about-end-logo .swipe-slider-list img {
        width: 128px;
        margin: 0 40px;
    }

    /* single project */
    .single-project-title {
        font-size: 34px !important;
        line-height: 40px;
    }

    .single-project-paragraph {
        font-size: 16px !important;
        line-height: 24px;
    }

    .single-project {
        margin-top: 80px;
    }

    .single-project h1 {
        width: 100%;
        font-size: 48px;
        line-height: 48px;
        margin-bottom: 30px;
    }

    .single-project .image-part {
        margin: 30px auto;
        width: 90%;
        height: 400px;
    }

    .overview .top {
        margin-bottom: 0 !important;
    }

    .overview .top h1 {
        font-size: 34px;
        line-height: 30px;
        margin-bottom: 30px;
    }

    .overview .top p {
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 30px !important;
    }

    .overview .bottom {
        padding-top: 30px;
    }

    .overview .bottom .service-profile .left img {
        margin-bottom: 30px;
    }

    .overview .bottom .service-profile .left p {
        font-size: 16px;
        line-height: 20px;
        width: 95%;
        margin-bottom: 30px;
    }

    .overview .bottom .service-profile .left p:last-child {
        margin-bottom: 0px;
    }

    .overview-sub h1 {
        font-size: 34px;
        line-height: 40px;
    }

    .overview-sub p {
        font-size: 16px;
        line-height: 24px;
    }

    .discovery h1 {
        font-size: 34px;
        line-height: 40px;
    }

    .discovery {
        margin-top: 0;
    }

    .discovery p {
        font-size: 16px;
        line-height: 24px;
    }

    .research {
        padding: 50px;
    }

    .research .research-title {
        font-size: 34px;
        line-height: 40px;
        margin-bottom: 40px;
    }

    .research .research-data h1 {
        font-size: 26px;
        line-height: 30px;
    }

    .research .research-data p {
        font-size: 16px;
        line-height: 24px;
    }

    .research .research-data .research-image-box {
        width: 100%;
        height: auto;
    }

    .research .research-data .research-image-box img {
        margin-bottom: 10px;
    }

    .ideation-image-box {
        width: 100%;
        height: auto;
    }

    .ideation-title {
        margin-top: 10px;
        font-size: 16px;
        line-height: 26px;
        height: 40px;
    }

    .versa-image {
        width: 250px;
    }

    .Arts2Do-image1 {
        left: 45%;
        top: 5%;
    }

    .Arts2Do-image2 {
        height: 170px;
    }

    .Arts2Do-image3 {
        height: 170px;
    }

    .Arts2Do-image4 {
        left: 47%;
        top: 75%;
    }

    .MA-Edtech-research8 {
        width: 300px;
    }

    .gama-fs-overview {
        font-size: 14px !important;
        font-weight: 400 !important;
    }

    .p-100 {
        padding: 40px;
    }

    .px-100 {
        padding-left: 40px;
        padding-right: 40px;
    }

    .p-lt-lg {
        padding: 40px;
    }

    .h-300 {
        height: auto;
    }

    .translateY-mines-150 {
        transform: translateY(-100px);
    }

    .mobile-post {
        margin-bottom: 10px !important;
        height: 150px !important;
    }

    .mysa-mb-idea {
        margin-bottom: 30px !important;
    }

    .my-project-vid {
        margin-top: 60px !important;
        margin-bottom: 60px !important;
    }

    .mus-post {
        height: 120px !important;
    }

    .last-message {
        width: 100%;
        height: 349px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        margin: 50px auto 0;
        transition: all var(--transition-duration);

    }

    .last-message .chat-bot {
        font-size: 25px;
        text-align: left;
        text-indent: 30px;
    }

    .last-message .chat-bot-explore {
        font-size: 25px;
        margin-left: 40px;
    }

    .last-message>.position-relative .chat-box-avatar {
        opacity: 0;
        left: -70px !important;
        top: -80px !important;
        transition: all var(--transition-duration);

    }

    .last-message>.position-relative .chat-box-avatar, #shape-box {
        transition: opacity var(--transition-duration);
    }

    .last-message .chat-bot-explore {
        height: 80px;
        width: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-left: 30px;
        padding-right: 30px;
        transition: all var(--transition-duration);
    }

    .last-message>.position-relative .shape {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        height: 80px;
        clear: both;
        opacity: 0;
        transition: all var(--transition-duration);

    }

    .last-message>.position-relative .shape-box {
        float: left;
        height: 100%;
        transform: translateX(7px);
        transition: all var(--transition-duration);

    }

    .last-message>.position-relative .shape-box img {
        width: 50px;
        height: 100%;
        transition: all var(--transition-duration);

    }

    .last-message>.position-relative .shape-text {
        display: flex;
        justify-content: center;
        align-items: center;
        width: auto !important;
        height: 100% !important;
        font-size: 24px !important;
        font-weight: 400 !important;
        line-height: 28px !important;
        font-family: Inter;
        float: left;
        background-color: var(--chat-box);
        border-radius: 100px 100px 100px 0;
        padding-left: 30px;
        padding-right: 30px;
        transition: all var(--transition-duration);

    }

    iframe {
        height: 415px;
    }
}

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

    /* general */
    .emoji {
        width: 20px;
        height: 20px;
    }

    .footer-social-media a {
        width: 60px;
        height: 60px;
    }

    .footer-contact>div:nth-child(2) {
        flex: 1;
    }

    .footer-title {
        font-size: 10px;
    }

    .footer-text {
        font-size: 14px;
        line-height: 20px;
    }

    /* nav bar */
    .logo {
        width: 200px;
        height: 74px;
        background-size: contain;
    }

    .menu-size {
        width: 279px;
        height: 44px;
    }

    .menu-text {
        font-size: 25px;
        line-height: 40px;
        margin: 0;
    }

    .blue-circle {
        width: 21px;
        height: 21px;
    }

    .btn-size {
        width: 30px;
        height: 30px;
    }

    .position {
        height: 350px;
    }

    .position a {
        font-size: 30px;
        line-height: 40px;
        width: 400px;
    }

    .position hr {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        border-width: 1px;
    }

    /* home */
    .chat-bot {
        font-size: 20px;
        line-height: 24px;
    }

    .chat-bot-choose {
        font-size: 20px;
        line-height: 24px;
    }

    #chat-box-art {
        padding-left: 100px;
        padding-right: 100px;
    }

    .chat-box-shape {
        height: 80px;
        top: -8px;
        left: -37px;
    }

    .project-box {
        width: 500px;
        height: 400px;
    }

    .project-box-text {
        font-size: 30px;
        line-height: 40px;
        width: auto;
        margin: 20px auto 10px;
    }

    .project-box-image {
        margin: auto;
        width: 400px;
        height: auto;
    }

    .project-box-image img {
        margin: auto;
        width: 100%;
        height: auto;
    }

    .service-box {
        width: 500px;
        height: 400px;
        padding: 10px;
    }

    .service-box h1 {
        font-size: 30px;
        line-height: 40px;
        margin-bottom: 50px;
    }

    .service-box p {
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 50px;
    }

    .service-box a {
        font-size: 16px;
        line-height: 28px;
        padding: 10px !important;
    }

    .check {
        width: 20px;
        height: 20px;
        font-size: 16px;
    }

    .check-list .text {
        font-size: 14px;
        line-height: 20px;
    }

    .chat-bot-explore {
        font-size: 16px;
        height: 40px;
        width: 220px;
    }

    .chat-bot-explore span {
        font-size: 16px;
    }

    /* project */

    .nav-pills .title {
        height: auto;
        font-size: 20px;
        margin-right: 0px;
    }

    .nav-pills .nav-item {
        margin-left: 10px;
    }

    .nav-pills .nav-link {
        font-size: 12px;
    }

    /* .tab-content .project {
        width: 350px;
        height: 340px;
    }

    .tab-content .project h1 {
        font-size: 20px;
        line-height: 14px;
        height: auto;
        margin: 10px auto;
    }

    .tab-content .project .image-part {
        width: 300px;
        height: auto;
    }

    .tab-content .project img {
        display: block;
        width: 100%;
    } */

    /* design */

    .tab-content .design {
        height: 380px;
    }

    .tab-content .design .category {
        margin-bottom: 60px;
    }

    .tab-content .design .logo-part {
        width: 80px;
        height: 70px;
    }

    .tab-content .design .type-part {
        width: 43px;
        height: 56px;
    }

    .tab-content .design .type-part h1 {
        font-size: 34px;
        line-height: 20px;
    }

    .tab-content .design .type-part h2 {
        font-size: 10px;
        line-height: 14px;
    }

    .tab-content .design .title h1 {
        height: 53px;
        font-size: 20px;
        line-height: 24px;
    }

    .tab-content .design .text p {
        width: 100%;
        font-size: 14px;
        line-height: 20px;
    }

    /* service */
    .expertise {
        height: auto !important;
        margin-top: 30px !important;
        margin-bottom: 30px !important;
        width: 100% auto;
    }

    .expertise h1 {
        width: 100%;
        font-size: 40px;
    }

    .expertise p {
        width: 100%;
        font-size: 24px;
        line-height: 30px;
    }

    .service-profile-box {
        width: 100%;
        height: auto;
    }

    .service-profile {
        height: 350px;
    }

    .service-profile .left {
        padding: 0 10px 0 36px;
    }

    .service-profile .left img {
        width: 36px;
        height: 40px;
        margin: 10px;
    }

    .service-profile .left p {
        width: 95%;
        height: auto;
        font-size: 16px;
        line-height: 28px;
        margin: 10px 0;
    }

    .service-profile .right img {
        width: 100%;
        height: auto;
    }

    .service-message {
        height: 100px;
        margin-top: 30px;
    }

    .service-message h1 {
        font-size: 30px;
        line-height: 68px;
    }

    .service-page {
        width: 90%;
        height: 350px;
    }

    .last-message {
        padding-left: 60px;
        padding-right: 60px;
        margin-top: 130px;
        margin-bottom: 30px;
        height: auto;
    }

    .last-message .chat-bot {
        font-size: 14px;
        text-align: left;
        text-indent: 0;
    }

    .last-message .chat-box-shape {
        top: -4.3px;
        left: -48px;
        height: 100px;
    }

    .last-message .chat-bot-explore {
        font-size: 20px;
        margin-left: 40px;
        padding: 40px 0;
    }

    /* about */

    .about-title h1 {
        font-size: 31px;
    }

    .about-data-left img {
        width: 300px;
        height: 300px;
    }

    .about-data-right p {
        font-size: 16px;
        line-height: 20px;
    }

    .about-link a {
        font-size: 16px;
        line-height: 30px;
    }

    .done-slider {
        height: 450px;
    }

    .done-title h1 {
        font-size: 30px;
    }

    .done-slider .swipe-slider-list img {
        width: 80px;
        height: 80px;
        margin: 0 40px;
    }

    .awards-slider {
        height: 550px;
    }

    .awards-title img {
        display: block;
        width: 40px;
        height: 40px;
    }

    .awards-title h1 {
        font-size: 20px;
    }

    .awards-slider .swipe-slider-list img {
        width: 200px;
        height: 300px;
    }

    .press {
        padding-top: 50px;
        width: 100%;
        height: auto;
    }

    .press-title {
        margin: 20px 0 80px;
    }

    .press-title h1 {
        font-size: 40px;
    }

    .press-first-line>div {
        width: auto;
        flex: 1;
    }

    .press-middle-line>div {
        width: auto;
        flex: 1;
    }

    .press-last-line>div {
        width: auto;
        flex: 1;
    }

    .event .left img {
        width: 330px;
        height: 330px;
    }

    .event .left span {
        width: 330px;
        height: 330px;
    }

    .event .right h1 {
        width: 100%;
        font-size: 30px;
        line-height: 40px;
    }

    .event .right p {
        width: 100%;
        font-size: 16px;
        line-height: 26px;
    }

    .event .right a {
        font-size: 16px;
        width: 200px;
    }

    .value-first .left h1 {
        font-size: 24px;
        line-height: 28.61px;
        margin-bottom: 40px;
    }

    .value-first .left .check {
        width: 25px;
        height: 25px;
        font-size: 16px;
    }

    .value-first .left .text {
        font-size: 16px;
        line-height: 18px;
    }

    .value-first .right img {
        width: 200px;
        height: 200px;
    }

    .value-middle .left img {
        width: 200px;
        height: 200px;
    }

    .value-middle .right h1 {
        font-size: 24px;
        line-height: 28.61px;
        margin-bottom: 40px;
    }

    .value-middle .right h2 {
        font-size: 14px;
        line-height: 16px;
    }

    .value-last .left h1 {
        font-size: 24px;
        line-height: 28.61px;
    }

    .value-last .left h3 {
        height: 140px;
        font-size: 14px;
        line-height: 16px;
    }

    .value-last .right img {
        width: 200px;
        height: 200px;
    }

    .about-end-logo {
        height: 100px;
        padding-top: 10px;
    }

    .about-end-logo .swipe-slider-list img {
        width: 128px;
        margin: 0 40px;
    }

    /* single project */
    .single-project-title {
        font-size: 34px !important;
        line-height: 40px;
    }

    .single-project-paragraph {
        font-size: 16px !important;
        line-height: 24px;
    }

    .single-project {
        margin-top: 80px;
    }

    .single-project h1 {
        width: 100%;
        font-size: 48px;
        line-height: 48px;
        margin-bottom: 30px;
    }

    .single-project .image-part {
        margin: auto;
        width: 90%;
        height: 400px;
    }

    .overview .top h1 {
        font-size: 34px;
        line-height: 30px;
        margin-bottom: 40px;
    }

    .overview .top p {
        font-size: 16px;
        line-height: 24px;
    }

    .overview .bottom {
        padding-top: 40px;
    }

    .overview .bottom .service-profile .left img {
        margin-bottom: 30 !important;
        margin-top: 0 !important;
    }

    .overview .bottom .service-profile .left p {
        margin-bottom: 30 !important;
        padding: 0;
        margin-top: 0 !important;

    }

    .overview .bottom .service-profile .left p:last-child {
        margin-bottom: 0 !important;
        margin-top: 0 !important;
    }

    .overview .bottom .service-profile .left p {
        font-size: 16px;
        line-height: 20px;
        width: 95%;
    }

    .overview-sub h1 {
        font-size: 34px;
        line-height: 40px;
    }

    .overview-sub p {
        font-size: 16px;
        line-height: 24px;
    }

    .discovery h1 {
        font-size: 34px;
        line-height: 40px;
    }

    .discovery p {
        font-size: 16px;
        line-height: 24px;
    }

    .research {
        padding: 50px;
    }

    .research .research-title {
        font-size: 34px;
        line-height: 40px;
        margin-bottom: 40px;
    }

    .research .research-data h1 {
        font-size: 26px;
        line-height: 30px;
    }

    .research .research-data p {
        font-size: 16px;
        line-height: 24px;
    }

    .research .research-data .research-image-box {
        width: 100%;
        height: auto;
    }

    .research .research-data .research-image-box img {
        margin-bottom: 10px;
    }

    .ideation-image-box {
        width: 100%;
        height: auto;
    }

    .ideation-title {
        margin-top: 10px;
        font-size: 16px;
        line-height: 26px;
        height: 40px;
    }

    .versa-image {
        width: 250px;
    }

    .Arts2Do-image1 {
        left: 45%;
        top: 5%;
    }

    .Arts2Do-image2 {
        height: 120px;
    }

    .Arts2Do-image3 {
        height: 120px;
    }

    .Arts2Do-image4 {
        left: 47%;
        top: 75%;
    }

    .MA-Edtech-research8 {
        width: 300px;
    }

    .gama-fs-overview {
        font-size: 14px !important;
        font-weight: 400 !important;
    }

    .p-100 {
        padding: 40px;
    }

    .px-100 {
        padding-left: 40px;
        padding-right: 40px;
    }

    .p-lt-lg {
        padding: 40px;
    }

    .h-300 {
        height: auto;
    }

    .translateY-mines-150 {
        transform: translateY(-100px);
    }

    .top-mines {
        top: -60px;
    }

    .mobile-post {
        margin-bottom: 30px !important;
        height: 180px !important;
    }

    .about-food-sm {
        font-size: 12px !important;
    }

    .library-top-image {
        width: 80% !important;
    }

    .library-post {
        height: 170px !important;
        margin-bottom: 0px !important;
    }

    .productmatcher-air-bottom {
        top: 30%;
        z-index: 2;
    }

    .productmatcher-air-top {
        z-index: 1;
    }

    .mus-post {
        height: 150px !important;
    }

    .last-message {
        width: 100%;
        margin: 150px auto 0;
    }

    .last-message .chat-bot {
        font-size: 25px;
        text-align: left;
        text-indent: 30px;
    }

    .last-message .chat-bot-explore {
        font-size: 25px;
        margin-left: 40px;
    }

    .last-message>.position-relative .chat-box-avatar {
        opacity: 0;
        left: -70px !important;
        top: -80px !important;

    }

    .last-message>.position-relative .chat-box-avatar, #shape-box {
        transition: opacity var(--transition-duration);
    }

    .last-message .chat-bot-explore {
        margin-top: 10px;
        height: 80px;
        width: auto;
        display: flex;
        font-size: 20px !important;
        justify-content: center;
        align-items: center;
        padding-left: 30px;
        padding-right: 30px;
        transition: all var(--transition-duration);
    }

    .last-message>.position-relative .shape {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        height: 80px;
        clear: both;
        opacity: 0;
        transition: all var(--transition-duration);

    }

    .last-message>.position-relative .shape-box {
        float: left;
        height: 100%;
        transform: translateX(7px);
        transition: all var(--transition-duration);

    }

    .last-message>.position-relative .shape-box img {
        width: 50px;
        height: 100%;
        transition: all var(--transition-duration);

    }

    .last-message>.position-relative .shape-text {
        display: flex;
        justify-content: center;
        align-items: center;
        width: auto !important;
        height: 100% !important;
        font-size: 20px !important;
        font-weight: 400 !important;
        line-height: 28px !important;
        font-family: Inter;
        float: left;
        background-color: var(--chat-box);
        border-radius: 100px 100px 100px 0;
        padding-left: 30px;
        padding-right: 30px;
        transition: all var(--transition-duration);

    }

    .position-relative .shape {
        height: 70px;
    }

    .position-relative .chat-box-avatar {
        left: -70px !important;
        top: -90px !important;
    }

    .position-relative .shape-box {
        width: 50px;
        transform: translateX(7px);
    }

    .position-relative .shape-box img {
        width: 50px;
    }

    .position-relative .shape-text {
        width: auto !important;
        height: 100% !important;
        font-size: 20px !important;
        line-height: 28px !important;
        padding-left: 10px;
        padding-right: 50px;
    }
    iframe {
        height: 305px;
    }
}

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

    /* general */
    .emoji {
        width: 20px;
        height: 20px;
    }

    .footer-social-media a {
        width: 60px;
        height: 60px;
    }

    .footer-contact>div:nth-child(2) {
        flex: 1;
    }

    .footer-title {
        font-size: 10px;
    }

    .footer-text {
        font-size: 14px;
        line-height: 20px;
    }

    /* nav bar */
    .logo {
        width: 200px;
        height: 74px;
        background-size: contain;
    }

    .menu-size {
        width: 279px;
        height: 44px;
    }

    .menu-text {
        font-size: 25px;
        line-height: 40px;
        margin: 0;
    }

    .blue-circle {
        width: 21px;
        height: 21px;
    }

    .btn-size {
        width: 30px;
        height: 30px;
    }

    .position {
        height: 350px;
    }

    .position a {
        font-size: 30px;
        line-height: 40px;
        width: 400px;
    }

    .position hr {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        border-width: 1px;
    }

    /* home */
    .chat-bot {
        font-size: 20px;
        line-height: 24px;
    }

    .chat-bot-choose {
        font-size: 20px;
        line-height: 24px;
    }

    #chat-box-art {
        padding-left: 100px;
        padding-right: 100px;
    }

    .chat-box-shape {
        height: 80px;
        top: -8px;
        left: -37px;
    }

    .project-box {
        width: 500px;
        height: 400px;
    }

    .project-box-text {
        font-size: 30px;
        line-height: 40px;
        width: auto;
        margin: 20px auto 10px;
    }

    .project-box-image {
        margin: auto;
        width: 400px;
        height: auto;
    }

    .project-box-image img {
        margin: auto;
        width: 100%;
        height: auto;
    }

    .service-box {
        width: 500px;
        height: 400px;
        padding: 10px;
    }

    .service-box h1 {
        font-size: 30px;
        line-height: 40px;
        margin-bottom: 50px;
    }

    .service-box p {
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 50px;
    }

    .service-box a {
        font-size: 16px;
        line-height: 28px;
    }

    .check {
        width: 20px;
        height: 20px;
        font-size: 16px;
    }

    .check-list .text {
        font-size: 16px;
        line-height: 24px;
    }

    .chat-bot-explore {
        font-size: 16px;
        height: 40px;
        width: 220px;
    }

    .chat-bot-explore span {
        font-size: 16px;
    }

    /* project */

    .nav-pills .title {
        height: auto;
        font-size: 20px;
        margin-right: 0px;
    }

    .nav-pills .nav-item {
        margin-left: 10px;
    }

    .nav-pills .nav-link {
        font-size: 12px;
    }

    /* .tab-content .project {
        width: 340px;
        height: 280px;
    }

    .tab-content .project h1 {
        font-size: 18px;
        line-height: 12px;
        height: auto;
        margin: 5px auto;
    }

    .tab-content .project .image-part {
        width: 250px;
        height: auto;
    }

    .tab-content .project img {
        display: block;
        width: 100%;
    } */

    /* design */

    /* .tab-content .design {
        width: 220px;
        height: 320px;
        padding: 10px;
    } */

    /* .tab-content .design .category {
        margin-bottom: 70px;
    } */

    /* .tab-content .design .logo-part {
        width: 60px;
        height: 50px;
    } */

    /* .tab-content .design .type-part {
        width: 33px;
        height: 46px;
    } */

    /* .tab-content .design .type-part h1 {
        font-size: 26px;
        line-height: 20px;
    } */

    /* .tab-content .design .type-part h2 {
        font-size: 10px;
        line-height: 14px;
    } */

    /* .tab-content .design .title h1 {
        width: 100%;
        height: 13px;
        font-size: 18px;
        line-height: 24px;
    } */

    /* .tab-content .design .text p {
        width: 100%;
        font-size: 12px;
        line-height: 16px;
    } */

    /* service */
    .expertise {
        width: 100%;
    }

    .expertise h1 {
        width: 100%;
        font-size: 40px;
    }

    .expertise p {
        width: 100%;
        font-size: 24px;
        line-height: 30px;
    }

    .service-profile-box {
        width: 100%;
        height: auto;
    }

    .service-profile {
        height: 350px;
    }

    .service-profile .left {
        padding: 0 10px 0 36px;
    }

    .service-profile .left img {
        width: 36px;
        height: 40px;
        margin: 10px;
    }

    .service-profile .left p {
        width: 95%;
        height: auto;
        font-size: 16px;
        line-height: 28px;
        margin: 10px 0;
    }

    .service-profile .right img {
        width: 100%;
        height: auto;
    }

    .service-message {
        height: 200px;
    }

    .service-message h1 {
        font-size: 30px;
        line-height: 68px;
    }

    .service-page {
        width: 90%;
        height: 350px;
    }

    .last-message {
        padding-left: 100px;
        padding-right: 60px;
    }

    .last-message .chat-bot {
        font-size: 14px;
        text-align: left;
        text-indent: 0;
    }

    .last-message .chat-box-shape {
        top: -4.3px;
        left: -48px;
        height: 100px;
    }

    .last-message .chat-bot-explore {
        font-size: 20px;
        margin-left: 40px;
        padding: 40px 0;
    }

    /* about */

    .about-title h1 {
        font-size: 31px;
    }

    .about-data-left img {
        width: 300px;
        height: 300px;
    }

    .about-data-right p {
        font-size: 16px;
        line-height: 20px;
    }

    .about-link a {
        font-size: 16px;
        line-height: 30px;
    }

    .done-slider {
        height: 450px;
    }

    .done-title h1 {
        font-size: 30px;
    }

    .done-slider .swipe-slider-list img {
        width: 80px;
        height: 80px;
        margin: 0 40px;
    }

    .awards-slider {
        height: 550px;
    }

    .awards-title img {
        display: block;
        width: 40px;
        height: 40px;
    }

    .awards-title h1 {
        font-size: 20px;
    }

    .awards-slider .swipe-slider-list img {
        width: 200px;
        height: 300px;
    }

    .press {
        padding-top: 50px;
        width: 100%;
        height: auto;
    }

    .press-title {
        margin: 20px 0 80px;
    }

    .press-title h1 {
        font-size: 40px;
    }

    .press-first-line>div {
        width: auto;
        flex: 1;
    }

    .press-middle-line>div {
        width: auto;
        flex: 1;
    }

    .press-last-line>div {
        width: auto;
        flex: 1;
    }

    .event .left img {
        width: 330px;
        height: 330px;
    }

    .event .right h1 {
        width: 100%;
        font-size: 30px;
        line-height: 40px;
    }

    .event .right p {
        width: 100%;
        font-size: 16px;
        line-height: 26px;
    }

    .event .right a {
        font-size: 16px;
        width: 200px;
    }

    .value-first .left h1 {
        font-size: 24px;
        line-height: 28.61px;
        margin-bottom: 40px;
    }

    .value-first .left .check {
        width: 25px;
        height: 25px;
    }

    .value-first .left .text {
        font-size: 16px;
        line-height: 18px;
    }

    .value-first .right img {
        width: 200px;
        height: 200px;
    }

    .value-middle .left img {
        width: 200px;
        height: 200px;
    }

    .value-middle .right h1 {
        font-size: 24px;
        line-height: 28.61px;
        margin-bottom: 40px;
    }

    .value-middle .right h2 {
        font-size: 14px;
        line-height: 16px;
    }

    .value-last .left h1 {
        font-size: 24px;
        line-height: 28.61px;
    }

    .value-last .left h3 {
        height: auto;
        font-size: 14px;
        line-height: 16px;
    }

    .value-last .right img {
        width: 200px;
        height: 200px;
    }

    .about-end-logo {
        height: 100px;
        padding-top: 10px;
    }

    .about-end-logo .swipe-slider-list img {
        width: 128px;
        margin: 0 40px;
    }

    /* single project */
    .single-project-title {
        font-size: 34px !important;
        line-height: 40px;
    }

    .single-project-paragraph {
        font-size: 16px !important;
        line-height: 24px;
    }

    .single-project {
        margin-top: 80px;
    }

    .single-project h1 {
        width: 100%;
        font-size: 48px;
        line-height: 48px;
        margin-bottom: 30px;
    }

    .single-project .image-part {
        margin: auto;
        width: 90%;
        height: 400px;
    }

    .overview .top h1 {
        font-size: 34px;
        line-height: 30px;
        margin-bottom: 40px;
    }

    .overview .top p {
        font-size: 16px;
        line-height: 24px;
    }

    .overview .bottom {
        padding-top: 40px;
    }

    .overview .bottom .service-profile .left p {
        font-size: 16px;
        line-height: 20px;
        width: 95%;
    }

    .overview-sub h1 {
        font-size: 34px;
        line-height: 40px;
    }

    .overview-sub p {
        font-size: 16px;
        line-height: 24px;
    }

    .discovery h1 {
        font-size: 34px;
        line-height: 40px;
    }

    .discovery p {
        font-size: 16px;
        line-height: 24px;
    }

    .research {
        padding: 50px;
    }

    .research .research-title {
        font-size: 34px;
        line-height: 40px;
        margin-bottom: 40px;
    }

    .research .research-data h1 {
        font-size: 26px;
        line-height: 30px;
    }

    .research .research-data p {
        font-size: 16px;
        line-height: 24px;
    }

    .research .research-data .research-image-box {
        width: 100%;
        height: auto;
    }

    .research .research-data .research-image-box img {
        margin-bottom: 10px;
    }

    .ideation-image-box {
        width: 100%;
        height: auto;
    }

    .ideation-title {
        margin-top: 10px;
        font-size: 16px;
        line-height: 26px;
        height: 40px;
    }

    .versa-image {
        width: 250px;
    }

    .Arts2Do-image1 {
        left: 45%;
        top: 5%;
    }

    .Arts2Do-image2 {
        height: 120px;
    }

    .Arts2Do-image3 {
        height: 120px;
    }

    .Arts2Do-image4 {
        left: 47%;
        top: 75%;
    }

    .MA-Edtech-research8 {
        width: 300px;
    }

    .gama-fs-overview {
        font-size: 14px !important;
        font-weight: 400 !important;
    }

    .p-100 {
        padding: 40px;
    }

    .px-100 {
        padding-left: 40px;
        padding-right: 40px;
    }

    .p-lt-lg {
        padding: 40px;
    }

    .h-300 {
        height: auto;
    }

    .translateY-mines-150 {
        transform: translateY(-100px);
    }

    .last-message {
        width: 100%;
        height: 149px;
        margin: 150px auto 0;
    }

    .last-message .chat-bot {
        font-size: 25px;
        text-align: left;
        text-indent: 30px;
    }

    .last-message .chat-bot-explore {
        font-size: 25px;
        margin-left: 40px;
    }

    .last-message>.position-relative .chat-box-avatar {
        opacity: 0;
        width: 130px;
        height: 130px;
        left: -70px !important;
        top: -80px !important;
    }

    .last-message>.position-relative .chat-box-avatar, #shape-box {
        transition: opacity var(--transition-duration);
    }

    .last-message .chat-bot-explore {
        margin-top: 10px;
        height: 80px;
        width: auto;
        display: flex;
        font-size: 20px !important;
        justify-content: center;
        align-items: center;
        padding-left: 30px;
        padding-right: 30px;
        transition: all var(--transition-duration);
    }

    .last-message>.position-relative .shape {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        height: 80px;
        clear: both;
        opacity: 0;
        transition: all var(--transition-duration);

    }

    .last-message>.position-relative .shape-box {
        float: left;
        height: 100%;
        transform: translateX(7px);
        transition: all var(--transition-duration);

    }

    .last-message>.position-relative .shape-box img {
        width: 50px;
        height: 100%;
        transition: all var(--transition-duration);

    }

    .last-message>.position-relative .shape-text {
        display: flex;
        justify-content: center;
        align-items: center;
        width: auto !important;
        height: 100% !important;
        font-size: 20px !important;
        font-weight: 400 !important;
        line-height: 28px !important;
        font-family: Inter;
        float: left;
        background-color: var(--chat-box);
        border-radius: 100px 100px 100px 0;
        padding-left: 30px;
        padding-right: 30px;
        transition: all var(--transition-duration);

    }

    .position-relative .shape {
        height: 70px;
    }

    .position-relative .chat-box-avatar {
        width: 120px;
        height: 120px;
        left: -70px !important;
        top: -90px !important;
    }

    .position-relative .shape-box {
        width: 50px;
        transform: translateX(7px);
    }

    .position-relative .shape-box img {
        width: 50px;
    }

    .position-relative .shape-text {
        width: auto !important;
        height: 100% !important;
        font-size: 20px !important;
        line-height: 28px !important;
        padding-left: 10px;
        padding-right: 50px;
    }
    iframe {
        height: 305px;
    }
}

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

    /* general */
    .emoji {
        width: 20px;
        height: 20px;
    }

    .footer-social-media a {
        width: 60px;
        height: 60px;
    }

    .footer-contact>div:nth-child(2) {
        flex: 1;
    }

    .footer-contact>div {
        width: 100%;
    }

    .footer-contact {
        padding: 0 !important;
        flex-direction: column-reverse;
        justify-content: center;
        width: 100% !important;
    }

    .footer-title {
        font-size: 10px;
    }

    .footer-text {
        width: 100% !important;
        font-size: 14px;
        line-height: 20px;
    }

    /* nav bar */
    .w-lt-sm {
        width: 90% !important;
    }

    .logo {
        width: 150px;
        height: 74px;
        background-size: contain;
    }

    .menu-size {
        width: 100px;
    }

    .menu-text {
        font-size: 14px;
        line-height: 0;
        margin: 0;
    }

    .blue-circle {
        width: 15px;
        height: 15px;
    }

    .btn-size {
        width: 30px;
        height: 30px;
    }

    .position {
        height: 350px;
    }

    .position a {
        font-size: 30px;
        line-height: 40px;
        width: 400px;
    }

    .position hr {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        border-width: 1px;
    }

    /* home */
    .chat-bot {
        font-size: 20px;
        line-height: 24px;
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }

    #chat-box-art {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .chat-box-avatar {
        left: -68px;
        top: -50px;
        width: 80px;
        height: 80px;
    }

    .chat-bot-choose {
        font-size: 20px;
        line-height: 24px;
    }

    #chat-box-art {
        padding-left: 100px;
        padding-right: 100px;
    }

    .chat-box-shape {
        height: 80px;
        top: 2px;
        left: -37px;
    }

    .project-box {
        width: 300px;
        height: 200px;
    }

    .project-box-text {
        font-size: 14px;
        line-height: 16px;
        width: auto;
        margin: 10px auto;
    }

    .project-box-image {
        margin: auto;
        width: 220px;
        height: auto;
    }

    .project-box-image img {
        margin: auto;
        width: 100%;
        height: auto;
    }

    .service-box {
        width: 300px;
        height: auto;
        padding: 10px;
    }

    .service-box h1 {
        font-size: 20px;
        line-height: 20px;
        margin-bottom: 50px;
    }

    .service-box p {
        font-size: 12px;
        line-height: 16px;
        margin-bottom: 50px;
    }

    .service-box a {
        font-size: 12px;
        line-height: 28px;
        padding: 5px !important;
    }

    .check {
        width: 15px;
        height: 15px;
        font-size: 12px;
    }

    .check-list .text {
        font-size: 12px;
        line-height: 14px;
    }

    .chat-bot-explore {
        font-size: 16px;
        height: 40px;
        width: 220px;
    }

    .chat-bot-explore span {
        font-size: 16px;
    }

    /* project */

    .nav-pills .title {
        height: auto;
        font-size: 20px;
        margin-right: 0px;
    }

    .nav-pills .nav-item {
        margin-left: 10px;
    }

    .nav-pills .nav-link {
        font-size: 12px;
    }

    /* .tab-content .project {
        width: 100%;
        height: 280px;
    }

    .tab-content .project h1 {
        font-size: 18px;
        line-height: 12px;
        height: auto;
        margin: 5px auto;
    }

    .tab-content .project .image-part {
        width: 250px;
        height: auto;
    }

    .tab-content .project img {
        display: block;
        width: 100%;
    } */

    /* design */

    /* .tab-content .design {
        width: 100%;
        height: auto;
        padding: 20px;
    } */

    /* .tab-content .design .category {
        margin-bottom: 70px;
    } */

    /* .tab-content .design .logo-part {
        width: 80px;
        height: 70px;
    } */

    /* .tab-content .design .type-part {
        width: 53px;
        height: 66px;
    } */

    /* .tab-content .design .type-part h1 {
        font-size: 36px;
        line-height: 20px;
    } */

    /* .tab-content .design .type-part h2 {
        font-size: 16px;
        line-height: 14px;
    } */

    /* .tab-content .design .title h1 {
        width: 80%;
        height: 13px;
        font-size: 22px;
        line-height: 24px;
    } */

    /* .tab-content .design .text p {
        width: 100%;
        font-size: 16px;
        line-height: 16px;
    } */

    /* service */
    .expertise {
        width: 100%;
    }

    .expertise h1 {
        width: 100%;
        font-size: 40px;
    }

    .expertise p {
        width: 100%;
        font-size: 24px;
        line-height: 30px;
    }

    .service-profile-box {
        width: 100%;
        height: auto;
    }

    .service-profile {
        height: auto;
        flex-direction: column-reverse;
    }

    .service-profile .left {
        padding: 30px 10px 30px 36px
    }

    .service-profile .left img {
        width: 36px;
        height: 40px;
        margin: 10px;
        display: none;
    }

    .service-profile .left p {
        width: 100%;
        height: auto;
        font-size: 16px;
        line-height: 28px;
        margin: 10px 0;
    }

    .service-profile .right img {
        width: 100%;
        height: auto;
    }

    .service-message {
        height: 200px;
    }

    .service-message h1 {
        text-align: center;
        font-size: 22px;
        line-height: 28px;
    }

    .service-page {
        width: 90%;
        height: 350px;
    }

    .last-message {
        width: 90% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        flex-direction: column;
    }

    .last-message .chat-box-avatar {
        left: -68px;
        top: -50px;
        width: 80px;
        height: 80px;
    }

    .last-message .chat-bot {
        width: 90%;
        font-size: 14px;
        text-align: left;
        text-indent: 0;
        padding: 10px !important;
    }

    .last-message .chat-box-shape {
        top: 8px;
        left: -35px;
        height: 70px;
    }

    .last-message .chat-bot-explore {
        text-align: left;
        font-size: 20px;
        margin-left: 0 !important;
        padding: 0 !important;
    }

    /* about */
    .about-data {
        flex-direction: column;
    }

    .about-title {
        margin-bottom: 30px !important;
    }

    .about-title h1 {
        font-size: 31px;
    }

    .about-data-left {
        margin-bottom: 30px !important;
    }

    .about-data-left img {
        width: 300px;
        height: 300px;
    }

    .about-data-right {
        margin-bottom: 30px !important;
    }

    .about-data-right {
        margin-bottom: 30px !important;
    }

    .about-data-right p {
        font-size: 18px;
        line-height: 20px;
    }

    .about-link {
        margin-top: 30px !important;
    }

    .about-link a {
        font-size: 16px;
        line-height: 30px;
    }

    .done-slider {
        height: 450px;
    }

    .done-title h1 {
        font-size: 30px;
    }

    .done-slider .swipe-slider-list img {
        width: 80px;
        height: 80px;
        margin: 0 40px;
    }

    .awards-slider {
        height: 550px;
    }

    .awards-title img {
        display: block;
        width: 40px;
        height: 40px;
    }

    .awards-title h1 {
        font-size: 20px;
    }

    .awards-slider .swipe-slider-list img {
        width: 200px;
        height: 300px;
    }

    .press {
        padding-top: 50px;
        width: 100%;
        height: auto;
    }

    .press-title {
        margin: 20px 0 80px;
    }

    .press-title h1 {
        font-size: 40px;
    }

    .press-first-line {
        flex-direction: column;
    }

    .press-middle-line {
        flex-direction: column;
    }

    .press-last-line {
        flex-direction: column;
    }

    .press-first-line>div {
        width: auto;
        flex: 1;
        padding-right: 0;
        margin-bottom: 10px;

    }

    .press-middle-line>div {
        width: auto;
        flex: 1;
        padding-right: 0;
        margin-bottom: 10px;

    }

    .press-last-line>div {
        width: auto;
        flex: 1;
        padding-right: 0;
        margin-bottom: 10px;

    }

    .event>div {
        flex-direction: column;
        margin-bottom: 20px;
    }

    .event .left span {
        width: 300px;
        height: 300px;
    }

    .event .left img {
        width: 300px;
        height: 300px;
    }

    .event .right h1 {
        width: 100%;
        font-size: 30px;
        line-height: 40px;
        margin-top: 30px;
    }

    .event .right p {
        width: 100%;
        font-size: 16px;
        line-height: 26px;
        margin-bottom: 60px !important;
    }

    .event .right a {
        font-size: 16px;
        width: 200px;
    }

    .value-first {
        flex-direction: column;
    }

    .value-first .left h1 {
        font-size: 24px;
        line-height: 28.61px;
        margin-bottom: 40px;
    }

    .value-first .left .check {
        width: 25px;
        height: 25px;
    }

    .value-first .left .text {
        font-size: 16px;
        line-height: 18px;
    }

    .value-first .right img {
        width: 200px;
        height: 200px;
    }

    .value-middle {
        flex-direction: column-reverse;
    }

    .value-middle .left {
        margin-top: 20px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .value-middle .left img {
        width: 200px;
        height: 200px;
    }

    .value-middle .right h1 {
        font-size: 24px;
        line-height: 28.61px;
        margin-bottom: 40px;
    }

    .value-middle .right h2 {
        font-size: 14px;
        line-height: 16px;
        margin: 0 !important;
    }

    .value-last {
        flex-direction: column;
    }

    .value-last .left h1 {
        font-size: 24px;
        line-height: 28.61px;
    }

    .value-last .left {
        margin-bottom: 30px;
    }

    .value-last .left h3 {
        /* width: 160px;
        height: 140px; */
        font-size: 14px;
        line-height: 16px;
        margin: 0 !important;
    }

    .value-last .right {
        margin-top: 20px;
    }

    .value-last .right img {
        width: 200px;
        height: 200px;
    }

    .about-end-logo {
        height: 100px;
        padding-top: 10px;
    }

    .about-end-logo .swipe-slider-list img {
        width: 128px;
        margin: 0 20px;
    }

    /* single project */
    .single-project-title {
        font-size: 34px !important;
        line-height: 40px;
    }

    .single-project-paragraph {
        font-size: 16px !important;
        line-height: 24px;
    }

    .single-project {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .single-project h1 {
        width: 95%;
        font-size: 26px;
        line-height: 38px;
        margin-bottom: 10px !important;
        margin-top: 10px !important;
    }

    .h-sm-100 {
        height: 400px !important;
    }

    .top-mines {
        top: 20px;
    }

    .gama-sm {
        margin-bottom: 20px !important;
    }

    .about-food-sm {
        font-size: 16px !important;
        font-weight: 400 !important;
        padding: 0 !important;
    }

    .single-project h1 {
        line-height: 18px;
    }

    .single-project .image-part {
        margin: auto;
        width: 90%;
        height: auto;
        margin-bottom: 10px !important;
        margin-top: 10px !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    .overview-sub {
        padding: 30px !important;
    }

    .overview .top h1 {
        font-size: 34px;
        line-height: 30px;
        margin-bottom: 40px;
    }

    .overview .top p {
        font-size: 16px;
        line-height: 24px;
    }

    .overview .bottom {
        padding-top: 40px;
    }

    .overview .bottom .service-profile .left p {
        font-size: 16px;
        line-height: 20px;
        width: 95%;
    }

    .overview-sub h1 {
        font-size: 34px;
        line-height: 40px;
    }

    .overview-sub p {
        font-size: 16px;
        line-height: 24px;
    }

    .discovery {
        padding: 30px !important;
        margin-top: 30px !important;
    }

    .discovery h1 {
        font-size: 34px !important;
        line-height: 40px !important;
        margin-bottom: 30 !important;
        margin-top: 0 !important;
        height: auto !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .discovery p {
        font-size: 16px !important;
        line-height: 24px !important;
        margin-bottom: 30px !important;
        margin-top: 0 !important;
        height: auto !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .research {
        padding: 30px;
    }

    .research .research-title {
        font-size: 34px;
        line-height: 40px;
        margin-bottom: 40px;
    }

    .research .research-data {
        flex-direction: column;
        margin-top: 30px !important;
        margin-bottom: 30px !important;
        height: auto !important;
    }

    .research .research-data h1 {
        font-size: 26px;
        line-height: 30px;
        margin-top: 30px !important;
        margin-bottom: 30px !important;
    }

    .research .research-data p {
        font-size: 16px;
        line-height: 24px;
    }

    .research .research-data .research-image-box {
        width: 100%;
        height: auto;
        margin-top: 30px !important;
        margin-bottom: 30px !important;
    }

    .research .research-data .research-image-box img {
        margin-bottom: 10px;
    }

    .ideation-image-box {
        width: 100%;
        height: auto;
        margin-bottom: 30px;
    }

    .ideation-title {
        font-size: 20px;
        line-height: 26px;
        height: 40px;
        font-weight: 600;
    }

    .mb-30 {
        margin-bottom: 30px;
    }

    .versa-image {
        width: 100%;
    }

    .lt-sm {
        position: static !important;
        width: 100%;
    }

    .Arts2Do-image1 {
        left: 45%;
        top: 5%;
    }

    .Arts2Do-image2 {
        height: 60px;
    }

    .Arts2Do-image3 {
        height: 60px;
    }

    .Arts2Do-image4 {
        left: 47%;
        top: 75%;
    }

    .MA-Edtech-research8 {
        width: 300px;
    }

    .gama-fs-overview {
        font-size: 14px !important;
        font-weight: 400 !important;
    }

    .p-100 {
        padding: 30px;
    }

    .px-100 {
        padding-left: 30px;
        padding-right: 30px;
    }

    .p-lt-lg {
        padding: 40px;
    }

    .h-300 {
        height: auto;
    }

    .translateY-mines-150 {
        transform: translateY(-100px);
    }

    .lock {
        width: 50px;
        height: 50px;
    }

    .vorwerk-research-sm {
        height: auto !important;
    }

    .vorwerk-research-sm img {
        position: static !important;
        width: 100% !important;
        margin-bottom: 10px;
    }

    .h-490-sm {
        height: 300px !important;
    }

    .art-sm {
        position: static !important;
    }

    .mb-100-sm {
        margin-bottom: 100px;
    }

    .px-art {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    .productmatcher-sm {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        margin-bottom: 10px;
    }

    .mt-sm-home {
        margin-top: 130px !important;
    }

    [class*="col"] {
        margin-bottom: 30px !important;
    }

    .top-mines {
        top: -30px;
    }

    .versa-mt {
        padding-top: 30px !important;
    }

    .mobile-post {
        margin-bottom: 10px !important;
        height: 180px !important;
    }

    .library-post {
        height: auto !important;
        margin-bottom: 30px !important;
    }

    .adjoe-4-pic {
        margin-top: 0px !important;
        margin-bottom: 0px !important;
    }

    .adjoe-4-pic>section {
        margin-top: 0px !important;
        margin-bottom: 0px !important;
    }

    .adjoe-4-pic>section>div {
        margin-top: 0px !important;
        margin-bottom: 0px !important;
    }

    .adjoe-4-pic>section>div>img {
        margin-top: 0px !important;
        margin-bottom: 0px !important;
    }

    .mus-post {
        height: auto !important;
        margin-bottom: 20px !important;
    }

    .last-message {
        width: 100%;
        height: 200px;
        margin: 150px auto 0;
    }

    .last-message .chat-bot {
        font-size: 25px;
        text-align: left;
        text-indent: 30px;
    }

    .last-message .chat-bot-explore {
        font-size: 25px;
        margin-left: 40px;
    }

    .last-message>.position-relative .chat-box-avatar {
        opacity: 0;
        width: 110px;
        height: 110px;
        left: -10px !important;
        top: -45px !important;
        transition: all var(--transition-duration);

    }

    .last-message>.position-relative .chat-box-avatar, #shape-box {
        transition: opacity var(--transition-duration);
    }

    .last-message .chat-bot-explore {
        margin-top: 10px;
        height: 80px;
        width: auto;
        display: flex;
        font-size: 14px !important;
        justify-content: center;
        align-items: center;
        padding-left: 60px !important;
        padding-right: 60px !important;
        transition: all var(--transition-duration);
    }

    .last-message>.position-relative .shape {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        height: 80px;
        clear: both;
        opacity: 0;
        transition: all var(--transition-duration);

    }

    .last-message>.position-relative .shape-box {
        float: left;
        height: 100%;
        transform: translateX(7px);
        transition: all var(--transition-duration);

    }

    .last-message>.position-relative .shape-box img {
        width: 50px;
        height: 100%;
        transition: all var(--transition-duration);

    }

    .last-message>.position-relative .shape-text {
        display: flex;
        justify-content: center;
        align-items: center;
        width: auto !important;
        height: 100% !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        line-height: 20px !important;
        font-family: Inter;
        float: left;
        background-color: var(--chat-box);
        border-radius: 100px 100px 100px 0;
        padding-left: 30px;
        padding-right: 30px;
        transition: all var(--transition-duration);

    }

    .position-relative .shape {
        height: 70px;
        transform: translateX(25px);
    }

    .position-relative .chat-box-avatar {
        width: 90px;
        height: 90px;
        left: -10px !important;
        top: -50px !important;
    }

    .position-relative .chat-box-avatar img {
        width: 90px;
        height: 90px;
    }
    .position-relative .chat-box-avatar span {
        width: 90px;
        height: 90px;
    }

    .position-relative .shape-box {
        width: 50px;
        transform: translateX(7px);
    }

    .position-relative .shape-box img {
        width: 50px;
    }

    .position-relative .shape-text {
        width: auto !important;
        height: 100% !important;
        font-size: 20px !important;
        line-height: 28px !important;
        padding-left: 10px;
        padding-right: 50px;
    }
    iframe {
        height: 172px;
    }
}