/*
Theme Name: A Főnix Weboldal- és Arculattervezés egyedi témája
Theme URI: https://www.afonix.hu
Author: Máté-Silye Marianna
Author URI: https://www.afonix.hu
Description: Az "A Főnix Weboldal- és Arculattervezés egyedi témája" egy egyedi téma, kifejezetten az afonix.hu weboldal számára megírva.
Version: 1.0.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: afonix
Tags: responsive, modern, custom-background, custom-header, custom-menu, featured-images
*/

/*** GLOBAL ***/

:root {
    --darkblue: #05071C;
    --lightblue: #7B65AD;
    --purple: #662D59;
    --light: #FCFAE0;
    --orange: #F8A42F;
    --red: #D7340B;
    /*--seagreen: #1C3C47;*/
    --purpleGrad: linear-gradient(to bottom, rgba(252, 250, 224, 0) 0%, #662D59 50%, #05071C 100%);
    --darkpurpleGrad: linear-gradient(to bottom, #05071C 0%, #662D59 50%, #05071C 100%);
    --bodyfont: "Instrument Sans", "Arial Narrow", "Arial", sans-serif;
    --headingfont: "Spectral SC", "Garamond", serif;
    --radius: 10px;
    --inner-shadow: 0px 5px 5px 0 color-mix(in srgb, var(--purple) 25%, transparent) inset;
    --button-shadow: 0px 4px 4px 0 color-mix(in srgb, var(--darkblue) 20%, transparent);
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

html {
    font-size: 1.35vw;
    /* 23px / 1672px (kb) */
}

@media only screen and (max-width: 1024px) {
    html {
        font-size: 1.4vw;
    }
}


@media only screen and (max-width: 768px) {
    html {
        font-size: 4.15vw;
    }
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--bodyfont);
    font-weight: 400;
    background: var(--darkblue);
    color: var(--light);
}

.horizontal-center {
    text-align: center;
}

.vertical-center {
    align-items: center;
}

.fullwidth {
    /*Hogyan igazítsunk középre egy olyan elemet, ami szélesebb, mint a szülője.*/
    width: calc(100vw - 18px);
    /*kijelző szélessége - gördítősáv: általában 15-17px szokott lenni + 2px, h ne lógjanak le a betűk a monitorról*/
    position: relative;
    left: calc(50% + 9px);
    /*behúzom balról 50%-kal plusz a gördítősáv széleségének a fele*/
    margin-left: -50vw;
    /**/
}

.narrow {
    margin-left: auto;
    margin-right: auto;
    max-width: 50vw;
}

.lightsection {
    color: var(--darkblue);
    background: white;
}

.long-text-bulletpoint > li {
    margin-bottom: 2rem;
}

header {
    background: var(--darkblue);
}

img {
    max-width: 100%;
    height: auto;
}

svg {
    fill: var(--light);
    width: auto;
    height: 1rem;
}

svg.dark {
    fill: var(--darkblue);
}

h1,
h2,
h3 {
    font-weight: 500;
    /*medium*/
    font-family: var(--headingfont);
}

h1 {
    font-size: 1.75rem;
    position: relative;
    padding-bottom: 1rem;
    margin: 2rem auto;
}

h2 {
    font-size: 1.55rem;
    position: relative;
    padding-bottom: 1rem;
    margin: 6rem auto 2rem auto;

}

.widget:first-child h2 {
    margin-top: 2rem;
}

h3 {
    font-size: 1.25rem;
    margin: 6rem auto 2rem auto;
}

h1:not(.widget h1)::after,
h2:not(.widget h2)::after {
    content: '';
    width: 6rem;
    height: 6rem;
    position: absolute;
    margin-left: -1.5rem;
    margin-top: -0.5rem;
    background-image: url(img/csillagok-afonix.png);
    background-repeat: no-repeat;
    background-size: contain;
    animation-delay: 5s;
}


section:nth-of-type(2) h2::after,
article:nth-of-type(2) h2::after,
.wp-block-column:nth-of-type(2) h2::after {
    animation-delay: 1s;
}

h1::after,
section:nth-of-type(3) h2::after,
article:nth-of-type(3) h2::after,
.wp-block-column:nth-of-type(3) h2::after {
    animation-delay: 3s;
}

a {
    color: var(--lightblue);
    text-decoration: none;
}

a:hover {
    color: var(--orange);
}

p,
li {
    line-height: 1.5;
}

ul,
ol {
    padding-left: 1.5rem;
}

ul li {
    vertical-align: middle;
    position: relative;
}

ul li::marker {
    color: transparent;
    /*ez azért szükséges, hogy a többsoros listaelemek bal szövegszéle egyenes legyen.*/
}

ul li:not(header ul li, .home-post ul li)::before {
    content: '';
    position: absolute;
    display: inline-block;
    width: 2rem;
    height: 2rem;
    left: -1.9rem;
    top: -0.25rem;
    background-image: url(img/csillag1-afonix.png);
    background-repeat: no-repeat;
    background-size: contain;
}

/* A másod- harmadszintű listák is csillaggal jelöltek legyenek, behúzással */
li > ul > li,
li > ul > li > ul > li {
    list-style-type: none;
}

ol li {
    position: relative;
    z-index: 1;
    margin-bottom: 10px;
    padding-left: 10px;
}

ol li::marker {
    color: var(--darkblue);
}

ol li::before {
    content: '';
    display: block;
    width: 5rem;
    height: 5rem;
    position: absolute;
    left: -3.25rem;
    top: -1.65rem;
    z-index: -1;
    background-image: url(img/csillag1-afonix.png);
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.75;
}

.accented-text {
    color: var(--orange);
    text-transform: uppercase;
    font-size: smaller;
    font-family: var(--headingfont);
}

.capital {
    font-family: var(--headingfont);
}

/*** GOMBOK FORMÁZÁSA ***/

.button a,
input[type=submit].button,
.services-main .wp-block-post-excerpt__more-link {
    padding: 12px 20px;
    margin: 4rem auto;
    border: none;
    border-radius: var(--radius);
    font-family: var(--headingfont);
    font-size: inherit;
    font-weight: 700;
    line-height: 1;
}

.button-light a,
input[type=submit].button-light {
    background-color: var(--light);
    color: var(--darkblue);
    box-shadow: var(--button-shadow);
}

.button-dark a,
input[type=submit].button-dark,
.services-main .wp-block-post-excerpt__more-link {
    background-color: var(--darkblue);
    color: var(--light);
    box-shadow: var(--button-shadow);
}

.button a:hover,
input[type=submit].button:hover,
.services-main .wp-block-post-excerpt__more-link:hover {
    background-color: var(--orange);
    color: white;
}

/*** Ajánlatkérés doboz a lap alján */

.offer-box {
    margin-bottom: 2rem;
    padding: 0 2rem;
    border: 1px solid var(--ligth);
    border-radius: var(--radius);
    box-shadow: 0px 0px 6px 0px var(--light), 0px 0px 6px 0px var(--light) inset;
    background: color-mix(in srgb, var(--lightblue) 20%, transparent);
}

.offer-box h2 {
    padding-top: 2rem;
}

/*** Contact Form 7 formázása ***/

div.wpcf7 {
    margin-bottom: 2rem;
}

form.wpcf7-form .row {
    border: 1px solid var(--lightblue);
    border-radius: var(--radius);
    padding: 2rem;
}

form.wpcf7-form .row .col-1-2 {
    margin: 0;
    padding: 0;
}

form.wpcf7-form p {
    margin: 0 auto;
    padding: 0;
}

form.wpcf7-form p.urlap-cim {
    margin-bottom: 0.25rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
}

form.wpcf7-form p.urlap-cim + p {
    margin-bottom: 2rem;
}

form.wpcf7-form .urlap-cim.form-dark {
    color: var(--darkblue);
}

form.wpcf7-form .urlap-cim.form-light {
    color: var(--light);
}

input.wpcf7-form-control,
textarea.wpcf7-form-control,
select.wpcf7-form-control {
    padding: 0.5rem;
    width: 30vw;
    line-height: 2.25rem;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: inherit;
}

input.wpcf7-email,
input.wpcf7-text,
select.wpcf7-form-control {
    height: 2.25rem;
    margin-bottom: 2rem;
}

textarea.wpcf7-form-control {
    height: 10rem;
    margin: 0 auto;
}

input.wpcf7-email:focus,
input.wpcf7-text:focus,
textarea.wpcf7-form-control:focus,
select.wpcf7-form-control {
    outline: 1px solid var(--orange);
}

input.wpcf7-form-control.form-dark,
select.wpcf7-form-control.form-dark {
    background: var(--darkblue);
    color: var(--light);
    border: none;
    box-shadow: var(--button-shadow);
}

input.wpcf7-form-control.form-dark::placeholder,
textarea.wpcf7-form-control.form-dark::placeholder,
select.wpcf7-form-control.form-dark::placeholder {
    color: var(--light);
    opacity: 0.8;
}

input.wpcf7-form-control.form-light select.wpcf7-form-control.form-light {
    background: white;
    color: var(--darkblue);
    border: 1px solid var(--darkblue);
    box-shadow: var(--button-shadow);
}

input.wpcf7-form-control.form-light::placeholder,
textarea.wpcf7-form-control.form-light::placeholder,
select.wpcf7-form-control.form-light::placeholder {
    color: var(--darkblue);
    opacity: 0.8;
}

div.wpcf7 input[type=submit].button {
    margin-bottom: 0;
}

.wpcf7-list-item {
    margin: 0;
}

.wpcf7-acceptance .wpcf7-list-item-label,
.wpcf7-form-control.hirlevel {
    font-size: smaller;
}

.wpcf7-spinner {
    margin-left: calc((100% / 2) - (24px / 2));
    margin-right: calc((100% / 2) - (24px / 2));
    top: calc((4rem + 2.25rem - 6px)* -1);
    /*a button alsó margója + magassága + padding fele - ennyivel feljebb, tehát mínuszba pozicionálom a spinnert, a gombra.*/
}

.wpcf7-submit {
    width: 100%;
}

.wpcf7-not-valid-tip {
    color: var(--red);
}

/*** page típusú oldalak ***/

.page main {
    background: var(--darkpurpleGrad);
}

/*** single típusú oldalak***/

.single.single-post .wp-post-image {
    border-radius: var(--radius);
    box-shadow: var(--button-shadow);
    width: 100%;
    height: auto;
}

/*** LAYOUT ***/

/*** Top-head felső másodlagos menüsor beállítása ***/
#top-head {
    background: var(--light);
    box-shadow: var(--inner-shadow);
    font-size: smaller;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

#top-head a {
    color: var(--darkblue);
}

#top-head a:hover {
    color: var(--orange);
}

#top-head > .wp-block-group {
    height: 1.75rem;
}

#top-head .wp-block-search__inside-wrapper {
    height: 1.75rem;
    background: var(--darkblue);
    border-radius: var(--radius);
}

#top-head .wp-block-search__input {
    background: transparent;
    color: var(--light);
    font-family: var(--bodyfont);
    border: none;
}

#top-head .wp-block-search__input::placeholder {
    color: var(--light);
    opacity: 1;
}

#top-head .wp-block-search__button.has-icon {
    background: transparent;
    border: none;
    border-left: 1px solid var(--light);
    padding: 0;
}

#top-head .wp-block-search__button.has-icon svg {
    fill: var(--light);
    /*szükséges lépés*/
}

/*** Back To Top button ***/

.back-to-top {
    display: none;
    position: fixed;
    right: 4.25rem;
    /*75px*/
    /*256px-186px=70px - recaptcha badge teljes szélessége - eltakart szélessége = kilátszó badge*/
    bottom: 1.25rem;
    /*25px*/
    width: 2rem;
    /*40px*/
    height: 2rem;
    /*40px*/
    line-height: 2rem;
    /*40px*/
    transform: rotate(-90deg);
    text-align: center;
    font-size: 1.5rem;
    background-color: var(--lightblue);
    color: var(--light);
    border-radius: 50%;
    box-shadow: var(--button-shadow);
    z-index: 9999;

}

.back-to-top.show {
    display: block;
}

/*** Blog lapozó ***/

nav.navigation.pagination {
    text-align: center;
    margin: 10vh auto 0 auto;
}

.navigation.pagination .nav-links {
    display: flex;
    justify-content: space-evenly;
    max-width: 50vw;
    margin: 0 auto;
}

.navigation.pagination .nav-links .page-numbers {
    padding: 2rem;
    font-weight: bold;
}

.navigation.pagination .nav-links .page-numbers.current {
    background: radial-gradient(circle, var(--light) 10%, transparent 30%);
    color: var(--darkblue);
}

/*** hero szekció - nem csak a főoldalon van ***/

.hero {
    position: relative;
    min-height: 25vh;
}

.dekorcsillag {
    height: auto;
    position: absolute;
}

#dekorcsillag1 {
    width: 6vw;
    top: -10vh;
    left: 45vw;
    animation-delay: 0s;
}

#dekorcsillag2 {
    width: 8vw;
    top: 10vh;
    left: 0;
    animation-delay: 2s;
}

#dekorcsillag3 {
    width: 4.5vw;
    top: 5vh;
    right: 25vw;
    animation-delay: 4s;
}

.dekorcsillag,
h1::after,
h2::after {
    animation-name: blink;
    animation-duration: 4s;
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes blink {
    0% {
        opacity: 0.1;
    }

    100% {
        opacity: 1;
    }
}

/*** FELIRATKOZÁS A LAPOK ALJÁN ***/

.subscribe {
    box-shadow: var(--inner-shadow);
}

.subscribe h2 {
    margin-top: 2rem;
}

.subscribe p:not(.subscribe form p) {
    margin-bottom: 2rem;
}

/*** KEZDŐLAP oldal beállításai ***/

.home h1 {
    display: none;
}

.home .wp-block-group__inner-container:not(.services-main .wp-block-group__inner-container, .home-post .wp-block-group__inner-container),
.subscribe .wp-block-group__inner-container {
    padding: 4vw 8vw;
    /* 50/1280 */
}

/*** hero szekció ***/

.home .hero {
    overflow-x: clip;
    /*a kép a pozicionálás miatt túllóg, scroll-t hoz létre, ezért a kilógó részt levágjuk. A hidden nem elég, mert nem látszik ugyan a kép, de a scroll attól még létrejön.*/
}

.home #dekorcsillag2 {
    top: 25vh;
}

.home #dekorcsillag3 {
    top: 15vh;
}

.home .hero h2 {
    margin-top: 2rem;
}

.home .hero-text {
    max-width: 40vw;
}

.home .hero-img {
    position: absolute;
    top: -10vh;
    right: -20vw;
    width: 70vw;
    height: auto;
    mask-image: radial-gradient(ellipse, black 35%, rgba(0, 0, 0, 0.5) 45%, transparent 60%);
    filter: grayscale(50%);
}

/*** portfólió szekció ***/

.home .portfolio {
    display: none;
}

/*** szolgáltatások szekció ***/

.home .services {
    background: var(--purpleGrad);
}

/*** ajánlat szekció ***/

.home .offer {
    background-color: var(--lightblue);
    box-shadow: var(--inner-shadow);
}

/*** bemutatkozás szekció ***/

.home .introduction {
    box-shadow: var(--inner-shadow);
}

.home .introduction .home-photo,
.page-id-16 .wp-post-image,
.page-id-28 .wp-post-image {
    display: block;
    margin: 0 auto;
    max-width: 30vw;
    height: auto;
    border-radius: 500px;
    mask-image: radial-gradient(circle, white 50%, transparent 70%);
}

/*** munkafolyamat szekció ***/

.home .workflow {
    background: var(--darkpurpleGrad);
}

/*** legfrissebb blogbejegyzések szekció ***/

.home .home-post {
    color: var(--darkblue);
}

.home .home-post ul li {
    display: grid;
}

.home .home-post article {
    border-radius: var(--radius);
    background: var(--light);
    padding: 0;
    overflow: hidden;
    box-shadow: 0px 0px 5px var(--lightblue);
}

.home .home-post .wp-block-post-featured-image {
    margin: 0;
}

.home .home-post .wp-block-post-title {
    margin: 0;
    padding: 2.5vw;
    background: var(--darkblue);
    color: var(--light);

}

.home .home-post .wp-block-post-excerpt {
    padding: 2.5vw;
}

/*** RÓLAM oldal beállításai ***/

.page-id-16 .wp-post-image {
    max-width: 40vw;
    margin-bottom: 2rem;
}

/*** SZOLGÁLTATÁSOK főoldal beállításai ***/

.services-main ul li {
    border-radius: var(--radius);
    box-shadow: var(--button-shadow);
    position: relative;
    overflow: hidden;
}

.services-main ul li::before {
    content: none;
}


/* fehér színű áttetsző réteg, hogy a kép ne vigye el a figyelmet */
.services-main ul li .overlay {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.4);
    position: absolute;
    top: 0;
    left: 0;
}

.services-main ul li > .service-header {
    margin: 0 -2.5vw -4.5vw -2.5vw;
    border-radius: var(--radius);
}

.services-main ul li > .service-header h2 {
    position: absolute;
    margin: 0;
    padding: 1rem;
    width: 100%;
    top: 50%;
    left: 20%;
    color: var(--darkblue);
    background-color: rgba(255, 255, 255, 0.7);
}

.services-main ul li > .service-body {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 2rem;
    background-color: var(--light);
    color: var(--darkblue);
    opacity: 0;
    transition: opacity 0.6s;
}

.services-main ul li:hover > .service-body {
    opacity: 1;
}

.services-main .wp-block-post-excerpt__more-text {
    text-align: center;
}

.services-main .wp-block-post-excerpt__more-link {
    margin: 1rem auto;
}

/*** SZOLGÁLTATÁSOK aloldalak beállításai ÉS ***/
/*** ARCHIVE, CATEGORY oldalak beállításai ***/


/* Csomagajánlat-doboz a Szolgáltatások menüpontban */
.services.services-container {
    width: 100%;
    margin: 8vw auto;
    gap: 2.5vw;
}

body.archive .column-3,
body.category .column-3,
.services-main {
    margin: 4rem auto;
}

body.archive article,
body.category article,
.service {

    border: 1px solid var(--darkblue);
    border-radius: var(--radius);
    padding: 2.5vw;
    background-color: var(--light);
}

body.archive article,
body.category article {
    border: 1px solid var(--lightblue);
}

.service {
    flex-basis: 100%;
    flex-grow: 1;
    /*így egyforma szélességüek lesznek az oszlopok*/
    gap: 8vh;
    /*szakaszok közötti függőleges térköz az oszlopon belül*/
}

.service.service-highlighted {
    outline: 2px solid var(--orange);
    outline-offset: 0.5rem;
    position: relative;
}

.service.service-highlighted::before {
    content: 'A Főnix ajánlata';
    height: 3rem;
    width: 80%;
    padding: 0.25rem;
    position: absolute;
    top: -2rem;
    left: 10%;
    border-radius: 40px 0 40px 0;
    background: var(--orange);
    color: var(--light);
    font-family: var(--headingfont);
    font-size: 1.5rem;
    text-align: center;
    /* font-weight: 700;*/
}

body.archive .archive-header,
body.category .category-header,
.service > .service-header,
.service > .service-footer {
    margin: -2.5vw;
    /*border-radius: var(--radius);*/
    overflow: hidden;
}

.service > .service-header,
.service > .service-footer {
    padding: 2.5vw;
}

body.archive .archive-header,
body.category .category-header,
.service > .service-header {
    border-radius: var(--radius) var(--radius) 0 0;
    min-height: 40vh;
}

body.archive .archive-header h2,
body.category .category-header h2 {
    margin: 1.5rem;
    color: var(--light);
    font-size: 1.25rem;
}

.service > .service-header > h2 {
    text-align: center;
}

body.archive .archive-header h2::after,
body.category .category-header h2::after,
.service > .service-header > h2::after,
.services-main ul li > .service-header h2::after,
.home-post .archive-header h2::after {
    content: none;
}

body.archive .archive-body,
body.category .category-body,
.service > .service-body {
    color: var(--darkblue);
    flex-grow: 1;
}

body.archive .archive-body,
body.category .category-body {
    margin-top: calc(2.5vw + 2rem);
}

.service > .service-body ul > li {
    padding-left: 1rem;
}

.service > .service-body ul > li::before {
    display: none;
}

.service > .service-body ul > li::marker {
    content: '✓';
    color: limegreen;
    text-shadow: 0 0 4px lime;
    font-weight: bold;
    height: inherit;
    line-height: inherit;

}

.service > .service-footer {
    border-radius: 0 0 var(--radius) var(--radius);
    background: var(--darkblue);
}

.services .wp-block-buttons.is-content-justification-center {
    margin-left: auto;
    margin-right: auto;
}

.services .button > a {
    margin-bottom: 0;
}

/*** Tooltip - szövegbuborék magyarázatokhoz ***/
.tooltip-box {
    position: relative;
    display: inline-block;
    text-decoration: underline dotted;
}

.tooltip-box .tooltip-text {
    visibility: hidden;
    width: 50vw;
    border-radius: var(--radius);
    box-shadow: var(--button-shadow);
    padding: 6px;
    position: absolute;
    z-index: 1;
    background-color: var(--light);
    color: var(--darkblue);
}

.tooltip-box:hover .tooltip-text {
    visibility: visible;
}

/*** TÖRÉSPONTOK ***/

@media only screen and (max-width: 480px) {

    .category-blog article,
    section > .wp-block-group__inner-container > * {
        margin-bottom: 2rem;
    }


    .capital {
        max-width: 100%;
        text-align: center;
    }

    .fullwidth {
        width: 100vw;
        left: 50%;
        margin-left: -50vw;
    }

    .narrow {
        max-width: 100%;
    }

    .offer-box {
        margin: 2rem auto;
        padding: 0 2rem 1rem 2rem;
    }

    body .is-layout-flex.wp-block-buttons {
        justify-content: space-around;
    }

    /*Ajánlatkérő űrlap telón fordított sorrendben legyen, h alul legyen a gomb*/
    #wpcf7-f220-p28-o2 .row {
        flex-direction: column-reverse;
    }

    input.wpcf7-form-control,
    textarea.wpcf7-form-control,
    select.wpcf7-form-control {
        width: 100%;
    }

    #top-head {
        display: flex;
        min-height: 4rem;
    }

    #top-head .wp-container-core-group-is-layout-2.wp-container-core-group-is-layout-2 {
        justify-content: center;
        flex-wrap: wrap;
    }

    #top-head .wp-block-search {
        /* display: none; */
        flex-basis: 100%;
        flex-grow: 1;
    }

    .home .hero-text {
        max-width: 100%;
    }

    .home .hero-img {
        width: 80vw;
        top: 0;
    }

    .home .introduction .home-photo {
        max-width: 100%;
        margin-bottom: 2rem;
    }

    nav.navigation.pagination {
        margin: 0 auto;
    }

    .navigation.pagination .nav-links {
        max-width: 100%;
    }

    .navigation.pagination .nav-links .page-numbers {
        padding: 1rem;
    }

    .grecaptcha-badge {
        right: -106px !important;
        bottom: calc(1.25rem + 2rem + 0.75rem) !important;
        /* back to top bottom + height + térköz a 2 badge között */
    }

    .back-to-top {
        right: 5.5rem;
        bottom: 0.5rem;
        width: 3rem;
        height: 3rem;
        line-height: 2.75rem;
        font-size: 2rem;
    }

    .services-main ul li > .service-header h2 {
        top: 25%;
        left: 0;
        font-size: 1.25rem;
        text-align: center;
    }

    .services-main ul li > .service-body {
        width: 100%;
        height: 100%;
        padding: 0.75rem;
        opacity: 0;
        transition: opacity 1s;
        overflow-y: scroll;
    }

    /* lefele mutató, görgetést jelző nyilacska */
    .services-main ul li > .service-body p:first-of-type::before {
        content: '\0279C';
        display: inline-block;
        width: 1rem;
        height: 1rem;
        line-height: 1rem;
        transform: rotate(90deg);
        font-size: 1rem;
        color: var(--lightblue);
        animation-name: blink;
        animation-duration: 0.7s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }

    .services-main ul li:focus-within > .service-body {
        opacity: 1;
    }

    .service > .service-header,
    .service > .service-footer,
    .home .home-post .wp-block-post-title,
    .home .home-post .wp-block-post-excerpt {
        padding: 4vw;
    }

    .service > .service-body {
        padding: 0 4vw;
    }

    .services.services-container {
        flex-direction: column;
        row-gap: 10vh;
    }

    body.archive .archive-body,
    body.category .category-body {
        padding: 0 4vw 4vw 4vw;
    }
}