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


body{

min-height:100vh;

background:#f7f9f3;

padding:40px;

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

}


.wrapper{

width:1200px;
max-width:100%;

display:grid;

grid-template-columns:
520px 1fr;

background:white;

border-radius:30px;

overflow:hidden;

box-shadow:
0 15px 50px rgba(0,0,0,.08);

}



/******************************************/
/* LEFT SIDE */
/******************************************/

.container{

padding:50px;

}


.container h2{

font-size:36px;

color:#2f4f2f;

margin-bottom:10px;

font-weight:700;

}


.subtitle{

color:#777;

margin-bottom:35px;

font-size:15px;

line-height:1.7;

}



form{


display:grid;

gap:18px;

}



input,
select{


width:100%;

padding:16px;

border:none;

background:#f7f9f3;

border-radius:12px;

font-size:15px;

transition:.3s;


}



input:focus,
select:focus{

outline:none;

background:white;


box-shadow:

0 0 0 3px rgba(107,142,35,.15);

}



button{


margin-top:10px;


padding:17px;

border:none;

border-radius:12px;

cursor:pointer;


font-size:16px;

font-weight:bold;


color:white;


background:


linear-gradient(

135deg,

#556B2F,

#6B8E23

);



transition:.3s;


}



button:hover{


transform:translateY(-2px);


box-shadow:


0 10px 25px rgba(0,0,0,.12);

}




.message{


margin-top:20px;

color:red;

text-align:center;


}



.login-link{


margin-top:25px;


text-align:center;


font-size:14px;

}



.login-link a{


text-decoration:none;


color:#556B2F;


font-weight:700;

}



.login-link a:hover{


text-decoration:underline;


}




/******************************************/
/* RIGHT SIDE */
/******************************************/

.hero{


padding:70px;


background:


linear-gradient(

180deg,

#556B2F,

#6B8E23

);


display:flex;

flex-direction:column;

justify-content:center;

}



.hero small{


color:#dfe8d0;


font-size:13px;


letter-spacing:2px;


font-weight:bold;


}



.hero h1{


font-size:52px;


margin-top:15px;


line-height:1.2;


color:white;


font-weight:700;


}



.hero p{


margin-top:25px;


font-size:17px;


line-height:1.8;


color:


rgba(255,255,255,.9);


max-width:500px;


}




.features{


margin-top:50px;



display:grid;


grid-template-columns:

repeat(2,1fr);



gap:20px;


}




.feature{


background:


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



padding:18px;



border-radius:16px;



display:flex;



align-items:center;



gap:15px;


transition:.3s;



}



.feature:hover{


background:


rgba(255,255,255,.15);


transform:

translateY(-3px);


}




.feature i{


font-size:24px;


color:white;


}




.feature span{


font-size:15px;


font-weight:600;


color:white;


}





/******************************************/
/* RESPONSIVE */
/******************************************/

@media(max-width:1000px){

.wrapper{

grid-template-columns:1fr;

}


.hero{


order:-1;


padding:50px;


}


.hero h1{


font-size:38px;


}


}




@media(max-width:650px){

body{

padding:15px;

}



.container{

padding:30px;

}



.hero{

padding:35px;

}



.hero h1{


font-size:30px;

}



.features{


grid-template-columns:1fr;

}


}