/*
Theme Name: Etcon
Description: Theme for Etcon
Author: Etcon
Version: 1.0
Text Domain: theme
*/

:root {
    --head-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
    --bg: #F6EFE6;  /* #F0E3D0 */
    --block: #FFF9F0;
    --muted: #807d78;
    --gold: #f4a300;
    --button: linear-gradient(87.57deg, #FFA100 0%, #FF7700 72.35%, #FFA100 100%);
    --button-hover: linear-gradient(87.57deg, #FF7700 0%, #FFA100 72.35%, #FF7700 100%);
    --bg1: linear-gradient(135deg, #F0E3D0 0%, #E8D8C2 100%);
    --card-radius: 20px;
    --container-max: 1440px;
    --heading-font-size: 60px;
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
    font-family: var(--head-family);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /*scroll-behavior: smooth;*/
    line-height: 1.5;
}

section {
    padding-left: 12px;
    padding-right: 12px;
}

h1 {
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
}

h2 {
    font-size: 24px;
    font-weight: 600;
}

.entry-content {
    line-height: 1.4;
}

.hidden {
    display: none!important;
}

.mt60 {
    margin-top: 66px!important;
}

.mt70 {
    margin-top: 74px!important;
}

.mt40 {
    margin-top: 40px!important;
}

.mb40 {
    margin-bottom: 40px!important;
}

.mt20 {
    margin-top: 20px;
}

.mb60 {
    margin-bottom: 60px;
}

.mb20 {
    margin-bottom: 20px;
}

.pt10 {
    padding-top: 10px;
}

.flex-center {
    display: flex;
    justify-content: center;
    gap: 5px;
    align-items: center;
}

.flex {
    display: flex;
    gap: 10px;
    align-items: center;
}

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

.pt20 {
    padding-top: 20px;
}

.mt50 {
    margin-top: 50px;
}

.m40 {
    margin: 40px;
}

a {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    opacity: 0.8;
}

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

/* Page layout */
.page {
    display: flex;
    flex-direction: column;
    background: var(--bg);
}

.page > .wrap {
    flex: 1;
}

.wrap {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
}

/* Header navigation */
header.nav {
    position: fixed;
    left: 0;
    top: 0;
    /*background: #fff;*/
    width: 100%;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px;
}

.logged-in header.nav {
    margin-top: 32px;
}

header.nav.scrolled {
    top: 0;
    background: #f0e3d07a;
    backdrop-filter: blur(20px);
}

p#breadcrumbs {
    font-size: 14px;
    margin: 20px 0 30px;
}

.nav-column {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 5px;
    max-width: var(--container-max);
    margin: 0 auto;
    position: relative;
}

.brand {
    font-weight: 400;
    font-size: 20px;
    order: 1;
    z-index: 1002;
    flex:1;
}

.logo-text {
    font-size: 14.8px;
    font-style: Italic;
}

.nav-menu {
    order: 2;
}

li.current-menu-item a {
    font-weight: 600;
}

.nav-right {
    order: 3;
}

.mobile-menu-toggle {
    order: 4;
    z-index: 1002;
}

/* Mobile menu overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(20px);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Header right contacts */
.nav-right { display:flex; align-items:center; gap:18px; font-weight: 600;}
.nav-right .contact, .mobile-cta .contact { display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.contact a { color: #000; text-decoration:none; display:flex; align-items:center; gap:10px; font-family: var(--head-family); }

/* Language switcher */
.lang-switcher { position:relative; display:inline-block; padding:6px 10px; }
.lang-list { position:relative; display:flex; align-items:center; background:transparent; border-radius:4px; }
.lang-list a.lang { color:#000; font-weight:600; text-decoration:none; padding:4px 8px; position:relative; z-index:2; }
.lang-list .lang-sep {
    width: 9px;
    height: 9px;
    background: #f4a300;
    border-radius: 50%;
}
.lang-sep-wrapper {
    position: relative;
    display: flex;
}
.lang-list .lang-slider { position:absolute; left:0; transform:translateX(-50%); top:50%; margin-top: -1.5px; width:15px; height:3px; background:#f4a300; border-radius:8px; z-index:1; transition:left .35s ease, transform .35s ease; }
.lang-list[style] .lang-slider { left: calc(var(--slider-left)); }
.current-lang { color:#000; }

/**/
.mobile-cta {
    display: none;
}
@media (max-width: 767px) {
    .mobile-cta {
        display: flex;
        margin-top: 40px;
    }
    .mobile-cta .contact { gap:0; }
    .mobile-cta a { 
        display: flex!important;
        padding: 0 10px!important;
    }
}

/* Footer styles for Etcon theme — aligned with provided mockup */
.site-footer {
    background: #FFFCF7;
    color: #111;
    padding: 60px 20px 0;
    font-family: inherit;
}

.footer-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-brand {
    text-align: center;
    margin-bottom: 8px;
}

.footer-logo {
    max-height: 64px;
    display: inline-block;
}

.footer-menus {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 70px;
    padding: 24px 20px;
}

.footer-col {
    width: calc(25% - 18px);
    min-width: 160px;
}

.lname {
    font-weight: 700;
    margin-bottom: 12px;
    color: #111;
    font-size: 16px;
}

.footer-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-menu li {
    margin: 8px 0;
}

.footer-menu a {
    text-decoration: none;
    opacity: 0.95;
    font-size: 16px;
    font-weight: 500;
}

/* Bottom white bar like in mockup */
.site-footer .footer-bottom {
    padding: 5px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
}

.footer-phrase {
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 20px;
}

.footer-phrase a {
    color: var(--gold);
    text-decoration: underline;
}
.footer-copy {
    text-align: center;
    font-weight: 600;
    letter-spacing: .4px;
    font-size: 18px;
    text-transform: uppercase;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Details collapse behaviour */
.footer-details { border:0; padding:0; }
.footer-summary { cursor:pointer; font-weight:700; margin:0 0 8px 0; }

@media (min-width: 768px) {
    .footer-summary { display: none; }
}

@media (max-width: 767px) {
    .nav-right .contact { display: none; }
    .footer-phrase { font-size: 16px;}
    .footer-menus { display:block; padding: 10px 20px; gap: 24px; }
    .footer-col { width:100%; margin-bottom:12px; }
    .footer-brand { margin-bottom:8px }
    .site-footer { padding-bottom: 24px }
    .site-footer .footer-bottom { margin-top: 12px; border-top: 1px solid rgba(0,0,0,0.06); padding:12px 0 }
}

a.inpage {
    margin-top: 20px;
    font-size: 26px !important;
    font-weight: 500;
    color: #fff !important;
}

/* Recent posts section */
.recent-posts {
    margin: 10px auto 20px;
}

.section-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
    text-transform: uppercase;
    margin-bottom: 30px;
}
.recent-cards {
    display: flex;
    gap: 20px;
}
span.meta-author {
    display: flex;
    gap: 12px;
}
.recent-card {
    background: var(--block);
    border-radius: var(--card-radius);
    padding: 18px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    border: 1px solid #00000026;
    flex: 1 1 0;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.recent-card .card-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 10px;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.recent-card .card-excerpt {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.recent-card .card-meta {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 14px;
    color: var(--muted);
    margin-top: 12px;
    font-weight: 500;
}
.recent-card .card-meta .meta-views::before {
    margin-right: 6px;
    opacity: 0.8;
}
.recent-more {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
}
.btn {
    background: var(--button);
    color: #fff;
    padding: 10px 16px 10px;
    border-radius: 20px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 0 rgba(0,0,0,0.06);
    transition: all 0.3s ease;
}

.two-columns-section .btn {
    min-width: 165px;
}

.btn svg {
    margin-top: 2px;
}

.btn:hover {
    background: var(--button-hover);
}

.slider-content {
    float: right;
    margin: 0 0 6px 20px;
    max-width: 650px;
    height: auto;
    border-radius: 20px;
}

.atomic-energy-bg {
    display: block;
    max-width: 47%;
}

/* Gallery container */
#gallery-1 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin: 2em 0;
    width: 100%;
}

#gallery-1 .gallery-item {
    margin: 0 !important;
    width: 100% !important;
    float: none !important;
}

#gallery-1 .gallery-icon {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    aspect-ratio: 2 / 3;
}

#gallery-1 .gallery-icon:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
}

#gallery-1 img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}

#gallery-1 .gallery-icon:hover img {
    transform: scale(1.05);
}

.gallery-caption {
    text-align: center;
    padding: 10px 0 0;
    font-size: 16px;
}

/* Mobile: responsive grid */
@media (max-width: 600px) {
    #gallery-1 {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

/* Mobile: horizontal scroll for cards */
@media (max-width: 767px) {
    .slider-content, .atomic-energy-bg { float: none; margin: auto; max-width: stretch; } 
    .slider-content { margin-bottom: 30px; }
    .section-title { font-size: 22px; font-weight: 600; padding: 30px 0; margin: 0;}
    .recent-posts { padding-left: 12px; padding-right: 12px; }
    .recent-cards { display: flex; overflow-x: auto; flex-direction: column; gap: 12px; padding-bottom: 8px; }
    .recent-cards::-webkit-scrollbar { height: 8px; }
    .recent-cards::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.08); border-radius: 8px; }
.recent-card { min-width: 280px;}
}

/* Services hero section (front page) */
.services-hero {
    width: 100%;
    color: #fff;
    /*display: flex;
    align-items: flex-end;*/
}
.services-wrap {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 250px;
    padding: 150px 0px 150px;
}
.services-content {
    max-width: 640px;
}
.services-title {
    font-family: var(--head-family);
    font-size: 42px;
    line-height: 1.05;
    margin: 0 0 12px 0;
    font-weight: 600;
}
.services-sub {
    color: rgba(255,255,255,0.95);
    font-size: 28px;
    margin: 0 0 30px 0;
    font-weight: 500;
}
.services-cta.btn {
    display: inline-block;
    background: var(--button);
    color: #201400;
    border-radius: 30px;
    padding: 12px 24px;
    text-decoration: none;
    box-shadow: 0 3px 0 rgba(0,0,0,0.18);
    font-size: 32px;
    font-weight: 500;
    animation: pulse-subtle 2s infinite;
}
@keyframes pulse-subtle {
    0% {
        box-shadow: 0 3px 0 rgba(0,0,0,0.18), 0 0 0 0 rgba(255, 161, 0, 0.7);
    }

    70% {
        box-shadow: 0 3px 0 rgba(0,0,0,0.18), 0 0 0 20px rgba(255, 119, 0, 0);
    }

    100% {
        box-shadow: 0 3px 0 rgba(0,0,0,0.18), 0 0 0 0 rgba(255, 161, 0, 0);
    }
}

/*.services-list {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 80px;
    margin-left: 52px;
}*/
/*.service-item {
    min-width: 150px;
}*/
.service-link {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    padding: 10px 0 10px;
    font-size: 16px;
    font-weight: 600;
    /*width: 90%;*/
    position: relative;
    padding-left: 50px;
}
.service-link::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0px;
    width: 100%;
    height: 60px;
    background-image: url('../etcon/img/line-play.svg');
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 300px auto;
    z-index: 0;
    opacity: 0.7;
    transition: background-size 0.5s ease, opacity 0.5s ease;
}
/* Default swiper styles */
/*.services-swiper {
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    overflow: hidden;
}*/

.services-swiper {
    padding-top: 20px !important;
    margin-bottom: 30px;
    max-width: var(--container-max);
}

.mbpag {
    position: relative !important;
    margin-top: 40px;
}

.services-list .service-item.swiper-slide-active .service-link::before {
    background-image: url('../etcon/img/line-pause.svg');
    background-size: 300px auto;
    opacity: 1;
}
.service-desc {
    color: rgba(255, 255, 255, 0.85);
    font-size: 16px;
    margin-left: 48px;
}

@media (max-width: 767px) {
    .services-wrap { flex-direction: column; align-items: flex-start; padding: 66px 14px; gap: 60px;}
    .services-title, .services-cta.btn { font-size: 22px; }
    .services-sub { font-size: 18px; }
    .services-list { /*gap: 30px;*/ padding-top: 30px; /*flex-wrap: wrap; margin-left: 65px;*/ }
    /*.service-item { min-width: 220px; }*/
    .service-link::before { content: ''; position: absolute; top: -28px; /*left: -64px;*/ }
}

/* Watch section (front page) */
.watch-section {
    background: transparent;
    color: #111;
    border-top: 1px solid #ECDFCB;
    /*box-shadow: 0px 1px 2px 1px #00000026;*/
}
.watch-wrap {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    gap: 36px;
    flex-direction: row;
}
.swiper-pagination-horizontal {
    justify-content: center;
}
/*.watch-left {
    flex: 1 1 0;
    max-width: 720px;
}*/
.watch-title {
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 12px 0;
    color: #0f0e0d;
}
.watch-intro {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 500;
    margin-bottom: 18px;
}
.watch-menu {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
    justify-content: flex-start;
}
.watch-menu-btn {
    display: inline-block;
    background: var(--button);
    box-shadow: 0 3px 0 rgba(0,0,0,0.12);
    text-decoration: none;
}
.watch-menu-btn:hover { background: var(--button-hover); }

.watch-right {
    width: 650px;
    flex: 0 0 650px;
    /*display: flex;*/
    justify-content: center;
}
.watch-right img {
    border-radius: 20px;
}
.watch-pagination.swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
    background: #ffffffb0;
    padding: 15px;
    max-width: max-content;
    margin: auto;
    border-radius: 20px;
    right: 0;
}
.watch-swiper {
    position: relative;
    border-radius: var(--card-radius);
    overflow: hidden;
    background: #000;
}
.watch-swiper .swiper-wrapper { position: relative; }
.watch-swiper img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}
.slide-caption {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 14px;
}

.watch-pagination {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 14px;
    z-index: 40;
    display: flex;
    gap: 8px;
}
.swiper-pagination-bullet {
    opacity: 1!important;
}
.swiper-pagination-bullet-active {
    background: var(--gold)!important;
    border-color: transparent;
}

.watch-controls {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 12px;
}
.watch-prev, .watch-next {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    background: #fff;
    box-shadow: 0 6px 14px rgba(0,0,0,0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.watch-prev::after, .watch-next::after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-top: 2px solid #111;
    border-right: 2px solid #111;
}
.watch-prev::after { transform: rotate(-135deg); }
.watch-next::after { transform: rotate(45deg); }

.watch-left .about-content .thumbnail-content img {
    float: right;
    margin: 0 20px 20px 20px;
    max-width: 50%;
    height: auto;
    border-radius: 20px;
}

@media (max-width: 1024px) {
    .watch-right { flex: 0 0 420px; width: 420px; }
}

@media (max-width: 767px) {
    .watch-left .about-content .thumbnail-content img { float: none; margin: auto; max-width: stretch;}
    .watch-wrap { flex-direction: column; gap: 20px;}
    .watch-right { width: 100%; flex: 0 0 auto; }
    .watch-pagination { bottom: 8px; }
    .watch-title { font-size: 22px; }
    .watch-intro { font-size: 15px; }
    .watch-menu { justify-content: flex-start; }
}

/* Two columns section added for front page */
.tc-title {
    font-size: 18px;
    font-weight: 600;
}
.two-columns-section {
    background: var(--bg);
    padding: 30px 0;
    /*border-top: 1px solid rgba(0,0,0,0.04);*/
}
.two-columns-wrap {
    display: flex;
    gap: 20px;
    align-items: stretch;
    flex-direction: row;
}
.two-columns-left {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.two-columns-right {
    flex: 0 0 calc(50% - 20px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.tc-item {
    background: var(--block);
    border-radius: var(--card-radius);
    padding: 18px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
    border: 1px solid #00000026;
    display: flex;
    flex-direction: column;
    /*height: 100%;*/
}
.tc-media {
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
}
.tc-text {
    font-size: 16px;
    line-height: 1.6;
    margin-top: 10px;
    font-weight: 500;
    flex-grow: 1;
}

/* reuse existing recent-more and btn styles for CTA alignment */
.two-columns-section .recent-more {
    margin-top: auto;
    justify-content: flex-end;
}

@media (max-width: 767px) {
    .two-columns-right {
        grid-template-columns: 1fr;
    }
    .two-columns-wrap { flex-direction: column; padding: 0 12px; gap: 16px; }
    .tc-media img { height: 140px; }
    .two-columns-section { padding: 32px 0; }
}

/* Recent posts with images - custom styles */
.recent-posts-images .recent-cards {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.recent-posts-images .recent-card.with-image {
    background: var(--block);
    padding: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    border: 1px solid #00000026;
    flex: 1 1 320px;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.recent-posts-images .card-media {
    width: 100%;
    height: 214px;
    background: #000;
}
.recent-posts-images .card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.recent-posts-images .card-body {
    padding: 18px 18px 0;
}
.recent-posts-images .card-title {
    font-size: 18px;
    margin: 0 0 10px 0;
}
.recent-posts-images .card-excerpt {
    margin: 0 0 12px 0;
    font-size: 16px;
    line-height: 1.4;
}
.recent-posts-images .card-meta {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 14px;
    color: var(--muted);
    margin: 12px 18px 18px 18px;
}
@media (max-width: 767px) {
    .recent-posts-images .recent-cards { gap: 12px; }
    .recent-posts-images .card-media { height: 140px; }
    .recent-posts-images .recent-card.with-image { min-width: 260px; }
}

/* Recent posts — 3-column grid layout */
.recent-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-items: start;
}

.recent-column .section-title {
    margin-bottom: 24px;
}

.recent-column .recent-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.recent-column .recent-card.with-image {
    flex: 0 0 auto;
    min-width: 0;
}

.recent-column .recent-more {
    margin-top: 20px;
    text-align: center;
}

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

@media (max-width: 767px) {
    .recent-columns {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* Stats section */
.stat-title {
    font-size: 18px;
    font-weight: 500;
}
.stats-list {
    display: flex;
    gap: 30px;
    align-items: stretch;
    justify-content: center;
}
.stats-subheading {
    margin-top: -25px;
    margin-bottom: 5px;
    text-align: center;
    line-height: 1.4;
}
.stats-subheading p {
    margin: 0;
}
.stat-item {
    width: 346px;
    border-radius: var(--card-radius);
    background: var(--block);
    padding: 18px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    border: 1px solid #00000026;
    display: flex;
    gap: 12px;
    align-items: center;
}
.stat-media { width: 72px; height: 72px; display:flex; align-items:center; justify-content:center; }
.stat-number { font-size: 48px; line-height: 1; display:flex; align-items:center; gap:6px; }
.stat-number span {
    background: var(--button);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.stat-item.stat-item--no-icon .stat-number {
    font-size: 55px;
    font-weight: 700;
    justify-content: center;
}

.stat-item.stat-item--no-icon .stat-title {
    text-align: center;
}

.stat-item.stat-item--no-icon {
    width: 33%;
}

@media (max-width: 767px) {
    .stats-list { gap: 18px; flex-wrap: wrap;}
    .stat-item.stat-item--no-icon {
        width: 100%; justify-content: center;
    }
    .stat-item { width: calc(100% - 28px); }
    .stat-media { width: 56px; height: 56px; }
    .stat-number span { font-size: 36px; }
}

/* FAQ section styles (новий блок) */
.section-faq-new {
    background: var(--block);
    padding: 40px 0;
}
.section-title.expanding-circles-bg {
    /*padding: 30px 60px 30px 0;*/
    margin: 0;
}
.section-faq-new .wrap{max-width:var(--container-max);margin:0 auto;padding-left:12px;padding-right:12px}
.faq-inner{display:flex;gap:36px;align-items:flex-start}
.faq-left{flex:1;display:flex;align-items:center;justify-content:center}
.faq-left img{max-width:100%;height:auto}
.faq-image-placeholder{width:320px;height:320px;background:linear-gradient(180deg,rgba(244,163,0,0.08),rgba(248,239,220,0.06))}
.faq-right{flex:1.1}
.faq-title{font-size:40px;margin:0 0 12px;color:#071226}
.faq-subtitle{color:var(--muted);margin:0 0 20px}
.faq-accordion .faq-item{background:var(--block);box-shadow:0 6px 20px rgba(13,18,29,0.06);margin-bottom:14px;overflow:hidden;border:1px solid rgba(0,0,0,0.06)}
.faq-item__button{width:100%;background:transparent;border:0;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.faq-item__title{font-size:18px;color:#071226}
.faq-item__icon{display:flex;align-items:center;color:var(--gold)}
.faq-item__content { padding: 0 20px 10px; margin-top: -20px; }

@media(max-width:900px){
  .faq-inner{flex-direction:column;gap:20px}
  .faq-image-placeholder{width:220px;height:220px}
  .faq-title{font-size:32px}
}

/* Arrow rotation for opened item (rotate 180deg) */
.faq-item__button .faq-item__icon svg{display:block;transition:transform .18s ease, color .18s ease}
.faq-item__button[aria-expanded="true"] .faq-item__icon svg{transform:rotate(180deg)}

/* Callout box under questions — styled without border-radius */
.faq-callout{margin-top:18px;padding:20px;background:linear-gradient(180deg, rgba(255,245,230,0.9), rgba(255,250,245,0.98));border:1px solid rgba(244,163,0,0.22);box-shadow:0 6px 18px rgba(13,18,29,0.03)}
.faq-callout__title{color:var(--text-dark,#071226);font-size:18px;margin-bottom:8px}
.faq-callout__text{color:var(--muted);line-height:1.6}

/* Adjust spacing on small screens */
@media(max-width:600px){
  .faq-callout{padding:14px;margin-top:12px}
  .faq-callout__title{font-size:16px}
}

/* Partners section */
.partners-wrap{max-width:var(--container-max);margin:0 auto;padding-left:12px;padding-right:12px}
.partners-pagination.swiper-pagination { position: relative; bottom: auto; left: auto; margin-top: 20px; text-align: center; }
/* Swiper-enabled list: let Swiper control slides per view. */
.partners-swiper{padding:10px 0}
.partner-card{background:var(--block);padding: 0 18px 18px;border:1px solid #00000026;box-shadow:0 6px 18px rgba(0,0,0,0.06);display:flex;flex-direction:column;gap:5px;align-items:center}
.partner-media{width:100%;height:160px;display:flex;align-items:center;justify-content:center}
.partner-media img{max-height:140px;object-fit:contain;display:block}
.partner-body{width:100%;text-align:center}
.partner-name{font-size:18px;}

/* Responsive fallbacks when Swiper is not available or for smaller screens */
@media (max-width: 1200px) {
    .partners-swiper .partners-list{gap:24px}
}
@media (max-width: 900px) {
    .partners-swiper .partners-list{gap:18px}
    .partner-item{width:calc(50% - 18px);flex:0 0 calc(50% - 18px)}
    .partner-media{height:140px}
}
@media (max-width: 767px) {
    .partners-swiper .partners-list{flex-wrap:nowrap}
    .partner-item{width:calc(100% - 28px);flex:0 0 auto}
    .partner-media{height:120px}
}

/* Contact section styles */
.contact-wrap { flex-direction: row; display: flex; gap: 28px;}
.contact-image { flex: 0 0 50%; border-radius: var(--card-radius); overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,0.06); }
.contact-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.contact-content { flex: 1 1 50%; display: flex; flex-direction: column; gap: 10px; }
.contact-title { font-size: 24px; font-weight: 600; margin: 0 0 6px 0; }
.contact-sub { margin: 0 0 14px 0; font-size: 18px; line-height: 1.3; font-weight: 600; }
.contact-form { background: transparent; }
.contact-form .wpcf7 { width: 100%; }
.contact-form .wpcf7 input[type="text"], .contact-form .wpcf7 textarea, .contact-form .wpcf7 input[type="tel"], .contact-form .wpcf7 input[type="email"] { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(0,0,0,0.06); background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.04); font-family: 'Montserrat'; }
.contact-form .wpcf7 .wpcf7-submit { display: inline-block; background: var(--button); color: #fff; padding: 12px 26px; border-radius: 12px; text-decoration: none; }

@media (max-width: 1024px) {
    .contact-wrap { gap: 20px; }
    .contact-title { font-size: 28px; }
}

@media (max-width: 767px) {
    .contact-wrap { flex-direction: column;}
    .contact-image { flex: 0 0 auto; width: 100%; }
    .contact-content { width: 100%; }
    .contact-title { font-size: 22px; }
}

.cf7-row {
    display: flex;
    gap: 20px;
}

form p {
    margin: 0 0 20px;
}

.cf7-col {
    flex: 1;
}

.cf7-col-full {
    width: 100%;
}

.cf7-form input,
.cf7-form textarea {
    width: 100%;
    border: none;
    padding: 16px 18px;
    border-radius: 14px;
    font-size: 16px;
    outline: none;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
}

.cf7-form textarea {
    resize: none;
    min-height: 120px;
}

.cf7-form ::placeholder {
    color: #9a9a9a;
}

.cf7-actions {
    display: flex;
    justify-content: flex-end;
}

.cf7-submit {
    display: inline-flex;
    background: var(--button);
    border-radius: var(--card-radius);
    align-items: center;
    gap: 10px;
    color: #fff;
    border: none;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
}

.cf7-submit-icon svg {
    display: block;
}

.wpcf7-form-control-wrap {
    display: block;
}

@media (max-width: 768px) {
    .cf7-row {
        flex-direction: column;
    }

    .cf7-actions {
        justify-content: center;
    }
}

/* About page: cards and articles grid */
.about-content {
    line-height: 1.5;
    font-weight: 500;
    font-size: 18px;
}
.about-cards-section .cards-grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:24px;
}
.about-cards-section .card{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    border-radius:12px;
    padding: 2px 0;
    background:var(--block);
    box-shadow:0 6px 18px rgba(0,0,0,0.06);
}
.about-cards-section .card-media img{
    width:100%;
    height:220px;
    object-fit:cover;
    border-radius:calc(var(--card-radius) - 6px);
    display:block;
}
.about-cards-section .card-body{
    padding:8px 6px 0;
}
.about-cards-section .card-title{
    font-size:18px;
    line-height:1.2;
    margin:8px 0 6px;
    text-align:center;
    font-weight: 500;
}
.about-cards-section .card-subtitle{
    font-size:13px;
    color:#666;
    text-align:center;
}
.about-cards-section .card-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:12px;
    padding:8px 12px;
    border-radius:999px;
    background:transparent;
    border:1px solid rgba(0,0,0,0.06);
    color:inherit;
    text-decoration:none;
}

/* Articles grid (3x2) */
.about-articles-grid .articles-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:14px;
    list-style:none;
    padding:0;
    margin:24px 0 0;
}
.about-articles-grid .article-item{
    display:flex;
    justify-content: center;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    border-radius:12px;
    background:var(--block);
    box-shadow:0 6px 18px rgba(0,0,0,0.06);
    text-align: center;
}
.about-articles-grid .article-icon { display: inline-flex; vertical-align: middle; margin-top: -3px; }
.about-articles-grid .article-title{ font-weight:500; }

.section-desc {
    font-weight: 600;
    font-size: 24px;
    margin-bottom: 0;
}

.section-sub-desc {
    margin-bottom: 0;
}

/* Responsive adjustments */
@media (max-width: 1200px){
    .about-cards-section .cards-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px){
    .about-cards-section .cards-grid{ grid-template-columns: repeat(2, 1fr); }
    .about-cards-section .card-media img{ height:200px; }
    .about-articles-grid .articles-grid{ grid-template-columns: repeat(2, 1fr); }
    p.section-desc {
        font-weight: 600;
        font-size: 20px;
    }
}
@media (max-width: 600px){
    .about-cards-section .cards-grid{ grid-template-columns: 1fr; }
    .about-cards-section .card-media img{ height:260px; }
    .about-cards-section .card{ padding:14px; }
    .about-articles-grid .articles-grid{ grid-template-columns: 1fr; }
}

/* Energo consulting services cards */
.services-cards-section {
    padding: 0 0 56px;
}

.services-cards-section .wrap {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0;
}

.services-cards-section .cards-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.services-cards-section .card {
    background: var(--block);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.services-cards-section .card:hover {
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15);
}

.services-cards-section .card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.services-cards-section .card-media {
    width: 100%;
    height: 210px;
    overflow: hidden;
}

.services-cards-section .card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.services-cards-section .card:hover .card-media img {
    transform: scale(1.05);
}

.services-cards-section .card-body {
    padding: 22px 18px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.services-cards-section .card-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}

.services-cards-section .card-subtitle {
    font-size: 14px;
    color: var(--muted);
    margin: 0;
    font-weight: 500;
}

@media (max-width: 1200px) {
    .services-cards-section .cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .services-cards-section .cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .services-cards-section .card-media {
        height: 240px;
    }
}

@media (max-width: 600px) {
    .services-cards-section {
        padding: 32px 12px;
    }
    .services-cards-section .cards-grid {
        grid-template-columns: 1fr;
    }
    .services-cards-section .card-media {
        height: 260px;
    }
}


/* Contact page section */
.page-contact-title {
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 30px 0;
    text-transform: uppercase;
}
.contact-info {
    flex: 0 0 40%;
    overflow: hidden;
}
.contact-right {
    flex: 1 1 60%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--block);
    border-radius: var(--card-radius);
    padding: 20px 20px 0;
    margin-top: 30px;
}
.page-contact-wrap {
    padding: 150px 0;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: var(--card-radius);
}

@media (max-width: 768px) {
    .contact-info {
        margin: 40px 0 0;
    }
    .cf7-row {
        gap: 0px;
    }
}

/* Section Two Block: full width when no image */
.watch-left.watch-left-full {
    max-width: 100%;
    flex: 1 1 100%;
}

ol {
    list-style: none;
    counter-reset: item;
    padding: 0;
    margin: 0;
}

ol li {
    counter-increment: item;
    margin-bottom: 12px;
    font-weight: 500;
    font-size: 18px;
}

ol li::before {
    content: counter(item);
    background: var(--button);
    color: white;
    font-weight: bold;
    padding: 5px 5px;
    border-radius: 10px;
    display: inline-flex;
    min-width: 30px;
    height: 30px;
    text-align: center;
    margin-right: 12px;
    font-size: 18px;
    justify-content: center;
    align-items: center;
}
.etcon-document-item {
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 500;
}
.etcon-documents-list {
    display: inline-block;
}

.etcon-download-badge {
    font-size: 15px;
}

/* Comments Form */
.comment-form {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.comment-reply-title {
    order: 0;
    flex: 1 1 100%;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
}

.comment-form-author,
.comment-form-email, .name-and-email .form-group {
    order: 1;
    flex: 1 1 calc(50% - 10px);
}

.name-and-email {
    display: flex;
    gap: 20px;
}

.comment-form-comment {
    order: 2;
    flex: 1 1 100%;
}

.comment-form-cookies-consent {
    order: 3;
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.form-submit {
    order: 4;
    flex: 1 1 100%;
}

.comment-notes {
    order: 5;
    width: 100%;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    font-family: 'Montserrat';
}

.comment-form input[type="submit"] {
    background-color: #000;
    color: #fff;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.comment-form input[type="submit"]:hover {
    background-color: #333;
}

div#respond small {
    padding: 0 20px;
}

ol.comment-list li {
    display: flex;
    gap: 20px;
}

div#altEmail_container, p.logged-in-as, span.says {
    display: none;
}

div#respond {
    background: var(--block);
    border-radius: var(--card-radius);
    padding: 18px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
    border: 1px solid #00000026;
    /* display: flex; */
    margin: 20px 0;
}

ul.comment-list.media-list {
    margin-left: -40px;
}

ul.children li:before {
    display: block;
    content: "\201C";
    font-size: 80px;
    position: absolute;
    left: -10px;
    top: -10px;
    color: #ffcc01;
}

ul.children li:before {
    left: -46px;
}

ul.comment-list.media-list, ul.children li {
    list-style-type: none;
    position: relative;
}

em.comment-awaiting-moderation {
    background: var(--block);
    border-radius: var(--card-radius);
    padding: 18px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
    border: 1px solid #00000026;
    display: flex;
    margin: 20px 0;
}

ul.comment-list.media-list>li {
    /*background: var(--block);*/
    border-radius: var(--card-radius);
    padding: 18px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
    border: 1px solid #00000026;
    /* display: flex; */
    margin: 20px 0;
}
.brand img {
    margin-top: 5px;
}

@media (max-width: 767px) {
    .name-and-email {
        flex-direction: column;
    }
}

/*Css microanimation*/
.floating-svg {
    position: fixed;
    top: 12%;
    right: 0%;
    z-index: 1;
    animation: float 6s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }
}

.morphing-svg {
    position: fixed;
    bottom: 5%;
    left: 1%;
    z-index: 1;
    animation: morph 8s ease-in-out infinite;
}

@keyframes morph {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    50% {
        transform: scale(1.1) rotate(180deg);
    }
}

/* --- ETCON SVG Micro-animations --- */
/*
[class*="-bg"] {
    position: relative;
    display: inline-block;
    z-index: 1;
    padding-right: 30px;
}

[class*="-bg"]::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0px;
    bottom: 0;
    z-index: -1;
    background-repeat: no-repeat;
    background-position: right center;
}

.btn::after {
    right: 15px;
}

[class*="-bg"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background-repeat: no-repeat;
    background-position: left center;
}
/*Individual parameter*/
/*.pulsing-matrix-bg {
    max-width: max-content;
    padding-right: 65px;
}

.section-title.bio-leaf-bg {
    max-width: max-content;
    padding: 0 65px;
    margin: auto;
}

.pr30 {
    padding-right: 40px;
}
h1.watch-title.atomic-energy-bg:after {
    background-size: auto;
    background-position: top right;
}

.section-title.energy-wave-bg {
    max-width: max-content;
    padding-right: 90px;
    margin: 20px auto;
}

.section-title.smart-grid-bg {
    padding: 10px 80px 10px 75px;
    margin: 30px auto -20px;
}

.electric-flow-bg {
    padding: 0 80px 0 75px;
    margin: 30px auto;
}*/
/**/

/* 1. Floating Pulse
.floating-pulse-bg::after {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='20' fill='%23FFA100' opacity='0.8' /%3E%3Ccircle cx='30' cy='30' r='25' stroke='%23FFA100' stroke-width='1' fill='none' opacity='0.4' /%3E%3Ccircle cx='30' cy='30' r='30' stroke='%23FF7700' stroke-width='1' fill='none' opacity='0.2' /%3E%3C/svg%3E");
    animation: floatingPulse 3s ease-in-out infinite;
}
@keyframes floatingPulse {
    0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 8px rgba(255, 161, 0, 0.4)); }
    50% { transform: translateY(-10px) scale(1.05); filter: drop-shadow(0 0 15px rgba(255, 119, 0, 0.6)); }
}

/* 2. Rotating Ring
.rotating-ring-bg::after {
    background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='ringGrad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23FFA100;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23FF7700;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='25' cy='25' r='20' stroke='url(%23ringGrad)' stroke-width='3' fill='none' stroke-linecap='round' /%3E%3C/svg%3E");
    animation: rotateRing 4s linear infinite;
}
@keyframes rotateRing { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* 3. Morphing Wave
.morphing-wave-bg::after {
    background-image: url("data:image/svg+xml,%3Csvg width='80' height='40' viewBox='0 0 80 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20 Q 10 10 20 20 T 40 20 T 60 20 T 80 20' stroke='%23FFA100' stroke-width='2' fill='none' /%3E%3Cpath d='M0 25 Q 10 35 20 25 T 40 25 T 60 25 T 80 25' stroke='%23FF7700' stroke-width='2' fill='none' opacity='0.6' /%3E%3C/svg%3E");
    animation: waveFlow 2.5s ease-in-out infinite;
}
@keyframes waveFlow { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.3); } }

/* 4. Pulsing Matrix
.pulsing-matrix-bg::after {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.d%7Banimation:p 1.5s ease-in-out infinite%7D.d2,.d4,.d6,.d8%7Banimation-delay:.3s%7D.d5%7Banimation:pc 1.5s ease-in-out infinite .6s%7D@keyframes p%7B0%25,100%25%7Br:4;opacity:.6%7D50%25%7Br:6;opacity:1%7D%7D@keyframes pc%7B0%25,100%25%7Br:5;opacity:1%7D50%25%7Br:7;opacity:.8%7D%7D%3C/style%3E%3Ccircle cx='15' cy='15' r='4' fill='%23FFA100' class='d d1'/%3E%3Ccircle cx='30' cy='15' r='4' fill='%23FFA100' class='d d2'/%3E%3Ccircle cx='45' cy='15' r='4' fill='%23FFA100' class='d d3'/%3E%3Ccircle cx='15' cy='30' r='4' fill='%23FF7700' class='d d4'/%3E%3Ccircle cx='30' cy='30' r='5' fill='%23FFA100' class='d d5'/%3E%3Ccircle cx='45' cy='30' r='4' fill='%23FF7700' class='d d6'/%3E%3Ccircle cx='15' cy='45' r='4' fill='%23FFA100' class='d d7'/%3E%3Ccircle cx='30' cy='45' r='4' fill='%23FFA100' class='d d8'/%3E%3Ccircle cx='45' cy='45' r='4' fill='%23FFA100' class='d d9'/%3E%3C/svg%3E");
}

/* 5. Animated Arrow
.animated-arrow-bg::after {
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 20 5 L 35 20 L 20 35' stroke='%23fff' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cline x1='8' y1='20' x2='28' y2='20' stroke='%23fff' stroke-width='2' stroke-linecap='round' /%3E%3C/svg%3E");
    animation: arrowSlide 2.8s ease-in-out infinite;
    background-size: 30px;
}
@keyframes arrowSlide { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }

/* 6. Expanding Circles
.expanding-circles-bg::after {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.c%7Banimation:cp 2s ease-in-out infinite%7D.r1%7Banimation:re 2s ease-out infinite%7D.r2%7Banimation:re 2s ease-out infinite .5s%7D@keyframes cp%7B0%25,100%25%7Br:5%7D50%25%7Br:7%7D%7D@keyframes re%7B0%25%7Br:12;opacity:1%7D100%25%7Br:30;opacity:0%7D%7D%3C/style%3E%3Ccircle cx='30' cy='30' r='5' fill='%23FFA100' class='c'/%3E%3Ccircle cx='30' cy='30' r='12' stroke='%23FFA100' stroke-width='1.5' fill='none' class='r1'/%3E%3Ccircle cx='30' cy='30' r='20' stroke='%23FF7700' stroke-width='1' fill='none' class='r2'/%3E%3C/svg%3E");
}

/* 7. Rotating Star
.rotating-star-bg::after {
    background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25 5 L31 20 L47 20 L35 29 L41 44 L25 35 L9 44 L15 29 L3 20 L19 20 Z' fill='%23FFA100' /%3E%3C/svg%3E");
    animation: rotateStar 3s linear infinite;
}
@keyframes rotateStar { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* 8. Flowing Lines
.flowing-lines-bg::after {
    background-image: url("data:image/svg+xml,%3Csvg width='70' height='70' viewBox='0 0 70 70' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 10 35 Q 20 15 35 10 T 60 35' stroke='%23FFA100' stroke-width='2' fill='none' stroke-linecap='round' /%3E%3Cpath d='M 10 45 Q 20 25 35 20 T 60 45' stroke='%23FF7700' stroke-width='2' fill='none' stroke-linecap='round' opacity='0.7' /%3E%3Cpath d='M 10 55 Q 20 35 35 30 T 60 55' stroke='%23FFA100' stroke-width='2' fill='none' stroke-linecap='round' opacity='0.5' /%3E%3C/svg%3E");
    animation: linesFlow 3s ease-in-out infinite;
}
@keyframes linesFlow { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }

/* 9. Bouncing Ball
.bouncing-ball-bg::after {
    background-image: url("data:image/svg+xml,%3Csvg width='50' height='70' viewBox='0 0 50 70' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.b%7Banimation:bb 1.2s ease-in-out infinite%7D@keyframes bb%7B0%25,100%25%7Btransform:translateY(0) scaleY(1);cy:15%7D50%25%7Btransform:translateY(35px) scaleY(.85);cy:50%7D%7D%3C/style%3E%3Ccircle cx='25' cy='15' r='8' fill='%23FFA100' class='b'/%3E%3Cline x1='5' y1='60' x2='45' y2='60' stroke='%23FF7700' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 10. Gradient Shimmer
.shimmer-bg::after {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='40' viewBox='0 0 100 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' style='stop-color:%23FFA100;stop-opacity:.3'/%3E%3Cstop offset='50%25' style='stop-color:%23FF7700;stop-opacity:1'/%3E%3Cstop offset='100%25' style='stop-color:%23FFA100;stop-opacity:.3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='5' width='100' height='30' rx='15' fill='url(%23s)'/%3E%3C/svg%3E");
    animation: shimmerFlow 2s ease-in-out infinite;
}
@keyframes shimmerFlow { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

/* 11. Spiral Motion
.spiral-motion-bg::after {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.s%7Banimation:sm 2.5s ease-in-out infinite%7D@keyframes sm%7B0%25,100%25%7Bcx:30;cy:10%7D25%25%7Bcx:45;cy:20%7D50%25%7Bcx:35;cy:40%7D75%25%7Bcx:15;cy:25%7D%7D%3C/style%3E%3Ccircle cx='30' cy='10' r='3' fill='%23FFA100' class='s'/%3E%3Cpath d='M30 30 L20 20 L10 30 L20 40 L30 30 L40 20 L50 30' stroke='%23FF7700' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

.spiral-motion-bg-before::before {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.s%7Banimation:sm 2.5s ease-in-out infinite%7D@keyframes sm%7B0%25,100%25%7Bcx:30;cy:10%7D25%25%7Bcx:45;cy:20%7D50%25%7Bcx:35;cy:40%7D75%25%7Bcx:15;cy:25%7D%7D%3C/style%3E%3Ccircle cx='30' cy='10' r='3' fill='%23FFA100' class='s'/%3E%3Cpath d='M30 30 L20 20 L10 30 L20 40 L30 30 L40 20 L50 30' stroke='%23FF7700' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 12. Heartbeat Pulse
.heartbeat-bg::after {
    background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.h%7Banimation:hb 1.4s ease-in-out infinite%7D@keyframes hb%7B0%25,100%25,50%25%7Btransform:scale(1)%7D25%25%7Btransform:scale(1.05)%7D75%25%7Btransform:scale(1.1)%7D%7D%3C/style%3E%3Cpath d='M25 40 C12 30 5 22 5 15 C5 10 9 6 13 6 C16 6 19 8 25 14 C31 8 34 6 37 6 C41 6 45 10 45 15 C45 22 38 30 25 40 Z' fill='%23FFA100' class='h' style='transform-origin:center'/%3E%3C/svg%3E");
}

/* 13. Lightning Strike
.lightning-strike-bg::after {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 30 5 L 25 25 L 35 25 L 20 45 L 28 55 L 30 40 L 40 40 L 25 55 Z' fill='%23FFA100' /%3E%3C/svg%3E");
    animation: lightningFlash 2s ease-in-out infinite;
}
@keyframes lightningFlash { 0%, 90%, 100% { opacity: 0; } 10%, 80% { opacity: 1; } }

/* 14. Solar Flare
.solar-flare-bg::after {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.s%7Banimation:sg 3s ease-in-out infinite%7D.r%7Banimation:rp 1.5s ease-in-out infinite%7D.r2%7Banimation-delay:.3s%7D.r3%7Banimation-delay:.6s%7D.r4%7Banimation-delay:.9s%7D@keyframes sg%7B0%25,100%25%7Br:12;opacity:.8%7D50%25%7Br:15;opacity:1%7D%7D@keyframes rp%7B0%25,100%25%7Bopacity:.5%7D50%25%7Bopacity:1%7D%7D%3C/style%3E%3Ccircle cx='30' cy='30' r='12' fill='%23FFA100' class='s'/%3E%3Cline x1='30' y1='5' x2='30' y2='15' stroke='%23FFA100' stroke-width='2' class='r r1'/%3E%3Cline x1='55' y1='30' x2='45' y2='30' stroke='%23FFA100' stroke-width='2' class='r r2'/%3E%3Cline x1='30' y1='55' x2='30' y2='45' stroke='%23FFA100' stroke-width='2' class='r r3'/%3E%3Cline x1='5' y1='30' x2='15' y2='30' stroke='%23FFA100' stroke-width='2' class='r r4'/%3E%3C/svg%3E");
}

.solar-flare-bg-before::before {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.s%7Banimation:sg 3s ease-in-out infinite%7D.r%7Banimation:rp 1.5s ease-in-out infinite%7D.r2%7Banimation-delay:.3s%7D.r3%7Banimation-delay:.6s%7D.r4%7Banimation-delay:.9s%7D@keyframes sg%7B0%25,100%25%7Br:12;opacity:.8%7D50%25%7Br:15;opacity:1%7D%7D@keyframes rp%7B0%25,100%25%7Bopacity:.5%7D50%25%7Bopacity:1%7D%7D%3C/style%3E%3Ccircle cx='30' cy='30' r='12' fill='%23FFA100' class='s'/%3E%3Cline x1='30' y1='5' x2='30' y2='15' stroke='%23FFA100' stroke-width='2' class='r r1'/%3E%3Cline x1='55' y1='30' x2='45' y2='30' stroke='%23FFA100' stroke-width='2' class='r r2'/%3E%3Cline x1='30' y1='55' x2='30' y2='45' stroke='%23FFA100' stroke-width='2' class='r r3'/%3E%3Cline x1='5' y1='30' x2='15' y2='30' stroke='%23FFA100' stroke-width='2' class='r r4'/%3E%3C/svg%3E");
}

/* 15. Charging Battery
.charging-battery-bg::after {
    background-image: url("data:image/svg+xml,%3Csvg width='50' height='70' viewBox='0 0 50 70' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.cb%7Bopacity:0;animation:cf 2s ease-in-out infinite%7D.b2%7Banimation-delay:.5s%7D.b3%7Banimation-delay:1s%7D@keyframes cf%7B0%25,50%25%7Bopacity:0%7D51%25,100%25%7Bopacity:1%7D%7D%3C/style%3E%3Crect x='15' y='10' width='20' height='40' rx='3' stroke='%23FFA100' stroke-width='2' fill='none'/%3E%3Crect x='25' y='50' width='5' height='10' fill='%23FFA100'/%3E%3Crect x='17' y='10' width='16' height='10' fill='%23FF7700' class='cb b1'/%3E%3Crect x='17' y='23' width='16' height='10' fill='%23FF7700' class='cb b2'/%3E%3Crect x='17' y='36' width='16' height='10' fill='%23FF7700' class='cb b3'/%3E%3C/svg%3E");
}

/* 16. Wind Turbine
.wind-turbine-bg::after {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='3' fill='%23FFA100' /%3E%3Cpath d='M30 30 L45 15' stroke='%23FFA100' stroke-width='2' /%3E%3Cpath d='M30 30 L45 45' stroke='%23FFA100' stroke-width='2' /%3E%3Cpath d='M30 30 L15 45' stroke='%23FFA100' stroke-width='2' /%3E%3Cpath d='M30 30 L15 15' stroke='%23FFA100' stroke-width='2' /%3E%3C/svg%3E");
    animation: rotateRing 2s linear infinite;
}

/* 17. Electric Flow
.electric-flow-bg::after {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 30 Q20 10 30 30 T50 30' stroke='%23FFA100' stroke-width='3' fill='none' stroke-linecap='round' /%3E%3Ccircle cx='15' cy='30' r='2' fill='%23FF7700' /%3E%3Ccircle cx='30' cy='30' r='2' fill='%23FF7700' /%3E%3Ccircle cx='45' cy='30' r='2' fill='%23FF7700' /%3E%3C/svg%3E");
    animation: electricPulse 1.5s ease-in-out infinite;
}
.electric-flow-bg-before::before {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 30 Q20 10 30 30 T50 30' stroke='%23FFA100' stroke-width='3' fill='none' stroke-linecap='round' /%3E%3Ccircle cx='15' cy='30' r='2' fill='%23FF7700' /%3E%3Ccircle cx='30' cy='30' r='2' fill='%23FF7700' /%3E%3Ccircle cx='45' cy='30' r='2' fill='%23FF7700' /%3E%3C/svg%3E");
    animation: electricPulse 1.5s ease-in-out infinite;
}
@keyframes electricPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* 18. Water Flow
.water-flow-bg::after {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.w%7Banimation:wm 2s ease-in-out infinite%7D@keyframes wm%7B0%25,100%25%7Btransform:translateX(0)%7D50%25%7Btransform:translateX(10px)%7D%7D%3C/style%3E%3Cpath d='M10 30 Q20 20 30 30 T50 30' stroke='%23FFA100' stroke-width='3' fill='none' class='w'/%3E%3Cpath d='M10 40 Q20 30 30 40 T50 40' stroke='%23FF7700' stroke-width='2' fill='none' class='w'/%3E%3C/svg%3E");
}

/* 19. Flame Flicker
.flame-flicker-bg::after {
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='60' viewBox='0 0 40 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 50 Q10 30 15 20 Q20 10 25 20 Q30 30 20 50 Z' fill='%23FFA100' /%3E%3C/svg%3E");
    animation: flameGlow 1s ease-in-out infinite alternate;
}
@keyframes flameGlow { 0% { opacity: 0.7; transform: scale(1); } 100% { opacity: 1; transform: scale(1.1); } }

/* 20. Energy Wave
.energy-wave-bg::after {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='40' viewBox='0 0 60 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.wl%7Banimation:we 2.5s ease-in-out infinite%7D@keyframes we%7B0%25,100%25%7Bopacity:.4;transform:scaleY(1)%7D50%25%7Bopacity:1;transform:scaleY(1.05)%7D%7D%3C/style%3E%3Cpath d='M0 20 Q15 5 30 20 T60 20' stroke='%23FFA100' stroke-width='3' fill='none' class='wl'/%3E%3Cpath d='M0 30 Q15 15 30 30 T60 30' stroke='%23FF7700' stroke-width='2' fill='none' class='wl' opacity='.7'/%3E%3C/svg%3E");
}
.energy-wave-bg-before::before {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='40' viewBox='0 0 60 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.wl%7Banimation:we 2.5s ease-in-out infinite%7D@keyframes we%7B0%25,100%25%7Bopacity:.4;transform:scaleY(1)%7D50%25%7Bopacity:1;transform:scaleY(1.05)%7D%7D%3C/style%3E%3Cpath d='M0 20 Q15 5 30 20 T60 20' stroke='%23FFA100' stroke-width='3' fill='none' class='wl'/%3E%3Cpath d='M0 30 Q15 15 30 30 T60 30' stroke='%23FF7700' stroke-width='2' fill='none' class='wl' opacity='.7'/%3E%3C/svg%3E");
}

/* 21. High-Voltage Tower
.hv-tower-bg::after {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.s%7Banimation:ts 2s linear infinite%7D@keyframes ts%7B0%25%7Bstroke-dashoffset:20;opacity:0%7D50%25%7Bopacity:1%7D100%25%7Bstroke-dashoffset:0;opacity:0%7D%7D%3C/style%3E%3Cpath d='M30 10 L15 50 M30 10 L45 50 M10 40 L50 40 M20 25 L40 25' stroke='%23FFA100' stroke-width='2'/%3E%3Cpath class='s' d='M10 40 L50 40' stroke='%23FF7700' stroke-width='2' stroke-dasharray='4 16'/%3E%3C/svg%3E");
}

/* 22. Atomic Orbit
.atomic-energy-bg::after {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.e%7Banimation:or 3s linear infinite;transform-origin:30px 30px%7D@keyframes or%7Bfrom%7Btransform:rotate(0deg)%7Dto%7Btransform:rotate(360deg)%7D%7D%3C/style%3E%3Ccircle cx='30' cy='30' r='6' fill='%23FFA100'/%3E%3Cellipse cx='30' cy='30' rx='25' ry='10' stroke='%23FF7700' stroke-width='1' opacity='.4'/%3E%3Cellipse cx='30' cy='30' rx='25' ry='10' stroke='%23FF7700' stroke-width='1' opacity='.4' transform='rotate(60 30 30)'/%3E%3Cellipse cx='30' cy='30' rx='25' ry='10' stroke='%23FF7700' stroke-width='1' opacity='.4' transform='rotate(120 30 30)'/%3E%3Ccircle class='e' cx='55' cy='30' r='3' fill='%23FFA100'/%3E%3C/svg%3E");
}

/* 23. Bio-Energy Leaf
.bio-leaf-bg::after {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.lg%7Banimation:lp 2s ease-in-out infinite%7D@keyframes lp%7B0%25,100%25%7Bfill:%23FFA100;opacity:.6%7D50%25%7Bfill:%238BC34A;opacity:1%7D%7D%3C/style%3E%3Cpath class='lg' d='M30 50 C30 50 10 35 10 20 C10 10 20 10 30 20 C40 10 50 10 50 20 C50 35 30 50 30 50 Z' fill='%23FFA100'/%3E%3Cpath d='M30 50 V20' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.bio-leaf-bg-before::before {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.lg%7Banimation:lp 2s ease-in-out infinite%7D@keyframes lp%7B0%25,100%25%7Bfill:%23FFA100;opacity:.6%7D50%25%7Bfill:%238BC34A;opacity:1%7D%7D%3C/style%3E%3Cpath class='lg' d='M30 50 C30 50 10 35 10 20 C10 10 20 10 30 20 C40 10 50 10 50 20 C50 35 30 50 30 50 Z' fill='%23FFA100'/%3E%3Cpath d='M30 50 V20' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 24. Geothermal Steam
.geothermal-bg::after {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.sl%7Banimation:sr 2s ease-out infinite;opacity:0%7D.s2%7Banimation-delay:.6s%7D.s3%7Banimation-delay:1.2s%7D@keyframes sr%7B0%25%7Btransform:translateY(10px);opacity:0%7D50%25%7Bopacity:.8%7D100%25%7Btransform:translateY(-20px);opacity:0%7D%7D%3C/style%3E%3Cpath d='M10 50 H50' stroke='%23FF7700' stroke-width='4' stroke-linecap='round'/%3E%3Cpath class='sl s1' d='M20 45 Q25 35 20 25' stroke='%23FFA100' stroke-width='2' fill='none'/%3E%3Cpath class='sl s2' d='M30 45 Q35 35 30 25' stroke='%23FFA100' stroke-width='2' fill='none'/%3E%3Cpath class='sl s3' d='M40 45 Q45 35 40 25' stroke='%23FFA100' stroke-width='2' fill='none'/%3E%3C/svg%3E");
}

/* 25. Smart Grid Pulse
.smart-grid-bg::after {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.n%7Banimation:np 2s infinite%7D.l%7Bstroke-dasharray:10;animation:fd 1s linear infinite%7D@keyframes np%7B0%25,100%25%7Br:3;opacity:.5%7D50%25%7Br:5;opacity:1%7D%7D@keyframes fd%7Bto%7Bstroke-dashoffset:-20%7D%7D%3C/style%3E%3Ccircle class='n' cx='10' cy='30' r='4' fill='%23FFA100'/%3E%3Ccircle class='n' cx='30' cy='10' r='4' fill='%23FFA100'/%3E%3Ccircle class='n' cx='30' cy='50' r='4' fill='%23FFA100'/%3E%3Ccircle class='n' cx='50' cy='30' r='4' fill='%23FFA100'/%3E%3Cpath class='l' d='M10 30 L30 10 L50 30 L30 50 Z' stroke='%23FF7700' stroke-width='1' fill='none'/%3E%3C/svg%3E");
    background-size: 60px;
}

.smart-grid-bg-before:before {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.n%7Banimation:np 2s infinite%7D.l%7Bstroke-dasharray:10;animation:fd 1s linear infinite%7D@keyframes np%7B0%25,100%25%7Br:3;opacity:.5%7D50%25%7Br:5;opacity:1%7D%7D@keyframes fd%7Bto%7Bstroke-dashoffset:-20%7D%7D%3C/style%3E%3Ccircle class='n' cx='10' cy='30' r='4' fill='%23FFA100'/%3E%3Ccircle class='n' cx='30' cy='10' r='4' fill='%23FFA100'/%3E%3Ccircle class='n' cx='30' cy='50' r='4' fill='%23FFA100'/%3E%3Ccircle class='n' cx='50' cy='30' r='4' fill='%23FFA100'/%3E%3Cpath class='l' d='M10 30 L30 10 L50 30 L30 50 Z' stroke='%23FF7700' stroke-width='1' fill='none'/%3E%3C/svg%3E");
    background-size: 60px;
}*/

/* Плавна зміна фону для services-hero через opacity */
.services-hero {
    position: relative;
    overflow: hidden;
}

.services-hero .hero-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 0;
}

.services-hero .hero-bg-layer.active {
    opacity: 1;
    z-index: 1;
}

.services-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    z-index: 2;
    pointer-events: none;
}

.services-hero > .wrap,
.services-hero .services-swiper {
    position: relative;
    z-index: 3;
}