<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cemetery Virtual Tour</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
       @import url('https://fonts.cdnfonts.com/css/euclid-circular-a');
        * {
            font-family: 'Euclid Circular A', sans-serif;
            /* margin: 0 auto; */
        }
      /* body {
        background-color: rgb(251 251 251);
        font-family: 'Helvetica Neue', sans-serif;
      } */
  .container{
      max-width: 1350PX;
  }
      .virtual-tour-section {
        padding: 60px 20px;
      }
  .col-md-4{
      width: 31%;
  }

.btn{
  background-color: #00305C;
  color: white !important;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  margin-bottom: 20px;
  font-size: 15px;
}

.btn:hover{
  background-color: #AB0635 !important;
  color: #fff !important;
}

      .virtual-tour-img {
        border-radius: 10px;
        width: 100%;
        max-width: 370px;
      }
  
      .tour-title {
        font-weight: 500;
        font-size: 25px;
        margin-bottom: 30px;
        color: #080D17;
        text-align: left;
      }
  
      .tour-description {
        font-size: 19px;
        color: #111827;
        margin-bottom: 30px;
        text-align: left;
        line-height: 30px;
      }
  
      .cta-box {
        background-color: #00315C;
        padding: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #fff;
      flex-wrap:wrap;
      }
  
      .cta-text {
        margin: 0;
        font-weight: 500;
        font-size:19px;
      }
  
      .cta-button {
        background-color: #fff;
        color: #000;
        font-weight: 500;
        font-size:19px;
        padding: 15px 20px;
        border-radius: 8px;
        text-decoration: none;
      }
  
      .cta-button:hover {
            background-color:#AB0635;
        color: #ffffff;
      }
      /* responsive */
      @media (max-width:767px) {
        .col-md-4{
      width: 100%;
  }
      }
      @media (max-width:450px){
      .cta-box{
      justify-content:center;
      gap:30px;
      }
      }
    </style>
  
<script type="text/javascript" class="flasher-js">(function() {    var rootScript = 'https://cdn.jsdelivr.net/npm/@flasher/flasher@1.3.2/dist/flasher.min.js';    var 
[]
 = {};    var options = mergeOptions([], 
[]
);    function mergeOptions(first, second) {        return {            context: merge(first.context || {}, second.context || {}),            envelopes: merge(first.envelopes || [], second.envelopes || []),            options: merge(first.options || {}, second.options || {}),            scripts: merge(first.scripts || [], second.scripts || []),            styles: merge(first.styles || [], second.styles || []),        };    }    function merge(first, second) {        if (Array.isArray(first) && Array.isArray(second)) {            return first.concat(second).filter(function(item, index, array) {                return array.indexOf(item) === index;            });        }        return Object.assign({}, first, second);    }    function renderOptions(options) {        if(!window.hasOwnProperty('flasher')) {            console.error('Flasher is not loaded');            return;        }        requestAnimationFrame(function () {            window.flasher.render(options);        });    }    function render(options) {        if ('loading' !== document.readyState) {            renderOptions(options);            return;        }        document.addEventListener('DOMContentLoaded', function() {            renderOptions(options);        });    }    if (1 === document.querySelectorAll('script.flasher-js').length) {        document.addEventListener('flasher:render', function (event) {            render(event.detail);        });            }    if (window.hasOwnProperty('flasher') || !rootScript || document.querySelector('script[src="' + rootScript + '"]')) {        render(options);    } else {        var tag = document.createElement('script');        tag.setAttribute('src', rootScript);        tag.setAttribute('type', 'text/javascript');        tag.onload = function () {            render(options);        };        document.head.appendChild(tag);    }})();</script><script src="https://cdn.jsdelivr.net/npm/@flasher/flasher@1.3.2/dist/flasher.min.js" type="text/javascript"></script><script src="https://cdn.jsdelivr.net/npm/@flasher/flasher@1.3.2/dist/flasher.min.js" type="text/javascript"></script>

<script type="text/javascript" class="flasher-js">(function() {    var rootScript = 'https://cdn.jsdelivr.net/npm/@flasher/flasher@1.3.2/dist/flasher.min.js';    var FLASHER_FLASH_BAG_PLACE_HOLDER = {};    var options = mergeOptions([], 
[]
);    function mergeOptions(first, second) {        return {            context: merge(first.context || {}, second.context || {}),            envelopes: merge(first.envelopes || [], second.envelopes || []),            options: merge(first.options || {}, second.options || {}),            scripts: merge(first.scripts || [], second.scripts || []),            styles: merge(first.styles || [], second.styles || []),        };    }    function merge(first, second) {        if (Array.isArray(first) && Array.isArray(second)) {            return first.concat(second).filter(function(item, index, array) {                return array.indexOf(item) === index;            });        }        return Object.assign({}, first, second);    }    function renderOptions(options) {        if(!window.hasOwnProperty('flasher')) {            console.error('Flasher is not loaded');            return;        }        requestAnimationFrame(function () {            window.flasher.render(options);        });    }    function render(options) {        if ('loading' !== document.readyState) {            renderOptions(options);            return;        }        document.addEventListener('DOMContentLoaded', function() {            renderOptions(options);        });    }    if (1 === document.querySelectorAll('script.flasher-js').length) {        document.addEventListener('flasher:render', function (event) {            render(event.detail);        });            }    if (window.hasOwnProperty('flasher') || !rootScript || document.querySelector('script[src="' + rootScript + '"]')) {        render(options);    } else {        var tag = document.createElement('script');        tag.setAttribute('src', rootScript);        tag.setAttribute('type', 'text/javascript');        tag.onload = function () {            render(options);        };        document.head.appendChild(tag);    }})();</script>

  <body data-aos-easing="ease" data-aos-duration="1200" data-aos-delay="0">
  
    <section class="virtual-tour-section">
      <div class="container">
        <div class="row align-items-center">
          
          <div class="col-md-4 text-center text-md-start mb-4 mb-md-0">
            <img src="https://res.cloudinary.com/djz3wn3fl/image/upload/v1744790700/Cemeteries-of-St.-Charles-County_1_e3khdl.png" alt="Cemeteries of Saint Charles" class="virtual-tour-img">
          </div>
  
          
          <div class="col-md-8">
            <div class="text-end mb-3">
              <button onclick="window.history.back()" class="btn" style="background-color: #00305C; border: none;">
                ← Back
              </button>
            <h2 class="tour-title">Cemetery - Virtual Tours</h2>
            <p class="tour-description">
              Join the St. Charles County Missouri Bicentennial Committee, Lindenwood University and the St. Charles County Historical Society for a virtual tour of cemeteries in St. Charles County with biographies, images, and information about gravesites of historical figures.
            </p>
            <div class="cta-box">
              <p class="cta-text">To start the virtual tour.</p>
              <a href="https://lindenwood.maps.arcgis.com/apps/MapSeries/index.html?appid=d8d490ae6712480f89a11c82292307d0" class="cta-button">Click Here</a>
            </div>
          </div>
        </div>
      </div>
    </div></section>