/* ===== SCROLL ANIMATIONS ===== */
.fade-in-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.fade-in-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* ===== STAGGERED ANIMATIONS ===== */
.fade-in-up:nth-child(1) { transition-delay: 0.1s; }
.fade-in-up:nth-child(2) { transition-delay: 0.2s; }
.fade-in-up:nth-child(3) { transition-delay: 0.3s; }
.fade-in-up:nth-child(4) { transition-delay: 0.4s; }
.fade-in-up:nth-child(5) { transition-delay: 0.5s; }
.fade-in-up:nth-child(6) { transition-delay: 0.6s; }

/* ===== HOVER ANIMATIONS ===== */
.service-card,
.hs-card,
.accreditation-card,
.sector-item {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== LOADING ANIMATION ===== */
@keyframes fadeInPage {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

body {
    animation: fadeInPage 0.6s ease-out;
}

/* ===== NAVBAR ANIMATION ===== */
.header {
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

/* ===== COUNTER ANIMATION ===== */
@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== FLOATING BUTTON ANIMATIONS ===== */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

.whatsapp-float,
.phone-float {
    animation: float 3s ease-in-out infinite;
}

.whatsapp-float {
    animation-delay: 0s;
}

.phone-float {
    animation-delay: 1.5s;
}

/* ===== IMAGE HOVER EFFECTS ===== */
.about-image img,
.why-image img,
.service-detail-image img {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.about-image:hover img,
.why-image:hover img,
.service-detail-image:hover img {
    transform: scale(1.03);
}

/* ===== BUTTON RIPPLE EFFECT ===== */
.btn {
    position: relative;
    overflow: hidden;
}

.btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.btn:active::after {
    width: 300px;
    height: 300px;
}

/* ===== UNDERLINE ANIMATION FOR LINKS ===== */
.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: width 0.3s ease, left 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 60%;
    left: 20%;
}

/* ===== CARD SHINE EFFECT ===== */
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transition: left 0.6s ease;
}

.service-card {
    position: relative;
    overflow: hidden;
}

.service-card:hover::before {
    left: 100%;
}

/* ===== SMOOTH SCROLL INDICATOR ===== */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0) translateX(-50%);
    }
    40% {
        transform: translateY(-10px) translateX(-50%);
    }
    60% {
        transform: translateY(-5px) translateX(-50%);
    }
}

.hero-scroll {
    animation: bounce 2s infinite;
}

/* ===== PARALLAX SUBTLE EFFECT ===== */
.page-header {
    background-attachment: fixed;
}

/* ===== FORM FOCUS ANIMATIONS ===== */
.form-group input,
.form-group select,
.form-group textarea {
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    transform: translateY(-1px);
}

/* ===== GRADIENT ANIMATION FOR CTA ===== */
.cta-section {
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ===== ICON ROTATION ON HOVER ===== */
.service-icon,
.hs-card-icon {
    transition: transform 0.4s ease;
}

.service-card:hover .service-icon,
.hs-card:hover .hs-card-icon {
    transform: rotateY(180deg);
}

/* ===== COMING SOON PULSE ===== */
@keyframes pulseSoft {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.coming-soon-icon {
    animation: pulseSoft 3s ease-in-out infinite;
}

header { background: #0f1720 !important; }

.hero-content { text-align: center; margin: 0 auto; }

header img { height: 120px !important; }

.menu, .menu-icon, .hamburger, .nav-toggle { color: #ffffff !important; fill: #ffffff !important; }

.menu span, .hamburger span, .nav-toggle span { background: #ffffff !important; }