363 lines
7.7 KiB
SCSS
363 lines
7.7 KiB
SCSS
@import "../variables/media";
|
|
|
|
// Hero Section
|
|
.hero {
|
|
background: url('/images/hero/hero-bg.jpg') center center / cover no-repeat fixed;
|
|
min-height: 100vh;
|
|
padding: 80rem 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
|
|
@media (max-width: $media-md) {
|
|
background: url('/images/hero/hero-bg.jpg') center center / cover no-repeat cover;
|
|
min-height: auto;
|
|
padding: 120rem 0 51rem;
|
|
}
|
|
|
|
&__container {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
position: relative;
|
|
@media (max-width: $media-md) {
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
&__content {
|
|
max-width: 494rem;
|
|
z-index: 10;
|
|
@media (max-width: $media-md) {
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-bottom: 35rem;
|
|
}
|
|
}
|
|
|
|
&__title {
|
|
margin-bottom: var(--mb-16);
|
|
}
|
|
|
|
&__description {
|
|
margin-bottom: var(--mb-40);
|
|
}
|
|
|
|
&__image {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: -20rem;
|
|
transform: translateY(-50%);
|
|
@media (max-width: $media-md) {
|
|
position: static;
|
|
transform: none;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Section MAP
|
|
.open-map {
|
|
background: var(--map-section-bg) center center / contain no-repeat;
|
|
display: flex;
|
|
margin: 30rem 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 660rem;
|
|
@media (max-width: $media-md) {
|
|
min-height: auto;
|
|
padding: 40rem 0;
|
|
margin: 0;
|
|
}
|
|
&__container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
@media (max-width: $media-md) {
|
|
max-width: 150rem;
|
|
}
|
|
}
|
|
&__img {
|
|
background: var(--map-section-icon) center center / cover no-repeat;
|
|
width: 144rem;
|
|
height: 144rem;
|
|
margin-bottom: var(--mb-16);
|
|
@media (max-width: $media-md) {
|
|
max-width: 120rem;
|
|
max-height: 120rem;
|
|
}
|
|
}
|
|
&__title {
|
|
margin-bottom: var(--mb-16);
|
|
}
|
|
&__icon {
|
|
position: absolute;
|
|
left: calc(50% - 25rem);
|
|
top: calc(50% - 25rem);
|
|
@media (max-width: $media-md) {
|
|
border: var(--icon-border) solid var(--icon-border-green);
|
|
border-radius: 100rem;
|
|
}
|
|
&:nth-child(1) {
|
|
width: 96rem;
|
|
left: calc(50% + 175rem);
|
|
top: calc(50% - 85rem);
|
|
@media (max-width: $media-md) {
|
|
width: calc(30rem + var(--icon-border));
|
|
left: calc(50% - -95rem);
|
|
top: calc(50% - 59rem);
|
|
}
|
|
}
|
|
&:nth-child(2) {
|
|
width: 72rem;
|
|
left: calc(50% + 285rem);
|
|
top: calc(50% - -45rem);
|
|
@media (max-width: $media-md) {
|
|
width: calc(22rem + var(--icon-border));
|
|
left: calc(50% - -135rem);
|
|
top: calc(50% - 6rem);
|
|
}
|
|
}
|
|
&:nth-child(3) {
|
|
width: 96rem;
|
|
left: calc(50% - 395rem);
|
|
top: calc(50% + -86rem);
|
|
@media (max-width: $media-md) {
|
|
width: calc(30rem + var(--icon-border));
|
|
left: calc(50% - 125rem);
|
|
top: calc(50% - 59rem);
|
|
}
|
|
}
|
|
&:nth-child(4) {
|
|
width: 72rem;
|
|
left: calc(50% - 355rem);
|
|
top: calc(50% - -74rem);
|
|
@media (max-width: $media-md) {
|
|
width: calc(22rem + var(--icon-border));
|
|
left: calc(50% - 165rem);
|
|
top: calc(50% + -6rem);
|
|
}
|
|
}
|
|
&:nth-child(5) {
|
|
width: 80rem;
|
|
left: calc(50% - -375rem);
|
|
top: calc(50% + 153rem);
|
|
@media (max-width: $media-md) {
|
|
width: calc(25rem + var(--icon-border));
|
|
left: calc(50% - -89rem);
|
|
top: calc(50% + 43rem);
|
|
|
|
}
|
|
}
|
|
&:nth-child(6) {
|
|
width: 64rem;
|
|
left: calc(50% + 305rem);
|
|
top: calc(50% + -217rem);
|
|
@media (max-width: $media-md) {
|
|
width: calc(20rem + var(--icon-border));
|
|
left: calc(50% + 136rem);
|
|
top: calc(50% - 105rem);
|
|
}
|
|
}
|
|
&:nth-child(7) {
|
|
width: 80rem;
|
|
left: calc(50% + -275rem);
|
|
top: calc(50% + 223rem);
|
|
@media (max-width: $media-md) {
|
|
width: calc(25rem + var(--icon-border));
|
|
left: calc(50% - 117rem);
|
|
top: calc(50% - -43rem);
|
|
}
|
|
}
|
|
&:nth-child(8) {
|
|
width: 64rem;
|
|
left: calc(50% - 195rem);
|
|
top: calc(50% + -227rem);
|
|
@media (max-width: $media-md) {
|
|
width: calc(20rem + var(--icon-border));
|
|
left: calc(50% - 165rem);
|
|
top: calc(50% - 104rem);
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Services
|
|
.services {
|
|
&__btn {
|
|
@media (max-width: $media-md) {
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
&__container {
|
|
padding: 50rem 40rem;
|
|
border-radius: var(--border-r-24);
|
|
background-color: var(--bg-green);
|
|
@media (max-width: $media-md) {
|
|
padding: var( --container-mob-section) var( --container-mob-padding);
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
&__item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-bottom: 60rem;
|
|
gap: 50rem;
|
|
margin-right: -50rem;
|
|
@media (max-width: $media-md) {
|
|
flex-direction: column-reverse;
|
|
margin-right: 0;
|
|
gap: 40rem;
|
|
text-align: center;
|
|
padding-bottom: 120rem;
|
|
}
|
|
&:nth-child(2n) {
|
|
flex-direction: row-reverse;
|
|
margin-right: auto;
|
|
margin-left: -50rem;
|
|
.services__card {
|
|
justify-content: flex-start;
|
|
}
|
|
.services__img--first {
|
|
left: auto;
|
|
right: 0;
|
|
}
|
|
@media (max-width: $media-md) {
|
|
flex-direction: column-reverse;
|
|
margin-left: 0;
|
|
.services__card {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
&:last-child {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
}
|
|
&__content {
|
|
max-width: 498rem;
|
|
}
|
|
&__title {
|
|
max-width: 357rem;
|
|
}
|
|
&__description {
|
|
margin: 24rem 0;
|
|
}
|
|
|
|
&__card {
|
|
position: relative;
|
|
flex-grow: 1;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
overflow: hidden;
|
|
@media (max-width: $media-md) {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: row-reverse;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
&__button {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 10;
|
|
}
|
|
&__img {
|
|
padding: 20rem;
|
|
z-index: 3;
|
|
@media (max-width: $media-md) {
|
|
max-width: 140rem;
|
|
max-height: 240rem;
|
|
padding: 0;
|
|
}
|
|
&--first {
|
|
object-fit: cover;
|
|
z-index: 1;
|
|
max-width: 324rem;
|
|
max-height: 374rem;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: -19rem;
|
|
transform: translateY(-50%);
|
|
@media (max-width: $media-md) {
|
|
position: static;
|
|
transform: none;
|
|
max-width: 190rem;
|
|
max-height: 190rem;
|
|
margin-left: -60rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Singl
|
|
.single-section {
|
|
margin: 60rem 0;
|
|
overflow: hidden;
|
|
@media (max-width: $media-md) {
|
|
padding: var( --container-mob-section) 0;
|
|
margin:0;
|
|
}
|
|
&__container {
|
|
padding: 0rem 40rem 0;
|
|
border-radius: var(--border-r-24);
|
|
background-color: var(--bg-green);
|
|
@media (max-width: $media-md) {
|
|
padding: var(--container-mob-section) var(--container-mob-padding) 0;
|
|
}
|
|
}
|
|
&__item {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 50rem;
|
|
@media (max-width: $media-md) {
|
|
gap: 20rem;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
&__content {
|
|
max-width: 498rem;
|
|
padding: 90rem 0;
|
|
@media (max-width: $media-md) {
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
}
|
|
&__title {
|
|
max-width: 357rem;
|
|
}
|
|
&__description {
|
|
margin: 24rem 0;
|
|
}
|
|
&__card {
|
|
position: relative;
|
|
flex-grow: 1;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
overflow: hidden;
|
|
@media (max-width: $media-md) {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
&__img {
|
|
padding: 0;
|
|
z-index: 3;
|
|
width: 100%;
|
|
}
|
|
}
|