:root {
--tp-bnr-sze: 265px; }
@media only screen and (min-width: 992px) and (max-width: 1199px) {
:root {
--tp-bnr-sze: 260.667px; } }
@media only screen and (min-width: 768px) and (max-width: 991px) {
:root {
--tp-bnr-sze: 247.95px; } }
@media only screen and (max-width: 767px) {
:root {
--tp-bnr-sze: 247.75px; } }
.home-intro-banner {
height: calc(100vh - var(--tp-bnr-sze));
background: #004742;
color: #fff;
background: #00413d url(//scriptel.com/images/home/Hero-Background-XL.webp) no-repeat center top;
background-size: cover;
box-shadow: inset 0px -50px 120px 40px black; }
.home-intro-banner .container {
height: 100%; }
.home-intro-banner .display {
display: flex;
height: 100%; }
.home-intro-banner .image {
flex: 0 1 auto;
display: flex;
flex-direction: column;
justify-content: center; }
.home-intro-banner .text {
flex: 1 1 560px;
padding: 0 30px;
font-size: clamp(1.5rem, calc( 2vw + 0.5rem ), 1.938rem);
display: flex;
flex-direction: column;
justify-content: center; }
.home-intro-banner .buttons {
display: none; }
.home-intro-banner .home-intro-banner .btn-primary {
background-color: #00e2f9;
border-color: #00e2f9;
color: #000; }
@media only screen and (min-width: 769px) and (max-width: 1199px) {
.home-intro-banner {
background-image: url(//scriptel.com/images/home/Hero-Background-LG.jpg); } } @media only screen and (max-width: 768px) {
.home-intro-banner {
background-image: url(//scriptel.com/images/home/Hero-Background-MD.jpg); }
.home-intro-banner .container {
display: flex;
flex-direction: column;
justify-content: center; }
.home-intro-banner .display {
flex-direction: column;
justify-content: center; }
.home-intro-banner .image {
max-width: 55%;
margin: 30px auto 0; }
.home-intro-banner .text {
flex: 0 1 auto;
padding: 0 30px 15px;
margin: 15px auto;
font-size: 1.8rem; } }
@media only screen and (max-width: 576px) {
.home-intro-banner .text {
padding: 0 15px;
font-size: 1.5rem; } }