@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


:root {
    --color-primary: #A20F0F;
    /* An RGB value for opacity modifiers to work */
    --color-secondary: #F6E2E2;
}

@layer base {

    *,
    *::before,
    *::after {
        font-family: "Poppins", sans-serif;
        scrollbar-width: thin;
    }

    html {
        overflow-x: hidden;
        scroll-behavior: smooth;
    }

    body {
        display: grid;
        grid-template-rows: auto 1fr auto;
        overflow-x: hidden;
        overflow-y: overlay;
        min-height: 100vh;
        position: relative;
    }

    * {
        /* outline: 1px solid rgba(255, 0, 0, 0.39); */
    }

    h1 {
        font-size: 2rem;
    }

    h3 {
        font-size: clamp(1.6rem, 1.1903rem + 2.0484vw, 2.5rem);
    }

    h4 {
        font-size: clamp(1.45rem, 1.2rem + 1.25vw, 2rem);
    }

    @media screen and (min-width:1023px) {
        h3 {
            font-size: clamp(2.5rem, 0.0385rem + 3.8462vw, 3.5rem);
        }
    }

    p {
        font-size: clamp(0.65rem, 0.4909rem + 0.7955vw, 1rem);
    }
}

@layer utilities {

    .page {
        scroll-margin-top: 5rem;
    }

    .max-card,
    .max-cardG {
        max-width: 90rem;
    }

    .r-padding {
        padding: clamp(1rem, -0.3636rem + 6.8182vw, 4rem);
    }

    .r-paddingx {
        padding-left: clamp(1rem, -0.3636rem + 6.8182vw, 4rem);
        padding-right: clamp(1rem, -0.3636rem + 6.8182vw, 4rem);
    }

    .r-paddingy {
        padding-top: clamp(1rem, -0.3636rem + 6.8182vw, 4rem);
        padding-bottom: clamp(1rem, -0.3636rem + 6.8182vw, 4rem);
    }

    .text-primary {
        color: #A20F0F;
    }

    .text-secondary {
        color: #F6E2E2;
    }

    .bg-primary {
        background-color: #A20F0F;
    }

    .bg-secondary {
        background-color: #F6E2E2;
    }

    .button-container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem;
    }

    .button-container a {
        padding: .85rem 2rem;
        min-width: 15rem;
        border-radius: 4rem;
        text-align: center;

        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid transparent;
    }

    .button-container a.red {
        color: #fff;
        background-color: var(--color-primary);
        border: 2px solid var(--color-primary);
    }

    .button-container a.white {
        color: var(--color-primary);
        background-color: #fff;
        border: 2px solid #fff;
    }

    .button-container a.black {
        color: #000;
        background-color: #fff;
        border: 2px solid #000;
    }

    .button-container a.clear {
        border: 2px solid #fff;
    }

    .button-container a.small {
        min-width: 8rem;
    }

    .button-container a img,
    .button-container a svg {
        margin-right: 1rem;
    }

    .button-container a:hover {
        border: 2px solid #000;
        background-color: #000;
        color: #fff;
    }

    .button-container a:hover svg * {
        stroke: #fff;
    }

    .card,
    .cardG {
        padding: 2rem clamp(1rem, -0.2308rem + 1.9231vw, 1.5rem);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        border-radius: 1rem;
    }

    .card.red-card,
    .cardG.red-card {
        background-color: var(--color-primary);
    }

    .card.blured-card,
    .cardG.blured-card {
        background-color: color-mix(in oklab, var(--color-white)
                /* #fff = #ffffff */
                20%, transparent);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    .card.card.blured-card img.b,
    .cardG.card.blured-card img.b {
        background-color: color-mix(in oklab, var(--color-white)
                /* #fff = #ffffff */
                20%, transparent);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        border-radius: .25rem;
    }

    .card.white,
    .cardG.white {
        width: clamp(8.5rem, -0.0714rem + 42.8571vw, 20.5rem);
        border: 1px solid #DEE2E6;
        justify-content: center;
    }



    .s-heading {
        font-size: clamp(2.5rem, 1.4773rem + 5.1136vw, 4.75rem);
    }

    @media screen and (min-width:1024px) {
        .card.white {
            aspect-ratio: 550/450;
            width: 25.5rem;
        }

        .cardG.white {
            aspect-ratio: 550/450;
            width: 100%;
        }


        .s-heading {
            font-size: clamp(4.75rem, -1.1577rem + 9.2308vw, 7.15rem);
        }

        .clipping-block {
            margin-top: calc(-5.5rem - clamp(0rem, -14.7692rem + 23.0769vw, 6rem));
        }
    }

    .card img,
    .cardG img {
        margin-bottom: 1.5rem;
        width: 2rem;
    }

    .card h6,
    .cardG h6 {
        font-weight: bold;
        font-size: clamp(0.85rem, 0.6682rem + 0.9091vw, 1.25rem);
    }

    .card>p,
    .card>ul,
    .cardG>p,
    .card>ul {
        margin: .75rem 0;
    }

    .card ul,
    .cardG ul {
        list-style-position: inside;
        list-style-type: disc;
    }

    .info-block {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto auto;
        column-gap: .5rem;
        width: 12rem;
    }

    .info-block img {
        grid-row: span 2;
        width: 2.5rem;
        place-self: center;
        border-radius: .5rem;
    }

    .info-block h3 {
        font-weight: 600;
    }

    .info-block h3,
    .info-block p {
        width: 8rem;
    }

    .contact-block {
        width: 17.5rem;
    }

    .contact-form input,
    .contact-form textarea {
        padding: 1rem 2rem;
        width: 100%;
        border: 2px solid var(--color-primary);
        margin: .5rem 0;
        border-radius: .5rem;
    }

    .contact-form input::placeholder {
        color: #A9A9A9;
    }

    .contact-form button {
        padding: 1rem 2rem;
        width: 100%;
        background-color: var(--color-primary);
        color: #fff;
        text-align: center;
        border-radius: .5rem;
    }

    .footer_nav {
        width: 15rem;
        display: flex;
        flex-direction: column;
    }

    .footer_nav span {
        font-weight: bold;
        margin-bottom: 1.5rem;
        font-size: 1.15rem;
    }

    .footer_nav ul {
        font-weight: lighter;
    }

    * {
        /* outline: 1px solid rgba(255, 0, 0, 0.241); */
    }
}