/*** CSS RESET ***/

/*
  1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
  box-sizing: border-box;
}
/*
  2. Remove default margin
*/
* {
  margin: 0;
}
/*
  Typographic tweaks!
  3. Add accessible line-height
  4. Improve text rendering
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/*
  5. Improve media defaults
*/
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
/*
  6. Remove built-in form typography styles
*/
input, button, textarea, select {
  font: inherit;
}
/*
  7. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
/*
  8. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

/** END CSS RESET **/

body {
  font-family: Roboto, Arial, Verdana, Geneva, Tahoma, sans-serif;
margin: 0;
}

h1, h2, h3 {
  font-family: "Playfair Display", Garamond, Georgia, 'Times New Roman', Times, serif;
}

h3 {
  font-size: 1.5em;
}

p {
 margin-top:20px;
}

ul{
  margin-top: 20px;
}

.container {
  display:flex;
  justify-content: center;
}

.em, .em * {
  font-style: italic;
}

.container > section {
  padding: 5%;
  max-width: 1248px;
}

.container > section > h2 {
  text-align: center;
  font-size: 2em;
  margin-bottom: 60px;
}

.container > section > h3:not(:nth-of-type(1)){
  margin-top: 40px;
}

.subheader {
font-family: Roboto, Arial, Verdana, Geneva, Tahoma, sans-serif;
}

.background--primary {
  background-color: #D5C3A3;
  color: #1A2023;
}

.background--secondary {
  background-color: #1A2023;
  color: white;
}

.color--primary {
  color: #0F534E;
}

.color--secondary {
  color: #CCE1DF;
}

#hero {
background-color: #1A2023;
color: white;
display: flex;
gap: 40px;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
padding-top: 15px;
padding-bottom: 15px;
}

#hero > h1 {
  font-size: 4em;
}

.flex-cards {
  display: flex;
  flex-direction: row;
  margin-top: 40px;
  gap: 40px;
}

.flex-cards > div {
  padding: 2%;
  border: 1px solid;
  border-radius: 15px;
  flex: 1;
}

#about button {
  margin-top: 20px;
  margin-bottom: 40px;
  padding: 1% 5%;
  background-color: #1A2023;
  border: 1px solid #1A2023;
  color: white;
  border-radius: 10px;
  cursor: pointer;
  text-transform: uppercase;
  font-weight:bold;
}

footer {
  font-size: 10px;
  justify-content: center;
  letter-spacing: 1.3px;
  line-height: 18px;
  text-align: center;
  text-transform: uppercase;
  padding: 10px;
}

/* Section-specific CSS */

div.container:has(section#offerings) {
    border-top: 1px solid;
}

section#offerings h2 {
    padding: 10px;
    border-radius: 15px;
}

section#approach h2 {
    padding: 10px;
    border-radius: 15px;
    background-color: #E1A351;
}


/* Media queries */

@media only screen and (max-width: 1024px) {
  .flex-cards {
    flex-direction: column;
    margin-top: 40px;
    gap: 40px;
  }
}