#szolgaltatasok .wp-block-button,
#szolgaltatasok .wp-block-button__link,
.wpcf7-submit,
.input[type="submit"],
.wp-block-post-excerpt__more-link,
.tovabb-link,
.button{
    transition: transform 0.6s ease;
}

#szolgaltatasok .wp-block-button:hover,
.wpcf7-submit:hover,
.input[type="submit"]:hover,
.wp-block-post-excerpt__more-link:hover,
.tovabb-link:hover,
.button:hover {
    transform: translateX(15px);
}

/* Szolgáltatások ikonok animációja - :hover elmozdulás*/
.szolg-card figure,
.transition-scale figure {
    transition: all 0.8s ease;
}

.szolg-card figure:hover,
.transition-scale figure:hover {
    transform: scale(1.1);
}

/* h2 Levél elem hover-re bemozdul*/
#footer-content-box:hover::before,
h2:hover::before,
.separator-before:hover::before{
    animation: leaf-sway 3s ease-in-out infinite alternate;
    transform-origin: center;
}


@keyframes leaf-sway {
    0% {
        transform: rotate(0deg) translateX(0);
    }

    25% {
        transform: rotate(3deg) translateY(1px);
    }

    50% {
        transform: rotate(-3deg) translateY(2px);
    }

    75% {
        transform: rotate(1deg) translateY(1px);
    }

    100% {
        transform: rotate(0deg) translateY(0);
    }
}


/* Gombok elmozdulása oldalra*/
input[type="submit"],
.wp-block-button {
    transition: all 0.6s ease-in-out;
}

input[type="submit"]:hover,
.wp-block-button:hover {
    transform: translateX(10px);
}

/* Blog bejegyzés képek hover nagyítása*/
.what-lalemi-right-column figure,
.tanacsadas-bal-oszlop figure,
.bejegyzesek figure,
figure {
    overflow: hidden;
}

.what-lalemi-right-column figure img,
.tanacsadas-bal-oszlop figure img,
.bejegyzesek .wp-block-post-featured-image :where(img),
.wp-block-media-text__media img {
    transition: all 1s ease-in-out;
}

.what-lalemi-right-column figure img:hover,
.tanacsadas-bal-oszlop figure img:hover,
.bejegyzesek .wp-block-post-featured-image :where(img):hover,
.wp-block-media-text__media img:hover {
    transform: scale(1.1);
    cursor: pointer;
}

/* Animációk */
.my-hero,
.bg-price,
.bg-services{
    animation: box-animation 2s ease-in-out forwards;
    left: 50%;
    transform: translate(-50%, 200px);
    /* kezdőállapot: középre és lefelé */
    margin: 0 auto;
    animation-delay: 0.2s;
}
.bg-price,
.my-hero,
.bg-services {
    left: 50%;
    transform: translate(-50%, 200px);
}

.my-hero::before,
.bg-price::before,
.bg-services::before {
    width: 90%!important;
    animation: line-horisontal 4s ease-in-out forwards;
    animation-delay: 1s;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
    z-index: 10; 
}

.my-hero::after,
.bg-price::after,
.bg-services::after {
    height: 95%!important;
    animation: line-vertical 4s ease-in-out forwards;
    animation-delay: 1.6s;
    opacity: 0;
    transform: scaleY(0);
  transform-origin: bottom;
}

.my-hero::after{
    height: 95%!important;
}
.bg-price::after,
.bg-services::after{
    height: 100%!important;
}

.what-lalemi>.wp-block-column:first-child.visible {
    max-width: 60%;
    transform: translateX(-100%);
    animation: slideIn 3s ease-out forwards;
}

.slide-out li:nth-of-type(1).visible,
.slide-out li:nth-of-type(2).visible,
.slide-out li:nth-of-type(3).visible {
    transform: translateX(200px);
    animation: slideOut-list 1s ease-out forwards;
    opacity: 0;
}

.slide-out li:nth-of-type(2).visible {
    animation-delay: 0.2s;
}

.slide-out li:nth-of-type(2).visible {
    animation-delay: 0.6s;
}

.slide-out li:nth-of-type(3).visible {
    animation-delay: 1s;
}

.kapcsolat-jobb-img-oszlop,
.kapcsolat-bal-img-oszlop,
.rolam-bal-oszlop.visible {
    opacity: 0;
    animation: slideOut 2s ease-out forwards;
    animation-delay: 0.2s;
}

.img-box .wp-block-column:nth-of-type(2).visible {
    z-index: 4;
}

.img-box .wp-block-column:nth-of-type(1).visible {
    transform: translateX(200px);
    animation: slideOut-img 1s ease-out forwards;
    animation-delay: 0.3s;
    opacity: 0;
    z-index: 0;
}

.img-box .wp-block-column:nth-of-type(3).visible {
    transform: translateX(-200px);
    animation: slideIn-img 1s ease-out forwards;
    animation-delay: 1s;
    opacity: 0;
    z-index: 0;
}



@keyframes box-animation {
    0% {
        transform: translate(-50%, 200px);
    }

    100% {
        transform: translate(-50%, 0);
    }
}

@keyframes line-horisontal {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes line-vertical {
  0% {
    transform: scaleY(0);
    opacity: 0;
  }
  100% {
    transform: scaleY(1);
    opacity: 1;
  }
}


@keyframes slideIn {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes slideOut {
    0% {
        opacity: 0;
        transform: translateX(50%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOut-list {
    0% {
        opacity: 0;
        transform: translateX(200px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideIn-img {
    0% {
        opacity: 0;
        transform: translateX(-200px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOut-img {
    0% {
        opacity: 0;
        transform: translateX(200px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Szlogen svg forgása*/
.szlogen svg {
  display: inline-block; 
  transition: transform 4s ease;
}

.szlogen svg:hover {
  transform: rotate(180deg);
}



@media only screen and (max-width: 831px) {
    .what-lalemi>.wp-block-column:first-child.visible {
        max-width: 100%;
    }
}

@media only screen and (max-width: 768px) {
    .img-box .wp-block-column:nth-of-type(1).visible {
        transform: translateY(200px);
        animation-delay: 0;
    }

    .img-box .wp-block-column:nth-of-type(3).visible {
        transform: translateY(-200px);
        animation-delay: 0;
    }

    @keyframes slideIn-img {
        0% {
            opacity: 0;
            transform: translateY(-200px);
        }

        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes slideOut-img {
        0% {
            opacity: 0;
            transform: translateY(200px);
        }

        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
}


@media only screen and (max-width: 682px) {
    .my-hero {
        left: 0;
        transform: translateX(-100%);
        animation: slideIn 2s ease-out forwards;
        top: 6rem;
        padding: 2.5rem 3rem 2.5rem 2rem;
        height: auto;
    }
    
    .bg-price,
    .bg-services{
        left: 0;
        transform: translateX(-100%);
        animation: box-slide-left 2s ease-in-out forwards;
    }
    
    .what-lalemi>.wp-block-column:first-child.visible {
        max-width: 100%;
    }

    @keyframes slideIn {
        0% {
            transform: translateX(-100%);
        }

        100% {
            transform: translateX(0);
        }
    }

    @keyframes box-slide-left {
        0% {
            transform: translateX(-100%);
            opacity: 0;
        }

        100% {
            transform: translateX(0);
            opacity: 1;
        }
    }
}