/* =========================================================
IT ÜZEMELTETÉS OLDAL
========================================================= */

.it-hero{

    padding:190px 0 120px;

    background:
        linear-gradient(
            rgba(255,255,255,.68),
            rgba(255,255,255,.68)
        ),
        url("../assets/it-hero.webp");

    background-size:cover;
    background-position:center;

    text-align:center;

}

.it-hero-content{

    max-width:900px;

    margin:auto;

}

.it-hero h1{

    font-size:64px;

    line-height:1.05;

    margin:25px 0;

}

.it-hero p{

    font-size:22px;

    color:var(--text-light);

    max-width:760px;

    margin:auto;

}

.it-hero .hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:40px;

}

/* =========================================================
INTRO
========================================================= */

.it-intro{

    padding:100px 0;

}

.it-intro-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.it-intro-text p{

    margin-bottom:20px;

}

/* =========================================================
CHALLENGES
========================================================= */

.it-challenges{

    padding:100px 0;

    background:#f8fafc;

}

.challenge-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.challenge-card{

    background:#fff;

    padding:40px;

    border-radius:24px;

    box-shadow:
        0 15px 40px rgba(15,23,42,.05);

}

.challenge-card h3{

    margin-bottom:15px;

}

/* =========================================================
SERVICES
========================================================= */

.it-services{

    padding:100px 0;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f6fbef 100%
        );

}

.it-services-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

}

.it-service-card{

    background:#fff;

    padding:40px;

    border-radius:24px;

    border:1px solid rgba(0,0,0,.05);

    box-shadow:
        0 15px 40px rgba(15,23,42,.05);
    position:relative;
    overflow:hidden;

}

.it-service-card h3{

    margin-bottom:20px;

}

.it-service-card ul{

    list-style:none;

    padding:0;

}

.it-service-card li{

    padding:8px 0;

}

.it-service-card::before{

    content:'';

    position:absolute;

    inset:0;

    opacity:.50;

    background-size:cover;
    background-position:center;

}

.it-service-card:nth-child(1)::before{
    background-image:url('../assets/card-server.webp');
}

.it-service-card:nth-child(2)::before{
    background-image:url('../assets/card-m365.webp');
}

.it-service-card:nth-child(3)::before{
    background-image:url('../assets/card-network.webp');
}

.it-service-card:nth-child(4)::before{
    background-image:url('../assets/card-support.webp');
}

.it-service-card>*{

    position:relative;

    z-index:2;

}

/* =========================================================
MONITORING
========================================================= */

.it-monitoring{

    padding:100px 0;

    background:#08111f;

    color:#fff;

    text-align:center;

}

.monitoring-tags{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:15px;

    margin-top:40px;

}

.monitoring-tags span{

    padding:12px 20px;

    border-radius:999px;

    background:
        rgba(126,211,33,.15);

    border:
        1px solid rgba(126,211,33,.25);

}

/* =========================================================
TECH
========================================================= */

.it-tech{

    padding:100px 0;

}

.tech-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}

.tech-card{

    background:#fff;

    padding:30px;

    border-radius:20px;

    text-align:center;

    box-shadow:
        0 10px 30px rgba(15,23,42,.05);

}

/* =========================================================
FUTURE
========================================================= */

.it-future{

    background:#f8fafc;
    
    padding:120px 0;

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            rgba(255,255,255,.30),
            rgba(255,255,255,.30)
        ),
        url("../assets/it-future.webp");

    background-size:cover;
    background-position:center;

}

.it-future-content{

    max-width:900px;

    margin:auto;

    text-align:center;
    
    padding:60px;

    border-radius:32px;

    background:
        rgba(255,255,255,.75);

    backdrop-filter:blur(12px);

    border:
        1px solid rgba(255,255,255,.6);

    box-shadow:
        0 20px 60px rgba(15,23,42,.08);

}

/* =========================================================
RESPONSIVE
========================================================= */

@media(max-width:992px){

    .it-intro-grid,
    .it-services-grid{

        grid-template-columns:1fr;

    }

    .challenge-grid{

        grid-template-columns:1fr;

    }

    .tech-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:768px){

    .it-hero{

        padding:150px 0 80px;

    }

    .it-hero h1{

        font-size:38px;

    }

    .it-hero p{

        font-size:18px;

    }

    .tech-grid{

        grid-template-columns:1fr;

    }
    
    .it-hero .hero-buttons{

        flex-direction:column;

        align-items:center;

    }
    
    .it-future-content{

        padding:35px 25px;

    }

}