@import 'var.css';


/* custom btn */
.btn-active {
    background-color: var(--orange) !important;
    color: white !important;
}
.btn-outline-orange {
    background-color: transparent;
    border: 2px solid var(--orange);
    color: var(--orange);
}
.btn-outline-orange:hover {
    background-color: var(--orange);
    color: white;
}
.btn-orange {
    background-color: var(--orange);
    color: white;
}
.btn-orange:hover {
    background-color: var(--orange-hover);
    color: white;
}
.btn-white {
    background-color: var(--card);
    color: var(--text);
}
.btn-white:hover {
    background-color: var(--card-hover);
    color: var(--text);
}
.btn-aqua {
    background-color: var(--aqua);
    color: white;
}
.btn-aqua:hover {
    background-color: transparent;
    border: 1px solid var(--aqua);
    color: var(--aqua);
}
.btn-outline-aqua {
    background-color: transparent;
    border: 1px solid var(--aqua);
    color: var(--aqua);
}
.btn-outline-aqua:hover {
    background-color: var(--aqua);
    color: white;
}

/* custom */
.text-orange {
    color: var(--orange);
}
.bg-orange {
    background-color: var(--orange);
}

/* custom container */
.mt-container {
    margin-top: 100px;
}
.container-content {
    min-height: 80vh;
}

.d-lg-none,
.d-sm-none {
    display: block !important;
}
.d-lg-block,
.d-sm-block {
    display: none !important;
}
.w-lg-100 {
    width: auto;
}

@media (max-width: 576px) {
    .d-sm-none {
        display: none !important;
    }
    .d-sm-block {
        display: block !important;
    }
}
@media (max-width: 992px) {
    .d-lg-none {
        display: none !important;
    }
    .d-lg-block {
        display: block !important;
    }
    .w-lg-100 {
        width: 100%;
    }
}


/* custom card */
.card {
    background-color: var(--card);
    color: var(--text);
    border: none;
    border-radius: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.fs-small {
    font-size: 12px;
}
.blue-highlight {
    color: var(--aqua);
}