@keyframes vibrate {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
}

@keyframes Roadmaps {

    0%,
    100% {
        box-shadow: 0 0 0 0 #ffc107;
    }

    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
}

@keyframes flow-anim {
    0% {
        stroke-dashoffset: 320;
    }

    35%,
    65% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: -320;
    }
}

@keyframes fadeOut {

    0%,
    90% {
        opacity: 1;
        visibility: visible;
    }

    100% {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

@keyframes fadeInleftright {
    from {
        opacity: 0;
        transform: translate3d(-100px, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes typing {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

.vibrate {
    animation: vibrate 2s infinite;
}

.Roadmaps {
    animation: Roadmaps 2s infinite;
}

.f-line {
    stroke: url(#fitteGradient);
    animation: flow-anim 3.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.loader-box {
    animation: fadeOut 3s forwards;
}

.fadeInleftright {
    opacity: 1;
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.fadeInleftright:hover {
    animation: fadeInleftright 0.8s ease-out forwards;
}

.typing-effect {
    animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
}

.transition-zoom,
.transition-zoom-img {
    transition: transform 0.5s ease;
    transform-origin: center center;
}

.transition-zoom:hover,
.project-img:hover .transition-zoom,
.project-item:hover .transition-zoom {
    transform: scale(1.12);
}

.laptop_container {
    overflow: hidden;
    position: relative;
}

.laptop_container:hover .transition-zoom-img {
    transform: scale(1.08);
}

.slide-left-element,
.slide-right-element,
.about-slide-left,
.about-slide-right,
.slide-up-element,
.slide-up-card,
.roadmap-slide-left,
.roadmap-slide-right,
#contact .contact-slide-left,
#contact .contact-slide-right,
#site-footer .footer-slide-left,
#site-footer .footer-slide-right {
    opacity: 0;
    will-change: transform, opacity;
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.slide-left-element {
    transform: translateX(-80px) scale(0.96);
}

.slide-right-element {
    transform: translateX(80px) scale(0.96);
}

.slide-up-element,
.slide-up-card {
    transform: translateY(40px);
}

.about-slide-left {
    transform: translateX(-80px) translateY(20px);
    transition-duration: 1s;
}

.about-slide-right {
    transform: translateX(80px) translateY(20px);
    transition-duration: 1s;
}

.roadmap-slide-left {
    transform: translateX(-50px);
}

.roadmap-slide-right {
    transform: translateX(50px);
}

#contact .contact-slide-left,
#site-footer .footer-slide-left {
    transform: translateX(-50px);
}

#contact .contact-slide-right,
#site-footer .footer-slide-right {
    transform: translateX(50px);
}

#site-footer .footer-slide-left,
#site-footer .footer-slide-right {
    transform: translateX(40px);
}

/* FAQ Section */
#faqSection .anim-top {
    opacity: 0;
    transform: translateY(-30px);
    transition: all 0.7s ease-out;
}

#faqSection.faq-active .anim-top {
    opacity: 1;
    transform: translateY(0);
}

.faq-active .slide-left-element {
    opacity: 1;
    transform: translateX(0) scale(1);
}

/* About Section */
.about-active .about-slide-left,
.about-active .about-slide-right {
    opacity: 1;
    transform: translate(0);
}

.about-active .about-slide-right {
    transition-delay: 0.25s;
}

/* Service, Project & Tech Sections (Global Active States) */
.service-active .slide-left-element,
.project-active .slide-left-element,
.tech-active .slide-left-element,
.service-active .slide-right-element,
.project-active .slide-right-element {
    opacity: 1;
    transform: translateX(0) scale(1);
    transition-delay: calc(var(--delay, 0) * 0.12s);
}

/* Service heading scroll animation */
#service .anim-top {
    opacity: 0;
    transform: translateY(-30px);
    transition: all 0.7s ease-out;
}

#service.service-active .anim-top {
    opacity: 1;
    transform: translateY(0);
}

.tech-active .slide-left-element {
    opacity: 1;
    transform: translateX(0) scale(1);
    transition-delay: calc(var(--delay, 0) * 0.06s);
}

.faq-active .slide-right-element,
.tech-active .slide-right-element {
    opacity: 1;
    transform: translateX(0) scale(1);
    transition-delay: 0.3s;
}

/* Project heading scroll animation */
#project .anim-top {
    opacity: 0;
    transform: translateY(-30px);
    transition: all 0.7s ease-out;
}

#project.project-active .anim-top {
    opacity: 1;
    transform: translateY(0);
}

/* Tech Stack Slide Up Cards */
.tech-stack-section.tech-active .slide-up-element {
    opacity: 1;
    transform: translateY(0);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
    transition-delay: calc(var(--delay, 0) * 0.05s);
}

/* Tech Stack heading scroll animation */
#techStack .anim-top {
    opacity: 0;
    transform: translateY(-30px);
    transition: all 0.7s ease-out;
}

#techStack.tech-active .anim-top {
    opacity: 1;
    transform: translateY(0);
}

/* Management Section */
#Management .anim-top {
    opacity: 0;
    transform: translateY(-30px);
    transition: all 0.7s ease-out;
}

#Management.Management-active .anim-top {
    opacity: 1;
    transform: translateY(0);
}

#Management.Management-active .slide-left-element,
#Management.Management-active .slide-right-element {
    opacity: 1;
    transform: translateX(0) scale(1);
}

#Management.Management-active .slide-up-card {
    opacity: 1;
    transform: translateY(0);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
    transition-delay: calc(var(--delay, 0) * 0.15s);
}

/* Roadmap Timeline Section */
#Roadmap .anim-top {
    opacity: 0;
    transform: translateY(-20px);
    transition: transform 0.7s ease, opacity 0.7s ease;
}

#Roadmap.Roadmap-active .anim-top {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.05s;
}

.roadmap_section .timeline-dot {
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) ease;
}

#Roadmap.Roadmap-active .roadmap-slide-left,
#Roadmap.Roadmap-active .roadmap-slide-right {
    opacity: 1;
    transform: translateX(0);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
}

#Roadmap.Roadmap-active .timeline-dot {
    transform: translate(-50%, -50%) scale(1) !important;
}

/* Roadmap Staggered Delay */
#Roadmap.Roadmap-active .timeline-row:nth-child(1),
#Roadmap.Roadmap-active .timeline-row:nth-child(1) .timeline-dot {
    transition-delay: 0.1s;
}

#Roadmap.Roadmap-active .timeline-row:nth-child(2),
#Roadmap.Roadmap-active .timeline-row:nth-child(2) .timeline-dot {
    transition-delay: 0.25s;
}

#Roadmap.Roadmap-active .timeline-row:nth-child(3),
#Roadmap.Roadmap-active .timeline-row:nth-child(3) .timeline-dot {
    transition-delay: 0.4s;
}

#Roadmap.Roadmap-active .timeline-row:nth-child(4),
#Roadmap.Roadmap-active .timeline-row:nth-child(4) .timeline-dot {
    transition-delay: 0.55s;
}

#Roadmap.Roadmap-active .timeline-row:nth-child(5),
#Roadmap.Roadmap-active .timeline-row:nth-child(5) .timeline-dot {
    transition-delay: 0.7s;
}

/* Contact Section */
#contact .anim-top {
    opacity: 0;
    transform: translateY(-20px);
    transition: transform 0.7s ease, opacity 0.7s ease;
}

#contact.Contact-active .anim-top {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.05s;
}


#contact.Contact-active .contact-slide-left,
#contact.Contact-active .contact-slide-right {
    opacity: 1;
    transform: translateX(0);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
}

#contact.Contact-active .contact-slide-left {
    transition-delay: 0.1s;
}

#contact.Contact-active .contact-slide-right {
    transition-delay: 0.25s;
}

/* Footer Section */
#site-footer.Footer-active .footer-slide-left,
#site-footer.Footer-active .footer-slide-right {
    opacity: 1;
    transform: translateX(0);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
}

#site-footer.Footer-active .footer-slide-left:nth-child(1) {
    transition-delay: 0.1s;
}

#site-footer.Footer-active .footer-slide-left:nth-child(2) {
    transition-delay: 0.2s;
}

#site-footer.Footer-active .footer-slide-right:nth-child(3) {
    transition-delay: 0.3s;
}

#site-footer.Footer-active .footer-slide-right:nth-child(4) {
    transition-delay: 0.4s;
}

.project-item {
    overflow: hidden;
    position: relative;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    background: #ffffff;
    transition: transform 0.3s ease;
}

.project-item:hover {
    transform: translateY(-5px);
}

.project-content {
    top: 0;
    left: 0;
    background: rgba(15, 15, 15, 0.85);
    opacity: 0;
    transition: all 0.4s ease;
}

.project-item:hover .project-content {
    opacity: 1;
}

.project-content a {
    background: linear-gradient(135deg, #dfa234, #bf811d);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateY(20px);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.project-item:hover .project-content a {
    transform: translateY(0);
}

/* Tech Cards */
.tech-card {
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    background-color: #ffffff !important;
    font-size: 0.9rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
    overflow: hidden;
}

.tech-card:hover {
    transform: translateY(-5px);
    background: linear-gradient(135deg, #ffffff, #fcf6ec) !important;
    border-color: #dfa234;
    box-shadow: 0px 0px 13px 7px #e8a800f7;;
}

/* bolg */
/* ==========================================
   1. Initial Hidden/Offset States
   ========================================== */
.slide-left-element,
.about-slide-left {
    opacity: 0;
    transform: translateX(-80px) translateY(20px) scale(0.96);
    will-change: transform, opacity;
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.slide-right-element,
.about-slide-right {
    opacity: 0;
    transform: translateX(80px) translateY(20px) scale(0.96);
    will-change: transform, opacity;
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================
   2. Active States (Jab Scroll Par Trigger Ho)
   ========================================== */
/* Generic active classes */
.active .slide-left-element,
.active .slide-right-element,
.active .about-slide-left,
.active .about-slide-right,
/* Specific parent section active classes */
.blog-active .slide-left-element,
.blog-active .slide-right-element,
.blog-active .about-slide-left,
.blog-active .about-slide-right,
.about-active .about-slide-left,
.about-active .about-slide-right {
    opacity: 1 !important;
    transform: translate(0, 0) scale(1) !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Prevent horizontal scrollbars during slide animations */
#solutionsSection {
    overflow-x: hidden;
}

/* Initial Hidden States */
#solutionsSection .anim-top {
    opacity: 0;
    transform: translateY(-30px);
    transition: all 0.6s ease-out;
}

#solutionsSection .anim-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: all 0.7s ease-out;
}

#solutionsSection .anim-right {
    opacity: 0;
    transform: translateX(60px);
    transition: all 0.7s ease-out;
}

/* Animated Active States (When solutions-active class is added by JS) */
#solutionsSection.solutions-active .anim-top,
#solutionsSection.solutions-active .anim-left,
#solutionsSection.solutions-active .anim-right {
    opacity: 1;
    transform: translateX(0) translateY(0);
}

/* Testimonial section scroll animation */
#testimonialSection .anim-top {
    opacity: 0;
    transform: translateY(-30px);
    transition: all 0.7s ease-out;
}

#testimonialSection.testimonial-active .anim-top {
    opacity: 1;
    transform: translateY(0);
}

#testimonialSection .site-heading,
#testimonialSection .review-tabs-wrapper,
#testimonialSection .review-text-content {
    opacity: 0;
    transition: all 0.7s ease;
}

#testimonialSection .site-heading {
    transform: translateY(20px);
}

#testimonialSection .review-tabs-wrapper {
    transform: translateX(-35px);
}

#testimonialSection .review-text-content {
    transform: translateX(35px);
}

#testimonialSection.testimonial-active .site-heading,
#testimonialSection.testimonial-active .review-tabs-wrapper,
#testimonialSection.testimonial-active .review-text-content {
    opacity: 1;
    transform: translate(0, 0);
}

/* Blog heading scroll animation */

#blogSection .anim-top {
    opacity: 0;
    transform: translateY(-30px);
    transition: all 0.7s ease-out;
}

#blogSection.blog-active .anim-top {
    opacity: 1;
    transform: translateY(0);
}

/* Global top-to-bottom heading animation override */
@keyframes animTopToBottom {
    from {
        opacity: 0;
        transform: translateY(-35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.anim-top {
    opacity: 0;
    transform: translateY(-35px);
}

#faqSection.faq-active .anim-top,
#service.service-active .anim-top,
#project.project-active .anim-top,
#techStack.tech-active .anim-top,
#Management.Management-active .anim-top,
#Roadmap.Roadmap-active .anim-top,
#contact.Contact-active .anim-top,
#solutionsSection.solutions-active .anim-top,
#testimonialSection.testimonial-active .anim-top,
#blogSection.blog-active .anim-top {
    animation: animTopToBottom 0.7s ease-out forwards !important;
}