.elementor-200 .elementor-element.elementor-element-94b6dab{--display:flex;}/* Start custom CSS for html, class: .elementor-element-65a550f */<style>
        /* Ez csak a szolgáltatások oldalra vonatkozó osztályokat tartalmazza */
        .szolgaltatasok-page {
            font-family: 'Poppins', sans-serif;
            color: #222222;
            overflow-x: hidden;
        }

        @font-face {
            font-family: 'Wasted Vindey';
            src: url('http://www.zsofidesign.hu/wp-content/uploads/2025/04/WastedVindeyRegular.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }

        .szolgaltatasok-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .szolgaltatasok-header {
            padding: 120px 0 60px;
            background: #222222;
            position: relative;
            overflow: hidden;
        }

        .szolgaltatasok-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('/api/placeholder/1400/600') center/cover no-repeat;
            opacity: 0.3;
            z-index: 0;
        }

        .szolgaltatasok-header::after {
            content: '';
            position: absolute;
            bottom: -100px;
            left: 0;
            width: 100%;
            height: 150px;
            background: #FFFFFF;
            transform: skewY(-3deg);
            z-index: 1;
        }

        .szolgaltatasok-header-content {
            position: relative;
            z-index: 2;
            text-align: center;
        }

        .szolgaltatasok-h1 {
            font-family: 'Wasted Vindey', sans-serif;
            font-size: 64px;
            color: #FFF;
            margin-bottom: 20px;
            letter-spacing: 1px;
        }

        .szolgaltatasok-subtitle {
            font-size: 20px;
            font-weight: 300;
            color: #FFFFFF;
            max-width: 800px;
            margin: 0 auto 40px;
        }

        .services-section {
    position: relative;
    padding: 60px 0;
    z-index: 1;
    background: linear-gradient(
        90deg,
        #FFFFFF 0%,
        #F9F9F9 25%,
        #FFF8E1 50%,
        #F5F5F5 75%,
        #FFFFFF 100%
    );
    overflow: hidden;
}

/* 3 mozgó fényfolt a háttérben */
.services-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(212,175,55,0.08), transparent 60%),
        radial-gradient(circle at 80% 40%, rgba(245,245,245,0.12), transparent 65%),
        radial-gradient(circle at 50% 70%, rgba(255,248,225,0.1), transparent 70%);
    animation: moveLights 25s ease-in-out infinite;
    z-index: 0;
    pointer-events: none;
    filter: blur(12px);
}

/* Tartalom felül marad */
.services-section > * {
    position: relative;
    z-index: 1;
}

/* Fényfoltok mozgása + pulzálása */
@keyframes moveLights {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.35;
    }
    25% {
        transform: translate(-5%, -3%) scale(1.1);
        opacity: 0.5;
    }
    50% {
        transform: translate(3%, 4%) scale(1.2);
        opacity: 0.6;
    }
    75% {
        transform: translate(-2%, 2%) scale(1.1);
        opacity: 0.45;
    }
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.35;
    }
}


        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
            margin-top: 60px;
        }

        .service-card {
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            position: relative;
            z-index: 1;
            padding: 40px 30px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            min-height: 380px;
        }

        .service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(178, 152, 83, 0.2);
        }

        .service-card:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(135deg, #B29853, #C9B686);
            z-index: 1;
        }

        .service-icon {
            font-size: 36px;
            color: #B29853;
            margin-bottom: 25px;
            background: rgba(201, 182, 134, 0.1);
            width: 80px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.3s ease;
        }

        .service-card:hover .service-icon {
            background: linear-gradient(135deg, #B29853, #C9B686);
            color: white;
            transform: scale(1.1);
        }

        .service-title {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 20px;
            color: #222222;
        }

        .service-description {
            font-size: 16px;
            line-height: 1.6;
            color: #555;
            margin-bottom: 30px;
        }

        .service-tag {
            display: inline-block;
            background: #FFF8E1;
            color: #B29853;
            padding: 5px 15px;
            border-radius: 20px;
            font-weight: 600;
            font-size: 14px;
            margin-top: auto;
            border: 1px solid rgba(178, 152, 83, 0.3);
            transition: all 0.3s ease;
        }

        .service-card:hover .service-tag {
            background: #B29853;
            color: white;
        }

        .process-section {
            padding: 100px 0;
            background: #222222;
            color: #FFFFFF;
            position: relative;
            overflow: hidden;
        }

        .process-title {
            font-family: 'Wasted Vindey', sans-serif;
            font-size: 42px;
            color: #FFF;
            text-align: center;
            margin-bottom: 60px;
        }

        .process-steps {
            display: flex;
            justify-content: space-between;
            max-width: 1000px;
            margin: 0 auto;
            position: relative;
        }

        .process-steps:before {
            content: '';
            position: absolute;
            top: 40px;
            left: 0;
            width: 100%;
            height: 2px;
            background: #C9B686;
            opacity: 0.3;
            z-index: 1;
        }

        .step {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            z-index: 2;
            flex: 1;
            max-width: 120px;
        }

        .step-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #B29853, #C9B686);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            color: white;
            font-size: 26px;
            position: relative;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }

        .step-number {
            position: absolute;
            top: -10px;
            right: -10px;
            width: 30px;
            height: 30px;
            background: #222222;
            border: 2px solid #B29853;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 14px;
        }

        .step-name {
            font-size: 14px;
            font-weight: 600;
            text-align: center;
            margin-top: 10px;
        }

        .why-choose-section {
            padding: 100px 0;
            background: linear-gradient(to right, #FFFFFF, #FFF8E1, #FFFFFF);
            position: relative;
        }

        .why-choose-title {
            font-family: 'Wasted Vindey', sans-serif;
            font-size: 42px;
            color: #B29853;
            text-align: center;
            margin-bottom: 60px;
        }

        .values-container {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            gap: 30px;
            max-width: 1000px;
            margin: 0 auto;
        }
        
        #kommunikacio {
            white-space: nowrap;
        }


        .value-item {
            flex: 1;
            min-width: 160px;
            text-align: center;
            padding: 20px;
            transition: all 0.3s ease;
            position: relative;
        }

        .value-item:after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 2px;
            background: #B29853;
            transition: all 0.3s ease;
        }

        .value-item:hover:after {
            width: 60px;
        }

        .value-item:hover .value-icon {
            transform: translateY(-10px);
            color: #B29853;
        }

        .value-icon {
            font-size: 42px;
            color: #C9B686;
            margin-bottom: 20px;
            transition: all 0.3s ease;
        }

        .value-name {
            font-weight: 600;
            font-size: 18px;
            margin-bottom: 10px;
        }

/* ====================== */
/* TOOLS – új, SVG ikonok */
/* ====================== */

.tools-section{
  --brand-gold:#B29853;
  --brand-gold-2:#C9B686;
  position:relative;
  padding:100px 0;
  background:linear-gradient(90deg,#FFFFFF 0%,#F9F9F9 25%,#FFF8E1 50%,#F5F5F5 75%,#FFFFFF 100%);
  overflow:hidden;
  z-index:1;
}

/* Mozgó alakzatok: marad */
.tools-section .shapes{position:absolute;inset:0;z-index:0;pointer-events:none;}
.tools-section .shape{position:absolute;opacity:.15;animation:floatShapes 20s infinite linear;transform-origin:center;}
.tools-section .shape.circle{border-radius:50%;background:rgba(212,175,55,.5);}
.tools-section .shape.square{background:rgba(255,255,255,.4);}
.tools-section .shape.triangle{width:0;height:0;border-left:25px solid transparent;border-right:25px solid transparent;border-bottom:40px solid rgba(212,175,55,.5);background:none;}
.tools-section .shape:nth-child(1){width:80px;height:80px;top:10%;left:5%;animation-duration:30s;}
.tools-section .shape:nth-child(2){width:100px;height:100px;top:40%;left:15%;animation-duration:35s;}
.tools-section .shape:nth-child(3){width:60px;height:60px;top:70%;left:25%;animation-duration:25s;}
.tools-section .shape:nth-child(4){width:90px;height:90px;top:20%;left:70%;animation-duration:28s;}
.tools-section .shape:nth-child(5){width:120px;height:120px;top:60%;left:85%;animation-duration:32s;}
.tools-section .shape:nth-child(6){width:50px;height:50px;top:80%;left:45%;animation-duration:22s;}
@keyframes floatShapes{
  0%{transform:translate(0,0) rotate(0);opacity:.15;}
  25%{transform:translate(40px,-60px) rotate(90deg);opacity:.4;}
  50%{transform:translate(80px,20px) rotate(180deg);opacity:.6;}
  75%{transform:translate(40px,60px) rotate(270deg);opacity:.4;}
  100%{transform:translate(0,0) rotate(360deg);opacity:.15;}
}
.tools-section > *:not(.shapes){position:relative;z-index:1;}

/* Cím */
.tools-title{
  font-family:'Wasted Vindey',sans-serif;
  font-size:36px;
  color:var(--brand-gold);
  text-align:center;
  margin-bottom:60px;
}

/* Rács – kényelmesebb, reszponzív grid */
.tools-grid{
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  gap:24px;
  max-width:1100px;
  margin:0 auto;
  justify-items:center;
}

/* Kártya */
.tool-item{
  background:#fff;
  border-radius:16px;
  padding:18px;
  width:140px;           /* nagyobb kártya, hogy az SVG szépen elférjen */
  height:140px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 20px rgba(0,0,0,.05);
  transition:transform .25s ease, box-shadow .25s ease;
  position:relative;
  overflow:hidden;
}
.tool-item:before{
  content:'';
  position:absolute;left:0;top:-100%;
  width:100%;height:5px;
  background:linear-gradient(135deg,var(--brand-gold),var(--brand-gold-2));
  transition:top .25s ease;
}
.tool-item:hover:before{ top:0; }
.tool-item:hover{
  transform:translateY(-6px);
  box-shadow:0 15px 30px rgba(178,152,83,.20);
}

/* IKON – <img> SVG-hez igazítva */
.tool-icon{
  width:56px;height:56px;
  margin:0 auto 10px;
  display:grid;place-items:center;
}
.tool-icon img{
  width:56px;height:56px;display:block;
  transition:transform .25s ease, opacity .25s ease;
  /* Az SVG már színezve érkezik az URL-ben; ha inline SVG-t használsz,
     ott a fill-t tudod átírni. */
}
.tool-item:hover .tool-icon img{ transform:scale(1.08); opacity:.95; }

/* Felirat */
.tool-name{
  font-size:14px;font-weight:600;line-height:1.2;text-align:center;
  color:#2b2b2b;
}

/* Reszponzív töréspontok */
@media (max-width: 1024px){
  .tools-grid{ grid-template-columns:repeat(4,1fr); }
}
@media (max-width: 720px){
  .tools-grid{ grid-template-columns:repeat(3,1fr); gap:18px; }
  .tool-item{ width:130px;height:130px; }
}
@media (max-width: 480px){
  .tools-grid{ grid-template-columns:repeat(2,1fr); }
  .tool-item{ width:128px;height:128px; }
  .tools-title{ font-size:30px; margin-bottom:36px; }
}

/* Akadálymentesség – kevesebb mozgásnál finomítsunk */
@media (prefers-reduced-motion: reduce){
  .tools-section .shape{ animation:none; }
  .tool-item, .tool-icon img{ transition:none; }
}


        .szolgaltatasok-contact-section {
            padding: 80px 0;
            background: #222222;
            text-align: center;
            position: relative;
        }

        .contact-title {
            font-family: 'Wasted Vindey', sans-serif;
            font-size: 36px;
            color: #FFF;
            margin-bottom: 20px;
        }

        .contact-text {
            color: #FFFFFF;
            margin-bottom: 30px;
            max-width: 600px;
            margin: 0 auto 40px;
        }

        .contact-btn {
            display: inline-block;
            padding: 15px 40px;
            background: linear-gradient(135deg, #B29853, #C9B686);
            color: white;
            font-weight: 600;
            text-decoration: none;
            border-radius: 50px;
            transition: all 0.3s ease;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        
        .contact-btn:before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: all 0.6s ease;
            z-index: -1;
        }

        .contact-btn:hover:before {
            left: 100%;
        }
        
        .contact-btn:hover {
            color:white;
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(178, 152, 83, 0.3);
        }

        .intro-text {
            max-width: 800px;
            margin: 0 auto 80px;
            text-align: center;
            font-size: 18px;
            line-height: 1.8;
            color: #555;
        }

        .highlight {
            color: #B29853;
            font-weight: 600;
        }
        
        .value-description {
    font-size: 14px;
    line-height: 1.5;
    color: #555;
    margin-top: 10px;
}

@media (max-width: 768px) {
    .value-description {
        font-size: 13px;
    }
}

        /* Responsive */
        @media (max-width: 1024px) {
            .services-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .process-steps {
                flex-wrap: wrap;
                justify-content: center;
                gap: 40px;
            }
            .process-steps:before {
                display: none;
            }
            .tools-grid {
                gap: 20px;
            }
        }

        @media (max-width: 768px) {
            .szolgaltatasok-h1 {
                font-size: 48px;
            }
            .services-grid {
                grid-template-columns: 1fr;
            }
            .process-section {
                padding: 60px 0;
            }
            .step {
                max-width: 100px;
            }
            .step-icon {
                width: 60px;
                height: 60px;
                font-size: 20px;
            }
            .value-item {
                min-width: 120px;
            }
        }

        @media (max-width: 480px) {
            .szolgaltatasok-header {
                padding: 80px 0 40px;
            }
            .szolgaltatasok-h1 {
                font-size: 36px;
            }
            .szolgaltatasok-subtitle {
                font-size: 16px;
            }
            .services-section {
                padding: 40px 0;
            }
            .service-icon {
                width: 60px;
                height: 60px;
                font-size: 24px;
            }
            .service-title {
                font-size: 20px;
            }
        }

        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .szolgaltatasok-animate {
            animation: fadeInUp 0.6s ease forwards;
        }
        
        .contact-section {
            padding: 80px 0;
            background: #222;
            text-align: center;
            position: relative;
        }
        }

        .contact-title {
            font-family: 'Wasted Vindey', sans-serif;
            font-size: 36px;
            color: var(--gold-primary);
            margin-bottom: 20px;
        }

        .contact-text {
            color: white;
            margin-bottom: 30px;
            max-width: 600px;
            margin: 0 auto 40px;
        }

        
        }

        .intro-text {
            max-width: 800px;
            margin: 0 auto 80px;
            text-align: center;
            font-size: 18px;
            line-height: 1.8;
            color: #555;
        }

        .highlight {
            color: var(--gold-primary);
            font-weight: 600;
        }
        
    </style>/* End custom CSS */