.main_service_section {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 48px;
margin-top: 48px;
}
@media screen and (max-width: 768px) {
.main_service_section {
flex-wrap: wrap;
}
}
.main_service_section .left_side {
width: calc(62% - 10px);
}
@media screen and (max-width: 768px) {
.main_service_section .left_side {
width: 100%;
margin-bottom: 24px;
}
}
.main_service_section .left_side h1 {
font-weight: 500;
font-size: 64px;
line-height: 120%;
max-width: 900px;
}
@media screen and (max-width: 991px) {
.main_service_section .left_side h1 {
font-size: 48px;
}
}
@media screen and (max-width: 768px) {
.main_service_section .left_side h1 {
font-size: 32px;
}
}
.main_service_section .right_side {
width: calc(38% - 10px);
}
@media screen and (max-width: 768px) {
.main_service_section .right_side {
width: 100%;
}
}
.main_service_section .right_side p {
font-weight: 400;
font-size: 16px;
line-height: 125%;
margin-bottom: 24px;
}
.main_service_section .right_side a {
background: #E6283C;
border-radius: 12px 4px;
padding: 14px 20px 14px 28px;
font-weight: 500;
font-size: 16px;
line-height: 125%;
text-align: center;
color: #F2F2F2;
display: flex;
width: fit-content;
transition: all 0.4s;
text-decoration: none !important;
}
@media screen and (max-width: 768px) {
.main_service_section .right_side a {
width: 100%;
justify-content: center;
}
}
.main_service_section .right_side a svg {
margin-left: 4px;
}
.main_service_section .right_side a:hover {
--tw-scale-x: 105%;
--tw-scale-y: 105%;
--tw-scale-z: 105%;
scale: var(--tw-scale-x) var(--tw-scale-y);
background-color: #c01e31;
--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
transition: all 0.4s;
}
ul.tags {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 48px;
}
@media screen and (max-width: 768px) {
ul.tags {
flex-wrap: wrap;
}
}
ul.tags li {
margin: 0 12px;
border: 1px solid #267AEE;
padding: 12px 16px;
border-radius: 9999px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
font-size: 16px;
line-height: 125%;
color: #267AEE;
}
@media screen and (max-width: 768px) {
ul.tags li {
width: 100%;
margin-bottom: 12px;
}
}
ul.tags li svg {
margin-right: 8px;
}
.for_who_is {
display: flex;
justify-content: space-between;
margin-top: 192px;
}
@media screen and (max-width: 991px) {
.for_who_is {
flex-wrap: wrap;
}
}
@media screen and (max-width: 768px) {
.for_who_is {
margin-top: 80px;
}
}
.for_who_is .left_side {
width: calc(50% - 24px);
padding: 0 24px;
}
@media screen and (max-width: 991px) {
.for_who_is .left_side {
width: 100%;
margin-bottom: 24px;
padding: 0;
}
}
.for_who_is .left_side h2 {
font-weight: 500;
font-size: 64px;
line-height: 120%;
margin-bottom: 24px;
}
@media screen and (max-width: 768px) {
.for_who_is .left_side h2 {
font-size: 32px;
}
}
.for_who_is .left_side ul li {
display: flex;
align-items: center;
border-bottom: 1px solid #051C32;
margin-bottom: 6px;
padding: 14px 16px;
}
.for_who_is .left_side ul li:last-of-type {
border-bottom: 0;
}
.for_who_is .left_side ul li .icon {
margin-right: 12px;
}
.for_who_is .left_side ul li span {
font-weight: 400;
font-size: 16px;
line-height: 125%;
}
.for_who_is .right_side {
width: calc(50% - 24px);
border: 1px solid #A2A2A9;
border-radius: 8px;
padding: 24px;
}
@media screen and (max-width: 991px) {
.for_who_is .right_side {
width: 100%;
}
}
@media screen and (max-width: 768px) {
.for_who_is .right_side {
padding: 12px;
}
}
.for_who_is .right_side h3 {
font-weight: 500;
font-size: 23px;
line-height: 120%;
margin-bottom: 24px;
}
.for_who_is .right_side ul {
margin-bottom: 24px;
}
.for_who_is .right_side ul li {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
padding: 16px 16px 16px 64px;
border-bottom: 1px solid rgba(5, 28, 50, 0.45);
cursor: pointer;
}
@media screen and (max-width: 768px) {
.for_who_is .right_side ul li {
padding: 16px 16px 16px 34px;
}
}
.for_who_is .right_side ul li:last-of-type {
border-bottom: 0;
}
.for_who_is .right_side ul li.checked:before {
border: 2px solid #049541;
background: #049541;
transition: all 0.3s;
}
.for_who_is .right_side ul li.checked:after {
opacity: 1;
transition: all 0.3s;
}
.for_who_is .right_side ul li.checked p {
text-decoration: line-through;
color: #A2A2A9;
transition: all 0.4s;
}
.for_who_is .right_side ul li.checked .label {
background: rgba(4, 149, 65, 0.1215686275);
}
.for_who_is .right_side ul li.checked .label .done {
opacity: 1;
left: 50%;
transition: all 0.4s;
}
.for_who_is .right_side ul li.checked .label .todo {
opacity: 0;
transition: all 0.4s;
}
.for_who_is .right_side ul li:before {
content: "";
width: 18px;
height: 18px;
display: block;
border: 2px solid #A2A2A9;
border-radius: 4px;
position: absolute;
left: 25px;
top: 18px;
transition: all 0.3s;
}
@media screen and (max-width: 768px) {
.for_who_is .right_side ul li:before {
left: 5px;
top: calc(50% - 9px);
}
}
.for_who_is .right_side ul li:after {
content: "";
width: 10px;
height: 6px;
border-left: 2px solid white;
border-bottom: 2px solid white;
position: absolute;
top: 23px;
left: 29px;
transform: rotate(-45deg);
opacity: 0;
transition: all 0.3s;
}
@media screen and (max-width: 768px) {
.for_who_is .right_side ul li:after {
left: 9px;
top: calc(50% - 4px);
}
}
.for_who_is .right_side ul li p {
font-weight: 500;
font-size: 16px;
line-height: 125%;
transition: all 0.4s;
}
@media screen and (max-width: 768px) {
.for_who_is .right_side ul li p {
width: calc(100% - 100px);
}
}
.for_who_is .right_side ul li .label {
background: rgba(230, 40, 60, 0.1215686275);
padding: 8px 12px;
border-radius: 99px;
position: relative;
}
.for_who_is .right_side ul li .label .done {
font-weight: 500;
font-size: 11px;
line-height: 125%;
color: #049541;
position: absolute;
opacity: 0;
top: 8px;
left: 50%;
transform: translateX(-50%);
transition: all 0.4s;
}
.for_who_is .right_side ul li .label .todo {
font-weight: 500;
font-size: 11px;
line-height: 125%;
color: #E6283C;
opacity: 1;
}
.for_who_is .right_side .side_footer {
align-items: center;
justify-content: space-between;
background: rgba(4, 149, 65, 0.1215686275);
border-radius: 12px;
padding: 12px 24px 12px 24px;
opacity: 0;
visibility: hidden;
display: none;
}
.for_who_is .right_side .side_footer.active {
display: flex;
opacity: 1;
visibility: visible;
}
@media screen and (max-width: 768px) {
.for_who_is .right_side .side_footer {
flex-wrap: wrap;
padding: 12px;
}
}
.for_who_is .right_side .side_footer p {
font-weight: 500;
font-size: 16px;
line-height: 125%;
color: #049541;
width: calc(100% - 170px);
}
@media screen and (max-width: 768px) {
.for_who_is .right_side .side_footer p {
width: 100%;
margin-bottom: 24px;
}
}
.for_who_is .right_side .side_footer a {
background: #049541;
border-radius: 12px 4px;
padding: 12px 24px 12px 24px;
font-weight: 500;
font-size: 16px;
line-height: 120%;
text-align: center;
color: #F2F2F2;
display: flex;
width: fit-content;
justify-content: center;
transition: all 0.4s;
text-decoration: none !important;
}
@media screen and (max-width: 768px) {
.for_who_is .right_side .side_footer a {
width: 100%;
}
}
.for_who_is .right_side .side_footer a svg {
margin-left: 4px;
}
.for_who_is .right_side .side_footer a:hover {
--tw-scale-x: 105%;
--tw-scale-y: 105%;
--tw-scale-z: 105%;
scale: var(--tw-scale-x) var(--tw-scale-y);
background-color: #025023;
--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
transition: all 0.4s;
}
.what_do_you_get {
margin-top: 200px;
}
@media screen and (max-width: 991px) {
.what_do_you_get {
margin-top: 80px;
}
}
.what_do_you_get h2 {
font-weight: 500;
font-size: 64px;
line-height: 120%;
margin-bottom: 4px;
}
@media screen and (max-width: 768px) {
.what_do_you_get h2 {
font-size: 32px;
}
}
.what_do_you_get p {
font-weight: 500;
font-size: 16px;
line-height: 125%;
margin-bottom: 48px;
}
@media screen and (max-width: 768px) {
.what_do_you_get p {
margin-bottom: 24px;
}
}
.what_do_you_get ul {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.what_do_you_get ul li {
width: 25%;
padding: 40px 24px;
display: flex;
align-items: center;
border: 1px solid #A2A2A9;
border-right: 0;
}
@media screen and (max-width: 1200px) {
.what_do_you_get ul li {
width: 33.3333333333%;
}
}
@media screen and (max-width: 991px) {
.what_do_you_get ul li {
width: 50%;
}
}
@media screen and (max-width: 768px) {
.what_do_you_get ul li {
flex-wrap: wrap;
justify-content: center;
padding: 24px 12px;
}
}
.what_do_you_get ul li:nth-child(-n+4) {
border-bottom: 0;
}
@media screen and (max-width: 991px) {
.what_do_you_get ul li:nth-child(-n+6) {
border-bottom: 0;
}
}
.what_do_you_get ul li:nth-of-type(4n) {
border-right: 1px solid #A2A2A9;
}
@media screen and (max-width: 1200px) {
.what_do_you_get ul li:nth-of-type(4n) {
border-right: 0;
}
}
@media screen and (max-width: 1200px) {
.what_do_you_get ul li:nth-of-type(3n) {
border-right: 1px solid #A2A2A9;
}
}
@media screen and (max-width: 991px) {
.what_do_you_get ul li:nth-of-type(3n) {
border-right: 0;
}
}
@media screen and (max-width: 991px) {
.what_do_you_get ul li:nth-of-type(2n) {
border-right: 1px solid #A2A2A9;
}
}
.what_do_you_get ul li .icon {
margin-right: 24px;
}
@media screen and (max-width: 768px) {
.what_do_you_get ul li .icon {
margin-right: 0;
margin-bottom: 12px;
}
}
.what_do_you_get ul li p {
font-weight: 500;
font-size: 23px;
line-height: 120%;
margin-bottom: 0;
}
@media screen and (max-width: 768px) {
.what_do_you_get ul li p {
font-size: 16px;
text-align: center;
width: 100%;
}
}
.how_transform {
margin-top: 200px;
}
@media screen and (max-width: 991px) {
.how_transform {
margin-top: 100px;
}
}
.how_transform h2 {
font-weight: 500;
font-size: 64px;
line-height: 120%;
margin-bottom: 48px;
max-width: 850px;
}
@media screen and (max-width: 768px) {
.how_transform h2 {
font-size: 32px;
}
}
.how_transform ul li {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
height: 150px;
transition: all 0.4s;
}
@media screen and (max-width: 991px) {
.how_transform ul li {
height: 100px;
}
}
@media screen and (max-width: 768px) {
.how_transform ul li {
height: auto;
flex-wrap: wrap;
margin-bottom: 32px;
}
}
.how_transform ul li:hover {
padding-left: 120px;
transition: all 0.4s;
}
@media screen and (max-width: 991px) {
.how_transform ul li:hover {
padding-left: 60px;
}
}
@media screen and (max-width: 768px) {
.how_transform ul li:hover {
padding-left: 0;
}
}
.how_transform ul li:hover p {
opacity: 1;
transition: all 0.4s;
}
.how_transform ul li:hover .img_wrap {
opacity: 1;
transition: all 0.4s;
}
.how_transform ul li p {
display: flex;
align-items: center;
font-weight: 500;
font-size: 45px;
line-height: 120%;
opacity: 0.5;
z-index: 9;
}
@media screen and (max-width: 991px) {
.how_transform ul li p {
font-size: 28px;
}
}
@media screen and (max-width: 768px) {
.how_transform ul li p {
width: 100%;
opacity: 1;
margin-bottom: 12px;
font-size: 22px;
}
}
.how_transform ul li p span {
font-weight: 400;
font-size: 32px;
line-height: 120%;
margin-right: 48px;
}
@media screen and (max-width: 991px) {
.how_transform ul li p span {
font-size: 22px;
margin-right: 24px;
}
}
@media screen and (max-width: 768px) {
.how_transform ul li p span {
font-size: 18px;
}
}
.how_transform ul li .img_wrap {
width: 360px;
height: 360px;
position: absolute;
right: 0;
top: -105px;
overflow: hidden;
opacity: 0;
transition: all 0.4s;
border-radius: 4px;
}
@media screen and (max-width: 991px) {
.how_transform ul li .img_wrap {
width: 200px;
height: 200px;
top: -50px;
}
}
@media screen and (max-width: 768px) {
.how_transform ul li .img_wrap {
position: relative;
top: 0;
width: 100%;
height: auto;
opacity: 1;
}
}
.how_transform ul li .img_wrap img {
position: absolute;
left: 50%;
top: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
object-fit: cover;
}
@media screen and (max-width: 768px) {
.how_transform ul li .img_wrap img {
position: initial;
transform: none;
}
}
.time_estimate {
display: flex;
justify-content: space-between;
border: 1px solid #A2A2A9;
padding: 96px;
border-radius: 12px;
margin-top: 200px;
margin-bottom: 200px;
}
@media screen and (max-width: 1300px) {
.time_estimate {
padding: 96px 36px;
}
}
@media screen and (max-width: 991px) {
.time_estimate {
margin-top: 100px;
flex-wrap: wrap;
margin-bottom: 100px;
}
}
@media screen and (max-width: 768px) {
.time_estimate {
padding: 32px 16px;
}
}
.time_estimate .left_side {
width: calc(50% - 12px);
}
@media screen and (max-width: 991px) {
.time_estimate .left_side {
width: 100%;
margin-bottom: 24px;
}
}
.time_estimate .left_side h2 {
font-weight: 500;
font-size: 64px;
line-height: 120%;
margin-bottom: 12px;
max-width: 850px;
}
@media screen and (max-width: 1300px) {
.time_estimate .left_side h2 {
font-size: 56px;
}
}
@media screen and (max-width: 768px) {
.time_estimate .left_side h2 {
font-size: 32px;
}
}
.time_estimate .left_side p {
font-weight: 500;
font-size: 23px;
line-height: 120%;
margin-bottom: 48px;
}
@media screen and (max-width: 768px) {
.time_estimate .left_side p {
font-size: 18px;
margin-bottom: 24px;
}
}
.time_estimate .left_side a {
background: #E6283C;
border-radius: 12px 4px;
padding: 12px 20px 12px 28px;
font-weight: 500;
font-size: 16px;
line-height: 125%;
text-align: center;
color: #F2F2F2;
display: flex;
width: fit-content;
transition: all 0.4s;
text-decoration: none !important;
}
@media screen and (max-width: 768px) {
.time_estimate .left_side a {
width: 100%;
justify-content: center;
}
}
.time_estimate .left_side a svg {
margin-left: 4px;
}
.time_estimate .left_side a:hover {
--tw-scale-x: 105%;
--tw-scale-y: 105%;
--tw-scale-z: 105%;
scale: var(--tw-scale-x) var(--tw-scale-y);
background-color: #c01e31;
--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
transition: all 0.4s;
}
.time_estimate .right_side {
width: calc(50% - 12px);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
border: 1px solid #A2A2A9;
padding: 24px 24px 12px;
border-radius: 8px;
}
@media screen and (max-width: 1300px) {
.time_estimate .right_side {
padding: 12px 12px 0;
}
}
@media screen and (max-width: 991px) {
.time_estimate .right_side {
width: 100%;
padding: 24px 24px 12px;
}
}
@media screen and (max-width: 768px) {
.time_estimate .right_side {
padding: 24px 16px 12px;
}
}
.time_estimate .right_side h3 {
font-weight: 500;
font-size: 32px;
line-height: 120%;
color: #267AEE;
margin-bottom: 24px;
width: 100%;
}
@media screen and (max-width: 1300px) {
.time_estimate .right_side h3 {
font-size: 28px;
margin-bottom: 12px;
}
}
@media screen and (max-width: 768px) {
.time_estimate .right_side h3 {
font-size: 24px;
}
}
.time_estimate .right_side .item {
display: flex;
align-items: center;
width: calc(50% - 6px);
margin-bottom: 12px;
background: rgba(38, 122, 238, 0.0784313725);
border-radius: 12px;
padding: 24px;
}
@media screen and (max-width: 1300px) {
.time_estimate .right_side .item {
padding: 12px;
}
}
@media screen and (max-width: 600px) {
.time_estimate .right_side .item {
width: 100%;
}
}
.time_estimate .right_side .item svg {
margin-right: 12px;
}
.time_estimate .right_side .item p {
font-weight: 400;
font-size: 23px;
line-height: 120%;
}
@media screen and (max-width: 1300px) {
.time_estimate .right_side .item p {
font-size: 18px;
}
}
.main_custom_form {
margin-bottom: 96px;
}
.main_custom_form h3 {
font-weight: 500;
font-size: 45px;
line-height: 120%;
margin-bottom: 4px;
}
@media screen and (max-width: 768px) {
.main_custom_form h3 {
font-size: 36px;
}
}
.main_custom_form p.form_description {
font-weight: 400;
font-size: 16px;
margin-bottom: 48px;
line-height: 125%;
}
@media screen and (max-width: 768px) {
.main_custom_form p.form_description {
margin-bottom: 24px;
}
}
.main_custom_form form .input_row {
display: flex;
justify-content: space-between;
}
@media screen and (max-width: 768px) {
.main_custom_form form .input_row {
flex-wrap: wrap;
}
}
.main_custom_form form .input_row p {
width: calc(50% - 12px);
}
@media screen and (max-width: 768px) {
.main_custom_form form .input_row p {
width: 100%;
}
}
.main_custom_form form .input_row p input {
width: 100%;
background: rgba(7, 7, 7, 0.0509803922);
height: 69px;
padding: 20px 24px;
font-weight: 400;
font-size: 23px;
line-height: 125%;
border-radius: 4px;
}
.main_custom_form form .input_row p input:focus {
outline: 2px solid var(--color-secondary, #E6283C) !important;
outline-offset: 2px;
}
.main_custom_form form p textarea {
width: 100%;
background: rgba(7, 7, 7, 0.0509803922);
height: 300px;
padding: 20px 24px;
border-radius: 4px;
font-size: 23px;
line-height: 125%;
}
.main_custom_form form p textarea:focus {
outline: 2px solid var(--color-secondary, #E6283C) !important;
outline-offset: 2px;
}
.main_custom_form form p input[type=submit] {
font-weight: 500;
font-size: 16px;
line-height: 125%;
text-align: center;
padding: 12px 36px;
background: #E6283C;
color: white;
border-radius: 12px 4px;
margin-top: 24px;
}
@media screen and (max-width: 768px) {
.main_custom_form form p input[type=submit] {
width: 100%;
}
}
html[data-theme=dark] .main_custom_form form .input_row p input {
background: rgba(255, 255, 255, 0.0509803922);
}
html[data-theme=dark] .main_custom_form form p textarea {
background: rgba(255, 255, 255, 0.0509803922);
}