@media screen and (max-width: 800px) {
    .footer {
        font-size: 2vw!important;
    }
}



@media screen and (max-width: 1024px) and (orientation: portrait){
.footer {
    font-size: 3vw!important;
} 
.body1 {  
      font-family: "Sofia", sans-serif;
      background-color: black;
      height: 100%;
  }
}


@media screen and (min-width: 1200px) and  (max-width: 1300px) {
.brand-text{
    font-size: 1rem!important;
}
}

@media screen and (min-width: 1300px) and  (max-width: 1400px) {
.brand-text{
    font-size: 1rem!important;
}

}

@media screen and (min-width: 1400px) and  (max-width: 1600px) {
.brand-text{
    font-size: 1rem!important;
}
}

@media screen and (min-width: 1600px) and  (max-width: 1800px) {

.brand-text{
    font-size: 1.2rem!important;
}

#container, #container2{
    font-size: 1rem!important;
}


}

@media screen and (min-width: 1800px) and  (max-width: 2000px) {

.brand-text{
    font-size: 1.3rem!important;
}
#container, #container2{
    font-size: 1rem!important;
}

}

@media screen and (min-width: 2000px) and  (max-width: 3000px) {

.brand-text{
    font-size: 1.7rem!important;
}
#container, #container2{
    font-size: 1.2rem!important;
}

}

@media screen and (min-width: 3000px) and  (max-width: 4000px) {

.brand-text{
    font-size: 2.2rem!important;
}
#container, #container2{
    font-size: 1.5rem!important;
}

}

@media (min-width: 4000px)  {

.brand-text{
    font-size: 3.5rem!important;
}
#container, #container2{
    font-size: 2rem!important;
}

}





html {
height: 100%;
}

.body1 {
    font-family: "Sofia", sans-serif;
    background-color: black;
height: 100%;
}

@media screen and (max-width: 1024px) and (orientation: portrait){
.body1 {  
    font-family: "Sofia", sans-serif;
    background-color: black;
    height: 100%;
  }
}



.brand-image{
border-radius: 50%;
height: 5vh;
width: auto;
/* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
}
.brand-text{
font-size: 1rem;
font-weight: bold;
color: white!important;
}


.footer {
font-size: 1vw;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
/* background-color: black; */
color: white;
font-weight:bold;
text-align: center;
/* opacity: 0.8; */
}

.brand-text:hover{
background-color: darkgray;
/* color: white !important; */
}

  .navbar{
    background-color: black;
    }

.carousel-img{
    width:auto;
    height:80vh;
    margin-top: 20px;
}

#container{
    background-color: white;
    font-size: 0.7rem;
    margin-top: 100px;
    font-weight:bold;
}

#container2{
    font-family: "Arial";
    background-color: white;
    font-size: 0.7rem;
    font-weight:bold;
}