/* ============================================
   Mobile Responsive Styles
   Mobile-first approach for better UX
   ============================================ */

/* ============================================
   Header Styles
   ============================================ */
@media screen and (max-width: 1024px) {
  header .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  header .w-\[350px\] {
    width: 200px;
  }
  
  header .h-\[100px\] {
    height: 60px;
  }
}

/* ============================================
   Index Page - Hero Carousel Enhanced
   ============================================ */
@media screen and (max-width: 768px) {
  #hero-carousel {
    height: 100vh !important;
    min-height: 500px;
    max-height: 700px;
  }
  
  #hero-carousel .absolute.bottom-10.left-1\/2 {
    bottom: 80px !important;
  }
  
  #hero-carousel .absolute.bottom-10.left-1\/2 span {
    font-size: 12px;
  }
  
  #hero-carousel .absolute.bottom-10.left-1\/2 .w-6.h-10 {
    width: 20px;
    height: 32px;
  }
  
  #hero-carousel .absolute.bottom-4.left-1\/2 {
    bottom: 20px !important;
  }
  
  #hero-carousel .absolute.bottom-4.left-1\/2 button {
    width: 6px !important;
    height: 6px !important;
    min-width: 6px;
  }
  
  #hero-carousel .absolute.bottom-4.left-1\/2 button.bg-white {
    width: 20px !important;
  }
}

@media screen and (max-width: 768px) {
  header {
    padding: 0.5rem 0;
  }
  
  header .container {
    padding: 0.5rem 1rem;
  }
  
  header .w-\[350px\],
  header .w-\[200px\] {
    width: 160px;
  }
  
  header .h-\[100px\],
  header .h-\[60px\] {
    height: 50px;
  }
  
  #mobile-menu-button {
    padding: 0.5rem;
  }
  
  #mobile-menu-button i {
    font-size: 1.5rem;
  }
  
  #mobile-menu {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    z-index: 45;
    overflow-y: auto;
    padding: 1rem;
    max-height: calc(100vh - 70px);
  }
  
  #mobile-menu.hidden {
    display: none;
  }
  
  #mobile-menu a,
  #mobile-menu button {
    padding: 1rem;
    font-size: 1rem;
    border-bottom: 1px solid #e5e7eb;
  }
  
  #mobile-menu .mobile-nav-toggle {
    padding: 1rem;
    font-size: 1rem;
    border-bottom: 1px solid #e5e7eb;
  }
  
  #mobile-menu .mobile-subnav {
    background: #f9fafb;
  }
  
  #mobile-menu .mobile-subnav a {
    padding-left: 2rem;
    font-size: 0.9rem;
  }
  
  .search-container {
    display: none;
  }
  
  .flex.items-center.ml-4:has(.fa-phone) {
    display: none;
  }
  
  .mega-menu-container {
    display: none;
  }
}

@media screen and (max-width: 480px) {
  header .w-\[350px\],
  header .w-\[200px\],
  header .w-\[160px\] {
    width: 130px;
  }
  
  header .h-\[100px\],
  header .h-\[60px\],
  header .h-\[50px\] {
    height: 40px;
  }
}

/* ============================================
   Inner Page Banner
   ============================================ */
@media screen and (max-width: 1024px) {
  section.relative.w-full[style*="height: 460px"] {
    height: 350px !important;
    margin-top: 80px !important;
  }
}

@media screen and (max-width: 768px) {
  section.relative.w-full[style*="height: 460px"],
  section.relative.w-full[style*="height: 350px"] {
    height: 250px !important;
    margin-top: 70px !important;
  }
  
  #inner-prev-slide,
  #inner-next-slide {
    padding: 0.5rem;
  }
  
  #inner-prev-slide i,
  #inner-next-slide i {
    font-size: 0.875rem;
  }
}

@media screen and (max-width: 480px) {
  section.relative.w-full[style*="height: 460px"],
  section.relative.w-full[style*="height: 350px"],
  section.relative.w-full[style*="height: 250px"] {
    height: 200px !important;
    margin-top: 60px !important;
  }
}

/* ============================================
   Footer Styles
   ============================================ */
@media screen and (max-width: 768px) {
  footer .container {
    padding: 2rem 1rem;
  }
  
  footer .grid {
    gap: 2rem;
  }
  
  footer h3 {
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
  }
  
  footer p,
  footer li,
  footer span {
    font-size: 0.875rem;
  }
  
  footer .border-t {
    padding: 1rem;
  }
}

@media screen and (max-width: 480px) {
  footer .grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ============================================
   Index Page - Hero Carousel
   ============================================ */
@media screen and (max-width: 1024px) {
  #hero-carousel {
    height: 80vh !important;
    min-height: 500px;
  }
  
  #prev-slide,
  #next-slide {
    padding: 0.5rem;
  }
  
  #prev-slide i,
  #next-slide i {
    font-size: 1rem;
  }
}

@media screen and (max-width: 768px) {
  #hero-carousel {
    height: 60vh !important;
    min-height: 400px;
  }
  
  #prev-slide,
  #next-slide {
    display: none;
  }
  
  .absolute.bottom-10.left-1\/2 {
    display: none;
  }
  
  .absolute.bottom-4.left-1\/2 button {
    width: 8px;
    height: 8px;
  }
}

@media screen and (max-width: 480px) {
  #hero-carousel {
    height: 50vh !important;
    min-height: 300px;
  }
}

/* ============================================
   Index Page - Company Introduction
   ============================================ */
@media screen and (max-width: 1024px) {
  .company-content {
    padding-bottom: 2rem;
  }
  
  .company-title {
    font-size: 2.5rem !important;
  }
  
  .company-description {
    font-size: 1.125rem !important;
  }
  
  .company-image {
    position: relative !important;
    height: 400px !important;
    width: 100% !important;
    margin-top: 2rem;
  }
  
  .company-cards-wrapper {
    position: relative !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    margin-top: 2rem;
  }
  
  .company-card-container {
    aspect-ratio: auto;
    min-height: 180px;
  }
  
  .company-card i {
    font-size: 3rem !important;
  }
  
  .company-card p:first-of-type {
    font-size: 0.875rem !important;
  }
  
  .company-card p:last-of-type {
    font-size: 2rem !important;
  }
}

@media screen and (max-width: 768px) {
  .py-60 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  
  .company-title {
    font-size: 2rem !important;
  }
  
  .company-description {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }
  
  .company-image {
    height: 300px !important;
  }
  
  .company-card-container {
    min-height: 150px;
  }
  
  .company-card {
    padding: 1rem !important;
  }
  
  .company-card i {
    font-size: 2.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .company-card p:first-of-type {
    font-size: 0.75rem !important;
  }
  
  .company-card p:last-of-type {
    font-size: 1.5rem !important;
  }
}

@media screen and (max-width: 480px) {
  .company-title {
    font-size: 1.5rem !important;
  }
  
  .company-image {
    height: 200px !important;
  }
  
  .company-card-container {
    min-height: 120px;
  }
  
  .company-card i {
    font-size: 2rem !important;
  }
  
  .company-card p:last-of-type {
    font-size: 1.25rem !important;
  }
}

/* ============================================
   Index Page - Services Accordion
   ============================================ */
@media screen and (max-width: 1024px) {
  #services-accordion {
    flex-direction: column;
    height: auto !important;
    min-height: 900px;
  }
  
  #services-accordion .relative.w-full.h-\[900px\],
  .relative.w-full.h-\[900px\]:has(#services-accordion) {
    height: 550px !important;
    min-height: 550px !important;
  }
  
  .service-item {
    width: 100% !important;
    height: 150px !important;
    flex-shrink: 0;
  }
  
  .service-item:hover {
    width: 100% !important;
  }
  
  .service-icon {
    font-size: 2rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .service-title {
    font-size: 1.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .service-description {
    font-size: 0.875rem !important;
    margin-bottom: 0.5rem !important;
  }
}

@media screen and (max-width: 768px) {
  .relative.w-full.h-\[900px\]:has(#services-accordion) {
    height: 550px !important;
    min-height: 550px !important;
  }
  
  .service-item {
    height: 120px !important;
  }
  
  .service-icon {
    font-size: 1.5rem !important;
    margin-bottom: 0.25rem !important;
  }
  
  .service-title {
    font-size: 1.25rem !important;
  }
  
  .service-description {
    display: none;
  }
  
  .service-content {
    padding: 1rem !important;
  }
}

/* ============================================
   Index Page - News Section
   ============================================ */
@media screen and (max-width: 1024px) {
  #news-section .flex {
    flex-direction: column;
  }
  
  #news-section .w-full.md\:w-1\/2 {
    width: 100% !important;
  }
  
  #news-section .news-featured-container {
    height: 250px !important;
    min-height: auto !important;
  }
  
  .w-full.h-80 {
    height: 80px !important;
  }
}

@media screen and (max-width: 768px) {
  #news-section {
    padding-top: 3rem;
  }
  
  #news-section .news-featured-container {
    height: 200px !important;
  }
  
  .news-item .w-full.md\:w-1\/4 {
    width: 120px !important;
    min-width: 120px;
    height: 90px !important;
    margin-bottom: 0 !important;
    margin-right: 0.75rem !important;
  }
  
  .news-item {
    padding: 0.5rem !important;
  }
  
  .news-item .p-2.md\:p-4 {
    padding: 0.5rem !important;
    flex-direction: row !important;
    align-items: flex-start;
  }
  
  .news-item h3 {
    font-size: 0.9rem !important;
    white-space: normal !important;
    line-height: 1.3 !important;
    margin-bottom: 0.25rem !important;
  }
  
  .news-item p {
    font-size: 0.75rem !important;
  }
  
  #news-section .p-4.md\:p-8 {
    padding: 0.75rem !important;
  }
  
  .news-summary {
    display: block !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }
  
  .news-item a {
    margin-top: 0.25rem !important;
    font-size: 0.75rem !important;
  }
}

/* ============================================
   Index Page - Banner CTA
   ============================================ */
@media screen and (max-width: 1024px) {
  .home .banner {
    height: auto !important;
    min-height: 600px;
    padding: 3rem 0;
  }
  
  .home .banner .bg {
    display: none;
  }
  
  .bg-\[\#1f2d5c\]\/70 {
    padding: 1.5rem !important;
  }
  
  #cta-title {
    font-size: 1.5rem !important;
    margin-bottom: 1rem !important;
  }
  
  #cta-description {
    font-size: 1rem !important;
    margin-bottom: 1rem !important;
  }
  
  .flex.flex-wrap.justify-center.mt-8 {
    margin-top: 1rem !important;
  }
  
  .w-1\/3.md\:w-1\/6 {
    width: 33.333% !important;
    padding: 0.25rem !important;
  }
  
  .w-1\/3.md\:w-1\/6 .bg-\[\#1f2d5c\]\/70 {
    padding: 0.75rem !important;
  }
  
  .w-1\/3.md\:w-1\/6 i {
    font-size: 2rem !important;
    margin-bottom: 0.25rem !important;
  }
  
  .w-1\/3.md\:w-1\/6 p {
    font-size: 0.75rem !important;
  }
}

@media screen and (max-width: 768px) {
  .home .banner {
    min-height: 500px;
  }
  
  #cta-title {
    font-size: 1.25rem !important;
  }
  
  .flex.items-center.gap-4.text-2xl {
    font-size: 1rem !important;
    flex-direction: column;
    gap: 0.5rem !important;
  }
  
  .flex.items-center.gap-4 i {
    font-size: 1.25rem !important;
  }
  
  .w-1\/3.md\:w-1\/6 i {
    font-size: 1.5rem !important;
  }
  
  .w-1\/3.md\:w-1\/6 p {
    font-size: 0.625rem !important;
  }
}

/* ============================================
   Index Page - Video Center
   ============================================ */
@media screen and (max-width: 1024px) {
  .video-main-title {
    font-size: 2rem !important;
    margin-bottom: 2rem !important;
  }
  
  .video-category-row {
    margin: 1rem !important;
  }
  
  .category-name-box {
    padding: 0.75rem 1rem !important;
  }
  
  .category-name {
    font-size: 1rem !important;
  }
  
  .category-desc-box {
    padding: 0.75rem 1rem !important;
  }
  
  .video-list-container {
    min-height: 400px !important;
  }
  
  .video-cover-main,
  .video-cover-placeholder {
    min-height: 300px !important;
  }
  
  .video-grid-item {
    min-height: 150px !important;
  }
  
  .video-grid-empty,
  .video-grid-empty-double,
  .video-cover-empty,
  .video-grid-empty-full {
    min-height: 150px !important;
    font-size: 0.875rem !important;
  }
}

@media screen and (max-width: 768px) {
  .video-main-title {
    font-size: 1.5rem !important;
  }
  
  .video-category-row {
    margin: 0.5rem !important;
  }
  
  .category-info-item {
    flex-direction: column !important;
  }
  
  .category-name-box {
    justify-content: flex-start !important;
    width: 100%;
  }
  
  .category-desc-box {
    width: 100%;
    border-top: none !important;
  }
  
  .video-list-wrapper {
    grid-template-columns: 1fr !important;
  }
  
  .video-cover-main,
  .video-cover-placeholder {
    min-height: 200px !important;
  }
  
  .video-play-overlay i {
    font-size: 3rem !important;
  }
  
  .video-name {
    font-size: 0.875rem !important;
    padding: 30px 15px 15px !important;
  }
  
  .video-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  
  .video-grid-item {
    min-height: 120px !important;
  }
  
  .video-name-small {
    font-size: 0.75rem !important;
    padding: 20px 10px 10px !important;
  }
  
  .nav-dot {
    width: 12px;
    height: 12px;
  }
  
  .nav-dots {
    gap: 15px;
  }
}

/* ============================================
   Index Page - Booking Form
   ============================================ */
@media screen and (max-width: 1024px) {
  #booking-section {
    min-height: auto !important;
    padding: 3rem 0;
  }
  
  #car-image {
    display: none;
  }
  
  #booking-section .max-w-3xl {
    padding: 0 1rem;
  }
  
  #booking-section h2 {
    font-size: 2rem !important;
  }
  
  #booking-section .text-3xl {
    font-size: 1.25rem !important;
  }
}

@media screen and (max-width: 768px) {
  #booking-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  #booking-section .max-w-3xl {
    max-width: 100% !important;
    padding: 0 !important;
  }
  
  #booking-section h2 {
    font-size: 1.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  #booking-section .text-3xl {
    font-size: 1rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  #booking-form {
    padding: 0.75rem !important;
    border-radius: 0 !important;
  }
  
  #booking-form label {
    font-size: 0.875rem;
    margin-bottom: 0.125rem;
  }
  
  #booking-form input,
  #booking-form select,
  #booking-form textarea {
    font-size: 0.875rem;
    padding: 0.375rem 0.5rem;
  }
  
  #booking-form button {
    padding: 0.5rem !important;
    font-size: 0.875rem;
  }
  
  #booking-form .grid {
    gap: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  #booking-form .mb-4 {
    margin-bottom: 0.5rem !important;
  }
  
  #booking-form .mb-12 {
    margin-bottom: 0.75rem !important;
  }
}

/* ============================================
   About Page
   ============================================ */
@media screen and (max-width: 1024px) {
  .about-page .flex-nowrap {
    flex-wrap: wrap;
  }
  
  .about-page .flex-1 {
    flex: 1 1 calc(50% - 0.5rem);
    min-width: calc(50% - 0.5rem);
    margin-bottom: 0.5rem;
  }
  
  .about-page .flex-1:nth-child(odd) {
    margin-right: 0.5rem;
  }
}

@media screen and (max-width: 768px) {
  .about-page .py-16,
  .bg-gray-50 .py-16 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  
  .about-page .text-4xl,
  .bg-gray-50 .text-4xl {
    font-size: 1.5rem !important;
  }
  
  .about-page .flex-nowrap {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  
  .about-page .flex-1 {
    flex: 0 0 80%;
    min-width: 80%;
    scroll-snap-align: center;
    margin-right: 0.5rem;
    margin-bottom: 0;
  }
  
  .about-page .flex-1:last-child {
    margin-right: 0;
  }
  
  .about-page .p-6 {
    padding: 1rem !important;
  }
  
  .about-page .fa-4xl {
    font-size: 2rem !important;
  }
  
  .about-page .text-2xl {
    font-size: 1.125rem !important;
  }
  
  .about-page .text-base {
    font-size: 0.75rem !important;
  }
  
  .about-page .prose p,
  .about-page .prose li {
    font-size: 1rem !important;
  }
  
  .about-page .content-section img {
    max-width: 100%;
    height: auto;
  }
  
  .about-page .mb-6.flex {
    flex-direction: column;
    align-items: flex-start !important;
  }
  
  .about-page .mb-6.flex .flex {
    margin-top: 0.5rem;
  }
}

/* ============================================
   Services Page
   ============================================ */
@media screen and (max-width: 1024px) {
  .services-page .flex-nowrap,
  section.py-16 .flex-nowrap {
    flex-wrap: wrap;
  }
  
  .services-page .flex-1,
  section.py-16 .flex-1 {
    flex: 1 1 calc(50% - 0.5rem);
    min-width: calc(50% - 0.5rem);
    margin-bottom: 0.5rem;
  }
}

@media screen and (max-width: 768px) {
  section.py-16.bg-gray-50 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  
  section.py-16 .text-3xl,
  section.py-16 .text-4xl {
    font-size: 1.5rem !important;
  }
  
  section.py-16 .text-lg {
    font-size: 0.875rem !important;
  }
  
  section.py-16 .flex-nowrap {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  
  section.py-16 .flex-1 {
    flex: 0 0 70%;
    min-width: 70%;
    scroll-snap-align: center;
    margin-right: 0.5rem;
    margin-bottom: 0;
  }
  
  section.py-16 .p-6 {
    padding: 1rem !important;
  }
  
  section.py-16 .fa-4xl {
    font-size: 2rem !important;
  }
  
  section.py-16 .text-2xl {
    font-size: 1rem !important;
  }
  
  .services-page .flex-nowrap {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 0.5rem;
  }
  
  .services-page .service-card {
    flex: 0 0 40%;
    min-width: 40%;
    scroll-snap-align: center;
    margin-right: 0;
    margin-bottom: 0;
  }
  
  .services-page .p-3 {
    padding: 0.75rem !important;
  }
  
  .services-page .fa-2xl,
  .services-page .text-2xl {
    font-size: 1.5rem !important;
  }
  
  .services-page .text-base {
    font-size: 0.875rem !important;
  }
  
  .services-page .prose p,
  .services-page .prose li {
    font-size: 1rem !important;
  }
}

/* ============================================
   Products Page
   ============================================ */
@media screen and (max-width: 1024px) {
  .products-page .flex-nowrap {
    flex-wrap: wrap;
  }
  
  .products-page .flex-1 {
    flex: 1 1 calc(25% - 0.5rem);
    min-width: calc(25% - 0.5rem);
    margin-bottom: 0.5rem;
  }
}

@media screen and (max-width: 768px) {
  .products-page .flex-nowrap {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  
  .products-page .flex-1 {
    flex: 0 0 40%;
    min-width: 40%;
    scroll-snap-align: center;
    margin-right: 0.5rem;
    margin-bottom: 0;
  }
  
  .products-page .p-6 {
    padding: 0.75rem !important;
  }
  
  .products-page .fa-3xl {
    font-size: 1.5rem !important;
  }
  
  .products-page .text-lg {
    font-size: 0.875rem !important;
  }
  
  .products-page .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .products-page .h-48 {
    height: 120px !important;
  }
  
  .products-page .p-4 {
    padding: 0.5rem !important;
  }
  
  .products-page .text-2xl {
    font-size: 1rem !important;
  }
  
  .products-page .text-base {
    font-size: 0.75rem !important;
  }
  
  .products-page .text-xl {
    font-size: 0.875rem !important;
  }
  
  .products-page .prose p,
  .products-page .prose li {
    font-size: 1rem !important;
  }
  
  .products-page .text-6xl {
    font-size: 2rem !important;
  }
  
  .products-page .h-80 {
    height: 200px !important;
  }
  
  .products-page .w-16.h-16 {
    width: 48px !important;
    height: 48px !important;
  }
  
  #inquiry-modal .max-w-md {
    max-width: 95% !important;
    margin: 0 auto;
  }
  
  #inquiry-modal .p-6 {
    padding: 1rem !important;
  }
  
  #inquiry-modal .text-2xl {
    font-size: 1.25rem !important;
  }
}

@media screen and (max-width: 480px) {
  .products-page .flex-1 {
    flex: 0 0 50%;
    min-width: 50%;
  }
  
  .products-page .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================
   Locations Page
   ============================================ */
@media screen and (max-width: 1024px) {
  .locations-page .flex.flex-col.lg\:flex-row {
    flex-direction: column !important;
  }
  
  .locations-page .lg\:w-1\/2 {
    width: 100% !important;
  }
  
  .locations-page .border-l-0 {
    border-left: 1px solid #e5e7eb !important;
    border-top: 0;
  }
  
  .locations-page #map-container {
    height: 400px !important;
  }
}

@media screen and (max-width: 768px) {
  .locations-page .py-16 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  
  .locations-page .text-3xl,
  .locations-page .text-4xl {
    font-size: 1.5rem !important;
  }
  
  .locations-page .text-lg {
    font-size: 0.875rem !important;
  }
  
  .locations-page #map-container {
    height: 300px !important;
  }
  
  .locations-page .tab-btn {
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
    white-space: nowrap;
  }
  
  .locations-page .max-h-\[500px\] {
    max-height: 400px !important;
  }
  
  .locations-page .p-6 {
    padding: 1rem !important;
  }
  
  .locations-page .text-xl {
    font-size: 1rem !important;
  }
  
  .locations-page .space-y-3 {
    font-size: 0.875rem !important;
  }
  
  .locations-page .border-b {
    padding-bottom: 1rem !important;
  }
}

/* ============================================
   CTA Section (Common)
   ============================================ */
@media screen and (max-width: 768px) {
  section.py-16.bg-blue-600 {
    padding: 2rem 1rem;
  }
  
  section.py-16.bg-blue-600 .text-3xl,
  section.py-16.bg-blue-600 .text-4xl {
    font-size: 1.25rem !important;
  }
  
  section.py-16.bg-blue-600 .text-xl {
    font-size: 0.875rem !important;
    margin-bottom: 1rem !important;
  }
  
  section.py-16.bg-blue-600 .px-8 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  section.py-16.bg-blue-600 .py-4 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
  
  section.py-16.bg-blue-600 .text-lg {
    font-size: 0.875rem !important;
  }
}

/* ============================================
   Modal & Toast
   ============================================ */
@media screen and (max-width: 768px) {
  #search-modal .max-w-2xl {
    max-width: 95% !important;
    margin: 0 0.5rem;
  }
  
  #search-modal .p-4 {
    padding: 0.75rem !important;
  }
  
  #search-modal .text-lg {
    font-size: 1rem !important;
  }
  
  #copy-toast {
    top: auto;
    bottom: 1rem;
    right: 1rem;
    left: 1rem;
    text-align: center;
  }
  
  #wechat-modal .max-w-md {
    max-width: 95% !important;
  }
  
  #wechat-modal .p-6 {
    padding: 1rem !important;
  }
  
  #wechat-modal .w-48.h-48 {
    width: 150px !important;
    height: 150px !important;
  }
}

/* ============================================
   Utility Classes
   ============================================ */
@media screen and (max-width: 768px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .prose img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  .prose p,
  .prose li {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }
  
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
  }
  
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

/* ============================================
   Touch Device Optimizations
   ============================================ */
@media (hover: none) and (pointer: coarse) {
  .hover\:bg-gray-50:hover,
  .hover\:bg-gray-100:hover,
  .hover\:bg-blue-700:hover,
  .hover\:transform:hover,
  .hover\:scale-105:hover,
  .hover\:scale-110:hover {
    background-color: inherit;
    transform: none;
  }
  
  a:active,
  button:active {
    opacity: 0.8;
  }
  
  .service-item {
    cursor: pointer;
  }
}

/* ============================================
   Safe Area for iOS
   ============================================ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  footer {
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
  }
  
  #mobile-menu {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }
}

/* ============================================
   Index Page - Enhanced Mobile Styles
   ============================================ */

/* 品牌服务板块优化 */
@media screen and (max-width: 768px) {
  .brand-service-card {
    padding: 40px 16px !important;
    margin: 8px 4px !important;
  }
  
  .brand-service-icon i {
    font-size: 40px !important;
  }
  
  .brand-service-title {
    font-size: 18px !important;
    margin-bottom: 12px !important;
  }
  
  .brand-service-desc {
    font-size: 14px !important;
    margin-bottom: 16px !important;
  }
  
  .brand-service-link {
    font-size: 12px !important;
  }
}

/* 产品展示板块优化 */
@media screen and (max-width: 768px) {
  #products-section .text-3xl,
  #products-section .text-4xl {
    font-size: 1.5rem !important;
  }
  
  #products-section .text-xl,
  #products-section .text-2xl {
    font-size: 1rem !important;
  }
  
  #product-featured-display {
    flex-direction: column !important;
  }
  
  #product-featured-display .w-full.md\:w-2\/5,
  #product-featured-display .w-full.md\:w-3\/5 {
    width: 100% !important;
  }
  
  #featured-product-name {
    font-size: 1.25rem !important;
  }
  
  #featured-product-desc {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
  }
  
  #product-featured-display .h-\[360px\],
  #product-featured-display .h-\[480px\] {
    height: 200px !important;
  }
  
  #products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  
  .product-card {
    padding: 12px 8px !important;
    height: auto !important;
    min-height: 120px;
  }
  
  .product-card-icon img {
    width: 40px !important;
    height: 40px !important;
  }
  
  .product-card-name {
    font-size: 12px !important;
  }
  
  .product-card-date,
  .product-card-category {
    font-size: 10px !important;
  }
}

@media screen and (max-width: 480px) {
  #products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .product-card {
    min-height: 100px;
  }
}

/* 公司简介板块深度优化 */
@media screen and (max-width: 768px) {
  .company-content {
    padding-bottom: 1rem !important;
  }
  
  .company-content .grid {
    gap: 1rem !important;
  }
  
  .company-image {
    display: none !important;
  }
  
  .company-cards-wrapper {
    position: relative !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    margin-top: 1rem !important;
  }
  
  .company-cards-wrapper .grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
  }
  
  .company-card-container {
    min-height: 60px !important;
  }
  
  .company-card {
    padding: 6px 4px !important;
  }
  
  .company-card i {
    font-size: 1.25rem !important;
    margin-bottom: 4px !important;
  }
  
  .company-card p:first-of-type {
    font-size: 10px !important;
    margin-bottom: 2px !important;
  }
  
  .company-card p.text-3xl {
    font-size: 1rem !important;
  }
}

@media screen and (max-width: 480px) {
  .company-cards-wrapper .grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .company-card-container {
    min-height: 100px !important;
  }
  
  .company-card {
    padding: 10px 6px !important;
  }
  
  .company-card i {
    font-size: 2rem !important;
    margin-bottom: 6px !important;
  }
  
  .company-card p:first-of-type {
    font-size: 18px !important;
    margin-bottom: 4px !important;
  }
  
  .company-card p.text-3xl {
    font-size: 1.75rem !important;
  }
}

/* 服务项目手风琴深度优化 */
@media screen and (max-width: 768px) {
  .relative.w-full.h-\[850px\],
  .relative.w-full.overflow-hidden:has(#services-accordion) {
    height: 550px !important;
    min-height: auto !important;
  }
  
  #services-accordion {
    flex-direction: column;
    height: auto !important;
  }
  
  .service-item {
    width: 100% !important;
    height: 100px !important;
    flex-shrink: 0;
    position: relative;
  }
  
  .service-item img {
    object-position: center center;
  }
  
  .service-content {
    padding: 1rem !important;
    justify-content: center !important;
    align-items: center !important;
  }
  
  .service-icon {
    font-size: 1.5rem !important;
    margin-bottom: 0.25rem !important;
  }
  
  .service-title {
    font-size: 1rem !important;
    margin-bottom: 0 !important;
    writing-mode: horizontal-tb !important;
  }
  
  .service-description {
    display: none !important;
  }
  
  .mask-overlay {
    background-color: rgba(0, 0, 0, 0.6) !important;
  }
}

/* 新闻资讯板块深度优化 */
@media screen and (max-width: 768px) {
  #news-section .flex.flex-col.md\:flex-row {
    flex-direction: column !important;
  }
  
  #news-section .hidden.md\:block {
    display: none !important;
  }
  
  .news-item {
    padding: 0.5rem !important;
    border-bottom: 1px solid #f0f0f0;
  }
  
  .news-item .block.flex {
    flex-direction: column !important;
    align-items: flex-start;
    padding: 0.5rem !important;
  }
  
  .news-item .w-full.md\:w-1\/4 {
    width: 100% !important;
    height: auto !important;
    margin-right: 0 !important;
    margin-bottom: 12px !important;
  }
  
  .news-item .w-full.md\:w-1\/4 img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
    aspect-ratio: 16 / 9;
  }
  
  .news-item .w-full.md\:w-3\/4 {
    width: 100% !important;
    flex: none;
  }
  
  .news-item h3 {
    font-size: 14px !important;
    line-height: 1.4 !important;
    margin-bottom: 4px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }
  
  .news-item .news-summary {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12px !important;
    opacity: 1 !important;
    max-height: none !important;
    transform: none !important;
    margin-bottom: 4px !important;
  }
  
  .news-item a[href*="about.php"] {
    font-size: 12px !important;
    margin-top: 4px !important;
  }
}

/* 视频中心深度优化 */
@media screen and (max-width: 768px) {
  #video-section {
    padding: 2rem 0 !important;
  }
  
  .video-center-wrapper {
    padding: 0 0.5rem;
  }
  
  .video-main-title {
    font-size: 1.25rem !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 1.5rem !important;
  }
  
  .video-category-row {
    margin: 0.5rem 0 !important;
    min-height: auto !important;
  }
  
  .category-info-item {
    flex-direction: column !important;
  }
  
  .category-name-box {
    padding: 10px 16px !important;
    width: 100% !important;
  }
  
  .category-name {
    font-size: 14px !important;
  }
  
  .category-desc-box {
    padding: 10px 16px !important;
    border: 1px solid #e0e0e0 !important;
    border-top: none !important;
  }
  
  .category-desc {
    font-size: 12px !important;
  }
  
  .video-list-container {
    min-height: auto !important;
    margin-bottom: 1rem !important;
  }
  
  .video-list-wrapper {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    position: relative !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  
  .video-list-wrapper:not(.active) {
    display: none !important;
  }
  
  .video-main {
    order: 1;
  }
  
  .video-grid {
    order: 2;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  
  .video-cover-main,
  .video-cover-placeholder {
    min-height: 180px !important;
  }
  
  .video-grid-item {
    min-height: 50px !important;
  }
  
  .video-play-overlay i {
    font-size: 2rem !important;
  }
  
  .video-name {
    font-size: 12px !important;
    padding: 20px 10px 10px !important;
  }
  
  .video-name-small {
    font-size: 11px !important;
    padding: 15px 8px 8px !important;
  }
  
  .video-grid-empty,
  .video-grid-empty-double,
  .video-cover-empty,
  .video-grid-empty-full {
    min-height: 100px !important;
    font-size: 12px !important;
    gap: 8px !important;
  }
  
  .video-grid-empty i,
  .video-grid-empty-double i,
  .video-cover-empty i,
  .video-grid-empty-full i {
    font-size: 1.5rem !important;
  }
  
  .video-grid-empty .ellipsis,
  .video-grid-empty-double .ellipsis,
  .video-cover-empty .ellipsis,
  .video-grid-empty-full .ellipsis {
    display: none !important;
  }
  
  .video-category-nav {
    margin-top: 1.5rem !important;
  }
  
  .nav-dot {
    width: 10px !important;
    height: 10px !important;
  }
  
  .nav-dots {
    gap: 12px !important;
  }
}

/* 预约表单深度优化 */
@media screen and (max-width: 768px) {
  #booking-section {
    min-height: auto !important;
    padding: 2rem 0 !important;
  }
  
  #booking-section .max-w-3xl {
    max-width: 100% !important;
    padding: 0 8px !important;
  }
  
  #booking-section h2 {
    font-size: 1.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  
  #booking-section .text-3xl {
    font-size: 0.875rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  #booking-form {
    padding: 12px !important;
    margin: 0 4px !important;
  }
  
  #booking-form label {
    font-size: 12px !important;
    margin-bottom: 2px !important;
  }
  
  #booking-form input,
  #booking-form select,
  #booking-form textarea {
    font-size: 14px !important;
    padding: 8px 10px !important;
    margin-bottom: 8px !important;
  }
  
  #booking-form .grid {
    gap: 8px !important;
    margin-bottom: 8px !important;
  }
  
  #booking-form button[type="submit"] {
    padding: 10px !important;
    font-size: 14px !important;
    margin-top: 4px !important;
  }
}

/* Banner CTA深度优化 */
@media screen and (max-width: 768px) {
  .home .banner {
    height: auto !important;
    min-height: 400px !important;
    padding: 2rem 0 !important;
  }
  
  .home .banner .relative.z-10 {
    padding: 1rem !important;
  }
  
  .home .banner .bg-\[\#1f2d5c\]\/70 {
    padding: 1rem !important;
    margin-bottom: 1rem !important;
  }
  
  #cta-title {
    font-size: 1rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  #cta-description {
    font-size: 0.75rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .flex.items-center.gap-4.text-2xl {
    font-size: 0.875rem !important;
    flex-direction: row !important;
    gap: 0.5rem !important;
  }
  
  .flex.items-center.gap-4 i {
    font-size: 1rem !important;
  }
  
  .flex.flex-wrap.justify-center.mt-8 {
    margin-top: 0.5rem !important;
  }
  
  .w-1\/3.md\:w-1\/6 {
    width: 33.333% !important;
    padding: 4px !important;
  }
  
  .w-1\/3.md\:w-1\/6 .bg-\[\#1f2d5c\]\/70 {
    padding: 8px 4px !important;
  }
  
  .w-1\/3.md\:w-1\/6 i {
    font-size: 1.25rem !important;
    margin-bottom: 4px !important;
  }
  
  .w-1\/3.md\:w-1\/6 p {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  .brand-service-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  
  .brand-service-card:active {
    background-color: #d7152f !important;
    transform: scale(0.98) !important;
  }
  
  .brand-service-card:active .brand-service-icon i {
    color: white !important;
  }
  
  .brand-service-card:active .brand-service-title,
  .brand-service-card:active .brand-service-desc,
  .brand-service-card:active .brand-service-link {
    color: white !important;
  }
  
  .product-card:active {
    background: #d7152f !important;
  }
  
  .product-card:active .product-card-name {
    color: white !important;
  }
  
  .company-card:active {
    transform: scale(0.98) !important;
  }
  
  .service-item:active {
    opacity: 0.9;
  }
  
  .news-item:active {
    background-color: #f9fafb !important;
  }
}

/* 小屏幕手机优化 - 375px及以下 */
@media screen and (max-width: 375px) {
  .container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  
  .company-cards-wrapper .grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .company-card-container {
    min-height: 100px !important;
  }
  
  .company-card {
    padding: 10px 6px !important;
  }
  
  .company-card i {
    font-size: 3rem !important;
    margin-bottom: 2px !important;
  }
  
  .company-card p:first-of-type {
    font-size: 21px !important;
    margin-bottom: 2px !important;
  }
  
  .company-card p.text-3xl {
    font-size: 1.875rem !important;
  }
  
  .brand-service-card {
    padding: 32px 14px !important;
    margin: 6px 3px !important;
  }
  
  .brand-service-icon i {
    font-size: 42px !important;
  }
  
  .brand-service-title {
    font-size: 20px !important;
    margin-bottom: 10px !important;
  }
  
  .brand-service-desc {
    font-size: 14px !important;
    margin-bottom: 14px !important;
  }
  
  .brand-service-link {
    font-size: 14px !important;
  }
  
  #products-section .text-3xl,
  #products-section .text-4xl {
    font-size: 1.25rem !important;
  }
  
  #products-grid {
    gap: 8px !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .product-card {
    padding: 12px 8px !important;
    min-height: 110px !important;
  }
  
  .product-card-icon img {
    width: 44px !important;
    height: 44px !important;
  }
  
  .product-card-name {
    font-size: 13px !important;
  }
  
  .product-card-date,
  .product-card-category {
    font-size: 10px !important;
  }
  
  .news-item h3 {
    font-size: 13px !important;
  }
  
  .news-item .news-summary {
    font-size: 11px !important;
  }
  
  .video-cover-main,
  .video-cover-placeholder {
    min-height: 160px !important;
  }
  
  .video-grid-item {
    min-height: 90px !important;
  }
  
  .video-play-overlay i {
    font-size: 2.5rem !important;
  }
  
  .video-name {
    font-size: 11px !important;
  }
  
  .video-name-small {
    font-size: 10px !important;
  }
  
  #booking-form {
    padding: 10px !important;
  }
  
  #booking-form label {
    font-size: 11px !important;
  }
  
  #booking-form input,
  #booking-form select,
  #booking-form textarea {
    font-size: 13px !important;
    padding: 7px 9px !important;
  }
  
  #booking-form button[type="submit"] {
    padding: 9px !important;
    font-size: 13px !important;
  }
  
  .home .banner {
    min-height: 380px !important;
  }
  
  #cta-title {
    font-size: 0.9375rem !important;
  }
  
  #cta-description {
    font-size: 0.6875rem !important;
  }
  
  .w-1\/3.md\:w-1\/6 i {
    font-size: 1.125rem !important;
  }
  
  .w-1\/3.md\:w-1\/6 p {
    font-size: 9px !important;
  }
}

/* 超小屏幕手机优化 - 320px及以下 */
@media screen and (max-width: 320px) {
  .container {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  
  header .w-\[350px\],
  header .w-\[200px\],
  header .w-\[160px\],
  header .w-\[130px\] {
    width: 100px !important;
  }
  
  header .h-\[100px\],
  header .h-\[60px\],
  header .h-\[50px\],
  header .h-\[40px\] {
    height: 35px !important;
  }
  
  .company-title {
    font-size: 1.25rem !important;
  }
  
  .company-description {
    font-size: 0.75rem !important;
  }
  
  .company-cards-wrapper .grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2px !important;
  }
  
  .company-card-container {
    min-height: 70px !important;
  }
  
  .company-card {
    padding: 8px 4px !important;
  }
  
  .company-card i {
    font-size: 1.5rem !important;
    margin-bottom: 4px !important;
  }
  
  .company-card p:first-of-type {
    font-size: 12px !important;
    margin-bottom: 2px !important;
  }
  
  .company-card p.text-3xl {
    font-size: 1rem !important;
  }
  
  .brand-service-card {
    padding: 24px 12px !important;
    margin: 4px 2px !important;
  }
  
  .brand-service-icon i {
    font-size: 28px !important;
  }
  
  .brand-service-title {
    font-size: 14px !important;
    margin-bottom: 8px !important;
  }
  
  .brand-service-desc {
    font-size: 11px !important;
    margin-bottom: 10px !important;
  }
  
  .brand-service-link {
    font-size: 10px !important;
  }
  
  #products-section .text-3xl,
  #products-section .text-4xl {
    font-size: 1.125rem !important;
  }
  
  #products-section .text-xl,
  #products-section .text-2xl {
    font-size: 0.875rem !important;
  }
  
  #featured-product-name {
    font-size: 1rem !important;
  }
  
  #featured-product-desc {
    font-size: 0.75rem !important;
  }
  
  #product-featured-display .h-\[360px\],
  #product-featured-display .h-\[480px\] {
    height: 150px !important;
  }
  
  #products-grid {
    gap: 4px !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .product-card {
    padding: 8px 4px !important;
    min-height: 90px !important;
  }
  
  .product-card-icon img {
    width: 36px !important;
    height: 36px !important;
  }
  
  .product-card-name {
    font-size: 11px !important;
  }
  
  .product-card-date,
  .product-card-category {
    font-size: 9px !important;
  }
  
  .news-item {
    padding: 0.25rem !important;
  }
  
  .news-item .block.flex {
    padding: 0.25rem !important;
  }
  
  .news-item .w-full.md\:w-1\/4 {
    margin-bottom: 8px !important;
  }
  
  .news-item h3 {
    font-size: 12px !important;
  }
  
  .news-item .news-summary {
    font-size: 10px !important;
  }
  
  .news-item a[href*="about.php"] {
    font-size: 10px !important;
  }
  
  #video-section {
    padding: 1rem 0 !important;
  }
  
  .video-main-title {
    font-size: 1rem !important;
    margin-bottom: 1rem !important;
  }
  
  .video-category-row {
    margin: 0.25rem 0 !important;
  }
  
  .category-name-box {
    padding: 8px 12px !important;
  }
  
  .category-name {
    font-size: 12px !important;
  }
  
  .category-desc-box {
    padding: 8px 12px !important;
  }
  
  .category-desc {
    font-size: 10px !important;
  }
  
  .video-cover-main,
  .video-cover-placeholder {
    min-height: 140px !important;
  }
  
  .video-grid {
    gap: 4px !important;
  }
  
  .video-grid-item {
    min-height: 70px !important;
  }
  
  .video-play-overlay i {
    font-size: 1.5rem !important;
  }
  
  .video-name {
    font-size: 10px !important;
    padding: 15px 8px 8px !important;
  }
  
  .video-name-small {
    font-size: 9px !important;
    padding: 12px 6px 6px !important;
  }
  
  .video-grid-empty,
  .video-grid-empty-double,
  .video-cover-empty,
  .video-grid-empty-full {
    min-height: 70px !important;
    font-size: 10px !important;
    gap: 6px !important;
  }
  
  .video-grid-empty i,
  .video-grid-empty-double i,
  .video-cover-empty i,
  .video-grid-empty-full i {
    font-size: 1.25rem !important;
  }
  
  .nav-dot {
    width: 8px !important;
    height: 8px !important;
  }
  
  .nav-dots {
    gap: 8px !important;
  }
  
  #booking-section h2 {
    font-size: 1rem !important;
  }
  
  #booking-section .text-3xl {
    font-size: 0.75rem !important;
  }
  
  #booking-form {
    padding: 8px !important;
  }
  
  #booking-form label {
    font-size: 10px !important;
  }
  
  #booking-form input,
  #booking-form select,
  #booking-form textarea {
    font-size: 12px !important;
    padding: 6px 8px !important;
    margin-bottom: 6px !important;
  }
  
  #booking-form button[type="submit"] {
    padding: 8px !important;
    font-size: 12px !important;
  }
  
  .home .banner {
    min-height: 350px !important;
    padding: 1.5rem 0 !important;
  }
  
  .home .banner .bg-\[\#1f2d5c\]\/70 {
    padding: 0.75rem !important;
  }
  
  #cta-title {
    font-size: 0.875rem !important;
    margin-bottom: 0.25rem !important;
  }
  
  #cta-description {
    font-size: 0.625rem !important;
    margin-bottom: 0.25rem !important;
  }
  
  .flex.items-center.gap-4.text-2xl {
    font-size: 0.75rem !important;
  }
  
  .flex.items-center.gap-4 i {
    font-size: 0.875rem !important;
  }
  
  .w-1\/3.md\:w-1\/6 {
    padding: 2px !important;
  }
  
  .w-1\/3.md\:w-1\/6 .bg-\[\#1f2d5c\]\/70 {
    padding: 6px 2px !important;
  }
  
  .w-1\/3.md\:w-1\/6 i {
    font-size: 1rem !important;
    margin-bottom: 2px !important;
  }
  
  .w-1\/3.md\:w-1\/6 p {
    font-size: 8px !important;
  }
  
  footer .container {
    padding: 1rem 0.5rem !important;
  }
  
  footer h3 {
    font-size: 1rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  footer p,
  footer li,
  footer span {
    font-size: 0.75rem !important;
  }
}

/* ============================================
   py-16 移动端适配 - 统一改为 py-4
   ============================================ */
@media screen and (max-width: 768px) {
  .py-16,
  section.py-16,
  .py-16.bg-white,
  .py-16.bg-\[\#f5f5f5\],
  .py-16.bg-gray-50,
  .py-16.bg-gray-100,
  .py-16.bg-blue-600,
  section.py-16.bg-white,
  section.py-16.bg-gray-50 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
}