header {
  position: relative;
}

nav {
  position: sticky;
  top: 0;
  z-index: 20; /* Ensures it is above other elements */
}

.learn-more {
  background: linear-gradient(270deg, #101820 38.4%, rgba(0, 0, 0, 0.3) 100%);

}


.images-div-1 img{
  max-height: 8rem;
  max-width: 20rem;
}

@keyframes serviceDiv {
  0% {
    opacity: 0.6;
  }
  33% {
    opacity: 0.8;
  }
  55% {
    opacity: 0.9;
  }
  100% {
    opacity: 1;
  }
}

.our-services-div:hover{
  animation: serviceDiv 0.5s ease-in-out;
}

.our-services-div:hover svg path{
  animation: serviceDiv 2s ease-in-out;
}

.learn-more .bg-img{
  opacity: 10%;
}

.learn-more-image {
  transition: opacity 0.5s ease-in-out;
}

.fade-out-learn-more {
  opacity: 0;
}

.fade-in-learn-more {
  opacity: 1;
}

/* Styles for Our Services section */
.our-services {
  width: 100%;
  height: 800px;
  opacity: 1; /* Not 0 for visibility */
  background: rgba(255, 255, 255, 1); /* White background */
}

.service-card img {
  transition: transform 0.3s ease;
}

.service-card:hover img {
  transform: scale(1.05);
}

.service-card h3 {
  font-size: 1.25rem; /* Adjust font size for headings */
}

/* Initial state of the images */
#startProjectSection .left-image,
#startProjectSection .right-image {
opacity: 0;
transform: translateX(0); /* Start from the center */
transition: all 1s ease-in-out;
}

/* Left image sliding to the left */
#startProjectSection .slide-left {
transform: translateX(100%); /* Move to the left */
opacity: 1;
}

/* Right image sliding to the right */
#startProjectSection .slide-right {
transform: translateX(-100%); /* Move to the right */
opacity: 1;
}

/* Initial hidden state for content */
#startProjectSection .content {
opacity: 0;
transform: translateY(20px); /* Slight offset from center */
transition: opacity 1s ease, transform 1s ease; /* Smooth transition */
}

/* Content fade-in effect */
#startProjectSection .fade-in {
opacity: 1;
transform: translateY(0); /* Move content to the center */
}

.dark-bg-1{
  background-color: rgba(32, 38, 44, 1);
}

.footer-border-1{
  border-bottom: 0.5px solid rgba(217, 217, 217, 0.5);
}

.grey-txt-1{
  color: rgba(140, 140, 140, 1);
}

.service-sec-height{
  min-height: 13rem;
}

.grey-border-1{
  border: 0.2px solid rgba(217, 217, 217, 0.5);
}

.white-txt-1{
  color: #e5e7eb;
}

.get-in-touch-div{
  width: 39%;
}

.get-in-touch-heading{
  font-size: 24px;
  font-family: Frank Ruhl Libre;
  font-weight: 600;
  line-height: 46.48px;
  letter-spacing: 0.03em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.get-in-touch-desc{
  /*font-family: Montserrat;*/
  font-size: 15px;
  font-weight: 300;
  /*line-height: 29.26px;*/
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  width: 80%;
}

.startbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  overflow: hidden;
  height: 60px;
  border-radius: 50%;
  transition: width 0.3s ease, border-radius 0.3s ease;
  position: relative;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.white-start-btn{
  background-color: white;
  color: #333;
}

.black-start-btn{
  background-color: #333;
  color: white;
}

.startbtn-width{
  width: 60px;
}

.startbtn-header-width{
  width: 30px;
}

.arrow-icon {
  width: 32px;
  opacity: 1;
  height: 32px;
  margin: 4px;
  margin-left: 12px;
  display: inline-block;
  transition: transform 0.3s ease;
}

.arrow-icon-2{
  width: 30px;
  height: 30px;
}

.btn-text {
  opacity: 0;
  margin-left: 10px;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}

.btn-txt-2{
  font-size: 16px;
  font-weight: 600;
}

.startbtn:hover, .startbtn-hover-effect  {
  width: 185px;
  border-radius: 25px;
  padding: 0 20px;
}
.startbtn-hover-effect:hover{
  box-shadow: 1px 2px 4px wheat;
}

.startbtn:hover .btn-text, .startbtn-hover-effect .btn-text{
  opacity: 1;
}

.startbtn:hover .arrow-icon, .startbtn-hover-effect .arrow-icon{
  transform: translateX(0);
  margin-left: 7px !important;
}

.startbtn-services:hover {
  width: 185px;
  border-radius: 25px;
  background-color: black;
  color: white;
  padding: 0 20px;
}

.startbtn-services:hover .btn-text {
  opacity: 1;
}

.startbtn-services:hover .arrow-icon {
  transform: translateX(0);
  margin-left: 7px !important;
}

#carousel {
  display: flex; /* Keep images aligned horizontally */
  transition: transform 0.5s ease-in-out; /* Smooth transition for image changes */
  overflow: hidden; /* Prevent content overflow */
  position: relative;
}

#carousel img {
  flex-shrink: 0; /* Prevent shrinking */
  transition: opacity 1s step-end; /* Smooth fade-in/fade-out effect */
}

#carousel img:hover{

  transition: none !important;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

.images-slider {
  position: relative;
  width: 80%;
  margin: 0 auto;
  overflow: hidden;
}

.slider-container {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slider-item {
  min-width: 100%;
  opacity: 0.3;
  transform: scale(0.8);
  transition: transform 0.5s, opacity 0.5s;
}

.slider-item.active {
  opacity: 1;
  transform: scale(1);
  max-width: 100%;
  justify-content: center;
  display: flex;
}

.slider-item.prev-active {
  opacity: 0.8;
  max-width: 10rem !important;
  min-width: 10rem !important;
  width: 10rem !important;
  height: 20rem !important;
  max-height: 20rem !important;
  min-height: 20rem !important;
  justify-content: center;
  display: flex !important;
  position: absolute !important;
  top: 25% !important;

  left: -1%;
}

.slider-item.next-active {
  opacity: 0.8;
  max-width: 10rem !important;
  min-width: 10rem !important;
  height: 20rem !important;
  max-height: 20rem !important;
  min-height: 20rem !important;
  justify-content: center;
  display: flex !important;
  position: absolute !important;
  top: 25% !important;
  right: -1%;
}

.slider-item.prev-active .slider-txt-div{
  position: unset;
  display: none;
}

.slider-item.next-active .slider-txt-div{
  position: unset;
  display: none;
}



.slider-item.prev-active img, .slider-item.next-active img{
  width: 100% !important;
  height: auto; /* Maintain aspect ratio */
  max-width: 100% !important; /* Ensure no overflow */
  border-radius: 10px !important;
}

.slider-item.active img{
  min-width: 78%;
  max-width: 78%;
}

.images-slider img {
  width: 100%;
  border-radius: 10px;
}

.images-slider-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
}

.images-slider-button.prev {
  left: 10px;
}

.images-slider-button.next {
  right: 10px;
}

@keyframes scrollbb {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.client-logos-animate-scroll {
  display: flex;
  animation: scrollbb 45s linear infinite;
  width: max-content;
}

.form-el-1{
  border: 0.5px solid rgba(217, 217, 217, 0.5);
  font-weight: 200;
}

.form-el-text-area-1{
  min-height: 6rem;
}

.form-el-1:hover, .form-el-1:focus{
  border-bottom-width: 1.5px !important;
  border-color: white;
  color: white;
  font-weight: 300 !important;
}

.form-el-1:focus {
  outline: none;
  box-shadow: none;
}

.arc-auro-txt-header{
  /* font-family: Poppins; */
  font-size: 150px;
  font-weight: 700;
  line-height: 180px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.arc-auro-txt-1{
  /* font-family: Poppins; */
  font-size: 65.36px;
  font-weight: 700;
  line-height: 128.04px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

@keyframes randomColor {
  0% {
    fill: #A0A0A0;
  }
  33% {
    fill: #000000;
  }
  66% {
    fill: #ffffff;
  }
  100% {
    fill: #A0A0A0;
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeInUp {
  animation: fadeInUp 1s ease-in-out forwards;
}

.hidden-before-scroll {
  opacity: 0;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Default state before animation */
.animate-fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s, transform 0.6s;
}

/* Active state when animation is triggered */
.animate-fade-in.visible {
  animation: fadeInUp 0.6s ease-out forwards;
}

.animation-delay-2 {
  animation-delay: 1s;
}
.up-arrow-el-header path {
  animation: randomColor 3s infinite; /* Adjust the duration as needed */
}
.up-arrow-el-header{
  width: 300px;
  margin-bottom: -3rem;
  margin-right: -3rem;
}


.up-arrow-el-1 path {
  animation: randomColor 3s infinite; /* Adjust the duration as needed */
}
.up-arrow-el-1{
  width: 6rem;
  margin-bottom: -4rem;
}

.up-arrow-el-2 path {
  animation: randomColor 3s infinite; /* Adjust the duration as needed */
}
.up-arrow-el-2{
  width: 3rem;
  margin-bottom: -2.7rem;
}

.footer-first-div{
  border-bottom: 0.5px solid rgba(217, 217, 217, 0.5);
}

.details-div{
  width: 25%;
}

.details-div-txt{
  font-size: 16px;
  font-weight: 300;
  line-height: 25.26px;
  text-align: left;
  word-spacing: 1.3px;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;

}

.footer-bottom-1{
  /* font-family: Montserrat; */
  font-size: 14px;
  font-weight: 300;
  line-height: 29.26px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

/* Contact Us Page */

.contact-us-inner-width{
  width: 75%;
}

.contact-us-main{
  background: rgba(11, 11, 11, 1);
}

.contact-txt-1{
  color: rgba(255, 255, 255, 1);
  font-family: Frank Ruhl Libre;
  font-size: 50px;
  font-weight: 600;
  line-height: 73.28px;
  letter-spacing: 0.03em;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  width: 60%;
}

.contact-txt-2{
  color: rgba(255, 255, 255, 1);
  font-size: 14.49px;
  font-weight: 200;
  line-height: 25.82px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.fade-in-out {
  animation: fadeInOut 7s ease-in-out infinite;
}

@media only screen and (max-width: 600px) {
  .arc-auro-txt-header{
    font-size: 40px;
  }

  .get-in-touch-div{
    width: 100%;
    padding: 20px;
  }

  .details-div{
    width: 80%;
  }

  .contact-us-inner-width{
    width: 87%;
  }

   .contact-txt-1{
    font-size: 32px;
    font-weight: 600;
    line-height: 40.28px;
    width: 87%;
  }

  .form-input-w{
    width: 166px;
  }

  .slider-item.prev-active {
    display: none !important;

  }

  .slider-item.next-active {
    display: none !important;
  }

  .w-100-sm{
    width: 97% !important;
  }

}