/* ===========================
   GOOGLE FONT
=========================== */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Poppins',sans-serif;
    background:#f3f4f6;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    padding:30px;
}

/* ===========================
   MAIN CONTAINER
=========================== */

.container{
    width:1400px;
    max-width:100%;
    height:760px;

    background:#fff;

    border-radius:35px;

    display:grid;
    grid-template-columns:42% 58%;

    overflow:hidden;

    box-shadow:
    0 20px 60px rgba(0,0,0,.08);
}

/* ===========================
   LEFT PANEL
=========================== */

.left-panel{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:40px 50px;
}

.login-content{
    width:100%;
    max-width:400px;
}

.left-panel form{
    width:100%;
}

.logo{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:45px;

}

.logo-icon{

    width:55px;
    height:55px;

    background:#2563eb;

    border-radius:15px;

    display:flex;

    justify-content:center;
    align-items:center;

    color:white;

    font-size:23px;
}

.logo-text h2{

    font-size:32px;

    color:#111827;

    font-weight:700;
}

.logo-text p{

    color:#6b7280;

    font-size:14px;

}

/* ===========================
   WELCOME
=========================== */

.welcome{

    margin-bottom:25px;

}

.welcome h1{

    font-size:48px;

    font-weight:700;

    color:#111827;

    line-height:1.1;

    margin-bottom:8px;

    letter-spacing:-1px;

}

.welcome p{

    font-size:16px;

    color:#6B7280;

    line-height:1.5;

    max-width:380px;

}

/* ===========================
SOCIAL BUTTON
=========================== */

.social-buttons{

    margin-bottom:20px;

}

.google-btn{

    width:100%;

    height:52px;

    border:1px solid #E5E7EB;

    border-radius:14px;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    font-size:16px;

    font-weight:500;

    cursor:pointer;

    transition:.3s;
}

.google-btn:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.google-btn img{

    width:24px;

}

/* ===========================
DIVIDER
=========================== */

.divider{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:16px;

}

.divider span{

    flex:1;

    height:1px;

    background:#ddd;

}

.divider p{

    color:#9ca3af;

    font-size:14px;

}

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

.input-group{

    margin-bottom:16px;

}

.input-group label{

    display:block;

    margin-bottom:6px;

    color:#374151;

    font-size:14px;

}

.input-box{

    position:relative;

}

.input-box i:first-child{

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    color:#9ca3af;

}

.toggle-password{

    position:absolute;

    right:18px;

    top:50%;

    transform:translateY(-50%);

    color:#9ca3af;

    cursor:pointer;

}

.input-box input{

    width:100%;

    height:52px;

    background:#FAFAFB;

    border:1px solid #E5E7EB;

    border-radius:14px;

    padding-left:50px;

    padding-right:45px;

    font-size:15px;

    transition:.3s;

}

.input-box input:focus{

    background:#fff;

    border-color:#2563EB;

    box-shadow:0 0 0 5px rgba(37,99,235,.12);

}

/* ===========================
OPTIONS
=========================== */

.options{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;
      margin:5px 0 20px;
    font-size:14px;

}

.remember{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:14px;

    color:#4b5563;

}

.options a{

    color:#2563eb;

    text-decoration:none;

    font-size:14px;

}

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

.login-btn{

    width:100%;

    height:54px;

    border:none;

    border-radius:14px;

    background:#2563EB;

    color:#fff;

    font-size:17px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.login-btn:hover{

    transform:translateY(-3px);

    background:#1D4ED8;

    box-shadow:0 15px 35px rgba(37,99,235,.30);

}

/* ===========================
FOOTER
=========================== */

.signup{

    text-align:center;

    margin-top:18px;

    color:#6b7280;

    font-size:14px;

}

.signup a{

    color:#2563eb;

    text-decoration:none;

    font-weight:600;

}

/* ===========================
RIGHT PANEL
=========================== */

.right-panel{

    position:relative;

    overflow:hidden;

     background:#EEF2F7;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:45px;

}
/* ==========================================
   IMAGE COLLAGE
========================================== */

.image-collage{

    position:relative;

    width:100%;

    height:100%;

}

/* ==========================================
   COMMON CARD
========================================== */

.image-card{

    position:absolute;

    overflow:hidden;

    border-radius:24px;

    background:#fff;

    box-shadow:
    0 18px 40px rgba(0,0,0,.15);

    transition:.4s ease;

    cursor:pointer;

}

.image-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}

/* ==========================================
   HOVER EFFECT
========================================== */

.image-card:hover{

    transform:translateY(-8px) scale(1.03);

    box-shadow:
    0 30px 60px rgba(0,0,0,.25);

}

.image-card:hover img{

    transform:scale(1.08);

}

/* ==========================================
   OVERLAY
========================================== */

.image-overlay{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    padding:18px;

    color:white;

    background:linear-gradient(
        transparent,
        rgba(0,0,0,.65)
    );

}

.image-overlay h3{

    font-size:20px;

    font-weight:600;

    margin-bottom:4px;

}

.image-overlay span{

    font-size:14px;

    opacity:.9;

}

/* ==========================================
   CARD POSITIONS
========================================== */

/* Villa */

.card-1{

    width:360px;

    height:230px;

    top:10px;

    left:130px;

    transform:rotate(-3deg);

}

/* Condo */

.card-2{

    width:250px;

    height:170px;

    top:250px;

    right:10px;

    transform:rotate(3deg);

}

/* Skyline */

.card-3{

    width:230px;

    height:170px;

    top:250px;

    right:10px;

    transform:rotate(-2deg);

}

/* Interior */

.card-4{

    width:190px;

    height:140px;

    bottom:30px;

    left:90px;

    transform:rotate(2deg);

}

/* Pool */

.card-5{

    width:220px;

    height:150px;

    bottom:20px;

    right:40px;

    transform:rotate(-4deg);

}

/* ===========================
IMAGE
=========================== */

.hero-image{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:80px 30px 80px 30px;

}

/* ===========================
OVERLAY
=========================== */

.overlay{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    padding:18px;

    color:white;

    background:linear-gradient(

        transparent,

        rgba(0,0,0,.75)

    );

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

@media(max-width:1100px){

.container{

grid-template-columns:1fr;

height:auto;

}

.right-panel{

display:none;

}

.left-panel{

padding:40px;

}

}

@media(max-width:600px){

body{

padding:12px;
overflow-x: hidden;

}

.left-panel{

padding:20px 18px;
width: 100%;

}

.welcome h1{

font-size:28px;

}

.logo-text h2{

font-size:22px;

}

.google-btn{

font-size:14px;
min-height: 46px;
padding: 12px;

}

.login-btn{

font-size:16px;
min-height: 46px;
padding: 12px;

}

.input-box input{
font-size: 15px;
min-height: 44px;
}

.options{
flex-direction: column;
gap: 12px;
align-items: flex-start;
}

}
.input-group{

    margin-bottom:24px;

}

.options{

    margin:10px 0 30px;

}
/* ==========================================
   COLLAGE FLOATING ANIMATION
========================================== */

.image-collage{
    animation: collageFloat 8s ease-in-out infinite;
}

@keyframes collageFloat{

    0%{
        transform:translateY(0px);
    }

    25%{
        transform:translateY(-10px);
    }

    50%{
        transform:translateY(0px);
    }

    75%{
        transform:translateY(10px);
    }

    100%{
        transform:translateY(0px);
    }

}


/* ==========================================
   CARD APPEAR ANIMATION
========================================== */

.image-card{

    opacity:0;

    animation:fadeUp .8s ease forwards;

}

.card-1{
    animation-delay:.2s;
}

.card-2{
    animation-delay:.4s;
}

.card-3{
    animation-delay:.6s;
}

.card-4{
    animation-delay:.8s;
}

.card-5{
    animation-delay:1s;
}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

    }

}


/* ==========================================
   PREMIUM HOVER
========================================== */

.image-card:hover{

    z-index:20;

    transform:
    translateY(-12px)
    scale(1.04);

    box-shadow:
    0 35px 70px rgba(0,0,0,.22);

}

.image-card:hover img{

    transform:scale(1.12);

}


/* ==========================================
   GLASS BORDER
========================================== */

.image-card{

    border:4px solid rgba(255,255,255,.45);

}


/* ==========================================
   IMAGE SHADOW
========================================== */

.image-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        rgba(255,255,255,.15),

        rgba(255,255,255,0)

    );

    z-index:2;

    pointer-events:none;

}


/* ==========================================
   OVERLAY IMPROVEMENT
========================================== */

.image-overlay{

    z-index:3;

}

.image-overlay h3{

    letter-spacing:.3px;

}

.image-overlay span{

    color:rgba(255,255,255,.85);

}


/* ==========================================
   STAGGERED ROTATION
========================================== */

.card-1{

    transform:rotate(-3deg);

}

.card-2{

    transform:rotate(3deg);

}

.card-3{

    transform:rotate(-2deg);

}

.card-4{

    transform:rotate(2deg);

}

.card-5{

    transform:rotate(-4deg);

}


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

@media(max-width:1200px){

.right-panel{

    display:none;

}

.left-panel{

    width:100%;

}

}


/* ==========================================
   SMOOTH PAGE LOAD
========================================== */

body{

    animation:pageFade .8s ease;

}

@keyframes pageFade{

from{

    opacity:0;

}

to{

    opacity:1;

}

}
.gallery{

    width:100%;
    height:100%;

    display:grid;

    grid-template-columns:repeat(6,1fr);

    grid-template-rows:repeat(6,1fr);

    gap:18px;

}
.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    cursor:pointer;

    box-shadow:

    0 15px 35px rgba(0,0,0,.12);

    transition:.4s;

}
.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}
.gallery-item:hover{

    transform:

    translateY(-8px)

    scale(1.02);

    box-shadow:

    0 30px 60px rgba(0,0,0,.18);

}

.gallery-item:hover img{

    transform:scale(1.08);

}
/* Large */

.item1{

    grid-column:2/6;

    grid-row:1/3;

}

/* Left */

.item2{
    grid-column:1/4;
    grid-row:3/5;
}

.item3{
    grid-column:4/7;
    grid-row:3/5;
}

/* Bottom Left */

.item4{

    grid-column:2/4;

    grid-row:5/7;

}

/* Bottom Right */

.item5{

    grid-column:4/6;

    grid-row:5/7;

}
.gallery{

    animation:floatGallery 7s ease-in-out infinite;

}

@keyframes floatGallery{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}
.gallery-item{

opacity:0;

animation:fadeUp .8s forwards;

}

.item1{animation-delay:.2s;}
.item2{animation-delay:.4s;}
.item3{animation-delay:.6s;}
.item4{animation-delay:.8s;}
.item5{animation-delay:1s;}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(50px);

}

to{

opacity:1;

transform:none;

}

}