:root {
  --container: 84.375rem;
  --container-large: 69.375rem;
  --default-spacer: 0.625rem;
  --bs-gutter-x: 1.5rem;
}

html {
  font-size: 16px;
}

body {
  font-size: 1rem;
  line-height: 1.4375;
  font-family: "muli", sans-serif;
}


img {
  max-width: 100%;
  height: auto;
}

p:last-child {
  margin-block-end: 0;
}

iframe,
video {
  max-width: 100%;
}

/*  */
.font-muli {
  font-family: "muli";
}

.font-ofelia-text {
  font-family: "ofelia-text";
}

.font-dm-serif-display {
  font-family: "DM Serif Display", serif;
}

quote {
  font-weight: bold;
  font-style: italic;
  padding-inline-start: clamp(1.25rem, 3.57vw, 3.125rem);
  margin-inline-start: clamp(1rem, 2.14285vw, 1.875rem);
  border-inline-start: 0.25rem solid;
  border-color: var(--tropical-cyan);
}

/* font size  */

h2 {
  font-size: clamp(1.875rem, 2.857vw, 2.5rem);
}

h3 {
  font-size: clamp(1.375rem, 2.5vw, 2.1875rem);
}

h4 {
  font-size: clamp(1.375rem, 1.71428vw, 1.5rem);
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1rem;
}

a {
  text-decoration: unset;
}

.font-large-1 {
  font-size: clamp(2.5rem, 4.2857vw, 3.75rem) !important;
}

.font-large-2 {
  font-size: clamp(2rem, 3.21428vw, 2.8125rem) !important;
}

.font-large-3 {
  font-size: clamp(1.875rem, 2.857vw, 2.5rem) !important;
}

.font-medium-1 {
  font-size: clamp(1.4rem, 2.5714vw, 2.25rem) !important;
}

.font-medium-2 {
  font-size: clamp(1.375rem, 2.5vw, 2.1875rem) !important;
}

quote,
.font-lead {
  font-size: clamp(1.125rem, 1.571428vw, 1.375rem) !important;
}

.font-extra-regular {
  font-size: 1.125rem !important;
}

.font-regular {
  font-size: 1rem !important;
}

.font-regular-less {
  font-size: 0.9375rem !important;
}

.font-extra-small {
  font-size: 0.875rem !important;
}

.font-small {
  font-size: 0.8125rem !important;
}

.font-tiny {
  font-size: 0.75rem !important;
}

/* font-w */
.fw-100 {
  font-weight: 100;
}

.fw-200 {
  font-weight: 200;
}

.fw-300 {
  font-weight: 300;
}

.fw-400 {
  font-weight: 400;
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

.fw-700 {
  font-weight: 700;
}

.fw-800 {
  font-weight: 800;
}

.fw-900 {
  font-weight: 900;
}


/* spacing */
.mt-10 {
  margin-block-start: 0.625rem;
}

.mb-10 {
  margin-block-end: 0.625rem;
}

.mb-50 {
  margin-block-end: calc(5 * var(--default-spacer));
}

.spacer {
  display: block;
  width: 100%;
  height: var(--default-spacer);
}

.spacer.spacer-2 {
  height: calc(2 * var(--default-spacer));
}

.spacer.spacer-3 {
  height: calc(3 * var(--default-spacer));
}

.spacer.spacer-4 {
  height: calc(4 * var(--default-spacer));
}

.spacer.spacer-5 {
  height: calc(5 * var(--default-spacer));
}

.spacer.spacer-6 {
  height: calc(5 * var(--default-spacer));
}

.spacer.spacer-7 {
  height: clamp(2.5rem, 5vw, 4.375rem);
}

.spacer.spacer-large {
  height: clamp(2.5rem, 5.7vw, 5rem);
}

.p-normal {
  padding: clamp(2rem, 3.6vw, 2.5rem);
}
.py-normal {
  padding-block: clamp(1.25rem, 3.6vw, 2.5rem);
}

.px-normal {
  padding-inline: 0.75rem;
}

.py-medium {
  padding-block: clamp(2.5rem, 3.92857vw, 3.4375rem);
}

.pt-medium {
  padding-block-start: clamp(2.5rem, 3.92857vw, 3.4375rem);
}

.pb-medium {
  padding-block-end: clamp(2.5rem, 3.92857vw, 3.4375rem);
}

.py-large {
  padding-block: clamp(3rem, 5.7vw, 5rem);
}

.pt-large {
  padding-block-start: clamp(3rem, 5.7vw, 5rem);
}

.pb-large {
  padding-block-end: clamp(3rem, 5.7vw, 5rem);
}

/* form field */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="url"],
input[type="number"],
textarea,
select {
  font-size: .9375rem;
  font-weight: 600;
  padding: 0.5rem 1.5rem;
  border: 1px solid;
  border-color: var(--tropical-cyan);
  border-radius: 1.0625rem;
}

input[type="submit"],
button[type="submit"] {
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.5625rem 1.5rem 0.375rem 1.5rem;
  border: none;
  border-radius: 1.0625rem;
  color: inherit;
}

.btn {
  margin: 0;
  padding: 0.53846em 1.61538em 0.30769em 1.61538em;
  font-size: 0.8125em;
  font-weight: 600;
  border-radius: 1.5em;
  border: 2px solid;
}

.rounded-10 {
  border-radius: 0.625rem;
}

.rounded-half {
  border-radius: 50%;
}



/* common */
.clickable-element {
  cursor: pointer;
}

/* background style */
.bg-img-gradient-1 {
  background-image: url('../images/forest_high_view.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
}

.bg-image-2 {
  background-image: url('../images/panther.jpg');
}

.bg-image-3 {
  background-image: url('../images/garden.jpg');
}

.bg-image-4 {
  background-image: url('../images/grass.jpg');
}

.bg-image-5 {
  background-image: url('../images/blue_lake_and_sky.jpg');
}

.bg-image-6 {
  background-image: url('../images/dead_valley.jpg');
}

.bg-img-gradient-1>div {
  position: relative;
}

.bg-img-gradient-1:before {
  content: '';
  background-color: var(--midnight-blue);
  background: radial-gradient(ellipse at top center, rgba(0, 146, 143, 0.14) 0%,
      rgba(3, 44, 69, 0.94) 46%,
      rgb(4, 27, 56) 76%,
      rgb(4, 27, 56) 100%);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.bg--linear-top-bottom {
  background: linear-gradient(#031b39 0%, #00928f 100%);
}

/* common */

a[href^="mailto:"] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}


/* theme style */
.all-caps {
  text-transform: uppercase;
}

@media print {
  .no-break {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* @media print {
  @page {
    size: A4;
    margin: 20mm;
  }

  body * {
    visibility: hidden;
  }

  .print-content,
  .print-content * {
    visibility: visible;
  }

  .print-content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
} */
