@-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%; } } .section-homepage-ourservices .bg-image { position: relative; background-image: url("/files/media/Media1f0bbd0bb13083a1d0ce6c38dd34d91f.jpg"); background-size: cover; background-position: center; background-attachment: fixed; z-index: 1; } .section-homepage-ourservices .bg-image::before { content: ""; position: absolute; inset: 0; background-color: rgba(255, 255, 255, 0.57); z-index: -1; } .section-homepage-ourservices .custom-container { max-width: 1320px; margin: auto; padding: 60px 40px; } @media screen and (max-width: 992px) { .section-homepage-ourservices .custom-container { padding: 60px 0px; } } .section-homepage-ourservices .custom-container .header-title p { text-align: center; font-size: 32px; font-weight: 700; line-height: 150%; margin-bottom: 24px; } .section-homepage-ourservices .custom-container .header-title .section-subtitle { font-size: 16px; font-weight: 400; line-height: 150%; margin-bottom: 24px; } .section-homepage-ourservices .custom-container .header-title .section-title { font-size: 24px; font-weight: 400; line-height: 150%; color: #c89868; font-family: "Pridi", sans-serif; } @media screen and (max-width: 576px) { .section-homepage-ourservices .custom-container .services-slick .slick-list { margin-left: 16px; } } .section-homepage-ourservices .custom-container .services-slick .slick-dots { bottom: -36px; } .section-homepage-ourservices .custom-container .services-slick .slick-dots li { width: 34px; height: 5px; background: #b0b5c5; } .section-homepage-ourservices .custom-container .services-slick .slick-dots li button { width: 34px; height: 5px; background: #b0b5c5; border-radius: 20px; padding: 0; } .section-homepage-ourservices .custom-container .services-slick .slick-dots li button::before { font-size: 0px; } .section-homepage-ourservices .custom-container .services-slick .slick-dots li.slick-active { width: 34px; height: 5px; background: #33bfea; } .section-homepage-ourservices .custom-container .services-slick .slick-dots li.slick-active button { width: 34px; height: 4.5px; background: #33bfea; border-radius: 20px; padding: 0; } .section-homepage-ourservices .custom-container .services-slick .slick-dots li.slick-active button::before { font-size: 0px; } .section-homepage-ourservices .custom-container .services-slick .services-items { display: flex; flex-direction: column; margin: 0 8px; background: #b0b5c5; } .section-homepage-ourservices .custom-container .services-slick .services-items img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; } .section-homepage-ourservices .custom-container .services-slick .services-items .product-info { display: flex; flex-direction: column; padding: 16px; background-color: #fff; } .section-homepage-ourservices .custom-container .services-slick .services-items .product-info .head-title { text-align: center; font-size: 24px; line-height: 150%; font-weight: 700; color: #33bfea; } .section-homepage-ourservices .custom-container .services-slick .services-items .product-info .btn-product { text-align: center; border: 1px solid #33bfea; border-radius: 5px; padding: 8px 16px; color: #33bfea; font-size: 16px; } .section-homepage-ourservices .custom-container .services-slick .services-items .product-info .btn-product:hover { text-decoration: none; color: #fff; background-color: #33bfea; } .section-shop { font-family: "Outfit", sans-serif; background-color: #f0fcff; padding: 40px; } .section-shop .custom-container { max-width: 1320px; padding: 0; margin: auto; } .section-shop .custom-container .content-ohm { padding-top: 60px; padding-bottom: 60px; } @media screen and (max-width: 576px) { .section-shop .custom-container .content-ohm { padding: 30px 0px; } } .section-shop .custom-container .content-ohm .header-title { margin-bottom: 24px; } .section-shop .custom-container .content-ohm .header-title p { font-size: 24px; line-height: 150%; font-weight: 700; color: #000; margin-bottom: 12px; } .section-shop .custom-container .content-ohm .header-title h3 { font-size: 32px; line-height: 150%; font-weight: 700; color: #000; margin: 0; } .section-shop .custom-container .content-ohm .img-items img { width: 100%; max-width: 252px; height: auto; } .section-shop .custom-container .content-ohm .description { margin-top: 16px; } .section-shop .custom-container .content-ohm .description .title-top { font-size: 18px; line-height: 150%; font-weight: 400; color: #000; margin-bottom: 8px; } .section-shop .custom-container .content-ohm .description .title-under { font-size: 18px; line-height: 150%; font-weight: 700; color: #000; margin-bottom: 0px; } .section-image-slider .slider-wrapper { overflow: hidden; } .section-image-slider .slider-wrapper .video-slider-right, .section-image-slider .slider-wrapper .video-slider-left { max-height: 455px; overflow: hidden; } .section-image-slider .slider-wrapper .video-slider-right .slick-slide img, .section-image-slider .slider-wrapper .video-slider-right .slick-slide video, .section-image-slider .slider-wrapper .video-slider-left .slick-slide img, .section-image-slider .slider-wrapper .video-slider-left .slick-slide video { width: 100%; height: 100%; object-fit: contain; display: block; } .section-image-slider .slider-wrapper .video-slider-right .slick-dots, .section-image-slider .slider-wrapper .video-slider-right .slick-arrow, .section-image-slider .slider-wrapper .video-slider-left .slick-dots, .section-image-slider .slider-wrapper .video-slider-left .slick-arrow { display: none !important; } .section-performance1 { font-family: "Outfit", sans-serif; } .section-performance1 .custom-container { max-width: 1320px; padding: 60px 0; margin: auto; } @media screen and (max-width: 991px) { .section-performance1 .custom-container { padding: 30px 16px; } } .section-performance1 .custom-container .head-title { font-size: 32px; line-height: 150%; font-weight: 700; color: #000; margin: 12px; } .section-performance1 .custom-container .title-sku { font-size: 18px; line-height: 150%; font-weight: 700; color: #000; margin: 12px; } .section-performance1 .custom-container .title-price { font-size: 24px; line-height: 150%; font-weight: 700; color: #000; margin: 0; } .section-performance2 { font-family: "Outfit", sans-serif; } .section-performance2 .custom-container { max-width: 1320px; padding: 60px 0; margin: auto; } @media screen and (max-width: 991px) { .section-performance2 .custom-container { padding: 30px 16px; } } .section-performance2 .custom-container .content-ohm .title-blue { font-size: 24px; line-height: 150%; font-weight: 700; color: #33bfea; margin: 0; } .section-performance3 { font-family: "Outfit", sans-serif; } .section-performance3 .custom-container { max-width: 1320px; padding: 60px 0; margin: auto; } @media screen and (max-width: 991px) { .section-performance3 .custom-container { padding: 30px 16px; } } .section-performance3 .custom-container .space-gap { display: flex; flex-direction: column; gap: 40px; } .section-performance3 .custom-container .space-gap .items-block .title { font-size: 24px; line-height: 150%; font-weight: 700; color: black; margin: 0; } .section-science-detail { font-family: "Outfit", sans-serif; } .section-science-detail .custom-container { max-width: 1320px; padding: 60px 0; margin: auto; } @media screen and (max-width: 991px) { .section-science-detail .custom-container { padding: 30px 16px; } } .section-science-detail .custom-container .header-page .title { font-size: 32px; line-height: 150%; font-weight: 700; color: #000; margin: 0; } .section-science-detail .custom-container .content-page .info { font-size: 16px; line-height: 150%; font-weight: 400; color: #000; margin-bottom: 24px; } .section-science-detail .custom-container .content-page .header-name-content { font-size: 24px; line-height: 150%; font-weight: 700; color: #33bfea; margin-bottom: 0px; } .section-science-detail .custom-container .content-page .item-ul p { font-size: 16px; line-height: 150%; font-weight: 700; color: #000; } .section-science-detail2 { font-family: "Outfit", sans-serif; } .section-science-detail2 .custom-container { max-width: 1320px; padding: 60px 0; margin: auto; } @media screen and (max-width: 991px) { .section-science-detail2 .custom-container { padding: 30px 16px; } } .section-science-detail2 .custom-container .header-page .title { font-size: 32px; line-height: 150%; font-weight: 700; color: #000; margin: 0; } .section-science-detail2 .custom-container .content-page .info { font-size: 16px; line-height: 150%; font-weight: 400; color: #000; margin-bottom: 24px; } .section-science-detail2 .custom-container .content-page .header-name-content { font-size: 24px; line-height: 150%; font-weight: 700; color: #33bfea; margin-bottom: 0px; } .section-science-detail2 .custom-container .content-page .item-ul p { font-size: 16px; line-height: 150%; font-weight: 700; color: #000; } .section-get-started { font-family: "Outfit", sans-serif; } .section-get-started .custom-container { max-width: 1320px; padding: 60px 0; margin: auto; } @media screen and (max-width: 991px) { .section-get-started .custom-container { padding: 30px 16px; } } .section-get-started .custom-container .header-page { padding-bottom: 20px; border-bottom: 1px solid #d9d9d9; } .section-get-started .custom-container .header-page .get-started-title { font-size: 24px; line-height: 150%; font-weight: 700; color: #33bfea; margin-bottom: 12px; } .section-get-started .custom-container .header-page .get-started-subtitle { font-size: 32px; line-height: 150%; font-weight: 700; color: #000; margin: 0; } .section-get-started .custom-container .content-page .info { font-size: 16px; line-height: 150%; font-weight: 400; color: #000; margin-bottom: 24px; } .section-get-started .custom-container .content-page .header-name-content { font-size: 24px; line-height: 150%; font-weight: 400; color: #33bfea; margin-bottom: 0px; } .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 .custom-container .video-box::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-size: 40px 28px; width: 40px; height: 28px; } .section-owner-ice-bath { font-family: "Outfit", sans-serif; } .section-owner-ice-bath .items-left { display: flex; align-items: center; background-color: #1ca3cd; } .section-owner-ice-bath .items-left .content-info { padding: 0 30px; } @media screen and (max-width: 576px) { .section-owner-ice-bath .items-left .content-info { padding: 16px; } } .section-owner-ice-bath .items-left .content-info .title { font-size: 24px; line-height: 150%; font-weight: 700; color: #fff; margin-bottom: 24px; } .section-owner-ice-bath .items-left .content-info .description { font-size: 16px; line-height: 150%; font-weight: 400; color: #fff; } .section-owner-ice-bath .items-right { display: flex; align-items: center; background-color: #64A1B7; } .section-owner-ice-bath .items-right .content-info2 { padding: 0 30px; } @media screen and (max-width: 576px) { .section-owner-ice-bath .items-right .content-info2 { padding: 16px; } } .section-owner-ice-bath .items-right .content-info2 .title { font-size: 24px; line-height: 150%; font-weight: 700; color: #fff; margin-bottom: 24px; } .section-owner-ice-bath .items-right .content-info2 .description { font-size: 16px; line-height: 150%; font-weight: 400; color: #fff; } .section-owner-ice-bath .img-cover { width: 100%; max-width: 100%; height: auto; object-fit: cover; display: block; } @media screen and (max-width: 576px) { .section-owner-ice-bath .img-cover { width: 100%; max-width: 100%; height: auto; } } .section-owner-ice-bath, .section-owner-ice-bath * { margin: 0; padding: 0; box-sizing: border-box; } .section-faq { font-family: "Outfit", sans-serif; background-color: #f0fcff; } .section-faq .custom-container { max-width: 1320px; padding: 60px 0; margin: auto; } @media screen and (max-width: 991px) { .section-faq .custom-container { padding: 30px 16px; } } .section-faq .faq-heading { font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; } .section-faq .custom-container .accordion .card { margin-bottom: 1rem; border: none; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); overflow: hidden; } .section-faq .custom-container .accordion .card-header { position: relative; background-color: #fff; border: none; padding: 16px 24px; } @media screen and (max-width: 576px) { .section-faq .custom-container .accordion .card-header { padding: 16px; } } .section-faq .custom-container .accordion .card-body { padding: 16px 24px 24px; } .section-faq .custom-container .accordion .card-header .btn-link { position: relative; display: block; width: 100%; text-align: left; background: transparent !important; border: none !important; box-shadow: none !important; cursor: pointer; font-weight: 700; font-size: 16px; line-height: 150%; color: #000000; padding: 0 2rem 0 0; text-decoration: none !important; outline: none !important; white-space: normal; word-break: break-word; } @media screen and (max-width: 576px) { .section-faq .custom-container .accordion .card-header .btn-link { white-space: normal; word-break: break-word; } } .section-faq .custom-container .accordion .card-header .btn-link:hover, .section-faq .custom-container .accordion .card-header .btn-link:focus, .section-faq .custom-container .accordion .card-header .btn-link:active { background: transparent !important; border: none !important; box-shadow: none !important; text-decoration: none !important; outline: none !important; } .section-faq .custom-container .accordion .card-header .btn-link::after { content: ""; position: absolute; right: 10px; top: 50%; transform: translateY(-50%) rotate(0deg); width: 12px; height: 12px; background-image: url("/files/media/Mediad4ca0cde2a147ad430b773b55e0907b7.png"); background-size: contain; background-repeat: no-repeat; transition: transform 0.3s ease; } .section-faq .custom-container .accordion .card-header .btn-link[aria-expanded="true"]::after { transform: translateY(-50%) rotate(90deg); } .section-about-our-history { font-family: "Outfit", sans-serif; } .section-about-our-history .custom-container { max-width: 1320px; padding: 60px 0; margin: auto; } @media screen and (max-width: 576px) { .section-about-our-history .custom-container { padding: 30px 16px; } } .section-about-our-history .custom-container .about-content .about-header { font-size: 24px; line-height: 150%; font-weight: 700; color: #000; margin-bottom: 12px; } .section-about-our-history .custom-container .about-content .about-title { font-size: 32px; line-height: 150%; font-weight: 700; color: #33bfea; margin-bottom: 24px; } .section-about-our-history .custom-container .about-content .about-description { font-size: 16px; line-height: 150%; font-weight: 400; color: #000; } .section-about-our-mission { font-family: "Outfit", sans-serif; } .section-about-our-mission .items-left { display: flex; align-items: center; background-color: #1ca3cd; } .section-about-our-mission .items-left .content-info { padding: 0 30px; } @media screen and (max-width: 576px) { .section-about-our-mission .items-left .content-info { padding: 16px; } } .section-about-our-mission .items-left .content-info .title { font-size: 24px; line-height: 150%; font-weight: 700; color: #fff; margin-bottom: 24px; } .section-about-our-mission .items-left .content-info .description { font-size: 16px; line-height: 150%; font-weight: 400; color: #fff; } .section-about-our-mission .items-right { display: flex; align-items: center; background-color: #64A1B7; } .section-about-our-mission .items-right .content-info2 { padding: 0 30px; } @media screen and (max-width: 576px) { .section-about-our-mission .items-right .content-info2 { padding: 16px; } } .section-about-our-mission .items-right .content-info2 .title { font-size: 24px; line-height: 150%; font-weight: 700; color: #fff; margin-bottom: 24px; } .section-about-our-mission .items-right .content-info2 .description { font-size: 16px; line-height: 150%; font-weight: 400; color: #fff; } .section-about-our-mission .img-cover { width: 100%; max-width: 100%; height: auto; object-fit: cover; display: block; } @media screen and (max-width: 576px) { .section-about-our-mission .img-cover { width: 100%; max-width: 100%; height: auto; } } .section-about-our-mission, .section-about-our-mission * { margin: 0; padding: 0; box-sizing: border-box; } .circle-icon { width: 88px; height: 88px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .about-us { font-family: "Outfit", "Noto Sans Thai", sans-serif; } .about-us .text-header { font-size: 32px; font-weight: 700; color: #33BFEA; } .about-us .text-semi { font-size: 18px; font-weight: 400; } .about-us .title-header { font-size: 16px; font-weight: 700; line-height: 150%; color: black; } .about-us .title-info { font-size: 16px; font-weight: 400; line-height: 150%; color: black; } @media screen and (max-width: 576px) { .about-us .text-header { font-size: 24px; } .about-us .text-semi { font-size: 16px; } } .about-us, .about-us * { margin: 0; padding: 0; box-sizing: border-box; } .section-affiliate-program { font-family: "Outfit", sans-serif; } .section-affiliate-program .custom-container { max-width: 1320px; padding: 60px 0; margin: auto; } @media screen and (max-width: 576px) { .section-affiliate-program .custom-container { padding: 30px 16px; } } .section-affiliate-program .custom-container .partner-content .partner-header { font-size: 24px; line-height: 150%; font-weight: 700; color: #000; margin-bottom: 12px; } .section-affiliate-program .custom-container .partner-content .partner-title { font-size: 32px; line-height: 150%; font-weight: 700; color: #33bfea; margin-bottom: 24px; } .section-affiliate-program .custom-container .partner-content .partner-description { font-size: 16px; line-height: 150%; font-weight: 400; color: #000; } .section-affiliate-program .custom-container .partner-content .title-like { font-size: 16px; line-height: 150%; font-weight: 700; color: #000; margin-bottom: 0px; } .section-affiliate-program .custom-container .partner-content .button-contact { display: inline-block; padding: 9px 32px; background-color: #33bfea; color: #fff; text-align: center; line-height: 150%; font-size: 16px; font-weight: 400; border-radius: 5px; text-decoration: none; margin-top: 24px; } .section-affiliate-program .img-cover { width: 100%; height: 100%; object-fit: cover; } */ .section-affiliate-partner { font-family: "Outfit", sans-serif; } .section-affiliate-partner .items-left { display: flex; align-items: center; background-color: #1ca3cd; } .section-affiliate-partner .items-left .content-info { padding: 0 30px; } @media screen and (max-width: 576px) { .section-affiliate-partner .items-left .content-info { padding: 16px; } } .section-affiliate-partner .items-left .content-info .title { font-size: 24px; line-height: 150%; font-weight: 700; color: #fff; margin-bottom: 24px; } .section-affiliate-partner .items-left .content-info .description { font-size: 16px; line-height: 150%; font-weight: 400; color: #fff; } .section-affiliate-partner .img-cover { width: 100%; height: 100%; object-fit: cover; } .section-how-work { font-family: "Outfit", sans-serif; background-color: #f0fcff; } .section-how-work .custom-container { max-width: 1320px; margin: auto; padding: 60px 20px; } .section-how-work .custom-container .mission-header { text-align: center; margin-bottom: 60px; } @media screen and (max-width: 991px) { .section-how-work .custom-container .mission-header { margin-bottom: 24px; } } .section-how-work .custom-container .mission-header .subtitle { font-size: 32px; font-weight: 700; line-height: 150%; color: black; margin-bottom: 12px; } .section-how-work .custom-container .mission-header .title { color: #33bfea; font-size: 32px; font-weight: 700; line-height: 150%; margin: 0; } .section-how-work .custom-container .mission-timeline { position: relative; } .section-how-work .custom-container .mission-item { display: flex; align-items: flex-start; margin-bottom: 60px; position: relative; height: 333px; } .section-how-work .custom-container .mission-item .mission-center { flex: 0 0 10%; display: flex; flex-direction: column; justify-content: center; align-items: center; justify-content: space-between; height: 100%; z-index: 2; } .section-how-work .custom-container .mission-item .mission-center .mission-number { width: 60px; height: 60px; background-color: #33bfea; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 18px; position: relative; z-index: 3; } .section-how-work .custom-container .mission-item .mission-center .line-vertical { display: flex; padding-bottom: 20px; left: 48px; width: 1px; height: 70%; bottom: 0px; border: 2px solid #33bfea; } @media screen and (max-width: 1440px) { .section-how-work .custom-container .mission-item .mission-center .line-vertical { left: 28px; } } @media screen and (max-width: 576px) { .section-how-work .custom-container .mission-item .mission-center .line-vertical { left: 23px; } } @media screen and (max-width: 991.98px) { .section-how-work .custom-container .mission-item { height: auto; } } .section-how-work .custom-container .mission-left { flex: 0 0 45%; padding-top: 16px; } .section-how-work .custom-container .mission-left .line-vertical { display: flex; position: absolute; padding-bottom: 20px; left: 44px; width: 1px; height: 70%; bottom: 0px; border: 2px solid #33bfea; } @media screen and (max-width: 576px) { .section-how-work .custom-container .mission-left .line-vertical { height: 75%; left: 28px; } } .section-how-work .custom-container .mission-left .mission-number { width: 60px; height: 60px; background-color: #33bfea; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 22px; position: relative; z-index: 3; } .section-how-work .custom-container .mission-right { padding-top: 16px; padding-left: 30px; } .section-how-work .custom-container .mission-item:first-child .mission-number { margin-top: 0; } .section-how-work .custom-container .mission-content h3 { color: #33bfea; font-size: 24px; font-weight: 700; margin-bottom: 15px; } .section-how-work .custom-container .mission-content p { color: #333333; font-size: 16px; font-weight: 400; line-height: 150%; margin: 0; } @media (max-width: 991.98px) { .section-how-work .custom-container {} .section-how-work .custom-container .section-aboutus-our-mission { padding: 50px 0; } .section-how-work .custom-container .mission-timeline::before { left: 45px; } .section-how-work .custom-container .mission-item { flex-direction: row; margin-bottom: 50px; } .section-how-work .custom-container .mission-left { flex: 0 0 15%; padding-right: 20px; display: flex; justify-content: center; } .section-how-work .custom-container .mission-center { display: none; } .section-how-work .custom-container .mission-right { padding-right: 20px; padding-left: 10px; } .section-how-work .custom-container .mission-number { margin-top: 10px; width: 50px; height: 50px; font-size: 16px; } .section-how-work .custom-container .content-left, .section-how-work .custom-container .content-right { text-align: left; } .section-how-work .custom-container .mobile-content h3 { font-size: 24px; font-weight: 700; color: #33bfea; margin-top: 16px; margin-bottom: 16px; } } @media (max-width: 768px) { .section-how-work .custom-container .mission-header .title { font-size: 24px; } .section-how-work .custom-container .mission-timeline::before { left: 25px; } .section-how-work .custom-container .mission-left { flex: 0 0 12%; padding-right: 15px; } .section-how-work .custom-container .mission-right { padding-right: 0px; padding-left: 0px; } } .section-contactus { font-family: "Noto Sans Thai", sans-serif; background-image: url("/files/media/Media6644cc5175a924ff652d38bd7aabb2db.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; } .section-contactus .custom-container { max-width: 1320px; padding: 60px 0; margin: auto; } .section-contactus .custom-container .contactus-content { background-color: rgba(15, 140, 186, 0.71); } .section-contactus .custom-container .contactus-content .space { padding: 60px; } .section-contactus .custom-container .contactus-content .tophead { color: var(--White, #FFF); font-size: 40px; font-style: normal; font-weight: 700; line-height: 150%; } .section-contactus .custom-container .contactus-content .contactus-info { background-color: #0f8cba; display: flex; align-items: center; } .section-contactus .custom-container .contactus-content .contactus-info .contactus-info-content { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 25px; margin: auto; gap: 40px; } .section-contactus .custom-container .contactus-content .contactus-info .contactus-info-content .contactus-info-detail .items-list { display: flex; gap: 16px; } .section-contactus .custom-container .contactus-content .contactus-info .contactus-info-content .contactus-info-detail .items-list img { width: 24px; height: 24px; } .section-contactus .custom-container .contactus-content .contactus-info .contactus-info-content .contactus-info-detail .items-list .title { font-size: 16px; line-height: 150%; font-weight: 700; color: #fff; min-width: 100px; } .section-contactus .custom-container .contactus-content .contactus-info .contactus-info-content .contactus-info-detail .items-list .description { font-size: 16px; line-height: 150%; font-weight: 400; color: #fff; } .description a { color: #fff; } .coldtubb-preview-section, .coldtubb-preview-section * { box-sizing: border-box; } .coldtubb-preview-section { display: flex; padding: 60px 0 40px 0; flex-direction: column; align-items: center; gap: 40px; align-self: stretch; color: #102537; font-family: "Outfit", sans-serif; } .coldtubb-preview-container { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; width: 100%; max-width: 1320px; padding-bottom: 40px; position: relative; } .coldtubb-preview-container::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, rgba(51, 191, 234, 0) 0%, #33bfea 50%, rgba(51, 191, 234, 0) 100%); } .coldtubb-preview-header { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; text-align: center; } .coldtubb-preview-main-title { color: #000; font-family: "Outfit", sans-serif; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; margin: 0; } .coldtubb-preview-main-price { color: #000; font-family: "Outfit", sans-serif; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; margin: 0; } .coldtubb-preview-price-chiller { color: #000; text-align: center; font-family: "Outfit", sans-serif; font-size: 18px; font-style: normal; font-weight: 400; line-height: 150%; margin: 0; max-width: 720px; } .coldtubb-preview-grid { display: flex; width: 1320px; max-width: 100%; justify-content: center; align-items: center; gap: 24px; } .coldtubb-preview-media { display: flex; flex-direction: column; align-items: stretch; gap: 24px; flex: 0 0 calc(50% - 12px); max-width: calc(50% - 12px); } .coldtubb-preview-media-wrapper { position: relative; width: 100%; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: none; } .coldtubb-preview-media-image { width: 100%; height: 100%; object-fit: cover; display: block; } .coldtubb-preview-thumbnails-mobile { display: none; } .coldtubb-preview-content { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; flex: 0 0 calc(50% - 12px); max-width: calc(50% - 12px); } .coldtubb-preview-content-block { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; align-self: stretch; width: 100%; } .coldtubb-preview-content-title { color: #33bfea; font-family: "Outfit", sans-serif; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; margin: 0; } .coldtubb-preview-content-text { color: #000; font-family: "Outfit", sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; margin: 0; } .coldtubb-preview-content-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; width: 100%; } .coldtubb-preview-content-list li { color: #000; font-family: "Outfit", sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; } .coldtubb-preview-thumbnails-desktop { position: relative; width: 100%; max-width: 1320px; } .coldtubb-preview-thumbnails-desktop-track { display: flex; gap: 24px; flex: 1 1 auto; overflow: hidden; scroll-behavior: smooth; } .coldtubb-preview-thumbnails-desktop-nav { position: absolute; top: 50%; transform: translateY(-50%); transition: box-shadow 0.2s ease, color 0.2s ease, background 0.2s ease; z-index: 2; } .coldtubb-preview-thumbnails-desktop-nav--prev { left: 0; transform: translate(-50%, -50%); } .coldtubb-preview-thumbnails-desktop-nav--next { right: 0; transform: translate(50%, -50%); } .coldtubb-preview-thumbnail-button { border: none; background: transparent; padding: 0; cursor: pointer; flex: 0 0 312px; border-radius: 16px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .coldtubb-preview-thumbnail-button:hover, .coldtubb-preview-thumbnail-button:focus-visible { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(16, 37, 55, 0.16); outline: none; } .coldtubb-preview-thumbnail-button--active { box-shadow: none; } .coldtubb-preview-thumbnail-image { width: 312px; height: 312px; object-fit: contain; display: block; } .coldtubb-preview-thumbnails-desktop-nav, .coldtubb-preview-thumbnails-mobile-nav { width: 48px; height: 48px; border-radius: 50%; font-size: 20px; border: none; background: #ffffff; box-shadow: 0 12px 24px rgba(16, 37, 55, 0.18); color: #102537; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease, box-shadow 0.2s ease; } .coldtubb-preview-arrow-icon { color: #33bfea; } .coldtubb-preview-thumbnails-desktop-nav:hover, .coldtubb-preview-thumbnails-desktop-nav:focus-visible, .coldtubb-preview-thumbnails-mobile-nav:hover, .coldtubb-preview-thumbnails-mobile-nav:focus-visible { box-shadow: 0 18px 32px rgba(16, 37, 55, 0.24); outline: none; } @media (max-width: 1200px) { .coldtubb-preview-section { width: 100%; padding: 30px 16px; gap: 40px; } .coldtubb-preview-container { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 24px; align-self: stretch; width: 100%; max-width: 100%; } .coldtubb-preview-grid { width: 100%; max-width: 100%; gap: 24px; flex-direction: column; align-items: stretch; } .coldtubb-preview-media { width: 100%; max-width: 100%; flex: 1 1 100%; gap: 16px; } .coldtubb-preview-thumbnails-desktop { display: none; } .coldtubb-preview-thumbnails-mobile { position: relative; display: flex; width: 100%; align-items: center; justify-content: center; } .coldtubb-preview-thumbnails-mobile-track { display: flex; gap: 12px; overflow: hidden; flex: 1 1 100%; scroll-behavior: smooth; } .coldtubb-preview-thumbnails-mobile-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; } .coldtubb-preview-thumbnails-mobile-nav--prev { left: 0; transform: translate(-50%, -50%); } .coldtubb-preview-thumbnails-mobile-nav--next { right: 0; transform: translate(50%, -50%); } .coldtubb-preview-thumbnail-button { flex: 0 1 240px; width: 240px; max-width: 240px; border-radius: 12px; } .coldtubb-preview-thumbnail-image { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; } .coldtubb-preview-content { width: 100%; max-width: 100%; flex: 1 1 100%; gap: 20px; align-self: stretch; } } @media (max-width: 768px) { .coldtubb-preview-thumbnails-mobile-track { gap: 12px; } .coldtubb-preview-thumbnail-button { flex: 0 0 171px; width: 171px; max-width: 171px; } .coldtubb-preview-thumbnail-image { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; } } .coldtubb-popup-wrapper { display: flex; flex-direction: column; align-items: center; gap: 20px; align-self: stretch; } .main-pop-up-image { height: 366px; align-self: stretch; border-radius: 6px; justify-content: center; display: flex; } .main-pop-up-image img { line-height: 1; vertical-align: top; max-width: 100%; height: 366px; border-radius: 6px; display: block; object-fit: cover; } .main-pop-up-title { color: #000; text-align: center; font-size: 32px; font-weight: 700; line-height: 150%; } .main-pop-up-description { color: #000; text-align: center; font-size: 16px; font-weight: 400; line-height: 150%; } .main-pop-up-form { display: flex; width: 343px; padding: 8px 20px; align-items: center; gap: 6px; border-radius: 32px; border: 0.5px solid #AAA; background: #FFF; margin: 12px 0; } .main-pop-up-form input { flex: 1 0 0; border: none; outline: none; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 400; letter-spacing: -0.56px; color: #000; padding: 0; } .main-pop-up-form input::placeholder { color: #B0B5C5; } .subscribe-btn { display: flex; height: 42px; padding: 0 32px; justify-content: center; align-items: center; gap: 8px; border-radius: 5px; background: #33BFEA; color: #FFF; font-size: 16px; font-weight: 400; line-height: 150%; border: none; cursor: pointer; transition: 0.3s; } .subscribe-btn:hover { background: #1CA3CD; } @media (max-width: 768px) { .main-pop-up-image { height: 210.352px; } .main-pop-up-image img { height: 210.352px; } .main-pop-up-form { width: 100%; } }