body {
    margin: 0;
    padding: 0;
    background-color: rgba(153, 196, 232, 0.877);
}

html {
  scroll-behavior: smooth;
}

header {
    background-color: #95c8e7;
    color: rgb(255, 255, 255);
    padding: 15px;
    text-align: center;
    font-size: clamp(14px, 2vw, 32px);
    /* margin-top: 20px; */
}

nav a {
    text-decoration: none;
    color: rgb(255, 255, 255);
    /* background-color: black; */
    margin: 5px;
    font-size: clamp(14px, 2vw, 32px);
}

nav a:hover {
  color: #0a0a0a4d;

}

#header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}  

footer {
    background-color: #95c8e7;
    color: white;
    padding: 70px;
    text-align: center;
    margin-top: 100px;
    font-size: 0.8rem;
}
  
.footer a {
    color: white;
    margin: 20px;
    text-decoration: none;
}
  
.footer a:hover {
    color: rgba(255, 255, 255, 0.689);
}
  
div a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.662);
}
  
div a:hover {
    color: rgba(255, 255, 255, 0.564);
}

.product {
  border: 2px solid rgba(214, 214, 214, 0.11);
  background-color: rgba(214, 214, 214, 0.349);
}

.products {
    max-width: 95vw;
    margin: auto;
    margin-top: 100px;
    text-align: center;
    display: grid;
    grid-template-columns: repeat(1, 4fr);
    gap: 40px;
}

.product img {
    width: 100%;
    height: 75%;
    object-fit: cover;
    object-position: center;
}

.product h1 {
    color: #1879b9;
    font-size: clamp(14px, 2vw, 32px);
}

.product p {
    color: rgb(1, 12, 68);
    font-size: clamp(14px, 2vw, 32px);
}



@media screen and (min-width: 768px) {
    header h1 {
      font-size: 2rem;
    }

    nav a {
      font-size: 1rem;
    }

    footer {
      font-size: 1rem;
    }

    .products {
      max-width: 90vw;
      margin: auto;
      margin-top: 100px;
      text-align: center;
      /* background-color: #d7d7d7; */
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      /* grid-template-rows: repeat(6, 1fr); */
      grid-auto-rows: minmax(50px, 500px);
      /* grid-auto-flow: row dense; */
      gap: 50px;
    }

    .product img {
      /* min-height: -100vh; */
      width: 100%;
      height: 50%;
      object-fit: cover;
      object-position: center;
    }

    .product h1 {
      color: #1879b9;
      font-size: clamp(14px, 2vw, 32px);
    }

    .product p {
      color: rgb(1, 12, 68);
      font-size: clamp(14px, 2vw, 32px);
    }
}


@media screen and (min-width: 1024px) {
    header {
      background-color: #95c8e75d;
      color: white;
      padding: 2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
    }
    
    header h1 {
      margin: 0;
      font-size: 2.2rem;
    }
    
    nav a {
      color: white;
      text-decoration: none;
      margin: 10px;
      font-size: 1.2rem;
    }
    
    nav a:hover {
      color: #0a0a0a4d;
    }
    
    header{
      position: relative;
    }

    header h1 {
      font-size: 2.3rem;
    }

    .nav a {
      font-size: 1.1rem;
    }

    footer {
      font-size: 1.1rem;
    }

    .products {
      max-width: 80vw;
      margin: auto;
      margin-top: 200px;
      grid-template-columns: repeat(4, 1fr);
      /* background-color: #d7d7d7; */
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      /* grid-template-rows: repeat(6, 1fr); */
      grid-auto-rows: minmax(50px, 540px);
      gap: 20px;
    }

    .product img {
      width: 100%;
      height: auto;
      max-width: 100%;
      display: block;
      object-fit: cover;
      object-position: center;
    }


    .product h1 {
      color: #1879b9;
      font-size: clamp(0px,4vw,30px);
      font-size: clamp(18px, 2.5vw, 28px);
      margin: 10px 0 5px;
    }

    .product p {
      font-size: clamp(14px, 2vw, 20px);
      color: #012C63;
    }

    .product a:hover img {
      transform: scale(1.03);
      transition: transform 0.3s ease-in-out;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }

    .product {
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    
    .product:hover {
      transform: translateY(-5px);
      box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
    }
}

@media (min-width: 600px) {
  .products {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .products {
    grid-template-columns: repeat(3, 1fr);
  }
}