/*
Theme Name: Woostify Child
Theme URI: https://woostify.com
Template: woostify
Author: Woostify
Author URI: https://woostify.com/about
Description: Woostify is fast, lightweight, responsive and super flexible WooCommerce theme built with SEO, speed, and usability in mind. The theme works great with any of your favorite page builder likes Elementor, Beaver Builder, SiteOrigin, Thrive Architect, Divi, etc. Therefore, you can build any type of websites like shop, business agencies, corporate, portfolio, education, university portal, consulting, church, restaurant, medical and so on. Woostify is compatible with all well-coded plugins, including major ones like WooCommerce, OrbitFox, Yoast, BuddyPress, bbPress, etc. Learn more about the theme and ready to import demo sites at https://woostify.com
Tags: e-commerce,two-columns,left-sidebar,right-sidebar,custom-background,custom-colors,custom-header,custom-menu,featured-images,full-width-template,threaded-comments,rtl-language-support,footer-widgets,sticky-post,theme-options
Version: 2.4.2.1752296803
Updated: 2025-07-12 05:06:43

*/
.vehicle-details{
    display: flex;
    justify-content: space-between;
    padding: 3px 20px;
}
.vehicle-warpper{
  margin-bottom: 80px;
}
.mainHeadingSec{
  text-align: center;
  margin-bottom: 30px;
}
.mainHeadingSec h2{
  font-family: "Barlow Condensed", Sans-serif;
  font-size: 49px;
  font-weight: 600;
  color: #3A3A3A;
}
.mainHeadingSec p{
  font-size: 19px;
  color: #3A3A3A;
  margin-top: 10px;
}
.mainHeadingSec h3{
  font-size: 23px;
  font-weight: 600;
  color: #3a3a3a;
  margin-top: 19px;
}
.product-list {
    display: flex;
    flex-wrap: wrap;
    flex: 0 0 80%;
    gap:15px;
}
.filter-wrapper {
    display: flex;
    justify-content: center;
    
}
.aesf-filter {
    flex: 0 0 15%;
}
.product-list li {
    flex: 1 1 30%;
    list-style: none;

}
.filter-wrapper .product-loop-image-wrapper {
    border: 1px solid #041d454f;
    padding: 30px;
    border-radius: 12px;
}
.button-wrapper {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding: 20px;
}

.avialable-roof .card-wrapper{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;  
}
.avialable-roof .card-wrapper .card{
    flex: 1 1 calc(49% - 10px);
    border: 1px solid #E6E6E6;
    padding: 25px 20px;
    box-sizing: border-box;
}
@media (max-width: 600px) {
  .avialable-roof .card-wrapper .card {
    width: 100%;
  }
}
.selectedVehicleWarpper{
    display: block !important;
    gap: 10px;
    justify-content: center;
    align-items: self-start;
}
.avialable-roof .card-wrapper .card a.card-btn.elementor-button{
    background: #041d45;
}
.avialable-roof .card-wrapper .card a.card-btn.elementor-button:hover{
    background: black;
}
.avialable-roof .card-wrapper .card p.card-btn.elementor-button{
    background: #041d45;
    cursor: pointer;
}
.avialable-roof .card-wrapper .card p.card-btn.elementor-button:hover{
    background: black;
    cursor: pointer;
}

.avialable-roof .vehicle-warpper .card-wrapper{
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}
.avialable-roof .vehicle-warpper .card-wrapper .card{
    width: calc(20% - 16px);
    flex: unset;
    box-sizing: border-box;
    border: none;
    padding: 10px;
    text-align: center;
}
.avialable-roof .vehicle-warpper .card-wrapper .card img{
    border: 1px solid #E6E6E6;
    padding: 15px;
}
.avialable-roof .vehicle-warpper .card-wrapper .card h3.card-title {
    text-align: center;
    font-size: 28px;
    font-weight: 500;
    color: #041d45;
}
/* ----- */
.avialable-roof .vehicle_warpper .card-wrapper{
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}
.avialable-roof .vehicle_warpper .card-wrapper .card{
    width: calc(20% - 16px);
    box-sizing: border-box;
    border: none;
    padding: 10px;
}
.avialable-roof .vehicle_warpper .card-wrapper .card img{
    border: 1px solid #E6E6E6;
    padding: 15px;
}
.avialable-roof .vehicle_warpper .card-wrapper .card h3.card-title {
    text-align: center;
    font-size: 28px;
    font-weight: 500;
    color: #041d45;
}
.vehicalSelection_Bar {
  margin: 0;
  padding: 40px 0;
  font-family: Arial, sans-serif;
  background-color: #fff;
  display: flex;
  justify-content: center;
  margin-bottom: 90px;
}

.progress-wrapper {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  width: 90%;
  max-width: 600px;
}

.progress-line {
  position: absolute;
  top: 90px;
  left: 75px;
  right: 75px;
  height: 0;
  border-top: 2px dashed #2c3e50;
  z-index: 1;
}

.step {
  z-index: 2;
  position: relative;
  text-align: center;
  flex: 1;
}

.circle {
  width: 55px;
  height: 55px;
  font-size: 20px;
  border-radius: 50%;
  border: 1px solid #2c3e50;
  color: #2c3e50;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin: 0 auto;
  background: #fff;
}
.progress-wrapper .circle img{
  border-radius: 50%;
}
.vertical-line {
  width: 1px;
  height: 20px;
  background-color: #2c3e50;
  margin: 0 auto;
}

.diamond {
  width: 8px;
  height: 8px;
  background: #2c3e50;
  transform: rotate(45deg);
  margin: 1px auto 0;
}

.step-label {
  margin-top: 6px;
  font-size: 12px;
  color: #2c3e50;
  text-transform: uppercase;
}

.label-top {
  width: 100%;
  font-size: 12px;
  color: #2c3e50;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 6px;
}

.product-card {
      display: flex;
      flex-wrap: wrap;
      background-color: #fff;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 20px;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      max-width: 1000px;
      margin: auto;
      margin-bottom: 15px;
    }

    .product-image {
      flex: 1 1 150px;
      max-width: 150px;
    }

    .product-image img {
      width: 100%;
      border-radius: 6px;
      object-fit: contain;
    }

    .product-details {
      flex: 2 1 300px;
    }

    .product-details h3 {
      margin: 0 0 10px;
      font-size: 18px;
      color: #001f4d;
    }

    .product-info {
      display: grid;
      grid-template-columns: 150px auto;
      gap: 6px 10px;
      font-size: 14px;
      color: #555;
    }

    .product-price {
      flex: 1 1 150px;
      text-align: right;
    }

    .product-price .total {
      font-size: 12px;
      color: gray;
      text-transform: uppercase;
      margin-bottom: 4px;
    }

    .product-price .amount {
      font-size: 22px;
      font-weight: bold;
      color: #001f4d;
    }

    .product-price .note {
      font-size: 12px;
      color: gray;
      margin-top: 2px;
    }

    .product-price a.productPriceBtn {
      display: inline-block;
    margin-top: 12px;
    padding: 8px 17px;
    background-color: #001f4d;
    color: #fff;
    border: none;
    font-size: 13px;
    border-radius: 0px;
    cursor: pointer;
    font-weight: bold;
    }

    .product-price a.productPriceBtn:hover {
      background-color: black;
    }
    .product-loop-wrapper {
        box-shadow: 0px 0px 6px 0px rgb(187 187 187 / 40%);
        border-radius: 11px;
        padding: 20px 20px 0px 20px;
        padding-bottom: 0px;
    }
    .woocommerce .product .woocommerce-loop-product__title {
        color: #000000;
        font-size: 22px;
        text-align: start;
    }
    .aesf-filter {
        flex: 0 0 21%;
        padding: 15px 15px;
        box-shadow: 0px 0px 6px 0px rgb(187 187 187 / 40%);
    }
    .autoextra-shop-wrapper .filter-wrapper{
      display: flex;
      justify-content: center;
      gap: 20px;
    }
    /* Responsive */
    @media (max-width: 768px) {
      .product-card {
        flex-direction: column;
        text-align: center;
      }

      .product-price {
        text-align: center;
      }

      .product-info {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 600px) {
      .autoextra-shop-wrapper .filter-wrapper {
        display: block;
      }
      .vehicle-warpper {
        display: grid;
      }
      .mainHeadingSec h2{
        font-size: 36px;
        font-weight: 700;
      }
      .mainHeadingSec p {
        font-size: 15px;
        margin-top: 7px;
      }
      .mainHeadingSec {
        margin-top: 30px;
      }
      .avialable-roof .vehicle-warpper .card-wrapper .card {
        width: calc(50% - 16px);
      }
      .avialable-roof .vehicle_warpper .card-wrapper .card {
        width: calc(50% - 16px);
      }
      .product-details {
        flex: none;
      }
      .product-image {
        flex: none;
      }
      .autoextra-shop-wrapper .filter-wrapper{
        display: block;
      }
    }
    .elementor-508 .elementor-element.elementor-element-b7c5cfb {
    --display: flex;
    --min-height: 300px;
    --flex-direction: row;
    --container-widget-width: calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );
    --container-widget-height: 100%;
    --container-widget-flex-grow: 1;
    --container-widget-align-self: stretch;
    --flex-wrap-mobile: wrap;
    --justify-content: center;
    --align-items: center;
    --gap: 0px 0px;
    --row-gap: 0px;
    --column-gap: 0px;
    --overlay-opacity: 0.75;
    --margin-top: 0px;
    --margin-bottom: 0px;
    --margin-left: 0px;
    --margin-right: 0px;
    --padding-top: 0px;
    --padding-bottom: 0px;
    --padding-left: 0px;
    --padding-right: 0px;
}

.elementor-508 .elementor-element.elementor-element-b7c5cfb:not(.elementor-motion-effects-element-type-background), .elementor-508 .elementor-element.elementor-element-b7c5cfb > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-image: url("https://clikdevelopment.com.au/autoextra/wp-content/uploads/2025/07/fcdead2e3b85c0bbe46bcc75ffa449b492824d60-scaled.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.elementor-508 .elementor-element.elementor-element-b7c5cfb::before, .elementor-508 .elementor-element.elementor-element-b7c5cfb > .elementor-background-video-container::before, .elementor-508 .elementor-element.elementor-element-b7c5cfb > .e-con-inner > .elementor-background-video-container::before, .elementor-508 .elementor-element.elementor-element-b7c5cfb > .elementor-background-slideshow::before, .elementor-508 .elementor-element.elementor-element-b7c5cfb > .e-con-inner > .elementor-background-slideshow::before, .elementor-508 .elementor-element.elementor-element-b7c5cfb > .elementor-motion-effects-container > .elementor-motion-effects-layer::before {
    background-color: #000000;
    --background-overlay: '';
}

.elementor-508 .elementor-element.elementor-element-b7c5cfb.e-con {
    --align-self: stretch;
    --flex-grow: 1;
    --flex-shrink: 0;
}

.elementor-508 .elementor-element.elementor-element-4bd1ea6 {
    --display: flex;
    --flex-direction: column;
    --container-widget-width: 100%;
    --container-widget-height: initial;
    --container-widget-flex-grow: 0;
    --container-widget-align-self: initial;
    --flex-wrap-mobile: wrap;
    --padding-top: 0px;
    --padding-bottom: 0px;
    --padding-left: 60px;
    --padding-right: 40px;
}

.elementor-508 .elementor-element.elementor-element-8364aef .elementor-heading-title {
    color: #FFFFFF;
}

.elementor-508 .elementor-element.elementor-element-1711d7b {
    --display: flex;
    --flex-direction: row;
    --container-widget-width: initial;
    --container-widget-height: 100%;
    --container-widget-flex-grow: 1;
    --container-widget-align-self: stretch;
    --flex-wrap-mobile: wrap;
    --justify-content: flex-end;
    --padding-top: 0px;
    --padding-bottom: 0px;
    --padding-left: 40px;
    --padding-right: 60px;
}

.elementor-508 .elementor-element.elementor-element-bd23545 .elementor-button {
    background-color: #00000000;
    font-size: 16px;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #FFFFFF8A;
    border-radius: 0px 0px 0px 0px;
    padding: 15px 15px 15px 15px;
}

.elementor-508 .elementor-element.elementor-element-d116008 {
    --display: flex;
    --flex-direction: column;
    --container-widget-width: calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );
    --container-widget-height: initial;
    --container-widget-flex-grow: 0;
    --container-widget-align-self: initial;
    --flex-wrap-mobile: wrap;
    --align-items: center;
    --gap: 0px 0px;
    --row-gap: 0px;
    --column-gap: 0px;
    --margin-top: -99px;
    --margin-bottom: 0px;
    --margin-left: 0px;
    --margin-right: 0px;
}

.elementor-508 .elementor-element.elementor-element-218d097 {
    --display: flex;
    --flex-direction: column;
    --container-widget-width: calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );
    --container-widget-height: initial;
    --container-widget-flex-grow: 0;
    --container-widget-align-self: initial;
    --flex-wrap-mobile: wrap;
    --align-items: flex-start;
    --padding-top: 0px;
    --padding-bottom: 0px;
    --padding-left: 0px;
    --padding-right: 0px;
}

.elementor-508 .elementor-element.elementor-element-4e5c697 {
    margin: 0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;
    padding: 0px 0px 0px 0px;
    font-size: 19px;
    font-weight: 600;
    color: #FFFFFF;
}

.elementor-508 .elementor-element.elementor-element-bd1cc1a {
    --display: flex;
    --flex-direction: column;
    --container-widget-width: calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );
    --container-widget-height: initial;
    --container-widget-flex-grow: 0;
    --container-widget-align-self: initial;
    --flex-wrap-mobile: wrap;
    --align-items: center;
    box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.5);
    --padding-top: 30px;
    --padding-bottom: 30px;
    --padding-left: 40px;
    --padding-right: 40px;
}

.elementor-508 .elementor-element.elementor-element-bd1cc1a:not(.elementor-motion-effects-element-type-background), .elementor-508 .elementor-element.elementor-element-bd1cc1a > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: #FFFFFF;
}

.elementor-508 .elementor-element.elementor-element-ef20123 {
    width: 100%;
    max-width: 100%;
}

@media(max-width: 767px) {
    .elementor-508 .elementor-element.elementor-element-d116008 {
        --margin-top:-67px;
        --margin-bottom: 0px;
        --margin-left: 0px;
        --margin-right: 0px;
    }

    .elementor-508 .elementor-element.elementor-element-bd1cc1a {
        --padding-top: 0px;
        --padding-bottom: 0px;
        --padding-left: 0px;
        --padding-right: 0px;
    }
}

@media(min-width: 768px) {
    .elementor-508 .elementor-element.elementor-element-b7c5cfb {
        --width:100%;
    }

    .elementor-508 .elementor-element.elementor-element-4bd1ea6 {
        --width: 100%;
    }

    .elementor-508 .elementor-element.elementor-element-1711d7b {
        --width: 100%;
    }

    .elementor-508 .elementor-element.elementor-element-218d097 {
        --width: 76%;
    }

    .elementor-508 .elementor-element.elementor-element-bd1cc1a {
        --width: 76%;
    }
}

.card-wrapper:only-child,
.card-wrapper > div:only-child {
  flex: 1 1 100%;
}