/*
Theme Name: Sokhani
Version: 1.0
Description: A child theme of Divi
Author: peter@openform.co.za
Template: Divi
*/

@import url("../Divi/style.css");


html, body, #page-container {
	overflow-x:hidden !important;
}

.sl-pl-custom {
	width:100px;
}

#et-main-area li::marker {
	content: "› ";
	font-size: 24px;
}

/*---Hero Section Tiles---*/

@media (min-width: 981px) {
	#hero__slider__home .et_pb_slide_description {
		position: absolute;
		bottom: 0;
		padding-bottom: 180px !important;
	}
}

@media (max-width: 1440px) {
	#hero__slider__home .et_pb_slide_description {
		position: absolute;
		bottom: 0;
		padding-bottom: 100px !important;
	}
}

#hero__slider__home .et_pb_slider .et_pb_slides .et_pb_slide {
	aspect-ratio: 16 / 9 !important;
}


#serv_Hero_01:hover, #serv_Hero_02:hover, #serv_Hero_03:hover, #serv_Hero_04:hover, #serv_Hero_05:hover {
  background-position: center bottom -1px;
  transition:.7s ease-in-out;
}
#serv_Hero_01 .hero-service-01, #serv_Hero_02 .hero-service-02, #serv_Hero_03 .hero-service-03, #serv_Hero_04 .hero-service-04, #serv_Hero_05 .hero-service-05 {
  transform: translate(0px, -20px) !important;
  transition:.4s ease-in-out; 
}

#serv_Hero_01:hover .hero-service-01, #serv_Hero_02:hover .hero-service-02, #serv_Hero_03:hover .hero-service-03, #serv_Hero_04:hover .hero-service-04, #serv_Hero_05:hover .hero-service-05 {
  transform: translate(0px, 0px) !important;
}

#serv_Hero_01 .arrow_up_1, #serv_Hero_02 .arrow_up_2, #serv_Hero_03 .arrow_up_3, #serv_Hero_04 .arrow_up_4, #serv_Hero_05 .arrow_up_5 {
  transform: translate(0px, 60px) !important;
  transition:.2s ease-in;
  opacity:0;
}

#serv_Hero_01:hover .arrow_up_1, #serv_Hero_02:hover .arrow_up_2, #serv_Hero_03:hover .arrow_up_3, #serv_Hero_04:hover .arrow_up_4, #serv_Hero_05:hover .arrow_up_5 {
  transform: translate(0px, 20px) !important;
  transition:.6s ease-out;
  opacity:1;
}

#serv_Hero_01 .button_col_1, #serv_Hero_02 .button_col_2, #serv_Hero_03 .button_col_3, #serv_Hero_04 .button_col_4, #serv_Hero_05 .button_col_5 {
  opacity:0;
  bottom:0px;
  transition:.4s;
}

#serv_Hero_01:hover .button_col_1, #serv_Hero_02:hover .button_col_2, #serv_Hero_03:hover .button_col_3, #serv_Hero_04:hover .button_col_4, #serv_Hero_05:hover .button_col_5 {
  opacity:1;
  bottom:-51px;
}

/*-END--Hero Section Tiles--END-*/


.corner-cut-br .et_pb_image_wrap img {
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 82%, 87% 100%, 0 100%);
  display: inline-block;
}

.corner-cut-bl .et_pb_image_wrap img {
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 13% 100%, 0 82%);
  display: inline-block;
}

.corner-cut-tl-br .et_pb_image_wrap img {
  position: relative;
  clip-path: polygon(13% 0, 100% 0, 100% 82%, 87% 100%, 0 100%, 0 18%);
  display: inline-block;
}





/*----Featured Projects----*/

#homePg__featProj {
	transform: scale(1.5);
    transform-origin: top;
    right: -220px;
}

#homePg__featProj .swiper-navi-container {
	transform: scale(0.6);
    transform-origin: left;
}


#homePg__featProj .swiper-navi-container .swiper-button-prev {
	left: -60px;
}

#homePg__featProj .swiper-slide .carousel_content .position_design, #homePg__featProj .swiper-slide .carousel_content p, #homePg__featProj .swiper-slide .carousel_content .social-media-container {
	display:none !important;
}

/*--#homePg__featProj .swiper-slide {
	width: 70% !important;
	height:auto !important;
}--*/ 

#homePg__featProj .swiper-slide .carousel_content {
	margin-bottom: -6px;
	opacity:0.5;
	transition:.4s ease-in-out;
}

#homePg__featProj .swiper-slide-active .carousel_content {
	margin-bottom: -6px;
	opacity:1;
}

#homePg__featProj .swiper-slide .carousel_content .name_design {
	position: absolute;
    bottom: 0px;
    color: #ffffff;
    font-size: 20px;
    width: 90%;
    padding-bottom: 10px;
    height: auto;
	opacity:0;
	transition:.8s ease-in-out;
}

#homePg__featProj .swiper-slide-active .carousel_content .name_design {
	position: absolute;
    bottom: 30px !important;
    color: #ffffff;
    font-size: 20px;
    width: 90%;
    padding-bottom: 10px;
    height: auto;
	opacity:1 !important;
}


/*--- Contact Form ---*/

.contactForm-wrapper {
	font-family: 'Montserrat';
	font-size: 12px;
}

.contact33 {
	width:calc(33.33% - 3px);
	display: inline-block;
	vertical-align: top;
}

.contact50 {
	width:calc(50% - 2px);
	display: inline-block;
	vertical-align: top;
}
.contact100 {
	width:calc(100% - 2px);
	display: inline-block;
	vertical-align: top;
}

.contactForm-wrapper textarea {
	max-width: 100%;
	min-width: 100%;
	min-height: 97px;
	max-height: 150px;
	height: 97px;
}

.contactForm-wrapper h4 {
	font-family: 'Montserrat';
	text-transform: uppercase;
	letter-spacing: 1px;
	text-align: center;
	font-size: 14px;
	color: #103087;
	margin-top: 20px;
}

.contactForm-checkBook {
	/* 	width: 360px; */
	max-width: 90%;
	display: block;
	line-height: 23px;
	text-align: center;
	margin: 20px auto;
}

.contactForm-checkBook input{
	width:auto !important;
}

.contactForm-wrapper input, .contactForm-wrapper textarea, .contactForm-wrapper select {
	/* 	width:100%; */
	width: calc(100% - 6px);
	border: 1px solid #e5e7ef;
	background: #f6f8fb;
	border-radius: 0;
	padding: 12px;
	line-height: 18px;
	margin: 5px;
	vertical-align: top;
}

.contactForm-check input{
	width:auto !important;
}

.contactForm-submit {
	width: auto !important;
	border-radius: 0px !important;
	font-family: 'Montserrat';
	font-size: 16px;
	color: #015495;
	background: #ffffff !important;
	padding: 10px 26px !important;
	display: inline-block;
	transition:ease-in-out .3s;
	cursor:pointer;
	float:right;
	border:0px !important;
	margin:0px;
	text-transform: uppercase;
	font-weight: 600;
}

.contactForm-submit:hover {
	color: #ffffff;
	background: #7ac143 !important;
	border:0px !important;
}

#popCareers .contactForm-submit {
	width: auto !important;
	border-radius: 0px !important;
	font-family: 'Montserrat';
	font-size: 16px;
	color: #ffffff;
	background: #015495 !important;
	padding: 10px 26px !important;
	display: inline-block;
	transition:ease-in-out .3s;
	cursor:pointer;
	float:right;
	border:0px !important;
	margin:0px;
	text-transform: uppercase;
	font-weight: 600;
	margin-top: 20px;
}

#popCareers .contactForm-submit:hover {
	color: #ffffff;
	background: #7ac143 !important;
	border:0px !important;
}

#popCareers .contactForm-wrapper .wpcf7-list-item .wpcf7-list-item-label {
    color: #333333 !important;
    font-weight: 500;
    top: 4px;
    position: relative;
}

.pum-theme-265, .pum-theme-lightbox {
    background-color: rgba(1, 84, 149, 0.5) !important;
}

.wpcf7-spinner {
	visibility: hidden;
	display: block;
	background-color: #23282d;
	opacity: 0.75;
	width: 24px;
	height: 24px;
	border: none;
	border-radius: 100%;
	padding: 0;
	margin: 0 24px;
	position: relative;
	margin: auto;
}

.contactForm-submitBook {
	width: auto !important;
	border-radius: 100px !important;
	font-family: 'Minion Variable';
	font-style: italic;
	font-size: 20px;
	color: #ffffff;
	background: #0F2D81 !important;
	padding: 10px 26px !important;
	display: inline-block;
	transition:ease-in-out .3s;
	cursor:pointer;
}

.contactForm-submitBook:hover {
	color: #0F2D81;
	background: RGBA(16,48,135,0.2) !important;
}

.wpcf7-list-item-label {
	line-height: 1.2em;
}

.wpcf7-response-output {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: -40px;
	width: 100%;
	text-align: center;
	border: none !important;
	color: #00B4FF;
}

.contactForm-wrapper .wpcf7-list-item .contactForm-check {
    width: 18px !important;
}

.contactForm-wrapper .wpcf7-list-item .wpcf7-list-item-label {
	color:#ffffff !important;
}

.wpcf7-not-valid-tip {
	display: none;
}

@media only screen and (max-width: 600px) {
	.contact100, .contact50, .contact33 {
		width:calc(100% - 2px);
		display: inline-block;
		vertical-align: top;
	}
	.contactForm-checkBook, .contactForm-check {
		width: 100%;
	}
	
}

/*--END- Contact Form -END--*/




/*--Project Grid--*/

.et_portfolio_image .et_overlay {
    opacity: 0 !important;
}

#project__grid .et_pb_portfolio_items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	column-gap: 50px;
	row-gap: 100px;
}

#project__grid .et_pb_portfolio_item {
/*   width: 30.33%; */
	width: 100%;
	margin: 1.5%;
	float: left;
/* 	width:340px; */
}

.et_pb_portfolio_item h2 {
	font-size: 14px;
	line-height: 18px;
	text-transform: uppercase;
	margin-left: -20px !important;
	margin-top: 0px !important;
}

#project__grid::after, #project__grid::before {
	display:none !important;
}

/* Clear every third item */
#project__grid .et_pb_portfolio_item:nth-child(3n+1) {
  clear: both;
}

#project__grid .et_pb_portfolio_item .et_pb_module_header{
	position: absolute;
	font-family: 'Montserrat';
/*     bottom: 20px; */
    width: 100%;
    padding: 20px;
    font-weight: 700;
    color: #015495;
	opacity:1;
	transition:.3s ease-in-out;
}

#project__grid .et_pb_portfolio_item:hover .et_pb_module_header{
	position: absolute;
	font-family: 'Montserrat';
    width: 100%;
    padding: 20px;
    font-weight: 700;

}

#project__grid .et_pb_portfolio_item .et_pb_portfolio_excerpt{
	position: absolute;
	font-family: 'Montserrat';
    bottom: 0;
    height: 100%;
    display: none;
    align-items: anchor-center;
    padding: 20px;
    color: #ffffff;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 13% 100%, 0 82%);
	opacity:0;
	background:rgba(0, 158, 220, 0);
	transition:.3s ease-in-out;
}

#project__grid .et_pb_portfolio_item:hover .et_pb_portfolio_excerpt{
	position: absolute;
	font-family: 'Montserrat';
    bottom: 0;
    height: 100%;
    display: none;
    align-items: anchor-center;
    padding: 20px;
    color: #ffffff;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 13% 100%, 0 82%);
	opacity:1;
	background:rgba(0, 158, 220, 0.6);
}

#project__grid .et_pb_portfolio_item .et_portfolio_image img {
	 position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 13% 100%, 0 82%);
  display: inline-block;
}

#project__grid .et_pb_portfolio_item .et_pb_portfolio_link {
	display:none !important;
}

#project__grid .et_pb_portfolio_filters li a {
	color: #015495;
    font-family: 'Montserrat';
    font-weight: 700;
	padding: 0;
	margin: 0 20px 0 0;
    display: block;
	border:0px !important;
    height: auto;
	overflow:visible !important;
	background:transparent !important;
	border-radius:0px !important;
}

#project__grid .et_pb_portfolio_filters li .active {
	color: #7ac142;
    font-family: 'Montserrat';
    font-weight: 700;
	border-bottom: 2px solid #015495 !important;
}

.et_pb_has_overlay:not(.et_pb_image):hover .et_overlay, .et_portfolio_image:hover .et_overlay, .et_shop_image:hover .et_overlay {
    opacity: 0 !important;
}

/* Responsive adjustments */
@media (max-width: 980px) {
  #project__grid .et_pb_portfolio_item {
    width: 100%;
    margin: 1.5%;
  }
	
	#homePg__featProj {
    	transform: scale(1);
    	transform-origin: center;
    	right: 0px;
	}
	
	#homePg__featProj .swiper-navi-container {
    	transform: scale(1);
    	transform-origin: center;
}
	
	#homePg__featProj .swiper-navi-container .swiper-button-prev {
    	left: 0;
}
	
	#homePg__featProj .swiper-navi-container .swiper-button-next {
		right: 0;
	}
	
}

@media (max-width: 767px) {
	#project__grid .et_pb_portfolio_item {
		width: 100%;
		margin: 0 0 20px 0;
	}

	#project__grid .et_pb_portfolio_filters ul.clearfix {
		display: flex;
		flex-direction: column;
		gap: 15px;
	}
	
	#project__grid .et_pb_portfolio_filters ul.clearfix li.et_pb_portfolio_filter {
		width: max-content;
	}
}

/*--END- Project Grid -END--*/


#menu-primary-menu .menu-item-has-children ul.sub-menu {
	width: 300px !important;
}

#menu-primary-menu .menu-item-has-children ul.sub-menu li {
	width:100% !important;
}

#menu-primary-menu .menu-item-has-children ul.sub-menu li a {
	font-size: 14px !important;
    width: 100% !important;
	line-height: 18px;
	padding: 12px 5px;
}