File: /var/www/html/wpcurated/wp-content/themes/curatedbkk/css/style.css
@import url("https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&display=swap");
/*** all Mobile Screen (iphone 6,7,8) ***/
/*** mobile Landscape Size ***/
/*** medium devices (tablets, less than 992px) ***/
/*** iPad in landscape ***/
/**** smaller than desktop 1200 (devices and browsers) ***/
/*** laptop with MDPI (medium density per inch) resolution ***/
/*** laptop with HiDPI (High Dots Per Inch) resolution ***/
/*** WSXGA (Wide Super Extended Graphics Array) resolution ***/
/*** all Mobile Screen (iphone 6,7,8) ***/
/*** mobile Landscape Size ***/
/*** medium devices (tablets, less than 992px) ***/
/*** iPad in landscape ***/
/**** smaller than desktop 1200 (devices and browsers) ***/
/*** laptop with MDPI (medium density per inch) resolution ***/
/*** laptop with HiDPI (High Dots Per Inch) resolution ***/
/*** WSXGA (Wide Super Extended Graphics Array) resolution ***/
@import url("https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&display=swap");
/*** all Mobile Screen (iphone 6,7,8) ***/
/*** mobile Landscape Size ***/
/*** medium devices (tablets, less than 992px) ***/
/*** iPad in landscape ***/
/**** smaller than desktop 1200 (devices and browsers) ***/
/*** laptop with MDPI (medium density per inch) resolution ***/
/*** laptop with HiDPI (High Dots Per Inch) resolution ***/
/*** WSXGA (Wide Super Extended Graphics Array) resolution ***/
/*** all Mobile Screen (iphone 6,7,8) ***/
/*** mobile Landscape Size ***/
/*** medium devices (tablets, less than 992px) ***/
/*** iPad in landscape ***/
/**** smaller than desktop 1200 (devices and browsers) ***/
/*** laptop with MDPI (medium density per inch) resolution ***/
/*** laptop with HiDPI (High Dots Per Inch) resolution ***/
/*** WSXGA (Wide Super Extended Graphics Array) resolution ***/
.title {
font-size: 62px;
font-weight: 500;
line-height: 63.24px;
color: #00124d;
padding-bottom: 17px;
}
@media (max-width: 1679px) {
.title {
font-size: 52px;
line-height: 48px;
}
}
@media (max-width: 1441px) {
.title {
font-size: 42px;
line-height: 45px;
}
}
@media (max-width: 1199px) {
.title {
font-size: 32px;
line-height: 40px;
}
}
@media (max-width: 991px) {
.title {
font-size: 28px;
line-height: 34px;
}
}
@media (max-width: 767px) {
.title {
font-size: 24px;
line-height: 30px;
}
}
.title .dark-blue {
color: #014cb2;
}
.title .light-blue {
color: #014cb2;
}
.content {
font-size: 20px;
font-weight: 400;
line-height: 28.4px;
color: #313646;
}
@media (max-width: 1679px) {
.content {
font-size: 18px;
line-height: 26px;
}
}
@media (max-width: 1441px) {
.content {
font-size: 16px;
line-height: 26px;
}
}
@media (max-width: 991px) {
.content {
font-size: 14px;
line-height: 22px;
}
}
@media (max-width: 767px) {
.content {
font-size: 14px;
line-height: 24px;
}
}
.primary-btn {
border: 1px solid #014cb2;
border-radius: 38px;
height: 62px;
width: 248px;
background-color: transparent;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 20px;
font-weight: 400;
line-height: 28.4px;
text-align: center;
color: #014cb2;
padding-left: 30px;
padding-right: 30px;
}
@media (max-width: 1679px) {
.primary-btn {
font-size: 18px;
line-height: 26px;
height: 52px;
}
}
@media (max-width: 1441px) {
.primary-btn {
font-size: 16px;
line-height: 26px;
height: 42px;
width: 210px;
}
}
@media (max-width: 1199px) {
.primary-btn {
font-size: 14px;
line-height: 14px;
}
}
@media (max-width: 1441px) {
.primary-btn {
width: 170px;
}
}
.primary-btn img {
filter: brightness(0) saturate(100%) invert(18%) sepia(79%) saturate(2764%) hue-rotate(205deg) brightness(97%) contrast(104%);
}
.primary-btn:hover {
background-color: #014cb2;
color: #fff;
}
.primary-btn:hover img {
filter: brightness(0) saturate(100%) invert(100%) sepia(11%) saturate(33%) hue-rotate(74deg) brightness(107%) contrast(107%);
}
.our-service {
font-family: "Funnel Display", serif;
padding-bottom: 100px;
}
@media (max-width: 1441px) {
.our-service {
padding-bottom: 60px;
}
}
.our-service .title-sec {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
max-width: 740px;
margin: 0 auto;
}
.our-service .content {
text-align: center;
}
.our-service .service-tab {
background: #d7f8ff;
padding: 74px 0px;
border-radius: 31px;
justify-content: space-between;
margin-top: 76px;
padding-right: 130px;
display: flex;
}
@media (max-width: 1679px) {
.our-service .service-tab {
margin-top: 56px;
padding-right: 120px;
}
}
@media (max-width: 1441px) {
.our-service .service-tab {
margin-top: 46px;
padding-right: 110px;
}
}
@media (max-width: 1199px) {
.our-service .service-tab {
margin-top: 36px;
padding-right: 30px;
}
}
@media (max-width: 991px) {
.our-service .service-tab {
padding: 35px 0px 35px 0px;
}
}
@media (max-width: 767px) {
.our-service .service-tab {
padding: 20px;
flex-direction: column;
}
}
.our-service .service-tab .title {
color: #014cb2;
}
.our-service .service-tab .left-sec {
background: #ffffff;
padding: 60px 0px;
border-radius: 23px;
max-width: 610px;
padding-left: 35px;
}
@media (max-width: 991px) {
.our-service .service-tab .left-sec {
width: 48%;
padding-left: 10px;
}
}
@media (max-width: 767px) {
.our-service .service-tab .left-sec {
padding: 20px 20px;
width: 100%;
margin-bottom: 20px;
overflow: scroll;
}
}
@media (max-width: 579px) {
.our-service .service-tab .left-sec {
width: 100%;
}
}
.our-service .service-tab .left-sec ul {
padding-right: 100px;
}
@media (max-width: 991px) {
.our-service .service-tab .left-sec ul {
padding-right: 20px;
}
}
@media (max-width: 767px) {
.our-service .service-tab .left-sec ul {
padding-right: 0;
display: flex;
flex-wrap: nowrap;
flex-direction: row !important;
white-space: nowrap;
}
}
.our-service .service-tab .left-sec ul li {
padding-bottom: 16px;
}
@media (max-width: 767px) {
.our-service .service-tab .left-sec ul li {
padding-bottom: 0;
padding-right: 30px;
}
}
.our-service .service-tab .left-sec ul li:last-child {
padding-bottom: 0px;
}
.our-service .service-tab .left-sec ul li a {
font-size: 24px;
font-weight: 500;
line-height: 33.6px;
color: #313646;
display: flex;
align-items: flex-start;
}
@media (max-width: 1679px) {
.our-service .service-tab .left-sec ul li a {
font-size: 22px;
line-height: 26px;
}
}
@media (max-width: 1441px) {
.our-service .service-tab .left-sec ul li a {
font-size: 18px;
line-height: 26px;
}
}
@media (max-width: 1199px) {
.our-service .service-tab .left-sec ul li a {
font-size: 16px;
line-height: 20px;
}
}
@media (max-width: 991px) {
.our-service .service-tab .left-sec ul li a {
font-size: 14px;
}
}
@media (max-width: 767px) {
.our-service .service-tab .left-sec ul li a {
padding: 0;
}
}
.our-service .service-tab .left-sec ul li a span {
flex-shrink: 0;
}
.our-service .service-tab .left-sec ul li a span img {
flex-shrink: 0;
}
.our-service .service-tab .left-sec ul li a span + span {
margin-left: 24px;
}
@media (max-width: 991px) {
.our-service .service-tab .left-sec ul li a span + span {
flex: 0 0 80%;
}
}
@media (max-width: 767px) {
.our-service .service-tab .left-sec ul li a span + span {
flex: none;
margin-left: 20px;
}
}
.our-service .service-tab .left-sec ul li a.active {
color: #014cb2;
background-color: transparent;
}
.our-service .service-tab .left-sec ul li a.active span img {
filter: brightness(0) saturate(100%) invert(18%) sepia(79%) saturate(2764%) hue-rotate(205deg) brightness(97%) contrast(104%);
}
.our-service .service-tab .right-sec {
flex: 1;
margin-left: 105px;
}
@media (max-width: 1199px) {
.our-service .service-tab .right-sec {
margin-left: 80px;
}
}
@media (max-width: 991px) {
.our-service .service-tab .right-sec {
margin-left: 20px;
}
}
@media (max-width: 767px) {
.our-service .service-tab .right-sec {
width: 100%;
margin-left: 0;
}
}
.our-service .service-tab .right-sec .top-img {
height: 272px;
margin-bottom: 49px;
}
@media (max-width: 1679px) {
.our-service .service-tab .right-sec .top-img {
margin-bottom: 39px;
}
}
@media (max-width: 1441px) {
.our-service .service-tab .right-sec .top-img {
margin-bottom: 29px;
}
}
@media (max-width: 1199px) {
.our-service .service-tab .right-sec .top-img {
margin-bottom: 19px;
height: 200px;
}
}
.our-service .service-tab .right-sec .top-img img {
height: 100%;
border-radius: 29px;
object-fit: cover;
width: 100%;
}
.our-service .service-tab .right-sec .title-sec {
justify-content: left;
align-items: flex-start;
}
.our-service .service-tab .right-sec .title-sec .content,
.our-service .service-tab .right-sec .title-sec .title {
text-align: left;
}
.our-service .btn-sec {
display: flex;
align-items: center;
justify-content: center;
padding-top: 58px;
}
@media (max-width: 1199px) {
.our-service .btn-sec {
padding-top: 40px;
}
}
.real-stories {
background: linear-gradient(360deg, rgba(85, 227, 255, 0.15) 0%, rgba(255, 255, 255, 0.15) 100%);
padding-bottom: 100px;
}
@media (max-width: 767px) {
.real-stories {
padding-bottom: 50px;
}
}
.real-stories .top-sec {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 76px;
}
@media (max-width: 1679px) {
.real-stories .top-sec {
padding-bottom: 50px;
}
}
@media (max-width: 991px) {
.real-stories .top-sec {
padding-bottom: 30px;
}
}
@media (max-width: 579px) {
.real-stories .top-sec {
flex-wrap: wrap;
}
}
.real-stories .top-sec .title-sec {
width: 60%;
justify-content: left;
align-items: flex-start;
}
.real-stories .top-sec .title-sec .content {
text-align: left;
}
@media (max-width: 579px) {
.real-stories .top-sec .title-sec {
width: 100%;
}
}
.real-stories .top-sec .btn-sec {
display: flex;
justify-content: end;
flex: 1;
}
@media (max-width: 579px) {
.real-stories .top-sec .btn-sec {
justify-content: start;
padding-top: 20px;
}
}
.real-stories .top-sec .btn-sec .primary-btn {
border: 1px solid #023dff;
color: #023dff;
width: 185px;
}
@media (max-width: 991px) {
.real-stories .top-sec .btn-sec .primary-btn {
width: 165px;
}
}
.real-stories .top-sec .btn-sec .primary-btn img {
filter: brightness(0) saturate(100%) invert(10%) sepia(93%) saturate(7497%) hue-rotate(235deg) brightness(109%) contrast(104%);
}
.real-stories .top-sec .btn-sec .primary-btn:hover {
background-color: #023dff;
color: #fff;
}
.real-stories .top-sec .btn-sec .primary-btn:hover img {
filter: brightness(0) saturate(100%) invert(100%) sepia(11%) saturate(33%) hue-rotate(74deg) brightness(107%) contrast(107%);
}
.real-stories .slide {
padding: 0;
}
.real-stories .slick-arrow {
bottom: -80px;
top: unset;
width: 34px;
height: 34px;
border-radius: 50px;
border: 1px solid #014cb2;
display: flex;
align-items: center;
justify-content: center;
}
.real-stories .slick-arrow:hover {
background-color: #014cb2;
}
.real-stories .slick-arrow:hover img {
filter: brightness(0) saturate(100%) invert(100%) sepia(11%) saturate(33%) hue-rotate(74deg) brightness(107%) contrast(107%);
}
.real-stories .slick-arrow.slick-prev {
left: unset;
right: 55px;
z-index: 99;
}
.real-stories .slick-arrow.slick-next {
right: 11px;
z-index: 99;
}
.real-stories .slick-arrow.slick-next img {
transform: rotate(180deg);
}
.real-stories .slick-next:before,
.real-stories .slick-prev:before {
display: none;
}
.real-stories .slick-slide {
margin: 0px 25px;
}
@media (max-width: 1300px) {
.real-stories .slick-slide {
margin: 0px 10px;
}
}
.real-stories .slick-list {
margin: 0px -25px;
}
@media (max-width: 1300px) {
.real-stories .slick-list {
margin: 0px -10px;
}
}
.real-stories .slick-dots {
display: flex;
justify-content: flex-start;
left: 17px;
margin: 0;
padding: 0;
bottom: -60px;
list-style-type: none;
}
@media (max-width: 1300px) {
.real-stories .slick-dots {
width: 90%;
}
}
.real-stories .slick-dots li {
margin: 0 20px 0px 0px;
}
.real-stories .slick-dots button {
display: block;
width: 27px;
height: 3px;
padding: 0;
border: none;
border-radius: 10px;
background-color: #bcc2d8;
text-indent: -9999px;
}
.real-stories .slick-dots li.slick-active button {
background-color: #014cb2;
}
.real-stories .slider-box {
border: 1.5px solid transparent;
border-radius: 29px;
background-image: linear-gradient(white, white), linear-gradient(to right, #55e3ff, #023dff);
background-origin: border-box;
background-clip: content-box, border-box;
}
.real-stories .slider-box .slider-box-inner {
padding: 20px;
display: flex;
background-color: #fff;
padding: 30px 30px 60px 30px;
align-items: center;
border-radius: 29px;
}
@media (max-width: 991px) {
.real-stories .slider-box .slider-box-inner {
flex-wrap: wrap;
flex-direction: column;
}
}
@media (max-width: 767px) {
.real-stories .slider-box .slider-box-inner {
padding: 20px 15px 30px 15px;
}
}
.real-stories .slider-box .lef-img {
width: 195px;
height: 195px;
}
@media (max-width: 1199px) {
.real-stories .slider-box .lef-img {
width: 175px;
height: 175px;
}
}
@media (max-width: 991px) {
.real-stories .slider-box .lef-img {
width: 100%;
}
}
.real-stories .slider-box .lef-img img {
width: 100%;
height: 100%;
border-radius: 35px;
object-fit: cover;
}
@media (max-width: 767px) {
.real-stories .slider-box .lef-img img {
border-radius: 20px;
}
}
.real-stories .slider-box .details {
flex: 1;
margin-left: 35px;
}
@media (max-width: 991px) {
.real-stories .slider-box .details {
margin-left: 0px;
}
}
.real-stories .slider-box .details .name {
color: #00124d;
font-size: 35px;
font-weight: 600;
line-height: 49.7px;
padding-bottom: 15px;
}
@media (max-width: 1679px) {
.real-stories .slider-box .details .name {
font-size: 30px;
padding-bottom: 10px;
}
}
@media (max-width: 1441px) {
.real-stories .slider-box .details .name {
font-size: 28px;
}
}
@media (max-width: 1199px) {
.real-stories .slider-box .details .name {
font-size: 26px;
}
}
@media (max-width: 991px) {
.real-stories .slider-box .details .name {
font-size: 24px;
}
}
@media (max-width: 767px) {
.real-stories .slider-box .details .name {
font-size: 22px;
}
}
.real-stories .slider-box .details .position {
font-size: 16px;
font-weight: 400;
line-height: 22.72px;
color: #014cb2;
padding-bottom: 12px;
}
@media (max-width: 1679px) {
.real-stories .slider-box .details .position {
font-size: 14px;
padding-bottom: 8px;
}
}
.real-stories .slider-box .details .stories {
font-size: 16px;
font-weight: 400;
line-height: 22.72px;
color: #313646;
padding-bottom: 13px;
}
@media (max-width: 1679px) {
.real-stories .slider-box .details .stories {
font-size: 14px;
padding-bottom: 8px;
}
}
.real-stories .slider-box .details .video-btn {
display: flex;
align-items: center;
font-size: 16px;
font-weight: 400;
line-height: 22.72px;
color: #014cb2;
background-color: transparent;
border: none;
box-shadow: none;
padding: 0;
}
@media (max-width: 1679px) {
.real-stories .slider-box .details .video-btn {
font-size: 14px;
}
}
.real-stories .slider-box .details .video-btn .ico {
margin-left: 15px;
}
.ply-video a {
text-decoration: none;
}
.how-it-work {
padding: 100px 0px;
}
@media (max-width: 1679px) {
.how-it-work {
padding: 70px 0 !important;
}
}
@media (max-width: 767px) {
.how-it-work {
padding: 40px 0 !important;
}
}
.how-it-work .inner-sec {
background: radial-gradient(61.82% 109.43% at 44.64% 127.04%, #55e3ff 0%, #00124d 100%);
padding: 80px 120px;
border-radius: 62px;
display: flex;
justify-content: space-between;
align-items: center;
}
@media (max-width: 1441px) {
.how-it-work .inner-sec {
padding: 80px 70px;
}
}
@media (max-width: 991px) {
.how-it-work .inner-sec {
padding: 40px;
border-radius: 40px;
}
}
@media (max-width: 767px) {
.how-it-work .inner-sec {
flex-wrap: wrap;
padding: 30px 20px;
border-radius: 20px;
}
}
.how-it-work .inner-sec .left-section {
max-width: 446px;
}
@media (max-width: 1441px) {
.how-it-work .inner-sec .left-section {
width: 48%;
padding-right: 15px;
}
}
@media (max-width: 767px) {
.how-it-work .inner-sec .left-section {
width: 100%;
padding-bottom: 30px;
padding-right: 0;
}
}
.how-it-work .inner-sec .left-section .title {
align-items: flex-start;
justify-content: start;
text-align: left;
color: #fff;
}
.how-it-work .inner-sec .left-section .content {
text-align: left;
color: #fff;
}
.how-it-work .inner-sec .right-section {
flex: 1;
display: flex;
margin-left: 140px;
}
@media (max-width: 1679px) {
.how-it-work .inner-sec .right-section {
margin-left: 110px;
}
}
@media (max-width: 1441px) {
.how-it-work .inner-sec .right-section {
width: 48%;
margin-left: 0px;
}
}
@media (max-width: 767px) {
.how-it-work .inner-sec .right-section {
margin-left: 0;
}
}
.how-it-work .inner-sec .right-section ul {
width: 90%;
}
.how-it-work .inner-sec .right-section ul li {
list-style-type: none;
}
.how-it-work .inner-sec .right-section .list-items {
margin-bottom: 0;
}
@media (max-width: 991px) {
.how-it-work .inner-sec .right-section .list-items {
padding-left: 10px;
}
}
@media (max-width: 579px) {
.how-it-work .inner-sec .right-section .list-items {
padding-left: 10px;
}
}
.how-it-work .inner-sec .right-section .list-items li {
background: rgba(85, 227, 255, 0.1490196078);
height: 95px;
font-size: 26px;
font-weight: 400;
line-height: 36.4px;
text-align: left;
color: #fff;
border-radius: 47px;
display: flex;
align-items: center;
padding-left: 50px;
margin-bottom: 40px;
}
@media (max-width: 1679px) {
.how-it-work .inner-sec .right-section .list-items li {
font-size: 24px;
line-height: 26px;
height: 80px;
padding-left: 30px;
}
}
@media (max-width: 1441px) {
.how-it-work .inner-sec .right-section .list-items li {
font-size: 22px;
line-height: 26px;
height: 70px;
}
}
@media (max-width: 1199px) {
.how-it-work .inner-sec .right-section .list-items li {
font-size: 18px;
line-height: 14px;
height: 60px;
margin-bottom: 30px;
}
}
@media (max-width: 991px) {
.how-it-work .inner-sec .right-section .list-items li {
font-size: 14px;
height: 50px;
margin-bottom: 20px;
padding-left: 20px;
}
}
@media (max-width: 479px) {
.how-it-work .inner-sec .right-section .list-items li {
font-size: 12px;
padding-left: 15px;
}
}
.how-it-work .inner-sec .right-section .list-items li:last-child {
margin-bottom: 0px;
}
.how-it-work .inner-sec .right-section .list-items li li {
list-style-type: none;
}
.how-it-work .inner-sec .right-section .progress-list {
padding-left: 0px;
margin-bottom: 0px;
}
.how-it-work .inner-sec .right-section .progress-list li {
width: 95px;
height: 95px;
display: flex;
align-items: center;
background: rgba(85, 227, 255, 0.1490196078);
border-radius: 47px;
justify-content: center;
color: #fff;
font-size: 26px;
font-weight: 400;
line-height: 36.4px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
border: 1px dashed #55e3ff;
position: relative;
margin-bottom: 40px;
}
@media (max-width: 1679px) {
.how-it-work .inner-sec .right-section .progress-list li {
font-size: 24px;
line-height: 26px;
width: 80px;
height: 80px;
}
}
@media (max-width: 1441px) {
.how-it-work .inner-sec .right-section .progress-list li {
font-size: 22px;
line-height: 26px;
height: 70px;
width: 70px;
}
}
@media (max-width: 1199px) {
.how-it-work .inner-sec .right-section .progress-list li {
font-size: 18px;
line-height: 14px;
height: 60px;
width: 60px;
margin-bottom: 30px;
}
}
@media (max-width: 991px) {
.how-it-work .inner-sec .right-section .progress-list li {
font-size: 16px;
height: 50px;
width: 50px;
margin-bottom: 20px;
}
}
.how-it-work .inner-sec .right-section .progress-list li::before {
content: "";
position: absolute;
width: 1px;
background: repeating-linear-gradient(180deg, #55e3ff, #55e3ff 2px, transparent 2px, transparent 5px);
top: 0;
bottom: -135px;
margin: auto;
left: 48px;
height: 40px;
}
@media (max-width: 1679px) {
.how-it-work .inner-sec .right-section .progress-list li::before {
left: 41px;
bottom: -121px;
}
}
@media (max-width: 1441px) {
.how-it-work .inner-sec .right-section .progress-list li::before {
left: 32px;
bottom: -117px;
}
}
@media (max-width: 1199px) {
.how-it-work .inner-sec .right-section .progress-list li::before {
left: 29px;
bottom: -90px;
height: 30px;
}
}
@media (max-width: 991px) {
.how-it-work .inner-sec .right-section .progress-list li::before {
left: 22px;
bottom: -71px;
height: 20px;
}
}
.how-it-work .inner-sec .right-section .progress-list li:last-child {
margin-bottom: 0px;
}
.how-it-work .inner-sec .right-section .progress-list li:last-child::before {
display: none;
}
.how-it-work .inner-sec .subtitle {
font-size: 24px;
font-weight: 600;
line-height: 34.08px;
color: #55e3ff;
padding-bottom: 25px;
}
@media (max-width: 1679px) {
.how-it-work .inner-sec .subtitle {
font-size: 22px;
}
}
@media (max-width: 1199px) {
.how-it-work .inner-sec .subtitle {
font-size: 20px;
padding-bottom: 10px;
}
}
@media (max-width: 991px) {
.how-it-work .inner-sec .subtitle {
font-size: 18px;
}
}
@media (max-width: 767px) {
.how-it-work .inner-sec .subtitle {
font-size: 16px;
padding-bottom: 0px;
}
}
/*# sourceMappingURL=style.css.map */