:root {
    --primary: #27411F;
    --color1: #00bcff;
    --color2: #cef6ff;
    --color3: #557b97;
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;

    a {
        color: var(--primary);
    }
}

* {
    font-family: "Myriad Pro Regular", system-ui;
}

a {
    color: var(--color2);
}

h1, h2, h3 {
    margin: 20px 0;
    color: var(--primary);
}

.container {
    width: min(100%, 1200px);
    padding: 0 20px;
    margin-inline: auto;
}

.logo {
    margin-bottom: 20px;
    margin-top: 20px;

    img {
        width: 400px;
    }
}

.menu {
    background: var(--primary);
    margin-top: 20px;

    ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        display: flex;
        gap: 50px;

        li {
            padding: 15px 0;
            color: var(--color2);

            a {
                text-decoration: none;
            }

            &.active {
                text-decoration: underline;
            }
        }
    }
}

.banner {
    width: 100%;
    display: grid;

    > * {
        grid-area: 1/1;
    }

    .image {
        height: 400px;
        width: 100%;

        img {
            width: 100%;
            max-height: 100%;
            object-fit: cover;
        }
    }

    .text {
        place-content: center;
        color: var(--primary);
        font-size: 2.9rem;
        filter: drop-shadow(0px 2px 3px rgba(29, 29, 27, 0.56));

        p {
            margin: 20px 0;
        }
    }
}

p {
    margin: 10px 0;
}

.text-with-image {
    margin: 50px 0;

    .container {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 20px;
        font-weight: bold;

        .image img {
            border-radius: 100%;
            filter: drop-shadow(0px 2px 2.5px rgba(29, 29, 27, 0.56));

        }
    }
}

.usps {
    background: var(--color2);
    padding: 20px 0;
    margin-top: 30px;

    .container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 50px;
    }

    .usp {
        background: #FAF9F6;
        padding: 20px;

        p {
            margin: 20px 0 0;
            color: var(--primary);
            font-weight: bold;
            font-size: 2rem;
            text-align: center;
        }

        img {
            width: 100%;
        }
    }
}

footer {

    .menu {
        padding: 30px 0 15px;
        margin: 0;

        .container {
            display: flex;
            justify-content: space-between;
        }
    }
}

@media (max-width: 767px) {
    .logo img {
        width: 200px;
    }

    header .menu {
        transition: all 300ms;

        .mobile {
            display: grid;
            grid-template: repeat(3, 5px) /1fr;
            gap: 10px;
            padding: 10px;
            width: 80px;
            margin: 0 auto;

            .line {
                background: var(--color3);
            }
        }

        ul {
            display: block;
            height: 0;
        }

        &.mobile-active {
            ul {
                height: auto;
            }
        }
    }

    .banner .image img {
        height: 800px;
    }

    .text-with-image {
        .container {
            grid-template: 1fr/1fr;

            .image {
                grid-area: 1/1;
            }

            .text {
                grid-area: 2/1;
            }
        }
    }

    .usps {
        .container {
            grid-template: 1fr/1fr;
        }
    }

    footer {
        .menu .container {
            display: block;

            ul {
                display: block;

                li {
                    padding: 10px 0;
                }
            }
        }
    }
}