/* Main slider container */
 .eh-main-slider {
     width: 100%;
     height: 500px;
     /* 🔧 Set fixed height (change as needed) */
     /* border-radius: 12px; */
     overflow: hidden;
     /* Important for cropping */
 }

 /* Make it responsive on mobile */
 @media (max-width: 768px) {
     .eh-main-slider {
         height: 277px;
     }
 }

 /* Make images fill the slider area perfectly */
 .eh-main-slider img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     /* 🔥 THIS makes them cover the area */
     /* border-radius: 12px; */
 }


 .eh-thumb-row {
     display: flex;
     gap: 5px;
     margin-top: 12px;
     overflow-x: auto;
 }

 .eh-thumb img {
     border: 3px solid transparent;
     /* border-radius: 6px; */
     cursor: pointer;
     transition: 0.1s;
     width: 100px;
     height: auto;
 }

 .eh-thumb.active-thumb img {
     border-color: #c1c2c6 !important;
 }

/* Slider Buttons Container */
.eh-main-slider .slick-prev,
.eh-main-slider .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: #000 !important; /* Black background */
    border: none !important;
    border-radius: 0 !important; /* Square shape */
    display: flex !important;
    justify-content: center;
    align-items: center;
    z-index: 20;
    cursor: pointer;
    padding: 0;
    
    /* --- THE FIX: Hides the default 'Previous/Next' text --- */
    font-size: 0 !important; 
    color: transparent !important; 
}

/* Stick them exactly to the edges */
.eh-main-slider .slick-prev {
    left: 0;
}

.eh-main-slider .slick-next {
    right: 0;
}

/* Arrow Icons */
.eh-main-slider .slick-prev:before,
.eh-main-slider .slick-next:before {
    color: #fff !important; /* White arrow icon */
    font-size: 20px !important; /* Brings the arrow size back up */
    opacity: 1;
    line-height: 1;
}

/* Optional: Add hover effect to icons so they feel responsive */
.eh-main-slider .slick-prev:hover:before,
.eh-main-slider .slick-next:hover:before {
    opacity: 0.8;
}

 /* GRID */
 .eh-gallery-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 3px;
 }

 /* Image style */
 .eh-gallery-item img {
     width: 295px !important;
     height: 221px !important;
     object-fit: cover;
     display: block;
     /* border-radius: 4px; */
 }

 /* Overlay */
 .eh-gallery-item {
     position: relative;
 }

 .eh-overlay {
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, 0.55);
     opacity: 0;
     display: flex;
     align-items: end;
     justify-content: end;
     gap: 12px;
     transition: 0.25s;
 }

 .eh-overlay .eh-btn {
     margin-bottom: 10px;
     margin-right: 10px;

 }

 .eh-overlay .eh-btn:hover {
     background-color: white;
     color: black;
     transition: all 0.1s ease;
 }

 .left-btn {
     margin-bottom: 10px;
     margin-right: -10px !important;
 }

 .eh-gallery-item:hover .eh-overlay {
     opacity: 1;
 }

 /* Buttons */
 .eh-btn {
     width: 42px;
     height: 42px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: black;
     border: none;
     color: white;
     font-size: 18px;
     cursor: pointer;
     border-radius: 4px;
 }

 /* .eh-btn:hover{
    background-color:white;
    color:black;
} */
 .lg-backdrop.in {
     opacity: 0.89 !important;
 }

 .lg-outer .lg-object {
     display: inline-block;
     vertical-align: middle;
     max-width: 1024px !important;
     max-height: 666px !important;
     width: auto;
     height: auto;
     position: relative;
 }

 @media (max-width: 1024px) {
     .eh-gallery-item img {
         width: 240px !important;
         height: 180px !important;
         object-fit: cover;
         display: block;
         /* border-radius: 4px; */
     }
 }

 @media (max-width: 425px) {
     .eh-gallery-item img {
         width: 140px !important;
         height: 104px !important;
         object-fit: cover;
         display: block;
         /* border-radius: 4px; */
     }
 }


 /* seach form */
 .eh-page-spinner {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 60px;
     height: 60px;
     border: 6px solid rgba(0, 0, 0, 0.1);
     border-top: 6px solid #00B4D8;
     border-radius: 50%;
     animation: spin 0.8s linear infinite;
     z-index: 99999;
     display: none;
     background-color: white;
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
 }

 .eh-spinner-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(255, 255, 255, 0.6);
     z-index: 99998;
     display: none;
 }

 @keyframes spin {
     0% {
         transform: translate(-50%, -50%) rotate(0deg);
     }

     100% {
         transform: translate(-50%, -50%) rotate(360deg);
     }
 }

 /* Existing Styles */
 .estate-search-container {
     width: 100%;
     position: relative;
     box-sizing: border-box;
 }

 .estate-search-container * {
     box-sizing: border-box;
 }

 .estate-mobile-trigger,
 .estate-modal-header,
 .estate-modal-overlay,
 .mobile-label {
     display: none;
 }

 .mobile-only-field {
     display: none;
 }

 .estate-search-form {
     width: 100%;
 }

 .estate-search-inner {
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
     gap: 10px;
     width: 100%;
 }

 .keyword-group {
     flex-grow: 1;
     min-width: 200px;
 }

 .btn-group {
     flex: 0 0 auto;
     display: flex;
     gap: 10px;
 }

 .estate-input,
 .estate-select {
     width: 100%;
     padding: 0 15px;
     border: none;
     border-radius: 4px;
     font-size: 14px;
     background: #fff;
     color: #333;
     outline: none;
     height: 40px;
 }

 .estate-select {
     appearance: none;
     background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
     background-repeat: no-repeat;
     background-position: right 12px top 50%;
     background-size: 10px auto;
     cursor: pointer;
 }

 .estate-btn-search {
     background-color: #00B4D8;
     color: white;
     border: none;
     padding: 0 30px;
     height: 40px;
     border-radius: 4px;
     font-weight: 600;
     cursor: pointer;
     white-space: nowrap;
 }

 .estate-btn-search:hover {
     background-color: #0096B4;
 }

 .estate-btn-clear {
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: #fff;
     color: #333;
     border: none;
     padding: 0 20px;
     height: 40px;
     border-radius: 4px;
     text-decoration: none;
     font-weight: 500;
     white-space: nowrap;
     cursor: pointer;
 }

 .estate-btn-clear:hover {
     background-color: #f5f5f5;
 }

 .estate-btn-more {
     height: 40px;
     padding: 0 14px;
     border-radius: 4px;
     border: 1px solid #ddd;
     background: #fff;
     cursor: pointer;
     font-weight: 600;
 }

 .estate-btn-features-toggle {
     background: transparent;
     padding: 0;
     margin-right: 5px;
 }

 .estate-btn-more:hover {
     background: #f6f6f6;
 }

 .estate-btn-more svg {
     transition: 0.2s ease;
     color: #333;
 }

 .estate-btn-more:hover svg {
     color: #00B4D8;
 }

 .estate-btn-features-toggle:hover {
     background: transparent !important;
 }

 .estate-btn-more:focus {
     outline: none !important;
     background: #fff !important;
 }

 .estate-btn-features-toggle:focus {
     outline: none !important;
     background: transparent !important;
 }

 .feature-div {
     display: flex;
 }

 .feature-btn {
     color: #fff;
     font-weight: 700;
     font-size: 15px;
     font-family: roboto;
 }

 .features-list label {
     color: #fff;
     font-size: 15px;
     font-weight: 500;
     font-family: roboto;
 }

 .collapsible {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.35s ease-in-out;
 }

 .collapsible.is-open {
     max-height: 1200px;
 }

 #desktop-features .features-list {
     display: grid !important;
     grid-template-columns: repeat(4, minmax(200px, 1fr)) !important;
     gap: 18px 40px !important;
     margin-top: 15px !important;
 }

 #desktop-features label {
     display: flex !important;
     align-items: center !important;
     gap: 6px !important;
     color: #fff !important;
     font-size: 15px !important;
     font-weight: 500 !important;
     font-family: roboto !important;
     padding-bottom: 15px;
 }

 #desktop-features input[type="checkbox"] {
     width: 18px !important;
     height: 18px !important;
 }

 #mobile-features label {
     display: flex !important;
     align-items: center !important;
     gap: 6px !important;
     color: #fff !important;
     font-size: 15px !important;
     font-weight: 500 !important;
     font-family: roboto !important;
 }

 #mobile-features input[type="checkbox"] {
     width: 18px !important;
     height: 18px !important;
 }

 #mobile-features .features-list {
     display: grid !important;
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
     gap: 18px 20px !important;
     margin-top: 15px !important;
 }

 @media (max-width: 900px) {
     .estate-mobile-trigger {
         display: flex;
         align-items: center;
         width: 100%;
         padding: 15px 20px;
         background-color: #fff;
         color: #636363;
         border: none;
         border-radius: 4px;
         font-size: 16px;
         font-weight: 400;
         cursor: pointer;
     }

     .my-icons {
         display: flex;
         align-items: center;
         gap: 5px;
     }

     .estate-search-form {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100vh;
         background-color: #004274;
         z-index: 100000;
         padding: 25px;
         flex-direction: column;
         transform: translateY(100%);
         transition: transform 0.3s ease-in-out;
         overflow-y: auto;
         display: flex;
     }

     .estate-search-container.is-active .estate-search-form {
         transform: translateY(0);
     }

     .mobile-only-field {
         display: block;
         margin-bottom: 10px;
     }

     .mobile-label {
         display: block;
         color: white;
         margin-bottom: 5px;
         font-weight: 600;
         font-size: 13px;
     }

     .estate-search-inner {
         flex-direction: column;
         gap: 10px;
         margin-top: 20px;
     }

     .keyword-group,
     .select-group,
     .btn-group,
     .range-group {
         width: 100%;
         flex: none;
     }

     .range-row {
         display: flex;
         gap: 10px;
     }

     .btn-group {
         justify-content: space-between;
         margin-top: 10px;
     }

     .estate-btn-search,
     .estate-btn-clear {
         width: 48%;
     }

     .estate-modal-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         width: 100%;
         color: white;
         margin-bottom: 10px;
     }

     .estate-modal-header h3 {
         margin: 0;
         font-size: 20px;
         color: white;
     }

     .estate-modal-close {
         background: none;
         border: none;
         font-size: 32px;
         color: white;
         cursor: pointer;
         line-height: 1;
     }

     .estate-modal-overlay {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100vh;
         background: rgba(0, 0, 0, 0.6);
         z-index: 99999;
         display: none;
     }

     .estate-search-container.is-active .estate-modal-overlay {
         display: block;
     }

     .desktop-more-group {
         display: none;
     }
 }

 @media (max-width: 768px) {
     .feature-div {
         display: none !important;
     }

     .estate-btn-more {
         width: 100% !important;
     }
 }

 /* estate gallery */

 .estate-gallery-wrapper {
     position: relative;
     width: 100%;
     /* --- THE FIX: LOCK THE HEIGHT --- */
     aspect-ratio: 4 / 3 !important;
     /* Forces a standard rectangle shape */
     overflow: hidden;
     /* border-radius: 8px; */
     background: #f4f4f4;
     /* Fallback for old browsers */
     min-height: 250px;
 }
 /* --- Dark Overlay Component --- */
.estate-gallery-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* Adjust darkness (0.4) as needed */
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none; 
    z-index: 1; /* Sits behind your content boxes */
}

/* --- Keep Top & Bottom Containers Bright & Un-dimmed --- */
.estate-gallery-wrapper .gallery-overlay-box {
    position: absolute;
    z-index: 2; /* Sits ABOVE the dark overlay so they are never dimmed */
}

/* --- Hover Behavior: Only remove overlay when hovering the background image --- */
/* This tells the browser: Fade out the overlay ONLY when hovering the wrapper, UNLESS the user is hovering over the content boxes. */
.estate-gallery-wrapper:not(:has(.gallery-overlay-box:hover)):hover::after {
    opacity: 0;
}

 .estate-gallery-slides {
     display: flex;
     overflow-x: auto;
     scroll-snap-type: x mandatory;
     scroll-behavior: smooth;
     scrollbar-width: none;
     height: 100%;
     width: 100%;
 }

 .estate-gallery-slides::-webkit-scrollbar {
     display: none;
 }

 .estate-gallery-slide {
     flex: 0 0 100%;
     width: 100%;
     height: 100%;
     scroll-snap-align: start;
 }

 .estate-gallery-slide img {
     width: 100% !important;
     height: 100% !important;
     /* --- THE FIX: CROP TO FIT --- */
     object-fit: cover !important;
     display: block;
 }

 /* Navigation Arrows */
 .estate-nav {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background: rgba(0, 0, 0, 0.4);
     color: white;
     border: none;
     cursor: pointer;
     padding: 8px 12px;
     font-size: 18px;
     z-index: 2;
     transition: 0.3s;
     border-radius: 4px;
     line-height: 1;
 }

 .estate-nav:hover {
     background: rgba(0, 0, 0, 0.8);
 }

 .estate-nav.prev {
     left: 10px;
     color: #FFF;
     border: 1px solid #FFF;
 }

 .estate-nav.prev:hover {
     left: 10px;
     color: #FFF;
     background-color: #8b6f47;
     border: 1px solid #8b6f47;
 }

 .estate-nav.prev:active {
     left: 10px;
     color: #FFF;
     background-color: #8b6f47;
     border: 1px solid #8b6f47;
 }

 .estate-nav.prev:focus {
     left: 10px;
     color: #FFF;
     background-color: #8b6f47;
     border: 1px solid #8b6f47;
 }

 .estate-nav.next {
     right: 10px;
     color: #FFF;
     border: 1px solid #FFF;
 }

 .estate-nav.next:hover {
    
     color: #FFF;
     background-color: #8b6f47;
     border: 1px solid #8b6f47;
 }

 .estate-nav.next:active {

     color: #FFF;
     background-color: #8b6f47;
     border: 1px solid #8b6f47;
 }

 .estate-nav.next:focus {

     color: #FFF;
     background-color: #8b6f47;
     border: 1px solid #8b6f47;
 }


 /* estate hub home search form */

 .houzez-search-wrapper {
     max-width: 1280px;
     margin: 0 auto;
     position: relative;
     font-family: 'Roboto', sans-serif;
     z-index: 10;
 }

 .search-tabs {
     display: flex;
     align-items: center;
     justify-content: center;
     list-style: none;
     margin: 0;
     padding: 0;
     margin-bottom: -1px;
     padding-left: 15px;
 }

 .tab-item {
     background-color: rgba(139, 111, 71, 0.7);
     color: #FFF;
     padding: 10px 25px;
     cursor: pointer;
     font-weight: 600;
     font-size: 15px;
     text-transform: uppercase;
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
     transition: all 0.2s ease;
     margin-right: 2px;
 }

 .tab-item.active {
     background-color: #FFF;
     color: #000;
     padding-bottom: 12px;
     font-weight: 600;
 }

 .property-search-form-home {
     background-color: #fff;
     padding: 30px;
     border-radius: 4px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 }

 .search-fields-row {
     display: flex;
     align-items: flex-end;
     gap: 20px;
 }

 .search-field {
     flex: 1;
     display: flex;
     flex-direction: column;
 }

 .search-field label {
     font-size: 12px;
     font-weight: 500;
     color: #000;
     margin-bottom: 8px;
     display: block;
 }

 .form-select-home,
 .form-input-home {
     width: 100%;
     height: 40px;
     border: 1px solid #e0e0e0;
     border-radius: 4px;
     padding: 0 15px;
     font-size: 14px;
     color: #555;
     background-color: #fff;
     outline: none;
     transition: border-color 0.3s;
 }

 .form-select-home:focus,
 .form-input-home:focus {
     border-color: #8b6f47;
 }

 .search-submit-home {
     flex: 0 0 auto;
 }

 .search-submit-home button {
     height: 40px;
     padding: 0 40px;
     background-color: #8b6f47;
     color: #fff;
     border: none;
     border-radius: 4px;
     font-weight: 600;
     font-size: 14px;
     cursor: pointer;
     transition: background-color 0.3s;
 }

 .search-submit-home button:hover {
     background-color: #6b5437;
 }
 .search-submit-home button:focus {
     background-color: #6b5437;
 }
 .search-submit-home button:active {
     background-color: #6b5437;
 }

 /* ==========================================================================
   EstateHub Property Card Styles
   ========================================================================== */
 .eh-property-card {
     background: #fff;
     border: 1px solid #eaeaea;
     border-radius: 4px;
     overflow: hidden;
     transition: box-shadow 0.3s ease;
     display: flex;
     flex-direction: column;
 }

 .eh-property-card:hover {
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
 }

 /* Image Area */
 .eh-card-image {
     position: relative;
     height: 240px;
     background-size: cover;
     background-position: center;
 }

 .eh-card-badges {
     position: absolute;
     top: 15px;
     left: 15px;
     right: 15px;
     display: flex;
     justify-content: space-between;
 }

 .eh-badge {
     padding: 4px 10px;
     font-size: 11px;
     font-weight: 700;
     color: #fff;
     border-radius: 3px;
     text-transform: uppercase;
 }

 .eh-badge-featured {
     background-color: #82b440;
 }

 .eh-badge-status {
     background-color: rgba(0, 0, 0, 0.7);
 }

 .eh-card-image-overlay {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     padding: 20px 15px 15px;
     background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
 }

 .eh-price {
     color: #fff;
     font-size: 22px;
     font-weight: 700;
 }

 .eh-card-actions a {
     color: #fff;
     background: rgba(255, 255, 255, 0.2);
     width: 30px;
     height: 30px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border-radius: 3px;
     margin-left: 5px;
     font-size: 13px;
     transition: 0.3s;
 }

 .eh-card-actions a:hover {
     background: #00b4d8;
 }

 /* Content Area */
 .eh-card-content {
     padding: 20px;
 }

 .eh-card-title {
     font-size: 18px;
     margin: 0 0 10px 0;
 }

 .eh-card-title a {
     color: #333;
     text-decoration: none;
     transition: color 0.3s;
 }

 .eh-card-title a:hover {
     color: #00b4d8;
 }

 .eh-card-location {
     color: #777;
     font-size: 13px;
     margin: 0 0 15px 0;
 }

 .eh-card-location i {
     margin-right: 5px;
 }

 .eh-card-meta {
     display: flex;
     flex-wrap: wrap;
     gap: 15px;
     margin-bottom: 15px;
     color: #555;
     font-size: 13px;
     font-weight: 600;
 }

 .eh-card-meta span {
     display: flex;
     align-items: center;
 }

 .eh-card-meta i {
     margin-right: 6px;
     font-size: 16px;
     color: #888;
 }

 .eh-card-type {
     font-size: 11px;
     font-weight: 700;
     color: #333;
     letter-spacing: 0.5px;
 }

 /* Footer Area */
 .eh-card-footer {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 15px 20px;
     border-top: 1px solid #eaeaea;
     background: #fafafa;
 }

 .eh-author {
     display: flex;
     align-items: center;
     font-size: 13px;
     color: #777;
 }

 .eh-author img {
     border-radius: 50%;
     margin-right: 10px;
 }

 .eh-date {
     font-size: 12px;
     color: #999;
 }

 /* Carousel Specific */
 .eh-carousel-header {
     display: flex;
     justify-content: flex-end;
     margin-bottom: 15px;
 }

 .eh-swiper-nav button {
     background: #fff;
     border: 1px solid #00b4d8;
     color: #00b4d8;
     padding: 5px 15px;
     cursor: pointer;
     border-radius: 3px;
     margin-left: 5px;
     transition: 0.3s;
 }

 .eh-swiper-nav button:hover {
     background: #00b4d8;
     color: #fff;
 }

 @media (max-width: 992px) {
     .search-fields-row {
         flex-direction: column;
         gap: 15px;
     }

     .search-field,
     .search-submit-home,
     .search-submit-home button {
         width: 100%;
     }
 }

 @media (max-width: 425px) {
     .property-search-form-home {
         padding: 20px;
     }
 }




/* ==========================================================================
   PROPERTIES PAGE 3-COLUMN GRID & GOLD PAGINATION STYLES
   ========================================================================== */

.estatehub-properties-page-wrapper {
    width: 100%;
    margin: 30px 0;
}

/* 3 Column Grid */
.estatehub-properties-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 1024px) {
    .estatehub-properties-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .estatehub-properties-grid {
        grid-template-columns: 1fr;
    }
}

/* No Results Container */
.estatehub-no-results {
    text-align: center;
    padding: 60px 20px;
    background: #f9fafb;
    border: 1px dashed #d1d5db;
    border-radius: 8px;
    margin: 20px 0;
}

.estatehub-no-results h3 {
    font-size: 22px;
    color: #1f2937;
    margin-bottom: 8px;
}

.estatehub-no-results p {
    font-size: 15px;
    color: #6b7280;
}

/* Custom Gold Pagination */
.estatehub-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.estatehub-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.estatehub-pagination .page-numbers:hover {
    background-color: #8c6e3d;
    border-color: #8c6e3d;
    color: #ffffff;
}

.estatehub-pagination .page-numbers.current {
    background-color: #8c6e3d;
    border-color: #8c6e3d;
    color: #ffffff;
    cursor: default;
}

.estatehub-pagination .page-numbers.dots {
    border: none;
    background: transparent;
    color: #9ca3af;
}