html {height:100%;overflow: hidden;}
body {height:100%;overflow: hidden;margin:0;padding:0;font-family: Arial, Helvetica, sans-serif;font-size: 12px;line-height: 1.2;background: #f8f7f3;color: #000000;box-sizing: border-box;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
div, p, span, h1, h2, h3, h4, ol {vertical-align: baseline;margin:0;padding:0;box-sizing: border-box;}
*{margin:0; padding:0;}
img{max-width:100%;vertical-align:middle;}

#form {gap: 6px;border-radius: 4px;font-family: Consolas, Monaco, "Courier New", monospace;display: flex;align-items: center;justify-content: space-between;flex-shrink: 0;}
#form input {padding: 6px;background-color: #ffffff38;color: #404040;border-style: unset;border-radius: 4px;width: 122px;border: 1px solid #dfe3cc;font-size: 12px;}
#form input::placeholder {color: #000;opacity:0.3;}
#form div {padding: 7px;border-radius: 2px;border: none;background: #eff1e3;color: #738659;}

.cormorant-500 {
  font-family: "Cormorant Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}
.cormorant-600 {
  font-family: "Cormorant Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

@media screen and (orientation: portrait) {
.page {color: #344932;width:100%;height:100dvh;display: flex;flex-direction: column;justify-content: flex-start;align-items: center;position: relative;background-image: url(6.jpg);background-size: 220%;background-position: 100% 100%;background-repeat: no-repeat;}
.page .logo {width: 80px;}
.header {width: calc(100% - 44px);height: 80px;flex-shrink: 0;display: flex;align-items: center;justify-content: space-between;}
.hero {width: calc(100% - 48px);}
h1 {font-size: 58px; margin-top: 12px; line-height: 0.9; }
.line {width: 20%; height: 2px; background: #94a285; margin-top: 22px; }
p {font-size: 20px; width: 74%; margin-top: 24px; font-weight: 400; line-height: 1.2;
box-shadow: 3px 3px 30px 40px #f8f7f3;
  background: #f8f6f3;
  border-radius: 50%;}
.hero img {width: 88%;margin-top: 44px;display: none;}
}

@media screen and (orientation: portrait) and (max-width: 340px) {
#form input {width: 116px;}
.page .logo {width: 70px;}
.header {width: calc(100% - 36px);height: 70px;}
.hero {width: calc(100% - 40px);}
h1 {font-size: 44px;}
p {font-size: 18px; width: 68%; margin-top: 22px; }
}

@media screen and (orientation: portrait) and (min-width: 390px) {
.header {width: calc(100% - 58px);}
.hero {width: calc(100% - 58px);}
h1 {font-size: 62px;}
p {font-size: 24px;}
}

@media screen and (orientation: portrait) and (min-width: 640px) {
#form {gap: 14px;}
#form input {font-size: 18px; width: 182px; padding: 10px; }
#form div {padding: 11px 12px; font-size: 18px; }
.page .logo {width: 110px;}
.header {width: calc(100% - 15%); height: 120px; }
.hero {width: calc(100% - 15%); }
h1 {width: 90%; font-size: 12cqw; line-height: 1; }
p {font-size: 5cqw;}
}

@media screen and (orientation: portrait) and (min-width: 1024px) {
#form input {width: 262px; font-size: 26px; padding: 14px 14px 14px 22px; }
#form div {padding: 15px 18px; font-size: 25px; }
.page .logo {width: 160px; }
.header {height: 180px;}
h1 {margin-top: 32px;}
.line {height: 6px; margin-top: 52px;}
p {margin-top: 54px;}
}


@media screen and (orientation: landscape) {
#form {gap: 12px;}
#form input {width: 162px;font-size: 16px;padding: 12px 0px 12px 12px;}
#form div {padding: 12px 18px;font-size: 16px;}

.page {color: #344932;width:100%;height:100dvh;display: flex;flex-direction: column;justify-content: flex-start;align-items: center;position: relative;background-image: url(6.jpg);background-size: 105%;background-position: 100% 100%;background-repeat: no-repeat;min-height: 600px;}
.page .logo {width: 100px;}
.header {width: 90%;flex-shrink: 0;display: flex;align-items: center;justify-content: space-between;margin-top: 32px;}
.hero {width: 90%;display: flex;flex-direction: column;justify-content: center;height: 82%;min-height: 10px;}
h1 {font-size: 7cqw;line-height: 1;}
.line {width: 20%; height: 2px; background: #94a285; margin-top: 22px; }
p {font-size: 2cqw;line-height: 1.2;}
.hero img {width: 70%;margin-top: 34px;display: block;}
.description {box-shadow: 3px 3px 30px 40px #f8f7f3;background: #f8f6f3;border-radius: 50% 35% 59% 19%;width: 50%;margin-top: 24px;padding: 0 15px 6px 0;}
}

@media screen and (orientation: landscape) and (min-width: 1680px) {
#form input {width: 222px; font-size: 22px; padding: 14px 0px 14px 14px; }
#form div {padding: 14px 22px;font-size: 22px;}
.page .logo { width: 140px;}
.header {margin-top: 72px;width: 86%;}
.hero {width: 86%;height: 74%;}
.line {margin-top: 42px;}
p {font-size: 2.3cqw;}
.hero img {margin-top: 50px;}
.description {margin-top: 44px; width: 54%;}
}