:root {
    --primary: #1D5450; /* lighter teal background accent */
    --primary-dark: #59D5450; /* darker teal for heading and buttons */
    --primary-light: #c9f7eb;
    --bg: #f0fdfd;
    --text: #DEE6E0;
    --muted: #006666;
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Segoe UI, sans-serif
}

body{
    background:#1D5450;
    color:#033;
    overflow-x:hidden
}

/* SECTIONS */
section {
    padding:80px 10%
}
 .title {
     text-align:center;
     font-size:2.5rem;
     margin-bottom:60px;
     color:#DEE6E0;
 }

 /* Hero Section */
.hero {
  background: linear-gradient(rgba(29,84,80,0.1), rgba(29,84,80,0.1)), url('https://source.unsplash.com/1600x600/?technology') center/cover no-repeat;
  padding: 120px 20px 60px 20px;
  text-align: center;
  overflow: hidden;
  position: relative;
  color: var(--primary);
}

.hero p.label {
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  opacity: 0;
  animation: fadeInUp 0.8s forwards;
}

.hero h1 {
  font-size: 3rem;
  margin: 20px 0;
  opacity: 0;
  animation: fadeInUp 1s forwards;
  animation-delay: 0.2s;
  color: #DEE6E0; /* darker teal for heading */
}

.hero h1 span {
  display: inline-block;
  opacity: 0;
  transform: rotate(-10deg) scale(0.5);
  animation: revealText 1s forwards;
  animation-delay: 0.6s;
  color: #DEE6E0; /* darker teal for "Talk" as well */
}

.hero p.description {
  max-width: 600px;
  margin: 20px auto 0 auto;
  color: #DEE6E0;
  font-size: 1.2rem;
  opacity: 0;
  animation: fadeInUp 1s forwards;
  animation-delay: 1s;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px);}
  to { opacity: 1; transform: translateY(0);}
}

@keyframes revealText {
  to { opacity: 1; transform: rotate(0) scale(1);}
}

/* NAV Panel */
nav {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 60px;
    background:#DEE6E0;
    position:sticky;
    top:0;
    z-index:1000
}
nav h1 {
    color:#033
}

nav a {
    color:#033;
    text-decoration:none;
    margin-left:30px;
    transition:.3s
}

nav a:hover {
    color:#056d61;
    transform:translateY(-2px)
}

/* hamburger hidden on desktop */
.menu-toggle{
  display:none;
  font-size:28px;
  cursor:pointer;
}

/* MOBILE ONLY */
@media (max-width:768px){

  .menu-toggle{
    display:block;
  }

    .nav-links{
      position:absolute;
      top:70px;
      right:0;
      width:120px;
      background:#DEE6E0;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:20px;
      padding:20px 0;
      border-radius:0 0 0 15px;
      transform:translateX(100%);
      transition:transform .4s ease, right .3s ease;
      box-shadow:0 10px 25px rgba(0,0,0,.15);
    }

    .nav-links.show{
      transform:translateX(0);
    }
}