:root {
    --primary-color: #014599;
    --secondary-color: #e20612;
    --green-color: #4CAF50;
    --background-color: #ffffff;
    --text-color: #333333;
    --font-family: "Montserrat", sans-serif;
    --bebas-font: "Bebas Neue", sans-serif;
    --transition: all 0.3s ease;
    --border-radius: 8px;
    --text-dark: #1f2d3d;
    --text-light: #6b7c93;
    --bg-soft: #f8fafc;
    --card-bg: #ffffff;
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.06);
    --shadow-hover: 0 20px 50px rgba(0, 0, 0, 0.12);
}

/* Buttons */
.btn-primary,
.btn-secondary {
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    /* border-radius: var(--border-radius); */
    transition: var(--transition);
}

.btn-primary {
    background: var(--secondary-color);
    color: #fff;
}

.btn-primary:hover {
    background: var(--green-color);
}

.btn-secondary {
    background: var(--primary-color);
    color: #fff;
}

.btn-secondary:hover {
    background: var(--secondary-color);
}

.d-flex {
    display: flex;
}

.align-item-center {
    display: flex;
    align-items: center;
}

.justify-content-between {
    display: flex;
    justify-content: space-between;
}

.justify-content-between-center {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.gap10 {
    gap: 10px;
}

.gap20 {
    gap: 20px;
}

.gap30 {
    gap: 30px;
}

.gap40 {
    gap: 40px;
}