/* @import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap'); */
/* @import url('https://fonts.googleapis.com/css?family=Lato&display=swap'); */

/*============= GENERAL =============*/

/*-- Prevent Horizontal Scrolling & Font Style --*/
html, body {
    overflow-x: hidden;
    font-family: 'Montserrat', sans-serif;
    /* font-family: 'Lato', sans-serif; */
    color: rgb(255, 255, 255);
}

.custom-link {
  color: #009ff3;
  text-decoration: none;
  cursor: pointer;
}

.custom-link:hover,
.custom-link:focus {
color: #0086ce;
}

#features {
  /* Add padding to bottom of features for screenshots overlap. */
  padding-bottom: 160px !important;
}

#screenshots-carousel{
  max-width: 800px;
  margin: auto;
  /* Pull screenshots up with negative margin for hanging effect. */
  margin-top: -150px;
  /* Ensures proper layering if needed */
  /* position: relative; */
  /* Optional: Brings screenshots forward if backgrounds clash */
  /* z-index: 1;  */
}

.custom-text-dark .carousel-caption {
  position: static; /* Removes absolute positioning, making it flow below the image */
  /*padding: 20px 0;  Adds some vertical spacing for readability */
  padding-top: 20px;
  padding-bottom: 0;
  color: inherit !important; /* Forces inheritance from the parent; use !important to beat Bootstrap's specificity */
}

/* Arrows: Use primary color for fill */
.custom-text-dark .carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23009ff3'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

.custom-text-dark .carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23009ff3'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Indicators: Use primary color for active state, with a neutral inactive for contrast */
.custom-text-dark .carousel-indicators [data-bs-target] {
  background-color: rgba(0, 159, 243, 0.5); /* Semi-transparent #009ff3 for inactive dots */
}

.custom-text-dark .carousel-indicators .active {
  background-color: #009ff3; /* Solid primary for active dot */
}

/* Adjust indicators to sit nicely below everything */
.custom-text-dark .carousel-indicators {
  margin-bottom: 0; /* Removes default bottom margin to hug the bottom */
}

/* Optional: Add hover effect and subtle background for better visibility */
.custom-text-dark .carousel-control-prev,
.custom-text-dark .carousel-control-next {
  transition: background-color 0.3s ease;
}

.custom-text-dark .carousel-control-prev:hover,
.custom-text-dark .carousel-control-next:hover {
  /* background-color: rgba(0, 159, 243, 0.1); Light tint on hover */
}

/* Position controls outside the image bounds (left/right adjacent) */
.custom-text-dark .carousel-control-prev {
  left: -60px;  /* Shift prev control to the left, outside the carousel */
}

.custom-text-dark .carousel-control-next {
  right: -60px;  /* Shift next control to the right, outside the carousel */
}

/* Optional: If you want more space between caption and indicators */
.custom-text-dark .carousel-item {
  /* Add space at the bottom of each slide for indicators */
  padding-bottom: 20px;
}

.modal-open[style] {
	padding-right: 0px !important;
}

/*-- Remove Blue Browser Outline Around Buttons in Chrome --*/
a:focus,
button:focus {
  outline: 0 !important;
  -webkit-appearance: none;
  box-shadow: none !important;
}

/*-- Background Colors --*/
.bg-light-alternate {
  background-color: rgb(233, 236, 239);
}

/*-- Buttons --*/
.btn-primary {
  border-color: #009ff3;
  background-color: #009ff3;
  color: white;
}

.btn-primary:hover,
.btn-primary:focus {
  /*border-color: #008cd8;
  background-color: #0086ce;*/
  border-color: #008cd8;
  background-color: #0086ce;
  color: white;
}

/*-- Text Colors --*/
.custom-text-dark {
  color: #505962;
}

.custom-text-light {
  color: #ffffff;
}

/*-- Section Headings --*/
.heading {
  font-size: 1.9rem;
  /* font-weight: 700; */
  text-align: center;
  margin-bottom: 1rem;
}

.heading-underline {
  width: 7rem;
  height: .2rem;
  background-color: #009ff3;
  margin: 0 auto 2rem;
}

/*-- Prevent Navbar from Covering Top of Sections with Bookmarks --*/
.bookmark-wrapper {
  position: relative;
}

.bookmark {
  position:absolute;
  top:-90px;
}


/*============= PRODUCT FEATURES =============*/
.feature span {
  color: #009ff3;
  margin-bottom: .6rem;
}

.feature h3 {
  font-size: 1.4rem;
  /* font-weight: 600; */
  padding-bottom: .4rem;
}

/*============= NAVIGATION =============*/

.navbar {
  padding: .7rem 1rem;
  font-weight: 400;
  transition: background-color .5s ease 0s;
}
.navbar-brand img {
  height: 2rem;
}
.custom-toggler-icon {
  color: white;
  font-size: 1.6rem;
}
.navbar-nav li {
  padding-right: .8rem;
}
.navbar-nav .nav-link {
  color: white;
  padding-top: .8rem;
}
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
  color: white;
  border-bottom: 2px solid #009ff3;
  padding-bottom: .2rem;
  transition: all .0s ease;
}
.navbar.solid,
.navbar.solid-toggle {
  background: rgba(0, 0, 0, 0.8)!important;
  transition: background-color 1s ease 0s;
}

/*===== Home =====*/
.home-wrapper {
  background: url('../img/home-bg.jpg') no-repeat;
  background-size: cover;
  background-position: center;
  color: white;
  min-height: 100vh;
}

.home {
  background: rgba(0, 0, 0, .7);
  min-height: 100vh;
}

.home-product-wrapper {
  min-height: 100vh;
}

.home-product-tagline-wrapper {
  min-height: 50vh;
}

.home-product-tagline {
  max-width: 75%;
}

.home-product-logo-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 0; /* replaces min-height */
}

.home-product-logo {
  width: 85%;
  max-width: 100%;          /* ← REQUIRED */
  height: auto !important;
  display: block;
  margin: 0 auto;
}

/* Mobile: slightly larger image */
@media (max-width: 767px) {
  .home-product-logo {
      width: 95%;
  }
}

/*-- Bouncing Down Arrow --*/
.bouncing-down-arrow {
  position: absolute;
  bottom: 0;
  width: 100%;
  animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
}

#bouncing-down-arrow {
  opacity: 0.6;
}

#bouncing-down-arrow:hover {
  opacity: 1.0;
}

/*===== Contact =====*/
.contact-wrapper {
  background: url('../img/contact-bg.jpg') no-repeat;
  background-size: cover;
  background-position: center;
  color: white;
  min-height: 100vh;
}

.contact {
  background: rgba(0, 0, 0, .7);
  min-height: 100vh;
}

.contact-row-1 {
  min-height: 95vh;
}

.contact-row-2 {
  min-height: 5vh;
}

.contact-company-logo {
  height: 60px;
}

.contact p {
  font-size: 1.1rem;
}

/*-- Contact Form --*/
.form-control {
  background-color: rgba(45, 45, 45, 0.55);
  border: .10rem solid rgb(255, 255, 255);
  color: rgb(255, 255, 255)!important;
  font-size: 1.1rem;
}

.form-control:focus {
  background: rgba(45, 45, 45, 0.85);
  border: .10rem solid rgb(195, 195, 195);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgb(255, 255, 255)!important;
}

input.btn {
  cursor: pointer;
}

/*-- Remove Element Outlines in Contact Form --*/
.controls input:focus,
.controls textarea:focus {
  outline: 0 !important;
  -webkit-appearance: none;
  box-shadow: none !important;
}