/* ================================================================
   home-override.css
   ElegantHouses — Home Page Custom Styles
   Matches the UX/UI Design Reference
   ================================================================ */

/* ---------------------------------------------------------------
   1. HEADER — eh-header
   --------------------------------------------------------------- */
.eh-header .sisf-centered-header-wrapper {
   padding: 0 20px;
   height: 72px;
   border-radius: 15px;
   box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

.eh-header .navbar-brand img {
   max-height: 52px;
   width: auto;
}

.eh-header .main-menu ul li a {
   font-size: 15px;
   font-weight: 600;
   color: #1D283A;
   padding: 6px 14px;
   transition: color 0.3s;
}

.eh-header .main-menu ul li a:hover,
.eh-header .main-menu ul li.active > a {
   color: #d8a752;
}

.eh-header-actions {
   gap: 8px;
}

.eh-header-phone {
   font-size: 14px;
   font-weight: 700;
   color: #1D283A;
   white-space: nowrap;
   transition: color 0.3s;
}

.eh-header-phone:hover {
   color: #d8a752;
}

.eh-header-phone i {
   color: #d8a752;
   font-size: 16px;
}

.eh-btn-price {
   font-size: 14px;
   font-weight: 700;
   padding: 10px 20px;
   border-radius: 8px;
   white-space: nowrap;
   background-color: #d8a752 !important;
   color: #fff !important;
   border: 1px solid #d8a752 !important;
   transition: all 0.3s;
}

.eh-btn-price:hover {
   background-color: #c16f00 !important;
   border-color: #c16f00 !important;
   color: #fff !important;
}

.eh-btn-price::after {
   display: none !important;
}

.eh-btn-whatsapp {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   background-color: #25D366;
   color: #fff;
   border-radius: 8px;
   font-size: 20px;
   transition: all 0.3s;
   flex-shrink: 0;
}

.eh-btn-whatsapp:hover {
   background-color: #1ebe5d;
   color: #fff;
   transform: scale(1.05);
}

/* ---------------------------------------------------------------
   2. HERO SECTION — eh-hero
   --------------------------------------------------------------- */
.eh-hero {
   position: relative;
}

.eh-hero .hero-slide {
   position: relative;
   min-height: 620px;
   display: flex;
   align-items: flex-end;
}

.eh-hero .hero-slider-image {
   position: absolute;
   inset: 0;
   z-index: 0;
}

.eh-hero .hero-slider-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.eh-hero-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(
      to left,
      rgba(10, 10, 20, 0.75) 0%,
      rgba(10, 10, 20, 0.55) 50%,
      rgba(10, 10, 20, 0.25) 100%
   );
   z-index: 1;
}

.eh-hero-content-wrapper {
   position: relative;
   z-index: 2;
   padding-bottom: 80px;
   padding-top: 40px;
}

.eh-hero-subtitle {
   color: #d8a752 !important;
   font-size: 18px !important;
   font-weight: 700;
   letter-spacing: 0 !important;
   margin-bottom: 10px !important;
}

.eh-hero-title {
   font-size: 68px !important;
   font-weight: 900 !important;
   line-height: 1.1em !important;
   color: #fff !important;
   margin-bottom: 20px !important;
}

.eh-hero-desc {
   font-size: 16px;
   line-height: 28px;
   color: rgba(255, 255, 255, 0.9) !important;
   margin-bottom: 30px;
}

.eh-hero-btns {
   margin-top: 10px;
}

.eh-hero-btns .btn-default.btn-secondary {
   font-size: 15px;
   font-weight: 700;
   padding: 14px 28px;
   border-radius: 8px;
}

.eh-hero-btns .btn-default.btn-dark {
   font-size: 15px;
   font-weight: 700;
   padding: 14px 28px;
   border-radius: 8px;
   background-color: rgba(255,255,255,0.15) !important;
   border: 1px solid rgba(255,255,255,0.4) !important;
   backdrop-filter: blur(4px);
   color: #fff !important;
}

.eh-hero-btns .btn-default.btn-dark:hover {
   background-color: #d8a752 !important;
   border-color: #d8a752 !important;
}

/* Scroll Down Indicator */
.eh-scroll-down {
   position: absolute;
   bottom: 24px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 3;
   text-align: center;
}

.eh-scroll-down a {
   display: flex;
   flex-direction: column;
   align-items: center;
   color: rgba(255,255,255,0.8);
   gap: 8px;
   text-decoration: none !important;
   transition: color 0.3s;
}

.eh-scroll-down a:hover {
   color: #d8a752;
}

.eh-scroll-icon {
   display: block;
   width: 28px;
   height: 44px;
   border: 2px solid rgba(255,255,255,0.6);
   border-radius: 14px;
   position: relative;
}

.eh-scroll-icon::before {
   content: '';
   position: absolute;
   top: 6px;
   left: 50%;
   transform: translateX(-50%);
   width: 4px;
   height: 8px;
   background-color: #d8a752;
   border-radius: 2px;
   animation: eh-scroll-bounce 1.5s ease infinite;
}

@keyframes eh-scroll-bounce {
   0%, 100% { top: 6px; opacity: 1; }
   50% { top: 18px; opacity: 0.5; }
}

.eh-scroll-text {
   font-size: 12px;
   font-weight: 600;
   letter-spacing: 0;
}

/* ---------------------------------------------------------------
   3. PRODUCTS SECTION — eh-products-section
   --------------------------------------------------------------- */
.eh-products-section {
   background: #fff;
   padding-bottom: 60px;
}

.eh-products-section .section-title p {
   color: #6b7280;
   font-size: 15px;
   margin-top: 10px;
   margin-bottom: 0;
}

.eh-products-grid {
   margin-top: 30px;
   gap: 0;
}

.eh-product-card {
   background: #fff;
   border-radius: 16px;
   overflow: hidden;
   box-shadow: 0 4px 20px rgba(0,0,0,0.08);
   transition: all 0.35s ease;
   margin-bottom: 20px;
   cursor: pointer;
}

.eh-product-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 12px 40px rgba(249, 115, 22, 0.18);
}

.eh-product-image {
   position: relative;
   overflow: hidden;
   aspect-ratio: 4/3;
}

.eh-product-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.4s ease;
}

.eh-product-card:hover .eh-product-image img {
   transform: scale(1.08);
}

.eh-product-overlay {
   position: absolute;
   inset: 0;
   background: rgb(216 167 82 / 61%);
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transition: opacity 0.35s ease;
}

.eh-product-card:hover .eh-product-overlay {
   opacity: 1;
}

.eh-product-link {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 46px;
   height: 46px;
   background: #fff;
   border-radius: 50%;
   color: #d8a752;
   font-size: 18px;
   transform: scale(0.7);
   transition: transform 0.3s;
}

.eh-product-card:hover .eh-product-link {
   transform: scale(1);
}

.eh-product-icon-wrap {
   display: flex;
   justify-content: center;
   margin-top: -20px;
   position: relative;
   z-index: 2;
}

.eh-product-icon {
   width: 44px;
   height: 44px;
   object-fit: contain;
   background: #fff;
   border-radius: 12px;
   padding: 8px;
   box-shadow: 0 4px 14px rgba(0,0,0,0.12);
   border: 2px solid rgba(249,115,22,0.15);
}

.eh-product-info {
   padding: 12px 14px 16px;
   text-align: center;
}

.eh-product-name {
   font-size: 17px;
   font-weight: 700;
   color: #1D283A;
   margin-bottom: 4px;
   line-height: 1.3;
}

.eh-product-desc {
   font-size: 13px;
   color: #6b7280;
   margin: 0;
   line-height: 1.4;
}

/* ---------------------------------------------------------------
   4. WHY CHOOSE US — eh-why-us (Dark Background)
   --------------------------------------------------------------- */
.eh-why-us {
   background-color: #000;
   padding: 70px 0;
}

.eh-why-us .sisf-subtitle {
   color: #d8a752 !important;
}

.eh-why-us .section-title {
   margin-bottom: 50px;
}

.eh-why-card .sisf-e-inner {
   background: rgba(255,255,255,0.06);
   border: 1px solid rgba(255,255,255,0.1);
   border-radius: 16px;
   padding: 30px 20px;
   transition: all 0.35s ease;
   height: 100%;
   margin-bottom: 20px;
}

.eh-why-card .sisf-e-inner:hover {
   background: rgba(249,115,22,0.12);
   border-color: rgba(249,115,22,0.3);
   transform: translateY(-5px);
}

.eh-why-card .sisf-sis-icon-image {
   margin: 0 auto 16px !important;
}

.eh-why-card .sisf-sis-icon-image img {
   width: 56px;
   height: 56px;
   object-fit: contain;
   filter: brightness(0) invert(1);
}

.eh-why-card .sisf-e-title {
   font-size: 18px !important;
   font-weight: 700 !important;
   color: #fff !important;
   margin-bottom: 8px;
}

.eh-why-card .sisf-sis-description p {
   font-size: 14px;
   color: rgba(255,255,255,0.7) !important;
   line-height: 22px;
}

/* ---------------------------------------------------------------
   5. PROJECTS SECTION — eh-projects-section
   --------------------------------------------------------------- */
.eh-projects-section {
   background: #f8f9fa;
}

.eh-projects-slider .swiper {
   overflow: visible;
   padding-bottom: 10px;
}

.eh-project-card {
   border-radius: 16px;
   overflow: hidden;
   cursor: pointer;
}

.eh-project-card .sisf-property-image {
   border-radius: 16px;
   overflow: hidden;
   margin-bottom: 0;
}

.eh-project-card .sisf-e-image {
   overflow: hidden;
   border-radius: 16px;
}

.eh-project-card .sisf-e-image img {
   height: 240px;
   object-fit: cover;
   transition: transform 0.4s ease;
   display: block;
}

.eh-project-card:hover .sisf-e-image img {
   transform: scale(1.06);
}

.eh-project-card figure {
   margin: 0;
}

/* ---------------------------------------------------------------
   6. PARTNERS SECTION — eh-partners-section
   --------------------------------------------------------------- */
.eh-partners-section {
   background: #fff;
   padding: 60px 0;
}

.eh-partners-row {
   margin-top: 30px;
}

.eh-partner-logo {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 30px 20px;
   border: 1px solid #e5e7eb;
   border-radius: 16px;
   text-align: center;
   transition: all 0.3s ease;
   margin-bottom: 20px;
   min-height: 120px;
}

.eh-partner-logo:hover {
   border-color: #d8a752;
   box-shadow: 0 8px 30px rgba(249, 115, 22, 0.12);
   transform: translateY(-3px);
}

.eh-partner-logo img {
   max-width: 80px;
   max-height: 50px;
   object-fit: contain;
   filter: grayscale(100%);
   transition: filter 0.3s;
   margin-bottom: 8px;
}

.eh-partner-logo:hover img {
   filter: grayscale(0%);
}

.eh-partner-name {
   font-size: 13px;
   color: #6b7280;
   margin: 0;
   line-height: 1.4;
}

.eh-partner-logo--center {
   background: #000;
   border-color: #1D283A;
}

.eh-partner-logo--center:hover {
   background: #000;
   border-color: #d8a752;
}

.eh-partner-brand-name {
   font-size: 28px;
   font-weight: 900;
   color: #fff;
   margin: 0;
   letter-spacing: 2px;
   line-height: 1.3;
}

.eh-partner-brand-name span {
   font-size: 12px;
   font-weight: 400;
   color: #d8a752;
   letter-spacing: 0;
}

/* ---------------------------------------------------------------
   7. STATS SECTION — eh-stats-section
   --------------------------------------------------------------- */
.eh-stats-section {
   /* background: #1D283A; */
   background: #000000;
   padding: 0;
}

.eh-stats-inner {
   padding: 50px 0;
   border-top: 1px solid rgba(255,255,255,0.08);
   border-bottom: 1px solid rgba(255,255,255,0.08);
}

.eh-stat-item {
   display: flex;
   align-items: center;
   gap: 18px;
   padding: 20px 15px;
   border-left: 1px solid rgba(255,255,255,0.1);
   transition: all 0.3s;
}

[dir="rtl"] .eh-stat-item {
   border-left: none;
   border-right: 1px solid rgba(255,255,255,0.1);
}

.eh-stat-item:hover {
   background: rgba(249,115,22,0.08);
   border-radius: 12px;
}

.eh-stat-icon {
   width: 52px;
   height: 52px;
   background: rgba(249,115,22,0.15);
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.eh-stat-icon i {
   font-size: 22px;
   color: #d8a752;
}

.eh-stat-content {
   flex: 1;
}

.eh-stat-number {
   display: flex;
   align-items: baseline;
   gap: 2px;
}

.eh-stat-number .counter {
   font-size: 36px;
   font-weight: 900;
   color: #fff;
   line-height: 1;
}

.eh-stat-plus {
   font-size: 22px;
   font-weight: 900;
   color: #d8a752;
   line-height: 1;
}

.eh-stat-label {
   display: block;
   font-size: 14px;
   color: rgba(255,255,255,0.65);
   margin-top: 4px;
   font-weight: 500;
}

/* ---------------------------------------------------------------
   8. CONTACT SECTION — eh-contact-section
   --------------------------------------------------------------- */
.eh-contact-section {
   background: #fff;
}

.eh-contact-form-wrap {
   padding-left: 20px;
}

[dir="rtl"] .eh-contact-form-wrap {
   padding-left: 0;
   padding-right: 20px;
}

.eh-contact-form-wrap .sisf-subtitle {
   color: #d8a752 !important;
}

.eh-contact-form-wrap .form-control {
   background: #fff;
   border: 1px solid #e5e7eb;
   border-radius: 10px;
   padding: 14px 16px;
   font-size: 15px;
   color: #1D283A;
   transition: all 0.3s;
   margin-bottom: 14px;
}

.eh-contact-form-wrap .form-control:focus {
   border-color: #d8a752;
   box-shadow: 0 0 0 3px rgba(249,115,22,0.12);
   background: #fff;
}

.eh-contact-form-wrap .form-control::placeholder {
   color: #9ca3af;
}

.eh-contact-form-wrap textarea.form-control {
   resize: none;
}

.eh-contact-form-wrap .btn-default.btn-secondary {
   border-radius: 10px;
   padding: 15px 30px;
   font-size: 16px;
   font-weight: 700;
}

.form-col {
   margin-bottom: 0;
}

.eh-contact-info-wrap {
   padding-right: 20px;
   display: flex;
   flex-direction: column;
   height: 100%;
}

[dir="rtl"] .eh-contact-info-wrap {
   padding-right: 0;
   padding-left: 20px;
}

.eh-contact-image {
   border-radius: 16px;
   overflow: hidden;
   flex: 1;
}

.eh-contact-image img {
   height: 100%;
   max-height: 280px;
   object-fit: cover;
   border-radius: 16px;
}

.eh-contact-channels {
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.eh-contact-channel {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 14px 18px;
   border-radius: 12px;
   border: 1px solid #e5e7eb;
   text-decoration: none !important;
   transition: all 0.3s ease;
   color: #1D283A;
}

.eh-contact-channel:hover {
   border-color: #d8a752;
   background: rgba(249,115,22,0.05);
   color: #d8a752;
   transform: translateX(-4px);
}

[dir="rtl"] .eh-contact-channel:hover {
   transform: translateX(4px);
}

.eh-contact-channel > i {
   font-size: 22px;
   width: 44px;
   height: 44px;
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   transition: all 0.3s;
}

.eh-channel-whatsapp > i { background: rgba(37,211,102,0.1); color: #25D366; }
.eh-channel-phone > i { background: rgba(249,115,22,0.1); color: #d8a752; }
.eh-channel-email > i { background: rgba(29,40,58,0.08); color: #1D283A; }

.eh-contact-channel:hover > i {
   background: #d8a752;
   color: #fff;
}

.eh-channel-info {
   display: flex;
   flex-direction: column;
}

.eh-channel-label {
   font-size: 12px;
   color: #9ca3af;
   font-weight: 500;
}

.eh-channel-value {
   font-size: 15px;
   font-weight: 700;
   color: #1D283A;
   transition: color 0.3s;
   direction: ltr !important;
}

.eh-contact-channel:hover .eh-channel-value {
   color: #d8a752;
}

/* ---------------------------------------------------------------
   9. FOOTER — eh-footer
   --------------------------------------------------------------- */
.eh-footer .sisf-page-footer-middle-area {
   padding: 60px 0 40px;
}

.eh-footer .footer-links h3 {
   font-size: 18px;
   font-weight: 700;
   color: #fff;
   margin-bottom: 20px;
   position: relative;
   padding-bottom: 12px;
}

.eh-footer .footer-links h3::after {
   content: '';
   position: absolute;
   bottom: 0;
   right: 0;
   width: 36px;
   height: 3px;
   background: #d8a752;
   border-radius: 2px;
}

[dir="rtl"] .eh-footer .footer-links h3::after {
   right: 0;
   left: auto;
}

.eh-footer .footer-links ul li {
   margin-bottom: 8px;
}

.eh-footer .footer-links ul li a {
   color: rgba(255,255,255,0.65);
   font-size: 14px;
   transition: color 0.3s;
   display: inline-block;
}

.eh-footer .footer-links ul li a:hover {
   color: #d8a752;
   padding-right: 4px;
}

.eh-footer .footer-social-links ul {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   padding: 0;
   list-style: none;
}

.eh-footer .footer-social-links ul li a {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 38px;
   height: 38px;
   border-radius: 8px;
   background: rgba(255,255,255,0.08);
   color: rgba(255,255,255,0.7);
   font-size: 16px;
   transition: all 0.3s;
}

.eh-footer .footer-social-links ul li a:hover {
   background: #d8a75275;
   color: #fff;
   transform: translateY(-3px);
}

.eh-footer .footer-logo img {
   max-height: 56px;
   margin-bottom: 16px;
}

.eh-footer .text p {
   color: rgba(255,255,255,0.6);
   font-size: 14px;
   line-height: 22px;
   margin-bottom: 20px;
}

.eh-footer .sisf-details {
   font-size: 14px;
}

.eh-footer .sisf-details a,
.eh-footer .sisf-details span {
   color: rgba(255,255,255,0.65);
   transition: color 0.3s;
}

.eh-footer .sisf-details a:hover {
   color: #d8a752;
}

.eh-footer .sisf-details i {
   color: #d8a752;
}

/* Footer Bottom */
.eh-footer .sisf-page-footer-bottom-area {
   background: rgba(0,0,0,0.25);
   padding: 24px 0;
}

.eh-footer .footer-bottom-text h2 {
   font-size: 22px;
   font-weight: 800;
   color: #fff;
   line-height: 1.4;
}

.eh-footer-tagline {
   font-size: 14px;
   font-weight: 400;
   color: rgba(255,255,255,0.5);
}

.eh-footer .footer-copyright-text p {
   font-size: 13px;
   color: rgba(255,255,255,0.5);
   margin: 0;
}

/* ---------------------------------------------------------------
   10. RESPONSIVE STYLES — COMPREHENSIVE
   Breakpoints:
     • Large Desktops:  min-width: 1200px  (default / no query needed)
     • Medium / Laptop:  992px – 1199px
     • Tablet:           768px – 991px
     • Mobile:           max-width: 767px
     • Small Mobile:     max-width: 480px
   --------------------------------------------------------------- */

/* =================================================================
   LARGE DESKTOPS — min-width: 1200px
   Products: 6 cols (16.67%) — already set in section 17.
   Everything else uses Bootstrap col-lg classes.
   ================================================================= */


/* =================================================================
   MEDIUM / LAPTOP — 992px – 1199px
   ================================================================= */
@media (min-width: 992px) and (max-width: 1199px) {

   /* ── Hero ── */
   .eh-hero-title {
      font-size: 52px !important;
   }
   .eh-hero .hero-slide {
      min-height: 540px;
   }
   .eh-hero-subtitle {
      font-size: 16px !important;
   }

   /* ── Products: 3 columns ── */
   .eh-products-grid .col-lg-2 {
      flex: 0 0 33.333%;
      max-width: 33.333%;
   }

   /* ── Why Us: 4 columns (col-lg-3 handles this) ── */
   .eh-why-us {
      padding: 60px 0;
   }
   .eh-why-card .sisf-e-inner {
      padding: 24px 16px;
   }

   /* ── Stats: 4 columns (col-lg-3 handles this) ── */
   .eh-stat-number .counter {
      font-size: 32px;
   }

   /* ── Contact: 2 columns side-by-side ── */
   .eh-contact-form-wrap,
   .eh-contact-info-wrap {
      padding-left: 10px;
      padding-right: 10px;
   }

   /* ── Footer ── */
   .eh-footer .sisf-page-footer-middle-area {
      padding: 50px 0 30px;
   }
}


/* =================================================================
   TABLET — 768px – 991px
   ================================================================= */
@media (min-width: 768px) and (max-width: 991px) {

   /* ── Hero ── */
   .eh-hero-title {
      font-size: 44px !important;
   }
   .eh-hero .hero-slide {
      min-height: 500px;
   }
   .eh-hero-subtitle {
      font-size: 15px !important;
   }
   .eh-hero-content-wrapper {
      padding-bottom: 70px;
   }
   .eh-hero-desc {
      font-size: 15px;
      line-height: 24px;
   }

   /* ── Products: 3 columns ── */
   .eh-products-grid .col-lg-2 {
      flex: 0 0 33.333%;
      max-width: 33.333%;
   }
   .eh-product-name {
      font-size: 15px;
   }
   .eh-product-desc {
      font-size: 12px;
   }

   /* ── Why Us: 2 columns (col-md-6 handles this) ── */
   .eh-why-us {
      padding: 50px 0;
   }
   .eh-why-card .sisf-e-inner {
      margin-bottom: 20px;
      padding: 24px 16px;
   }
   .eh-why-card .sisf-e-title {
      font-size: 16px !important;
   }
   .eh-why-card .sisf-sis-description p {
      font-size: 13px;
   }

   /* ── Projects ── */
   .eh-projects-section .sisf-e-image figure img {
      height: 200px;
   }

   /* ── Partners ── */
   .eh-partner-logo {
      padding: 22px 14px;
      min-height: 100px;
   }

   /* ── Stats: 2×2 (col-md-6 handles this) ── */
   .eh-stat-item {
      border-right: none !important;
      border-left: none !important;
      border-bottom: 1px solid rgba(255,255,255,0.1);
      padding: 18px 10px;
   }
   .eh-stat-number .counter {
      font-size: 32px;
   }

   /* ── Contact: form on top, info below (col-md-12) ── */
   .eh-contact-form-wrap,
   .eh-contact-info-wrap {
      padding: 0 !important;
   }
   .eh-contact-info-wrap {
      margin-top: 30px;
   }
   .eh-contact-image img {
      max-height: 220px;
   }

   /* ── Footer: 2 columns on tablet (col-md-6 handles this) ── */
   .eh-footer .sisf-page-footer-middle-area {
      padding: 50px 0 30px;
   }
   .eh-footer .footer-links h3 {
      font-size: 16px;
      margin-bottom: 16px;
   }
   .eh-footer .footer-links ul li a {
      font-size: 13px;
   }
   .eh-footer .footer-bottom-text h2 {
      font-size: 20px;
   }
}


/* =================================================================
   MOBILE — max-width: 767px
   ================================================================= */
@media (max-width: 767px) {

   /* ── Hero ── */
   .eh-hero-title {
      font-size: 34px !important;
      line-height: 1.15em !important;
   }
   .eh-hero .hero-slide {
      min-height: 480px;
   }
   .eh-hero-subtitle {
      font-size: 14px !important;
      margin-bottom: 6px !important;
   }
   .eh-hero-desc {
      font-size: 14px;
      line-height: 22px;
   }
   .eh-hero-content-wrapper {
      padding-bottom: 50px;
      padding-top: 30px;
   }
   .eh-hero-btns {
      flex-direction: column;
      align-items: flex-start !important;
   }
   .eh-hero-btns .btn-default {
      width: 100%;
      text-align: center;
      justify-content: center;
      padding: 12px 20px;
      font-size: 14px;
   }
   .eh-scroll-down {
      display: none;
   }

   /* ── Header ── */
   .eh-header-phone {
      display: none !important;
   }
   .eh-btn-price {
      font-size: 13px;
      padding: 8px 14px;
   }

   /* ── Products: 2 columns (col-6 handles this) ── */
   .eh-products-grid .col-lg-2 {
      flex: 0 0 50%;
      max-width: 50%;
      padding-left: 6px;
      padding-right: 6px;
   }
   .eh-products-section {
      padding-bottom: 40px;
   }
   .eh-products-section .section-title p {
      font-size: 14px;
   }
   .eh-product-card {
      margin-bottom: 14px;
   }
   .eh-product-name {
      font-size: 14px;
   }
   .eh-product-desc {
      font-size: 11.5px;
   }
   .eh-product-info {
      padding: 10px 10px 14px;
   }
   .eh-product-icon {
      width: 38px;
      height: 38px;
      padding: 6px;
   }
   .eh-product-icon-wrap {
      margin-top: -16px;
   }

   /* ── Why Us: 1 column stacked ── */
   .eh-why-us {
      padding: 40px 0;
   }
   .eh-why-us .section-title {
      margin-bottom: 30px;
   }
   .eh-why-card .sisf-e-inner {
      margin-bottom: 14px;
      padding: 22px 16px;
   }
   .eh-why-card .col-lg-3 {
      flex: 0 0 100%;
      max-width: 100%;
   }
   .eh-why-card .sisf-e-title {
      font-size: 16px !important;
   }
   .eh-why-card .sisf-sis-description p {
      font-size: 13px;
   }
   .eh-why-card .sisf-sis-icon-image img {
      width: 48px;
      height: 48px;
   }

   /* ── Projects ── */
   .eh-projects-section .sisf-e-image figure img {
      height: 180px;
   }

   /* ── Partners ── */
   .eh-partner-logo {
      padding: 20px 10px;
      min-height: 90px;
   }
   .eh-partner-brand-name {
      font-size: 22px;
   }
   .eh-partner-name {
      font-size: 12px;
   }
   .eh-partner-logo img {
      max-width: 60px;
      max-height: 40px;
   }

   /* ── Stats: 2×2 grid (col-6 handles this) ── */
   .eh-stats-inner {
      padding: 30px 0;
   }
   .eh-stat-item {
      gap: 12px;
      padding: 14px 8px;
      border-right: none !important;
      border-left: none !important;
      border-bottom: 1px solid rgba(255,255,255,0.08);
   }
   .eh-stat-number .counter {
      font-size: 30px;
   }
   .eh-stat-icon {
      width: 44px;
      height: 44px;
   }
   .eh-stat-icon i {
      font-size: 18px;
   }
   .eh-stat-label {
      font-size: 12px;
   }
   .eh-stat-plus {
      font-size: 18px;
   }

   /* ── Contact: stacked — form first, info below ── */
   .eh-contact-section {
      padding: 40px 0;
   }
   .eh-contact-form-wrap,
   .eh-contact-info-wrap {
      padding: 0 !important;
   }
   .eh-contact-info-wrap {
      margin-top: 30px;
   }
   .eh-contact-form-wrap .form-control {
      padding: 12px 14px;
      font-size: 14px;
   }
   .eh-contact-form-wrap .btn-default.btn-secondary {
      padding: 13px 24px;
      font-size: 15px;
   }
   .eh-contact-image img {
      max-height: 180px;
   }
   .eh-contact-channels {
      gap: 10px;
   }
   .eh-contact-channel {
      padding: 12px 14px;
   }
   .eh-contact-channel > i {
      width: 38px;
      height: 38px;
      font-size: 18px;
   }
   .eh-channel-value {
      font-size: 14px;
      /* direction: rtl !important; */
   }
   .eh-channel-label {
      font-size: 11px;
   }

   /* ── Footer: stacked vertically, center-aligned ── */
   .eh-footer .sisf-page-footer-middle-area {
      padding: 40px 0 20px;
   }
   .eh-footer .row > [class*="col-"] {
      margin-bottom: 28px;
      text-align: center;
   }
   .eh-footer .footer-links h3 {
      font-size: 16px;
      margin-bottom: 14px;
   }
   .eh-footer .footer-links h3::after {
      right: 50%;
      transform: translateX(50%);
   }
   .eh-footer .footer-links ul li a {
      font-size: 13px;
   }
   .eh-footer .footer-logo img {
      max-height: 48px;
   }
   .eh-footer .text p {
      font-size: 13px;
      line-height: 20px;
   }
   .eh-footer .footer-social-links ul {
      justify-content: center;
   }
   .eh-footer .sisf-details {
      font-size: 13px;
   }
   .eh-footer .footer-bottom-text h2 {
      font-size: 18px;
      text-align: center;
   }
   .eh-footer .footer-copyright-text p {
      text-align: center !important;
      margin-top: 10px;
   }
}


/* =================================================================
   SMALL MOBILE — max-width: 480px
   ================================================================= */
@media (max-width: 480px) {

   /* ── Hero ── */
   .eh-hero-title {
      font-size: 28px !important;
   }
   .eh-hero .hero-slide {
      min-height: 420px;
   }
   .eh-hero-desc {
      font-size: 13px;
      line-height: 20px;
   }
   .eh-hero-btns .btn-default {
      font-size: 13px;
      padding: 11px 18px;
   }

   /* ── Products: 2 columns ── */
   .eh-products-grid .col-lg-2 {
      flex: 0 0 50%;
      max-width: 50%;
      padding-left: 5px;
      padding-right: 5px;
   }
   .eh-product-name {
      font-size: 13px;
   }
   .eh-product-desc {
      font-size: 11px;
   }

   /* ── Stats: vertical layout per item ── */
   .eh-stat-item {
      flex-direction: column;
      text-align: center;
      border: none !important;
      padding: 16px 8px;
   }
   .eh-stat-number .counter {
      font-size: 28px;
   }

   /* ── Contact ── */
   .eh-contact-section {
      padding: 30px 0;
   }
   .eh-contact-form-wrap .form-control {
      padding: 11px 12px;
      font-size: 13px;
   }
   .eh-contact-image img {
      max-height: 160px;
   }

   /* ── Footer ── */
   .eh-footer .footer-bottom-text h2 {
      font-size: 16px;
   }
   .eh-footer .sisf-page-footer-middle-area {
      padding: 30px 0 16px;
   }
}

/* ---------------------------------------------------------------
   10. PROJECTS SLIDER OVERRIDE
   --------------------------------------------------------------- */
.eh-projects-slider .sisf-sis-slider .swiper,
.eh-projects-section .sisf-sis-slider .swiper {
   overflow: hidden;
}

.eh-projects-section .sisf-property-image {
   margin-bottom: 0 !important;
}

.eh-projects-section .sisf-e-image figure {
   margin: 0;
   overflow: hidden;
   border-radius: 14px;
}

.eh-projects-section .sisf-e-image figure img {
   width: 100%;
   height: 240px;
   object-fit: cover;
   display: block;
   border-radius: 14px;
   transition: transform 0.4s ease;
}

.eh-projects-section .sisf-e-inner:hover .sisf-e-image figure img {
   transform: scale(1.05);
}

/* ---------------------------------------------------------------
   11. FOOTER BOTTOM OVERRIDE
   --------------------------------------------------------------- */
.eh-footer .footer-bottom-text h1,
.eh-footer .footer-bottom-text h2 {
   color: #fff !important;
}

/* ---------------------------------------------------------------
   12. FIX BODY OVERFLOW FOR HOME
   --------------------------------------------------------------- */
body {
   overflow-x: hidden !important;
   overflow-y: auto !important;
}

/* ---------------------------------------------------------------
   13. SECTION TITLE SUBTITLE COLOR IN WHY-US & PROJECTS
   --------------------------------------------------------------- */
.eh-why-us .sisf-sis-section-title .sisf-m-title {
   color: #fff !important;
}

.eh-products-section .section-title .sisf-subtitle::before,
.eh-projects-section .section-title .sisf-subtitle::before,
.eh-partners-section .section-title .sisf-subtitle::before,
.eh-contact-section .section-title .sisf-subtitle::before {
   background-color: #d8a752;
}

/* ---------------------------------------------------------------
   14. BTN-SECONDARY OVERRIDE (no double pseudo for hero btns)
   --------------------------------------------------------------- */
.eh-hero-btns .btn-default.btn-secondary::after {
   background: #c16f00 !important;
   border-color: #c16f00 1px solid !important;
}

.eh-hero-btns .btn-default.btn-secondary:hover {
   background-color: #c16f00 !important;
   border-color: #c16f00 !important;
}

/* ---------------------------------------------------------------
   15. FOOTER LINKS TITLE TEXT COLOR FIX
   --------------------------------------------------------------- */
.eh-footer .bg-texture-dark {
   background-color: #000;
}

/* ---------------------------------------------------------------
   16. COUNTER IN STATS - FIX TEXT COLOR
   --------------------------------------------------------------- */
.eh-stats-section .counter {
   color: #fff !important;
   background: transparent !important;
}

/* ---------------------------------------------------------------
   17. PRODUCTS GRID UNIFORM COLUMN WIDTH FIX
   --------------------------------------------------------------- */
@media (min-width: 992px) {
   .eh-products-grid .col-lg-2 {
      flex: 0 0 16.6667%;
      max-width: 16.6667%;
      padding-left: 10px;
      padding-right: 10px;
   }
}


/* ================================================================
   NAVBAR — FIXED + TRANSPARENT → GLASSMORPHISM ON SCROLL
   ================================================================
   تعديل الـ Navbar فقط — لا يمس أي section آخر
   ================================================================ */

/* ── 1. تثبيت الـ Header في الأعلى ──────────────────────────── */
#sisf-page-header {
   position: fixed !important;
   top: 0;
   left: 0;
   right: 0;
   width: 100%;
   z-index: 9999;
}

/* ── 2. الحالة الأولى: شفاف تماماً عند تحميل الصفحة ────────── */
.eh-header .sisf-centered-header-wrapper {
   background: transparent !important;
   box-shadow: none !important;
   border-bottom: none !important;
   transition:
      background      0.35s ease,
      backdrop-filter 0.35s ease,
      -webkit-backdrop-filter 0.35s ease,
      box-shadow      0.35s ease,
      border-color    0.35s ease;
}

/* روابط الـ nav بيضاء في الحالة الشفافة */
.eh-header .main-menu ul li a {
   color: #fce8c5 !important;
   transition: color 0.25s ease;
}

.eh-header .main-menu ul li a:hover,
.eh-header .main-menu ul li.active > a,
.eh-header .main-menu ul li a.active {
   color: #d8a752 !important;
}

/* رقم الهاتف أبيض */
.eh-header-phone,
.eh-header-phone span {
   color: rgba(255, 255, 255, 0.92) !important;
   transition: color 0.25s ease;
}

.eh-header-phone:hover,
.eh-header-phone:hover span {
   color: #d8a752 !important;
}

/* أيقونة الهاتف */
.eh-header-phone i {
   color: #d8a752;
}

/* زر الهامبرجر في الحالة الشفافة */
.eh-header .navbar-sidebar button i {
   color: #fff !important;
   font-size: 22px;
   transition: color 0.25s ease;
}

/* ── 3. الحالة الثانية: Glassmorphism بعد 50px ─────────────── */

/* الحالة العامة — تستخدم خلفية شفافة زجاجية */
#sisf-page-header.scrolled .sisf-centered-header-wrapper {
   background: rgba(255, 255, 255, 0.12) !important;
   -webkit-backdrop-filter: blur(18px) !important;
   backdrop-filter: blur(18px) !important;
   border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.18) !important;
}

/* روابط الـ nav تبقى بيضاء في الـ glass state */
#sisf-page-header.scrolled .eh-header .main-menu ul li a,
#sisf-page-header.scrolled .main-menu ul li a {
   color: #eec885 !important;
}

#sisf-page-header.scrolled .main-menu ul li a:hover,
#sisf-page-header.scrolled .main-menu ul li a.active {
   color: #d8a752 !important;
}

/* رقم الهاتف يبقى أبيض */
#sisf-page-header.scrolled .eh-header-phone,
#sisf-page-header.scrolled .eh-header-phone span {
   color: rgba(255, 255, 255, 0.92) !important;
}

/* زر الهامبرجر يبقى أبيض */
#sisf-page-header.scrolled .navbar-sidebar button i {
   color: #fff !important;
}

/* ── 4. Fallback للمتصفحات التي لا تدعم backdrop-filter ──────
   @supports يضمن تطبيق الـ fallback فقط عند عدم الدعم          */
@supports not (backdrop-filter: blur(1px)) {
   #sisf-page-header.scrolled .sisf-centered-header-wrapper {
      background: rgba(29, 40, 58, 0.96) !important;
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25) !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
   }
}

/* ── 5. الرجوع للأعلى — تُزال جميع التأثيرات تلقائياً ────────
   (CSS يتعامل مع إزالة class="scrolled" التي يضيفها JS)        */

/* ── 6. Mobile: زر الهامبرجر أبيض في الحالتين ──────────────── */
@media (max-width: 991px) {
   .eh-header .navbar-sidebar button i,
   #sisf-page-header.scrolled .navbar-sidebar button i {
      color: #fff !important;
   }

   /* اجعل الـ navbar أضيق قليلاً على الموبايل */
   #sisf-page-header.scrolled .sisf-centered-header-wrapper {
      background: rgba(10, 15, 30, 0.88) !important;
      -webkit-backdrop-filter: blur(14px) !important;
      backdrop-filter: blur(14px) !important;
   }
}