@config '../lib/tailwind.config.js';
@tailwind base;
@tailwind components;
@tailwind utilities;

.muntinlupa-line {
    border: 0;
    background: linear-gradient(
            to right,
            #FFD166 0%,
            #FFD166 50%,
            #118AB2 50%,
            #118AB2 80%,
            #EF476F 80%,
            #EF476F 100%);
}
#intro-child{
    display: none;
}
.button-trans {
    transition: all 0.3s ease-in-out;
}

#feedback-parent div {
    transition: all 0.3s ease-in-out;
}

#team-parent div {
    transition: all 0.3s ease-in-out;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #555;
}
.card-story:nth-last-child(4) {
    --y: calc(-50% + -100px);
    transform: translate(-50%, var(--y)) scale(0.8);
}
.card-story:nth-last-child(3) {
    --y: calc(-50% + -50px);
    transform: translate(-50%, var(--y)) scale(0.9);
}

.card-story:nth-last-child(2) {
    --y: calc(-50%);
    transform: translate(-50%, var(--y)) scale(1);
}

.card-story:nth-last-child(1) {
    --y: calc(-50% + 50px);
    transform: translate(-50%, var(--y)) scale(1.10);
}

@keyframes swap {
    50% {
        transform: translate(-50%, calc(var(--y) - 250px)) scale(0.85) rotate(-5deg);
        animation-timing-function: ease-in;
    }
    100% {
        transform: translate(-50%, calc(var(--y) - 15px)) scale(0.85);
        z-index: -1;
    }
}

.vignette-overlay {
    box-shadow: inset 0 0 25px rgba(0, 0, 0, 1);
}


.facility-slider {
    display: flex;
    overflow-x: scroll;
    scroll-behavior: smooth;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none;

    box-shadow: 0 0 0.5rem black;
}

.facility-slider::-webkit-scrollbar {
    display: none;
}

.slider {
    display: flex;
    overflow-x: scroll;
    scroll-behavior: smooth;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

.slider::-webkit-scrollbar {
    display: none; /* Chrome, Safari, and Opera */
}

.faq-accordion {
    transition-property: all;
    transition-duration: 500ms;
}

.facility-section:hover .facility-child {
    cursor: pointer;
    transform: scale(1.1);
    background-color: rgb(229 229 229 / var(--tw-bg-opacity));
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

#horizontal-scroll::-webkit-scrollbar {
    height: 6px; /* Adjust height as needed */
}

#horizontal-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#horizontal-scroll::-webkit-scrollbar-thumb {
    background: #888;
}

#horizontal-scroll::-webkit-scrollbar-thumb:hover {
    background: #555;
}

#horizontal-scroll {
    overflow-x: scroll;
}

.neumorphic {
    box-shadow: 5px 5px 10px #9f9f9f,
    -5px -5px 10px #ffffff;
}

.header-title-shadow{
    text-shadow: 0px 0px 2px #2b2b2b;
}

.research-neumorphic{
    box-shadow: 5px 5px 5px #b6b6b6,
    -10px -10px 10px #ffffff;
}

.reverse-animation {
    animation-direction: reverse;
}
.mask-image-gradient {
    mask-image: linear-gradient(to right, black 0%, black 90%, transparent 100%);
}


.video-mask{
    background-image:
    linear-gradient(45deg, #808080 5%, transparent 25%),
    linear-gradient(-45deg, #808080 5%, transparent 25%),
    linear-gradient(45deg,transparent 95%, #808080 45%),
    linear-gradient(-45deg, transparent 95%, #808080 45%);

    background-size:3px 3px;
    background-position:0 0,10px 0, 10px -10px, 0px 10px;

    position:absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
}