/*
Theme Name: MatBaoWS
Description: This is a child theme for Flatsome Theme
Author: MatBaoWS Team
Template: flatsome
Version: 3.0.2
*/
/*************** ADD CUSTOM CSS HERE.   ***************/

:root {
    --fs-color-3: rgb(46,84,118);
}

body.framed, body.framed header, body.framed .header-wrapper, body.boxed, body.boxed header, body.boxed .header-wrapper, body.boxed .is-sticky-section {
    max-width: 430px !important;
}

.dark .heading-font, .dark a.lead, .dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6, .dark label, .hover-dark:hover a, .hover-dark:hover h1, .hover-dark:hover h2, .hover-dark:hover h3, .hover-dark:hover h4, .hover-dark:hover h5, .hover-dark:hover h6, .hover-dark:hover p {
    color: #FFF5E4;
}

.sticky-header {
    position: sticky;
    top: 0;
    z-index: 99;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

h2 {
    font-size: 32px;
    line-height: 1.4;
}
h3 {
    font-size: 22px;
}

.text-no-margin * {
    margin-bottom: 0;
}

.header-button {
    background-color: rgb(255, 190, 39);
    animation: flash 2s infinite;
    animation-delay: 1s;
}

.header-button:hover {
    animation: none;
}

@keyframes flash {
    0%, 100%, 50% {
        opacity: 1;
    }25%, 75% {
        opacity: 0;
    }
}

.ss-1 {
    border-radius: 0 0 100px 100px;
    z-index: 1;
	background-color: var(--fs-color-primary);
}

.ss-3 {
    border-radius: 100px 100px 0 0;
    z-index: 1;
}

.bg-gap {
    margin-top: -95px;
    margin-bottom: -95px;
    background-color: var(--fs-color-primary);
    z-index: 0;
    position: relative;
}

.slot-count-down h3 {
    font-size: 18px;
}

.wpcf7-spinner {
    display: none;
}

.wpcf7-form {
    margin-bottom: 10px;
}

.wpcf7-form input,
.wpcf7-form select {
    height: 40px;
    border-radius: 30px;
    color: var(--fs-color-primary);
    font-size: 14px;
    font-style: italic;
    padding-left: 15px;
    padding-right: 15px;
    font-weight: 500;
    margin-bottom: 10px;
}

.wpcf7-form input::placeholder {
    color: var(--fs-color-primary);
}

.ux-timer-text span {
    position: relative;
    background-color: #3F6D93;
    padding: 5px 10px;
    border-radius: 6px;
    min-width: 54px;
    margin-right: 40px !important;
    text-align: center;
}

.ux-timer-text span:first-child  {
    margin-left: 0;
    margin-right: 45px !important;
}
.ux-timer-text span:nth-child(2)  {
    /* margin-left: 0; */
    margin-right: 60px !important;
}

.ux-timer-text span strong {
    margin-left: 6px;
    position: absolute;
    left: 100%;
    font-size: 18px;
    margin-top: 5px;
    font-weight: 500;
}

.tab-title h3 {
    background-color: var(--fs-color-3);
    padding-right: 15px;
    border-radius: 99px;
    height: 40px;
    width: fit-content;
    font-size: 16px;
}
.tab-title span {
    border-radius: 99px;
    padding: 0 15px;
    height: 40px;
    display: inline-block;
    line-height: 40px;
    margin-right: 5px;
}

.service-list .col {
    padding: 0px 7px 14px;
}

.service-box {
    padding: 8px;
    border-radius: 8px;
}
.service-box .box-image .image-cover {
    border-radius: 3px;
}
.service-box .box-text {
    padding: 10px 0 0 0;
}

.button.service-button {
    background-color: #FFF4DC;
}

.dark a.button.secondary:not(.icon) {
    color: var(--fs-color-primary);
}

.button.booking-button {
    min-height: 32px;
    height: 32px;
    line-height: 32px;
}
.booking-button i::before {
    content: url(./assets/img/calendar.svg);
    display: inline-block;
    width: 24px;
    height: 24px;
}

.mfp-container {
    padding: 30px 15px;
}
#booking_form {
    background-color: rgb(29, 27, 90);
    border-radius: 20px 0 20px 20px;
    overflow: hidden;
}

#booking_form .wpcf7-submit {
    background-color: var(--fs-color-secondary);
    border: none;
    font-style: normal;
}

#booking_form .ux-timer-text {
    display: flex;
    justify-content: space-around;
}
#booking_form .ux-timer-text span {
    background-color: transparent;
    margin-right: 5px !important;
    margin-left: 5px;
    text-align: center;
}
#booking_form .ux-timer-text span strong {
    font-size: 12px;
    display: block;
    position: static;
    margin-left: auto;
}

.total-title h3>span {
    border-radius: 30px;
    padding: 5px 15px;
    width: fit-content;
    font-weight: 400;
}

.total-title h3>span span {
    font-weight: 700;
}

.button-zoom-effect {
    animation: pulse 1s infinite;
    animation-delay: 1s;
}

@keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }50% {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }100% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}

.why-slider .gallery-col {
    border-radius: 30px;
    overflow: hidden;
}
.why-slider .gallery-col .box-text {
    min-height: 81px;
}
.why-slider .gallery-col .box-text p {
    color: var(--fs-color-primary);
    line-height: 1.3;
    font-size: 18px;
}
.flickity-prev-next-button {
    color: #fff;
}
.flickity-prev-next-button svg {
    padding: 30%;
}

.icon-box-text p {
    margin-bottom: 0;
    font-size: 18px;
}

.testimonial-col>.col-inner {
    background: url(./assets/img/qoute.png) no-repeat;
    background-position: 90% 0%;
}
.testimonial-box {
    position: relative;
}
.testimonial-meta {
    position: absolute;
    padding-top: 0;
    left: 50px;
    top: 0;
    color: var(--fs-color-primary);
}
.testimonial-meta * {
    display: block;
}
.testimonial-name {
    font-size: 15px;
}
.testimonial-name-divider {
    display: none;
}
.testimonial-company {
    font-size: 12px;
}
.star-rating {
    font-size: 20px;
}
.star-rating span:before {
    color: #d39a46;
}
.testimonial-text p {
    color: var(--fs-color-primary);
    font-size: 15px;
    font-style: normal;
}

.footer-section a {
    text-decoration: underline;
}

.footer-hotline h2 {
    font-size: 40px;
}

.footer-socials .button.icon:not(.is-outline) {
    background-color: var(--fs-color-secondary) !important;
    border-color: var(--fs-color-secondary) !important;
    margin: 0 5px !important;
}
.footer-socials .button.icon:not(.is-outline)>i {
    color: var(--fs-color-primary) !important;
}

.app-store .ux-logo-link,
.google-play .ux-logo-link {
    padding-left: 5px !important;
    padding-right: 5px !important;
    width: fit-content;
}
.mbws_datngay img{
	 border-radius: 99px;
}
.mbws_col_popup {
	background-color: #2E5476;
}

.grecaptcha-badge { 
    visibility: hidden !important;
}