body {
    font-family: 'Inter', sans-serif;
}
.sensetechsolutions-logo {
    object-fit: contain;
    max-width: 600px;
  }
  .logo {
    max-width: 500px; 
    height: auto;
    margin-left: 1rem;  
}
.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    padding: 50px;
}
.presents-text{
    font-size: x-large;
    margin-top: 25px;
    margin-bottom: 25px;
    font-weight: bold;
    text-align: center;
}
.fullscreen-content {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    max-width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

.close-button {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.5rem;
    background-color: #ff0000;
    border: none;
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    border-radius: 0 10px 0 10px;
}

.hidden {
    display: none;
}

.responsive-text {
    font-size: 2vw;
}

@media (max-width: 768px) {
    .responsive-text {
        display: flex;
        font-size: 4vw;
        /* Adjust the size for smaller screens */
    }
}

@media (max-width: 480px) {
    .responsive-text {
        font-size: 5vw;
        /* Further adjust for very small screens */
    }
}

/* Ensuring the header does not overlap content */
header {
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 1000;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
    border-bottom: 2px solid #000000; /* Adjust thickness and color as needed */

}
header img { /* Target the image within the header */
    max-width: 100px; /* Adjust this value as needed */
    height: auto; /* Maintain aspect ratio */
  }
header nav {
display: flex;
align-items: center;
gap: 1rem; 
margin-right: 1rem; /* Adjust as needed */
} 
body::before {
    content: '';
    position: fixed;
    /* or 'absolute', depending on your layout */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: none;
    /* Initial background image */
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    z-index: -1;
    transition: opacity 1s ease-in-out, background-image 1s ease-in-out;
    opacity: 0;
}

.background {
    position: fixed;
    /* Use 'absolute' if 'fixed' doesn't suit your layout */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    transition: opacity 5s ease-in-out;
    z-index: -1;
}
.download-button {
    display: inline-flex;  /* Make the button a flex container */
    align-items: center;   /* Align the image and text vertically */
    padding: 10px 15px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    transition: transform 0.2s;
    text-decoration: none;
    margin-right: 5px;
  }
/* Start with the second background hidden */
#background2 {
    opacity: 0;
}

body.background-ready::before {
    opacity: 1;
}

.text-background {
    background-color: #fff;
    /* Background color */
    border-radius: 13px;
    /* Rounded corners */
    padding: 20px;
    /* Padding around the text */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    /* 3D effect */
    color: #000;
    /* Text color */
    margin: 20px 0;
    /* Optional: Adds space around the rectangle */
    outline: 3px solid black;
}
/* Style adjustments for responsive design or specific preferences */
@media (max-width: 768px) {
    .text-background {
        padding: 15px;
        /* Adjust padding for smaller screens */
        margin: 15px 0;
        /* Adjust margin for smaller screens */
    }
}

.full-page-intro {
    height: 50%;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #ffffff;
    /* Example background color */
    position: relative;
    /* Use 'sticky' if you want it to stick at the top */
    top: 0;
    z-index: 2;
}

.full-page-intro h1 {
    font-size: 4em;
    /* Large text */
    margin: 0.5em 0;
    color: rgb(13, 157, 201);
}

.full-page-intro p {
    font-size: 2em;
    /* Subtitle text */
    margin: 0.25em 0;
    margin-left: 40px; 
    color: rgb(13, 157, 201);

}

.intro-buttons {
    margin-top: 20px;
}
.app-store {
    background-color: #fff; 
    border: 3px solid black; /* Add a 2px solid black border */

}
.app-store:hover {
    background-color: #ececec; 
    border: 3px solid black; /* Add a 2px solid black border */

}
.app-link {
    text-decoration: none;
    color: white;
    background-color: #007bff;
    /* Example button color */
    padding: 10px 20px;
    margin: 10px;
    border-radius: 5px;
    font-size: 1.5em;
    transition: background-color 0.3s;
}

.app-link:hover {
    background-color: #0056b3;
    /* Darker button on hover */

    .nav-link {
        color: white;
        /* Adjust if needed */
        padding: 10px;
        margin: 0 5px;
        text-decoration: none;
        transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
    }

    .nav-link:hover,
    .nav-link:focus {
        color: #000;
        /* Adjust hover/focus color */
        background-color: #fff;
        /* Background color on hover/focus for better visibility */
        border-radius: 5px;
        /* Optional: Adds rounded corners */
    }
    scroll-behavior: smooth;

}
video {
    border-radius: 15px; /* Adjust the value for the desired roundness */
    border: 3px solid black; 
  }
.icon-container {
    margin-left: 10px; 
    margin-right: 10px;
    display: flex;
    align-items: center;
}
.product-container { /* Apply this class to all your product divs */
    display: flex;
    gap: 8px; 
    padding-bottom: 16px;
    padding-top: 8px;
    max-width: 1200px; /* Adjust this value as needed */
    margin: 0 auto; /* Center the container */
  }
product-container img, 
.product-container video {
  max-width: 100%;
  height: auto;
}
@media (min-width: 768px) { /* Adjust breakpoint as needed */
    .product-container {
      gap: 24px; /* Increase spacing between elements */
    }
    .responsiveP-text {
      font-size: 1.2rem; /* Adjust font size */
    }
  }
/* Base styles */
.responsive-text {
    font-size: 4vw;
}
.responsiveP-text {
    max-width: 50ch; /* Adjust as needed; 'ch' units are relative to character width */
    font-size: clamp(24px, 1.2vw, 30px); /* Increased minimum size, decreased scaling */

    margin-bottom: 3rem;
    max-width: 50ch; /* Adjust as needed; 'ch' units are relative to character width */

}
@media (min-width: 1200px) { /* Adjust the breakpoint as needed */
    .responsiveP-text {
      font-size: 30px; /* Set a fixed size for larger screens */
    }
  }
.button-text{
    font-size: 18px;

}
/* Limit scaling for larger screens */
@media (min-width: 1024px) {
    .responsive-text {
        font-size: 2rem;
        /* Fix the font size for screens wider than 1024px */
    }
}
#footer-container{
    bottom:0;
    width: 100%;
    border-top: 2px solid #000;
}
.container,
.text-background,
.nav-link,
.app-link,
.header,
.full-page-intro,
.product {
    max-width: 1200px;
    /* Set a sensible maximum width for your content */
    margin: auto;
    /* Center align the content */
}
#intro-full-page > div { /* Selects the direct child div of #intro-full-page */
    padding-top: 250px;
    padding-bottom: 150px;
  }

/* You might need to adjust your flex or grid layouts accordingly */
@media (min-width: 1024px) {
    .grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        /* Example to prevent too wide grid items */
    }
}
.vrai-logo { /* Use the new class */
    object-fit:contain;
    height: 5%;         /* Adjust the height percentage as needed */
    margin-right: 20px;
    max-width: 250px;
  }
  .button-image img {
    height: 30px;         /* Adjust image height as needed */
    margin-right: 10px;   /* Add space between image and text */
  }
.google-play {
    background-color: #fff;
    border: 3px solid black; /* Add a 2px solid black border */
  
  }
  .google-play:hover {
    background-color: #ececec;
    border: 3px solid black; /* Add a 2px solid black border */
  
  }
.banner-btn {
    display: inline-flex;
    flex: 1 1 auto;
    /* Allows button to grow and shrink */
    justify-content: center;
    align-items: center;
    width: 200px;
    /* Adjust based on your preference */
    height: 80px;
    /* Adjust based on your preference */
    margin: 0 10px;
    /* Adds some spacing between buttons */
    background-color: #ffffff;
    /* Dark blue background color */
    color: #000000;
    /* Button text color */
    text-decoration: none;
    border: 3px solid black;
    border-radius: 10px;
    /* Rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    /* Subtle shadow for depth */
    transition: background-color 0.3s, transform 0.2s;
    /* Smooth background color change and slight raise effect on hover */
    text-align: center;
    /* Center text horizontally */
    font-size: 1.1rem;
    font-weight: bold;
}
.banner-btn:hover {
    background-color: #d0d0d0; /* Example: Light gray background on hover */
    color: #000000; /* Example: Darker text color on hover */
  }