@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');

body{
   background-color: black;
}

.roboto{
   font-family: 'Roboto', sans-serif;
}

.navbar-inverse .navbar-nav>li>a{
   color: white;
}
@media (max-width: 767px){
   .navbar-collapse{
      background-color: black;
   }
   .navbar-toggle{
      background-color: black
   }
}
.navbar-inverse{
   background-color: black;
   border: none;
}
.navbar-inverse .navbar-nav>li>a:hover{
   color: red;
   border-bottom: red 3px solid;
}
.showcase-content h1{
   font-family: 'Roboto', sans-serif;
}
/* Utitlity class */
.btn-services{
   width: 10rem;
}

/* Showcase */
#showcase {
   /* margin-top: 6vh; */
   font-family: 'Roboto', sans-serif;
   /* background:#333 url(https://source.unsplash.com/user/prathamshelke/likes/1600x900) no-repeat center center/cover; */
   background:#333 url(../img/backgroung.jpg) no-repeat center center/cover;
   color: #ffffff;
   text-align: center;
   height: 100vh;
}

#showcase .showcase-content {
   height: 100%;
   padding-top: 30vh;
   margin: auto;
   background: rgba(0, 0, 0, 0.45);
}

/* Whats App */
.whats-app{
   position: fixed;
   bottom: 0;
   right: 0;
   padding-right: 20px;
   padding-bottom: 20px;
   z-index: 1;
}
/* Call */
@media (min-width: 768px){
   .call{
      display: none;
   }
}
@media (max-width: 767px){
   .call{
      
      position: fixed;
      bottom: 0;
      left: 0;
      padding-right: 20px;
      margin-bottom: 180px;
      z-index: 1;
   }
}


/* Who we are */
.who-are-we h1{
   /* font-size: 5vw; */
   text-align: center;
}
.who-are-we p{
   font-size: 15px;
}
.who-are-we{
   color: white;   
}

@media (min-width: 992px) {
   .heading h1{
      font-size: 60px;
   }
}

@media (max-width: 991px) {
   .heading h1{
      font-size: 35px;
   }
   .heading h3{
      font-size: 15px;
   }
}

/* Reason Item */
.img-thumbnail{
   position: relative;
   left:10vw;
   background-color:red; 
   border-radius:50%; 
   padding:20px;
   
}
.glyphicon{
   text-align: center;
   font-size:50px; 
   background-color:red; 
   color:white;
}
.caption{
   font-family: 'Roboto', sans-serif;
   color:white; 
    
   text-align:center;
}
.reason-item{
   margin-top: 5px;
   margin-bottom: 5px;
}

/* Detailing */
.btn-detail{
   background-color:black; 
   color:white;
}
.btn-detail:hover{
   background-color: red;
   color: white;
}

.motto{
   color: white;
   padding-left: 100px;;
   padding-right: 100px;;
}

@media (min-width: 768px){
   .motto p{
      font-size:35px;
   }   
}
@media (max-width: 767px){
   .motto p{
      font-size:15px;
   }
}

/* Social */
.social{
   text-align: center;
   padding-top: 20px;
   padding-bottom: 20px;
}
.social-item{
   display: inline-block;
   color: white;
}
.social-item i{
   font-size: 40px;;
   padding-right: 40px;
   padding-left: 40px;
}
.social-item a{
   color: white;
}
.social-item a:hover{
   color: red;
}
/* Copyright */
.copyright{
   text-align: center;
   padding-top: 30px;
   padding-bottom: 30px;
   color:white;
}

/* ------------------------------------------------------------------------------------ */
/* About Us Page */
.about-photo{
   height: 210px;
   background: url("../img/about.jpg")  no-repeat center center/cover;
   margin-bottom: 50px;
}
.black{
   height: 100%;
   width: 100%;
   background: rgba(0, 0, 0, 0.45);
}

.about-us p{
   font-size: larger;
   margin-bottom: 40px;
}
.about-para-img img{
   padding-left: 50px;
   height: 400px;
   background-color: black;
}

@media (min-width: 768px){
   .about-para-img img{
      padding-left: 50px;
      height: 400px;
      background-color: black;
   }
}
@media (max-width: 767px){
   .about-para-img img{
      height: 300px;
      background-color: black;
   }
}

@media (min-width: 768px){
   .our-studio .heading{
      font-family: 'Roboto', sans-serif;
      margin-bottom: 30px;
   }
   .our-location .heading{
      font-family: 'Roboto', sans-serif;
      margin-bottom: 40px;
   }
   .about-us .heading{
      font-family: 'Roboto', sans-serif;
      margin-bottom: 30px;
   }
}
@media (max-width: 767px){
   .our-studio .heading h3{
      font-family: 'Roboto', sans-serif;
      margin-bottom: 30px;
      font-size: 30px;
   }
   .our-location .heading h3{
      font-family: 'Roboto', sans-serif;
      margin-bottom: 40px;
      font-size: 30px;
   }
   .about-us .heading h3{
      font-family: 'Roboto', sans-serif;
      margin-bottom: 30px;
      font-size: 30px;
   }
}



.map iframe{
   display: block;
   margin: auto;
}
@media (min-width: 800px){
   .map iframe{
      width: 800px;
      height: 600px;
   }
}
@media (max-width: 799px) and (min-width: 650px){
   .map iframe{
      width: 600px;
      height: 450px;
   }
}
@media (max-width: 649px){
   .map iframe{
      width: 330px;
      height: 300px;
   }
}

/* ---------------------------------------------------------------------- */
/* Services */
.exterior-detailing-services{
   margin-top: 80px;
}

/* -------------------------------------------------------------------------------------------- */
/* Contact Us */
.contact-form-heading{
   padding-top: 100px;
   padding-bottom: 40px;
}
/* ---------------------------------------------------------------------------------------------- */
/* Appointment */
/* @media (min-width: 768px){
   .footer{
      padding-top: 120px;
   }
} */
/* ------------------------------------------------------------------------------------------------ */
/* Warranty */
@media (min-width: 767px){
   .footer{
      width: 100%;
      position: absolute;
      bottom: 0;
   }
}