.elementor-3915 .elementor-element.elementor-element-bbae4b8{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3915 .elementor-element.elementor-element-fef92f6{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-3915 .elementor-element.elementor-element-fef92f6.elementor-element{--align-self:center;}.elementor-3915 .elementor-element.elementor-element-efbd063{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:50px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-3915 .elementor-element.elementor-element-efbd063:not(.elementor-motion-effects-element-type-background), .elementor-3915 .elementor-element.elementor-element-efbd063 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0C0C0E;}.elementor-3915 .elementor-element.elementor-element-aae9ebc{--display:flex;--justify-content:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-3915 .elementor-element.elementor-element-3e0d94b{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-3915 .elementor-element.elementor-element-3e0d94b img{border-radius:12px 12px 12px 12px;}.elementor-3915 .elementor-element.elementor-element-57f9d4e{--display:flex;--justify-content:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:20px;--padding-bottom:0px;--padding-left:20px;--padding-right:0px;}.elementor-3915 .elementor-element.elementor-element-57f9d4e.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-3915 .elementor-element.elementor-element-0cba32a{text-align:start;}.elementor-3915 .elementor-element.elementor-element-0cba32a .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:60px;font-weight:700;color:#C8A65A;}.elementor-3915 .elementor-element.elementor-element-2bd93b5{text-align:start;}.elementor-3915 .elementor-element.elementor-element-2bd93b5 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:29px;font-weight:600;color:#FFFFFF;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-3915 .elementor-element.elementor-element-3272ab8{text-align:start;font-family:"Manrope", Sans-serif;font-size:18px;font-weight:400;color:#ECECEC;}.elementor-3915 .elementor-element.elementor-element-5f86584{text-align:start;font-family:"Manrope", Sans-serif;font-size:18px;font-weight:400;color:#ECECEC;}.elementor-3915 .elementor-element.elementor-element-948b7a1{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:50px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-3915 .elementor-element.elementor-element-948b7a1:not(.elementor-motion-effects-element-type-background), .elementor-3915 .elementor-element.elementor-element-948b7a1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#1A1A1A;}.elementor-3915 .elementor-element.elementor-element-3f4459b{--display:flex;border-style:solid;--border-style:solid;border-width:10px 0px 10px 0px;--border-top-width:10px;--border-right-width:0px;--border-bottom-width:10px;--border-left-width:0px;border-color:#393939;--border-color:#393939;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:4;}.elementor-3915 .elementor-element.elementor-element-0bb64ac{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-3915 .elementor-element.elementor-element-0bb64ac.elementor-element{--align-self:center;}@media(min-width:768px){.elementor-3915 .elementor-element.elementor-element-57f9d4e{--width:50%;}}@media(max-width:1024px) and (min-width:768px){.elementor-3915 .elementor-element.elementor-element-57f9d4e{--width:100%;}}@media(max-width:1024px){.elementor-3915 .elementor-element.elementor-element-efbd063{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-3915 .elementor-element.elementor-element-2bd93b5 .elementor-heading-title{font-size:45px;}}@media(max-width:767px){.elementor-3915 .elementor-element.elementor-element-2bd93b5 .elementor-heading-title{font-size:35px;}}/* Start custom CSS for html, class: .elementor-element-776a909 */<style>
  /* --- Import Manrope Font --- */
  @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600&display=swap');

  /* --- Updated AI Services Section Styling (Forced Dark Background) --- */
  section.ai-services-section, 
  div.ai-services-section {
    position: relative !important;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    background-color: #080c0f !important; /* Forces solid dark background */
    background: #080c0f !important;
    color: #F5F3EE !important;
    padding: 100px 0 !important;
    width: 100vw !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .ai-services-container {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* Header Styling */
  .ai-services-header {
    text-align: center !important;
    margin-bottom: 60px !important;
  }

  .ai-services-header h2 {
    font-size: 42px !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 16px !important;
    color: #F5F3EE !important;
    line-height: 1.1 !important;
  }

  .ai-services-header p {
    color: #C5C5C5 !important;
    font-size: 18px !important;
    font-weight: 300 !important;
    line-height: 1.65 !important;
    max-width: 650px !important;
    margin: 0 auto !important;
  }

  /* Grid Layout */
  .ai-services-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
  }

  /* Card Styling (Lighter dark background contrast) */
  .ai-service-card {
    background-color: #121820 !important; /* Lighter dark tone for cards */
    background: #121820 !important;
    border: 1px solid rgba(245, 243, 238, 0.08) !important;
    border-radius: 16px !important;
    padding: 35px 30px !important;
    position: relative !important;
    transition: all 0.3s ease !important;
  }

  .ai-service-card:hover {
    background-color: #161e27 !important;
    background: #161e27 !important;
    border-color: rgba(200, 167, 90, 0.4) !important;
    transform: translateY(-4px) !important;
  }

  /* Highlighted/Active Card (Card 5) */
  .ai-service-card.active {
    background-color: #161e27 !important;
    background: #161e27 !important;
    border: 1px solid #C8A75A !important; /* Accent Gold */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  }

  /* Number Badge */
  .ai-card-number {
    background-color: rgba(200, 167, 90, 0.15) !important;
    background: rgba(200, 167, 90, 0.15) !important;
    color: #C8A75A !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    width: 38px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    margin-bottom: 25px !important;
    border: 1px solid rgba(200, 167, 90, 0.3) !important;
  }

  /* Typography Inside Cards */
  .ai-service-card h3 {
    font-size: 20px !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 12px !important;
    color: #F5F3EE !important;
  }

  .ai-service-card p {
    color: #C5C5C5 !important;
    font-size: 15px !important;
    font-weight: 300 !important;
    line-height: 1.6 !important;
    margin-bottom: 30px !important;
  }

  /* Learn More Link */
  .ai-learn-more {
    color: #C8A75A !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: opacity 0.2s !important;
  }

  .ai-learn-more:hover {
    opacity: 0.8 !important;
  }

  /* Responsive Breakpoints */
  @media (max-width: 1024px) {
    .ai-services-grid {
      grid-template-columns: repeat(2, 1fr) !important;
    }
  }

  @media (max-width: 768px) {
    .ai-services-section {
      padding: 70px 0 !important;
    }
    .ai-services-container {
      padding: 0 24px !important;
    }
    .ai-services-grid {
      grid-template-columns: 1fr !important;
    }
    .ai-services-header h2 {
      font-size: 32px !important;
    }
  }
</style>

<section class="ai-services-section">
    <div class="ai-services-container">
        <div class="ai-services-header">
            <h2>AI Creative Services</h2>
            <p>Tailored production verticals powered by next-generation generative pipelines.</p>
        </div>

        <div class="ai-services-grid">
            <!-- Card 1 -->
            <div class="ai-service-card">
                <div class="ai-card-number">01</div>
                <h3>AI Commercials</h3>
                <p>Luxury commercials created using high-end AI-assisted production and live-action blending.</p>
                <a href="#" class="ai-learn-more">LEARN MORE &rarr;</a>
            </div>

            <!-- Card 2 -->
            <div class="ai-service-card">
                <div class="ai-card-number">02</div>
                <h3>AI Films</h3>
                <p>Short cinematic stories crafted with specialized AI workflows, rich depth, and narrative intent.</p>
                <a href="#" class="ai-learn-more">LEARN MORE &rarr;</a>
            </div>

            <!-- Card 3 -->
            <div class="ai-service-card">
                <div class="ai-card-number">03</div>
                <h3>Product Visualization</h3>
                <p>Photorealistic products, immersive advertising visuals, and high-impact digital launch campaigns.</p>
                <a href="#" class="ai-learn-more">LEARN MORE &rarr;</a>
            </div>

            <!-- Card 4 -->
            <div class="ai-service-card">
                <div class="ai-card-number">04</div>
                <h3>AI Photography</h3>
                <p>Editorial portraits, lifestyle imagery, fashion campaigns, and conceptual gallery-grade artwork.</p>
                <a href="#" class="ai-learn-more">LEARN MORE &rarr;</a>
            </div>

            <!-- Card 5 (Highlighted) -->
            <div class="ai-service-card active">
                <div class="ai-card-number">05</div>
                <h3>AI Animation</h3>
                <p>Stylized animation, motion design, and fluid cinematic sequences designed for dynamic output.</p>
                <a href="#" class="ai-learn-more">LEARN MORE &rarr;</a>
            </div>

            <!-- Card 6 -->
            <div class="ai-service-card">
                <div class="ai-card-number">06</div>
                <h3>Virtual Production</h3>
                <p>Digital environments, hyper-realistic concept worlds, and customized virtual sets for production stages.</p>
                <a href="#" class="ai-learn-more">LEARN MORE &rarr;</a>
            </div>
        </div>
    </div>
</section>/* End custom CSS */