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

/* =========================
   BODY
========================= */
body{
    background:linear-gradient(135deg,#7E95CE);
    font-family:'Segoe UI',sans-serif;
    min-height:100vh;

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

    padding:20px;
}

/* =========================
   MAIN CARD
========================= */
.card-box{
    width:100%;
    max-width:1000px;

    background:#F5C056;
    border-radius:25px;

    padding:30px 20px;

    box-shadow:0 10px 30px rgba(0,0,0,0.2);

    overflow:hidden;
}

/* =========================
   TITLE
========================= */
.logo-text,
h1,
h2,
h3{
    text-align:center;
    color:#f7c600;
    margin-bottom:20px;
    font-weight:800;
}

/* =========================
   FORM INPUTS
========================= */
.form-control,
.form-select,
input,
select{
    width:100%;
    padding:14px;

    border:none;
    border-radius:12px;

    margin-bottom:15px;

    font-size:15px;

    outline:none;
}

/* =========================
   BUTTONS
========================= */
.btn-primary,
.btn-success,
.btn-dark,
button{
    width:100%;
    padding:14px;

    border:none;
    border-radius:12px;

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

    cursor:pointer;

    transition:0.3s;

    margin-bottom:15px;
}

/* YELLOW BUTTON */
.btn-primary,
.btn-success{
    background:#f7c600;
    color:#000;
}

.btn-primary:hover,
.btn-success:hover{
    background:#ddb100;
}

/* BLUE BUTTON */
.btn-dark{
    background:#0057b8;
    color:#fff;
}

.btn-dark:hover{
    background:#004494;
}

/* =========================
   RESPONSIVE TABLE
========================= */
.table-responsive{
    width:100%;
    overflow-x:auto;
    border-radius:18px;
}

/* TABLE */
.table{
    width:100%;
    min-width:700px;

    border-collapse:collapse;

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

    overflow:hidden;
}

/* TABLE HEAD */
.table th{
    background:#f1f1f1;
    color:#000;

    padding:14px 10px;

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

    text-align:center;

    border:1px solid #ddd;
}

/* TABLE BODY */
.table td{
    padding:12px 10px;

    font-size:14px;

    text-align:center;

    border:1px solid #eee;

    word-break:break-word;
}

/* HOVER */
.table tr:hover{
    background:#fafafa;
}

/* =========================
   AUTO FIT SMALL SCREEN
========================= */
@media(max-width:768px){

    .card-box{
        padding:20px 12px;
    }

    .table{
        min-width:100%;
    }

    .table th,
    .table td{
        font-size:12px;
        padding:10px 6px;
    }

    h1,h2,h3{
        font-size:24px;
    }
}

/* =========================
   MOBILE PHONE
========================= */
@media(max-width:480px){

    body{
        padding:10px;
    }

    .card-box{
        border-radius:18px;
        padding:15px 10px;
    }

    .table-responsive{
        overflow-x:auto;
    }

    .table{
        min-width:600px;
    }

    .table th,
    .table td{
        font-size:11px;
        padding:8px 5px;
    }

    h1,h2,h3{
        font-size:20px;
    }

    .btn-primary,
    .btn-success,
    .btn-dark,
    button{
        font-size:14px;
        padding:12px;
    }
}