@charset "utf-8";

/* Reset */
header, hgroup, nav, section, article, aside, footer, figure, figcaption, details, summary {
    display: block;
}
html, body, figure, dt, dd, li, form, fieldset, legend, input, select, textarea, button {
    padding: 0;
    margin: 0;
}
p, ul, ol, dl, table, blockquote {
    padding: 0;
    margin: 0 0 1.5em;
}
input, button, textarea, select, optgroup, option {
    font-family: inherit;
    font-size: inherit;
}
fieldset {
    border: 0;
}

/* Text Font */
h1, h2, h3, p, label, input, textarea, button { font-family: sans-serif;}

/* parallax */
.parallax {
  background-image: url('../images/bmw-front-grill.jpg');
  min-height: 700px;
    position: relative;
  /* parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* company logo and info */
.info {
    
    text-shadow: 2px 2px #000;
    text-transform: uppercase;
    position: absolute;
    margin-left: 2%;
    margin-right: 2%;
}

.info h1 {
    color: #99ff00;
    font-size: 4em;
}
.info p {
    color: #0099ff;
    font-size: 2em;
    margin-top: -50px;
    margin-left: 20px;
}

.number {
    position: absolute;
    top: 40%;
    left: 35%;
    background-color: rgba(0, 153, 255, .79);
    height: 40px;
    padding: 18px;
    border: 1px solid #fff;
    font-weight: 600;
}
.number p {
    color: #99ff00;
    font-size: 2em;
    text-transform: uppercase;
    text-shadow: 2px 2px #000;
}

 /* Showcase section */
.showcase {
    margin-top: 20px;
    background-image: url(../images/bmw-sport-3:4-view-ms-2.jpg);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;  
    min-height: 600px;
    width: 100%;
    position: relative;
}
/* showcase Section*/

.lables {
    width: 100%;
    height: 100%;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.5em;
    color: #99ff00;
    text-shadow: 2px 2px #000;
    position: absolute;
}

/* showcase label positioning */
.lables div {
    width: auto;
    height: 30px;
    background: ;
    text-align: center;
    position: absolute;
    background-color: #008ae6;
    padding:  5px;
}
.wheel{
    left: 55%;
    top: 85%;
}
.shine {
    right: 0;
    top: 60%;
    margin-right: 2%;
}
.headl {
    top: 60%;
    left: 10%;
}
.pw {
    left: 55%;
    top: 50%;
}
.engine {
    top: 35%;
    left: 4%;
}
.hwash {
    right: 0;
    top: 26%;
    margin-right: 2%;
}
.carpet {
    right: 0;
    top: 9%;
    margin-right: 2%;
}
.intd {
    left: 45%;
}
.pwash {
    top: 10%;
    left: 10%;
}

/* services section */
.service-details {
    display: flex;
    flex-wrap: wrap;
    background-color: #008ae6;
    justify-content: space-around;
}
.service {
    width: 30%;
    padding: 0 20px;
}
.service h2 {
    font-size: 1.5em;
    text-transform: uppercase;
    color: #99ff00;    
}
.service ul {
    list-style-type: none;
}
.service ul li {
    font-size: 1.1em;
    color: #fff;
}

/* Footer Section */
footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 50px;
    background-color: #99ff00;
    color: #0099ff;
    font-size: 1.2em;
}
footer h4 {
    text-transform: uppercase;
    font-weight: 100;
}
footer address {
    font-style: normal;
}
.mylogo {
    width: 30%;
    text-align: center;
    margin-top: 0px;
    }
footer img {
    width: 30%;
}
.mylogo p {
    font-size: .9em;
}

@media only screen
    and (max-width: 600px)
    
    and (min-width: 320px)
{
    footer img {
        width: 80%;
    } 
}
/* media queries */

/* 320 by 370 vertical  iphone 4*/
@media only screen
    and (max-width: 370px)
    
    and (min-width: 320px)
{
    .parallax {
        min-height: 400px;
    }
    .showcas {
        background-color: navy;
    }
    .info h1 {
        font-size: 1em;
    }
    .info p {
        margin-top: -20px;
    }
    .number {
        left: 10%;
        top: 40%;
        height: 15px;
    }
    .number p {
        font-size: 1em;
    }
    .left p, .right p {
        font-size: 0.9em;
    }
    
/*showcase label possitioning */    
    .showcase {
        background-position: center;
       
        max-height: 300px;
    }
    .lables {
        font-size: 1em;
    }
    
   .
    .service {
        width: 100%;
    }
    
    .mylogo {
        margin-top: 30px;
    }
}
/* 375 by 410 vertical iphone 4*/
@media only screen
    and (max-width: 420px)
    
    and (min-width: 375px)
{
    .showcase {
        
        max-height: 300px;
    }
    .parallax {
        min-height: 400px;
    }
    .info {
        font-size: 1em;
    }
    .info p {
        margin-top: -20px;
    }
    .number {
        left: 15%;
        top: 30%;
        height: 15px;
    }
    .number p {
        font-size: 1em;
    }
    
    .service {
        width: 100%;
    }
    
}
/* 768 by 1000 vertical iphone 6 */
@media only screen
    and (max-width: 1000px)
    
    and (min-width: 768px)
{
    .showcase {
        
    }
    .info h1 {
        font-size: 3.7em;
    }
    .info p {
        margin-top: -40px;
    }
    .number {
        text-align: center;
        font-size: .9em;
        left: 25%;
        top: 50%;
    }
/* showcase label positioning */    
    .wheel {
        left: 40%;
    }
    .pw {
        left: 55%;
    }
    .service {
        width: 44.7%;
    }
    
}

/* 1024 by 1366 veritcal*/
@media only screen
    and (max-width: 1366px)
    and (min-width 1026px)
{
    .showcase {
        
    }
    .info h1 {
        font-size: 1em;
    }
    .number {
        top: 10%;
    }
}

/* 480 by 320 horizontal */
@media only screen
    and (max-width: 480px)
    
    and (min-width: 320px)
{
    .parallax {
        min-height: 400px;
    }
    .showcase {
        
        min-height: 400px;
    }
    .info h1 {
        font-size: 2.7em;
    }
    .info p {
        font-size: 1.5em;
        margin-top: -25px;
    }
    .number {
        font-size: 1.2em;
        left: 10%;
        top: 60%;
        padding: 10px;
    }
    .lables {
        font-size: 1.1em;
    }
    .intd {
        left: 30%
    }
    .carpet {
        top: 10.1%;
    }
    .pwash {
        left: 2%;
        top: 20%;
    }
    .engine {
        top: 36%;
        left: 2%;
    }
    .headl {
        left: 2%;
    }
    .wheel {
        left: 35%;
    }
    .mylogo {
        margin-top: 10%;
    }
}

/* 667 by 736 horizontal */
@media only screen
    and (max-width: 736px)
    
    and (min-width: 667px)
{
    .showcase {
        
        min-height: 500px;
    }
    .number {
        top: 55%;
        left: 18%;
        font-size: .9em;
    }
    .wheel {
        left: 40%;
    }
}

/* 1024 by 1366 horizontal  ipad pro */
@media only screen
    and (max-width: 1366px)
    
    and (min-width: 1024px)
{
    .showcase {
       
    }
    
}