@font-face {
    display: swap;
    font-style: normal;
    font-family: 'Bricolage Grotesque';
    font-weight: 100 900;
    src: url('../fonts/BricolageGrotesque.ttf') format('truetype');
}

.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
    font-weight: bold;
    font-family: 'Bricolage Grotesque', 'Noto Sans Arabic', sans;
}

.lead {
    font-size: 1.25rem;
}

@media screen and (max-width: 768px) {
    .display-1 {
        font-size: 3.5rem !important;
    }

    .display-2 {
        font-size: 3rem !important;
    }

    .display-3 {
        font-size: 2.75rem !important;
    }

    .display-4 {
        font-size: 2.5rem !important;
    }

    .display-5 {
        font-size: 2.25rem !important;
    }

    .display-6 {
        font-size: 2rem !important;
    }

    .lead {
        font-size: 1rem !important;
    }
}

/* ---------------------------------
 * Utility Classes
 * --------------------------------- */

.text-underline-primary {
    text-decoration: underline;
    text-decoration-color: rgba(var(--tblr-azure-rgb), 0.2);
}

.text-underline-secondary {
    text-decoration: underline;
    text-decoration-color: rgba(var(--tblr-secondary-color-rgb), 0.2);
}

.text-underline-success {
    text-decoration: underline;
    text-decoration-color: rgba(var(--tblr-success-color-rgb), 0.2);
}

.text-underline-danger {
    text-decoration: underline;
    text-decoration-color: rgba(var(--tblr-danger-color-rgb), 0.2);
}

.text-underline-warning {
    text-decoration: underline;
    text-decoration-color: rgba(var(--tblr-warning-color-rgb), 0.2);
}

.text-underline-info {
    text-decoration: underline;
    text-decoration-color: rgba(var(--tblr-info-color-rgb), 0.2);
}

.text-underline-azure {
    text-decoration: underline;
    text-decoration-color: rgba(var(--tblr-azure-rgb), 0.2);
}

/* ---------------------------------
 * Base Layout
 * --------------------------------- */

.hero-section {
    display: flex;
    align-items: center;
    justify-content: center;

    /* Background Image */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1044%26quot%3b)' fill='none'%3e%3cpath d='M 0%2c146 C 96%2c178.8 288%2c300 480%2c310 C 672%2c320 768%2c196.4 960%2c196 C 1152%2c195.6 1344%2c285.6 1440%2c308L1440 560L0 560z' fill='rgba(249%2c 241%2c 225%2c 1)'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1044'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

[data-bs-theme='dark'] .hero-section {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1044%26quot%3b)' fill='none'%3e%3cpath d='M 0%2c146 C 96%2c178.8 288%2c300 480%2c310 C 672%2c320 768%2c196.4 960%2c196 C 1152%2c195.6 1344%2c285.6 1440%2c308L1440 560L0 560z' fill='rgba(46%2c 38%2c 24%2c 1)'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1044'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
}

.navbar .nav-item .nav-link {
    color: var(--tblr-body-color);
    font-weight: 500;
}

footer .nav .nav-item .nav-link:hover {
    background-color: unset;
    color: var(--tblr-primary);
}