@-webkit-keyframes Gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @-moz-keyframes Gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes Gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } [class$="phinx"] h2, [class$="phinx"] h3, [class$="phinx"] h4, [class$="phinx"] p, [class$="phinx"] ul { margin: 0; } [class$="phinx"] h1 { font-family: "Noto Sans Thai", sans-serif; font-size: 40px !important; font-style: normal; font-weight: 700; line-height: 150%; } [class$="phinx"] h2 { font-family: "Noto Sans Thai", sans-serif; font-size: 32px !important; font-style: normal; font-weight: 700; line-height: 150%; } [class$="phinx"] h4 { font-family: "Noto Sans Thai", sans-serif; font-size: 24px !important; font-style: normal; font-weight: 700; line-height: 150%; } [class$="phinx"] p { font-family: "Noto Sans Thai", sans-serif; font-size: 18px !important; font-style: normal; font-weight: 400; line-height: 150%; } [class$="phinx"] a { font-family: "Noto Sans Thai", sans-serif; font-size: 16px !important; font-style: normal; font-weight: 400; line-height: 150%; } [class$="phinx"] button { font-family: "Noto Sans Thai", sans-serif; font-size: 16px !important; font-style: normal; font-weight: 400; line-height: 150%; } [class$="phinx"] .primary { color: #74a1af; } .home__welcome__phinx { padding: 60px 0; } @media (max-width: 767.98px) { .home__welcome__phinx { padding: 40px 0; } } .home__welcome__phinx h2, .home__welcome__phinx h4 { color: #74a1af; margin-bottom: 16px; } .home__welcome__phinx p { color: #222222; margin-bottom: 24px; } .home__welcome__phinx button { color: #ffffff; background: #74a1af; height: 42px; min-width: 165px; padding: 0px 32px; border: none; outline: none; } .home__welcome__phinx button:hover { background: #4793AA; } .home__welcome__phinx button:active { background: #eff5f7; } .home__welcome__phinx img { width: 100%; height: 100%; object-fit: cover; } .home__welcome__phinx .container .row [class^="col"] { display: flex; flex-direction: column; justify-content: center; align-items: start; } @media (max-width: 767.98px) { .home__welcome__phinx .container .row [class^="col"]:not(:first-child) { padding-top: 24px; } } .home__our-services__phinx { background: #eaf3f7; padding: 60px 0; } @media (max-width: 767.98px) { .home__our-services__phinx { padding: 40px 0; } } .home__our-services__phinx h2 { color: #74a1af; text-align: center; } .home__our-services__phinx img { width: 100%; height: 100%; object-fit: cover; } .home__our-services__phinx .container> :first-child { margin-bottom: 40px; } @media (max-width: 767.98px) { .home__our-services__phinx .container> :first-child { margin-bottom: 24px; } } .home__our-services__phinx .carousel-slider .carousel-panel { position: relative; } .home__our-services__phinx .carousel-slider .carousel-panel img { position: absolute; inset: 0; z-index: -100; } .home__our-services__phinx .carousel-slider .carousel-panel div { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 24px; height: 100%; padding: 16px 24px; } .home__our-services__phinx .carousel-slider .carousel-panel div h2 { color: #ffffff; margin: 0px; } .home__our-services__phinx .carousel-slider .carousel-panel div p { flex-grow: 1; color: #ffffff; } .home__our-services__phinx .carousel-slider .carousel-panel div button { color: #74a1af; background: #ffffff; height: 42px; min-width: 165px; padding: 0px 32px; border: none; outline: none; } .home__our-services__phinx .carousel-slider .carousel-panel div button:hover { background: #eff5f7; } .home__our-services__phinx .carousel-slider .carousel-panel div button:active { background: #74a1af; } .home__our-services__phinx .carousel-slider .carousel-panel div p, .home__our-services__phinx .carousel-slider .carousel-panel div button { display: none; } .home__our-services__phinx .carousel-slider .carousel-panel:hover div { background: rgba(116, 161, 175, 0.8980392157); opacity: 0.9; } .home__our-services__phinx .carousel-slider .carousel-panel:hover div p, .home__our-services__phinx .carousel-slider .carousel-panel:hover div button { display: block; } .home__our-services__phinx .carousel-slider { margin-bottom: 0; } .home__our-services__phinx .carousel-slider .slick-slide { height: 587px; } .home__our-services__phinx .carousel-slider .slick-list { height: auto; } .home__our-services__phinx .carousel-slider .slick-slider { margin: 0; } .home__our-services__phinx .carousel-slider .slick-track { display: flex; padding-bottom: 12px; } .home__our-services__phinx .carousel-slider .slick-dots { position: relative; bottom: 0; } .home__our-services__phinx .carousel-slider .slick-dots li { margin-inline: 4px; } .home__our-services__phinx .carousel-slider .slick-dots li button { padding: 0; } .home__our-services__phinx .carousel-slider .slick-dots li button:before { content: ""; } .home__our-services__phinx .carousel-slider .slick-dots li, .home__our-services__phinx .carousel-slider .slick-dots li button, .home__our-services__phinx .carousel-slider .slick-dots li button:before { width: 33.75px; height: 4.43px; background: #e6e7e8; border-radius: 2.22px; opacity: 1; } .home__our-services__phinx .carousel-slider .slick-dots li.slick-active, .home__our-services__phinx .carousel-slider .slick-dots li.slick-active button, .home__our-services__phinx .carousel-slider .slick-dots li.slick-active button:before { width: 33.75px; height: 4.43px; background: #74a1af; border-radius: 2.22px; opacity: 1; } .home__our-doctors__phinx { text-align: center; padding: 60px 0; } @media (max-width: 767.98px) { .home__our-doctors__phinx { padding: 40px 0; } } .home__our-doctors__phinx h2 { color: #74a1af; text-align: center; } .home__our-doctors__phinx p { color: #74a1af; text-align: center; } .home__our-doctors__phinx img { width: 100%; height: 440px; object-fit: cover; } .home__our-doctors__phinx .container> :first-child { margin-bottom: 40px; } @media (max-width: 767.98px) { .home__our-doctors__phinx .container> :first-child { margin-bottom: 24px; } } .home__our-doctors__phinx .doctor-list { display: flex; flex-direction: row; gap: 24px; justify-content: center; } @media (max-width: 767.98px) { .home__our-doctors__phinx .doctor-list { flex-direction: column; } } .home__our-doctors__phinx .doctor-list .doctor-card { display: flex; flex-direction: column; gap: 40px; } .home__our-doctors__phinx .doctor-list .doctor-card .doctor-portrait { position: relative; } .home__our-doctors__phinx .doctor-list .doctor-card .doctor-portrait .doctor-expertise { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); width: max-content; height: 40px; padding: 6px 16px; border-radius: 20px; font-family: "Noto Sans Thai", sans-serif; font-size: 18px; font-weight: 400; font-style: normal; line-height: 150%; text-align: center; color: #ffffff; background: #4793aa; } .wui-contact-section { background: url(/files/media/Media8ebebf329557f82a7e7cc1d0ec75389d.jpg) center/cover no-repeat; min-height: 325px; padding: 60px 0; font-family: "Anuphan", sans-serif; color: #000; display: flex; align-items: center; justify-content: center; text-align: center; } .wui-contact-section .container { padding-left: 230px; padding-right: 230px; } .wui-contact-title { color: var(--White, #FFF); text-align: center; font-family: "Noto Sans Thai"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; text-transform: capitalize; } .wui-contact-text { color: var(--White, #FFF); text-align: center; font-family: "Noto Sans Thai"; font-size: 18px; font-style: normal; font-weight: 700; line-height: 150%; } .wui-contact-btn { background-color: #fff; color: #74A1AF; font-weight: 600; padding: 12px 40px; border: 1px solid var(--Primary, #74A1AF); text-decoration: none; transition: all 0.3s ease; display: inline-block; } .wui-contact-btn:hover { color: #fff; background-color: #74A1AF; border: 1px solid var(--Primary, #398299); text-decoration: none; } @media (max-width: 991.98px) { .wui-contact-section { background: url(/files/media/Mediaaad3667035dbf05e66f093794b615b94.jpg) center/cover no-repeat; } .wui-contact-section .container { padding-left: 30px; padding-right: 30px; } .wui-contact-title { font-size: 32px; } .wui-contact-text { font-size: 14px; } } .about__mission__phinx { padding: 60px 0; } @media (max-width: 767.98px) { .about__mission__phinx { padding: 40px 0; } } .about__mission__phinx .container>.row>[class^="col"] { display: flex; justify-content: start; } .about__mission__phinx .container>.row>[class^="col"]:nth-child(odd) { flex-direction: column-reverse; } .about__mission__phinx .container>.row>[class^="col"]:nth-child(even) { flex-direction: column; } @media (max-width: 767.98px) { .about__mission__phinx .container>.row>[class^="col"]:nth-child(odd), .about__mission__phinx .container>.row>[class^="col"]:nth-child(even) { flex-direction: column; } } .about__mission__phinx .container>.row>[class^="col"]>div { display: flex; flex-direction: column; gap: 24px; padding: 60px 0; } .about__mission__phinx .container>.row>[class^="col"]>div> :first-child { font-weight: 700; color: #74a1af; } .about__mission__phinx .container>.row>[class^="col"]>div> :nth-child(2) { font-weight: 700; color: #74a1af; } .about__mission__phinx .container>.row>[class^="col"]>div> :nth-child(3) { color: #222222; } .about__mission__phinx .container>.row>[class^="col"]>img { width: 100%; height: 486px; object-fit: cover; } @media (max-width: 767.98px) { .about__mission__phinx .container>.row>[class^="col"]+[class^="col"] { margin-top: 20px; } } .wui-how-it-work { background-color: #EAF3F7; } .wui-how-it-work .how-icon { width: 60px; height: auto; } .wui-how-it-work h2 { color: var(--Primary, #74A1AF); text-align: center; font-family: "Noto Sans Thai"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; text-transform: capitalize; } .wui-how-it-work h5 { color: var(--Black, #222); text-align: center; font-family: "Noto Sans Thai"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; text-transform: capitalize; } .wui-how-it-work p { color: var(--Black, #222); text-align: center; font-family: "Noto Sans Thai"; font-size: 18px; font-style: normal; font-weight: 400; line-height: 150%; } @media (max-width: 767.98px) { .wui-how-it-work h2 { font-size: 22px; } .wui-how-it-work h5 { font-size: 16px; } .wui-how-it-work .how-icon { width: 50px; } } .about__core-value__phinx { padding: 60px 0; } @media (max-width: 767.98px) { .about__core-value__phinx { padding: 40px 0; } } .about__core-value__phinx p { color: #74a1af; font-weight: 700; text-align: center; } .about__core-value__phinx .container> :first-child { margin-bottom: 40px; } @media (max-width: 767.98px) { .about__core-value__phinx .container> :first-child { margin-bottom: 24px; } } .about__core-value__phinx .carousel-arrows { color: #4793aa; position: absolute; top: 50%; transform: translate(0, -50%); display: flex; flex-direction: row; justify-content: center; align-items: center; z-index: 10; } .about__core-value__phinx .carousel-arrows:hover, .about__core-value__phinx .carousel-arrows:active { color: #4793aa; } .about__core-value__phinx .carousel-arrows.left { left: 13.75px; } .about__core-value__phinx .carousel-arrows.right { right: 13.75px; } .about__core-value__phinx .carousel-arrows>i { font-size: 24px; } .about__core-value__phinx .carousel-slider { margin-bottom: 0; } .about__core-value__phinx .carousel-slider .slick-slide { margin: 0 15px; } .about__core-value__phinx .carousel-slider .slick-list { height: auto; margin: 0 -15px; } .about__core-value__phinx .carousel-slider .slick-slider { margin: 0; } .about__core-value__phinx .carousel-slider .slick-track { display: flex; } .wui-Sevice-Detail-Service-section { background: #fff; } .wui-Sevice-Detail-Service-section h5 { color: var(--Primary, #74A1AF); font-family: "Noto Sans Thai"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; text-transform: capitalize; } .wui-Sevice-Detail-Service-section h2 { color: var(--Primary, #74A1AF); font-family: "Noto Sans Thai"; font-size: 40px; font-style: normal; font-weight: 700; line-height: 150%; text-transform: capitalize; } .wui-Sevice-Detail-Service-section hr { display: flex; padding-bottom: 24px; flex-direction: column; align-items: flex-start; gap: 24px; align-self: stretch; } .wui-Sevice-Detail-Service-section p { color: var(--Black, #222); font-family: "Noto Sans Thai"; font-size: 18px; font-style: normal; font-weight: 400; line-height: 150%; } .wui-Sevice-Detail-Service-section ul { padding-left: 20px; margin-bottom: 0; } .wui-Sevice-Detail-Service-section ul li { color: var(--Black, #222); font-family: "Noto Sans Thai"; font-size: 18px; font-style: normal; font-weight: 400; line-height: 150%; } @media (max-width: 767.98px) { .wui-Sevice-Detail-Service-section h2 { font-size: 1.5rem; } .wui-Sevice-Detail-Service-section img { margin-bottom: 20px; } } .wui-Sevice-Detail-gallery { font-family: "Prompt", "Noto Sans Thai", sans-serif; color: #333; line-height: 1.8; } .wui-Sevice-Detail-gallery P { color: var(--Black, #222); font-family: "Noto Sans Thai"; font-size: 18px; font-style: normal; font-weight: 400; line-height: 150%; } .wui-Sevice-Detail-gallery img { transition: all 0.3s ease; } .wui-Sevice-Detail-gallery img:hover { transform: scale(1.02); } @media (max-width: 767.98px) { .wui-Sevice-Detail-gallery p { font-size: 16px; } } .doctor__doctor-profile-1__phinx { padding: 60px 0; } @media (max-width: 767.98px) { .doctor__doctor-profile-1__phinx { padding: 40px 0; } } .doctor__doctor-profile-1__phinx h1 { color: #74a1af; margin-bottom: 0; } .doctor__doctor-profile-1__phinx h4 { font-weight: 400; } .doctor__doctor-profile-1__phinx .container > .doctor-panel img { width: 100%; height: 100%; min-height: 600px; object-fit: cover; } @media (max-width: 767.98px) { .doctor__doctor-profile-1__phinx .container > .doctor-panel > * + * { margin-top: 24px; } } .doctor__doctor-profile-1__phinx .container > * + * { margin-top: 16px; } .doctor__doctor-profile-1__phinx .doctor-profile > :first-child { display: flex; flex-direction: row; align-items: center; gap: 16px; margin-bottom: 12px; } @media (max-width: 767.98px) { .doctor__doctor-profile-1__phinx .doctor-profile > :first-child { flex-direction: column; align-items: flex-start; } } .doctor__doctor-profile-1__phinx .doctor-profile > :nth-child(2) { margin-bottom: 21px; } .doctor__doctor-profile-1__phinx .doctor-profile > :nth-child(3) { padding: 32px 24px; border-radius: 50px 50px 0 0; color: #ffffff; background: #74a1af; } .doctor__doctor-profile-1__phinx .doctor-profile ul { padding-left: 28px; } .doctor__doctor-profile-1__phinx .carousel-arrows { color: #4793aa; position: absolute; top: 50%; transform: translate(0, -50%); display: flex; flex-direction: row; justify-content: center; align-items: center; z-index: 10; } .doctor__doctor-profile-1__phinx .carousel-arrows:hover, .doctor__doctor-profile-1__phinx .carousel-arrows:active { color: #4793aa; } .doctor__doctor-profile-1__phinx .carousel-arrows.left { left: 13.75px; } .doctor__doctor-profile-1__phinx .carousel-arrows.right { right: 13.75px; } .doctor__doctor-profile-1__phinx .carousel-arrows > i { font-size: 24px; } .doctor__doctor-profile-1__phinx .carousel-slider { margin-bottom: 0; } .doctor__doctor-profile-1__phinx .carousel-slider .slick-slide { margin: 0 15px; } @media (max-width: 767.98px) { .doctor__doctor-profile-1__phinx .carousel-slider .slick-slide { margin: 0 8px; } } .doctor__doctor-profile-1__phinx .carousel-slider .slick-list { height: auto; margin: 0 -15px; } @media (max-width: 767.98px) { .doctor__doctor-profile-1__phinx .carousel-slider .slick-list { margin: 0 -8px; } } .doctor__doctor-profile-1__phinx .carousel-slider .slick-slider { margin: 0; } .doctor__doctor-profile-1__phinx .carousel-slider .slick-track { display: flex; } .contact__contact-detail__phinx { position: relative; padding: 60px 0; } @media (max-width: 767.98px) { .contact__contact-detail__phinx { padding: 40px 0; } } .contact__contact-detail__phinx .background-image { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -100; object-fit: cover; } .contact__contact-detail__phinx img { width: 100%; height: 100%; object-fit: cover; } .contact__contact-detail__phinx .container { background: #ffffff; } .contact__contact-detail__phinx .container>.row>.contact-container { padding: 60px 0; } @media (max-width: 767.98px) { .contact__contact-detail__phinx .container>.row>.contact-container { padding: 40px 0; } } .contact__contact-detail__phinx .container>.row>.contact-container> :nth-child(2), .contact__contact-detail__phinx .container>.row>.contact-container> :nth-child(4) { margin-top: 40px; } .contact__contact-detail__phinx .container>.row>.contact-container> :nth-child(3) { margin-top: 24px; } .contact__contact-detail__phinx .container>.row>.contact-container .contact-item { display: flex; flex-direction: column; align-items: center; gap: 12px; } .contact__contact-detail__phinx .container>.row>.contact-container .contact-item>p { font-weight: 700; } .contact__contact-detail__phinx .container>.row>.contact-container .contact-item i { font-size: 24px; } .contact__contact-detail__phinx .container>.row>.contact-container .contact-item>div { display: flex; flex-direction: row; justify-content: center; align-items: start; gap: 8px; } .contact__contact-detail__phinx .container>.row>.contact-container .contact-item>div>p { font-weight: 400; } .contact__contact-detail__phinx .container>.row>.contact-container .contact-item>div>img { width: 24px; height: 24px; object-fit: contain; } .contact__contact-detail__phinx .container>.row>.contact-container .social-item { display: flex; flex-direction: column; align-items: center; gap: 24px; } .contact__contact-detail__phinx .container>.row>.contact-container .social-item>p { font-weight: 700; } .contact__contact-detail__phinx .container>.row>.contact-container .social-item>div { display: flex; flex-direction: row; justify-content: center; gap: 24px; } .contact__contact-detail__phinx .container>.row>.contact-container .social-item>div>img { width: 60px; height: 60px; object-fit: contain; } .review-testimonials { padding: 48px 0 64px; } .review-testimonials-container { width: 100%; margin: 0; padding: 0; } .review-testimonials-title { text-align: center; color: #74A1AF; font-family: "Noto Sans Thai"; font-weight: 700; font-size: 32px; margin: 0 0 24px; padding: 0 16px; } .review-testimonials-carousel { position: relative; } .review-testimonials-viewport { overflow: hidden; cursor: grab; padding-left: 16px; padding-right: 16px; } .review-testimonials-viewport:active { cursor: grabbing; } .review-testimonials-track { display: flex; gap: 16px; transition: transform 400ms ease; will-change: transform; } .review-testimonials-card { flex: 0 0 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; flex-shrink: 0; background: #EAF3F7; border-radius: 16px; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.02), 0 8px 24px rgba(0, 0, 0, 0.06); overflow: hidden; user-select: none; width: calc(100% - 32px); max-width: 100%; padding: 12px; } .review-testimonials-card-media { padding: 0; width: 100%; display: flex; justify-content: center; align-items: center; } .review-testimonials-card-media img { width: 100%; max-width: 100%; height: 250px; flex-shrink: 0; object-fit: cover; border-radius: 10px; display: block; user-select: none; -webkit-user-drag: none; -moz-user-select: none; -ms-user-select: none; } .review-testimonials-card-body { padding: 0; width: 100%; align-self: flex-start; } .review-testimonials-eyebrow { font-family: "Noto Sans Thai"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; color: #74A1AF; text-align: left; margin: 0 0 4px; } .review-testimonials-program { font-family: "Noto Sans Thai"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; color: #74A1AF; text-align: left; margin: 0 0 8px; } .review-testimonials-desc { font-family: "Noto Sans Thai"; font-size: 13px; font-style: normal; font-weight: 400; line-height: 150%; color: #222; text-align: left; margin: 0 0 12px; } .review-testimonials-customer { font-family: "Noto Sans Thai"; font-size: 13px; font-style: normal; font-weight: 700; line-height: 150%; color: #222; text-align: left; margin: 0; } .review-testimonials-nav { display: none; position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 999px; border: none; background: rgba(255, 255, 255, 0.9); color: #3d6570; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); cursor: pointer; z-index: 2; } .review-testimonials-nav:hover { background: #fff; } .review-testimonials-nav:active { transform: translateY(-50%) scale(0.98); } .review-testimonials-nav.review-testimonials-prev { left: 8px; } .review-testimonials-nav.review-testimonials-next { right: 8px; } .review-testimonials-dots { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 18px; } .review-testimonials-dot { width: 34px; height: 5px; border-radius: 100px; background: #cddde3; transition: all 200ms ease; border: none; } .review-testimonials-dot.review-testimonials-is-active { background: #74A1AF; border: none; } @media (min-width: 320px) and (max-width: 349px) { .review-testimonials { padding: 40px 0 56px; } .review-testimonials-title { font-size: 28px; margin: 0 0 20px; padding: 0 12px; } .review-testimonials-viewport { padding-left: 16px; padding-right: 16px; } .review-testimonials-track { gap: 12px; } .review-testimonials-card { width: calc(100% - 24px); padding: 12px; gap: 12px; border-radius: 16px; } .review-testimonials-card-media img { height: 220px; border-radius: 8px; } .review-testimonials-card-body { padding: 0 4px; } .review-testimonials-eyebrow { font-size: 13px; } .review-testimonials-program { font-size: 15px; } .review-testimonials-desc { font-size: 12px; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .review-testimonials-customer { font-size: 12px; } .review-testimonials-dots { margin-top: 16px; } } @media (min-width: 350px) and (max-width: 699px) { .review-testimonials-title { font-size: 36px; padding: 0 20px; } .review-testimonials-card { width: calc(100% - 40px); max-width: 338px; padding: 16px; align-items: center; } .review-testimonials-viewport { padding-left: 20px; padding-right: 20px; } .review-testimonials-track { gap: 20px; } .review-testimonials-card-media { width: 100%; display: flex; justify-content: center; align-items: center; padding: 0; } .review-testimonials-card-media img { width: 100%; max-width: 100%; height: 280px; object-fit: cover; border-radius: 10px; } .review-testimonials-card-body { width: 100%; padding: 0; align-self: flex-start; } .review-testimonials-desc { display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } } @media (min-width: 700px) and (max-width: 1199px) { .review-testimonials-card { flex: 0 0 calc((100% - 24px) / 2); align-items: center; max-height: fit-content; } .review-testimonials-viewport { padding-left: 20px; padding-right: 20px; } .review-testimonials-card-media { width: 100%; display: flex; justify-content: center; align-items: center; padding: 16px 16px 0 16px; } .review-testimonials-card-media img { width: 100%; max-width: 100%; height: 390px; object-fit: cover; border-radius: 12px; } .review-testimonials-card-body { width: 100%; padding: 20px 24px 24px; align-self: flex-start; } .review-testimonials-desc { display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } } @media (min-width: 1200px) { .review-testimonials { padding: 56px 0 72px; } .review-testimonials-title { font-size: 40px; margin: 0 0 28px; padding: 0; } .review-testimonials-viewport { width: 100%; margin: 0; padding-left: max(20px, calc((100% - (519px * 2 + 24px)) / 2)); padding-right: max(20px, calc((100% - (519px * 2 + 24px)) / 2)); } .review-testimonials-track { gap: 24px; justify-content: flex-start; } .review-testimonials-card { flex: 0 0 519px; display: flex; flex-direction: row; width: 519px; padding: 24px; align-items: flex-start; gap: 24px; border-radius: 20px; } .review-testimonials-card-media { padding: 0; flex: 1; min-width: 0; } .review-testimonials-card-media img { width: 100%; height: 300px; border-radius: 12px; object-fit: cover; } .review-testimonials-card-body { padding: 0; flex: 1; min-width: 0; display: flex; flex-direction: column; } .review-testimonials-eyebrow { font-size: 16px; margin: 0 0 6px; } .review-testimonials-program { font-size: 18px; margin: 0 0 10px; } .review-testimonials-desc { font-size: 14px; margin: 0 0 14px; max-height: 225px; display: -webkit-box; -webkit-line-clamp: 9; line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.5; } .review-testimonials-customer { font-size: 14px; } .review-testimonials-nav.review-testimonials-prev { left: 24px; } .review-testimonials-nav.review-testimonials-next { right: 24px; } .review-testimonials-dots { margin-top: 18px; } } .vivere-revire-before-after-section { width: 100%; } .vivere-revire-before-after-container { max-width: 1320px; margin: 0 auto; padding: 0; } .vivere-revire-before-after-title { color: var(--Primary, #74A1AF); text-align: center; font-family: "Noto Sans Thai"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; text-transform: capitalize; margin-bottom: 40px; } .vivere-brand-slideshow { width: 100%; margin: 0 auto; } .vivere-brand-slideshow .slick-slide { padding: 10px; box-sizing: border-box; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 24px; height: auto; min-height: 0; } .vivere-brand-slideshow .slick-slide>div { height: 100%; display: flex; flex-direction: column; justify-content: flex-start; } .vivere-brand-slideshow .ba-card { margin-bottom: 22px; } .vivere-brand-slideshow .ba-card:last-child { margin-bottom: 0 !important; } .vivere-brand-slideshow__slide-container { width: 100%; max-width: 190px; height: 120px; overflow: hidden; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; } @media (max-width: 768px) { .vivere-brand-slideshow .slick-slide { padding: 0 8px; } .vivere-brand-slideshow__slide-container { margin: 0 auto 15px; } } @media (max-width: 480px) { .vivere-brand-slideshow .slick-slide { padding: 0 5px; } } .vivere-brand-slideshow__slide-container img { width: 100%; height: 100%; object-fit: contain; } .ba-card { display: flex; width: 100%; max-width: 424px; min-width: 340px; box-sizing: border-box; padding: 16px 16px 20px 16px; flex-direction: column; align-items: flex-start; gap: 16px; flex-shrink: 0; border-radius: 20px; background: var(--Primary03, #89BECE); margin-left: auto; margin-right: auto; } .vivere-brand-slideshow .slick-slide .ba-card:not(:last-child) { margin-bottom: 40px; } .ba-card__images { display: flex; width: 100%; max-width: 392px; height: 278px; align-items: flex-start; overflow: hidden; border-radius: 12px; margin: 0 auto; } .ba-card__image { position: relative; width: 50%; height: 100%; } .ba-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; } .ba-card__label { position: absolute; left: 12px; bottom: 12px; color: var(--White, #fff); text-align: center; font-family: "Noto Sans Thai"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; text-transform: capitalize; } .ba-card__tags { --ba-tag-height: 35px; display: flex; flex-wrap: wrap; column-gap: 8px; row-gap: 16px; max-height: calc((var(--ba-tag-height) * 2) + 20px); min-height: calc((var(--ba-tag-height) * 2) + 16px); overflow: hidden; position: relative; } .ba-card__tags.is-clamped::after { content: '...'; position: absolute; right: 8px; bottom: 8px; color: var(--Primary04, #4793AA); font-family: "Noto Sans Thai"; font-size: 18px; font-weight: 700; line-height: 1; padding-left: 6px; background: linear-gradient(90deg, rgba(137, 190, 206, 0) 0%, var(--Primary03, #89BECE) 28%); } .ba-tag { display: flex; height: var(--ba-tag-height); padding: 0 12px; justify-content: center; align-items: center; gap: 10px; border-radius: 20px; border: 1px solid var(--White, #FFF); background: var(--White, #FFF); color: var(--Primary04, #4793AA); text-align: center; font-family: "Noto Sans Thai"; font-size: 18px; font-style: normal; font-weight: 400; line-height: 150%; white-space: nowrap; } .vivere-brand-slideshow .slick-dots { position: relative; display: block !important; width: 100%; padding: 0; margin: 10px 0 0 0; list-style: none; text-align: center; } .vivere-brand-slideshow .slick-dots li { position: relative; display: inline-block; width: 33px; height: 5px; margin: 0 2px; padding: 0; cursor: pointer; } .vivere-brand-slideshow .slick-dots li button { font-size: 0; line-height: 0; display: block; width: 33px; height: 5px; padding: 0; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; border-radius: 100px; transition: all 0.3s ease; } .vivere-brand-slideshow .slick-dots li button:before { content: ''; position: absolute; top: 0; left: 0; width: 33px; height: 5px; background-color: #E6E7E8; border-radius: 100px; transition: all 0.3s ease; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .vivere-brand-slideshow .slick-dots li.slick-active button:before { background-color: #74A1AF; } .vivere-brand-slideshow .slick-dots li:hover button:before { background-color: #74A1AF; opacity: 0.7; } @media (max-width: 1024px) { .ba-card { width: 100%; } .ba-card__images { width: 100%; height: 278px; } } @media (max-width: 768px) { .ba-card { display: flex; padding: 16px 16px 20px 16px; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .ba-card__images { height: 240px; width: 100%; max-width: 100%; } .vivere-brand-slideshow .slick-slide { padding: 8px; gap: 16px; } } @media (max-width: 480px) { .ba-card__images { height: 210px; } } .vivere-contact-faq-section { display: flex; flex-direction: column; align-items: center; padding: 60px 0; gap: 24px; background-color: #EAF3F7; } .vivere-contact-faq-container { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 1320px; gap: 40px; } .vivere-contact-faq-item-wrapper { background-color: #fff; padding: 16px; border-radius: 10px; width: 100%; } .vivere-faq-main-title { color: var(--Primary, #74A1AF); text-align: center; font-family: "Noto Sans Thai"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; text-transform: capitalize; } .vivere-contact-faq-item { width: 100%; border-bottom: 1px solid #74A1AF; } .vivere-faq-header { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 16px 0; cursor: pointer; transition: background-color 0.3s ease; user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .vivere-faq-title { color: var(--Black, #222); font-family: "Noto Sans Thai"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; margin: 0; } .vivere-faq-title:hover { color: #74A1AF; } .vivere-faq-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: #74A1AF; font-size: 24px; font-weight: 700; transition: transform 0.3s ease; } .vivere-faq-icon:hover { color: #A8D9E0; } .vivere-faq-content { max-height: 0; overflow: hidden; opacity: 0; padding-top: 0; transition: max-height 0.5s ease, padding-top 0.5s ease, opacity 0.3s ease; } .vivere-faq-content.open { opacity: 1; } .vivere-faq-section { display: flex; flex-direction: column; gap: 16px; padding-bottom: 16px; } .vivere-faq-subtitle { color: #222; font-family: "Noto Sans Thai"; font-size: 16px; font-weight: 700; line-height: 150%; margin-bottom: 8px; } .vivere-faq-list { list-style: none; padding: 0; margin: 0; width: 100%; } .vivere-faq-list li { position: relative; color: #222; font-family: "Noto Sans Thai"; font-size: 16px; font-weight: 400; line-height: 150%; padding-left: 20px; margin-bottom: 8px; } .vivere-faq-list li::before { content: "•"; color: #74A1AF; font-weight: bold; position: absolute; left: 0; } .vivere-faq-list li:last-child { margin-bottom: 0; } @media (max-width: 1024px) and (min-width: 769px) { .vivere-contact-faq-section { padding: 50px 24px; } .vivere-contact-faq-container { max-width: 100%; padding: 0 16px; } .vivere-faq-header { padding: 20px 0; min-height: 60px; position: relative; z-index: 1; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .vivere-faq-title { font-size: 20px; pointer-events: none; } .vivere-faq-subtitle { font-size: 20px; } .vivere-faq-list li { font-size: 19px; padding-left: 16px; } .vivere-faq-icon { width: 36px; height: 36px; font-size: 26px; min-width: 36px; min-height: 36px; pointer-events: none; flex-shrink: 0; } } @media (max-width: 768px) { .vivere-contact-faq-section { padding: 40px 16px; } .vivere-contact-faq-container { padding: 0; } .vivere-faq-header { padding: 16px 0; min-height: 50px; } .vivere-faq-title { font-size: 16px; } .vivere-faq-subtitle { font-size: 16px; } .vivere-faq-list li { font-size: 16px; padding-left: 16px; } .vivere-faq-icon { width: 32px; height: 32px; font-size: 24px; min-width: 32px; min-height: 32px; } } @media (max-width: 480px) { .vivere-contact-faq-section { padding: 40px 16px; } .vivere-faq-header { padding: 16px 0; min-height: 44px; } .vivere-faq-title { font-size: 16px; } .vivere-faq-subtitle { font-size: 16px; } .vivere-faq-list li { font-size: 16px; padding-left: 16px; } .vivere-faq-icon { width: 28px; height: 28px; font-size: 20px; min-width: 28px; min-height: 28px; } } .section-owner-youtube { < !-- background-color: #EAF3F7; --> } .section-owner-youtube .custom-container { max-width: 1320px; padding: 60px 0; margin: auto; } @media screen and (max-width: 576px) { .section-owner-youtube .custom-container { padding: 30px 16px; } } .section-owner-youtube .custom-container .video-box { background: #d9d9d9; width: 100%; margin-bottom: 20px; position: relative; } .section-owner-youtube .wui-text-title { color: var(--Primary, #74A1AF); text-align: center; font-family: "Noto Sans Thai"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; text-transform: capitalize; padding-bottom: 60px; }