/* Avatars */

.bannerheading {
    line-height: normal;
}

.avatar {
    height: 55px;
    width: 55px;
    border-radius: 9999px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

@media (max-width: 1024px) {
    .avatar {
        height: 48px;
        width: 48px;
    }
}


.img1 {
    background-image: url(/Assets/Images/home-page/0bccbeba940d522b639ab486393bd0b720dd7807.webp);
}

.img2 {
    background-image: url(/Assets/Images/home-page/c7e49a8138835ab539994ca3f6d1967e0ac5d9c9.webp);
}

.img3 {
    background-image: url(/Assets/Images/home-page/c38c152ffd883c04b70de2676d882757f3b0b516.webp);
}

.img4 {
    background-image: url(/Assets/Images/home-page/cb695af2da79cba0af4a94e1dd6a2b5a93668043.webp);
}

.img5 {
    background-image: url(/Assets/Images/home-page/59cd80cb3c65faee9c440b18b99d06c5ff89a559.webp);
}

/* Rotation Circle */
.rotation-circle {
    width: 900px;
    height: 900px;
    border-radius: 50%;
    border: 2px dashed rgb(12, 34, 231);
    position: relative;
    margin-right: -500px;
    margin-top: 520px;
    animation: rotatePause 20s linear infinite;
}

/* Cards */
.card {
    position: absolute;
    width: 430px;
    height: 300px;
    border-radius: 10px;
}

.hidden-card {
    background: linear-gradient(135deg,
            rgba(43, 127, 255, 0.2),
            rgba(173, 70, 255, 0.2));
    transform: rotate(3deg);
}

.image-card {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Positions */
.child-a {
    top: 8%;
    left: -18%;
}

.child-b {
    top: 77%;
    left: 6%;
    transform: rotate(-100deg);
}

.child-c {
    top: 61%;
    left: 70%;
    transform: rotate(-180deg);
}

.child-d {
    top: -11%;
    left: 52%;
    transform: rotate(90deg);
}

/* Images */
.imgchild1 {
    background-image: url(/Assets/Images/home-page/9fa1e21a6bdd7c9caa1c501a4258a9133ef189db.webp);
}

.imgchild2 {
    background-image: url(/Assets/Images/home-page/lifeinsurance.webp);
}

.imgchild3 {
    background-image: url(/Assets/Images/home-page/3f28bcaf75fa2e1aca664757b45c887b88c1e24e.webp)
}

.imgchild4 {
    background-image: url(/Assets/Images/home-page/25884a0090f44b13d3f6a51ea44d79b6bb53d80b.webp);
}

/* Animation */
@keyframes rotatePause {
    0% {
        transform: rotate(0deg);
    }

    18% {
        transform: rotate(-90deg);
    }

    23% {
        transform: rotate(-90deg);
    }

    43% {
        transform: rotate(-180deg);
    }

    48% {
        transform: rotate(-180deg);
    }

    68% {
        transform: rotate(-260deg);
    }

    73% {
        transform: rotate(-260deg);
    }

    93% {
        transform: rotate(-360deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}




/* Mobile */
@media (max-width: 767px) {
    .avatar {
        height: 48px;
        width: 48px;
    }
}

/* =========================
   TABLET (<=1023px)
========================= */
@media(max-width:1080px) {

    .rotation-circle {
        width: 900px;
        height: 900px;
        margin-right: -650px;
        margin-top: 500px;
    }

    .card,
    .hidden-card {
        width: 352px;
        height: 250px;
    }

    .child-b {
        top: 90%;
        left: 12%;
    }

    .child-c {
        top: 60%;
        left: 80%;
    }

    @media (max-width: 1023px) {
        .rotation-circle {
            width: 900px;
            height: 900px;
            margin-right: -850px;
            margin-top: 150px;
        }

        .card,
        .hidden-card {
            width: 552px;
            height: 330px;
        }

        .child-a {
            top: -16%;
            left: -25%;
        }

        .child-b {
            top: 84%;
            left: -20%;
        }

        .child-c {
            top: 75%;
            left: 63%;
        }

        .child-d {
            top: -11%;
            left: 65%;
        }




        /* =========================
   MOBILE (<=767px)
========================= */
        /* @media (max-width: 767px) {
  .rotation-circle {
    width: 420px;
    height: 420px;
    margin-right: -220px;
    margin-top: 180px;
    border-width: 1px;
  }

  .card,
  .hidden-card {
    width: 200px;
    height: 140px;
    border-radius: 8px;
  }

  /* Reposition children for smaller circle */
        /* .child-a {
    top: 8%;
    left: -22%;
  }

  .child-b {
    top: 79%;
    left: 2%;
  }

  .child-c {
    top: 63%;
    left: 70%;
  }

  .child-d {
    top: -8%;
    left: 61%;
  }
}  */

        /* =========================
   VERY SMALL MOBILE (<=480px)
========================= */
        @media (max-width: 620px) {
            .rotation-circle {
                width: 600px;
                height: 600px;
                margin-right: -480px;
                margin-top: 60px;
            }

            .card,
            .hidden-card {
                width: 350px;
                height: 200px;
            }

            .child-a {
                top: -4%;
                left: -18%;
            }

            .child-b {
                top: 78%;
                left: -9%;
            }

            .child-c {
                top: 69%;
                left: 58%;
            }

            .child-d {
                top: -5%;
                left: 60%;
            }



            @media (max-width:320px) {

                .card,
                .hidden-card {
                    width: 270px;
                    height: 180px;
                }

                .child-a {
                    top: 4%;
                    left: -11%;
                }

                .child-b {
                    top: 80%;
                    left: 2%;
                }

                .child-c {
                    top: 67%;
                    left: 67%;
                }


            }
        }
    }
}