:root {
  --Gradient: red;
}

.w-225 {
  width: 215px;
}

.video-fluid {
  width: 100%;
  height: auto;
}

p {
  color: #fcfbfe; // Replace with your desired color
}

.custom-call-to-action-btn {
  position: relative; /* Added */
  width: 239px;
  height: 77px;
  background-color: #fcfbfe;
  color: #121212;
  border-radius: 80px;
  border: none;
  font-size: 1.5em;

  padding-right: 50px; /* Adjusted for space for the circle */
  transition: transform 0.3s;
}

.custom-call-to-action-btn::after {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #00824b;
  border-radius: 50%;
  z-index: 1;
  right: 10px;
  top: 50%;
  transform: translateY(-50%); /* Align center to the button's height */
  z-index: 1;
  background-image: url("images/arrow-circle-up-right.svg");
  background-size: cover;
  background-position: center;
}

.custom-call-to-action-btn:hover {
  transform: translateY(-10px);
  background-color: #00824b;
  color: #fcfbfe;
}

.custom-call-to-action-btn:hover::after {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #ffffff;

  border-radius: 50%;
  z-index: 1;
  right: 10px;
  top: 50%;
  transform: translateY(-50%); /* Align center to the button's height */
  z-index: 1;
  background-image: url("images/arrow-circle-up-right-bg-black.svg");
  background-size: cover;
  background-position: center;
}

.div-top {
  position: relative;
  /* position: absolute; */
  z-index: 2;
  /* visibility: hidden; */
}

.div-bottom {
  position: relative;
  top: -50px;
  z-index: 1;
}

.subtitles {
  display: flex;
  flex-direction: column;
  z-index: 5;
}

.test {
  border-radius: 60px;
  box-shadow: 8px 1px 15px #000000, -8px -8px 15px #3a3a3a;
}

.how-it-works-card {
  width: 255px;
  height: 151px;
  border-radius: 60px;
  background: var(--Gradient-2, linear-gradient(134deg, #454545 0%, rgba(50, 50, 50, 0) 98.67%));
  border-radius: 60px;
}

.hcards1,
.hcards2,
.hcards3,
.hcards4,
.hcards5 {
  position: relative;
}

.hcards1 {
  right: -40px;
}

.hcards2 {
  left: 10px;
}

.hcards3 {
  left: -20px;
}

.hcards4 {
  left: -40px;
}

.hcards5 {
  left: -60px;
}

.about-us-text {
  font-size: 45px;
  font-weight: 600;
  color: #ffffff;
}

/* full page section for the hero side */

main {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
  height: 100vh;
}

.city-section {
}

/* nav-link customization for hovering  */
.navbar .nav-link {
  transition: background-color 0.3s;
  border-radius: 15px;

  /* Add default background-color if needed */
  z-index: 0;
}

.navbar .nav-link:hover {
  background-color: #00824b;
  z-index: 1;
}

.dropdown-item:hover {
  background-color: #125d3e;
}

.img-fluid {
  max-width: 100% !important;
  height: auto !important;
}

.mt-custom {
  margin-top: 230px;
}

.mb-custom {
  margin-bottom: 230px;
}

.quote-now-corner-btn:hover {
  background-color: #00824b !important;
  color: #fcfbfe !important;
}