.coming-soon-page {
    display: grid;
    align-items: center;
    height: 100vh;

    .coming-soon-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: -6%;
        

        ul {
            display: flex;
            gap: clamp(6px, 0.833vw, 24px);

            li {
                width: clamp(96px, 8.333vw, 240px);
                height: clamp(96px, 8.333vw, 240px);
                border: 1px solid $accent-2;
                border-radius: $br-12;
                background: $accent-1;
                display: flex;
                align-items: center;
                flex-direction: column;
                justify-content: center;

                @include media-query(490px){
                    width: 76px;
                    height: 84px;
                }

                h2 {
                    color: $white;
                    font-family: $font-sec;
                    text-transform: uppercase;
                    font-size: clamp(48px, 3.958vw, 72px); /* 55px */
                    font-style: normal;
                    font-weight: 700;
                    line-height: 120%; /* 66px */

                    @include media-query(1199px) {
                        font-size: clamp(39px, 3.586vw, 52px); /* 43px */
                    }

                    @include media-query(820px) {
                        font-size: clamp(33px, 4.634vw, 48px); /* 38px */
                    }
                }
                h6{
                    color: $white;
                    font-family: $font-sec;
                    font-size: clamp(20px, 1.198vw, 32px); /* 23px */
                    font-style: normal;
                    font-weight: 500;
                    line-height: 120%; /* 27.6px */

                    @include media-query(1199px) {
                        font-size: clamp(21px, 1.918vw, 28px); /* 23px */
                    }

                    @include media-query(820px) {
                        font-size: clamp(18px, 2.317vw, 21px); /* 19px */
                    }
                }

            }
        }
        
    }

    .title-area {
        img {
            width: clamp(40%, 23.802vw, 500px);
        }
    }

    .newsletter-text {
        .coming-soon-text{
            -webkit-text-stroke: 3px rgba(0, 68, 57, 0.50);
            -webkit-text-fill-color: transparent;
            font-size: clamp(96px, 15.417vw, 450px);
            font-family: $font-ter;
            font-weight: 700;
            line-height: 70%;
            letter-spacing: -8.88px;
            text-transform: uppercase;
            text-align: center;
            @include media-query(490px){
                font-size: 70px;
                letter-spacing: -2.88px;
                -webkit-text-stroke: 2px rgba(0, 68, 57, 0.50);
            }
            @include media-query(399px){
                font-size: 60px;
            }
        }
        .newsletter-heading {
            display: flex;
            align-items: center;
            gap: clamp(8px, 1.25vw, 40px);

            h4 {
                line-height: 120%;
                letter-spacing: 1.643px;

                @include media-query(575px) {
                    font-size: 16px;
                }
            }
        }

        form {
            position: relative;
            margin: 0 auto;
            width: 29.167vw;
            @include media-query(1024px) {
                width: 45%;
            }
            @include media-query(490px) {
                width: 100%;
            }
            input{
                border-radius: $br-32;
                @include media-query(1699px) {
                    padding: 14px 16px;
                }
                @include media-query(1599px) {
                    padding: 12px 16px;
                }
                @include media-query(1499px) {
                    padding: 11px 16px;
                }
            }
            button{
                position: absolute;
                right: 0;
                padding: 16px 32px;
                @include media-query(1599px) {
                    padding: 13px 24px;
                }
                @include media-query(490px) {
                    padding: 14px 24px;
                    position: absolute;
                    top: 0px;
                    right: 0px;
                }
            }
        }
    }
}
