.container {
  font-family: Arial, Helvetica, sans-serif;
  font-size: xx-large;
  background-color: #fff;
  color:black;
  margin:auto;
  line-height: 1.5;
  padding:10px;
}

/* Device pages CSS   */
h1 {
  margin-bottom: 20px; /* Adjust this value as needed */
}
.logo {
  max-height: 60px; /* Ensure the logo height matches the height of the navbar */
  margin-right: 20px; /* Add some space between the logo and the text */
}
.product-card {
  border: 1px solid #ccc;
  font-size: x-large;
  border-radius: 15px;
  padding: 10px;

}
.product-card {
  margin-bottom:20px;/* adjusts gap between title and cards. */
}

.product-img {
  width: 100%;
  max-width: 200px; /* Adjust the maximum width of the image */
  height: auto;
  border-radius: 5px;
}
.product-title {
  font-size: 20px;
  font-weight: bold;
  margin-top: 10px;
}

.product-price {
  font-size: 18px;
  font-weight: bold;
  color: #000000;
  margin-top: 10px;
}

/* Styles for pagination */
.pagination {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-item {
  display: inline;
  margin-right: 5px; /* Adjust spacing between page items */
}

.page-link {
  padding: 10px 14px;
  background-color: #020202;
  border: 1px solid #838484;
  text-decoration: none;
  color: #fff;
  font-size: xx-large;
  font-weight: bold;
}

.page-link:hover {
  background-color: #3e4043;
  border-color: #000000;
}

.page-link:focus {
  outline: none; /* Remove focus outline */
  box-shadow: 0 0 0 2px rgba(243, 243, 243, 0.973); /* Add focus styling */
}

/* Improved visibility for low vision */
.page-link {
  padding: 10px 14px; /* Increase padding for better click/touch area */
  border-radius: 4px; /* Add border radius for softer edges */
}

/* High contrast for better readability */
.page-link {
  background-color: #020202; /* Blue background */
  border-color: #838484; /* Blue border */
  color: #fff; /* White text color */
}

.page-link:hover {
  background-color: #3e4043; /* Darker blue on hover */
  border-color: #000000; /* Darker blue border on hover */
}

.container-cards {
  display: flex; /* This will make the container a flex container */
  justify-content: center; /* This will center the cards horizontally */
  flex-wrap: wrap; /* This will allow the items to wrap as needed */
}

.card {
  margin: 10px; /* This adds some space around each card */
}






/* Contact info for high visibility */
.contact-info {
  background-color: gray;
  color:#FFD700;
  text-align: center;
  padding: 10px 0;
  font-size: x-large;
}

/* Navbar specific styles */
.navbar {
  background-color: gray; /* Dark background */
  color:#FFD700;
  font-size: x-large; /* Extra large font for visibility */
}

.navbar-brand,
.navbar-nav .nav-link {
  color:#FFD700; /* Yellow links for high contrast */
}
.navbar-brand {
  font-size: 1.5em; /* Adjust the value as needed for a larger size */
}


.navbar-brand:hover,
.navbar-nav .nav-link:hover {
  color: #fff; /* White color on hover for better visibility */
}

/* Dropdown menu styling */
.dropdown-menu {
  background-color: gray; /* Dark background for contrast */
  color: #fff; /* Text color */
  font-size: xx-large; /* Large text for readability */
  position:relative;
  top: 100%;
  z-index:1000;
}

/* Navbar Toggler for better visibility */
.navbar-toggler {
  border-color: #FFD700; /* Yellow border */
}


/* Active link styling */
.nav-item .active {
  color: #ffffe0; /* Bright active link color */
}
/* Navigation bar styling */


/* Resources page h1 and paragraph styling */
#demo-title {
  font-size: 2.25em;

}

#demo-text {
 font-size:1.5em;
}

#about-title {
  font-size:2.25em;
  text-align: center;
}

#about-text {
  font-size:1.5em;
  text-align: center;
}
.logo {
  max-width: 100%;
  height:auto;
  object-fit: contain;
  padding: 10px;
}
.row {
  margin-top: 320px;
}















    /* Carousel-Bootstrap 5 CSS  */
    .carousel-item img {
      height: 300px; /* Set a fixed height for square images */
      width: 300px; /* Set a fixed width for square images */
      object-fit: cover; /* Maintain aspect ratio */
    }
    .carousel {
      background-color: white;
      padding-top:20px;
      padding-bottom: 10px;
      margin-bottom: 20px;
    }
    .carousel-indicators li {
      background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white for indicators */
    }

    .carousel-indicators .active {
      background-color: white; /* White color for active indicator */
    }
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      filter: invert(100%); /* Invert arrow icons for better visibility */
    }

    /* Optional: Adjust text color for better contrast */
    .carousel-item a {
      color: white;
    }
    /* Resource Page Cards CSS  */

    .card-img-top {
      max-height:100px;
      object-fit: contain;
    }
    /* index page bootstrap card css */
    .card {
      margin-bottom: 5px;
    }
    /* founder image css  */

    #founder {
      width: 100px;
      height: auto;
      border-radius: 10px;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2)
    }
    
    

    .footer {
      margin: 20px;
      height:auto;
    }