@font-face {
        font-family: 'Material Icons';
        font-style: normal;
        font-weight: 400;
        src: url(../fonts/MaterialSymbolsOutlined.woff2);
    }

    :root {


        --color-primary: #ff9800;
        --color-primary-dark: #f57c00;
        --color-primary-light: rgb(255 232 232 / 99%);
        --color-text-icons: #212121;
        --color-text-secondary: #757575;
        --color-divider: rgba(189, 189, 189, 1);
        /*#BDBDBD;*/
        --color-accent: #ffc107;

        --base-color-test: rgb(156, 95, 3);
        --base-color: 189, 189, 189;
        --background-grade-01: rgba(var(--base-color), 0.01);
        --background-grade-05: rgba(var(--base-color), 0.05);
        --background-grade-10: rgba(var(--base-color), 0.1);
        --background-grade-20: rgba(var(--base-color), 0.2);
        --background-grade-50: rgba(var(--base-color), 0.5);
        --background-grade-80: rgba(var(--base-color), 0.8);
        --background-white: rgba(255, 255, 255, 0.9);

        --background-color: rgba(241, 240, 237, 0.99);
        --background-color-sedondary: rgba(209, 208, 203, 0.99);
        --background-white: rgba(255, 255, 255, 0.99);
        --primary-color: rgb(10 50 45);
        --seconday-color: rgb(10 125 116 / 99%);
        --color-hover: rgb(165 25 105);
        --color-atractive: rgb(213 160 15 / 99%);

        --font-size: 1.1rem;

        --radius-sm: 4px;
        --radius-md: 8px;
        --radius-lg: 16px;

        --border-sm: 1px solid rgba(0, 0, 0, 0.1);
        --border-md: 1px solid rgba(0, 0, 0, 0.25);

        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
        --shadow-sm-s: 0 0 0 1px rgba(0, 0, 0, 0.2);
        --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.25);
    }

    .bg-style-1 {
        color: #000;
        background-color: #6161618a;
    }

    .bg-style-2 {
        color: #fff;
        background-color: #3f3d3d;
    }

    .bg-style-3 {
        color: #fff;
        background-color: #024234;
    }

    .bg-style-4 {
        color: #2c2c2c;
        background-color: #3ce4c8;
    }

    html,
    body {
        color: var(--primary-color);
        -webkit-text-size-adjust: 100%;
        font-weight: 400;
        font-style: normal;
        font-family: Arial, Helvetica, sans-serif;
        font-size: var(--font-size);
        font-optical-sizing: auto;
        background-color: var(--background-color);
        width: 99vw;
        padding: 0;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* html {
      box-sizing: border-box;
      overflow-x: hidden;
      -ms-text-size-adjust: 100%;
      -webkit-text-size-adjust: 100%
    } */

    /* main,
    footer,
    section {
      display: block;
      unicode-bidi: isolate;
      background-color: #fff;
    } */

    /* main,
    footer,
    section {
      display: block;
      unicode-bidi: isolate;
      background-color: white;
    } */

    header,
    main,
    footer {
        width: 100%;
        max-width: 1400px;
        margin: 0 auto;
        unicode-bidi: isolate;
        background-color: white;
    }

    h1 {
        font-size: calc(var(--font-size) * 2);
    }

    h2 {
        font-size: calc(var(--font-size) * 1.3);
    }

    h3 {
        font-size: calc(var(--font-size) * 1.1);
    }

    a,
    p {
        line-height: 1.5;
        padding: 1.5rem;
    }

    *,
    *:before,
    *:after {
        /* box-sizing: inherit; */
        box-sizing: border-box;
        /* overflow-x: hidden; */
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%
    }

    .material-icons {
        font-family: 'Material Icons';
        font-weight: bold;
        font-size: 1.5rem;
        font-style: normal;
        color: var(--seconday-color);
        display: inline-block;
        line-height: 1;
        text-transform: none;
        letter-spacing: normal;
        word-wrap: normal;
        white-space: nowrap;
        direction: ltr;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        -moz-osx-font-smoothing: grayscale;
        font-feature-settings: 'liga';
        margin: 0 0.35rem;
    }

    header {
        display: flex;
        flex-wrap: wrap;
        padding: 0.33em 3%;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }

    nav {
        display: block;
    }

    nav ul {
        display: flex;
        gap: 20px;
        align-items: center;
        justify-content: center;
    }

    nav ul li {
        list-style: none;
        display: flex;
        place-self: center;
    }

    nav ul li a {
        color: var(--primary-color);
        text-decoration: none;
        cursor: pointer;
        font-size: calc(var(--font-size) * 1.1);
        font-weight: bold;
        position: relative;
    }

    nav ul li a:hover {
        color: var(--color-hover);
    }

    nav ul li a::after {
        content: '';
        position: absolute;
        bottom: 20px;
        left: 0;
        width: 100%;
        height: 3px;
        background-color: var(--color-hover);
        transform: scaleX(0);
        transform-origin: bottom right;
        transition: transform 0.4s ease;
    }

    nav ul li a:hover::after,
    nav ul li a.active-menu-item::after {
        transform: scaleX(1);
        transform-origin: bottom left;
    }

    header img,
    footer img {
        width: 120px;
        height: auto;
    }

    button {
        background-color: var(--color-primary);
        color: var(--color-text-icons);
        padding: 8px 14px;
        border: var(--border-sm);
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow-sm);
        cursor: pointer;
        font-weight: bold;
        transition: background-color, color 0.7s;
    }

    button:hover {
        /* color: var(--primary-color); */
        background-color: var(--color-accent);
        box-shadow: var(--shadow-md);
    }

    dl {
        padding: 1.5rem 0rem;
    }

    dt {
        display: flex;
        flex-wrap: wrap;
        line-height: 2;
        align-items: center;
        font-size: 1.2rem;
        font-weight: 600;
    }

    dd {
        line-height: 2;
    }

    section {
        padding: 1em 0;
        /* border-radius: var(--radius-lg); */
    }

    /* section:nth-of-type(odd) {
      background-color: var(--background-grade-10);
    } */

    section:nth-of-type(even) {
        background-color: var(--background-grade-20);
    }

    .section-header {
        display: flex;
        flex-direction: column;
    }

    .section-header * {
        padding-left: 1.5rem;
    }

    .hero {
        height: 100vh;
        background-image: url('../img/hero.webp');
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
    }

    .hero-center {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
    }

    .hero-card {
        color: white;
        background-color: rgba(0, 0, 0, 0.4);
        max-width: 55em;
        padding: 2rem;
        border-radius: 10px;
        align-content: center;
    }

    .cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 20px;
        margin: 10px 20px;
    }

    .card {
        --card-border-color: rgba(0, 0, 0, 0.2);
        background-color: white;
        border-radius: var(--radius-md);
        box-shadow: var(--card-border-color) 0px 0px 0px 0px,
            var(--card-border-color) 0px 0px 0px 0px,
            var(--card-border-color) 0px 4px 6px -1px,
            var(--card-border-color) 0px 2px 4px -2px;
        display: block;
        padding: 20px;
        unicode-bidi: isolate;
        user-select: none;
        /* height: 240px; */
        width: 345px;
    }

    .card-header {
        position: relative;
        color: rgba(0, 0, 0, 0.99);
        background-color: var(--color-primary-light);
		box-shadow: var(--card-border-color) 0px 0px 0px 0px,
            var(--card-border-color) 0px 0px 0px 0px,
            var(--card-border-color) 0px 4px 6px -1px,
            var(--card-border-color) 0px 2px 4px -2px;
        border-radius: 4px;
        min-width: 48px;
        padding: 6px;
        /* text-align: center; */
        /* align-content: center; */
    }

    .card-header span {
        font-size: 24px;
        color: #ffffff
    }

    .card-body {
        font-size: var(--font-size);
        /* font-size: calc(var(--font-size) * 1.1); */
        /* color: #ffffff */
    }

    .card-body p {
        display: flex;
        align-items: center;
        padding: 0;
    }

    .card ul {
        list-style-type: none;
        padding: 0;
        margin: 0
    }

    .card ul li {
        padding: 8px 16px;
        border-bottom: 1px solid #ddd;
        padding-top: 16px !important;
        padding-bottom: 16px !important
    }

    .card ul li h3 {
        font-size: calc(var(--font-size) * 1.1);
        font-weight: 600;
        margin: 0;
    }

    .card ul li:first-child {
        border-bottom: none;
        padding: 32px 16px;
        border-bottom: 1px solid #ddd;
    }

    .card ul li:last-child {
        border-bottom: none
    }

    footer {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 2rem;
    }

    footer p {
        text-align: center;
    }

    .for-sale {
        --border: rgba(0,0,0,0.2);
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        width: 90%;
        background-color: aliceblue;
        padding: 1rem;
        border-radius: var(--radius-md);
        box-shadow: var(--border) 0px 0px 0px 0px,
            var(--border) 0px 0px 0px 0px,
            var(--border) 0px 4px 6px -1px,
            var(--border) 0px 2px 4px -2px;
    }

    .for-sale p {
        font-style: italic;
        padding: 0;
        margin: 5px 0;
    }

    @media (max-width: 768px) {

        html,
        body {
            width: 96vw;
        }

        header,
        footer {
            justify-content: center;
        }

        nav ul {
            display: block;
        }

        h1 {
            font-size: calc(var(--font-size) * 1.7);
        }

        h2 {
            font-size: calc(var(--font-size) * 1.1);
        }

        h3 {
            font-size: calc(var(--font-size) * 0.99);
        }

        a,
        p {
            line-height: 1.2;
            font-size: calc(var(--font-size) * 0.8);
            margin: 12px;
            padding: 1em 0;
        }

        .hero-card {
            height: calc(100vh - 3rem);
            max-width: calc(100vw - 2rem);
        }

        .cards {
            justify-content: center;
        }

        .card {
            margin: 0;
            padding: 10px;
        }
    }