.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.65);
  z-index: 1050;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text-justify {
  text-align: justify;
}

/* Text box */
.text-box {
  background-color: rgba(0, 0, 0, 0.85);
  padding: 2rem;
  text-align: center;
  border-radius: 8px;
}

hr {
  border: none;
  height: 4px;
  width: 2rem;
  opacity: 1;
}

.header {
  position: relative;
  overflow: hidden;
  background-color: #000;
  border-bottom: 1px solid #000;
}

.header .text-container {
  position: relative;
  z-index: 1;
}

.header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 0;
}

.hidden {
  visibility: hidden;
}

.fa-ul {
  list-style-type: none; /* Remove default bullets */
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margin */
}

.fa-ul li {
  position: relative;
  display: inline-block; /* Align list items horizontally */
  margin-bottom: 10px; /* Space between items */
  text-align: left; /* Align text left within the li */
}

.fa-ul li i {
  font-weight: 900; /* Solid style */
  margin-right: 10px; /* Space between icon and text */
  color: #e9292c;
}

.header-about img {
  max-width: 350px;
  padding-top: 8em;
}

/* Define the keyframes for shrinking the background image */
@keyframes bgShrinkAnimation {
  0% {
    background-size: 150%; /* Start with a larger background */
  }
  100% {
    background-size: 135%; /* Finish at the normal size */
  }
}
/* Common header styles */
.header-common {
  position: relative;
  overflow: hidden;
}

.header-common .background-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 150%; /* Match the initial size in keyframes */
  background-repeat: no-repeat;
  background-position: center center;
  animation: bgShrinkAnimation 1.5s ease-out forwards;
  z-index: -1; /* Ensure it stays behind the content */
}

/* Specific background images for each header */
.header-tico .background-layer {
  background-image: url("../images/tico-page-header.jpg");
}

.header-about .background-layer {
  background-image: url("../images/tiflex-header-about.jpg");
}

.header-flooring .background-layer {
  background-image: url("../images/treadmaster-flooring-page-header.jpg");
}

.header-rail .background-layer {
  background-image: url("../images/trackelast-page-header.jpg");
}

.header-marine .background-layer {
  background-image: url("../images/treadmaster-marine-page-header.jpg");
}

.header-cricket .background-layer {
  background-image: url("../images/oxbridge-cricket-balls-page-header.jpg");
}

.header-nebar .background-layer {
  background-image: url("../images/nebar-page-header.jpg");
}

/* Angle styles for all headers */
.angle {
  transform: skewY(-2deg);
  transform-origin: top left;
  overflow: hidden; /* Prevent overflow from the skew effect */
}

.angle-ret {
  transform: skewY(2deg);
  transform-origin: top left;
}

/* Keyframes for the shrinking background animation */
@keyframes bgShrinkAnimation {
  0% {
    background-size: 150%; /* Start with a larger background */
  }
  100% {
    background-size: 135%; /* End with a slightly larger size to cover edges */
  }
}
.head-logo {
  z-index: 1;
}

.logo-width {
  max-width: 550px;
}

.contact-bg {
  background: #f3f3f3 url("../images/60-lines-bg.png") no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
}

.contact-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.navbar-opacity {
  opacity: 0.8;
}

.nav-link {
  color: #f8f9fa;
  text-decoration: none;
}

.nav-link:hover {
  color: #fbd206;
}

.angle {
  transform: skewY(-2deg);
  transform-origin: top left;
  overflow: hidden; /* Prevent overflow from the skew effect */
}

.angle-ret {
  transform: skewY(2deg);
  transform-origin: top left;
}

.title {
  font-family: "Ubuntu", serif;
}

.about {
  background-color: #000;
}

.image-container {
  position: relative;
  width: 100%;
  height: 225px;
}

.image-container {
  position: relative;
  width: 100%;
  height: 240px; /* Define a height */
  overflow: hidden; /* Ensure any overflow is hidden */
}

.image-container img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out; /* Smooth transition */
}

.image-container img:first-child {
  opacity: 1; /* First image visible by default */
}

.image-container:hover img:first-child {
  opacity: 0;
}

.image-container:hover img:last-child {
  opacity: 1;
}

.tico-brand,
.tread-brand,
.rail-brand,
.marine-brand,
.cricket-brand,
.nebar-brand {
  position: relative;
  background-size: cover;
  transition: transform 0.5s ease-in-out;
  padding: 0 15px; /* Add horizontal padding to create space */
}

.tico-brand::before,
.tread-brand::before,
.rail-brand::before,
.marine-brand::before,
.cricket-brand::before,
.nebar-brand::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
  z-index: -1; /* Ensure the background is behind the images */
}

.tico-brand::before {
  background-image: url("../images/lightbox-template-tico.jpg");
}

.tread-brand::before {
  background-image: url("../images/lightbox-template-treadmaster-flooring.jpg");
}

.rail-brand::before {
  background-image: url("../images/lightbox-template-trackelast.jpg");
}

.marine-brand::before {
  background-image: url("../images/lightbox-template-treadmaster-marine.jpg");
}

.cricket-brand::before {
  background-image: url("../images/lightbox-template-cricket.jpg");
}

.nebar-brand::before {
  background-image: url("../images/lightbox-template-nebar.jpg");
}

.tico-brand:hover::before,
.tread-brand:hover::before,
.rail-brand:hover::before,
.marine-brand:hover::before,
.cricket-brand:hover::before,
.nebar-brand:hover::before {
  opacity: 0.4;
}

.tico-brand:hover,
.tread-brand:hover,
.rail-brand:hover,
.marine-brand:hover,
.cricket-brand:hover,
.nebar-brand:hover {
  transform: scale(1.05);
}

/* Ensure the images are on top of the pseudo-elements */
.image-container img {
  z-index: 1;
}

.spacer {
  width: 100%;
  height: 150px;
}

.bg.white {
  background-color: #fff;
}

.bg.black {
  background-color: #000;
}

.tread-green {
  color: #0b6f33;
}

.bg-tread-green {
  background-color: #0b6f33;
}

.tico-red {
  color: #e9292c;
}

.bg-tico-red {
  background-color: #e9292c;
}

.rail-blue {
  color: #345eab;
}

.bg-rail-blue {
  background-color: #345eab;
}

.marine-blue {
  color: #a2d6f6;
}

.bg-marine-blue {
  background-color: #a2d6f6;
}

.marine-dark {
  color: #243288;
}

.bg-marine-dark {
  background-color: #243288;
}

.cricket-green {
  color: #88a649;
}

.bg-cricket-green {
  background-color: #88a649;
}

.cricket-dark {
  color: #26303d;
}

.bg-cricket-dark {
  background-color: #26303d;
}

.tiflex-yellow {
  color: #fbd206;
}

.bg-tiflex-yellow {
  background-color: #fbd206;
}

.bg-nebar {
  background-color: #004fa3;
}

.ul {
  display: flex;
}

.team-member img {
  max-width: 100%;
}

.social-icons {
  font-size: 2em;
}

.social-icons a {
  text-decoration: none; /* Remove underline */
}

.team-icons {
  display: flex;
  gap: 20px; /* Space between icons */
  padding-left: 1rem; /* Optional: Add left padding for better alignment */
  margin-top: 10px;
  font-size: 2em;
}

.floor-icons a {
  color: #0b6f33;
  transition: color 0.3s;
}

.floor-icons a:hover {
  color: #084620;
}

.tico-icons a {
  color: #e9292c;
  transition: color 0.3s;
}

.tico-icons a:hover {
  color: #9c1d1f;
}

.rail-icons a {
  color: #345eab;
  transition: color 0.3s;
}

.rail-icons a:hover {
  color: #10306b;
}

.marine-icons a {
  color: #a2d6f6;
  transition: color 0.3s;
}

.marine-icons a:hover {
  color: #367094;
}

.cricket-icons a {
  color: #88a649;
  transition: color 0.3s;
}

.cricket-icons a:hover {
  color: #495c1f;
}

.bg-color-1 {
  background-color: #ff6666;
}

.bg-color-2 {
  background-color: #9c1d1f;
}

.bg-color-3 {
  background-color: #cc66ff;
}

.bg-color-4 {
  background-color: #ff9933;
}

.bg-color-5 {
  background-color: #cc66ff;
}

.bg-color-6 {
  background-color: #e9292c;
}

.bg-color-7 {
  background-color: #000;
}

.bg-color-8 {
  background-color: #e0e0e0;
}

.bg-color-9 {
  background-color: #0b6f33;
}

.bg-color-10 {
  background-color: #fbd206;
}

.bg-color-11 {
  background-color: #345eab;
}

/* Custom styling for the first brand div with a colored border */
.bordered-brand {
  border: 3px solid #000; /* Replace with desired color */
  color: #000; /* Matches the border color */
  background-color: transparent; /* Removes background color */
}

.bordered-brand h4,
.bordered-brand h2 {
  color: inherit; /* Inherit color from the parent div */
}

.brand {
  height: 150px; /* Adjust as needed */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.brand:hover {
  transform: scale(0.9);
}

.text-light {
  color: #ffffff;
}

.max {
  max-width: 100%; /* Prevent image from exceeding its container */
  width: 300px;
}

html {
  scroll-behavior: smooth;
}

.navbar-toggler:focus {
  outline: none !important; /* Remove the outline */
  box-shadow: none; /* Remove any shadow that may appear */
}

.navbar-toggler {
  border: none; /* Remove the default border */
}

.navbar-toggler-icon {
  background-image: none; /* Remove the default icon */
  width: 24px; /* Adjust width of the lines */
  height: 2px; /* Adjust thickness of the lines */
  background-color: white; /* Change color of the lines */
  position: relative;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
  content: "";
  display: block;
  width: 24px; /* Same width as the main line */
  height: 2px; /* Same thickness as the main line */
  background-color: white;
  position: absolute;
  left: 0;
}

.navbar-toggler-icon::before {
  top: -6px; /* Position the first line above */
}

.navbar-toggler-icon::after {
  top: 6px; /* Position the third line below */
}

/* Responsive adjustments */
@media (max-width: 1274px) {
  @keyframes bgShrinkAnimationSmall {
    0% {
      background-size: 190%; /* Start larger to cover edges */
    }
    100% {
      background-size: 170%; /* Adjust to cover the area correctly */
    }
  }
  .header-common .background-layer {
    animation: bgShrinkAnimationSmall 1.5s ease-out forwards; /* Use modified keyframes */
    background-size: 150%; /* Ensure it starts at the correct size */
  }
  .angle {
    transform: skewY(-1deg); /* Reduce skew to minimize uncovered areas */
  }
  .angle-ret {
    transform: skewY(1deg); /* Adjust reverse skew accordingly */
  }
  .main-logo {
    width: 300px;
  }
  .header-about img {
    margin-top: 80px;
    padding-top: 3em;
  }
  /* Define the keyframes for shrinking the background image */
  @keyframes bgShrinkAnimation {
    0% {
      background-size: 220%; /* Start with a larger background */
    }
    100% {
      background-size: 205%; /* Finish at the normal size */
    }
  }
}
@media (max-width: 768px) {
  .header-common .background-layer {
    background-size: cover; /* Ensure the image covers the header */
    background-position: center top; /* Adjust position to focus on the top part */
    animation: none; /* Disable animation on smaller screens */
  }
  .main-logo {
    width: 250px;
  }
  .type-text-small {
    font-size: 0.9em;
  }
  /* Define the keyframes for shrinking the background image */
  @keyframes bgShrinkAnimation {
    0% {
      background-size: 320%; /* Start with a larger background */
    }
    100% {
      background-size: 305%; /* Finish at the normal size */
    }
  }
}
@media (max-width: 480px) {
  .header-common .background-layer {
    background-size: cover; /* Ensure the image covers the header */
    background-position: center top; /* Adjust position to focus on the top part */
    animation: none; /* Disable animation on smaller screens */
  }
  .main-logo {
    width: 200px;
  }
  .main-text {
    font-size: 1.2em !important;
  }
  .btn-lg {
    padding: 0.5rem 1rem; /* Adjust padding */
    font-size: 1rem; /* Adjust font size */
  }
}