[id^='videoBanner'],
.banner-image{
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

.banner-inner-content {
    /* color:@textColor; */
    position:absolute;
    top:60%;
    left:0;
    padding:1rem 3rem;
    width:100%;
    font-family: 'Widescreen';
}

/* Could be reused */
.ora-header-title{
    font-family: 'Widescreen';
    font-weight: 700;
}

.fw-700{
    font-weight: 700;
    font-family: Montserrat-Bold;
}
.fw-400{
    font-weight: 400;
}

.ora-button-gray{
    color:#949494;
}

.ora-bg-lightblue{
    background: #EAF8FA;
}

.ora-bg-lighterblue{
    background: #f3fbfd;
}

.ora-bg-blue{
    background: #57b7cf!important;
}

.ora-bg-gray{
    background:#f8f8f8;
}

.ora-text-lightblue{
    color: #EAF8FA;
}

.ora-text-blue{
    color: #57b7cf;
}

.ora-text-blue-news{
    color: #80BFD0;
}

.ora-text-gray{
    color:#949494;
}

.ora-text-darkgray{
     color:#363636 !important;
}

.ora-button:hover{
    color:black;
}


.navbar{
    background-color: transparent!important;
}





/* Carousel styling */
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%363636' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}
   
.carousel-control-next-icon {
     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%363636' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}

.carousel-indicators .active{
    background-color: #363636!important;
}

.carousel-indicators [data-bs-target]{
width:50px!important;
margin-right: 20px!important;
}


.ora-electrified-content{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    /* for content purposes only */
}

.ora-electrified-content .ora-button{
    position: absolute;
    bottom: 0;
    margin: 2rem 2rem 2rem 0;
}


.ora-test-drive-content{
    position: relative;
    color:white;
    background: #57b7cf;


}
.ora-test-drive-content .ora-button{
    position: absolute;
    bottom: 0;
    margin: 2rem 2rem 2rem 0;
}

/* button which can be reused */
.banner-inner-content .ora-button{
    padding: 14px 30px;
    font-family: Montserrat-Bold;
    font-weight: 700;
    border:none;
    
}

#carousel-banner .carousel-indicators{
    margin-bottom: 8rem!important;
}


.home-second-container{
    height: 100vh;
}

.home-second-container button{
   position: absolute;
}


#whatsNew .card img{
    transition: all 2s ease;
    width: 100%;
    height: 20vw;
    object-fit: cover;

}

#whatsNew .card:hover img{
    transform: scale(1.3);
}



  /* Mobile only styling */
  @media only screen and (max-width: 768px) {
  
    .banner-inner-content {
        color: #fff !important;
        position: relative;
        bottom:auto;
        top:auto;
        left: 0;
        padding: 2rem;
        width: 100%;
        font-family: 'Widescreen';
        background-color: #5fb7cf;
        margin-top: -0.5rem;
       
    }
    .banner-inner-content .ora-button{
        width:100%;
        text-align: center;
        display: block;
    }

    [id^='videoBanner'],
    .banner-image{
        height:auto;
    }

    #whyOraCarousel .carousel-caption,
    #whatsNewCarousel .carousel-caption {
        position: relative;
        padding-bottom: 1.25rem;
        color: #fff;
        text-align: center;
        left:0;
        right:0;
    }

    #carousel-banner .carousel-indicators{
        margin-bottom: 2.5rem!important;
    }
    #homeVehicleCarousel .carousel-indicators{
        margin-bottom: 3rem!important;
    }
    .carousel-indicators [data-bs-target] {
        width: 40px!important;
        margin-right: 10px!important;
    }

    
    .home-second-container{
        height: 100%!important;
    }

    .home-second-container button{
        position: relative!important;
    }

    .ora-electrified-content .ora-button,
    .ora-test-drive-content .ora-button{
        position: relative;
        margin: 1rem 1rem 1rem 0;
    }

    .ora-electrified-content .ora-button{
        bottom: 0;
        margin: 2rem 0!important;
    }

    #whyOraCarousel .carousel-indicators button{
        background-color: #84c8da;
    }
    #whyOraCarousel .carousel-indicators button.active{
        background-color: #84c8da!important;
    }

    
  }