*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{
    background:#f5f7fa;
    padding-bottom:80px;
}
a{
   text-decoration:none;
}
.header{
background:blue;
padding:18px;
color:white;
text-align:center;
font-size:22px;
font-weight:600;
box-shadow:0 5px 15px rgba(0,0,0,.15);
}
.footer{
    text-align:center;
    padding:25px 15px;
    color:#777;
    font-size:10px;
	opacity:0.5;
}
#myButton.attention {
    animation: attentionPulse 1s ease-in-out 8;
}

@keyframes attentionPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(255, 193, 7, 0);
    }

    50% {
        transform: scale(1.08);
        box-shadow: 0 0 15px rgba(255, 193, 7, 0.8);
    }
}
.avatar {

  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.avatar2 {
  width: 40px;
  height: 40px;
  border-radius: 80%;
}

.logo{
    font-size:24px;
    font-weight:700;
}

.location a{
    margin:5px;
    font-size:13px;
	color:#fff;
	float:left;
}


.searchbox{
    margin:5px;
}

.searchbox input{
    width:80%;
    padding:14px;
    border:none;
    border-radius:30px;
    font-size:15px;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
}

.banner{
    margin:15px;
    background:linear-gradient(135deg,#0d6efd,#4d94ff);
    color:#fff;
    padding:25px;
    border-radius:20px;
}

.banner h2{
    font-size:24px;
}

.banner p{
    margin-top:8px;
    font-size:14px;
}

.butt{
    margin-top:15px;
    padding:10px 20px;
    border:none;
    border-radius:30px;
    background:#fff;
    color:red;
    font-weight:600;
}

.section{
    margin:15px;
}

.section-title{
    font-size:18px;
    font-weight:600;
    margin-bottom:12px;
}

.services{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
}

.service{
    background:#fff;
    border-radius:15px;
    padding:12px;
    text-align:center;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
}

.service .icon{
    font-size:28px;
}

.service p{
    margin-top:5px;
    font-size:12px;
}

.taxi-card{
    background:#fff;
    border-radius:20px;
    padding:15px;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.taxi-card input{
    width:100%;
    padding:12px;
    margin-top:10px;
    border:1px solid #ddd;
    border-radius:10px;
}

.taxi-card button{
    width:100%;
    margin-top:12px;
    padding:13px;
    background:#ff6b00;
    color:white;
    border:none;
    border-radius:10px;
    font-weight:600;
}

.horizontal{
    display:flex;
    overflow-x:auto;
    gap:10px;
    scrollbar-width:none;
}

.category{
    min-width:90px;
    max-height:190px;
    background:white;
    padding:4px;
    
    text-align:center;
    box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.category img{
    width:100%;
    height:60%;
	border-radius:10px;
    box-shadow:0 2px 8px rgba(0,0,0,.05);
}

.category span{
    font-size:30px;
}

.category p{
    margin-top:5px;
    font-size:12px;
}

.business-card{
    background:white;
    border-radius:15px;
    overflow:hidden;
    margin-bottom:12px;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
}

.business-img{
    height:120px;
    background:#dbe6ff;
}

.business-content{
    padding:12px;
}

.business-content h4{
    margin-bottom:5px;
}

.rating{
    color:#ff9900;
    font-size:13px;
}

.deals{
    display:flex;
    overflow-x:auto;
    gap:12px;
}

.deal{
    min-width:150px;
    background:#fff;
    padding:15px;
    border-radius:15px;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
}

.deal h4{
    margin-bottom:5px;
}

.offer{
    color:red;
    font-weight:bold;
}

.news-card{
    background:#fff;
    padding:15px;
    border-radius:15px;
    margin-bottom:10px;
    box-shadow:0 2px 8px rgba(0,0,0,.05);
}

.news-card h4{
    font-size:15px;
}

.news-card p{
    color:#666;
    font-size:12px;
    margin-top:5px;
}

.bottom-nav{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    background:white;
    display:flex;
    justify-content:space-around;
    padding:12px 0;
    box-shadow:0 -2px 10px rgba(0,0,0,.1);
}

.bottom-nav a{
    text-decoration:none;
    color:#444;
    text-align:center;
    font-size:12px;
}

.bottom-nav span{
    display:block;
    font-size:22px;
}
#toast {
    visibility: hidden;
    min-width: 220px;
    background: #333;
    color: #fff;
    text-align: center;
    border-radius: 8px;
    padding: 12px 18px;
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    font-size: 14px;
}

#toast.show {
    visibility: visible;
    animation: fadein 0.3s, fadeout 0.3s 1.7s;
}

@keyframes fadein {
    from { opacity: 0; bottom: 60px; }
    to   { opacity: 1; bottom: 80px; }
}

@keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}
.mychat {
  position: absolute;
  z-index: 9;
  background-color: #f1f1f1;
  border: 5px solid #d3d3d3;
  text-align: left;
  max-width: 300px;
  max-height: 400px;
  overflow-wrap: break-word;
  overflow: scroll;
  right: 20px;
  top: 200px;
  display:none;
}

.mychatheader {
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
}
#openscrapbook {
      position: fixed;
      bottom: 100px;
      right: 20px;
      display: block;
      /* Initially hidden */
      padding: 10px 15px;
      font-size: 18px;
      border-radius: 50%;
      z-index: 1000;
    }
	#backToTop {
      position: fixed;
      bottom: 150px;
      right: 20px;
      display: none;
      /* Initially hidden */
      padding: 10px 15px;
      font-size: 18px;
      border-radius: 50%;
      z-index: 1000;
    }
	.location-card {
      max-width: 400px;
	  font-family: 'Ubuntu', sans-serif;
      border-left: 5px solid #007bff;
      /* Highlight border */
    }
	.location-card p{
    margin-top:5px;
    font-size:12px;
}
.carousel-card {
      border-radius: 15px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      background-color: #fff;
    }

    .carousel-item img {
      height: 45vh;
      width: 100%;
	  z-index: 11;
    }


    /* Stylish Carousel Captions */
    .carousel-caption {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      bottom: initial;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .carousel-caption h5 {
      font-family: 'Dancing Script', cursive;
      font-size: 3rem;
      font-weight: 700;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
      color: #fff;
      margin-bottom: 0.5rem;
    }

    .carousel-caption p {
      font-size: 1.25rem;
      color: #f8f9fa;
      text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    }
	@media (max-width: 992px) {
      .carousel-caption h5 {
        font-size: 2.5rem;
      }

      .carousel-caption p {
        font-size: 1.1rem;
      }
    }

    @media (max-width: 768px) {
      .carousel-caption h5 {
        font-size: 2rem;
      }

      .carousel-caption p {
        font-size: 1rem;
      }
    }

    @media (max-width: 576px) {
      .carousel-item img {
        height: 30vh;
      }

      .carousel-caption h5 {
        font-size: 1.75rem;
      }

      .carousel-caption p {
        font-size: 0.95rem;
      }

      .navs img {
        width: 60px;
        height: 60px;
      }
	  .navspro img {
        width: 60px;
        height: 60px;
      }
    }