/* Google Fonts - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

@media (max-width: 1750px) and (min-width: 1301px) {
    .container {
        height: 77vh;
        width: 27%;
        top: 108px;
        right: 225px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: transparent;
        column-gap: 30px;
        transform: scale(.75);
    }
}

@media (min-width: 1751px) {
    .container {
        margin: 0 auto;
        text-align: right;
        height: 220px;
        width: 341px;
        position: fixed;
        bottom: 242px;
        right: 228px;
        display: grid;
        place-items: center;
        transform: translate(-50%, -50%) scale(.9);
    }
}

    .form {
        position: absolute;
        max-width: 430px;
        width: 130%;
        padding: 30px;
        border-radius: 6px;
        background: #FFF;
    }

        .form.signup {
            opacity: 0;
            pointer-events: none;
        }

    .forms.show-signup .form.signup {
        opacity: 1;
        pointer-events: auto;
    }

    .forms.show-signup .form.login {
        opacity: 0;
        pointer-events: none;
    }

    header {
        font-size: 28px;
        font-weight: 600;
        color: #232836;
        text-align: center;
    }

    form {
        margin-top: 30px;
    }

    .form .field {
        position: relative;
        height: 50px;
        width: 100%;
        margin-top: 20px;
        border-radius: 6px;
    }

    .field input,
    .field button {
        height: 100%;
        width: 100%;
        border: none;
        font-size: 16px;
        font-weight: 400;
        border-radius: 6px;
    }

    .field input {
        outline: none;
        padding: 0 15px;
        border: 1px solid#CACACA;
    }

        .field input:focus {
            border-bottom-width: 2px;
        }

    .eye-icon {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        font-size: 18px;
        color: #8b8b8b;
        cursor: pointer;
        padding: 5px;
    }

    .field button {
        color: #000;
        background-color: #48c2f9;
        transition: all 0.3s ease;
        cursor: pointer;
    }

        .field button:hover {
            background-color: #016dcb;
        }

    .form-link {
        text-align: center;
        margin-top: 10px;
    }

        .form-link span,
        .form-link a {
            font-size: 14px;
            font-weight: 400;
            color: #232836;
        }

    .form a {
        color: #0171d3;
        text-decoration: none;
    }

    .form-content a:hover {
        text-decoration: underline;
    }

    .line {
        position: relative;
        height: 1px;
        width: 100%;
        margin: 36px 0;
        background-color: #d4d4d4;
    }

        .line::before {
            content: 'Or';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #FFF;
            color: #8b8b8b;
            padding: 0 15px;
        }

    .media-options a {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    a.facebook {
        color: #fff;
        background-color: #4267b2;
    }

        a.facebook .facebook-icon {
            height: 28px;
            width: 28px;
            color: #0171d3;
            font-size: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #fff;
        }

    .facebook-icon,
    img.google-img {
        position: absolute;
        top: 50%;
        left: 15px;
        transform: translateY(-50%);
    }

    img.google-img {
        height: 20px;
        width: 20px;
        object-fit: cover;
    }

    a.google {
        border: 1px solid #CACACA;
    }

        a.google span {
            font-weight: 500;
            opacity: 0.6;
            color: #232836;
        }


    @media (max-width: 1300px) {
        .container {
            height: 77vh;
            width: 31%;
            top: 119px;
            right: 73px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: transparent;
            column-gap: 30px;
            transform: scale(0.7);
        }
    }

    @media (max-height: 850px) {
    }

    @media (max-width: 1299px) and (min-width: 1101px) {
        .container {
            height: 77vh;
            width: 31%;
            top: 90px;
            right: 73px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: transparent;
            column-gap: 30px;
            transform: scale(0.7);
        }
    }

    @media (max-width: 1100px) {
        .container {
            height: 77vh;
            width: 31%;
            top: 95px;
            right: 73px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: transparent;
            column-gap: 30px;
            transform: scale(0.7);
        }
    }

    /* Media Query for Mobile Devices */
    @media (max-width: 430px) {
        .container {
            height: 90vh;
            width: 100%;
            top: 0%;
            right: 5%;
        }

        header {
            font-size: 10px;
        }

        .form {
            max-width: 100%;
        }

        @media (max-width: 932px) {
            .container {
                height: 210vh;
                width: 100%;
                top: -9%;
                right: 5%;
            }

            header {
                font-size: 10px;
            }

            .form {
                max-width: 100%;
            }
        }
        /* Media Query for iPad and iPad Mini in portrait */
        @media (min-width: 481px) and (max-width: 768px) {
            .container {
                width: 70%;
                right: 15%;
            }

            header {
                font-size: 26px;
            }

            .form {
                max-width: 360px;
            }
        }

        /* Media Query for iPad Pro and large tablets */
        @media (min-width: 769px) and (max-width: 1024px) {
            .container {
                width: 60%;
                right: 20%;
            }

            header {
                font-size: 28px;
            }

            .form {
                max-width: 400px;
            }
        }

        /* Media Query for larger screens */
        @media (min-width: 1025px) {
            .container {
                width: 50%;
                right: 25%;
            }

            header {
                font-size: 30px;
            }

            .form {
                max-width: 430px;
            }
        }

        /* Media Query for iPad Pro and large tablets */
        @media (max-width: 500px) {
            .form {
                display: none;
                position: absolute;
                max-width: 430px;
                width: 348%;
                padding: 30px;
                border-radius: 6px;
                background: #ffffff;
                right: -33px;
                top: -38px;
            }

            header {
                font-size: 28px;
            }

            /* Sign In Button */
            #signInBtn {
                padding: 10px 20px;
                background: linear-gradient(150deg, #39b2fa, #2bb0ff, #31b3ef, #2bb0ff, #39b2fa);
                color: white;
                border: none;
                border-radius: 26px;
                cursor: pointer;
                /* transform: scale(1.4); */
                position: relative;
                left: 0px;
                top: 0%;
                box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 1);
                width: 217px;
                font-size: 20px;
                margin-bottom: 14px;
            }

                #signInBtn:hover {
                    background-color: #0056b3;
                }

            /* Sign Up Button */
            #signUpBtn {
                padding: 10px 20px;
                background: linear-gradient(150deg, #1cb81d, #6c9744, #408c43, #6c9744, #1cb81d);
                color: white;
                border: none;
                border-radius: 26px;
                cursor: pointer;
                /* transform: scale(1.4); */
                position: relative;
                left: 0px;
                top: 0%;
                box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 1);
                width: 217px;
                font-size: 20px;
            }

                #signUpBtn:hover {
                    background-color: #1e7e34;
                }

            .button-container {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                position: fixed;
                top: 566px;
                left: 87px;
            }


            .form.active {
                display: block;
            }



            .button-container {
                gap: 10px;
                padding: 20px;
                z-index: 2;
            }

                .button-container button {
                    padding: 10px 20px;
                    font-size: 16px;
                }

            .form.active ~ .button-container {
                display: none !important;
            }

        }

        @media (min-width: 1500px) {
            .container {
                height: 77vh;
                width: 27%;
                top: 140px;
                right: 343px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: transparent;
                column-gap: 30px;
                transform: scale(1);
            }
        }