/*
Theme Name: Kuwentong Pedicab
*/

/* ===== FONTS ===== */
@font-face {
	font-family: 'Bungee';
	src: url('fonts/BungeeInline-Regular.ttf') format('truetype');
}

.push {
	font-family: 'Bungee', cursive;
	color: var(--orange);
	text-trandorm: uppercase;
}
/* ===== ROOT COLORS ===== */
:root {
	--cream: #FEF5E9;
	--orange: #FDAC1C;
	--dark: #2E1C12;
	--gray: #AFA39A;
	--black: #0F0D0F;
}

/* ===== GLOBAL ===== */
body {
	margin: 0;
	background: var(--cream);
	font-family: 'Roboto', sans-serif;
}
img {
	max-width: 100%;
	display: block;
}

/* ===== NAVBAR ===== */
.navbar {
	position: sticky;
	top: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 25px 60px;
	background: var(--dark);
	z-index: 1000;
}
.logo img {
  height: 40px;
}
.nav-menu {
	display: flex;
	position: static;
	max-height: none;
	background: none;
	backdrop-filter: none;
}
.nav-menu ul {
	display: flex;
	flex-direction: row;
	font-weight: bold;
	gap: 40px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.nav-menu li {
	display: inline-block;
}
.nav-menu a {
	text-decoration: none;
	color: var(--cream);
	font-weight: bold;
	transition: 0.3s;
}
.nav-menu a:hover {
  color: var(--orange);
}

.current-menu-item a {
  color: var(--orange);
}
.hamburger {
	display: none;
}
.hamburger span{
	display:block;
    width:100%;
    height:3px;
    background:#FEF5E9;
    border-radius:10px;
    transition:.35s;

}
.hamburger.active span:nth-child(1){

    transform:translateY(10px) rotate(45deg);

}
.hamburger.active span:nth-child(2){

    opacity:0;

}
.hamburger.active span:nth-child(3){

    transform:translateY(-10px) rotate(-45deg);

}

/* ===== HOME ===== */
/* Hero Section */
.hero{
    position:relative;
    width:100%;
    height:100vh;
    display:flex;
    align-items:center;
    background:
    linear-gradient(
    rgba(15,13,15,.55),
    rgba(15,13,15,.55)
    ),
    url("images/home/IMG_5884.jpg");
    background-size:cover;
    background-position:center;
    overflow:hidden;
}
.hero-container{
    width:100%;
    max-width:1400px;
    margin:auto;
    padding:0 80px;
    position:relative;
    z-index:2;
}
.hero-content{
    max-width:1000px;
}
.hero-title{
    line-height:.95;
    margin-bottom:30px;
}
.hero-title span{
    display:inline-block;
}
.hero-orange{
    font-family:"Bungee";
    font-size:6rem;
    color:var(--orange);
}
.hero-white{
    font-family: 'Roboto Slab', serif;
    font-size:3.2rem;
    font-weight:700;
    color:var(--cream);
}
.hero-subtitle{
    margin-top:10px;
    font-family: 'Roboto Slab', serif;
    font-size:1.35rem;
    line-height:1.8;
    color:var(--cream);
    max-width:700px;
}

/* Introduction Section*/
.introduction{
    padding:90px 0;
    background:var(--cream);
}
.intro-wrapper{
    max-width:1350px;
    margin:auto;
    padding:0 7%;
    box-sizing:border-box;
}
.intro-info{

overflow:hidden;

}
.intro-top{
    display:grid;
    grid-template-columns:300px 1fr;
    gap:70px;
    align-items:center;
}
.intro-logo{
    display:flex;
    justify-content:center;
    align-items:center;
}
.intro-logo img{
    max-width: 300px;
    align-content: center;
}
.section-title{
    font-family: "Bungee";
    font-size: clamp(1.8rem, 5vw, 3rem);
    color: var(--orange);
    margin-bottom: 20px;

    word-break: break-word;
    overflow-wrap: break-word;
}
.intro-content p{
    font-family:"Roboto";
    font-size:1rem;
    line-height:1.9;
    color:var(--brown);
    margin-bottom:18px;
}
.intro-bottom{
    display:grid;
    grid-template-columns:320px 1fr;
    gap:50px;
    align-items:start;
}
.mission-card{
    background:var(--dark);
    border:6px solid var(--orange);
    border-radius:24px;
    padding:35px;
    color:var(--cream);
    display:flex;
    flex-direction:column;
    gap:30px;
    position:relative;
}
.mission-card h3{
    font-family:"Roboto Slab";
    font-size:2rem;
    margin-bottom:15px;
    text-align:center;
}
.mission-card p{
    font-family:"Roboto";
    line-height:1.8;
    font-size:.95rem;
    text-align:center;
}
.divider{
    height:2px;
    background:rgba(255,255,255,.2);
}
.intro-image{
    width:100%;
    overflow:hidden;
    border-radius:24px;
}
.intro-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}
.info-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
}
.info-grid h3{
    font-family:"Roboto Slab";
    font-size:1.4em;
    color:var(--brown);
    margin-bottom:12px;
}
.info-grid p{
    font-family:"Roboto";
    line-height:1.8;
}

/* About Pedicabs Section*/
.about-pedicabs{
    background: #FEF5E9;
    padding:100px 0;
}
.about-wrapper{
    max-width:1350px;
    margin:auto;
    padding:0 7%;
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:70px;
    align-items:center;
    box-sizing:border-box;
}
.about-image{
    border-radius:24px;
    overflow:hidden;
}
.about-image img{
    width:100%;
    display:block;
}
.about-content{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}
.about-content .section-title{
    margin-bottom:12px;
}
.about-subtitle{
    font-family:"Roboto Slab";
    font-size:2.2rem;
    color:var(--brown);
    margin-bottom:22px;
}
.about-content p{
    font-family:"Roboto";
    line-height:1.9;
    color:var(--brown);
    margin-bottom:35px;
}
.about-content .btn-primary{
    margin-top:auto;
}

/* Stories Section Section*/
.stories{
    background:var(--cream);
    padding:100px 0;
}
.stories-wrapper{
    max-width:1350px;
    margin:auto;
    padding:0 7%;
    display:grid;
    grid-template-columns:1fr 1.15fr;
    gap:70px;
    align-items:center;
    box-sizing:border-box;
}
.stories-content{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}
.stories-subtitle{
    font-family:"Roboto Slab";
    font-size:2.2rem;
    color:var(--brown);
    margin:10px 0 22px;
}
.stories-content p{
    font-family:"Roboto";
    line-height:1.9;
    color:var(--brown);
    margin-bottom:35px;
}
.stories-video{
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 12px 30px rgba(0,0,0,.15);
}
.stories-video video{
    width:100%;
    display:block;
}

/* Daily Life */
.daily-life{
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 700px;

    background:
        linear-gradient(rgba(15,13,15,.65), rgba(15,13,15,.65)),
        url("images/home/IMG_5884.jpg") center center/cover no-repeat;

    overflow: hidden;
}
.daily-wrapper{
    width: 100%;
    max-width: 1350px;
    margin: 0 auto;
    padding: 100px 40px;
    box-sizing: border-box;
}
.daily-content{
    width: 100%;
    max-width: 560px;
}
.daily-content .section-title{
    color: var(--orange);
    margin-bottom: 15px;
}
.daily-subtitle{
    font-family: "Roboto Slab";
    font-size: 2.4rem;
    color: var(--cream);
    margin-bottom: 25px;
}
.daily-content p{
    font-family: "Roboto";
    font-size: 1.05rem;
    line-height: 1.9;
    color: var(--cream);
    margin-bottom: 35px;
}
.daily-content .btn-primary{
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Take a Ride Section*/
.take-a-ride{
    padding:100px 0;
    background:var(--cream);
}
.take-wrapper{
    max-width:1350px;
    margin:auto;
    padding:0 7%;
    box-sizing:border-box;
}
.take-header{
    text-align:center;
    max-width:800px;
    margin:0 auto 60px;
}
.take-subtitle{
    font-family:"Roboto Slab";
    font-size:2.2rem;
    color:var(--brown);
    margin:12px 0 22px;
}
.take-header p{
    font-family:"Roboto";
    line-height:1.9;
    color:var(--brown);
}
.location-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}
.location-card{
    position:relative;
    overflow:hidden;
    border-radius:24px;
    text-decoration:none;
    aspect-ratio:16/10;
}
.location-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:.4s ease;
}
.location-overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:flex-end;
    padding:25px;
    background:linear-gradient(
        transparent,
        rgba(15,13,15,.75)
    );
}
.location-overlay h4{
    font-family:"Roboto Slab";
    font-size:2rem;
    color:var(--cream);
}
.location-card:hover img{
    transform:scale(1.08);
}

/* Tips Section*/
.tips{
    padding:100px 0;
    background:#FEF5E9;
}
.tips-wrapper{
    max-width:1350px;
    margin:auto;
    padding:0 7%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
    box-sizing:border-box;
}
.tips-content{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}
.tips-subtitle{
    font-family:"Roboto Slab";
    font-size:2.2rem;
    color:var(--brown);
    margin:12px 0 22px;
}
.tips-content p{
    font-family:"Roboto";
    line-height:1.9;
    color:var(--brown);
}
.tips-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
}
.tips-card{
    position:relative;
    overflow:hidden;
    border-radius:24px;
    text-decoration:none;
    aspect-ratio:1/1;
}
.tips-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:.4s;
}
.tips-overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:flex-end;
    padding:20px;
    background:linear-gradient(
        transparent,
        rgba(15,13,15,.75)
    );
}
.tips-overlay h4{
    font-family:"Roboto Slab";
    color:white;
    font-size:1.3rem;
}
.guide-card{
    background:var(--orange);
    border-radius:24px;
    display:flex;
    justify-content:center;
    align-items:center;
    text-decoration:none;
    aspect-ratio:1/1;
    transition:.3s;
}
.guide-card span{
    font-family:"Bungee";
    text-align:center;
    color:var(--black);
    font-size:1.3rem;
    line-height:1.5;
}
.guide-card:hover{
    transform:translateY(-6px);
}
.tips-card:hover img

/* Reflection & Team Section*/
.homepage-ending{
    background:var(--cream);
    padding:100px 0;
}
.ending-wrapper{
    max-width:1350px;
    margin:auto;
    padding:0 7%;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:35px;
    box-sizing:border-box;
}
.ending-card{
    background: #2E1C12;
    border-radius:24px;
    padding:50px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
    min-height:340px;
}
.ending-card .section-title{
    margin-bottom:25px;
}
.ending-card p{
    font-family:"Roboto";
    line-height:1.9;
    color: #FEF5E9;
    margin-bottom:40px;
}
.ending-card .btn-primary{
    align-self:flex-start;
    background: var(--orange);
    font-family:"Roboto";
    border-radius: 50px;
    font-weight:bold;
    text-decoration:none;
    box-sizing:border-box;
}

.btn-primary{
    display:inline-block;

    margin-top:15px;

    padding:15px 35px;

    background:var(--orange);

    color:#fff;

    text-decoration:none;

    border-radius:50px;

    font-weight:600;

    transition:.3s;
    box-sizing:border-box;

}
.btn-primary:hover{

    transform:translateY(-3px);

}

/* ===== ABOUT PEDICABS ===== */
.pedicab-hero{

    position:relative;

    min-height:85vh;

    display:flex;

    align-items:center;

    background:url("images/about-pedicabs/hero.jpg") center/cover no-repeat;

}
.pedicab-hero-overlay{

    position:absolute;

    inset:0;

    background:rgba(15,13,15,.55);

}
.pedicab-hero-wrapper{

    position:relative;

    z-index:2;

    max-width:1350px;

    width:100%;

    margin:auto;

    padding:0 7%;

    box-sizing:border-box;

}
.pedicab-hero-content{

    max-width:650px;

}
.pedicab-label{

    display:inline-block;

    font-family:"Roboto";

    letter-spacing:2px;

    text-transform:uppercase;

    color:var(--orange);

    margin-bottom:15px;

}
.pedicab-hero h1{

    font-family:"Bungee";

    color:var(--orange);

    font-size:3.5rem;

    line-height:1.1;

    margin-bottom:15px;

}
.pedicab-hero h2{

    font-family:"Roboto Slab";

    color:#FEF5E9;

    font-size:2rem;

    line-height:1.3;

    margin-bottom:25px;

    font-weight:700;

}
.pedicab-hero p{

    font-family:"Roboto";

    color:#FEF5E9;

    line-height:1.9;

    max-width:600px;

}

.what-pedicab{

    padding:120px 0;

    background:var(--cream);

}
.what-pedicab-wrapper{

    max-width:1350px;

    width:100%;

    margin:auto;

    padding:0 7%;

    box-sizing:border-box;

}
.what-pedicab-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}
.what-pedicab-image{

    position:relative;

}
.what-pedicab-image img{

    width:100%;

    border-radius:24px;

    display:block;

}
.what-pedicab-content span{

    display:inline-block;

    color:var(--orange);

    text-transform:uppercase;

    letter-spacing:2px;

    font-family:"Roboto";

    margin-bottom:15px;

}
.what-pedicab-content h2{

    font-family:"Bungee";

    color:#FDAC1C;

    font-size:3rem;

    line-height:1.15;

    margin-bottom:25px;

}
.what-pedicab-content p{

    font-family:"Roboto";

    color:#2E1C12;

    line-height:1.9;

}

.pedicab-history{
    padding:120px 0;

    background:#2E1C12;

}
.pedicab-history-wrapper{

    max-width:1200px;

    margin:auto;

    padding:0 7%;

}
.pedicab-history-heading{

    max-width:750px;

    margin:auto;

    text-align:center;

    margin-bottom:80px;

}
.pedicab-history-heading span{

    color:var(--orange);

    letter-spacing:2px;

    text-transform:uppercase;

}
.pedicab-history-heading h2{

    font-family:"Bungee";

    color:#FDAC1C;

    font-size:3rem;

    margin:20px 0;

}
.pedicab-history-heading p{

    line-height:1.9;
    color: #FEF5E9;

}

.history-timeline{

    position:relative;

    max-width:900px;

    margin:auto;

}
.history-timeline::before{

    content:"";

    position:absolute;

    left:120px;

    top:0;

    bottom:0;

    width:4px;

    background:var(--orange);

}

.history-item{

    display:flex;

    gap:60px;

    position:relative;

    margin-bottom:70px;

}
.history-year{

    width:120px;

    font-family:"Bungee";

    color:var(--orange);

    font-size:1.2rem;

    flex-shrink:0;

}
.history-content{

    background:var(--cream);

    padding:30px;

    border-radius:20px;

    position:relative;

}
.history-content::before{

    content:"";

    position:absolute;

    left:-42px;

    top:32px;

    width:20px;

    height:20px;

    border-radius:50%;

    background:var(--orange);

}

.history-content h3{

    font-family:"Roboto Slab";

    color:#2E1C12;

    margin-bottom:15px;

}
.history-content p{

    line-height:1.8;
    color:#2E1C12;

}

.history-reference{
    text-align:center;

    margin-top:60px;

}
.history-reference button{

    background:var(--orange);

    color:white;

    border:none;

    padding:15px 30px;

    border-radius:50px;

    cursor:pointer;

    font-family:"Roboto";

    transition:.3s;

}
.history-reference button:hover{

    transform:translateY(-3px);

}

.history-reference-modal{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.65);

    justify-content:center;

    align-items:center;

    z-index:9999;

}
.history-reference-content{

    position:relative;

    width:min(700px,90%);

    background:white;

    border-radius:25px;

    padding:40px;

}
.history-reference-content h3{

    font-family:"Roboto Slab";

    color:var(--brown);

    margin-bottom:25px;

}
.history-reference-content ol{

    padding-left:20px;

}
.history-reference-content li{

    margin-bottom:15px;

    line-height:1.8;

}
#closeHistoryReference{

    position:absolute;

    right:20px;

    top:15px;

    font-size:2rem;

    cursor:pointer;

}

.pedicab-unique{

    padding:120px 0;

    background:var(--cream);

}
.pedicab-unique-wrapper{

    max-width:1350px;

    width:100%;

    margin:auto;

    padding:0 7%;

    box-sizing:border-box;

}
.pedicab-unique-heading{

    max-width:760px;

    margin:auto;

    text-align:center;

    margin-bottom:70px;

}
.pedicab-unique-heading span{

    color:var(--orange);

    text-transform:uppercase;

    letter-spacing:2px;

}
.pedicab-unique-heading h2{

    font-family:"Bungee";

    color:#FDAC1C;

    font-size:3rem;

    margin:20px 0;

}
.pedicab-unique-heading p{

    line-height:1.9;
    
    color: #2E1C12;

}

.pedicab-unique-grid{
    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:35px;

}
.unique-card{

    background:#2E1C12;

    border-radius:22px;

    overflow:hidden;

    transition:.3s;

    box-shadow:0 10px 30px rgba(0,0,0,.06);

}
.unique-card:hover{

    transform:translateY(-8px);

}
.unique-card img{

    width:100%;

    height:260px;

    object-fit:cover;

}
.unique-content{

    padding:30px;

}
.unique-content h3{

    font-family:"Roboto Slab";

    color:#FDAC1C;

    margin-bottom:18px;

}
.unique-content p{

    line-height:1.8;
    
    color: #FEF5E9;

}

.pedicab-community{

    padding:120px 0;

    background:#2E1C12;

}
.pedicab-community-wrapper{

    max-width:1350px;

    width:100%;

    margin:auto;

    padding:0 7%;

    box-sizing:border-box;

}
.pedicab-community-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}
.pedicab-community-image img{

    width:100%;

    display:block;

    border-radius:24px;

    object-fit:cover;

}
.pedicab-community-content span{

    display:inline-block;

    color:var(--orange);

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:15px;

}
.pedicab-community-content h2{

    font-family:"Bungee";

    color:#FDAC1C;

    font-size:3rem;

    line-height:1.15;

    margin-bottom:25px;

}
.pedicab-community-content p{

    line-height:1.9;

    color:#FEF5E9;

    margin-bottom:20px;

}

.pedicab-decline{

    padding:120px 0;

    background:var(--cream);

}
.pedicab-decline-wrapper{

    max-width:1350px;

    width:100%;

    margin:auto;

    padding:0 7%;

    box-sizing:border-box;

}
.pedicab-decline-heading{

    max-width:760px;

    margin:auto;

    text-align:center;

    margin-bottom:70px;

}
.pedicab-decline-heading span{

    display:inline-block;

    color:var(--orange);

    text-transform:uppercase;

    letter-spacing:2px;

    margin-bottom:15px;

}
.pedicab-decline-heading h2{

    font-family:"Bungee";

    color:#FDAC1C;

    font-size:3rem;

    line-height:1.15;

    margin-bottom:25px;

}
.pedicab-decline-heading p{

    color:#2E1C12;

    line-height:1.9;

}

.pedicab-decline-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

}
.decline-card{

    background:#2E1C12;

    padding:35px;

    border-radius:22px;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

    transition:.3s;

}
.decline-card:hover{

    transform:translateY(-6px);

}
.decline-icon{

    font-size:2rem;

    margin-bottom:20px;

}
.decline-card h3{

    font-family:"Roboto Slab";

    color:#FDAC1C;

    margin-bottom:15px;

}
.decline-card p{

    color:#FEF5E9;

    line-height:1.8;

}

.decline-cta{

    text-align:center;

    margin-top:70px;

}
.decline-cta p{

    margin-bottom:20px;

    color:var(--brown);

}
.decline-button{

    display:inline-block;

    background:var(--orange);

    color:#fff;

    text-decoration:none;

    padding:15px 35px;

    border-radius:50px;

    transition:.3s;

    font-weight:600;
    box-sizing:border-box;

}
.decline-button:hover{

    transform:translateY(-3px);

}

.pedicab-matter{

    padding:120px 0;

    background:#FEF5E9;

}
.pedicab-matter-wrapper{

    max-width:1350px;

    width:100%;

    margin:auto;

    padding:0 7%;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

    box-sizing:border-box;

}
.pedicab-matter-content span{

    display:inline-block;

    color:var(--orange);

    text-transform:uppercase;

    letter-spacing:2px;

    margin-bottom:15px;

}
.pedicab-matter-content h2{

    font-family:"Bungee";

    color:#FDAC1C;

    font-size:3rem;

    line-height:1.15;

    margin-bottom:25px;

}
.pedicab-matter-content p{

    color:#2E1C12;

    line-height:1.9;

    margin-bottom:20px;

}
.pedicab-matter-image img{

    width:100%;

    display:block;

    border-radius:24px;

    object-fit:cover;

}

.matter-button{

    display:inline-block;

    margin-top:15px;

    padding:15px 35px;

    background:var(--orange);

    color:#fff;

    text-decoration:none;

    border-radius:50px;

    font-weight:600;

    transition:.3s;
    box-sizing:border-box;

}
.matter-button:hover{

    transform:translateY(-3px);

}

.pedicab-cta{

    position:relative;

    background:url("images/about-pedicabs/pedicab-cta.png") center center/cover no-repeat;

    padding:180px 0;

    overflow:hidden;

}
.pedicab-cta-overlay{

    position:absolute;

    inset:0;

    background:rgba(15,13,15,.72);

}
.pedicab-cta-wrapper{

    position:relative;

    z-index:2;

    max-width:1350px;

    width:100%;

    margin:auto;

    padding:0 7%;

    box-sizing:border-box;

}
.pedicab-cta-content{

    max-width:750px;

    margin:auto;

    text-align:center;

}
.pedicab-cta-content span{

    display:inline-block;

    color:var(--orange);

    text-transform:uppercase;

    letter-spacing:2px;

    margin-bottom:15px;

}
.pedicab-cta-content h2{

    font-family:"Bungee";

    color:#FDAC1C;

    font-size:3.5rem;

    line-height:1.15;

    margin-bottom:30px;

}
.pedicab-cta-content p{

    color:#FEF5E9;

    line-height:1.9;

    margin-bottom:40px;

}

.pedicab-cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}
.cta-primary{

    background:var(--orange);

    color:#fff;

    text-decoration:none;

    padding:16px 36px;

    border-radius:50px;

    transition:.3s;

    font-weight:600;
    box-sizing:border-box;

}
.cta-primary:hover{

    transform:translateY(-4px);

}
.cta-secondary{

    background:transparent;

    border:2px solid #fff;

    color:#fff;

    text-decoration:none;

    padding:16px 36px;

    border-radius:50px;

    transition:.3s;
    box-sizing:border-box;

}
.cta-secondary:hover{

    background:#fff;

    color:var(--brown);

}

/* ===== STORIES ===== */
.stories-hero{

    position:relative;

    min-height:700px;

    display:flex;

    align-items:center;

    background:url("images/stories/stories-hero.png")
    center center/cover no-repeat;

    overflow:hidden;

}
.stories-overlay{

    position:absolute;

    inset:0;

    background:rgba(15,13,15,.55);

}
.stories-wrapper{

    position:relative;

    z-index:2;

    width:100%;

    max-width:1350px;

    margin:auto;

    padding:120px 7% 100px;

    box-sizing:border-box;

}
.stories-content{

    max-width:800px;

}
.stories-label{

    display:inline-block;

    font-family:"Roboto";

    font-size:.9rem;

    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;

    color:var(--orange);

    margin-bottom:18px;

}
.stories-title{

    font-family:"Bungee";

    font-size:4.2rem;

    line-height:1.2;

    color:var(--orange);

    margin-bottom:30px;

}
.stories-description{

    font-family:"Roboto";

    font-size:1.15rem;

    line-height:1.9;

    color:#FEF5E9;

    margin-bottom:30px;

}
.stories-note{

    font-family:"Roboto";

    font-size:.9rem;

    line-height:1.8;

    color:rgba(254,245,233,.85);

    max-width:650px;

}

.featured-documentary{

    background:var(--cream);

    padding:110px 0;

}
.featured-documentary-wrapper{

    max-width:1350px;

    margin:auto;

    padding:0 7%;

    box-sizing:border-box;

}
.documentary-card{

    position:relative;

    display:block;

    overflow:hidden;

    border-radius:28px;

    text-decoration:none;

}
.documentary-card img{

    width:100%;

    height:650px;

    object-fit:cover;

    display:block;

    transition:.4s;

}
.documentary-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(15,13,15,.25),
        rgba(15,13,15,.65)
    );

}
.documentary-card:hover img{

    transform:scale(1.05);

}
.documentary-play{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:110px;

    height:110px;

    border:5px solid var(--cream);

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    backdrop-filter:blur(6px);

    transition:.3s;

}
.documentary-play i{

    font-size:2.5rem;

    color:var(--cream);

    margin-left:8px;

}
.documentary-card:hover .documentary-play{

    transform:translate(-50%,-50%) scale(1.08);

}
.documentary-content{

    position:absolute;

    left:60px;

    bottom:55px;

    max-width:520px;

    z-index:2;

}
.documentary-label{

    display:inline-block;

    font-family:"Roboto";

    font-size:.9rem;

    letter-spacing:1.5px;

    color:var(--orange);

    text-transform:uppercase;

    margin-bottom:15px;

}
.documentary-content h2{

    font-family:"Bungee";

    color:var(--orange);

    font-size:3rem;

    line-height:1.1;

    margin-bottom:18px;

}
.documentary-content p{

    font-family:"Roboto";

    color:var(--cream);

    line-height:1.8;

}

.voices-road{

    padding:110px 0;

    background:var(--cream);

}
.voices-road-wrapper{

    max-width:1350px;

    margin:auto;

    padding:0 7%;

}
.voices-road-subtitle{

    font-family:"Roboto Slab";

    font-size:2.3rem;

    color:var(--orange);

    text-align:center;

    margin:15px 0 20px;

}
.voices-road .section-title {
    text-align: center;
    width: 100%;
}
.voices-road-description{

    max-width:760px;

    margin:auto;

    text-align:center;

    font-family:"Roboto";

    line-height:1.9;

    color:var(--brown);

    margin-bottom:60px;

}
.voices-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.voice-card{

    position:relative;

    border:none;

    padding:0;

    cursor:pointer;

    overflow:hidden;

    border-radius:24px;

    background:none;

}
.voice-card img{

    width:100%;

    height:420px;

    object-fit:cover;

    display:block;

    transition:.4s;

}
.voice-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        rgba(15,13,15,.15),

        rgba(15,13,15,.85)

    );

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:30px;

}
.voice-card:hover img{

    transform:scale(1.08);

}
.voice-category{

    display:inline-block;

    align-self:flex-start;

    padding:6px 14px;

    border-radius:30px;

    background:var(--orange);

    color:var(--black);

    font-family:"Roboto";

    font-size:.8rem;

    font-weight:bold;

    margin-bottom:18px;

}
.voice-overlay h4{

    font-family:"Roboto Slab";

    color:white;

    font-size:1.5rem;

    line-height:1.5;

    margin-bottom:20px;

}
.watch-story{

    font-family:"Roboto";

    color:var(--orange);

    font-weight:700;

}

.story-modal{

    position:fixed;

    inset:0;

    background:rgba(15,13,15,.82);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:99999;

}
.story-modal.active{

    opacity:1;

    visibility:visible;

}
.story-modal-container{

    position:relative;

    width:min(1200px,90%);

    background:var(--cream);

    border-radius:24px;

    overflow:hidden;

    transform:translateY(20px);

    transition:.3s;

}
.story-modal.active .story-modal-container{

    transform:translateY(0);

}
.story-close{

    position:absolute;

    top:18px;

    right:18px;

    width:45px;

    height:45px;

    border:none;

    border-radius:50%;

    background:var(--orange);

    color:var(--black);

    cursor:pointer;

    z-index:20;

}
.story-close i{

    font-size:1.2rem;

}
.story-modal-grid{

    display:grid;

    grid-template-columns:1.1fr .9fr;

}
.story-video{

    background:black;

}
.story-video iframe{

    width:100%;

    height:550px;

    border:none;

}
.story-content{

    padding:60px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}
.story-label{

    display:inline-block;

    font-family:"Roboto";

    text-transform:uppercase;

    color:var(--orange);

    font-size:.85rem;

    letter-spacing:2px;

    margin-bottom:20px;

}
.story-content h2{

    font-family:"Roboto Slab";

    font-size:2rem;

    color:var(--brown);

    line-height:1.4;

    margin-bottom:25px;

}
.story-content p{

    font-family:"Roboto";

    line-height:1.9;

    color:var(--brown);

    margin-bottom:35px;

}
.story-timestamp{

    display:flex;

    align-items:center;

    gap:12px;

    color:var(--orange);

    font-family:"Roboto Slab";

    font-size:1rem;

}

/* ===== ROUTES-PAGE ===== */
.routes-filter {
  background: #2E1C12;
  color: white;
  padding: 60px;
  border-radius: 20px;
  text-align: center;
  margin: 60px;
}
.routes-filter h2 {
	font-family: 'Roboto Slab', serif;
	color: #FFAC1C;
	font-size: 28px;
	margin-bottom: 10px;
}
.legend {
  margin: 15px 0;
}
.dot {
  height: 10px;
  width: 10px;
  border-radius: 50%;
}
.green { background: green; }
.orange { background: orange; }
.red { background: red; }
.filter-buttons button {
	background: #2E1C12;
	color: #FEF4E9;
	border: 2px solid #FEF4E9;
	padding: 10px 20px;
	border-radius: 12px;
	margin: 10px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.filter-buttons button.active {
	color: #FFAC1C;
	border-color: #FFAC1C;
}
.routes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  padding: 60px;
}
.route-card {
  position: relative;
  cursor: pointer;
}
.route-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 15px;
}
.route-card h4.route-subheading{
	position: absolute;
	bottom: 10px;
	left: 10px;
	color: #FFAC1C;
	font-weight: bold;
	font-size: 16px;
	margin: 0;
}
.route-card p {
	position: static;
	color: #333;
	margin-top: 5px;
}
.route-card.hidden {
	display: none;
}
.load-more {
	text-align: center;
	cursor: pointer;
	margin: 40px 0;
}
.load-more h3 {
	font-family: 'Roboto Slab', serif;
	color: #2E1C13;
}
.load-more .arrow {
	display: block;
	font-size: 20px;
	margin-top: 5px;
}
.route-modal {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	backdrop-filter: blur(8px);
	background: rgba(0, 0, 0, 0.5);
	z-index: 1000;
	width: 90%;
	height: auto;
}
.modal-content {
	display: flex;
	flex-wrap: nowrap;
	gap: 20px;
	background: white;
	border-radius: 15px;
	padding: 20px;
	align-items: flex-start;
}
.modal-content img {
	width: 50%;
	border-radius: 10px;
}
.modal-text {
	width: 50%;
	display: flex;
	flex-direction: column;
}
.modal-text h4 {
	font-family: 'Roboto Slab', serif;
	color: #2E1C12;
	margin-bottom: 10px;
}
.modal-text p {
	color: #333;
}
.modal-text a {
	color: #FFAC1C;
	display: inline-block;
	margin-top: 10px;
}
#closeModal {
	position: absolute;
	top: 10px;
	right: 15px;
	font-size: 25px;
	cursor: pointer;
}

/* ===== PROBLEM ===== */
.policy-section {
  display: flex;
  align-items: center;
  padding: 60px;
  gap: 40px;
}
.policy-img img {
	max-width: 450px;
	border-radius: 15px;
}
.policy-text h2 {
  font-family: 'Roboto Slab', serif;
  font-size: 28px;
}
.policy-text p {
  margin-top: 15px;
  line-height: 1.6;
}
.infra-section {
  background: url('images/problems/IMG_3008.PNG') center/cover no-repeat;
  height: 620px;
  position: relative;
	margin: 80px 0;
}
.infra-overlay {
  background: rgba(0,0,0,0.6);
  height: 500px;
  padding: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.infra-overlay h2 {
  font-family: 'Roboto Slab', serif;
  color: #FFAC1C;
  font-size: 28px;
}
.infra-overlay p {
  color: #fff;
  max-width: 600px;
  margin-top: 15px;
}
.income-section {
  display: flex;
  align-items: center;
  padding: 60px;
  gap: 40px;
}
.income-text {
  max-width: 600px;
}
.income-text h2 {
  font-family: 'Roboto Slab', serif;
  font-size: 28px;
}
.income-text p {
  margin-top: 15px;
}
.income-img img {
	max-width: 450px;
	border-radius: 15px;
}
.source-note {
    max-width: 800px;
    margin: 80px auto 40px auto; /* center horizontally + spacing */
    padding: 0 20px;
    text-align: center;
}
.source-note p {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #777; /* muted tone */
}
.source-note em {
    font-family: 'Roboto Slab', serif;
    font-style: italic;
    color: #555;
}

/* ===== DAILY LIFE =====*/
.daily-hero{

    position:relative;

    min-height:90vh;

    display:flex;

    align-items:center;

    background:url("images/daily-life/daily-hero.png") center center/cover no-repeat;

}
.daily-overlay{

    position:absolute;

    inset:0;

    background:rgba(15,13,15,.58);

}
.daily-wrapper{

    position:relative;

    z-index:2;

    max-width:1350px;

    width:100%;

    margin:auto;

    padding:0 7%;

    box-sizing:border-box;

}
.daily-content{

    max-width:800px;

}
.daily-label{

    display:inline-block;

    padding:8px 18px;

    background:rgba(253,172,28,.18);

    border:1px solid rgba(253,172,28,.4);

    color:var(--orange);

    border-radius:999px;

    font-family:"Roboto";

    font-size:.9rem;

    letter-spacing:1px;

    margin-bottom:20px;

}
.daily-content h1{

    font-family:"Bungee";

    color:var(--orange);

    font-size:4rem;

    line-height:1.1;

    margin-bottom:25px;

}
.daily-subtitle h2{

    font-family:"Roboto Slab";

    color:#FEF5E9;

    font-size:2rem;

    line-height:1.4;

    margin-bottom:20px;

}
.daily-description{

    font-family:"Roboto";

    color:#FDAC1C;

    font-size:1rem;

    line-height:1.9;

    max-width:620px;

}

.city-remembers{

    padding:120px 0;

    background:var(--cream);

}
.city-remembers-wrapper{

    max-width:1350px;

    width:100%;

    margin:auto;

    padding:0 7%;

    box-sizing:border-box;

}
.city-remembers-grid{

    display:grid;

    grid-template-columns:1.2fr .9fr;

    gap:70px;

    align-items:start;

}
.city-text h2{

    font-family:"Bungee";

    font-size:3rem;

    line-height:1.15;

    color:#FDAC1C;

    margin-bottom:35px;

}
.city-text p{

    font-family:"Roboto";

    color:#2E1C12;

    line-height:2;

    margin-bottom:25px;

    font-size:1rem;

}
.city-media img{

    width:100%;

    border-radius:20px;

    display:block;

    margin-bottom:25px;

    box-shadow:0 18px 40px rgba(0,0,0,.15);

}
.research-stat{

    display:flex;

    align-items:center;

    gap:20px;

    padding:20px 25px;

    margin-bottom:15px;

    border-radius:18px;

    background:white;

}
.research-stat.orange{

    background:var(--orange);

}
.research-stat.dark{

    background:#2E1C12;

    color:white;

}
.research-stat.dark p {

    color:#FEF5E9;

}
.research-stat.dark span {

    color:#FEF5E9;

}
.research-stat span{

    font-family:"Bungee";

    font-size:2.4rem;

    line-height:1;

    flex-shrink:0;
    
    color: #2E1C12;

}
.research-stat p{

    font-family:"Roboto";

    line-height:1.6;

    margin:0;
    
    color: #2E1C12;

}

.daily-divider{

    position:relative;

    padding:140px 0;

    background:url("images/daily-life/daily-divider.png") center center/cover no-repeat;

}
.daily-divider-overlay{

    position:absolute;

    inset:0;

    background:rgba(46,28,18,.82);

}
.daily-divider-wrapper{

    position:relative;

    z-index:2;

    max-width:1350px;

    width:100%;

    margin:auto;

    padding:0 7%;

    box-sizing:border-box;

}
.daily-divider-content{

    max-width:900px;

    margin:auto;

    text-align:center;

}
.daily-divider-content img{

   display: block;

    width: 100px;
    height: auto;

    margin: 0 auto 35px;

    object-fit: contain;

}
.daily-divider-content blockquote{

    font-family:"Roboto Slab";

    font-size:2rem;

    line-height:1.8;

    color:#FEF5E9;

    font-style:italic;

}

.daily-challenges{

    padding:120px 0;

    background:var(--cream);

}
.daily-challenges-wrapper{

    max-width:1350px;

    width:100%;

    margin:auto;

    padding:0 7%;

    box-sizing:border-box;

}
.daily-challenges-heading{

    text-align:center;

    max-width:800px;

    margin:0 auto 70px;

}
.daily-challenges-heading span{

    display:inline-block;

    font-family:"Roboto";

    color:var(--orange);

    font-size:.9rem;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:15px;

}
.daily-challenges-heading h2{

    font-family:"Bungee";

    font-size:3rem;

    line-height:1.2;

    color:#FDAC1C;

    margin-bottom:20px;

}
.daily-challenges-heading p{

    font-family:"Roboto";

    color:#2E1C12;

    line-height:1.9;

}
.challenge-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:35px;

}
.challenge-card{

    background:#2E1C12;

    border-radius:24px;

    padding:40px;

    border:1px solid rgba(0,0,0,.08);

    transition:.35s ease;

    display:flex;

    flex-direction:column;

}
.challenge-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 40px rgba(0,0,0,.12);

}
.challenge-number{

    width:60px;

    height:60px;

    border-radius:50%;

    background:var(--orange);

    color:var(--black);

    font-family:"Bungee";

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:25px;

}
.challenge-card h3{

    font-family:"Roboto Slab";

    font-size:1.6rem;

    color:#FDAC1C;

    margin-bottom:20px;

}
.challenge-card p{

    font-family:"Roboto";

    color:#FEF5E9;

    line-height:1.9;

    margin-bottom:20px;

    flex-grow:1;

}
.challenge-card blockquote{

    font-family:"Roboto Slab";

    font-size:1.15rem;

    color:var(--orange);

    border-left:4px solid var(--orange);

    padding-left:18px;

    margin:10px 0;

    font-style:italic;

}
.challenge-card span{

    font-family:"Roboto";

    color:var(--gray);

    font-size:.95rem;

}
.challenge-conclusion{

    margin-top:70px;

    padding:45px;

    background:var(--brown);

    border-radius:24px;

    text-align:center;

}
.challenge-conclusion p{

    margin:0;

    font-family:"Roboto Slab";

    font-size:1.4rem;

    line-height:1.8;

    color:#FDAC1C;

}

.continue-moving{

    padding:120px 0;

    background:var(--brown);

}
.continue-moving-wrapper{

    max-width:1350px;

    width:100%;

    margin:auto;

    padding:0 7%;

    box-sizing:border-box;

}
.continue-heading{

    text-align:center;

    max-width:850px;

    margin:0 auto 70px;

}
.continue-heading span{

    color:var(--orange);

    font-family:"Roboto";

    letter-spacing:2px;

    text-transform:uppercase;

}
.continue-heading h2{

    font-family:"Bungee";

    color:#FDAC1C;

    font-size:3rem;

    margin:20px 0;

    line-height:1.2;

}
.continue-heading p{

    font-family:"Roboto";

    color:#2E1C12;

    line-height:1.9;

}
.continue-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}
.continue-card{

    background: #2E1C12;

    border:1px solid rgba(255,255,255,.12);

    border-radius:22px;

    padding:35px;

    transition:.35s;

}
.continue-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 40px rgba(0,0,0,.12);

}
.continue-card i{

    font-size:2rem;

    color:var(--orange);

    margin-bottom:20px;

}
.continue-card h3{

    font-family:"Roboto Slab";

    color:#FDAC1C;

    margin-bottom:18px;

}
.continue-card p{

    font-family:"Roboto";

    color:#FEF5E9;

    line-height:1.9;

}
.continue-conclusion{

    margin-top:70px;

    text-align:center;

    max-width:900px;

    margin-left:auto;

    margin-right:auto;

}
.continue-conclusion p{

    font-family:"Roboto Slab";

    color:var(--orange);

    font-size:1.4rem;

    line-height:1.8;

}

.still-needed{

    position:relative;

    padding:140px 0;

    background:url("images/daily-life/still-needed.png") center center/cover no-repeat;

}
.still-needed-overlay{

    position:absolute;

    inset:0;

    background:rgba(15,13,15,.72);

}
.still-needed-wrapper{

    position:relative;

    z-index:2;

    max-width:1350px;

    width:100%;

    margin:auto;

    padding:0 7%;

    box-sizing:border-box;

}
.still-needed-content{

    text-align:center;

    max-width:850px;

    margin:0 auto 70px;

}
.still-needed-content span{

    color:var(--orange);

    font-family:"Roboto";

    letter-spacing:2px;

    text-transform:uppercase;

}
.still-needed-content h2{

    font-family:"Bungee";

    color:#FDAC1C;

    font-size:3rem;

    line-height:1.2;

    margin:20px 0;

}
.still-description{

    color:#FEF5E9;

    font-family:"Roboto";

    line-height:1.9;

    margin-bottom:20px;

}
.still-source{

    color:#FDAC1C;

    font-family:"Roboto";

    line-height:1.8;

}
.still-stats{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

    margin-bottom:70px;

}
.still-stat{

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,.15);

    border-radius:22px;

    padding:40px 30px;

    text-align:center;

}
.still-stat h3{

    font-family:"Bungee";

    font-size:3rem;

    color:var(--orange);

    margin-bottom:20px;

}
.still-stat p{

    color:#FEF5E9;

    font-family:"Roboto";

    line-height:1.8;

}
.still-quote{

    max-width:900px;

    margin:auto;

    text-align:center;

}
.still-quote blockquote{

    font-family:"Roboto Slab";

    font-size:2rem;

    color:white;

    line-height:1.8;

    font-style:italic;

    margin-bottom:20px;

}
.still-quote span{

    color:var(--orange);

    font-family:"Roboto";

}

.research-acknowledgement{

    padding:120px 0;

    background:var(--cream);

}
.research-acknowledgement-wrapper{

    max-width:1350px;

    width:100%;

    margin:auto;

    padding:0 7%;

    box-sizing:border-box;

}
.research-acknowledgement-content{

    max-width:900px;

    margin:auto;

    text-align:center;

}
.research-icon{

    width:90px;

    height:90px;

    margin:0 auto 30px;

    border-radius:50%;

    background:var(--orange);

    display:flex;

    justify-content:center;

    align-items:center;

}
.research-icon i{

    font-size:2rem;

    color:var(--black);

}
.research-acknowledgement-content span{

    display:inline-block;

    margin-bottom:18px;

    color:var(--orange);

    font-family:"Roboto";

    letter-spacing:2px;

    text-transform:uppercase;

}
.research-acknowledgement-content h2{

    font-family:"Bungee";

    color:#FDAC1C;

    font-size:2.8rem;

    line-height:1.2;

    margin-bottom:30px;

}
.research-acknowledgement-content p{

    font-family:"Roboto";

    color:#2E1C12;

    font-size:1.1rem;

    line-height:2;

}

/* ===== TIPS =====*/
.guide-hero{

    position:relative;

    min-height:520px;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:url("images/tips/guide-hero.jpg") center center/cover no-repeat;

}
.guide-overlay{

    position:absolute;

    inset:0;

    background:rgba(15,13,15,.35);

}
.guide-wrapper{

    position:relative;

    z-index:2;

    max-width:1350px;

    width:100%;

    margin:auto;

    padding:0 7%;

    box-sizing:border-box;

}
.guide-label{

    display:inline-block;

    font-family:"Roboto";

    font-size:.9rem;

    font-weight:700;

    letter-spacing:2px;

    color:var(--orange);

    margin-bottom:18px;

    text-transform:uppercase;

}
.guide-title{

    font-family:"Bungee";

    font-size:4.4rem;

    line-height:1;

    color:var(--orange);

    max-width:700px;

    margin-bottom:12px;

}
.guide-subtitle{

    font-family:"Roboto Slab";

    font-size:2rem;

    color:var(--cream);

    margin-bottom:25px;

}
.guide-wrapper p{

    font-family:"Roboto";

    font-size:1.05rem;

    line-height:1.9;

    color:var(--cream);

    max-width:560px;

}

.guide-purpose{

    background:var(--cream);

    padding:110px 0;

}
.guide-purpose-wrapper{

    max-width:1350px;

    margin:auto;

    padding:0 7%;

    display:grid;

    grid-template-columns:480px 1fr;

    gap:70px;

    align-items:center;

    box-sizing:border-box;

}
.guide-purpose-image{

    overflow:hidden;

    border-radius:24px;

}
.guide-purpose-image img{

    width:100%;

    display:block;

    height:100%;

    object-fit:cover;

}
.guide-purpose-content{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}
.guide-purpose-subtitle{

    font-family:"Roboto Slab";

    font-size:2.3rem;

    color:var(--orange);

    margin:15px 0 25px;

}
.guide-purpose-content p{

    font-family:"Roboto";

    font-size:1.05rem;

    line-height:1.9;

    color:var(--brown);

    margin-bottom:22px;

}
.guide-purpose-content p:last-child{

    margin-bottom:0;

}

.ride-guide{

    background:var(--cream);

    padding:110px 0;

}
.ride-guide-wrapper{

    max-width:1350px;

    margin:auto;

    padding:0 7%;

    box-sizing:border-box;

}
.ride-guide-subtitle{

    font-family:"Roboto Slab";

    font-size:2.2rem;

    color:var(--orange);

    text-align:center;

    margin:15px 0 60px;

}
.ride-guide-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

}
.ride-step{

    background: #2E1C12;

    color: var(--cream);

    padding: 32px;

    border-radius: 18px;

    display: flex;

    align-items: flex-start;

    gap: 25px;

    transition: .3s;

}
.ride-guide .section-title {
    text-align: center;
    width: 100%;
}
.ride-step-icon {

    width: 65px;

    height: 65px;

    min-width: 65px;

    border-radius: 50%;

    

    display: flex;

    justify-content: center;

    align-items: center;

}
.ride-step-icon span {
    font-size: 2rem;
    line-height: 1;
}
.ride-step-content {

    flex: 1;

}
.ride-step h4 {

    font-family: "Roboto Slab";

    font-size: 1.2rem;

    color: var(--orange);

    margin: 0 0 14px;

}
.ride-step p {

    font-family: "Roboto";

    line-height: 1.8;

    margin: 0;

}

.guide-phrases{

    background:var(--cream);

    padding:110px 0;

}
.guide-phrases-wrapper{

    max-width:900px;

    margin:auto;

    padding:0 7%;

    box-sizing:border-box;

}
.guide-phrases-subtitle{

    font-family:"Roboto Slab";

    font-size:2.2rem;

    color:var(--orange);

    text-align:center;

    margin:15px 0 60px;

}
.guide-phrases .section-title {
    text-align: center;
    width: 100%;
}
.phrases-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:14px;

}
.phrase-header{

    background:var(--brown);

    color:var(--orange);

    font-family:"Roboto Slab";

    font-size:1.3rem;

    text-align:center;

    padding:16px;

    border-radius:10px;

}
.phrase-cell{

    background:#2E1C12;

    color:var(--cream);

    font-family:"Roboto";

    text-align:center;

    padding:18px;

    border-radius:10px;

    line-height:1.6;

}

.guide-fares {
    width: 100%;
    padding: 110px 0;
    background: var(--cream);
    box-sizing: border-box;
    overflow: hidden;
}
.guide-fares-wrapper {
    width: 100%;
    max-width: 1350px;
    margin: 0 auto;
    padding: 0 7%;
    box-sizing: border-box;
}
.guide-fares-heading {
    max-width: 850px;
    margin: 0 auto 70px;
    text-align: center;
}
.fare-label {
    display: inline-block;

    font-family: "Roboto";
    font-size: 0.9rem;
    font-weight: 700;

    letter-spacing: 3px;
    text-transform: uppercase;

    color: var(--orange);

    margin-bottom: 18px;
}
.guide-fares-heading .section-title {
    font-family: "Bungee";
    font-size: 3rem;
    line-height: 1.15;

    color: var(--brown);

    margin: 0 0 28px;
}
.fare-introduction {
    font-family: "Roboto";
    font-size: 1.1rem;
    line-height: 1.9;

    color: var(--brown);

    margin: 0 auto 18px;
}
.fare-introduction strong {
    color: var(--orange);
}
.fare-note {
    font-family: "Roboto";
    font-size: 0.95rem;
    line-height: 1.7;

    color: #6f625a;

    max-width: 680px;
    margin: 0 auto;
}
.fare-formula {
    display: grid;
    grid-template-columns: 1fr auto 1fr;

    align-items: center;

    gap: 30px;

    max-width: 900px;

    margin: 0 auto 90px;
}
.fare-formula-card {
    min-height: 220px;

    background: var(--dark);

    border-radius: 26px;

    padding: 35px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    box-sizing: border-box;
}
.fare-amount {
    display: block;

    font-family: "Bungee";
    font-size: 3.8rem;
    line-height: 1;

    color: var(--orange);

    margin-bottom: 15px;
}
.fare-distance {
    display: block;

    font-family: "Roboto Slab";
    font-size: 1.25rem;
    font-weight: 700;

    color: var(--cream);

    margin-bottom: 10px;
}
.fare-formula-card p {
    font-family: "Roboto";
    font-size: 0.95rem;
    line-height: 1.6;

    color: rgba(254, 245, 233, 0.75);

    margin: 0;
}
.fare-plus {
    font-family: "Bungee";
    font-size: 3rem;

    color: var(--orange);
}
.fare-estimate-section {
    background: #ffffff;

    border-radius: 28px;

    padding: 55px;

    margin-bottom: 90px;

    box-shadow: 0 15px 45px rgba(46, 28, 18, 0.08);

    box-sizing: border-box;
}
.fare-estimate-heading {
    max-width: 700px;

    margin-bottom: 40px;
}
.fare-estimate-heading > span {
    display: block;

    font-family: "Roboto";
    font-size: 0.85rem;
    font-weight: 700;

    letter-spacing: 2px;

    color: var(--orange);

    margin-bottom: 12px;
}
.fare-estimate-heading h3 {
    font-family: "Roboto Slab";
    font-size: 2.2rem;

    color: var(--brown);

    margin: 0 0 15px;
}
.fare-estimate-heading p {
    font-family: "Roboto";
    font-size: 1rem;
    line-height: 1.8;

    color: #6f625a;

    margin: 0;
}
.fare-table {
    width: 100%;

    border: 2px solid rgba(46, 28, 18, 0.1);

    border-radius: 20px;

    overflow: hidden;
}
.fare-table-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    min-height: 70px;

    padding: 0 30px;

    border-bottom: 1px solid rgba(46, 28, 18, 0.1);

    box-sizing: border-box;

    font-family: "Roboto";
}
.fare-table-row:last-child {
    border-bottom: none;
}
.fare-table-row:nth-child(even) {
    background: #fff8ee;
}
.fare-table-row span {
    font-size: 1rem;

    color: var(--brown);
}
.fare-table-row strong {
    font-family: "Roboto Slab";
    font-size: 1.25rem;

    color: var(--orange);

    text-align: right;
}
.fare-table-header {
    background: var(--dark) !important;
}
.fare-table-header span {
    font-family: "Roboto";
    font-weight: 700;

    color: var(--cream);
}
.fare-table-header span:last-child {
    text-align: right;
}
.official-fare-guide {
    display: grid;

    grid-template-columns: 1.1fr 0.9fr;

    gap: 60px;

    align-items: center;

    margin-bottom: 100px;
}
.official-fare-image {
    width: 100%;

    border-radius: 26px;

    overflow: hidden;

    box-shadow: 0 18px 50px rgba(46, 28, 18, 0.15);
}
.official-fare-image img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: cover;
}
.official-fare-content {
    display: flex;

    flex-direction: column;

    align-items: flex-start;
}
.official-fare-content h3 {
    font-family: "Roboto Slab";
    font-size: 2.3rem;
    line-height: 1.25;

    color: var(--brown);

    margin: 0 0 25px;
}
.official-fare-content p {
    font-family: "Roboto";
    font-size: 1rem;
    line-height: 1.9;

    color: #5a4b42;

    margin: 0 0 18px;
}
.fare-source-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    margin-top: 15px;

    padding: 15px 32px;

    border: none;
    border-radius: 999px;

    background: var(--orange);
    color: var(--dark);

    font-family: "Roboto";
    font-size: 1rem;
    font-weight: 700;

    cursor: pointer;

    transition: 0.3s;
}
.fare-source-button:hover {
    transform: translateY(-3px);

    box-shadow: 0 8px 20px rgba(46, 28, 18, 0.15);
}
.fare-reminders {
    padding-top: 20px;
}
.fare-reminders-heading {
    text-align: center;

    max-width: 700px;

    margin: 0 auto 45px;
}
.fare-reminders-heading > span {
    display: block;

    font-family: "Roboto";
    font-size: 0.85rem;
    font-weight: 700;

    letter-spacing: 2px;

    color: var(--orange);

    margin-bottom: 12px;
}
.fare-reminders-heading h3 {
    font-family: "Roboto Slab";
    font-size: 2.4rem;

    color: var(--brown);

    margin: 0;
}
.fare-reminder-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;
}
.fare-reminder-card {
    background: var(--dark);

    border-radius: 24px;

    padding: 35px;

    min-height: 270px;

    box-sizing: border-box;

    transition: 0.3s;
}
.fare-reminder-card:hover {
    transform: translateY(-6px);
}
.fare-reminder-number {
    display: block;

    font-family: "Bungee";
    font-size: 2rem;

    color: var(--orange);

    margin-bottom: 25px;
}
.fare-reminder-card h4 {
    font-family: "Roboto Slab";
    font-size: 1.35rem;

    color: var(--cream);

    margin: 0 0 15px;
}
.fare-reminder-card p {
    font-family: "Roboto";
    font-size: 0.95rem;
    line-height: 1.8;

    color: rgba(254, 245, 233, 0.8);

    margin: 0;
}
.fare-source-modal {
    display: none;

    position: fixed;

    inset: 0;

    z-index: 12000;

    align-items: center;
    justify-content: center;

    padding: 30px;

    background: rgba(15, 13, 15, 0.65);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    box-sizing: border-box;
    
    overscroll-behavior: contain;
}
.fare-source-modal.active {
    display: flex;
}
.fare-source-modal-content {
    position: relative;

    width: min(700px, 95vw);

    max-height: 85vh;

    overflow-y: auto;

    padding: 50px;

    background: var(--cream);

    border-radius: 28px;

    box-sizing: border-box;
    
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.close-fare-source {
    position: absolute;

    top: 18px;
    right: 22px;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: none;
    border-radius: 50%;

    background: var(--dark);
    color: var(--cream);

    font-size: 28px;
    line-height: 1;

    cursor: pointer;

    transition: 0.25s;
}
.close-fare-source:hover {
    background: var(--orange);

    color: var(--dark);

    transform: rotate(90deg);
}
.fare-source-modal-content h2 {
    font-family: "Bungee";
    font-size: 2.3rem;
    line-height: 1.2;

    color: var(--brown);

    margin: 5px 60px 20px 0;
}
.fare-source-modal-content > p {
    font-family: "Roboto";
    font-size: 1rem;
    line-height: 1.8;

    color: #5a4b42;
}
.fare-source-item {
    margin-top: 25px;

    padding: 25px;

    background: #ffffff;

    border-left: 5px solid var(--orange);

    border-radius: 15px;
}
.fare-source-item h3 {
    font-family: "Roboto Slab";
    font-size: 1.2rem;

    color: var(--brown);

    margin: 0 0 10px;
}
.fare-source-item p {
    font-family: "Roboto";
    line-height: 1.7;

    color: #5a4b42;

    margin: 0;
}
.fare-source-date {
    margin-top: 10px !important;

    font-size: 0.85rem;

    color: #8a7a70 !important;
}
.fare-source-disclaimer {
    margin-top: 25px !important;

    padding-top: 20px;

    border-top: 1px solid rgba(46, 28, 18, 0.15);

    font-size: 0.9rem !important;
}

.fare-source-modal.active {
    display: flex;
}
body.modal-open {
    overflow: hidden;
}

.guide-misunderstandings{

    background:var(--cream);

    padding:110px 0;

}
.guide-misunderstandings-wrapper{

    max-width:1350px;

    margin:auto;

    padding:0 7%;

    display:grid;

    grid-template-columns:480px 1fr;

    gap:70px;

    align-items:center;

    box-sizing:border-box;

}
.guide-misunderstandings-image{

    overflow:hidden;

    border-radius:24px;

}
.guide-misunderstandings-image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

}
.guide-misunderstandings-content{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}
.guide-misunderstandings-subtitle{

    font-family:"Roboto Slab";

    font-size:2.2rem;

    color:var(--orange);

    margin:15px 0 25px;

}
.guide-misunderstandings-content p{

    font-family:"Roboto";

    font-size:1.05rem;

    line-height:1.9;

    color:var(--brown);

    margin-bottom:30px;

}
.misunderstanding-list{

    list-style:none;

    padding:0;

    margin:0;

    display:flex;

    flex-direction:column;

    gap:18px;

}
.misunderstanding-list li{

    font-family:"Roboto";

    color:var(--brown);

    line-height:1.8;

}

.guide-support{

    background:var(--cream);

    padding:110px 0;

}
.guide-support-wrapper{

    max-width:1350px;

    margin:auto;

    padding:0 7%;

    text-align:center;

    box-sizing:border-box;

}
.guide-support-subtitle{

    font-family:"Roboto Slab";

    font-size:2.2rem;

    color:var(--orange);

    margin:15px 0 25px;

}
.guide-support-intro{

    max-width:760px;

    margin:0 auto 60px;

    font-family:"Roboto";

    font-size:1.05rem;

    line-height:1.9;

    color:var(--brown);

}
.guide-support-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}
.support-card{

    background:#2E1C12;

    color:var(--cream);

    border-radius:20px;

    padding:35px 25px;

    transition:.3s ease;

}
.support-card:hover{

    transform:translateY(-8px);

}
.support-icon{

    font-size:2.5rem;

    margin-bottom:20px;

}
.support-card h4{

    font-family:"Roboto Slab";

    color:var(--orange);

    font-size:1.25rem;

    margin-bottom:18px;

}
.support-card p{

    font-family:"Roboto";

    line-height:1.8;

}

.guide-download {

    background: var(--cream);

    padding: 110px 0;

}
.guide-download-wrapper {

    width: 100%;

    max-width: 1350px;

    margin: auto;

    padding: 0 7%;

    box-sizing: border-box;

}
.guide-download-card {

    position: relative;

    display: grid;

    grid-template-columns: minmax(280px, 420px) 1fr;

    align-items: center;

    gap: 70px;

    background: var(--brown);

    border-radius: 28px;

    padding: 60px 70px;

    box-sizing: border-box;

    overflow: hidden;

}
.guide-download-mockup {

    overflow:hidden;

    border-radius:24px;

}
.guide-download-mockup img {

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

}
.guide-download-content {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    color: var(--cream);

}
.guide-download-label {

    display: inline-block;

    font-family: "Roboto";

    font-size: .85rem;

    font-weight: 700;

    letter-spacing: 2px;

    color: var(--orange);

    margin-bottom: 15px;

}
.guide-download-content .section-title {

    color: var(--orange);

    text-align: left;

    margin-bottom: 0;

}
.guide-download-subtitle {

    font-family: "Roboto Slab";

    color: #2E1C12;

    font-size: 2rem;

    line-height: 1.3;

    margin: 15px 0 20px;

}
.guide-download-content p {

    font-family: "Roboto";

    font-size: 1.05rem;

    line-height: 1.9;

    color: #2E1C12;

    max-width: 650px;

    margin: 0 0 32px;

}
.download-btn {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    gap: 12px;

    background: var(--orange);

    color: var(--black);

    padding: 17px 32px;

    border-radius: 50px;

    text-decoration: none;

    font-family: "Roboto Slab";

    font-weight: 700;

    transition:
        transform .3s ease,
        background .3s ease;

}
.download-btn:hover {

    transform: translateY(-4px);

    background: #ffc44d;

}
.download-btn i {

    font-size: 1.1rem;

}

.guide-closing{

    background:linear-gradient(
        rgba(15,13,15,.78),
        rgba(15,13,15,.78)
    ),
    url("images/tips/closing-banner.jpg") center/cover no-repeat;

    padding:140px 0;

}
.guide-closing-wrapper{

    max-width:900px;

    margin:auto;

    padding:0 7%;

    text-align:center;

    box-sizing:border-box;

}
.guide-closing-label{

    display:inline-block;

    font-family:"Roboto";

    letter-spacing:2px;

    text-transform:uppercase;

    color:var(--orange);

    margin-bottom:18px;

}
.guide-closing-title{

    font-family:"Bungee";

    font-size:3rem;

    color:#FDAC1C;

    margin-bottom:30px;

}
.guide-closing-wrapper p{

    font-family:"Roboto";

    color:#FEF5E9;

    line-height:1.9;

    font-size:1.05rem;

    margin-bottom:22px;

}
.guide-closing-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:45px;

    flex-wrap:wrap;

}


/* ===== ABOUT US ===== */
.about-hero{

    background:var(--cream);

    padding:110px 0;

}
.about-wrapper{

    max-width:1350px;

    margin:auto;

    padding:0 7%;

    display:grid;

    grid-template-columns:1fr 420px;

    gap:80px;

    align-items:center;

    box-sizing:border-box;

}
.about-content{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}
.page-title{

    font-family:"Bungee";

    font-size:4rem;

    color:var(--orange);

    line-height:1;

    margin-bottom:30px;

}
.about-content p{

    font-family:"Roboto";

    font-size:1.05rem;

    line-height:1.9;

    color:var(--brown);

    margin-bottom:25px;

    max-width:700px;

}
.about-logo{

    display:flex;

    justify-content:center;

    align-items:center;

}
.about-logo img{

    width:100%;

    max-width:380px;

    height:auto;

    display:block;

}

.about-purpose{

    background:#2E1C12;

    padding:110px 0;

}
.purpose-wrapper{

    max-width:850px;

    margin:auto;

    padding:0 7%;

    text-align:center;

    box-sizing:border-box;

}
.purpose-subtitle{

    font-family:"Roboto Slab";

    font-size:2.2rem;

    color:var(--orange);

    margin:15px 0 30px;

}
.purpose-wrapper p{

    font-family:"Roboto";

    font-size:1.05rem;

    line-height:1.9;

    color:var(--cream);

    margin-bottom:28px;

}
.purpose-wrapper p:last-child{

    margin-bottom:0;

}

.about-team{

    background:var(--cream);

    padding:110px 0;

}
.team-wrapper{

    max-width:1350px;

    margin:auto;

    padding:0 7%;

    text-align:center;

    box-sizing:border-box;

}
.team-subtitle{

    font-family:"Roboto Slab";

    font-size:2.2rem;

    color:var(--orange);

    margin:15px 0 20px;

}
.team-description{

    max-width:720px;

    margin:0 auto 70px;

    font-family:"Roboto";

    line-height:1.9;

    color:var(--brown);

}
.team-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:50px;

    justify-items:center;

}
.team-card{

    background:var(--brown);

    border:8px solid var(--orange);

    border-radius:24px;

    padding:18px;

    width:220px;

    text-align:center;

    transition:.3s ease;

}
.team-card:hover{

    transform:translateY(-8px);

}
.team-card img{

    width:100%;

    aspect-ratio:1/1;

    object-fit:cover;

    border-radius:14px;

    display:block;

    margin-bottom:18px;

}
.team-card h4{

    font-family:"Roboto Slab";

    color:var(--cream);

    font-size:1.2rem;

    margin-bottom:14px;

}
.team-card span{

    display:inline-block;

    padding:8px 14px;

    background:var(--orange);

    color:var(--black);

    font-family:"Roboto";

    font-weight:bold;

    font-size:.9rem;

    border-radius:50px;

}

.about-process{

    background:#2E1C12;

    padding:110px 0;

}
.process-wrapper{

    max-width:850px;

    margin:auto;

    padding:0 7%;

    text-align:center;

    box-sizing:border-box;

}
.process-subtitle{

    font-family:"Roboto Slab";

    font-size:2.2rem;

    color:var(--orange);

    margin:15px 0 30px;

}
.process-wrapper p{

    font-family:"Roboto";

    font-size:1.05rem;

    line-height:1.9;

    color:var(--cream);

    margin-bottom:28px;

}
.process-wrapper p:last-child{

    margin-bottom:0;

}

.about-ethics{
    background:var(--cream);

    padding:110px 0;

}
.ethics-wrapper{

    max-width:1350px;

    margin:auto;

    padding:0 7%;

    box-sizing:border-box;

}
.ethics-card{

    max-width:900px;

    margin:auto;

    background:#2E1C12;

    border-radius:24px;

    padding:60px;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    text-align:center;

}
.ethics-subtitle{

    font-family:"Roboto Slab";

    font-size:2.2rem;

    color:var(--orange);

    margin:15px 0 30px;

}
.ethics-card p{

    font-family:"Roboto";

    font-size:1.05rem;

    line-height:1.9;

    color:var(--cream);

    margin-bottom:25px;

}
.ethics-card p:last-child{

    margin-bottom:0;

}

/* ===== Take a Ride (CTA) ===== */
.ride-hero{

    position:relative;

    min-height:85vh;

    display:flex;

    align-items:center;

    background:url("images/take-a-ride/take-a-ride-hero.png") center center/cover no-repeat;

}
.ride-overlay{

    position:absolute;

    inset:0;

    background:rgba(15,13,15,.55);

}
.ride-wrapper{

    position:relative;

    z-index:2;

    max-width:1350px;

    width:100%;

    margin:auto;

    padding:0 7%;

    box-sizing:border-box;

}
.ride-content{

    max-width:650px;

}
.ride-label{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    border:1px solid rgba(253,172,28,.45);

    background:rgba(253,172,28,.15);

    color:var(--orange);

    font-family:"Roboto";

    text-transform:uppercase;

    letter-spacing:1px;

    font-size:.9rem;

    margin-bottom:22px;

}
.ride-content h1{

    font-family:"Bungee";

    color:var(--orange);

    font-size:4.5rem;

    line-height:1.05;

    margin-bottom:20px;

}
.ride-content p{

    font-family:"Roboto Slab";

    color:white;

    font-size:1.45rem;

    line-height:1.7;

    max-width:620px;

}

.why-ride{

    padding:120px 0;

    background:var(--cream);

}
.why-ride-wrapper{

    max-width:1350px;

    width:100%;

    margin:auto;

    padding:0 7%;

    box-sizing:border-box;

}
.why-ride-grid{

    display:grid;

    grid-template-columns:.9fr 1.1fr;

    gap:70px;

    align-items:center;

}
.why-ride-image{

    display:flex;

    justify-content:center;

}
.why-ride-image img{

    width:100%;

    max-width:360px;

}
.why-ride-content span{

    display:inline-block;

    margin-bottom:18px;

    color:var(--orange);

    font-family:"Roboto";

    font-size:.9rem;

    letter-spacing:2px;

    text-transform:uppercase;

}
.why-ride-content h2{

    font-family:"Bungee";

    color:var(--orange);

    font-size:3.2rem;

    line-height:1.2;

    margin-bottom:30px;

}
.why-ride-content p{

    font-family:"Roboto";

    color:var(--brown);

    line-height:2;

    margin-bottom:25px;

}

.experience-locations{

    padding:120px 0;

    background:var(--cream);

}
.experience-wrapper{

    max-width:1350px;

    width:100%;

    margin:auto;

    padding:0 7%;

    box-sizing:border-box;

}
.experience-heading{

    max-width:900px;

    margin:0 auto 70px;

    text-align:center;

}
.experience-heading span{

    color:var(--orange);

    font-family:"Roboto";

    letter-spacing:2px;

    text-transform:uppercase;

}
.experience-heading h2{

    font-family:"Bungee";

    color:var(--orange);

    font-size:3rem;

    line-height:1.2;

    margin:20px 0;

}
.experience-heading p{

    font-family:"Roboto";

    color:var(--brown);

    line-height:2;

}
.experience-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:28px;

}
.experience-card{

    position:relative;

    overflow:hidden;

    border-radius:20px;

    cursor:pointer;

}
.experience-card img{

    width:100%;

    height:320px;

    object-fit:cover;

    transition:.5s;

}
.experience-card:hover img{

    transform:scale(1.08);

}
.experience-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:30px;

    background:linear-gradient(
        transparent,
        rgba(0,0,0,.82)
    );

}
.experience-overlay h3{

    font-family:"Roboto Slab";

    color:var(--orange);

    font-size:2rem;

    margin-bottom:10px;

}
.experience-overlay p{

    color:white;

    font-family:"Roboto";

    margin-bottom:12px;

    line-height:1.6;

}
.experience-overlay span{

    color:var(--orange);

    font-family:"Roboto";

    font-weight:600;

}

.experience-modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.75);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:9999;

}
.experience-modal.active{

    opacity:1;

    visibility:visible;

}
.experience-modal-box{

    width:min(1000px,90vw);

    background:var(--cream);

    border-radius:24px;
    min-height:500px;

    overflow:hidden;

    position:relative;

    transform:translateY(20px);

    transition:.35s;

}
.experience-modal.active .experience-modal-box{

    transform:translateY(0);

}
.experience-close{

    position:absolute;

    top:18px;

    right:18px;

    width:45px;

    height:45px;

    border:none;

    border-radius:50%;

    background:var(--orange);

    cursor:pointer;

    z-index:10;

}
.experience-modal-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

    align-items:center;

}

.experience-modal-image{

    width:100%;

    height:420px;

    overflow:hidden;

    border-radius:18px;

}
.experience-modal-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}
.experience-modal-content{

    padding:60px;

}
.experience-modal-content span{

    color:var(--orange);

    text-transform:uppercase;

    letter-spacing:2px;

    font-family:"Roboto";

}
.experience-modal-content h2{

    font-family:"Bungee";

    color:var(--brown);

    font-size:2.4rem;

    margin:20px 0;

}
.experience-modal-content p{

    font-family:"Roboto";

    color:var(--brown);

    line-height:2;

}

.ride-difference{
    background:#FEF5E9;
    padding:120px 0;
}
.ride-difference-wrapper{
    max-width:1300px;
    margin:0 auto;
    padding:0 40px;
    box-sizing:border-box;
    text-align:center;
}
.section-label{
    display:block;
    margin-bottom:20px;
    color:#FDAC1C;
    font-family:"Roboto",sans-serif;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;
}
.ride-difference h2{
    font-family:"Bungee",cursive;
    font-size:48px;
    color:#2E1C12;
    margin-bottom:30px;
}
.section-description{
    max-width:750px;
    margin:0 auto 70px;
    font-size:18px;
    line-height:1.8;
    color:#666;
}
.difference-layout{
    display:grid;
    grid-template-columns:1fr 340px 1fr;
    align-items:center;
    column-gap:50px;
}
.difference-column{
    display:flex;
    flex-direction:column;
    gap:30px;
}
.difference-card{
    background:#fff;
    border-radius:24px;
    padding:35px;
    text-align:left;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

    transition:.3s ease;
}
.difference-card:hover{
    transform:translateY(-6px);
}
.difference-card h3{
    margin:18px 0 12px;
    color:#2E1C12;
    font-family:"Roboto Slab",serif;
}
.difference-card p{
    color:#666;
    line-height:1.8;
}
.difference-center img{

    width:360px;

    max-width:100%;

}
.difference-icon{
    width:70px;
    height:70px;

    display:flex;
    justify-content:center;
    align-items:center;

    border-radius:50%;
    background:#FDAC1C;

    color:#fff;
    font-size:28px;
}
.difference-center{
    display:flex;
    justify-content:center;
    align-items:center;
}
.difference-center img{
    width:100%;
    max-width:340px;
    height:auto;
    display:block;
    border-radius:24px;
}

.waiting-areas{

    padding:120px 0;

    background:var(--cream);

}
.waiting-wrapper{

    max-width:1350px;

    width:100%;

    margin:auto;

    padding:0 7%;

    box-sizing:border-box;

}
.waiting-heading{

    max-width:800px;

    margin:0 auto 60px;

    text-align:center;

}
.waiting-heading span{

    display:inline-block;

    color:var(--orange);

    font-family:"Roboto";

    text-transform:uppercase;

    letter-spacing:2px;

    margin-bottom:15px;

}
.waiting-heading h2{

    font-family:"Bungee";

    font-size:3rem;

    color:#FDAC1C;

    line-height:1.15;

    margin-bottom:25px;

}
.waiting-heading p{

    font-family:"Roboto";

    color:#2E1C12;

    line-height:1.9;

}
.waiting-filter{

    background:#2E1C12;

    padding:45px;

    border-radius:25px;

    margin-bottom:70px;

}
.waiting-filter-buttons{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

    margin-bottom:30px;

}
.waiting-filter-buttons button{

    background:transparent;

    color:white;

    border:2px solid rgba(255,255,255,.3);

    padding:12px 22px;

    border-radius:50px;

    cursor:pointer;

    transition:.3s;

    display:flex;

    align-items:center;

    gap:10px;

    font-family:"Roboto";

}
.waiting-filter-buttons button:hover{

    border-color:var(--orange);

    color:var(--orange);

}
.waiting-filter-buttons button.active{

    background:var(--orange);

    color:var(--black);

    border-color:var(--orange);

}
#waitingCityFilter{

    display:block;

    margin:auto;

    width:260px;

    padding:12px;

    border-radius:10px;

    border:none;

    font-family:"Roboto";

}
.dot{

    width:10px;

    height:10px;

    border-radius:50%;

}
.green{

    background:#2E7D32;

}
.orange{

    background:#FB8C00;

}
.red{

    background:#D32F2F;

}
.waiting-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}
.waiting-card.hidden{
    display:none;
}
.waiting-card{

    position:relative;

    cursor:pointer;

    overflow:hidden;

    border-radius:18px;

    transition:.35s;

}
.waiting-card:hover{

    transform:translateY(-8px);

}
.waiting-card img{

    width:100%;

    height:250px;

    object-fit:cover;

    display:block;

}
.waiting-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(to top,
        rgba(0,0,0,.75),
        rgba(0,0,0,.05));

}
.waiting-badge{

    position:absolute;

    top:18px;

    left:18px;

    z-index:2;

    padding:8px 15px;

    border-radius:50px;

    color:white;

    font-size:.8rem;

    font-family:"Roboto";

}
.waiting-badge.official{

    background:#2E7D32;

}
.waiting-badge.semi{

    background:#FB8C00;

}
.waiting-badge.informal{

    background:#D32F2F;

}
.waiting-location{

    position:absolute;

    left:20px;

    bottom:20px;

    z-index:2;

    color:white;

    font-family:"Roboto Slab";

    font-size:1.2rem;

}
.waiting-load-more{

    margin-top:60px;

    text-align:center;

    cursor:pointer;

}
.waiting-load-more h3{

    font-family:"Roboto Slab";

    color:var(--brown);

}
.waiting-load-more .arrow{

    display:block;

    margin-top:10px;

    font-size:22px;

}
.waiting-modal{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.65);

    backdrop-filter:blur(10px);

    justify-content:center;

    align-items:center;

    z-index:99999;

    padding:40px;

}
.waiting-modal-content{

    position:relative;

    background:white;

    width:min(1100px,100%);

    border-radius:25px;

    display:flex;

    overflow:hidden;

}
.waiting-modal iframe{

    width:50%;

    height:420px;

    border:none;

}
.waiting-modal-text{

    width:50%;

    padding:45px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}
.waiting-modal-text h3{

    font-family:"Roboto Slab";

    color:var(--brown);

    margin-bottom:20px;

}
.waiting-modal-text p{

    font-family:"Roboto";

    line-height:1.9;

    color:var(--brown);

}
.waiting-modal-text a{

    margin-top:25px;

    color:var(--orange);

    text-decoration:none;

    font-weight:bold;

}
#closeWaitingModal{

    position:absolute;

    top:18px;

    right:25px;

    font-size:2rem;

    cursor:pointer;

}

/* HERO */
.cta-hero {
  height: 90vh;
  background: url('images/home/IMG_5884.jpg') center/cover no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  padding: 60px;
}

.cta-overlay {
  position: absolute;
  inset: 0;
  background: var(--dark);
  opacity: 0.75;
}

.cta-hero-text {
  position: relative;
  max-width: 700px;
  color: var(--cream);
}

.cta-hero-text h1 {
  font-family: 'Bungee';
  font-size: 64px;
  color: var(--orange);
  margin-bottom: 10px;
}

.cta-hero-text p {
  font-family: 'Roboto Slab', serif;
  font-size: 18px;
  line-height: 1.6;
}

/* INTRO */
.cta-intro {
  text-align: center;
  padding: 100px 20px 60px;
}

.cta-intro h2 {
  font-family: 'Bungee';
  font-size: 42px;
  color: var(--orange);
}

.cta-intro p {
  max-width: 800px;
  margin: 20px auto;
  font-family: 'Roboto', sans-serif;
  line-height: 1.7;
}

/* GRID */
.cta-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  padding: 60px;
}

.cta-card {
  background: #2e1c12;
  padding: 40px;
  border-radius: 12px;
  flex: 1;
  min-width: 280px;
  max-width: 350px;
  color: var(--cream);
  text-align: center;
  transition: transform 0.3s ease;
}

.cta-card:hover {
  transform: translateY(-5px);
}

.cta-card h3 {
  font-family: 'Roboto Slab', serif;
  font-size: 24px;
  margin-bottom: 15px;
}

.cta-card p {
  font-family: 'Roboto', sans-serif;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* BUTTON */
.cta-btn {
  display: inline-block;
  padding: 12px 20px;
  background: var(--orange);
  color: #000;
  font-weight: bold;
  text-decoration: none;
  border-radius: 6px;
  transition: 0.3s;
}

.cta-btn:hover {
  opacity: 0.8;
}

/* CTA MENU ITEM HIGHLIGHT */
.menu-item a[href*="cta"] {
  background: var(--orange);
  color: #1b120d !important;
  padding: 8px 16px;
  border-radius: 25px;
  font-weight: bold;
  transition: 0.3s ease;
}

/* Hover effect */
.menu-item a[href*="cta"]:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

/* Active state (when user is on CTA page) */
.current-menu-item a[href*="cta"] {
  background: #ffb84d;
  color: #1b120d !important;
}

/* IMPACT SECTION */
.cta-impact {
  text-align: center;
  padding: 100px 20px;
  background: #1B120D;
  color: var(--cream);
}

.cta-impact h2 {
  font-family: 'Bungee';
  font-size: 40px;
  color: var(--orange);
}

.cta-impact p {
  max-width: 800px;
  margin: 20px auto;
  line-height: 1.7;
}

/* FINAL CTA */
.cta-final {
  text-align: center;
  padding: 120px 20px;
}

.cta-final h2 {
  font-family: 'Bungee';
  font-size: 42px;
  color: var(--orange);
}

.cta-final p {
  max-width: 700px;
  margin: 20px auto 30px;
  font-family: 'Roboto', sans-serif;
  line-height: 1.7;
}

.cta-main-btn {
  display: inline-block;
  padding: 15px 30px;
  background: var(--orange);
  color: #000;
  font-weight: bold;
  text-decoration: none;
  border-radius: 8px;
}
/* ===== QUOTE ===== */
.quote {
    padding-top: 50px;
	width: 100%;
	display: flex;
	max-width: 1200px;
	justify-content: center;
	align-items: center;
	padding-bottom: 30px;
	margin: 0 auto;
}
.quote img {
	width: 95%;
	height: auto;
	display: block;
}

/* ===== BUTTON ===== */
.btn {
	background: var(--orange);
	padding: 12px 25px;
	border-radius: 12px;
	cursor: pointer;
	margin-top: 15px;
	font-weight: 500;
	width: fit-content;
	text-decoration: none;
	color: #fef4e9;
}
.btn:hover {
	background: #2E1C12;
	color: #FFAC1C;
}

/* ===== COMMENT POP-UP *===== */

.community-modal{

    display:none;

    position:fixed;

    inset:0;

    z-index:10000;

    justify-content:center;
    align-items:center;

    padding:20px;

    overflow-y:auto;

    overscroll-behavior:contain;

    background:rgba(0,0,0,.45);

    backdrop-filter:blur(8px);

    -webkit-backdrop-filter:blur(8px);

}
.community-modal-content{

    width:min(1200px,95vw);

    max-height:90vh;
    max-height:90dvh;

    overflow-y:auto;

    background:#FEF5E9;

    border-radius:28px;

    padding:50px;

    box-sizing:border-box;

    overscroll-behavior:contain;

}
.close-community{

    position:absolute;

    top:18px;
    right:18px;

    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:28px;
    line-height:1;

    border-radius:50%;

    color:#2E1C12;

    cursor:pointer;

    transition:.25s;

}
.close-community:hover{

    transform:rotate(90deg);

    color:#FDAC1C;

}
.community-top{

    display:grid;

    grid-template-columns:1fr 1.05fr;

    gap:60px;

    align-items:center;

    margin-bottom:50px;
}
.community-left h2{

    font-family:'Bungee',sans-serif;

    font-size:68px;

    line-height:.92;

    color:#FDAC1C;

    margin-bottom:30px;
}
.community-left h3{

    font-family:'Roboto Slab',serif;

    font-size:26px;

    color:#2E1C12;

    line-height:1.45;

    margin-bottom:20px;
}
.community-left p{

    font-family:'Roboto',sans-serif;

    font-size:18px;

    line-height:1.8;

    color:#5A4B42;
}
.comment-box{

    width:100%;

    background:#2E1C12;

    border-radius:24px;

    padding:32px;

    box-sizing:border-box;
}
.comment-label{

    display:block;

    color:#FEF5E9;

    font-size:15px;

    font-weight:600;

    margin-bottom:8px;

    margin-top:20px;
}
.comment-box input,
.comment-box textarea{

    width:100%;

    padding:15px 18px;

    border:none;

    border-radius:18px;

    background:#FFF7EF;

    font-size:16px;

    font-family:'Roboto',sans-serif;

    box-sizing:border-box;
}
.comment-box input:focus,
.comment-box textarea:focus{

    outline:3px solid #FDAC1C;

}
.comment-box textarea{

    min-height:160px;

    resize:none;
}
.form-bottom{

    display:flex;

    gap:16px;

    margin-top:24px;

    align-items:center;
}
.form-bottom input{

    flex:1;
}
.comment-box button{

    background:#FDAC1C;

    color:#2E1C12;

    border:none;

    border-radius:999px;

    padding:15px 28px;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

    white-space:nowrap;
}
.comment-box button:hover{

    background:#FFC94D;

    transform:translateY(-2px);
}
.responses{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:26px;
}
.response-box{

    background:#2E1C12;

    border-radius:22px;

    padding:24px;

    min-height:250px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    transition:.25s;
}
.response-box:hover{

    transform:translateY(-6px);

    box-shadow:0 15px 35px rgba(0,0,0,.18);
}
.response-name{

    color:#FDAC1C;

    font-size:22px;

    margin-bottom:6px;

    font-family:'Roboto Slab',serif;
}
.response-location{

    color:#D8C8BA;

    font-size:14px;

    margin-bottom:18px;
}
.response-preview{

    color:#FEF5E9;

    line-height:1.8;

    flex-grow:1;

    overflow:hidden;

    display:-webkit-box;

    -webkit-line-clamp:5;

    -webkit-box-orient:vertical;
}
.read-more-btn{

    margin-top:22px;

    align-self:flex-start;

    background:none;

    border:none;

    color:#FDAC1C;

    font-weight:700;

    cursor:pointer;

    padding:0;

    font-size:15px;
}
.read-more-btn:hover{

    text-decoration:underline;
}

.community-footer{

    text-align:center;

    margin-top:40px;
}
#loadMoreBtn{

    background:#FDAC1C;

    color:#2E1C12;

    border:none;

    border-radius:999px;

    padding:15px 38px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;
}
#loadMoreBtn:hover{

    background:#FFC94D;
}

.comment-modal{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    backdrop-filter:blur(6px);

    justify-content:center;

    align-items:center;

    z-index:11000;
}
.comment-modal-content{

    background:#2E1C12;

    width:min(700px,90vw);

    border-radius:24px;

    padding:40px;

    position:relative;
}
.close-modal{

    position:absolute;

    right:22px;

    top:18px;

    font-size:30px;

    cursor:pointer;

    color:#FDAC1C;
}
#modalName{

    color:#FDAC1C;

    margin-bottom:20px;

    font-size:24px;

    font-family:'Roboto Slab',serif;
}
#modalComment{

    color:#FEF5E9;

    line-height:1.9;

    font-size:17px;
}

.comment-success{

    margin-top:22px;

    background:#FFF2DA;

    border-left:5px solid #FDAC1C;

    border-radius:16px;

    padding:18px;

    display:flex;

    gap:15px;

    animation:fadeIn .35s ease;
}
.success-icon{

    width:38px;

    height:38px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#FDAC1C;

    color:#2E1C12;

    font-weight:700;

    flex-shrink:0;
}
.success-content strong{

    display:block;

    margin-bottom:8px;

    color:#2E1C12;

    font-family:'Roboto Slab',serif;
}
.success-content p{

    margin:0;

    color:#5A4B42;

    line-height:1.6;
}
/* ===== FLOATING CONTENT BUTTON ===== */
.page-contents {
    position: fixed;

    top: 100px;
    left: 30px;
    right: auto;

    width: 340px;

    z-index: 9000;

    font-family: "Roboto", sans-serif;
}
.page-contents-toggle {
    width: 100%;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 15px 20px;

    background: #2E1C12;
    color: #FEF5E9;

    border: none;
    border-radius: 16px;

    cursor: pointer;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);

    transition:
        background 0.25s ease,
        transform 0.25s ease,
        border-radius 0.3s ease;
}
.page-contents-toggle:hover {
    background: #FDAC1C;
    color: #2E1C12;

    transform: translateY(-2px);
}


/* ===== FLOATING BUTTON ===== */
.floating-actions{
    position:fixed;

    right:30px;

    bottom:30px;

    display:flex;

    flex-direction:column;

    gap:15px;

    align-items:flex-end;

    z-index:9999;
}
.ride-fab,
.community-fab{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    width:240px;

    padding:15px 22px;

    background:var(--orange);
    color:var(--brown);

    border:none;
    border-radius:50px;

    font-family:"Roboto";
    font-weight:700;
    font-size:1rem;

    text-decoration:none;
    cursor:pointer;

    box-shadow:0 8px 25px rgba(0,0,0,.18);
    transition:.3s;

    box-sizing:border-box;

}
.ride-fab:hover,
.community-fab:hover{

    background:#ffbf3f;

    transform:translateY(-3px);

}
.page-contents-icon {
    width: 32px;
    height: 32px;

    display: flex;
    justify-content: center;
    align-items: center;

    flex-shrink: 0;

    background: #FDAC1C;
    color: #2E1C12;

    border-radius: 50%;

    font-size: 14px;
}
.page-contents-toggle:hover .page-contents-icon {
    background: #2E1C12;
    color: #FEF5E9;
}
.page-contents-text {
    flex: 1;

    text-align: left;

    font-size: 15px;
    font-weight: 700;

    letter-spacing: 0.3px;
}
.page-contents-arrow {
    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 14px;

    transition: transform 0.3s ease;
}
.page-contents.open .page-contents-arrow {
    transform: rotate(180deg);
}
.page-contents-menu {
    position: absolute;

    top: calc(100% + 10px);
    left: 0;
    right: auto;

    width: 100%;

    padding: 25px;

    background: #FEF5E9;

    border: 2px solid #FDAC1C;
    border-radius: 20px;

    box-sizing: border-box;

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.18);


    /* Hidden by default */

    opacity: 0;
    visibility: hidden;

    transform: translateY(-10px);

    pointer-events: none;

    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        visibility 0.3s ease;
}
.page-contents.open .page-contents-menu {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);

    pointer-events: auto;
}
.page-contents-heading {
    margin-bottom: 20px;
}
.page-contents-heading span {
    display: block;

    color: #FDAC1C;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 7px;
}
.page-contents-heading h3 {
    margin: 0;

    font-family: "Roboto Slab", serif;

    font-size: 20px;

    color: #2E1C12;
}
.page-contents-links {
    display: flex;
    flex-direction: column;
}
.page-content-link {
    display: flex;
    align-items: center;

    gap: 15px;

    padding: 15px 8px;

    color: #2E1C12;

    text-decoration: none;

    border-bottom: 1px solid rgba(46, 28, 18, 0.12);

    transition:
        background 0.25s ease,
        padding 0.25s ease,
        color 0.25s ease;
}
.page-content-link:last-child {
    border-bottom: none;
}
.page-content-number {
    min-width: 30px;

    color: #FDAC1C;

    font-family: "Roboto Slab", serif;

    font-size: 14px;
    font-weight: 700;
}
.page-content-name {
    font-size: 15px;

    line-height: 1.4;

    font-weight: 600;
}
.page-content-link:hover {
    background: rgba(253, 172, 28, 0.12);

    color: #2E1C12;

    padding-left: 14px;

    border-radius: 10px;
}
.page-content-link.active {
    color: #FDAC1C;
}
.page-content-link.active .page-content-name {
    font-weight: 700;
}
.page-content-link.active .page-content-number {
    color: #2E1C12;
}
.page-contents.open .page-contents-toggle {
    background: #FDAC1C;
    color: #2E1C12;
}
.page-contents.open .page-contents-icon {
    background: #2E1C12;
    color: #FEF5E9;
}



/* ===== FOOTER ===== */
.footer {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	background: var(--dark);
	color: var(--cream);
	padding: 20px 40px;
	position: relative;
}
.footer-left {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.footer-left img {
	max-width: none;
	margin-top: 0;
}
.footer-left-logo img{
	width: 300px;
}
.socials {
	display: flex;
	gap: 10px;
	margin: 20px 0;
}
.socials img {
	width: 40px;
	height: 40px;
	cursor: pointer;
}
.youtube{
    width: 100px;
}
.footer-center {
	flex: 1;
	text-align: left;
	align-self: flex-start;
	margin-left: 100px;
}
.footer-right {
	flex: 1;
	display: flex;
	justify-content: flex-end;
	width: 100%;
}
.footer-right img {
	position: absolute;
	display: block;
	right: 30px;
	top: 0;
	max-width: 250px;
}

/* ===== SUB FOOTER ===== */
.sub-footer {
	text-align: center;
	padding: 15px;
	background: #FDAC1C;
	color: var(--dark);;
	font-weight: bold;
}


/* Large Desktop */
@media (max-width: 1400px) { }

/* Laptop */
@media (max-width: 1200px) { }

/* Tablet */
@media (max-width: 992px) {
    .hamburger{
        display:flex;
        flex-direction:column;
        justify-content:space-between;
        width:32px;
        height:24px;
        background:none;
        border:none;
        cursor:pointer;
        padding:0;
        z-index:10001;
    }
    .hamburger span{
        display:block;
        width:100%;
        height:3px;
        background:#FEF5E9;
        border-radius:10px;
        transition:.35s;
    }
    .hamburger.active span:nth-child(1){
        transform:translateY(10px) rotate(45deg);
    }
    .hamburger.active span:nth-child(2){
        opacity:0;
    }
    .hamburger.active span:nth-child(3){
        transform:translateY(-10px) rotate(-45deg);
    }
    .nav-menu{
        display:block;

        position: absolute;
        top: 100%;
        left:0;

        width:100%;

        background:rgba(46,28,18,.96);
        backdrop-filter:blur(12px);
        -webkit-backdrop-filter:blur(12px);

        max-height:0;
        overflow:hidden;

        transition:max-height .35s ease;

        z-index:9999;

        border-bottom-left-radius:18px;
        border-bottom-right-radius:18px;
    }
    .nav-menu.active{
        max-height:500px;
    }
    .nav-menu ul{
        display:flex;
        flex-direction:column;
        gap:0;
        margin:0;
        padding:20px 0;
    }
    .nav-menu li{
        width:100%;
        text-align:center;
    }
    .nav-menu a{
        display:block;
        padding:16px;
        color:#FEF5E9;
        font-size:18px;
        text-decoration:none;
        transition:.25s;
    }
    .nav-menu a:hover,
    .nav-menu .current-menu-item a{
        background:#FDAC1C;
        color:#2E1C12;
    }
    .navbar{
        padding: 15px 30px;
    }

    .hero{
        height:85vh;
        background-position:center center;
    }
    .hero-container{
        padding:0 50px;
    }
    .hero-content{
        max-width:700px;
    }
    .hero-orange{
        font-size:4.8rem;
    }
    .hero-white{
        font-size:2.8rem;
    }
    .hero-subtitle{
        font-size:1.2rem;
        max-width:550px;
    }
    
    .daily-life{

    min-height:600px;

    background-attachment:scroll;

}
.daily-wrapper{

    padding:80px 35px;

}
.daily-content{

    max-width:650px;

}
.daily-subtitle{

    font-size:2rem;

}
.daily-content p{

    font-size:1rem;

}

.take-wrapper{

    padding:0 5%;

}
.location-grid{

    gap:24px;

}
.location-overlay h4{

    font-size:1.8rem;

}

.tips-wrapper{

    padding:0 5%;

    gap:50px;

}
.tips-subtitle{

    font-size:2rem;

}
.tips-grid{

    gap:20px;

}
.tips-overlay h4{

    font-size:1.2rem;

}
.guide-card span{

    font-size:1.2rem;

}

.ending-wrapper{

    padding:0 5%;

    gap:25px;

}
.ending-card{

    padding:40px;

    min-height:320px;

}

/* About Pedicabs */
.pedicab-hero h1{

    font-size:3.2rem;

}

.what-pedicab-grid{

    gap:50px;

}
.what-pedicab-content h2{

    font-size:2.5rem;

}

.pedicab-history{

        padding:100px 0;

    }
    .pedicab-history-heading h2{

        font-size:2.5rem;

    }
    .history-item{

        gap:40px;

    }
    .history-timeline::before{

        left:100px;

    }
    .history-year{

        width:100px;

        font-size:1rem;

    }
    .history-content{

        padding:25px;

    }

.pedicab-unique{

    padding:100px 0;

}
.pedicab-unique-heading h2{

    font-size:2.5rem;

}
.unique-card img{

    height:220px;

}

.pedicab-community{

    padding:100px 0;

}
.pedicab-community-grid{

    gap:50px;

}
.pedicab-community-content h2{

    font-size:2.5rem;

}

.pedicab-decline{

    padding:100px 0;

}
.pedicab-decline-heading h2{

    font-size:2.5rem;

}

.pedicab-matter{

    padding:100px 0;

}
.pedicab-matter-wrapper{

    gap:50px;

}
.pedicab-matter-content h2{

    font-size:2.5rem;

}

.pedicab-cta{

    padding:150px 0;

}
.pedicab-cta-content h2{

    font-size:2.8rem;

}


/* Stories */
.stories-wrapper{

    padding:110px 5% 90px;

}
.stories-title{

    font-size:3.3rem;

}
.stories-description{

    font-size:1.05rem;

}

.featured-documentary-wrapper{

    padding:0 5%;

}
.documentary-card img{

    height:520px;

}
.documentary-content{

    left:40px;

    bottom:40px;

}
.documentary-content h2{

    font-size:2.4rem;

}

.voices-grid{

    grid-template-columns:repeat(2,1fr);

}

.story-modal-grid{

    grid-template-columns:1fr;

}
.story-video iframe{

    height:380px;

}
.story-content{

    padding:40px;

}

/* Daily Life */

.daily-content h1{

    font-size:3rem;

}
.daily-subtitle{

    font-size:1.6rem;

}

.city-remembers-grid{

    grid-template-columns:1fr;

}
.city-text h2{

    font-size:2.5rem;

}

.challenge-grid{

    grid-template-columns:1fr;

}
.daily-challenges-heading h2{

    font-size:2.4rem;

}

.continue-grid{

    grid-template-columns:repeat(2,1fr);

}
.continue-heading h2{

    font-size:2.4rem;

}

.still-stats{

    grid-template-columns:1fr;

}
.still-needed-content h2{

    font-size:2.4rem;

}

/* Tips */
.guide-hero{

    min-height:470px;

}
.guide-title{

    font-size:3.6rem;

}
.guide-subtitle{

    font-size:1.8rem;

}

.guide-purpose-wrapper{

    grid-template-columns:1fr;

    gap:45px;

    padding:0 5%;

}
.guide-purpose-content{

    align-items:center;

    text-align:center;

}
.guide-purpose-image{

    max-width:600px;

    margin:auto;

}

.ride-guide-wrapper{

    padding:0 5%;

}
.ride-guide-grid{

    gap:20px;

}

.guide-phrases-wrapper{

    padding:0 5%;

}

.guide-fares {
        padding: 90px 0;
    }
    .guide-fares-wrapper {
        padding: 0 5%;
    }
    .guide-fares-heading {
        margin-bottom: 55px;
    }
    .guide-fares-heading .section-title {
        font-size: 2.6rem;
    }
    .fare-formula {
        max-width: 750px;
        gap: 22px;
        margin-bottom: 70px;
    }
    .fare-formula-card {
        min-height: 200px;
        padding: 30px;
    }
    .fare-amount {
        font-size: 3.2rem;
    }
    .fare-estimate-section {
        padding: 45px;
        margin-bottom: 70px;
    }
    .official-fare-guide {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        margin-bottom: 80px;
    }
    .official-fare-content h3 {
        font-size: 2rem;
    }
    .fare-reminder-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .fare-reminder-card {
        min-height: 240px;
    }
    .fare-source-modal-content {
        width: min(680px, 92vw);
        padding: 45px;
    }

.guide-misunderstandings-wrapper{

    grid-template-columns:1fr;

    gap:45px;

    padding:0 5%;

}
.guide-misunderstandings-content{

    align-items:center;

    text-align:center;

}
.guide-misunderstandings-image{

    max-width:600px;

    margin:auto;

}

.guide-support-wrapper{

    padding:0 5%;

}
.guide-support-grid{

    grid-template-columns:repeat(2,1fr);

}

.guide-download {
        padding: 90px 0;
    }
    .guide-download-wrapper {
        padding: 0 5%;
    }
    .guide-download-card {
        grid-template-columns: minmax(240px, 340px) 1fr;
        gap: 45px;
        padding: 50px;
    }
    .guide-download-mockup img {
        max-width: 320px;
    }
    .guide-download-content .section-title {
        font-size: 2.5rem;
    }
    .guide-download-subtitle {
        font-size: 1.7rem;
    }
    .guide-download-content p {
        font-size: 1rem;
        line-height: 1.8;
    }

.guide-closing-wrapper{

    padding:0 5%;

}
.guide-closing-title{

    font-size:2.5rem;

}

/* About Us */
.about-wrapper{

    grid-template-columns:1fr;

    gap:50px;

    text-align:center;

}
.about-content{

    align-items:center;

    order:2;

}
.about-logo{

    order:1;

}
.page-title{

    font-size:3.2rem;

}
.about-content p{

    max-width:700px;

}
.about-logo img{

    max-width:300px;

}

.purpose-wrapper{

    max-width:760px;

    padding:0 5%;

}
.purpose-subtitle{

    font-size:2rem;

}

.team-grid{

    gap:30px;

}
.team-card{

    width:190px;

}

.process-wrapper{

    max-width:760px;

    padding:0 5%;

}
.process-subtitle{

    font-size:2rem;

}

.ethics-wrapper{

    padding:0 5%;

}
.ethics-card{

    padding:50px;

}
.ethics-subtitle{

    font-size:2rem;

}

/* Take a Ride */
.ride-content h1{

    font-size:3.5rem;

}
.ride-content p{

    font-size:1.2rem;

}

.why-ride-grid{

    grid-template-columns:1fr;

    text-align:center;

}
.why-ride-image{

    order:1;

}
.why-ride-content{

    order:2;

}
.why-ride-content h2{

    font-size:2.5rem;

}

.ride-difference{

        padding:100px 0;

    }
    
.waiting-grid{

    grid-template-columns:repeat(2,1fr);

}
.waiting-modal-content{

    flex-direction:column;

}
.waiting-modal iframe{

    width:100%;

}
.waiting-modal-text{

    width:100%;

}
.waiting-heading h2{

    font-size:2.5rem;

}

    .ride-difference h2{

        font-size:38px;

    }
    .difference-layout{

        grid-template-columns:1fr;

        gap:50px;

    }
    .difference-center{

        order:-1;

    }
    .difference-center img{

        width:300px;

        margin:auto;

        display:block;

    }
    .difference-column{

        flex-direction:row;

        flex-wrap:wrap;

        justify-content:center;

        gap:25px;

    }
    .difference-card{

        flex:1 1 320px;

    }
    
/* Comment Pop-up */
.community-modal{

    padding:18px;

}
.community-modal-content{

    width:100%;

    max-width:900px;

    padding:35px;

    max-height:88dvh;

}
.community-top{

    gap:35px;

}

/* Floating Content Button */
.page-contents {
        top: 110px;

        left: 20px;
        right: auto;

        width: 310px;
    }
    .page-contents-toggle {
        padding: 14px 18px;
        border-radius: 14px;
    }
    .page-contents-icon {
        width: 30px;
        height: 30px;

        font-size: 13px;
    }
    .page-contents-text {
        font-size: 14px;
    }
    .page-contents-menu {
        left: 0;
        right: auto;
        padding: 22px;
        border-radius: 18px;
    }
    .page-contents-heading h3 {
        font-size: 18px;
    }
    .page-content-link {
        padding: 14px 7px;
        gap: 12px;
    }
    .page-content-name {
        font-size: 14px;
    }
    .page-content-number {
        font-size: 13px;
    }
    
/* Floating Button */
.floating-actions{

        right:25px;
        bottom:25px;

        gap:12px;

    }
    .ride-fab,
    .community-fab{

        width:220px;

        padding:14px 20px;

        font-size:.95rem;

    }
.footer{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    padding: 40px 25px;
    gap: 35px;
}
.footer-left,
.footer-center,
.footer-right{
    width: 100%;
    margin: 0;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.footer-left-logo img{
    width: 220px;
}
.socials{
    justify-content: center;
    margin: 20px 0;
}
.socials img{
    width: 38px;
    height: 38px;
}
.footer-center{
    margin-left: 0;
}
.footer-center p{
    margin: 8px 0;
}
.footer-right{
    position: static;
}
.footer-right img{
    position: static;
    width: 180px;
    max-width: 100%;
    margin-top: 10px;
}    

}

/* Large Phones */
@media (max-width: 768px) { 
    .hero{
        height:80vh;
    }
    .hero-orange{
        font-size:3.5rem;
    }
    .hero-white{
        font-size:2rem;
    }

    .hero{
        height:80vh;
        justify-content:center;
        text-align:center;
        background-position:center;
    }
    .hero-container{
        padding:0 30px;
    }
    .hero-content{
        margin:auto;
        max-width:100%;
    }
    .hero-title{
        margin-bottom:20px;
    }
    .hero-orange{
        display:block;
        font-size:3.5rem;
        line-height:1;
    }
    .hero-white{
        display:block;
        font-size:2rem;
        line-height:1.2;
    }
    .hero-subtitle{
        font-size:1.05rem;
        max-width:100%;
        margin:20px auto 0;
        line-height:1.6;
    }
    
    .intro-wrapper{
        display:flex;
        flex-direction:column;
        gap:40px;
        padding:0 30px;
    }
    .intro-top{
        display:flex;
        flex-direction:column;
        text-align:center;
        gap:25px;
    }
.intro-logo img{

    width:120px;

    margin:auto;

}
.intro-content{

    width:100%;

}
.intro-content .section-title{

    text-align:center;

}
.intro-content p{

    text-align:center;

}
.intro-bottom{

    display:flex;

    flex-direction:column;

    gap:30px;

}
.mission-card{

    position:static;

    width:100%;

}
.intro-image{

    width:100%;

}
.intro-image img{

    width:100%;

    border-radius:20px;

}
.intro-info{

    display:flex;

    flex-direction:column;

    gap:20px;

}
.info-card{

    width:100%;

}
.info-grid{
    grid-template-columns:1fr;
    gap:20px;
}

.about-wrapper{

    display:flex;

    flex-direction:column;

    gap:35px;

    padding:0 30px;

}
.about-image{

    width:100%;

    order:1;

}
.about-image img{

    width:100%;

    height:auto;

    display:block;

    border-radius:20px;

}
.about-content{

    width:100%;

    order:2;

    text-align:center;

}
.about-content .section-title{

    text-align:center;

}
.about-subtitle{

    font-size:1.8rem;

    margin:15px 0 20px;

}
.about-content p{

    font-size:1rem;

    line-height:1.8;

    margin-bottom:30px;

}
.about-content .btn-primary{

    display:inline-flex;

    justify-content:center;

    align-items:center;

}

.stories-wrapper{

    display:flex;

    flex-direction:column;

    gap:35px;

    padding:0 30px;

}
.stories-content{

    width:100%;

    text-align:center;

    order:1;

}
.stories-content .section-title{

    text-align:center;

}
.stories-subtitle{

    font-size:1.8rem;

    margin:15px 0 20px;

}
.stories-content p{

    font-size:1rem;

    line-height:1.8;

    margin-bottom:30px;

}
.stories-video{

    width:100%;

    order:2;

}
.stories-video iframe{

    width:100%;

    aspect-ratio:16 / 9;

    border-radius:20px;

    display:block;

}

.daily-life{

    min-height:520px;

    text-align:center;

}
.daily-wrapper{

    padding:70px 25px;

}
.daily-content{

    max-width:100%;
    margin:0 auto;

}
.daily-content .section-title{

    text-align:center;

}
.daily-subtitle{

    font-size:1.8rem;

    margin:15px 0 20px;

}
.daily-content p{

    font-size:1rem;

    line-height:1.8;

}
.daily-content .btn-primary{

    display:inline-flex;

}


.take-wrapper{

    padding:0 30px;

}
.take-header{

    margin:0 auto 40px;

    text-align:center;

}
.take-subtitle{

    font-size:1.8rem;

}
.take-header p{

    font-size:1rem;

    line-height:1.8;

}
.location-grid{

    grid-template-columns:1fr;

    gap:20px;

}
.location-card{

    aspect-ratio:16/9;

    border-radius:20px;

}
.location-overlay{

    padding:20px;

}
.location-overlay h4{

    font-size:1.6rem;

}

.tips{

    padding:80px 0;

}
.tips-wrapper{

    grid-template-columns:1fr;

    gap:40px;

    padding:0 30px;

}
.tips-content{

    align-items:center;

    text-align:center;

}
.tips-subtitle{

    font-size:1.8rem;

}
.tips-content p{

    font-size:1rem;

    line-height:1.8;

}

/* Keep the cards in a 2×2 grid */

.tips-grid{

    grid-template-columns:repeat(2,1fr);

    gap:18px;

}
.tips-card,
.guide-card{

    border-radius:20px;

}
.tips-overlay{

    padding:16px;

}
.tips-overlay h4{

    font-size:1.1rem;

}
.guide-card span

.homepage-ending{

    padding:80px 0;

}
.ending-wrapper{

    grid-template-columns:1fr;

    padding:0 30px;

    gap:25px;

}
.ending-card{

    padding:35px;

    min-height:auto;

    border-radius:20px;

}
.ending-card .section-title{

    text-align:center;

    margin-bottom:20px;

}
.ending-card p{

    text-align:center;

    font-size:1rem;

    line-height:1.8;

    margin-bottom:30px;

}
.ending-card .btn-primary{

    align-self:center;

}

/* About Pedicabs */
.pedicab-hero{

    min-height:70vh;

}
.pedicab-hero h1{

    font-size:2.6rem;

}

.what-pedicab{

    padding:90px 0;

}
.what-pedicab-grid{

    grid-template-columns:1fr;

}
.what-pedicab-image{

    order:1;

}
.what-pedicab-content{

    order:2;

}
.what-pedicab-content h2{

    font-size:2.2rem;

}

.pedicab-history{

        padding:90px 0;

    }
    .pedicab-history-heading{

        margin-bottom:60px;

    }
    .pedicab-history-heading h2{

        font-size:2rem;

    }
    .history-timeline::before{

        left:25px;

    }
    .history-item{

        flex-direction:column;

        gap:20px;

        padding-left:60px;

        margin-bottom:50px;

    }
    .history-year{

        width:auto;

        font-size:1.1rem;

    }
    .history-content{

        padding:25px;

    }
    .history-content::before{

        left:-46px;

        top:20px;

    }
    .history-reference button{

        width:100%;

        max-width:350px;

    }
    
.pedicab-unique{

    padding:90px 0;

}
.pedicab-unique-grid{

    grid-template-columns:1fr;

}
.pedicab-unique-heading{

    margin-bottom:55px;

}
.pedicab-unique-heading h2{

    font-size:2rem;

}

.pedicab-community{

    padding:90px 0;

}
.pedicab-community-grid{

    grid-template-columns:1fr;

}
.pedicab-community-image{

    order:1;

}
.pedicab-community-content{

    order:2;

}
.pedicab-community-content h2{

    font-size:2rem;

}

.pedicab-decline{

    padding:90px 0;

}
.pedicab-decline-grid{

    grid-template-columns:1fr;

}
.pedicab-decline-heading h2{

    font-size:2rem;

}

.pedicab-matter{

    padding:90px 0;

}
.pedicab-matter-wrapper{

    grid-template-columns:1fr;

}
.pedicab-matter-image{

    order:1;

}
.pedicab-matter-content{

    order:2;

}
.pedicab-matter-content h2{

    font-size:2rem;

}

.pedicab-cta{

    padding:120px 0;

}
.pedicab-cta-content h2{

    font-size:2.2rem;

}
.pedicab-cta-buttons{

    flex-direction:column;

    align-items:center;

}
.cta-primary,
.cta-secondary{

    width:100%;
    max-width:280px;
    box-sizing:border-box;
    text-align:center;

}


/* Stories */
.stories-hero{

    min-height:620px;

}
.stories-wrapper{

    padding:100px 30px 80px;

}
.stories-content{

    max-width:100%;

}
.stories-title{

    font-size:2.5rem;

}
.stories-description{

    font-size:1rem;

    line-height:1.8;

}
.stories-note{

    font-size:.85rem;

}

.featured-documentary{

    padding:80px 0;

}
.featured-documentary-wrapper{

    padding:0 30px;

}
.documentary-card img{

    height:420px;

}
.documentary-content{

    left:25px;

    right:25px;

    bottom:25px;

}
.documentary-content h2{

    font-size:1.9rem;

}
.documentary-play{

    width:90px;

    height:90px;

}
.documentary-play i{

    font-size:2rem;

}

.voices-road{

    padding:80px 0;

}
.voices-road-wrapper{

    padding:0 30px;

}
.voices-grid{

    grid-template-columns:1fr;

}
.voice-card img{

    height:360px;

}

.story-modal{

    padding:20px;

}
.story-modal-container{

    width:100%;

}
.story-video iframe{

    height:260px;

}
.story-content{

    padding:30px;

}
.story-content h2{

    font-size:1.6rem;

}

/* Daily Life */
.daily-hero{

    min-height:80vh;

}
.daily-content h1{

    font-size:2.4rem;

}
.daily-subtitle{

    font-size:1.35rem;

}
.daily-description{

    font-size:.95rem;

}

.city-remembers{
    padding:90px 0;
}
.city-text h2{

    font-size:2rem;

}
.research-stat{

    flex-direction:column;

    align-items:flex-start;

}

.daily-divider{

    padding:100px 0;

}
.daily-divider-content blockquote{

    font-size:1.5rem;

    line-height:1.7;

}
.daily-divider-content img{

    width:55px;

}

.daily-challenges{

    padding:90px 0;

}
.challenge-card{

    padding:30px;

}
.challenge-conclusion{

    padding:35px;

}
.challenge-conclusion p{

    font-size:1.2rem;

}

.continue-grid{

    grid-template-columns:1fr;

}
.continue-moving{

    padding:90px 0;

}
.continue-heading h2{

    font-size:2rem;

}
.continue-card{

    padding:30px;

}

.still-needed{

    padding:100px 0;

}
.still-needed-content h2{

    font-size:2rem;

}
.still-quote blockquote{

    font-size:1.5rem;

}

.research-acknowledgement{

    padding:90px 0;

}
.research-icon{

    width:75px;

    height:75px;

}
.research-icon i{

    font-size:1.6rem;

}
.research-acknowledgement-content h2{

    font-size:2rem;

}
.research-acknowledgement-content p{

    font-size:1rem;

}


/* Tips */
.guide-hero{

    min-height:420px;

}
.guide-wrapper{

    padding:0 30px;

    text-align:center;

}
.guide-title{

    font-size:2.8rem;

}
.guide-subtitle{

    font-size:1.5rem;

}
.guide-wrapper p{

    margin:auto;

    font-size:1rem;

    line-height:1.8;

}

.guide-purpose{

    padding:80px 0;

}
.guide-purpose-wrapper{

    padding:0 30px;

}
.guide-purpose-subtitle{

    font-size:1.8rem;

}
.guide-purpose-content p{

    font-size:1rem;

    line-height:1.8;

}

.ride-guide{

    padding:80px 0;

}
.ride-guide-wrapper{

    padding:0 30px;

}
.ride-guide-subtitle{

    font-size:1.8rem;

    margin-bottom:40px;

}
.ride-guide-grid{

    grid-template-columns:1fr;

}
.ride-step{

    padding:25px;

}

.guide-phrases{

    padding:80px 0;

}
.guide-phrases-wrapper{

    padding:0 30px;

}
.guide-phrases-subtitle{

    font-size:1.8rem;

    margin-bottom:40px;

}
.phrase-header{

    font-size:1.1rem;

}
.phrase-cell{

    padding:16px;

    font-size:.95rem;

}

.guide-fares {
        padding: 80px 0;
    }
    .guide-fares-wrapper {
        padding: 0 30px;
    }
    .guide-fares-heading {
        margin-bottom: 45px;
    }
    .guide-fares-heading .section-title {
        font-size: 2.2rem;
    }
    .fare-introduction {
        font-size: 1rem;
        line-height: 1.8;
    }
    .fare-note {
        font-size: 0.9rem;
    }
    .fare-formula {
        grid-template-columns: 1fr;
        gap: 18px;

        max-width: 500px;

        margin: 0 auto 60px;
    }
    .fare-formula-card {
        width: 100%;
        min-height: 180px;
        padding: 28px;
    }
    .fare-plus {
        font-size: 2.3rem;
        line-height: 1;
    }
    .fare-amount {
        font-size: 3rem;
    }
    .fare-distance {
        font-size: 1.15rem;
    }
    .fare-estimate-section {
        padding: 35px;
        margin-bottom: 65px;
        border-radius: 22px;
    }
    .fare-estimate-heading {
        text-align: center;
        margin: 0 auto 30px;
    }
    .fare-estimate-heading h3 {
        font-size: 1.9rem;
    }
    .fare-table-row {
        padding: 0 22px;
        min-height: 65px;
    }
    .official-fare-guide {
        grid-template-columns: 1fr;
        gap: 35px;
        margin-bottom: 70px;
    }
    .official-fare-image {
        max-width: 550px;
        margin: auto;
    }
    .official-fare-content {
        align-items: center;
        text-align: center;
    }
    .official-fare-content h3 {
        font-size: 1.9rem;
    }
    .official-fare-content p {
        font-size: 0.95rem;
        line-height: 1.8;
    }
    .fare-reminders-heading {
        margin-bottom: 35px;
    }
    .fare-reminders-heading h3 {
        font-size: 2rem;
    }
    .fare-reminder-grid {
        grid-template-columns: 1fr;
        max-width: 550px;
        margin: auto;
    }
    .fare-reminder-card {
        min-height: auto;
        padding: 30px;
    }
    .fare-source-modal {
        padding: 20px;
    }
    .fare-source-modal-content {
        width: 100%;
        max-height: calc(100dvh - 40px);
        padding: 40px 30px;
        border-radius: 22px;
    }
    .fare-source-modal-content h2 {
        font-size: 2rem;
    }

.guide-misunderstandings{

    padding:80px 0;

}
.guide-misunderstandings-wrapper{

    padding:0 30px;

}
.guide-misunderstandings-subtitle{

    font-size:1.8rem;

}
.guide-misunderstandings-content p{

    font-size:1rem;

    line-height:1.8;

}

.guide-support{

    padding:80px 0;

}
.guide-support-wrapper{

    padding:0 30px;

}
.guide-support-subtitle{

    font-size:1.8rem;

}
.guide-support-intro{

    font-size:1rem;

    margin-bottom:40px;

}
.guide-support-grid{

    grid-template-columns:1fr;

}

.guide-download {
        padding: 80px 0;
    }
    .guide-download-wrapper {
        padding: 0 30px;
    }
    .guide-download-card {
        grid-template-columns: 1fr;
        gap: 35px;

        padding: 45px 35px;

        text-align: center;
    }
    .guide-download-mockup {
        width: 100%;
        justify-content: center;
    }
    .guide-download-mockup img {
        width: 100%;
        max-width: 330px;
    }
    .guide-download-content {
        align-items: center;
        text-align: center;
    }
    .guide-download-label {
        text-align: center;
    }
    .guide-download-content .section-title {
        text-align: center;
        font-size: 2.3rem;
    }
    .guide-download-subtitle {
        text-align: center;
        font-size: 1.7rem;
    }
    .guide-download-content p {
        max-width: 600px;
        font-size: 1rem;
        line-height: 1.8;
        text-align: center;
    }
    .download-btn {
        padding: 16px 30px;
    }

.guide-closing{

    padding:100px 0;

}
.guide-closing-wrapper{

    padding:0 30px;

}
.guide-closing-title{

    font-size:2rem;

}
.guide-closing-wrapper p{

    font-size:1rem;

}
.guide-closing-buttons{

    flex-direction:column;

    align-items:center;

}
.guide-closing-buttons a{

    width:100%;

    max-width:320px;

}

/* About Us */
.about-hero{

    padding:80px 0;

}
.about-wrapper{

    padding:0 30px;

}
.page-title{

    font-size:2.6rem;

}
.about-content p{

    font-size:1rem;

    line-height:1.8;

}
.about-logo img{

    max-width:240px;

}

.about-purpose{

    padding:80px 0;

}
.purpose-wrapper{

    padding:0 30px;

}
.purpose-subtitle{

    font-size:1.8rem;

}
.purpose-wrapper p{

    font-size:1rem;

    line-height:1.8;

}

.about-team{

    padding:80px 0;

}
.team-wrapper{

    padding:0 30px;

}
.team-subtitle{

    font-size:1.8rem;

}
.team-description{

    margin-bottom:50px;

}
.team-grid{

    grid-template-columns:1fr;

    gap:30px;

}
.team-card{

    width:280px;

}

.about-process{

    padding:80px 0;

}
.process-wrapper{

    padding:0 30px;

}
.process-subtitle{

    font-size:1.8rem;

}
.process-wrapper p{

    font-size:1rem;

    line-height:1.8;

}

.about-ethics{

    padding:80px 0;

}
.ethics-wrapper{

    padding:0 30px;

}
.ethics-card{

    padding:35px;

    border-radius:20px;

}
.ethics-subtitle{

    font-size:1.8rem;

}
.ethics-card p{

    font-size:1rem;

    line-height:1.8;

}

/* Take a Ride */
.ride-hero{

    min-height:75vh;

}
.ride-content{

    max-width:100%;

}
.ride-content h1{

    font-size:2.8rem;

}
.ride-content p{

    font-size:1.05rem;

}

.why-ride{

    padding:90px 0;

}
.why-ride-image img{

    max-width:250px;

}
.why-ride-content h2{

    font-size:2rem;

}

.experience-grid{

    grid-template-columns:1fr;

}
.experience-heading h2{

    font-size:2.2rem;

}
.experience-card img{

    height:260px;

}

.experience-modal-grid{

    grid-template-columns:1fr;

}
.experience-modal-content{

    padding:35px;

}

.ride-difference{

        padding:80px 0;

    }
    
.waiting-areas{

    padding:90px 0;

}
.waiting-grid{

    grid-template-columns:1fr;

}
.waiting-filter{

    padding:30px;

}
.waiting-filter-buttons{

    flex-direction:column;

}
.waiting-filter-buttons button{

    width:100%;

    justify-content:center;

}
.waiting-heading h2{

    font-size:2rem;

}
.waiting-modal{

    padding:20px;

}
.waiting-modal iframe{

    height:320px;

}
.waiting-modal-text{

    padding:30px;

}

    .ride-difference h2{

        font-size:30px;

        line-height:1.4;

    }
    .section-description{

        font-size:16px;

        margin:25px auto 50px;

    }
    .difference-column{

        flex-direction:column;

    }
    .difference-card{

        padding:30px;

    }
    .difference-icon{

        width:60px;

        height:60px;

        font-size:24px;

    }
    .difference-center img{

        width:240px;

    }
    
    .floating-actions{

        right:20px;
        bottom:20px;

        gap:10px;

    }

    .ride-fab,
    .community-fab{

        width:200px;

        padding:13px 18px;

        font-size:.9rem;

    }
    
/* Comment Pop-up */ 
.community-modal{

    padding:15px;

    align-items:flex-start;

}
.community-modal-content{

    width:100%;

    margin:20px 0;

    padding:25px;

    max-height:calc(100dvh - 40px);

    border-radius:22px;

}
.community-top{

    grid-template-columns:1fr;

    gap:25px;

}
.close-community{
    top: 14px;
    right: 14px;
    
    width: 38px;
    height: 38px;
    
    font-size: 24px;
}
.responses{

    grid-template-columns:1fr;

}
.form-bottom{

    flex-direction:column;

}
.form-bottom input,
.form-bottom button{

    width:100%;

}

/* floating Content Button */
.page-contents {
        top: 90px;

        left: 15px;
        right: auto;

        width: 260px;
    }
    .page-contents-toggle {
        padding: 12px 15px;

        border-radius: 14px;

        gap: 10px;
    }
    .page-contents-icon {
        width: 28px;
        height: 28px;

        font-size: 12px;
    }
    .page-contents-text {
        font-size: 13px;
    }
    .page-contents-arrow {
        font-size: 12px;
    }
    .page-contents-menu {
        left: 0;
        right: auto;
        top: calc(100% + 8px);

        padding: 20px;

        border-radius: 16px;

        max-height: 65vh;
        overflow-y: auto;
    }
    .page-contents-heading {
        margin-bottom: 15px;
    }
    .page-contents-heading span {
        font-size: 10px;

        letter-spacing: 1.5px;
    }
    .page-contents-heading h3 {
        font-size: 17px;
    }
    .page-content-link {
        padding: 13px 6px;

        gap: 10px;
    }
    .page-content-number {
        min-width: 25px;

        font-size: 12px;
    }
    .page-content-name {
        font-size: 13px;
    }
}

/* Small Phones */
@media (max-width: 576px) { 
    .hero{
        height:75vh;
    }
    .hero-orange{
        font-size:2.9rem;
    }
    .hero-white{
        font-size:1.6rem;
    }
	
    .hero{
        height:75vh;
    }
    .hero-container{
        padding:0 20px;
    }
    .hero-orange{
        font-size:2.9rem;
    }
    .hero-white{
        font-size:1.6rem;
    }
    .hero-subtitle{
        font-size:.95rem;
    }
    
    .intro-wrapper{

    padding:0 20px;

}
.intro-logo img{

    width:95px;

}
.mission-card{

    box-sizing:border-box;

}
.intro-content p{

    font-size:.95rem;

}
.info-card{

    padding:25px;

}

.about-wrapper{

    padding:0 20px;

    gap:30px;

}
.about-subtitle{

    font-size:1.5rem;

}
.about-content p{

    font-size:.95rem;

}
.about-image img{

    border-radius:16px;

}

.stories-wrapper{

    padding:0 20px;

}
.stories-subtitle{

    font-size:1.5rem;

}
.stories-content p{

    font-size:.95rem;

}
.stories-video iframe{

    border-radius:16px;

}

.daily-life{

    min-height:450px;

}
.daily-wrapper{

    padding:60px 20px;

}
.daily-subtitle{

    font-size:1.5rem;

}
.daily-content p{

    font-size:.95rem;

}

.take-a-ride{

    padding:80px 0;

}
.take-wrapper{

    padding:0 20px;

}
.take-subtitle{

    font-size:1.5rem;

}
.take-header p{

    font-size:.95rem;

}
.location-grid{

    gap:16px;

}
.location-card{

    border-radius:16px;

}
.location-overlay{

    padding:16px;

}
.location-overlay h4{

    font-size:1.3rem;

}

.tips{

    padding:70px 0;

}
.tips-wrapper{

    padding:0 20px;

}
.tips-subtitle{

    font-size:1.5rem;

}
.tips-content p{

    font-size:.95rem;

}
.tips-grid{

    grid-template-columns:1fr;

    gap:16px;

}
.tips-card,
.guide-card{

    aspect-ratio:16/9;

    border-radius:16px;

}
.tips-overlay{

    padding:14px;

}
.tips-overlay h4{

    font-size:1.2rem;

}
.guide-card span{

    font-size:1.1rem;

}

.homepage-ending{

    padding:70px 0;

}
.ending-wrapper{

    padding:0 20px;

}
.ending-card{

    padding:28px;

    border-radius:16px;

}
.ending-card p{

    font-size:.95rem;

}
.ending-card .btn-primary{

    width:100%;

    justify-content:center;

    text-align:center;

}

/* About Pedicabs */
.pedicab-hero{

    min-height:65vh;

}
.pedicab-hero h1{

    font-size:2rem;

}
.pedicab-hero p{

    font-size:.95rem;

}

.what-pedicab-content h2{

    font-size:1.8rem;

}
.what-pedicab-content p{

    font-size:.95rem;

    line-height:1.8;

}

 .pedicab-history{

        padding:80px 0;

    }
    .pedicab-history-heading h2{

        font-size:1.8rem;

    }
    .pedicab-history-heading p{

        font-size:.95rem;

        line-height:1.8;

    }
    .history-item{

        padding-left:45px;

        margin-bottom:40px;

    }
    .history-timeline::before{

        left:18px;

    }
    .history-content{

        padding:20px;

    }
    .history-content h3{

        font-size:1.1rem;

    }
    .history-content p{

        font-size:.95rem;

        line-height:1.7;

    }
    .history-content::before{

        width:16px;

        height:16px;

        left:-34px;

    }
    .history-reference-content{

        padding:30px 25px;

    }
    .history-reference-content h3{

        font-size:1.3rem;

    }
    .history-reference-content li{

        font-size:.95rem;

    }
    
.pedicab-unique{

    padding:80px 0;

}
.pedicab-unique-heading h2{

    font-size:1.8rem;

}
.unique-card img{

    height:200px;

}
.unique-content{

    padding:22px;

}
.unique-content p{

    font-size:.95rem;

}

.pedicab-community{

    padding:80px 0;

}
.pedicab-community-content h2{

    font-size:1.8rem;

}
.pedicab-community-content p{

    font-size:.95rem;

    line-height:1.8;

}

.pedicab-decline{

    padding:80px 0;

}
.pedicab-decline-heading h2{

    font-size:1.8rem;

}
.decline-card{

    padding:25px;

}
.decline-card p{

    font-size:.95rem;

}
.decline-button{

    display:block;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    text-align:center;

}

.pedicab-matter{

    padding:80px 0;

}
.pedicab-matter-content h2{

    font-size:1.8rem;

}
.pedicab-matter-content p{

    font-size:.95rem;

    line-height:1.8;

}
.matter-button{

    display:block;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    text-align:center;

}

.pedicab-cta{

    padding:90px 0;

}
.pedicab-cta-content h2{

    font-size:1.8rem;

}
.pedicab-cta-content p{

    font-size:.95rem;

    line-height:1.8;

}
.cta-primary,
.cta-secondary{

    display:block;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    text-align:center;

}


/* Stories */
.stories-wrapper{

    padding:90px 20px 70px;

}
.stories-title{

    font-size:2rem;

}
.stories-label{

    font-size:.8rem;

}
.stories-description{

    font-size:.95rem;

}
.stories-note{

    font-size:.8rem;

}

.featured-documentary{

    padding:70px 0;

}
.featured-documentary-wrapper{

    padding:0 20px;

}
.documentary-card{

    border-radius:20px;

}
.documentary-card img{

    height:360px;

}
.documentary-content h2{

    font-size:1.5rem;

}
.documentary-content p{

    font-size:.9rem;

}
.documentary-play{

    width:75px;

    height:75px;

}
.documentary-play i{

    font-size:1.6rem;

}

.voices-road-wrapper{

    padding:0 20px;

}
.voice-overlay{

    padding:22px;

}
.voice-overlay h4{

    font-size:1.25rem;

}

.story-content{

    padding:25px;

}
.story-content h2{

    font-size:1.35rem;

}
.story-content p{

    font-size:.95rem;

}

/* Daily Life */
.daily-content h1{

    font-size:2rem;

}
.daily-subtitle{

    font-size:1.15rem;

}

.daily-challenges-heading h2{

    font-size:2rem;

}
.challenge-number{

    width:50px;

    height:50px;

    font-size:.9rem;

}
.challenge-card h3{

    font-size:1.3rem;

}

/* Tips */ 
.guide-wrapper{

    padding:0 20px;

}
.guide-title{

    font-size:2.2rem;

}
.guide-subtitle{

    font-size:1.25rem;

}
.guide-wrapper p{

    font-size:.95rem;

}

.guide-purpose{

    padding:70px 0;

}
.guide-purpose-wrapper{

    padding:0 20px;

}
.guide-purpose-subtitle{

    font-size:1.5rem;

}
.guide-purpose-content p{

    font-size:.95rem;

}
.guide-purpose-image{

    border-radius:16px;

}

.ride-guide{

    padding:70px 0;

}
.ride-guide-wrapper{

    padding:0 20px;

}
.ride-guide-subtitle{

    font-size:1.5rem;

}
.ride-step{

    padding:20px;

}
.ride-step h4{

    font-size:1.05rem;

}
.ride-step p{

    font-size:.95rem;

}

.guide-phrases{

    padding:70px 0;

}
.guide-phrases-wrapper{

    padding:0 20px;

}
.guide-phrases-subtitle{

    font-size:1.5rem;

}
.phrases-grid{

    gap:10px;

}
.phrase-header{

    font-size:1rem;

    padding:14px;

}
.phrase-cell{

    padding:14px;

    font-size:.9rem;

}

.guide-fares {
        padding: 70px 0;
    }
    .guide-fares-wrapper {
        padding: 0 20px;
    }
    .guide-fares-heading {
        margin-bottom: 40px;
    }
    .fare-label {
        font-size: 0.75rem;
        letter-spacing: 2px;
    }
    .guide-fares-heading .section-title {
        font-size: 1.8rem;
        line-height: 1.2;
        overflow-wrap: break-word;
    }
    .fare-introduction {
        font-size: 0.95rem;
        line-height: 1.75;
    }
    .fare-note {
        font-size: 0.85rem;
        line-height: 1.6;
    }
    .fare-formula {
        width: 100%;
        margin-bottom: 50px;
    }
    .fare-formula-card {
        min-height: 160px;
        padding: 25px 20px;
        border-radius: 20px;
    }
    .fare-amount {
        font-size: 2.6rem;
    }
    .fare-distance {
        font-size: 1.05rem;
    }
    .fare-formula-card p {
        font-size: 0.85rem;
    }
    .fare-plus {
        font-size: 2rem;
    }
    .fare-estimate-section {
        padding: 25px 18px;
        margin-bottom: 55px;
        border-radius: 18px;
    }
    .fare-estimate-heading h3 {
        font-size: 1.6rem;
    }
    .fare-estimate-heading p {
        font-size: 0.9rem;
    }
    .fare-table {
        border-radius: 14px;
    }
    .fare-table-row {
        grid-template-columns: 1fr auto;
        gap: 15px;

        min-height: 60px;

        padding: 12px 15px;
    }
    .fare-table-row span {
        font-size: 0.85rem;
    }
    .fare-table-row strong {
        font-size: 1rem;
        white-space: nowrap;
    }
    .fare-table-header span {
        font-size: 0.8rem;
    }
    .official-fare-guide {
        gap: 28px;
        margin-bottom: 60px;
    }
    .official-fare-image {
        border-radius: 18px;
    }
    .official-fare-content h3 {
        font-size: 1.6rem;
    }
    .official-fare-content p {
        font-size: 0.9rem;
    }
    .fare-source-button {
        width: 100%;
        padding: 14px 20px;
        box-sizing: border-box;
    }
    .fare-reminders-heading h3 {
        font-size: 1.7rem;
    }
    .fare-reminder-grid {
        width: 100%;
    }
    .fare-reminder-card {
        width: 100%;
        padding: 25px;
        border-radius: 18px;
    }
    .fare-reminder-number {
        font-size: 1.7rem;
        margin-bottom: 18px;
    }
    .fare-reminder-card h4 {
        font-size: 1.2rem;
    }
    .fare-reminder-card p {
        font-size: 0.9rem;
    }
    .fare-source-modal {
        padding: 12px;
        align-items: center;
    }
    .fare-source-modal-content {
        width: 100%;
        max-height: calc(100dvh - 24px);

        padding: 50px 20px 25px;

        border-radius: 18px;

        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .close-fare-source {
        top: 12px;
        right: 12px;

        width: 36px;
        height: 36px;

        font-size: 23px;
    }
    .fare-source-modal-content h2 {
        font-size: 1.6rem;
        margin: 0 45px 18px 0;
    }
    .fare-source-modal-content > p {
        font-size: 0.9rem;
    }
    .fare-source-item {
        padding: 20px;
    }
    .fare-source-item h3 {
        font-size: 1.05rem;
    }
    .fare-source-item p {
        font-size: 0.9rem;
    }

.guide-misunderstandings{

    padding:70px 0;

}
.guide-misunderstandings-wrapper{

    padding:0 20px;

}
.guide-misunderstandings-subtitle{

    font-size:1.5rem;

}
.guide-misunderstandings-content p{

    font-size:.95rem;

}
.guide-misunderstandings-image

.guide-support{

    padding:70px 0;

}
.guide-support-wrapper{

    padding:0 20px;

}
.guide-support-subtitle{

    font-size:1.5rem;

}
.guide-support-intro{

    font-size:.95rem;

}
.support-card{

    padding:28px 22px;

}
.support-icon{

    font-size:2rem;

}

.guide-download {
        padding: 70px 0;
    }
    .guide-download-wrapper {
        padding: 0 20px;
    }
    .guide-download-card {
        grid-template-columns: 1fr;

        gap: 30px;

        padding: 35px 20px;

        border-radius: 20px;

        width: 100%;

        box-sizing: border-box;
    }
    .guide-download-mockup img {
        width: 100%;
        max-width: 260px;
    }
    .guide-download-label {
        font-size: .75rem;
        letter-spacing: 1.5px;
    }
    .guide-download-content .section-title {
        font-size: 2rem;
        line-height: 1.15;
        overflow-wrap: break-word;
    }
    .guide-download-subtitle {
        font-size: 1.4rem;
        line-height: 1.4;
        margin: 12px 0 18px;
    }
    .guide-download-content p {
        font-size: .95rem;
        line-height: 1.75;
        margin-bottom: 28px;
    }
    .download-btn {
        width: 100%;

        justify-content: center;

        padding: 15px 20px;

        box-sizing: border-box;
    }

.guide-closing{

    padding:80px 0;

}
.guide-closing-wrapper{

    padding:0 20px;

}
.guide-closing-title{

    font-size:1.6rem;

}
.guide-closing-wrapper p{

    font-size:.95rem;

}

/* About Us */
.about-wrapper{

    padding:0 20px;

}
.page-title{

    font-size:2.2rem;

}
.about-content p{

    font-size:.95rem;

}
.about-logo img{

    max-width:190px;

}

.about-purpose{

    padding:70px 0;

}
.purpose-wrapper{

    padding:0 20px;

}
.purpose-subtitle{

    font-size:1.5rem;

}
.purpose-wrapper p{

    font-size:.95rem;

}

.team-wrapper{

    padding:0 20px;

}
.team-subtitle{

    font-size:1.5rem;

}
.team-description{

    font-size:.95rem;

}
.team-card{

    width:100%;

    max-width:280px;

}

.about-process{

    padding:70px 0;

}
.process-wrapper{

    padding:0 20px;

}
.process-subtitle{

    font-size:1.5rem;

}
.process-wrapper p{

    font-size:.95rem;

}

.about-ethics{

    padding:70px 0;

}
.ethics-wrapper{

    padding:0 20px;

}
.ethics-card{

    padding:28px;

    border-radius:16px;

}
.ethics-subtitle{

    font-size:1.5rem;

}
.ethics-card p{

    font-size:.95rem;

}

/* Take a Ride */
.ride-content h1{

    font-size:2.3rem;

}

.ride-difference{

        padding:60px 0;

    }
    .ride-difference h2{

        font-size:24px;

    }
    .section-label{

        font-size:13px;

        letter-spacing:2px;

    }
    .section-description{

        font-size:15px;

        line-height:1.7;

    }
    .difference-card{

        padding:25px;

        border-radius:18px;

    }
    .difference-card h3{

        font-size:20px;

    }
    .difference-card p{

        font-size:15px;

    }
    .difference-icon{

        width:55px;

        height:55px;

        font-size:20px;

    }
    .difference-center img{

        width:200px;

    }
    
.waiting-heading h2{

    font-size:1.8rem;

}
.waiting-heading p{

    font-size:.95rem;

}
.waiting-location{

    font-size:1rem;

}
.waiting-badge{

    font-size:.7rem;

}
.waiting-modal iframe{

    height:240px;

}
.waiting-modal-text{

    padding:25px;

}

/* Comment Pop-up */
.community-modal{

    padding:10px;

}
.community-modal-content{

    padding:18px;

    border-radius:18px;

    max-height:calc(100dvh - 20px);

}
.close-community{

    top:14px;

    right:16px;

    font-size:28px;

}
.community-left h2{

    font-size:34px;

}
.community-left h3{

    font-size:18px;

}
.community-left p{

    font-size:15px;

}
.comment-box{

    padding:18px;

}
.comment-box textarea{

    min-height:110px;

}

/* Floating Content Button */
.page-contents {
        top: auto;

        left: 18px;
        right: auto;

        bottom: 25px;

        width: auto;

        z-index: 9500;
    }
    .page-contents-toggle {
        width: 54px;
        height: 54px;

        padding: 0;

        display: flex;
        justify-content: center;
        align-items: center;

        border-radius: 50%;

        background: #2E1C12;

        box-shadow:
            0 8px 25px rgba(0, 0, 0, 0.25);

        gap: 0;
    }
    .page-contents-text {
        display: none;
    }
    .page-contents-icon {
        width: auto;
        height: auto;

        background: transparent;

        color: #FDAC1C;

        font-size: 20px;
    }
    .page-contents-arrow {
        display: none;
    }
    .page-contents-toggle:hover {
        transform: none;

        background: #FDAC1C;
    }
    .page-contents-toggle:hover .page-contents-icon {
        background: transparent;

        color: #2E1C12;
    }
    .page-contents-menu {
        position: absolute;

        top: auto;

        right: 0;
        bottom: calc(100% + 12px);

        width: min(320px, calc(100vw - 36px));

        padding: 20px;

        border-radius: 18px;

        max-height: 60vh;

        overflow-y: auto;

        transform: translateY(10px);

        box-sizing: border-box;
    }
    .page-contents.open .page-contents-menu {
        transform: translateY(0);
    }
    .page-contents.open .page-contents-toggle {
        background: #FDAC1C;
    }
    .page-contents.open .page-contents-icon {
        background: transparent;

        color: #2E1C12;
    }
    .page-contents-heading {
        margin-bottom: 14px;
    }
    .page-contents-heading span {
        font-size: 10px;

        letter-spacing: 1.5px;
    }
    .page-contents-heading h3 {
        font-size: 17px;
    }
    .page-content-link {
        padding: 13px 5px;

        gap: 10px;
    }
    .page-content-number {
        min-width: 25px;

        font-size: 12px;
    }
    .page-content-name {
        font-size: 13px;

        line-height: 1.4;
    }
    .page-content-link:hover {
        padding-left: 5px;
    }

/* Floating Button */
.floating-actions{

    gap:15px;

}

.ride-fab,
.community-fab{

    position:relative;

    width:56px;
    height:56px;

    padding:0;

    border-radius:50%;

    overflow:visible;

}

.fab-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:56px;
    height:56px;

    font-size:1.4rem;

}

.fab-label{

    position:absolute;

    right:68px;

    white-space:nowrap;

    background:white;

    color:var(--brown);

    padding:10px 16px;

    border-radius:30px;

    font-size:.9rem;

    font-weight:600;

    box-shadow:0 5px 15px rgba(0,0,0,.18);

    opacity:1;

    transform:translateX(0);

    transition:.35s ease;

    pointer-events:none;

}

.floating-actions.hide-labels .fab-label{

    opacity:0;

    transform:translateX(20px);

}


}