:root {
  --main-yellow: #fcc800;
  --white: #ffffff;
}


.has-h1 {
  font-size: clamp(48px, 6vw, 72px);
}
.has-h2 {
    font-size: clamp(42px, 5vw, 64px);
}
.has-h3 {
    font-size: clamp(38px, 4vw, 54px);
}
.has-h4 {
    font-size: clamp(32px, 3.5vw, 48px);
}
.has-h5 {
    font-size: clamp(24px, 3vw, 38px);
}
.has-h6 {
    font-size: clamp(22px, 3vw, 32px);
}

.has-p {
  font-size: 18px;
  font-family: 'Yantramanav', sans-serif;
}

.grudge-header, .grudge-font{
  font-family: "badgrudge";
}

.yant-font{
  font-family: 'Yantramanav', sans-serif;
}

a.grudge-header:hover{
  color: #F9B630;
}


.texture-1::after{
  content: url('https://www.heavyhaulers.com/blog/wp-content/uploads/2023/11/Rectangle-58.svg');
 position: absolute;
 z-index: 100;
right: -100px;
top: -20px;
}



.hero {
  padding-top: clamp(50px, 4vw, 100px);
  padding-bottom: 50px;
}


.yellow-btn{
  background-color: var(--main-yellow);
  border: 2px solid var(--main-yellow);
  border-radius: 5px;
  padding: 0.5rem;
  font-size: 14px;
  font-weight: bold;
}


.transparent-btn{
  border: 2px solid rgb(58, 57, 57);
  background: transparent;
  color: black;
  border-radius: 5px;
  font-size: 14px;
  font-weight: bold;
  padding: 0.5rem;
}

.responsive-iframe {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* Aspect ratio of 16:9 */
  overflow: hidden;
}

.responsive-iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#hh-bg-texture{
  position: relative;
}

#hh-bg-texture::before {
  background: url('https://www.heavyhaulers.com/images/hh-label-icons/cropped-favicon-HD-1.png') no-repeat;
  background-size: contain;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  min-width: 200px;
  height: 85%;
  z-index: 999;
  opacity: 0.5;
  transform: rotate(20deg);
}

@media (max-width: 767.98px) {
  #hh-bg-texture::before {
    display: none;
  }
}

.common-links-block p{
  font-size: 22px;
  line-height: 1.5;
}

.new-bg {
  background-image: url("https://www.heavyequipmenttransport.com/blog/wp-content/uploads/2023/11/image-22-1.png") !important;
}


div.py-1 b h7 {
  color: black;
}

/* 2025 Onward Styling */

/* AnchorZone: Colors */

:root {
  --gray-200: #F0F0F0;
  --gray-300: #c2c2c2;
  --gray-700: #393A39;
  --gray-800: #2c2c2c;
  --gray-850: #202020;
  --gray-900: #090805;
  --orange-400: #FAB928;
  --yellow-300: #FFE588;
  --aqua-400: #0B7081;
  --aqua-300: #0091a9;
}

.txt-gray-200 { color: var(--gray-200) }

.txt-gray-300 { color: var(--gray-300) }

.txt-gray-700 { color: var(--gray-700) }
.bg-gray-700 { background-color: var(--gray-700) }

.txt-gray-800 { color: var(--gray-800) }

.txt-gray-850 { color: var(--gray-850) }
.bg-gray-850 { background-color: var(--gray-850) }

.txt-gray-900 { color: var(--gray-900) }
.bg-gray-900 { background-color: var(--gray-900) }
.hover-bg-gray-900:hover { background-color: var(--gray-900) !important }
.hover-border-gray-900:hover { border-color: var(--gray-900) !important }

.txt-orange-400 { color: var(--orange-400) }
.hover-txt-orange-400:hover { color: var(--orange-400) !important }
.bg-orange-400 { background-color: var(--orange-400) }
.hover-bg-orange-400:hover { background-color: var(--orange-400) !important }

.txt-yellow-300 { color: var(--yellow-300) }
.hover-bg-yellow-300:hover { background-color: var(--yellow-300) !important }

.txt-white { color: white }
.hover-txt-white:hover { color: white !important }

.bg-aqua-400 { background-color: var(--aqua-400) }
.txt-aqua-400 { color: var(--aqua-400) }

.hover-bg-aqua-300:hover { background-color: var(--aqua-300) !important }
.hover-txt-aqua-300:hover { color: var(--aqua-300) !important }

/* AnchorZone: Layouts and Header Styling */
.d-none-important { display: none !important }
.line-height-normal { line-height: normal }
.cursor-pointer { cursor: pointer }
.hover-text-decoration-none:hover { text-decoration: none !important }
.ignore-last-margin > *:last-child { margin-bottom: 0 !important }

@media (max-width: 575.98px) {
  .mobile-radius-none { border-radius: 0 !important }
  .mobile-px-none { padding-left: 0; padding-right: 0; }
}

.light-section, .dark-section {
  font-size: 18px;
  font-family: "Yantramanav", sans-serif;
}

.light-section {
  color: var(--gray-800);
}

.light-section h1, .light-section h2, .light-section h3, .light-section h4, .light-section h5, .light-section h6 {
  color: black;
}

.dark-section {
  background: #1b1b1b url('/images/bg-textured-black.webp') repeat top center;
  color: white;
}

.dark-section h1, .dark-section h2, .dark-section h3, .dark-section h4, .dark-section h5, .dark-section h6 {
  color: var(--orange-400);
}

.hdr-reg {
  font-family: "badgrudge", "sans-serif";
  font-size: 34px;
  line-height: 32px;
}

.hdr-sm {
  font-family: "badgrudge", "sans-serif";
  font-size: 24px;
  line-height: 24px;
}

.section-spacer-xs { height: 24px }

.section-spacer, .section-spacer-lg, .section-spacer-sm, .section-spacer-md { height: 40px }

@media only screen and (min-width: 768px) {
  .hdr-reg {
    font-size: 42px;
    line-height: 40px;
  }
  .hdr-sm {
    font-size: 36px;
    line-height: 32px;
  }
  .section-spacer-xs { height: 40px }
  .section-spacer-md { height: 56px }
  .section-spacer { height: 80px }
  .section-spacer-lg { height: 105px }
}

/*If you want to allow list bullets, at this to the top <ul> class*/
.list-style-disc li {
  list-style-type: disc;
}

.list-style-disc ul li {
  list-style-type: circle;
}

/* AnchorZone: CTA Styling */
.cta-btn-orange {
  background-color: var(--orange-400);
}

.cta-btn-orange:hover {
  background-color: #f6ba41;
}

.cta-btn-blue {
  background-color: #0099f3;
}

.cta-btn-blue:hover {
  background-color: #287af9;
}

/* AnchorZone:  Collapse Functionality without needing bootstrap */
.collapseWrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s;
}

.collapseWrapper.is-open {
  grid-template-rows: 1fr;
}

.collapseInner {
  overflow: hidden;
  grid-row: 1 / span 2;
}

/* Anchorzone: Font Sizes */
.font-10 { font-size: 10px; }
.font-12 { font-size: 12px; }
.font-14 { font-size: 14px; }
.font-16 { font-size: 16px; }
.font-18 { font-size: 18px; }
.font-20 { font-size: 20px; }
.font-22 { font-size: 22px; }
.font-24 { font-size: 24px; }
.font-32 { font-size: 32px; }
@media (min-width: 576px) {
  .font-sm-12 { font-size: 12px; }
  .font-sm-14 { font-size: 14px; }
  .font-sm-16 { font-size: 16px; }
  .font-sm-18 { font-size: 18px; }
  .font-sm-20 { font-size: 20px; }
  .font-sm-22 { font-size: 22px; }
  .font-sm-24 { font-size: 24px; }

  .font-sm-40 { font-size: 40px; }
}
@media (min-width: 768px) {
  .font-md-12 { font-size: 12px; }
  .font-md-14 { font-size: 14px; }
  .font-md-16 { font-size: 16px; }
  .font-md-18 { font-size: 18px; }
  .font-md-20 { font-size: 20px; }
  .font-md-22 { font-size: 22px; }
  .font-md-24 { font-size: 24px; }

  .font-md-26 { font-size: 26px; }
  .font-md-30 { font-size: 30px; }
  .font-md-32 { font-size: 32px; }
  .font-md-36 { font-size: 36px; }
  .font-md-40 { font-size: 40px; }
}
@media (min-width: 992px) {
  .font-lg-12 { font-size: 12px; }
  .font-lg-14 { font-size: 14px; }
  .font-lg-16 { font-size: 16px; }
  .font-lg-18 { font-size: 18px; }
  .font-lg-20 { font-size: 20px; }
  .font-lg-22 { font-size: 22px; }
  .font-lg-24 { font-size: 24px; }

  .font-lg-26 { font-size: 26px; }
  .font-lg-32 { font-size: 32px; }
  .font-lg-36 { font-size: 36px; }
  .font-lg-40 { font-size: 40px; }
}
@media (min-width: 1200px) {
  .font-xl-12 { font-size: 12px; }
  .font-xl-14 { font-size: 14px; }
  .font-xl-16 { font-size: 16px; }
  .font-xl-18 { font-size: 18px; }
  .font-xl-20 { font-size: 20px; }
  .font-xl-22 { font-size: 22px; }
  .font-xl-24 { font-size: 24px; }

  .font-xl-32 { font-size: 32px; }
}

/* Base font weights */
.weight-300 { font-weight: 300; }
.weight-400 { font-weight: 400; }
.weight-500 { font-weight: 500; }
.weight-600 { font-weight: 600; }
.weight-700 { font-weight: 700; }
.weight-800 { font-weight: 800; }
.weight-900 { font-weight: 900; }

@media (min-width: 576px) {
  .weight-sm-300 { font-weight: 300; }
  .weight-sm-400 { font-weight: 400; }
  .weight-sm-500 { font-weight: 500; }
  .weight-sm-600 { font-weight: 600; }
  .weight-sm-700 { font-weight: 700; }
  .weight-sm-800 { font-weight: 800; }
  .weight-sm-900 { font-weight: 900; }
}

@media (min-width: 768px) {
  .weight-md-300 { font-weight: 300; }
  .weight-md-400 { font-weight: 400; }
  .weight-md-500 { font-weight: 500; }
  .weight-md-600 { font-weight: 600; }
  .weight-md-700 { font-weight: 700; }
  .weight-md-800 { font-weight: 800; }
  .weight-md-900 { font-weight: 900; }
}

@media (min-width: 992px) {
  .weight-lg-300 { font-weight: 300; }
  .weight-lg-400 { font-weight: 400; }
  .weight-lg-500 { font-weight: 500; }
  .weight-lg-600 { font-weight: 600; }
  .weight-lg-700 { font-weight: 700; }
  .weight-lg-800 { font-weight: 800; }
  .weight-lg-900 { font-weight: 900; }
}

@media (min-width: 1200px) {
  .weight-xl-300 { font-weight: 300; }
  .weight-xl-400 { font-weight: 400; }
  .weight-xl-500 { font-weight: 500; }
  .weight-xl-600 { font-weight: 600; }
  .weight-xl-700 { font-weight: 700; }
  .weight-xl-800 { font-weight: 800; }
  .weight-xl-900 { font-weight: 900; }
}

.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 1rem; }
.gap-4 { gap: 1.5rem; }
.gap-5 { gap: 3rem; }

@media (min-width: 576px) {
  .gap-sm-1 { gap: 0.25rem; }
  .gap-sm-2 { gap: 0.5rem; }
  .gap-sm-3 { gap: 1rem; }
  .gap-sm-4 { gap: 1.5rem; }
  .gap-sm-5 { gap: 3rem; }
}

@media (min-width: 768px) {
  .gap-md-1 { gap: 0.25rem; }
  .gap-md-2 { gap: 0.5rem; }
  .gap-md-3 { gap: 1rem; }
  .gap-md-4 { gap: 1.5rem; }
  .gap-md-5 { gap: 3rem; }

  .gap-md-40 { gap: 40px; }
}

@media (min-width: 992px) {
  .gap-lg-1 { gap: 0.25rem; }
  .gap-lg-2 { gap: 0.5rem; }
  .gap-lg-3 { gap: 1rem; }
  .gap-lg-4 { gap: 1.5rem; }
  .gap-lg-5 { gap: 3rem; }

  .gap-lg-40 { gap: 40px; }
}

@media (min-width: 1200px) {
  .gap-xl-1 { gap: 0.25rem; }
  .gap-xl-2 { gap: 0.5rem; }
  .gap-xl-3 { gap: 1rem; }
  .gap-xl-4 { gap: 1.5rem; }
  .gap-xl-5 { gap: 3rem; }
}