@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
:root {
  --bg: #fef9f6;
  --text: #333;
  --primary: #dabc77;
  --accent: darkgoldenrod;
}
body{margin:0;font-size:1.2rem;font-family:"Cormorant Garamond", serif;
  background:var(--bg);color:var(--text)}
main{max-width:1000px;margin:0 auto}
h1,h2{font-family:"Montserrat", sans-serif;font-weight:normal}
h2{font-size:2rem}
.announcement{background:pink;border-bottom:2px solid deeppink;padding:.5rem;text-align:center;
  span{display:none}}
header,footer{padding:1rem 2rem}
footer{background:black;color:white;text-align:center;
  a{padding-right:1rem}}
address{text-transform:uppercase;font-style: normal}
nav a,.contact a{color:#333}
nav a:first-child{border-bottom:0;position:absolute;top:3em}
nav a{text-decoration:none;border-bottom:1px solid #333;text-transform:uppercase;margin-right:1em}
nav,.logo{text-align:center}
.hero{padding:1rem;text-align:center;
  address{padding-bottom:1rem}
  video{border-radius:20px;max-width:100%}}
.hero-content{padding:2rem 0}
.subtitle{text-align:right;font-size:.9rem;position:relative;top:-1.2rem}
.btn-primary{background:var(--primary);border:1px solid #333;color:#333;font-weight:bold;
  font-size:1.4rem;padding:.7rem 2rem;text-decoration:none;border-radius:5px}
.trust{text-align:center;text-transform:uppercase}
.icon{width:24px;height:24px;fill:currentColor}
.trust{padding:2rem}
.services,.gallery,.contact{padding:4rem 2rem}
.intro{padding:1rem;text-align:center;font-size:1.4rem;max-width:900px}
.gallery-grid img{max-width:100%}
.gallery-grid p{padding-right:1rem}
.services{text-align:center}
.services img{width:50px;height:50px}
.service-grid{display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:2rem;margin-top:2rem}
.service-card{background:white;padding:2rem;border:1px solid #333;
  p,ul{text-align:left}
  img{border-radius:0}}

.hero-content,main img,.service-card{border-radius:1.5rem}

.contact-intro img{max-width:100%}
.contact address{font-size:1.5rem}
.booking{text-align:center;padding:4rem 2rem}

.comparison {
	position: relative;
	overflow: hidden;
  border-radius: 1rem;
  margin:0 1rem;
	.lhs, .lhs-wrapper{position:absolute;top:0;left:0}
	.lhs{display:block;max-width:none}
	.lhs-wrapper{height:100%;width:50%;overflow:hidden}
	.dragger{position:absolute;top:0;left:50%;width:0;height:100%;cursor:ew-resize;
		&::before {
			content: '';
			display: block;
			width: .4em;
			height: 100%;
			margin-left: -.2em;
			background: rgba(255,255,255, .3);
		}
		&::after {
			--button-size: 5rem;
      font-family:monospace;
      font-size: 2rem;
			content: '‹ ›';
			display: inline-block;
			position: absolute;
			top: 50%; left: 50%;
			width: var(--button-size);
			height: var(--button-size);
			margin: calc(var(--button-size)/-2);
			border-radius: 100%;
			background: white;
			text-align: center;
			line-height: var(--button-size);
			white-space: nowrap;
		}
	}
  img{display: block;width: 100%;}
  .caption {
    display:block;
    position:absolute;top:1rem;right:1.5rem;
    padding:.5em 1rem;opacity:.6;
    border-radius:.5rem;font-size:1.4rem;
    background:var(--primary);
  }
  .lhs .caption{right:auto;left:1.5rem}
}


@media (min-width: 768px) {
  .announcement span{display:inline-block}
  .hero{display:flex;justify-content:center;align-items:center;text-align:left;
    video{max-width:45%}
    h1{font-size:2.5rem}}
  .hero-content{background:rgba(251,249,235,.8);padding:2rem;position:relative;left:60px;z-index:99}
  .trust,.contact{display:flex;justify-content:center;gap:2rem}
  .trust{gap:1rem}
  .intro{padding:4rem}
  .gallery-grid{display:flex;align-items:left;gap:1rem;
    img{max-width:222px}}
  .contact-intro{max-width:30%}
  .comparison{margin:0 8em}
}