/* ==========================================================================
   Clarity DevTest — Cybersecurity page (cybersecurity.css)
   Depends on: base.css, home.css
   ========================================================================== */

.cybersecurity_page_body,
.cybersecurity_awareness-section,
.cybersecurity_awareness-section__arc,
.cybersecurity_faq-section__arc {
    --cybersecurity-arc-height: clamp(2rem, 3.5vw, 3.5rem);
    --cybersecurity-light-blue-start: #EEF7FF;
    --cybersecurity-light-blue-end: #EEF7FF;
}


/* ==========================================================================
   Arcs
   ========================================================================== */

.cybersecurity_intro-section__arc,
.cybersecurity_awareness-section__arc,
.cybersecurity_faq-section__arc {
    line-height: 0;
    pointer-events: none;
}

.cybersecurity_intro-section__arc svg,
.cybersecurity_awareness-section__arc svg,
.cybersecurity_faq-section__arc svg {
    display: block;
    width: 100%;
    height: var(--cybersecurity-arc-height);
}

.cybersecurity_awareness-section__arc,
.cybersecurity_faq-section__arc {
    position: relative;
    z-index: 1;
    margin-top: calc(-1 * var(--cybersecurity-arc-height));
}

.cybersecurity_intro-section__arc path {
    fill: var(--color-dark-blue);
}

.cybersecurity_awareness-section__arc {
    background-color: var(--cybersecurity-light-blue-start);
}

.cybersecurity_awareness-section__arc path {
    fill: var(--color-dark-blue);
}

.cybersecurity_faq-section__arc {
    --cybersecurity-arc-height: clamp(3rem, 5vw, 5rem);
    background-color: var(--cybersecurity-light-blue-end);
}

.cybersecurity_faq-section__arc path {
    fill: var(--color-white);
}


/* ==========================================================================
   Page intro
   ========================================================================== */

.cybersecurity_page_body .page_intro-section {
    padding-bottom: 0;
    background-image:
        linear-gradient(to bottom, #FFFFFF 0%, rgba(255, 255, 255, 0) 35%),
        url('../images/our_services_bg.png');
    background-size: cover;
    background-position: right top;
    background-repeat: no-repeat;
}


/* ==========================================================================
   Layered security
   ========================================================================== */

.cybersecurity_layers-section {
    padding: 3rem 0 5rem;
    background-color: var(--color-dark-blue);
}

.cybersecurity_layers-section__intro {
    max-width: 820px;
    margin: 0 auto 2.5rem;
    text-align: center;
}

.cybersecurity_layers-section__intro h2 {
    margin: 0 0 1rem;
}

.cybersecurity_layers-section__intro p {
    margin: 0;
}

.cybersecurity_layers-section__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.cybersecurity_layers-section__card,
.cybersecurity_layers-section__capstone {
    background-color: var(--color-white);
}

.cybersecurity_layers-section__card h3,
.cybersecurity_layers-section__capstone h3 {
    margin: 0 0 0.75rem;
    color: var(--color-dark-blue);
}

.cybersecurity_layers-section__capstone {
    margin-top: 1.5rem;
    text-align: center;
}

.cybersecurity_layers-section__capstone p {
    max-width: 760px;
    margin-inline: auto;
}

@media (max-width: 700px) {
    .cybersecurity_layers-section__grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   Employee awareness
   ========================================================================== */

.cybersecurity_awareness-section {
    padding: 3rem 0 5rem;
    background: linear-gradient(to bottom, var(--cybersecurity-light-blue-start) 13%, var(--cybersecurity-light-blue-end) 100%);
}

.cybersecurity_awareness-section__content {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.cybersecurity_awareness-section__content h2 {
    margin: 0 0 1.25rem;
    color: var(--color-dark-blue);
}

.cybersecurity_awareness-section__content p {
    margin: 0;
    color: var(--color-dark-blue);
}


/* ==========================================================================
   FAQ accordion
   ========================================================================== */

.cybersecurity_faq-section {
    padding: 3rem 0 5rem;
    background-color: var(--color-white);
}

.cybersecurity_faq-section h2 {
    margin: 0 0 1rem;
    color: var(--color-dark-blue);
}