/* Font scale */
@media only screen and (min-width: 1599px) and (min-width: 992px) {
    html {
        font-size: 0.9vw;
    }
}

/* Wrap the long words */
h1,
h2,
h3,
h4,
h5,
h6,
p {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}

/* Improve font render */
body {
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
}

/* CHange padding on breakpoint */
.nav-level-2 {
    width: calc(100vw - 4.5rem);
}

@media (min-width: 1180px) and (max-width: 1280px) {
    .section {
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }

    .nav {
        padding-left: 3rem;
        padding-right: 3rem;
    }

    .nav-level-2 {
        width: calc(100vw - 3rem);
        left: -1.5rem;
    }
}

@media (min-width: 991px) and (max-width: 1179px) {
    .section {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }

    .nav {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .nav-level-2 {
        width: calc(100vw - 2rem);
        left: -1rem;
    }
}

/* Hide scrollbar */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Navbar */
.nav-link:hover .nav-level-2 {
    display: flex;
}

/* Service item hover efect */
.service-item:hover .service-item-img {
    transform: scale(1.15);
}

.service-item:hover .btn-secondary {
    background-color: rgba(255, 255, 255, 0.24);
}

.service-item .btn-secondary {
    transition: all 0.5s
}

.col-service:first-child {
    position: relative;
    z-index: 3;
}

.col-service:nth-child(2) {
    position: relative;
    z-index: 2;
}

.col-service:nth-child(3) {
    position: relative;
    z-index: 1;
}

/* Tabs active / hover */
.tabs-nav-item.two.active>p {
    color: #E2D8C6;
}

/* Button hover */
.btn-tetriary.btn-black div {
    text-decoration: underline;
    text-underline-offset: 1rem;
    text-decoration-thickness: 1px;
    text-decoration-color: #b9b9b8;
    transition: all 0.3s
}

.btn-tetriary.btn-black:hover div {
    text-decoration-thickness: 1px;
    text-decoration-color: #1d1d1b;
}

.btn-tetriary.btn-one div {
    text-decoration: underline;
    text-underline-offset: 1rem;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(226, 216, 198, 0.4);
    transition: all 0.3s
}

.btn-tetriary.btn-one:hover div {
    text-decoration-thickness: 1px;
    text-decoration-color: #E2D8C6;
}

.btn-tetriary.btn-black.btn-service-secondary div {
    text-decoration: underline;
    text-underline-offset: 0.75rem;
    text-decoration-thickness: 1px;
    text-decoration-color: #b9b9b8;
    transition: all 0.3s
}

.btn-tetriary.btn-black.btn-service-secondary:hover div {
    text-decoration-thickness: 1px;
    text-decoration-color: #1D1D1B;
}

.btn-tetriary.btn-black.btn-service-secondary.hair div {
    text-decoration: underline;
    text-underline-offset: 0.75rem;
    text-decoration-thickness: 1px;
    text-decoration-color: #A69D99;
    transition: all 0.3s
}

.btn-tetriary.btn-black.btn-service-secondary:hover.hair div {
    text-decoration-thickness: 1px;
    text-decoration-color: #fff;
}

.service-btn-primary-icon {
    animation-duration: 2s;
    animation-iteration-count: infinite;
    transform-origin: bottom;
}

.service-btn-primary:hover .service-btn-primary-icon {
    animation-name: bounce;
    animation-timing-function: ease-out;
}

/* Button primary loop animation
.button-icon-wrap {
animation-duration: 2s;
animation-iteration-count: infinite;
transform-origin: bottom;
}
.button:hover .button-icon-wrap{
animation-name: bounce;
animation-timing-function: ease-out;
}
@keyframes bounce {
0%   { transform: translateX(0); }
50%  { transform: translateX(0.5rem); }
100% { transform: translateX(0); }
}
*/
.footer-secondary-link:hover .company-detail {
    color: #1D1D1B;
}

/* Slider-dot */
.w-slider-dot {
    width: 0.5rem !important;
    height: 0.5rem !important;
    margin: 0.5rem !important;
}

.w-slider-nav-invert>div.w-active {
    background-color: #1D1D1B !important;
}

.w-slider-nav-invert>div {
    background-color: #F2EEE6 !important;
}

/* Philosophy image loop animation */
.philosophy-image-group {
    animation: logo-slide 120s linear infinite;
}

@keyframes logo-slide {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-100% - 1rem));
    }
}

/* Faq label hover */
.accordion-label:hover .accordion-label-icon {
    background-color: rgba(226, 216, 198, 1)
}

/* Service category */
.service-category>.service-category-wrap:last-child>div:last-child {
    display: none;
}

/* Service popup table */
.popup-table-col-sec-wrap>.popup-table-col-sec-row:last-child {
    padding-bottom: 0rem;
    border-bottom: 0px solid;
}

/* Change item wrap */
/* header section 100% in large screen */
@media (min-width: 992px) {
    .change-item {
        min-width: calc(33.333% - 1.5rem);
        max-width: calc(33.333% - 1.5rem);
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .change-item {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .change-item {
        width: 100%;
    }
}

/* Select localization */
.btn-select:hover .btn-select-list-wrap {
    display: block;
}

.button:hover .btn-select-list-wrap {
    display: block;
}

.btn-primary:hover .btn-select-list-wrap {
    display: block;
}

.cta-content{
    grid-area: 1 / 2 / 2 / 12;
    justify-self: center;
}
.faq-col-question{
    grid-area: span 1 / span 8 / span 1 / span 8;
}

.faq-col-help{
    grid-area: 1 / 9 / 2 / 13;
    align-self: start;
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
    opacity: 1;
}

.popup-description p{
    font-size: 1.125rem;
    line-height: 1.75rem;
    color: var(--neutral-color--4);
}


.service-item-img {
    width: 100%;
    height: auto;
}
.know-img{
    width: 100%;
    height: auto;
}

.nav {
    transition: top 0.3s ease;
}

.nav--hidden {
    top: -300px;
}