/* Font face definitions for Aptos font */
@font-face {
    font-family: 'Aptos';
    src: url('../fonts/Aptos.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Aptos';
    src: url('../fonts/Aptos-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Aptos';
    src: url('../fonts/Aptos-Black.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

/* Color definitions */

.background_off_white {
    background: #f5f5f5;
}

.color_white {
    color: white;
}

.color_black {
    color: black;
}

.color_main {
    color: #0dc9fc;
}

.button_main {
    background-color: #0dc9fc;
}

.color_secondary {
    color: #4E17A9;
}

.background_color_secondary {
    background-color: #4E17A9;
}

.button_secondary {
    background-color: #4E17A9;
}

.color_tertiary {
    color: #AC08C8;
}

.background_tertiary {
    background-color: #AC08C8;
}

.color_gradient {
    background: linear-gradient(90deg, #4317AA 0%, #B607CB 100%);
}

.button_gradient {
    background: linear-gradient(90deg, #4317AA 0%, #B607CB 100%);
}

.background_gradient {
    background: linear-gradient(180deg, #3A44CA 0%, #12C6FB 100%);
}

.fade-image-mask {
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 40%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 40%
    );
}

.color_light_1 {
    color: #9FA2F5;
}

.background_color_light_1 {
    background-color: #9FA2F5;
}

.color_light_2 {
    color: #0DC9FC;
}

.background_color_light_2 {
    background-color: #0DC9FC;
}

.color_light_3 {
    color: #DDDAEA;
}

.background_color_light_3 {
    background-color: #efefef;
}

.color_dark_1 {
    color: #20005F;
}

.background_color_dark_1 {
    background-color: #20005F;
}

.background_color_dark_2 {
    background-color: #3A41CA;
}

/* Button base definitions */

.button {
    /* Shape and size */
    border-radius: 9999px; /* or use 50px for fixed radius */
    padding: 10px 20px;    /* vertical & horizontal padding */
    
    /* Remove default button styling */
    border: none;
    outline: none;
    
    /* Text styling */
    font-size: 16px;
    
    /* Optional hover effect */
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Hover state */
.button:hover {
    transform: translateY(-1px);
}

/* Active state (when clicked) */
.button:active {
    transform: translateY(1px);  /* pressed down effect */
}