/*
Theme Name: nRise Theme
Theme URI: https://nrise.hu/
Description: Custom WordPress theme for nRise Consulting Kft.
Version: 1.1
Author: Antigravity
Text Domain: nrise-theme
*/

:root {
    --nrise-orange: #df6b13;
    --nrise-yellow: #ffc600;
    --nrise-yellow-orange: #ffa313;
    --nrise-gray: #88949e;
    --nrise-gray-2: #778997;
    --nrise-green: #2dc40f;
    --nrise-darkgray: #3d3d3d;
    --nrise-lightgray: #EAEAEA;
    --nrise-lightgray-2: #f8f8f8;
    --nrise-red: #f75149;
    --battery-yellow: #ffc600;
    --battery-yellow-2: #ffe95c;
    --battery-orange: #feaa07;
    --battery-orange-2: #a36700;
    --battery-red: #ff822e;
    --battery-red-2: #9b3100;
    --battery-green: #5dcd13;
    --battery-green-2: #378b00;
    --text-color: #3d3d3d;
    --text-small: 0.95rem; /*17*/
    --text-large: 1.1666rem; /*21*/
    --text-large: clamp(1.05rem, 1.25vw, 1.1666rem); /*21*/
    --text-large-1: 1.22rem; /*21,98*/
    --text-large-1-2: clamp(25px, 2.35vw, 1.66rem); /*29,88*/
    --text-large-2: 2.1rem; /*37,82*/
    --text-large-2: clamp(1.5rem, 4vw, 37px); /*37,82*/
    --text-large-3: clamp(28px, 4vw, 46px); /*45,86*/
    --text-large-3-2: clamp(29px, 4vw, 54px); /*54.77*/
    --text-large-4: clamp(30px, 5.25vw, 3.33rem); /*60*/
    --text-huge: 4.3rem;    /*78,21*/
    --text-huge: clamp(35px, 4vw, 4.3rem); /*78,21*/
    --text-gigant: clamp(40px, 8vw, 114px);  /*117,07*/
    --text-gigant-1: clamp(34px, 8vw, 114px);  /*109*/
    --text-gigant-2: clamp(40px, 8.8vw, 140px);  /*137.28 px*/
    --text-gigant-3: clamp(75px, 21.5vw, 268px);  /*268px*/
    --header-width: 1520px;
    --content-width-home: 1350px;
    --content-width-default: 1100px;
    --content-width-default-2: 1020px;
    --content-width-narrow: 770px;
    --content-width-narrow-1: 650px;
    --content-width-narrow-2: 850px;
    --content-width-narrow-3: 1000px;
    --content-width: min(90%, var(--content-width-default));
    --box-padding: 4rem 6rem;
    --gap-section-y: 2rem;
    --shadow-default: 20px 20px 30px rgba(0, 0, 0, 0.1);
    --shadow-default-hover: 22px 22px 30px rgba(0, 0, 0, 0.175);
    --shadow-default-2: 10px 20px 10px rgba(0, 0, 0, 0.2);
}
html {
    font-size: 112.5%;
    overflow-x: clip;
}

body {
    background-image: url('img/bg-3.webp');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top center;
    overflow-x: clip;
    transition: background-color 0.4s ease;
}
body.home {
    background-image: url('img/bg-1.webp');
    --content-width: var(--content-width-home);
}
@media (max-width: 1024px) {
    body {
        background-size: auto;
    }
}

a {
    text-decoration: none;
    color: var(--nrise-orange);
    cursor: pointer;
}

ul,
ol {
    padding-left: 1em;
}

.dekor-01,
.dekor-02 {
    position: relative;
}
.dekor-01::before {
    content: '';
    position: absolute;
    display: block;
    width: 350px;
    height: 105px;
    background-image: url('img/dekor-nrise-01.svg');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top center;
    top: 0.65em;
    transform: translateY(-50%);
    left: calc(50% - 950px);
    z-index: 0;
}

.dekor-01::after {
    content: '';
    position: absolute;
    display: block;
    width: 535px;
    height: 820px;
    background-image: url('img/dekor-nrise-02.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top left;
    top: -18rem;
    right: calc(50% - 1255px);
    z-index: 0;
    opacity: 0.25;
}

.arrow-circle {
    position: relative;
}

.arrow-circle img {
    position: absolute;
    z-index: 2;
    width: 184px;
    height: 184px;
    top: 0;
    left: 0;
}
.arrow-circle-right img {
    left: unset;
    right: 0;
    transform: scaleX(-1) translateX(-80%) translateY(-50%) rotate(-40deg);
}
.arrow-circle-left img {
    left: 0;
    right: unset;
    transform: scaleX(1) translateX(0%) translateY(-50%) rotate(-40deg);
}
.page-template-template-ekr-tao .arrow-circle-left img {
    left: 0;
    right: unset;
    transform: scaleX(1) translateX(25%) translateY(-75%) rotate(-40deg);
}
@media (max-width: 768px) {
    .arrow-circle img {
        width: 80px;
        height: 80px;
    }
}

.icon-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 34px;
    height: 34px;
    /* background-color: #000; */
    border-radius: 50%;
}

.social-icon {
    width: 100%;
    height: 100%;
    background-color: #333;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transition: background-color 0.2s;
}

.icon-link:hover .social-icon {
    background-color: var(--nrise-orange);
}

.spacer-160 {
    height: 160px;
}

.spacer-80 {
    height: 80px;
}

.spacer-60 {
    height: 60px;
}

.spacer-40 {
    height: 40px;
}

.spacer-30 {
    height: 30px;
}

.button {
    background-color: var(--nrise-orange);
    color: #FFFFFF;
    padding: 12px 20px;
    border-radius: 25px;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.button.hide-icon::after {
    content: none;
}

.button::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: #ffffff;
    -webkit-mask-image: url('img/arrow-rb.svg');
    mask-image: url('img/arrow-rb.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.button.arrow-rt:after {
    -webkit-mask-image: url('img/arrow-rt.svg');
    mask-image: url('img/arrow-rt.svg');
}
.button:hover {
    background-color: var(--nrise-gray);
    color: #fff;
}

.button:hover::after {
    background-color: #fff;
    transform: rotate(-90deg);
}
.button.arrow-rt:hover::after {
    background-color: #fff;
    transform: rotate(90deg);
}

.button.hover-45deg:hover::after {
    transform: rotate(45deg);
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px max(40px, calc((100% - var(--header-width)) / 2));
    font-family: 'Inter', sans-serif;
    width: 100%;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: background-color 0s ease, box-shadow 0.3s ease, padding-top 0.4s ease, padding-bottom 0.4s ease;
}

.page-header.scrolled {
    background-color: rgba(255, 255, 255, 0.98);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.page-header .header-logo {
    max-height: 67px;
    margin-left: -10px;
    transition: max-height 0.4s ease;
}
.page-header.scrolled{
    padding-top: 10px;
    padding-bottom: 10px;
}
.page-header.scrolled .header-logo {
    max-height: 50px;
}

.page-header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;
    margin-left: 40px;
    gap: 20px;
}

.page-header nav ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: center;
    gap: 20px;
}
.page-header nav ul.header-social-links {
    gap: 0.5rem;
}

.page-header nav a:not(.button) {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: font-weight 0.2s ease, color 0.2s ease;
}

.page-header nav > ul > li:hover > a:not(.button) {
    color: var(--nrise-orange);
    font-weight: 700;
}

.page-header nav > ul > li.has-submenu > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.page-header nav > ul > li.has-submenu > a::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #333;
    -webkit-mask-image: url('img/arrow-menu.svg');
    mask-image: url('img/arrow-menu.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transition: background-color 0.2s ease;
}

.page-header nav > ul > li:hover > a:not(.button)::after {
    background-color: var(--nrise-orange);
}

/* Submenu styling */
.has-submenu {
    position: relative;
}

.page-header nav ul.submenu {
    visibility: hidden;
    opacity: 0;
    margin-top: -0.5rem;
    pointer-events: none;
    transition: opacity 0.3s ease, margin-top 0.3s ease, visibility 0.3s;
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    transform: translateX(-1.4rem);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background-color: rgba(255, 255, 255, 0.98);
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 2rem 3rem 4rem -2rem rgba(0, 0, 0, 0.3);
    min-width: 380px;
    z-index: 100;
    text-transform: uppercase;
}

.has-submenu:hover > ul.submenu {
    visibility: visible;
    opacity: 1;
    margin-top: 0;
    pointer-events: auto;
}

.page-header nav ul.submenu .submenu {
    top: -1.5rem;
    left: calc(100% + 0.5rem);
    transform: none;
    margin-left: 0.5rem;
}

/* Hover bridge for diagonal movement */
.page-header nav ul.submenu .submenu::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -2rem;
    width: 2rem;
    background: transparent;
}

.page-header nav ul.submenu li {
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.page-header nav ul.submenu li:last-child {
    border-bottom: none;
}

.page-header nav ul.submenu a {
    display: inline-flex;
    align-items: start;
    padding: 0.75rem 0;
    gap: 10px;
    font-weight: 500;
    width: 100%;
    box-sizing: border-box;
    white-space: normal;
    word-break: break-word;
    transition: font-weight 0.2s ease, color 0.2s ease;
}

.page-header nav ul.submenu a::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-top: 0.2rem;
    background-color: #333;
    -webkit-mask-image: url('img/arrow-rb.svg');
    mask-image: url('img/arrow-rb.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    flex-shrink: 0;
    transition: transform 0.3s ease, background-color 0.2s ease;
}

.page-header nav ul.submenu li.has-submenu > a::before {
    -webkit-mask-image: url('img/plus.svg');
    mask-image: url('img/plus.svg');
    width: 14px;
    height: 14px;
}

.page-header nav ul.submenu a:hover {
    color: var(--nrise-orange);
    font-weight: 700;
}

.page-header nav ul.submenu a:hover::before {
    transform: rotate(-90deg);
    background-color: var(--nrise-orange);
}

.page-header nav ul.submenu li:not(.has-submenu) > a::before {
    /* transform-origin: bottom right; */
}

.page-header nav ul.submenu li:not(.has-submenu) > a:hover::before {
    /* transform: scale(1.1); */
}

@media (max-width: 768px) {
    .page-header nav ul.submenu {
        min-width: auto;
        width: 100%;
    }
}

body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    /* background-image: url('img/bg-1.webp'); */
    /* background-position: top center; */
    /* background-repeat: repeat-x; */
}

section, .page-header > .container, footer > .row {
    width: 100%;
    box-sizing: border-box;
    padding-left: max(20px, calc((100% - var(--content-width)) / 2));
    padding-right: max(20px, calc((100% - var(--content-width)) / 2));
    padding-top: var(--gap-section-y);
    padding-bottom: var(--gap-section-y);
}

#references {
    padding-left: 0;
    padding-right: 0;
    /* Prevent horizontal scroll from arrows or long slides */
    /* overflow: hidden;  */
    /* show overflow shadow */
    overflow: visible; 
    position: relative;
    min-height: 12rem;
}

#references h2 {
    font-size: clamp(2rem, 12vw, 12rem);
    color: rgba(255, 255, 255, 0.25);
    text-shadow: 0 10px 100px rgba(0, 0, 0, 0.1);
    text-shadow: 0 10px 180px rgba(0, 0, 0, 0.4);
    text-transform: uppercase;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 0;
    margin: 1rem 0 0 0;
    padding: 0;
}

.references-carousel {
    margin-top: 5rem;
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
}

.references-carousel .carousel-item {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0.75rem; /* 1.5rem gap (0.75 on each side) */
    padding: 2rem;
    background-color: #ffffff;
    border-radius: 2rem;
    box-sizing: border-box;
    outline: none; /* Slick fókusz keret eltávolítása */
    aspect-ratio: 1 / 1;
    border: 1px solid var(--nrise-lightgray);
}

.references-carousel .carousel-item img {
    max-width: 100%;
    max-height: 130px;
    height: auto;
    margin: 0 auto;
    display: block;
}

@media (max-width: 1024px) {
    #references h2 {
        text-shadow: 0 10px 140px rgba(0, 0, 0, 0.6);
    }
}
@media (max-width: 600px) {
    #references h2 {
        text-shadow: 0 10px 100px rgba(0, 0, 0, 1);
    }
}

.batteries {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 4rem 1rem;
    align-items: flex-start;
    /* transform: scale(0.9); */
    /* transform-origin: center; */
}

.battery-item {
    position: relative;
    flex: 1;
    max-width: 326px;
}

.battery-item:nth-of-type(1) {
    z-index: 15;
}
.battery-item:nth-of-type(1) .battery-icon {
    z-index: 17;
}
.battery-item:nth-of-type(1) .battery-submenu {
    z-index: 16;
}
@media (max-width: 1024px) {
    .battery-item:nth-of-type(1) .battery-submenu {
        z-index: 18;
    }
}
@media (max-height: 900px)
{
    .batteries {
        transform: scale(0.9);
    }
    .page-header .header-logo {
        max-height: 50px;
    }
}

.battery-item:nth-of-type(2) {
    z-index: 10;
}
.battery-item:nth-of-type(2) .battery-icon {
    z-index: 12;
}
.battery-item:nth-of-type(2) .battery-submenu {
    z-index: 11;
}
@media (max-width: 1024px) {
    .battery-item:nth-of-type(2) .battery-submenu {
        z-index: 13;
    }
}

.battery-item:nth-of-type(3) {
    z-index: 5;
}
.battery-item:nth-of-type(3) .battery-icon {
    z-index: 7;
}
.battery-item:nth-of-type(3) .battery-submenu {
    z-index: 6;
}
@media (max-width: 1024px) {
    .battery-item:nth-of-type(3) .battery-submenu {
        z-index: 8;
    }
}

.battery-item:nth-of-type(4) {
    z-index: 1;
}
.battery-item:nth-of-type(4) .battery-icon {
    z-index: 3;
}
.battery-item:nth-of-type(4) .battery-submenu {
    z-index: 2;
}
@media (max-width: 1024px) {
    .battery-item:nth-of-type(4) .battery-submenu {
        z-index: 4;
    }
}

.battery-item:hover {
    /* z-index: 100; */
}

.battery-body {
    transition: transform 0.6s ease;
    text-align: center;
    position: relative;
    transform-origin: center 75%;
}

.battery-item:hover .battery-body {
    transform: scale(1.1);
}

.battery-bg {
    filter: grayscale(1);
    width: 230px;
    height: 340px;
    /* aspect-ratio: 305 / 450; */
}

.battery-body .battery-color {
    display: inline-block;
    position: absolute;
    bottom: 18.5%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    /* width: 52%; */
    /* height: 70%; */
    width: 150px;
    height: 289px;
    background-color: var(--battery-yellow-2);
    opacity: 1;
    mix-blend-mode: overlay;
    animation: fillBattery 2s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.battery-item:nth-of-type(1) .battery-color { animation-delay: 0.3s; }
.battery-item:nth-of-type(2) .battery-color { animation-delay: 0.5s; }
.battery-item:nth-of-type(3) .battery-color { animation-delay: 0.7s; }
.battery-item:nth-of-type(4) .battery-color { animation-delay: 0.9s; }
.battery-body .battery-color:nth-of-type(1) {
    display: none;
}
.battery-body .battery-color:nth-of-type(2) {
    opacity: 1;
    mix-blend-mode: color;
}

.battery-yellow .battery-color { background-color: var(--battery-yellow-2); }
.battery-orange .battery-color { background-color: var(--battery-orange-2); }
.battery-red .battery-color { background-color: var(--battery-red-2); }
.battery-green .battery-color { background-color: var(--battery-green-2); }

.battery-plan {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) scale(1);
    width: 100%;
    height: 100%;
    background-image: url('img/battery-bg-plant.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 3;
    transform-origin: bottom right;
    transition: transform 0.6s ease;
}

.battery-label {
    color: #ffffff;
    text-align: center;
    text-transform: uppercase;
}

.battery-label p, .battery-label h3 {
    margin: 0;
    display: inline;
    padding: 0.25rem;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.battery-yellow .battery-label h3 { background-color: var(--battery-yellow); }
.battery-orange .battery-label h3 { background-color: var(--battery-orange); }
.battery-red .battery-label h3 { background-color: var(--battery-red); }
.battery-green .battery-label h3 { background-color: var(--battery-green); }
.battery-label h3 a { color: #fff; }

.battery-icon {
    width: 8.375rem;
    height: 8.375rem;
    padding: 1.8rem;
    box-sizing: border-box;
    background-image: url('img/icon-bg.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    left: 0;
    top: 43%;
    transform: translateY(-50%);
    border-radius: 100%;
}

.battery-icon::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    -webkit-mask-image: var(--icon-url);
    mask-image: var(--icon-url);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.battery-yellow .battery-icon {
    background-color: var(--battery-yellow);
}
.battery-orange .battery-icon {
    background-color: var(--battery-orange);
}
.battery-red .battery-icon {
    background-color: var(--battery-red);
}
.battery-green .battery-icon {
    background-color: var(--battery-green);
}

/* Battery Submenu */
.battery-submenu {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    margin-top: 2rem;
    pointer-events: none;
    transition: opacity 0.6s ease, margin-top 0.6s ease, visibility 0.6s;
    position: absolute;
    top: 43%;
    left: 50%;
    transform: translate(-10%,-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 1.5rem 1.5rem 1.5rem 2.5rem;
    border-radius: 1rem;
    border: 1px #FFFFFF solid;
    box-shadow: 2rem 3rem 4rem -2rem rgba(0, 0, 0, 0.3);
    min-width: 320px;
    text-transform: uppercase;
}

.battery-item:hover .battery-submenu {
    visibility: visible;
    opacity: 1;
    margin-top: 0;
    pointer-events: auto;
}
.battery-item:hover .battery-plan {
    transform: translateX(-50%) scale(1.025);
}

.battery-yellow .battery-submenu { background-color: var(--battery-yellow); }
.battery-orange .battery-submenu { background-color: var(--battery-orange); }
.battery-red .battery-submenu { background-color: var(--battery-red); }
.battery-green .battery-submenu { background-color: var(--battery-green); }

.battery-submenu-title {
    color: #fff;
    font-weight: 800;
    font-size: 1.3em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 0.5rem;
    width: 100%;
    text-align: left;
}

.battery-submenu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: left;
}

.battery-submenu ul li {
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.battery-submenu ul li:last-child {
    border-bottom: none;
}

.battery-submenu a {
    display: inline-flex;
    align-items: start;
    padding: 0.4rem 0;
    gap: 10px;
    font-weight: 500;
    width: 100%;
    color: #fff;
    text-decoration: none;
    transition: font-weight 0.2s ease;
}

.battery-submenu a::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-top: 0.2rem;
    background-color: #fff;
    -webkit-mask-image: url('img/arrow-rb.svg');
    mask-image: url('img/arrow-rb.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    /* transform-origin: bottom right; */
}

.battery-submenu a:hover {
    font-weight: 700;
}

.battery-submenu a:hover::before {
    transform: scale(1.1);
    transform: rotate(-90deg);
}

/* other-services-submenu styling like submenu */


.other-services{
    position: relative;
    margin: auto;
    width: 30rem;
    max-width: calc(100% - 2rem);
}

.other-services .button{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 21;
    transition: background-color 0.3s ease, color 0.3s ease;
    cursor: default;
    min-height: 2.5rem;
    /* font-weight: 800; */
}
.other-services .button:after{
    transition: transform 0.3s ease;
}
.other-services:hover .button{
    background-color: var(--nrise-gray);
    color: #FFFFFF;
}
.other-services:hover .button:after{
    filter: brightness(0) invert(1);
    transform: rotate(-90deg);
}

.other-services .submenu {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    margin-bottom: -1rem;
    pointer-events: none;
    transition: opacity 0.3s ease, margin-top 0.3s ease, visibility 0.3s;
    display: flex;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    text-transform: uppercase;
    background-color: rgba(255, 255, 255, 0.98);
    padding: 1.5rem 1.5rem 3rem 1.5rem;
    border-radius: 1rem;
    box-shadow: 2rem 3rem 4rem -2rem rgba(0, 0, 0, 0.3);
    width: calc(100% + 0.5rem);
    z-index: 20;
    transition: margin-bottom 0.4s ease,visibility 0.2s ease,opacity 0.2s ease;
}

.other-services:hover .submenu,
.other-services:focus-within .submenu {
    visibility: visible;
    opacity: 1;
    margin-bottom: 1rem;
    pointer-events: auto;
    list-style: none;
}

.other-services .submenu li {
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.other-services .submenu li:last-child {
    border-bottom: none;
}

.other-services .submenu a {
    display: inline-flex;
    align-items: start;
    padding: 0.75rem 0;
    gap: 10px;
    color: var(--text-color);
    text-decoration: none;
    font-weight: 500;
    width: 100%;
    transition: font-weight 0.2s ease, color 0.2s ease;
}

.other-services .submenu a::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-top: 0.2rem;
    background-color: #333;
    -webkit-mask-image: url('img/arrow-rb.svg');
    mask-image: url('img/arrow-rb.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    flex-shrink: 0;
    transition: transform 0.3s ease, background-color 0.2s ease;
}

.other-services .submenu a:hover {
    color: var(--nrise-orange);
    font-weight: 700;
}

.other-services .submenu a:hover::before {
    transform: rotate(-90deg);
    background-color: var(--nrise-orange);
}

/* Section Headers and Intro Texts */
section h1, 
section h2 {
    text-align: center;
    font-size: 4.5rem;
    font-size: clamp(2rem, 3.8vw, 4.5rem);
    text-transform: uppercase;
}

.highlight-text {
    display: inline !important;
    line-height: 1.2;
    color: #ffffff;
    background-color: var(--nrise-orange);
    padding: 0.1em 0.3em 0.06em 0.3em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    border-radius: 0.2em;
}
.highlight-text.inline-block{
    display: inline-block !important;
}

.highlight-block {
    display: block;
    /* margin: 1rem auto; */
    margin-left: auto;
    margin-right: auto;
    background-color: var(--nrise-orange);
    color: #ffffff;
    border-radius: 1rem;
    padding: 0.5rem 1rem;
}

.highlight-yellow {
    background-color: var(--nrise-yellow);
}
.highlight-yellow-orange {
    background-color: var(--nrise-yellow-orange);
}
.highlight-gray {
    background-color: var(--nrise-gray);
}
.highlight-gray-2 {
    background-color: var(--nrise-gray-2);
}
.highlight-green {
    background-color: var(--nrise-green);
}

.corner-border-1 {
    position: relative;
    max-width: 800px;
    margin: 1rem auto;
    padding: 1.5rem;
    text-align: center;
    /* font-size: 1.2rem; */
    font-weight: 300;
}
.hero-subheading.corner-border-1 {
    margin-top: 0rem;
}

.corner-border-1::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 2rem;
    height: 3em;
    border-top: 5px solid var(--nrise-orange);
    border-left: 5px solid var(--nrise-orange);
}

.corner-border-1::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 2rem;
    height: 3em;
    border-bottom: 5px solid var(--nrise-orange);
    border-right: 5px solid var(--nrise-orange);
}
@media (max-width: 768px) {
    .corner-border-1 br {
        display: none;
    }
}

.blog-header {
    filter: drop-shadow(0 0 447px rgba(0, 0, 0, 0.2));
}
.blog-header-text {
    text-align: center;
    margin: 0 auto 3rem auto;
}

.blog-header-text .pre-title {
    background-color: var(--nrise-gray);
    color: #ffffff;
    border-radius: 9999px;
    text-transform: uppercase;
    padding: 0.3rem 1.2rem;
    display: inline-block;
    /* font-weight: 700; */
    font-size: 1rem;
    margin-bottom: 1rem;
    margin-top: 0;
}

.blog-header-text h2 {
    color: var(--nrise-orange);
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.blog-header-text p:last-child {
    margin-top: 0;
}

.hr-line-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.hr-line-container::before,
.hr-line-container::after {
    content: "";
    flex-grow: 1;
    height: 2px;
    background-color: var(--nrise-gray-2);
    opacity: 0.3;
    /* width: 60%; */
}

.hr-line-container::before {
    margin-right: 1.5rem;
}

.hr-line-container::after {
    margin-left: 1.5rem;
}

.btn-small-arrow::after {
    width: 10px !important;
    height: 10px !important;
}

.form-item {
    position: relative;
    margin-bottom: 1.5rem;
}

.form-item:last-child {
    margin-bottom: 0;
}

.form-item input:not([type="checkbox"]),
.form-item textarea,
.form-item select {
    width: 100%;
    padding: 1rem 1.5rem 1rem 1.5rem;
    border: 1px solid var(--nrise-lightgray);
    border-radius: 1rem;
    background-color: #ffffff;
    font-family: inherit;
    font-size: 1rem;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.3s ease;
}

.form-item select option {
    color: var(--nrise-gray);
}

.form-item select option:first-child {
    color: var(--nrise-gray);
}

.form-item textarea {
    min-height: 150px;
    resize: vertical;
}

.form-item input:not([type="checkbox"]):focus,
.form-item textarea:focus,
.form-item select:focus {
    border-color: var(--nrise-orange);
}

.form-item label:not(.checkbox-label) {
    position: absolute;
    top: 50%;
    left: 1.5rem;
    transform: translateY(-50%);
    color: var(--nrise-gray);
    transition: all 0.3s ease;
    pointer-events: none;
    margin: 0;
}

.form-item textarea ~ label:not(.checkbox-label) {
    top: 1.5rem;
    transform: translateY(0);
}

.form-item input:not([type="checkbox"]):focus ~ label:not(.checkbox-label),
.form-item input:not([type="checkbox"]):not(:placeholder-shown) ~ label:not(.checkbox-label),
.form-item textarea:focus ~ label:not(.checkbox-label),
.form-item textarea:not(:placeholder-shown) ~ label:not(.checkbox-label),
.form-item select:focus ~ label:not(.checkbox-label),
.form-item select:valid ~ label:not(.checkbox-label),
/* CF7 Support with modern CSS :has() */
.form-item:has(input:not([type="checkbox"]):focus) label:not(.checkbox-label),
.form-item:has(input:not([type="checkbox"]):not(:placeholder-shown)) label:not(.checkbox-label),
.form-item:has(textarea:focus) label:not(.checkbox-label),
.form-item:has(textarea:not(:placeholder-shown)) label:not(.checkbox-label),
.form-item:has(select:focus) label:not(.checkbox-label),
.form-item:has(select:valid) label:not(.checkbox-label) {
    top: -1rem;
    font-size: 0.7rem;
    /* color: var(--nrise-orange); */
    transform: translateY(0);
}
.form-item textarea:focus ~ label:not(.checkbox-label) .t,
.form-item textarea:not(:placeholder-shown) ~ label:not(.checkbox-label) .t,
.form-item:has(textarea:focus) label:not(.checkbox-label) .t,
.form-item:has(textarea:not(:placeholder-shown)) label:not(.checkbox-label) .t {
    display: none;
}

.form-item input:not([type="checkbox"]):placeholder-shown::placeholder,
.form-item textarea:placeholder-shown::placeholder {
    color: transparent;
}

.form-item input:not([type="checkbox"]):focus::placeholder,
.form-item textarea:focus::placeholder {
    color: var(--nrise-gray);
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.checkbox-label {
    position: static !important;
    transform: none !important;
    color: var(--text-color) !important;
    pointer-events: auto !important;
}

button[type="submit"] {
    background-color: var(--nrise-orange);
    color: #ffffff;
    border: none;
    padding: 1em 2em;
    border-radius: 25px;
    text-transform: uppercase;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-family: inherit;
    font-size: 1rem;
    width: fit-content;
}

button[type="submit"]:hover {
    background-color: var(--nrise-gray);
    color: #fff;
}

button[type="submit"]::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #ffffff;
    -webkit-mask-image: url('img/arrow-menu.svg');
    mask-image: url('img/arrow-menu.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transform: rotate(-90deg);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

button[type="submit"]:hover::after {
    background-color: #ffffff;
    transform: translateX(0.5rem) rotate(-90deg);
}

input[type="checkbox"] {
    transform: scale(1.5);
}

/* Contact Form and Submit Button Styles */

#newsletter {
    margin: 4rem 0 -3rem 0;
    position: relative;
    --content-width: var(--content-width-home);
}

#newsletter .form-inner {
    background-color: var(--nrise-orange);
    background-image: url('img/hirlevel-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: var(--box-padding);
    border-radius: 2rem;
    display: grid;
    grid-template-columns: 1fr 1.225fr;
    gap: 2rem;
    align-items: center;
}

#newsletter h2 {
    color: #ffffff;
    margin: 0;
    text-align: left;
}

#newsletter .newsletter-form-group {
    display: flex;
    align-items: stretch;
}

#newsletter .newsletter-form-group .form-item {
    flex-grow: 1;
    margin-bottom: 0;
}

#newsletter h2 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
}

#newsletter input[type="email"],
#newsletter button[type="submit"] {
    border-radius: 3px;
}
#newsletter .form-item input:not([type="checkbox"]):placeholder-shown::placeholder {
    color: var(--nrise-gray);
}
#newsletter button[type="submit"] {
    position: relative;
    background-color: #000000;
    color: #ffffff;
    margin-left: -0.2rem;
    z-index: 2;
}

#newsletter button[type="submit"]:hover {
    background-color: var(--nrise-darkgray);
}
#newsletter .wpcf7-not-valid-tip {
    color: var(--nrise-white);
    position: absolute;
    margin-left: 0;
    top: 100%;
    left: 0;
}
#newsletter .wpcf7-response-output {
    color: var(--nrise-white);
    position: absolute;
    margin-left: 0;
    top: 100%;
    left: 0;
}

@media (max-width: 768px) {
    #newsletter .form-inner {
        grid-template-columns: 1fr;
        padding: 2rem 1rem;
    }
    #newsletter .newsletter-form-group {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
    }
    #newsletter button[type="submit"] {
        margin-left: 0;
    }
}

#contact {
    /* background-image: url('img/bg-contact-03.webp'); */
    background-image: url('img/bg-contact-04.png');
    background-position: top center;
    background-repeat: repeat-x;
}
#contact h1,
#contact h2 {
    margin: 0.1rem;

}
#contact .form-columns {
    display: grid;
    grid-template-columns: 1.4fr 1fr 0.55fr;
    gap: 2.5rem;
}

#contact .form-inner {
    border: 4px solid var(--nrise-orange);
    padding: 3rem 4rem;
    padding: clamp(2rem, 4vw, 3rem) clamp(2rem, 4vw, 4rem);
    background-color: rgba(234, 234, 234, 0.8);
    border-radius: 1.5rem;
    margin-top: 2rem;
}

#contact .form-columns .col {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#contact .form-columns .col:nth-child(2) .form-item:first-child {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

#contact .form-columns .col:nth-child(2) .form-item:first-child textarea {
    flex-grow: 1;
    height: 100%;
    resize: none; /* Kikapcsoljuk az átméretezést, ha már kitölti a helyet */
}

#contact textarea {
    /* width: 70%; */
}
#contact textarea ~ label {
    /* width: 60%; */
}

.contact-image {
    position: absolute;
    right: -3.7em;
    bottom: -54px;
    width: 29.6%;
}

#contact.hide-image .form-columns {
    grid-template-columns: 1fr 1fr;
}
#contact.hide-image .contact-image {
    display: none;
}
#contact.hide-image textarea ~ label {
    width: 90%;
}

#contact .wpcf7-form-control-wrap {
    display: contents;
}

@media (max-width: 768px) {
    #contact .form-columns,
    #contact.hide-image .form-columns {
        grid-template-columns: 1fr;
    }
    #contact.hide-image textarea ~ label {
        width: 87%;
    }
    #contact.hide-image textarea ~ label .t {
        font-size: 0.8em;
    }

    #contact .form-inner {
        padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 4vw, 4rem);
    }
    .form-item label, .form-item label:not(.checkbox-label) {
        left: 1rem;
    }
}

/* Blog Category Filter */
.blog-category-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
    margin-bottom: 3rem;
    max-width: var(--content-width-home);
    margin-left: auto;
    margin-right: auto;
}

.blog-category-link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.8rem;
    border-radius: 50px;
    color: #fff;
    text-decoration: none;
    /* font-weight: 700; */
    /* text-transform: uppercase; */
    font-size: 0.95rem;
    transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
}

.blog-category-link:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.blog-category-link .cat-icon {
    width: 20px;
    height: 20px;
    background-color: #fff;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Blog Items styling */
.blog-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
    width: 100%;
}

.blog-item {
    background-color: #ffffff;
    border-radius: 1.5rem;
    position: relative;
    transition: background-color 0.3s ease, color 0.3s ease;
    padding: 1rem;
}

.blog-item:hover {
    background-color: var(--nrise-orange);
    color: #ffffff;
}

.blog-item:hover h3,
.blog-item:hover p,
.blog-item:hover .more-link {
    color: #ffffff;
}

.blog-icon-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(15%, -50%);
    background-color: var(--battery-yellow);
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.blog-icon {
    width: 1.8rem;
    height: 1.8rem;
    background-color: #ffffff;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.blog-img-wrapper {
    position: relative;
    width: 100%;
}

.blog-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 1.5rem;
}

.blog-item-label {
    position: absolute;
    bottom: 0;
    left: 1rem;
    transform: translateY(50%);
    z-index: 2;
}

.blog-item-label .highlight-text {
    position: absolute;
    transform: translateY(-45%);
    background-color: var(--battery-yellow);
    border-radius: 1rem;
    padding: 0.3rem 1rem;
    display: inline-block;
    width: max-content;
    /* max-width: 100%; */
    color: #FFFFFF;
    text-transform: lowercase;
    font-size: 0.9rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-item-label:hover .highlight-text {
    transform: translateY(-55%);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}


.blog-content {
    padding: 2rem 1rem 1rem 1rem;
}

.blog-content h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.3rem;
    /* text-transform: uppercase; */
}
body.archive .blog-content h3 {
    text-transform: unset;
}

.blog-content h3 a {
    color: inherit;
    text-decoration: none;
}

.blog-content p {
    margin-top: 0;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    font-size: 1rem;
    color: var(--text-color);
}

.more-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-color);
    text-decoration: underline;
    font-size: 0.8rem;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.more-link::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: var(--battery-yellow);
    -webkit-mask-image: url('img/arrow-rb.svg');
    mask-image: url('img/arrow-rb.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.blog-item:hover .more-link::after {
    transform: rotate(-90deg);
}

@media (max-width: 1024px) {
    .blog-items {
        grid-template-columns: repeat(2, 1fr);
    }
}

.other-services-normal-links {
    max-width: 650px;
    margin: 2rem auto;
    text-align: center;
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.25rem 0.5rem;
}

.other-services-normal-links li {
    display: inline;
    margin-right: 0.5rem;
}

.other-services-normal-links li:not(:first-child)::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--nrise-orange);
    flex-shrink: 0;
    margin-top: 0.6em;
    margin-right: 0.5rem;
}

.other-services-normal-links a {
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.3s ease;
    font-weight: 500;
}

.other-services-normal-links a:hover {
    color: var(--nrise-orange);
}

footer {
    background-color: #1f242c;
    background-image: url('img/footer-bg.png');
    background-size: 100%;
    background-position: bottom center;
    background-repeat: no-repeat;
    color: #FFFFFF;
    padding: 6rem 40px 0rem 40px;
    --content-width: var(--content-width-home);
}

footer h4 {
    color: #FFFFFF;
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    margin-top: 0;
    /* text-transform: uppercase; */
}

footer p,
footer .col:nth-child(1) p {
    color: var(--nrise-gray);
    line-height: 1.6;
    margin-top: 0;
}

footer a {
    color: var(--nrise-gray);
    text-decoration: none;
    transition: color 0.3s ease;
}

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

footer .row:first-of-type {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
    gap: 4rem;
    /* max-width: 1600px; */
    margin: 0 auto;
}

footer .col:nth-child(1) > img {
    margin-bottom: 1.5rem;
    max-height: 80px;
    max-width: 300px;
}

footer .social-links {
    display: flex;
    gap: 10px;
    margin-top: 1.5rem;
}

footer .social-links a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #FFFFFF;
    transition: background-color 0.2s;
}

footer .social-links a img {
    /* filter: brightness(0) invert(1); */
    width: 100%;
    height: 100%;
    margin: 0;
}

footer .social-links a:hover {
    background-color: var(--nrise-orange);
}

footer .col:nth-child(2) ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

footer .col:nth-child(2) li {
    margin-bottom: 0;
    padding: 0.6rem 0;
    display: flex;
    align-items: center;
    /* min-height: 2.5rem; */
}

footer .col:nth-child(2) a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

footer .col:nth-child(2) a::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: var(--nrise-orange);
    -webkit-mask-image: url('img/arrow-rb.svg');
    mask-image: url('img/arrow-rb.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

footer .col:nth-child(2) a:hover::before {
    transform: rotate(-90deg);
}

footer .col:nth-child(3) ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

footer .col:nth-child(3) li {
    margin-bottom: 0;
    padding: 0.6rem 0;
    display: flex;
    align-items: center;
    /* min-height: 2.5rem; */
}

footer .col:nth-child(3) a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

footer .col:nth-child(3) a img {
    display: none;
}

footer .col:nth-child(3) a::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--nrise-orange);
    flex-shrink: 0;
}

.footer-blog-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.footer-blog-item img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    /* border-radius: 1rem; */
    flex-shrink: 0;
}

.footer-blog-item-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.footer-blog-item-content h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.4;
    color: #ffffff;
}

.footer-blog-item-content p {
    /* display: none; */
}

footer .row:last-of-type {
    display: flex;
    justify-content: space-between;
    max-width: 1600px;
    margin: 4rem auto 0 auto;
    border-top: 1px solid var(--nrise-darkgray);
    padding-top: 2rem;
    color: var(--nrise-gray);
}

.burger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    cursor: pointer;
    z-index: 1010;
}

.burger-menu span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: var(--nrise-darkgray);
    border-radius: 3px;
    transition: all 0.3s ease;
}

.burger-menu.open span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.burger-menu.open span:nth-child(2) {
    opacity: 0;
}

.burger-menu.open span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

@media (max-width: 1024px) {
    .page-header {
        position: sticky;
        top: 0;
    }

    .burger-menu {
        display: flex;
    }

    .page-header nav {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.98);
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 40px;
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
        transition: clip-path 0.4s ease-in-out;
        z-index: 1000;
        margin-left: 0;
        max-height: calc(100vh - 90px);
        overflow-y: auto;
    }

    .page-header nav.nav-active {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

    .page-header nav ul {
        flex-direction: column;
        width: 100%;
        align-items: flex-start;
        gap: 15px;
    }

    .page-header nav > ul {
        margin-bottom: 20px;
    }
    
    .page-header nav > ul > li.has-submenu > a::after {
        transform: rotate(-90deg);
        transition: transform 0.3s ease;
    }
    
    .page-header nav ul.submenu {
        position: static;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        padding-left: 20px;
        width: 100%;
        margin-top: 10px;
        min-width: auto;
        box-sizing: border-box;
    }

    .page-header nav ul li.has-submenu.open > ul.submenu {
        display: flex;
    }

    .page-header nav > ul > li.has-submenu.open > a::after {
        transform: rotate(0);
    }
    
    .header-social-links {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        margin-top: 3rem;
        width: 100%;
        gap: 1rem;
    }
    .header-social-links li:last-child {
        flex-basis: 100%;
    }
}

@media (max-width: 1024px) {
    .batteries {
        flex-wrap: wrap;
    }
    .battery-item {
        flex: 0 0 calc(50% - 0.5rem);
    }
}

@media (max-width: 768px) {
    .page-header nav {
        width: auto;
    }
    .blog-items {
        grid-template-columns: 1fr;
    }
    .batteries {
        flex-direction: column;
    }
    .battery-item {
        flex: 0 0 100%;
        width: 100%;
    }
    .battery-submenu {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -65%);
        min-width: unset;
        width: 75vw;
        max-width: 75vw;
    }
    #contact textarea, #contact textarea ~ label {
        width: 100%;
    }
    #contact form {
        flex-direction: column;
        gap: 1rem;
    }
    footer {
        padding: 4rem 20px;
    }
    footer .row:first-of-type {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    footer .row:last-of-type {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        text-align: center;
    }
}

/* Alapból elrejtjük őket, amint a böngésző olvassa a CSS-t (nincs FOUC) */
.js-enabled [data-animation="slide-up"] {
    opacity: 1;
    transform: translateY(50px);
}
.js-enabled [data-animation="fade-up"] {
    opacity: 0;
    transform: translateY(50px);
}
.js-enabled [data-animation="fade-down"] {
    opacity: 0;
    transform: translateY(-50px);
}
.js-enabled [data-animation="fade-left"] {
    opacity: 0;
    transform: translateX(50px);
}
.js-enabled [data-animation="fade-right"] {
    opacity: 0;
    transform: translateX(-50px);
}
.js-enabled [data-animation="fade-zoom-left"] {
    opacity: 0;
    transform-origin: right top;
    transform: translateX(50px) scale(0.85);
}
.js-enabled [data-animation="fade-zoom-right"] {
    opacity: 0;
    transform-origin: left top;
    transform: translateX(-50px) scale(0.85);
}
.js-enabled [data-animation="zoom-out"]:not(.is-visible) {
    opacity: 0;
    transform: scale(1.4);
}
.js-enabled [data-animation="zoom-out-hard"]:not(.is-visible) {
    opacity: 0;
    transform: perspective(1000px) rotate3d(1,1,1, 10deg) scale(2) translateY(-50%);
}
.js-enabled [data-animation="fade-in"]:not(.is-visible) {
    opacity: 0;
}
.js-enabled [data-animation="zoom-in"]:not(.is-visible) {
    opacity: 0;
    transform: scale(0.5);
}


/* JS által hozzáadott is-visible osztállyal megjelenítés */
.js-enabled [data-animation="slide-up"].is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.js-enabled [data-animation="fade-up"].is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.3s ease;
}
.js-enabled [data-animation="fade-down"].is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.js-enabled [data-animation="fade-left"].is-visible {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.js-enabled [data-animation="fade-right"].is-visible {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.js-enabled [data-animation="zoom-out"].is-visible {
    transition: opacity 0.8s ease-in-out, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.js-enabled [data-animation="fade-zoom-left"].is-visible {
    opacity: 1;
    transform: translateX(0) scale(1);
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.js-enabled [data-animation="fade-zoom-right"].is-visible {
    opacity: 1;
    transform: translateX(0) scale(1);
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.js-enabled [data-animation="zoom-out-hard"].is-visible {
    transition: opacity 0.8s ease-in-out, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.js-enabled [data-animation="fade-in"].is-visible {
    /* transition: opacity 1.5s cubic-bezier(0.2, 0.8, 0.2, 1); */
    transition: opacity 0.8s ease-in-out;
}
.js-enabled [data-animation="zoom-in"].is-visible {
    transition: opacity 1s ease-in-out, transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.js-enabled .arrow-circle-right img[data-animation="rotate-right"]:not(.is-visible) {
    transform: scaleX(-1) translateX(var(--translate-x, -80%)) translateY(var(--translate-y, -50%)) rotate(95deg);
    opacity: 0;
}
.js-enabled .arrow-circle-right img[data-animation="rotate-right"].is-visible {
    transform: scaleX(-1) translateX(var(--translate-x, -80%)) translateY(var(--translate-y, -50%)) rotate(var(--rotate-end, -40deg));
    opacity: 1;
    transition: opacity 1s ease-in-out, transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.js-enabled .benefits .arrow-circle-right img[data-animation="rotate-right"]:not(.is-visible) {
    transform: scaleX(-1) translateX(-80%) translateY(-85%) rotate(95deg);
    opacity: 0;
}
.js-enabled .benefits .arrow-circle-right img[data-animation="rotate-right"].is-visible {
    transform: scaleX(-1) translateX(-100%) translateY(-85%) rotate(-40deg);
    opacity: 1;
    transition: opacity 1s ease-in-out, transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.js-enabled .requirement-block .arrow-circle-right img[data-animation="rotate-right"]:not(.is-visible) {
    transform: scale(-0.5, 0.5) translateX(-11%) translateY(-79%) rotate(105deg);
    opacity: 0;
}
.js-enabled .requirement-block .arrow-circle-right img[data-animation="rotate-right"].is-visible {
    transform: scale(-0.7, 0.7) translateX(-11%) translateY(-48%) rotate(-25deg);
    opacity: 1;
    transition: opacity 1s ease-in-out, transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.js-enabled .arrow-circle-left img[data-animation="rotate-left"]:not(.is-visible) {
    transform: scaleX(1) translateX(0%) translateY(-50%) rotate(95deg);
    opacity: 0;
}
.js-enabled .arrow-circle-left img[data-animation="rotate-left"].is-visible {
    transform: scaleX(1) translateX(0%) translateY(-50%) rotate(-40deg);
    opacity: 1;
    transition: opacity 1s ease-in-out, transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.js-enabled .page-template-template-ekr-tao .arrow-circle-left img[data-animation="rotate-left"]:not(.is-visible) {
    transform: scaleX(1) translateX(25%) translateY(-75%) rotate(95deg);
    opacity: 0;
}
.js-enabled .page-template-template-ekr-tao .arrow-circle-left img[data-animation="rotate-left"].is-visible {
    transform: scaleX(1) translateX(25%) translateY(-75%) rotate(-40deg);
    opacity: 1;
    transition: opacity 1s ease-in-out, transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Typography & General */
/* .highlight-orange {
    background-color: var(--nrise-orange);
} */

/* Hero Section */
.service-hero {
    --content-width: var(--content-width-home);
    display: flex;
    flex-direction: column;
    position: relative;
    left: 50%;
    /* margin-top: var(--gap-section-y); */
    /* margin-bottom: var(--gap-section-y); */
    transform: translateX(-50%);
    padding: 0 max(20px, calc((100% - var(--content-width)) / 2));
    height: auto;
    min-height: 550px;
    align-items: center;
    box-sizing: border-box;
    gap: 2%;
}
.page-template-template-gyik .service-hero {
    height: 340px;
}
@media (min-width: 1024px) {
    .service-hero {
        flex-direction: row;
        /* height: 550px; */
        /* height: auto;
        min-height: 550px; */
    }
}
.hero-left-col, .hero-middle-col, .hero-right-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    row-gap: 1em;
}
.hero-middle-col {
    flex: 2;

}
@media (min-width: 1024px) {
    .hero-middle-col {
        flex: 0 0 55%;
        max-width: 55%;
        align-self: flex-start;
        margin-top: 25px;
    }
    .hero-right-col {
        flex: 0 0 20%;
        max-width: 20%;
        align-items: flex-end;
        align-self: flex-start;
        margin-top: 25px;
    }
    .hero-left-col {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

.hero-middle-col .eyebrow {
    font-size: 25px;
    font-weight: bold;
    text-transform: uppercase;
    /* margin-bottom: 10px; */
}
.eyebrow .highlight-text {
    white-space: nowrap;
}
.hero-heading {
    font-size: clamp(33px, 6vw, 78px);
    font-weight: bold;
    text-transform: uppercase;
    margin: 0.1em 0 20px 0;
    line-height: 1.1;
}
.hero-subheading {
    font-size: 18px;
    font-weight: bold;
    /* text-transform: uppercase; */
}
.hero-image {
    max-width: 100%;
    height: auto;
    max-height: 500px;
}
@media (min-width: 768px) {
    .hero-heading:has(.d-nowrap) {
        line-height: 0.6;
        margin-top: 0;
    }
}
@media (max-width: 1024px) {
    .hero-image {
        max-height: 250px;
    }
}

/* Requirement Block */
.requirement-block {
    text-align: center;
    /* margin-top: -6rem; */
    margin-bottom: 1.5rem;
}
.requirement-block > * {
    max-width: 705px;
    margin: auto;
}
.requirement-headline {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 20px;
    padding: 14px 20px;
}
.requirement-explanation {
    font-size: 22px;
    margin-bottom: 60px;
}
.requirement-circles {
    background-image: url('img/circle.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 25px center;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: start;
    gap: 88px;
    height: 350px;
    max-width: 985px;
    margin: 0 auto 40px auto;
    padding-left: 120px;
    padding-left: 60px;
}
.circle-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border-radius: 50%;
    width: 230px;
    height: 230px;
    margin-top: 0.75em;
    box-shadow: none;
}
.circle-item > * {
    max-width: 75%;
    margin: 0.2em auto;
}
/* @media (max-width: 768px) { */
@media (max-width: 1024px) {
    .requirement-circles {
        background-position: 30px center;
        width: 945px;
        max-width: none;
        gap: 90px;
        padding-left: 80px;
        margin: 335px auto;
        position: relative;
        left: 50%;
        transform-origin: center center;

            /* azért, hogy itt a mobil verzióban ne alkalmazzuk a CSS animációt */
            transform: translateX(calc(-50% - 37px)) rotate(90deg) !important;
            opacity: 1 !important;
            transition: none !important;
    }
    .circle-item {
        transform: rotate(-90deg);
        margin-top: 1.2em;
    }
}
.circle-icon {
    width: 40px;
    height: 40px;
    /* opacity: 0.5; */
    margin-bottom: 0.5rem;
}
.circle-label {
    font-size: 18px;
}
.circle-value {
    font-size: 24px;
    font-weight: bold;
}

.requirement-circles.circles-4 {
    background-image: url('img/circle-4.webp');
    max-width: unset;
    height: 295px;
    background-position: center;
    padding-left: 0;
}
.circles-4 .circle-item {
    margin-top: 0;
}
.circles-4 .circle-item > * {
    max-width: 50%;
}
.circles-4 .circle-icon {
    width: 24px;
    height: 24px;
    margin: 0 auto;
}
@media (max-width: 768px) {
    .requirement-circles.circles-4 {
        width: 1005px;
    }
    .circles-4 .circle-item > * {
        max-width: 70%;
    }
    .circles-4 {
        margin-top: 23rem;
        margin-bottom: 23rem;
    }
}

.requirement-circles.circles-5 {
    background-image: url('img/circle-5.webp');
    max-width: unset;
    margin-right: -1.2%;
    height: 305px;
    background-position: center;
    padding-left: 0;
    padding-right: 4%;
}
.circles-5 .circle-item {
    margin-top: 0;
}
.circles-5 .circle-item > * {
    max-width: 55%;
}
.circles-5 .circle-icon {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    opacity: 0.6;
}
.circles-5 .circle-item {
    gap: 0;
}
/* @media (max-width: 768px) { */
@media (max-width: 1024px) {
    .requirement-circles.circles-5 {
        width: 1145px;
        padding-right: 18%;
    }
    .circles-5 .circle-item > * {
        max-width: 70%;
    }
    .circles-5 {
        margin-top: 25rem;
        margin-bottom: 23rem;
    }
}

.arrow-down, .arrow-down-orange {
    margin: 20px auto;
    width: 46px;
    height: 30px;
    display: flex;
    justify-content: center;
}
.arrow-down-orange img, .arrow-down-orange .icon {
    /* Fallback filter for orange */
    filter: invert(46%) sepia(91%) saturate(2331%) hue-rotate(353deg) brightness(92%) contrast(92%);
}
.requirement-conclusion {
    font-size: 24px;
    line-height: 1.4;
}
@media (max-width: 768px) {
    .requirement-block {
        margin-top: 0;
    }
}


/* Deadline & Countdown clock */
.deadline-section {
    /* margin-top: 2rem; */
    /* margin-bottom: 4rem; */
}
.deadline-box {
    background: #f4f5f6;
    border-radius: 20px;
    padding: 1.1rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    /* max-width: 900px; */
    margin: 0 auto;
    border: none;
    box-shadow: none;
}
@media (min-width: 900px) {
    .deadline-box {
        flex-direction: row;
        justify-content: center;
    }
    .deadline-content {
        text-align: center;
        z-index: 2;
        width: 100%;
        padding-right: 40px; /* Space for hourglass overlap */
    }
    .deadline-image-container {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 3;
    }
}
.deadline-title {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 2.1rem;
    color: #000;
}
.deadline-subtitle {
    /* font-size: 1.5rem; */
    margin: 0;
    font-weight: 700;
    color: #000;
    line-height: 1.5;
}
.deadline-text {
    /* font-size: 1.25rem; */
    margin: 0 0 1em 0;
    color: #000;
}
.countdown-timer {
    display: flex;
    gap: 1.2rem;
    justify-content: center;
    flex-wrap: wrap;
}
.timer-item-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}
.timer-value {
    background: #111827;
    color: #fff;
    font-family: 'Oswald', 'Impact', 'Arial Narrow', 'Franklin Gothic Heavy', sans-serif;
    font-size: 3.5rem;
    /* font-weight: 800; */
    width: 90px;
    height: 100px;
    padding: 0 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    position: relative;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3), inset 0 2px 4px rgba(255,255,255,0.1);
    line-height: 1;
}
.timer-value::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(0,0,0,0.5);
    transform: translateY(-50%);
    z-index: 2;
}
.timer-label {
    /* font-size: 1.1rem; */
    font-weight: 600;
    color: #000;
}
.hourglass-img {
    max-width: 250px;
    height: auto;
    filter: drop-shadow(0px 20px 30px rgba(0,0,0,0.15));
    /* animation: rotateHourglass 10s ease-in-out infinite; */
}
@keyframes rotateHourglass {
    0%, 88%, 100% { transform: rotate(0deg); }
    94% { transform: rotate(180deg); }
}



/* Problem Section (Warning Box) */
.problem-section {
    /* padding: 60px 0; */
}
.warning-box {
    border: 1px solid var(--nrise-red);
    border-radius: 15px;
    padding: var(--box-padding);
    padding-left: 8.75rem;
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    background-color: #fff;
}
@media (min-width: 768px) {
    .content-width-narrow .warning-box, .content-width-narrow-2 .warning-box {
        --box-padding: 3rem;
        padding-left: var(--box-padding);
    }
}
.warning-box-icon {
    width: 60px;
    height: 60px;
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    padding: 0 10px;
}
.warning-headline {
    /* text-align: center; */
    /* font-size: 28px; */
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 20px;
}
.warning-text {
    /* text-align: center; */
    font-size: 18px;
    margin-bottom: 30px;
}
.warning-bullet-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.warning-bullet-list li {
    position: relative;
    padding: 15px 0 15px 40px;
    border-bottom: 1px solid var(--nrise-lightgray);
}
.warning-bullet-list li:last-child {
    border-bottom: none;
}
.warning-bullet-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-image: url('img/ikon-no.svg');
    background-size: contain;
    background-repeat: no-repeat;
}
@media (max-width: 768px) {
    .warning-box {
        padding-left: unset;
        padding: 3rem 1rem 1rem 1rem;
    }
}

/* Benefits Grid */
.benefits {
    text-align: center;
}
.benefits-headline {
    text-transform: uppercase;
    font-weight: bold;
    line-height: 1;
    margin: 0 0 20px 0;
}
.benefits-subheadline {
    /* font-size: 24px; */
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 60px;
}
.benefits-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 40px;
}
.benefits-grid.three-cols {
    grid-template-columns: 1fr;
}
@media (min-width: 600px) {
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .benefits-grid.three-cols {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .benefits-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .benefits-grid.three-cols {
        grid-template-columns: repeat(3, 1fr);
    }
}
.benefit-card {
    position: relative;
    background: #f5f5f5;
    padding: 26px;
    border-radius: 20px;
    /* box-shadow: 15px 18px 20px rgba(0,0,0,0.15); */
    box-shadow: var(--shadow-default);
    overflow: hidden;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.benefit-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-default-hover);
}
.js-enabled .benefit-card.is-visible {
    transition: opacity 0.8s ease-in-out, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
}
.js-enabled .benefit-card.is-visible:hover {
    transition: opacity 0.8s ease-in-out, transform 0.3s ease, box-shadow 0.3s ease;
}
.benefit-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    background-color: var(--nrise-orange);
    border-radius: 30px 30px 0 0;
}
.benefit-icon {
    width: 34px;
    height: 34px;
    margin-bottom: 15px;
}
.benefit-title {
    color: var(--nrise-orange);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 18px;
    margin-bottom: 10px;
    margin-bottom: 3px;
    display: inline;
}
.benefit-text {
    font-size: 16px;
    display: inline;
}
.page-template-template-karbonlabnyom .benefits-grid, .page-template-template-karbonlabnyom-csokkentes .benefits-grid {
    gap: 30px 16px;
}
.page-template-template-karbonlabnyom .benefit-card, .page-template-template-karbonlabnyom-csokkentes .benefit-card {
    padding: 20px;
}
.page-template-template-karbonlabnyom .benefit-icon, .page-template-template-karbonlabnyom-csokkentes .benefit-icon {
    margin-bottom: 0.5em;
}
.page-template-template-karbonlabnyom .benefit-text, .page-template-template-karbonlabnyom-csokkentes .benefit-text {
    display: block;
}

/* Result Highlight */
.result-highlight {
    background-color: var(--nrise-lightgray);
    border-radius: 15px;
    padding: 2.5rem 2.5rem 2.5rem 6%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    max-width: 900px;
    margin: 0 auto;
    margin: auto;
    flex-direction: row;
    justify-content: space-between;
    padding: 2.5rem 8rem 2.5rem 11rem;
    max-width: var(--content-width);
}
.result-highlight.content-width-narrow, .result-highlight.content-width-narrow-2 {
    padding: 2.5rem;
}
.result-highlight-content {
    flex: 1;
}
.result-highlight-label {
    font-weight: 800;
    font-size: 22px;
    text-transform: uppercase;
}
.result-highlight-text {
    margin: 0;
    line-height: 1.4;
    position: relative;
}
.result-highlight-list {
    margin-bottom: 0;
}
.result-highlight-image {
    flex-shrink: 0;
    position: relative;
    width: 225px;
}
.result-highlight-image img {
    position: absolute;
    top: -95px;
    width: 100%;
    height: auto;
}
@media (max-width: 1024px) {
    .result-highlight {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 2rem 1.5rem 1.5rem 6%;
        max-width: var(--content-width);
        position: relative;
        gap: 0;
    }
    .result-highlight-content {
        width: 100%;
        position: relative;
        z-index: 2;
    }
    .result-highlight-label {
        margin-bottom: 0.25rem;
    }
    .result-highlight-image {
        position: relative;
        align-self: center;
        margin-top: 1rem;
        right: unset;
        z-index: 1;
        text-align: center;
    }
    .result-highlight-image img {
        position: relative;
        width: 120px;
        left: unset;
        top: unset;
        right: unset;
    }
}

/* CTA Hook & Section */
.cta-hook {
    text-align: center;
    margin: 0;
}
.cta-hook img {
    width: 80px;
    height: 68px;
    transform: rotate(29deg) translateY(-25px);
}
.cta-section {
    text-align: center;
    padding-bottom: 1.5rem;
    padding-top: 0;
}
.cta-button-container {
    margin-bottom: 1.5rem;
}
.arrow-hr-lined-container {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: calc(var(--content-width) * 0.87);
    margin: 2rem auto;
}
.arrow-hr-lined-container .line-left, .arrow-hr-lined-container .line-right {
    flex: 1;
    height: 1px;
    background-color: var(--nrise-gray);
}
.arrow-hr-lined-container .icon {
    width: 44px;
    height: 30px;
    margin: 0 20px;
}

/* EKR TAO Opportunity Section */
.opportunity-block {
    text-align: center;
    /* margin-top: -6rem; */
    /* margin-bottom: 4rem; */
}
.opportunity-headline {
    margin-bottom: 1rem;
    font-size: clamp(28px, 4vw, 33px);
    font-weight: bold;
    text-transform: uppercase;
    max-width: 820px;
}
.opportunity-explanation {
    margin: 2rem auto;
    font-size: 22px;
    max-width: 800px;
}
.opportunity-infograph {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    margin: 0 auto;
    width: 100%;
    max-width: 1000px;
    aspect-ratio: 89000 / 42053;
    background-image: url('img/circle2.png');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: calc(540 / 890 * 100%) 100%;
    position: relative;
}
.opportunity-infograph .left {
    position: relative;
    width: calc(310 / 890 * 100%);
    height: 100%;
    flex-shrink: 0;
}
.opportunity-infograph .infograph-text {
    position: absolute;
    top: 40%;
    left: 55%;
    transform: translate(-50%, -50%);
    width: 85%;
    color: var(--nrise-orange);
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.3;
}
.opportunity-infograph .right {
    position: relative;
    width: calc(350 / 890 * 100%);
    margin-left: calc(230 / 890 * 100%);
    height: 100%;
    flex-shrink: 0;
}
.opportunity-infograph-item {
    position: absolute;
    left: -2px;
    width: 100%;
    background-color: #fff;
    border-radius: 12px;
    padding: 1rem 1.5rem 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    transform: translateY(-50%);
    z-index: 2;
    box-sizing: border-box;
    text-align: left;
}
.opportunity-infograph-item:nth-child(1) {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}
.opportunity-infograph-item:nth-child(1) {
    top: 11.136%;
    border: 3px solid #88949e;
}
.opportunity-infograph-item:nth-child(2) {
    top: 69.545%;
    border: 3px solid var(--nrise-orange);
}
.opportunity-infograph-icon {
    flex: 0 0 50px;
    height: 50px;
}
.opportunity-infograph-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.infograph-opportunity {
    line-height: 1.4;
    color: var(--text-color);
}
@media (max-width: 1024px) {
    .opportunity-block {
        margin-top: var(--gap-section-y);
        margin-bottom: var(--gap-section-y);
    }
    .opportunity-infograph {
        aspect-ratio: auto;
        flex-direction: column;
        align-items: center;
        background-image: none;
    }
    .opportunity-infograph .left {
        width: 380px;
        height: auto;
        aspect-ratio: 440 / 440;
        background-image: url('img/circle2.png');
        background-repeat: no-repeat;
        background-position: 0 calc(50% - -30px);
        background-size: 380px;
        transform: rotate(90deg) scaleY(-1);
        transform-origin: center center;
    }
    .opportunity-infograph .infograph-text {
        top: 50%;
        left: 0%;
        width: 60%;
        transform: translateY(-50%) rotate(-90deg) scaleX(-1);
        transform-origin: center center;
    }
    .opportunity-infograph .right {
        width: 110%;
        margin-left: 1%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 1rem;
        padding: 0 1rem;
        box-sizing: border-box;
    }
    .opportunity-infograph-item,
    .opportunity-infograph-item:nth-child(1),
    .opportunity-infograph-item:nth-child(2) {
        position: relative;
        flex-direction: column;
        top: auto !important;
        left: auto;
        transform: none;
        width: 50%;
        padding: 0.9em;
    }
    .infograph-opportunity br {    
        display: none;
    }
}

/* Timeline Section */
#timeline {
    /* padding: 4rem 0; */
}
.timeline-header {
    text-align: center;
    margin-bottom: 2rem;
}
.timeline-subheadline {
    font-size: 20px;
    margin-top: 1rem;
    color: var(--text-color);
}
.timeline-wrapper {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    aspect-ratio: 1000 / 1696;
}
.timeline-center-line {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background-color: #575756;
    z-index: 1;
}
.timeline-dot {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background-color: #000;
    border-radius: 50%;
    z-index: 2;
}
.timeline-item {
    position: absolute;
    width: 42%;
    transform: translateY(-50%);
    z-index: 2;
}
.timeline-item.left {
    left: 0;
}
.timeline-item.right {
    right: 0;
}
.timeline-item::after {
    content: '';
    position: absolute;
    top: 50%;
    height: 1px;
    background-color: #575756;
    z-index: -1;
}
.timeline-item.left::after {
    right: -19.04%;
    width: 19.04%;
}
.timeline-item.right::after {
    left: -19.04%;
    width: 19.04%;
}
.timeline-item::before {
    content: '';
    position: absolute;
    top: 50%;
    width: 100px;
    height: 100px;
    background-image: url('img/timeline-node.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: translateY(-50%);
    z-index: 3;
}
.timeline-item.left::before {
    right: calc(-19.04% - 50px);
}
.timeline-item.right::before {
    left: calc(-19.04% - 50px);
}
.timeline-content {
    background: #fff;
    border: 1px solid var(--nrise-yellow);
    border-radius: 0.65rem;
    padding: 1rem 1.5rem 1.5rem 1.5rem;
    position: relative;
    text-align: center;
    box-sizing: border-box;
    box-shadow: 0 0px 20px rgba(0, 0, 0, 0.1);
    min-height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.timeline-badge {
    position: absolute;
    z-index: 4;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    background-color: var(--nrise-yellow);
    color: #fff;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.timeline-content-inner {
    text-align: left;
    display: flex;
    /* align-items: flex-start; */
    flex-direction: column;
    gap: 0.7em;
    width: fit-content;
    margin: 0 auto;
    font-weight: 500;
}
.timeline-content h3 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 0;
    color: #000;
}
.timeline-content p {
    font-size: 16px;
    color: var(--text-color);
    margin: 0;
}
.timeline-list {
    text-align: left;
    display: inline-block;
    /* margin: 0 auto; */
    padding-left: 1.2rem;
    color: var(--text-color);
    margin-bottom: 0;
}
.timeline-list li {
    font-size: 16px;
    margin-bottom: 0.1rem;
}

@media (max-width: 768px) {
    .timeline-wrapper {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        gap: 3rem;
    }
    .timeline-center-line, .timeline-dot {
        display: none;
    }
    .timeline-item {
        position: relative;
        width: 100%;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none;
    }
    .timeline-item::after, .timeline-item::before {
        display: none;
    }
}

/* Where We Help Section */
.where-we-help {
    position: relative;
    z-index: 4; /* nyíl felett */
}
.where-we-help-header {
    text-align: center;
    margin-bottom: 3rem;
    max-width: 770px;
    margin: 0 auto;
}
.where-we-help-subheadline {
    font-size: 22px;
    margin-top: 1.5rem;
    color: var(--text-color);
    line-height: 1.5;
}
.success-list-container {
    background-color: #f5f5f5;
    border-radius: 60px;
    padding: 1.5rem 4rem;
    max-width: var(--width, 580px);
    margin: 0 auto;
}
.success-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.success-list li {
    display: flex;
    align-items: center;
    font-size: 18px;
    color: #000;
}
.success-list li span {
    flex: 1;
    padding: 0.7rem 0;
}
.success-list li:not(:last-child) span {
    border-bottom: 1px solid #c5c5c5;
}
.success-list-icon {
    width: 28px;
    height: 28px;
    margin-right: 1.5rem;
    flex-shrink: 0;
}
@media (max-width: 768px) {
    .success-list-container {
        padding: 1.5rem 1rem 1.5rem 2rem;
    }
    .success-list li span {
        font-size: 16px;
    }
    .where-we-help-list-container {
        border-radius: 30px;
        padding: 2rem 1.5rem;
    }
    .where-we-help-list li {
        font-size: 16px;
    }
}



.email-link-composite {
    display: inline-flex;
    align-items: center;
    gap: 0;
    text-decoration: none;
    height: 94px; /* Default height */
    transition: transform 0.3s ease;
    filter: drop-shadow(var(--shadow-default-2));
}
.email-link-composite:hover {
    transform: scale(1.03);
}
.email-link-icon {
    background-color: var(--nrise-orange);
    border-radius: 100%;
    color: #fff;
    margin-right: -1rem;
    width: 4rem;
    height: 4rem;
    padding: 0.5rem;
    box-sizing: border-box;
    z-index: 1;
}
.email-link-center {
    background-color: var(--nrise-orange);
    border-radius: 1em;
    color: #fff;
    padding: 0.7em 2em;
}

@media (max-width: 768px) {
    .email-link-composite {
        height: 60px;
    }
    .email-link-center {
        font-size: 1rem;
    }
}

.underprint  {
    font-size: var(--text-gigant-3);
    text-align: center;
    color: var(--nrise-lightgray-2);
    margin-bottom: -150px;
    text-transform: uppercase;
    font-weight: bold;

}
.underprint-karbon {

}

.arrow-down-box {
    border: 10px solid var(--nrise-lightgray);
    border-radius: 2rem;
    padding: 2rem 4rem;
    position: relative;
    max-width: 1200px;
    margin: var(--gap-section-y) auto;
    background-color: transparent;
}
.arrow-down-box-icon {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 0 10px;
    object-fit: contain;
}
.arrow-down-box-cols {
    display: flex;
    flex-direction: column;
    column-gap: 5rem;
}
.arrow-down-box-cols .col {
    flex: 1;
}
@media (min-width: 768px) {
    .arrow-down-box-cols {
        flex-direction: row;
    }
}
@media (max-width: 768px) {
    .arrow-down-box {
        padding: 3rem 1.5rem 1.5rem 1.5rem;
    }
}

.karbon-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.rounded-bg-01 {
    /* --width: 2000px;
    background-color: var(--nrise-lightgray-2);
    border-radius: 100% 100% 0 0;
    margin-left: calc(var(--width) * -0.25);
    margin-right: calc(var(--width) * -0.25);
    padding-top: 5rem;
    margin-top: -8rem;
    margin-bottom: var(--gap-section-y); */
}
.rounded-bg-01:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5rem;
    background-color: var(--nrise-lightgray-2);
    border-radius: 100% 100% 0 0;
    margin-left: calc(var(--width) * -0.25);
    margin-right: calc(var(--width) * -0.25);
    padding-top: 5rem;
    margin-top: -8rem;
    margin-bottom: var(--gap-section-y);
}


.window-width {
    width: 100vw;
    box-sizing: border-box;
    overflow-x: hidden;
}

.content-width {
    padding-left: max(20px, calc((100% - var(--content-width)) / 2));
    padding-right: max(20px, calc((100% - var(--content-width)) / 2));
    box-sizing: border-box;
}
.content-width-home {
    --content-width: var(--content-width-home);
    padding-left: max(20px, calc((100% - var(--content-width-home)) / 2));
    padding-right: max(20px, calc((100% - var(--content-width-home)) / 2));
    box-sizing: border-box;
}
.content-width-default {
    --content-width: var(--content-width-default);
}
.content-width-default-2 {
    --content-width: var(--content-width-default-2);
}
.content-width-narrow {
    --content-width: var(--content-width-narrow);
}
.content-width-narrow-1 {
    --content-width: var(--content-width-narrow-1);
}
.content-width-narrow-2 {
    --content-width: var(--content-width-narrow-2);
}
.content-width-narrow-3 {
    --content-width: var(--content-width-narrow-3);
}
.content-width-outer {
    max-width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.mt-section-gap {margin-top: var(--gap-section-y);}

.mv0 {margin-top: 0;margin-bottom: 0;}
.mb0 {margin-bottom: 0;}
.mt0 {margin-top: 0;}
.mt1 {margin-top: 1em;}
.mt2 {margin-top: 2em;}
.mt3 {margin-top: 3em;}
.pv0 {padding-top: 0;padding-bottom: 0;}
.pt0 {padding-top: 0;}
.pb0 {padding-bottom: 0;}
.pb1 {padding-bottom: 1em;}
.pb2 {padding-bottom: 2em;}
.pb3 {padding-bottom: 3em;}
.pv1 {padding-top: 1rem;padding-bottom: 1rem;}
.ph2 {padding-right: 2rem;padding-left: 2rem;}
.pb1em {padding-bottom: 1em;}
.pb2em {padding-bottom: 2em;}
.pb3em {padding-bottom: 3em;}
.pb4em {padding-bottom: 4em;}
.pb5em {padding-bottom: 5em;}
.pb6em {padding-bottom: 6em;}
.pb7em {padding-bottom: 7em;}
.pb8em {padding-bottom: 8em;}
.pb9em {padding-bottom: 9em;}
.pb10em {padding-bottom: 10em;}

.position-relative {
    position: relative;
}
.inline-block {
    display: inline-block;
}
.color-orange {color: var(--nrise-orange);}
.color-lightgray {color: var(--nrise-lightgray);}
.color-gray {color: var(--nrise-gray);}
.color-gray-2 {color: var(--nrise-gray-2);}

.align-left {
    text-align: left;
}
.align-center, .text-center {
    text-align: center;
}
.block-center {
    margin-left: auto;
    margin-right: auto;
}

.uppercase {
    text-transform: uppercase;
}

.bold {
    font-weight: 700;
}

.text-small {
    font-size: var(--text-small);
}
.text-large {
    font-size: var(--text-large);
}
.text-large-1 {
    font-size: var(--text-large-1);
}
.text-large-1-2 {
    font-size: var(--text-large-1-2);
}
.text-large-2 {
    font-size: var(--text-large-2);
}
.text-large-3 {
    font-size: var(--text-large-3);
}
.text-large-3-2 {
    font-size: var(--text-large-3-2);
}
.text-large-4 {
    font-size: var(--text-large-4);
}
.text-huge {
    font-size: var(--text-huge);
    color: #535661;
}
.text-gigant {
    font-size: var(--text-gigant);
    line-height: 1.1em;
    color: #535661;
}
.text-gigant-1 {
    font-size: var(--text-gigant-1);
    line-height: 1.1em;
    color: #535661;
}
.text-gigant-2 {
    font-size: var(--text-gigant-2);
    line-height: 1.1em;
    color: #535661;
}
.text-gigant-3 {
    font-size: var(--text-gigant-3);
    line-height: 1.1em;
    color: #535661;
}

.no-bg {
    background-color: transparent;
}

.orange-text {
    color: var(--nrise-orange);
}

.inline {
    display: inline;
}

.inline-block {
    display: inline-block;
}

.display-block {
    display: block;
}

.hide-important {
    display: none!important;
}

.nowrap {
    white-space: nowrap;
}

@media (min-width: 768px)
{
	.d-nowrap {
        white-space: nowrap;
    }
}

@media (max-width: 1024px) {
    .m-hide {display: none !important;}
    .m-wrap {white-space: normal !important;}
    .m-relative {position: relative !important;}
    .m-inline-block {display: inline-block !important;}
    .m-block {display: block !important;}
    .m-mv0 {margin-top: 0 !important;margin-bottom: 0 !important;}
    .m-pv0 {padding-top: 0 !important;padding-bottom: 0 !important;}
    .m-ph0 {padding-left: 0 !important;padding-right: 0 !important;}
    .m-pt0 {padding-top: 0 !important;}
    .m-pb1 {padding-bottom: 1rem !important;}
    .m-mt0 {margin-top: 0 !important;}
    .m-mt1 {margin-top: 1rem !important;}
    .m-mt2 {margin-top: 2rem !important;}
    .m-mb0 {margin-bottom: 0 !important;}
}

.flex {
    display: flex;
}
.flex-row {
    flex-direction: row;
}
.fit-content {
    display: fit-content;
    margin: 0 auto;
}

.cta-button {
    padding: 20px 30px;
    border-radius: 20px;
    background: linear-gradient(to bottom, #ee7d18, var(--nrise-orange));
    border: 1px solid var(--nrise-orange);
}

.button.color-green {
    background: linear-gradient(to top, #57cb0b, var(--battery-green));
    border: 1px solid var(--battery-green);
}

.cta-button:hover, .button.color-green:hover {
    /* background: var(--nrise-gray); */
    /* border-color: var(--nrise-gray); */
}

/* Pagination styling */
.pagination {
    margin-top: 3rem;
    text-align: center;
    width: 100%;
}
.pagination .screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}
.pagination .nav-links {
    display: inline-flex;
    justify-content: center;
    gap: 0.5rem;
    background: #ffffff;
    padding: 0.5rem;
    border-radius: 2rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    color: var(--nrise-darkgray);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}
.pagination .page-numbers:hover {
    background-color: var(--nrise-lightgray);
    color: var(--nrise-darkgray);
}
.pagination .page-numbers.current {
    background-color: var(--nrise-orange);
    color: #ffffff;
}
.pagination .page-numbers.prev,
.pagination .page-numbers.next {
    padding: 0 1rem;
    border-radius: 1.25rem;
}

/* Single Blog Post styling */
.single-post-content {
    color: var(--nrise-gray);
    line-height: 1.8;
    font-size: 1.1rem;
}
.single-post-content p {
    margin-bottom: 1.5rem;
}
.single-post-content a {
    color: var(--nrise-orange);
    text-decoration: underline;
    transition: color 0.2s ease;
}
.single-post-content a:hover {
    color: var(--nrise-yellow);
}
.single-post-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 15px;
    color: var(--nrise-gray);
    font-size: 0.85rem;
    margin-bottom: 2rem;
}
.single-post-meta .separator {
    opacity: 0.5;
}
/* .single-post-meta svg */
.post-category svg {
    color: var(--nrise-orange);
}
.single-post-meta a {
    color: var(--nrise-orange);
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
}
.single-post-meta a:hover {
    /* color: var(--nrise-yellow); */
}
.linkedin-share-btn {
    color: #ffffff !important;
    /* 
    background-color: #0077b5;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease; */
}
.linkedin-share-btn:hover {
    /* background-color: #005582;
    color: #ffffff !important;
    text-decoration: none; */
}
.linkedin-share-btn svg {
    fill: currentColor;
}

/* Make Gutenberg block separators much fainter */
hr.wp-block-separator,
.wp-block-separator {
    border: none !important;
    border-top: 1px solid var(--nrise-gray) !important;
    background-color: transparent !important;
    opacity: 0.4 !important;
    margin: 2.5rem auto !important;
}

/* References Grid */
.references-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1.5rem;
    position: relative;
    z-index: 2;
}
.references-grid > .reference-card {
    width: calc(25% - 1.125rem);
}
@media (max-width: 992px) {
    .references-grid > .reference-card {
        width: calc(33.333% - 1rem);
    }
}
@media (max-width: 768px) {
    .references-grid > .reference-card {
        width: calc(50% - 0.75rem);
    }
}
@media (max-width: 480px) {
    .references-grid > .reference-card {
        width: 100%;
    }
}
.reference-card {
    background-color: #ffffff;
    border-radius: 30px;
    box-shadow: var(--shadow-default);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    aspect-ratio: 4/3;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.reference-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-default-hover);
}
.reference-card img {
    width: 100%;
    height: 100%;
    max-width: 260px;
    max-height: 260px;
    object-fit: contain;
    filter: drop-shadow(0 0 1px transparent);
}

/* Custom Box */
.rounded-box-outline-gray {
    border: 10px solid var(--nrise-lightgray, #E6E6E6);
    border-radius: 24px;
    padding: 2rem 4rem;
    position: relative;
    background: #fff;
}
.rounded-box-outline-gray .box-title {
    color: #fff;
    font-weight: bold;
}
.rounded-box-outline-gray .success-list {
    margin-left: 2rem;
}

@media (max-width: 768px) {
    .rounded-box-outline-gray {
        padding: 1rem .5rem;
    }
    .rounded-box-outline-gray .success-list {
        padding-left: 0;
        margin-top: 1rem;
        margin-left: 1rem;
    }
    .rounded-box-outline-gray .box-title {
    margin: 0;
    }
}
@media (max-height: 860px) {
    .battery-bg {
        width: 210px;
        height: 310px;
    }
    .battery-body .battery-color {
        width: 135px;
    }
    .batteries + .spacer {
        height: 0!important;
    }
    .page-header .header-logo {
        max-height: 50px;
    }
}
@media (max-height: 820px) {
    .battery-bg {
        width: 170px;
        height: 250px;
    }
    .battery-body .battery-color {
        width: 108px;
    }
    section h1, section h2 {
        font-size: clamp(2rem, 3.3vw, 4rem);
    }
}
@media (max-height: 740px) {
    .battery-bg {
        width: 160px;
        height: 235px;
    }
    .battery-body .battery-color {
        width: 92px;
    }
    section h1, section h2 {
        font-size: clamp(1.8rem, 2.8vw, 3.3rem);
    }
}
@media (max-height: 700px) {
    section h1, section h2 {
        font-size: clamp(1.6rem, 2.4vw, 3.1rem);
    }
}

@keyframes fillBattery {
    0% { height: 0%; opacity: 0.5; }
    100% { height: 70%; opacity: 1; }
}