make animations more closely resemble the apple website when active section is in view it is 100% wide and when not it has 111.5px padding on both sides while headings always have 111.5px padding on both sides. <html><head><base href="/">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">
<style>
:root {
  --primary-color: #333;
  --secondary-color: #666;
  --accent-color: #999;
  --tertiary-color: #555;
  --bg-light: #f8f9fa;
  --bg-dark: #212529;
  --text-light: #333;
  --text-dark: #fff;
}

:root[data-theme="dark"] {
  --primary-color: #fff;
  --secondary-color: #ccc;
  --accent-color: #888;
  --tertiary-color: #aaa;
  --bg-light: #212529;
  --bg-dark: #f8f9fa;
  --text-light: #fff;
  --text-dark: #333;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-light);
  background: var(--bg-light);
  padding-top: 70px; /* Reduced from previous value */
}

h1, h2, .section-heading {
  font-size: 56px !important; 
  line-height: 1.2;
  margin-bottom: 2rem;
  font-weight: 500;
}

.card {
  transition: none;
  box-shadow: none;
  background: #fff;
  border: 1px solid #eee;
}

.card:hover {
  transform: none;
}

.department-section {
  background: #fff;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.department-section h3 {
  color: var(--primary-color);
  margin-bottom: 1rem;
  font-size: 12px;
}

.solution-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

.service-support-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.support-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 1rem;
}

.stats-card {
  padding: 1.5rem;
  margin-top: 1.5rem;
}

.stats-value {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.case-study-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 1.5rem;
}

.container {
  width: 100%;
  max-width: 100%;
  padding: 0;
  transition: padding 0.3s ease;
}

section {
  min-height: 100vh;
  width: 100%;
  padding: 2rem;
  transition: all 0.3s ease;
  border-radius: 25px;
  margin: 20px 111.5px;  /* Changed from just right margin to both sides */
  position: relative;
  background: #fff;
}

section:not(.section-active) {
  margin: 0 !important; /* Remove margin when not active */
  border-radius: 0 !important;
}

h3, h4, h5 {
  font-size: 12px;
}

p, li, .lead {
  font-size: 12px;
}

#who-we-are,
#core-focus,
#copilot-offerings,
#departments,
#case-studies,
#methodology,
#success-stories,
#implementation-philosophy,
#contact {
  background: #fff;
  width: 100%;
}

.card {
  height: 100%;
}

.package-features {
  padding-left: 1.25rem;
  margin-bottom: 0;
}

.implementation-phases {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.phase-item {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 1rem;
}

.menu-overlay {
  background: rgba(0,0,0,0.5);
}

.navbar {
  background: var(--bg-light);
  padding: 1rem 2rem;
  border-bottom: 1px solid var(--accent-color);
}

.navbar-brand {
  color: var(--text-light);
  font-size: 24px;
  font-weight: 500;
}

.theme-toggle {
  background: none;
  border: none;
  color: var(--text-light);
  cursor: pointer;
  padding: 0.5rem;
}

.section-heading {
  padding: 0 111.5px; /* Keep consistent padding on both sides */
  background: var(--bg-light);
  margin-bottom: 2rem;
  margin-top: 2rem;
}

  :root {
  --primary-color: #333;
  --secondary-color: #666;
  --accent-color: #999;
  --tertiary-color: #555;
  --bg-light: #f8f9fa;
  --bg-dark: #212529;
  --text-light: #333;
  --text-dark: #fff;
}

:root[data-theme="dark"] {
  --primary-color: #fff;
  --secondary-color: #ccc;
  --accent-color: #888;
  --tertiary-color: #aaa;
  --bg-light: #212529;
  --bg-dark: #f8f9fa;
  --text-light: #fff;
  --text-dark: #333;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-light);
  background: var(--bg-light);
  padding-top: 70px;
  margin: 0;
  overscroll-behavior: none;
}

/* Smooth section transition */
section {
  width: 100%;
  padding: 2rem;
  transition: all 0.5s ease-in-out;
  margin: 20px 0;
  position: relative;
  background: #fff;
  overflow: hidden;
}

/* Default state for inactive sections */
section:not(.section-active) {
  max-width: calc(100% - 223px); /* 111.5px on each side */
  margin: 20px 111.5px;
  opacity: 0.7;
  transform: scale(0.95);
  z-index: 1;
}

/* Active section takes full width */
section.section-active {
  max-width: 100%;
  margin: 20px 0;
  opacity: 1;
  transform: scale(1);
  z-index: 10;
}

/* Rest of the existing styles remain the same */
.navbar {
  background: var(--bg-light);
  padding: 1rem 2rem;
  border-bottom: 1px solid var(--accent-color);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.section-heading {
  padding: 0;
  background: var(--bg-light);
  margin-bottom: 2rem;
  margin-top: 2rem;
}
</style>
</head>
<body>

<!-- Navbar -->
<nav class="navbar navbar-expand-lg fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Delphi</a>
    <button class="theme-toggle" id="themeToggle">
      <i class="bi bi-moon-fill"></i>
    </button>
  </div>
</nav>

<!-- Main Content -->
<div class="container mt-4">

  <!-- Who We Are Section -->
  <h1 class="section-heading">Unleashing Organizational Potential</h1>
  <section id="who-we-are" class="mb-5">
    <p class="lead mb-4">Delphi is a leading Microsoft Gold Partner specializing in AI, digital transformation, and cloud solutions. With a proven track record of 250+ successful projects and 180+ active clients, we are committed to empowering organizations to harness cutting-edge technology and achieve strategic objectives.</p>
    <div class="row g-4">
      <div class="col-md-3">
        <div class="card h-100">
          <div class="card-body">
            <h5>250+ Projects</h5>
            <p>Successful implementations</p>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card h-100">
          <div class="card-body">
            <h5>180+ Clients</h5>
            <p>Active enterprise partnerships</p>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card h-100">
          <div class="card-body">
            <h5>Gold Partner</h5>
            <p>Microsoft certified expertise</p>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card h-100">
          <div class="card-body">
            <h5>25+ Experts</h5>
            <p>AI & compliance specialists</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Core Focus Areas Section -->
  <h2 class="section-heading">Core Focus Areas</h2>
  <section id="core-focus" class="section-bg mb-5">
    <div class="solution-grid">
      <div class="solution-card">
        <h5>Data & AI</h5>
        <ul class="package-features">
          <li>AI Implementation</li>
          <li>Advanced Analytics</li>
          <li>Process Automation</li>
          <li>Intelligent Solutions</li>
        </ul>
      </div>

      <div class="solution-card">
        <h5>Digital Infrastructure</h5>
        <ul class="package-features">
          <li>Cloud Migration</li>
          <li>App Modernization</li>
          <li>Infrastructure Setup</li>
          <li>Platform Integration</li>
        </ul>
      </div>

      <div class="solution-card">
        <h5>Security & Compliance</h5>
        <ul class="package-features">
          <li>Data Protection</li>
          <li>Access Control</li>
          <li>Risk Management</li>
          <li>Regulatory Compliance</li>
        </ul>
      </div>

      <div class="solution-card">
        <h5>Unified Communication</h5>
        <ul class="package-features">
          <li>Teams Integration</li>
          <li>Collaboration Tools</li>
          <li>Digital Workspace</li>
          <li>Content Management</li>
        </ul>
      </div>
    </div>

    <div class="service-support-grid">
      <div class="support-card">
        <h4>Managed Services & Outsourcing</h4>
        <ul class="package-features">
          <li>24/7 Technical Support</li>
          <li>Infrastructure Management</li>
          <li>Performance Monitoring</li>
          <li>Security Operations</li>
          <li>Resource Optimization</li>
          <li>Continuous Improvement</li>
        </ul>
      </div>

      <div class="support-card">
        <h4>Adoption & Change Management</h4>
        <ul class="package-features">
          <li>Change Strategy Development</li>
          <li>Training & Enablement</li>
          <li>Champion Programs</li>
          <li>User Adoption Campaigns</li>
          <li>Success Metrics Tracking</li>
          <li>Knowledge Management</li>
        </ul>
      </div>
    </div>
  </section>

  <!-- Copilot Expertise Section -->
  <h2 class="section-heading">Comprehensive Copilot Solutions</h2>
  <section id="copilot-offerings" class="mb-5">
    <p class="lead">End-to-end services to maximize your Copilot investment</p>

    <div class="row g-4">
      <div class="col-md-6">
        <div class="card h-100">
          <div class="card-body">
            <h5>Readiness & Deployment</h5>
            <ul class="package-features">
              <li>Environment Assessment</li>
              <li>Licensing Strategy</li>
              <li>Technical Implementation</li>
              <li>Security Configuration</li>
            </ul>
          </div>
        </div>
      </div>

      <div class="col-md-6">
        <div class="card h-100">
          <div class="card-body">
            <h5>Adoption & Change Management</h5>
            <ul class="package-features">
              <li>Champion Program Development</li>
              <li>Custom Training Programs</li>
              <li>Engagement Campaigns</li>
              <li>Center of Excellence Setup</li>
            </ul>
          </div>
        </div>
      </div>

      <div class="col-md-6">
        <div class="card h-100">
          <div class="card-body">
            <h5>Extensibility & Customization</h5>
            <ul class="package-features">
              <li>Copilot Studio Development</li>
              <li>Graph Integration</li>
              <li>Custom Plugin Creation</li>
              <li>Workflow Automation</li>
            </ul>
          </div>
        </div>
      </div>

      <div class="col-md-6">
        <div class="card h-100">
          <div class="card-body">
            <h5>Managed Services & Support</h5>
            <ul class="package-features">
              <li>24/7 Help Desk Support</li>
              <li>Usage Monitoring</li>
              <li>Performance Optimization</li>
              <li>Regular Reporting</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Department Solutions -->
  <h2 class="section-heading">Department-Specific Value Creation</h2>
  <section id="departments" class="mb-5">
    
    <!-- Procurement -->
    <div class="department-section">
      <h3>Procurement Excellence</h3>
      <p class="lead">
        Transform your procurement operations into a strategic powerhouse with our AI-powered solutions. In today's complex business landscape, managing supplier networks and ensuring compliance across diverse procurement needs requires a revolutionary approach. Our Copilot implementation brings cutting-edge automation and intelligence to every aspect of your procurement lifecycle.
      </p>
      <p>
        Experience a paradigm shift in procurement efficiency as Copilot streamlines your operations from end to end. Watch as time-consuming tasks like RFP creation, proposal evaluation, and contract analysis transform into streamlined, intelligent processes. Our solution doesn't just automate - it empowers your team with AI-driven insights for better decision-making and strategic sourcing.
      </p>
      <p>
        Imagine cutting procurement cycle times by 40% while simultaneously strengthening supplier relationships and compliance. Our clients are achieving these results through intelligent automation that frees their teams to focus on strategic initiatives and value creation. From automated document creation to AI-powered risk analysis, Copilot becomes your procurement team's intelligent partner in driving business success.
      </p>
      
      <div class="row g-4 mb-4">
        <div class="col-md-6">
          <div class="card h-100">
            <div class="card-body">
              <h5>Key Challenges</h5>
              <ul class="package-features">
                <li>Complex supplier network management</li>
                <li>Time-consuming contract reviews</li>
                <li>Manual proposal evaluations</li>
                <li>Inefficient communication processes</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="card h-100">
            <div class="card-body">
              <h5>Copilot Solutions</h5>
              <ul class="package-features">
                <li>AI-powered RFP generation and analysis</li>
                <li>Intelligent contract risk assessment</li>
                <li>Automated proposal comparison</li>
                <li>Smart supplier communication optimization</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      
      <div class="stats-card">
        <div class="row">
          <div class="col-md-3">
            <div class="stats-value">40%</div>
            <div>Faster Cycle Times</div>
          </div>
          <div class="col-md-3">
            <div class="stats-value">30%</div>
            <div>Cost Savings</div>
          </div>
          <div class="col-md-3">
            <div class="stats-value">50%</div>
            <div>Better Compliance</div>
          </div>
          <div class="col-md-3">
            <div class="stats-value">45%</div>
            <div>Supplier Satisfaction</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Finance -->
    <div class="department-section">
      <h3>Finance Transformation</h3>
      <p class="lead">
        Unleash the full potential of your financial data with our revolutionary AI-powered financial transformation solution. In an era where data-driven decisions separate market leaders from followers, our Copilot implementation empowers your finance team with unprecedented analytical capabilities and automation tools.
      </p>
      <p>
        Witness the transformation as your finance department evolves from a traditional reporting center into a strategic insights powerhouse. Our solution seamlessly integrates with your existing systems, providing real-time analytics, automated reporting, and predictive insights that drive better business decisions. Experience the power of having an AI assistant that can analyze complex datasets in seconds, generate comprehensive reports, and identify trends human analysts might miss.
      </p>
      <p>
        The numbers speak for themselves: 50% faster reporting cycles, 35% more accurate forecasting, and 40% time savings in routine tasks. These aren't just metrics - they represent real transformation in how your finance team operates, allowing them to focus on strategic initiatives that drive business growth and innovation.
      </p>
      
      <div class="row g-4 mb-4">
        <div class="col-md-6">
          <div class="card h-100">
            <div class="card-body">
              <h5>Key Challenges</h5>
              <ul class="package-features">
                <li>Complex data analysis requirements</li>
                <li>Time-intensive reporting processes</li>
                <li>Limited strategic insights</li>
                <li>Manual scenario modeling</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="card h-100">
            <div class="card-body">
              <h5>Copilot Solutions</h5>
              <ul class="package-features">
                <li>AI-driven financial trend analysis</li>
                <li>Automated report generation</li>
                <li>Intelligent Excel modeling</li>
                <li>Predictive analytics insights</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      
      <div class="stats-card">
        <div class="row">
          <div class="col-md-3">
            <div class="stats-value">50%</div>
            <div>Faster Reporting</div>
          </div>
          <div class="col-md-3">
            <div class="stats-value">35%</div>
            <div>Better Forecasting</div>
          </div>
          <div class="col-md-3">
            <div class="stats-value">40%</div>
            <div>Time Savings</div>
          </div>
          <div class="col-md-3">
            <div class="stats-value">45%</div>
            <div>Decision Speed</div>
          </div>
        </div>
      </div>
    </div>

    <!-- HR -->
    <div class="department-section">
      <h3>HR Innovation</h3>
      <p class="lead">
        Revolutionize your human resources operations with our AI-powered HR transformation solution. In today's competitive talent landscape, traditional HR processes no longer suffice. Our Copilot implementation brings intelligence and automation to every aspect of HR management, from recruitment to employee engagement.
      </p>
      <p>
        Experience the future of HR management where routine tasks are automated, leaving your team free to focus on what matters most - building and nurturing your organization's most valuable asset: its people. Our solution transforms time-consuming processes like resume screening, interview documentation, and onboarding into streamlined, intelligent workflows that deliver consistent, high-quality results.
      </p>
      <p>
        The impact is clear: 60% reduction in administrative tasks, 45% faster hiring cycles, and significantly improved employee engagement scores. These improvements translate directly into better talent acquisition, improved retention rates, and a more engaged workforce. With Copilot as your HR team's intelligent partner, you can build a more dynamic, responsive, and people-centric organization.
      </p>
      
      <div class="row g-4 mb-4">
        <div class="col-md-6">
          <div class="card h-100">
            <div class="card-body">
              <h5>Key Challenges</h5>
              <ul class="package-features">
                <li>Administrative overload</li>
                <li>Inconsistent recruitment processes</li>
                <li>Complex onboarding workflows</li>
                <li>Limited personalization</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="card h-100">
            <div class="card-body">
              <h5>Copilot Solutions</h5>
              <ul class="package-features">
                <li>AI-driven job description creation</li>
                <li>Smart resume screening</li>
                <li>Automated onboarding content</li>
                <li>Personalized communications</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      
      <div class="stats-card">
        <div class="row">
          <div class="col-md-3">
            <div class="stats-value">60%</div>
            <div>Admin Reduction</div>
          </div>
          <div class="col-md-3">
            <div class="stats-value">45%</div>
            <div>Faster Hiring</div>
          </div>
          <div class="col-md-3">
            <div class="stats-value">50%</div>
            <div>Better Engagement</div>
          </div>
          <div class="col-md-3">
            <div class="stats-value">40%</div>
            <div>Training Impact</div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Case Studies -->
  <h2 class="section-heading">Success Stories</h2>
  <section id="case-studies" class="mb-5">
    <div class="row g-4">
      <div class="col-md-4">
        <div class="case-study-card">
          <h4>DCT Abu Dhabi</h4>
          <div class="stats-card mb-3">
            <div class="stats-value">40%</div>
            <div>Improved Communication</div>
          </div>
          <h5>Challenges:</h5>
          <ul class="package-features">
            <li>Complex information management</li>
            <li>Inefficient collaboration</li>
            <li>Need for secure transformation</li>
          </ul>
          <h5>Solutions:</h5>
          <ul class="package-features">
            <li>End-to-end Copilot implementation</li>
            <li>Comprehensive tenant assessment</li>
            <li>Customized training programs</li>
          </ul>
        </div>
      </div>
      <div class="col-md-4">
        <div class="case-study-card">
          <h4>Network International</h4>
          <div class="stats-card mb-3">
            <div class="stats-value">50%</div>
            <div>Faster Strategic Reporting</div>
          </div>
          <h5>Challenges:</h5>
          <ul class="package-features">
            <li>Data compliance concerns</li>
            <li>Technical integration complexities</li>
            <li>Executive-level AI adoption needs</li>
          </ul>
          <h5>Solutions:</h5>
          <ul class="package-features">
            <li>Targeted Copilot implementation</li>
            <li>Comprehensive governance review</li>
            <li>Custom executive training</li>
          </ul>
        </div>
      </div>
      <div class="col-md-4">
        <div class="case-study-card">
          <h4>Department of Government Enablement</h4>
          <div class="stats-card mb-3">
            <div class="stats-value">45%</div>
            <div>Operational Efficiency Increase</div>
          </div>
          <h5>Challenges:</h5>
          <ul class="package-features">
            <li>300+ user implementation</li>
            <li>Uniform technology adoption</li>
            <li>Security compliance needs</li>
          </ul>
          <h5>Solutions:</h5>
          <ul class="package-features">
            <li>Phased adoption approach</li>
            <li>Champion network development</li>
            <li>Comprehensive training</li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <!-- Implementation Methodology Section -->
  <h2 class="section-heading">Delphi's Proven Implementation Approach</h2>
  <section id="methodology" class="mb-5">
    <p class="lead">Your Trusted Partner for Seamless Copilot Adoption</p>
    
    <div class="implementation-phases">
      <div class="phase-item">
        <h4>Assess & Plan</h4>
        <p>Comprehensive workshops to analyze your Microsoft 365 landscape and identify strategic Copilot opportunities. We partner with your leadership to:</p>
        <ul class="package-features">
          <li>Define clear objectives and metrics</li>
          <li>Map organizational use cases</li>
          <li>Develop phased rollout plans</li>
          <li>Set success benchmarks</li>
        </ul>
      </div>
      
      <div class="phase-item">
        <h4>Deploy & Train</h4>
        <p>Expert-led deployment and training ensuring seamless adoption:</p>
        <ul class="package-features">
          <li>Secure implementation</li>
          <li>Customized training programs</li>
          <li>Hands-on workshops</li>
          <li>Real-world scenario practice</li>
        </ul>
      </div>
      
      <div class="phase-item">
        <h4>Manage & Enable</h4>
        <p>Dedicated support through our Center of Excellence:</p>
        <ul class="package-features">
          <li>Ongoing technical support</li>
          <li>Community forums</li>
          <li>Governance management</li>
          <li>Regular check-ins</li>
        </ul>
      </div>
      
      <div class="phase-item">
        <h4>Measure & Optimize</h4>
        <p>Data-driven optimization for maximum ROI:</p>
        <ul class="package-features">
          <li>Performance analytics</li>
          <li>Usage tracking</li>
          <li>Satisfaction surveys</li>
          <li>Continuous improvement</li>
        </ul>
      </div>
    </div>
  </section>

  <!-- Expanded Case Studies Section -->
  <h2 class="section-heading">Success Stories</h2>
  <section id="success-stories" class="mb-5">
    <div class="row g-4">
      <div class="col-md-4">
        <div class="case-study-card h-100">
          <h4>DCT Abu Dhabi</h4>
          <div class="stats-card mb-3">
            <div class="stats-value">40%</div>
            <div>Improvement in communication</div>
          </div>
          <h5>Challenges:</h5>
          <ul class="package-features">
            <li>Complex information management</li>
            <li>Inefficient collaboration</li>
            <li>Need for secure transformation</li>
          </ul>
          <h5>Solutions:</h5>
          <ul class="package-features">
            <li>End-to-end Copilot implementation</li>
            <li>Comprehensive tenant assessment</li>
            <li>Customized training programs</li>
          </ul>
        </div>
      </div>
      <div class="col-md-4">
        <div class="case-study-card h-100">
          <h4>Network International</h4>
          <div class="stats-card mb-3">
            <div class="stats-value">50%</div>
            <div>Faster strategic reporting</div>
          </div>
          <h5>Challenges:</h5>
          <ul class="package-features">
            <li>Data compliance concerns</li>
            <li>Technical integration complexities</li>
            <li>Executive-level AI adoption needs</li>
          </ul>
          <h5>Solutions:</h5>
          <ul class="package-features">
            <li>Targeted Copilot implementation</li>
            <li>Comprehensive governance review</li>
            <li>Custom executive training</li>
          </ul>
        </div>
      </div>
      <div class="col-md-4">
        <div class="case-study-card h-100">
          <h4>Department of Government Enablement</h4>
          <div class="stats-card mb-3">
            <div class="stats-value">45%</div>
            <div>Increase in operational efficiency</div>
          </div>
          <h5>Challenges:</h5>
          <ul class="package-features">
            <li>300+ user implementation</li>
            <li>Uniform technology adoption</li>
            <li>Security compliance needs</li>
          </ul>
          <h5>Solutions:</h5>
          <ul class="package-features">
            <li>Phased adoption approach</li>
            <li>Champion network development</li>
            <li>Comprehensive training</li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <!-- Implementation Philosophy Section -->
  <h2 class="section-heading">Implementation Philosophy</h2>
  <section id="implementation-philosophy" class="mb-5">
    <div class="implementation-phases">
      <div class="phase-item">
        <h4>Assess & Envision</h4>
        <p>We don't just implement – we partner. Our comprehensive assessment identifies your unique organizational DNA and potential AI transformation opportunities.</p>
      </div>
      <div class="phase-item">
        <h4>Deploy & Empower</h4>
        <p>Ensure that every deployment is smooth, empowering your teams to adapt and thrive with new technologies.</p>
      </div>
      <div class="phase-item">
        <h4>Optimize & Innovate</h4>
        <p>Continuously refine and innovate processes, ensuring that your organization stays ahead in a rapidly evolving landscape.</p>
      </div>
    </div>
  </section>

  <!-- Contact Section -->
  <h2 class="section-heading">Ready to Transform?</h2>
  <section id="contact" class="contact-info mt-5">
    <div class="row">
      <div class="col-md-6">
        <h4>Contact Us</h4>
        <p><i class="bi bi-globe me-2"></i> www.delphime.com</p>
        <p><i class="bi bi-envelope me-2"></i> info@delphime.com</p>
        <p><i class="bi bi-telephone me-2"></i> <PRESIDIO_ANONYMIZED_PHONE_NUMBER></p>
        <p><i class="bi bi-geo-alt me-2"></i> 14th Floor, Suite 1407, Concord Tower, Dubai Media City</p>
      </div>
    </div>
  </section>
</div>

<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  const themeToggle = document.getElementById('themeToggle');
  const root = document.documentElement;
  const icon = themeToggle.querySelector('i');

  // Check for saved user preference
  const savedTheme = localStorage.getItem('theme') || 'light';
  root.setAttribute('data-theme', savedTheme);
  updateIcon(savedTheme === 'dark');

  themeToggle.addEventListener('click', () => {
    const currentTheme = root.getAttribute('data-theme');
    const newTheme = currentTheme === 'light' ? 'dark' : 'light';
    
    root.setAttribute('data-theme', newTheme);
    localStorage.setItem('theme', newTheme);
    updateIcon(newTheme === 'dark');
  });

  function updateIcon(isDark) {
    icon.className = isDark ? 'bi bi-sun-fill' : 'bi bi-moon-fill';
  }

  // Get all sections
  const sections = document.querySelectorAll('section');
  
  // Function to check if element is in viewport
  function isElementInViewport(el) {
    const rect = el.getBoundingClientRect();
    const windowHeight = window.innerHeight || document.documentElement.clientHeight;
    
    // Consider element in viewport if its top is in view and it's at least partially visible
    return (
      rect.top >= -windowHeight * 0.3 &&
      rect.top <= windowHeight * 0.7
    );
  }

  // Update the scroll handler function
  function handleScroll() {
    sections.forEach(section => {
      if (isElementInViewport(section)) {
        section.classList.add('section-active');
      } else {
        section.classList.remove('section-active');
      }
    });
  }

  // Add scroll event listener
  window.addEventListener('scroll', handleScroll);
  
  // Initial check
  handleScroll();
});
</script>
</body></html>output full untruncated code.