/*
Theme Name: Divi Child (NIVOR)
Theme URI: https://nivor.hu
Description: Child theme for Divi
Author: Fedor
Author URI: https://nivor.hu
Template: Divi
Version: 1.0.0
Text Domain: divi-child
*/



/* =========================================
   GLOBÁLIS BEÁLLÍTÁSOK ÉS VÁLTOZÓK
   ========================================= */
:root {
    /* Fő betűtípus változó */
    --main-font: 'Poppins', sans-serif;
}

/* Minden alapvető szöveges elemre kiterjesztve */
body, p, span, a, li, div, input, textarea, select, button {
    font-family: var(--main-font) !important;
}

/* Minden címsorra kiterjesztve */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--main-font) !important;
}

/* Divi specifikus modulok felülírása a biztonság kedvéért */
.et_pb_module, .et_pb_text, .et_pb_button {
    font-family: var(--main-font) !important;
}


/* =========================================
   EGYÉB SEGÉD FORMÁZÁSOK
   ========================================= */
.kozepre-rendezve {
    display: flex;
    flex-direction: column;   /* Az elemek egymás alatt maradjanak (oszlop) */
    justify-content: center;  /* FÜGGŐLEGES középre rendezés */
}








/* =========================================
   HOME PAGE - HERO LEFT COLUMN ALIGNMENT
   ========================================= */

.home-hero-left-col {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Függőleges középre igazítás az oszlopon belül */
    padding-right: 5%; /* Biztonsági térköz a kártya előtt */
}

/* Mobilon vegyük le az oldalsó paddingot, hogy ne legyen túl keskeny */
@media (max-width: 980px) {
    .home-hero-left-col {
        padding-right: 0;
        margin-bottom: 3rem; /* Térköz a kártya előtt, ha mobilon egymás alá kerülnek */
        text-align: center; /* Opcionális: mobilon jól mutathat a középre zárt szöveg */
    }
    
    /* Ha mobilon is középre zárt szöveget szeretnél, a gombok konténerét is igazítani kell: */
    .home-hero-left-col .home-hero-buttons {
        justify-content: center;
    }
}




/* =========================================
   HOME PAGE - HERO SECTION - BADGE
   ========================================= */

/* A badge fő konténere */
.home-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem; 
    border-radius: 8px; 
    border: 1px solid #e5e7eb; 
    background-color: rgba(255, 255, 255, 0.8); 
    padding: 0.375rem 1rem; 
    backdrop-filter: blur(4px); 
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); 
}

/* A pulzáló pötty konténere */
.home-badge-dot-wrapper {
    position: relative;
    display: flex;
    align-items: center;     /* Hogy a kisebb pötty pontosan középen maradjon */
    justify-content: center; /* Vízszintesen is középre zárjuk */
    height: 0.5rem; 
    width: 0.5rem;  
}

/* A pulzáló (animált) zöld pötty */
.home-badge-dot-ping {
    position: absolute;
    display: inline-flex;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background-color: #4ade80; 
    opacity: 0.8;
    animation: home-ping 2.5s linear infinite;
}

/* A statikus zöld pötty a közepén - kisebb méretre véve */
.home-badge-dot-solid {
    position: relative;
    display: inline-flex;
    border-radius: 50%;
    height: 0.375rem; /* Kisebb méret (eredeti 0.5rem / 8px helyett kb. 6px) */
    width: 0.375rem;  /* Kisebb méret */
    background-color: #22c55e; 
}

/* A badge szövege (csak a pozicionálás maradt) */
.home-badge-text {
    line-height: 1; 
}

/* Pulzáló animáció definiálása */
@keyframes home-ping {
    0% {transform: scale(1);opacity: 0.8;}
    40% {transform: scale(1.6);opacity: 0.5; }
    80% {transform: scale(2.2);opacity: 0.1; }
    100% {transform: scale(2.5);opacity: 0; }
}




/* =========================================
   HOME PAGE - HERO SECTION - BUTTONS
   ========================================= */

/* A gombokat összefogó konténer - Alapértelmezett (Asztali) nézet */
.home-hero-buttons {
    display: flex !important;
    flex-direction: row; 
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 1rem;
    align-items: center; 
}

/* Elsődleges gomb (Sötét háttér, világos betű) */
.home-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #1a1d24; 
    color: #ffffff !important; 
    padding: 0.75rem 1rem;
    border-radius: 8px; 
    text-decoration: none !important; 
    transition: all 0.3s ease; 
}

/* Elsődleges gomb - Hover állapot */
.home-btn-primary:hover {
    background-color: #1f2937; 
    transform: scale(1.02); 
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); 
    text-decoration: none !important; 
    color: #ffffff !important;
}

/* Másodlagos gomb (Világos háttér, sötét betű) */
.home-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff; 
    color: #1a1d24 !important; 
    border: 1px solid #d1d5db; 
    padding: 0.75rem 1rem;
    border-radius: 8px; 
    backdrop-filter: blur(4px); 
    -webkit-backdrop-filter: blur(4px);
    text-decoration: none !important; 
    transition: all 0.3s ease; 
}

/* Másodlagos gomb - Hover állapot */
.home-btn-secondary:hover {
    background-color: #f9fafb; 
    transform: scale(1.02); 
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); 
    text-decoration: none !important;
    color: #1a1d24 !important;
}

@media (max-width: 767px) {
    .home-hero-buttons {
        flex-direction: column; /* Egymás alá teszi a gombokat */
        align-items: stretch; /* Kitöltik a rendelkezésre álló helyet */
        gap: 0.1rem; /* Picit nagyobb térköz mobilon, hogy könnyebb legyen rányomni */
    }
    
    .home-btn-primary, 
    .home-btn-secondary {
        width: 100%; /* Teljes szélességű gombok mobilon */
    }
}




/* =========================================
   HOME PAGE - HERO SECTION - FLOATING CARD
   ========================================= */

/* Konténer, ami középre rendezi a kártyát az oszlopban */
.home-card-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 500px;
    padding: 2rem 1rem;
}

/* Maga a Kártya */
.home-card-container {
    background-color: rgba(255, 255, 255, 0.9); 
    backdrop-filter: blur(24px); 
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid #e5e7eb; 
    border-radius: 12px; 
    padding: 1.5rem; 
    width: 100%;
    /* --- ÚJ ÉRTÉKEK --- */
    min-width: 350px; /* Megakadályozza a túlzott összeszűkülést */
    max-width: 500px; 
    /* ------------------ */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); 
    transform: rotate(3deg); 
    transition: transform 0.5s ease; 
    position: relative;
    z-index: 10;
}
.home-card-container:hover {
    transform: rotate(0deg); 
}

/* --- Kártya belső tartalmi elemei --- */
.home-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem; /* Kicsit csökkentve */
}

.home-card-title {
    font-size: 1.125rem; 
    font-weight: 700; 
    color: #1a1d24; 
    margin: 0;
}

.home-card-badge {
    background-color: rgba(125, 213, 229, 0.2); 
    color: #5bc2d4; 
    padding: 0.25rem 0.75rem; 
    border-radius: 8px; 
    font-size: 0.75rem; 
    font-weight: 700; 
}

.home-card-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* CSÖKKENTVE: 1rem -> 0.75rem */
}

.home-card-item {
    display: flex;
    gap: 0.75rem; /* CSÖKKENTVE: 1rem -> 0.75rem */
    align-items: flex-start;
}

.home-card-item:last-child {
    align-items: center; 
}

.home-card-dot {
    height: 0.5rem; 
    width: 0.5rem; 
    border-radius: 50%;
    background-color: #7dd5e5; 
    box-shadow: 0 0 0 4px rgba(125, 213, 229, 0.2); 
    flex-shrink: 0;
    margin-top: 0.4rem; /* Pontosabb igazítás a szöveghez */
}

.home-card-dot-empty {
    height: 0.5rem; 
    width: 0.5rem; 
    border-radius: 50%;
    background-color: #d1d5db; 
    flex-shrink: 0;
}

.home-card-box {
    flex: 1; 
    background-color: #f9fafb; 
    padding: 0.85rem 1rem; /* Kicsit laposabb (függőleges padding csökkentve) */
    border-radius: 12px; 
    border: 1px solid #f3f4f6; 
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); 
}

.home-card-label {
    font-size: 0.7rem; /* Kicsit kisebb */
    color: #64748b; 
    text-transform: uppercase; 
    letter-spacing: 0.05em; 
    margin-bottom: 0.15rem; 
}

.home-card-value {
    color: #1a1d24; 
    font-weight: 500; 
    display: flex;
    justify-content: space-between;
    font-size: 0.95rem;
}

.home-card-icon-muted {
    color: #9ca3af; 
    font-size: 0.85rem; 
}

.home-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem; 
    margin-top: 0.4rem; 
}

.home-card-tag {
    background-color: #ffffff; 
    border: 1px solid #e5e7eb; 
    font-size: 0.7rem; 
    padding: 0.2rem 0.5rem; 
    border-radius: 0.375rem; 
    color: #64748b; 
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); 
}

.home-card-line {
    margin-left: 0.1875rem; 
    height: 1.15rem; /* CSÖKKENTVE: 1.5rem -> 1.15rem */
    width: 2px; 
    background-color: #e5e7eb; 
}

.home-card-add {
    flex: 1; 
    border: 2px dashed #d1d5db; 
    padding: 0.65rem; /* Kisebb padding */
    border-radius: 12px; 
    text-align: center; 
    color: #64748b; 
    font-size: 0.85rem; 
    background-color: #ffffff; 
    cursor: pointer; 
    transition: all 0.3s ease; 
}

.home-card-add:hover {
    border-color: #7dd5e5; 
    color: #5bc2d4; 
}

.home-card-footer {
    margin-top: 1.25rem; /* Kicsit csökkentve */
    padding-top: 1rem; 
    border-top: 1px solid #f3f4f6; 
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.home-card-budget-label {
    font-size: 0.75rem; 
    color: #64748b;
    margin-bottom: 0.25rem; /* Itt adtunk hozzá egy kis távolságot (kb. 4px) */
    display: block; /* Biztosítjuk, hogy a margó érvényesüljön */
}

.home-card-budget-value {
    color: #1a1d24; 
    font-weight: 700; 
    font-size: 1.125rem;
}

.home-card-budget-value a, 
.home-card-budget-value span {
    color: inherit !important;
    text-decoration: none !important;
}

.home-card-btn {
    background-color: #7dd5e5; 
    color: #ffffff; 
    /* Fix és azonos szélesség/magasság a szabályos körhöz */
    width: 42px; 
    height: 42px;
    padding: 0; /* Töröljük a paddingot, hogy ne torzítson */
    border: none;
    border-radius: 50%; 
    box-shadow: 0 10px 15px -3px rgba(125, 213, 229, 0.5); 
    transition: all 0.3s ease;
    cursor: pointer;
    
    /* Középre igazítás */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Az ikon méretének finomhangolása a körön belül */
.home-card-btn .material-symbols-outlined {
    font-size: 20px;
    line-height: 1;
    display: block;
}

.home-card-btn:hover {
    background-color: #5bc2d4; 
    transform: scale(1.1);
}

@media (max-width: 767px) {
    /* Telefonon (mobilon) megszüntetjük a döntést */
    .home-card-container {
        transform: rotate(0deg) !important;
        min-width: 100%;
    }
    
    /* Hover állapotban is maradjon egyenes mobilon */
    .home-card-container:hover {
        transform: rotate(0deg) !important;
    }

    /* Opcionális: mobilon csökkenthetjük a wrapper magasságát, 
       hogy ne legyen túl nagy üres tér a kártya körül */
    .home-card-wrapper {
        min-height: auto;
        padding: 1.5rem 0.5rem;
    }
}




/* =========================================
   HOME PAGE - HERO SECTION - NO-SCROLL BLUE BLOBS
   ========================================= */

/* Szigorú helyi korlátozás a szekción */
.et_pb_section.home-hero-section {
    position: relative !important;
    overflow: hidden !important; /* Levágja, ami kilógna */
    z-index: 1 !important;
    width: 100% !important;
    max-width: 100vw !important;
}

.home-hero-blur-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    -webkit-filter: blur(90px);
    z-index: 0;
    pointer-events: none;
    will-change: transform;
}

/* 1. BAL FELÜL - Az új kék színnel */
.home-hero-blur-primary {
    width: 380px;
    height: 380px;
    /* #5eaeee kék (rgba: 94, 174, 238) */
    background: radial-gradient(circle, rgba(94, 174, 238, 0.7) 0%, rgba(94, 174, 238, 0) 70%);
    top: -5%;
    left: -5%;
    animation: blob-dynamic-right 6s ease-in-out infinite alternate;
}

/* 2. JOBB FELÜL - Az új kék színnel */
.home-hero-blur-secondary {
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(94, 174, 238, 0.6) 0%, rgba(94, 174, 238, 0) 70%);
    top: 2%;
    right: -2%;
    animation: blob-dynamic-left 9s ease-in-out infinite alternate;
}

/* 3. LENTEBB KÖZÉPEN - Az új kék színnel */
.home-hero-blur-tertiary {
    width: 550px;
    height: 400px;
    background: radial-gradient(circle, rgba(94, 174, 238, 0.5) 0%, rgba(94, 174, 238, 0) 75%);
    bottom: 10%;
    left: 25%;
    animation: blob-dynamic-center 8s ease-in-out infinite alternate;
}

/* --- ANIMÁCIÓK: IRÁNYÍTOTT MOZGÁS --- */

/* Jobb oldali foltoknak: csak balra tolódhat el (negatív X) */
@keyframes blob-move-left {
    0% { transform: scale(1) translate(0, 0); opacity: 0.5; }
    100% { transform: scale(1.3) translate(-40px, 30px); opacity: 0.8; }
}

/* Bal oldali foltoknak: csak jobbra tolódhat el (pozitív X) */
@keyframes blob-move-right {
    0% { transform: scale(1) translate(0, 0); opacity: 0.5; }
    100% { transform: scale(1.3) translate(40px, -30px); opacity: 0.8; }
}

@media (max-width: 767px) {
    .home-hero-blur-blob {
        display: none !important;
    }
}










/* =========================================
   HOME PAGE - HOW IT WORKS - DINAMIKUS SOR
   ========================================= */

.home-how-section {
    padding: 10px 0;
    background-color: #ffffff;
}

.home-how-container {
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 10px;
}

.home-how-header {
    text-align: center;
    margin-bottom: 50px;
}

.home-how-title {
    font-size: 42px;
    color: #1a1d24;
    margin: 25px 0 15px;
    font-weight: 700;
}

.home-how-subtitle {
    color: #64748b;
    font-size: 18px;
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.6;
}

/* MODOSÍTVA: Flexbox a dinamikus elemszámhoz */
.home-how-steps {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    position: relative;
    width: 100%;
}

/* Összekötő vonal - Folytonos gradienssel, dinamikus szélességgel */
.home-how-steps::before {
    content: "";
    position: absolute;
    top: 40px; /* Az ikon középvonala */
    /* A vonal az első ikon közepétől az utolsóig tart */
    left: 50px; 
    right: 50px;
    height: 2px;
    background: linear-gradient(to right, 
        rgba(155, 216, 229, 0) 0%, 
        rgba(155, 216, 229, 1) 50%, 
        rgba(155, 216, 229, 0) 100%
    );
    z-index: 0;
    border-radius: 2px;
}

/* MODOSÍTVA: Rugalmas szélesség az elemeknek */
.home-how-step {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 1;
    min-width: 120px; /* Biztosítja, hogy ne nyomódjanak össze túlzottan */
}

.home-how-icon-wrapper {
    width: 80px;
    height: 80px;
    background-color: #ffffff;
    border: 2px solid #f1f5f9;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 25px rgba(0,0,0,0.03);
}

.home-how-svg-icon {
    width: 32px;
    height: 32px;
    color: #1a1d24;
    transition: all 0.3s ease;
}

.home-how-number {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 26px;
    height: 26px;
    background-color: #1a1d24;
    color: #ffffff;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #ffffff;
}

.home-how-step:hover .home-how-icon-wrapper {
    border-color: #9bd8e5;
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(155, 216, 229, 0.25);
}

.home-how-step:hover .home-how-svg-icon {
    color: #5bc2d4;
    transform: scale(1.1);
}

.home-how-step-title {
    font-size: 19px;
    font-weight: 700;
    color: #1a1d24;
    margin-bottom: 12px;
}

.home-how-step-text {
    font-size: 14.5px;
    color: #64748b;
    line-height: 1.6;
    padding: 0 10px;
}

/* Reszponzivitás javítása flex-szel */
@media (max-width: 767px) {
    
    .home-how-header {
        text-align: left;
    }
    
    .home-how-title {
        font-size: 32px;
        color: #1a1d24;
        margin: 20px 0 10px;
        font-weight: 700;
        line-height: 1.2;
    }
    
    .home-how-subtitle {
        color: #64748b;
        font-size: 16px;
        margin: 0 auto;
        line-height: 1.6;
    }

    .home-how-section {
        padding: 30px 0;
    }

    .home-how-steps {
        flex-direction: column;
        gap: 30px;
    }

    .home-how-steps::before { display: none; }

    .home-how-step {
        display: grid;
        /* Két oszlop: 1. az ikon (80px), 2. a maradék hely a szövegnek */
        grid-template-columns: 80px 1fr; 
        /* Függőlegesen középre igazítja a két oszlop tartalmát egymáshoz képest */
        align-items: center; 
        text-align: left;
        width: 100%;
    }

    .home-how-icon-wrapper {
        grid-row: 1 / 3; /* Az ikon elfoglalja mindkét sor magasságát baloldalt */
        width: 70px;
        height: 70px;
        margin: 0;
    }

    .home-how-step-title {
        grid-column: 2; /* A második oszlopba kerül */
        font-size: 18px;
        margin: 0;
        line-height: 1.2;
        font-weight: 700;
        align-self: end; /* A cím az alsó feléhez húz az ikon középvonalánál */
        padding-bottom: 2px;
    }

    .home-how-step-text {
        grid-column: 2; /* Ez is a második oszlopba kerül, a cím alá */
        font-size: 14px;
        line-height: 1.4;
        margin: 0;
        padding: 0;
        align-self: start; /* A szöveg a felső feléhez húz az ikon középvonalánál */
    }

    .home-how-number {
        width: 22px;
        height: 22px;
        font-size: 11px;
        top: -6px;
        right: -6px;
    }
}













/* =========================================
   HOME PAGE - WHY US 
   ========================================= */
/* Alapértelmezett (mobil) nézet */
.mod-comparison-container {
    padding: 0;
    background: transparent;
    border: none;
}

.mod-comparison-grid-scroll {
    overflow-x: auto;
    padding-bottom: 30px;
    padding-left: 20px;
    padding-right: 20px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.mod-comparison-grid-scroll::-webkit-scrollbar { display: none; }

.mod-comparison-grid {
    display: flex;
    gap: 20px;
    width: max-content;
}

.mod-comparison-card {
    width: 220px;
    padding: 24px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
    background-color: white;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* Asztali nézet (1024px felett) */
@media (min-width: 1024px) {
    .mod-comparison-container {
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(12px);
        border-radius: 12px;
        border: 1px solid #e5e7eb;
        padding: 25px;
        max-width: auto; 
        margin: 0 auto;
        box-sizing: border-box;
    }
    
    .mod-comparison-grid-scroll {
        padding: 0;
        overflow: visible;
    }
    
    .mod-comparison-grid {
        /* JAVÍTÁS: Kényszerítjük a 100% szélességet */
        width: 100%;
        max-width: 100%;
        display: grid;
        /* 4 egyenlő oszlop, amik kitöltik a 1400px-et */
        grid-template-columns: repeat(4, 1fr); 
        gap: 24px;
    }
    
    .mod-comparison-card {
        width: auto; /* Itt már nem fix 280px, hanem amennyit a grid ad */
        flex-shrink: 1;
    }
}

/* Kártya stílusok */
.mod-comparison-card-muted {
    background-color: rgba(249, 250, 251, 0.5);
}

.mod-comparison-card-highlight {
    background-color: rgba(125, 213, 229, 0.05);
    border-color: rgba(125, 213, 229, 0.5);
}

.mod-comparison-badge {
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #7dd5e5;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: bold;
}

.mod-comparison-rows {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
    justify-content: space-around;
    text-align: center;
}

.mod-comparison-label {
    display: block;
    font-size: 12px;
    color: #64748b;
    margin-bottom: 4px;
}

.mod-text-danger { color: #ef4444; }
.mod-text-success { color: #16a34a; }












/* =========================================
   SERVICES 
   ========================================= */
/* --- MOD-SERVICES SZEKCIÓ --- */
    .mod-services-container {
        /* JAVÍTÁS: Sehol nincs oldalsó margó vagy padding */
        max-width: 100%; 
        width: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* Rácsrendszer */
    .mod-services-grid {
        display: grid;
        grid-template-columns: 1fr;
        /* Ha itt 0-t írsz, a kártyák teljesen összeérnek oldalt */
        gap: 20px; 
        grid-auto-rows: 400px;
        padding: 0;
    }

    @media (min-width: 768px) {
        .mod-services-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
            grid-auto-rows: 450px;
        }
    }

    @media (min-width: 1200px) {
        .mod-services-grid {
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }
    }

    /* Kártya Modul Alap */
    .mod-service-card {
        position: relative;
        /* A lekerekítés megmarad */
        border-radius: 16px; 
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    }

    /* Opcionális: Ha mobilon azt akarod, hogy a kártyák széle 
       ne érjen a kijelzőhöz, de a konténernek ne legyen margója, 
       adj a gridnek egy pici paddinget: */
    @media (max-width: 767px) {
        .mod-services-grid {
            padding: 0 10px; /* Csak egy minimális rés a kártyák és a teló széle közt */
        }
    }

    @media (min-width: 1200px) {
        .mod-service-card-wide { grid-column: span 2; }
        .mod-service-card-tall { grid-row: span 2; }
    }

    /* Háttér és Overlay */
    .mod-service-bg {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        z-index: 1;
    }

    .mod-service-card:hover .mod-service-bg {
        transform: scale(1.1);
    }

    .mod-service-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%);
        z-index: 2;
    }

    /* Tartalom Modul */
    .mod-service-content {
        position: relative;
        z-index: 3;
        padding: 30px;
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: flex-end;
        box-sizing: border-box;
    }

    @media (min-width: 768px) {
        .mod-service-content { padding: 40px; }
    }

    .mod-service-title {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 12px;
        color: #ffffff;
    }

    @media (min-width: 768px) {
        .mod-service-title { font-size: 28px; }
    }

    .mod-service-desc {
        font-size: 15px;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.9);
        max-width: 550px;
    }

    /* Kiemelt (Kék) kártya */
    .mod-service-card-featured {
        background-color: #7dd5e5;
    }

    .mod-service-card-featured .mod-service-overlay {
        display: none;
    }

    /* Ikon abszolút középre helyezése */
    .mod-service-card-featured .mod-service-icon-wrapper {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100px;
        height: 100px;
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
    }

    .mod-service-icon-diamond {
        width: 45px;
        height: 45px;
        stroke: white;
    }