@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100..900&family=Sarabun:ital,wght@0,400;0,700;1,400;1,700&display=swap');

* {
    scroll-behavior: smooth;
}

:root {
    --color-text-dark: #212529;
    --color-text-white: #ffffff;
    --color-text-grey: #686E7A;
    --color-text-lightgrey: #AFAFAF;
    --color-text-blue: #00A6FF;
    --color-text-yellow: #FBEECA;

    --color-primary-blue: #00A6FF;
    --color-disable-grey: #9D9D9D;
    --color-link-blue: #00A6FF;

    --color-line-grey: #D9D9D9;
    --color-line-darkgrey: #686E7A;
    --color-line-blue: #00A6FF;
    --color-line-white: #ffffff;

    --color-bg-lightblue: #DEEAF8;
    --color-bg-lightblue2: #C5DBF2;
    --color-bg-lightgrey: #EFEEE9;
    --color-bg-yellow: #FBEECA;
    --color-bg-brown: #241C15;
    --color-bg-white: #ffffff;

    --border-radius-xs: 0.125rem;
    --border-radius-sm: 0.25rem;
    --border-radius-lg: 0.75rem;
    --border-radius-xl: 1rem;
    --border-radius-xxl: 1.5rem;
}

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;
}

/* ---- btn ---- */
.btn:hover .material-symbols-rounded.smooth {
    transform: translateX(5px);
    transition: transform 0.5s ease;
}

.icon-hover:hover .material-symbols-rounded.smooth {
    transform: translateX(5px);
    transition: transform 0.5s ease;
}

.icon-hover {
    color: var(--color-primary-blue);
    position: relative;
    display: inline-block;
}

.icon-hover::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
    height: 1px;
    background-color: var(--color-primary-blue);
}

.sc-link a {
    font-family: "Mitr", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-text-blue);
    text-decoration: underline;
}

.sc-link a:hover {
    color: var(--color-text-blue);
}

/* ---- text-color ---- */
.text-white {
    color: var(--color-text-white) !important;
}

.text-dark {
    color: var(--color-text-dark) !important;
}

.text-grey {
    color: var(--color-text-grey) !important;
}

.text-lightgrey {
    color: var(--color-text-lightgrey) !important;
}

.text-blue {
    color: var(--color-text-blue) !important;
}

.line-grey {
    color: var(--color-line-grey) !important;
}

.line-darkgrey {
    color: var(--color-line-darkgrey) !important;
}


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

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

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

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

/* ---- 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: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.3) 80%, #000 100%);
    background-blend-mode: multiply;
    position: relative;
    overflow: hidden;
} */

.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: 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-zimbra-col-1 video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: -100;
}


.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;
    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: linear-gradient(270deg, rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 0.00) 25%, rgba(255, 255, 255, 0.00) 50%, rgba(255, 255, 255, 0.00) 75%, rgba(0, 0, 0, 1) 90%);
    z-index: -99;
}

.bg-add-ons-3 video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    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, 1) 30%, rgba(255, 255, 255, 0.00) 80%, 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(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 20%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 65%, rgba(255, 255, 255, 0.8) 70%, rgba(255, 255, 255, 1) 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%;
    /* background: linear-gradient(180deg, rgba(0, 0, 0, 1) 3%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.6) 70%, rgba(0, 0, 0, 1) 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.8);
}

.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) 0%, rgba(0, 0, 0, 0.2) 20%, 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;
    position: relative;
    overflow: hidden;
    background-color: #000000;
    z-index: -101;
}

.bg-acceleration-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.2) 40%, rgba(0, 0, 0, 0.2) 80%, rgba(0, 0, 0, 0.80) 100%);
    z-index: -99;
}

.bg-acceleration-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-home-head {
    height: 100vh;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.30) 80%, #FFF 100%), url(../../images/home/home-head.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-blend-mode: normal;
}

.bg-home-1 {
    height: 100vh;
    background-image: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 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-home-4 {
    height: 100vh;
    position: relative;
    overflow: hidden;
    background-color: #000000;
    z-index: -101;
}

.bg-home-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.8) 40%, rgba(0, 0, 0, 0.2) 80%, rgba(0, 0, 0, 1) 100%);
    z-index: -99;
}

.bg-home-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-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-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-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%)
}

.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-headbest {
    height: 100vh;
    background-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 1) 15%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.20) 80%, rgba(0, 0, 0, 1) 100%), url(../../images/whyservertoday/why-best.jpg);
    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-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-1 {
    height: 100vh;
    background-image: url(../../images/whyservertoday/why-1.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-blend-mode: multiply;
}

.bg-why-2 {
    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-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) 70%, 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.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: 100vh;
    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-cloud {
    height: 100vh;
    background-image: white;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-blend-mode: normal;
}

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

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

.bg-success-4 {
    height: 100vh;
    background-color: black;
}

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

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

.bg-resource-head-vdo::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.2) 40%, rgba(0, 0, 0, 0.2) 80%, rgba(0, 0, 0, 0.80) 100%);
    z-index: -99;
}

.bg-resource-head-vdo 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%);
}

.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;
}

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

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



.invert {
    filter: invert(1);
}

.brightness {
    filter: brightness(1.5);
}

/* ---- space ---- */
.p-head {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 8.25rem 0 6.25rem 0;
}

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

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

.p-40 {
    padding: 2.5rem;
}

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

.pb-content {
    height: 100vh;
    padding-bottom: 5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.pt-content {
    padding-top: 6.25rem;
}

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

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

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

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

.py-100 {
    padding: 6.25rem 0;
}

.py-40 {
    padding: 2.5rem 0;
}

.mt-btn-banner {
    margin-top: 1.5rem;
}

.mt-64 {
    margin-top: 4rem;
}

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

.pt-100 {
    padding-top: 5rem;
}

.content-between {
    height: 100vh;
    padding: 5rem 0;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.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;
}

.mb--2 {
    margin-bottom: -16px;
}

/* ==== scroll - top - bottom ==== */

.transformtop {
    opacity: 0;
    transform: translateY(-100px);
    transition: opacity 1s, transform 1s;
}

@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.transformtop.show {
    animation: slideInFromTop 1.5s ease forwards;
}


.transformbottom {
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 0.5s, transform 0.5s;
}

@keyframes slideInFromBottom {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.transformbottom.show {
    animation: slideInFromBottom 1.5s ease forwards;
}

/* ==== end scroll - top - bottom ==== */


/* ----- contactus ----- */
.pt-navbar {
    padding-top: 67px;
}

.mt-main {
    margin-top: 4rem;
}

.pb-80 {
    padding-bottom: 5rem !important;
}

.p-contact-sale {
    background-color: transparent;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.p-contact-support {
    height: 610px;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.bg-form-sale {
    --bs-bg-opacity: 1;
    height: 701px;
    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-download {
    --bs-bg-opacity: 1;
    height: auto;
    background-color: var(--color-bg-white) !important;
    border: 1px solid var(--color-line-grey) !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;
}

.bg-lightblue {
    --bs-bg-opacity: 1;
    background-color: var(--color-bg-lightblue) !important;
}

/* ----- end contactus ----- */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: var(--color-text-dark) !important;
}

/* nav */
.navbar {
    /* background-color: #ffffff05;
    backdrop-filter: blur(20px); */
    border: 0;
    /* transition: background-color 0.3s linear; */
}

.navbar .nav-item {
    position: relative;
}

.navbar .nav-link {
    /* color: #ffffff; */
}

.navbar:hover {
    background-color: #ffffff !important;
}

.navbar:hover .nav-link {
    color: var(--color-text-dark) !important;
}

.navbar:hover .nav-link:hover,
.nav-link:active,
.nav-link:focus {
    color: var(--color-text-blue) !important;
    background-color: #00000010;
    border-radius: 4px;
}

.navbar-brand .logo-hover {
    display: none;
}

.navbar:hover .navbar-brand .logo-default {
    display: none;
}

.navbar:hover .navbar-brand .logo-hover {
    display: inline;
}

.navbar .nav-item .dropdown-menu {
    display: block;
    position: fixed;
    top: 48px;
    left: 0;
    right: 0;
    background-color: #ffffff;
    border: none;
    width: 100vw;
    z-index: 1000;
    border-radius: 0;
    opacity: 0;
    transform: translateY(-20px);
    visibility: hidden;
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s ease;
}

.navbar .nav-item:hover .dropdown-menu {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

nav .dropdown-menu {
    padding-top: 16px;
    padding-bottom: 40px;
}

nav h3 {
    color: #7C7C7C;
    font-size: 16px;
    font-weight: 600;
    padding-bottom: 12px;
    padding-left: 12px;
}

nav ul li h4 {
    color: #000000;
    font-size: 16px;
    font-weight: 600;
}

nav ul li {
    margin: 6px 0px;
}

.navbaricon {
    list-style: none;
    text-decoration: none !important;
    border-bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.navbaricon a {
    display: block;
    text-align: center;
    color: var(--color-text-white);
    text-decoration: none;
}

.navbaricon a {
    color: var(--color-text-white);
    transition: color 0.3s;
}

.navbaricon a:hover,
.navbaricon a:focus,
.navbaricon a:active {
    color: var(--color-primary-blue) !important;
    border: 0;
    background-color: #00000010;
    border-radius: 4px;
}


.navbar:hover .navbaricon a {
    color: var(--color-text-dark);
}

.navbar .dropdown-item:hover {
    background-color: #00000010;
    color: var(--color-primary-blue);
    border-radius: 4px;
}


.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus,
.navbar .dropdown-item:active {
    color: var(--color-primary-blue);
}

.wrap-text {
    word-wrap: break-word;
    white-space: normal;
}

/* --- navbar icon --- */

.navbaricon .dropdown-item {
    padding: 8px 16px;
}

.navbaricon .dropdown-item:hover {
    background-color: #00000010;
    color: var(--color-primary-blue);
    border-radius: 4px;
}

.navbaricon .dropdown-item:hover,
.navbaricon .dropdown-item:focus,
.navbaricon .dropdown-item:active {
    color: var(--color-primary-blue);
}


/* end nav */

/* footer */
footer {
    padding-top: 80px;
    padding-bottom: 80px;
}

footer h6 {
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--color-text-lightgrey);
}

footer ul {
    list-style-type: none;
    padding: 0;

}

footer ul li {
    font-size: 14px;
    padding: 0.5rem 0;
}


footer a {
    text-decoration: none;
    color: var(--color-text-dark);
}

footer a:hover {
    color: var(--color-text-blue);
}

/* ---- footer icon ---- */


.footericon {
    list-style: none;
    text-decoration: none !important;
    border-bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
}

.footericon a {
    display: block;
    width: 40px;
    height: 40px;
    text-align: center;
    background: var(--color-bg-white);
    border-radius: 2px;
    font-size: 30px;
    color: var(--color-text-dark);
    text-decoration: none;
}

.footericon a:hover,
.footericon a:focus,
.footericon a:active {
    color: var(--color-primary-blue);
    border: 0;
}

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

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

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

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

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

.sticky-share {
    position: -webkit-sticky;
    position: sticky;
    top: 80px;
}

/* end footer */


/* ---- live chat ---- */
/* Button used to open the chat form - fixed at the bottom of the page */
.chat-open-button {
    color: white;
    border: none;
    cursor: pointer;
    opacity: 1;
    position: fixed;
    bottom: 88px;
    right: 8px;
    width: 3.75rem;
    height: 3.75rem;
    padding: 0.2rem;
    border-radius: 50%;
    font-size: 30px;
    text-align: center;
    align-items: center;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.14),
        0 2px 4px rgba(0, 0, 0, 0.28);
}

.chat-open-button:hover {
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.14),
        0 4px 8px rgba(0, 0, 0, 0.28);
    animation: shake 1s;
    /* animation-iteration-count: infinite; */
}



.btn-chat a {
    position: relative;
    display: block;
    width: 3.75rem;
    height: 3.75rem;
    text-align: center;
    right: 8px;
    border-radius: 50%;
    padding: 0.3rem;
    color: white;
    text-decoration: none;
    font-size: 32px;
    /* box-shadow: 0 0 4px rgba(0, 0, 0, 0.14),
        0 4px 8px rgba(0, 0, 0, 0.28); */
}

.btn-chat a::before {
    content: '';
    position: absolute;
    text-align: center;
    top: 0;
    left: 0;
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 50%;
    font-size: 32px;
    z-index: -1;
    padding: 0.2rem;
}

.message {
    background: linear-gradient(to right, #EC3C48, #ff5a3d);
}

.mail {
    background: linear-gradient(to right, #fab113, #ffc505);
}

.line-icon {
    background: linear-gradient(to right, #00B900, #00B900);
}

.facebook-icon {
    background: linear-gradient(to right, #1877F2, #1877F2);
}

.calling-icon {
    background: linear-gradient(to right, #f26818, #ff8929);
}

.btn-chat a:hover::before {
    /* transform: scale(1.1); */
    /* box-shadow: 0 0 4px rgba(0, 0, 0, 0.14),
        0 4px 8px rgba(0, 0, 0, 0.28); */
    font-size: 28px;
}

.btn-chat a:hover {
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.14),
        0 4px 8px rgba(0, 0, 0, 0.28);
    animation: shake 1s;
    animation-iteration-count: infinite;
}

.btn-chat a:focus {
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.14),
        0 4px 8px rgba(0, 0, 0, 0.28);
}

/* The popup chat - hidden by default */
.chat-popup {
    visibility: hidden;
    /* Instead of display: none */
    opacity: 0;
    transition: visibility 0s linear 0.5s, opacity 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000);
    position: fixed;
    bottom: 128px;
    right: 26px;
    z-index: 9;

}

.chat-popup.open {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
    /* Apply transition immediately */
}

.form-chat-container {
    width: 2.5rem;
    padding-right: 1rem;
}

/* Set a style for the submit/send button */
.form-chat-container .btn-chat {
    border: none;
    cursor: pointer;
    margin-bottom: 8px;
    opacity: 1;
    background: transparent;
}

.form-chat-container .btn-chat:last-child {
    border: none;
    cursor: pointer;
    margin-bottom: 28px;
    opacity: 1;
    background: transparent;
}

/* Default styles - hide mobile button */
.btn-chat.mobile {
    display: none;
}

/* CSS Media Query for Mobile Screens */
@media screen and (max-width: 768px) {
    .btn-chat.desktop {
        display: none;
    }

    .btn-chat.mobile {
        display: inline-block;
    }
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-2px);
    }

    50% {
        transform: translateX(2px);
    }

    75% {
        transform: translateX(-2px);
    }
}



.chat-open-button i {
    display: inline-block;
    /* Allows transformation */
    transition: transform 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000);

}

.chat-open-button .icofont-close {
    transform: rotate(180deg);
}

.chat-open-button {
    /* ... existing styles ... */
    transition: transform 0.5s;
    transform: translateY(0);
    /* Initial state, no movement */
}

/* New class to move the button up when chat is closed */
.chat-open-button.chat-closed {
    transform: translateY(-300px);
    /* Adjust this value to move the button up */
}

/* ---- li ---- */

.nested-numbered-list {
    counter-reset: section;
    list-style-type: none;
}

.nested-numbered-list>li::before {
    content: counter(section) ")";
    counter-increment: section;
    margin-right: 5px;
}

.nested-numbered-list ol {
    counter-reset: subsection;
    list-style-type: none;
}

.nested-numbered-list ol>li::before {
    content: counter(section) "." counter(subsection, decimal-leading-zero);
    counter-increment: subsection;
    margin-right: 5px;
}

/* .img-height-40 {
    max-height: 24px;
    width: auto;
    display: inline-block;
} */

/* CSS เพิ่มเติมสำหรับรูปภาพ */
.footericon a.img-icon {
    width: auto;
    max-width: 120px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ปรับขนาดรูปภาพ */
.img-height-40 {
    max-height: 20px;
    width: auto;
    object-fit: contain;
}