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

/* =========================================
   variable Overrides (Dark -> Light Conversion)
   ========================================= */
:root {
    /* --- Core Palette Conversion --- */
    --theme: #fb6408 !important;
    /* Was Green #BFF747 -> Electra Orange */
    --theme-hover: #fead03 !important;
    /* Electra Light Yellow */

    /* --- Backgrounds (Inverting Dark Mode) --- */
    --body: #ffffff !important;
    --bg: #ffffff !important;
    --bg-2: #fffbf2 !important;
    /* Electra Cream/Light Overlay */

    /* --- Typography (Inverting for Light Mode) --- */
    --header: #111111 !important;
    --text: #333333 !important;
    --white: #ffffff !important;
    --black: #000000 !important;

    /* --- Borders --- */
    --border: #f3d090 !important;
    /* Light Beige Border */
    --border-2: #fb6408 !important;
    --border-3: rgba(251, 100, 8, 0.1) !important;

    /* --- Shadows --- */
    --box-shadow: 0px 10px 30px 0px rgba(251, 100, 8, 0.08) !important;
}

/* =========================================
   Base Resets & Specific Fixes
   ========================================= */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
li,
button,
input,
textarea,
label {
    font-family: 'Poppins', sans-serif !important;
}

.fa,
.fas,
.far,
.fal,
.fa-solid,
.fa-regular,
.fa-light,
.fa-thin,
.fa-duotone,
i[class^="fa-"]:not(.fab):not(.fa-brands):not([class*="fa-whatsapp"]):not([class*="fa-instagram"]):not([class*="fa-linkedin"]):not([class*="fa-facebook"]):not([class*="fa-x-twitter"]):not([class*="fa-youtube"]):not([class*="fa-twitter"]):not([class*="fa-tiktok"]),
i[class*=" fa-"]:not(.fab):not(.fa-brands):not([class*="fa-whatsapp"]):not([class*="fa-instagram"]):not([class*="fa-linkedin"]):not([class*="fa-facebook"]):not([class*="fa-x-twitter"]):not([class*="fa-youtube"]):not([class*="fa-twitter"]):not([class*="fa-tiktok"]) {
    font-family: "Font Awesome 6 Pro" !important;
}

.fab,
.fa-brands,
[class*="fa-whatsapp"],
[class*="fa-instagram"],
[class*="fa-linkedin"],
[class*="fa-facebook"],
[class*="fa-x-twitter"],
[class*="fa-youtube"],
[class*="fa-twitter"],
[class*="fa-tiktok"] {
    font-family: "Font Awesome 6 Brands" !important;
}

body {
    background-color: var(--body);
    color: var(--text);
}

/* Fix Headings */
h1,
h2,
h3,
h4,
h5,
h6,
.section-title h2 {
    color: var(--header);
}

/* Fix Paragraphs */
p {
    color: var(--text);
}

/* =========================================
   Homepage Tagline Styles
   ========================================= */
.tagline-top {
    display: block;
    color: #fb6408 !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 2px;
    margin-bottom: 15px;
    font-family: 'Poppins', sans-serif !important;
}

@media (max-width: 767px) {
    .tagline-top {
        font-size: 14px;
        letter-spacing: 1px;
    }
}

/* =========================================
   Section Backgrounds (Alternating)
   ========================================= */
.section-bg,
.experience-section-2,
.client-section {
    background-color: #fff !important;
    /* Cream background for contrast sections */
}

/* =========================================
   Hero Section Exceptions (Keep Dark/Video)
   ========================================= */
.hero-section {
    position: relative;
    /* Ensure no white background covers the video */
    background: transparent !important;
    color: #ffffff !important;
}

/* Force headings and text in Hero to be White */
.hero-section h1,
.hero-section h2,
.hero-section h3,
.hero-section p,
.hero-section span,
.hero-section .hero-content-wrappers h1 {
    color: #ffffff !important;
}

/* Ensure the overlay is present to read white text */
.hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6) !important;
    /* Dark overlay */
    z-index: 0;
}

.hero-video-bg {
    z-index: -1;
}

/* Ensure content sits above overlay */
.hero-section .container,
.hero-section .hero-content {
    position: relative;
    z-index: 2;
}

/* =========================================
   Component Overrides
   ========================================= */

/* Buttons */
.theme-btn {
    background: var(--theme);
    color: #fff !important;
}

.theme-btn:hover {
    background: var(--theme-hover);
    color: #fff !important;
}

.theme-btn::before {
    background-color: var(--theme-hover);
    /* Hover fill effect */
}

/* Service Cards (White BG, Orange Icons) */
.service-card-items-2 {
    background-color: #ffffff;
    border: 1px solid var(--border);
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.05);
}

.service-card-items-2 h4 a {
    color: var(--header);
}

.service-card-items-2 p {
    color: var(--text);
}

.service-card-items-2 .icon i,
.service-card-items-2 .icon img {
    color: var(--theme);
    filter: none;
    transition: all 0.4s ease-in-out;
}

/* Service Card Icon Hover Refinement */
.service-card-items-2 {
    transition: all 0.4s ease-in-out;
}

.service-card-items-2 .icon {
    transition: all 0.4s ease-in-out;
}

.service-card-items-2:hover .icon {
    background-color: var(--theme) !important;
}

.service-card-items-2:hover .icon i {
    color: #ffffff !important;
}

.service-card-items-2:hover .icon img {
    filter: brightness(0) invert(1) !important;
}

/* =========================================
   Our Development Process (Work Section)
   ========================================= */
.work-wrapper .work-items .icon {
    background-color: var(--theme) !important;
    transition: all 0.4s ease-in-out;
    display: flex;
    /* Centering numbers */
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 24px;
    font-weight: 800;
    font-family: 'Big Shoulders Display', sans-serif;
}

.work-wrapper .work-items .icon img {
    filter: brightness(0) invert(1) !important;
    /* Make SVG white */
    transition: all 0.4s ease-in-out;
}

.work-wrapper .work-items:hover .icon {
    background-color: #ffffff !important;
    border: 1px solid var(--theme);
    color: var(--theme) !important;
}

.work-wrapper .work-items:hover .icon img {
    /* Filter for #fb6408 (Orange) from white */
    filter: invert(48%) sepia(99%) saturate(3362%) hue-rotate(346deg) brightness(101%) contrast(98%) !important;
}

/* About Section & Emphasis Cards */
.about-section {
    background-color: var(--bg-2) !important;
    /* Cream */
}

.about-bg-box {
    background-color: var(--theme) !important;
    /* Orange Background */
    color: #ffffff !important;
    border-radius: 24px;
}

.about-bg-box h3 {
    color: #ffffff !important;
    /* White Text */
}

/* Experience/Technologies */
/* Experience/Technologies Unified Styles */
.experience-wrapper-2 .skill-list li,
.tech-item {
    background: #ffffff;
    border: 1px solid var(--border);
    color: var(--header);
    padding: 12px 20px;
    border-radius: 12px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    cursor: default;
}

.experience-wrapper-2 .skill-list li i,
.tech-item i {
    font-size: 1.25rem;
    color: var(--theme);
    transition: all 0.3s ease;
}

/* Refined Professional Hover Behavior */
.experience-wrapper-2 .skill-list li:hover,
.tech-item:hover {
    background-color: var(--bg-2) !important;
    /* Soft highlight */
    color: var(--theme);
    border-color: var(--theme);
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 10px 20px rgba(251, 100, 8, 0.1);
}

.experience-wrapper-2 .skill-list li:hover i,
.tech-item:hover i {
    transform: scale(1.15);
    color: var(--theme-hover);
}

/* Helper for lists */
.tech-list-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    list-style: none;
}

.tech-tag {
    background: var(--bg-2);
    border: 1px solid var(--border);
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    color: var(--header);
    transition: all 0.3s ease;
}

.tech-tag:hover {
    background: var(--theme);
    color: #fff;
    border-color: var(--theme);
    transform: translateY(-2px);
}

/* Footer (Modern & Professional) */
.footer-section {
    background-color: #111111 !important;
    padding-top: 100px;
    padding-bottom: 40px;
}

.footer-section p,
.footer-section li,
.footer-section span {
    color: #bbbbbb !important;
    font-size: 15px;
}

.footer-section a {
    color: #bbbbbb !important;
    transition: all 0.3s ease-in-out;
}

.footer-section a:hover {
    color: var(--theme) !important;
}

.footer-section h3,
.footer-section .widget-head h3 {
    color: #ffffff !important;
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 25px;
}

.footer-social-icon {
    display: flex;
    gap: 12px;
    padding-top: 10px;
}

.footer-social-icon a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-social-icon a:hover {
    background: var(--theme) !important;
    border-color: var(--theme) !important;
    color: #ffffff !important;
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(251, 100, 8, 0.2);
}

/* Unified Tag & Tool Card Transitions */
.vs-tag-item,
.transition-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: default;
}

.vs-tag-item:hover,
.transition-hover:hover {
    border-color: var(--theme) !important;
    background-color: var(--bg-2) !important;
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 30px rgba(251, 100, 8, 0.1) !important;
}

.vs-tag-item:hover i,
.transition-hover:hover i {
    color: var(--theme) !important;
    transform: scale(1.1);
}

.footer-section .list-area li {
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
}

.footer-section .list-area li i {
    color: var(--theme);
    margin-top: 5px;
    margin-right: 12px;
    font-size: 14px;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 30px;
    margin-top: 60px;
}

/* General Link Hover */
a:hover {
    color: var(--theme) !important;
}

/* Scroll To Top */
.back-to-top {
    background-color: var(--theme) !important;
    color: #ffffff !important;
}

/* Header Sticky */
.header-1.sticky {
    background-color: #ffffff !important;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}

.header-1.sticky .main-menu ul li a {
    color: #111 !important;
}

/* Form Inputs */
input,
textarea,
.nice-select {
    background-color: #ffffff !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

input:focus,
textarea:focus {
    border-color: var(--theme) !important;
}

/* =========================================
   Final Visual Adjustments (Orange Enforcements)
   ========================================= */

/* --- Header --- */
/* Menu background (Orange behind links) */
.header-main .main-menu {
    background-color: var(--theme);
    padding: 10px 30px;
    border-radius: 50px;
    /* Pill shape */
}

/* Ensure links on orange are white */
.header-main .main-menu ul li a {
    color: #ffffff !important;
}

/* "Let's Talk" Button */
.theme-btn.style-2 {
    background-color: var(--theme);
    border-color: var(--theme);
    color: #ffffff;
}

.theme-btn.style-2:hover {
    background-color: var(--theme-hover);
    border-color: var(--theme-hover);
    color: #ffffff;
}

.header-1.sticky .menu-icon {
    color: var(--theme);
}

/* --- Testimonials / Reviews --- */
.testimonials-item {
    background-color: var(--theme) !important;
    border: none;
}

.testimonials-item p,
.testimonials-item h4,
.testimonials-item span {
    color: #ffffff !important;
}

.testimonials-item .icon i,
.testimonials-item .star i {
    color: #ffffff !important;
    /* White stars/icons for contrast */
}

/* --- FAQs --- */
.accordion-item {
    background-color: var(--theme) !important;
    border: none;
}

.accordion-button {
    background-color: transparent !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
    color: #ffffff !important;
    background-color: transparent !important;
}

.accordion-button::after {
    filter: brightness(0) invert(1);
    /* Make arrow white */
}

.accordion-body {
    color: #ffffff !important;
}

/* --- Contact Form --- */
.contact-form,
.contact-box {
    background-color: var(--theme) !important;
    border-radius: 20px;
    padding: 40px;
}

.contact-form h3 {
    color: #ffffff !important;
}

/* Keep inputs white */
.contact-form input,
.contact-form textarea {
    background-color: #ffffff !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

.contact-form button {
    background-color: #ffffff !important;
    color: var(--theme) !important;
    /* Invert button on orange bg */
}

.contact-form button:hover {
    background-color: var(--bg-2) !important;
    color: var(--theme) !important;
}

/* --- Marquee / Infinite Text --- */
.marquee-text h3 {
    -webkit-text-stroke: 1px var(--theme);
    /* Orange stroke */
    color: transparent;
    /* if outline style */
}

/* OR if solid text is preferred */
.marquee-text h3 {
    color: var(--header);
    /* Default black */
    -webkit-text-stroke: 0px;
}

/* If the user wanted the marquee to be the theme color? */
/* "Carousel displaying Electra services dynamically" */
/* We'll stick to default style but ensure readability */

/* General Fixes */
.theme-btn {
    color: #ffffff !important;
}

/* Main Menu Style 2 Overrides */
.main-menu.style-2 {
    background-color: #fb6408 !important;
    /* Primary Orange */
    border-radius: 100px !important;
}

/* Top level links - white */
.main-menu.style-2>nav>ul>li>a {
    color: #ffffff !important;
}

.main-menu.style-2>nav>ul>li:hover>a,
.main-menu.style-2>nav>ul>li.active>a {
    color: #ffffff !important;
    opacity: 1;
}

/* Submenu background */
.main-menu.style-2 .submenu {
    background-color: #fb6408 !important;
}

.main-menu.style-2 .submenu li a {
    color: #ffffff !important;
}

.main-menu.style-2 .submenu li:hover>a {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

.main-menu.style-2 .submenu li.has-dropdown>a::after {
    color: #ffffff !important;
}

/* Mobile menu adjustments */
.mean-container .mean-bar {
    background-color: #fb6408 !important;
}


/* Experience/Technologies Column Margin Fix */
.experience-wrapper-2 .skill-list {
    margin-bottom: 20px;
}

/* FAQ answer background */
.faq-section .accordion-body {
    background-color: rgba(251, 100, 8, 0.05) !important;
    /* Very light orange highlight */
    color: var(--header);
    border-radius: 0 0 10px 10px;
    padding: 20px 30px;
}

.faq-section .accordion-item {
    overflow: hidden;
}

/* Software House Page - Unique Components */
.sh-section {
    padding: 120px 0;
}

/* 1. Immersive Intro */
.factory-intro {
    background: #0d0d0d;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    padding: 160px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 500px;
}

.factory-intro::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(13, 13, 13, 0.8), rgba(13, 13, 13, 0.4), rgba(13, 13, 13, 0.8));
    z-index: 1;
}

.factory-intro .container {
    position: relative;
    z-index: 2;
}

.factory-intro h1 {
    font-size: 4rem;
    font-weight: 800;
    color: #fff !important;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 30px;
}

.factory-intro p {
    font-size: 1rem;
    color: #ccc !important;
    max-width: 800px;
    margin: 0 auto;
}

.tech-shape-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.tech-circle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251, 100, 8, 0.15) 0%, rgba(251, 100, 8, 0) 70%);
}

.circle-1 {
    width: 600px;
    height: 600px;
    top: -200px;
    right: -200px;
}

.circle-2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -100px;
}

/* 2. Software Factory Concept */
.factory-concept .diagram-box {
    background: var(--bg-2);
    border-radius: 30px;
    padding: 40px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
}

.factory-concept .content-box h2 {
    font-size: 2rem;
    margin-bottom: 25px;
}

/* 3. Lifecycle Timeline */
.lifecycle-timeline-wrap {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding-top: 40px;
}

.lifecycle-timeline-wrap::before {
    content: '';
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--border);
    z-index: 0;
}

.lifecycle-item {
    text-align: center;
    flex: 1;
    position: relative;
    z-index: 1;
}

.lifecycle-item .step-num {
    width: 44px;
    height: 44px;
    background: var(--theme);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-weight: 700;
}

/* 4. Services Matrix */
.services-matrix-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
}

.matrix-card {
    background: #fff;
    border: 1px solid var(--border);
    padding: 30px;
    border-radius: 20px;
    transition: all 0.3s ease;
    height: 100%;
}

.matrix-card:hover {
    border-color: var(--theme);
    transform: translateY(-5px);
    box-shadow: var(--box-shadow);
}

.matrix-card .icon {
    font-size: 2rem;
    color: var(--theme);
    margin-bottom: 15px;
}

/* 5. Dedicated Team */
.team-model-box {
    background: #111;
    color: #fff;
    border-radius: 40px;
    padding: 60px;
}

.team-role-card {
    background: rgba(255, 255, 255, 0.05);
    padding: 25px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 20px;
    height: 180px;
}

/* ==========================================================================
   VIRTUAL STORE (E-COMMERCE) PAGE STYLES
   ========================================================================== */

.vs-section {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

/* 1. VS Hero */
.vs-hero {
    background: #f8f9fa;
    padding: 150px 0 100px;
    position: relative;
}

.vs-hero h1 {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.1;
    color: #1a1a1a;
    margin-bottom: 25px;
}

.vs-hero .support-tags {
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

.vs-hero .support-tag {
    background: white;
    padding: 10px 20px;
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    font-weight: 600;
    font-size: 14px;
    color: var(--theme);
    border: 1px solid #eee;
}

/* 2. Ownership Flow */
.vs-flow-container {
    position: relative;
    padding: 20px 0;
}

.vs-flow-item {
    text-align: center;
    position: relative;
    z-index: 2;
}

.vs-flow-icon {
    width: 80px;
    height: 80px;
    background: white;
    border: 2px solid var(--theme);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 28px;
    color: var(--theme);
    transition: all 0.3s ease;
}

.vs-flow-item:hover .vs-flow-icon {
    background: var(--theme);
    color: white;
    transform: translateY(-5px);
}

/* 3. Custom Experience */
.browser-mockup {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 1px solid #e0e0e0;
}

.browser-header {
    background: #f1f1f1;
    padding: 10px 15px;
    display: flex;
    gap: 5px;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ccc;
}

.dot.red {
    background: #ff5f56;
}

.dot.yellow {
    background: #ffbd2e;
}

.dot.green {
    background: #27c93f;
}

.vs-feature-list li {
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    font-weight: 500;
}

/* 4. Pillars */
.vs-pillar-card {
    background: white;
    padding: 40px;
    border-radius: 20px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
    position: relative;
}

.vs-pillar-card:hover {
    border-color: var(--theme);
    box-shadow: 0 15px 30px rgba(251, 100, 8, 0.1);
}

.vs-pillar-card.tech {
    border-top: 5px solid var(--theme);
}

.vs-pillar-card.comm {
    border-top: 5px solid #fead03;
}

.vs-pillar-card.legal {
    border-top: 5px solid #333;
}

/* 5. Business Grid */
.vs-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.vs-tag-item {
    background: #fff;
    border: 1px solid #ddd;
    padding: 12px 25px;
    border-radius: 10px;
    font-weight: 600;
    transition: 0.3s;
    cursor: pointer;
}

.vs-tag-item:hover {
    background: var(--theme);
    color: white;
    border-color: var(--theme);
}

/* 6. Governance */
.vs-step-card {
    padding: 30px;
    background: #fdfdfd;
    border-radius: 15px;
    border-left: 4px solid var(--theme);
    margin-bottom: 20px;
}

/* 7. Resources Tabs */
.vs-nav-tabs {
    border: none;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
}

.vs-nav-tabs .nav-link {
    border: 1px solid #eee !important;
    border-radius: 10px !important;
    padding: 15px 25px;
    font-weight: 700;
    color: #666;
    background: white;
}

.vs-nav-tabs .nav-link.active {
    background: var(--theme) !important;
    color: white !important;
    border-color: var(--theme) !important;
}

.vs-tab-content {
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* 8. Strong CTA */
.vs-cta-box {
    background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);
    padding: 80px 40px;
    border-radius: 30px;
    text-align: center;
    color: white;
}

/* ==========================================================================
   SOCIAL MEDIA & DIGITAL MARKETING PAGE STYLES
   ========================================================================== */

.sm-section {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

/* 1. SM Hero */
.sm-hero {
    background: #111;
    padding: 180px 0 120px;
    position: relative;
    overflow: hidden;
    color: white;
}

.sm-hero::after {
    content: "";
    position: absolute;
    top: -50%;
    right: -20%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(251, 100, 8, 0.1) 0%, transparent 70%);
    z-index: 1;
}

.sm-hero .container {
    position: relative;
    z-index: 2;
}

.sm-hero h1 {
    font-size: 64px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 30px;
}

.sm-hero .hero-badge {
    display: inline-block;
    background: rgba(251, 100, 8, 0.15);
    color: var(--theme);
    padding: 8px 16px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

/* 2. Strategy Approach */
.sm-strategy-box {
    text-align: center;
    padding: 40px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border: 1px solid #eee;
    height: 100%;
}

.sm-strategy-box:hover {
    transform: translateY(-10px);
    border-color: var(--theme);
}

.sm-strategy-icon {
    width: 70px;
    height: 70px;
    background: #fdf2e9;
    color: var(--theme);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 25px;
}

/* 3. Organic Growth - SEO */
.sm-seo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.sm-seo-card {
    background: #f9f9f9;
    padding: 35px;
    border-radius: 20px;
    position: relative;
    border-left: 5px solid var(--theme);
}

/* 4. Paid Traffic */
.sm-paid-section {
    background: #000;
    color: white;
}

.sm-metric-card {
    background: #111;
    border: 1px solid #222;
    padding: 40px;
    border-radius: 20px;
    height: 100%;
}

.sm-metric-card h3 {
    font-size: 40px;
    font-weight: 800;
    color: var(--theme);
    margin-bottom: 15px;
}

.sm-platform-logo {
    font-size: 24px;
    margin-bottom: 20px;
    display: block;
}

/* 5. Monitoring & Optimization */
.sm-process-flow {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-top: 50px;
}

.sm-process-item {
    text-align: center;
    width: 20%;
    position: relative;
    z-index: 2;
}

.sm-process-dot {
    width: 20px;
    height: 20px;
    background: var(--theme);
    border-radius: 50%;
    margin: 0 auto 20px;
    box-shadow: 0 0 0 10px rgba(251, 100, 8, 0.1);
}

/* 6. Combo Section */
.sm-combo-banner {
    background: linear-gradient(135deg, #fb6408 0%, #fead03 100%);
    padding: 80px 50px;
    border-radius: 40px;
    color: white;
    position: relative;
    overflow: hidden;
}

.sm-combo-banner::before {
    content: "\f135";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 200px;
    opacity: 0.1;
}

/* 7. Plans Section */
.sm-plan-card {
    background: white;
    padding: 50px;
    border-radius: 30px;
    text-align: center;
    border: 1px solid #eee;
}

.sm-plan-card.featured {
    border: 2px solid var(--theme);
    transform: scale(1.05);
    z-index: 5;
}

/* 8. Final CTA */
.sm-cta-exclusive {
    background: #fff;
    padding: 100px 0;
    text-align: center;
}

/* 6. Premium CTA */
.premium-cta {
    background: linear-gradient(135deg, #fb6408 0%, #fead03 100%);
    padding: 100px 0;
    border-radius: 40px;
    margin: 80px 0;
    text-align: center;
}

.premium-cta h2 {
    color: #fff !important;
    font-size: 3rem;
    margin-bottom: 30px;
}

.premium-cta .theme-btn {
    background: #fff;
    color: #fb6408 !important;
}

.premium-cta .theme-btn:hover {
    background: #111;
    color: #fff !important;
}

/* Helper Classes */
.text-orange {
    color: #fb6408 !important;
}

/* ==========================================================================
   PROFESSIONAL WEBSITE PAGE STYLES
   ========================================================================== */

.pw-section {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

/* 1. PW Hero */
.pw-hero-wrap {
    position: relative;
    height: 70vh;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    background-size: cover;
    background-position: center;
}

.pw-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.pw-hero-content {
    position: relative;
    z-index: 2;
    padding: 0 15px;
}

.pw-hero-content h1 {
    font-size: 68px;
    font-weight: 800;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.pw-hero-content p {
    font-size: 24px;
    font-weight: 400;
    opacity: 0.9;
}

/* 2. Custom Website Concept */
.pw-concept-img {
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

.pw-check-list li {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    color: #333;
}

.pw-check-list i {
    width: 35px;
    height: 35px;
    background: #fdf2e9;
    color: var(--theme);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 14px;
}

/* 3. Responsive Section */
.pw-mockup-wrapper {
    position: relative;
    margin: 50px 0;
}

.pw-mockup-main {
    max-width: 800px;
    margin: 0 auto;
    display: block;
}

/* 4. Who We Serve */
.pw-audience-box {
    background: white;
    padding: 50px 40px;
    border-radius: 25px;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid #f0f0f0;
}

.pw-audience-box:hover {
    transform: translateY(-15px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
    border-color: var(--theme);
}

.pw-audience-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 25px;
}

.pw-audience-tag {
    background: #f8f9fa;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    color: #666;
}

/* 5. Process & Commitment */
.pw-process-card {
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    margin-bottom: 30px;
    border-left: 6px solid var(--theme);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

/* 6. Full Service Delivery */
.pw-service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.pw-service-mini {
    text-align: center;
    padding: 30px;
    background: #fdfdfd;
    border-radius: 15px;
    border: 1px solid #eee;
}

.pw-service-mini i {
    font-size: 32px;
    color: var(--theme);
    margin-bottom: 15px;
}

/* 7. Final PW CTA */
.pw-cta-banner {
    background: #1a1a1a;
    padding: 100px 0;
    color: white;
    border-radius: 30px;
    text-align: center;
}

/* ==========================================================================
   CONTACT PAGE REFINEMENTS
   ========================================================================== */

/* 1. Force White Background */
.contact-section.section-bg,
.contact-from-section.section-bg,
.body-color.contact-page {
    background-color: #ffffff !important;
}

/* 2. Standardize Social Icons (Match Footer) */
.contact-wrapper-2 .social .social-list {
    display: flex !important;
    gap: 12px !important;
    padding-top: 10px !important;
    list-style: none !important;
    padding-left: 0 !important;
}

.contact-wrapper-2 .social .social-list li {
    margin: 0 !important;
}

.contact-wrapper-2 .social .social-list li a {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.05) !important;
    /* Light version of footer style */
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #333333 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.contact-wrapper-2 .social .social-list li a:hover {
    background: var(--theme) !important;
    border-color: var(--theme) !important;
    color: #ffffff !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 15px rgba(251, 100, 8, 0.2) !important;
}

/* 3. Factory Intro for Contact Breadcrumb */
.breadcrumb-wrapper.factory-intro {
    background: #0d0d0d !important;
    color: #fff !important;
    padding: 160px 0 !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
    background-image: none !important;
}

.breadcrumb-wrapper.factory-intro h2,
.breadcrumb-wrapper.factory-intro h1 {
    font-size: 4rem !important;
    font-weight: 800 !important;
    color: #fff !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    margin-bottom: 30px !important;
}

.breadcrumb-wrapper.factory-intro .breadcrumb-list {
    justify-content: center !important;
}

.breadcrumb-wrapper.factory-intro .breadcrumb-list li {
    color: #ccc !important;
}

.breadcrumb-wrapper.factory-intro .breadcrumb-list li a {
    color: #ccc !important;
}

.breadcrumb-wrapper.factory-intro .breadcrumb-list li i {
    color: var(--theme) !important;
}

@media (max-width: 991px) {

    .breadcrumb-wrapper.factory-intro h2,
    .breadcrumb-wrapper.factory-intro h1 {
        font-size: 3rem !important;
    }
}

@media (max-width: 767px) {

    .breadcrumb-wrapper.factory-intro h2,
    .breadcrumb-wrapper.factory-intro h1 {
        font-size: 2rem !important;
    }
}

/* WhatsApp Floating Button */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 30px;
    left: 30px;
    background-color: #25D366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

.whatsapp-float:hover {
    background-color: #25D366;
    color: #FFF;
    transform: scale(1.1);

}

@media (max-width: 767px) {
    .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
        font-size: 25px;
    }
}

/* Testimonials Carousel Controls Visibility */
.testimonials-2 .slide-btn button {
    background-color: transparent !important;
    border: 2px solid #fb6408 !important;
    color: #fb6408 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.testimonials-2 .slide-btn button i {
    transform: rotate(0) !important;
    color: #fb6408 !important;
}

.testimonials-2 .slide-btn button:hover {
    background-color: #fb6408 !important;
    color: #fff !important;
}

.testimonials-2 .slide-btn button:hover i {
    color: #fff !important;
}

/* Main Hero Section (Index) */
.main-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #0d0d0d;
}

.main-hero .hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.main-hero .hero-bg img,
.main-hero .hero-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-hero .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(13, 13, 13, 0.8) 0%, rgba(13, 13, 13, 0.4) 100%, rgba(13, 13, 13, 0.8) 100%);
    z-index: 2;
}

.main-hero .hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 900px;
    padding: 0 20px;
    color: #ffffff;
}

.main-hero .hero-logo {
    margin-bottom: 40px;
    animation: fadeInUp 1s ease-out;
}

.main-hero .hero-logo img {
    max-width: 250px;
    height: auto;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
}

.main-hero h1 {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
    color: #ffffff;
    animation: fadeInUp 1.2s ease-out both;
    animation-delay: 0.2s;
}

.main-hero p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 40px;
    animation: fadeInUp 1.2s ease-out both;
    animation-delay: 0.4s;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.main-hero .hero-btns {
    animation: fadeInUp 1.2s ease-out both;
    animation-delay: 0.6s;
}

@media (max-width: 991px) {
    .main-hero h1 {
        font-size: 3rem;
    }

    .main-hero .hero-logo img {
        max-width: 200px;
    }
}

@media (max-width: 767px) {
    .main-hero {
        height: 80vh;
    }

    .main-hero h1 {
        font-size: 2rem;
    }

    .main-hero p {
        font-size: 0.9rem;
    }

    .main-hero .hero-logo img {
        max-width: 180px;
    }
}

/* =========================================
   Clickable pw-service-mini card
   ========================================= */
.pw-service-mini-link {
    text-decoration: none !important;
    display: block;
}

.pw-service-mini--link {
    cursor: pointer;
    transition: all 0.3s ease;
}

.pw-service-mini--link:hover {
    border-color: var(--theme) !important;
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(251, 100, 8, 0.12);
}

/* =========================================
   Desenvolvimento Hub Cards
   ========================================= */
.dev-hub-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 20px;
    padding: 40px 35px;
    height: 100%;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.dev-hub-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 4px;
    background: var(--theme);
    transition: width 0.35s ease;
}

.dev-hub-card:hover {
    border-color: var(--theme);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(251, 100, 8, 0.10);
}

.dev-hub-card:hover::after {
    width: 100%;
}

.dev-hub-icon {
    width: 64px;
    height: 64px;
    background: #fdf2e9;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--theme);
    margin-bottom: 24px;
    transition: all 0.3s ease;
}

.dev-hub-card:hover .dev-hub-icon {
    background: var(--theme);
    color: #fff;
}

.dev-hub-link {
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
}

/* =========================================
   Content Page Styles (individual articles)
   ========================================= */
.content-page-section {
    padding: 100px 0;
}

.content-article h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: 48px;
    margin-bottom: 18px;
    color: var(--header);
    padding-top: 12px;
    border-top: 2px solid #fdf2e9;
}

.content-article p {
    font-size: 1rem;
    line-height: 1.85;
    color: #444;
    margin-bottom: 18px;
}

.content-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    margin: 28px 0;
}

.content-feature-item {
    background: #fdf2e9;
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    font-size: 14px;
    color: #333;
    transition: all 0.3s ease;
}

.content-feature-item:hover {
    background: var(--theme);
    color: #fff;
    transform: translateY(-3px);
}

.content-feature-item i {
    color: var(--theme);
    font-size: 15px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.content-feature-item:hover i {
    color: #fff;
}

.content-sidebar-box {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 20px;
    padding: 35px 30px;
    position: sticky;
    top: 100px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}

/* =========================================
   Captcha Matemático
   ========================================= */
.captcha-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.95rem;
    color: #444;
}

/* =========================================
   Soluções por Segmento (grid de links)
   ========================================= */
.pw-segment-group {
    margin-bottom: 55px;
}

.pw-segment-group:last-child {
    margin-bottom: 0;
}

.pw-segment-group-title {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 28px;
}

.pw-segment-group-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #ececec;
}

.pw-segment-group-title i {
    color: var(--theme);
    font-size: 16px;
    letter-spacing: normal;
}

.pw-segment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 20px;
}

.pw-segment-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 15px;
    padding: 26px 24px;
    height: 100%;
    text-decoration: none !important;
    transition: all 0.3s ease;
}

.pw-segment-card:hover {
    border-color: var(--theme);
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(251, 100, 8, 0.12);
}

.pw-segment-card i {
    font-size: 26px;
    color: var(--theme);
    margin-bottom: 16px;
}

.pw-segment-card h6 {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 14px;
    line-height: 1.4;
}

.pw-segment-card .pw-segment-link {
    margin-top: auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--theme);
}

.pw-segment-card .pw-segment-link i {
    font-size: 11px;
    margin: 0 0 0 4px;
    transition: transform 0.3s ease;
    display: inline-block;
}

.pw-segment-card:hover .pw-segment-link i {
    transform: translateX(4px);
}

@media (max-width: 575px) {
    .pw-segment-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 15px;
    }

    .pw-segment-card {
        padding: 20px 18px;
    }

    .pw-segment-card h6 {
        font-size: 14px;
    }
}

/* =========================================
   Bloco "Fale com Vendas" (substitui formulário)
   ========================================= */
.contact-mailto-box {
    text-align: center;
    padding: 15px 0 5px;
}

.contact-mailto-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 25px;
    background: #fdf2e9;
    color: var(--theme);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
}

.contact-mailto-box p {
    color: #666;
    font-size: 16px;
    margin-bottom: 22px;
}

.contact-mailto-address {
    display: inline-block;
    font-size: 24px;
    font-weight: 700;
    color: var(--theme) !important;
    text-decoration: none !important;
    word-break: break-word;
    margin-bottom: 30px;
    transition: opacity 0.3s ease;
}

.contact-mailto-address:hover {
    opacity: 0.75;
}

.contact-mailto-alt {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #eee;
    font-size: 15px;
    color: #666;
}

.contact-mailto-alt a {
    color: #333 !important;
    font-weight: 600;
    text-decoration: none !important;
}

.contact-mailto-alt a:hover {
    color: var(--theme) !important;
}

@media (max-width: 575px) {
    .contact-mailto-address {
        font-size: 18px;
    }
}