#hero-block { }
#hero-block .hero__img {
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
max-height: 897px;
}
#hero-block .hero__container {
position: relative;
z-index: 1;
padding-top: 172px;
padding-bottom: 60px;
}
#hero-block .hero__footnote {
margin: 20px 0;
max-width: 480px;
color: var(--text-alt-main);
}
#hero-block .hero__container .hero__title {
color: var(--text-alt-head);
font-size: clamp(1.5rem, 1.05rem + 2.25vw, 3.75rem);
}
#hero-block .hero__container .hero__title span {
font-weight: 400;
}
#hero-block .hero__container .hero__list ul {
display: flex;
flex-direction: column;
gap: 15px;
list-style: none;
}
#hero-block .hero__container .hero__list ul li {
color: var(--text-alt-main);
padding-left: 10px;
font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
}
#hero-block .hero__container .hero__list ul li span {
font-family: var(--font-family);
font-weight: 600;
font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
line-height: 110.00000000000001%;
letter-spacing: 0%;
color: inherit;
}
#hero-block .hero__container .hero__list ul li::before {
content: " ";
width: 10px;
height: 10px;
background: var(--colors-main);
display: inline-block;
margin-right: 10px;
}
#hero-block .hero__container .btn-container {
display: flex;
gap: 30px;
align-items: center;
margin-top: 50px;
}
#hero-block .hero__container .hero__btn {
padding: 15px 30px 15px 25px;
gap: 10px;
border-radius: 10px;
box-shadow: 0px 4px 0px 0px #cc4500;
position: relative;
z-index: 1;
transition: var(--transition);
background: var(--colors-main);
}
#hero-block .hero__container .hero__btn:hover {
transition: var(--transition);
}
#hero-block .hero__container .hero__btn::before {
content: "";
background: linear-gradient(260.8deg, #ff5700 8.5%, #ff874a 100%);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
width: 100%;
height: 100%;
transition: var(--transition);
border-radius: 10px;
}
#hero-block .hero__container .hero__btn:hover::before {
transition: var(--transition);
opacity: 0;
}
#hero-block .hero__container .hero__btn .btn__text {
color: var(--text-alt-head);
}
#hero-block .hero__container .btn-container .btn-add__text {
color: var(--text-alt-main);
max-width: 150px;
}
#hero-block .hero__container .btn-container .btn-add__text span {
color: var(--colors-main);
}
#hero-block .hero__advants {
display: flex;
gap: 30px;
margin-top: 110px;
}
#hero-block .hero__advants .advant {
background: var(--bg-primary-main);
padding: 20px;
max-width: 350px;
box-shadow: 0px 0px 31px 0px #1c1a191a;
display: flex;
flex-direction: column;
gap: 10px;
}
#hero-block .hero__advants .advant .advant-top {
display: flex;
gap: 15px;
min-height: 60px;
}
#hero-block .hero__advants .advant .advant-top .advant-icon {
width: 40px;
height: 40px;
flex-shrink: 0;
}
#hero-block .hero__advants .advant .advant-top .advant-title {
font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1.25rem);
}
#hero-block .hero__img img {
object-position: right;
}
@media (max-width: 972px) {
#hero-block .hero__advants .advant .advant-top {
min-height: 80px;
}
}
@media (max-width: 900px) {
#hero-block .hero__container {
padding-bottom: 20px;
}
}
@media (max-width: 768px) {
#hero-block .hero__advants .advant {
max-width: unset;
width: 100%;
}
#hero-block .hero__advants .advant .advant-top {
min-height: unset;
}
#hero-block .hero__advants {
flex-direction: column;
}
#hero-block .hero__container {
padding-top: 40px;
}
}
@media (max-width: 600px) {
#hero-block .hero__img::before {
content: " ";
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.45);
z-index: 1;
}
#hero-block .hero__container .btn-container {
flex-direction: column;
align-items: start;
}
#hero-block .hero__container .btn-container .btn-add__text {
max-width: unset;
}
#hero-block .hero__advants {
margin-top: 80px;
gap: 20px;
}
.btn-container {
margin-top: 20px;
}
}
@media (max-width: 450px) {
#hero-block .hero__container .hero__list ul {
display: flex;
flex-direction: column;
gap: 7px;
list-style: none;
}
#hero-block .hero__advants .advant .advant-desc {
display: none;
}
#hero-block .hero__advants {
margin-top: 50px;
gap: 10px;
}
#hero-block .hero__advants .advant .advant-top .advant-title {
display: flex;
align-items: center;
}
#hero-block .hero__advants .advant .advant-top .advant-title br {
display: none;
}
#hero-block .hero__advants .advant .advant-top .advant-icon {
height: 30px;
width: 30px;
}
#hero-block .hero__container .hero__btn {
width: fit-content;
padding-top: 11.5px;
padding-bottom: 11.5px;
padding-left: 29px;
padding-right: 34px;
}
#hero-block .hero__container {
padding-bottom: 20px;
}
#hero-block {
min-height: 740px;
}
#hero-block .hero__img {
max-height: 820px;
}
}