:root{
  --color-bg: #fff;
  --color-text: #333;
  --color-muted: #858585;
  --color-accent: #cca776;
  --color-ghost: #f9f9f9;
  --border: 1px solid #E8E8E8;
  --radius: 0.25rem;
  --gap-lg: 2.625rem; /* ~42px */
  --gap-md: 1.5rem; /* ~24px */
  --space-xl: 7.5rem; /* ~120px */
  --space-lg: 5rem; /* ~80px */
  --space-md: 2.625rem; /* ~42px */
  --container-padding: 2rem;
}

*{
  box-sizing: border-box;
}

header{
  height: 5rem; /* 80px */
  width:100%;
  position: sticky;
  top:0;
  z-index:2;
  background-color:var(--color-bg);
  border-bottom: 0.125rem solid var(--color-accent);
}

nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:100%;
}

nav img{
  height:2.125rem; /* ~34px */
}

nav ul{
  display:flex;
  gap: 0 var(--gap-lg);
  margin:0;
  padding:0;
  list-style:none;
}

nav ul li a{
  color:var(--color-text);
  text-decoration:none;
}

nav ul li a.contact{
  padding:0.75rem 1.125rem; /* 12px 18px */
  border-radius:0.125rem;
  color:#fff;
  background-color:var(--color-accent);
}

#home .carousel-inner{
  border-radius: 0 0 0.625rem 0.625rem; /* ~10px */
}

#about{
  display:flex;
  align-items:center;
  gap:var(--gap-md);
  padding: var(--space-xl) 0;
}

#about div{
  width:50%;
}

#about h3{
  margin:0;
  font-size:1rem;
  color:var(--color-accent);
}

#about h2{
  margin:0 0 1.25rem 0; /* 20px bottom */
  font-size:2.625rem; /* ~42px */
  font-weight:700;
  color:var(--color-text);
}

#about p{
  padding:0 0 1.25rem 0;
  color:var(--color-text);
}

#about .images{
  flex:1;
  position:relative;
  min-height:26.25rem; /* ~420px */
}

#about .image-container{
  position:absolute;
  width:65% !important;
  height:15rem; /* ~240px */
}

#about .image-container img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:var(--radius);
}

#about .image-top{
  top:0;
  right:10rem; /* ~160px */
}

#about .image-bottom{
  bottom:0;
  right:0;
}

#services{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3rem; /* ~48px */
  padding:var(--space-lg) 0;
}

#services h3{
  margin:0;
  font-size:1rem;
  text-align:center;
  color:var(--color-accent);
}

#services h2{
  margin:0 0 1.25rem 0;
  font-size:2.625rem;
  font-weight:700;
  color:var(--color-text);
}

#services .service{
  display:flex;
  gap:var(--space-md);
  padding:var(--space-md);
  border-radius:var(--radius);
}

#services .service img{
  width:45%;
  border-radius:var(--radius);
}

#services .service h5{
  margin:0;
  font-size:1rem;
  text-transform:uppercase;
  color:var(--color-accent);
}

#services .service h4{
  margin:0 0 1.25rem 0;
  font-size:2rem; /* ~32px */
  font-weight:700;
  color:var(--color-text);
}

#services .service p{
  padding:0 0 1.25rem 0;
  color:var(--color-text);
}

#services .service:nth-child(odd){
  text-align:left;
  flex-direction:row-reverse;
}

#services .service:nth-child(even){
  text-align:right;
  background-color:var(--color-ghost);
}

#contact{
  padding:2.625rem;
  background-color:var(--color-ghost);
}

#contact h3{
  margin:0;
  font-size:1rem;
  color:var(--color-accent);
  text-align:center;
}

#contact h2{
  margin:0 0 1.25rem 0;
  font-size:2.625rem;
  font-weight:700;
  color:var(--color-text);
  text-align:center;
}

#contact form{
  padding:2rem;
  border-radius:var(--radius);
  background-color:var(--color-bg);
  border:var(--border);
}

#contact textarea{
  resize:none;
}

#contact button{
  width:100%;
}

footer{
  border-top:0.25rem solid var(--color-accent);
}

footer .container{
  display:flex;
  justify-content:space-between;
  flex-direction:column;
  gap:1.125rem; /* ~18px */
  padding:3rem 0 2.375rem 0; /* 48px 38px */
}

footer p{
  text-align:center;
  color:var(--color-muted);
  font-size:0.875rem;
  margin:0;
}

footer img{
  width:7.5rem; /* ~120px */
  margin-bottom:1.125rem;
}

footer span{
  display:block;
  font-size:0.875rem;
  font-weight:400;
  color:var(--color-muted);
}

footer ul{
  list-style:none;
  margin:0;
  padding:0;
}

footer ul li{
  margin-bottom:0.5rem;
}

footer ul li:first-of-type{
  margin-bottom:0.875rem;
}

footer ul li a{
  display:flex;
  align-items:baseline;
  text-decoration:none;
  color:var(--color-muted);
  font-size:0.875rem;
}

footer ul li a i{
  margin-right:0.75rem; /* ~12px */
}

.parallax{
  background-image: url("https://placehold.jp/12/EEEEEE/000/1920x150.png?text=PLACEHOLDER%20IMAGE");
  min-height:9.375rem; /* ~150px */
  background-attachment: fixed;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
}