/* ============================= */
/* Cyber Card Hover Effect       */
/* ============================= */
.cybercard:hover {
    transform: scale(1.03);
    transition: transform 0.3s ease;
}

/* ============================= */
/* Solutions Cards Container     */
/* ============================= */
ol {
    width: 100%;
    margin-inline: auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    list-style: none; /* Remove default list styling */
}

/* ============================= */
/* Individual Cyber Card Styling */
/* ============================= */
ol .cybercard {
    width: 30%;
    aspect-ratio: 1/1; /* Maintain square shape */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: calc(var(--borderS) + 1.2rem);
    padding-top: 4rem;
    position: relative;
    overflow: hidden;
}

/* ============================= */
/* Decorative Card Borders       */
/* ============================= */
ol li::before,
ol li::after {
    inset: 0;
    position: absolute;
    border-radius: 10%;
    border: var(--borderS) solid var(--white);
    line-height: 1.1;
}

/* Drop shadow for cards */
ol li::after {
    content: "";
    filter: drop-shadow(-0.25rem 0.25rem 0.0675rem rgba(0, 0, 0, 0.75)) blur(5px);
}

/* ============================= */
/* Icon Styling                  */
/* ============================= */
.cybercard .icon {
    position: absolute;
    top: 15%;
    left: 40%;
    font-size: 3rem;
    font-weight: 600;

    /* Gradient text effect */
    background: linear-gradient(45deg, #51afdc, #8df39b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent; /* fallback */
}

/* ============================= */
/* Description Section Styling   */
/* ============================= */
.descr h4 {
    color: #4682b4;
    margin-top: 1rem;
}

.descr ul {
    list-style: outside; /* ensures markers are outside the text */
}

/* Marker color for list items */
.descr ul li::marker {
    color: #08a5d5;
}

/* ============================= */
/* Responsive Styles             */
/* ============================= */

/* Medium screens */
@media (max-width: 999px) {
    ol .cybercard {
        width: 45%;
    }
}

/* Small screens / Mobile */
@media (max-width: 650px) {
    ol .cybercard {
        width: 100%;
        box-sizing: border-box;
        
        margin: 1rem;
    }
}