.footer-bg-section::before {
    content: "";
    position: absolute;
    bottom: 0px;
    right: 230px;
    width: 240px;
    background-repeat: no-repeat;
    height: 249px;
    background-image: url(../images/subtract.png);
    background-size: contain;
    /* background-position: center; */
    opacity: 3.1;
    z-index: 3;
}

.wave-bg {
    /* background: linear-gradient(135deg, #0b3ea8, #0a2f7a); */
    position: relative;
    background-image: url("../images/contact-bg.png");
    background-size: cover;
}

/* .wave-bg::before {
      content: "";
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
        120deg,
        rgba(255,255,255,0.08) 0px,
        rgba(255,255,255,0.08) 10px,
        transparent 10px,
        transparent 40px
      );
      opacity: 0.4;
    } */

@layer components {
    .btn-arrow {
        @apply inline-flex items-center gap-2 bg-[#0057FF] text-white px-6 py-3 rounded-full text-sm transition-all duration-300 ease-out hover:bg-[#0046d1];
    }

    .btn-arrow .arrow {
        @apply inline-block transition-transform duration-300 ease-out;
    }

    .btn-arrow:hover .arrow {
        transform: translate(2px, -2px);
    }
}
.img-card {
    position: relative;
    display: inline-block;
    overflow: hidden;
    border-radius: 20px;
    cursor: pointer;
}

.img-card img {
    width: 100%;
    display: block;
    transition: transform 0.4s ease;
}

.img-arrow {
    position: absolute;
    bottom: 16px;
    left: 16px;
    width: 40px;
    height: 40px;
    background: #3b82f6; /* Initial color */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.4s ease; /* Smooth color change */
}

/* ARROW ICON */
.arrow-icon {
    display: inline-block;
    font-size: 18px;
    transition:
        transform 0.4s ease,
        color 0.4s ease;
    color: #fff;
     transform: rotate(45deg); 
}

/* 1. Image Zoom on Hover */
.img-card:hover img {
    transform: scale(1.05);
}

/* 2. Circle background changes to Blue */
.img-card:hover .img-arrow {
    background-color: #fff; 
}

/* 3. Arrow Icon moves to the right and turns White */
.img-card:hover .arrow-icon {
    transform: rotate(0deg); 
    color: #3b82f6;
}

.nav-active {
    color: #0057ff !important;
    font-weight: 600;
    position: relative;
}
.bg-number {
    letter-spacing: -0.05em;
}