/*Theme name: Canga-Dent */

/* basic formázások */

/*
világos gradient:
background: #D4F4F3;
background: linear-gradient(90deg, rgba(212, 244, 243, 1) 0%, rgba(187, 222, 255, 1) 100%);

sötét gradient:
background: #202141;
background: linear-gradient(90deg, rgba(32, 33, 65, 1) 0%, rgba(47, 93, 153, 1) 100%);

arany gradient:
background: #E8C594;
background: linear-gradient(45deg, rgba(232, 197, 148, 1) 0%, rgba(240, 214, 178, 1) 20%, rgba(239, 226, 209, 1) 60%, rgba(232, 197, 148, 1) 100%);


nagyonsötétkék
#2A1773

sötétkék
#023980

világoskék lilás
#BBDEFF

világoskék zöldes
#D4F4F3
*/

.google-sans-flex-<uniquifier > {
    font-family: "Google Sans Flex", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
    font-variation-settings:
        "slnt" 0,
        "wdth" 100,
        "GRAD" 0,
        "ROND" 0;
}

.barlow-thin {
    font-family: "Barlow", sans-serif;
    font-weight: 100;
    font-style: normal;
}

.barlow-extralight {
    font-family: "Barlow", sans-serif;
    font-weight: 200;
    font-style: normal;
}

.barlow-light {
    font-family: "Barlow", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.barlow-regular {
    font-family: "Barlow", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.barlow-medium {
    font-family: "Barlow", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.barlow-semibold {
    font-family: "Barlow", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.barlow-bold {
    font-family: "Barlow", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.barlow-extrabold {
    font-family: "Barlow", sans-serif;
    font-weight: 800;
    font-style: normal;
}

.barlow-black {
    font-family: "Barlow", sans-serif;
    font-weight: 900;
    font-style: normal;
}

.barlow-thin-italic {
    font-family: "Barlow", sans-serif;
    font-weight: 100;
    font-style: italic;
}

.barlow-extralight-italic {
    font-family: "Barlow", sans-serif;
    font-weight: 200;
    font-style: italic;
}

.barlow-light-italic {
    font-family: "Barlow", sans-serif;
    font-weight: 300;
    font-style: italic;
}

.barlow-regular-italic {
    font-family: "Barlow", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.barlow-medium-italic {
    font-family: "Barlow", sans-serif;
    font-weight: 500;
    font-style: italic;
}

.barlow-semibold-italic {
    font-family: "Barlow", sans-serif;
    font-weight: 600;
    font-style: italic;
}

.barlow-bold-italic {
    font-family: "Barlow", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.barlow-extrabold-italic {
    font-family: "Barlow", sans-serif;
    font-weight: 800;
    font-style: italic;
}

.barlow-black-italic {
    font-family: "Barlow", sans-serif;
    font-weight: 900;
    font-style: italic;
}

::-moz-selection {
    background: #bbdeff;
    color: black;
}

::selection {
    background: #bbdeff;
    color: black;
}

/* animations formázások */

a,
.button,
.button a,
.logo,
input[type="submit"] {
    transition: all 0.5s ease-in-out;
    position: relative;
}

.button:hover,
.button a:hover,
.logo:hover,
input[type="submit"]:hover {
    transform: scale(1.05);
}

.nav-top li a:hover,
.nav-bottom li a:hover,
a:hover {
    color: #023980;
}

/* body formázások */

body {
    font-family: "Barlow", sans-serif;
    color: #1b1d1c;
    font-size: 1vw;
}

h1 {
    font-family: "Barlow", serif;
    font-weight: 800;
    font-size: 2.5vw;
    line-height: 1.2;
    color: #1b1d1c;
}

h2 {
    font-family: "Barlow", serif;
    font-weight: 700;
    font-size: 1.75vw;
    line-height: 1.1;
    margin-bottom: 0.5vw;
    color: #1b1d1c;
}

h3 {
    font-family: "Barlow", serif;
    font-size: 1.5vw;
    margin-bottom: 0.5vw;
    color: #1b1d1c;
    font-weight: 700;
}

h4 {
    font-family: "Barlow", serif;
    font-weight: 700;
    font-size: 1.38vw;
    margin-bottom: 0.5vw;
    line-height: 1.1;
    color: #1b1d1c;
}

h5 {
    font-family: "Barlow", sans-serif;
    font-size: 1.25vw;
    font-weight: 700;
    margin-bottom: 0.4vw;
    color: #1b1d1c;
}

h6 {
    font-family: "Google Sans Flex", sans-serif;
    font-weight: 600;
    font-size: 1.15vw;
    margin-bottom: 0.3vw;
    color: #1b1d1c;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    font-weight: inherit;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

p,
ul li,
a,
td,
::placeholder,
ul,
ul li,
ol,
ol li {
    font-family: "Google Sans Flex", sans-serif;
    font-size: 1.1vw;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 0.6vw;
}

.button,
input[type="submit"] {
    padding: 0.8vw 2vw;
    cursor: pointer;
    margin: 1.5vw 0;
    width: fit-content;
    background: #e8c594;
    background: linear-gradient(
        45deg,
        rgba(232, 197, 148, 1) 0%,
        rgba(240, 214, 178, 1) 20%,
        rgba(239, 226, 209, 1) 60%,
        rgba(232, 197, 148, 1) 100%
    );

    display: block;
}

.button a,
input[type="submit"] {
    text-decoration: none;
    color: #2a1773;
    font-family: "Barlow";
    font-weight: 700;
    font-size: 1.1vw;
    margin: 1vw auto !important;
}

li {
    position: relative;
    padding-left: 1vw;
}

ul li::before {
    content: "- ";
    position: absolute;
    left: 0;
}

ol {
    list-style: none;
    counter-reset: counter;
}

ol li {
    counter-increment: counter;
}

ol li::before {
    content: counter(counter) ". ";
    position: absolute;
    left: 0;
}

.check {
    display: flex;
    align-items: flex-start;
}

a {
    color: #080b09;
    text-decoration: underline;
}

input[type="search"] {
    padding: 1vw 1.8vw;
    border-radius: 0.5vw;
    margin: 1vw 0;
    width: 40%;
    font-size: 1.1vw;
    border: 1px solid #d5d5d5;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    position: relative;
}

::placeholder {
    font-family: "Barlow";
    font-weight: 400;
}

input[type="tel"],
input[type="email"],
input[type="text"],
textarea {
    font-family: "Barlow";
    text-align: center;
    border: 1px solid #cfcfcf;
    padding: 1vw 1.5vw;
    border-radius: 0.5vw;
    margin: 0.5vw 0;
    width: fit-content;
    font-size: 1vw;
    box-shadow:
        rgba(50, 50, 93, 0.15) 0px 6px 12px -2px,
        rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

input[type="checkbox"] {
    -webkit-appearance: checkbox !important;
    width: 1.2vw;
    height: 1.2vw;
    float: left;
    margin: 0.2vw;
}

.center-box {
    width: 90%;
    margin: 0 auto;
}

/* footer formázások */

footer {
    clear: both;
    overflow: hidden;
    position: relative;
    padding-bottom: 1vw;
}

footer .center-box {
    background: #d4f4f3;
    background: linear-gradient(90deg, rgba(212, 244, 243, 1) 0%, rgba(187, 222, 255, 1) 100%);
    height: 28vw;
    border-radius: 3vw;
}

.foot-logo {
    width: 10vw;
    margin: 2vw auto;
    padding-top: 3vw;
}

footer .nav-top {
    display: block !important;
}

footer .nav-top li {
    padding: 0.5vw;
}

footer h3 {
    text-align: center;
    margin: 1vw auto;
}

.contact {
    margin: 1vw auto;
    text-align: center;
    padding: 1vw;
}

.social {
    margin: 1vw auto;
    display: flex;
    justify-content: center;
}

.social img {
    width: 2.5vw;
}

.nav-bottom {
    clear: both;
    margin-top: 4vw;
    text-align: center;
}

footer li {
    text-align: center;
    padding: 0 2vw;
    margin: auto;
}

footer li a {
    line-height: 1.3;
    text-decoration: none;
    text-align: center;
}

footer a {
    text-decoration: none;
    line-height: 1.3;
}

footer li::before {
    display: none;
}

.bottom-line {
    margin-top: 1vw;
    clear: both;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0 3vw;
    height: 3vw;
}

.bottom-line a,
.bottom-line p {
    margin: 0 !important;
}

.bottom-line img {
    width: 5vw;
    height: auto;
    margin-left: 0.5vw;
}

section {
    clear: both;
}

section h2 {
    text-align: center;
}

footer .open-sub::before,
footer ul li ul li {
    display: none !important;
}

/* nav formázások */

.headline {
    width: 100%;
    height: 5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 9999;
    padding: 0 5vw;
}

.nav-bottom li:before,
.nav-top li:before {
    content: none;
}

.nav-top {
    display: flex !important;
    align-items: center;
    justify-content: right;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.nav-top li {
    display: flex;
    align-items: center;
    padding: 0 2vw;
    float: left;
}

.logo {
    width: 17vw;
    height: 3vw;
}

.logo img {
    width: 100%;
    height: auto;
    display: block;
}

.nav-top li a {
    display: inline-block;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    margin: 0 !important;
    font-size: 1.1vw;
    position: relative;
    text-shadow: rgb(186, 183, 225, 1) 0px 0px 15px;
}

.nav-top .logo {
    display: block;
}

.sticky {
    position: fixed !important;
    top: 0 !important;
    background: #d4f4f3;
}

/* főoldal header formázások */

header {
    width: 100%;
    position: relative;
}

.head-content {
    background: #d4f4f3;
    background: linear-gradient(90deg, rgba(212, 244, 243, 1) 0%, rgba(187, 222, 255, 1) 100%);
    z-index: 10;
    overflow: hidden;
    width: 90%;
    margin: 0 auto;
    border-radius: 5vw;
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;
}

.head-content::after {
    content: "";
    background-image: url(/wp-content/uploads/2026/05/pattern.svg);
    background-size: cover;
    background-repeat: repeat;
    width: 100%;
    min-height: 40vw;
    position: absolute;
    top: 0;
    left: 0;
}

.head-text {
    width: 42%;
    padding: 10vw 0;
    padding-left: 7vw;
    position: relative;
    z-index: 2;
    float: left;
}

.head-text h1 {
    margin-bottom: 1vw;
}

.head-image {
    width: 58%;
    position: relative;
    float: right;
    z-index: 5;
    height: 37vw;
    overflow: visible;
}

.head-image img {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    left: -4vw;
    transition: all 0.5s ease-in-out;
}

/*--------- előnyök-------------------*/

#advantages {
    margin: 3vw auto;
}

#advantages .center-box {
    display: flex;
    justify-content: space-between;
}

.advantage {
    box-shadow: rgba(0, 0, 0, 0.15) -4px 9px 25px -6px;
    padding: 2vw;
    width: 23%;
    border-radius: 20px;
}

/*--------- intro-------------------*/

#intro .center-box {
    margin: 3vw auto;
}

.text-side {
    padding: 4vw;
}

.info-section {
    margin-left: 8vw;
}

.info-grid {
    display: flex;
    gap: 4vw;
    align-items: flex-start;
}

.stats-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2vw;
    margin-top: 1vw;
}

.stat-row {
    display: flex;
    align-items: center;
}

.stat-number {
    width: 7vw;
    text-align: right;
    padding-right: 20px;
    color: #023980;
}

.stat-number strong {
    font-size: 2.5vw;
    display: block;
    line-height: 1;
}

.stat-number span {
    font-size: 0.9vw;
    text-transform: uppercase;
}

.stat-desc {
    flex: 1;
    padding-left: 25px;
    border-left: 3px solid #023980;
    min-height: 65px;
    display: flex;
    align-items: center;
}

.stat-desc p {
    margin: 0;
    line-height: 1.4;
}

/*--------- szolgáltatások-------------------*/

#szolgaltatasok {
    position: relative;
    padding-top: 15vw;
}

#szolgaltatasok::before {
    content: "";
    background-image: url(/wp-content/uploads/2026/05/separater.svg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 10vw;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.service-cards {
    display: flex;
    justify-content: center;
    gap: 5vw;
    padding: 4vw;
}
.service-card {
    position: relative;
    width: 31%;
    height: auto;
    border-radius: 2vw;
    overflow: visible;
    cursor: pointer;
    margin-top: 3vw;
}

.service-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2vw;
    display: block;
    transition: transform 0.5s ease;
}

.service-card h4 {
    position: absolute;
    top: -2.5vw;
    width: 100%;
    text-align: center;
    margin: 0;
    text-transform: uppercase;
    font-size: 1.1vw;
    font-weight: bold;
    color: #000;
    z-index: 10;
    transition: color 0.3s ease;
}

.service-card h4 a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.card-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(22, 53, 102, 0.85);
    border-radius: 2vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2vw;
    box-sizing: border-box;
    color: white;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease-in-out;
    pointer-events: none;
    /* A szöveges doboz a cím alatt maradjon, de a kép felett */
    z-index: 5;
}

/* HOVER ÁLLAPOTOK */
.service-card:hover .card-text {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/*--------- folyamat -------------------*/

#process {
    margin: 5vw auto;
    text-align: center;
    position: relative;
}

#process .button {
    margin: 5vw auto;
    text-align: center;
}

.process-container {
    z-index: 1;
    position: relative;
}

#process h2 {
    margin-bottom: 2vw;
    margin-bottom: 0.5vw;
}

#process > .center-box > p {
    margin-bottom: 4vw;
}

.steps-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2vw;
    max-width: 1200px;
    margin: 0 auto 4vw auto;
}

.step {
    background: #fff;
    border-radius: 1.5vw;
    padding: 2vw;
    display: flex;
    align-items: flex-start;
    text-align: left;
    gap: 1.5vw;
    width: calc(33.333% - 2vw);
    min-width: 300px; /* Mobilbarát megoldás */
    box-sizing: border-box;
    transition: transform 0.3s ease;
    box-shadow: rgba(122, 122, 234, 0.15) 0px 7px 29px 0px;
}

.step:hover {
    transform: translateY(-5px);
}

.step img {
    width: 2.5vw;
    height: auto;
    flex-shrink: 0;
}

.step-text h6 {
    margin: 0 0 0.5vw 0;
    font-weight: bold;
}

.step-text p {
    line-height: 1.5;
    margin: 0;
}

/*--------- bemutatkozas -------------------*/

#introduce {
    margin: 8vw auto;
    text-align: center;
    position: relative;
    overflow: hidden;
}

#introduce .center-box {
    display: flex;
    justify-content: center;
}

.introduce-img,
.introduce-text {
    float: left;
}

.introduce-img {
    width: 30%;
    position: relative;
}

.introduce-img::after {
    content: "";
    background-image: url(/wp-content/uploads/2026/05/3plus.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 10vw;
    height: 20vw;
    position: absolute;
    top: 12vw;
    left: -2.5vw;
    z-index: 2;
}

.introduce-text {
    width: 40%;
    text-align: left;
    padding: 3vw;
}

.introduce-text h2 {
    text-align: left;
}

#introduce::after {
    content: "";
    background-image: url(/wp-content/uploads/2026/05/gradient-circle2.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 60vw;
    height: 60vw;
    position: absolute;
    top: 10vw;
    right: -20vw;
    z-index: -1;
    opacity: 0.7;
}

/*--------- referenciák-------------------*/

#references {
    margin: 8vw auto;
    text-align: center;
    position: relative;
}

#references .center-box {
    display: flex;
    justify-content: center;
    gap: 2vw;
}

#references .button {
    margin: 5vw auto;
    text-align: center;
}

#references::before {
    content: "";
    background-image: url(/wp-content/uploads/2026/05/separater.svg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 10vw;
    position: absolute;
    top: 21vw;
    left: 0;
    z-index: -1;
    transform: rotatex(180deg);
}

/*--------- velemenyek-------------------*/

#opinions {
    margin: 5vw auto;
}

#opinions h2 {
    margin-bottom: 2vw;
}

/*--------- gyik-------------------*/

#faq {
    margin: 8vw auto;
}

.questions h2 {
    margin-bottom: 3vw;
}

.sp-ea-single {
    margin: 0.5vw 2vw !important;
    padding: 1vw !important;
    border-radius: 1vw !important;
    box-shadow:
        rgba(136, 165, 191, 0.48) 6px 2px 16px 0px,
        rgba(255, 255, 255, 0.6) -6px -2px 16px 0px !important;
}

/*--------- árak -------------------*/

#cta-box {
    clear: both;
    background: #202141;
    background: linear-gradient(90deg, rgba(32, 33, 65, 1) 0%, rgba(47, 93, 153, 1) 100%);
    position: relative;
    width: 80%;
    height: 23vw;
    margin: 5vw auto;
    color: white;
    border-radius: 2vw;
    padding: 3vw;
}

#cta-box h2 {
    color: white;
    text-align: left;
}

#cta-box::after {
    content: "";
    background-image: url(/wp-content/uploads/2026/05/pattern.svg);
    background-size: 100%;
    background-repeat: repeat;
    width: 100%;
    min-height: 40vw;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -0;
    opacity: 0.3;
}

.cta-text {
    width: 60%;
    float: right;
    z-index: 2;
    position: relative;
}

.cta-img {
    width: 30%;
    float: left;
    position: relative;
    top: -7.75vw;
}

/*--------- térkép -------------------*/

#map {
    margin: 3vw auto;
}

#map h2 {
    text-align: left;
}

#map img {
    border-radius: 2vw;
    margin: 1vw;
}

#map p {
    padding-right: 5vw;
}

/* --------------------------------------------------------------------------------------- nem főoldal header   */

.inner-page {
    position: relative;
    overflow: hidden;
    background-position: bottom -7vw right;
}

.inner-page,
.subhead-title,
.subhead-title,
.subhead-content {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 20vw;
}

.subhead-content {
    width: 100%;
    text-align: center;
    z-index: 2;
}

.subhead-title {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 4vw;
    position: relative;
    z-index: 3;
}

.subhead-content h1 {
    width: fit-content;
    text-align: center;
    margin: 2vw auto;
    padding: 2vw;
}

.subhead-title h1 {
    background-color: rgba(0, 45, 83, 0.75);
    padding: 0.5vw;
}

/*---------------------------------------------------------------------------------------------- nem főoldal body -*/

main {
    padding: 5vw 8vw;
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
    margin: auto;
}

.page-img {
    width: 40%;
    text-align: center;
}

.page-img img,
main img {
    padding: 0;
    border-radius: 3vw;
    margin-bottom: 2vw;
}

.page-img .contact {
    padding: 1vw;
    margin: 0 3vw;
    border-radius: 3vw;
}

.page-content {
    width: 60%;
    padding: 0 1vw;
}

.page-img:empty {
    display: none !important;
}

/*---------------------------------------------------------------------------------------------- kapcsolat, jelentkezés -*/

.contact-box {
    margin: 2vw;
    overflow: hidden;
}

.contact-box [type="email"],
.contact-box input[type="text"],
.contact-box input[type="tel"],
.contact-box textarea {
    width: 95% !important;
}

::placeholder {
    font-family: Rethink Sans;
    font-weight: 400;
}

input[type="email"],
input[type="text"],
textarea {
    border: 1px solid #cfcfcf;
    padding: 1vw 1.5vw;
    margin-top: 0.5vw;
    width: fit-content;
    font-size: 1vw;
    box-shadow:
        rgba(50, 50, 93, 0.15) 0px 6px 12px -2px,
        rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.wpcf7-checkbox {
    margin-bottom: 3vw !important;
}

input[type="checkbox"] {
    -webkit-appearance: checkbox !important;
    width: 1.3vw;
    height: 1.3vw;
    float: left;
    margin-right: 1vw;
    accent-color: #4173c9;
}

.wpcf7-form label {
    margin-top: 1.5vw;
    width: 100%;
}

.wpcf7-list-item:has(+ input[type="checkbox"]) {
    display: flex !important;
    align-items: center !important;
}

.wpcf7-list-item {
    display: block !important;
}

textarea {
    height: 10vw;
    font-family: "Rethink Sans", sans-serif;
}

#contact-text input[type="submit"] {
    margin: 2vw 0 !important;
    width: fit-content;
}

.wpcf7-spinner {
    display: none !important;
}

.wpcf7-not-valid-tip {
    margin-top: 0.5vw !important;
}

/*--------------------------------------------------------------------------------------------------------- blogoldal */

.blog::after {
    background-size: cover;
    height: 100vw;
    top: 23vw;
}

.page-numbers.current {
    background-color: #eece8e;
    padding: 1vw;
    color: black !important;
}

.two-third article {
    width: 42%;
}

.pagination,
.nav-links {
    text-align: center;
    padding: 6vw 0;
}

.nav-links a,
.pagination a {
    padding: 1vw;
    text-decoration: none;
    color: white;
}

article a {
    text-decoration: none;
}

.blog-text .button {
    margin: auto;
}

.blog-text {
    padding-bottom: 2vw;
}

.search-container {
    margin: 2vw auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: relative;
}

.keywords {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    margin: 0 auto;
    position: relative;
    z-index: 1 !important;
}

.keywords a {
    padding: 1vw;
}

#blog-search .searchinput {
    width: 25vw;
}

.search-container {
    position: relative;
}

#blog-search {
    display: flex;
    align-items: center;
}

.searchinput {
    width: 100%;
}

.search-button {
    position: absolute;
    right: 31vw;
    top: 1.5vw;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0);
}

.search-button img {
    width: 1.75vw;
    height: 1.75vw;
}

.pager-bottom {
    display: flex;
    width: 20%;
    justify-content: space-around;
    margin: 2vw auto;
    align-items: center;
}

.active-page {
    background-color: #002d53;
    padding: 1vw;
}

.pager-bottom a {
    text-decoration: none;
    font-weight: 900;
}

.active-page a {
    color: white !important;
}

#article-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin-top: 5vw;
    overflow: hidden;
    clear: both;
}

.after-article {
    clear: both;
    display: flex;
    justify-content: center;
    padding-top: 5vw;
    margin-bottom: -3vw;
}

article {
    width: 25%;
    margin: 1vw;
    margin-bottom: 3vw;
}

article img {
    width: 100%;
    overflow: hidden;
    margin-top: -1vw;
}

.article-text {
    padding: 1vw;
}

.article-text .button {
    margin: auto;
}

article h5 {
    margin-bottom: 1vw;
}

article p {
    margin-bottom: 1vw;
}

.sidebar-blogbox {
    width: 85%;
}

/*-------------------------------------------------------------------------------------- blogcikk formázások -*/

.author {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 1vw;
    margin-bottom: 2vw;
}

.author-image {
    width: 2vw;
    margin-right: 1vw;
}

.date {
    margin: 0 2vw;
}

.date::before {
    content: "|    ";
}

.author-name {
    margin: 0 !important;
}

.latest-blog-posts li::before {
    content: "";
}

#single-post {
    margin-top: -6.65vw;
    position: relative;
    z-index: 2;
    text-align: left;
}

.single-content,
.single-post-img {
    padding: 1vw 5vw;
}

.single-post-img img {
    width: 100%;
    border-radius: 2vw;
    margin-top: 3vw;
}

.single-post-img {
    position: relative;
    margin-top: 5vw;
}

.blog-img-title {
    position: absolute;
    bottom: 1vw;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 85%;
    height: auto;
    text-align: center;
    background-color: #005f59;
    padding: 0.5vw;
}

.blog-img-title h2 {
    color: #fcfcfc;
    margin: 1vw 0;
}

.single-content img {
    width: 100%;
    margin: 2vw 0;
}

.single-content h2,
.single-content h3,
.single-content h4,
.single-content h5,
.single-content h6 {
    margin-top: 2.5vw !important;
    line-height: 1.2;
}

.emphasis {
    background-color: #fede94;
    padding: 1vw;
    color: #141414 !important;
}

.single-content p {
    line-height: 1.2;
}

aside .one-third {
    padding: 4vw;
}

.sidebar-box {
    padding-bottom: 1vw;
}

aside a {
    text-decoration: none;
}

aside .search-button {
    right: 1vw;
    top: 1vw;
}

.sidebar-blogbox {
    margin-bottom: 3vw;
    padding-bottom: 1vw;
    overflow: hidden;
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
        rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}

.sidebar-blogbox p,
.sidebar-blogbox h6 {
    margin: 1vw 0 !important;
    padding: 0 1vw;
}

.sidebar-blogbox .button {
    margin-left: 1vw;
}

.sidebar-blogbox img {
    width: 100%;
}

.sidebar-title {
    margin-top: 5vw;
    margin-bottom: 2vw;
    margin-left: -1vw;
    background-color: #024947;
    color: #fcfcfc;
    padding: 1vw;
    border-radius: 1.5vw;
    border-top-left-radius: 0;
}

.me-icon {
    width: 7vw;
    margin: 1vw 0;
}

/*----------------------------------------------------------------------------------------------keresési találatok */

.subhead-content p {
    margin: 2vw auto;
}

/*------------------------------------------------------------------------------------------------------köszönőoldalak */

#thankyou {
    padding: 7vw;
    margin-top: 5vw;
    margin-bottom: 0;
    text-align: center;
}

.success {
    width: 14vw;
    height: 12vw;
    margin: auto;
    margin-top: -7vw;
    position: relative;
}

.success img {
    margin-left: 4vw;
}

#thankyou h2 {
    margin-bottom: 2vw;
}

#thankyou p {
    width: 80%;
    margin: 2vw auto;
    text-align: center;
}

#thankyou .button {
    margin: 2vw auto;
}

/*-----------------------------------------------------------------------------------------404 formázások------------------*/

#notfound {
    padding: 15vw;
    margin-top: -5vw;
    margin-bottom: -10vw;
    text-align: center;
}

#notfound .center-box {
    text-align: center;
}

#notfound .button {
    margin: 2vw auto;
}

.error {
    margin-top: -7vw;
    padding: 2vw;
    position: relative;
    width: 45%;
}

/*-------------------------------------------------------------------------------------------------------főoldal------------*/

#intro .center-box {
    display: flex;
    flex-direction: row-reverse;
}

#blog .center-box {
    display: flex;
    justify-content: center;
}

.eszkoz-container {
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
    gap: 20px;
    margin: 2vw auto;
}

.eszkoz {
    width: 22%;
    position: relative;
    aspect-ratio: 1 / 1.2;
    overflow: hidden;
    transition: transform 0.3s ease;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.eszkoz:hover {
    transform: scale(1.05);
}
.eszkoz-text,
.eszkoz-img-wrapper {
    border-radius: 2vw;
}

.eszkoz-img-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.eszkoz img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.eszkoz-text {
    position: absolute;
    inset: 0; /* Teljesen ráfeszül a dobozra */
    background: rgba(0, 95, 89, 0.6); /* Sötétzöld réteg */
    color: #1b1d1c;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Alaphelyzetben középen */
    align-items: center;
    padding: 1.5vw;
    box-sizing: border-box;
    text-align: center;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.eszkoz-text h6 {
    color: white !important;
    margin: 0;
    transition: transform 0.4s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    background-color: #bc4f25;
    padding: 10px;
}

.eszkoz-text .quote {
    font-family: "Noto Serif Display", serif;
    font-style: italic;
}

.eszkoz-text .quote,
.eszkoz-text p:not(.quote) {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    line-height: 1.4;
    transition: all 0.3s ease;
}

/* Hover állapot */
.eszkoz:hover .eszkoz-text {
    justify-content: flex-start; /* Felhúzza a szöveget az elejére */
    padding-top: 2.5vw;
    background: rgb(248, 241, 225, 0.8);
}

.eszkoz:hover .eszkoz-text h6 {
    margin-bottom: 10px;
}

.eszkoz:hover .eszkoz-text .quote,
.eszkoz:hover .eszkoz-text p:not(.quote) {
    opacity: 1;
    visibility: visible;
    max-height: 200px; /* Elég hely a szövegnek */
    margin-top: 5px;
}

main + #szolgaltatasok {
    padding-top: 0;
    margin-top: -4vw;
}

/*-------------------------------------------------------------------------------------------------------kis képernyő nézet ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

@media only screen and (min-width: 1024px) and (max-width: 1279px) {
    body {
        font-size: 1.5vw;
    }

    h1 {
        font-size: 3vw;
    }

    h2 {
        font-size: 2.4vw;
    }

    h3 {
        font-size: 2.1vw;
        margin-bottom: 0.9vw;
    }

    h4 {
        font-size: 1.8vw;
        margin-bottom: 0.9vw;
    }

    h5 {
        font-size: 1.5vw;
        margin-bottom: 0.7vw;
    }

    h6 {
        font-size: 1.3vw;
        margin-bottom: 0.7vw;
    }

    p,
    ul li,
    a,
    td,
    ::placeholder,
    ul,
    ul li,
    ol,
    ol li {
        font-size: 1.2vw;
        line-height: 1.2;
        margin-bottom: 1vw;
    }

    .button,
    input[type="submit"] {
        padding: 1.1vw 2.2vw;
        margin: 1.5vw 0;
    }

    input[type="search"] {
        padding: 1.5vw 2.8vw;
        margin: 1.5vw 0;
        width: 50%;
        font-size: 1.2vw;
    }

    .button a,
    input[type="submit"] {
        font-size: 1.2vw;
    }

    input[type="tel"],
    input[type="email"],
    input[type="text"],
    textarea {
        padding: 1.7vw 1.9vw;
        border-radius: 1vw;
        margin: 0.5vw;
        font-size: 1.2vw;
    }

    input[type="checkbox"] {
        width: 2.5vw;
        height: 2.5vw;
        margin-right: 1vw;
    }

    .center-box {
        width: 90%;
    }

    section h2 {
        margin-bottom: 1.5vw;
    }

    /* nav formázások */

    .nav-top li a {
        font-size: 1.3vw;
    }

    .bottom-line img {
        width: 6.5vw;
        margin-left: 0.75vw;
    }

    .bottom-line p {
        margin-bottom: 2vw;
    }

    .nav-bottom li a {
        font-size: 1.2vw;
    }
    .social img {
        width: 3.2vw;
    }

    .nav-bottom {
        margin-bottom: 5vw;
    }

    .head-content {
        top: 1vw;
    }
    .nav-top li {
        display: flex;
        align-items: center;
        padding: 0 2vw;
        margin: 0;
    }

    .head-image {
        width: 71%;
        position: absolute;
        z-index: 5;
        height: 45vw;
        right: -4vw;
        bottom: 0;
    }

    .head-text {
        width: 45%;
    }

    #advantages .center-box {
        width: 90%;
    }

    #cta-box {
        height: 30vw;
    }

    .cta-img {
        width: 35%;
        top: -5.25vw;
    }

    .foot-logo {
        width: 15vw;
        margin: 2vw auto;
        padding-top: 5vw;
    }

    footer .center-box {
        height: 35vw;
        width: 90%;
    }

    .search-button {
        right: 36vw;
        top: 2vw;
    }

    aside .search-button {
        right: 1vw;
        top: 2vw;
    }
}

@media only screen and (min-width: 1025px) {
    /*ez kell ahhoz, hogy ne tűnjön el a mobil nézetben összezárt menü kihúzva desktop nézetre*/
    .nav-top ul {
        display: block !important;
    }

    .nav-top ul li ul li {
        height: auto;
        display: block;
        overflow: hidden;
    }

    .nav-top ul li {
        position: relative;
    }

    .nav-top ul li ul {
        display: none !important;
        position: absolute;
        top: 5.8vw;
    }

    .nav-top ul li:hover ul {
        display: none !important;
    }

    .nav-top ul li ul li a {
        white-space: nowrap;
        margin: 0;
        padding: 1vw;
    }

    .nav-top ul li ul li a:hover {
        animation: none;
        border-bottom: none;
    }

    .nav-top ul li ul li ul li {
        display: none;
    }
}

@media only screen and (max-width: 1024px) {
    #hamburger {
        display: block;
        width: 100%;
        text-align: right;
        cursor: pointer;
        padding-top: 0;
        padding-right: 3vw;
        color: black;
        font-weight: bold;
        margin-top: -2vw;
    }

    #hamburger:before {
        content: "Menü";
        font-family: "Noto Serif Display", serif;
        font-size: 3vw;
        display: inline-block;
        vertical-align: middle;
    }

    #hamburger:after {
        content: "";
        width: 5vw;
        height: 2.25vw;
        display: inline-block;
        vertical-align: middle;
        margin-left: 10px;
        border-top: double 1vw black;
        border-bottom: double 1vw black;
        transition: all 0.3s ease-in-out;
    }

    .nav-top {
        display: block !important;
    }

    .nav-top ul {
        display: none;
        margin-top: 0;
        margin-bottom: 0;
    }

    .hambi-open:after {
        height: 0 !important;
        border-top: solid 0.25vw black !important;
        border-bottom: solid 0.25vw black !important;
    }

    .nav-top ul li {
        display: block;
        height: auto;
        /*ez kell, hogy ne nyomorgassa össze a (lenyitós) menüpontokat mobil nézetben*/
    }

    .nav-top ul li a {
        margin-left: 0;
        margin-top: 0;
        width: 100%;
    }

    .nav-top ul li ul {
        margin: 0;
    }

    .nav-top ul li a:hover {
        border-bottom: none;
    }

    .menu-item-has-children {
        position: relative;
    }

    .open-sub {
        display: block;
        position: absolute;
        width: 100px;
        height: 40px;
        top: 1vw;
        right: 2vw;
    }

    .open-sub::before {
        top: 50%;
        left: 50%;
        content: "";
        display: block;
        width: 0;
        height: 0;
        position: absolute;
        border-left: 1vw solid transparent;
        border-right: 1vw solid transparent;
        border-top: 1.5vw solid black;
        cursor: pointer;
        z-index: 3;
    }

    .sub-open:before {
        border-left: none !important;
        border-right: none !important;
        border-top: 0.7vw solid black !important;
        width: 3vw !important;
    }

    .nav-top li,
    .nav-top ul li ul li {
        padding: 3vw 0;
        width: 100%;
    }

    .nav-top li a {
        font-size: inherit !important;
    }

    .sub-menu {
        margin-bottom: -3vw !important;
    }

    footer .sub-menu {
        margin-bottom: 0 !important;
    }

    .nav-top ul li ul {
        margin-top: 3vw;
    }

    .head-content {
        flex-direction: column;
        width: 100%;
    }

    .nav-top li a {
        text-shadow: none;
    }

    .headline {
        display: block;
        position: fixed;
        top: 0;
        z-index: 999;
    }

    .headline .logo {
        z-index: 5;
        position: relative;
    }

    .sticky {
        position: fixed !important;
        top: 0 !important;
        width: 100%;
        z-index: 999999999 !important;
    }

    .headline,
    .nav-top li {
        background-color: #d4f4f3 !important;
    }

    .nav-top li {
        margin: 0 !important;
        border-top: 1px solid black;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .nav-top ul li ul li {
        display: block;
        line-height: inherit;
        background-color: #d4f4f3;
    }

    .nav-top li:hover,
    .nav-bottom li:hover,
    .nav-top ul:hover li ul li {
        background-color: #023980 !important;
    }

    ul li {
        transition: ease-in-out;
        transition-duration: 300ms;
    }
    .nav-top li:hover a,
    .nav-bottom li:hover a {
        color: #fff;
    }

    .nav-top li {
        display: block;
        width: 100%;
        text-align: center;
        transition: ease-out;
        transition-duration: 400ms;
    }

    .inner-page,
    .subhead-title,
    .subhead-title,
    .subhead-content {
        width: 100%;
        height: fit-content;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }
}

/* -------------------------------------------------------------------------------------------------------Közepes kijelzők (tablet) ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 480px) and (max-width: 1024px) {
    body {
        font-size: 2.1vw;
    }

    h1 {
        font-size: 5vw;
    }

    h2 {
        font-size: 3.4vw;
    }

    h3 {
        font-size: 3.2vw;
        margin-bottom: 1vw;
    }

    h4 {
        font-size: 3vw;
        margin-bottom: 1vw;
    }

    h5 {
        font-size: 2.6vw;
        margin-bottom: 1vw;
    }

    h6 {
        font-size: 2.4vw;
        margin-bottom: 1vw;
    }

    p,
    ul li,
    a,
    td,
    ::placeholder,
    ul,
    ul li,
    ol,
    ol li {
        font-size: 2.1vw;
        margin-bottom: 2vw;
    }

    .button,
    input[type="submit"] {
        padding: 2vw 4vw;
        margin: 3vw auto;
    }

    .button a,
    input[type="submit"] {
        font-size: 2.1vw;
    }

    input[type="tel"],
    input[type="email"],
    input[type="search"],
    input[type="text"],
    textarea {
        padding: 2.5vw 3.5vw;
        border-radius: 1vw;
        margin: 1vw;
        font-size: 2.1vw;
        text-align: center !important;
    }

    input[type="checkbox"] {
        width: 2.5vw;
        height: 2.5vw;
        float: left;
        margin: 2vw;
    }

    .center-box {
        width: 90%;
    }

    /* footer formázások */

    footer {
        text-align: center;
    }

    .foot-logo {
        width: 25vw;
        margin: 3vw auto;
        padding-top: 3vw;
    }

    footer h3 {
        margin: 3vw auto;
    }

    .social img {
        margin-bottom: 4vw;
        height: auto;
        width: 6.3vw;
    }

    .bottom-line {
        margin-top: 2vw;
        padding: 0 6vw;
        height: 5vw;
    }

    .bottom-line a,
    .bottom-line p {
        margin: 0 !important;
    }

    .bottom-line img {
        width: 10vw;
        height: auto;
        margin-left: 1.2vw;
    }

    footer .center-box {
        padding-bottom: 3vw;
        height: 62vw;
    }

    footer p {
        margin: 2vw 0;
    }

    section h2 {
        margin-bottom: 3vw;
    }

    footer li {
        text-align: center;
    }

    .check {
        display: flex;
        justify-content: flex-start;
    }

    section h2 {
        text-align: center;
    }

    /* nav formázások */

    .headline {
        height: 9vw;
        padding: 0;
    }

    .logo {
        width: 23vw;
        height: 4vw;
        padding-top: 2vw;
        margin-left: 2vw;
    }

    /* főoldal header formázások */

    header {
        width: 100%;
        position: relative;
    }

    .head-content {
        display: flex;
        flex-direction: column-reverse;
    }

    .head-content::after {
        height: 63vw;
    }

    .head-text {
        width: 100%;
        padding: 10vw;
        text-align: center;
        background-color: rgba(255, 255, 255, 0.5);
    }

    .head-text h1 {
        margin-bottom: 3vw;
        line-height: 1.2;
    }

    .head-image {
        width: 100%;
        height: 55vw;
    }

    .head-image {
        width: 100%;
        z-index: 5;
        height: 64vw;
        right: 0;
        bottom: 0;
    }

    .head-image img {
        left: -3vw;
    }

    /*--------- előnyök-------------------*/

    #advantages {
        margin: 3vw auto;
    }

    #advantages .center-box {
        flex-flow: row wrap;
        justify-content: space-between;
    }

    .advantage {
        padding: 4vw;
        width: 48%;
        margin-bottom: 20px;
    }

    /*--------- intro-------------------*/

    #intro .center-box {
        margin: 0 auto;
        width: 90%;
    }

    .text-side {
        padding: 4vw;
    }

    .info-section {
        margin-left: 0;
    }

    .info-grid {
        display: flex;
        gap: 4vw;
    }

    .stats-container {
        gap: 4vw;
        margin-top: 0;
    }

    .stat-number {
        width: 15vw;
        padding-right: 20px;
    }

    .stat-number strong {
        font-size: 4.4vw;
    }

    .stat-number span {
        font-size: 2.2vw;
    }

    /*--------- szolgáltatások-------------------*/

    #szolgaltatasok {
        position: relative;
        padding-top: 33vw;
    }

    #szolgaltatasok::before {
        height: 22vw;
        top: 5vw;
        left: 0;
    }

    .service-cards {
        flex-flow: row wrap;
        gap: 5vw;
        padding: 0;
    }
    .service-card {
        width: 47%;
        border-radius: 20px;
        margin-top: 9vw;
    }

    .service-card img {
        border-radius: 20px;
    }

    .service-card h4 {
        top: -4vw;
    }

    .card-text {
        border-radius: 20px;
        padding: 2vw;
    }

    /*--------- folyamat -------------------*/

    #process {
        margin: 14vw auto;
    }

    #process .button {
        margin: 5vw auto;
    }

    #process h2 {
        margin-bottom: 2vw;
    }

    .steps-container {
        gap: 5vw;
    }

    .step {
        border-radius: 20px;
        padding: 4vw;
        gap: 0.8vw;
        width: 80%;
    }

    .step img {
        width: 6vw;
        height: auto;
        flex-shrink: 0;
    }

    .step-text h6 {
        margin: 0 0 1vw 0;
    }

    /*--------- bemutatkozas -------------------*/

    #introduce {
        margin: 8vw auto;
        overflow: visible;
    }

    .introduce-img {
        width: 42%;
    }

    .introduce-img::after {
        width: 21vw;
        height: 29vw;
        position: absolute;
        top: 43vw;
        left: 6.6vw;
        z-index: 2;
        transform: rotate(90deg);
    }

    .introduce-text {
        width: 61%;
        padding-left: 3vw;
    }

    #introduce::after {
        content: "";
        background-image: url(/wp-content/uploads/2026/05/gradient-circle2.svg);
        background-size: contain;
        background-repeat: no-repeat;
        width: 60vw;
        height: 60vw;
        position: absolute;
        top: 22vw;
        right: 22vw;
        z-index: -1;
        opacity: 0.7;
    }

    /*--------- referenciák-------------------*/

    #references {
        margin: 8vw auto;
    }

    #references .center-box {
        flex-flow: row wrap;
    }

    #references::before {
        width: 100%;
        height: 20vw;
        top: 106vw;
    }

    /*--------- velemenyek-------------------*/

    #opinions {
        margin: 5vw auto;
    }

    #opinions h2 {
        margin-bottom: 2vw;
    }

    /*--------- gyik-------------------*/

    #faq {
        margin: 8vw auto;
        border-bottom: 1px solid white;
    }

    .sp-ea-single {
        width: 100%;
        margin: 2vw !important;
        padding: 2vw !important;
        border-radius: 10px !important;
    }

    /*--------- árak -------------------*/

    #cta-box {
        width: 90%;
        height: fit-content;
        margin: 5vw auto;
        margin-top: 144vw;
        color: white;
        border-radius: 20px;
        padding: 7vw;
        padding-bottom: 0;
    }

    #cta-box .center-box {
        display: flex;
        flex-direction: column;
    }

    #cta-box h2 {
        color: white;
        text-align: left;
    }

    #cta-box::after {
        top: 59vw;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .cta-text {
        width: 100%;
    }

    .cta-img {
        width: 50%;
        top: 0vw;
        left: 16vw;
        z-index: 1;
    }

    /*--------- térkép -------------------*/

    #map {
        margin: 13vw auto;
        text-align: center;
    }

    #map h2 {
        text-align: center;
    }

    #map img {
        border-radius: 20px;
        margin: 0;
        padding: 2vw;
    }

    #map .img-container img {
        width: 33%;
    }

    #map p {
        padding-right: 0;
    }

    /*-----------------------------------------------------------------------------------------nem főoldal header --------------*/

    /*-----------------------------------------------------------------------------------------keresési találatok--------------*/

    #search-results {
        width: 100%;
    }

    /*----------------------------------------------------------------------------------------------------- blogcikk formázások */

    .author {
        height: 4vw;
        margin-bottom: 4vw;
    }

    .author-image {
        width: 4vw;
        margin-right: 1vw;
    }

    #single-post .one-third,
    #single-post .two-third {
        width: 100%;
    }

    .single-content,
    .single-post-img {
        padding: 1vw 7vw;
    }

    .blog-img-title {
        bottom: 1vw;
        width: 86%;
    }

    .single-content img {
        width: 100%;
        margin: 2vw 0;
    }

    .single-content h2,
    .single-content h3,
    .single-content h4,
    .single-content h5,
    .single-content h6 {
        margin-top: 3.5vw !important;
    }

    aside .one-third {
        padding: 0 13vw;
        width: 100%;
    }

    .sidebar-box {
        padding-bottom: 3vw;
        text-align: center;
    }

    #sidebar-introduce {
        width: 70%;
        margin: 0 auto;
    }

    #sidebar-introduce .button {
        margin: 0 auto;
    }

    #sidebar-blog {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-around;
    }

    .sidebar-blogbox {
        width: 45%;
        text-align: left;
        padding-bottom: 3vw;
    }

    .sidebar-blogbox p,
    .sidebar-blogbox h6 {
        margin: 2vw 0 !important;
        padding: 0 2vw;
    }

    .sidebar-blogbox .button {
        margin-left: 2vw;
    }

    .sidebar-title {
        margin: 5vw 0;
        margin-left: 0vw;
        padding: 2vw;
    }

    aside .search-button {
        right: 15vw;
        top: 3vw;
    }

    .me-icon {
        width: 14vw;
        margin: 3vw auto;
    }

    /*---------------------------------------------------------------------------------------------köszönőoldalak */

    #thankyou {
        margin: 0 auto;
        text-align: center;
    }

    .success {
        width: 20vw;
        height: 19vw;
        margin-top: 0;
        position: relative;
    }

    #thankyou h2 {
        margin: 4vw 0;
    }

    #thankyou p {
        width: 80%;
        margin: 4vw auto;
    }

    #thankyou .button {
        margin: 4vw auto;
    }

    /*----------------------------------------------------------------------------------------------- kapcsolat, jelentkezés*/

    #contact-page {
        position: relative;
    }

    #contact-page .one-half {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #contact-page img {
        width: 65%;
        margin: 0 auto;
    }

    #contact-text {
        margin-top: 3vw;
        padding-left: 0vw;
        text-align: center;
    }

    .contact-box {
        margin-top: 2vw;
    }

    .contact-box [type="email"],
    .contact-box input[type="text"],
    .contact-box input[type="tel"],
    .contact-box textarea {
        width: 95% !important;
    }

    input[type="email"],
    input[type="text"],
    textarea {
        padding: 2.5vw 3.5vw;
        margin: 1vw;
        font-size: 2.1vw;
        text-align: center !important;
    }

    input[type="checkbox"] {
        width: 2.5vw;
        height: 2.5vw;
        margin-right: 2vw;
    }

    .wpcf7-checkbox {
        margin-bottom: 3vw !important;
        text-align: left;
    }

    .wpcf7-form label {
        margin-top: 2.5vw;
        width: 100%;
    }

    .search-container {
        margin: 8vw auto;
    }

    .search-button img {
        width: 3vw;
        height: 3vw;
    }

    .search-button {
        right: 25vw;
        top: 3vw;
    }

    .blog::after {
        background-size: cover;
        height: 170vw;
        top: 44vw;
        background-position: top center;
    }

    #blog-search .searchinput {
        width: 47vw;
    }

    /* -------------------------------------------------------------------------------------------------------404 formázások */

    #notfound {
        padding: 0;
        margin-top: 0vw;
        padding-bottom: 21vw;
    }

    #notfound h5 {
        margin: 5vw auto;
    }

    #notfound .button {
        margin: 5vw auto;
    }

    .error {
        margin-top: 5vw;
    }

    /* -------------------------------------------------------------------------------------------------------szolgáltatások*/

    .eszkoz {
        width: 45%;
        aspect-ratio: 1 / 1;
    }

    .eszkoz-text {
        padding: 2.5vw;
    }

    .eszkoz-text,
    .eszkoz-img-wrapper {
        border-radius: 5vw;
    }

    main {
        width: 100%;
        flex-direction: column;
        margin: 0 auto;
        padding: 0 10vw;
    }

    .page-img {
        width: 100%;
        margin: 0 auto;
    }

    .page-content {
        width: 100%;
        padding: 3vw;
        margin: auto;
    }

    .inner-page {
        height: 28vw;
    }
}

/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------mobil nézet  ------------------------------------------------------------------------ */

@media only screen and (max-width: 480px) {
    body {
        font-size: 4vw;
    }

    h1 {
        font-size: 7vw;
    }

    h2 {
        font-size: 6vw;
    }

    h3 {
        font-size: 5.5vw;
        margin-bottom: 1vw;
    }

    h4 {
        font-size: 5vw;
        margin-bottom: 1vw;
    }

    h5 {
        font-size: 4.7vw;
        margin-bottom: 1vw;
    }

    h6 {
        font-size: 4.3vw;
        margin-bottom: 1vw;
    }

    p,
    ul li,
    a,
    td,
    ::placeholder,
    ul,
    ul li,
    ol,
    ol li {
        font-size: 4vw;
        margin-bottom: 4vw;
    }

    .button,
    input[type="submit"] {
        padding: 4vw 9vw;
        border-radius: 2vw;
        margin: 4vw 0;
        text-align: center;
    }

    .button a,
    input[type="submit"] {
        font-size: 4vw;
    }

    input[type="search"],
    input[type="text"],
    input[type="tel"],
    input[type="email"],
    textarea {
        width: 100%;
        padding: 6.5vw 7.5vw;
        border-radius: 2vw;
        margin: 1vw auto;
        margin-bottom: 4vw;
        font-size: 5vw;
    }

    input[type="checkbox"] {
        width: 7vw;
        height: 7vw;
        float: left;
        margin: 3vw;
    }

    .center-box {
        width: 95%;
    }

    section h2 {
        text-align: center;
        margin-bottom: 5vw;
    }

    /* footer formázások */

    footer {
        clear: both;
        background-position: bottom 93vw left;
        background-repeat: no-repeat;
        overflow: hidden;
        height: fit-content;
    }

    .foot-logo {
        width: 34vw;
        margin: 17vw auto;
    }

    .social img {
        width: 10vw;
        height: 10vw;
        margin: 5vw;
    }

    .check {
        display: flex;
        justify-content: flex-start;
    }

    footer p {
        margin: 2vw 0;
    }

    footer ul {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* nav formázások */

    .headline {
        height: 15vw;
        width: 100%;
        padding: 0;
    }

    .logo {
        width: 35vw;
        height: 9vw;
        padding-top: 4vw;
        margin-left: 5vw;
    }

    #hamburger {
        margin-top: -9vw;
        margin-right: 2vw;
        padding: 4vw;
    }

    #hamburger::before {
        font-size: 5vw;
    }

    #hamburger::after {
        width: 8vw;
    }

    .nav-top li {
        padding: 6vw;
    }

    .nav-top li a,
    .nav-bottom li a {
        font-size: 4vw;
        color: black;
    }

    .bottom-line {
        padding: 4vw;
        height: fit-content;
        display: block;
        text-align: center;
    }
    .bottom-line img {
        width: 20vw;
        height: auto;
        margin: 5vw auto;
    }

    .bottom-menu {
        text-align: center;
        height: fit-content;
        clear: both;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .nav-bottom {
        margin: 0;
        width: 100%;
    }

    .nav-bottom li {
        padding: 6vw;
        display: block;
        width: 100%;
        text-align: center;
        border-top: 1px solid black;
        margin: 0;
    }

    .open-sub::before {
        left: 70%;
        border-left: 2vw solid transparent;
        border-right: 2vw solid transparent;
        border-top: 2.5vw solid black;
    }

    .nav-bottom li a {
        margin: 0;
    }

    footer .center-box {
        width: 100%;
    }

    /* főoldal header formázások */

    footer {
        text-align: center;
    }

    .foot-logo {
        width: 46vw;
        margin: 7vw auto;
        padding-top: 5vw;
    }

    footer h3 {
        margin: 3vw auto;
    }

    .social img {
        margin-bottom: 4vw;
        height: auto;
        width: 9vw;
    }

    .bottom-line {
        margin-top: 2vw;
        padding: 5vw;
        height: 29vw;
    }

    .bottom-line a,
    .bottom-line p {
        margin: 0 !important;
    }

    .bottom-line img {
        width: 22vw;
        height: auto;
        margin: auto;
        margin-top: 3vw;
    }

    .contact {
        padding: 5vw;
    }

    footer .center-box {
        height: fit-content;
        padding-bottom: 0;
    }

    footer p {
        margin: 2vw 0;
    }

    section h2 {
        margin-bottom: 3vw;
    }

    footer li {
        text-align: center;
    }

    .check {
        display: flex;
        justify-content: flex-start;
    }

    section h2 {
        text-align: center;
    }

    /* főoldal header formázások */

    header {
        width: 100%;
        position: relative;
    }

    .head-content {
        display: flex;
        flex-direction: column-reverse;
    }

    .head-content::after {
        height: 63vw;
    }

    .head-text {
        width: 100%;
        padding: 5vw;
        text-align: center;
        background-color: rgba(255, 255, 255, 0.5);
    }

    .head-text h1 {
        margin-bottom: 3vw;
        line-height: 1.2;
    }

    .head-text .button {
        margin: auto;
    }

    .head-image {
        width: 100%;
        z-index: 5;
        height: 124vw;
        right: 0;
        bottom: 0;
    }

    .head-image img {
        left: 0vw;
    }

    /*--------- előnyök-------------------*/

    #advantages {
        margin: 3vw auto;
    }

    #advantages .center-box {
        flex-flow: row wrap;
        justify-content: space-between;
    }

    .advantage {
        padding: 4vw;
        width: 90%;
        margin: 2vw auto;
        margin-bottom: 20px;
    }

    /*--------- intro-------------------*/

    #intro .center-box {
        margin: 0 auto;
        width: 90%;
        flex-direction: column;
    }

    .text-side {
        padding: 4vw;
    }

    .info-section {
        margin-left: 0;
    }

    .info-grid {
        display: flex;
        gap: 4vw;
    }

    .stats-container {
        gap: 4vw;
        margin-top: 0;
    }

    .stat-number {
        width: 21vw;
        padding-right: 20px;
    }

    .stat-number strong {
        font-size: 8.1vw;
    }

    .stat-number span {
        font-size: 3.1vw;
    }

    /*--------- szolgáltatások-------------------*/

    #szolgaltatasok {
        position: relative;
        padding-top: 45vw;
    }

    #szolgaltatasok::before {
        height: 34vw;
        top: 7vw;
        left: 0;
        z-index: -1;
    }

    .service-cards {
        flex-flow: row wrap;
        gap: 5vw;
        padding: 0;
    }
    .service-card {
        width: 90%;
        border-radius: 20px;
        margin-top: 16vw;
    }

    .service-card img {
        border-radius: 20px;
    }

    .service-card h4 {
        top: -8vw;
    }

    .card-text {
        border-radius: 20px;
        padding: 2vw;
    }

    /*--------- folyamat -------------------*/

    #process {
        margin: 28vw auto;
    }

    #process .button {
        margin: 5vw auto;
    }

    #process h2 {
        margin-bottom: 2vw;
    }

    .steps-container {
        gap: 5vw;
    }

    .step {
        border-radius: 20px;
        padding: 4vw;
        gap: 0.8vw;
        width: 66%;
    }

    .step img {
        width: 10vw;
        height: auto;
        flex-shrink: 0;
    }

    .step-text h6 {
        margin: 0 0 1vw 0;
    }

    /*--------- bemutatkozas -------------------*/

    #introduce {
        margin: 26vw auto;
        overflow: visible;
    }

    #introduce .center-box {
        flex-direction: column;
    }

    .introduce-img {
        width: 85%;
        margin: 4vw auto;
    }

    .introduce-img::after {
        width: 32vw;
        height: 54vw;
        position: absolute;
        top: 56vw;
        left: -8vw;
        z-index: 2;
    }

    .introduce-text {
        width: 90%;
        margin: 4vw auto;
        padding-left: 0;
    }

    #introduce::after {
        content: "";
        background-image: url(/wp-content/uploads/2026/05/gradient-circle2.svg);
        background-size: contain;
        background-repeat: no-repeat;
        width: 60vw;
        height: 60vw;
        position: absolute;
        top: 22vw;
        right: 22vw;
        z-index: -1;
        opacity: 0.7;
    }

    /*--------- referenciák-------------------*/

    #references {
        margin: 8vw auto;
    }

    #references .center-box {
        flex-flow: row wrap;
    }

    #references::before {
        width: 100%;
        height: 20vw;
        top: 106vw;
        display: none;
    }

    /*--------- velemenyek-------------------*/

    #opinions {
        margin: 5vw auto;
    }

    #opinions h2 {
        margin-bottom: 2vw;
    }

    /*--------- gyik-------------------*/

    #faq {
        margin: 21vw auto;
        border-bottom: 1px solid white;
    }

    .sp-ea-single {
        margin: 5vw auto !important;
        padding: 6vw !important;
        border-radius: 10px !important;
    }

    /*--------- árak -------------------*/

    #cta-box {
        width: 90%;
        height: fit-content;
        margin: 5vw auto;
        margin-top: 20vw;
        color: white;
        border-radius: 20px;
        padding: 7vw;
        padding-bottom: 0;
    }

    #cta-box .center-box {
        display: flex;
        flex-direction: column;
    }

    #cta-box h2 {
        color: white;
        text-align: left;
    }

    #cta-box::after {
        top: 127vw;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .cta-text {
        width: 100%;
    }

    .cta-img {
        width: 80%;
        top: 0;
        left: 5vw;
        z-index: 1;
    }

    /*--------- térkép -------------------*/

    #map {
        margin: 13vw auto;
        text-align: center;
    }

    #map .button {
        margin: 6vw auto;
    }
    #map h2 {
        text-align: center;
    }

    #map img {
        border-radius: 20px;
        margin: 0;
        padding: 2vw;
    }

    #map .img-container img {
        width: 32%;
        margin: 3vw auto;
    }

    #map p {
        padding-right: 0;
    }

    /*----------------------------------------------------------------------------------------- nem főoldal header    */

    .subhead-text h1 {
        width: fit-content;
        margin: 2vw auto;
        padding: 11vw 2vw;
        background-color: rgb(61, 0, 188, 0);
    }

    .subhead-title h1 {
        background-color: rgba(0, 45, 83, 0.75);
        padding: 3.5vw;
    }

    .subhead-text {
        width: 100%;
        padding: 14vw 0;
        flex-direction: column-reverse;
    }

    .subhead-content {
        padding: 0 5vw;
    }

    /* -------------------------------------------------------------------------------------------nem főoldal body */

    .inner-page,
    .subhead-title,
    .subhead-title {
        width: 100%;
        height: fit-content;
        padding-top: 10vw;
    }

    main {
        flex-direction: column;
        padding: 12vw 0;
    }

    .page-img,
    .page-content {
        width: 100%;
        max-width: 100%;
        padding: 5vw;
    }

    .page-img .contact {
        padding: 6vw;
        margin: 0 3vw;
        border-radius: 11vw;
        border-top-right-radius: 0;
    }

    /* ----------------------------------------------------------------------------------------- blogoldal */

    .pagination {
        background-color: #bbdeff;
    }

    .pagination,
    .nav-links {
        padding: 20vw 0;
    }

    .nav-links a,
    .pagination a {
        padding: 3vw;
    }

    .page-numbers.current {
        padding: 3.5vw;
    }

    #blog-search,
    #blog-search .searchinput {
        width: 100%;
        margin: 3vw auto;
    }

    .search-button img {
        width: 7vw;
        height: 7vw;
    }

    .search-button {
        right: 3vw;
        top: 11.3vw;
    }

    .search-container {
        margin: 5vw auto;
    }

    .keywords {
        width: 90%;
        display: inline;
    }

    .keywords a {
        float: left;
        padding: 4vw 6vw;
    }

    .pager-bottom {
        width: 90%;
        margin: 10vw auto;
    }

    .active-page {
        padding: 5vw;
    }

    #article-container {
        margin-top: 10vw;
        clear: both;
        background: rgba(0, 95, 89, 1);
    }

    .after-article {
        padding-top: 9vw;
        margin-bottom: -8vw;
    }

    article {
        width: 100%;
        margin: 5vw;
    }

    .article-text {
        padding: 5vw;
    }

    article h5 {
        margin: 2vw 0;
    }

    article p {
        margin-bottom: 2vw;
    }

    #blog::after {
        background-size: cover;
        height: 615vw;
        top: -53vw;
        background-position: top center;
    }

    .eszkoz-container {
        margin: 7vw auto;
    }

    main + #szolgaltatasok {
        margin-bottom: 25vw;
    }

    #advantages + #igy-zajlik {
        margin-top: 25vw;
    }

    textarea {
        min-height: 40vw;
    }

    /*-----------------------------------------------------------------------------------keresési találatok--------------*/

    #search-results article {
        width: 100%;
    }

    /*----------------------------------------------------------------------------------------- blogcikk formázások*/

    .author {
        height: 5vw;
        margin-bottom: 5vw;
    }

    .author-image {
        width: 7vw;
        margin-right: 2vw;
    }

    .date::before {
        margin: 0 4vw;
    }

    .single-content,
    .single-post-img {
        padding: 5vw;
    }

    .single-post-img {
        position: relative;
    }

    .blog-img-title {
        position: static;
        width: 100%;
        text-align: left;
        background-color: rgb(61, 0, 188, 0);
        padding: 0.5vw;
        display: none;
    }

    .date,
    .blog-img-title h2 {
        color: #141414;
        margin: 3vw 0;
    }

    .single-content img {
        margin: 5vw 0;
    }

    .single-content h2,
    .single-content h3,
    .single-content h4,
    .single-content h5,
    .single-content h6 {
        margin-top: 8vw !important;
        margin-bottom: 3vw;
        line-height: 1.2;
    }

    .emphasis {
        padding: 4vw;
    }

    .single-content p {
        line-height: 1.3;
    }

    aside .one-third {
        padding: 4vw;
    }

    .sidebar-box {
        padding-bottom: 4vw;
    }

    aside ul li::before {
        content: none;
    }

    .sidebar-title {
        margin: 5vw 0;
        margin-left: 0vw;
        padding: 4vw;
        margin-top: 13vw;
    }

    .sidebar-blogbox {
        margin-bottom: 10vw;
        padding-bottom: 5vw;
        box-shadow:
            rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
            rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
        width: 90%;
        margin: 12vw auto;
    }

    .sidebar-blogbox p,
    .sidebar-blogbox h6 {
        margin: 4vw 0 !important;
        padding: 0 3vw;
        text-decoration: none !important;
    }

    .sidebar-blogbox .button {
        margin-left: 3vw;
    }

    aside .search-button {
        right: 4vw;
        top: 12vw;
    }

    .single-post-img img {
        border-radius: 7vw;
    }

    /*--------------------------------------------------------------------- kapcsolat, jelentkezés---------------*/

    #contact-page img {
        width: 90%;
    }

    #contact-text {
        margin-top: 3vw;
        padding-left: 0vw;
        text-align: center;
    }

    .contact-box [type="email"],
    .contact-box input[type="text"],
    .contact-box input[type="tel"],
    .contact-box textarea {
        width: 95% !important;
    }

    input[type="email"],
    input[type="text"],
    textarea {
        padding: 4vw 6vw;
        text-align: center !important;
    }

    input[type="checkbox"] {
        width: 6vw;
        height: 6vw;
        margin-right: 3vw;
    }

    .wpcf7-checkbox {
        margin-bottom: 3vw !important;
        text-align: left;
    }

    .wpcf7-form label {
        margin-top: 8.5vw;
        width: 100%;
    }

    #contact-text input[type="email"],
    #contact-text input[type="text"],
    #contact-text textarea {
        width: 100% !important;
    }

    #contact-text textarea {
        height: 42vw;
    }

    .margintop {
        margin-top: 15vw !important;
    }

    #contact-text input[type="submit"] {
        margin: 5vw 0 !important;
    }

    .wpcf7-list-item {
        margin-bottom: 8vw !important;
    }

    .check p {
        text-align: left;
    }

    .me-icon {
        width: 30vw;
        margin: 3vw auto;
    }

    #sidebar-introduce {
        text-align: center;
    }

    #sidebar-introduce .button {
        margin: 4vw auto;
    }

    /* -----------------------------------------------------------------------------------------404 formázások */

    #notfound h3 {
        margin: 2vw auto;
        padding: 3vw;
    }

    #notfound {
        padding: 5vw;
        margin-top: 0;
        margin-bottom: 0vw;
        line-height: 1.4;
    }

    .notfound {
        margin-bottom: 2vw;
        width: 90%;
    }

    #notfound .button {
        margin: 5vw auto;
    }

    .error {
        margin-top: 6vw;
        width: 85%;
    }

    /*------------köszönőoldalak-----------------*/
    #thankyou {
        padding: 5vw 10vw;
        margin-top: 0vw;
    }

    .success {
        width: 32vw;
        height: 34vw;
        margin: auto;
        position: relative;
    }

    #thankyou h2 {
        margin: 6vw 0;
    }

    #thankyou p {
        width: 100%;
        margin: 6vw auto;
    }

    #thankyou .button {
        margin: 8vw auto;
    }
}