/* -------------------------------------------------------------
   File: blocks-main.css
   Author: Felipe Lima
   Description: Common stylesheet to be used with /blocks.
   ------------------------------------------------------------- */

/*  IMPORTS (using fonts from style.css imports) */
@import url("https://fonts.googleapis.com/css?family=Cabin:700|Raleway|Yantramanav:400,500,700,900");
@font-face {
  font-family: badgrudge;
  src: url("../../../../../fonts/badgrudge.ttf");
}

/* reset */
.blocks-main ul,
.blocks-main ol {
  list-style: none;
}

.blocks-main a {
  color: var(--primary-text-color);
}

/* TYPOGRAPHY */
.blocks-main {
  --yantramanav: "Yantramanav", sans-serif;
  --badgrudge: "badgrudge", sans-serif;
  /* set default font */
  font-family: var(--yantramanav);
  /* font-size: 16px; */
}

.blocks-main .badgrudge {
  font-family: var(--badgrudge);
}

.blocks-main .yantramanav {
  font-family: var(--yantramanav);
}

.blocks-main {
  font-size: 16px;
}

/* set default paragraph size = txt-p-1 = 18px */
.blocks-main p,
.blocks-main a,
.blocks-main ol li,
.blocks-main ul li,
.blocks-main ul li a {
  font-size: 1.125rem;
}

/* COLORS */
.blocks-main {
  --primary-text-color: rgba(44, 44, 44, 1); /* #2c2c2c */
  --secondary-text-color: rgba(252, 200, 36, 1); /* #fcc824 */
  --dark-text-color: rgba(0, 0, 0, 1); /* black */
  --dark-text-color-50: rgba(0, 0, 0, 0.5);
  --dark-text-color-75: rgba(0, 0, 0, 0.75);

  --primary-color: rgba(252, 200, 36, 1); /* #fcc824 */
  --secondary-color: rgba(23, 162, 184, 1); /* #17a2b8 */
  --tertiary-color: rgba(0, 153, 243, 1); /* #0099F3 */
  --dark-color: rgba(44, 44, 44, 1);

  /* Dark gray colors */
  --gray-color-80: rgb(50, 50, 50); /* Equivalent to rgba(0, 0, 0, 0.8) */
  --gray-color-60: rgb(100, 100, 100); /* Equivalent to rgba(0, 0, 0, 0.6) */
  --gray-color-40: rgb(150, 150, 150); /* Equivalent to rgba(0, 0, 0, 0.4) */
  --gray-color-20: rgb(200, 200, 200); /* Equivalent to rgba(0, 0, 0, 0.2) */

  /* Light gray colors */
  /* --gray-color-10: rgb(230, 230, 230); Equivalent to rgba(0, 0, 0, 0.1) */
  --gray-color-5: rgba(0, 0, 0, 0.05); /* Equivalent to rgba(0, 0, 0, 0.05) */

  /* HOVER COLORS */
  --primary-color-hover: rgba(250, 185, 40, 1);
  --secondary-color-hover: rgba(23, 162, 184, 0.75); /* 75% opacity */
  --tertiary-color-hover: rgba(0, 153, 243, 0.75); /* 75% opacity */
}

/* BACKGROUNDS W/ TEXTURE */
.blocks-main.bg-texture-white,
.blocks-main .bg-texture-white {
  background-image: url("https://www.heavyequipmenttransport.com/blog/wp-content/uploads/2023/11/image-22-1.png");
  background-color: white;
}

.blocks-main.bg-texture-black,
.blocks-main .bg-texture-black {
  background-image: url("https://www.heavyhaulers.com/blog/wp-content/uploads/2023/11/dark-black-texture-background-scaled-2.jpg");
  background-color: var(--dark-color);
}

/* Background color classes */
.blocks-main.bg-plain-dark,
.blocks-main .bg-plain-dark {
  background-color: var(--dark-color);
  background: var(--dark-color);
}

.blocks-main.bg-plain-white,
.blocks-main .bg-plain-white {
  background-color: white;
  background: white;
}

/* BACKGROUND BEING USED */
/* default background for blocks */
.blocks-main.bg-default,
.blocks-main .bg-default {
  background: transparent;
}
/* fix preventing parallax image overlap */
/* Use this class for a block that comes before or after a parallax block */
.blocks-main.bg-default-parallax-fix,
.blocks-main .bg-default-parallax-fix {
  background-image: url("https://heavyhaulers.com/images/hh-bg-white-line.jpg");
  background-size: contain;
}

/* TEXT SIZE */
.blocks-main .txt-1 {
  /* Equivalent to 72px - Used for H1 */
  font-size: 4.5rem;
}

.es .blocks-main .txt-1 {
  font-family: "Yantramanav", sans-serif;
  font-size: 2.5rem;
  font-weight: 900;
}

.blocks-main .txt-2 {
  /* Equivalent to 60px */
  font-size: 3.75rem;
}

.blocks-main .txt-3 {
  /* Equivalent to 56px */
  font-size: 3.5rem;
}

.blocks-main .txt-4 {
  /* Equivalent to 48px */
  font-size: 3rem;
}

.blocks-main .txt-5 {
  /* Equivalent to 44px */
  font-size: 2.75rem;
}

.blocks-main .txt-6 {
  /* Equivalent to 40px */
  font-size: 2.5rem;
}

.blocks-main .txt-7 {
  font-size: 2rem;
}

.blocks-main .txt-8 {
  /* Equivalent to 24px */
  font-size: 1.5rem;
}

.blocks-main .txt-p-1 {
  /* Equivalent to 20px */
  font-size: 1.25rem;
}

.blocks-main .txt-p-2 {
  font-size: 1rem;
}

.blocks-main .txt-p-3 {
  font-size: 0.875rem;
}

.blocks-main .txt-p-4 {
  font-size: 0.75rem;
}

/* line height */
.blocks-main .txt-lh-25 {
  line-height: 2.5rem;
}

/* Text color classes */
.blocks-main .txt-primary {
  color: var(--primary-text-color);
}

.blocks-main .txt-secondary {
  color: var(--secondary-text-color);
}

.blocks-main .txt-tertiary {
  color: var(--tertiary-color);
}

.blocks-main .txt-dark {
  color: var(--dark-text-color);
}

.blocks-main .txt-dark-50 {
  color: var(--dark-text-color-50);
}

.blocks-main .txt-dark-75 {
  color: var(--dark-text-color-75);
}

/* BTNS */
.blocks-main .btn:focus {
  box-shadow: unset;
}

/* yellow */
.blocks-main .btn-yellow {
  background: var(--primary-color);
}

.blocks-main .btn-yellow:hover {
  background: var(--primary-color-hover);
}

/* yellow reversed */
.blocks-main .btn-yellow-reverse {
  background: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
}

.blocks-main .btn-yellow-reverse:hover {
  background: var(--primary-color);
  color: black;
}

/* aqua */
.blocks-main .btn-aqua {
  background: var(--secondary-color);
}

.blocks-main .btn-aqua:hover {
  background: var(--secondary-color-hover);
}

/* aqua reversed */
.blocks-main .btn-aqua-reverse {
  background: transparent;
  color: var(--secondary-color);
  border: 2px solid var(--secondary-color);
}

/* blue*/
.blocks-main .btn-blue {
  background: var(--tertiary-color);
  border: 2px solid var(--tertiary-color);
}

.blocks-main .btn-blue:hover {
  background: #007bff;
  border: 2px solid #007bff;
}

/* blue reversed */
.blocks-main .btn-blue-reverse {
  background: transparent;
  color: var(--tertiary-color);
  border: 2px solid var(--tertiary-color);
}

/* btns increased size */
.blocks-main .btn-lg-2x {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

/* wrap the btn with a container to apply full width when screen small */
/* @media (max-width: 576px) {
  .blocks-main .btn-container-fw-xs {
    width: 100%;
  }
} */

/* EXTENSIONS */
/* ANIMATIONS/TRANSITIONS */
/* parallax darkens / sm screen with animation */
@media (max-width: 576px) {
  .blocks-main .parallax-sm-fade,
  .blocks-main.parallax-sm-fade {
    background-color: rgba(0, 0, 0, 1);
    transition: background-color 1s ease;
  }
}

@media (min-width: 577px) {
  .blocks-main .parallax-sm-fade,
  .blocks-main.parallax-sm-fade {
    background-color: transparent;
    transition: background-color 1s ease;
  }
}