@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Raleway:wght@400;600&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* outline: 1px solid red; */
}

:root {
  --clr-primary: #000;
  --clr-secondary: #E83630;
  --breakpoint-lg: 998px;
  --breakpoint-md: 768px;
  --breakpoint-sm: 576px;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Open Sans', sans-serif;
}

h1,h2,h3,nav {
  font-family: 'Raleway', 'Open Sans', sans-serif;
  text-transform: uppercase;
  font-weight: 300;
  text-align: center;
}

.cta {
  padding: .5rem 2rem;
  margin: 0 auto;
  background-color: var(--clr-secondary);
  color: #fff;
  text-decoration: none;
  transition: opacity .2s;
}
.cta:hover {
  opacity: .7;
}

header {
  display: grid;
  background-color: var(--clr-primary);
  color: #fff;
  grid-row-gap: 2rem;
  padding: 2rem;
}
header img {
  display: block;
  height: 160px;
  margin: 0 auto;
}

nav button {
  display: none;
  background-color: transparent;
  border: 0;
  outline: 0;
  height: 2rem;
  margin: 0 auto;
  cursor: pointer;
  transition: opacity .2s;
}
nav button:hover {
  opacity: 0.5;
}
nav img {
  height: 100%;
}
nav ul {
  display: flex;
  max-width: var(--breakpoint-lg);
  justify-content: space-between;
  list-style: none;
  margin: 0 auto;
}
nav a {
  color: #fff;
  text-decoration: none;
  font-size: 1.4em;
  transition: opacity .2s;
}
nav a:hover {
  opacity: 0.5;
}

section {
  display: grid;
  padding: 4rem 0;
}
.container {
  width: var(--breakpoint-lg);
  margin: 0 auto;
}

.tyre-companies {
  background-image: linear-gradient(#000, #fff);
}
.tyre-companies--inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}
.tyre-companies--inner #payments {
  display: flex;
  justify-content: center;
  width: 100%;
}

.inset-shadow {
  position: relative;
  z-index: 1;
  overflow-x: hidden;
}
.inset-shadow::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 120%;
  transform: translateX(-50%);
  height: 100%;
  z-index: -1;
  box-shadow: inset 0 0 10px #0009;
}

.hero {
  background-image: url('../imgs/hero-bg.jpg');
  background-attachment: fixed;
  background-size: cover;
  padding: 20vh 0;
}
.hero::after {
  background-color: #0004;
}
.hero--inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  justify-content: center;
  background-color: #000C;
  color: #fff;
  padding: 2rem 4rem;
}
.hero p {
  text-align: center;
  width: 100%;
}
.hero a {
  margin: 0;
}

.why-choose--inner {
  display: flex;
  flex-direction: column;
  gap: 2em;
}
.why-choose--inner ul {
  display: grid;
  gap: 1em;
  column-gap: 4rem;
  grid-template-columns: auto auto;
  margin: 0 auto;
}
.why-choose--inner li {
  display: grid;
  grid-column-gap: 1em;
  grid-template-columns: auto 1fr;
}
.why-choose--inner img {
  width: 1.5em;
}

.what-we-do {
  gap: 4rem;
}
.carousel {
  display: grid;
  grid-auto-flow: column;
  overflow-x: hidden;
}
.carousel .subset {
}
.carousel .carousel-item {
  top: 50%;
  display: grid;
  grid-auto-flow: column;
  animation: ticker 20s linear infinite;
}
.carousel:hover .carousel-item {
  animation-play-state: paused;
}
.carousel .carousel-item img {
  width: 7rem;
  border-radius: 1em;
}
.carousel .carousel-item p {
  margin: auto;
  text-align: center;
  padding: 0 2rem;
  width: 12rem;
}

@keyframes ticker {
  0% {
    transform: translateX(-152rem);
  } 100% {
    transform: translateX(0);
  }
}

.servicing h2 {
  margin-bottom: 2rem;
}
.servicing p {
  text-align: center;
}
.servicing p+p {
  margin-top: .5rem;
}

.mot {
  background-image: url('../imgs/mot-bg.jpg');
  background-attachment: fixed;
  background-size: cover;
}
.mot::after {
  background-color: #0004;
}
.mot--inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  column-gap: 4rem;
  background-color: #000C;
  color: #fff;
  padding: 2rem 4rem;
}
.mot--inner > :not(.right):not(.left) {
  grid-column: 1/3;
}
.mot ul {
  display: grid;
  gap: .5rem;
  list-style: none;
  height: 100%;
}
.mot li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
}
.mot li p {
  margin-right: auto;
}
.mot li img {
  height: 1.5em;
}
.mot .left {
  display: grid;
  text-align: justify;
}
.mot #vosa {
  margin: 1rem auto;
}
.phone-link {
  text-decoration: none;
  font-weight: bolder;
  color: red;
  opacity: 0.7;
  transition: opacity .1s;
}
.phone-link:hover {
  opacity: 1;
}
.mot--inner > p {
  text-align: center;
}

.tyres--inner {
  display: grid;
}
.tyres h2 {
  margin-bottom: 2rem
}
.tyres p {
  text-align: center;
}
.tyres p+p {
  margin-top: .5em;
}
.tyres--companies {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
}

.tyres--companies img {
  height: 50px;
}
.tyres #captionee {
  width: 100%;
  max-width: 700px;
  margin: 2rem auto;
}
.tyres--inner > a {
  margin-bottom: 2rem;
}

.contact h2 {
  margin-bottom: 2rem;
}
.contact iframe {
  width: 100%;
}
.contact p {
  text-align: center;
  margin: .5rem 0;
}
.contact li {
  display: flex;
  font-size: 1.4em;
  justify-content: space-between;
  max-width: 40rem;
  margin: auto;
}
.contact li span {
  font-weight: bolder;
}

footer {
  display: grid;
  gap: 1rem;
  background-color: var(--clr-primary);
  padding: 2rem 1rem;
  color: #fff;
  text-align: center;
}
footer nav {
  padding-bottom: 1rem;
}
footer div {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}
footer img {
  height: 4rem;
}

@media (max-width: 1024px) {
  .container {
    width: var(--breakpoint-md);
  }
}

@media (max-width: 768px) {
  nav button {
    display: block;
  }
  nav ul {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 1em;
    padding: 2em 0 0;
  }
  nav ul.open {
    display: flex;
  }

  footer nav {
    display: none;
  }

  .container {
    width: auto;
    max-width: var(--breakpoint-sm);
  }

  .tyres #captionee {
    width: 100%;
    height: auto;
  }

  .mot--inner {
    grid-template-columns: 1fr;
  }
  .mot--inner > :not(.right):not(.left) {
    grid-column: 1/2;
  }
  .mot--inner .right {
    display: grid;
  }
  .mot--inner ul {
    margin: auto;
  }

  .why-choose--inner ul {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 576px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .tyres img {
    height: auto;
    width: 80%;
  }

  .desktoponly {
    display: none;
  }
  .tyre-companies img {
    height: auto;
    width: 80%;
  }
}