/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Template: astra
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: Astra is fast, fully customizable & beautiful WordPress theme suitable for blog, personal portfolio, business website and WooCommerce storefront. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with Schema.org code integrated and is Native AMP ready so search engines will love your site. It offers special features and templates so it works perfectly with all page builders like Elementor, Beaver Builder, Visual Composer, SiteOrigin, Divi, etc. Some of the other features: # WooCommerce Ready # Responsive # RTL & Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and WooCommerce ready theme that you can use for building any kind of website!
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 4.7.2
Updated: 2022-12-26 06:20:28

*/

/* HP WHy Us */

        .hp-benefits-section {
            background-color: #f8f9fa;
            padding: 40px 20px;
            border-radius: 25px;
            margin: 40px auto;
            max-width: 1140px;
        }
        
        .hp-benefits-title {
            color: #104170;
            font-size: 26px;
            font-weight: 700;
            text-align: center;
            margin-bottom: 25px;
        }
        
        .hp-benefits-subtitle {
            color: #333;
            text-align: center;
            max-width: 800px;
            margin: 0 auto 30px;
            line-height: 1.5;
        }
        
        .hp-benefits-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 30px;
        }
        
        .hp-benefits-card {
            background-color: white;
            border-radius: 6px;
            padding: 25px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .hp-benefits-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .hp-benefits-item-title {
            color: #104170;
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
        }
        
        .hp-benefits-item-title svg {
            margin-right: 10px;
            flex-shrink: 0;
        }
        
        .hp-benefits-item-description {
            color: #555;
            font-size: 16px;
            line-height: 1.6;
        }
        
        .hp-benefits-cta {
            background-color: #0077be;
            color: white;
            padding: 12px 25px;
            border-radius: 4px;
            font-weight: 600;
            text-decoration: none;
            display: block;
            width: fit-content;
            margin: 35px auto 0;
            text-align: center;
            transition: background-color 0.3s ease;
        }
        
        .hp-benefits-cta:hover {
            background-color: #0959a7;
        }
        
        @media (max-width: 992px) {
            .hp-benefits-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (max-width: 768px) {
            .hp-benefits-grid {
                grid-template-columns: 1fr;
            }
            
            .hp-benefits-card {
                padding: 20px;
            }
        }

/* Homepage Reviews */

.jcm-testimonials-container {
    background-color: rgba(0,95,191,0.07);
    padding: 60px 20px;
    text-align: center;
    margin: 40px 0;
    border-radius:25px;
}

.jcm-testimonials-heading {
    font-size: 36px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}

.jcm-testimonials-subheading {
	width:80%;
	margin: 0 auto;
    font-size: 18px;
    color: #555;
    margin-bottom: 40px;
}

.jcm-testimonials-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.jcm-testimonial-card {
    background-color: white;
    border-radius: 15px;
    padding: 30px 20px;
    width: 300px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.jcm-testimonial-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    margin-top: -50px;
    margin-bottom: 20px;
    border: 4px solid white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.jcm-testimonial-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jcm-testimonial-quote {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 500;
    margin-bottom: 15px;
}

.jcm-testimonial-name {
    font-size: 14px;
    color: #666;
}

.jcm-testimonials-cta {
    margin-top: 40px;
}

.jcm-reviews-button {
    display: inline-block;
    padding: 12px 30px;
    background-color: #f9f9f9;
    font-weight: 600;
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.jcm-reviews-button:hover {
    background-color: #555;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .jcm-testimonials-grid {
        flex-direction: column;
        align-items: center;
    }
    
    .jcm-testimonial-card {
        width: 90%;
        max-width: 350px;
    }
}

/* hp owner */

        .hp-owner-section {
            background-color: #f8f9fa;
            padding: 50px 20px;
            margin: 40px auto;
            max-width: 1140px;
            border-radius: 8px;
        }
        
        .hp-owner-container {
            display: flex;
            flex-direction: row;
            align-items: center;
            max-width: 1000px;
            margin: 0 auto;
            gap: 40px;
        }
        
        .hp-owner-image-container {
            flex: 0 0 200px;
        }
        
        .hp-owner-image {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
            border: 4px solid #0b6ec7;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .hp-owner-content {
            flex: 1;
        }
        
        .hp-owner-title {
            color: #104170;
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 10px;
        }
        
        .hp-owner-subtitle {
            color: #0b6ec7;
            font-weight: 600;
            margin-bottom: 20px;
        }
        
        .hp-owner-quote {
            color: #333;
            line-height: 1.6;
            position: relative;
            padding-left: 20px;
            border-left: 3px solid #0b6ec7;
        }
        
        @media (max-width: 768px) {
            .hp-owner-container {
                flex-direction: column;
                text-align: center;
                gap: 20px;
            }
            
            .hp-owner-image-container {
                flex: 0 0 auto;
            }
            
            .hp-owner-quote {
                padding-left: 0;
                border-left: none;
                padding-top: 20px;
                border-top: 3px solid #0b6ec7;
            }
        }

/* Base layout for 2 columns on mobile */
.column-city-menu {
  display: flex;
  flex-wrap: wrap;
}

.column-city-menu .menu-item {
  width: 50%; /* 2 columns on mobile */
}

@media (min-width: 1025px) {
  .column-city-menu .menu-item {
    width: 20%; /* 5 columns on desktop */
  }
}

/* Base layout for 2 columns on mobile */
.column-city-menu-three {
  display: flex;
  flex-wrap: wrap;
}

  .column-city-menu-four .menu-item {
    width: 25%; /* 4 columns on desktop */
  }

.column-city-menu-three .menu-item {
  width: 50%; /* 2 columns on mobile */
}

/* Desktop: 4 columns */
@media (min-width: 1025px) {
  .column-city-menu-three .menu-item {
    width: 33%; /* 3 columns on desktop */
  }
}

/* Service Area */
    .service-area-section {
        margin: 0 auto;
        padding: 40px 20px;
    }
    .featured-cities {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        margin-bottom: 30px;
    }
    .city-item {
        background-color: #ffffff;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        overflow: hidden;
    }
    .city-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    .city-link {
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #0066cc;
        font-weight: bold;
        padding: 15px 10px;
        height: 100%;
        text-align: center;
        line-height: 1.3;
        font-size: 14px;
    }
    .view-all-container {
        text-align: center;
        margin-top: 20px;
    }
    .view-all-button {
        display: inline-block;
        padding: 12px 24px;
        background-color: #0066cc;
        color: #ffffff;
        text-decoration: none;
        border-radius: 5px;
        font-weight: bold;
        transition: background-color 0.3s ease;
        font-size: 18px;
    }
    .view-all-button:hover {
        background-color: #0052a3;
    }

@media (max-width: 768px) {
    .featured-cities {
        grid-template-columns: repeat(2, 1fr);
    }
}

.important-note {
    background-color: #ffffd9;
    border: 1px solid #e6db55;
    padding: 10px;
    margin-bottom: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}
th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}
th {
    background-color: #f2f2f2;
}

/* Trust images */


.trust-images {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: nowrap;
    padding: 1rem;
    background-color:#f1f4f9;
    border-radius: 8px;
    overflow-x: auto;
}

.trust-image {
    flex: 0 0 auto;
    max-width: 250px;
    width: 18%; /* Approximately 1/5 of the container width */
    min-width: 80px; /* Minimum width for very small screens */
    margin: 0 0.5rem;
}

.trust-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.trust-images::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.trust-images {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* 3 Steps */
.medics-container {
    text-align: center;
    padding: 0 15px;
}

.medics-steps {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin: 3rem auto;
    padding: 0;
    list-style-type: none;
}

.medics-step {
    flex: 1 1 300px;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.medics-icon-circle {
    width: 180px;
    height: 180px;
    background: #f5f5f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    position: relative;
}

.medics-icon-circle img {
    width: 100px;
    height: auto;
}

.medics-step-number {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #0077be;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
}

.medics-step-title {
    color: #333;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.medics-step-description {
    line-height: 1.6;
}

/* City Features */

.jcm-features-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
}

.jcm-features-container p {
    margin-bottom: 0;
}

.jcm-features-content {
    flex: 1;
}

.jcm-features-title {
    color: #000;
    margin-bottom: 1rem;
}

.jcm-features-list {
    list-style-type: none;
	padding-bottom:30px;
    margin: 0;
}

.jcm-section .jcm-features-list {
    margin-left: 0;
}

.jcm-feature-item {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: flex-start;
}

.jcm-feature-checkmark {
    color: #0077be;
    font-size: 1.2rem;
    margin-right: 0.5rem;
    min-width: 1.2rem;
}

.jcm-feature-content {
    flex: 1;
}

.jcm-feature-title {
    font-weight: bold;
    margin-bottom: 0.1rem;
}

.jcm-feature-description {
    margin: 0;
}

/* Media Queries */
@media (max-width: 768px) {
    .jcm-process-container {
        flex-direction: column;
        margin-bottom: 2rem;
    }

    .jcm-step-image {
        width: 120px;
        height: 120px;
    }

    .jcm-features-container {
        flex-direction: column;
    }

    .jcm-features-title {
        text-align: left;
        margin-top: 0;
        margin-bottom: 1rem;
    }

    .jcm-features-content {
        margin-top: 0;
    }
}

/* types of cars on city pages */

.jcm-types-list-columns {
    list-style-type: none;
    padding-top: 20px;
    padding-bottom: 20px;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0 30px;
}

.jcm-section .jcm-types-list-columns {
    margin-left: 0;
}

.jcm-types-item-column {
    margin-bottom: 0.1rem;
    display: flex;
    align-items: flex-start;
    width: calc(33.333% - 20px); /* Adjusted for 3 columns with 30px gap */
}

.jcm-types-checkmark-column {
    color: #0077be;
    font-size: 1.2rem;
    margin-right: 0.5rem;
    min-width: 1.2rem;
    display: flex;
    align-items: center;
}

.jcm-types-content-column {
    flex: 1;
}

.jcm-types-title-column {
    font-weight: bold;
    margin-bottom: 0.1rem;
}

/* Mobile view (single column) */
@media (max-width: 768px) {
    .jcm-types-item-column {
        width: calc(50% - 15px); /* 2 columns with half the 30px gap */
    }
}


/* Image on cities */

.rounded-image {
    border-radius: 50px;
}

/* Recent Purchases */

.recent-sales-container {
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 10px;
}

.sales-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 20px;
  background-color: white;
}

.sale-item {
  background-color: #f9f9f9;
  padding: 12px;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: background-color 0.3s ease;
  width: calc(50% - 10px);
}

.sale-item:hover {
  background-color: #e9e9e9;
}

.price {
  font-weight: bold;
  color: #0077be;
  min-width: 70px;
}

.make-model {
  flex-grow: 1;
  margin: 0 10px;
  font-weight: 500;
}

.location {
  font-style: italic;
  text-align: right;
  min-width: 140px;
}

.location a {
  color: #666;
  text-decoration: none;
  transition: color 0.3s ease;
}

.location a:hover {
  color: #0077be;
  text-decoration: underline;
}

@media (max-width: 768px) {
  .sale-item {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .sale-item {
    padding: 8px;
    font-size: 0.9em;
  }

  .price {
    min-width: auto;
    margin-right: 5px;
  }

  .make-model {
    margin: 0 5px;
  }

  .location {
    min-width: auto;
  }

  .location a {
    font-size: 0.95em;
  }
}

/* Base styling for the container - vertical stack */
.wwwjunkcarmedicscom-related-links {
  display: block; /* Remove grid layout */
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Remove bullets and spacing from list items */
.wwwjunkcarmedicscom-related-links li {
  list-style: none !important;
  margin: 0 0 0px 0 !important; /* Add bottom margin if you want spacing between items */
  padding: 0 !important;
}

/* Testimonial Styles */
.jcmcc-testimonial {
  background-color: white;
  border-radius: 25px;
  padding: 2.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin: 3rem 0;
  display: flex;
  align-items: center;
  position: relative;
}

.jcmcc-testimonial-content {
  flex: 3;
  position: relative;
  padding-left: 2rem;
}

.jcmcc-quote-icon {
  position: absolute;
  left: 0;
  top: 0;
  transform: scale(1.5);
}

.jcmcc-testimonial-content p {
  line-height: 1.3;
  margin-bottom: 1.5rem;
  color: #444;
}

.jcmcc-customer-info {
  display: flex;
  flex-direction: column;
}

.jcmcc-customer-name {
  font-weight: bold;
  color: #333;
}

.jcmcc-customer-location {
  color: #666;
  font-size: 0.9rem;
}

.jcmcc-cash-amount {
  flex: 1;
  border-left: 1px solid #eee;
  padding-left: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.jcmcc-amount-label {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.jcmcc-amount-value {
  font-size: 1rem;
  font-weight: bold;
  color: #0077be;
}

/* Hide schema-only elements */
.jcmcc-hidden-schema {
  display: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .jcmcc-testimonial {
    flex-direction: column;
    padding: 1.5rem;
  }
  
  .jcmcc-testimonial-content {
    margin-bottom: 1.5rem;
  }
  
  .jcmcc-cash-amount {
    border-left: none;
    border-top: 1px solid #eee;
    padding-left: 0;
    padding-top: 1.5rem;
    width: 100%;
  }
}

.reviews-widget-link {
    text-decoration: none !important;
    color: inherit;
    cursor: pointer;
    display: inline-block;
    text-align: left;
}

.reviews-widget-link:hover,
.reviews-widget-link:visited,
.reviews-widget-link:active {
    text-decoration: none !important;
}

.reviews-widget {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: Arial, sans-serif;
}

.rating-stars {
    display: flex;
}

.star-icon {
    color: #FFD700; /* Classic gold/yellow star color */
    font-size: 18px;
}

/* For the half star effect */
.star-icon.half {
    position: relative;
    width: 18px;
    overflow: hidden;
}

.star-icon.half:after {
    content: "★";
    color: rgba(255, 215, 0, 0.3); /* Dimmed version of the star color */
    position: absolute;
    left: 9px; /* Half the width */
    top: 0;
    width: 9px;
    overflow: hidden;
}

.rating-number {
    font-size: 16px;
    color: white;
    font-weight: bold;
}

.review-count {
    font-size: 16px;
    color: white;
    font-weight: 500;
}

/* Media query for mobile devices only */
@media (max-width: 768px) {
    .reviews-widget-link {
        display: block;
        width: 100%;
        text-align: center;
    }
    
    .reviews-widget {
        display: inline-flex;
        justify-content: center;
        width: auto;
    }
}

/* How to pages */

   .quote-container {
    display: flex;
    align-items: center;
    margin: 20px auto;
    padding: 0px;
  }
  
  .author-image {
    flex: 0 0 120px;
    margin-right: 30px;
  }
  
  .author-image img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
  
  .quote-content {
    flex: 1;
  }
  
  blockquote {
    line-height: 1.6;
    font-style: italic;
    color: #333;
    margin: 0 0 15px 0;
    padding: 0 0 0 20px;
    border-left: 4px solid #4a90e2;
  }
  
  .author-name {
    font-weight: bold;
    text-align: right;
    margin: 0;
    color: #555;
  }
  
  /* Responsive styles */
  @media (max-width: 600px) {
    .quote-container {
      flex-direction: column;
      text-align: center;
    }
    
    .author-image {
      margin: 0 0 20px 0;
    }
    
    blockquote {
      padding-left: 0;
      border-left: none;
      border-top: 2px solid #4a90e2;
      padding-top: 15px;
    }
    
    .author-name {
      text-align: center;
    }
  }

/* CSS */
.trust-section {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Left aligned on desktop */
  gap: 12px;
  margin-top: 24px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.trust-faces {
  height: 36px;
  width: auto;
}

.trust-text {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
  gap: 2px;
}

.line-1 {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.line-2 {
  font-size: 13px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 6px;
}

.stars {
  color: #FFB800;
  font-size: 14px;
  letter-spacing: 1px;
}

/* Mobile - centered */
@media (max-width: 480px) {
  .trust-section {
    flex-direction: column;
    align-items: center; /* Center aligned on mobile */
    justify-content: center;
    gap: 10px;
    text-align: center;
  }
  
  .line-2 {
    justify-content: center; /* Centers the stars and text */
  }
}