/* =========================================================
   AR GROUP DEVELOPERS
   MASTER BRANDING & UI SYSTEM
   ========================================================= */

/* =========================================================
   01. AR BRAND VARIABLES
   ========================================================= */

:root {

    /* AR BRAND COLORS */
    --ar-red: #E30613;
    --ar-red-dark: #B8000B;
    --ar-red-light: #FFF1F2;

    --ar-blue: #0057B8;
    --ar-blue-dark: #003F86;
    --ar-blue-light: #EEF6FF;

    --ar-sky: #00AEEF;
    --ar-sky-light: #EAF9FF;

    --ar-navy: #0B1F3A;
    --ar-navy-light: #132F52;

    --ar-white: #FFFFFF;
    --ar-bg: #F7F9FC;
    --ar-bg-soft: #F2F5F9;

    --ar-heading: #0B1F3A;
    --ar-text: #5F6B7A;
    --ar-border: #E6EAF0;

    /* =====================================================
       FORCE THE TEMPLATE THEME
       ===================================================== */

    --base-h: 356 !important;
    --base-s: 95% !important;
    --base-l: 46% !important;

    --base-two-h: 214 !important;
    --base-two-s: 68% !important;
    --base-two-l: 14% !important;

    --primary-h: 212 !important;
    --primary-s: 100% !important;
    --primary-l: 36% !important;

    --secondary-h: 214 !important;
    --secondary-s: 68% !important;
    --secondary-l: 14% !important;

    --dark: 214 68% 14% !important;

    --heading-color: 214 68% 14%;
    --body-color: 216 15% 32%;

    --section-bg: 216 33% 97%;
    --body-bg: 216 33% 97%;

    --header-box-shadow:
        0 8px 30px rgba(11, 31, 58, 0.08);

    --card-box-shadow:
        0 12px 35px rgba(11, 31, 58, 0.08);

    --card-horizontal-box-shadow:
        0 15px 40px rgba(11, 31, 58, 0.10);

    --card-blog-box-shadow:
        0 15px 40px rgba(11, 31, 58, 0.10);
}


/* =========================================================
   02. GLOBAL WEBSITE
   ========================================================= */

html {
    scroll-behavior: smooth;
}

body {
    background: var(--ar-bg);
    color: var(--ar-text);
    font-family: "Red Hat Display", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--ar-navy);
    font-weight: 700;
}

p {
    color: var(--ar-text);
}

a {
    color: var(--ar-red);
}

a:hover,
a:focus {
    color: var(--ar-blue);
}


/* =========================================================
   03. TEXT BRANDING
   ========================================================= */

.text--base {
    color: var(--ar-red) !important;
}

.text--primary {
    color: var(--ar-blue) !important;
}

.text--secondary {
    color: var(--ar-navy) !important;
}


/* =========================================================
   04. BACKGROUND SYSTEM
   ========================================================= */

.bg--base {
    background-color: var(--ar-red) !important;
}

.bg--primary {
    background-color: var(--ar-blue) !important;
}

.bg--secondary {
    background-color: var(--ar-navy) !important;
}

.bg--dark {
    background-color: var(--ar-navy) !important;
}

.section-bg {
    background-color: var(--ar-bg-soft) !important;
}


/* =========================================================
   05. HEADER
   ========================================================= */

.header {
    background-color: #FFFFFF !important;
    box-shadow: 0 8px 30px rgba(11, 31, 58, 0.08);
    border-bottom: 1px solid var(--ar-border);
}

.header.fixed-header {
    background-color: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid var(--ar-border);
    box-shadow: 0 8px 30px rgba(11, 31, 58, 0.10);
}

.navbar-brand.logo img {
    max-width: 190px;
}

.nav-menu .nav-link {
    color: var(--ar-navy) !important;
    font-weight: 600;
}

.nav-menu .nav-item.active .nav-link {
    color: var(--ar-red) !important;
}

.nav-menu .nav-item.active .nav-link::before {
    background-color: var(--ar-red) !important;
}

.nav-menu .nav-link:hover,
.nav-menu .nav-link:focus {
    color: var(--ar-red) !important;
}


/* =========================================================
   06. MOBILE NAVIGATION
   ========================================================= */

.navbar-toggler.header-button {
    color: var(--ar-navy) !important;
}

.nav-item:not(:last-child) {
    border-bottom-color: var(--ar-border) !important;
}

@media screen and (max-width: 991px) {

    .nav-link {
        color: var(--ar-navy) !important;
    }

    .nav-item.active .nav-link {
        color: var(--ar-red) !important;
    }

    .nav-link:hover,
    .nav-link:focus {
        color: var(--ar-red) !important;
    }
}


/* =========================================================
   07. MAIN RED BUTTON
   ========================================================= */

.btn--base {
    background: var(--ar-red) !important;
    border-color: var(--ar-red) !important;
    color: #FFFFFF !important;
    box-shadow: 0 8px 20px rgba(227, 6, 19, 0.18);
}

.btn--base:hover,
.btn--base:focus,
.btn--base:focus-visible {
    background: var(--ar-red-dark) !important;
    border-color: var(--ar-red-dark) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
}


/* =========================================================
   08. OUTLINE RED BUTTON
   ========================================================= */

.btn-outline--base {
    background: #FFFFFF !important;
    border: 1px solid var(--ar-red) !important;
    color: var(--ar-red) !important;
}

.btn-outline--base:hover,
.btn-outline--base:focus,
.btn-outline--base:focus-visible {
    background: var(--ar-red) !important;
    border-color: var(--ar-red) !important;
    color: #FFFFFF !important;
}


/* =========================================================
   09. SOFT RED BUTTON
   ========================================================= */

.btn-soft--base {
    background: var(--ar-red-light) !important;
    border: 1px solid #FFD5D8 !important;
    color: var(--ar-red) !important;
}

.btn-soft--base:hover,
.btn-soft--base:focus {
    background: var(--ar-red) !important;
    border-color: var(--ar-red) !important;
    color: #FFFFFF !important;
}


/* =========================================================
   10. BLUE BUTTON
   ========================================================= */

.btn--primary {
    background: var(--ar-blue) !important;
    border-color: var(--ar-blue) !important;
    color: #FFFFFF !important;
}

.btn--primary:hover,
.btn--primary:focus {
    background: var(--ar-blue-dark) !important;
    border-color: var(--ar-blue-dark) !important;
}


/* =========================================================
   11. OUTLINE BLUE
   ========================================================= */

.btn-outline--primary {
    background: var(--ar-blue-light) !important;
    border-color: var(--ar-blue) !important;
    color: var(--ar-blue) !important;
}

.btn-outline--primary:hover,
.btn-outline--primary:focus {
    background: var(--ar-blue) !important;
    border-color: var(--ar-blue) !important;
    color: #FFFFFF !important;
}


/* =========================================================
   12. DARK BUTTON
   ========================================================= */

.btn--dark {
    background: var(--ar-navy) !important;
    border-color: var(--ar-navy) !important;
    color: #FFFFFF !important;
}

.btn--dark:hover {
    background: var(--ar-navy-light) !important;
}


/* =========================================================
   13. SECTION HEADINGS
   ========================================================= */

.section-heading__subtitle {
    background: var(--ar-red-light) !important;
    color: var(--ar-red) !important;
    border: 1px solid #FFD5D8;
}

.section-heading__title {
    color: var(--ar-navy);
}

.section-heading__link {
    color: var(--ar-red) !important;
}

.section-heading__link:hover {
    color: var(--ar-blue) !important;
}


/* =========================================================
   14. BANNER / HERO
   ========================================================= */

.banner-content__subtitle {
    color: var(--ar-red) !important;
}

.banner-content__title {
    color: var(--ar-navy) !important;
}

.banner-info__item .title span {
    color: var(--ar-red) !important;
}

.banner-thumbs__thumb:nth-child(1)::after,
.banner-thumbs__thumb:nth-child(4)::after {
    border-color: var(--ar-red) !important;
}

.banner-thumbs__thumb:nth-child(2)::after,
.banner-thumbs__thumb:nth-child(3)::after {
    background-color: var(--ar-blue-light) !important;
}


/* =========================================================
   15. ABOUT SECTION
   ========================================================= */

.about-us__subheading {
    color: var(--ar-red) !important;
}

.about-us .btn {
    border-radius: 6px;
}


/* =========================================================
   16. PROPERTY CARDS
   ========================================================= */

.property--card,
.property-horizontal--card,
.blog--card {
    background: #FFFFFF;
    border: 1px solid var(--ar-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 25px rgba(11, 31, 58, 0.06);
    overflow: hidden;
    transition: all 0.25s ease;
}

.property--card:hover,
.property-horizontal--card:hover,
.blog--card:hover {
    transform: translateY(-4px);
    border-color: rgba(227, 6, 19, 0.18) !important;
    box-shadow: 0 18px 40px rgba(11, 31, 58, 0.12);
}

.property--card .card-title a,
.property-horizontal--card .card-title a,
.blog--card .card-title a {
    color: var(--ar-navy);
}

.property--card .card-title a:hover,
.property-horizontal--card .card-title a:hover,
.blog--card .card-title a:hover {
    color: var(--ar-red) !important;
}

.property--card .card-meta--one .card-meta__item i,
.property--card .card-meta--two .card-meta__item .text {
    color: var(--ar-red) !important;
}

.property--card .card-price {
    color: var(--ar-navy) !important;
}


/* =========================================================
   17. PROPERTY PROGRESS
   ========================================================= */

.card-progress__bar {
    background-color: #E8EDF3 !important;
}

.card-progress__thumb {
    background: linear-gradient(
        90deg,
        var(--ar-red),
        var(--ar-blue)
    ) !important;
}


/* =========================================================
   18. FEATURED PROPERTY
   ========================================================= */

.featured-property {
    background: #FFFFFF !important;
}

.featured-property .city-card__content {
    background: linear-gradient(
        135deg,
        rgba(11, 31, 58, 0.92),
        rgba(0, 87, 184, 0.80)
    ) !important;
}

.featured-property .city-card__title {
    color: #FFFFFF !important;
}

.featured-property .city-card__text {
    color: #FFFFFF !important;
}


/* =========================================================
   19. BLOG CARDS
   ========================================================= */

.blog--card .card-date {
    background: var(--ar-navy) !important;
}

.blog--card .card-date .day {
    color: var(--ar-red) !important;
}

.blog--card .card-meta__item i {
    color: var(--ar-red) !important;
}


/* =========================================================
   20. FORMS
   ========================================================= */

.form--label {
    color: var(--ar-navy) !important;
    font-weight: 600;
}

.form--control {
    background: #FFFFFF !important;
    border: 1px solid var(--ar-border) !important;
    color: var(--ar-navy) !important;
    border-radius: 8px !important;
}

.form--control:focus {
    border-color: var(--ar-red) !important;
    box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.08) !important;
}

.form--control::placeholder {
    color: #9AA5B1 !important;
}

.form--control[type=file]::file-selector-button {
    background: var(--ar-red) !important;
    border-color: var(--ar-red) !important;
    color: #FFFFFF !important;
}


/* =========================================================
   21. SELECT / DROPDOWN
   ========================================================= */

select.form--control:focus,
.form-select:focus {
    border-color: var(--ar-red) !important;
    box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.08) !important;
}


/* =========================================================
   22. CHECKBOX / RADIO
   ========================================================= */

.form--check .form-check-input:checked,
.form--radio .form-check-input:checked {
    background-color: var(--ar-red) !important;
    border-color: var(--ar-red) !important;
}

.form--check .form-check-label a,
.form--radio .form-check-label a {
    color: var(--ar-red);
}


/* =========================================================
   23. TABLES
   ========================================================= */

.table {
    background: #FFFFFF;
    border-radius: 10px;
    overflow: hidden;
}

.table thead tr th {
    color: var(--ar-navy) !important;
    background: var(--ar-blue-light);
    border-color: var(--ar-border) !important;
}

.table tbody tr td {
    border-color: var(--ar-border) !important;
}

.table tbody tr:hover td {
    background: #FFF7F8;
}

.table tbody tr td a {
    color: var(--ar-red);
}


/* =========================================================
   24. PAGINATION
   ========================================================= */

.pagination .page-item.active .page-link {
    background: var(--ar-red) !important;
    border-color: var(--ar-red) !important;
    color: #FFFFFF !important;
}

.pagination .page-item .page-link {
    color: var(--ar-navy);
    border-color: var(--ar-border);
    background: #FFFFFF;
}

.pagination .page-item .page-link:hover {
    color: #FFFFFF !important;
    background: var(--ar-red) !important;
    border-color: var(--ar-red) !important;
}


/* =========================================================
   25. BREADCRUMB
   ========================================================= */

.breadcrumb::before {
    background: linear-gradient(
        135deg,
        rgba(227, 6, 19, 0.05),
        rgba(0, 87, 184, 0.06)
    ) !important;
}

.breadcrumb__title {
    color: var(--ar-navy) !important;
}

.breadcrumb__text {
    color: var(--ar-red) !important;
}

.breadcrumb__link:hover {
    color: var(--ar-red) !important;
}


/* =========================================================
   26. PROPERTY DETAILS
   ========================================================= */

.property-details__block,
.property-details-sidebar__block {
    background: #FFFFFF !important;
    border: 1px solid var(--ar-border);
    border-radius: 12px !important;
    box-shadow: 0 8px 25px rgba(11, 31, 58, 0.05);
}

.property-details__title {
    color: var(--ar-navy) !important;
}

.property-details-meta__item .icon,
.property-details-amenities__item .text {
    color: var(--ar-red) !important;
}

.property-details__slider .slick-arrow {
    background: var(--ar-red) !important;
    color: #FFFFFF !important;
}

.property-details-sidebar .block-heading__subtitle {
    color: var(--ar-red) !important;
}

.property-details-card__content .price {
    color: var(--ar-red) !important;
}


/* =========================================================
   27. CONTACT PAGE
   ========================================================= */

.contact-card {
    background: #FFFFFF;
    border: 1px solid var(--ar-border) !important;
    box-shadow: 0 8px 25px rgba(11, 31, 58, 0.05);
}

.contact-card:hover {
    border-color: rgba(227, 6, 19, 0.35) !important;
}

.contact-card__icon {
    color: var(--ar-red) !important;
    border-color: var(--ar-red) !important;
    background: var(--ar-red-light);
}

.contact-card__title {
    color: var(--ar-navy);
}


/* =========================================================
   28. TESTIMONIAL
   ========================================================= */

.testimonial {
    background: #FFFFFF !important;
}

.testimonial-card {
    background: #FFFFFF;
    border: 1px solid var(--ar-border);
    border-radius: 14px;
}

.testimonial-card__content::before {
    color: var(--ar-red) !important;
    background: var(--ar-red-light) !important;
}

.testimonial-bottom {
    border-top-color: var(--ar-border) !important;
}


/* =========================================================
   29. SOCIAL ICONS
   ========================================================= */

.social-list__link {
    color: var(--ar-red) !important;
}

.social-list--soft .social-list__link {
    background: var(--ar-red-light) !important;
    color: var(--ar-red) !important;
}

.social-list--soft .social-list__link:hover,
.social-list--soft .social-list__link:focus {
    background: var(--ar-red) !important;
    color: #FFFFFF !important;
}


/* =========================================================
   30. FOOTER
   ========================================================= */

.footer {
    background: linear-gradient(
        135deg,
        var(--ar-navy),
        #062B57
    ) !important;
}

.footer-bottom {
    border-top-color: rgba(255, 255, 255, 0.12) !important;
}

.footer-item__title {
    color: #FFFFFF !important;
}

.footer-item__title::before {
    background: var(--ar-red) !important;
}

.footer-item__desc {
    color: rgba(255, 255, 255, 0.78) !important;
}

.footer-menu__link,
.footer-menu__link a {
    color: rgba(255, 255, 255, 0.85) !important;
}

.footer-menu__link:hover,
.footer-menu__link a:hover {
    color: #FFFFFF !important;
}

.footer-menu__link i {
    color: var(--ar-red) !important;
}

.footer-bottom .footer-link:hover,
.footer-bottom .footer-link:focus {
    color: var(--ar-red) !important;
}


/* =========================================================
   31. SUBSCRIBE FORM
   ========================================================= */

.subscribe-form .form--control {
    background: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.subscribe-form .btn {
    background: var(--ar-red) !important;
}


/* =========================================================
   32. DROPDOWN
   ========================================================= */

.dropdown-menu,
.user-info .user-info-dropdown {
    background: #FFFFFF !important;
    border: 1px solid var(--ar-border) !important;
    box-shadow: 0 15px 40px rgba(11, 31, 58, 0.12);
    border-radius: 10px !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--ar-red-light) !important;
    color: var(--ar-red) !important;
}


/* =========================================================
   33. USER DASHBOARD
   ========================================================= */

.dashboard .sidebar-menu {
    background: #FFFFFF !important;
    border: 1px solid var(--ar-border);
    box-shadow: 0 8px 25px rgba(11, 31, 58, 0.05);
}

.dashboard .sidebar-menu-list__item.active > a {
    background: var(--ar-red) !important;
    color: #FFFFFF !important;
}

.dashboard .sidebar-menu-list__link:hover {
    background: var(--ar-red) !important;
    color: #FFFFFF !important;
}

.dashboard .sidebar-menu-list__link.active {
    color: var(--ar-red) !important;
}

.dashboard .sidebar-submenu-list__item.active > a {
    color: var(--ar-red) !important;
    background: var(--ar-red-light) !important;
}

.dashboard .sidebar-submenu-list__link:hover {
    background: var(--ar-red-light) !important;
    color: var(--ar-red) !important;
}

.dashboard .dashboard-body {
    background: #FFFFFF !important;
    border: 1px solid var(--ar-border);
}

.dashboard .dashboard-widget {
    background: #FFFFFF !important;
    border: 1px solid var(--ar-border) !important;
    box-shadow: 0 8px 25px rgba(11, 31, 58, 0.05);
}

.dashboard .dashboard-widget:hover {
    border-color: rgba(227, 6, 19, 0.25) !important;
    transform: translateY(-2px);
}

.dashboard .dashboard-widget__icon {
    background: var(--ar-red-light) !important;
    color: var(--ar-red) !important;
}


/* =========================================================
   34. USER PROFILE
   ========================================================= */

.user-profile {
    border-top-color: var(--ar-border) !important;
}

.user-profile-info__icon {
    background: var(--ar-blue-light) !important;
}


/* =========================================================
   35. USER DROPDOWN
   ========================================================= */

.user-info .user-info-dropdown__link.active {
    background: var(--ar-red-light) !important;
    color: var(--ar-red) !important;
}

.user-info .user-info-dropdown__link:hover {
    background: var(--ar-red-light) !important;
    color: var(--ar-red) !important;
}


/* =========================================================
   36. MODALS
   ========================================================= */

.modal-content {
    border: 1px solid var(--ar-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 60px rgba(11, 31, 58, 0.18);
}

.modal-header {
    border-bottom: 1px solid var(--ar-border) !important;
}

.modal-footer {
    border-top: 1px solid var(--ar-border) !important;
}

.modal-title {
    color: var(--ar-navy) !important;
}


/* =========================================================
   37. ACCORDION
   ========================================================= */

.custom--accordion .accordion-button {
    color: var(--ar-navy) !important;
    background: #FFFFFF !important;
}

.custom--accordion .accordion-button:not(.collapsed) {
    color: var(--ar-red) !important;
    background: var(--ar-red-light) !important;
}

.custom--accordion .accordion-item {
    border-color: var(--ar-border) !important;
}


/* =========================================================
   38. SCROLL TOP
   ========================================================= */

.scroll-top {
    background: var(--ar-red) !important;
    color: #FFFFFF !important;
    box-shadow: 0 8px 20px rgba(227, 6, 19, 0.25);
}

.scroll-top:hover {
    background: var(--ar-blue) !important;
}


/* =========================================================
   39. TEXT SELECTION
   ========================================================= */

::selection {
    background: var(--ar-red) !important;
    color: #FFFFFF !important;
}


/* =========================================================
   40. COOKIE BOX
   ========================================================= */

.cookies-card {
    background: #FFFFFF !important;
    border: 1px solid var(--ar-border);
    box-shadow: 0 15px 45px rgba(11, 31, 58, 0.15);
}

.cookies-card__icon {
    background: var(--ar-red) !important;
    color: #FFFFFF !important;
}

.cookies-btn {
    color: var(--ar-red) !important;
}


/* =========================================================
   41. IMAGE / CARD HOVER
   ========================================================= */

.property--card img,
.blog--card img,
.property-details-card img {
    transition: transform 0.35s ease;
}

.property--card:hover .card-img-top img,
.blog--card:hover .card-img img {
    transform: scale(1.03);
}


/* =========================================================
   42. RED-BLUE BRAND ACCENT
   ========================================================= */

.ar-brand-accent {
    background: linear-gradient(
        90deg,
        var(--ar-red),
        var(--ar-blue)
    );
}

.ar-brand-text {
    background: linear-gradient(
        90deg,
        var(--ar-red),
        var(--ar-blue)
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* =========================================================
   43. MOBILE UI
   ========================================================= */

@media screen and (max-width: 767px) {

    .property--card,
    .property-horizontal--card,
    .blog--card,
    .contact-card,
    .testimonial-card {
        border-radius: 12px !important;
    }

    .btn--base,
    .btn--primary {
        box-shadow: 0 6px 15px rgba(11, 31, 58, 0.10);
    }

    .section-heading__title {
        color: var(--ar-navy);
    }
}


/* =========================================================
   44. FOCUS ACCESSIBILITY
   ========================================================= */

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--ar-red) !important;
    outline-offset: 2px;
}


/* =========================================================
   45. BRAND CONSISTENCY
   ========================================================= */

hr {
    border-color: var(--ar-border) !important;
}

blockquote {
    border-left: 4px solid var(--ar-red);
    background: var(--ar-red-light);
    padding: 15px 20px;
    border-radius: 0 8px 8px 0;
}