.city-section {
   padding: 5rem 0;
   text-align: center;
 }

 .city-section h2 {
   font-size: 50px;
   line-height: 55px;
   font-family: PolySans-Median;
   font-weight: 600;
   color: #112129;
   margin-bottom: 10px;
 }

 .city-section p {
   color: #4B5466;
   font-size: 18px;
   line-height: 22px;
   font-weight: 400;
   font-family: Inter-Regular;
   margin-bottom: 30px;
 }

 .cities-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
   gap: 15px;
   justify-items: center;
   max-width: 1200px;
   margin: auto;
 }

 .city-card {
   width: 150px;
   height: fit-content;
   text-align: center;
 }

 .city-card img {
   width: 100%;
   height: 208px;
   object-fit: cover;
   border-radius: 100px;
 }

 .city-card p {
   margin-top: 10px;
   font-family: Inter-Semibold;
   color: #112129;
   font-size: 16px;
   line-height: 22px;
   font-weight: 500;
 }

 .carousel {
   display: none;
 }


 /* Mobile-specific carousel */
 @media (max-width: 768px) {
   .cities-grid {
     display: none;
   }

   .city-section {
     width: 90%;
     margin-left: auto;
     margin-right: auto;
     padding: 30px 0;
   }

   .city-section h2 {
     font-size: 1.8rem;
   }

   .city-section p {
     /* width: 74%; */
     margin: 10px auto;
     font-size: 0.8rem;
   }

   .carousel {
     display: flex;
     overflow-x: auto;
     gap: 12px;
     padding: 1px 20px;
     scroll-snap-type: x mandatory;
   }


   .carousel::-webkit-scrollbar {
     display: none;
   }

   .carousel .city-card {
     flex: 0 0 auto;
     scroll-snap-align: start;
     width: 112px;
   }

   .city-card img {
     height: 157px;
   }

   .city-card p {
     font-size: 13px;
   }

   .carousel.second {
     display: flex;
     padding-left: 40px;
     margin: 0;
     /* Offset the second row */
   }

   /* .carousel.first{
        margin-left: 40px;
      } */


 }