/* Extra Small (Phones)	< 576px
Small (Landscape Phones, Tablets)	≥ 576px
Medium (Tablets, Small Laptops)	≥ 768px
Large (Laptops, Desktops)	≥ 992px
Extra Large (Large Desktops)	≥ 1200px
Extra Extra Large (Wide Monitors)	≥ 1400px+ */


@media (width <=1680px) {
    .right-section {
        margin-right: 2%;
    }
}


@media (width <=1470px) {
    main:has(.right-container) {
        background-position: top center;
    }
}


@media (width <=1400px) {
    main:has(.right-container) {
        background: url(../images/login-banner-sm.webp) center/cover no-repeat;
    }

    main:has(.right-container)::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.8);
    }

    .right-section {
        margin: auto;
    }
}


@media (width <=768px) {
    html {
        font-size: 14px;
    }

    .input-field svg {
        width: 1.75rem;
        height: 1.75rem;
    }
}


@media (width <=576px) {
    .right-section {
        padding: 1.5rem;

        figure img {
            scale: 0.9;
        }
    }

    .nav.nav-pills a {
        padding: 0.5rem 2.143rem;
    }

    .social-links {
        gap: 1.143rem;

        img {
            scale: 0.9;
        }
    }

    .input-field input.form-control,
    .right-container-2 , .right-section {
        width: 100%; 
    }

    h1 {
        font-size: 2.143rem;
    }

    h2 {
        font-size: 1.143rem;
        line-height: 1.5;
        margin: 0.5rem 0;
    }

    .login-signup-btn {
        font-size: 1.143rem;
    }

    .otp-field {
        margin: 1.25rem auto 0;

        input.otp-input {
            width: 3.018rem;
        }
    }

    .deploy-text+p {
        font-size: 1.286rem;
    }
}


@media (width <=410px) {
    .otp-field {
        gap: 0.714rem;

        input.otp-input {
            width: 100%;
            height: auto;
        }
    }
}