/* ===============================
   RESET & BASE
   =============================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", sans-serif;
}

html,
body {
  overflow-x: hidden; /* prevent horizontal scroll */
  overflow-y: auto; /* only scroll vertically if needed */
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* replaces html, body { height:100% } */
  background: #fff;
  color: #111;
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: auto; /* or cover / contain */
}

/* Main content wrapper */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ===============================
   Logo section
   =============================== */

.logo a {
  display: flex; /* makes img + text align horizontally */
  align-items: center; /* vertically centers them */
  text-decoration: none; /* removes underline */
  color: inherit; /* keeps text color consistent */
  gap: 8px; /* spacing between icon and text */
}

.logo img {
  height: 40px; /* adjust as needed */
  width: auto;
}

/* ===============================
   HEADER
   =============================== */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: #e2e2e2;
  color: #fff;
}

header .logo {
  display: flex;
  align-items: center;
  gap: 10px; /* space between logo and text */
  font-size: 1.3rem;
  font-weight: bold;
  color: #fff;
}

header .logo img {
  height: 30px; /* size of logo icon */
  width: auto;
}

header .logo span {
  color: #0033e7;
  /* 0033e7 */
}

header .logo strong {
  color: #0033e7; /* highlight "Solutions" in green #4CAF50 */
  /* yellow: FED719*/
}

nav ul {
  list-style: none;
  display: flex;
  gap: 1rem;
}

nav a {
  text-decoration: none;
  color: #0033e7;
  font-weight: 500;
  transition: color 0.3s ease;
}

nav a.active,
nav a:hover {
  color: #93cfdf;
}

/* ===============================
   FOOTER SECTION
   =============================== */

.site-footer {
  position: fixed; /* stays in place */
  bottom: 0; /* stick to bottom */
  left: 0;
  width: 100%; /* full width */
  text-align: left; /* align text to left */
  padding: 10px 20px; /* spacing from left (20px) and top/bottom (10px) */
  font-size: 14px;
  background: #e2e2e2; /* no background */
  right: 0; /* new line */
  box-shadow: none; /* no shadow */
  z-index: 1000;
  color: #0033e7; /* footer text color */
}

.site-footer a {
  color: #0033e7; /* make link white too */
  text-decoration: none;
  font-weight: bold;
}

.site-footer a:hover {
  text-decoration: underline;
}

/* ===============================
   HERO SECTION
   =============================== */

.be-epic {
  font-size: 2rem;
  font-weight: 900;
  text-transform: uppercase;

  /* rainbow gradient */
  background: linear-gradient(
    270deg,
    #ffffff,
    #ff7b00,
    #ffee00,
    #00c9ff,
    #0d9d4e
  );
  background-size: 1000% 1000%; /* make gradient wide for animation */

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: gradientShift 8s ease infinite;
}

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

/* ===============================
   HERO SECTION
   =============================== */
.hero {
  /* take up full viewport height minus header */
  min-height: calc(100vh - 80px); /* adjust 80px if header height changes */

  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* align content to top */
  align-items: center; /* horizontal centering */
  text-align: center;

  /* spacing below header */
  padding-top: 6rem; /* adjust this gap as you like */
  padding-left: 2rem;
  padding-right: 2rem;

  /* background layers */
  background: url("images/apyc_bg.png") no-repeat bottom right,
    linear-gradient(120deg, #0033e7, #5a5fff, #93cfdf);
  background-size: auto;

  /* text color */
  color: #fff;
}

.hero > * {
  max-width: 800px; /* ✅ limit content width */
  width: 100%; /* responsive */
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.btn {
  display: inline-block;
  padding: 10px 20px;
  background: #fff;
  color: #111;
  font-weight: bold;
  border-radius: 25px;
  text-decoration: none;
  transition: 0.3s ease;
}

.btn:hover {
  background: #eee;
  transform: translateY(-2px);
}

/* ===============================
   CONTENT
   =============================== */
.content {
  padding: 3rem 2rem;
  max-width: 900px;
  margin: auto;
  line-height: 1.6;
}

/* ===============================
   PRODUCTS
   =============================== */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.product-card {
  padding: 1.5rem;
  background: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.product-card h2 {
  margin-bottom: 0.5rem;
}

/* ===============================
  FOOTER
   =============================== */
footer {
  text-align: center;
  padding: 1rem;
  background: #111;
  color: #aaa;
}

/* ===============================
   Desktop styles
   =============================== */
.drawer {
  display: flex;
  gap: 1rem;
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.8rem; /* hamburger size */
  color: #fff; /* hamburger color */
  cursor: pointer;
  z-index: 1001; /* keeps it above the drawer */
}

/* ===============================
   Mobile styles
   =============================== */
@media (max-width: 768px) {
  .hero {
    background: linear-gradient(120deg, #0033e7, #5a5fff, #93cfdf);
    background-size: auto;
  }

  .drawer {
    position: fixed;
    top: 0;
    right: -200px; /* hidden by default */
    width: 200px; /* adjust thickness */
    height: 100%;
    background: #333; /* change to lighter if too dark */

    transition: right 0.3s ease;
    z-index: 1000; /* above overlay */
  }

  .drawer.show {
    right: 0;
  }

  .drawer ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
    padding: 0;
  }

  /* Drawer links */
  .drawer a {
    display: block;
    padding: 12px 16px; /* spacing inside each link */
    margin-bottom: 10px; /* spacing between links */
    color: #fff;
    text-decoration: none;
    transition: background 0.2s ease;
  }

  .drawer a:hover {
    background: #f0f0f0;
  }

  .menu-toggle {
    display: block; /* show hamburger on mobile */
    position: fixed;
    top: 1rem;
    right: 1rem;
  }
}

/* Overlay background */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* semi-transparent */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 999; /* must be below drawer but above page content */
}

/* Show overlay */
.overlay.show {
  opacity: 1;
  visibility: visible;
}

.white-link {
  color: white !important;
}

.fake-link {
  color: black;
  cursor: pointer; /* looks like a link */
  text-decoration: none; /* start without underline */
  display: inline-block; /* keeps underline behavior tidy */
}
.fake-link:hover {
  text-decoration: underline;
}