html, body {
    height: 100%;
    font-family: 'Patua One', sans-serif; 
    background-color: #f5f5f5;
    color: #333;
    line-height: 1.6;
    padding: 0;
    margin: 0;
    /*overflow-x: hidden;  Causes not being able to scroll down when off screen*/
-webkit-overflow-scrolling: touch; /* smooth scrolling */
  overflow: scroll; /* enable scrolling */
}

/* Hide scrollbar */
body::-webkit-scrollbar {
  display: none;
}


/*Top container with title in it*/

.bv-top-container-vertical{
margin: 0 auto;
max-width: 1000px;
width: 100%;
height: 150px;
margin-top: 25px;
}
.bv-top-title-inner{
display: flex;
justify-content: center;
height: 75px;
align-content: center;
flex-wrap: wrap;
}
.bv-top-text{
font: normal normal bold 3.25rem  'Patua One'; 
color: rgba(53, 28, 117, 1);
}

/*Top container with desc*/
.bv-top-desc-inner{
display: flex;
justify-content: center;
height: 40px;
align-content: center;
flex-wrap: wrap;
}
.bv-top-desc-text{
font: normal normal 1.25rem  'Patua One';
color: rgba(53, 28, 117, 1);
}

/*Middle container with text*/
.bv-middle-container{
background-color: rgba(224, 224, 224, 1);
width: 100%;
margin: auto;

}
.bv-middle-vertical{
margin: 0 auto;
max-width: 1000px;
width: 100%;
height: 100%;
background-color: transparent
}
.bv-middle-inner{
margin: 0 auto;
max-width: 950px;
padding: 25px;

}
.bv-middle-text-inner{
font-style: normal;
font-weight: normal;
}
.bv-middle-text{
text-align: center;
line-height: 30px;
font: normal normal normal 1.25rem 'Questrial';
color: rgba(0, 0, 0, 1);
}

/*Bottom container with text*/
.bv-bottom-vertical{
margin: 0 auto;
max-width: 1000px;
width: 100%;
height: 300px;
background-color: transparent;
}
.bv-bottom-inner{
background-color: transparent;
width: 100%;
height: 125px;
padding-top: 25px;
flex-direction: row;
display: flex;
justify-content: space-between;
gap: 50px;

}

/*Bottom left*/
.bv-bottom-left-title-container{
margin-left: 0 auto;
text-align: left;
max-width: 350px;
width: 100%;
}
.bv-bottom-left-title{
max-width: 350px;
width:100%;
}

.bv-bottom-left-title-text{
font: normal normal 1.75rem  'Patua One';
color: rgba(53, 28, 117, 1);
padding-left: 5px;
margin: 0;
}
.bv-bottom-left-desc{
max-width: 300px;
width:100%;
position: relative;
bottom: 20px;
}
.bv-bottom-left-desc-text{
font: normal normal 1.4rem  'Patua One';
color: rgba(53, 28, 117, 1);
padding-left: 5px;  
}

/*Bottom right*/

.bv-bottom-right-title-container{

text-align: right;
max-width: 150px;
width: 100%;
padding-right: 5px;
}
.bv-bottom-right-title{
max-width: 150px;
width:100%
}
.bv-bottom-right-title-text{
font: normal normal 1.75rem  'Patua One';
color: rgba(53, 28, 117, 1);
margin: 0;
}
.bv-bottom-right-desc{
max-width: 150px;
width: 100%;
position: relative;
bottom: 15px;
}
.bv-bottom-right-desc-text{
font: normal normal 1.25rem  'Patua One';
color: rgba(53, 28, 117, 1);
}



/*Media Querys*/







/* 📱 Small devices (below 375px) */
@media only screen and (max-width: 374px){
/*Top*/
.bv-top-container-vertical{
height: auto;
padding-top: 15px;
padding-bottom: 10px;
margin: 0;
}
.bv-top-title-inner{
    height: auto;
}
.bv-top-text{
font-size: 7.5vw;
margin: 0;
}
.bv-top-desc-inner{
text-align: center;
padding: 5px
}
.bv-top-desc-text{
font-size: 5vw;
}

/*Middle*/
.bv-middle-text{
font-size: 5vw;
}
/*Bottom*/
.bv-bottom-vertical{
max-width: auto;
}
.bv-bottom-inner{
padding-top: 10px;
gap: 0;
}
.bv-bottom-left-title-container{
max-width: 300px ;
margin: 0;
}
.bv-bottom-left-title-text{
font-size: 4vw;
}
.bv-bottom-left-desc-text{
font-size: 4vw;
}

.bv-bottom-right-title-text{
font-size: 5vw;
}
.bv-bottom-right-desc-text{
font-size: 5vw;
}
.bv-bottom-left-title{
margin-bottom: 25px;
}
}

/*Small Device(landscape Phones, >576*/

@media only screen and (min-width:375px) and (max-width: 425px){

/*Top*/
.bv-top-container-vertical{
height: auto;
padding-top: 15px;
padding-bottom: 10px;
margin-top: 0;
}

.bv-top-title-inner{
height: 30px;
}
.bv-top-text{
font-size:7.5vw;
}

.bv-top-desc-inner{
margin-top: 2.5vw;
}
.bv-top-desc-text{
font-size:4.5vw;
text-align: center;
padding-left: 1vw;
padding-right: 1vw;
height: 12.5vw;
}

/*Middle*/
.bv-middle-inner{
padding:1vw;
padding-top:2.5vw;
padding-bottom:2.5vw;
}
.bv-middle-text{
    font-size:5vw;
}

/*Bottom*/
.bv-bottom-inner{
gap: 5vw;
padding-top: 1.5vw;
}

.bv-bottom-left-title-text{
font-size: 4vw;
}
.bv-bottom-left-title{
margin-bottom: 7.5vw;
margin-top: 1vw;

}
.bv-bottom-left-desc-text{
font-size: 3.75vw;
}

.bv-bottom-right-title-text{
font-size: 5vw;
}
.bv-bottom-right-desc-text{
font-size: 5vw;
}

.bv-bottom-right-title-container{
max-width: 135px;
}
.bv-bottom-left-title-container{
max-width: auto;
}
}


/*Small devices (Tablets and large phones, 600px and up*/

@media only screen and (min-width: 426px) and (max-width: 599px){

/*Top*/
.bv-top-container-vertical{
margin-top: 2.5vw;
height: 17.5vw;
}
.bv-top-title-inner{
height: 5vw;
margin-bottom: 3vw;
}
.bv-top-text{
font-size: 7.5vw;
}

.bv-top-desc-inner{
text-align: center;
}
.bv-top-desc-text{
font-size: 3.5vw;
padding: 2.5vw;
padding-top: 0;
}
/* Middle*/
.bv-middle-inner{
padding:1.5vw;
padding-top:2.5vw;
padding-bottom:2.5vw;
}
.bv-middle-text{
font-size: 4.25vw;
}
/*Bottom*/
.bv-bottom-inner{
gap: 5vw;
padding-top: 1.5vw;
}
.bv-bottom-left-title{
margin-bottom: 7vw;
margin-top: 1vw;
}
.bv-bottom-left-title-text{
    font-size: 4.0vw;
}

.bv-bottom-left-desc-text{
font-size: 3.5vw;
}

.bv-bottom-right-title-text{
font-size: 5vw;
}
.bv-bottom-right-title{
margin-bottom: 5vw;
}
}


/*Small devices (Tablets and large phones, 600px and up*/
@media only screen and (min-width: 600px) and (max-width:767px){
.bv-top-text{
    font-size: 7.5vw;
}
.bv-top-desc-text{
font-size: 3.75vw;
}
.bv-top-container-vertical{
height: auto;
padding-top: 10px;
padding-bottom: 10px;
margin: 0 auto;
}
.bv-bottom-inner{
padding:5px;
margin: 0  auto;
width: auto;
gap: auto;
}
.bv-bottom-right-title-container{
text-align: right;
}
.bv-bottom-left-title-text{
margin-bottom: 20px
}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width:991px){
.bv-top-container-vertical{
height: auto;
padding-top: 10px;
padding-bottom: 15px;
margin: 0;
}
.bv-top-text{
margin: 0;
}
.bv-top-desc-text{
margin: 0;
}
.bv-top-title-inner{
    height: auto;
}
.bv-top-desc-inner{
    height: auto;
}
.bv-bottom-inner{
padding-top: 10px;
}
}


/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) and (max-width:1199px) {
.bv-top-container-vertical{
height: auto;
padding-top: 10px;
padding-bottom: 15px;
margin: 0;
max-width: 2656px;
}
.bv-top-text{
margin: 0 auto
}
.bv-top-desc-text{
margin: 0;
}
.bv-top-title-inner{
    height: auto;
}
.bv-top-desc-inner{
    height: auto;
}
.bv-bottom-inner{
padding-top: 10px;
}


}


/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) and (max-width:1439px){
.bv-top-container-vertical{
height: auto;
padding-top: 10px;
padding-bottom: 15px;
margin: 0;
max-width: 2656px;
}
.bv-top-text{
margin: 0 auto
}
.bv-top-desc-text{
margin: 0;
}
.bv-top-title-inner{
    height: auto;
}
.bv-top-desc-inner{
    height: auto;
}
.bv-bottom-inner{
padding-top: 10px;
}  
}

@media only screen and (min-width: 1440px) and (max-width:2565px){
.body{
overflow: hidden;
}
    .bv-top-container-vertical{
height: auto;
padding-top: 10px;
padding-bottom: 15px;
margin: 0;
max-width: 2650px;
}
.bv-top-text{
margin: 0 auto;
font-size: 3vw;
}
.bv-top-desc-text{
margin: 0;
font-size: 1.25vw;
}
.bv-top-title-inner{
    height: auto;
}
.bv-top-desc-inner{
    height: auto;
}
.bv-middle-text{
font-size: 1vw;
line-height:1.2;
}
.bv-bottom-left-title-container{
max-width: 550px;
}
.bv-bottom-left-title{
max-width: 550px;
}
.bv-bottom-inner{
padding-top: 10px;
} 
.bv-bottom-left-title-text{
font-size: 1.25vw;
}
.bv-bottom-left-title{

}
.bv-bottom-left-desc{
max-width: 550px;
}
.bv-bottom-left-desc-text{
font-size: 1.25vw;
max-width: 450px;
}

.bv-bottom-vertical{
height: auto;
}

.bv-bottom-right-title-text{
font-size: 1.25vw;
margin-bottom: 30px;
}
}