/* =========================================================
   NETSERVICE ANGOLA
   PÁGINA: LICENÇAS E CERTIFICAÇÕES
========================================================= */


/* =========================================================
   01. HERO
========================================================= */

.compliance-hero {
    padding: 76px 0 70px;

    background: var(--ns-blue);

    color: #ffffff;
}


.compliance-hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(0, .7fr);

    gap: 90px;

    align-items: end;
}


.compliance-hero-label {
    margin: 0 0 16px;

    color: var(--ns-green);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .16em;
}


.compliance-hero h1 {
    max-width: 760px;

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            44px,
            4.4vw,
            64px
        );

    font-weight: 800;

    line-height: 1;

    letter-spacing: -.045em;
}


.compliance-hero-copy {
    max-width: 430px;

    padding-bottom: 5px;
}


.compliance-hero-copy p {
    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            .76
        );

    font-size: 15px;

    line-height: 1.7;
}


.compliance-hero-copy a {
    width: fit-content;

    display: inline-flex;
    align-items: center;

    gap: 8px;

    margin-top: 20px;

    color: #ffffff;

    text-decoration: none;

    font-size: 13px;
    font-weight: 800;
}


.compliance-hero-copy a span {
    color: var(--ns-green);

    font-size: 16px;
}



/* =========================================================
   02. INTRODUÇÃO
========================================================= */

.compliance-intro {
    padding: 60px 0;

    background: #ffffff;
}


.compliance-intro-grid {
    display: grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    gap: 90px;
}


.compliance-intro h2,
.compliance-section-heading h2,
.compliance-operation h2 {
    max-width: 640px;

    margin: 0;

    color: var(--ns-blue);

    font-size:
        clamp(
            36px,
            3.3vw,
            48px
        );

    font-weight: 800;

    line-height: 1.03;

    letter-spacing: -.04em;
}


.compliance-intro-copy {
    max-width: 590px;
}


.compliance-intro-copy p {
    margin: 0 0 15px;

    color: #65727d;

    font-size: 15px;

    line-height: 1.7;
}


.compliance-intro-copy p:last-child {
    margin-bottom: 0;
}



/* =========================================================
   03. CABEÇALHOS
========================================================= */

.compliance-section-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(0, .7fr);

    gap: 70px;

    align-items: end;

    margin-bottom: 31px;
}


.compliance-section-heading > p {
    max-width: 430px;

    margin: 0;

    color: #65727d;

    font-size: 14px;

    line-height: 1.65;
}



/* =========================================================
   04. ISO
========================================================= */

.compliance-iso {
    padding: 58px 0;

    background: #f5f7f8;
}


.compliance-iso-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 14px;
}


.iso-card {
    min-height: 330px;

    display: flex;
    flex-direction: column;

    padding: 28px;

    border:
        1px solid #dce3e7;

    border-radius: 11px;

    background: #ffffff;

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}


.iso-card:hover {
    transform: translateY(-3px);

    box-shadow:
        0 12px 28px
        rgba(
            8,
            34,
            56,
            .07
        );
}


.iso-card-top {
    display: flex;

    align-items: baseline;

    gap: 10px;
}


.iso-card-top span {
    color: var(--ns-green);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .12em;
}


.iso-card-top strong {
    color: var(--ns-blue);

    font-size: 46px;
    font-weight: 800;

    letter-spacing: -.04em;
}


.iso-card h3 {
    margin: 28px 0 9px;

    color: var(--ns-blue);

    font-size: 19px;
    font-weight: 800;

    line-height: 1.2;
}


.iso-card p {
    margin: 0;

    color: #65727d;

    font-size: 13px;

    line-height: 1.55;
}


.iso-card-status {
    margin-top: auto;

    padding-top: 23px;

    color: var(--ns-green-dark);

    font-size: 11px;
    font-weight: 800;
}



/* =========================================================
   05. LICENÇAS E REGISTOS
========================================================= */

.compliance-authorisations {
    padding: 58px 0;

    background: #ffffff;
}


.authorisations-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 14px;
}


.authorisation-card {
    min-height: 265px;

    display: flex;
    flex-direction: column;

    padding: 25px;

    border:
        1px solid #dfe5e8;

    border-radius: 10px;

    background: #f8fafb;
}


.authorisation-number {
    color: var(--ns-green);

    font-size: 11px;
    font-weight: 800;
}


.authorisation-card h3 {
    margin: 23px 0 9px;

    color: var(--ns-blue);

    font-size: 18px;
    font-weight: 800;

    line-height: 1.22;
}


.authorisation-card > p {
    margin: 0;

    color: #65727d;

    font-size: 13px;

    line-height: 1.55;
}


.authorisation-meta {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: auto;

    padding-top: 20px;
}


.authorisation-meta span {
    padding: 6px 9px;

    border:
        1px solid #dce3e7;

    border-radius: 5px;

    background: #ffffff;

    color: var(--ns-blue);

    font-size: 10px;
    font-weight: 700;
}



/* =========================================================
   06. CONFORMIDADE NA OPERAÇÃO
========================================================= */

.compliance-operation {
    padding: 58px 0;

    background: var(--ns-blue);

    color: #ffffff;
}


.compliance-operation-grid {
    display: grid;

    grid-template-columns:
        minmax(0, .85fr)
        minmax(0, 1.15fr);

    gap: 88px;
}


.compliance-operation h2 {
    color: #ffffff;
}


.compliance-operation-intro {
    max-width: 485px;

    margin: 16px 0 0;

    color:
        rgba(
            255,
            255,
            255,
            .70
        );

    font-size: 14px;

    line-height: 1.65;
}


.compliance-operation-list {
    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            .16
        );
}


.compliance-operation-item {
    display: grid;

    grid-template-columns:
        48px 1fr;

    gap: 17px;

    padding: 17px 0;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            .16
        );
}


.compliance-operation-item > span {
    color: var(--ns-green);

    font-size: 11px;
    font-weight: 800;
}


.compliance-operation-item h3 {
    margin: 0;

    color: #ffffff;

    font-size: 16px;
    font-weight: 700;
}


.compliance-operation-item p {
    margin: 5px 0 0;

    color:
        rgba(
            255,
            255,
            255,
            .67
        );

    font-size: 13px;

    line-height: 1.55;
}



/* =========================================================
   07. DOCUMENTAÇÃO
========================================================= */

.compliance-documents {
    padding: 58px 0;

    background: #f5f7f8;
}


.documents-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 12px;
}


.document-card {
    min-height: 130px;

    display: grid;

    grid-template-columns:
        46px 1fr;

    gap: 18px;

    align-items: start;

    padding: 23px;

    border:
        1px solid #dfe5e8;

    border-radius: 9px;

    background: #ffffff;
}


.document-card > span {
    color: var(--ns-green);

    font-size: 11px;
    font-weight: 800;
}


.document-card h3 {
    margin: 0;

    color: var(--ns-blue);

    font-size: 17px;
    font-weight: 800;
}


.document-card p {
    margin: 7px 0 0;

    color: #65727d;

    font-size: 13px;

    line-height: 1.5;
}



/* =========================================================
   08. PRINCÍPIOS
========================================================= */

.compliance-principles {
    padding: 56px 0;

    background: #ffffff;
}


.principles-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 12px;
}


.principle-card {
    min-height: 185px;

    padding: 23px;

    border:
        1px solid #dfe5e8;

    border-radius: 9px;

    background: #f8fafb;
}


.principle-card span {
    color: var(--ns-green);

    font-size: 11px;
    font-weight: 800;
}


.principle-card h3 {
    margin: 21px 0 8px;

    color: var(--ns-blue);

    font-size: 17px;
    font-weight: 800;
}


.principle-card p {
    margin: 0;

    color: #65727d;

    font-size: 13px;

    line-height: 1.5;
}



/* =========================================================
   09. CTA
========================================================= */

.compliance-contact {
    padding: 46px 0;

    background:
        var(
            --ns-green-dark,
            #1f5b3a
        );

    color: #ffffff;
}


.compliance-contact-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(0, .8fr);

    gap: 70px;

    align-items: center;
}


.compliance-contact-label {
    margin: 0 0 10px;

    color:
        rgba(
            255,
            255,
            255,
            .72
        );

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .15em;
}


.compliance-contact h2 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            34px,
            3.2vw,
            46px
        );

    font-weight: 800;

    line-height: 1.03;

    letter-spacing: -.04em;
}


.compliance-contact-grid
> div
> p:last-child {
    max-width: 590px;

    margin: 14px 0 0;

    color:
        rgba(
            255,
            255,
            255,
            .78
        );

    font-size: 14px;

    line-height: 1.6;
}


.compliance-contact-actions {
    display: flex;

    justify-content: flex-end;
    align-items: center;

    flex-wrap: wrap;

    gap: 10px;
}


.compliance-contact-primary,
.compliance-contact-phone {
    min-height: 44px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 0 20px;

    border-radius: 7px;

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;
}


.compliance-contact-primary {
    background: #ffffff;

    color: var(--ns-blue);
}


.compliance-contact-phone {
    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .45
        );

    color: #ffffff;
}



/* =========================================================
   10. TABLET
========================================================= */

@media (max-width: 900px) {

    .compliance-hero-grid,
    .compliance-intro-grid,
    .compliance-section-heading,
    .compliance-operation-grid,
    .compliance-contact-grid {
        grid-template-columns: 1fr;
    }


    .compliance-hero-grid,
    .compliance-intro-grid,
    .compliance-operation-grid {
        gap: 32px;
    }


    .compliance-section-heading {
        gap: 18px;
    }


    .compliance-iso-grid,
    .authorisations-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .principles-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .compliance-contact-actions {
        justify-content: flex-start;
    }

}



/* =========================================================
   11. MOBILE
========================================================= */

@media (max-width: 700px) {

    .compliance-hero {
        padding:
            52px 0 48px;
    }


    .compliance-hero h1 {
        font-size: 40px;
    }


    .compliance-intro,
    .compliance-iso,
    .compliance-authorisations,
    .compliance-operation,
    .compliance-documents,
    .compliance-principles {
        padding:
            46px 0;
    }


    .compliance-iso-grid,
    .authorisations-grid,
    .documents-grid,
    .principles-grid {
        grid-template-columns: 1fr;
    }


    .iso-card {
        min-height: 275px;
    }


    .compliance-contact {
        padding:
            42px 0;
    }


    .compliance-contact-actions {
        flex-direction: column;

        align-items: stretch;
    }


    .compliance-contact-primary,
    .compliance-contact-phone {
        width: 100%;
    }

}



/* =========================================================
   12. MOBILE PEQUENO
========================================================= */

@media (max-width: 420px) {

    .compliance-hero h1 {
        font-size: 36px;
    }


    .compliance-intro h2,
    .compliance-section-heading h2,
    .compliance-operation h2,
    .compliance-contact h2 {
        font-size: 31px;
    }

}