/* ==========================================================
   AL-QANTAARA LOGIN PAGE
   Part 1 - Base Layout
========================================================== */

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

html,
body{
    width:100%;
    overflow-x:hidden;
    font-family:Inter,Arial,sans-serif;
    background:#f7f7ff;
}

/* Main Section */

.alq-login-section{

    background:#f7f7ff;
    padding:70px 24px;
    overflow:hidden;
}

/* Two Column Layout */

.alq-login-page{
    width:100%;
    max-width:1320px;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:60px;
    overflow:hidden;
    box-sizing:border-box;
}
/* ==========================
   LEFT SIDE
========================== */

.alq-login-left{

    flex:1;
}

.login-lock-image{

    width:320px;
    max-width:100%;
    display:block;

    margin-bottom:30px;
}

.alq-login-left h1{

    font-size:58px;
    font-weight:700;

    line-height:1.12;

    color:#111827;

    margin-bottom:24px;
}

.alq-login-left h1 span{

    color:#4F46E5;
}

.alq-login-left p{

    max-width:540px;

    font-size:20px;

    line-height:1.8;

    color:#6B7280;
}

/* ==========================
   RIGHT SIDE
========================== */

.alq-login-right{

    flex:1;

    display:flex;

    justify-content:center;
}

/* Login Card */

.alq-login-card{

    width:100%;

    max-width:520px;

    background:#fff;

    border-radius:28px;

    padding:55px;

    border:1px solid rgba(79,70,229,.08);

    box-shadow:
        0 18px 55px rgba(79,70,229,.10),
        0 10px 30px rgba(0,0,0,.05);

    transition:.35s;
}

.alq-login-card:hover{

    transform:translateY(-4px);
}

.alq-login-card h2{

    font-size:46px;

    font-weight:700;

    color:#111827;

    margin-bottom:35px;
}
/* ==========================================================
   PART 2 - ULTIMATE MEMBER FORM
========================================================== */

/* Wrapper */

.um{
    width:100% !important;
    max-width:100% !important;
}

.um-login{
    width:100% !important;
}

.um-row{
    margin:0 !important;
}

.um-col-1{
    width:100% !important;
}

/* Fields */

.um-field{
    margin-bottom:24px !important;
}

.um-field-label{
    margin-bottom:10px !important;
}

.um-field-label label{

    font-size:15px !important;
    font-weight:600 !important;
    color:#111827 !important;
}

/* Inputs */

.um-form input[type="text"],
.um-form input[type="email"],
.um-form input[type="password"]{

    width:100% !important;

    height:60px !important;

    padding:0 18px !important;

    font-size:16px !important;

    color:#111827 !important;

    background:#fff !important;

    border:1px solid #E5E7EB !important;

    border-radius:14px !important;

    box-shadow:none !important;

    transition:.25s ease;
}

.um-form input::placeholder{

    color:#9CA3AF !important;
}

/* Focus */

.um-form input:focus{

    border-color:#4F46E5 !important;

    box-shadow:0 0 0 4px rgba(79,70,229,.10) !important;

    outline:none !important;
}

/* Hover */

.um-form input:hover{

    border-color:#C7D2FE !important;
}

/* Button */

.um-button{

    width:100% !important;

    height:60px !important;

    border:none !important;

    border-radius:14px !important;

    background:linear-gradient(90deg,#4F46E5,#2563EB) !important;

    color:#fff !important;

    font-size:17px !important;

    font-weight:600 !important;

    letter-spacing:.3px !important;

    transition:.30s ease !important;

    cursor:pointer;
}

.um-button:hover{

    transform:translateY(-2px);

    box-shadow:0 14px 35px rgba(79,70,229,.25);

    opacity:1 !important;
}

/* Links */

.um a{

    color:#4F46E5 !important;

    text-decoration:none;
}

.um a:hover{

    text-decoration:underline;
}

/* Notices */

.um-notice{

    border-radius:12px !important;

    font-size:14px;
}

/* Checkbox */

.um-field-checkbox{

    margin-top:10px !important;
}

/* Forgot Password */

.um-field-area{

    margin-top:8px;
}
/* ==========================================================
   PART 3 - RESPONSIVE
========================================================== */

/* =========================
   TABLET (1024px and below)
========================= *
{

    .alq-login-section{
        padding:60px 25px;
    }

    .alq-login-page{

        flex-direction:column;

        align-items:center;

        justify-content:center;

        gap:55px;
    }

    .alq-login-left,
    .alq-login-right{

        width:100%;

        max-width:700px;

        flex:none;
    }

    .alq-login-left{

        text-align:center;
    }

    .login-lock-image{

        width:240px;

        margin:0 auto 25px;
    }

    .alq-login-left h1{

        font-size:44px;
    }

    .alq-login-left p{

        max-width:620px;

        margin:auto;
    }

    .alq-login-card{

        max-width:560px;

        margin:auto;

        padding:45px;
    }

}


/* =========================
   MOBILE (768px and below)
========================= */

{

    html,
    body{

        overflow-x:hidden;
    }

    .alq-login-section{

        padding:40px 18px;
    }

    .alq-login-page{

        display:flex;

        flex-direction:column !important;

        align-items:center !important;

        justify-content:center !important;

        gap:35px;

        width:100%;
    }

    .alq-login-left,
    .alq-login-right{

        width:100%;

        max-width:100%;

        flex:none;
    }

    .alq-login-left{

        text-align:center;
    }

    .login-lock-image{

        width:180px;

        margin:0 auto 20px;
    }

    .alq-login-left h1{

        font-size:36px;

        line-height:1.2;
    }

    .alq-login-left p{

        font-size:16px;

        max-width:100%;
    }

    .alq-login-card{

        width:100%;

        max-width:100%;

        margin:auto;

        padding:28px 22px;

        border-radius:22px;
    }

    .alq-login-card h2{

        font-size:34px;

        margin-bottom:25px;
    }

    .um-form input{

        height:54px !important;

        font-size:16px !important;
    }

    .um-button{

        height:54px !important;

        font-size:16px !important;
    }

}


/* =========================
   SMALL PHONES
========================= */

@media (max-width:480px){

    .alq-login-section{

        padding:30px 16px;
    }

    .login-lock-image{

        width:150px;
    }

    .alq-login-left h1{

        font-size:30px;
    }

    .alq-login-left p{

        font-size:15px;
    }

    .alq-login-card{

        padding:24px 18px;
    }

}


/* =========================
   iPhone SE / Tiny Phones
========================= */

@media (max-width:360px){

    .alq-login-left h1{

        font-size:27px;
    }

    .login-lock-image{

        width:135px;
    }

    .alq-login-card{

        padding:20px 16px;
    }

}
/* ==========================================================
   PART 4 - PREMIUM POLISH
========================================================== */

/* Smooth animations */

*{
    transition:
        background-color .25s ease,
        border-color .25s ease,
        color .25s ease,
        box-shadow .25s ease;
}

/* Login Card */

.alq-login-card{

    position:relative;

    overflow:hidden;

}

.alq-login-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:linear-gradient(
        90deg,
        #4F46E5,
        #2563EB
    );

}

/* Better button */

.um-button{

    cursor:pointer;

    box-shadow:
        0 12px 30px rgba(79,70,229,.18);

}

.um-button:hover{

    transform:translateY(-2px);

}

.um-button:active{

    transform:scale(.98);

}

/* Better inputs */

.um-form input{

    transition:.25s ease !important;

}

.um-form input:focus{

    transform:translateY(-1px);

}

/* Better links */

.um a{

    color:#4F46E5 !important;

    font-weight:500;

}

.um a:hover{

    text-decoration:underline;

}

/* Better notices */

.um-notice{

    border-radius:12px !important;

    font-size:14px;

}

/* Images */

img{

    max-width:100%;

    height:auto;

}

/* Text Selection */

::selection{

    background:#4F46E5;

    color:#fff;

}

/* Accessibility */

@media (prefers-reduced-motion:reduce){

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto;

}

}

/* Landscape phones */

@media (max-height:500px){

.alq-login-section{

padding:30px 20px;

}

.login-lock-image{

width:140px;

}

.alq-login-left h1{

font-size:30px;

}

.alq-login-card{

padding:22px;

}

}
{

.alq-login-page{
    flex-direction:column !important;
    display:flex !important;
    width:100% !important;
}

.alq-login-left,
.alq-login-right{
    width:100% !important;
    max-width:100% !important;
    flex:0 0 100% !important;
}

body,
html{
    overflow-x:hidden !important;
}

}


/* ===== FINAL MOBILE FIX ===== */

@media screen and (max-width:768px){

html,
body{
    overflow-x:hidden !important;
    width:100%;
}

.alq-login-section{
    overflow:hidden !important;
    padding:40px 18px;
}

.alq-login-page{
    display:flex !important;
    flex-direction:column !important;
    width:100%;
    max-width:100%;
    gap:40px;
}

.alq-login-left,
.alq-login-right{
    width:100% !important;
    max-width:100% !important;
    flex:0 0 100% !important;
}

.alq-login-left{
    text-align:center;
}

.login-lock-image{
    width:170px;
    margin:0 auto 20px;
}

.alq-login-left h1{
    font-size:36px;
    line-height:1.2;
}

.alq-login-left p{
    font-size:16px;
}

.alq-login-card{
    width:100%;
    max-width:100%;
    padding:28px 22px;
    margin:0;
}
}



@media (max-width:768px){

.alq-login-page{
    display:flex;
    flex-direction:column;
    width:100%;
    max-width:100%;
    gap:40px;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.alq-login-left,
.alq-login-right{
    width:100%;
    max-width:100%;
}

.alq-login-card{
    width:100%;
    max-width:420px;
    margin:0 auto;
}

body,
html{
    overflow-x:hidden;
}

}

/* ==========================================================
   ULTIMATE MEMBER FORM
========================================================== */

.um{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
}

.um-login{
    width:100% !important;
}

.um-row{
    margin:0 !important;
}

.um-col-1{
    width:100% !important;
}

.um-field{
    margin-bottom:24px !important;
}

.um-field-label{
    margin-bottom:10px !important;
}

.um-field-label label{
    font-size:15px !important;
    font-weight:600 !important;
    color:#111827 !important;
}

/* INPUTS */

.um-form input[type="text"],
.um-form input[type="email"],
.um-form input[type="password"]{

    width:100% !important;

    height:60px !important;

    padding:0 18px !important;

    border:1px solid #E5E7EB !important;

    border-radius:14px !important;

    background:#fff !important;

    font-size:16px !important;

    color:#111827 !important;

    transition:.25s ease !important;

    box-shadow:none !important;
}

.um-form input::placeholder{

    color:#9CA3AF !important;
}

.um-form input:hover{

    border-color:#C7D2FE !important;
}

.um-form input:focus{

    border-color:#4F46E5 !important;

    box-shadow:0 0 0 4px rgba(79,70,229,.10) !important;

    outline:none !important;
}

/* BUTTON */

.um-button{

    width:100% !important;

    height:60px !important;

    border:none !important;

    border-radius:14px !important;

    background:linear-gradient(90deg,#4F46E5,#2563EB) !important;

    color:#fff !important;

    font-size:17px !important;

    font-weight:600 !important;

    letter-spacing:.3px !important;

    cursor:pointer;

    transition:.30s ease !important;

    box-shadow:0 12px 28px rgba(79,70,229,.18);
}

.um-button:hover{

    transform:translateY(-2px);

    box-shadow:0 16px 35px rgba(79,70,229,.24);

    opacity:1 !important;
}

.um-button:active{

    transform:scale(.98);
}

/* LINKS */

.um a{

    color:#4F46E5 !important;

    text-decoration:none !important;
}

.um a:hover{

    text-decoration:underline !important;
}

/* NOTICE */

.um-notice{

    border-radius:12px !important;
}

/* ==========================================================
   RESPONSIVE
========================================================== */

/* ------------------------------
   Tablet
------------------------------ */

@media (max-width:1024px){

.alq-login-section{
    padding:60px 24px;
}

.alq-login-page{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:50px;
}

.alq-login-left,
.alq-login-right{

    width:100%;

    max-width:700px;

    flex:none;
}

.alq-login-left{

    text-align:center;
}

.login-lock-image{

    width:220px;

    margin:0 auto 25px;
}

.alq-login-left h1{

    font-size:44px;
}

.alq-login-left p{

    margin:auto;

    font-size:18px;

    max-width:620px;
}

.alq-login-card{

    max-width:560px;

    padding:45px;
}

}


/* ------------------------------
   Mobile
------------------------------ */

@media (max-width:768px){

html,
body{

    overflow-x:hidden;

    width:100%;
}

.alq-login-section{

    padding:40px 18px;

    overflow:hidden;
}

.alq-login-page{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    width:100%;

    max-width:100%;

    gap:35px;
}

.alq-login-left,
.alq-login-right{

    width:100%;

    max-width:100%;

    flex:none;
}

.alq-login-left{

    text-align:center;
}

.login-lock-image{

    width:180px;

    margin:0 auto 20px;
}

.alq-login-left h1{

    font-size:34px;

    line-height:1.2;
}

.alq-login-left p{

    font-size:16px;

    margin:auto;

    max-width:100%;
}

.alq-login-card{

    width:100%;

    max-width:100%;

    padding:28px 22px;

    border-radius:22px;

    margin:0;
}

.alq-login-card h2{

    font-size:34px;

    margin-bottom:25px;
}

.um-form input{

    height:54px !important;

    font-size:16px !important;
}

.um-button{

    height:54px !important;

    font-size:16px !important;
}

}


/* ------------------------------
   Small Phones
------------------------------ */

@media (max-width:480px){

.alq-login-section{

    padding:30px 16px;
}

.login-lock-image{

    width:150px;
}

.alq-login-left h1{

    font-size:30px;
}

.alq-login-left p{

    font-size:15px;
}

.alq-login-card{

    padding:22px 18px;
}

}
/* ===== Safari Fix ===== */

html,
body{
    overflow-x:hidden !important;
    width:100%;
}

.alq-login-section{
    overflow:hidden !important;
}

.alq-login-page{
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
}

.alq-login-left,
.alq-login-right{
    min-width:0 !important;
}

.alq-login-card{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box;
}

.um,
.um-form,
.um-col-alt,
.um-col-1{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box;
}

.um-form input,
.um-button{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box;
}



.alq-login-section{
    min-height:100vh;
}

/* =========================
   LOGIN INPUTS
========================= */

.alq-email,
.alq-password{
    position:relative;
}

.um-form input[type="text"],
.um-form input[type="email"],
.um-form input[type="password"]{

    height:56px;

    border-radius:16px;

    padding-left:48px;

    padding-right:48px;

    border:1px solid #E5E7EB;

    transition:.3s ease;

}

.um-form input:focus{

    border-color:#4F46E5;

    box-shadow:0 0 0 4px rgba(79,70,229,.08);

}
/* ===============================
ULTIMATE MEMBER LOGIN INPUTS
=============================== */

.um .um-form .um-field-area{
    position:relative;
}

.um .um-form input[type="text"],
.um .um-form input[type="password"]{

    height:58px !important;

    border-radius:16px !important;

    border:1px solid #E5E7EB !important;

    padding-left:55px !important;

    padding-right:55px !important;

    font-size:15px;

    transition:.3s;

    background:#fff;

}

.um .um-form input:focus{

    border-color:#5B5FFF !important;

    box-shadow:0 0 0 4px rgba(91,95,255,.08);

}

/* =========================
   LOGIN FORM WIDTH
========================= */

.um{
    max-width:100% !important;
}

.um-form .um-field-area{
    width:100% !important;
}

.um-form .um-form-field{
    width:100% !important;
    max-width:100% !important;
}

/* =========================
   LOGIN BUTTON
========================= */

.um input[type="submit"],
.um .um-button{
    width:100% !important;
    height:56px !important;
    border-radius:16px !important;
}