@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

:root {
    --primary: #3ba591;
    --primary-dark: #2e8a78;
    --primary-light: #5cc4b0;
    --orange: #e94d65;
    --blue: #0082f1;
    --dark: #15161a;
    --dark-light: #1c2024;
    --white: #ffffff;
    --gray: #555;
    --light-gray: #ebebeb;
    --font: 'Poppins', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ============ FIXES ============ */
/* Fix navbar overlap */
main {
    padding-top: 80px;
    position: relative;
    z-index: 1;
}

/* Page hero spacing */
.page-hero {
    padding: 120px 0 60px;
    position: relative;
    z-index: 1;
}

/* Fix sticky sidebar overlap */
.sticky-top {
    z-index: 10;
}

/* Fix container overflow */
body {
    overflow-x: hidden;
}
html {
    scroll-behavior: smooth;
}

/* Fix navbar z-index */
.navbar {
    z-index: 1030;
}

/* Fix all sections to be visible */
section, .container, .row, .col-lg-8, .col-lg-6, .col-md-6, .col-12 {
    position: relative;
    z-index: 1;
}

/* Fix images */
img {
    max-width: 100%;
    height: auto;
}

/* Fix 5-column grid */
@media (min-width: 768px) {
    .col-md-2-4 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}
@media (max-width: 767px) {
    .col-md-2-4 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 15px;
    }
}

/* Fix form inputs */
.form-control {
    border: 1px solid #ddd;
    padding: 12px;
}
.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem rgba(59, 165, 145, 0.25);
}

/* Fix carousel */
.carousel {
    position: relative;
    z-index: 1;
}
.carousel-inner {
    position: relative;
    z-index: 1;
}

/* ============ END FIXES ============ */

body {
    font-family: var(--font);
    font-size: 15px;
    color: #000;
    font-weight: 400;
    line-height: 1.7;
}

/* Navbar */
.navbar {
    background: rgba(21, 22, 26, 0.95) !important;
    backdrop-filter: blur(10px);
    padding: 0.5rem 0;
}

/* Navbar logo */
.navbar-brand img {
    background: rgba(255, 255, 255, 0.85);
    padding: 2px 6px;
    border-radius: 3px;
    height: 32px;
    width: auto;
}
.brand-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
}

.nav-link {
    font-weight: 500;
    color: #ccc !important;
    transition: 0.3s;
}
.nav-link:hover, .nav-link.active { color: var(--primary) !important; }

/* Buttons */
.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    font-weight: 600;
    font-size: 15px;
    padding: 10px 28px;
    border-radius: 5px;
    transition: 0.3s;
}
.btn-primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}
.btn-outline-primary {
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
}
.btn-outline-primary:hover {
    background: var(--primary);
    color: var(--white);
}

/* Hero / Page Hero */
.page-hero, .bg-gradient-primary {
    background: var(--dark) !important;
    color: #ffffff !important;
}
.page-hero h1, .page-hero p, .page-hero .lead,
.bg-gradient-primary h1, .bg-gradient-primary p, .bg-gradient-primary .lead {
    color: #ffffff !important;
}
.page-hero .text-primary {
    color: var(--primary) !important;
}

/* Cards & Features */
.feature-card, .service-card, .card {
    border-radius: 8px;
    transition: 0.3s;
}
.feature-card:hover, .service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.service-card.highlighted-card {
    border: 2px solid var(--primary);
    background: #f0faf7;
}

/* Feature icons */
.feature-icon-wrapper {
    width: 70px; height: 70px;
    background: #e8f5f1;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto;
}
.feature-icon-wrapper i { font-size: 1.8rem; color: var(--primary); }

/* Section Titles */
h2, .title { font-size: 36px; font-weight: 700; color: #000; }
h3 { font-size: 22px; font-weight: 600; }
.sub-text { color: var(--primary); font-weight: 600; font-size: 15px; text-transform: uppercase; }

/* Services items */
.services-item {
    padding: 25px;
    transition: 0.3s;
}
.services-item:hover { background: #f9f9f9; }

/* Testimonials */
.testimonial-section { background: var(--dark); }

/* Footer */
footer {
    background: var(--dark);
    font-size: 14px;
}
footer h5 { 
    color: #ffffff !important; 
    font-weight: 600; 
    margin-bottom: 20px; 
}
footer a { 
    color: #cccccc !important; 
    text-decoration: none; 
}
footer a:hover { 
    color: var(--primary) !important; 
}
footer p, footer li, footer .text-muted { 
    color: #cccccc !important; 
}
footer .bi { 
    color: var(--primary); 
}
footer hr { 
    border-color: rgba(255,255,255,0.1); 
}
footer .social-links a {
    color: #ffffff !important;
    transition: 0.3s;
}
footer .social-links a:hover {
    color: var(--primary) !important;
}
/* Badges */
.badge.bg-success { background: var(--primary) !important; }
.badge.bg-primary { background: var(--blue) !important; }

/* Scroll to top */
.scroll-to-top {
    background: var(--primary);
    color: var(--white);
    border: none;
    width: 45px; height: 45px;
    border-radius: 50%;
    position: fixed; bottom: 20px; right: 20px;
    cursor: pointer;
    z-index: 1000;
    opacity: 0; visibility: hidden;
    transition: 0.3s;
    font-size: 20px;
}
.scroll-to-top.visible { opacity: 1; visibility: visible; }

/* Hero Carousel */
.carousel-item { transition: 0.6s; }
.sl-subtitle { font-size: 18px; font-weight: 500; }
.sl-title { font-size: 20px; font-weight: 400; }

/* Technologies */
.tech-card { padding: 20px; text-align: center; }

/* Featured badge */
.featured-badge {
    position: absolute; top: 10px; right: 10px;
    background: var(--orange);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    z-index: 1;
}

/* Step Numbers */
.step-number {
    width: 50px; height: 50px;
    background: var(--primary);
    color: var(--white);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; font-weight: 700;
}

/* 5 columns for approach */
@media (min-width: 768px) {
    .col-md-2-4 { flex: 0 0 20%; max-width: 20%; }
}

/* Responsive */
@media (max-width: 768px) {
    main {
        padding-top: 60px;
    }
    .page-hero {
        padding: 100px 0 40px;
    }
    .display-4 {
        font-size: 1.8rem !important;
    }
    .carousel-item > div {
        height: 400px !important;
    }
    .page-hero h1 { font-size: 32px; }
    h2 { font-size: 28px; }
}
    
/* CTA Section */
.cta-section {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--white);
}
.btn-light {
    background: var(--white);
    color: var(--primary);
    font-weight: 600;
}

/* Animations */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp 0.6s ease-out; }

/* Product page fixes */
.product-hero {
    padding-top: 100px;
}
.feature-box {
    margin-bottom: 20px;
    word-wrap: break-word;
}
.ai-feature-card {
    word-wrap: break-word;
}
.step-card {
    min-height: 200px;
}
.pricing-banner {
    word-wrap: break-word;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    color: #ffffff !important;
}
.pricing-banner h2, 
.pricing-banner h3, 
.pricing-banner p,
.pricing-banner .fw-bold {
    color: #ffffff !important;
}

/* Prevent text overflow */
p, h1, h2, h3, h4, h5, h6, li, span, a {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Card body overflow fix */
.card-body {
    word-wrap: break-word;
}

/* Feature list items */
.feature-list li {
    word-wrap: break-word;
    padding: 8px 0;
}