#how-to-reach{

padding:90px 0;

}

.container{

width:min(1500px,92%);
margin:auto;

}

.heading{

text-align:center;
margin-bottom:48px;

}

.eyebrow{

display:inline-block;

padding:8px 18px;

background:#E8F1FF;

color:#0A66FF;

font-size:13px;
font-weight:700;
letter-spacing:1px;

border-radius:999px;

margin-bottom:22px;

}

.heading h2{

font-size:58px;
font-weight:800;

margin-bottom:18px;

}

.subtitle{

font-size:21px;

color:#6B7280;

max-width:760px;

margin:auto;

line-height:1.8;

}

.route-selector{

display:flex;

justify-content:center;

gap:20px;

margin-bottom:45px;

}

.route-btn{

border:none;

background:white;

padding:18px 34px;

border-radius:999px;

font-size:17px;

font-weight:700;

cursor:pointer;

transition:
background .35s,
color .35s,
transform .35s,
box-shadow .35s;

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

}

.route-btn.active{

background:#0A66FF;

color:white;

}

.map-container{

position:relative;

width:100%;

aspect-ratio:1200/675;

height:auto;

overflow:hidden;

border-radius:32px;

background:#F7F9FC;

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

}

.map-container img{

width:100%;
height:100%;

display:block;

object-fit:cover;

user-select:none;

pointer-events:none;

}

.bottom-actions{

display:flex;

justify-content:center;

margin-top:40px;

}

.google-btn{

background:#0A66FF;

color:white;

border:none;

padding:18px 34px;

font-size:17px;

font-weight:700;

border-radius:999px;

cursor:pointer;

transition:.35s;

box-shadow:0 15px 35px rgba(10,102,255,.25);

}

.google-btn:hover{

transform:translateY(-4px);

box-shadow:0 20px 45px rgba(10,102,255,.35);

}

#routeSVG{

position:absolute;

inset:0;

width:100%;

height:100%;

pointer-events:none;

}



#routePath{

stroke:#0A66FF;
stroke-width:10;
fill:none;

stroke-linecap:round;
stroke-linejoin:round;

filter:drop-shadow(0 0 10px rgba(10,102,255,.35));

}

#routeVehicle{

opacity:0;

filter:drop-shadow(0 0 16px rgba(10,102,255,.55));

transform-box:fill-box;

transform-origin:center;

}

@media(max-width:991px){

.heading h2{

font-size:42px;

}

.route-selector{

flex-direction:row;

align-items:center;

gap:10px;

}

.route-btn{

padding:15px 20px;

font-size:14px;

white-space:nowrap;

}

.map-container{

aspect-ratio:1200/675;

height:auto;

}

}

.destination-card{

width:min(860px,94%);

margin:-12px auto 0;

position:relative;

z-index:20;

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

backdrop-filter:blur(22px);

border-radius:28px;

overflow:hidden;

box-shadow:0 25px 80px rgba(0,0,0,.12);

opacity:0;

transform:translateY(60px) scale(.96);

transition:.7s cubic-bezier(.22,1,.36,1);

pointer-events:none;

}

.destination-card.show{

opacity:1;

transform:translateY(0) scale(1);

pointer-events:auto;

}

.destination-card img{

width:100%;
height:340px;

object-fit:cover;

display:block;

transition:transform .8s ease;

}

.destination-card.show img{

transform:scale(1.04);

}

.destination-content{

padding:42px;

display:flex;

flex-direction:column;

gap:14px;

}

.destination-badge{

display:inline-flex;

align-items:center;

width:fit-content;

padding:8px 16px;

background:#EAF3FF;

color:#0A66FF;

font-size:12px;

font-weight:700;

border-radius:999px;

letter-spacing:1px;

}

.destination-content h3{

font-size:38px;

font-weight:800;

line-height:1.15;

color:#111827;

margin:0;

}

.destination-content p{

font-size:17px;

line-height:1.8;

color:#6B7280;

margin:0;

}

.close-card{

position:absolute;

right:18px;
top:18px;

width:42px;
height:42px;

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

border:none;

background:white;
color:#111827;

border-radius:50%;

cursor:pointer;

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

line-height:1;

box-shadow:0 10px 25px rgba(0,0,0,.16);

z-index:30;

opacity:1;
visibility:visible;

transition:
transform .25s ease,
box-shadow .25s ease;

}

.close-card:hover{

transform:scale(1.08);

box-shadow:0 14px 30px rgba(0,0,0,.2);

}

.destination-card::before{

content:"";

position:absolute;

left:0;
right:0;
top:0;

height:4px;

background:linear-gradient(
90deg,
#0A66FF,
#5AA8FF,
#0A66FF
);

transform:scaleX(0);

transform-origin:left;

transition:1s;

}

.destination-card.show::before{

transform:scaleX(1);

}

.destination-card:hover{

transform:translateY(-6px);

box-shadow:0 40px 90px rgba(0,0,0,.16);

}

.destination-map-btn{

display:inline-flex;

align-items:center;

justify-content:center;

width:fit-content;

margin-top:22px;

padding:14px 26px;

background:#0A66FF;

color:white;

font-weight:700;

text-decoration:none;

border-radius:999px;

transition:.3s;

}

.destination-map-btn:hover{

transform:translateY(-3px);

box-shadow:0 18px 35px rgba(10,102,255,.25);

}

.arrival-title{

text-align:center;

margin:55px 0 20px;

font-size:26px;

font-weight:600;

color:#111827;

opacity:0;

transform:translateY(20px);

transition:.5s;

}

.arrival-title.show{

opacity:1;

transform:translateY(0);

}

/* ===========================
   V2 CAMERA SYSTEM
=========================== */

.map-stage{

position:absolute;

left:0;
top:0;

width:100%;
height:100%;

transform-origin:center center;

will-change:transform;

}

/* ===========================
   MAP WRAPPER
=========================== */

.map-wrapper{

    position:relative;
    width:100%;

}

/* ===========================
   NAVIGATION CARD
=========================== */

.nav-instruction{

    display:flex;
    align-items:center;

    gap:14px;

    padding:14px 18px;

    width:max-content;

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

    backdrop-filter:blur(18px);

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

    border-radius:18px;

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

    opacity:0;

    transform:translateY(-12px);

    transition:
        opacity .4s ease,
        transform .4s ease;

    pointer-events:none;

    z-index:100;

}


/* ===========================
   NAVIGATION SHOW
=========================== */

.nav-instruction.show{

    opacity:1;

    transform:translateY(0);

}


/* ===========================
   DESKTOP
   Navigation ON MAP
   Top Right
=========================== */

@media(min-width:992px){

    .nav-instruction{

        position:absolute;

        top:24px;
        right:24px;

        margin:0;

    }

}


/* ===========================
   NAVIGATION ICON
=========================== */

.nav-icon{

    width:42px;
    height:42px;

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

    flex-shrink:0;

    background:#0A66FF;

    color:white;

    border-radius:13px;

    font-size:22px;

    font-weight:700;

    box-shadow:
        0 8px 20px rgba(10,102,255,.25);

}


/* ===========================
   NAVIGATION TEXT
=========================== */

.nav-text{

    display:flex;

    flex-direction:column;

    gap:3px;

}

.nav-label{

    font-size:10px;

    font-weight:800;

    letter-spacing:1.2px;

    color:#0A66FF;

}

.nav-text strong{

    font-size:15px;

    font-weight:700;

    color:#111827;

}

.nav-text small{

    font-size:12px;

    color:#6B7280;

}


/* ===========================
   MOBILE
   Navigation BELOW MAP
=========================== */

@media(max-width:991px){

    .nav-instruction{

        position:relative;

        width:calc(100% - 28px);

        margin:14px auto 0;

        padding:12px 14px;

        border-radius:16px;

    }

    .nav-icon{

        width:38px;
        height:38px;

        min-width:38px;

        border-radius:11px;

        font-size:20px;

    }

    .nav-text strong{

        font-size:13px;

    }

    .nav-text small{

        font-size:11px;

    }

}

/* ===========================
   V2 DESTINATION REVEAL
=========================== */

#destinationDot{

animation:destinationPulse 1.8s ease-in-out infinite;

}

@keyframes destinationPulse{

0%{

r:9;
opacity:1;

}

50%{

r:15;
opacity:.45;

}

100%{

r:9;
opacity:1;

}

}

.destination-focus #destinationDot{

filter:
drop-shadow(0 0 8px rgba(10,102,255,.7))
drop-shadow(0 0 22px rgba(10,102,255,.35));

}

/* ===========================
   DESTINATION CAMERA FOCUS
=========================== */

.map-stage.destination-focus{

    transition:
        transform 1.2s cubic-bezier(.22,1,.36,1);

}


/* Balewadi arrival */

.map-stage.destination-focus.balewadi-arrival{

    transform:
        translate(50px, -65px)
        scale(1.32) !important;

}


/* University Circle arrival */

.map-stage.destination-focus.university-arrival{

    transform:
        translate(30px, -55px)
        scale(1.32) !important;

}

/* ===========================
   ROUTE SWITCH TRANSITION
=========================== */

.map-stage.route-switching{

    opacity:.35;

    transform:
        scale(1.02);

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

}

/* ===========================
   ROUTE GLOW
=========================== */

#routeGlow{

    filter:
        drop-shadow(0 0 12px rgba(90,168,255,.45));

    pointer-events:none;

}

/* =========================================================
   FINAL RESPONSIVE NAVIGATION POSITIONING
   ========================================================= */

/* DESKTOP
   Navigation stays INSIDE the map, top-right
*/
@media (min-width: 992px) {

    .map-wrapper {
        position: relative;
    }

    .map-container {
        position: relative;
    }

    .map-wrapper > .nav-instruction {
        position: absolute !important;

        top: 24px !important;
        right: 24px !important;
        left: auto !important;
        bottom: auto !important;

        width: max-content !important;
        margin: 0 !important;

        z-index: 100 !important;
    }

}


/* MOBILE
   Navigation moves BELOW the map
   and ABOVE Google Maps button
*/
@media (max-width: 991px) {

    .map-wrapper {
        position: relative;

        display: flex;
        flex-direction: column;
    }

    .map-container {
        position: relative;
        width: 100%;
    }

    .map-wrapper > .nav-instruction {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: calc(100% - 28px) !important;

        margin: 14px auto 0 !important;

        z-index: 100 !important;

        transform: translateY(-12px);
    }

    .map-wrapper > .nav-instruction.show {
        transform: translateY(0);
    }

}

/* =========================================
   FINAL MOBILE NAVIGATION POSITION
   Navigation BELOW MAP and ABOVE BUTTON
========================================= */

@media (max-width: 991px) {

    #how-to-reach .map-container {
        height: auto;
        aspect-ratio: auto;
        overflow: visible;
        box-shadow: none;
        background: transparent;
    }

    #how-to-reach .map-stage {
        position: relative;
        left: auto;
        top: auto;

        width: 100%;
        height: auto;
        aspect-ratio: 1200 / 675;

        overflow: hidden;

        border-radius: 32px;
        background: #F7F9FC;

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

    #how-to-reach .nav-instruction {
        position: relative;

        top: auto;
        right: auto;
        bottom: auto;
        left: auto;

        width: calc(100% - 24px);

        margin: 14px auto 0;

        transform: translateY(-12px);

        z-index: 100;
    }

    #how-to-reach .nav-instruction.show {
        transform: translateY(0);
    }

}

/* =========================================
   MOBILE — DISABLE CAMERA MOVEMENT
   Keep map fixed while route animates
========================================= */

@media (max-width: 991px) {

    #how-to-reach .map-stage,
    #how-to-reach .map-stage.destination-focus,
    #how-to-reach .map-stage.route-switching,
    #how-to-reach .map-stage.balewadi-arrival,
    #how-to-reach .map-stage.university-arrival {

        transform: none !important;

        transition: none !important;

    }

}