html{

    scroll-behavior: smooth;
}


.services{

    min-height: 100vh;

    box-sizing: border-box;

    padding: 1px 8%;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background: #F2F0EF;
}

.services h2{
    text-align:center;
    font-size:80px;
    color: grey;
    font-family: "Changa", sans-serif;
    letter-spacing:2px;
    position:relative;
    text-shadow:
            0 0 10px rgba(255,255,255,.15),
            0 0 20px rgba(255,255,255,.08);
}

.service-grid{
    max-width:1700px;
    margin:80px auto 0;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:30px;
}

.service-card{
    position:relative;
    overflow:hidden;
    min-height:470px;
    border-radius:32px;
    text-decoration:none;
    background: lightgrey;
    border:1px solid grey;
    transition:
            transform .45s ease,
            box-shadow .45s ease,
            border-color .45s ease;
}

.service-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:
            radial-gradient(circle at top left,
            rgba(255,255,255,.10),
            transparent 45%);
    pointer-events:none;
}

.service-content{
    position:relative;
    z-index:2;
    height:100%;
    padding:42px;
    display:flex;
    flex-direction:column;
}

.service-number{
    font-family:"Changa", sans-serif;
    font-size:.8rem;
    color:grey;
    letter-spacing:4px;
    margin-bottom:35px;
}

.service-card h3{
    color: grey;
    font-size:2.3rem;
    line-height:1.1;
    margin-bottom:18px;
}

.card-divider{
    width:85px;
    height:3px;
    border-radius:50px;
    margin-bottom:28px;
    background:linear-gradient(
            90deg,
            grey,
            transparent
    );
    box-shadow:
            0 0 12px lightgrey;
}
.service-divider {
    width: 500px;
    height: 3px;
    border-radius: 50px;
    margin: 0 auto 5px;
    background: linear-gradient(
            90deg,
            grey,
            transparent
    );
    box-shadow: 0 0 12px lightgrey;
}

.service-card p{
    font-family:"Changa", serif;
    color: grey;
    line-height:1.85;
    font-size:1rem;
    max-width:90%;
}

.service-bg{
    position:absolute;
    right:-10px;
    bottom:-10px;
    width:300px;
    opacity:.20;
    pointer-events:none;
    user-select:none;
    transition:
            transform .6s ease,
            opacity .4s ease;
}

.service-link{
    margin-top:auto;
    display:flex;
    justify-content: center;
    align-items:center;
    color:white;
    font-family:"Changa", serif;
    font-size:1rem;
    letter-spacing:.4px;
}

.arrow{
    width:50px;
    height:50px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    background:rgba(255,255,255,.20);
    transition:.35s;
}
.service-card:hover{
    transform:
            scale(1.02);
}

.service-card:hover .service-bg{
    transform:
            scale(1.08)
            rotate(-6deg)
            translate(-12px,-10px);
    opacity:.17;
}

.service-card:hover .arrow{
    transform:translateX(5px);
    background: grey;
}

/* ==========================================
   DETAIL SECTIONS
========================================== */

.service-section{
    min-height: calc(100vh - 80px);
    scroll-margin-top: 80px;

    display: flex;
    align-items: flex-start;

    padding: 80px 8%;
    box-sizing: border-box;

    position: relative;
    overflow: hidden;
}


/* ==========================================
   BACKGROUNDS
========================================== */

.bg-blue{
    background: linear-gradient(
            to bottom right,
            #F2F0EF 0%,
            var(--white-soft) 100%
    );
}

.bg-darkblue{
    background: linear-gradient(
            to bottom right,
            #F2F0EF 0%,
            var(--white-soft) 100%
    );
}


/* ==========================================
   CONTENT
========================================== */

.service-container{
    width: 100%;
    max-width: 1600px;
    margin: auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;   /* oder wieder wie vorher */
    gap: 80px;
}


/* ==========================================
   LEFT SIDE
========================================== */

.service-text{
    max-width: 650px;
    transform: translateY(-250px);
}

.section-bg-image{

    position: absolute;

    right: -50px;
    bottom: -50px;

    width: 950px;

    opacity: 0.15;


    pointer-events: none;
    user-select: none;

    z-index: 1;
}

.section-label{

    display:inline-block;

    margin-bottom:20px;

    color:grey;

    font-family:"Changa", serif;

    letter-spacing:4px;

    font-size:.9rem;
}

.service-text h2{

    font-size:4.5rem;

    color:grey;

    line-height:1;

    margin-bottom:25px;
}

.service-text p{

    color: grey;

    font-family:"Changa", serif;

    font-size:1.15rem;

    line-height:2;

    margin-top:35px;
}


/* ==========================================
   RIGHT SIDE
========================================== */

.service-visual{

    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;

    background: transparent;
    border: none;
    backdrop-filter: none;

    overflow: visible;
    z-index: 2;

}

.service-product{

    width: 50%;
    height: auto;

    object-fit: contain;

    transform:
            rotate(-8deg);

    filter:
          drop-shadow(0 25px 45px rgba(0,0,0,.30));
    transition:
            transform .5s ease,
            filter .5s ease;
    z-index:3;
}
.service-product-sourcing{
    width: 50%;
    transform:
            rotate(-8deg);
}
.service-product-supplychain{
    width: 70%;
    transform:
            rotate(8deg);
}
.service-product-foodservice{
    width: 80%;
    transform:
            rotate(-8deg);
}
.service-product-eigenmarke{
    width: 40%;
    transform:
            rotate(8deg);
}
/* ==========================================
   DIVIDER
========================================== */

.service-text .head-divider{

    width:120px;

    height:4px;

    border-radius:50px;

    background:linear-gradient(
            90deg,
            grey,
            transparent
    );

    box-shadow:
            0 0 12px lightgrey;
}


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

@media(max-width:1100px){

    .service-container{

        position: relative;
        z-index: 2;
        grid-template-columns:1fr;

        gap:60px;
    }

    .service-text{

        max-width:100%;
    }

    .service-text h2{

        font-size:3.5rem;
    }

    .service-visual{

        height:400px;
    }

}

@media(max-width:768px){

    .service-section{

        padding:120px 8% 80px;
    }

    .service-text h2{

        font-size:2.8rem;
    }

    .service-text p{

        font-size:1rem;
    }

    .service-visual{

        height:300px;
    }

}


@media(max-width:900px){
    .service-grid{
        grid-template-columns:1fr;
    }
    .service-card{
        min-height:430px;
    }
    .service-card h3{
        font-size:2rem;
    }
    .service-bg{
        width:190px;
    }

}


@media (max-width:1400px){
    .service-grid{
        grid-template-columns:repeat(2, 1fr);
    }
}