@charset "UTF-8";

.navbar {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-top: 1rem;
    padding-right: 1rem;
    padding-left: 1rem;
    padding-bottom: 1rem;
}

.mt-3-ss{
	margin-top: 0rem !important;
}




.bg-site1 {
    background-image: -webkit-linear-gradient(270deg,rgba(39,67,91,1.00) 0%,rgba(11,18,32,1.00) 100%);
    background-image: -moz-linear-gradient(270deg,rgba(39,67,91,1.00) 0%,rgba(11,18,32,1.00) 100%);
    background-image: -o-linear-gradient(270deg,rgba(39,67,91,1.00) 0%,rgba(11,18,32,1.00) 100%);
    background-image: linear-gradient(180deg,rgba(39,67,91,1.00) 0%,rgba(11,18,32,1.00) 100%);
}


.bg-site2 {
    background-image: -webkit-linear-gradient(270deg,rgba(95,8,23,1.00) 0%,rgba(11,18,32,1.00) 100%);
    background-image: -moz-linear-gradient(270deg,rgba(95,8,23,1.00) 0%,rgba(11,18,32,1.00) 100%);
    background-image: -o-linear-gradient(270deg,rgba(95,8,23,1.00) 0%,rgba(11,18,32,1.00) 100%);
    background-image: linear-gradient(180deg,rgba(95,8,23,1.00) 0%,rgba(11,18,32,1.00) 100%);
}


.bg-site3 {
    background-image: -webkit-linear-gradient(270deg,rgba(39,91,78,1.00) 0%,rgba(10,32,27,1.00) 100%);
    background-image: -moz-linear-gradient(270deg,rgba(39,91,78,1.00) 0%,rgba(10,32,27,1.00) 100%);
    background-image: -o-linear-gradient(270deg,rgba(39,91,78,1.00) 0%,rgba(10,32,27,1.00) 100%);
    background-image: linear-gradient(180deg,rgba(39,91,78,1.00) 0%,rgba(10,32,27,1.00) 100%);
}


.bg-site4 {
    background-image: -webkit-linear-gradient(270deg,rgba(39,55,91,1.00) 0%,rgba(9,21,32,1.00) 100%);
    background-image: -moz-linear-gradient(270deg,rgba(39,55,91,1.00) 0%,rgba(9,21,32,1.00) 100%);
    background-image: -o-linear-gradient(270deg,rgba(39,55,91,1.00) 0%,rgba(9,21,32,1.00) 100%);
    background-image: linear-gradient(180deg,rgba(39,55,91,1.00) 0%,rgba(9,21,32,1.00) 100%);
}


.bg-site5 {
    background-image: -webkit-linear-gradient(270deg,rgba(39,55,91,1.00) 0%,rgba(12,82,145,1.00) 100%);
    background-image: -moz-linear-gradient(270deg,rgba(39,55,91,1.00) 0%,rgba(12,82,145,1.00) 100%);
    background-image: -o-linear-gradient(270deg,rgba(39,55,91,1.00) 0%,rgba(12,82,145,1.00) 100%);
    background-image: linear-gradient(180deg,rgba(39,55,91,1.00) 0%,rgba(12,82,145,1.00) 100%);
}



.text-spyellowss {
    color: #EAB40D;
}

.band-bottom {
    background-color: #222325;
}

.bg-bottomnav-ss {
    background-image: -webkit-linear-gradient(270deg,rgba(62,62,62,1.00) 0%,rgba(35,35,37,1.00) 100%);
    background-image: -moz-linear-gradient(270deg,rgba(62,62,62,1.00) 0%,rgba(35,35,37,1.00) 100%);
    background-image: -o-linear-gradient(270deg,rgba(62,62,62,1.00) 0%,rgba(35,35,37,1.00) 100%);
    background-image: linear-gradient(180deg,rgba(62,62,62,1.00) 0%,rgba(35,35,37,1.00) 100%);
}



/*media quiries*/

@media (max-width: 767px)  {
      
	.display-2 {
  	font-size: 40px;
	}
	
	.display-4 {
  	font-size: 40px;
	}	
	
	
	h1 {
          font-size: 30px;
      }
	
	 h2 {
          font-size: 20px;
      }
	
	 h3 {
          font-size: 20px;
      }	
		 
	h4 {
          font-size: 18px;
      }
	
	 h5 {
          font-size: 18px;
      }
}



/* Footer link color on dark background */
.footer-links a {
    color: #bcd4ff;      /* soft light blue */
    text-decoration: none;
}

.footer-links a:hover {
    color: #e7f0ff;      /* even lighter on hover */
    text-decoration: underline;
}





/*Photo resize*/
.ss-img-200 {
  width: 200px;
}



/*light box row control*/

.lbrow {
  margin: 15px;
}



/*up down accordion arrow style   https://stackoverflow.com/questions/62900105/how-to-modify-arrows-in-bootstrap-accordion*/

a[data-toggle="collapse"] i.fas:before {
    content: "\f107";    /* angle-down */
}

a[data-toggle="collapse"].collapsed i.fas:before {
    content: "\f106";    /* angle-up */
}



.jumbotron {
   background: url("..//images/biomedix-jumbo-0.jpg") no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
   -o-background-size: cover;
}



/* Dark dropdown background */
.navbar-dark .dropdown-menu {
  background-color: #121212;          /* dark gray surface */
  border: 1px solid #2b2b2b;          /* subtle border */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6);
}

/* Dropdown links */
.navbar-dark .dropdown-menu .dropdown-item {
  color: #f7cd83;
  padding: 0.5rem 1rem;
  transition: background-color 0.2s, color 0.2s;
}

/* Hover / focus state */
.navbar-dark .dropdown-menu .dropdown-item:hover,
.navbar-dark .dropdown-menu .dropdown-item:focus {
  background-color: #333333;          /* highlight background */
  color: #ffffff;                     /* bright text on hover */
}

/* Divider in dropdown */
.navbar-dark .dropdown-divider {
  border-color: #3a3a3a;
}

/* Active / selected link styles */
.navbar-dark .dropdown-menu .dropdown-item.active,
.navbar-dark .dropdown-menu .dropdown-item:active {
  background-color: #333333;
  color: #ffffff;
}

/* Dropdown toggle arrow color */
.navbar-dark .nav-link.dropdown-toggle {
  color: #cccccc;                     /* light gray toggle link */
}
.navbar-dark .nav-link.dropdown-toggle:hover {
  color: #ffffff;
}


/* Only affects the video library page */

.video-hero-img {
  max-width: 60%;   /* shrink main visual image */
}

.logo-hero-img {
  max-width: 50%;   /* shrink logo */
}

@media (max-width: 768px) {
  .video-hero-img,
  .logo-hero-img {
    max-width: 70%; /* optional tweak for tablets/phones */
    margin: 0 auto;
  }
}



/* --------------------------------------------------
   CARD BACKGROUND (soft white, slight translucency)
-------------------------------------------------- */
.card {
  background-color: rgba(255, 255, 255, 0.85) !important; /* softened white */
  backdrop-filter: blur(2px); /* subtle glass effect */
  border-radius: 14px !important; /* slightly larger rounding */
  overflow: hidden; /* ensures card image inherits radius */
}



/* --------------------------------------------------
   CARD BUTTON BASE COLORS (softened Biomedix blue)
-------------------------------------------------- */
.btn-primary {
  background-color: #3b6ea5 !important; /* main blue */
  border-color: #345f8f !important;
}

.btn-primary:hover {
  background-color: #2f5a87 !important; /* darker hover */
  border-color: #274c72 !important;
}



/* --------------------------------------------------
   GLOBAL BUTTON SHAPE IMPROVEMENT
-------------------------------------------------- */
.btn {
  border-radius: 10px !important; /* smoother rounding */
}

/*Back Button Style*/
.back-btn {
  font-weight: 500;
  font-size: 1.1rem;
}



/* --------------------------------------------------
   FIX BOOTSTRAP .card-link OVERRIDE
   Ensures the bottom CTA buttons CENTER properly.
-------------------------------------------------- */
.card .card-link {
  display: block !important;  /* needed for centering */
  text-align: center !important;
  margin: 0 auto !important;
}



/* --------------------------------------------------
   CTA BUTTON APPEARANCE INSIDE CARDS
   Thicker, centered, narrower, premium feel.
-------------------------------------------------- */
.card .btn {
  padding: 0.75rem 1.6rem;     /* thicker button */
  font-weight: 600;            /* stronger label */
  margin-top: 0.75rem;         /* spacing above button */
  min-width: 180px;            /* consistent width */
  width: auto;                 /* prevents full stretching */
  display: block;              /* ensures centering behaves */
  text-align: center;          
}


/* TEXT COLOR used on video header*/
.gold {
	color: #fad369;
}


/*unbold text*/

.unbold {
	font-weight: lighter;
}