/* Intel-inspired color system */
:root{
  --intel-blue:#0071c5;
  --intel-blue-700:#005fa3;
  --bg-start:#eaf6ff;
  --card-bg:#ffffff;
  --muted:#5b708a;
  --text:#0b1a2b;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial;
  color:var(--text);
  background:linear-gradient(180deg, var(--bg-start), #ffffff 60%);
  -webkit-font-smoothing:antialiased;
}

/* --- HERO --- */
.hero{
  background: linear-gradient(135deg,var(--intel-blue),var(--intel-blue-700));
  color:#fff;
  padding:3rem 1rem;
  position:relative;
}
.hero-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:2rem;
}
.logo{width:240px;height:auto;flex:0 0 auto}
.hero-copy{flex:1}
.hero-title{
  margin:0 0 .5rem 0;
  font-size:2.4rem;
  line-height:1.05;
  font-weight:700;
  text-shadow:0 2px 6px rgba(2,20,43,0.2);
}
.hero-sub{
  margin:0;
  color:rgba(255,255,255,0.95);
  max-width:720px;
  font-size:1.05rem;
}

.instuctions{
  text-align:center;
  font-size:.95rem;
  margin:1.5rem 0;
}

/* --- TIMELINE --- */
.timeline{
  display:flex;
  gap:1rem;
  /* Add responsive side padding so the timeline isn't flush to screen edges */
  padding:.5rem;
  padding-left:clamp(1rem, 4vw, 4rem);
  padding-right:clamp(1rem, 4vw, 4rem);
  overflow-x:auto;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  /* Center and limit width so large screens keep comfortable margins */
  max-width:1200px;
  margin:0 auto;
}
.milestone{scroll-snap-align:start;flex:0 0 300px}
.milestone-card{
  background:var(--card-bg);
  border-radius:12px;
  padding:1rem;
  box-shadow:0 6px 20px rgba(8,29,52,0.08);
  border:1px solid rgba(11,26,43,0.06);
  transition:transform .18s ease, box-shadow .18s ease;
  position:relative;
  overflow:hidden;
}
.milestone-card:focus{outline:3px solid rgba(0,113,197,0.18);}
.milestone-card:hover{transform:translateY(-6px);box-shadow:0 12px 28px rgba(8,29,52,0.12)}
.milestone-img{
  width:100%;
  height:170px; /* fixed visual height so cards align */
  object-fit:contain; /* show entire image without cropping */
  object-position:center;
  background:linear-gradient(180deg,#fbfdff,#eef7ff); /* subtle backdrop for letterboxing */
  border-radius:8px;
  padding:0.25rem;
  display:block;
}
.milestone-year{color:var(--intel-blue);font-weight:700;margin-bottom:.35rem}
.milestone-title{margin:.15rem 0 .65rem 0;font-size:1.05rem}
.milestone-summary{margin:0 0 .5rem 0;color:var(--muted);font-size:.95rem}

/* Swap summary with details on hover/focus — replaces content instead of sliding an overlay */
.milestone-more{
  position:relative;
  background:linear-gradient(180deg, var(--intel-blue-700), var(--intel-blue));
  color:#fff;
  margin-top:0.5rem;
  padding:0 1rem;
  max-height:0;
  opacity:0;
  overflow:hidden;
  border-radius:8px;
  transition:max-height .28s ease, opacity .18s ease, padding .18s ease;
}
.milestone-card .milestone-summary{
  margin:0 0 .5rem 0;
  color:var(--muted);
  font-size:.95rem;
  transition:max-height .18s ease, opacity .18s ease, transform .18s ease, margin .18s ease, padding .18s ease;
  max-height:7em; /* allow more lines for wrap text */
  overflow:hidden;
  word-wrap:break-word;
  overflow-wrap:break-word;
}

.milestone-card:hover .milestone-more,
.milestone-card:focus .milestone-more,
.milestone-card:focus-within .milestone-more{
  padding:1rem;
  max-height:220px;
  opacity:1;
}
.milestone-card:hover .milestone-summary,
.milestone-card:focus .milestone-summary,
.milestone-card:focus-within .milestone-summary{
  opacity:0;
  transform:translateY(-6px);
  margin:0;
  max-height:0;
  padding:0;
}

.milestone-more p{margin:0;font-size:.95rem}

/* Small screen: stack vertically */
@media (max-width:700px){
  .hero-inner{flex-direction:column;align-items:flex-start}
  .logo{width:110px;margin-bottom:.5rem}
  .hero-title{font-size:1.6rem}

  .timeline{flex-direction:column;overflow-x:visible;padding:1.5rem;padding-left:1rem;padding-right:1rem}
  .milestone{flex:1 1 auto}
  .milestone-card{display:block}
  .milestone-img{height:220px;object-fit:contain}
  .milestone-card .milestone-summary{max-height:none;overflow:visible;}
  /* On small screens keep the blue background so details remain clearly visible */
  .milestone-more{
    position:relative;
    transform:none;
    background:linear-gradient(180deg, var(--intel-blue-700), var(--intel-blue));
    color:#fff;
    padding:.75rem 1rem;
    margin-top:.5rem;
    border-radius:8px;
    max-height:none;
    opacity:1;
  }
}

/* Responsive tweaks */

/* Tablets and small laptops */
@media (max-width:768px){
  .hero{padding:2rem 1rem}
  .hero-inner{gap:1rem;align-items:flex-start}
  .logo{width:140px}
  .hero-title{font-size:1.9rem}
  .hero-sub{font-size:1rem}

  .timeline{padding-left:clamp(1rem, 6vw, 3rem);padding-right:clamp(1rem, 6vw, 3rem);gap:.9rem}
  .milestone{flex:0 0 280px}
  .milestone-img{height:190px}
  .milestone-card{padding:.9rem}
  .milestone-title{font-size:1rem}
  .milestone-card .milestone-summary{max-height:7.5em;}
}

/* Small phones */
@media (max-width:480px){
  .hero{padding:1.25rem .75rem}
  .logo{width:200px; align-self:center}
  .hero-title{font-size:1.15rem;text-align: center}
  .hero-sub{font-size:.95rem;max-width:100%;text-align: center}

  .timeline{padding-left:1rem;padding-right:1rem;gap:.75rem}
  .milestone{flex:1 1 auto}
  .milestone-card{padding:.6rem;border-radius:10px}
  .milestone-img{height:160px}
  .milestone-title{font-size:.98rem}
  .milestone-card .milestone-summary{max-height:8em;}
  /* On very small screens keep details hidden until user taps the card */
  .milestone-more{
    background:linear-gradient(180deg, var(--intel-blue-700), var(--intel-blue));
    color:#fff;
    padding:0 1rem;
    margin-top:.5rem;
    border-radius:8px;
    max-height:0;
    opacity:0;
    overflow:hidden;
    transition:max-height .28s ease, opacity .18s ease, padding .18s ease;
  }
  .milestone-card.open .milestone-more{padding:.75rem 1rem;max-height:220px;opacity:1}
  .milestone-card.open .milestone-summary{opacity:0;transform:translateY(-6px);margin:0;max-height:0;padding:0}
  body > p{font-size:.95rem;padding:.75rem;}
}

/* Newsletter Section */
.newsletter-section {
  padding: 3rem 1rem;
  background: linear-gradient(135deg, rgba(0,113,197,0.05), rgba(0,113,197,0.02));
}

.newsletter-section h2 {
  text-align: center;
  color: var(--text);
  margin-bottom: 0.5rem;
  font-size: 1.8rem;
  font-weight: 700;
}

.newsletter-subtitle {
  text-align: center;
  color: var(--muted);
  margin-bottom: 2rem;
  font-size: 1rem;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.newsletter-form {
  max-width: 500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  color: var(--text);
  font-weight: 500;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.form-group input {
  padding: 0.75rem 1rem;
  border: 2px solid rgba(11,26,43,0.15);
  border-radius: 6px;
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  background-color: var(--card-bg);
  color: var(--text);
}

.form-group input::placeholder {
  color: var(--muted);
}

.form-group input:focus {
  outline: none;
  border-color: var(--intel-blue);
  box-shadow: 0 0 0 3px rgba(0,113,197,0.1);
}

.btn-subscribe {
  padding: 0.75rem 2rem;
  background-color: var(--intel-blue);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 0.5rem;
}

.btn-subscribe:hover {
  background-color: var(--intel-blue-700);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,113,197,0.3);
}

.btn-subscribe:active {
  transform: translateY(0);
}

/* Mobile adjustments */
@media (max-width: 700px) {
  .newsletter-section {
    padding: 2rem 1rem;
  }
  
  .newsletter-section h2 {
    font-size: 1.4rem;
  }
  
  .newsletter-form {
    gap: 0.8rem;
  }
}

/* Last note on page */
body > p{padding:1rem;text-align:center;color:var(--muted);margin:0 0 2rem 0}

/* Three-column Bootstrap grid section */
/* Three-column section styling */
.content-section {
  padding: 3rem 1rem;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.col-12,
.col-md-6,
.col-lg-4 {
  padding: 0;
}

.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

.col-12 > div {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 6px 20px rgba(8,29,52,0.08);
  border: 1px solid rgba(11,26,43,0.06);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.col-12 h2 {
  color: var(--text);
  margin-top: 0;
}

.col-12 p {
  flex: 1;
  margin: 0.5rem 0 1rem 0;
}

/* Learn More button styling */
.btn-outline-primary {
  color: var(--intel-blue);
  border: 2px solid var(--intel-blue);
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-weight: 500;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  align-self: flex-start;
  text-decoration: none;
}

.btn-outline-primary:hover {
  background-color: var(--intel-blue);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,113,197,0.3);
}

.btn-outline-primary:active {
  transform: translateY(0);
}

/* Tablets: 2 columns */
@media (min-width: 768px) {
  .col-md-6 {
    flex: 0 0 calc(50% - 0.75rem);
    max-width: calc(50% - 0.75rem);
  }
}

/* Desktops: 3 columns */
@media (min-width: 992px) {
  .col-lg-4 {
    flex: 0 0 calc(33.333% - 1rem);
    max-width: calc(33.333% - 1rem);
  }
}

/* Footer Section */
.footer {
  background: linear-gradient(135deg, var(--intel-blue), var(--intel-blue-700));
  color: #ffffff;
  padding: 2rem 1rem;
  margin-top: 3rem;
}

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

.footer-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.footer-section {
  flex: 1;
  width: 100%;
}

.copyright {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.9);
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
;
}

.footer-links a {
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: #ffffff;
}

/* Mobile footer adjustments */
@media (max-width: 700px) {
  .footer {
    padding: 1.5rem 1rem;
    margin-top: 2rem;
  }

  .footer-content {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .footer-links {
    flex-direction: row;
    gap: 1.5rem;
    justify-content: center;
  }
}