/* ===================================
    About
====================================== */

/*
    Theme Name: MegaOne
    Theme URI:
    Author: Themes Industry
    Author URI:
    Description: One Page Parallax Template
    Tags: one page, multipurpose, parallax, creative, html5
*/

/* ===================================
    Table of Content
====================================== */

/*  - Fonts
    - General
    - Social Icon Hover
    - Header And Navigation
    - Slider
    - About
    - Work
    - Clients
    - Price
    - Blog
    - Contact
    - Footer
    - Loader
    - Media Queries   */

/* ===================================
    Google fonts
====================================== */
@import url("https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900");

@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;600&display=swap");

.font-primary {
	font-family: "Montserrat", sans-serif;
}
.font-secondary {
	font-family: "Cairo", sans-serif;
}

/* ===================================
    General
====================================== */
body {
	font-family: "Cairo", sans-serif;
	font-size: 15px;
	color: #666666;
	font-weight: 300;
	line-height: 26px;
	letter-spacing: 0.5px;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}
ol,
ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
section,
.section-padding {
	position: relative;
	padding: 7.5rem 0;
	overflow: hidden;
}

.portfolio-padding {
	padding: 7.5rem 0 4rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Cairo", sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	line-height: 1;
}
h1 {
	font-size: 72px;
}
.h1 {
	font-size: 4rem;
}
h2 {
	font-size: 3rem;
}
p {
	margin: 0;
	padding: 0;
	font-size: 15px;
	color: #535353;
}

img {
	max-width: 100%;
}

a,
a:active,
a:focus,
a:hover {
	text-decoration: none !important;
	outline: none;
}
a:focus,
a:hover {
	color: #212622;
}
a,
*::before,
*::after,
img,
span,
input,
button,
.navbar,
.fixedmenu,
.tp-bullet,
.owl-dot,
.owl-prev,
.owl-next {
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
i::before,
i::after {
	-webkit-transition: all 0s ease;
	-o-transition: all 0s ease;
	transition: all 0s ease;
}
/* transition none */
.no-transition * {
	transition-timing-function: initial;
	-moz-transition-timing-function: initial;
	-webkit-transition-timing-function: initial;
	-o-transition-timing-function: initial;
	-ms-transition-timing-function: initial;
	transition-duration: 0s;
	-moz-transition-duration: 0s;
	-webkit-transition-duration: 0s;
	-o-transition-duration: 0s;
	-ms-transition-duration: 0s;
}
.no-animation {
	animation: none !important;
}
.no-transform {
	transform: none !important;
}
::-webkit-scrollbar-track {
	background-color: #e9edf0;
	border-left: 1px solid #ededed;
}
::-webkit-scrollbar {
	width: 7px;
}
::-webkit-scrollbar-thumb {
	background: #1dbd9e;
}

/* center block */
.center-block {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-moz-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-moz-box-orient: vertical;
	-moz-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-moz-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

/* img wrap */
.image {
	overflow: hidden;
}
a.image {
	display: block;
}
.image img {
	width: 100%;
	height: 100%;
	display: block;
}
.image,
.image img {
	position: relative;
}

/* opacity */
.opacity-1 {
	opacity: 0.1 !important;
}
.opacity-2 {
	opacity: 0.2 !important;
}
.opacity-3 {
	opacity: 0.3 !important;
}
.opacity-4 {
	opacity: 0.4 !important;
}
.opacity-5 {
	opacity: 0.5 !important;
}
.opacity-6 {
	opacity: 0.6 !important;
}
.opacity-7 {
	opacity: 0.7 !important;
}
.opacity-8 {
	opacity: 0.8 !important;
}
.opacity-9 {
	opacity: 0.9 !important;
}

.z-index-0 {
	z-index: 0 !important;
}
/* buttons */
.btn:hover,
.btn:active,
.btn:focus {
	outline: none;
	box-shadow: none;
}
button {
	cursor: pointer;
}
button:hover,
button:active,
button:focus {
	outline: none;
}
.btn-setting {
	padding: 10px 25px !important;
	width: auto;
	display: inline-block;
	font-family: "Cairo", sans-serif;
	font-weight: 400;
	line-height: 25px;
	font-size: 13px !important;
	text-align: center;
	-webkit-border-radius: 36px;
	border-radius: 36px;
	position: relative;
	z-index: 1;
	overflow: hidden;
	border: 1px solid #acacac;
	-webkit-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease !important;
}

.btn-light-green {
	/* background-color: #1dbd9e;
	color: #ffffff !important;
    border: 1px solid #1dbd9e; */
	background-color: #bef0ff;
	color: #000000;
	border: 1px solid #bef0ff;
}

.btn-light-green:hover {
	background-color: #1e409c;
	border-color: #1e409c;
	color: #ffffff !important;
}

/* slider social */
.slider-social {
	z-index: 99;
}

.slider-social a {
	display: block;
	position: relative;
	text-align: center;
	color: #212622;
	font-size: 15px;
	-webkit-transition: background-color 0.2s ease-in-out;
	-moz-transition: background-color 0.2s ease-in-out;
	-o-transition: background-color 0.2s ease-in-out;
	transition: background-color 0.2s ease-in-out;
}

.slider-social i {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #ffffff;
}

/* ===================================
    Cursor
====================================== */

/* Cursor */
#animated-cursor {
	position: absolute;
	left: 0;
	display: none;
	top: 0;
	width: 30px;
	height: 30px;
	pointer-events: none;
	z-index: 10000;
	-webkit-transition: opacity 0.2s ease-in-out 0.5s;
	transition: opacity 0.2s ease-in-out 0.5s;
}

.cursor-light:hover ~ #animated-cursor {
	display: inline-block;
}

#cursor {
	position: fixed;
	transform: translate(-50%, -50%);
	width: 30px;
	height: 30px;
	border: 2px solid rgba(255, 255, 255, 1);
	border-radius: 50%;
	pointer-events: none;
	opacity: 1;
	box-sizing: border-box;
}
#cursor:before {
	font-family: themify;
	content: "\e649";
	font-size: 6px;
	width: 4px;
	height: 8px;
	line-height: 8px;
	text-align: center;
	position: absolute;
	left: -12px;
	top: 9px;
	color: #ffffff;
	opacity: 0;
	transition: all 0.1s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
#hold-event {
	width: 26px;
	height: 26px;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 100%;
	background: rgba(255, 255, 255, 0);
}
#cursor-loader {
	width: 40px;
	height: 40px;
	position: absolute;
	background-color: transparent;
	border-right: 2px solid transparent;
	border-bottom: 2px solid #ffffff;
	border-left: 2px solid transparent;
	border-top: 2px solid transparent;
	border-radius: 50px;
	box-sizing: border-box;
	opacity: 0;
	transform: translate(-9px, -9px) rotate(0deg);
	-webkit-animation: rotating 0.8s ease-in-out infinite;
	animation: rotating 0.8s ease-in-out infinite;
	-webkit-transition: opacity 0s ease-in-out 0s;
	transition: opacity 0s ease-in-out 0s;
}
#cursor:after {
	font-family: themify;
	content: "\e649";
	font-size: 6px;
	width: 4px;
	height: 8px;
	line-height: 8px;
	text-align: center;
	position: absolute;
	right: -10px;
	top: 9px;
	color: #ffffff;
	opacity: 0;
	transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

@keyframes rotating {
	0% {
		-webkit-transform: translate(-7px, -7px) rotate(0deg);
		transform: translate(-7px, -7px) rotate(0deg);
	}

	95% {
		-webkit-transform: translate(-7px, -7px) rotate(350deg);
		transform: translate(-7px, -7px) rotate(350deg);
	}

	100% {
		-webkit-transform: translate(-7px, -7px) rotate(360deg);
		transform: translate(-7px, -7px) rotate(360deg);
	}
}

.header-appear.cursor-light:hover ~ #animated-cursor {
	display: none;
}
.header-appear .animated-wrap,
.header-appear .animated-element {
	transform: none !important;
}

.overlay {
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	background-image: -webkit-linear-gradient(to bottom, #3264f5 0%, #127fde 100%);
	background-image: -moz-linear-gradient(to bottom, #3264f5 0%, #127fde 100%);
	background-image: -o-linear-gradient(to bottom, #3264f5 0%, #127fde 100%);
	background-image: -ms-linear-gradient(to bottom, #3264f5 0%, #127fde 100%);
	background-image: linear-gradient(to bottom, #3264f5 0%, #127fde 100%);
	position: absolute;
	opacity: 1;
	visibility: visible;
	z-index: -99;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
}
.overlay-dark {
	background: #000000;
}

/* ===================================
   form model
====================================== */
.landing-modal {
	position: fixed;
	z-index: -100;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3rem 0;
	opacity: 0;
	visibility: hidden;
	transition: 0.3s opacity, 0s z-index, 0.3s visibility, 0.3s transform;
}
.landing-modal.active {
	opacity: 1;
	visibility: visible;
	z-index: 100;
	transition: 0.3s;
}
.landing-modal.active.hide {
	opacity: 0;
	visibility: hidden;
}
.landing-modal .model-cont {
	width: 100%;
	position: relative;
}

.landing-modal .modal-content {
	position: relative;
	max-width: 880px;
	overflow-y: auto;
	width: 50%;
	max-height: 75vh;
	padding: 3rem 4.5rem;
	margin: 5rem auto;
	border-radius: 0;
	border: none;
	outline: none;
	transform: translateY(-100px);
	box-shadow: 0 0 30px #00000040;
	transition: 0.3s;
}
.landing-modal.active .modal-content {
	transform: translateY(0);
}
.landing-modal.active.hide .modal-content {
	transform: translateY(-100px);
	opacity: 0.2;
}
.landing-modal .contact-form .form-control {
	border: none;
	outline: none;
	box-shadow: none;
	border-bottom: 1px solid #d4d4d4;
	border-radius: 0;
	padding: 0;
}
.landing-modal .contact-form .form-control.error {
	border-color: #d5402c;
	color: #d5402c;
}
.landing-modal .contact-form .form-control.error.animate {
	animation: 0.5s error;
}

@keyframes error {
	0% {
		transform: translateX(-3px);
	}
	20% {
		transform: translateX(2px);
	}
	40% {
		transform: translateX(-5px);
	}
	60% {
		transform: translateX(4px);
	}
	80% {
		transform: translateX(-6px);
	}
	100% {
		transform: translateX(0);
	}
}

.landing-modal textarea.form-control {
	min-height: 130px;
	resize: none;
	margin-bottom: 0;
}

.defaultcolor {
	color: #3e56b6;
}
.heading-area .title {
	font-size: 2.5rem;
}

/*check box*/
/*CheckBox*/

.quote-content .form-check {
	padding: 50px 0 0 0;
	text-align: center;
	margin-bottom: -15px;
}

.checkbox-label {
	display: inline-block;
	position: relative;
	padding-left: 35px;
	cursor: pointer;
	font-size: 14px;
	line-height: 25px;
	font-weight: 400;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.checkbox-label input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.check-mark {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	border: 1px solid #999999;
}

.check-mark:after {
	content: "";
	position: absolute;
	display: none;
}

.checkbox-label input:checked ~ .check-mark:after {
	display: block;
}

.checkbox-label .check-mark:after {
	left: 9px;
	top: 5px;
	width: 7px;
	height: 11px;
	border: solid #999999;
	border-width: 0 3px 4px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
.btn-model-fixed {
	border: none;
	outline: none;
	background-color: #1ebd9f;
	color: #ffffff !important;
	border-radius: 25px;
	padding: 0.65rem 1.75rem;
	font-size: 14px;
	position: absolute;
	bottom: 0;
	transform: translate(-50%, 50%);
	left: 50%;
	box-shadow: 0 3px 8px #00000044 !important;
	-webkit-transition: 0.3s all;
	-moz-transition: 0.3s all;
	-o-transition: 0.3s all;
	transition: 0.3s all;
}
.landing-modal.active.hide .btn-model-fixed {
	bottom: 2rem;
}
.landing-modal.active .btn-model-fixed {
	bottom: 5rem;
}

.btn-model-fixed:hover {
	background-color: #3e56b6;
}

#close {
	position: absolute;
	right: 15px;
	top: 15px;
	border-radius: 50%;
	background-color: #676767;
	color: #ffffff;
	border: none;
	outline: none;
	box-shadow: none;
	width: 31px;
	height: 31px;
	line-height: 1;
	font-size: 25px;
	font-weight: 100;
	display: flex;
	justify-content: center;
	align-items: center;
}
#close span {
	display: block;
	transform: scaleX(1.2) translate(0px, -2px);
}

/*thanks box*/
#thanks {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, 0.4);
	z-index: 110;
	width: 100vw;
	height: 100vh;
	display: none;
}
.thanks-body {
	background: #ffffff;
	padding: 4rem;
	max-width: 350px;
	max-height: 320px;
	text-align: center;
	transform: translateY(-70px);
	transition: 0.3s;
}
#thanks.active .thanks-body {
	transform: translateY(0);
}
.icon i {
	font-size: 3rem;
	color: #1ebd9f;
}

#thanks-text {
	line-height: 1.3;
}

.btn-close {
	background-color: #1dbd9e;
	color: #ffffff;
	border: 1px solid #1dbd9e;
	padding: 5px 25px !important;
}
.btn-close:hover {
	background-color: #3e56b6;
	color: #ffffff;
	border: 1px solid #3e56b6;
}

/* ===================================
   Loader
====================================== */
.loader {
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 111111;
	background: #ffffff;
	overflow: hidden !important;
	display: flex;
	justify-content: center;
	align-items: center;
}

.loader-box {
	position: relative;
	display: grid;
	grid-template-columns: 33% 33% 33%;
	grid-gap: 2px;
	height: 90px;
	/*margin: 0 50px 100px 0;*/
	width: 90px;
	overflow: hidden;
}

.loader-box li {
	position: relative;
	width: 100%;
	height: 100%;
	background: #3f55b6;
	transform: scale(0);
	transform-origin: center center;
	animation: loader-box-fade 1.5s infinite ease-in-out;
}
.loader-box li:nth-child(1),
.loader-box li:nth-child(5),
.loader-box li:nth-child(9) {
	animation-delay: 0.4s;
}
.loader-box li:nth-child(4),
.loader-box li:nth-child(8) {
	animation-delay: 0.2s;
}
.loader-box li:nth-child(2),
.loader-box li:nth-child(6) {
	animation-delay: 0.6s;
}
.loader-box li:nth-child(3) {
	animation-delay: 0.8s;
}
@keyframes loader-box-fade {
	0% {
		transform: scale(0);
		opacity: 0.2;
	}
	40% {
		transform: scale(1);
		opacity: 1;
	}
	80% {
		transform: scale(1);
		opacity: 1;
	}
	100% {
		transform: scale(0);
		opacity: 0.2;
	}
}
/* ===================================
   Media Queries
====================================== */

@media screen and (max-width: 1280px) {
	.landing-modal .modal-content {
		width: 55%;
	}
}
@media screen and (max-width: 1199px) {
	h1,
	.h1 {
		font-size: 3.56rem;
	}
	h2 {
		font-size: 2.45rem;
	}
	h3 {
		font-size: 1.65rem;
	}
	h4 {
		font-size: 1.15rem;
	}
	h5,
	.cbp-l-project-subtitle {
		font-size: 1rem;
	}
	.landing-modal .modal-content {
		width: 60%;
	}
	.heading-area .title {
		font-size: 2rem;
	}
}
@media screen and (max-width: 991px) {
	h1,
	.h1 {
		font-size: 2.95rem;
	}
	h2 {
		font-size: 2.3rem;
	}
	h3 {
		font-size: 1.4rem;
	}
	h4 {
		font-size: 1.125rem;
	}
}
@media screen and (max-width: 767px) {
	body {
		text-align: center;
	}

	h1,
	.h1 {
		font-size: 2.65rem;
	}

	h2,
	.main-title.style-two h2,
	.cbp-l-project-title {
		font-size: 2.2rem;
	}

	h3 {
		font-size: 1.375rem;
	}

	h4 {
		font-size: 1.115rem;
	}
	p {
		font-size: 14px;
	}
	.logo {
		max-width: 120px;
	}
	.landing-modal .modal-content {
		width: 75%;
	}
}

@media screen and (max-width: 567px) {
	.landing-modal .modal-content {
		padding: 3rem;
	}
	.heading-area .title {
		font-size: 1.9rem;
	}
	.landing-modal .form-check {
		padding-left: 0;
	}
}