/* =========================
   CAPSTONE
   ========================= */

.section-capstone {
    width: 90%;
    margin: auto;
    padding: 100px 100px 30px 100px;
}

body.capstone-page {
    font-family: Arial, Helvetica, sans-serif;
    background:
        linear-gradient(
            to bottom,
            transparent 0px,
            transparent 500px,
            #ffffff 900px
        ),
        linear-gradient(45deg, #111 25%, transparent 25%),
        linear-gradient(-45deg, #111 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #111 75%),
        linear-gradient(-45deg, transparent 75%, #111 75%);
        
    background-size:
        100% 100%,
        80px 80px,
        80px 80px,
        80px 80px,
        80px 80px;

    background-position:
        0 0,
        0 0,
        0 40px,
        40px -40px,
        -40px 0;

    background-color: #222;
    color: #0057A8;
    line-height: 1.6;
}

header.capstone-page {
    background: #111820;
    border-bottom: 1px solid #0F2233;
    color: white;
}

.capstone-hero {
    width: 90%;
    margin: 0 auto;
    padding: 100px 40px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;

    background:#F2F4F5; 
    border-radius: 60px;
    margin-top: 50px;
}

hr.capstone-page {
    border: none;
    border-top: 3px solid #D71920;
    margin: 30px 0;
    margin-left: 50px;
}

hr.capstone-myrole {
    border: none;
    border-top: 1.5px solid #D71920;
    margin: 0 30px 20px 50px;
}

.capstone-text {
    flex: 1;
}

.capstone-text .eyebrow {
    margin-bottom: 10px;
    margin-left: 50px;
    
}

.capstone-text h1 {
    font-size: 48px;
    line-height: 1.1;
    color: #3a3939;
    margin-left: 50px;

}

.capstone-text h2 {
    font-size: 42px;
    margin-bottom: 5px;
    margin-left:50px;
    color: #3a3939;
}

.capstone-text a {
    text-align: left;
    margin-left: 50px;
}

.capstone-text p {
    color: #37698f;
    margin-left: 50px;
}

ul {
    margin-left: 40px;
}

.capstone-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.capstone-image img {
    width: 100%;
    max-width: 550px;
    height: auto;
    display: block;
}

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

}

.aero-content img {
    width: 400px;
    height: auto;
    margin: 20px 10px 20px 50px;
}

.aero-text p {
    flex: 1;
    margin: 20px 70px 20px 10px;
}

.timeline-capstone {
    padding: 100px 50px;
}

.timeline-line {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0px 75px 0px 75px;
}

/* Horizontal line */
.timeline-line::before {
    content: "";
    position: absolute;
    top: 40%;
    left: 0;
    right: 0;
    border-top: 4px solid #0057A8;
}

.timeline-point {
    position: relative;
    width: 12%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.timeline-point i {
    width: 20px;
    height: 20px;
    background: #ffffff;
    border: 4px solid #0057A8;
    border-radius: 50%;
    position: relative;
    z-index: 2;
}

/* Month text */
.timeline-box {
    position: absolute;
    bottom: 45px;
    width: 220px;
    padding: 20px;
    background: #F2F4F5;
    border-radius: 15px;
    text-align: center;
}

/* Date */
.timeline-box span {
    display: block;
    font-size: 14px;
    font-weight: bold;
    color: #0057A8;
    margin-bottom: 10px;
}

/* Report title */
.timeline-box strong {
    display: block;
    font-size: 20px;
    color: #111820;
}

/* Box below the line */
.timeline-box-bottom {
    top: 45px;
    bottom: auto;
}

.timeline-description {
    width: 90%;
    margin: 80px auto 0;
    padding: 30px;
    background: #F2F4F5;
    border-radius: 30px;
    text-align: left;
}

.timeline-description h3 {
    color: #111820;
    font-size: 26px;
}

hr.timeline-descr {
    border: none;
    border-top: 1.5px solid #ff0000;
    margin: 10px 0 20px 0;
}

.timeline-description p {
    color: #111820;
    font-size: 17px;
}

/* Selected report */
.timeline-box.active {
    background: #F2F4F5;
    transform: scale(1.05);
    border: 2px solid #FF0000;
}
.timeline-box.active span,
.timeline-box.active strong {
    color: #111820;
}

.report-content {
    display: flex;
    align-items: center;
    gap: 40px;
}

.report-text {
    flex: 1;
    white-space: pre-line;
}

.report-content img {
    width: 350px;
    height: auto;
    border-radius: 15px;
}

/* =========================
   SKILLS & TOOLS
========================= */

.skills-columns {
    display: flex;
    gap: 30px;
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
    justify-content: center;
    align-items: stretch;
}

.skills-column {
    flex: 1;
    min-width: 0;

    background: #ffffff;
    padding: 25px 30px;

    border-radius: 15px;
    border: 1px solid #000000;
    box-sizing: border-box;
}

.skills-column strong {
    display: block;
    color: #0057A8;
    font-size: 22px;
    margin-bottom: 15px;
}

.skills-column ul {
    margin: 0;
    padding-left: 25px;
}

.skills-column li {
    color: #111820;
    margin-bottom: 7px;
    font-size: 16px;
}


/* =========================
   SKILLS RESPONSIVE
========================= */

@media (max-width: 1000px) {

    .skills-columns {
        width: 90%;
        gap: 20px;
    }

    .skills-column {
        padding: 20px;
    }

    .skills-column strong {
        font-size: 19px;
    }

    .skills-column li {
        font-size: 15px;
    }
}

/* =========================
   CAPSTONE REPORT DOWNLOAD
========================= */

.capstone-download-btn {
    display: inline-block;
    margin-top: 25px;
    padding: 12px 24px;

    background: #194269;
    color: white;

    font-size: 16px;
    font-weight: 600;
    text-decoration: none;

    border: 2px solid #194269;
    border-radius: 5px;

    transition: all 0.2s ease;
}

.capstone-download-btn:hover {
    background: #2563A6;
    border-color: #2563A6;
    transform: translateY(-2px);
}