@import url(./fonts/beausans/style.css);
@import url(./variable.css);
@import url(./clear.css);
@import url(./menu.css);
@import url(./sarabun.css);

.main-menu-actions button { padding: 0.25rem 0.75rem; border-radius: 0.5rem; border: 1px solid transparent; outline: none; cursor: pointer; }

section[name='header'] { position: -webkit-sticky; position: sticky; top: 0; z-index: 1049; }

/* #region: sub header */

.sub-header { background-color: #3d3d3d; color: var(--white); display: flex; justify-content: end; align-items: center; gap: 2.2rem; padding: 9px 3rem; font-size: 12px; }

    .sub-header a { color: var(--white); }

        .sub-header a:hover { color: #949595; }

    .sub-header > div { display: flex; align-items: center; }

    .sub-header select { border: none; outline: none; background: transparent; color: var(--white); }

        .sub-header select option { appearance: none; background: #3d3d3d; border: none; outline: none; box-shadow: none; }

        .sub-header select:focus { border: none; outline: none; -webkit-box-shadow: none; box-shadow: none; }

@media (max-width: 1200px) {
    .sub-header { padding: 9px 1rem; }

    .logo-idc img { margin-left: 0 !important; }
}

/* #endregion */

/* #region main-menu */

.main-menu-container { background: var(--white); color: var(--black); display: flex; justify-content: space-around; align-items: center; border-bottom: 1px solid #dddddd; }

.main-menu-actions { position: absolute; right: 3rem; top: .5rem; display: flex; }

.logo-idc { position: absolute; /* padding-top: 8px; */ /* padding-bottom: 8px; */ padding-left: min(3vw, 30px); margin-top: min(4%, 5px); min-width: 94px; }

    .logo-idc img { /*        margin-left: 2.2rem;*/ margin-right: -3rem; }

.main-menu { display: flex; align-items: stretch; gap: 1.5rem; /* min-height: 100vh; */ }

    .main-menu a { color: var(--black); /*        padding-top: 20px;*/ }

.parent-menu-item:hover { color: var(--red); cursor: pointer; }

.main-menu-container .main-menu-actions { display: flex; justify-content: center; align-items: center; gap: 9px; background: transparent; font-weight: var(--fw-regular); float: inline-end; margin-left: 4rem; }

input#search-header { max-width: 16rem; width: 16rem; position: absolute; right: 100%; margin-top: 2px; }

.main-menu-actions button.btn-search { border: none; background: transparent; }

    .main-menu-actions button.btn-search:focus { outline: none; border: none; }

.main-menu-actions button.btn-login { color: var(--black); border-color: var(--black); background: transparent; }

.main-menu-actions button.btn-register { color: var(--white); background: var(--red); border-color: var(--red); padding: 0.25rem 1.5rem; }

button.btn-menu-bars { border: none; background: transparent; }

    button.btn-menu-bars:nth-child(2) { display: none; }

.banner-container { position: relative; gap: 10px; color: var(--black); background: var(--white); }

    .banner-container img { width: 100%; }

.banner-content { position: absolute; top: 16%; left: 0; display: flex; flex-direction: column; /*    justify-content: space-around;*/ gap: 1rem; min-height: min(405px, 100%); width: 100%; }

.parent-menu-item { padding: 1rem 0; }

.solution-row { height: 85vh; }

.solution-sub-menu-detail { width: min(47vw, 1042px); height: 85vh; }

.banner-content h2 { font-size: 2rem; font-weight: var(--fw-semi-bold); margin-bottom: 1rem; text-align: justify; }

.banner-content button { border: none; outline: none; color: var(--white); background: var(--red); border-color: var(--red); margin-top: 1rem; padding: 0.5rem 1rem; border-radius: 8px; font-size: 16px !important; }

.hot-service-container { width: 100%; background: white; border-radius: .5rem; }

    .hot-service-container .row { box-shadow: 0 2px 2px rgb(161, 161, 161, 25%) inset; border: 2px solid var(--white); }

.hot-service-title { font-weight: var(--fw-bold); color: var(--black); }

    .hot-service-title:hover { color: var(--red); }

.hot-service-container .row { background-color: #fbfbfb; border-radius: 0.5rem; padding: 1rem; }

.hot-service-item img { min-width: 2rem; }

.hot-service-desc { color: var(--black); text-align: justify; padding: unset; margin: unset !important; }

.hot-service-item { display: flex; justify-content: flex-start; align-items: start; gap: 1rem; color: var(--black); }

    .hot-service-item:not(:last-child) { padding-right: 1.7rem; }

.idc-container { display: flex; align-items: stretch; flex: 1 1 auto; /*    padding-left: 3rem;*/ padding-right: 3rem; /* this is for submenu */ position: relative; }

    .idc-container > * { flex: 1 1 auto; }

.carousel-indicators { position: unset; }

.hot-service-parent-container { background: transparent; position: absolute; bottom: 7%; width: 100%; }

    .hot-service-parent-container ol.carousel-indicators li { width: 6px; height: 6px !important; background: var(--indicator-color); border-radius: 1000px; aspect-ratio: 1/1; border: none; opacity: 1; }

    .hot-service-parent-container .carousel-indicators li.active { background: var(--red); width: 52px; }



@media (max-width: 576px) {
    .hot-service-parent-container { top: 0 !important; }

    input#search-header { /*        top: 125%;*/ width: 38vw !important; max-width: unset; right: 110px !important; }

    .banner-content { top: 25px; gap: 0; display: block; }

        .banner-content h2 { font-size: 1.5rem; text-align: justify; }

        .banner-content .container { display: grid; row-gap: 0; margin-top: 0; }
    /*#myCarousel {
        -webkit-transition: 0.6s ease-in-out left;
        -moz-transition: 0.6s ease-in-out left;
        -o-transition: 0.6s ease-in-out left;
        transition: 0.6s ease-in-out left;
    }*/
    .carousel-inner .carousel-item { transition: -webkit-transform 0.5s ease; transition: transform 0.5s ease; transition: transform 0.5s ease, -webkit-transform 0.5s ease; }

    .w-50.w-sm-100 { width: 100% !important; }

    .main-menu-container .main-menu-actions { justify-content: end; }

    .main-menu-container .main-menu-actions { justify-content: end; }
}

@media (min-width: 576px) {
    .main-menu-container .main-menu-actions { justify-content: end; }
}

@media (min-width: 768px) {
    .banner-content .container { display: grid; row-gap: 2rem; margin-top: 0; }

    .position-relative-md { position: relative !important; }
}

@media (max-width: 768px) {

    .hot-service-item { justify-content: start; }

    input#search-header { width: 64vw; max-width: unset; right: 106px; }

    .hot-service-parent-container { position: relative; /*        padding-top: 10px;
*/ margin-top: -62px }
}

@media (min-width: 992px) {
    /* .banner-content .container {
    display: grid;
    row-gap: 10rem;
    margin-top: 6rem;
  } */

    .main-menu-container .logo-idc { float: inline-start; }
}

@media (min-width: 1200px) {
    .position-relative-xl { position: relative !important; }
}

@media (max-width: 1440px) {
    .hot-service-parent-container { }
}
/* #endregion  */

/*clear _spacing.scss*/
.carousel-item { padding: unset !important; transition: -webkit-transform 0.6s ease-in-out; transition: transform 0.6s ease-in-out; transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out; }

/* copy from header.css*/
@media only screen and (min-width: 768px) {
    .col-24 { position: unset; text-align: center; flex: 0 0 20%; max-width: 20%; padding-right: 15px; padding-left: 15px; }
}

.idc-solution-card { display: flex; flex-direction: column; cursor: grab; width: 96%; margin-left: 16px; margin-top: 30px; margin-bottom: 30px }

.idc-solution-info { bottom: 2rem; left: 6rem; max-width: 75%; color: black; height: max-content; }

.idc-service-backup-img { border-radius: 24px; height: 200px }

.idc-solution-card a { color: white; background: var(--red); padding: 8px 16px; border-radius: 12px; }

section[name='header'] .dropdown-item:hover { background-color: var(--red); color: white; }

    section[name='header'] .dropdown-item:hover .text { color: white !important; }

.text-description-solution-header { color: white }

.overlay-gradient-solution-header { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.9)); border-radius: 24px; }

.change-language option:hover { background-color: var(--red); }

.select-lang { position: relative; color: white; font-size: 12px; top: 1px; right: 7px; }

    .select-lang:hover { color: unset; }

    .select-lang:focus { box-shadow: unset; }

    .select-lang:before { content: ""; border-top: 1px solid white; border-right: 1px solid white; width: 5px; height: 5px; display: block; transform: translate(-3px, 0px) rotate(135deg); position: absolute; right: 0pc; bottom: 12px; }

.list-lang { font-size: 12px; min-width: 98px; top: 6px !important; left: 5px; }

    .list-lang button:hover { color: red !important; background-color: white !important; }

        .list-lang button:hover:before { content: ''; position: absolute; border: 1px solid var(--red); height: 27%; left: 0; }
.advice-form-hidden { display: none !important; }

.btn-support-modal { border: none; outline: none; color: var(--white); background: var(--red); border-color: var(--red); margin-top: 1rem; padding: 0.5rem 1rem; border-radius: 8px; font-size: 16px !important; margin: 0 auto; display: block; margin-top: 10px; margin-bottom: 10px; }