.contactUsButton {
    position: relative;
    background: #39384e;
    color: #fff;
    width: 200px;
    padding: 10px 20px;
    font-size: 24px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: space-around;
    cursor: pointer;
    border: none;
}

.learMoretUsButton {
    width: 224px !important;
    padding: 15px 20px !important;
    font-size: 22px !important;
}

/* Gradient Border using ::before */
.contactUsButton::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 4px;
    /* border thickness */
    border-radius: 2px;
    background: linear-gradient(270deg, #fdc922, #ffffff, #fdc922);
    background-size: 300% 300%;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
    animation: borderGradient 4s linear infinite;
}

/* Yellow Shadow using ::after */
.contactUsButton::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0px;
    bottom: 0px;
    background: transparent;
    box-shadow: -10px 10px 0px 0px #fdc922;
    z-index: -2;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Icon */
.contactUsButton i {
    font-size: 30px;
    transition: transform 0.3s ease;
}

/* Hover Effects */
.contactUsButton:hover {
    background: #2d2c40;
    transform: translateY(-4px);
    color: #fdc922;
}

/* Arrow animation */
.contactUsButton:hover i {
    transform: translateX(6px);
}

/* Pulse Glow Effect on Hover */
.contactUsButton:hover::after {
    animation: pulseGlow 1.5s infinite ease-in-out;
}

/* Border Gradient Animation */
@keyframes borderGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Pulse Glow Keyframes */
@keyframes pulseGlow {
    0% {
        box-shadow: -10px 10px 0px 0px #fdc922;
    }

    50% {
        box-shadow: -12px 12px 20px 4px rgba(253, 201, 34, 0.7);
    }

    100% {
        box-shadow: -10px 10px 0px 0px #fdc922;
    }
}

/* Top slide button */

.topSliderButton {
    position: relative;
    background: #FECA1F;
    color: #fff;
    width: 224px;
    padding: 15px 20px;
    font-size: 22px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: space-around;
    cursor: pointer;
    border: none;
}

.topSliderButton::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 4px;
    border-radius: 2px;
    background: linear-gradient(270deg, #39384E, #ffffff, #39384E);
    background-size: 300% 300%;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
    animation: borderGradient_1 4s linear infinite;
}

.topSliderButton::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0px;
    bottom: 0px;
    background: transparent;
    box-shadow: -10px 10px 0px 0px #39384E;
    z-index: -2;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.topSliderButton i {
    font-size: 30px;
    transition: transform 0.3s ease;
}

/* Hover Effects */
.topSliderButton:hover {
    background: #2d2c40;
    transform: translateY(-4px);
    color: #FECA1F;
}

.topSliderButton:hover i {
    transform: translateX(6px);
}

.topSliderButton:hover::after {
    animation: pulseGlow_1 1.5s infinite ease-in-out;
}

@keyframes borderGradient_1 {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes pulseGlow_1 {
    0% {
        box-shadow: -10px 10px 0px 0px #39384E;
    }

    50% {
        box-shadow: -12px 12px 20px 4px rgba(45, 44, 64, 0.837);
    }

    100% {
        box-shadow: -10px 10px 0px 0px #39384E;
    }
}


/* services button */

.servicesLearnButton {
    position: relative;
    background: #01A3DF;
    color: #fff;
    width: 160px;
    padding: 10px;
    font-size: 16px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: space-around;
    cursor: pointer;
    border: none;
}

.servicesLearnButton::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 4px;
    border-radius: 2px;
    background: linear-gradient(180deg, #01A3DF 30%, #FFFFFF 49.52%);
    background-size: 300% 300%;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
    animation: borderGradient_2 4s linear infinite;
}

.servicesLearnButton::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0px;
    bottom: 0px;
    background: transparent;
    box-shadow: -7px 7px 0px 0px #01A3DF;
    z-index: -2;
    transition: all 0.3s ease;
}

.servicesLearnButton i {
    font-size: 20px;
    transition: transform 0.3s ease;
}

.servicesLearnButton:hover {
    background: #2d2c40;
    transform: translateY(-4px);
    color: #01a3df;
}

.servicesLearnButton:hover i {
    transform: translateX(6px);
}

.servicesLearnButton:hover::after {
    animation: pulseGlow_2 1.5s infinite ease-in-out;
}

@keyframes borderGradient_2 {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes pulseGlow_2 {
    0% {
        box-shadow: -10px 10px 0px 0px #01A3DF;
    }

    50% {
        box-shadow: -12px 12px 20px 4px rgba(1, 164, 223, 0.825);
    }

    100% {
        box-shadow: -10px 10px 0px 0px #01A3DF;
    }
}

/* career */

.font-17 {
    font-size: 17px;
}

.aboutUSlearMoretUsButton {
    width: 160px;
    font-size: 16px;
    left: 15px;
    padding: 10px 15px;
}

.aboutUSlearMoretUsButton i{
    font-size: 20px;
}