body.home .hero_banner >.container {
@media (max-width: 991px) {
padding-top: 200px !important;
padding-bottom: 50px !important;
}
}
body:not(.home) .hero_banner >.container {
@media (max-width: 991px) {
padding-top: 100px !important;
padding-bottom: 50px !important;
}
}
.hero_banner {
display: flex;
flex-direction: column;
background: rgb(16,16,46);
background: linear-gradient(180deg, rgba(16,16,46,1) 0%, rgba(0,0,106,1) 45%, rgba(255,255,255,0.022846638655462215) 100%);
&.full {
height: 100vh;
}
& > .container {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
z-index: 2;
flex-wrap: wrap;
@media (max-width: 991px) {
align-items: center !important;
justify-content: center !important;
text-align: center !important;
& .hero_banner_inner {
align-items: center !important;
}
& .call_to_action_buttons {
justify-content: center !important;
}
}
&.left {
align-items: flex-start;
text-align: left;
& .call_to_action_buttons {
justify-content: flex-start;
}
}
&.center {
align-items: center;
justify-content: center;
text-align: center;
& .hero_banner_inner {
align-items: center;
}
& .call_to_action_buttons {
justify-content: center;
}
}
&.right {
align-items: flex-end;
text-align: right;
& .call_to_action_buttons {
justify-content: flex-end;
}
}
& .hero_banner_inner {
width: 50%;
max-width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
@media (max-width: 991px) {
width: 100%;
}
& h1 {
font-size: 6rem;
margin: 0 0 3rem;
color: var(--white);
@media (min-width: 768px) and (max-width: 991px) {
font-size: 5rem;
}
@media (max-width: 767px) {
font-size: 4rem;
}
& span {
font-size: inherit;
font-weight: inherit;
color: var(--white);
}
}
& p {
font-size: 2rem;
color: var(--white);
@media (max-width: 991px) {
font-size: 1.8rem;
}
}
& .call_to_action_buttons {
margin: 4rem 0 0;
}
}
}
& img {
width: 100%;
height: 100%;
top: 0;
left: 0;
object-fit: cover;
object-position: center;
position: absolute;
z-index: 0;
}
& img.hero_banner_image_desktop {
@media (max-width: 767px) {
display: none;
}
}
& img.hero_banner_image_mobile {
@media (min-width: 768px) {
display: none;
}
}
}