.everlyn,
.everlyn * {
  box-sizing: border-box;
}
.everlyn {
  background: var(--black-1000, #000000);
  height: 1080px;
  position: relative;
  overflow: hidden;
}
.image-2 {
  width: 1920px;
  height: 1080px;
  position: absolute;
  left: 0px;
  top: 0px;
}
/* Frame-1 styling */
/* Frame-1 styling as input box */
/* Wrapper container for the input and button */
.frame-1-container {
  position: absolute; /* Match the original frame-1's position */
  background: var(--black-900, #0c0c0c);
  border-radius: 16px;
  border-style: solid;
  border-color: var(--black-800, #282828);
  border-width: 1px;
  width: 860px; /* Match width */
  height: 121px; /* Match height */
  left: 50%; /* Center horizontally */
  transform: translateX(-50%); /* Center correction */
  top: 876px; /* Original top position */
  overflow: hidden;
}

#videoForm {
   display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative; /* Enable relative positioning for child elements */

    max-width: 860px; /* Limit the maximum width */
    min-width: 300px; /* Ensure a minimum width for usability */
    height: 81px; /* Keep the height fixed */


    background: var(--black-900, #0c0c0c); /* Form background matches frame-1 */
    border-radius: 16px;
    border: 1px solid var(--black-800, #282828); /* Form border styling */
    overflow: hidden;
    box-sizing: border-box; /* Include padding in size */
    padding: 10px; /* Add padding for inner spacing */
  margin-bottom: 30px; /* Add space below the form */
}

/* Input Styling */
.frame-1 {
    width: calc(100% - 160px); /* Leave space for the button */
    height: 100%; /* Full height of the form */
    background: transparent; /* Transparent to match form */
    border: none; /* Remove border */
    padding: 10px; /* Inner padding for text */
    color: var(--white, #ffffff); /* Input text color */
    font-family: "Thicccboi-Regular", sans-serif;
    font-size: 16px;
    outline: none; /* Remove focus outline */
    box-sizing: border-box; /* Include padding in size */
}

/* Placeholder text styling */
.frame-1::placeholder {
    color: rgba(255, 255, 255, 0.5); /* Placeholder text color */
    font-style: italic;
}

/* Button Styling */
.button {
    position: absolute; /* Position relative to the container */
    bottom: 10px; /* 10px from the bottom of the container */
    right: 10px; /* 10px from the right of the container */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px; /* Button width */
    height: 60px; /* Button height */
    background: linear-gradient(90deg, #ff7f7f, #ff0000); /* Gradient background */
    border-radius: 8px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor */
    border: none; /* Remove border */
    color: #ffffff; /* Button text color */
    font-family: "Thicccboi-Regular", sans-serif;
    font-size: 16px;
    transition: all 0.3s ease;
}

.button2 {
    position: absolute; /* Position relative to the container */
    bottom: 10px; /* 10px from the bottom of the container */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px; /* Button width */
    height: 60px; /* Button height */
    background: linear-gradient(90deg, #ff7f7f, #ff0000); /* Gradient background */
    border-radius: 8px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor */
    border: none; /* Remove border */
    color: #ffffff; /* Button text color */
    font-family: "Thicccboi-Regular", sans-serif;
    font-size: 16px;
    transition: all 0.3s ease;
}

.button:hover {
    background: linear-gradient(90deg, #ff4f4f, #cc0000); /* Darker hover effect */
}

.button:disabled {
    background: #808080; /* Gray background for disabled state */
    cursor: not-allowed; /* Change cursor to indicate non-clickable */
    color: #d3d3d3; /* Light gray text color */
    opacity: 0.7; /* Slightly reduce opacity */
}

.sparkles {
    margin-right: 10px;
    width: 16px;
    height: 16px;
}

.generate-video {
    font-weight: bold;
}
.response-time {
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 1258px;
  top: 264px;
}
.clock-2 {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  position: relative;
  overflow: visible;
}
.response-time-7-65-s {
  color: var(--black-400, #ababab);
  text-align: left;
  font-family: "-", sans-serif;
  font-size: 12px;
  font-weight: 400;
  position: relative;
}
.response-time-7-65-s-span {
  color: var(--black-400, #ababab);
  font-family: "Thicccboi-Light", sans-serif;
  font-size: 12px;
  font-weight: 300;
}
.response-time-7-65-s-span2 {
  color: var(--black-400, #ababab);
  font-family: "Thicccboi-Medium", sans-serif;
  font-size: 12px;
  font-weight: 500;
}
.group-1 {
  position: absolute;
  inset: 0;
}
.everlyn2 {
  width: 200px;
  height: auto;

  left: calc(50% - 101px);
  top: 65px;
  overflow: visible;
  margin-top: 20px; /* Add top margin to create space above */
    left: calc(50% - 101px); /* Center horizontally */
}
.video-generation {
  color: var(--black-400, #ababab);
  text-align: center;
  font-family: "Thicccboi-Light", sans-serif;
  font-size: 20px;
  line-height: 114.15%;
  letter-spacing: 0.02em;
  font-weight: 300;
  left: calc(50% - 81px);
  top: 128px;
  margin-bottom: 20px; /* Add bottom margin to create space below */
}
.copyright-everlyn-2025 {
  color: var(--white, #ffffff);
  text-align: center;
  font-family: "Thicccboi-Regular", sans-serif;
  font-size: 13px;
  line-height: 114.15%;
  font-weight: 400;
  opacity: 0.5;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: 1033px;
}
.screen-shot-2025-01-07-at-2-19-05-pm-1 {
  width: 50px;
  height: 28px;
  position: absolute;
  left: 830px;
  top: 128px;
}
.videos {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  justify-content: flex-start;
  width: 855px;
  height: 508px;
  position: absolute;
  left: 532px;
  top: 283px;
}
.frame-2 {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 811px;
  height: 472px;
  position: relative;
}
.video {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  left: 530px;
  top: 301px;
}
.mask-group {
  flex-shrink: 0;
  width: 860px;
  height: 480px;
  position: relative;
  overflow: visible;
}
.options {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.report {
  background: #0c0c0c;
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.message-circle-warning {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
  overflow: visible;
}
.regenerate {
  background: #0c0c0c;
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.refresh-cw {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
  overflow: visible;
}
.download {
  background: #222222;
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.download2 {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
  overflow: visible;
}
.download3 {
  background: #0c0c0c;
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.share-2 {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
  overflow: visible;
}
.tooltip {
  background: #141414;
  border-radius: 6px;
  padding: 5px 6px 5px 6px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: absolute;
  left: 87px;
  top: 45.5px;
}
.download4 {
  color: var(--white, #ffffff);
  text-align: left;
  font-family: "Thicccboi-Medium", sans-serif;
  font-size: 11px;
  font-weight: 500;
  position: relative;
}
.group-4 {
  position: absolute;
  inset: 0;
}
.prompt {
  background: var(--black-900, #0c0c0c);
  border-radius: 12px;
  border-style: solid;
  border-color: var(--black-800, #282828);
  border-width: 1px;
  padding: 10px 12px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  left: 530px;
  top: 196px;
}
.prompt2 {
  color: var(--black-400, #ababab);
  text-align: left;
  font-family: "Thicccboi-Regular", sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  font-weight: 400;
  text-transform: uppercase;
  position: relative;
}
.beautiful-sunset-cloudy-sky-from-aerial-view-airplane-view-above-clouds {
  color: #ffffff;
  text-align: left;
  font-family: "Thicccboi-Medium", sans-serif;
  font-size: 16px;
  font-weight: 500;
  position: relative;
}
.response-time2 {
  padding: 5px 0px 3px 0px;
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.clock-22 {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  position: relative;
  overflow: visible;
}
.you-saved-5-minutes-24-seconds {
  color: #65e9bf;
  text-align: left;
  font-family: "Thicccboi-Regular", sans-serif;
  font-size: 12px;
  font-weight: 400;
  position: relative;
}
.frame-4 {
  display: flex;
  flex-direction: row;
  gap: 6px;
  align-items: center;
  justify-content: flex-start;
  position: absolute;
  left: 1007px;
  top: 252px;
}
.vector {
  flex-shrink: 0;
  width: 12px;
  height: 13.33px;
  position: relative;
  overflow: visible;
}
.history {
  color: #5f6773;
  text-align: left;
  font-family: "Thicccboi-Medium", sans-serif;
  font-size: 12px;
  font-weight: 500;
  position: relative;
}

.content-container {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: center; /* Center horizontally */
    margin: 0 auto; /* Center the content */
   width: 100%; /* Ensure it takes the full available width */
}

.download-container {
    display: flex; /* Enable flexbox */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    margin: 10px auto; /* Add spacing and ensure it's centered within its parent */
    width: 100%; /* Ensure it takes the full width */
    position: relative; /* Keep it relative for further positioning if needed */
}

/* Download Button Styling */
.download-button {
    position: absolute; /* Position it relative to the container */
    bottom: -50px; /* Place 50px below the video */

    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px; /* Button width */
    height: 50px; /* Button height */
    background: linear-gradient(90deg, #ff69b4, #ff1493); /* Pink gradient */
    border-radius: 12px; /* Rounded corners */
    color: #ffffff; /* Text color */
    font-family: "Thicccboi-Regular", sans-serif;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    border: none; /* Remove border */
    transition: all 0.3s ease; /* Smooth hover effect */
}


/* Hover Effect */
.download-button:hover {
    background: linear-gradient(90deg, #ff1493, #ff69b4); /* Reverse gradient on hover */
    transform: scale(1.05); /* Slightly enlarge the button */
    box-shadow: 0px 4px 10px rgba(255, 105, 180, 0.5); /* Add glow effect */
}

/* Download Icon */
.download-icon {
    margin-right: 10px;
    width: 20px;
    height: 20px;
}

/* Download Text */
.download-text {
    font-weight: bold;
}

#resolution-options label {
    cursor: pointer;
}

#resolution-options input[type="radio"] {
    margin-right: 5px;
    accent-color: #00bfff; /* Use the theme color for the radio button */
}