body {
    background-color: black;
    color: #ffffffa0;
}

/* Track */
::-webkit-scrollbar-track {
    background: #00000044;

}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #2b2b2b00;
    border: 6px solid #1f1f1f;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.button {
    background: #222222a0;
    color: #ffffffa0;
}

.button::after {
    background-color: rgb(19, 19, 19);
}

.accent {
    background: #0277bd;
}

.button.accent::after {
    background-color: #045c8b;

}

.button:hover {
    background-color: #0c3974;

}

.button.accent:hover {
    background-color: #092952;

}

.view-all {
    color: white;
}


.collapsible.icon::after {
    color: #0277bd;
}


#footer-card {
    color: #fff;
    background: url('../img/Backgrounds/noise.webp'),
        linear-gradient(315deg,
            rgba(26, 14, 34, 0.8) 0%,
            rgba(0, 37, 99, 0.80) 100%),
        linear-gradient(0deg,
            rgba(0, 0, 0, 0.00) 0%,
            rgba(0, 0, 0, 0.00) 100%),
        rgba(0, 0, 0, 0.50);
}


.text-normal {
    color: #ffffffb2;
}


.nav-link {
    color: #ffffffad;

}

.nav-link.active {
    color: #0277bd !important;
}

.acrylic-button {
    color: #fff;
    background: url("../../assets/img/Backgrounds/noise.webp"), linear-gradient(93.07deg, #397ff0af 0%, #004bad98 100%), #397EF0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.0);

}

.acrylic-button:hover {
    color: #fff;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.343);
    border: 2px solid #0277bd;
}

.contact-card {
    background-color: rgb(15, 15, 15);
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.10);
}

.seperator {
    background-color: #1f1f1f;
}

.contact-link {
    color: #ffffffb7;
}

.social-link {
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.10);
}

.social-link:hover {
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.30);
}

.sub-site-logo {
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.10);
}

.copyright {
    color: rgba(255, 255, 255, 0.432);
}

.plain-link {
    color: #0277bd;
}

.plain-link:hover {
    color: #5596ff;
}

/* Create a custom checkbox */
.checkmark {
    background-color: #0e0e0e;
    border: 2px solid #092952;
}

/* On mouse-over, add a grey background color */
.chb-container:hover input~.checkmark {
    background-color: #045c8b;
    border: 5px solid #0e0e0e;
}

/* When the checkbox is checked, add a blue background */
.chb-container input:checked~.checkmark {
    background-color: #0277bd;
    border: 2px solid #0e0e0e;
}

/* Style the checkmark/indicator */
.chb-container .checkmark:after {
    border: solid white;
}

@media screen and (max-width:768px) {
    .nav-button {
        background: transparent;
        color: #000;
    }

    .nav-button:hover {
        color: #0277bd;
    }

}

body.l {
    background-color: white;
    color: black;
}

/* Track */
.l ::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
.l ::-webkit-scrollbar-thumb {
    background: #888;
    border: 6px solid #f1f1f1;
}

/* Handle on hover */
.l ::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.button.l {
    background: #f0f0f0;
    color: #333;
}

.button.l::after {
    background-color: #ccc;
}

.accent.l {
    background: #0277bd;
}

.button.l.accent::after {
    background-color: #045c8b;
}

.button.l:hover {
    background-color: #ddd;
}

.button.l.accent:hover {
    background-color: #092952;
}

.view-all.l {
    color: black;
}

.collapsible.icon.l::after {
    color: #0277bd;
}

#footer-card.l {
    color: #333;
    background: url('../img/Backgrounds/noise.webp'),
        linear-gradient(315deg,
            rgba(26, 14, 34, 0.8) 0%,
            rgba(0, 37, 99, 0.80) 100%),
        linear-gradient(0deg,
            rgba(0, 0, 0, 0.00) 0%,
            rgba(0, 0, 0, 0.00) 100%),
        rgba(255, 255, 255, 0.50);
}

.text-normal.l {
    color: rgba(0, 0, 0, 0.70);
}

.nav-link.l {
    color: #333;
}

.nav-link.l.active {
    color: #0277bd !important;
}

.acrylic-button.l {
    color: #333;
    background: url("../../assets/img/Backgrounds/noise.webp"), linear-gradient(93.07deg, #397ff0af 0%, #004bad98 100%), #397EF0;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.10);
}

.acrylic-button.l:hover {
    color: #333;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.30);
    border: 2px solid #0277bd;
}

.contact-card.l {
    background-color: #f9f9f9;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.10);
}

.seperator.l {
    background-color: #ccc;
}

.contact-link.l {
    color: #666;
}

.social-link.l {
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.10);
}

.social-link.l:hover {
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.30);
}

.sub-site-logo.l {
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.10);
}

.copyright.l {
    color: rgba(0, 0, 0, 0.432);
}

.plain-link.l {
    color: #0277bd;
}

.plain-link.l:hover {
    color: #5596ff;
}

/* Create a custom checkbox */
.checkmark.l {
    background-color: #f3f3f3;
    border: 2px solid #ccc;
}

/* On mouse-over, add a grey background color */
.chb-container.l:hover input~.checkmark.l {
    background-color: #ddd;
    border: 5px solid #f3f3f3;
}

/* When the checkbox is checked, add a blue background */
.chb-container.l input:checked~.checkmark.l {
    background-color: #0277bd;
    border: 2px solid #f3f3f3;
}

/* Style the checkmark/indicator */
.chb-container.l .checkmark.l:after {
    border: solid black;
}

@media screen and (max-width: 768px) {
    .nav-button.l {
        background: transparent;
        color: #333;
    }

    .nav-button.l:hover {
        color: #0277bd;
    }
}

/* Home Page Colors */

.hero-shortcuts {
    background-color: #07152D;
}

.hero-shortcut {
    color: #ffffffa0;
}

.color-blob-top {
    background-color: #003cff;
}

@keyframes blobAnimation {
    0% {
        background-color: #003cff;
    }

    50% {
        background-color: #9900ff;
    }

    100% {
        background-color: #031cff;
    }
}

.bento-cell {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.bento-cell::after,
.swiper-slide-active.project-slide::after {
    background-color: rgb(12, 12, 12);
}

.gr-border::before,
.gr-only-hover::before,
.swiper-slide-active.project-slide::before {
    background: linear-gradient(90deg,
            rgba(19, 96, 228, 1) 0%,
            rgb(255, 0, 157) 50%,
            rgb(19, 96, 228) 100%);
}

.gr-border:hover::before,
.gr-only-hover:hover:before {
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);;
}

.services-intro .seperator {
    background-color: #07152D;
}

.service-card::after {
    background-color: #0c0c0c;
}

.project-slide {
    background-color: rgb(20, 20, 20);
}

.collapsible {
    background-color: transparent;
    color: #ffffffa0;
}

.team-card {
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.0);
    background-color: rgb(0, 0, 0);
}

.team-card::after {
    background-color: rgb(0, 0, 0);
}

.team-card::before {
    background: linear-gradient(90deg,
            rgba(19, 96, 228, 1) 0%,
            rgb(255, 0, 157) 50%,
            rgb(19, 96, 228) 100%);
}

.team-card:hover::before,
.swiper-slide-active.project-slide:hover::before {
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
}

.team-image {
    background-color: rgb(0, 0, 0);
}

.team-name {
    color: #ffffffa4;
}

.team-role {
    color: #ffffff60;
}

.category-button {
    background: #07152D;
    color: white;
}

.category-button.active {
    background-color: #0277bd;
}

.popup {
    background-color: rgba(0, 0, 0, 0.4);
}


.popup-content {
    background: #0c0c0c;
    background-image:
        linear-gradient(rgb(14, 14, 14), rgb(14, 14, 14)),
        linear-gradient(90deg,
            rgba(19, 96, 228, 0.5) 0%,
            rgb(255, 0, 157, 0.5) 50%,
            rgb(19, 96, 228, 0.5) 100%);
}

@keyframes rotateBorder {

    0% {
        background-image: linear-gradient(rgb(14, 14, 14), rgb(14, 14, 14)),
            linear-gradient(90deg,
                rgba(19, 96, 228, 0.5) 0%,
                rgb(255, 0, 157, 0.5) 50%,
                rgb(19, 96, 228, 0.5) 100%);
    }

    10% {
        background-image: linear-gradient(rgb(14, 14, 14), rgb(14, 14, 14)),
            linear-gradient(81deg,
                rgba(19, 96, 228, 0.5) 0%,
                rgb(255, 0, 157, 0.5) 50%,
                rgb(19, 96, 228, 0.5) 100%);
    }

    20% {
        background-image: linear-gradient(rgb(14, 14, 14), rgb(14, 14, 14)),
            linear-gradient(72deg,
                rgba(19, 96, 228, 0.5) 0%,
                rgb(255, 0, 157, 0.5) 50%,
                rgb(19, 96, 228, 0.5) 100%);
    }

    30% {
        background-image: linear-gradient(rgb(14, 14, 14), rgb(14, 14, 14)),
            linear-gradient(63deg,
                rgba(19, 96, 228, 0.5) 0%,
                rgb(255, 0, 157, 0.5) 50%,
                rgb(19, 96, 228, 0.5) 100%);
    }

    40% {
        background-image: linear-gradient(rgb(14, 14, 14), rgb(14, 14, 14)),
            linear-gradient(54deg,
                rgba(19, 96, 228, 0.5) 0%,
                rgb(255, 0, 157, 0.5) 50%,
                rgb(19, 96, 228, 0.5) 100%);
    }

    50% {
        background-image: linear-gradient(rgb(14, 14, 14), rgb(14, 14, 14)),
            linear-gradient(45deg,
                rgba(19, 96, 228, 0.5) 0%,
                rgb(255, 0, 157, 0.5) 50%,
                rgb(19, 96, 228, 0.5) 100%);
    }

    60% {
        background-image: linear-gradient(rgb(14, 14, 14), rgb(14, 14, 14)),
            linear-gradient(54deg,
                rgba(19, 96, 228, 0.5) 0%,
                rgb(255, 0, 157, 0.5) 50%,
                rgb(19, 96, 228, 0.5) 100%);
    }

    70% {
        background-image: linear-gradient(rgb(14, 14, 14), rgb(14, 14, 14)),
            linear-gradient(63deg,
                rgba(19, 96, 228, 0.5) 0%,
                rgb(255, 0, 157, 0.5) 50%,
                rgb(19, 96, 228, 0.5) 100%);
    }

    80% {
        background-image: linear-gradient(rgb(14, 14, 14), rgb(14, 14, 14)),
            linear-gradient(72deg,
                rgba(19, 96, 228, 0.5) 0%,
                rgb(255, 0, 157, 0.5) 50%,
                rgb(19, 96, 228, 0.5) 100%);
    }

    90% {
        background-image: linear-gradient(rgb(14, 14, 14), rgb(14, 14, 14)),
            linear-gradient(81deg,
                rgba(19, 96, 228, 0.5) 0%,
                rgb(255, 0, 157, 0.5) 50%,
                rgb(19, 96, 228, 0.5) 100%);
    }

    100% {
        background-image: linear-gradient(rgb(14, 14, 14), rgb(14, 14, 14)),
            linear-gradient(90deg,
                rgba(19, 96, 228, 0.5) 0%,
                rgb(255, 0, 157, 0.5) 50%,
                rgb(19, 96, 228, 0.5) 100%);
    }


}


.close {
    color: #aaa;
}

.close:hover,
.close:focus {
    color: rgb(119, 23, 23);
}

.form-group input,
.form-group textarea {
    background-color: #0c0c0c;
    border: 1px solid #0c0c0c;
    color: white;
}

.form-group input:active,
.form-group input:focus,
.form-group textarea:active,
.form-group textarea:focus {
    border: 3px solid #07152D;
}

@media only screen and (max-width: 1366px) {
    .hero {
        margin: 10vh 4vw;
    }

    .hero-shortcuts {
        padding: 6px 10px;
    }

    .hero-shortcut {
        padding: 6px 10px;
        font-size: 14px;
    }

    .swiper {
        max-width: 80vw;
    }


}

@media only screen and (max-width: 768px) {
    .hero {
        flex-direction: column;
        padding: 30px;
        gap: 20px;
        margin-top: 10px;
    }

    .hero-content {
        text-align: center;
        align-items: center;
        margin-bottom: 20px;
    }

    .hero-image {
        width: 80vw;
    }

    .hero-shortcuts {
        margin-top: 0;
    }

    .hero-visuals {
        gap: 20px;
        align-items: center;
    }

    .bento {
        display: flex;
        flex-direction: column;
    }

    .services-header,
    .featured-header,
    .team-title,
    .faq-heading h1 {
        font-size: 2.5em;
        margin-top: 6vh;
        padding: 0 20px;
    }

    .services-des,
    .featured-des {
        padding: 20px;
    }

    .swiper {
        width: 90vw;
    }

    .swiper-slide img {
        display: block;
        width: 100%;
        object-fit: cover;
    }

    .project-slide {
        flex-direction: column;
    }

    .project-info {
        text-align: center;
        letter-spacing: 0;
        font-size: small;
        width: 100%;
    }

    .project-l-des {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
    }

    .project-s {
        display: block;
    }

    .team-cards {
        max-height: 1600px;
    }

    #faq {
        flex-direction: column;
    }

    .faq-heading h1 {
        transform: rotate(0deg);
        width: 100%;
        text-align: center;
        margin-bottom: 1em;
    }


    .popup-content {
        margin: 10px;
        width: 96vw;
        max-height: 96vh;
    }
}

.tilt {
    animation-fill-mode: none;
}