html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.btn-primary{
    background-color:#6f42c1;
    border:none;
}

.btn-info{
    background-color:#20c997;
    border:none;
}

.btn-danger{
    background-color:#dc3545;
}
table{
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
}

th{
    background-color:#212529;
    color:white;
}

td{
    vertical-align:middle;
}

body{
    background-color:#f8f9fa;
}

img{
    border-radius:10px;
    object-fit:cover;
}

body{
    background-color:#f5f7fb;
    font-family:'Segoe UI',sans-serif;
}

.navbar{
    background:white !important;
    box-shadow:0 2px 10px rgba(0,0,0,0.05);
}

.navbar-brand{
    font-size:1.4rem;
    font-weight:700;
}

.card{
    transition:0.3s ease;
}

.card:hover{
    transform:translateY(-5px);
}

.btn{
    font-weight:600;
}

.btn-dark{
    background:#111827;
    border:none;
}

.table{
    background:white;
    border-radius:15px;
    overflow:hidden;
}

table th{
    background:#111827 !important;
    color:white !important;
}

img{
    border-radius:10px;
}


/* ================= ABOUT PAGE ================= */

.about-hero{
    text-align:center;
    margin-bottom:60px;
}

.about-hero h1{
    font-size:3rem;
    font-weight:700;
    color:#111827;
}

.about-hero p{
    color:#6b7280;
    font-size:1.1rem;
}

.about-card{
    background:white;
    border-radius:24px;
    padding:40px;
    box-shadow:0 4px 20px rgba(0,0,0,0.06);
    margin-bottom:35px;
    transition:0.3s ease;
}

.about-card:hover{
    transform:translateY(-5px);
}

.about-card h2{
    font-weight:700;
    margin-bottom:25px;
    color:#111827;
}

.about-card p{
    color:#6b7280;
    line-height:1.8;
}

.feature-box{
    background:#f9fafb;
    border-radius:18px;
    padding:20px;
    margin-bottom:15px;
    transition:0.3s ease;
}

.feature-box:hover{
    background:#111827;
    color:white;
}

.feature-box:hover p{
    color:#e5e7eb;
}

.tech-box{
    background:#f9fafb;
    border-radius:18px;
    padding:25px;
    text-align:center;
    transition:0.3s ease;
}

.tech-box:hover{
    transform:scale(1.03);
}

.tech-box h5{
    font-weight:700;
    margin-bottom:10px;
}

.tech-box p{
    color:#6b7280;
}

.developer-box{
    text-align:center;
}

.developer-box h3{
    font-weight:700;
    margin-bottom:15px;
}

.developer-box p{
    color:#6b7280;
}

/* ================= GENERAL UI ================= */

body{
    background:#f5f7fb;
    font-family:'Segoe UI',sans-serif;
}

.navbar{
    background:white !important;
    box-shadow:0 2px 10px rgba(0,0,0,0.05);
}

.navbar-brand{
    font-weight:700;
    font-size:1.3rem;
}

.card{
    border:none !important;
    border-radius:24px !important;
}

.btn{
    font-weight:600;
    border-radius:999px !important;
}

.table{
    background:white;
    border-radius:20px;
    overflow:hidden;
}

.table th{
    background:#111827 !important;
    color:white !important;
    border:none;
}

.table td{
    vertical-align:middle;
}

img{
    border-radius:12px;
}