* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    scroll-behavior: smooth;
}

body {
    font-family: "Poppins", sans-serif;
}

main {
    height: auto;
    width: 100%;
    background-color: #010510;

    >header {
        width: 96.4%;
        margin-bottom: 60px;

        >div {
            padding-top: 25px;

            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 80px;
            padding-left: 64px;
            padding-right: 14px;

            >figure {
                >img {
                    width: 124px;
                    height: 32px;
                }
            }

            >nav {
                >ul {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;
                    flex-wrap: wrap;

                    gap: 40px;

                    >li {
                        >a {
                            font-size: 19px;
                            color: white;
                            text-decoration: none;
                        }
                    }
                }
            }
        }
    }


    >.sec1 {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;

        >div {
            margin-left: 10.5px;
            display: flex;
            flex-direction: column;
            margin-top: 50px;
            flex-wrap: wrap;


            /* justify-content: center; */
            >span {
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                flex-wrap: wrap;

                color: gray;
                width: 370px;
                height: 44px;
                background: linear-gradient(125.17deg, #272727 0%, #11101d 100%);
                border-radius: 10px;
                padding: 8px 2px;
                gap: 7px;
                font-size: 18px;
                font-weight: 400;

                >img {
                    width: 32px;
                    height: 32px;
                }

                >span {
                    color: #ffffffb3;
                    font-size: 18px;
                    font-weight: 400;

                }
            }

            >div {
                display: flex;
                flex-direction: row;

                >h2 {
                    font-size: 80px;
                    color: rgb(255 255 255);
                    font-weight: 600;
                    position: relative;
                    line-height: 100px;
                }


                >.s1 {
                    width: 136px;
                    height: 136px;
                    border-radius: 50%;
                    border: 3px solid aquamarine;
                    position: absolute;
                    left: 600px;
                    top: 340px;

                    >p {
                        font-size: 22px;
                        text-align: center;
                        margin-top: 40px;
                        font-weight: 600;
                        background: radial-gradient(64.18% 64.18% at 71.16% 35.69%, #def9fa .89%, #bef3f5 17.23%, #9dedf0 42.04%, #7de7eb 55.12%, #5ce1e6 71.54%, #33bbcf 100%);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;

                        >i {
                            color: white;
                        }
                    }
                }

            }

            >.h2 {
                font-size: 72px;
                background: radial-gradient(64.18% 64.18% at 71.16% 35.69%, #def9fa .89%, #bef3f5 17.23%, #9dedf0 42.04%, #7de7eb 55.12%, #5ce1e6 71.54%, #33bbcf 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }

            >h2 {
                font-size: 72px;
                color: rgb(255 255 255);
                font-weight: 600;
            }

            >p {
                margin-bottom: 30px;
                color: #ffffffb3;
                font-size: 18px;
                width: 470px;
                height: 92.4px;
                font-weight: 400;
                margin-top: 30px;
                line-height: 27.5px;
            }

            &:nth-of-type(2) {
                >img {
                    width: 680px;
                    height: 700px;
                    margin-left: 100px;

                }
            }

        }
    }

    >.sec2 {
        >div {

            margin-top: 55px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            justify-content: space-around;
            flex-wrap: wrap;


            >span {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                flex-wrap: wrap;

                color: white;
                font-size: 42px;
                margin-right: 30px;

                >p {
                    margin-left: 15px;
                    color: #11101d;
                    font-size: 20px;
                    background: radial-gradient(64.18% 64.18% at 71.16% 35.69%, #def9fa .89%, #bef3f5 17.23%, #9dedf0 42.04%, #7de7eb 55.12%, #5ce1e6 71.54%, #33bbcf 100%);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
            }
        }

        >.sec3 {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            justify-content: space-around;
            margin-top: 80px;

            >.d1 {
                margin-top: 100px;
                display: flex;
                flex-direction: column;
                flex-wrap: wrap;

                >h2 {
                    color: white;
                    font-size: 48px;
                }

                >p {
                    line-height: 32px;
                    font-size: 18px;
                    color: #ffffffb3;
                    width: 480px;
                    margin: 30px 0;
                }

                >span {
                    >.btn11 {
                        margin-top: 17px;
                        background: linear-gradient(157.81deg, #def9fa -43.27%, #bef3f5 -21.24%, #9dedf0 12.19%, #7de7eb 29.82%, #5ce1e6 51.94%, #33bbcf 90.29%);

                        border: none;
                        border-radius: 10px;
                        color: rgb(0 4 15);
                        font-weight: 500;
                        width: 143px;
                        height: 55px;
                        font-size: 22px;
                    }
                }
            }

            >.d2 {
                display: flex;
                flex-direction: column;

                gap: 50px;
                margin-top: 100px;
                margin-right: 40px;

                >.sp1 {
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                    gap: 20px;
                    width: 600px;
                    height: 120px;

                    >.sp45 {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 64px;
                        height: 64px;
                        background-color: rgba(9, 151, 124, 0.1);
                        border-radius: 50%;


                        >img {
                            width: 50%;
                            height: 50%;
                        }
                    }

                    >span {
                        display: flex;
                        flex-direction: column;

                        >h4 {
                            font-size: 18px;
                            font-weight: 600;
                            color: white;
                        }

                        >p {
                            width: 465px;
                            color: #ffffffb3;
                            font-size: 16px;
                            margin-top: 7.5px;
                        }
                    }

                    &:hover {
                        border-radius: 30px;

                        background: linear-gradient(35deg, rgba(128, 128, 128, 0.22685570810355393) 0%, rgba(5, 5, 5, 1) 100%);
                    }
                }

                >.sp2 {
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                    gap: 20px;
                    width: 600px;
                    height: 120px;

                    >.sp444 {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 64px;
                        height: 64px;
                        background-color: rgba(9, 151, 124, 0.1);
                        border-radius: 50%;

                        background-color: rgba(9, 151, 124, 0.1);

                        >img {
                            width: 50%;
                            height: 50%;
                        }
                    }

                    >span {
                        display: flex;
                        flex-direction: column;

                        >h4 {
                            font-size: 18px;
                            font-weight: 600;
                            color: white;
                        }

                        >p {
                            width: 465px;
                            color: #ffffffb3;
                            font-size: 16px;
                            margin-top: 7.5px;
                        }
                    }

                    &:hover {
                        border-radius: 30px;

                        background: linear-gradient(35deg, rgba(128, 128, 128, 0.22685570810355393) 0%, rgba(5, 5, 5, 1) 100%);
                    }
                }

                >.sp3 {

                    justify-content: center;
                    align-items: center;
                    display: flex;
                    flex-direction: row;
                    gap: 25px;

                    width: 600px;
                    height: 120px;


                    >.sp44 {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 64px;
                        height: 64px;
                        background-color: rgba(9, 151, 124, 0.1);
                        border-radius: 50%;

                        >img {
                            width: 50%;
                            height: 50%;

                        }
                    }

                    >span {
                        display: flex;
                        flex-direction: column;

                        >h4 {
                            font-size: 18px;
                            font-weight: 600;
                            color: white;
                        }

                        >p {
                            width: 470px;
                            color: #ffffffb3;
                            font-size: 14px;
                            margin-top: 7.5px;
                        }

                    }

                    &:hover {
                        border-radius: 30px;

                        background: linear-gradient(35deg, rgba(128, 128, 128, 0.22685570810355393) 0%, rgba(5, 5, 5, 1) 100%);
                    }
                }
            }
        }
    }

    >.sec4 {
        display: flex;
        flex-direction: row;
        /* justify-content: center; */
        align-items: center;
        margin-top: 110px;
        margin-left: 65px;

        >div {
            >img {
                width: 700px;
                height: 630px;
            }

            &:nth-of-type(2) {
                >h2 {
                    color: white;
                    width: 600px;
                    font-size: 48px;
                }

                >p {
                    margin: 40px 0;
                    width: 460px;
                    font-size: 18px;
                    color: #ffffffb3;
                }

                >span {
                    >img {
                        margin-left: 20px;
                        width: 128px;
                        height: 42px;

                        &:nth-of-type(2) {
                            margin-left: 20px;
                            width: 128px;
                            height: 42px;
                        }
                    }
                }
            }
        }

    }

    >.sec5 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        justify-content: space-around;
        margin-top: 80px;

        >div {
            margin-top: 100px;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;

            >h2 {
                color: white;
                font-size: 48px;
                width: 600px;
            }

            >p {
                line-height: 32px;
                font-size: 18px;
                color: #ffffffb3;
                width: 470px;
                margin: 30px 0;
            }

            >span {
                >button {
                    margin-top: 17px;
                    background: linear-gradient(157.81deg, #def9fa -43.27%, #bef3f5 -21.24%, #9dedf0 12.19%, #7de7eb 29.82%, #5ce1e6 51.94%, #33bbcf 90.29%);

                    border: none;
                    border-radius: 10px;
                    color: rgb(0 4 15);
                    font-weight: 500;
                    width: 143px;
                    height: 55px;
                    font-size: 22px;
                }
            }

            &:nth-of-type(2) {
                >img {
                    width: 680px;
                    height: 600px;
                }
            }
        }
    }

    >.sec6 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        justify-content: space-around;
        margin-top: 140px;

        >div {
            >h2 {
                color: white;
                font-size: 48px;
                width: 520px;

            }

            &:nth-of-type(2) {
                >p {
                    line-height: 32px;
                    font-size: 18px;
                    color: #ffffffb3;
                    width: 450px;
                    margin: 30px 0;
                    margin-right: 300px;
                }

            }
        }
    }

    >.sec7 {
        margin-top: 100px;
        color: white;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        justify-content: space-evenly;
        flex-wrap: wrap;
        position: relative;

        >div {
            margin-right: 100px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 370px;
            height: 387px;
            z-index: 1;
            border-radius: 20px;
            flex-wrap: wrap;

            >.sp9 {
                border-radius: 20px;
                margin-top: 10px;

                >img {
                    margin-left: 50px;
                    margin-top: 40px;
                    width: 42px;
                    height: 27px;

                }

                >p {
                    width: 290px;
                    font-size: 18px;
                    font-weight: 600;
                    margin-top: 35px;
                    margin-bottom: 25px;
                    line-height: 30px;
                    margin-left: 50px;
                }

                >span {
                    margin-left: 50px;
                    display: flex;
                    flex-direction: row;

                    >img {
                        width: 48px;
                        height: 48px;
                    }

                    >.spp1 {
                        display: flex;
                        flex-direction: column;
                        margin-left: 7px;
                        justify-content: center;
                        margin-bottom: 50px;
                        margin-left: 30px;

                        >h3 {
                            font-size: 22px;
                            line-height: 32px;
                            margin-top: 5px;
                        }

                        >span {
                            font-size: 18px;
                            font-weight: 400;
                            line-height: 24px;
                            color: #ffffffb3;
                        }
                    }
                }

                &:hover {
                    background: linear-gradient(75deg, rgba(128, 128, 128, 0.22685570810355393) 0%, rgba(5, 5, 5, 1) 100%);

                }
            }

            &:nth-of-type(2) {
                >.sp9 {
                    >span {
                        >img {
                            margin-top: 20px;
                        }

                        >.spp1 {
                            >h3 {
                                font-size: 22px;
                                line-height: 32px;
                                margin-top: 25px;
                            }

                        }
                    }
                }
            }

            &:nth-of-type(4) {
                background: radial-gradient(circle, rgba(23, 66, 106, 1) 0%, rgba(17, 40, 61, 1) 37%, rgba(0, 0, 0, 1) 99%, rgba(18, 42, 64, 1) 100%);
                filter: blur(33px);
                height: 80%;
                width: 15%;
                position: absolute;
                z-index: 0;
                right: -100px;
            }
        }
    }

    >.sec8 {
        >div {
            margin-top: 75px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            justify-content: space-evenly;
            flex-wrap: wrap;

            >img {
                width: 192px;
                height: auto;

                &:nth-of-type(2) {
                    margin-top: 10px;
                    width: 192px;
                    height: 50px;
                }

                &:nth-of-type(3) {
                    width: 165px;
                    height: 45px;
                    margin-top: 10px;
                }

                &:nth-of-type(4) {
                    height: 50px;
                    margin-top: 15px;
                }
            }

            &:nth-of-type(2) {
                >span {
                    width: 92%;
                    height: 260px;
                    border-radius: 20px;
                    box-shadow: 0 20px 100px -10px #42475b1a;
                    background: linear-gradient(-168.39deg, #ffffff -278.56%, #6d6d6d -78.47%, #11101d 91.61%);
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    justify-content: center;
                    align-items: center;
                    justify-content: space-between;

                    >span {
                        display: flex;
                        flex-direction: column;
                        gap: 30px;
                        margin: 64px 48px;

                        >h3 {
                            color: white;
                            font-size: 48px;
                            font-weight: 600;

                        }

                        >p {
                            line-height: 32.5px;
                            width: 480px;
                            font-size: 18px;
                            color: #ffffffb3;
                        }

                    }

                    >button {
                        margin-right: 64px;
                        margin-top: 14px;
                        background: linear-gradient(157.81deg, #def9fa -43.27%, #bef3f5 -21.24%, #9dedf0 12.19%, #7de7eb 29.82%, #5ce1e6 51.94%, #33bbcf 90.29%);

                        border: none;
                        border-radius: 10px;
                        color: rgb(0 4 15);
                        font-weight: 500;
                        width: 143px;
                        height: 55px;
                        font-size: 22px;
                    }
                }
            }
        }
    }

    >footer {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        justify-content: space-evenly;
        flex-wrap: wrap;
        padding-bottom: 20px;
        position: relative;

        >.df {
            margin-top: 127px;
            margin-left: 70px;

            >span {
                position: absolute;
                left: -300;

                >img {
                    margin-left: 60px;
                    width: 266px;
                    height: 72px;
                }

                >p {
                    margin-left: 60px;
                    margin-top: 15px;
                    color: #ffffffb3;
                    line-height: 32px;
                    font-weight: 400;
                    font-size: 18px;
                    width: 350px;
                }
            }
        }

        >div {
            margin-left: 30px;

            margin-top: 140px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 190px;


            >div {
                display: flex;
                flex-direction: column;
                gap: 15px;
                color: white;
                font-size: 18px;
                font-weight: 500;


                >span {
                    font-size: 16px;
                    color: rgba(225, 255, 255, 0.7);
                }

                &:nth-of-type(1) {
                    margin-left: 320px;
                }

                &:nth-of-type(3) {
                    margin-bottom: 112.5px;

                }
            }
        }


        >.underline {
            width: 92%;
            height: 1px;
            background-color: #ffffff3b;
            position: relative;
            bottom: 90px;
            margin-right: 30px;
        }

        >.last {

            display: flex;
            flex-direction: row;
            gap: 700px;
            position: relative;
            bottom: 200px;

            >p {
                font-size: 18px;
                color: white;
                font-weight: 400;
                margin-right: 120px;
            }

            >span {
                display: flex;
                flex-direction: row;
                gap: 30px;

                >i {
                    margin-right: 25px;
                    cursor: pointer;
                    color: white;
                    width: 21px;
                    height: 21px;
                }
            }
        }
    }
}