@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap');

:root {
    --header-top-bg: #ee8022;
    --header-nav-bg: #FFEBEB;
    --header-btn-bg: #ee8022;
    --header-text-color: #000000;
    --primary-blue: #1B75BC;
    --highlight-salmon: #ee8022;
    --font-heading: 'Rubik', sans-serif;
    --font-serif: 'DM Serif Display', serif;
    --font-body: 'Rubik', sans-serif;
}

body {
    font-family: var(--font-body);
}

h1,
h2,
h3,
h4,
h5,
h6,
.title,
.font-heading {
    font-family: var(--font-serif) !important;
}

/* Top Bar */
.tf-top-bar {
    background-color: var(--header-top-bg) !important;
    color: #fff;
    padding: 10px 0;
}

.tf-top-bar a,
.tf-top-bar p,
.tf-top-bar i {
    color: #fff !important;
}

/* Header */
.header.style-4 {
    background-color: var(--header-nav-bg) !important;
    box-shadow: none;
    /* or minimal shadow */
}

.main-menu .navigation>li>a {
    font-family: var(--font-heading) !important;
    font-weight: 500 !important;
    color: var(--header-text-color) !important;
}

/* Buttons */
.tf-btn.style-orange-red {
    background-color: var(--header-btn-bg) !important;
    color: #000 !important;

    font-family: var(--font-heading);
    font-weight: 500;
    padding: 12px 24px;
    border-radius: 8px;
    /* Match clickandrent style roughly */
}

.tf-btn.style-orange-red:hover {
    opacity: 0.9;
    color: #000 !important;
}

/* Mobile Button */
.mobile-button i {
    color: var(--header-text-color) !important;
}

/* Blue Highlight */
.text-highlight-blue {
    color: var(--primary-blue) !important;
}

/* Salmon Highlight (Two-tone) */
.text-highlight-salmon {
    color: var(--highlight-salmon) !important;
}

/* Adjustments for Layout to match ClickAndRent */
.header-right .box-user .user svg path {
    stroke: var(--header-text-color) !important;
}

/* Hide top bar contact items if we want to match the "Banner" style more closely or keep them but styled nicely */
.top-bar-info li p,
.top-bar-info li i {
    color: #fff;
}