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

body{
background:linear-gradient(135deg,#4f46e5,#7c3aed);
min-height:100vh;
justify-content:center;
align-items:center;
padding:0px;
margin: auto;
}

.contact-container{
width:1100px;
display:flex;
margin: auto;
margin-top: 20px;
background:#fff;
border-radius:20px;
overflow:hidden;
box-shadow:0 20px 40px rgba(0,0,0,.25);
}

.contact-left{
width:40%;
background:linear-gradient(135deg,#2563eb,#7c3aed);
color:#fff;
padding:50px 35px;
display:flex;
flex-direction:column;
justify-content:center;
}

.contact-left h2{
font-size:36px;
margin-bottom:20px;
}

.contact-left p{
line-height:28px;
margin-bottom:35px;
}

.info{
background:rgba(255,255,255,.15);
padding:15px;
margin-bottom:15px;
border-radius:10px;
font-size:17px;
}

.contact-right{
width:60%;
padding:50px;
background:#fff;
}

.input-box{
position:relative;
margin-bottom:28px;
}

.input-box input,
.input-box select,
.input-box textarea{

width:100%;
padding:15px;
border:2px solid #ddd;
border-radius:10px;
outline:none;
font-size:16px;
transition:.3s;

}

.input-box textarea{
resize:none;
}

.input-box input:focus,
.input-box textarea:focus,
.input-box select:focus{

border-color:#4f46e5;

}

.input-box label{

position:absolute;
left:15px;
top:15px;
background:#fff;
padding:0 6px;
color:#777;
pointer-events:none;
transition:.3s;

}

.input-box input:focus+label,
.input-box input:valid+label,
.input-box textarea:focus+label,
.input-box textarea:valid+label{

top:-10px;
font-size:13px;
color:#4f46e5;

}

button{

width:100%;
padding:16px;
background:linear-gradient(135deg,#2563eb,#7c3aed);
border:none;
color:#fff;
font-size:18px;
border-radius:10px;
cursor:pointer;
transition:.3s;

}

button:hover{

transform:translateY(-3px);

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

}

@media(max-width:900px){

.contact-container{

flex-direction:column;

}

.contact-left,
.contact-right{

width:100%;

}

}