@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&display=swap');

body, html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: white;
    height: 100%;
    width: 100%;
    background: transparent;
}

#background-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(-45deg, #20354E, #3399CC, #20354E, #3399CC);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    z-index: -2;
}

* {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Uniform text shadow */
}

.navbar {
    position: fixed;
    top: -50px; /* Adjusted position to make the navbar slightly higher up */
    width: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 100;
    transition: top 0.3s ease-in-out;
    text-align: center; /* Center-align all text content */
}

.navbar a {
    color: white;
    text-decoration: none;
    margin: 0 20px;
    padding-bottom: 5px;
}

.navbar-visible {
    top: 0; /* Adjust the top property to make it visible */
}

.navbar-links {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
}

.navbar a:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Highlight effect on hover */
    border-radius: 5px; /* Add rounded corners */
}

footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    text-align: center;
    padding: 10px 20px; /* Adjust padding to ensure content fits */
    box-sizing: border-box; /* This ensures padding is included in the width */
    z-index: 10;
}

footer a {
    color: white;
    text-decoration: none;
    margin: 0 10px;
}

header h1 {
    text-align: center;
    font-size: 15vw;
    margin-top: 15vh;
    margin-bottom: 0; /* Remove bottom margin to bring the tagline closer */
}

header h2 {
    font-size: 3vw; /* Smaller than the main title */
    margin-top: 0vh; /* Adjust as needed */
    text-align: center;
    padding-top: 2vh; /* Adjust this value as needed */
}

main {
    z-index: 1;
    position: relative;
}

.info-page main {
    max-width: 60%; /* Adjust based on preference */
    margin: 0 auto; /* Centers the content */
    padding-bottom: 100px; /* Vertical padding and horizontal for a bit of spacing */
    box-sizing: border-box; /* Ensures padding doesn't affect the total width */
}

.info-page p {
    max-width: 600px; /* Adjust based on preference */
    margin: 0px auto; /* Adds vertical spacing and centers horizontally */
}

section {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    margin: 8vh 0; /* Increased spacing */
}

section h2 {
    font-size: 6vw;
    margin-bottom: 10px; /* Reduce the bottom margin as needed */
}

section h3 {
    text-align: center;
    font-size: 10vw;
}

section h4 {
    text-align: center;
    font-size: 3vw;
}

section p {
    font-size: 2.5vw;
    max-width: 800px; /* Adjust based on preference */
}

.pricing-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Always two columns unless overridden */
    gap: 20px;
    justify-content: center; /* Centers the items horizontally if there's extra space */
    padding: 20px;
}

.pricing-tier, .pricing-tier.special {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    padding: 20px;
    margin: 10px;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative; /* Ensure this is set for correct badge positioning */
    align-items: center;  /* Centers the content */
    width: calc(100% - 30px); /* Adjust width - calculate based on container width minus gap */
}

s {
    text-decoration: line-through; /* Ensures the strikeout is consistent */
    text-decoration-thickness: 2px; /* Increases the thickness of the strikeout line */
    text-decoration-color: black; /* Sets a clear color for the strikeout line */
    color: #888; /* Makes the original price slightly faded for contrast */
}

.pricing-tier h3, .pricing-tier p, .pricing-tier .small-text {
    margin: 10px 0;
}

.pricing-tier h4 {
    margin-top: 10px; /* Adjust this value as needed to reduce the space */
    margin-bottom: 5px; /* Reduce the bottom margin */
}

.pricing-tier h4, .pricing-tier p, .pricing-tier .small-text {
    word-wrap: break-word; /* Ensures text wraps to avoid overflow */
}

.pricing-tier, .small-text {
    margin-top: 0; /* Reduce the top margin */
}

.centered-message {
    text-align: center;
    color: white;
    font-size: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%; /* ensures it spans the full width of the container */
    display: block; /* ensures that it doesn't inherit flex or grid properties */
}

.small-text {
    font-size: 1vw;
}

.large-heading {
    font-size: 11vw; /* Assuming 11vw is the size you've used for the similar large headings */
    text-align: left;
}

.original-price {
    text-decoration: line-through;
    color: white; /* Ensures visibility */
}

section > p:last-child, section > img:last-child {
    margin-bottom: 0px; /* Adjust as needed */
}

#contact h2 {
    margin-bottom: 10px; /* Reduce the bottom margin of the h2 to bring it closer to the email address. Adjust this value as needed. */
}

#contact p {
    margin-top: 0; /* Reduce the top margin of the paragraph to bring it closer to the 'contact' heading. Adjust as needed. */
}

.badge {
    position: absolute;
    top: 10px;  /* Adjusted to lower the badge slightly */
    right: -10px; /* Keep it to the right but move a bit left */
    width: 70px;  /* Increase the size of the circle */
    height: 70px;  /* Maintain the circular shape with equal width and height */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem; /* Adjust the font size if needed */
    background-color: #6a0dad; /* Regal purple */
    color: white;
    border-radius: 50%; /* Ensures it's a perfect circle */
    transform: translate(0%, -50%) rotate(45deg); /* Adjusted to rotate by 45 degrees */
    text-align: center;
    line-height: 1.2; /* Reduce line height to bring text lines closer */
    padding: 5px; /* Small padding to keep text from touching the edges */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); /* Optional: add shadow for better visibility */
}

button {
    padding: 10px 20px;
    font-size: 18px;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #2577a9;
}

a[href^="mailto:"] {
    color: #3399CC; /* Adjusted to match your theme */
}

.troubleshooting-table {
    width: 80%;
    margin: 20px auto;
    border-collapse: collapse;
    text-align: left;
}

.troubleshooting-table th, .troubleshooting-table td {
    padding: 10px;
    border: 1px solid #ccc;
}

.troubleshooting-table th {
    background-color: rgba(240, 240, 240, 0.8); /* Light gray with some transparency */
    font-weight: bold;
}

.troubleshooting-table td {
    background-color: transparent; /* Transparent background for table data cells */
}

.troubleshooting-table td:first-child {
    font-weight: bold; /* Bold text for issue column */
}

.troubleshooting-table td:last-child {
    max-width: 600px; /* Adjust based on preference */
}

.troubleshooting-table td:first-child {
    width: 40%; /* Adjust based on preference */
}

.troubleshooting-table td:last-child {
    width: 60%; /* Adjust based on preference */
}

/* Adjustments for Specific Elements */

.troubleshooting-table h2 {
    font-size: 3vw; /* Adjust based on preference */
    text-align: center;
    margin-top: 5vh; /* Adjust based on preference */
}

.troubleshooting-table h2 strong {
    font-weight: bold; /* Bold text for 'troubleshooting' heading */
}

.troubleshooting-table p {
    text-align: center;
    margin-bottom: 10px; /* Adjust spacing below paragraphs */
}

.troubleshooting-table a {
    color: #3399CC; /* Adjust link color */
    text-decoration: none; /* Remove underline from links */
}

.troubleshooting-table a:hover {
    text-decoration: underline; /* Underline on hover for better UX */
}

@keyframes arrow-bounce {
    0% {
        transform: translate(-50%, 0);
    }
    50% {
        transform: translate(-50%, 10px);
    }
    100% {
        transform: translate(-50%, 0);
    }
}

/* Arrow Container */
#arrow-container {
    transition: opacity 0.5s ease-in-out;
    position: fixed;
    bottom: 60px; /* Adjust based on your layout */
    left: 50%;
    transform: translateX(-50%);
    animation: arrow-bounce 2s infinite;
    z-index: 99;
    opacity: 1; /* Make sure the arrow is fully visible initially */
}

#arrow {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 40px solid rgba(255, 255, 255, 0.5); /* Semi-transparent white */
}

/* Arrow Hidden State */
.arrow-hidden {
    opacity: 0 !important; /* Ensure fading out, add !important to override any potential conflicts */
    transition: opacity 0.5s ease-in-out !important;
}

#animation-trigger {
    position: relative;
    top: -600px; /* Adjust this value to move the trigger higher */
}

#emoji-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1; /* Ensure emojis appear above other content */
}

#image-animation-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1; /* Ensure emojis appear above other content */
}

#image-animation-trigger {
    position: relative;
    top: -700px; /* Adjust this value to move the trigger higher */
}

.video-container {
  width: 70vw;
  max-width: 800px ;
  margin:auto;
}

.video-container iframe,
.video-container object,
.video-container embed {
  width: 70vw;
  max-width: 800px ;
  height:calc((9/16)*70vw);
  max-height:calc((9/16)*800px);
}
        
/* Center the .video-container using transform */
.centered-thing {
    position: relative; /* Ensure it stays within the document flow */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#signup-form {
    display: flex;
    justify-content: center;
    align-items: center;
}

#signup-form input[type="email"] {
    height: 40px; /* Adjusts the height of the email input field */
    font-size: 1rem; /* Increases font size */
    padding: 0 10px;
    margin-right: 10px; /* Adds a margin between the input field and the button */
    border: 2px solid #ccc; /* Example border styling */
    border-radius: 5px; /* Rounds the corners of the input field */
}

#signup-form button {
    font-size: 1rem; /* Matches the font size of the input */
    border: none;
    background-color: #3399CC; /* Example button color */
    color: white;
    cursor: pointer;
    padding: 10px 15px; /* Tightens the button around the text */
    border-radius: 5px; /* Rounds the corners of the button */
    height: 40px; /* Matches the height of the email input field */
    white-space: nowrap; /* Prevents the text from wrapping */
    overflow: hidden; /* Keeps the text within the button */
    text-overflow: ellipsis; /* Adds an ellipsis if the text is too long */
}
}

#signup-form button:hover {
    background-color: #2577a9; /* Darker shade on hover */
}

#toggleFormButton {
    background: none; /* Transparent background */
    border: none;  /* No border */
    color: inherit; /* Inherits the text color from its parent or set a specific color */
    font-size: 0.9em; /* Smaller text than the default */
    cursor: pointer; /* Makes it clear that it's clickable */
    text-decoration: underline; /* Optional: underlines the text to indicate it's clickable */
    padding: 5px 10px; /* Adequate padding */
    margin-top: 10px; /* Space above the button */
    display: block; /* Ensures it spans the full width of its container */
}

/* Optional: Hover effect for better user experience */
#toggleFormButton:hover {
    opacity: 0.8; /* Slightly reduce opacity on hover */
}

.emailsignup-page main {
    max-width: 60%; /* Adjust based on preference */
    margin: 0 auto; /* Centers the content */
    padding-bottom: 100px; /* Vertical padding and horizontal for a bit of spacing */
    box-sizing: border-box; /* Ensures padding doesn't affect the total width */
}

.emoji {
    position: absolute;
    font-size: 6rem; /* Adjust based on desired size */
    opacity: 1; /* Start invisible for fade-in effect */
    transition: transform 0.5s linear; opacity 2s ease-out; /* Ensure duration matches or exceeds scroll animation duration */
    z-index: -1; /* Ensure emojis appear above other content */
}

.repeated-image {
    position: absolute;
    width: 600px; /* Adjust size as needed */
    opacity: 0; /* Start with images invisible */
    transition: transform 0.5s linear; opacity 2s ease-out; /* Ensure duration matches or exceeds scroll animation duration */
}

.section-image {
    max-width: 100%; /* Ensures image is no wider than its container */
    height: auto; /* Maintains aspect ratio */
    display: block; /* Removes default inline behavior, helping with spacing */
    margin: 0 auto; /* Centers image if it's smaller than the container */
}

.navbar-visible {
    top: 0; /* Adjust as needed to make it visible */
}

/* Specific size adjustments for all section images */
.main-window-image,
.options-menu-image,
.setup-image,
.lost-focus-image {
    max-width: 600px; /* Adjust as needed for a smaller, proportional size */
}

.navbar, footer {
    left: 0;
    right: 0;
}

  .pricing-page-container {
    max-width: 900px;
    margin: auto;
    text-align: center;
    margin-top: 2em;
    padding-left: 1em;
    padding-right: 1em;
  }

  .subscription-section, .lifetime-section {
    margin-bottom: 2em;
    padding: 1em;
    background-color: #f9f9f9;
    border-radius: 8px;
  }

/* Toggle Switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 60px; /* Width of the toggle */
  height: 34px; /* Height of the toggle */
  margin: 10px; /* Adjust spacing around the toggle */
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

#monthly-price {
    font-size: 24px;
            font-weight: bold;
            background: linear-gradient(to right, #007bff, #ff69b4, #8a2be2); /* Bold blue to vivid pink to purple */
            -webkit-background-clip: text;
            color: transparent;
            display: inline;
}

#annual-price {
    font-size: 24px;
            font-weight: bold;
            background: linear-gradient(to right, #007bff, #ff69b4, #8a2be2); /* Bold blue to vivid pink to purple */
            -webkit-background-clip: text;
            color: transparent;
            display: inline;
}

#lifetime-price {
    font-size: 24px;
            font-weight: bold;
            background: linear-gradient(to right, #007bff, #ff69b4, #8a2be2); /* Bold blue to vivid pink to purple */
            -webkit-background-clip: text;
            color: transparent;
            display: inline;
}

#free-price {
    font-size: 24px;
            font-weight: bold;
            background: linear-gradient(to right, #007bff, #ff69b4, #8a2be2); /* Bold blue to vivid pink to purple */
            -webkit-background-clip: text;
            color: transparent;
            display: inline;
}

.account-section h4 {
    font-size: 1.5rem; /* Smaller headings for sections */
    margin-bottom: 0.5rem; /* Tighter spacing to following content */
}

.account-section p,
.account-section label {
    font-size: 1rem; /* Smaller text for content and labels */
    margin-top: 0.5rem; /* Reduced spacing from previous elements */
}

.account-button {
    font-size: 1rem; /* Smaller button text */
    padding: 0.5rem 1rem; /* Smaller buttons */
    margin-top: 0.5rem; /* Reduced spacing from previous elements */
}

.account-label {
    display: block; /* Ensure label is on its own line for clarity */
    margin-bottom: 0.25rem; /* Space before checkbox */
}

.login-status-container {
    position: fixed; /* Fixed positioning to make it stay in place during scrolling */
    top: 0; /* Align to the top of the viewport */
    right: 0; /* Align to the right of the viewport */
    padding: 2px; /* Add some padding around the text */
    background-color: transparent; /* Clear background */
    z-index: 1000; /* Ensure it stays on top of other content */
    text-align: right; /* Align the text to the right */
    font-family: 'Poppins', sans-serif; /* Your font */
    font-size: 14px; /* Adjust the font size as needed */
}

.login-status-container a {
    color: inherit; /* Make links use the text color they inherit from the parent */
    text-decoration: none; /* No underlining */
}

.login-container .error {
    color: red;           /* Error text color */
    text-align: center;   /* Center the text */
    margin-top: 10px;     /* Spacing between the form and the error message */
    font-size: 16px;      /* Make the error message stand out */
}

.login-container a {
    color: inherit; /* Make links use the text color they inherit from the parent */
    text-decoration: none; /* No underlining */
}

.manage-account {
    opacity: 0.6; /* Less visible than other links */
    color: inherit; /* Inherits the text color from its parent for consistency */
    text-decoration: none; /* Removes underline from the link */
}

.modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4); /* Black with opacity */
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#logout-text {
    display: block; /* Change to block to have it on a new line */
    margin-top: 5px; /* Optional: Add some space above the logout text */
}

#login-link, #logout-link {
    text-decoration: none; /* Remove underline from links */
}

#logout-link:hover {
    text-decoration: underline; /* Add underline on hover for better UX */
}

@keyframes arrow-bounce {
    0%, 100% {
        transform: translate(-50%, 0);
    }
    50% {
        transform: translate(-50%, -20px);
    }
}


@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.menu-toggle {
    display: none; /* Hide "Menu" button by default */
}

@media (max-width: 768px) {    
    #emoji-container, #image-animation-container {
        display: none; /* Hide animation containers on mobile */
    }
    footer {
        padding: 10px 10px; /* Reduce padding on smaller screens */
        font-size: 14px; /* Adjust font size for smaller screens */
    }
    #signup-form button {
        padding: 10px 10px; /* Adjust padding */
        font-size: 14px; /* Reduce font size */
        width: 100%; /* Make the button full width */
        max-width: 200px; /* But limit its maximum width */
    }

    #signup-form input[type="email"] {
        margin-bottom: 10px; /* Add space between input and button */
        width: 100%; /* Full width to match button */
        max-width: 200px; /* Limit maximum width */
    }

    .pricing-container {
        grid-template-columns: 1fr 1fr; /* Ensures two columns on smaller screens */
    }
    
    .navbar {
        display: none; /* Hide navbar by default on mobile */
        padding: 10px 0; /* Add padding for better touch interactions */
        background-color: #333; /* Example background color */
        position: fixed;
        top: 0; /* Adjust top position as needed */
        left: 0;
        width: 100%;
        z-index: 1000; /* Ensure it overlays other content */
        box-shadow: 0 2px 5px rgba(0,0,0,0.5); /* Example box shadow */
    }

    .navbar.active {
        display: block; /* Show navbar when active class is applied */
    }

    .navbar a {
        display: block;
        padding: 10px;
        color: #fff; /* Example text color */
        text-decoration: none;
    }

    .menu-toggle {
        display: block; /* Ensure "Menu" button is visible on small screens */
        padding: 10px;
        font-size: 16px;
        background-color: #555; /* Example button background color */
        color: #fff; /* Example button text color */
        border: none;
        cursor: pointer;
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 1001; /* Ensure it overlays the navbar */
    }

        .troubleshooting-table {
        width: 100%; /* Full width for smaller screens */
    }

    .troubleshooting-table th, .troubleshooting-table td {
        font-size: 0.9em; /* Smaller font size for table cells on smaller screens */
        padding: 8px; /* Adjust padding */
    }

    .troubleshooting-table td:first-child {
        width: 50%; /* Adjust width of first column on smaller screens */
    }

    .troubleshooting-table td:last-child {
        width: 50%; /* Adjust width of last column on smaller screens */
    }
}