/* ==========================================
   AI HOUSE PRICE PREDICTION
   Custom Styles
========================================== */

/* Google Font */

body{
    font-family: 'Poppins', sans-serif;
    scroll-behavior: smooth;
    background:#f8fafc;
    color:#1e293b;
    overflow-x:hidden;
}

/* ==========================================
   Scrollbar
========================================== */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#e2e8f0;
}

::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,#2563eb,#7c3aed);
    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:#2563eb;
}

/* ==========================================
   Selection
========================================== */

::selection{
    background:#2563eb;
    color:#fff;
}

/* ==========================================
   Images
========================================== */

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

/* ==========================================
   Links
========================================== */

a{
    text-decoration:none;
    transition:.3s ease;
}

/* ==========================================
   Buttons
========================================== */

button{

    cursor:pointer;

    transition:.35s ease;

}

button:hover{

    transform:translateY(-3px);

}

/* ==========================================
   Inputs
========================================== */

input,
select{

    transition:.3s;

}

input:focus,
select:focus{

    border-color:#2563eb;

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

}

/* ==========================================
   Card Animation
========================================== */

.shadow-xl{

    transition:.35s ease;

}

.shadow-xl:hover{

    transform:translateY(-8px);

}

/* ==========================================
   Glass Effect
========================================== */

.glass{

    background:rgba(255,255,255,.25);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.2);

}

/* ==========================================
   Gradient Text
========================================== */

.gradient-text{

    background:linear-gradient(90deg,#2563eb,#7c3aed);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

/* ==========================================
   Floating Animation
========================================== */

@keyframes float{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0px);

    }

}

.float{

    animation:float 4s ease-in-out infinite;

}

/* ==========================================
   Fade Up
========================================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.fade-up{

    animation:fadeUp .9s ease;

}

/* ==========================================
   Zoom
========================================== */

@keyframes zoomIn{

    from{

        transform:scale(.8);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

.zoom{

    animation:zoomIn .7s ease;

}

/* ==========================================
   Pulse
========================================== */

@keyframes pulseGlow{

    0%{

        box-shadow:0 0 0 rgba(37,99,235,.4);

    }

    50%{

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

    }

    100%{

        box-shadow:0 0 0 rgba(37,99,235,.4);

    }

}

.glow{

    animation:pulseGlow 2s infinite;

}
/* ==========================================
   Hero Section
========================================== */

.hero-bg{
    position:relative;
    overflow:hidden;
}

.hero-bg::before{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    background:rgba(255,255,255,.08);
    border-radius:50%;
    top:-120px;
    right:-120px;
    filter:blur(20px);
}

.hero-bg::after{
    content:"";
    position:absolute;
    width:250px;
    height:250px;
    background:rgba(255,255,255,.05);
    border-radius:50%;
    bottom:-80px;
    left:-80px;
}

/* ==========================================
   Navigation
========================================== */

nav{
    transition:.35s ease;
}

nav.scrolled{
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(15px);
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

/* ==========================================
   Statistics Cards
========================================== */

.stats-card{
    transition:.4s ease;
    border:1px solid transparent;
}

.stats-card:hover{

    transform:translateY(-12px);

    border-color:#2563eb;

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

}

/* ==========================================
   Prediction Form
========================================== */

.prediction-form{

    background:#fff;

    border-radius:24px;

    padding:35px;

    box-shadow:0 20px 45px rgba(15,23,42,.08);

}

.prediction-form input,
.prediction-form select{

    width:100%;

    border:1px solid #dbe4ef;

    border-radius:14px;

    padding:14px 18px;

    margin-top:8px;

}

.prediction-form label{

    font-weight:600;

    color:#334155;

}

/* ==========================================
   Result Card
========================================== */

.result-card{

    background:#fff;

    border-radius:24px;

    padding:35px;

    box-shadow:0 20px 45px rgba(15,23,42,.08);

    transition:.35s;

}

.result-card:hover{

    transform:translateY(-8px);

}

.price-box{

    background:linear-gradient(135deg,#2563eb,#7c3aed);

    color:#fff;

    padding:30px;

    border-radius:18px;

    text-align:center;

}

.price-box h2{

    font-size:42px;

    font-weight:700;

}

/* ==========================================
   Buttons
========================================== */

.primary-btn{

    background:linear-gradient(90deg,#2563eb,#7c3aed);

    color:#fff;

    padding:15px 35px;

    border-radius:14px;

    font-weight:600;

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

}

.primary-btn:hover{

    transform:translateY(-5px);

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

}

.secondary-btn{

    border:2px solid #2563eb;

    color:#2563eb;

    padding:15px 35px;

    border-radius:14px;

}

.secondary-btn:hover{

    background:#2563eb;

    color:#fff;

}

/* ==========================================
   Technology Cards
========================================== */

.tech-card{

    transition:.35s;

}

.tech-card:hover{

    transform:translateY(-10px) rotate(2deg);

}

/* ==========================================
   Feature Cards
========================================== */

.feature-card{

    transition:.35s;

    border:1px solid transparent;

}

.feature-card:hover{

    border-color:#2563eb;

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

}

/* ==========================================
   FAQ
========================================== */

details{

    transition:.3s;

}

details[open]{

    border-left:5px solid #2563eb;

}

summary{

    list-style:none;

}

summary::-webkit-details-marker{

    display:none;

}

/* ==========================================
   CTA Section
========================================== */

.cta{

    position:relative;

    overflow:hidden;

}

.cta::before{

    content:"";

    position:absolute;

    width:400px;

    height:400px;

    background:rgba(255,255,255,.08);

    border-radius:50%;

    top:-180px;

    right:-180px;

}

.cta::after{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    background:rgba(255,255,255,.06);

    border-radius:50%;

    bottom:-150px;

    left:-150px;

}

/* ==========================================
   Footer
========================================== */

footer a{

    transition:.35s;

}

footer a:hover{

    color:#60a5fa;

    transform:translateY(-5px);

}
/* ==========================================
   Responsive Design
========================================== */

@media (max-width:1200px){

    .hero-title{

        font-size:3rem;

    }

}

@media (max-width:992px){

    .prediction-wrapper{

        grid-template-columns:1fr;

    }

    .result-card{

        margin-top:30px;

        position:relative;

        top:0;

    }

}

@media (max-width:768px){

    nav{

        padding:15px;

    }

    .hero-title{

        font-size:2.3rem;

        line-height:1.3;

    }

    .section-title{

        font-size:2rem;

    }

    .price-box h2{

        font-size:32px;

    }

    .primary-btn,
    .secondary-btn{

        width:100%;

        margin-top:15px;

    }

}

@media (max-width:576px){

    body{

        font-size:15px;

    }

    .prediction-form{

        padding:20px;

    }

    .result-card{

        padding:20px;

    }

    .price-box{

        padding:20px;

    }

}

/* ==========================================
   Loading Spinner
========================================== */

.loader{

    width:60px;

    height:60px;

    border:6px solid #e2e8f0;

    border-top:6px solid #2563eb;

    border-radius:50%;

    animation:spin 1s linear infinite;

    margin:auto;

}

@keyframes spin{

    100%{

        transform:rotate(360deg);

    }

}

/* ==========================================
   Prediction Animation
========================================== */

.prediction-success{

    animation:predictionPop .5s ease;

}

@keyframes predictionPop{

    0%{

        transform:scale(.7);

        opacity:0;

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}

/* ==========================================
   Card Hover Glow
========================================== */

.hover-glow{

    transition:.35s;

}

.hover-glow:hover{

    box-shadow:0 20px 50px rgba(37,99,235,.25);

}

/* ==========================================
   Section Spacing
========================================== */

.section-padding{

    padding:100px 0;

}

/* ==========================================
   Utility Classes
========================================== */

.text-shadow{

    text-shadow:0 5px 15px rgba(0,0,0,.25);

}

.border-gradient{

    border:2px solid transparent;

    background:
        linear-gradient(#fff,#fff) padding-box,
        linear-gradient(90deg,#2563eb,#7c3aed) border-box;

}

.blur-bg{

    backdrop-filter:blur(18px);

}

.rounded-xl-plus{

    border-radius:30px;

}

/* ==========================================
   Smooth Appear Animation
========================================== */

.reveal{

    opacity:0;

    transform:translateY(40px);

    transition:all .8s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/* ==========================================
   Footer
========================================== */

footer{

    background:#0f172a;

}

footer i{

    transition:.3s;

}

footer i:hover{

    transform:translateY(-6px) scale(1.2);

}

/* ==========================================
   End of File
========================================== */