/* Services - GSAP Slideshow */
#services .gsap-card-container {
    position: relative;
    gap: 100px;
}
#services .gsap-card-container .wp-block-cover__inner-container {
    display: grid;
    grid-template-rows: 1fr auto;
    align-items: stretch;
    height: 100%;
    width: 100% !important;
    z-index: 1;
}
#services .gsap-card {
    position: relative;
    width: 100%;
    will-change: transform;
}
#services .gsap-card p.has-medium-font-size {
    text-wrap: balance;
}
#services .gsap-card .badges p {
    border-radius: 32px;
    padding: 12px 20px;
    box-shadow: 0 0 0 0.07em var(--nv-text-dark-bg);
    text-align: center;
}
#services .gsap-card .wp-block-cover__background {
    z-index: -1;
}
@media (max-width: 959px) {
    #services .gsap-card .badges {
        font-size: 16px !important;
    }
    #services .gsap-card p.has-medium-font-size {
        max-width: 500px;
    }
}
@media (max-width: 768px) {
    #services .gsap-card .badges {
        flex-direction: column;
        align-items: stretch;
    }
    #services .gsap-card .badges p {
        max-width: 220px;
    }
}
@media (min-width: 576px) {
    #services .gsap-card {
        height: 600px;
        padding: 50px;
    }
}
@media (max-width: 575px) {
    #services .gsap-card {
        height: 420px;
        padding: 35px; 
    }
    #services .gsap-card .badges {
        display: none;
    }
    #services .gsap-card-container {
        gap: 50px;
    }
}


/* Deployment Slide */
.gsap-card-marquee {
    position: absolute;
    right: 0;
}
.card-marquee-container > figure {
    background-color: rgb(255 255 255 / 10%);
    border-radius: 24px;
    text-align: center;
    aspect-ratio: 2 / 3;
    display: flex;
    justify-content: center;
    align-items: center; 
}
.card-marquee-container > figure > img {
    max-width: 50%;
}
@media (max-width: 1024px) {
    .gsap-card-marquee {
        mask-image: linear-gradient(to top, #ffffff 25%, transparent);
        -webkit-mask-image: linear-gradient(to top, #ffffff 25%, transparent);
    }
}
@media (min-width: 1025px) {
    #deployment {
        padding-right: 25px !important;
    }
    .card-marquee-container > figure {
        width: 200px;
    }
}
@media (max-width: 1024px) {
    .gsap-card-marquee {
        right: -125px;
    }
    .card-marquee-container > figure {
        width: 180px;
    }
}
@media (max-width: 959px) {
    .card-marquee-container > figure {
        width: 160px;
    }
}
@media (max-width: 700px) {
    .card-marquee-container > figure {
        width: 140px;
    }
}
@media (min-width: 576px) {
    .gsap-card-marquee {
        top: -50px; /* padding adjustment */
    }
    .gsap-card-marquee,
    .card-marquee-container {
        gap: 25px;
    }
}
@media (max-width: 575px) {
    .gsap-card-marquee {
        right: -75px;
        top: -35px; /* padding adjustment */
    }
    .card-marquee-container > figure {
        width: 120px;
    }
    .gsap-card-marquee,
    .card-marquee-container {
        gap: 15px;
    }
}
@media (max-width: 430px) {
    .card-marquee-container > figure {
        width: 100px;
    }
}


/* IT Consulting Slide */
@media (scripting: enabled) {
    #it-consulting:not(.animate) .wp-block-cover__image-background {
        opacity: 0;
    }
}

/* Keyframes */
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes slideUp {
    0% { transform: translateY(70px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes typing {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

@media (min-width: 1025px) {

    /* Initial States */
    #it-consulting #svg-part-chat,
    #it-consulting #svg-part-chat > g > * {
        opacity: 0;
        will-change: transform, opacity;
    }

    /* Chat Box */
    #it-consulting.animate #svg-part-chat {
        animation: slideUp 1s forwards ease-out;
        animation-delay: 0.5s;
    }

    /* Message Bubbles */
    #it-consulting.animate #svg-part-chat > g > * {
        animation: slideUp 1s forwards ease-out;
    }
    #it-consulting.animate #svg-part-chat > g > *:nth-child(1) { animation-delay: 0.6s; }
    #it-consulting.animate #svg-part-chat > g > *:nth-child(2) { animation-delay: 0.8s; }
    #it-consulting.animate #svg-part-chat > g > *:nth-child(3) { animation-delay: 1s; }

    /* Typing Bubbles */
    #it-consulting.animate #svg-part-chat > g > g > circle {
        animation: typing 1.2s infinite ease-in-out;
    }
    #it-consulting.animate #svg-part-chat > g > g > circle:nth-child(1) { animation-delay: 0s; }
    #it-consulting.animate #svg-part-chat > g > g > circle:nth-child(2) { animation-delay: 0.3s; }
    #it-consulting.animate #svg-part-chat > g > g > circle:nth-child(3) { animation-delay: 0.6s; }


    /* Initial States */
    #it-consulting #svg-part-sphere g,
    #it-consulting #svg-part-stars circle,
    #it-consulting #svg-part-ambient g {
        opacity: 0;
        will-change: opacity;
    }

    /* Stars Animation */
    #it-consulting.animate #svg-part-stars circle {
        animation: fadeIn 2s infinite alternate;
    }

    #it-consulting.animate #svg-part-stars circle:nth-child(1)  { animation-delay: 0s; }
    #it-consulting.animate #svg-part-stars circle:nth-child(2)  { animation-delay: 0.3s; }
    #it-consulting.animate #svg-part-stars circle:nth-child(3)  { animation-delay: 0.6s; }
    #it-consulting.animate #svg-part-stars circle:nth-child(4)  { animation-delay: 0.9s; }
    #it-consulting.animate #svg-part-stars circle:nth-child(5)  { animation-delay: 1.2s; }
    #it-consulting.animate #svg-part-stars circle:nth-child(6)  { animation-delay: 1.5s; }
    #it-consulting.animate #svg-part-stars circle:nth-child(7)  { animation-delay: 1.8s; }
    #it-consulting.animate #svg-part-stars circle:nth-child(8)  { animation-delay: 2.1s; }
    #it-consulting.animate #svg-part-stars circle:nth-child(9)  { animation-delay: 2.4s; }

    /* Ambient Ellipses Animation */
    #it-consulting.animate #svg-part-ambient g {
        animation: fadeIn 2s forwards;
    }
    #it-consulting.animate #svg-part-ambient g:nth-child(1) { animation-delay: 0.5s; }
    #it-consulting.animate #svg-part-ambient g:nth-child(2) { animation-delay: 1s; }
    
    /* Sphere Animation */
    #it-consulting.animate #svg-part-sphere g {
        animation: fadeIn 1.5s forwards;
    }
    #it-consulting.animate #svg-part-sphere g:nth-child(1) { animation-delay: 0s; }
    #it-consulting.animate #svg-part-sphere g:nth-child(2) { animation-delay: 0.5s; }
    #it-consulting.animate #svg-part-sphere g:nth-child(3) { animation-delay: 1s; }    
}

@media (max-width: 1024px) {
    #it-consulting .wp-block-cover__image-background {
        overflow: unset;
        top: auto;
        height: auto;
        -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1));
        mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1));
    }
}

/* critical */
@media (max-width: 768px) {
    #it-consulting .wp-block-cover__image-background {
        transform: scale(1.4);
        transform-origin: 60% 50%;
    }
}
@media (max-width: 575px) {
    #it-consulting .wp-block-cover__image-background {
        transform-origin: 100% 50%;
    }
}
@media (max-width: 430px) {
    #it-consulting .wp-block-cover__image-background {
        transform: scale(1.6);
        transform-origin: 75% 50%;
    }
}


/* Managed IT Slide */
#managed-it > .wp-block-cover__image-background {
    overflow: unset;
    top: auto;
    left: auto;
    height: auto;
    right: 35px;
}
#managed-it svg .svg-part-cursor {
    cursor: default !important;
}
@media (min-width: 576px) {
    #managed-it > .wp-block-cover__image-background {
        width: 75%;
        bottom: 110px;
    }
}
@media (min-width: 1025px) {
    #managed-it svg .svg-part-cursor {
        will-change: transform;
    }
    #managed-it > .wp-block-cover__image-background {
        width: 65%;
    }
}
@media (min-width: 1280px) {
    #managed-it > .wp-block-cover__image-background {
        width: 58%;
        bottom: 90px;
    }    
}
@media (max-width: 1279px) {
    #managed-it > .wp-block-cover__image-background #gsap-cursor-4 {
        display: none;
    }
}
@media (max-width: 1024px) {
    #managed-it > .wp-block-cover__image-background {
        mask-image: linear-gradient(310deg, #000000 35%, #ffffff00 75%);
    }
}
@media (max-width: 768px) {
    #managed-it > .wp-block-cover__image-background {
        width: 85%;
        right: 20px;
        bottom: 50px;
    }    
}
@media (max-width: 575px) {
    #managed-it > .wp-block-cover__image-background {
        width: 100%;
        bottom: 30px;
    }    
}




/* IT Support Slide */
#it-support > .wp-block-cover__image-background {
    top: auto;
    height: auto;
    overflow: unset;
}
#svg-part-timeline-pin {
    will-change: transform;
}
@media (min-width: 1025px) {
    #it-support > .wp-block-cover__image-background {
        bottom: 30px;
    }    
}
@media (max-width: 1024px) {
    #it-support > .wp-block-cover__image-background {
        bottom: 100px;
    }    
}
@media (min-width: 769px) { 
    #it-support > .wp-block-cover__image-background {
        left: auto;
        width: 75%;
    }
}
@media (max-width: 768px) { 
    #it-support > .wp-block-cover__image-background #svg-part-status {
        display: none;
    }
    #it-support > .wp-block-cover__image-background {
        bottom: 120px;
        mask-image: linear-gradient(to left, #ffffff, #ffffff00 70%);
    }    
}
@media (max-width: 575px) {
    #it-support > .wp-block-cover__image-background {
        bottom: 0;
        mask-image: none;
    }
}
#it-support.gsap-card .badges p {
    box-shadow: 0 0 0 0.07em var(--nv-text-color);
}


/* IT Development Slide */
#it-development .wp-block-cover__video-background {
    width: 49%;
    height: auto;
    left: auto;
    top: auto;
    z-index: 1;
    padding-top: 30px;
    padding-left: 30px;
    background-color: #101010;
    border-top-left-radius: 24px;
    border: 1px solid rgb(255 255 255 / 40%);
}
#it-development.animate .wp-block-cover__video-background {
    animation: slideUp 0.7s forwards ease-out;
}
@media (scripting: enabled) {
    #it-development .wp-block-cover__video-background {
        opacity: 0;
    }
}
@media (max-width: 575px) {
    #it-development .wp-block-cover__video-background {
        width: 57%;
        padding-top: 20px;
        padding-left: 20px;
    }
}



/* Home Hero Section */
#hero .hero-media {
    gap: 1.5em;
}
#hero .hero-media > * {
    opacity: 1;
    transform: translateY(0);
    transition: none; 
    border-radius: 16px;
    overflow: hidden;
    flex-grow: 1;
    will-change: transform, opacity;
}
#hero .hero-media video {
    height: 100%;
    object-fit: cover;    
}
#hero .hero-media > .hero-media-part-1 {
    aspect-ratio: 5 / 9;
}
#hero .hero-media > .hero-media-part-2 {
    aspect-ratio: 1 / 1;
    margin-top: 5%;
    padding: 20px;
}
#hero .hero-media > .hero-media-part-3 {
    margin-top: 12%;
}
#hero .hero-media > .hero-media-part-4 {
    margin-top: 7%;
}
#hero .hero-media > .hero-media-part-5 {
    aspect-ratio: 5 / 6;
    margin-top: 3%;
}
@media (max-width: 959px) {
    #hero .hero-media > .hero-media-part-2 {
        display: none;
    }
    #hero .hero-media {
        margin-top: 4rem;
    }
}
@media (max-width: 575px) {
    #hero .hero-media > .hero-media-part-5 {
        display: none;
    }
    #hero .hero-media > .hero-media-part-4 {
        order: 2;
    }
    #hero .hero-media > .hero-media-part-1 {
        order: 1;
    }
    #hero .hero-media > .hero-media-part-3 {
        flex-basis: 16.5%;
        margin-top: 16%;
    }
}
@media (max-width: 430px) {
    #hero .hero-media > .hero-media-part-1 {
        display: none;
    }
}


/* Tippy Testimonial */
.testimonial .author-content {
    display: flex;
    gap: 1em;
    align-items: center;
    margin-bottom: 1em;
}
.testimonial .author-photo {
    flex-shrink: 0;
    position: relative;
    border-radius: 50%;
    width: 90px;
    height: 90px;
    background: linear-gradient(to bottom right, #01B7E1, #3873FF);
}
.testimonial .author-photo > img {
    position: absolute;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
    height: calc(100% - 6px);
    width: calc(100% - 6px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.testimonial .testimonial-title,
.testimonial .author-name {
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 500;
}
.testimonial .testimonial-title,
.testimonial .author-name {
    margin-bottom: 7px;
}
.testimonial .author-position {
    letter-spacing: 0.5px;
    line-height: 1.3em;
    font-size: var(--wp--preset--font-size--small);
    margin-bottom: 0;
}
.testimonial .author-position > span {
    display: inline-block;
}
.testimonial-message {
    margin-bottom: 0;
    text-wrap: balance;
}


/* About Us */
#about-us {
    align-items: stretch !important;
}
#svg-part-indicator {
    will-change: transform;
}
@media screen and (orientation: landscape) {
    #about-us {
        min-height: 100svh;
    }
}
@media screen and (orientation: portrait) {
    #about-us {
        min-height: min(87svh, 1100px);
    }
}
@media (min-width: 1280px) { 
    #about-us > .wp-block-cover__image-background {
        left: auto;
        width: unset;
    }    
}
@media (max-width: 1024px) { 
    #about-us {
        padding-bottom: 0 !important;
    }
}
@media (max-width: 768px) { 
    #certificates img {
        width: 100px !important;
    }
}
@media (max-width: 575px) {
    #about-us > .wp-block-cover__image-background {
        height: 60%;
        width: auto;
        top: auto;
        bottom: auto;
    }
}
#about-us > .wp-block-cover__inner-container {
    display: grid;
    align-content: space-between;
    gap: 150px;
}
#about-us #certificates figure {
    cursor: help;
}


/* Clients & Partners GSAP Marquee */
.marquee-container {
    gap: 30px;
    position: relative;
    overflow: hidden;
    justify-content: unset;
}
@media (min-width: 1025px) {
    .marquee-container {
        mask-image: linear-gradient(to right, transparent, #ffffff 20%, #ffffff 80%, transparent);
        -webkit-mask-image: linear-gradient(to right, transparent, #ffffff 20%, #ffffff 80%, transparent);
    }
}
.marquee-container .marquee {
    position: relative;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}
.marquee-container .marquee svg {
    display: block;
    width: 300px;
}
@media (max-width: 768px) {
    #clients {
        margin-bottom: 2rem;
    }
    #partners .marquee-container.mb-24 {
        margin-bottom: 3.5rem;
    }
    .marquee-container {
        gap: 0;
    }
    .marquee-container .marquee svg {
        /* zoom: 0.8; */
        transform: scale(0.75);
        max-width: 240px;
    }
}
@media (min-width: 576px) {
    .marquee-container .marquee svg {
        filter: grayscale(1) contrast(0);
    }
    .marquee-container .marquee svg:hover {
        filter: none;
    }
}
@media (max-width: 575px) {
    .sprite > symbol [fill] {
        fill: var(--custom-4);
    }
}


/* Solutions */
#solutions .wp-block-cover {
    min-height: initial;
}
#solutions .wp-block-cover .wp-block-cover__background {
    z-index: -1;
}
#solutions .wp-block-cover .wp-block-cover__image-background {
    left: auto;
}
#solutions #security-solution.wp-block-cover .wp-block-cover__image-background,
#solutions #smart-office-solution.wp-block-cover .wp-block-cover__image-background {
    width: auto;
}
@media (min-width: 1280px) {
    #solutions #smart-home-solution.wp-block-cover .wp-block-cover__image-background,
    #solutions #procurement-solution.wp-block-cover .wp-block-cover__image-background {
        height: auto;
        top: auto;
    }
    #solutions #smart-home-solution.wp-block-cover .wp-block-cover__image-background {
        width: 80%;
    }
    #solutions #procurement-solution.wp-block-cover .wp-block-cover__image-background {
        width: 75%;
    }
}
@media (max-width: 1279px) {
    #solutions #smart-home-solution.wp-block-cover .wp-block-cover__image-background,
    #solutions #procurement-solution.wp-block-cover .wp-block-cover__image-background {
        width: auto;
    }
    #solutions .wp-block-cover {
        aspect-ratio: 3 / 2;
        flex-basis: 50%;
    }
    #solutions .wp-block-cover .wp-block-cover__image-background {
        opacity: 0.25;
    }
}
@media (max-width: 959px) {
    #solutions .wp-block-group.is-layout-flex {
        flex-wrap: wrap;
    }
    #solutions .wp-block-cover {
        flex-grow: 1;
        aspect-ratio: 2 / 1;
    }
}
@media (max-width: 575px) {
    #solutions .wp-block-cover {
        aspect-ratio: 1 / 1;
    }
}