/*
Theme Name: Szallasmuhely Theme
URI: https://nektonik.hu
Author: Nektonik
Author URI: https://nektonik.hu
Description: Nektonik WordPressTheme for Szallasmuhely
Version: 1.0.0
Requires at least: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: szallasmuhely-basic
*/

/* ---------------------------------------------------------------GENERAL */

:root {
    --gray: #F4F3F8;
    --pink: #D7246F;
    --blue: #006474;
    --black: #001316;
    --font: "Rubik", sans-serif;
    --border-radius: 15px;
    --border-radius-small: 5px;
    --box-shadow-blue: 0 4px 20px 0 rgba(0, 100, 116, 0.10);
    --box-shadow-black: 0 4px 20px 0 rgba(0, 0, 0, 0.10);
}

*::-moz-selection {
    background-color: var(--pink);
    color: #fff;
}

*::selection {
    background-color: var(--pink);
    color: #fff;
}

body {
    background-color: var(--gray);
    font-family: var(--font);
    color: var(--black);
    font-weight: 400;
    line-height: 1.35;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex-grow: 1;
    padding-bottom: 5rem;
    padding-top: 1rem;
}

.center-box {
    width: 95%;
    margin: 0 auto;
    max-width: 1120px;
}

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

a {
    color: inherit;
    text-decoration: none;
}

.button {
    display: inline-block;
    padding: 0.7rem 1.8rem;
    text-align: center;
    font-weight: 700;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    border-radius: 30px;
}

.button-transparent {
    background-color: transparent;
    color: #fff;
    border: 2px solid #FFF;
    box-shadow: var(--box-shadow-black);

    &:hover {
        background-color: #FFF;
        color: var(--blue);
    }
}

.button-white {
    background-color: #FFF;
    color: var(--pink);
    border: 2px solid #FFF;
    box-shadow: var(--box-shadow-black);

    &:hover {
        color: var(--blue);
    }
}

.button-pink {
    background-color: var(--pink);
    color: #FFF;
    border: 2px solid var(--pink);

    &:hover {
        background-color: var(--blue);
        border: 2px solid var(--blue);
    }
}

.button-blue {
    background-color: var(--blue);
    border: 2px solid var(--blue);
    color: #FFF;

    &:hover {
        background-color: var(--pink);
        border: 2px solid var(--pink);
    }
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: 2%;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: 7px 10px 5px 10px;
    border-radius: 24px;
    margin-bottom: 1.5rem;
    font-size: .875rem;
}

.eyebrow-transparent {
    color: #FFF;
    border: 1px solid #FFF;
}

.eyebrow-pink {
    color: var(--black);
    border: 1px solid var(--pink);
}

/* ------------------------------------------------------------TYPOGRAPHY */

body {
    font-size: 18px;
}

h1 {
    font-family: var(--font);
    font-weight: 700;
    margin-bottom: 2rem;
    margin-top: 0;
    line-height: 1.4;
    font-size: 22px;
}

h2 {
    font-family: var(--font);
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

h3 {
    font-family: var(--titlefont);
    font-weight: 600;
    font-size: 18px;
    margin-top: 2.1rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

@media (min-width: 300px) {
    h1 {
        font-size: 24px;
    }
    h2 {
        font-size: 22px;
    }
}

@media (min-width: 400px) {
    h1 {
        font-size: 28px;
    }
    h2 {
        font-size: 24px;
    }
    h3 {
        font-size: 20px;
    }
}

@media (min-width: 500px) {
    h1 {
        font-size: 32px;
    }
    h2 {
        font-size: 26px;
    }

}

@media (min-width: 800px) {
    h1 {
        font-size: 34px;
    }
    h2 {
        font-size: 28px;
    }
    h3 {
        font-size: 22px;
    }
}



/* ----------------------------------------------------------------HEADER */

/* TOP-NAV */

.top-nav {
    padding: 0.5rem 0;
    position: relative;
    display: flex;
    justify-content: space-between;
}

.nav-logo {
    background: url(img/logo_szallasmuhely.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    width: 100px;
    height: 69px;
    display: inline-block;
}

/* main-navigation */

.main-nav {
    background-color: var(--gray);
}

.main-nav a {
    font-family: var(--font);
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
    display: block;
}

.main-nav ul {
    padding: 0 .8rem 0 .8rem;
    margin: 0;
    text-align: right;
}

.main-nav ul.sub-menu {
    display: none;
}

.main-nav li {
    list-style-type: none;
    width: 100%;
    padding: 1rem 0 1rem 0.8rem;
    border-bottom: 1px solid var(--blue);

    &:last-of-type {
        border-bottom: none;
    }
}

#nav-toggle:checked~.main-nav li.current_page_item a,
#nav-toggle:checked~.main-nav li.current-menu-item a,
#nav-toggle:checked~.main-nav li.current_page_parent a {
    opacity: .5;
}

/* -- hamburger -- */

/* checkbox nem jelenik meg */
#nav-toggle {
    display: none;
}

/* checkbox label-je a hamburger ikon */
.nav-toggle-label {
    height: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
    display: block;
    width: 30px;
    height: 3px;
    background: var(--black);
    position: relative;
}

.nav-toggle-label span::before,
.nav-toggle-label span::after {
    content: "";
    position: absolute;
}

.nav-toggle-label span::before {
    bottom: 8px;
}

.nav-toggle-label span::after {
    top: 8px;
}

/* main-nav nem latszik */
.main-nav {
    position: absolute;
    text-align: left;
    top: 100%;
    right: 0;
    width: 100%;
    transform: scale(1, 0);
    transform-origin: top;
    transition: transform 400ms ease-in-out;
    z-index: 10;
}

/* hamburger lenyitaskor animacio */
#nav-toggle:checked~.main-nav {
    transform: scale(1, 1);
}

#nav-toggle:checked~.main-nav a,
#nav-toggle:checked~.main-nav .search-form {
    opacity: 1;
    transition: opacity 250ms ease-in-out 250ms;
}

/* teljes menu latszik */

@media (min-width: 800px) {

    #nav-toggle,
    .nav-toggle-label {
        display: none;
    }

    .top-nav {
        padding: 1rem 0;
    }

    .main-nav {
        transform: none;
        position: static;
        width: auto;
        display: block;
    }

    .main-nav ul {
        display: flex;
        padding: 0;
    }

    .main-nav ul li {
        border-bottom: none;
        padding-left: 4rem;
    }

    .main-nav a {
        opacity: 1;

        &:hover {
            border-bottom: 2px solid var(--blue);
        }
    }

    #nav-toggle:checked~.main-nav li.current_page_item a,
    #nav-toggle:checked~.main-nav li.current-menu-item a,
    #nav-toggle:checked~.main-nav li.current_page_parent a {
        opacity: 1;
    }

    .main-nav li.current_page_item a,
    .main-nav li.current-menu-item a,
    .main-nav li.current_page_parent a {
        border-bottom: 2px solid var(--blue);
    }

}

/* ----------------------------------------------------------------FOOTER */

footer {
    background: var(--gray);
    color: var(--black);
    font-size: 16px;
}

footer .footer-box {
    background-color: #FFF;
    border-radius: var(--border-radius);
    padding: 1rem;
}

footer .footer-first {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-between;
}

footer .footer-first .footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 2rem;
}

footer .footer-first .footer-nav h4 {
    margin-bottom: 1rem;
}

footer .footer-first .footer-nav a {
    display: block;
    margin-bottom: .5rem;

    &:hover {
        color: var(--blue);
    }
}

footer .footer-second a {
    display: inline-block;
}

footer ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
    margin-bottom: 1rem;
}

footer .nav-logo {
    background: url(img/logo_szallasmuhely.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    width: 120px;
    height: 84px;
    display: inline-block;
}

footer p {
    margin-bottom: 0.5rem;
}

footer svg {
    width: 35px;
    height: 35px;
    margin-right: .5rem;
}

footer a.footer-menu-link {
    margin-bottom: 0.5rem;
    display: block;
}

@media (min-width: 500px) {
    footer .nav-logo {
        width: 180px;
        height: 124px;
    }
}

@media (min-width: 700px) {
    footer .footer-box {
        padding: 2rem;
    }
}

@media (min-width: 800px) {
    footer .footer-first .footer-nav {
        gap: 5rem;
    }
}

@media (min-width: 1350px) {}

footer .copyright {
    padding: 14px 0;
    font-size: 14px;
}

footer .copyright p {
    margin-bottom: 0;
}

footer .copyright a {
    &:hover {
        color: var(--blue);
    }
}

/* ---------------------------------------------------------TO-TOP BUTTON */

.to-top {
    background: var(--pink);
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    cursor: pointer;
    z-index: 10;
    border-radius: 50%;
}

.to-top::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    transform: rotate(45deg);
    top: 19px;
    left: 15px;
    border-top: 4px solid #fff;
    border-left: 4px solid #fff;
}

/* ------------------------------------------------------------FRONT PAGE */

#front-page p {
    line-height: 1.5;
}

/* hero */

.hero-bckgr {
    position: relative;
    background-color: var(--blue);
    border-radius: var(--border-radius);
    z-index: 0;

    &::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url(img/line-1.png);
        background-repeat: no-repeat;
        background-position: 60% 68%;
        background-size: 180%;
        z-index: -1;
    }
}

@media(min-width: 750px) {
    .hero-bckgr::before {
        background-position: 60% 148%;
        background-size: 169%;
    }
}

@media(min-width: 880px) {
    .hero-bckgr::before {
        background-position: 83% -39%;
        background-size: 160%;
    }
}

@media(min-width: 950px) {
    .hero-bckgr::before {
        background-position: 48% 20%;
        background-size: 140%;
    }
}

#front-hero {
    padding: 1rem 1rem 0 1rem;
    display: flex;
    flex-direction: column;
}

@media(min-width: 400px) {
    #front-hero {
        padding: 2rem 2rem 0 2rem;
    }
}

#front-hero .hero-text .eyebrow {
    margin-left: auto;
    margin-right: auto;
}

#front-hero .hero-text {
    margin-bottom: 2rem;
    text-align: center;
}

#front-hero .hero-text h1 {
    color: #FFF;
    margin-bottom: 2rem;
}

#front-hero .hero-text span {
    background-color: var(--pink);
}

#front-hero .hero-text .hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}

#front-hero .hero-photo {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

#front-hero .hero-photo .orsi-card {
    position: absolute;
    background-color: #FFF;
    box-shadow: var(--box-shadow-blue);
    border-radius: var(--border-radius-small);
    padding: .7rem 3rem;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    bottom: -40px;
    text-wrap: nowrap;
}

#front-hero .hero-photo .orsi-card p:first-of-type {
    font-weight: 500;
    margin-bottom: .5rem;
}

#front-hero .hero-photo .orsi-card p:nth-of-type(2) {
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 2%;
}

@media(min-width:950px) {
    #front-hero {
        flex-direction: row;
    }

    #front-hero .hero-text {
        order: 2;
        width: 60%;
        text-align: left;
        align-self: center;
    }

    #front-hero .hero-photo {
        order: 1;
        width: 40%;
    }

    #front-hero .hero-text .eyebrow {
        margin-left: 0;
    }

    #front-hero .hero-text .hero-buttons {
        justify-content: flex-start;
    }
}

/* front-2 */

#front-2 {
    margin-top: 6rem;
}

#front-2 .front-2-text {
    max-width: 470px;
    margin-left: auto;
    margin-right: auto;
}

#front-2 h2 {
    text-align: center;
    margin-bottom: 3rem;
}

#front-2 span {
    background-color: var(--pink);
    color: #FFF;
}

#front-2 img {
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: var(--border-radius);
}

#front-2 ul {
    list-style: none;
    padding: 0;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
}

#front-2 ul li {
    position: relative;
    padding: 0 0 1rem 40px;

    &::before {
        content: "";
        position: absolute;
        background-image: url(img/arrow-icon.png);
        left: 0;
        width: 22px;
        height: 22px;
        vertical-align: middle;
    }
}

#front-2 .front-2-photo {
    display: flex;
    justify-content: center;
}

@media(min-width: 950px) {
    #front-2 {
        display: flex;
        gap: 2rem;
        align-items: center;
        justify-content: space-between;
    }

    #front-2 .front-2-text {
        margin-left: 0;
    }

    #front-2 h2 {
        text-align: left;
    }

    #front-2 ul {
        margin-left: 0;
        margin-bottom: 0;
    }

    #front-2 ul li:last-of-type {
        padding-bottom: 0;
    }

    #front-2>div {
        width: 50%
    }
}

/* front-services */

.services-bckgr {
    background-color: var(--blue);
    border-radius: var(--border-radius);
    position: relative;
    z-index: 0;

    &::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url(img/line-2.png);
        background-repeat: no-repeat;
        background-position: 8% -3%;
        background-size: 100%;
        z-index: -1;
        border-radius: var(--border-radius);
    }
}

@media(min-width: 700px) {
    .services-bckgr::before {
        background-position: 8% -5%;
    }
}

@media(min-width: 850px) {
    .services-bckgr::before {
        background-position: -660% 42%;
        background-size: 92%;
    }
}

#front-services {
    margin-top: 5rem;
    color: #FFF;
    padding: 1rem;
}

@media(min-width: 550px) {
    #front-services {
        padding: 2rem;
    }
}

#szolgaltatasok,
#kuldhetem-a-reszleteket {
    scroll-margin-top: 100px;
}

#front-services h3 {
    margin-top: 0;
}

#front-services .service-card {
    display: flex;
    gap: 1.5rem;
    padding: 2rem 0;
    border-bottom: 1px solid #FFF;
    flex-direction: column;
}

@media(min-width: 400px) {
    #front-services .service-card {
        flex-direction: row;
    }
}

#front-services .service-card:last-of-type {
    border-bottom: none;
}

#front-services .service-card div:first-of-type {
    min-width: 45px;
}

#front-services .service-card p {
    margin-bottom: 1.5rem;
}

#front-services .service-ikon {
    width: 45px;
    height: 45px;
    -webkit-filter: drop-shadow(4px 4px 20px rgba(0, 0, 0, .25));
    filter: drop-shadow(4px 4px 20px rgba(0, 0, 0, .25));
}

@media(min-width: 850px) {
    #front-services {
        display: flex;
        gap: 2rem;
        padding: 3rem;
    }

    #front-services .service-card {
        padding: 3rem 0;
    }

    #front-services .service-card:first-of-type {
        padding-top: 0;
    }
}

/* front-about */

#front-about {
    margin-top: 4rem;
}

#front-about h2 {
    text-align: center;
}

#front-about p {
    margin-bottom: 1rem;
}

#front-about a {
    margin-top: 2rem;
    margin-bottom: 3rem;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

@media(min-width: 600px) {
    #front-about {
        display: flex;
        gap: 2rem;
        align-items: center;
    }

    #front-about h2 {
        text-align: left;
    }

    #front-about a {
        margin-left: 0;
        margin-bottom: 0;
    }

    #front-about .about-text {
        width: 60%;
    }

    #front-about .about-photo {
        width: 40%;
        max-width: 380px;
    }
}

/* front-3 */

#front-3 {
    background-color: #FFF;
    border-radius: var(--border-radius);
    position: relative;
    margin-top: 4rem;
    padding: 2rem 1rem 6rem 1rem;
    box-shadow: var(--box-shadow-blue);

    &::before {
        position: absolute;
        content: "";
        background-image: url(img/dqm.png);
        bottom: -47px;
        left: 30px;
        width: 120px;
        height: 87px;
    }
}

@media(min-width: 550px) {
    #front-3 {
        padding: 2rem 2rem 4rem 2rem;
    }
}

#front-3 .cr-text {
    margin-bottom: 1.5rem;
}

#front-3 .cr-name {
    font-weight: 500;
}

#front-3 .cr-comp {
    text-transform: uppercase;
    letter-spacing: 2%;
    font-size: .875rem;
    color: var(--blue);
    font-weight: 500;
}

@media(min-width: 780px) {
    #front-3 {
        display: flex;
        gap: 2rem;
        padding: 2rem 2rem 3rem 2rem;
    }
}

@media(min-width: 900px) {
    #front-3 {
        gap: 3rem;
    }

    #front-3 h2 {
        min-width: 200px;
    }
}

/* front-4 */

#front-4 {
    margin-top: 6rem;
}

#front-4 .eyebrow {
    margin-left: auto;
    margin-right: auto;
}

#front-4 h2 {
    margin-bottom: 3rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* front-5 */

.partnerek {
    margin-top: 2rem;
    margin-bottom: 3rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 3rem;
    justify-content: center;
}

.partnerek .partner p {
    margin-bottom: 0;
    text-align: center;
}

.partnerek .partner-neve {
    font-weight: 600;
    text-transform: uppercase;
    position: relative;

    &::after {
        content: "|";
        color: var(--pink);
    }
}

/* front-why */

.why-bckgr {
    background-color: var(--blue);
    border-radius: var(--border-radius);
    position: relative;
    z-index: 0;

    &::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url(img/line-3.png);
        background-repeat: no-repeat;
        background-position: -491% 2%;
        background-size: 110%;
        z-index: -1;
        border-radius: var(--border-radius);
    }
}

@media(min-width: 600px) {
    .why-bckgr::before {
        background-position: 146% 2%;
        background-size: 67%;
    }
}

@media(min-width: 600px) {
    .why-bckgr::before {}
}

@media(min-width: 950px) {
    .why-bckgr::before {}
}

#front-why {
    margin-top: 5rem;
    color: #FFF;
    padding: 2rem 1rem;
}

@media(min-width: 550px) {
    #front-why {
        padding: 2rem;
    }
}

@media(min-width: 760px) {
    #front-why {
        padding: 3rem;
    }
}

#front-why p {
    margin-bottom: 2rem;
    max-width: 600px;
}

/* orsi-data */

#orsi-data {
    margin-top: 5rem;
    position: relative;
}

#orsi-data p {
    text-wrap: nowrap;
    background-color: #FFF;
    padding: 1rem 2rem;
    border-radius: var(--border-radius-small);
    box-shadow: var(--box-shadow-blue);
}

#orsi-data p span {
    display: block;
    font-size: 3rem;
    font-weight: 700;
}

#orsi-data .data-text {
    margin-top: -2rem;
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    text-align: center;
}

/* front-5 */

#front-5 {
    margin-top: 5rem;
}

/* front-blog */

#front-blog {
    margin-top: 5rem;
}

#front-blog h2 {
    text-align: center;
}

/* blogcikkek listázása */

.posts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 3rem;
}

@media (min-width: 600px) {
    .posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1000px) {
    .posts-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

#front-blog .button {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* konzultacio-idopont */

#konzultacio-idopont {
    margin-top: 5rem;
    background-color: var(--blue);
    color: #FFF;
    border-radius: var(--border-radius);
    padding: 2rem 1rem;
    text-align: center;
}

@media(min-width: 550px) {
    #konzultacio-idopont {
        padding: 2rem;
    }
}

@media(min-width: 760px) {
    #konzultacio-idopont {
        padding: 3rem;
    }
}

#konzultacio-idopont .eyebrow {
    margin-left: auto;
    margin-right: auto;
}

#konzultacio-idopont p:not(.eyebrow) {
    margin-bottom: 1.5rem;
    font-weight: 500;
    max-width: 580px;
}

#konzultacio-idopont p span {
    background-color: var(--pink);
}

#konzultacio-idopont .button {
    margin-bottom: 2rem;
}

#konzultacio-idopont .konzi-photo {
    display: flex;
    justify-content: center;
}

#konzultacio-idopont .konzi-photo img {
    -o-object-fit: contain;
    object-fit: contain;
}

@media(min-width: 700px) {
    #konzultacio-idopont {
        display: flex;
        gap: 1.5rem;
        text-align: left;
        align-items: center;
        justify-content: space-between;
    }

    #konzultacio-idopont .eyebrow {
        margin-left: 0;
    }

    #konzultacio-idopont .konzi-text {
        max-width: 650px;
    }

    #konzultacio-idopont .konzi-photo {
        max-width: 310px;
    }

    #konzultacio-idopont .button {
        margin-bottom: 0;
    }
}

/* front-6 */

#front-6 {
    margin-top: 5rem;
}

#front-6 .eyebrow {
    margin-left: auto;
    margin-right: auto;
}

#front-6 h2 {
    text-align: center;
}

.front-6-text {
    margin-bottom: 1.5rem;
}

.front-6-rev {
    padding-top: 3rem;
    position: relative;

    &::before {
        position: absolute;
        content: "";
        background-image: url(img/dqm.png);
        width: 40px;
        height: 29px;
        background-repeat: no-repeat;
        background-size: contain;
        top: 0;
    }
}

.front-6-rev:first-of-type {
    padding-bottom: 4rem;
}

.front-6-text-name {
    font-weight: 500;
}

.front-6-text-comp {
    text-transform: uppercase;
    letter-spacing: 2%;
    font-size: .875rem;
    color: var(--blue);
    font-weight: 500;
}

@media(min-width: 700px) {
    .front-6-texts {
        display: flex;
        gap: 2rem;
        justify-content: space-between;
        align-items: flex-start;
    }

    #front-6 .front-6-rev {
        width: 48%;
        padding-bottom: 0;
        max-width: 470px;
    }
}

/* ----------------------------------------------------------------SINGLE */

.single-flex {
    display: flex;
    gap: 2rem;
    flex-direction: column;
    justify-content: space-between;
}

@media(min-width: 1000px) {
    .single-flex {
        flex-direction: row;
    }

    .post-single {
        flex: 2;
    }

    aside {
        flex: 1;
    }
}

.post-single .blog-card-category {
    color: var(--blue);
    text-transform: uppercase;
    font-size: .875rem;

}

.post-single .post-thumb img {
    border-radius: var(--border-radius);
    margin-bottom: 2rem;
    -o-object-fit: contain;
    object-fit: contain;
    height: 100%;
    width: 100%;
}

.single-blog-cards {
    margin-top: 3rem;
}

.erdekelhet {
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 1px solid var(--blue);
}

.erdekelhet .eyebrow {
    margin-bottom: .5rem;
}

/* ------------------------------------------------------------------ASIDE */

aside .services-box {
    background-color: #FFF;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-blue);
    padding: 1rem;
    margin-bottom: 2rem;
}

@media(min-width: 550px) {
    aside .services-box {
        padding: 2rem;
    }
}

aside .services-box h4 {
    text-transform: uppercase;
    letter-spacing: 2%;
    font-weight: 500;
    padding-bottom: 1rem;
}

aside .services-box .service-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    border-top: 1px solid rgba(0, 19, 22, .1);
    padding: .5rem 0;

    &:hover {
        background-color: var(--gray);
    }
}

aside .konzi-box-bckgr {
    background-color: var(--blue);
    color: #FFF;
    border-radius: var(--border-radius);
    position: relative;
    z-index: 0;
    -webkit-filter: drop-shadow(4px 4px 20px rgba(0, 0, 0, .25));
    filter: drop-shadow(4px 4px 20px rgba(0, 0, 0, .25));

    &:before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url(img/line-4.png);
        background-repeat: no-repeat;
        background-position: 170% 146%;
        background-size: 80%;
        z-index: -1;
    }
}

@media(min-width: 380px) {
    aside .konzi-box-bckgr::before {
        background-position: 170% 200%;
    }
}

@media(min-width: 420px) {
    aside .konzi-box-bckgr::before {
        background-position: 170% 260%;
    }
}

@media(min-width: 540px) {
    aside .konzi-box-bckgr::before {
        background-position: 170% 450%;
    }
}

@media(min-width: 540px) {
    aside .konzi-box-bckgr::before {
        background-position: 170% 234%;
    }
}

@media(min-width: 570px) {
    aside .konzi-box-bckgr::before {
        background-position: 167% 358%;
    }
}

@media(min-width: 627px) {
    aside .konzi-box-bckgr::before {
        background-position: 341% -308%;
        background-size: 90%;
    }
}

@media(min-width: 720px) {
    aside .konzi-box-bckgr::before {
        background-position: 341% -151%;
    }
}

@media(min-width: 820px) {
    aside .konzi-box-bckgr::before {
        background-position: 281% -61%;
    }
}

@media(min-width: 1000px) {
    aside .konzi-box-bckgr::before {
        background-position: 414% 134%;
    }
}

@media(min-width: 1100px) {
    aside .konzi-box-bckgr::before {
        background-position: 414% 167%;
    }
}

aside .konzi-box {
    padding: 1rem 1rem 3rem 1rem;
}

@media(min-width: 550px) {
    aside .konzi-box {
        padding: 2rem 2rem 4rem 2rem;
    }
}

aside .konzi-box h4 {
    text-transform: uppercase;
    letter-spacing: 2%;
    font-weight: 500;
    padding-bottom: 1rem;
    border-bottom: 1px solid #FFF;
    margin-bottom: 1rem;
}

aside .konzi-box p {
    max-width: 600px;
    margin-bottom: 2rem;
}

aside .cat-box {
    margin-top: 2rem;
}

aside .cat-box ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    row-gap: .8rem;
    -moz-column-gap: .8rem;
    column-gap: .8rem;
}

aside .cat-box ul a {
    text-transform: uppercase;
    letter-spacing: 2%;
    font-size: .8rem;
    border: 1px solid var(--black);
    border-radius: 20px;
    padding: .3rem .8rem .2rem .8rem;

    &:hover {
        border-color: var(--pink);
    }
}

/* -----------------------------------------------TEXT CONTENT FORMATTING */

.content {
    max-width: 700px;
}

.content p {
    line-height: 1.6;
    margin-bottom: 1.8rem;
}

.content a {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
    -webkit-text-decoration-color: var(--blue);
    text-decoration-color: var(--blue);
    overflow-wrap: anywhere;
}

.content ul {
    padding: 0;
    margin-bottom: 1.8rem;
    padding-left: 0;
}

.content ol {
    padding: 0;
    margin-bottom: 1.8rem;
    padding-left: 1rem;
}

.content ul li {
    list-style-type: none;
    margin-bottom: 0.8rem;
    position: relative;
    padding-left: 1rem;

    &::before {
        position: absolute;
        content: "";
        background-color: var(--blue);
        width: 8px;
        height: 8px;
        left: 0;
        border-radius: 50%;
        top: 12px;
        transform: translateY(-50%);
    }
}

.content ol li {
    margin-bottom: 1.6rem;
}

.wp-block-button {
    margin-bottom: 1.8rem !important;
    background-color: var(--blue);
    border: 1px solid var(--blue);
    border-radius: 30px;

    &:hover {
        background-color: transparent;
    }
}

.wp-block-button .wp-block-button__link {
    display: inline-block;
    background-color: var(--darkblue);
    padding: 0.8rem 1rem;
    text-align: center;
    color: #FFF;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;

    &:hover {
        color: var(--blue);
    }
}

.content figure.wp-block-table {
    margin-bottom: 1.5rem;
}

.content figure.wp-block-table figcaption {
    margin-top: 0.5rem;
}

.content blockquote {
    padding: 1rem 0 1.1rem 2rem;
    position: relative;
    font-size: 1.25rem;
    margin-bottom: 1.8rem;

    &::before {
        position: absolute;
        content: "";
        left: 0;
        top: 0;
        bottom: 0;
        width: 10px;
        background: #006474;
        background: linear-gradient(180deg, rgba(0, 100, 116, 1) 0%, rgba(215, 36, 111, 1) 100%);
        border-radius: var(--border-radius-small);
    }
}

.content blockquote p:last-of-type {
    margin-bottom: 0;
}

details {
    margin-bottom: 1.8rem;
}

details summary {
    font-weight: 600;
    margin-bottom: 1rem;
}

summary::marker {
    color: var(--blue);
}

summary::-webkit-details-marker {
    color: var(--blue);
}

/* ----------------------------------------------------------------IMAGES */

.content .wp-block-media-text {
    row-gap: 2rem;
    -moz-column-gap: 1rem;
    column-gap: 1rem;
}

.content .wp-block-media-text .wp-block-media-text__content {
    padding-left: 0;
    padding-right: 0;
}

.content .wp-block-media-text .wp-block-media-text__content p.wp-block-paragraph:last-of-type {
    margin-bottom: 0;
}

figure {
    width: 100%;
}

figure.wp-block-image {
    border-radius: var(--border-radius);
    overflow: hidden;
}

figure.aligncenter {
    text-align: center;
}

figure.aligncenter>* {
    margin: 0 auto;
}

figure img {
    height: auto;
    border-radius: var(--border-radius);
    -o-object-fit: contain;
    object-fit: contain;
}

figcaption {
    font-size: 1rem;
}

figure.aligncenter figcaption {
    max-width: 600px;
    margin-top: 1rem;
}

figure.aligncenter figcaption .blocks-gallery-caption {
    margin-top: 0;
}

.wp-block-image,
.wp-block-gallery {
    margin-top: 1.8rem;
    margin-bottom: 1.8rem;
}

.wp-block-gallery ul li {
    padding: 0;

    &::before {
        display: none;
    }
}

.wp-block-media-text {
    margin-bottom: 1.8rem;
}

/* --------------------------------------------------------- HOME, ARCHIVE */

.home-blog-title-bckgr {
    position: relative;
    background-color: var(--blue);
    border-radius: var(--border-radius);
    z-index: 0;

    &::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url(img/line-5.png);
        background-repeat: no-repeat;
        background-position: 60% 68%;
        background-size: 180%;
        z-index: -1;
    }
}

@media(min-width: 800px) {
    .home-blog-title-bckgr::before {
        background-size: 110%;
    }
}

.home-blog-title {
    padding: 2rem 1rem;
    margin-bottom: 3rem;
    text-align: center;
    color: #FFF;
}

@media(min-width: 700px) {
    .home-blog-title {
        padding: 4rem 0;
    }
}

.home-blog-title .blog-link {
    text-transform: uppercase;
    font-size: .875rem;

    &:hover {
        color: var(--black);
    }
}

.home-blog-title h1 {
    color: #FFF;
    text-align: center;
    margin: 0;

    &::first-letter {
        text-transform: uppercase;
    }
}

.home-blog-page .home-blog-title ul {
    padding: 0;
    list-style: none;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

.home-blog-page .home-blog-title ul a {
    background-color: #FFF;
    color: var(--blue);
    padding: .3rem .8rem .2rem .8rem;
    border: 1px solid #FFF;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 2%;

    &:hover {
        color: #FFF;
        background-color: transparent;
    }
}

.home-blog-page .home-blog-title .archive-description {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
}

/* ---------------------------------------------TEMPLATE PARTS: BLOG-LOOP */

.blog-card {
    background-color: #FFF;
    padding: 1rem;
    box-shadow: var(--box-shadow-blue);
    border-radius: var(--border-radius-small);
}

.blog-card img {
    -o-object-fit: contain;
    object-fit: contain;
    height: 100%;
    border-radius: var(--border-radius-small);
}

.blog-card .blog-card-category {
    margin-top: 1rem;
}

.blog-card .blog-card-cat {

    display: inline-block;
    font-size: .875rem;
    color: var(--blue);
    text-transform: uppercase;
}

.blog-card h3 {
    margin-top: 1rem;
    font-size: 18px;
    margin-bottom: 0;
    color: var(--black);

    &:hover {
        color: var(--blue);
    }
}

/* -------------------------------------------------------------PAGINATION */

.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    -moz-column-gap: 1.5rem;
    column-gap: 1.5rem;
    row-gap: .5rem;
    margin-top: 1rem;
}

.pagination>* {
    padding: 2px 4px;
}

.pagination .current {
    border-bottom: 1px solid var(--pink);
}

/* ------------------------------------------------------------------PAGE */
/* no sidebar */

.page .featured-image {
    border-radius: var(--border-radius);
}

.page .featured-image img {
    border-radius: var(--border-radius);
    -o-object-fit: contain;
    object-fit: contain;
    height: 100%;
    margin-bottom: 2rem;
}

.page .content {
    margin-left: auto;
    margin-right: auto;
}

/* -----------------------------------------------------------PAGE-MENTOR */

.page-mentor .home-blog-title {
    margin-left: auto;
    margin-right: auto;
    max-width: 700px;
}

.page-mentor .home-blog-title h1 {
    margin-bottom: 2rem;
}

.page-mentor .home-blog-title p {
    font-size: 1.375rem;
}

.page-mentor .home-blog-title span {
    background-color: var(--pink);
}

.page-mentor p span {
    font-weight: 700;
}

.custpage-content {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.page-mentor p {
    line-height: 1.6;
    margin-bottom: 1.8rem;
}

.page-mentor .custpage-content ul {
    list-style: none;
    padding: 0;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
}

.page-mentor .custpage-content ul li {
    position: relative;
    padding: 0 0 1rem 40px;

    &::before {
        content: "";
        position: absolute;
        background-image: url(img/arrow-icon.png);
        background-color: #FFF;
        border-radius: 0;
        left: 0;
        width: 22px;
        height: 22px;
        top: unset;
        transform: none;
    }
}

.page-mentor .custpage-content .button {
    text-decoration: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

@media(min-width: 500px) {
    .page-mentor .custpage-content .button {
        margin-left: 0;
    }
}

@media(min-width: 600px) {
    .page-mentor .elorebbleszel-bckgr {
        position: relative;
        background-color: var(--blue);
        border-radius: var(--border-radius);
        z-index: 0;

        &::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: url(img/line-6.png);
            background-repeat: no-repeat;
            background-position: -24% 139%;
            background-size: 61%;
        }
    }
}



@media(min-width: 1000px) {
    .page-mentor .elorebbleszel-bckgr::before {
        background-position: -12% 160%;
        background-size: 54%;
    }
}

.page-mentor .elorebbleszel {
    background-color: #FFF;
    box-shadow: var(--box-shadow-blue);
    border-radius: var(--border-radius);
    padding: 1rem 1rem 2rem 1rem;
    margin-top: 5rem;
}

@media(min-width: 550px) {
    .page-mentor .elorebbleszel {
        padding: 2rem 2rem 4rem 2rem;
    }
}

@media(min-width: 700px) {
    .page-mentor .elorebbleszel {
        display: flex;
        gap: 3rem;
        justify-content: space-between;
    }

    .page-mentor .elorebbleszel h2 {
        max-width: 400px;
    }

    .page-mentor .elorebbleszel>div {
        max-width: 50%;
    }

    .page-mentor .elorebbleszel .elorebb-list:first-of-type h3 {
        margin-top: 0;
    }
}

.page-mentor .elorebbleszel .elorebb-list {
    padding-left: 3rem;
    position: relative;

    &::before {
        content: "";
        background-image: url(img/check-rounded-icon.png);
        width: 25px;
        height: 25px;
        left: 0;
        position: absolute;
        top: 2px;
    }
}

.page-mentor #front-6 {
    margin-bottom: 5rem;
}

.page-mentor .kuldhetem {
    background-color: #FFF;
    box-shadow: var(--box-shadow-blue);
    border-radius: var(--border-radius);
    padding: 1rem 1rem 2rem 1rem;
    margin-top: 5rem;
    margin-bottom: 5rem;
}

.page-mentor .kuldhetem-img {
    max-width: 275px;
    margin-left: auto;
    margin-right: auto;
}

.page-mentor .kuldhetem-text {
    max-width: 600px;
}

@media(min-width: 550px) {
    .page-mentor .kuldhetem {
        padding: 2rem 2rem 4rem 2rem;
    }
}

@media(min-width: 700px) {
    .page-mentor .kuldhetem {
        display: flex;
        gap: 2rem;
        justify-content: space-between;
        align-items: center;
    }
}

.page-mentor .tema-list {
    padding-left: 3rem;
    position: relative;

    &::before {
        content: "";
        background-image: url(img/check-rounded-icon.png);
        width: 25px;
        height: 25px;
        left: 0;
        position: absolute;
        top: 2px;
    }
}

.page-mentor .tema-list h3 {
    margin-bottom: 0;
}

.page-mentor .mentor-price {
    background-color: var(--blue);
    border-radius: var(--border-radius);
    color: #FFF;
    padding: 1rem 1rem 3rem 1rem;
    margin: 3rem 0;
}

@media(min-width: 550px) {
    .page-mentor .mentor-price {
        padding: 2rem 2rem 4rem 2rem;
    }
}

.page-mentor .mentor-price span {
    font-weight: 700;
}

.page-mentor .mentor-price .ml-form-embedBody {
    padding: 0 !important;
}

@media(min-width: 800px) {
    .page-mentor .mentor-price {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .page-mentor .mentor-price>div:first-child p:last-of-type {
        margin-bottom: 0;
    }

    .page-mentor .mentor-price>div {
        width: 48%;
    }
}

.page-mentor .mentor-konzultacio-img {
    padding: 1rem;
    max-width: 275px;
    margin-left: auto;
    margin-right: auto;
}

.page-mentor .mentor-konzultacio-text .button {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

@media(min-width: 700px) {
    .page-mentor .mentor-konzultacio {
        display: flex;
        gap: 2rem;
        justify-content: space-between;
        align-items: center;
    }

    .page-mentor .mentor-konzultacio-img {
        padding: 0;
    }

    .page-mentor .mentor-konzultacio-text .button {
        margin-left: 0;
    }
}

/* ------------------------------------------------------------PAGE-ROLAM */

.page-rolam .home-blog-title {
    margin-left: auto;
    margin-right: auto;
    max-width: 710px;
}

.page-rolam .home-blog-title h1 {
    margin-bottom: 2rem;
}

.page-rolam .home-blog-title p {
    margin-bottom: 0;
}


.page-rolam .home-blog-title .rolam-subtitle {
    font-size: .875rem;
    text-transform: uppercase;
    letter-spacing: 2%;
    margin-bottom: 0;
}

.page-rolam .home-blog-title p {
    font-size: 1.375rem;
}

.custpage-content {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.page-rolam p {
    line-height: 1.6;
    margin-bottom: 1.8rem;
}

.page-rolam .rolam-elakadasok {
    margin-bottom: 3rem;
    margin-top: 4rem;
}

.page-rolam .rolam-elakadasok h3 {
    padding-bottom: .8rem;
    margin-top: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .5);
}

.page-rolam .rolam-elakadasok ul {
    list-style: none;
    padding: 0;
    margin-bottom: 2rem;
}

.page-rolam .rolam-elakadasok ul li {
    position: relative;
    padding: 0 0 1rem 40px;

    &::before {
        content: "";
        position: absolute;
        background-image: url(img/arrow-icon.png);
        background-color: #FFF;
        border-radius: 0;
        left: 0;
        width: 22px;
        height: 22px;
        top: unset;
        transform: none;
    }
}

@media(min-width: 700px) {
    .page-rolam .rolam-elakadasok {
        display: flex;
        gap: 2rem;
    }

    .page-rolam .rolam-elakadasok-title {
        max-width: 350px;
    }
}

.page-rolam .bemutatkozas {
    background-color: #FFF;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-blue);
    padding: 1rem 1rem 2rem 1rem;
    margin-bottom: 5rem;
}

@media(min-width: 550px) {
    .page-rolam .bemutatkozas {
        padding: 2rem 2rem 3rem 2rem;
    }
}

.page-rolam .bemutatkozas .data-text {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    text-align: center;
}

.page-rolam .bemutatkozas .data-text p span {
    display: block;
    font-size: 3,125rem;
    font-weight: 700;
}

@media(min-width: 875px) {
    .page-rolam .bemutatkozas {
        display: flex;
        gap: 1.5rem;
        align-items: center;
    }

    .page-rolam .bemutatkozas .data-text {
        justify-content: left;
    }

    .page-rolam .bemutatkozas-text {
        max-width: 550px;
    }

    .page-rolam .bemutatkozas-img {
        align-self: flex-start;
    }
}

.page-rolam .rolam-services {
    text-align: center;
    margin-bottom: 5rem;
}

.page-rolam .rolam-services .eyebrow {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
}

.page-rolam .rolam-services h2 {
    margin-top: .5rem;
    margin-bottom: .5rem;
}

.page-rolam .rolam-services .rolam-services-box {
    display: flex;
    gap: 1rem;
    flex-direction: column;
    align-items: center;
    margin-top: 3rem;
}

.page-rolam .rolam-services .rolam-services-card {
    border-radius: var(--border-radius);
    padding: 1rem 1rem 2rem 1rem;
    text-align: left;
    box-shadow: var(--box-shadow-blue);
}

.page-rolam .rolam-services .rolam-services-card h3 {
    margin-top: 1rem;
}

.page-rolam .rolam-services .rolam-services-card img {
    -webkit-filter: drop-shadow(4px 4px 20px rgba(0, 0, 0, .25));
    filter: drop-shadow(4px 4px 20px rgba(0, 0, 0, .25));
}

.page-rolam .rolam-services .rolam-services-card.card-1 {
    background-color: var(--blue);
    color: #FFF;
}

.page-rolam .rolam-services .rolam-services-card.card-2 {
    background-color: #FFF;
}

@media(min-width: 600px) {
    .page-rolam .rolam-services .rolam-services-box {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
        justify-content: space-between;
        row-gap: 2rem;
    }

    .page-rolam .rolam-services .rolam-services-card {
        width: 48%;
    }

    .page-rolam .rolam-services .rolam-services-card:nth-of-type(3) {
        order: 4;
    }
}

@media(min-width: 1000px) {
    .page-rolam .rolam-services .rolam-services-box {
        -moz-column-gap: .5rem;
        column-gap: .5rem;
    }

    .page-rolam .rolam-services .rolam-services-card {
        width: 24%;
    }

    .page-rolam .rolam-services .rolam-services-card:nth-of-type(3) {
        order: unset;
    }
}

.page-rolam .rolam-hiszek {
    background-color: #FFF;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-blue);
    padding: 3rem 1rem;
    text-align: center;
    margin-top: 3rem;
    margin-bottom: 5rem;
}

.page-rolam .rolam-hiszek p {
    margin: 0 auto 0 auto;
    max-width: 900px;
    font-size: 1.5rem;
    font-weight: 700;
}

.page-rolam .rolam-miert>div {
    padding-left: 3rem;
    position: relative;

    &::before {
        content: "";
        background-image: url(img/check-rounded-icon.png);
        width: 25px;
        height: 25px;
        left: 0;
        position: absolute;
        top: 2px;
    }
}

.page-rolam .rolam-miert h3 {
    margin-bottom: 1rem;
}

.page-rolam .rolam-elakadtal {
    background-color: var(--blue);
    border-radius: var(--border-radius);
    padding: 1rem 1rem 2rem 1rem;
    margin-top: 3rem;
    margin-bottom: 5rem;
    color: #FFF;
    text-align: center;
}

@media(min-width: 550px) {
    .page-rolam .rolam-elakadtal {
        padding: 2rem 2rem 3rem 2rem;
    }
}

.page-rolam .rolam-elakadtal h2 {
    margin-top: 0;
}

.page-rolam .rolam-elakadtal .eyebrow {
    margin-bottom: 1rem;
    margin-left: auto;
    margin-right: auto;
}

.page-rolam .rolam-elakadtal .rolam-elakadtal-img {
    max-width: 275px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
}

@media(min-width: 700px) {
    .page-rolam .rolam-elakadtal {
        display: flex;
        gap: 2rem;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }

    .page-rolam .rolam-elakadtal .eyebrow {
        margin-left: 0;
    }

    .page-rolam .rolam-elakadtal .rolam-elakadtal-img {
        margin-top: 0;
    }

    .page-rolam .rolam-elakadtal .rolam-elakadtal-text {
        max-width: 600px;
    }
}

.page-rolam .rolam-bcs {
    margin-top: 3rem;
    margin-bottom: 5rem;
    text-align: center;
}

.page-rolam .rolam-bcs .rolam-bcs-img {
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

@media(min-width: 700px) {
    .page-rolam .rolam-bcs {
        display: flex;
        gap: 2rem;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }

    .page-rolam .rolam-bcs .rolam-bcs-img {
        margin-top: 0;
    }

    .page-rolam .rolam-bcs .rolam-bcs-text {
        max-width: 750px;
    }

    .page-rolam .rolam-bcs .rolam-bcs-img {
        margin-bottom: 0;
        margin-left: 0;
    }
}

.page-rolam .rolam-ingyenes {
    background-color: var(--blue);
    border-radius: var(--border-radius);
    padding: 1rem 1rem 2rem 1rem;
    margin-top: 5rem;
    color: #FFF;
    text-align: center;
}

@media(min-width: 550px) {
    .page-rolam .rolam-ingyenes {
        padding: 2rem 2rem 3rem 2rem;
    }
}

.page-rolam .rolam-ingyenes h2 {
    margin-top: 0;
}

.page-rolam .rolam-ingyenes .rolam-ingyenes-img {
    max-width: 275px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
}

@media(min-width: 700px) {
    .page-rolam .rolam-ingyenes {
        display: flex;
        gap: 2rem;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }

    .page-rolam .rolam-ingyenes .rolam-ingyenes-img {
        margin-bottom: 0;
    }

    .page-rolam .rolam-ingyenes .rolam-ingyenes-text {
        max-width: 600px;
    }
}

/* ----------------------------------------------KAPCSOLATFELVÉTELI ŰRLAP */

.wpcf7 {
    background-color: var(--blue);
    border-radius: var(--border-radius);
    padding: 1rem 1rem 2rem 1rem;
    margin-top: 5rem;
    color: #FFF;
}

@media(min-width: 550px) {
    .wpcf7 {
        padding: 2rem;
    }
}

.wpcf7 input:not(.wpcf7 .wpcf7-acceptance input),
.wpcf7 select,
.wpcf7 textarea {
    width: 100%;
    padding: .8rem;
    border-radius: var(--border-radius-small);
    border: none;
}

.wpcf7 a {
    text-decoration: underline;
}

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

.wpcf7 form .wpcf7-not-valid-tip {
    color: #FFF;
    background-color: red;
    margin-top: .5rem;
    padding-left: .5rem;
}

.wpcf7 form .wpcf7-submit {
    background-color: #FFF;
    color: var(--pink);
    border: 2px solid #FFF;
    padding: 0.7rem 1.8rem;
    text-align: center;
    font-weight: 700;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    border-radius: 30px;
    box-shadow: var(--box-shadow-black);

    &:hover {
        color: var(--blue);
    }
}

.wpcf7 form .wpcf7-spinner {
    display: none;
}

.wpcf7 form .wpcf7-response-output {
    padding: .5rem;
    border-radius: var(--border-radius-small);
    margin: 1rem 0 0 0;
}

/* -------------------------------------------------------------------404 */

.page-404 {
    text-align: center;
}

.page-404 img {
    border-radius: var(--border-radius);
    margin: 2rem 0;
}

.page-404 a {
    margin: 0 1rem 1rem 0;
}

/* -------------------------------------------------------------RECAPTCHA */

.grecaptcha-badge {
    visibility: hidden;
}