/* Default state for the navbar */
body {
  background-color: #f7f9fa;
}
#navbar-container {
  background-color: #ffffff;
  /* opacity: 0.9;  */
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: background-color 0.3s ease; /* Smooth transition */
}
/* Navbar styling */
.navbar {
  position: relative;
  z-index: 10;
}
.navbar-nav {
  opacity: 1;
  transform: translateX(0);
  transition: none;
}
.rotating-logo {
  width: 60px; /* Adjust size as needed */
  height: 30px; /* Adjust size as needed */
  animation: rotateLeftRight 3s linear infinite; /* Rotates infinitely in 3 seconds */
}

@keyframes rotateLeftRight {
  0% {
    transform: rotateY(0deg); /* Initial state (no rotation) */
  }
  50% {
    transform: rotateY(
      180deg
    ); /* Rotate 180 degrees (flip to the other side) */
  }
  100% {
    transform: rotateY(0deg); /* Back to initial state */
  }
}

.dropdown-menu li h6 {
  color: #000;
}

.navbar-nav {
  gap: 9px;
}

.navbar .nav-link {
  color: black !important;
  font-size: 1.1rem;
}

.dropdown-menu .dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.1); /* Optional hover effect */
}

.dropdown-menu {
  padding: 5px;
  border: none;
}

.navbar .dropdown-item:hover {
  text-decoration: underline;
}

.navbar .dropdown-menu {
  position: absolute;
  z-index: 1050;
  padding: 10px;
}

.nav-item.dropdown {
  text-align: left;
}

.nav-item .dropdown-menu {
  left: 0;
  right: auto;
  text-align: left;
  border: none;
}

.navbar-nav .nav-item {
  text-align: left;
}

.navbar-nav .nav-item a {
  padding-left: 0;
}
.fa {
  color: black;
}
/* Cart Preview (Navbar Hover) */
.logo img {
  mix-blend-mode: multiply; /* or screen, depending on the effect */
}
.hero img {
  width: 50vh; /* Automatically adjust the width */
  height: 50vh; /* Limit the height to 50% of the viewport height */
  object-fit: cover; /* Cover the area of the container, cropping the image */
  object-position: top; 
  border-radius: 50%; /* Keeps the image round */
  display: block; /* Ensure proper alignment and spacing */
  margin: 0 auto; 
  /* box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px; */
 opacity: .9;
}


.animated-heading {
  display: inline-block;
  /* font-size: 5rem; */
  font-weight: bold;
}

.animated-heading span {
  display: inline-block;
  transform: translateY(-100%);
  opacity: 0;
  animation: slide-in 0.5s ease forwards;
}

.animated-heading span.space {
  width: 1rem; /* Space between words */
}

@keyframes slide-in {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.hero h1 {
  color: black;
  font-size: 3rem;
  margin-top: 10px;
}
.hero_1 {
  border-radius: 10px;
  padding: 2px;
}
.hero_1 img{
  transition: transform 0.3s ease, opacity 0.3s ease;

}
.hero_1 img:hover{
  transform: scale(1.1); 
  opacity: 1; 
  border: 2px solid blanchedalmond;
}
.hero-0{
  background-color: rgba(247, 249, 250, 0.5);
  border-radius: 10px;
  padding: 2px;
}
#hero {
  position: relative;
  overflow: hidden;
}

#hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Makes the video cover the entire section */
  z-index: -1; /* Places the video behind the content */
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Optional: Adds a dark overlay */
  filter: blur(5px); /* Blurs the background video */
  z-index: -1;
}

.content {
  position: relative;
  z-index: 1;
  text-align: center;
}
.social-icon {
  display: inline-block;
  margin: 0 10px;
  border: 2px solid gray;
  border-radius: 5px;
  text-decoration: none;
  transition: transform 0.2s, color 0.3s;
}
.social-icon svg {
  fill: #666; /* Default icon color */
  transition: fill 0.3s;
}
.social-icon:hover {
  transform: translateY(-5px);
}
.facebook svg:hover {
  fill: #4267b2; /* Facebook Blue */
}
.instagram svg:hover {
  fill: #e4405f; /* Instagram Pinkish */
}

.linkedin svg:hover {
  fill: black; /* LinkedIn Blue */
}
.twitter svg:hover {
  fill: #1da1f2; /* Twitter Blue */
}
.content {
  
  border-radius: 10px;
  padding: 20px;
}
.marquee {
  overflow: hidden;
  white-space: nowrap;
  background-color: rgba(247, 249, 250, 0.5);
  border-radius: 10px;
  padding: 30px;
  height: 15vh;
  font-weight: bolder;
  margin-top: 70px;
  align-items: center;
  font-size: 2rem;
  box-sizing: border-box;
  width: 100%; /* Adjust width as needed */
}

.marquee p {
  display: inline-block;
  animation: marquee 60s linear infinite; /* Slower duration for smoother scrolling */
  white-space: nowrap;
  margin: 0; /* Remove default margin */
  padding: 0;
  position: relative; /* Required for the initial position */
  transform: translateX(100%); /* Ensure text starts just outside view */
}

@keyframes marquee {
  0% {
    transform: translateX(100%); /* Start just outside the right edge */
  }
  1% {
    transform: translateX(99%); /* Small shift to ensure visibility on load */
  }
  100% {
    transform: translateX(-100%); /* End outside the left edge */
  }
}

.messaeg {
  background-color: rgba(247, 249, 250, 0.5);
  padding: 10px;
  border-radius: 10px;
  margin-top: 30px;
}
.messaeg strong {
  color: #007573;
}
.services-provided {
  position: relative; /* Necessary for positioning the pseudo-element */
  padding: 10px;
  margin-top: 30px;
}

.services-provided::before {
  content: ""; /* Creates the pseudo-element */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(../img/dubai2.jpg);
  object-fit: contain; /* Ensures the image adjusts without cropping */
  
  background-size: 100% 100%; /* Stretch image to cover entire element */
  background-position: center center; /* Centers the image */
  background-repeat: no-repeat; /* Prevents the image from repeating */
  filter: blur(2px); /* Apply the blur effect */
  z-index: -1; /*
}

#services-individual::before {
  content: ""; /* Creates the pseudo-element */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(../img/dubai.jpg); /* Set the background image here */
  background-size: cover; /* Ensures the image covers the entire section */
  background-position: center center; /* Centers the image */
  background-repeat: no-repeat; /* Prevents the image from repeating */
  filter: blur(2px); /* Apply the blur effect */
  z-index: -1; /* Send the pseudo-element behind the content */
}
#legal-services-pricing {
  position: relative;
  padding: 10px;
  margin-top: 30px;
  color: white;
}
#Companies::before {
  content: ""; /* Creates the pseudo-element */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(../img/dubai2.jpg);
  object-fit: contain; 
  
  background-size: cover; /* Ensures the image covers the entire section */
  background-position: center center; /* Centers the image */
  background-repeat: no-repeat; /* Prevents the image from repeating */
  filter: blur(2px); /* Apply the blur effect */
  z-index: -1; /* Send the pseudo-element behind the content */
}
.work {
  border: 2px solid rgb(234, 228, 228);
  border-radius: 10px;
  padding: 10px;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

@keyframes marquee {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
.messaeg {
  overflow: hidden;
  height: auto;
}
#services {
  padding: 30px 0;
}
.bg-custom {
  background: black; /* Initial gradient */
  border: 1px solid white;
  color: white;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  transition: background 0.3s ease, transform 0.3s ease; /* Transition for background and transform */
}
.service-item {
  background: rgba(30, 26, 26, 0.5); /* Initial gradient */
  transition: transform 0.1s ease !important, background 0.1s ease;
}

/* Hover effect: gradient background and zoom-in */
.service-item:hover {
  background: #7cd2d0 !important;
  color: #000;
  transform: scale(1.05) !important; /* Zoom-in effect with !important */
}
/* Ensure AOS does not interfere with the scaling */
.service-item i {
  font-size: 20px;
}
.service-item h2 {
  font-size: 15px;
}
.service-item {
  /* max-height: 900px; Fixed height for consistent size */
  overflow: hidden; /* Hide overflow content */
  transition: max-height 0.5s ease;
  /* Smooth transition for expanding */
  position: relative;
}
.service-item a {
  color: white;
}
.service-item a:hover {
  color: white;
}
.service-item.expanded {
  max-height: auto; /* Expanded height to show more content */
}

.hidden-content {
  display: none; /* Hide additional content by default */
}

.service-item.expanded .hidden-content {
  display: inline; /* Show content when expanded */
}

.toggle-content {
  display: block;
  margin-top: 10px;
  color: #007bff;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
}

.toggle-content:hover {
  text-decoration: underline;
}
.service-item:hover h2,
.service-item:hover i,
.service-item:hover a {
  color: black;
}
/* Ensure all cards are the same height */
.service-card {
  height: 400px;
  transition: transform 0.3s ease-in-out; 
  overflow: hidden;
  
}

/* Apply zoom effect on hover */
.service-card:hover {
  transform: scale(1.1); /* Zoom in by 10% */
  z-index: 1; /* Ensure the hovered card is above others */
}

.is-invalid {
  border: 2px solid red;
  border-radius: 4px;
}
.main {
  background-color: #002b49;
  color: white;
}
h1,h2,h3,h4,h5,h6 {
  font-weight: bold;
}
a {
  text-decoration: none; /* Removes the underline */
}
.services-slider img {
  width: 50px; /* Set the width */
  height: 50px; /* Set the height */
  border-radius: 50%; /* Make the image round */
  object-fit: contain; /* Ensure the entire image is visible without cropping */
  display: block;
  margin-bottom: 10px; /* Optional: Removes inline spacing issues */
 
}
.service-item {
  display: flex; /* Enables flexbox layout */
  flex-direction: column; /* Aligns items vertically */
  align-items: center; /* Centers items horizontally */
}
.service-item img {
  
  
  object-fit: contain; 
  display: block;
  margin-bottom: 10px;
  
}
/* Mobile device adjustments */
@media (max-width: 768px) {
  .navbar-nav {
    opacity: 0;
    transform: translateX(-100%);
    transition: transform 0.5s ease, opacity 0.5s ease;
    width: 100%;
    text-align: left;
    justify-content: flex-start;
  }

  .navbar-collapse.show .navbar-nav {
    opacity: 1;
    transform: translateX(0);
  }

  .navbar-collapse {
    width: 100%;
  }

  .navbar-toggler {
    border: none;
  }

  .navbar-toggler:hover {
    box-shadow: none !important;
  }
  #services h1 {
    display: inline-block;
    /* justify-content: center; */
  }
  .row {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on medium screens */
  }
  .hero h1 {
    color: black;
    font-size: 1.9rem;
    margin-top: 10px;
}
.content {
  border-radius: 10px;
  padding: 11px;
}
}

@media (max-width: 1200px) {
  .row {
    grid-template-columns: repeat(4, 1fr); /* 4 columns on large screens */
  }
}



@media (max-width: 576px) {
  .row {
    grid-template-columns: 1fr; /* 1 column on small screens */
  }
  
}
/* Base styles remain unchanged for small devices */

/* Adjust layout for larger devices */
@media (min-width: 768px) {
  .hero .row {
    flex-direction: row-reverse; /* Switch the order of hero_1 and hero_2 for large devices */
  }
  .hero_1 {
    text-align: left; /* Align text to the left for consistency with hero_2 */
    padding-right: 5rem; /* Add spacing for better layout */
  }
  .hero_2 {
    padding-left: 5rem; /* Add spacing for better layout */
  }
  .service-item img {

    object-fit: contain; 
    display: block;
    margin-bottom: 10px;
    
  }
  .service-item img {
    max-width: 100%; /* Make sure the image doesn't overflow */
    margin-left: auto; /* Center horizontally */
    margin-right: auto; /* Center horizontally */
  }
}
.service-img {
  width: auto; 
  height: 200px; 
  object-fit: fill; 
  border-radius: 10px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.service-img:hover {
  transform: scale(1.1); 
  opacity: 1; 
}
#Experience{
  margin-bottom: 20px;
}