/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

:root{
	--cl-x: #598048;
	--cl-y: #ed2024;
	--fs-title: clamp(1.25rem, 1.05rem + 1vw, 2.25rem);
}



body{
	line-height: normal;
}

p:last-of-type{
	
}

[class*="fa-"]:not(.fab):before{
	font-family: "Font Awesome 6 Pro";
}

.row:after{
	content: unset;
}

.row-inner-full > .col > .col-inner{
	height: 100%;
}

.row-slider .flickity-slider > .col{
	padding-bottom: 0 !important;
}

.row.row-x-small{
	max-width: calc(1450px - 50px);
}

.row-x-small>.col,
.row-x-small>.flickity-viewport>.flickity-slider>.col{
	margin-bottom: 0;
    padding: 0 4px 8px;
}

.button{
	min-height: unset;
}

.btn-custom{
	display: inline-block;
	min-height: unset;
	margin: 0;
	padding: 0.5rem 2rem;
	border: none;
	border-radius: 0.5rem;
	line-height: normal !important;
	font-size: clamp(0.75rem, 0.7rem + 0.25vw, 1rem);
	font-weight: 500;
	transition: all 1s cubic-bezier(.1,.9,.26,.91);
	overflow: hidden;
}

.btn-custom span{
	position: relative;
	z-index: 1;
}
.btn-custom span:after{
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	width: 10rem;
	height: 10rem;
	transform: translateX(-50%);
	background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #41533a 50%, rgba(255, 255, 255, 0) 100%);
	border-radius: 50%;
	transition: all 1s cubic-bezier(.1,.9,.26,.91);
	z-index: -1;
}

.btn-custom:hover{
	box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.btn-custom:hover span:after{
	top: -2rem;
	transform: scaleX(3);
}


.btn-x{
	background-color: var(--cl-x);
	color: #fff;
	border-color: var(--cl-x);
}

.btn-x:hover{
	color: #fff;
}

.btn-x-grd{
	background: linear-gradient(180deg, #81D25E -55.63%, #426C30 155.63%);
}

.btn-blue-grd{
	background: linear-gradient(87deg, #00F6FF -3.04%, #023DFF 118.99%);
}

.justify-content-between{
	justify-content: space-between;
}

.section.has-grd .section-bg:before,
.section.has-grd .section-bg:after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 20%;
}

.section.has-grd .section-bg:before{
    top: 0;
    background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.00) 60%);
}

.section.has-grd .section-bg:after{
    bottom: 0;
    background: linear-gradient(0deg, #FFF 0%, rgba(255, 255, 255, 0.00) 60%);
}

.section-no-relative .section-content{
	position: unset !important;
}


.svg-clip-path {
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 0;
}

.rank-math-breadcrumb{
	padding: 0.75rem;
	background: rgba(89, 128, 72, 0.10);
	text-align: center;
	font-size: clamp(0.75rem, 0.7rem + 0.25vw, 1rem);
}

.rank-math-breadcrumb p{
	margin-bottom: 0;
}

.rank-math-breadcrumb span.last{
	color: var(--cl-x);
}




/*===*/
.header.on-scroll{
	position: sticky;
	left: 0;
	right: 0;
	top: 0;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
	transition: all .3s cubic-bezier(.17,.65,.13,.99);
}

ul.header-nav li.menu-item.active a{
	color: var(--cl-y);
}

/*===*/
ul.header-nav{
	gap: 1rem;
}

ul.header-nav li.menu-item{
	margin: 0;
}

ul.header-nav li.menu-item:before{
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--cl-x);
	border-radius: 50rem;
	z-index: -1;
	opacity: 0;
	transition: all .3s cubic-bezier(.17,.65,.13,.99);
}

ul.header-nav li.menu-item:after{
	content: "";
	position: absolute;
	inset: 1px 0;
	z-index: -1;
	background-color: #fff;
	border-radius: 50rem;
	opacity: 0;
	transition: all .3s cubic-bezier(.17,.65,.13,.99);
}

ul.header-nav li.menu-item.active:before,
ul.header-nav li.menu-item.active:after,
ul.header-nav li.menu-item:hover:before,
ul.header-nav li.menu-item:hover:after{
	opacity: 1;
}


ul.header-nav li.menu-item.active:hover:after{
	transform: scaleY(0);
}


ul.header-nav li.menu-item a{
	padding: 0.5rem 1rem;
	font-size: clamp(1rem, 0.975rem + 0.125vw, 1.125rem);
	color: #000;
	font-weight: 400;
	line-height: normal;
	position: relative;
	border-radius: 50rem;
	transition: all .3s cubic-bezier(.17,.65,.13,.99);
}

ul.header-nav li.menu-item.active a{
	color: var(--cl-x);
}

ul.header-nav>li.menu-item>a:before{
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 0.325rem;
	height: 0.325rem;
	border-radius: 50%;
	background-color: var(--cl-x);
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: all .3s cubic-bezier(.17,.65,.13,.99);
	transform-origin: left;
}

ul.header-nav>li.menu-item>a:after{
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 0.325rem;
	height: 0.325rem;
	border-radius: 50%;
	background-color: var(--cl-x);
	transform: translate(50%, -50%);
	opacity: 0;
	transition: all .3s cubic-bezier(.17,.65,.13,.99);
}

ul.header-nav>li.menu-item.active>a:hover{
	color: #fff;
}

ul.header-nav>li.menu-item.active>a:before,
ul.header-nav>li.menu-item.active>a:after,
ul.header-nav>li.menu-item:hover>a:before,
ul.header-nav>li.menu-item:hover>a:after{
	opacity: 1;
}


ul.header-nav>li.menu-item.active>a:hover:before{
	transform: translate(0%, -50%);
}

ul.header-nav>li.menu-item.active>a:hover:after{
	transform: translate(0%, -50%);
}



.header-search .icon-search{
	color: #000;
}

.searchform-wrapper input[type=search]{
	box-shadow: none;
	border-top-left-radius: 0.5rem;
	border-bottom-left-radius: 0.5rem;
	font-size: 1.25rem;
}

.searchform-wrapper:not(.form-flat) .submit-button{
	background-color: var(--cl-x);
	border-top-right-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
	font-size: 1.25rem;
}

.searchform-wrapper:not(.form-flat) .submit-button i{

}


.icon-menu{
	color: #000;
}



.main-slide{
	clip-path: url("#clip-path-main-slide");
}

.box-content-slide h2{
	font-size: clamp(1rem, 0.8rem + 1vw, 2rem);
}

.img-slide-1{
	animation: bounceY 5s infinite ease-in-out;
}

.img-slide-2{
	position: absolute;
	right: 17%;
	bottom: 4%;
	animation: bounceY 4s infinite ease-in-out;
}

.img-slide-3{
	position: absolute;
	right: -2%;
	bottom: 0;
	animation: bounceY 6s infinite ease-in-out;
}

.img-slide-4{
	position: absolute;
	right: -10%;
	bottom: 20%;
	animation: bounceY 7s infinite ease-in-out;
}


@keyframes bounceY {
  0%   { transform: translateY(0); }
  25%  { transform: translateY(-5px); }
  50%  { transform: translateY(5px); }
  75%  { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}


.box-content h2{
	font-size: var(--fs-title);
}




.img-has-circle-cover{
	/*background-color: #E4F5E8;*/
	
}

.img-has-circle-cover .img-inner{
    background-size: cover;
    height: auto;
    overflow: hidden;
    padding-top: 100%;
    position: relative;
}

.img-has-circle-cover .img-inner img{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.wrapper-img-circle{
	position: relative;
	z-index: 1;

}

.circle-img-cover-before{
	position: absolute;
	left: 0;
	top: 50%;
	width: 110%;
	height: 110%;
	z-index: -1;
	transform: translateY(-50%) rotate(-20deg);
	background-color: #E4F5E8;
	border-radius: 50%;
}

.circle-img-cover-before:after{
	--dot: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	width: var(--dot);
	height: var(--dot);
	background: linear-gradient(180deg, #81D25E -55.63%, #426C30 155.63%);
	border-radius: 50%;
	transform: translate(-50%, 50%);
}


.circle-img-cover-after{
	position: absolute;
	left: -5%;
	top: -5%;
	width: 110%;
	height: 110%;
	border: 2px dashed var(--cl-x);
	border-radius: 50%;
	z-index: -2;
	transform: rotate(-45deg);
}

.circle-img-cover-after:after{
	--dot: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: var(--dot);
	height: var(--dot);
	background: linear-gradient(180deg, #81D25E -55.63%, #426C30 155.63%);
	border-radius: 50%;
	transform: translate(-50%, -50%);
}


.label-dot{
	margin-bottom: 1rem !important;
	position: relative;
	color: var(--cl-x);
	font-size: clamp(1rem, 0.975rem + 0.125vw, 1.125rem);
	font-weight: 600;
}

.label-dot:after{
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: #fff;
	border-radius: 50rem;
}

.label-dot:before{
	content: "";
	position: absolute;
	inset: -2px 0;
	z-index: -1;
	background-color: var(--cl-x);
	border-radius: 50rem;
}

.label-dot .inner-label{
	position: relative;
	padding: 0.5rem 2rem;
}

.label-dot .inner-label:before,
.label-dot .inner-label:after{
	--w-dot: 0.5rem;
	content: "";
	position: absolute;
	top: 50%;
	width: var(--w-dot);
	height: var(--w-dot);
	background-color: var(--cl-x);
	border-radius: 50%;
}

.label-dot .inner-label:before{
	left: 0;
	transform: translate(-50%, -50%);
}

.label-dot .inner-label:after{
	right: 0;
	transform: translate(50%, -50%);
}


/*===*/
.box-icon-round{
	height: 100%;
	padding: 10% 5%;
	border: 1px solid var(--cl-x);
	border-radius: 1rem;
}

.box-icon-round h3{
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
}




.wrapper-developer .col-inner{
	border-radius: 1.5rem;
	background-image: url('/wp-content/themes/flatsome-child/images/bg-developer.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.wrapper-developer .circle-img-cover-before{
	width: 100%;
	height: 100%;
}

.wrapper-developer .circle-img-cover-after{
	width: 100%;
	height: 100%;
	left: 20%;
	transform: rotate(-90deg);
}


.box-icon-process .icon-box-text{
	display: flex;
	align-items: center;
	gap: 1.5rem;
	font-size: 1.125rem;
}

.box-icon-process .icon-box-text h3{
	position: relative;
	width: auto;
	margin-bottom: 0;
	font-size: 3rem;
	color: transparent;
	font-style: italic;
	font-weight: 700;
	-webkit-text-stroke-width: 1px;
  	-webkit-text-stroke-color: #598048;
}

.box-icon-process .icon-box-text h3:after{
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: -1;
	width: 3rem;
	height: 3rem;
	background: linear-gradient(0deg, #81D25E -48.07%, rgba(66, 108, 48, 0.00) 96.36%);
	border-radius: 50%;
	transform: translateX(70%);
}


.img-cover-project{
	position: absolute;
	left: 50%;
	top: 20%;
	transform: translateX(-50%);
	pointer-events: none;
}

.img-cover-project.img-1{
	position: absolute;
	left: 0;
	top: 70%;
	width: 10rem;
	height: 10rem;
	background: linear-gradient(0deg, #81D25E -48.07%, rgba(66, 108, 48, 0.00) 96.36%);
	border-radius: 50%;
}

.img-cover-project.img-2{
	position: absolute;
	top: 5%;
	left: 95%;
	width: 5rem;
	height: 5rem;
	background: linear-gradient(0deg, #81D25E -48.07%, rgba(66, 108, 48, 0.00) 96.36%);
	border-radius: 50%;
}

.img-cover-project.img-3{
	position: absolute;
	top: 5%;
	left: 40%;
	width: 2rem;
	height: 2rem;
	background: linear-gradient(0deg, #81D25E -48.07%, rgba(66, 108, 48, 0.00) 96.36%);
	border-radius: 50%;
}



/*====*/
.wrapper-inner-footer>.col-inner{
	border-radius: clamp(1.5rem, 1.4rem + 0.5vw, 2rem);
	background-image: url('/wp-content/themes/flatsome-child/images/bg-footer.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}


.col-footer h3{
	position: relative;
	margin-bottom: 1rem;
	font-size: clamp(1.125rem, 1.1rem + 0.125vw, 1.25rem);
	font-weight: 600;
}

.col-footer p{
	margin-bottom: 0.75rem;
}

.col-footer ul{
	margin-bottom: 0;
	margin-bottom: 0;
	list-style: none;
	list-style-position: inside;
}

.col-footer ul li{
	margin: 0;
}

.col-footer:not(.col-social) ul li + li{
	margin-top: 0.75rem;
}

.col-footer ul li a{
	position: relative;
	color: #fff;1
}

.col-footer ul li a:after{
	content: "";
	position: absolute;
	left: 0;
	bottom: -0.25rem;
	width: 100%;
	height: 1px;
	background-color: #fff;
	transform: scaleX(0);
	transition: all .3s ease-in-out;
	transform-origin: 0 0;
}

.col-footer ul li a:hover:after{
	transform: scaleX(1.0);
}

.absolute-footer{
	display: none;
}

.follow-icon-footer .icon{
	margin-bottom: 0;
	width: 2.5rem;
	height: 2.5rem;
	min-width: unset;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	color: var(--cl-x);
	border: 0;
	font-size: 1.25rem;
	background-color: transparent !important;
}

.follow-icon-footer .icon i{
	top: 0;
	font-size: inherit;
	line-height: normal;
}



/*===*/
.box-img-download .img-inner{
	padding: clamp(0.75rem, 0.65rem + 0.5vw, 1.25rem) clamp(2rem, 1.8rem + 1vw, 3rem);
	background: linear-gradient(180deg, #81D25E -55.63%, #426C30 155.63%);
	border-radius: clamp(0.5rem, 0.4rem + 0.5vw, 1rem);
	transition: all .3s ease-in-out;
	
}

.box-img-download .img-inner:hover{
	transform: translateY(-0.25rem);
	box-shadow: 0 8px 22px 0.5px #426c30;
}



/*====*/
.box-iframe{
	border-radius: 1rem;
	overflow: hidden;
	height: 400px;
}
.box-iframe iframe{
	width: 100%;
}

.box-text-contact ul{
	list-style: none;
}

.box-text-contact ul li{
	margin-left: 0;
}

.wrapper-form-contact .form-control{
	padding: clamp(1rem, 0.95rem + 0.25vw, 1.25rem) 1rem;
	height: unset;
	background-color: #F0F0F0 !important;
	border: 1px solid transparent;
	border-radius: clamp(0.5rem, 0.4rem + 0.5vw, 1rem);
	box-shadow: none !important;
}

.wrapper-form-contact .form-control:focus{
	border: 1px solid var(--cl-x);
}

.wrapper-form-contact .btn-custom{
	margin: 0;
	padding: clamp(0.5rem, 0.4rem + 0.5vw, 1rem) 3rem;
	border: 0;
	border-radius: 1rem;
}



.wpcf7-form{
	margin-bottom: 0;
}

.cf7-button{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.wrapper-form-contact .wpcf7-spinner {
   width: 40px;
   height: 19.2px;
   background: radial-gradient(circle closest-side, var(--cl-x) 90%,#0000) 0%   50%,
          radial-gradient(circle closest-side, var(--cl-x) 90%,#0000) 50%  50%,
          radial-gradient(circle closest-side, var(--cl-x) 90%,#0000) 100% 50%;
   background-size: calc(100%/3) 9.6px;
   background-repeat: no-repeat;
   animation: dots-7ar3yq 1s infinite linear;
   border-radius: 0;
   opacity: 1;
}

.wrapper-form-contact .wpcf7-spinner:before{
	content: unset;
}

@keyframes dots-7ar3yq {
   20% {
      background-position: 0%   0%, 50%  50%,100%  50%;
   }

   40% {
      background-position: 0% 100%, 50%   0%,100%  50%;
   }

   60% {
      background-position: 0%  50%, 50% 100%,100%   0%;
   }

   80% {
      background-position: 0%  50%, 50%  50%,100% 100%;
   }
}


.wpcf7 form .wpcf7-response-output{
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0.25rem;
	color: #598048;
}

.follow-icon-contact{
	display: flex;
	gap: 0.25rem;
	margin-top: 1rem;
	padding-top: 1.5rem;
	border-top: 1px dashed; #DCDCDC;
}


.follow-icon-contact .icon{
	min-width: unset;
	width: 2.25rem;
	height: 2.25rem;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	background-color: var(--cl-x);
	border: 0;
	color: #fff;
	box-shadow: 1px 2px 2px 0 rgba(0, 0, 0, 0.25);
}

.follow-icon-contact .icon i{
	top: 0;
}


/*===*/
.box-blog{
	padding: 0.25rem;
	border: 1px solid var(--cl-x);
	border-radius: 1rem;
	transition: all .4s ease-in-out;
}

.box-blog:hover{
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.box-blog .box-thumbnail{
	border-radius: 1rem;
	overflow: hidden;
}

.box-blog .box-thumbnail .inner-thumbnail{
	padding-top: 62.5%;
}

.box-blog .box-blog-content{
	padding: 0.5rem 1rem;
}

.box-blog .box-blog-content .box-meta{
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 0.5rem;
	font-size: 0.875rem;
	color: #426C30;
}

.box-blog .box-blog-content .box-meta .author{
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 2px 0.75rem 2px 2px;
	border: 1px solid var(--cl-x);
	border-radius: 50rem;
}
.box-blog .box-blog-content .box-meta .author .avatar{
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
}

.box-blog .box-blog-content .title{
	font-size: 1rem;
	font-weight: 600;
}

.box-blog .box-blog-content .excerpt{
	font-size: 0.875rem;
}

.box-blog .box-blog-content .view-more{
	display: inline-block;
	margin-top: 1rem;
	padding: 0.5rem 1rem;
	background: linear-gradient(180deg, #81D25E -55.63%, #426C30 155.63%);
	border-radius: 0.75rem;
	color: #fff;
	font-size: 0.875rem;
}

.box-blog .box-blog-content .view-more i{
	transition: all .3s ease-in-out;
}

.box-blog .box-blog-content .view-more:hover i{
	transform: translateX(0.325rem);
}



.wrapper-process .item + .item{
	margin-top: 1rem;
}

.wrapper-process .item .label-process{
	display: flex;
	justify-content: space-between;
	margin-bottom: 0.25rem;
}

.wrapper-process .item .line-process{
	--h-line: 0.75rem;
	height: var(--h-line);
	background-color: #D9D9D9;
	border-radius: 50rem;
}

.wrapper-process .item .inner-line-process{
	height: var(--h-line);
	background: linear-gradient(180deg, #81D25E -55.63%, #426C30 155.63%);
	border-radius: 50rem;
}