#slide_subscribe {
    transition: 250ms;
    position: fixed;
    bottom: -200px;
    
    background-color: #D5F1FC;
    z-index: 100;

    padding: 1rem 0;
    width: 100%;
    
    .content-width {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;

    }

    box-sizing: border-box;

    .notify-logo {
        width: 91px;
        aspect-ratio: 1/0.703;
    }

    .notify-title {
        font-size: 20px;
        font-weight: bold;
        /* white-space: nowrap; */
    }

    div {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .slide-inputs {
        flex: min(0.5, 1);
    }

    input::placeholder {
        color: #ffcc00;
        font-style: italic;
    }

    input{ 
        flex: 1;
    }

    input,button {
        border-radius: 14px;
        font-size: 16px;
        padding: 0.5rem 1rem;
        outline: none;    
        border: 2px solid #ffcc00;
    }
    
    button {
        background-color: #ffcc00;
        color: white;
        font-weight: bold;

        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
}

.slide-visible {
    bottom: 0 !important;
}



@media (max-width: 1100px) {
    #slide_subscribe  .content-width{
        flex-direction: column;
        gap: 0.5rem;

        .slide-inputs {
            width: 60%;
        }
    }
}

@media (max-width: 700px) {
    #slide_subscribe .content-width {
        gap: 1rem;
        /* div containig notify logo and notify text */
        div:first-child {
            padding: 0 0.25rem;
            gap: 0.5rem;
        }

        .notify-logo {
            width: 40px;
        }

        .notify-title {
            margin: 0;
            font-size: 15px;
        }

        div {
            width: 100%;
        }

        input {
           flex: 1;
        }

        .slide-inputs {
            width: 100%;
        }
    }
}

@media (max-width: 460px) {
    #slide_subscribe .content-width{
        div:first-child {
            display: none;
        }

        div:last-child {
            flex-direction: column;
            gap: 0.5rem;

            button, input {
                width: 100%;
                justify-content: center;
            }
            
        }
    }
}