/*
Theme Name: Cheap Cars Auto
Theme URI: https://www.cheapcarsauto.com
Author: VWThemes / Custom
Author URI: https://www.vwthemes.com/
Description: Cheap Cars Auto is a comprehensive WordPress theme for car dealerships, featuring vehicle listings, search functionality, financing options, and more. Built by merging Auto Car Dealership theme structure with usedvehicles.com content and logic.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.9
Requires PHP: 7.2
License: GPLv3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: cheapcarsauto
Tags: left-sidebar, right-sidebar, one-column, two-columns, three-columns, four-columns, grid-layout, wide-blocks, block-styles, style-variations, translation-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, full-site-editing, block-patterns, sticky-post, threaded-comments, template-editing, blog, e-commerce, photography

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Cheap Cars Auto is based on Auto Car Dealership WordPress Theme, (C) 2024 VWThemes
Auto Car Dealership is distributed under the terms of the GNU GPL.

*/

*,
*::before,
*::after {
  box-sizing: inherit; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased; 
}

body{
  font-family: 'Poppins', sans-serif !important;
  background: #fff;
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Global Container and Layout Improvements */
.site {
  margin: 0 auto;
  max-width: 100%;
  overflow: hidden;
}

.site-main {
  margin: 0;
  padding: 0;
}

.container, .container-fluid {
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
  max-width: 1200px;
}

@media (min-width: 576px) {
  .container, .container-fluid {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (min-width: 768px) {
  .container, .container-fluid {
    padding-left: 30px;
    padding-right: 30px;
  }
}

@media (min-width: 992px) {
  .container, .container-fluid {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (min-width: 1200px) {
  .container, .container-fluid {
    padding-left: 50px;
    padding-right: 50px;
  }
}

/* Content Centering and Spacing */
.entry-content {
  margin: 0 auto;
  max-width: 100%;
}

.wp-block-group {
  margin: 0 auto;
  padding: 0;
}

/* Section Spacing */
section {
  margin: 0;
  padding: 60px 0;
}

@media (max-width: 768px) {
  section {
    padding: 40px 0;
  }
}

/* Carousel Text Animations */
.animate-text .animate-title, .animate-text .animate-subtitle {
  opacity: 0;
  transform: translateY(30px); 
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-text.animate-in .animate-title.slide-0 {
  animation: fadeInLeft 0.8s ease-out forwards;
}

.animate-text.animate-in .animate-subtitle.slide-0 {
  animation: slideInUp 0.8s ease-out 0.3s forwards;
}

.animate-text.animate-in .animate-title.slide-1 {
  animation: fadeInRight 0.8s ease-out forwards;
}

.animate-text.animate-in .animate-subtitle.slide-1 {
  animation: fadeInUp 0.8s ease-out 0.3s forwards;
}

.animate-text.animate-in .animate-title.slide-2 {
  animation: scaleIn 0.8s ease-out forwards;
}

.animate-text.animate-in .animate-subtitle.slide-2 {
  animation: slideInUp 0.8s ease-out 0.3s forwards;
}

@keyframes flyInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes flyInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Mind-Blowing Animations */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Apply animations to sections */
.home-banner-section {
  animation: fadeInUp 1s ease-out;
}

.search-section {
  animation: fadeInLeft 1s ease-out 0.2s both;
}

.welcome-grid-section {
  animation: scaleIn 1s ease-out 0.4s both;
}

.brands-carousel-section {
  animation: slideInUp 1s ease-out 0.6s both;
}

.awards-section {
  animation: fadeInRight 1s ease-out 0.8s both;
}

.news-section {
  animation: bounceIn 1s ease-out 1s both;
}

.reports-section {
  animation: fadeInUp 1s ease-out 1.2s both;
}

.features-grid-section {
  animation: scaleIn 1s ease-out 1.4s both;
}

.testimonials-section {
  animation: slideInUp 1s ease-out 1.6s both;
}

.who-we-are-section {
  animation: fadeInLeft 1s ease-out 1.8s both;
}

.what-we-do-section {
  animation: fadeInRight 1s ease-out 2s both;
}

/* Header animations */
.site-header {
  animation: slideInUp 0.8s ease-out;
}

.site-title {
  animation: fadeInLeft 1s ease-out 0.3s both;
}

.main-navigation {
  animation: fadeInRight 1s ease-out 0.5s both;
}

/* Footer animations */
.site-footer {
  animation: fadeInUp 1s ease-out 2.2s both;
}

/* Button animations */
.btn, .wp-block-button__link {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn:hover, .wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.btn:before, .wp-block-button__link:before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}

.btn:hover:before, .wp-block-button__link:hover:before {
  left: 100%;
}

/* Image hover effects */
.wp-block-image img, img {
  transition: all 0.3s ease;
}

.wp-block-image:hover img, img:hover {
  transform: scale(1.05);
}

/* Card animations */
.wp-block-group, .wp-block-column {
  transition: all 0.3s ease;
}

.wp-block-group:hover, .wp-block-column:hover {
  transform: translateY(-5px);
}

/* Loading animation for images */
img {
  animation: fadeInUp 0.6s ease-out;
}

/* Page Content Centering and Spacing */
.page-content-wrapper,
.post-content-wrapper {
  margin: 0 auto;
  max-width: 100%;
  padding: 40px 0;
}

.entry-header {
  text-align: center;
  margin-bottom: 30px;
}

.entry-title {
  margin-bottom: 20px;
  font-size: 2.5rem;
  line-height: 1.2;
}

@media (max-width: 768px) {
  .entry-title {
    font-size: 2rem;
  }
}

.entry-meta {
  text-align: center;
  margin-bottom: 30px;
  font-size: 0.9rem;
  color: #666;
}

.post-thumbnail {
  margin-bottom: 30px;
  text-align: center;
}

.post-thumbnail img {
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.entry-content {
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.8;
  font-size: 1.1rem;
}

.entry-content p {
  margin-bottom: 20px;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  margin-top: 40px;
  margin-bottom: 20px;
  color: #23393D;
}

.read-more {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 24px;
  background: #f0c541;
  color: #23393D;
  text-decoration: none;
  border-radius: 5px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.read-more:hover {
  background: #23393D;
  color: #f0c541;
  transform: translateY(-2px);
}

/* Sidebar Styling */
.widget-area {
  padding-top: 40px;
}

.widget {
  margin-bottom: 40px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.widget-title {
  margin-bottom: 20px;
  font-size: 1.2rem;
  color: #23393D;
  border-bottom: 2px solid #f0c541;
  padding-bottom: 10px;
}

/* Comments Styling */
.comments-area {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid #eee;
}

/* Navigation Styling */
.post-navigation,
.posts-navigation {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid #eee;
}

.nav-links {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.nav-previous,
.nav-next {
  flex: 1;
}

.nav-previous {
  text-align: left;
}

.nav-next {
  text-align: right;
}

.nav-subtitle {
  display: block;
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 5px;
}

.nav-title {
  font-weight: 600;
  color: #23393D;
}

.nav-title:hover {
  color: #f0c541;
}

/* Archive and Search Pages */
.archive .page-header,
.search .page-header {
  text-align: center;
  margin-bottom: 50px;
  padding: 40px 0;
  background: linear-gradient(135deg, #23393D 0%, #34495E 100%);
  color: white;
  border-radius: 10px;
}

.archive .page-title,
.search .page-title {
  margin-bottom: 10px;
  font-size: 2.5rem;
}

.archive .page-description,
.search .search-term {
  font-size: 1.2rem;
  opacity: 0.9;
}

/* 404 Page */
.error-404 {
  text-align: center;
  padding: 100px 0;
}

.error-404 .page-title {
  font-size: 5rem;
  color: #f0c541;
  margin-bottom: 20px;
}

.error-404 .page-content {
  max-width: 600px;
  margin: 0 auto;
}

/* Ensure all content is properly centered */
.site-main {
  min-height: calc(100vh - 200px); /* Ensure content takes full height */
}

/* Loading States */
.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Focus States for Accessibility */
button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid #f0c541;
  outline-offset: 2px;
}

/* Print Styles */
@media print {
  .site-header,
  .site-footer,
  .sidebar,
  .navigation,
  .comments-area {
    display: none;
  }

  .entry-content {
    font-size: 12pt;
    line-height: 1.5;
  }
}

header a,
footer a {
  text-decoration: none; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Montserrat', sans-serif !important;
  clear: both;
  line-height: 1.4; 
  font-weight: 700;
}

ul {
  list-style: disc; }

ol {
  list-style: decimal; }

li > ul,
li > ol {
  margin-bottom: 0;
  margin-left: 0; }

dt {
  font-weight: 700; }

dd {
  margin: 0 1.5em 1.5em; }

table {
  width: 100%;
  border-spacing: 0; }

th, td {
  padding: 5px;
  text-align: center; }

table td,
table tr,
table th {
  border: 1px solid #ddd; }

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
  max-width: 100%; }

img, .wp-block-image img {
  height: auto;
  max-width: 100%;
  vertical-align: middle; }

figure {
  margin: 1em 0; }

dfn,
cite,
em,
i {
  font-style: italic; }

blockquote {
  margin: 0 1.5em; }

address {
  margin: 0 0 1.5em; }

pre {
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1.6em; }

code,
kbd,
tt,
var {
  font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; }

abbr,
acronym {
  border-bottom: 1px dotted #666;
  cursor: help; }

mark,
ins {
  background: #fff9c0;
  text-decoration: none; }

sup,
sub {
  font-size: 75%;
  height: 0;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  bottom: 1ex; }

sub {
  top: .5ex; }

small {
  font-size: 75%; }

big {
  font-size: 125%; }

hr {
  background: #ddd;
  border: 0;
  height: 1px;
  margin-bottom: 1.5em; }

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
  color: #666;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 3px; }

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
  color: #111; }

select {
  border: 1px solid #ccc; }

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus,
select:focus {
  border-color: #1287a7; }

input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
  outline: 1px thin #1287a7; }

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  border: 1px solid;
  border-color: #ccc #ccc #bbb;
  border-radius: 3px;
  background: #e6e6e6;
  color: rgba(0, 0, 0, .8);
  line-height: 1;
  padding: .6em 1em .4em; }

button:hover,
button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
  border-color: #ccc #bbb #aaa;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 15px 17px rgba(255, 255, 255, 0.8), inset 0 -5px 12px rgba(0, 0, 0, 0.02); }

button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
  border-color: #aaa #bbb #bbb;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15); }

input[type="checkbox"],
input[type="radio"] {
  padding: 0; }

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none; }

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  word-wrap: normal !important; }

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000; }

/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important; }

.screen-reader-text:focus {
  background-color: #ddd;
  clip: auto !important;
  clip-path: none;
  color: #444;
  display: block;
  font-size: 1em;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000; }

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
  outline: 0; }

/* Alignment */
.alignleft {
  display: inline;
  float: left;
  margin-right: 1.5em; }

.alignright {
  display: inline;
  float: right;
  margin-left: 1.5em; }

.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto; }

/* Clearings */
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
  content: "";
  display: table;
  table-layout: fixed; }

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
  clear: both; }

/* Layout */
.site-content {
  padding: 0 0 36px; }

/* Header */
.site-header {
  padding: 36px 0; }

/* Footer */
.site-footer {
  border-top: 1px solid #ddd;
  padding: 36px 0; }

/* Navigation */
.main-navigation {
  clear: both;
  display: block;
  float: left;
  width: 100%; }

.main-navigation ul {
  list-style: none;
  margin: 0;
  padding-left: 0; }

.main-navigation li {
  float: left;
  position: relative; }

.main-navigation a {
  display: block;
  text-decoration: none; }

.main-navigation ul ul {
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  float: left;
  position: absolute;
  top: 1.5em;
  left: -999em;
  z-index: 99999; }

.main-navigation ul ul ul {
  left: -999em;
  top: 0; }

.main-navigation ul ul a {
  width: 200px; }

.main-navigation ul ul li {
  background: #fff;
  border: 1px solid #ddd;
  border-top-width: 0;
  width: 100%; }

.main-navigation li:hover > a,
.main-navigation li.focus > a {
  background: #fff; }

.main-navigation ul ul :hover > a,
.main-navigation ul ul .focus > a {
  background: #fff; }

.main-navigation ul ul a:hover,
.main-navigation ul ul a.focus {
  background: #fff; }

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
  left: auto; }

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
  left: 100%; }

.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a,
.main-navigation .current-menu-ancestor > a {
  color: #636363;
  font-weight: bold; }

/* WordPress Navigation Block Styles */
.wp-block-navigation {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 2em;
}

.wp-block-navigation .wp-block-navigation-link {
  position: relative;
}

.wp-block-navigation .wp-block-navigation-link a {
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 0;
  transition: color 0.3s ease;
  text-transform: uppercase;
}

.wp-block-navigation .wp-block-navigation-link a:hover,
.wp-block-navigation .wp-block-navigation-link a:focus {
  color: var(--wp--preset--color--secondary) !important;
}

.wp-block-navigation .wp-block-navigation-link.current-menu-item a,
.wp-block-navigation .wp-block-navigation-link.current_page_item a {
  color: var(--wp--preset--color--secondary) !important;
  font-weight: 700;
}

/* Mobile Navigation */
@media screen and (max-width: 767px) {
  .wp-block-navigation {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
  
  .wp-block-navigation .wp-block-navigation-link a {
    font-size: 18px;
    padding: 15px 0;
  }
}

/* Layout */
/* On larger screens, limit the width of the content. */
@media screen and (min-width: 768px) {
  .fixed .site-content,
  .fluid .site-content {
    margin: 0 auto;
    max-width: 1200px;
    width: 100%; } }

@media screen and (min-width: 768px) {
  .fixed .site-content,
  .fluid .site-content {
    margin: 0 auto;
    max-width: 1200px;
    width: 100%; } }

/* On smaller screens, remove the padding on the left and right. */
@media screen and (max-width: 767px) {
  .site-content {
    padding: 36px 10px; }
  .site-header {
    padding: 36px 10px; }
  .site-footer {
    padding: 36px 10px; } }

/* Footer */
.site-footer {
  border-top: 1px solid #ddd;
  padding: 36px 0; }

/* Custom styles for Cheap Cars Auto */
.cheap-cars-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('images/banner.png');
  background-size: cover;
  background-position: center;
  opacity: 0.3;
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
  padding: 100px 0;
  text-align: center;
  color: #fff;
}

.hero-content h1 {
  font-size: 48px;
  margin-bottom: 20px;
}

.hero-content p {
  font-size: 24px;
  margin-bottom: 30px;
}

.contact-info {
  background: #f8f9fa;
  padding: 40px 0;
}

.contact-info .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.contact-item {
  text-align: center;
  margin-bottom: 30px;
}

.contact-item i {
  font-size: 36px;
  color: #0057a3;
  margin-bottom: 10px;
}

.contact-item h3 {
  font-size: 24px;
  margin-bottom: 10px;
}

.contact-item p {
  font-size: 18px;
}

/* Responsive */
@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 36px;
  }
  .hero-content p {
    font-size: 18px;
  }
}

/* === Mobile Responsive Enhancements === */

/* Navigation: stack neatly on mobile */
@media (max-width: 768px) {
  .main-navigation {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #0057a3;
  }
  .main-navigation a {
    color: #fff;
    padding: 12px;
    text-align: center;
    width: 100%;
  }
  .main-navigation a:hover {
    background: #004070;
  }
}

/* Hero section: scale text for smaller screens */
@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 1.8rem;
  }
  .hero-content p {
    font-size: 1rem;
  }
}
@media (max-width: 480px) {
  .hero-content h1 {
    font-size: 1.5rem;
  }
  .hero-content p {
    font-size: 0.9rem;
  }
}

/* Contact info: grid layout that collapses on mobile */
.contact-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}
@media (max-width: 480px) {
  .contact-info {
    grid-template-columns: 1fr;
  }
}

/* Buttons: modern look with hover effect */
button,
input[type="submit"] {
  background: #0057a3;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background 0.3s ease;
}
button:hover,
input[type="submit"]:hover {
  background: #004070;
}

/* ==========================================================================
   Mobile-First Responsive Design - Enhanced for Outstanding Mobile Experience
   ========================================================================== */

/* Mobile Navigation Styles */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 1001;
}

.mobile-menu-toggle span {
  display: block;
  width: 25px;
  height: 3px;
  background: #fff;
  margin: 5px 0;
  transition: 0.3s;
  border-radius: 2px;
}

.mobile-menu-toggle.active span:nth-child(1) {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
  transform: rotate(45deg) translate(-5px, -6px);
}

.mobile-nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.mobile-nav-overlay.active {
  opacity: 1;
  visibility: visible;
}

.mobile-navigation {
  position: fixed;
  top: 0;
  right: -300px;
  width: 280px;
  height: 100vh;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  z-index: 1001;
  transition: right 0.3s ease;
  padding: 80px 20px 20px;
  box-shadow: -5px 0 15px rgba(0,0,0,0.3);
}

.mobile-navigation.active {
  right: 0;
}

.mobile-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-navigation li {
  margin: 15px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.mobile-navigation a {
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  display: block;
  padding: 12px 0;
  transition: all 0.3s ease;
  position: relative;
}

.mobile-navigation a:hover,
.mobile-navigation a.active {
  color: #f0c541;
  transform: translateX(10px);
}

.mobile-navigation a:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: #f0c541;
  transition: width 0.3s ease;
}

.mobile-navigation a:hover:before {
  width: 100%;
}

/* Enhanced Mobile Typography */
@media (max-width: 768px) {
  h1 { font-size: 2.2rem !important; line-height: 1.2; }
  h2 { font-size: 1.8rem !important; line-height: 1.3; }
  h3 { font-size: 1.5rem !important; line-height: 1.4; }
  h4 { font-size: 1.3rem !important; line-height: 1.4; }
  h5 { font-size: 1.2rem !important; line-height: 1.4; }
  h6 { font-size: 1.1rem !important; line-height: 1.4; }

  body { font-size: 16px; line-height: 1.6; }
  p { font-size: 16px; margin-bottom: 1.2rem; }
}

/* Mobile Header Enhancements */
@media (max-width: 991px) {
  .header-section {
    flex-direction: column !important;
    padding: 0 !important;
  }

  .header-section .wp-block-column.logo {
    flex-basis: 100% !important;
    order: 1;
  }

  .header-section .wp-block-column:not(.logo) {
    flex-basis: 100% !important;
    order: 2;
  }

  .topbar-section {
    display: none !important; /* Hide on mobile, show in hamburger */
  }

  .menu-section {
    padding: 15px 20px;
    background: var(--wp--preset--color--primary);
    position: relative;
  }

  .mobile-menu-toggle {
    display: block;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
  }

  .primary-menu {
    display: none; /* Hide desktop menu on mobile */
  }

  .wp-block-social-links {
    justify-content: center !important;
    margin-top: 10px;
  }
}

/* Header Section Styling */
.header-section {
  background: #23393D !important; /* Dark background for header */
  color: white;
}

.header-section .logo-section {
  padding: 20px 0;
}

.header-section .site-logo img {
  max-height: 80px;
  width: auto;
}

.header-section .site-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
}

.header-section .site-title a {
  color: white !important;
  text-decoration: none;
}

.header-section .topbar-section {
  background: #f8f9fa;
  margin-bottom: 10px;
}

.header-section .contact-info {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
}

.header-section .menu-section {
  background: transparent;
  padding: 15px 0;
}

/* Desktop Navigation */
@media (min-width: 992px) {
  .primary-menu {
    display: flex !important;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: flex-start;
    align-items: center;
    gap: 50px;
  }

  .primary-menu li {
    position: relative;
  }

  .primary-menu a {
    color: white !important;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    padding: 10px 0;
    transition: color 0.3s ease;
  }

  .primary-menu a:hover,
  .primary-menu a:focus {
    color: #f0c541 !important;
  }

  .header-search-button {
    display: inline-flex;
    min-width: 110px;
    padding: 10px 18px;
    border-radius: 30px;
    background-color: #ffffff;
    color: #23393d;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border: 1px solid rgba(255,255,255,0.35);
    text-decoration: none;
    transition: background-color 0.25s ease, transform 0.25s ease, color 0.25s ease;
  }

  .header-search-button:hover,
  .header-search-button:focus {
    background-color: #f1f5f7;
    color: #0057a3;
    transform: translateY(-1px);
  }

  @media (max-width: 991px) {
    .header-search-button {
      display: none !important;
    }
  }
}

/* Mobile Navigation */
@media (max-width: 991px) {
  .header-section .menu-section {
    position: relative;
  }

  .primary-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #23393D;
    padding: 20px;
    z-index: 1000;
  }

  .primary-menu.active {
    display: block;
  }

  .primary-menu li {
    margin-bottom: 10px;
  }

  .primary-menu a {
    color: white !important;
    display: block;
    padding: 10px 0;
  }

  .mobile-menu-toggle {
    display: block !important;
    background: none;
    border: 1px solid white;
    color: white;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 18px;
    border-radius: 4px;
    transition: all 0.3s ease;
  }

  .mobile-menu-toggle:hover,
  .mobile-menu-toggle.active {
    background: white;
    color: #23393D;
  }

  .mobile-menu-toggle .hamburger-line {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    margin: 4px 0;
    transition: all 0.3s ease;
  }

  .mobile-menu-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .mobile-menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
  }

  .mobile-menu-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
  }
}

/* Header Social Links Styling */
.header-section .menu-section ul.wp-block-social-links {
  margin: 0;
  gap: 9px;
}
.header-section .menu-section .wp-block-navigation ul ul li a {
  color: #222;
  display: block !important;
  padding: 10px;
}

/* Carousel Styling */
.slider {
  position: relative;
  width: 100%;
  height: 100vh;
  max-height: 720px;
  overflow: hidden;
  background: #000;
}

.carousel {
  width: 100%;
  height: 100%;
  position: relative;
}

.carousel-inner {
  height: 100%;
  width: 100%;
}

.carousel-item {
  height: 100%;
  width: 100%;
  position: relative;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.carousel-caption {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.3);
  padding: 20px !important;
}

.carousel-caption::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.carousel-caption > * {
  position: relative;
  z-index: 2;
}

.carousel-caption .inner_carousel {
  animation: fadeInUp 0.8s ease-out;
}

.carousel-caption h1 {
  font-size: 3rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 20px 0;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  line-height: 1.2;
}

.carousel-caption p {
  font-size: 1.5rem;
  color: #fff;
  margin: 0 0 30px 0;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

.carousel-caption .wp-block-buttons {
  margin: 0;
}

.carousel-caption .wp-block-button__link {
  display: inline-block;
  padding: 15px 40px;
  background: #f0c541;
  color: #23393D;
  text-decoration: none;
  border-radius: 5px;
  font-weight: 600;
  transition: all 0.3s ease;
  border: 2px solid #f0c541;
  text-transform: uppercase;
  font-size: 1rem;
}

.carousel-caption .wp-block-button__link:hover {
  background: transparent;
  color: #fff;
  border-color: #fff;
}

/* Carousel Controls */
.carousel-control-prev,
.carousel-control-next {
  width: 8%;
  height: 100%;
  top: 0;
  opacity: 0.5;
  transition: opacity 0.3s ease;
  z-index: 10;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
  opacity: 1;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 3rem;
  height: 3rem;
  background-size: contain;
}

.carousel-control-prev {
  justify-content: flex-start;
  padding-left: 20px;
}

.carousel-control-next {
  justify-content: flex-end;
  padding-right: 20px;
}

/* Carousel Indicators */
.carousel-indicators {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  display: flex;
  gap: 10px;
}

.carousel-indicators button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.carousel-indicators button.active {
  background: #f0c541;
  width: 14px;
  height: 14px;
}

.carousel-indicators button:hover {
  background: rgba(255, 255, 255, 0.8);
}

/* Carousel Animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Mobile Carousel Enhancements */
@media (max-width: 768px) {
  .slider {
    height: 60vh !important;
    min-height: 400px;
  }

  .carousel-caption {
    top: 20% !important;
    bottom: auto !important;
    padding: 20px;
  }

  .inner_carousel h1 {
    font-size: 2rem !important;
    margin-bottom: 15px !important;
  }

  .inner_carousel p {
    font-size: 1.1rem !important;
  }

  .carousel-control-prev,
  .carousel-control-next {
    width: 40px;
    height: 40px;
    top: 50%;
    transform: translateY(-50%);
  }

  .carousel-control-prev {
    left: 10px;
  }

  .carousel-control-next {
    right: 10px;
  }
}

/* Mobile Search Section */
@media (max-width: 768px) {
  .search-section {
    padding: 40px 0 !important;
  }

  .search-section .container {
    padding: 0 15px;
  }

  .search-form input,
  .search-form select,
  .search-form button {
    font-size: 16px !important; /* Prevent zoom on iOS */
    padding: 12px 15px !important;
    margin-bottom: 10px;
  }

  .search-form .row > div {
    margin-bottom: 15px;
  }
}

/* Mobile Footer Enhancements */
@media (max-width: 768px) {
  .footer-section {
    padding: 40px 0 20px !important;
  }

  .footer-box {
    margin-bottom: 30px;
    text-align: center;
  }

  .footer-box h3 {
    margin-bottom: 20px;
    font-size: 1.4rem !important;
  }

  .footer-navigation ul {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .footer-navigation li {
    margin: 8px 0;
  }

  .footer-navigation a {
    font-size: 16px;
    padding: 8px 0;
  }
}

/* Mobile Card and Grid Enhancements */
@media (max-width: 768px) {
  .wp-block-columns {
    margin-bottom: 20px;
  }

  .wp-block-column {
    margin-bottom: 20px;
  }

  .card, .service-box, .feature-box {
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .card:hover, .service-box:hover, .feature-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  }
}

/* Mobile Button Enhancements */
@media (max-width: 768px) {
  .wp-block-button .wp-block-button__link {
    padding: 12px 24px !important;
    font-size: 16px !important;
    border-radius: 8px;
    min-height: 48px; /* Touch-friendly */
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  button, .btn {
    min-height: 44px;
    padding: 12px 20px;
    font-size: 16px;
  }
}

/* Mobile Form Enhancements */
@media (max-width: 768px) {
  input, textarea, select {
    font-size: 16px !important; /* Prevent zoom */
    padding: 12px 15px !important;
    border-radius: 8px;
    border: 2px solid #e1e1e1;
    transition: border-color 0.3s ease;
  }

  input:focus, textarea:focus, select:focus {
    border-color: var(--wp--preset--color--primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(240, 197, 65, 0.1);
  }
}

/* Mobile Animation Enhancements */
@media (max-width: 768px) {
  .wow {
    animation-duration: 0.8s;
    animation-delay: 0.2s;
  }

  .fadeInUp {
    animation-name: fadeInUpMobile;
  }
}

@keyframes fadeInUpMobile {
  from {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Premium Mobile Glassmorphism & Ripples */
:root {
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-blur: blur(20px);
}

.mobile-nav-overlay {
  backdrop-filter: var(--glass-blur);
  background: var(--glass-bg);
}

.mobile-navigation {
  background: var(--glass-bg);
  border-left: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
}

/* Touch Ripple Effect */
@media (max-width: 768px) {
  .ripple {
    position: relative;
    overflow: hidden;
  }

  .ripple::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(240, 197, 65, 0.4);
    transform: scale(0);
    animation: ripple-animation 0.6s linear;
    pointer-events: none;
  }

  @keyframes ripple-animation {
    to {
      transform: scale(4);
      opacity: 0;
    }
  }

  a, button {
    position: relative;
  }
}

/* Mobile Touch Interactions */
@media (max-width: 768px) {
  * {
    -webkit-tap-highlight-color: transparent;
  }

  a, button {
    transition: all 0.2s ease;
  }

  a:active, button:active {
    transform: scale(0.97);
  }
}

/* Mobile Loading States */
@media (max-width: 768px) {
  .loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--wp--preset--color--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
}

/* Mobile Image Optimization */
@media (max-width: 768px) {
  img {
    max-width: 100%;
    height: auto;
  }

  .wp-block-image img {
    border-radius: 8px;
  }
}

/* Mobile Accessibility */
@media (max-width: 768px) {
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--wp--preset--color--primary);
    color: white;
    padding: 8px;
    text-decoration: none;
    z-index: 100;
  }

  .skip-link:focus {
    top: 6px;
  }
}

/* Extra Small Mobile (320px and below) */
@media (max-width: 320px) {
  .container {
    padding-left: 10px;
    padding-right: 10px;
  }

  h1 { font-size: 1.8rem !important; }
  h2 { font-size: 1.6rem !important; }
  h3 { font-size: 1.4rem !important; }

  .mobile-navigation {
    width: 100%;
  }

  .carousel-caption {
    padding: 15px;
  }

  .inner_carousel h1 {
    font-size: 1.6rem !important;
  }
}

/* Large Mobile (769px to 991px) */
@media (min-width: 769px) and (max-width: 991px) {
  .header-section {
    flex-direction: row !important;
  }

  .header-section .wp-block-column.logo {
    flex-basis: 30% !important;
  }

  .header-section .wp-block-column:not(.logo) {
    flex-basis: 70% !important;
  }

  .topbar-section {
    display: flex !important;
  }

  .menu-section {
    padding: 10px 20px;
  }
}

/* Mobile Viewport Height Fix */
.slider {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}

@media (max-width: 768px) {
  .slider {
    height: 60vh;
    height: calc(var(--vh, 1vh) * 60);
    min-height: 400px;
  }
}

/* Mobile-Optimized Carousel Indicators */
@media (max-width: 768px) {
  .carousel-indicators {
    bottom: 10px;
  }

  .carousel-indicators button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin: 0 4px;
  }
}

/* Enhanced Mobile Search Experience */
@media (max-width: 768px) {
  .search-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    position: relative;
  }

  .search-section:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="searchPattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="%23f0c541" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23searchPattern)"/></svg>');
    opacity: 0.3;
  }

  .search-form {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
  }
}

/* Mobile Card Hover Effects */
@media (max-width: 768px) {
  .card, .service-box, .feature-box {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .card:active, .service-box:active, .feature-box:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
}

/* Mobile Loading Animation */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(5px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.loading-overlay.active {
  opacity: 1;
  visibility: visible;
}

.loading-content {
  text-align: center;
  padding: 20px;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid var(--wp--preset--color--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}

.loading-text {
  color: var(--wp--preset--color--primary);
  font-size: 16px;
  font-weight: 500;
}

/* Mobile Pull-to-Refresh */
.pull-refresh-indicator {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--wp--preset--color--primary);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 100;
}

.pull-refresh-indicator.visible {
  opacity: 1;
}

/* Mobile Gesture Feedback */
@media (max-width: 768px) {
  .gesture-feedback {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(240, 197, 65, 0.9);
    color: white;
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 500;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .gesture-feedback.show {
    opacity: 1;
  }
}

/* Mobile Performance Optimizations */
@media (max-width: 768px) {
  * {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  img {
    will-change: auto;
  }

  .slider img {
    will-change: transform;
  }
}

/* Mobile Dark Mode Support */
@media (prefers-color-scheme: dark) and (max-width: 768px) {
  .mobile-navigation {
    background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
  }

  .search-section {
    background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
  }

  .search-form {
    background: rgba(45, 45, 45, 0.9);
  }
}

/* Mobile Accessibility Enhancements */
@media (max-width: 768px) {
  .mobile-menu-toggle {
    min-width: 44px;
    min-height: 44px;
  }

  .mobile-navigation a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Focus indicators for keyboard navigation */
  a:focus, button:focus, input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--wp--preset--color--primary);
    outline-offset: 2px;
  }

  /* High contrast mode support */
  @media (prefers-contrast: high) {
    .mobile-navigation {
      background: #000;
      color: #fff;
    }

    .mobile-navigation a {
      border-bottom: 2px solid #fff;
    }
  }
}

/* Mobile Print Styles */
@media print and (max-width: 768px) {
  .mobile-menu-toggle,
  .mobile-navigation,
  .mobile-nav-overlay {
    display: none !important;
  }

  .slider {
    height: auto !important;
    min-height: 200px;
  }

  .carousel-caption {
    position: relative !important;
    background: #f8f9fa;
    padding: 20px;
    margin-top: 10px;
  }
}

/* WooCommerce Product Display Enhancements */
.woocommerce-products-header {
	margin-bottom: 0 !important;
}

.woocommerce-products-header .page-title {
	color: white !important;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.products {
	display: flex;
	flex-wrap: wrap;
	margin: -15px;
}

.product-item {
	padding: 15px;
}

.product-card {
	transition: all 0.3s ease;
	border-radius: 15px;
	overflow: hidden;
	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.product-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

.product-image-wrapper {
	position: relative;
	overflow: hidden;
}

.product-image-wrapper img {
	width: 100%;
	height: 250px;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.product-card:hover .product-image-wrapper img {
	transform: scale(1.1);
}

.product-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(240, 193, 65, 0.95);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 2;
}

.product-card:hover .product-overlay {
	opacity: 1;
}

.view-product-btn {
	color: #23393D;
	font-weight: 600;
	text-decoration: none;
	padding: 12px 24px;
	border: 2px solid #23393D;
	border-radius: 8px;
	transition: all 0.3s ease;
	background: rgba(255,255,255,0.9);
}

/* Featured Cars Section */
.featured-car-section {
	background: linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%);
}

.featured-car-section .wp-block-columns {
	gap: 24px;
	flex-wrap: wrap;
}

.featured-car-section .car-box {
	background: #ffffff;
	border-radius: 24px;
	box-shadow: 0 20px 45px rgba(0,0,0,0.08);
	overflow: hidden;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
	padding: 0 0 24px;
}

.featured-car-section .car-box:hover {
	transform: translateY(-8px);
	box-shadow: 0 24px 60px rgba(0,0,0,0.12);
}

.featured-car-section .car-box a img {
	width: 100%;
	height: 260px;
	object-fit: cover;
	display: block;
}

.featured-car-section .price-col {
	border-radius: 0 0 16px 16px;
	overflow: hidden;
	margin: 0 16px 16px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}

.featured-car-section .price-col .wp-block-column {
	padding: 14px 0;
}

.featured-car-section h4 {
	font-size: 1rem;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	margin: 16px 16px 8px;
	color: #222222;
}

.featured-car-section p {
	margin: 0 16px 16px;
	color: #6e6a6a;
	line-height: 1.7;
}

.featured-car-section .car-features {
	margin: 0 16px;
	gap: 12px;
}

.featured-car-section .car-features .wp-block-column {
	background: #f3f4f6;
	border-radius: 14px;
	padding: 12px 10px;
	text-align: center;
}

.featured-car-section .car-features p {
	color: #4a4a4a;
	font-size: 0.85rem;
	font-weight: 600;
}

/* Gallery Section */
.gallery-section .wp-block-columns {
	gap: 24px;
	flex-wrap: wrap;
}

.gallery-section .wp-block-column {
	flex: 1 1 calc(25% - 24px);
	max-width: calc(25% - 24px);
}

.gallery-section .gallery-card {
	display: block;
	border-radius: 24px;
	overflow: hidden;
	background: #ffffff;
	box-shadow: 0 18px 42px rgba(0,0,0,0.09);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.gallery-section .gallery-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 24px 55px rgba(0,0,0,0.14);
}

.gallery-section .gallery-card img {
	width: 100%;
	height: 240px;
	object-fit: cover;
}

.gallery-section .gallery-overlay {
	padding: 22px;
	background: #ffffff;
}

.gallery-section .gallery-overlay h4 {
	font-size: 1rem;
	font-weight: 700;
	margin: 0;
}

.gallery-section .gallery-overlay span {
	display: block;
	margin-top: 8px;
	color: #6f6f6f;
	font-size: 0.95rem;
}

@media (max-width: 991px) {
	.gallery-section .wp-block-column,
	.featured-car-section .wp-block-column {
		flex: 1 1 100%;
		max-width: 100%;
	}
}

@media (max-width: 767px) {
	.featured-car-section .car-box,
	.gallery-section .gallery-card {
		box-shadow: 0 12px 28px rgba(0,0,0,0.08);
	}

	.gallery-section .gallery-card img,
	.featured-car-section .car-box a img {
		height: 180px;
	}
}

.view-product-btn:hover {
	background: #23393D;
	color: #f0c541;
	transform: translateY(-2px);
}

/* Single Product Page */
.single-product-wrapper {
	min-height: calc(100vh - 200px);
}

.product-header {
	background: linear-gradient(135deg, #23393D 0%, #34495E 100%);
	color: white;
	padding: 80px 0;
	text-align: center;
	margin-bottom: 0;
}

.product-title {
	font-size: 3rem;
	margin-bottom: 15px;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.product-price {
	font-size: 1.8rem;
	font-weight: 700;
	color: #f0c541;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.product-gallery {
	margin-bottom: 30px;
}

.product-details {
	padding: 30px;
	background: white;
	border-radius: 15px;
	box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.product-details .product_title {
	font-size: 2rem;
	color: #23393D;
	margin-bottom: 20px;
}

.product-details .price {
	font-size: 1.5rem;
	color: #f0c541;
	font-weight: 700;
	margin-bottom: 20px;
}

.product-details .woocommerce-product-details__short-description {
	margin-bottom: 25px;
	line-height: 1.6;
}

/* WooCommerce Buttons */
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button {
	background: #f0c541 !important;
	color: #23393D !important;
	border: none !important;
	padding: 12px 30px !important;
	border-radius: 8px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	transition: all 0.3s ease !important;
	font-size: 1rem !important;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .button:hover {
	background: #23393D !important;
	color: #f0c541 !important;
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Quantity Input */
.quantity input {
	border: 2px solid #e9ecef !important;
	border-radius: 5px !important;
	padding: 8px 12px !important;
	text-align: center;
	font-weight: 600;
}

/* Product Tabs */
.woocommerce-tabs {
	margin-top: 50px;
}

.woocommerce-tabs .tabs {
	border-bottom: 3px solid #f0c541;
	margin-bottom: 30px;
}

.woocommerce-tabs .tabs li {
	background: transparent;
	border: none;
	margin-bottom: 0;
}

.woocommerce-tabs .tabs li a {
	color: #23393D;
	font-weight: 600;
	padding: 15px 25px;
	border-radius: 8px 8px 0 0;
	transition: all 0.3s ease;
}

.woocommerce-tabs .tabs li.active a,
.woocommerce-tabs .tabs li a:hover {
	background: #f0c541;
	color: #23393D;
}

.woocommerce-tabs .panel {
	padding: 30px;
	background: #f8f9fa;
	border-radius: 0 8px 8px 8px;
}

/* Related Products */
.related.products {
	margin-top: 60px;
}

.related.products h2 {
	color: #23393D;
	font-size: 2rem;
	text-align: center;
	margin-bottom: 40px;
}

/* Upsells */
.upsells.products {
	margin-top: 40px;
}

.upsells.products h2 {
	color: #23393D;
	font-size: 1.8rem;
	margin-bottom: 30px;
}

/* Cart & Checkout */
.woocommerce-cart .cart_totals,
.woocommerce-checkout .woocommerce-checkout-review-order {
	background: #f8f9fa;
	padding: 30px;
	border-radius: 10px;
}

/* Notices */
.woocommerce-notices-wrapper {
	margin-bottom: 30px;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-radius: 8px;
	padding: 15px 20px;
	margin-bottom: 20px;
	border-left: 4px solid #f0c541;
}

/* Breadcrumbs */
.woocommerce-breadcrumb {
	background: #f8f9fa;
	padding: 15px 0;
	margin-bottom: 30px;
	border-radius: 8px;
}

/* Pagination */
.woocommerce-pagination {
	margin-top: 40px;
	text-align: center;
}

.woocommerce-pagination .page-numbers {
	display: inline-block;
	padding: 10px 15px;
	margin: 0 5px;
	background: white;
	border: 2px solid #e9ecef;
	border-radius: 5px;
	color: #23393D;
	text-decoration: none;
	transition: all 0.3s ease;
}

.woocommerce-pagination .page-numbers:hover,
.woocommerce-pagination .page-numbers.current {
	background: #f0c541;
	border-color: #f0c541;
	color: #23393D;
}

/* Mobile WooCommerce */
@media (max-width: 768px) {
	.product-item {
		width: 50%;
		padding: 10px;
	}

	.product-card .woocommerce-loop-product__title {
		font-size: 1rem;
	}

	.product-title {
		font-size: 2rem;
	}

	.product-details {
		padding: 20px;
	}

	.product-gallery,
	.product-details {
		margin-bottom: 20px;
	}
}

@media (max-width: 576px) {
	.product-item {
		width: 100%;
		padding: 10px;
	}

	.product-header {
		padding: 50px 0;
	}

	.product-title {
		font-size: 1.8rem;
	}
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Subtle animations - not overwhelming */
.wow {
  visibility: hidden;
}

.wow.fadeInUp {
  animation-name: fadeInUp;
  animation-duration: 0.8s;
  animation-fill-mode: both;
}

.wow.zoomIn {
  animation-name: zoomIn;
  animation-duration: 0.6s;
  animation-fill-mode: both;
}

.wow.slideInRight {
  animation-name: slideInRight;
  animation-duration: 0.7s;
  animation-fill-mode: both;
}

.wow.bounceIn {
  animation-name: bounceIn;
  animation-duration: 0.8s;
  animation-fill-mode: both;
}

/* Ensure animations are subtle and not distracting */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}

@keyframes slideInRight {
  from {
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

/* Super responsive design - ensure everything works perfectly on all devices */
@media (max-width: 1200px) {
  .container {
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media (max-width: 992px) {
  .welcome-products-section .col-lg-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .product-gallery,
  .product-details {
    margin-bottom: 30px;
  }
}

@media (max-width: 768px) {
  .welcome-products-section .col-lg-3,
  .welcome-products-section .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .welcome-products-section .section-title {
    font-size: 1.8rem;
  }

  .welcome-products-section .card-img-wrapper img {
    height: 180px;
  }

  /* Ensure buttons are touch-friendly */
  .btn {
    min-height: 44px;
    padding: 12px 20px;
    font-size: 16px;
  }

  /* Improve readability on mobile */
  body {
    font-size: 16px;
    line-height: 1.6;
  }

  h1 { font-size: 2rem; }
  h2 { font-size: 1.8rem; }
  h3 { font-size: 1.5rem; }
}

@media (max-width: 576px) {
  .welcome-products-section .section-title {
    font-size: 1.6rem;
  }

  .welcome-products-section .card-img-wrapper img {
    height: 160px;
  }

  .container {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* Premium Mobile Navigation */
.header-section .menu-section {
  flex-direction: column;
  align-items: stretch;
}

@media (max-width: 991px) {
  .header-section .logo {
    flex-basis: 100% !important;
    margin-bottom: 15px;
  }

  .header-section > .wp-block-column:last-child {
    flex-basis: 100% !important;
  }

  .header-section .topbar-section {
    flex-wrap: wrap;
    gap: 15px;
  }

  .header-section .topbar-section .wp-block-column {
    flex-basis: calc(50% - 7.5px) !important;
  }

  .header-section .menu-section {
    flex-wrap: wrap;
  }

  .header-section .menu-section .wp-block-column {
    flex-basis: 100% !important;
  }

  .header-section .menu-section [style*="flex-basis:75%"] {
    flex-basis: 100% !important;
  }

  .header-section .menu-section [style*="flex-basis:20%"] {
    flex-basis: 100% !important;
  }
}

@media (max-width: 768px) {
  .topbar-section .contact {
    text-align: center;
    padding: 8px 0;
  }

  .topbar-section .contact p {
    font-size: 13px;
    margin: 5px 0;
  }

  .wp-block-navigation {
    flex-wrap: wrap !important;
    gap: 0 !important;
  }

  .wp-block-navigation a {
    display: block;
    padding: 16px 20px !important;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    font-size: 15px;
    transition: all 0.3s ease;
  }

  .wp-block-navigation a:hover {
    background: rgba(240, 193, 65, 0.15);
    padding-left: 30px !important;
    color: #f0c541;
  }

  .header-section .wp-block-social-links {
    justify-content: center !important;
    gap: 20px;
    padding: 15px 0;
  }

  .header-section .wp-block-social-links li {
    margin: 0;
  }
}

@media (max-width: 576px) {
  .topbar-section .contact {
    flex-basis: 100% !important;
  }

  .topbar-section .contact p {
    font-size: 12px;
    margin: 3px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .wp-block-navigation a {
    padding: 14px 15px !important;
    font-size: 14px;
  }

  .site-title {
    font-size: 18px !important;
  }
}

/* Enhanced Mobile Product Cards */
@media (max-width: 768px) {
  .featured-car-section .car-box,
  .gallery-section .gallery-card {
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  }

  .featured-car-section .car-box:hover,
  .gallery-section .gallery-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(0,0,0,0.1);
  }

  .featured-car-section .car-box a img,
  .gallery-section .gallery-card img {
    height: 200px;
  }
}

/* Premium Footer on Mobile */
@media (max-width: 768px) {
  .footer-section .wp-block-columns {
    flex-wrap: wrap;
  }

  .footer-box {
    flex-basis: 100% !important;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

  .footer-box:last-child {
    border-bottom: none;
  }

  .footer-menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 8px;
  }

  .footer-menu li a {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.3s ease;
    font-size: 14px;
  }

  .footer-menu li a:hover {
    background: rgba(240, 193, 65, 0.2);
    color: #f0c541;
  }
}

/* Full-screen Mobile Section Improvements */
@media (max-width: 768px) {
  section {
    padding: 40px 0;
  }

  .hero-carousel,
  .home-banner-section {
    padding: 0;
  }

  .search-section {
    padding: 30px 0;
  }

  .search-form {
    flex-wrap: wrap;
  }

  .search-form input,
  .search-form button {
    flex: 1 1 100% !important;
    margin: 5px 0;
  }
}

/* Header Action Button Styling */
.search-toggle,
.cart-link {
  position: relative;
  transition: all 0.3s ease;
}

.search-toggle:hover,
.cart-link:hover {
  background-color: rgba(240, 193, 65, 0.2) !important;
  color: #f0c541 !important;
  transform: scale(1.08);
}

.cart-link .cart-count {
  animation: pulse 0.3s ease;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* Navigation Link Hover Effects */
.wp-block-navigation a {
  position: relative;
  transition: all 0.3s ease;
  border-bottom: 3px solid transparent;
}

.wp-block-navigation a:hover {
  color: #f0c541;
  border-bottom-color: #f0c541;
}

/* Footer Links Enhanced */
.footer-menu li a {
  position: relative;
  transition: all 0.3s ease;
}

.footer-menu li a:before {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 2px;
  background: #f0c541;
  transition: width 0.3s ease;
}

.footer-menu li a:hover:before {
  width: 100%;
}

/* Button Styling Enhancements */
.wp-block-button__link,
.btn,
button {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.wp-block-button__link:hover,
.btn:hover,
button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* Browse Inventory Button */
.wp-block-button.is-style-outline .wp-block-button__link {
  border: 2px solid;
  transition: all 0.4s ease;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: #f0c541 !important;
  color: #23393D !important;
  border-color: #f0c541 !important;
}

/* All Links Global Hover Effect */
a {
  transition: all 0.3s ease;
}

a:focus-visible {
  outline: 3px solid rgba(240, 193, 65, 0.5);
  outline-offset: 2px;
}

/* Accessibility: Skip to content link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #f0c541;
  color: #23393D;
  padding: 8px;
  text-decoration: none;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

/* Ensure smooth scrolling and performance */
html {
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
}

/* Optimize for performance */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Ensure links are properly styled */
a {
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover,
a:focus {
  text-decoration: underline;
}

/* Focus styles for accessibility */
button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid #f0c541;
  outline-offset: 2px;
}

/* Product card styling */
body.woocommerce ul.products li.product {
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    padding: 15px !important;
    margin: 15px !important;
    background: #fff !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
}

/* Add padding around main content */
.woocommerce-page #content,
.woocommerce-page .site-main {
    padding: 20px;
}