/*!
Theme Name: the-crib-kalona
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: the-crib-kalona
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

the-crib-kalona is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
    # Typography
--------------------------------------------------------------*/

body,
button,
input,
select,
optgroup,
textarea,
p {
	color: var(--black-color);
	font-size: 16px;
	line-height: 1.625;
}

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/

.main-navigation {
	clear: both;
	display: inline-block;
	float: none;
	width: auto;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul li:hover>ul,
.main-navigation ul ul li.focus>ul {
	left: 100%;
}

.main-navigation ul li:hover>ul,
.main-navigation ul li.focus>ul {
	left: auto;
}

.main-navigation li {
	float: none;
	display: inline-block;
	position: relative;
}

.main-navigation li a {
	transition: var(--transition);
	position: relative;
}

/*========== Fonts CSS Start ==========*/
@font-face {
	font-family: 'Roboto';
	src: url('assets/fonts/Roboto-Regular.eot');
	src: url('assets/fonts/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
		url('assets/fonts/Roboto-Regular.woff2') format('woff2'),
		url('assets/fonts/Roboto-Regular.woff') format('woff'),
		url('assets/fonts/Roboto-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto';
	src: url('assets/fonts/Roboto-Bold.eot');
	src: url('assets/fonts/Roboto-Bold.eot?#iefix') format('embedded-opentype'),
		url('assets/fonts/Roboto-Bold.woff2') format('woff2'),
		url('assets/fonts/Roboto-Bold.woff') format('woff'),
		url('assets/fonts/Roboto-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto';
	src: url('assets/fonts/Roboto-Medium.eot');
	src: url('assets/fonts/Roboto-Medium.eot?#iefix') format('embedded-opentype'),
		url('assets/fonts/Roboto-Medium.woff2') format('woff2'),
		url('assets/fonts/Roboto-Medium.woff') format('woff'),
		url('assets/fonts/Roboto-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/*========== Fonts CSS End ==========*/

/*========== Form CSS Start ==========*/
.form-element i {
	position: absolute;
	top: 16px;
	right: 15px;
	font-size: 16px;
	color: var(--primary-color);
	pointer-events: none;
}

.wpcf7-form-control-wrap {
	margin-bottom: 30px;
}

.form-input::-webkit-input-placeholder,
.input-text::-webkit-input-placeholder {
	color: var(--input-color);
	opacity: 1;
}

.form-input::-moz-placeholder,
.input-text::-moz-placeholder {
	color: var(--input-color);
	opacity: 1;
}

.form-input:-ms-input-placeholder,
.input-text:-ms-input-placeholder {
	color: var(--input-color);
	opacity: 1;
}

.form-input::-ms-input-placeholder,
.input-text::-ms-input-placeholder {
	color: var(--input-color);
	opacity: 1;
}

.form-input::placeholder,
.input-text::placeholder {
	color: var(--input-color);
	opacity: 1;
}

select option {
	color: #000;
}

select {
	color: var(--input-color) !important;
}

.form-input,
.input-text,
.select2-container--default .select2-selection--single .select2-selection__rendered,
select {
	width: 100%;
	height: 46px;
	border: 1px solid var(--common-color);
	outline: none !important;
	padding: 0 15px;
	font-size: 16px;
	line-height: 1.625;
	color: var(--input-color);
	background: var(--white-color);
	border-radius: 4px;
}

select,
select.form-input {
	padding-right: 30px;
}

.form-input.wpcf7-textarea {
	height: 120px;
	resize: none;
	padding: 10px 15px;
	display: block;
}

.submit-btn {
	text-align: left;
}

.wpcf7 .wpcf7-spinner {
	position: absolute;
	top: 50%;
	left: 103%;
	transform: translate(0, -50%);
	margin: 0;
}

span.wpcf7-list-item-label::before,
.woocommerce-form__label-for-checkbox span::before,
.comment-form-cookies-consent label::before {
	--radio-label-size: 20px;
	content: "";
	position: absolute;
	top: 2px;
	left: 0;
	width: var(--radio-label-size);
	height: var(--radio-label-size);
	border-radius: calc(var(--radio-label-size));
	border: 2px solid var(--primary-color);
	z-index: 1;
}

.comment-form-cookies-consent label::before {
	border-radius: 0;
	border-width: 1px;
	border-color: var(--dark-color);
}

span.wpcf7-list-item-label::after,
.woocommerce-form__label-for-checkbox span::after,
.comment-form-cookies-consent label::after {
	--radio-label-inner-size: 12px;
	content: "";
	position: absolute;
	top: 2px;
	left: 4px;
	width: var(--radio-label-inner-size);
	height: var(--radio-label-inner-size);
	border-radius: calc(var(--radio-label-inner-size)*0.5);
	background: var(--primary-color);
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--white-color);
	opacity: 0;
	transition: var(--transition);
	z-index: 0;
}

.wpcf7-radio span.wpcf7-list-item-label::after {
	top: 6px;
}

.comment-form-cookies-consent label::after {
	left: 0;
}

input[type=radio]:checked~span::after {
	opacity: 1;
}

.woocommerce-form__label-for-checkbox span::before,
.checkbox-wp .wpcf7-list-item-label::before,
.comment-form-cookies-consent label::before {
	border-radius: 0;
}

.wpcf7-checkbox span.wpcf7-list-item-label::after,
.checkbox-wp .wpcf7-list-item-label::after,
.woocommerce-form__label-for-checkbox span::after,
.comment-form-cookies-consent label::after {
	--checkbox-label-size: 20px;
	content: "\f00c";
	width: var(--checkbox-label-size);
	height: var(--checkbox-label-size);
	background: transparent;
	color: var(--white-color);
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 10px;
	background: var(--dark-color);
	border-radius: 3px;
}

.wpcf7-checkbox span.wpcf7-list-item-label::after {
	left: 0;
	background: var(--primary-color);
}

input[type="checkbox"]:checked~span::before,
input[type="checkbox"]:checked~span::after,
input[type="checkbox"]:checked~span.wpcf7-list-item-label::after,
input[type="checkbox"]:checked~span.wpcf7-list-item-label::before,
input[type="checkbox"]:checked~label:after {
	opacity: 1;
}

.checkbox-wp .wpcf7-not-valid .wpcf7-list-item-label::before {
	border-color: var(--red-color);
	opacity: 0.7;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	opacity: 1;
}

.wpcf7-not-valid,
.wpcf7-not-valid .wpcf7-list-item-label::before {
	border-color: var(--red-color) !important;
}

.wpcf7-list-item {
	margin: 0 20px 0 0;
}

.wpcf7-checkbox .wpcf7-list-item:last-child,
.wpcf7-radio .wpcf7-list-item:last-child {
	margin: 0;
}

.form-input-file {
	position: relative;
	height: 48px;
	background: 0 0;
	border-radius: 0;
	border: 1px solid var(--black-color);
	margin-bottom: var(--gutter);
}

.form-box.form-input-file {
	height: auto;
	border: 0;
}

.form-input-file p {
	color: var(--black-color);
	line-height: 1;
	margin-bottom: 0;
}

.form-box.form-input-file p {
	line-height: inherit;
}

.form-input-file .wpcf7-form-control-wrap {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
}

.form-box.form-input-file .wpcf7-form-control-wrap {
	position: relative;
}

.form-input-file [type=file] {
	position: relative;
	height: 100%;
	width: 100%;
	overflow: hidden;
	opacity: 0;
	cursor: pointer;
	z-index: 1;
}

.form-box.form-input-file input[type=file] {
	width: 76px;
	height: 73px;
	line-height: 1;
}

.form-input-file .icon-label {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 0 15px;
}

.form-box.form-input-file .input-file-icon {
	position: absolute;
	top: 30px;
	left: 0;
	width: 76px;
	height: 73px;
	background: var(--input-color);
	border-radius: 13px;
	display: inline-block;
	cursor: pointer;
	z-index: 0;
}

.form-box.form-input-file .input-file-icon::before,
.form-box.form-input-file .input-file-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: var(--gutter);
	height: 1px;
	background-color: var(--black-color);
}

.form-box.form-input-file .input-file-icon::after {
	width: 1px;
	height: var(--gutter);
}

.form-input-file .icon-label label {
	font-weight: inherit;
	font-size: 14px;
	line-height: 22px;
}

.form-input-file .icon-label label span {
	color: var(--black-color);
	font-weight: 600;
	margin-left: 3px;
}

.form-input-file .input-file-text {
	color: var(--black-color);
	text-overflow: ellipsis;
	display: block;
	overflow: hidden;
	white-space: nowrap;
	margin-top: 3px;
	font-size: 14px;
	line-height: 24px;
}

/*========== Form CSS End ==========*/

/*==========Common CSS ==========*/
:root {
	--primary-color: #333333;
	--dark-color: #070707;
	--common-color: #777777;
	--white-color: #ffffff;
	--black-color: #000000;
	--red-color: #ff0000;
	--input-color: #555555;
	--box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
	--space-80: 80px;
	--body-font: 'Roboto';
	--title-font: 'Roboto';
	--transition: .3s;
	--gutter: 30px;
}

body {
	font-size: 16px;
	line-height: 1.625;
	color: var(--black-color);
	font-family: var(--body-font);
}

p {
	font-size: 16px;
	line-height: 1.625;
	margin-bottom: 16px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: bold;
	color: var(--dark-color);
	font-family: var(--title-font);
}

p a,
a {
	color: var(--primary-color);
	text-decoration: underline !important;
	transition: var(--transition);
}

p a:hover,
a:hover {
	color: var(--dark-color);
}

.h1-title {
	font-size: 42px;
	line-height: 1.3;
	margin-bottom: 26px;
}

.h2-title {
	font-size: 25px;
	line-height: 1.3;
	margin-bottom: 26px;
}

.h3-title {
	font-size: 20px;
	line-height: 1.3;
	margin-bottom: 0;
}

.play-btn {
	width: 60px;
	height: 60px;
	color: var(--primary-color);
	background: var(--white-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 3px;
	box-shadow: var(--box-shadow);
	transition: 0.8s cubic-bezier(0.22, 0.78, 0.45, 1.02);
}

.play-btn:hover {
	background: var(--primary-color);
	color: var(--white-color);
}

.main-navigation ul li.menu-item-has-children::after {
	content: "\f078";
	position: absolute;
	top: 55%;
	right: 0;
	transform: translate(0, -50%);
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 16px;
	line-height: 1;
	color: var(--dark-color);
	transition: var(--transition);
}

@keyframes swip_up {
	from {
		top: calc(100% + 20px);
		opacity: 0;
	}

	to {
		top: 100%;
		opacity: 1;
	}
}

.main-navigation ul ul li {
	display: block;
	margin: 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.main-navigation ul ul li:last-child {
	border-bottom: 0;
}

.main-navigation ul ul li a {
	display: block;
	padding: 5px 10px;
	font-size: 16px;
	line-height: 26px;
	transition: var(--transition);
}

.main-navigation ul ul li a:hover {
	color: var(--primary-color);
}

.sec-btn,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	width: 200px;
	height: 54px;
	background: var(--dark-color);
	border: 1px solid var(--dark-color);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border-radius: 5px;
	font-size: 16px;
	line-height: 20px;
	color: var(--white-color);
	font-weight: 500;
	text-align: center;
	padding: 5px;
	cursor: pointer;
	outline: none !important;
	transition: var(--transition);
	overflow: hidden;
	position: relative;
	z-index: 2;
	-webkit-appearance: none;
	appearance: none;
}

.sec-btn:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: transparent;
	border-color: var(--dark-color);
	color: var(--dark-color);
}

.bottom-footer {
	padding: 30px 0;
	background-color: #000;
	text-align: center;
	margin-top: auto;
}

.bottom-footer p {
	color: #fff;
}

.bottom-footer p a {
	color: #fff;
	font-weight: 500;
}

.bottom-footer p a:hover {
	-webkit-text-stroke: 0.2px;
}

/*==========Common CSS End==========*/

/*========== Modal Popup CSS Start ==========*/
.modal-content {
	background: var(--white-color);
	-webkit-mask-image: -webkit-radial-gradient(var(--white-color), var(--black-color));
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 20px 30px rgba(60, 140, 244, 0.16);
}

.popup-title {
	position: relative;
	padding: 10px 65px 10px 30px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.popup-title .h2-title {
	font-size: 30px;
	line-height: 40px;
	margin-bottom: 0;
}

button.close {
	position: absolute;
	top: 0;
	right: 0;
	width: 60px;
	height: 100%;
	background: var(--primary-color);
	opacity: 1 !important;
	text-shadow: none;
	color: var(--white-color);
	border-radius: 0;
	outline: none !important;
	z-index: 2;
	transition: var(--transition);
}

button.close:hover {
	background: var(--primary-color);
	color: var(--dark-color);
}

.modal-dialog {
	max-width: 700px;
}

.common-popup-overflow {
	padding: 10px 0px;
}

.common-popup-text::-webkit-scrollbar-thumb {
	background: var(--primary-color);
}

/*========== Modal Popup CSS End ==========*/

/*==========Slider CSS Start ==========*/
.slick-dots li {
	margin: 0 15px 0 0;
}

.slick-dots li button {
	width: 25px;
	height: 5px;
	background: var(--common-color);
	transition: var(--transition);
}

.slick-dots li.slick-active button,
.slick-dots li button:hover {
	background: var(--primary-color);
}

.slick-arrow {
	--slick-arrow-size: 30px;
	bottom: 0;
	left: 0;
	width: var(--slick-arrow-size);
	height: var(--slick-arrow-size);
	background: var(--primary-color);
	color: var(--white-color);
}

.slick-arrow:hover {
	background: var(--dark-color);
}

.slide-arrow.next-arrow.slick-arrow {
	left: auto;
	right: 0;
}

/*==========Slider CSS End==========*/

/*==========Header CSS Start==========*/

.site-header {
	position: fixed;
	background-color: var(--white-color);
	width: 100%;
	top: 0;
	left: 0;
	z-index: 100;
	box-shadow: var(--box-shadow);
	display: none;
}

.site-logo {
	padding: 10px 0;
}

/*==========Header CSS End==========*/

/*==========Landing CSS Start==========*/
.landing-banner {
	padding: 100px 20px;
	margin: 100px 3.5vw 0;
	background-color: rgba(211, 211, 211, 0.3);
	border-radius: 10px;
}

.landing-banner .h2-title {
	margin: 0;
}

.main-landing-page {
	position: relative;
	padding: 100px 0 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.landing-form .sec-title {
	margin-bottom: 20px;
}

.landing-form {
	background-color: var(--white-color);
	box-shadow: var(--box-shadow);
	padding: 30px 30px;
	border-radius: 13px;
}

.landing-content .h2-title {
	margin-bottom: 50px;
}

/*==========Landing CSS End==========*/

/*==========Footer CSS Start==========*/
.footer-bottom-box {
	position: relative;
	padding: 40px 0;
}

.footer-bottom-text {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.copy-right,
.footer-other-link {
	display: inline-block;
}

.copy-right p,
.footer-other-link p {
	font-size: 14px;
	line-height: 24px;
	margin-bottom: 0;
}

.footer-bottom-link {
	display: inline-block;
	text-align: center;
}

.footer-bottom-link ul {
	font-size: 0;
	line-height: 1;
	list-style: none;
	margin: 0;
}

.footer-bottom-link ul li {
	font-size: 14px;
	line-height: 24px;
	display: inline-block;
	padding-right: 8px;
	margin-right: 8px;
	border-right: 1px solid var(--common-color);
}

.footer-bottom-link ul li:last-child {
	margin-right: 0;
	padding-right: 0;
	border-right: 0;
}

.footer-bottom-link ul li a {
	font-size: 14px;
	line-height: 24px;
	color: var(--common-color);
	transition: var(--transition);
}

.footer-bottom-link ul li a:hover {
	color: var(--primary-color);
}

.footer-other-link p a {
	color: var(--primary-color);
	font-weight: bold;
	transition: var(--transition);
}

.footer-other-link p a:hover {
	color: var(--dark-color);
}

.footer-other-link p i {
	color: var(--primary-color);
}

/*==========Footer CSS End==========*/

/*==========Scroll To Top CSS Start==========*/
.scrolltop {
	position: fixed;
	bottom: 10px;
	right: 10px;
	width: 50px;
	height: 50px;
	background: var(--primary-color);
	border: none;
	color: var(--white-color) !important;
	font-size: 25px;
	line-height: 30px;
	text-align: center;
	padding: 13px 0;
	border-radius: 8px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.16);
	cursor: pointer;
	display: none;
	z-index: 50;
	transition: var(--transition);
}

.scrolltop:hover {
	background: var(--dark-color);
	color: var(--white-color) !important;
}

/*==========Scroll To Top CSS End==========*/

/*========== Inner Page CSS Start ==========*/
.main-banner.inner-banner {
	position: relative;
	padding: 280px 0 160px;
}

.inner-page-text {
	padding: var(--space-80) 0;
}

.privacy-content h2,
.entry-content h2 {
	font-size: 35px;
	color: var(--primary-color);
}

.privacy-content p a,
.privacy-content a,
.entry-content a,
.entry-content p a,
.entry-content a {
	transition: var(--transition);
	color: var(--primary-color);
}

.privacy-content p a:hover,
.privacy-content a:hover,
.entry-content p a:hover,
.entry-content a:hover {
	color: var(--dark-color);
}

/*========== Inner Page CSS End ==========*/

/*========== Thank You Page CSS Start ==========*/
.thank-text h6 {
	font-size: 24px;
	line-height: 30px;
	text-transform: capitalize;
	color: var(--dark-color);
}

.thank-text p a {
	text-decoration: underline !important;
	color: var(--primary-color);
	transition: var(--transition);
}

.thank-text p a:hover {
	color: var(--dark-color);
}

/*========== Thank You Page CSS End ==========*/

/*==========Site Map CSS Start==========*/
.site-map li a {
	color: var(--primary-color);
}

.site-map li::marker {
	color: var(--primary-color);
}

/*==========Site Map CSS End==========*/

/*========== View All Services CSS Start ==========*/
.footer-last .text,
.menu-seo-menu-container ul li a {
	font-size: 14px;
	line-height: 20px;
	color: var(--primary-color);
	cursor: pointer;
	transition: var(--transition);
}

.footer-last .text:hover {
	color: var(--dark-color) !important;
	text-decoration: underline !important;
}

.menu-seo-menu-container ul li a {
	padding-right: 7px;
	margin-right: 7px;
	border-right: 1px solid var(--dark-color);
	transition: var(--transition);
}

.menu-seo-menu-container ul li a:hover {
	color: var(--primary-color);
}

/*========== View All Services CSS End ==========*/

/*========== SEO Page CSS Start ==========*/
.main-seo-content {
	position: relative;
	padding: var(--space-80) 0;
}

.excerpt-content p a {
	color: var(--primary-color);
	transition: var(--transition);
}

.excerpt-content p a:hover {
	color: var(--primary-color);
}

.excerpt-content h3 {
	font-size: 24px;
	line-height: 30px;
	font-weight: 500;
	color: var(--primary-color);
}

.main-seo-content .excerpt-content {
	max-height: 325px;
	position: relative;
}

.main-seo-content .excerpt-content:not([style*="max-height: unset;"]):before {
	content: '';
	position: absolute;
	width: 100%;
	height: 120px;
	bottom: 0;
	left: 0;
	background: linear-gradient(to top, white, transparent);
	pointer-events: none;
}

/*========== SEO Page CSS End ==========*/

/*========== Blog CSS Start ==========*/
.posted-on a,
.byline a,
.widget ul li a,
.entry-title a,
.logged-in-as a {
	transition: var(--transition);
	color: var(--primary-color);
}

.entry-title a:hover,
.posted-on a:hover,
.byline a:hover,
.widget ul li a:hover,
.comment-meta .url:hover,
.comment-content a:hover,
.comment-metadata a:hover,
.reply a:hover,
.entry-footer span a:hover,
.nav-previous a:hover,
.nav-next a:hover {
	color: var(--dark-color);
}

.entry-footer span a {
	color: var(--primary-color);
}

.entry-footer span a:hover {
	color: var(--primary-color);
	text-decoration: underline !important;
}

.entry-title {
	font-size: 30px;
	text-transform: uppercase;
	color: var(--primary-color);
	margin-bottom: 15px;
}

.widget-area .widget_search .wp-block-search .wp-block-search__input,
.page-content .wp-block-search .wp-block-search__input,
.search-form .search-field {
	background: var(--black-color);
	font-size: 16px;
	outline: none;
	width: 100%;
	height: 50px;
	border-radius: 0;
	border: 1px solid var(--primary-color);
	padding: 13px 95px 12px 20px;
	-webkit-appearance: none;
	appearance: none;
}

.widget-area .widget_search .wp-block-search .wp-block-search__button,
.page-content .wp-block-search .wp-block-search__button,
.search-form .search-submit {
	padding: 10px 16px;
	font-size: 15px;
	font-weight: 700;
	border-radius: 0;
	height: 50px;
	color: var(--white-color);
	position: absolute;
	right: 0;
	bottom: 0;
	outline: none;
	border: none;
	cursor: pointer;
	background: var(--primary-color);
	flex: 1;
	transition: var(--transition);
}

.widget-area .widget_search .wp-block-search .wp-block-search__button:hover,
.page-content .wp-block-search .wp-block-search__button:hover,
.search-form .search-submit:hover {
	background: var(--dark-color);
	color: var(--primary-color);
}

.comments-area textarea {
	resize: none;
	height: 180px;
	border-radius: 0;
	box-shadow: none;
	background: var(--black-color);
	border: 1px solid var(--common-color);
	outline: none;
	padding: 15px;
}

.comments-area p input {
	width: 100%;
	height: 46px;
	border-radius: 0;
	background: var(--black-color);
	border: 1px solid var(--common-color);
	outline: none;
	box-shadow: none;
	padding: 15px;
}

.form-submit .submit {
	width: 170px;
	height: 46px;
	background: var(--primary-color);
	color: var(--white-color);
	font-weight: bold;
	border: none;
	border-radius: 40px;
	outline: none !important;
	transition: var(--transition);
}

.form-submit .submit:hover {
	background: var(--dark-color);
	color: var(--primary-color);
}

.avatar.photo {
	width: 60px;
	height: 60px;
	border-radius: 50%;
}

.wp-block-latest-comments__comment-meta a:hover {
	color: var(--dark-color);
}

.comment-meta .url,
.comment-content a {
	color: var(--primary-color);
}

.comment-meta .url:hover,
.comment-content a:hover {
	color: var(--dark-color);
	text-decoration: none !important;
}

.comment-metadata a {
	color: var(--primary-color);
	display: inline-block;
	margin-right: 10px;
	margin-bottom: 15px;
}

.reply a {
	color: var(--primary-color);
	display: inline-block;
	margin-bottom: 10px;
	transition: var(--transition);
}

.comment-reply-title {
	font-size: 30px;
	font-weight: bold;
	color: var(--primary-color);
	margin-bottom: 20px;
}

.comment-reply-title small a:hover {
	color: var(--dark-color);
}

.comment-form-comment .form-submit #submit {
	padding: 0;
	line-height: 42px;
}

.comments-area {
	margin-top: 60px;
}

.comments-title {
	margin-bottom: 30px;
	text-transform: uppercase;
	font-size: 30px;
	line-height: 40px;
}

.comment-body {
	margin-bottom: 30px;
}

.comment-form-url {
	margin-right: 0;
}

.single-post .widget-area {
	margin-top: 0;
}

.nav-previous a,
.nav-next a {
	color: var(--primary-color);
	transition: var(--transition);
}

.result-pagination li a,
.result-pagination li,
.result-pagination .page-numbers {
	--pagination-size: 50px;
	width: var(--pagination-size);
	height: var(--pagination-size);
	background: var(--white-color);
	box-shadow: 0 10px 40px rgba(37, 58, 105, 0.09);
	border-radius: 10px;
	color: var(--dark-color);
	font-size: 20px;
	z-index: 10;
	transition: var(--transition);
}

.result-pagination a:hover,
.result-pagination .current {
	background: var(--primary-color);
	color: var(--white-color);
}

.page-numbers li a,
.page-numbers li,
span.page-numbers,
.page-numbers {
	width: 50px;
	height: 50px;
	background: var(--common-color);
	box-shadow: 0 10px 40px rgba(37, 58, 105, 0.09);
	border-radius: 8px;
	border: none;
	outline: none;
	color: var(--white-color);
	font-size: 18px;
	z-index: 10;
	transition: var(--transition);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin: 0 3px;
}

.page-numbers li {
	margin: 0 5px;
}

.page-numbers li a:hover,
.page-numbers.current,
.page-numbers:hover {
	background: var(--primary-color);
	color: var(--white-color);
}

/*========== End of Blog CSS ==========*/

/*==========Responsive Start==========*/
@media screen and (min-width: 992px) {
	.main-navigation ul li.menu-item-has-children {
		padding-right: 20px;
		position: relative;
	}

	.main-navigation ul ul li.menu-item-has-children {
		padding-right: 0;
	}

	.main-navigation ul li.menu-item-has-children:hover::after {
		color: var(--primary-color);
		transform: translate(0, -50%) rotate(-180deg);
	}

	.main-navigation li.current-menu-ancestor ul li.current_page_item>a,
	.main-navigation ul ul li:hover>a {
		background: var(--secondary-color);
		color: var(--white-color);
	}

	.main-navigation li.current-menu-ancestor.menu-item-has-children:not(.sub-menu li.current-menu-ancestor.menu-item-has-children)::after {
		color: var(--primary-color);
	}

	.main-navigation ul ul li.current-menu-ancestor::after {
		color: var(--white-color);
	}

	/***** If Dropdown Menu CSS Avaliable Than Remove This CSS Start *****/
	.main-navigation ul li.menu-item-has-children:hover>ul.sub-menu:not(.dropdown-menu-wp ul .sub-menu) {
		display: block;
		top: 100%;
		left: 0;
		opacity: 1;
		animation: swip_up var(--transition) linear 1;
	}

	/***** If Dropdown Menu CSS Avaliable Than Remove This CSS End *****/

	.main-navigation ul .sub-menu:not(.dropdown-menu-wp ul .sub-menu) {
		position: absolute;
		top: 100%;
		left: -999em;
		float: none;
		width: 260px;
		background: var(--white-color);
		box-shadow: 0 0 10px rgba(60, 140, 244, 0.15);
		text-align: left;
		padding-left: 0;
		display: none;
		opacity: 0;
	}

	.main-navigation ul li.menu-item-has-children:hover .dropdown-menu-wp {
		display: block;
		opacity: 1;
	}

	.main-navigation .dropdown-menu-wp ul li.menu-item-has-children {
		padding-block: 4px;
	}

	.main-navigation ul ul li.menu-item-has-children:hover>ul.sub-menu:not(.dropdown-menu-wp ul .sub-menu) {
		top: 0;
		left: 100%;
	}

	.main-navigation ul ul li.menu-item-has-children:hover>ul.sub-menu:not(.dropdown-menu-wp ul .sub-menu) {
		top: 0;
		left: 100%;
		animation: unset;
	}

	.main-navigation ul ul li.menu-item-has-children:hover::after,
	.main-navigation ul ul li.menu-item-has-children::after {
		transform: translate(0, -50%) rotate(-90deg);
	}

	.landing-content {
		margin-bottom: 35px;
	}
}

@media screen and (min-width: 1200px) {
	.landing-text {
		padding-right: 40px;
	}
}

@media screen and (min-width: 1400px) {
	.container {
		max-width: 1200px;
	}
}

@media (min-width: 1921px) {
	.container {
		max-width: 1400px;
	}

	p {
		font-size: 18px;
	}

	.h2-title {
		font-size: 36px;
	}

	.h3-title {
		font-size: 24px;
	}
}

@media screen and (max-width: 1499px) {}

@media screen and (max-width: 1199px) {}

@media screen and (max-width: 991px) {
	.site-header {
		height: 80px;
	}

	.site-branding {
		position: fixed;
		top: 0;
		left: 30px;
		width: 145px;
		height: 80px;
	}

	.site-logo {
		width: 240px;
		padding: 0;
		position: fixed;
		top: 9px;
		left: 50%;
		transform: translate(-50%, 0);
	}

	.menu-toggle {
		--menu-toggle-rotate: 45deg;
		--menu-toggle-space: 13px;
		position: fixed;
		top: 25px;
		right: 30px;
		border: none;
		outline: none !important;
		background: transparent;
		width: 40px;
		padding: 0;
		z-index: 105;
	}

	.menu-toggle span {
		display: block;
		width: 100%;
		height: 5px;
		background: var(--primary-color);
		margin-bottom: 8px;
		border-radius: 0;
		position: relative;
		top: 0;
		opacity: 1;
		transition: var(--transition);
	}

	.menu-toggle span:last-child {
		margin: 0;
	}

	.toggled .menu-toggle span:nth-child(1) {
		transform: rotate(var(--menu-toggle-rotate));
		top: var(--menu-toggle-space);
	}

	.toggled .menu-toggle span:nth-child(2) {
		opacity: 0;
	}

	.toggled .menu-toggle span:nth-child(3) {
		transform: rotate(calc(var(--menu-toggle-rotate)*-1));
		top: calc(var(--menu-toggle-space)*-1);
	}

	.header-mobile-menu {
		background: var(--dark-color);
		padding: 16.3vh 30px 30px 30px;
	}

	.header-mobile-menu::-webkit-scrollbar-thumb {
		background: var(--dark-color);
	}

	.header-mobile-menu::-webkit-scrollbar-track {
		background: var(--white-color);
	}

	.main-navigation ul {
		text-align: left;
		display: inline-block;
	}

	.main-navigation ul li {
		display: block;
		margin-left: 0;
		font-size: 22px;
		line-height: 28px;
		margin-bottom: 4.4vh;
	}

	.main-navigation ul li.menu-item-has-children {
		padding-right: 15px;
	}

	.main-navigation ul li:last-child {
		margin-bottom: 0;
	}

	.main-navigation ul li a {
		font-size: 22px;
		line-height: 28px;
		padding-top: 0;
		padding-bottom: 9px;
		color: var(--white-color);
	}

	.main-navigation ul li.menu-item-has-children::after {
		color: inherit;
	}

	.main-navigation ul ul li.menu-item-has-children::after {
		font-size: 16px;
	}

	.main-navigation ul li.menu-item-has-children.active-child-menu::after,
	.main-navigation ul li.menu-item-has-children.active-sub-menu::after {
		transform: translate(0) rotate(-180deg);
	}

	.main-navigation ul ul {
		display: block;
		top: 0;
		left: 15px !important;
		position: relative;
		opacity: 1;
		animation: none;
		background: transparent;
		box-shadow: none;
		width: 100%;
		display: none;
		margin-top: 15px;
	}

	.main-navigation ul ul ul {
		padding-left: 0;
	}

	.main-navigation ul ul li {
		border-bottom: none;
		margin-bottom: 10px;
	}

	.main-navigation ul ul li:last-child {
		margin-bottom: 0;
	}

	.main-navigation ul ul li a {
		display: inline-block;
		border: 0;
		padding: 0;
		font-size: 16px;
	}

	.main-navigation ul ul ul li a {
		font-size: 14px;
	}

	.footer-bottom-text,
	.copy-right,
	.footer-other-link,
	.footer-bottom-link {
		display: block;
		text-align: center;
	}

	.footer-bottom-link {
		margin: 15px 0;
	}

	.landing-content .h2-title {
		margin-bottom: 35px;
	}

	.landing-text {
		margin-bottom: 50px;
	}

	.main-landing-page {
		padding-top: calc(clamp(3.75rem, 3.39vw + 2.9rem, 5rem));
		/* 80 to 60 = 991 to 401 */
	}

	.landing-banner {
		margin: calc(clamp(3.75rem, 3.39vw + 2.9rem, 5rem)) 3vw 0;
		padding: calc(clamp(3.75rem, 3.39vw + 2.9rem, 5rem)) 15px;
		text-align: center;
		/* 80 to 60 = 991 to 401 */
	}

	.landing-img {
		margin-bottom: 40px;
	}

	.landing-content {
		margin-bottom: calc(clamp(3.75rem, 1.695vw + 3.325rem, 4.375rem));
		/* 70 to 60 = 991 to 401 */
	}
}

@media screen and (max-width: 575px) {
	:root {
		--space-80: 60px;
	}

	p {
		font-size: 15px;
		margin-bottom: 13px;
	}

	.wpcf7-form-control-wrap {
		margin-bottom: 20px;
	}

	span.wpcf7-not-valid-tip {
		margin-bottom: -18px;
	}

	.form-input,
	.input-text,
	.select2-container--default .select2-selection--single .select2-selection__rendered,
	select {
		height: 44px;
		font-size: 15px;
	}

	.form-input.wpcf7-textarea {
		height: 110px;
		padding: 7px 15px;
	}

	.sec-btn,
	.woocommerce #respond input#submit,
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button {
		width: 170px;
		height: 50px;
		font-size: 15px;
	}

	.header-mobile-menu {
		padding: 16.3vh 20px 30px 20px;
	}

	.main-navigation ul li,
	.main-navigation ul li a {
		font-size: 18px;
		line-height: 24px;
	}

	.main-navigation ul ul li,
	.main-navigation ul ul li a {
		font-size: 14px;
	}

	.main-navigation ul li.menu-item-has-children::after {
		top: 5px;
		font-size: 15px;
	}

	.main-navigation ul ul li.menu-item-has-children::after {
		font-size: 13px;
	}

	.main-navigation ul ul,
	.main-navigation ul li.menu-item-has-children:hover ul {
		left: 10px !important;
		margin-top: 10px;
	}

	.h2-title {
		font-size: calc(clamp(1.25rem, 2.5vw + 0.664rem, 1.563rem));
		/* 25 to 20 = 575 to 375 */
		margin-bottom: calc(clamp(1.125rem, 4vw + 0.188rem, 1.625rem));
		/* 26 to 18 = 575 to 375 */
	}

	.h3-title {
		font-size: 18px;
	}

	.site-header {
		height: 65px;
	}

	.site-logo {
		width: 180px;
		top: 9px;
	}

	.landing-form .sec-title {
		margin-bottom: 20px;
	}

	.landing-img {
		margin-bottom: 30px;
	}

}

@media screen and (max-width: 400px) {
	.site-branding {
		left: 15px;
	}

	.menu-toggle {
		right: 15px;
	}

	.form-input,
	.input-text,
	.select2-container--default .select2-selection--single .select2-selection__rendered,
	select {
		padding: 0 15px;
	}

	.form-input.wpcf7-textarea {
		padding: 15px;
	}

	.form-element i {
		right: 10px;
	}

	.popup-title {
		padding: 10px 65px 10px 15px;
	}

	.landing-form {
		padding: 30px 15px;
	}
}

/*==========Responsive End==========*/