/* ==========================
   CONTACT PAGE
========================== */

body{

    background:#07111f;

    color:white;

    font-family:'Poppins',sans-serif;

    overflow-x:hidden;

}

/* ==========================
   HERO SECTION
========================== */

.contact-hero{

    min-height:80vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:120px 10%;

    background:
    radial-gradient(circle at top,
    rgba(0,180,255,0.25),
    transparent 45%),

    linear-gradient(
    135deg,
    #08121f,
    #0b1f35,
    #07111f);
}

.hero-content{

    max-width:900px;
}

.hero-badge{

    display:inline-block;

    padding:10px 25px;

    border-radius:50px;

    background:
    rgba(255,255,255,0.08);

    border:
    1px solid rgba(255,255,255,0.15);

    color:#57d6ff;

    margin-bottom:25px;

    backdrop-filter:blur(12px);
}

.hero-content h1{

    font-size:4rem;

    font-weight:800;

    margin-bottom:20px;
}

.hero-content p{

    color:#d5e4ef;

    line-height:1.8;

    font-size:1.1rem;
}

/* ==========================
   CONTACT CARDS
========================== */

.contact-cards{

    padding:100px 10%;

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

    gap:30px;
}

.contact-card{

    padding:40px;

    text-align:center;

    border-radius:25px;

    background:
    rgba(255,255,255,0.05);

    backdrop-filter:blur(15px);

    border:
    1px solid rgba(255,255,255,0.08);

    transition:.4s;
}

.contact-card:hover{

    transform:
    translateY(-10px);

    box-shadow:
    0 20px 50px rgba(0,183,255,0.2);
}

.card-icon{

    font-size:3rem;

    margin-bottom:20px;
}

.contact-card h3{

    margin-bottom:15px;
}

.contact-card p{

    color:#c8d7e5;
}

/* ==========================
   AI ADVISOR
========================== */

.ai-advisor{

    padding:50px 10% 100px;
}

.advisor-box{

    max-width:900px;

    margin:auto;

    text-align:center;

    padding:50px;

    border-radius:30px;

    background:
    rgba(255,255,255,0.05);

    border:
    1px solid rgba(255,255,255,0.1);

    backdrop-filter:blur(15px);
}

.advisor-box h2{

    margin-bottom:15px;
}

.advisor-box p{

    color:#c9d8e6;

    margin-bottom:25px;
}

.advisor-box input{

    width:100%;

    padding:18px;

    border:none;

    outline:none;

    border-radius:15px;

    background:
    rgba(255,255,255,0.08);

    color:white;

    margin-bottom:20px;
}

.advisor-box button{

    padding:15px 35px;

    border:none;

    border-radius:50px;

    cursor:pointer;

    background:
    linear-gradient(
    135deg,
    #00b7ff,
    #006eff);

    color:white;

    font-weight:600;

    transition:.4s;
}

.advisor-box button:hover{

    transform:
    translateY(-4px);

    box-shadow:
    0 15px 35px rgba(0,183,255,0.4);
}

/* ==========================
   CONTACT SECTION
========================== */

.contact-section{

    padding:100px 10%;
}

.contact-container{

    display:grid;

    grid-template-columns:
    1fr 1.3fr;

    gap:50px;
}

.contact-info{

    padding:40px;

    border-radius:25px;

    background:
    rgba(255,255,255,0.05);

    backdrop-filter:blur(15px);

    border:
    1px solid rgba(255,255,255,0.08);
}

.contact-info h2{

    margin-bottom:20px;
}

.contact-info p{

    color:#d5e4ef;

    line-height:1.8;
}

.info-item{

    display:flex;

    align-items:center;

    gap:15px;

    margin-top:25px;
}

.info-item span{

    font-size:1.5rem;
}

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

.contact-form{

    display:flex;

    flex-direction:column;

    gap:18px;
}

.contact-form input,
.contact-form select,
.contact-form textarea{

    width:100%;

    padding:18px;

    border:none;

    outline:none;

    border-radius:15px;

    background:
    rgba(255,255,255,0.06);

    color:white;

    border:
    1px solid rgba(255,255,255,0.08);
}

.contact-form textarea{

    resize:none;
}

.contact-form button{

    padding:18px;

    border:none;

    border-radius:50px;

    cursor:pointer;

    background:
    linear-gradient(
    135deg,
    #00b7ff,
    #006eff);

    color:white;

    font-weight:600;

    transition:.4s;
}

.contact-form button:hover{

    transform:
    translateY(-5px);

    box-shadow:
    0 15px 40px rgba(0,183,255,0.4);
}

/* ==========================
   STATS
========================== */

.contact-stats{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

    gap:25px;

    padding:100px 10%;
}

.stat-card{

    text-align:center;

    padding:40px;

    border-radius:20px;

    background:
    rgba(255,255,255,0.05);

    border:
    1px solid rgba(255,255,255,0.08);
}

.stat-card h2{

    font-size:3rem;

    color:#59d8ff;

    margin-bottom:10px;
}

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

.contact-cta{

    text-align:center;

    padding:120px 10%;
}

.contact-cta h2{

    font-size:3rem;

    margin-bottom:20px;
}

.contact-cta p{

    color:#d5e4ef;

    margin-bottom:30px;
}

.contact-cta a{

    display:inline-block;

    padding:16px 40px;

    border-radius:50px;

    text-decoration:none;

    color:white;

    background:
    linear-gradient(
    135deg,
    #00b7ff,
    #006eff);

    transition:.4s;
}

.contact-cta a:hover{

    transform:
    translateY(-5px);

    box-shadow:
    0 15px 35px rgba(0,183,255,0.4);
}

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

@media(max-width:900px){

    .contact-container{

        grid-template-columns:1fr;
    }

    .hero-content h1{

        font-size:2.7rem;
    }

}

@media(max-width:600px){

    .hero-content h1{

        font-size:2.2rem;
    }

    .contact-cta h2{

        font-size:2rem;
    }

}
/* ==========================
   REVEAL EFFECT
========================== */

.contact-card,
.advisor-box,
.contact-info,
.contact-form,
.stat-card,
.contact-cta{

    opacity:0;

    transform:
    translateY(50px);

    transition:
    all 1s ease;
}

.show{

    opacity:1;

    transform:
    translateY(0);
}

/* ==========================
   FLOAT ANIMATION
========================== */

@keyframes floatCard{

    0%{

        transform:
        translateY(0px);

    }

    50%{

        transform:
        translateY(-12px);

    }

    100%{

        transform:
        translateY(0px);

    }

}