/* =========================
   SECTION
========================= */

.finance-benefits {
  width: 100%;
  padding: 80px 20px;
  background:
    radial-gradient(
      circle at 10% 20%,
      rgba(37, 99, 235, 0.07),
      transparent 30%
    ),
    radial-gradient(
      circle at 90% 80%,
      rgba(124, 58, 237, 0.06),
      transparent 30%
    ),
    #f8fafc;
  overflow: hidden;
}

.finance-container {
  width: min(1180px, 100%);
  margin: 0 auto;
}


/* =========================
   HEADING
========================= */

.finance-heading {
  max-width: 680px;
  margin: 0 auto 48px;
  text-align: center;
}

.finance-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 7px 14px;
  margin-bottom: 16px;

  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.75);

  color: #2563eb;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.4px;
}

.finance-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2563eb;
  box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.08);
}

.finance-heading h2 {
  margin: 0;

  color: #0b1435;

  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -1.5px;
}

.finance-heading h2 span {
  background: linear-gradient(
    90deg,
    #2563eb,
    #7c3aed
  );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.finance-heading p {
  max-width: 610px;
  margin: 18px auto 0;

  color: #64748b;

  font-size: 16px;
  line-height: 1.7;
}


/* =========================
   GRID
========================= */

.finance-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}


/* =========================
   CARD
========================= */

.finance-card {
  position: relative;
  min-height: 255px;

  padding: 26px 24px;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.96),
      rgba(255, 255, 255, 0.72)
    );

  box-shadow:
    0 10px 25px rgba(15, 23, 42, 0.05),
    0 2px 6px rgba(15, 23, 42, 0.03);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}


/* Background glow */

.finance-card::before {
  content: "";

  position: absolute;

  width: 150px;
  height: 150px;

  top: -70px;
  right: -70px;

  border-radius: 50%;

  background: var(--accent-light);

  filter: blur(4px);

  transition:
    transform 0.4s ease,
    opacity 0.4s ease;
}

.finance-card::after {
  content: "";

  position: absolute;

  left: 24px;
  right: 24px;
  bottom: 0;

  height: 2px;

  border-radius: 20px;

  background: linear-gradient(
    90deg,
    transparent,
    var(--accent),
    transparent
  );

  opacity: 0;

  transition: opacity 0.3s ease;
}


/* Hover */

.finance-card:hover {
  transform: translateY(-8px);

  border-color: rgba(255, 255, 255, 1);

  box-shadow:
    0 22px 45px rgba(15, 23, 42, 0.09),
    0 8px 18px var(--accent-shadow);
}

.finance-card:hover::before {
  transform: scale(1.35);
}

.finance-card:hover::after {
  opacity: 1;
}


/* =========================
   ICON
========================= */

.finance-icon {
  position: relative;
  z-index: 2;

  width: 52px;
  height: 52px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 25px;

  border-radius: 16px;

  background: var(--accent-light);

  color: var(--accent);

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.8),
    0 8px 18px var(--accent-shadow);

  transition:
    transform 0.3s ease,
    border-radius 0.3s ease;
}

.finance-card:hover .finance-icon {
  transform: rotate(-4deg) scale(1.08);
  border-radius: 18px;
}

.finance-icon svg {
  width: 25px;
  height: 25px;
  stroke: currentColor;
}


/* =========================
   CARD CONTENT
========================= */

.finance-card-content {
  position: relative;
  z-index: 2;
}

.finance-card h3 {
  margin: 0 0 9px;

  color: #0b1435;

  font-size: 19px;
  line-height: 1.3;
  font-weight: 750;
}

.finance-card p {
  margin: 0;

  color: #64748b;

  font-size: 14px;
  line-height: 1.65;
}


/* =========================
   BOTTOM META
========================= */

.finance-meta {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  gap: 7px;

  margin-top: 20px;

  color: var(--accent);

  font-size: 12px;
  font-weight: 700;
}

.finance-meta-dot {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: currentColor;
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1000px) {

  .finance-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .finance-card {
    min-height: 230px;
  }
}


@media (max-width: 640px) {

  .finance-benefits {
    padding: 60px 16px;
  }

  .finance-heading {
    margin-bottom: 32px;
  }

  .finance-heading h2 {
    font-size: 31px;
    letter-spacing: -1px;
  }

  .finance-heading p {
    font-size: 14px;
  }

  .finance-grid {
    display: flex;

    overflow-x: auto;

    gap: 14px;

    margin-right: -16px;
    padding-right: 16px;
    padding-bottom: 12px;

    scroll-snap-type: x mandatory;

    scrollbar-width: none;
  }

  .finance-grid::-webkit-scrollbar {
    display: none;
  }

  .finance-card {
    flex: 0 0 285px;

    min-height: 235px;

    scroll-snap-align: start;

    padding: 22px;
  }
}


/* =========================
   REDUCED MOTION
========================= */

@media (prefers-reduced-motion: reduce) {

  .finance-card,
  .finance-icon,
  .finance-card::before,
  .finance-card::after {
    transition: none;
  }
}

 /* =========================================
           RESET
        ========================================= */

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

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: Arial, Helvetica, sans-serif;
            background: #f5f8fc;
        }

        .container {
            width: min(1200px, 90%);
            margin: 0 auto;
        }

        .list-unstyled {
            list-style: none;
        }


        /* =========================================
           PAGE HEADER
        ========================================= */

        .page-header {
            position: relative;
            min-height: 450px;

            display: flex;
            align-items: center;

            overflow: hidden;
            isolation: isolate;

            background:
                linear-gradient(
                    135deg,
                    #061a42 0%,
                    #073b80 45%,
                    #07868b 100%
                );
        }


        /* =========================================
           BACKGROUND IMAGE
        ========================================= */

        .page-header__bg {
            position: absolute;
            inset: 0;

            z-index: -5;

            background-image:
                url("assets/images/backgrounds/page-header-bg.png");

            background-size: cover;
            background-position: center;

            opacity: 0.20;
        }


        /* =========================================
           DARK OVERLAY
        ========================================= */

        .page-header::before {
            content: "";

            position: absolute;
            inset: 0;

            z-index: -4;

            background:
                radial-gradient(
                    circle at 85% 25%,
                    rgba(255,255,255,0.18),
                    transparent 25%
                ),

                linear-gradient(
                    90deg,
                    rgba(2,20,53,0.95),
                    rgba(5,55,110,0.78),
                    rgba(0,128,139,0.55)
                );
        }


        /* =========================================
           GLOW EFFECT
        ========================================= */

        .page-header::after {
            content: "";

            position: absolute;

            width: 450px;
            height: 450px;

            right: 12%;
            top: 50%;

            transform: translateY(-50%);

            border-radius: 50%;

            background: rgba(88, 238, 227, 0.12);

            filter: blur(80px);

            z-index: -3;

            pointer-events: none;
        }


        /* =========================================
           CONTENT
        ========================================= */

        .page-header__content {
            position: relative;

            z-index: 10;

            max-width: 650px;

            padding: 90px 0;
        }


        /* Decorative line */

        .page-header__content::before {
            content: "";

            display: block;

            width: 70px;
            height: 4px;

            margin-bottom: 22px;

            border-radius: 50px;

            background: #72eee4;

            box-shadow:
                0 0 10px rgba(114,238,228,0.5),
                0 0 25px rgba(114,238,228,0.3);
        }


        /* =========================================
           TITLE
        ========================================= */

        .page-header__title {
            color: #ffffff;

            font-size: clamp(42px, 5vw, 68px);

            line-height: 1.08;

            font-weight: 800;

            letter-spacing: -2px;

            margin-bottom: 25px;

            text-transform: capitalize;

            text-shadow:
                0 10px 25px rgba(0,0,0,0.25);
        }


        /* =========================================
           BREADCRUMB
        ========================================= */

        .insuba-breadcrumb {
            display: flex;

            align-items: center;

            flex-wrap: wrap;

            gap: 10px;
        }


        .insuba-breadcrumb li {
            display: flex;

            align-items: center;

            color: #ffffff;

            font-size: 15px;

            font-weight: 600;

            text-transform: capitalize;
        }


        .insuba-breadcrumb li + li::before {
            content: "/";

            color: rgba(255,255,255,0.5);

            margin-right: 10px;
        }


        .insuba-breadcrumb a {
            color: #ffffff;

            text-decoration: none;

            transition: 0.3s ease;
        }


        .insuba-breadcrumb a:hover {
            color: #72eee4;
        }


        .insuba-breadcrumb span {
            color: #72eee4;
        }


        /* =========================================
           HEADER IMAGE
        ========================================= */

        .page-header__image {
            position: absolute;

            right: 7%;
            bottom: 0;

            width: min(430px, 38vw);

            max-height: 410px;

            object-fit: contain;

            object-position: bottom;

            z-index: 3;

            filter:
                drop-shadow(
                    0 25px 35px rgba(0,0,0,0.25)
                );

            animation:
                headerImageFloat 5s ease-in-out infinite;
        }


        /* =========================================
           SHAPE ONE
        ========================================= */

        .page-header__shape-one {
            position: absolute;

            right: -20px;
            bottom: -40px;

            width: 430px;

            max-width: 40vw;

            z-index: 1;

            opacity: 0.35;

            pointer-events: none;
        }


        /* =========================================
           SHAPE TWO
        ========================================= */

        .page-header__shape-two {
            position: absolute;

            width: 200px;
            height: 200px;

            right: 40%;
            top: -100px;

            border-radius: 50%;

            border:
                2px solid rgba(255,255,255,0.12);

            box-shadow:
                inset 0 0 40px rgba(255,255,255,0.03);

            z-index: -1;

            animation:
                circleMove 8s ease-in-out infinite;
        }


        /* =========================================
           SHAPE THREE
        ========================================= */

        .page-header__shape-three {
            position: absolute;

            width: 100px;
            height: 100px;

            left: 7%;
            bottom: -35px;

            border-radius: 50%;

            background:
                rgba(114,238,228,0.10);

            border:
                1px solid rgba(114,238,228,0.25);

            backdrop-filter: blur(5px);

            z-index: 1;

            animation:
                shapeFloat 6s ease-in-out infinite;
        }


        /* =========================================
           SHAPE FOUR
        ========================================= */

        .page-header__shape-four {
            position: absolute;

            width: 60px;
            height: 60px;

            left: 43%;
            top: 75px;

            border:
                2px solid rgba(114,238,228,0.35);

            transform: rotate(45deg);

            border-radius: 8px;

            z-index: 1;

            animation:
                rotateShape 12s linear infinite;
        }


        /* =========================================
           EXTRA DECORATIVE DOTS
        ========================================= */

        .page-header__content::after {
            content: "";

            position: absolute;

            width: 8px;
            height: 8px;

            left: 120px;
            top: 55px;

            border-radius: 50%;

            background: #72eee4;

            box-shadow:
                25px 15px 0 rgba(255,255,255,0.4),
                -20px 35px 0 rgba(114,238,228,0.25);

            animation:
                dotsFloat 4s ease-in-out infinite;
        }


        /* =========================================
           ANIMATIONS
        ========================================= */

        @keyframes headerImageFloat {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-14px);
            }
        }


        @keyframes shapeFloat {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-20px);
            }
        }


        @keyframes circleMove {

            0%,
            100% {
                transform: translate(0,0);
            }

            50% {
                transform: translate(-25px,20px);
            }
        }


        @keyframes rotateShape {

            from {
                transform: rotate(45deg);
            }

            to {
                transform: rotate(405deg);
            }
        }


        @keyframes dotsFloat {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-10px);
            }
        }


        /* =========================================
           TABLET
        ========================================= */

        @media (max-width: 991px) {

            .page-header {
                min-height: 400px;
            }

            .page-header__content {
                padding: 80px 0;
            }

            .page-header__image {
                right: 0;

                width: 350px;

                opacity: 0.65;
            }

            .page-header__shape-one {
                width: 330px;
            }

            .page-header__shape-four {
                left: 50%;
            }
        }


        /* =========================================
           MOBILE
        ========================================= */

        @media (max-width: 767px) {

            .page-header {
                min-height: 360px;

                text-align: center;
            }


            .page-header__content {
                width: 100%;

                padding: 70px 0;

                margin: auto;
            }


            .page-header__content::before {
                margin-left: auto;
                margin-right: auto;
            }


            .page-header__title {
                font-size: 42px;

                letter-spacing: -1px;

                margin-bottom: 20px;
            }


            .insuba-breadcrumb {
                justify-content: center;
            }


            .page-header__image {
                width: 290px;

                right: -70px;

                opacity: 0.18;
            }


            .page-header__shape-one {
                width: 280px;

                right: -70px;

                opacity: 0.15;
            }


            .page-header__shape-two {
                width: 130px;
                height: 130px;

                right: -40px;

                top: -60px;
            }


            .page-header__shape-three {
                width: 70px;
                height: 70px;

                left: 5%;

                bottom: -25px;
            }


            .page-header__shape-four {
                width: 38px;
                height: 38px;

                left: 10%;

                top: 50px;
            }


            .page-header::after {
                width: 300px;
                height: 300px;

                right: -100px;
            }
        }


        /* =========================================
           SMALL MOBILE
        ========================================= */

        @media (max-width: 480px) {

            .container {
                width: 92%;
            }


            .page-header {
                min-height: 320px;
            }


            .page-header__content {
                padding: 60px 10px;
            }


            .page-header__title {
                font-size: 34px;

                line-height: 1.15;
            }


            .insuba-breadcrumb li {
                font-size: 13px;
            }


            .page-header__image {
                width: 230px;

                right: -70px;
            }


            .page-header__shape-one {
                width: 220px;
            }
        }