body {
    margin: 0 auto;
    font-size: 16px;
    padding: 0;
    font-family: 'Altform-Bold', Helvetica, Arial, sans-serif;
    color: #000;
    overflow-x: hidden !important ;
}
/* Prevent body scroll */


::selection {
    background-color: #2196f3;
    color: #fff;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    color: #000;
}

a {
    transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    outline: 0;
    color: #000;
    text-decoration: none;
}

a:hover {
    outline: none;
    color: white;
    text-decoration: none;
}

.wow {
    visibility: hidden;
}

.clear {
    clear: both;
}

img:not(table img) {
    max-width: 100%;
}

iframe {
    border: 0;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

p {
    font-size: 16px;
    color: #757576;
}

figure {
    margin: 0 auto;
    display: block;
    text-align: center;
}

body.scroll-off {
    overflow: hidden;
}

.section-padding {
    padding-top: 60px;
    padding-bottom: 60px;
}

.section-heading {
    color: #000000;
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 0;
}


.font-400 {
    font-weight: 400;
}

.font-500 {
    font-weight: 500;
}

.form-control::-webkit-input-placeholder {
    color: #9C9C9C;
}

.form-control::-moz-placeholder {
    color: #9C9C9C;
}

.form-control:-ms-input-placeholder {
    color: #9C9C9C;
}

.form-control:-moz-placeholder {
    color: #9C9C9C;
}

.main-text{
  font-size: 67.27px;
  line-height: 120%;
  font-weight: bold;
   font-family: 'Altform-Bold', Helvetica, Arial, sans-serif;
 
}

.text-with-icon{
  font-size: 25PX;
  line-height: 130%;
  letter-spacing: 5%;
   font-family: 'Altform-Bold', Helvetica, Arial, sans-serif;
  font-weight: bold;
}

/* --------------------- */
.blob-shape {
    width: 300px;
    height: 300px;
    background-color: red;
    /* Replace with your actual image path */
    background-size: cover;
    background-position: center;
    clip-path: polygon(53.3% 62.7%, 54.8% 62.2%, 56.6% 61.3%, 58.4% 60.5%, 60.2% 59.6%,
            62.3% 59.0%, 64.3% 58.8%, 66.0% 57.8%, 67.7% 56.8%, 69.3% 55.7%,
            70.3% 55.3%, 71.8% 55.5%, 73.7% 54.7%, 75.2% 53.4%, 76.7% 52.2%,
            78.2% 50.9%, 79.6% 49.6%, 81.1% 48.3%, 82.5% 47.0%, 83.5% 45.6%,
            83.9% 43.1%, 84.2% 40.7%);
    transition: 0.3s ease-in-out;
}

.blob-shape:hover {
    transform: scale(1.05);
}

.img_box {
    text-align: center;
}

.first_shape_wrapper .coverd_box {
       background-color: #FF9222;
    padding: 20px;
    border-radius: 10px;
    max-width: 441px;
    position: absolute;
   top: 29%;
    left: 5.5%;
    z-index: 1;
}

.box_heading {
    border-bottom: 2px solid #fff;
}

.box_heading h2 {
    color: #fff;
    font-size: 33px;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0;
}

.number_box {
    display: flex;
    align-items: end;
    margin-top: 20px;
}

.number_box h4 {
    font-size: 139.77px;
    font-weight: bold;
    margin: 0;
    color: #fff;
    line-height: 110px;
}

.number_box span {
    font-size: 29.48px;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    font-family: 'Altform', Helvetica, Arial, sans-serif;
}

.spots_box {
  width: 100%;
    max-width: 537px;               /* fixed width for large screens */
    padding: 16px;
    padding-bottom: 0;
    border-radius: 10px;
    background-color: #FF4602;
    position: absolute;
   right: 7%;
    top: 36%;               /* top position */
    box-sizing: border-box;     /* include padding in width */
    margin: 26px -10% 0 0; 
}





@media (max-width: 1349px) {
    .spots_box {
        width: 445px;      
        top: 280px; 
    }
}

/* Tablet */
@media (max-width: 991px) {
    .spots_box {
        width: 380px;
        max-width: 80%;
        top: 250px;
        padding: 14px;
    }
}

/* Mobile */
@media (max-width: 575px) {
    .spots_box {
        width: 300px;
        max-width: 90%;
        top: 200px;
        padding: 12px;
    }
}

.heading_box{
     border-bottom: 2px solid #fff;
}
.heading_box h2{
     color: #fff;
    font-size: 33px !important;
    line-height: 120%;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0;
}

.list_block{
    margin-top: 53px;
}
.list_block ul{
    padding: 0;
    margin: 0;
    list-style: none;
}

.top-spots {
  color: white;
  width: 100%;
  border-radius: 5px;
}

.spot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.number {
   
    font-size: 29.48px;
    font-family: 'Altform-Bold', Helvetica, Arial, sans-serif;
}

.time {
  font-size: 16px;
  font-weight: bold;
  white-space: nowrap;
  
}

.bottom-text{
  color: white;
  font-size: 20px;
 line-height: 130%;
letter-spacing: 5%;
 font-family: 'Altform-Bold', Helvetica, Arial, sans-serif;
font-weight: normal; /* uses Altform Regular */;
}

@media (max-width: 576px) {

 .bottom-text{
   font-size: 12.57px;
  }
}
.bottom-text-station{
  color: black;
}

.station-card {
  width: 100%;             /* full width by default */
  max-width: 590px;        /* fixed maximum width */
  border: 2px solid #000;
  border-radius: 10px;
  padding: 20px;
  padding-bottom: 0;
  font-family: 'Altform', Helvetica, Arial, sans-serif;
  background-color: #fff;
  margin: 26px 0 0 0;      /* top margin 26px, left aligned */
  box-sizing: border-box;   /* includes padding in width */
}

.station-card_first {
  margin-left: 2%;
      margin-top: 5%;
}

/* Responsive for small screens (optional) */
@media (max-width: 575px) {
  .station-card {
    width: 100%;
    padding: 15px;
    margin: 26px 0 0 0;  /* keep left aligned */
  }
}


.station-card h3 {
  margin-bottom: 45px;
  font-size: 32px;
  font-weight: bold;
  border-bottom: 2px solid #000000;
  padding-bottom: 15px;
}


.station {
    display: flex;
    align-items: center;
    justify-content: space-between; /* pushes left content and right content apart */
    margin-bottom: 27px;
}

.station-left {
    display: flex;
    align-items: center;
    gap: 20px; /* spacing between train icon and station details */
    font-family: 'Altform-Bold', Helvetica, Arial, sans-serif;
}

.right_details {
    display: flex;
    flex-direction: column; /* keeps blue line below station name */
}

.station-time {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 23.95px;
    font-weight: bold;
    font-family: 'Altform-Bold', Helvetica, Arial, sans-serif;
  font-weight: bold; /* uses Altform Regular */;
  margin-top: -27px;
}

.station-time .time-logo {
    width: 16.36px;
    height: 26.84px;
}
.station:last-child{
    margin-bottom: 0;
}
.icon {
  font-size: 28px;
}

.name {
  flex-grow: 1;
  font-weight: bold;
  font-size: 23.84px;
}

.line-icon {
  font-size: 18px;
  color: black;
}

.blue-line {
  color: #0000cd; /* or #0047bb for TfL Piccadilly */
}
.right_details{
    display: flex;
    flex-direction: column;
}



.section_wrapper.top_space{
    margin-top: 106px;
}

.buzz-box {
  width: 100%;
  max-width: 441px;
  background-color: #62BCB3;
  color: white;
  border-radius: 10px;
  padding: 20px;
  position: absolute;
 top: 5%;
    left: 0%;
  z-index: 1;
}
.buzz-box .buzz-title{
    border-bottom: 2px solid #fff;
    padding-bottom: 16px;
}
.buzz-box .buzz-title h2{
  font-weight: bold;
  font-size: 32px;
  margin: 0;
  line-height: normal;
  color: #fff;
}

.buzz-box .buzz-box hr {
  border: none;
  border-top: 2px solid white;
  margin: 10px 0;
}

.buzz-box .buzz-number {
  display: flex;
  align-items: end;
  gap: 10px;
  margin-top: 45px;
}

.buzz-box .big-number {
  font-size: 139.77px;
  font-weight: bold;
  line-height: 120px;
}

.buzz-box .buzz-text {
    font-size: 29.48px;
    line-height: 110%;
    /* font-weight: bold; */
    font-family: 'Altform-Bold', Helvetica, Arial, sans-serif;
}
.buzz-box.buzz_box_orange {
    background-color: #FF4602;
    right: 15%;
    left: auto;
    top: 18%;
    z-index: 2;
}


.fact-box {
       background-color: #0051ce;
    color: white;
    padding: 15px;
    width: 100%;
    max-width: 314px;
    border-radius: 10px;
    position: absolute;
   right: 18%;
        top: -16%;
    z-index: 1;
    

}

.fact-box .icon {
  font-size: 24px;
  margin-bottom: 10px;
}

.fact-box .fact-text {
  font-size: 23px;
  line-height:  110%;
  font-weight: 500;
  color: #fff;
  margin-top: 40px;
}


.fact_box_2 {
   background-color: #168771;
    color: white;
    padding: 15px;
    width: 100%;
    max-width: 314px;
    border-radius: 10px;
    position: relative;
    margin-top: 3%;
    margin-left: 23%;
}

.fact_box_2 .icon {
  font-size: 24px;
  margin-bottom: 10px;
}

.fact_box_2 .fact-text {
  font-size: 23px;
  line-height:  normal;
  font-weight: 500;
  color: #fff;
 margin-top: 39px;
}

.bootom_box {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.bootom_box .img_box_small{
    position: relative;
    margin-top: -250px;
    margin-right: 7px;
}

/*  */

.section_wrapper.top_space_last_section{
    margin-top: 66px;
}

.section_wrapper.top_space_last_section .img_box_03{
    text-align: center;
}

.third_shape_wrapper .coverd_box {
    background-color: #FF9222;
    padding: 20px;
    border-radius: 10px;
    max-width: 441px;
    position: absolute;
   top: 15%;
    z-index: 1;
    left: 8%;
}

.third_shape_wrapper .fact-box{
    background-color: #62BCB3;
   top: 12%;
    right: 8%;
}

.img_box_03_first{
       transform: translatex(75px);
}
.third_shape_wrapper .fact-box .fact-text {
       margin-top: 44px;
    margin-bottom: 0;
}
.button_block{
    margin: 110px 0;
    text-align: center;
}
.theem_btn {
    background-color: #0048C6;
    font-size: 15px;
    display: inline-block;
    width: 240px;
    /* height: 43px; */
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    padding: 10px 7px;
    text-decoration: none;
}
.theem_btn:hover{
    background-color: #62BCB3;
    color: #fff;
}
.img_box img{
    transition: transform 0.6s ease-in-out;
    position: relative;
}
.img_box img:hover{
   transform: scale(1.1);
  animation: bounceZoom 0.6s ease-in-out;
  z-index: 3;
}

/* Keyframes Animation */
@keyframes bounceZoom {
  0% {
    transform: scale(1);
  }
  60% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1.1);
  }
}

.second_img_box img{
    transition: transform 0.6s ease-in-out;
    position: relative;
}

.second_img_box_first{
     transform: translate(-248px, 125px);
}
.second_img_box img:hover{
   transform: scale(1.1);
  animation: bounceZoom 0.6s ease-in-out;
  z-index: 3;
}

/* Keyframes Animation */
@keyframes bounceZoom {
  0% {
    transform: scale(1);
  }
  60% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1.1);
  }
}


.img_box_small img{
    transition: transform 0.6s ease-in-out;
    position: relative;
}
.img_box_small img:hover{
   transform: scale(1.1);
  animation: bounceZoom 0.6s ease-in-out;
  z-index: 3;
}

/* Keyframes Animation */
@keyframes bounceZoom {
  0% {
    transform: scale(1);
  }
  60% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1.1);
  }
}


.img_box_03 img{
    transition: transform 0.6s ease-in-out;
    position: relative;
}
.img_box_03 img:hover{
   transform: scale(1.1);
  animation: bounceZoom 0.6s ease-in-out;
  z-index: 3;
}

/* Keyframes Animation */
@keyframes bounceZoom {
  0% {
    transform: scale(1);
  }
  60% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1.1);
  }
}



/* ================= DESKTOP (default) ================= */
/* keep your current styles for large screens */

/* ================= TABLET ================= */
@media (max-width: 991px) {

  /* Remove absolute positioning so elements flow in order */
  .coverd_box,
  .spots_box,
  .station-card,
  .buzz-box,
  .buzz_box_orange,
  .fact-box,
  .fact_box_2,
  .third_shape_wrapper .coverd_box {
    position: relative !important;
    width: 100% !important;
    
    margin: 20px auto ;
    top: auto !important;
    left: auto !important;
    right: auto !important;
  }

 

  /* Allow bottom section to stack */
  .bootom_box {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .img_box,
  .second_img_box,
  .img_box_small,
  .img_box_03 {
    text-align: center;
    margin: 20px 0;
  }

  /* Resize big numbers and headings */
  .number_box h4,
  .buzz-box .big-number {
   font-size: 87.53px;
    line-height: 70px;
  }

      .heading_box h2, .box_heading h2, .buzz-title h2 {
        font-size: 20.67px;
        line-height: 120%;

       
    }
     .first_shape_wrapper .coverd_box {
  
    max-width: 276.17px;
   
}



    

  .img_box_03_first {
    transform: translatex(0px);
}

.second_img_box_first {
    transform: translate(0px, 0px);
}

.number_box span {
    font-size: 18.46px;
   
}
}
/* ================= MOBILE ================= */
@media (max-width: 575px) {

  .main-text {
    font-size: 39px;
    line-height: 120%;
    font-weight: bold;
    font-family: 'Altform-Bold', Helvetica, Arial, sans-serif;
    max-width: 338px;
  }

  .text-with-icon {
    font-size: 11.62px;
  }

  .section-padding {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  /* Cards and info boxes full width */
  .station-card,
  .spots_box,
  .buzz-box,
  .buzz_box_orange,
  .fact-box,
  .fact_box_2,
  .third_shape_wrapper .coverd_box {
    width: 100% !important;
    padding: 15px;
    margin: 15px 0;
  }

  .station-card h3 {
  font-size: 20.67px;
        margin-bottom: 20px;
        line-height: 120%;
  }
  .station-left .icon{
    max-width: 41.96px;
  }
  .station-time {
    gap: 3px;
    font-size: 15px;
}

  .station .name {
    font-size: 14.93px;
  }

  .station-time .time-logo {
    width: 10.25px;
    height: 16.81px;
}

.list-icon{
   width: 7.03px;
    height: 11.5px;
}

/* .line-icon{
   width: 20.38px;
    height: 16.35px;
} */

.buzz-box .buzz-number {
    gap: 16px;
    margin-top: 27px;
}

  .buzz-box .buzz-title h2 {
  
    font-size: 20.67px;
  
}

  .spot .number {
   font-size: 18.46px;
        font-family: 'Altform-Bold', Helvetica, Arial, sans-serif;
        line-height: 110%;
  }

  .spot .time {
    font-size: 10.29px;
  }

  .buzz-box .big-number {
    font-size: 87.53px;
    line-height: 55px;
  }

  .buzz-box .buzz-text {
    font-size: 18.46px;
    line-height: 20px;
  }

  .fact_box_2_vict {
    padding: 18px !important;
}

  .fact-box .fact-text,
  .fact_box_2 .fact-text {
    font-size: 16px;
            margin-top: 30px;
  }

  .third_shape_wrapper .fact-box .fact-text {
    margin-top: 30px;
  
}

  /* Button full width */
  .button_block {
    margin: 40px 0;
  }

  .theem_btn {
    width: 100%;
    font-size: 14px;
    padding: 12px;
  }

  .img_box_03_first {
    transform: translatex(0px);
  }

  .second_img_box_first {
    transform: translate(0px, 0px);
  }

  .mask-video-wrapper_2nd {
    height: 325px !important;
}

.mask-video-wrapper {
    position: relative;
    height: 318px !important;
    margin: 0 auto;
    /* overflow: hidden; */
}


  /* ===============================
     REORDER SECTIONS ON MOBILE
     =============================== */
  .first_shape_wrapper {
    display: flex;
    flex-direction: column;
  }

  .first_shape_wrapper .img_box { order: 1; }        /* Vector3 image */
  .first_shape_wrapper .coverd_box { order: 2; }     /* Fancy Browse box */
  .first_shape_wrapper .spots_box { order: 3; max-width: 336px; left: 4% !important; }      /* Top F&B Spots */
  .first_shape_wrapper .station-card { order: 4; left: -2% !important;}   /* Station Card */

  /* Optional spacing for neat stacking */
  .first_shape_wrapper > * {
    width: 100%;
    margin-bottom: 20px;
  }

   .first_shape_wrapper .coverd_box {
  
    max-width: 276.17px;
   
}

 .second_shape_wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px;
  }

  /* Make the bootom_box act as if it's not a wrapper so its children become siblings */
  .second_shape_wrapper .bootom_box {
    display: contents !important;
  }

  /* Explicit order we want */
  .second_shape_wrapper .second_img_box   { order: 1 !important; }
  .second_shape_wrapper .buzz-box         { order: 2 !important; max-width: 276.17px !important;
        left: -8% !important; }
  .second_shape_wrapper .fact-box         { order: 3 !important; }
  .second_shape_wrapper .buzz_box_orange  { order: 4 !important; left: 0% !important; }
  .second_shape_wrapper .img_box_small    { order: 5 !important; }
  .second_shape_wrapper .fact_box_2       { order: 6 !important; }

  /* Make sure each block stacks cleanly */
  .second_shape_wrapper .second_img_box,
  .second_shape_wrapper .buzz-box,
  .second_shape_wrapper .fact-box,
  .second_shape_wrapper .buzz_box_orange,
  .second_shape_wrapper .img_box_small,
  .second_shape_wrapper .fact_box_2 {
    position: relative !important;
    margin: 12px 0 ;
   
  }

  .second_shape_wrapper .fact-box{
       max-width: 223.06px !important;
       left: 18% !important;
      padding: 7.1px !important;
  }

  /* responsive images */
  .second_shape_wrapper img {
    max-width: 100%;
    height: auto;
    display: block;
    /* margin: 0 auto; */
  }


   .third_shape_wrapper {
    display: flex;
    flex-direction: column;
  }

  .third_shape_wrapper .fact-box {
    order: 1;
    max-width: 223.06px !important;
    left: 17% !important;
  }

  .third_shape_wrapper .img_box_03 {
    order: 2;
  }

  .third_shape_wrapper .coverd_box {
    order: 3;
    max-width: 276.17px !important;
    left: 5% !important;
  }

  /* Reset absolute/relative positions for stacking */
  .third_shape_wrapper > * {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 10px 0 !important;
    width: 100% !important;
  }

  /* Center text & image for clean mobile view */
  .third_shape_wrapper .coverd_box,
  .third_shape_wrapper .fact-box,
  .third_shape_wrapper .img_box_03 {
    text-align: left;
  }

  .third_shape_wrapper img {
    max-width: 100%;
    height: auto;
  }


  .first_shape_wrapper .coverd_box {
        padding: 13px;
        left: -9% !important;
    }

.list_block {
    margin-top: 30px;
}

.heading_box h2 {
    font-size: 29.43px !important;
}
.second_shape_wrapper .fact_box_2{
max-width: 223.06px !important;
padding: 7.1px !important;
}

.bootom_box .img_box_small {
    position: relative;
    margin-top: -250px;
    margin-right: 0px;
    transform: translateX(17%) !important;
}
}

/* Tablet */
@media (max-width: 991px) {
    .bootom_box .img_box_small {
        margin-top: 0 !important; /* remove overlap */
        text-align: center;
    }

    .img_box_small img {
        max-width: 80%; /* scale image down */
        height: auto;
    }

    .bootom_box .img_box_small {
   
    transform: translateX(0%);
}




}

/* Mobile */
@media (max-width: 575px) {
    .bootom_box .img_box_small {
        margin-top: 0 !important; /* remove overlap */
        text-align: center;
    }

    .img_box_small img {
      
        height: auto;
    }
}



/* ======== FIX: Prevent Horizontal Scroll Without Affecting Layout ======== */





/* Fix known offenders on small screens */
@media (max-width: 575px) {
  /* Only reset transforms that push too far offscreen */
  /* .bootom_box .img_box_small {
    transform: translateX(-50%) !important;
    left: 50% !important;
    margin-right: 0 !important;
  } */

  /* Keep others as they are */
  .spots_box,
  .buzz_box,
  .fact-box {
    overflow: hidden;
  }

  /* Contain padding for smaller viewports */
  .container, .section_wrapper {
    padding-left: 10px;
    padding-right: 10px;
  }

  html, body {
  overflow-x: hidden !important;
  width: 100%;
}

/* Contain internal overflows */
.section_wrapper,
.container {
  max-width: 100vw;
  overflow-x: clip;
}

/* This ensures large transforms or positioned elements don't extend outside */
[class*="box"], [class*="wrapper"] {
  max-width: 100%;
}
}












    
/* ---------------- Filter Buttons ---------------- */

.section-title{
  max-width: 957px;
  font-size: 50.13px;
  font-weight: bold;
  line-height: 120%;
  margin: 10px auto 30px;
  font-family: 'Altform-Bold', Helvetica, Arial, sans-serif;
}

@media (max-width: 575px) {
   .section-title{
  /* max-width: 957px; */
  font-size: 39px;
  font-weight: bold;
  line-height: 120%;
  margin: 10px auto 30px;
  font-family: 'Altform-Bold', Helvetica, Arial, sans-serif;
}
}

.section-subtext{
  max-width: 670px;
  font-size: 20px;
  line-height: 150%;
   margin: 10px auto 30px;
   font-family: 'Altform-Regular', Helvetica, Arial, sans-serif;
  font-weight: normal; /* uses Altform Regular */
}
.d-flex.justify-content-center.flex-wrap {
  gap: 15px;
  margin-bottom: 40px;
}

.filter-btn {
  width: 315px; /* updated width */
  height: 43px;
  border-radius: 20px;
  padding: 10px 30px;
  font-weight: bold;
  color: white;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-btn:hover {
  opacity: 0.9;
}

.victoria { background-color: #62BCB3; }
.southbank { background-color: #FF9222; }
.covent { background-color: #FF4602; }

/* ---------------- Pills ---------------- */
.white-pills-wrapper {
  display: grid;
  grid-template-columns: repeat(3, auto); /* 3 pills per row on desktop */
  justify-content: center; /* center horizontally */
  gap: 10px 12px; /* smaller row and column gaps */
  margin-bottom: 20px;
}

.pill-btn {
 
  width: 261px;
  background: transparent;
  color: black;
  border: 2px solid black;
  padding: 8px 20px;
  border-radius: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center; /* vertically center content */
  gap: 10px;
  transition: all 0.3s ease;
  text-align: center; /* for multi-line text if any */
   font-family: 'Altform-Bold', Helvetica, Arial, sans-serif;
  font-weight: bold;
}


.pill-btn img.btn-icon {
  width: 35px;
  height: 35px;
}

.pill-btn:hover,
.pill-btn:focus {
 

  background: white;
    color: black;
    border: 2px solid black;
   
   
}

.info a:focus{
  color: white;
}

.reset-link {
  color: white;
  cursor: pointer;
  font-size: 16px;
  text-decoration: none;
  font-weight: bold;
  margin-top: 20px;
}

/* ---------------- Blob Cards ---------------- */
.card-wrapper {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  text-align: center;
}

.blob-img {
  width: 100%;
 max-width: 461.84px;
  max-height: 479.22px;
  overflow: hidden;
  
 
  margin: 0 auto;
}

.blob-img-1{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;         /* Ensures full coverage */
  /* height: 100%;       */
  object-fit: cover;   /* Keeps image proportionate */
  pointer-events: none; /* Optional: prevents hover/focus on overlay */

}



.icon-box {
  position: absolute;
  top: 10%;   /* instead of 89px */
  left: 11%;  /* instead of 63px */
  background: #FF4602;
  border-radius: 50%;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  z-index: 3;
}
@media (max-width: 767.98px) {
.icon-box {

  top: 10%;   /* instead of 89px */
  left: 4%;
}
}

.icon-box img {
  width: 40px;
  height: 40px;
}

.font11{
  font-size: 12.52px !important;
}
.overlay-box {
  position: relative;
  margin: 0 auto;
  padding: 16px;
  border-radius: 8px;
  color: white;
  z-index: 2;
  /* box-shadow: 0 4px 12px rgba(0,0,0,0.15); */
  width: 90%;
  max-width: 324px;
  height: auto;
  transform: translateY(-74px); /* default value */
  transition: transform 0.3s ease;
}

.overlay-box h5 {
  font-size: 1.2rem;
  margin-bottom: 8px;
  font-weight: bold;
  border-bottom: 2px solid #fff;
  padding-bottom: 5px;
}

.overlay-box p {
  font-size: 16px;
  margin-bottom: 12px;
  font-family: 'Altform-Regular', Helvetica, Arial, sans-serif;
  font-weight: normal; /* uses Altform Regular */
}

.orange { background-color: #FF4602; }
.yellow { background-color: #FF9222; }
.teal { background-color: #62BCB3; }

.victoria-embankment{ background-color: #62BCB3;}
.covent-garden { background-color: #FF4602; }
.southbank { background-color: #FF9222; }


.info {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  align-items: center;
  font-family: 'Altform-Bold', Helvetica, Arial, sans-serif;
  font-weight: normal; /* uses Altform Regular */
}

.location-link {
  color: #fff;
  text-decoration: underline;
   font-family: 'Altform-Regular', Helvetica, Arial, sans-serif;
  font-weight: normal; /* uses Altform Regular */

  display: inline-flex;
  align-items: flex-start;
  gap: 7px; /* Icon আর text এর মধ্যে gap */

  color: inherit;
}

/* ---------------- Rows & Responsiveness ---------------- */
.spots-section .row {
  row-gap: 60px;
}

@media (max-width: 992px) {
  /* .blob-img {
    height: 300px;
  } */

   .overlay-box {
    transform: translateY(-65px);
  }

  .filter-btn {
    width: 48%;
    margin-bottom: 10px;
  }

  .white-pills-wrapper {
    grid-template-columns: repeat(2, auto); /* 2 pills per row on tablet */
    gap: 8px 10px;
  }
}

@media (max-width: 768px) {
  /* .blob-img {
    height: 260px;
  } */

  .overlay-box {
    transform: translateY(-60px);
  }

  .filter-btn,
  .pill-btn {
    width: 100%;
  }

  .white-pills-wrapper {
    grid-template-columns: repeat(2, auto); /* 2 pills per row on small tablets */
    gap: 8px 8px;
  }
}

@media (max-width: 576px) {

  .icon-img{
    width: 7px;
    height: 11px;
  }
  .overlay-box {
    transform: translateY(-50px);
  }

  /* .blob-img {
    height: 220px;
  } */

  .white-pills-wrapper {
    grid-template-columns: 1fr; /* 1 pill per row on mobile */
    gap: 8px 0; /* reduce gap for stacked pills */
  }

  .pill-btn {
    max-width: 100%;
  }
}

.reset-wrapper {
  margin-top: 20px;
  text-align: center; /* center align under the pills */
}

.reset-link {
  font-family: 'Altform-Bold', Helvetica, Arial, sans-serif;
  font-weight: bold;   /* uses Altform Bold */
  font-size: 16px;
  color: #000;
  text-decoration: none; /* no underline */
 
  transition: color 0.3s ease;
}

.reset-link:hover {
  color: black; /* subtle hover effect */
  text-decoration: underline;
}

@media (max-width: 768px) {
  .overlay-box {
    transform: translateY(-30px);
  }
}

@media (max-width: 480px) {
  .overlay-box {
    transform: translateY(-20px);
  }
}

/* Very small mobiles */
@media (max-width: 480px) {
  .overlay-box {
    transform: translateY(-45px);
  }
}


/* Default button style: blurred/inactive */
.filter-btn {
  opacity: 0.5;        /* makes it look faded */
  transition: all 0.3s ease;
  cursor: pointer;
}

/* Active button style */
.filter-btn.active {
  opacity: 1;           /* fully visible */
  /* optional highlight */
  /* optional zoom effect */
  color: white;
}



/* Default button style: blurred/inactive */



/* toggle buttonphon */

.white-pills-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 14px;
  border: 2px solid rgb(212, 211, 211);
  border-radius: 30px;
  background: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  opacity: 0.5;   
}
/* Active button style */
.pill-btn.active {
  opacity: 1;           /* fully visible */

   padding: 2px 14px;
  border: 2px solid black;
  border-radius: 30px;
  color: black;
}


.toggle-btn {
  margin-top: 12px;
  padding: 10px 30px;
  border: 2px solid black;
  border-radius: 20px;
  background: #fff;
  color: black;
  cursor: pointer;
  font-size: 0.9rem;
}

/* Mobile version এ hide হবে */
@media (max-width: 768px) {
  .pill-btn.extra {
    display: none;
    width: 85%;
  }
  .pill-btn.extra.show {
    display: inline-flex;
  }

.toggle-btn {
  /* margin-top: 12px;
  padding: 10px 30px;
  border: 2px solid black;
  border-radius: 20px;
  background: #fff;
  color: black;
  cursor: pointer;
  font-size: 0.9rem; */

  width: 100%;
    height: 43px;
    border-radius: 20px;
    padding: 2px 47px;
    font-weight: bold;
    color: black;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid black;
}

.pill-btn:hover, .pill-btn:focus {
    background: white;
    color: black;
    border: 2px solid black;
    padding: 10px 30px;
}

.pill-btn:hover, .pill-btn:focus {
    background: white;
    color: black;
    border: 2px solid black;
    padding: 2px 14px;
}

}



}


/* toggle buttonphon */


/* extra menub */
.sub-navbar {
    margin-top: 103px;
    padding: 8px 0;
    position: relative;
    top: -32px;
    z-index: 1020;
}

.small-nav .nav-link {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin: 0 12px;
  padding: 4px 0;
   font-family: 'Altform-Bold', Helvetica, Arial, sans-serif;
   text-transform: uppercase;
}

.small-nav .nav-link.active {
  color: #62BCB3;
  /* border-bottom: 2px solid #ff4500; */
}

.mend-9 {
    margin-right: 8.3rem !important;
}

@media (max-width: 767.98px) {
  .mend-9 {
    margin-right: 0rem !important;
}
.reset-wrapper {
    margin-top: 18px;
    text-align: center;
}
}



/* css add kara hoyeche mask er niche video */
.mask-video {
  width: 100%;
  max-width: 400px;   /* mask এর সাইজ */
  height: auto;
  -webkit-mask-image: url('/assets/images/img/icon/mask-1.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url('/assets/images/img/icon/mask-1.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  overflow: hidden;
}

.mask-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.invisible-btn {
  visibility: hidden; /* বাটন লুকানো কিন্তু জায়গা রেখে দেয় */
}


.sub-navbar .small-nav .nav-item {
  position: relative;
}

.sub-navbar .small-nav .nav-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 20%;               /* push down from top */
  height: 60%;            /* shorter bar */
  width: 2px;             /* thickness */
  background-color: #ccc; /* gray */
  border-radius: 2px;     /* optional: rounded ends */
}







.first_shape_wrapper_vict .coverd_box_vict {
      background-color: #0048C6;
    padding: 20px;
    border-radius: 10px;
    width: 100%;
    max-width: 537px !important;
    position: absolute;
   top: 24%;
    left: 2%;
    z-index: 1;
}


/* Mobile version এ hide হবে */
@media (min-width: 2000px) {

.first_shape_wrapper_vict .coverd_box_vict {
      background-color: #0048C6;
    padding: 20px;
    border-radius: 10px;
    width: 100%;
    max-width: 537px !important;
    position: absolute;
   top: 40%;
    left: 2%;
    z-index: 1;
}
}

.img_box_vict{
 transform: translateX(554px);
  width: 100%;
  max-width: 627.26px;
}

.spots_box_vict{
 
    right: -4%;
    top: 82%;
    
}


.second_img_box_vict{
   transform: translateY(213px);
   width: 100%;
   max-width: 615.92px;
}

.fact-box_vict{
   background-color: #62BCB3;
    color: white;
    padding: 15px;
    width: 100%;
    max-width: 314px;
    border-radius: 10px;
    position: absolute;
   left: 12%;
    top: 5%;
    z-index: 1;
}


.img_box_small_vict{
  transform: translate(-98px, 320px);
  width: 100%;
  max-width: 738.08px;
  
}

.buzz_box_yellow{
  background-color: #FF9222;
   right: 14%;
    left: auto;
    top: 31.4%;
    z-index:  2;
    width: 100%;
    max-width: 482px;

}




.buzz-box_vict{
  width: 100%;
   max-width: 509px;
  background-color: #168771;
  color: white;
  border-radius: 10px;
  left: 0%;
  
}

.fact_box_2_vict{
 margin-top: 17%;
    margin-left: 13%;
    padding: 20px;
}

.section_wrapper.top_space_last_section .img_box_03_vict {
    text-align: left;
    width: 100%;
    max-width: 625.92px;
}


.fact-box_bottom{
  width: 100%;
 max-width: 441px;
}


.third_shape_wrapper .fact-box_bottom {
    background-color: #62BCB3;
      top: 9%;
    right: 15%;
    padding: 20px;
}



.img_box_03_vict{
 transform: translate(124px, 115px);
}


.third_shape_wrapper .fact-box_yellow{
  width: 100%;
 max-width: 314px;
background-color: #FF9222;
    top: -10%;
    left: 98px;
}


.extra_box {
    background-color: #FF4602 !important; /* blue example */
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    width: 100%;
    max-width: 314px;
    position: absolute;
   margin-top: 30%;
    margin-right: 11%;
}



.d-flex {
    display: flex;
}

.gap-3 {
    gap: 20px; /* space between blob and new box */
}


.button_block_vict{
    margin-top: 250px !important; /* increase as much as needed */
    margin-bottom: 100px !important; /* remove bottom margin */
}


.third_shape_wrapper .fact-box_yellow .fact-text {
   /* margin-top: 40px; */
    margin-bottom: 0;
}

.third_shape_wrapper .extra_box .fact-text {
   margin-top: 40px;
    margin-bottom: 0;
}


.number_box_bottom{
  margin-top: 30px;
}



/* ---------------- INDEX2 RESPONSIVE ---------------- */

/* Tablet & below */
@media (max-width: 992px) {
    /* Force bottom boxes to stack vertically */
    .third_shape_wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 20px;
    }

    .img_box_03_vict,
    .extra_box,
    .coverd_box.fact-box_yellow {
        width: 100% !important;
        margin: 10px 0;
        position: relative;
        left: 0;
        top: 0;
    }

    /* Make images responsive */
    .img_box_vict img,
    .second_img_box_vict img,
    .img_box_03_vict img,
    .img_box_small_vict img {
        width: 100% !important;
        max-width: 100%;
        height: auto;
        display: block !important;
        margin: 0 auto;
        visibility: visible !important;
    }

    /* Adjust button block */
    .button_block_vict {
        text-align: center;
        margin-top: 20px;
    }

    .img_box_vict {
    transform: translateX(0px) !important;
}

.second_img_box_vict {
    transform: translateY(0px);
  }


  .img_box_small_vict {
    transform: translate(0px);
}

.img_box_03_vict {
    transform: translate(0px);
}
}

/* Mobile (smaller than 576px) */
@media (max-width: 576px) {
    .third_shape_wrapper {
        flex-direction: column !important;
        gap: 15px !important;
    }

    .img_box_03_vict,
    .extra_box,
    .coverd_box.fact-box_yellow {
        width: 100% !important;
        margin: 10px 0;
    }

    /* Extra spacing for bottom boxes */
    .bootom_box {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px;
    }

    /* Extra image adjustments */
    .img_box_small_vict {
        margin-top: 15px;
    }

    .second_img_box_vict {
    transform: translateY(0px);
    
}

.img_box_vict {
    transform: translateX(0px);
    
}

.img_box_small_vict {
    transform: translate(0px);
   
}


  
  /* Make parent wrappers flex column for mobile */
  .second_shape_wrapper,
  .third_shape_wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  /* Mobile stacking order */
  .second_shape_wrapper .fact-box_vict { order: 1 !important; }        /* 1. Victoria Embankment Gardens */
  .second_shape_wrapper .second_img_box_vict { order: 2 !important; }  /* 2. Main Image */
  .second_shape_wrapper .buzz_box_yellow { order: 3 !important; }      /* 3. Spaces to Breathe */
  
  /* Cycle Superhighway in 4th */
  .third_shape_wrapper .fact-box_blue { order: 4 !important; }         /* 4. Cycle Superhighway */
  
  .second_shape_wrapper .img_box_small_vict { order: 5 !important; }   /* 5. Small Image */
  .second_shape_wrapper .fact_box_2_vict { order: 6 !important; }      /* 6. Need a Lunchtime Walk */
  
  .third_shape_wrapper .fact-box_yellow { order: 7 !important; max-width: 207.9px !important;padding: 9px 17px;
        left: -13% !important; }       /* 7. Victoria Embankment Houses */
  .third_shape_wrapper .img_box_03_vict { order: 8 !important;  }       /* 8. Blob Image */
  .third_shape_wrapper .fact-box_bottom { order: 9 !important;         max-width: 276px !important;
        left: 26px !important;}       /* 9. So Much to See */

  /* Reset absolute positioning for mobile */
  .second_shape_wrapper > *,
  .third_shape_wrapper > * {
    position: relative !important;
    /* transform: none !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    max-width: 100% !important; */
    margin: 0 auto;
  }

  /* Make images responsive */
  /* .second_shape_wrapper img,
  .third_shape_wrapper img,
  .second_shape_wrapper .icon img,
  .third_shape_wrapper .icon img {
    width: auto !important;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  } */

  /* Button centering */
  .button_block_vict {
    text-align: center !important;
    margin: 20px auto !important;
    width: 100%;
  }

  .first_shape_wrapper_vict .coverd_box_vict {
   
    line-height: 197%;
}

 .first_shape_wrapper .coverd_box_vict {
        padding: 13px;
        left: 3% !important;
        top: 14% !important;
    }

    .first_shape_wrapper .spots_box_vict   {
        order: 4;
        left: -2% !important;
        top: 20px !important;
    }
    .bootom_box .img_box_small_vict {
     
        transform: translateX(0%) !important;
    }

        .second_shape_wrapper .fact_box_2_vict {
               max-width: 318px !important;
        padding: 14.1px !important;
        left: -7px !important;
    }

    .extra_box {
   
    padding: 12px;
    
}
}

























.img_box_south{
  text-align: left;
  transform: translatex(67px);
  width: 100%;
  max-width: 707.85px;
}


.spots_box_south{
   background-color: #FF9222;
    position: absolute;
     right: 7%;
    top: 15%;

}

.buzz-box_south{
  background-color: #62BCB3 !important;
  width: 554px !important;
}

.first_shape_wrapper .coverd_box_south {
    width: 100%;
    max-width: 554px;
    top: 85%;
    left: 4%;
}


.second_img_box_south{
  transform: translate(75px, 186px);
  width: 100%;
  max-width: 628.85px;
}


.fact-box_south{
     background-color: white;
    color: black;
    padding: 15px;
    width: 100%;
    max-width: 590px;
    border-radius: 10px;
    position: absolute;
    left: 47%;
    top: 8%;
}

.buzz-box_south1{
  width: 100%;
  max-width: 537px;
}



.fact_box_2_south{
 
   
    margin-top: 14%;
    margin-left: 2%;
    padding: 20px;
    background-color: #FF4602;

}


.img_box_small_south {
  width: 100%;
    transform: translate(-221px, 396px);
    max-width: 559.86px;
}

.buzz_box_seagreen{
   background-color: #168771;
    right: 15%;
    left: auto;
    top: 39%;
    z-index: 2;
    width: 100%;
    max-width: 314px !important;

}


.fact-box_bottom_south{
  width: 100%;
  max-width: 645px;
}

.third_shape_wrapper .fact-box_bottom_south {
   background-color: #0048C6;
    top: -32%;
    right: 5%;
    padding: 22px;
    max-width: 645px;
}


.third_shape_wrapper .fact-box_south {
     width: 100%;
    max-width: 339px;
    background-color: #FF9222;
    top: 17%;
    left: 5%;
}

.third_shape_wrapper .fact-box_south .fact-text {
    margin-top: 30px;
    margin-bottom: 0;
}

.extra_box_south {
  
    background-color: #62BCB3 !important;
   margin-top: 14%;
    margin-right: 11%;

}


.number_box_south{
  text-align: right;
}

.buzz-box_south .buzz-text_south {
   text-align: right;
}

.img_box_03_south{
  width: 100%;
  max-width: 720.28px;
  transform: translate(74px, 27px);
}

.number_box_south span {
    line-height: 110%;
}


/* ------------------ Tablet & Mobile Responsive ------------------ */

/* Tablet: stack bottom 3 sections and adjust blobs */
@media (max-width: 1024px) {
    .third_shape_wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    /* Inner d-flex blocks become column */
    .third_shape_wrapper > .d-flex,
    .third_shape_wrapper .d-flex.align-items-center.gap-3 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 1rem !important;
        width: 100%;
    }

    /* Make each piece full width and centered */
    .third_shape_wrapper .fact-box,
    .third_shape_wrapper .img_box_03,
    .third_shape_wrapper .extra_box,
    .third_shape_wrapper .coverd_box {
        width: 100%;
        max-width: 920px;
        margin: 0 auto;
        
    }

    /* Reduce blob image width */
    .third_shape_wrapper .img_box_03 img,
    .third_shape_wrapper .img_box_small img {
        max-width: 70%;
        width: auto;
    }

    .img_box_south {
 
    transform: translatex(0px);
    
}

.second_img_box_south {
    transform: translate(0px);
   
}

.img_box_small_south {
   
    transform: translate(0px);
   
}

.img_box_03_south {
  
    transform: translate(0px);
}
}

/* Mobile: further tweaks */
@media (max-width: 768px) {
    /* Override Bootstrap ms-5 for specific image */
    .first_shape_wrapper .img_box img.ms-5 {
        margin-left: 0 !important;
    }

    /* Reduce spacing and padding */
    .third_shape_wrapper {
        gap: 1rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Make blob and other images nearly full width */
    .third_shape_wrapper .img_box_03 img,
    .third_shape_wrapper .img_box_small img,
    .second_img_box img {
        max-width: 95%;
        width: auto;
    }

    /* Ensure wrappers don't hide content */
    .first_shape_wrapper,
    .second_shape_wrapper,
    .third_shape_wrapper {
        position: relative !important;
        overflow: visible !important;
    }

    /* Stack spots list items */
    .spots_box .list_block .top-spots {
        display: block;
    }

    .spots_box .list_block .top-spots .spot {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 0.35rem 0;
    }

    .img_box_south {
 
    transform: translatex(0px);
    
}

.second_img_box_south {
    transform: translate(0px);
   
}

.img_box_small_south {
   
    transform: translate(0px);
   
}

.img_box_03_south {
  
    transform: translate(-28px);
}

.first_shape_wrapper_vict .coverd_box {
        max-width: 319.17px;
    }


     /* Make both wrappers flex-column for mobile */
  .second_shape_wrapper,
  .third_shape_wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  /* Mobile stacking order */
  .second_shape_wrapper .buzz_box_seagreen.fact-box { order: 1 !important; }     /* 1. National Theatre */
  .second_shape_wrapper .second_img_box_south { order: 2 !important; }           /* 2. Main Image */
  .second_shape_wrapper .buzz-box_south.station-card { order: 3 !important; }    /* 3. YOUR NEAREST tube STATIONS */
  .second_shape_wrapper .fact_box_2_south { order: 4 !important; }               /* 4. A Cultural Feast */
  .second_shape_wrapper .img_box_small_south { order: 5 !important; }            /* 5. Small Image */

  .third_shape_wrapper .coverd_box.fact-box_south { order: 6 !important;        max-width: 224.6px !important;
        left: 30px !important; }       /* 6. Did you know? */
  .third_shape_wrapper .fact-box_bottom_south { order: 7 !important; }           /* 7. Enjoy London’s Finest */
  .third_shape_wrapper .img_box_03_south { order: 8 !important; left: 10% !important; }                /* 8. Blob Image */
  .third_shape_wrapper .extra_box_south { order: 9 !important; }                 /* 9. Skate Park */

  /* Reset absolute positioning for mobile */
  .second_shape_wrapper > *,
  .third_shape_wrapper > * {
    position: relative !important;
    transform: none !important;
    /* top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important; */
    margin: 0 auto !important;
  }

  /* Make images responsive */
  /* .second_shape_wrapper img,
  .third_shape_wrapper img,
  .second_shape_wrapper .icon img,
  .third_shape_wrapper .icon img {
    width: auto !important;
    max-width: 100% !important;
    height: auto;
    display: block;
    margin: 0 auto !important;
  } */

  /* Button centering */
  .button_block {
    text-align: center !important;
    margin: 51px auto !important;
    width: 100%;
  }


  .bottom-text-station{
    line-height: 0% !important;
  }

  .fact_box_2_south {
    padding: 20px 12px;
}

.third_shape_wrapper .fact-box_bottom_south {
   
    padding: 10px;
    max-width: 347px !important;
    left: 0% !important;
   
}

    .number_box_south span {
        font-size: 14.46px;
    }

    .buzz-box_south .buzz-title h2 {
        font-size: 18.67px;
    }

        .buzz-box_south .buzz-text {
        font-size: 14.46px;
        line-height: 20px;
    }

    .first_shape_wrapper .coverd_box_south {
        max-width: 319.17px;
        padding: 15px;
        left: 0% !important;
    }

    .first_shape_wrapper .spots_box_south {
        order: 3;
        max-width: 336px;
        left: 2% !important;
    }

    .second_shape_wrapper .buzz_box_seagreen  {
        max-width: 223.06px !important;
      left: 6% !important;
        padding: 10.1px !important;
    }

        .second_shape_wrapper .fact-box_south {
        max-width: 322.06px !important;
       left: 0% !important;
        
    }

        .second_shape_wrapper .fact_box_2_south {
        max-width: 336px !important;
        left: 0% !important;
        padding: 10px !important;
       
    }

        .bootom_box .img_box_small_south {
       
        transform: translateX(0%) !important;
    }
}


@media (max-width: 768px) {
  [data-speed] {
    transform: none !important;
    will-change: auto !important;
  }
  
}

.mask-video-wrapper {
  position: relative;
  max-width: 627.26px;      /* adjust to match your design */
  height: 509.22px;
  margin: 0 auto;
  /* overflow: hidden; */
}

.mask-video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* Mask properties */
  -webkit-mask-image: url('../assets/images/img/mask-1.svg') !important;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;

  mask-image: url('../assets/images/img/mask-1.svg') !important;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;

  /* For debugging: optional background */
  background-color: black;
}


.mask-video-wrapper_2nd{
   max-width: 738.08px; 
   height: 599.18px;
}


.mask-video-wrapper_2nd video{
   mask-position: left;
   -webkit-mask-image: url('../assets/images/img/mask-2.svg') !important ;

  mask-image: url('../assets/images/img/mask-2.svg') !important;
 
}

.text_description p{
  color: white;
}

.location-link:hover{
  color:white;
}

.pill-btn.active .btn-icon {
  filter: brightness(0) saturate(100%);
  transition: filter 0.3s ease;
}


.southbank-active {
    opacity: 1;
   
}

.covent-garden-active{
    opacity: 1;
   
}

.victoria-embankment-active{
    opacity: 1;
    
}