@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Manrope:700|Manrope:400');
@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap');




body {
    background: #000000 !important;
    line-height: 1.5;
    color: #ffffff;
    overflow-x: hidden !important;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


.our-cybersecurity-services-section {

    display: flex;
    flex-wrap: wrap;
    margin-bottom: 40px;
    margin-left: 0%;
    gap: 50px;
    justify-content: space-evenly;
    margin-top: 50px;

}



.our-cybersecurity-services-section .card {
    --lime-500: #7f51ffc7;
    --violet-700: #fff;

    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.75rem;

    padding: 1rem;
    width: 22rem;
    height: auto;
    min-height: 18rem;
    background-color: var(--lime-500);

    border-radius: 0.5rem;
}

.our-cybersecurity-services-section .card::before {
    content: "";
    position: absolute;
    top: 7rem;
    right: 2rem;

    width: 1.25rem;
    aspect-ratio: 1 / 1;
    background-color: var(--violet-700);

    border-radius: 9999px;
}

.our-cybersecurity-services-section .card::after {
    content: "";
    position: absolute;
    top: 8.75rem;
    right: -0.5rem;

    width: 3rem;
    aspect-ratio: 1 / 1;
    background-color: var(--violet-700);

    border-radius: 9999px;
}

.our-cybersecurity-services-section .card .carousel {
    position: absolute;
    left: 0;

    animation: carousel 10s linear var(--carousel_direction, normal) infinite;
}

.our-cybersecurity-services-section .card .carousel[data-direction="right"] {
    --carousel_direction: reverse;
}

.our-cybersecurity-services-section .card .carousel[data-position="top"] {
    top: 0.75rem;
}

.our-cybersecurity-services-section .card .carousel[data-position="bottom"] {
    bottom: 0.75rem;
}

.our-cybersecurity-services-section .card .carousel .carousel__text {
    font-size: 0.65rem;
    color: rgb(255, 255, 255);
    text-wrap: nowrap;
    font-family: "Nunito";
}

@keyframes carousel {
    to {
        transform: translate(-50%);
    }
}


.our-cybersecurity-services-section .card .title {
    position: relative;
    z-index: 10;

    font-size: 1.2rem;
    color: white;
    font-weight: bold;

}

.our-cybersecurity-services-section .card .paragraph {
    position: relative;
    z-index: 10;
    padding-right: 0.25rem;
    font-size: 0.95rem;
    color: white;
    line-height: 1.8;
    width: 17rem;
    font-family: "Nunito";
}


.our-cybersecurity-services-section .card-2 {
    --lime-500:  #0099ffc7;
    --violet-700: #fff;

    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.75rem;

    padding: 1rem;
    width: 22rem;
    height: auto;
    min-height: 18rem;
    background-color: var(--lime-500);

    border-radius: 0.5rem;
}

.our-cybersecurity-services-section .card-2::before {
    content: "";
    position: absolute;
    top: 7rem;
    right: 2rem;

    width: 1.25rem;
    aspect-ratio: 1 / 1;
    background-color: var(--violet-700);

    border-radius: 9999px;
}

.our-cybersecurity-services-section .card-2::after {
    content: "";
    position: absolute;
    top: 8.75rem;
    right: -0.5rem;

    width: 3rem;
    aspect-ratio: 1 / 1;
    background-color: var(--violet-700);

    border-radius: 9999px;
}

.our-cybersecurity-services-section .card-2 .carousel {
    position: absolute;
    left: 0;

    animation: carousel 10s linear var(--carousel_direction, normal) infinite;
}

.our-cybersecurity-services-section .card-2 .carousel[data-direction="right"] {
    --carousel_direction: reverse;
}

.our-cybersecurity-services-section .card-2 .carousel[data-position="top"] {
    top: 0.75rem;
}

.our-cybersecurity-services-section .card-2 .carousel[data-position="bottom"] {
    bottom: 0.75rem;
}

.our-cybersecurity-services-section .card-2 .carousel .carousel__text {
    font-size: 0.65rem;
    color: rgb(255, 255, 255);
    text-wrap: nowrap;
}


.our-cybersecurity-services-section .card-2 .title {
    position: relative;
    z-index: 10;
    font-size: 1.2rem;
    color: white;
    font-weight: bold;

}

.our-cybersecurity-services-section .card-2 .paragraph {
    position: relative;
    z-index: 10;
    padding-right: 0.25rem;
    font-size: 0.95rem;
    color: white;
    line-height: 1.8;
    width: 17rem;
    font-family: "Nunito";

}





.cybersecurity-image-container {
    width: 100vw;
    /* Full width of viewport */
    height: auto;
    /* Let height adapt */
    overflow: hidden;
    /* Just in case */
    margin-bottom: 40px;
    margin-top: 40px;
}



.cybersecurity-image-container img {
    width: 100%;
    height: auto;
    /* Keeps aspect ratio */
    display: block;
    /* Remove unwanted gaps */
}




/* From Uiverse.io by iconicchandu */
.advanced-cybersecurity-services-section {

    display: flex;
    flex-wrap: wrap;
    margin-bottom: 40px;
    margin-left: 0%;
    gap: 50px;
    justify-content: space-evenly;
    margin-top: 50px;

}

.advanced-cybersecurity-services-section .card {

    height: 320px;
    --white: hsl(0, 0%, 100%);
    --black: hsla(266, 60%, 51%, 0.63);
    --paragraph: hsl(0, 0%, 83%);
    --line: hsl(0, 0%, 100%);
    --primary: ##7f51ffc7;
    /* Updated primary color */

    position: relative;
    padding: 1rem;
    width: 19rem;
    background-color: rgb(120, 9, 224);
    background-image: radial-gradient(at 88% 40%,
            rgb(182, 107, 226) 0px,
            transparent 85%),
        radial-gradient(at 49% 30%, rgba(131, 11, 179, 0.582) 0px, transparent 85%),
        radial-gradient(at 14% 26%, rgb(55, 0, 100) 0px, transparent 85%),
        radial-gradient(at 0% 64%, #340472c0 0px, transparent 85%),
        /* Updated gradient color */
        radial-gradient(at 41% 94%, #7908d6a9 0px, transparent 85%),
        /* Updated gradient color */
        radial-gradient(at 100% 99%, #21012e 0px, transparent 85%);
    /* Updated gradient color */

    border-radius: 1rem;
    box-shadow: 0px -16px 24px 0px rgba(255, 255, 255, 0.322) inset;
    border: 1px solid white;
    margin-bottom: 40px;
}

.advanced-cybersecurity-services-section .card-description {
    color: white;
    font-size: 0.95rem;
    font-family: "Nunito";
    line-height: 1.8;
    margin-bottom: 30px;

}




.advanced-cybersecurity-services-section .card .card_title__container .card_title {
    font-size: 1.2rem;
    color: var(--white);
}



.advanced-cybersecurity-services-section .card .line {
    width: 100%;
    height: 0.1rem;
    background-color: var(--line);

    border: none;
}


.advanced-cybersecurity-services-section .card .button {
    cursor: pointer;

    width: 120px;
    padding: 0.5rem;
    background-image: linear-gradient(0deg,
            #7f51ffc7,
            /* Updated gradient color */
            #3f08d4c7 100%
            /* Updated gradient color */
        );

    font-size: 0.75rem;
    color: var(--white);
    font-family: "Nunito";
    border: 0;
    border-radius: 8px;
    box-shadow: inset 0 -2px 25px -4px var(--white);
    letter-spacing: 1px;
}



.advanced-cybersecurity-services-section .card-2 {
    --white: hsl(0, 0%, 100%);
    --black: hsl(240, 88%, 38%);
    --paragraph: hsl(0, 0%, 83%);
    --line: hsl(0, 0%, 100%);
    --primary: hsl(209, 100%, 50%);

    position: relative;

    display: flex;
    flex-direction: column;
    padding: 1rem;
    width: 19rem;
    height: 320px;
    background-color: rgb(38, 0, 255);
    background-image: radial-gradient(at 88% 40%,
            rgb(0, 193, 252) 0px,
            transparent 85%),
        radial-gradient(at 49% 30%, rgb(0, 119, 255) 0px, transparent 85%),
        radial-gradient(at 14% 26%, rgb(5, 41, 248) 0px, transparent 85%),
        radial-gradient(at 0% 64%, hsl(236, 100%, 23%) 0px, transparent 85%),
        radial-gradient(at 41% 94%, hsl(189, 97%, 36%) 0px, transparent 85%),
        radial-gradient(at 100% 99%, hsl(188, 94%, 13%) 0px, transparent 85%);

    border-radius: 1rem;
    box-shadow: 0px -16px 24px 0px rgba(1, 255, 255, 0.548) inset;

}





.advanced-cybersecurity-services-section .card-2 .card__border {
    overflow: hidden;
    pointer-events: none;

    position: absolute;
    z-index: -10;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: calc(100% + 2px);
    height: calc(100% + 2px);
    background-image: linear-gradient(0deg,
            hsl(0, 0%, 100%) -50%,
            hsl(0, 0%, 40%) 100%);

    border-radius: 1rem;
    margin-bottom: 40px;
}

.advanced-cybersecurity-services-section .card-2 .card__border::before {
    content: "";
    pointer-events: none;

    position: fixed;
    z-index: 200;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%), rotate(0deg);
    transform-origin: left;

    width: 200%;
    height: 10rem;
    background-image: linear-gradient(0deg,
            hsla(0, 0%, 100%, 0) 0%,
            hsl(189, 100%, 50%) 40%,
            hsl(189, 100%, 50%) 60%,
            hsla(0, 0%, 40%, 0) 100%);

    animation: rotate 8s linear infinite;
}

@keyframes rotate {
    to {
        transform: rotate(360deg);
    }
}

.advanced-cybersecurity-services-section .card-2 .card_title__container .card_title {
    font-size: 1.2rem;
    color: var(--white);
}



.advanced-cybersecurity-services-section .card-2 .line {
    width: 100%;
    height: 0.1rem;
    background-color: var(--line);

    border: none;
}



.advanced-cybersecurity-services-section .card-2 .button {
    cursor: pointer;
    width: 120px;
    padding: 0.5rem;

    background-image: linear-gradient(0deg,
            hsl(189, 92%, 58%),
            hsl(189, 99%, 26%) 100%);

    font-size: 0.75rem;
    color: var(--white);
    font-family: "Nunito";
    border: 0;
    border-radius: 8px;
    box-shadow: inset 0 -2px 25px -4px var(--white);
    letter-spacing: 1px;
}