body {
            background-color: white;
    font-family: 'Cairo', sans-serif;
            direction: rtl;
            text-align: right;
			color:white;

        }
        
        .navbar {
  border-bottom: 3px solid;
  border-image: linear-gradient(to right, #ff7e5f, #9D2536) 1;

}
.comparison-section h2 {
  font-weight: bold;
  color: #333;
  margin-bottom: 30px;
  font-family: 'Cairo', sans-serif;
}
.table th, .table td {
  font-size: 1rem;
  font-family: 'Cairo', sans-serif;
}

.collapse {
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.collapse.show {
  /*max-height: 330px;  */
  opacity: 1;
  transform: translateY(0);
  
}
.menu-toggle[aria-expanded="true"] .navbar-toggler-icon {
  transform: rotate(90deg);
  transition: transform 0.4s ease;
}

  /* قائمة التنقل على الموبايل */
  @media (max-width: 991.98px) {
    #mainNavbar {
      width: 100%;
    }
    .navbar-nav {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .navbar-nav .nav-item {
      width: 100%;
      border-bottom: 1px solid #ddd;
    }
    .navbar-nav .nav-item:last-child {
      border-bottom: none;
    }
    .navbar-nav .nav-link {
      font-size: 1.2rem;
      padding: 0.75rem 1rem !important;
      width: 100%;
      text-align: center;
    }
    .btn-outline-primary {
      display: block;
      width: 90%;
      margin: 1rem auto;
      font-size: 1.1rem;
      padding: 0.5rem 0;
    }
  }
.hero {
    position: relative;
    height: 30vh;
    color: white;
    padding: 10px 50px 0 50px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden; /* حتى لا يظهر الفيديو خارج القسم */
}

.hero video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover; /* لتغطية الخلفية بالكامل */
    transform: translate(-50%, -50%);
    z-index: -1;
}

/* Dark overlay */
.hero::before {
    content: ''; /* Required for pseudo-element */
    position: absolute; /* Overlay needs to be on top */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Dark overlay with transparency */
    z-index: 1; /* Ensure it’s on top of the image */
}


        .hero-text {
    position: relative; /* Ensures that the text appears above the overlay */
    z-index: 2; /* Ensure text appears above the overlay */
    padding-right: 290px;
}

.hero-text p {
    font-size: 18px;
}
        
        /* Mobile responsiveness */
/* Mobile responsiveness */
@media (max-width: 768px) {
    .hero {
        height: 250px; /* Reduce the height for mobile screens */
        padding: 0 20px; /* Adjust padding to be smaller on mobile */
    }

    .hero-text {
        text-align: center; /* Center the text on mobile */
        background-color: rgba(0, 0, 0, 0.5); /* Black transparent background */
        padding: 10px; /* Add padding for spacing around text */
    }

    .hero-text p {
        font-size: 14px; /* Reduce font size for mobile */
    }

    .hero-text h2 {
        font-size: 24px; /* Adjust the heading size for mobile */
    }
}

/* Extra small screen adjustments */
@media (max-width: 480px) {
    .hero {
        height: 200px; /* Further reduce height for very small screens */
        padding: 0 10px; /* Further reduce padding */
    }

    .hero-text {
        background-color: rgba(0, 0, 0, 0.5); /* Keep transparent background on small screens */
        padding: 10px; /* Add padding for better readability */
    }

    .hero-text p {
        font-size: 9px; /* Further reduce font size */
    }

    .hero-text h2 {
        font-size: 20px; /* Further reduce heading size */
    }
}
        
        
        
        
        
        
        
        
        
        
        
        .trading-license-section {
            padding: 10px 0;
            border-radius: 15px;
            color:black;
            
        }
           .trading-license-section p{
               line-height: 1.7;           }
		.mylogoimage{
		width:70%;
		margin: 15px;
		}
        .license-container {
            max-width: 900px;
            margin: auto;
            background: white;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
    
		/* Navbar styles */
.navbar {
    background-color: #001A31;
    padding: 0.5rem 1rem;
}

/* Logo styling */
.navbar-brand img {
    max-height: 60px;
}

/* Spacing between navbar items */
.nav-item {
    margin-left: 15px;
}

/* Signup button styling */
.btn-signup {
    background-color: #00BF63;
    color: white;
    margin-left: 0;
    
    
}
.btn-signup {
    background-color: #28A745; /* لون الزر أخضر */
    color: #FFFFFF; /* لون الخط أبيض */
    font-size: 16px; /* حجم الخط */
    font-weight: bold; /* خط عريض */
    padding: 10px 20px; /* تباعد داخلي */
    border-radius: 8px; /* زوايا مستديرة */
    text-decoration: none; /* إزالة التسطير */
    display: inline-block; /* جعله يتناسب مع المحتوى */
    transition: background-color 0.3s ease-in-out; /* تأثير سلس عند التحويل */
}


.btn-signup:hover {
    background-color: #0056b3;
}
.containerTwoSecton{
    padding:25px;
}

.cards-section {
    background-image: url('hero-cover.webp'); /* Ensure the path is correct */
    background-attachment: scroll; /* Make the background scroll with the content */
    background-size: cover;
    background-position: center;
    padding: 50px 0; /* Adjust padding as needed */
    color: white; /* Optional: Change text color for visibility */
}

.card {
    border: 1px solid rgba(128, 128, 128, 0.5); /* Add semi-transparent gray border */
    border-radius: 8px; /* Optional: Add rounded corners */
    text-align: right; /* Center text */
    background: transparent; /* Set background to transparent */
    padding: 20px 0; /* Add padding inside the card */
    margin: 0 auto; /* Center the card horizontally */
    max-width: 300px; /* Set a max width for the card */
}

.card-body h5 {
    color: red;
}

.card-img-top {
    width: 20%; /* Adjust logo size as needed */
    margin: 0 auto; /* Center the image */
    max-height: 75px; /* Limit the height of logos */
}

@media (max-width: 576px) {
    .card-img-top {
        width: 60px; /* Further adjust logo size for very small screens */
    }

    .card-body h5 {
        font-size: 1.3rem; /* Adjust font size for headings */
    }

    .card-body {
    }

    /* Adjust card layout for mobile */
    .card {
        width: auto; /* Let the card take the necessary space */
        max-width: 70%; /* Limit the card width to 90% of the screen on mobile */
        margin-bottom: 10px; /* Add some space between the cards */
    }

    /* Center cards horizontally when they are stacked vertically */
    .cards-section .row {
        display: flex;
        justify-content: center; /* Center the cards horizontally */
        flex-wrap: wrap; /* Allow cards to wrap onto the next line */
    }

    /* Ensure proper spacing between cards */
 
}

  /* Custom CSS for the 'Why' section */
        .why-section {
            padding: 30px 0;
            text-align: center;
        }
        .why-title h2{
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 30px;
        }
        .why-image img {
            width: 70%;
            max-width: 100%;
            height: auto;
            text-align: center;
            align-items: center;
            margin-right: 25px;
        }
        .why-text {
            font-size: 1.1rem;
            margin-top: 20px;
            color: black;
        }
        .mywhyclass{
            direction: ltr;
            text-align: right;
            color: black;
        }
                @media (max-width: 576px) {
       .why-section {
            text-align: center;
        }
        .why-image{
                        text-align: center;

        }
  
}

    
    /* Default layout (for larger screens) */
.trading-license-section .col-md-6 {
    order: 0; /* Default order for larger screens */
}

/* Mobile-specific adjustments */
@media (max-width: 576px) {
    .trading-license-section .col-md-6 {
        order: 0; /* Ensure both columns start with default order */
    }
    
    /* Change order for the image to appear first on mobile */
    .trading-license-section .col-md-6.text-center {
        order: -1; /* Moves the image to the top */
    }
    
    /* Optionally center text on mobile */
    .trading-license-section .text-end {
        text-align: center;
    }

    /* Optional: Adjust image size on mobile if needed */
    .mylogoimage {
        width: 300px; /* Adjust logo size for mobile */
    }

    /* Make the button full width on mobile */
    .btn-danger {
    }
}

.ajman-title {
  color: #9D2536;
  font-weight: bold;
}


/* Our Vision Section */
.our-vision {
    position: relative; /* Make sure the overlay is positioned relative to this container */
    background-image: url('images/about-cover.webp'); /* Replace with your image path */
    background-size: cover; /* Ensure the image covers the section */
    background-position: center center; /* Center the image */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    padding: 50px 0;
    text-align: center;
    color: white; /* Ensures text is visible on top of the dark background */
}

/* Add a white transparent overlay using ::before */
.our-vision::before {
    content: ''; /* Pseudo-element needs content */
    position: absolute; /* Position it absolutely inside the parent */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.5); /* White with 30% opacity */
    z-index: 1; /* Ensure the overlay is above the background image but below the content */
}


/* Container for centering content */
.our-vision .container {
    position: relative; /* Make sure the text is above the overlay */
    width: 80%;
    margin: 0 auto;
    z-index: 2; /* Ensure content is above the overlay */
}
/* Title for the Our Vision section */
.our-vision h2 {
    font-size: 36px;
    margin-bottom: 20px;
    color: #333;
}

/* Wrapper for the vision cards */
.vision-cards {
        position: relative; /* Make sure the text is above the overlay */

    display: flex;
    flex-direction: column; /* Stack cards vertically */
    justify-content: center; /* Center cards vertically */
    align-items: center; /* Center cards horizontally */
    gap: 20px; /* Space between the cards */
    text-align: right;
        z-index: 5; /* Ensure content is above the overlay */

    
}

/* Each vision card */
.vision-card {
            position: relative; /* Make sure the text is above the overlay */

    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    width: 80%; /* Each card takes 60% of the container's width */
    max-width:700px; /* Maximum width of each card */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: right;
            z-index: 5; /* Ensure content is above the overlay */

}

.vision-card h3 {
    font-size: 24px;
    color: #333;
    margin-bottom: 10px;
}

.vision-card p {
    font-size: 16px;
    color: black;
}

/* Responsiveness: Make sure the cards are centered on small screens */
@media (max-width: 768px) {
    .vision-cards {
        flex-direction: column;
        align-items: center;
    }

    .vision-card {
        width: 90%; /* On small screens, cards take full width */
    }
}






     /* Custom Styling */
  /* Custom Styling */
    .custom-footer {
      background-color: #2C3E50;
      color: #ECF0F1;
      padding: 50px 0;
border-top: 4px solid; /* نحدد السماكة */
border-image: linear-gradient(to right, #9D2536, #ff7e5f) 1;
border-image-slice: 1;
}

    .footer-logo {
      max-width: 180px;
      margin-top: 10px;
    }

    .footer-column {
      text-align: center;
      direction: ltr;
    }

    .footer-column h5 {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 20px;
      color: green;
      
    }

    .footer-column p {
      color: #ECF0F1;
      margin-bottom: 10px;
    }

    .footer-column ul {
      padding-left: 0;
      list-style: none;
      margin: 0;
    }

    .footer-column ul li {
      margin-bottom: 10px;
    }

    .footer-column ul li a {
      color: #ECF0F1;
      text-decoration: none;
      transition: color 0.3s;
    }

    .footer-column ul li a:hover {
      color: #E74C3C;
    }

    .footer-bottom {
      text-align: center;
      margin-top: 40px;
      font-size: 14px;
      color: #BDC3C7;
    }

    /* Icon Styling */
    .phone-icon, .whatsapp-icon {
      margin-left: 10px;
    }

    /* Fix phone number and icon alignment */
    .footer-column ul li a {
      display: inline-flex;
      align-items: center; /* Ensure the icon and number are vertically aligned */
    }

    /* Responsive Design */
    @media (max-width: 767px) {
      .custom-footer {
        text-align: center; /* Center everything inside footer-column */
      }
      .footer-column {
        text-align: center; /* Center everything inside footer-column */
        margin-bottom: 30px;
      }

      .footer-column ul li {
        text-align: center;
      }

      .footer-column h5 {
        margin-bottom: 10px;
      }

      .footer-column ul {
        text-align: center;
        list-style: none;
        padding-right: 0;
      }

      .footer-logo {
        max-width: 150px;
        margin-bottom: 20px;
        display: block;
        margin-left: auto;
        margin-right: auto;
      }

      .footer-bottom {
        font-size: 12px;
      }
    }