/*=====================================================
  OBSERVATORY
======================================================*/

#observatory{

    position:relative;

    padding:var(--section-desktop) 0;

    background:var(--hero-light-bg);

    overflow:hidden;
}

#observatory::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(circle at top right,
        rgba(200,162,74,.10),
        transparent 42%);

    pointer-events:none;
}

.observatory-container{

    width:min(92%,1400px);

    margin:auto;

    position:relative;

    z-index:2;
}

.observatory-header{

    max-width:900px;

    margin:0 auto 70px;

    text-align:center;
}

.observatory-header h2{

    margin:20px 0;

    font-size:var(--fs-section-heading);

    color:var(--hero-navy);
}

.observatory-header p{

    max-width:760px;

    margin:auto;

    color:var(--hero-light-body);

    font-size:var(--fs-section-intro);

    line-height:1.8;
}
.observatory-grid{

    display:grid;

    grid-template-columns:

        repeat(auto-fit,minmax(300px,1fr));

    gap:30px;
}

.observatory-card{

    background:var(--hero-light-card);

    border:1px solid var(--hero-light-border);

    border-radius:var(--radius-lg);

    padding:34px 32px;

    transition:var(--transition);

    position:relative;

    overflow:hidden;

    box-shadow:0 4px 16px rgba(15,39,71,.05);
}

.observatory-card:hover{

    transform:translateY(-6px);

    border-color:var(--hero-gold);

    box-shadow:var(--shadow-lg);
}

.observatory-icon{

    width:70px;

    height:70px;

    --icon-lg:70px;

    width:var(--icon-lg);

    height:var(--icon-lg);

    border-radius:var(--radius-md);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    background:rgba(200,162,74,.14);

    margin-bottom:24px;
}

.observatory-icon svg{

    width:30px;

    height:30px;

    color:var(--hero-gold);

}

.observatory-card h3{

    color:var(--hero-navy);

    margin-bottom:16px;

    font-size:var(--fs-card-heading);
}

.observatory-card p{

    color:var(--hero-light-body);

    line-height:1.8;

    font-size:var(--fs-body-sm);

    text-align:justify;

    text-align-last:left;

    margin-bottom:24px;
}

.observatory-card ul{

    list-style:none;

    padding:0;

    margin:0;
}

.observatory-card li{

    padding:10px 0;

    color:var(--hero-navy);

    font-size:var(--fs-body-sm);

    border-bottom:1px solid var(--hero-light-border);
}

.observatory-card li:last-child{

    border-bottom:none;
}

.observatory-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(
        90deg,
        var(--color-primary),
        #E8D98A
    );
}

@media (max-width:768px){

    #observatory{

        padding:var(--section-mobile) 0;
    }

    .observatory-grid{

        grid-template-columns:1fr;
    }

    .observatory-card{

        padding:32px;
    }
}