/** Customizations to landing page **/
:root {
    --primary: #273891;
    --primary-color: #273891;
    --green: #68b65b;
}

body {
    font-family: var(--body-font-family), Arial, Helvetica, sans-serif;
}

header { box-shadow: 2px 5px 5px #ccc; }

.text-primary { color: var(--primary); fill: var(--primary); }

section { padding-top: 3rem; padding-bottom: 3rem; }

.visibility-hidden { visibility: hidden; margin-bottom: -80px; }

.btn-primary { color: #fff; background-color: var(--primary); }
.btn-success { color: #fff !important; }
.btn-default { background: #fff; border: 1px solid var(--bs-border-color); }

#hero {
    height: 715px;
    background: url('../img/playstation-5-slim-with-controller_1.jpg') no-repeat center bottom;
    color: #ffffff;
    background-size: cover;
}

#repairTypes { box-shadow: inset 0px 0px 20px 0px #ccc; }

#repairProcess { background: #FFF; }
#repairProcess .process-step {
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 1.3;
    font-size: 2rem;
    font-weight: 600;
    border: 6px solid gold;
    border-radius: 1000px;
    color: #505050;
    position: relative;
    top: 25px;
    left: 25px;
}
#repairProcess .card-img-top { width: 150px; height: 150px; margin: auto; }

#testimonial1 { box-shadow: 0 0 20px 5px #ccc; }
.testimonial img.stars { max-width: 175px; }
.testimonial .blockquote { border-left: none; }
.testimony-image { max-width: 200px; }


#whyUseUs { background: #54595f; color: #fff; }

#personalService { background: var(--primary); color: #fff; box-shadow: 0 0 35px 2px #18181880;}

#startHereBtn {
    position: fixed;
    right: -95px;
    top: 50%;
    transform: rotate(-90deg);
}
#startHereBtn .btn { border-bottom-right-radius: 0; border-bottom-left-radius: 0; }

#serviceStart { background: var(--green); min-height: 500px; }
#serviceStart #ps5-repair-form { border: 1px solid #454545; border-radius: 8px; padding: 2rem; background: #f9f9f9; }
#serviceStart #ps5-repair-form .question { background: #fff; padding: 10px; border: 1px solid #ddd; }
label { text-align: center; }

footer { background: #fff; font-size: smaller; }
/** RESPONSIVENESS ***************************************************************************/

@media (min-width: 768px) {
    #repairProcess .card-img-top { margin-bottom: 2rem; }
    .w-75-md { width: 75%; }
}

@media (min-width: 992px) {
    .w-50-l { width: 50%; }
}

@media (min-width: 1500px) {
    #hero {
        background-size: 1500px;
    }
}

@media (max-width: 768px) {
    #hero { background-size: 0; color: #000; height: auto; }
    #startHereBtn { top: unset; transform: rotate(0deg); right: unset; bottom: 0; left: calc(50% - 75px); }
    #startHereBtn .btn { width: 150px; padding: 10px; }
    #footer { margin-bottom: 50px; }
}