.elementor-8168 .elementor-element.elementor-element-3c22948{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-8168 .elementor-element.elementor-element-3c22948.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-8168 .elementor-element.elementor-element-3fa1539{--display:flex;--min-height:0px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-8168 .elementor-element.elementor-element-3fa1539.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-8168 .elementor-element.elementor-element-bf800d8{--display:flex;--min-height:283px;--flex-direction:column-reverse;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;border-style:groove;--border-style:groove;--border-radius:70px 70px 70px 70px;box-shadow:16px -19px 0px -8px rgba(0,0,0,0.5) inset;--margin-top:30px;--margin-bottom:0px;--margin-left:-150px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:50px;--padding-right:50px;}.elementor-8168 .elementor-element.elementor-element-bf800d8:not(.elementor-motion-effects-element-type-background), .elementor-8168 .elementor-element.elementor-element-bf800d8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#E4CFCF;}.elementor-8168 .elementor-element.elementor-element-bf800d8.e-con{--align-self:flex-start;--flex-grow:0;--flex-shrink:0;}.elementor-8168 .elementor-element.elementor-element-88c2ce8{width:100%;max-width:100%;margin:-30px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:start;font-size:19px;font-weight:700;line-height:26px;color:#1B14E6;}.elementor-8168 .elementor-element.elementor-element-88c2ce8.elementor-element{--flex-grow:0;--flex-shrink:1;}.elementor-8168 .elementor-element.elementor-element-88c2ce8 p{margin-block-end:20px;}.elementor-8168 .elementor-element.elementor-element-d90e40e{--display:flex;--min-height:0px;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-8168 .elementor-element.elementor-element-d90e40e.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-8168 .elementor-element.elementor-element-bf7035d .elementor-heading-title{font-family:"Tahoma", Sans-serif;font-size:30px;font-weight:700;letter-spacing:-1.4px;color:#DA1212;}.elementor-8168 .elementor-element.elementor-element-78bbd30{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-8168 .elementor-element.elementor-element-965ccbf{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(min-width:768px){.elementor-8168 .elementor-element.elementor-element-3c22948{--width:114.333%;}.elementor-8168 .elementor-element.elementor-element-3fa1539{--width:60.336%;}.elementor-8168 .elementor-element.elementor-element-bf800d8{--width:29%;}.elementor-8168 .elementor-element.elementor-element-d90e40e{--width:79.283%;}}/* Start custom CSS */<div class="due-tool">
  <h2>🤰 Due Date Calculator</h2>

  <label>First Day of Last Period</label>
  <input type="date" id="lmp">

  <button onclick="calculateDueDate()">Calculate</button>

  <div id="resultBox"></div>
</div>

<style>
.due-tool {
  max-width: 420px;
  margin: auto;
  padding: 25px;
  border-radius: 15px;
  background: linear-gradient(135deg, #fff1f2, #ffe4e6);
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
  font-family: 'Segoe UI', sans-serif;
}

.due-tool h2 {
  text-align: center;
  color: #e84393;
  margin-bottom: 20px;
}

.due-tool label {
  font-weight: 600;
  display: block;
  margin-bottom: 8px;
}

.due-tool input {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ddd;
  margin-bottom: 15px;
}

.due-tool button {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: #e84393;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

.due-tool button:hover {
  background: #d63384;
}

#resultBox {
  margin-top: 20px;
  padding: 15px;
  border-radius: 10px;
  background: #ffeaa7;
  display: none;
  font-weight: 500;
}
</style>

<script>
function calculateDueDate() {
  let lmp = document.getElementById("lmp").value;

  if(!lmp){
    alert("Please select a date");
    return;
  }

  let lmpDate = new Date(lmp);

  // Add 280 days
  let dueDate = new Date(lmpDate);
  dueDate.setDate(dueDate.getDate() + 280);

  let today = new Date();
  let diff = today - lmpDate;
  let weeks = Math.floor(diff / (1000 * 60 * 60 * 24 * 7));

  let trimester = "";
  if(weeks < 13){
    trimester = "1st Trimester";
  } else if(weeks < 27){
    trimester = "2nd Trimester";
  } else {
    trimester = "3rd Trimester";
  }

  let result = `
    📅 Due Date: <b>${dueDate.toDateString()}</b><br><br>
    🤱 Current Week: <b>${weeks} weeks</b><br><br>
    🌼 ${trimester}
  `;

  let box = document.getElementById("resultBox");
  box.style.display = "block";
  box.innerHTML = result;
}
</script>/* End custom CSS */