@font-face {
    font-family: 'Azo Sans';
    src: url('../includes/fonts/AzoSans-Light.otf') format('opentype');
    font-weight: 300;
    /* Light weight */
    font-style: normal;
}

@font-face {
    font-family: 'Azo Sans';
    src: url('../includes/fonts/AzoSans-Regular.otf') format('opentype');
    font-weight: 400;
    /* Regular weight */
    font-style: normal;
}

@font-face {
    font-family: 'Azo Sans';
    src: url('../includes/fonts/AzoSans-Medium.otf') format('opentype');
    font-weight: 500;
    /* Medium weight */
    font-style: normal;
}

@font-face {
    font-family: 'Azo Sans';
    src: url('../includes/fonts/AzoSans-Bold.otf') format('opentype');
    font-weight: 700;
    /* Bold weight */
    font-style: normal;
}

/* Define Custom Properties (CSS Variables) */
:root {
    --main-font: 'Azo Sans', sans-serif;
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-bold: 700;
    --black: #000000;
    --raisin-black: #231f20ff;
    --onyx: #404041ff;
    --davys-gray: #58585aff;
    --dim-gray: #6d6e71ff;
    --gray: #818285ff;
    --silver: #bdbec0ff;
    --platinum: #e7e8e9ff;
    --white: #ffffffff;
}

/* hide elementor page header */
.page-header {
    display: none;
}

/* Customize the carousel size */
.membership-carousel {
    background: black;
    margin: auto;
}

.carousel-cell {
    width: 24%;
    /* Show 3 items per row on larger screens */
    background-size: cover;
    background-position: center;
    padding: 10px;
    box-sizing: border-box;
}

.carousel-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Extra-large screens (1500px and up) */
@media (min-width: 1500px) {
    .carousel-cell {
        width: 25%;
        /* 3 items per row */
    }
}

/* Large screens (1200px to 1499px) */
@media (max-width: 1499px) {
    .carousel-cell {
        width: 33.33%;
        /* 2–3 items per row */
    }
}

@media (max-width: 1200px) {
    .carousel-cell {
        width: 35%;
        /* Show 1 item per row on small screens */
    }
}

@media (max-width: 1000px) {
    .carousel-cell {
        width: 38%;
        /* Show 1 item per row on small screens */
    }
}

@media (max-width: 768px) {
    .carousel-cell {
        width: 54%;
        /* Show 1 item per row on small screens */
    }
}


/* Media query for small screens (mobile devices) */
@media (max-width: 576px) {
    .carousel-cell {
        width: 90%;
        /* Show 1 item per row on small screens */
    }
}

/* Media query for small screens (mobile devices) */
@media (max-width: 400px) {
    .carousel-cell {
        width: 85%;
        /* Show 1 item per row on small screens */
    }
}