/* Reset styles */
* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

/* Styles for the hero section buttons */
.hero-sec-buttons {
    position: relative;
    overflow: hidden;
}

/* Animation for the first line */
.hero-sec-buttons span:nth-child(1) {
    position: absolute;
    width: 100%;
    height: 3px;
    top: 0%;
    background: linear-gradient(to right, white, darkcyan);
    animation: effect1 3s linear infinite;
}

/* Animation keyframes for the first line */
@keyframes effect1 {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* Animation for the second line */
.hero-sec-buttons span:nth-child(2) {
    position: absolute;
    height: 100%;
    width: 3px;
    right: 0%;
    background: linear-gradient(to bottom, white, darkcyan);
    animation: effect2 3s linear infinite;
}

/* Animation keyframes for the second line */
@keyframes effect2 {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(100%);
    }
}

/* Animation for the third line */
.hero-sec-buttons span:nth-child(3) {
    position: absolute;
    width: 100%;
    height: 3px;
    bottom: 0%;
    background: linear-gradient(to left, white, darkcyan);
    animation: effect3 3s linear infinite;
}

/* Animation keyframes for the third line */
@keyframes effect3 {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Animation for the fourth line */
.hero-sec-buttons span:nth-child(4) {
    position: absolute;
    height: 100%;
    width: 3px;
    left: 0px;
    background: linear-gradient(to top, white, darkcyan);
    animation: effect4 3s linear infinite;
}

/* Animation keyframes for the fourth line */
@keyframes effect4 {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(-100%);
    }
}