/* Default logo and brand size */
/* Ensure the navbar brand text and logo stay aligned */
/* Ensure the navbar brand text and logo stay aligned */

@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #ffffff;
  }

  body {
    color: #f1f1f1; /* light text for dark background */
    background-color: #111;
  }

  h1, h2, h3, h4, h5, h6, p, a {
    color: #f1f1f1 !important;
  }

  a.app-store-link {
    color: #8ab4f8 !important; /* softer blue for dark mode links */
  }

  .colored-section {
    background-color: #1a1a1a !important;
  }



footer.white-section p {
  color: #ffffff;
}


footer.white-section a {
  color: #ffffff;
}

footer.white-section a:hover {
  color: #66ccff;
}

  .colored-section {
    background-color: #1e1e1e;
    color: #fff;
  }

  .navbar-light .navbar-brand,
  .navbar-light .nav-link {
    color: #ffffff !important;
  }

  h1, h2, h3, h4, h5, h6, p, a, .text-left {
    color: #ffffff;
  }

  a.qrcoder-color {
    color: #4db8ff;
  }

  a.qrcoder-color:hover {
    color: #66ccff;
  }

  .container-fluid {
    background-color: #121212;
  }
}

/* Show the dropdown on hover */
.nav-item.dropdown:hover .dropdown-menu {
    display: block;
}

/* Optional: Prevent the dropdown from closing when hovering over the dropdown menu */
.nav-item.dropdown .dropdown-menu {
    display: none;
    position: absolute;
    z-index: 1000;
}


.navbar-brand {
    display: flex;
    align-items: center;
    font-size: 1.5rem; /* Default size for larger screens */
}

.navbar-brand img {
    height: 75px; /* Default logo size */
    margin-right: 10px;
}

/* Hide logo image on smaller screens */
@media (max-width: 767px) {
    .navbar-brand img {
        display: none; /* Hide the image on mobile screens */
    }

    .navbar-brand {
        font-size: 1.2rem; /* Smaller font size on mobile */
    }
}
.container-fluid {
  padding: 7% 15%;
}

/* Sections */
.colored-section {
  background-color: #fff;
  color: #fff;
}

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

h1, h2, h3 {
  font-weight: 900;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Futura', sans-serif;
  color: #000
}

h9 {
	color: #1C54E9
}

p {
  color: #000;
  padding-left: 20px;
  padding-right: 20px;

}

.qrcoder-color {
	color: #1C54E9
}

body {
  font-family: 'Futura', sans-serif;
  text-align: center;
  color: #000
}

/* Headings */
.big-heading {
  font-family: 'Futura', sans-serif;
  font-size: 3.5rem;
  line-height: 1.5;
  font-weight: 900;
	color: #5e8ecb
}

/* Headings */
.qrcoder-heading {
  font-family: 'Futura', sans-serif;
  font-size: 3.5rem;
  line-height: 1.5;
  font-weight: 900;
	color: #1C54E9
}


.section-heading {
  font-size: 3rem;
  line-height: 1.5;
}

/* Navigation Bar */
.navbar {
  padding: 0 0 4.5rem
}

.navbar-brand {
  font-family: 'Futura';
  font-size: 2.5rem;
  font-weight: 700;
}

.nav-item {
  padding: 0 18px;
}

.nav-link {
  font-family: 'Futura';
  font-size: 1.2rem;
  font-weight: 500;
  color: #6788e0
}

/* Buttons */
.download-button {
  margin: 5% 3% 5% 0;
}

/* Title Section */

#title {
  text-align: left;
}

#title .container-fluid {
  padding: 3% 15% 7%;
}


.title-image {
  width: 60%;
  transform: rotate(0deg);
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1028px) {
  #title {
    text-align: center;
  }
  .title-image {
    transform: rotate(0deg);
    position: static;
  }
}

/* Features Section */
#features {
  position: relative;
}

.feature-title {
  font-size: 1.5rem;
}

.feature-box {
  padding: 5%;
}

.icon {
  color: #ef8172;
  margin-bottom: 1rem;
}

.icon:hover {
  color: #ff4c68;
}

/* Testimonials Section */
#testimonials {
  background-color: #ef8172;
}

.testimonial-text {
  font-size: 3rem;
  line-height: 1.5;
}

.testimonial-image {
  width: 10%;
  border-radius: 100%;
  margin: 20px;
}


#press {
  background-color: #ef8172;
  padding-bottom: 3%;
}

.press-logo {
  width: 15%;
  margin: 20px 20px 50px;
}

/* Pricing Section */
#pricing {
  padding: 100px;
}


.price-text {
  font-size: 3rem;
  line-height: 1.5;
}

.pricing-column {
  padding: 3% 2%;
}

.press-images {
  display: flex;
  gap: 10px; /* Space between grid items */
  justify-items: start; /* Align items to the left */
  align-items: start; /* Align items to the top */
  margin: 10px 0; /* Add some space around the grid */
  width: 100%; /* Ensure the container is responsive */

}

.press-images img {
    max-width: 200px; /* Limit the size of images to 300px */
    height: auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow */
    transition: transform 0.2s ease-in-out; /* Optional: Add a hover effect */
    margin: 0; /* Remove any default margin */

}

.press-images img:hover {
    transform: scale(1.05); /* Optional: Slight zoom effect on hover */
}

/* Media Query for Smaller Screens */
@media (max-width: 768px) {
  .press-images {
    grid-template-columns: repeat(3, 1fr); /* Stack images in one column */
    max-width: 100%; /* Allow container to take full width */
  }

  .press-images img {
    max-width: 100%; /* Ensure images are 100% width of their container */
  }
}

.iphone-screenshots {
    display: flex;
    justify-content: space-between; /* Distribute images evenly */
    gap: 20px; /* Space between images */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    margin: 20px 0;
}

.iphone-screenshots a {
  flex: 1 1 15%; /* ~16% each to fit 6 in one row */
    text-align: center; /* Center images inside the anchor tags */
}

.iphone-screenshots img {
    max-width: 100%; /* Ensure the images are responsive */
    height: auto;
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    transition: transform 0.2s ease-in-out; /* Smooth zoom effect on hover */
}

.iphone-screenshots img:hover {
    transform: scale(1.05); /* Slight zoom effect on hover */
}

/* Media Query for Smaller Screens */
@media (max-width: 768px) {
    .iphone-screenshots {
        justify-content: center; /* Center the images */
        gap: 10px; /* Reduce the gap between images */
    }

    .iphone-screenshots a {
        flex: 1 1 48%; /* Allow 2 items per row on smaller screens */
    }

    .iphone-screenshots img {
        max-width: 100%; /* Ensure images take up the full width of their container */
    }
}

@media (max-width: 480px) {
    .iphone-screenshots a {
        flex: 1 1 100%; /* Stack the images in one column */
    }

    .iphone-screenshots img {
        max-width: 100%; /* Ensure images take up the full width of their container */
    }
}

.app-store-link {
  color: #fa9f07; /* Hex color for the link */
  text-decoration: none; /* Optional: removes underline */
}

.app-store-link:hover {
  color: #d08508; /* Optional: color change on hover */
}


/* Footer Section */

.social-icon {
  margin: 20px 10px;
  color: black;
}