:root{

    --green:#0B4F3A;
    --green-dark:#083B2C;
    --gold:#D4AF37;
    --gold-dark:#b28d20;
    --white:#FFFFFF;
    --gray:#F5F6F7;
    --text:#2F2F2F;
    --danger:#D9534F;
    --success:#198754;

}


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

body{

    font-family:
    "Segoe UI",
    Tahoma,
    Geneva,
    Verdana,
    sans-serif;

    background:
    linear-gradient(
    135deg,
    var(--green-dark),
    var(--green));

    min-height:100vh;

    color:var(--text);

    overflow-x:hidden;

}


body::before{

    content:"";

    position:fixed;

    top:-200px;

    left:-200px;

    width:600px;

    height:600px;

    border-radius:50%;

    background:
    rgba(255,255,255,.03);

    filter:blur(20px);

    animation:
    floatCircle
    12s infinite alternate;

    z-index:-1;

}

body::after{

    content:"";

    position:fixed;

    bottom:-250px;

    right:-250px;

    width:700px;

    height:700px;

    border-radius:50%;

    background:
    rgba(212,175,55,.08);

    filter:blur(30px);

    animation:
    floatCircle2
    14s infinite alternate;

    z-index:-1;

}

@keyframes floatCircle{

    from{

        transform:
        translate(0,0);

    }

    to{

        transform:
        translate(70px,40px);

    }

}

@keyframes floatCircle2{

    from{

        transform:
        translate(0,0);

    }

    to{

        transform:
        translate(-60px,-40px);

    }

}


.container-box{

    width:95%;

    max-width:900px;

    margin:50px auto;

}


.card{

    background:rgba(255,255,255,.96);

    backdrop-filter:blur(12px);

    border-radius:20px;

    padding:40px;

    box-shadow:

    0 20px 45px

    rgba(0,0,0,.15);

    animation:

    fadeUp .8s ease;

    transition:.35s;

}

.card:hover{

    transform:translateY(-4px);

}

/* Asa na ang logo nald? */

.logo{

    width:95px;

    display:block;

    margin:auto;

    margin-bottom:20px;

}

.title{

    text-align:center;

    color:var(--green);

    font-size:2rem;

    font-weight:700;

}

.subtitle{

    text-align:center;

    color:#666;

    margin-bottom:35px;

}


.section-title{

    color:var(--green);

    border-left:5px solid var(--gold);

    padding-left:12px;

    margin-top:25px;

    margin-bottom:20px;

    font-weight:600;

}


label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

}


.form-control,

.form-select{

    border-radius:12px;

    border:2px solid #ddd;

    padding:13px;

    transition:.3s;

    font-size:15px;

}

.form-control:focus,

.form-select:focus{

    border-color:var(--gold);

    box-shadow:

    0 0 0 .25rem

    rgba(212,175,55,.25);

}


.btn-submit{

    width:100%;

    background:linear-gradient(

    135deg,

    var(--gold),

    var(--gold-dark)

    );

    color:white;

    border:none;

    padding:15px;

    border-radius:12px;

    font-size:18px;

    font-weight:600;

    transition:.3s;

}

.btn-submit:hover{

    transform:

    translateY(-3px);

    box-shadow:

    0 12px 25px

    rgba(212,175,55,.35);

}

.btn-submit:active{

    transform:scale(.98);

}


.btn-back{

    background:var(--green);

    color:white;

    border:none;

    padding:12px 25px;

    border-radius:10px;

    transition:.3s;

}

.btn-back:hover{

    background:var(--green-dark);

}


.privacy-box{

    background:#F9F9F9;

    border-left:5px solid var(--gold);

    padding:18px;

    margin-top:30px;

    border-radius:10px;

    font-size:.94rem;

}



.error{

    color:var(--danger);

    font-size:.85rem;

    margin-top:6px;

}

.success-box{

    text-align:center;

    padding:45px;

}

.success-icon{

    font-size:80px;

    color:var(--success);

    animation:bounce 1s infinite;

}


.summary-table{

    width:100%;

    border-collapse:collapse;

    margin-top:20px;

}

.summary-table td{

    padding:12px;

    border-bottom:1px solid #ddd;

}

.summary-table td:first-child{

    font-weight:600;

    color:var(--green);

    width:35%;

}


.spinner{

    display:none;

    width:45px;

    height:45px;

    border:

    5px solid

    rgba(0,0,0,.15);

    border-top:

    5px solid

    var(--gold);

    border-radius:50%;

    animation:

    spin 1s linear infinite;

    margin:20px auto;

}


.footer{

    margin-top:30px;

    text-align:center;

    color:#777;

    font-size:14px;

}


@keyframes spin{

    from{

        transform:rotate(0);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:

        translateY(25px);

    }

    to{

        opacity:1;

        transform:

        translateY(0);

    }

}

@keyframes bounce{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}



@media(max-width:768px){

.card{

padding:25px;

}

.title{

font-size:1.5rem;

}

.logo{

width:75px;

}

.summary-table td{

display:block;

width:100%;

}

.summary-table tr{

margin-bottom:15px;

display:block;

}

}