@import url("https://fonts.googleapis.com/css2?family=Alexandria:wght@100..900&display=swap");

:root {
    --primary-gd: transparent linear-gradient(140deg, #384967 0%, #6f91cd 100%) 0% 0% no-repeat padding-box;
    --c-primary: #e50075;
    --c-secondary: #6520d1;
    --c-body: #000000;
    --c-purple: #6520d1;
    --c-yellow-cake: #dfcf7a;
    --c-pink: #e50075;
    --c-pink-soft: #ea9f8b;
    --c-red-broken: #e14738;
    --c-blue-darken: #1b1737;
    --c-green: #0f7305;
    --c-green-darken: #283a46;
    --c-green-neon: #bdfa04;
    --c-polaroid: #f2f2f2;
    --c-black: #212529;
    --c-info: #9597a1;
    --c-white: #ffffff;
    --c-grey: #d1d1d1;
    --c-disabled: #dee1e8;
    --c-transparent: transparent;
    --c-skeleton: #464646;
    --shadow-bg: 0px 6px 18px rgb(0 0 0 / 8%);
    --shadow-skeleton: 0px 6px 18px rgb(0 0 0 / 3%);
    --ts-cubic: all 0.5s cubic-bezier(0.47, 0.71, 0.66, 0.84);
}

@media (max-width: 1024px) {
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    h3 {
        font-size: 1.3rem;
    }

    h4 {
        font-size: 1.2rem;
    }

    h5 {
        font-size: 1.1rem;
    }

    h6 {
        font-size: 1rem;
    }

    p {
        font-size: 1rem;
    }

    .sc-xxl {
        font-size: 1.5rem;
    }

    .sc-xl {
        font-size: 1.5rem;
    }

    .sc-l {
        font-size: 1rem;
    }

    .sc-m {
        font-size: 0.95rem;
    }

    .sc-s {
        font-size: 0.85rem;
    }

    img.icon-16 {
        width: 1rem;
        height: 1rem;
    }

    img.icon-24 {
        width: 1.125rem;
        height: 1.125rem;
    }

    img.icon-32 {
        width: 1.5rem;
        height: 1.5rem;
    }

    img.icon-48 {
        width: 2rem;
        height: 2rem;
    }

    select.form-control,
    input.form-control,
    textarea.form-control {
        font-size: 1rem;
    }

    .swiper-button-next,
    .swiper-button-prev {
        width: 2.25rem !important;
        height: 2.25rem !important;
    }

    .swiper-button-prev {
        left: 0.5rem;
    }

    .swiper-button-next {
        right: 0.5rem;
    }

    .form-group {
        margin-bottom: 1rem !important;
    }

    #modalChatGita .chat-form-body .chat-body .form-group {
        margin-bottom: 0rem !important;
    }

    .modal-body {
        padding: 1rem;
    }

    .modal-header {
        padding: 1rem;
    }

    .modal-footer {
        padding: 0.5rem;
    }

    .swiper-button-next,
    .swiper-button-prev {
        top: 50%;
    }

    .accordion-service .accordion-item .accordion-button::after {
        position: static;
    }

    .btn-pensil {
        font-size: 16px;
    }

    .btn-custom span {
        top: -7px;
    }

    /*====================================== SECTION OUR TEAM ======================================*/

    .portraits-card-1 .image {
        max-width: none;
    }

    .portraits-card-2 .image {
        max-width: none;
    }

    .portraits-card-3 .image {
        max-width: none;
    }

    .portraits-card-4 .image {
        max-width: none;
    }

    .portraits-card-5 .image {
        max-width: none;
    }

    .portraits-card-6 .image {
        max-width: none;
    }

    .portraits-card-7 .image {
        max-width: none;
    }

    .portraits-card-8 .image {
        max-width: none;
    }

    .portraits-card-9 .image {
        max-width: none;
    }

    /*====================================== SECTION SERVICES PAGES ======================================*/

    .section-services-vp .background-image-services {
        opacity: 0.1;
    }

    /*====================================== SECTION WORD ======================================*/

    .c-small {
        font-size: 0.625rem;
    }

    .sc-xxl {
        font-size: 1.5rem;
    }

    .modal-header .close {
        opacity: 1;
        top: 2px;
        right: 2px;
    }

    .modal-header .close span {
        font-size: 1rem;
    }

    .article-pagination.article-detail-pagination .page-link.page-link-prev,
    .article-pagination.article-detail-pagination .page-link.page-link-next {
        width: 100%;
    }

    .article-detail-pagination .pagination {
        justify-content: center;
    }
}

/*Phone View*/
@media (max-width: 767px) {
    section {
        padding: 2rem 0;
    }

    /*====================================== SECTION TEXT AND GAP ======================================*/

    .sc-xl {
        font-size: 1.15rem;
    }

    .row-gap-sm-0 {
        row-gap: 0rem;
    }

    /*====================================== SECTION MENU NAVBAR ======================================*/
    .container-nav {
        /*flex-direction: column;*/
        position: relative;
        max-width: 100%;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 1rem;
    }

    header nav {
        padding: 0rem;
    }

    header nav#navigation.scrolled {
        background-color: transparent;
        padding: 0 1rem;
    }

    header nav#navigation.scrolled .container-nav {
        width: 100%;
        background-color: #0000005a;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        transform: translateY(20px);
        border-radius: 48px;
        transition: all 0.4s;
    }

    .container-nav .nav-logo {
        margin: 0 auto;
        transition: all 0.4s;
    }

    .container-nav .nav-logo-mobile a {
        display: inline-block;
        height: 100%;
        width: 100%;
    }

    .nav-logo .image {
        width: 100%;
        height: 1.5rem;
    }

    .nav-toggle {
        /* position: absolute; */
        width: 46px;
        height: 46px;
        right: 0;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: ease-in-out 0.4s;
    }

    header nav#navigation.scrolled .container-nav .nav-toggle {
        right: -6px;
    }

    header nav#navigation.scrolled .container-nav .nav-toggle span {
        font-size: 16px;
        z-index: 2;
    }

    .menu-nav-container {
        top: 0;
        left: 0;
        /* opacity: 0; */
        width: 100%;
        height: 100vh;
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: center;
    }

    .accordion-button::after {
        width: 1rem;
        height: 1rem;
        background-size: 1rem;
    }

    .close-mobile {
        opacity: 0;
        z-index: 99;
        position: absolute;
        top: 1rem;
        right: 0.5rem;
    }

    .bg-mobile-menu {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 128px;
        height: 128px;
        background: #be8c22 0% 0% no-repeat padding-box;
        opacity: 1;
        filter: blur(60px);
        -webkit-filter: blur(60px);
    }

    .menu-container .ornament-wrapper .ornament-pensil {
        position: absolute;
        max-width: 1.25rem;
        opacity: 0.2;
    }

    .ornament-wrapper .ornament-pensil-1 {
        left: 0;
        transform: rotate(45deg);
        top: 5rem;
    }

    .ornament-wrapper .ornament-pensil-2 {
        right: 0;
        transform: rotate(-45deg);
        bottom: -2rem;
    }

    .menu-nav .contact-sosmed-list .icon-sosmed {
        max-width: 2.5rem;
    }

    header nav#navigation.scrolled .menu-nav {
        border: 0;
        border-radius: 0;
        max-width: 100%;
        box-shadow: none;
    }

    header nav#navigation.scrolled .menu-container .menu-nav {
        backdrop-filter: blur(0);
        -webkit-backdrop-filter: blur(0);
    }

    .menu-nav-center {
        align-items: start;
        flex-direction: column;
        margin-bottom: 1rem;
    }

    .menu-nav-end {
        background: transparent linear-gradient(169deg, #8f661400 0%, #00000000 47%, #66460000 100%) 0% 0% no-repeat padding-box;
    }

    /* .menu-nav li:nth-child(2) {
        margin-bottom: 0;
    } */

    .menu-nav li a {
        font-size: 1.25rem;
    }

    .accordion-service .accordion-item .accordion-button {
        font-size: 1.25rem;
    }

    /*====================================== SECTION HOME PAGE  - Phone ======================================*/
    .lottie-wrapper-left .image,
    .lottie-wrapper-right .image {
        max-width: 152px;
    }

    .section-home-hero .title-hero-home {
        font-size: 0.85rem;
    }

    .subject-desc.bg-splash-black,
    .subject-desc.bg-splash-brown {
        padding: 0.5rem 0.75rem;
    }

    .section-home-hero .subject-wrapper .image-logo {
        max-width: 17rem;
    }

    .section-home-hero .scroll-down-wrapper .lottie-arrow {
        max-width: 1rem;
    }

    /* .wrapper-marq {
        margin-top: 3rem;
        width: 200%;
    }

    .wrapper-marq .box-marq {
        margin: 0 1rem 0 0;
    }

    .box-marq .image {
        height: 5rem;
        width: 100%;
    } */

    .wrapper-marq {
        gap: 2rem;
    }

    .box-marq.spacer {
        width: 2rem;
    }

    .box-marq .image {
        height: 6rem;
        width: 6rem;
    }

    .wrapper-marq {
        margin-top: 0rem;
        padding-top: 0rem;
        padding-bottom: 0rem;
    }

    .wrapper-marq .box-marq {
        margin: 0 1rem 0 0;
    }

    .box-marq .image {
        height: 8rem;
        width: 8rem;
    }

    .box-marq .image img {
        padding: 0rem;
        /* padding: 0.25rem; */
    }

    .ac-thumbnail-center .article-card-thumbnail {
        height: 252px;
    }

    /*====================================== SECTION ABOUT US ======================================*/

    .divider-top-sph,
    .divider-top-swd,
    .divider-top-ssa,
    .divider-top-hcd {
        position: relative;
        margin-top: -1.5rem;
        bottom: -1px;
        z-index: 99;
    }

    .span-about {
        display: block;
        position: relative;
        text-align: end;
        width: 100%;
        max-width: 20rem;
        margin: 0 auto;
        top: -10px;
        right: 40px;
    }

    /*====================================== SECTION OUR TEAM ======================================*/

    .section-our-team .header-our-team .title-our-team {
        font-size: 1.3rem;
    }

    .section-our-team .header-our-team .image-in-jakarta {
        max-width: 170px;
    }

    .ot-desc-mobile,
    .services-desc-mobile {
        display: flex;
    }

    .ot-desc-dekstop,
    .services-desc-dekstop {
        display: none;
    }

    .subject-desc.bg-splash-brown {
        padding: 0.5rem 0.75rem;
    }

    .section-our-team .portrait-container-mobile {
        display: block;
        margin-top: 2rem;
    }

    .section-our-team .portrait-container-dekstop {
        display: none;
    }

    .portraits-card {
        position: static;
    }

    .portraits-card .image img {
        max-height: 240px;
        min-height: 240px;
        max-width: 296px;
        min-width: 296px;
        object-fit: cover;
    }

    /*====================================== SECTION WHAT WE DO ======================================*/

    .section-whatwe-do .wwd-right {
        padding: 0rem 0rem 3rem 0rem;
    }

    .subject-desc-wwd-m {
        max-width: 320px;
    }

    .wwd-list .icon-wwd {
        max-width: 4rem;
    }

    .wwd-list:hover::before {
        display: none;
    }

    .wwd-list a:hover {
        color: var(--c-black) !important;
    }

    .wwd-list a:hover .icon-wwd img {
        filter: none;
        transition: filter 0.3s ease;
    }

    /*====================================== SECTION OUR WORKS ======================================*/

    .section-works .scroll-down-wrapper {
        margin-bottom: 0rem;
    }

    .section-works .scroll-down-wrapper .lottie-arrow {
        max-width: 0.5rem;
    }

    .swiper-container.swiper-project {
        width: auto;
    }

    .swiper-project .swiper-wrapper .swiper-slide {
        height: 25rem;
    }

    .swiper-container.swiper-project {
        background-image: none;
    }

    .card-works {
        height: 23rem;
        background-color: var(--c-polaroid);
        box-shadow: 0px 2px 10px 2px rgb(0 0 0 / 32%);
    }

    .card-works .btn-tertiary {
        padding: 1.25rem;
    }

    .card-works .image-bot-polaroid {
        position: absolute;
        bottom: -11px;
    }

    /*====================================== SECTION CLIENTS ======================================*/

    .section-clients .clients-section-header {
        padding: 2rem 1rem;
        max-width: 21rem;
    }

    .section-clients .clients-section-header .duct-tape-top .image,
    .section-clients .clients-section-header .duct-tape-bottom .image {
        max-width: 7rem;
    }

    .divider-bottom-sa {
        margin-bottom: -1rem;
        top: -0.45rem;
    }

    .modal-client-detail .modal-client-left {
        width: 100%;
    }

    .modal-client-detail .modal-client-right::before {
        top: unset;
        bottom: 0;
    }

    .modal-client-detail .modal-client-right {
        width: 100%;
    }

    .modal-client-detail .modal-client-right .mcr-wrapper {
        gap: 2rem;
    }

    .modal-client-detail .swiper-client-project .project-image {
        height: 18rem;
    }

    /*====================================== SECTION TESTIMONI ======================================*/

    .card-corner {
        bottom: -4px;
        left: -4px;
    }

    /*====================================== SECTION SERVICES STRATEGY & PLANINGS WORKS LIST  - Phone ======================================*/

    .ssw-service-strategy .ssw-list {
        /* width: 100%;
        max-width: none; */
        margin: unset;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 1.5rem;
        padding: 1rem 4rem;
        border-right: none;
        border-bottom: 1px solid rgb(76, 76, 76);
    }

    .ssw-service-strategy .ssw-list:last-child {
        border: none;
    }

    .strategy-porto-wrapper .strategy-porto-list .image {
        width: 100%;
        height: 4rem;
    }

    .section-services-portofolio .subject-desc.bg-splash-black h4 {
        font-size: 1rem;
    }

    .divider-bottom-sau {
        top: -1rem;
        background-color: transparent !important;
        margin-bottom: -2rem;
    }

    .divider-bottom-ss {
        top: -2rem;
        background-color: transparent !important;
        margin-bottom: -2rem;
    }

    /*====================================== SECTION SERVICES DETAIL ======================================*/

    .section-servdetail-hero .image {
        height: 20.75rem;
    }

    .section-servdetail-hero .image img {
        object-position: right;
    }

    .section-servdetail-project.bg-papper {
        position: relative;
        background-color: var(--c-blue-sea);
        background-image: url("../images/background/bg-papper.svg");
        background-size: cover;
        background-blend-mode: multiply;
        padding: 4rem 0 0rem 0;
        z-index: 0;
        opacity: 1;
    }

    .section-servdetail-project .service-detail-wrapper {
        padding: 0rem 0 4rem 0;
    }

    .section-servdetail-project .section-servdetail-image {
        max-width: 17rem;
    }

    .section-servdetail-project .servdetail-video {
        height: 280px;
    }

    /*======================================  SECTION CAREER  ======================================*/
    section.section-career {
        margin-top: -80px;
        padding-top: 0;
    }

    .career-hero {
        height: 480px;
    }

    .career-hero .career-hero-wrapper {
        margin-top: -40px;
        flex-direction: column-reverse !important;
        gap: 32px !important;
    }

    .career-hero .career-hero-wrapper .career-hero-word-left,
    .career-hero .career-hero-wrapper .career-hero-word-right {
        margin-top: -168px;
    }

    .career-hero .career-hero-wrapper .career-hero-word-right,
    .career-hero .career-hero-wrapper .career-hero-word-left {
        margin-left: 0;
        padding: 0 1rem;
    }

    .career-hero .career-hero-wrapper .career-hero-word-left {
        margin-right: auto;
    }

    .career-hero .career-hero-wrapper .career-hero-word-right {
        margin-left: auto;
    }

    .career-hero .career-hero-wrapper .career-hero-word-right h2 {
        text-align: right !important;
    }

    .career-hero .career-hero-wrapper .image {
        overflow: hidden;
        bottom: -160px;
    }

    .career-hero .career-hero-wrapper .image img {
        object-fit: contain;
        transform: scale(2);
    }

    section.section-career-list {
        padding-top: 30vw;
    }

    .accordion-career .accordion-body .career-inside-container {
        flex-direction: column !important;
    }

    .career-inside-image {
        height: 15rem;
    }

    .career-inside-image::before {
        top: auto;
        bottom: -1px;
        width: 100%;
        height: 50%;
        background: -moz-linear-gradient(180deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(0, 0, 0, 1) 100%);
        background: -webkit-linear-gradient(180deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(0, 0, 0, 1) 100%);
        background: linear-gradient(180deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(0, 0, 0, 1) 100%);
    }

    .career-inside-word {
        padding: 1rem;
    }

    /*======================================  SECTION CONTACT  ======================================*/
    .btn-primary,
    .btn-secondary {
        padding: 1.25rem;
    }

    /*======================================  SECTION PROJECT  ======================================*/
    section.section-project {
        margin-top: -80px;
        padding-top: 80px;
    }

    .cta-swiper-project {
        max-width: 180px;
    }

    .project-desc {
        width: 100%;
    }

    .project-desc-content {
        padding: 1rem;
    }

    .project-desc .project-logo {
        max-width: 8rem !important;
    }

    .project-list-wrapper .project-image {
        height: 240px;
    }

    .project-another-thumbnail a .image {
        height: 320px !important;
    }

    /*======================================  SECTION ARTICLE LIST  ======================================*/

    .article-swiper-cta .another-project-prev,
    .article-swiper-cta .swiper-button-prev {
        left: -2.5rem;
    }

    .article-swiper-cta .another-project-next,
    .article-swiper-cta .swiper-button-next {
        right: -2.5rem;
    }

    .article-update-card {
        padding-bottom: 1rem;
        border-bottom: 1px solid #6a4343;
        gap: 1rem;
    }

    .article-update-card:nth-last-child(1) {
        border-bottom: none;
    }

    .article-update-card .artdate-card-content {
        gap: 1rem;
    }

    .article-update-card .artdate-card-image {
        max-width: fit-content;
        min-width: fit-content;
    }

    .article-update-card .artdate-card-image img {
        max-height: 320px;
    }

    .article-update-card .btn-article {
        padding: 0.75rem 1rem;
    }

    .artdate-card-tag {
        padding: 0.25rem 1rem;
        max-width: 228px;
    }

    .acs-highlight-primary .article-card-thumbnail {
        height: 320px;
    }

    .article-swiper-cta {
        display: none;
    }

    /*======================================  SECTION ARTICLE DETAIL  ======================================*/
    .background-ad-hero {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        min-height: 50vh;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        opacity: 0.3;
        z-index: 1;
        margin-left: auto;
    }

    .ad-hero-overlay {
        left: 0;
        width: 100%;
        min-height: 50vh;
        z-index: 9;
    }

    .background-ad-hero::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgb(255, 255, 255);
        background: -moz-linear-gradient(180deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(0, 0, 0, 1) 100%);
        background: -webkit-linear-gradient(180deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(0, 0, 0, 1) 100%);
        background: linear-gradient(180deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(0, 0, 0, 1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#000000", GradientType=1);
    }

    /*====================================== SECTION CAREER DETAIL ======================================*/

    .btn-back {
        position: fixed;
        left: 10px;
        top: 110px;
        height: 36px;
        width: 36px;
        background-color: rgba(255, 255, 255, 0.369);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }

    /*====================================== SECTION CONTACT ======================================*/

    .section-contact-us .form-wording {
        max-width: none;
    }

    /*====================================== SECTION THANK YOU - MOBILE ======================================*/

    .section-thankyou-hero {
        min-height: 80vh;
    }

    .thankyou-bottom-wrapper {
        padding-top: 6rem;
    }

    /*====================================== SECTION MDOAL CHAT SELECT - MOBILE ======================================*/
    #modalChatForm .modal-content {
        height: 550px;
    }

    .modal-right {
        margin: 0.5rem;
    }

    .modal-right .modal-content {
        right: auto;
    }

    .card-choose-ai.ai-video .choose-ai-image .image {
        height: 218px;
    }

    .card-choose-ai.ai-chat .choose-ai-image .image {
        max-width: 128px;
    }

    .card-choose-ai.ai-chat .choose-ai-text-wrapper {
        padding: 2rem 8rem 2rem 2rem;
    }

    .card-choose-ai.ai-video .choose-ai-text-wrapper {
        padding: 2rem 2rem 2rem 8rem;
    }

    .video-live-ai video {
        height: 254px;
        width: 254px;
    }

    #modalChatGita .chat-form-body .chat-body .chat-form-wrapper {
        max-height: 312px;
        min-height: 312px;
    }

    .chat-form-body .form-header h6,
    .chat-form-body .form-header p {
        font-size: 0.85rem;
    }

    .card-choose-ai .image {
        max-width: 17rem;
    }

    .ai-video .btn-pensil {
        padding: 0.5rem;
    }

    #selectChatType {
        overflow: auto;
    }

    #modalChatGita .chat-form-body .chat-body .form-control {
        font-size: 0.75rem;
    }

    #modalChatGita .chat-form-body .chat-body .form-group .image {
        max-width: 2.5rem;
    }

    /*====================================== SECTION MODAL POPUP - mobile ======================================*/
    #modalPopupBanner .modal-content {
        max-width: 21.5rem;
    }

    #modalPopupBanner .modal-header .close {
        top: -10px;
        right: -10px;
        width: 24px;
        height: 24px;
    }

    #modalPopupBanner .modal-header .close span {
        font-size: 16px;
    }

    /*====================================== SECTION 404 - mobile ======================================*/

    .section-notfound h1 {
        font-size: 6rem;
    }

    .section-notfound h2 {
        font-size: 4rem;
    }

    .section-notfound .notfound-bottom {
        margin-top: -6rem;
        margin-left: unset;
        z-index: 9;
    }

    .section-notfound .notfound-bottom .image {
        margin-right: unset;
        margin-left: -3.5rem;
        max-width: 240px;
    }

    /*====================================== SECTION FOOTER ======================================*/
    footer {
        margin-top: 0;
        /* padding: 2rem 0 0em 0; */
    }

    .section-map .footer-maps {
        height: 320px;
    }

    .footer-logo {
        max-width: 8rem !important;
    }

    .footer-copyright {
        margin-top: 0;
    }

    .footer-copyright .word h5 {
        font-size: 16px;
    }

    .cs--container .desc h2 {
        font-size: 1.5rem;
    }
}

@media (min-width: 576px) and (max-width: 768px) {
    .modal-right {
        margin: 0.5rem auto;
    }
}

@media (max-width: 415px) {
    #modalChatForm .modal-content {
        height: 550px;
    }

    #modalChatGita .chat-form-body .chat-body .chat-form-wrapper {
        max-height: 310px;
        min-height: 310px;
    }

    #modalVideoLive .chat-form-body .video-chat-body .form-group#voice-chat-gita {
        padding: 0rem 4rem 0rem 4rem;
    }

    .video-live-ai video {
        height: 210px;
        width: 210px;
        background-position: 0px -30px !important;
        object-position: 0px -30px !important;
    }

    .video-chat-body .vid-ai-text .sc-xs {
        font-size: 0.7rem;
    }
}

@media (max-width: 350px) {
    #modalChatForm .modal-content {
        height: 460px;
    }

    #modalChatGita .chat-form-body .chat-body .form-group .image {
        max-width: 2.25rem;
    }

    #modalChatGita .chat-form-body .chat-body .chat-form-wrapper {
        max-height: 225px;
        min-height: 225px;
    }

    .video-live-ai video {
        height: 170px;
        width: 170px;
        background-position: 0px -30px !important;
        object-position: 0px -30px !important;
    }

    .video-chat-body .vid-ai-text .sc-xs {
        font-size: 0.6rem;
    }

    #modalVideoLive .chat-form-body .video-chat-body .form-group#voice-chat-gita {
        padding: 0rem 2rem 0rem 4rem;
    }
}

/*Small Phone View*/
@media (min-width: 320px) and (max-width: 340px) {
    /*====================================== SECTION Wording ======================================*/

    .section-home-hero .title-hero-home {
        font-size: 0.75rem;
    }

    .bg-splash-black h1,
    .bg-splash-black h2,
    .bg-splash-black h3,
    .bg-splash-black h4,
    .bg-splash-black h5,
    .bg-splash-black h6,
    .bg-splash-black p,
    .bg-splash-brown h1,
    .bg-splash-brown h2,
    .bg-splash-brown h3,
    .bg-splash-brown h4,
    .bg-splash-brown h5,
    .bg-splash-brown h6,
    .bg-splash-brown p {
        position: relative;
        top: -3px;
    }

    .subject-desc.bg-splash-black,
    .subject-desc.bg-splash-brown {
        padding: 0.5rem 0.5rem;
    }

    .section-services-portofolio .subject-desc.bg-splash-black h4 {
        font-size: 1rem;
    }

    /*====================================== SECTION HOME PAGE ======================================*/
    .lottie-wrapper-left .image,
    .lottie-wrapper-right .image {
        max-width: 112px;
    }

    /*====================================== SECTION OUR TEAM ======================================*/

    .section-our-team .header-our-team .title-our-team {
        font-size: 1.1rem;
    }

    /*====================================== SECTION OUR WORKS ======================================*/
    .swiper-container.swiper-project {
        width: auto;
    }

    .swiper-project .swiper-wrapper .swiper-slide {
        height: 23rem;
    }

    .card-works {
        height: 21rem;
        background-color: var(--c-polaroid);
        box-shadow: 0px 2px 10px 2px rgb(0 0 0 / 32%);
    }

    .card-works .btn-tertiary {
        padding: 0.75rem 1rem;
    }

    .card-works .image-bot-polaroid {
        bottom: -10px;
    }

    /*====================================== SECTION CLIENTS ======================================*/
    .section-clients .clients-section-header {
        max-width: 19rem;
    }

    /*====================================== SECTION ARTICLE ======================================*/

    .divider-bottom-sa {
        margin-bottom: -1rem;
        top: -0.6rem;
    }

    .divider-bottom-ss,
    .divider-bottom-sau {
        margin-bottom: -1.5rem;
    }

    /*====================================== SECTION MDOAL CHAT SELECT - MOBILE ======================================*/

    .card-choose-ai.ai-video .choose-ai-image .image {
        height: 200px;
    }
}

@media (min-width: 1px) and (max-width: 767px) and (max-height: 750px) {
    /*====================================== SECTION 404 ======================================*/
}

@media (min-width: 461px) and (max-width: 767px) {
    /*====================================== SECTION CAREER - MOBILE ======================================*/

    section.section-career {
        margin-top: -80px;
        padding-top: 3rem;
    }

    .career-hero .career-hero-wrapper .image {
        height: 125%;
        bottom: -204px;
    }

    .career-hero .career-hero-wrapper {
        margin-top: -128px;
    }

    section.section-career-list {
        padding-top: 27.5vw;
    }
}

/* Portrait iPad air and iPad Mini */
@media (min-width: 768px) and (max-width: 1024px) {
    h1 {
        font-size: 3rem;
    }

    h2 {
        font-size: 2rem;
    }

    h3 {
        font-size: 1.85rem;
    }

    h4 {
        font-size: 1.75rem;
    }

    h5 {
        font-size: 1.5rem;
    }

    h6 {
        font-size: 1.25rem;
    }

    .modal-dialog {
        max-width: 640px;
    }

    /*====================================== SECTION TEXT AND GAP - iPad Portrait ======================================*/

    .sc-xl {
        font-size: 2.15rem;
    }

    .row-gap-sm-0 {
        row-gap: 0rem;
    }

    /*====================================== SECTION NAVBAR - iPad Portrait ======================================*/

    .nav-logo-mobile .image {
        width: 100%;
        height: 2rem;
    }

    .nav-menu ul {
        gap: 0;
    }

    header nav .nav-menu li a {
        font-size: 1rem;
        padding: 0.5rem;
    }

    .menu-container .ornament-wrapper .ornament-pensil {
        position: absolute;
        max-width: 2.25rem;
        opacity: 0.2;
    }

    .ornament-wrapper .ornament-pensil-1 {
        left: 0;
        transform: rotate(45deg);
        top: 5rem;
    }

    .ornament-wrapper .ornament-pensil-2 {
        right: 0;
        transform: rotate(-45deg);
        bottom: -2rem;
    }

    header nav#navigation.scrolled .nav-menu li a {
        font-size: 1rem;
    }

    header nav#navigation.scrolled .menu-nav {
        transform: translateX(0);
        max-width: 620px;
    }

    /* .menu-nav li a {
        font-size: 2.625rem;
    }

    .accordion-service .accordion-item .accordion-button {
        font-size: 2.625rem;
    } */

    /*====================================== SECTION HOME PAGE - iPad Portrait ======================================*/
    .section-home-hero .subject-wrapper {
        padding-top: 10rem;
    }

    .subject-desc.bg-splash-black,
    .subject-desc.bg-splash-brown {
        padding: 1rem 1.5rem;
    }

    .lottie-wrapper-left .image,
    .lottie-wrapper-right .image {
        max-width: 18rem;
    }

    /*====================================== SECTION ABOUT US - iPad Portrait ======================================*/

    .span-about {
        position: absolute;
        top: 35px;
        right: -60px;
    }

    .divider-top-sph,
    .divider-top-swd,
    .divider-top-ssa {
        position: relative;
        margin-top: -2rem;
        bottom: -1px;
        z-index: 99;
    }

    /*====================================== SECTION OUR TEAM - iPad Portrait ======================================*/

    .section-our-team .header-our-team .image-in-jakarta {
        max-width: 320px;
    }

    .ot-desc-mobile,
    .services-desc-mobile {
        display: flex;
    }

    .ot-desc-dekstop,
    .services-desc-dekstop {
        display: none;
    }

    .section-our-team .portrait-container-mobile {
        margin-top: 3rem;
        display: block;
    }

    .section-our-team .portrait-container-dekstop {
        display: none;
    }

    .portraits-card {
        position: static;
    }

    .portraits-card .image img {
        max-height: 240px;
        min-height: 240px;
        max-width: 328px;
        min-width: 328px;
        object-fit: cover;
    }

    /*====================================== SECTION OUR WORKS - iPad Portrait ======================================*/

    .swiper-container.swiper-project {
        padding: 0 3rem;
        margin: 0 auto;
        /* top: 15% !important; */
    }

    .swiper-container.swiper-project {
        background-image: none;
    }

    .card-works {
        width: 520px !important;
        height: 480px;
        background-color: var(--c-polaroid);
        box-shadow: 0px 2px 10px 2px rgb(0 0 0 / 32%);
    }

    /*====================================== SECTION WHAT WE DO - iPad Portrait ======================================*/

    .section-whatwe-do .wwd-right {
        padding: 0rem 0rem 3rem 0rem;
    }

    .wwd-list .icon-wwd {
        max-width: 4rem;
    }

    .wwd-list:hover::before {
        display: none;
    }

    .wwd-list a:hover {
        color: var(--c-black) !important;
    }

    .wwd-list a:hover .icon-wwd img {
        filter: none;
        transition: filter 0.3s ease;
    }

    /*====================================== SECTION CLIENTS - iPad Portrait ======================================*/

    .wrapper-marq {
        margin-top: 3rem;
        padding-top: 0rem;
        padding-bottom: 0rem;
    }

    .wrapper-marq .box-marq {
        margin: 0 1rem 0 0;
    }

    .box-marq .image img {
        padding: 0.25rem;
    }

    .modal-client-detail .modal-client-left,
    .modal-client-detail .modal-client-right {
        width: 100%;
    }

    .modal-client-detail .swiper-client-project .project-image {
        height: 27.5rem;
    }

    .modal-client-detail .modal-client-right .mcr-wrapper {
        gap: 2rem;
    }

    .divider-bottom-sa {
        margin-bottom: -2rem;
        top: -0.45rem;
    }

    /*====================================== SECTION SERVICES STRATEGY & PLANINGS WORKS LIST - iPad Portrait ======================================*/

    .ssw-service-strategy .ssw-list {
        /* width: 100%;
        max-width: none; */
        margin: unset;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 2.5rem;
        padding: 1rem 4rem;
        border-right: none;
        border-bottom: 1px solid rgb(76, 76, 76);
    }

    .ssw-service-strategy .ssw-list:last-child {
        border: none;
    }

    .strategy-porto-wrapper .strategy-porto-list .image {
        width: 100%;
        height: 8rem;
    }

    /*====================================== SECTION SERVICES WORKS VIDEO PRODUCTION - iPad Portrait ======================================*/

    .video-production .vpw-list .vpw-list-wrapper {
        max-width: 32rem;
    }

    /*======================================  SECTION CAREER - iPad Portrait  ======================================*/
    .career-hero {
        height: 480px;
    }

    .career-hero .career-hero-wrapper {
        /* margin-top: -320px; */
        flex-direction: column-reverse !important;
        gap: 0 !important;
    }

    .career-hero .career-hero-wrapper .career-hero-word-left,
    .career-hero .career-hero-wrapper .career-hero-word-right {
        margin-top: -68px;
    }

    .career-hero .career-hero-wrapper .career-hero-word-right,
    .career-hero .career-hero-wrapper .career-hero-word-left {
        margin-left: 0;
        padding: 0 1rem;
    }

    .career-hero .career-hero-wrapper .career-hero-word-left {
        margin-right: auto;
    }

    .career-hero .career-hero-wrapper .career-hero-word-right {
        margin-left: auto;
    }

    .career-hero .career-hero-wrapper .career-hero-word-right h2 {
        text-align: right !important;
    }

    .career-hero .career-hero-wrapper .image {
        height: 100%;
        bottom: -104px;
    }

    section.section-career-list {
        padding-top: 10rem;
    }

    .career-inside-image {
        height: 20rem;
    }

    /*======================================  SECTION PROJECT - iPad Portrait  ======================================*/
    section.section-project {
        margin-top: -80px;
        padding-top: 48px;
    }

    .project-desc {
        width: 100%;
    }

    .project-desc-content {
        max-width: 1024px;
        padding: 2rem 1rem;
    }

    .project-desc .project-logo {
        max-width: 11.25rem !important;
    }

    .project-list-wrapper .project-image {
        height: 22.5rem;
    }

    .project-another-thumbnail a .image {
        height: 320px !important;
    }

    /*======================================  SECTION ARTICLE LIST - iPad Portrait  ======================================*/
    .article-swiper-cta .another-project-prev,
    .article-swiper-cta .swiper-button-prev {
        display: none;
        left: -2.5rem;
    }

    .article-swiper-cta .another-project-next,
    .article-swiper-cta .swiper-button-next {
        display: none;
        right: -2.5rem;
    }

    .article-update-card .artdate-card-image {
        max-width: 45rem;
        min-width: 45rem;
    }

    .article-update-card .artdate-card-image img {
        max-height: 320px;
    }

    .acs-highlight-primary .article-card-thumbnail {
        height: 360px;
    }

    .article-update-card {
        padding-bottom: 1rem;
        border-bottom: 1px solid #6a4343;
        gap: 1rem;
    }

    .article-update-card .artdate-card-content {
        gap: 1rem;
    }

    /*======================================  SECTION ARTICLE DETAIL - Ipad portrait ======================================*/
    .background-ad-hero {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        min-height: 50vh;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        opacity: 0.3;
        z-index: 1;
        margin-left: auto;
    }

    .ad-hero-overlay {
        left: 0;
        width: 100%;
        min-height: 50vh;
        z-index: 9;
    }

    .background-ad-hero::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgb(255, 255, 255);
        background: -moz-linear-gradient(180deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(0, 0, 0, 1) 100%);
        background: -webkit-linear-gradient(180deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(0, 0, 0, 1) 100%);
        background: linear-gradient(180deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(0, 0, 0, 1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#000000", GradientType=1);
    }

    /*====================================== SECTION CONTACT  - iPad Portrait ======================================*/

    .section-contact-us .form-wording {
        max-width: 253px;
    }

    /*====================================== SECTION MDOAL CHAT SELECT - iPad Portrait ======================================*/

    .modal-right .modal-content {
        right: -84px;
    }

    .modal-right {
        margin: 1.75rem 0rem 1.75rem auto;
    }

    #modalChatForm .modal-content {
        width: 500px;
    }

    /*====================================== SECTION 404 - iPad Portrait ======================================*/

    .section-notfound .notfound-bottom {
        margin-top: -8rem;
        margin-left: 7rem;
        z-index: 9;
    }

    /*====================================== SECTION FOOTER - iPad Portrait ======================================*/
    footer {
        margin-top: 0;
        /* padding: 2rem 0 0em 0; */
    }

    .section-map .footer-maps {
        height: 420px;
    }

    .footer-top {
        min-height: 10rem;
    }

    .footer-main {
        padding: 0.5rem;
        margin: 0;
    }

    .footer-logo {
        max-width: 8rem !important;
    }

    .footer-content-right {
        margin-top: 1rem;
    }

    .footer-content-right ul {
        margin-left: 0;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .footer-content-bottom {
        margin-top: 0.5rem;
        padding: 1rem 2.25rem;
    }

    .footer-copyright {
        margin-top: 0;
    }
}

/* Landscape iPad Air and another Tab */
@media only screen and (min-device-width: 768px) and (max-device-width: 1180px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
    h1 {
        font-size: 3rem;
    }

    h2 {
        font-size: 2.5rem;
    }

    h3 {
        font-size: 2.35rem;
    }

    h4 {
        font-size: 2rem;
    }

    h5 {
        font-size: 1.75rem;
    }

    h6 {
        font-size: 1.5rem;
    }

    /*====================================== SECTION NAVBAR ======================================*/

    /*====================================== SECTION HOME PAGE - iPad LANDSCAPE ======================================*/

    .lottie-wrapper-left .image,
    .lottie-wrapper-right .image {
        max-width: 14rem;
    }

    .subject-desc.bg-splash-black,
    .subject-desc.bg-splash-brown {
        padding: 1rem 1.5rem;
    }

    /*====================================== SECTION OUR TEAM - iPad Landscape ======================================*/

    .section-our-team .portrait-container-dekstop {
        position: relative;
        height: 160vh;
    }

    .portraits-card-1 {
        left: 4%;
        top: 7%;
    }

    .portraits-card-2 {
        left: 8%;
        top: 29%;
    }

    .portraits-card-3 {
        top: 68%;
        left: 2%;
    }

    .portraits-card-4 {
        top: 11%;
        left: 31%;
    }

    .portraits-card-5 {
        top: 38%;
        left: 31%;
    }

    .portraits-card-6 {
        top: 62%;
        left: 44%;
        z-index: 99;
    }

    .portraits-card-7 {
        right: 8%;
        top: 17%;
    }

    .portraits-card-8 {
        right: 4%;
        bottom: -7%;
    }

    .portraits-card-9 {
        bottom: 1%;
        left: 31%;
        z-index: 99;
    }

    .portraits-card-10 {
        bottom: 28%;
        right: 13%;
        z-index: 99;
    }

    .portraits-card-1 .image {
        max-width: 320px;
    }

    .portraits-card-2 .image {
        max-width: 236px;
    }

    .portraits-card-3 .image {
        max-width: 278px;
    }

    .portraits-card-4 .image {
        max-width: 500px;
    }

    .portraits-card-5 .image {
        max-width: 220px;
    }

    .portraits-card-6 .image {
        max-width: 334px;
    }

    .portraits-card-7 .image {
        max-width: 242px;
    }

    .portraits-card-8 .image {
        max-width: 382px;
    }

    .portraits-card-9 .image {
        max-width: 380px;
    }

    .portraits-card-10 .image {
        max-width: 224px;
    }

    /*====================================== SECTION WHAT WE DO - iPad Landscape ======================================*/

    .wwd-list:hover::before {
        display: none;
    }

    .wwd-list a:hover {
        color: var(--c-black) !important;
    }

    .wwd-list a:hover .icon-wwd img {
        filter: none;
        transition: filter 0.3s ease;
    }

    /*====================================== SECTION OUR WORKS - iPad Landscape ======================================*/

    .swiper-container.swiper-project {
        padding: 0 3rem;
        margin: 0 auto;
        /* top: 15% !important; */
    }

    .card-works {
        width: 520px !important;
        height: 480px;
        background-color: var(--c-polaroid);
        box-shadow: 0px 2px 10px 2px rgb(0 0 0 / 32%);
    }

    /*====================================== SECTION CLIENTS - iPad Landscape ======================================*/

    .wrapper-marq {
        margin-top: 3rem;
        padding-top: 0rem;
        padding-bottom: 0rem;
    }

    .wrapper-marq .box-marq {
        margin: 0 1rem 0 0;
    }

    .box-marq .image img {
        padding: 0.25rem;
    }

    /*====================================== SECTION SERVICES STRATEGY & PLANINGS WORKS LIST - iPad Landscape ======================================*/
    .strategy-porto-wrapper .strategy-porto-list .image {
        width: 100%;
        height: 12rem;
    }

    .ssw-service-strategy .ssw-list {
        /* width: 100%;
            max-width: none; */
        margin: unset;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-basis: 30%;
        gap: 1.5rem;
        padding: 1rem 2rem;
        border-right: 1px solid rgb(76, 76, 76);
        border-bottom: none;
    }

    .ssw-service-strategy .ssw-list:last-child {
        border: none;
    }

    /*======================================  SECTION CAREER - iPad Landscape  ======================================*/
    .career-hero .career-hero-wrapper .career-hero-word-left {
        margin-left: 8px;
    }

    /*====================================== SECTION 404 - iPad LANDSCAPE ======================================*/

    /*====================================== SECTION FOOTER - iPad LANDSCAPE ======================================*/
    .section-map .footer-maps {
        height: 420px;
    }
}

@media only screen and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {

    /*====================================== SECTION HOME PAGE - iPad LANDSCAPE 1024 ======================================*/
    .cs--container .desc {
        top: -2rem;
    }

    .home-segmen-container {
        height: 110vh;
    }

    section.section-home-career {
        overflow: visible;
    }

    .bg-home-contact {
        top: 1rem;
        transform: scale(1);
    }

    /*======================================  SECTION ARTICLE LIST - iPad Landscape 1024  ======================================*/

    .acs-highlight-primary .article-card-thumbnail {
        height: 380px;
    }

    /*======================================  SECTION PROJECT - iPad Landscape 1024  ======================================*/
    .project-list-wrapper .project-image {
        height: 27.5rem;
    }

    /*====================================== SECTION 404 - iPad LANDSCAPE ======================================*/
}

/* Landscape iPad Mini & Tab */
@media only screen and (min-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
    /*====================================== SECTION SERVICES STRATEGY & PLANINGS WORKS LIST - iPad Mini Landscape ======================================*/

    .ssw-service-strategy .ssw-list {
        /* width: 100%;
    max-width: none; */
        margin: unset;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 2.5rem;
        padding: 1rem 2rem;
        border-right: none;
        border-bottom: 1px solid rgb(76, 76, 76);
    }

    .ssw-service-strategy .ssw-list:last-child {
        border: none;
    }

    /*====================================== SECTION WHAT WE DO - iPad Landscape ======================================*/

    .wwd-list:hover::before {
        display: none;
    }

    .wwd-list a:hover {
        color: var(--c-black) !important;
    }

    .wwd-list a:hover .icon-wwd img {
        filter: none;
        transition: filter 0.3s ease;
    }

    /*====================================== SECTION Article - iPad Landscape ======================================*/

    .article-update-card .artdate-card-image {
        max-width: 38rem;
        min-width: 38rem;
    }

    /*====================================== SECTION 404 - iPad Mini Lansdcsacpe 1024 ======================================*/
}

/* iPad Pro Portrat & Tab 1024 Portrait */
@media only screen and (device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
    #modalPopupBanner .modal-dialog {
        max-width: 720px;
    }
}

/* 11-12 Inch */
@media (min-width: 1025px) and (max-width: 1199px) {}

@media (min-width: 1025px) and (max-width: 1199px) and (max-height: 600px) {
    /*====================================== SECTION 404 - iPad LANDSCAPE ======================================*/
}

@media (min-width: 992px) and (max-width: 1199px) {
    .home-about-image .image-parallax.prlx-one {
        left: 0;
    }

    .home-about-image .image-parallax.prlx-two {
        right: 0;
    }

    .section-our-team .header-our-team .image-in-jakarta {
        max-width: 320px;
    }
}

/* >15 Inch */
@media (min-width: 1440px) {

    /*====================================== SECTION ABOUT US ======================================*/
    .section-about-us {
        width: 100%;
        height: 100%;
        background-size: contain;
    }

    .divider-bottom-sau,
    .divider-bottom-sa {
        margin-bottom: -3rem;
        top: -1px;
        z-index: 99;
    }
}

/* >16 Inch */
@media (min-width: 1550px) {

    /*====================================== SECTION CAREER ======================================*/
    /* .career-hero .career-hero-wrapper .image
    {
        max-width: 640px;
        top: 55%;
    } */
    .career-hero .career-hero-wrapper .career-hero-word-left {
        /* margin-left: 80px; */
    }

    .career-hero .career-hero-wrapper .career-hero-word-right {
        margin-left: 224px;
    }
}

@media (min-width: 1880px) {
    /*====================================== SECTION ======================================*/

    .career-hero {
        height: 90vh;
    }

    /*====================================== SECTION OUR WORKS ======================================*/

    .swiper-container.swiper-project {
        padding: 0 3rem;
        margin: 0 auto;
    }

    .swiper-project .swiper-wrapper .swiper-slide {
        height: 42rem;
        width: 100% !important;
    }

    .card-works {
        width: 820px !important;
        height: 40rem;
        background-color: var(--c-polaroid);
        box-shadow: 0px 2px 10px 2px rgb(0 0 0 / 32%);
    }

    /*====================================== SECTION CAREER DETAIL ======================================*/

    .btn-back {
        left: 5%;
    }
}

@media (min-width: 2250px) {
    /*====================================== HOME - PROJECT ======================================*/

    .cta-swiper-project {
        height: 100%;
        width: 100%;
        max-width: 180px;
        position: relative;
        margin: 1.5rem auto 0rem auto;
    }

    /*====================================== SECTION ======================================*/

    .career-hero .career-hero-wrapper .career-hero-word-right {
        margin-left: 280px;
    }

    .career-hero {
        height: 110vh;
    }

    /*====================================== SECTION CAREER DETAIL ======================================*/

    .divider-top-sph,
    .divider-top-swd,
    .divider-top-ssa,
    .divider-top-hcd {
        position: relative;
        margin-top: -8rem;
        z-index: 99;
    }

    .btn-back {
        left: 20%;
    }
}