/* ==========================================
 Layout
============================================*/
@media screen and (min-width: 992px) {
  :root {
    --container-width: 1140;
  }
}
/* ==========================================
 Header
============================================*/
.header {
  position: static;
}

@media screen and (min-width: 992px) {
  .header {
    padding-inline: var(--sz-30);
  }
}
/* ==========================================
 Footer
============================================*/
.footer {
  --color-footer-bg: #fff;
  --color-footer-text: var(--color-primary);
}

/* ==========================================
 Parts
============================================*/
/* Heading */
.section-heading-type2 {
  border-left: var(--sz-10) solid;
  font-size: var(--sz-30);
  padding-left: 0.5em;
  padding-block: 0.5em;
  margin-top: 2em;
  margin-bottom: 1em;
}

@media screen and (min-width: 992px) {
  .section-heading-type2 {
    font-size: var(--sz-34);
  }
}
.section-heading-type3 {
  font-size: var(--sz-28);
  font-weight: 500;
  padding: 0.5em 1em;
  border-bottom: 1px solid;
  margin-block: 1em 1em;
}

@media screen and (min-width: 992px) {
  .section-heading-type3 {
    font-size: 24px;
    padding-left: 0;
  }
}
/* Box */
.box-gray {
  background-color: #efefef;
  padding: var(--sz-30);
  font-size: var(--sz-20);
  margin-bottom: 1em;
}

.box-gray__laed {
  font-size: var(--sz-28);
  font-weight: 500;
  margin-bottom: 1em;
}

.box-gray ul {
  list-style: disc;
  padding-left: 2.5em;
}

@media screen and (min-width: 992px) {
  .box-gray {
    padding: var(--sz-35) var(--sz-35) var(--sz-45);
    font-size: var(--sz-24);
  }
  .box-gray__laed {
    font-size: var(--sz-32);
  }
}
/* list */
.check-list {
  font-size: var(--sz-24);
  font-weight: 500;
  margin-bottom: 2em;
  padding-left: 1em;
}

.check-list li {
  background: url(../../../../assets/images/common/icon-check.webp) no-repeat top 0.35em left/1em;
  padding-left: 1.2em;
  margin-bottom: 0.5em;
}

@media screen and (min-width: 992px) {
  .check-list {
    font-size: 16px;
    padding-left: 0.5em;
  }
}
/* ==========================================
 Materials
============================================*/
.materials {
  padding-block: var(--sz-40) var(--sz-40);
}

.materials__inner {
  padding-inline: var(--sz-30);
  margin-inline: auto;
}
@media screen and (min-width: 992px) {
  .materials__inner {
    padding-inline: 0;
    width: min(75%, 1440px);
  }
}

.materials__heading {
  font-size: var(--sz-30);
  font-weight: 500;
  margin-bottom: var(--sz-25);
  text-align: left;
}

.materials__heading span {
  font-size: 153%;
}

.materials__content {
  margin-bottom: var(--sz-70);
}

.materials__lead {
  font-size: var(--sz-20);
}

.materials__summary {
  font-size: var(--sz-22);
}

.materials__summary p {
  margin-bottom: 0;
}

@media screen and (min-width: 992px) {
  .materials-container {
    padding-block: var(--sz-50);
    padding-inline: var(--sz-30);
    margin-inline: auto;
  }
  .materials-container .col-lg-7 {
    width: 55%;
  }
  .materials-container .col-lg-5 {
    width: 45%;
  }
  .materials {
    padding-block: 0;
  }
  .materials__inner {
    width: 100%;
  }
  .materials__heading {
    font-size: 24px;
    margin-bottom: var(--sz-30);
  }
  .materials__heading span {
    font-size: 100%;
  }
  .materials__content {
    margin-bottom: 0;
  }
  .materials__lead {
    font-size: 16px;
    margin-bottom: 1em;
  }
  .materials__summary {
    font-size: 16px;
  }
}
/* ==========================================
 Download
============================================*/
.download {
  background-color: #f3f4f7;
  padding-block: var(--sz-70) var(--sz-115);
}

.download__inner {
  padding-inline: var(--sz-30);
  margin-inline: auto;
}
@media screen and (min-width: 992px) {
  .download__inner {
    padding-inline: 0;
    width: min(75%, 1440px);
  }
}

.download__heading {
  font-size: var(--sz-28);
  font-weight: 500;
  margin-bottom: var(--sz-55);
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: var(--sz-10);
}

.download__heading span {
  font-size: 63%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.download__form {
  width: var(--sz-655);
  margin-inline: auto;
}

@media screen and (min-width: 992px) {
  .download {
    padding-block: var(--sz-50) var(--sz-50);
    height: 100%;
  }
  .download__inner {
    padding-inline: 45px;
    width: 100%;
  }
  .download__heading {
    font-size: 22px;
    margin-bottom: 30px;
    justify-content: unset;
    white-space: nowrap;
    margin-inline: -4%;
  }
  .download__form {
    width: 100%;
  }
}
/* ==========================================
 Form
============================================*/
.form-label {
  font-weight: 500;
  gap: 0.5em;
}

.form-check-label {
  font-size: var(--sz-26);
}

.form-check-input {
  width: 1.2em;
  height: 1.2em;
}

.form-check {
  margin-bottom: 1em;
}

.form [type=submit] {
  margin-top: var(--sz-40);
  width: var(--sz-432);
}

@media screen and (min-width: 992px) {
  .form__row {
    margin-bottom: var(--sz-30);
  }
  .form-label {
    font-size: 16px;
  }
  .form-control {
    font-size: 17px;
    --bs-border-radius: var(--sz-8);
    border-width: var(--sz-2);
  }
  .form-check {
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
  }
  .form-check-label {
    font-size: 16px;
  }
  .form-check-input {
    margin-right: 0.5em;
  }
  .form [type=submit] {
    width: 255px;
  }
}
/* ==========================================
 Popover
============================================*/
.popover {
  display: none;
  position: fixed;
  inset: 0;
  margin: auto;
  max-width: unset;
  width: min(82%, 500px);
  height: -moz-fit-content;
  height: fit-content;
}

.popover__inner {
  position: relative;
  padding: 20px;
  border-radius: 20px;
  background-color: #fff;
}

/* .popover:popover-open {
  position: fixed;
  inset: 0;
  margin: auto;
  display: block;
} */
.popover__overlay {
  content: "";
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

.popover__close {
  width: var(--sz-22);
  aspect-ratio: 1;
  position: absolute;
  top: 20px;
  right: 20px;
  overflow: hidden;
  padding: 0;
  border: 0;
  background-color: transparent;
  z-index: 1;
}

.popover__heading {
  font-weight: 500;
  text-align: center;
  font-size: var(--sz-28);
  margin-bottom: 0.5em;
}

.popover__content {
  max-height: min(82vw, 400px);
  overflow-y: scroll;
}

.popover__content * {
  padding: 0;
  font-size: var(--sz-22);
  line-height: 1.5;
  margin-bottom: 0;
}

.popover th,
.popover td {
  display: block;
  margin-bottom: 1em;
}

.popover__content > p {
  margin-bottom: 1em;
}

.popover__close::before,
.popover__close::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 2px;
  background-color: #000;
}

.popover__close::before {
  transform: rotate(45deg);
}

.popover__close::after {
  transform: rotate(-45deg);
}

#popoverTrigger {
  padding: 0;
  border: 0;
  background-color: transparent;
  text-decoration: underline;
}

@media screen and (min-width: 992px) {
  .popover__content * {
    font-size: 16px;
  }
}