CINXE.COM

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta content="width=device-width, initial-scale=1.0" name="viewport"><title></title><link rel="icon" href="https://builder.bootstrapmade.com/assets/img/favicon.png" type="image/png"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600;1,700&family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"><style id="builder-fonts-styles"></style><link href="https://builder.bootstrapmade.com/static/vendors/bootstrap/css/bootstrap.css?v=12" rel="stylesheet"><link href="https://builder.bootstrapmade.com/static/vendors/bootstrap-icons/bootstrap-icons.css?v=12" rel="stylesheet"><link rel="stylesheet" data-name="vs/editor/editor.main" href="https://builder.bootstrapmade.com/assets/vs/editor/editor.main.css"><link href="https://builder.bootstrapmade.com/assets/css/main.css?v=4021131252" rel="stylesheet"></head><body class="builder-mode"><div class="toggle-loading position-fixed"><div class="loading-bar"></div><div class="loading-bar"></div><div class="loading-bar"></div><div class="loading-bar"></div></div><header class="header fixed-top"><div class="d-flex align-items-center"> <a href="https://builder.bootstrapmade.com/demo/" title="Projects Dashboard" class="dashboard"><i class="bi bi-house-door"></i></a> <a href="" class="project-options" title="QuickStart Demo Project Options"> <span>QuickStart Demo</span> <i class="bi bi-gear"></i> </a></div><div style="justify-self: center; display: flex;"><div class="pages d-flex align-items-center position-relative"><div class="current d-flex align-items-center"> <span class="name me-auto"></span> <i class="bi bi-gear options" title="Page Options"></i> <i class="bi bi-plus-lg new-page" title="New Page"></i> <i class="bi bi-arrow-clockwise reload d-none" title="Relaod Pages"></i></div><ul class="list flex-column"></ul></div><div class="mode d-flex"> <a href="" data-mode="builder" title="Builder" class="active"><i class="bi bi-hdd-stack"></i> <span class="d-none d-lg-flex">Builder</span></a> <a href="" data-mode="preview-desktop" title="Desktop Preview - Full Width" data-width="100%" data-height="100%"><i class="bi bi-display"></i></a> <a href="" data-mode="preview-tablet" title="Tablet Preview - 768px" data-width="768px" data-height="1024px" class="d-none d-lg-flex"><i class="bi bi-tablet"></i></a> <a href="" data-mode="preview-mobile" title="Mobile Preview - 360px" data-width="360px" data-height="640px" class="d-none d-lg-flex"><i class="bi bi-phone"></i></a></div></div><div class="actions d-flex align-items-center"> <a href="" class="open-help-center help-btns d-none d-xl-flex align-items-center" data-nav="#help-changelog" title="Changelog"><i class="bi bi-clock-history"></i> <span style="font-size: 14px; padding-left: 4px;">Changelog</span></a> <a href="" class="open-help-center-starter help-btns d-none d-md-flex align-items-center ms-3" title="Help Center"><i class="bi bi-question-circle"></i> <span style="font-size: 14px; padding-left: 4px;">Help</span></a> <a href="" class="save-project saved d-flex align-items-center"><i class="bi bi-save"></i><span class="d-inline-block save-title">Saved</span></a> <a href="" class="export-project d-flex align-items-center"><i class="bi bi-shuffle"></i><span class="d-inline-block">Export</span></a></div></header><div id="builder-container"><div id="builder-wrapper"><iframe id="builder" frameborder="0" sandbox="allow-same-origin allow-scripts allow-forms"></iframe></div></div><div id="builder-sizes"></div><div id="left-panel"><div class="panel-item panel-project-options d-none"><div class="panels-header d-flex align-items-center justify-content-between"><h3><i class="bi bi-gear"></i>Project Options</h3> <a href="" class="close-panels"><i class="bi bi-x"></i></a></div><div class="panels-body custom-scrollbars"><form id="pjo-form"><div class="option-item active"><h4 class="option-item-toggle"> <span>Colors</span> <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><path d="m5.2 7l-5-4.9 1.4-1.5 6.4 6.4-6.4 6.4-1.4-1.4z"></path></svg></h4><div class="option-content"><h4 class="ps-0 pt-2"> <span>Global Colors</span></h4><div id="pjo-colors-form" class="mt-1"><div class="row g-1 builder-color-picker d-flex"><div class="col builder-color-picker-item project-options-colors-background"> <span data-bs-toggle="tooltip" data-bs-title="Background Color">Backgrnd</span> <input type="text" class="form-control project-options-colors" data-colorname="background"></div><div class="col builder-color-picker-item project-options-colors-default"> <span data-bs-toggle="tooltip" data-bs-title="Default Color">Default</span> <input type="text" class="form-control project-options-colors" data-colorname="default"></div><div class="col builder-color-picker-item project-options-colors-heading"> <span data-bs-toggle="tooltip" data-bs-title="Heading Color">Heading</span> <input type="text" class="form-control project-options-colors" data-colorname="heading"></div><div class="col builder-color-picker-item project-options-colors-accent"> <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Accent Color">Accent</span> <input type="text" class="form-control project-options-colors" data-colorname="accent"></div><div class="col builder-color-picker-item project-options-colors-surface"> <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Surface Color">Surface</span> <input type="text" class="form-control project-options-colors" data-colorname="surface"></div><div class="col builder-color-picker-item project-options-colors-contrast"> <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Contrast Color">Contrast</span> <input type="text" class="form-control project-options-colors" data-colorname="contrast"></div></div></div><div id="pjo-nav-colors-form" class="mt-4"><div class="row g-1 builder-color-picker d-flex"><div class="col builder-color-picker-item nav-menu-colors-nav"> <span data-bs-toggle="tooltip" data-bs-title="Nav Links Color">Nav</span> <input type="text" class="form-control nav-menu-colors" data-colorname="nav"></div><div class="col builder-color-picker-item nav-menu-colors-nav-hover"> <span data-bs-toggle="tooltip" data-bs-title="Nav Links Hover & Active Color">Nav Hov</span> <input type="text" class="form-control nav-menu-colors" data-colorname="nav-hover"></div><div class="col builder-color-picker-item nav-menu-colors-nav-mobile-background"> <span data-bs-toggle="tooltip" data-bs-title="Mobile Nav Background Color">Mob BG</span> <input type="text" class="form-control nav-menu-colors" data-colorname="nav-mobile-background"></div><div class="col builder-color-picker-item nav-menu-colors-nav-dropdown-background"> <span data-bs-toggle="tooltip" data-bs-title="Dropdown Background Color">Drop BG</span> <input type="text" class="form-control nav-menu-colors" data-colorname="nav-dropdown-background"></div><div class="col builder-color-picker-item nav-menu-colors-nav-dropdown"> <span data-bs-toggle="tooltip" data-bs-title="Dropdown Links Color">Drop Nav</span> <input type="text" class="form-control nav-menu-colors" data-colorname="nav-dropdown"></div><div class="col builder-color-picker-item nav-menu-colors-nav-dropdown-hover"> <span data-bs-toggle="tooltip" data-bs-title="Dropdown Links Hover & Active Color">Drop HOV</span> <input type="text" class="form-control nav-menu-colors" data-colorname="nav-dropdown-hover"></div></div></div><div class="options-help"> <a href="" class="open-help-center" data-nav="#help-global-colors"><i class="bi bi-question-circle"></i> <span>Help</span></a></div><h4 class="ps-0 pt-0"> <span>Color Presets</span></h4><div id="pjo-color-presets" class="mt-1"></div> <a href="" id="pjo-new-color-preset" class="option-editor-button mt-3 mb-0 justify-content-center"><i class="bi bi-plus-circle"></i> <span>New Color Preset</span></a><div class="options-help"> <a href="" class="open-help-center" data-nav="#help-color-presets"><i class="bi bi-question-circle"></i> <span>Help</span></a></div></div></div><div class="option-item active"><h4 class="option-item-toggle"><span>Fonts</span> <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><path d="m5.2 7l-5-4.9 1.4-1.5 6.4 6.4-6.4 6.4-1.4-1.4z"></path></svg></h4><div class="option-content"><div id="pjo-default-font" class="inline-form-field"> <label class="form-label align-self-start pt-2 fw-normal">Default Font</label><div class="options-select-font w-100"><div class="options-select-font-heading d-flex justify-content-between align-items-center"><h3 data-fontname="default"></h3> <i class="bi bi-chevron-down"></i></div><div class="options-select-font-content"> <input type="text" class="form-control options-select-font-filter" placeholder="Filter Fonts"><ul class="options-select-font-items custom-scrollbars"></ul></div></div></div><div id="pjo-heading-font" class="mt-3 inline-form-field"> <label class="form-label align-self-start pt-2 fw-normal" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Used mostly in headings and titles">Heading Font</label><div class="options-select-font w-100"><div class="options-select-font-heading d-flex justify-content-between align-items-center"><h3 data-fontname="heading"></h3> <i class="bi bi-chevron-down"></i></div><div class="options-select-font-content"> <input type="text" class="form-control options-select-font-filter" placeholder="Filter Fonts"><ul class="options-select-font-items custom-scrollbars"></ul></div></div></div><div id="pjo-nav-font" class="mt-3 inline-form-field"> <label class="form-label align-self-start pt-2 fw-normal" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Used mostly in navigation menu and subheadings">Nav Font</label><div class="options-select-font w-100"><div class="options-select-font-heading d-flex justify-content-between align-items-center"><h3 data-fontname="nav"></h3> <i class="bi bi-chevron-down"></i></div><div class="options-select-font-content"> <input type="text" class="form-control options-select-font-filter" placeholder="Filter Fonts"><ul class="options-select-font-items custom-scrollbars"></ul></div></div></div><div class="options-help"> <a href="" class="open-help-center" data-nav="#help-fonts"><i class="bi bi-question-circle"></i> <span>Help</span></a></div></div></div><div class="option-item"><h4 class="option-item-toggle"><span>Global Styles</span> <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><path d="m5.2 7l-5-4.9 1.4-1.5 6.4 6.4-6.4 6.4-1.4-1.4z"></path></svg></h4><div class="option-content pt-0"> <a href="" class="pjo-global-styles-editor option-editor-button mt-2 mb-0"><i class="bi bi-code-slash"></i> <span>Edit Global Styles</span></a><div class="options-help"> <a href="" class="open-help-center" data-nav="#help-global-styles"><i class="bi bi-question-circle"></i> <span>Help</span></a></div></div></div><div class="option-item"><h4 class="option-item-toggle"><span>Page Title Template</span> <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><path d="m5.2 7l-5-4.9 1.4-1.5 6.4 6.4-6.4 6.4-1.4-1.4z"></path></svg></h4><div id="pjo-page-title" class="option-content"><h4 class="ps-0 pt-0 mb-0 pb-2"> <span>Current Template</span></h4><div class="options-select-current"> <span class="selected-section"><i class="bi bi-check2"></i></span> <img src="" alt="Current Template" class="img-fluid"> <a href="" class="options-select-editor"><i class="bi bi-code-slash"></i> <span>Customize</span></a></div><div class="options-help" style="margin-top: -15px;"> <a href="" class="open-help-center" data-nav="#help-page-title-template"><i class="bi bi-question-circle"></i> <span>Help</span></a></div><h4 class="ps-0 pt-0 mb-0 pb-1"> <span>Change Template</span></h4> <small class="mt-0 mb-2 p-0">Changing template will override any customizations made to the current template.</small><div class="options-select"><ul class="options-select-items custom-scrollbars"></ul></div></div></div><div class="option-item"><h4 class="option-item-toggle"><span>Section Title Template</span> <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><path d="m5.2 7l-5-4.9 1.4-1.5 6.4 6.4-6.4 6.4-1.4-1.4z"></path></svg></h4><div id="pjo-section-title" class="option-content"><h4 class="ps-0 pt-0 mb-0 pb-2"> <span>Current Template</span></h4><div class="options-select-current"> <span class="selected-section"><i class="bi bi-check2"></i></span> <img src="" alt="Current Template" class="img-fluid"> <a href="" class="options-select-editor"><i class="bi bi-code-slash"></i> <span>Customize</span></a></div><div class="options-help" style="margin-top: -15px;"> <a href="" class="open-help-center" data-nav="#help-section-title-template"><i class="bi bi-question-circle"></i> <span>Help</span></a></div><h4 class="ps-0 pt-0 mb-0 pb-1"> <span>Change Template</span></h4> <small class="mt-0 mb-2 p-0">Changing template will override any customizations made to the current template.</small><div class="options-select"><ul class="options-select-items custom-scrollbars"></ul></div></div></div><div class="option-item"><h4 class="option-item-toggle"><span>Widgets Base Template</span> <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><path d="m5.2 7l-5-4.9 1.4-1.5 6.4 6.4-6.4 6.4-1.4-1.4z"></path></svg></h4><div id="pjo-widgets-base-template" class="option-content"><h4 class="ps-0 pt-0 mb-0 pb-2"> <span>Current Template</span></h4><div class="options-select-current"> <span class="selected-section"><i class="bi bi-check2"></i></span> <img src="" alt="Current Template" class="img-fluid"> <a href="" class="options-select-editor"><i class="bi bi-code-slash"></i> <span>Customize</span></a></div><div class="options-help" style="margin-top: -15px;"> <a href="" class="open-help-center" data-nav="#help-widget-base-template"><i class="bi bi-question-circle"></i> <span>Help</span></a></div><h4 class="ps-0 pt-0 mb-0 pb-1"> <span>Change Template</span></h4> <small class="mt-0 mb-2 p-0">Changing template will override any customizations made to the current template.</small><div class="options-select"><ul class="options-select-items custom-scrollbars"></ul></div></div></div><div class="option-item"><h4 class="option-item-toggle"><span>Icon Packs</span> <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><path d="m5.2 7l-5-4.9 1.4-1.5 6.4 6.4-6.4 6.4-1.4-1.4z"></path></svg></h4><div id="pjo-icons" class="option-content"> <small class="pt-0">Include additional icon packs and use them in your custom code.</small><div class="form-check form-switch mt-2"> <input class="form-check-input" type="checkbox" checked disabled> <label class="form-check-label">Bootstrap Icons</label> <a href="https://icons.getbootstrap.com/" target="_blank" style="font-size: 14px; margin-left: 8px;"><i class="bi bi-box-arrow-up-right"></i></a></div><div class="form-check form-switch mt-2"> <input class="form-check-input" type="checkbox" id="pjo-icons-remixicon"> <label class="form-check-label option-item-switch-label">Remix Icons</label> <a href="https://remixicon.com/" target="_blank" style="font-size: 14px; margin-left: 8px;"><i class="bi bi-box-arrow-up-right"></i></a></div><div class="form-check form-switch mt-2"> <input class="form-check-input" type="checkbox" id="pjo-icons-boxicons"> <label class="form-check-label option-item-switch-label">Box Icons</label> <a href="https://boxicons.com/" target="_blank" style="font-size: 14px; margin-left: 8px;"><i class="bi bi-box-arrow-up-right"></i></a></div><div class="form-check form-switch mt-2"> <input class="form-check-input" type="checkbox" id="pjo-icons-fontawesome"> <label class="form-check-label option-item-switch-label">Font Awesome Free</label> <a href="https://fontawesome.com/search?m=free&o=r" target="_blank" style="font-size: 14px; margin-left: 8px;"><i class="bi bi-box-arrow-up-right"></i></a></div><div class="options-help"> <a href="" class="open-help-center" data-nav="#help-icon-packs"><i class="bi bi-question-circle"></i> <span>Help</span></a></div></div></div><div class="option-item"><h4 class="option-item-toggle"><span>Global Custom Code</span> <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><path d="m5.2 7l-5-4.9 1.4-1.5 6.4 6.4-6.4 6.4-1.4-1.4z"></path></svg></h4><div class="option-content pt-0"> <a href="" class="pjo-custom-code-editor option-editor-button mt-2 mb-0"><i class="bi bi-code-slash"></i> <span>Edit Global Custom Code</span></a><div class="options-help"> <a href="" class="open-help-center" data-nav="#help-custom-code"><i class="bi bi-question-circle"></i> <span>Help</span></a></div></div></div><div class="option-item"><h4><div class="form-check form-switch"> <input class="form-check-input" type="checkbox" id="pjo-aos"> <label class="form-check-label option-item-switch-label">Animation On Scroll</label></div> <a href="" class="open-help-center" data-nav="#help-aos"><i class="bi bi-question-circle"></i></a></h4></div><div class="option-item"><h4><div class="form-check form-switch"> <input class="form-check-input option-item-switch" type="checkbox" id="pjo-scrolltop"> <label class="form-check-label option-item-switch-label">Scroll Top Button</label></div> <a class="option-item-toggle" id="pjo-scrolltop-toggle"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><path d="m5.2 7l-5-4.9 1.4-1.5 6.4 6.4-6.4 6.4-1.4-1.4z"></path></svg></a></h4><div id="pjo-scrolltop-template" class="option-content"><h4 class="ps-0 pt-0 mb-0 pb-2"> <span>Current Template</span></h4><div class="options-select-current"> <span class="selected-section"><i class="bi bi-check2"></i></span> <img src="" alt="Current Template" class="img-fluid"> <a href="" class="options-select-editor"><i class="bi bi-code-slash"></i> <span>Customize</span></a></div><h4 class="ps-0 pt-0 mb-0 pb-1"> <span>Change Template</span></h4> <small class="mt-0 mb-2 p-0">Changing template will override any customizations made to the current template.</small><div class="options-select"><ul class="options-select-items custom-scrollbars"></ul></div></div></div><div class="option-item"><h4><div class="form-check form-switch mb-0"> <input class="form-check-input option-item-switch" type="checkbox" id="pjo-preloader"> <label class="form-check-label option-item-switch-label">Page Preloader</label></div> <a class="option-item-toggle" id="pjo-preloader-toggle"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><path d="m5.2 7l-5-4.9 1.4-1.5 6.4 6.4-6.4 6.4-1.4-1.4z"></path></svg></a></h4><div id="pjo-preloader-template" class="option-content"> <small class="mt-0 pt-0 mb-3">The preloader feature is not available for preview, but will be included in the exported project.</small><h4 class="ps-0 pt-0 mb-0 pb-2"> <span>Current Template</span></h4><div class="options-select-current"> <span class="selected-section"><i class="bi bi-check2"></i></span> <img src="" alt="Current Template" class="img-fluid"> <a href="" class="options-select-editor"><i class="bi bi-code-slash"></i> <span>Customize</span></a></div><h4 class="ps-0 pt-0 mb-0 pb-1"> <span>Change Template</span></h4> <small class="mt-0 mb-2 p-0">Changing template will override any customizations made to the current template.</small><div class="options-select"><ul class="options-select-items custom-scrollbars"></ul></div></div></div></form></div></div><div class="panel-item panel-components d-none"></div></div><div id="right-panel"><div class="panel-item panel-section-options d-none"><div class="panels-header d-flex align-items-center justify-content-between"><h3><i class="bi bi-gear"></i> Section Options</h3> <a href="" class="close-panels"><i class="bi bi-x"></i></a></div><div class="panels-body custom-scrollbars"><form id="so-form"><div id="so-id-option" class="option-item active"><h4 class="option-item-toggle"><span>Section ID</span> <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><path d="m5.2 7l-5-4.9 1.4-1.5 6.4 6.4-6.4 6.4-1.4-1.4z"></path></svg></h4><div id="so-id-form" class="option-content"><div class="input-group"> <span class="input-group-text">#</span> <input type="text" class="form-control" id="so-id"><button type="button" class="btn btn-primary" id="so-id-update"><span class="spinner-border spinner-border-sm d-none"></span> Update</button> <small>The section ID should be unique across all current project sections.</small> <small class="validation"></small></div></div></div><div class="option-item" id="so-section-title-option"><h4><div class="form-check form-switch"> <input class="form-check-input" type="checkbox" id="so-section-title"> <label class="form-check-label" for="so-section-title">Show Section Title</label></div></h4></div><div class="option-item active"><h4 class="option-item-toggle"> <span>Color Preset</span> <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><path d="m5.2 7l-5-4.9 1.4-1.5 6.4 6.4-6.4 6.4-1.4-1.4z"></path></svg></h4><div id="so-color-preset" class="option-content pt-0"><ul class="color-presets-list"></ul></div></div><div class="option-item" id="so-colors-option"><h4><div class="form-check form-switch"> <input class="form-check-input option-item-switch option-item-scroll" type="checkbox" id="so-custom-colors"> <label class="form-check-label option-item-switch-label option-item-scroll">Custom Colors</label></div> <a class="option-item-toggle option-item-scroll" id="so-colors-toggle"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><path d="m5.2 7l-5-4.9 1.4-1.5 6.4 6.4-6.4 6.4-1.4-1.4z"></path></svg></a></h4><div id="so-custom-colors-form" class="option-content pt-0"> <small class="pt-0 pb-2">The unset colors will inherit the global colors, which can be set from the <a href="" class="project-options">project options</a>.</small><div class="row g-1 builder-color-picker d-flex"><div class="col builder-color-picker-item section-options-colors-background"> <span data-bs-toggle="tooltip" data-bs-title="Background Color">Backgrnd</span> <input type="text" class="form-control section-options-colors" data-colorname="background"></div><div class="col builder-color-picker-item section-options-colors-default"> <span data-bs-toggle="tooltip" data-bs-title="Default Color">Default</span> <input type="text" class="form-control section-options-colors" data-colorname="default"></div><div class="col builder-color-picker-item section-options-colors-heading"> <span data-bs-toggle="tooltip" data-bs-title="Heading Color">Heading</span> <input type="text" class="form-control section-options-colors" data-colorname="heading"></div><div class="col builder-color-picker-item section-options-colors-accent"> <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Accent Color">Accent</span> <input type="text" class="form-control section-options-colors" data-colorname="accent"></div><div class="col builder-color-picker-item section-options-colors-surface"> <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Surface Color">Surface</span> <input type="text" class="form-control section-options-colors" data-colorname="surface"></div><div class="col builder-color-picker-item section-options-colors-contrast"> <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Contrast Color">Contrast</span> <input type="text" class="form-control section-options-colors" data-colorname="contrast"></div></div></div></div></form></div></div><div class="panel-item panel-page-options d-none"><div class="panels-header d-flex align-items-center justify-content-between"><h3><i class="bi bi-gear"></i> <span>Page Options</span></h3> <a href="" class="close-panels"><i class="bi bi-x"></i></a></div><div class="panels-body custom-scrollbars"><div class="option-item active page-title-options-exclude" id="po-name-options"><h4 class="option-item-toggle"><span>Page Name</span> <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><path d="m5.2 7l-5-4.9 1.4-1.5 6.4 6.4-6.4 6.4-1.4-1.4z"></path></svg></h4><div id="po-name-form" class="option-content"><div class="input-group"> <input type="text" class="form-control" id="po-name"> <span class="input-group-text">.html</span></div> <small class="validation"></small></div></div><div class="option-item"><h4 class="option-item-toggle"><span>Page Base Template</span> <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><path d="m5.2 7l-5-4.9 1.4-1.5 6.4 6.4-6.4 6.4-1.4-1.4z"></path></svg></h4><div id="po-template" class="option-content"><h4 class="ps-0 pt-0 mb-0 pb-2"> <span>Current Template</span></h4><div class="options-select-current"> <span class="selected-section"><i class="bi bi-check2"></i></span> <img src="" alt="Current Template" class="img-fluid"> <a href="" class="options-select-editor"><i class="bi bi-code-slash"></i> <span>Customize</span></a></div><div class="options-help" style="margin-top: -15px;"> <a href="" class="open-help-center" data-nav="#help-page-base-template"><i class="bi bi-question-circle"></i> <span>Help</span></a></div><h4 class="ps-0 pt-0 mb-0 pb-1"> <span>Change Template</span></h4> <small class="mt-0 mb-2 p-0">Changing template will override any customizations made to the current template.</small><div class="options-select"><ul class="options-select-items custom-scrollbars"></ul></div></div></div><div class="option-item"><h4><div class="form-check form-switch"> <input class="form-check-input" type="checkbox" id="po-page-title"> <label class="form-check-label" for="po-page-title">Show Page Title</label></div> <a href="" class="open-help-center" data-nav="#help-page-title"><i class="bi bi-question-circle"></i></a></h4></div><div class="option-item" id="po-page-title-colors-option"><h4><div class="form-check form-switch"> <input class="form-check-input option-item-switch" type="checkbox" id="po-page-title-custom-colors"> <label class="form-check-label option-item-switch-label">Page Title Custom Colors</label></div> <a class="option-item-toggle" id="po-page-title-custom-colors-toggle"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><path d="m5.2 7l-5-4.9 1.4-1.5 6.4 6.4-6.4 6.4-1.4-1.4z"></path></svg></a></h4><div id="po-page-title-custom-colors-form" class="option-content"><div class="row g-1 builder-color-picker d-flex"><div class="col builder-color-picker-item page-options-colors-background"> <span data-bs-toggle="tooltip" data-bs-title="Background Color">Backgrnd</span> <input type="text" class="form-control page-options-colors" data-colorname="background"></div><div class="col builder-color-picker-item page-options-colors-default"> <span data-bs-toggle="tooltip" data-bs-title="Default Color">Default</span> <input type="text" class="form-control page-options-colors" data-colorname="default"></div><div class="col builder-color-picker-item page-options-colors-heading"> <span data-bs-toggle="tooltip" data-bs-title="Heading Color">Heading</span> <input type="text" class="form-control page-options-colors" data-colorname="heading"></div><div class="col builder-color-picker-item page-options-colors-accent"> <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Accent Color">Accent</span> <input type="text" class="form-control page-options-colors" data-colorname="accent"></div><div class="col builder-color-picker-item page-options-colors-surface"> <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Surface Color">Surface</span> <input type="text" class="form-control page-options-colors" data-colorname="surface"></div><div class="col builder-color-picker-item page-options-colors-contrast"> <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Contrast Color">Contrast</span> <input type="text" class="form-control page-options-colors" data-colorname="contrast"></div></div></div></div><div class="option-item"><h4 class="option-item-toggle"><span>Page Meta Tags</span> <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><path d="m5.2 7l-5-4.9 1.4-1.5 6.4 6.4-6.4 6.4-1.4-1.4z"></path></svg></h4><div id="po-template" class="option-content"><h4 class="ps-0 pt-0 mb-0 pb-2"> <span>Meta Title</span></h4> <input type="text" class="form-control" id="po-meta-title" maxlength="60"><h4 class="ps-0 pt-0 mt-3 mb-0 pb-2"> <span>Meta Description</span></h4><textarea class="form-control" id="po-meta-description" rows="5" maxlength="160"></textarea><h4 class="ps-0 pt-0 mt-3 mb-0 pb-2"> <span>Meta Keywords</span></h4><textarea class="form-control" id="po-meta-keywords" rows="3" maxlength="255"></textarea></div></div><div class="option-item"><h4 class="option-item-toggle"><span>Page Custom Code</span> <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><path d="m5.2 7l-5-4.9 1.4-1.5 6.4 6.4-6.4 6.4-1.4-1.4z"></path></svg></h4><div class="option-content pt-0"> <a href="" class="po-page-custom-code-editor option-editor-button mt-2 mb-0"><i class="bi bi-code-slash"></i> <span>Edit Page Custom Code</span></a><div class="options-help"> <a href="" class="open-help-center" data-nav="#help-page-custom-code"><i class="bi bi-question-circle"></i> <span>Help</span></a></div></div></div><div class="option-item active"><h4 class="option-item-toggle"><span>Arrange Sections</span> <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><path d="m5.2 7l-5-4.9 1.4-1.5 6.4 6.4-6.4 6.4-1.4-1.4z"></path></svg></h4><div class="option-content" id="po-arrange-sections-form"><ul id="po-arrange-sections" class="p-0"></ul></div></div><div class="option-item" id="po-duplicate-page-option"><h4 class="option-item-toggle"><span>Duplicate Page</span> <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><path d="m5.2 7l-5-4.9 1.4-1.5 6.4 6.4-6.4 6.4-1.4-1.4z"></path></svg></h4><div class="option-content"><form id="po-duplicate-page-form"><div class="mb-3" id="po-duplicate-name-form"><div class="input-group"> <input type="text" class="form-control" id="po-duplicate-name" placeholder="Duplicate Page Name"> <span class="input-group-text">.html</span></div> <small class="validation"></small></div><div class="text-center mb-1"> <button type="button" class="btn btn-primary" id="po-duplicate-save">Duplicate Page</button></div></form></div></div><div class="option-item" id="po-delete-page-option"><h4 class="option-item-toggle"><span>Delete Page</span> <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><path d="m5.2 7l-5-4.9 1.4-1.5 6.4 6.4-6.4 6.4-1.4-1.4z"></path></svg></h4><div class="option-content" id="po-delete-btn"> <button id="po-delete" class="btn btn-outline-danger mt-1 w-100"><i class="bi bi-exclamation-triangle"></i> Confirm & Delete This Page</button></div></div></div></div><div class="panel-item panel-header-options d-none"><div class="panels-header d-flex align-items-center justify-content-between"><h3><i class="bi bi-gear"></i> Header Options</h3> <a href="" class="close-panels"><i class="bi bi-x"></i></a></div><div class="panels-body custom-scrollbars"><form id="ho-form"><div class="option-item"><h4 class="option-item-toggle"><span>Header Template</span><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><path d="m5.2 7l-5-4.9 1.4-1.5 6.4 6.4-6.4 6.4-1.4-1.4z"></path></svg></h4><div id="ho-template" class="option-content"><h4 class="ps-0 pt-0 mb-0 pb-2"> <span>Current Template</span></h4><div class="options-select-current"> <span class="selected-section"><i class="bi bi-check2"></i></span> <img src="" alt="Current Template" class="img-fluid"> <a href="" class="options-select-editor"><i class="bi bi-code-slash"></i> <span>Customize</span></a></div><div class="options-help" style="margin-top: -15px;"> <a href="" class="open-help-center" data-nav="#help-header-template"><i class="bi bi-question-circle"></i> <span>Help</span></a></div><h4 class="ps-0 pt-0 mb-0 pb-1"> <span>Change Template</span></h4> <small class="mt-0 mb-2 p-0">Changing template will override any customizations made to the current template.</small><div class="options-select"><ul class="options-select-items custom-scrollbars"></ul></div></div></div><div class="option-item" id="ho-nav"><h4 class="option-item-toggle"><span>Navmenu Template</span><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><path d="m5.2 7l-5-4.9 1.4-1.5 6.4 6.4-6.4 6.4-1.4-1.4z"></path></svg></h4><div class="option-content"><h4 class="ps-0 pt-0 mb-0 pb-2"> <span>Current Template</span></h4><div class="options-select-current"> <span class="selected-section"><i class="bi bi-check2"></i></span> <img src="" alt="Current Template" class="img-fluid"> <a href="" class="options-select-editor"><i class="bi bi-code-slash"></i> <span>Customize</span></a></div><div class="options-help" style="margin-top: -15px;"> <a href="" class="open-help-center" data-nav="#help-navmenu-template"><i class="bi bi-question-circle"></i> <span>Help</span></a></div><h4 class="ps-0 pt-0 mb-0 pb-1"> <span>Change Template</span></h4> <small class="mt-0 mb-2 p-0">Changing template will override any customizations made to the current template.</small><div class="options-select"><ul class="options-select-items custom-scrollbars"></ul></div></div></div><div class="option-item" id="ho-navmenu-dropdowns-option"><h4 class="option-item-toggle"><span>Navmenu Dropdowns</span> <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><path d="m5.2 7l-5-4.9 1.4-1.5 6.4 6.4-6.4 6.4-1.4-1.4z"></path></svg></h4><div class="option-content pt-0"> <small>Click on the available dropdown items below to add them to your navmenu.</small><ul id="ho-navmenu-dropdowns"><li data-component="classic-dropdown" data-class=""><i class="bi bi-menu-down"></i> <span>Classic Dropdown</span></li><li data-component="listing-dropdown" data-class=".navmenu .listing-dropdown {"><i class="bi bi-list-ul"></i> <span>Listing Dropdown</span></li></ul><div class="options-help"> <a href="" class="open-help-center" data-nav="#help-navmenu-dropdowns"><i class="bi bi-question-circle"></i> <span>Help</span></a></div></div></div><div class="option-item"><h4><div class="form-check form-switch"> <input class="form-check-input" type="checkbox" id="ho-navmenu-scrollspy"> <label class="form-check-label option-item-switch-label">Navmenu Scrollspy</label></div> <a href="" class="open-help-center" data-nav="#help-navmenu-scrollspy"><i class="bi bi-question-circle"></i></a></h4></div><hr><div class="option-item" id="ho-custom-header-option"><h4><div class="form-check form-switch"> <input class="form-check-input option-item-switch" type="checkbox" id="ho-custom-enable"> <label class="form-check-label option-item-switch-label ho-page-name-title"><span style="font-weight: 600;" class="ho-page-name"></span>   Header Options</label></div> <a class="option-item-toggle" id="ho-custom-header-toggle"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><path d="m5.2 7l-5-4.9 1.4-1.5 6.4 6.4-6.4 6.4-1.4-1.4z"></path></svg></a></h4><div id="ho-custom-enable-form" class="option-content pt-0"> <small>Set custom options for the header on <span style="font-weight: 600;" class="ho-page-name"></span></small><div id="ho-custom-top-position-option"><h4 style="margin: 0 0 0 -15px; padding-bottom: 5px;">Position</h4><div id="ho-custom-top-position-form"><div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="ho-custom-top-position" id="ho-custom-position-static" value="static"> <label class="form-check-label mb-0" for="ho-custom-position-static">Static</label></div><div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="ho-custom-top-position" id="ho-custom-position-sticky" value="sticky-top"> <label class="form-check-label mb-0" for="ho-custom-position-sticky">Sticky</label></div><div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="ho-custom-top-position" id="ho-custom-position-fixed" value="fixed-top"> <label class="form-check-label mb-0" for="ho-custom-position-fixed">Fixed</label></div><div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="ho-custom-top-position" id="ho-custom-position-scroll-up-sticky" value="scroll-up-sticky"> <label class="form-check-label mb-0" for="ho-custom-position-scroll-up-sticky">Scroll-Up Sticky</label></div></div></div><h4 style="margin: 0 0 0 -15px; padding-bottom: 5px;">Colors</h4><div id="ho-custom-colors-form"> <small class="pt-0 pb-2">The unset colors will inherit the global header colors.</small><div class="row g-1 builder-color-picker d-flex"><div class="col builder-color-picker-item header-options-colors-background"> <span data-bs-toggle="tooltip" data-bs-title="Background Color">Backgrnd</span> <input type="text" class="form-control header-options-colors" data-colorname="background"></div><div class="col builder-color-picker-item header-options-colors-default"> <span data-bs-toggle="tooltip" data-bs-title="Default Color">Default</span> <input type="text" class="form-control header-options-colors" data-colorname="default"></div><div class="col builder-color-picker-item header-options-colors-heading"> <span data-bs-toggle="tooltip" data-bs-title="Heading Color">Heading</span> <input type="text" class="form-control header-options-colors" data-colorname="heading"></div><div class="col builder-color-picker-item header-options-colors-accent"> <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Accent Color">Accent</span> <input type="text" class="form-control header-options-colors" data-colorname="accent"></div><div class="col builder-color-picker-item header-options-colors-surface"> <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Surface Color">Surface</span> <input type="text" class="form-control header-options-colors" data-colorname="surface"></div><div class="col builder-color-picker-item header-options-colors-contrast"> <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Contrast Color">Contrast</span> <input type="text" class="form-control header-options-colors" data-colorname="contrast"></div></div></div><div id="ho-custom-nav-colors-form" class="mt-3"><div class="row g-1 builder-color-picker d-flex"><div class="col builder-color-picker-item nav-options-colors-custom-nav"> <span data-bs-toggle="tooltip" data-bs-title="Nav Links Color">Nav</span> <input type="text" class="form-control nav-options-colors-custom" data-colorname="nav"></div><div class="col builder-color-picker-item nav-options-colors-custom-nav-hover"> <span data-bs-toggle="tooltip" data-bs-title="Nav Links Hover & Active Color">Nav Hov</span> <input type="text" class="form-control nav-options-colors-custom" data-colorname="nav-hover"></div><div class="col builder-color-picker-item nav-options-colors-custom-nav-mobile-background"> <span data-bs-toggle="tooltip" data-bs-title="Mobile Nav Background Color">Mob BG</span> <input type="text" class="form-control nav-options-colors-custom" data-colorname="nav-mobile-background"></div><div class="col builder-color-picker-item nav-options-colors-custom-nav-dropdown-background"> <span data-bs-toggle="tooltip" data-bs-title="Dropdown Background Color">Drop BG</span> <input type="text" class="form-control nav-options-colors-custom" data-colorname="nav-dropdown-background"></div><div class="col builder-color-picker-item nav-options-colors-custom-nav-dropdown"> <span data-bs-toggle="tooltip" data-bs-title="Dropdown Links Color">Drop Nav</span> <input type="text" class="form-control nav-options-colors-custom" data-colorname="nav-dropdown"></div><div class="col builder-color-picker-item nav-options-colors-custom-nav-dropdown-hover"> <span data-bs-toggle="tooltip" data-bs-title="Dropdown Links Hover & Active Color">Drop HOV</span> <input type="text" class="form-control nav-options-colors-custom" data-colorname="nav-dropdown-hover"></div></div></div><div id="ho-custom-scrolled-colors"><h4 style="margin: 15px 0 0 -15px; padding-bottom: 5px;">Custom Header Colors on Page Scroll</h4><div id="ho-custom-scrolled-colors-form"> <small class="pt-0 pb-2">Set custom header colors as the page is scrolled down.<br>The unset colors will inherit the custom header colors</small><div class="row g-1 builder-color-picker d-flex"><div class="col builder-color-picker-item header-options-colors-background"> <span data-bs-toggle="tooltip" data-bs-title="Background Color">Backgrnd</span> <input type="text" class="form-control header-options-colors" data-colorname="background"></div><div class="col builder-color-picker-item header-options-colors-default"> <span data-bs-toggle="tooltip" data-bs-title="Default Color">Default</span> <input type="text" class="form-control header-options-colors" data-colorname="default"></div><div class="col builder-color-picker-item header-options-colors-heading"> <span data-bs-toggle="tooltip" data-bs-title="Heading Color">Heading</span> <input type="text" class="form-control header-options-colors" data-colorname="heading"></div><div class="col builder-color-picker-item header-options-colors-accent"> <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Accent Color">Accent</span> <input type="text" class="form-control header-options-colors" data-colorname="accent"></div><div class="col builder-color-picker-item header-options-colors-surface"> <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Surface Color">Surface</span> <input type="text" class="form-control header-options-colors" data-colorname="surface"></div><div class="col builder-color-picker-item header-options-colors-contrast"> <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Contrast Color">Contrast</span> <input type="text" class="form-control header-options-colors" data-colorname="contrast"></div></div></div><div id="ho-custom-nav-scrolled-colors-form" class="mt-3"><div class="row g-1 builder-color-picker d-flex"><div class="col builder-color-picker-item nav-options-colors-custom-nav"> <span data-bs-toggle="tooltip" data-bs-title="Nav Links Color">Nav</span> <input type="text" class="form-control nav-options-colors-custom" data-colorname="nav"></div><div class="col builder-color-picker-item nav-options-colors-custom-nav-hover"> <span data-bs-toggle="tooltip" data-bs-title="Nav Links Hover & Active Color">Nav Hov</span> <input type="text" class="form-control nav-options-colors-custom" data-colorname="nav-hover"></div><div class="col builder-color-picker-item nav-options-colors-custom-nav-mobile-background"> <span data-bs-toggle="tooltip" data-bs-title="Mobile Nav Background Color">Mob BG</span> <input type="text" class="form-control nav-options-colors-custom" data-colorname="nav-mobile-background"></div><div class="col builder-color-picker-item nav-options-colors-custom-nav-dropdown-background"> <span data-bs-toggle="tooltip" data-bs-title="Dropdown Background Color">Drop BG</span> <input type="text" class="form-control nav-options-colors-custom" data-colorname="nav-dropdown-background"></div><div class="col builder-color-picker-item nav-options-colors-custom-nav-dropdown"> <span data-bs-toggle="tooltip" data-bs-title="Dropdown Links Color">Drop Nav</span> <input type="text" class="form-control nav-options-colors-custom" data-colorname="nav-dropdown"></div><div class="col builder-color-picker-item nav-options-colors-custom-nav-dropdown-hover"> <span data-bs-toggle="tooltip" data-bs-title="Dropdown Links Hover & Active Color">Drop HOV</span> <input type="text" class="form-control nav-options-colors-custom" data-colorname="nav-dropdown-hover"></div></div></div></div><div class="options-help"> <a href="" class="open-help-center" data-nav="#help-header-options"><i class="bi bi-question-circle"></i> <span>Help</span></a></div></div></div><hr><div class="option-item active"><h4 class="option-item-toggle"> <span>Global Header Options</span> <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><path d="m5.2 7l-5-4.9 1.4-1.5 6.4 6.4-6.4 6.4-1.4-1.4z"></path></svg></h4><div class="option-content pt-0"><div id="ho-top-position-option"><h4 style="margin: 0 0 0 -15px; padding-bottom: 5px;">Position</h4><div id="ho-top-position-form"><div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="ho-top-position" id="ho-position-static" value="static"> <label class="form-check-label mb-0" for="ho-position-static">Static</label></div><div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="ho-top-position" id="ho-position-sticky" value="sticky-top"> <label class="form-check-label mb-0" for="ho-position-sticky">Sticky</label></div><div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="ho-top-position" id="ho-position-fixed" value="fixed-top"> <label class="form-check-label mb-0" for="ho-position-fixed">Fixed</label></div><div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="ho-top-position" id="ho-position-scroll-up-sticky" value="scroll-up-sticky"> <label class="form-check-label mb-0" for="ho-position-scroll-up-sticky">Scroll-Up Sticky</label></div></div></div><h4 style="margin: 0 0 0 -15px; padding-bottom: 5px;">Colors</h4><div id="ho-colors-form"> <small class="pt-0 pb-2">The unset colors will inherit the global colors, which can be set from the <a href="" class="project-options">project options</a>.</small><div class="row g-1 builder-color-picker d-flex"><div class="col builder-color-picker-item header-options-colors-background"> <span data-bs-toggle="tooltip" data-bs-title="Background Color">Backgrnd</span> <input type="text" class="form-control header-options-colors" data-colorname="background"></div><div class="col builder-color-picker-item header-options-colors-default"> <span data-bs-toggle="tooltip" data-bs-title="Default Color">Default</span> <input type="text" class="form-control header-options-colors" data-colorname="default"></div><div class="col builder-color-picker-item header-options-colors-heading"> <span data-bs-toggle="tooltip" data-bs-title="Heading Color">Heading</span> <input type="text" class="form-control header-options-colors" data-colorname="heading"></div><div class="col builder-color-picker-item header-options-colors-accent"> <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Accent Color">Accent</span> <input type="text" class="form-control header-options-colors" data-colorname="accent"></div><div class="col builder-color-picker-item header-options-colors-surface"> <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Surface Color">Surface</span> <input type="text" class="form-control header-options-colors" data-colorname="surface"></div><div class="col builder-color-picker-item header-options-colors-contrast"> <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Contrast Color">Contrast</span> <input type="text" class="form-control header-options-colors" data-colorname="contrast"></div></div></div><div id="ho-nav-colors-form" class="mt-3"><div class="row g-1 builder-color-picker d-flex"><div class="col builder-color-picker-item nav-options-colors-nav"> <span data-bs-toggle="tooltip" data-bs-title="Nav Links Color">Nav</span> <input type="text" class="form-control nav-options-colors" data-colorname="nav"></div><div class="col builder-color-picker-item nav-options-colors-nav-hover"> <span data-bs-toggle="tooltip" data-bs-title="Nav Links Hover & Active Color">Nav Hov</span> <input type="text" class="form-control nav-options-colors" data-colorname="nav-hover"></div><div class="col builder-color-picker-item nav-options-colors-nav-mobile-background"> <span data-bs-toggle="tooltip" data-bs-title="Mobile Nav Background Color">Mob BG</span> <input type="text" class="form-control nav-options-colors" data-colorname="nav-mobile-background"></div><div class="col builder-color-picker-item nav-options-colors-nav-dropdown-background"> <span data-bs-toggle="tooltip" data-bs-title="Dropdown Background Color">Drop BG</span> <input type="text" class="form-control nav-options-colors" data-colorname="nav-dropdown-background"></div><div class="col builder-color-picker-item nav-options-colors-nav-dropdown"> <span data-bs-toggle="tooltip" data-bs-title="Dropdown Links Color">Drop Nav</span> <input type="text" class="form-control nav-options-colors" data-colorname="nav-dropdown"></div><div class="col builder-color-picker-item nav-options-colors-nav-dropdown-hover"> <span data-bs-toggle="tooltip" data-bs-title="Dropdown Links Hover & Active Color">Drop HOV</span> <input type="text" class="form-control nav-options-colors" data-colorname="nav-dropdown-hover"></div></div></div><div id="ho-scrolled-colors"><h4 style="margin: 15px 0 0 -15px; padding-bottom: 5px;">Colors on Page Scroll</h4><div id="ho-scrolled-colors-form"> <small class="pt-0 pb-2">Set custom header colors as the page is scrolled down.<br>The unset colors will inherit the global header colors.</small><div class="row g-1 builder-color-picker d-flex"><div class="col builder-color-picker-item header-options-colors-background"> <span data-bs-toggle="tooltip" data-bs-title="Background Color">Backgrnd</span> <input type="text" class="form-control header-options-colors" data-colorname="background"></div><div class="col builder-color-picker-item header-options-colors-default"> <span data-bs-toggle="tooltip" data-bs-title="Default Color">Default</span> <input type="text" class="form-control header-options-colors" data-colorname="default"></div><div class="col builder-color-picker-item header-options-colors-heading"> <span data-bs-toggle="tooltip" data-bs-title="Heading Color">Heading</span> <input type="text" class="form-control header-options-colors" data-colorname="heading"></div><div class="col builder-color-picker-item header-options-colors-accent"> <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Accent Color">Accent</span> <input type="text" class="form-control header-options-colors" data-colorname="accent"></div><div class="col builder-color-picker-item header-options-colors-surface"> <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Surface Color">Surface</span> <input type="text" class="form-control header-options-colors" data-colorname="surface"></div><div class="col builder-color-picker-item header-options-colors-contrast"> <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Contrast Color">Contrast</span> <input type="text" class="form-control header-options-colors" data-colorname="contrast"></div></div></div><div id="ho-nav-scrolled-colors-form" class="mt-3"><div class="row g-1 builder-color-picker d-flex"><div class="col builder-color-picker-item nav-options-colors-custom-nav"> <span data-bs-toggle="tooltip" data-bs-title="Nav Links Color">Nav</span> <input type="text" class="form-control nav-options-colors-custom" data-colorname="nav"></div><div class="col builder-color-picker-item nav-options-colors-custom-nav-hover"> <span data-bs-toggle="tooltip" data-bs-title="Nav Links Hover & Active Color">Nav Hov</span> <input type="text" class="form-control nav-options-colors-custom" data-colorname="nav-hover"></div><div class="col builder-color-picker-item nav-options-colors-custom-nav-mobile-background"> <span data-bs-toggle="tooltip" data-bs-title="Mobile Nav Background Color">Mob BG</span> <input type="text" class="form-control nav-options-colors-custom" data-colorname="nav-mobile-background"></div><div class="col builder-color-picker-item nav-options-colors-custom-nav-dropdown-background"> <span data-bs-toggle="tooltip" data-bs-title="Dropdown Background Color">Drop BG</span> <input type="text" class="form-control nav-options-colors-custom" data-colorname="nav-dropdown-background"></div><div class="col builder-color-picker-item nav-options-colors-custom-nav-dropdown"> <span data-bs-toggle="tooltip" data-bs-title="Dropdown Links Color">Drop Nav</span> <input type="text" class="form-control nav-options-colors-custom" data-colorname="nav-dropdown"></div><div class="col builder-color-picker-item nav-options-colors-custom-nav-dropdown-hover"> <span data-bs-toggle="tooltip" data-bs-title="Dropdown Links Hover & Active Color">Drop HOV</span> <input type="text" class="form-control nav-options-colors-custom" data-colorname="nav-dropdown-hover"></div></div></div></div><div class="options-help"> <a href="" class="open-help-center" data-nav="#help-header-options"><i class="bi bi-question-circle"></i> <span>Help</span></a></div></div></div></form></div></div><div class="panel-item panel-footer-options d-none"><div class="panels-header d-flex align-items-center justify-content-between"><h3><i class="bi bi-gear"></i> Footer Options</h3> <a href="" class="close-panels"><i class="bi bi-x"></i></a></div><div class="panels-body custom-scrollbars"><form id="fo-form"><div class="option-item"><h4 class="option-item-toggle"><span>Footer Template</span><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><path d="m5.2 7l-5-4.9 1.4-1.5 6.4 6.4-6.4 6.4-1.4-1.4z"></path></svg></h4><div id="fo-template" class="option-content"> <small class="mt-0 mb-3 p-0">Choosing a new template will override any existing customizations.</small><div class="options-select-current"> <span class="selected-section"><i class="bi bi-check2"></i></span> <img src="" alt="Current Template" class="img-fluid"> <a href="" class="options-select-editor"><i class="bi bi-code-slash"></i> <span>Customize</span></a></div><div class="options-help" style="margin-top: -15px;"> <a href="" class="open-help-center" data-nav="#help-footer-template"><i class="bi bi-question-circle"></i> <span>Help</span></a></div><h4 class="ps-0 pt-0 mb-0 pb-1"> <span>Change Template</span></h4> <small class="mt-0 mb-2 p-0">Changing template will override any customizations made to the current template.</small><div class="options-select"><ul class="options-select-items custom-scrollbars"></ul></div></div></div><div class="option-item active"><h4 class="option-item-toggle"> <span>Color Preset</span> <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><path d="m5.2 7l-5-4.9 1.4-1.5 6.4 6.4-6.4 6.4-1.4-1.4z"></path></svg></h4><div id="fo-color-preset" class="option-content pt-0"><ul class="color-presets-list"></ul></div></div><div class="option-item" id="fo-custom-colors-option"><h4><div class="form-check form-switch"> <input class="form-check-input option-item-switch" type="checkbox" id="fo-custom-colors"> <label class="form-check-label option-item-switch-label">Custom Colors</label></div> <a class="option-item-toggle" id="fo-custom-colors-toggle"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><path d="m5.2 7l-5-4.9 1.4-1.5 6.4 6.4-6.4 6.4-1.4-1.4z"></path></svg></a></h4><div id="fo-custom-colors-form" class="option-content"><div class="row g-1 builder-color-picker d-flex"><div class="col builder-color-picker-item footer-options-colors-background"> <span data-bs-toggle="tooltip" data-bs-title="Background Color">Backgrnd</span> <input type="text" class="form-control footer-options-colors" data-colorname="background"></div><div class="col builder-color-picker-item footer-options-colors-default"> <span data-bs-toggle="tooltip" data-bs-title="Default Color">Default</span> <input type="text" class="form-control footer-options-colors" data-colorname="default"></div><div class="col builder-color-picker-item footer-options-colors-heading"> <span data-bs-toggle="tooltip" data-bs-title="Heading Color">Heading</span> <input type="text" class="form-control footer-options-colors" data-colorname="heading"></div><div class="col builder-color-picker-item footer-options-colors-accent"> <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Accent Color">Accent</span> <input type="text" class="form-control footer-options-colors" data-colorname="accent"></div><div class="col builder-color-picker-item footer-options-colors-surface"> <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Surface Color">Surface</span> <input type="text" class="form-control footer-options-colors" data-colorname="surface"></div><div class="col builder-color-picker-item footer-options-colors-contrast"> <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Contrast Color">Contrast</span> <input type="text" class="form-control footer-options-colors" data-colorname="contrast"></div></div></div></div></form></div></div></div><div class="modal fade" id="newPageModal"><div class="modal-dialog" style="max-width: 400px;"><div class="modal-content" ><div class="modal-header justify-content-between"><h5 class="modal-title">Create New Page</h5> <i class="bi bi-x btn-close" data-bs-dismiss="modal"></i></div><div class="modal-body"><div class="mb-3"> <label class="col-form-label" style="font-weight: 500;">Page Name:</label><div class="input-group mb-3"> <input type="text" class="form-control" id="new-page-name" maxlength="64"> <span class="input-group-text">.html</span></div></div><div class="mb-0"> <label class="col-form-label" style="font-weight: 500;">Base Template:</label> <input type="hidden" value="page-base-1" id="add-page-template"><div id="add-page-template-select" class="option-content"><div class="options-select"><ul class="options-select-items custom-scrollbars"></ul></div></div></div><div id="new-page-error" class="alert alert-danger d-none mt-3 mb-0" role="alert"></div></div><div class="modal-footer d-flex justify-content-center"> <button type="button" class="btn btn-primary" id="create-new-page">Create New Page</button> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button></div></div></div></div><div id="errorModal" class="modal fade"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><div class="modal-header d-flex justify-content-between"><h5 class="modal-title">Error</h5> <i class="bi bi-x btn-close" data-bs-dismiss="modal"></i></div><div class="modal-body" id="errorModalBody"><p>Something went wrong. Please try again.</p></div><div class="modal-footer d-felx justify-content-center"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button></div></div></div></div><div class="modal fade" id="helpModal"><div class="modal-dialog modal-xl modal-dialog-scrollable modal-dialog-centered"><div class="modal-content"><div class="modal-header d-flex justify-content-between"><h5 class="modal-title">Help Center</h5> <i class="bi bi-x btn-close" data-bs-dismiss="modal"></i></div><div class="modal-body position-relative help-modal-body"></div></div></div></div><div id="builder-editor"><div id="editor-body" class="editor-theme-light"><div class="builder-resize-bottom builder-resize" style="background-image: url(https://builder.bootstrapmade.com/assets/img/dots-vertical.png);"></div><div class="builder-resize-left builder-resize" style="background-image: url(https://builder.bootstrapmade.com/assets/img/dots-horizontal.png);"></div><div class="builder-resize-right builder-resize" style="background-image: url(https://builder.bootstrapmade.com/assets/img/dots-horizontal.png);"></div><div id="editor-header" class="d-flex justify-content-between"><div id="editor-tabs"></div><div id="editor-actions"> <i id="close-editor" class="bi bi-x" title="Close Editor"></i></div></div><div id="editor-instances"></div><div id="editor-status" class="d-flex align-items-center justify-content-between"><div class="cursor-info">Ln, Col</div><div id="status-actions" class="d-flex align-items-center justify-content-center"> <i id="editor-toggle-theme" class="bi bi-moon" title="Toggle Light Theme"></i> <i id="editor-toggle-autoscale" class="bi bi-arrows-fullscreen" title="Toggle Autoscale Preview"></i> <i id="editor-toggle-word-wrap" class="bi bi-text-wrap" title="Toggle Word Wrap"></i> <i id="editor-open-find" class="bi bi-search" title="Open Find"></i><hr> <svg class="editor-position editor-position-full" data-position="full" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><title>Fullscreen Editor</title> <path d="M 7.8 3 L 16.2 3 C 17.88 3 18.72 3 19.362 3.327 C 19.927 3.615 20.385 4.074 20.673 4.638 C 21 5.28 21 6.12 21 7.8 L 21 16.2 C 21 17.88 21 18.72 20.673 19.362 C 20.385 19.927 19.927 20.385 19.362 20.673 C 18.72 21 17.88 21 16.2 21 L 7.8 21 C 6.12 21 5.28 21 4.638 20.673 C 4.074 20.385 3.615 19.927 3.327 19.362 C 3 18.72 3 17.88 3 16.2 L 3 7.8 C 3 6.12 3 5.28 3.327 4.638 C 3.615 4.074 4.074 3.615 4.638 3.327 C 5.28 3 6.12 3 7.8 3 Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <svg class="editor-position editor-position-left" data-position="left" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><title>Editor on Left</title> <path d="M9 3V21M7.8 3H16.2C17.8802 3 18.7202 3 19.362 3.32698C19.9265 3.6146 20.3854 4.07354 20.673 4.63803C21 5.27976 21 6.11984 21 7.8V16.2C21 17.8802 21 18.7202 20.673 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7202 21 17.8802 21 16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V7.8C3 6.11984 3 5.27976 3.32698 4.63803C3.6146 4.07354 4.07354 3.6146 4.63803 3.32698C5.27976 3 6.11984 3 7.8 3Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <svg class="editor-position editor-position-right" data-position="right" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><title>Editor on Right</title> <path d="M15 3V21M7.8 3H16.2C17.8802 3 18.7202 3 19.362 3.32698C19.9265 3.6146 20.3854 4.07354 20.673 4.63803C21 5.27976 21 6.11984 21 7.8V16.2C21 17.8802 21 18.7202 20.673 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7202 21 17.8802 21 16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V7.8C3 6.11984 3 5.27976 3.32698 4.63803C3.6146 4.07354 4.07354 3.6146 4.63803 3.32698C5.27976 3 6.11984 3 7.8 3Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <svg class="editor-position editor-position-bottom" data-position="bottom" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><title>Editor on Bottom</title> <path d="M3 15H21M7.8 3H16.2C17.8802 3 18.7202 3 19.362 3.32698C19.9265 3.6146 20.3854 4.07354 20.673 4.63803C21 5.27976 21 6.11984 21 7.8V16.2C21 17.8802 21 18.7202 20.673 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7202 21 17.8802 21 16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V7.8C3 6.11984 3 5.27976 3.32698 4.63803C3.6146 4.07354 4.07354 3.6146 4.63803 3.32698C5.27976 3 6.11984 3 7.8 3Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg><hr> <i id="editor-open-command-palette" class="bi bi-gear" title="Open Command Palette"></i></div><div id="editor-status-error" class="d-none"><div class="error-message"></div> <i class="bi bi-x-circle"></i></div></div></div></div> <script>var require = { paths: { vs: 'https://builder.bootstrapmade.com/assets/vs' } }; const builderConfig = { aUrl: 'https://builder.bootstrapmade.com', cUrl: 'https://builder.bootstrapmade.com/static', vUrl: 'https://builder.bootstrapmade.com/static/vendors', pId: 'QuickStart', pv: '2024-08-07 11:08', versions: ['40', '21', '13', '12', '52'], mode: 'demo' };</script> <script src="https://builder.bootstrapmade.com/assets/js/main.min.js?v=4021131252"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-623MLXN245"></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-623MLXN245');</script> </body></html>