.btn:focus{
	outline:none;
  	box-shadow:none;
}
.btn-primary{
  	background-color: #000 !important;
  	border:none;
}
.btn-danger {
    color: #fff !important;
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}
.support-btn{
	height: 39px;
}
.support-input-group{
    margin-top: 15px;
}
.error{
	color: #dc3545;
}
.input-group label.error{
    top: 100%;
	position: absolute;
}
/* .add{
	color: #dc3545 !important;
} */

.popup2-overlay{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
z-index:999;
}

.popup2-box{
display:none;
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:420px;
background:#fff;
padding:35px;
border-radius:10px;
box-shadow:0 10px 40px rgba(0,0,0,0.2);
z-index:1000;
font-family:Arial;
animation:popupFade .4s ease;
}

@keyframes popupFade{
from{
opacity:0;
transform:translate(-50%,-60%);
}
to{
opacity:1;
transform:translate(-50%,-50%);
}
}

.popup2-title{
text-align:center;
margin-bottom:5px;
font-size:24px;
font-weight:600;
}

.popup2-sub{
text-align:center;
font-size:14px;
color:#777;
margin-bottom:20px;
}

.popup2-row{
display:flex;
gap:10px;
margin-bottom:12px;
}

.popup2-box input,
.popup2-box textarea{
width:100%;
padding:10px;
border:1px solid #ddd;
border-radius:6px;
font-size:14px;
margin-bottom:12px;
outline:none;
transition:0.3s;
}

.popup2-box textarea{
height:80px;
resize:none;
}

.popup2-box input:focus,
.popup2-box textarea:focus{
border-color:#007bff;
box-shadow:0 0 5px rgba(0,123,255,0.2);
}

.popup2-btn{
width:100%;
padding:12px;
background:#f22324;
border:none;
color:white;
font-size:16px;
border-radius:6px;
cursor:pointer;
transition:0.3s;
}

.popup2-btn:hover{
background:#f22324;
}

.popup2-close{
position:absolute;
top:10px;
right:15px;
border:none;
background:none;
font-size:24px;
cursor:pointer;
color:#888;
}

.popup2-close:hover{
color:#000;
}

.mainbox{
	    position: fixed;
  bottom: 70px;
    left: 20px;
    z-index: 999999;
}
.call{
	    margin-bottom: 10px;
}


.app-download{
  background: linear-gradient(135deg,#003961,#005fa3);
  padding:60px 20px;
  color:#fff;
  font-family:Arial, Helvetica, sans-serif;
}

.app-container{
  max-width:1100px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

.app-text{
  flex:1;
  min-width:280px;
}

.app-text h2{
  font-size:32px;
  margin-bottom:15px;
}

.app-text p{
  font-size:16px;
  line-height:1.6;
  margin-bottom:20px;
}

.store-buttons img{
  width:160px;
  margin-right:10px;
  margin-top:10px;
      border-radius: 7px;
}

.qr-box{
  flex:1;
  text-align:center;
  min-width:250px;
}

.qr-box img{
  width:180px;
  background:#fff;
  padding:10px;
  border-radius:10px;
}

.qr-box p{
  margin-top:10px;
  font-size:14px;
}


/* =========================
COMPACT TAXI SECTION
========================= */

.taxi-section {
padding: 45px 0;
background: #f7f8fa;
}

.taxi-heading {
text-align: center;
margin-bottom: 25px;
}

.section-tag {
display: inline-block;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
color: #f5a400;
margin-bottom: 4px;
}

.taxi-heading h2 {
font-size: 27px;
font-weight: 700;
color: #171717;
margin: 0 0 5px;
}

.taxi-heading p {
margin: 0 auto;
color: #777;
font-size: 13px;
}

/* =========================
CARD GRID
========================= */

.card-wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}

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

.taxi-card {
background: #fff;
border: 1px solid #e9e9e9;
border-radius: 10px;
padding: 15px;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
transition: all 0.25s ease;
}

.taxi-card:hover {
transform: translateY(-3px);
box-shadow: 0 7px 22px rgba(0, 0, 0, 0.09);
}

/* =========================
CONTENT
========================= */

.taxi-card-content {
padding: 0;
}

.taxi-card-content h3 {
font-size: 16px;
font-weight: 700;
color: #222;
margin: 0 0 12px;
}

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

.route-box {
background: #f8f8f8;
border-radius: 7px;
padding: 5px 10px;
margin-bottom: 9px;
    display: flex;
    justify-content: space-between;
}

.location {
display: flex;
align-items: center;
gap: 8px;
}

.location small {
display: block;
color: #999;
font-size: 9px;
margin-bottom: 1px;
}

.location strong {
display: block;
font-size: 12px;
color: #222;
}

.dot {
width: 7px;
height: 7px;
min-width: 7px;
border-radius: 50%;
}

.dot.pickup {
background: #20a56b;
}

.dot.drop {
background: #e53935;
}

.route-line {
width: 1px;
height: 25px;
background: #d2d2d2;
margin: 1px 0 1px 3px;
}

/* =========================
TRIP INFO
========================= */

.trip-info {
display: flex;
justify-content: space-between;
gap: 5px;
margin-bottom: 10px;
}

.trip-info span {
background: #fff7df;
color: #8a6200;
padding: 4px 6px;
border-radius: 5px;
font-size: 9px;
font-weight: 600;
}

/* =========================
PRICE
========================= */

.price-row {
border-top: 1px solid #eee;
padding-top: 9px;
margin-bottom: 10px;

display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
}

.price-row small {
display: block;
font-size: 9px;
color: #999;
margin-bottom: 1px;
}

.price-row strong {
display: block;
font-size: 15px;
color: #111;
font-weight: 750;
}

.price-type {
background: #f3f3f3;
color: #666;
border-radius: 4px;
padding: 4px 5px;
font-size: 8px;
font-weight: 600;
white-space: nowrap;
}

/* =========================
BOOK BUTTON
========================= */

.book-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;

background: #f5a400;
color: #111;

padding: 8px 10px;
border-radius: 6px;

text-decoration: none;
font-size: 11px;
font-weight: 700;

transition: all 0.2s ease;
}

.book-btn:hover {
background: #111;
color: #fff;
}

.book-btn span {
font-size: 13px;
}

/* =========================
TABLET
========================= */

@media (max-width: 1100px) {

.card-wrapper {
grid-template-columns: repeat(3, 1fr);
}

}

/* =========================
SMALL TABLET
========================= */

@media (max-width: 800px) {

.card-wrapper {
grid-template-columns: repeat(2, 1fr);
}

}

/* =========================
MOBILE
========================= */

@media (max-width: 550px) {

.taxi-section {
padding: 35px 12px;
}

.card-wrapper {
grid-template-columns: 1fr;
gap: 12px;
}

.taxi-heading {
margin-bottom: 20px;
}

.taxi-heading h2 {
font-size: 23px;
}

.taxi-heading p {
font-size: 12px;
}

.taxi-card {
padding: 13px;
}

}