.servicePageIntroBox {
    margin-inline: 0px;
    margin-left: 0%;
    margin-right: 0%;
}

.servicePageIntroBox img {
    width: 470px;
}

.storageImage {
    width: auto;
    height: auto;
    object-fit: cover;
    transition: box-shadow 0.3s ease;
    border-radius: 5px;
    transition: transform 0.3s ease;
}

.hostingImage {
    width: 636px;
    height: 397px;
    object-fit: cover;
    transition: box-shadow 0.3s ease;
    border-radius: 5px;
    transition: transform 0.3s ease;
}

/* .hostingImage:hover, .storageImage:hover, .remoteDImage:hover, .virtualMachineImage:hover { 
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
} */

#storage {
    padding: 0;
    height: max-content;
}

#emailWhat, #emailWhy, #machinesWhat, #machinesWhy {
    height: max-content !important;
}

/* #cloudWhat, #cloudWhy, #desktopWhat, #desktopWhy {
    height: 579px !important;
} */

#cloudWhat, #emailWhat, #machinesWhat, #desktopWhat {
    margin-block: 15px;
    height: 605px !important;
    cursor: default;
}

#cloudWhy, #emailWhy, #machinesWhy, #desktopWhy {
    margin-block: 15px;
    height: 605px !important;
    cursor: default;
}

.virtualMachineImage {
    width: auto;
    height: 397px;
    object-fit: cover;
    transition: box-shadow 0.3s ease;
    border-radius: 5px;
    transition: transform 0.3s ease;
}

.remoteDImage {
    width: auto;
    height: 397px;
    object-fit: cover;
    transition: box-shadow 0.3s ease;
    border-radius: 5px;
    transition: transform 0.3s ease;
}

.secondRow {
    padding-top: 40px;
}

.firstRow {
    padding-top: 50px;
}

.section-header h2 {
    font-size: 19px !important;
}

@media screen and (min-width: 358px) and (max-width: 432px) and (orientation: portrait) {
    .parentCard {
        display: flex !important;
        flex-direction: column !important;
    }

    #cloudWhat, #emailWhat, #machinesWhat, #desktopWhat {
        height: unset !important;
    }

    #cloudWhy, #emailWhy, #machinesWhy, #desktopWhy {
        height: unset !important;
    }
}

/*? IPad Pro - Landscape Mode ?*/
@media (width: 1366px) {
    .servicePageIntroBox {
        transform: scale(0.94);
        margin-left: -40px !important;
    }

    .virtualMachineImage {
        height: 342px;
    }

    .remoteDImage {
        height: 342px;
    }

    .hostingImage {
        height: 342px;
    }

    #cloudWhat, #emailWhat, #machinesWhat, #desktopWhat {
        height: 650px !important;
    }

    #cloudWhy, #emailWhy, #machinesWhy, #desktopWhy {
        height: 650px !important;
    }
}

/*? IPad Pro - Portrait Mode ?*/
@media screen and (width: 1024px) and (height: 1366px) and (orientation: portrait) {
    .servicePageIntroBox {
        transform: scale(0.75);
        margin-left: -135px !important;
    }

    .virtualMachineImage {
        height: 285px;
    }

    .remoteDImage {
        height: 285px;
    }

    .hostingImage {
        height: 285px;
    }

    #cloudWhat, #emailWhat, #machinesWhat, #desktopWhat {
        height: 782px !important;
    }

    #cloudWhy, #emailWhy, #machinesWhy, #desktopWhy {
        height: 782px !important;
    }
}

/*? IPad Mini - L */
@media screen and (width: 1024px) and (height: 768px) and (orientation: landscape) {
    .servicePageIntroBox {
        transform: scale(0.75);
        margin-left: -136px !important;
    }

    .virtualMachineImage {
        height: 285px;
    }

    .remoteDImage {
        height: 285px;
    }

    .hostingImage {
        height: 285px;
    }

    #cloudWhat, #emailWhat, #machinesWhat, #desktopWhat {
        height: 782px !important;
    }

    #cloudWhy, #emailWhy, #machinesWhy, #desktopWhy {
        height: 782px !important;
    }
}

/*? IPad Mini - P */
@media screen and (width: 768px) and (height: 1024px) and (orientation: portrait) {
    .servicePageIntroBox {
        margin-left: 2% !important;
        margin-right: 2% !important;
    }
    
    .servicePageIntroBox img {
        margin-left: 14% !important;
    }

    .introBoxText button {
        margin-left: 34% !important;
    }

    #cloudWhat, #emailWhat, #machinesWhat, #desktopWhat {
        height: unset !important;
    }

    #cloudWhy, #emailWhy, #machinesWhy, #desktopWhy {
        height: unset !important;
    }

    .virtualMachineImage {
        width: auto !important;
        height: auto !important;
    }

    .hostingImage {
        width: auto !important;
        height: auto !important;
    }
}

/*? IPad Air - P Mode ?*/
@media screen and (width: 820px) and (height: 1180px) { 
    .servicePageIntroBox {
        margin-left: 5% !important;
        margin-right: 5% !important;
    }

    .servicePageIntroBox {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        width: auto !important;
    }
    
    .introBoxText button {
        text-align: center;
        padding-block: 15px;
        margin-top: 5px;
        margin-left: 34%;
    }

    .virtualMachineImage {
        width: auto !important;
        height: auto !important;
    }

    .hostingImage {
        width: auto !important;
        height: auto !important;
    }
/* 
    .servicePageIntroBox img {
        width: 75%;
        margin-left: 90px;
        height: auto;
        margin-bottom: 15px;
    } */
}

/*? IPad Air - L Mode ?*/
@media screen and (width: 1180px) and (height: 820px) and (orientation: landscape) {
    .servicePageIntroBox {
        transform: scale(0.75);
        margin-left: -150px !important;
    }

    #cloudWhat, #emailWhat, #machinesWhat, #desktopWhat {
        height: 782px !important;
    }

    #cloudWhy, #emailWhy, #machinesWhy, #desktopWhy {
        height: 782px !important;
    }

    .virtualMachineImage {
        height: 285px;
    }

    .remoteDImage {
        height: 285px;
    }

    .hostingImage {
        height: 285px;
    }
}


/** IPad IPadOS (vanuit Firefox) - P **/
@media screen and (width: 810px) and (height: 1080px) and (orientation: portrait) {
    .introBoxText button {
        text-align: center;
        padding-block: 15px;
        margin-top: 5px;
        margin-left: 34%;
    }
        
    .virtualMachineImage {
        width: auto !important;
        height: auto !important;
    }

    .hostingImage {
        width: auto !important;
        height: auto !important;
    }
}

/** IPad IPadOS (vanuit Firefox) - L **/
@media screen and (width: 1080px) and (height: 810px) and (orientation: landscape) {
   .servicePageIntroBox {
        transform: scale(0.75);
        margin-left: -150px !important;
    }
}

/*?? OVERLAY ANIMATIE ??*/
.image-hover-wrapper {
    position: relative;
    display: inline-block;
    overflow: hidden;
    /* Onderstaande 3 properties zijn nodig om de foto's van de cloudpagina, in te laten faden, gelijk met de item-service cards die erbij staan. */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* In de JavaScript zal de class 'imageVisible' worden toegevoegd aan de div waar de img in staat, en zal dus zo in faden. */
.image-hover-wrapper.imageVisible {
    opacity: 1;
    transform: translateY(0);
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6); /* dark semi-transparent */
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease;
}

/* Text inside the overlay */
.overlay-text {
    color: #fff;
    font-size: 1.5rem;
    text-align: center;
    padding: 10px 20px;
    text-transform: uppercase; /* Kan hier eventueel ook lowercase worden */
}

/* Show overlay on hover */
.image-hover-wrapper:hover .overlay {
    opacity: 1;
}

/*! Animaties voor de introbox !*/
.servicePageIntroBox img {
    opacity: 0;
    transform: translateX(-20px);
    animation: fadeInFromLeft 1s forwards;
}

@keyframes fadeInFromLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.servicePageIntroBox .introBoxText {
    opacity: 0;
    transform: translateX(20px);
    animation: fadeInFromRight 1s forwards;
}

@keyframes fadeInFromRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}