@charset "UTF-8";
/* CSS Document */
body {
	background-color: #AEADF0;
    font-family:"Comfortaa Bold","Comfortaa Medium","Comfortaa Regular","Comfortaa SemiBold";
    text-align: center;
    margin: 0;
    padding: 0;
}

.homebody {
    font-family: "Comfortaa Bold", "Comfortaa Medium", "Comfortaa Regular", "Comfortaa SemiBold";
    margin: 0;
    padding: 0;
    background: url('homesplash.png') no-repeat center center fixed; 
    background-size: cover;
}

.signbody{
	font-family: "Comfortaa Bold", "Comfortaa Medium", "Comfortaa Regular", "Comfortaa SemiBold";
    margin: 0;
    padding: 0;
    background: url('homesplash.png') no-repeat center center fixed; 
    background-size: cover;
}
.logbody{
	font-family: "Comfortaa Bold", "Comfortaa Medium", "Comfortaa Regular", "Comfortaa SemiBold";
    margin: 0;
    padding: 0;
    background: url('homesplash.png') no-repeat center center fixed; 
    background-size: cover;
}

nav {
    background-color: rgba(174, 173, 240, 0.6); 
    color: black;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-container {
    width: 100%;
    max-width: 1200px; /* Adjust as needed */
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
	
}

.site-title {
    color: black;
    text-decoration: none;
    font-size: 24px; /* Adjust as needed */
    font-weight: bold;
}

.nav-links a {
    color: black;
    text-decoration: none;
    margin-left: 20px; /* Space between links */
    font-size: 18px; /* Adjust as needed */
}

.nav-links a:hover {
    color: white;
}

.nav-button1 {
    color: white; 
    background-color: #5F4BB6; /* Transparent background */
    border: none; /* No border */
    cursor: pointer; /* Cursor changes to a hand icon when hovered over */
    padding: 5px 10px; /* Padding around the text */
    margin-left: 10px; /* Space between buttons */
    font-size: 16px; /* Font size */
	font-family: "Comfortaa SemiBold";
	border-radius: 3px;

}
.nav-button2 {
    color: black; /* Text color */
    background-color: #26F0F1; /* Transparent background */
    border: none; /* No border */
    cursor: pointer; /* Cursor changes to a hand icon when hovered over */
    padding: 5px 10px; /* Padding around the text */
    margin-left: 10px; /* Space between buttons */
    font-size: 16px; /* Font size */
	font-family: "Comfortaa SemiBold";
	border-radius: 3px;
}

.nav-button1:hover {
    background-color: #E8C547; /* Color changes on hover */
    text-decoration: none; /* Removes underline */
}

.nav-button2:hover {
    background-color: #E8C547; /* Color changes on hover */
    text-decoration: none; /* Removes underline */
}


.container {
    display: flex;
    justify-content: space-between; /* This will put space between the text and image container */
    align-items: center; /* This will align them vertically */
    padding: 50px;
	color: white;
	text-align: left;
    margin-left: 2%;
    margin-right: 5%;
}

.text-content{
	   flex: 0 0 40%; 
       padding-right: 20px;
}

.input-area {
    margin-top: 20px;
}

#keywordForm{
	margin: 0 auto;
	max-width: 500px;
}

#imageContainer {
	flex: 0 0 60%;
    justify-content: center; /* Center the items horizontally if the container is wider than the content */
    align-items: center; 
	width:60%;
	display: none;
    border: 15px solid #5F4BB6; /* Standard border */
    border-bottom: 20px solid #5F4BB6; /* Thicker bottom border */
    position: relative; /* Needed for positioning textDisplay */
	border-radius: 3px;
	max-width: 240px;
	max-height: 480px;
	margin: 0 auto;
}

#imageDisplay img {
	margin-top: 100px;
    max-width: 100%; /* or a specific pixel value */
    max-height: 400px; /* adjust as needed */
    height: auto; /* maintains the aspect ratio */
    width: auto; /* maintains the aspect ratio */
    display: block; /* removes extra space below the image */
    margin: 0 auto; /* centers the image */
}

#textDisplay {
    position: absolute;
    bottom: 0; /* Align at the bottom of imageContainer */
    left: 0; /* Align to the left edge of imageContainer */
    right: 0; /* Align to the right edge of imageContainer */
    text-align: center; /* Center the text */
    background-color: #5F4BB6; /* Background color of the text area */
    padding-top: 12px; /* Some padding around the text */
    box-sizing: border-box; /* Include padding in width calculation */
	color: white;
}

#affirmation-input {
	font-family: "Comfortaa SemiBold";
    padding: 10px;
    width: 300px;
    margin-right: 10px;
	align-content: center;
	border-radius: 5px;
	opacity: 0.5; /* Set the normal state opacity */
    transition: opacity 0.3s;
}
#affirmation-input:hover {
    opacity: 0.7; /* Full opacity when the input has focus */
}

#affirmation-input:focus {
    opacity: 1; /* Full opacity when the input has focus */
}

#generate-button {
	font-family: "Comfortaa SemiBold";
    padding: 12px 20px;
    background-color: #5F4BB6;
    color: white;
    border: none;
    cursor: pointer;
	align-content: center;
    border-radius: 5px;
}

#generate-button:hover {
    background-color: #E8C547;
}
#homesubheading{
	color: white;
}
.carousel {
    position: relative;
    max-width: 400px; /* Adjust based on your preference */
    margin: auto;
    overflow: hidden;
    
}



.carousel-images img {
    width: 100%; /* Full width of the carousel */
    height: 300px; /* Fixed height, adjust as needed */
    display: none; /* Display block to avoid default img margins */
    object-fit: contain; /* Ensures image is fully visible, but might leave empty space on sides */
    object-position: center; /* Center the image within its element */
    margin: 0 auto; /* Center align if the image is smaller than the container */
}

.carousel-images img:first-child {
    display: block;
}

.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #5F4BB6;
    color: white;
    border: none;
    cursor: pointer;
    padding: 8px; 
    z-index: 100;
}

.carousel-button.prev {
    left: 10px; 
	border-radius: 5px;
}

.carousel-button.next {
    right: 10px; 
	border-radius: 5px;
}

.carousel-button:hover {
    background-color: #E8C547;
}

/* About Page */
.aboutbody {
    background-color: #AEADF0;
    font-family: "Comfortaa Bold", "Comfortaa Medium", "Comfortaa Regular", "Comfortaa SemiBold";
    text-align: left;
    margin: 0;
    padding: 0;
}

/* Centered text for headers */
.headerText {
    text-align: center;
    margin-bottom: 50px; /* Add spacing below the header */
}

/* Full-width banner image */
#bannerImageDisplay {
    width: 100%;
}

#bannerImageDisplay img {
    width: 100%;
    height: auto;
    display: block;
}

/* Cards layout */
.aboutcoming {
    display: flex;
    flex-direction: column; /* Stack cards vertically */
    align-items: center; /* Center cards horizontally */
    gap: 20px; /* Space between cards */
    margin: 0 auto; /* Center the cards container */
    max-width: 800px; /* Max width of the cards container */
}

/* Individual card styling */
.card {
    background: #AEADF0;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin: 20px 0;
    width: 100%;
}

/* Buttons */
.joinusbutton, .healingbutton {
    font-family: "Comfortaa SemiBold";
    width: 100%; /* Full-width buttons */
    padding: 15px;
    background-color: #5F4BB6;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    display: block; /* Ensure the buttons are block-level elements */
    margin: 10px 0; /* Space above and below buttons */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .aboutcoming {
        flex-direction: column;
    }

    .card {
        width: 90%; /* Make cards slightly narrower on smaller screens */
    }
}
.card-content {
    display: flex;
    align-items: center;
    justify-content: space-between; /* This will place the text and image on opposite ends */
}

.card-text {
    flex: 1; /* Allows the text container to grow and shrink as needed */
    padding: 0 20px; /* Add padding around the text */
}

.card-text.left {
    text-align: left; /* Aligns the text to the left */
}

.card-text.right {
    text-align: right; /* Aligns the text to the right */
}

.card-image {
    flex-basis: 40%; /* Gives the image a base width but can grow/shrink as needed */
    padding: 10px;
}

.card-image img {
    width: 100%; /* Makes the image responsive within its container */
    height: auto; /* Maintains the aspect ratio of the image */
    border-radius: 8px; /* Optional: rounds the corners of the image */
}

/*login page*/

.loginContainer{
	display: flex;
    justify-content: flex-start;
    align-items: center; /* Align items vertically */
    gap: 30px; /* Optional space between the elements */
    flex-wrap: wrap; /* Allows items to wrap to the next line on smaller screens */

}

.login {
    font-family: "Comfortaa SemiBold";
	margin-left: 105px;
    width: 397px;
    padding: 10px;
    background-color: #5F4BB6;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
	
}

.login:hover {
    background-color: #E8C547;
}

/* Sign Up Page */

@media (max-width: 750px) {
    .signupContainer {
        flex-direction: column; /* Stack children vertically */
    }

    #splashImageDisplay, #Form {
        max-width: 100%; /* Full width for small screens */
    }
}

.signupContainer{
	display: flex;
    justify-content: flex-start;
    align-items: center; /* Align items vertically */
    gap: 30px; /* Optional space between the elements */
    flex-wrap: wrap; /* Allows items to wrap to the next line on smaller screens */
}

#splashImageDisplay {
    flex: 1;
    max-width: 60%;
    display: block;
    
}

#splashImageDisplay img {
    max-width: 100%; /* This will make sure the image is not wider than its container */
    height: auto; /* This maintains the aspect ratio of the image */
    display: block; /* This removes any extra space below the image */
    margin: 0 auto; /* This centers the image if its container is wider */
	border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.formContainer {
	flex: 1;
	max-width: 60%; /* Adjust the width as needed */
	display: flex;
	flex-direction: column; /* Stack children vertically */
	align-items: center; /* Align children to the start of the flex container */
	color: white;
}

form {
	width: 90%;
	padding-right: 80px;
	
	
	
   
}
.form-row {
    display: flex; /* Use flexbox */
    align-items: center; /* Align items vertically */
    margin-bottom: 10px; /* Space between form rows */
}

.form-row label {
    margin-right: 10px; /* Space between label and input */
    width: 100px; /* Fixed width for labels */
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"] { 
    width: calc(100% - 110px); /* Adjust width considering label */
    padding: 8px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 4px;
	font-family: "Comfortaa SemiBold";
	opacity: 0.5; /* Set the normal state opacity */
    transition: opacity 0.3s;
}

input[type="text"]:focus{
	  opacity: 1;
}

input[type="email"]:focus{
	  opacity: 1;
}

input[type="password"]:focus{
	  opacity: 1;
}

input[type="date"] :focus{
	  opacity: 1;
}

input[type="text"]:hover{
	opacity: 0.7;
}

input[type="email"]:hover{
	opacity: 0.7;
}

input[type="password"]:hover{
	opacity: 0.7;
}

input[type="date"] :hover{
	opacity: 0.7;
}

.checkbox-row {
	margin-left: 140px;
    justify-content: flex-end;
}

.checkbox-container {
    display: flex;
    align-items: flex-end; 
	width: 100%;
}

.checkbox-container label {
    margin-left: 5px; /* Space between checkbox and label */
	 white-space: nowrap;
}


.signup {
    font-family: "Comfortaa SemiBold";
	margin-left: 105px;
    width: 397px;
    padding: 10px;
    background-color: #5F4BB6;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
	
}

.signup:hover {
    background-color: #E8C547;
}
.button-row {
	 justify-content: flex-end;
}


/* Profile Page*/

#profileContainer {
    position: fixed;
    right: -300px; /* Initially hidden */
    top: 0;
    height: 100%;
    width: 300px; /* Adjust as needed */
    background-color: #d0f4de;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
    transition: right 0.3s ease-in-out;
    z-index: 1000;
}

/* Sidebar Content */
#userDetails {
    padding: 20px;
    text-align: center;
}

#profilePhoto {
    width: 100px;
    height: 100px;
    border-radius: 50%; /* Circular frame */
    object-fit: cover; /* Ensure the image covers the area */
    margin-bottom: 10px;
	margin-top: 80px;
}

/* Button to toggle sidebar */
#toggleSidebarButton {
    position: fixed;
    right: 10px;
    top: 10px;
    z-index: 1001; /* Above the sidebar */
	font-family: "Comfortaa SemiBold";
    padding: 10px;
    background-color: #5F4BB6;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 4px;
}

#toggleSidebarButton:hover {
    background-color: #E8C547;
}

/* Adjustments for smaller screens */
@media (max-width: 600px) {
    #profileContainer {
        width: 100%;
        right: -100%;
    }
}

#uploadPhotoButton {
	font-family: "Comfortaa SemiBold";
	align-content: center;
    width: 200px;
    padding: 10px;
    background-color: #5F4BB6;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#uploadPhotoButton:hover {
    background-color: #E8C547;
}

/* Profile Page Container */
.profile-page-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Push the form to the bottom */
    align-items: center; /* Center align the children horizontally */
    height: 100vh; /* Full height of the viewport */
    padding: 20px; /* Some padding */
	max-width: 1000px;
	margin-left: 200px;
	margin-bottom: 0px;
}

.profilekeywordform-container {
    width: 100%; /* Take full width of the container */
    max-width: 900px; /* Maximum width */
    align-self: flex-start; /* Align self to the start of the flex container */
    text-align: left; /* Align text to the left */
    margin-top: auto; /* Push to the bottom */
	
}

.profileinput-area {
    display: flex;
    justify-content: flex-start; /* Align form elements to the start */
    margin-top: 20px;
}

#profilegenerate-button {
    font-family: "Comfortaa SemiBold";
    padding: 10px;
    background-color: #5F4BB6;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 4px;
	width: 25%;
}

#profilegenerate-button:hover {
    background-color: #E8C547;
}


#profileaffirmation-input {
    font-family: "Comfortaa SemiBold";
    padding: 10px;
    width: 70%;
    margin-right: 10px;
    border-radius: 5px;
    border: 2px solid #5F4BB6;
}
#profileContainer{
	display: flex;
    flex-direction: column; /* Stack children vertically */
    justify-content: space-between; /* Space out children */
}

#profileButtons {
    display: flex; /* Align children (buttons) in a row */
    justify-content: center; /* Center the buttons */
    padding: 20px; /* Add some padding */
    margin-top: auto; /* Push to the bottom */
}

#deleteProfile,
#logout {
    font-family: "Comfortaa SemiBold";
    padding: 10px;
    background-color: #5F4BB6;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    margin: 0 5px; /* Space between buttons */
}

#deleteProfile:hover,
#logout:hover {
    background-color: #E8C547;
}
	

/* Responsive Design */
@media (max-width: 600px) {
    /* Adjustments for smaller screens */
    .profileinput-area {
        flex-direction: column;
    }

    #profileContainer {
        width: 100%;
        right: -100%;
    }

    #profileaffirmation-input, #profilegenerate-button {
        width: 100%; /* Full width on smaller screens */
    }
}