/* Menu */

.menu {
    position: relative;
}

.menu a i {
    color: rgba(255, 255, 255, 1);
    font-size: 54px;
}

.menu div {
    background: rgba(255, 255, 255, 1);
    min-width: 200px;
    position: absolute;
    transition: all 0.5s ease;
    right: 0;
    display: none;
    border-radius: 10px;
    padding: 10px 0;
    box-shadow: rgba(255, 255, 255, 0.8) 0px 3px 8px;
    z-index: 100;
}

.menu div.visible {
    display: block;
}

.menu div a {
    display: block;
    padding: 15px;
    text-decoration: none;
    color: #333;
    text-transform: uppercase;
    font-size: 14px;
}

.menu div a:hover {
    background: #f3f3f3;
}
/* Top Link */
.top-link {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #333;
    text-decoration: none;
    font-size: 32px;
}
.top-link:hover {
    color: #ff6a00;
}
/* Front Page */
.front-page {
    display: flex;
    flex-direction: row;
    gap: 80px;
    align-items: center;
    width: 100%;
}

    .front-page .text {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 40px;
    }

        .front-page .text h1 {
            font-weight: 100;
            font-size: 42px;
            color: #fff;
            text-align: center;
            margin: 0;
            padding: 0;
        }

        .front-page .text h2 {
            font-weight: 100;
            font-size: 24px;
            color: #fff;
            text-align: center;
            margin: 0;
            padding: 0;
        }

        .front-page .text ul {
            margin: 0;
            padding: 0;
        }

            .front-page .text ul li {
                font-weight: 100;
                font-size: 20px;
                color: #fff;
                line-height: 30px;
            }

        .front-page .text a.button {
            padding: 12px 20px;
            background: #ff6a00;
            color: #fff;
            text-decoration: none;
            border-radius: 5px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

    .front-page img {
        width: 350px;
        border-radius: 10px;
    }

@media only screen and (max-width: 1024px) {
    .front-page {
        flex-direction: column;
        gap: 30px;
    }
    .front-page .text h1 {
        font-size: 24px;
    }

    .front-page .text h2 {
        font-size: 18px;
    }

    .front-page .text ul {
        display: none;
    }
        .front-page img {
            max-width: 40%;
            height: auto;
        }
}

.vertical-text-image-page {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

    .vertical-text-image-page h4 {
        font-weight: 200;
        font-size: 24px;
        color: #333;
        text-align: center;
        margin: 0;
        padding: 0;
    }

    .vertical-text-image-page img {
        max-width: 100%;
        height: auto;
    }
/* Card Page */
.cards-page {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}
.cards-page .card {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 20px;
}
    .cards-page .card span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        border-radius: 5px;
    }
        .cards-page .card span i {
            font-size: 32px;
            color: #555;
        }
        .cards-page .card span.color1 {
            background: #d2e8db;
        }
        .cards-page .card span.color2 {
            background: #a2d4df;
        }
        .cards-page .card span.color3 {
            background: #f5ef99;
        }
        .cards-page .card span.color4 {
            background: #f7cab5;
        }
        .cards-page .card span.color5 {
            background: #ffd79e;
        }
        .cards-page .card span.color6 {
            background: #f3d2db;
        }
        .cards-page .card span.color7 {
            background: #d1e4e8;
        }
        .cards-page .card span.color8 {
            background: #cb9ee1;
        }
.cards-page .card h4 {
    font-weight: 500;
    font-size: 18px;
    margin: 0;
    padding: 0;
}
.cards-page .card p {
    font-weight: 300;
    font-size: 14px;
    margin: 0;
    padding: 0;
}
.cards-page .break {
    flex-basis: 100%;
    height: 0;
}
.cards-page .break-large {
    display: block;
}
.cards-page .break-medium {
    display: none;
}
.cards-page .break-small {
    display: none;
}
@media only screen and (max-width: 1024px) {
    .cards-page {
        padding: 60px 0;
    }
    .cards-page .break-large {
        display: none;
    }

    .cards-page .break-medium {
        display: block;
    }

    .cards-page .break-small {
        display: none;
    }
}
@media only screen and (max-width: 768px) {
    .cards-page .break-large {
        display: none;
    }

    .cards-page .break-medium {
        display: none;
    }

    .cards-page .break-small {
        display: block;
    }
}
/* Vertical Text Form Page */
    .vertical-text-form-page {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
        .vertical-text-form-page h2 {
            font-weight: 300;
            font-size: 32px;
            color: #333;
            text-align: center;
            margin: 0;
            padding: 0;
        }
        .vertical-text-form-page h4 {
            font-weight: 200;
            font-size: 20px;
            color: #333;
            text-align: center;
            margin: 0;
            padding: 0;
        }
/* About Us Page */
.about-us-page {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.about-us-page .images {
    display: flex;
    flex-direction: row;
    gap: 30px;
    justify-content: center;
}
    .about-us-page .images img {
        max-width: 25%;
        height: auto;
    }
.about-us-page .text {
    display: flex;
    flex-direction: row;
    gap: 30px;
    margin: 0 50px;
}
    .about-us-page .text h4 {
        font-size: 24px;
        font-weight: 300;
    }
    .about-us-page .text .about-us {
        flex: 1;
    }
    .about-us-page .text .contact-information {
        flex: 1;
    }
@media only screen and (max-width: 1024px) {
    .about-us-page {
        padding: 60px 0;
    }
        .about-us-page .images img {
            max-width: 35%;
        }
    .about-us-page .text {
        flex-direction: column;
    }
}