body {
  background: #101010;
  color: #808080;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
}

@media (min-width: 768px) {
  .container {
    width: 700px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 900px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1000px;
  }
}

.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px; }

/* Headings */
h1,h2,h3,h4 {
  color: #fff;
  font-weight: bold;
}
h1{ font-size: 30px; }
h2 { font-size: 20px; }

/* Images */
img { max-width: 100%; height: auto; }

/* Buttons */
.btn {
  background: transparent;
  border: 2px solid #fff;
  border-radius: 0px;
  box-shadow: none;
  color: #fff;
  padding: 12px 18px;
  font-size: 13px;
  font-weight: bold;
  transition: all 0.4s ease-in;
}
.btn:hover {
  background: #BFD7EA;
  border-color: transparent;
}

/* Email input */
.email {
  margin-top: 10px;
  padding: 8px 12px;
}

/* Navbar */
.navbar-default {
  background: #323132;
  border: none;
  border-left: 6px solid #C75000;
  padding-right: 40px;
  margin: 0 !important;
  position: relative;
  top: 20px;
}
.navbar-default .navbar-brand {
  font-size: 40px;
  line-height: 40px;
  padding-top: 4px;
}
.navbar-default .navbar-nav li a {
  color: #f2f2f2;
  font-size: 13px;
  font-weight: 400;
  line-height: 40px;
  transition: all 0.4s ease-in;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #C75000;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #839788;
  background-color: transparent;
}
.navbar-default .navbar-toggle {
  background: #C75000;
  border-radius: 0px;
  border: none;
  margin-top: 20px;
  margin-bottom: 30px;
}
.navbar-default .navbar-toggle .icon-bar {
  background: #fff;
  border-color: transparent;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus { 
  background-color: transparent;
}

/* Active nav link background fix */
.active { background: #333; }

/* Home section */
#home {
  background: url('../images/home-bg.png') no-repeat;
  background-size: cover;
  background-position: center;
  min-height: 300px;
  padding-top: 80px;
  padding-bottom: 60px;
}
#home h1,#home h3 {
  line-height: 25px;
  font-size: 40px;
  }
#home h2,#home h3 {
  line-height: 15px;
  font-size: 25px;
}
#home h3,#home h3 {
  line-height: 10px;
  font-size: 15px;
}



/* Divider section */
.divider {
  color: #fff;
  text-align: center;
}
.divider .fa {
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: 32px;
  width: 80px;
  height: 80px;
  line-height: 76px;
  text-transform: capitalize;
}
.divider h2 { padding-bottom: 4px; }
.divider .divider-wrapper {
  padding: 40px 20px;
  position: relative;
  bottom: 40px;
  transition: all 0.4s ease-in;
}
.divider .divider-wrapper:hover {
  bottom: 60px;
  cursor: pointer;
}
.divider .divider-one { background: #839788; }
.divider .divider-two { background: #BFD7EA; }
.divider .divider-three { background: #FFCB47; }

/* About section */
#about-header {
  background: url('../images/about-header.png') no-repeat;
  background-size: cover;
  background-position: center;
  min-height: 300px;
  padding-top: 160px;
}
#about { padding-top: 60px; }
#about .container { background: #191919; }
#about .col-md-6 { padding: 0; margin: 0; }
#about .about-des { padding: 20px 20px 0 30px; }
#about .btn { margin-top: 30px; }

/* Services section */
#services-header {
  background: url('../images/service-header.jpg') no-repeat;
  background-size: cover;
  background-position: center;
  min-height: 300px;
  padding-top: 160px;
}
#services { padding-top: 60px; }
#services .container {pad background: #191919; }
#services .col-md-6 { padding: 0; margin: 0; }
#services .about-des { padding: 20px 20px 0 30px; }
#services .btn { margin-top: 30px; }


/* Team section */
#team { padding: 60px 0 80px; }
#team h2 { padding-bottom: 30px; text-align: center; }
#team h3 { padding-bottom: 10px; }
#team .team-wrapper {
  border: 2px solid #303030;
  padding: 20px;
}
#team h4 { color: #C75000; }
#team img { opacity: 0.8; }
#team hr { border-color: #303030; margin: 80px 0; }
#team strong { display: inline-block; padding: 12px 0 10px; }
#team .progress { border-radius: 0px; height: 4px; }

/* Portfolio section */
#portfolio-header {
  background: url('../images/portfolio-header.jpg') no-repeat;
  background-size: cover;
  background-position: center;
  min-height: 300px;
  padding-top: 160px;
}
#portfolio {
  text-align: center;
  padding: 80px 20px 60px;
}
#portfolio h2 { padding-bottom: 18px; font-size: 3rem; }
#portfolio .col-md-4, #portfolio .col-md-3 { padding: 0; margin: 0; }
#portfolio p { margin-bottom: 40px; color: #c5c5c5; }
#portfolio img { width: 100%; transition: all 0.4s ease-in; opacity: 0.8; }
#portfolio img:hover { opacity: 1; }
#portfolio .btn { margin-top: 30px; }

/* Contact section */
#contact-header {
  background: url('../images/contact-header.jpg') no-repeat;
  background-size: cover;
  background-position: center;
  min-height: 300px;
  padding-top: 160px;
}
#contact { padding: 60px 0; }
#contact h2 { text-align: center; padding-bottom: 30px; }
#contact .form-control {
  background: #202020;
  border: none;
  border-radius: 0px;
  box-shadow: none;
  margin-bottom: 20px;
  transition: all 0.4s ease-in;
  color: #fff;
}
#contact .form-control:focus { background: #404040; }
#contact input { height: 53px; }
.form-control::-moz-placeholder { color: #fff; opacity: 1; }
.form-control:-ms-input-placeholder { color: #fff; }
.form-control::-webkit-input-placeholder { color: #fff; }

/* Footer section */
footer {
  background: #1c1c1c;
  padding: 60px 0;
}
footer .fa { font-size: 18px; margin-right: 10px; padding: 5px; }
footer h3 { padding-bottom: 10px; }
footer .newsletter p { padding-bottom: 10px; }
footer .form-control {
  background: transparent;
  border: 2px solid #fff;
  border-radius: 0px;
  padding-bottom: 10px;
}
footer .form-control:focus,
footer .form-control:hover {
  color: #fff;
  background: #806040;
  border-color: transparent;
}
footer .input-group-addon { background: #fff; }
footer a, footer a:visited { font-size: 14px; color: #999; }
footer a:hover { color: #fff; text-decoration: none; }

/* Copyright */
.copyright { margin: 10px 0; }
.copyright p { padding-top: 20px; }
.social-icons { padding: 0; margin: 0; }
.social-icons li {
  display: inline-block;
  list-style: none;
  background: #303030;
  margin: 10px 0 0 0;
}
.social-icons li a {
  color: #909090;
  text-decoration: none;
  font-size: 20px;
  padding: 10px 15px;
  text-align: center;
  transition: all 0.4s ease-in;
}
.social-icons li a:hover {
  background: #839788;
  color: #fff;
}

/* Car Showcase section */
#car-showcase {
  padding: 60px 20px;
  background-color: #101010;
  text-align: center;
}
#car-showcase .container { max-width: 1200px; margin: 0 auto; }
#car-showcase h2 { margin-bottom: 20px; font-size: 3rem; }
#car-showcase p { margin-bottom: 40px; color: #c5c5c5; }

/* Car Cards */
.car-card {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 30px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}
.car-card:hover { transform: translateY(-5px); }
.car-card img { max-width: 100%; border-radius: 8px; margin-bottom: 15px; }
.car-card h3 { margin: 10px 0 5px; font-size: 1.2rem; color: #5c5c5c; }
#car-showcase .car-card p { color: #C75000 !important; font-weight: bold; }

/* Car Card Buttons */
#car-showcase .car-card .btn {
  display: inline-block;
  margin-top: 10px;
  border-color: #C75000;
  color: #C75000;
  transition: all 0.3s ease;
}
#car-showcase .car-card .btn:hover {
  background: #C75000;
  color: #fff;
  border-color: transparent;
}

/* Media Queries */
@media (max-width: 980px) {
  .divider .divider-wrapper { margin-bottom: 20px; }
  #about .about-des { padding-bottom: 40px; }
  #team .team-wrapper { margin-bottom: 40px; }
  #contact h3 { padding-top: 20px; }
  #contact .btn { margin-bottom: 20px; }
  footer h3 { padding-top: 30px; }
}
/* ------------------------------------
   Extra mobile optimisation (under 768px)
   ------------------------------------ */
@media (max-width: 767px) {
  /* HERO SECTION */
  #home {
    padding-top: 120px;
    padding-bottom: 80px;
    text-align: center;
    background-position: center top;
  }

  #home h1,
  #home h3 {
    font-size: 3rem;       /* reduces oversized font on small screens */
    line-height: 1.4;      /* fixes the squashed look */
    padding: 0 15px;       /* adds space from screen edges */
  }

  /* General spacing adjustments */
  #about,
  #team,
  #portfolio,
  #car-showcase,
  #contact {
    padding-left: 15px;
    padding-right: 15px;
  }

  #car-showcase h2 {
    font-size: 2rem;
  }

  .car-card {
    margin-bottom: 20px;
  }
}
@media (max-width: 767px) {
  /* stronger selectors */
  body #home h1,
  body #home h3 {
    font-size: 2rem !important;
    line-height: 1.4 !important;
    padding: 0 15px !important;
  }

  body #home {
    padding-top: 120px !important;
    padding-bottom: 80px !important;
    text-align: center !important;
  }
}
html {
  scroll-behavior: smooth;
}

/* Prevent section titles from hiding under fixed navbar */
[id] {
  scroll-margin-top: 80px; /* Adjust based on navbar height */
}
#back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  display: none;           /* hidden by default */
  background: #C75000;
  color: #fff;
  font-size: 24px;
  width: 50px;
  height: 50px;
  line-height: 50px;      /* centers the arrow vertically */
  text-align: center;
  cursor: pointer;
  z-index: 9999;
  border-radius: 4px;     /* small rounding, makes it square-ish */
  transition: background 0.3s;
}

#back-to-top:hover {
  background: #839788;
  color: #fff;
}
/* --- Services Section --- */
#services {
  padding-top: 60px;
  padding-bottom: 80px;
  background: #191919;
}

#services .container {
  background: #191919;
}

#services .service-block {
  margin-bottom: 60px;
}

#services .service-block:last-child {
  margin-bottom: 0;
}

#services img {
  border-radius: 8px;
  max-width: 100%;
}

@media (min-width: 992px) {
  #services .service-block.reverse {
    display: flex !important;
    align-items: center;
  }

  #services .service-block.reverse .col-md-6 {
    float: none !important;
    width: 50%; /* <-- added this */
  }

  #services .service-block.reverse .about-des {
    order: 1; /* text first */
  }

  #services .service-block.reverse img {
    order: 2; /* image second */
    max-width: 100%;
  }

  /* Alternate even blocks alignment for other blocks */
  #services .service-block:nth-child(even):not(.reverse) .col-md-6:first-child {
    float: right;
  }

  #services .service-block:nth-child(even):not(.reverse) .col-md-6:last-child {
    float: left;
  }
}
/* Reverse layout for service blocks with the 'reverse' class */
.service-block.reverse {
  flex-direction: row-reverse;
}
/* Our Process section */
#our-process {
  background: #2c2c2c; /* dark garage-style background */
  color: #fff;
  padding: 40px 10px;
}

#our-process h3 {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #C75000; /* accent color */
}

#our-process p {
  color: #c5c5c5;
  font-size: 16px;
  margin-bottom: 30px;
}

#our-process .step {
  margin-bottom: 40px;
}

#our-process .step i {
  font-size: 48px;
  color: #C75000;
  margin-bottom: 15px;
  display: block;
}

#our-process .step h4 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #fff;
}

#our-process .step p {
  font-size: 14px;
  color: #ccc;
}

/* Animation on scroll */
.animate-step {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease-out;
}

.animate-step.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 767px) {
  #our-process h3 {
    font-size: 28px;
  }
  #our-process .step i {
    font-size: 36px;
  }
  #our-process .step h4 {
    font-size: 18px;
  }
}
/* =========================================
   Section Backgrounds and Spacing
   ========================================= */

/* Light background for Team section */
.section-bg-light {
  background-color: #f9f9f9;  /* very light grey */
  padding: 80px 0;            /* top & bottom spacing */
}

/* Darker background for Our Process section */
.section-bg-dark {
  background-color: #ffffff;  /* white or off-white */
  padding: 80px 0;
}

/* Optional: add spacing between sections */
#team {
  margin-bottom: 40px;
}

#our-process {
  margin-top: 40px;
}

/* Optional: style steps differently on dark background */
#our-process .step {
  padding: 20px;
  margin-bottom: 30px;
}
/* About Us / Team section Font Awesome icons */
#team .fa {
  color: #C75000;       /* your brand colour */
  font-size: 24px;      /* adjust size if needed */
  transition: color 0.3s ease; /* smooth hover transition */
}

#team .fa:hover {
  color: #839788;       /* example hover colour */
}
/* =========================================
   Proper logo sizing for mobile & tablet
   ========================================= */
@media (max-width: 991px) {
  .navbar-brand img {
    width: auto !important;
    max-width: 180px !important; /* ? adjusts to a readable, balanced size */
    height: auto !important;
    margin: 6px 0 0 0;
  }

  /* Keep toggle and logo aligned */
  .navbar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .navbar-toggle {
    margin: 0;
  }

  /* Optional: slightly tighten link spacing in collapsed nav */
  .navbar-default .navbar-nav > li > a {
    font-size: 15px;
    padding: 10px 12px;
  }
}