@import './colors.css';

/* ------------ Landing Section ------------ */

.landing-image-container.model-x {
    background-image: url(../assets/images/sell-my-tesla/modelx-header-bk-mobile.jpg);
}

.landing-image-container.model-s {
    background-image: url(../assets/images/sell-my-tesla/models-header-bk-mobile.jpg);
}

.landing-image-container.model-y {
    background-image: url(../assets/images/sell-my-tesla/modely-header-bk-mobile.jpg);
}

.landing-image-container.model-3 {
    background-image: url(../assets/images/sell-my-tesla/model3-header-bk-mobile.jpg);
}


/* ------------ Information Section ------------ */


/* Section one */

.information-sec-one {
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
}

    .information-sec-one > * {
        margin: 1em 0;
    }

    .information-sec-one > h2 {
        max-width: 25em;
    }

    .information-sec-one > p {
        font-weight: 400;
    }

/* Section two */

.information-sec-two > h4 {
    max-width: 25em;
    margin-bottom: 2em
}

.journey-info-sec {
    width: 22em;
}

    .journey-info-sec > img {
        width: 100%;
        height: 100%;
    }

/* Section three */

.information-sec-three {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 2em;
}

    .information-sec-three > img {
        width: 100%;
        height: auto;
        max-width: 40em;
    }

.information-descrition-text {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.information-descrition-text > h3, h2 {
    color: #0072c0;
    margin: 0.4em 0px;
}

.value-my-tesla > h2, h1 {
    margin: auto;
}

.value-my-tesla > ul {
    list-style-type: circle;
    margin-left: 5em;
    margin-bottom: 2em;
}

.value-my-tesla > p {
    margin-bottom: 2em;
}

.information-grid {
    clear: both;
    position: relative;
    float: left;
    width: 100%;
    box-sizing: border-box;
}

.page-content-wrapper {
    background: white;
    width: 100%;
    margin: auto;
    margin-top: auto;
    padding-bottom: 0;
    margin-top: 0;
}

.standard-wrapper {
    max-width: 1425px;
    width: 100%;
    box-sizing: border-box;
    margin: auto;
    position: relative;
    float: none;
}

.usp-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

    .usp-row img {
        height: 80px !important;
        width: auto;
        margin: 0 auto 1rem;
    }

    .usp-row .col p {
        color: black;
        width: 100%;
        padding-bottom: 0 !important;
    }

    .usp-row p {
        font-weight: bold;
    }

    .usp-row .col {
        position: relative;
        flex: 0 0 44%;
        padding: 2rem 1rem;
        background: #f5f5f5;
        border-radius: .3rem;
        box-shadow: 0 3px 10px rgb(0 0 0 / 20%);
        margin-bottom: 2%;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }

        .usp-row .col p::after {
            font-family: 'Font Awesome 5 Free';
            content: "\f058";
            position: absolute;
            color: green;
            display: flex;
            justify-content: center;
            align-items: center;
            right: 1rem;
            top: 0;
            font-size: 2rem;
            opacity: .5;
        }


/* ------------ Responsive Breakpoints ------------ */
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .usp-row .col {
        flex: 0 0 100%;
        padding: 2rem 0 !important;
    }

    .usp-row img {
        height: 80px !important;
        width: auto;
        margin: 0 auto 1rem;
    }
}

/* Medium devices (landscape tablets, 601px and up) */
@media only screen and (min-width: 601px) {
}


@media only screen and (min-width: 768px) {
    .landing-image-container.model-x {
        background-image: url(../assets/images/sell-my-tesla/modelx-header-bk.jpg);
    }

    .landing-image-container.model-s {
        background-image: url(../assets/images/sell-my-tesla/models-header-bk.jpg);
    }

    .landing-image-container.model-y {
        background-image: url(../assets/images/sell-my-tesla/modely-header-bk.jpg);
    }

    .landing-image-container.model-3 {
        background-image: url(../assets/images/sell-my-tesla/model3-header-bk.jpg);
    }
}


/* Large devices (laptops/desktops, 1024px and up) */
/* This is probably the one I'll be using more than anything. */
@media only screen and (min-width: 1024px) {
    .landing-container {
        height: calc(100vh - 12vh);
    }

    /* ------------ Common ------------ */
    h1 {
        font-size: 30pt;
    }

    .content-container {
        width: 50%;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1216px) {
    .usp-row .col {
        flex: 0 0 29%;
    }

    .usp-row img {
        height: 100px;
    }

    .information-sec-three {
        flex-direction: row;
        align-items: center;
        padding: 0 2em;
    }

    .information-descrition-text {
        display: flex;
        align-items: flex-start;
        margin: 0 2.5em 0 5em;
    }
}