.mud-main-content {
    margin: 0;
    flex: 1 1 auto;
    padding-top: calc(var(--mud-appbar-height) - var(--mud-appbar-height));
    transition: margin 225ms cubic-bezier(0,0,.2,1) 0ms;
}

/* ==================== MAIN CONTENT WRAPPER ==================== */
.main-content-wrapper {
    position: relative;
    width: 100%;
    overflow-x: hidden;
    min-height: 100vh;
}

.main-content-wrapper > * {
    position: relative;
}

/* ==================== TICKET PAGE LAYOUT FIX ==================== */
.ticket-page-wrapper {
    position: relative;
    width: 100%;
    overflow-x: hidden;
}

.full-width-section {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    clear: both;
}
 .hero-section {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: -100px;
    height: 100vh;
    max-height: 100vh;
    padding: 0;
    overflow: visible;
    background-image: linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.6)), url('../images/side-view-of-young-woman-putting-backpack-on-shelf-2024-11-18-02-37-21-utc.jpg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
} 

.loader-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 99999;
}

.loader {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50px;
    height: 50px;
    font-size: 0;
    color: #00c9d0;
    display: inline-block;
    margin: -25px 0 0 -25px;
    text-indent: -9999em;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

    .loader div {
        background-color: #00c9d0;
        display: inline-block;
        float: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 50px;
        height: 50px;
        opacity: 0.5;
        border-radius: 50%;
        -webkit-animation: ballPulseDouble 2s ease-in-out infinite;
        animation: ballPulseDouble 2s ease-in-out infinite;
    }

        .loader div:last-child {
            -webkit-animation-delay: -1s;
            animation-delay: -1s;
        }

@-webkit-keyframes ballPulseDouble {
    0%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes ballPulseDouble {
    0%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

 /* .mud-input-label-outlined {
  background-color: #ffffffc2;
  padding: 15px;
  height: auto; 
  border-radius: 5px;
}  */


:root {
    --gutter: 10px;
}

.app {
    padding: var(--gutter) 0;
    display: grid;
    grid-gap: var(--gutter) 0;
    grid-template-columns: var(--gutter) 1fr var(--gutter);
    align-content: start;
}

    .app > * {
        grid-column: 2 / -2;
    }

    .app > .full {
        grid-column: 1 / -1;
    }

.hs {
    display: grid;
    grid-gap: calc(var(--gutter) / 2);
    grid-template-columns: 10px;
    grid-template-rows: minmax(150px, 1fr);
    grid-auto-flow: column;
    grid-auto-columns: calc(20% - var(--gutter) * 2);
    overflow-x: scroll !important;
    scroll-snap-type: x proximity;
    padding-bottom: calc(.75 * var(--gutter));
    margin-bottom: calc(-.25 * var(--gutter));
    margin-top: 15px;
    width: 90%;
    overflow-x: hidden;
}

    .hs:before,
    .hs:after {
        content: '';
        width: 10px;
    }


/* Demo styles */


ul {
    list-style: none;
    padding: 0;
}

h1,
h2,
h3 {
    margin: 0;
}

.app {
    width: 100%;
    height: 667px;
    background: #DBD0BC;
    overflow-y: scroll;
}

.hs > li,
.item {
    scroll-snap-align: center;
    padding: calc(var(--gutter) / 2 * 1.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8px;
}



.no-scrollbar {
    scrollbar-width: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }

.scrolling-menu {
    width: 70%;
    display: inline-flex;
}


.arrow {
    width: 30px;
    align-self: center;
}


@media only screen and (max-width: 1200px) {
    .hs {
        grid-auto-columns: calc(25% - var(--gutter) * 2);
    }
}

@media only screen and (max-width: 965px) {
    .hs {
        grid-auto-columns: calc(30% - var(--gutter) * 2);
    }
}

@media only screen and (max-width: 765px) {
    .hs {
        grid-auto-columns: calc(30% - var(--gutter) * 2);
    }

    .scrolling-menu {
        width: 100%;
    }
}


@media only screen and (max-width: 600px) {
    .hs {
        grid-auto-columns: 20%;
        grid-template-rows: minmax(90px, 1fr);
    }
}

.site-footer{
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(20px);
  color: white;
  padding: 80px 0 40px; 
}

.site-footer .mud-container{
  padding-left: 16px !important;
  padding-right: 16px !important;
  max-width: 1400px;           
  margin: 0 auto;
}

@media (max-width: 1024px){
  .site-footer{
    padding: 60px 0 30px;
  }
}
@media (max-width: 600px){
  .site-footer{
    padding: 45px 0 25px;
  }
}
@media (max-width: 768px){
  .footer-clean footer{
    padding: 50px 0px !important;
  }

}

* {
    margin: 0px;
    padding: 0px;
  
}

html, body, * {
    font-family: "Sora", sans-serif !important;
}


.context {
    width: 100%;
    position: absolute;
    top: 50vh;
}

    .context h1 {
        text-align: center;
        color: #fff;
        font-size: 50px;
    }


.area {
    background: #4e54c8;
    background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);
    width: 100%;
    height: 100vh;
}

.circles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

    .circles li {
        position: absolute;
        display: block;
        list-style: none;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.2);
        animation: animate 25s linear infinite;
        bottom: -150px;
    }

        .circles li:nth-child(1) {
            left: 25%;
            width: 80px;
            height: 80px;
            animation-delay: 0s;
        }


        .circles li:nth-child(2) {
            left: 10%;
            width: 20px;
            height: 20px;
            animation-delay: 2s;
            animation-duration: 12s;
        }

        .circles li:nth-child(3) {
            left: 70%;
            width: 20px;
            height: 20px;
            animation-delay: 4s;
        }

        .circles li:nth-child(4) {
            left: 40%;
            width: 60px;
            height: 60px;
            animation-delay: 0s;
            animation-duration: 18s;
        }

        .circles li:nth-child(5) {
            left: 65%;
            width: 20px;
            height: 20px;
            animation-delay: 0s;
        }

        .circles li:nth-child(6) {
            left: 75%;
            width: 110px;
            height: 110px;
            animation-delay: 3s;
        }

        .circles li:nth-child(7) {
            left: 35%;
            width: 150px;
            height: 150px;
            animation-delay: 7s;
        }

        .circles li:nth-child(8) {
            left: 50%;
            width: 25px;
            height: 25px;
            animation-delay: 15s;
            animation-duration: 45s;
        }

        .circles li:nth-child(9) {
            left: 20%;
            width: 15px;
            height: 15px;
            animation-delay: 2s;
            animation-duration: 35s;
        }

        .circles li:nth-child(10) {
            left: 85%;
            width: 150px;
            height: 150px;
            animation-delay: 0s;
            animation-duration: 11s;
        }



@keyframes animate {

    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100% {
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}

div.scrollmenu {
    overflow: auto;
    white-space: nowrap;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
    z-index:100;
}

    div.scrollmenu a {
        display: inline-block;
        color: white;
        text-align: center;
        padding: 80px;
        margin: 0px 3px;
        text-decoration: none;
        border-radius: 0px;
    }

@media only screen and (max-width: 820px) {
    div.scrollmenu a {
        padding: 48px;
    }
}

.fade-in-image {
    animation: fadeIn 5s;
}

.fade-in-image-fast {
    animation: fadeIn 2s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.grey-round {
    background-color: #a3a3a329;
    border-radius: 10px;
    border: 1px solid #fff;
    padding: 5px;
}

@media only screen and (max-width: 860px) {

    div.scrollmenu::-webkit-scrollbar {
        display: none;
    }

    .mud-container::-webkit-scrollbar {
        display: none;
    }

    .mud-dialog-width-full {
        width: 100%;
    }
}

.special-date {
    background-color: lawngreen;
    color: black;
    font-weight: bold;
}

a {
    color: #14980a !important;
}
/* ===================== PAGE TOP FIXES ===================== */
.home-hero { margin-top: -60px; }

.pt-14 { padding-top: 0 !important; }
.py-14 { padding-top: 0 !important; }

body.page-ticket .mud-container { padding-top: 0 !important; }
.hero-wrap h1 {
  color: #ffffff !important;
}



/* ===================== HERO  ===================== */
.hero-wrap{
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding-top: 110px;    
  padding-bottom: 120px;
  background:
    linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.6)),
    url('/images/side-view-of-young-woman-putting-backpack-on-shelf-2024-11-18-02-37-21-utc.jpg.jpg')
    center / cover no-repeat;
  margin-top: -52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-inner{
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  position: relative;
  z-index: 1;
  padding: 0 24px;
}

.hero-text{
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-text h1{
  font-size: 5rem !important;   
  font-weight: 600 !important;  
  color: #ffffff !important;
  line-height: 1.15 !important;
  max-width: 560px !important;
  text-shadow: 0 8px 30px rgba(0,0,0,0.45);
  letter-spacing: -0.6px;
}


/* Hero Responsive */

@media (max-width: 992px){
  .hero-inner{
    flex-direction: column !important;
    gap: 32px !important;
    align-items: center !important;
    text-align: center !important;
  }

  .hero-text{
    align-items: center !important;
  }

  .hero-wrap .hero-inner h1{
    font-size: 3.2rem !important;
    line-height: 1.2 !important;
    max-width: 100% !important;
    text-align: center !important;
  }
}

/* Mobile */
@media (max-width: 576px){
  .hero-wrap .hero-inner h1{
    margin-top: 20px;
    font-size: 2.2rem !important;
    line-height: 1.25 !important;
  }
}



/* ===================== TICKET FORM ===================== */
.ticket-form{
  background: rgba(255, 255, 255, 0.2);
  padding: 30px 40px;
  border-radius: 10px;
  box-shadow: none;
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  width: auto;
  height: auto;
  gap: 10px;
  flex-shrink: 0;
  transition: height 0.25s ease;

}



.ticket-form label{
  font-size: 1.5rem;
}

/* ===================== MUDBLAZOR OVERRIDES ===================== */

/* labels */
.ticket-form .mud-input-label,
.ticket-form .mud-input-label-outlined{
  color: #ffffff !important;
  font-size: 1.5rem !important;
  /* text-align: center !important; */
  
}

.ticket-form .mud-input-root-outlined fieldset,
.ticket-form .mud-autocomplete .mud-input-root-outlined fieldset,
.ticket-form .mud-date-picker .mud-input-root-outlined fieldset{
  border-color: #ffffff !important;
  background: transparent !important;
}

.ticket-form .mud-input-root-outlined.mud-input-focused fieldset,
.ticket-form .mud-autocomplete .mud-input-root-outlined.mud-input-focused fieldset,
.ticket-form .mud-date-picker .mud-input-root-outlined.mud-input-focused fieldset{
  border-color: #14980aff !important;
}

.ticket-form .mud-input-control .mud-input{
  color: #ffffff !important;
  background: transparent !important;
  height: 90px !important;
  text-align: center !important;
}

.ticket-form .mud-input-outlined-border {
  border-color: #ffffff !important;
}


.ticket-form .mud-input-root,
.ticket-form .mud-input-root-outlined,
.ticket-form .mud-input-control,
.ticket-form .mud-input-control-input,
.ticket-form .mud-input-control-input-wrapper,
.ticket-form .mud-autocomplete .mud-input-root,
.ticket-form .mud-autocomplete .mud-input-root-outlined,
.ticket-form .mud-date-picker .mud-input-root,
.ticket-form .mud-date-picker .mud-input-root-outlined{
  background: transparent !important;
}

/* dropdown (autocomplete results) */
.ticket-form .mud-popover-paper{
  background-color: #fff !important;
}
.ticket-form .mud-popover-paper .mud-list-item{
  color: #14980aff !important;
}

/* switch */
.ticket-form .mud-switch{ color: #fff !important; }
.ticket-form .mud-switch-label{
  color: #ffffff !important;
  font-size: 1.2rem !important;
}

.ticket-form .mud-button{
  background-color: rgb(26, 184, 15) !important;
  color: #fff !important;
  border-radius: 50px !important;
  padding: 14px 38px !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
}
.ticket-form .mud-button:hover{
  background-color: rgb(14, 179, 3) !important;
  transform: scale(1.05);
}
.ticket-form .mud-button:disabled{
  opacity: 0.6 !important;
  transform: none !important;
}

/* Ticket */
@media (max-width: 768px){
  .ticket-form{
    padding: 20px 15px;
    gap: 12px;
    border-radius: 8px;
    width: 100%;
    min-height: auto;
  }

  .ticket-form h3{ font-size: 1.6rem; }
  .ticket-form .mud-input-label{ font-size: 1rem !important; }

  .ticket-form .mud-input-control .mud-input{
    height: 60px !important;
    font-size: 16px !important;
    padding: 8px !important;
  }

  .ticket-form .mud-input-control .mud-input::placeholder{
    font-size: 1rem !important;
  }

  .ticket-form .mud-switch-label{ font-size: 0.95rem !important; }

  .ticket-form .mud-button{
    padding: 10px 24px !important;
    font-size: 0.95rem !important;
    width: 100%;
  }

  .ticket-form .d-flex.flex-row.justify-center{
    flex-direction: column !important;
    gap: 10px !important;
  }
}

@media (min-width: 1440px){
  .ticket-form{
    width: 650px;
    padding: 35px 45px;
  }
}

.mud-picker-toolbar,
.mud-picker-toolbar.mud-theme-primary {
    background-color: #ffffff !important;
}


.mud-picker-toolbar .mud-button-root {
    background-color: transparent !important;
    color: #14980aff !important;
    width: 100% !important;
    justify-content: center;
    font-weight: 600;
    border-radius: 16px;
    box-shadow: none !important;
}

.ticket-form .mud-input-label-outlined{
  background: white !important;
  padding: 4px!important;
  border-radius: 8px !important;
}

.ticket-form .mud-input-label-outlined.mud-input-label-shrink{
  background: #f9f9f9 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
}

.ticket-form .mud-input-control .mud-input{
  height: 80px !important;
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
}

.ticket-form .mud-input-control .mud-input input{
  padding: 0 18px !important;
  color: #fff !important;
  font-size: 1rem !important;
  text-align: start !important;
}

.ticket-form .mud-input-control .mud-input input::placeholder{
  color: #14980aff !important;
  opacity: 1 !important;
}

@media (max-width: 768px){
  .ticket-form .mud-input-control .mud-input{ height: 60px !important; }
  .ticket-form .mud-input-control .mud-input input{ padding: 0 14px !important; font-size: 16px !important; }
}


.mud-picker-toolbar .mud-button-root:hover {
    background-color: rgba(112, 224, 0, 0.08) !important;
}


.mud-picker-toolbar .mud-button-root:focus,
.mud-picker-toolbar .mud-button-root:active {
    outline: none !important;
    box-shadow: none !important;
}


/* ===================== PARTNERS ===================== */
/* .partners{
  width: 100%;
  background: #fff;
  backdrop-filter: blur(10px);
  padding: 50px 0;
  overflow: visible;
  position: relative;
  min-height: 120px;
  z-index: 2;
  clear: both;
  margin-top: 0 !important;
}

.partners-wrapper{
  width: 100%;
  overflow-x: hidden;  
  overflow-y: visible;
  background: transparent !important;
  box-shadow: none !important;
}

.partners .mud-paper,
.partners .mud-container,
.partners .mud-container-fluid{
  background: transparent !important;
  box-shadow: none !important;
}

.partners-track{
  display: flex;
  align-items: center;
  gap: 80px;
  width: max-content;
  animation: partners-scroll 25s linear infinite;
  transform: translate3d(0,0,0);
  will-change: transform;
  backface-visibility: hidden;
}

.partners-track img,
.partners-track .mud-image-root{
  height: 60px;
  width: auto;
  min-width: 100px;
  max-width: 200px;
  object-fit: contain;
  filter: grayscale(100%) brightness(120%) drop-shadow(0 2px 4px rgba(0,0,0,0.3));
  opacity: 0.9;
  transition: 0.3s;
  cursor: pointer;
  flex-shrink: 0;
}

.partners-track img:hover,
.partners-track .mud-image-root:hover{
  filter: grayscale(0%) brightness(100%);
  opacity: 1;
  transform: scale(1.05);
}

@keyframes partners-scroll{
  0% { transform: translate3d(0,0,0); }
  100% { transform: translate3d(-33.333%,0,0); }
}

@media (max-width: 768px){
  .partners{
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 30px 0;
  }
  .partners-track{
    gap: 40px;
    animation-duration: 35s;
  }
  .partners-track img,
  .partners-track .mud-image-root{
    height: 50px;
  }
}

@media (max-width: 480px){
  .partners-track img,
  .partners-track .mud-image-root{
    height: 40px;
  }
}

.partners .mud-stack,
.partners .partners-track{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}

.partners .partners-track > *,
.partners .mud-stack > *{
  flex: 0 0 auto !important;
}

.partners .mud-image-root,  
.partners img{
  width: auto !important;
  display: block !important;
} */

.partners{
  width: 100%;
  background: #fff;
  padding: 50px 0;
  min-height: 120px;
  overflow: hidden; 
}
.partners-wrapper{
  width: 100%;
  overflow: hidden;
}

.partners .partners-track,
.partners .mud-stack.partners-track{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 80px;
  width: fit-content;
  animation: partners-scroll 25s linear infinite;
  transform: translateX(0);
  will-change: transform;
}
.partners .partners-track > *{
  flex: 0 0 auto !important;
}
.partners .partners-track a{
  display: inline-flex !important;
  width: auto !important;
  align-items: center;
  text-decoration: none;
}
  .partners .partners-track img{
  display: block !important;
  width: auto !important;
  height: 60px !important;
  min-width: 100px;
  max-width: 200px;
  object-fit: contain;
  flex-shrink: 0;
  filter: grayscale(100%) brightness(120%);
  opacity: .9;
  transition: .3s;
}
.partners .partners-track img:hover{
  filter: grayscale(0%) brightness(100%);
  opacity: 1;
  transform: scale(1.05);
}
@keyframes partners-scroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-33.333%); }
}
@media (max-width: 768px){
  .partners{ padding: 30px 0; }
  .partners .partners-track{ gap: 40px; animation-duration: 35s; }
  .partners .partners-track img{ height: 50px !important; }
}
@media (max-width: 480px){
  .partners .partners-track img{ height: 40px !important; }
}

/* ===================== DESTINATIONS ===================== */
.destinations{
  position: relative;
  height: 600vh;
  z-index: 3;
  clear: both;
}

.destinations h2,
.destinations .destinations-title,
.destinations .mud-typography-h3{
  position: relative;  
  font-size: 2.4rem;
  font-weight: 700;
  color: #14980aff;
  text-align: center;
  margin: 40px 0 40px;
}

.destination{
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.destination img,
.destination .destination-image,
.destination .mud-image-root,
.destination .mud-image-root img{
  width: 70vw;
  height: 70vh;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
  filter: brightness(0.85);
  transition: transform 1s ease, filter 1s ease;
}

.destination h3,
.destination .destination-name,
.destination .mud-typography-h2{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 15px 30px;
  border-radius: 10px;
  font-size: 4rem;
  color: #fff;
  letter-spacing: 1px;
  text-align: center;
  backdrop-filter: blur(2px);
  font-weight: 700;
  margin: 0;
  z-index: 5;
}

.destination img:hover,
.destination .destination-image:hover,
.destination .mud-image-root:hover,
.destination .mud-image-root img:hover{
  transform: scale(1.05);
  filter: brightness(1);
}

@media (max-width: 768px){

  .destinations{
    height: auto;
    padding: 20px 0;
  }

  .destinations h2{
    position: relative;
    text-align: center;
    font-size: 2rem;
    color: #14980aff;
    margin-top: 10px;
    margin-bottom: 20px;
    font-weight: 700;
  }

  .destination{
    position: relative;          
    height: auto;
    margin: 0 16px 40px;
  }

  .destination img{
    width: 100%;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    display: block;
  }

  .destination h3{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;

    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    text-align: center;

    padding: 10px 18px;
    border-radius: 10px;

    
    backdrop-filter: blur(2px);
    z-index: 2;
  }
}


/* ==================== STATS SECTION  ==================== */

.stats-section{
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: 100px 0;
  text-align: center;
  z-index: 4;
  clear: both;
}


.stats-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(0,0,0,0.25) 0%, rgba(0,50,0,0.45) 100%),
    url('/images/traffic-vehicle-urban-reflections-city.jpg') center/cover no-repeat;
  filter: blur(20px);
  transform: scale(1.1);
  z-index:0;
  pointer-events:none;
}


.stats-section > *{
  position: relative;
  z-index:1;
}

.stats-container{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:120px;
  flex-wrap:wrap;
  margin-bottom:80px;
}


.stat-circle{
  width:230px;
  height:230px;
  border:3px solid rgba(255,255,255,0.4);
  border-radius:50%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  transition:all .4s ease;
  flex: 0 0 auto;
  background: rgba(0,0,0,0.10);
  backdrop-filter: blur(2px);
}

.stat-circle:hover{
  border-color:#14980aff;
  transform:scale(1.05);
}


.stat-circle .mud-typography-h2{
  font-size:3rem !important;
  font-weight:700 !important;
  color:#fff !important;
  margin:0 !important;
  line-height:1 !important;
}


.stat-circle .mud-typography-body2{
  margin-top:10px !important;
  font-size:1.3rem !important;
  color:#fff !important;
  opacity:0.85 !important;
}


.why-better{
  max-width:1100px;
  margin:0 auto;
  text-align:center;
  padding-top:50px;
}

.why-title{
  font-size:2rem;
  font-weight:700;
  color:#fff;
  letter-spacing:1px;
  margin-bottom:40px;
  text-transform:uppercase;
}

.why-columns{
  display:flex;
  justify-content:space-between;
  gap:100px;
  flex-wrap:wrap;
  text-align:left;
}

.why-left,
.why-right{
  list-style:none;
  margin:0;
  padding:0;
  flex:1;
  min-width:300px;
}

.why-left li,
.why-right li{
  font-size:1.5rem;
  color:#fff;
  margin-bottom:18px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,0.3);
}

.why-left li span,
.why-right li span{
  color:#14980aff;
  font-weight:600;
  margin-right:10px;
}

@media (max-width: 768px){

  .why-better{
    text-align: center;
    padding: 100px 20px;
  }

  .why-columns{
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .why-left,
  .why-right{
    width: 100%;
    text-align: center;
  }

  .why-left li,
  .why-right li{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: none;
    font-size: 1 rem;
    margin-bottom: 20px;
  }

  .why-left li span,
  .why-right li span{
    display: block;
    margin-bottom: 6px;
    font-size: 1.3rem;
  }
}

/* ===== SAFE ANIMATION LAYER ===== */

.anim-stat,
.anim-why{
  will-change: transform, opacity;
}

.section-animate.is-visible .anim-stat{
  animation: statsRise .6s ease forwards;
}

.section-animate.is-visible .anim-stat:nth-child(1){ animation-delay:.1s; }
.section-animate.is-visible .anim-stat:nth-child(2){ animation-delay:.25s; }
.section-animate.is-visible .anim-stat:nth-child(3){ animation-delay:.4s; }

.section-animate.is-visible .anim-why{
  animation: statsRise .6s ease forwards;
  animation-delay:.6s;
}

@keyframes statsRise{
  from{
    transform: translateY(20px);
    opacity: 0;
  }
  to{
    transform: translateY(0);
    opacity: 1;
  }
}

/* ===================== GLOBAL TYPO ===================== */
h1,
.mud-typography-h1,
.mud-typography-h1.mud-typography{
  font-size: 50px;
  font-weight: 700 !important;
}

h2,
.mud-typography-h2,
.mud-typography-h2.mud-typography{
  font-weight: 700 !important;
}


/* ===================== NAVBAR  ===================== */
.navbar{ position: relative; }

.menu-toggle{
  display: none !important;
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
  z-index: 1000;
}

.nav-links{
  display: flex;
  flex-direction: row;
  gap: 32px;
  align-items: center;
}

.nav-links.show{ display: flex; }

.desktop-actions{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.desktop-nav-links{
  display: flex;
  flex-direction: row;
  gap: 40px;
  align-items: center;
  margin-right: 20px;
}

.mobile-nav-actions{
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  width: 100%;
  margin-top: 20px;
}

@media (max-width: 1024px){

   .navbar-appbar{
    width: 100%;
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(6px);
  }

  .navbar .navbar-logo img{ height: 88px; }

  .nav-links{
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.95);
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 30px 0;
    display: none;
    z-index: 999;
    max-height: calc(100vh - 75px);
    overflow-y: auto;
  }

  .nav-links.show{ display: flex !important; }

  .nav-link-btn{
    font-size: 1rem !important;
    width: auto;
  }

  .menu-toggle{
    display: block !important;
    font-size: 1.8rem;
  }

  .desktop-actions,
  .desktop-nav-links{
    display: none;
  }

  .nav-links.show .mobile-nav-actions{
    display: flex;
  }
}
@media (max-width: 768px)  {
  .navbar .navbar-appbar{
    width: 100%;
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(6px);
  }

  .navbar .navbar-logo img{ height: 88px; }

  .nav-links{
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.95);
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 30px 0;
    display: none;
    z-index: 999;
    max-height: calc(100vh - 75px);
    overflow-y: auto;
  }

  .nav-links.show{ display: flex !important; }

  .nav-link-btn{
    font-size: 1rem !important;
    width: auto;
  }

  .menu-toggle{
    display: block !important;
    font-size: 1.8rem;
  }

  .desktop-actions,
  .desktop-nav-links{
    display: none;
  }

  .nav-links.show .mobile-nav-actions{
    display: flex;
  }
}



.mobile-nav-actions{
  width: 90%;
  max-width: 340px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.18);
}


.mobile-nav-actions .mud-input-root{
  border-radius: 999px !important;
  background: rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(10px);
}

.mobile-nav-actions .mud-input,
.mobile-nav-actions .mud-input-label,
.mobile-nav-actions .mud-select-input,
.mobile-nav-actions svg{
  color: #fff !important;
}

.mobile-nav-actions .mud-input-control{
  width: 180px;              
}

/* Login button style */
.mobile-nav-actions .mud-button-root{
  width: 100% !important;
  border-radius: 999px !important;
  padding: 12px 18px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  background: #14980aff !important;
  color: #fff !important;
}

.desktop-nav-links .mud-button{
  padding-left: 12px;
  padding-right: 12px;
}

/* ==================== TESTIMONIALS SECTION ==================== */

.testimonials{
  position: relative;
  padding: 110px 0;
  text-align: center;
  color: #fff;
  z-index: 5;
  clear: both;
}

.testimonials::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

.testimonials > *{
  position: relative;
  z-index: 1;
}

.testimonials .mud-typography-h2{
  font-size: 3rem !important;
  font-weight: 700 !important;
  margin: 0 0 40px 0 !important;
  color: #14980aff!important;
}

.testimonial-wrapper{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 0 24px;
}

.testimonial-carousel{
  position: relative;
  width: 100%;
  max-width: 860px;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* each testimonial */
.testimonial{
  width: 100%;
  max-width: 860px;
  padding: 34px 38px;
  border-radius: 18px;
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(14px);
  border: 1px solid #14980aff;
  display: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .35s ease, transform .35s ease;
}

.testimonial.active{
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.testimonial .mud-typography-body1{
  font-size: 1.25rem !important;
  line-height: 1.7 !important;
  color: #14980aff !important;
  margin: 0 !important;
}

.testimonial .mud-typography-subtitle2{
  margin-top: 18px !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #14980aff!important;
}

.carousel-btn{
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 1.6rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
  user-select: none;
}

.carousel-btn:hover{
  transform: scale(1.07);
  background: rgba(0,0,0,0.55);
  border-color: rgba(255,255,255,0.35);
}

.carousel-btn:active{
  transform: scale(0.98);
}

/* Responsive */
@media (max-width: 992px){
  .testimonials{ padding: 90px 0; }

  .testimonials .mud-typography-h2{
    font-size: 2.2rem !important;
    margin-bottom: 28px !important;
  }

  .testimonial{
    padding: 28px 26px;
  }

  .testimonial .mud-typography-body1{
    font-size: 1.1rem !important;
  }
}

@media (max-width: 768px){
  .testimonial-wrapper{
    gap: 14px;
    padding: 0 14px;
  }

  .carousel-btn{
    width: 44px;
    height: 44px;
    font-size: 1.35rem;
  }

  .testimonial-carousel{
    min-height: 280px;
  }
}

@media (max-width: 480px){
  .testimonials{ padding: 70px 0; }

  .testimonials .mud-typography-h2{
    font-size: 1.7rem !important;
  }

  .testimonial{
    border-radius: 14px;
    padding: 22px 18px;
  }

  .testimonial .mud-typography-body1{
    font-size: 1.02rem !important;
  }
}

/* ==================== CTA SECTION ==================== */

 .cta{
  position: relative;
  text-align: center;
  padding: 180px 0;
  color: #fff;
  margin: 80px;
  border-radius: 25px;
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  box-shadow: 0 8px 45px rgba(0,0,0,0.4);

  background:
    url('/images/empty-seats-by-window-train.jpg')
    center / cover no-repeat;
}

.cta::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  z-index:1;
}

.cta-content{
  position: relative;
  z-index:2;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}

.cta .mud-typography-h2{
  font-size: 2.8rem !important;
  font-weight: 700 !important;
  margin-bottom: 16px !important;
  color: #ffffff !important;
}

.cta .mud-typography-body1{
  font-size: 1.2rem !important;
  margin-bottom: 36px !important;
  color: rgba(255,255,255,0.95) !important;
}

.cta-btn{
  background-color: #14980aff!important;
  color: #ffffff !important;
  padding: 14px 38px !important;
  border-radius: 50px !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
  box-shadow: 0 4px 18px rgba(22,211,22,0.35);
  transition: background .3s ease, transform .3s ease;
  text-transform: none !important;
}

.cta-btn:hover{
  background-color: #0f900f !important;
  transform: translateY(-3px);
}



@media (max-width: 992px){
  .cta{
    padding: 140px 0;
    width: 92%;
  }

  .cta .mud-typography-h2{
    font-size: 2.2rem !important;
  }
}

@media (max-width: 768px){
  .cta{
    padding: 110px 0;
    border-radius: 18px;
  }

  .cta .mud-typography-h2{
    font-size: 1.9rem !important;
  }

  .cta .mud-typography-body1{
    font-size: 1.05rem !important;
  }
}

@media (max-width: 480px){
  .cta{
    padding: 90px 0;
  }

  .cta .mud-typography-h2{
    font-size: 1.6rem !important;
  }

  .cta-btn{
    padding: 12px 30px !important;
    font-size: 1rem !important;
  }
} 

/* ===== SWITCH ONLY  ===== */
@media (max-width: 480px){

  
  .ticket-form .d-flex.flex-row.justify-center{
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 16px !important;
  }

  
  .ticket-form .mud-switch-label{
    display: none !important;
  }

  
  .ticket-form .mud-switch{
    justify-content: flex-start !important;
    margin: 0 !important;
  }

  
  .ticket-form .mud-switch-base{
    transform: scale(0.95);
  }
}

/* ===== MOBILE TEXT FIX  ===== */
@media (max-width: 480px){

  .ticket-form{
    max-width: 100%;
    overflow-x: hidden;
  }

  .ticket-form .mud-input-label,
  .ticket-form label{
    font-size: 0.95rem !important;
    white-space: normal !important;
  }

  .ticket-form .mud-input-control .mud-input{
    font-size: 0.9rem !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .ticket-form .mud-input-control .mud-input::placeholder{
    font-size: 0.9rem !important;
  }


  body,
  .ticket-form,
  .mud-container,
  .mud-grid{
    overflow-x: hidden !important;
  }
}

/* ===================== HERO FORM DESKTOP LAYOUT ===================== */
@media (min-width: 992px){

  .ticket-form .stack-form{
    display: grid !important;
    grid-template-columns: 1fr ;
    gap: 18px 20px;
    align-items: start;
  }

  .ticket-form .field-switch{ grid-column: 1 / -1; }
  .ticket-form .field-from{ grid-column: 1 / -1; }
  .ticket-form .field-to{ grid-column: 1 / -1; }
  .ticket-form .field-departure{ grid-column: 1 / 2; }
  .ticket-form .field-return{ grid-column: 2 / 3; }
  .ticket-form .field-button{ grid-column: 1 / -1; }

  .ticket-form .field-button .mud-button{
    height: 56px !important;
    font-size: 1.1rem !important;
  }

  .ticket-form .mud-input-label,
  .ticket-form .mud-input-label-outlined{
    color: #14980aff !important;
    font-size: 0.9rem !important;
  }

  /* input wrapper */
  .ticket-form .mud-input-control .mud-input{
    height: 80px !important;
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    color: #ffffff !important;
    font-size: 1rem !important;
  }

  /* input real */
  .ticket-form .mud-input-control .mud-input input{
    padding: 0 18px !important;
    text-align: start !important; 
  }

  /* placeholder */
  .ticket-form .mud-input-control .mud-input input::placeholder{
    color: #14980aff !important;
    font-size: 1rem !important;
    opacity: 1 !important;
  }
}
@media (max-width: 768px){

  .ticket-form .mud-input-label-outlined:not(.mud-input-label-shrink){
    background-color: #ffffff !important;
  }

  .ticket-form .mud-input-label-outlined.mud-input-label-shrink{
    background-color: rgba(255,255,255,0.78) !important;
  }
  @media (max-width: 768px){
  .ticket-form .mud-input-label-outlined{
    color: #14980aff !important;
  }
}
}
.switch-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 18px;
  flex-wrap: wrap;          
  padding: 8px 14px;
}

.switch-wrap .mud-switch-label{
  white-space: nowrap;
}

@media (max-width: 520px){
  .switch-wrap{
    justify-content: flex-start;
    gap: 12px;
  }
}

@media (max-width: 420px){
  .switch-wrap .mud-switch-label{
    display: none !important;
  }
  .switch-wrap .mud-switch-base{
    transform: scale(0.95);
  }
}

.mud-container.px-lg-16{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
@media (min-width: 992px){
  .mud-container.px-lg-16{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* .hero-anim__inner{
  transform: translateY(24px);
  transition: transform .7s ease;
  visibility: hidden;
}

.hero-anim__title{
  transform: translateY(14px);
  transition: transform .7s ease .05s;
  visibility: hidden;
}

.hero-anim__form{
  transform: translateY(18px) scale(.98);
  transition: transform .7s ease .12s;
  visibility: hidden;
}

.hero-anim.is-ready .hero-anim__inner,
.hero-anim.is-ready .hero-anim__title,
.hero-anim.is-ready .hero-anim__form{
  transform: translateY(0) scale(1);
  visibility: visible;
} */


/* ===================== SERVICES PAGE ===================== */
.services-hero {
  position: relative;
  background:
    linear-gradient(rgba(0,0,0,0.5), rgba(0,50,0,0.6)),
    url('../images/row-buses-are-parked-parking-lot_875765-4740.jpg') center/cover no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
  overflow: hidden;
  min-height: 100vh;
  padding: 140px 16px 90px; 
  margin-top: -64px;
  margin-bottom: 0;
}


.services-hero-content{
  max-width: 900px;
  margin: 0 auto;
}

.services-hero h1 {
  font-size: 2.8rem;
  color: #fff;
  margin-bottom: 12px;
  line-height: 1.15;
}

.services-hero p {
  font-size: 1.2rem;
  color: rgba(255,255,255,0.92);
  line-height: 1.6;
}

 .services-hero.section-animate{
  opacity: 1;
  transform: translateY(20px);
  transition: opacity .9s ease, transform .9s ease;
  will-change: opacity, transform;
} 


/* ===================== SERVICES LIST ===================== */
.services-list {
  width: 85%;
  margin: 100px auto;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.service {
  display: flex;
  align-items: stretch; 
  gap: 40px;
  background: rgba(255,255,255,0.05);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.service img {
  width: 50%;
  height: 350px;
  object-fit: cover;
  display: block;
}

.service-text {
  width: 50%;
  padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.service-text h3 {
  color: #14980aff;
  font-size: 1.8rem;
  margin-bottom: 10px;
}

.service-text p {
  color: #14980aff;
  font-size: 1rem;
  line-height: 1.6;
}

.reverse {
  flex-direction: row-reverse;
}

/* ===================== CTA ===================== */
 .cta {
  margin: 120px auto;
  width: 85%;
  text-align: center;
  background:
    linear-gradient(rgba(0,0,0,0.5), rgba(0,50,0,0.6)),
    url('../images/empty-seats-by-window-train.jpg') center/cover no-repeat;
  border-radius: 20px;
  padding: 120px 20px;
  color: #fff;
}

.cta h2 {
  font-size: 2.4rem;
  color: #16d316;
  margin-bottom: 20px;
}

.cta p {
  font-size: 1.2rem;
  margin-bottom: 30px;
}

.cta-btn {
  display: inline-block;
  background: #16d316;
  color: #fff;
  padding: 14px 36px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s ease, transform 0.3s ease;
}

.cta-btn:hover {
  background: #0f900f;
  transform: translateY(-2px);
} 
/* SERVICES HERO TITLE FIX (MudTypography) */
.services-hero .mud-typography-h1{
  font-size: clamp(1.7rem, 6vw, 2.8rem) !important;
  line-height: 1.15 !important;
  max-width: 18ch;
  margin: 0 auto 12px;
  word-break: break-word;
  hyphens: auto;
}

@media (max-width: 768px){
  .services-hero .mud-typography-h1{
    font-size: 2rem !important;
  }
}

@media (max-width: 480px){
  .services-hero .mud-typography-h1{
    font-size: 1.7rem !important;
  }
}

@media (max-width: 1024px) {
  .services-list { width: 90%; }
  .service { gap: 30px; }
  .services-hero h1 { font-size: 27.5px; }
}

@media (max-width: 768px) {
  .services-hero {
    min-height: 75vh;      
    padding: 120px 14px 70px;
  }

  .service {
    flex-direction: column;
    text-align: center;
  }

  .service.reverse {
    flex-direction: column;
  }

  .service img {
    width: 100%;
    height: 240px;         
  }

  .service-text {
    width: 100%;
    padding: 28px 22px;    
  }

  .services-hero h1 { font-size: 2rem; }
  .services-hero p { font-size: 1rem; }

  .services-list {
    width: 92%;
    gap: 60px;
    margin: 60px auto;
  }

  .cta {
    width: 92%;
    padding: 70px 16px;
  }

  .cta h2 { font-size: 1.8rem; }
  .cta-btn { padding: 10px 25px; font-size: 1rem; }
}

@media (max-width: 480px) {
  .services-hero h1 { font-size: 1.7rem; }
  .services-hero p { font-size: 0.95rem; }

  .service-text h3 { font-size: 1.4rem; }
  .service-text p { font-size: 0.95rem; }
}

.services-hero {
  opacity: 0;
  transform: translateX(-80px);
  animation: heroSlideIn 1s ease-out forwards;
}

@keyframes heroSlideIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.service {
  opacity: 0;
  transform: translateX(-80px);
  animation: serviceSlideLeft 0.9s ease-out forwards;
}

.service.reverse {
  transform: translateX(80px);
  animation: serviceSlideRight 0.9s ease-out forwards;
}

/* stagger */
.service:nth-child(1) { animation-delay: 0.2s; }
.service:nth-child(2) { animation-delay: 0.4s; }
.service:nth-child(3) { animation-delay: 0.6s; }
.service:nth-child(4) { animation-delay: 0.8s; }

@keyframes serviceSlideLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes serviceSlideRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ===================== INFO PAGE ===================== */

/* ================= INFO HERO ================= */
.info-hero{
  position: relative;
  width: 100%;
  min-height: 100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  color:#fff;
  text-align:center;
  overflow:hidden;
  margin-top: -64px;
  background: url("../images/envato-labs-image-edit-(9).jpg") center/cover no-repeat;
}

.info-hero .overlay{
  position:absolute;
  inset:0;
  backdrop-filter: blur(2px);
  background: rgba(0,0,0,0.4);
  z-index:0;
}

.info-hero-content{
  position:relative;
  z-index:1;
  max-width: 800px;
  padding: 0 16px;
}

.info-hero .mud-typography-h1{
  font-size: 3rem !important;
  color: #2bdc2b !important;
  margin-bottom: 15px !important;
  font-weight: 700 !important;
}

.info-hero .mud-typography-body1{
  font-size: 1.2rem !important;
  color: #ddd !important;
  line-height: 1.7 !important;
}


/* ================= ABOUT ================= */
.about-section{
  width: 85%;
  margin: 120px auto;
  display:flex;
  justify-content:center;
}

.about-container{
  display:flex;
  align-items:center;
  gap: 50px;
  flex-wrap: wrap;
}

.about-text{
  flex: 1;
}

.about-text .mud-typography-h2{
  font-size: 2rem !important;
  color: #14980aff !important;
  margin-bottom: 20px !important;
  font-weight: 700 !important;
}

.about-text .mud-typography-body1{
  color: #555 !important;
  line-height: 1.7 !important;
  margin-bottom: 10px !important;
}

.about-img{
  flex: 1;
  background-color: #00c200;
  border-radius: 20px;
  overflow:hidden;
}

.about-img img,
.about-img .mud-image-root img{
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.25);
  display:block;
}


/* ================= FAQ ================= */
.faq-section{
  background: #f8f8f8;
  padding: 100px 10%;
  text-align:center;
}

/* MudText h2 */
.faq-section .mud-typography-h2{
  color: #14980aff !important;
  font-size: 2rem !important;
  margin-bottom: 40px !important;
  font-weight: 700 !important;
}

.faq-container{
  max-width: 900px;
  margin: 0 auto;
  text-align:left;
}

.faq-item{
  margin-bottom: 30px;
  background: #fff;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transition: transform 0.3s ease;
}

.faq-item:hover{
  transform: scale(1.02);
}

.faq-item .mud-typography-h3{
  font-size: 1.2rem;
  color: #222 !important;
  margin-bottom: 10px !important;
  font-weight: 700 !important;
}

.faq-item .mud-typography-body1{
  color: #666 !important;
  line-height: 1.6 !important;
}


@media (max-width: 1024px){
  .about-container{ gap: 30px; }
  .info-hero .mud-typography-h1{ font-size: 2.5rem !important; }
}

@media (max-width: 768px){
  .info-hero{ min-height: 70vh; }

  .info-hero .mud-typography-h1{ font-size: 2rem !important; }
  .info-hero .mud-typography-body1{ font-size: 1rem !important; }

  .about-container{
    flex-direction: column;
    text-align: center;
  }

  .about-text, .about-img{ width:100%; }

  .about-section{ margin: 70px auto; }

  .faq-container{ width: 90%; }

  .faq-item{ padding: 20px; }

  .faq-item .mud-typography-h3{ font-size: 1.2rem !important; }
  .faq-item .mud-typography-body1{ font-size: 0.95rem !important; }
}

@media (max-width: 480px){
  .info-hero .mud-typography-h1{ font-size: 1.7rem !important; }
  .info-hero .mud-typography-body1{ font-size: 0.95rem !important; }

  .faq-section .mud-typography-h2{ font-size: 1.6rem !important; }

  .about-text .mud-typography-h2{ font-size: 1.5rem !important; }
  .about-text .mud-typography-body1{ font-size: 0.95rem !important; }
}

/* ===== CONTACT PAGE ===== */
.contact-page{
  width: 100%;
  padding-top: 120px !important; 
}

.contact-card{
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.06);
  max-width: 780px;
}

.contact-header{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-title{
  color: #14980aff;
  font-weight: 800;
  letter-spacing: -0.3px;
  margin: 0;
}

.contact-subtitle{
  color: #6b7280;
  max-width: 52ch;
}

.contact-input .mud-input-root-outlined fieldset{
  border-color: rgba(0,0,0,0.12);
}

.contact-input .mud-input-root-outlined:hover fieldset{
  border-color: rgba(22, 211, 22, 0.45);
}

.contact-input .mud-input-root-outlined.mud-input-focused fieldset{
  border-color: #16d316;
  border-width: 2px;
}

.contact-input .mud-input-label{
  color: #6b7280;
}

.contact-input .mud-input-root-outlined.mud-input-focused .mud-input-label{
  color: #16d316;
}


.contact-textarea textarea{
  line-height: 1.5;
}


.contact-actions{
  display: flex;
  justify-content: flex-end;
}

.contact-btn{
  border-radius: 999px;
  padding: 12px 30px;
  font-weight: 700;
}

@media (max-width: 600px){
  .contact-actions{
    justify-content: stretch;
  }
  .contact-btn{
    width: 100%;
  }
}

.contact-input .mud-input-label{
  transform: translate(14px, -9px) scale(0.75) !important;
  background: white;
  padding: 0 6px;
}


.contact-input .mud-input-root-focused .mud-input-label{
  transform: translate(14px, -9px) scale(0.75) !important;
}

/* TERMS PAGE */
    .terms-section {
        margin-bottom: 30px;
    }

    .terms-card {
        padding: 30px;
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .terms-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
    }

    .section-icon {
        color: #16d316;
        margin-right: 10px;
    }

    .terms-list-item {
        padding: 12px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .terms-list-item:last-child {
        border-bottom: none;
    }

    .company-box {
        background: linear-gradient(135deg, rgba(22, 211, 22, 0.1), rgba(15, 109, 10, 0.1));
        padding: 25px;
        border-radius: 12px;
        border-left: 4px solid #16d316;
    }

    .section-number {
        display: inline-block;
        width: 35px;
        height: 35px;
        background: #16d316;
        color: white;
        border-radius: 50%;
        text-align: center;
        line-height: 35px;
        font-weight: 600;
        margin-right: 15px;
        vertical-align: middle;
    }


    @media (max-width: 1024px) {
        .terms-card {
            padding: 25px;
        }

        .section-number {
            width: 32px;
            height: 32px;
            line-height: 32px;
            font-size: 0.9rem;
            margin-right: 12px;
        }

        .company-box {
            padding: 20px;
        }
    }

    @media (max-width: 768px) {
        .terms-card {
            padding: 20px;
            border-radius: 10px;
        }

        .section-number {
            width: 30px;
            height: 30px;
            line-height: 30px;
            font-size: 0.85rem;
            margin-right: 10px;
        }

        .section-icon {
            font-size: 1.2rem;
        }

        .company-box {
            padding: 18px;
            border-radius: 10px;
        }

        .terms-list-item {
            padding: 10px 0;
        }
    }

    @media (max-width: 480px) {
        .terms-card {
            padding: 15px;
            border-radius: 8px;
        }

        .section-number {
            width: 28px;
            height: 28px;
            line-height: 28px;
            font-size: 0.8rem;
            margin-right: 8px;
        }

        .section-icon {
            font-size: 1rem;
            margin-right: 8px;
        }

        .company-box {
            padding: 15px;
            border-radius: 8px;
            border-left-width: 3px;
        }

        .terms-list-item {
            padding: 8px 0;
        }
    }
    
.terms-page{
  padding-top: 120px !important;  
}


@media (max-width: 768px){
  .terms-page{
    padding-top: 90px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .terms-page .terms-card{
    padding: 18px !important;
  }

  .terms-page .mud-typography-h3{
    font-size: 1.6rem !important;
    line-height: 1.2 !important;
  }

  .terms-page .mud-typography-subtitle1{
    font-size: 0.95rem !important;
  }

  .terms-page .mud-typography-body1{
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }
}

@media (max-width: 480px){
  .terms-page{
    padding-top: 80px !important;
  }

  .terms-page .mud-typography-h3,
  .mud-typography-h5{
    font-size: 1.2rem !important;
  }
}


/* PRIVACY PAGE */
    .privacy-section {
        margin-bottom: 30px;
    }

    .privacy-card {
        padding: 30px;
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .privacy-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
    }

    .section-icon {
        color: #16d316;
        margin-right: 10px;
    }

    .privacy-list-item {
        padding: 12px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .privacy-list-item:last-child {
        border-bottom: none;
    }

    .contact-box {
        background: linear-gradient(135deg, rgba(22, 211, 22, 0.1), rgba(15, 109, 10, 0.1));
        padding: 25px;
        border-radius: 12px;
        border-left: 4px solid #16d316;
    }

.privacy-page{
  padding-top: 120px !important;
}


@media (max-width: 768px){
  .privacy-page{
    padding-top: 90px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  
  .privacy-page .privacy-card{
    padding: 18px !important;
  }

  
  .privacy-page .mud-typography-h5{
    font-size: 1.25rem !important;
    line-height: 1.25 !important;
  }

  .privacy-page .mud-typography-body1{
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }
}

@media (max-width: 480px){
  .privacy-page{
    padding-top: 80px !important;
  }

  .privacy-page .mud-typography-h5{
    font-size: 1.15rem !important;
  }
}

/* LOGIN */
  .login-page{
    min-height: calc(100vh - 72px); 
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 28px 16px 40px;
  }

  
  .login-container{ width:100%; }
  .login-card{
    width:100%;
    border-radius: 18px;
    padding: 22px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    backdrop-filter: blur(14px);
  }

  .login-header{
    text-align:center;
    margin-bottom: 16px;
  }

  .login-logo{
    width: 210px;
    height: auto;
    display:block;
    margin: 0 auto 10px;
  }

  .login-title{ margin-top: 6px; }
  .login-subtitle{ opacity: .85; margin-top: 6px; }
  .login-register{ margin-top: 10px; opacity: .9; }

  /* Form */
  .login-form{ margin-top: 10px; }

  .login-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    flex-wrap: wrap;
  }

  .login-forgot{
    margin-left:auto;
    font-size: 0.92rem;
  }

  .login-submit{
    width: 100%;
    height: 48px;
    border-radius: 14px;
  }

  .login-demo{
    display:flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
  }

  .login-demo-btn{
    flex: 1 1 220px;
    border-radius: 14px;
  }

  @media (max-width: 480px){
    .login-card{ padding: 18px; }
    .login-logo{ width: 180px; }
  }

.search-btn{
  width: 100%;
  min-height: 52px;      
  padding: 12px 16px;    
  border-radius: 14px;   
  display: flex;
  align-items: center;
  justify-content: center;
}

.bus-icon-img{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: auto;
  transform: translate(-50%, -50%);
  transition: transform .55s ease;
  pointer-events: none;
}

.search-btn.animate .bus-icon-img{
  transform: translate(220px, -50%);
}


.ticket-wrap{
  padding: 12px;
}

.ticket-grid{
  width:100%;
  margin:0;
}


.trip-switch-wrap{
  width: 50%;
  color: #14980aff;
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 10px 14px;
  border-radius: 15px;
  background: transparent;
  border: 1px solid #14980aff;
  margin: 50px auto 10px auto; 
}


.field{
  border-radius:14px;
}

.btn-wrap{
  display:flex;
  align-items:flex-end;
}

.find-btn{
  width:100%;
  border-radius:14px;
}

@media (min-width:960px){
  .find-btn{
    width:180px;
  }
}

@media (max-width: 768px){
  .trip-switch-wrap{
    width: 100%;
  }
}

@media (max-width: 360px){
  .trip-switch-wrap{
    display: flex;
    flex-direction: column;   
    align-items: start;
    gap: 8px;
  }

  .trip-switch-wrap .mud-switch{
    transform: scale(0.9);    
  }

  .trip-switch-wrap .mud-switch-label{
    font-size: 0.85rem !important;
    white-space: nowrap;      
  }
}


.book-hero{
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 80vh;
  background:
    linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.6)),
    url('/images/envato-labs-image-edit (10).jpg') center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -70px;
  padding: 0 0 0;
}

.book-hero-overlay{
  position: absolute;
  inset: 0;
  pointer-events: none; 
}

.book-hero-content{
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  padding: 20px;
}

.book-hero-title{
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: #14980aff;
}

.book-hero-subtitle{
  font-size: 1.1rem;
  opacity: 0.95;
  margin-top: 10px;
}

.mud-container.ticket-wrap{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* /* Book Animation */

.animate-title{
  animation: slideUp 0.9s ease-out forwards;
}

.animate-subtitle{
  animation: slideUp 1.2s ease-out forwards;
}

/* KEYFRAMES */
@keyframes heroFade{
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}

@keyframes slideUp{
  from{
    opacity: 0;
    transform: translateY(20px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}


.animate-hero{
  opacity: 0;
  animation: heroFadeUp 1s ease-out forwards;
}

@keyframes heroFadeUp{
  from{
    opacity: 0;
    transform: translateY(30px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 600px) {
    .page-content {
        padding-top: 72px; 
    }
}
.swap-btn-wrap {
    position:relative;
    padding-left: 15px;
    width: 100%;
    height: 0;
    z-index: 9999;
    overflow: visible;
    text-align: right;  
    padding-right: 12px;
}
.from-to-wrapper {
    position: relative;
    width: 100% !important;
    flex: 1 1 100% !important;
    box-sizing: border-box;
}

.from-to-wrapper .mud-autocomplete,
.from-to-wrapper .mud-input-control {
    width: 100% !important;
}
.swap-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    background: #43b649;
    border-radius: 50%;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    cursor: pointer;
    overflow: hidden !important;
}

.swap-btn img {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    filter: brightness(0) invert(1);
    display: block;
    flex-shrink: 0;
}
@media (max-width: 600px) {
    .swap-btn {
        right: 8px;
        width: 30px;
        height: 30px;
    }
}

  .ticket-form .stack-form .mud-grid-item {
    grid-column: 1 / -1 !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
  }

.from-to-wrapper > div {
    position: relative !important;
}

.custom-clear-btn {
    position: absolute !important;
    right: 42px !important;
    top: 40px !important;
    transform: translateY(-50%) !important;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 5px !important;
    font-size: 18px !important;
    color: #fff !important;
    cursor: pointer !important;
    z-index: 20 !important;
    padding: 6px !important;
    line-height: 1 !important;
}

.custom-clear-btn:hover {
    color: #6e6e6e !important;
}

@media (max-width: 992px) {
    .custom-clear-btn {
        top: 40px !important;
        right: 40px !important;
    }
}

@media (max-width: 768px) {
    .custom-clear-btn {
        top: 30px !important;
        right: 36px !important;
        font-size: 16px !important;
    }
}

@media (max-width: 480px) {
    .custom-clear-btn {
        top: 30px !important;
        right: 34px !important;
        font-size: 15px !important;
    }
}