.hero {
margin-bottom: 3.75rem; }
@media all and (min-width: 768px) {
.hero {
margin-bottom: 5rem; } }
@media all and (min-width: 1024px) {
.hero {
margin-bottom: 6.25rem; } }
@media all and (min-width: 2070px) {
.hero {
margin-bottom: 10rem; } }
.hero .hero-img {
width: 100%;
height: auto; }
.hero .img-left, .hero .img-right {
position: absolute;
z-index: 2;
max-width: 20%; }
.hero .img-left {
left: 20px; }
@media all and (min-width: 768px) {
.hero .img-left {
left: 40px; } }
@media all and (min-width: 1560px) {
.hero .img-left {
left: 80px; } }
.hero .img-right {
bottom: 0;
right: 20px; }
@media all and (min-width: 768px) {
.hero .img-right {
right: 40px; } }
@media all and (min-width: 1560px) {
.hero .img-right {
right: 80px; } }
.hero .outer-layout-wrap {
position: relative;
overflow: hidden; }
.hero .outer-layout-wrap .deskImg {
display: none; }
.hero .outer-layout-wrap .smallImg {
display: inline; }
.hero .outer-layout-wrap .gradient {
position: absolute;
width: calc(100% - 40px);
left: 20px;
height: 75%;
bottom: 0;
z-index: 1;
background: linear-gradient(0deg, rgba(0, 0, 190, 0.801541) 0%, rgba(0, 0, 190, 0) 80%); }
@media all and (min-width: 768px) {
.hero .outer-layout-wrap .gradient {
width: calc(100% - 80px);
left: 40px; } }
@media all and (min-width: 1560px) {
.hero .outer-layout-wrap .gradient {
width: calc(100% - 160px);
left: 80px; } }
.hero .outer-layout-wrap .headlineWrap {
position: absolute;
bottom: 0;
z-index: 20;
left: 20px;
right: 20px;
padding: 0 20px 25px 20px; }
@media all and (min-width: 768px) {
.hero .outer-layout-wrap .headlineWrap {
left: 40px;
right: 40px; } }
@media all and (min-width: 1560px) {
.hero .outer-layout-wrap .headlineWrap {
left: 80px;
right: 80px; } }
@media all and (min-width: 768px) {
.hero .outer-layout-wrap .headlineWrap {
padding: 0 40px 60px 40px; } }
@media all and (min-width: 1266px) {
.hero .outer-layout-wrap .headlineWrap {
padding-left: clamp(2.5rem, calc(-0.65rem + 3.99vw), 4.5rem);
padding-bottom: clamp(3.75rem, calc(0.1rem + 4.61vw), 6.0625rem); } }
.hero .outer-layout-wrap .headlineWrap h2 {
padding-bottom: .3125rem; }
@media all and (min-width: 1266px) {
.hero .outer-layout-wrap .headlineWrap h2 {
padding-bottom: clamp(0.3125rem, calc(-0.18rem + 0.62vw), 0.625rem); } }
@media all and (max-width: 1023px) {
.hero .outer-layout-wrap {
aspect-ratio: 1/ 1; } }
@media all and (min-width: 1024px) {
.hero .deskImg {
display: inline !important; }
.hero .smallImg {
display: none !important; }
.hero.fullheight .outer-layout-wrap {
height: calc(100vh - var(--header-medium)); } }
@media all and (min-width: 1024px) and (min-width: 1266px) {
.hero.fullheight .outer-layout-wrap {
height: calc(100vh - clamp(7.0625rem, calc(-0.52rem + 9.58vw), 11.875rem)); } }
@media all and (min-width: 1024px) {
.hero.fullheight .outer-layout-wrap .hero-img {
width: 100%;
height: 100%;
object-fit: cover; } }