.ad-card-wrapper {
    padding: 1rem;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

    --c-best: #cb56ff;
    --c-instagram: rgb(159 255 43);
    --c-name: rgb(43 209 255);
    --c-fullemail: rgb(83 235 190);
    --c-site: rgb(255 185 65);
}

.ad-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    max-width: 700px;
    margin-block: 7rem 5rem;
    margin-inline: auto;
    color: black;
    border-radius: 10px;
    background-image: url('/wp-content/themes/bestoychev-photography/assets/images/splash.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    filter: invert(1);
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.ad-card h3 {
    position: relative;
    white-space: nowrap;
    margin-bottom: 50px;
    filter: invert(1);
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.ad-card a {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    letter-spacing: 0.1rem;
    text-decoration: none;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.ad-card a,
.ad-card a *,
.ad-card span,
.ad-card .best,
.ad-card .instagram,
.ad-card .name,
.ad-card .fullemail,
.ad-card .mail,
.ad-card .site {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif !important;
}

/* BEST */
.best {
    position: relative;
    color: var(--c-best);
    transition: all .15s ease-in-out;
}

.best::before {
    content: attr(content);
    position: absolute;
    font-size: 18px;
    top: 0;
    left: -140%;
    opacity: 0;
    transition: all .15s ease-in-out;
    transform: rotate(-17.5deg);
}

.best:hover::before {
    top: -90%;
    opacity: 1;
}

.best::after {
    content: '';
    position: absolute;
    width: 75%;
    height: 12px;
    top: -20%;
    left: -10%;
    border: 2px solid;
    border-bottom: 0;
    transition: all .15s ease-in-out;
}

/* INSTAGRAM */
.instagram {
    position: relative;
    color: var(--c-instagram);
    transition: all .15s ease-in-out;
}

.instagram::before {
    content: attr(content);
    position: absolute;
    font-size: 18px;
    top: 0;
    left: 23%;
    opacity: 0;
    transition: all .15s ease-in-out;
}

.instagram:hover::before {
    top: 120%;
    opacity: 1;
}

.instagram::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 12px;
    top: 87%;
    left: 0;
    border: 2px solid;
    border-top: none;
    transition: all .15s ease-in-out;
}

/* NAME */
.ad-card-wrapper .name {
    position: relative;
    color: var(--c-name);
    transition: all .15s ease-in-out;
}

.ad-card-wrapper .name::before {
    content: attr(content);
    position: absolute;
    font-size: 18px;
    top: 0;
    left: 33%;
    opacity: 0;
    transition: all .15s ease-in-out;
}

.ad-card-wrapper .name:hover::before {
    top: -90%;
    opacity: 1;
}

.ad-card-wrapper .name::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 12px;
    top: -20%;
    left: 0;
    border: 2px solid;
    border-bottom: 0;
    transition: all .15s ease-in-out;
}

/* EMAIL */
.fullemail {
    position: relative;
    color: var(--c-fullemail);
    transition: all .15s ease-in-out;
}

.fullemail::before {
    content: attr(content);
    position: absolute;
    font-size: 18px;
    top: 0;
    left: 43%;
    opacity: 0;
    transition: all .15s ease-in-out;
}

.fullemail:hover::before {
    top: 215%;
    opacity: 1;
}

.fullemail::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 54px;
    top: 100%;
    right: 0;
    border: 2px solid;
    border-top: none;
    transition: all .15s ease-in-out;
}

/* SITE */
.site {
    position: relative;
    color: var(--c-site);
    transition: all .15s ease-in-out;
}

.site::before {
    content: attr(content);
    position: absolute;
    font-size: 18px;
    top: 0;
    left: 25%;
    opacity: 0;
    transition: all .15s ease-in-out;
}

.site:hover::before {
    top: -90%;
    opacity: 1;
}

.site::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 12px;
    top: -20%;
    right: 0;
    border: 2px solid;
    border-bottom: 0;
}


.name:hover,
.instagram:hover,
.site:hover {
    filter: invert(0.8);
}

/* FULL GMAIL HOVER */
.ad-card:has(.fullemail:hover) .best,
.ad-card:has(.fullemail:hover) .name,
.ad-card:has(.fullemail:hover) .fullemail,
.ad-card:has(.fullemail:hover) .site {
    color: rgb(33, 174, 184);
}

.ad-card:has(.fullemail:hover) .best::before,
.ad-card:has(.fullemail:hover) .name::before,
.ad-card:has(.fullemail:hover) .instagram::before,
.ad-card:has(.fullemail:hover) .site::before,
.ad-card:has(.fullemail:hover) .best::after,
.ad-card:has(.fullemail:hover) .instagram::after,
.ad-card:has(.fullemail:hover) .name::after,
.ad-card:has(.fullemail:hover) .site::after {
    opacity: 0;
}

/* SITE HOVER */
.site:hover {
    filter: none;
    color: var(--c-site) !important;
}

.site:hover::after {
    opacity: 0;
}

.site:hover::before {
    opacity: 1 !important;
}

.ad-card:has(.site:hover) h3::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 12px;
    top: -7%;
    right: 0;
    border: 2px solid;
    border-bottom: 0;
    border-color: var(--c-site);
}

.ad-card:has(.site:hover) .fullemail {
    filter: none;
    color: var(--c-fullemail);
}

.ad-card:has(.site:hover) .fullemail::before,
.ad-card:has(.site:hover) .fullemail::after {
    opacity: 0;
}

.ad-card:has(.site:hover) .mail {
    filter: blur(2px);
}

.ad-card:has(.site:hover) .name {
    filter: none;
    color: var(--c-site) !important;
}

.ad-card:has(.site:hover) .name::before,
.ad-card:has(.site:hover) .name::after {
    opacity: 0;
}

.ad-card:has(.site:hover) .best {
    filter: none;
    color: var(--c-site) !important;
}

.ad-card:has(.site:hover) .best::before,
.ad-card:has(.site:hover) .best::after {
    opacity: 0;
}

/* INSTAGRAM HOVER */
.instagram:hover {
    filter: none;
    color: var(--c-instagram) !important;
}

.instagram:hover::before,
.instagram:hover::after {
    opacity: 1 !important;
}

.ad-card:has(.instagram:hover) .fullemail {
    filter: none;
    color: var(--c-fullemail);
}

.ad-card:has(.instagram:hover) .fullemail::before,
.ad-card:has(.instagram:hover) .fullemail::after {
    opacity: 0;
}

.ad-card:has(.instagram:hover) .mail {
    filter: blur(2px);
    color: var(--c-fullemail);
}

.ad-card:has(.instagram:hover) .site {
    filter: blur(2px);
    color: var(--c-site);
}

.ad-card:has(.instagram:hover) .site::before,
.ad-card:has(.instagram:hover) .site::after {
    opacity: 0;
}

.ad-card:has(.instagram:hover) .name {
    filter: none;
    color: var(--c-instagram);
}

.ad-card:has(.instagram:hover) .name::before,
.ad-card:has(.instagram:hover) .name::after {
    opacity: 0;
}

.ad-card:has(.instagram:hover) .best {
    filter: none;
    color: var(--c-instagram);
}

.ad-card:has(.instagram:hover) .best::before,
.ad-card:has(.instagram:hover) .best::after {
    opacity: 0;
}

@media screen and (max-width: 767px) {
    .ad-card {
        background-size: 100% 200%;
    }
}

@media screen and (max-width: 500px) {
    .ad-card {
        position: relative;
        min-height: 320px;
    }

    .ad-card h3 a {
        font-size: 20px;
    }

    .best::after {
        width: 65%;
        top: -40%;
        border-width: 1.5px;
    }

    .best::before {
        top: -125%;
        left: -195%;
        font-size: 16px;
    }

    .name::before {
        top: -135%;
        left: 25%;
        font-size: 16px;
    }

    .name::after {
        width: 95%;
        top: -40%;
        border-width: 1.5px;
    }

    .site::after {
        width: 90%;
        top: -40%;
        border-width: 1.5px;
    }

    .site::before {
        top: -135%;
        left: 15%;
        font-size: 16px;
    }

    .ad-card:has(.site:hover) h3::after {
        top: -30%;
        border-width: 1.5px;
    }

    .instagram::before {
        top: 135%;
        left: 16%;
        font-size: 16px;
    }

    .instagram::after {
        width: 95%;
        border-width: 1.5px;
    }

    .fullemail::before {
        top: 285%;
        font-size: 16px;
    }

    .fullemail::after {
        border-width: 1.5px;
    }
}