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

.services {

    padding: 200px 120px;

    position: relative;

}


/* ========================================
   SECTION TITLE
======================================== */

.section-title {

    text-align: center;

    margin-bottom: 100px;

}

.section-title span {

    color: var(--primary);

    letter-spacing: 5px;

    text-transform: uppercase;

}

.section-title h2 {

    margin-top: 20px;

    font-size: 80px;

    line-height: 85px;

}


/* ========================================
   ROWS
======================================== */

.services-row{

    display:grid;

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

    gap:40px;

}

.services-row-bottom{

    width:70%;

    margin:auto;

    margin-top:40px;

    display:grid;

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

    gap:40px;

}


/* ========================================
   SERVICE CARD
======================================== */

.service-card {

    position: relative;

    width: 450px;

    min-height: 380px;

    padding: 50px;

    overflow: hidden;

    border-radius: 35px;

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

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

    backdrop-filter: blur(25px);

    transition: .5s;

}


/* Untere Karten etwas breiter */

.services-row-bottom .service-card {

    width: 600px;

}


/* Hover */

.service-card:hover {

    transform: translateY(-15px);

    border-color: rgba(0,217,255,.3);

    box-shadow:

        0 0 25px rgba(0,217,255,.15),

        0 0 60px rgba(0,217,255,.08);

}


/* ========================================
   ICON
======================================== */

.service-icon {

    width: 90px;

    height: 90px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

    background: rgba(0,217,255,.08);

    color: var(--primary);

    font-size: 35px;

    transition: .5s;

}


.service-card:hover .service-icon {

    background: rgba(0,217,255,.15);

    box-shadow:

        0 0 20px rgba(0,217,255,.3),

        0 0 50px rgba(0,217,255,.15);

}


/* ========================================
   HEADLINE
======================================== */

.service-card h3 {

    margin-top: 40px;

    font-size: 38px;

    font-weight: 700;

}


/* ========================================
   TEXT
======================================== */

.service-card p {

    margin-top: 25px;

    color: #9c9c9c;

    line-height: 1.9;

    font-size: 19px;

}


/* ========================================
   GLOW EFFECT
======================================== */

.service-card::before {

    content: '';

    position: absolute;

    top: -150px;

    right: -150px;

    width: 300px;

    height: 300px;

    border-radius: 50%;

    background: rgba(0,217,255,.05);

    filter: blur(100px);

    transition: .5s;

}


.service-card:hover::before {

    background: rgba(0,217,255,.12);

}


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

@media (max-width:1600px) {

    .services-row {

        flex-wrap: wrap;

    }

}


@media (max-width:1200px) {

    .services {

        padding: 150px 40px;

    }

    .service-card {

        width: 100%;

    }

    .services-row-bottom .service-card {

        width: 100%;

    }

    .section-title h2 {

        font-size: 60px;

        line-height: 65px;

    }

}