/* Calendar Widget */
#calendar-widget { display: none; /* Default to hidden */ margin: 0 auto; /* Center widget horizontally */ width: 100%; /* Full width of the container */ max-width: 800px; /* Adjust for larger screens */ height: auto; /* Let the widget grow based on content */ min-height: 1200px; /* Ensure minimum height */ padding: 20px; /* Add padding for spacing */ box-sizing: border-box; /* Include padding in size */ overflow: hidden; /* Prevent scrollbars */ position: relative; /* Allow proper layout */
}
/* Calendar Widget Container */
#calendar-widget-container { width: 100%; /* Full width of parent container */ height: auto; /* Allow dynamic height */ display: flex; /* Flexbox layout */ justify-content: center; /* Center calendar */ align-items: flex-start; /* Align to top */ overflow: visible; /* Ensure nothing is clipped */
}
/* Zcal Inline Widget */
.zcal-inline-widget { display: block; /* Ensure widget is visible when triggered */ width: 100%; /* Match the container’s width */ height: 100%; /* Match the container’s height */ min-height: inherit; /* Inherit from parent */ overflow: hidden; /* Prevent internal scrolling */
}
/* Mobile Responsive Adjustments */
@media (max-width: 768px) { #calendar-widget { width: 90%; /* Adjust width for smaller screens */ min-height: 800px; /* Reduce height for mobile */ }
}
/* Validation Error Message Styles */
.validation-error { color: #e74c3c; /* Red text color */ font-size: 14px; /* Adjust font size as needed */ margin-top: 5px; /* Add space above the message */ display: block; /* Ensure the error message is visible */ font-weight: bold;
}
/* Highlight Invalid Fields */
input:invalid, textarea:invalid, select:invalid { border: 2px solid #e74c3c; /* Red border for invalid fields */ background-color: #fef2f2; /* Light red background */
}
input:invalid:focus, textarea:invalid:focus, select:invalid:focus { box-shadow: 0 4px 8px rgba(231, 76, 60, 0.3); /* Subtle red shadow */
}
/* Validation Error Styling for Specific Fields */
.form-group.invalid .validation-error { color: #e74c3c; /* Red error text */ font-size: 14px; font-weight: bold; margin-top: 5px;
}
/* Response Message Styling */
#response-message { margin-top: 20px; font-size: 16px; font-weight: bold; text-align: center; display: none; /* Hidden by default */
}
#response-message.success { color: #28a745; /* Green for success */ display: block; /* Show message */
}
#response-message.error { color: #e74c3c; /* Red for error */ display: block; /* Show message */
}
/* Form Container Adjustments */
form { display: flex; flex-direction: column; /* Stack elements vertically */ gap: 15px; /* Add spacing between form elements */ max-width: 600px; /* Limit form width */ margin: 0 auto; /* Center form on the page */ padding: 20px; /* Add spacing inside the form */ box-sizing: border-box;
}
/* Form Group Styling */
.form-group { margin-bottom: 20px; position: relative; /* Allow for dynamic effects */
}
/* Label Styling */
label { display: block; margin-bottom: 8px; font-weight: bold; color: #333; font-size: 14px;
}
/* Input, Textarea, and Dropdown Styling */
input, textarea, select { width: 100%; padding: 12px; font-size: 16px; font-family: 'alataregular', sans-serif; color: #112d4e; /* Dark blue text color */ background-color: #ffffff; /* White background */ border: 1px solid #d1d9e6; /* Light gray border */ border-radius: 8px; /* Rounded corners for modern look */ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle drop shadow */ transition: all 0.3s ease; /* Smooth hover/focus effects */
}
/* Input and Textarea Focus State */
input:focus, textarea:focus, select:focus { border-color: #112d4e; /* Highlight border */ box-shadow: 0 4px 8px rgba(17, 45, 78, 0.2); /* Enhanced shadow on focus */ outline: none; /* Remove default outline */
}
/* Placeholder Text Styling */
input::placeholder, textarea::placeholder { color: #b0b7c3; /* Light gray placeholder */ font-style: italic; /* Subtle style */
}
/* Dropdown Customization */
select { appearance: none; /* Remove default browser styles */ background: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 12px center; background-size: 16px; background-color: #ffffff; /* White dropdown */
}
/* Submit Button Styling */
button { background-color: #3f72af; /* Standard button color */ color: #ffffff; /* White text */ padding: 12px 20px; border: none; border-radius: 8px; font-size: 16px; font-family: 'alataregular', sans-serif; cursor: pointer; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); /* Slight shadow for depth */ transition: background-color 0.3s ease, transform 0.2s ease;
}
button:hover { background-color: #112d4e; /* Hover color */ transform: translateY(-2px); /* Lift effect */ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); /* More prominent shadow */
}
button:active { transform: translateY(0); /* Reset on click */ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); /* Reduced shadow */
}
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on January 9, 2025 */
@font-face { font-family: 'alataregular'; src: url('https://v1.gdapis.com/api/groovemember/download/ycws5bf338bd3eec2e89d26ee9f3990450bcf') format('woff2'), url('https://v1.gdapis.com/api/groovemember/download/ykmmgcd9b90b656a9d5639d5b1e5959d85eeb') format('woff'); font-weight: normal; font-style: normal;
}
h1, h2 { font-family: 'alataregular', sans-serif !important;
}
/* Responsive Adjustments */
@media (max-width: 768px) { .custom-form { padding: 10px; /* Adjust padding for smaller screens */ } input, textarea, select { font-size: 14px; /* Reduce font size on mobile */ }
}
/* Increase icon size */
.share-icons img { width: 40px; /* Adjust size */ height: 40px; /* Adjust size */ margin: 0 8px; /* Add spacing between icons */
}
/* Add spacing below icons */
.share-icons { margin-top: 15px; /* Increased spacing */
}
/* Copy Button Hover Effect */
#copyReferralBtn { transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
#copyReferralBtn:hover { background-color: #2C7BE5; /* Darker shade on hover */ box-shadow: 0px 4px 10px rgba(44, 123, 229, 0.4); /* Soft glow effect */
}
.gradient-bg { background: linear-gradient(180deg, #1E3A5F 0%, #13264D 100%);
}
.tab-active { background: linear-gradient(to bottom, #1E3A8A, #13264D); box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}
.tab-active { background: linear-gradient(to bottom, #1E3A8A, #13264D); box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}
.inactive-tab:hover { background: rgba(30, 58, 138, 0.8); transition: background 0.2s ease-in-out;
}
.faq-item:nth-child { background: rgba(0, 0, 0, 0.05);
}
.faq-tab:hover { background-color: #1C3D6E; /* Slightly lighter than active state */ transition: 0.3s ease-in-out;
}
.groove-button:hover { background-color: #FFFFFF !important; color: #3F72AF !important; border: 2px solid #3F72AF !important;
}
.groove-button { background-color: #3F72AF; color: #FFFFFF; border: 2px solid transparent;
} *{} #IE-warning { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background: white; } .IE-warning-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } @media (max-width: 639px) { .global-style-h0mqHQGIo { text-align: center;width: 100%;height: 225px;justify-content: space-between;align-items: flex-start;display: flex; } } @media (max-width: 767px) and (min-width: 640px) { .global-style-h0mqHQGIo { text-align: center;width: 100%;height: 225px;justify-content: space-between;align-items: flex-start;display: flex; } } @media (max-width: 991px) and (min-width: 768px) { .global-style-h0mqHQGIo { text-align: center;width: 100%;height: 225px;justify-content: space-between;align-items: flex-start;display: flex; } } @media (max-width: 1199px) and (min-width: 992px) { .global-style-h0mqHQGIo { text-align: center;width: 100%;height: 225px;justify-content: space-between;align-items: flex-start;display: flex; } } @media (min-width: 1200px) { .global-style-h0mqHQGIo { text-align: center;width: 100%;height: 225px;justify-content: space-between;align-items: flex-start;display: flex; } } .global-style-nK2AH4UiC { cursor: pointer;text-decoration-line: none;text-decoration-style: solid;text-decoration-color: initial; } @media (max-width: 639px) { .global-style-nK2AH4UiC { font-size: 24px;color: rgb(255, 255, 255);text-align: center;border-top-left-radius: 8px;border-top-right-radius: 8px;border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;margin-top: 30px;padding-left: 50px;padding-right: 50px;padding-top: 19px;padding-bottom: 19px;align-items: center;display: inline-flex;cursor: pointer;text-decoration-line: none;text-decoration-style: solid;text-decoration-color: initial; } } @media (max-width: 767px) and (min-width: 640px) { .global-style-nK2AH4UiC { font-size: 24px;color: rgb(255, 255, 255);text-align: center;border-top-left-radius: 8px;border-top-right-radius: 8px;border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;margin-top: 30px;padding-left: 50px;padding-right: 50px;padding-top: 19px;padding-bottom: 19px;align-items: center;display: inline-flex;cursor: pointer;text-decoration-line: none;text-decoration-style: solid;text-decoration-color: initial; } } @media (max-width: 991px) and (min-width: 768px) { .global-style-nK2AH4UiC { font-size: 24px;color: rgb(255, 255, 255);text-align: center;border-top-left-radius: 8px;border-top-right-radius: 8px;border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;margin-top: 30px;padding-left: 50px;padding-right: 50px;padding-top: 19px;padding-bottom: 19px;align-items: center;display: inline-flex;cursor: pointer;text-decoration-line: none;text-decoration-style: solid;text-decoration-color: initial; } } @media (max-width: 1199px) and (min-width: 992px) { .global-style-nK2AH4UiC { font-size: 24px;color: rgb(255, 255, 255);text-align: center;border-top-left-radius: 8px;border-top-right-radius: 8px;border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;margin-top: 30px;padding-left: 50px;padding-right: 50px;padding-top: 19px;padding-bottom: 19px;align-items: center;display: inline-flex;cursor: pointer;text-decoration-line: none;text-decoration-style: solid;text-decoration-color: initial; } } @media (min-width: 1200px) { .global-style-nK2AH4UiC { font-size: 24px;color: rgb(255, 255, 255);text-align: center;border-top-left-radius: 8px;border-top-right-radius: 8px;border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;margin-top: 30px;padding-left: 50px;padding-right: 50px;padding-top: 19px;padding-bottom: 19px;align-items: center;display: inline-flex;cursor: pointer;text-decoration-line: none;text-decoration-style: solid;text-decoration-color: initial; } } .global-style-nK2AH4UiC:not([data-gp-component="block"]), .global-style-nK2AH4UiC [data-section-overlay] { background-color: transparent; } @media (max-width: 639px) { .global-style-nK2AH4UiC:not([data-gp-component="block"]), .global-style-nK2AH4UiC [data-section-overlay] { background-color: rgb(240, 149, 88); } .global-style-nK2AH4UiC:not([data-gp-component="block"]):hover,.global-style-nK2AH4UiC:not([data-gp-component="block"]).gp-hover, .global-style-nK2AH4UiC [data-section-overlay]:hover, .global-style-nK2AH4UiC [data-section-overlay].gp-hover { background-color: rgb(89, 198, 152); } .global-style-nK2AH4UiC:not([data-gp-component="block"]):active,.global-style-nK2AH4UiC:not([data-gp-component="block"]).gp-active, .global-style-nK2AH4UiC [data-section-overlay]:active, .global-style-nK2AH4UiC [data-section-overlay].gp-active { background-color: rgb(32, 45, 60); } } @media (max-width: 767px) and (min-width: 640px) { .global-style-nK2AH4UiC:not([data-gp-component="block"]), .global-style-nK2AH4UiC [data-section-overlay] { background-color: rgb(240, 149, 88); } .global-style-nK2AH4UiC:not([data-gp-component="block"]):hover,.global-style-nK2AH4UiC:not([data-gp-component="block"]).gp-hover, .global-style-nK2AH4UiC [data-section-overlay]:hover, .global-style-nK2AH4UiC [data-section-overlay].gp-hover { background-color: rgb(89, 198, 152); } .global-style-nK2AH4UiC:not([data-gp-component="block"]):active,.global-style-nK2AH4UiC:not([data-gp-component="block"]).gp-active, .global-style-nK2AH4UiC [data-section-overlay]:active, .global-style-nK2AH4UiC [data-section-overlay].gp-active { background-color: rgb(32, 45, 60); } } @media (max-width: 991px) and (min-width: 768px) { .global-style-nK2AH4UiC:not([data-gp-component="block"]), .global-style-nK2AH4UiC [data-section-overlay] { background-color: rgb(240, 149, 88); } .global-style-nK2AH4UiC:not([data-gp-component="block"]):hover,.global-style-nK2AH4UiC:not([data-gp-component="block"]).gp-hover, .global-style-nK2AH4UiC [data-section-overlay]:hover, .global-style-nK2AH4UiC [data-section-overlay].gp-hover { background-color: rgb(89, 198, 152); } .global-style-nK2AH4UiC:not([data-gp-component="block"]):active,.global-style-nK2AH4UiC:not([data-gp-component="block"]).gp-active, .global-style-nK2AH4UiC [data-section-overlay]:active, .global-style-nK2AH4UiC [data-section-overlay].gp-active { background-color: rgb(32, 45, 60); } } @media (max-width: 1199px) and (min-width: 992px) { .global-style-nK2AH4UiC:not([data-gp-component="block"]), .global-style-nK2AH4UiC [data-section-overlay] { background-color: rgb(240, 149, 88); } .global-style-nK2AH4UiC:not([data-gp-component="block"]):hover,.global-style-nK2AH4UiC:not([data-gp-component="block"]).gp-hover, .global-style-nK2AH4UiC [data-section-overlay]:hover, .global-style-nK2AH4UiC [data-section-overlay].gp-hover { background-color: rgb(89, 198, 152); } .global-style-nK2AH4UiC:not([data-gp-component="block"]):active,.global-style-nK2AH4UiC:not([data-gp-component="block"]).gp-active, .global-style-nK2AH4UiC [data-section-overlay]:active, .global-style-nK2AH4UiC [data-section-overlay].gp-active { background-color: rgb(32, 45, 60); } } @media (min-width: 1200px) { .global-style-nK2AH4UiC:not([data-gp-component="block"]), .global-style-nK2AH4UiC [data-section-overlay] { background-color: rgb(240, 149, 88); } .global-style-nK2AH4UiC:not([data-gp-component="block"]):hover,.global-style-nK2AH4UiC:not([data-gp-component="block"]).gp-hover, .global-style-nK2AH4UiC [data-section-overlay]:hover, .global-style-nK2AH4UiC [data-section-overlay].gp-hover { background-color: rgb(89, 198, 152); } .global-style-nK2AH4UiC:not([data-gp-component="block"]):active,.global-style-nK2AH4UiC:not([data-gp-component="block"]).gp-active, .global-style-nK2AH4UiC [data-section-overlay]:active, .global-style-nK2AH4UiC [data-section-overlay].gp-active { background-color: rgb(32, 45, 60); } } @media (max-width: 639px) { .gp-component-id-UP2n8dK4y[data-gp-component] { width: 100%;overflow-wrap: break-word; } } @media (max-width: 767px) and (min-width: 640px) { .gp-component-id-UP2n8dK4y[data-gp-component] { width: 100%;overflow-wrap: break-word; } } @media (max-width: 991px) and (min-width: 768px) { .gp-component-id-UP2n8dK4y[data-gp-component] { width: 100%;overflow-wrap: break-word; } } @media (max-width: 1199px) and (min-width: 992px) { .gp-component-id-UP2n8dK4y[data-gp-component] { width: 100%;overflow-wrap: break-word; } } @media (min-width: 1200px) { .gp-component-id-UP2n8dK4y[data-gp-component] { width: 100%;overflow-wrap: break-word; } } .gp-component-id-pjN04B_qq { overflow-wrap: break-word;width: 100%; } @media (max-width: 639px) { .gp-component-id-pjN04B_qq { overflow-wrap: break-word;width: 100%; } } @media (max-width: 767px) and (min-width: 640px) { .gp-component-id-pjN04B_qq { overflow-wrap: break-word;width: 100%; } } @media (max-width: 991px) and (min-width: 768px) { .gp-component-id-pjN04B_qq { overflow-wrap: break-word;width: 100%; } } @media (max-width: 1199px) and (min-width: 992px) { .gp-component-id-pjN04B_qq { overflow-wrap: break-word;width: 100%; } } @media (min-width: 1200px) { .gp-component-id-pjN04B_qq { overflow-wrap: break-word;width: 100%; } } .gp-component-id-fxHxhQml3g { z-index: 15;position: relative;width: 100%;margin-right: auto;margin-left: auto; } @media (max-width: 639px) { .gp-component-id-fxHxhQml3g { z-index: 15;position: relative;width: 100%;margin-right: auto;margin-left: auto; } } @media (max-width: 767px) and (min-width: 640px) { .gp-component-id-fxHxhQml3g { z-index: 15;position: relative;width: 100%;margin-right: auto;margin-left: auto;max-width: 640px; } } @media (max-width: 991px) and (min-width: 768px) { .gp-component-id-fxHxhQml3g { z-index: 15;position: relative;width: 100%;margin-right: auto;margin-left: auto;max-width: 768px; } } @media (max-width: 1199px) and (min-width: 992px) { .gp-component-id-fxHxhQml3g { z-index: 15;position: relative;width: 100%;margin-right: auto;margin-left: auto;max-width: 992px; } } @media (min-width: 1200px) { .gp-component-id-fxHxhQml3g { z-index: 15;position: relative;width: 100%;margin-right: auto;margin-left: auto;max-width: 1200px; } } .gp-component-id-YJf3nJMquM.gp-component > [data-section-overlay] { z-index: 14;position: absolute;right: 0px;left: 0px;top: 0px;bottom: 0px; } @media (max-width: 639px) { .gp-component-id-YJf3nJMquM.gp-component > [data-section-overlay] { z-index: 14;position: absolute;right: 0px;left: 0px;top: 0px;bottom: 0px; } } @media (max-width: 767px) and (min-width: 640px) { .gp-component-id-YJf3nJMquM.gp-component > [data-section-overlay] { z-index: 14;position: absolute;right: 0px;left: 0px;top: 0px;bottom: 0px; } } @media (max-width: 991px) and (min-width: 768px) { .gp-component-id-YJf3nJMquM.gp-component > [data-section-overlay] { z-index: 14;position: absolute;right: 0px;left: 0px;top: 0px;bottom: 0px; } } @media (max-width: 1199px) and (min-width: 992px) { .gp-component-id-YJf3nJMquM.gp-component > [data-section-overlay] { z-index: 14;position: absolute;right: 0px;left: 0px;top: 0px;bottom: 0px; } } @media (min-width: 1200px) { .gp-component-id-YJf3nJMquM.gp-component > [data-section-overlay] { z-index: 14;position: absolute;right: 0px;left: 0px;top: 0px;bottom: 0px; } } .gp-component-id-YJf3nJMquM { min-height: 50px;position: relative;z-index: auto; } @media (max-width: 639px) { .gp-component-id-YJf3nJMquM { min-height: 50px;position: relative;z-index: auto; } } @media (max-width: 767px) and (min-width: 640px) { .gp-component-id-YJf3nJMquM { min-height: 50px;position: relative;z-index: auto; } } @media (max-width: 991px) and (min-width: 768px) { .gp-component-id-YJf3nJMquM { min-height: 50px;position: relative;z-index: auto; } } @media (max-width: 1199px) and (min-width: 992px) { .gp-component-id-YJf3nJMquM { min-height: 50px;position: relative;z-index: auto; } } @media (min-width: 1200px) { .gp-component-id-YJf3nJMquM { min-height: 50px;position: relative;z-index: auto; } }