/*Fonts Used*/
@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

:root {
  --priColor: #f3bc40;
  --secColor: #000000;
  --headingFont: "Barlow Semi Condensed", sans-serif;
  --bodyFont: "Montserrat", sans-serif;
  --bodyColor: #000000;
  --bodyFontSize: 16px;
  --bodyLineHeight: 24px;
}

*, *:before, *:after { box-sizing: border-box; -moz-box-sizing: border-box; image-rendering: -webkit-optimize-contrast;}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline; -webkit-text-size-adjust: 100%;}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
button, html input[type=button], input[type=reset], input[type=submit] { -webkit-appearance: button; cursor: pointer; }
input:not([type='radio']):not([type='checkbox']), textarea, select{-webkit-appearance: none;}
form, label {-webkit-text-size-adjust: 100%;}
mark {background-color: transparent;color:inherit;}
/* end reset */

/* preset */
html, body{overflow-x: hidden; font-size: 62.5%;}
body{font-family: var(--bodyFont); font-size: var(--bodyFontSize); line-height: var(--bodyLineHeight);color: var(--bodyColor);position:relative; max-width: 1920px; margin: auto;}
body h1, body h2, body h3, body h4, body h5{font-family: var(--headingFont); line-height: 1.2;}
body h2{font-size: 44px;}
body h3{font-size: 38px;}
body h4{font-size: 28px;}
body h5{font-size: 24px;}
body p{margin-bottom: 12px;}
a{ text-decoration:none;}
img{max-width: 100%; vertical-align: top; image-rendering: -webkit-optimize-contrast;}
textarea { resize:vertical; }
iframe{ border: none; width: 100%;}
ul, h1, h2, h3, h4{ margin:0; padding:0; list-style:none; }
strong , b{ font-weight: bold;}
em, i{font-style: italic;}
input[type="submit"]{cursor: pointer;}
a[href^="tel:"]{color: inherit!important; text-decoration: none;}
a[href^="tel:"]:hover { text-decoration: underline; }
.section{position: relative; padding: 50px 16px;}
.wrapper-l{width:100%; max-width:1408px; margin:0 auto; position:relative; padding: 16px;}
.wrapper-s{width:100%; max-width:1140px; margin:0 auto; position:relative; padding: 8px 16px;}
.heading{font-weight: 600;}

.fade-box { opacity: 0.4; transition: opacity 1s ease; }
.fade-box.visible { opacity: 1; }



/* Hero Section */
.hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #000;
  position: relative;
  min-height: 100vh;
}
.hero--content {
  width: 50%;
  text-align: center;
  padding: clamp(1rem, -0.9846rem + 5.5128vw, 9.6rem);
}
.hero--content h5 {
  color: #fff;
  margin: 0 0 3rem;
}
.hero--content h5 span {
  display: block;
  color: var(--priColor);
}
.hero--content p {
  color: #fff;
}
.hero--video {
  width: 50%;
  overflow: hidden;
  position: absolute;
  right: 0;
  height: 100%;
}
.hero--video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero--video::before {
  content: '';
  width: 200px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: #000;
  clip-path: polygon(0 0, 0 100%, 100% 0);
  pointer-events: none;
}

/* About Section */
.about {
  background: #000;
}
.about--content-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}
.about--content {
  width: 30%;
}
.about--content h3 {
  margin: 0 0 1rem;
  color: var(--priColor);
}
.about--video {
  overflow: hidden;
  position: relative;
  width: 65%;
  border-radius: 2rem;
}
.about--video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Approach Section */
.approach {
  background: var(--priColor);
}
.approach--boxes {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: stretch;
}
.approach--box {
  text-align: center;
  padding: 5px;
}
.approach-container h2 {
  text-align: center;
  margin-bottom: clamp(3rem, 2.5385rem + 1.2821vw, 5rem);
}
.approach--box i {
  margin: 0 auto 1rem;
  font-size: 72px;
  height: 75px;
  line-height: 1;
}
.approach--box h4 {
  margin: 0 0 1.5rem;
}

/* Services Section */

.services {
  background: #000;
}
.services-container {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.services--content {
  color: #fff;
}
.services--content h3 {
  color: var(--priColor);
  margin: 0 0 1rem;
}
.services--content {
  width: 48%;
}
.services--content ul li {
  margin: 0 0 12px;
}
.services--images {
  width: 48%;
  display: flex;
  flex-wrap: wrap;
}
.services--images figure {
  width: 49%;
  max-width: 328px;
  height: 328px;
  position: relative;
}
.services--images figure img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 8px;
}
.services--images {
  justify-content: space-between;
  gap: 1rem;
}

/* Case Studies Section */
.case-studies {
  background: var(--priColor);
}
.case-studies--container h2 {
  text-align: center;
  margin-bottom: 60px;
}
.timeline {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}
.timeline-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin-bottom: 42px;
}
.timeline-item.left .content {
  order: 1;
}
.timeline-item.left .marker {
  order: 2;
}
.timeline-item.right .content {
  order: 2;
  margin: 0 0 0 auto;
}
.timeline-item.right .marker {
  order: 1;
}
.timeline-item .content {
  width: 45%;
  opacity: 0.4;
  transition: opacity 0.3s ease;
}
.timeline-item .content h4{
  margin: 0 0 1.5rem;
}
.marker {
  width: 60px;
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  top: 0;
  height: 109%;
}
.dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #7c3aed;
  opacity: 0.4;
  transition: opacity 0.3s ease;
}
.line-svg {
  height: calc(100% - 30px);
  width: 4px;
  overflow: visible;
}

path.full {
  stroke: #C38785;
  stroke-width: 4px;
  fill: none;
}
path.progress {
  stroke: #7c3aed;
  stroke-width: 4px;
  fill: none;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
}
.timeline figure {
  position: relative;
  overflow: hidden;
  max-width: 496px;
  width: 100%;
  height: 279px;
  border-radius: 8px;
}
.timeline figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Partners Section */
.partner {
  background: #000;
}
.partner--container h2 {
  color: #fff;
  text-align: center;
  margin: 0 0 3rem;
}
.partner-boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  row-gap: 3rem;
}
.partner-box {
  background: var(--priColor);
  width: 48.5%;
  text-align: center;
  padding: 16px;
  border: 1px solid #5601f9;
}
.partner-box h4 {
  margin: 0 0 1rem;
}
.partner-box i {
  font-size: 72px;
  height: 75px;
  line-height: 1;
  margin: 1rem auto 1rem;
  display: block;
}


/* Agriculture Section */
.section--grid-container{
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 100vh;
  position: relative;
}
.agriculture {
  background: var(--priColor);
}
.agriculture--content h3 {
  margin: 0 0 1rem;
}
.agriculture--content ul li {
  margin: 0 0 12px;
}
.grid--content{
  width: 60%;
  padding: clamp(1rem, -0.9846rem + 5.5128vw, 9.6rem);
}
.grid-images{
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100%;
}
.grid-images--container {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(2, 1fr);
  width: 39%;
  height: 100%;
  position: absolute;
  right: 0;
  padding: 24px;
}
.grid-images figure{
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}
.grid-images figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Yard Section */
.yard {
  background: var(--secColor);
}
.yard--content {
  color: #fff;
}
.yard--content h3 {
  margin: 0 0 1rem;
  color: var(--priColor);
}
.yard--content ul li {
  margin: 0 0 12px;
}


/* Plastic Recycling Section */
.plastic-recycling {
  background: var(--priColor);
}
.plastic-recycling--content h3 {
  margin: 0 0 1rem;
}
.plastic-recycling--content ul li {
  margin: 0 0 12px;
}


/* Town Centre Townhouses Section */
.townhouses {
  background: var(--secColor);
}
.townhouses--content {
  color: #fff;
}
.townhouses--content h3 {
  margin: 0 0 1rem;
  color: var(--priColor);
}
.townhouses--content ul li {
  margin: 0 0 12px;
}


/* Grain Store Section */
.grain {
  background: var(--priColor);
}
.grain--content h3 {
  margin: 0 0 1rem;
}
.grain--content ul li {
  margin: 0 0 12px;
}


/* Town Parish Council Section */
.townParish {
  background: var(--secColor);
}
.townParish--content {
  color: #fff;
}
.townParish--content h3 {
  margin: 0 0 1rem;
  color: var(--priColor);
}
.townParish--content ul li {
  margin: 0 0 12px;
}


/* GeoCell Retaining Wall Section */
.geocell {
  background: var(--priColor);
}
.geocell--content h3 {
  margin: 0 0 1rem;
}
.geocell--content ul li {
  margin: 0 0 12px;
}


/* Springfields Ph1 & Ph2 Section */
.springfields {
  background: var(--secColor);
}
.springfields--content {
  color: #fff;
}
.springfields--content h3 {
  margin: 0 0 1rem;
  color: var(--priColor);
}
.springfields--content ul li {
  margin: 0 0 12px;
}



/* Ashfields Section */
.ashfields {
  background: var(--priColor);
}
.ashfields--content h3 {
  margin: 0 0 1rem;
}
.ashfields--content ul li {
  margin: 0 0 12px;
}


/* Establishing ourselves in the market Section */
.establishing {
  background: #000;
  min-height: 90vh;
  display: flex;
  align-items: center;
}
.establishing--container h2 {
  color: var(--priColor);
  text-align: center;
  margin-bottom: clamp(3rem, 2.5385rem + 1.2821vw, 5rem);
}
.establishing--boxes {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}
.establishing-box {
  width: 32%;
  background: var(--priColor);
  text-align: center;
  border: 1px solid #bb99fd;
  border-radius: 16px;
  padding: 16px;
  min-height: 182px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.establishing-box h3 {
  margin: 0 0 1rem;
}


/* Team Section */
.team {
  background: var(--priColor);
}
.team--container h2 {
  text-align: center;
  margin-bottom: clamp(3rem, 2.5385rem + 1.2821vw, 5rem);
}
.team--boxes {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  color: #fff;
  text-align: center;
  padding: 16px;
}
.team-box {
  width: 32%;
  padding: 16px;
  background: #000;
  border-radius: 16px;
}
.team-box h4 {
  color: var(--priColor);
  margin: 0 0 1rem;
}
.team-box figure {
  overflow: hidden;
  border-radius: 8px;
  position: relative;
  padding-top: 56.25%;
  margin-bottom: 2.5rem;
}
.team-box figure img {
  object-fit: cover;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}


/* Footer */
.footer {
  background: #000;
  color: var(--priColor);
  text-align: center;
}
.btn {
  width: 269px;
  height: 46px;
  display: block;
  margin: 1rem auto 1rem;
  background: #fff;
  line-height: 46px;
  font-weight: bold;
  color: #000;
  margin: 6rem auto 6rem;
  transition: .5s ease;
}
.btn:hover {
  background: var(--priColor);
  color: #fff;
}
.footer-contents h2 {
  margin: 0 0 3rem;
}
.footer-contents p {
  font-size: 28px;
  margin: 0 0 2rem;
  font-family: var(--headingFont);
}
.footer-contents p a {
  color: inherit;
}


/* Progress Bar */
.progress-bar-wrapper {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 96vw;
  background: white;
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: height 0.3s ease;
  z-index: 9999;
}
.progress-bar-wrapper:hover {
  height: auto;
}
.progress-bar {
  display: flex;
  width: 100%;
  gap: 8px;
  height: 6px;
  align-items: center;
  transition: height 0.3s ease;
}
.progress-bar-wrapper:hover .progress-bar {
  height: 12px;
}
.progress-segment {
  flex: 1;
  background-color: #eee;
  border-radius: 3px;
  position: relative;
  cursor: pointer;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 4px;
}
.progress-segment:hover {
  height: 8px;
  background: #88819f;
}
.progress-segment.active {
  background-color: #5601f9;
}
.segment-label--wrapper {
  position: absolute;
  bottom: 30%;
  padding-bottom: 10px;
  left: 50%;
  transform: translateX(-50%) translateY(-5px);
  display: none;
  pointer-events: none;
  z-index: 1000;
}
.progress-segment:hover .segment-label--wrapper {
  display: block;
  pointer-events: auto;

}
.label-preview {
  background: #16074a;
  padding: 12px 16px;
  border-radius: 10px;
  color: white;
  min-width: 180px;
  max-width: 200px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  font-family: sans-serif;
  position: relative;
  text-align: left;
  pointer-events: auto;
}
.label-preview::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #16074a;
}
.slide-number {
  font-size: 11px;
  color: #9b8bc4;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
}
.slide-title {
  font-weight: bold;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-controls {
  display: none;
  align-items: center;
  font-size: 14px;
  background: #f5f5ff;
  padding: 4px 10px;
  border-radius: 8px;
  gap: 8px;
  margin-top: 10px;
}
.progress-bar-wrapper:hover .nav-controls {
  display: flex;
}
.nav-arrow {
  background: white;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 2px 6px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
}
.nav-arrow:hover {
  background: #eee;
}





@media only screen and (max-width : 1024px) {
  .wrapper-s{padding: 0;}
  .wrapper-l{padding: 0;}
  .hero--video { width: 60%; }
  .hero--content { width: 40%; }
  .services--images figure { width: 48.5%; }
  .grid-images--container { gap: 8px; }
  .grid-images { gap: 8px; }
}
@media only screen and (max-width : 992px) {}
@media only screen and (max-width : 768px) {
  /* hero */
  .hero { flex-direction: column; }
  .hero--video { position: relative; width: 100%; }
  .hero--content { width: 100%; min-height: 40vh; display: flex; flex-direction: column; justify-content: center; }
  .hero--video::before { display: none; }

  /* about */
  .about--content-container { flex-direction: column; gap: 2rem; }
  .about--content { width: 100%; text-align: center; }
  .about--video { width: 100%; }

  /* approach */
  .approach--box { width: 100%; }
  .approach--boxes { flex-wrap: wrap; }

  /* services */
  .services-container { flex-direction: column; }
  .services--content { width: 100%; }
  .services--images { width: 100%; }
  .services--images figure { width: 49%; max-width: 100%; }

  /* case Studies */
  .timeline-item .content { width: 100%; }
  .marker { width: 20px; right: unset; }
  .timeline-item { padding-left: 40px; }
  .timeline figure { max-width: 100%; }

  /* partners */
  .partner-box { width: 100%; }

  /* grid sections */
  .grid--content { width: 100%; padding: 0; }
  .grid-images--container { position: relative; }
  .section--grid-container { flex-direction: column; }
  .grid-images--container { width: 100%; padding: 24px 0; }

  /* establishing */
  .establishing-box { width: 100%; }
  .establishing--boxes { flex-wrap: wrap; gap: 2rem; }

  /* team */
  .team-box { width: 100%; }
  .team--boxes { flex-wrap: wrap; gap: 2rem; }

  .progress-bar{
    gap: 3px;
  }



}
@media only screen and (max-width : 480px) {
  /* hero */
  .hero { min-height: auto; }

  /* services */
  .services--images figure { width: 100%; }

  /* case studies */
  .marker { left: -8px; }
  .timeline-item { padding-left: 20px; }
}