File: /var/www/html/wpcurated/wp-content/themes/curated/scss/style.scss
@import "partials";
@import "partials";
.title {
font-size: 62px;
font-weight: 500;
line-height: 63.24px;
color: #00124d;
padding-bottom: 17px;
@media ($sm-1679) {
font-size: 52px;
line-height: 48px;
}
@media ($sm-1441) {
font-size: 42px;
line-height: 45px;
}
@media ($sm-1199) {
font-size: 32px;
line-height: 40px;
}
@media ($sm-991) {
font-size: 28px;
line-height: 34px;
}
@media ($sm-767) {
font-size: 24px;
line-height: 30px;
}
.dark-blue {
color: #014cb2;
}
.light-blue {
color: #014cb2;
}
}
.content {
font-size: 20px;
font-weight: 400;
line-height: 28.4px;
color: #313646;
@media ($sm-1679) {
font-size: 18px;
line-height: 26px;
}
@media ($sm-1441) {
font-size: 16px;
line-height: 26px;
}
@media ($sm-991) {
font-size: 14px;
line-height: 22px;
}
@media ($sm-767) {
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 ($sm-1679) {
font-size: 18px;
line-height: 26px;
height: 52px;
}
@media ($sm-1441) {
font-size: 16px;
line-height: 26px;
height: 42px;
width: 210px;
}
@media ($sm-1199) {
font-size: 14px;
line-height: 14px;
}
@media ($sm-1441) {
width: 170px;
}
img {
filter: brightness(0) saturate(100%) invert(18%) sepia(79%) saturate(2764%) hue-rotate(205deg) brightness(97%)
contrast(104%);
}
&:hover {
background-color: #014cb2;
color: #fff;
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 ($sm-1441) {
padding-bottom: 60px;
}
.title-sec {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
max-width: 740px;
margin: 0 auto;
}
.content {
text-align: center;
}
.service-tab {
background: #d7f8ff;
padding: 74px 0px;
border-radius: 31px;
justify-content: space-between;
// align-items: center;
margin-top: 76px;
padding-right: 130px;
display: flex;
@media ($sm-1679) {
margin-top: 56px;
padding-right: 120px;
}
@media ($sm-1441) {
margin-top: 46px;
padding-right: 110px;
}
@media ($sm-1199) {
margin-top: 36px;
padding-right: 30px;
}
@media ($sm-991) {
padding: 35px 0px 35px 0px;
}
@media ($sm-767) {
padding: 20px;
flex-direction: column;
}
.title {
color: #014cb2;
}
.left-sec {
background: #ffffff;
padding: 60px 0px;
border-radius: 23px;
max-width: 610px;
padding-left: 35px;
@media ($sm-991) {
width: 48%;
padding-left: 10px;
}
@media ($sm-767) {
padding: 20px 20px;
width: 100%;
margin-bottom: 20px;
overflow: scroll;
}
@media ($sm-579) {
width: 100%;
}
ul {
padding-right: 100px;
@media ($sm-991) {
padding-right: 20px;
}
@media ($sm-767) {
padding-right: 0;
display: flex;
flex-wrap: nowrap;
flex-direction: row !important;
white-space: nowrap;
}
li {
padding-bottom: 16px;
@media ($sm-767) {
padding-bottom: 0;
padding-right: 30px;
}
&:last-child {
padding-bottom: 0px;
}
a {
font-size: 24px;
font-weight: 500;
line-height: 33.6px;
color: #313646;
display: flex;
align-items: flex-start;
@media ($sm-1679) {
font-size: 22px;
line-height: 26px;
}
@media ($sm-1441) {
font-size: 18px;
line-height: 26px;
}
@media ($sm-1199) {
font-size: 16px;
line-height: 20px;
}
@media ($sm-991) {
font-size: 14px;
}
@media ($sm-767) {
padding: 0;
}
span {
flex-shrink: 0;
img {
flex-shrink: 0;
}
& + span {
margin-left: 24px;
@media ($sm-991) {
flex: 0 0 80%;
}
@media ($sm-767) {
flex: none;
margin-left: 20px;
}
}
}
&.active {
color: #014cb2;
background-color: transparent;
span {
img {
filter: brightness(0) saturate(100%) invert(18%) sepia(79%) saturate(2764%)
hue-rotate(205deg) brightness(97%) contrast(104%);
}
}
}
}
}
}
}
.right-sec {
flex: 1;
margin-left: 105px;
@media ($sm-1199) {
margin-left: 80px;
}
@media ($sm-991) {
margin-left: 20px;
}
@media ($sm-767) {
width: 100%;
margin-left: 0;
}
// max-width: 570px;
// @media($sm-1679){
// max-width: 540px;
// }
// @media($sm-1441){
// max-width: 530px;
// }
// @media($sm-767){
// max-width: 45%;
// flex: 1;
// }
// @media($sm-1199){
// max-width: 40%;
// }
.top-img {
height: 272px;
margin-bottom: 49px;
@media ($sm-1679) {
margin-bottom: 39px;
}
@media ($sm-1441) {
margin-bottom: 29px;
}
@media ($sm-1199) {
margin-bottom: 19px;
height: 200px;
}
img {
height: 100%;
border-radius: 29px;
object-fit: cover;
width: 100%;
}
}
.title-sec {
justify-content: left;
align-items: flex-start;
.content,
.title {
text-align: left;
}
}
}
}
.btn-sec {
display: flex;
align-items: center;
justify-content: center;
padding-top: 58px;
@media ($sm-1199) {
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 ($sm-767) {
padding-bottom: 50px;
}
.top-sec {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 76px;
@media ($sm-1679) {
padding-bottom: 50px;
}
@media ($sm-991) {
padding-bottom: 30px;
}
@media ($sm-579) {
flex-wrap: wrap;
}
.title-sec {
width: 60%;
justify-content: left;
align-items: flex-start;
.content {
text-align: left;
}
@media ($sm-579) {
width: 100%;
}
}
.btn-sec {
display: flex;
justify-content: end;
flex: 1;
@media ($sm-579) {
justify-content: start;
padding-top: 20px;
}
.primary-btn {
border: 1px solid #023dff;
color: #023dff;
width: 185px;
@media ($sm-991) {
width: 165px;
}
img {
filter: brightness(0) saturate(100%) invert(10%) sepia(93%) saturate(7497%) hue-rotate(235deg)
brightness(109%) contrast(104%);
}
&:hover {
background-color: #023dff;
color: #fff;
img {
filter: brightness(0) saturate(100%) invert(100%) sepia(11%) saturate(33%) hue-rotate(74deg)
brightness(107%) contrast(107%);
}
}
}
}
}
.slide {
padding: 0;
}
.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;
&:hover {
background-color: #014cb2;
img {
filter: brightness(0) saturate(100%) invert(100%) sepia(11%) saturate(33%) hue-rotate(74deg)
brightness(107%) contrast(107%);
}
}
&.slick-prev {
left: unset;
right: 55px;
z-index: 99;
}
&.slick-next {
right: 11px;
z-index: 99;
img {
transform: rotate(180deg);
}
}
}
.slick-next:before,
.slick-prev:before {
display: none;
}
.slick-slide {
margin: 0px 25px;
@media (max-width: 1300px) {
margin: 0px 10px;
}
}
.slick-list {
margin: 0px -25px;
@media (max-width: 1300px) {
margin: 0px -10px;
}
}
.slick-dots {
display: flex;
justify-content: flex-start;
left: 17px;
margin: 0;
padding: 0;
bottom: -60px;
list-style-type: none;
@media (max-width: 1300px) {
width: 90%;
}
li {
margin: 0 20px 0px 0px;
}
button {
display: block;
width: 27px;
height: 3px;
padding: 0;
border: none;
border-radius: 10px;
background-color: #bcc2d8;
text-indent: -9999px;
}
li.slick-active button {
background-color: #014cb2;
}
}
.slider-box {
.slider-box-inner {
padding: 20px;
display: flex;
background-color: #fff;
padding: 30px 30px 60px 30px;
align-items: center;
border-radius: 29px;
@media ($sm-991) {
flex-wrap: wrap;
flex-direction: column;
}
@media ($sm-767) {
padding: 20px 15px 30px 15px;
}
}
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;
.lef-img {
// padding-right: 35px;
width: 195px;
height: 195px;
@media ($sm-1199) {
width: 175px;
height: 175px;
}
@media ($sm-991) {
width: 100%;
}
img {
width: 100%;
height: 100%;
border-radius: 35px;
object-fit: cover;
@media ($sm-767) {
border-radius: 20px;
}
}
}
.details {
flex: 1;
margin-left: 35px;
@media ($sm-991) {
margin-left: 0px;
}
.name {
color: #00124d;
font-size: 35px;
font-weight: 600;
line-height: 49.7px;
padding-bottom: 15px;
@media ($sm-1679) {
font-size: 30px;
padding-bottom: 10px;
}
@media ($sm-1441) {
font-size: 28px;
}
@media ($sm-1199) {
font-size: 26px;
}
@media ($sm-991) {
font-size: 24px;
}
@media ($sm-767) {
font-size: 22px;
}
}
.position {
font-size: 16px;
font-weight: 400;
line-height: 22.72px;
color: #014cb2;
padding-bottom: 12px;
@media ($sm-1679) {
font-size: 14px;
padding-bottom: 8px;
}
}
.stories {
font-size: 16px;
font-weight: 400;
line-height: 22.72px;
color: #313646;
padding-bottom: 13px;
@media ($sm-1679) {
font-size: 14px;
padding-bottom: 8px;
}
}
.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 ($sm-1679) {
font-size: 14px;
}
.ico {
margin-left: 15px;
}
}
}
}
}
.how-it-work {
padding: 100px 0px;
@media ($sm-1679) {
padding: 70px 0 !important;
}
@media ($sm-767) {
padding: 40px 0 !important;
}
.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 ($sm-1441) {
padding: 80px 70px;
}
@media ($sm-991) {
padding: 40px;
border-radius: 40px;
}
@media ($sm-767) {
flex-wrap: wrap;
padding: 30px 20px;
border-radius: 20px;
}
.left-section {
max-width: 446px;
@media ($sm-1441) {
width: 48%;
padding-right: 15px;
}
@media ($sm-767) {
width: 100%;
padding-bottom: 30px;
padding-right: 0;
}
.title {
align-items: flex-start;
justify-content: start;
text-align: left;
color: #fff;
}
.content {
text-align: left;
color: #fff;
}
}
.right-section {
flex: 1;
display: flex;
margin-left: 140px;
@media ($sm-1679) {
margin-left: 110px;
}
@media ($sm-1441) {
width: 48%;
margin-left: 0px;
}
@media ($sm-767) {
margin-left: 0;
}
ul {
width: 90%;
li {
list-style-type: none;
}
}
.list-items {
margin-bottom: 0;
@media ($sm-991) {
padding-left: 10px;
}
@media ($sm-579) {
padding-left: 10px;
}
li {
background: #55e3ff26;
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 ($sm-1679) {
font-size: 24px;
line-height: 26px;
height: 80px;
padding-left: 30px;
}
@media ($sm-1441) {
font-size: 22px;
line-height: 26px;
height: 70px;
}
@media ($sm-1199) {
font-size: 18px;
line-height: 14px;
height: 60px;
margin-bottom: 30px;
}
@media ($sm-991) {
font-size: 14px;
height: 50px;
margin-bottom: 20px;
padding-left: 20px;
}
@media ($sm-479) {
font-size: 12px;
padding-left: 15px;
}
&:last-child {
margin-bottom: 0px;
}
li {
list-style-type: none;
}
}
}
.progress-list {
padding-left: 0px;
margin-bottom: 0px;
li {
width: 95px;
height: 95px;
display: flex;
align-items: center;
background: #55e3ff26;
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 ($sm-1679) {
font-size: 24px;
line-height: 26px;
width: 80px;
height: 80px;
}
@media ($sm-1441) {
font-size: 22px;
line-height: 26px;
height: 70px;
width: 70px;
}
@media ($sm-1199) {
font-size: 18px;
line-height: 14px;
height: 60px;
width: 60px;
margin-bottom: 30px;
}
@media ($sm-991) {
font-size: 16px;
height: 50px;
width: 50px;
margin-bottom: 20px;
}
&::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 ($sm-1679) {
left: 41px;
bottom: -121px;
}
@media ($sm-1441) {
left: 32px;
bottom: -117px;
}
@media ($sm-1199) {
left: 29px;
bottom: -90px;
height: 30px;
}
@media ($sm-991) {
left: 22px;
bottom: -71px;
height: 20px;
}
}
&:last-child {
margin-bottom: 0px;
&::before {
display: none;
}
}
}
}
}
.subtitle {
font-size: 24px;
font-weight: 600;
line-height: 34.08px;
color: #55e3ff;
padding-bottom: 25px;
@media ($sm-1679) {
font-size: 22px;
}
@media ($sm-1199) {
font-size: 20px;
padding-bottom: 10px;
}
@media ($sm-991) {
font-size: 18px;
}
@media ($sm-767) {
font-size: 16px;
padding-bottom: 0px;
}
}
}
}