.block-main-banner {
position: relative;
margin-bottom: 60px;
}
.block-main-banner .block-main-swiper .swiper-wrapper .swiper-slide {
min-height: 650px;
display: flex;
background-repeat: no-repeat;
background-size: cover;
&::before {
content: '';
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: linear-gradient(122deg,rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 0) 100%);
}
}
.block-main-banner .block-main-swiper .swiper-wrapper .swiper-slide .container {
display: flex; align-items: start;
justify-content: space-between;
padding-top: clamp(60px, 41.6667px + 4.1667vw, 120px);
}
.block-main-banner .block-main-swiper .swiper-wrapper .swiper-slide .container .block-main-banner-offer { max-width: 780px;
padding: 10px 0px;
padding-bottom: 75px;
padding-top: 0px;
}
.block-main-banner .block-main-swiper .swiper-wrapper .swiper-slide .container .block-main-banner-offer .title {
font-weight: 900;
font-size: 40px;
line-height: 120%;
text-transform: uppercase;
color: #FFFFFF;
margin-bottom: 10px;
margin-top: 0px;
}
.block-main-banner .block-main-swiper .swiper-wrapper .swiper-slide .container .block-main-banner-offer .subtitle {
font-weight: 500;
font-size: 16px;
line-height: 150%;
color: #ffffff;
max-width: 490px;
}
.block-main-banner .block-main-swiper .swiper-wrapper .swiper-slide .container .block-main-banner-offer .btn-main-var-two {
margin-top: 20px;
}
.block-main-banner .swiper-button-prev,
.block-main-banner .swiper-button-next {
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.25);
-webkit-backdrop-filter: blur(25px);
backdrop-filter: blur(25px);
border-radius: 50%;
transition: background 0.3s ease;
}
.block-main-banner .swiper-button-prev::after,
.block-main-banner .swiper-button-next::after {
font-size: 14px;
font-weight: 500;
color: rgba(255, 255, 255, 0.5);
transition: color 0.3s ease;
}
.block-main-banner .swiper-button-prev:hover,
.block-main-banner .swiper-button-next:hover {
background: #FEC400;
}
.block-main-banner .swiper-button-prev:hover::after,
.block-main-banner .swiper-button-next:hover::after {
color: #273141;
}
.block-main-banner .swiper-button-prev {
left: calc((100% - 1470px) / 2);
}
.block-main-banner .swiper-button-next {
right: calc((100% - 1470px) / 2);
}
.block-main-banner .swiper-pagination {
bottom: 35px;
}
.block-main-banner .swiper-pagination .swiper-pagination-bullet {
width: 20px;
height: 6px;
background: #FFFFFF;
border-radius: 3px;
opacity: 1;
}
.block-main-banner .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
background: #FEC400;
}
@media (max-width: 1500px) {
.block-main-banner .block-main-swiper .swiper-wrapper .swiper-slide .container .block-main-banner-offer {
margin-left: 70px;
}
.block-main-banner .swiper-button-prev {
left: 15px;
}
.block-main-banner .swiper-button-next {
right: 15px;
}
}
@media (max-width: 1200px) {
.block-main-banner .block-main-swiper .swiper-wrapper .swiper-slide {
min-height: 450px;
}
}
@media (max-width: 991px) {
.block-main-banner {
margin-bottom: 40px;
}
.block-main-banner .block-main-swiper .swiper-wrapper .swiper-slide .container .block-main-banner-offer {
margin-left: 0px;
}
.block-main-banner .block-main-swiper .swiper-wrapper .swiper-slide .container .block-main-banner-offer .title {
font-size: 30px;
}
.block-main-banner .swiper-button-prev,
.block-main-banner .swiper-button-next {
display: none;
}
}
@media (max-width: 767px) {
.block-main-banner .block-main-swiper .swiper-wrapper .swiper-slide {
min-height: 350px;
}
.block-main-banner .block-main-swiper .swiper-wrapper .swiper-slide .container .block-main-banner-offer {
max-width: 100%;
text-align: center;
}
.block-main-banner .block-main-swiper .swiper-wrapper .swiper-slide .container .block-main-banner-offer .btn-main-var-two {
margin-left: auto;
margin-right: auto;
}
}
@media (max-width: 480px) {
.block-main-banner .block-main-swiper .swiper-wrapper .swiper-slide .container .block-main-banner-offer .title {
font-size: 24px;
}
}
.block-main-banner-icons {
position: relative; display: flex;
align-items: start;
justify-content: start;
flex-wrap: wrap;
gap: clamp(15px, 10.4167px + 1.0417vw, 30px); width: 100%; margin-top: 20px;
@media(max-width: 767px) {
& {
justify-content: center;
}
}
}
.block-main-banner-icon-item {
position: relative;
width: min-content;
display: flex;
align-items: center;
gap: clamp(10px, 6.9444px + 0.6944vw, 20px);
}
.block-main-banner-icon-text {
display: none;
}
.block-main-banner-icon {
position: relative;
width: 0%; min-width: clamp(30px, 20.8333px + 2.0833vw, 60px);
height: auto;
aspect-ratio: 1;
object-fit: contain;
object-position: center;
}
.block-main-banner-icon-text {
position: relative;
color: #ffffff;
margin: 0px;
}
@media(max-width: 1200px) {
.block-main-banner .block-main-swiper .swiper-wrapper .swiper-slide .container {
flex-direction: column;
padding-bottom: clamp(60px, 41.6667px + 4.1667vw, 120px);
}
.block-main-banner-icons {
width: auto; }
}
@media (max-width: 991px) {
.block-main-banner-icons {
padding-left: 0px;
padding-right: 0px;
}
}
@media(max-width: 720px) {
.block-main-banner-icons {
grid-template-columns: repeat(1, 1fr);
}
}
.block-main-swiper {
& .swiper-slide > .container {
z-index: 7;
}
& .gradient-blur {
position: fixed;
z-index: 5;
inset: auto 0 0 0;
height: 100%;
pointer-events: none;
z-index: 1;
}
& .gradient-blur > div,
& .gradient-blur::before,
& .gradient-blur::after {
position: absolute;
inset: 0;
}
& .gradient-blur::before {
content: "";
z-index: 1;
backdrop-filter: blur(0.5px);
mask: linear-gradient(
to left,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 1) 12.5%,
rgba(0, 0, 0, 1) 25%,
rgba(0, 0, 0, 0) 37.5%
);
}
& .gradient-blur > div:nth-of-type(1) {
z-index: 2;
backdrop-filter: blur(1px);
mask: linear-gradient(
to left, rgba(0, 0, 0, 0) 5%,
rgba(0, 0, 0, 1) 25%,
rgba(0, 0, 0, 1) 37.5%,
rgba(0, 0, 0, 0) 50%
);
}
& .gradient-blur > div:nth-of-type(2) {
z-index: 3;
backdrop-filter: blur(2px);
mask: linear-gradient(
to left, rgba(0, 0, 0, 0) 18%,
rgba(0, 0, 0, 1) 65.5%,
rgba(0, 0, 0, 1) 50%,
rgba(0, 0, 0, 0) 62.5%
);
}
& .gradient-blur > div:nth-of-type(3) {
z-index: 4;
backdrop-filter: blur(2px);
mask: linear-gradient(
to left, rgba(0, 0, 0, 0) 30%,
rgba(0, 0, 0, 1) 60%,
rgba(0, 0, 0, 1) 62.5%,
rgba(0, 0, 0, 0) 75%
);
}
& .gradient-blur > div:nth-of-type(4) {
z-index: 5;
backdrop-filter: blur(3px);
mask: linear-gradient(
to left, rgba(0, 0, 0, 0) 40%,
rgba(0, 0, 0, 1) 80.5%,
rgba(0, 0, 0, 1) 75%,
rgba(0, 0, 0, 0) 87.5%
);
}
& .gradient-blur > div:nth-of-type(5) {
z-index: 6;
backdrop-filter: blur(4px);
mask: linear-gradient(
to left, rgba(0, 0, 0, 0) 25%,
rgba(0, 0, 0, 1) 75%,
rgba(0, 0, 0, 1) 87.5%,
rgba(0, 0, 0, 0) 100%
);
}
& .gradient-blur > div:nth-of-type(6) {
z-index: 7;
backdrop-filter: blur(5px);
mask: linear-gradient(
to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 55%,
rgba(0, 0, 0, 1) 100%
);
}
& .gradient-blur::after {
content: "";
z-index: 8;
backdrop-filter: blur(64px);
mask: linear-gradient(
to left,
rgba(0, 0, 0, 0) 87.5%,
rgba(0, 0, 0, 1) 100%
);
}
}
@media(max-width: 767px) {
.block-main-banner .block-main-swiper .swiper-wrapper .swiper-slide .container .block-main-banner-offer {
margin-left: auto;
margin-right: auto;
}
}
@media(max-width: 720px) {
.block-main-banner-icon-item {
justify-content: center;
}
}
@media(max-width: 400px) {
.block-main-banner-icon-text {
font-size: 14px;
}
}