/* Small additions for standalone static export */

a{color:inherit}
.icon{display:inline-flex;align-items:center;justify-content:center;opacity:.92;line-height:0}
.icon svg{width:100%;height:100%}
.nav-link{opacity:.85}
.nav-link:hover{opacity:1}

/* ===== Tailwind-animate compatibility (used heavily in the original Next app) ===== */
.animate-in{animation-fill-mode:both;animation-duration:700ms}
.fade-in{animation-name:fadeIn}
.zoom-in{animation-name:zoomIn}
.slide-in-from-bottom-4{--enter-y:1rem;animation-name:slideInFromBottom}
.slide-in-from-bottom-8{--enter-y:2rem;animation-name:slideInFromBottom}
.slide-in-from-bottom-12{--enter-y:3rem;animation-name:slideInFromBottom}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes zoomIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes slideInFromBottom{from{opacity:0;transform:translateY(var(--enter-y,2rem))}to{opacity:1;transform:translateY(0)}}

/* Re-map Tailwind delay/duration utilities to animation too */
.delay-100{animation-delay:100ms}
.delay-200{animation-delay:200ms}
.delay-300{animation-delay:300ms}
.delay-500{animation-delay:500ms}
.duration-300{animation-duration:300ms}
.duration-500{animation-duration:500ms}
.duration-700{animation-duration:700ms}
.duration-1000{animation-duration:1000ms}




/* ===== Navbar pill (match screenshot/video) ===== */
.nav-pill{
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.nav-pill .nav-link{
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .01em;
  color: rgba(203,213,225,.92);
}
.nav-pill .nav-link:hover{
  color: #ffffff;
}

/* ===== Contact tabs + form (match screenshot/video) ===== */
.contact-tabs{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 6px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  width: fit-content;
}
.contact-tab{
  height: 30px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 11px;
  color: rgba(203,213,225,.9);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.contact-tab.is-active{
  background: rgba(99,102,241,.85);
  color: #fff;
  box-shadow: 0 10px 25px rgba(99,102,241,.35);
}
.contact-card{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  box-shadow: 0 22px 60px rgba(0,0,0,.45);
}
.field-label{
  display:block;
  font-size: 11px;
  color: rgba(203,213,225,.75);
  margin-bottom: 6px;
}
.field-input{
  width: 100%;
  height: 34px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
  color: #e5e7eb;
  outline: none;
}
.field-input:focus{
  border-color: rgba(99,102,241,.6);
  box-shadow: 0 0 0 4px rgba(99,102,241,.18);
}
.field-textarea{
  height: auto;
  min-height: 140px;
  resize: vertical;
  padding-top: 10px;
}
.contact-submit{
  width: 100%;
  height: 34px;
  border-radius: 8px;
  background: rgba(99,102,241,.9);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid rgba(99,102,241,.35);
  box-shadow: 0 12px 28px rgba(99,102,241,.25);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.contact-submit:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(99,102,241,.35);
}
.contact-submit:active{ transform: translateY(0); }

/* ===== Footer (match screenshot/video) ===== */
.site-footer{
  margin-top: 64px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.55);
}
.footer-divider{
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer-link{
  color: rgba(203,213,225,.78);
  transition: color .2s ease;
}
.footer-link:hover{
  color: #ffffff;
}

/* Softer cards used on contact left column */
.card-soft{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  box-shadow: 0 20px 55px rgba(0,0,0,.38);
}
.card-Use cases{
  background: linear-gradient(135deg, rgba(99,102,241,.14), rgba(34,211,238,.08));
  border-color: rgba(34,211,238,.18);
}
/* ===== Footer compact + clearer ===== */
.site-footer{
  margin-top: 44px;                 /* أصغر */
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.62);
}

.site-footer .container{
  max-width: 1100px;                /* يلمّ المحتوى */
}

.site-footer .pt-14{ padding-top: 34px !important; }
.site-footer .pb-10{ padding-bottom: 22px !important; }

.site-footer .grid{
  gap: 22px !important;             /* أقل مسافة بين الأعمدة */
}

.site-footer h4{
  font-size: 12px;
  letter-spacing: .02em;
  margin-bottom: 10px !important;
  color: rgba(255,255,255,.92);
}

.site-footer p,
.site-footer li,
.site-footer span{
  color: rgba(203,213,225,.86) !important; /* أوضح */
}

.site-footer .text-gray-400{ color: rgba(203,213,225,.78) !important; }
.site-footer .text-gray-300{ color: rgba(203,213,225,.86) !important; }

.footer-link{
  color: rgba(226,232,240,.86) !important; /* أوضح */
  text-decoration: none;
}
.footer-link:hover{
  color: #ffffff !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-divider{
  border-top: 1px solid rgba(255,255,255,.08);
  opacity: .9;
}

/* النص السفلي: أصغر، أقل مساحة، أوضح */
.site-footer .py-8{ padding-top: 18px !important; padding-bottom: 18px !important; }
.site-footer .text-\[11px\]{ font-size: 10.5px !important; }
.site-footer .text-\[10px\]{ font-size: 10px !important; }

.site-footer .max-w-3xl{
  max-width: 720px !important;      /* يخفف العرض مثل الصورة */
}
.site-footer .leading-relaxed{
  line-height: 1.55 !important;
}

.site-footer .text-gray-500{ color: rgba(148,163,184,.86) !important; }
.site-footer .text-gray-600{ color: rgba(148,163,184,.78) !important; }

/* شعار/اسم الشركة: أصغر قليلًا */
.site-footer img{ opacity:.95 }
.site-footer .text-lg{ font-size: 14px !important; }
.site-footer .h-7{ height: 24px !important; }
.site-footer .w-7{ width: 24px !important; }

/* موبايل: صفوف أنظف */
@media (max-width: 768px){
  .site-footer .pt-14{ padding-top: 26px !important; }
  .site-footer .grid{ gap: 18px !important; }
}
/* ================================
   REMOVE CTA BACKGROUNDS (GLOBAL)
   ================================ */

/* Book a Demo – remove filled background */
.bg-irontic-purple{
  background-color: transparent !important;
  box-shadow: none !important;
  border: 1px solid rgba(255,255,255,.15) !important;
}

/* Learn More – remove hover background */
.hover\:bg-irontic-purple\/10:hover{
  background-color: transparent !important;
}

/* Optional safety (if used elsewhere) */
.hover\:bg-irontic-cyan\/10:hover,
.hover\:bg-irontic-indigo\/10:hover{
  background-color: transparent !important;
}
/* ================================
   FORCE REMOVE BOOK A DEMO COLOR
   ================================ */

/* Remove emerald background */
.bg-emerald-600,
.hover\:bg-emerald-700:hover{
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Keep it as outline button */
.bg-emerald-600{
  border: 1px solid rgba(255,255,255,.15) !important;
  color: #fff !important;
}
/* Remove border from Book a Demo completely */
.bg-emerald-600{
  border: none !important;
}
/* Reduce footer container vertical padding */
.container.py-8{
  padding-top: 8px !important;
  padding-bottom: 12px !important;
}
/* Force compact legal footer block */
.legal-footer{
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.legal-footer p{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1.25 !important;
}

.legal-footer .mt-1{ margin-top: 4px !important; }
.legal-footer .mt-2{ margin-top: 4px !important; }
.legal-footer .mt-3{ margin-top: 6px !important; }
.legal-footer .mt-6{ margin-top: 8px !important; }
footer{ padding-top: 12px !important; padding-bottom: 12px !important; }
/* ================================
   COMPACT GLOBAL FOOTER (FINAL)
   ================================ */

/* 1) Reduce divider spacing */
.footer-divider{
  margin-top: 8px !important;
  margin-bottom: 8px !important;
  height: 1px; /* إذا كان خط */
}

/* 2) Reduce footer container padding */
.footer-divider + .container{
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* 3) Tighten legal text spacing */
.footer-divider + .container p{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1.25 !important;
}

/* 4) Reduce specific Tailwind margins */
.footer-divider + .container .mt-2{
  margin-top: 4px !important;
}
.footer-divider + .container .mt-6{
  margin-top: 4px !important;
}

/* ================================
   FINAL: Compact bottom legal block
   ================================ */

/* قلّل فراغ الديفايدر */
.site-footer .footer-divider{
  margin: 0 !important;
  height: 1px !important;
}

/* قلّل ارتفاع الجزء السفلي بالكامل */
.site-footer .legal-footer{
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* شدّ النص وامنع فراغات إضافية */
.site-footer .legal-footer p{
  margin: 0 !important;
  line-height: 1.25 !important;
}

/* قلّل المسافات اللي كانت mt-2 و mt-6 */
.site-footer .legal-footer .mt-2{ margin-top: 4px !important; }
.site-footer .legal-footer .mt-6{ margin-top: 6px !important; }

/* حدّ العرض أكثر عشان يقل الطول */
.site-footer .legal-footer .max-w-3xl{
  max-width: 720px !important;
}

/* تصغير خفيف للخط (اختياري) */
.site-footer .legal-footer .text-\[11px\]{ font-size: 10px !important; }
.site-footer .legal-footer .text-\[10px\]{ font-size: 10px !important; }
/* Remove hover background (rose) */
.hover\:bg-rose-500\/10:hover{
  background-color: transparent !important;
}
/* Enlarge deployed tools cards */


.hero-btn{
  height: 40px !important;          /* تصغير */
  padding: 0 20px !important;       /* تصغير عرض */
  font-size: 14px !important;       /* أصغر شوي */
  border-radius: 999px !important;  /* كيرفي */
  line-height: 40px !important;
}

/* مسافة أنيقة بين Feedback و Success Story */
.feedback-section{
  margin-bottom: 24px; /* جرّب 24 أو 32 */
}

.success-story-section{
  margin-top: 0;
}
/* =========================
   Irontic AI Logo Style
   =a[href="index"] > div{
  width: 56px !important;   /* كان 32px (h-8) */
  height: 56px !important; /* كان 32px */
}

/* تأكيد أن الصورة تملأ الحاوية */
a[href="index"] img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Mobile */
@media (max-width: 768px){
  a[href="index"] > div{
    width: 44px !important;
    height: 44px !important;
  }
}

/* Desktop */
@media (min-width: 769px){
  a[href="index"] > div{
    width: 56px !important;
    height: 56px !important;
  }
}