/* Global settings to prevent horizontal overflow */
html,
body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  max-width: 100vw;
}

/* ===> Hero Video CSS <=== */
.background-img {
  position: relative;
  width: 100%;
  height: fit-content;
  overflow: hidden; /* Prevents scrollbars */
  margin-top: 0px;
}

.background-img::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/images/business-person-futuristic-business-environment-1-1536x861.webp");
  background-size: cover;
  background-position: center;
  filter: blur(2px); /* Adds the blur effect */
  z-index: 1;
}

.background-img::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(
    77,
    194,
    9,
    0.1
  ); /* Adds a green tint with 30% opacity */
  z-index: 2;
}

.content {
  position: relative;
  z-index: 3; /* Ensures content appears above the background and tint */
  text-align: center;
  color: rgb(255, 255, 255); /* Adjust text color for readability */
  padding: 20px;
}

.hero-btn {
  font-family: "Poppins", Sans-serif;
  background-color: #1f72c2;
  /* background-color: rgb(77, 194, 9); */
  color: aliceblue;
}
.hero-btn:hover {
  font-family: "Poppins", Sans-serif;
  cursor: pointer;
  background-color: #1860a3;
  color: aliceblue;
}

.hero-video {
  width: 100%;
  max-width: 560px;
  margin: auto;
  padding: 0 10px; /* Add padding to prevent overflow */
  box-sizing: border-box; /* Ensures padding doesn’t exceed width */
}

.video-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  border: 5px solid #2b99ff;
  box-shadow: rgba(255, 255, 255, 0.25) 0px 54px 55px,
    rgba(255, 255, 255, 0.12) 0px -12px 30px,
    rgba(255, 255, 255, 0.12) 0px 4px 6px,
    rgba(255, 255, 255, 0.17) 0px 12px 13px,
    rgba(255, 255, 255, 0.09) 0px -3px 5px;
  border-radius: 15px;
  overflow: hidden;
  background: #000;
}

.video-container video,
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Responsive Adjustments */
@media only screen and (max-width: 770px) {
  .hero-video {
    width: 90%;
    max-width: 480px;
  }
  .background-img {
    position: relative;
    width: 100%;
    height: fit-content;
    overflow: hidden; /* Prevents scrollbars */
    margin-top: 20px;
  }
}

@media only screen and (max-width: 600px) {
  .hero-video {
    width: 100%;
    max-width: 420px;
  }
  .background-img {
    position: relative;
    width: 100%;
    height: fit-content;
    overflow: hidden; /* Prevents scrollbars */
    margin-top: 40px;
  }
}

@media only screen and (max-width: 400px) {
  .hero-video {
    width: 100%;
    height: 100%;
    max-width: 320px;
  }
  .background-img {
    position: relative;
    width: 100%;
    height: fit-content;
    overflow: hidden; /* Prevents scrollbars */
    margin-top: 50px;
  }
}

/* Text Animations */
.text-glow-scale,
.text-scale,
.text-glow-scale-blue {
  display: inline-block;
  transition: transform 0.3s ease, text-shadow 0.3s ease;
}

.text-scale:hover {
  transform: scale(1.1);
}

.text-glow-scale:hover {
  transform: scale(1.03);
  text-shadow: 0 0 8px rgba(144, 197, 17, 0.6), 0 0 12px rgba(144, 197, 17, 0.5),
    0 0 16px rgba(144, 197, 17, 0.4);
}

.text-glow-scale-blue:hover {
  transform: scale(1.03);
  text-shadow: 0 0 8px rgba(31, 114, 194, 0.6), 0 0 12px rgba(31, 114, 194, 0.5),
    0 0 16px rgba(31, 114, 194, 0.4);
  /* text-shadow: 0 0 8px rgba(13, 110, 253, 0.6), 0 0 12px rgba(13, 110, 253, 0.5),
    0 0 16px rgba(13, 110, 253, 0.4); */
}

.bg-s1 {
  background-color: #002da0;
  /* background: linear-gradient(9deg, rgba(0, 45, 160, 1) 38%); */
}
.bg-s2 {
  background-color: rgba(255, 255, 255, 0.3);
  /* background: linear-gradient(9deg, rgba(0, 45, 160, 1) 38%); */
}
.bg-s3 {
  background-color: #07182e;
  /* background: linear-gradient(9deg, rgba(0, 45, 160, 1) 38%); */
}
.txt-c1 {
  color: #001b61;
}
.bg-r1 {
  /* background-color: #00227a; */
  background: linear-gradient(
    90deg,
    rgb(0, 45, 0) 0%,
    rgb(0, 75, 20) 40%,
    rgb(0, 30, 10) 70%,
    rgb(0, 10, 0) 100%
  );
}
.bg-r2 {
  /* background-color: #00227a; */
  background: linear-gradient(
    90deg,
    rgb(0, 45, 0) 0%,
    rgb(0, 75, 20) 40%,
    rgb(0, 30, 10) 70%,
    rgb(0, 10, 0) 100%
  );
}

.text-green {
  color: #1f72c2;
  /* color: #55e728; */
}
.bg-price {
  background-color: #165a99 !important;
  /* background-color: #3fa205 !important; */
}
.bg-price-50 {
  background-color: rgba(31, 114, 194, 0.5) !important;
}

/* anim img  */
#anim-img {
  transition: transform 0.3s ease-in-out;
}

#anim-img:hover {
  transform: scale(1.1);
}

/* Container that holds the market slider */
.market-slider-container {
  width: 100%; /* Full width */
  overflow: hidden; /* Hide anything that is outside the container */
  background-color: #f8f8f8; /* Light gray background */
  border-radius: 10px; /* Optional rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional shadow for a clean look */
  margin: 20px 0; /* Some space above and below */
}

/* The actual slider (market data items) */
.market-slider {
  display: flex; /* Flexbox for the items to line up in a row */
  animation: slide 10s linear infinite; /* The sliding animation, runs every 10 seconds */
}

/* Each item in the slider */
.market-item {
  display: inline-block; /* Show each item in a line */
  padding: 15px 20px; /* Spacing inside each item */
  font-size: 16px; /* Font size */
  font-weight: bold; /* Bold text */
  color: #333; /* Dark text color */
  background-color: #fff; /* White background for each item */
  border-radius: 5px; /* Rounded corners */
  margin-right: 50px; /* Space between items */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Light shadow */
}

/* Animation: This will make the items scroll from right to left */
@keyframes slide {
  0% {
    transform: translateX(100%); /* Start from the right edge */
  }
  100% {
    transform: translateX(-100%); /* End at the left edge */
  }
}

/* anim */
.container-anim {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  /* height: 200vh; */
}

.text-anim {
  font-size: 5vw;
  letter-spacing: -0.01em;
  /* line-height: 100%; */
  margin: 0;

  width: 100%;
  color: rgba(255, 255, 255, 0.4);
  background: linear-gradient(to right, #e4e4e4, #e0e0e0) no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 0%;
  transition: background-size cubic-bezier(0.1, 0.5, 0.5, 1) 0.5s;

  border-bottom: 1px solid #2f2b28;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  position: relative;
}

.span {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #1f72c2;
  border: none;
  border-radius: 8px;
  color: #ffffff;
  padding: 0 10px;
  clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
  transform-origin: center;
  transition: all cubic-bezier(0.1, 0.5, 0.5, 1) 0.4s;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.text-anim:hover > span {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.text-anim a {
  text-decoration: none;
  color: #ffffff !important;
}

/* best 4 broker  */
.flex-wrap-container-X9k {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* Spacing between images */
  margin-top: 20px; /* Top margin */
  justify-content: center; /* Center alignment */
}

.image-box-H7g {
  background: #1e7cd4; /* Initial background */
  /* background: #0081278c;  */
  border-radius: 8px; /* Rounded corners */
  padding: 5px;
  transition: transform 0.5s ease, background 0.5s ease, box-shadow 0.3s ease; /* Smooth hover effects */
}

.image-box-H7g:hover {
  transform: scale(1.1); /* Slight rotation on hover */
  background: linear-gradient(
    45deg,
    rgb(var(--rand1), var(--rand2), var(--rand3)),
    rgb(var(--rand4), var(--rand5), var(--rand6))
  ); /* Blue-green gradient with random colors */
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2); /* Add shadow effect */
}

/* Keyframes for dynamic color change */
@keyframes gradient-animation {
  0%,
  100% {
    --rand1: 0;
    --rand2: 128;
    --rand3: 255;
    --rand4: 0;
    --rand5: 255;
    --rand6: 128;
  }
  50% {
    --rand1: 255;
    --rand2: 128;
    --rand3: 0;
    --rand4: 128;
    --rand5: 0;
    --rand6: 255;
  }
}

/* Apply animation */
.image-box-H7g:hover {
  animation: gradient-animation 1.5s infinite;
}

@media (max-width: 768px) {
  .flex-wrap-container-X9k {
    gap: 15px; /* Reduce spacing for smaller screens */
  }
  .image-box-H7g {
    width: 150px; /* Smaller width for images on mobile */
    height: 150px; /* Smaller height for images on mobile */
  }
}

/* text animation  */
.largeHeading {
  font-size: 3rem; /* Default font size */

  text-align: center; /* Center-align the heading */
  display: inline-block; /* Ensure the gradient applies properly */
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}

/* Keyframes for gradient color change animation */

/* Responsive Design */
@media (max-width: 768px) {
  .largeHeading {
    font-size: 2.5rem; /* Smaller font size for tablets */
  }
}

@media (max-width: 480px) {
  .largeHeading {
    font-size: 2rem; /* Even smaller font size for mobile devices */
  }
}