798 lines
12 KiB
SCSS
798 lines
12 KiB
SCSS
@import '_variables';
|
|
@import '_mixins';
|
|
|
|
.h2 {
|
|
color: $cBlackText;
|
|
font-size: 30px;
|
|
font-family: $font-5;
|
|
line-height: 1;
|
|
font-weight: 700;
|
|
|
|
@include respond-below(sm) {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
|
|
.h3 {
|
|
color: $cYellow;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
font-family: $font-5;
|
|
}
|
|
|
|
.p {
|
|
color: #4e4e4e;
|
|
font-size: 18px;
|
|
font-family: $font-5;
|
|
font-weight: 400;
|
|
|
|
@include respond-below(sm) {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
.subpage-content {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
#scontainer-248 {
|
|
margin-top: 90px;
|
|
margin-bottom: 90px;
|
|
|
|
@include respond-below(sm) {
|
|
margin-top: 60px;
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
.row {
|
|
align-items: center;
|
|
}
|
|
|
|
h2 {
|
|
@extend .h2;
|
|
margin: 0 0 30px 0;
|
|
padding-left: 20px;
|
|
border-left: 3px solid $cYellow;
|
|
}
|
|
|
|
p {
|
|
color: #4e4e4e;
|
|
font-size: 18px;
|
|
font-family: $font-5;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
|
|
#scontainer-249 {
|
|
padding-top: 100px;
|
|
padding-bottom: 100px;
|
|
background: #f4f4f4;
|
|
|
|
h2 {
|
|
@extend .h2;
|
|
margin: 0 0 30px 0;
|
|
padding-left: 20px;
|
|
border-left: 3px solid $cYellow;
|
|
|
|
span {
|
|
color: $cYellow;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.tiles {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
gap: 30px;
|
|
|
|
@include respond-below(sm) {
|
|
gap: 20px;
|
|
}
|
|
|
|
.tile {
|
|
padding: 40px;
|
|
border-radius: 12px;
|
|
background: $cWhite;
|
|
|
|
&-1,
|
|
&-2,
|
|
&-3 {
|
|
width: calc(100% / 3 - 20px);
|
|
}
|
|
&-4,
|
|
&-5 {
|
|
width: calc(100% / 2 - 20px);
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
column-gap: 25px;
|
|
row-gap: 30px;
|
|
|
|
@include respond-below(md) {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
@include respond-below(sm) {
|
|
flex-direction: row;
|
|
}
|
|
@include respond-below(xxs) {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
@include respond-below(lg) {
|
|
&-1,
|
|
&-2 {
|
|
width: calc(100% / 2 - 20px);
|
|
}
|
|
&-3 {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
@include respond-below(sm) {
|
|
padding: 20px;
|
|
width: 100%;
|
|
}
|
|
|
|
.progres-bar {
|
|
position: relative;
|
|
width: 80px;
|
|
min-width: 80px;
|
|
height: 80px;
|
|
|
|
span {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
color: $cYellow;
|
|
font-size: 22px;
|
|
font-family: $font-5;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
@extend .h2;
|
|
margin: 0 0 10px 0;
|
|
|
|
span {
|
|
color: $cYellow;
|
|
}
|
|
}
|
|
p {
|
|
@extend .p;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#scontainer-251,
|
|
#scontainer-253,
|
|
#scontainer-255,
|
|
#scontainer-257 {
|
|
margin-bottom: 70px;
|
|
}
|
|
|
|
#scontainer-251,
|
|
#scontainer-253,
|
|
#scontainer-255,
|
|
#scontainer-257 {
|
|
h2 {
|
|
@extend .h2;
|
|
margin: 0 0 60px 0;
|
|
padding-left: 20px;
|
|
border-left: 3px solid $cYellow;
|
|
|
|
span {
|
|
color: $cYellow;
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
@extend .h3;
|
|
text-transform: uppercase;
|
|
margin-top: 0;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
h4 {
|
|
@extend .h2;
|
|
margin: 0 0 60px 0;
|
|
|
|
span {
|
|
color: $cYellow;
|
|
}
|
|
}
|
|
|
|
.row-1 {
|
|
p {
|
|
color: $cBlackText;
|
|
font-size: 20px;
|
|
font-family: $font-5;
|
|
margin-bottom: 30px;
|
|
|
|
strong {
|
|
font-weight: 700;
|
|
}
|
|
span {
|
|
color: $cYellow;
|
|
}
|
|
}
|
|
}
|
|
|
|
.row-2 {
|
|
p {
|
|
@extend .p;
|
|
|
|
strong {
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
|
|
li {
|
|
position: relative;
|
|
padding-left: 30px;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 5px;
|
|
left: 0;
|
|
width: 18px;
|
|
height: 18px;
|
|
background-image: url('/upload/filemanager/new-2024/assets/Star.svg');
|
|
background-position: center;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
transform: rotate(20deg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
#scontainer-257 {
|
|
h2 {
|
|
margin: 0 0 30px 0;
|
|
}
|
|
}
|
|
|
|
#scontainer-252,
|
|
#scontainer-254,
|
|
#scontainer-256,
|
|
#scontainer-258 {
|
|
margin-bottom: 100px;
|
|
|
|
.row {
|
|
align-items: center;
|
|
background: #fff9e8;
|
|
border-radius: 12px;
|
|
row-gap: 50px;
|
|
|
|
@include respond-below(md) {
|
|
padding: 30px;
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 12px 18px;
|
|
margin: 0 0 30px 0;
|
|
background: $cYellow;
|
|
|
|
color: $cBlackText;
|
|
font-size: 12px;
|
|
font-family: $font-5;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
text-transform: uppercase;
|
|
|
|
img {
|
|
max-width: 12px !important;
|
|
}
|
|
}
|
|
|
|
p {
|
|
color: #4e4e4e;
|
|
font-family: $font-5;
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
padding-left: 22px;
|
|
border-left: 2px solid $cYellow;
|
|
// max-width: 290px;
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
|
|
li {
|
|
position: relative;
|
|
padding-left: 40px;
|
|
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
|
|
span {
|
|
color: $cYellow;
|
|
}
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 5px;
|
|
left: 0;
|
|
width: 22px;
|
|
height: 22px;
|
|
background-image: url('/upload/filemanager/new-2024/assets/Star.svg');
|
|
background-position: center;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
transform: rotate(20deg);
|
|
}
|
|
@include respond-below(sm) {
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
}
|
|
|
|
img {
|
|
margin: -20px 0;
|
|
|
|
@include respond-below(md) {
|
|
margin: 0;
|
|
max-width: 400px !important;
|
|
margin: 0 auto;
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
#scontainer-258 {
|
|
ul {
|
|
margin-bottom: 50px;
|
|
}
|
|
.img-left {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
#scontainer-259 {
|
|
margin-bottom: 140px;
|
|
|
|
.row {
|
|
align-items: center;
|
|
row-gap: 50px;
|
|
}
|
|
|
|
h2 {
|
|
@extend .h2;
|
|
margin: 0 0 30px 0;
|
|
padding-left: 20px;
|
|
border-left: 3px solid $cYellow;
|
|
}
|
|
|
|
h3 {
|
|
@extend .h3;
|
|
text-transform: uppercase;
|
|
margin-top: 0;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
p {
|
|
color: #4e4e4e;
|
|
font-size: 18px;
|
|
font-family: $font-5;
|
|
font-weight: 400;
|
|
margin-bottom: 40px;
|
|
}
|
|
img {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
#scontainer-17 {
|
|
padding-top: 80px;
|
|
padding-bottom: 80px;
|
|
background: #f4f4f4;
|
|
|
|
ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 2px;
|
|
line-height: 1;
|
|
margin-bottom: 10px;
|
|
|
|
li {
|
|
margin-bottom: 0;
|
|
img {
|
|
width: 100%;
|
|
max-width: 16px !important;
|
|
}
|
|
}
|
|
}
|
|
h3 {
|
|
@extend .h2;
|
|
margin-bottom: 10px;
|
|
margin-top: 0;
|
|
padding-left: 0;
|
|
border: none;
|
|
text-align: center;
|
|
|
|
span {
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: -3px;
|
|
width: 100%;
|
|
height: 3px;
|
|
background-color: $cYellow;
|
|
}
|
|
}
|
|
}
|
|
|
|
h5 {
|
|
@extend .p;
|
|
text-align: center;
|
|
width: 100%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.row {
|
|
row-gap: 30px;
|
|
|
|
&-1 {
|
|
margin-bottom: 50px;
|
|
}
|
|
&-2 {
|
|
margin-bottom: 60px;
|
|
}
|
|
&-3 {
|
|
margin-bottom: 50px;
|
|
}
|
|
.user {
|
|
.user-img {
|
|
position: relative;
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.user-img-wrapper {
|
|
width: fit-content;
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
border: 5px solid $cYellow;
|
|
border-radius: 100%;
|
|
}
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 10px;
|
|
left: 0;
|
|
width: 46px;
|
|
height: 46px;
|
|
background-image: url('/upload/filemanager/new-2024/assets/Star.svg');
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
}
|
|
.user-data {
|
|
text-align: center;
|
|
|
|
h5 {
|
|
color: $cBlackText;
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
font-family: $font-5;
|
|
line-height: 1;
|
|
margin-bottom: 5px;
|
|
}
|
|
p {
|
|
color: #6e6e6e;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
font-family: $font-5;
|
|
line-height: 1;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//* Progress bar
|
|
.circular-1 {
|
|
animation: progress-1 1s linear 0s 1 forwards;
|
|
}
|
|
.circular-2 {
|
|
animation: progress-2 1s linear 0s 1 forwards;
|
|
}
|
|
|
|
.circular-progress {
|
|
--size: 80px;
|
|
--half-size: calc(var(--size) / 2);
|
|
--stroke-width: 10px;
|
|
--radius: calc((var(--size) - var(--stroke-width)) / 2);
|
|
--circumference: calc(var(--radius) * pi * 2);
|
|
--dash: calc((var(--progress) * var(--circumference)) / 100);
|
|
}
|
|
|
|
.circular-progress circle {
|
|
cx: var(--half-size);
|
|
cy: var(--half-size);
|
|
r: var(--radius);
|
|
stroke-width: var(--stroke-width);
|
|
fill: none;
|
|
// stroke-linecap: round;
|
|
}
|
|
|
|
.circular-progress circle.bg {
|
|
stroke: #f0f0f0;
|
|
}
|
|
|
|
.circular-progress circle.fg {
|
|
transform: rotate(-90deg);
|
|
transform-origin: var(--half-size) var(--half-size);
|
|
stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
|
|
transition: stroke-dasharray 0.3s linear 0s;
|
|
stroke: $cYellow;
|
|
}
|
|
|
|
@property --progress {
|
|
syntax: '<number>';
|
|
inherits: false;
|
|
initial-value: 0;
|
|
}
|
|
|
|
@keyframes progress-1 {
|
|
from {
|
|
--progress: 0;
|
|
}
|
|
to {
|
|
--progress: 38;
|
|
}
|
|
}
|
|
@keyframes progress-2 {
|
|
from {
|
|
--progress: 0;
|
|
}
|
|
to {
|
|
--progress: 45;
|
|
}
|
|
}
|
|
|
|
.box-2 {
|
|
padding-top: 75px;
|
|
padding-bottom: 70px;
|
|
background: #f8f2e1;
|
|
|
|
.row {
|
|
row-gap: 30px;
|
|
}
|
|
|
|
h3 {
|
|
color: $cBlackText;
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
font-family: $font-5;
|
|
margin: 0 0 20px 0;
|
|
}
|
|
|
|
p {
|
|
color: rgba($cBlackText, 0.8);
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
font-family: $font-5;
|
|
}
|
|
|
|
.contact-form-wrapper {
|
|
position: relative;
|
|
border: 1px solid $cYellow;
|
|
border-radius: 24px;
|
|
background: $cWhite;
|
|
// overflow: hidden;
|
|
z-index: 1;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 30px;
|
|
left: 0;
|
|
width: 150px;
|
|
height: 164px;
|
|
background-image: url('/upload/filemanager/new-2024/assets/big-star.svg');
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position: center;
|
|
transform: rotate(344deg) translateX(-50%);
|
|
z-index: -1;
|
|
}
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 270px;
|
|
left: -70px;
|
|
width: 60px;
|
|
height: 64px;
|
|
background-image: url('/upload/filemanager/new-2024/assets/big-star.svg');
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position: center;
|
|
transform: rotate(63deg) translateX(-50%);
|
|
z-index: -1;
|
|
}
|
|
|
|
iframe {
|
|
position: relative;
|
|
border-radius: 24px;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.col-left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 40px;
|
|
justify-content: space-between;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.box-3 {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 400px;
|
|
|
|
img {
|
|
height: 100%;
|
|
margin: 0 !important;
|
|
object-fit: cover;
|
|
|
|
@include respond-below(md) {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
@include respond-below(md) {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.col-left,
|
|
.col-right {
|
|
position: relative;
|
|
height: 400px;
|
|
|
|
@include respond-below(md) {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.info-tile {
|
|
position: absolute;
|
|
bottom: 30px;
|
|
left: 50px;
|
|
background: $cWhite;
|
|
border-radius: 12px;
|
|
padding: 32px;
|
|
|
|
@include respond-below(xxs) {
|
|
left: 30px;
|
|
right: 30px;
|
|
}
|
|
|
|
p {
|
|
color: $cBlackText;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.btn1 {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
max-width: fit-content;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
|
|
#scontainer-262 {
|
|
h4 {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 8px;
|
|
|
|
color: $cBlackText;
|
|
font-size: 16px;
|
|
font-family: $font-5;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.tiles {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, 270px);
|
|
column-gap: 60px;
|
|
row-gap: 20px;
|
|
|
|
@include respond-below(sm) {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.tile {
|
|
margin: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
|
|
p {
|
|
color: rgba($cBlackText, 0.8);
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
}
|
|
|
|
.tile-data {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 16px;
|
|
background: $cWhite;
|
|
border-radius: 100px;
|
|
padding: 19px 24px;
|
|
|
|
a {
|
|
color: $cBlackText;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
max-width: 14px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|