@media(min-width:1100px)
{
  .hero
  {
    padding:6rem 0 2rem 0;
  }

  .services,
  .fleet,
  .app,
  .delivery,
  .driver,
  .safety,
  .blog,
  .contact,
  .about,
  .business,
  .tips
  {
    padding:10rem 0 2rem 0;
  }

}


















@media(max-width:1100px)
{
  nav,
  .header-right
  {
    display:none;
  }

  .hero
  {
    flex-direction:column;
    padding:60px 0;
  }

  .hero-left,
  .hero-right
  {
    width:100%;
  }

  .hero-right
  {
    justify-content:center;
  }

  .hero h1
  {
    font-size:58px;
  }

  .carousel-card
  {
    width:100%;
  }

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

  .for-driver-wrapper
  {
    grid-template-columns: 1fr;
  }

  .for-driver-content
  {
    position: relative;
    top: 0;
  }

  .bill
  {
    padding: 5rem 2rem;
  }

  .mobile .container
  {
    grid-template-columns:1fr;
    gap:80px;
  }

  .mobile-content
  {
    max-width:100%;
  }

  .mobile-visual
  {
    min-height:auto;
  }

  .driver-card-floating
  {
    right:0;
  }

  .phone-image-wrap
  {
    left:0;
  }

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

  .join-card
  {
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
  }

  .join-card:nth-child(2n)
  {
    border-right: none;
  }

  .join-card:nth-last-child(-n + 2)
  {
    border-bottom: none;
  }

  .tips-details-wrapper 
  {
    grid-template-columns: 380px 1fr;
    gap: 30px;
  }

  .tips-main-image 
  {
    height: 500px;
  }

  .tips-content-section h2 
  {
    font-size: 2.4rem;
  }

}













@media (max-width: 1024px)
{
  .business-section
  {
    padding: 3rem 1.5rem;
  }

  .business-grid
  {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .contact-content 
  {
    grid-template-columns: 1fr;
  }

  .contact-info 
  {
    order: 1;
  }

  .contact-form-wrap 
  {
    order: 2;
  }

  .benefits-section
  {
    padding: 3rem 1.5rem;
  }

  .benefits-grid
  {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .safety-section
  {
    padding: 3rem 1.5rem;
  }

  .safety-grid
  {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

}

















@media (max-width: 992px) 
{
  .stats-card 
  {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-item:nth-child(2n)::after 
  {
    display: none;
  }

  .stat-number
  {
    font-size: 2rem;
  }

  .rides-love-us-grid
  {
    grid-template-columns: repeat(2, 1fr);
  }

  .travel-tips-top
  {
    flex-direction: column;
    align-items: flex-start;
  }

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

  .what-we-move-grid
  {
    grid-template-columns: repeat(2, 1fr);
  }

  .safety-wrapper 
  {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .safety-visual 
  {
    order: 1;
  }

  .safety-visual .card 
  {
    height: 360px;
  }

  .download-card
  {
    min-height:340px;
    padding:50px 24px;
  }

  .download-card h2
  {
    font-size:58px;
    letter-spacing:-3px;
  }

  .download-card p
  {
    font-size:18px;
  }

  .bill
  {
    padding: 4rem 1.5rem;
  }

  .bill-content
  {
    margin-bottom: 2.5rem;
  }

  .bill-content h2
  {
    font-size: 2.2rem;
  }

  .bill-grid
  {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .logistics-banner 
  {
    padding: 40px;
  }

  .banner-text h2 
  {
    font-size: 2.5rem;
  }

  .logistics-image img 
  {
    height: 480px;
  }

  .delivery-content 
  {
    grid-template-columns: 1fr;
  }

  .delivery-hero 
  {
    grid-row: auto;
    min-height: 420px;
  }

  .fleet-card
  {
    grid-template-columns: 1fr;
  }

  .fleet-card.reverse .fleet-image
  {
    order: 1;
  }

  .fleet-card.reverse .fleet-details
  {
    order: 2;
  }

  .fleet-image
  {
    min-height: 320px;
  }

  .fleet-details
  {
    padding: 36px 28px;
  }

  .fleet-details h2
  {
    font-size:30px;
  }

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

  .tips-details-wrapper 
  {
    grid-template-columns: 1fr;
  }

  .tips-image-section 
  {
    position: static; 
  }

  .tips-main-image 
  {
    height: 400px;
  }

  .tips-content-section 
  {
    margin-top: 10px;
  }

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

  .featured-post 
  {
    grid-template-columns: 1fr;
  }

  .featured-image 
  {
    height: 350px;
  }

  .featured-content 
  {
    padding: 35px;
  }

  .featured-content h2 
  {
    font-size: 2.2rem;
  }

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

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

  .about-grid 
  {
    gap: 1.25rem;
  }

  .about-card 
  {
    padding: 2rem;
  }

  .about-card p 
  {
    font-size: 1rem;
  }

}















@media (max-width: 980px)
{
  .fleet-grid
  {
    grid-template-columns: 1fr;
    width:100%;
  }

  .fleet-grids 
  {
    grid-template-columns:1fr;
    width:100%;
    padding:10px 0 0 0;
  }

  .fleet-top
  {
    flex-direction: column;
    align-items: flex-start;
  }

  .fleet-heading h2
  {
    font-size: 3rem;
  }

  .fleet-heading p
  {
    font-size: 1.1rem;
  }

  .fleet-image
  {
    height: 340px;
  }

  .small-image
  {
    height: 260px;
  }
}





















@media (max-width: 768px)
{
  .drivers
  {
    padding: 50px 0;
  }

  .drivers-grid
  {
    grid-template-columns: 1fr;
  }

  .driver-image
  {
    height: 460px;
  }

  .drivers-header h2
  {
    font-size: 42px;
    line-height: 1;
    letter-spacing: -2px;
  }

  .drivers-header p
  {
    font-size: 17px;
  }

  .for-driver
  {
    padding: 5rem 0;
  }

  .for-driver-grid
  {
    grid-template-columns: 1fr;
  }

  .for-driver-content h2
  {
    font-size:49px;
    letter-spacing: -3px;
  }

  .driver-feature-card
  {
    min-height: auto;
  }

  .driver-feature-card h3
  {
    font-size: 18px;
  }

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

  .features 
  {
    gap:3px;
  }

  .feature 
  {
    font-size: 13px;
    flex: unset;
  }
  
  .hero 
  {
    gap: 40px;
    padding-top:100px;
    padding-bottom:10px;
    overflow: hidden;
  }

  .hero h1 
  {
    font-size: 42px;
    line-height: 1;
    letter-spacing: -2px;
  }

  .hero-right
  {
    padding:0 10px;
  }

  /* .carousel-card 
  {
    width: 100%;
    height: auto;
  } */

  .carousel-card
  {
    width: 100%;
    height: 320px;
  }

  .carousel-slides,
  .carousel-slide,
  .carousel-slide img
  {
    height: 100%;
  }

  .what-we-move,
  .for-driver,
  .rides-love-us,
  .faq
  {
    padding: 3rem 0;
  }

  .download-app
  {
    padding:10px 0;
  }

  .download-card
  {
    min-height:auto;
    padding:60px 20px;
    border-radius:var(--radius-2xl);
  }

  .download-card h2
  {
    font-size:44px;
    line-height:1.05;
    letter-spacing:-2px;
  }

  .download-card p
  {
    font-size:16px;
    line-height:1.6;
    margin-bottom:28px;
  }

  .store-download img
  {
    width:145px;
  }

  .quote 
  {
    padding: 4rem 0;
  }

  .quote-card 
  {
    padding: 3rem 2rem;
    border-radius: var(--radius-2xl);
  }

  .quote-card p 
  {
    margin-bottom: 2rem;
  }

  .bill
  {
    padding: 3rem;
  }

  .bill-content
  {
    margin-bottom: 2rem;
  }

  .bill-content h2
  {
    font-size: 1.9rem;
  }

  .bill-content p
  {
    font-size: 0.95rem;
    line-height: 1.7;
  }

  .bill-grid
  {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .bill-card
  {
    padding: 1.25rem;
  }

  .bill-icon
  {
    width: 42px;
    height: 42px;
    margin-bottom: 1rem;
  }

  .bill-icon i
  {
    font-size: 1rem;
  }

  .business-section
  {
    padding: 2.5rem 1rem;
  }

  .business-grid
  {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .business-card
  {
    padding: 1.25rem;
  }

  .business-icon
  {
    width: 42px;
    height: 42px;
    margin-bottom: 1rem;
  }

  .business-icon i
  {
    font-size: 1rem;
  }

  .business-card h3
  {
    font-size: 1rem;
  }

  .business-card p
  {
    font-size: 0.875rem;
    line-height: 1.6;
  }

   .business-wrapper
  {
    flex-direction:column;
    text-align:left;
    gap:0;
  }

  .business-header
  {
    max-width:100%;
  }

  .business-header h2
  {
    justify-content:left;
  }

  .business
  {
    padding-bottom:50px;
  }

  .mobile
  {
    grid-template-columns:1fr;
    padding:30px 20px 30px 20px;
    gap:60px;
  }

  .mobile-content
  {
    order:2;
  }

  .mobile-visual
  {
    order:1;
  }

  .mobile-content h2
  {
    font-size:50px;
    letter-spacing:-2px;
  }

  .mobile-text
  {
    font-size:17px;
  }

  .mobile-feature p
  {
    font-size:15px;
  }

  .phone-card
  {
    width:300px;
    height:610px;
  }

  .phone-content h3
  {
    font-size:34px;
  }

  .driver-card-floating
  {
    position:relative;
    top:auto;
    right:auto;
    width:100%;
    max-width:320px;
    margin-top:20px;
  }

  .mobile-visual
  {
    flex-direction:column;
  }

  .app-wrapper
  {
    flex-direction:column;
    text-align:left;
    gap:0;
  }

  .app-header
  {
    max-width:100%;
  }

  .app-header h2
  {
    justify-content:left;
  }

  .app-download
  {
    margin-top:0;
    justify-content:center;
  }

  .app-download img
  {
    max-width:320px;
  }

  .app-stores
  {
    margin-bottom:0;
  }

  .app
  {
    padding-bottom:50px;
  }

  .phone-image-wrap
  {
    display:none;
  }

  .store-btn
  {
    flex:1;
    min-width:0;
    padding:0 12px;
    font-size:14px;
  }

  .mobile-buttons
  {
    width:100%;
  }

  .contact-wrapper
  {
    flex-direction:column;
    text-align:left;
    gap:0;
  }

  .contact-header
  {
    max-width:100%;
  }

  .contact-header h2
  {
    justify-content:left;
  }

  .contact
  {
    padding-bottom:50px;
  }

  .logistics-banner 
  {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px;
    gap: 24px;
  }

  .banner-text h2 
  {
    font-size: 1.2rem;
  }

  .banner-text p 
  {
    font-size:0.86rem;
  }

  .banner-btn 
  {
    width: 100%;
    justify-content: center;
  }

  .logistics-image img 
  {
    height: 250px;
  }

  .delivery-content 
  {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .delivery-hero 
  {
    min-height: 350px;
  }

  .delivery-overlay 
  {
    left: 20px;
    right: 20px;
    bottom: 20px;
  }

  .delivery-overlay h2 
  {
    font-size: 1.4rem;
  }

  .delivery-card 
  {
    min-height: auto;
    padding: 24px;
  }

  .delivery-card h3 
  {
    font-size: 1.2rem;
  }

  .delivery-card p 
  {
    font-size:0.86rem;
  }

  .delivery-wrapper
  {
    flex-direction:column;
    text-align:left;
    gap:0;
  }

  .delivery-header
  {
    max-width:100%;
  }

  .delivery-header h2
  {
    justify-content:left;
  }

  .delivery
  {
    padding-bottom:50px;
  }

  .driver-apply-section
  {
    padding: 4rem 0;
  }

  .driver-apply-card
  {
    padding: 1.5rem;
    border-radius: var(--radius-2xl);
  }

  .driver-apply-grid
  {
    grid-template-columns: 1fr;
  }

  .driver-field input,
  .selected-option
  {
    height: 52px;
  }

  .driver-apply-btn
  {
    height: 54px;
  }

  .benefits-section
  {
    padding: 2.5rem 1rem;
  }

  .benefits-grid
  {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .benefits-card
  {
    padding: 1.25rem;
  }

  .benefits-icon
  {
    width: 42px;
    height: 42px;
    margin-bottom: 1rem;
  }

  .benefits-icon i
  {
    font-size: 1rem;
  }

  .benefits-card h3
  {
    font-size: 1rem;
  }

  .benefits-card p
  {
    font-size: 0.875rem;
    line-height: 1.6;
  }

  .drivers-wrapper
  {
    flex-direction:column;
    text-align:left;
    gap:0;
  }

  .drivers-header
  {
    max-width:100%;
  }

  .drivers-header h2
  {
    justify-content:left;
  }

  .drivers
  {
    padding-bottom:50px;
  }

  .fleets-wrapper
  {
    flex-direction:column;
    text-align:left;
    gap:0;
  }

  .fleets-header
  {
    max-width:100%;
  }

  .fleets-header h2
  {
    justify-content:left;
  }

  .fleets
  {
    padding-bottom:50px;
  }

  .sectionB
  {
    padding: 4rem 0;
  }

  .sectionB-content h2
  {
    font-size: 2.5rem;
  }

  .sectionB-content p
  {
    font-size: 1rem;
  }

  .safety-section
  {
    padding: 2.5rem 1rem;
  }

  .safety-grid
  {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .safety-card
  {
    padding: 1.25rem;
  }

  .safety-icon
  {
    width: 42px;
    height: 42px;
    margin-bottom: 1rem;
  }

  .safety-icon i
  {
    font-size: 1rem;
  }

  .safety-card h3
  {
    font-size: 1rem;
  }

  .safety-card p
  {
    font-size: 0.875rem;
    line-height: 1.6;
  }

  .safety-wrapper
  {
    flex-direction:column;
    text-align:left;
    gap:0;
  }

  .safety-header
  {
    max-width:100%;
  }

  .safety-header h2
  {
    justify-content:left;
  }

  .safety
  {
    padding-bottom:50px;
  }

  .services-content 
  {
    grid-template-columns: 1fr;
  }

  .service-image 
  {
    height: 220px;
  }

  .service-header h3 
  {
    font-size: 1.4rem;
  }

  .services-wrapper
  {
    flex-direction:column;
    text-align:left;
    gap:0;
  }

  .services-header
  {
    max-width:100%;
  }

  .services-header h2
  {
    justify-content:left;
  }

  .services
  {
    padding-bottom:50px;
  }

  .tips-details 
  {
    padding: 60px 0;
  }

  .tips-details-wrapper 
  {
    padding: 0 16px;
  }

  .tips-main-image 
  {
    min-height: 300px;
    border-radius: 24px;
  }

  .tips-content-section h2 
  {
    font-size: 2rem;
    margin-bottom: 24px;
  }

  .tips-cards 
  {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .tip-card 
  {
    padding: 20px;
  }

  .tip-card h3 
  {
    font-size: 1rem;
    line-height:1.7;
  }

  .tip-card p 
  {
    font-size: 14px;
  }

  .tips-wrapper
  {
    flex-direction:column;
    text-align:left;
    gap:0;
  }

  .tips-header
  {
    max-width:100%;
  }

  .tips-header h2
  {
    justify-content:left;
  }

  .tips
  {
    padding-bottom:50px;
  }

  .tips-tabs
  {
    overflow-x:auto;
    overflow-y:hidden;
    flex-wrap:wrap;
    padding-bottom:10px;
    scrollbar-width:none;
    -ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
  }

  .tips-tabs::-webkit-scrollbar
  {
    display:none;
  }

  .tips-tabs button
  {
    flex-shrink:0;
  }

  .blog-container 
  {
    padding: 60px 0;
  }

  /* Horizontal Scroll Categories */

  .blog-categories 
  {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 30px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  .blog-categories::-webkit-scrollbar 
  {
    display: none;
  }

  .blog-categories button 
  {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 8px 16px;
    font-size: 13px;
  }

  .featured-post 
  {
    grid-template-columns: 1fr;
  }

  .featured-image 
  {
    height: 240px;
  }

  .featured-content 
  {
    padding: 24px;
  }

  .featured-content h2 
  {
    font-size: 1.8rem;
  }

  .featured-meta 
  {
    gap: 8px;
    font-size: 13px;
  }

  .blog-grid 
  {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .card-image 
  {
    height: 220px;
  }

  .card-content 
  {
    padding: 20px;
  }

  .card-content h3 
  {
    font-size: 1.1rem;
    margin-top: 20px;
  }

  .blog-wrapper
  {
    flex-direction:column;
    text-align:left;
    gap:0;
  }

  .blog-header
  {
    max-width:100%;
  }

  .blog-header h2
  {
    justify-content:left;
  }

  .blog
  {
    padding-bottom:50px;
  }

  .features-container 
  {
    padding: 4rem 0;
  }

  .features-grid 
  {
    grid-template-columns: 1fr;
  }

  .feature-card 
  {
    padding: 1.75rem;
  }

  .feature-card h3 
  {
    font-size: 1.2rem;
  }

  .feature-card p 
  {
    font-size: 0.9rem;
  }

  .story-title 
  {
    margin-bottom: 3rem;
  }

  .timeline 
  {
    padding-left: 3rem;
  }

  .timeline-dot 
  {
    left: -3rem;
  }

  .timeline-content p 
  {
    font-size: 1rem;
  }

   .about-grid 
  {
    grid-template-columns: 1fr;
  }

  .about-card 
  {
    border-radius: var(--radius-2xl);
  }

  .about-icon i 
  {
    font-size: 1.75rem;
  }

  .about-card h3 
  {
    font-size: 1.875rem;
  }

  .about-wrapper
  {
    flex-direction:column;
    text-align:left;
    gap:0;
  }

  .about-header
  {
    max-width:100%;
  }

  .about-header h2
  {
    justify-content:left;
  }

  .about
  {
    padding-bottom:50px;
  }

}














@media (max-width: 640px) 
{

  .services,
  .fleet,
  .app,
  .delivery,
  .driver,
  .safety,
  .blog,
  .contact,
  .about,
  .business,
  .tips
  {
    padding-top:8rem;
  }
  
  .stats 
  {
    padding: 30px 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
  }

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

  .stats-wrapper 
  {
    overflow-x: auto;
  }

  .stats-wrapper::-webkit-scrollbar 
  {
    display: none;
  }

  .stats-card 
  {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    min-width: max-content;
  }

  .stats-card::before,
  .stats-card::after 
  {
    display: none;
  }

  .stat-item 
  {
    min-width: 170px;
    padding: 30px 15px;
    flex-shrink: 0;
    border-right: 1px solid var(--color-border);
  }

  .stat-item:last-child 
  {
    border-right: none;
  }

  .stat-item:not(:last-child)::after 
  {
    display: none;
  }

  .stat-number 
  {
    font-size: 1.4rem;
  }

  .stat-label 
  {
    font-size: 0.55rem;
    letter-spacing: 2px;
  }

  .fleet
  {
    padding: 70px 16px;
  }

  .fleet-content
  {
    flex-direction: column;
    align-items: flex-start;
  }

  .fleet-price
  {
    text-align: left;
  }

  .fleet-heading h2
  {
    font-size: 2.3rem;
    letter-spacing: -1px;
  }

  .fleet-image
  {
    height: 260px;
  }

  .hero-left
  {
    padding:0 20px;
  }

  .fleet
  {
    padding: 25px 20px;
  }
  
  .hero-content h1
  {
    font-size:50px;
  }

  .hero p,
  .fleet-heading-p,
  .for-driver-content p,
  .safety-header p,
  .cta,
  .travel-tips-link,
  .mobile-text,
  .fleets-header p,
  .fleet-heading p,
  .drivers-header p,
  .travel-tips-header p,
  .services-header p,
  .delivery-header p,
  .blog-header p,
  .contact-header p,
  .about-header p,
  .business-header p,
  .tips-header p
  {
    max-width:620px;
    font-size:16px;
  }

  .mobile-tag
  {
    font-size:10px;
  }

  .fleet-heading h2,
  .for-driver-content h2,
  .what-we-move-header h2,
  .rides-love-us-header h2,
  .safety-header h2,
  .faq-header h2,
  .mobile-content h2,
  .fleets-header h2,
  .drivers-header h2,
  .travel-tips-header h2,
  .services-header h2,
  .delivery-header h2,
  .blog-header h2,
  .contact-header h2,
  .about-header h2,
  .business-header h2,
  .tips-header h2
  {
    font-size:38px;
  }

  .menu-toggle 
  {
    display: block;
  }

  .rides-love-us-grid
  {
    grid-template-columns: 1fr;
  }

  .rides-love-us-card
  {
    border-radius: 22px;
    padding: 1.5rem;
  }

  .rides-love-us-footer h3
  {
    font-size:15px;
  }

  .rides-love-us-text
  {
    font-size: 14px;
  }

  .travel-tips
  {
    padding:3rem 0;
  }

  .travel-tips-header h2
  {
    font-size: 42px;
    letter-spacing: -2px;
  }

  .travel-tips-description
  {
    font-size: 16px;
  }

  .travel-tips-grid
  {
    grid-template-columns: 1fr;
  }

  .travel-tips-card
  {
    border-radius: 22px;
    padding: 1.5rem;
  }

  .travel-tips-card h3
  {
    font-size: 18px;
  }

  .travel-tips-card p
  {
    font-size: 16px;
  }

  .what-we-move-grid
  {
    grid-template-columns: 1fr;
  }

  .what-we-move-card
  {
    padding: 1.5rem;
    border-radius: 22px;
  }

  .what-we-move-card h3
  {
    font-size: 18px;
  }

  .what-we-move-card p
  {
    font-size: 15px;
  }

  .safety-feature
  {
    gap:2px;
  }

  .contact-content 
  {
    padding-block: 56px;
    gap: 24px;
  }

  .contact-form-wrap
  {
    padding: 24px;
  }

  .form-grid 
  {
    grid-template-columns: 1fr;
  }

  .info-card 
  {
    padding: 18px;
  }

  .info-card h3 
  {
    font-size: 1rem;
  }

  .submit-btn 
  {
    width: 100%;
  }

  .map-card 
  {
    min-height: 260px;
  }

  .join-section
  {
    padding: 4rem 0;
  }

  .join-header
  {
    margin-bottom: 1.5rem;
  }

  .join-grid
  {
    grid-template-columns: 1fr;
  }

  .join-card
  {
    min-height: auto;
    padding: 1.8rem;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }

  .join-card:last-child
  {
    border-top: 1px solid var(--color-border);
    border-bottom:none;
  }

  .join-number
  {
    margin-bottom: 0.86rem;
  }

  .join-card h3
  {
    font-size: 1rem;
  }

  .join-card p
  {
    max-width: 100%;
    font-size: .95rem;
  }

  .fleets-content
  {
    gap: 24px;
  }

  .fleet-image
  {
    min-height: 240px;
  }

  .fleet-details
  {
    padding: 24px 20px;
  }

  .fleet-details h2
  {
    font-size:25px;
  }

  .fleet-cars
  {
    font-size: 13px;
  }

  .fleet-bottom
  {
    flex-direction:row;
    align-items: flex-start;
    gap: 24px;
  }

  .fleet-bottom strong
  {
    font-size: 18px;
  }

  .fleet-tags
  {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .fleet-tags span
  {
    width: 100%;
    justify-content: center;
    text-align:left;
    font-size:10px;
  }

}





















@media (max-width: 576px) 
{  
  .features 
  {
    grid-template-columns: 1fr;
  }

  .center-icon 
  {
    width: 120px;
    height: 120px;
    font-size: 30px;
  }

  .safety-first 
  {
    padding: 70px 0;
  }

  .download-card h2
  {
    font-size:36px;
  }

  .download-buttons
  {
    gap:10px;
  }

  .store-download img
  {
    width:135px;
  }

  .quote 
  {
    padding: 3rem 0;
  }

  .quote-card 
  {
    padding: 2rem 1.25rem;
  }

  .quote-card h2 
  {
    font-size: 2rem;
    padding:0 -20px;
  }

  .quote-btn 
  {
    width: 100%;
    max-width: 280px;
  }

  .mobile-content h2
  {
    font-size:42px;
  }

  .store-btn
  {
    width:100%;
  }

  .phone-card
  {
    width:100%;
    max-width:310px;
  }

  .mobile-feature
  {
    align-items:flex-start;
  }

  .story-section 
  {
    padding: 3rem 0;
  }

  .story-title 
  {
    font-size: 1.5rem;
    margin-bottom: 2.5rem;
  }

  .timeline 
  {
    padding-left: 2.25rem;
  }

  .timeline::before 
  {
    left: 8px;
  }

  .timeline-dot 
  {
    left: -2.18rem;
    width: 10px;
    height: 10px;
  }

  .timeline-item 
  {
    padding-bottom: 3rem;
  }

  .timeline-content h3 
  {
    font-size: 1.1rem;
  }

  .timeline-content p 
  {
    font-size: 0.9rem;
  }

  .timeline-year 
  {
    letter-spacing: 0.18em;
  }
  
}











@media (max-width: 480px)
{
  .bill
  {
    padding: 2.5rem 0.75rem;
  }

  .bill-tag
  {
    font-size: 0.7rem;
    letter-spacing: 1.5px;
  }

  .bill-content h2
  {
    font-size: 1.8rem;
  }

  .bill-content p
  {
    font-size: 0.875rem;
  }

  .bill-card
  {
    padding: 1rem;
    border-radius: var(--radius-xl);
  }

  .bill-icon
  {
    width: 40px;
    height: 40px;
  }

  .bill-card h3
  {
    font-size: 0.95rem;
  }

  .bill-card p
  {
    font-size: 0.82rem;
    line-height: 1.6;
  }

  .business-section
  {
    padding: 2rem 0;
  }

  .business-grid
  {
    gap: 0.875rem;
  }

  .business-card
  {
    padding: 1rem;
    border-radius: var(--radius-xl);
  }

  .business-icon
  {
    width: 40px;
    height: 40px;
  }

  .business-card h3
  {
    font-size: 0.95rem;
  }

  .business-card p
  {
    font-size: 0.82rem;
  }

  .benefits-section
  {
    padding: 2rem 0;
  }

  .benefits-grid
  {
    gap: 0.875rem;
  }

  .benefits-card
  {
    padding: 1rem;
    border-radius: var(--radius-xl);
  }

  .benefits-icon
  {
    width: 40px;
    height: 40px;
  }

  .benefits-card h3
  {
    font-size: 0.95rem;
  }

  .benefits-card p
  {
    font-size: 0.82rem;
  }

  .safety-section
  {
    padding: 2rem 0;
  }

  .safety-grid
  {
    gap: 0.875rem;
  }

  .safety-card
  {
    padding: 1rem;
    border-radius: var(--radius-xl);
  }

  .safety-icon
  {
    width: 40px;
    height: 40px;
  }

  .safety-card h3
  {
    font-size: 0.95rem;
  }

  .safety-card p
  {
    font-size: 0.82rem;
  }

  .sectionB-content h2
  {
    font-size: 2rem;
  }

  .sectionB-content p
  {
    font-size: 0.95rem;
  }

  .tips-main-image 
  {
    min-height: 300px;
  }

  .tips-content-section h2 
  {
    font-size: 2rem;
  }

  .tip-card 
  {
    padding: 18px;
  }

  .tip-card i 
  {
    width: 42px;
    height: 42px;
    font-size: 18px;
  }

  .featured-image 
  {
    height: 220px;
  }

  .featured-content h2 
  {
    font-size: 1.5rem;
  }

  .card-image 
  {
    height: 200px;
  }

  .card-content h3 
  {
    font-size: 1.1rem;
  }

  .about-container 
  {
    padding: 3rem 0;
  }

  .about-card 
  {
    padding: 1.5rem;
  }

  .about-card h3 
  {
    font-size: 1.6rem;
  }

  .about-card p
  {
    font-size:0.9rem;
  }

}















@media (max-width: 375px) 
{

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

  .feature 
  {
    font-size: 10px;
    gap: 4px;
    flex: 1 1 200px;
    flex: unset;
  }

}