@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

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

html,
body {
    width: 100%;
    height: 100%;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Host Grotesk", sans-serif;
}

a {
    text-decoration: none;
}

.special-head_grad {
    font-weight: 700;
    background: linear-gradient(90deg, #8b89ff, #fff);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

body {
    background: radial-gradient(circle at top left, #3d39d4, #04013e);
    background-attachment: fixed;
    color: #fff;
    /* overflow: hidden; */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.comingSoon {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .comingsoonContainer {
        width: 100%;
        max-width: 1400px;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;


        .comingLeft {
            width: 50%;
            height: auto;
            display: flex;
            align-items: start;
            justify-content: start;
            flex-direction: column;

            .mobilemodelogo{
                width: 120px;
                height: auto;
                margin-bottom: 30px;
                display: none;
            }


            h1 {
                font-size: 64px;
                line-height: 72px;
                color: #fff;
                margin-bottom: 25px;


                span {
                    /* background: linear-gradient(90deg, #7679ff, #fff); */
                    /* background-clip: text; */
                    /* -webkit-background-clip: text; */
                    /* color: #3d39d4;
                    background-color: #fff;
                    padding: 2px 10px;
                    background-image: url(); */

                    /* color: green !important; */
                    background: linear-gradient(90deg, #39FF14, #fff) !important;
                    background-clip: text !important;
                    -webkit-background-clip: text !important;
                }
            }

            .launch-badge {
                display: inline-block;
                background: rgba(255, 255, 255, 0.08);
                border: 1px solid rgba(255, 255, 255, 0.15);
                padding: 8px 18px;
                border-radius: 50px;
                font-size: 13px;
                letter-spacing: 0.5px;
                margin-bottom: 28px;
                backdrop-filter: blur(10px);
                color: var(--primary-300);
                font-weight: 500;
            }

            p {
                font-size: 1.2rem;
                color: #fff;
                opacity: 0.85;
                max-width: 600px;
                line-height: 1.7;
                /* margin-bottom: 40px; */
            }

            .countdown {
                display: flex;
                gap: 20px;
                margin: 50px 0;

                div {
                    background: rgba(255, 255, 255, 0.08);
                    padding: 18px 22px;
                    border-radius: 16px;
                    text-align: center;
                    min-width: 90px;
                    backdrop-filter: blur(10px);
                    border: 1px solid rgba(255, 255, 255, 0.08);
                }

                span {
                    font-family: 'Host Grotesk';
                    font-size: 34px;
                    font-weight: 600;
                    display: block;
                }

                small {
                    font-size: 12px;
                    opacity: 0.7;
                }
            }

            .waitlist-form {
                display: flex;
                gap: 16px;
                margin-bottom: 40px;
                flex-wrap: wrap;
                max-width: 600px;

                input {
                    flex: 1;
                    min-width: 240px;
                    padding: 16px 18px;
                    border-radius: 12px;
                    border: none;
                    outline: none;
                    font-size: 14px;
                }

                button {
                    background: linear-gradient(135deg, #8b89ff, #1b17a0);
                    color: #f0f0f0;
                    font-weight: 600;
                    padding: 16px 26px;
                    border-radius: 12px;
                    border: none;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    transition: 0.3s ease;
                }

                button:hover {
                    transform: translateY(-3px);
                }
            }

            .socials {
                display: flex;
                gap: 22px;

                a {
                    font-size: 22px;
                    color: #fff;
                    opacity: 0.8;
                    text-decoration: underline;
                    transition: all .3s ease-in-out;
                }

                a:hover {
                    opacity: 1;
                    transform: translateY(-4px);
                }
            }


        }

        .comingRight {
            width: 50%;
            height: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            .drmarketingBrain {
                width: 80%;
                height: auto;
                filter: brightness(0.85);
                image-orientation: none;
                transform: rotate(0deg) translateY(0);
                animation: floatImage 4s ease-in-out infinite;
            }

            .drmarketingText {
                width: 90%;
                margin-top: -87px;
                margin-right: 27px;
            }
        }
    }


}

@keyframes floatImage {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-25px);
    }

    100% {
        transform: translateY(0);
    }
}


@media screen and (max-width:768px) {
    .comingSoon {
        padding: 0 10px;

        .comingsoonContainer {
            margin: 80px 0;
            flex-wrap: wrap;

            .comingLeft {
                width: 100%;

                .mobilemodelogo{
                    display: block;
                    width: 120px;
                    margin-top: 250px;
                    margin-bottom: 20px;
                }

                .launch-badge{
                    margin-bottom: 15px;
                }

                h1 {
                    font-size: 2.5rem;
                    line-height: 3rem;
                    margin-bottom: 15px;
                }

                p {
                    font-size: 1.2rem;
                    line-height: 1.5rem;
                }

                .countdown {
                    flex-wrap: wrap;
                    margin: 35px 0;

                    div {
                        flex: 1 1 45%;
                    }
                }


            }

            .comingRight {
                width: 100%;
                display: none;
                /* width: 100%;
                height: 400px;

                .drmarketingBrain{
                    width: 50%;
                }

                .drmarketingText{
                    width: 60%;
                    margin-top: -20px;
                } */
            }
        }
    }
}