:root{
    --r3:20px;
    --shadow:0 10px 30px rgba(0,0,0,0.08);

    --navy:#00327C;
    --navy-dark:#001F4E;
    --navy-darker:#001034;

    --blue:#0273C8;
    --blue-light:#D9EBF7;
    --blue-tint:#EEF5FA;

    --border:#dbe4ee;
    --text:#1f2937;
    --muted:#5f6b7a;
}

body{
    margin:0;
    background:var(--blue-tint);
    font-family:Arial, sans-serif;
    color:var(--text);
}

.card{
    padding: 130px 20px 50px;
    display:flex;
    justify-content:center;
    animation: fadeUp 1.8s ease forwards;
}
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.card_layout{
    width:100%;
    max-width:550px;
    background:#fff;
    border-radius:var(--r3);
    padding:40px;
    box-shadow:var(--shadow);
    border:1px solid var(--blue-light);
}

.card_header{
    margin-bottom:32px;
}

.card_header h1{
    margin:0 0 8px;
    font-size:32px;
    color:var(--navy-dark);
}

.card_header p{
    margin:0;
    color:var(--muted);
    font-size:15px;
}

/* Section */
.form-section {
    padding: 8px 0;
}

.form-section__title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin: 0 0 20px;
}

/* Divider between sections */
.form-divider {
    border: none;
    border-top: 1px solid var(--blue-light);
    margin: 8px 0 28px;
}

/* 2-column grid */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
}

.form-grid--full {
    grid-column: 1 / -1;
}

.form_group{
    margin-bottom:24px;
}

.form_group label{
    display:block;
    margin-bottom:8px;
    font-weight:600;
    color:var(--navy);
}

.form_group input,
.form_group select {
    width:100%;
    height:52px;
    border:1px solid var(--blue-light);
    border-radius:14px;
    padding:0 16px;
    box-sizing:border-box;
    background:#fff;
    transition:0.2s;
    font-size: 15px;
    color: var(--text);
}

.form_group input:focus,
.form_group select:focus {
    outline:none;
    border-color:var(--blue);
    box-shadow:0 0 0 4px rgba(2,115,200,0.15);
}

.form_group input::placeholder{
    color:#8b98a8;
}

/* Submit */
.form-submit {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

.btn--primary {
    background: var(--navy);
    color: #fff;
    border: none;
    border-radius: 10px;
    height: 52px;
    padding: 0 48px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(0,50,124,0.22);
    transition: 0.2s;
}

.btn--primary:hover {
    background: var(--navy-dark);
    box-shadow: 0 14px 32px rgba(0,50,124,0.30);
    transform: translateY(-2px);
}

/* Tablet */
@media (max-width: 640px) {
    .card {
        padding: 40px 16px 40px;
    }

    .card_layout {
        padding: 28px 20px;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-grid--full {
        grid-column: 1;
    }
}

/* Mobile */
@media (max-width: 400px) {
    .card_header h1 {
        font-size: 24px;
    }

    .card_layout {
        padding: 24px 16px;
    }

    .btn--primary {
        width: 100%;
        padding: 0;
    }

    .form-submit {
        margin-top: 24px;
    }
}
/* Overlay */
.success-modal{
    position:fixed;
    inset:0;
    background:rgba(17,24,39,.55);
    backdrop-filter:blur(4px);

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

    z-index:9999;

    animation:fadeIn .25s ease;
}

/* Card */
.success-modal__content{
    width:90%;
    max-width:380px;

    background:#fff;
    border-radius:24px;

    padding:36px 32px;

    text-align:center;

    box-shadow:
        0 20px 40px rgba(0,0,0,.15),
        0 8px 16px rgba(0,0,0,.08);

    animation:popup .35s ease;
}

/* Success Circle */
.success-icon{
    width:80px;
    height:80px;

    margin:0 auto 20px;

    background:#22c55e;
    border-radius:50%;

    position:relative;

    animation:popIcon .5s ease;
}

/* Checkmark */
.success-icon::before{
    content:"";

    position:absolute;

    left:30px;
    top:20px;

    width:18px;
    height:34px;

    border-right:5px solid #fff;
    border-bottom:5px solid #fff;

    transform:rotate(45deg);
}

/* Title */
.success-modal__content h2{
    margin:0 0 10px;

    font-size:38px;
    font-weight:700;

    color:#111827;
}

/* Text */
.success-modal__content p{
    margin:0;

    font-size:18px;
    color:#6b7280;
}

/* Button */
.success-modal__content button{
    margin-top:30px;

    border:none;

    background:#00327C;
    color:#fff;

    padding:14px 36px;

    border-radius:14px;

    font-size:16px;
    font-weight:600;

    cursor:pointer;

    transition:.2s;
}

.success-modal__content button:hover{
    background:#001F4E;
    transform:translateY(-2px);
}

/* Animations */
@keyframes fadeIn{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

@keyframes popup{
    from{
        opacity:0;
        transform:scale(.85) translateY(20px);
    }
    to{
        opacity:1;
        transform:scale(1) translateY(0);
    }
}

@keyframes popIcon{
    0%{
        transform:scale(0);
    }
    70%{
        transform:scale(1.15);
    }
    100%{
        transform:scale(1);
    }
}