/* RESPONSIVE */

/* TABLETS*/
@media screen and (max-width: 1024px) {

          .arrow {
                    display: none;
          }

          .projects {
                    width: 90%;
          }

          .projects-cases {
                    width: 90%;
                    flex-direction: column;
                    align-items: center;
          }

          .projects h5 {
                    display: none;
          }

          .projects-cases div {
                    max-width: 100%;
                    margin: 20px;
                    text-align: center;
          }

          .insight {
                    width: 100%;
                    height: 100%;
          }

          header {
                    flex-direction: column-reverse;
          }

          header p {
                    max-width: 95%;
                    font-size: large;
                    letter-spacing: 4px;
          }

          header h1 {
                    font-size: 80px;
          }

          header h2 {
                    font-size: 35px;
          }

          header h3 {
                    font-size: 60px;
          }

          header .rightSide,
          header .leftSide {
                    padding: 50px;
                    width: 100%;
          }

          .skills div img {
                    height: 10%;
                    width: 10%;
          }

          .skills button {
                    width: max-content;
                    padding: 10px;
                    font-size: xx-large;
          }

          footer {
                    height: 15vh;
                    text-align: center;
          }

          footer .links {
                    max-width: 50%;
          }

          footer p,
          footer a {
                    font-size: xx-large;
                    align-items: center;
                    justify-content: center;
          }

          .arrow,
          .arrow-left,
          .arrow-right {
                    display: none;
          }

          #modal {
                    height: 450vh;
          }

          .timeline-area {
                    width: 600px;
          }

          .timeline-area div {
                    height: 250px;
          }

          .timeline-area h3 {
                    font-size: medium;
          }
}


/* SMARTPHONES*/
@media screen and (max-width: 767px) {
          .projects {
                    width: 90%;
          }

          .projects-cases {
                    width: 90%;
                    flex-direction: column;
                    align-items: center;
          }

          .projects-cases div {
                    max-width: 70%;
                    margin: 20px;
                    text-align: center;
          }

          .insight {
                    width: 100%;
                    height: 100%;
          }

          header {
                    flex-direction: column-reverse;
          }

          header p {
                    max-width: 70%;
                    font-size: xx-large;
                    letter-spacing: 4px;
          }

          header h1 {
                    font-size: 80px;
          }

          header h2 {
                    font-size: 35px;
          }

          header h3 {
                    font-size: 60px;
          }

          header div img {
                    height: 300px;
          }

          .skills div img {
                    height: 10%;
                    width: 10%;
          }

          footer {
                    height: 15vh;
          }

          footer p,
          footer a {
                    font-size: xx-large;
                    align-items: center;
                    justify-content: center;
          }

          .arrow,
          .arrow-left,
          .arrow-right {
                    display: none;
          }

          #modal {
                    margin: 0 0;
                    width: 100%;
                    height: 750vh;
          }

          .timeline-area {
                    width: 900px;
          }
}