/* ==========================================
   Starbird Map CSS
========================================== */

.sb-map-wrapper{

position:relative;

height:560px;

border-radius:32px;

overflow:hidden;

background:#111;

border:1px solid #2a2a2a;

box-shadow:0 20px 60px rgba(0,0,0,.45);

}

#sb-map{

width:100%;

height:100%;

}

.leaflet-control-container{

display:none;

}

/* ==========================================
   Controls
========================================== */

.sb-controls{

position:absolute;

top:25px;

right:25px;

display:flex;

flex-direction:column;

gap:10px;

z-index:9999;

}

.sb-controls button{

width:46px;

height:46px;

border-radius:50%;

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

background:rgba(20,20,20,.95);

color:#fff;

font-size:20px;

cursor:pointer;

transition:.3s;

backdrop-filter:blur(10px);

}

.sb-controls button:hover{

background:#c8a46d;

color:#111;

}

/* ==========================================
   Google Button
========================================== */

.sb-google-btn{

position:absolute;

right:30px;

bottom:30px;

padding:10px 30px;

background:linear-gradient(
90deg,
#d6ad7b,
#f3d7a9,
#d6ad7b
);

color:#111;

font-weight:400;

letter-spacing:2px;

font-size:.75rem;

text-decoration:none;

border-radius:60px;

z-index:9999;

transition:.35s;

font-family:"Denton",serif;

display:inline-flex;

align-items:center;

justify-content:center;

}

.sb-google-btn:hover{

transform:translateY(-3px);

box-shadow:
0 20px 50px rgba(214,173,123,.35);

background:none!important;

border:1px solid #d6ad7b!important;

color:#181818;

}

/* ==========================================
   Gold Marker
========================================== */

.gold-marker{

width:18px;

height:18px;

background:#2c2c2c;

border:3px solid #eacda3;

border-radius:50%;

cursor:pointer;

transition:.35s;

box-shadow:

0 0 0 8px rgba(214,173,123,.15),

0 0 25px rgba(214,173,123,.65);

animation:pulse 2s infinite;

}

.gold-marker:hover{

transform:scale(1.25);

box-shadow:

0 0 0 10px rgba(214,173,123,.20),

0 0 45px rgba(214,173,123,.95);

}

/* ==========================================
   Marker Label
========================================== */

.sb-project-label{

position:absolute;

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

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

backdrop-filter:blur(12px);

padding:8px 14px;

border-radius:30px;

font-size:11px;

letter-spacing:2px;

color:#fff;

font-weight:600;

white-space:nowrap;

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

opacity:0;

transition:.35s;

pointer-events:none;

}

.gold-marker:hover + .sb-project-label{

opacity:1;

}

/* ==========================================
   Animation
========================================== */

@keyframes pulse{

0%{

box-shadow:
0 0 0 0 rgba(214,173,123,.5);

}

70%{

box-shadow:
0 0 0 18px rgba(214,173,123,0);

}

100%{

box-shadow:
0 0 0 0 rgba(214,173,123,0);

}

}

/* ==========================================
   Responsive
========================================== */

@media(max-width:767px){

.sb-map-wrapper{

height:450px;

}

.sb-google-btn{

left:20px;

right:20px;

bottom:20px;

text-align:center;

}

}