/* ================================
   Ultra Premium UI Theme (RTL-friendly)
   ================================ */

/* 1) Design Tokens */
:root{
  /* Background */
  --bg: #f4f6fb;
  --bg-2: #eef2ff;

  /* Surfaces */
  --surface: rgba(255,255,255,.86);
  --surface-strong: rgba(255,255,255,.95);

  /* Text */
  --text: #0f172a;
  --muted: #64748b;

  /* Brand */
  --primary: #0d6efd;
  --primary-600: #0b5ed7;
  --accent: #f1c40f;

  /* Radius */
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-xl: 28px;

  /* Shadows */
  --shadow-sm: 0 10px 24px rgba(15,23,42,.08);
  --shadow-md: 0 24px 60px rgba(15,23,42,.14);

  /* Borders / Focus ring */
  --border: 1px solid rgba(15,23,42,.10);
  --border-soft: 1px solid rgba(13,110,253,.14);
  --ring: 0 0 0 4px rgba(13,110,253,.18);

  /* Motion */
  --t-fast: .18s ease;
  --t-med: .38s cubic-bezier(.2,.8,.2,1);

  /* Layout */
  --container-max: 1200px;
}

/* 2) Base */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.8;
  color: var(--text);
  text-rendering: optimizeLegibility;

  /* Premium layered background */
  background:
    radial-gradient(1100px 600px at 92% -12%, rgba(13,110,253,.14), transparent 55%),
    radial-gradient(950px 520px at -10% 24%, rgba(241,196,15,.13), transparent 55%),
    radial-gradient(800px 420px at 55% 110%, rgba(13,110,253,.06), transparent 60%),
    linear-gradient(180deg, #fbfcff 0%, var(--bg-2) 55%, var(--bg) 100%);
}

/* Better selection */
::selection{ background: rgba(13,110,253,.16); }

/* Soft noise – lighter than previous */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  opacity: .45;
}

/* Utility container */
.container-max{
  max-width: var(--container-max);
  margin-inline: auto;
}

/* Universal section surface helper (recommended) */
.section-surface{
  background: var(--surface);
  backdrop-filter: blur(14px);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,.60);
  box-shadow: var(--shadow-md);
}

/* Optional: nicer spacing defaults when applied to sections */
.section-surface{
  padding: clamp(22px, 3vw, 44px);
}

/* 3) Navbar */
.navbar{
  backdrop-filter: blur(18px);
  background: rgba(255,255,255,.72);
  border-bottom: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 10px 34px rgba(15,23,42,.06);
}

.navbar-brand{
  font-size: 1.28rem;
  font-weight: 950;
  letter-spacing: .2px;
  color: var(--primary) !important;
}

.nav-link{
  font-weight: 800;
  color: var(--text) !important;
  position: relative;
  transition: color var(--t-fast), transform var(--t-fast);
  padding-inline: .6rem;
}

/* Underline hover */
.nav-link::after{
  content:"";
  position:absolute;
  inset-inline-start: .6rem;
  bottom: -9px;
  width: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width var(--t-med);
  opacity: .95;
}

.nav-link:hover{
  color: var(--primary) !important;
  transform: translateY(-1px);
}
.nav-link:hover::after{
  width: calc(100% - 1.2rem);
}

/* Keyboard focus */
.nav-link:focus-visible{
  outline: none;
  box-shadow: var(--ring);
  border-radius: 12px;
}

/* Language switch */
.language-switch button{
  width: 46px;
  height: 34px;
  font-size: 1rem;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 26px rgba(15,23,42,.08);
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.language-switch button:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 46px rgba(13,110,253,.12);
  border-color: rgba(13,110,253,.22);
}
.language-switch button:focus-visible{
  outline: none;
  box-shadow: var(--ring);
}

/* 4) Carousel */
.carousel-section{
  max-width: var(--container-max);
  margin-inline: auto;
}

.carousel{
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--surface-strong);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: var(--shadow-md);
  position: relative;
}

/* Readability overlay */
.carousel::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(2,6,23,.16), transparent 30%, rgba(2,6,23,.18));
}

/* Image */
.carousel img{
  width: 100%;
  height: clamp(280px, 34vw, 520px);
  object-fit: cover;
  display: block;
}

/* smoother fade */
.carousel-fade .carousel-item{ transition: opacity 1.1s ease; }

/* 5) About / Image */
.about-image-wrapper{
  max-width: 310px;
  margin-inline-end: 220px;
  position: relative;
}

@media (max-width: 991.98px){
  .about-image-wrapper{
    margin-inline-end: 0;
    margin-block-end: 32px;
    max-width: 270px;
  }
}

/* Premium frame */
.blue-shadow-box{
  position: absolute;
  inset: 14px auto auto 14px;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(13,110,253,.96), rgba(122,167,255,.92));
  box-shadow: 0 30px 80px rgba(13,110,253,.22);
  transform: rotate(-2deg);
  z-index: 0;
}

.about-image-wrapper img{
  position: relative;
  z-index: 1;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: var(--shadow-sm);
}

.img-label{
  font-size: .98rem;
  color: var(--muted);
  white-space: nowrap;
}

/* 6) Vision */
.vision-circle-wrapper{
  position: relative;
  width: 370px;
  height: 370px;
  margin-inline: auto;
  filter: drop-shadow(0 26px 60px rgba(13,110,253,.16));
  animation: floatY 4.2s ease-in-out infinite;
}

.vision-circle-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 7px solid rgba(13,110,253,.92);
  background: var(--surface-strong);
  box-shadow: 0 22px 56px rgba(15,23,42,.10);
}

@keyframes floatY{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-12px); }
}

.vision-text h2{
  font-size: clamp(1.7rem, 2.4vw, 2.35rem);
  line-height: 1.28;
  font-weight: 950;
  letter-spacing: .15px;
  color: var(--text);
}

.vision-text p{
  font-size: 1.06rem;
  color: var(--muted);
  max-width: 62ch;
}

@media (max-width: 768px){
  .vision-circle-wrapper{ width: 230px; height: 230px; }
  .vision-text p{ font-size: 1rem; }
}

/* 7) Services */
.services-section h2{
  font-size: clamp(1.75rem, 2.2vw, 2.35rem);
  margin-block-end: 18px;
  color: var(--primary);
  font-weight: 950;
  letter-spacing: .2px;
}

/* Premium card */
.service-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(249,250,251,.96) 100%);
  border-radius: var(--radius-md);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
  min-height: 300px;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}

/* top accent */
.service-card::before{
  content:"";
  position:absolute;
  inset-inline: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  opacity: .92;
}

/* subtle glow */
.service-card::after{
  content:"";
  position:absolute;
  inset: -60px;
  background: radial-gradient(circle at 20% 10%, rgba(13,110,253,.10), transparent 45%);
  opacity: .7;
  z-index: -1;
}

.service-card:hover{
  transform: translateY(-12px);
  box-shadow: 0 34px 90px rgba(13,110,253,.18);
  border-color: rgba(13,110,253,.22);
}

.service-icon{
  font-size: 2.8rem;
  color: var(--primary);
}

/* 8) Animations */
.animate-fade,
.animate-fade-section{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s ease, transform .9s ease;
  will-change: opacity, transform;
}
.animate-fade.visible,
.animate-fade-section.visible{
  opacity: 1;
  transform: translateY(0);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .vision-circle-wrapper{ animation: none; }
  .animate-fade,
  .animate-fade-section,
  .carousel-fade .carousel-item{ transition: none !important; }
}

/* ================================
   Products (More Professional)
   ================================ */

.products-section h2{
  color: var(--primary);
  font-size: clamp(1.7rem, 2.2vw, 2.35rem);
  font-weight: 950;
  letter-spacing: .2px;
  margin-bottom: 1.2rem;
}

/* Card */
.product-card{
  overflow: hidden;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
  position: relative;
}

/* Top gradient line */
.product-card::before{
  content:"";
  position:absolute;
  inset-inline: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  opacity: .92;
  z-index: 2;
}

/* Hover glow */
.product-card:hover{
  transform: translateY(-10px);
  box-shadow: 0 34px 90px rgba(15,23,42,.14);
  border-color: rgba(13,110,253,.22);
}

/* Image */
.product-img{
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
  transition: transform var(--t-med), filter var(--t-med);
  filter: saturate(1.02);
}

.product-card:hover .product-img{
  transform: scale(1.06);
  filter: saturate(1.08) contrast(1.02);
}

/* Optional: image overlay for text contrast */
.product-card .img-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(2,6,23,.02), rgba(2,6,23,.22));
  opacity: .0;
  transition: opacity var(--t-med);
  pointer-events:none;
}
.product-card:hover .img-overlay{ opacity: 1; }

/* Responsive */
@media (max-width: 768px){
  .product-img{ height: 190px; }
  .products-section h2{ font-size: 1.6rem; }
}



.contact-section form .form-control {
  border-radius: 10px;
  box-shadow: none;
  border: 1px solid #ced4da;
}

.contact-section form .form-control:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.2rem rgba(13,110,253,0.1);
}

.contact-section button {
  border-radius: 8px;
}

.contact-section .card,
.contact-section .bg-light {
  transition: box-shadow 0.4s ease;
}

.contact-section .card:hover,
.contact-section .bg-light:hover {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

.contact-section .form-control {
  border-radius: 10px;
  border: 1px solid #ccc;
}

.contact-section .form-control:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

.contact-section button {
  font-weight: bold;
  font-size: 1rem;
  letter-spacing: 0.5px;
}

/* 9) Footer */
footer{
  font-size: .95rem;
  color: var(--muted);
}

/* Premium dark footer helper */
.footer-premium{
  background: linear-gradient(180deg, #020617, #0f172a);
  color: #e5e7eb;
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer-premium small{ color: #9ca3af; }

/* 10) Small screens */
@media (max-width: 768px){
  .about-section h2{ font-size: 1.55rem; }
  .about-section p{
    font-size: 1rem;
    padding-inline: 14px;
  }
}