* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    text-decoration: none;
}

/* fonts start */

@font-face {
    font-family: 'woodcock';
    src: url('../sourc/fonts/Widock.otf');
}

@font-face {
    font-family: 'Science';
    src: url('../sourc/fonts/Science.ttf');
}

/* fonts end */

/* root start */

:root {
    /* system colors start */
    /* --bob1: #ff00b720; */
    --bob2: #02ff0f43;

    --trans: #ffffff00;
    /* systems colors end */

    /* colors start*/
    --color-text: #E3E3E3;


    --bg-color: #1d1d1d;
    /* colors end */

    /* font-start */
    --1_text: 'woodcock';
    --2_text: 'Science';
    /* font-end */
}

/* root end */

/* main block start */

html {
    scroll-behavior: smooth;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.container2 {
    max-width: 400px;
    margin: 0 auto;
}

body {
    background-color: var(--bg-color);
}

/* main block end */

/* header start */

header {
    position: relative;
    background-color: var(--bob2);
    background: linear-gradient(46deg, rgb(114, 155, 42) 0%, rgb(84, 118, 65) 24%, rgb(68, 110, 57) 50%, rgb(62, 124, 46) 71%, rgb(94, 147, 79) 100%);
    z-index: 100;

    .header_base {
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        right: 0;
        margin: 0 auto;

        /* херед база начало */
        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: 0 20px;

        .base-logo {
            /* логотип с текстом */
            display: flex;

            a {
                position: relative;
                display: flex;
                align-items: end;
                /* align-items: center; */

                &::before {
                    content: "";
                    position: absolute;
                    z-index: -2;
                    /* background-color: aqua; */
                    inset: -30px -100px;
                    background-color: var(--trans);
                    backdrop-filter: blur(10px);
                    mask-image: radial-gradient(ellipse closest-side, #ffffff 40%, transparent 100%);
                }

                p {
                    /* текст у лого */
                    font-family: var(--1_text);
                    font-size: 20px;
                    margin-bottom: 4px;

                    color: var(--color-text);

                    text-shadow: 0 0 1px #E3E3E300;
                    transition: 0.1s;

                    &:hover {
                        transform: scale(103%);
                        text-shadow: 0 0 7px #e3e3e368;

                        transition: 0.1s;
                    }
                }

                img {
                    /* само лого */
                    width: 40px;
                }
            }
        }

        .base-buttons {
            /* кнопки */
            display: flex;
            gap: 9px;

            position: relative;

            &::before {
                content: "";
                position: absolute;
                z-index: -2;
                /* background-color: aqua; */
                inset: -30px -50px;
                background-color: var(--trans);
                backdrop-filter: blur(10px);
                mask-image: radial-gradient(ellipse closest-side, #ffffff 40%, transparent 100%);
            }

            .base-buttons-a {
                display: flex;
                /* flex: none; */

                transition: 0.1s;

                &:hover {
                    transform: scale(118%);
                    transition: 0.1s;
                }
            }

            a {
                display: flex;
            }

            #base-buttons-call {
                p {
                    font-family: var(--2_text);
                    font-size: 15px;
                    display: flex;
                    align-items: center;
                    color: var(--color-text);
                    padding-top: 3.5px;
                    width: 0px;
                    overflow: hidden;
                    transition: 0.2s;
                }

                &:hover {
                    p {
                        width: 100%;
                        transition: 0.2s;
                    }
                }

            }


        }


        /* хедер база конец */
    }

    .header_island {
        position: sticky;
        display: flex;
        justify-content: center;
        top: 0;

        z-index: 2;

        padding-top: 20px;

        background-color: var(--bob1);
        /* остров нав начало */

        nav {
            position: relative;

            &::before {
                content: "";
                position: absolute;
                z-index: -1;
                /* background-color: aqua; */
                inset: -30px -60px;
                background-color: var(--trans);
                backdrop-filter: blur(10px);
                mask-image: radial-gradient(ellipse closest-side, #ffffff 70%, transparent 100%);
            }

            display: flex;
            gap: 20px;

            font-size: 13px;
            font-family: var(--2_text);

            a {
                display: flex;
                /* flex: none; */
                color: var(--color-text);
                text-shadow: 0 0 1px #E3E3E300;
                transition: 0.1s;

                &:hover {
                    transform: scale(118%);
                    text-shadow: 0 0 5px #E3E3E3;

                    transition: 0.1s;
                }
            }
        }

        /* остров нав конец */
    }

    /* banner start */
    .banner {
        padding-bottom: 50px;
        height: 100vh;
        position: relative;

        .banner-content {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;

            img {
                width: 100%;
            }
        }


        .banner-content-buttons {
            display: flex;
            justify-content: space-between;
            position: absolute;
            bottom: 20px;
            left: 0;
            right: 0;


            .banner-content-button {
                font-family: var(--1_text);
                gap: 15px;
                display: flex;
                justify-content: space-between;
                /* align-self: center; */
                margin: 0 15px;

                background-color: #1313133e;
                padding: 5px 7px;
                padding-top: 6px;
                padding-bottom: 6px;
                border-radius: 50px;
                transition: 0.3s;

                &:hover {
                    background-color: #131313;
                    transition: 0.3s;

                }

                a {

                    color: var(--color-text);
                    transition: 0.3s;
                    padding: 5px 12px;
                    padding-top: 8px;
                    border-radius: 50px;

                    &:hover {
                        color: #131313;
                        background-color: #E3E3E3;
                        transition: 0.1s;
                        padding: 5px 12px;
                        padding-top: 8px;
                        border-radius: 50px;
                    }
                }
            }
        }
    }
}

.title {
    display: flex;
    align-items: center;
    padding: 50px 20px;

    

    p {
        color: var(--color-text);
        font-size: 25px;
        font-family: var(--1_text);
    }

    &::before {
        content: '';
        margin: 0 10px;
        margin-bottom: 5px;

        background-color: var(--color-text);
        width: 0%;
        height: 5px;
        transition: 1s;
    }


    &:hover {
        &::before {
            width: 100%;
        }
        &::after {
            width: 0%;
        }
    }

    &::after {
        content: '';
        margin: 0 10px;
        margin-bottom: 5px;

        background-color: var(--color-text);
        width: 100%;
        height: 5px;
        transition: 1s;
    }
}

/* banner end */

.pro {
    display: flex;
    width: 100%;

    .pro-cards {
        display: flex;
        flex-direction: column;
        flex: 1;
        gap: 20px;

        .pro-card {
            display: flex;
            flex-direction: row;

            .pro-numbers {
                #pro-numbers-1 {
                    color: #86B41D;
                }

                #pro-numbers-2 {
                    color: #40b41d;
                }

                #pro-numbers-3 {
                    color: #02ff0f43;
                }

                display: flex;
                /* background-color: rgb(15, 172, 172); */
                width: 15%;
                height: 200px;

                justify-content: center;
                align-items: center;


                p {
                    padding-top: 2px;
                    font-family: var(--1_text);
                    transform: scale(5, 12);
                    transition: 0.5s;

                    &:hover {
                        padding-right: 5px;
                    }
                }
            }

            .pro-content {
                /* background-color: #1fcf19; */
                width: 70%;
                background-color: #e3e3e31e;
                border-radius: 20px;

                /* overflow: hidden; */

                img {
                    width: 100%;
                    /* height: 100%; */
                    transition: 1s;

                    &:hover {
                        opacity: 0.7;
                        transform: scale(105%);
                        transition: 0.4s
                    }
                }
            }

            .pro-title {
                /* background-color: #d42626; */
                width: 15%;
                height: 200px;
                /* padding-left: 10px; */
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                padding: 20px 0 20px 15px;

                font-family: var(--2_text);
                color: var(--color-text);

                p {
                    text-align: center;
                    font-size: 20px;
                    width: 100%;
                }

                span {
                    text-align: start;
                    padding-left: 10px;
                }
            }
        }
    }
}