/* ---------- RESET ---------- */
* { box-sizing: border-box; margin:0; padding:0; }
html,body { height:100%;}
body {
  font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: #111;
  
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background: linear-gradient(270deg, rgba(34,193,195,1) 0%, rgba(219,108,71,1) 79%);
}

/* ---------- GENERIC SECTION ---------- */
section { position: relative; padding: 48px 20px; overflow: visible; }

/* Utility */
.muted { color: rgba(255,255,255,0.7); }

/* ---------- HERO ---------- */
.hero {
  min-height: 48vh;
  display:flex;
  align-items:center;
  justify-content:flex-end; /* put text to the right like your mock */
  color: #fff;
  padding-right: 6vw;
  /* keep base gradient but allow page-level background to show through */
  background: transparent;
}

.hero-sticker{
  position: absolute;
  left: 18px;
  
  width: 40vw;            /* bigger on mobile */
  max-width: 280px;       /* up from 220px */
  pointer-events: none;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,0.45));
  z-index: 1;
}


/* text on right */
.hero-text {
  z-index: 2;
  max-width: 66%;
  text-align: right;
}

/* responsive fonts */
.hero-text h1 {
  font-size: clamp(24px, 8vw, 48px);
  line-height: 1.03;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  font-weight: 600;
}
.subtitle {
  font-size: clamp(12px, 2.5vw, 16px);
  opacity: 0.95;
  font-weight: 600;
}

/* ---------- ABOUT (translucent panel with tall left card) ---------- */
.about {
  display:flex;
  align-items:center;
  gap: 28px;
  justify-content:center;
  background: rgba(255,255,255,0.85); /* semi-transparent */
  color: #111;
  backdrop-filter: blur(4px);
  padding: 40px 20px;
}

.about-card{
  flex: 0 0 28%;
  max-width: 180px;
  width: 28%;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.12);
}

.about-text {
  flex: 1;
  max-width: 680px;
  text-align:left;
  padding-left: 8px;
}
.about-text h2 { font-size: 26px; margin-bottom: 8px; }
.about-text p { color: #333; line-height:1.5; }

/* ---------- ACHIEVEMENTS ---------- */
.achievements {
  display:flex;
  align-items:center;
  gap: 20px;
  padding: 56px 20px;
  background: rgba(34,34,34,0.82); /* dark translucent */
  color: #fff;
  backdrop-filter: blur(3px);
}

/* vertical label on left */
.side-title {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-weight: 600;
  font-size: 20px;
  color: rgba(255,255,255,0.85);
  margin-right: 18px;
  flex: 0 0 auto;
  
}

/* main achievements content */
.achievements-content {
  flex: 1;
  max-width: 900px;
}
.achievements-content h3 { font-size: 24px; margin-bottom: 6px; }
.achievements-content .big { font-size: 36px; margin: 8px 0; font-weight:700; }

/* badge pinned right */
.ach-badge {
  flex: 0 0 120px;       /* bigger than 96px */
  width: 120px;
  height: auto;
  margin-left: auto;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.35));
}

/* ---------- CONNECT (gradient panel like hero) ---------- */
.connect {
  min-height: 42vh;
  display:flex;
  align-items:center;
  justify-content:center;
  color: #fff;
  padding: 56px 20px;
  background: transparent;
}

.connect-text {
  margin-left: 120px; /* adjust until it clears the character */
}

.connect-sticker{
  position: absolute;
  left: 18px;
 
  width: 36vw;           /* slightly larger */
  max-width: 260px;      /* up from 220px */
  z-index: 1;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,0.35));
}

.connect-text{
  z-index: 2;
  max-width: 640px;
  text-align:left;
}
.connect-text h2{ font-size: clamp(20px,4.5vw,34px); margin-bottom: 10px; color:#fff; }
.connect-text ul{ list-style:none; padding-left:0; margin-top: 8px; }
.connect-text li{ margin: 10px 0; }
.connect-text a{ color: rgba(255,255,255,0.95); text-decoration:none; }

/* big footer like your mock */
footer {
  background: rgba(0,0,0,0.9);
  padding: 24px 12px;
  text-align:center;
  color: rgba(255,255,255,0.95);
  font-weight: 600;
  font-size: 14px;
}

/* ---------- RESPONSIVE LARGER SCREENS ---------- */
@media (min-width: 900px) {
  .hero-sticker { left: 48px; width: 360px;  } /* larger desktop */
  .ach-badge { flex: 0 0 160px; width: 160px; }           /* badge larger desktop */
  .connect-sticker { left: 40px; width: 340px;  }
  
}

.badge-link {
    /* Set the text color to blue */
    
    /* Optional: Remove the default underline from the link */
    text-decoration: none;
    /* Optional: Set elements inside to align horizontally */
    display: inline-flex;
    align-items: center;
}