*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

body{
    background: linear-gradient(135deg,#0f2027,#203a43,#2c5364);
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
}

#logo_con{
    position: absolute;
    top: 15px;
    right: 50%;
    width: 10%;
    transform: translateX(50%);
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 90px;
    z-index: 1000;
}

/* FORM CONTAINER */
form{
    background:white;
    padding:40px;
    border-radius:12px;
    max-width:900px;
    width: 100%;
    height: 100%;
    max-height: 800px;
    overflow: hidden;
    box-shadow:0 10px 40px rgba(0,0,0,0.2);
    animation:fadeIn 1s ease;
}

/* HEADINGS */
h2{
    color:#2c5364;
    margin-top:25px;
    margin-bottom:10px;
}

h3{
    color:#333;
    margin-bottom:5px;
}

/* LABELS */
label{
    display:block;
    margin:10px 0;
    color:#444;
}

/* INPUTS */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea{

    width:100%;
    padding:10px;
    margin-top:5px;
    border-radius:6px;
    border:1px solid #ccc;
    transition:all 0.3s ease;
}

textarea{
    resize:vertical;
}

/* INPUT FOCUS ANIMATION */
input:focus,
textarea:focus{

    border-color:#2c5364;
    outline:none;
    box-shadow:0 0 5px rgba(44,83,100,0.4);
    transform:scale(1.01);
}

/* RADIO + CHECKBOX */
input[type="radio"],
input[type="checkbox"]{
    margin-right:6px;
    cursor:pointer;
}

/* SERVICE BOX */
label h3{
    margin-top:15px;
}

/* BUTTON */
button{

    width:100%;
    padding:14px;
    border:none;
    border-radius:8px;
    background:linear-gradient(135deg,#11998e,#38ef7d);
    color:white;
    font-size:16px;
    font-weight:bold;
    cursor:pointer;
    margin-top:25px;
    transition:all 0.3s ease;
}

button:hover{

    transform:translateY(-3px);
    box-shadow:0 8px 20px rgba(0,0,0,0.25);
}

#submit_btn{
    display : none;
    opacity: 0;
    transform: scale(0);
    transition: all 2s ease-in-out;
}

/* CONSENT TEXT */
p{
    margin:10px 0;
    line-height:1.6;
    color:#444;
}

ul{
    margin-left:20px;
    margin-bottom:10px;
}

/* SECTION CARDS */
form > label,
form > div,
form > p,
form > ul{

    background:#f8f9fb;
    padding:15px;
    border-radius:8px;
    margin-top:10px;
}

/* ==========================
INPUT STATES
========================== */

.input-error{
border:2px solid #e74c3c;
animation:shakeField 0.3s;
}

.input-success{
border:2px solid #2ecc71;
}

/* ==========================
ERROR MESSAGE
========================== */

.error-message{
color:#e74c3c;
font-size:12px;
margin-top:5px;
display:block;
animation:fadeIn 0.3s ease-in-out;
}

/* ==========================
ANIMATIONS
========================== */

@keyframes fadeIn{
from{
opacity:0;
transform:translateY(-5px);
}
to{
opacity:1;
transform:translateY(0);
}
}

@keyframes shakeField{
0%{transform:translateX(0);}
25%{transform:translateX(-4px);}
50%{transform:translateX(4px);}
75%{transform:translateX(-4px);}
100%{transform:translateX(0);}
}

/* FORM SHAKE */
.shake{
animation:formShake 0.4s;
}

@keyframes formShake{
0%{transform:translateX(0);}
25%{transform:translateX(-6px);}
50%{transform:translateX(6px);}
75%{transform:translateX(-6px);}
100%{transform:translateX(0);}
}

/* ==========================
FOCUS ENHANCEMENT
========================== */

input, textarea{
transition:0.2s ease;
}

input:focus, textarea:focus{
outline:none;
border:2px solid #3498db;
}

/* ANIMATION */
@keyframes fadeIn{

    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/* RESPONSIVE DESIGN */
@media (max-width:768px){

    form{
        padding:25px;
    }

    h2{
        font-size:20px;
    }

    button{
        font-size:15px;
    }

}