/*header*/

:root {
  --accent-color: #9cd8f7;
}

.gallery {
  display: flex;
  flex-wrap: wrap; /* Allow items to wrap to the next line */
  gap: 5px; /* Space between items */
}
.image-item {
  position: relative;
  width: 100%; /* Full width for each item */
}
.image-item img {
  width: 70%; /* Make the image responsive */
  height: auto; /* Maintain aspect ratio */
  border-radius: 5px; /* Optional: add some border radius */
}
.image-label {
  position: absolute;
  bottom: 10px; /* Position label at the bottom of the image */
  left: 10px; /* Position label from the left */
  background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
  color: white; /* Label text color */
  padding: 5px 10px; /* Padding around the label */
  border-radius: 5px; /* Optional: add some border radius */
}

.header-top {
  background-color: black;
}

.navmenu li:hover > a,
.navmenu .active,
.navmenu .active:focus {
  color: #9bd8f7;
}

.dropdown ul li a:hover {
  color: #9bd8f7 !important;
}

.btn-get-started,
.read-more {
  color: black !important;
}
/* header END*/

.footer {
  background-color: black;
  color: white;
  padding: 60px 0;
  font-size: 14px;
  border-top: 1px solid
    color-mix(in srgb, var(--default-color), transparent 80%);
}

.footer .widget .widget-heading {
  font-size: 15px;
  color: white;
  margin-bottom: 20px;
}

.footer a {
  color: white !important;
}
.about .btn-get-started {
  background-color: #539dc3 !important;
  color: var(--contrast-color) !important;
}
.about .btn-get-started:hover {
  border-color: #9cd8f7;
  background-color: #9cd8f7;
  color: black;
}
.blue-letter {
  color: #9bd8f7;
}

.footer {
  background-color: black !important;
  color: white !important;
}

.btn-get-started,
.service-icon {
  background-color: #9cd8f7 !important;
  color: black !important ;
}

.read-more {
  color: black !important ;
}

.footer a {
  color: white !important;
}

.active a {
  color: #9cd8f7;
}

.footer h5 {
  color: var(--accent-color) !important;
}
.footer i {
  font-size: 1.5rem;
}

.footer i:hover {
  color: var(--accent-color) !important;
}

section,
.section {
  background-color: white;
  padding: 0px 0px !important;
  /* padding-bottom: 40px; */
}

.carousel-item h1 {
  font-size: 65px;
  color: white;
}

@media (max-width: 768px) {
  .carousel-item h1 {
    font-size: 40px;
  }
}

.carousel-item h2 {
  font-size: 40px;
  color: white;
  font-weight: 300;
}

@media (max-width: 768px) {
  .carousel-item h2 {
    font-size: 20px;
    color: white;
    font-weight: 300;
  }

  .carousel-item {
    padding: 20px;
  }
}

.about-2 p {
  text-align: justify;
}

.teams p {
  text-align: center;
}

.contact-info-box {
  background-color: var(--accent-color);
  padding: 20px;
  border-radius: 10px;

  p {
    color: white;
  }
}

.info-item {
  p {
    font-weight: 500;
  }
}

.contact .info-item i {
  color: #2d465e !important;
  font: bolder;
  font-size: 2rem;
}

.contact .php-email-form textarea {
  height: 220px !important;
}

select.form-control {
  height: 48px;
  padding: 10px 15px;
  color: var(--default-color);
  background-color: var(--surface-color);
  border-radius: 0px;
  box-shadow: none;
  font-size: 14px;
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.contact .php-email-form select:focus {
  border-color: #9bd8f7;
  box-shadow: none;
}

.form-control option {
  border-color: #9bd8f7;
}

.portfolio-item {
  h4 {
    font-size: 1.2rem;
    font-weight: 600;
  }

  p {
    text-align: justify;
  }
  img {
    transition: transform 0.3s ease-in-out;
    width: 350px;
  }

  img:hover {
    transform: scale(1.1);
  }
  .btn{
    font-size: 0.9rem;

  }
}

.heading-container {
  text-align: center;
}
.border-heading {
  display: inline-block; /* Makes the heading inline for centering */
  position: relative; /* Allows positioning of the border */
  font-size: 2.5rem; /* Adjust font size as needed */
  font-weight: 700;
}

.border-heading::after {
  content: ""; /* Adds a decorative line under the heading */
  display: block; /* Ensures it takes up space below */
  margin: 0 auto; /* Centers the line below the heading */
  width: 30%; /* Adjust the size of the border */
  border-bottom: 5px solid #9bd8f7; /* Adjust border size and color */
  margin-top: 8px; /* Adds space between the text and the border */
}

.clients {
  img {
    width: 150px;
     transition: transform 0.3s  ease-in-out;
    border: 1px solid #ccc;
  }

  img:hover {
    transform: scale(1.1);
  }
}


/* client marque start */

.wrapper {
  display: grid;
  grid-template-columns: repeat(9, minmax(12vmin, 1fr));
  width: 100%;
  overflow: hidden;

  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1) 10%,
    rgba(0, 0, 0, 1) 90%,
    rgba(0, 0, 0, 0)
  );
  animation-play-state: running; /* Default to running */
  
}

.wrapper:hover {
  animation-play-state: paused; /* Pause all animations on hover */

}
.wrapper img {
  --time: 35s;
  position: relative;
  width: 105%;
  aspect-ratio: auto;
  grid-column: 1;
  grid-row: 1;
  margin: 0 20px; /* Increase gap between images */
  border: 1px solid #ccc;

  object-fit: cover;
  left: calc(100% * 9);
  animation: marquee var(--time) linear infinite;
  animation-play-state: inherit; /* Inherit play-state from parent (.wrapper) */
  

  /* Add specific animation delays for each image */
  &:nth-of-type(1) { animation-delay: calc((var(--time) / 9) * (9 - 1) * -1); }
  &:nth-of-type(2) { animation-delay: calc((var(--time) / 9) * (9 - 2) * -1); }
  &:nth-of-type(3) { animation-delay: calc((var(--time) / 9) * (9 - 3) * -1); }
  &:nth-of-type(4) { animation-delay: calc((var(--time) / 9) * (9 - 4) * -1); }
  &:nth-of-type(5) { animation-delay: calc((var(--time) / 9) * (9 - 5) * -1); }
  &:nth-of-type(6) { animation-delay: calc((var(--time) / 9) * (9 - 6) * -1); }
  &:nth-of-type(7) { animation-delay: calc((var(--time) / 9) * (9 - 7) * -1); }
  &:nth-of-type(8) { animation-delay: calc((var(--time) / 9) * (9 - 8) * -1); }
  &:nth-of-type(9) { animation-delay: calc((var(--time) / 9) * (9 - 9) * -1); }
  &:nth-of-type(10) { animation-delay: calc((var(--time) / 9) * (9 - 10) * -1); }
  &:nth-of-type(11) { animation-delay: calc((var(--time) / 9) * (9 - 11) * -1); }
  &:nth-of-type(12) { animation-delay: calc((var(--time) / 9) * (9 - 12) * -1); }
  &:nth-of-type(13) { animation-delay: calc((var(--time) / 9) * (9 - 13) * -1); }
  &:nth-of-type(14) { animation-delay: calc((var(--time) / 9) * (9 - 14) * -1); }
  &:nth-of-type(15) { animation-delay: calc((var(--time) / 9) * (9 - 15) * -1); }
  &:nth-of-type(16) { animation-delay: calc((var(--time) / 9) * (9 - 16) * -1); }
  &:nth-of-type(17) { animation-delay: calc((var(--time) / 9) * (9 - 17) * -1); }
  &:nth-of-type(18) { animation-delay: calc((var(--time) / 9) * (9 - 18) * -1); }
  &:nth-of-type(19) { animation-delay: calc((var(--time) / 9) * (9 - 19) * -1); }
  &:nth-of-type(20) { animation-delay: calc((var(--time) / 9) * (9 - 20) * -1); }
  &:nth-of-type(21) { animation-delay: calc((var(--time) / 9) * (9 - 21) * -1); }
  &:nth-of-type(22) { animation-delay: calc((var(--time) / 9) * (9 - 22) * -1); }
  &:nth-of-type(23) { animation-delay: calc((var(--time) / 9) * (9 - 23) * -1); }
  &:nth-of-type(24) { animation-delay: calc((var(--time) / 9) * (9 - 24) * -1); }
  &:nth-of-type(25) { animation-delay: calc((var(--time) / 9) * (9 - 25) * -1); }
  &:nth-of-type(26) { animation-delay: calc((var(--time) / 9) * (9 - 26) * -1); }
  &:nth-of-type(27) { animation-delay: calc((var(--time) / 9) * (9 - 27) * -1); }
}

/* Pause the animation when hovering over an image */
.wrapper img:hover {
  animation-play-state: paused;
}

@keyframes marquee {
  to {
    left: -100%;
  }
}


/* client marque end */