.section{height:450vh;}

#location{padding:0px 0 0;position: relative;}
#location h6{  position: absolute;  font-size: 10vw;   font-weight: 100;   letter-spacing: 62px; text-transform: uppercase;  opacity: 0.05;  top: 13vw;    text-align: center;   white-space: nowrap;}
#location  .sticky{ position:sticky; top:0; height:100vh; display:flex; align-items:center; justify-content:center;background: #f3f3f3 url(../images/loc-bg.jpg) no-repeat;  background-position: 0 bottom; background-size: 100%;overflow: hidden;}
.locationTop {position: absolute; top: 5vw;width: 100%;display: flex;justify-content: flex-end;align-items: flex-end;}
.locationTop .title{ position:relative; top:-34px; left:0%; width: 25%; }
.locationTop .title:before {  content: '';  position: absolute;  width: 99%; height: 2px; bottom: -4px;  background: #000; }
.locationTop .title h2 small{    display: block;  font-size: 1.5vw;   font-weight: 500;    letter-spacing: -1px;}
.locationTop .title h2{font-size:3vw;font-weight:300;color:#57524c; line-height: 1;}
.locationTop .title h2 span{color:#d0c396;}
.km-wrapper{position: relative;top: 0;right: 0;/* width: 1100px;*/overflow: hidden;width: 60%; }
 .km-track{ display:flex; /*align-items:center;*/ gap:5px; transition:.5s ease; }
 .km{ width:8vw; text-align:center; opacity:1;  transition:.4s; }
.km.active{ opacity:1; }
.km h2 {    font-size: 5.5vw;font-weight: 100;  line-height: 1;margin: 0 0 16px;gap: 0;display: flex;flex-direction: column;}
 .km h2 small{ font-size: 1.1vw;font-weight: 500;line-height: 1;text-transform: uppercase;color: #000;letter-spacing: 0;}
 .km span{  text-transform: uppercase;  font-weight: 600;    font-size: 16px;}

/* ✅ SVG FIX */
.svgbox{display: flex;align-items: center;height: 150px;overflow: hidden;}
.road-svg{ width:260px; height:auto; overflow:visible;  margin: -58px 0 0;     transform: rotate(12deg); }
.road-svg path{ stroke:#2e7d6b; stroke-width:15; /* 🔥 KEY */ fill:none; stroke-linecap:round; stroke-linejoin:round;}

/* LOCATIONS */
.locations{ position:absolute; top:17vw; transform:translateY(-0%); display:flex;  padding: 0 2vw;  margin: 0 auto; gap: 15px;width: 60%;}

#leftList,#rightList{ display:flex; flex-direction:column; gap:20px; transition:.3s;width: 25%;}
#leftList{align-items: flex-end;}
#rightList{align-items: flex-start;}

.location{ opacity:0;transition:.5s; }
.location.active{ opacity:1;  }

.center {text-align: center;position: relative;top: 0vw;margin-inline: auto; }
.center .pdLocBtnItem{position:absolute;bottom: 0; }
.center .pdLocBtnItem.LeftBtnItem{left: 50%;transform: translateX(-120%); }
.center .pdLocBtnItem.RightBtnItem{right: 50%;transform: translateX(130%); }
.center .pdLocIcon{width: 60%;}
.center .links{ margin-top: 0px;display: flex;align-items: end;justify-content: center;position: relative;}
.center h2{font-size:70px;color:#c61f52;}
.links a{color:#000; text-decoration:none;border-bottom: solid 2px #a60000;font-weight: 500;}
#centerLocation{display:none;}
.next{ height:100vh; background:#111; color:#fff; display:flex; align-items:center;justify-content:center; font-size:40px; }

#leftList .location:nth-child(1){position:relative;left:0%;transform: translateX(30%);}
#leftList .location:nth-child(2){position:relative;left:0%;}
#leftList .location:nth-child(3){position:relative;left:0%;transform: translateX(-30%);}

#rightList .location:nth-child(1){position:relative;left:0%;transform: translateX(-30%);}
#rightList .location:nth-child(2){position:relative;left:0%;}
#rightList .location:nth-child(3){position:relative;left:0%;transform: translateX(30%);}


.kmOut{  display: flex;justify-content: center;  align-items: center;gap: 85px; position:relative;height: auto;}
.kmOut:before{content:''; position:absolute; width:100%; height:2px; bottom: 30px;background:#000;}
.kmOut:nth-child(4n+1) h2{  color: #a60000;}
.kmOut:nth-child(4n+2) h2 { color:#f7a623; }
.kmOut:nth-child(4n+3) h2{ color:#5ca038; }
.kmOut:nth-child(4n+4) h2 {color:#3e60ac; }

.kmOut:nth-child(4n+1) .km.active span{  color: #a60000;}
.kmOut:nth-child(4n+2) .km.active span { color:#f7a623; }
.kmOut:nth-child(4n+3) .km.active span{ color:#5ca038; }
.kmOut:nth-child(4n+4) .km.active span {color:#3e60ac; }

.kmOut:nth-child(4n+1):before { background:#d02158; }
.kmOut:nth-child(4n+2):before { background:#f7a623; }
.kmOut:nth-child(4n+3):before { background:#5ca038; }
.kmOut:nth-child(4n+4):before { background:#3e60ac; }
.location{background:url(../images/location-icon-black.svg) no-repeat center left;background-size: 22px; padding: 7px 0 7px 40px;font-size: 1vw;line-height: 1.3;font-weight:500; text-transform: uppercase;}
.mobile-accordion{  display:none; padding:20px;  background:#fff; }
.m-acc-item{border-bottom:1px solid #ddd; }
.m-acc-header{  display:flex;  justify-content:space-between;   align-items:center;  padding:15px;  font-size:16px; font-weight:600;  cursor:pointer; }
.m-acc-header span{  font-size:22px;  transition:.3s; }
.m-acc-item.active .m-acc-header span{   transform:rotate(45deg); }
.m-acc-content{  max-height:0;  overflow:hidden;  transition:max-height .4s ease;  padding:0 15px; }
.m-acc-content img{  width:100%;  margin:10px 0;  border-radius:10px; }
.m-list{ display:grid;   gap:8px;  padding-bottom:15px; }
.m-list div{  background:#f5f5f5;  padding:8px 10px;  border-radius:6px;  font-size:14px; }


@media(max-width:1920px){
  .kmOut {  gap: 26px; }
}

@media(max-width:1700px){
  .km span{font-size: 14px;}
}
 

@media(max-width:1620px){
  .locationTop .title h2 {font-size: 2.5vw;}
  .km h2 {font-size: 4.4vw;margin: 0 0 3px;}
  .kmOut:before{bottom: 41px;}
  .km h2 small {font-size: 15px;}
  .locationTop .title h2 small{font-size: 1.1vw;}
  .locationTop .title{top: -45px;}
  .center .pdLocIcon {width: 45%;}
  .locations{top: 16vw;}

}

@media(max-width:1320px){  
  .kmOut:before {bottom: 49px;}
  .km {width: 10vw;}
  .locationTop .title {top: -53px;}
}

@media(max-width:1220px){  
  .locations {top: 20vw;}
}


@media(max-width:1100px){
  #location .sticky{background: #f3f3f3 url(../images/loc-bg.jpg) no-repeat;background-position: center bottom;background-size: 170%;}
  .location{width: 100%;font-size: 17px;}
  #leftList .location:nth-child(1){position:relative;left:0%;transform: translateX(0%);}
  #leftList .location:nth-child(2){position:relative;left:0%;}
  #leftList .location:nth-child(3){position:relative;left:0%;transform: translateX(0%);}
  #rightList .location:nth-child(1){position:relative;left:0%;transform: translateX(0%);}
  #rightList .location:nth-child(2){position:relative;left:0%;}
  #rightList .location:nth-child(3){position:relative;left:0%;transform: translateX(0%);}
  .locations {top: 31vw;width: 85%;}
  .km h2 {font-size: 56px;}  
}

@media(min-width:821px){
  .Moblocation{display:none;}
}

/* MOBILE ONLY */
@media(max-width:820px){
  .Desktoplocation,.sticky,.locations{display:none;}  
  .Moblocation{display:block;background: #f3f3f3 url(../images/loc-bg.jpg) no-repeat;background-position: center bottom;background-size: 170%;padding-top: 40px; padding-inline: 20px; padding-bottom:145px; height: auto;}
  .mobile-accordion{display:block;}
	.m-list div{background: url(../images/location-icon-black.svg) no-repeat left center;background-size: 28px;padding-block:12px;padding-right: 0px;padding-left: 36px;font-weight: 500;text-transform: uppercase;border-bottom: 1px solid #dfdfdf;}
	.m-list div:last-child{border-bottom: 0px solid #dfdfdf;}
  .Moblocation .secomtitle h2 small{display: block;}



}

@media(max-width:640px){
  
  .m-acc-header{padding: 12px 5px;}
}