/**
 * This file contains styles for the startpage
 */

/**
 * Hero dark with particles effect
 */
.brick-container__pcsg-hero--dark {
    /*background-image: radial-gradient(circle at 100% 30%, var(--qui-colors-primary-950), transparent 40%), radial-gradient(circle at -20% 80%, var(--qui-colors-primary-950), transparent 30%), linear-gradient(45deg, var(--qui-colors-dark-950), var(--qui-colors-dark-800));*/
    /*background-size: auto, auto, auto, auto;*/
    /*background-attachment: fixed;*/

    color: #fff;
    position: relative;
    z-index: 1;
}

/**
 * Hero dark with particles effect v2
 */
.brick-container__pcsg-hero-v2 {
    /*background-image: radial-gradient(circle at 100% 30%, var(--qui-colors-primary-950), transparent 40%), radial-gradient(circle at -20% 80%, var(--qui-colors-primary-950), transparent 30%), linear-gradient(45deg, var(--qui-colors-dark-950), var(--qui-colors-dark-800));*/
    /*background-size: auto, auto, auto, auto;*/
    /*background-attachment: fixed;*/

    /*color: #fff;*/
    position: relative;
    z-index: 1;


    min-height: 100vh;
    display: flex;
    align-items: center;
}

.pcsg-hero-v2 .wallpaperTextArrow {
    position: initial;
    height: initial;
}

.pcsg-hero-v2 .wallpaperTextArrow .grid-container {
    position: initial;
}

/* rocket */
.pcsg-hero--r   ocket .quiqqer-textImage-image {
    position: initial;
}

.pcsg-hero--rocket img {
    position: absolute;
    right: 0;
    bottom: 5rem;
    max-width: clamp(1000px, 60vw, 1400px) !important;
    z-index: -1;
}

@media screen and (max-width: 767px) {
    .pcsg-hero--rocket img {
        filter: brightness(0.25);
    }
}

/**
 * Particles
 */
.pcsg-hero__particlesJS {
    transition: 1.5s ease-out transform, 3s ease-out opacity;
    opacity: 0;
    transform: scale(0.5);
}

.pcsg-hero__particlesJS[data-start="1"] {
    opacity: 1;
    transform: scale(1);
}

@media screen and (max-width: 767px) {
    selector {
        
    }
}

/**
 * Services
 */
.pcsg-services-boxContainer {
    margin-top: clamp(1rem, 5vw, 5rem);
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    background-image: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--qui-colors-primary) 30%, transparent), transparent 50%);
    background-size: 100% 50%;
    background-position: center;
    background-repeat: no-repeat;
}

.pcsg-services-box {
    padding: 2rem;
    flex-grow: 1;
    flex-basis: max(300px, 40%);
    border: 2px solid color-mix(in srgb, var(--qui-colors-primary) 15%, transparent);
    border-radius: 2rem;
    background-color: #00000033;
}

.pcsg-services-box__icon {
    font-size: 1.5rem;
    padding: 1rem;
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    border: 2px solid #ffffff11;
    width: 4rem;
    aspect-ratio: 1;
    display: inline-grid;
    place-items: center;
    margin-bottom: 1rem;
}

/* hero box */
.pcsg-services-box--hero {
    --bgImage--dots--color: #ffffff09;

    grid-column: 1/-1;
    flex-basis: 100%;
    width: 100%;
    color: #fff;
    background-image:
            radial-gradient(circle at 100% 30%, rgb(101 232 255 / 15%), transparent 40%),
            radial-gradient(circle at 0 80%, rgba(178, 250, 101, 0.05) 20%, transparent 40%);
    position: relative;
    overflow: hidden;
    z-index: 0;
}

/* small boxes */
.pcsg-services-box:nth-child(2) {
    background-image: radial-gradient(circle at 20% 10%, rgba(199, 103, 248, 0.15), transparent 80%);
    background-image: radial-gradient(circle at 20% 10%, rgb(219 208 224 / 15%), transparent 80%);
}

.pcsg-services-box:nth-child(3) {
    background-image: radial-gradient(circle at 80% 0%, rgba(245, 172, 100, 0.15), transparent 60%);
}

.pcsg-services-box:nth-child(4) {
    background-image: radial-gradient(circle at 30% 110%, rgb(101 232 255 / 15%), transparent 80%);
}

.pcsg-services-box:nth-child(5) {
    background-image: radial-gradient(circle at 90% 50%, rgba(178, 250, 101, 0.1), transparent 70%);
}

/* hero brick - for the hero box */
.pcsg-services__heroBrick .quiqqer-textImage-content {
    padding-block: 7rem;
}

.pcsg-services__heroBrick .quiqqer-textImage-image {
    bottom: -4rem;
}

.pcsg-services__heroBrick .quiqqer-textImage-image:before {
    opacity: 0.25;
    content: '';
    border-radius: 1rem;
    inset: -1rem;
    position: absolute;
    transform: rotate(5deg);
    width: auto;
    height: auto;
    visibility: visible;
    z-index: -1;
    left: 0;
    background-image: linear-gradient(45deg, #7c7c7c, transparent);
}

/**
 * About PCSG
 */
.pcsg-about-pcsg .quiqqer-textImage-image__fullImageHeight img {
    border-radius: var(--pcsg-border-radius-img);
}

/**
 * About PCSG v2
 */
.pcsg-about-pcsg-v2 .quiqqer-presentationBricks-backgroundVideo {
    /*border-radius: 2rem;*/
    /*overflow: hidden;*/
}

.pcsg-about-pcsg-v2 .pcsg-counter {
    background: #ffffff11;
    padding: 2rem 2rem;
    border-radius: 1rem;
    backdrop-filter: blur(5px);
}

.pcsg-about-pcsg-v2 .pcsg-counter .countUpBasic-entry-header-number {
    color: var(--qui-colors-primary-100);
}


/**
 * Counter
 */
.pcsg-counter .countUpBasic-entry-header-number {
    font-size: 3rem;
    color: var(--qui-colors-primary);
    font-weight: bold;
}