/*----------------------------------------------------
    IMPORT FONTS
------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Roboto:wght@300;400;500;700&display=swap');

:root {
  --uc-red: #ff0000;
  --uc-red-dark: #cb0000;
  --uc-black: #000;
  --uc-gray-dark: #1c1c1c;
  --uc-gray-light: #f5f5f5;

  --custom-scrollbar-width: 8px;
  --custom-scrollbar-track-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  --custom-scrollbar--track-border-radius: 0;

  --custom-scrollbar-thumb-bg: #ccc;
  --custom-scrollbar-thumb-border-radius: 0;
  --custom-scrollbar-thumb-outline: none;
}

@media only screen and (max-width: 399px) {
    html {
        font-size: 14px;
        font-weight: 300;
    }
}
@media only screen and (min-width: 400px)  {
    html {
        font-size: 16px;
    }
}
/* ================================
   UC Rides Typography Styles
   Font Pair: Montserrat + Roboto
   ================================ */

body {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #f5f5f5;
  line-height: 1.6;
  background-color: #000;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  color: #fff;
  line-height: 1.2;
  font-weight: 700;
}

h1 {
  font-size: 2.8rem;
  letter-spacing: 1px;
}

h2 {
  font-size: 2.4rem;
  letter-spacing: 0.8px;
}

h3 {
  font-size: 2.2rem;
  letter-spacing: 0.6px;
}

h4 {
  font-size: 1.6rem;
  font-weight: 600;
}

h5 {
  font-size: 1.3rem;
  font-weight: 400;
}

h6 {
  font-size: 1rem;
  font-weight: 500;
}

/* Paragraphs & Lists */
p, li, a, span {
  font-family: 'Roboto', sans-serif;
  color: #777777;
  font-weight: 400;
}

p {
  margin-bottom: 15px;
}

a {
  text-decoration: none;
  color: #fe2f2f;
  transition: color 0.3s;
}

a:hover {
  color: #d62828;
}

/* Buttons */
.btn, .btn-large {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Hero Headings or Taglines */
.hero-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 3rem;
  color: #fe2f2f;
  letter-spacing: 1px;
}

.hero-subtitle {
  font-family: 'Roboto', sans-serif;
  font-size: 1.3rem;
  color: #ddd;
  font-weight: 300;
}

.section {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
/* Section Titles */
.section-title {
  font-family: 'Montserrat', sans-serif;
  color: #fe2f2f;
  font-weight: 700;
  font-size: 2rem;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Small text or captions */
.small-text {
  font-size: 0.9rem;
  color: #aaa;
  letter-spacing: 0.3px;
  font-family: 'Roboto', sans-serif;
}

.social img{
  vertical-align: middle;
  margin-right: 5px;
}