/* ============================================================
   Jeffran Services LLC — static recreation of jeffranservices.com
   Original: fixed-width SiteBuilder layout (design width 1024px,
   elements positioned relative to page center).
   ============================================================ */

@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans Semi Bold";
  src: url("../fonts/OpenSans-SemiBold.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: content-box; }

html, body {
  width: 100%;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #000;
  background: #fff;
  min-width: 1024px;
  overflow-x: hidden;
}

img { display: block; border: 0; }

/* Sections span full width; children are absolutely positioned
   relative to a zero-width center anchor (matches original layout). */
.sec { position: relative; width: 100%; overflow: hidden; }
.anchor {
  position: absolute;
  left: 50%;
  top: 0;
  width: 0;
  height: 100%;
}
.anchor > * { position: absolute; }

/* Blue triangle divider at top-center of sections 2-4 */
.triangle {
  position: absolute;
  left: 50%;
  top: -2px;
  margin-left: -31px;
  width: 0;
  height: 0;
  border-left: 31px solid transparent;
  border-right: 31px solid transparent;
  border-top: 18px solid #316cb3;
  z-index: 5;
}

/* ------------------- HERO ------------------- */
.sec-hero {
  height: 838px;
  background: url("../images/hero-background.png") no-repeat center center;
  /* original scales the image proportionally to fill the section height
     (stretchedToFill), center-cropped horizontally */
  background-size: auto 100%;
}
/* dark blue overlay over the hero photo (as in the original) */
.sec-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(26, 58, 96, 0.51);
}
.hero-photo {
  left: -147px;
  top: 6px;
  width: 281px;
  height: 281px;
  border-radius: 50%;
  border: 8px solid #fff;
  object-fit: cover;
  box-sizing: border-box;
}
.hero-owner {
  left: 149px;
  top: 140px;
  width: 273px;
  color: #fff;
  font-family: "Open Sans Semi Bold", "Open Sans", sans-serif;
  font-size: 20px;
  line-height: 1.4;
}
.hero-title {
  left: -265px;
  top: 276px;
  width: 549px;
  color: #fff;
  font-family: "Open Sans Semi Bold", "Open Sans", sans-serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
}
.hero-services {
  left: -233px;
  top: 336px;
  width: 706px;
  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-size: 30px;
  line-height: 1.4;
}

/* ------------------- SHARED TEXT ------------------- */
.heading {
  color: #1a3a60;
  font-family: "Open Sans", sans-serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
}
.body-text {
  font-family: "Open Sans", sans-serif;
  font-size: 22px;
  color: #000;
  line-height: 1.4;
}
.gap-10 { font-size: 10px; line-height: 1.4; }
.exp-body .gap-10 { font-size: 13px; }

/* ------------------- MY QUALIFICATIONS ------------------- */
.sec-qualifications { height: 769px; background: #fff; }
.qual-img { left: -520px; top: 45px; width: 366px; height: 448px; object-fit: cover; }
.heading-qual { left: -236px; top: 16px; width: 480px; }
.qual-body { left: -170px; top: 86px; width: 650px; }
.qual-body .intro-26 {
  font-family: "Open Sans Semi Bold", "Open Sans", sans-serif;
  font-size: 26px;
}

/* ------------------- MY PROJECT EXPERIENCE ------------------- */
.sec-experience { height: 1089px; background: #fff; }
.heading-exp { left: -464px; top: 16px; width: 609px; }
.exp-img-crop {
  left: -487px;
  top: 84px;
  width: 861px;
  height: 108px;
  overflow: hidden;
}
.exp-img-crop img { width: 861px; margin-top: -230px; }
.exp-body { left: -558px; top: 199px; width: 1034px; }

/* ------------------- WHAT CAN I DO FOR YOU ------------------- */
.sec-services { height: 1021px; background: #fff; }
.services-img { left: 31px; top: 81px; width: 723px; height: 360px; object-fit: cover; }
.heading-services { left: -561px; top: 23px; width: 687px; }
.services-body {
  left: -550px;
  top: 92px;
  width: 1252px;
  font-family: "Open Sans Semi Bold", "Open Sans", sans-serif;
  font-size: 26px;
}
/* vertical rhythm matched to the original (long line of item 3 must
   clear the bottom of the photo) */
.svc-item-1 { margin-top: 25px; }
.svc-item-2 { margin-top: 14px; }
.svc-item-3 { margin-top: 23px; }
.svc-item-4 { margin-top: 23px; }
.svc-item-5 { margin-top: 26px; }
.svc-item-6 { margin-top: 35px; }
.services-body .schedule-line { margin-top: 22px; }
.schedule-line {
  text-align: center;
  color: #d61515;
}

/* ------------------- CONTACT ------------------- */
.sec-contact {
  height: 1336px;
  background: url("../images/contact-pattern.png") repeat;
}
.contact-heading {
  left: -200px;
  top: 24px;
  width: 468px;
  color: #1a3a60;
  font-family: "Open Sans", sans-serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  white-space: nowrap;
}
.contact-note {
  top: 178px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  color: #000;
}
.contact-note-left { left: -479px; width: 400px; }
.contact-note-right { left: 136px; width: 341px; }

.contact-form {
  left: -480px;
  top: 221px;
  width: 578px;
  background: rgba(249, 190, 190, 0.29);
  box-sizing: border-box;
  padding: 22px 18px 0;
}
.form-field { margin-bottom: 17px; }
.form-field label {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  letter-spacing: normal;
  color: #000;
  line-height: 26px;
  margin-bottom: 4px;
}
.form-field input,
.form-field textarea {
  width: 100%;
  box-sizing: border-box;
  height: 35px;
  border: 1px solid #e8a0a0;
  background: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #666;
  padding: 0 8px;
  border-radius: 0;
  outline: none;
}
.form-field textarea {
  height: 197px;
  padding: 8px;
  resize: vertical;
}
.form-field input:focus,
.form-field textarea:focus { border-color: #f06363; }
.form-actions { text-align: right; margin-top: 4px; }
.submit-btn {
  width: 107px;
  height: 40px;
  background: #f06363;
  color: #fff;
  border: 0;
  border-radius: 0;
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  cursor: pointer;
}
.submit-btn:hover { background: #d61515; }
.form-status { padding: 10px 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #1a3a60; }
.form-status:empty { display: none; }

.contact-address {
  left: 137px;
  top: 221px;
  width: 342px;
  font-family: "Open Sans", sans-serif;
  font-size: 20px;
  line-height: 1.4;
  color: #000;
}

.map-wrap {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 389px;
}
.map-wrap iframe { width: 100%; height: 389px; display: block; }

/* ------------------- FOOTER ------------------- */
.footer {
  position: relative;
  width: 100%;
  height: 79px;
  background: #316cb3;
  overflow: hidden;
}
.footer .anchor > * { position: absolute; }
.footer, .footer a { color: #fff; }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer-copy {
  left: -469px;
  top: 31px;
  width: 213px;
  font-size: 14px;
}
.footer-address {
  left: -215px;
  top: 23px;
  width: 180px;
  font-size: 14px;
  line-height: 1.22;
}
.footer-contact {
  left: 49px;
  top: 23px;
  width: 260px;
  font-size: 14px;
  line-height: 1.22;
}
.footer-social {
  left: 418px;
  top: 26px;
  width: 62px;
  height: 29px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.social-icon {
  width: 27px;
  height: 29px;
  background: #fff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}