/* RESET STYLES*/
*, *::before, *::after {
  box-sizing: border-box;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, 
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, 
ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, 
thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, 
header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, input, 
textarea, select, label, button, picture {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
img, picture, svg, video, canvas, article, aside, details, figcaption, figure, footer, 
header, hgroup, menu, nav, section, summary {
  display: block;
}
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
body {
  min-height: 100vh;
  line-height: 1.5;
}
ol, ul {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}
q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}
a {
  text-decoration: none;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}
a img, img, picture, svg, video, canvas {
  border: 0;
}
img, picture, svg, video, canvas {
  max-width: 100%;
  height: auto;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}
/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}
/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em
}
/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

/* GENERAL */
html, body {
  width: 100%;
  font: normal 16px "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-variation-settings:
    "wdth" 100;
  color: #000;
  background-color: #fff;
}

/* STRUCTURE & BEHAVIOR */
.menu,
.hero,
.btn-container {
  display: flex;
}

.menu {
  align-items: flex-end;
  gap: 30px;
}

.hero,
.btn-container {
  flex-direction: column;
}

.three-dots,
.body-list {
  display: block;
}

.nav {
  max-width: 1040px;
}

.nav,
.three-dots,
.wrapper,
.body-list {
  margin: 0 auto;
}

.body-list > li {
  margin-bottom: 8px;
}

.body-list {
  width: 90%;
  max-width: 460px;
  list-style-type: disc;
}

/* TYPOGRAPHY */
.menu {
  font-size: 12px;
}

.menu,
.btn {
  text-transform: uppercase;
}

.menu > li > a,
.menu > li > a:active,
.menu > li > a:visited,
.body-list > li::marker {
  color: #ad8a43;
}

.montserrat {
  font-family: "Montserrat", sans-serif;
}

strong {
  font-weight: 700;
}

strong.semi-bold {
  font-size: 600;
}

.body-text,
.body-list {
  font-size: 20px;
  font-weight: 300;
}

.body-text,
.btn,
.footer-text {
  text-align: center;
}

.footer-text {
  font-size: 15px;
  letter-spacing: 5px;
}

/* SPECIFIC ELEMENTS */
.header {
  padding: 2rem 15px;
  background-color: #000;
}

.hero {
  align-items: center;
  padding: 120px 15px;
  background: #000 url(img/bg-hero.jpg) no-repeat center top;
}

.hero__logo,
.hero__text {
  width: 100%;
  max-width: 664px;
}

.hero__logo {
  margin-bottom: 50px;
}

.hero__text,
.btn,
.footer-text {
  color: #fff;
}

.hero__text {
  padding-right: 24px;
  font-size: 40px;
  font-weight: 500;
  text-align: right;
}

.hero__text time {
  font-size: 1.4em;
}

.main {
  padding: 60px 15px 100px 15px;
}

.wrapper {
  max-width: 675px;
}

.btn {
  width: 90%;
  max-width: 241px;
  padding: 12px 25px;
  background-color: #ad8a43;
  border-radius: 20px;
}

.btn-container {
  gap: 16px;
  align-items: center;
}

.footer {
  padding: 35px 15px;
  background-color: #909888;
}

@media (max-width: 768px) {
  .body-text,
  .body-list {
    font-size: 16px;
  }

  .hero__text {
    font-size: 32px;   
  }
}

@media (max-width: 560px) {
  .body-text br,
  .body-list br,
  .hide-mobile-sm {
    display: none;
  }
}

@media (max-width: 500px) {
  .hero__text {
    padding: 0;
    text-align: center;
    font-size: 20px;
  }

  .menu {
    justify-content: center;
  }
}