/* Import Poppins Regular */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

/* ===== Reset & base ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "EcoWorldSans", sans-serif;
  font-weight: 400;
}

:root {
  --page-padding: 5vw;
  --header-height: 110px;

  --card-gap-row: 1.6vh;
  --card-gap-col: 1.3vw;
  --card-height: 11.5vh;
  --card-img-height: 8.5vh;
}

html, body {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #333;
}

/* ===== Header ===== */
.header {
  width: 100%;
  padding: 20px var(--page-padding) 10px var(--page-padding);
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex-wrap: wrap;
}

.logo {
  height: 48px;
  object-fit: contain;
}

/* ===== Header text ===== */
.header-content h2 {
  flex: 1;
  text-align: center;
  font-size: 16px;
  color: #48626f;
  font-weight: 600;
  font-family: "EcoWorldSans", sans-serif;
}

/* ===== Systems grid - 5 cards per row ===== */
.systems-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr)!important; /* exactly 5 per row */
  column-gap: 1vw;                     /* slightly reduced spacing */
  row-gap: 4.5vh;
  width: 95%;
  max-width: 1300px;
  margin: 0 auto;
  align-content: start;
  justify-items: center;
  padding-bottom: var(--card-gap-row);
  margin-top: 20px; /* 🔹 adds space between header and grid */
}

/* ===== Cards ===== */
.system-card {
  background: #fff;
  border-right: 2px solid #00b297;
  border-bottom: 2px solid #00b297;
  border-top-left-radius: 18px;
  border-bottom-right-radius: 18px;

  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;

  padding: 0 0.9rem;
  height: calc(var(--card-height) * 0.95);
  width: 80%;
  margin: auto;
  text-decoration: none;
  color: #1f2937;
  transition: all 0.25s ease-in-out;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  overflow: hidden;
}

.system-card:hover {
  background-color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,159,107,0.15);
}

/* ===== Card text ===== */
.system-card span {
  flex: 1;
  text-align: left;
  font-weight: 600;
  font-family: "EcoWorldSans", sans-serif;
  font-size: 1.1vw;
  line-height: 1.1;
}

/* ===== Card image ===== */
.system-card img {
  height: calc(var(--card-img-height) * 0.9);
  max-width: 34%;
  object-fit: contain;
  margin-left: 12px;
  transition: transform 0.25s ease;
}

.system-card:hover img {
  transform: scale(1.08);
}

/* ===== Icon-only cards ===== */
.system-card.icon-only {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.system-card.icon-only img {
  height: calc(var(--card-img-height) * 1.8);
  max-width: 47%;
  width: auto;
  margin: 0;
  transition: transform 0.25s ease;
}

.system-card.icon-only:hover img {
  transform: scale(1.08);
}

/* Larger icon adjustment */
.system-card.icon-only.icon-large img {
  height: calc(var(--card-img-height) * 2.5);
  max-width: 65%;
}

.system-card.icon-only.icon-large:hover img {
  transform: scale(1.06);
}

/* Larger icon adjustment */
.system-card.icon-only.icon-big img {
  height: calc(var(--card-img-height) * 2.5);
  max-width: 58%;
}

.system-card.icon-only.icon-big:hover img {
  transform: scale(1.06);
}

/* Base icon style */
.system-icon img {
  width: 60px;
  height: auto;
  transition: transform 0.2s ease;
}

/* Special size only for EWISOP */
.icon-ewisop img {
  width: 75px; /* enlarge slightly */
  height: auto;
  object-fit: contain;
}

/* Ensure alignment remains correct */
.icon-ewisop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Keep the text aligned and consistent 
.icon-ewisop span {
  margin-top: 8px;
  font-weight: 600;
  color: #1e1e1e;
  text-align: center;
}



/* ===== Responsive Tweaks ===== */

/* 💻 Laptop view (unchanged) */
@media (max-width: 1024px) {
  .systems-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .system-card span {
    font-size: 14px;
  }
}

/* 📱 Tablet (iPad) view */
@media (max-width: 900px) {
  .header {
    padding-top: 50px;          /* more space above logo */
    padding-bottom: 20px;       /* extra space below logo */
  }

  .header-content {
    flex-direction: column;
    gap: 24px;                  /* increase space between logo and text */
    text-align: center;
  }

  .header-content h2 {
    font-size: 18px;
  }

  .systems-grid {
    grid-template-columns: repeat(2, 1fr);
    width: 92%;
    margin-top: 35px;           /* extra space between text and first row */
  }

  .system-card {
    height: 13vh;
  }

  .system-card span {
    font-size: 15px;
  }

  .system-card img {
    height: 7.5vh;
  }

}


/* 📱 Phone view */
@media (max-width: 600px) {
  .header {
    padding-top: 60px;          /* more space above logo */
    padding-bottom: 25px;       /* extra space below logo */
  }

  .header-content {
    flex-direction: column;
    gap: 28px;                  /* increase space between logo and text */
  }

  .header-content h2 {
    font-size: 17px;
  }

  .systems-grid {
    grid-template-columns: repeat(2, 1fr);
    width: 94%;
    margin-top: 40px;           /* more space between text and first row */
  }

  .system-card {
    height: 14vh;
  }

  .system-card span {
    font-size: 14px;
  }

  .system-card img {
    height: 8vh;
  }

}

@media (min-width: 1300px) {
  .icon-only img,
  .icon-only.icon-big img,
  .icon-only.icon-large img {
    filter: contrast(2.5) saturate(1.75) brightness(0.5); /* subtly enhance icon appearance */
  }
}

/* ============================
   EWISOP Card (same layout, larger icon)
   ============================ */
.system-icon.icon-ewisop {
  display: flex;
  flex-direction: row-reverse; /* icon on right */
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-right: 2px solid #00b297;
  border-bottom: 2px solid #00b297;
  border-top-left-radius: 18px;
  border-bottom-right-radius: 18px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  width: 95%;
  height: var(--card-height);
  padding: 0 1rem;
  text-decoration: none;
  color: #1f2937;
  transition: all 0.25s ease-in-out;
}

.system-icon.icon-ewisop:hover {
  background-color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,159,107,0.15);
}

/* 🔹 Bigger, better icon ratio */
.system-icon.icon-ewisop img {
  height: calc(var(--card-img-height) * 2.2); /* increased scale */
  max-width: 48%; /* let it breathe more */
  object-fit: contain;
  margin-left: 12px;
  transition: transform 0.25s ease;
}

.system-icon.icon-ewisop:hover img {
  transform: scale(1.08);
}

/* 🔹 Consistent text styling */
.system-icon.icon-ewisop span {
  flex: 1;
  text-align: left;
  font-weight: 600;
  font-family: "EcoWorldSans", sans-serif;
  font-size: 1.1vw;
  line-height: 1.1;
  color: #1f2937;
}

.icon-ewisop img{ 
    width: 90px;
}

/* ============================
   RMS Card (text left, icon right, big icon)
   ============================ */
.system-card.icon-rms {
  display: flex;
  flex-direction: row-reverse; /* icon on right */
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-right: 2px solid #00b297;
  border-bottom: 2px solid #00b297;
  border-top-left-radius: 18px;
  border-bottom-right-radius: 18px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  width: 95%;
  height: var(--card-height);
  padding: 0 1rem;
  text-decoration: none;
  color: #1f2937;
  transition: all 0.25s ease-in-out;
}

.system-card.icon-rms:hover {
  background-color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,159,107,0.15);
}

/* 🔹 Big RMS icon on the right */
.system-card.icon-rms img {
  height: calc(var(--card-img-height) * 2.2);
  max-width: 40%;
  object-fit: contain;
  margin-left: 12px;
  transition: transform 0.25s ease;
}

.system-card.icon-rms:hover img {
  transform: scale(1.08);
}

/* 🔹 Text styling same as other systems */
.system-card.icon-rms span {
  flex: 1;
  text-align: left;
  font-weight: 600;
  font-family: "EcoWorldSans", sans-serif;
  font-size: 1.1vw;
  line-height: 1.1;
  color: #1f2937;
}

/* 🧩 For screens narrower than 1200px, go back to 4 per row */
@media (max-width: 1200px) {
  .systems-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 🧩 For iPad and smaller screens */
@media (max-width: 900px) {
  .systems-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ✅ Ensure RMS and EWISOP cards have same width and border size as others */
.system-card.icon-rms,
.system-icon.icon-ewisop {
  width: 80%; /* match other system cards */
  height: calc(var(--card-height) * 0.95); /* consistent height */
  padding: 0 0.9rem; /* same padding as .system-card */
  box-sizing: border-box;
}

/* ✅ Keep text size consistent for RMS & EWISOP on tablet and phone */

/* Tablet view */
@media (max-width: 900px) {
  .system-card.icon-rms span,
  .system-icon.icon-ewisop span {
    font-size: 15px; /* match other system cards */
  }
}

/* Phone view */
@media (max-width: 600px) {
  .system-card.icon-rms span,
  .system-icon.icon-ewisop span {
    font-size: 14px; /* match other system cards */
  }
}

/* ✅ Match RMS & EWISOP card height with others on all screen sizes */

/* Tablet (iPad) view */
@media (max-width: 900px) {
  .system-card.icon-rms,
  .system-icon.icon-ewisop {
    height: 13vh !important; /* same as .system-card */
  }
}

/* Phone view */
@media (max-width: 600px) {
  .system-card.icon-rms,
  .system-icon.icon-ewisop {
    height: 14vh !important; /* same as .system-card */
  }
}

/* Tablet (iPad) view */
@media (max-width: 900px) {
  .system-card.icon-rms,
  .system-icon.icon-ewisop {
    height: 13vh !important; /* same height as others */
  }
}

/* Phone view */
@media (max-width: 600px) {
  .system-card.icon-rms,
  .system-icon.icon-ewisop {
    height: 14vh !important; /* same height as others */
  }

  /* 🔹 Slightly reduce text size for phone only */
  .system-card.icon-rms span,
  .system-icon.icon-ewisop span {
    font-size: 13px !important; /* balanced for small screens */
  }
}

/* 📱 Tablet (iPad & mid-range devices) */
@media (max-width: 1024px) and (min-width: 769px) {
  .system-card.icon-rms span,
  .system-icon.icon-ewisop span {
    font-size: 14px !important; /* slightly larger for iPad readability */
  }

  .system-card.icon-rms,
  .system-icon.icon-ewisop {
    height: 13vh !important; /* keep same height as others */
  }
}

/* 📱 Phone view */
@media (max-width: 600px) {
  .system-card.icon-rms,
  .system-icon.icon-ewisop {
    height: 14vh !important; /* match others */
  }

  .system-card.icon-rms span,
  .system-icon.icon-ewisop span {
    font-size: 13px !important; /* reduced slightly for smaller screens */
  }
}

/* 💻 Large desktop screens (1300px and above) */
@media (min-width: 1300px) {
  .system-card span,
  .system-card.icon-rms span,
  .system-icon.icon-ewisop span {
    font-size: 0.95vw !important;
    font-weight: 700 !important;
  }
}

@media (max-width: 900px) {
    .systems-grid{
        grid-template-columns: repeat(2, 1fr)!important;
    }}