/* 
Theme Name:		 Sunday Elephant Child Theme
Theme URI:		 http://childtheme-generator.com/
Description:	 Sunday Elephant Child Theme is a child theme of Hello Elementor, created by ChildTheme-Generator.com
Author:			 Sunday Elephant Creatives
Author URI:		 http://childtheme-generator.com/
Template:		 hello-elementor
Version:		 1.0.0
Text Domain:	 sunday-elephant-child-them
*/

/******************************************
 GLOBAL STYLES
******************************************/

/*** Homepage - Enter any style for elements on homepage here ***/


/*** Internal Pages - Enter any style for elements on internal pages here ***/

/* HOME LOAN CALCULATOR */
.form-wrapper {
	display: flex;
	gap: 0;
	flex-direction: row;

	* {
		font-family: var(--e-global-typography-primary-font-family);
	}

	/* COLUMNS */
	.col-1 {
		background-color: var(--e-global-color-secondary);
		padding: 80px 80px 130px 80px;
		width: 51%;
		
		h3 {
			color: var(--e-global-color-primary);
			margin-bottom: 40px;
		}
	}
	.col-2 {
		background-color: var(--e-global-color-364b43c);
		display: flex;
		flex-direction: column;
		gap: 40px;
		padding: 80px 80px 130px 80px;
		width: 49%;
	}

	/* TYPOGRAPHY */
	h3 {
		font-size: 45px !important;
		font-weight: 600;
	}

	/* FORM FIELDS */
	.form-body {
		display: flex;
		flex-direction: column;
		gap: 25px;
		
		label {
			color: #ffffff;
			font-size: 20px;
			font-weight: 600;
			margin-bottom: 8px;
		}

		input,
		select {
			background-color: transparent;
			border: 1px solid #ffffff !important;
			color: #ffffff;
			font-size: 22px;
			padding: 15px 15px !important;
			outline: none;
			position: relative;
			-webkit-appearance: none;
			appearance: none;
		}
		select {
			background-image: url(/wp-content/uploads/dropdown-white.svg);
			background-position: right 15px center;
			background-repeat: no-repeat;
			background-size: 15px;
		}
		.php {
			background-image: url('/wp-content/uploads/PHP.svg');
			background-position: left 20px center;
			background-repeat: no-repeat;
			background-size: 40px;
            padding-left: 65px !important;
		}
	}

	/* CALCULATOR FOOTER */
	.footer-note {
		margin-top: 30px;
		margin-bottom: 30px;

		p {
			color: #ffffff;
			font-size: 14px;
			font-style: italic;
		}
	}
	.form-footer {
		margin-top: 50px;
		display: flex;
		gap: 25px;

		a.btn {
			display: block;
			font-weight: 700;
			padding: 18px 25px;
			border: none;
			cursor: pointer;
		}
		a.btn:hover {
			background-color: var(--e-global-color-accent);
		}
		.btn-compute {
			background-color: var(--e-global-color-text);
			color: var(--e-global-color-primary);
		}
		.btn-clear {
			background-color: var(--e-global-color-primary);
			color: var(--e-global-color-text);
		}
	}

	/* RESULTS */
	.col-2 {
		h3 {
			margin-bottom: 0;
		}

		.results-wrap {
			h5 {
				font-size: 22px;
				font-weight: 600;
				margin-bottom: 0;
				span {
					font-size: 18px;
					font-weight: 500;
				}
			}
			p {
				font-size: 38px;
				font-weight: 600;
				margin-bottom: 0;
			}
			p:before {
				content: 'PHP';
				font-size: 22px;
				margin-right: 5px;
				text-transform: uppercase;
			}
		}
		
		.results-footer p {
			font-weight: 600;
		}
	}

}

/******************************************
 RESPONSIVE STYLE
******************************************/

@media (max-width: 1023px) {
	.form-wrapper {
		.col-1,
		.col-2 {
			padding: 50px;
		}

	}
}
@media (max-width: 991px) {
	.form-wrapper {
		.col-1,
		.col-2 {
			padding: 40px 30px;
		}

	}
}

@media (max-width: 767px) {
	.sfm-rollback {
		display: block;
	}
	.form-wrapper {
		flex-direction: column;
		.col-1,
		.col-2 {
			padding: 40px 20px 50px;
			width: 100%;
		}
	}
}