/* Custom styles for Apricot IT website */

:root {
    --color-primary: #FF9E2C;
    /* PANTONE 15-1153 approximation */
    --color-primary-dark: #e88d1e;
    --color-secondary: #2EC4B6;
    --color-dark: #011627;
    --color-light: #FDFFFC;
    --color-accent: #E71D36;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Navbar styles */
.sticky-header {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Back to top button */
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

/* Mobile menu */
.mobile-menu {
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}

.mobile-menu.open {
    transform: translateX(0);
}

/* Animation for elements that appear on scroll */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s, transform 0.8s;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Shine effect for buttons */
.shine-effect {
    position: relative;
    overflow: hidden;
}

.shine-effect::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.3) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: rotate(30deg);
    opacity: 0;
    transition: opacity 0.6s;
}

.shine-effect:hover::after {
    opacity: 1;
    animation: shine 1.5s forwards;
}

@keyframes shine {
    0% {
        transform: rotate(30deg) translateX(-300%);
    }

    100% {
        transform: rotate(30deg) translateX(300%);
    }
}

/* Card hover effects */
.service-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Testimonial carousel */
.testimonial-slide {
    transition: all 0.3s ease;
}

/* Success message animations */
.animate-fade-in {
    animation: fadeIn 0.8s ease-in-out;
}

.animate-bounce-once {
    animation: bounceOnce 0.6s ease-in-out;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounceOnce {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}