:root{
    /*colors*/
    --black: #050A0B;
    --eerie-black: #151C1E;
    --charcoal: #374C52;
    --gunmetal: #21363B;
    --slate-gray: #66777E;
    --indigo-dye: #1E4F6F;
    --white: #FFFFFF;
    --cadet-gray: #939CA0;
}

html{
    scroll-behavior: smooth;
}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body{
    width: 100%;
    margin: 0;
    font-family: 'Segoe UI', sans-serif;
    background-color: transparent;
    color: var(--white);
    overflow-x: hidden;
}

/*radial gradient background behind sections*/
body::after{
    content: '';
    position: fixed;
    z-index: -2;
    width: 100%;
    height: 100vh;
    background: radial-gradient(circle, var(--eerie-black) 20%, var(--black));
    top: 0;
    left: 0;
}
body > *{
    position: relative;
    z-index: 1;
}

/*page divdider*/
.divider {
    height: 2px;
    background: var(--cadet-gray);
    margin: 3rem auto;
    width: 10vw;
    border-radius: 100px;
    opacity: 0;
    transition: all 0.5s ease 0.2s;
}

/*cards style*/
.card {
  width: 80vw;
  margin: 6rem auto;
  padding: 4rem 3rem;
  border-radius: 50px 0 50px 0;
  background: linear-gradient(135deg, #1a2a2e, var(--charcoal));
  position: relative;
  overflow: hidden;
  border: 1.5px solid #939ca07a;
  box-shadow: 0 0 10px #ffffff25;
  /* transition from original code */
  opacity: 0;
  transform: translateX(-200px);
  transition: all 0.5s ease 0.2s;
}

/*reveal elements animation when scrolled*/
.cards-show {
    opacity: 1 !important;
    transform: translate(0, 0) scale(1) !important;
}

/*divider animation when scrolled*/
.divider-show {
    opacity: 1 !important;
    width: 80vw !important;
}

/* Responsive adjustments */
@media screen and (max-width: 1200px) {
    .divider { width: 20vw; }
    .card { width: 90vw; padding: 3rem 2rem; }
    body > * { padding: 0 1rem; }
}

@media screen and (max-width: 992px) {
    .card { padding: 2.5rem 1.5rem; }
    #capstone-deliverables > ul { justify-content: center; }
    #capstone-deliverables > ul > li { width: 18rem; height: auto; margin: 1rem; }
    #EDP-timeline ol li { width: 90%; padding-left: 2rem; padding-right: 2rem; }
}

@media screen and (max-width: 768px) {
    .hero h1 { font-size: 2.2rem; }
    .hero p { font-size: 1.1rem; }
    .TOC ul { flex-direction: column; gap: 2rem; padding: 3rem 0; }
    .TOC ul::before, .TOC ul::after { width: 90%; }
    #what-is-capstone { flex-direction: column; }
    .intro-text, .intro-img { width: 100%; height: auto; }
    .intro-text h2 { font-size: 2rem; }
    .intro-text p, .intro-text ul { width: 100%; font-size: 1.2rem; }
    #EDP-timeline ol li.right, #EDP-timeline ol li.left { padding-left: 1rem !important; padding-right: 1rem !important; }
    .timeline-middle { left: 2%; transform: translateX(0); width: 4px; }
}

@media screen and (max-width: 480px) {
    .hero h1 { font-size: 1.8rem; }
    .hero p { font-size: 1rem; }
    .hero button { padding: 0.6rem 1.5rem; font-size: 1rem; }
    .intro-text h2 { font-size: 1.5rem; }
    .intro-text p, .intro-text ul li { font-size: 1rem; }
    #capstone-deliverables > ul > li { width: 90%; height: auto; margin: 0.5rem 0; }
    #EDP-timeline ol li i { display: none; }
    .gallery .slider li { width: 90%; min-width: 90%; }
}