/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */
/* Body Region */
html,
body {
  overflow-x: hidden;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  max-width: 100%;
}
* {
  scroll-behavior: smooth;
}

.joinchat {
display: none;}

/* Loader */
.mazloader-item-image{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;}
.mazloader-item-image img{
object-fit: contain;}
.mazloader-items .mazloader-item .mazloader-items-wrapper {
padding: 0 !important;}

/* End Body Region */
/* Header Region */
body:not(.elementor-editor-active) .elementor-location-header #main-header {
  /* 	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	display: block; */
  z-index: 9999;
  background-color: #ffffff;
}

.elementor-nav-menu .sub-arrow {
	padding: 10px 0 10px 5px !important;
}
.elementor-nav-menu .sub-arrow i {
    font-size: 11px !important;
}

body:not(.elementor-editor-active) .elementor-location-header #header,
body:not(.elementor-editor-active) .elementor-location-header #top-bar {
  position: relative;
}

body:not(.elementor-editor-active).sticky .elementor-location-header #header {
  position: fixed;
  z-index: 9999;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
  background: #ffffff;
  box-shadow: 6px 6px 25px rgba(0, 0, 0, 0.2);
}

/* Top Ctas	 */
.db-top-cta .elementor-icon-list-item{
transform: scale(1);
transition: transform 0.3s ease;    
}

.db-top-cta .elementor-icon-list-item:hover{
transform: scale(1.05);}

.db-top-cta a,
.db-top-cta svg path{
transition: all 0.3s ease !important; 
}
.db-top-cta .elementor-icon-list-item:hover svg path{ 
fill: #7FB647 !important;    
}
/* Top Ctas End	 */
	
.email-cta p a{
    color: #7FB647;
    font-size: 15px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.email-cta:hover a{
    color: #7FB647 !important;
}

.email-cta svg path {
    fill: #fff !important;
}
.email-cta:hover .elementor-icon{
    background-color: #fff !important;
}
.email-cta:hover svg path {
    fill: #1A6D3F !important;
}
/* Email Cta	 */
	
	.logo-dark{
display: none;}
	
	.header-fixed{
		position: fixed;
		top: 0;
		left: 0;
		background-color: #fff !important;
		box-shadow: 6px 6px 25px rgba(0, 0, 0, 0.2);
	}
	
	.header-fixed .light-cta .elementor-icon-box-title,
	.header-fixed .menu-item a{
		color: #282828 !important;
	}
	
	.header-fixed .menu-item:not(.sub-menu .menu-item):hover > a{
		color: #7FB647 !important;
	}
	
	.header-fixed .top-light{
		background-color: #1A6D3F !important;
	}
	
	 .header-fixed .light-cta .elementor-icon {
		 background-color: #7FB64769 !important;
	}
	.header-fixed .light-cta:hover .elementor-icon {
		 background-color: #7FB64769 !important;
	}
	.header-fixed .light-cta .elementor-icon svg path{
		fill: #1A6D3F !important;
	}

	 #myHeading {
		 display: none;
		 pointer-events: none;
     	transition: opacity 0.5s ease; 
    }

/* main cursor */
#customCursor {
    position: fixed;
      width: 40px;
      height: 40px;
      background-color: #fff;
      border-radius: 50%;
      pointer-events: none;
      display: flex;
			justify-content: center;
			align-items: center;
      z-index: 2;
	opacity: 0;
	pointer-events: none;
}
	#customCursor i{
color: #000;}
/* main cursor */


		#myButton{
			position: relative;
		 border: 2px solid #fff;   
		 background-color: transparent;
			font-size: 14px;
			line-height: 14px;
		 border-radius: 40px;
		 padding: 10px 15px;
			cursor: none;
			outline: none;
			z-index: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 5px;
		}
	
	#myButton i{
font-size: 10px;}

	#myButton:hover{
		 background-color: #fff;
		color: #000;
		}
	#customCursor2 {
      position: fixed;
      width: 10px;
      height: 10px;
      background-color: #000;
      border-radius: 50%;
      pointer-events: none;
      opacity: 0;
      z-index: 2;
    }

/* Preloader CSS*/
#page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #fbfbfb; /* Change background color if needed */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#page-loader img {
	height: auto;
  	max-width: 100%; /* Adjust the size of your loader */
}
/* Preloader ENds*/


@media (max-width:567px){
	body:not(.elementor-editor-active).sticky .elementor-location-header #header {
		top: -2px;
	}
}
/* End Header Region 

/* Defining media query presets for containers max-width */
/* Starting Region */
/* for extra wide sreen */
/* @media (min-width: 2100px) {
  .elementor-section.elementor-section-boxed > .elementor-container,
  .elementor-section.elementor-section-boxed
    > .elementor-container
    > .elementor-section.elementor-section-boxed
    > .elementor-container {
    max-width: calc(1666px - 25%);
  }
}
@media (min-width: 1900px) and (max-width: 2099px) {
  .elementor-section.elementor-section-boxed > .elementor-container,
  .elementor-section.elementor-section-boxed
    > .elementor-container
    > .elementor-section.elementor-section-boxed
    > .elementor-container {
    max-width: calc(1666px - 25%);
  }
}
 */
/* for widescrren  */
@media (min-width: 1600px)  {
  .elementor-section.elementor-section-boxed > .elementor-container,
  .elementor-section.elementor-section-boxed
    > .elementor-container
    > .elementor-section.elementor-section-boxed
    > .elementor-container {
    max-width: calc(1666px - 25%);
  }
	header .elementor-section.elementor-section-boxed > .elementor-container,
	header .elementor-section.elementor-section-boxed > .elementor-container > .elementor-section.elementor-section-boxed > .elementor-container {
    max-width: calc(1666px - 20%);
}
}
/* for laptop screen */
@media (min-width: 1400px) and (max-width: 1599px) {
  .elementor-section.elementor-section-boxed > .elementor-container,
  .elementor-section.elementor-section-boxed
    > .elementor-container
    > .elementor-section.elementor-section-boxed
    > .elementor-container {
    max-width: calc(1666px - 27%);
  }

	header .elementor-section.elementor-section-boxed > .elementor-container,
	header .elementor-section.elementor-section-boxed > .elementor-container > .elementor-section.elementor-section-boxed > .elementor-container {
		max-width: calc(1666px - 20%);
	}
}
/* for normal desktop screen */
@media (min-width: 1200px) and (max-width: 1399px) {
  .elementor-section.elementor-section-boxed > .elementor-container,
  .elementor-section.elementor-section-boxed
    > .elementor-container
    > .elementor-section.elementor-section-boxed
    > .elementor-container {
    max-width: calc(1140px - 6%);
  }
	header .elementor-section.elementor-section-boxed > .elementor-container,
	header .elementor-section.elementor-section-boxed > .elementor-container > .elementor-section.elementor-section-boxed > .elementor-container {
		max-width: calc(1140px);}
}

/* For tablet landscape */
@media (min-width: 900px) and (max-width: 1199px) {
  .elementor-section.elementor-section-boxed > .elementor-container,
  .elementor-section.elementor-section-boxed
    > .elementor-container
    > .elementor-section.elementor-section-boxed
    > .elementor-container {
    max-width: calc(1025px - 8%);
  }
	
}

/* For tablet portraite */
@media (min-width: 667px) and (max-width: 899px) {
  .elementor-section.elementor-section-boxed > .elementor-container,
  .elementor-section.elementor-section-boxed
    > .elementor-container
    > .elementor-section.elementor-section-boxed
    > .elementor-container {
    max-width: calc(768px - 8%);
  }
}

/* For phone/mobile */
@media (min-width: 0px) and (max-width: 666px) {
  .elementor-section.elementor-section-boxed > .elementor-container,
  .elementor-section.elementor-section-boxed
    > .elementor-container
    > .elementor-section.elementor-section-boxed
    > .elementor-container {
    max-width: 100%;
  }
}
/* End Region */

/* Product Slider on Home Region */
.elementor-widget-loop-carousel
  .elementor-swiper-button.elementor-swiper-button-prev
  svg
  path {
  fill: rgba(17, 19, 30, 0.2);
}
/* End  Product Slider on Home Region */
/* Content area padding which is devided into 50% column  */
/* Region Start */
@media (min-width: 1025px) {
	.content__right-padding {
		padding: 10px 25px ;
	}
	.content__left-padding {
		padding: 10px 25px ;
	}
	.content__col-padding {
		padding: 10px 25px;
	}
}


/* Custom Arrow Css */

.custom-arrow .swiper-pagination{
display: flex;
align-items: center !important;
}

.custom-arrow .db-peoject-item img,
.custom-arrow .swiper-pagination-bullet{
transition: all ease 0.3s;
}

.custom-arrow .swiper-pagination-bullet:hover,
.custom-arrow .swiper-pagination-bullet.swiper-pagination-bullet-active{
width: 15px;
height: 15px;
}

.custom-arrow .elementor-widget-image{
overflow: hidden;
border-radius: 20px;
}
.custom-arrow .db-peoject-item:hover img{
transform: scale(1.1);
}

/*Arrows*/

.custom-arrow .swiper-slide{
transition: all 0.3s ease;}

.custom-arrow .elementor-swiper-button{
display: flex;
width: 55px;
height: 55px;
padding: 10px;
justify-content: center;
align-items: center;
transition: all ease 0.3;
position: relative;
transition: all 0.3s ease;}

.custom-arrow .elementor-swiper-button:hover{
width: 58px;
height: 58px;}

.custom-arrow .elementor-swiper-button i{
display: none !important;}

/*Prev button*/
.custom-arrow .elementor-swiper-button-prev{
background-image: url('https://staging.dassobamboo.ae/wp-content/uploads/2024/01/prev-arrow-green.png');
background-size: contain;
background-repeat: no-repeat;}

.custom-arrow .elementor-swiper-button-prev::before{
content: "";
display: inline-block;
border-style: solid;
border-width: 5px 6px 5px 5px;
border-color: transparent #1A6D3F transparent transparent;
position: absolute;
top: 50%;
left: 40%;
transform: translate(-40%, -50%);
transition: all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);}

.custom-arrow .elementor-swiper-button-prev::after{
content: "";
display: block;
position: absolute;
width: 80%;
height: 2px;
left: 25px;
top: 0;
bottom: 0;
margin: auto;
background-color: #1A6D3F;
transition: all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
transform-origin: right center;}

.custom-arrow .elementor-swiper-button-prev:hover::before{
border-color: transparent #282828 transparent transparent;    }

/*Next button*/
.custom-arrow .elementor-swiper-button-next{
background-image: url('https://staging.dassobamboo.ae/wp-content/uploads/2024/01/next-arrow-green.png');
background-size: contain;  
background-repeat: no-repeat;}

.custom-arrow .elementor-swiper-button-next::before{
content: "";
display: inline-block;
border-style: solid;
border-width: 5px 0 5px 6px;
border-color: transparent transparent transparent #1A6D3F;
position: absolute;
top: 50%;
right: 40%;
transform: translate(-30%, -50%);
transition: all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);}

.custom-arrow .elementor-swiper-button-next::after{
content: "";
display: block;
position: absolute;
width: 80%;
height: 2px;
right: 25px;
top: 0;
bottom: 0;
margin: auto;
background-color: #1A6D3F;
transition: all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
transform-origin: right center;}

.custom-arrow .elementor-swiper-button:hover{
filter: brightness(0) invert(1);
    
}

.custom-arrow .elementor-swiper-button-next:hover::before{
border-color: transparent transparent transparent #282828;    }

.custom-arrow .elementor-swiper-button:hover::after{
background-color: #282828;
width: 40%;}