/* Future: page layout (shared styles live in styles.css) */

/* Inline text styles */
.fs-1-25rem { font-size: 1.25rem; }
.fw-200 { font-weight: 200; }
.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }

/* Section 1: background video */
.s1 { min-height: 996.44px; }
.video-bg.s1-video { background-image: url("https://i.ytimg.com/vi/PTC2R64H5jA/maxresdefault.jpg"); }
.s1-row { grid-template-columns: minmax(0, 24fr); column-gap: 30px; }
.s1-c1 { padding: 0; }

/* Section 2: A New Era Of Luxury Living */
.s2 { min-height: 278.29px; background-color: rgb(255, 255, 255); padding: 50px 132px; }
.s2-row { grid-template-columns: minmax(0, 24fr); column-gap: 0; }
.s2-c1 { padding: 0; justify-content: center; background-color: rgba(255, 255, 255, 0); }
.s2-c1-h3 { font-size: 3.75rem; font-weight: 300; line-height: 1em; letter-spacing: 0.2em; color: rgb(255, 255, 255); margin-bottom: 0.5625em; text-align: center; }
.s2-c1-p { font-size: 1.125rem; font-weight: 300; line-height: 1.5em; color: rgb(255, 255, 255); margin-bottom: 1.25em; text-align: center; }
.bg.s2-bg { background-image: url("../images/pexels-photo-1072179-min.bac9adc8e091.jpg"); background-position: 50% 50%; }

/* Section 3: Residences Start At $3 Million. */
.s3 { min-height: 544.96px; background-color: rgb(227, 222, 209); }
.s3-row { grid-template-columns: minmax(0, 24fr); column-gap: 30px; }
.s3-c1 { padding: 50.1336px 124.6967px 0 158px; justify-content: center; text-align: center; --ha: center; }
.s3-c1-g1 { margin-bottom: 25px; }
.s3-c1-h4 { font-size: 1.6875rem; font-weight: 300; line-height: 1.5em; letter-spacing: 0.2em; color: rgb(34, 49, 30); margin-bottom: 0.55em; text-align: center; }
.s3-c1-h4-2 { font-size: 1.125rem; font-weight: 300; line-height: 1.5em; color: rgb(6, 6, 6); margin-bottom: 0.55em; text-align: center; }
.s3-c1-img { margin: 0 0 16px 0; width: 420px; }

/* Section 4: spacer */
.s4 { min-height: 68.43px; background-color: rgb(227, 222, 209); }
.s4-row { grid-template-columns: minmax(0, 24fr); column-gap: 0; }
.s4-c1 { padding: 0 0 50px 0; justify-content: center; text-align: center; --ha: center; }
.s4-c1-btn { font-size: 1rem; color: rgb(255, 255, 255); background-color: rgb(34, 49, 30); border: 0; border-radius: 40px; margin-bottom: 0; }

/* Section 5: spacer */
.s5 { min-height: 1217.09px; background-color: rgb(227, 222, 209); padding: 50px; }
.s5-row { grid-template-columns: minmax(0, 12fr) minmax(0, 12fr); column-gap: 30px; }
.s5-c1 { padding: 0 0 0.0001px 0; }
.s5-c1-img { margin: 0 0 50px 0; }
.s5-c2 { padding: 0; }
.s5-c2-img { margin: 0 0 50px 0; }
.s5-c2-img-2 { margin: 0 0 0px 0; }

/* Section 6: spacer */
.s6 { min-height: 672.04px; background-color: rgb(227, 222, 209); }
.s6-row { grid-template-columns: minmax(0, 24fr); column-gap: 0; }
.s6-c1 { padding: 0 0 75px 0; justify-content: center; text-align: center; --ha: center; }
.s6-c1-img { margin: 0 0 50px 0; }
.s6-c1-btn { font-size: 1rem; color: rgb(255, 255, 255); background-color: rgb(34, 49, 30); border: 0; border-radius: 40px; margin-bottom: 0; }

/* Section 7: Let's Start Planning The Other 364 Days */
.s7 { min-height: 235.68px; background-color: rgb(227, 222, 209); }
.s7-row { grid-template-columns: minmax(0, 24fr); column-gap: 30px; }
.s7-c1 { padding: 50.7464px 0 0 0; justify-content: center; text-align: center; --ha: center; }
.s7-c1-h1 { font-size: 3.5rem; font-weight: 300; line-height: 1.2em; letter-spacing: 0.4em; color: rgb(0, 0, 0); margin-bottom: 0.55em; text-align: center; }

/* Section 8: Exploring Nature Days */
.s8 { min-height: 287.79px; background-color: rgb(227, 222, 209); }
.s8-row { grid-template-columns: minmax(0, 8fr) minmax(0, 8fr) minmax(0, 8fr); column-gap: 30px; }
.s8-c1 { padding: 0; text-align: center; --ha: center; }
.s8-c1-img { margin: 0 0 16px 0; }
.s8-c1-h4 { font-size: 1.25rem; font-weight: 300; line-height: 1.3em; color: rgb(0, 0, 0); margin-bottom: 0.55em; }
.s8-c2 { padding: 0; text-align: center; --ha: center; }
.s8-c2-img { margin: 0 0 16px 0; }
.s8-c2-h4 { font-size: 1.25rem; font-weight: 300; line-height: 1.3em; color: rgb(0, 0, 0); margin-bottom: 0.55em; }
.s8-c3 { padding: 0; text-align: center; --ha: center; }
.s8-c3-img { margin: 0 0 16px 0; }
.s8-c3-h4 { font-size: 1.25rem; font-weight: 300; line-height: 1.3em; color: rgb(0, 0, 0); margin-bottom: 0.55em; }

/* Section 9: Sports Days */
.s9 { min-height: 319.69px; background-color: rgb(227, 222, 209); }
.s9-row { grid-template-columns: minmax(0, 8fr) minmax(0, 8fr) minmax(0, 8fr); column-gap: 30px; }
.s9-c1 { padding: 0; text-align: center; --ha: center; }
.s9-c1-img { margin: 0 0 16px 0; }
.s9-c1-h4 { font-size: 1.25rem; font-weight: 300; line-height: 1.3em; color: rgb(0, 0, 0); margin-bottom: 0.55em; }
.s9-c2 { padding: 0; text-align: center; --ha: center; }
.s9-c2-img { margin: 0 0 16px 0; }
.s9-c2-h4 { font-size: 1.25rem; font-weight: 300; line-height: 1.3em; color: rgb(0, 0, 0); margin-bottom: 0.55em; }
.s9-c3 { padding: 0; text-align: center; --ha: center; }
.s9-c3-img { margin: 0 0 16px 0; }
.s9-c3-h4 { font-size: 1.25rem; font-weight: 300; line-height: 1.3em; color: rgb(0, 0, 0); margin-bottom: 0.55em; }

/* Section 10: background photo */
.s10 { min-height: 162.71px; background-color: rgb(0, 0, 0); }
.s10-row { grid-template-columns: minmax(0, 5fr) minmax(0, 14fr) minmax(0, 5fr); column-gap: 0; }
.s10-c1 { padding: 48.7461px 25px 0 25px; }
.s10-c1-img { margin: 0 0 16px 0; width: 188px; }
.s10-c2 { padding: 45.2461px 25px 25px 25px; }
.s10-c2-p { font-size: 1rem; font-weight: 300; line-height: 1.5em; color: rgb(255, 255, 255); margin-bottom: 0.55em; text-align: center; }
.s10-c2-p-2 { font-size: 0.875rem; font-weight: 300; line-height: 1.5em; color: rgb(255, 255, 255); margin-bottom: 0.55em; text-align: center; }
.s10-c3 { padding: 50.0312px 25px 0 25px; }
.s10-c3-img { margin: 0 0 16px 0; width: 188px; }
.bg.s10-bg { background-image: url("../images/omid-armin-fnzke3owm1o-unsplash-min.858aba037a1b.jpg"); background-position: 50% 50%; --ov: rgba(0, 0, 0, 0.3); }


@media (max-width: 999px) {
  /* Section 1: background video */
  .s1 { min-height: 444.81px; }
  .s1-c1 { padding: 6.5445vh 6.5vw; }

  /* Section 2: A New Era Of Luxury Living */
  .s2 { padding: 30px 79.2px; }
  .s2-c1 { padding: 50px 0 0 0; }

  /* Section 3: Residences Start At $3 Million. */
  .s3-c1 { padding: 50px 3.125vw 0 3.125vw; }

  /* Section 4: spacer */
  .s4-c1 { padding: 0 6.5vw 50px 6.5vw; }

  /* Section 5: spacer */
  .s5 { min-height: 1662.54px; padding: 30px; }
  .s5-c1 { padding: 0 6.5vw; }
  .s5-c2 { padding: 50px 6.5vw 0 6.5vw; }

  /* Section 6: spacer */
  .s6 { min-height: 396.05px; }
  .s6-c1 { padding: 50px 6.5vw; }

  /* Section 7: Let's Start Planning The Other 364 Days */
  .s7-c1 { padding: 50px 6.5vw 0 6.5vw; }

  /* Section 8: Exploring Nature Days */
  .s8-c1 { padding: 0 6.5vw 50px 6.5vw; }
  .s8-c1-img { margin: 0 0 3.0625em 0; }
  .s8-c2 { padding: 0 6.5vw; }
  .s8-c2-img { margin: 0 0 3.125em 0; }
  .s8-c3 { padding: 50px 6.5vw 0 6.5vw; }
  .s8-c3-img { margin: 0 0 3.125em 0; }

  /* Section 9: Sports Days */
  .s9-c1 { padding: 50px 6.5vw; }
  .s9-c1-img { margin: 0 0 3.0625em 0; }
  .s9-c2 { padding: 0 6.5vw; }
  .s9-c2-img { margin: 0 0 3.125em 0; }
  .s9-c3 { padding: 50px 6.5vw; }
  .s9-c3-img { margin: 0 0 3.125em 0; }

  /* Section 10: background photo */
  .s10-c1 { padding: 50px 3.7257vw 0 39.0625vw; }
  .s10-c1-img { width: 167px; }
  .s10-c2 { padding: 50px 6.5vw; }
  .s10-c3 { padding: 0 6.5vw 50px 39.0625vw; }
}


@media (max-width: 749px) {
  /* Section 1: background video */
  .s1 { min-height: 257.06px; }
  .s1-c1 { padding: 3.2723vh 6.667vw; }

  /* Section 2: A New Era Of Luxury Living */
  .s2 { min-height: 710.48px; padding: 15px 39.6px; }
  .s2-c1 { padding: 25px 0 0 0; }
  .s2-c1-h3 { font-size: 2.5rem; }
  .s2-c1-p { font-size: 1.0625rem; }

  /* Section 3: Residences Start At $3 Million. */
  .s3-c1 { padding: 50px 24px 24px 24px; }
  .s3-c1-h4-2 { font-size: 1.0625rem; }

  /* Section 4: spacer */
  .s4 { min-height: 39.99px; }
  .s4-c1 { padding: 25px 6.667vw; }

  /* Section 5: spacer */
  .s5 { min-height: 584.17px; padding: 15px; }
  .s5-c1 { padding: 25px 6.667vw 0 6.667vw; }
  .s5-c2 { padding: 25px 6.667vw; }

  /* Section 6: spacer */
  .s6-c1 { padding: 0 6.667vw 25px 6.667vw; }

  /* Section 7: Let's Start Planning The Other 364 Days */
  .s7-c1 { padding: 25px 6.667vw; }
  .s7-c1-h1 { font-size: 1.875rem; }

  /* Section 8: Exploring Nature Days */
  .s8-c1 { padding: 25px 6.667vw; }
  .s8-c1-img { margin: 0 0 1.5em 0; }
  .s8-c1-h4 { font-size: 1.0625rem; }
  .s8-c2 { padding: 0 6.667vw 25px 6.667vw; }
  .s8-c2-img { margin: 0 0 1.5em 0; }
  .s8-c2-h4 { font-size: 1.0625rem; }
  .s8-c3 { padding: 0 6.667vw; }
  .s8-c3-img { margin: 0 0 24px 0; }
  .s8-c3-h4 { font-size: 1.0625rem; }

  /* Section 9: Sports Days */
  .s9-c1 { padding: 25px 6.667vw; }
  .s9-c1-img { margin: 0 0 1.5em 0; }
  .s9-c1-h4 { font-size: 1.0625rem; }
  .s9-c2 { padding: 0 6.667vw 25px 6.667vw; }
  .s9-c2-img { margin: 0 0 1.5em 0; }
  .s9-c2-h4 { font-size: 1.0625rem; }
  .s9-c3 { padding: 0 6.667vw 25px 6.667vw; }
  .s9-c3-img { margin: 0 0 24px 0; }
  .s9-c3-h4 { font-size: 1.0625rem; }

  /* Section 10: background photo */
  .s10-c1 { padding: 25px 24px 0 26.7198vw; }
  .s10-c2 { padding: 25px 24px; }
  .s10-c3 { padding: 0 24px 25px 26.6667vw; }
}