*{
    box-sizing: border-box;
}

.header{
display: inline-block;
    width: 100%;
    height: 100px;
    font-size: 16px;
    color: white;
    padding:10px
}
.footer{
    display: inline-block;
    width: 100%;
    height: 100px;
    font-size: 16px;
    color: white;
    padding:10px;

   
}

.text{
    color:white;
    font-weight: bold;

}

.main{
    font-size: 0;
    text-align: center;
}

.box{
    display: inline-block;
    width: 100%;
    height: 600px;
    font-size: 16px;
    color: white;
    vertical-align: top;
}

.box1{
    width: 25%;
    background-color: white;
    padding: 10px;
}

.box2{
    width: 75%;
    background-color: white;
    padding: 10px;
}



.inner1{
    height: 100%;
    background-color: red;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner2{
    height:100%;
    background-color: blue;
    display: flex;
    align-items: end;
    justify-content: end;
    gap:10px;
    padding: 10px;
}


.inner4{
    height: 100%;
    background-color: violet;
    display: flex;
    align-items: center;
    justify-content: center;
}

.innerbox{
    display: inline-block;
    background-color: white;
    width: 100%;
    height: 250px;
}

.innerbox1{
    width:33%;
    background-color: blue;
  
   position: relative;
}

.innerbox2{
    background-color: brown;
    width: 100%;
    height: 100%;
   
}

@media screen and (max-width: 600px)
{
    .box{
        display: block;
    }
    .box1, .box2{
        width:100%;
    }
}