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

/* =========================
   FONT CLASSES
========================= */

.poppins-thin { font-family: "Poppins", sans-serif; font-weight: 100; }
.poppins-extralight { font-family: "Poppins", sans-serif; font-weight: 200; }
.poppins-light { font-family: "Poppins", sans-serif; font-weight: 300; }
.poppins-regular { font-family: "Poppins", sans-serif; font-weight: 400; }
.poppins-medium { font-family: "Poppins", sans-serif; font-weight: 500; }
.poppins-semibold { font-family: "Poppins", sans-serif; font-weight: 600; }
.poppins-bold { font-family: "Poppins", sans-serif; font-weight: 700; }
.poppins-extrabold { font-family: "Poppins", sans-serif; font-weight: 800; }
.poppins-black { font-family: "Poppins", sans-serif; font-weight: 900; }




/* Mobile-first layout */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: var(--main-bg) center/cover no-repeat;
    z-index: -1;
}

a {
    text-decoration: none;
}

.container {
    display: flex;
    flex-direction: column; /* stacked on mobile */
    width: 100%;
    max-width: 100%;
}

/* Both divs full width on mobile */
.right {
    width: 100%;
    padding: 20px;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap : 20px;
}

/* Both divs full width on mobile */
.left {
    width: 100%;
    padding: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main_btn {
    display: block;
    width: 100%;
    padding: 15px 25px;
    border-radius: 10px;
    border: none;
    background-color: rgb(3,36,86);
    color: rgb(255, 255, 255);
    cursor: pointer;
    font-size: 1.5em;
    text-align: center;
}

.main_btn:hover {
    background-color: rgb(206, 206, 206);
    color: rgb(105, 105, 105);
}

.scnd_btn {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 15px 25px;
    border-radius: 10px;
    border: none;
    background-color: rgba(255, 255, 255, 0);
    color: rgb(255, 106, 0);
    cursor: pointer;
    font-size: 1.5em;
    text-align: center;
}

.scnd_btn:hover {
    background-color: rgb(206, 206, 206);
    color: rgb(105, 105, 105);
}

.trd_btn {
    display: block;
    width: 100%;
    margin-top: 15px;
    padding: 15px 25px;
    border-radius: 10px;
    border: none;
    background-color: rgba(255, 106, 0, 1);
    color: rgb(255, 255, 255);
    cursor: pointer;
    font-size: 1.5em;
    text-align: center;
}

.trd_btn:hover {
    background-color: rgb(206, 206, 206);
    color: rgb(105, 105, 105);
}


/* Upload box */
.upload-box{
width:100%;
height:120px;
border-radius:12px;
border:2px dashed #ccc;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
background:#fafafa;
transition:.2s;
}

.upload-box:hover{
border-color:#888;
background:#f2f2f2;
}


/* Modal */
#cropModal{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.8);
align-items:center;
justify-content:center;
z-index:9999;
}

/* Wrapper */
.crop-wrapper{
background:white;
padding:20px;
border-radius:14px;
width:420px;
max-width:90%;
box-shadow:0 10px 40px rgba(0,0,0,.3);
}

.crop-container{
background:#fff;
padding:20px;
border-radius:12px;
width:400px;
max-width:95%;
}

/* Header */
.crop-header{
text-align:center;
margin-bottom:10px;
font-size:18px;
}

/* Crop area */
.crop-area{
width:100%;
height:350px;
}

.crop-area img{
max-width:100%;
display:block;
}

/* circle crop */
.cropper-view-box,
.cropper-face{
border-radius:50%;
}

/* Buttons */
.crop-buttons{
display:flex;
justify-content:space-between;
margin-top:15px;
gap : 15px;
}

.crop-cancel{
background:#ddd;
border:none;
padding:10px 18px;
border-radius:8px;
cursor:pointer;
}

.crop-save{
background:#27ae60;
color:white;
border:none;
padding:10px 18px;
border-radius:8px;
cursor:pointer;
}

/* Preview after crop */
.dp-preview{
width:70px;
height:70px;
border-radius:50%;
object-fit:cover;
margin-left:10px;
}

#cropImage{
    max-width:400px;
}


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

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

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

    img, svg {
        max-width: 100%;
        height: auto;
    }
    .heading {
        margin-top: 25px;
    }
    
    /* =========================
    BODY BACKGROUND (FIXED)
    ========================= */

    body {
        min-height: 100vh;
        position: relative;
        display: flex;
        justify-content: center;
    }

    body::before {
        content: "";
        position: fixed;
        inset: 0;
        background-image: var(--main-bg);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        z-index: -2;
    }

    /* =========================
    LAYOUT
    ========================= */

    .container {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .left,
    .right {
        width: 100%;
    }

    .left {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .right {
        padding: 20px;
    }

    /* =========================
    HEADING SECTION
    ========================= */

    .heading {
        width: 90%;
        padding: 20px;
        gap: 20px;

        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center; /* horizontally center content */

        border-radius: 25px;

        position: relative;     /* IMPORTANT */
        overflow: hidden;       /* keeps bg inside */
    }

    /* Heading Background Image */
    .heading_bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
    }

    /* All heading content above bg */
    .heading > *:not(.heading_bg) {
        position: relative;
        z-index: 1;
    }

    /* =========================
    SVG
    ========================= */

    .svgwish {
        width: 90%;
        display: block;
    }

    .scnd_headline {
        width: auto;
        max-width: 100%;
        word-wrap: break-word;
        font-size: 1.25em;
        color: #ffffff;
    }

    .headline {
        font-size: 2em;
        margin-top: 15px;
        color: rgba(255,220,0,1);
        text-align: center;
        line-height: 1.25;
    }

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

    .login-container{
        background:rgba(255, 255, 255, 0);
        width:100%;
        padding:0px;
        border-radius:0px;
        /* box-shadow:0 1px 3px rgba(0,0,0,0.2); */
        text-align:center;
    }

    .input-group{
        width: 100%;
        max-width: 100%;
        position:relative;
        margin-bottom:15px;
    }

    .msg-box {
        width:100%;
        padding:12px;
        border:2px solid #c2e0ff;
        background-color: #e4f1ff;
        color: #7095bd;
        border-radius:10px;
        font-size:15px;
        word-wrap: break-word;
    }

    .login-input{
        width:100%;
        padding:12px;
        border:2px solid #ffffff;
        border-radius:10px;
        font-size:15px;
    }

    .login-input:focus{
        outline:none;
        border:2px solid rgb(3,36,86);
    }

    .eye-icon{
        position:absolute;
        right:10px;
        top:50%;
        transform:translateY(-50%);
        width:22px;
        height:22px;
        cursor:pointer;
    }

    .main_btn {
        display: block;
        width: 100%;
        padding: 15px 25px;
        border-radius: 10px;
        border: none;
        background-color: rgb(3,36,86);
        color: rgb(255, 255, 255);
        cursor: pointer;
        font-size: 1em;
        text-align: center;
    }

    .main_btn:hover {
        background-color: rgb(255, 255, 255);
        color: rgb(3,36,86);
    }

    .scnd_btn {
        display: block;
        width: 100%;
        margin-top: 10px;
        padding: 15px 25px;
        border-radius: 10px;
        border: none;
        background-color: rgba(255, 255, 255, 0);
        color: rgb(255, 106, 0);
        cursor: pointer;
        font-size: 1em;
        text-align: center;
    }

    .scnd_btn:hover {
        background-color: rgb(255, 106, 0);
        color: rgb(255, 255, 255);
    }

    .trd_btn {
        display: block;
        width: 100%;
        margin-top: 15px;
        padding: 15px 25px;
        border-radius: 10px;
        border: none;
        background-color: rgba(255, 106, 0, 1);
        color: rgb(255, 255, 255);
        cursor: pointer;
        font-size: 1em;
        text-align: center;
    }

    .trd_btn:hover {
        background-color: rgb(3,36,86);
        color: rgb(255, 255, 255);
    }

}

/* =========================
   DESKTOP & LARGE SCREENS 
========================= */

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

    body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }

    .container {
        flex-direction: row; /* side by side */
        height: 100vh;       /* full viewport height */
        overflow: hidden;    /* prevent horizontal scroll */
    }

    /* Both divs full width on mobile */
    .right {
        width: 50%;          /* right half */
        height: 100vh;
        overflow-y: auto;    /* scrollable content */
        padding: 40px;
        align-items: center;
        text-align: center;
        display: flex;
        flex-direction: column;
    }

    /* Both divs full width on mobile */
    .left {
        padding: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50%;          /* fixed left half */
        position: sticky;    /* stay visible */
        top: 0;
        height: 100vh;
        overflow-y: auto;    /* scroll if left content is long */
    }

    /* Heading Div */
    .heading {
        width: 90%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center; /* horizontally center content */
        padding: 20px;
        gap: 20px;
        border-radius: 15px;
    }

    .heading_bg {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover; /* same as background-size: cover */
        top: 0;
        left: 0;
        z-index: -1;
    }

    /* SVG Wish */
    .svgwish {
        width: 50%;
        display: block;
        margin: 0 auto;
    }

    .scnd_headline {
        width: auto;
        max-width: 100%;
        margin-left: 10px;
        word-wrap: break-word;
        font-size: 2em;
        color: #ffffff;
    }

    .headline {
        font-size: 4em;
        margin-top: 15px;
        color: rgba(255,220,0,1);
        text-align: center;
    }

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

    .login-container{
        background:rgba(255, 255, 255, 0.7);
        width:75%;
        max-width: 75%;
        padding:40px;
        border-radius:20px;
        box-shadow:0 5px 25px rgba(0,0,0,0.2);
        text-align:center;
        margin-bottom: 20px;
    }

    .input-group{
        width: 100%;
        max-width: 100%;
        position:relative;
        margin-bottom:20px;
    }

    .msg-box {
        width:100%;
        padding:12px;
        border:2px solid #c2e0ff;
        background-color: #e4f1ff;
        color: #7095bd;
        border-radius:10px;
        font-size:15px;
        word-wrap: break-word;
    }

    .login-input{
        width:100%;
        padding:12px;
        border:2px solid #f0f0f0;
        border-radius:10px;
        font-size:15px;
    }

    .login-input:focus{
        outline:none;
        border:2px solid rgb(3,36,86);
    }

    .eye-icon{
        position:absolute;
        right:10px;
        top:50%;
        transform:translateY(-50%);
        width:22px;
        height:22px;
        cursor:pointer;
    }

    .headline {
        justify-content: center;   /* Horizontal center */
        align-items: center;
    }
}