/*!
 * Componente Nombre:  dexctzusd    | default   | section
 * Base: Bootstrap v4.1.0
 * Autor: DEX360
 * Copyright: DEX360

    2.  dexctzusd_section               
        2.1. dexctzusd_buy_used
        2.2. dexctzusd_quote_vehicle
        2.3. dexctzusd_steps_sell
        2.4. dexctzuds_banner

    10. Responsive
*/


/* 2. dexctzusd_section
--------------------------------------------------------------*/
/* 2.1. dexctzusd_buy_used */
.dexctzusd_buy_used {
    margin-bottom: 25px;
    overflow: hidden;
    position: relative;
    width: 100%;
    z-index: -1;
}
.dexctzusd_buy_used_title {
    margin: 45px 0px 25px;
    text-align: center;    
}
.dexctzusd_buy_used h4,
.dexctzusd_buy_used p {
    color:#ffffff;
    font-size: .9em;
    font-weight: 300;
}
.dexctzusd_buy_used h4 {
    font-weight: 600;
}
.dexctzusd_buy_used article {
    background-color: #000000;
    background-position: top center;
    background-repeat:no-repeat; 
    min-height: 130px;
    padding:25px 20px 10px;
}
.dexctzusd_buy_used article p {
    margin:0px;
}
.dexctzusd_buy_used_1 {
    background-image: url("../img/dexctzusd_buy_used-1.webp"); 
}
.dexctzusd_buy_used_2 {
    background-image: url("../img/dexctzusd_buy_used-2.webp");
}
.dexctzusd_buy_used_3 {
    background-image: url("../img/dexctzusd_buy_used-3.webp");
}

/* 2.2. dexctzusd_quote_vehicle */
.dexctzusd_quote_vehicle {
    background: var(--dexctzusdColorPrimary);
    padding:20px 0px !important;
}
.dexctzusd_quote_vehicle_content {
    align-items: center;
    border:1px solid white;
    display: inline-flex;
    justify-content: center;
    padding: 0px 0px;
}
.dexctzusd_quote_vehicle_content h5 {
    color:#ffffff;
    font-size: 1.1em;
    margin:0px;
    padding: 13px 20px;
}
.dexctzusd_quote_vehicle .dexctzusd_generic_button {
    background-color: #000000;
}

/* 2.3. dexctzusd_steps_sell */
.dexctzusd_steps_sell .row {
    margin:30px 0px 120px;
    position: relative;
    width: 100%;
}
.dexctzusd_steps_sell h3 {
    font-size: 1.6em;
    font-weight: 600;
    margin:40px 0px 0px;
}
.dexctzusd_steps_sell h4 {
    font-size: 1.1em;
    margin-top:180px;
}
.dexctzusd_steps_sell_2:before,
.dexctzusd_steps_sell_3:before,
.dexctzusd_steps_sell_2:after,
.dexctzusd_steps_sell_3:after {
    --svg: url('data:image/svg+xml;utf8,<svg width="66" height="67" viewBox="0 0 66 67" xmlns="http://www.w3.org/2000/svg"><path d="M38 33.5L0 67V50.25L18.8805 33.5L0 15.1023V0L38 33.5Z" fill="white"/></svg>');
    background-color: var(--dexctzusdColorPrimary); /* Use colorPrimary for the first path */
    mask-image: var(--svg); /* Mask with the SVG */
    mask-size: contain;
    mask-repeat: no-repeat;
    background-size: contain;
    background-repeat: no-repeat;
    content: '';
    left: -53%;
    position: absolute;
    top: 38%;
    height:67px;
    width: 68px;
    z-index: 1;
}
.dexctzusd_steps_sell_2:after,
.dexctzusd_steps_sell_3:after {
    --svg: url('data:image/svg+xml;utf8,<svg width="66" height="67" viewBox="0 0 66 67" xmlns="http://www.w3.org/2000/svg"><path d="M66 33.5L29 67V50.25L47.3836 33.5L29 15.1023V0L66 33.5Z" fill="black"/></svg>');
    background-color: #000000; 
    z-index: 2;
}
.dexctzusd_steps_sell article {
    background-position:center center;
    background-repeat:no-repeat; 
    background-size:  70%;
    display: flex;
    justify-content: center;    
    height: 200px;
    position: relative;    
}
.dexctzusd_steps_sell_number {
    left:-10%;
    position: absolute;
    top: 40%;
    text-align: center;
    z-index: 2;
}
.dexctzusd_steps_sell_number span {
    align-items: center;
    background: var(--dexctzusdColorPrimary);
    border-radius: 50%;
    color:#ffffff;
    display: inline-flex;
    font-weight: 600;
    font-size: 2em;
    justify-content: center;
    height: 55px;
    margin-top: 0px;
    width: 55px;
    z-index: 9999;
}
.dexctzusd_steps_sell_1 {
    background-image: url("../img/dexctzusd-steps-sell-1.webp"); 
}
.dexctzusd_steps_sell_2 {
    background-image: url("../img/dexctzusd-steps-sell-2.webp");
}
.dexctzusd_steps_sell_3 {
    background-image: url("../img/dexctzusd-steps-sell-3.webp");
}

/* 2.4. dexctzusd_banner */
.dexctzusd_banner img {
    max-width: 100%;
    height: auto;
}

/* 10. Responsive */
@media (max-width:600px) { 
    /* dexctzusd_steps_booking_skin_info */
    .dexctzusd_steps_booking_skin_info {
        margin: 0px auto;
        width:80%;
    }     
    /* dexctzusd_steps_sell */
    .dexctzusd_steps_sell { 
        align-items: center;
        display: flex;
        justify-content: center;
        margin:0px;
        width: 100%;
    }
    .dexctzusd_steps_sell .row {
        margin: 30px 0px;
    }    
    .dexctzusd_steps_sell h3 {
        margin-bottom: 20px;
    }
    .dexctzusd_steps_sell article {
        margin: 90px 0px;
    }        
    .dexctzusd_steps_sell_number {
        left: 40%;
        top: -19%;
    }
    .dexctzusd_steps_sell_2:before, .dexctzusd_steps_sell_3:before, .dexctzusd_steps_sell_2:after, .dexctzusd_steps_sell_3:after {
        left: 38%;
        top: -70%;
        height: 67px;
        width: 68px;
        transform: rotate(90deg);
    }
    /* dexctzusd_quote_vehicle */
    .dexctzusd_quote_vehicle_content {
        flex-direction: column;
        margin: 0px 5%;
        padding: 0px 4%;
    }
}