@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap");
:root{
--font-main:"Jost", sans-serif;
--color-primary:#000;
--color-secondary:#FFF;
--color-fade:#EBEBEB;
--font-size:15px;
--font-size-small:13px;
--radius:10px;
}
*{padding:0px;margin:0px;scroll-behavior:smooth;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
body{font-family:var(--font-main);margin:0px auto;padding:auto;color:var(--color-primary);font-size:var(--font-size);font-weight:400;line-height:1.9;background-color:#F9FAFB}
body .container{margin:0px auto;padding:0px 10px;max-width:1200px}
body a,body a:hover,body a:active,body a:focus{color:var(--color-primary);text-decoration:none;transition:0.5s}
body button{background-color:var(--color-primary);color:var(--color-secondary);text-align:center;font-weight:600;padding:14px 30px;border:none;border-radius:var(--radius);outline:none;box-shadow:none;cursor:pointer}
body img{vertical-align:middle;border-style:none;max-width:100%;height:auto}
body .clearfix::after{content:"";display:block;clear:both}
body .margin-auto{margin:auto 0px}
body .row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0px -10px}
body .row .col-auto,body .row .col-half,body .row .col-full{position:relative;width:100%;padding:0px 10px}
@media (min-width:768px){
	body .row .col-last{order:2!important}
	body .row .col-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:100%}
	body .row .col-half{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}
	body .row .col-full{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}
}
body header{background-color:var(--color-secondary);padding:25px 10px;line-height:normal;z-index:1000;position:relative}
body header .navbar{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between}
body header .navbar .nav-logo img{height:25px}
body header .navbar .nav-menu li{list-style:none;display:inline-block;margin-right:15px}
body header .navbar .nav-menu li:last-child{margin-right:0px}
body header .navbar .nav-menu li:last-child a{background-color:var(--color-primary);color:var(--color-secondary);padding:10px 15px;border-radius:50px}
body header .navbar .nav-toggler{display:none}
body header .navbar #nav-toggler-check{display:none}
@media (max-width:768px){
	body header .navbar{flex-direction:row-reverse}
	body header .navbar .nav-toggler{display:block;color:var(--color-primary);font-size:40px}
	body header .navbar .nav-toggler span{display:block;background-color:var(--color-primary);height:2px;width:22px;margin:6px 0px}
	body header .navbar .nav-menu{display:none;background-color:var(--color-secondary);text-align:center;position:absolute;top:100%;left:0px;width:100%;padding:20px 10px 30px;z-index:999}
	body header .navbar .nav-menu li{display:block;margin:0px 0px 20px}
	body header .navbar .nav-menu li:last-child{margin:30px 0px 0px}
	body header .navbar #nav-toggler-check:not(:checked) ~ .nav-menu{height:0px}
	body header .navbar #nav-toggler-check:checked ~ .nav-menu{display:block;height:auto;overflow-y:auto;transition:0.5s}
}
body footer{background-color:var(--color-fade);font-size:var(--font-size-small);text-align:center;padding:10px 0px}
body footer .copyright{float:left}
body footer .menu{float:right}
body footer .menu li{display:inline-block;margin-left:10px}
body footer .menu li:last-child{margin-right:0px}
body .notification{background-color:#FFC83D;font-size:var(--font-size-small);text-align:center;padding:5px 5px 0px;line-height:normal}
body .content{margin:60px 0px}
body .headline{font-size:23px;font-weight:700;text-align:center;text-transform:capitalize;margin-bottom:20px;line-height:normal}
body .text-center{text-align:center}
body .hero{padding:200px 10px;color:var(--color-secondary);font-size:25px;font-weight:500;text-align:center;text-transform:uppercase;line-height:normal;background-image:linear-gradient(rgba(0,0,0,0.3)),url("hero.jpg")}
body .hero span{display:block;font-size:30px;font-weight:800;margin-top:20px}
body .about{margin:0px auto;max-width:700px}
body .status{text-align:center;-webkit-column-count:4;-moz-column-count:4;column-count:4;margin-top:50px}
body .status li{list-style:none;background-color:var(--color-secondary);font-weight:700;width:100%;padding:10px;border:1px solid var(--color-fade);border-radius:var(--radius)}
body .status li span{display:block;font-size:var(--font-size-small);font-weight:400}
body .overview{background-color:var(--color-secondary);padding:15px;margin-top:50px;border:1px solid var(--color-fade);border-radius:var(--radius)}
body .overview li{display:flex;align-items:center;justify-content:space-between;padding:10px 0px;border-bottom:1px solid var(--color-fade)}
body .overview li:last-child{padding-bottom:0px;border-bottom:none;font-weight:500}
body .about-img img{border-radius:var(--radius)}
body .form .form-control{font-family:var(--font-main);font-size:var(--font-size);width:100%!important;padding:10px 10px;margin:10px 0px;border:1px solid var(--color-fade);border-radius:var(--radius);outline:none;box-shadow:none}
body .form .form-control::placeholder{font-style:italic;opacity:0.6}
body .contact-us{background-color:var(--color-secondary);padding:15px;margin-top:50px;border:1px solid var(--color-fade);border-radius:var(--radius)}
body .contact-us li{list-style:none;margin-bottom:15px}
body .contact-us li:last-child{margin-bottom:0px}
body .contact-us li span{display:block;font-weight:600}
@media (max-width:768px){
	body footer .copyright,body footer .menu{float:none;margin:10px 0px}
	body .status{-webkit-column-count:2;-moz-column-count:2;column-count:2}
	body .status li{margin-bottom:15px}
}

body {
    font-family: Arial, sans-serif;
    margin: 20px;
    background-color: #f9f9f9;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
    color: #333;
}

.styled-table {
    width: 100%;
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.styled-table thead tr {
    background-color: #009879;
    color: #ffffff;
    text-align: left;
}

.styled-table th,
.styled-table td {
    padding: 12px 15px;
}

.styled-table tbody tr {
    border-bottom: 1px solid #dddddd;
}

.styled-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.styled-table tbody tr:last-of-type {
    border-bottom: 2px solid #009879;
}

.styled-table tbody tr:hover {
    background-color: #f1f1f1;
}

.btn {
    display: inline-block;
    padding: 10px 15px;
    margin: 5px;
    font-size: 14px;
    color: #fff;
    background-color: #009879;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}

.btn:hover {
    background-color: #007f63;
}

.btn-edit {
    background-color: #007bff;
}

.btn-edit:hover {
    background-color: #0056b3;
}

.btn-delete {
    background-color: #dc3545;
}

.btn-delete:hover {
    background-color: #a71d2a;
}

.btn-save {
    background-color: #28a745;
}

.btn-save:hover {
    background-color: #1e7e34;
}

/* Alert Messages */
.alert {
    padding: 15px 20px;
    margin: 20px 0;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    animation: slideDown 0.5s ease-out;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}