@font-face {
    font-family: 'Arlon';
    src: url('font/Arlon-Regular.eot');
    src: url('font/Arlon-Regular.eot?#iefix') format('embedded-opentype'),
        url('font/Arlon-Regular.woff2') format('woff2'),
        url('font/Arlon-Regular.woff') format('woff'),
        url('font/Arlon-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'ArlonSemiBold'; /* The name you'll use in CSS */
    src: url('font/arlon-semibold.woff') format('woff'); /* Path to your font file */
    font-weight: normal; /* Set font weight (if it's a regular font) */
    font-style: normal;  /* Set font style */
    font-display: swap;  /* Optional: Improves performance */
}

button {
    font-family: 'ArlonSemiBold', sans-serif !important;
}

h1, h2, h3, h4 {
    font-family: 'ArlonSemiBold', sans-serif;
}

.arlon-regular {
    font-family: 'Arlon', sans-serif;
}

.price-main {
    font-family: 'ArlonSemiBold', sans-serif;
}

.rent-height {
    min-height: 196px;
}

.text-blue-600 {
    --tw-text-opacity: 1;
    color: rgb(0 96 170 / var(--tw-text-opacity, 1)) !important;
}

.bg-blue-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(0 96 170 / var(--tw-bg-opacity, 1)) !important;
}

.hover\:text-blue-600:hover {
    --tw-text-opacity: 1;
    color: rgb(0 96 170 / var(--tw-text-opacity, 1)) !important;
}

.hero-img{
    filter: grayscale(100%);
}

.hero-img-gradient{
        background-image: linear-gradient(to top, rgb(10 90 229 / 70%) 0%, rgb(9 109 143 / 70%) 70%);
}

.above-footer {
    background-color: #0060AA !important; 
}