/* تخصيص التصميم */
body {
    font-family: 'Tajawal', sans-serif;
    color: #333333;
    margin: 0;
    padding: 0;
}
/*    */

body, html {
    overflow-x: hidden;
}

/* Navmenu - Mobile */
@media (max-width: 1199px) {
    .mobile-nav-toggle {
      color: var(--nav-color);
      font-size: 28px;
      line-height: 0;
      margin-right: 10px;
      cursor: pointer;
      transition: color 0.3s;
    }
  
    .navmenu {
      padding: 0;
      z-index: 9997;
    }
  
    .navmenu ul {
      display: none;
      list-style: none;
      position: absolute;
      inset: 60px 20px 20px 20px;
      padding: 10px 0;
      margin: 0;
      border-radius: 6px;
      background-color: var(--nav-mobile-background-color);
      overflow-y: auto;
      transition: 0.3s;
      z-index: 9998;
      box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
    }
  
    .navmenu a,
    .navmenu a:focus {
      color: var(--nav-dropdown-color);
      padding: 10px 20px;
      font-family: var(--nav-font);
      font-size: 17px;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: space-between;
      white-space: nowrap;
      transition: 0.3s;
    }
  
    .navmenu a i,
    .navmenu a:focus i {
      font-size: 12px;
      line-height: 0;
      margin-left: 5px;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: 0.3s;
      background-color: color-mix(in srgb, var(--accent-color), white 90%);
    }
  
    .navmenu a i:hover,
    .navmenu a:focus i:hover {
      background-color: color-mix(in srgb, var(--accent-color), white 90%);
    }
  
    .navmenu a:hover,
    .navmenu .active,
    .navmenu .active:focus {
      background-color: var(--nav-dropdown-hover-color);
    }
  
    .navmenu .active i,
    .navmenu .active:focus i {
      transform: rotate(180deg);
    }
  
    .navmenu .dropdown ul {
      position: static;
      display: none;
      z-index: 99;
      padding: 10px 0;
      margin: 10px 20px;
      background-color: var(--nav-dropdown-background-color);
      border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
      box-shadow: none;
      transition: all 0.5s ease-in-out;
    }
  
    .navmenu .dropdown ul ul {
      background-color: rgba(33, 37, 41, 0.1);
    }
  
    .navmenu .dropdown>.dropdown-active {
      display: block;
      background-color: rgba(33, 37, 41, 0.03);
    }
  
    .mobile-nav-active {
      overflow: hidden;
    }
  
    .mobile-nav-active .mobile-nav-toggle {
      color: #fff;
      position: absolute;
      font-size: 32px;
      top: 15px;
      right: 15px;
      margin-right: 0;
      z-index: 9999;
    }
  
    .mobile-nav-active .navmenu {
      position: fixed;
      overflow: hidden;
      inset: 0;
      background: rgba(33, 37, 41, 0.8);
      transition: 0.3s;
    }
  
    .mobile-nav-active .navmenu>ul {
      display: block;
    }
    
  }
  /* تخصيص زر التبديل */
.navbar-toggler {
    border: none; /* إزالة الحدود */
    outline: none; /* إزالة الحدود عند النقر */
}

.navbar-toggler-icon {
    background-color: #094125; /* تغيير لون الأيقونة */
    border-radius: 3px; /* حواف مستديرة */
}

/* تخصيص القائمة على الموبايل */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background-color: #f8f9fa; /* لون خلفية القائمة */
        padding: 10px; /* إضافة مسافة داخلية */
        border-radius: 5px; /* حواف مستديرة */
        margin-top: 10px; /* إضافة هامش أعلى */
    }

    .navbar-nav .nav-link {
        font-size: 16px; /* حجم الخط */
        padding: 10px 0; /* مسافة بين العناصر */
    }
}
@media (max-width: 991.98px) {
    .modal-dialog {
        margin: 0; /* إزالة الهوامش */
        width: 100%; /* عرض كامل */
        max-width: 100%; /* عرض كامل */
    }
}

.our-works {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 40px;
    gap: 40px; /* المسافة بين الكارتات */
}

.card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: right;
    padding: 24px 0;
    box-sizing: border-box;
}

.card img {
    width: 30%;
    height: 150px;
    margin: auto;
    border-radius: 8px;
}

.card h3 {
    margin-top: 24px;
    font-size: 18px;
    color: #333;
}

.card button {
    background-color: #FFFFFF;
    color: #094226;
    border: none;
    padding: 10px 20px;
    font-size: 20px;
    cursor: pointer;
    margin-top: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.card button span {
    font-size: 18px;
}


/* Responsive Design for Mobile */
@media (max-width: 768px) {
    .card {
        width: calc(50% - 20px); /* عرض الكارت في الموبايل */
    }
}

@media (max-width: 480px) {
    .card {
        width: 100%; /* عرض الكارت في الموبايل الصغير */
    }
}
/* الهيدر (Header) */
.navbar {
    background-color: #FAFAFA !important;
    padding: 0 80px;
    height: 112px;
    display: flex;
    align-items: center;
}

.navbar-brand {
    font-weight: bold;
    color: #094226 !important;
    font-size: 1.5rem;
    margin-right: auto;
}

.navbar-brand img {
    width: 72px;
    height: 72px;
}

.navbar-nav {
    display: flex;
    justify-content: center;
    flex-grow: 1;
    gap: 40px;
}

.navbar-nav .nav-link {
    color: #333333 !important;
    font-size: 22px;
    font-weight: 500;
    position: relative;
}

.navbar-nav .nav-link.active {
    color: #094226 !important;
}

.navbar-nav .nav-link.active::after {
    content: '';
    display: block;
    width: 89px;
    height: 9px;
    background-color: #094226;
    position: absolute;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 24px;
}

.navbar-nav .nav-link:hover {
    color: #094226 !important;
}

.contact-btn {
    background-color: #094226;
    color: #FAFAFA !important;
    border: none;
    padding: 10px 20px;
    font-size: 22px;
    font-weight: 500;
    width: 182px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}

.contact-btn:hover {
    background-color: #073b1d;
}

/* الهيرو سيكشن (Hero Section) */
.hero-section {
    background-color: #094226;
    padding: 80px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    min-height: 614px;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.hero-content {
    text-align: right;
}

.title-wrapper {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 32px;
}

h1 {
    font-size: 64px;
    font-weight: bold;
    color: #FAFAFA;
    margin: 0;
}

.green-box {
    width: 8px;
    height: 140px;
    background-color: #006C0C;
    border-radius: 8px;
}

.subtitle {
    font-size: 24px;
    font-weight: 500;
    color: #FAFAFA;
    margin-bottom: 32px;
}

.buttons {
    display: flex;
    gap: 16px;
}

.discover-btn,
.contact-btn {
    font-size: 22px;
    font-weight: 500;
    padding: 16px 32px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.discover-btn {
    background-color: #FAFAFA;
    color: #094226;
}

.contact-btn {
    background-color: #006C0C;
    color: #FAFAFA;
}

.discover-btn:hover {
    background-color: #e0e0e0;
}

.contact-btn:hover {
    background-color: #005a0a;
}

/* الكروت (Cards Section) */
.cards-section {
    padding: 80px 0;
    background-color: #FAFAFA;
    position: relative;
    z-index: 1;
    margin-bottom: 48px; /* المسافة أسفل الكروت */
}

.cards-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    position: relative;
    top: -160px; /* رفع الكروت لأعلى بمقدار 180px */
    margin-bottom: -180px; /* تعويض المسافة الزائدة */
}

.card {
    width: 320px;
    background-color: #FFFFFF;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    position: relative;
}

.icon-circle {
    width: 80px;
    height: 80px;
    background-color: #094226;
    border-radius: 50%;
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-circle i {
    color: #FFFFFF;
    font-size: 32px;
}

.card-title {
    font-size: 24px;
    font-weight: 500;
    color: #094226;
    margin-top: 40px;
    margin-bottom: 16px;
}

.card-description {
    font-size: 16px;
    color: #333333;
    line-height: 1.5;
    margin: 0;
}

/* الكروت (Cards Section) */
.cards-section {
    padding: 80px 0;
    background-color: #FFFFFF;
    position: relative;
    z-index: 1;
    margin-bottom: 48px; /* المسافة أسفل الكروت */
}

.cards-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    position: relative;
    top: -180px; /* رفع الكروت لأعلى بمقدار 180px */
    margin-bottom: -180px; /* تعويض المسافة الزائدة */
}

.card {
    width: 320px;
    background-color: #FFFFFF;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    position: relative;
}

.icon-circle {
    width: 80px;
    height: 80px;
    background-color: #094226;
    border-radius: 50%;
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-circle i {
    color: #FFFFFF;
    font-size: 32px;
}

.card-title {
    font-size: 24px;
    font-weight: 500;
    color: #094226;
    margin-top: 40px;
    margin-bottom: 16px;
}

.card-description {
    font-size: 16px;
    color: #333333;
    line-height: 1.5;
    margin: 0;
}


/* سكشن الخدمات */
.services-section {
    margin-top: 16px; /* المسافة بين السكشن الجديد وسكشن العنصر الجديد */
    padding: 40px 0;
    
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 أعمدة */
    gap: 40px; /* المسافة بين الخدمات (40 بكسل) */
    max-width: 1200px;
    margin: 0 auto;
}

.service-card {
    width: 100%;
    height: 241px;
    background-color: #FFFFFF;
    border: 2px solid #000000; /* استروك أسود بسمك 2 بكسل */
    border-radius: 8px;
    padding: 16px;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.service-icon {
    width: 100px; /* حجم الدائرة */
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -50px; /* نصف الأيقونة خارج الكارت */
    right: 10px; /* تبعد 10 بكسل عن حافة الكارت من اليمين */
    background-color: transparent; /* إزالة الخلفية الخضراء */
}

.service-icon img {
    width: 60px; /* حجم الأيقونة */
    height: 60px;
}

.service-content {
    margin-top: 60px; /* لترك مسافة للأيقونة */
}

.service-content h3 {
    font-size: 20px;
    font-weight: bold;
    color: #094226;
    margin-bottom: 12px; /* المسافة بين العنوان والوصف */
}

.service-content p {
    font-size: 18px;
    color: #333333;
    font-weight: 400;
    line-height: 1.5;
    margin: 0; /* إزالة الهامش الافتراضي */
}

/* استعلامات الوسائط للهواتف */
@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: repeat(1, 1fr); /* عمود واحد للهواتف */
        gap: 40px; /* زيادة المسافة بين الخدمات إلى 40 بكسل */
    }

    .service-card {
        height: auto; /* ارتفاع تلقائي للهواتف */
        padding: 20px;
    }

    .service-icon {
        width: 80px; /* تصغير حجم الدائرة */
        height: 80px;
        top: -40px; /* تعديل موقع الأيقونة */
        right: 20px; /* تعديل موقع الأيقونة */
    }

    .service-icon img {
        width: 50px; /* تصغير حجم الأيقونة */
        height: 50px;
    }

    .service-content {
        margin-top: 50px; /* تعديل المسافة للأيقونة */
    }

    .service-content h3 {
        font-size: 18px; /* تصغير حجم العنوان */
    }

    .service-content p {
        font-size: 16px; /* تصغير حجم الوصف */
    }

    
}
.scrolled .header {
    box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
  }
  
  /* Global Header on Scroll
  ------------------------------*/
  .scrolled .header {
    --background-color: rgba(42, 44, 57, 0.9);
  }

  .hero {
    width: 100%;
    overflow: hidden;
    position: relative;
    background: linear-gradient(0deg, var(--background-color) 0%, color-mix(in srgb, var(--background-color) 90%, white 10%) 100%);
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
  }
  
  .hero .carousel-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    position: relative;
    min-height: 75vh;
    padding-top: 60px;
  }
  
  .hero h2 {
    margin-bottom: 30px;
    font-size: 48px;
    font-weight: 700;
  }
  
  .hero h2 span {
    text-decoration: underline;
  }
  
  .hero p {
    max-width: 80%;
    animation-delay: 0.4s;
    margin: 0 auto 30px auto;
  }
  
  .hero .carousel-control-prev,
  .hero .carousel-control-next {
    width: 10%;
  }
  
  .hero .carousel-control-next-icon,
  .hero .carousel-control-prev-icon {
    background: none;
    font-size: 48px;
    line-height: 1;
    width: auto;
    height: auto;
  }
  
  .hero .btn-get-started {
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 12px 32px;
    border-radius: 50px;
    transition: 0.5s;
    line-height: 1;
    margin: 10px;
    animation-delay: 0.8s;
    color: var(--default-color);
    border: 2px solid var(--accent-color);
  }
  
  .hero .btn-get-started:hover {
    background: var(--accent-color);
    color: var(--contrast-color);
    text-decoration: none;
  }
  
  @media (min-width: 1024px) {
    .hero p {
      max-width: 60%;
    }
  
    .hero .carousel-control-prev,
    .hero .carousel-control-next {
      width: 5%;
    }
  }
  
  @media (max-width: 768px) {
    .hero .carousel-container {
      min-height: 90vh;
    }
  
    .hero h2 {
      font-size: 28px;
    }
  }
  
  .hero .hero-waves {
    display: block;
    width: 100%;
    height: 60px;
    position: relative;
  }
  
  .hero .wave1 use {
    animation: move-forever1 10s linear infinite;
    animation-delay: -2s;
    fill: var(--default-color);
    opacity: 0.6;
  }
  
  .hero .wave2 use {
    animation: move-forever2 8s linear infinite;
    animation-delay: -2s;
    fill: var(--default-color);
    opacity: 0.4;
  }
  
  .hero .wave3 use {
    animation: move-forever3 6s linear infinite;
    animation-delay: -2s;
    fill: var(--default-color);
  }
  
  @keyframes move-forever1 {
    0% {
      transform: translate(85px, 0%);
    }
  
    100% {
      transform: translate(-90px, 0%);
    }
  }
  
  @keyframes move-forever2 {
    0% {
      transform: translate(-90px, 0%);
    }
  
    100% {
      transform: translate(85px, 0%);
    }
  }
  
  @keyframes move-forever3 {
    0% {
      transform: translate(-90px, 0%);
    }
  
    100% {
      transform: translate(85px, 0%);
    }
  }
/* تخصيص الفوتر */
.footer {
    background-image: url('images/footer.png'); /* استبدل بمسار صورتك */
    background-size: cover;
    background-position: center;
    border-radius: 40px;
    margin: 0 48px; /* المسافة من الجانبين خارج الفوتر */
    margin-bottom: 40px;
    padding: 40px; /* المسافة الداخلية للفوتر */
    color: #FFFFFF;
    font-family: 'Tajawal', sans-serif;
    position: relative;
}

/* طبقة شفافة فوق الخلفية */
.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 40px;
    z-index: 1;
}

/* تنسيق محتوى الفوتر */
.footer-content {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    margin: 0 40px; /* المسافة من الجانبين داخل الفوتر */
}

/* تنسيق الأعمدة */
.column {
    flex: 1;
    margin-right: 40px; /* المسافة بين الأعمدة */
}

.column:last-child {
    margin-right: 0; /* إزالة المسافة من العمود الأخير */
}

/* العمود الأول */
.footer-logo {
    width: 48px;
    height: auto;
    margin-bottom: 24px;
}

.footer-description {
    font-size: 22px;
    font-weight: 400; /* Regular */
    margin: 0;
}

/* العمود الثاني */
.footer-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 24px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 24px;
}

.footer-links a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 22px;
    font-weight: 500; /* Medium */
}

.footer-links a:hover {
    color: #006C0C; /* تغيير اللون عند التحويم */
}

/* العمود الثالث */
.footer-info {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-info li {
    font-size: 22px;
    font-weight: 500; /* Medium */
    margin-bottom: 24px;
}

/* العمود الرابع */
.newsletter-container {
    display: flex;
    flex-direction: column;
    gap: 16px; /* المسافة بين الحقل والأيقونات */
}

.input-with-button {
    position: relative;
    width: 100%;
}

.newsletter-input {
    width: 100%;
    padding: 12px 140px 12px 16px; /* زيادة المسافة من اليمين للزر */
    border-radius: 32px; /* زوايا مدورة بمقدار 32 بكسل */
    border: 2px solid #FFFFFF; /* استروك أبيض بسمك 2 بكسل */
    background-color: transparent; /* إزالة الفيل */
    color: #FFFFFF;
    font-size: 16px; /* تصغير حجم النص */
}

.newsletter-input::placeholder {
    color: #FFFFFF; /* لون النص البديل */
}

.subscribe-btn {
    position: absolute;
    right: 8px; /* المسافة من حافة الحقل */
    top: 50%;
    transform: translateY(-50%); /* توسيط الزر عموديًا */
    background-color: #FFFFFF; /* لون خلفية الزر أبيض */
    color: #094226; /* لون النص أخضر */
    font-size: 16px; /* تصغير حجم النص */
    font-weight: 500;
    padding: 8px 16px; /* تقليل حجم الزر */
    border: none;
    border-radius: 24px; /* زوايا مدورة بمقدار 24 بكسل */
    cursor: pointer;
}

.subscribe-btn:hover {
    background-color: #f0f0f0; /* تغيير لون الزر عند التحويم */
}

.social-icons {
    display: flex;
    gap: 24px; /* تقليل المسافة بين الأيقونات */
    margin-top: 16px; /* تقليل المسافة بين الحقل والأيقونات */
}

.social-icons a img {
    width: 28px; /* تصغير حجم الأيقونات */
    height: 28px;
}

/* استعلامات الوسائط للجوال */
@media (max-width: 768px) {
    .footer {
        margin: 0 20px;
        padding: 20px;
    }

    .footer-content {
        flex-direction: column;
        gap: 40px;
        margin: 0 20px;
    }

    .column {
        margin-right: 0;
    }

    .footer-logo {
        margin-bottom: 16px;
    }

    .footer-description {
        font-size: 18px;
    }

    .footer-title {
        font-size: 20px;
        margin-bottom: 16px;
    }

    .footer-links li {
        margin-bottom: 16px;
    }

    .footer-links a {
        font-size: 18px;
    }

    .footer-info li {
        font-size: 18px;
        margin-bottom: 16px;
    }

    .newsletter-input {
        font-size: 14px;
    }

    .subscribe-btn {
        font-size: 14px;
    }

    .social-icons {
        gap: 16px;
        margin-top: 12px;
    }

    .social-icons a img {
        width: 24px;
        height: 24px;
    }
}

/* استعلامات الوسائط للشاشات الكبيرة */
@media (min-width: 768px) {
    .footer {
        margin: 0 48px;
        padding: 40px;
    }

    .footer-content {
        flex-direction: row; /* إعادة الأعمدة إلى وضعها الأفقي */
        gap: 0; /* إزالة المسافة بين الأعمدة */
        margin: 0 40px;
    }

    .column {
        margin-right: 40px; /* إعادة المسافة بين الأعمدة */
    }

    .column:last-child {
        margin-right: 0;
    }

    .footer-logo {
        margin-bottom: 24px;
    }

    .footer-description {
        font-size: 22px;
    }

    .footer-title {
        font-size: 24px;
        margin-bottom: 24px;
    }

    .footer-links li {
        margin-bottom: 24px;
    }

    .footer-links a {
        font-size: 22px;
    }

    .footer-info li {
        font-size: 22px;
        margin-bottom: 24px;
    }

    .newsletter-container {
        flex-direction: row; /* إعادة الحقل والزر إلى وضعها الأفقي */
    }

    .newsletter-input {
        font-size: 18px;
    }

    .subscribe-btn {
        font-size: 18px;
    }

    .social-icons {
        gap: 32px;
        margin-top: 24px;
    }

    
}  
/**/
.form-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 600px;
}

h1 {
    text-align: center;
    margin-bottom: 20px;
}

.form-row {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 15px;
}

.form-group {
    flex: 1;
}

label {
    display: block;
    margin-bottom: 5px;
}

input, select, textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

textarea {
    resize: vertical;
}

button {
    width: 100%;
    padding: 10px;
    background-color: #28a745;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}

button:hover {
    background-color: #218838;
}

/* سكشن أعمالنا */
.our-works-section {
    margin-top: 40px; /* تقليل المسافة بين السكشنات */
    padding: 20px 0; /* تقليل الحشوة */
    background-color: transparent;
    text-align: center;
    position: relative;
}

.section-title {
    font-size: 28px; /* تصغير حجم العنوان */
    font-weight: bold;
    color: #094226;
    margin: 0;
    margin-bottom: 10px; /* تقليل المسافة تحت العنوان */
}

.works-image {
    margin-top: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 90%; /* تقليل عرض الصورة */
    height: auto;
    margin-bottom: 32px; /* تقليل المسافة تحت الصورة */
}

.works-content-wrapper {
    overflow: hidden;
    position: relative;
}

.works-content {
    display: flex;
    gap: 32px; /* تقليل المسافة بين الأعمال */
    transition: transform 0.5s ease;
}

.work-item {
    min-width: 100%;
    display: flex;
    flex-direction: column; /* تغيير الاتجاه إلى عمودي */
    gap: 32px; /* تقليل المسافة بين العناصر */
    padding: 0 16px; /* تقليل الحشوة الجانبية */
}

.left-image img {
    max-width: 100%;
    height: auto;
}

.right-content {
    text-align: right;
}

.content-title {
    font-size: 22px; /* تصغير حجم العنوان */
    font-weight: 500;
    color: #094226;
    margin-bottom: 16px; /* تقليل المسافة تحت العنوان */
}

.images-row {
    display: flex;
    gap: 8px; /* تقليل المسافة بين الصور */
    align-items: center;
    margin-bottom: 16px; /* تقليل المسافة تحت الصور */
}

.image-item {
    text-align: center;
}

.image-item img {
    max-width: 100%;
    height: auto;
}

.image-caption {
    font-size: 14px; /* تصغير حجم النص تحت الصورة */
    font-weight: 400;
    color: #333333;
    margin-top: 2px;
}

.separator {
    width: 1px;
    height: 60px; /* تقليل ارتفاع الخط */
    background-color: rgba(0, 0, 0, 0.1);
}

.additional-image {
    margin-top: 8px;
}

.additional-image img {
    max-width: 100%;
    height: auto;
}

.description {
    font-size: 16px; /* تصغير حجم الوصف */
    font-weight: 400;
    color: #333333;
    margin-top: 16px; /* تقليل المسافة فوق الوصف */
}

.green-button {
    display: inline-flex;
    align-items: center;
    background-color: #094226;
    color: #FFFFFF;
    font-size: 16px; /* تصغير حجم النص */
    font-weight: 400;
    padding: 10px 20px; /* تقليل الحشوة */
    border: none;
    border-radius: 8px;
    text-decoration: none;
    margin-top: 16px; /* تقليل المسافة فوق الزر */
    margin-right: 480px;
}

.green-button i {
    margin-left: 4px;
    font-size: 16px; /* تصغير حجم السهم */
    transform: rotate(180deg);
}
.gb {
    display: inline-flex;
    align-items: center;
    background-color: #094226;
    color: #FFFFFF;
    font-size: 16px; /* تصغير حجم النص */
    font-weight: 400;
    padding: 10px 20px; /* تقليل الحشوة */
    border: none;
    border-radius: 8px;
    text-decoration: none;
    margin-top: 16px; /* تقليل المسافة فوق الزر */
    width: 37%;
    height: 50px;
}

.gb i {
    margin-right: 10px;
    font-size: 16px; /* تصغير حجم السهم */
    transform: rotate(180deg);
}
/* أسهم التنقل */
.navigation-arrows {
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    padding: 0 10px; /* تقليل الحشوة الجانبية */
}

.arrow-button {
    background-color: #094226;
    border: none;
    border-radius: 50%;
    width: 40px; /* تصغير حجم الدائرة */
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.arrow-button i {
    color: #FFFFFF;
    font-size: 20px; /* تصغير حجم السهم */
}

/* عكس اتجاه السهم الأيسر */
.left-arrow i {
    transform: rotate(180deg);
}

.right-arrow i {
    transform: rotate(180deg);
}
.image-item{
    margin: auto;
}

.additional-image{
    text-align: center;
}
.content-title {
    text-align: center;
}
#im{
    width: 600px;
}
/* Media Query لشاشات الموبايل */
@media (max-width: 767px) {
   
    .our-works-section {
        margin-top: 20px; /* تقليل المسافة بين السكشنات */
        padding: 10px 0; /* تقليل الحشوة */   
    }

    .section-title {
        font-size: 24px; /* تصغير حجم العنوان */
        margin-bottom: 8px; /* تقليل المسافة تحت العنوان */
    }

    .works-image {
        max-width: 80%; /* تقليل عرض الصورة */
        margin-bottom: 24px; /* تقليل المسافة تحت الصورة */
    }

    .works-content {
        gap: 16px; /* تقليل المسافة بين الأعمال */
    }

    .work-item {
        gap: 16px; /* تقليل المسافة بين العناصر */
        padding: 0 8px; /* تقليل الحشوة الجانبية */
    }

    .content-title {
        font-size: 20px; /* تصغير حجم العنوان */
        margin-bottom: 12px; /* تقليل المسافة تحت العنوان */
        text-align: center;
    }

    .images-row {
        gap: 4px; /* تقليل المسافة بين الصور */
        margin-bottom: 12px; /* تقليل المسافة تحت الصور */
    }
    
    .image-item{
        margin: auto;
    }
    
    .additional-image{
        text-align: center;
    }

    .image-caption {
        font-size: 12px; /* تصغير حجم النص تحت الصورة */
    }

    .separator {
        height: 40px; /* تقليل ارتفاع الخط */
    }

    .description {
        font-size: 14px; /* تصغير حجم الوصف */
        margin-top: 12px; /* تقليل المسافة فوق الوصف */
    }

    .green-button {
        font-size: 14px; /* تصغير حجم النص */
        padding: 8px 16px; /* تقليل الحشوة */
        margin-top: 12px; /* تقليل المسافة فوق الزر */
        width: 55%;
        margin-right: 65px;
    }

    .green-button i {
        font-size: 14px; /* تصغير حجم السهم */
    }
    .gb{
        width: 70%;
    }
    .gb i{

    }
    .arrow-button {
        width: 32px; /* تصغير حجم الدائرة */
        height: 32px;
    }

    .arrow-button i {
        font-size: 16px; /* تصغير حجم السهم */
    }
}
/* تخصيص قسم من نحن */
.about-us-section {
    margin-top: 80px; /* المسافة بين سكشن أعمالنا وسكشن من نحن */
    padding: 48px 80px; /* المسافة من الأعلى والأسفل 48 بكسل، ومن اليمين واليسار 80 بكسل */
    background-image: url('images/bg.png'); /* استبدل your-image-name.jpg باسم صورتك */
    background-size: cover; /* تغطية الخلفية بالكامل */
    background-position: center; /* توسيط الخلفية */
    color: #FFFFFF; /* لون النص */
    text-align: right; /* محاذاة النص لليمين */
    position: relative; /* لجعل النص يظهر فوق الصورة */
}

.about-us-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.about-us-content {
    position: relative; /* لجعل النص يظهر فوق الطبقة الشفافة */
    z-index: 1; /* التأكد من أن النص فوق الخلفية */
}

/* العنوان مع الصورة */
.about-us-section h2 {
    font-size: 40px; /* حجم العنوان */
    font-weight: bold; /* بولد */
    color: #094226; /* لون العنوان */
    margin: 0; /* إزالة الهامش الافتراضي */
    display: flex;
    align-items: center; /* محاذاة الصورة مع النص */
    gap: 16px; /* المسافة بين النص والصورة */
    margin-top: -24px;
    margin-bottom: 16px;
}

.about-us-section h2 img {
    width: 40px; /* حجم الصورة */
    height: 40px;
}

/* تنسيق الصورة */
.about-us-image {
    max-width: 100%;
    height: auto;
    border-radius: 16px; /* إذا كنت تريد زوايا مدورة */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* إذا كنت تريد ظلًا */
}

/* تنسيق النص والزر */
.about-us-description {
    font-size: 18px; /* حجم الوصف */
    font-weight: 400; /* Regular */
    color: #333333; /* لون النص */
    line-height: 1.6; /* تباعد الأسطر */
    margin-bottom: 24px; /* المسافة تحت الوصف */
}

.features {
    margin-top: 24px; /* المسافة بين الوصف وعلامات الصح */
}

.features p {
    font-size: 24px; /* حجم النص */
    font-weight: 500; /* Medium */
    color: #333333; /* لون النص */
    display: flex;
    align-items: center;
    gap: 12px; /* المسافة بين العلامة والنص */
    margin-bottom: 12px; /* المسافة بين الجمل */
}

.features i {
    color: #00C853; /* لون علامة الصح */
    font-size: 24px; /* حجم العلامة */
}

.green-button {
    background-color: #094226; /* لون الزر الأخضر */
    color: #FFFFFF; /* لون النص */
    font-size: 18px; /* حجم النص */
    font-weight: 400; /* Regular */
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    margin-top: 24px; /* المسافة بين الوصف والزر */
    display: inline-flex;
    align-items: center;
    gap: 8px; /* المسافة بين النص والسهم */
}

.green-button i {
    font-size: 18px; /* حجم السهم */
    transform: rotate(180deg); /* عكس اتجاه السهم */
}



/* استعلامات الوسائط للشاشات الصغيرة */
@media (max-width: 768px) {
    .about-us-section {
        padding: 24px 20px; /* تقليل المسافة للشاشات الصغيرة */
    }

    .about-us-section h2 {
        font-size: 28px; /* تصغير حجم العنوان */
    }

    .about-us-section h2 img {
        width: 30px; /* تصغير حجم الصورة */
        height: 30px;
    }

    .about-us-description {
        font-size: 16px; /* تصغير حجم الوصف */
    }

    .features p {
        font-size: 18px; /* تصغير حجم النص في علامات الصح */
    }

    .green-button {
        font-size: 16px; /* تصغير حجم النص في الزر */
        padding: 10px 20px;
    }
}

/* سكشن آراء عملائنا */
.testimonials-section {
    margin-top: 88px; /* المسافة بين هذا القسم والقسم الذي يسبقه */
    padding: 80px 0; /* المسافة من الأعلى والأسفل */
    background-image: url('images/bg2.png'); /* استبدل بمسار صورتك */
    background-size: cover; /* تغطية الخلفية بالكامل */
    background-position: center; /* توسيط الخلفية */
    color: #FFFFFF; /* لون النص */
    text-align: center; /* محاذاة النص لليمين */
    position: relative; /* لجعل النص يظهر فوق الصورة */
}

.testimonials-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.testimonials-section h2 {
    font-size: 40px; /* حجم الخط 40 بكسل */
    font-weight: bold; /* خط عريض */
    color: #333333; /* لون النص */
    margin-bottom: 40px; /* المسافة تحت العنوان */
    position: relative; /* لجعل العنوان فوق الطبقة الشفافة */
    z-index: 1; /* التأكد من أن العنوان فوق الخلفية */
}

/* تنسيق الصورة تحت العنوان */
.title-image {
    display: block; /* لجعل الصورة تتصرف كعنصر block */
    margin: 0 auto; /* توسيط الصورة أفقيًا */
    margin-top: 0; /* المسافة بين العنوان والصورة (0 بكسل) */
    width: 50px; /* عرض الصورة */
    height: auto; /* الحفاظ على نسبة العرض إلى الارتفاع */
}

.testimonials-content {
    display: flex;
    justify-content: center;
    gap: 40px; /* المسافة بين آراء العملاء */
    flex-wrap: wrap; /* لجعل العناصر تنتقل لأسفل عند عدم وجود مساحة */
    position: relative; /* لجعل المحتوى فوق الطبقة الشفافة */
    z-index: 1; /* التأكد من أن المحتوى فوق الخلفية */
}

.testimonial {
    background-color: rgba(255, 255, 255, 0.1); /* خلفية شفافة للآراء */
    padding: 20px;
    border-radius: 8px; /* زوايا مدورة */
    max-width: 300px; /* عرض كل رأي */
    text-align: center; /* محاذاة النص لليمين */
}

.testimonial p {
    font-size: 18px; /* حجم النص */
    font-weight: 400; /* Regular */
    color: #333333; /* لون النص */
    line-height: 1.6; /* تباعد الأسطر */
    margin-bottom: 16px; /* المسافة تحت النص */
}

.testimonial span {
    font-size: 16px; /* حجم اسم العميل */
    font-weight: 500; /* Medium */
    color: #333333; /* لون النص */
    font-style: italic; /* نص مائل */
}

/* استعلامات الوسائط للشاشات الصغيرة */
@media (max-width: 768px) {
    .testimonials-section {
        padding: 40px 20px; /* تقليل المسافة للشاشات الصغيرة */
    }

    .testimonials-section h2 {
        font-size: 28px; /* تصغير حجم العنوان */
    }

    .testimonial {
        max-width: 100%; /* عرض كامل للشاشات الصغيرة */
    }
}
/* استعلامات الوسائط للشاشات الصغيرة */
@media (max-width: 768px) {
    .testimonials-section {
        padding: 40px 20px; /* تقليل المسافة للشاشات الصغيرة */
    }

    .testimonials-section h2 {
        font-size: 28px; /* تصغير حجم العنوان */
    }

    .testimonial {
        max-width: 100%; /* عرض كامل للشاشات الصغيرة */
    }
}

/* استعلامات الوسائط للشاشات الصغيرة */
@media (max-width: 768px) {
    .navbar {
        padding: 0 20px;
        height: 80px;
    }

    .navbar-brand img {
        width: 50px;
        height: 50px;
    }

    .navbar-nav {
        display: none;
    }

    .navbar-toggler {
        display: block;
    }

    .contact-btn {
        width: 120px;
        height: 40px;
        font-size: 16px;
    }

    .hero-section {
        padding: 40px 20px;
        min-height: 400px;
    }

    h1 {
        font-size: 36px;
    }

    .subtitle {
        font-size: 18px;
    }

    .buttons {
        flex-direction: column;
        gap: 10px;
    }

    .discover-btn,
    .contact-btn {
        width: 100%;
    }

    .cards-container {
        top: -80px;
        gap: 20px;
    }

    .card {
        width: 100%;
        margin-bottom: 20px;
    }

    .icon-circle {
        width: 60px;
        height: 60px;
        top: -30px;
    }

    .icon-circle i {
        font-size: 24px;
    }

    .card-title {
        font-size: 20px;
    }

    .card-description {
        font-size: 14px;
    }

    .new-section {
        margin-top: 20px;
        padding: 10px;
    }

    .new-section h2 {
        font-size: 24px;
    }

    .new-section p {
        font-size: 16px;
    }

}