/* 
  font-family: "Roboto Slab", serif;
  font-weight: <100 to 900>;
} */

/* 
    font-family: "Quicksand", sans-serif;
    font-weight: <300 to 700>;
*/
*{
    box-sizing: border-box;
    margin: 0;
}
:root {
    --serif: "Roboto Slab", serif;
    --sans: "Quicksand", sans-serif;
    --clr-dark: #073D54;
    --clr-dark-lighter: #23607B;;
    --clr-accent: #00A8A5;
    --clr-accent-dark: #3B8F8C;
    --clr-light: #CADDDF;
    --font-reg: 14px;
    --font-lg: 18px;
    --font-xlg: 22px;
    --paddingX: 130px;
    --maxwidth: 900px
}

body{
    min-height: 100vh;
    font-family: var(--sans);
    line-height: 1.5;
    padding: 0;
}

.intro__container,
.markets__container {
    padding: 50px var(--paddingX) 80px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

h2 {
    margin-bottom: 8px;
    font-family: var(--serif);
    color: var(--clr-dark);
    font-size: clamp(24px, 4vw, 32px);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.01em;
}
h3 {
    font-family: var(--sans);
    color: var(--clr-dark);
    /* color: var(--clr-dark-lighter); */
    font-size: 19px;
    line-height: 1.3;
    max-width: var(--maxwidth);
    font-weight: 600;
}
p {
    font-family: var(--sans);
    font-size: var(--font-reg);
    color: var(--clr-dark-lighter);
}
.cta-btn {
  margin: 40px auto 8px;
  background-color: var(--clr-accent);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font: 600 16px/1 "Quicksand", sans-serif;
  letter-spacing: 0.03em;
  padding: 14px 22px;
  cursor: pointer;
  /* box-shadow: 0 10px 26px rgba(0,168,165,.25); */
  filter: brightness(1);
  transition: transform .15s ease, filter .15s ease;
}
.cta-btn:hover{
  filter: brightness(1.15);
  /* background-color: var(--clr-accent-dark); */
  transform: translateY(-1px);
  /* box-shadow: 0 12px 30px rgba(0,168,165,.32); */
}
.cta-small-text {
    font-size: 14px;
    /* font-size: clamp(24px, 4vw, 28px); */
    font-weight: 500;
    color: white;
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-shadow: 0 0 10px black;
}
.nav__container{
    padding: 0 var(--paddingX);
}
.nav__container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100%;
    height: 70px;
    background-color: #073D54;
    border-bottom: 2px solid var(--clr-accent);
    top: 0px;
    box-shadow: 0 0 20px black;
    z-index: 100;
}
.nav__logo{
    width: 140px;
}
.nav__contact{
    display: flex;
    align-self: normal;
    align-items: center;
    column-gap: 20px;
}
.nav__contact button {
    padding: 0 30px;
    border: none;
    background-color: var(--clr-accent);
    color: white;
    min-height: 100%;
    line-height: 1;
    letter-spacing: 0.04em;
    font-size: 20px;
    cursor: pointer;
    filter: brightness(1);
    transition: filter .2s;
}
.nav__contact button span{
  font-size: 12px;
  letter-spacing: normal;
}
.nav__contact button:hover{
    /* background-color: var(--clr-accent-dark); */
    filter: brightness(1.15);
}
.nav__contact p {
    color: white;
    font-size: 16px;
    letter-spacing: 0.05em;
}

.hero__container{
  position: relative;                 /* new: to anchor video & overlay */
  padding: 80px var(--paddingX) 60px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 69px;
  background-color: #073D54;          /* fallback color */
  color: white;
  overflow: hidden;                    /* hide video overflow */
}

/* full-bleed background video */
.hero__video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;                   /* fills like background-size: cover */
  z-index: 0;
}

/* gradient scrim over the video for legibility */
.hero__container::after{
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(to bottom,
      rgba(8,26,43,.80) 0%,
      rgba(8,26,43,.60) 35%,
      rgba(8,26,43,.45) 60%,
      rgba(8,26,43,.10) 100%),
    radial-gradient(120% 80% at 0% 50%, rgba(7,61,84,.35), transparent 60%);
  mix-blend-mode: multiply;            /* optional: deepen darks */
}

/* place text above video + overlay */
.hero__content{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__content h1 {
  max-width: 1000px;
    font-family: var(--serif);
    color: white;
    font-size: clamp(40px, 4vw, 58px);
    /* font-size: 58px; */
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.03em;
    text-shadow: 0 0 15px black;
}
.hero__content h2 {
    font-family: var(--serif);
    color: white;
    font-size: clamp(20px, 4vw, 26px);
    /* font-size: 26px; */
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
}
.hero__text {
  max-width: 1000px;
    margin-top: 10px;
    font-size: 28px;
    font-size: clamp(20px, 4vw, 28px);
    font-weight: 400;
    color: white;
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-shadow: 0 0 10px black;
}

.intro__container {
    padding-bottom: 0;
}
.intro__container div {
  max-width: var(--maxwidth);
    padding-bottom: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* border-bottom: 1px solid var(--clr-accent); */
}

.steps__container{
  padding: 50px var(--paddingX) 80px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #F6F8F9;
}
.steps__container .cta-small-text{
  text-shadow: none;
  color: var(--clr-dark-lighter);
}
.steps__wrapper{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
  margin: 30px auto 40px;
}
.steps__cards{
  display: flex;
  flex-direction: column;
  text-align: left;
}
.steps__cards__image{
  margin-bottom: 14px;
  height: 100px;
  text-align: center;
}
.steps__cards__image img{
  height: 100%;
  width: auto;
}
.steps__cards h3 {
    font-family: var(--serif);
    color: var(--clr-dark);
    /* color: var(--clr-dark-lighter); */
    font-size: 19px;
    line-height: 1.3;
    font-weight: 600;
    margin-bottom: 3px;
}
.markets__container{
    text-align: center;
}
.markets__wrapper {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 40px;
    max-width: 100vw;
    margin-top: 30px; 
    text-align: left;
}
.markets-card__image {
    margin-bottom: 20px;
    overflow: hidden;
    border-radius: 4px;
    /* aspect-ratio: 4 / 3; */
    aspect-ratio: 16 / 9;
}
.markets-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform .45s ease;
    will-change: transform;
}
.markets-card__text h3{
    font-weight: 800;
    margin-bottom: 6px;
    line-height: 1.2;
}
.markets-card__text p {
    color: var(--clr-dark-lighter);
}

/* STARTS SERVICES */
.services__container {
    padding: 50px var(--paddingX);
    display: flex;
    flex-direction: column;
    background-color: var(--clr-dark);
}
.services__header{
  text-align: center;
}
.services__header h2 {
    color: white;
    margin: 0 var(--paddingX) 8px;
}
.services__header h3 {
    margin: 0 var(--paddingX) 30px;
    max-width: none;
    color: var(--clr-light);
    font-weight: 400;
    letter-spacing: 0.03em;
}
/* Grid */
.services__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 28px);
  /* max-width: 1200px; */
  margin: 0 auto;
}
/* Card */
.svc-card {
  background: #fff;
  color: #113A4E;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--clr-dark-lighter);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  /* display: flex;
  flex-direction: column; */
  display: grid;
  grid-template-columns: 40% 1fr;
}

/* Image */
.svc-card__media {
  position: relative;
  display: block;
  /* aspect-ratio: 4 / 3; */
  overflow: hidden;
  background: #0E2F3F;
  min-height: 200px;
}
.svc-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform .45s ease, filter .45s ease;
  filter: saturate(105%);
}
.svc-card:hover .svc-card__media img { transform: scale(1.06); }
.svc-card__media::after { /* subtle dark gradient for legibility */
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(8,26,43,.55), rgba(8,26,43,.0) 65%);
  pointer-events:none;
}

/* Content */
.svc-card__body {
  padding: 18px 18px 16px;
}
.svc-card__body h3 {
  font-family: "Roboto Slab", serif;
  color: #073D54;
  font-size: 20px;
  margin: 0 0 10px;
}
.svc-card__body ul {
  margin: 0 0 10px 0;
  padding: 0;
  list-style: none;
}
.svc-card__body li {
  position: relative;
  font: 400 15px/1.5 "Quicksand", sans-serif;
  padding-left: 18px;
  color: #113A4E;
  margin: 6px 0;
}
.svc-card__body li::before {
  content:"";
  position:absolute; left:0; top: .75em;
  width: 6px; 
  height: 6px; 
  border-radius: 50%;
  background: #00A8A5;
}

/* CTA */
.services__cta {
  text-align: center;
  margin-top: 28px;
}
/* 
.btn.btn--primary {
  background: #00A8A5;
  color: #fff;
  border: 0;
  border-radius: 999px;
  font: 600 16px/1 "Quicksand", sans-serif;
  padding: 14px 22px;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0,168,165,.25);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(0,168,165,.32); }
.btn.btn--primary:active { transform: translateY(0); } 
*/


/* END SERVICES */


/* STARTS AREA */
.area__container {
    display: grid;
    grid-template-columns: 1fr 500px;
    background-color: var(--clr-dark);
}
.area__text {
    padding: 80px 80px 80px var(--paddingX);
    color: var(--clr-light);
}
.area__text h2 {
    margin-bottom: 8px;
    letter-spacing: 0.04em;
    color: white;
}
.area__text h3 {
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--clr-light);
}
.area__text .text-heading {
    margin-top: 20px;
    font-size: var(--font-lg);
    font-weight: 600;
    color: white;
}
.area__text p {
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: var(--clr-light);
}

.area__image {
    height: auto;
    background-image: url(../images/house-decoration.jpg);
    background-size: cover;
    background-position: center;
}
/* ENDS AREA */

.footer__container{
    background-color: #081A2B;
    padding-left: var(--paddingX);
    height: 40px;
}


/* START MODAL */
/* ===== Fonts & brand tokens ===== */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600&family=Roboto+Slab:wght@500;600;700&display=swap');

:root{
  --white:#FFFFFF;
  --seaspray:#CADDDF;
  --emerald:#00A8A5;
  --ocean:#23607B;
  --harbor:#073D54;
  --navy:#081A2B;

  --panel:#103A4B;                 /* modal sheet bg (hero-like tone) */
  --field:#0B2E3B;                 /* input bg */
  --field-border:#1E566C;
  --field-focus:#3BC9C6;           /* bright emerald focus ring */
}

.no-scroll { overflow: hidden; }

/* ===== Base ===== */
.modal *{ box-sizing:border-box; }
.modal{
  position: fixed; inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  font-family: "Quicksand", sans-serif;
}

/* hidden by default—JS will remove [aria-hidden] to show */
.modal[aria-hidden="true"]{ display: none; }

/* Backdrop */
.modal__backdrop{
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 120% at 80% 10%, rgba(7,61,84,.65), rgba(8,26,43,.75)),
    rgba(8,26,43,.65);
  backdrop-filter: blur(2px);
}

/* Sheet */
.modal__sheet{
  position: relative;
  width: 100%;
  max-height: 100%;
  overflow: auto;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.06);
  padding: 100px clamp(60px, 24vw, 460px);
  color: var(--seaspray);
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}

/* Close (X) */
.modal__close{
  all: unset;
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px; cursor: pointer; border-radius: 50%;
  display: grid; place-items: center;
}
.modal__close span::before, .modal__close span::after{
  content:""; position:absolute; width:20px; height:2px; background: var(--seaspray);
  transform-origin:center;
}
.modal__close span::before{ transform: rotate(45deg); }
.modal__close span::after{  transform: rotate(-45deg); }
.modal__close:hover span::before, .modal__close:hover span::after{ background: var(--white); }

/* Header */
.modal__header h2{
  font-family:"Roboto Slab", serif;
  color: var(--white);
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.15;
  margin: 0 0 8px;
}
.modal__lede{
  margin: 0 0 22px;
  font-size: clamp(14px, 1.8vw, 16px);
  color: rgba(255,255,255,.9);
}

/* Form grid */
.modal__form{ display: grid; gap: 14px; }

.form-row{ display: grid; gap: 12px; }
.form-row--2{ grid-template-columns: 1fr 1fr; }
@media (max-width: 640px){ .form-row--2{ grid-template-columns: 1fr; } }

.form-field{ display: grid; gap: 6px; }
.form-label{
  font-size: 13px;
  color: var(--seaspray);
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea{
  width: 100%;
  background: var(--field);
  color: var(--white);
  border: 1px solid var(--field-border);
  border-radius: 6px;
  padding: 10px 12px;
  font: 400 15px/1.35 "Quicksand", sans-serif;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input::placeholder, textarea::placeholder{ color: rgba(255,255,255,.55); }

input:focus, textarea:focus{
  border-color: var(--field-focus);
  box-shadow: 0 0 0 3px rgba(59,201,198,.25);
}

/* Radios */
.form-fieldset{
  margin: 4px 0 2px;
  padding: 0;
  border: none;
}
.radio-group{ display: grid; gap: 6px; }
.radio{
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px;
  color: var(--seaspray);
}
.radio input[type="radio"]{
  accent-color: var(--emerald);
  width: 16px; height: 16px;
}
.radio--other{
  grid-template-columns: auto auto 1fr;
}
.radio__other{
  margin-left: 8px;
  min-width: 160px;
  background: var(--field);
  border: 1px dashed var(--field-border);
}

/* Actions */
/*Success message*/
.successmsg, .errormsg{
    text-align: center;
    color: #27c227;
    font-size: 17px;
    font-weight: 500;
    padding-right: 30px;
    padding-top: 6px;    
    display:none;
}
.form-actions{
  display: flex; gap: 12px; justify-content: flex-end;
  margin-top: 10px;
}
.btn{
  --btn-bg: var(--emerald);
  --btn-fg: #fff;
  appearance: none; border: none; cursor: pointer;
  border-radius: 8px; padding: 10px 16px;
  font: 600 15px/1 "Quicksand", sans-serif;
  transition: transform .04s ease, filter .15s ease, background .15s ease;
}
.btn--primary{ background: var(--emerald); color: var(--white); }
.btn--primary:hover{ filter: brightness(1.04); }
.btn--primary:active{ transform: translateY(1px); }

.btn--ghost{
  background: transparent;
  color: var(--seaspray);
  border: 1px solid rgba(255,255,255,.25);
}
.btn--ghost:hover{ border-color: rgba(255,255,255,.45); color: var(--white); }

/* Small screens – give sheet more breathing room */
@media (max-width: 480px){
  .modal__sheet {padding: 50px 50px 100px; }
}


/* ENDS MODAL */








/* RESPOSNIVE */
@media (max-width: 1024px){
    :root {
        --paddingX: 80px;

    }
  .markets__wrapper{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 20px;
  }
  .area__container {
    grid-template-columns: 1fr 400px;
    }
    .services__grid { 
      grid-template-columns: 1fr; gap: 20px;
    }
}

@media (max-width: 640px){
  :root {
    --paddingX: 30px;
  }
  .nav__container {
    flex-direction: column-reverse;
    padding: 0;
    height: auto;
    align-items: normal;
  }
  .nav__logo{
    width: 100vw;
    height: 54px;
    padding: 10px;
    text-align: center;
  }
  .nav__logo img{
    height: 100%;
  }
  .nav__contact button {
      width: 100vw;
      font-size: 16px;
      padding: 10px;
  }
  .nav__contact p {
      display: none;
  }
  .hero__text{
    margin-top: 30px;
  }
  .steps__wrapper {
    grid-template-columns: 1fr;
  }
  .markets__wrapper{
    grid-template-columns: 1fr;
    gap: 60px;
  }
  .services__header h2{
    text-align: left;
    margin: 0;
  }
  .svc-card { 
    grid-template-columns: 1fr; 
    border-radius: 6px;
  }
  .svc-card__media {
    min-height: 180px;
    height: 180px;
  }
  .services__header h3 {
    text-align: left;
    margin: 12px 0 40px;
  }
  .area__container {
    grid-template-columns: 1fr;
  }
  .area__text {
    padding: 50px var(--paddingX) 80px;
    color: var(--clr-light);
  }
  .area__image {
    order: -1;
    height: 300px;
  }
}