/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*===========================================
  Variables
===========================================*/

:root {
	--green-1: #00f200;
	--green-2: #47ee40;
	--green-3: #edffe8;
	--green-4: #174035;
	--white-1: #ffffff;
	--red-1: #ff5a5a;
	--default-font: "Filson Pro", Sans-serif;
}

/*===========================================
  Form
===========================================*/

.form-container .form-group {
	margin-bottom: 15px;
}

.form-container .form-group label {
	color: var(--white-1);
	font-family: var(--default-font);
	font-weight: 400;
	font-size: 14px;
	margin-bottom: 5px;
	line-height: 1.2;
	display: block;
}

.form-container .form-group.error {
	border-color: var(--red-1);
}

.form-container .form-group .error-message,
.form-container .form-group .wpcf7-not-valid-tip {
	color: var(--red-1);
	margin-top: 5px;
	font-family: var(--default-font);
}

.form-container .form-group:not(.radio-field) label,
.form-container .radio-field>label:first-of-type {
	display: block;
}

.form-container .wpcf7-text {
	border-radius: 12px;
	background-color: var(--green-3);
	border: solid 1px transparent;
	font-family: var(--default-font);
	box-shadow: 0px 2px 0px 1px var(--green-1);
	font-size: 14px;
}

.form-container .wpcf7-text:focus {
	outline: none;
	border-color: transparent;
}

.form-container .wpcf7-list-item>label {
	display: flex;
	align-items: center;
	column-gap: 10px;
	cursor: pointer;
}

.form-container .wpcf7-list-item {
	margin-left: 30px;
}

.form-container .wpcf7-list-item.first {
	margin-left: 0;
}

.form-container input[type="radio"] {
	appearance: none;
	background-color: var(--green-3);
	margin: 0;
	font: inherit;
	color: var(--green-3);
	width: 20px;
	height: 20px;
	border: 0.15em solid var(--green-3);
	box-shadow: 1px 1px 0px 1px var(--green-1);
	border-radius: 50%;
	transform: translateY(-0.075em);
	display: grid;
	place-content: center;
}

.form-container input[type="radio"]::before {
	content: "";
	width: 0.65em;
	height: 0.65em;
	border-radius: 50%;
	transform: scale(0);
	transition: 120ms transform ease-in-out;
	box-shadow: inset 1em 1em var(--green-1);
}

.form-container input[type="radio"]:checked::before {
	transform: scale(1);
}

.form-container button,
.form-container .wpcf7-submit {
	width: 100%;
}

.form-container .wpcf7-spinner,
.form-container .wpcf7-form.invalid .wpcf7-spinner {
	position: absolute;
	right: 20px;
	bottom: 8px;
}

.form-container .wpcf7-response-output {
	color: var(--white-1);
	font-family: var(--default-font);
	line-height: 1.2;
}

/*===========================================
  Custom Form
===========================================*/

.custom-form-container .form-group {
	margin-bottom: 25px;
}

.custom-form-container .form-group label,
.custom-form-container #step-2 label {
	color: var(--white-1);
	font-family: var(--default-font);
	font-weight: 400;
	font-size: 14px;
	margin-bottom: 5px;
	line-height: 1.2;
	display: block;
}

.custom-form-container .form-group span.error,
.custom-form-container #step-2 #otp-error {
	font-size: 14px;
	color: var(--red-1);
	margin-top: 5px;
	font-family: var(--default-font);
}

.custom-form-container .form-group:not(.radio-group) label,
.custom-form-container .radio-field>label:first-of-type {
	display: block;
}

.custom-form-container .form-group input[type='text'],
.custom-form-container .form-group input[type='tel'] {
	border-radius: 12px;
	background-color: var(--green-3);
	border: solid 1px transparent;
	font-family: var(--default-font);
	box-shadow: 0px 2px 0px 1px var(--green-1);
	font-size: 14px;
}

.custom-form-container .form-group input[type='text']:focus,
.custom-form-container .form-group input[type='tel']:focus {
	outline: none;
}

.custom-form-container .radio-field-container,
.custom-form-container .radio-field-container .radio-field {
	display: flex;
	align-items: center;
}

.custom-form-container .radio-field-container {
	column-gap: 30px;
}

.custom-form-container .radio-field-container .radio-field {
	column-gap: 15px;
}

.custom-form-container .radio-field-container .radio-field label {
	margin-bottom: 0;
	cursor: pointer;
}

.custom-form-container input[type="radio"] {
	appearance: none;
	background-color: var(--green-3);
	margin: 0;
	font: inherit;
	color: var(--green-3);
	width: 20px;
	height: 20px;
	border: 0.15em solid var(--green-3);
	box-shadow: 1px 1px 0px 1px var(--green-1);
	border-radius: 50%;
	transform: translateY(-0.075em);
	display: grid;
	place-content: center;
}

.custom-form-container input[type="radio"]::before {
	content: "";
	width: 0.65em;
	height: 0.65em;
	border-radius: 50%;
	transform: scale(0);
	transition: 120ms transform ease-in-out;
	box-shadow: inset 1em 1em var(--green-1);
}

.custom-form-container input[type="radio"]:checked::before {
	transform: scale(1);
}

.custom-form-container button {
	width: 100%;
}

.custom-form-container button:disabled {
	opacity: .5;
	pointer-events: none;
	cursor: default;
}

.custom-form-container #step-2 .form-group {
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 30px;
}

.custom-form-container #step-2 label {
	text-align: center;
	margin-bottom: 30px;
}

.custom-form-container #step-2 .form-group .otp-input {
	max-width: 45px;
	width: 100%;
	text-align: center;
}

.custom-form-container #step-2 #otp-error {
	text-align: center;
}

.custom-form-container .button-container {
	position: relative;
}

.custom-form-container .button-container .loader {
	position: absolute;
	right: 20px;
	top: 10px;
	width: 20px;
	height: 20px;
	display: block;
	aspect-ratio: 1;
	border-radius: 50%;
	background:
		radial-gradient(farthest-side, #fff 94%, #0000) top/4px 4px no-repeat,
		conic-gradient(#0000 30%, #fff);
	-webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 0);
	animation: l13 1s infinite linear;
}

@keyframes l13 {
	100% {
		transform: rotate(1turn)
	}
}

/*===========================================
  Notification
===========================================*/
.notifyjs-corner {
	z-index: 99999;
}

.notifyjs-wrapper {
	font-family: var(--default-font);
}

/* Success notification */
.notifyjs-wrapper.success {
	background-color: #4CAF50 !important;
	color: white !important;
	padding: 10px;
	border-radius: 5px;
	font-weight: bold;
}

/* Error notification */
.notifyjs-wrapper.error {
	background-color: #F44336 !important;
	color: white !important;
	padding: 10px;
	border-radius: 5px;
	font-weight: bold;
}

.notifyjs-wrapper .notifyjs-bootstrap-base {
	background-position: left 3px center;
}