@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Comfortaa", serif;
}

.container {
    width: 100%;
    max-width: 1726px;
    margin-inline: auto;
}

.banner {
    position: relative;
    height: 400px;
    display: flex;
    align-items: center;

    &:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: .6;
        background: #06314e;
        left: 0;
        top: 0;
        z-index: -1;
    }

    .background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -2;

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

    .container {
        h2 {
            font-size: clamp(26px, 3.4vw, 40px);
            font-weight: 700;
            line-height: 64px;
            text-align: center;
            color: #FFF;
            text-transform: none;
        }
    }
}

.services {
    .container {
        padding-block: clamp(32px, 5.4vw, 64px);

        @media (max-width: 992px) {
            padding-block: 32px 0;

        }

        .text-header {
            font-size: clamp(16px, 2.4vw, 18px);
            font-weight: 700;
            line-height: 33px;
            text-align: center;
            color: rgba(6, 49, 78, 1);
        }

        .group-services {
            padding-block: 80px 31px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);

            @media (max-width: 1200px) {
                padding-block: 60px;
            }

            @media (max-width: 992px) {
                padding-block: 32px 0;

            }


            .service {
                display: flex;
                flex-direction: column;
                padding: 12px;
                gap: clamp(24px, 3.4vw, 48px);

                &:not(:has(img)) {
                    padding: 64px 48px;
                }

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                    max-height: 331px;
                }

                &.blueBox {
                    padding: 64px 48px;
                    border-top-left-radius: 64px;
                    background-color: rgba(153, 209, 235, 1);
                }

                &.greenBox {
                    border-bottom-right-radius: 64px;
                    background-color: rgba(166, 197, 59, 1);

                    .title,
                    .text {
                        color: #FFF;
                    }
                }

                .title {
                    font-size: clamp(18px, 4.4vw, 32px);
                    font-weight: 700;
                    line-height: 56px;
                    color: rgba(6, 49, 78, 1);
                    margin-block: 0;
                    text-transform: none;
                }

                .text {
                    font-size: clamp(16px, 2, 4vw, 18px);
                    font-weight: 400;
                    line-height: 32px;
                    color: rgba(6, 49, 78, 1);

                }
            }

            @media (max-width: 1200px) {
                grid-template-columns: 1fr;
                gap: 12px;

                .service {
                    gap: 8px;

                    &:not(:has(img)),
                    &.blueBox,
                    &.greenBox {
                        padding: 32px 20px;
                        border-radius: 32px;
                        -webkit-border-radius: 32px;
                        -moz-border-radius: 32px;
                        -ms-border-radius: 32px;
                        -o-border-radius: 32px;
                    }
                }
            }
        }
    }
}

.container {
    .header {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 32px;
        flex-direction: column;
        background-color: transparent;

        .title {
            font-size: clamp(18px, 3.4vw, 32px);
            font-weight: 700;
            margin-block: 0;
            text-transform: none;
        }

        .subtitle {
            font-size: 16px;
            font-weight: 500;
            margin-top: 16px;
        }

        .arrows-navigation {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            position: absolute;
            top: 50%;
            right: 0;
            translate: 0 -50%;

            @media (max-width: 778px) {
                position: static;
                translate: 0 0;
                margin-top: 32px;
            }

            .arrow {
                cursor: pointer;
            }
        }
    }

}

.works {
    padding-block: 32px;

    .slider-works {
        .swiper-slide {
            max-width: 882px;
            width: 100%;
            height: auto;
            padding-inline: 20px;

            &.greenBox {
                .container-slide {
                    background-color: #A6C53B;
                }
            }

            &.blueBox {
                .container-slide {
                    background-color: #69A3BD;
                }
            }

            &.redBox {
                .container-slide {
                    background-color: #D54A72;
                }
            }

            .container-slide {
                display: flex;
                align-items: flex-start;
                gap: 16px;
                color: #FFF;
                padding: 60px;
                border-radius: 32px;
                -webkit-border-radius: 32px;
                -moz-border-radius: 32px;
                -ms-border-radius: 32px;
                -o-border-radius: 32px;
                height: 100%;


                .img-slide {
                    max-height: 110px;
                    max-width: 150px;

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

                .content {
                    display: flex;
                    flex-direction: column;
                    gap: 32px;

                    .number-slide {
                        font-size: clamp(28px, 3.4vw, 48px);
                        font-weight: 700;
                    }

                    .title {
                        font-size: clamp(18px, 3.4vw, 27px);
                        font-weight: 700;
                        text-transform: none;
                    }

                    .listItems {
                        font-family: Comfortaa;
                        font-size: clamp(16px, 2.4vw, 18px);
                        font-weight: 400;
                        line-height: 32px;
                        padding-inline-start: 20px;
                    }
                }

                @media (max-width: 1024px) {
                    padding: 40px 50px;
                }

                @media (max-width: 778px) {
                    flex-direction: column;

                    .img-slide {
                        margin-inline: auto;
                    }

                    .content {
                        gap: 8px;
                    }
                }
            }
        }
    }
}

.community {
    background-color: #F2F2F2;
    position: relative;
    z-index: 1;

    .pattern-image {
        height: auto;
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: -1;

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

    .container {
        padding-block: 60px 120px;
        max-width: 1161px;

        .header {
            .title {
                color: #D54A72;
            }

            color: #014B74;
        }

        form {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 16px 24px;

            .form-group {
                display: flex;
                flex-direction: column;
                color: #FFF;
                gap: 8px;

                .flatpickr {
                    background: url(../images/calendar.svg) no-repeat calc(100% - 24px) center;
                }


                textarea,
                .input-file,
                .nice-select,
                input {
                    color: #014B74;
                    border: 1px solid #94A0B452;
                    -webkit-border-radius: 80px;
                    -moz-border-radius: 80px;
                    -ms-border-radius: 80px;
                    -o-border-radius: 80px;
                    border-radius: 80px;
                    padding: 16px 24px;
                    font-size: 16px;
                    font-weight: 700;
                    background-color: transparent;
                    transition: .5s all ease-in-out;
                    -webkit-transition: .5s all ease-in-out;
                    -moz-transition: .5s all ease-in-out;
                    -ms-transition: .5s all ease-in-out;
                    -o-transition: .5s all ease-in-out;
                    outline: none;

                    &::placeholder {
                        color: #014B74 !important;
                    }

                    &:focus {
                        border: 1px solid #99D1EB
                    }

                    span {
                        color: #014B74
                    }
                }

                .input-file {
                    position: relative;
                    cursor: pointer;

                    .fileName {
                        max-width: 200px;
                        display: -webkit-box;
                        -webkit-line-clamp: 1;
                        line-clamp: 1;
                        overflow: hidden;
                        -webkit-box-orient: vertical;
                        -moz-box-orient: vertical;
                        box-orient: vertical;
                        text-overflow: ellipsis;
                    }

                    input {
                        display: none;
                    }

                    label {
                        background-color: #06314E;
                        color: #FFF;
                        font-size: 16px;
                        font-weight: 700;
                        padding: 7px 20px;
                        -webkit-border-radius: 80px;
                        -moz-border-radius: 80px;
                        -ms-border-radius: 80px;
                        -o-border-radius: 80px;
                        border-radius: 80px;
                        position: absolute;
                        top: 50%;
                        right: 8px;
                        translate: 0 -50%;
                        transition: .3s all ease;
                        -webkit-transition: .3s all ease;
                        -moz-transition: .3s all ease;
                        -ms-transition: .3s all ease;
                        -o-transition: .3s all ease;
                        cursor: pointer;

                        &:hover {
                            box-shadow: 0 0 10px 0 #06314E;
                        }
                    }
                }

                &:has(button[type="submit"]),
                &:has(textarea) {
                    grid-column: span 3;

                    @media (max-width: 1121px) {
                        grid-column: span 2;
                    }

                    @media (max-width: 747px) {
                        grid-column: span 1;
                    }
                }

                button[type="submit"] {
                    max-width: 320px;
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                    font-size: 18px;
                    font-weight: 400;
                    padding: 8px 32px;
                    position: relative;
                    -webkit-border-radius: 50px;
                    -moz-border-radius: 50px;
                    -ms-border-radius: 50px;
                    -o-border-radius: 50px;
                    border-radius: 50px;
                    margin-inline: auto;
                    gap: 16px;
                    transition: .5s all ease-in-out;
                    -webkit-transition: .5s all ease-in-out;
                    -moz-transition: .5s all ease-in-out;
                    -ms-transition: .5s all ease-in-out;
                    -o-transition: .5s all ease-in-out;
                    background-color: #06314E;
                    color: #FFF;
                    border: none;

                    img {
                        transition: .5s all ease;
                        -webkit-transition: .5s all ease;
                        -moz-transition: .5s all ease;
                        -ms-transition: .5s all ease;
                        -o-transition: .5s all ease;
                    }

                    &:hover {
                        img {
                            translate: 12px 0;
                        }
                    }

                    &:before {
                        -webkit-border-radius: 50px;
                        -moz-border-radius: 50px;
                        -ms-border-radius: 50px;
                        -o-border-radius: 50px;
                        border-radius: 50px;
                        content: "";
                        position: absolute;
                        inset: 0;
                        padding: 3px;
                        border: none;
                        background: linear-gradient(to right, #A6C53B, #99D1EB00);
                        mask: linear-gradient(#000 0 0) content-box,
                        linear-gradient(#000 0 0);
                        mask-composite: exclude;
                    }
                }

                textarea {
                    resize: none;
                    height: 156px;
                    -webkit-border-radius: 24px;
                    -moz-border-radius: 24px;
                    -ms-border-radius: 24px;
                    -o-border-radius: 24px;
                    border-radius: 24px;
                }

                .error {
                    color: #F24;
                    font-weight: bold;
                    font-size: 18px;
                    padding-inline: 24px;
                }
            }
        }
    }
}

.footer a {
    text-decoration: none;
}