body { overflow: hidden; margin: 0!important; padding:0!important;}

::-webkit-scrollbar {
    display: none;
  }

.u-body {
  margin: 0px;
  font-family: Roboto,sans-serif;
}

.row-box
{
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
width: 100%;
}

.home-box
{
    background-color: #353535;    
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}

.column-box
{
position: relative;
width: 100%;
height: 100%;
display: flex;
max-width: 1200px;
justify-content: center;
flex-direction: column;
align-items: center;
}

.logo-box
{
position: relative;
max-width: 400px;
width: 30vw;
min-width: 200px;
height: 20vh;
max-height: 200px;
display: flex;
justify-content: center;
align-items: center;
margin: 20px 20px 120px 20px;
padding-top: 10px;
}

.logo
{
width: 100%;
}

.card
{
background: rgba(255, 255, 255, 0.15 );
border-radius: 25px;
width: 80%;
min-height: 200px;
margin: 20px;
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
height: 520px;
max-width: 520px;
overflow: hidden;
padding: 20px 0px 30px 0px;
transition: background-color 0.2s ease-out 50ms;
}

.card:hover {
    background-color: rgba(255, 255, 255, 0.13 );
    cursor: pointer;
  }

.text-box
{
margin: 20px 0px 0px 0px;
justify-content: center;
flex-direction: column;
align-items: center;
display: flex;
}

.card-image
{
transition: top 0.2s ease-out 50ms;
display: flex;
justify-content: center;
max-width: 240px;
max-height:240px;
min-width: 60px;
min-height:60px;
width: 80%;
align-items: center;
position: relative;
margin: 0px;
}
.h3-card
{
margin: auto 0px 0px 0px;
color: #ffffff;
font-size: 1.5rem;
font-weight: 500;
}

.p-card
{
color: #3a8cf0;
font-weight: 700;
margin: 0px;
padding-bottom: 10px;
}

.about
{
position: about;
right: 60px;
top: 60px;
width: 40px;
height:40px;
}

@media screen and (max-width: 550px) {
    .row-box {flex-direction: column;}
   }
@media screen and (max-width: 550px) {
    .column-box {justify-content: center;}
   }
@media screen and (max-width: 550px) {
    .card {
	height: 32vh;}
   }
@media screen and (max-height: 959px) {
    .logo-box {margin: 0px 40px 20px 40px}
   }
@media screen and (max-width: 550px) {
    .logo-box {margin: 0px 40px 10px 40px}
   }    
@media screen and (max-height: 680px) {
    .logo-box {margin: 15px 40px 1% 40px}
    .card {height: 60vh; padding: 0px 0px 0px 0px;}
   } 
@media screen and (max-height: 530px) {
    .home-box {height: auto;}
   } 
@media screen and (min-width: 550px) {
    .home-box {height: 100%;}
   }
@media screen and (max-height: 959px) {
    .card {height: 40vh;
	max-width: 320px;
    max-height: 35vh;}
    .card-image
{
 max-width: unset;
max-height:unset;
min-width: unset;
min-height:unset; 
height: 20vh;
padding-top: 30px;
}
   }
@media screen and (max-height: 959px) {
    .row-box {justify-content: center;}
   }