/* Galaxy Tab Responsive Design - Arabic RTL - Correct dimensions for your device */
@media (min-width: 360px) and (max-width: 1200px) {
  /* Header - Ensure it appears above everything (RTL) */
  html body .navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 20px !important;
    height: 70px !important;
  }

  html body .nav-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 1200px !important;
  }

  html body .nav-menu {
    display: flex !important;
    align-items: center !important;
    gap: 30px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .nav-actions {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
  }

  /* Hero Section - Simple Vertical Layout (RTL) */
  html body .hero {
    min-height: auto !important;
    padding: 90px 20px 20px 20px !important;
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    overflow: hidden !important;
  }

  html body .hero-main {
    width: 100% !important;
    text-align: center !important;
    order: 1 !important;
  }

  /* Hero Actions - Make sure button appears */
  html body .hero-actions {
    display: flex !important;
    gap: 20px !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 10px !important;
    width: 100% !important;
  }

  html body .hero-actions .btn-primary {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: 150px !important;
    padding: 12px 24px !important;
    background: #00478e !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    text-align: center !important;
  }

  html body .hero-text h1,
  html body .hero-text p {
    text-align: right !important; /* RTL */
  }

  html body .hero-actions {
    justify-content: flex-end !important; /* RTL */
  }

  /* Visual Group - Match Main Design */
  html body .visual-group {
    display: none !important;
    flex-direction: row !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 1002 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* House Image Card - Match Main Design */
  html body .house-image-card {
    width: 260px !important;
    height: 170px !important;
    border-radius: 1000px 20px 20px 20px !important; /* Curved left edge like main */
    overflow: hidden !important;
    background: transparent !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 1001 !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    box-shadow: 0px 0.76px 5.82px 0px rgba(0, 0, 0, 0.02),
      0px 1.78px 13.52px 0px rgba(0, 0, 0, 0.03),
      0px 3.19px 24.28px 0px rgba(0, 0, 0, 0.04),
      0px 5.3px 40.3px 0px rgba(0, 0, 0, 0.05),
      0px 8.73px 66.4px 0px rgba(0, 0, 0, 0.06),
      0px 15.26px 116.04px 0px rgba(0, 0, 0, 0.07),
      0px 33px 251px 0px rgba(0, 0, 0, 0.09) !important; /* Match main shadow */
    order: 2 !important;
  }

  html body .house-image-card .house-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Experience Badge - Match Main Design */
  html body .hero .experience-badge {
    width: 160px !important;
    height: 145px !important;
    border-radius: 20px !important;
    background: transparent !important;
    backdrop-filter: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 1002 !important;
    box-shadow: 0px 0.76px 5.82px 0px rgba(0, 0, 0, 0.02),
      0px 1.78px 13.52px 0px rgba(0, 0, 0, 0.03),
      0px 3.19px 24.28px 0px rgba(0, 0, 0, 0.04),
      0px 5.3px 40.3px 0px rgba(0, 0, 0, 0.05),
      0px 8.73px 66.4px 0px rgba(0, 0, 0, 0.06),
      0px 15.26px 116.04px 0px rgba(0, 0, 0, 0.07),
      0px 33px 251px 0px rgba(0, 0, 0, 0.09) !important; /* Match main shadow */
    order: 1 !important;
  }

  /* Badge Content - Match Main Design */
  html body .hero .experience-badge .badge-content-frame {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important; /* Reduced gap */
    width: 100% !important;
    padding: 20px 15px !important; /* Reduced padding */
    height: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  html body .hero .experience-badge .badge-text-content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  html body .hero .experience-badge .badge-number {
    font-family: "SomarSans", sans-serif !important; /* Match main design */
    font-weight: 600 !important; /* Match main design */
    font-size: 40px !important; /* Reduced size */
    line-height: 1.0875em !important; /* Match main design */
    color: #141f1f !important; /* Match main design */
    text-align: right !important; /* RTL */
    margin: 0 !important;
    position: relative !important;
  }

  /* Let JavaScript handle the counter animation */
  html body .hero .experience-badge .badge-number {
    animation: none !important;
  }

  html body .hero .badge-description {
    font-family: "SomarSans", sans-serif !important; /* Match main design */
    font-weight: 400 !important; /* Match main design */
    font-size: 9px !important; /* Reduced size */
    line-height: 1.3em !important; /* Tighter line height */
    color: #4e5556 !important; /* Match main design */
    text-align: right !important; /* RTL */
    direction: rtl !important;
    margin: 0 !important;
    margin-top: 0 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Hero Card - Mobile Layout with Blue Gradient (RTL) */
  html body .hero .hero-card,
  html body .hero-visual.animate .hero-card {
    width: 100% !important;
    max-width: 450px !important;
    min-width: 0 !important;
    height: 170px !important;
    border-radius: 14px !important;
    border: none !important;
    box-sizing: border-box !important;
    background: linear-gradient(135deg, #00478e 0%, #003366 100%) !important;
    display: block !important;
    margin: 20px auto 0 auto !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 1003 !important;
    order: 3 !important;
    padding: 0 !important;
  }

  /* Hero Card Content - White Text on Right for Arabic */
  html body .card-content-frame {
    padding: 18px 10px 18px 14px !important;
    top: 18px !important;
    right: 10px !important;
    left: auto !important;
    position: absolute !important;
    direction: rtl !important;
    gap: 4px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  html body .card-tagline {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    direction: rtl !important;
    text-align: right !important;
  }

  html body .card-heading {
    font-size: 19px !important;
    width: 100% !important;
    max-width: 240px !important;
    text-align: right !important;
    direction: rtl !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    line-height: 1.2em !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    margin: 0 !important;
    margin-top: -2px !important;
  }

  html body .card-tagline-frame {
    flex-direction: row-reverse !important;
    gap: 8px !important;
    direction: rtl !important;
    margin-bottom: 0 !important;
  }

  html body .tagline-line {
    width: 40px !important;
    height: 1px !important;
    background: #ffffff !important;
    opacity: 0.9 !important;
  }

  /* Progress bars on left for Arabic */
  html body .card-progress-bars {
    top: 22px !important;
    left: 14px !important;
    right: auto !important;
  }

  html body .progress-bar-1 {
    width: 35px !important;
    height: 50px !important;
  }

  html body .progress-bar-2 {
    width: 35px !important;
    height: 72px !important;
  }

  html body .progress-bar-3 {
    width: 35px !important;
    height: 92px !important;
  }

  /* Ensure all text in bottom card is white */
  html body .hero-card * {
    color: #ffffff !important;
  }

  /* Visual Group - Side by side layout for house and badge (RTL) */
  html body .visual-group {
    display: none !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    justify-content: space-between !important;
    align-items: center !important;
    z-index: 1000 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* House Image Card - Right side for Arabic (RTL), with background */
  html body .house-image-card {
    position: relative !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    width: 240px !important;
    height: 165px !important;
    border-radius: 14px 100px 14px 14px !important;
    overflow: hidden !important;
    z-index: 1001 !important;
    background: transparent !important;
    box-shadow: 0px 0.76px 5.82px 0px rgba(0, 0, 0, 0.02),
      0px 1.78px 13.52px 0px rgba(0, 0, 0, 0.03),
      0px 3.19px 24.28px 0px rgba(0, 0, 0, 0.04),
      0px 5.3px 40.3px 0px rgba(0, 0, 0, 0.05),
      0px 8.73px 66.4px 0px rgba(0, 0, 0, 0.06),
      0px 15.26px 116.04px 0px rgba(0, 0, 0, 0.07),
      0px 33px 251px 0px rgba(0, 0, 0, 0.09) !important;
    display: block !important;
    visibility: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    order: 2 !important;
  }

  html body .house-image-card .house-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Experience Badge - Left side for Arabic (RTL) */
  html body .hero .experience-badge {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 190px !important;
    height: 165px !important;
    border-radius: 14px !important;
    z-index: 1002 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    margin: 0 !important;
    order: 1 !important;
  }

  html body .hero .experience-badge .badge-content-frame {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
  }

  html body .hero .experience-badge .badge-text-content {
    text-align: center !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  html body .hero .experience-badge .badge-number {
    font-size: 2rem !important;
    font-weight: bold !important;
    color: #333 !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  html body .hero .experience-badge .badge-description {
    font-size: 0.75rem !important;
    color: #666 !important;
    line-height: 1.4 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-align: right !important;
    direction: rtl !important;
    margin-top: 0 !important;
  }

  html body .hero .hero-card,
  html body .hero-visual.animate .hero-card {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 450px !important;
    min-width: 0 !important;
    height: 150px !important;
    border-radius: 20px !important;
    border: none !important;
    box-sizing: border-box !important;
    z-index: 1003 !important;
    margin: 0 auto !important;
    background: #e0e0e0 !important;
    display: block !important;
    visibility: visible !important;
    transform: none !important;
    padding: 0 !important;
  }

  html body .hero .hero-card .card-content-frame {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 20px 15px 20px 20px !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 1 !important;
    direction: rtl !important;
    gap: 4px !important;
  }

  html body .hero .hero-card .card-heading {
    font-size: 1.2rem !important;
    font-weight: bold !important;
    color: #ffffff !important;
    text-align: right !important;
    direction: rtl !important;
    margin: 0 !important;
    margin-top: -2px !important;
    line-height: 1.2 !important;
  }

  html body .hero .hero-card .card-tagline {
    font-size: 0.9rem !important;
    color: #ffffff !important;
    text-align: right !important;
    direction: rtl !important;
    margin-bottom: 0 !important;
  }

  html body .hero .hero-card .card-tagline-frame {
    flex-direction: row-reverse !important;
    direction: rtl !important;
  }

  /* Why Us Section - Creative Layout (Vertical Stacking RTL) */
  html body .vision-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 30px !important;
    position: relative !important;
  }

  html body .vision-items-grid {
    order: 2 !important;
    position: relative !important;
    z-index: 2 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    padding: 20px !important;
    border-radius: 15px !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-10px) !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
  }

  html body .vision-items-grid:hover {
    transform: translateY(-15px) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
  }

  html body .vision-visual {
    order: 1 !important;
    position: relative !important;
    z-index: 1 !important;
    transform: translateY(10px) !important;
    transition: all 0.3s ease !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: none !important;
    background: transparent !important;
    width: 100% !important;
  }

  html body .vision-visual:hover {
    transform: translateY(5px) scale(1.02) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
  }

  /* Add subtle background pattern */
  html body .vision::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        circle at 20% 80%,
        rgba(120, 119, 198, 0.1) 0%,
        transparent 50%
      ),
      radial-gradient(
        circle at 80% 20%,
        rgba(255, 193, 7, 0.1) 0%,
        transparent 50%
      );
    pointer-events: none;
    z-index: 0;
  }

  /* Our Story Section - Creative Minimalist Design (Match English exactly) */
  html body .about {
    padding: 60px 20px !important;
    background: linear-gradient(135deg, #00478e 0%, #003366 100%) !important;
    position: relative !important;
    overflow: hidden !important;
    direction: ltr !important;
    min-height: auto !important;
  }

  html body .about-background {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
  }

  html body .about-bg-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: right center !important;
    transform: scaleX(-1) !important;
    opacity: 0.4 !important;
  }

  html body .about::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(
      135deg,
      rgba(0, 71, 142, 0.6) 0%,
      rgba(0, 51, 102, 0.7) 100%
    ) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  html body .about-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 40px !important;
    position: relative !important;
    z-index: 2 !important;
  }

  html body .our-story-text {
    width: 100% !important;
    max-width: 500px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    align-items: center !important;
  }

  html body .story-header {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: center !important;
    width: 100% !important;
  }

  html body .story-title {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin: 0 !important;
    text-align: center !important;
  }

  html body .story-subtitle {
    font-size: 24px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    margin: 0 !important;
    text-align: center !important;
    line-height: 1.4 !important;
  }

  html body .story-description {
    font-size: 16px !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0 !important;
    text-align: center !important;
    line-height: 1.5 !important;
  }

  html body .about-visual {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
  }

  html body .about-visual .experience-badge {
    width: 200px !important;
    height: 200px !important;
    min-width: 200px !important;
    min-height: 200px !important;
    max-width: 200px !important;
    max-height: 200px !important;
    border-radius: 50% !important;
    background: linear-gradient(
      208deg,
      rgba(0, 167, 225, 1) 3%,
      rgba(0, 70, 141, 1) 100%
    ) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
    aspect-ratio: 1 / 1 !important;
  }

  html body .about-visual .badge-decoration {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    z-index: 1 !important;
  }

  html body .about-visual .badge-content {
    position: relative !important;
    text-align: center !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
  }

  html body .about-visual .badge-number {
    font-family: "SomarSans", sans-serif !important;
    font-size: 40px !important;
    font-weight: 700 !important;
    line-height: 1.21em !important;
    text-align: center !important;
    color: #ffffff !important;
    margin: 0 !important;
  }

  html body .about-visual .badge-text {
    font-family: "SomarSans", sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.21em !important;
    text-align: center !important;
    color: #ffffff !important;
    margin: 0 !important;
  }

  /* Our Solutions Section - Creative Minimalist Design (RTL) */
  html body .how-it-works {
    padding: 60px 20px !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
    position: relative !important;
  }

  html body .how-it-works::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        circle at 20% 30%,
        rgba(0, 71, 142, 0.05) 0%,
        transparent 50%
      ),
      radial-gradient(
        circle at 80% 70%,
        rgba(255, 193, 7, 0.05) 0%,
        transparent 50%
      );
    pointer-events: none;
    z-index: 1;
  }

  html body .how-it-works .section-header {
    text-align: center !important;
    margin-bottom: 40px !important;
    position: relative !important;
    z-index: 2 !important;
  }

  html body .how-it-works .section-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #141f1f !important;
    margin-bottom: 10px !important;
  }

  html body .how-it-works .section-description {
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #4e5556 !important;
    margin: 0 !important;
  }

  html body .how-it-works-content {
    position: relative !important;
    z-index: 2 !important;
  }

  html body .steps-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
    align-items: center !important;
  }

  html body .steps-left,
  html body .steps-right {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
  }

  html body .step-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 15px !important;
    padding: 20px !important;
    background: rgba(255, 255, 255, 0.8) !important;
    border-radius: 15px !important;
    border: 1px solid rgba(0, 71, 142, 0.1) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    backdrop-filter: blur(10px) !important;
    transition: all 0.3s ease !important;
  }

  html body .step-item:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1) !important;
  }

  html body .step-number {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #00478e 0%, #003366 100%) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
  }

  html body .step-content {
    flex: 1 !important;
  }

  html body .step-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #141f1f !important;
    margin: 0 !important;
    line-height: 1.4 !important;
  }

  html body .app-mockup {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 20px 0 !important;
    position: relative !important;
  }

  html body .app-mockup .mockup-phone {
    width: 200px !important;
    height: auto !important;
    z-index: 2 !important;
    position: relative !important;
  }

  html body .app-mockup .mockup-bg {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 250px !important;
    height: 250px !important;
    opacity: 0.1 !important;
    z-index: 1 !important;
  }
}