/* styles.css */

body {
    background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(154, 154, 154, 0.6)), url('background.jpg');
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    /* Other styles as before */
}

/* Navbar Styles */
nav {
    background-color: #082a7a; /* Technology-Oriented */
    text-align: center;
    padding: 20px 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

nav:hover {
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}


nav h1 {
    color: #F7A600; /* Libertarian */
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: color 0.3s ease;
}

nav h1:hover {
    color: #000000; /* Honesty */
}

p {
    max-height: 250px;
    overflow-y: hidden;
    margin-top: 35px;
}

p2 {
    max-height: 250px;
    overflow-y: hidden;
    margin-top: 35px;
    display: inline-block;
}

p3 {
    max-height: 250px;
    overflow-y: hidden;
    margin-top: 35px;
    display: inline-block;
}

nav h3 {
    color: #F7A600; /* Libertarian */
    margin: 0;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: color 0.3s ease;
}

nav h3:hover {
    color: #f9ae19; /* Honesty */
}

nav h2 {
    color: #d58e01; /* Libertarian */
    margin: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: color 0.3s ease;
}

nav h2:hover {
    color: #000000; /* Honesty */
}

/* Futuristic Interactive Elements */
nav::before,
nav::after {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #000000, #a50000, #F7A600); /* Libertarian to Honesty */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1s ease;
    opacity: 0.5;
}

nav::before {
    left: 0;
}

nav::after {
    right: 0;
}

nav:hover::before,
nav:hover::after {
    transform: scaleX(1);
    opacity: 1;
}

.content-row {
    display: flex;
    justify-content: space-between;
    margin: 20px;
}

/* CONTENT BOX */

.content-box {
    background-color: #F7A600; /* Libertarian */
    color: #FEF3E9;
    padding: 20px;
    border-radius: 5px;
    flex-basis: calc(50% - 20px);
    margin-right: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    cursor: pointer;
}

/* Add a hover effect */
.content-box:hover {
    background-color: #f9ae19; /* Honesty */
    transform: scale(1.05); /* Scale up the box on hover */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); /* Add a subtle box-shadow on hover */
}

/* Add a click effect */
.content-box:active {
    transform: scale(0.95); /* Scale down the box on click */
}

/* Optional: Add a transition effect for smoother hover and click transitions */
.content-box:hover::before,
.content-box:active::before {
    transform: scaleX(1);
    opacity: 1;
}

/* CONTENT BOX 1 */
.content-box1 {
    background-color: #F7A600; /* Libertarian */
    color: #FEF3E9;
    padding: 20px;
    border-radius: 5px;
    flex-basis: calc(50% - 20px);
    margin-right: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    cursor: pointer;
}

/* Add a hover effect */
.content-box1:hover {
    background-color: #f9ae19; /* Honesty */
    transform: scale(1.05); /* Scale up the box on hover */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); /* Add a subtle box-shadow on hover */
}

/* Add a click effect */
.content-box1:active {
    transform: scale(0.95); /* Scale down the box on click */
}

/* Optional: Add a transition effect for smoother hover and click transitions */
.content-box1:hover::before,
.content-box1:active::before {
    transform: scaleX(1);
    opacity: 1;
}

/* CONTENT BOX 2 */

.content-box2 {
    background-color: #F7A600; /* Libertarian */
    color: #FEF3E9;
    padding: 20px;
    border-radius: 5px;
    flex-basis: calc(50% - 20px);
    margin-right: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    cursor: pointer;
}

/* Add a hover effect */
.content-box2:hover {
    background-color: #f9ae19; /* Honesty */
    transform: scale(1.05); /* Scale up the box on hover */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); /* Add a subtle box-shadow on hover */
}

/* Add a click effect */
.content-box2:active {
    transform: scale(0.95); /* Scale down the box on click */
}

/* Optional: Add a transition effect for smoother hover and click transitions */
.content-box2:hover::before,
.content-box2:active::before {
    transform: scaleX(1);
    opacity: 1;
}

/* CONTENT BOX 3 */
.content-box3 {
    background-color: #F7A600; /* Libertarian */
    color: #FEF3E9;
    padding: 20px;
    border-radius: 5px;
    flex-basis: calc(50% - 20px);
    margin-right: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    cursor: pointer;
}

/* Add a hover effect */
.content-box3:hover {
    background-color: #f9ae19; /* Honesty */
    transform: scale(1.05); /* Scale up the box on hover */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); /* Add a subtle box-shadow on hover */
}

/* Add a click effect */
.content-box3:active {
    transform: scale(0.95); /* Scale down the box on click */
}

/* Optional: Add a transition effect for smoother hover and click transitions */
.content-box3:hover::before,
.content-box3:active::before {
    transform: scaleX(1);
    opacity: 1;
}


/* Add spacing between the screen border and the boxes */
.container {
    margin: 20px;
    padding: 40px;
}

.input-container {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* Style for form inputs */
.input-container input[type="text"],
.input-container input[type="email"] {
    padding: 10px;
    width: 100%;
    border: none;
    border-radius: 5px;
    margin-bottom: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

/* Add hover effect to form inputs */
.input-container input[type="text"]:hover,
.input-container input[type="email"]:hover {
    background-color: #f9ae19; /* Honesty */
    transform: scale(1.05); /* Scale up the input on hover */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Add a subtle box-shadow on hover */
}

/* Add click effect to form inputs */
.input-container input[type="text"]:active,
.input-container input[type="email"]:active {
    transform: scale(0.95); /* Scale down the input on click */
}

/* Style for submit button */
.input-container input[type="submit"] {
    background-color: #FF6B6B; /* Democracy */
    color: #22333C;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Add hover effect to submit button */
.input-container input[type="submit"]:hover {
    background-color: #004ba2; /* Future-Oriented */
    transform: scale(1.05); /* Scale up the button on hover */
}

/* Add click effect to submit button */
.input-container input[type="submit"]:active {
    transform: scale(0.95); /* Scale down the button on click */
}

.new-layer {
    display: none;
    position: absolute;
    top: 15%;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 1s ease-in-out;
    background-color: rgba(255, 255, 255, 0.9); /* Add a semi-transparent background */
    /* Add other styles as needed */
}

/* Styles for the Constitution container */
.constitution-container {
    background-color: #f0f0f0;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    text-align: center;
}

/* Styles for text fields */
.text-fields {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.text-field {
    margin: 10px 0;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    max-width: 400px;
    text-align: left;
    transition: transform 0.2s, box-shadow 0.2s;
}

.text-field:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.text-field h3 {
    font-size: 18px;
    margin-bottom: 10px;
}

.text-field p {
    font-size: 14px;
    color: #555;
}

/* Style for the title */
h2 {
    font-size: 24px;
    margin-bottom: 20px;
}

h4 {
    font-size: 12px;
    margin-bottom: 10px;
    font-style: italic;
}
/* CSS for the Lottie Animation container */
.lottie-animation {
    width: 100%; /* Adjust the width as needed */
    height: auto; /* Let the height adjust proportionally */
    max-width: 400px; /* Set a maximum width if desired */
    margin: 0 auto; /* Center the animation horizontally */
    /* Add any additional styles, such as padding or background color */
  }




/* Add this media query at the end of your existing CSS */

@media (max-width: 768px) {
    /* Existing mobile styles for body and navbar (provided earlier) */
    body {
        background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(154, 154, 154, 0.6)), url('background.jpg');
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        /* Other styles as before */
    }

    /* Navbar Styles */
    nav {
        background-color: #082a7a; /* Technology-Oriented */
        text-align: center;
        padding: 10px 0; /* Reduce padding for smaller screens */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: box-shadow 0.3s ease;
    }

    nav h1 {
        font-size: 20px; /* Decrease font size for smaller screens */
    }

    /* Update other styles as needed for smaller screens */

    .content-row {
        display: flex;
        flex-direction: column; /* Stack boxes vertically on small screens */
        margin: 10px;
    }

    /* CONTENT BOX styles for mobile */
    .content-box,
    .content-box1,
    .content-box2,
    .content-box3 {
        padding: 10px; /* Reduce padding for smaller screens */
        flex-basis: 100%; /* Full width on small screens */
        margin: 10px 0; /* Add vertical margin for separation */
    }

    /* Style for form inputs on mobile */
    .input-container input[type="text"],
    .input-container input[type="email"] {
        padding: 5px; /* Reduce padding for smaller screens */
    }

    /* Update other styles as needed for smaller screens */

    /* Optional: Hide elements not needed on mobile screens */
    .new-layer {
        display: none;
    }

    /* Update styles for paragraph elements */
    p,
    p2,
    p3 {
        max-height: none; /* Remove height limit on paragraphs */
        overflow-y: visible; /* Allow content to overflow on smaller screens */
        margin-top: 15px; /* Adjust top margin for spacing */
    }

    /* Navbar h2 styles for mobile */
    nav h2 {
        font-size: 14px; /* Decrease font size for smaller screens */
    }

    /* Futuristic Interactive Elements styles for mobile */
    nav::before,
    nav::after {
        height: 3px; /* Reduce line height for mobile */
    }

    /* Content Row styles for mobile */
    .content-row {
        margin: 10px; /* Adjust margin for spacing */
    }

    /* Content Box styles for mobile (no changes needed) */

    /* Input Container styles for mobile */
    .input-container {
        margin-top: 10px; /* Adjust top margin for spacing */
    }

    /* Input styles for mobile */
    .input-container input[type="text"],
    .input-container input[type="email"] {
        padding: 5px; /* Reduce padding for smaller screens */
    }

    /* Update other styles as needed for smaller screens */

    /* Optional: Hide elements not needed on mobile screens (no changes needed) */

    /* Constitution Container styles for mobile */
    .constitution-container {
        padding: 10px; /* Adjust padding for smaller screens */
    }

    /* Text Fields styles for mobile */
    .text-fields {
        margin: 5px 0; /* Adjust margin for spacing */
    }

    /* Text Field styles for mobile */
    .text-field {
        padding: 10px; /* Adjust padding for smaller screens */
    }

    /* Text Field h3 styles for mobile */
    .text-field h3 {
        font-size: 16px; /* Decrease font size for smaller screens */
    }

    /* Text Field p styles for mobile */
    .text-field p {
        font-size: 12px; /* Decrease font size for smaller screens */
    }

    /* h2 and h4 styles for mobile */
    h2 {
        font-size: 20px; /* Decrease font size for smaller screens */
    }

    h4 {
        font-size: 10px; /* Decrease font size for smaller screens */
    }

    /* Lottie Animation styles for mobile */
    .lottie-animation {
        max-width: 100%; /* Allow the animation to be full width */
    }

    /* Update other styles as needed for smaller screens */
}