* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}



.animate-slide-left {
  animation: slideInLeft 1s ease-out;
}

.animate-slide-right {
  animation: slideInRight 1s ease-out;
}

.bg-slide,
.bg-slide-mobile {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.bg-slide.active,
.bg-slide-mobile.active {
  opacity: 1;
}

.broucherDownloadContainer {
  transition: all 0.5s ease;
}

.broucherDownloadContainer.broucherActive {
  left: 0;
  transition: all 0.5s ease;
}

.costSheetDownloadContainer {
  transition: all 0.5s ease;
}
.costSheetDownloadContainer.costSheetActive {
  left: 0;
  transition: all 0.5s ease;
}

.mobileNavlinkContainer {
  transition: all 0.5s ease;
}

.mobileNavlinkContainer.active {
  /* display: block; */
  right: 0;
  transition: all 0.5s ease;
}

html {
  scroll-behavior: smooth;
}

/* price page css start */

.priceContainer {
  width: 100%;
  /* height: 92vh; */
  /* background-image: url("./images/homebanner.jpg"); */
  background-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.93)),
    url("./images/sobha-trinity-2.jpg");
  /* background-position: center; */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  /* background-color: #edf5f8; */
}

.bg-primary {
  background: linear-gradient(to right, #ffd95a, #b8860b);
}

.text-primary {
  background: linear-gradient(to right, #ffd95a, #b8860b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ================== */

@keyframes colorCycle {
  0% {
    background-color: #ff0000;
  }
  /* 50% { background-color: #021442; } */
  100% {
    background-color: #1e4191;
  }
}

.animate-color-change {
  animation: colorCycle 1s infinite alternate;
}