.light-background {
  --background-color: #f5f9ff;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #060606;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #252525;
  --contrast-color: #ffffff;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

.brand-filter{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
}

.brand-filter button{
    border:none;
    background:#f5f5f5;
    padding:8px 15px;
    border-radius:30px;
    transition:.3s;
}

.brand-filter button.active,
.brand-filter button:hover{
    background:#0d6efd;
    color:#fff;
}

.brand-card{
    border:1px solid #eee;
    border-radius:15px;
    padding:30px;
    text-align:center;
    transition:.3s;
    background:#fff;
    height:100%;
}

.brand-card:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 25px rgba(0,0,0,.12);
}

.brand-card img{
    height:90px;
    width:100%;
    object-fit:contain;
    margin-bottom:20px;
}

.brand-card h6{
    margin:0;
    font-weight:600;
}

.brand-card:hover img{
    transform:scale(1.08);
}

.brand-card h6{
    margin:0;
    font-weight:600;
    color:#333;
}

.portfolio-filters{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
    list-style:none;
    padding:0;
}

.portfolio-filters li{
    padding:10px 24px;
    border:1px solid #ddd;
    border-radius:50px;
    cursor:pointer;
    transition:.3s;
}

.portfolio-filters li:hover,
.portfolio-filters .filter-active{
    background:#0d6efd;
    color:#fff;
    border-color:#0d6efd;
}

:root {
    color-scheme: light;
}

html,
body {
    color-scheme: light;
    background: #fff;
    color: #212529;
}

input,
select,
textarea,
.form-control,
.form-select {
    background-color: #fff !important;
    color: #212529 !important;
    border: 1px solid #ced4da !important;
}

input::placeholder {
    color: #6c757d !important;
}