html {
  scroll-behavior: smooth;
}

body {
  color: #B11030;
  background-color: #FFF3DF;
  font-family: "Unbounded", sans-serif;
  font-optical-sizing: auto;
  font-weight: 350;
  font-style: normal;
  margin: 0;
}

main {
  max-width: 1512px;
  margin: 0 auto;
}

.skip {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  background: #fff;
}

.skip:focus {
  position: static;
  width: auto;
  height: auto;
}

/**/
/**/
/* HEADER */

header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 32px 48px;
}

nav {
  display: flex;
  flex-direction: row;
  gap: 32px;
}

header a {
  color: #B11030;
  text-decoration: none;
}

header a:hover {
  color: #B11030;
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-underline-offset: 4px;
  text-decoration-color: #FF3AA0;
}

.logo {
  padding-right: 220px;
}

.social-set {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
}

.social-icon {
  width: 16px;
}

/**/
/**/
/* HOMEPAGE */

.hero {
  height: 488px;
  position: relative;
  margin: 0 100px;
}

.tulip {
  position: absolute;
  left: 0;
  top: 58%;
}

.flower {
  position: absolute;
  left: 5%;
  top: 24.5%;
}

.diamond-orange {
  position: absolute;
  left: 14%;
  top: 53%;
}

.diamond-blue {
  position: absolute;
  right: 12%;
  top: 22.5%;
}

.semi-circle {
  position: absolute;
  right: 7%;
  top: 54%;
}

.star {
  position: absolute;
  right: 0px;
  top: 31%;
}

.title {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
  align-items: center;
  padding-top: 110px;
}

h1 {
  font-family: "Cormorant", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 80px;
  margin: 0;
}

.h1-italic {
  font-style: italic;
  font-size: 80px;
}

p {
  font-family: "Cardo", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  line-height: 40px;
  margin: 0;
}

.description p {
  margin: 0 0 40px 0;
}

.description-images-container {
  height: 728px;
  position: relative;
  margin: 0 100px;
}

.description {
  width: 37%;
}

.img-hover-zoom {
  display: inline-block;
  overflow: hidden;
  position: absolute;
}

.img-hover-zoom img {
  transition: transform .5s ease;
}

.img-hover-zoom:hover img {
  transform: scale(1.05);
}

.zoom-stylescape {
  left: 49%;
  top: 0;
  width: 304px;
  height: 229px;
}

.stylescape {
  width: 304px;
  height: 229px;
}

.zoom-carlos {
  right: 0;
  top: 15%;
  width: 200px;
  height: 242px;
}

.crochet-carlos {
  width: 200px;
  height: 242px;
}

.zoom-duck {
  left: 8%;
  bottom: 4%;
  width: 200px;
  height: 200px;
}

.duck {
  width: 200px;
  height: 200px;
}

.zoom-ordermentum {
  left: 33%;
  bottom: 22%;
  width: 240px;
  height: 180px;
}

.ordermentum {
  width: 240px;
  height: 180px;
}

.zoom-crochet-mate {
  right: 17%;
  bottom: 0;
  width: 260px;
  height: 260px;
}

.crochet-mate {
  width: 260px;
  height: 260px;
}

/**/
/**/
/* HOMEPAGE - CASE STUDIES */

.case-studies {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 200px;
}

.case-study-row {
  display: flex;
  flex-direction: row;
  gap: 0;
}

.case-studies img {
  width: 50%;
}

.case-study-content {
  padding: 100px;
}

.lavender-bg {
  background-color: #DBB8E2;
}

.salmon-bg {
  background-color: #FEB4AA;
}

.cherry-bg {
  background-color: #B11030;
}

.blue-bg {
  background-color: #0565B4;
}
.bubblegum-bg {
  background-color: #FDB8F1;
}

.case-study-title {
  font-family: "Cormorant", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: italic;
  font-size: 64px;
  line-height: 64px;
  padding-bottom: 32px;
}

.case-study-subtitle {
  font-family: "Unbounded", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-size: 20px;
  line-height: 36px;
  padding-bottom: 48px;
}

.text-black {
  color: #1A1A1A;
}

.text-cream {
  color: #FFF3DF;
}

.button {
  font-family: "Unbounded", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: 18px;
  font-style: normal;
  display: block;
  border-radius: 500px;
  height: 48px;
  padding: 0 24px 2px;
  border: none;
  text-decoration: none;
  width: max-content;
  align-content: center;
}

.btn-green {
  background-color: #E0E032;
  color: #1A1A1A;
  box-shadow: 0 6px #BD9500;
}

.btn-green:hover {
  box-shadow: 0 4px #BD9500;
  transform: translateY(2px);
}

.btn-green:active {
  box-shadow: none;
  transform: translateY(4px);
}

.btn-red {
  background-color: #FD0944;
  color: #FFF3DF;
  box-shadow: 0 6px #B11030;
}

.btn-red:hover {
  box-shadow: 0 4px #B11030;
  transform: translateY(2px);
}

.btn-red:active {
  box-shadow: none;
  transform: translateY(4px);
}

.btn-pink {
  background-color: #FDB8F1;
  color: #B11030;
  box-shadow: 0 6px #FF3AA0;
}

.btn-pink:hover {
  box-shadow: 0 4px #FF3AA0;
  transform: translateY(2px);
}

.btn-pink:active {
  box-shadow: none;
  transform: translateY(4px);
}

/**/
/**/
/* CASE STUDY TEMPLATE */

.cs-main {
  max-width: 1500px;
  margin: 0 auto;
  padding: 120px 100px;
}

.cs-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-bottom: 80px;
}

.cs-intro {
  width: 66%;
  padding-left: 105px;
}

.cs-h1 {
  font-family: "Unbounded", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 36px;
  line-height: 52px;
  padding-bottom: 40px;
}

.title-red {
  color: #FD0944;
}

.title-orange {
  color: #F55600;
}

.title-blue {
  color: #0565B4;
}

.title-purple {
  color: #9353B9;
}

.rhs-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: "Unbounded", sans-serif;
  font-optical-sizing: auto;
  font-weight: 350;
  font-style: normal;
  font-size: 12px;
  line-height: 24px;
}

.label-value a {
  color: #B11030;
  text-decoration: none;
}

.label-value a:hover {
  color: #B11030;
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-underline-offset: 3px;
  text-decoration-color: #FF3AA0;
}

.label {
  color: #666666;
}

.value {
  color: #1A1A1A;
}

.cs-paragraph {
  font-size: 18px;
  line-height: 32px;
  color: #1A1A1A;
  padding-bottom: 32px;
}

.hero-img {
  width: 100%;
  padding-bottom: 32px;
}

.mid-img {
  width: 100%;
  margin: 48px 0 16px;
  /*border: 4px solid #FFFFFF;*/
}

.mid-img-no-caption {
  width: 100%;
  margin: 48px 0;
  /*border: 4px solid #FFFFFF;*/
}

.img-above-p {
  margin-bottom: 80px;
}

.caption {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: flex-start;
  font-family: "Unbounded", sans-serif;
  font-optical-sizing: auto;
  font-weight: 350;
  font-style: normal;
  font-size: 12px;
  line-height: 24px;
  color: #666666;
  padding-bottom: 32px;
}

.caption-link {
  color: #B11030;
  text-decoration: none;
}

.caption-link:hover {
  color: #B11030;
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-underline-offset: 3px;
  text-decoration-color: #FF3AA0;
}

.img-caption-above-p {
  padding-bottom: 80px;
}

.cs-content-with-margins {
  margin: 0 105px;
}

.cs-h2 {
  font-family: "Unbounded", sans-serif;
  font-optical-sizing: auto;
  font-weight: 350;
  font-style: normal;
  font-size: 24px;
  line-height: 48px;
  padding: 48px 0 8px;
  margin: 0;
}

.p-80 {
  width: 80%;
}

.p-below-img-no-caption {
  padding-top: 32px;
}

.p-below-caption {
  padding-top: 48px;
}

ul {
  font-family: "Cardo", serif;
  font-weight: 400;
  font-style: normal;
  margin: 0;
}

li {
  padding-top: 8px;
}

.li-first {
  padding: 0;
}

.quote {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: flex-start;
  justify-content: center;
  padding-top: 48px;
}

.quote-text {
  width: 70%;
}

.quote-title {
  font-family: "Cormorant", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: italic;
  font-size: 48px;
  line-height: 60px;
  padding-bottom: 24px;
  color: #1A1A1A;
}

.quote-label {
  font-family: "Unbounded", sans-serif;
  font-optical-sizing: auto;
  font-weight: 350;
  font-style: normal;
  font-size: 12px;
  line-height: 24px;
}

.credits {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 48px;
  border-top: 1px solid #FEB4AA;
  padding-top: 24px;
  font-family: "Unbounded", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  line-height: 24px;
}

.skills {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 18%;
}

.collab {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 69%;
}

.credits-label {
  color: #1A1A1A;
}

.credits-value {
  color: #666666;
}

/**/
/**/
/* FOOTER */

footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 88px 100px;
}

.copyright {
  font-family: "Cormorant", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: italic;
  font-size: 14px;
  line-height: 16px;
  padding-top: 16px;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 20px;
  line-height: 36px;
}

footer a {
  color: #B11030;
  text-decoration: none;
}

footer a:hover {
  color: #B11030;
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-underline-offset: 5px;
  text-decoration-color: #FF3AA0;
}

.email-title {
  font-size: 20px;
  line-height: 36px;
}

.email {
  font-family: "Cormorant", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: italic;
  padding-top: 4px;
}

footer .social-set {
  padding-top: 16px;
}

.social-title {
  font-size: 20px;
  line-height: 36px;
}