/* ========================================
                                        SERVICE  
                        ======================================== */


/* ========================================== */
/* UNIQUE CSS FOR SERVICES PAGE ONLY          */
/* Prefix: srvpg- (Services Page)            */
/* ========================================== */

/* Hero card fade-up */
.srvpg-fade-up {
    opacity: 0;
    transform: translateY(300px);
    transition: opacity 0.8s ease-out, transform 1.2s ease-out;
}
.srvpg-fade-up.srvpg-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Scroll animation */
.srvpg-animate-scroll {
    transition: opacity 1s ease-out, transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.srvpg-slide-right {
    opacity: 0;
    transform: translateX(60px);
}
.srvpg-slide-left {
    opacity: 0;
    transform: translateX(-60px);
}
.srvpg-visible {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

/* Staggered Delays */
.srvpg-d100 { transition-delay: 100ms; }
.srvpg-d200 { transition-delay: 200ms; }
.srvpg-d300 { transition-delay: 300ms; }
.srvpg-d400 { transition-delay: 400ms; }
.srvpg-d500 { transition-delay: 500ms; }
.srvpg-d600 { transition-delay: 600ms; }
.srvpg-d700 { transition-delay: 700ms; }
.srvpg-d800 { transition-delay: 800ms; }

/* Custom scrollbar */
.srvpg-scroll::-webkit-scrollbar {
    width: 6px;
}
.srvpg-scroll::-webkit-scrollbar-track {
    background: #1a1a1a;
}
.srvpg-scroll::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 3px;
}





/* ========================================
                                        PORTFOLIO 
                        ======================================== */












/* ========================================
                                        ABOUT
                        ======================================== */





/* Base transition class */
.animate-on-scroll {
    transition: opacity 1s ease-out, transform 1.5s ease-out;
}

/* Animation Types */
.anim-slide-right {
    opacity: 0;
    transform: translateX(800px);
}

.anim-slide-left {
    opacity: 0;
    transform: translateX(-100px);
}

.anim-slide-up {
    opacity: 0;
    transform: translateY(40px);
}

.anim-fade-in {
    opacity: 0;
}

/* Active State */
.is-visible {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
}

/* Staggered Delays */
.delay-100 {
    transition-delay: 100ms;
}

.delay-200 {
    transition-delay: 200ms;
}

.delay-300 {
    transition-delay: 300ms;
}

.delay-400 {
    transition-delay: 400ms;
}




/* <!-- Place this in your <head> or before the closing </body> tag --> */
/* --- Infinite Slider Animations --- */
@keyframes slide-left {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes slide-right {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0);
    }
}

.slider-track-left {
    animation: slide-left 40s linear infinite;
    width: max-content;
}

.slider-track-right {
    animation: slide-right 40s linear infinite;
    width: max-content;
}

/* Pause animation on hover for manual scrolling */
.slider-container:hover .slider-track-left,
.slider-container:hover .slider-track-right {
    animation-play-state: paused;
}

/* Hide scrollbar for a cleaner look */
.slider-container::-webkit-scrollbar {
    display: none;
}

.slider-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Modal styles */
.modal-hidden {
    display: none;
}

.modal-visible {
    display: flex;
}



/* ========================================
                                         CAREER
                        ======================================== */



   /* Apply the animation only on screens 768px and wider (md and up) */
    @media (min-width: 768px) {
        .fade-upp {
            opacity: 0;
            transform: translateX(-600px);
            transition: opacity 0.8s ease-out, transform 1.2s ease-out;
        }
        .fade-upp.is-visible {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* On mobile (< 768px), the element is always visible with no animation */
    @media (max-width: 767px) {
        .fade-upp {
            opacity: 1 !important;
            transform: none !important;
            transition: none !important;
        }
    }




/* ========================================
                                        CONTACT
                        ======================================== */


/* Animation only applies on screens 768px and wider (md breakpoint) */
@media (min-width: 768px) {
    .fadee-ups {
        opacity: 0;
        transform: translateX(-700px);
        transition: opacity 0.8s ease-out, transform 1.3s ease-out;
    }

    .fadee-ups.is-visible {
        opacity: 1;
        transform: translateX(0);
    }
}







/* ========================================
                                        HEADER
                        ======================================== */



/* <!-- Minimal inline styling for smooth dropdown animations --> */
/* Mobile menu container transition (height/opacity) */
.mobile-menu-transition {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease-out;
}

.mobile-menu-transition.open {
    max-height: calc(100vh - 80px);
    opacity: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Individual menu items - Staggered cascade animation */
.mobile-menu-item {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.mobile-menu-transition.open .mobile-menu-item {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered Delays for each item */
.mobile-menu-transition.open .mobile-menu-item:nth-child(1) {
    transition-delay: 0.10s;
}

.mobile-menu-transition.open .mobile-menu-item:nth-child(2) {
    transition-delay: 0.15s;
}

.mobile-menu-transition.open .mobile-menu-item:nth-child(3) {
    transition-delay: 0.20s;
}

.mobile-menu-transition.open .mobile-menu-item:nth-child(4) {
    transition-delay: 0.25s;
}

.mobile-menu-transition.open .mobile-menu-item:nth-child(5) {
    transition-delay: 0.30s;
}

.mobile-menu-transition.open .mobile-menu-item:nth-child(6) {
    transition-delay: 0.35s;
}

.mobile-menu-transition.open .mobile-menu-item:nth-child(7) {
    transition-delay: 0.40s;
}

.mobile-menu-transition.open .mobile-menu-item:nth-child(8) {
    transition-delay: 0.45s;
}

/* Submenu */
.mobile-submenu-transition {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease-out;
}

.mobile-submenu-transition.open {
    max-height: 500px;
    opacity: 1;
}

/* Rotate arrow smoothly */
.rotate-180-smooth {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.rotate-180-smooth.active {
    transform: rotate(180deg);
}


/* Submenu Container */
.mobile-submenu-transition {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease-out;
}

.mobile-submenu-transition.open {
    max-height: 500px;
    opacity: 1;
}

/* Submenu Items - Staggered Cascade */
.submenu-item {
    opacity: 0;
    transform: translateY(-15px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.mobile-submenu-transition.open .submenu-item {
    opacity: 1;
    transform: translateY(0);
}



    /* Logo welcome animation — slides in from the right */
    @keyframes logoIn {
        0% {
            opacity: 0;
            transform: translateX(1400px);
        }
        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .animate-logo-in {
        animation: logoIn 2.3s cubic-bezier(0.4, 0, 0.2, 1) both;
    }




/* ========================================
                                        Footer
                        ======================================== */




    /* Smooth welcome animation for social icons */
    .social-icon {
        opacity: 0;
        transform: translateY(800px);
        transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
            transform 1.0s cubic-bezier(0.4, 0, 0.2, 1),
            box-shadow 0.3s ease;
    }

    .social-icon.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* Staggered delays for each icon */
    .social-icon:nth-child(1) {
        transition-delay: 0.1s;
    }

    .social-icon:nth-child(2) {
        transition-delay: 0.2s;
    }

    .social-icon:nth-child(3) {
        transition-delay: 0.3s;
    }

    .social-icon:nth-child(4) {
        transition-delay: 0.4s;
    }

    .social-icon:nth-child(5) {
        transition-delay: 0.5s;
    }

    /* Smooth hover effect */
    .social-icon:hover {
        transform: translateY(0) scale(1.1);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    }