/* Στα media 1rem = 1em = 16px στα άλλα κανονικά 1rem=10px*/

/**************************/
/* BELOW 1344px (Smaller desktops) */
/**************************/

@media (max-width: 84em) {
}

/**************************/
/* BELOW 1200px (Landscape Tablets) */
/**************************/

@media (max-width: 75em) {
  .h1 {
    font-size: 2.4rem;
  }

  .p3 {
    font-size: 2rem;
  }
}

/**************************/
/* BELOW 944px (Tablets) */
/**************************/

@media (max-width: 59em) {
  .header {
    padding: 2rem 2rem;
  }

  .headerimg img {
    width: auto;
    height: 8rem;
  }

  .menulist {
    font-size: 2rem;
  }

  .first-section-image {
    flex: 0 0 40%;
  }

  .first-section-text {
    flex: 0 0 60%;
  }

  .h1 {
    font-size: 2rem;
  }

  .p1 {
    font-size: 1.8rem;
  }

  .h3 {
    font-size: 3.6rem;
  }

  .p3 {
    font-size: 1.6rem;
    line-height: 3rem;
  }

  .servicescheckmark {
    font-size: 2.4rem;
  }

  .span3:hover {
    color: #ced4da;
    text-decoration: none;
    cursor: default;
  }

  .h4 {
    font-size: 7rem;
  }

  .h4::before {
    width: 43rem;
  }

  .h4::after {
    width: 43rem;
  }

  .h5 {
    font-size: 5rem;
  }

  .h5::before {
    width: 10rem;
  }

  .h5::after {
    width: 10rem;
    right: -145%;
  }

  .h5:hover::before {
    top: 50%;
    left: -100%;
  }

  .h5:hover::after {
    top: 50%;
    right: -165%;
  }

  .link-text {
    font-size: 1.6rem;
  }

  figcaption {
    flex-wrap: wrap;
    justify-content: center;
  }

  .contact {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .h6 {
    font-size: 5rem;
  }

  .form {
    width: 90%;
  }

  .header-about {
    font-size: 2.2rem;
  }

  .about-p {
    font-size: 1.6rem;
  }

  .blogarticles img {
    width: 40rem;
    height: 25rem;
  }

  .blogarticles a {
    font-size: 2rem;
  }

  .header-post {
    font-size: 2.8rem;
  }

  .hpost {
    font-size: 2.4rem;
  }

  .ppost {
    font-size: 1.8rem;
  }
}

/**************************/
/* BELOW 768px (Smaller tablets) */
/**************************/

@media (max-width: 48em) {
  html {
    font-size: 55%;
  }

  .header {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 2.2rem;
  }

  .website-image {
    width: 65vw;
  }

  .responsive-image {
    width: 60vw;
  }

  .services-image {
    width: 60vw;
  }

  .first-section {
    flex-direction: column;
  }

  .first-section-text {
    order: 1;
  }

  .first-section-image {
    order: 2;
  }

  .services {
    grid-template-columns: 1fr;
  }

  figcaption span {
    padding: 0.5rem 0.5rem;
    font-size: 1.2rem;
    font-weight: 600;
  }

  .blog {
    padding: 3rem;
  }

  .blogposts {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .h4 {
    font-size: 6rem;
  }

  .h4::before {
    width: 33rem;
  }

  .h4::after {
    width: 33rem;
  }

  .cta-button {
    font-size: 1.4rem;
  }

  .h5 {
    font-size: 4rem;
  }

  .h5::before {
    width: 7rem;
  }

  .h5::after {
    width: 7rem;
    right: -145%;
  }

  .h5:hover::before {
    top: 50%;
    left: -100%;
  }

  .h5:hover::after {
    top: 50%;
    right: -165%;
  }

  .contact {
    padding: 6rem;
  }

  .contact-info {
    justify-items: center;
  }

  .contact-form {
    justify-items: center;
  }

  .h6 {
    font-size: 4rem;
  }

  .h6::before {
    width: 10rem;
    top: 70%;
    left: 20%;
    transform: translate(-50%, -50%);
    z-index: -1;
  }

  .h6:hover::before {
    left: 45%;
  }

  .p6 {
    font-size: 2.4rem;
  }

  .footer {
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    padding: 2rem;
    gap: 2rem;
  }

  .footer-header {
    font-size: 1.6rem;
  }

  .footer-img {
    order: 3;
    grid-column: 1 / -1;
  }

  .footer-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
  }

  .footer-header {
    grid-column: 1 / -1;
    position: relative;
  }

  .footer-pages {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    gap: 2rem;
  }

  .footer-socials {
    grid-column: 1 / -1;
    justify-self: center;
    display: flex;
    justify-content: center;
    gap: 4rem;
  }

  .post-image {
    width: 100%;
  }

  .about-p {
    font-size: 1.4rem;
  }

  .about-image {
    width: 35vw;
  }

  .header-post {
    font-size: 2.2rem;
  }

  .hpost {
    font-size: 2rem;
  }

  .ppost {
    font-size: 1.6rem;
  }

  .menu-pictures {
    grid-template-columns: 1fr 1fr;
  }

  #cookie-banner {
    font-size: 1.2rem;
    line-height: 2rem;
  }

  #cookie-banner button {
    font-size: 1.4rem;
    margin-top: 1rem;
    margin-left: 1rem;
  }
}

/**************************/
/* BELOW 544px (Phones) */
/**************************/

@media (max-width: 34em) {
  html {
    font-size: 50%;
  }

  .header {
    padding-bottom: 3.2rem;
  }

  .menulist {
    font-size: 1.8rem;
    gap: 2rem;
  }

  .first-section {
    padding: 2rem;
  }

  .h1 {
    font-size: 1.7rem;
  }

  .p1 {
    font-size: 1.7rem;
  }

  .offer-button {
    font-size: 2rem;
  }

  .projects {
    display: grid;
    grid-template-columns: 1fr;
  }

  figcaption span {
    padding: 0.5rem 0.5rem;
    font-size: 1.4rem;
    font-weight: 600;
  }

  .cta-button {
    padding: 1rem 1.4rem;
    font-size: 1.4rem;
    margin-top: 5rem;
  }

  .h4 {
    font-size: 4rem;
  }

  .h4::before {
    width: 20rem;
    height: 0.8rem;
  }

  .h4::after {
    width: 20rem;
    height: 0.8rem;
  }

  .blogposts {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .link-text {
    font-size: 2.3rem;
    font-weight: 400;
  }

  .h5 {
    font-size: 3rem;
  }

  .h5::before {
    width: 7rem;
    height: 0.8rem;
  }

  .h5::after {
    width: 7rem;
    height: 0.8rem;
  }

  .submit {
    padding: 0.7rem 2.5rem;
  }

  .footer-links {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
  }

  .footer-pages {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
  }

  .footer-socials {
    display: block;
  }

  .about-article {
    grid-template-columns: 1fr;
    padding: 5rem;
  }

  .about-image {
    display: flex;
    justify-self: center;
    width: 80%;
  }

  .about-first {
    order: 2;
  }

  .about-p {
    font-size: 1.6rem;
  }

  .header-post {
    font-size: 2.6rem;
  }

  .deksiotites {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  .skills-grid {
    gap: 6rem;
  }

  .about-second {
    padding: 1rem;
  }

  .blogarticles {
    grid-template-columns: 1fr;
  }

  .blogarticles img {
    width: 34rem;
    height: 20rem;
  }

  .blogarticles a {
    font-size: 2.4rem;
  }
  #cookie-banner {
    font-size: 0.8rem;
    line-height: 2rem;
  }

  #cookie-banner button {
    font-size: 1rem;
    margin-top: 1rem;
    margin-left: 1rem;
  }
}

/**************************/
/* BELOW 368px (Phones) */
/**************************/
@media (max-width: 23em) {
  html {
    font-size: 40%;
  }

  .h1 {
    font-size: 1.5rem;
  }

  .p1 {
    font-size: 1.4rem;
  }
}

/**************************/
/* BELOW 320px (Phones) */
/**************************/
@media (max-width: 20em) {
  html {
    font-size: 39%;
  }

  .h1 {
    font-size: 1.3rem;
  }

  .cta-button {
    font-size: 1.2rem;
  }
}