website/src/components/SimpleStep/SimpleStep.module.scss
.features {
width: 100%;
height: 100%;
position: relative;
margin-top: -250px;
z-index: 0;
}
// .features:before {
// content: ' ';
// bottom: 0;
// left: 0;
// width: 100%;
// height: 10%;
// position: absolute;
// background: var(--ifm-bg-light);
// }
.container {
width: 100%;
height: 100%;
position: relative;
mix-blend-mode: normal;
z-index: 0;
background: var(--ifm-bg-light);
background-size: 100% 95%;
background-repeat: no-repeat;
background-position: center 0px;
clip-path: polygon(0 10%, 100% 0%, 100% 100%, 0% 100%);
// clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
// clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
@media (max-width: 640px) {
clip-path: none;
}
@media (max-width: 640px) {
background: none;
clip-path: none;
padding: 50px 10px;
background-color: var(--brown--fourth);
// clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%);
}
@media (max-width: 380px) {
clip-path: polygon(0 0, 100% 0, 100% 97%, 0 100%);
}
}
.content {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 90%;
padding-top: 150px;
margin-left: auto;
margin-right: auto;
height: 100%;
padding-bottom: 30px;
z-index: 2;
position: relative;
@media (max-width: 640px) {
padding-top: 250px;
}
}
// .features:after {
// content: ' ';
// position: absolute;
// bottom: 0;
// left: 0;
// height: 150px;
// width: 100%;
// z-index: 2;
// clip-path: polygon(0 78%, 100% 0%, 100% 26%, 0% 100%);
// background: #ffffff;
// border: none;
// display: block;
// z-index: 1;
// @media (max-width: 640px) {
// display: none;
// }
// }
.simpleStepsTitleContainer {
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
margin-bottom: 30px;
}
.simpleStepsTitle {
margin-left: auto;
margin-right: auto;
max-width: 303px;
color: var(--ifm-color-text-primary);
padding-top: 100px;
padding-left: 60px;
padding-right: 60px;
text-align: center;
text-transform: capitalize;
@media (max-width: 640px) {
padding-top: 0px;
}
}
.simpleStepsDescription {
margin-left: auto;
margin-right: auto;
// max-width: 428px;
padding: 0px 40px;
}
.simpleStepsButton {
font-family: Rounded Mplus 1c;
font-weight: 600;
font-size: 20px;
text-transform: capitalize;
margin-left: auto;
margin-right: auto;
width: fit-content;
min-width: 135px !important;
background: var(--yellow-second);
display: flex;
justify-content: center;
align-items: center;
border-radius: 30px;
text-align: center;
padding: 2px 15px 6px 15px;
color: var(--ifm-color-text-secondary) !important;
&:hover {
color: var(--ifm-color-text-primary) !important;
text-decoration: none;
}
}
.steps {
display: flex;
flex-direction: column;
width: 100%;
min-width: 90vw;
position: relative;
z-index: 3;
@media (max-width: 380px) {
padding-bottom: 0px;
}
}
.stepContainerRight {
display: flex;
justify-content: flex-end;
text-align: left;
margin-left: 5%;
@media (max-width: 640px) {
justify-content: center;
text-align: center;
margin-left: 0px;
}
}
.stepContainerRight .stepBox {
display: flex;
flex-direction: column;
align-items: flex-start;
@media (max-width: 640px) {
flex-direction: column;
align-items: center;
margin-bottom: 20px;
}
.textContainer {
padding-right: 40px;
text-align: left;
padding-top: 30px;
@media (max-width: 640px) {
padding-right: 0px;
text-align: center;
}
.stepTitle {
font-family: Fira Sans;
font-style: normal;
font-weight: 600;
font-size: 22px;
line-height: 25px;
/* or 114% */
max-width: 303px;
letter-spacing: 0.3px;
@media (max-width: 640px) {
max-width: unset;
}
}
}
.svgContainer {
position: relative;
// .stepNumber {
// position: absolute;
// left: 0px;
// top: 0px;
// font-family: Source Sans Pro;
// font-style: normal;
// font-weight: 900;
// font-size: 60px;
// line-height: 56px;
// z-index: 2;
// color: var(--black);
// }
// .stepNumber:after {
// content: ' ';
// width: 49px;
// height: 49px;
// background: var(--yellow-second);
// border-radius: 50%;
// position: absolute;
// right: -5px;
// bottom: -15px;
// z-index: -1;
// }
}
}
.stepContainerRight .stepBox .textContainer .stepDescription {
max-width: 545px;
text-align: left;
font-family: Fira Sans;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
letter-spacing: 0.3px;
@media (max-width: 640px) {
text-align: center;
margin-left: auto;
margin-right: auto;
}
}
.stepContainerLeft {
display: flex;
justify-content: flex-start;
text-align: left;
margin-left: 5%;
@media (max-width: 640px) {
justify-content: center;
text-align: center;
margin-left: 0px;
}
.svgContainer {
position: relative;
height: fit-content;
width: fit-content;
// .stepNumberFirst {
// position: absolute;
// left: 10px;
// bottom: 10px;
// font-family: Source Sans Pro;
// font-style: normal;
// font-weight: 900;
// font-size: 60px;
// line-height: 56px;
// z-index: 2;
// color: var(--black);
// }
// .stepNumberFirst:after {
// content: ' ';
// width: 49px;
// height: 49px;
// background: var(--yellow-second);
// border-radius: 50%;
// position: absolute;
// right: -10px;
// bottom: -10px;
// z-index: -1;
// }
// .stepNumber {
// position: absolute;
// right: 0px;
// top: 0px;
// font-family: Source Sans Pro;
// font-style: normal;
// font-weight: 900;
// font-size: 60px;
// line-height: 56px;
// z-index: 2;
// color: var(--black);
// }
// .stepNumber:after {
// content: ' ';
// width: 49px;
// height: 49px;
// background: var(--yellow-second);
// border-radius: 50%;
// position: absolute;
// right: -5px;
// bottom: -15px;
// z-index: -1;
// }
}
}
.stepContainerLeft .stepBox {
display: flex;
align-items: flex-start;
flex-direction: column;
@media (max-width: 640px) {
flex-direction: column;
align-items: center;
margin-bottom: 20px;
}
.stepTitle {
font-family: Fira Sans;
font-style: normal;
font-weight: 600;
font-size: 22px;
line-height: 25px;
letter-spacing: 0.3px;
max-width: 303px;
@media (max-width: 640px) {
max-width: unset;
}
}
}
.stepContainerLeft .stepBox .textContainer {
padding-right: 40px;
text-align: left;
padding-top: 30px;
@media (max-width: 640px) {
flex-direction: column;
text-align: center;
padding-right: 0px;
}
}
.stepContainerLeft .stepBox .textContainer .stepDescription {
max-width: 545px;
text-align: left;
font-family: Fira Sans;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
/* or 139% */
letter-spacing: 0.3px;
@media (max-width: 640px) {
text-align: center;
}
}
.stepSvg {
width: 254px;
height: 254px;
display: flex;
justify-content: start;
align-items: center;
background: var(--brown);
border-radius: 50%;
}