/* === responsive - max-width === */

/* ====  xs mobile ==== */

@media (max-width: 575.98px) {

    /* ---- font ---- */
    body {
        font-weight: 400;
        font-size: 1rem;
        color: var(--color-text-dark);
        font-style: normal;
        font-family: "Noto Sans Thai", sans-serif;
    }

    .h1,
    h1 {
        font-family: "Noto Sans Thai", sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: calc(3rem - 5vw);
    }

    .h2,
    h2 {
        font-family: "Noto Sans Thai", sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: 1.5rem;
    }

    .h3,
    h3 {
        font-family: "Noto Sans Thai", sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: calc(3rem - 5vw);
    }

    .h4,
    h4 {
        font-family: "Noto Sans Thai", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 1.125rem;
    }

    .h5,
    h5 {
        font-family: "Noto Sans Thai", sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: 1.35rem;
    }

    .h6,
    h6 {
        font-size: 0.875rem;
    }

    .fs-5 {
        font-size: 1.125rem !important;
    }


    /* ---- space ---- */

    .p-head {
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 6rem 0 7rem 0;
    }

    .py-content {
        height: 100vh;
        padding: 4rem 0;
    }

    .p-img-40 {
        padding: 1.5rem;
    }

    .p-home {
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 4rem 0 4rem 0;
    }

    .pb-apps-64 {
        padding-bottom: 2.5rem;
    }

    .pb-success {
        padding-bottom: 6.25rem !important;
    }

    /* ---- images ---- */

    .img-pro-zimbra {
        height: auto;
        border-radius: 12px;
    }

    .img-apps {
        height: 48px;
        width: 48px;
    }

    .logos-height img {
        height: 28px;
        margin: 8px 8px;
    }

    /* ---- space ---- */
    .pt-content-80 {
        padding-top: 3rem;
    }

    .pt-content-cost {
        padding-top: 4rem;
    }

    .pt-160 {
        padding-top: 6rem;
    }

    /* ---- bg ---- */

    .bg-banner-black {
        height: 95vh;
        background-image: url(../../images/banner/banner-black-mb.png),
            linear-gradient(180deg, #000 0%, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 90%, #000 100%);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-home-head {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(255, 255, 255, 0.00) 80%, rgba(0, 0, 0, 1) 100%), url(../../images/home/home-head.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-home-1 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.60) 30%, rgba(0, 0, 0, 0.00) 50%, rgba(0, 0, 0, 0.00) 100%), url(../../images/home/home-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-home-2 {
        height: auto;
        background-image: url(../../images/home/home-2.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }


    .bg-home-3 {
        height: 100vh;
        background-image: url(../../images/home/home-3.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-home-4 {
        height: 100vh;
        background-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.60) 30%, #000 100%), url(../../images/home/home-4.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    /* ---- bg-gradient ---- */

    .bg-black-gradient {
        background: linear-gradient(180deg, #000 0%, rgba(255, 255, 255, 0.00) 50%, #000 100%);
        background-blend-mode: multiply;
        z-index: 9;
    }

    /* ---- bg-images ---- */


    .bg-banner-allblack {
        height: 95vh;
        background-color: #000;
    }

    .bg-banner-allwhite {
        height: 95vh;
        background-color: #fff;
    }

    .bg-banner-white {
        height: 95vh;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.00) 50%, rgba(255, 255, 255, 0.00) 80%, #FFF 100%), url(../../images/banner/banner-white.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-zimbra-col-head {
        height: 100vh;
        background-image: url(../../images/zimbra-collaboration/zimbra-col-head.jpg),
            linear-gradient(180deg, #000 00%, rgba(0, 0, 0, 0.8) 30%, rgba(255, 255, 255, 0) 60%, #000 100%);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    /* .bg-zimbra-col-1 {
        height: 100vh;
        background-image: url(../../images/zimbra-collaboration/zimbra-col-1-mb.jpg),
            linear-gradient(180deg, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0.00) 20%, rgba(0, 0, 0, 0.30) 80%, #000 100%);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    } */
    .bg-zimbra-col-1 {
        height: 100vh;
        position: relative;
        overflow: hidden;
        background-color: #000000;
        z-index: -101;
    }

    .bg-zimbra-col-1::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0.00) 20%, rgba(0, 0, 0, 0.30) 80%, #000 100%);
        z-index: -99;
    }

    .bg-zimbra-col-1 video {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -100;
        transform: translateX(-50%) translateY(-50%);
    }

    .bg-zimbra-col-2 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.60) 50%, #FFF 100%), url(../../images/zimbra-collaboration/zimbra-col-2.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-zimbra-col-3 {
        height: 100vh;
        background-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.8) 50%, #000 100%), url(../../images/zimbra-collaboration/zimbra-col-3.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-zimbra-col-4 {
        height: auto;
        background-image: transparent;
        background-repeat: no-repeat;
        background-position: top center;
        background-color: white;
    }

    .bg-solution-head {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0.8) 15%, rgba(255, 255, 255, 0.00) 50%, rgba(0, 0, 0) 100%), url(../../images/zimbra-solution/zb-solution-head.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-solution-1 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0.00) 20%, rgba(0, 0, 0, 0.30) 80%, #000 100%),
            url(../../images/zimbra-solution/zb-solution-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-solution-2 {
        height: 100vh;
        background-image:
            url(../../images/zimbra-solution/zb-solution-2.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-solution-3 {
        height: 100vh;
        background-image:
            url(../../images/zimbra-solution/zb-solution-3-mb2.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;

    }

    .bg-solution-4 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.50) 30%, #FFF 100%),
            url(../../images/zimbra-solution/zb-solution-4.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-add-ons-head {
        height: 100vh;
        background-image: url(../../images/zimbra-add-ons/zb-addons-head.jpg),
            linear-gradient(180deg, rgba(0, 0, 0, 0.80) 0%, rgba(255, 255, 255, 0.00) 20%, rgba(255, 255, 255, 0.00) 80%, rgba(0, 0, 0) 100%);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-add-ons-1 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.5) 80%, rgba(0, 0, 0) 100%),
            url(../../images/zimbra-add-ons/zb-addons-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: plus-darker;
    }

    .bg-add-ons-2 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.00) 50%, #FFF 100%),
            url(../../images/zimbra-add-ons/zb-addons-2.jpg);
        background-repeat: no-repeat;
        background-position: top center;
        background-size: none;
        background-blend-mode: normal;
    }

    .bg-add-ons-3 {
        height: 100vh;
        position: relative;
        overflow: hidden;
        background-color: #000000;
        z-index: -101;
    }

    .bg-add-ons-3::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0.00) 20%, rgba(0, 0, 0, 0.30) 80%, #000 100%);
        z-index: -99;
    }

    .bg-add-ons-3 video {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -100;
        transform: translateX(-50%) translateY(-50%) scale(0.65);
    }

    .bg-add-ons-4 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.00) 40%, #FFF 100%),
            url(../../images/zimbra-add-ons/zb-addons-4.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-modernization-head {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.8) 15%, rgba(255, 255, 255, 0.00) 50%, rgba(0, 0, 0) 100%), url(../../images/app-modernization/appsmodern-head.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-modernization-1 {
        height: 100vh;
        background-image: radial-gradient(50% 50% at 50% 50%, #FFF 0%, rgba(255, 255, 255, 0.00) 100%), url(../../images/app-modernization/appsmodern-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-modernization-2 {
        height: 100vh;
        background-image: url(../../images/app-modernization/appsmodern-2-mb.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-modernization-3 {
        height: 100vh;
        background-image: radial-gradient(50% 50% at 50% 50%, #FFF 30%, rgba(255, 255, 255, 0.00) 100%), url(../../images/app-modernization/appsmodern-3.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-modernization-4 {
        height: 100vh;
        position: relative;
        overflow: hidden;
        background-color: #000000;
        z-index: -101;
    }

    .bg-modernization-4::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -99;
    }

    .bg-modernization-4 video {
        position: absolute;
        top: 30%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -100;
        transform: translateX(-50%) translateY(-50%) scale(0.6);
    }

    .bg-migration-head {
        height: 100vh;
        background-image: linear-gradient(180deg, #000 4%, rgba(255, 255, 255, 0.00) 50%, #000 100%), url(../../images/migration/migration-head.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-migration-1 {
        height: 100vh;
        background-image: radial-gradient(50% 50% at 50% 50%, #FFF 10%, rgba(255, 255, 255, 0.50) 100%), url(../../images/migration/migration-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-migration-2 {
        height: 100vh;
        background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0.60) 100%), url(../../images/migration/migration-2.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-migration-3 {
        height: auto;
        background-image: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.30) 0%, #FFF 100%), url(../../images/migration/migration-3.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-migration-4 {
        height: 100vh;
        position: relative;
        overflow: hidden;
        background-color: #000000;
        z-index: -101;
    }

    .bg-migration-4::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 1) 3%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0.6) 80%, rgba(0, 0, 0, 0.80) 100%);
        z-index: -99;
    }

    .bg-migration-4 video {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -100;
        transform: translateX(-50%) translateY(-50%) scale(1);
    }

    .bg-acceleration-head {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 0.4) 50%, rgba(255, 255, 255, 0.00) 80%, rgba(0, 0, 0, 0.80) 100%), url(../../images/acceleration/acceleration-head.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-acceleration-1 {
        height: 100vh;
        background-image: url(../../images/acceleration/acceleration-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-acceleration-2 {
        height: 100vh;
        background-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.50) 100%),
            url(../../images/acceleration/acceleration-2.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-acceleration-3 {
        height: 100vh;
        background-image: radial-gradient(50% 50% at 50% 50%, #FFF 0%, rgba(255, 255, 255, 0.00) 100%),
            url(../../images/acceleration/acceleration-3.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-acceleration-4 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 50%, #000 100%), url(../../images/acceleration/acceleration-4.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-managed-services-head {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 0.2) 50%, rgba(255, 255, 255, 0.00) 80%, rgba(0, 0, 0, 0.80) 100%), url(../../images/managed-services/managed-head.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-managed-services-1 {
        height: 100vh;
        background-image: url(../../images/managed-services/managed-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }


    .bg-managed-services-2 {
        height: 100vh;
        position: relative;
        overflow: hidden;
        background-color: #000000;
        z-index: -101;
    }

    .bg-managed-services-2::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.00) 35.83%, rgba(0, 0, 0, 0.95) 75.58%, #000 100%);
        z-index: -99;
    }

    .bg-managed-services-2 video {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -100;
        transform: translateX(-50%) translateY(-50%) scale(0.5);
    }

    .bg-managed-services-3 {
        height: 100vh;
        background-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.00) 25%, rgba(0, 0, 0, 0.40) 30%, #000 100%), url(../../images/managed-services/managed-3.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-managed-services-4 {
        height: 100vh;
        background-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.00) 25%, rgba(0, 0, 0, 0.00) 50%, #000 100%), url(../../images/managed-services/managed-4.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-managed-services-5 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.00) 60%, rgba(255, 255, 255, 0.70) 75%, #FFF 100%),
            url(../../images/managed-services/managed-5.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-why-head {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(255, 255, 255, 0.00) 80%, rgba(0, 0, 0, 0.80) 100%), url(../../images/whyservertoday/why-head.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-why-headbest-vdo {
        height: 100vh;
        position: relative;
        overflow: hidden;
        background-color: #000000;
        z-index: -101;
    }

    .bg-why-headbest-vdo::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, #000 5%, rgba(0, 0, 0, 0.2) 40%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.00) 75%, #000 95%);
        background-blend-mode: multiply;
        z-index: -99;
    }

    .bg-why-headbest-vdo video {
        position: absolute;
        top: 45%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -100;
        transform: translateX(-50%) translateY(-50%) scale(0.75);
    }

    .bg-why-1 {
        height: 100vh;
        background-image: radial-gradient(50% 50% at 50% 50%, #FFF 0%, rgba(255, 255, 255, 0.80) 100%), url(../../images/whyservertoday/why-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-why-2 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0.80) 50%, rgba(0, 0, 0, 0.80) 100%), url(../../images/whyservertoday/why-2.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-why-3 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.00) 30%, rgba(0, 0, 0, 0.80) 80%, #000 100%), url(../../images/whyservertoday/why-3-mb.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-why-4 {
        height: 100vh;
        background-image: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.00) 50%, rgba(255, 255, 255, 0.00) 100%), url(../../images/whyservertoday/why-4.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-why-5 {
        background-image: transparent;
    }

    .bg-why-6 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 20%, #FFF 100%), url(../../images/whyservertoday/why-6-mb.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-success-head {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.4) 60%, rgba(255, 255, 255, 0.00) 80%, rgba(0, 0, 0, 0.80) 100%), url(../../images/success/success-head.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-success-1 {
        height: auto;
        background-image: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.00) 50%, #fff 100%), url(../../images/success/success-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-success-2 {
        height: auto;
        background-image: linear-gradient(180deg, #000 0%, rgba(255, 255, 255, 0.00) 20%, #000 100%), url(../../images/success/success-3.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-success-3 {
        height: auto;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-success-4 {
        height: auto;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-success-cloud {
        height: auto;
        background-image: white;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .border-bank {
        background-color: black;
        border: 1px solid #212529;
        border-radius: 0.75rem;
    }

    .border-etp {
        background-color: white;
        border: 1px solid var(--color-line-grey);
        border-radius: 0.75rem;
    }

    .multiply {
        background-blend-mode: multiply;
    }

    .bg-form-sale {
        --bs-bg-opacity: 1;
        height: auto;
        background-color: var(--color-bg-white) !important;
        border: 1px solid var(--color-line-darkgrey) !important;
        box-shadow: 4px 4px 10px 1px rgba(0, 0, 0, 0.10);
        padding: 2.5rem 2rem;
        border-radius: 4px;
    }

    .bg-form-sup {
        --bs-bg-opacity: 1;
        background-color: var(--color-bg-white) !important;
        border: 1px solid var(--color-line-darkgrey) !important;
        box-shadow: 4px 4px 10px 1px rgba(0, 0, 0, 0.10);
        padding: 2.5rem 2rem;
        border-radius: 4px;
    }

    .sticky-icon {
        list-style: none;
        text-decoration: none !important;
    }

    .sticky-icon a {
        position: relative;
        display: block;
        width: 32px;
        height: 32px;
        text-align: center;
        background: transparent;
        border-radius: 32px;
        font-size: 20px;
        color: #797979;
        border: solid 1px #acacac;
    }

    .sticky-icon a:hover {
        color: var(--color-text-white);
        font-size: 20px;
        border: 0;
        background-color: var(--color-primary-blue);
    }

    .sticky-icon a:focus {
        color: var(--color-text-white);
        font-size: 20px;
        border: 0;
        background-color: var(--color-primary-blue);
    }

    .sticky-icon a:active {
        color: var(--color-text-white);
        font-size: 20px;
        border: 0;
        background-color: var(--color-primary-blue);
    }

    .bank-btw {
        height: auto;
        background-color: transparent;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .etp-btw {
        height: auto;
        background-color: transparent;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .cloud-btw {
        height: auto;
        background-color: transparent;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

}

/* ==== end xs mobile  ==== */

/* ====  sm  ==== */
@media (min-width:576px) {

    /* ---- font ---- */
    body {
        font-weight: 400;
        font-size: 1.125rem;
        color: var(--color-text-dark);
        font-style: normal;
        font-family: "Noto Sans Thai", sans-serif;
    }

    /* ---- h ---- */

    .h1,
    h1 {
        font-family: "Noto Sans Thai", sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: 3rem;
    }

    .h2,
    h2 {
        font-family: "Noto Sans Thai", sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: 2.5rem;
    }

    .h3,
    h3 {
        font-family: "Noto Sans Thai", sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: 2.75rem;
    }

    .h4,
    h4 {
        font-family: "Noto Sans Thai", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 1.5rem;
    }

    .h5,
    h5 {
        font-family: "Noto Sans Thai", sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: 1.7rem;
    }

    .h6,
    h6 {
        font-family: "Noto Sans Thai", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 0.875rem;
    }

    .fs-7 {
        font-size: 1.25rem;
    }

    .fs-48 {
        font-size: 3rem;
    }

    /* ---- images ---- */

    .img-pro-zimbra {
        height: auto;
        border-radius: 12px;
    }

    .img-apps {
        height: 48px;
        width: 48px;
    }

    .logos-height img {
        height: 48px;
        margin: 12px 12px;
    }

    /* ---- space ---- */
    .pt-content-80 {
        padding-top: 3rem;
    }

    .pb-apps-64 {
        padding-bottom: 2.5rem;
    }

    .pb-success {
        padding-bottom: 6.25rem !important;
    }

    /* ---- bg-gradient ---- */

    .bg-black-gradient {
        background: linear-gradient(180deg, #000 0%, rgba(255, 255, 255, 0.00) 50%, #000 100%);
        background-blend-mode: multiply;
        z-index: 9;
    }

    /* ---- bg-images ---- */

    .bg-banner-black {
        height: 95vh;
        background-image: url(../../images/banner/banner-black.png),
            linear-gradient(180deg, #000 0%, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 90%, #000 100%);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-banner-allblack {
        height: 95vh;
        background-color: #000;
    }

    .bg-banner-allwhite {
        height: 95vh;
        background-color: #fff;
    }

    .bg-banner-white {
        height: 95vh;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.00) 50%, rgba(255, 255, 255, 0.00) 80%, #FFF 100%), url(../../images/banner/banner-white.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-zimbra-col-head {
        height: 100vh;
        background-image: url(../../images/zimbra-collaboration/zimbra-col-head.jpg),
            linear-gradient(180deg, #000 00%, rgba(0, 0, 0, 0.8) 30%, rgba(255, 255, 255, 0) 60%, #000 100%);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-zimbra-col-1 {
        height: 100vh;
        position: relative;
        overflow: hidden;
        background-color: #000000;
        z-index: -101;
    }

    .bg-zimbra-col-1::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0.00) 20%, rgba(0, 0, 0, 0.30) 80%, #000 100%);
        z-index: -99;
    }

    .bg-zimbra-col-1 video {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -100;
        transform: translateX(-50%) translateY(-50%);
    }

    .bg-zimbra-col-2 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.40) 80%, #FFF 100%), url(../../images/zimbra-collaboration/zimbra-col-2.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-zimbra-col-3 {
        height: 100vh;
        background-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.8) 50%, #000 100%), url(../../images/zimbra-collaboration/zimbra-col-3.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-zimbra-col-4 {
        height: 100vh;
        background-image: transparent;
        background-repeat: no-repeat;
        background-position: top center;
        background-color: white;
    }

    .bg-solution-head {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0.8) 15%, rgba(255, 255, 255, 0.00) 50%, rgba(0, 0, 0) 100%), url(../../images/zimbra-solution/zb-solution-head.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-solution-1 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0.00) 20%, rgba(0, 0, 0, 0.50) 50%, #000 100%),
            url(../../images/zimbra-solution/zb-solution-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-solution-2 {
        height: 100vh;
        background-image:
            url(../../images/zimbra-solution/zb-solution-2.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-solution-3 {
        height: 100vh;
        background-image:
            url(../../images/zimbra-solution/zb-solution-3-mb.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: none;
        background-blend-mode: multiply;

    }

    .bg-solution-4 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.3) 30%, #FFF 100%),
            url(../../images/zimbra-solution/zb-solution-4.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-add-ons-head {
        height: 100vh;
        background-image: url(../../images/zimbra-add-ons/zb-addons-head.jpg),
            linear-gradient(180deg, rgba(0, 0, 0, 0.80) 0%, rgba(255, 255, 255, 0.00) 20%, rgba(255, 255, 255, 0.00) 80%, rgba(0, 0, 0) 100%);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-add-ons-1 {
        height: 100vh;
        background-image: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.00) 50%, rgba(0, 0, 0, 1) 100%),
            url(../../images/zimbra-add-ons/zb-addons-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: plus-darker;
    }

    .bg-add-ons-2 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.00) 50%, #FFF 100%),
            url(../../images/zimbra-add-ons/zb-addons-2.jpg);
        background-repeat: no-repeat;
        background-position: top center;
        background-size: none;
        background-blend-mode: normal;
    }

    .bg-add-ons-3 {
        height: 100vh;
        position: relative;
        overflow: hidden;
        background-color: #000000;
        z-index: -101;
    }

    .bg-add-ons-3::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0.00) 20%, rgba(0, 0, 0, 0.30) 80%, #000 100%);
        z-index: -99;
    }

    .bg-add-ons-3 video {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -100;
        transform: translateX(-50%) translateY(-50%);
    }

    .bg-add-ons-4 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.00) 40%, #FFF 100%),
            url(../../images/zimbra-add-ons/zb-addons-4.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-modernization-head {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.8) 15%, rgba(255, 255, 255, 0.00) 50%, rgba(0, 0, 0) 100%), url(../../images/app-modernization/appsmodern-head.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-modernization-1 {
        height: 100vh;
        background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.50) 0%, rgba(255, 255, 255, 0.80) 100%), url(../../images/app-modernization/appsmodern-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-modernization-2 {
        height: 100vh;
        background-image: url(../../images/app-modernization/appsmodern-2.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-modernization-3 {
        height: 100vh;
        background-image: radial-gradient(50% 50% at 50% 50%, #FFF 30%, rgba(255, 255, 255, 0.00) 100%), url(../../images/app-modernization/appsmodern-3.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-modernization-4 {
        height: 100vh;
        position: relative;
        overflow: hidden;
        background-color: #000000;
        z-index: -101;
    }

    .bg-modernization-4::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -99;
    }

    .bg-modernization-4 video {
        position: absolute;
        top: 30%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -100;
        transform: translateX(-50%) translateY(-50%) scale(0.6);
    }

    .bg-migration-head {
        height: 100vh;
        background-image: linear-gradient(180deg, #000 4%, rgba(255, 255, 255, 0.00) 50%, #000 100%), url(../../images/migration/migration-head.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-migration-1 {
        height: 100vh;
        background-image: radial-gradient(50% 50% at 50% 50%, #FFF 10%, rgba(255, 255, 255, 0.30) 100%), url(../../images/migration/migration-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-migration-2 {
        height: 100vh;
        background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0.60) 100%), url(../../images/migration/migration-2.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-migration-3 {
        height: 100vh;
        background-image: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.30) 0%, #FFF 100%), url(../../images/migration/migration-3.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-migration-4 {
        height: 100vh;
        position: relative;
        overflow: hidden;
        background-color: #000000;
        z-index: -101;
    }

    .bg-migration-4::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 1) 3%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.5) 80%, rgba(0, 0, 0, 0.80) 100%);
        z-index: -99;
    }

    .bg-migration-4 video {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -100;
        transform: translateX(-50%) translateY(-50%) scale(1);
    }

    .bg-migration-4::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 1) 3%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.5) 80%, rgba(0, 0, 0, 0.80) 100%);
        z-index: -99;
    }

    .bg-migration-4 video {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -100;
        transform: translateX(-50%) translateY(-50%) scale(1);
    }

    .bg-acceleration-head {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 0.4) 50%, rgba(255, 255, 255, 0.00) 80%, rgba(0, 0, 0, 0.80) 100%), url(../../images/acceleration/acceleration-head.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-acceleration-1 {
        height: 100vh;
        background-image: url(../../images/acceleration/acceleration-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-acceleration-2 {
        height: 100vh;
        background-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.00) 100%),
            url(../../images/acceleration/acceleration-2.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-acceleration-3 {
        height: 100vh;
        background-image: radial-gradient(50% 50% at 50% 50%, #FFF 0%, rgba(255, 255, 255, 0.00) 100%),
            url(../../images/acceleration/acceleration-3.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-acceleration-4 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 50%, #000 100%), url(../../images/acceleration/acceleration-4.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-home-head {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(255, 255, 255, 0.00) 80%, rgba(0, 0, 0, 1) 100%), url(../../images/home/home-head.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-home-1 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.60) 30%, rgba(0, 0, 0, 0.00) 50%, rgba(0, 0, 0, 0.00) 100%), url(../../images/home/home-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-home-2 {
        height: auto;
        background-image: url(../../images/home/home-2.png);
        background-repeat: no-repeat;
        background-position: top center;
        background-size: cover;
    }

    .bg-home-3 {
        height: 100vh;
        background-image: url(../../images/home/home-3.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

    .bg-home-4 {
        height: 100vh;
        background-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.60) 30%, #000 100%), url(../../images/home/home-4.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-managed-services-head {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(255, 255, 255, 0.00) 80%, rgba(0, 0, 0, 0.80) 100%), url(../../images/managed-services/managed-head.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-managed-services-1 {
        height: 100vh;
        background-image: url(../../images/managed-services/managed-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }


    .bg-managed-services-3 {
        height: 100vh;
        background-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.00) 25%, rgba(0, 0, 0, 0.30) 30%, #000 100%), url(../../images/managed-services/managed-3.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-managed-services-4 {
        height: 100vh;
        background-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.00) 25%, rgba(0, 0, 0, 0.00) 80%, #000 100%), url(../../images/managed-services/managed-4.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-managed-services-5 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.00) 60%, rgba(255, 255, 255, 0.70) 75%, #FFF 100%),
            url(../../images/managed-services/managed-5.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-why-head {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(255, 255, 255, 0.00) 80%, rgba(0, 0, 0, 0.80) 100%), url(../../images/whyservertoday/why-head.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-why-headbest-vdo {
        height: 100vh;
        position: relative;
        overflow: hidden;
        background-color: #000000;
        z-index: -101;
    }

    .bg-why-headbest-vdo::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, #000 5%, rgba(0, 0, 0, 0.2) 40%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.00) 75%, #000 95%);
        background-blend-mode: multiply;
        z-index: -99;
    }

    .bg-why-headbest-vdo video {
        position: absolute;
        top: 45%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -100;
        transform: translateX(-50%) translateY(-50%);
    }

    .bg-why-1 {
        height: 100vh;
        background-image: radial-gradient(50% 50% at 50% 50%, #FFF 0%, rgba(255, 255, 255, 0.50) 100%), url(../../images/whyservertoday/why-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-why-2 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0.80) 50%, rgba(0, 0, 0, 0.80) 100%), url(../../images/whyservertoday/why-2.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-why-3 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 50%, rgba(0, 0, 0, 0.50) 100%), url(../../images/whyservertoday/why-3.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-why-4 {
        height: 100vh;
        background-image: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.00) 50%, rgba(255, 255, 255, 0.00) 100%), url(../../images/whyservertoday/why-4.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-why-5 {
        background-image: transparent;
    }

    .bg-why-6 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.20) 40%, #FFF 100%), url(../../images/whyservertoday/why-6-mb.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-success-head {
        height: 100vh;
        background-image: linear-gradient(180deg, #000 0%, rgba(255, 255, 255, 0.00) 50%, #000 100%), url(../../images/success/success-head.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-success-1 {
        height: auto;
        background-image: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.00) 50%, #fff 100%), url(../../images/success/success-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-success-2 {
        height: auto;
        background-image: linear-gradient(180deg, #000 0%, rgba(255, 255, 255, 0.00) 20%, #000 100%), url(../../images/success/success-3.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-success-3 {
        height: auto;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-success-4 {
        height: auto;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-success-cloud {
        height: auto;
        background-image: white;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .border-bank {
        background-color: black;
        border: 1px solid #212529;
        border-radius: 0.75rem;
    }

    .border-etp {
        background-color: white;
        border: 1px solid var(--color-line-grey);
        border-radius: 0.75rem;
    }

    .multiply {
        background-blend-mode: multiply;
    }

    .bg-form-sale {
        --bs-bg-opacity: 1;
        height: auto;
        background-color: var(--color-bg-white) !important;
        border: 1px solid var(--color-line-darkgrey) !important;
        box-shadow: 4px 4px 10px 1px rgba(0, 0, 0, 0.10);
        padding: 2.5rem 2rem;
        border-radius: 4px;
    }

    .bg-form-sup {
        --bs-bg-opacity: 1;
        background-color: var(--color-bg-white) !important;
        border: 1px solid var(--color-line-darkgrey) !important;
        box-shadow: 4px 4px 10px 1px rgba(0, 0, 0, 0.10);
        padding: 2.5rem 2rem;
        border-radius: 4px;
    }

    .bank-btw {
        height: auto;
        background-color: transparent;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .etp-btw {
        height: auto;
        background-color: transparent;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .cloud-btw {
        height: auto;
        background-color: transparent;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}

/* ==== end sm  ==== */


/* ====  md  ==== */
@media (min-width:768px) {

    /* ---- font ---- */
    body {
        font-weight: 400;
        font-size: 1.125rem;
        color: var(--color-text-dark);
        font-style: normal;
        font-family: "Noto Sans Thai", sans-serif;
    }

    /* ---- h ---- */

    .h1,
    h1 {
        font-family: "Noto Sans Thai", sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: 3rem;
    }

    .h2,
    h2 {
        font-family: "Noto Sans Thai", sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: 2.5rem;
    }

    .h3,
    h3 {
        font-family: "Noto Sans Thai", sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: 2.75rem;
    }

    .h4,
    h4 {
        font-family: "Noto Sans Thai", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 1.5rem;
    }

    .h5,
    h5 {
        font-family: "Noto Sans Thai", sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: 1.75rem;
    }

    .h6,
    h6 {
        font-family: "Noto Sans Thai", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 0.875rem;
    }

    .fs-7 {
        font-size: 1.25rem;
    }

    .fs-48 {
        font-size: 3rem;
    }

    /* ---- images ---- */

    .img-pro-zimbra {
        height: auto;
        border-radius: 12px;
    }

    .img-apps {
        height: 48px;
        width: 48px;
    }

    .logos-height img {
        height: 48px;
        margin: 12px 12px;
    }

    /* ---- space ---- */
    .pt-content-80 {
        padding-top: 5rem;
    }

    .pb-apps-64 {
        padding-bottom: 4rem;
    }

    .pb-success {
        padding-bottom: 6.25rem !important;
    }

    /* ---- bg-gradient ---- */

    .bg-black-gradient {
        background: linear-gradient(180deg, #000 0%, rgba(255, 255, 255, 0.00) 50%, #000 100%);
        background-blend-mode: multiply;
        z-index: 9;
    }

    /* ---- bg-images ---- */

    .bg-banner-black {
        height: 95vh;
        background-image: url(../../images/banner/banner-black.png),
            linear-gradient(180deg, #000 0%, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 90%, #000 100%);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-banner-allblack {
        height: 95vh;
        background-color: #000;
    }

    .bg-banner-allwhite {
        height: 95vh;
        background-color: #fff;
    }

    .bg-banner-white {
        height: 95vh;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.00) 50%, rgba(255, 255, 255, 0.00) 80%, #FFF 100%), url(../../images/banner/banner-white.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-zimbra-col-head {
        height: 100vh;
        background-image: url(../../images/zimbra-collaboration/zimbra-col-head.jpg),
            linear-gradient(180deg, #000 00%, rgba(0, 0, 0, 0.8) 30%, rgba(255, 255, 255, 0) 60%, #000 100%);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    /* .bg-zimbra-col-1 {
        height: 100vh;
        background-image: url(../../images/zimbra-collaboration/zimbra-col-1.jpg),
            linear-gradient(180deg, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0.00) 20%, rgba(0, 0, 0, 0.30) 80%, #000 100%);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    } */
    .bg-zimbra-col-1 {
        height: 100vh;
        position: relative;
        overflow: hidden;
        background-color: #000000;
        z-index: -101;
    }

    .bg-zimbra-col-1::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0.00) 20%, rgba(0, 0, 0, 0.30) 80%, #000 100%);
        z-index: -99;
    }

    .bg-zimbra-col-1 video {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -100;
        transform: translateX(-50%) translateY(-50%);
    }

    .bg-zimbra-col-2 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.40) 80%, #FFF 100%), url(../../images/zimbra-collaboration/zimbra-col-2.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-zimbra-col-3 {
        height: 100vh;
        background-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.6) 60%, #000 100%), url(../../images/zimbra-collaboration/zimbra-col-3.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-zimbra-col-4 {
        height: 100vh;
        background-image: transparent;
        background-repeat: no-repeat;
        background-position: top center;
        background-color: white;
    }

    .bg-solution-head {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0.8) 15%, rgba(255, 255, 255, 0.00) 50%, rgba(0, 0, 0) 100%), url(../../images/zimbra-solution/zb-solution-head.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-solution-1 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0.00) 20%, rgba(0, 0, 0, 0.50) 50%, #000 100%),
            url(../../images/zimbra-solution/zb-solution-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-solution-2 {
        height: 100vh;
        background-image:
            url(../../images/zimbra-solution/zb-solution-2.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-solution-3 {
        height: 100vh;
        background-image:
            url(../../images/zimbra-solution/zb-solution-3.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;

    }

    .bg-solution-4 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.20) 30%, #FFF 100%),
            url(../../images/zimbra-solution/zb-solution-4.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-add-ons-head {
        height: 100vh;
        background-image: url(../../images/zimbra-add-ons/zb-addons-head.jpg),
            linear-gradient(180deg, rgba(0, 0, 0, 0.80) 0%, rgba(255, 255, 255, 0.00) 20%, rgba(255, 255, 255, 0.00) 80%, rgba(0, 0, 0) 100%);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-add-ons-1 {
        height: 100vh;
        background-image: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.00) 50%, rgba(0, 0, 0, 1) 100%),
            url(../../images/zimbra-add-ons/zb-addons-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: plus-darker;
    }

    .bg-add-ons-2 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.00) 50%, #FFF 100%),
            url(../../images/zimbra-add-ons/zb-addons-2.jpg);
        background-repeat: no-repeat;
        background-position: top center;
        background-size: none;
        background-blend-mode: normal;
    }

    .bg-add-ons-3 {
        height: 100vh;
        position: relative;
        overflow: hidden;
        background-color: #000000;
        z-index: -101;
    }

    .bg-add-ons-3::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0.00) 20%, rgba(0, 0, 0, 0.30) 80%, #000 100%);
        z-index: -99;
    }

    .bg-add-ons-3 video {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -100;
        transform: translateX(-50%) translateY(-50%);
    }

    .bg-add-ons-4 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.00) 40%, #FFF 100%),
            url(../../images/zimbra-add-ons/zb-addons-4.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-modernization-head {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.8) 15%, rgba(255, 255, 255, 0.00) 50%, rgba(0, 0, 0) 100%), url(../../images/app-modernization/appsmodern-head.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-modernization-1 {
        height: 100vh;
        background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.50) 0%, rgba(255, 255, 255, 0.70) 100%), url(../../images/app-modernization/appsmodern-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-modernization-2 {
        height: 100vh;
        background-image: url(../../images/app-modernization/appsmodern-2.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-modernization-3 {
        height: 100vh;
        background-image: radial-gradient(50% 50% at 50% 50%, #FFF 30%, rgba(255, 255, 255, 0.00) 100%), url(../../images/app-modernization/appsmodern-3.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-modernization-4 {
        height: 100vh;
        position: relative;
        overflow: hidden;
        background-color: #000000;
        z-index: -101;
    }

    .bg-modernization-4::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -99;
    }

    .bg-modernization-4 video {
        position: absolute;
        top: 40%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -100;
        transform: translateX(-50%) translateY(-50%) scale(0.75);
    }

    .bg-migration-head {
        height: 100vh;
        background-image: linear-gradient(180deg, #000 4%, rgba(255, 255, 255, 0.00) 50%, #000 100%), url(../../images/migration/migration-head.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-migration-1 {
        height: 100vh;
        background-image: radial-gradient(50% 50% at 50% 50%, #FFF 10%, rgba(255, 255, 255, 0.30) 100%), url(../../images/migration/migration-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-migration-2 {
        height: 100vh;
        background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0.60) 100%), url(../../images/migration/migration-2.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-migration-3 {
        height: 100vh;
        background-image: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.30) 0%, #FFF 100%), url(../../images/migration/migration-3.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-migration-4 {
        height: 100vh;
        position: relative;
        overflow: hidden;
        background-color: #000000;
        z-index: -101;
    }

    .bg-migration-4::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 1) 3%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.5) 80%, rgba(0, 0, 0, 0.80) 100%);
        z-index: -99;
    }

    .bg-migration-4 video {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -100;
        transform: translateX(-50%) translateY(-50%) scale(1);
    }

    .bg-acceleration-head {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 0.4) 50%, rgba(255, 255, 255, 0.00) 80%, rgba(0, 0, 0, 0.80) 100%), url(../../images/acceleration/acceleration-head.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-acceleration-1 {
        height: 100vh;
        background-image: url(../../images/acceleration/acceleration-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-acceleration-2 {
        height: 100vh;
        background-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.00) 100%),
            url(../../images/acceleration/acceleration-2.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-acceleration-3 {
        height: 100vh;
        background-image: radial-gradient(50% 50% at 50% 50%, #FFF 0%, rgba(255, 255, 255, 0.00) 100%),
            url(../../images/acceleration/acceleration-3.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-acceleration-4 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 50%, #000 100%), url(../../images/acceleration/acceleration-4.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-home-head {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(255, 255, 255, 0.00) 80%, rgba(0, 0, 0, 1) 100%), url(../../images/home/home-head.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-home-1 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.60) 30%, rgba(0, 0, 0, 0.00) 50%, rgba(0, 0, 0, 0.00) 100%), url(../../images/home/home-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-home-2 {
        height: auto;
        background-image: url(../../images/home/home-2.png);
        background-repeat: no-repeat;
        background-position: top center;
        background-size: cover;
    }

    .bg-home-3 {
        height: 100vh;
        background-image: url(../../images/home/home-3.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

    .bg-home-4 {
        height: 100vh;
        background-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.60) 30%, #000 100%), url(../../images/home/home-4.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-managed-services-head {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(255, 255, 255, 0.00) 80%, rgba(0, 0, 0, 0.80) 100%), url(../../images/managed-services/managed-head.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-managed-services-1 {
        height: 100vh;
        background-image: url(../../images/managed-services/managed-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }


    .bg-managed-services-3 {
        height: 100vh;
        background-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.00) 25%, rgba(0, 0, 0, 0.30) 30%, #000 100%), url(../../images/managed-services/managed-3.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-managed-services-4 {
        height: 100vh;
        background-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.00) 25%, rgba(0, 0, 0, 0.00) 80%, #000 100%), url(../../images/managed-services/managed-4.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-managed-services-5 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.00) 60%, rgba(255, 255, 255, 0.70) 75%, #FFF 100%),
            url(../../images/managed-services/managed-5.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-why-head {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(255, 255, 255, 0.00) 80%, rgba(0, 0, 0, 0.80) 100%), url(../../images/whyservertoday/why-head.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-why-headbest-vdo {
        height: 100vh;
        position: relative;
        overflow: hidden;
        background-color: #000000;
        z-index: -101;
    }

    .bg-why-headbest-vdo::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, #000 5%, rgba(0, 0, 0, 0.2) 40%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.00) 75%, #000 95%);
        background-blend-mode: multiply;
        z-index: -99;
    }

    .bg-why-headbest-vdo video {
        position: absolute;
        top: 45%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -100;
        transform: translateX(-50%) translateY(-50%);
    }

    .bg-why-1 {
        height: 100vh;
        background-image: radial-gradient(50% 50% at 50% 50%, #FFF 0%, rgba(255, 255, 255, 0.50) 100%), url(../../images/whyservertoday/why-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-why-2 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0.60) 50%, rgba(0, 0, 0, 0.80) 100%), url(../../images/whyservertoday/why-2.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-why-3 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 10%, rgba(255, 255, 255, 0.00) 60%, rgba(0, 0, 0, 0.30) 70%, rgba(0, 0, 0, 0.80) 100%), url(../../images/whyservertoday/why-3.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-why-4 {
        height: 100vh;
        background-image: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.00) 50%, rgba(255, 255, 255, 0.00) 100%), url(../../images/whyservertoday/why-4.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-why-5 {
        background-image: transparent;
    }

    .bg-why-6 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 45.97%, #FFF 100%), url(../../images/whyservertoday/why-6.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-success-head {
        height: 100vh;
        background-image: linear-gradient(180deg, #000 0%, rgba(255, 255, 255, 0.00) 50%, #000 100%), url(../../images/success/success-head.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-success-1 {
        height: auto;
        background-image: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.00) 50%, #fff 100%), url(../../images/success/success-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-success-2 {
        height: auto;
        background-image: linear-gradient(180deg, #000 0%, rgba(255, 255, 255, 0.00) 20%, #000 100%), url(../../images/success/success-3.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-success-3 {
        height: auto;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-success-4 {
        height: auto;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-success-cloud {
        height: auto;
        background-image: white;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .border-bank {
        background-color: black;
        border: 1px solid #212529;
        border-radius: 0.75rem;
    }

    .border-etp {
        background-color: white;
        border: 1px solid var(--color-line-grey);
        border-radius: 0.75rem;
    }

    .multiply {
        background-blend-mode: multiply;
    }

    .bg-form-sale {
        --bs-bg-opacity: 1;
        height: auto;
        background-color: var(--color-bg-white) !important;
        border: 1px solid var(--color-line-darkgrey) !important;
        box-shadow: 4px 4px 10px 1px rgba(0, 0, 0, 0.10);
        padding: 2.5rem 2rem;
        border-radius: 4px;
    }

    .bg-form-sup {
        --bs-bg-opacity: 1;
        background-color: var(--color-bg-white) !important;
        border: 1px solid var(--color-line-darkgrey) !important;
        box-shadow: 4px 4px 10px 1px rgba(0, 0, 0, 0.10);
        padding: 2.5rem 2rem;
        border-radius: 4px;
    }

    .bank-btw {
        height: auto;
        background-color: transparent;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .etp-btw {
        height: auto;
        background-color: transparent;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .cloud-btw {
        height: auto;
        background-color: transparent;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

}


/* ==== end md  ==== */



/* ====  lg  ==== */
@media (min-width:992px) {

    /* ---- font ---- */
    body {
        font-weight: 400;
        font-size: 1.125rem;
        color: var(--color-text-dark);
        font-style: normal;
        font-family: "Noto Sans Thai", sans-serif;
    }

    /* ---- h ---- */

    .h1,
    h1 {
        font-family: "Noto Sans Thai", sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: 3rem;
    }

    .h2,
    h2 {
        font-family: "Noto Sans Thai", sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: 2.5rem;
    }

    .h3,
    h3 {
        font-family: "Noto Sans Thai", sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: 2.75rem;
    }

    .h4,
    h4 {
        font-family: "Noto Sans Thai", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 1.5rem;
    }

    .h5,
    h5 {
        font-family: "Noto Sans Thai", sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: 2rem;
    }

    .h6,
    h6 {
        font-family: "Noto Sans Thai", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 0.875rem;
    }

    .fs-7 {
        font-size: 1.25rem;
    }

    .fs-48 {
        font-size: 3rem;
    }

    /* ---- images ---- */

    .img-pro-zimbra {
        height: auto;
        border-radius: 12px;
    }

    .img-apps {
        height: 48px;
        width: 48px;
    }

    .logos-height img {
        height: 48px;
        margin: 12px 8px;
    }

    /* ---- space ---- */
    .pt-content-80 {
        padding-top: 5rem;
    }

    .pb-apps-64 {
        padding-bottom: 4rem;
    }

    /* ---- bg-gradient ---- */

    .bg-black-gradient {
        background: linear-gradient(180deg, #000 0%, rgba(255, 255, 255, 0.00) 50%, #000 100%);
        background-blend-mode: multiply;
        z-index: 9;
    }

    /* ---- bg-images ---- */

    .bg-banner-black {
        height: 95vh;
        background-image: url(../../images/banner/banner-black.png),
            linear-gradient(180deg, #000 0%, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 90%, #000 100%);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-banner-allblack {
        height: 95vh;
        background-color: #000;
    }

    .bg-banner-allwhite {
        height: 95vh;
        background-color: #fff;
    }

    .bg-banner-white {
        height: 95vh;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.00) 50%, rgba(255, 255, 255, 0.00) 80%, #FFF 100%), url(../../images/banner/banner-white.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-zimbra-col-head {
        height: 100vh;
        background-image: url(../../images/zimbra-collaboration/zimbra-col-head.jpg),
            linear-gradient(180deg, #000 00%, rgba(0, 0, 0, 0.8) 30%, rgba(255, 255, 255, 0) 60%, #000 100%);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-zimbra-col-1 {
        height: 100vh;
        position: relative;
        overflow: hidden;
        background-color: #000000;
        z-index: -101;
    }

    .bg-zimbra-col-1::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, #000 5%, rgba(0, 0, 0, 0.2) 40%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.00) 75%, #000 95%);
        z-index: -99;
    }

    .bg-zimbra-col-1 video {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -100;
        transform: translateX(-50%) translateY(-50%);
    }

    .bg-zimbra-col-2 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.40) 80%, #FFF 100%), url(../../images/zimbra-collaboration/zimbra-col-2.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-zimbra-col-3 {
        height: 100vh;
        background-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.6) 60%, #000 100%), url(../../images/zimbra-collaboration/zimbra-col-3.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-zimbra-col-4 {
        height: 100vh;
        background-image: transparent;
        background-repeat: no-repeat;
        background-position: top center;
        background-color: white;
    }

    .bg-solution-head {
        height: 100vh;
        background-image: url(../../images/zimbra-solution/zb-solution-head.jpg),
            linear-gradient(180deg, rgba(0, 0, 0, 0.80) 0%, rgba(255, 255, 255, 0.00) 30%, rgba(255, 255, 255, 0.00) 70%, rgba(0, 0, 0) 100%);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-solution-1 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0.00) 20%, rgba(0, 0, 0, 0.30) 80%, #000 100%),
            url(../../images/zimbra-solution/zb-solution-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-solution-2 {
        height: 100vh;
        background-image:
            url(../../images/zimbra-solution/zb-solution-2.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-solution-3 {
        height: 100vh;
        background-image:
            url(../../images/zimbra-solution/zb-solution-3.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;

    }

    .bg-solution-4 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.00) 50%, #FFF 100%),
            url(../../images/zimbra-solution/zb-solution-4.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-add-ons-head {
        height: 100vh;
        background-image: url(../../images/zimbra-add-ons/zb-addons-head.jpg),
            linear-gradient(180deg, rgba(0, 0, 0, 0.80) 0%, rgba(255, 255, 255, 0.00) 20%, rgba(255, 255, 255, 0.00) 80%, rgba(0, 0, 0) 100%);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-add-ons-1 {
        height: 100vh;
        background-image: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.00) 50%, rgba(0, 0, 0, 1) 100%),
            url(../../images/zimbra-add-ons/zb-addons-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: plus-darker;
    }

    .bg-add-ons-2 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.00) 50%, #FFF 100%),
            url(../../images/zimbra-add-ons/zb-addons-2.jpg);
        background-repeat: no-repeat;
        background-position: top center;
        background-size: none;
        background-blend-mode: normal;
    }

    .bg-add-ons-3 {
        height: 100vh;
        position: relative;
        overflow: hidden;
        background-color: #000000;
        z-index: -101;
    }

    .bg-add-ons-3::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0.00) 20%, rgba(0, 0, 0, 0.30) 80%, #000 100%);
        z-index: -99;
    }

    .bg-add-ons-3 video {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -100;
        transform: translateX(-50%) translateY(-50%);
    }

    .bg-add-ons-4 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.00) 40%, #FFF 100%),
            url(../../images/zimbra-add-ons/zb-addons-4.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-modernization-head {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.8) 15%, rgba(255, 255, 255, 0.00) 50%, rgba(0, 0, 0) 100%), url(../../images/app-modernization/appsmodern-head.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-modernization-1 {
        height: 100vh;
        background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.50) 0%, rgba(255, 255, 255, 0.50) 100%), url(../../images/app-modernization/appsmodern-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-modernization-2 {
        height: 100vh;
        background-image: url(../../images/app-modernization/appsmodern-2.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-modernization-3 {
        height: 100vh;
        background-image: radial-gradient(50% 50% at 50% 50%, #FFF 30%, rgba(255, 255, 255, 0.00) 100%), url(../../images/app-modernization/appsmodern-3.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-modernization-4 {
        position: relative;
        height: 100vh;
        background-color: black;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

    .bg-migration-head {
        height: 100vh;
        background-image: linear-gradient(180deg, #000 4%, rgba(255, 255, 255, 0.00) 50%, #000 100%), url(../../images/migration/migration-head.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-migration-1 {
        height: 100vh;
        background-image: radial-gradient(50% 50% at 50% 50%, #FFF 10%, rgba(255, 255, 255, 0.30) 100%), url(../../images/migration/migration-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-migration-2 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.80) 0%, rgba(255, 255, 255, 0.00) 20%, rgba(255, 255, 255, 1) 50%, rgba(0, 0, 0, 1) 100%), url(../../images/migration/migration-2.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-migration-3 {
        height: 100vh;
        background-image: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.30) 0%, #FFF 100%), url(../../images/migration/migration-3.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-migration-4 {
        height: 100vh;
        position: relative;
        overflow: hidden;
        background-color: #000000;
        z-index: -101;
    }

    .bg-migration-4::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 1) 3%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.4) 80%, rgba(0, 0, 0, 0.80) 100%);
        z-index: -99;
    }

    .bg-migration-4 video {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -100;
        transform: translateX(-50%) translateY(-50%);
    }

    .bg-acceleration-head {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 0.4) 50%, rgba(255, 255, 255, 0.00) 80%, rgba(0, 0, 0, 0.80) 100%), url(../../images/acceleration/acceleration-head.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-acceleration-1 {
        height: 100vh;
        background-image: url(../../images/acceleration/acceleration-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-acceleration-2 {
        height: 100vh;
        background-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.00) 100%),
            url(../../images/acceleration/acceleration-2.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-acceleration-3 {
        height: 100vh;
        background-image: radial-gradient(50% 50% at 50% 50%, #FFF 0%, rgba(255, 255, 255, 0.00) 100%),
            url(../../images/acceleration/acceleration-3.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-acceleration-4 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 50%, #000 100%), url(../../images/acceleration/acceleration-4.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-home-head {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(255, 255, 255, 0.00) 80%, rgba(0, 0, 0, 1) 100%), url(../../images/home/home-head.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-home-1 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.60) 30%, rgba(0, 0, 0, 0.00) 50%, rgba(0, 0, 0, 0.00) 100%), url(../../images/home/home-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-home-2 {
        height: auto;
        background-image: url(../../images/home/home-2.png);
        background-repeat: no-repeat;
        background-position: top center;
        background-size: cover;
    }

    .bg-home-3 {
        height: 100vh;
        background-image: url(../../images/home/home-3.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

    .bg-home-4 {
        height: 100vh;
        background-image: linear-gradient(180deg, #000 0%, rgba(255, 255, 255, 0.00) 50%, #000 100%), url(../../images/home/home-4.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-managed-services-head {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(255, 255, 255, 0.00) 80%, rgba(0, 0, 0, 0.80) 100%), url(../../images/managed-services/managed-head.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-managed-services-1 {
        height: 100vh;
        background-image: url(../../images/managed-services/managed-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-managed-services-3 {
        height: 100vh;
        background-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.00) 25%, rgba(0, 0, 0, 0.10) 30%, #000 100%), url(../../images/managed-services/managed-3.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-managed-services-4 {
        height: 100vh;
        background-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.00) 25%, rgba(0, 0, 0, 0.00) 80%, #000 100%), url(../../images/managed-services/managed-4.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-managed-services-5 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.00) 60%, rgba(255, 255, 255, 0.70) 75%, #FFF 100%),
            url(../../images/managed-services/managed-5.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-why-head {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(255, 255, 255, 0.00) 80%, rgba(0, 0, 0, 0.80) 100%), url(../../images/whyservertoday/why-head.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-why-headbest-vdo {
        height: 100vh;
        position: relative;
        overflow: hidden;
        background-color: #000000;
        z-index: -101;
    }

    .bg-why-headbest-vdo::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, #000 5%, rgba(0, 0, 0, 0.2) 40%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.00) 75%, #000 95%);
        background-blend-mode: multiply;
        z-index: -99;
    }

    .bg-why-headbest-vdo video {
        position: absolute;
        top: 45%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -100;
        transform: translateX(-50%) translateY(-50%);
    }

    .bg-why-1 {
        height: 100vh;
        background-image: radial-gradient(50% 50% at 50% 50%, #FFF 0%, rgba(255, 255, 255, 0.50) 100%), url(../../images/whyservertoday/why-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-why-2 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.60) 70%, rgba(0, 0, 0, 0.80) 100%), url(../../images/whyservertoday/why-2.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-why-3 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 10%, rgba(255, 255, 255, 0.00) 60%, rgba(0, 0, 0, 0.30) 70%, rgba(0, 0, 0, 0.80) 100%), url(../../images/whyservertoday/why-3.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-why-4 {
        height: 100vh;
        background-image: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.00) 50%, rgba(255, 255, 255, 0.00) 100%), url(../../images/whyservertoday/why-4.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-why-5 {
        background-image: transparent;
    }

    .bg-why-6 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 45.97%, #FFF 100%), url(../../images/whyservertoday/why-6.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-success-head {
        height: 100vh;
        background-image: linear-gradient(180deg, #000 0%, rgba(255, 255, 255, 0.00) 50%, #000 100%), url(../../images/success/success-head.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-success-1 {
        height: auto;
        background-image: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.00) 50%, #fff 100%), url(../../images/success/success-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-success-2 {
        height: auto;
        background-image: linear-gradient(180deg, #000 0%, rgba(255, 255, 255, 0.00) 20%, #000 100%), url(../../images/success/success-3.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-success-3 {
        height: auto;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-success-4 {
        height: auto;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-success-cloud {
        height: 100vh;
        background-image: white;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .border-bank {
        background-color: black;
        border: 1px solid #212529;
        border-radius: 0.75rem;
    }

    .border-etp {
        background-color: white;
        border: 1px solid var(--color-line-grey);
        border-radius: 0.75rem;
    }

    .multiply {
        background-blend-mode: multiply;
    }

    .bg-form-sale {
        --bs-bg-opacity: 1;
        height: 722px;
        background-color: var(--color-bg-white) !important;
        border: 1px solid var(--color-line-darkgrey) !important;
        box-shadow: 4px 4px 10px 1px rgba(0, 0, 0, 0.10);
        padding: 2.5rem 2rem;
        border-radius: 4px;
    }

    .bg-form-sup {
        --bs-bg-opacity: 1;
        background-color: var(--color-bg-white) !important;
        border: 1px solid var(--color-line-darkgrey) !important;
        box-shadow: 4px 4px 10px 1px rgba(0, 0, 0, 0.10);
        padding: 2.5rem 2rem;
        border-radius: 4px;
    }

    .bank-btw {
        height: 600px;
        background-color: transparent;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .etp-btw {
        height: 600px;
        background-color: transparent;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .cloud-btw {
        height: 529px;
        background-color: transparent;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}

/* ==== end lg  ==== */

/* ====  xl  ==== */

@media (min-width:1200px) {

    body {
        font-weight: 400;
        font-size: 1.125rem;
        color: var(--color-text-dark);
        font-style: normal;
        font-family: "Noto Sans Thai", sans-serif;
    }

    /* ---- h ---- */

    .h1,
    h1 {
        font-family: "Noto Sans Thai", sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: 3.5rem;
    }

    .h2,
    h2 {
        font-family: "Noto Sans Thai", sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: 3rem;
    }

    .h3,
    h3 {
        font-family: "Noto Sans Thai", sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: 3.25rem;
    }

    .h4,
    h4 {
        font-family: "Noto Sans Thai", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 1.5rem;
    }

    .h5,
    h5 {
        font-family: "Noto Sans Thai", sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: 2.25rem;
    }

    .h6,
    h6 {
        font-family: "Noto Sans Thai", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 0.875rem;
    }

    .fs-7 {
        font-size: 1.25rem;
    }

    .fs-48 {
        font-size: 3rem;
    }

    /* ---- images ---- */

    .img-pro-zimbra {
        height: 600px;
        border-radius: 12px;
    }

    .img-apps {
        height: 48px;
        width: 48px;
    }

    .logos-height img {
        height: 48px;
        margin: 12px 12px;
    }

    /* ---- space ---- */
    .pt-content-80 {
        padding-top: 5rem;
    }

    .pb-apps-64 {
        padding-bottom: 4rem;
    }

    .pb-success {
        padding-bottom: 6.25rem !important;
    }

    /* ---- bg-gradient ---- */

    .bg-black-gradient {
        background: linear-gradient(180deg, #000 0%, rgba(255, 255, 255, 0.00) 50%, #000 100%);
        background-blend-mode: multiply;
        z-index: 9;
    }

    /* ---- bg-images ---- */

    .bg-banner-black {
        height: 95vh;
        background-image: url(../../images/banner/banner-black.png),
            linear-gradient(180deg, #000 0%, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 90%, #000 100%);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-banner-allblack {
        height: 95vh;
        background-color: #000;
    }

    .bg-banner-allwhite {
        height: 95vh;
        background-color: #fff;
    }

    .bg-banner-white {
        height: 95vh;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.00) 50%, rgba(255, 255, 255, 0.00) 80%, #FFF 100%), url(../../images/banner/banner-white.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-zimbra-col-head {
        height: 100vh;
        background-image: url(../../images/zimbra-collaboration/zimbra-col-head.jpg),
            linear-gradient(180deg, #000 00%, rgba(0, 0, 0, 0.8) 30%, rgba(255, 255, 255, 0) 60%, #000 100%);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-zimbra-col-1 {
        height: 100vh;
        position: relative;
        overflow: hidden;
        background-color: #000000;
        z-index: -101;
    }

    .bg-zimbra-col-1::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, #000 5%, rgba(0, 0, 0, 0.2) 40%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.00) 75%, #000 95%);
        z-index: -99;
    }

    .bg-zimbra-col-1 video {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -100;
        transform: translateX(-50%) translateY(-50%);
    }

    .bg-zimbra-col-2 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.40) 80%, #FFF 100%), url(../../images/zimbra-collaboration/zimbra-col-2.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-zimbra-col-3 {
        height: 100vh;
        background-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.6) 60%, #000 100%), url(../../images/zimbra-collaboration/zimbra-col-3.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-zimbra-col-4 {
        height: 100vh;
        background-image: transparent;
        background-repeat: no-repeat;
        background-position: top center;
        background-color: white;
    }

    .bg-solution-head {
        height: 100vh;
        background-image: linear-gradient(180deg, #000 5%, rgba(255, 255, 255, 0.00) 50%, #000 100%), url(../../images/zimbra-solution/zb-solution-head.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-solution-1 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0.00) 20%, rgba(0, 0, 0, 0.30) 80%, #000 100%),
            url(../../images/zimbra-solution/zb-solution-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-solution-2 {
        height: 100vh;
        background-image:
            url(../../images/zimbra-solution/zb-solution-2.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-solution-3 {
        height: 100vh;
        background-image:
            url(../../images/zimbra-solution/zb-solution-3.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;

    }

    .bg-solution-4 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.00) 50%, #FFF 100%),
            url(../../images/zimbra-solution/zb-solution-4.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-add-ons-head {
        height: 100vh;
        background-image: url(../../images/zimbra-add-ons/zb-addons-head.jpg),
            linear-gradient(180deg, rgba(0, 0, 0, 0.80) 0%, rgba(255, 255, 255, 0.00) 20%, rgba(255, 255, 255, 0.00) 80%, rgba(0, 0, 0) 100%);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-add-ons-1 {
        height: 100vh;
        background-image: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.00) 50%, rgba(0, 0, 0, 1) 100%),
            url(../../images/zimbra-add-ons/zb-addons-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: plus-darker;
    }

    .bg-add-ons-2 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.00) 50%, #FFF 100%),
            url(../../images/zimbra-add-ons/zb-addons-2.jpg);
        background-repeat: no-repeat;
        background-position: top center;
        background-size: none;
        background-blend-mode: normal;
    }

    /* .bg-add-ons-3 {
        height: 100vh;
        background-image: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.00) 20%, rgba(0, 0, 0, 1) 100%),
            url(../../images/zimbra-add-ons/zb-addons-3.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    } */

    .bg-add-ons-3 {
        height: 100vh;
        position: relative;
        overflow: hidden;
        background-color: #000000;
        z-index: -101;
    }

    .bg-add-ons-3::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.00) 0%, rgba(255, 255, 255, 0.00) 40%, #000 85%);
        z-index: -99;
    }

    .bg-add-ons-3 video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: none;
        object-fit: contain;
        z-index: -100;
    }

    .bg-add-ons-4 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.00) 40%, #FFF 100%),
            url(../../images/zimbra-add-ons/zb-addons-4.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-modernization-head {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.8) 15%, rgba(255, 255, 255, 0.00) 50%, rgba(0, 0, 0) 100%), url(../../images/app-modernization/appsmodern-head.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-modernization-1 {
        height: 100vh;
        background-image: radial-gradient(50% 50% at 50% 50%, #FFF 0%, rgba(255, 255, 255, 0.00) 100%), url(../../images/app-modernization/appsmodern-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-modernization-2 {
        height: 100vh;
        background-image: url(../../images/app-modernization/appsmodern-2.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-modernization-3 {
        height: 100vh;
        background-image: radial-gradient(50% 50% at 50% 50%, #FFF 30%, rgba(255, 255, 255, 0.00) 100%), url(../../images/app-modernization/appsmodern-3.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-modernization-4 {
        position: relative;
        height: 100vh;
        background-color: black;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

    .bg-migration-head {
        height: 100vh;
        background-image: linear-gradient(180deg, #000 4%, rgba(255, 255, 255, 0.00) 50%, #000 100%), url(../../images/migration/migration-head.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-migration-1 {
        height: 100vh;
        background-image: radial-gradient(50% 50% at 50% 50%, #FFF 10%, rgba(255, 255, 255, 0.30) 100%), url(../../images/migration/migration-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-migration-2 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.80) 0%, rgba(255, 255, 255, 0.00) 20%, rgba(255, 255, 255, 1) 50%, rgba(0, 0, 0, 1) 100%), url(../../images/migration/migration-2.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-migration-3 {
        height: 100vh;
        background-image: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.30) 0%, #FFF 100%), url(../../images/migration/migration-3.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-migration-4 {
        height: 100vh;
        position: relative;
        overflow: hidden;
        background-color: #000000;
        z-index: -101;
    }

    .bg-migration-4::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 1) 3%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.4) 80%, rgba(0, 0, 0, 0.80) 100%);
        z-index: -99;
    }

    .bg-migration-4 video {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -100;
        transform: translateX(-50%) translateY(-50%);
    }

    .bg-acceleration-head {
        height: 100vh;
        background-image: linear-gradient(180deg, #000 4%, rgba(255, 255, 255, 0.00) 50%, #000 100%), url(../../images/acceleration/acceleration-head.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-acceleration-1 {
        height: 100vh;
        background-image: url(../../images/acceleration/acceleration-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-acceleration-2 {
        height: 100vh;
        background-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.00) 100%),
            url(../../images/acceleration/acceleration-2.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-acceleration-3 {
        height: 100vh;
        background-image: radial-gradient(50% 50% at 50% 50%, #FFF 0%, rgba(255, 255, 255, 0.00) 100%),
            url(../../images/acceleration/acceleration-3.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-acceleration-4 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 50%, #000 100%), url(../../images/acceleration/acceleration-4.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-home-head {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(255, 255, 255, 0.00) 80%, rgba(0, 0, 0, 1) 100%), url(../../images/home/home-head.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }


    .bg-home-1 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.60) 30%, rgba(0, 0, 0, 0.00) 50%, rgba(0, 0, 0, 0.00) 100%), url(../../images/home/home-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }


    .bg-home-2 {
        height: auto;
        background-image: url(../../images/home/home-2.png);
        background-repeat: no-repeat;
        background-position: top center;
        background-size: cover;
    }

    .bg-home-3 {
        height: 100vh;
        background-image: url(../../images/home/home-3.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

    .bg-home-4 {
        height: 100vh;
        background-image: linear-gradient(180deg, #000 0%, rgba(255, 255, 255, 0.00) 50%, #000 100%), url(../../images/home/home-4.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-managed-services-head {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 4%, rgba(0, 0, 0, 0.2) 50%, rgba(255, 255, 255, 0.00) 80%, rgba(0, 0, 0, 0.80) 100%), url(../../images/managed-services/managed-head.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-managed-services-1 {
        height: 100vh;
        background-image: url(../../images/managed-services/managed-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-managed-services-2 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.00) 35.83%, rgba(0, 0, 0, 0.95) 75.58%, #000 100%), url(../../images/managed-services/managed-2.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-managed-services-3 {
        height: 100vh;
        background-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.00) 25%, rgba(0, 0, 0, 0.00) 50%, #000 100%), url(../../images/managed-services/managed-3.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-managed-services-4 {
        height: 100vh;
        background-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.00) 25%, rgba(0, 0, 0, 0.00) 80%, #000 100%), url(../../images/managed-services/managed-4.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-managed-services-5 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.00) 60%, rgba(255, 255, 255, 0.70) 75%, #FFF 100%),
            url(../../images/managed-services/managed-5.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-why-head {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(255, 255, 255, 0.00) 80%, rgba(0, 0, 0, 0.80) 100%), url(../../images/whyservertoday/why-head.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-why-headbest-vdo {
        height: 100vh;
        position: relative;
        overflow: hidden;
        background-color: #000000;
        z-index: -101;
    }

    .bg-why-headbest-vdo::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, #000 15%, rgba(0, 0, 0, 0.8) 30%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.00) 60%, #000 93%);
        background-blend-mode: multiply;
        z-index: -99;
    }

    .bg-why-headbest-vdo video {
        position: absolute;
        top: 45%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -100;
        transform: translateX(-50%) translateY(-50%);
    }

    .bg-why-1 {
        height: 100vh;
        background-image: radial-gradient(50% 50% at 50% 50%, #FFF 0%, rgba(255, 255, 255, 0.70) 100%), url(../../images/whyservertoday/why-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-why-2 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.50) 70%, rgba(0, 0, 0, 0.80) 100%), url(../../images/whyservertoday/why-2.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-why-3 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 10%, rgba(255, 255, 255, 0.00) 60%, rgba(0, 0, 0, 0.30) 70%, rgba(0, 0, 0, 0.80) 100%), url(../../images/whyservertoday/why-3.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-why-4 {
        height: 100vh;
        background-image: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.00) 50%, rgba(255, 255, 255, 0.00) 100%), url(../../images/whyservertoday/why-4.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-why-5 {
        background-image: transparent;
    }

    .bg-why-6 {
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 45.97%, #FFF 100%), url(../../images/whyservertoday/why-6.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-success-head {
        height: 100vh;
        background-image: linear-gradient(180deg, #000 0%, rgba(255, 255, 255, 0.00) 50%, #000 100%), url(../../images/success/success-head.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    .bg-success-1 {
        height: auto;
        background-image: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.00) 50%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 1) 100%), url(../../images/success/success-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-success-2 {
        height: auto;
        background-image: linear-gradient(180deg, #000 0%, rgba(255, 255, 255, 0.00) 20%, #000 100%), url(../../images/success/success-3.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-success-3 {
        height: auto;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-success-4 {
        height: auto;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .bg-success-cloud {
        height: auto;
        background-image: white;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: normal;
    }

    .border-bank {
        background-color: black;
        border: 1px solid #212529;
        border-radius: 0.75rem;
    }

    .border-etp {
        background-color: white;
        border: 1px solid var(--color-line-grey);
        border-radius: 0.75rem;
    }

    .multiply {
        background-blend-mode: multiply;
    }

    .bg-form-sale {
        --bs-bg-opacity: 1;
        height: 728px;
        background-color: var(--color-bg-white) !important;
        border: 1px solid var(--color-line-darkgrey) !important;
        box-shadow: 4px 4px 10px 1px rgba(0, 0, 0, 0.10);
        padding: 2.5rem 2rem;
        border-radius: 4px;
    }

    .bg-form-sup {
        --bs-bg-opacity: 1;
        background-color: var(--color-bg-white) !important;
        border: 1px solid var(--color-line-darkgrey) !important;
        box-shadow: 4px 4px 10px 1px rgba(0, 0, 0, 0.10);
        padding: 2.5rem 2rem;
        border-radius: 4px;
    }

    .bank-btw {
        height: 600px;
        background-color: transparent;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .etp-btw {
        height: 600px;
        background-color: transparent;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .cloud-btw {
        height: 529px;
        background-color: transparent;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}

/* ==== end xl  ==== */