body {
  font-family: 'Montserrat';
  }
  
  header {
  
  color: white;
  padding: 1rem 1rem;
  position: fixed;
  
  width: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  }
  
  header .navbar {
    width: calc(100% - 400px);
  padding: 0;
  background: #fff;
  border-radius: 50px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }
  
  header .navbar-brand {
  font-size: 1.5rem;
  font-weight: 600;
  width: 230px;
  }
  
  header .navbar-nav .nav-link {
    font-size: 14px;
    font-weight: 600;
    margin: 0px 4px;
    text-wrap: nowrap;
  }
  header .navbar-nav .nav-link:hover {
    color:#ff9700
    }
  .navbar-divider {
  margin:0px;
  border:1px solid grey
  }

  header .navbar-nav .btn {
  
  font-size: 15px;
  color: #fff;
  font-weight: 600;
  background-color: #ff9900;
  text-align: start;
  }
  
  header .navbar-nav .btn:hover {
  background-color: #ff9900;
  }
  header .navbar-nav .badge {
  background-color: #ff9900;
  }

  header .login-btn,.login-btn:hover,.login-btn:active,.login-btn:visited {
  background: #f5dfbd !important;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  color: black !important;
  }
  .num-text{
    color: #ff9700;
  }
  
  .place-ad-btn {
  border-radius: 20px;
  padding: 0.5rem;
  text-wrap: nowrap;
  }

  .hero {
  background-color: #0072BC ;
  text-align: center;
  padding: 2rem 1rem;
  position: relative;
  overflow: hidden;
  height: 42vh !important;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  }
  /* .hero img{
    width: 30px;
    
  } */
  
  .hero h1 {
  font-size: 2.5rem;
  font-weight: 600;
  }
  
  .hero p {
  font-size: 1.2rem;
  
  }
  .outer-container{
    margin-left: 4rem;
    margin-right: 4rem;
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .search-bar {
    margin-top: -2rem;
    background: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 0.2rem 1rem;
    position: relative;
    z-index: 100;
  }
  
  .search-bar select {
  border-radius: 5px;
  padding-left: 2rem;
  background-color: #f4f4f4;
  height: 100%;
  }

  .down-arrow{
    position: absolute;
    right: 20px;
    pointer-events: none;
  }

  .search-btn{
  background: #FF9700 !important;
  color: white;
  border: none;
  padding: 1rem 1rem;
  border-radius: 5px;
  }

  .search-btn:hover{
  background: #FF9700;
  color: white;
  }

  .search-bar button {
  background: #007BFF;
  color: white;
  border: none;
  padding: 0.5rem;
  border-radius: 5px;
  }

  .input-container {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.7rem;
  }
#search-results{
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 1;
  max-height: 200px;
  overflow-y: auto;
}
  h2{
    font-size: 28px;
    font-weight: 800;
  }

  .card-header{
  background-size: cover;
  background-repeat: no-repeat;
  height:200px;
  }
  
  .heart-icon{
      border-radius: 100px;
      border: 2px solid #ff9700;
      padding: 2px 6px !important;
  }
  .card-header .badge-hours{
      background: rgb(0, 0, 0); /* Fallback color */
      background: rgba(0, 0, 0, 0.5);
      padding: 1rem;
      font-size: 12px;
      border: 2px solid white;
      border-radius: 20px;
  }
  .card-header .badge-hours-all{
    background: rgb(0, 0, 0); /* Fallback color */
      background: rgba(0, 0, 0, 0.5);
      padding: 5px;
      font-size: 12px;
      border: 2px solid white;
      border-radius: 20px;
  }
  .card-header .badge-hours-all svg{
    width: 14px;
    height: 14px;
  }
  .card-header .star-icon,.card-header .heart-icons{
    width: 14px;
    height: 14px;
  }
  .card-header .prem-text{
    font-size:11px;
  }
  .card-header .badge{
      background-color: #FF9700;
      padding: 1rem;
      font-size: 12px;
      border: 2px solid white;
      border-radius: 20px;
  }
  .search-bar .form-control {
  width: 100%;

  font-size: 16px;
  background-color: #f4f4f4;
  height: 100%;
  padding: 0.5rem;
  padding-left: 2rem;
  }
  .card .form-control{
 
    line-height: 2.2rem;
  }
  /* textarea{
    height: 150px !important;
  } */
  .loc-svg {
  color:#0072BC;
  position: absolute;
  margin:5px;
  pointer-events: none; /* Prevent clicking the icon */
  }
  .search-container{
    background-color: #fff;
  }
  .countries{
    background-color: #fff;
  }
  .countries img {
  border-radius: 5px;
  }
  .flags-div{
    flex-wrap: nowrap;
  }
  .flags-div .img-con {
    height: 80px ;
    
     object-fit: cover; 
     overflow:hidden;
  }
  
  .ads-section {
  background-color: #F7F7F7;
  }
  .categories img {
  max-width: 100%;
  border-radius: 10px;
  }
  .countries p{
    padding: 10px 0px;
    font-size: 16px;
    font-weight: 500;
  }
  .pricing {
  background: linear-gradient(90deg, #ff5722, #ff9800);
  color: white;
  padding: 3rem 1rem;
  text-align: center;
  }
  .card-text1{
  background-color: #F3F3F3;
  border-radius: 15px;
  
  }
  .pricing-plan {
  background: white;
  color: #333;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  }
  
  .pricing-plan h3 {
  font-size: 1.5rem;
  }
  
  .contact {
    background: url('/assets/images/contact_us_img.png') no-repeat center center/cover;
 
    
  }
  .contact-info {
    display: flex;
    flex-direction: column;
}

.contact-info p {
    display: flex;
    align-items: center;
    margin: 0px; /* Aligns items in a straight line */
}

.contact-info span {
    width: 120px; /* Set a fixed width for labels */
    font-weight: bold;
}

.contact-info strong {
    flex-grow: 1; /* Ensures the value aligns properly */
    text-align: left; /* Keeps text aligned properly */
}

  .contact form {

  padding: 1rem;
  border-radius: 10px;

  }
  
  
  .contact button:hover {
  background: #0056b3;
  }
  
  .ads-card {
  border: none;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-bottom: 2rem;
  }
  .listings_all_header{
    height:200px
  }
  .ads-card .card-title{
    font-size:16px;
    font-weight: 700;
    color: #333;
      /* Add ellipsis for text longer than 12 characters */
      white-space: nowrap; /* Prevents text from wrapping */
      overflow: hidden; /* Hides overflowing text */
      text-overflow: ellipsis; /* Adds "..." */
      max-width: 12ch; /* Limits the width to roughly 12 characters */
      display: inline-block; /* Ensures proper behavior */
  }
  
  .ads-card img {
  max-width: 100%;
  height: auto;
  }
  
  .ads-card .card-body {
  padding: 0px 10px;
  }
  
  .ads-card .price {
  color: #007BFF;
  font-size: 13px;
  font-weight: 600;
  }
  
  .ads-card .currency {
    font-size: 10px;
  }
  .carousel-control-prev-icon,
  .carousel-control-next-icon {
  background-color: #fff;
  padding: 10px;
  border: 2px solid #ff9700;
  color: #ff9700;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  }
  
  .carousel-buttons {
  display: flex;
  justify-content: end;
  margin-top: 1rem;
  }
  
  .bouncing-icon {
  animation: bounce 2s infinite;
  }
  .bouncing-icon1 {
  animation: bounce 3s infinite;
  }
  .bouncing-icon2 {
    animation: bounce 4s infinite;
    }
  /* left: 40px; top: 100px */
.hero .cycle-icon {
  left: clamp(20px, 3%, 60px);
  top: clamp(80px, 12%, 160px);
  position: absolute;
}

/* right: 500px; top: 100px */
.hero .cycle-icon1 {
  right: clamp(500px, 26%, 700px);
  top: clamp(80px, 12%, 160px);
  position: absolute;
}

/* right: 500px; top: 170px */
.hero .bus-icon {
  right: clamp(500px, 26%, 700px);
  top: clamp(140px, 20%, 220px);
  position: absolute;
}

/* left: 20px; top: 30px */
.hero .star-icon1 {
  left: clamp(10px, 1.5%, 30px);
  top: clamp(20px, 5%, 60px);
  position: absolute;
}

/* right: 20px; top: 60px */
.hero .star-icon2 {
  right: clamp(10px, 1.5%, 30px);
  top: clamp(40px, 7%, 100px);
  position: absolute;
}

/* right: 50px; top: 200px */
.hero .star-icon3 {
  right: clamp(30px, 3%, 50px);
  top: clamp(160px, 25%, 240px);
  position: absolute;
}

/* right: 150px; top: 170px */
.hero .sun-icon {
  right: clamp(100px, 12%, 150px);
  top: clamp(140px, 20%, 220px);
  position: absolute;
}

/* left: 550px; top: 180px */
.hero .star-icon4 {
  left: clamp(550px, 38%, 650px);
  top: clamp(150px, 22%, 240px);
  position: absolute;
}

/* left: 450px; top: 200px */
.hero .teddy-icon {
   left: clamp(450px, 32%, 550px);
  top: clamp(160px, 24%, 260px);
  position: absolute;
}

/* left: 320px; top: 180px */
.hero .big-tv-icon {
  left: clamp(200px, 26%, 320px);
  top: clamp(150px, 22%, 240px);
  position: absolute;
}

/* top: 150px */
.hero .star-icon5 {
  top: clamp(120px, 18%, 200px);
  position: absolute;
}

/* top: 80px */
.hero .tv-icon {
  top: clamp(60px, 12%, 120px);
  position: absolute;
}

/* right: 100px; top: 80px */
.hero .tricycle-icon {
  right: clamp(60px, 8%, 100px);
  top: clamp(60px, 12%, 120px);
  position: absolute;
}

/* right: 400px; top: 150px */
.hero .watch-icon {
  right: clamp(250px, 24%, 400px);
  top: clamp(120px, 18%, 200px);
  position: absolute;
}

/* left: 120px; top: 140px */
.hero .laptop-icon {
  left: clamp(80px, 10%, 120px);
  top: clamp(110px, 16%, 180px);
  position: absolute;
}

/* left: 180px; top: 100px */
.hero .laptop-icon1 {
  left: clamp(120px, 14%, 180px);
  top: clamp(80px, 12%, 140px);
  position: absolute;
}

/* left: 400px; top: 110px */
.hero .flower-icon {
    left: clamp(400px, 18%, 500px);
  top: clamp(90px, 14%, 160px);
  position: absolute;
}

/* right: 320px; top: 120px */
.hero .globe-icon {
  right: clamp(200px, 20%, 320px);
  top: clamp(100px, 16%, 180px);
  position: absolute;
}

/* right: 220px; top: 140px */
.hero .videogame-icon {
  right: clamp(400px, 15%, 600px);
  top: clamp(110px, 18%, 200px);
  position: absolute;
}

/* left: 250px; top: 80px */
.hero .bike-icon {
  left: clamp(160px, 18%, 250px);
  top: clamp(60px, 12%, 120px);
  position: absolute;
}

/* left: 50px; top: 200px */
.hero .radio-icon {
  left: clamp(30px, 4%, 50px);
  top: clamp(160px, 25%, 260px);
  position: absolute;
}

/* left: 200px; top: 180px */
.hero .camera-icon {
  left: clamp(140px, 18%, 200px);
  top: clamp(150px, 22%, 240px);
  position: absolute;
}

/* right: 350px; top: 250px */
.hero .house-icon {
  right: clamp(220px, 25%, 350px);
  top: clamp(200px, 30%, 320px);
  position: absolute;
}

/* right: 250px; top: 220px */
.hero .key-icon {
  right: clamp(160px, 18%, 250px);
  top: clamp(180px, 28%, 300px);
  position: absolute;
}

/* left: 320px; top: 100px */
.hero .dragon-icon {
  left: clamp(200px, 26%, 320px);
  top: clamp(80px, 12%, 160px);
  position: absolute;
}

/* left: 500px; top: 80px */
.hero .puppy-icon {
  left: clamp(320px, 36%, 500px);
  top: clamp(60px, 12%, 140px);
  position: absolute;
}
  .pricing-section {
      background: linear-gradient(90deg, #ff9800, #D30A0B);
      color: white;
      padding: 3rem 1rem;
  }
  
  .pricing-section h2 {
      font-weight: 700;
      margin-bottom: 2rem;
  }
  
  .pricing-card {
      background: white;
      color: #333;
      border-radius: 10px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      padding: 1rem;
      text-align: left;
      height: 550px;
  }
  
  .pricing-card h3 {
      font-size: 21px;
     font-weight: 700;
  }
  
  .pricing-card .price {
      font-size: 30px;
      color: #333;
      margin: 1rem 0;
  }
  
  .pricing-card .price span {
      font-size: 14px;
      font-weight: 600;
  }
  
  .pricing-card ul {
      list-style: none;
      padding: 0;
      margin: 1rem 0;
  }
  
  .pricing-card ul li {
      margin-bottom: 1rem;
      font-size: 15px;
      font-weight: 600;
  }
  .pricing-card ul li {
    position: relative;
    padding-left: 25px;

}
.pricing-card ul li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: #ff9700;
    font-weight: bold;
}
  .target-ads-css{
    height:120px
  }
  .pricing-card .btn , .pricing-card .btn:hover {
      background: #ff9700;
      color: white;
      border: none;
      border-radius: 8px;
      padding: 0.8rem 0.5rem;
      width: 100%;
  }
  
  .pricing-card-1 {
    background: #ff9700;
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    text-align: left;
    height: 550px;
}

.pricing-card-1 h3 {
    font-size: 21px;
   font-weight: 700;
}

.pricing-card-1 .price {
    font-size: 49px;
    color: #fff;
    margin: 1rem 0;
}

.pricing-card-1 .price span {
    font-size: 12px;
    font-weight: 600;
}

.pricing-card-1 ul {
   list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.pricing-card-1 ul li {
    margin-bottom: 1rem;
    font-size: 15px;
    font-weight: 600;
}
.pricing-card-1 ul li {
  position: relative;
  padding-left: 25px;

}
.pricing-card-1 ul li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #fff;
  font-weight: bold;
}

.pricing-card-1 .btn-1 , .pricing-card-1 .btn-1:hover {
    background: #fff;
    color: #ff9700;
    border: none;
    border-radius: 8px;
    padding: 0.8rem 1rem;
    width: 100%;
}


  .testimonials-section {
      background: #f9f9f9;
      padding: 3rem 1rem;
  }
  
  .testimonial-card {
      background: white;
      border-radius: 10px;
      padding: 1.5rem;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      text-align: center;
  }
  
  .testimonial-card .stars {
      color: #FFD700;
      margin-bottom: 1rem;
  }
  
  .testimonial-card .message {
      font-size: 1rem;
      color: #666;
      margin-bottom: 1rem;
  }
  
  .testimonial-card .author {
      font-weight: 600;
      margin-top: 1rem;
  }
  .testimonial-section{
      background-color: #f7f7f7;
  }
  .carousel-wrapper {
      text-align: center;
      width: 100%;
      background-color: #F7F7F7;
  
    }

    .carousel-title {
      margin-bottom: 20px;
      font-size: 24px;
      color: #2c2c2c;
    }

    .carousel-viewport {
      position: relative;
      overflow: hidden;
      width: 100%;
       /* Fits 3 cards */
      margin: auto;
    }

    .carousel-track {
      display: flex;
      transition: transform 0.5s ease;
      gap: 20px;
    }

    .testimonial-item {
      flex: 0 0 32%; /* 3 items per view */
      background: #F7F7F7;
      border-radius: 10px;
      padding: 20px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      text-align: left;
      transform: scale(0.9);
      opacity: 0.7;
      transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    }
    .testimonial-item p{
      font-weight: 600;
    }
    .testimonial-item.highlight {
      transform: scale(1.1);
      opacity: 1;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    }

    .testimonial-stars {
      color: #f4c150;
      font-size: 18px;
      margin-bottom: 10px;
    }

    .testimonial-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-top: 20px;
    }

    .testimonial-name {
      display: block;
      margin-top: 10px;
      font-weight: bold;
      color: #2c2c2c;
    }

    .carousel-controls {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20px;
      gap: 20px;
    }
    .carousel-item:hover {
      animation-play-state: paused;
    }
    .control-btn {
      background: none;
      border: none;
      cursor: pointer;
      font-size: 24px;
      color: #007bff;
      transition: color 0.3s;
    }

    .control-btn:hover {
      color: #0056b3;
    }

    .control-btn:disabled {
      color: #ccc;
      cursor: not-allowed;
    }
    .custom-articles {
      padding: 10px 0px;
      text-align: center;
    }
    .custom-articles .article-title {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 30px;
      
    }
    .custom-articles .card-title {
      font-size: 16px;
      margin-bottom: 20px;
      font-weight: bold;
     
      
    }
    .custom-articles .article-card {
      border: none;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      padding: 0px;
    }
    .custom-articles .article-card img {
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }
    .custom-articles .article-date {
      width: 150px;
      background: rgba(0, 0, 0, 0.7);
      color: #fff;
      font-size: 12px;
      padding: 10px 20px;
      border-radius: 20px;
      margin-top: -20px;
  
    }
    .custom-articles .card-body{
      text-align: left;
      padding:20px
    }
    .custom-articles .btn-read{
      background-color: #FF9700;
      color:white;
      padding: 3px;
      font-size: 0.9rem;
      font-weight: 700;
      text-wrap: nowrap !important;
    }
    .custom-articles .btn-view{
      background-color: #fff;
      color:#ff9700;
      border: 1px solid #ff9700;
      padding: 5px 15px;
      font-size: 20px;
      font-weight: 700;
    }
     /* Contact Form Section */

.custom-contact {
    padding: 30px 15px 0px 15px;
    margin: 0px 0px;
    border-radius: 0px;
}

.custom-contact .contact-title {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 30px;
}
.custom-contact .form-control {
  border-radius: 4px;
  background-color: #fff;
  width: 100%;
  border-radius: 1rem;
  font-size: 16px;

  /* height: 100%; */
  padding: 1rem;
 
}
.custom-contact textarea{
  height: 150px;
}
.custom-contact .form-group label {
  font-weight: bold;
  margin-bottom: 5px;
  display: block;
  text-align: left;
}
.custom-contact .btn-submit {
  border:1px solid #FF9700;
  color:#FF9700;
  border-radius: 10px;
  padding: 5px 20px;

}
.custom-contact .btn-submit:hover {
  background-color: #FF7A00;
  color: #fff;
}
.profile-dropdown-menu {
  max-width: 280px;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  right: 10px !important;
  top: 75px !important;
}

.profile-dropdown-header {
  text-align: center;
  margin-bottom: 10px;
}

.profile-dropdown-header img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-bottom: 10px;
  border: 2px solid #007bff;
}

.profile-dropdown-header h6 {
  margin: 0;
  font-weight: bold;
  font-size: 14px;
}

.profile-dropdown-header small {
  display: block;
  color: #6c757d;
  font-size: 12px;
  /* margin-bottom: 10px; */
}

.profile-dropdown-header a {
  color: #007bff;
  font-size: 13px;
  text-decoration: none;
}

.profile-dropdown-header a:hover {
  text-decoration: underline;
}

.profile-dropdown-item {
  display: flex;
  align-items: center;
  padding: 5px 0;
}

.profile-dropdown-item svg {
  font-size: 16px;
  color: black;
  margin-right: 10px;
}
.profile-dropdown-item img {
  font-size: 16px;
  color: black;
  margin-right: 10px;
}
.profile-dropdown-item a {
  font-size: 12px;
  color: black;
  margin-right: 10px;
}

.profile-dropdown-item:hover {
  background: #f8f9fa;
  border-radius: 5px;
  
}
/* Footer Section */
.custom-footer {
  background-color: #000;
  color: #fff;
  padding: 20px 15px;

}
.custom-footer a {
 
  text-decoration: none;
  margin-right:10px;
  color:#E5E7EB;
  font-size: 12px;
}
.custom-footer p{
  color: #E5E7EB;
  font-size: 14px;
}
.custom-footer .logo-img{
  height: 45px;
}
.custom-footer a:hover {
  text-decoration: none;
}
.custom-footer .social-icons {
  margin: 15px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.custom-footer .social-icons a {
  color: #fff;
  margin: 0 5px;
  font-size: 20px;
  /* border: 0.5px solid grey; */
  border-radius: 50%;

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

}
.custom-footer .social-icons a i{
  font-size: 14px;
}
  @keyframes bounce {
  0%, 100% {
  transform: translateY(0);
  }
  50% {
  transform: translateY(-10px);
  }
  }

  .profile-container {
    max-width: 800px;
    margin: 3rem auto;
    background-color: #fff;
    border-radius: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
   
  }

  .profile-header {
    margin-bottom: 30px;
  }

  .profile-header img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
    border: 2px solid #0072BC;
  }

  .btn-save {
    background-color: #ff9900;
    border: none;
    color: #fff;
  }

  .btn-save:hover {
    background-color: #ff9900;
    color: #fff;
  }
  .btn-name {
    background-color: #22b24c;
    border: none;
    border-radius: 10px;
    color: #fff;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
  }
  .btn-name-ads{
    background-color: #ff9700;
    border: none;
    border-radius: 10px;
    color: #fff;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
  }
  .btn-profile{
    background-color: #fff;
    border: 1px solid #ff9900;
    color: #ff9900;
  }
  .btn-profile:hover{
    background-color: #ff9900;
    border: 1px solid #ff9900;
    color: #fff;
  }


  .profile-form-container {
    background: #fff;
    padding: 1rem 2rem;
    border-radius: 8px;
    
    width: 100%;
    /* max-width: 500px; */
  }
  .form-label {
    font-weight: bold;
  }
  .form-control[readonly] {
    background-color: #e9ecef;
  }
  .profile-form-container textarea {
    height:100px;
  }
  .profile-form-container select{
    width: 20%;
    line-height: 1.3rem;
    border : 1px solid #ced4da;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
  }
  .modal-dialog{
    max-width: 700px;
  }
  .modal-content {
    text-align: center;
    background-color: #f9f9f9;
}

.modal-header {
    border-bottom: none;
    position: relative;
    justify-content: center;
}

/* Positioning the close button at the top right */
.btn-close-modal,.btn-close-modal:hover, .btn-close-modal:focus {
  position: absolute;
  right: 15px;
  top: 15px;
  color: #fff;
  padding: 3px 8px;
  border-radius: 50%;
  background-color: red;
  font-weight: bold;
  font-size: 15px;
  border: 0px;
}

.selected-button{
  background-color:#ff9900 !important;
  color: #fff !important;
  border: 0px;
  padding: 10px 30px;
}
.btn-nxt{
  padding: 10px 30px;
}
.categiroes-modal, .modal-body {
  padding: 0rem 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  height: 300px;
  overflow: auto;
  
}
#reportForm, .modal-body {
 
  display: block !important;

  
}
.modal-body .selected{
  background-color: #f9f9f9;
  border: 2px solid #0072BC;
}
.modal-category-item {
  background-color: #fff;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  padding: 5px 5px;
  margin: 0.5px;
  white-space: nowrap;
  cursor: pointer;
  text-align: center;
  width: 110px;
  font-size: 13px;
  height: 100px;
  display: flex
;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex-direction: column;
}

.modal-footer {
    border-top: none;
    text-align: center;
    justify-content: center;
}
  

  .container_my-4 {
    background-color: #f9f9f9;
    font-family: Arial, sans-serif;
  }

  .guidelines-card {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 20px;
  }

  .guidelines-card h2 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
  }
  .features-block{
    border: 1px solid #e0e2e7;
    border-radius: 10px;
    padding: 20px;
    margin-right: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
  }
  .features-block input{
    width: 18px;
    height:18px;
  }
  .place-order{
    padding: 15px 30px !important;
  }
  .place-order h2{
    font-size: 28px;
    font-weight: 500;
  }
  .place-order .form-label{
    font-weight: 500;
  }
  .place-order .form-select{
    line-height: 2.1rem;
  }
  .photo-grid {
    /* display: grid; */
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
    display: flex;
    flex-wrap: wrap;
  }
  
  .photo-grid .photo-item {
    background-color: #f8f9fa;
    border: 2px dashed #dcdcdc;
    border-radius: 6px;
    height: 120px;
    width: 18%;
    display: flex;
    align-items: end;
    justify-content: start;
    cursor: pointer;
    opacity: 0.5;
     /* Initially, all are disabled visually */
  /* pointer-events: none; */
  }
  .photo-item.active {
    border-color: blue; /* Blue border for active item */
    opacity: 1; /* Full opacity for active item */
    pointer-events: auto; /* Enable click */
}
.photo-item .image-remove{
  font-size: 12px;
}
.video-upload-container.active{
  border-color: blue; /* Blue border for active item */
    opacity: 1; /* Full opacity for active item */
    pointer-events: auto;
}
  /* .photo-grid .photo-item img {
    max-width: 40px;
  } */
  .photo-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
  }
  .video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
  }

  .video-grid .video-item {
    background-color: #f8f9fa;
    border: 2px dashed #dcdcdc;
    border-radius: 6px;
    min-height: 100px;
    max-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .video-grid .video-item img {
    max-width: 40px;
  }
  .ads-section .card {
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    height: 95%;
    margin-bottom: 20px;
    padding: 0px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}


  .card{
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    height: 95%;
    margin-bottom: 20px;
    padding: 10px;
    transition: all 0.3s ease-in-out;
  }
  .card:hover {
    background-color: #f9f9f9; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Stronger shadow */
    transform: scale(1.02);/* Slightly lighter background */
  }
  .color-option {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    width: 50px;
    height: 50px;
    margin-right: 10px;
    cursor: pointer;
  }

  .color-option.active {
    border: 2px solid #007bff;
  }

  .color-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .video-upload-container {
    border: 2px dashed #ddd;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    background-color: #f9f9fc;
    position: relative;
  }
  .video-upload-container:hover {
    background-color: #f1f3f9;
  }
  .video-upload-container img {
    width: 50px;
    opacity: 0.7;
  }
  .video-upload-container input[type="file"] {
    display: none;
  }
  .video-upload-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 10px;
  }
  .video-upload-subtitle {
    color: #6c757d;
    margin-bottom: 20px;
  }
  .video-preview {
    width: 100%;
    max-height: 250px;
    border-radius: 10px;
    margin-top: 0px;
  }
  .placeholder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 250px;
  }
  .placeholder-hidden {
    display: none;
  }
  .dollar{
    line-height: 1.0;
  }
  .alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}
.alert-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}
.required {
  color: red;
  font-weight: bold;
  margin-left: 4px;
}
.custom-user-table {
border-radius: 15px;
overflow: hidden;
border-collapse: separate;
border-spacing: 0;
}
.custom-user-table thead {
background-color: #22B24C;
color: white;
text-align: center;
}
.custom-user-table th, .custom-table td {
vertical-align: middle;
text-align: left;
/* padding: 1rem; */
background-color: #22B24C;
color: white;
}
.custom-user-table tbody tr:nth-child(odd){
background-color:#fff !important;
border: none;
vertical-align: middle;
}
.custom-user-table tbody tr:nth-child(even){
background-color: #F2F7FF !important;
border: none;
vertical-align: middle;
} 
.custom-user-table tbody td{
background-color: inherit !important;
border: 0px;
}
/* Container for the toggle */
.toggle-switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}

/* Hide default checkbox */
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}

/* The track */
.slider {
position: absolute;
cursor: pointer;
background-color: #ccc;
border-radius: 24px;
width: 100%;
height: 100%;
transition: background-color 0.3s;
}

/* The circular slider */
.slider::before {
content: "";
position: absolute;
height: 20px;
width: 20px;
left: 4px;
bottom: 2px;
background-color: white;
border-radius: 50%;
transition: transform 0.3s;
}

/* Toggled state */
.toggle-switch input:checked+.slider {
background-color: #4caf50;
}

.toggle-switch input:checked+.slider::before {
transform: translateX(26px);
}

.pagination-wrapper {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.pagination {
margin: 0;
}
.pagination .page-item .page-link {
border-radius: 5px;
padding: 0.5rem 0.75rem;
color: #000;
}
.pagination .page-item.active .page-link {
background-color: #007bff;
color: #fff;
border: none;
}
.pagination .page-item .page-link:hover {
background-color: #e9ecef;
border-color: #ddd;
}
.pagination .page-item.disabled .page-link {
color: #adb5bd;
pointer-events: none;
}
.btn-primary, .btn-primary:hover, .btn-primary:focus {
background-color: #FF9700 !important;
border: none;
border-radius: 5px;
padding: 5px 15px;
}
.btn-cancel, .btn-cancel:hover, .btn-cancel:focus {
background-color: #fff;
border: 1px solid #FF9700;
color:#FF9700;
border-radius: 10px;
padding: 5px 15px;
}
.custom-user-table .ads-location{
color:#525C84;
font-size: 12px;
}
.custom-user-table .ads-views{
color: #0072BC;
font-size: 12px;
}
.custom-user-table .ads-title{

font-size: 18px;
font-weight: 500;
}
.ads-main-title{
font-weight: 700;
font-size: 28px;
}
.custom-user-table .badge{
background-color: #FF9700;
padding: 2px;
font-size: 7px;
border: 1px solid white;
border-radius: 10px;
}
.custom-user-table .ads-img-block{
width: 120px;
height: 120px;
background-size: cover;
object-fit: cover;
border-radius: 10px;
}

.categories-section {
   
border-radius: 8px;
padding: 15px 20px;
margin-bottom: 20px;

}

.categories-container {
display: flex;
justify-content: space-between;
align-items: center;
overflow: hidden;
position: relative; /* Ensure correct stacking context for child elements */
/* overflow: visible; */
}

.categories-list {
display: flex;
gap: 15px;
overflow-x: hidden;
/* overflow-x: auto;  */
scroll-behavior: smooth;
}


.categories-list .category-item {
background-color: white;
border-radius: 8px;
padding: 10px 20px;
white-space: nowrap;
cursor: pointer;
text-align: center;

}

/* .categories-list .category-item.active {
background-color: #007bff;
color: #fff;
} */
.filters-space{
height: 80vh;
overflow: auto;
}
.filters-space-1{
height: 80vh;
overflow: auto;
}
.filter-section {
background-color: #fff;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
color: #999999;
}
.filter-section .form-check{
  
  margin-bottom: 0.5rem;
  }
  .filter-section .form-select{
    font-size: 14px;
    font-weight: 600;
  
    }
.filter-section h6 {

background-color: #0072BC;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
color: white;
font-size: 15px;
}
.ad-card {
background-color: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
.ad-card img {
width: 100%;
height: 200px;
object-fit: cover;
}
.ad-card .card-body {
padding: 15px;
}
.ad-card .price {
font-size: 1.2rem;
font-weight: bold;
color: #007bff;
}
.about-img{
  border-radius:20px;
  width: 90%;
  height: 60%;
}
.arrow-btn {
border-radius: 50px;
padding: 0.5rem 1rem;
margin: 1rem;
background-color: white;
border: 1px solid #ff9700;
color: #ff9700;

}
.arrow-btn:hover {
background-color: #ff9700;
color: white;
}
.btn-apply {
background-color: #ff9800;
color: #fff;
border: none;
border-radius: 8px;
width: 100%;
padding: 10px;
margin-top: 20px;
}
.btn-apply:hover {
background-color: #e68900;
}

.slider-container {
position: relative;
width: 160px;
margin: 0px;
}

.range-slider {
position: relative;
width: 100%;
height: 8px;
background: #ccc;
border-radius: 5px;
}

.range-progress {
position: absolute;
height: 100%;
background: #004a8f;
border-radius: 5px;
}

.handle {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 24px;
height: 24px;
background: #004a8f;
border-radius: 50%;
cursor: pointer;
}

.price-labels {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
.pagination {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.pagination .page-link {
border: none;
color: #000;
border-radius: 8px;
padding: 0.5rem 1rem;
}
.pagination .page-link:hover {
background-color: #f0f0f0;
}
.pagination .active .page-link {
background-color: #0072BC;
color: #fff;
font-weight: bold;
}
.pagination .dots {
border: none;
background: none;
color: #000;
cursor: default;
}

.dropdown-container {
position: relative;
}

.dropdown-toggle {
display: flex;
align-items: center;
cursor: pointer;
}

.dropdown-arrow {
margin-left: 8px;
font-size: 14px;
transition: transform 0.2s ease;
}

.dropdown-arrow.open {
transform: rotate(180deg);
}

/* .popup-menu {

background: #fff;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
display: none;
z-index: 10;
width: 230px;
padding: 10px;
} */
.popup-menus {
  display: none;
  position: absolute;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ddd;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  width: 220px;
  z-index: 10;
}
.popup-menus.visible {
display: block;

}

.popup-menus ul {
list-style: none;
padding: 0;
margin: 0;
}

.popup-menus li {
display: flex;
align-items: center;
padding: 8px;
font-size: 14px;
cursor: pointer;
transition: background 0.2s ease;
}

.popup-menus li:hover {
background: #f0f0f0;
}

.popup-menus li i {
margin-right: 10px;
font-size: 18px;
}
.image-outline{
  border: 1px dashed #6c757d;
}
.choose-text{
  font-size: 12px;
}
/* Profile Header */
.ads-user-profile {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  padding: 20px;
  justify-content: space-between;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}
.ads-user-profile img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}
.ads-user-profile .image-block{
  padding:3px;
  border:2px solid blue;
  border-radius: 100%;
}
.ads-user-details {
  margin-left: 15px;
}
.ads-user-details h5 {
  font-weight: bold;
  margin: 0;
  font-size: 22px;
}
.ads-user-details p{
  color: #888888;
  font-size: 15px;
  margin: 0px;
}


/* Product Title */
.ads-product-title {
  font-size: 1.5rem;
  font-weight: bold;
  font-size: 22px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Main Image and Slider */
.ads-main-image {
  position: relative;
  margin-top: 20px;
}
.ads-main-image img {
  width: 100%;
  border-radius: 10px;
}
.ads-main-image .ads-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 50%;
  padding: 10px;
  cursor: pointer;
}
.ads-arrow-left {
  left:20px;
}
.ads-arrow-right {
  right:20px;
}

/* Thumbnail Slider */
.ads-thumbnail-slider {
  
  gap: 10px;
  margin-top: 10px;
  overflow-x: auto;
  height: 160px;
  white-space: nowrap;
  scrollbar-width: none; /* Hide scrollbar for Firefox */
  -ms-overflow-style: none; /* Hide scrollbar for IE/Edge */
}

.ads-thumbnail-slider::-webkit-scrollbar {
  display: none; /* Hide scrollbar for Chrome, Safari, and Opera */
}
#thumbnail-slider{
  scroll-behavior: smooth;
}
#courouselList{
  scroll-behavior: smooth;
}

.ads-thumbnail-slider img {
  max-width: 179px;
  max-height: 135px;
  border-radius: 10px;
  cursor: pointer;
  border: 2px solid transparent;
}
.ads-thumbnail-slider .img-container{
width: 150px; 
height:150px;
border-radius:10px; 
margin-right:10px ;
}
.ads-thumbnail-slider .play-icon{
  top:35%;
  left:35%;
  padding:7px 10px 5px 13px;
  border-radius:50%; 
 
  }
.ads-thumbnail-slider button {
  flex-grow: 1;
}
.ads-thumbnail-slider img.active {
  border-color: #007bff;
}

/* Features Table */
.ads-features {
  margin-top: 30px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  background-color: #fff;
}
.ads-features ul {
list-style: none;
display: flex;
flex-wrap: wrap;
padding: 0px;
}
.ads-features ul li{
font-size: 13px;
}
.ads-features ul li:before {
content: '✓';
color: #FF9700;
padding: 5px;
width: 50%;
}
.ads-features .contact-info {

  border-radius: 5px;
  padding: 10px;
  margin-top: 20px;
}
.stretched-link-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* make sure it's clickable */
  text-decoration: none;
}
.ads-features .contact-info strong {
  display: inline-block;
  width: 300px;
  color: #555;
}
.ads-features .price{
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: start;
  align-items: center;

}
.ads-features .price h3{
  color:#0072BC;
  font-size: 25px;
  
}
.ads-features .price p{
  color:#888888;
  
}
/* Features List */
.ads-features-list {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ads-features-list span {
  padding: 5px 15px;
  background-color: #f1f1f1;
  border-radius: 20px;
  font-size: 0.9rem;
}

.ads-user-title{
  padding: 2px;
  background-color: #fff;
  border-radius: 10px;
  /* box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); */
}

.ads-user-title .ad-hours .clock{
  color: #F31E24;
  border:2px solid #F31E24;
  padding: 3px;
  font-size: 9px;
  border-radius: 15px;
}

.ads-heart{
  color: #F7941E;
  border:2px solid #F7941E;
  font-size: 1rem;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;

}

.ads-user-title .ads-heart{
  color: #F7941E;
  border:2px solid #F7941E;
  padding: 8px 15px;
  font-size: 10px;
  border-radius: 50%;
  font-size: 30px;
}
.ads-user-title .ad-hours .ids{
 color: #0072BC;
  margin: 10px;
  font-size: 12px;  
}
/* Description and Contact */
.ads-description {
  margin-top: 20px;
}
.ads-price {
  font-size: 2rem;
  color: #007bff;
  font-weight: bold;
}

/* Additional Blocks */
.ads-block {
  margin-top: 30px;
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}
.ads-block h5 {
  font-weight: bold;
  margin-bottom: 15px;
}

.ads-user-buttons  {
  justify-content: space-between;
}

.ads-user-buttons .btn {
    width: 28%;
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    /* padding: 0px 10px 0px 0px; */
    border-radius: 5rem;
    font-size: 1.2rem;
    font-weight: bold;
    color: white;
    cursor: pointer;
    text-decoration: none;
    margin: 1px;
    transition: all 0.3sease;
}
.ads-user-buttons span{
  font-size: 1rem;
}

/* .btn:hover {
  transform: scale(1.1);
} */

.ads-user-buttons .btn-phone {
  background-color: #0072BC;
  position: relative;
  color: white;
  text-decoration: none;
  border-radius: 1.5rem;
  font-weight: 600;
  min-width: 12rem;
}
.ads-user-buttons .btn-whatsapp {
  background-color: #73CE42;
  position: relative;
  color: white;
  text-decoration: none;
  border-radius: 1.5rem;
  font-weight: 600;
  min-width: 12rem;
}
.ads-user-buttons .btn-email {
  background-color: #EF5D50;
  position: relative;
  color: white;
  text-decoration: none;
  border-radius: 1.5rem;
  font-weight: 600;
  min-width: 14rem;
}

.ads-user-buttons .btn-phone i {
  /* margin-right: 8px; */
  background-color: #035b95;
  padding: 15px;
  border-radius: 30px;
}
.ads-user-buttons .btn-whatsapp i {
  /* margin-right: 8px; */
  background-color: #53bb1b;
  padding: 15px;
  
  border-radius: 30px;
}
.ads-user-buttons .btn-email i {
  /* margin-right: 8px; */
  background-color: #e44c3e;
  padding: 15px;
  border-radius: 30px;
}
.listing-ads-outside{
  height: 100px;
  display: none;
}
@media (max-width: 1299px) {
  .ads-user-buttons .btn-phone i {
    background-color: #035b95;
    padding: 8px;
    border-radius: 30px;
  }
  .ads-user-buttons .btn-whatsapp i {
    background-color: #53bb1b;
    padding: 8px;
    
    border-radius: 30px;
  }
  .ads-user-buttons .btn-email i {
    background-color: #e44c3e;
    padding: 8px;
    border-radius: 30px;
  }

}



.ads-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 20px;
}
.ads-info-item {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
}

.ads-info-item strong {

  font-size: 14px;
  color: #888888;
}

.ads-info-item span {
  font-size: 14px;
  font-weight: bold;
}
.btn-edit-ads, .btn-edit-ads:hover {
background-color: #2563EB;
color: white;
border-radius: 5px;
}
.btn-delete-ads, .btn-delete-ads:hover {
background-color: #FF4E4E;
color: white;
border-radius: 5px;
}

.cp-container {
max-width: 400px;
margin: 50px auto;
padding: 20px;
border-radius: 25px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
background-color: #fff;
}

.cp-container h2 {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 20px;
color: #333;
}

.cp-container .form-control {
border-radius: 8px;
}

.cp-container .btn-save {
background-color: #ff9900;
border: none;
color: #fff;
font-weight: bold;
border-radius: 8px;
padding: 5px 20px;
}

.cp-container .btn-save:hover {
background-color: #e68a00;
}

.cp-eye-icon {
position: absolute;
right: 10px;
top: 72%;
transform: translateY(-50%);
cursor: pointer;
}

.cp-form-group {
position: relative;
}
.mem-container {
max-width: 1200px;
margin: 0 auto;

}

.mem-header {
font-size: 28px;
font-weight: 700;
margin-bottom: 20px;
color: #333;
}

.mem-current-plan,
.mem-next-payment {
padding: 20px;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}

.mem-current-plan h3 {
font-size: 30px;
font-weight: 600;
color: #ff9700;
margin-bottom: 10px;
}

.mem-current-plan .price {
font-size: 50px;
font-weight: bold;
color: #333;
}

.mem-current-plan .price span {
font-size: 15px;
font-weight: normal;
color: #666;
}

.mem-upgrade-btn {
background-color: #ff9700;
color: #fff;
border: none;
border-radius: 8px;
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
}

.mem-upgrade-btn:hover {
background-color: #e68a00;
}

.mem-next-payment p {
font-size: 16px;
color: #666;
margin-bottom: 10px;
}

.mem-next-payment .pay-now-btn {
background-color: #ffe4b3;
border: none;
border-radius: 8px;
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
color: #fff;
}

.mem-plans {
display: flex;
gap: 20px;
margin-top: 30px;
}

.mem-plan-card {
flex: 1;
height: 500px;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
padding: 30px;
text-align: left;
position: relative;

}

.mem-plan-card.free {
background-color: #EDF8FF;
border:1px solid #ff9700;
}

.mem-plan-card h4 {
font-size: 22px;
font-weight: 600;
color: #333;
margin-bottom: 10px;
}

.mem-plan-card .price {
font-size: 50px;
font-weight: bold;
color: #333;
margin-bottom: 20px;
}

.mem-plan-card .price span {
font-size: 15px;
font-weight: normal;
color: #666;
}

.mem-plan-card ul {
list-style: none;
padding: 0;
margin: 20px 0;
text-align: left;
}

.mem-plan-card ul li {
font-size: 16px;
color: #333;
margin-bottom: 10px;
font-weight: 600;
display: flex;
align-items: center;
}

.mem-plan-card ul li::before {
content: "✔";
color: #ff9700;
font-weight: bold;
margin-right: 10px;
}

.mem-plan-card .btn {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background-color: #ff9700;
color: #fff;
border: none;
border-radius: 8px;
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
}
.mem-plan-card .btn-current , .mem-plan-card .btn-current:hover {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background-color: #fff;
color: #ff9700;
border: 1px solid #ff9700;
border-radius: 8px;
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
}

.mem-plan-card .btn:hover {
background-color: #e68a00;
}
/* Secondary Navbar */
.secondary-navbar {
width: calc(100% - 371px);
background-color: #fff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
border-bottom-right-radius: 50px;
border-bottom-left-radius: 50px;
margin-top: -35px;

}

.secondary-navbar .nav-link {
font-weight: 500;
padding-left:4px;
color: #000;
font-size: 14px;
border-bottom: 3px solid #fff;
}

.secondary-navbar .nav-link.active {
color: #ff9700;

padding-left:4px;
border-bottom: 3px solid #ff9700;

}
.secondary-navbar .nav-svg {
margin-left: 10px;
color: #000;
}
.secondary-navbar .nav-svg.active {
  color: #ff9700;
  }
.secondary-navbar .nav-svg.active {
  margin-left: 10px;
color: #ff6600;

}
.faq-section .faq-title{
font-size: 28px;
font-weight: 700;
}
.faq-section .faq-header {
position: relative;
padding-right: 40px;
background-color: #fff;
font-size: 1rem;
font-weight: bold;
border-radius: 15px;
box-shadow: none;
}
.faq-section .faq-header {
font-size: 18px;
}
.faq-section .faq-header button {
color: #000;
text-decoration: none;
width: 100%;
padding: 15px 20px;
text-align: left;
font-weight: bold;
background: none;
border: none;
outline: none;
display: flex;
justify-content: space-between;
align-items: center;
}

.faq-section .faq-header button:focus {
box-shadow: none;
}

.faq-section .faq-header button::after {
  content: '-'; /* Show minus initially */
  position: absolute;
  right: 20px;
  font-size: 2rem;
  font-weight: 400;
  transition: transform 0.3s ease, content 0.3s ease;
}

/* Change to plus when collapsed */
.faq-section .faq-header button.collapsed::after {
  content: '+'; /* Show plus when collapsed */
  font-size: 2rem;
  font-weight: 400;
}

.faq-section .faq-body {
padding: 20px;
font-size: 14px;
color: #555;
}

.faq-section .faq-card {
background-color: #fff;
border: none;
border-radius: 15px;
box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1);
margin-bottom: 15px;
}

.faq-section .accordion-collapse {
border-top: none;
}

.blogs-inner-card {
display: flex;
flex-direction: column;
background-color: #fff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
border-radius: 20px;
overflow: hidden;
margin: 0px 50px;
width: 75%;
}

.blogs-inner-image {

}

.blogs-inner-image img {
width: 100%;
height: 300px;

}

.blogs-inner-content {
flex: 1 1 60%;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.blogs-inner-date {
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  background-color: #000;
  padding: 10px 20px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 15px;
  margin-top:-50px
}

.blogs-inner-title {
font-size: 26px;
font-weight: 700;
margin-bottom: 10px;
}

.blogs-inner-description {
font-size: 14px;
color: #555;
margin-bottom: 20px;
}
.con-contact-info {
display: flex;
justify-content: center;

}

.con-card-1 {
flex: 1;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 1rem;
text-align: center;
}
.con-card {
  flex: 1;
  padding: 1rem;
  text-align: center;
  }
.con-card-icon {
font-size: 20px;
color: #0072BC;
margin-bottom: 10px;
}

.con-card-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 5px;
color: #333;
}

.con-card-text {
font-size: 16px;
color: #666;
}

.con-contact-section {
display: flex;
gap: 20px;
}

.con-map {
flex: 1;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.con-form {
flex: 1;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 20px;
}

.con-form .form-control {
border-radius: 8px;
padding: 10px 15px;
font-size: 16px;
margin-bottom: 15px;
}
.break-email{
      word-break: break-all;
    overflow-wrap: break-word;
    white-space: normal;
}
/* Small font size when value is empty (placeholder) */
.contact-info:invalid {
  color: #6c757d;
  font-size: 12px;
  padding-top: 20px;
}

/* Normal size when valid selection is made */
.contact-info:valid {
  color: #000;
  font-size: 16px;
}

.con-submit-btn {
background-color: #fff;
color: #FF9700;
border: 1px solid #FF9700;
border-radius: 8px;
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
}
.img-fluid{
  width: 50% !important;
  margin: 20px;
}
.con-submit-btn:hover {
background-color: #e68a00;
color:#fff;
}
video{
  border-radius: 20px;
}
.hiworks-hero-section {
text-align: left;
margin-top: 1rem;
}
.hiworks-hero-section h2{
font-size: 25px;
}
.hiworks-hero-section p{
font-size: 11px;
margin-bottom: 4px;
text-align: justify;
}
.hiworks-hero-section li{
font-size: 11px;
text-align: justify;

}
.hiworks-hero-section ul{
margin-bottom: 4px;

}
.about-text ul{

 padding-left: 1rem;
}
.about-text p{
  margin-bottom: 2px;
 
}
.about-text li, .about-text p{
  font-size: 11px;
   text-align: justify;
}
.hiworks-hero-section button, .hiworks-hero-section button:hover{
  

border: 1px solid #ff9700;
color: #ff9700;
background-color: none;
font-weight: 600;
border-radius: 10px;
padding: 10px 20px;
margin-top: 10px;
}
.hiworks-video-carousel {

}
.hiworks-video-carousel h3 {
font-size: 28px;
font-weight: 600;
}
.hiworks-video-carousel .corousel-inner .corousel-item{

box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
}
video{
height: 300px;
}
.thumbnail-container{
  width: 67%;
}
.hiworks-thumbnail-videos {
display: flex;
gap: 1rem;
margin-top: 1rem;
overflow-x: auto;
white-space: nowrap;
  scrollbar-width: none; /* Hide scrollbar for Firefox */
  -ms-overflow-style: none;
  
}

.hiworks-thumbnail-videos video {
height: 122px;
width: 300px;

}
.hiworks-thumbnail {
width: 150px;
cursor: pointer;
}

.hiworks .carousel-control-next, .hiworks .carousel-control-prev {
filter: invert(1);
}

.hiworks-steps-section {
margin: 2rem auto;
text-align: center;
max-width: 1200px;
}

.hiworks-step {
text-align: center;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 15px;
background-color: #fff;;
}
.hiworks-icon{
padding: 10px;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
border-radius: 50%;
margin: 10px;
}
.hiworks-step p{
font-size: 12px;
}
.hiworks-step h5{
color: #0072BC;
font-size: 16px;
}
.user-notification-popup {
position: fixed;
top: 16vh;
right: 12vw;
width: 350px;
max-height: 400px;
overflow: auto;
background: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
padding: 15px;
display: none;
z-index: 1000;
color: black;
}
.user-notification-popup .notification-item {
display: flex;
flex-direction: column;


padding: 10px;
border-radius: 8px;
margin-bottom: 10px;
}
.user-notification-popup .notification-time{
color: #a3a3a3;
font-size: 12px;
}
.user-notification-popup .notification-item:nth-child(odd) {
background: #f8f9fa;
}
.user-notification-popup .notification-item:nth-child(even) {
background: #fde2e2;
}
.user-notification-popup .notification-img {
height: 100%;
border-radius: 8px;
margin-right: 10px;
}
.user-notification-popup.notification-text strong{
font-size: 18px;
}
.user-notification-popup .notification-text p,
.user-notification-popup .notification-text span {
font-size: 14px;
}

.user-notification-popup .notification-text {
flex: 1;
}
.user-notification-popup .status-accepted {
color: green;
font-weight: 600;
}
.user-notification-popup .status-declined {
color: red;
font-weight: 600;
}

.aboutus-banner {
  background-size: cover;
  color: white;
  border-radius: 20px;
  padding: 30px 30px 30px 200px;
  margin: 30px 0;
  position: relative;
  background-size: 100% 100% !important;
  height: 300px;

}

.aboutus-banner img {
  max-width: 100%;
  height: auto;
  border-radius: 15px;
}
.aboutus-banner h2 {
  font-size: 40px;
}
.aboutus-banner h3{
  font-size: 18px;
}
.aboutus-banner p{
  font-size: 14px;
}
.aboutus-stats {
  background: #0072BC;
  color: white;
  text-align: center;
  padding: 40px 20px;
 
  margin-bottom: 40px;
}
.aboutus-stats h2 {
  font-size:28px;
}
.aboutus-stats .stat-item {
  margin-bottom: 20px;
}

.aboutus-stats .stat-item h4 {
  font-size: 35px;
  margin: 30px 5px 5px 5px;
  
}
.aboutus-stats .stat-item .icons{
  padding: 30px 15px;
  border-radius: 50%;
}

.about-us-trusted-companies {
  text-align: center;
  margin-bottom: 40px;
}

/* .scrolling-companies {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  scroll-behavior: smooth;
  position: relative;
}

.scrolling-companies::-webkit-scrollbar {
  height: 8px;
}

.scrolling-companies::-webkit-scrollbar-thumb {
  background: #007bff;
  border-radius: 10px;
}

.scrolling-companies .img-block {
  padding: 10px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.scrolling-companies .img-block img {
  max-width: 120px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.scrolling-companies .img-block.active {
  transform: scale(1.2);
  z-index: 10;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
} */
/* .scrolling-companies {
display: flex;
overflow: hidden;
white-space: nowrap;
position: relative;
}

.scrolling-companies::-webkit-scrollbar {
display: none;
}

.scrolling-companies .img-block {
padding: 10px;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
flex-shrink: 0;
margin: 20px 10px;
border: 1px solid #b7b7b7;
border-radius: 10px;
}

.scrolling-companies .img-block img {
max-width: 120px;
transition: transform 0.3s ease;
}

.scrolling-companies .img-block.active {
transform: scale(1.2);
z-index: 10;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
} */
.scrolling-wrapper {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  width: 100%;
  background: #f8f8f8;
  padding: 10px 0;
}

.scrolling-companies {
  display: flex;
  gap: 20px;
  justify-content: center;
  animation: scrollAnimation 20s linear infinite;
}

.scrolling-companies img {
  
  transition: transform 0.3s ease-in-out;
  
}
.scrolling-companies .img-block {
  padding: 10px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  flex-shrink: 0;

  border: 1px solid #b7b7b7;
  border-radius: 10px;
  height: 150px;
  width: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  }
  .scrolling-companies .img-block img {
    max-width: 200px;
    max-height: 130px;
  } 
   .scrolling-companies .img-block.active {
    transform: scale(1.1);
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    } 


/* .scrolling-companies .img-block.active img {
  transform: scale(1.8);
} */

@keyframes scrollAnimation {
  from {
      transform: translateX(0);
  }
  to {
      transform: translateX(-50%);
  }
}
.about-us-happy-clients {
  text-align: center;
  margin-bottom: 40px;
}

.about-us-client-card {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin: 0 10px;
}

.aboutus-executive-team {
  text-align: center;
  margin-top: 40px;
}

.aboutus-executive-team .team-member img {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 10px;
}
.aboutus-executive-team .team-member {
  
  border-radius: 10px;
  margin-bottom: 10px;
}
.aboutus-executive-team .team-member h5 {
  font-size: 20px;
  font-weight: 700;
}
.aboutus-executive-team .team-member p {
  font-size: 15px;
  color: #888888;
}



.categories-filters-section  {
     
  border-radius: 8px;
  
}

.categories-filters-section .categories-container {
  display: flex;
  justify-content: space-between;
  align-items: center;


   /* Ensure correct stacking context for child elements */
/* overflow: visible; */
}

.categories-filters-section .categories-list {
  display: flex;
  gap: 0px;

  position: relative;
  width: 100%;
  white-space: nowrap;

}
.categories-filters-section .categories-list::-webkit-scrollbar {
display: none;
}
.categories-filters-section .popup-menu {
display: none; /* Hidden by default */
position: absolute;
top: 40px;
left: 0;
background-color: #fff;
padding: 10px;
border: 1px solid #ddd;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
width: 200px;
}
.categories-filters-section .category-item {
  border: 1px solid #e1e1e1; /* Show popup if active */
  }
.categories-filters-section .category-item:hover {
  border: 1px solid #0072BC;
  color: #0072BC; /* Show popup if active */
  }
.categories-filters-section .category-item.active .popup-menu {
display: block; /* Show popup if active */
}

.categories-filters-section .category-item {
position: relative;
display: inline-block;
margin: 3px;
cursor: pointer;
flex: 1;
}

.categories-filters-section .categories-list .category-item {
  background-color: white;
  border-radius: 8px;
  padding: 0.5rem;
  white-space: nowrap;
  cursor: pointer;
  text-align: center;
  height: 95px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.categories-filters-section .categories-list div {
  font-size:14px;
  font-weight: 600;
  line-height: 1rem;
}
.categories-filters-section .categories-list img {
  width: 30px;
}
.categories-filters-section .popup-menu{
  width: 300px;
max-height: 350px;
overflow: auto;
border-radius: 10px;
}
.categories-filters-section .popup-menu.visible {
  display: block;

}

.categories-filters-section .popup-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.categories-filters-section .popup-menu li {
  display: flex;
  align-items: center;
  padding: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.categories-filters-section .popup-menu li:hover {
  background: #f0f0f0;
}

.categories-filters-section .popup-menu li i {
  margin-right: 10px;
  font-size: 18px;
}


/* Animations for home pageeee */
.animate {
opacity: 0;
transform: scale(0.8) translateY(30px);
transition: all 0.6s ease-out;
}

/* When the element becomes visible */
.animate.show {
opacity: 1;
transform: scale(1) translateY(0);
}

/* Slide from Left */
.slide-left {
transform: translateX(-50px);
}

.slide-left.show {
transform: translateX(0);
}

/* Slide from Right */
.slide-right {
transform: translateX(50px);
}

.slide-right.show {
transform: translateX(0);
}

/* Slide from Top */
.slide-top {
transform: translateY(-50px);
}

.slide-top.show {
transform: translateY(0);
}

/* Slide from Bottom */
.slide-bottom {
transform: translateY(50px);
}

.slide-bottom.show {
transform: translateY(0);
}

/* Scale Effect */
.scale-up {
transform: scale(0.8);
}

.scale-up.show {
transform: scale(1);
}

/* Initial hidden state */


/* When scrolling back up (fade out effect) */
.animate.hide {
opacity: 1;
transform: scale(1) translateY(20px);
}
.create-ad-form{
  width: 75%;
 
}
@media screen and (max-width: 1600px) {
  header .navbar {
      width: calc(100% - 40px); /* Reduce width slightly for better spacing */
  }
  
  .secondary-navbar{
    width: calc(100% - 15px);
  }
  }
  @media screen and (max-width: 1367px) {
  header .navbar {
      width: calc(100% - 100px); /* Reduce width slightly for better spacing */
      
  }
  .aboutus-banner h2{
    font-size: 24px;
  }
  .aboutus-banner{
   
    padding: 30px;
  }
  .aboutus-banner img{
    width: 200px;
    height: 200px;
  }
  .filters-space{
    height: 200vh;
    overflow: auto;
  }
  .filters-space-1{
    height: 200vh;
    overflow: auto;
  }
  .flags-div{
    flex-wrap: nowrap;
  }
  .flags-div .img-con{
    height: 60px;
  }
  .flags-div p{
    font-size: 14px;
  }
  header .navbar-brand {
    width: 200px;
  }
  .secondary-navbar{
    width: calc(100% - 74px);
  }
  .secondary-navbar .nav-link {
    font-size: 12px;
  }
  .custom-contact {
    margin:0px;
  }
  }
  @media screen and (min-width: 1200px) {
    
    .col-xl-2{
      width:20%
    }
  }
  @media screen and (max-width: 1169px) {
    .flags-div .img-con{
      height: 40px;
    }

  }
  @media (max-width: 768px) {
  .hiworks-steps-section {
      gap: 10px;
    }
    .hero{
      height: 20vh !important;
    }
    .listing-ads-inside{
  
      display: none;
    }
    .carousel-track {
      flex-wrap: wrap;
      justify-content: center;
    }
    .testimonial-item {
      flex: 0 0 90%;
    }
    .blogs-inner-card {
      
      width: 100%;
      margin: 5px;
      }
      .blogs-inner-image img {
        height: 200px;
    }
    .listing-ads-outside{

      display: block;
    }
    video{
      height: 150px;
    }
  header .navbar-brand{
    width:70%;
    
  }
  .create-ad-form{
    width: 100%;
   
  }
  .left-ad{
    display: none !important;
  }
  .filters-space-1{
    display:none
  }
  .outer-container{
    padding-left: 5px;
    padding-right: 5px;
    margin-left: 5px;
    margin-right: 5px;
    flex-direction: column;
  }
  .hiworks-video-carousel{
    margin: 0px !important;
  }
  .hiworks-hero-section img{
    width: 100%;
  }
   .hiworks-video-carousel .carousel-inner{
    width: 100% !important;
  }
  .hiworks-thumbnail-videos video{
  border:1px solid orange;
  }
   .profile-container .rounded-pill{
    width: 50% !important;
  }
  .custom-user-table{
  overflow-x:scroll;
  }
  .ads-img{
    flex-direction: column;
  }
  .ads-img img{
    width:130px !important;
  height:80px !important;

    }
    .ads-img .ads-title{
    font-size: 12px !important;
    }
  .aboutus-banner{
    flex-direction: column;
  }
  .aboutus-banner img{
    display: none;
  }

  .contact .custom-contact{
    margin:0px;
  }
  .contact form{
    padding: 0px;
  }
  .con-contact-section{
    grid-template-columns: 1fr !important;
  }
  .con-contact-info{
    flex-direction: column;
    padding: 10px !important;
  }
  .profile-dropdown-menu{
    position:absolute !important;
  }
  .photo-grid .photo-item{
    height: 100%;
  }
  .ads-user-buttons{
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }
  .responsive-design-div{
    grid-template-columns: 1fr !important;
  }

  .secondary-navbar{
    display: none;
  }
  header .navbar {
    width: 120%;
  }
  .place-ad-btn{
  font-size: 12px;
  }
  header .navbar-nav .nav-link {
  
  font-size: 12px;
  }
  .flags-div{
  flex-wrap: wrap;
  }
  .flags-div .img-con{
  height: 80px;
  }
  .flags-div p{
  font-size: 16px;
  }
  }
  @media (max-width: 480px) {
    
    video{
      height: 150px;
    }
  header .navbar-brand{
    width:200px;
    
  }
  
  .create-ad-form{
    width: 100%;
   
  }
  .left-ad{
    display: none !important;
  }
  .filters-space-1{
    display:none
  }
  .outer-container{
    padding-left: 5px;
    padding-right: 5px;
    margin-left: 5px;
    margin-right: 5px;
    flex-direction: column;
  }
  .hiworks-hero-section img{
    width: 100%;
  }
  .aboutus-banner{
    flex-direction: column;
  }
  .aboutus-banner img{
    display: none;
  }

  .contact .custom-contact{
    margin:0px;
  }
  .contact form{
    padding: 0px;
  }
  .con-contact-section{
    grid-template-columns: 1fr !important;
  }
  .con-contact-info{
    flex-direction: column;
    padding: 10px !important;
  }
  .profile-dropdown-menu{
    position:absolute !important;
  }
  .photo-grid .photo-item{
    height: 100%;
  }
  .ads-user-buttons{
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }
  .responsive-design-div{
    grid-template-columns: 1fr !important;
  }
/*   .ads-user-buttons .btn-email{
    min-width: 12rem !important;
  } */
  .secondary-navbar{
    display: none;
  }
  header .navbar {
    width: 120%;
  }
  .place-ad-btn{
  font-size: 12px;
  }
  header .navbar-nav .nav-link {
  
  font-size: 12px;
  }
  .flags-div{
  flex-wrap: wrap;
  }
  .flags-div .img-con{
  height: 80px;
  }
  .flags-div p{
  font-size: 16px;
  }
  .ads-info-grid{
    grid-template-columns: repeat(1, 1fr);
  }
  }
  
/* Tooltip (Initially Hidden) */
.safety-tooltip {
  position: absolute;
  top: 100%; /* Position below the button */
  left: 100%;
  transform: translateX(-35%);
  width: 350px;
  background-color: #ff8c00;
  color: white;
  padding: 10px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 400;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  margin-top: 10px; /* Space between button and tooltip */
  z-index: 1; /* Ensures tooltip stays behind button */
}

/* Tooltip Arrow */
.safety-tooltip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #ff8c00 transparent;
}

.safety-tooltip-box {
  
  width: 350px;
  min-height: 365px;
  background-color: #ff8c00;
  color: white;
  padding: 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 400;
 
  
}


.safety-tip-container{
  border: 1px solid #fff;
  text-align: left;
  padding: 5px;
  
}
.safety-tip-container strong{
  font-size: 1rem;
  font-weight: 600;
}

/* Show Tooltip on Hover */
.btn-email:hover .safety-tooltip {
  visibility: visible;
  opacity: 1;
}
.btn-phone:hover .safety-tooltip {
  visibility: visible;
  opacity: 1;
}
.btn-whatsapp:hover .safety-tooltip {
  visibility: visible;
  opacity: 1;
}

.heart-icon svg {
  transition: fill 0.3s ease;
  fill: #999999;
    /* default color */
}

.heart-icon.favourited svg {
  fill:#FF9700 ; /* or your preferred color for a favourited state */
}
.ads-heart svg {
  transition: fill 0.3s ease;
  fill: #999999;
    /* default color */
}

.ads-heart.favourited svg {
  fill:#FF9700 ; /* or your preferred color for a favourited state */
}


/* changes from march 13, 2025 */
.carouselMainDiv{
  background-color: #0072BC50;
  border-radius: 0.5rem;
} 

.title-text{
  color: #000;
  font-weight: 600;
}

@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav {
      flex-direction: row;
      align-items: center !important;
  }
}

.model_grid{
  display: flex !important;
  /* display: grid !important;  
  grid-template-columns: repeat(4, 1fr); 
  gap: 2px;
  justify-items: center;  */
}
.home-headings{
  font-size: 1.4rem !important;
}
.addBoost{
  background:#F7941E; color:white; border-radius: 5px; font-size: 1rem; border: none; font-weight: 500;
  padding: 5px 10px;
  min-width: 100px;
  text-wrap: nowrap;
  z-index: 9;
  cursor: pointer;
}

.rejectBoost{
  background:#fff; color:#F7941E; border-radius: 5px; font-size: 1rem; border: 1px solid #F7941E; font-weight: 500; padding: 0px 5px;
  z-index: 9;
  cursor: pointer;
}

.report-btn{
  font-size: 0.8rem; color:#546B7E; border: 2px solid #E3E5E8; padding: 0.1rem 0.5rem; margin: 1px; background-color: #fff; outline: none; border-radius: 1.5rem;
  margin-right: 0.4rem;
}


.coinbtn{
  background-color: #FF9700; border-color: #FF9700; border-radius: 1.6rem; color: #fff; font-weight: 700;
}













.filter-section .country-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.filter-section .country-list li {
  padding: 5px 10px;
  cursor: pointer;
  position: relative;
  font-weight: 500;
  color: #999999;
}

.filter-section .btn-arrow {
  background-color: transparent;
  border: none;
  display: flex ;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  color: #999999;
}
.filter-section .dropdown-menu {
  position: absolute;
  left: 100%;
  top: 0;
  width: 200px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1050;
  transform: translate3d(170px, 0px, 0px) !important;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.video-wrapper-home {
  display: inline-block;
  position: relative;
}

#playButton {
  font-size: 60px;
  color: #ff9700;
  cursor: pointer;
  display: flex;
  font-size: 30px;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
  z-index: 10;
}

#playButton i {
  font-size: 35px;
}

/* Hide button when video is playing */
#playButton.hide {
  display: none;
}
/* Highlight invalid fields */
.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: #dc3545;
    background-image: none;
}

/* Highlight valid fields */
.form-control.is-valid {
    border-color: #28a745;
}
/* swal popup design */
.swal2-modal{
  width: 350px;
  height: 400px;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  border-radius: 30px;
}
.swal2-modal .swal2-icon{
  width: 50px;
  height: 50px;
}
.swal2-modal .swal2-icon .swal2-icon-content{
  font-size:30px;
  font-weight: 600;

}
.swal2-title{
  font-size: 28px;
}
.swal2-html-container{
  font-size: 18px;
}
.swal2-confirm,.swal2-deny,.swal2-cancel{
  border-radius: 20px;
  padding: 5px 30px;
}
/* Scroll color blue */
/* For Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 12px; /* Width of the scrollbar */
  height: 12px; /* Height of the scrollbar for horizontal scroll */
}

/* Track (background) */
::-webkit-scrollbar-track {
  background: #f1f1f1; /* Light gray background */
}

/* Handle (scrollbar thumb) */
::-webkit-scrollbar-thumb {
  background-color: #0072bc; /* Blue scrollbar handle */
  border-radius: 6px; /* Rounded corners for the handle */
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background-color: #0072bc; /* Darker blue on hover */
}

/* For Firefox */
* {
  scrollbar-color: #0072bc #f1f1f1; /* Thumb and track color */
  scrollbar-width: thin; /* Thin scrollbar */
}


.product-ads .modal-dialog {
  max-width: 700px;
  height: 95vh;
}

.product-ads .modal-content {
  padding: 20px;
  border-radius: 10px;
}

.product-ads .modal-header {
  border-bottom: none;
}

.product-ads .modal-body {
  max-height: 500px;
  overflow-y: auto;
}
.product-ads .modal-body .gi-body{
  border:1px solid #dadada;
  border-radius: 5px;
  text-align: left;
}

.product-ads .modal-body textarea{
  height: 130px;
}
.product-ads .section-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: left;
}

.product-ads .product-image {
  width: 100%;
  border-radius: 10px;
  height: 300px;
  object-fit: contain;
}
.carouselMainDiv{
background-color: #0072BC50;
border-radius: 0.5rem;
} 
.product-ads .thumbnail-container {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
#thumbnailSlider {
overflow-x: auto; /* Enable horizontal scrolling */
white-space: nowrap; /* Prevent images from wrapping to the next line */
scroll-behavior: smooth; /* Enable smooth scrolling */
-webkit-overflow-scrolling: none; /* Enable smooth scrolling for mobile */
width: 100%; /* Optional: Set width to contain the thumbnails */
-ms-overflow-style: none;
}
#thumbnailSlider::-webkit-scrollbar {
display: none; /* For Chrome, Safari, and Opera */
}
.product-ads .thumbnail {
  min-width: 150px;
  max-width: 150px;
  height: 150px;
  border-radius: 10px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.3s;
  margin:2px;
}
.contact-info span {
  display: inline-block;
  width: 200px;
  color: #555;
}
.product-ads .thumbnail.active {
    border-color: #5B93FF;
}
#productads .col-md-2{
  width:15% !important;
}
.product-ads .info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 20px;
}

.product-ads .info-item {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
}

.product-ads .info-item2 {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.product-ads .info-item strong {
    font-size: 14px;
    color: #888888;
}

.product-ads .info-item span {
    font-size: 14px;
    font-weight: bold;
}
.product-ads .features-list {
    list-style-type: disc;
    padding-left: 20px;
    display: flex;
    flex-wrap: wrap;
}

.product-ads .features-list li {
    margin-right: 30px;
}

.product-ads .contact-info {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    margin-top: 20px;
}

.product-ads .contact-info strong {
    display: inline-block;
    width: 100px;
    color: #555;
}
.boost-modal{
  height: auto;
}
.boost-card {
  background: #fff;
  border-radius: 16px;
  transition: transform 0.3s ease;
  height:100%;
  position: relative;
}
.boost-card li{
  text-align: left;
  font-size: 12px;
}
.boost-card .pay-btn{
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  width: 190px !important;

}

.boost-card:hover {
  transform: translateY(-5px);
   background-color: #ff9700;
  color: white;
}
.boost-card:hover .pay-btn{
  background-color: #fff;
  color: #ff9700;
  border: 2px solid #ff9700;
  border-radius: 20px;
  font-weight: 600;
}


.boost-card-header {
  font-weight: bold;
  font-size: 1.1rem;
  background-color: #ff9700;
  color: #fff;
  border-radius: 20px;
  padding: 5px 10px;
  display: inline-block;
}

.boost-price {
  font-size: 1.4rem;
  font-weight: bold;
}

.boost-dollar {
  color: #ff9700;
  font-size: 12px;
}
.boost-days{
  font-size: 12px;
}
.boost-amount {
  color: #ff9700;
}

.boost-btn {
  background-color: #ff9700;
  color: #fff;
  border-radius: 20px;
  font-weight: 600;
}

.boost-btn-white {
  background-color: #fff;
  color: #ff9700;
  border: 2px solid #ff9700;
  border-radius: 20px;
  font-weight: 600;
}

.boost-btn:hover,
.boost-btn-white:hover {
  opacity: 0.9;
}

.boost-card-highlighted {
  background-color: #ff9700;
  color: white;
}


.boost-card:hover .boost-price .boost-dollar,
.boost-card:hover .boost-amount {
  color: white;
}

.boost-card:hover .boost-card-header{
  background-color: #fff;
  color: #ff9700;
}
.boost-card:hover .text-muted {
  color: #fff !important;
}

.boost-card:hover hr {
  border-top: 1px solid #fff;
}

.boost-card:hover .boost-btn-white {
  background-color: white;
  color: #ff9700;
  border: none;
}
.breadcrumb {
  background: none;
  padding: 0;
  display: flex;
  align-items: center;
 
}
.breadcrumb-item+.breadcrumb-item::before{
  content:var(--bs-breadcrumb-divider, ">");
  color:#667085 !important;
  font-size: 14px;
  font-weight: 600;


}
.breadcrumb-item a,.breadcrumb .content-sub-title{
  color:#ff9700 !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.boost-avl{
      background-color: #ff9700;
    color: #fff;
    border-radius: 20px;
    font-weight: 600;
    border-color: #ff9700;
    border: none;
    font-weight: 600;
    padding: 8px 16px;
}
.boost-avl:hover{
 background-color: #fff;
    color: #ff9700;
    border: 1px solid #ff9700;
}
.expiry-badge{
  left: 6.5rem !important;
  background-color: green !important;
}


/* Default styles for the arrows (hidden on desktop) */
.scroll-btn-cat {
    position: absolute;
    top: 50%;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    transform: translateY(-50%);
    display: none;
}

.left-btn-cat {
    left: 0px;
}

.right-btn-cat {
    right: 0px;
}

/* Show arrows only on mobile */
@media (max-width: 720px) {
    .scroll-btn-cat {
        display: block;
    }
    .category-item{
      min-width: 100px;
    }
    .categories-list {
   margin-left: 40px !important;
   margin-right: 40px !important;
  }
  .list-inline{
    display: flex !important;
    flex-direction: column !important;
    
  }
  .ads-user-buttons{
    flex-direction: row !important;
    justify-content: space-around;
  }
  .ads-user-buttons .btn-phone,
  .ads-user-buttons .btn-whatsapp,
  .ads-user-buttons .btn-email{
   min-width: 0px;
  }
  .ads-user-buttons span{
    display: none;
  }
  .upload_profile{
    flex-direction: column !important;
    align-items: start !important
  }
}


/* Optional: Add some styles to the category list to make it scrollable */
.categories-list {
    display: flex;
    overflow-x: auto;
    padding-bottom: 10px; /* Ensure no content gets cut off */
    scroll-behavior: smooth; /* Smooth scrolling */
}


.search-paginate p{
  display: none;


}
.search-paginate ul {
  gap: 10px;
}

@media (max-width: 1290px) {
header .navbar-nav .btn {
  font-size: 13px;
}
header .navbar-nav .nav-link {
  font-size: 13px;
  margin: 0px 2px;
}
    header .navbar-brand {
        width: 135px;
    }
    .secondary-navbar .nav-svg {
    margin-left: 0px;
  }

}
@media (max-width: 990px){
.secondary-navbar{
    display: none;
  }
}
@media (min-width: 1536px){
	.hero{
	 height:30vh !important;
	}
.hero .videogame-icon {
    right: clamp(600px, 15%, 600px);
}
.hero .dragon-icon {
    left: clamp(650px, 26%, 600px);
}
}
@media (min-width: 1686px){
	.hero{
	 height:30vh !important;
	}
.hero .bus-icon {
    right: clamp(620px, 26%, 700px);
}
.hero .videogame-icon {
    right: clamp(700px, 15%, 600px);
}
.hero .star-icon4 {
    left: clamp(790px, 38%, 720px);
}
}
@media (max-width: 1280px){
.hero .cycle-icon1,.hero .bus-icon ,.hero .puppy-icon,.hero .star-icon4 {
	display:none !important;
}

}
@media (max-width: 700px){
.hero .dragon-icon ,.hero .tricycle-icon,.hero .watch-icon,.hero .star-icon5,.hero .globe-icon,.hero .laptop-icon,.hero .videogame-icon,.hero .teddy-icon{
	display:none !important;
}
.hero .flower-icon,.hero .watch-icon,.hero .laptop-icon{
height:50px;
}
.hero .bike-icon,.hero .camera-icon{
left:25%;
}
.hero .flower-icon{
right:10%;
}
.hero .sun-icon{
top:40%;
left:65%;
height:50px;
}
.hero .big-tv-icon{
height:50px;
top:75%;
}

}