/* General Styles */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #FFFFFF;
  color: #333;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

header {
  padding: 20px;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ccc;
}

.logo-and-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav a {
  margin: 0 10px;
  text-decoration: none;
  color: #333;
  font-size: 14px;
}

nav a:hover {
  color: #0073e6;
}

main {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: -10px;
}

.content {
  display: flex;
  width: 100%;
  gap: 20px;
  align-items: flex-start;
  padding: 20px;
}

/* Left Section Styles */
.left {
  flex: 1;
}

.left h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

.left p {
  margin-bottom: 20px;
}

.button-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 420px; /* 200px * 2 + 2px gap */
  justify-content: center;
}

.card {
  display: flex;
  justify-content: center;
  align-items: center;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(78, 106, 120, 0.8);
  font-weight: bold;
  text-align: center;
  margin: 0;
  width: 200px;
  height: 60px;
  border-radius: 15px;
  border: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}




.cardnew {
    display: flex
;
    justify-content: center;
    align-items: center;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #4E6A78;
    font-weight: bold;
    text-align: center;
    margin: 0;
    width: 196px;
    height: 136px;
    border-radius: 15px;
    border: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
}




.card.active {
  border: 3px solid #000;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.card span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #FFFFFF;
  font-size: 28px;
}

/* Card hover effects */
.card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}



/* Selection Info */
.selection-info {
  display: flex;
  align-items: center;
  margin-top: -19px;
  margin-left: 370px;
  font-size: 16px;
}

.selection-info.hidden {
  display: none;
}

.selection-info .arrow {
  width: 30px;
  height: auto;
  margin-top: 7px;
  margin-left: 10px;
  transition: transform 0.3s ease, filter 0.3s ease;
  cursor: pointer;
}

.selection-info .arrow:hover {
  transform: scale(1.3);
  filter: brightness(0.8);
}








/* Right Section Styles */
.right {
  flex: 1;
  text-align: center;
}

.sticky-radar {
  position: fixed;
  right: 6%;
  z-index: 10;
}

.right h2 {
  font-size: 24px;
  margin-bottom: 10px;
  margin-left: -18%;
}

/* Radar Circle */
.radar-container {
  position: relative;
  width: 690px;
  height: 690px;
  margin-top: 30px;
  left: -10%;
  background-color: #000000;
  border-radius: 50%;
  box-shadow: 0 0 15px rgb(0, 0, 0);
}

/* Concentric Circles with Gradient */
.circle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.circle-2 { width: 90%; height: 90%; top: 5%; left: 5%; background-color: #f0f0f0; }
.circle-3 { width: 80%; height: 80%; top: 10%; left: 10%; background-color: #e2e2e2; }
.circle-4 { width: 70%; height: 70%; top: 15%; left: 15%; background-color: #cacaca; }
.circle-5 { width: 60%; height: 60%; top: 20%; left: 20%; background-color: #acabab; }
.circle-6 { width: 50%; height: 50%; top: 25%; left: 25%; background-color: #868686; }
.circle-7 { width: 40%; height: 40%; top: 30%; left: 30%; background-color: #707070; }
.circle-8 { width: 30%; height: 30%; top: 35%; left: 35%; background-color: #494949; }
.circle-9 { width: 20%; height: 20%; top: 40%; left: 40%; background-color: #2e2e2e; }
.circle-10 { width: 10%; height: 10%; top: 45%; left: 45%; background-color: #000000; }

/* Radar Lines */
.line-1 {
  position: absolute;
  background-color: #ffffff;
  width: 3px;
  height: 50%;
  left: 49.8%;
  top: 0;
  transform-origin: 50% 50%;
}
/* .line-2 {
  position: absolute;
  background-color: #ffffff;
  width: 3px;
  height: 100%;
  left: 50%;
  top: 0;
  transform-origin: 5% 50%;
} */
.line-2 {
  position: absolute;
  background-color: #ffffff;
  width: 3px;
  height: 100%;
  left: 50%;
  top: 0;
  transform-origin: 5% 50%;
}
.line-3 {
  position: absolute;
  background-color: #ffffff;
  width: 3px;
  height: 100%;
  left: 50%;
  top: 0;
  transform-origin: 5% 50%;
}

.line-1 { transform: rotate(0deg); }
/* .line-2 { transform: rotate(90deg); } */
.line-2 { transform: rotate(60deg); }
.line-3 { transform: rotate(120deg); }

/* TRL Labels */
.trl-label {
  position: absolute;
  text-align: center;
}
.trl-1 { bottom: 45%; left: 50%; transform: translate(-50%, -50%); color: #ffffff; font-size: 7px; font-weight: bold; }
.trl-2 { bottom: 40%; left: 50%; transform: translate(-50%, -50%); color: #ffffff; font-size: 12px; font-weight: bold; }
.trl-3 { bottom: 35%; left: 50%; transform: translate(-50%, -50%); color: #ffffff; font-size: 12px; font-weight: bold; }
.trl-4 { bottom: 30%; left: 50%; transform: translate(-50%, -50%); color: #000000; font-size: 12px; font-weight: bold; }
.trl-5 { bottom: 25%; left: 50%; transform: translate(-50%, -50%); color: #000000; font-size: 12px; font-weight: bold; }
.trl-6 { bottom: 20%; left: 50%; transform: translate(-50%, -50%); color: #000000; font-size: 12px; font-weight: bold; }
.trl-7 { bottom: 15%; left: 50%; transform: translate(-50%, -50%); color: #000000; font-size: 12px; font-weight: bold; }
.trl-8 { bottom: 10%; left: 50%; transform: translate(-50%, -50%); color: #000000; font-size: 12px; font-weight: bold; }
.trl-9 { bottom: 5%; left: 50%; transform: translate(-50%, -50%); color: #000000; font-size: 12px; font-weight: bold; }

/* Curved Text */
svg text {
  font-size: 15px;
  font-weight: bold;
  dominant-baseline: middle;
}
.text-red { fill: rgb(212, 106, 77); }
.text-blue { fill: rgb(151, 108, 137); }
.text-green { fill: rgb(204, 208, 98); }
.text-orange { fill: rgb(255, 215, 68); }
.text-selected-project { fill: #ffffff; }


/* Highlights */
.highlight {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60%;
  border-radius: 43%;
  clip-path: polygon(50% 50%, 103% 0, 103% 100%, 50% 50%);
  z-index: 2;
  opacity: 0.5;
  margin-top: 139px;
}

.highlight.methods {
  background-color: rgba(212, 106, 77, 0.6); /* Red */
  transform: rotate(-180deg);
}

.highlight.materials {
  background-color: rgba(151, 108, 137, 0.6); /* Purple */
  transform: rotate(-120deg);
}

.highlight.manufacturing {
  background-color: rgba(204, 208, 98, 0.6); /* Green */
  transform: rotate(-60deg);
}

.highlight.miscellaneous {
  background-color: rgba(255, 215, 68, 0.6); /* Yellow */
  transform: rotate(-0deg);
}

.hidden {
  display: none;
}

/* Selected Card Styling (Now Same as Other Second Page Cards) */
#selected-card {
  display: flex;
  justify-content: center;
  align-items: center;
  background-position: center;
  background-repeat: no-repeat;
  font-weight: bold;
  text-align: center;
  width: 200px;
  height: 140px;
  border-radius: 15px; /* Matches the border-radius of other cards */
  border: none; /* No additional border */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Matches the shadow of other cards */
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}

#selected-card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* Matches hover effect of other cards */
}

#selected-cards-container .card span {
    font-size: 16px !important;
}

/* General Styles for Second Page Cards */
.second-page-card {
  display: flex;
  justify-content: center;
  align-items: center;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #a8a8a8;
  font-weight: bold;
  text-align: center;
  width: 196px;
  height: 140px;
  border-radius: 15px;
  border: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}

.second-page-card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}



.card.active {
  border: 2px solid #ffd744;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  color: #ffd744 !important;
}

.card.active span {
  color: #ffd744 !important;
 }

#selected-main-card .card span {
    font-size: 16px !important;
}

/* Radar Image Container */
.radar-image-container {
  position: absolute;
  width: 30px; /* Small icon size */
  height: 30px;
  display: block;
  z-index: 3; /* Above highlight */
  pointer-events: none; /* No interaction */
}

.radar-image-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Third Page Card Styling */
.styled-card {
  display: flex;
  justify-content: center;
  align-items: center;
  background-position: center;
  background-repeat: no-repeat;
 background-color: rgba(78, 106, 120, 0.6);
  font-weight: bold;
  text-align: center;
  margin: 0;
  width: 200px;
  height: 60px;
  border-radius: 15px;
  border: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
  font-size: 16px;
  color: #ffffff;
  overflow: hidden; /* Prevent text from going outside */
  word-wrap: break-word; /* Ensure text wraps within card */
  line-height: 1.3; /* Adjust line spacing */
  white-space: normal; /* Allow wrapping instead of a single line */
  flex-direction: column; /* Stack text properly */
}

/* Prevent long words from breaking the layout */
.styled-card::before {
  content: attr(data-text); /* Use data attribute as content */
  visibility: hidden;
  height: 0;
  overflow: hidden;
}

.styled-card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

/* When a card is selected */

.styled-card.active {
  border: 2px solid #ffd744;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  color: #ffd744 !important;
}

.styled-card.active span {
  color: #ffd744 !important;
 }


/* Medium screens: 1024px */
@media (max-width: 1024px) {
  .styled-card,
  .second-page-card,
  .card,
  #selected-card {
    height: 150px;
  }

  .styled-card,
  .second-page-card span,
  .card span,
  #selected-card span {
    font-size: 18px;
    padding: 0 6px;
    white-space: normal;
    text-align: center;
  }

  .radar-container {
    width: 380px;
    height: 380px;
    left: 10%;
  }

  .trl-label {
    font-size: 10px !important;
  }

  .highlight {
    margin-top: 78px;
  }

  .radar-image-container {
    width: 22px;
    height: 22px;
  }
}

/* Tablet screens: 768px */
@media (max-width: 768px) {
  .content {
    flex-direction: column;
    align-items: center;
    padding: 10px;
  }

  .styled-card,
  .second-page-card,
  .card,
  #selected-card {
    height: 140px;
  }

  .styled-card,
  .second-page-card span,
  .card span,
  #selected-card span {
    font-size: 16px;
    padding: 0 4px;
    line-height: 1.2;
  }

  .radar-container {
    width: 320px;
    height: 320px;
    left: auto;
    margin: 0 auto;
  }

  .trl-label {
    font-size: 9px !important;
  }

  .highlight {
    margin-top: 66px;
  }

  .radar-image-container {
    width: 20px;
    height: 20px;
  }
}

/* Small screens: 480px */
@media (max-width: 480px) {
  .button-grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .styled-card,
  .second-page-card,
  .card,
  #selected-card {
    height: 130px;
  }

  .styled-card,
  .second-page-card span,
  .card span,
  #selected-card span {
    font-size: 14px;
    padding: 0 2px;
    line-height: 1.1;
  }

  .radar-container {
    width: 270px;
    height: 270px;
  }

  .trl-label {
    font-size: 8px !important;
  }

  .highlight {
    margin-top: 56px;
  }

  .radar-image-container {
    width: 14px;
    height: 14px;
  }
}