@font-face {
    font-family: "goldman";
    src: url(fonts/goldman-bold-demo.html) format('wof'),
        url(fonts/goldman-regular-webfont.woff2) format('woff2');
    font-weight: normal;
    font-style: normal;
}

* {
    margin: 0;
    border: 0;
    box-sizing: border-box;
    /*font-family: 'DM Serif Text', serif;*/
    font-family: 'Goldman', serif;
    color: var(--text-color);
    scroll-behavior: smooth;

}

:root {
    --color-primary: #8AED07;
    --color-secondary: #08AFA8;
    --color-third: #01411F;
    --color-four: #005D55;
    --color-five: #01213a;
    --text-color: #eae6e6f2;
    --background-color: linear-gradient(to top, #01213a, #005D55);
    --background-color2: linear-gradient(to right, #1b1b1b, #4a4d4d);
    --background-color3: linear-gradient(to bottom, #1b1b1bfb, #1f2424de);
}

/* ---------------------------AUTOMATITATION SECTION--------------------------- */
#automatizacion {
    height: 100vh;
    background: var(--background-color);
    display: grid;
    grid-template-areas:
        "header header"
        "box-left box-right";
    grid-template-rows: 8% 92%;
    grid-template-columns: 50% 50%;
    /* background-image: linear-gradient(to right, rgba(10, 10, 10, 0.498), rgba(24, 26, 35, 0.674)), url("assets/services2.jpeg");
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat; */
    /* border: solid 1px blue; */
    background: var(--background-color2);
}

#automatizacion header {
    grid-area: header;
}

#automatizacion h2 {
    text-align: center;
    font-size: 2rem;
}



.box-left {
    grid-area: box-left;
    /* border: solid 1px purple; */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 5rem 2rem;
}

.box-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.box-right {
    /* border: solid 1px yellowgreen; */
    grid-area: box-right;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 5rem 2rem;
}

.box-right h3 {
    font-size: .8rem;
}

.box-right ul {
    list-style: disc;
}

.box-right ul li {
    margin-bottom: .8rem;
}

/* --------------------------------FIRE DETECTION SECTION---------------------- */
#fire-detection {
    height: 100%;
    background: var(--background-color3);
    display: grid;
    grid-template-areas:
        "header header"
        "box-left box-right";
}

/* .box-right img {
    width: 80%;
    height: 80%;
    object-fit: cover;
} */



/* --------------------------------CCTV SECTION---------------------- */

#cctv {
    height: 100%;
    background: var(--background-color3);
    display: grid;
    grid-template-areas:
        "header header"
        "box-left box-right";
}

/* --------------------------------ACCES CONTROL SECTION---------------------- */

#acces-control {
    height: 100%;
    background: var(--background-color3);
    display: grid;
    grid-template-areas:
        "header header"
        "box-left box-right";
}

/* --------------------------------ALARM CONTROL SECTION---------------------- */

#alarm-control {
    height: 100%;
    background: var(--background-color3);
    display: grid;
    grid-template-areas:
        "header header"
        "box-left box-right";
}

/* --------------------------------RED CONTROL SECTION---------------------- */

#red {
    height: 100%;
    background: var(--background-color3);
    display: grid;
    grid-template-areas:
        "header header"
        "box-left box-right";
}

@media screen and (max-width: 768px) {
    #automatizacion {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    #fire-detection {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    #cctv {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    #acces-control {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    #alarm-control {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    #red {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
}