/* Global Styles */
body {
    background-color: white;
    color: black;
    font: Arial, sans-serif;
    margin: 0;
    padding: 0;
    max-width: 100vw;
}

/* Headings */
h1 {
    font-size: 32px;
    padding: 0;
    margin: 0;
    font-weight: bolder;
}

h2 {
    font-size: 28px;
    padding: 0;
    margin: 0;
    font-weight: bolder;
}

h3 {
    font-size: 26px;
    padding: 0;
    margin: 0;
    font-weight: bolder;
}

h4 {
    font-size: 24px;
    padding: 0;
    margin: 0;
    font-weight: bolder;
}
form {
  background-color: rgb(249, 249, 249);
  border-radius: 12px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px 0px;
  margin-bottom: 30px;
  padding: 20px;
  width: 100%; /* Take full available width */
  height: auto;
  font-family: Arial, sans-serif;
}

/* Label styling with custom cursor */
label {
  cursor: url('IMAGES/cursor.png'), default;
  font-size: 18px;
  color: rgb(34, 34, 34);
}

/* Input, textarea, select, and button elements with consistent styling */
input, textarea, select, button {
  background-color: white;
  border-radius: 12px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px 0px;
  margin-bottom: 15px;
  padding: 10px;
  width: 100%; /* Full width of the form container */
  font-size: 16px;
  font-family: Arial, sans-serif;
  border: 1px solid #e0e0e0;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* Hover effect similar to price items */
input:hover, textarea:hover, select:hover, button:hover {
  transform: translateY(-3px);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 15px;
}

/* Submit button hover effect like the button on price list */
button, input[type="submit"] {
  cursor: pointer;
  background-color: black; /* Purple background */
  color: white;
  border: none;
}

button:hover, input[type="submit"]:hover {
  background-color: #5a4dcf; /* Darker purple on hover */
}

/* Validation colors */
input:valid, textarea:valid {
  background-color: #ddf0dd; /* Light green for valid */
}

input:invalid, textarea:invalid {
  background-color: #f0dddd; /* Light red for invalid */
}

/* Fieldset and legend styling */
fieldset {
  border: 0;
  padding: 0;
}

legend {
  border: 0;
  font-size: 18px;
  color: rgb(34, 34, 34);
}

/* Table-based form handling */
table button, table input {
  *overflow: auto; /* IE6/7 specific fix */
}

/* Box-sizing for radio and checkbox elements */
input[type="checkbox"], input[type="radio"] {
  box-sizing: border-box;
}

/* Remove default styles from buttons in older browsers */
button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* Text area vertical resize and overflow */
textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical;
}
#SubmitButton{
    background-color:black;
}
#SubmitButton:hover{
    background-color:blue;
}
/* Form Styling */
#forgot-password-form,
#login-form {
    border: 2px solid #000;
    max-width: 400px;
    margin: 20px auto;
    padding: 20px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

#forgot-password-form input[type="text"],
#login-form input[type="text"],
#login-form input[type="password"],
#forgot-password-form input[type="submit"],
#login-form input[type="submit"] {
    width: calc(100% - 40px);
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

#forgot-password-form input[type="submit"],
#login-form input[type="submit"] {
    background: #2C3E50;
    color: #fff;
    cursor: pointer;
    transition: background 0.3s ease;
}

#forgot-password-form input[type="submit"]:hover,
#login-form input[type="submit"]:hover {
    background: #1A252F;
}

#forgot-password-form hr,
#login-form hr {
    border-bottom: 2px solid #000;
    margin: 10px 0;
}
/* Section Styling */
.section {
  background-color: rgb(249, 249, 249); /* Light background */
  border-radius: 12px; /* Rounded corners */
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px 0px; /* Drop shadow */
  margin-bottom: 30px;
  padding: 20px;
  width: 100%; /* Take full available width */
  height: auto; /* Adjust height */
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 1.23; /* Matching line height from computed style */
  color: rgb(34, 34, 34); /* Dark text color */
  cursor: url('https://www.cherishthesewords.com/images/cursor.png'), default; /* Custom cursor */
  box-sizing: border-box; /* Ensure padding doesn't affect width */
}

/* Section Header */
.section-header {
  text-align: center;
  margin-bottom: 30px;
  font-size: 28px;
  color: #333;
}

/* Price Item */
.price-item {
  display: block;
  text-align: left;
  margin-bottom: 25px;
  padding: 20px;
  border-radius: 8px;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.price-item:hover {
  background-color: #6c5ce7; /* Purple background on hover */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Increase shadow on hover */
  border-color: #6c5ce7;
}

.price-item h2 {
  font-size: 20px;
  margin-bottom: 10px;
  color: rgb(34, 34, 34);
}

.price-item:hover h2 {
  color: #ffffff; /* White text on hover */
}

.price-item p {
  font-size: 16px;
  color: #666;
  line-height: 1.5;
}

.price-item:hover p {
  color: #f5f5f5; /* Light text on hover */
}
p{
    font-size:20px;
}

/* Tombstone Background */
#Tombstone {
    background-image: url("https://www.cherishthesewords.com/images/Tombstone.png");
    background-size: 100% 100%;
    width: 100%;
    margin: 0;
}

/* Intro Video */
.IntroVideo {
    padding-left: 10vw;
    padding-right: 10vw;
}

/* Menu Bar */
.MenuBar {
    font-family: 'Satisfy', cursive;
    font-size: 28px;
    font-weight: bold;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 42px;
    line-height: 42px;
    background-color: black;
    z-index: 1000;
    color: white;
}

.MenuBar a {
    color: white;
    text-decoration: none; /* Optional: to remove underline */
}

.MenuBar a:hover {
    color: blue; /* The color when hovering */
    text-decoration: underline; /* Add underline on hover */
}

/* Footer Bar */
.FooterBar {
    font-family: 'Satisfy', cursive;
    font-size: 18px;
    font-weight: bold;
    position: fixed; /* Change to fixed to keep it at the bottom */
    bottom: 0; /* Stick to the bottom */
    left: 0;
    right: 0;
    height: 42px;
    line-height: 42px;
    background-color: black;
    z-index: 1000;
    color: white;
    display: flex;
    justify-content: space-between; /* Distribute space between sections */
    align-items: center;
    padding: 0 20px;
    text-align: center;
}

/* Left section (Terms & Conditions) */
.footer-left {
    text-align: left;
}

/* Center section (Copyright) */
.footer-center {
    flex-grow: 1; /* Ensure the center expands between left and right */
    text-align: center;
}

/* Right section (Privacy Policy) */
.footer-right {
    text-align: right;
}

.footer-left a,
.footer-right a {
    color: white;
    text-decoration: none;
}

.footer-left a:hover,
.footer-right a:hover {
    color: blue;
    text-decoration: underline;
}

/* Contact Us Form */
#ContactUs-Form {
    background-color: #f5e6cc; /* Light beige (bisque) background */
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    width: 100%;
    box-sizing: border-box;
}

#ContactUs-Form label {
    display: block;
    text-align: left;
    margin-bottom: 5px;
    color: #333;
    font-weight: bold;
}

li::marker {
  content: "➤ ";
  color: #9b30ff; /* Passionate purple */
  font-size: 1.2em;
}


#ContactUs-Form input[type="text"],
#ContactUs-Form input[type="email"],
#ContactUs-Form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 20px;
    font-size: 16px;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

#ContactUs-Form input[type="text"]:focus,
#ContactUs-Form input[type="email"]:focus,
#ContactUs-Form textarea:focus {
    border-color: #4CAF50;
    outline: none;
}

#ContactUs-Form textarea {
    height: 150px;
    resize: none;
}

#ContactUs-Form button {
    width: 100%;
    padding: 12px;
    background-color: #4CAF50;
    border: none;
    border-radius: 5px;
    color: white;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#ContactUs-Form button:hover {
    background-color: #45a049;
}

/* Notification Styling */
#notification {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 20px; /* Align notification to the left */
    background-color: #4CAF50;
    color: white;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-size: 16px;
}

#notification.error {
    background-color: #f44336;
}

/* Media Query for small devices (max-width: 400px) */
@media (max-width: 400px) {
    body {
        padding: 10px;
    }

    #ContactUs-Form {
        padding: 15px;
    }

    #ContactUs-Form input[type="text"],
    #ContactUs-Form input[type="email"],
    #ContactUs-Form textarea {
        padding: 10px;
        font-size: 14px;
    }

    #ContactUs-Form button {
        padding: 10px;
        font-size: 16px;
    }
}

/* Media Query for ultra-small devices (max-width: 280px) */
@media (max-width: 280px) {
    #ContactUs-Form {
        padding: 10px;
    }

    #ContactUs-Form input[type="text"],
    #ContactUs-Form input[type="email"],
    #ContactUs-Form textarea {
        padding: 8px;
        font-size: 12px;
    }

    #ContactUs-Form button {
        padding: 8px;
        font-size: 14px;
    }
}