.services-frame {
    display: flex;
    justify-content: space-between;
    width: 90vw;
    margin: 0 auto;
    flex-wrap: wrap;
}

.service-card {
    width: 23%;
    display: flex;
    flex-direction: column;
    gap: 1em;
    align-items: center;
    position: relative;
    color: var(--dark);
}

.service-card p {
    transition: .2s;
    font-weight: 600;
    letter-spacing: 2px;
    font-size: 1.1em;
    margin: 0;
}

.service-card:hover p {
    color: var(--primary);
}

.service-icon {
    width: 100%;
    max-width: 120px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-card i {
    font-size: 5em;
    transition: .2s;
    display: flex;
    align-items: center;
}

.service-card:hover i {
    color: var(--primary);
}


/* Blog Icon */

.blog-icon-frame::after {
    content: '';
    position: absolute;
    display: block;
    width: 93%;
    height: 88%;
    top: 4.8%;
    left: 3.5%;
    background-color: var(--light);
    z-index: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 15% 76%, 0 96%, 0% 75%);
}

.blog-icon-frame {
    overflow: visible;
    position: relative;
    width: 90%;
    aspect-ratio: 27 / 21;
    background-color: var(--dark);
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 20% 76%, 0 100%, 0% 75%);
    transition: .2s;
}

.service-card .pen {
    display: block;
    position: absolute;
    width: 30%;
    height: 8%;
    max-width: 40px;
    max-height: 20px;
    background-color: var(--dark);
    z-index: 3;
    top: 35%;
    left: 60%;
    transform: rotate(45deg);
    transition: .2s;
}

.service-card .pen::before {
    display: block;
    content: '';
    position: absolute;
    right: 99.5%;
    top: 0;
    width: 10px;
    height: 100%;
    clip-path: polygon(100% 100%, 0 50%, 100% 0);
    background-color: inherit;
}

.service-card .pen::after {
    position: absolute;
    top: 0;
    left: 103%;
    height: 100%;
    aspect-ratio: .8;
    content: '';
    display: block;
    background-color: inherit;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.service-card:hover .pen {
    background-color: var(--primary);
    animation: pen 1.8s linear infinite alternate;
}

.blog-icon-frame .line {
    width: 70%;
    height: 7%;
    background-color: var(--dark);
    display: block;
    position: absolute;
    z-index: 2;
    border-radius: 100vh;
    animation: .9s linear infinite alternate;
}

.blog-icon-frame .line:nth-child(1) {
    top: 15%;
    left: 10%;
}

.blog-icon-frame .line:nth-child(2) {
    top: 30%;
    left: 10%;
    width: 80%;
    animation-delay: .2s;
}

.blog-icon-frame .line:nth-child(3) {
    top: 45%;
    left: 10%;
    width: 60%;
    animation-delay: .4s;
}

.service-card:hover .blog-icon-frame, 
.service-card:active .blog-icon-frame {
    background-color: var(--primary);
}

.service-card:hover .blog-icon-frame .line, 
.service-card:active .blog-icon-frame .line {
    background-color: var(--primary);
}

.service-card:hover .blog-icon-frame .line:nth-child(1), 
.service-card:active .blog-icon-frame .line:nth-child(1) {
    animation-name: blog-icon-line-1;
}

.service-card:hover .blog-icon-frame .line:nth-child(2), 
.service-card:active .blog-icon-frame .line:nth-child(2) {
    animation-name: blog-icon-line-2;
    animation-duration: 1.1s;
}

.service-card:hover .blog-icon-frame .line:nth-child(3), 
.service-card:active .blog-icon-frame .line:nth-child(3) {
    animation-name: blog-icon-line-3;
    animation-duration: .7s;
}

/* Element Icon */

.service-card:hover .wi-element {
    animation: element 1s ease infinite;
}

/* Cloud Icon */

#cloud-icon {
    max-height: 80px;
}

.cloud-icon-svg-element {
    transition: .2s;
}

.service-card:hover .cloud-icon-svg-element {
    fill: var(--primary);
    color: red;
}

.service-card:hover .circle {
    animation: cloud-circles 1s infinite;
}

.service-card:hover #path1 {
    transform-origin: center;
    animation: cloud 1s linear infinite alternate;
}

.service-card:hover #circle3, 
.service-card:hover #circle5 {
    animation-delay: .1s;
}

.service-card:hover #circle2, 
.service-card:hover #circle6, 
.service-card:hover #circle7 {
    animation-delay: .3s;
}

.service-card:hover #circle9,
.service-card:hover #circle1 {
    animation-delay: .5s;

}


@keyframes pen {
    0% {
        top: 35%;
        left: 60%;
    }
    25% {
        top: 23%;
        left: 45%;
    }
    50% {
        top: 20%;
        left: 30%;
    }
    75% {
        top: 23%;
        left: 45%;
    }
    100% {
        top: 35%;
        left: 60%;
    }
}

@media screen and (max-width: 1300px) {
    .service-card .pen {
        left: 70%;
        top: 45%;
    }

    @keyframes pen {
        0% {
            top: 45%;
            left: 70%;
        }
        25% {
            top: 33%;
            left: 45%;
        }
        50% {
            top: 30%;
            left: 30%;
        }
        75% {
            top: 33%;
            left: 45%;
        }
        100% {
            top: 45%;
            left: 70%;
        }
    }
}

@media screen and (max-width: 700px) {
    .service-card {
        width: 45%;
        margin-bottom: 3em;
        padding: .5em 0;
        border: 2px solid var(--primary);
        border-radius: 3px;
    }
}

@media screen and (max-width: 350px) {
    .services-frame  {
        flex-direction: column;
    }

    .service-card {
        width: 100%;
        margin-bottom: 3em;
    }

    .service-card .pen {
        left: 60%;
        top: 45%;
    }   

    @keyframes pen {
        0% {
            top: 45%;
            left: 60%;
        }
        25% {
            top: 33%;
            left: 45%;
        }
        50% {
            top: 30%;
            left: 35%;
        }
        75% {
            top: 33%;
            left: 45%;
        }
        100% {
            top: 45%;
            left: 60%;
        }
    }
}

@keyframes blog-icon-line-1 {
    0% { width: 70%; }
    100% { width: 0; }
}

@keyframes blog-icon-line-2 {
    0% { width: 80%; }
    100% { width: 0; }
}

@keyframes blog-icon-line-3 {
    0% { width: 60%; }
    100% { width: 0; }
}

@keyframes element {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes cloud-circles {
    0% { opacity: 1; }
    50% { opacity: .4; }
    100% { opacity: 1; }
}

@keyframes cloud { 
    0% { 
        transform: translateY(0) scale(100%); 
        opacity: 1; 
    }
    100% { 
        transform: translateY(4px) scale(97%); 
        opacity: .8; 
    }
}