/* 1 Gradient Background with Shadow */
.bg-gradient {
  background: linear-gradient(45deg, #1b2e6e, #e2b161) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

/* 2 Diagonal Lines Overlay */
.bg-diagonal {
  background: linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.05) 25%,
    transparent 25%,
    transparent 50%,
    rgba(0, 0, 0, 0.05) 50%,
    rgba(0, 0, 0, 0.05) 75%,
    transparent 75%,
    transparent
  );
  background-size: 50px 50px;
}

/* 3 Glassmorphism */
.bg-glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 4 Split Background with Rounded Edges */
.bg-split {
  background: linear-gradient(to right, #e2b161 50%, #1b2e6e 50%);
  border-radius: 10px;
}

/* 5 Bordered with Transparent Background */
.bg-transparent-bordered {
  background-color: transparent;
  border: 2px solid #1b2e6e;
  border-radius: 15px;
}
.bg-transparent-bordered-silver {
  background-color: transparent;
  border: 2px solid #1b2e6e;
  border-radius: 15px;
}

/* 6 Minimalist with Box Shadow */
.bg-minimal {
  background-color: #e2b161;
  box-shadow: 0 0 15px rgba(27, 46, 110, 0.3);
  border-radius: 5px;
}

/* 7 Circular Hover Effects */
.hover-circular-effect img {
  transition: transform 0.3s;
}
.hover-circular-effect img:hover {
  transform: scale(1.1) rotate(10deg);
}

/* 8 Fade In/Out Animations */
.fade-animation {
  animation: fadeInOut 4s infinite;
}
@keyframes fadeInOut {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

/* 9 Background with Dotted Pattern */
.bg-dotted {
  background: radial-gradient(#1b2e6e 1px, transparent 1px), #ffffff;
  background-size: 10px 10px;
}

/* 10 Corner Shapes (Top Right and Bottom Left) */
.top-right-anim,
.bottom-left-anim {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #e2b161;
  border-radius: 50%;
}
.top-right-anim {
  top: 0;
  right: 0;
  animation: moveRight 5s infinite;
}
.bottom-left-anim {
  bottom: 0;
  left: 0;
  animation: moveLeft 5s infinite;
}
@keyframes moveRight {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-20px, 20px);
  }
}
@keyframes moveLeft {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(20px, -20px);
  }
}

/* 11 Wavy Border Animation */
@keyframes wave {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(20px);
  }
  100% {
    transform: translateX(0px);
  }
}
.bg-wavy {
  border-bottom: 4px solid #1b2e6e;
  animation: wave 2s infinite;
}

/* 12 Neon Glow Effect */
.bg-neon {
  background-color: #1b2e6e;
  box-shadow: 0 0 20px rgb(152 174 255 / 50%), 0 0 30px rgb(106 162 239 / 50%);
}

/* 13 Zigzag Divider with Animation */
.zigzag-divider {
  border: 1px dashed #1b2e6e;
  animation: dash 2s infinite linear;
}
@keyframes dash {
  0% {
    border-spacing: 10px;
  }
  50% {
    border-spacing: 20px;
  }
  100% {
    border-spacing: 10px;
  }
}

/* 14 Parallax Scrolling Background */
.parallax-bg {
  background-image: url("./../images/parallax-01.jpg");
  background-size: cover;
  background-attachment: fixed;
  background-position-x: center;
}
.parallax-bg-2 {
  background-image: url("./../images/parallax-02.jpg");
  background-size: cover;
  background-attachment: fixed;
}
.parallax-bg-3 {
  background-image: url("./../images/parallax-03.jpg");
  background-size: cover;
  background-attachment: fixed;
}

/* 15 Gradient Border with Hover Animation */
.gradient-border {
  border: 2px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(to right, #e2b161, #1b2e6e);
}
.gradient-border:hover {
  background-color: #e2b161;
  color: #1b2e6e;
}

/* 16 bg wave diagonal animation */
.bg-wavy-diagonal {
  border-bottom: 4px solid #1b2e6e;
  /* animation: bg-wave-anim 2s infinite; */
}
@keyframes bg-wave-anim {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(20px);
  }
  100% {
    transform: translateX(0px);
  }
}

.bg-diagonal-animated {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.05) 25%,
    transparent 25%,
    transparent 50%,
    rgba(0, 0, 0, 0.05) 50%,
    rgba(0, 0, 0, 0.05) 75%,
    transparent 75%,
    transparent
  );
  background-size: 50px 50px;
  z-index: 1;
  animation: diagonalMove 4s linear infinite;
}

@keyframes diagonalMove {
  0% {
    background-position: 0 0;
    transform: translateX(0);
  }
  100% {
    background-position: 100px 100px;
    transform: translateX(50px);
  }
}

.section-wrapper-bg-diagonal-animation {
  position: relative;
  z-index: 2;
  background: transparent; /* Ensure the content doesn't overlap with the moving background */
}

/* bullet points */

/* 1 Basic Circle Bullets */
ul.bulleted-point-01 {
  list-style-type: circle;
}
ul.bulleted-point-01 li {
  color: #1b2e6e;
  font-size: 1.1rem;
}

/* 2 Custom Icon Bullets */
ul.bulleted-point-02 {
  list-style: none;
  padding-left: 1.5em;
}
ul.bulleted-point-02 li::before {
  content: "•";
  color: #e2b161;
  font-size: 1.5rem;
  margin-right: 10px;
}

/* 3 Gradient Bullets */
ul.bulleted-point-03 {
  list-style: none;
  padding-left: 1.5em;
}
ul.bulleted-point-03 li::before {
  content: "•";
  font-size: 1.2rem;
  background: linear-gradient(to right, #e2b161, #1b2e6e);
  -webkit-background-clip: text;
  color: transparent;
  margin-right: 10px;
}

/* 4 Square Bullets */
ul.bulleted-point-04 {
  list-style-type: square;
}
ul.bulleted-point-04 li {
  color: #1b2e6e;
  font-size: 1.1rem;
}

/* 5 Icon with Text Bullet Points */
/* <ul>
  <li><img src="path/to/icon1.png" alt="icon" width="16px" /> First bullet point</li>
  <li><img src="path/to/icon2.png" alt="icon" width="16px" /> Second bullet point</li>
</ul> */

/* 6 Dashed Border Bullets */
ul.bulleted-point-06 {
  list-style: none;
  padding-left: 0;
}
ul.bulleted-point-06 li {
  margin-left: 20px;
  padding-left: 20px;
  border-left: 2px dashed #e2b161;
}
ul.bulleted-point-06 li::before {
  content: "•";
  font-size: 1.5rem;
  color: #1b2e6e;
  margin-left: -20px;
}

/* 7 Boxed Bullets */
ul.bulleted-point-07 {
  list-style: none;
  padding-left: 0;
}
ul.bulleted-point-07 li {
  background-color: #e2b161;
  padding: 10px;
  margin-bottom: 10px;
  color: #1b2e6e;
  border-radius: 5px;
}

/* 8 Hover Highlight Bullets */
ul.bulleted-point-08 {
  list-style: none;
  padding-left: 1.5em;
}
ul.bulleted-point-08 li::before {
  content: "•";
  color: #e2b161;
  font-size: 1.2rem;
  margin-right: 10px;
}
ul.bulleted-point-08 li:hover {
  background-color: #1b2e6e;
  color: white;
  border-radius: 5px;
  padding: 5px;
}

/* 9 Numbered Bullets */
ol.bulleted-point-09 {
  list-style-type: decimal;
  color: #1b2e6e;
  font-size: 1.2rem;
}

/* 10 Step Progress Bullets */
ul.bulleted-point-10 {
  list-style: none;
  padding-left: 0;
}
ul.bulleted-point-10 li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 15px;
}
ul.bulleted-point-10 li::before {
  content: counter(step);
  counter-increment: step;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #e2b161;
  color: white;
  text-align: center;
  line-height: 20px;
}

/* 11 Animated Bullet Points */
ul.bulleted-point-11 {
  list-style: none;
  padding-left: 1.5em;
}
ul.bulleted-point-11 li {
  position: relative;
  margin-left: 20px;
  animation: fadeIn 2s;
}
ul.bulleted-point-11 li::before {
  content: "•";
  position: absolute;
  left: -20px;
  top: 0;
  color: #1b2e6e;
  font-size: 1.5rem;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 12 Background Highlight Bullets */
ul.bulleted-point-12 {
  list-style: none;
  padding-left: 0;
}
ul.bulleted-point-12 li {
  background-color: #1b2e6e;
  padding: 10px;
  margin-bottom: 5px;
  color: #e2b161;
  border-radius: 5px;
}

/* 13 Underlined Bullets */
ul.bulleted-point-13 {
  list-style: none;
  padding-left: 1.5em;
}
ul.bulleted-point-13 li::before {
  content: "•";
  color: #1b2e6e;
  font-size: 1.2rem;
  margin-right: 10px;
}
ul.bulleted-point-13 li {
  border-bottom: 1px solid #e2b161;
}

/* 14 Inline Icon and Bullet */
/* <ul>
  <li><i class="fas fa-check-circle" style="color: #e2b161;"></i> First bullet point</li>
  <li><i class="fas fa-check-circle" style="color: #e2b161;"></i> Second bullet point</li>
</ul> */

/* 15 Checkmark Bullets */
.bulleted-point-15 {
  list-style: none;
  padding-left: 40px;
}
.bulleted-point-15 li::before {
  content: "\2713";
  color: #e2b161;
  font-size: 1.5rem;
  margin-right: 10px;
  margin-left: -35px;
}

/* buttons */
/* 1 Hover Slide Effect */
.btn-slide-animation {
  display: inline-block;
  padding: 10px 20px;
  font-size: 1.2rem;
  color: #1b2e6e;
  text-align: center;
  text-decoration: none;
  border: 2px solid #1b2e6e;
  border-radius: 30px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color 0.4s;
}

.btn-slide-animation::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 300%;
  height: 100%;
  background-color: #e2b161;
  transition: left 0.4s;
  z-index: -1;
}

.btn-slide-animation:hover::before {
  left: 0;
}

.btn-slide-animation:hover {
  color: white;
}

/* 2 Pulse Effect */
.btn-pulse-animation {
  display: inline-block;
  padding: 10px 20px;
  font-size: 1.2rem;
  color: #e2b161;
  background-color: #1b2e6e;
  border: none;
  border-radius: 30px;
  text-align: center;
  text-decoration: none;
  position: relative;
  transition: transform 0.3s, box-shadow 0.3s;
}

.btn-pulse-animation:hover {
  transform: scale(1.1);
  box-shadow: 0 0 10px #e2b161, 0 0 20px rgba(226, 177, 97, 0.6);
}