/** Shopify CDN: Minification failed

Line 7:28 Expected ")" to end URL token

**/
 .product_customization_drawer{ 
   background-image: url({{ 'black-marquraina.jpg' | asset_url }});
   background-size: cover; 
   background-repeat: no-repeat; 
 }
.take_the_quiz {
    margin-top:20px;
    --button-background: 0, 0, 0; /* RGB value for background */
    --button-outline-color: 255, 255, 255; /* RGB value for border */
    --button-text-color: 255, 255, 255; /* RGB value for text */
    --button-border-radius: 5px;
    --button-font: 16px Arial, sans-serif;
    --button-letter-spacing: 1px;
    --initial-gradient: linear-gradient(rgb(var(--button-background)), rgb(var(--button-background)));
    --hover-gradient: linear-gradient(transparent, transparent);
    --initial-background-position: 0% 0%; /* Background starts at top-left */
    --hover-background-position: 100% 0%; /* Background moves to the right */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    column-gap: 1.125rem;
    padding: 0.65rem 1.75rem;
    font: var(--button-font);
    letter-spacing: var(--button-letter-spacing);
    text-shadow: none;
    text-align: center;
    cursor: pointer;
    color: rgb(var(--button-text-color));
    border: 1px solid rgb(var(--button-outline-color, var(--button-background)));
    border-radius: 0;
    background-color: transparent;
    background-image: var(--initial-gradient), var(--hover-gradient);
    background-size: 100% 100%, 0 100%; /* Initial state: hover gradient is not visible */
    background-position: var(--initial-background-position);
    background-repeat: no-repeat;
    transition: 
        background-size 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86), 
        background-position 0.45s step-end, 
        color 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86), 
        border 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    position: relative;
}

.take_the_quiz:hover {
    --initial-background-position: 100% 0%; /* Move initial gradient out of view */
    --hover-background-position: 0% 0%; /* Bring hover gradient into view */
    background-size: 0 100%, 100% 100%; /* Hover gradient takes full width */
    color: rgb(var(--button-background)); /* Change text color on hover */
}

div#containerProductCanvas {
    height: calc(100vh - 305px);
}
.product-info__block-item.pdp_button10 {
    margin-bottom: 0;
}
.product-info__block-list .product-info__block-item.pdp_button11 {
    margin-top: 20px;
}
h4.quiz_step_1 {
    text-transform: capitalize;
}
div#product_customization_step_2 .stepper_in {
    position: relative;
}
.stepper_in .canvas_btn_positions {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 9;
    display: flex;
    flex-direction: column;
    transform: none;
    gap: 12px;
}
.stepper_in .canvas_btn_positions .button {
    background: #ddd;
    color: #fff;
    border: 0;
    padding: 7px 10px;
    transition: all ease 0.4s;
    outline: none;
    box-shadow: none;
    text-transform: none;
    width: 85px;
    margin:0px!important;
}
.stepper_in .canvas_btn_positions .button.active,
.stepper_in .canvas_btn_positions .button:hover {
  background:#000000;
  color:#ffffff;
}
.product-info__block-list .feature-badge.button svg {
    width: 30px;
    height: 30px;
}
.product-info__block-list .feature-badge.button svg path {
      fill: #fff;
}
.product-info__block-list .feature-badge.button svg .st2{
  fill:#f2f2f2!important;
}
body.popup_customizer_opened .product_customization_drawer {
    z-index: 9999999999!important;
}
.stepper_benifits_row_col svg{
  visibility:visible;
}
body.popup_customizer_opened {
    overflow: hidden;
}
body.popup_customizer_opened header.shopify-section--header{
  z-index:0!important;
}
.stepper_in, .prose .stepper_in {
    margin-top: auto!important;
    margin-bottom: auto!important;
}
.popupSection .content-over-media>:not(img,video,iframe,svg,video-media,picture,image-parallax) {
    z-index: inherit;
}
@media screen and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .product-info__block-list .feature-badge.button:hover svg path {
      fill: #000000;
  }
  .product-info__block-list .feature-badge.button svg path {
      transition: all ease 0.6s;
  }
}

@media (max-width:767px){
  .quizBodyContainerWrapper {
      padding: 0 30px;
  }
  .font_styles {
    text-align: left;
}
  body[style="overflow: hidden;"] .product-info {
    z-index: unset;
}
.stepper_in .canvas_btn_positions .button {
    padding: 3px 8px 2px 8px;
    font-size: 12px;
    width: 60px;
}
.stepper_in .canvas_btn_positions {
    top: 10px;
    gap:6px;
}
}