/* ===========================
   ITS Mandala Theme
=========================== */

body{
    background: linear-gradient(
        180deg,
        #fffef8 0%,
        #fff8e6 35%,
        #ffffff 100%
    );
    font-family: "Segoe UI", Arial, sans-serif;
}

/* ===========================
   Navbar
=========================== */

.navbar{

    background: linear-gradient(
        90deg,
        #f57c00,
        #ff9800,
        #ffb300
    ) !important;

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

}

.navbar-brand{

    font-weight:bold;

    color:white !important;

    letter-spacing:.5px;

}

/* ===========================
   Hero
=========================== */

.hero{

    background: linear-gradient(
        135deg,
        #ff9800,
        #ffc107,
        #ffd54f
    );

    color:#222;

    padding:55px;

    margin-top:30px;

    margin-bottom:30px;

    border-radius:22px;

    box-shadow:0 10px 25px rgba(255,152,0,.25);

}

.hero h1{

    font-size:40px;

    font-weight:700;

}

.hero p{

    margin-top:15px;

    font-size:18px;

}

/* ===========================
   Card
=========================== */

.card{

    border:none;

    border-radius:18px;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

/* ===========================
   Card Header
=========================== */

.card-header{

    background:linear-gradient(
        90deg,
        #ff9800,
        #ffc107
    ) !important;

    color:white;

    font-weight:bold;

}

/* ===========================
   Button
=========================== */

.btn-primary{

    background:linear-gradient(
        90deg,
        #ff9800,
        #ffc107
    );

    border:none;

    font-weight:bold;

}

.btn-primary:hover{

    background:linear-gradient(
        90deg,
        #f57c00,
        #ff9800
    );

}

/* ===========================
   Badge
=========================== */

.badge{

    background:#ff9800 !important;

    color:white;

}

.bg-success{

    background: linear-gradient(
        90deg,
        #1565c0,
        #1e88e5
    ) !important;

    color: white !important;

    border-radius: 8px;

    padding: 5px 10px;

    font-weight: 600;

}

/* ===========================
   Search
=========================== */

.form-control,
.form-select{

    border-radius:12px;

    border:1px solid #ffd180;

}

.form-control:focus,
.form-select:focus{

    border-color:#ff9800;

    box-shadow:0 0 10px rgba(255,152,0,.3);

}

/* ===========================
   Table
=========================== */

.table{

    border-radius:15px;

    overflow:hidden;

}

/* ===========================
   Header Tabel
=========================== */

.table thead{

    background: linear-gradient(
        90deg,
        #1e88e5,
        #42a5f5
    );

}

.table thead th{

    background: transparent !important;

    color: white;

    border: none;

    font-weight: bold;

}

.table tbody tr{

    transition: .1s;

}

.table tbody tr:hover{

    background: #e3f2fd;

    cursor: pointer;

}

/* ===========================
   Modal
=========================== */

.modal-content{

    border:none;

    border-radius:18px;

}

.modal-header{

    background:linear-gradient(
        90deg,
        #ff9800,
        #ffc107
    );

    color:white;

}

.modal-title{

    font-weight:bold;

}

/* ===========================
   Footer
=========================== */

footer{

    color:#777;

    margin-top:40px;

}

/* ===========================
   Scrollbar
=========================== */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:#ff9800;

    border-radius:10px;

}

/* ===========================
   Responsive
=========================== */

@media(max-width:768px){

.hero{

    padding:30px;

}

.hero h1{

    font-size:28px;

}

.table{

    font-size:13px;

}

}