@charset "UTF-8";
/* CSS Document */

@import url("bootstrap.min.css");
@import url("colors.css");
@import url("colorbox.css");
@import url("font-awesome.min.css");
@import url("animate.min.css");
@import url("layout.css");
@import url("grid.css");

/* =========================================
   SERVICES PAGE - THEME CONSISTENT UPGRADE
   (matches existing teal/dark portfolio style)
   ========================================= */

/* General refinement (DO NOT override layout system) */
body {
    font-family: "PT Sans", "Raleway", sans-serif;
    color: #2b2b2b;
}

/* Improve section spacing without breaking grid */
#what-is-seo-info,
#card-section,
.parallax {
    padding-top: 80px;
    padding-bottom: 80px;
}

/* =========================
   HERO (keep original style, refine only)
   ========================= */

#services-slider-container {
    position: relative;
}

#services-slider-caption h1 {
    font-size: 2.8rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: none;
    letter-spacing: 0.5px;
}

#services-slider-caption .highlights {
    color: #00dbd5;
}

/* soften background overlay feel */
#services-slider-bg {
    opacity: 0.9;
}

/* =========================
   INTRO SECTION (cleaner split layout)
   ========================= */

#what-is-seo-text {
    padding: 20px 40px;
    text-align: left;
}

#what-is-seo-text h2 {
    font-size: 2rem;
    margin-bottom: 15px;
    color: #111;
}

#what-is-seo-text p {
    font-size: 1rem;
    color: #444;
    line-height: 1.7;
}

/* image refinement (keeps your style) */
#seo-img {
    max-width: 90%;
    border-radius: 6px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* =========================
   CTA BUTTON (match your teal palette)
   ========================= */

#services-contact-btn {
    background: #00bab1;
    color: #fff;
    border: none;
    padding: 10px 22px;
    font-weight: 600;
    letter-spacing: 0.3px;
    border-radius: 2px;
    transition: all 0.25s ease;
}

#services-contact-btn:hover {
    background: #00dbd5;
    transform: translateY(-2px);
}

/* =========================
   PARALLAX SECTION (match existing dark theme)
   ========================= */

.parallax {
    background: linear-gradient(135deg, #0b0f14, #121a22);
    color: #fff;
    text-align: center;
}

.parallax h2 {
    font-size: 1.8rem;
    font-weight: 600;
    max-width: 900px;
    margin: 0 auto;
    color: #e6e6e6;
}

/* =========================
   SERVICE CARDS (IMPORTANT IMPROVEMENT)
   ========================= */

#card-section {
    background: #f4f6f8;
}

.card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 3px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    transition: all 0.25s ease;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
    border-color: rgba(0,186,177,0.3);
}

/* card titles match site style */
.card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111;
    margin-top: 10px;
}

/* badge tweak to match teal palette */
.badge.bg-primary {
    background: #00bab1;
}

/* card text readability */
.card-text {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* lists inside cards */
.card ul {
    margin-top: 10px;
    padding-left: 18px;
}

.card ul li {
    margin-bottom: 5px;
    color: #333;
}

/* =========================
   CONTACT SECTION (match dark header/footer theme)
   ========================= */

#contact {
    background: linear-gradient(135deg, #0b0f14, #111a22);
    color: #fff;
}

#contact h2,
#contact h3 {
    color: #fff;
}

.contact-info li {
    color: #cfcfcf;
}

/* inputs styled to match theme */
#contact-form input,
#contact-form textarea {
    background: #0f1720;
    border: 1px solid rgba(255,255,255,0.08);
    color: #fff;
    border-radius: 3px;
}

#contact-form input:focus,
#contact-form textarea:focus {
    border-color: #00bab1;
    outline: none;
}

/* submit button matches CTA */
#contact-form button {
    background: #00bab1;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 3px;
    transition: 0.2s ease;
}

#contact-form button:hover {
    background: #00dbd5;
}

/* =========================
   MOBILE FIXES (important for readability)
   ========================= */

@media (max-width: 768px) {

    #services-slider-caption h1 {
        font-size: 1.9rem;
        padding: 0 10px;
    }

    #what-is-seo-text {
        padding: 20px;
        text-align: center;
    }

    .parallax h2 {
        font-size: 1.3rem;
        padding: 0 15px;
    }

    .card {
        margin-bottom: 20px;
    }
}