body {
    height: 100vh; 

    margin: 0%;
    padding: 0%;
    

    display: grid; 
    grid-template-columns: 
        1fr
        repeat(4,minmax(0,272px))
        1fr 
    ;
    grid-gap: 0px; 
    grid-template-rows: 
        1fr
        1fr
        70px
        1fr
        1fr
        1fr
        1fr
        1fr
        40px
    ;
    grid-template-areas: 
        "header header header header header header"
        "info info info info info info"
        "ST ST ST ST ST ST"
        "logosection logosection logosection logosection logosection logosection"
        "logodisplay logodisplay logodisplay logodisplay logodisplay logodisplay"
        "colourArea colourArea colourArea colourArea colourArea colourArea"
        "testimonal testimonal testimonal testimonal testimonal testimonal"
        "footer footer footer footer footer footer"
        "credit credit credit credit credit credit"
        ;
}


.info_container {
    grid-area: info;
    padding: 0px 3%;
}
.infoSection {
    width: 47%;
}



    h1 {
        font-size: 45px;
    }

    .info_container h2 {
        margin-top: 48px
    }
    


#scrolling_text {
    grid-area: ST;
    overflow: hidden;
    display: flex;
    white-space: nowrap;
    align-items: center;
    background-color: #520415;
}
    .text {
        font-size: larger;
        animation: animate_text 32s linear infinite;
        color: #f7f7f7;
    }
        .text span {
            margin: 0 60px;
        }

        @keyframes animate_text {
            from {
              transform: translate3d(0, 0, 0);
            }
            to {
              transform: translate3d(-100%, 0, 0);
            }
        }


.logoExplainationContainer {
    grid-area: logosection;
    display: flex;
    width: auto;
    background-color: #f8f8f8;
}

.logoExplainationSection {
    width:60%;
    padding: 0px 3%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.logoExplainationSectionIMG {
    width:40%;
    display: flex;
    justify-content: right;
}
.logoExplainationSectionIMG img{
    width:100%;
}


.logodisplayContainer {
    grid-area: logodisplay;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5%;
    background-color: #520415;
}

    .logodisplayContainerBox {
        width: fit-content;
        display: flex;
        justify-content: center;
        margin: 10px;
        width: 35%;
    }
    .logodisplayContainerBox img {
        width: 52%;
    }


#middleImage {
    width: 20%;
}

.colourExplainationContainer {
    grid-area: colourArea;
    display: flex;
    width: auto;
    background-color: #f8f8f8;
}

.colourExplainationSection {
  	width:60%;
    padding: 0px 3%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
    
.colourInput {
    width:40%;
    display: flex;
    justify-content: right;
}
    .colourInput img{
        width: 100%;
    }


.testimonalContainer {
    grid-area: testimonal; 
    text-align: center;
    align-content: center;
    justify-content: center;
    padding: 4%;
    color: white;
    background-color: #111111;
}
.testimonalContainer q {
    font-size: xx-large;
}


@media screen and (max-width: 480px){
    .info_container, .infoSection {
        width: auto;
    }

    .logoExplainationContainer, .colourExplainationContainer {
        flex-direction: column;
    }
    .logoExplainationSection, .logoExplainationSectionIMG, .colourExplainationSection, .colourInput{
        width: auto;
    }
    .logoExplainationSectionIMG {
        height: 100%;
    }

   .logodisplayContainer {
        flex-direction: column;
    }
        .logodisplayContainerBox {
            margin: 30px 0;
        	width: 100%;
        }


  .colourInput {
      height: 500px;
  }

}


@media screen and (min-width: 481px) and (max-width: 767px) {
    .info_container, .infoSection {
        width: auto;
    }

    .logoExplainationContainer, .colourExplainationContainer {
        flex-direction: column;
    }
    .logoExplainationSection, .logoExplainationSectionIMG, .colourExplainationSection, .colourInput{
        width: auto;
    }
    .logoExplainationSectionIMG {
        height: 100%;
    }

    .logodisplayContainer {
        flex-direction: column;
    }
        .logodisplayContainerBox {
            margin: 30px 0;
        }

  .logodisplayContainerBox {
        width: fit-content;
        text-align: center;
        display: flex;
        justify-content: center;
    }



.colourInput {
    height: 500px;
}


    footer {
        flex-direction: column;
    }
}