/* Reset & base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  -webkit-user-drag: none;  /* Chrome, Safari, Opera */
  -khtml-user-drag: none;   /* Konqueror */
  -moz-user-drag: none;     /* Firefox */
  -o-user-drag: none;       /* Opera */
  user-drag: none;          /* Standard */
  pointer-events: none;     /* Optional: disables mouse events on image */
}


body, html {
  height: 100%;
  font-family: 'Montserrat', sans-serif;
  color: #fff;
  overflow-x: hidden;
  background: #0a3d62;
  position: relative;
}

/* Animated background: moving gradient */
.animated-bg {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(270deg, #0a3d62, #3c6382, #0a3d62, #78e08f);
  background-size: 800% 800%;
  animation: gradientMove 20s ease infinite;
  z-index: -1;
}

@keyframes gradientMove {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}
}

/* Container */
.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 1rem;
  padding-top: 56px;
}

/* Logo */
.logo {
  width: 120px;
  margin-bottom: 1rem;
  filter: drop-shadow(0 0 3px rgba(0,0,0,0.5));
}

/* Heading */
h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 8px rgba(0,0,0,0.3);
}

/* Description */
p {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  max-width: 400px;
  text-shadow: 0 0 6px rgba(0,0,0,0.3);
}



/* Social links */
.social-links {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
}

.social-links a {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  transition: background 0.3s ease;
}

.social-links a:hover {
  background: #27ae60;
}

.icon {
  width: 20px;
  height: 20px;
  fill: white;
}

.icon:hover {
	width: 50px;
	height: 50px;
	background: #27ae60;
	border-radius: 105%;
}

/* Responsive */
@media (max-width: 480px) {
  h1 {
    font-size: 2.2rem;
  }
}



/* Products */
    section.products {
      padding: 2rem 1rem 4rem;
      /*background: #e0f2f1;*/
      border-radius: 10px;
      max-width: 1100px;
      margin: 0 auto 4rem;
    }
    section.products h2 {
      text-align: center;
      font-size: 2rem;
      margin-bottom: 2rem;
      color: #80de0e;
    }
    .products-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 2.5rem;
    }
    .product-item {
      background: white;
      border-radius: 12px;
      box-shadow: 0 4px 8px rgb(0 0 0 / 0.1);
      padding: 1.5rem;
      flex: 1 1 180px;
      max-width: 245px;
      text-align: center;
      transition: transform 0.3s ease;
      cursor: default;
    }
    .product-item:hover {
      transform: translateY(-8px);
      box-shadow: 0 8px 16px rgb(0 0 0 / 0.15);
    }
    .product-item svg {
      width: 48px;
      height: 48px;
      margin-bottom: 1rem;
      fill: #80de0e;
      user-select: none;
      pointer-events: none;
    }
    .product-item h3 {
      font-size: 1.2rem;
      margin-bottom: 0.5rem;
      color: #80de0e;
    }
    .product-item p {
      font-size: 0.95rem;
      color: #555;
    }

  /* Responsive */
    @media (max-width: 420px) {
    footer {
      font-size: 0.5rem !important;
      user-select: none;
    }
    }
    
       @media (max-width: 768px) {
      .products-grid {
        flex-direction: column;
        align-items: center;
      }
      .product-item {
        max-width: 280px;
      }
    }
        /* Footer */
    footer {
      background: #80de0e;
      color: #0a3d62;
      padding: 1rem 0;
      text-align: center;
      font-size: 0.9rem;
      user-select: none;
    }