.elementor-722 .elementor-element.elementor-element-a825306{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for shortcode, class: .elementor-element-ef1c738 *//* =========================================================
   FARAZ SMS LOGIN
   PREMIUM TURQUOISE / OTP UI
   Elementor Custom CSS
   Main Color: #7EC8CC
   Font: Ray
========================================================= */

.elementor-722 .elementor-element.elementor-element-ef1c738 {

    --primary: #7EC8CC;
    --primary-dark: #4FA9AE;
    --primary-deep: #347F84;

    --primary-soft: #EAF8F9;
    --primary-glow: rgba(126,200,204,.22);

    --text: #182326;
    --muted: #7B8A8D;

    --border: #DDE8E9;
    --border-hover: #A9D9DC;

    --input-bg: #F8FBFB;

    font-family: "Ray", "Yekan Bakh", sans-serif !important;
    direction: rtl;

    -webkit-font-smoothing: antialiased;
}


/* =========================================================
   FORM
========================================================= */

.elementor-722 .elementor-element.elementor-element-ef1c738 form,
.elementor-722 .elementor-element.elementor-element-ef1c738 .login-form,
.elementor-722 .elementor-element.elementor-element-ef1c738 .farazsms-login-form {

    position: relative;

    width: 100%;
    max-width: 460px;

    margin: 0 auto;
    padding: 34px;

    box-sizing: border-box;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(248,252,252,.97)
        );

    border: 1px solid rgba(126,200,204,.20);

    border-radius: 26px;

    box-shadow:
        0 25px 70px rgba(30,50,55,.08),
        0 10px 30px rgba(126,200,204,.08);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}


/* =========================================================
   LABEL
========================================================= */

.elementor-722 .elementor-element.elementor-element-ef1c738 label {

    display: block;

    margin: 0 0 9px;

    color: var(--text);

    font-family: inherit !important;

    font-size: 14px;
    font-weight: 700;
}


/* =========================================================
   NORMAL INPUTS
========================================================= */

.elementor-722 .elementor-element.elementor-element-ef1c738 input[type="text"]:not(.otp-digit),
.elementor-722 .elementor-element.elementor-element-ef1c738 input[type="tel"],
.elementor-722 .elementor-element.elementor-element-ef1c738 input[type="number"]:not(.otp-digit),
.elementor-722 .elementor-element.elementor-element-ef1c738 input[type="password"],
.elementor-722 .elementor-element.elementor-element-ef1c738 input[type="email"] {

    width: 100%;
    height: 55px;

    padding: 0 17px;

    box-sizing: border-box;

    background: var(--input-bg);

    color: var(--text);

    border: 1.5px solid var(--border);

    border-radius: 12px;

    outline: none;

    font-family: inherit !important;
    font-size: 15px;
    font-weight: 500;

    transition:
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}


/* =========================================================
   NORMAL INPUT HOVER
========================================================= */

.elementor-722 .elementor-element.elementor-element-ef1c738 input[type="tel"]:hover,
.elementor-722 .elementor-element.elementor-element-ef1c738 input[type="text"]:not(.otp-digit):hover,
.elementor-722 .elementor-element.elementor-element-ef1c738 input[type="number"]:not(.otp-digit):hover,
.elementor-722 .elementor-element.elementor-element-ef1c738 input[type="password"]:hover,
.elementor-722 .elementor-element.elementor-element-ef1c738 input[type="email"]:hover {

    background: #FFFFFF;

    border-color: var(--border-hover);

    box-shadow:
        0 6px 18px rgba(126,200,204,.07);
}


/* =========================================================
   NORMAL INPUT FOCUS
========================================================= */

.elementor-722 .elementor-element.elementor-element-ef1c738 input[type="tel"]:focus,
.elementor-722 .elementor-element.elementor-element-ef1c738 input[type="text"]:not(.otp-digit):focus,
.elementor-722 .elementor-element.elementor-element-ef1c738 input[type="number"]:not(.otp-digit):focus,
.elementor-722 .elementor-element.elementor-element-ef1c738 input[type="password"]:focus,
.elementor-722 .elementor-element.elementor-element-ef1c738 input[type="email"]:focus {

    background: #FFFFFF;

    border-color: var(--primary);

    transform: translateY(-1px);

    box-shadow:
        0 0 0 3px rgba(126,200,204,.12),
        0 10px 25px rgba(126,200,204,.12);

    animation: farazPhoneFocus .45s ease;
}


@keyframes farazPhoneFocus {

    0% {
        box-shadow:
            0 0 0 0 rgba(126,200,204,0);
    }

    50% {
        box-shadow:
            0 0 0 6px rgba(126,200,204,.12);
    }

    100% {
        box-shadow:
            0 0 0 3px rgba(126,200,204,.12),
            0 10px 25px rgba(126,200,204,.12);
    }
}


/* =========================================================
   PLACEHOLDER
========================================================= */

.elementor-722 .elementor-element.elementor-element-ef1c738 input::placeholder {

    color: #A8B4B6;

    opacity: 1;

    font-family: inherit !important;

    transition: opacity .25s ease;
}


.elementor-722 .elementor-element.elementor-element-ef1c738 input:focus::placeholder {
    opacity: .35;
}


/* =========================================================
   OTP CONTAINER
========================================================= */

/* چند مدل کلاس برای اطمینان از شناسایی کانتینر */

.elementor-722 .elementor-element.elementor-element-ef1c738 .otp-container,
.elementor-722 .elementor-element.elementor-element-ef1c738 .otp-inputs,
.elementor-722 .elementor-element.elementor-element-ef1c738 .verification-code,
.elementor-722 .elementor-element.elementor-element-ef1c738 .code-inputs {

    display: flex !important;

    flex-direction: row !important;

    flex-wrap: nowrap !important;

    justify-content: center !important;

    align-items: center !important;

    direction: ltr !important;

    gap: 14px !important;

    width: 100% !important;

    margin: 22px auto !important;

    padding: 5px 0 !important;

    box-sizing: border-box;

}


/* =========================================================
   OTP DIGITS
   REAL FARAZ SMS ELEMENT
========================================================= */

.elementor-722 .elementor-element.elementor-element-ef1c738 input.otp-digit {

    position: relative;

    flex: 0 0 52px !important;

    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;

    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;

    margin: 0 !important;

    padding: 0 !important;

    box-sizing: border-box !important;

    display: block !important;

    direction: ltr !important;

    text-align: center !important;
    text-align-last: center !important;

    line-height: 58px !important;

    font-family: "Ray", "Yekan Bakh", sans-serif !important;

    font-size: 21px !important;

    font-weight: 800 !important;

    color: var(--text) !important;

    background: #F8FBFB !important;

    border: 1.5px solid #DDE8E9 !important;

    border-radius: 12px !important;

    outline: none !important;

    caret-color: var(--primary);

    appearance: none !important;
    -webkit-appearance: none !important;

    box-shadow:
        0 4px 12px rgba(30,50,55,.035) !important;

    transition:
        border-color .3s ease,
        background .3s ease,
        color .3s ease,
        transform .3s cubic-bezier(.2,.8,.2,1),
        box-shadow .3s ease;
}


/* =========================================================
   OTP HOVER
========================================================= */

.elementor-722 .elementor-element.elementor-element-ef1c738 input.otp-digit:hover {

    background: #FFFFFF !important;

    border-color: var(--primary) !important;

    transform: translateY(-3px);

    box-shadow:
        0 9px 20px rgba(126,200,204,.12) !important;
}


/* =========================================================
   OTP FOCUS
   PREMIUM ANIMATED BORDER
========================================================= */

.elementor-722 .elementor-element.elementor-element-ef1c738 input.otp-digit:focus {

    background: #FFFFFF !important;

    color: var(--primary-deep) !important;

    border-color: var(--primary) !important;

    transform:
        translateY(-4px)
        scale(1.055);

    box-shadow:

        0 0 0 2px rgba(126,200,204,.15),

        0 0 0 5px rgba(126,200,204,.07),

        0 10px 25px rgba(126,200,204,.18) !important;

    animation:
        farazOTPFocus .55s cubic-bezier(.2,.8,.2,1);
}


/* =========================================================
   OTP ANIMATED FOCUS
========================================================= */

@keyframes farazOTPFocus {

    0% {

        transform:
            translateY(0)
            scale(.92);

        box-shadow:
            0 0 0 0 rgba(126,200,204,0);
    }

    45% {

        transform:
            translateY(-5px)
            scale(1.07);

        box-shadow:

            0 0 0 7px rgba(126,200,204,.12),

            0 0 25px rgba(126,200,204,.20);
    }

    75% {

        transform:
            translateY(-4px)
            scale(1.055);

        box-shadow:

            0 0 0 4px rgba(126,200,204,.10),

            0 0 18px rgba(126,200,204,.18);
    }

    100% {

        transform:
            translateY(-4px)
            scale(1.055);

        box-shadow:

            0 0 0 2px rgba(126,200,204,.15),

            0 0 0 5px rgba(126,200,204,.07),

            0 10px 25px rgba(126,200,204,.18);
    }
}


/* =========================================================
   OTP FILLED
========================================================= */

.elementor-722 .elementor-element.elementor-element-ef1c738 input.otp-digit:not(:placeholder-shown) {

    color: var(--primary-deep) !important;

    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #F0FAFA
        ) !important;

    border-color:
        rgba(126,200,204,.70) !important;

    box-shadow:
        0 5px 15px rgba(126,200,204,.08) !important;

    animation:
        farazOTPFilled .3s ease;
}


@keyframes farazOTPFilled {

    0% {

        transform: scale(.88);

        opacity: .5;
    }

    60% {

        transform: scale(1.07);

        opacity: 1;
    }

    100% {

        transform: scale(1);

        opacity: 1;
    }
}


/* =========================================================
   OTP CARET
========================================================= */

.elementor-722 .elementor-element.elementor-element-ef1c738 input.otp-digit {

    caret-color: var(--primary) !important;
}


/* =========================================================
   AUTOFILL
========================================================= */

.elementor-722 .elementor-element.elementor-element-ef1c738 input.otp-digit:-webkit-autofill {

    -webkit-text-fill-color: var(--primary-deep) !important;

    box-shadow:
        0 0 0 100px #F1FAFA inset !important;
}


/* =========================================================
   REMOVE NUMBER ARROWS
========================================================= */

.elementor-722 .elementor-element.elementor-element-ef1c738 input.otp-digit::-webkit-outer-spin-button,
.elementor-722 .elementor-element.elementor-element-ef1c738 input.otp-digit::-webkit-inner-spin-button {

    -webkit-appearance: none !important;

    margin: 0 !important;
}


/* =========================================================
   BUTTON
   چند .elementor-722 .elementor-element.elementor-element-ef1c738 مختلف برای گرفتن دکمه فراز
========================================================= */

.elementor-722 .elementor-element.elementor-element-ef1c738 form button,
.elementor-722 .elementor-element.elementor-element-ef1c738 form input[type="submit"],
.elementor-722 .elementor-element.elementor-element-ef1c738 form input[type="button"],
.elementor-722 .elementor-element.elementor-element-ef1c738 form .button,
.elementor-722 .elementor-element.elementor-element-ef1c738 form [type="submit"] {

    position: relative !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 8px !important;

    width: 100% !important;

    min-height: 55px !important;

    margin-top: 8px !important;

    padding: 0 20px !important;

    box-sizing: border-box !important;

    overflow: hidden !important;

    border: 0 !important;

    border-radius: 13px !important;

    background:
        linear-gradient(
            135deg,
            #7EC8CC 0%,
            #69BCC1 50%,
            #4FA9AE 100%
        ) !important;

    color: #FFFFFF !important;

    font-family: inherit !important;

    font-size: 15px !important;

    font-weight: 800 !important;

    cursor: pointer !important;

    box-shadow:
        0 10px 25px rgba(126,200,204,.22) !important;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        filter .3s ease,
        opacity .3s ease !important;
}


/* =========================================================
   BUTTON SHINE
========================================================= */

.elementor-722 .elementor-element.elementor-element-ef1c738 form button::before,
.elementor-722 .elementor-element.elementor-element-ef1c738 form input[type="submit"]::before,
.elementor-722 .elementor-element.elementor-element-ef1c738 form input[type="button"]::before,
.elementor-722 .elementor-element.elementor-element-ef1c738 form .button::before {

    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.40),
            transparent
        );

    transform: skewX(-20deg);

    transition: left .65s ease;

    pointer-events: none;
}


/* =========================================================
   BUTTON HOVER
========================================================= */

.elementor-722 .elementor-element.elementor-element-ef1c738 form button:hover,
.elementor-722 .elementor-element.elementor-element-ef1c738 form input[type="submit"]:hover,
.elementor-722 .elementor-element.elementor-element-ef1c738 form input[type="button"]:hover,
.elementor-722 .elementor-element.elementor-element-ef1c738 form .button:hover {

    transform: translateY(-3px) !important;

    box-shadow:
        0 15px 34px rgba(79,169,174,.30) !important;

    filter: brightness(1.04);
}


.elementor-722 .elementor-element.elementor-element-ef1c738 form button:hover::before,
.elementor-722 .elementor-element.elementor-element-ef1c738 form input[type="submit"]:hover::before,
.elementor-722 .elementor-element.elementor-element-ef1c738 form input[type="button"]:hover::before,
.elementor-722 .elementor-element.elementor-element-ef1c738 form .button:hover::before {

    left: 140%;
}


/* =========================================================
   BUTTON ACTIVE
========================================================= */

.elementor-722 .elementor-element.elementor-element-ef1c738 form button:active,
.elementor-722 .elementor-element.elementor-element-ef1c738 form input[type="submit"]:active,
.elementor-722 .elementor-element.elementor-element-ef1c738 form input[type="button"]:active,
.elementor-722 .elementor-element.elementor-element-ef1c738 form .button:active {

    transform:
        translateY(0)
        scale(.98) !important;

    box-shadow:
        0 6px 15px rgba(79,169,174,.20) !important;
}


/* =========================================================
   FORCE TURQUOISE
   اگر افزونه هنگام ارسال کلاس قرمز اضافه کند
========================================================= */

.elementor-722 .elementor-element.elementor-element-ef1c738 form button:disabled,
.elementor-722 .elementor-element.elementor-element-ef1c738 form button.disabled,
.elementor-722 .elementor-element.elementor-element-ef1c738 form button.loading,
.elementor-722 .elementor-element.elementor-element-ef1c738 form button.processing,
.elementor-722 .elementor-element.elementor-element-ef1c738 form button.sending,
.elementor-722 .elementor-element.elementor-element-ef1c738 form button.error,
.elementor-722 .elementor-element.elementor-element-ef1c738 form button.invalid,

.elementor-722 .elementor-element.elementor-element-ef1c738 form input[type="submit"]:disabled,
.elementor-722 .elementor-element.elementor-element-ef1c738 form input[type="submit"].disabled,
.elementor-722 .elementor-element.elementor-element-ef1c738 form input[type="submit"].loading,
.elementor-722 .elementor-element.elementor-element-ef1c738 form input[type="submit"].processing,
.elementor-722 .elementor-element.elementor-element-ef1c738 form input[type="submit"].sending,
.elementor-722 .elementor-element.elementor-element-ef1c738 form input[type="submit"].error,
.elementor-722 .elementor-element.elementor-element-ef1c738 form input[type="submit"].invalid {

    background:
        linear-gradient(
            135deg,
            #7EC8CC 0%,
            #69BCC1 50%,
            #4FA9AE 100%
        ) !important;

    color: #FFFFFF !important;

    border-color: transparent !important;

    opacity: .78 !important;

    cursor: wait !important;

    transform: none !important;

    filter: none !important;

    box-shadow:
        0 8px 22px rgba(126,200,204,.16) !important;
}


/* =========================================================
   LOADING SPINNER
========================================================= */

.elementor-722 .elementor-element.elementor-element-ef1c738 form button.loading::after,
.elementor-722 .elementor-element.elementor-element-ef1c738 form input[type="submit"].loading::after,
.elementor-722 .elementor-element.elementor-element-ef1c738 form button.processing::after,
.elementor-722 .elementor-element.elementor-element-ef1c738 form input[type="submit"].processing::after,
.elementor-722 .elementor-element.elementor-element-ef1c738 form button.sending::after,
.elementor-722 .elementor-element.elementor-element-ef1c738 form input[type="submit"].sending::after {

    content: "";

    position: absolute;

    right: 50%;

    top: 50%;

    width: 18px;
    height: 18px;

    margin:
        -9px
        -9px
        0
        0;

    border:

        2px solid rgba(255,255,255,.35);

    border-top-color:
        #FFFFFF;

    border-radius: 50%;

    animation:
        farazSpinner .7s linear infinite;
}


@keyframes farazSpinner {

    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   BUTTON ICON / ARROW
========================================================= */

.elementor-722 .elementor-element.elementor-element-ef1c738 form button svg,
.elementor-722 .elementor-element.elementor-element-ef1c738 form button i,
.elementor-722 .elementor-element.elementor-element-ef1c738 form input[type="submit"] svg,
.elementor-722 .elementor-element.elementor-element-ef1c738 form input[type="submit"] i,
.elementor-722 .elementor-element.elementor-element-ef1c738 form .button svg,
.elementor-722 .elementor-element.elementor-element-ef1c738 form .button i {

    position: relative;

    z-index: 2;

    transition:
        transform .3s ease;
}


.elementor-722 .elementor-element.elementor-element-ef1c738 form button:hover svg,
.elementor-722 .elementor-element.elementor-element-ef1c738 form button:hover i,
.elementor-722 .elementor-element.elementor-element-ef1c738 form input[type="submit"]:hover svg,
.elementor-722 .elementor-element.elementor-element-ef1c738 form input[type="submit"]:hover i,
.elementor-722 .elementor-element.elementor-element-ef1c738 form .button:hover svg,
.elementor-722 .elementor-element.elementor-element-ef1c738 form .button:hover i {

    transform:
        translateX(-5px);
}


/* =========================================================
   LINKS
========================================================= */

.elementor-722 .elementor-element.elementor-element-ef1c738 a {

    color: var(--primary-dark) !important;

    font-family: inherit !important;

    font-weight: 700;

    text-decoration: none;

    transition:
        color .25s ease,
        opacity .25s ease;
}


.elementor-722 .elementor-element.elementor-element-ef1c738 a:hover {

    color:
        var(--primary-deep) !important;

    opacity: .85;
}


/* =========================================================
   TIMER
========================================================= */

.elementor-722 .elementor-element.elementor-element-ef1c738 .timer,
.elementor-722 .elementor-element.elementor-element-ef1c738 .countdown,
.elementor-722 .elementor-element.elementor-element-ef1c738 .resend-timer,
.elementor-722 .elementor-element.elementor-element-ef1c738 .otp-timer {

    margin-top: 13px;

    color: var(--muted);

    font-family: inherit !important;

    font-size: 13px;

    font-weight: 600;

    text-align: center;
}


/* =========================================================
   RESEND
========================================================= */

.elementor-722 .elementor-element.elementor-element-ef1c738 .resend,
.elementor-722 .elementor-element.elementor-element-ef1c738 .resend-code,
.elementor-722 .elementor-element.elementor-element-ef1c738 .send-again {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    color: var(--primary-dark) !important;

    font-family: inherit !important;

    font-size: 13px;

    font-weight: 800;

    transition:
        transform .25s ease,
        color .25s ease;
}


.elementor-722 .elementor-element.elementor-element-ef1c738 .resend:hover,
.elementor-722 .elementor-element.elementor-element-ef1c738 .resend-code:hover,
.elementor-722 .elementor-element.elementor-element-ef1c738 .send-again:hover {

    color:
        var(--primary-deep) !important;

    transform:
        translateY(-1px);
}


/* =========================================================
   ERROR
========================================================= */

.elementor-722 .elementor-element.elementor-element-ef1c738 .error,
.elementor-722 .elementor-element.elementor-element-ef1c738 .error-message,
.elementor-722 .elementor-element.elementor-element-ef1c738 .woocommerce-error {

    margin-bottom: 16px;

    padding: 12px 15px;

    border-radius: 11px;

    background: #FFF5F6;

    border:
        1px solid rgba(232,93,117,.18);

    color: #C54861;

    font-family: inherit !important;

    font-size: 13px;

    line-height: 1.8;

    animation:
        farazMessageIn .35s ease;
}


/* =========================================================
   SUCCESS
========================================================= */

.elementor-722 .elementor-element.elementor-element-ef1c738 .success,
.elementor-722 .elementor-element.elementor-element-ef1c738 .success-message {

    margin-bottom: 16px;

    padding: 12px 15px;

    border-radius: 11px;

    background: #F1FBF7;

    border:
        1px solid rgba(53,167,124,.18);

    color: #278562;

    font-family: inherit !important;

    font-size: 13px;

    line-height: 1.8;

    animation:
        farazMessageIn .35s ease;
}


@keyframes farazMessageIn {

    from {

        opacity: 0;

        transform:
            translateY(-7px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}


/* =========================================================
   FORM SPACING
========================================================= */

.elementor-722 .elementor-element.elementor-element-ef1c738 form > div,
.elementor-722 .elementor-element.elementor-element-ef1c738 form p,
.elementor-722 .elementor-element.elementor-element-ef1c738 .form-group {

    margin-bottom: 18px;
}


/* =========================================================
   CHECKBOX
========================================================= */

.elementor-722 .elementor-element.elementor-element-ef1c738 input[type="checkbox"] {

    width: 18px !important;

    height: 18px !important;

    accent-color:
        var(--primary);

    cursor: pointer;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .elementor-722 .elementor-element.elementor-element-ef1c738 form,
    .elementor-722 .elementor-element.elementor-element-ef1c738 .login-form,
    .elementor-722 .elementor-element.elementor-element-ef1c738 .farazsms-login-form {

        padding: 24px 18px;

        border-radius: 21px;
    }


    .elementor-722 .elementor-element.elementor-element-ef1c738 input[type="tel"],
    .elementor-722 .elementor-element.elementor-element-ef1c738 input[type="text"]:not(.otp-digit),
    .elementor-722 .elementor-element.elementor-element-ef1c738 input[type="password"],
    .elementor-722 .elementor-element.elementor-element-ef1c738 input[type="email"] {

        height: 52px;

        font-size: 14px;

        border-radius: 11px;
    }


    /* OTP */

    .elementor-722 .elementor-element.elementor-element-ef1c738 .otp-container,
    .elementor-722 .elementor-element.elementor-element-ef1c738 .otp-inputs,
    .elementor-722 .elementor-element.elementor-element-ef1c738 .verification-code,
    .elementor-722 .elementor-element.elementor-element-ef1c738 .code-inputs {

        gap: 10px !important;

        margin:
            20px auto !important;
    }


    .elementor-722 .elementor-element.elementor-element-ef1c738 input.otp-digit {

        flex:
            0 0 45px !important;

        width: 45px !important;

        min-width: 45px !important;

        max-width: 45px !important;

        height: 51px !important;

        min-height: 51px !important;

        max-height: 51px !important;

        line-height: 51px !important;

        border-radius: 10px !important;

        font-size: 18px !important;
    }


    .elementor-722 .elementor-element.elementor-element-ef1c738 form button,
    .elementor-722 .elementor-element.elementor-element-ef1c738 form input[type="submit"],
    .elementor-722 .elementor-element.elementor-element-ef1c738 form input[type="button"],
    .elementor-722 .elementor-element.elementor-element-ef1c738 form .button {

        min-height: 52px !important;

        border-radius: 11px !important;

        font-size: 14px !important;
    }


    .elementor-722 .elementor-element.elementor-element-ef1c738 label {

        font-size: 13px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .elementor-722 .elementor-element.elementor-element-ef1c738 form,
    .elementor-722 .elementor-element.elementor-element-ef1c738 .login-form,
    .elementor-722 .elementor-element.elementor-element-ef1c738 .farazsms-login-form {

        padding:
            20px 14px;
    }


    .elementor-722 .elementor-element.elementor-element-ef1c738 .otp-container,
    .elementor-722 .elementor-element.elementor-element-ef1c738 .otp-inputs,
    .elementor-722 .elementor-element.elementor-element-ef1c738 .verification-code,
    .elementor-722 .elementor-element.elementor-element-ef1c738 .code-inputs {

        gap: 7px !important;
    }


    .elementor-722 .elementor-element.elementor-element-ef1c738 input.otp-digit {

        flex:
            0 0 40px !important;

        width: 40px !important;

        min-width: 40px !important;

        max-width: 40px !important;

        height: 46px !important;

        min-height: 46px !important;

        max-height: 46px !important;

        line-height: 46px !important;

        font-size: 17px !important;

        border-radius: 9px !important;
    }
}/* End custom CSS */