.line{
    margin-top: 23px;
}

.about{
    text-align: justify;
    border: 1px solid black;
    margin-right: 15px;
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.about h3{
    color: #FF8000
}

.guidelines{
    text-align: justify;

    border: 1px solid black;
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.guidelines h3{
    color: #FF8000;
}

.container{    
    color: white;
}
.hero-main{
    margin-top: 50px;
}

@media only screen and (max-width: 762px)  {
    .guidelines{
        margin-top: 50px;
    }
    .about{
        margin-right: 0;
    }

}


/* animation */

/* @media only screen and (min-width: 762px){
    .slide-right {
  
  
    animation: 3s slide-right;
    animation-delay: calc(var(--scroll)*-1s);
}

@keyframes slide-right {
    from {
        margin-left: -100%;
    }

    to {
        margin-left: 0%;
    }
}
.slide-left {
    animation: 1s slide-left;
}

@keyframes slide-left {
    from {
        margin-left: 100%;
    }

    to {
        margin-left: 0%;
    }
}
} */