/* ==================================================
   Doortech — Light Corporate Theme (Responsive Edition)
   ==================================================
   ▸ Light mode, fluid type, responsive header with burger, nav centered on mobile.
   ==================================================*/

/********** 1. Root & Reset **********/
:root{
  --primary:#ff003c;
  --accent:#ff6b6b;
  --text:#232323;
  --bg-dark:#ffffff;
  --bg-mid:#f4f5f9;
  --bg-light:#ffffff;
  --glass-bg:#ffffff;
  --glass-brd:#e6e7ec;
  --shadow:0 4px 18px rgba(15,23,42,.06);
  --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0;scroll-behavior:smooth}
html{font-size:clamp(0.85rem,0.9vw+0.55rem,1.1rem)}
body{
  font-family:'Tajawal',sans-serif;line-height:1.8;overflow-x:hidden;
  background:#ffffff;
  color:var(--text);
}
a{
      text-decoration: none;
}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--primary);outline-offset:2px;border-radius:4px;
}
/********** 2. Animations & Helpers **********/
.fade-in{animation:fade .8s ease forwards}
@keyframes fade{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/********** 3. Header **********/
header{
  position:fixed;inset:0 0 auto 0;padding:12px 48px;
  background:rgba(255,255,255,.85);backdrop-filter:blur(14px) saturate(160%);
  display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid var(--glass-brd);z-index:1000;
  animation:slideDown .9s ease-out;
}
.logo img {
  height: 52px;
  width: auto;
  max-width: 120px;
  display: block;
}
.logo
{
    display: flex;
    align-items: center;
}
@keyframes slideDown{from{transform:translateY(-110%);opacity:0}to{transform:none;opacity:1}}
.logo{font-weight:800;font-size:2rem;letter-spacing:1px;color:var(--text)}

nav ul{display:flex;gap:38px;list-style:none}
nav a{position:relative;color:var(--text);text-decoration:none;font-weight:500;letter-spacing:.4px;transition:color .3s}
nav a:hover{color:var(--primary)}
nav a::after{content:"";position:absolute;bottom:-6px;right:0;height:2px;width:0;background:linear-gradient(90deg,var(--primary) 0%,var(--accent) 100%);transition:width .35s ease}
nav a:hover::after{width:100%;left:0}

.contact-button{
  background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);color:#fff;
  padding:11px 26px;border:none;border-radius:var(--r);font-weight:700;cursor:pointer;
  display:flex;align-items:center;gap:8px;
  transition:transform .35s;
}
.contact-button:hover{transform:scale(1.07)}

/* Burger */
.burger{display:none;width:28px;cursor:pointer;z-index:1100}
.burger span{display:block;width:100%;height:3px;background:var(--text);margin:5px 0;border-radius:2px;transition:transform .35s,opacity .35s}
.burger.active span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.active span:nth-child(2){opacity:0}
.burger.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/********** 4. Hero **********/
.container{height:100vh;display:flex;justify-content:space-between;align-items:center;gap:40px;position:relative;overflow:hidden;padding:0 6vw}
.hero-scene{flex:1 1 460px;max-width:640px}
.hero-scene img{width:100%;height:auto;max-height:80vh;display:block;border-radius:var(--r)}
.stars{display:none}
.hero-text{flex:1 1 360px;max-width:480px;text-align:right;opacity:0;z-index:2;animation:heroFadeIn 1.2s ease .4s forwards}
@keyframes heroFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.hero-text h1{font-size:3.2rem;font-weight:800;margin-bottom:14px;color:#1a1a1a;line-height:1.25}
.hero-text p{font-size:1.35rem;color:#555}
/**********about ***********/
/* ===== About Section ===== */
#about {
  padding: 100px 10vw;
  background: var(--bg-light);
}
#about h2 {
  color: var(--primary);
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 46px;
  display: inline-block;
  border-bottom: 2px solid var(--primary);
  padding-bottom: 12px;
}
.about-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}
.about-img {
  flex: 1 1 400px;
  max-width: 500px;
}
.about-img img {
  width: 100%;
  border-radius: var(--r);
  box-shadow: 0 8px 24px rgba(15,23,42,.12);
}
.about-text {
  flex: 1 1 450px;
  font-size: 1.15rem;
  line-height: 2;
  color: #444;
}
.about-text p {
  margin-bottom: 1.4rem;
}
.about-text span {
  color: var(--primary);
  font-weight: 600;
}
.about-text strong {
  color: #111;
}

/* 📱 مظهر الهاتف */
@media (max-width: 768px) {
  .about-wrapper {
    flex-direction: column;
    text-align: center;
  }
  .about-text {
    font-size: 1rem;
  }
  .logo img {
  height: 40px;
}
.logo {
  margin-right: auto;
}
}


/**********5 Section ***********/
/* Fallback layout in case the Splide carousel script/CSS fails to load — degrades to a centered wrapping row instead of a huge vertical stack. Splide's own mounted styles override this once it initializes. */
.splide__list{display:flex;flex-wrap:wrap;justify-content:center;list-style:none}
.splide__slide {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  margin-bottom: 10px;
}
.splide__slide img{width:auto;max-width:150px;max-height:90px;object-fit:contain}

/* ✅ التغليف الدائري الكامل */
.circle-wrap {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.circle-wrap:hover {
  transform: scale(1.06);
}

.circle-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* ✅ يعرض كل محتوى الصورة بدون قص */
  border-radius: 50%;
  filter: grayscale(100%) !important;
  transition: filter 0.3s;
}

.circle-wrap img:hover {
  filter: grayscale(0) !important;
}

/* ✅ أزرار السلايدر */
.splide__arrow {
  background: var(--primary);
  border: none;
  color: white;
  width: 40px;
  height: 40px;
  font-size: 1.5rem;
  border-radius: 50%;
  transition: 0.3s;
}
.splide__arrow:hover {
  background: var(--accent);
}
.splide__pagination
{
    bottom: -1.5rem !important;
}

/* ===== Gallery Grid (ألصقها في آخر ملف CSS لديك إن لم تكن موجودة) ===== */
#gallery > div,
#gallery .grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:22px;
  margin-top:40px;
}
#gallery > div img,
#gallery .grid img{
  width:100%;
  height:auto;           /* يجعل الارتفاع يتبع عرض الصورة */
  display:block;         /* يُزيل المسافة السفلية الافتراضية */
  border-radius:var(--r);
  filter:brightness(0.95) contrast(1.08);
  transition:transform .4s, filter .4s;
}
#gallery > div img:hover,
#gallery .grid img:hover{
  transform:scale(1.06) rotate(.3deg);
  filter:brightness(1) contrast(1);
}

/* ميديا كويري للهاتف (إن لم تكن موجودة) */
@media (max-width:768px){
  #gallery > div,
  #gallery .grid{
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:20px;
  }
}

/********** 6. Sections **********/
section{padding:110px 10vw;border-top:1px solid var(--glass-brd)}
section:nth-of-type(odd){background:var(--bg-mid)}
section:nth-of-type(even){background:var(--bg-light)}
section h2{font-size:2.5rem;color:var(--primary);text-align:center;margin-bottom:46px;display:inline-block;padding-bottom:12px;border-bottom:2px solid var(--primary);letter-spacing:1px}
.card{background:var(--glass-bg);border:1px solid var(--glass-brd);padding:24px;border-radius:var(--r);box-shadow:var(--shadow);transition:transform .35s,box-shadow .35s}
.card:hover{transform:translateY(-6px);box-shadow:0 10px 28px rgba(15,23,42,.1)}
.card h3{color:#1a1a1a;margin:14px 0 8px}
.card p{color:#555}
.card i{color:var(--primary)}
.section-intro{max-width:700px;margin:0 auto;color:#555;line-height:1.8}
.products-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:30px;margin-top:40px;text-align:center}
.section-note{max-width:700px;margin:40px auto 0;color:#555;line-height:1.8}
.brands-title{color:var(--text);font-size:1.3rem;margin:36px 0 20px}
.brands-strip{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px}

.product-card{padding:0;overflow:hidden}
.product-card img{width:100%;height:180px;object-fit:cover;display:block;border-radius:var(--r) var(--r) 0 0}
.product-card h3,.product-card p{padding:0 20px}
.product-card h3{margin-top:16px}
.product-card p{padding-bottom:20px}

.brands-strip img{height:52px;width:auto;background:#fff;border:1px solid var(--glass-brd);border-radius:8px;padding:8px 16px;object-fit:contain;box-shadow:var(--shadow)}
#counters > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 56px;
  margin-top: 56px;
}
#counters > div > div {
  min-width: 180px;
  padding: 28px 20px;
  border-radius: var(--r);
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--shadow);
  transition: transform .3s;
  font-size: 1.1rem;
}
#counters > div > div:hover {
  transform: translateY(-6px);
}
#counters .counter {
  font-size: 2.6rem;
  margin: 16px 0 8px;
  color: var(--primary);
}
#counters p {
  margin: 0;
  font-size: 1.05rem;
  color: #555;
  font-weight: 500;
  letter-spacing: 0.3px;
  line-height: 1.4;
}
img{width:100%;border-radius:var(--r);transition:transform .35s}
img:hover{transform:scale(1.05) rotate(.5deg)}
/* ================================
   Contact Section - RTL + Doortech Theme
   ================================ */

#contact {
  background: var(--bg-mid);
  padding: 90px 10vw;
  text-align: center;
  direction: rtl;
}

#contact h2 {
  font-size: 2.5rem;
  font-weight: 800;
  background: linear-gradient(to right, var(--primary), var(--accent));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  margin-bottom: 0.5rem;
}

#contact .fancy-underline {
  width: 70px;
  height: 4px;
  background: linear-gradient(to right, var(--accent), var(--primary));
  border-radius: 10px;
  margin: 0 auto 48px;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 36px;
  align-items: start;
}

.contact-box {
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  border-radius: 16px;
  padding: 28px;
  box-shadow: var(--shadow);
}

.contact-box h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1.2rem;
  text-align: right;
}

.contact-box p,
.contact-box a {
  color: #444;
  font-size: 0.96rem;
  line-height: 1.7;
  display: block;
  margin-bottom: 8px;
  text-align: right;
}

.contact-box a:hover {
  color: var(--primary);
}

.contact-box svg {
  width: 20px;
  height: 20px;
  margin-left: 12px;
  color: var(--primary);
  flex-shrink: 0;
}

.contact-box .row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 18px;
  flex-direction: row-reverse;
}

.contact-box form label {
  display: block;
  font-size: 0.9rem;
  color: #94a3b8;
  margin-bottom: 6px;
  text-align: right;
}

.contact-box input,
.contact-box textarea {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #d7d9e0;
  background-color: #fff;
  color: #232323;
  font-size: 0.95rem;
  transition: 0.3s;
}

.contact-box input:focus,
.contact-box textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(255, 0, 60, 0.4);
}

.contact-box textarea {
  resize: none;
  min-height: 120px;
}

.contact-box button {
  width: 100%;
  padding: 14px;
  border-radius: var(--r);
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border: none;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: 0.35s;
  box-shadow: 0 0 10px rgba(255,0,60,0.2);
}

.contact-box button:hover {
  transform: scale(1.03);
}

.contact-socials {
  margin-top: 20px;
  display: flex;
  gap: 12px;
  justify-content: flex-start;
  flex-direction: row-reverse;
}

.contact-socials a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(255, 0, 60, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  transition: 0.3s;
}

.contact-map {
  margin-top: 20px;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--glass-brd);
}

.contact-map iframe {
  display: block;
}

.contact-socials a:hover {
  background-color: var(--primary);
  color: #fff;
}

/********** 7. Footer **********/
footer{background:var(--bg-mid);color:#777;text-align:center;padding:20px 10vw;font-size:.85rem;line-height:1.4;border-top:1px solid var(--glass-brd)}

/***********************************************************
  Responsive — Mobile Adjustments
***********************************************************/
@media(max-width:768px){
  /* --- Hero mobile layout --- */
  .container{height:auto;min-height:100vh;flex-direction:column;justify-content:center;padding-top:100px;padding-bottom:40px;gap:24px}
  .hero-text{order:-1;margin-bottom:0;opacity:1;text-align:center;max-width:100%;animation:none}
  .hero-scene{width:100%;max-width:100%}
  .hero-scene img{width:85%;max-height:55vh;margin:0 auto}

  /* existing rules */
  header{padding:12px 22px;display:flex;justify-content:space-between;align-items:center}
  .logo{font-size:1.6rem;order:2;flex:1;justify-content:center}
  .burger{display:block;order:1}
  .contact-button{order:3}
  nav ul{
    position:fixed;top:68px;left:0;width:100%;flex-direction:column;
    gap:24px;align-items:center; /* ➊ توسيط أفقي */
    background:#fff;padding:2rem 0;border-top:1px solid var(--glass-brd);box-shadow:var(--shadow);
    transform:translateY(-120%);transition:transform .4s;
  }
  nav ul.show{transform:translateY(0)}
  nav ul li a{width:100%;text-align:center} /* ➋ توسيط النص */
  .contact-button{width:38px;height:38px;padding:0;border-radius:50%;justify-content:center}
  .contact-button .btn-label{display:none}
  .contact-button i{font-size:1rem}
  .hero-text h1{font-size:2.4rem}
  .hero-text p{font-size:1.05rem}
  section{padding:65px 6vw}
}
@media(max-width:480px){
  /* Further compact hero */
  .hero-scene img{width:92%;max-height:50vh}
  .hero-text h1{font-size:1.9rem}
  .hero-text p{font-size:.95rem}
  /* existing rules */
  header{padding:10px 16px}
  .hero-text h1{font-size:2rem}
  .counter{font-size:1.8rem}
  img:hover{transform:none}
}
@media(max-width:360px){
  html{font-size:0.78rem}
  .logo{font-size:1.4rem}
  .burger{width:22px}
  nav ul{gap:18px;top:56px}
  section{padding:48px 5vw}
}

/* ==================================================
   JS Helper (include once before </body>):
   ==================================================
   const burger  = document.querySelector('.burger');
   const navList = document.querySelector('nav ul');
   burger.addEventListener('click',()=>{
     burger.classList.toggle('active');
     navList.classList.toggle('show');
   });
*/