html {
  scroll-behavior: smooth;
}
#school-videos, #towing-guides, #tips, #catalog, #manuals {
  scroll-margin-top: 170px;
}

 </style>


<style>
/* =======================
   General Page & Video Styles
   ======================= */

/* BODY & GENERAL */
body, html {
  height: 100%;
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
  color: #000;
  background-color: #FFF;
}

/* -----------------------
   VIDEO SECTION
   ----------------------- */
.video-section .col {
   padding: 0.5rem!important; /*adds space inside each column */
}

.video-section .ratio {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%!important; /* 16:9 aspect ratio */
  border: none;
  box-sizing: border-box;

  /* add inner padding to prevent videos touching column edges */
  padding: 5px!important;
  background-color: #fff; /* optional, just for visual breathing room */
  border-radius: 4px;
  margin-bottom: 15px;
}

.video-section p {
  margin-top: 0;
  margin-bottom: 0;
}


/* =======================
   SCHOOL ICONS
   ======================= */
.school-icon h6 {
  color: white;
  font-size: larger;
  margin-bottom: 20px;
}

.school-icon img {
  width: 80px;
  height: auto;
}

@media (min-width: 768px) {
  .school-icon img {
    width: 130px;
  }
}

.school-icon a {
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.school-icon a:hover img,
.school-icon a:hover h6 {
  transform: scale(1.03);
}


/* =======================
   TOWING GUIDES SECTION
   ======================= */
.towing-guides-section img {
  width: 140px;
}

.towing-guides-section a.btn {
  color: #FFF!important;
  background: var(--bs-primary);
  padding: 10px;
  border-radius: 8px;
}

.towing-guides-section a.btn:hover {
  color: white;
  background: var(--bs-secondary);
}


/* =======================
   IMAGE LINK HOVER
   ======================= */
a.image-link img {
  transform: scale(1);
  transition: transform 0.2s ease;
}

a.image-link img:hover {
  transform: scale(1.05);
}

/* =======================
   SAFETY TIPS SECTION
   ======================= */
.sfety-tips-section {
  background-color: black;
  padding: 30px;
  color: white;
  text-align: center;
}


/* =======================
   PAGE WIDE STYLES
   ======================= */
button, input, optgroup, select, textarea {
  padding-left: 10px; 
  color: #000;
  font-weight: lighter;
  font-size: 13px;
}

/* External links / icons */
.fa {    
  display: inline-block;
  font: normal normal normal 20px/1 FontAwesome;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--bs-gray);
}
.fa:hover {  
  color: var(--bs-red);
}

/* IMAGE LINK BUTTONS & HOVER */
.featuresubcontainer img {
  transition: transform 0.3s ease;
  max-width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 0;
}
.featuresubcontainer:hover img {
  transform: scale(1.2);
}
.featuresubcontainer button {
  font-size:14px;
  background-color:  #d31634;
  color: white;
  border: none;
  padding: 10px 25px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: relative;
  z-index: 1;
}
.featuresubcontainer:hover button {
  background-color: black;
  color: #d31634;
}

/* =======================
   RESPONSIVE SCHOOL ICONS & VIDEOS
   ======================= */
@media (max-width: 767px) {
  .video-section .ratio {
    margin-bottom: 15px !important;
  }
  .school-icon img {
    width: 80px !important;
  }
}
@media (min-width: 768px) {
  .video-section .ratio {
    margin-bottom: 20px !important;
  }
  .school-icon img {
    width: 130px !important;
  }
}

/* =======================
   EXTERNAL VIDEO LINKS
   ======================= */
.external-video-section .col {
  padding: 15px;
  text-align: center; /* keep text centered */
}

/* Make link a flex container but center content horizontally */
.external-video-section .col a {
  display: inline-flex;          /* inline-flex keeps centering possible */
  align-items: center;           /* vertically center */
  justify-content: center;       /* horizontally center */
  text-decoration: none;
  color: white!important;                  /* default text + svg color */
  width: auto;                   /* allow inline centering */
  height: auto;
  letter-spacing: 1px;
  font-size: xx-large;
  transition: color 0.3s ease;
}

/* Hover state for link text + svg */
.external-video-section .col a:hover {
  color: rgb(236, 143, 13);      /* matches your previous hover */
}

/* Ensure SVG inherits color from parent */
.external-video-section .col a svg {
  fill: currentColor;
  transition: fill 0.3s ease, transform 0.3s ease;
  margin-left: 0.5rem;
}

/* Optional: slide arrow on hover */
.external-video-section .col a:hover svg {
  transform: translateX(15px);
}


.external-video-section .col {
  padding: 15px;
  text-align: center;
}

.external-video-section .col a {
  width: 100%;
  height: 100%;
  color: #fff;
  text-decoration: none;
  letter-spacing: 1px;
  font-size: xx-large;
}

.external-video-section .col a:hover,
.external-video-section .col a span:hover {
  color: rgb(236, 143, 13);
}