body {
    font-family: Lato, sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

html {
    scroll-behavior: smooth;
}

header {
    background-color: rgba(0, 0, 75, 0.5); /* 50% transparency */
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between; /* Adjusted to space out items */
    align-items: center;
    position: fixed; /* Fixed position */
    top: 0;
    width: 100%; /* Full width */
    z-index: 1000; /* Ensure it is on top of other elements */
}

header nav {
    display: flex;
    gap: 20px;
}

header nav a {
    color: white;
    padding: 14px 25px; /* Padding around the text */
    font-size: 1.5em;
    text-decoration: none;
}

header nav a:hover {
    background-color: #0096FF;
}

.nav-toggle {
    display: none; /* Hide the checkbox by default */
}

.nav-toggle-label {
    display: none; /* Hide the label by default */
    cursor: pointer;
    z-index: 1001; /* Ensure the label is on top of the menu */
    position: absolute; /* Position it absolutely */
    top: 20px; /* Align with the top padding of header */
    left: 20px; /* Align with the left padding of header */
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
    display: block;
    background-color: white;
    height: 2px;
    width: 25px;
    border-radius: 2px;
    position: relative;
    transition: all 0.3s;
}

.nav-toggle-label span::before {
    content: '';
    position: absolute;
    top: -8px;
    width: 100%;
}

.nav-toggle-label span::after {
    content: '';
    position: absolute;
    top: 8px;
    width: 100%;
}

p {
    text-align: justify;
}

.hero {
    position: relative;
    width: 100%; /* Changed from 100vw to 100% */
    height: 100vh;
    overflow: hidden;
    display: flex; /* Enable flexbox */
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Center items vertically */
    box-sizing: border-box; /* Ensure padding and border are included in the element's total width and height */
}

#video_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Changed from 100vw to 100% */
    height: 100vh; /* Full viewport height */
    object-fit: cover;
    z-index: -1; /* Ensure video is at the back */
}

#hero_image {
    display: none; /* Hide the image by default */
    max-width: 100%; /* Ensure the image does not overflow */
    height: auto; /* Maintain aspect ratio */
    z-index: 1; /* Ensure image is above other elements */
}

.hero-content {
    position: relative;
    z-index: 1; /* Ensure content is above the video/image but below the navbar */
    text-align: center;
    color: white;
    padding: 50px 20px;
}

.text-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-shadow: 0px 0px 3px black;
    text-align: center;
    font-size: 3.5em;
    font-style: italic;
}

/* Define keyframes for fade-in and fade-out animation */
@keyframes fadeInOut {
    0%, 25%, 100% { opacity: 0; } /* Start and end with opacity 0, fade out at 25% */
    5%, 20% { opacity: 1; } /* Fade in at 5%, stay visible until 20% */
}

/* Apply the animation to each text element */
.text {
    position: absolute; /* Stack elements on top of each other */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Ensure centering */
    white-space: nowrap; /* Ensure text does not wrap to the next line */
    opacity: 0;
    animation: fadeInOut 20s linear infinite; /* Apply animation */
}

.text:nth-child(1) {
    animation-delay: 0s; /* No delay for the first text */
}

.text:nth-child(2) {
    animation-delay: 4s; /* Delay for the second text */
}

.text:nth-child(3) {
    animation-delay: 8s; /* Delay for the third text */
}

.text:nth-child(4) {
    animation-delay: 12s; /* Delay for the fourth text */
}

.text:nth-child(5) {
    animation-delay: 16s; /* Delay for the fifth text */
}

#calltoaction {
    background-color: #464646; /* Adjust this color as needed */
    padding: 30px;
    text-align: center;
    color: white;
    margin-top: 0; /* Add some space above the section */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional: adds a shadow effect */
}

#calltoaction h2 {
    width: 60%;
    margin: 0 auto; /* Centers the heading within its container */
    padding-bottom: 10px;
}

#buyNow {
    background-color: #4747d1; /* Dark blue background color */
    color: white; /* White text color */
    border: none; /* Remove default border */
    padding: 15px 30px; /* Add padding for better spacing */
    font-size: 16px; /* Increase font size for readability */
    font-weight: bold; /* Make text bold */
    text-align: center; /* Center the text */
    cursor: pointer; /* Change cursor to pointer on hover */
    border-radius: 5px; /* Rounded corners */
    transition: background-color 0.3s ease; /* Smooth transition for background color */
}

#buyNow:hover {
    background-color: #000066; /* Slightly lighter blue on hover */
}

.headers {
    text-align: center;
    font-size: 1.5em;
}

#automation, #chatbots, #custom {
    padding-left: 5%;
    padding-right: 5%;
}

.bodyText {
    padding: 5%;
    background-color: #ffffff;
    text-align: justify;
}

#chatbots, #contact {
    background-color: #f4f7fa;
    margin-top: 0; /* Remove top margin to avoid gap */
}

/* Ensure color in chatbot section is black */
#typed-container-chatbots .paragraph {
    color: black !important;
}

#typed-container-automation,
#typed-container-chatbots,
#typed-container-custom,
#typed-container-contactus {
    font-size: 1.3em;
}

#typed-container-automation-header,
#typed-container-chatbots-header,
#typed-container-custom-header,
#typed-container-contactus {
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
}

#typed-container-chatbotpricing-header,
#typed-container-custompricing{
    text-align: center;
    font-size: 1.4em;
}

#package1 .paragraph,
#package2 .paragraph,
#calltoaction .paragraph {
    color: white !important;
}

#typed-container-initialsetup,
#typed-container-monthly1,
#typed-container-monthly2 .paragraph,
#typed-container-customdevservices .paragraph {
    font-size: 1.2em;
}

#typed-container-chatbot1,
#typed-container-chatbot2,
#typed-container-customList {
    line-height: 1.5;
    text-align: justify;
    font-size: 1.1em;
    padding: 0 20px;
}

.paragraph {
    margin-top: 20px;
    margin-bottom: 20px;
    color: #00004B;
    font-family: Lato;
}

section {
    padding: 20px;
}

#pricing {
    margin-bottom: 0; /* Remove bottom margin to avoid gap */
}

.pricing-container {
    display: flex;
}

#package1 {
    background-color: #464646;
    color: #ffffff;
}

#package2 {
    background-color: #000000;
    color: #ffffff;
}

#package1, #package2 {
    flex: 1;
    padding: 20px;
}

/* Style for the contact form description */
.contact-form {
    background-color: #EBF2F7; /* Powder Blue */
    font-size: 18px; /* Set text size */
    color: black; /* Set text color */
    padding-top: 0;
    padding: 20px; /* Adds some space around the text */
    text-align: justify;
    margin: auto; /* Remove any extra margin around the text */
}
.contact-form h1 {
    text-align: center;
}

/* Contact form styling */
h2 {
    text-align: center;
    margin-top: 40px;
    font-size: 24px;
}

form {
    background-color: white;
    padding: 20px;
    margin-top: 20px; /* Adds space between heading and form */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    margin: 20px auto; /* Centers the form */
}

form .form-group {
    margin-bottom: 15px;
}

form label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

form input,
form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    margin: 10px 0; /* Adds space around the text field */
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Ensure padding doesn't affect width */
}

/* Common placeholder styling for input and textarea */
input::placeholder, 
textarea::placeholder {
    font-family: Monospace, sans-serif; /* Use the same font family */
    font-size: 1em; /* Adjust the font size as needed */
    color: #999; /* Placeholder text color */
}

form textarea {
    font-family: Lato, sans-serif; /* Use the same font family */
    width: 100%; /* Makes textarea fit the container width */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: none; /* Disable manual resizing */
    box-sizing: border-box;
    min-height: 100px; /* Minimum height */
    overflow: hidden; /* Hide overflow */
}

/* Submit button styling */
form button {
    width: 100%;
    padding: 10px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

form button:hover {
    background-color: #2980b9;
}

/* Styling the button */
#sendBtn {
    background-color: #3498db;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

/* Styling the button when it is disabled */
#sendBtn:disabled {
    background-color: #ddd;
    cursor: not-allowed;
}

/* Styling for the footer */
footer {
    background-color: #00004B;
    color: #ffffff;
    text-align: center;
    padding: 35px;
    display: flex;
    justify-content: center; /* Center the footer content horizontally */
    align-items: center;    /* Center the footer content vertically */
}

footer p {
    margin: 0; /* Remove default margin */
    text-align: center; /* Ensure text is centered */
}

footer a {
    color: white; /* White color for links */
    text-decoration: none; /* Remove underline from links */
    margin: 0 10px; /* Add some spacing between links */
}

footer a:hover {
    text-decoration: underline; /* Underline the links when hovered */
}

.logos {
    display: block;
    margin: 0 auto 20px;
    width: 200px; /* Set a fixed width */
}

.payment {
    width: 60%;
    text-align: left;
    margin: auto;
}

.paypal-button-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2em; /* Remove any padding */
    margin: 2em; /* Remove any margin */
}

/* Media query for mobile devices */
@media only screen and (max-width: 600px) {
    .nav-toggle-label {
        display: block; /* Show the hamburger menu label */
        z-index: 1001; /* Ensure the label is on top of the menu */
        position: absolute; /* Position it absolutely */
        top: 20px; /* Align with the top padding of header */
        left: 20px; /* Align with the left padding of header */
    }

    header nav {
        flex-direction: column; /* Stack the nav links vertically */
        gap: 10px;
        position: fixed; /* Make the nav menu fixed */
        background-color: rgba(0, 0, 75, 0.9); /* Background color with more opacity */
        height: 100%;
        width: 100%;
        top: 0;
        left: -100%; /* Hide the nav menu off-screen */
        transition: left 0.3s;
        justify-content: center; /* Center nav links vertically */
        align-items: center; /* Center nav links horizontally */
        z-index: 1000; /* Ensure the nav menu is below the toggle label */
    }

    header nav a {
        padding: 15px;
        text-align: center;
    }

    .nav-toggle:checked + .nav-toggle-label + nav {
        left: 0; /* Show the nav menu when the checkbox is checked */
    }

    .nav-toggle-label span {
        background-color: white; /* Change hamburger icon color */
    }

    .nav-toggle:checked + .nav-toggle-label span {
        transform: rotate(45deg);
    }

    .nav-toggle:checked + .nav-toggle-label span::before {
        transform: rotate(90deg) translate(-8px, 0);
    }

    .nav-toggle:checked + .nav-toggle-label span::after {
        transform: rotate(90deg) translate(8px, 0);
    }

    .hero {
        height: 70vh; /* Adjust height as necessary */
        background-color: black; /* Black background for mobile view */
        display: flex; /* Enable flexbox */
        justify-content: center; /* Center items horizontally */
        align-items: center; /* Center items vertically */
    }

    .text-container {
        display: none; /* Hide text on mobile */
    }

    #video_bg {
        display: none; /* Hide video on mobile */
    }

    #hero_image {
        display: block; /* Show image on mobile */
        height: 250px; /* Fixed height */
        width: 250px; /* Fixed width */
        margin: 0 auto; /* Center the image horizontally */
    }

    .pricing-container {
        display: flex;
        flex-direction: column; /* Stack pricing columns vertically */
    }

    #calltoaction h2 {
        font-size: 15px;
        width: 100%;
        padding-bottom: 10px;
    }

    footer p {
        width: 70%;
    }
    #typed-container-calltoaction {
        font-size: 1rem;
    }
}

/* Ensure the nav menu is centered in web view */
@media only screen and (min-width: 600px) {
    header {
        justify-content: center; /* Center the header content */
    }

    header nav {
        justify-content: center; /* Center the nav links */
    }
}

/* Payment Page Specific Styles */
.payment-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f9f9f9;
    padding: 20px; /* Add padding for better spacing on smaller screens */
}

.payment-content {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    max-width: 600px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.payment-description {
    margin: 20px 0;
    font-size: 1.1em;
    line-height: 1.6;
}

.payment-terms {
    margin: 20px 0;
    font-size: 1.1em;
    line-height: 1.6;
}

.payment-terms a {
    color: #0070ba;
    text-decoration: none;
}

.payment-terms a:hover {
    text-decoration: underline;
}

.paypal-button-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
}

#payment {
    padding: 100px;
}

@media only screen and (max-width: 600px) {
    .payment-container {
        padding: 10px; /* Reduce padding for better fit on small screens */
        height: auto; /* Allow height to adjust based on content */
    }

    .payment-content {
        padding: 15px; /* Reduce padding inside the content box */
    }

    .payment-description, .payment-terms {
        font-size: 1em; /* Slightly reduce font size for readability */
    }

    .paypal-button-wrapper {
        flex-direction: column; /* Stack elements vertically in the wrapper */
        margin: 10px 0; /* Reduce margin for better spacing */
    }
    .payment {
        font-size: 1em; /* Slightly reduce font size for readability */
        width: 90%;
    }
}

/* Justify text within the <p> elements for the specified sections */
#typed-container-automation .paragraph,
#typed-container-chatbots .paragraph,
#typed-container-custom .paragraph {
    text-align: justify;
}