/*
Theme Name: My template-child Child Theme
Theme URI: 
Version: 1.0
Description: 
Author: Rane digital
Author URI: 
Template: Divi
*/

/* New CSS */

.site_bg_primary{
	background-color: #055F22;
}

/*====================
Header
====================*/

.rane-icon {
	display: inline-block;
	position: relative;
}

.rane-icon::before {
	content: "";
	font-family: "ETmodules";
}

.rane-icon--menu::before {
	content: "\61";
	color: #055F21;
}

.rane-icon--phone::before {
	content: "\e090";
	color: #fff;
}

.rane-icon--email::before {
	content: "\e076";
	color: #fff;
}


.section-main-header {
	padding: 0;	
	position: absolute;
	background: rgba(255, 255, 255, .8);
	width: 100%;
}

.top-header{
	padding: 0 10px;
}

.top-header-contact{
	text-align: center;
	color: #fff;
}

.top-header-phone a{
	color: #fff;	
}

.top-header-email a{
	color: #fff;	
}

.main-header {
	display: flex;	
	justify-content: space-between;
	padding:  10px 10px;
	transition:  1s;
}

.site-header-logo {	
	width: 50%;
}

.site-header-logo img {
	width: 100%;
}

.site-header-logo__h1 {
	display: inline !important;
	line-height: 1 !important;
	padding: 0 !important;
	margin: 0 !important;
}

.site-header-hamburger {
	padding: 30px 10px 0 10px;
	width: 15%;
	text-align: right;
	font-size: 32px;
	float: right;
}

.site-header-menu{
	display: none;
}

.et_pb_menu__wrap{
	padding-top: 0.9em;
  float: right;

}

.et-menu .menu-item li a{
	color:  #333;
}

.et-menu .menu-item li a:hover{
	color: #055F22 !important;
}

@media (min-width: 768px){

	.site-header-logo {
		width: 20%;
	}

	.site-header-menu {
		width:  70%;
	}

	.site-header-hamburger {
		padding-top: 20px!important;
		width: 10%;
	}
}

@media (min-width: 980px){

	.main-header, .top-header-container{
		max-width: 1440px;
		margin: auto;
	}

	.top-header-contact{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}

	.top-header-email{
		padding: 0 20px;	
	}
	  
	.site-header-hamburger {
		display: none;
	}

	.site-header-menu {
		display: block;
		width: 100%;
		text-align: center;
		padding: 10px 20px 0 20px;
	}

	.et-menu li {
		display: inline;
		font-size: 16px;
   		padding-left: 22px;
   		text-transform: uppercase;
	}

	.et-l--header ul{
		padding: 0;
	}

}

/********************
 * Menu Dropdowns
********************/

.menu-item ul ul {
  display: none;
  position: absolute;
  line-height: 2em;
  top: 1.5em;
  left: 0;
  background-color: rgba(255, 255, 255, 1);
  min-width: 270px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  padding: 10px 20px 10px 10px;
  border-top: 2px solid #951B81;
  transition: .2s;
}

.et-menu .menu-item .sub-menu li a:hover {
	border-bottom: 0 !important;
	padding-bottom: 0 !important;
}

.menu-item ul li:hover > ul {
  color: black;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.menu-item li {
    position: relative;
}

/********************
 * Slide Out
********************/

.slideout-nav {
	position: fixed;
	left: -250px;
	top: 0;
	width: 250px;
	height: 100%;
	background: #666;
	z-index: 9999;
	transition: 0.2s;
	overflow: hidden;
	overflow-y: scroll;
}

body.admin-bar .slideout-nav {
	top: 46px;
}

.slideout-nav--out {
  left: 0;
}

.slideout-nav__menu,
.slideout-nav .menu {
  padding: 0 !important;
  margin: 0 !important;
  list-style-type: none !important;
}

.slideout-nav .dropdown-item-has-child {
  position: relative;
}

.slideout-nav .dropdown-item-has-child::after {
  content: "\43";
  font-family: "ETModules";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.slideout-nav .dropdown-item-has-child--open::after {
  content: "\42";
}

.slideout-nav a {
  color: white;
  display: block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  padding: 8px 8px 8px 16px;
}

.slideout-nav .dropdown-menu {
  list-style-type: none;
  padding: 0 !important;
  margin: 0 !important;
  height: 0;
  overflow: hidden;
}

.slideout-nav .dropdown-menu--toggle-on {
  height: auto;
  overflow: auto;
}

.slideout-nav .dropdown-menu a {
  background: #353d42;
}

.slideout-nav .close-slideout {
  text-align: right;
  font-size: 24px;
}

.slideout-nav .close-slideout::after {
  content: "\51";
  font-family: "ETModules";
}

.slideout-nav li.menu-item-has-children a {
  border: 2px solid red;
}

/********************
* Home Intro Section
********************/

.home-intro_wrapper{
	display: flex;
	flex-direction: column-reverse;
	gap: 2%;
}

.home-intro_col{
	display: flex;
	flex-direction: column;
	width: 100%;
}

.home-intro_col:nth-child(even){
	flex-direction: column-reverse;
}

.home-intro_image, .home-intro_text{
	padding: 10px 0;
}

@media (min-width: 980px){

	.home-intro_wrapper{
		flex-direction: row;
		gap: 2%;
	}
	.home-intro_col{
		width: 49%;
	}
	.home-intro_col:nth-child(even){
		flex-direction: column;
	}

}


/********************
* Home Product Section
********************/

.om_product_wrapper{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 2%;
}

.product_sub-wrapper{
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	padding-top: 150px;
	margin-bottom: 30px;
}

.product_name{
	background-color: rgba(5,95,34,0.6);
	padding-left: 30px;
	width: 100%;
	transition: .2s;
}

.product_name:hover{
	background-color: rgba(50,50,50,0.6);
}

.product_name h2{
	color: #fff;
	padding-top: 10px;
	padding-bottom: 10px!important;
	font-size: 24px;
}

@media (min-width: 768px){

	.product_sub-wrapper{
		width: 49%;
	}

}

@media (min-width: 980px){

	.product_sub-wrapper{
		width: 32%;
	}

}

/********************
* Home Contact Form
********************/

.frm_style_formidable-style.with_frm_style .frm_submit button{
	float: right;
}

.with_frm_style input, .with_frm_style textarea{
	background-color: rgba(255,255,255,0.6)!important;
}


.om_text_col{
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: auto;
}

/*====================
Panelling Gallery
====================*/


.panelling_gallery_wrapper{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 80%;
	margin: auto;
}

@media (min-width: 980px){

	.panelling_gallery_wrapper{
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
	}

	.panelling_gallery_image{
		width: 33%;
		height: 600px;
		overflow-x: hidden;
		margin-bottom: 5px;
		position: relative;
	}

	.panelling_gallery_image__overlay{
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.5);
		opacity: 0;
		transition: opacity 0.5s;
	}

	.panelling_gallery_image:hover .panelling_gallery_image__overlay{
		opacity: 1;
	}

	.panelling_gallery_image img{
		height: 100%;
		object-fit: cover;
	}

}

@media (min-width: 1280px){

	.panelling_gallery_image{
		width: 24.8%;
	}

}

.certificates_wrapper{
		display: flex;
		flex-direction: column;
	}

	.certificate_container{
		display: flex;
		flex-direction: column;
		width: 100%;
	}



/*====================
Certificates
====================*/

@media (min-width: 768px){

	.certificates_wrapper{
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.certificate_container{
		width: 48.5%;
	}

}

@media (min-width: 1280px){

	.certificate_container{
		width: 32.5%;
	}

}

/*====================
Why choose us section
====================*/

.about_why_title{
	text-align: center;
	padding-bottom: 30px;
}

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

.about_why_content_wrapper{
	width: 80%;
	text-align: center;
	padding-bottom: 30px;
}

.about_why_content_wrapper h3{
	color: #055F21;
}

@media (min-width: 980px){

	.about_why_wrapper{
		flex-direction: row;
		justify-content: space-between;
	}
	.about_why_content_wrapper{
		width: 30%;
	}

}

.about_content ul{
	list-style-image: url('https://oaktree.ranestaging.com/wp-content/uploads/2023/03/list-bullet.png');
}


/*====================
Product Details
====================*/

.product_details_wrapper{
	display: flex;
	flex-direction: column;
}

.product_gallery_wrapper{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	flex-wrap: wrap;
	width: 100%;
	gap: 1%;
}

.product_gallery_image{
	width: 48%;
	margin-bottom: 5px;
}

.product_gallery_image img{
	height: 100%;
	object-fit: cover;
}

.product_text_wrapper{
	width: 100%;
	margin: auto;
	padding-top: 30px;
}


.product_gallery_image__overlay h3{
	visibility: hidden;
}

.product_gallery_single_image{
	width: 100%;
	min-height: 400px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

@media ( min-width: 980px ){

	.product_details_wrapper{
		flex-direction: row;
		justify-content: space-between;
	}

	.product_gallery_wrapper{
		width: 64%;

	}

	.product_text_wrapper{
		width: 34%;
		margin: 0;
		padding-top: 0;
	}

	.product_gallery_image{
		width: 32.5%;
		margin-bottom: 5px;
		position: relative;
	}

	.product_gallery_image__overlay{
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.5);
		opacity: 0;
		transition: opacity 0.5s;
	}


	.product_gallery_image__overlay h3{
		visibility: visible;
		color: #fff!important;
		padding-top: 30px;
		padding-left: 30px;
	}


	.product_gallery_image:hover .product_gallery_image__overlay{
		opacity: 1;
	}

}


.hero-container {
	position: relative;
	/* margin-top: -10vh; */
	z-index:-100;
	width: 100%;
	height: 40vh!important;
	overflow: hidden;
}

.hero-container iframe {
	display: flex;
	position: absolute;
	z-index:-100;
	width: 100%;
	height: 120%;
	top: 0!important;
	border: 0;
}


@media (min-width: 980px) {
	.hero-container {
		height: 50vh!important;
	}
	
	.hero-container iframe {
		top: -5vh!important;
	}
	
}


@media (min-width: 1280px) {
	.hero-container {
		height: 60vh!important;
	}
	
}

@media (min-width: 1440px) {
	.hero-container {
		height: 70vh!important;
	}
	
}

@media (min-width: 1600px) {
	.hero-container {
		height: 80vh!important;
	}	

	.hero-container iframe {
		height: 150%;
		top: -10vh!important;
	}
}

.video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 130%;
  z-index: -1;
}