/*  ------------------------------------------------------------------------------------
Sell Parts Page
------------------------------------------------------------------------------------  */

:root {
    /*Colours used in Sellers pages*/
    --main-blue: #3A79B0;
    --light-blue: #E4F3FF;
    --light-grey: #F1F1F1;
    --dark-grey: #333333;
    --main-red: #AD261F;
    --light-grey-text: #D3D3D3;

    --border-radius-10: 10px;
    --card-box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.15);

    --staffing-image-size: 20rem;
    --staffing-scroll-delay: 0;
}

/* --------------- General --------------- */

.sell-page img {
    width: 100%;
}

/***** End Layout *****/


.premium-tools img,
.sales-management img {
    max-width: 400px;
    display: block;
    margin: 0 auto;
}

/* --------------- End General --------------- */

/* ---------------  Sell Parts Page --------------- */
/*
Parent Class: sell-parts
Hero Class: banner red-hero-bkg
Page Nav Class: page-navigation
Intro Class: intro-section
Prem. Tools Class: premium-tools
Features Class: features
Passion Class: passion
Inv. Management Class: inventory-management
Sales Management Class: sales-management
Business Reports Class: business-reports
Streamline Operations Class: streamline-operations
*/

/***** Hero Section *****/

/*Hero Text*/
.sell-page .sp-hero-content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-self: stretch;
}

.sp-hero-content {
    display: flex;
    align-items: center;
    height: 100%;
    flex-direction: column;
}

.sp-hero-content > div {
    height: fit-content;
}

/*Hero Image*/
/*Image that shows on mobile*/
.sell-page .banner .col-sm-8 img {
    display: block;
    margin: 0 auto;
    width: 80%;
}

/*Statistic Items in Hero*/
.sp-stat-item {
    position: relative;
    width: 100%;
    margin: 10px;
}

.sp-stat-item p {
    margin-bottom: 0;
}

.sp-stat-item span:first-of-type {
    font-size: 24px;
    font-weight: bold;
}

/*End Statistic Items in Hero*/
/***** End Hero Section *****/


/***** Passion Statement Section *****/
.passion h2 {
    font-weight: 100;
}

.passion h2 span {
    color: var(--main-blue);
    font-weight: bold;
}
/***** End Passion Statement Section *****/

/***** Inventory Management Section *****/
.inventory-management h2,
.inventory-management p {
    margin-bottom: 20px;
}

.inventory-management .card-wrapper h3 {
    display: flex;
    align-items: center;
}

.inventory-management .card-wrapper .fa {
    color: var(--main-red);
    font-size: 32px;
    margin-right: 10px;
}

/***** End Inventory Management Section *****/

/***** Sales Management Section *****/

.sales-management .container .row.d-md-flex {
    display: flex;
    flex-direction: column-reverse;
}

.sales-management .fa {
    color: var(--main-red);
    font-size: 32px;
    display: block;
}

.sales-management h2,
.sales-management h3,
.sales-management p,
.sales-management .fa {
    text-align: center;
}

.sm-item {
    margin: 10px 0;
}

/***** End Sales Management Section *****/

/***** Business Reports Section *****/
/***** End Business Reports Section *****/

/***** Streamline Your Operations Section *****/

.streamline-operations img {
    display: block;
    max-width: 335px;
    margin: 0 auto;
}
.staffing-image-container {
    display: flex;
    justify-content: center;
    height: var(--staffing-image-size);
    margin: 55px 0 65px;
}

.staffing-image {
    position: absolute;
    text-align: center;
    height: var(--staffing-image-size);
    width: var(--staffing-image-size);
    animation-name: wheel;
    animation-duration: 1s;
    animation-play-state: paused;
    animation-delay: var(--staffing-scroll-delay);
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: both;
}

.staffing-image .icon-svg-container {
    animation-name: wheel-icons;
    animation-duration: 1s;
    animation-play-state: paused;
    animation-delay: var(--staffing-scroll-delay);
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: both;
}

.staffing-image > * {
    position: absolute;
}

.staffing-image .icon-svg-container-1 {
    top: -3rem;
    left: 6.5rem;
}

.staffing-image .arrow-svg-container-1 {
    top: 1.8rem;
    left: 15.1rem;
}

.staffing-image .arrow-svg-1 {
    transform: rotate(1deg);
}

.staffing-image .icon-svg-container-2 {
    top: 11rem;
    right: -2.8rem;
}

.staffing-image .arrow-svg-container-2 {
    top: 15.8rem;
    left: 6rem;
}

.staffing-image .arrow-svg-2 {
    transform: rotate(112deg);
}

.staffing-image .icon-svg-container-3 {
    top: 11rem;
    left: -1.8rem;
}

.staffing-image .arrow-svg-container-3 {
    top: 0.9rem;
    left: -3rem;
}

.staffing-image .arrow-svg-3 {
    transform: rotate(239deg);
}

.staffing-steps,
.staffing-steps::before,
.staffing-steps::after {
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
}

.staffing-steps {
    padding: 35px 12px 16px;
    margin-bottom: 60px;
    background-color: #fff;
    position: relative;
}

.staffing-steps::before {
    background: linear-gradient(45deg, #29ace6, #ff6acf);
    transform: rotate(179deg);
    animation: highlight-right-rotate 3950ms ease-in-out 0ms infinite alternate both;
    -moz-animation: highlight-right-rotate 4000ms ease-in-out 0ms infinite alternate both;
    -webkit-animation: highlight-right-rotate 4000ms ease-in-out 0ms infinite alternate both;
}

.staffing-steps::after {
    background: linear-gradient(12deg, #29ace6, #ff6acf);
    transform: rotate(181deg);
    animation: highlight-left-rotate 4150ms ease-in-out 700ms infinite alternate both;
    -moz-animation: highlight-left-rotate 4150ms ease-in-out 700ms infinite alternate both;
    -webkit-animation: highlight-left-rotate 4150ms ease-in-out 700ms infinite alternate both;
}

.staffing-steps::before,
.staffing-steps::after {
    content: "";
    position: absolute;
    top: -1px;
    left: -7px;
    right: -7px;
    bottom: -1px;
    z-index: -10;
    opacity: 0.8;
}

.fill-grey {
    fill: #474747;
}

.fill-grey-1 {
    fill: #797979;
}

.fill-teal {
    fill: #367788;
}

.fill-green {
    fill: #358c35;
}

.fill-yellow {
    fill: #ca8911;
}

.fill-yellow-1 {
    fill: #b47a10;
}

.fill-yellow-2 {
    fill: #835a0e;
}

.fill-yellow-3 {
    fill: #c8973e;
}

.fill-red-3 {
    fill: #a91b22;
}

.fill-pink {
    fill: #fc89d9;
}

.fill-pink-1 {
    fill: #da6fb9;
}

.fill-pink-2 {
    fill: #cc5daa;
}

.fill-blue {
    fill: #57bceb;
}

.fill-blue-1 {
    fill: #3899c6;
}

.fill-blue-2 {
    fill: #226a8c;
}

.fill-blue-3 {
    fill: #357da5;
}

.fill-purple {
    fill: #bc9de0;
}

.fill-purple-1 {
    fill: #8965b2;
}

.fill-purple-2 {
    fill: #5a3684;
}
/***** End Streamline Your Operations Section *****/

/* ---------------  End Sell Parts Page --------------- */

/* ---------------  Marketplace Advertising Page --------------- */

/* ---------------  End Marketplace Advertising Page --------------- */

/* ---------------  Pricing Page --------------- */

/* ---------------  End Pricing Page --------------- */

/*  ------------------------------------------------------------------------------------
End Seller Pages
------------------------------------------------------------------------------------  */



/*  ------------------------------------------------------------------------------------
Effects & Transitions
------------------------------------------------------------------------------------  */

@keyframes wheel {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(180deg);
    }
}

@keyframes wheel-icons {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-180deg);
    }
}

@keyframes rotate-shadow {
    0% {
        background: linear-gradient(135deg, #3a79b0 30%, #6072b2 40%);
        filter: blur(8px);
    }

    50% {
        filter: blur(6px);
    }

    100% {
        background: linear-gradient(135deg, #6072b2 30%, #3a79b0 40%);
        filter: blur(8px);
    }
}

@keyframes highlight-right-rotate {
    0% {
        transform: rotate(179deg);
    }

    100% {
        transform: rotate(178.25deg);
    }
}

@keyframes highlight-left-rotate {
    0% {
        transform: rotate(181deg);
    }

    100% {
        transform: rotate(181.25deg);
    }
}

/*  ------------------------------------------------------------------------------------
End Effects & Transitions
------------------------------------------------------------------------------------  */


/*  ------------------------------------------------------------------------------------
Media Queries
------------------------------------------------------------------------------------  */

@media only screen and (min-width: 500px) {
    /***** Hero Section *****/
    /*Display flex the hero statistic items and add a border in between each item*/
    .sp-hero-statistics {
        display: flex;
    }
    .sp-stat-item {
        margin: 0;
    }
    /*Border right*/
    .sp-stat-item:after {
        content: "";
        background: var(--light-grey-text);
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        height: 50%;
        width: 1px;
    }
    /*Remove border on last item*/
    .sp-stat-item:last-of-type:after {
        content: revert;
    }
    /***** End Hero Section *****/
}

@media only screen and (min-width: 575px) {
    /***** Hero Section *****/
    /*Align the hero text center*/
    .sp-hero-content {
        flex-direction: row;
    }
    /*Make image smaller to prevent squishing the text*/
    .sell-page .banner .col-sm-8 img {
        width: 40%;
        margin: 10px;
    }
    /*Make the hero statistic text larger*/
    .sp-stat-item span:first-of-type {
        font-size: 32px;
    }
    /***** End Hero Section *****/

    /***** Passion Statement Section *****/
    .passion h2 {
        font-size: 32px;
    }
    /***** End Passion Statement Section *****/
}

@media only screen and (min-width: 768px) {

    /***** Hero Section *****/
    .sell-page .banner .row {
        display: flex;
        align-items: center;
    }
    .sell-page .banner img {
        width: 100%;
    }
    /***** End Hero Section *****/

    /***** Sales Management Section *****/
    /*Change from column on mobile to row*/
    .sales-management .container .row:first-of-type {
        flex-direction: row;
    }

    .sales-management h2,
    .sales-management h3,
    .sales-management p,
    .sales-management .fa {
        text-align: left;
    }

    .sm-item div {
        margin-left: 20px;
    }

    .sm-item .fa {
        font-size: 40px;
    }

    /***** End Sales Management Section *****/
    /***** Streamline Your Operations Section *****/
    .streamline-operations img {
        float: right;
    }
    /***** End Streamline Your Operations Section *****/
}

@media only screen and (min-width: 992px) {
    /***** Hero Section *****/
    /*Make hero buttons bigger on larger screen*/
    .sell-page .banner .btn-wrap a {
        padding: 13px 20px;
        font-size: 18px;
    }
    .sell-page .banner .btn-wrap a:first-of-type {
        margin-right: 10px;
    }
    /***** End Hero Section *****/

    /***** Passion Statement Section *****/
    .passion h2 {
        font-size: 36px;
    }
    /***** End Passion Statement Section *****/

    /***** Sales Management Section *****/

    .sm-item .fa {
        font-size: 64px;
    }

    /***** End Sales Management Section *****/
}

@media only screen and (min-width: 1200px) {

    .spacer-lg {
        padding: 100px 0;
    }

    /***** Hero Section *****/
    .sell-page .banner h1 {
        font-size: 48px;
    }
    /*Make the hero statistic text larger*/
    .sp-stat-item span:first-of-type {
        font-size: 40px;
    }
    /***** End Hero Section *****/

}

/*  ------------------------------------------------------------------------------------
End Media Queries
------------------------------------------------------------------------------------  */