body {
  background-color: #fff;
}

.banner-container {
  width: 100%;
  height: 400px;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 1;
}     

.banner-shadow {
  background-image: linear-gradient(to bottom, #000, #00000000);
  width: 100%;
  height: 20%;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 98;
}

.banner-container img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  object-fit: cover;
}

.production-menu{
  width: 16%;
  height: 510px;
  background-color: #fff;
  position: absolute;
  top: 600px;
  left: 15%;
  box-shadow: 0px 0px 1px rgba(3, 7, 18, 0.01),
  0px 0px 4px rgba(3, 7, 18, 0.02),
  0px 0px 9px rgba(3, 7, 18, 0.03),
  0px 0px 15px rgba(3, 7, 18, 0.04),
  0px 0px 24px rgba(3, 7, 18, 0.05);
  border-radius: 10px;
}

#active {
 color: #537c12;
}

.production-menu ul li {
  list-style: none;
  padding-top: 20px;
  transition: all .3s ease-in-out;
}

.production-menu ul li:hover {
  padding-left: 20px;
}

.production-menu ul li img {
  width: 36px;
  position: relative;
  top: 10px;
}

.production-menu ul li a {
  text-decoration: none;
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  padding-left: 10px;
}

.next {
  background-color: #fff;
  width: 90%;
  height: 50px;
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  color: #85d800;
  border-style: solid;
  border-width: 1px;
  border-color: #85d800;
  position: absolute;
  top: 430px;
  left: 5%;
  cursor: pointer;
  border-radius: 10px;
  transition: all .3s ease-in-out;
}

.next:hover {
  background-color: #85d800;
  color: #fff;
}

.header {
  font-family: 'Open Sans', sans-serif;
  font-size: 36px;
  color: #000;
  position: absolute;
  top: 550px;
  left: 45%;
}

.text {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  color: #8c8c8c;
  position: absolute;
  top: 630px;
  left: 45.1%;
  width: 38%;
}

.p-accordion {
  margin-top: 30px;
  backdrop-filter: saturate(140%) blur(6px);
  background-color: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 
  0px 0px 1px rgba(3, 7, 18, 0.01),
  0px 0px 4px rgba(3, 7, 18, 0.02),
  0px 0px 9px rgba(3, 7, 18, 0.03),
  0px 0px 15px rgba(3, 7, 18, 0.04),
  0px 0px 24px rgba(3, 7, 18, 0.05);
}


details {
border-top: 1px solid var(--border);
}
details:first-of-type { border-top: 0; }


summary {
list-style: none;
cursor: pointer;
padding: 18px 22px;
font-weight: 600;
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 12px;
align-items: center;
transition: background .2s ease;
}


summary:hover { background: rgba(56,189,248,.06); }


summary::-webkit-details-marker { display: none; }


.badge {
width: 36px; height: 36px; border-radius: 9px;
display: grid; place-items: center;
background-color: #85d800;
border: 1px solid var(--border);
font-weight: 700; font-size: 16px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
color: #fff;
}


.sum-text { font-size: 18px; }


.chevron {
width: 14px; height: 14px; border-right: 2px solid var(--text); border-bottom: 2px solid var(--text);
transform: rotate(-45deg);
transition: transform .25s ease;
opacity: .8;
}


details[open] .chevron { transform: rotate(45deg); }


.panel {
padding: 0 22px 22px 66px;
color: var(--text);
border-top: 1px dashed var(--border);
background: linear-gradient(180deg, rgba(56,189,248,.04), transparent 40%);
}


.panel p { margin: 14px 0 0; font-size: 16px; }


.muted { color: var(--muted); font-size: 14px; }

.footnote {
margin-top: 18px;
font-size: 13px;
color: var(--muted);
text-align: center;
}

.footer {
  position: absolute;
  top: 1500px;
  left: 0%;
}



/*RESPONSIVE*/
@media (min-width: 240px) and (max-width: 359.98px) and (orientation: portrait)  {
body {
  background-color: #fff;
}

.banner-container {
  width: 100%;
  height: 200px;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 1;
}

.banner-shadow {
  background-image: linear-gradient(to bottom, #000, #00000000);
  width: 100%;
  height: 20%;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 98;
}

.banner-container img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  object-fit: cover;
}

.production-menu{ display: none;}

.header {
  font-family: 'Open Sans', sans-serif;
  font-size: 24px;
  color: #000;
  position: absolute;
  top: 250px;
  left: 5%;
}

.text { 
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #8c8c8c;
  position: absolute;
  top: 340px;
  left: 5%;
  width: 90%;
  text-align: justify;
}

.p-accordion { 
  margin-top: 30px;
  backdrop-filter: saturate(140%) blur(6px);
  background-color: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 
  0px 0px 1px rgba(3, 7, 18, 0.01),
  0px 0px 4px rgba(3, 7, 18, 0.02),
  0px 0px 9px rgba(3, 7, 18, 0.03),
  0px 0px 15px rgba(3, 7, 18, 0.04),
  0px 0px 24px rgba(3, 7, 18, 0.05);
}


details {
border-top: 1px solid var(--border);
}
details:first-of-type { border-top: 0; }


summary {
list-style: none;
cursor: pointer;
padding: 16px 10px;
font-weight: 600;
display: grid;
grid-template-columns: 10px 1fr auto;
gap: 20px;
align-items: center;
transition: background .2s ease;
}


summary:hover { background: rgba(56,189,248,.06); }


summary::-webkit-details-marker { display: none; }


.badge {
width: 26px; height: 26px; border-radius: 4px;
display: grid; place-items: center;
background-color: #85d800;
border: 1px solid var(--border);
font-weight: 700; font-size: 14px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
color: #fff;
}


.sum-text { font-size: 13px; }


.chevron {
width: 14px; height: 14px; border-right: 2px solid var(--text); border-bottom: 2px solid var(--text);
transform: rotate(-45deg);
transition: transform .25s ease;
opacity: .8;
}


details[open] .chevron { transform: rotate(45deg); }


.panel {
padding: 0 10px 10px 10px;
color: var(--text);
border-top: 1px dashed var(--border);
background: linear-gradient(180deg, rgba(56,189,248,.04), transparent 40%);
}


.panel p { margin: 0px 0 0; font-size: 12px; }


.muted { color: var(--muted); font-size: 14px; }

.footnote {
margin-top: 18px;
font-size: 13px;
color: var(--muted);
text-align: center;
}

.footer {
  position: absolute;
  top: 1000px;
  left: 0%;
}  
}
  
@media (min-width: 360px) and (max-width: 575.98px) and (orientation: portrait) {
  body {
  background-color: #fff;
}

.banner-container {
  width: 100%;
  height: 200px;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 1;
}

.banner-shadow {
  background-image: linear-gradient(to bottom, #000, #00000000);
  width: 100%;
  height: 20%;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 98;
}

.banner-container img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  object-fit: cover;
}

.production-menu{ display: none;}

.header {
  font-family: 'Open Sans', sans-serif;
  font-size: 26px;
  color: #000;
  position: absolute;
  top: 250px;
  left: 5%;
}

.text { 
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #8c8c8c;
  position: absolute;
  top: 350px;
  left: 5%;
  width: 90%;
  text-align: justify;
}

.p-accordion { 
  margin-top: 20px;
  backdrop-filter: saturate(140%) blur(6px);
  background-color: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 
  0px 0px 1px rgba(3, 7, 18, 0.01),
  0px 0px 4px rgba(3, 7, 18, 0.02),
  0px 0px 9px rgba(3, 7, 18, 0.03),
  0px 0px 15px rgba(3, 7, 18, 0.04),
  0px 0px 24px rgba(3, 7, 18, 0.05);
}


details {
border-top: 1px solid var(--border);
}
details:first-of-type { border-top: 0; }


summary {
list-style: none;
cursor: pointer;
padding: 16px 10px;
font-weight: 600;
display: grid;
grid-template-columns: 10px 1fr auto;
gap: 20px;
align-items: center;
transition: background .2s ease;
}


summary:hover { background: rgba(56,189,248,.06); }


summary::-webkit-details-marker { display: none; }


.badge {
width: 26px; height: 26px; border-radius: 4px;
display: grid; place-items: center;
background-color: #85d800;
border: 1px solid var(--border);
font-weight: 700; font-size: 14px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
color: #fff;
}


.sum-text { font-size: 13px; }


.chevron {
width: 14px; height: 14px; border-right: 2px solid var(--text); border-bottom: 2px solid var(--text);
transform: rotate(-45deg);
transition: transform .25s ease;
opacity: .8;
}


details[open] .chevron { transform: rotate(45deg); }


.panel {
padding: 0 20px 20px 20px;
color: var(--text);
border-top: 1px dashed var(--border);
background: linear-gradient(180deg, rgba(56,189,248,.04), transparent 40%);
}


.panel p { margin: 0px 0 0; font-size: 12px; }


.muted { color: var(--muted); font-size: 14px; }

.footnote {
margin-top: 18px;
font-size: 13px;
color: var(--muted);
text-align: center;
}

.footer {
  position: absolute;
  top: 1000px;
  left: 0%;

}
}

@media (min-width: 576px) and (max-width: 767.98px) and (orientation: portrait)  {
body {
  background-color: #fff;
}

.banner-container {
  width: 100%;
  height: 220px;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 1;
}

.banner-shadow {
  background-image: linear-gradient(to bottom, #000, #00000000);
  width: 100%;
  height: 20%;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 98;
}

.banner-container img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  object-fit: cover;
}

.production-menu{ display: none;}

.header {
  font-family: 'Open Sans', sans-serif;
  font-size: 28px;
  color: #000;
  position: absolute;
  top: 270px;
  left: 5%;
  width: 50%;
}

.text { 
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  color: #8c8c8c;
  position: absolute;
  top: 380px;
  left: 5%;
  width: 90%;
  text-align: justify;
}

.p-accordion { 
  margin-top: 20px;
  backdrop-filter: saturate(140%) blur(6px);
  background-color: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 
  0px 0px 1px rgba(3, 7, 18, 0.01),
  0px 0px 4px rgba(3, 7, 18, 0.02),
  0px 0px 9px rgba(3, 7, 18, 0.03),
  0px 0px 15px rgba(3, 7, 18, 0.04),
  0px 0px 24px rgba(3, 7, 18, 0.05);
}


details {
border-top: 1px solid var(--border);
}
details:first-of-type { border-top: 0; }


summary {
list-style: none;
cursor: pointer;
padding: 30px 20px;
font-weight: 600;
display: grid;
grid-template-columns: 10px 1fr auto;
gap: 40px;
align-items: center;
transition: background .2s ease;
}


summary:hover { background: rgba(56,189,248,.06); }


summary::-webkit-details-marker { display: none; }


.badge {
width: 36px; height: 36px; border-radius: 6px;
display: grid; place-items: center;
background-color: #85d800;
border: 1px solid var(--border);
font-weight: 700; font-size: 18px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
color: #fff;
}


.sum-text { font-size: 18px; }


.chevron {
width: 14px; height: 14px; border-right: 2px solid var(--text); border-bottom: 2px solid var(--text);
transform: rotate(-45deg);
transition: transform .25s ease;
opacity: .8;
}


details[open] .chevron { transform: rotate(45deg); }


.panel {
padding: 0 20px 20px 20px;
color: var(--text);
border-top: 1px dashed var(--border);
background: linear-gradient(180deg, rgba(56,189,248,.04), transparent 40%);
}


.panel p { margin: 0px 0 0; font-size: 16px; }


.muted { color: var(--muted); font-size: 16px; }

.footnote {
margin-top: 18px;
font-size: 13px;
color: var(--muted);
text-align: center;
}

.footer {
  position: absolute;
  top: 1200px;
  left: 0%;

}
}
     
@media  (min-width: 768px) and (max-width: 991.98px) and (orientation: portrait) {
  body {
  background-color: #fff;
}

.banner-container {
  width: 100%;
  height: 250px;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 1;
}

.banner-shadow {
  background-image: linear-gradient(to bottom, #000, #00000000);
  width: 100%;
  height: 20%;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 98;
}

.banner-container img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  object-fit: cover;
}

.production-menu{ display: none;}

.header {
  font-family: 'Open Sans', sans-serif;
  font-size: 42px;
  color: #000;
  position: absolute;
  top: 320px;
  left: 5%;
  width: 70%;
}

.text { 
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  color: #8c8c8c;
  position: absolute;
  top: 460px;
  left: 5%;
  width: 90%;
  text-align: justify;
}

.p-accordion { 
  margin-top: 20px;
  backdrop-filter: saturate(140%) blur(6px);
  background-color: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 
  0px 0px 1px rgba(3, 7, 18, 0.01),
  0px 0px 4px rgba(3, 7, 18, 0.02),
  0px 0px 9px rgba(3, 7, 18, 0.03),
  0px 0px 15px rgba(3, 7, 18, 0.04),
  0px 0px 24px rgba(3, 7, 18, 0.05);
}


details {
border-top: 1px solid var(--border);
}
details:first-of-type { border-top: 0; }


summary {
list-style: none;
cursor: pointer;
padding: 30px 20px;
font-weight: 600;
display: grid;
grid-template-columns: 10px 1fr auto;
gap: 40px;
align-items: center;
transition: background .2s ease;
}


summary:hover { background: rgba(56,189,248,.06); }


summary::-webkit-details-marker { display: none; }


.badge {
width: 42px; height: 42px; border-radius: 6px;
display: grid; place-items: center;
background-color: #85d800;
border: 1px solid var(--border);
font-weight: 700; font-size: 18px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
color: #fff;
}


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


.chevron {
width: 14px; height: 14px; border-right: 2px solid var(--text); border-bottom: 2px solid var(--text);
transform: rotate(-45deg);
transition: transform .25s ease;
opacity: .8;
}


details[open] .chevron { transform: rotate(45deg); }


.panel {
padding: 0 20px 20px 20px;
color: var(--text);
border-top: 1px dashed var(--border);
background: linear-gradient(180deg, rgba(56,189,248,.04), transparent 40%);
}


.panel p { margin: 0px 0 0; font-size: 18px; }


.muted { color: var(--muted); font-size: 18px; }

.footnote {
margin-top: 18px;
font-size: 15px;
color: var(--muted);
text-align: center;
}

.footer {
  position: absolute;
  top: 1320px;
  left: 0%;
}
}
     
@media (min-width: 992px) and (max-width: 1199.98px) and (orientation: portrait)  {
body {
  background-color: #fff;
}

.banner-container {
  width: 100%;
  height: 300px;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 1;
}

.banner-shadow {
  background-image: linear-gradient(to bottom, #000, #00000000);
  width: 100%;
  height: 20%;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 98;
}

.banner-container img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  object-fit: cover;
}

.production-menu{ display: none;}

.header {
  font-family: 'Open Sans', sans-serif;
  font-size: 52px;
  color: #000;
  position: absolute;
  top: 370px;
  left: 5%;
  width: 70%;
}

.text { 
  font-family: 'Open Sans', sans-serif;
  font-size: 24px;
  color: #8c8c8c;
  position: absolute;
  top: 560px;
  left: 5%;
  width: 90%;
  text-align: justify;
}

.p-accordion { 
  margin-top: 30px;
  backdrop-filter: saturate(140%) blur(6px);
  background-color: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 
  0px 0px 1px rgba(3, 7, 18, 0.01),
  0px 0px 4px rgba(3, 7, 18, 0.02),
  0px 0px 9px rgba(3, 7, 18, 0.03),
  0px 0px 15px rgba(3, 7, 18, 0.04),
  0px 0px 24px rgba(3, 7, 18, 0.05);
}

details {
border-top: 1px solid var(--border);
}
details:first-of-type { border-top: 0; }

summary {
list-style: none;
cursor: pointer;
padding: 30px 20px;
font-weight: 600;
display: grid;
grid-template-columns: 10px 1fr auto;
gap: 60px;
align-items: center;
transition: background .2s ease;
}

summary:hover { background: rgba(56,189,248,.06); }


summary::-webkit-details-marker { display: none; }


.badge {
width: 50px; height: 50px; border-radius: 6px;
display: grid; place-items: center;
background-color: #85d800;
border: 1px solid var(--border);
font-weight: 700; font-size: 24px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
color: #fff;
}

.sum-text { font-size: 26px; }

.chevron {
width: 14px; height: 14px; border-right: 2px solid var(--text); border-bottom: 2px solid var(--text);
transform: rotate(-45deg);
transition: transform .25s ease;
opacity: .8;
}


details[open] .chevron { transform: rotate(45deg); }


.panel {
padding: 0 20px 20px 20px;
color: var(--text);
border-top: 1px dashed var(--border);
background: linear-gradient(180deg, rgba(56,189,248,.04), transparent 40%);
}


.panel p { margin: 0px 0 0; font-size: 22px; }


.muted { color: var(--muted); font-size: 22px; }

.footnote {
margin-top: 18px;
font-size: 17px;
color: var(--muted);
text-align: center;
}

.footer {
  position: absolute;
  top: 1600px;
  left: 0%;
}
}

@media  (min-width: 1200px) and (max-width: 1399.98px)  {
  body {
  background-color: #fff;
}

.banner-container {
  width: 100%;
  height: 250px;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 1;
}     

.banner-shadow {
  background-image: linear-gradient(to bottom, #000, #00000000);
  width: 100%;
  height: 20%;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 98;
}

.banner-container img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  object-fit: cover;
}

.production-menu{
  width: 18%;
  height: 430px;
  background-color: #fff;
  position: absolute;
  top: 350px;
  left: 15%;
  box-shadow: 0px 0px 1px rgba(3, 7, 18, 0.01),
  0px 0px 4px rgba(3, 7, 18, 0.02),
  0px 0px 9px rgba(3, 7, 18, 0.03),
  0px 0px 15px rgba(3, 7, 18, 0.04),
  0px 0px 24px rgba(3, 7, 18, 0.05);
  border-radius: 10px;
}

#active {
 color: #537c12;
}


.production-menu ul li {
  list-style: none;
  padding-top: 20px;
  transition: all .3s ease-in-out;
}

.production-menu ul li:hover {
  padding-left: 20px;
}

.production-menu ul li img {
  width: 30px;
  position: relative;
  top: 10px;
  left: -20px;
}

.production-menu ul li a {
  text-decoration: none;
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  padding-left: 0px;
  position: relative;
  left: -10px;
}

.next {
  background-color: #fff;
  width: 90%;
  height: 40px;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  color: #85d800;
  border-style: solid;
  border-width: 1px;
  border-color: #85d800;
  position: absolute;
  top: 380px;
  left: 5%;
  cursor: pointer;
  border-radius: 10px;
  transition: all .3s ease-in-out;
}

.next:hover {
  background-color: #85d800;
  color: #fff;
}

.header {
  font-family: 'Open Sans', sans-serif;
  font-size: 28px;
  color: #000;
  position: absolute;
  top: 360px;
  left: 43%;
}

.text {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  color: #8c8c8c;
  position: absolute;
  top: 420px;
  left: 43.1%;
  width: 38%;
}

.p-accordion {
  margin-top: 30px;
  backdrop-filter: saturate(140%) blur(6px);
  background-color: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 
  0px 0px 1px rgba(3, 7, 18, 0.01),
  0px 0px 4px rgba(3, 7, 18, 0.02),
  0px 0px 9px rgba(3, 7, 18, 0.03),
  0px 0px 15px rgba(3, 7, 18, 0.04),
  0px 0px 24px rgba(3, 7, 18, 0.05);
}

details {
border-top: 1px solid var(--border);
}
details:first-of-type { border-top: 0; }

summary {
list-style: none;
cursor: pointer;
padding: 18px 22px;
font-weight: 600;
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 12px;
align-items: center;
transition: background .2s ease;
}


summary:hover { background: rgba(56,189,248,.06); }


summary::-webkit-details-marker { display: none; }


.badge {
width: 36px; height: 36px; border-radius: 9px;
display: grid; place-items: center;
background-color: #85d800;
border: 1px solid var(--border);
font-weight: 700; font-size: 16px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
color: #fff;
}


.sum-text { font-size: 16px; }


.chevron {
width: 14px; height: 14px; border-right: 2px solid var(--text); border-bottom: 2px solid var(--text);
transform: rotate(-45deg);
transition: transform .25s ease;
opacity: .8;
}


details[open] .chevron { transform: rotate(45deg); }


.panel {
padding: 0 22px 22px 66px;
color: var(--text);
border-top: 1px dashed var(--border);
background: linear-gradient(180deg, rgba(56,189,248,.04), transparent 40%);
}


.panel p { margin: 14px 0 0; font-size: 16px; }


.muted { color: var(--muted); font-size: 14px; }

.footnote {
margin-top: 18px;
font-size: 13px;
color: var(--muted);
text-align: center;
}

.footer {
  position: absolute;
  top: 1200px;
  left: 0%;
}
  
}
     
@media  (min-width: 1400px) and (max-width: 1599.98px)  {
body {
  background-color: #fff;
}

.banner-container {
  width: 100%;
  height: 250px;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 1;
}     

.banner-shadow {
  background-image: linear-gradient(to bottom, #000, #00000000);
  width: 100%;
  height: 20%;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 98;
}

.banner-container img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  object-fit: cover;
}

.production-menu{
  width: 18%;
  height: 430px;
  background-color: #fff;
  position: absolute;
  top: 350px;
  left: 15%;
  box-shadow: 0px 0px 1px rgba(3, 7, 18, 0.01),
  0px 0px 4px rgba(3, 7, 18, 0.02),
  0px 0px 9px rgba(3, 7, 18, 0.03),
  0px 0px 15px rgba(3, 7, 18, 0.04),
  0px 0px 24px rgba(3, 7, 18, 0.05);
  border-radius: 10px;
}

#active {
 color: #537c12;
}


.production-menu ul li {
  list-style: none;
  padding-top: 20px;
  transition: all .3s ease-in-out;
}

.production-menu ul li:hover {
  padding-left: 20px;
}

.production-menu ul li img {
  width: 30px;
  position: relative;
  top: 10px;
  left: -20px;
}

.production-menu ul li a {
  text-decoration: none;
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  padding-left: 0px;
  position: relative;
  left: -10px;
}

.next {
  background-color: #fff;
  width: 90%;
  height: 40px;
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  color: #85d800;
  border-style: solid;
  border-width: 1px;
  border-color: #85d800;
  position: absolute;
  top: 380px;
  left: 5%;
  cursor: pointer;
  border-radius: 10px;
  transition: all .3s ease-in-out;
}

.next:hover {
  background-color: #85d800;
  color: #fff;
}

.header {
  font-family: 'Open Sans', sans-serif;
  font-size: 28px;
  color: #000;
  position: absolute;
  top: 360px;
  left: 43%;
}

.text {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  color: #8c8c8c;
  position: absolute;
  top: 420px;
  left: 43.1%;
  width: 38%;
}

.p-accordion {
  margin-top: 30px;
  backdrop-filter: saturate(140%) blur(6px);
  background-color: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 
  0px 0px 1px rgba(3, 7, 18, 0.01),
  0px 0px 4px rgba(3, 7, 18, 0.02),
  0px 0px 9px rgba(3, 7, 18, 0.03),
  0px 0px 15px rgba(3, 7, 18, 0.04),
  0px 0px 24px rgba(3, 7, 18, 0.05);
}

details {
border-top: 1px solid var(--border);
}
details:first-of-type { border-top: 0; }

summary {
list-style: none;
cursor: pointer;
padding: 18px 22px;
font-weight: 600;
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 12px;
align-items: center;
transition: background .2s ease;
}


summary:hover { background: rgba(56,189,248,.06); }


summary::-webkit-details-marker { display: none; }


.badge {
width: 36px; height: 36px; border-radius: 9px;
display: grid; place-items: center;
background-color: #85d800;
border: 1px solid var(--border);
font-weight: 700; font-size: 16px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
color: #fff;
}


.sum-text { font-size: 16px; }


.chevron {
width: 14px; height: 14px; border-right: 2px solid var(--text); border-bottom: 2px solid var(--text);
transform: rotate(-45deg);
transition: transform .25s ease;
opacity: .8;
}


details[open] .chevron { transform: rotate(45deg); }


.panel {
padding: 0 22px 22px 66px;
color: var(--text);
border-top: 1px dashed var(--border);
background: linear-gradient(180deg, rgba(56,189,248,.04), transparent 40%);
}


.panel p { margin: 14px 0 0; font-size: 16px; }


.muted { color: var(--muted); font-size: 14px; }

.footnote {
margin-top: 18px;
font-size: 13px;
color: var(--muted);
text-align: center;
}

.footer {
  position: absolute;
  top: 1100px;
  left: 0%;
}     
}
     
@media  (min-width: 3840px) and (max-width: 7679.98px)  {
  body {
  background-color: #fff;
}

.banner-container {
  width: 100%;
  height: 800px;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 1;
}     

.banner-shadow {
  background-image: linear-gradient(to bottom, #000, #00000000);
  width: 100%;
  height: 40%;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 98;
}

.banner-container img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  object-fit: cover;
}

.production-menu{
  width: 32%;
  height: 1020px;
  background-color: #fff;
  position: absolute;
  top: 1200px;
  left: 30%;
  box-shadow: 0px 0px 2px rgba(3, 7, 18, 0.01),
  0px 0px 8px rgba(3, 7, 18, 0.02),
  0px 0px 18px rgba(3, 7, 18, 0.03),
  0px 0px 30px rgba(3, 7, 18, 0.04),
  0px 0px 48px rgba(3, 7, 18, 0.05);
  border-radius: 20px;
}

#active {
 color: #537c12;
}

.production-menu ul li {
  list-style: none;
  padding-top: 40px;
  transition: all .3s ease-in-out;
}

.production-menu ul li:hover {
  padding-left: 40px;
}

.production-menu ul li img {
  width: 72px;
  position: relative;
  top: 20px;
}

.production-menu ul li a {
  text-decoration: none;
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 36px;
  padding-left: 20px;
}

.next {
  background-color: #fff;
  width: 180%;
  height: 100px;
  font-family: 'Open Sans', sans-serif;
  font-size: 36px;
  color: #85d800;
  border-style: solid;
  border-width: 2px;
  border-color: #85d800;
  position: absolute;
  top: 860px;
  left: 10%;
  cursor: pointer;
  border-radius: 20px;
  transition: all .3s ease-in-out;
}

.next:hover {
  background-color: #85d800;
  color: #fff;
}

.header {
  font-family: 'Open Sans', sans-serif;
  font-size: 72px;
  color: #000;
  position: absolute;
  top: 1100px;
  left: 90%;
}

.text {
  font-family: 'Open Sans', sans-serif;
  font-size: 36px;
  color: #8c8c8c;
  position: absolute;
  top: 1260px;
  left: 90.2%;
  width: 76%;
}

.p-accordion {
  margin-top: 60px;
  backdrop-filter: saturate(140%) blur(12px);
  background-color: #fff;
  border: 2px solid var(--border);
  border-radius: 36px;
  overflow: hidden;
  box-shadow: 
  0px 0px 2px rgba(3, 7, 18, 0.01),
  0px 0px 8px rgba(3, 7, 18, 0.02),
  0px 0px 18px rgba(3, 7, 18, 0.03),
  0px 0px 30px rgba(3, 7, 18, 0.04),
  0px 0px 48px rgba(3, 7, 18, 0.05);
}

details {
border-top: 2px solid var(--border);
}
details:first-of-type { border-top: 0; }

summary {
list-style: none;
cursor: pointer;
padding: 36px 44px;
font-weight: 600;
display: grid;
grid-template-columns: 64px 1fr auto;
gap: 24px;
align-items: center;
transition: background .2s ease;
}

summary:hover { background: rgba(56,189,248,.06); }

summary::-webkit-details-marker { display: none; }

.badge {
width: 72px; height: 72px; border-radius: 18px;
display: grid; place-items: center;
background-color: #85d800;
border: 2px solid var(--border);
font-weight: 700; font-size: 32px;
box-shadow: inset 0 2px 0 rgba(255,255,255,.06);
color: #fff;
}

.sum-text { font-size: 36px; }

.chevron {
width: 28px; height: 28px; border-right: 4px solid var(--text); border-bottom: 4px solid var(--text);
transform: rotate(-45deg);
transition: transform .25s ease;
opacity: .8;
}

details[open] .chevron { transform: rotate(45deg); }

.panel {
padding: 0 44px 44px 132px;
color: var(--text);
border-top: 2px dashed var(--border);
background: linear-gradient(180deg, rgba(56,189,248,.04), transparent 40%);
}

.panel p { margin: 28px 0 0; font-size: 32px; }

.muted { color: var(--muted); font-size: 28px; }

.footnote {
margin-top: 36px;
font-size: 26px;
color: var(--muted);
text-align: center;
}

.footer {
  position: absolute;
  top: 3000px;
  left: 0%;
}
  
}
     
@media  (min-width: 7680px) and (max-width: 7681px) {
  body {
  background-color: #fff;
}

.banner-container {
  width: 100%;
  height: 1600px;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 1;
}     

.banner-shadow {
  background-image: linear-gradient(to bottom, #000, #00000000);
  width: 100%;
  height: 80%;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 98;
}

.banner-container img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  object-fit: cover;
}

.production-menu{
  width: 64%;
  height: 2040px;
  background-color: #fff;
  position: absolute;
  top: 2400px;
  left: 60%;
  box-shadow: 0px 0px 4px rgba(3, 7, 18, 0.01),
  0px 0px 16px rgba(3, 7, 18, 0.02),
  0px 0px 36px rgba(3, 7, 18, 0.03),
  0px 0px 60px rgba(3, 7, 18, 0.04),
  0px 0px 96px rgba(3, 7, 18, 0.05);
  border-radius: 40px;
}

#active {
 color: #537c12;
}

.production-menu ul li {
  list-style: none;
  padding-top: 80px;
  transition: all .3s ease-in-out;
}

.production-menu ul li:hover {
  padding-left: 80px;
}

.production-menu ul li img {
  width: 144px;
  position: relative;
  top: 40px;
}

.production-menu ul li a {
  text-decoration: none;
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 72px;
  padding-left: 40px;
}

.next {
  background-color: #fff;
  width: 360%;
  height: 200px;
  font-family: 'Open Sans', sans-serif;
  font-size: 72px;
  color: #85d800;
  border-style: solid;
  border-width: 4px;
  border-color: #85d800;
  position: absolute;
  top: 1720px;
  left: 20%;
  cursor: pointer;
  border-radius: 40px;
  transition: all .3s ease-in-out;
}

.next:hover {
  background-color: #85d800;
  color: #fff;
}

.header {
  font-family: 'Open Sans', sans-serif;
  font-size: 144px;
  color: #000;
  position: absolute;
  top: 2200px;
  left: 180%;
}

.text {
  font-family: 'Open Sans', sans-serif;
  font-size: 72px;
  color: #8c8c8c;
  position: absolute;
  top: 2520px;
  left: 180.4%;
  width: 152%;
}

.p-accordion {
  margin-top: 120px;
  backdrop-filter: saturate(140%) blur(24px);
  background-color: #fff;
  border: 4px solid var(--border);
  border-radius: 72px;
  overflow: hidden;
  box-shadow: 
  0px 0px 4px rgba(3, 7, 18, 0.01),
  0px 0px 16px rgba(3, 7, 18, 0.02),
  0px 0px 36px rgba(3, 7, 18, 0.03),
  0px 0px 60px rgba(3, 7, 18, 0.04),
  0px 0px 96px rgba(3, 7, 18, 0.05);
}

details {
border-top: 4px solid var(--border);
}
details:first-of-type { border-top: 0; }

summary {
list-style: none;
cursor: pointer;
padding: 72px 88px;
font-weight: 600;
display: grid;
grid-template-columns: 128px 1fr auto;
gap: 48px;
align-items: center;
transition: background .2s ease;
}

summary:hover { background: rgba(56,189,248,.06); }

summary::-webkit-details-marker { display: none; }

.badge {
width: 144px; height: 144px; border-radius: 36px;
display: grid; place-items: center;
background-color: #85d800;
border: 4px solid var(--border);
font-weight: 700; font-size: 64px;
box-shadow: inset 0 4px 0 rgba(255,255,255,.06);
color: #fff;
}

.sum-text { font-size: 72px; }

.chevron {
width: 56px; height: 56px; border-right: 8px solid var(--text); border-bottom: 8px solid var(--text);
transform: rotate(-45deg);
transition: transform .25s ease;
opacity: .8;
}

details[open] .chevron { transform: rotate(45deg); }

.panel {
padding: 0 88px 88px 264px;
color: var(--text);
border-top: 4px dashed var(--border);
background: linear-gradient(180deg, rgba(56,189,248,.04), transparent 40%);
}

.panel p { margin: 56px 0 0; font-size: 64px; }

.muted { color: var(--muted); font-size: 56px; }

.footnote {
margin-top: 72px;
font-size: 52px;
color: var(--muted);
text-align: center;
}

.footer {
  position: absolute;
  top: 6000px;
  left: 0%;
}
  
}





/* LANDSCAPE RESPONSIVE*/
@media (min-width: 500px) and (max-width: 639.98px) and (orientation: landscape) {
  body {
  background-color: #fff;
}

.banner-container {
  width: 100%;
  height: 200px;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 1;
}

.banner-shadow {
  background-image: linear-gradient(to bottom, #000, #00000000);
  width: 100%;
  height: 20%;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 98;
}

.banner-container img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  object-fit: cover;
}

.production-menu{ display: none;}

.header {
  font-family: 'Open Sans', sans-serif;
  font-size: 26px;
  color: #000;
  position: absolute;
  top: 250px;
  left: 5%;
}

.text { 
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #8c8c8c;
  position: absolute;
  top: 350px;
  left: 5%;
  width: 90%;
  text-align: justify;
}

.p-accordion { 
  margin-top: 20px;
  backdrop-filter: saturate(140%) blur(6px);
  background-color: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 
  0px 0px 1px rgba(3, 7, 18, 0.01),
  0px 0px 4px rgba(3, 7, 18, 0.02),
  0px 0px 9px rgba(3, 7, 18, 0.03),
  0px 0px 15px rgba(3, 7, 18, 0.04),
  0px 0px 24px rgba(3, 7, 18, 0.05);
}


details {
border-top: 1px solid var(--border);
}
details:first-of-type { border-top: 0; }


summary {
list-style: none;
cursor: pointer;
padding: 16px 10px;
font-weight: 600;
display: grid;
grid-template-columns: 10px 1fr auto;
gap: 20px;
align-items: center;
transition: background .2s ease;
}


summary:hover { background: rgba(56,189,248,.06); }


summary::-webkit-details-marker { display: none; }


.badge {
width: 26px; height: 26px; border-radius: 4px;
display: grid; place-items: center;
background-color: #85d800;
border: 1px solid var(--border);
font-weight: 700; font-size: 14px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
color: #fff;
}


.sum-text { font-size: 13px; }


.chevron {
width: 14px; height: 14px; border-right: 2px solid var(--text); border-bottom: 2px solid var(--text);
transform: rotate(-45deg);
transition: transform .25s ease;
opacity: .8;
}


details[open] .chevron { transform: rotate(45deg); }


.panel {
padding: 0 20px 20px 20px;
color: var(--text);
border-top: 1px dashed var(--border);
background: linear-gradient(180deg, rgba(56,189,248,.04), transparent 40%);
}


.panel p { margin: 0px 0 0; font-size: 12px; }


.muted { color: var(--muted); font-size: 14px; }

.footnote {
margin-top: 18px;
font-size: 13px;
color: var(--muted);
text-align: center;
}

.footer {
  position: absolute;
  top: 1000px;
  left: 0%;

}
}

@media (min-width: 640px) and (max-width: 811.98px) and (orientation: landscape) {
  body {
  background-color: #fff;
}

.banner-container {
  width: 100%;
  height: 220px;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 1;
}

.banner-shadow {
  background-image: linear-gradient(to bottom, #000, #00000000);
  width: 100%;
  height: 20%;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 98;
}

.banner-container img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  object-fit: cover;
}

.production-menu{ display: none;}

.header {
  font-family: 'Open Sans', sans-serif;
  font-size: 28px;
  color: #000;
  position: absolute;
  top: 270px;
  left: 5%;
  width: 50%;
}

.text { 
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  color: #8c8c8c;
  position: absolute;
  top: 380px;
  left: 5%;
  width: 90%;
  text-align: justify;
}

.p-accordion { 
  margin-top: 20px;
  backdrop-filter: saturate(140%) blur(6px);
  background-color: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 
  0px 0px 1px rgba(3, 7, 18, 0.01),
  0px 0px 4px rgba(3, 7, 18, 0.02),
  0px 0px 9px rgba(3, 7, 18, 0.03),
  0px 0px 15px rgba(3, 7, 18, 0.04),
  0px 0px 24px rgba(3, 7, 18, 0.05);
}


details {
border-top: 1px solid var(--border);
}
details:first-of-type { border-top: 0; }


summary {
list-style: none;
cursor: pointer;
padding: 30px 20px;
font-weight: 600;
display: grid;
grid-template-columns: 10px 1fr auto;
gap: 40px;
align-items: center;
transition: background .2s ease;
}


summary:hover { background: rgba(56,189,248,.06); }


summary::-webkit-details-marker { display: none; }


.badge {
width: 36px; height: 36px; border-radius: 6px;
display: grid; place-items: center;
background-color: #85d800;
border: 1px solid var(--border);
font-weight: 700; font-size: 18px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
color: #fff;
}


.sum-text { font-size: 18px; }


.chevron {
width: 14px; height: 14px; border-right: 2px solid var(--text); border-bottom: 2px solid var(--text);
transform: rotate(-45deg);
transition: transform .25s ease;
opacity: .8;
}


details[open] .chevron { transform: rotate(45deg); }


.panel {
padding: 0 20px 20px 20px;
color: var(--text);
border-top: 1px dashed var(--border);
background: linear-gradient(180deg, rgba(56,189,248,.04), transparent 40%);
}


.panel p { margin: 0px 0 0; font-size: 16px; }


.muted { color: var(--muted); font-size: 16px; }

.footnote {
margin-top: 18px;
font-size: 13px;
color: var(--muted);
text-align: center;
}

.footer {
  position: absolute;
  top: 1200px;
  left: 0%;

}
}

@media (min-width: 812px) and (max-width: 959.98px) and (orientation: landscape) {
  body {
  background-color: #fff;
}

.banner-container {
  width: 100%;
  height: 250px;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 1;
}

.banner-shadow {
  background-image: linear-gradient(to bottom, #000, #00000000);
  width: 100%;
  height: 20%;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 98;
}

.banner-container img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  object-fit: cover;
}

.production-menu{ display: none;}

.header {
  font-family: 'Open Sans', sans-serif;
  font-size: 42px;
  color: #000;
  position: absolute;
  top: 320px;
  left: 5%;
  width: 70%;
}

.text { 
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  color: #8c8c8c;
  position: absolute;
  top: 460px;
  left: 5%;
  width: 90%;
  text-align: justify;
}

.p-accordion { 
  margin-top: 20px;
  backdrop-filter: saturate(140%) blur(6px);
  background-color: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 
  0px 0px 1px rgba(3, 7, 18, 0.01),
  0px 0px 4px rgba(3, 7, 18, 0.02),
  0px 0px 9px rgba(3, 7, 18, 0.03),
  0px 0px 15px rgba(3, 7, 18, 0.04),
  0px 0px 24px rgba(3, 7, 18, 0.05);
}


details {
border-top: 1px solid var(--border);
}
details:first-of-type { border-top: 0; }


summary {
list-style: none;
cursor: pointer;
padding: 30px 20px;
font-weight: 600;
display: grid;
grid-template-columns: 10px 1fr auto;
gap: 40px;
align-items: center;
transition: background .2s ease;
}


summary:hover { background: rgba(56,189,248,.06); }


summary::-webkit-details-marker { display: none; }


.badge {
width: 42px; height: 42px; border-radius: 6px;
display: grid; place-items: center;
background-color: #85d800;
border: 1px solid var(--border);
font-weight: 700; font-size: 18px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
color: #fff;
}


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


.chevron {
width: 14px; height: 14px; border-right: 2px solid var(--text); border-bottom: 2px solid var(--text);
transform: rotate(-45deg);
transition: transform .25s ease;
opacity: .8;
}


details[open] .chevron { transform: rotate(45deg); }


.panel {
padding: 0 20px 20px 20px;
color: var(--text);
border-top: 1px dashed var(--border);
background: linear-gradient(180deg, rgba(56,189,248,.04), transparent 40%);
}


.panel p { margin: 0px 0 0; font-size: 18px; }


.muted { color: var(--muted); font-size: 18px; }

.footnote {
margin-top: 18px;
font-size: 15px;
color: var(--muted);
text-align: center;
}

.footer {
  position: absolute;
  top: 1320px;
  left: 0%;
}
}

@media (min-width: 960px) and (max-width: 999.98px) and (orientation: landscape) {
  body {
  background-color: #fff;
}

.banner-container {
  width: 100%;
  height: 300px;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 1;
}

.banner-shadow {
  background-image: linear-gradient(to bottom, #000, #00000000);
  width: 100%;
  height: 20%;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 98;
}

.banner-container img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  object-fit: cover;
}

.production-menu{ display: none;}

.header {
  font-family: 'Open Sans', sans-serif;
  font-size: 52px;
  color: #000;
  position: absolute;
  top: 370px;
  left: 5%;
  width: 70%;
}

.text { 
  font-family: 'Open Sans', sans-serif;
  font-size: 24px;
  color: #8c8c8c;
  position: absolute;
  top: 560px;
  left: 5%;
  width: 90%;
  text-align: justify;
}

.p-accordion { 
  margin-top: 30px;
  backdrop-filter: saturate(140%) blur(6px);
  background-color: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 
  0px 0px 1px rgba(3, 7, 18, 0.01),
  0px 0px 4px rgba(3, 7, 18, 0.02),
  0px 0px 9px rgba(3, 7, 18, 0.03),
  0px 0px 15px rgba(3, 7, 18, 0.04),
  0px 0px 24px rgba(3, 7, 18, 0.05);
}

details {
border-top: 1px solid var(--border);
}
details:first-of-type { border-top: 0; }

summary {
list-style: none;
cursor: pointer;
padding: 30px 20px;
font-weight: 600;
display: grid;
grid-template-columns: 10px 1fr auto;
gap: 60px;
align-items: center;
transition: background .2s ease;
}

summary:hover { background: rgba(56,189,248,.06); }


summary::-webkit-details-marker { display: none; }


.badge {
width: 50px; height: 50px; border-radius: 6px;
display: grid; place-items: center;
background-color: #85d800;
border: 1px solid var(--border);
font-weight: 700; font-size: 24px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
color: #fff;
}

.sum-text { font-size: 26px; }

.chevron {
width: 14px; height: 14px; border-right: 2px solid var(--text); border-bottom: 2px solid var(--text);
transform: rotate(-45deg);
transition: transform .25s ease;
opacity: .8;
}


details[open] .chevron { transform: rotate(45deg); }


.panel {
padding: 0 20px 20px 20px;
color: var(--text);
border-top: 1px dashed var(--border);
background: linear-gradient(180deg, rgba(56,189,248,.04), transparent 40%);
}


.panel p { margin: 0px 0 0; font-size: 22px; }


.muted { color: var(--muted); font-size: 22px; }

.footnote {
margin-top: 18px;
font-size: 17px;
color: var(--muted);
text-align: center;
}

.footer {
  position: absolute;
  top: 1600px;
  left: 0%;
}
}

@media (min-width: 1000px) and (max-width: 1200px) and (orientation: landscape) {
  body {
  background-color: #fff;
}

.banner-container {
  width: 100%;
  height: 300px;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 1;
}

.banner-shadow {
  background-image: linear-gradient(to bottom, #000, #00000000);
  width: 100%;
  height: 20%;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 98;
}

.banner-container img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  object-fit: cover;
}

.production-menu{ display: none;}

.header {
  font-family: 'Open Sans', sans-serif;
  font-size: 52px;
  color: #000;
  position: absolute;
  top: 370px;
  left: 5%;
  width: 70%;
}

.text { 
  font-family: 'Open Sans', sans-serif;
  font-size: 24px;
  color: #8c8c8c;
  position: absolute;
  top: 560px;
  left: 5%;
  width: 90%;
  text-align: justify;
}

.p-accordion { 
  margin-top: 30px;
  backdrop-filter: saturate(140%) blur(6px);
  background-color: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 
  0px 0px 1px rgba(3, 7, 18, 0.01),
  0px 0px 4px rgba(3, 7, 18, 0.02),
  0px 0px 9px rgba(3, 7, 18, 0.03),
  0px 0px 15px rgba(3, 7, 18, 0.04),
  0px 0px 24px rgba(3, 7, 18, 0.05);
}

details {
border-top: 1px solid var(--border);
}
details:first-of-type { border-top: 0; }

summary {
list-style: none;
cursor: pointer;
padding: 30px 20px;
font-weight: 600;
display: grid;
grid-template-columns: 10px 1fr auto;
gap: 60px;
align-items: center;
transition: background .2s ease;
}

summary:hover { background: rgba(56,189,248,.06); }


summary::-webkit-details-marker { display: none; }


.badge {
width: 50px; height: 50px; border-radius: 6px;
display: grid; place-items: center;
background-color: #85d800;
border: 1px solid var(--border);
font-weight: 700; font-size: 24px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
color: #fff;
}

.sum-text { font-size: 26px; }

.chevron {
width: 14px; height: 14px; border-right: 2px solid var(--text); border-bottom: 2px solid var(--text);
transform: rotate(-45deg);
transition: transform .25s ease;
opacity: .8;
}


details[open] .chevron { transform: rotate(45deg); }


.panel {
padding: 0 20px 20px 20px;
color: var(--text);
border-top: 1px dashed var(--border);
background: linear-gradient(180deg, rgba(56,189,248,.04), transparent 40%);
}


.panel p { margin: 0px 0 0; font-size: 22px; }


.muted { color: var(--muted); font-size: 22px; }

.footnote {
margin-top: 18px;
font-size: 17px;
color: var(--muted);
text-align: center;
}

.footer {
  position: absolute;
  top: 1600px;
  left: 0%;
}
}