:root {
   --us-green: #8DC63F;
   --us-green-dark: #6fa82e;
   --us-dark: #2b2e1f;
   --us-charcoal: #1f2117;
   --us-light: #f6f8f1;
 }
/* =========================
   GLOBAL FONTS
========================= */
:root{

    --font-ar: 'Alexandria', sans-serif;
    --font-en: 'Poppins', sans-serif;
}

/* Arabic */
html[lang="ar"] body{

    font-family: var(--font-ar);
}

/* English */
html[lang="en"] body{

    font-family: var(--font-en);
}

/* Better Rendering */

body{

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

 /* * {
   font-family: 'Cairo', system-ui, sans-serif;
 } */

 html {
   scroll-behavior: smooth;
   /* font-family: Arial, Helvetica, sans-serif; */
 }

 body {
   background: #fff;
   color: var(--us-dark);
 }

 h1,h2,h3,h4,h5,h6{

    font-weight: 700;
    letter-spacing: -.5px;
}

.hero-title{

    line-height: 1.2;
}

p{

    line-height: 1.9;
}

.accent{

    background: linear-gradient(90deg,#8dc63f,#5b9d16);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}














 /* Navbar */
 .navbar-us {
   background: rgba(255, 255, 255, .95);
   backdrop-filter: saturate(180%) blur(12px);
   border-bottom: 1px solid rgba(0, 0, 0, .05);
   transition: all .3s ease;
 }

 .navbar-us .nav-link {
   color: var(--us-dark);
   font-weight: 600;
   margin: 0 .25rem;
   position: relative;
 }

 .navbar-us .nav-link::after {
   content: "";
   position: absolute;
   bottom: -4px;
   right: 50%;
   width: 0;
   height: 2px;
   background: var(--us-green);
   transition: all .3s;
 }

 .navbar-us .nav-link:hover {
   color: var(--us-green-dark);
 }

 .navbar-us .nav-link:hover::after {
   width: 60%;
   right: 20%;
 }

 .brand-logo {
   height: 56px;
   width: auto;
 }

 .btn-us {
   background: var(--us-green);
   color: #fff;
   font-weight: 700;
   border: none;
   padding: .75rem 1.75rem;
   border-radius: 999px;
   transition: all .3s ease;
   box-shadow: 0 6px 20px -8px rgba(141, 198, 63, .7);
 }

 .btn-us:hover {
   background: var(--us-green-dark);
   color: #fff;
   transform: translateY(-2px);
   box-shadow: 0 12px 28px -10px rgba(141, 198, 63, .8);
 }

 .btn-outline-us {
   background: transparent;
   color: var(--us-dark);
   border: 2px solid var(--us-dark);
   font-weight: 700;
   padding: .65rem 1.6rem;
   border-radius: 999px;
   transition: all .3s ease;
 }

 .btn-outline-us:hover {
   background: var(--us-dark);
   color: #fff;
 }

 /* Hero */
 .hero {
   position: relative;
   overflow: hidden;
   padding: 9rem 0 6rem;
   background:
     radial-gradient(circle at 85% 20%, rgba(141, 198, 63, .18), transparent 55%),
     radial-gradient(circle at 10% 90%, rgba(141, 198, 63, .10), transparent 55%),
     linear-gradient(180deg, #ffffff 0%, #f6f8f1 100%);
 }

 .hero h1 {
   font-weight: 700;
   font-size: clamp(1.25rem, 3.75vw, 2.75rem);
   line-height: 1.5;
   color: var(--us-charcoal);
 }

 .hero h1 .accent {
   color: var(--us-green-dark);
 }

 .hero p.lead {
   font-size: 1.15rem;
   color: #4b4f3c;
   max-width: 560px;
 }

 .hero-art {
   position: relative;
   border-radius: 24px;
   overflow: hidden;
   box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .25);
 }

 .hero-art img {
   width: 100%;
   display: block;
 }

 .badge-pill {
   display: inline-flex;
   align-items: center;
   gap: .5rem;
   background: rgba(141, 198, 63, .15);
   color: var(--us-green-dark);
   padding: .5rem 1rem;
   border-radius: 999px;
   font-weight: 700;
   font-size: .9rem;
 }

 /* Sections */
 section {
   padding: 5rem 0;
 }

 .section-title {
   font-weight: 700;
   color: var(--us-charcoal);
   font-size: clamp(1.75rem, 3vw, 2.5rem);
       line-height: 1.6;

 }

 .section-kicker {
   color: var(--us-green-dark);
   font-weight: 800;
   letter-spacing: .08em;
   text-transform: uppercase;
   font-size: 1.75rem;
 }

 .divider {
   width: 60px;
   height: 4px;
   background: var(--us-green);
   border-radius: 4px;
   margin: .75rem 0 1.5rem;
 }



 /* About */
 .about-img {
   border-radius: 24px;
   overflow: hidden;
   box-shadow: 0 25px 55px -25px rgba(0, 0, 0, .3);
 }

 .about-img img {
   width: 100%;
   display: block;
 }



 .stat-card {
   background: #fff;
   border: 1px solid #eef0e5;
   border-radius: 18px;
   padding: 1.25rem;
   text-align: center;
 }

 .stat-card .num {
   font-weight: 900;
   color: var(--us-green-dark);
   font-size: 1.75rem;
 }

 .stat-card .lbl {
   color: #6b6f5a;
   font-size: .9rem;
 }

 /* Services */
 .services {
   background: var(--us-light);
 }



 .service-card {
   background: #fff;
   border-radius: 18px;
   padding: 1.75rem 1.5rem;
   height: 100%;
   border: 1px solid transparent;
   transition: all .3s ease;
   position: relative;
   overflow: hidden;
 }

 .service-card::before {
   content: "";
   position: absolute;
   inset: auto 0 0 0;
   height: 4px;
   background: var(--us-green);
   transform: scaleX(0);
   transform-origin: right;
   transition: transform .35s ease;
 }

 .service-card:hover {
   transform: translateY(-6px);
   border-color: rgba(141, 198, 63, .4);
   box-shadow: 0 20px 40px -25px rgba(0, 0, 0, .25);
 }

 .service-card:hover::before {
   transform: scaleX(1);
 }

 .service-icon {
   width: 52px;
   height: 52px;
   border-radius: 14px;
   background: rgba(141, 198, 63, .15);
   color: var(--us-charcoal);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 1.5rem;
   margin-bottom: 1rem;
 }

 .service-card h5 {
   font-weight: 800;
   color: var(--us-green-dark);
   font-size: .9rem;
   line-height: 2.5;
 }

 .service-card li {
   display: flex;
   gap: 0.75rem;
   /* المسافة بين الأيقونة والنص */
   align-items: flex-start;
 }

 .service-card li i {
   flex-shrink: 0;
   /* تمنع الأيقونة من التقلص */
   margin-top: 0.2rem;
   /* محاذاة بصرية مع أول سطر */
 }

 .service-card li span {
   flex: 1;
   /* يأخذ المساحة المتبقية */

 }



 /* companyRecord */
 .companyRecord {
   background: linear-gradient(135deg, var(--us-charcoal) 0%, #3a3e2a 100%);
   color: #fff;
   border-radius: 32px;
   padding: 3.5rem 2rem;
   position: relative;
   overflow: hidden;
 }

 .companyRecord::after {
   content: "";
   position: absolute;
   right: -80px;
   top: -80px;
   width: 260px;
   height: 260px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(141, 198, 63, .45), transparent 70%);
 }

 .companyRecord h4 {
   font-weight: 900;
   font-size: clamp(1.6rem, 2.5vw, 2rem);
   color: #000;
   
 }

 .companyRecord ul {
   list-style: none;
   padding: 0;
   
 }

 .companyRecord li {
   padding: .6rem 0;
   display: flex;
   align-items: flex-start;
   gap: .75rem;
   color: #000000;
 }

 .companyRecord li i {
   color: var(--us-green);
   font-size: 1.25rem;
   margin-top: 2px;
 }



 .bg-image {
  position: relative;
  background-image: url("Recordimg.png");
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  overflow: hidden;
}

/* طبقة تغطية عشان تخلي الصورة باهتة */
.bg-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.83); /* تتحكم في الشفافية */
  z-index: 1;
}

/* يخلي الكلام فوق الصورة */
.bg-image .row {
  position: relative;
  z-index: 2;
}

 /* Contact */
 .contact-card {
   background: #fff;
   border: 1px solid #eef0e5;
   border-radius: 18px;
   padding: 1.5rem;
   height: 100%;
 }

 .contact-card .ico {
   width: 48px;
   height: 48px;
   border-radius: 12px;
   background: rgba(141, 198, 63, .15);
   color: var(--us-green-dark);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 1.4rem;
   margin-bottom: .75rem;
 }

 .contact-card h6 {
   font-weight: 800;
   color: var(--us-green-dark);
   margin-bottom: .25rem;
 }


 .form-control,
 .form-select {
   border-radius: 12px;
   padding: .75rem 1rem;
   border: 1px solid #e2e5d4;
 }

 .form-control:focus {
   border-color: var(--us-green);
   box-shadow: 0 0 0 .2rem rgba(141, 198, 63, .2);
 }

 /* Footer */
 footer {
   background: var(--us-charcoal);
   color: #d6d8c8;
   padding: 3rem 0 1.5rem;
   direction: ltr;
   unicode-bidi: embed;
 }

 footer a {
   color: #d6d8c8;
   text-decoration: none;
 }

 footer a:hover {
   color: var(--us-green);
 }

 .social a {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .08);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   margin-inline-start: .5rem;
   transition: all .3s;
 }

 .social a:hover {
   background: var(--us-green);
   color: #fff;
 }

 /* Scroll reveal */
 .reveal {
   opacity: 0;
   transform: translateY(24px);
   transition: all .7s ease;
 }

 .reveal.visible {
   opacity: 1;
   transform: none;
 }

 @media (max-width: 768px) {
   .hero {
     padding: 7rem 0 4rem;
   }
 }

 .companyRecord {
   padding: 2.5rem 1.25rem;
   border-radius: 22px;
 }




 .success-icon{

    width:90px;
    height:90px;

    margin:auto;

    border-radius:50%;

    background:#198754;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:42px;

    font-weight:bold;

    box-shadow:0 10px 30px rgba(25,135,84,.3);

    animation:pop .5s ease;
}

@keyframes pop{

    0%{

        transform:scale(.5);
        opacity:0;
    }

    100%{

        transform:scale(1);
        opacity:1;
    }
}