.text-color {
color: #797C7F;
}
.dark-color{
color: #000000;
}
.primary-color {
background: linear-gradient(0deg, #120487, #120487),
linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.card-background{
background: #F5F4FF;
}
.gap-5-small {
gap: 5px;
}
.gap-10 {
gap: 10px;
}
.gap-15 {
gap: 15px;
}
.gap-20 {
gap: 20px;
}
.gap-21 {
gap: 21px;
}
.gap-30 {
gap: 30px;
}
.gap-40 {
gap: 40px;
}
.gap-50 {
gap: 50px;
}
.gap-60 {
gap: 60px;
}
.gap-120 {
gap: 120px;
}
.col-gap-40 {
column-gap: 40px;
}
.row-gap-85 {
row-gap: 85px;
}
.mt-25 {
margin-top: 25px;
}
.mt-30 {
margin-top: 30px;
}
.mt-32{
margin-top:32px;
}
.mt-35 {
margin-top: 35px;
}
.mt-40 {
margin-top: 40px;
}
.mt-50 {
margin-top: 50px;
}
.br-15 {
border-radius: 15px;
overflow: hidden;
}
.br-20 {
border-radius: 20px;
overflow: hidden;
}
.br-26{
border-radius: 26px;
overflow: hidden;
}
.br-30 {
border-radius: 30px;
overflow: hidden;
}
.br-40 {
border-radius: 40px;
overflow: hidden;
}
.list-style-none{
list-style: none;
}
.font-14 {
font-size: 14px;
line-height: 20px;
}
.font-16 {
font-size: 16px;
line-height: 28px;
}
.font-16-24-small {
font-size: 15.7px;
line-height: 24px;
}
.font-16-24 {
font-size: 16px;
line-height: 24px;
}
.font-20 {
font-size: 20px;
line-height: 30px;
}
.font-24 {
font-size: 24px;
line-height: 30px;
}
.font-400{
font-weight: 400;
}
.font-500{
font-weight: 500;
}
.font-600{
font-weight: 600;
}
.lh-60{
line-height: 60px;
}
.top-20 {
top: 20px;
}
.right-20 {
right: 20px;
}
.top-30 {
top: 30px;
}
.right-30 {
right: 30px;
}
.left-30{
left: 30px;
}
.bottom-30{
bottom: 30px;
}
.p-0{
padding: 0;
}
.px-10 {
padding-block: 10px;
}
.py-10 {
padding-inline: 10px;
}
.px-20 {
padding-block: 20px;
}
.py-20 {
padding-inline: 20px;
}
.pt-20 {
padding-top: 20px;
}
.pb-20 {
padding-bottom: 20px;
}
.p-20{
padding: 20px;
}
.p-25{
padding: 25px;
}
.px-80{
padding-block: 80px;
}
.m-0{
margin: 0;
}
.mt-15:has(*){
margin-top: 15px;
}
.mt-10{
margin-top: 10px;
}
.mb-10{
margin-bottom: 10px;
}
.mt-20{
margin-bottom: 20px;
}
.mb-20{
margin-bottom: 20px;
}
.mx-20{
margin-block: 20px;
}
.mb-40{
margin-bottom: 40px;
}
.mw-50{
max-width:50%;
}
.mw-60{
max-width:60%;
}
.list-styled {
li {
font-weight: 400;
letter-spacing: 0;
padding-left: 30px;
&::after {
content: '';
position: absolute;
left: 0;
background: url('data:image/svg+xml,');
background-size: 15px;
width: 30px;
height: 30px;
background-repeat: no-repeat;
background-position: center;
top: 0;
}
}
&.blue-tick{
li {
&::after {
content: '';
background: url('data:image/svg+xml,');
background-size: 15px;
background-repeat: no-repeat;
background-position: center;
}
}
}
}
.list-styled.bg-20 {
li {
font-weight: 400;
letter-spacing: 0;
padding-left: 20px;
&::after {
content: '';
position: absolute;
left: 0;
background: url('data:image/svg+xml,');
background-size: 10px;
width: 20px;
height: 20px;
background-repeat: no-repeat;
background-position: center;
top: 0;
}
}
&.blue-tick{
li {
&::after {
content: '';
background: url('data:image/svg+xml,');
background-size: 10px;
background-repeat: no-repeat;
background-position: center;
}
}
}
}
.button-list {
li {
border: 1px solid #12048780;
background-color: #1204870D;
padding: 4px 15px;
border-radius: 50px;
font-size: 16px;
line-height: 28px;
}
}
.button-list.small {
li {
border: 1px solid #12048780;
background-color: #1204870D;
padding: 5px 10px;
border-radius: 50px;
font-size: 12px;
line-height: 18px;
}
}
.button-list.big {
li {
border: 1px solid #12048780;
background-color: #1204870D;
padding: 10px 20px;
border-radius: 50px;
font-size: 20px;
line-height: 150%;
}
}
.two-column {
li {
width: calc(50% - 15px);
padding-left: 37px;
position: relative;
font-weight: 400;
font-size: 18px;
line-height: 150%;
letter-spacing: 0;
color: #797C7F;
&::before {
content: '';
position: absolute;
width: 27px;
height: 27px;
left: 0;
border-radius: 8px;
background: url('data:image/svg+xml,');
background-size: 27px;
}
}
}
.col-33.col-gap-40 {
.column {
width: calc(33.33% - 26.67px);
}
}
.col-33.gap-21 {
gap:21px;
.column {
width: calc(33.33% - 14px);
}
}
.col-33.gap-40 {
.column {
width: calc(33.33% - 26.67px);
}
}
.column-50.gap-40 {
.column {
width: calc(50% - 20px);
}
}
.column-50.gap-20 {
gap:20px;
.column {
width: calc(50% - 10px);
}
}
.column-50.gap-50 {
.column {
width: calc(50% - 25px);
}
}
.column-40-60.gap-50 {
.column {
&.small{
width: calc(40% - 25px);
}
&.large{
width: calc(60% - 25px);
}
}
}
.column-45-55.gap-40 {
.column {
&.small{
width: calc(45% - 20px);
}
&.large{
width: calc(55% - 20px);
}
}
}
.column-30-70.gap-200 {
gap:200px;
.column {
&.small{
width: 500px;
}
&.large{
width: calc(100% - 700px);
}
}
}
.column-45-55.gap-60 {
gap:60px;
.column {
&.small{
width: calc(45% - 30px);
}
&.large{
width: calc(55% - 30px);
}
}
}
.column-60-40.gap-50 {
gap:50px;
.column {
&.small{
width: calc(40% - 25px);
}
&.large{
width: calc(60% - 25px);
}
}
}
.column-65-35.gap-100 {
gap:100px;
.column {
&.small{
width: calc(35% - 50px);
}
&.large{
width: calc(65% - 50px);
}
}
}
.column-65-35.gap-50 {
gap:50px;
.column {
&.small{
width: calc(35% - 25px);
}
&.large{
width: calc(65% - 25px);
}
}
}
.column-70-30.gap-50 {
gap:50px;
.column {
&.small{
width: calc(30% - 25px);
}
&.large{
width: calc(70% - 25px);
}
}
}
.col-h-500{
height: 500px;
}
.badge-button{
z-index: 1;
background: #11111133;
border-radius: 55px;
backdrop-filter: blur(5px);
border:none;
color: #FFFFFF;
font-weight: 500;
font-size: 18px;
line-height: 100%;
letter-spacing: 0px;
text-align: center;
padding: 10px 15px;
}
.m-i--20{
margin-inline: -20px;
}
@media (max-width:1599px) {
.column-40-60.gap-50 {
.column {
&.small{
width: calc(45% - 25px);
}
&.large{
width: calc(55% - 25px);
}
}
}
.column-30-70.gap-200 {
gap:80px;
.column {
&.small{
width: calc(45% - 40px);
}
&.large{
width: calc(55% - 40px);
}
}
}
.gap-120 {
gap: 60px;
}
}
@media (max-width:1199px) {
.gap-lg-20 {
gap: 20px;
}
.br-lg-20 {
border-radius: 20px;
}
.column-lg-100.gap-lg-20 {
.column {
width: 100%;
}
}
.row-gap-85 {
row-gap: 40px;
}
.column-40-60.gap-50 {
.column {
&.small{
width: calc(50% - 25px);
}
&.large{
width: calc(50% - 25px);
}
}
}
.column-30-70.gap-200 {
gap:60px;
.column {
&.small{
width: calc(50% - 30px);
}
&.large{
width: calc(50% - 30px);
}
}
}
.column-45-55.gap-40 {
.column {
&.small{
width: calc(50% - 20px);
}
&.large{
width: calc(50% - 20px);
}
}
}
.column-65-35.gap-100 {
gap:60px;
.column {
&.small{
width: calc(50% - 30px);
}
&.large{
width: calc(50% - 30px);
}
}
}
.column-70-30.gap-50 {
gap:40px;
.column {
&.small{
width: calc(30% - 20px);
}
&.large{
width: calc(70% - 20px);
}
}
}
.lh-60{
line-height: normal;
}
.mw-60,.mw-50{
max-width:70%;
}
}
@media (max-width:1024px) {
.col-33.col-gap-40 {
.column {
width: calc(50% - 20px);
}
}
.column-40-60.gap-50 {
gap:40px;
.column {
&.small{
width: 100%;
}
&.large{
width: 100%;
}
}
}
.column-30-70.gap-200 {
gap:40px;
.column {
&.small{
width: 100%;
max-width: 370px;
}
&.large{
width: 100%;
}
}
}
.mt-50{
margin-top: 40px;
}
.row-gap-85{
row-gap: 30px;
}
.column-60-40.gap-50 {
gap:40px;
.column {
&.small{
width: calc(40% - 20px);
}
&.large{
width: calc(60% - 20px);
}
}
}
.col-gap-40{
gap: 35px;
}
.column-70-30.gap-50 {
gap:30px;
.column {
&.small{
width: calc(30% - 15px);
}
&.large{
width: calc(70% - 15px);
}
}
}
.gap-60 {
gap: 50px;
}
.gap-120 {
gap: 50px;
}
.mw-60,.mw-50{
max-width:80%;
}
.m-i--20{
margin-inline: 0px;
}
}
@media (max-width:991px) {
.column-md-100 {
.column {
width: 100%;
}
}
.column-md-50.gap-lg-20 {
.column {
width: calc(50% - 10px);
}
}
.mt-50{
margin-top: 30px;
}
.column-45-55.gap-60 {
gap:30px;
.column {
&.small{
width: calc(45% - 15px);
}
&.large{
width: calc(55% - 15px);
}
}
}
.column-45-55.gap-40 {
.column {
&.small{
width: 100%;
}
&.large{
width: 100%;
}
}
}
.column-65-35.gap-100 {
gap:40px;
.column {
&.small{
width: 100%;
}
&.large{
width: 100%;
}
}
}
.two-column {
gap:20px;
li{
font-size: 16px;
line-height: 27px;
}
}
.row-gap-85{
row-gap: 25px;
}
.font-20 {
font-size: 18px;
line-height: 26px;
}
.mb-40{
margin-bottom: 30px;
}
.br-40{
border-radius: 30px;
}
.column-60-40.gap-50 {
gap:30px;
.column {
&.small{
width: 100%;
}
&.large{
width: 100%;
}
}
}
.col-gap-40{
gap: 30px;
}
.column-70-30.gap-50 {
gap:25px;
.column {
&.small{
width: 100%;
}
&.large{
width: 100%;
}
}
}
.gap-60 {
gap: 40px;
}
.gap-120 {
gap: 40px;
}
.mw-60,.mw-50{
max-width:100%;
}
}
@media (max-width:767px) {
.col-33.col-gap-40 {
.column {
width: 100%;
}
}
.two-column {
li {
width: 100%;
}
}
.mt-50{
margin-top: 25px;
}
.column-45-55.gap-60 {
gap:40px;
.column {
&.small{
width: 100%;
}
&.large{
width:100%;
}
}
}
.column-50.gap-20 {
gap:20px;
.column {
width: 100%;
}
}
.column-65-35.gap-100 {
gap:30px;
}
.two-column {
gap:15px;
}
.row-gap-85{
row-gap: 20px;
}
.font-20 {
font-size: 16px;
line-height: 22px;
}
.mb-40{
margin-bottom: 20px;
}
.font-24 {
font-size: 20px;
line-height: 24px;
}
.br-40{
border-radius: 20px;
}
.column-60-40.gap-50 {
gap:20px;
}
.p-sm-y-10{
padding-inline: 10px !important;
}
.p-sm-y-0{
padding-inline: 0px !important;
}
.col-gap-40{
gap: 25px;
}
.column-70-30.gap-50 {
gap:20px;
}
.gap-60 {
gap: 30px;
}
.gap-120 {
gap: 30px;
}
}
@media (max-width:575px) {
.column-sm-100 {
.column {
width: 100% !important;
}
}
.font-24 {
font-size: 18px;
line-height: 22px;
}
.p-sm-x-0{
padding-block: 0 !important;
}
.col-gap-40{
gap: 20px;
}
.pt-sm-0{
padding-top: 0 !important;
}
.gap-60 {
gap: 20px;
}
.gap-120 {
gap: 20px;
}
}