@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{
    background:#0b0b0b;
    color:white;
}

.header{

    width:100%;
    height:82px;

    position:fixed;

    top:0;
    left:0;

    z-index:1000;

    background:#ffffff;

    border-bottom:1px solid #e5e7eb;

    display:flex;

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

    box-shadow:
    0 2px 15px rgba(0,0,0,.05);

    padding:0 20px;
}

.logo{

    font-size:28px;

    font-weight:900;

    color:#000000;

    text-align:center;
}

.back-btn{

    position:absolute;

    left:18px;

    width:42px;
    height:42px;

    border:none;

    border-radius:50%;

    background:#7c3aed;

    color:white;

    display:flex;

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

    font-size:18px;

    cursor:pointer;

    z-index:2000;   /* increased */

    box-shadow:
    0 6px 18px rgba(124,58,237,.22);
}

.home-btn{

    text-decoration:none;

    color:black;

    background:#00ff99;

    padding:12px 22px;

    border-radius:12px;

    font-weight:700;

    transition:0.3s;
}

.home-btn:hover{

    transform:scale(1.05);

    box-shadow:0 0 20px #00ff99;
}

/* PAGE */
.contact-page{

    width:100%;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:flex-start;

    padding:95px 20px 40px;
}

/* CONTAINER */

.contact-container{

    width:1200px;

    background:#111;

    border-radius:30px;

    overflow:hidden;

    display:grid;

    grid-template-columns:1fr 1fr;

    box-shadow:
    0 20px 40px rgba(0,255,153,0.12);
}

/* LEFT */

.contact-left{

    background:#00ff99;

    padding:60px;

    color:black;

    display:flex;

    flex-direction:column;

    justify-content:center;
}

.contact-left h1{

    font-size:60px;

    margin-bottom:25px;

    font-weight:800;
}

.contact-left p{

    font-size:18px;

    line-height:34px;

    margin-bottom:40px;
}

.contact-left img{

    width:100%;

    border-radius:25px;
}

/* RIGHT */

.contact-right{

    padding:60px;
}

.contact-right h2{

    font-size:42px;

    margin-bottom:30px;
}

/* LOGIN WARNING */

.login-warning{

    background:#1a1a1a;

    border:1px solid #333;

    padding:18px 20px;

    border-radius:15px;

    margin-bottom:35px;

    color:#ffcc66;

    display:flex;

    align-items:center;

    gap:12px;
}

/* INPUTS */

.input-box{

    margin-bottom:28px;
}

.input-box label{

    display:block;

    margin-bottom:12px;

    color:#ccc;

    font-size:15px;
}

/* INPUT FIELD */

.input-field,
.textarea-field{

    width:100%;

    background:#1b1b1b;

    border-radius:16px;

    display:flex;

    align-items:center;

    padding:0 20px;

    border:1px solid #222;
}

.input-field{

    height:62px;
}

.input-field i,
.textarea-field i{

    color:#00ff99;

    font-size:18px;

    margin-right:15px;
}

.input-field input{

    width:100%;

    background:none;

    border:none;

    outline:none;

    color:white;

    font-size:16px;
}

/* TEXTAREA */

.textarea-field{

    align-items:flex-start;

    padding-top:20px;

    min-height:170px;
}

.textarea-field textarea{

    width:100%;

    height:130px;

    background:none;

    border:none;

    outline:none;

    resize:none;

    color:white;

    font-size:16px;
}

/* BUTTON */

.contact-btn{

    width:100%;

    height:62px;

    border:none;

    border-radius:16px;

    background:#00ff99;

    color:black;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    transition:0.3s;

    margin-top:10px;
}

.contact-btn:hover{

    transform:scale(1.02);

    box-shadow:
    0 0 20px #00ff99;
}

/* LOGIN BUTTON */

.login-btn{

    width:100%;

    height:60px;

    margin-top:20px;

    background:#1f1f1f;

    color:white;

    border-radius:16px;

    display:flex;

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

    text-decoration:none;

    font-weight:600;

    transition:0.3s;
}

.login-btn:hover{

    background:#00ff99;

    color:black;
}

/* MOBILE */

@media(max-width:992px){

    .contact-container{

        grid-template-columns:1fr;
    }

    .contact-left{

        display:none;
    }
}

@media(max-width:768px){

    .header{

        padding:0 25px;
    }

    .logo{

        font-size:22px;
    }

    .contact-right{

        padding:40px 25px;
    }

    .contact-right h2{

        font-size:32px;
    }
}

.back-btn:hover{

    background:#6d28d9;

    transform:scale(1.05);
}
/* ==================================
   PREMIUM CONTACT PAGE THEME
   ADD AT END OF contact.css
================================== */

/* BODY */

body{
    background:#ffffff !important;
    color:#111111 !important;
}

/* HEADER */

.header{
    background:#ffffff !important;
    border-bottom:1px solid #e5e7eb !important;

    box-shadow:
    0 2px 15px rgba(0,0,0,0.05);
}

/* LOGO */

.logo{
    color:#000000 !important;

    font-weight:900;

    letter-spacing:1px;

    text-shadow:
    0 1px 0 rgba(0,0,0,0.05),
    0 2px 8px rgba(0,0,0,0.05);
}

/* CONTACT CONTAINER */

.contact-container{

    background:#ffffff !important;

    border:1px solid #e5e7eb;

    box-shadow:
    0 20px 45px rgba(0,0,0,0.08);
}

/* LEFT SIDE */

.contact-left{

    background:
    linear-gradient(
    135deg,
    #6d28d9,
    #7c3aed,
    #8b5cf6
    ) !important;

    color:white !important;
}

.contact-left h1{
    color:white;
}

.contact-left p{
    color:rgba(255,255,255,0.92);
}

/* RIGHT SIDE */

.contact-right{
    background:#ffffff;
}

.contact-right h2{
    color:#111111;
}

/* LOGIN WARNING */

.login-warning{

    background:#f8fafc;

    border:1px solid #e5e7eb;

    color:#7c3aed;
}

/* LABELS */

.input-box label{
    color:#374151;
}

/* INPUTS */

.input-field,
.textarea-field{

    background:#f8fafc !important;

    border:1px solid #e5e7eb !important;
}

.input-field i,
.textarea-field i{
    color:#7c3aed !important;
}

.input-field input,
.textarea-field textarea{

    color:#111111 !important;
}

.input-field input::placeholder,
.textarea-field textarea::placeholder{

    color:#6b7280;
}

/* SUBMIT BUTTON */

.contact-btn{

    background:#7c3aed !important;

    color:white !important;

    font-weight:700;
}

.contact-btn:hover{

    background:#6d28d9 !important;

    box-shadow:
    0 10px 25px rgba(124,58,237,0.30);
}

/* LOGIN BUTTON */

.login-btn{

    background:#f3f4f6 !important;

    color:#111111 !important;

    border:1px solid #e5e7eb;
}

.login-btn:hover{

    background:#7c3aed !important;

    color:white !important;
}

/* TOP BAR */

.topbar{

    background:#ffffff !important;

    border-bottom:1px solid #e5e7eb;

    color:#111111;
}

/* BACK BUTTON */

.back-btn{

    background:#7c3aed !important;

    color:white !important;
}

.back-btn:hover{

    background:#6d28d9 !important;

    transform:scale(1.05);
}