/* FRONTEND GREEN THEME ENHANCEMENTS */

/* Hero Section Enhancement */
.tp-hero__area {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 50%, #bbf7d0 100%) !important;
    position: relative !important;
    overflow: hidden !important;
}

.tp-hero__area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="%2322c55e" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>') !important;
    opacity: 0.3;
}

/* Enhanced Buttons for Frontend */
.tp-btn {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 8px 25px rgba(34, 197, 94, 0.3) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.tp-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s;
}

.tp-btn:hover::before {
    left: 100%;
}

.tp-btn:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 35px rgba(34, 197, 94, 0.4) !important;
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
}

.tp-btn-blue {
    background: linear-gradient(135deg, #15803d 0%, #166534 100%) !important;
    color: white !important;
}

.tp-btn-blue:hover {
    background: linear-gradient(135deg, #166534 0%, #14532d 100%) !important;
}

/* Feature Cards Enhancement */
.tp-feature__item {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 253, 244, 0.8) 100%) !important;
    border: 1px solid rgba(34, 197, 94, 0.1) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 32px rgba(34, 197, 94, 0.1) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.tp-feature__item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #22c55e 0%, #16a34a 50%, #15803d 100%) !important;
}

.tp-feature__item:hover {
    transform: translateY(-12px) scale(1.03) !important;
    box-shadow: 0 25px 60px rgba(34, 197, 94, 0.2) !important;
}

/* Header Enhancement */
.tp-header__area {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 253, 244, 0.9) 100%) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(34, 197, 94, 0.1) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
}

.tp-header__logo img {
    transition: all 0.3s ease !important;
}

.tp-header__logo img:hover {
    transform: scale(1.05) !important;
}

/* Menu Enhancement */
.tp-header__main-menu ul li a {
    color: #166534 !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    position: relative !important;
}

.tp-header__main-menu ul li a::before {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%) !important;
    transition: all 0.3s ease !important;
    transform: translateX(-50%);
}

.tp-header__main-menu ul li a:hover::before,
.tp-header__main-menu ul li a.active::before {
    width: 100%;
}

.tp-header__main-menu ul li a:hover {
    color: #22c55e !important;
}

/* Price Cards Enhancement */
.tp-price__item {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 253, 244, 0.8) 100%) !important;
    border: 1px solid rgba(34, 197, 94, 0.1) !important;
    border-radius: 24px !important;
    box-shadow: 0 12px 40px rgba(34, 197, 94, 0.1) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.tp-price__item.active {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    color: white !important;
    transform: scale(1.05) !important;
    box-shadow: 0 20px 60px rgba(34, 197, 94, 0.3) !important;
}

.tp-price__item:hover {
    transform: translateY(-12px) scale(1.02) !important;
    box-shadow: 0 25px 60px rgba(34, 197, 94, 0.2) !important;
}

/* Testimonial Enhancement */
.tp-testimonial__item {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 253, 244, 0.8) 100%) !important;
    border: 1px solid rgba(34, 197, 94, 0.1) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 32px rgba(34, 197, 94, 0.1) !important;
    transition: all 0.3s ease !important;
}

.tp-testimonial__item:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 50px rgba(34, 197, 94, 0.15) !important;
}

/* Footer Enhancement */
.tp-footer__area {
    background: linear-gradient(135deg, #14532d 0%, #166534 100%) !important;
    position: relative !important;
}

.tp-footer__area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #22c55e 0%, #16a34a 50%, #15803d 100%) !important;
}

/* Form Enhancement */
.tp-contact__form .form-control {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 2px solid rgba(34, 197, 94, 0.1) !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
}

.tp-contact__form .form-control:focus {
    border-color: #22c55e !important;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1) !important;
    background: white !important;
}

/* Animation Classes */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

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

.fade-in-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.6s ease;
}

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

.fade-in-right {
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.6s ease;
}

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

/* Scroll Reveal Animation */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-on-scroll.revealed {
    opacity: 1;
    transform: translateY(0);
}