.elementor-30241 .elementor-element.elementor-element-a043a63{--display:flex;--min-height:80vh;--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;--justify-content:center;--overlay-opacity:0.48;--margin-top:-43px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-30241 .elementor-element.elementor-element-a043a63:not(.elementor-motion-effects-element-type-background), .elementor-30241 .elementor-element.elementor-element-a043a63 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://inventailorshop.com/wp-content/uploads/2026/02/Billede-03.02.2026-10.54.22.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-30241 .elementor-element.elementor-element-a043a63::before, .elementor-30241 .elementor-element.elementor-element-a043a63 > .elementor-background-video-container::before, .elementor-30241 .elementor-element.elementor-element-a043a63 > .e-con-inner > .elementor-background-video-container::before, .elementor-30241 .elementor-element.elementor-element-a043a63 > .elementor-background-slideshow::before, .elementor-30241 .elementor-element.elementor-element-a043a63 > .e-con-inner > .elementor-background-slideshow::before, .elementor-30241 .elementor-element.elementor-element-a043a63 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;--background-overlay:'';}.elementor-30241 .elementor-element.elementor-element-9ed17d6{padding:0px 0px 0px 31px;}.elementor-30241 .elementor-element.elementor-element-9ed17d6 .elementor-heading-title{font-size:33px;font-weight:700;color:#FFFFFF;}.elementor-30241 .elementor-element.elementor-element-2d21ae8{--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-30241 .elementor-element.elementor-element-bf25fec{--spacer-size:40px;}.elementor-30241 .elementor-element.elementor-element-b990823{padding:0px 0px 0px 25px;}.elementor-30241 .elementor-element.elementor-element-849c422{padding:0px 0px 0px 20px;}.elementor-30241 .elementor-element.elementor-element-60f3fc1{padding:0px 0px 0px 20px;}.elementor-30241 .elementor-element.elementor-element-64f4b0c{--spacer-size:50px;}.elementor-30241 .elementor-element.elementor-element-4f6d3fe{--display:flex;}.elementor-30241 .elementor-element.elementor-element-aee9321{width:100%;max-width:100%;}@media(max-width:768px){.elementor-30241 .elementor-element.elementor-element-a043a63{--min-height:63vh;}}/* Start custom CSS for text-editor, class: .elementor-element-b990823 *//* Headings styling */
.description h2 {
  font-weight: 700 !important;     /* heading zyada bold */
  margin-bottom: 18px !important;  /* heading ke neeche gap */
  margin-top: 40px !important;     /* upar se spacing */
  line-height: 1.3 !important;
}

/* Paragraph styling */
.description p {
  font-weight: 400 !important;     /* paragraph kam bold */
  margin-bottom: 16px !important;  /* paragraphs ke darmiyan gap */
  line-height: 1.8 !important;
}

/* Heading ke baad jo first paragraph ho us ke liye extra smooth spacing */
.description h2 + p {
  margin-top: 10px !important;
}

/* Bullet points ke liye spacing */
.description p br {
  display: block;
  margin-bottom: 6px;
  content: "";
}
/* Headings – zyada bold */
.elementor-30241 .elementor-element.elementor-element-b990823 h1,
.elementor-30241 .elementor-element.elementor-element-b990823 h2,
.elementor-30241 .elementor-element.elementor-element-b990823 h3,
.elementor-30241 .elementor-element.elementor-element-b990823 h4,
.elementor-30241 .elementor-element.elementor-element-b990823 h5,
.elementor-30241 .elementor-element.elementor-element-b990823 h6 {
    font-weight: 800 !important;   /* strong bold */
    margin-bottom: 18px !important;
    line-height: 1.3 !important;
}

/* Paragraph – heading se kam bold */
.elementor-30241 .elementor-element.elementor-element-b990823 p {
    font-weight: 400 !important;   /* normal / light */
    margin-bottom: 16px !important;
    line-height: 1.8 !important;
}

/* Heading ke baad paragraph spacing */
.elementor-30241 .elementor-element.elementor-element-b990823 h1 + p,
.elementor-30241 .elementor-element.elementor-element-b990823 h2 + p,
.elementor-30241 .elementor-element.elementor-element-b990823 h3 + p {
    margin-top: 6px !important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-849c422 */<style>
.cookie-accordion {
  font-family: Arial, sans-serif;
  border: 1px solid #ddd;
}

.accordion-item {
  border-bottom: 1px solid #ddd;
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  padding: 14px;
  cursor: pointer;
  background: #f6f6f6;
  font-weight: 600;
}

.accordion-header:hover {
  background: #ececec;
}

.tag {
  font-size: 12px;
  color: #666;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding: 0 15px;
  background: #fff;
}

.accordion-item.active .accordion-content {
  max-height: 1000px; /* large enough to show content */
  padding: 15px;
}

.consent-btn {
  padding: 8px 14px;
  border: 1px solid #000;
  background: #fff;
  cursor: pointer;
}

.consent-btn:hover {
  background: #000;
  color: #fff;
}
</style>

<div class="cookie-accordion">
  <div class="accordion-item">
    <div class="accordion-header">Section 1 <span class="tag">Info</span></div>
    <div class="accordion-content">
      <table border="1" width="100%">
        <tr><th>Name</th><th>Age</th></tr>
        <tr><td>John</td><td>25</td></tr>
        <tr><td>Jane</td><td>28</td></tr>
      </table>
      <button class="consent-btn">Accept</button>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">Section 2 <span class="tag">Info</span></div>
    <div class="accordion-content">
      <p>Another content here...</p>
      <button class="consent-btn">Accept</button>
    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
  const headers = document.querySelectorAll('.accordion-header');

  headers.forEach(header => {
    header.addEventListener('click', function () {
      const currentItem = this.parentElement;

      // Close other accordions
      document.querySelectorAll('.accordion-item').forEach(item => {
        if (item !== currentItem) {
          item.classList.remove('active');
        }
      });

      // Toggle current
      currentItem.classList.toggle('active');
    });
  });

  // Prevent accordion toggle when clicking consent button
  document.querySelectorAll('.consent-btn').forEach(button => {
    button.addEventListener('click', function (e) {
      e.stopPropagation();
      alert('Consent saved for: ' + this.innerText);
    });
  });
});
</script>/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-60f3fc1 *//* Headings styling */
.description h2 {
  font-weight: 700 !important;     /* heading zyada bold */
  margin-bottom: 18px !important;  /* heading ke neeche gap */
  margin-top: 40px !important;     /* upar se spacing */
  line-height: 1.3 !important;
}

/* Paragraph styling */
.description p {
  font-weight: 400 !important;     /* paragraph kam bold */
  margin-bottom: 16px !important;  /* paragraphs ke darmiyan gap */
  line-height: 1.8 !important;
}

/* Heading ke baad jo first paragraph ho us ke liye extra smooth spacing */
.description h2 + p {
  margin-top: 10px !important;
}

/* Bullet points ke liye spacing */
.description p br {
  display: block;
  margin-bottom: 6px;
  content: "";
}
/* Headings – zyada bold */
.elementor-30241 .elementor-element.elementor-element-60f3fc1 h1,
.elementor-30241 .elementor-element.elementor-element-60f3fc1 h2,
.elementor-30241 .elementor-element.elementor-element-60f3fc1 h3,
.elementor-30241 .elementor-element.elementor-element-60f3fc1 h4,
.elementor-30241 .elementor-element.elementor-element-60f3fc1 h5,
.elementor-30241 .elementor-element.elementor-element-60f3fc1 h6 {
    font-weight: 800 !important;   /* strong bold */
    margin-bottom: 18px !important;
    line-height: 1.3 !important;
}

/* Paragraph – heading se kam bold */
.elementor-30241 .elementor-element.elementor-element-60f3fc1 p {
    font-weight: 400 !important;   /* normal / light */
    margin-bottom: 16px !important;
    line-height: 1.8 !important;
}

/* Heading ke baad paragraph spacing */
.elementor-30241 .elementor-element.elementor-element-60f3fc1 h1 + p,
.elementor-30241 .elementor-element.elementor-element-60f3fc1 h2 + p,
.elementor-30241 .elementor-element.elementor-element-60f3fc1 h3 + p {
    margin-top: 6px !important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-aee9321 *//* ===============================
   NEWSLETTER SECTION
================================ */

.newsletter-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  background-color: #1f3532;
  padding: 80px 50px;
  border-radius: 6px;
  width: 100%;
  box-sizing: border-box;
}

.newsletter-text {
  color: #ffffff;
  font-size: 22px;
  font-weight: 500;
  max-width: 45%;
  line-height: 1.4;
}

.newsletter-form {
  display: flex;
  width: 55%;
  background: #3a4f4c;
  border-radius: 6px;
  overflow: hidden;
}

.newsletter-form input {
  flex: 1;
  padding: 16px 18px;
  border: none;
  outline: none;
  background: transparent;
  color: #ffffff;
  font-size: 16px;
}

.newsletter-form input::placeholder {
  color: #cfd8d6;
}

.newsletter-form button {
  padding: 0 30px;
  background: transparent;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

/* ===============================
   TABLET
================================ */
@media (max-width: 1024px) {
  .newsletter-wrap {
    padding: 60px 40px;
  }

  .newsletter-text {
    font-size: 20px;
  }
}

/* ===============================
   MOBILE
================================ */
@media (max-width: 768px) {
  .newsletter-wrap {
    flex-direction: column;
    align-items: flex-start;
    padding: 40px 25px;
  }

  .newsletter-text {
    max-width: 100%;
    font-size: 18px;
  }

  .newsletter-form {
    width: 100%;
    margin-top: 20px;
  }
}

/* ===============================
   SMALL MOBILE
================================ */
@media (max-width: 480px) {
  .newsletter-form {
    flex-direction: column;
    background: transparent;
  }

  .newsletter-form input {
    background: #3a4f4c;
    border-radius: 6px;
    margin-bottom: 12px;
  }

  .newsletter-form button {
    background: #3a4f4c;
    padding: 14px;
    border-radius: 6px;
    width: 100%;
    text-align: center;
  }
}/* End custom CSS */