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

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

body {
    height:100vh;
    width:100vw;
    display:flex;
    justify-content:center;
    align-items:center;
    background: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1470&q=80') no-repeat center center fixed;
    background-size: cover;
    overflow:hidden;
    position:relative;
}

.wrapper {
    width:400px;
    max-width:90%;
    min-height:600px;
    background: rgba(255,255,255,0.95);
    border-radius: 25px;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(0,0,0,0.3);
    position:relative;
    transform: scale(1);
    transition: transform 0.3s ease;
}

.header {
    text-align:center;
    padding: 40px 20px 20px;
    font-size:28px;
    font-weight:700;
    color:#34495e;
}

.form-container {
    width:200%;
    display:flex;
    transition: transform 0.8s cubic-bezier(0.68,-0.55,0.27,1.55);
}

form {
    min-width:50%;
    padding:20px 40px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.input-group { margin-bottom:15px; position:relative; }
.input-group input, .input-group select {
    width:100%;
    padding:12px 15px;
    border-radius:50px;
    border:2px solid #ddd;
    outline:none;
    font-size:16px;
    transition: all 0.3s ease;
}
.input-group input:focus, .input-group select:focus { border-color:#1abc9c; }

.btn {
    padding:15px 50px;
    border-radius:50px;
    border:none;
    background:#1abc9c;
    color:white;
    font-weight:700;
    cursor:pointer;
    margin-top:10px;
    transition:all 0.3s ease;
}
.btn:hover { background:#16a085; transform:scale(1.05); }

.toggle-btn {
    margin-top:15px;
    background:none;
    border:none;
    font-weight:500;
    color:#3498db;
    cursor:pointer;
    text-decoration:underline;
    align-self:center;
}

.phone-wrapper { display:flex; gap:10px; align-items:center; }
.phone-wrapper select { width:30%; }
.phone-wrapper input { flex:1; }

@media(max-width:480px){
    .wrapper{width:95%; min-height:550px;}
    .header{font-size:24px; padding:30px 15px 15px;}
    .btn{padding:12px 40px; font-size:14px;}
    .input-group input, .input-group select{padding:10px 12px; font-size:14px;}
}