/* 
 * Theme 3 - Green & White Professional Theme
 * Modern, Clean, Professional Design
 * Complete Override for All Elements
 */

:root {
    /* Primary Mint/Teal Colors */
    --tp-theme-primary: #3ED598 !important;
    --tp-theme-secondary: #32C18A !important;
    --tp-theme-gradient: linear-gradient(135deg, #3ED598 0%, #42D6C0 100%) !important;
    
    /* Background Colors */
    --tp-common-white: #ffffff !important;
    --tp-light-bg: #F9FAFB !important;
    --tp-light-grey: #F2F4F6 !important;
    --tp-dark-teal: #2E6F73 !important;
    --tp-dark-slate: #1E293B !important;
    
    /* Text Colors */
    --tp-text-body: #475569 !important;
    --tp-heading-primary: #1E293B !important;
    --tp-heading-secondary: #1E293B !important;
    --tp-text-light: #E2E8F0 !important;
    
    /* Gradient Backgrounds */
    --tp-gradient-1: linear-gradient(135deg, #3ED598 0%, #42D6C0 100%) !important;
    --tp-gradient-2: linear-gradient(135deg, #42D6C0 0%, #3ED598 100%) !important;
    --tp-gradient-3: linear-gradient(180deg, #F9FAFB 0%, #E8FFF7 100%) !important;
}

/* Global Body */
body {
    font-family: 'Poppins', sans-serif;
    color: var(--tp-text-body);
    background: white;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
}

html {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
}

/* Keep proper container spacing */
.container {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Override any white backgrounds in main sections */
main section {
    background: transparent !important;
}

main section.white-bg,
main section[style*="background: white"],
main section[style*="background-color: white"],
main section[style*="background:#fff"],
main section[style*="background-color:#fff"] {
    background: transparent !important;
    background-color: transparent !important;
}

/* Remove any default margins */
* {
    box-sizing: border-box !important;
}

/* ========================================
   ALL BUTTONS - Green Theme
   ======================================== */
.tp-btn,
.tp-btn-border,
.tp-btn-2,
.btn,
.btn-primary,
.button,
button,
input[type="submit"],
button[type="submit"],
a.btn,
a.tp-btn {
    background: linear-gradient(135deg, #3ED598 0%, #42D6C0 100%) !important;
    border: none !important;
    color: white !important;
    padding: 15px 40px !important;
    border-radius: 30px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    text-transform: none !important;
    letter-spacing: 0.3px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 6px 20px rgba(62, 213, 152, 0.35) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    vertical-align: middle !important;
}

.tp-btn:hover,
.tp-btn-border:hover,
.tp-btn-2:hover,
.btn:hover,
.btn-primary:hover,
.button:hover,
button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
a.btn:hover,
a.tp-btn:hover {
    background: linear-gradient(135deg, #42D6C0 0%, #3ED598 100%) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 30px rgba(62, 213, 152, 0.5) !important;
    color: white !important;
}

/* Ensure icons and text stay visible on hover */
.tp-btn:hover span,
.tp-btn:hover i,
.btn:hover span,
.btn:hover i,
.tp-btn-primary:hover span,
.tp-btn-primary:hover i,
a.tp-btn:hover span,
a.tp-btn:hover i {
    color: white !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.tp-btn:active,
.btn:active,
button:active {
    transform: translateY(-1px) !important;
}

/* Outline Buttons */
.tp-btn-border-2,
.btn-outline,
.btn-outline-primary {
    background: transparent !important;
    border: 2px solid var(--tp-theme-primary) !important;
    color: var(--tp-theme-primary) !important;
}

.tp-btn-border-2:hover,
.btn-outline:hover,
.btn-outline-primary:hover {
    background: var(--tp-gradient-1) !important;
    border-color: var(--tp-theme-secondary) !important;
    color: white !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(62, 213, 152, 0.4) !important;
}

/* Blue/Pink/Sky Buttons - Convert to Mint Green */
.tp-btn-blue,
.tp-btn-blue-square,
.tp-btn-pink,
.tp-btn-sky-sm,
.tp-btn-sky {
    background: linear-gradient(135deg, #3ED598 0%, #42D6C0 100%) !important;
    border: none !important;
    color: white !important;
    padding: 15px 40px !important;
    border-radius: 30px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 6px 20px rgba(62, 213, 152, 0.35) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
}

.tp-btn-blue:hover,
.tp-btn-blue-square:hover,
.tp-btn-pink:hover,
.tp-btn-sky-sm:hover,
.tp-btn-sky:hover {
    background: linear-gradient(135deg, #42D6C0 0%, #3ED598 100%) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 30px rgba(62, 213, 152, 0.5) !important;
    color: white !important;
}

.tp-btn-blue span,
.tp-btn-blue-square span,
.tp-btn-pink span,
.tp-btn-sky-sm span,
.tp-btn-sky span {
    color: white !important;
}

/* ========================================
   HEADER STYLING - Dark Slate Professional
   ======================================== */
.tp-header-area,
.tp-header__area,
.header-area,
.tp-header-transparent {
    background: #1E293B !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
    padding: 15px 0 !important;
}

.tp-header-area .container,
.tp-header__area .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Logo */
.tp-header-area .tp-header-logo img,
.tp-header__logo img,
.tp-header-logo img {
    max-height: 45px !important;
    width: auto !important;
}

/* Navigation Menu - Teal Style */
.tp-header-menu ul,
.tp-main-menu ul,
.main-menu ul {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.tp-header-menu ul li,
.tp-main-menu ul li,
.main-menu ul li {
    margin: 0 !important;
    padding: 0 !important;
}

.tp-header-menu ul li a,
.tp-main-menu ul li a,
.main-menu ul li a {
    color: #E2E8F0 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 10px 18px !important;
    transition: all 0.3s ease !important;
    border-radius: 6px !important;
    display: block !important;
}

.tp-header-menu ul li a:hover,
.tp-main-menu ul li a:hover,
.main-menu ul li a:hover,
.tp-header-menu ul li a.active,
.tp-main-menu ul li a.active {
    color: #3ED598 !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Header Button - Green Professional Style */
.tp-header-btn a,
.tp-header__btn a,
.tp-header-btn .tp-btn,
.tp-header__btn .tp-btn {
    background: var(--tp-gradient-1) !important;
    color: white !important;
    padding: 12px 32px !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(17, 153, 142, 0.25) !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
}

.tp-header-btn a:hover,
.tp-header__btn a:hover,
.tp-header-btn .tp-btn:hover,
.tp-header__btn .tp-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(17, 153, 142, 0.35) !important;
    background: linear-gradient(135deg, #0d7a72 0%, #2dd36f 100%) !important;
}

/* Header Right Side */
.tp-header-right,
.tp-header__right {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
}

/* Mobile Menu Toggle */
.tp-header-menu-toggle,
.mean-container .mean-bar {
    background: transparent !important;
}

.mean-container a.meanmenu-reveal {
    color: var(--tp-theme-primary) !important;
    border: 2px solid var(--tp-theme-primary) !important;
    border-radius: 6px !important;
}

/* Mobile Menu - Dark Style */
.tp-mobile-menu,
.mean-container .mean-nav {
    background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
}

.mean-container .mean-nav ul li a {
    color: rgba(255,255,255,0.8) !important;
    padding: 15px 20px !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

.mean-container .mean-nav ul li a:hover {
    color: white !important;
    background: rgba(255, 255, 255, 0.1) !important;
    padding-left: 25px !important;
}

/* Sticky Header Enhancement */
.tp-header-area.sticky,
.tp-header__area.sticky {
    box-shadow: 0 4px 25px rgba(0,0,0,0.1) !important;
    animation: slideDown 0.3s ease-out !important;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ========================================
   HERO SECTION - Modern Attractive Design
   ======================================== */
.tp-hero__area,
.tp-slider__area,
.hero-area {
    background: linear-gradient(135deg, #F9FAFB 0%, #E8FFF7 100%) !important;
    padding: 140px 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Animated Background Elements */
.tp-hero__area::before {
    content: '' !important;
    position: absolute !important;
    top: -100px !important;
    right: -100px !important;
    width: 500px !important;
    height: 500px !important;
    background: radial-gradient(circle, rgba(62, 213, 152, 0.15) 0%, transparent 70%) !important;
    border-radius: 50% !important;
    animation: float 20s ease-in-out infinite !important;
}

.tp-hero__area::after {
    content: '' !important;
    position: absolute !important;
    bottom: -150px !important;
    left: -150px !important;
    width: 600px !important;
    height: 600px !important;
    background: radial-gradient(circle, rgba(66, 214, 192, 0.12) 0%, transparent 70%) !important;
    border-radius: 50% !important;
    animation: float 15s ease-in-out infinite reverse !important;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) translateX(0) scale(1);
    }
    50% {
        transform: translateY(-30px) translateX(20px) scale(1.05);
    }
}

.tp-hero__title,
.tp-slider__title {
    color: #1E293B !important;
    font-size: 64px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    margin-bottom: 25px !important;
    position: relative !important;
    z-index: 2 !important;
    animation: fadeInUp 0.8s ease-out !important;
}

.tp-hero__title span {
    background: linear-gradient(135deg, #3ED598 0%, #42D6C0 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.tp-hero__subtitle,
.tp-slider__subtitle,
.tp-hero__text,
.tp-slider__text {
    color: #475569 !important;
    font-size: 20px !important;
    line-height: 1.7 !important;
    margin-bottom: 35px !important;
    position: relative !important;
    z-index: 2 !important;
    animation: fadeInUp 0.8s ease-out 0.2s both !important;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tp-hero__btn,
.tp-slider__btn {
    position: relative !important;
    z-index: 2 !important;
}

.tp-hero__btn a:hover::before {
    width: 300px !important;
    height: 300px !important;
}

.tp-hero__btn a:hover,
.tp-slider__btn a:hover {
    transform: translateY(-5px) scale(1.05) !important;
    box-shadow: 0 15px 40px rgba(62, 213, 152, 0.5) !important;
}

/* Hero Badge */
.tp-hero__badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(62, 213, 152, 0.1) !important;
    border: 1px solid rgba(62, 213, 152, 0.3) !important;
    padding: 10px 20px !important;
    border-radius: 50px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #3ED598 !important;
    position: relative !important;
    z-index: 10 !important;
}

.tp-hero__badge .badge-icon {
    font-size: 18px !important;
}

/* Hero Button Wrapper */
.tp-hero__btn-wrapper {
    position: relative !important;
    z-index: 10 !important;
}

/* Secondary Button */
.tp-btn-secondary {
    background: white !important;
    color: #1E293B !important;
    border: 2px solid #E2E8F0 !important;
    padding: 18px 45px !important;
    border-radius: 30px !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08) !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 10 !important;
}

.tp-btn-secondary span,
.tp-btn-secondary i {
    color: #1E293B !important;
}

.tp-btn-secondary:hover {
    background: #3ED598 !important;
    color: white !important;
    border-color: #3ED598 !important;
    transform: translateY(-5px) scale(1.05) !important;
    box-shadow: 0 15px 40px rgba(62, 213, 152, 0.3) !important;
}

.tp-btn-secondary:hover span,
.tp-btn-secondary:hover i {
    color: white !important;
}

/* Ensure all hero content has proper z-index */
.tp-hero__content {
    position: relative !important;
    z-index: 10 !important;
}

.tp-hero__wrapper {
    position: relative !important;
    z-index: 5 !important;
}

/* Hero Image/Illustration */
.tp-hero__thumb,
.tp-slider__thumb {
    position: relative !important;
    z-index: 2 !important;
    animation: fadeInRight 1s ease-out !important;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.tp-hero__thumb img,
.tp-slider__thumb img {
    max-width: 100% !important;
    height: auto !important;
    filter: drop-shadow(0 20px 60px rgba(0,0,0,0.15)) !important;
    animation: floatImage 6s ease-in-out infinite !important;
}

@keyframes floatImage {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(1deg);
    }
}

/* ========================================
   FEATURE CARDS - Green Theme Style
   ======================================== */
.tp-feature__item,
.feature-item,
.feature-card {
    background: white !important;
    border-radius: 20px !important;
    padding: 40px 30px !important;
    box-shadow: 0 5px 25px rgba(0,0,0,0.08) !important;
    transition: all 0.4s ease !important;
    border: 2px solid transparent !important;
    position: relative !important;
    overflow: hidden !important;
}

.tp-feature__item::before,
.feature-item::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 4px !important;
    background: var(--tp-gradient-1) !important;
    transform: scaleX(0) !important;
    transition: transform 0.4s ease !important;
}

.tp-feature__item:hover,
.feature-item:hover,
.feature-card:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 15px 45px rgba(17, 153, 142, 0.2) !important;
    border-color: var(--tp-theme-primary) !important;
}

.tp-feature__item:hover::before,
.feature-item:hover::before {
    transform: scaleX(1) !important;
}

.tp-feature__icon,
.feature-icon {
    width: 70px !important;
    height: 70px !important;
    background: var(--tp-gradient-1) !important;
    border-radius: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 25px !important;
    transition: all 0.3s ease !important;
}

.tp-feature__item:hover .tp-feature__icon,
.feature-item:hover .feature-icon {
    transform: scale(1.1) rotate(5deg) !important;
    box-shadow: 0 8px 20px rgba(17, 153, 142, 0.4) !important;
}

.tp-feature__icon i,
.feature-icon i,
.tp-feature__icon img,
.feature-icon img {
    font-size: 32px !important;
    color: white !important;
    filter: brightness(0) invert(1) !important;
}

.tp-feature__title,
.feature-title {
    color: var(--tp-heading-primary) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    margin-bottom: 15px !important;
    transition: color 0.3s ease !important;
}

.tp-feature__item:hover .tp-feature__title,
.feature-item:hover .feature-title {
    color: var(--tp-theme-primary) !important;
}

.tp-feature__text,
.feature-text {
    color: var(--tp-text-body) !important;
    line-height: 1.8 !important;
    font-size: 15px !important;
    margin-bottom: 20px !important;
}

.tp-feature__link,
.feature-link {
    color: var(--tp-theme-primary) !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.3s ease !important;
}

.tp-feature__link:hover,
.feature-link:hover {
    color: var(--tp-theme-secondary) !important;
    gap: 12px !important;
}

.tp-feature__link i,
.feature-link i {
    transition: transform 0.3s ease !important;
}

.tp-feature__link:hover i,
.feature-link:hover i {
    transform: translateX(5px) !important;
}

/* Feature Section Title */
.tp-feature__section-box h3,
.feature-section-title {
    color: var(--tp-heading-secondary) !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
}

.tp-feature__area,
.feature-area {
    background: white !important;
    padding: 100px 0 !important;
}

/* Section Titles */
.tp-section-title,
.tp-section-title-sm {
    color: var(--tp-heading-secondary);
    font-weight: 700;
}

.tp-section-title {
    font-size: 42px;
}

.tp-section-title-sm {
    font-size: 36px;
}

/* Pricing Cards - Already styled in pricings.blade.php */
.tp-price__area {
    background: var(--tp-gradient-2);
    padding: 100px 0;
}

/* ========================================
   TESTIMONIALS - Professional Style
   ======================================== */
.tp-testimonial__area,
.tp-testimonial__area.grey-bg,
div.grey-bg {
    background: #ffffff !important;
    padding: 100px 0 !important;
}

.tp-testimonial__title-box h3,
.tp-testimonial__title-box .tp-section-title {
    color: #1a1a1a !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
}

.tp-testimonial__thumb img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 20px !important;
}

.tp-testimonial__item {
    background: #f5f3ed !important;
    border-radius: 15px !important;
    padding: 25px !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05) !important;
    border: 2px solid transparent !important;
    transition: all 0.3s ease !important;
    margin-bottom: 20px !important;
}

.tp-testimonial__item:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(17, 153, 142, 0.2) !important;
    border-color: #11998e !important;
    background: white !important;
}

.tp-testimonial__icon {
    margin-right: 20px !important;
}

.tp-testimonial__icon img {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    border: 3px solid #11998e !important;
    object-fit: cover !important;
}

.tp-testimonial__content p {
    color: #4a5568 !important;
    line-height: 1.8 !important;
    margin-bottom: 15px !important;
    font-size: 15px !important;
}

.tp-testimonial__title-sm {
    color: #1a1a1a !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    margin: 0 !important;
}

.tp-testimonial__title-sm span {
    color: #11998e !important;
    font-weight: 400 !important;
    font-size: 14px !important;
}

.tp-testimonial__rating i {
    color: #ffc107 !important;
    font-size: 16px !important;
}

/* About Page Sections */
.about-inner__area {
    background: white !important;
}

.about-inner__subtitle {
    color: #3ED598 !important;
    font-weight: 600 !important;
}

.about-inner__content-item span {
    background: linear-gradient(135deg, #3ED598 0%, #42D6C0 100%) !important;
    color: white !important;
}

.about-inner__list li i {
    color: #3ED598 !important;
}

.tp-service__area.grey-bg {
    background: #F2F4F6 !important;
}

.tp-counter-2__area.grey-bg {
    background: #F2F4F6 !important;
}

.tp-team__ml-mr.theme-bg-3 {
    background: #2E6F73 !important;
}

.tp-team__grey-bg.grey-bg {
    background: #F2F4F6 !important;
}

.tp-faq__icon svg path {
    fill: #3ED598 !important;
}

.tp-faq__content a {
    background: linear-gradient(135deg, #3ED598 0%, #42D6C0 100%) !important;
    color: white !important;
    padding: 12px 30px !important;
    border-radius: 25px !important;
    display: inline-block !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.tp-faq__content a:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 25px rgba(62, 213, 152, 0.4) !important;
}

/* FAQ Section */
.tp-faq__area,
.tp-support__area {
    background: #F9FAFB !important;
    padding: 100px 0 !important;
}

.tp-support__area.grey-bg {
    background: #F9FAFB !important;
}

.accordion-items {
    margin-bottom: 15px !important;
}

.accordion-buttons,
.accordion-button {
    background: linear-gradient(135deg, #3ED598 0%, #42D6C0 100%) !important;
    color: white !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    padding: 20px 25px !important;
    border: none !important;
    border-radius: 50px !important;
    box-shadow: 0 5px 15px rgba(62, 213, 152, 0.3) !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

.accordion-buttons:hover,
.accordion-button:hover {
    background: linear-gradient(135deg, #42D6C0 0%, #3ED598 100%) !important;
    box-shadow: 0 8px 25px rgba(62, 213, 152, 0.4) !important;
    transform: translateY(-2px) !important;
}

.accordion-buttons::after,
.accordion-button::after {
    content: '▼' !important;
    background-image: none !important;
    font-size: 14px !important;
    color: white !important;
    transition: transform 0.3s ease !important;
    flex-shrink: 0 !important;
    margin-left: 15px !important;
}

.accordion-buttons:not(.collapsed)::after,
.accordion-button:not(.collapsed)::after {
    transform: rotate(180deg) !important;
}

.accordion-body {
    background: white !important;
    padding: 25px !important;
    border-radius: 0 0 20px 20px !important;
    color: #475569 !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    margin-top: -10px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important;
}

/* ========================================
   FOOTER STYLING - Dark Slate Professional
   ======================================== */
.tp-footer__area,
.tp-footer-area,
.footer-area {
    background: #1E293B !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
    padding: 80px 0 30px !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Header/Navigation */
.tp-header__area,
.header-area {
    background: #1E293B !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    padding: 15px 0 !important;
}

/* Logo Spacing */
.tp-header__logo,
.header-logo,
.tp-logo {
    padding-left: 30px !important;
}

@media (max-width: 768px) {
    .tp-header__logo,
    .header-logo,
    .tp-logo {
        padding-left: 15px !important;
    }
}

.tp-footer__content .tp-section-title {
    color: white !important;
}

.tp-footer__content p {
    color: rgba(255,255,255,0.8) !important;
    font-size: 16px !important;
}

/* Footer images should not cover content */
.tp-footer__area img,
.tp-footer-area img,
.footer-area img {
    position: relative !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Footer links and buttons should be clickable */
.tp-footer__link,
.tp-footer__link a,
.tp-footer__social,
.tp-footer__social a,
.footer-link,
.footer-link a,
.footer-social,
.footer-social a {
    position: relative !important;
    z-index: 100 !important;
    pointer-events: auto !important;
}

.tp-footer__widget-title,
.footer-widget-title {
    color: white !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-bottom: 25px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.tp-footer__link ul,
.footer-link ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.tp-footer__link ul li a,
.footer-link ul li a {
    color: rgba(255,255,255,0.7) !important;
    transition: all 0.3s !important;
    display: block !important;
    padding: 8px 0 !important;
    font-size: 14px !important;
}

.tp-footer__link ul li a:hover,
.footer-link ul li a:hover {
    color: #3ED598 !important;
    padding-left: 8px !important;
}

.tp-footer__social a,
.footer-social a {
    width: 40px !important;
    height: 40px !important;
    background: rgba(255,255,255,0.1) !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    margin-right: 10px !important;
    transition: all 0.3s !important;
    font-size: 16px !important;
}

.tp-footer__social a:hover,
.footer-social a:hover {
    background: var(--tp-gradient-1) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 5px 15px rgba(17, 153, 142, 0.4) !important;
}

.tp-footer__copyright,
.footer-copyright {
    border-top: 1px solid rgba(255,255,255,0.1) !important;
    padding-top: 30px !important;
    margin-top: 50px !important;
    color: rgba(255,255,255,0.5) !important;
    text-align: center !important;
}

.tp-footer__copyright p,
.footer-copyright p {
    color: rgba(255,255,255,0.5) !important;
    margin: 0 !important;
    font-size: 14px !important;
}

.tp-footer__logo img {
    max-height: 50px !important;
    margin-bottom: 20px !important;
    filter: brightness(0) invert(1) !important;
}

.tp-footer__text,
.footer-text {
    color: rgba(255,255,255,0.7) !important;
    line-height: 1.8 !important;
    font-size: 14px !important;
}

/* Footer Bottom Navigation */
.tp-footer__bottom-menu ul,
.footer-bottom-menu ul {
    display: flex !important;
    justify-content: center !important;
    gap: 30px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 20px 0 0 0 !important;
}

.tp-footer__bottom-menu ul li a,
.footer-bottom-menu ul li a {
    color: rgba(255,255,255,0.6) !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s !important;
}

.tp-footer__bottom-menu ul li a:hover,
.footer-bottom-menu ul li a:hover {
    color: var(--tp-theme-secondary) !important;
}

/* ========================================
   CTA SECTION - "Ready to Launch" Style
   ======================================== */
.tp-cta__area,
.cta-area {
    background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%) !important;
    padding: 80px 0 !important;
    color: white !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
}

.tp-cta__area::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    right: -10% !important;
    width: 400px !important;
    height: 400px !important;
    background: radial-gradient(circle, rgba(17, 153, 142, 0.2) 0%, transparent 70%) !important;
    border-radius: 50% !important;
}

.tp-cta__title,
.cta-title {
    color: white !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
    position: relative !important;
    z-index: 2 !important;
}

.tp-cta__text,
.cta-text {
    color: rgba(255,255,255,0.8) !important;
    font-size: 18px !important;
    margin-bottom: 35px !important;
    position: relative !important;
    z-index: 2 !important;
}

.tp-cta__btn a,
.cta-btn a {
    background: var(--tp-gradient-1) !important;
    color: white !important;
    padding: 15px 40px !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: inline-block !important;
    margin: 0 10px !important;
    box-shadow: 0 8px 25px rgba(17, 153, 142, 0.4) !important;
    transition: all 0.3s !important;
    position: relative !important;
    z-index: 2 !important;
}

.tp-cta__btn a:hover,
.cta-btn a:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 35px rgba(17, 153, 142, 0.5) !important;
}

.tp-cta__btn a.tp-btn-border,
.cta-btn a.btn-outline {
    background: transparent !important;
    border: 2px solid white !important;
    color: white !important;
}

.tp-cta__btn a.tp-btn-border:hover,
.cta-btn a.btn-outline:hover {
    background: white !important;
    color: var(--tp-theme-primary) !important;
}

/* ========================================
   INTEGRATION SECTION - Dark Animated Style
   ======================================== */
.tp-integration__area,
.integration-area {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%) !important;
    padding: 100px 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

.tp-integration__area::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    right: -20% !important;
    width: 600px !important;
    height: 600px !important;
    background: radial-gradient(circle, rgba(17, 153, 142, 0.1) 0%, transparent 70%) !important;
    border-radius: 50% !important;
    animation: float 20s ease-in-out infinite !important;
}

.tp-integration__area::after {
    content: '' !important;
    position: absolute !important;
    bottom: -30% !important;
    left: -10% !important;
    width: 500px !important;
    height: 500px !important;
    background: radial-gradient(circle, rgba(56, 239, 125, 0.1) 0%, transparent 70%) !important;
    border-radius: 50% !important;
    animation: float 15s ease-in-out infinite reverse !important;
}

.tp-integration__title,
.integration-title {
    color: white !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    text-align: center !important;
    margin-bottom: 60px !important;
    position: relative !important;
    z-index: 2 !important;
}

.tp-integration__item,
.integration-item {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    padding: 40px 30px !important;
    text-align: center !important;
    transition: all 0.4s ease !important;
    position: relative !important;
    z-index: 2 !important;
    animation: floatCard 6s ease-in-out infinite !important;
}

.tp-integration__item:nth-child(2) {
    animation-delay: 1s !important;
}

.tp-integration__item:nth-child(3) {
    animation-delay: 2s !important;
}

.tp-integration__item:nth-child(4) {
    animation-delay: 3s !important;
}

.tp-integration__item:hover,
.integration-item:hover {
    transform: translateY(-15px) scale(1.05) !important;
    box-shadow: 0 20px 50px rgba(17, 153, 142, 0.3) !important;
    border-color: var(--tp-theme-primary) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.tp-integration__icon,
.integration-icon {
    width: 80px !important;
    height: 80px !important;
    margin: 0 auto 20px !important;
    background: var(--tp-gradient-1) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.4s ease !important;
    box-shadow: 0 10px 30px rgba(17, 153, 142, 0.3) !important;
}

.tp-integration__item:hover .tp-integration__icon,
.integration-item:hover .integration-icon {
    transform: rotate(360deg) scale(1.1) !important;
    box-shadow: 0 15px 40px rgba(17, 153, 142, 0.5) !important;
}

.tp-integration__icon img,
.integration-icon img {
    width: 50px !important;
    height: 50px !important;
    object-fit: contain !important;
}

.tp-integration__name,
.integration-name {
    color: white !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-top: 15px !important;
}

.tp-integration__text,
.integration-text {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 14px !important;
    margin-top: 10px !important;
}

/* Floating Animation */
@keyframes float {
    0%, 100% {
        transform: translateY(0) translateX(0);
    }
    50% {
        transform: translateY(-30px) translateX(20px);
    }
}

@keyframes floatCard {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Why Choose Section */
.tp-choose__area {
    background: white;
    padding: 100px 0;
}

.tp-choose__item {
    padding: 30px;
    border-left: 3px solid var(--tp-theme-primary);
    background: var(--tp-grey-1);
    border-radius: 10px;
    margin-bottom: 20px;
    transition: all 0.3s;
}

.tp-choose__item:hover {
    background: white;
    box-shadow: 0 5px 20px rgba(17, 153, 142, 0.1);
}

.tp-choose__icon {
    width: 60px;
    height: 60px;
    background: var(--tp-gradient-1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 28px;
    margin-bottom: 20px;
}

/* Badges & Labels */
.badge-primary {
    background: var(--tp-gradient-1) !important;
}

.badge-success {
    background: var(--tp-theme-secondary) !important;
}

/* Buttons */
.btn-primary {
    background: var(--tp-gradient-1) !important;
    border: none !important;
    color: white !important;
}

.btn-primary:hover {
    background: var(--tp-theme-primary) !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(17, 153, 142, 0.3);
}

.btn-outline-primary {
    border-color: var(--tp-theme-primary) !important;
    color: var(--tp-theme-primary) !important;
}

.btn-outline-primary:hover {
    background: var(--tp-gradient-1) !important;
    color: white !important;
}

/* ========================================
   LINKS - Green Hover Effects
   ======================================== */
a {
    color: var(--tp-theme-primary) !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

a:hover {
    color: var(--tp-theme-secondary) !important;
    text-decoration: none !important;
}

/* Text Links in Content */
p a,
.content a,
.text a {
    color: var(--tp-theme-primary) !important;
    border-bottom: 1px solid transparent !important;
    transition: all 0.3s ease !important;
}

p a:hover,
.content a:hover,
.text a:hover {
    color: var(--tp-theme-secondary) !important;
    border-bottom-color: var(--tp-theme-secondary) !important;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tpfadeUp {
    animation: fadeInUp 0.6s ease-out;
}

/* Responsive */
@media (max-width: 768px) {
    .tp-hero__title {
        font-size: 36px;
    }
    
    .tp-section-title {
        font-size: 32px;
    }
    
    .tp-section-title-sm {
        font-size: 28px;
    }
}

/* ========================================
   LANDING PAGE - VIBRANT COLOR SEQUENCE
   ======================================== */

/* 1. HEADER - Dark Teal Gradient */
/* Already styled above */

/* 2. HERO SECTION - Blue to Pink Gradient */
/* Already styled - Blue (#1e3a8a) to Pink (#ec4899) */

/* 3. BRAND/PARTNER SECTION - White with Green Accent */
.tp-brand__area,
.brand-area {
    background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%) !important;
    padding: 80px 0 !important;
    position: relative !important;
}

.tp-brand__area::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 5px !important;
    background: var(--tp-gradient-1) !important;
}

/* 2. FEATURES - Light Grey */
.tp-feature__area,
.feature-area {
    background: #F2F4F6 !important;
    padding: 100px 0 !important;
}

/* Feature Icons - Font Awesome */
.tp-service__icon i {
    font-size: 48px !important;
    color: #3ED598 !important;
    transition: all 0.3s ease !important;
}

.tp-service__item:hover .tp-service__icon i {
    color: #42D6C0 !important;
    transform: scale(1.1) !important;
}

/* 5. CTA SECTION - White */
.tp-cta__area,
.cta-area {
    background: #ffffff !important;
    padding: 80px 0 !important;
}

/* App Download / CTA Buttons */
.tp-app__thumb-sm,
.tp-footer__thumb {
    display: flex !important;
    gap: 15px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

.tp-app__thumb-sm a,
.tp-footer__thumb-sm a {
    display: inline-block !important;
    transition: all 0.3s ease !important;
}

.tp-app__thumb-sm a:hover,
.tp-footer__thumb-sm a:hover {
    transform: translateY(-5px) !important;
}

.tp-app__thumb-sm img,
.tp-footer__thumb-sm img {
    max-height: 60px !important;
    width: auto !important;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.2)) !important;
    transition: all 0.3s ease !important;
}

.tp-app__thumb-sm img:hover,
.tp-footer__thumb-sm img:hover {
    filter: drop-shadow(0 10px 25px rgba(62, 213, 152, 0.4)) !important;
}

/* 6. WHATSAPP AUTOMATION - Light Beige/Cream */
.tp-about__area,
.about-area,
.tp-appliction__area,
.tp-application__area,
.tp-app__area,
.application-area,
div[class*="appliction"],
div[class*="application"],
div[class*="app__area"] {
    background: var(--tp-gradient-3) !important;
    padding: 100px 0 !important;
}

/* Why Choose Section - Dark Teal */
.tp-choose__area {
    background: var(--tp-theme-primary) !important;
    background: #2E6F73 !important;
    padding: 100px 0 !important;
}

.tp-choose__title-box h3,
.tp-choose__title-box .tp-section-title {
    color: white !important;
    font-size: 42px !important;
    font-weight: 700 !important;
}

.tp-choose__subtitle {
    color: rgba(255,255,255,0.8) !important;
    font-size: 18px !important;
}

.tp-choose__thumb-box {
    margin-top: 40px !important;
}

.tp-choose__thumb-sm {
    margin: 0 10px !important;
}

.tp-choose__thumb-sm img {
    max-width: 180px !important;
    height: auto !important;
    transition: transform 0.3s ease !important;
}

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

/* Force background on parent containers */
section.tp-appliction__area,
section.tp-application__area,
section.tp-app__area,
section[class*="appliction"],
section[class*="application"],
.tp-app__area {
    background: #f5f3ed !important;
}

/* WhatsApp Automation Section Specific */
.tp-appliction__content h3,
.tp-app__content h3,
.application-content h3,
.tp-app__content .tp-section-title {
    color: var(--tp-heading-secondary) !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
}

.tp-appliction__content p,
.tp-app__content p,
.application-content p,
.tp-app__content .text-dark {
    color: var(--tp-text-body) !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
    margin-bottom: 30px !important;
}

.tp-appliction__content h5,
.tp-app__content h4,
.tp-app__title-sm,
.application-content h5 {
    color: var(--tp-heading-primary) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-bottom: 25px !important;
}

.tp-appliction__btn,
.tp-app__download,
.tp-app__thumb-sm,
.application-btn {
    display: flex !important;
    gap: 15px !important;
    flex-wrap: wrap !important;
}

.tp-appliction__thumb img,
.tp-app__thumb img,
.application-thumb img {
    max-width: 100% !important;
    height: auto !important;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.15)) !important;
    animation: phoneFloat 6s ease-in-out infinite !important;
}

@keyframes phoneFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(2deg);
    }
}

/* 7. INTEGRATION - Dark Teal Professional */
.tp-integration__area,
.integration-area {
    background: #2E6F73 !important;
    padding: 100px 0 !important;
    position: relative !important;
}

.tp-integration__title,
.tp-integration__area .tp-section-title {
    color: white !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
}

.tp-integration__subtitle,
.tp-integration__area p {
    color: rgba(255,255,255,0.8) !important;
    font-size: 18px !important;
    line-height: 1.7 !important;
}

.tp-integration__item {
    background: rgba(255,255,255,0.1) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 15px !important;
    padding: 30px !important;
    transition: all 0.3s ease !important;
}

.tp-integration__item:hover {
    background: rgba(255,255,255,0.15) !important;
    border-color: #3ED598 !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(62, 213, 152, 0.2) !important;
}

.tp-integration__icon {
    width: 80px !important;
    height: 80px !important;
    background: white !important;
    border-radius: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 20px !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1) !important;
    transition: all 0.3s ease !important;
}

.tp-integration__item:hover .tp-integration__icon {
    transform: scale(1.1) rotate(5deg) !important;
    box-shadow: 0 10px 30px rgba(62, 213, 152, 0.3) !important;
}

.tp-integration__icon img {
    max-width: 50px !important;
    height: auto !important;
    filter: none !important;
}

/* 8. TESTIMONIAL - White */
.tp-testimonial__area,
.testimonial-area {
    background: #ffffff !important;
    padding: 100px 0 !important;
}

/* 9. PRICING - Light Beige/Cream */
.tp-price__area,
.pricing-area,
.modern-pricing {
    background: #f5f3ed !important;
    padding: 100px 0 !important;
}

/* 10. FAQ - Light Beige/Cream */
.tp-faq__area,
.faq-area {
    background: #f5f3ed !important;
    padding: 100px 0 !important;
}

/* 11. BLOG/NEWS - White */
.tp-blog__area,
.blog-area {
    background: #ffffff !important;
    padding: 100px 0 !important;
}

/* 12. STATS/COUNTER - Dark Teal with Gradient Cards */
.tp-counter__area,
.counter-area,
.tp-funfact__area {
    background: #2E6F73 !important;
    padding: 80px 0 !important;
    position: relative !important;
}

.tp-counter__theme-bg,
.tp-counter__grey-bg {
    display: none !important;
}

.tp-counter__item {
    background: linear-gradient(135deg, #42D6C0, #3ED598) !important;
    border-radius: 15px !important;
    padding: 30px 25px !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2) !important;
    transition: all 0.3s ease !important;
    margin-bottom: 30px !important;
}

.tp-counter__item:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
}

.tp-counter__icon {
    margin-right: 20px !important;
}

.tp-counter__icon img {
    width: 60px !important;
    height: 60px !important;
    object-fit: contain !important;
}

.tp-counter__content span {
    color: #FFFFFF !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    display: block !important;
    line-height: 1 !important;
    margin-bottom: 10px !important;
}

.tp-counter__content p {
    color: #FFFFFF !important;
    font-size: 16px !important;
    margin: 0 !important;
}

.tp-funfact__item h3 {
    color: #1a1a1a !important;
    font-size: 48px !important;
    font-weight: 700 !important;
}

.tp-funfact__item p {
    color: #4a5568 !important;
    font-size: 16px !important;
}

/* 12. FOOTER - Dark Gradient (Already styled) */

/* All Section Titles */
h1, h2, h3, h4, h5, h6 {
    color: var(--tp-heading-primary) !important;
}

.tp-section-title,
.tp-section-title-sm,
.section-title {
    color: var(--tp-heading-secondary) !important;
    font-weight: 700 !important;
}

/* Dark Section Titles (for dark backgrounds) */
.tp-integration__area .tp-section-title,
.tp-cta__area .tp-section-title,
.tp-price__area .tp-section-title,
.tp-footer__area .tp-section-title {
    color: white !important;
}

/* Section Decorative Elements */
.tp-feature__area::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 300px !important;
    height: 300px !important;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.1) 0%, transparent 70%) !important;
    border-radius: 50% !important;
}

.tp-choose__area::before {
    content: '' !important;
    position: absolute !important;
    top: 10% !important;
    left: -5% !important;
    width: 400px !important;
    height: 400px !important;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, transparent 70%) !important;
    border-radius: 50% !important;
}

.tp-testimonial__area::after {
    content: '' !important;
    position: absolute !important;
    bottom: -10% !important;
    right: -5% !important;
    width: 350px !important;
    height: 350px !important;
    background: radial-gradient(circle, rgba(251, 146, 60, 0.15) 0%, transparent 70%) !important;
    border-radius: 50% !important;
}

/* ========================================
   PRICING SECTION - Database Integration
   ======================================== */
.tp-price__area,
.pricing-area {
    background: var(--tp-gradient-2) !important;
    padding: 100px 0 !important;
}

.tp-price__item,
.pricing-item {
    background: rgba(255,255,255,0.05) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 20px !important;
    padding: 40px 30px !important;
    transition: all 0.3s !important;
}

.tp-price__item:hover,
.pricing-item:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 20px 60px rgba(56, 239, 125, 0.3) !important;
    border-color: #38ef7d !important;
}

.tp-price__active,
.pricing-active {
    border: 2px solid #38ef7d !important;
    box-shadow: 0 10px 40px rgba(56, 239, 125, 0.2) !important;
}

.tp-price__icon {
    width: 60px !important;
    height: 60px !important;
    background: var(--tp-gradient-1) !important;
    border-radius: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 20px !important;
    color: white !important;
    font-size: 28px !important;
}

.tp-price__title {
    color: #38ef7d !important;
    font-size: 48px !important;
    font-weight: 700 !important;
}

.tp-price__small_title {
    color: rgba(255,255,255,0.6) !important;
    font-size: 16px !important;
}

.tp-price__list ul li {
    color: rgba(255,255,255,0.8) !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

.tp-price__btn a {
    width: 100% !important;
    padding: 15px !important;
    background: var(--tp-gradient-1) !important;
    border: none !important;
    border-radius: 10px !important;
    color: white !important;
    font-weight: 700 !important;
    transition: all 0.3s !important;
}

.tp-price__btn a:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 30px rgba(56, 239, 125, 0.4) !important;
}

/* ========================================
   BRAND/PARTNER SECTION
   ======================================== */
.tp-brand__item img {
    filter: grayscale(100%) !important;
    opacity: 0.5 !important;
    transition: all 0.3s !important;
}

.tp-brand__item:hover img {
    filter: grayscale(0%) !important;
    opacity: 1 !important;
}

/* ========================================
   CONTACT SECTION
   ======================================== */
.tp-contact__area {
    background: white !important;
}

.tp-contact__form input,
.tp-contact__form textarea,
.contact-form input,
.contact-form textarea {
    border: 2px solid var(--tp-grey-2) !important;
    border-radius: 8px !important;
    padding: 15px 20px !important;
    transition: all 0.3s !important;
}

.tp-contact__form input:focus,
.tp-contact__form textarea:focus,
.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--tp-theme-primary) !important;
    box-shadow: 0 0 0 3px rgba(17, 153, 142, 0.1) !important;
}

.tp-contact__btn button,
.contact-btn button {
    background: var(--tp-gradient-1) !important;
    color: white !important;
    padding: 15px 40px !important;
    border-radius: 8px !important;
    border: none !important;
    font-weight: 600 !important;
}

/* ========================================
   BLOG/POST SECTION
   ======================================== */
.tp-blog__item,
.blog-item {
    background: white !important;
    border-radius: 15px !important;
    overflow: hidden !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05) !important;
    transition: all 0.3s !important;
}

.tp-blog__item:hover,
.blog-item:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(17, 153, 142, 0.15) !important;
}

.tp-blog__btn a,
.blog-btn a {
    color: var(--tp-theme-primary) !important;
    font-weight: 600 !important;
}

.tp-blog__btn a:hover,
.blog-btn a:hover {
    color: var(--tp-theme-secondary) !important;
}

/* ========================================
   TEAM SECTION
   ======================================== */
.tp-team__item,
.team-item {
    background: white !important;
    border-radius: 15px !important;
    overflow: hidden !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05) !important;
    transition: all 0.3s !important;
}

.tp-team__item:hover,
.team-item:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(17, 153, 142, 0.15) !important;
}

.tp-team__social a {
    background: var(--tp-grey-1) !important;
    color: var(--tp-theme-primary) !important;
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: all 0.3s !important;
}

.tp-team__social a:hover {
    background: var(--tp-gradient-1) !important;
    color: white !important;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--tp-grey-1);
}

::-webkit-scrollbar-thumb {
    background: var(--tp-gradient-1);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--tp-theme-primary);
}

/* ========================================
   UTILITY CLASSES
   ======================================== */
.text-green {
    color: var(--tp-theme-primary) !important;
}

.bg-green {
    background: var(--tp-gradient-1) !important;
}

.border-green {
    border-color: var(--tp-theme-primary) !important;
}

/* Loading Spinner */
.spinner-border {
    border-color: var(--tp-theme-primary) !important;
    border-right-color: transparent !important;
}