* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
.gm-style-iw {
padding :0px;
padding-top:0px;
overflow: hidden;

}

.gm-style-iw-c{
padding :0px;
padding-top:0px;
overflow: hidden;
}

.gm-style-iw-d{
  padding :0px;
  padding-top:0px;
  overflow: hidden;
}
.header {
  padding: 1% 4%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .inner-header {
    display: flex;
    gap: 19px;
  }
  .inner-header button {
    border: 2px solid black;
    padding: 0px 8px;
  }
  .nav-link {
    display: flex;
    gap: 12px;
  }
   
  

  h1 {
    font-family: "Sole Serif Display Black Regular";
    text-align: center;

    font-weight: 600;
  }
  h4 {
    text-align: center;
    font-size: 16px;
  }
  .background {
    background: #f1eaff;
    width: 350px;
    padding: 9px;
    margin-bottom: 40px;
    margin: 0 auto;
    margin-top: 0px;
    margin-top: -12px;
  }

  .search-container {
    width: 50%;
    display: flex;
    gap: 20px;
    margin: 0 auto;
    border: 1px solid blue;
    padding: 6px 15px;
    border-radius: 35px;
    position: absolute;
    top: 20%;
    left: 27%;
    background: white;
  }
  .search-container label {
    font-size: 12px;
    font-weight: 700;
  }
  .search-container input {
    width: 100%;
    font-size: 14px;
    outline: none;
  }
  .search-container select {
    background: transparent;
    font-size: 14px;
  }
  .banner {
    background-image: url("../images/1.png");
    position: relative;
    height: 65vh;
  }

  /* Container for the image grids */
  .grid-container {
    display: grid;
    grid-template-columns: repeat(8, 90px); /* 8 columns of 200px each */
    gap: 10px; /* Gap between grid items */
    overflow: hidden;
  }

  .mapH1{
   
      position: absolute;
      right: 0px;
      bottom: 0px;
      /* font-size: 5px; */
      margin: 15px;

  }
  /* Individual grid items */
  .grid-item {
    width: 90px; /* Each column is 200px wide */
    height: 90px; /* Square images */
    overflow: hidden; /* Hide overflowing content */
    border-radius: 10px;
  }

  /* Responsive image styling */
  .grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure images cover the whole space */
  }
  h2 {
    padding: 8% 0 0 0;
  }
  .hell{
    width: 40%;

  }
  .grid-outer {
    background: #f1eaff;
    margin-top: 2%;
    border-radius: 12px;
    display: flex;
    align-content: center;
    align-items: start;
  }
  .grid-outer button {
    background: #593dfa;
    color: white;
    border-radius: 5px;
    padding: 5px 10px;
    font-weight: 600;
    margin-top: 5%;
  }
  .relative {
    position: relative;
  }
  .image-grid-outer {
    width: 60%;
    padding: 3% 3% 3% 1%;
  }

  * {
    margin: 0;
    padding: 0;
}

.startDate {
    margin-bottom: 13px;
    margin-top: 10px;
    width: 55%;
}
.startTime{
  margin-bottom: 13px;
  width: 40%;
}

.startDate,
.startTime {
    position: relative;
  
}

.startDate input {
    padding: 6px;
    font-weight: 600;
    outline: none;
}

.startDate label {
    font-weight: bold;
}

.arrowImg {
    height: 19px;
    position: absolute;
    left: 11%;
    top: 47%;
    cursor: pointer;
}


/* Car Detail Page */

h1 {
  font-family: "Roboto", sans-serif;
  text-align: start;
  font-size: 28px !important;
  font-weight: bold !important;
}
h2 {
  text-align: start;
  padding-top: 2%;
}
p {
  text-align: start;
}
 
.left-side {
  padding-top: 3%;

  text-align: start;
  border-bottom: 1px solid #c1c0c2;
  padding-bottom: 8%;
}
.line-through {
  font-weight: 550;
  color: #c1c0c2;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.small-text {
  font-size: 14px;
  color: #c1c0c2;
}
.left-side a {
  font-size: 10px;
  font-weight: 600;
  text-decoration: underline;
}
.hosted {
  font-size: clamp(12px, calc(3vw + 6px), 16px) !important;

  font-weight: 700;
  text-align: start;
  padding-bottom: 2%;
  padding: 4% 0 2% 0;
}
.user-detail {
  display: flex;
  gap: 17px;
}
.user-detail .user-pic {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
}
.user-detail .user-pic::before {
  background: black;
  padding: 4px;
}
.col-6-feature{
  flex: 0 0 auto;
  width: 50%;
}



.user-detail h5 {
  font-weight: 700;
}
.user-detail span,
p {
  font-size: 14px;
}
.image-overlay {
  position: absolute;
  bottom: 0%;
  background: white;
  right: 17%;
  padding: 0 16px;
  border-radius: 10px;
}
.comment-pic {
  width: 50px;
  height: 42px;
  object-fit: cover;
  border-radius: 50%;
}
.review-container {
  display: flex;
  gap: 15px;
  padding: 4% 0 2% 0;
  border-bottom: 1px solid black;
}
.fa-solid {
  color: #eaef1b;
}
.pickup {
  border-bottom: 1px solid #c1c0c2;
  padding-bottom: 6%;
}
.pickup h3 {
  font-size: 16px !important;
  margin-bottom: 20px;
  margin-top: 4%;
  font-weight: 700 !important;
}
.pickup select {
  background: transparent;
  border: 1px solid;
  padding: 4px 8px;
  width: 100%;
}
.hidden-checkbox {
  display: none;
}
.pickup label {
  padding: 4px 8px;
  border: 1px solid;
  margin-top: 6%;
  width: 100%;
  border-radius: 4px;
  background: #fbf9f9;
}
.pickup button {
  padding: 8px 8px;
  background: rebeccapurple;
  border-radius: 5px;
  color: white;
  margin-top: 6%;
  width: 100%;
}
.free-cancellation {
  padding: 6% 0;
  display: flex;
  gap: 25px;
  border-bottom: 1px solid #c1c0c2;
}
.free-cancellation h3 {
  font-size: 14px !important;
  font-weight: 700 !important;
}
.free-cancellation p {
  font-size: 10px;
  color: #c1c0c2;
}
.detail-svg-grid {
  display: flex;
  gap: 2%;
  align-items: center;
}
.svg-outer {
  padding: 6% 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-gap: 14px;
}
ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.skills {
 width: 100%;
margin: 15px auto;
color: black;
}

.bar-container {
  display: flex;
  align-items: center;
  margin-bottom: 10px; /* Add margin between skill bars */
}

.skill-name {
  font-size: 14px;
  margin-right: 10px;
  min-width: 80px; /* Ensure consistent width for skill names */
}

.bar {
  flex-grow: 1; /* Allow progress bars to grow and fill available space */
  height: 10px;
  margin-left: 10px; /* Add space between skill name and progress bar */
  background-color: #353b48;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  overflow: hidden;
}

.bar span {
  height: 100%;
  background-color: #ffc107;
  display: block;
}

.label {
  margin-left: 5px;
}


/* Footer */



.startTime .endtime{
  background: transparent;
  align-items: baseline;
  font-size: 13px;
}
footer button {
  padding: 10px;
  border-radius: 5px;
  background: rebeccapurple;
  color: white;
  font-size: 16px;
}
.about-heading{
  font-size: clamp(12px, 8vw + 4px, 40px) !important;

  font-weight: 800 !important;

  outline: none;
}
.about-title{
  font-size: clamp(12px, 8vw + 4px, 40px) !important;
  font-weight: 800 !important;
  text-align: center;
}

.search-box{
  width: 100%;
font-size: 13px;
border: 1;
border: 1px solid #9ca3af;
padding: 2%;
border-radius: 5px;
position: relative;
}
.col-8 {
  flex: 0 0 auto;
  width: 66.66666667%;
}
.col-4 {
  flex: 0 0 auto;
  width: 33.33333333%;
}
.search-img {
  border-radius: 8px 0 0 8px;
}
.car-detail-search {
  display: flex;
  justify-content: space-between;
  padding: 11px;
}
.car-detail-search h4 {
  text-align: start;
  font-weight: 600;
}
.rating-search {
  font-size: clamp(9px, calc(2vw + 1px), 10px);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}
.rating-search img {
  width: 14px;
  height: 14px;
}
.search-pickup {
  font-size: 13px;
  margin-top: 3px;
}
.search-pirce-outer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.price-display-search {
  text-align: end;
}
.price-display-search h3 {
  font-size: 10px;
  font-weight: 700;
}
.search-save {
  font-size: 10px;
  margin-top: 10%;
  background: #d6fdef;
  width: 42%;
  border-radius: 4px;
  padding: 2px;
}
.search-result-grid {
  margin: 5px;
  border: 1px solid #c1c0c2;
  border-radius: 8px;
  padding-right: 12px;
 
}
sidebar
.left-grid-search {
  height: 90vh;
  overflow-y: auto;
}
.result-counter {
  margin-top:15px;
  font-weight: 700;
}
.filter {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  overflow: hidden;
}
.filter select {
  background: transparent;
  border: 1px solid #c1c0c2;
  padding: 2px 3px;
  border-radius: 5px;
  font-size: 11px;
}

.car-images {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.car-image {
  width: 100%;
  height: 100%;
  max-height: 145px; /* Limit the maximum height of the image */
  object-fit: contain;
  cursor: pointer;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.car-image:hover {
  transform: scale(1.05);
}

#map {
  height: 600px;
  width: 70%;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  
}
@media only screen and (max-width: 990px) {
  .col-7 {
    display: none;
  }
  .col-5 {
    width: 100%;
  }
  .col-8 {
    width: 100%;
  }
  .col-4 {
    width: 100%;
    height: 300px;
  }
  .search-pickup {
    font-size: 16px;
  }
}



@media only screen and (max-width: 778px) {
  .outer-detail {
    width: 100%;
    margin: 2%;
  }
  .inner-detail {
    width: 100%;
  }
  .inner-flex {
    flex-direction: column;
  }
  .col-8 {
    width: 100%;
  }
  .hosted {
    padding: 0;
  }
  .col-4 {
    width: 100%;
  }
  .col-6-feature {
    width: 100%;
  }
  footer {
    grid-template-columns: repeat(auto-fit, minmax(242px, 1fr));
  }
  .comment-pic {
    width: 80px;
    height: 80px;
  }
  .review-container {
    display: block;
  }
  .width {
    width: 80%;
    margin: 0 auto;
  }
}



@media only screen and (max-width: 600px) {
  .banner {
    height: 22vh;
  }

  .header {
    padding: 1% 2%;
  }

  .inner-header {
    gap: 10px;
  }

  .inner-header button {
    padding: 0px 5px;
  }



  .nav-link {
    gap: 8px;
  }

   
  
  h1 {
    font-size: calc(24px + 2vw);
    /* Responsive font size */
  }

  h4 {
    font-size: 14px;
    /* Adjusted font size */
  }

  .background {
    width: 250px;
    /* Adjusted width for smaller screens */
    margin-bottom: 20px;
    /* Reduced margin */
    margin-top: -6px;
    /* Reduced top margin */
  }

  .search-container {
    width: 80%;
    /* Adjusted width for smaller screens */
    gap: 10px;
    top: 15%;
    /* Adjusted top position */
    left: 10%;
    /* Adjusted left position */
    padding: 4px 10px;
    /* Reduced padding */
  }

  .search-container label {
    font-size: 10px;
    /* Adjusted font size */
  }

  .search-container input {
    font-size: 12px;
    /* Adjusted font size */
  }

  .grid-container {
    grid-template-columns: repeat(8, 90px);
  }

  .hell {
    width: 90%;
    /* Adjusted width for smaller screens */
    padding: 1%;
    /* Reduced padding */
  }

  .hell button {
    margin-left: 41%;
  }

  .hell p {
    margin-left: 25px;

  }

  .row .col-4 {
    width: 100%;
  }


  .title {
    font-size: 26px;
    font-weight: 500;
  }

  .about-heading {
    width: 76vw;
    margin-bottom: 10px;
  }

  .user-detail span,
  p {
    width: 60vw;
    margin-left: 6%;
  }

  footer img {
    width: 20px;
    height: 20px;
  }

  .startTime .endtime{
    font-size: 12px;
    background: transparent;
  }
}



@media only screen and (max-width: 440px) {

  .search-result-grid {
    flex-direction: column;
    padding: 10px;
  }

  .col-4 {
    width: 100%;
    height: 200px;
  }

  /* .car-detail-search {
    flex-direction: column;
    align-items: start;
  } */

  .price-display-search {
    text-align: left;
    width: 100%;
    margin-top: 10px;
  }

  .search-result-grid img {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    margin-bottom: 0 !important;   /* ✅ Add this line */
  }

  .left-grid-search {
    padding-left: 5px;
    padding-right: 5px;
  }

  #map {
    width: 100% !important;
    height: 300px !important;
  }

  .card.mb-3 .row.g-0 {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    padding: 0 !important;
  }

  .card.mb-3 .col-md-4 {
    padding: 0 !important;
    margin: 0 !important;
  }

  .card.mb-3 .col-md-4 img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    margin: 0 !important;        /* ✅ Force kill vertical space on image block */
  }

  .card.mb-3 .col-md-8 {
    width: 100% !important;
    padding-top: 5px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0 !important;    /* ✅ Also force kill margin top on this block */
  }

  .card.mb-3 .card-body {
    padding-top: 5px !important;
    margin: 0 !important;        /* ✅ Clean it fully */
  }

  .card.mb-3 .card-body h5.card-title {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .card.mb-3 .card-body p {
    margin-top: 2px !important;  /* ✅ Smooth vertical spacing between elements */
    margin-bottom: 2px !important;
  }
}





/* 🛠️ Fix layout for mid-size devices like Surface Duo, iPad Mini, Zenbook Fold */
@media only screen and (min-width: 500px) and (max-width: 900px) {
  .search-result-grid {
    display: flex;
    flex-direction: column;
    padding: 10px;
    margin: 10px;
    border: 1px solid #c1c0c2;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
  }

  .search-result-grid .row {
    flex-direction: column;
    margin: 0;
  }

  .search-result-grid .col-4,
  .search-result-grid .col-8 {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .search-result-grid img,
  .card.mb-3 .col-md-4 img {
    width: 100%;
    height: auto;
    max-height: 250px;
    object-fit: cover;
    display: block;
    border-radius: 8px 8px 0 0;
    margin: 0 auto;
  }

  .car-detail-search {
    padding: 10px;
    /* flex-direction: column;
    align-items: flex-start; */
  }

  .price-display-search {
    text-align: left;
    width: 100%;
    margin-top: 10px;
  }

  .card.mb-3 .card-body {
    padding: 10px;
    margin: 0;
  }

  .card.mb-3 .card-body h5.card-title {
    font-size: 1.1rem;
    margin-top: 0;
  }

  .card.mb-3 .card-body p {
    margin: 2px 0;
    font-size: 0.95rem;
  }
}

















#chatMessenger {
  background-color: #ffffff; /* solid white */
  z-index: 9999 !important;
  position: fixed;
  max-width: 400px;
  max-height: 400px;
  overflow-y: auto;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.chat-header {
  background-color: #3498db;
  color: white;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.chat-body {
  height: 80%;
  overflow-y: scroll;
  padding: 10px;
}

#smallChatWindow {
  background-color: #ffffff; /* solid white */
  z-index: 9999 !important;
  position: fixed;
  max-width: 340px;
  max-height: 320px;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  overflow: hidden;
}

.owl-carousel, .modal, .popup {
  z-index: 1000;  /* Lower than chat box */
}

.chat-messages {
  height: 70%;
  overflow-y: auto;
  padding: 10px;
}

.btn-chat {
  background-color: #3498db;
  color: white;
  padding: 15px;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: 0.3s;
}

.btn-chat:hover {
  background-color: #2b7cc2;
}