@charset "utf-8";
/* CSS Document */
body {
    overflow-x: hidden; /* Stops width scrollbar */
    background-color: #add8e6; /* Light sky blue */
}
/* font-family { 
  "Segoe", "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
} */



p { font-size: 20px; }

/* TOP BANNER LOGO STYLES */
.banner-header {
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .1)), url("../images/toms-logo.png");
    background-image: -o-linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .1)), url("../images/toms-logo.png");
    background-image: linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .1)), url("../images/toms-logo.png");
    padding-top: 0;
    padding-bottom: 0;
    margin-top: -50px;
    margin-bottom: -75px;
    background-color:#ffffff;
}
.banner-background {
  background-color: white;
  margin-bottom: -75px;
}
/* ============================= */
/* CROPPED, RESPONSIVE BANNER LOGO */
/* ============================= */

.banner-logo-frame {
    display: inline-block;

    /* Controls visible logo size */
    width: min(1100px, 94vw);
    height: clamp(150px, 20vw, 320px);


    overflow: hidden;          /* THIS is the crop */
}

.banner-logo-img {
    width: 100%;
    height: 100%;

    object-fit: cover;         /* Fills frame, trims whitespace */
    object-position: center;   /* Keeps logo centered */

    display: block;
}

/* Tablets */
@media (max-width: 991.98px) {
    .banner-logo {
        max-width: 320px;
    }
}

/* Phones */
@media (max-width: 575.98px) {
    .banner-logo {
        max-width: 240px;
    }
}

/* Extra-large screens */
@media (min-width: 1200px) {
    .banner-logo {
        max-width: 800px; /* Larger max width on extra-large screens */
    }
}



/* ============================= */
/* Carousel frame to keep images at a stable size */
.carousel-fixed .carousel-frame {
  width: 100%;           /* Frame takes full width of its container */
  max-width: 800px; /* You can adjust this to your preferred max width */
  height: 500px;       /* Fixed height for the frame */
  margin: auto;         /* Center the frame */
  overflow: hidden;    /* Hide any overflow */
  background-color: #add8e6 ; /* Optional background color */
  display: flex;
  align-items: center; /* Center image vertically */
  justify-content: center; /* Center image horizontally */
}

/* Make images fill the frame without stretching */
/*.carousel-fixed .carousel-frame img {
  width: auto;
  height: 100%; /* Fill the height of the frame */
  /*object-fit: contain; /* Ensure the image is fully visible without cropping */
/*}*/
.carousel-frame img,
.carousel-frame video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* Thumbnail styling adjustments (keep as is, or adjust if needed) */
.thumb-btn {
  border: 2px solid transparent;
  padding: 2px;
  border-radius: 8px;
  background: transparent;
}

.thumb-btn.active {
  border-color: rgba(13,110,253, 0.9);
}

.thumb-img {
  width: 92px;
  height: 92px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}


/* ---------------------------- */
/*     NAVBAR                       */
/* NAVBAR BACKGROUND */
#main-nav.navbar {
    background-color: #CE2029;   /* Fire engine red */
}

/* NAV LINKS + BRAND */
#main-nav.navbar .nav-link,
#main-nav.navbar .navbar-brand {
    color: #ffffff;              /* white text */
    font-weight: bolder;
    font-size: larger;
}

/* HOVER STATE */
#main-nav.navbar .nav-link:hover,
#main-nav.navbar .navbar-brand:hover {
    color: #f1f1f1;              /* softer white on hover */
}

/* DROPDOWN MENU */
#main-nav.navbar .dropdown-menu {
    background-color: #CE2029;   /* match navbar */
    border: none;
}

/* DROPDOWN ITEMS */
#main-nav.navbar .dropdown-item {
    color: #ffffff;
    font-weight: bolder;
    font-size: larger;
}

/* DROPDOWN HOVER */
#main-nav.navbar .dropdown-item:hover,
#main-nav.navbar .dropdown-item:focus {
    color: #f1f1f1;
    background-color: rgba(255,255,255,0.08);  /* subtle highlight */
}

/* ---------------------------- */
/* ADDITIONS FOR MOBILE TOGGLER */
/* ---------------------------- */

/* Remove default border/outline glow */
#main-nav .navbar-toggler {
    border: 0;
    box-shadow: none !important;
}

/* If you want a visible focus for accessibility, use this instead:
#main-nav .navbar-toggler:focus {
    outline: 2px solid rgba(255,255,255,0.6);
    outline-offset: 3px;
}
*/

/* Custom hamburger container */
#main-nav .navbar-toggler-custom {
    display: inline-block;
    width: 30px;
    height: 22px;
    position: relative;
}

/* The 3 bars */
#main-nav .navbar-toggler-custom .bar1,
#main-nav .navbar-toggler-custom .bar2,
#main-nav .navbar-toggler-custom .bar3 {
    display: block;
    position: absolute;
    left: 0;
    width: 30px;
    height: 3px;
    background: #ffffff;         /* matches your white nav text */
    transition: 0.25s ease-in-out;
}

#main-nav .navbar-toggler-custom .bar1 { top: 0; }
#main-nav .navbar-toggler-custom .bar2 { top: 9px; }
#main-nav .navbar-toggler-custom .bar3 { top: 18px; }

/* When nav is open, animate to an X */
#main-nav .navbar-toggler.is-open .navbar-toggler-custom .bar1 {
    top: 9px;
    transform: rotate(45deg);
}

#main-nav .navbar-toggler.is-open .navbar-toggler-custom .bar2 {
    opacity: 0;
}

#main-nav .navbar-toggler.is-open .navbar-toggler-custom .bar3 {
    top: 9px;
    transform: rotate(-45deg);
}

/* Optional: make collapsed menu look nicer on mobile */
@media (max-width: 991.98px) {
    #main-nav .navbar-nav .nav-link {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
}

    /* Optional: makes thumb rows look consistent */
    .thumb-row {
      display: flex;
      justify-content: center;
      gap: .5rem;
      flex-wrap: nowrap;
      overflow-x: auto;
      padding-bottom: .25rem;
      -webkit-overflow-scrolling: touch;
    }
    .thumb-row .thumb-btn {
      border: 0;
      padding: 0;
      background: transparent;
    }
    .thumb-row .thumb-img {
      display: block;
      height: 70px; /* adjust to taste */
      width: auto;
      border-radius: 6px;
    }

    /* Optional: “video” thumb gets a subtle badge look */
    .thumb-btn.video-thumb {
      position: relative;
    }
    .thumb-btn.video-thumb::after {
      content: "▶";
      position: absolute;
      right: 6px;
      bottom: 6px;
      background: rgba(0,0,0,.65);
      color: #fff;
      font-size: 14px;
      line-height: 1;
      padding: 4px 6px;
      border-radius: 999px;
    }

    /* Make modal video fill nicely */
    .modal-video {
      width: 100%;
      height: auto;
      display: block;
    }
.thumb-btn.video-thumb {
  position: relative;
}
.thumb-btn.video-thumb::after {
  content: "▶"; /* play icon */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 24px;
  padding: 10px 12px;
  border-radius: 50%;
}