:root {
    /* Colors */
    --base-navyblue: #0f172a;
    --accent-red: #dc2626;
    --text-blue: #334155;
    --clr-white: #ffffff;
    --clr-charcoal: #333333;
    --clr-highlight-bg: #4f5f7f; 
    --clr-highlight-bgopacitydown: #4f5f7f9f; 
}

.header-spacer {
    height: 90px;
    @media (max-width: 700px) {
       height: 75px;
    }
}

.heading {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-inline: .455rem;
}

.light-text {
    font-family: "Lato", Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 300;
    color: var(--text-blue);
    font-size: clamp(0.85rem, 1vw + 0.5rem, 1rem);
    text-align: center;
}

.italic-text {
    font-family: "Lato",Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 800;
    font-style: italic;
    font-size: clamp(1.4rem, 0.9961rem + 0.1028vw, 2.4rem);
    text-align: center;
    color: var(--base-navyblue);
}

.red-text {
    color: var(--accent-red);
}

.service-card-master {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    border: 2px var(--clr-highlight-bgopacitydown) solid;
    width: 90%;
    margin: auto;
    padding-block: 1.5rem;
    border-radius: 25px;
    height: fit-content;
    margin-block-end: 2rem;
}

.service-card-master-heading-description {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    padding-inline: 1.7rem;
}

.service-card-master-heading {
    font-size: clamp(1.5rem, calc(1.5rem + 0.75rem * ((100vw - 20rem) / 70rem)), 2.25rem);
    font-family: "Lato" ,Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 800;
    color: var(--base-navyblue);
}

.service-card-master-description {
    font-size: clamp(1rem, calc(1rem + 0.07171875rem * ((100vw - 20rem) / 70rem)), 1.07171875rem);
    font-family: "Inter", Arial, Helvetica, sans-serif;
    color: var(--text-blue);
}

.service-card-container {
    display: flex;
    flex-wrap: wrap;
    padding-inline: 1.7rem;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}