/*
Theme Name: Porto Child
Theme URI: https://www.portotheme.com/wordpress/porto
Author: P-THEMES
Author URI: https://www.portotheme.com/
Description: Porto Responsive WordPress + eCommerce Theme.
Version: 1.1
Template: porto
License: Commercial
License URI: http://themeforest.net/licenses/regular_extended
Tags: woocommerce, corporate, ecommerce, responsive, blue, black, green, white, light, dark, red, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
*/

/*************** ADD YOUR CUSTOM CSS HERE  ***************/

body.page-id-12 #contact-form .custom-box-shadow {
	background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
	border: 1px solid rgba(22, 44, 74, 0.08);
	border-radius: 28px;
	box-shadow: 0 24px 60px rgba(15, 34, 58, 0.12);
	padding: 34px 30px 28px;
}

body.page-id-12 #contact-form .wpcf7-form {
	color: #17324c;
}

body.page-id-12 #contact-form .wpcf7-form .row {
	--porto-gutter: 14px;
	margin-left: calc(var(--porto-gutter) * -1);
	margin-right: calc(var(--porto-gutter) * -1);
}

body.page-id-12 #contact-form .wpcf7-form .row > .form-group {
	padding-left: var(--porto-gutter);
	padding-right: var(--porto-gutter);
}

body.page-id-12 #contact-form .wpcf7-form .form-group {
	margin-bottom: 18px;
}

body.page-id-12 #contact-form .wpcf7-form-control-wrap {
	display: block;
}

body.page-id-12 #contact-form input.form-control,
body.page-id-12 #contact-form select.form-control,
body.page-id-12 #contact-form textarea.form-control {
	background: linear-gradient(180deg, #fbfdff 0%, #f4f8fc 100%);
	border: 1px solid rgba(23, 50, 76, 0.12);
	border-radius: 18px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 10px 24px rgba(17, 38, 65, 0.06);
	color: #17324c;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.45;
	min-height: 60px;
	padding: 0 18px;
	transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

body.page-id-12 #contact-form textarea.form-control {
	min-height: 190px;
	padding: 16px 18px;
	resize: vertical;
}

body.page-id-12 #contact-form select.form-control {
	appearance: none;
	background-image:
		linear-gradient(45deg, transparent 50%, #5b7087 50%),
		linear-gradient(135deg, #5b7087 50%, transparent 50%),
		linear-gradient(180deg, #fbfdff 0%, #f4f8fc 100%);
	background-position:
		calc(100% - 24px) calc(50% - 3px),
		calc(100% - 18px) calc(50% - 3px),
		0 0;
	background-repeat: no-repeat;
	background-size: 6px 6px, 6px 6px, 100% 100%;
	padding-right: 42px;
}

body.page-id-12 #contact-form input.form-control::placeholder,
body.page-id-12 #contact-form textarea.form-control::placeholder {
	color: #708396;
	font-weight: 400;
}

body.page-id-12 #contact-form input.form-control:focus,
body.page-id-12 #contact-form select.form-control:focus,
body.page-id-12 #contact-form textarea.form-control:focus {
	background: #ffffff;
	border-color: #2f69b2;
	box-shadow: 0 0 0 4px rgba(47, 105, 178, 0.12), 0 16px 30px rgba(25, 60, 103, 0.12);
	outline: 0;
	transform: translateY(-1px);
}

body.page-id-12 #contact-form .wpcf7-acceptance {
	align-items: flex-start;
	background: #f4f8fc;
	border: 1px solid rgba(23, 50, 76, 0.08);
	border-radius: 18px;
	display: flex;
	padding: 16px 18px;
}

body.page-id-12 #contact-form .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
	width: 100%;
}

body.page-id-12 #contact-form .wpcf7-acceptance label {
	align-items: flex-start;
	color: #314a63;
	cursor: pointer;
	display: flex;
	font-size: 14.5px;
	font-weight: 500;
	gap: 12px;
	line-height: 1.7;
	margin: 0;
}

body.page-id-12 #contact-form .wpcf7-acceptance input[type="checkbox"] {
	accent-color: #2f69b2;
	flex: 0 0 18px;
	height: 18px;
	margin-top: 3px;
	width: 18px;
}

body.page-id-12 #contact-form .wpcf7-submit.btn.btn-modern.btn-primary {
	background: linear-gradient(135deg, #1f5fae 0%, #2f7be5 100%);
	border: 0;
	border-radius: 18px;
	box-shadow: 0 18px 36px rgba(33, 94, 173, 0.24);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
	min-height: 60px;
	padding: 0 28px;
	text-transform: none;
	transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
	width: 100%;
}

body.page-id-12 #contact-form .wpcf7-submit.btn.btn-modern.btn-primary:hover,
body.page-id-12 #contact-form .wpcf7-submit.btn.btn-modern.btn-primary:focus {
	background: linear-gradient(135deg, #184d91 0%, #2868c6 100%);
	box-shadow: 0 24px 40px rgba(24, 76, 143, 0.28);
	color: #fff;
	outline: 0;
	transform: translateY(-2px);
}

body.page-id-12 #contact-form .wpcf7-spinner {
	margin: 12px 0 0;
}

body.page-id-12 #contact-form .wpcf7-response-output {
	border-radius: 16px;
	font-size: 14px;
	line-height: 1.7;
	margin: 18px 0 0;
	padding: 14px 16px;
}

body.page-id-12 #contact-form .service-group-wrap {
	display: block;
	margin: 2px 0 22px;
}

body.page-id-12 #contact-form .service-group-block {
	background: linear-gradient(180deg, #f9fbfe 0%, #f3f7fc 100%);
	border: 1px solid rgba(23, 50, 76, 0.08);
	border-radius: 24px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
	padding: 22px 18px 6px;
}

body.page-id-12 #contact-form .service-group-title {
	color: #163b65;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
	margin-bottom: 8px;
}

body.page-id-12 #contact-form .service-group-note {
	color: #60758a;
	font-size: 14px;
	line-height: 1.7;
	margin-bottom: 18px;
}

body.page-id-12 #contact-form .service-group-block .wpcf7-checkbox {
	display: grid;
	gap: 10px;
}

body.page-id-12 #contact-form .service-group-block .wpcf7-checkbox .wpcf7-list-item {
	margin: 0;
}

body.page-id-12 #contact-form .service-group-block .wpcf7-checkbox label {
	align-items: flex-start;
	color: #304962;
	display: flex;
	font-size: 14px;
	font-weight: 500;
	gap: 10px;
	line-height: 1.6;
}

body.page-id-12 #contact-form .service-group-block .wpcf7-checkbox input[type="checkbox"] {
	accent-color: #2f69b2;
	flex: 0 0 16px;
	height: 16px;
	margin-top: 4px;
	width: 16px;
}

@media (max-width: 991px) {
	body.page-id-12 #contact-form .custom-box-shadow {
		border-radius: 22px;
		padding: 26px 20px 22px;
	}

	body.page-id-12 #contact-form .service-group-block {
		border-radius: 20px;
		padding: 20px 16px 4px;
	}
}