@media screen and (max-width: 1230px) {
    .seperate {
        margin: 0 15px;
        padding: 0 30px;
    }

    .image {
        margin-left: 20px;
        margin-right: 35px;
    }

    .image img:hover {
        transform: scale(1.1); 
        margin-bottom: 12px;
    }
}

@media screen and (max-width: 1100px) {
    .navbar{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .intro{
        margin-top: -26px;
        text-align: left;
        margin-left: 0%;
    }

    .intro:hover{
        margin-top: -30px;
        color: bisque;
    }

    .image {
        display: flex;
        justify-content: center;
        align-items: center;
    }    

    .about {
        display: flex;
        flex-direction: column;
    }

    .info,
    .info2,
    .info3,
    .info4 {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .info hr,
    .info2 hr,
    .info3 hr,
    .info4 hr {
        width: 100%;
        margin-top: 20px; 
        margin-bottom: 20px; 
        margin-left: 12px;
    }

    .one img, 
     .two img, 
     .three img,
      .four img {
        height: 264px;
        width: 397px;
        margin: 29px;
        border: 4px solid white;
   }  

   .explain ol li,
   .explain2 ol li,
   .explain3 ol li,
    .explain4 ol li {
    list-style: none;
   }
}

@media screen and (max-width: 770px) {
    .links {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .contactBox {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .contactBox h3 {
        text-align: center;
        margin-left: -106px;
    }

    .formBox {
        width: 100%;
    }

    .formBox input[type="text"],
    .formBox input[type="email"],
    .formBox textarea {
        width: 42%;
        margin-left: 18%;
    }
}

@media screen and (max-width: 860px) {
    .navbar {
        display: flex;
        flex-direction: column;
    }
}

