/*
  Dearden2007 CSS split generated from the original style.css.
  shared.css contains only global header/navigation/footer/base rules.
  Each page stylesheet contains rules matched to that page's HTML.
*/

/* Page: advocacy */

/*================ HERO ================*/

.advocacy-hero{

    height:100vh;

    background:
        linear-gradient(rgba(0,0,0,.55),
        rgba(0,0,0,.85)),
        url("../img/fatherincourt.png")
        center center / cover;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

}

.hero-overlay h1{

    font-size:90px;

    color:white;

    letter-spacing:10px;

    margin-bottom:20px;

}

.hero-overlay p{

    font-size:34px;

    color:#d8d8d8;

}

.scroll-arrow{

    display:block;

    font-size:50px;

    margin-top:80px;

    animation:bounce 2s infinite;

}

/*================ TIMELINE ================*/

.timeline{

    position:relative;

    max-width:1400px;

    margin:auto;

    padding:120px 0;

}

.timeline-line{

    position:absolute;

    left:50%;

    width:6px;

    top:0;

    bottom:0;

    background:
        linear-gradient(#1e4cff,#000,#d61c1c);

    transform:translateX(-50%);

}

.timeline-item{

    position:relative;

    width:50%;

    padding:50px;

    box-sizing:border-box;

}

.timeline-item.left{

    left:0;

    text-align:right;

}

.timeline-item.right{

    left:50%;

}

.timeline-dot{

    width:28px;

    height:28px;

    border-radius:50%;

    background:#1e4cff;

    position:absolute;

    top:70px;

    right:-14px;

    box-shadow:
        0 0 20px #1e4cff;

}

.timeline-item.right .timeline-dot{

    left:-14px;

}

.final-dot{

    background:#d61c1c;

    box-shadow:
        0 0 30px #d61c1c;

}

.timeline-card{

    background:#111;

    border:1px solid #333;

    border-radius:20px;

    padding:35px;

    transition:.4s;

}

.timeline-card:hover{

    transform:translateY(-8px);

    border-color:#1e4cff;

}

.timeline-card h2{

    color:white;

    margin-bottom:20px;

}

.timeline-card p{

    line-height:1.8;

    color:#ddd;

}

.timeline-button{

    display:inline-block;

    margin-top:25px;

    background:#d61c1c;

    color:white;

    padding:14px 30px;

    text-decoration:none;

    border-radius:8px;

    transition:all .3s ease;

}

.timeline-button:hover{

    transform:translateY(-4px);

    box-shadow:
        0 0 20px rgba(214,28,28,.45);

}

.timeline-button.secondary{

    background:linear-gradient(
        135deg,
        #1e4cff,
        #3b82f6
    );

    color:white;

    border:1px solid #5fa8ff;

}

.timeline-button.secondary:hover{

    background:linear-gradient(
        135deg,
        #3b82f6,
        #5fa8ff
    );

    transform:translateY(-4px);

    box-shadow:
        0 0 20px rgba(30,76,255,.45);

}