<div class="ice-calc-wrapper">
  <div class="ice-calc-header">
  <h1>Ice Calculator</h1>
  <p>Treemendous Ice - NE Florida</p>
  </div>
  <div class="ice-calc-content">
  <div class="ice-calc-form">
  <h2>Calculate Your Needs</h2>
  <div class="form-group">
  <label>Event Type</label>
  <select id="eventType">
  <option value="party">Party</option>
  <option value="wedding">Wedding</option>
  <option value="corporate">Corporate</option>
  <option value="sports">Sports Event</option>
  </select>
  </div>
  <div class="form-group">
  <label>Number of People: <span id="peopleValue">50</span></label>
    <input type="range" id="peopleSlider" min="10" max="500" value="50">
    </div>
    <div class="form-group">
    <label>Duration (hours): <span id="durationValue">4</span></label>
    <input type="range" id="durationSlider" min="1" max="12" value="4">
    </div>
    <div class="form-group">
    <label>Temperature</label>
    <select id="temperature">
    <option value="cool">Cool (Below 70F)</option>
    <option value="warm" selected>Warm (70-85F)</option>
    <option value="hot">Hot (Above 85F)</option>
    </select>
    </div>
    <h3>Contact Info</h3>
    <div class="form-group">
    <label>Name</label>
    <input type="text" id="name" placeholder="Your name">
    </div>
    <div class="form-group">
    <label>Phone</label>
    <input type="tel" id="phone" placeholder="(904) 555-0123">
    </div>
    </div>
    <div class="ice-calc-estimate">
    <div class="estimate-card">
    <h2>Your Estimate</h2>
    <div class="estimate-item">
    <span>Total Ice:</span>
      <span id="totalIce">75 lbs</span>
      </div>
      <div class="estimate-item">
      <span>Bags Needed:</span>
        <span id="bagsNeeded">4 bags</span>
        </div>
        <div class="estimate-item highlight">
        <span>Estimated Cost:</span>
          <span id="estimatedCost">$34.00</span>
          </div>
          <button class="quote-btn" onclick="alert('Thank you! We will contact you within 1 hour.')">Request Quote</button>
          </div>
          <div class="help-card">
          <h3>Need Help?</h3>
          <p>Call: (904) 813-5255</p>
            <p>Email: treemendousice@outlook.com</p>
              </div>
              </div>
              </div>
              <script>
              document.addEventListener('DOMContentLoaded', function() {
                  var peopleSlider = document.getElementById('peopleSlider');
                  var durationSlider = document.getElementById('durationSlider');
                  var peopleValue = document.getElementById('peopleValue');
                  var durationValue = document.getElementById('durationValue');
                  var eventType = document.getElementById('eventType');
                  var temperature = document.getElementById('temperature');
                  function calculateIce() {
                        var people = parseInt(peopleSlider.value);
                        var duration = parseInt(durationSlider.value);
                        var temp = temperature.value;
                        var event = eventType.value;
                        var baseIce = people * 1.5 * (duration / 4);
                        if (temp === 'hot') baseIce *= 1.5;
                        else if (temp === 'cool') baseIce *= 0.75;
                        if (event === 'wedding' || event === 'corporate') baseIce *= 1.25;
                        else if (event === 'sports') baseIce *= 1.4;
                        var totalIce = Math.round(baseIce);
                        var bags = Math.ceil(totalIce / 20);
                        var cost = bags * 8.50;
                        document.getElementById('totalIce').textContent = totalIce + ' lbs';
                        document.getElementById('bagsNeeded').textContent = bags + ' bags';
                        document.getElementById('estimatedCost').textContent = '$' + cost.toFixed(2);
                  }
                  if (peopleSlider) {
                        peopleSlider.addEventListener('input', function() {
                                peopleValue.textContent = this.value;
                                calculateIce();
                        });
                  }
                  if (durationSlider) {
                        durationSlider.addEventListener('input', function() {
                                durationValue.textContent = this.value;
                                calculateIce();
                        });
                  }
                  if (eventType) eventType.addEventListener('change', calculateIce);
                  if (temperature) temperature.addEventListener('change', calculateIce);
                  calculateIce();
              });
</script>
                        })
                  }
                        })
                  }
                  }
              })
              </div>

.ice-calc-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    min-height: 100vh;
}

.ice-calc-header {
    text-align: center;
    margin-bottom: 40px;
}

.ice-calc-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 10px;
}

.ice-calc-logo h1 {
    margin: 0;
    font-size: 28px;
    color: #1e3a5f;
}

.ice-calc-logo p {
    margin: 0;
    font-size: 14px;
    color: #64748b;
}

.ice-calc-subtitle {
    color: #64748b;
    font-size: 16px;
}

.ice-calc-content {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 30px;
    align-items: start;
}

.ice-calc-form {
    background: white;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.ice-calc-form h2 {
    margin: 0 0 8px;
    font-size: 20px;
    color: #1e3a5f;
}

.ice-calc-form > p {
    margin: 0 0 24px;
    color: #64748b;
    font-size: 14px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #334155;
    font-size: 14px;
}

.form-group select,
.form-group input[type="text"],
.form-group input[type="tel"],
.form-group input[type="email"] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    color: #334155;
    background: white;
}

.slider-container {
    display: flex;
    align-items: center;
    gap: 16px;
}

.slider-container input[type="range"] {
    flex: 1;
    height: 8px;
    -webkit-appearance: none;
    background: #e2e8f0;
    border-radius: 4px;
}

.slider-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: #0ea5e9;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.slider-value {
    font-size: 24px;
    font-weight: 600;
    color: #0ea5e9;
    min-width: 60px;
    text-align: right;
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #94a3b8;
    margin-top: 4px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

hr {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 24px 0;
}

.ice-calc-form h3 {
    margin: 0 0 16px;
    font-size: 16px;
    color: #1e3a5f;
}

.ice-calc-estimate {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.estimate-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.estimate-card h2 {
    margin: 0 0 4px;
    font-size: 18px;
    color: #1e3a5f;
}

.estimate-card > p {
    margin: 0 0 20px;
    color: #94a3b8;
    font-size: 13px;
}

.estimate-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
    margin-bottom: 12px;
}

.estimate-item.highlight {
    background: #fff7ed;
    border: 1px solid #fed7aa;
}

.estimate-icon {
    font-size: 24px;
}

.estimate-label {
    display: block;
    font-size: 13px;
    color: #64748b;
}

.estimate-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: #1e3a5f;
}

.estimate-value.cost {
    color: #ea580c;
}

.ice-calc-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    min-height: 100vh;
}

.ice-calc-header {
    text-align: center;
    margin-bottom: 40px;
}

.ice-calc-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 10px;
}

.ice-calc-logo h1 {
    margin: 0;
    font-size: 28px;
    color: #1e3a5f;
}

.ice-calc-logo p {
    margin: 0;
    font-size: 14px;
    color: #64748b;
}

.ice-calc-subtitle {
    color: #64748b;
    font-size: 16px;
}

.ice-calc-content {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 30px;
    align-items: start;
}

.ice-calc-form {
    background: white;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.ice-calc-form h2 {
    margin: 0 0 8px;
    font-size: 20px;
    color: #1e3a5f;
}

.ice-calc-form > p {
    margin: 0 0 24px;
    color: #64748b;
    font-size: 14px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #334155;
    font-size: 14px;
}

.form-group select,
.form-group input[type="text"],
.form-group input[type="tel"],
.form-group input[type="email"] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    color: #334155;
    background: white;
}

.slider-container {
    display: flex;
    align-items: center;
    gap: 16px;
}

.slider-container input[type="range"] {
    flex: 1;
    height: 8px;
    -webkit-appearance: none;
    background: #e2e8f0;
    border-radius: 4px;
}

.slider-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: #0ea5e9;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.slider-value {
    font-size: 24px;
    font-weight: 600;
    color: #0ea5e9;
    min-width: 60px;
    text-align: right;
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #94a3b8;
    margin-top: 4px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

hr {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 24px 0;
}

.ice-calc-form h3 {
    margin: 0 0 16px;
    font-size: 16px;
    color: #1e3a5f;
}

.ice-calc-estimate {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.estimate-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.estimate-card h2 {
    margin: 0 0 4px;
    font-size: 18px;
    color: #1e3a5f;
}

.estimate-card > p {
    margin: 0 0 20px;
    color: #94a3b8;
    font-size: 13px;
}

.estimate-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
    margin-bottom: 12px;
}

.estimate-item.highlight {
    background: #fff7ed;
    border: 1px solid #fed7aa;
}

.estimate-icon {
    font-size: 24px;
}

.estimate-label {
    display: block;
    font-size: 13px;
    color: #64748b;
}

.estimate-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: #1e3a5f;
}

.estimate-value.cost {
    color: #ea580c;
}

.quote-btn {
    width: 100%;
    padding: 16px;
    background: #ea580c;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
    transition: background 0.2s;
}

.quote-btn:hover {
    background: #c2410c;
}

.quote-note {
    text-align: center;
    font-size: 12px;
    color: #94a3b8;
    margin: 12px 0 0;
}

.help-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.help-card h3 {
    margin: 0 0 16px;
    font-size: 16px;
    color: #1e3a5f;
}

.help-card p {
    margin: 0 0 12px;
    font-size: 14px;
    color: #64748b;
}

.help-card strong {
    color: #0ea5e9;
}

@media (max-width: 900px) {
  .ice-calc-content {
        grid-template-columns: 1fr;
  }
  .form-row {
        grid-template-columns: 1fr;
  }
}
  }
  }
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}