@import url('https://fonts.googleapis.com/css2?family=Lato:wght@200;300;400;500;600;700;800;900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    font-family: 'Lato', sans-serif;
    text-decoration: none;
    border: none;
    outline: none;
    scroll-behavior: smooth;
}

:root {
	--sideBGColor:#040b14;
	--themeColor:#00A78E;
	--iconBGColor:#2C2F3F;
	--textColor:#353535;
	--secondTextColor:#F7F7F7;
	--bgColor:#f4f4f4;
	--bg-transparent-color: rgba(0, 0, 0, 0.1);
	--modal-bg-color: #fff;
	--box-shadow: 0 0 20px rgba(0, 0, 0, 10%);
	--index: calc(1vw + 1vh);
	--gradient-white-bg:linear-gradient(0deg,#fff 0%,#edf4fa 51%,#e5eef7 100%);
	--gradient-white-bg2:linear-gradient(98deg,#e5eef7 0%,#fff 100%);
	--hover-box-shadow:rgba(0,0,0,0.19)0px 10px 20px,
	                  	rgba(0,0,0,0.23)0px 6px 6px;
}

header{
	height: 100vh;
	width: 300px;
	padding: 15px 20px;
	background-color: var(--sideBGColor);
	overflow-y: auto;
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	transition: 0.4s;
	z-index: 99;
}
header .profile{
	text-align: center;
	margin: 10px 0;
}
header .profile a{
	cursor: pointer;
}
header .profile img{
	width: 140px;
}
header .profile h1{
	color: var(--secondTextColor);
	font-weight: 600;
	margin-bottom: 10px;
	font-size: 28px;
}
header .profile .social-icons a{
	display: inline-block;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	text-align: center;
	line-height: 36px;
	background-color: var(--iconBGColor);
	color: var(--secondTextColor);
	font-size: 20px;
	margin: 1.5px;
	transition: 0.4s;
}
header .profile .social-icons a:hover{
	background-color: var(--themeColor);
}
header nav{
	margin-top: 20px;
	margin-bottom: 40px;
}
header nav ul li{
	list-style: none;
}
header nav ul li a{
	display: inline-block;
	text-decoration: none;
	padding: 7px 10px;
	margin: 5px 0;
	color: var(--secondTextColor);
	font-weight: 400;
	font-size: 15px;
	letter-spacing: 0.6px;
}
header nav ul li a i{
	margin-right: 10px;
	font-size: 20px;
	transition: 0.4s;
}
header nav ul li a:hover i{
	color: var(--themeColor);
}
header nav ul li .active{
	color: var(--themeColor);
}
header .footer{
	text-align: center;
	background-color: var(--sideBGColor);
	width: 300px;
	color: var(--secondTextColor);
	font-size: 14px;
	letter-spacing: 0.6px;
	padding: 15px;
	position: fixed;
	bottom: 0;
	left: 0;
	transition: 0.4s;
}
header .footer p a{
	color: var(--themeColor);
}
#MenuBtn{
	position: fixed;
	top: 25px;
	right: 25px;
	font-size: 20px;
	width: 40px;
	height: 40px;
	color: var(--secondTextColor);
	background-color: var(--themeColor);
	text-align: center;
	line-height: 42px;
	border-radius: 50%;
	box-shadow: 0 0 20px rgb(0, 0, 0,20%);
	display: none;
	z-index: 999;
	cursor: pointer;
}
#img-logo{
	width: 280px;
	position: absolute;
	top: -300px;
	left: 6px;
	z-index:1;
	transition: 0.4s;
}
@media only screen and (max-width: 1050px) {
	header{
		left: -300px;
	}
	header .footer{
		left: -300px;
	}
	#MenuBtn{
		display: block;
	}
	#img-logo{
		top: 21px;
	}
}
@media only screen and (max-width: 732px), (max-height: 760px) {
	#img-logo{
		width: 200px;
	}
}
@media only screen and (max-width: 400px), (max-height: 680px){
	#img-logo{
		display: none;
	}
}
.mobile-nav-active header{
	left: 0;
} 
.mobile-nav-active header .footer{
	left: 0;
} 

main{
	margin-left: 300px;
	background-color: var(--bgColor);
	transition: 0.4s;
}
@media only screen and (max-width: 1050px) {
	main{
		margin-left: 0;
	}
}

#home{
	height: 100vh;
	width: 100%;
	background-image: url(/images/mold-bg.jpg);
	-webkit-background-image: url(/images/mold-bg.jpg);
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-attachment: fixed;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 60px;
	position: relative;
}
#home::before{
	content:'';
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
	position: absolute;
	top: 0;
	left: 0;
}
#home .home-row{
	z-index: 1;
}
#home .home-row h3{
	font-size: 30px;
	color: var(--secondTextColor);
	font-weight: 300;
	letter-spacing: 0.5px;
	margin-bottom: 10px;
	line-height: 30px;
}
#home .home-row h1{
	font-size: 60px;
	color: var(--secondTextColor);
	font-weight: 600;
	letter-spacing: -1px;
	margin-bottom: 20px;
	line-height: 60px;
}
#home .home-row h2{
	font-size: 40px;
	color: var(--secondTextColor);
	font-weight: 500;
	letter-spacing: 0.5px;
	margin-bottom: 20px;
	line-height: 40px;
}
#home .home-row h2 span{
	border-bottom: 3px solid var(--themeColor);
}
#home .home-row p{
	color: var(--secondTextColor);
	font-weight: 300;
	font-size: 15px;
	letter-spacing: 0.5px;
}
#home .home-row p span{
	color: var(--themeColor);
	font-weight: 600;
}

@media only screen and (max-width: 750px) {
	#home{
		padding: 30px;
	}
	#home .home-row h1{
		font-size: 40px;
		letter-spacing: 0;
		line-height: 40px;
	}
	#home .home-row h2{
		font-size: 30px;
		font-weight: 500;
		letter-spacing: 0.5px;
		margin-bottom: 20px;
		line-height: 30px;
	}
	#home .home-row h3{
		font-size: 24px;
		font-weight: 300;
		letter-spacing: 0.5px;
		margin-bottom: 10px;
		line-height: 30px;
	}
	#home .home-row p{
		font-size: 13px;
	}
}

#about{
	padding: 50px 30px;
	background-color: var(--bgColor);
}
/* Global Heading */
.sub-heading{
	color: black;
	font-size: 30px;
	margin-bottom: 10px;
}
.divider{
	width: 80px;
	height: 4px;
	background-color: var(--themeColor);
	border-radius: 3px;
}
.sub-para{
	color: var(--textColor);
	font-size: 15px;
	letter-spacing: 0.4px;
	font-weight: 400;
	margin-top: 15px;
}
#about .about-col{
	display: flex;
	gap: 20px;
	margin-top: 20px;
}
#about .about-col .img-col{
	flex-basis: 35%;
	text-align: center;
}
#about .about-col .img-col img{
	width: 100%;
	margin-top: 30px;
}
#about .about-col .info-col{
	flex-basis: 70%;
}
#about .about-col .info-col h2{
	color: var(--themeColor);
	font-weight: 700;
	font-size: 35px;
	letter-spacing: 0.5px;
	margin-top: 5px;
}
#about .about-col .info-col h4{
	color: var(--textColor);
	font-weight: 700;
	font-size: 20px;
	letter-spacing: 0.5px;
	margin-top: 20px;
}
#about .about-col .info-col p{
	color: var(--textColor);
	font-size: 15px;
	letter-spacing: 0.5px;
	font-style: italic;
	margin-top: 10px;
}
#about .about-col .info-col .icon-list-col{
	display: flex;
	margin-top: 0px;
	gap: 40px;
}
#about .about-col .info-col .icon-list-col .icon-list ul li{
	list-style: none;
	margin: 15px 0;
}
#about .about-col .info-col .icon-list-col .icon-list ul li i{
	color: var(--themeColor);
}
#about .about-col .info-col .icon-list-col .icon-list ul li i strong{
	color: var(--sideBGColor);
	font-weight: 600;
	margin-right: 2px;
}

@media only screen and (max-width: 830px) {
	#about{
		padding: 50px 15px;
	}
	#about .divider ~ p{
		font-size: 14px;
		letter-spacing: 0px;
		text-align: justify;
	}
	#about .about-col{
		flex-direction: column;
	}
	#about .about-col .img-col img{
		width: 50%;
		margin-top: 0;
	}
	#about .about-col .info-col h2{
		font-weight: 600;
		font-size: 25px;
		letter-spacing: 0px;
		margin-top: 0;
	}
	#about .about-col .info-col h4{
		font-size: 16px;
		letter-spacing: 0px;
	}
	#about .about-col .info-col p{
		font-size: 14px;
		letter-spacing: 0px;
	}
	#about .about-col .info-col .icon-list-col{
		flex-direction: column;
		gap: 0;
	}
	#about .about-col .info-col .icon-list-col .icon-list ul li{
		margin: 10px 0;
	}
	#about .about-col .info-col .icon-list-col .icon-list ul li i strong{
		font-weight: 500;
		margin-right: 0;
	}
	#about .about-col .info-col .icon-list-col .icon-list ul li i span{
		font-weight: 400;
		font-size: 13px;
	}
}
@media only screen and (max-width: 400px){
	#about .about-col .img-col img{
		width: 90%;
	}
}

#fact{
	padding: 40px 30px;
	background-color: var(--bgColor);
}
#fact .fact-row{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 30px;
	margin-top: 50px;
}
#fact .fact-row .fact-box{
	text-align: center;
}
#fact .fact-row .fact-box i{
	color: var(--themeColor);
	font-size: 50px;
}
#fact .fact-row .fact-box strong{
	color: var(--iconBGColor);
	font-size: 30px;
	margin-left: 5px;
	font-weight: 600;
}
#fact .fact-row .fact-box p{
	color: var(--textColor);
	font-weight: 500;
	font-size: 16px;
	padding: 10px 0 10px 0;
}

@media only screen and (max-width: 850px) {
	#fact{
		padding: 40px 15px;
	}
}
@media only screen and (max-width: 700px){
	#fact .fact-row{
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 10px;
	}
}
@media only screen and (max-width: 370px){
	#fact .fact-row .fact-box i{
		font-size: 30px;
	}
	#fact .fact-row .fact-box strong{
		font-size: 20px;
	}
	#fact .fact-row .fact-box p{
		font-weight: 400;
		font-size: 14px;
	}
}

#work{
	padding: 50px 30px;
	background-color: var(--bgColor);
}
#work .work-row{
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	justify-content: center;
}
#work .triangles-container {
    color: #fff;
    font-size: 19px;
    margin: 40px 0 0px;
    text-align: center;
}
#work .triangles-container .tc-item {
    cursor: default;
    display: inline-block;
    height: 128px;
    margin-left: -45px;
		margin-bottom: 20px;
    position: relative;
    transition: all .5s ease;
    vertical-align: top;
    width: 290px;
}

#work .triangles-container .tc-item .dop-text{
	width: 220px;
	margin-left: 30px;
	text-align: center;
}
#work .triangles-container .tc-item .dop-text p{
	color: var(--textColor);
	font-size: 12px;
}
#work .triangles-container .tc-item:first-child {
    margin-left: 0;
		margin-bottom: 20px;
}
#work .triangles-container .tc-item:first-child .tc-content {
    margin-left: 20px;
}
#work .triangles-container .tc-item:hover {
    transform: scale(1.08);
    z-index: 3;
		color: #00A78E;
}
#work .triangles-container .tc-item:hover path {
    fill-opacity: 0!important;
    stroke-opacity: 1!important;
}
#work .triangles-container .tc-item svg {
    left: 0;
    position: absolute;
    top: 0;
    z-index: 0;
}
#work .triangles-container .tc-item .tc-content {
    margin-left: 60px;
    margin-top: 43px;
		margin-right: 10px;
    opacity: 1;
    padding-left: 40px;
    position: relative;
    text-align: left;
    z-index: 1;
}
#work .triangles-container .tc-item .tc-content span {
    font-size: 20px;
    margin-left: -22px;
    position: absolute;
}
#work .triangles-container .tc-item .tc-content i {
    float: left;
    height: 40px;
    margin-left: -40px;
    margin-right: 32px;
		font-size: 32px;
}
#work .triangles-container .tc-item:hover .tc-content i {
	color:#00A78E;
}

#service{
	padding: 50px 30px;
	background-color: white;
}
.service-gallery{
	margin-top: 50px;
	display: grid;
	grid-template-columns: repeat(auto-fill,minmax(320px , 1fr));
	gap: 1.5rem;
}
.service-img img{
	display: block;
	width: 100%;
	height: 100%;
	transition: .3s;
}
.service-box{
	display: flex;
	flex-direction: column-reverse;
	justify-content: space-between;
	align-items: center;
	gap: .3rem;
	padding: 0.8rem;
	/* box-shadow: rgba(0,0,0,0.18)0px 2px 4px; */
	box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.25);
	background: var(--bgColor);
	border-radius: 10px;
	transition: all .3s ease;
}
.service-content{
	width: 100%;
	padding-left: .5rem;
	padding-bottom: .5rem;
}
.service-img{
	border-radius: 5px;
	overflow: hidden;
}
.service-img img{
	width: 100%;
	height: 100%;
}
.service-box img:hover{
	transform: scale(1.1);
}
.readMore{
	width: 100px;
	padding: 8px 16px;
	font-size: .8rem;
	background: var(--gradient-color-bg2);
	color: var(--sideBGColor);
	border-radius: 5px;
	font-weight: 500;
	color: #000;
	box-shadow: rgba(60,64,67,0.3)0px 1px 2px 0,
					  rgba(60,64,67,0.15)0px 2px 6px 2px;
	transition: all .3s ease;
	cursor: pointer;
}
.service-content .readMore:hover{
	box-shadow: var(--hover-box-shadow);
}
.service-content h3{
	font-size: 18px;
	color: var(--sideBGColor);
	font-weight: 600;
}
.service-content p{
	font-size: 14px;
	letter-spacing: 0px;
	color: var(--textColor);
	margin: .5rem 0 1rem 0;
}

@media only screen and (max-width: 850px){
	#service{
		padding: 40px 15px;
	}
}

.flex-center{
	display: flex;
	justify-content: center;
	align-items: flex-start;
}
.service-modal{
	z-index: 999999;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	background: var(--bg-transparent-color);
	backdrop-filter: blur(20px);
	visibility: hidden;
	opacity: 0;
	transition: .3s ease;
	overflow-y: auto;
}
.service-modal.active{
	visibility: visible;
	opacity: 1;
}
.service-modal-body{
	position: relative;
	background: var(--modal-bg-color);
	max-width: 850px;
	margin: 20px;
	padding: 40px;
	border-radius: 10px;
	box-shadow: var(--box-shadow);
	transform: translateY(-50px);
	transition: .5s ease;
}
.service-modal-body img{
	width: 100%;
	margin: 20px 0;
	border-radius: 10px;
}
.service-modal.active .service-modal-body{
	transform: translateY(0);
}
.service-modal-body .modal-close-btn{
	position: absolute;
	top: 0;
	right: 0;
	margin: 20px;
	cursor: pointer;
	transition: 0.4s;
}
.service-modal-body .modal-close-btn:hover{
	transform: scale(1.4);
	color: var(--themeColor);
}
.service-modal-body h3{
	font-size: 2rem;
}
.service-modal-body h4{
	font-size: 1.3rem;
	font-weight: 600;
	margin: 15px 0 10px;
}
.service-modal-body p{
	color: var(--textColor);
	font-size: 15px;
	font-weight: 500;
	padding: 10px 0 10px 0;
}
.service-modal-body p span{
	font-weight: 600;
}
.service-modal-body ul li{
	font-size: 15px;
	font-weight: 500;
	margin-top: 15px;
}
.service-modal-body ul li i{
	color: var(--themeColor);
}

#resume{
	padding: 50px 30px;
}
#resume .resume-row{
	justify-content: space-between;
	gap: 20px;
	margin-top: 35px;
}
#resume .resume-row .resume-cols{
	flex-basis: 100%;
}
#resume .resume-row .resume-cols h2{
	color: var(--sideBGColor);
	font-weight: 600;
	font-size: 25px;
	margin: 15px 0;
}
#resume .resume-row .resume-cols h3{
	color: var(--sideBGColor);
	font-size: 17px;
	font-weight: 600;
	text-transform: uppercase;
}
#resume .resume-row .resume-cols .sp-box{
	padding: 4px 22px;
	background-color: lightblue;
	color: var(--textColor);
	border-radius: 3px;
	font-size: 14px;
	font-weight: 600;
	font-style: italic;
	margin: 15px 0;
	display: inline-block;
}
#resume .resume-row .resume-cols .pro-exp{
	padding: 0 20px 10px;
	border-left: 2px solid var(--themeColor);
	position: relative;
}
#resume .resume-row .resume-cols .pro-exp::before{
	content: '';
	position: absolute;
	top: 0;
	left: -10px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 2px solid var(--themeColor);
	background-color: var(--secondTextColor);
}
#resume .resume-row .resume-cols .pro-exp p{
	color: var(--textColor);
	font-size: 17px;
	font-weight: 500;
	font-style: italic;
}
#resume .resume-row .resume-cols .pro-exp ul li{
	margin: 10px 0;
	margin-left: 20px;
	color: var(--textColor);
	font-size: 15px;
	font-weight: 500;
}

@media only screen and (max-width: 850px){
	#resume{
		padding: 40px 15px;
	}
	#resume .resume-row{
		flex-direction: column;
	}
	#resume .resume-row .resume-cols{
		flex-basis: 100%;
	}
}

#equipment{
	padding: 50px 30px;
	background-color: white;
}
.equipment-gallery{
	margin-top: 50px;
	display: grid;
	grid-template-columns: repeat(auto-fill,minmax(350px , 1fr));
	gap: 1.5rem;
}
.equipment-gallery{
	margin-top: 50px;
	display: grid;
	grid-template-columns: repeat(auto-fill,minmax(370px , 1fr));
	gap: 1rem;
}
.equipment-img img{
	display: block;
	width: 100%;
	height: 100%;
	transition: .3s;
}
.equipment-box{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: .5rem;
	padding: .8rem;
	box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.25);
	background: var(--bgColor);
	border-radius: 10px;
	transition: all .3s ease;
}
.equipment-content{
	width: 100%;
	padding-left: .5rem;
	padding-bottom: .5rem;
}
.equipment-img{
	width: 100%;
	border-radius: 5px;
	overflow: hidden;
}
.equipment-box:hover img{
	transform: scale(1.1);
}
.equipment-content h3{
	font-size: 18px;
	color: var(--sideBGColor);
	font-weight: 600;
}
.equipment-content p{
	font-size: 14px;
	letter-spacing: 0px;
	color: var(--textColor);
	margin: .5rem 0 1rem 0;
}

@media only screen and (max-width: 850px){
	#equipment{
		padding: 40px 15px;
	}
}

#portfolio{
	padding: 50px 30px;
}
.gallery{
	min-height: 100vh;
	padding-bottom: 10px;
}
.gallery .controls{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	padding: 18px 0;
	list-style: none;
}
.gallery .controls .buttons{
	height:35px;
	width: 130px;
	font-size: 16px;
	font-weight: 500;
	line-height: 30px;
	cursor: pointer;
	margin:10px;
	box-shadow: 0 3px 5px rgba(0,0,0,.3);
	text-align: center;
	border-radius: 5px;
	background: var(--gradient-color-bg2);
	color: var(--sideBGColor);
	border-radius: 5px;
	box-shadow: rgba(60,64,67,0.3)0px 1px 2px 0,
					  rgba(60,64,67,0.15)0px 2px 6px 2px;
	transition: all .3s ease;
	cursor: pointer;
	transition: 0.4s ease;
}
.gallery .controls .buttons:hover{
	box-shadow: var(--hover-box-shadow);
}
.gallery .controls .buttons.active{
	background:var(--themeColor);
	box-shadow: var(--hover-box-shadow);
	color:#fff;
}

.gallery .image-container{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}
.gallery .image-container .image{
	height:180px;
	width: 260px;
	overflow: hidden;
	/* border:15px solid #fff; */
	box-shadow: 0 3px 5px rgba(0,0,0,.3);
	margin: 10px;
	border-radius: 10px;
}
.gallery .image-container .image img{
	height: 100%;
	width:100%;
	object-fit: cover;
	transition: 0.4s ease;
}
.gallery .image-container .image:hover img{
	transform: scale(1.1);
}

@media only screen and (max-width: 850px){
	#portfolio{
		padding: 40px 15px;
	}
}

#clients{
	padding: 50px 30px;
	background-color: white;
}
#clients .clients-row{
	margin-top: 50px;
}
.blog-box{
	padding: .5rem !important;
	margin-top: 1rem;
}
.blog{
	position: relative;
}
.cards{
	padding: 1rem .1rem;
}
.swiper-wrapper{
	display: flex;
	align-items: center;
}
.card img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: .3s;
}
.card:hover img{
	transform: scale(1.1);
}
.swiper-pagination{
	position: relative !important;
	margin-top: 2rem;
}
.swiper-pagination-bullet{
	height: 10px !important;
	width: 30px !important;
	border-radius: 25px !important;
	background: var(--themeColor) !important;
}
/* --- Mobile view --- */
@media only screen and (max-width: 850px){
	#clients{
		padding: 40px 15px;
	}
}

#contact{
	padding: 50px 30px;
}
#contact .contact-row{
	margin-top: 50px;
	display: flex;
	gap: 20px;
	width: 100%;
}
#contact .contact-row .contact-left{
	flex-basis: 40%;
	min-width: 40%;
	background-color: white;
	box-shadow: 0 0 20px rgba(0, 0, 0, 20%);
	border-radius: 4px;
	padding: 30px;
}
#contact .contact-row .contact-left .icon-box{
	display: flex;
	gap: 15px;
	align-items: center;
	margin: 30px 0;
}
#contact .contact-row .contact-left .icon-box .icon i{
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 2px solid var(--themeColor);
	text-align: center;
	line-height: 47px;
	font-size: 20px;
	color: var(--themeColor);
	transition: 0.5s
}
#contact .contact-row .contact-left .icon-box:hover .icon i{
	background-color: var(--themeColor);
	color: var(--bgColor);
}
#contact .contact-row .contact-left .icon-box .info h4{
	font-size: 18px;
	color: var(--sideBGColor);
	font-weight: 600;
}
#contact .contact-row .contact-left .icon-box .info h4 + p{
	font-size: 14px;
	color: var(--textColor);
	font-weight: 500;
}
#contact .contact-row .contact-right{
	flex-basis: 60%;
	min-width: 60%;
	background-color: white;
	box-shadow: 0 0 20px rgba(0, 0, 0, 20%);
	border-radius: 4px;
	padding: 30px;
	align-content: center;
}
#contact .contact-row .contact-right form{
	text-align: center;
}
#contact .contact-row .contact-right form .input-box{
	display: flex;
	justify-content: space-between;
}
#contact .contact-row .contact-right form .input-box .input-field{
	width: 48%;
}
#contact .contact-row .contact-right form .field .item{
	width: 100%;
	padding: 15px 10px;
	background: transparent;
	border: 2px solid lightgrey;
	outline: none;
	border-radius: 4px;
	margin: 20px 0 20px;
	font-size: 15px;
	font-weight: 500;
	color: var(--textColor);
}
#contact .contact-row .contact-right form .field.error .item{
	border-color: #e20f00;
}
#contact .contact-row .contact-right form .textarea-field .item{
	resize: none;
}
#contact .contact-row .contact-right form button{
	display: flex;
	padding: 12px 32px;
	background: var(--themeColor);
	border: none;
	outline: none;
	border-radius: 4px;
	box-shadow: 0 0 10px var(--themeColor);
	font-size: 16px;
	color: var(--secondTextColor);
	font-weight: 400;
	cursor: pointer;
	transition: 0.5s;
	margin-top: 25px;
}
#contact .contact-row .contact-right form button:hover{
	box-shadow: none;
}
#contact .contact-row .contact-right .field .error-txt{
	font-size: 12px;
	color: #e20f00;
	text-align: left;
	margin: -18px 0 5px;
	display: none;
}
#contact .contact-row .contact-right .field.error .error-txt{
	display: block;
}
#contact .contact-row .contact-right form .field .item:focus,
#contact .contact-row .contact-right form .textarea-field .item:focus{
	border: 2px solid var(--themeColor);
}
#contact .contact-row .contact-right form input[type=submit]{
	background-color: var(--themeColor);
	color: var(--bgColor);
	border: 1.5px solid var(--themeColor);
	font-size: 17px;
	font-weight: 400;
	cursor: pointer;
	margin-top: 20px;
}

@media only screen and (max-width: 850px){
	#contact{
		padding: 40px 15px;
	}
	#contact .contact-row{
		flex-direction: column;
		gap: 10px;
	}
}