:root {
  --cc-navy:#1F3556;
  --cc-grey:#7A848D;
  --cc-teal:#4FA7A0;
  --cc-dark-teal:#449999;
  --cc-sand:#D8C9B6;
  --cc-cream:#F7F4EE;
  --cc-white:#ffffff;
  --cc-dark:#24313D;
}

/* HERO */
.cc-hero{
  position:relative;
  height:600px;
  overflow:hidden;
  display:flex;
  align-items:center;
  padding:60px;
}

.cc-hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
}

.cc-hero-bg img{
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center right;
  opacity:0;
  transition:opacity 2s ease-in-out;
}

.cc-hero-bg img.active{
  opacity:1;
}

.cc-hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(247,244,238,.96) 0%,
    rgba(247,244,238,.65) 40%,
    rgba(247,244,238,.3) 70%
  );
  z-index:1;
}

.cc-hero-content{
  position:relative;
  z-index:2;
  max-width:600px;
}

.cc-hero h1{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(48px,6vw,80px);
  line-height:1;
  color:var(--cc-navy);
  margin:0;
  font-weight:400;
}

.cc-line{
  width:80px;
  height:3px;
  background:var(--cc-teal);
  margin:30px 0;
}

.cc-hero p{
  font-size:18px;
  line-height:1.6;
  color:#4e5b66;
}

@media(max-width:900px){
 .cc-hero{
    padding:40px 20px;
    height:auto;
  }

  .cc-hero-overlay{
  background: linear-gradient(
    90deg,
    rgba(247,244,238,.96) 0%,
    rgba(247,244,238,.92) 52%,
    rgba(247,244,238,.72) 72%,
    rgba(247,244,238,.20) 100%
  );
    }
    .cc-hero p{
    text-shadow: 0 0px 5px rgba(255,255,255,.75);
    padding-right: 30px;
}
}