body{ font-family: 'Nunito Sans', sans-serif; background: #FFFCF7; } .fancybox-content-padding-60{ padding: 45px; } .fancybox-content h1 { text-align: center; } .page-template h1 { font-size: 30px; font-style: normal; font-weight: 900; font-display: swap; color: #1c1c1c; line-height: normal; text-align: center; margin-bottom: 50px; width: 100%; } @media (max-width: 768px){ .page-template h1 { font-size: 28px; margin-bottom: 30px; } } .btn-orange{ cursor: pointer; border: none; border-radius: 24px; background: #FF9E3D; padding: 16px 32px; color: #FFF; font-family: Nunito Sans; font-size: 32px; font-style: normal; font-weight: 600; line-height: 125%; /* 40px */ letter-spacing: -0.64px; z-index: 1; position: relative; span { position: relative; z-index: 3; } i { position: relative; z-index: 3; } &:after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; border-radius: 24px; background-image: linear-gradient(108deg, #FF6B2C 0%, #FF9E3D 100%); transition: opacity 0.5s ease-out; z-index: 2; opacity: 0; } &:hover{ text-decoration: none; &:after { opacity: 1; } } } .btn-orange2{ cursor: pointer; border: none; border-radius: 24px; background: #FF9E3D; padding: 20px 32px; color: #FFF; font-family: Nunito Sans; font-size: 24px; font-style: normal; font-weight: 600; line-height: 125%; /* 30px */ letter-spacing: -0.48px; z-index: 1; position: relative; span { position: relative; z-index: 3; } &:after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; border-radius: 24px; background-image: linear-gradient(108deg, #FF6B2C 0%, #FF9E3D 100%); transition: opacity 0.5s ease-out; z-index: 2; opacity: 0; } &:hover{ text-decoration: none; &:after { opacity: 1; } } } .btn-feedback-1{ cursor: pointer; border: none; border-radius: 24px; background: #FF9E3D; padding: 16px 32px; color: #FFF; font-family: Nunito Sans; font-size: 24px; font-style: normal; font-weight: 600; line-height: 125%; /* 30px */ letter-spacing: -0.48px; transition: all 0.3s ease-in-out; &:hover{ background: #FFFCF7; color: #3A5551; transition: all 0.3s ease-in-out; text-decoration: none; } } .btn-feedback-2{ cursor: pointer; border: none; border-radius: 24px; background: #3A5551; padding: 16px 32px; color: #FFF; font-family: Nunito Sans; font-size: 24px; font-style: normal; font-weight: 600; line-height: 125%; /* 30px */ letter-spacing: -0.48px; transition: all 0.3s ease-in-out; &:hover{ background: #FFFCF7; color: #FF9E3D; transition: all 0.3s ease-in-out; text-decoration: none; } } .btn-white{ cursor: pointer; border: none; border-radius: 24px; background: #FFFCF7; padding: 16px 32px; border: 1px solid #3A5551; color: #3A5551; font-family: Nunito Sans; font-size: 24px; font-style: normal; font-weight: 600; line-height: 125%; /* 30px */ letter-spacing: -0.48px; transition: all 0.3s ease-in-out; &:hover{ background: #3A5551; color: #FFFCF7; transition: all 0.3s ease-in-out; text-decoration: none; } } @media (max-width: 992px) { .btn-orange{ padding: 14px 22px; font-size: 22px; } .btn-orange2{ padding: 14px 18px; font-size: 20px; } .btn-feedback-1{ padding: 14px 18px; font-size: 20px; } .btn-feedback-2{ padding: 14px 18px; font-size: 20px; } .btn-white{ padding: 12px 18px; font-size: 16px; } } input[type="range"] { -webkit-appearance: none; height: 6px; background: #FFFCF7; border-radius: 50px; background-image: linear-gradient(#FF9E3D, #FF9E3D); background-size: 50% 100%; background-repeat: no-repeat; border:none; box-shadow:none; } /* Input Thumb */ input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; height: 24px; width: 24px; border-radius: 50%; background: #FF9E3D; transition: background .3s ease-in-out; } input[type="range"]::-moz-range-thumb { -webkit-appearance: none; height: 20px; width: 20px; border-radius: 50%; background: #FF9E3D; transition: background .3s ease-in-out; } input[type="range"]::-ms-thumb { -webkit-appearance: none; height: 20px; width: 20px; border-radius: 50%; background: #FF9E3D; transition: background .3s ease-in-out; } input[type="range"]::-webkit-slider-thumb:hover { background: #eb7b0c; cursor: pointer; } input[type="range"]::-moz-range-thumb:hover { background: #eb7b0c; cursor: pointer; } input[type="range"]::-ms-thumb:hover { background: #eb7b0c; cursor: pointer; } /* Input Track */ input[type=range]::-webkit-slider-runnable-track { -webkit-appearance: none; box-shadow: none; border: none; background: transparent; } input[type=range]::-moz-range-track { -webkit-appearance: none; box-shadow: none; border: none; background: transparent; } input[type="range"]::-ms-track { -webkit-appearance: none; box-shadow: none; border: none; background: transparent; } .swiper-container { width: 100%; height: 100%; } .swiper-slide { text-align: center; font-size: 18px; background: none; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .swiper-navigations{ display: flex; justify-content: center; align-items: center; margin-top: -50px; gap: 16px; align-self: stretch; .swiper_slide-prev{ display: inline-flex; padding: 12px; align-items: flex-start; gap: 8px; border-radius: 24px; background: #FF9E3D; border:none; z-index: 1; position: relative; svg { position: relative; z-index: 3; } &:after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; border-radius: 24px; background: linear-gradient(108deg, #FF9E3D 0%, #FF6B2C 100%); transition: opacity 0.3s ease-out; z-index: 2; opacity: 0; } &:hover{ &:after { opacity: 1; } } } .swiper_slide-next{ display: inline-flex; padding: 12px; align-items: flex-start; gap: 8px; border-radius: 24px; background: #FF9E3D; border:none; z-index: 1; position: relative; svg { position: relative; z-index: 3; } &:after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; border-radius: 24px; background: linear-gradient(108deg, #FF6B2C 0%, #FF9E3D 100%); transition: opacity 0.3s ease-out; z-index: 2; opacity: 0; } &:hover{ &:after { opacity: 1; } } } } .swiper-pagination{ position: relative !important; width: auto !important; bottom: auto !important; } @media (max-width: 992px) { .swiper_slide-prev { display: none !important; } .swiper_slide-next { display: none !important; } } .accordion { button { border:none; background: none; width: 100%; &:hover, &:focus { cursor: pointer; &::after { cursor: pointer; } } .icon { display: inline-block; position: relative; right: 0; width: 32px; height: 32px; &::after{ display: block; position: absolute; content: ''; width: 32px; height: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M16 20.5L8 12.5L9.86667 10.6333L16 16.7666L22.1333 10.6333L24 12.5L16 20.5Z' fill='%233A5551'/%3E%3C/svg%3E"); } } } button[aria-expanded='true'] { .icon { &::after { transform: rotate(-180deg); } } + .accordion-content { opacity: 1; max-height: 100%; transition: all 200ms linear; will-change: opacity, max-height; } } .accordion-content { opacity: 0; max-height: 0; overflow: hidden; transition: opacity 200ms linear, max-height 200ms linear; will-change: opacity, max-height; } } .preloder-init { position: fixed; width: 100%; height: 100%; background-color: rgb(20 24 24 / 74%); z-index: 50; display: flex; left: 0; top: 0; right: 0; bottom: 0; justify-content: center; align-items: center; img{ width: 150px; height: 150px; } } select.feedback_day__change { background-color: #FFFCF7; border: none; display: flex; padding: 14px 12px; align-items: center; align-self: stretch; border-bottom: 1px solid #7d9491; color: #3A5551; font-family: Nunito; font-size: 16px; font-style: normal; font-weight: 500; line-height: 125%; width: 100%; }