/* NATHR SPACE — Minimal, elegant RTL theme */
:root{
  --brand-dark:#223b39;
  --brand-mid:#7f8c8b;
  --brand-light:#cbd3d1;
  --bg:#f3f5f4;
  --ink:#2b2b2b;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.7;
  background:var(--bg);
  color:var(--ink);
  direction: rtl;
}
.container{max-width:1200px;margin:auto;padding:0 20px}
header{
  background:white;
  position:sticky; top:0; z-index:10;
  border-bottom:1px solid #e7eceb;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.brand{display:flex;align-items:center;gap:14px}
.brand img{height:150px;width:auto;border-radius:8px}
.brand .name{font-weight:700;color:var(--brand-dark)}
nav a{
  text-decoration:none;color:#333;margin:0 10px;padding:8px 12px;border-radius:8px
}
nav a:hover{background:#eef2f1}
.banner {
    position: relative; /* Allows absolute positioning of content */
    overflow: hidden; /* Ensures no overflow */
}

.banner img {
    width: 100%; /* Image covers full width */
    height: 400px; /* Set a fixed height for the banner image */
	object-fit: cover; /* Ensures the image covers the area without distortion */
    display: block; /* Removes bottom space */
}

.banner-content {
    position: absolute; /* Positioned over the image */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for centering */
    text-align: center; /* Center text */
    color: white; /* Text color */
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background for readability */
    padding: 20px; /* Padding around text */
    border-radius: 10px; /* Rounded corners */
}

.banner h2 {
    font-size: 2rem; /* Adjust size as needed */
    margin: 0; /* Remove default margin */
}

.banner p {
    font-size: 1.2rem; /* Font size for the paragraph */
    margin: 10px 0; /* Space between elements */
}

.btn.primary {
    background: var(--brand-dark); /* Button background color */
    color: white; /* Button text color */
    padding: 12px 20px; /* Padding for button */
    border-radius: 10px; /* Rounded corners */
    text-decoration: none; /* Remove underline */
}
.hero{
  display:flex;align-items:center;gap:40px;min-height:60vh;padding:60px 0
}
.hero h1{font-size:40px;margin:0;color:var(--brand-dark)}
.hero p{font-size:18px;color:#444}
.hero .cta{display:flex;gap:12px;margin-top:18px}
.btn{
  display:inline-block;padding:12px 18px;border-radius:10px;text-decoration:none;font-weight:600
}
.btn.primary{background:var(--brand-dark);color:white}
.btn.ghost{border:1px solid var(--brand-dark);color:var(--brand-dark)}
.section{padding:60px 0}
.section h2{margin-top:0;color:var(--brand-dark);font-size:28px}
.grid{
  display:grid;gap:16px
}
.grid.cols-3{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.card{
  background:white;border-radius:14px;overflow:hidden;border:1px solid #e7eceb
}
.card img{display:block;width:100%;height:220px;object-fit:cover;background:#ddd}
.card .pad{padding:14px}
.features{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.feature{background:white;border:1px solid #e7eceb;border-radius:14px;padding:16px}
footer{
  background:#101615;color:#c8d4d2;padding:30px 0;margin-top:40px
}
footer a{color:#c8d4d2;text-decoration:none}
.badge{display:inline-block;background:var(--brand-light);color:#10201d;padding:4px 10px;border-radius:999px;font-size:13px}
.contact{
  display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))
}
.contact .box{background:white;border:1px solid #e7eceb;border-radius:14px;padding:16px}
.gallery{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.small{text-decoration:none;color:#666;font-size:14px}



/* Responsive Design Additions */
img, video {
    max-width: 100%;
    height: auto;
}
.container {
    width: 100%;
    padding: 0 15px;
    margin: 0 auto;
}
@media (max-width: 768px) {
    body {
        font-size: 16px;
    }
    .container {
        padding: 0 10px;
    }
    nav ul {
        flex-direction: column;
        align-items: center;
    }
}
@media (max-width: 480px) {
    body {
        font-size: 14px;
    }
    h1, h2, h3 {
        font-size: 90%;
    }
    .container {
        padding: 0 5px;
    }
}


/* ===== Responsive Enhancements (2025-09-02) ===== */
img, video {max-width: 100%; height: auto; display: block;}
iframe {max-width: 100%;}
.container{max-width:1200px;margin-inline:auto;padding-inline:16px}
/* Safe-area for iPhone (notch) */
body{padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom)}
header, footer{padding-left:calc(16px + env(safe-area-inset-left));padding-right:calc(16px + env(safe-area-inset-right))}

/* Fluid typography */
:root{--step: clamp(0.9rem, 0.85rem + 0.4vw, 1.1rem)}
body{font-size:var(--step)}

/* Grids collapse on small screens */
.grid{display:grid; gap:16px}
.grid-2{grid-template-columns: repeat(2, minmax(0,1fr))}
.grid-3{grid-template-columns: repeat(3, minmax(0,1fr))}
@media (max-width: 900px){
  .grid-3{grid-template-columns: repeat(2, minmax(0,1fr))}
}
@media (max-width: 640px){
  .grid-2, .grid-3{grid-template-columns: 1fr}
  nav a{padding:10px 12px; display:block}
}

/* Buttons & tap targets */
button, .btn, a.button{
  min-height:44px; padding:10px 16px; border-radius:10px; text-decoration:none;
}
a[href^="tel:"], a[href*="wa.me"]{white-space:nowrap}

/* Make tables scroll on narrow screens */
.table-wrap{overflow:auto}
table{border-collapse:collapse; width:100%}

/* Hero image scaling */
.hero img{width:100%; height:auto; object-fit:cover}

/* Forms */
input, select, textarea{width:100%; max-width:100%;}

/* High-contrast focus ring for accessibility */
:focus{outline:2px dashed var(--brand-mid); outline-offset:2px}