.hero-section {
--font-family: "Manrope", sans-serif;
font-family: var(--font-family);
background: #f1f4f8;
padding: 48px 0;
}
.col-max-6 {
max-width: 50%;
}
.hero-section .swiper {
overflow: hidden;
border-radius: 12px;  }
.hero-section .swiper-slide {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
overflow: hidden;
}
.swiper-slide .bg-img { position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
}
.swiper-slide .bg-img img { }
.hero-section .swiper-button-prev,
.hero-section .swiper-button-next {
display: block;
position: absolute;
z-index: 9;
top: 0;
left: 0;
bottom: 0;
width: 50%;
height: 100%;
cursor: url(//www.hauschildtundblunck.de/wp-content/themes/g23/images/icons/icon-arrow-left.svg) 32 32, pointer;
}
.hero-section .swiper-button-next {
left: auto;
right: 0;
cursor: url(//www.hauschildtundblunck.de/wp-content/themes/g23/images/icons/icon-arrow-right.svg) 32 32, pointer;
}
.hero-section .swiper .swiper-pagination {
bottom: 24px;
}
.hero-section .swiper-pagination-bullet {
position: relative;
width: 64px;
height: 2px;
background: rgba(255, 255, 255, 0.4);
border-radius: 1000px;
overflow: hidden;
}
.hero-section .swiper .swiper-pagination-bullet-active:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
transform: translateX(-100%);
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 1);
animation: bullet 3s linear;
}
@keyframes bullet {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
.hero-section img {
border-radius: 12px;
width: 100%;
height: auto;
}
.hero-section .reviews {
display: inline-flex;
align-items: center;
background: #c4b37c;
border-radius: 4px;
margin-bottom: 16px;
padding: 9px 16px;
color: #fff;
}
.hero-section .icon-star {
position: relative;
display: inline-block;
width: 14px;
height: 14px;
margin-right: 5px;
overflow: hidden;
}
.hero-section .icon-star:before,
.hero-section .icon-star .full {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(//www.hauschildtundblunck.de/wp-content/themes/g23/images/icons/icon-star-white.svg) no-repeat 0 0/14px 14px;
opacity: 0.5;
}
.hero-section .icon-star .full {
opacity: 1;
width: 0;
}
.hero-section .reviews a {
font-family: var(--font-family);
font-weight: 600;
font-size: 13px;
line-height: 100%;
margin: 1px 0 0 3px;
color: #fff;
}
.hero-section .title {
font-family: var(--font-family);
font-weight: 600;
font-size: 40px;
line-height: 140%;
color: #034f9a;
margin-bottom: 14px;
text-align: left;
}
.hero-section .title--larger {
font-size: 48px;
line-height: 125%;
}
.hero-section .description {
font-weight: 500;
font-size: 20px;
line-height: 30px;
color: #364152;
margin-bottom: 40px;
}
.hero-section .subtitle {
font-family: var(--font-family);
font-weight: 600;
font-size: 24px;
line-height: 140%;
color: #222;
margin-bottom: 24px;
margin-top: 0;
text-align: left;
}
.hero-section ul {
padding: 0;
margin: 0 0 30px;
}
.hero-section li {
font-family: var(--font-family);
position: relative;
font-weight: 500;
font-size: 16px;
line-height: 145%;
color: #1d1d1d;
margin-bottom: 20px;
padding-left: 24px;
}
.hero-section li:before {
content: "";
position: absolute;
top: 9px;
left: 0;
width: 12px;
height: 1px;
background: #034f9a;
}
.hero-section .btn {
font-family: var(--font-family);
background: #034f9a;
border-radius: 3px;
color: #fff;
padding: 19px 36px;
font-weight: 700;
font-size: 16px;
line-height: 140%;
align-items: center;
text-align: center;
}
.hero-section .btn:hover {
background: #06417b;
}
@media (max-width: 992px) {
.hero-section img {
width: 100%;
}
.col-max-6 {
max-width: 100%;
}
.hero-section .reviews {
margin-top: 32px;
}
}
@media (max-width: 768px) {
.hero-section {
padding: 32px 0;
}
.hero-section--no-gutter {
padding: 0;
padding-bottom: 60px;
}
.hero-section .swiper-button-prev,
.hero-section .swiper-button-next {
cursor: pointer;
}
.hero-section .reviews {
flex-wrap: wrap;
margin: 32px -15px 12px;
padding: 12px 16px;
border-radius: 0;
}
.hero-section .reviews--no-gutter {
margin: 0 -15px;
width: 100vw;
margin-bottom: 24px;
}
.hero-text-col {
margin-bottom: 40px;
}
.hero-section .reviews a {
display: block;
width: 100%;
margin: 13px 0 3px;
}
.hero-section .title {
font-size: 30px;
margin: 0 0 10px;
}
.hero-section .subtitle {
font-size: 20px;
margin-bottom: 16px;
}
.hero-section ul {
margin-bottom: 24px;
}
.hero-section li {
margin-bottom: 16px;
}
}