/* About Page Styles */

/* Animations */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

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

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

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

@keyframes slideInBottom {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Scroll Animation Classes */
.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.slide-in-left {
    transform: translateX(-30px);
}

.slide-in-right {
    transform: translateX(30px);
}

.slide-in-bottom {
    transform: translateY(30px);
}

.fade-in {
    transform: scale(0.95);
}

/* When JS adds .in-view */
.animate-on-scroll.in-view {
    opacity: 1;
    transform: none;
}

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

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

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

/* Custom Hover Utilities */
.hover-lift {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
}

/* Specific About Components */

.about-hero {
    border-bottom-left-radius: 3rem;
    border-bottom-right-radius: 3rem;
    box-shadow: 0 10px 30px rgba(14, 165, 233, 0.05);
}

.glassmorphism-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    z-index: 10;
}



.service-card {
    border: 1px solid #f1f5f9;
}

.service-card:hover .service-icon-wrapper i {
    transform: scale(1.15);
}

.service-icon-wrapper i {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Portfolio Section (Agri, Real Estate, Cars) */
.portfolio-img {
    height: 400px;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.portfolio-row:hover .portfolio-img {
    transform: scale(1.05);
}

.overlay-gradient {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
    z-index: 2;
}

/* Tracking utility for small caps */
.tracking-wider {
    letter-spacing: 0.1em;
}