@import url('clash-display.css');
@import url('sofia.css');

/* Font Faces */
@font-face {
    font-family: Gilroy-Regular;
    src: url('../fonts/gilroy/Gilroy-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: Gilroy-Medium;
    src: url('../fonts/gilroy/Gilroy-Medium.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: Gilroy-Bold;
    src: url('../fonts/gilroy/Gilroy-Bold.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: Gilroy-SemiBold;
    src: url('../fonts/gilroy/Gilroy-SemiBold.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
}

/* Base Styles */
a {
    text-decoration: none;
    font-family: Gilroy-Regular;
    color: #fff;
}

/* Button Styles */
.main-button-sofia {
    font-family: Gilroy-SemiBold;
    color: #fff;
    background-color: #C1272D;
    border: 1px solid #C1272D;
    border-radius: 5px;
    font-size: 0.9rem;
}

.main-button-sofia:hover {
    color: white;
    background-color: #A62127;
    border: 1px solid #A62127;
}

/* Text Styles */
.subtext-gilroy {
    font-family: Gilroy-Regular;
    font-size: 1.1rem;
    color: rgba(102, 102, 102, 1);
}

.text-clash-bold-body-head {
    font-family: ClashDisplay-Variable !important;
    color: rgba(27, 32, 32, 1) !important;
    font-size: 2.5rem !important;
    font-weight: 600 !important;
}

.markdown-paragragh p {
    padding-top: 1rem;
}

.text-head h1 span,
.text-head h2 span {
    font-family: ClashDisplay-Variable;
    color: rgba(27, 32, 32, 1);
    font-size: 2.5rem !important;
    font-weight: 600;
}

.text-clash-body-explore {
    font-family: ClashDisplay-Variable;
    color: rgba(225, 225, 225, 1);
    font-size: 1rem;
    font-weight: 600;
}

/* Hero Image */
.hero-img-backend {
    /* Add any specific styles for hero images */
}

/* Utility Classes */
.text-dark {
    color: #151515 !important;
}

.text-capitalize {
    text-transform: capitalize !important;
}

.rounded-pill {
    border-radius: 50rem !important;
}

/* Responsive Design */
@media (max-width: 576px) {
    .text-clash-bold-body-head {
        font-size: 2rem !important;
        line-height: 2rem !important;
    }
    
    .subtext-gilroy {
        font-size: 1rem;
    }
    
    .hero-img-backend {
        border-radius: 0 !important;
    }
}

/* Add other media queries and styles as needed */