/*
 Theme Name: Divi Theme Child
 Template: Divi
 Description: Child theme for the Divi theme
 Author: Your Name
 Version: 1.0
*/

/* ==========================================================================
   Table of Contents:
   
   1. Header & Navigation
   2. Layout & Structure
   3. WooCommerce General
   4. WooCommerce Cart Page
   5. Product Page Customizations
   6. Custom Components
   7. Responsive Styles
   ========================================================================== */

/* ==========================================================================
   1. Header & Navigation
   ========================================================================== */

/* Header Container */
.fixed-header .et_pb_row {
    display: flex;
    align-items: center; /* Centers vertically */
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: 5px 20px; /* Adds some spacing */
}

.fixed-header .et_pb_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    min-width: 150px; /* Keeps button from shrinking too much */
    font-size: 14px;
    padding: 8px 20px; /* Adds some padding */
    line-height: 1; /* Fixes vertical alignment */
}

@media (max-width: 768px) {
    .fixed-header .et_pb_row {
        padding: 8px 10px !important; /* Less space on mobile */
    }
    .fixed-header .et_pb_button {
        font-size: 12px !important; /* Smaller text */
        padding: 5px 12px !important; /* Less padding */
        min-width: 120px !important; /* Prevents excessive shrinking */
    }
}

/* Global fix for all pages */
.et_pb_row:not(.fixed-header .et_pb_row) {
    width: 90% !important;
    max-width: 90% !important;
    margin: 0 auto !important;
}

/* EXCEPTION: Force the header to be full-width globally */
.fixed-header {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    background-color: #000000 !important;
}

.fixed-header .et_pb_row {
    width: 100vw !important;
    max-width: none !important; /* Removes any max-width restrictions */
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important; /* Ensures no auto margins */
    padding-left: 20px !important; /* Keep padding for content */
    padding-right: 20px !important;
    position: relative !important;
}

/* Override any parent container constraints */
body .fixed-header,
html .fixed-header,
#page-container .fixed-header {
    width: 100vw !important;
    max-width: 100vw !important;
}

/* Fix any section containers */
.fixed-header .et_pb_section {
    width: 100vw !important;
    max-width: 100vw !important;
}

/* Ensure overflow is visible */
html, body {
    overflow-x: hidden;
}

/* Divi boxed layout fix */
.et_boxed_layout #page-container, 
.et_boxed_layout.et_pb_pagebuilder_layout.single #page-container .et_pb_row {
    max-width: 100% !important;
}

.custom-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: black;
}

.header-container {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

.left, .center, .right {
    flex: 1;
    display: flex;
    justify-content: center;
}

/* Navigation Elements */
.mobile_menu_bar:before {
    color: #ffffff;
}

body.free-vertical-navigation-body-tag .free-hamburger-icon .mobile_menu_bar:before {
    font-size: 50px;
    top: 0 !important;
}

.mobile_menu_bar:after, 
.et_toggle_slide_menu:after {
    color: #ffffff !important;
}

/* Hide Cart Info */
.et-cart-info {
    display: none;
}

/* Menu Toggle Button */
.menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
}

.menu-icon {
    width: 30px;
    height: 2px;
    background: white;
    position: relative;
}

.menu-icon::before, 
.menu-icon::after {
    content: '';
    width: 30px;
    height: 2px;
    background: white;
    position: absolute;
    left: 0;
    transition: transform 0.3s;
}

.menu-icon::before {
    top: -8px;
}

.menu-icon::after {
    top: 8px;
}

/* ==========================================================================
   2. Layout & Structure
   ========================================================================== */

/* Logo Sizing */
.logo img {
    max-height: 50px;
}

/* Container Styles */
.hp-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

/* ==========================================================================
   3. WooCommerce General
   ========================================================================== */

/* Price Display */
.price .woocommerce-variation-price {
    font-size: 38px;
    font-style: normal;
    font-weight: 800;
}

.single_variation .woocommerce-variation-price {
    display: none;
}

/* Notice Styling */
.woocommerce-notices-wrapper, 
.woocommerce-message {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    background-color: #000000 !important;
    color: #ffffff !important;
}

.woocommerce-info, 
.woocommerce-message, 
.woocommerce-error {
    border-color: #ffffff !important;
    color: #ffffff !important;
}

/* ==========================================================================
   4. WooCommerce Cart Page
   ========================================================================== */

/* Cart Page Background */
body.woocommerce-cart,
body.woocommerce-cart .site {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Cart Elements Background */
body.woocommerce-cart .entry-content,
body.woocommerce-cart .cart-collaterals,
body.woocommerce-cart table.shop_table,
body.woocommerce-cart .cart_totals,
body.woocommerce-cart .cross-sells,
body.woocommerce-cart .woocommerce-info,
body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-error {
    background-color: #000000 !important;
}

/* Cart Text Colors */
body.woocommerce-cart .entry-title,
body.woocommerce-cart table.shop_table th,
body.woocommerce-cart table.shop_table td,
body.woocommerce-cart .cart_totals table th,
body.woocommerce-cart .cart_totals table td,
body.woocommerce-cart .cart_totals .order-total .amount,
body.woocommerce-cart .cart_totals .order-total {
    color: #ffffff !important;
}

/* Cart Table Borders */
body.woocommerce-cart table.shop_table,
body.woocommerce-cart table.shop_table th,
body.woocommerce-cart table.shop_table td,
body.woocommerce-cart .cart_totals table,
body.woocommerce-cart .cart_totals table th,
body.woocommerce-cart .cart_totals table td {
    border-color: #ffffff !important;
}

/* Cart Buttons */
body.woocommerce-cart .button,
body.woocommerce-cart input[type="submit"],
body.woocommerce-cart .checkout-button {
    background-color: transparent !important;
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
}

body.woocommerce-cart .button:hover,
body.woocommerce-cart input[type="submit"]:hover,
body.woocommerce-cart .checkout-button:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* Cart Input Fields */
body.woocommerce-cart input[type="text"],
body.woocommerce-cart input[type="number"],
body.woocommerce-cart input[type="email"] {
    color: #ffffff !important;
    background-color: #333333 !important;
    border: 1px solid #ffffff !important;
}

body.woocommerce-cart input::placeholder {
    color: #cccccc !important;
}

/* Cart Links */
body.woocommerce-cart table.shop_table td.product-name a {
    text-decoration: underline !important;
}

body.woocommerce-cart a {
    text-decoration: none !important;
}

body.woocommerce-cart a.remove {
    text-decoration: none !important;
    color: #ff0000 !important;
}

/* Hide Product Thumbnails */
body.woocommerce-cart table.shop_table .product-thumbnail {
    display: none !important;
}

/* ==========================================================================
   5. Product Page Customizations
   ========================================================================== */

/* Tabs Styling */
.et_pb_tabs_controls {
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid #fff;
}

.et_pb_tabs_controls li {
    flex: 1;
    text-align: center;
    background-color: transparent;
    padding: 10px;
    box-sizing: border-box;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}

.et_pb_tabs_controls li a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 10px 0;
    color: #fff;
}

.et_pb_tabs_controls li.et_pb_tab_active {
    background-color: transparent;
    border-bottom: 2px solid #fff;
}

.et_pb_all_tabs, 
.et_pb_tab_content {
    border: none;
    overflow: hidden;
    color: #fff;
    background: transparent;
}

.et_pb_tab_content {
    padding: 20px;
    margin-top: -1px;
}

/* Product Stage Selector */
#pa_stage {
    background-color: black;
    color: white !important;
    border-color: white !important;
    border-width: 1px;
}

.variations {
    margin-top: 20px;
}

/* Add to Cart Button */
.single_add_to_cart_button {
    background-color: transparent;
    border: 2px solid #fff;
    color: #fff;
    padding: 10px 20px;
    width: 100%;
    box-sizing: border-box;
}

/* Affirm Message */
.affirm-as-low-as {
    color: #fff;
}

.single-product .et_pb_row:not(.fixed-header .et_pb_row) {
    width: 90% !important;
    max-width: 90% !important;
    margin: 0 auto !important;
}

/* EXCEPTION: Force the header to be full-width */
.single-product .fixed-header {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
}

.single-product .fixed-header .et_pb_row {
    width: 100vw !important;
    max-width: none !important; /* Override any theme max-width */
    margin: 0 !important; /* Ensures no auto margins */
    padding-left: 20px !important;
    padding-right: 20px !important;
    position: relative !important;
}

/* ==========================================================================
   6. Custom Components
   ========================================================================== */

/* Horsepower & Torque Sections */
.hp-section, 
.tq-section {
    text-align: left !important;
    margin-bottom: 20px;
    color: white;
    line-height: 0.5;
}

.hp-section, 
.tq-section {
    width: 100%;
    max-width: 800px; /* Give more room for the bars */
}

.hp-info, 
.tq-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    margin-top: 20px;
}

.hp-value, 
.tq-value {
    font-size: 36px;
    font-weight: bold;
}

#factoryHpValue, 
#factoryTqValue, 
#tunedHpValue, 
#tunedTqValue {
    font-size: 24px;
    font-weight: bold;
}

/* Tune My Car Button */
.tune-my-car-btn,
.tune-my-car-link {
    border: 2px solid white;
    padding: 10px 20px;
    color: white;
    text-decoration: none;
    transition: background 0.3s, color 0.3s;
}

.tune-my-car-btn:hover {
    background: white;
    color: black;
}

/* ==========================================================================
   7. Responsive Styles
   ========================================================================== */

@media only screen and (max-width: 980px) {
    body header img#logo {
        width: 90px !important;
        height: 90px !important;
    }
    
    .et_header_style_left #logo {
        width: 90px !important;
        height: 90px !important;
    }
    
    .et_header_style_left .logo_container {
        height: 120px !important;
    }
}

/* Clearfix utility */
.clearfix::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
    height: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Add top margin to main content to prevent header overlap */
#main-content, 
.et_pb_section:not(.fixed-header):first-of-type {
    padding-top: 80px !important; /* Adjust this value based on your header height */
}

/* If you have a slider or hero section that should be full height and directly below header */
.et_pb_section.et_pb_fullwidth_section:first-child {
    padding-top: 80px !important; /* Match the padding above */
}

/* Dropdown Centering Fix */
.dropdown-menu {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 400px !important; /* Fixed width for desktop */
  max-width: 90% !important; /* Responsive for mobile */
  padding: 30px !important; /* Add padding around content */
  background-color: rgba(0, 0, 0, 0.95) !important;
  border-radius: 6px !important; /* Optional: adds rounded corners */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5) !important; /* Optional: adds depth */
}

/* Center content inside dropdown */
.car-search-form {
  margin: 0 auto !important;
  max-width: 100% !important;
}

/* Set same padding for consistency */
.car-search {
  padding: 0 !important;
}

/* Make tune-it button full width */
button#tune-it {
  width: 100% !important;
  margin-top: 30px !important;
}

/* Optional: Improve overlay appearance */
.overlay.active {
  background-color: rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(3px) !important; /* Creates a slight blur effect behind the modal */
}

/* Ensure proper vertical spacing between dropdown elements */
.select-group {
  margin-bottom: 20px !important;
}

/* Make sure the content is properly centered */
.car-search-form h2 {
  text-align: center !important;
  margin-bottom: 30px !important;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .dropdown-menu {
    width: 90% !important;
    padding: 20px !important;
  }

/* Exact targeting for hamburger menu styling */

/* Target the specific menu module - add !important to override inline styles */
.et_pb_menu_0_tb_header,
.et_pb_menu,
.et_pb_menu__wrap {
    background-color: #000000 !important;
}

/* Target the hamburger icon */
.et_mobile_nav_menu .mobile_menu_bar:before {
    color: #ffffff !important;
    font-size: 32px !important;
}

/* Target the dropdown container */
.et_mobile_menu {
    background-color: #000000 !important;
    border-top: 3px solid #333333 !important;
    padding: 5% !important;
}

/* Target menu items in dropdown */
.et_mobile_menu li a {
    color: #ffffff !important;
    font-size: 16px !important;
    padding: 12px 5% !important;
    border-bottom: 1px solid #333333 !important;
    transition: all 0.2s ease !important;
}

/* Fix menu item hover */
.et_mobile_menu li a:hover {
    background-color: #333333 !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Style for phone link */
.et_mobile_menu li.et_pb_menu_page_id-465 a,
.et_mobile_menu li a[href^="tel:"] {
    font-weight: bold !important;
}

/* Target the cart icon button */
.et_pb_menu__icon.et_pb_menu__icon--cart,
.et_pb_menu_icon.et_pb_menu__cart-button {
    color: #ffffff !important;
}

/* Additional fixes for menu elements */
.et_pb_module.et_pb_menu,
.et_pb_menu_inner_container,
.et_pb_menu__wrap,
div.et_pb_menu_wrap {
    background-color: transparent !important;
}

/* Force white color for all navigation elements */
.et_pb_menu .et_pb_menu__wrap * {
    color: #ffffff !important;
}

/* Address any z-index issues */
.et_mobile_menu {
    z-index: 9999 !important;
}

/* Fix cart icon if present */
.et_pb_menu__icon.et_pb_menu__icon--cart:before,
.et_pb_menu__cart-button:before {
    color: #ffffff !important;
}

/* Targeting the menu cart button specifically */
.et_pb_menu__icon.et_pb_menu_icon_with_count,
.et_pb_menu_cart-button {
    color: #ffffff !important;
}

/* Target any count indicators */
.et_pb_menu__icon_with_count span {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* Override any inline styles with !important */
.et_mobile_nav_menu {
    display: block !important;
}

.et_pb_menu__menu {
    display: none !important;
}

.et_pb_menu__wrap {
    justify-content: flex-end !important;
}

/* Make sure cart icon and hamburger menu are aligned */
.et_pb_menu__wrap {
    align-items: center !important;
}

/* Fix hamburger menu position for better alignment */
.mobile_menu_bar {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Add this to your child theme's style.css file */

/* Turn Divi's mobile menu into a right-side drawer */
.et_mobile_menu {
    position: fixed !important;
    top: 0 !important;
    right: -320px !important; /* Start off-screen */
    left: auto !important;
    width: 320px !important;
    height: 100vh !important;
    transition: right 0.3s ease !important;
    overflow-y: auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 30px 20px !important;
    z-index: 999999 !important;
    background-color: #000000 !important;
    border: none !important;
}

/* When menu is opened */
.mobile_nav.opened .et_mobile_menu {
    right: 0 !important;
}

/* Overlay */
.et_mobile_menu:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.mobile_nav.opened .et_mobile_menu:before {
    opacity: 1;
    pointer-events: auto;
}

/* Style menu items */
.et_mobile_menu li a {
    color: #ffffff !important;
    opacity: 1 !important;
    padding: 15px 0 !important;
    font-size: 18px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Add a close button */
.et_mobile_menu:after {
    content: "×";
    position: absolute;
    top: 10px;
    right: 10px;
    color: #ffffff;
    font-size: 30px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    z-index: 999999;
}

/* Prevent body scrolling when menu is open */
body.et_mobile_menu_active {
    overflow: hidden !important;
}

/* Remove any transitions Divi might apply */
.et_slide_in_menu_container {
    transition: none !important;
}

/* 
 * Dark Theme for WooCommerce Checkout Page - Higher Specificity Version
 */

/* Higher specificity selectors with !important flags */
html body.woocommerce-checkout,
html body.woocommerce-checkout #main-content,
html body.woocommerce-checkout #et-main-area,
html body.woocommerce-checkout #page-container,
html body.woocommerce-checkout .container,
html body.woocommerce-checkout #content-area,
html body.woocommerce-checkout #left-area,
html body.woocommerce-checkout article {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Checkout Page Title */
html body.woocommerce-checkout h1.entry-title.main_title {
    color: #ffffff !important;
}

/* Form Field Labels */
html body.woocommerce-checkout label {
    color: #ffffff !important;
}

/* Form Fields with higher specificity */
html body.woocommerce-checkout input[type="text"],
html body.woocommerce-checkout input[type="email"],
html body.woocommerce-checkout input[type="tel"],
html body.woocommerce-checkout input[type="password"],
html body.woocommerce-checkout textarea,
html body.woocommerce-checkout .select2-container--default .select2-selection--single,
html body.woocommerce-checkout .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: #333333 !important;
    color: #ffffff !important;
    border: 1px solid #555555 !important;
}

/* Placeholder Text */
html body.woocommerce-checkout input::placeholder,
html body.woocommerce-checkout textarea::placeholder {
    color: #aaaaaa !important;
}

/* Select2 Dropdown (Country/State fields) */
html body.woocommerce-checkout .select2-container--default .select2-selection--single {
    background-color: #333333 !important;
    border: 1px solid #555555 !important;
}

html body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #ffffff !important;
}

/* Select2 Dropdown Options */
.select2-dropdown {
    background-color: #333333 !important;
    border: 1px solid #555555 !important;
}

.select2-container--default .select2-results__option {
    color: #ffffff !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #555555 !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #473aff !important;
    color: #ffffff !important;
}

/* Checkout Tables and Borders */
html body.woocommerce-checkout table.shop_table,
html body.woocommerce-checkout table.shop_table th,
html body.woocommerce-checkout table.shop_table td {
    background-color: transparent !important;
    color: #ffffff !important;
    border-color: #555555 !important;
}

/* Order Summary Table */
html body.woocommerce-checkout .woocommerce-checkout-review-order-table {
    background-color: #111111 !important;
}

html body.woocommerce-checkout .woocommerce-checkout-review-order-table th,
html body.woocommerce-checkout .woocommerce-checkout-review-order-table td {
    color: #ffffff !important;
}

/* Section Titles */
html body.woocommerce-checkout h3 {
    color: #ffffff !important;
    border-bottom: 1px solid #555555 !important;
    padding-bottom: 10px !important;
}

/* Payment Methods */
html body.woocommerce-checkout #payment {
    background-color: #111111 !important;
    color: #ffffff !important;
    border-radius: 5px !important;
}

html body.woocommerce-checkout #payment div.payment_box {
    background-color: #222222 !important;
    color: #ffffff !important;
}

html body.woocommerce-checkout #payment div.payment_box::before {
    border-bottom-color: #222222 !important;
}

html body.woocommerce-checkout #payment ul.payment_methods {
    border-bottom: 1px solid #555555 !important;
}

html body.woocommerce-checkout #payment .payment_method_affirm img {
    background-color: #ffffff !important;
    padding: 5px !important;
    border-radius: 4px !important;
}

/* Primary Button - Place Order */
html body.woocommerce-checkout #place_order {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    transition: all 0.3s ease !important;
}

html body.woocommerce-checkout #place_order:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* Secondary Buttons - Apply Coupon */
html body.woocommerce-checkout .button:not(#place_order) {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    transition: all 0.3s ease !important;
}

html body.woocommerce-checkout .button:not(#place_order):hover {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* Coupon Form Toggle */
html body.woocommerce-checkout .woocommerce-info {
    background-color: #111111 !important;
    color: #ffffff !important;
    border-top-color: #473aff !important;
}

html body.woocommerce-checkout .woocommerce-info::before {
    color: #473aff !important;
}

html body.woocommerce-checkout .showcoupon {
    color: #473aff !important;
}

html body.woocommerce-checkout .showcoupon:hover {
    color: #ffffff !important;
}

/* Pricing and Amounts */
html body.woocommerce-checkout .woocommerce-Price-amount {
    color: #ffffff !important;
}

/* Required Field Indicator */
html body.woocommerce-checkout .required {
    color: #ff6b6b !important;
}

/* Error Messages */
html body.woocommerce-checkout .woocommerce-error {
    background-color: #420000 !important;
    color: #ffffff !important;
    border-color: #ff0000 !important;
}

/* Success Messages */
html body.woocommerce-checkout .woocommerce-message {
    background-color: #004200 !important;
    color: #ffffff !important;
    border-color: #00ff00 !important;
}

/* Terms and Conditions Checkbox Text */
html body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
    color: #cccccc !important;
}

html body.woocommerce-checkout .woocommerce-privacy-policy-link {
    color: #473aff !important;
}

html body.woocommerce-checkout .woocommerce-privacy-policy-link:hover {
    color: #ffffff !important;
}

/* Target all text in the checkout page with higher specificity */
html body.woocommerce-checkout p, 
html body.woocommerce-checkout span, 
html body.woocommerce-checkout label, 
html body.woocommerce-checkout li, 
html body.woocommerce-checkout td, 
html body.woocommerce-checkout th, 
html body.woocommerce-checkout input, 
html body.woocommerce-checkout select, 
html body.woocommerce-checkout textarea, 
html body.woocommerce-checkout a:not(.button) {
    color: #ffffff !important;
}

/* Make the background deeply black to override any other styles */
html body.woocommerce-checkout::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    z-index: -1;
}

/* Add this to your style.css file */

/* Fix white gap in mobile view - targeted approach */
@media only screen and (max-width: 768px) {
    /* Target only the header and hero section connection */
    .et_pb_section:first-of-type,
    #main-content > .et_pb_section:first-child {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    /* Reset any header spacing that might cause gaps */
    .fixed-header,
    .et-fixed-header {
        margin-bottom: 0 !important;
    }
    
    /* Target the specific gap between header and first section */
    .et_pb_section.et_pb_fullwidth_section:first-child {
        padding-top: 0 !important;
    }
    
    /* Remove the general padding on main content that's in your current CSS */
    #main-content {
        padding-top: 0 !important; /* Only for the top section */
    }
    }
}

/* Mobile-Only Responsive Header Styles */

/* Only apply these styles on mobile devices */
@media only screen and (max-width: 980px) {
  /* Target the fixed header row */
  .et_pb_row_0_tb_header.fixed-header,
  .et_pb_row.et_pb_row_0_tb_header.fixed-header,
  div.et_pb_row.et_pb_row_0_tb_header.fixed-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 10px 15px !important;
    background-color: #000000 !important;
    z-index: 99999 !important;
  }

  /* Target the columns - only on mobile */
  body .et_pb_row_0_tb_header .et_pb_column,
  .et_pb_row_0_tb_header .et_pb_column.et_pb_column_1_3 {
    margin-bottom: 0 !important;
    width: auto !important;
    margin-right: 15px !important;
  }

  /* Last column needs no right margin */
  body .et_pb_row_0_tb_header .et_pb_column:last-child,
  .et_pb_row_0_tb_header .et_pb_column.et_pb_column_1_3:last-child {
    margin-right: 0 !important;
  }

  /* Tune My Car Button - only on mobile */
  body .et_pb_button_0_tb_header_wrapper .et_pb_button_0_tb_header,
  .et_pb_button_module_wrapper .et_pb_button_0_tb_header,
  a.et_pb_button.et_pb_button_0_tb_header,
  a#dropdown-toggle.et_pb_button.et_pb_button_0_tb_header {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    border: 2px solid white !important;
    color: white !important;
    background-color: transparent !important;
    transition: background 0.3s, color 0.3s !important;
    font-size: 14px !important;
    padding: 8px 20px !important;
    min-width: 150px !important;
    text-decoration: none !important;
    line-height: 1.2em !important;
  }
}

/* Even smaller screens */
@media only screen and (max-width: 767px) {
  /* Smaller header padding on small mobile */
  body .et_pb_row_0_tb_header.fixed-header,
  div.et_pb_row.et_pb_row_0_tb_header.fixed-header {
    padding: 8px 10px !important;
  }
  
  /* Add gap between columns on small mobile */
  body .et_pb_row_0_tb_header .et_pb_column,
  .et_pb_row_0_tb_header .et_pb_column.et_pb_column_1_3 {
    margin-right: 10px !important;
  }
  
  /* Reduce button size on small mobile */
  body .et_pb_button_0_tb_header_wrapper .et_pb_button_0_tb_header,
  a.et_pb_button.et_pb_button_0_tb_header,
  a#dropdown-toggle.et_pb_button.et_pb_button_0_tb_header {
    font-size: 12px !important;
    padding: 6px 12px !important;
    min-width: 120px !important;
    border-width: 2px !important;
  }
  
  /* Scale down logo on small mobile */
  body .et_pb_image_0_tb_header .et_pb_image_wrap img,
  .et_pb_image_0_tb_header .et_pb_image_wrap img {
    max-height: 40px !important;
    width: auto !important;
  }
}

/* Extra small screens - iPhone SE, etc. */
@media only screen and (max-width: 374px) {
  /* Even smaller button with tighter text */
  body .et_pb_button_0_tb_header_wrapper .et_pb_button_0_tb_header,
  a.et_pb_button.et_pb_button_0_tb_header,
  a#dropdown-toggle.et_pb_button.et_pb_button_0_tb_header {
    font-size: 11px !important;
    padding: 5px 8px !important;
    min-width: 100px !important;
    border-width: 1px !important;
  }
  
  /* Scale down logo further */
  body .et_pb_image_0_tb_header .et_pb_image_wrap img,
  .et_pb_image_0_tb_header .et_pb_image_wrap img {
    max-height: 35px !important;
    width: auto !important;
  }
}

/* For iPhone 14 Pro Max and similar phones */
@media only screen and (min-width: 390px) and (max-width: 430px) {
  /* Specific adjustments for your target device */
  body .et_pb_row_0_tb_header.fixed-header,
  div.et_pb_row.et_pb_row_0_tb_header.fixed-header {
    padding: 8px 12px !important;
  }
  
  body .et_pb_button_0_tb_header_wrapper .et_pb_button_0_tb_header,
  a.et_pb_button.et_pb_button_0_tb_header,
  a#dropdown-toggle.et_pb_button.et_pb_button_0_tb_header {
    font-size: 12px !important;
    padding: 7px 14px !important;
    min-width: 110px !important;
  }
  
  /* Logo size explicitly for iPhone 14 Pro Max */
  body .et_pb_image_0_tb_header .et_pb_image_wrap img,
  .et_pb_image_0_tb_header .et_pb_image_wrap img {
    max-height: 45px !important;
    width: auto !important;
  }
}

/* Final Mobile-Only Header Spacing Adjustments */

/* For all mobile devices */
@media only screen and (max-width: 980px) {
  /* Create better column separation by adding right margin */
  .et_pb_row_0_tb_header .et_pb_column_0_tb_header,
  .et_pb_row_0_tb_header .et_pb_column_1_tb_header {
    margin-right: 20px !important;
  }
  
  /* Force the header row to use flex display */
  .et_pb_row_0_tb_header.fixed-header {
    display: flex !important;
    align-items: center !important;
  }
  
  /* Ensure columns don't collapse */
  .et_pb_row_0_tb_header .et_pb_column {
    width: auto !important;
    margin-bottom: 0 !important;
  }
}

/* iPhone 14 Pro Max and similar sized devices */
@media only screen and (min-width: 390px) and (max-width: 430px) {
  /* Apply specific margins for this size range */
  .et_pb_row_0_tb_header .et_pb_column_0_tb_header,
  .et_pb_row_0_tb_header .et_pb_column_1_tb_header {
    margin-right: 15px !important;
  }
}

/* Smaller mobile devices */
@media only screen and (max-width: 389px) {
  /* Tighter margins for smaller screens */
  .et_pb_row_0_tb_header .et_pb_column_0_tb_header,
  .et_pb_row_0_tb_header .et_pb_column_1_tb_header {
    margin-right: 10px !important;
  }
}

/* Swap Logo and Button Positions on Mobile Only */

@media only screen and (max-width: 980px) {
  /* Change the order of columns on mobile */
  .et_pb_row_0_tb_header.fixed-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  
  /* Change column order with flex order property */
  .et_pb_row_0_tb_header .et_pb_column_0_tb_header {
    order: 2 !important; /* Move button to middle */
    margin-right: 0 !important; /* Reset margin */
  }
  
  .et_pb_row_0_tb_header .et_pb_column_1_tb_header {
    order: 1 !important; /* Move logo to left */
    margin-right: 0 !important; /* Reset margin */
  }
  
  .et_pb_row_0_tb_header .et_pb_column_2_tb_header {
    order: 3 !important; /* Keep menu on right */
  }
  
  /* Ensure all columns have appropriate width */
  .et_pb_row_0_tb_header .et_pb_column {
    width: auto !important;
    margin-bottom: 0 !important;
  }
  
  /* Add specific spacing between elements */
  .et_pb_row_0_tb_header .et_pb_column_1_tb_header {
    margin-right: 0 !important; /* No right margin needed for left logo */
  }
  
  /* Adjust logo size for the new position */
  .et_pb_image_0_tb_header .et_pb_image_wrap img {
    max-height: 40px !important;
    width: auto !important;
  }
  
  /* Center the button in its column */
  .et_pb_column_0_tb_header .et_pb_button_module_wrapper {
    text-align: center !important;
  }

  /* Ensure even spacing with flexbox */
  .et_pb_row_0_tb_header.fixed-header {
    justify-content: space-between !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* Additional responsiveness for smaller devices */
@media only screen and (max-width: 480px) {
  /* Make the button more compact on very small devices */
  .et_pb_button_0_tb_header {
    font-size: 12px !important;
    padding: 6px 12px !important;
    min-width: 110px !important;
  }
  
  /* Make logo slightly smaller on very small devices */
  .et_pb_image_0_tb_header .et_pb_image_wrap img {
    max-height: 35px !important;
  }
  
  /* Tighter padding for the header row */
  .et_pb_row_0_tb_header.fixed-header {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* Refined Mobile Layout - Improved Logo Size and Button Centering */

@media only screen and (max-width: 980px) {
  /* Change the order of columns on mobile */
  .et_pb_row_0_tb_header.fixed-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  
  /* Change column order with flex order property */
  .et_pb_row_0_tb_header .et_pb_column_0_tb_header {
    order: 2 !important; /* Button in middle */
    margin-right: 0 !important;
    text-align: center !important;
    flex: 1 !important; /* Take up available space */
    display: flex !important;
    justify-content: center !important; /* Center button horizontally */
  }
  
  .et_pb_row_0_tb_header .et_pb_column_1_tb_header {
    order: 1 !important; /* Logo on left */
    margin-right: 0 !important;
    flex: 0 0 auto !important; /* Don't grow, keep natural size */
  }
  
  .et_pb_row_0_tb_header .et_pb_column_2_tb_header {
    order: 3 !important; /* Menu on right */
    flex: 0 0 auto !important; /* Don't grow, keep natural size */
  }
  
  /* Ensure all columns have appropriate width */
  .et_pb_row_0_tb_header .et_pb_column {
    width: auto !important;
    margin-bottom: 0 !important;
  }
  
  /* Increase logo size */
  .et_pb_image_0_tb_header .et_pb_image_wrap img {
    max-height: 45px !important; /* Larger logo size */
    width: auto !important;
  }
  
  /* Center the button in its column */
  .et_pb_column_0_tb_header .et_pb_button_module_wrapper {
    text-align: center !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }
  
  /* Make sure button is truly centered */
  .et_pb_column_0_tb_header .et_pb_button {
    margin: 0 auto !important;
  }

  /* Add proper padding to header */
  .et_pb_row_0_tb_header.fixed-header {
    padding: 10px !important;
  }
}

/* Additional responsiveness for medium-sized mobile */
@media only screen and (min-width: 480px) and (max-width: 767px) {
  /* Larger logo for medium devices */
  .et_pb_image_0_tb_header .et_pb_image_wrap img {
    max-height: 50px !important;
  }
}

/* Additional responsiveness for smaller devices */
@media only screen and (max-width: 479px) {
  /* Ensure the logo isn't too small */
  .et_pb_image_0_tb_header .et_pb_image_wrap img {
    max-height: 45px !important; /* Maintain decent size */
  }
  
  /* Make button slightly smaller on tiny screens */
  .et_pb_button_0_tb_header {
    font-size: 12px !important;
    padding: 6px 12px !important;
  }
}

/* Final fix for mobile header layout */
@media only screen and (max-width: 980px) {
  /* Set up the flexbox container properly */
  .et_pb_row_0_tb_header.fixed-header {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 15px !important;
  }
  
  /* Set up the three columns with fixed widths for better balance */
  .et_pb_row_0_tb_header .et_pb_column {
    margin-bottom: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
  }
  
  /* Left column (Logo) */
  .et_pb_row_0_tb_header .et_pb_column_1_tb_header {
    order: 1 !important;
    width: 25% !important; /* Fixed width */
    flex: 0 0 25% !important;
  }
  
  /* Center column (Button) */
  .et_pb_row_0_tb_header .et_pb_column_0_tb_header {
    order: 2 !important;
    width: 50% !important; /* Fixed width - half of container */
    flex: 0 0 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  
  /* Right column (Menu) */
  .et_pb_row_0_tb_header .et_pb_column_2_tb_header {
    order: 3 !important;
    width: 25% !important; /* Fixed width */
    flex: 0 0 25% !important;
    display: flex !important;
    justify-content: flex-end !important;
  }
  
  /* Ensure the button wrapper is properly centered */
  .et_pb_column_0_tb_header .et_pb_button_module_wrapper {
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
  }
  
  /* Set proper logo size */
  .et_pb_image_0_tb_header .et_pb_image_wrap img {
    max-height: 45px !important;
    width: auto !important;
  }
  
  /* Make sure the menu toggle is on the right */
  .et_pb_menu__wrap {
    justify-content: flex-end !important;
  }
}

/* Adjust for very small screens */
@media only screen and (max-width: 374px) {
  /* Smaller padding on tiny screens */
  .et_pb_row_0_tb_header.fixed-header {
    padding: 8px 10px !important;
  }
  
  /* Slightly smaller logo */
  .et_pb_image_0_tb_header .et_pb_image_wrap img {
    max-height: 40px !important;
  }
  
  /* Smaller button text */
  .et_pb_column_0_tb_header .et_pb_button {
    font-size: 11px !important;
    padding: 6px 10px !important;
    min-width: auto !important;
  }
}

/* Medium-sized mobile devices */
@media only screen and (min-width: 480px) and (max-width: 767px) {
  /* Slightly larger logo for medium screens */
  .et_pb_image_0_tb_header .et_pb_image_wrap img {
    max-height: 48px !important;
  }
}