/* Montserrat Black */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

/* Montserrat Black Italic */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

/* Montserrat Bold */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

/* Montserrat Bold Italic */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

/* Montserrat ExtraBold */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

/* Montserrat ExtraBold Italic */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}

/* Montserrat Medium */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

/* Montserrat Thin Italic */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

/* Montserrat Thin */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

/* Montserrat Light Italic */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

/* Montserrat Light */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

/* Montserrat SemiBold Italic */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

/* Montserrat Italic */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

/* Montserrat SemiBold */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

/* Montserrat ExtraLight Italic */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
}

/* Montserrat Regular */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* Montserrat Italic Variable Font */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
}

/* Montserrat Variable Font */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

 body {
   background-color: #FDFFF5; /* Set body background color */
   font-family: 'Montserrat', sans-serif; /* Apply Montserrat font */
   color: #000; /* Default text color */
   margin: 0; /* Remove default margin */
   padding: 0; /* Remove default padding */
    -webkit-tap-highlight-color: transparent; /* Disable tap highlight color */
   }
   
   body:focus {
   outline: none;
   box-shadow: none;
   }
   
   /* Styling the main-body container */
   .main-body {
   padding: 20px;
   text-align: center;
   margin-top:30px;
   }
   
   
/* LOGIN START */   
   
.create-account {
 z-index: 100;
background-color: #FDFFF5; /* Background color for the create account div */
color: #000;
padding: 10px 20px;
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
text-align: center;
box-sizing: border-box; /* Ensure padding is included in width */
height: 60px;
overflow: hidden; /* Hide content that overflows */
transition: height 0.1s ease, padding 0.1s ease; /* Smooth height and padding transition */
}
.create-account h2 {
font-size: 13px; /* Font size when not expanded */
transition: font-size 0.3s ease; /* Smooth transition for font size */
cursor: pointer; /* Change cursor to pointer when hovering over header */
}
.create-account.expanded {
height: 500px; /* Height when expanded, adjust as needed */
padding: 20px; /* Additional padding when expanded */
}
.create-account.expanded h2 {
font-size: 20px; /* Font size when expanded */
}
.create-account::before {
content: "";
position: absolute;
left: 50%;
top: -40px;
transform: translateX(-50%);
background-color: #1f5517;
width: 200%;
height: 50px;
border-radius: 50%;
z-index: 100;
opacity: 0; /* Initially hidden */
transition: opacity 0.3s ease; /* Smooth transition for opacity */
}
.create-account.expanded::before {
opacity: 1; /* Show the pseudo-element when expanded */
}
.login-account {
background-color: #f2e7bf; /* Background color for the login account div */
color: #fff;
padding: 20px;
position: fixed;
top: 0; /* Fixed to the top of the viewport */
left: 50%;
transform: translateX(-50%);
width: 100%;
height: calc(100vh - 60px); /* Height of the viewport minus the create account div height */
overflow: auto; /* Allows scrolling if content overflows */
text-align: center;
box-sizing: border-box; /* Ensure padding is included in width */
display: flex; /* Use Flexbox for centering */
flex-direction: column;
align-items: center; /* Center items vertically */
justify-content: center; /* Center items horizontally */
}
.form-login {
display: flex;
flex-direction: column;
align-items: center;
margin-top: -100px;
gap: 15px; /* Space between input and button */
transition: opacity 0.3s ease; /* Smooth transition for opacity */
}
.form-login h2{
color: #1f5517;
font-size:18px;
font-weight:400;
}
.form-login input[type="text"] {
background-color: #FDFFF5;
color: rgb(0, 96, 246);
border: 0;
border-radius: 15px;
font-family: 'Montserrat', sans-serif;
padding: 15px 15px;
width: 300px;
font-size: 13px;
box-sizing: border-box; /* Include padding in width */
}
.form-login button {
background-color: #1f5517;
color:  #ffffff;
border: 0;
border-radius: 15px;
padding: 15px 15px;
width: 300px;
font-family: 'Montserrat', sans-serif;
font-size: 13px;
font-weight: bold;
cursor: pointer;
opacity: 1;
visibility: visible;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.login-account img.logo {
margin-top: -290px;
margin-bottom: 180px;
max-width: 150px; /* Set maximum width for the logo */
height: auto; /* Maintain aspect ratio */
transition: max-width 0.6s ease; /* Smooth transition for resizing */
}
.form-signup {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px; /* Space between input fields and button */
margin-top: 20px;
}
.form-signup input {
border: 0;
outline: none;
width:100%;
box-shadow: none;
display: block;
height: 30px;
font-family: 'Montserrat', sans-serif;
padding: 8px 15px;
border-bottom: .8px solid #eee;
width: 100%;
font-size: 12px;
margin-bottom: 10px;
background-color: #FDFFF5;
}
.form-signup button {
background-color: #1f5517;
color: #ffffff;
border: none;
font-family: 'Montserrat', sans-serif;
border-radius: 15px;
padding: 15px 15px;
margin-top:30px;
width: 100%;
font-weight: bold;
font-size: 13px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.form-signup button:hover {
background-color: #1f5517; /* Darker blue on hover */
}
/* Centered OTP Input Design */
.form-otp {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px; /* Space between input fields and button */
margin-top: 50px;
}
.otp-input-container {
display: flex;
gap: 10px;
align-items: center;
}
.otp-input {
width: 50px; /* Width of each input field */
height: 50px; /* Height of each input field */
background-color: #FFF; /* Background color */
font-size: 24px; /* Font size */
text-align: center; /* Center text inside input */
border: .8px solid #000; /* Remove border */
border-radius: 15px; /* Rounded corners */
outline: none; /* Remove default outline */
box-sizing: border-box; /* Include padding and border in the element's total width and height */
margin: 0 1.5px; /* Reduced space between inputs */
}
/* Focus State Styling */
.otp-input:focus {
border-color: #007bff; /* Change border color on focus */
}
.form-otp button {
background-color:#1f5517;
color: #ffffff;
border: none;
font-family: 'Montserrat', sans-serif;
border-radius: 15px;
padding: 15px 15px;
margin-top: 30px;
width: 100%;
font-weight: bold;
font-size: 13px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.form-otp button:hover {
background-color: #2f512a; /* Darker blue on hover */
}
.terms-container {
display: flex;
gap: 5px; /* Space between checkbox and link */
}
/* Hide the default checkbox */
.terms-container input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 16px;
height: 16px;
padding:  8px !important;
border: 1px solid #1f5517; /* Border color of checkbox */
border-radius: 3px; /* Optional: rounded corners */
background-color: transparent; /* Background color of checkbox */
cursor: pointer; /* Cursor changes to pointer on hover */
position: relative; /* To position the tick mark correctly */
outline: none; /* Remove default outline */
margin-right: 1px;
}
/* Style when checkbox is checked */
.terms-container input[type="checkbox"]:checked {
background-color: #ffc126; /* Change background color on check */
border-color: #ffc126; /* Change border color on check */
}
/* Create the custom tick mark */
.terms-container input[type="checkbox"]:checked::before {
content: '✔'; /* Tick mark character */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color:  #FDFFF5 !important; /* Tick mark color */
font-size: 12px; /* Adjust tick size */
}
.terms-container a {
margin-top: 4px;
text-decoration: none; /* Remove underline */
color: #1f5517; /* Optional: Set the color for better visibility */
font-size: 12px; /* Adjusted font size */
}
.terms-container a:hover {
text-decoration: underline; /* Optional: Add underline on hover for better user experience */
}
/* Header styling */
.main-header {
position: fixed; /* Fix the header at the top */
top: 0;
margin-top:40px;
left: 0;
width: 100%;
text-align: center; /* Center the content */
padding: 10px 0; /* Add some padding for spacing */
z-index: 2; /* High z-index to ensure it appears above other elements */
}
/* Header logo styling */
.header-logo {
max-width: 200px; /* Adjust the logo size */
height: auto;
transition: max-width 0.3s ease; /* Add transition for smooth resizing */
}
#limitReached {
text-align: center;
color: black;
margin-top: 50px;
z-index: 1000;
font-size: 8px; /* Set font size for text */
display: none; /* Hide by default */
}
#limitReached img {
width: 100px;
height: auto;
margin: 0 auto;
display: block; /* Centers the image */
z-index: 1000;
}
.profile-created {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
border: none;
margin-top:180px !important;
background-color: #FDFFF5;
color: #1f5517;
font-size: 10px;
}
.profile-created img.loading-image {
width: 50px; /* Adjust size of loading image */
height: 50px;
margin-bottom: 10px;
}
.form-login {
position: relative; 
}
.form-login form {
display: flex;
flex-direction: column;
gap: 6px;
align-items: center;
}
.dob-picker {
width: 100%;
padding: 10px;
font-size: 1rem;
border: 1px solid #ddd;
border-radius: 10px;
box-sizing: border-box;
margin-bottom: 10px;
transition: border-color 0.3s ease;
}
.dob-picker:focus {
border-color: #007BFF;
outline: none;
}
.error-message {
color: red;
font-size: 0.9rem;
position: absolute; /* Positioning absolutely inside the form */
top: 100%; /* Position below the form */
left: 0;
width: 100%;
margin-top:30px;
transform: translateY(-20px); /* Start from slightly above */
opacity: 0; /* Initially hidden */
transition: transform 0.5s ease, opacity 0.5s ease; /* Smooth transition for sliding effect */
}
.error-message.show {
transform: translateY(0); /* Slide to the original position */
opacity: 1; /* Fully visible */
}
.form-login input:focus {
outline: none; /* Removes the default focus outline */
border: 0px solid #ccc; /* Optional: Adds a custom border color */
}
.form-login form {
display: flex;
flex-direction: column;
gap: 6px;
align-items: center;
position: relative; /* Needed for positioning error messages */
}
.input-container {
position: relative;
width: 100%;
}
.input-container img {
position: absolute;
right: 10px; /* Align the flag to the left side */
top: 50%;
transform: translateY(-50%);
width: 25px; /* Adjust the size of the flag */
height: auto;
}
.input-container input {
padding-left: 35px; /* Add padding to avoid overlapping the flag */
width: 100%;
box-sizing: border-box;
border: 1px solid #ccc; /* Optional: Add border */
outline: none; /* Remove focus outline */
font-size: 14px; /* Customize font size */
}
.form-error-message {
color: red;
font-size: 0.9rem;
position: absolute; /* Positioning absolutely inside the form */
top: 100%; /* Position below the form */
left: 0;
width: 100%;
margin-top: 25px;
transform: translateY(-20px); /* Start from slightly above */
opacity: 0; /* Initially hidden */
transition: transform 0.5s ease, opacity 0.5s ease; /* Smooth transition for sliding effect */
}
.form-error-message.show {
transform: translateY(0); /* Slide to the original position */
opacity: 1; /* Fully visible */
}
/* OTP Input Container Styling */
.loginOtp {
display: flex;
justify-content: space-between; /* Distribute space evenly */
width: 100%; /* Adjust the width as needed */
max-width: 250px; /* Set a maximum width */
margin: 0 auto; /* Center the container */
margin-bottom: 5px; /* Space below the OTP container */
}
/* OTP Input Field Styling */
.loginOtp-input {
width: 50px; /* Width of each input field */
height: 50px; /* Height of each input field */
background-color: #FDFFF5; /* Background color */
font-size: 24px; /* Font size */
text-align: center; /* Center text inside input */
border: none; /* Remove border */
border-radius: 15px; /* Rounded corners */
outline: none; /* Remove default outline */
box-sizing: border-box; /* Include padding and border in the element's total width and height */
margin: 0 1.5px; /* Reduced space between inputs */
}
/* Focus State Styling */
.loginOtp-input:focus {
border-color: #007bff; /* Change border color on focus */
}

/* LOGIN END */