/*!
Theme Name: Berman Child
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Template: berman
Description: Description
Version: 1.0.1
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: berman
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Berman is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/


input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea {
	padding: 5px;
}


/*--------------------------------------------------------------
# Variables
--------------------------------------------------------------*/
:root {
  	--black: #231F20;
  	--body: #8A8A8A;
	--blue: #33BCD7;
	--green: #8CC33F;
	--divider:#E4E4E4;
	--light: #F9FAFF;
	--orange: #F07A22;
	--yellow: #D2AA2A;
	--white: #FFFFFF;
	--font:  "Poppins", Sans-serif;
	
}

/* override cta hover */
.elementor-cta:hover .elementor-cta__bg-overlay {
	background-color: rgba(0,0,0,0)!important;
}

/*--------------------------------------------------------------
# Card
--------------------------------------------------------------*/
.industries .green-card .elementor-widget-container:hover,
.green-card:hover{
	transform: translateY(-12px);
	background-color: #8CC33F;
	box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.25);
	border: #8CC33F solid 1px !important;
}

.blue-card:hover {
	transform: translateY(-12px);
	background-color: #33BCD7;
	box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.25);
	border: #33BCD7 solid 1px !important;
}

.brown-card:hover {
	transform: translateY(-12px);
	background-color: #F07A22;
	box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.25);
	border: #F07A22 solid 1px !important;
}
.blue-card .elementor-icon svg path {
	{ fill: #33BCD7;}
}

.brown-card .elementor-icon svg path{
	{ fill: #F07A22;}
}
.green-card .elementor-icon svg path
{ fill: #8CC33F;}

.green-card:hover .elementor-icon svg path,
.blue-card:hover .elementor-icon svg path,
.brown-card:hover .elementor-icon svg path
{ fill: #fff;}
.green-card .elementor-icon svg path
{ fill: #8CC33F;}
.green-card:hover .elementor-icon svg path,
.blue-card:hover .elementor-icon svg path,
.brown-card:hover .elementor-icon svg path
{ fill: #fff;}
.green-card:hover h2,
.green-card:hover .elementor-cta__description,
.green-card:hover .elementor-cta__button,
.blue-card:hover h2,
.blue-card:hover .elementor-cta__description,
.blue-card:hover .elementor-cta__button,
.brown-card:hover h2,
.brown-card:hover .elementor-cta__description,
.brown-card:hover .elementor-cta__button 
{ color: #fff !important;}

.green-card .elementor-cta .elementor-cta__button-wrapper span {
	position:relative;
}
.green-card .elementor-cta .elementor-cta__button-wrapper span:before {
     content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='#8CC33F' d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    right: -27%;
    top: 4px;
}
/*--------------------------------------------------------------
# Container
--------------------------------------------------------------*/

.container-boxed {
	padding: 0 300px;
}


/* For 1920px viewport */
@media (min-width: 1920px) {
	.container-boxed {
		padding: 0 300px;
/* 		padding-left: calc(20px + (300 - 20) * ((100vw - 767px) / (1920 - 767)))!important;
		padding-right: calc(20px + (300 - 20) * ((100vw - 767px) / (1920 - 767)))!important; */
	}
}

/* For 1600px viewport */
@media (min-width: 1600px) {
	.container-boxed {
		padding: 0 200px;
	}
	
}

/* For 1440px viewport */
@media (min-width: 1440px) {
	.container-boxed {
		padding: 0 100px;
	}
}

/* For 1200px viewport */
@media (min-width: 1200px) {
	
}

/* For 1024px viewport */
@media (min-width: 1024px) {
	.container-boxed {
		padding: 0 50px;
	}
}

/* For 767px viewport and smaller (mobile-first design) */
@media (min-width: 767px) {
		.container-boxed {
		padding: 0 50px;
	}
	

} 


/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero-gradient {
	height: 100%;
}

.hero-gradient::before,
.bg-hero::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    height: 100%;
    background: linear-gradient(to left, transparent, #F9FAFF);
    z-index: 1;
}

.hero-gradient img,
.bg-hero{
    position: relative;
    z-index: 0;
}

/*--------------------------------------------------------------
# Testimonial
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/


/* For 1920px viewport */
@media (max-width: 1920px) {
/* 	#main-menu {
		padding: 16px 0;
		padding-left: calc(20px + (300 - 20) * ((100vw - 767px) / (1920 - 767)));
		padding-right: calc(20px + (300 - 20) * ((100vw - 767px) / (1920 - 767)));
	} */

}

/* For 1600px viewport */
@media (max-width: 1600px) {
/* 	.text-headlines-100 h1.elementor-heading-title,
	.text-headlines-100 h2.elementor-heading-title {
		font-size: 64px;
		line-height: 64px;
	} */
}

/* For 1440px viewport */
@media (max-width: 1440px) {

}

/* For 1200px viewport */
@media (max-width: 1200px) {

}

/* For 1024px viewport */
@media (max-width: 1024px) {

}

/* For 767px viewport and smaller (mobile-first design) */
@media (max-width: 767px) {
	.elementor-cta__bg {
		background-size: contain!important;
		background-repeat: no-repeat!important;
	}
} 


/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/


#main-menu {
/* 	padding: 16px 300px; */
/* 	padding: 16px 0;
	padding-left: calc(20px + (300 - 20) * ((100vw - 767px) / (1920 - 767)));
  	padding-right: calc(20px + (300 - 20) * ((100vw - 767px) / (1920 - 767))); */
}

#main-menu .e-n-menu-wrapper {
	background: white;
	padding: 0;
}

#main-menu .company-logo img {
	width: 321px;
	height: auto;
}

#main-menu .main-menu {
	margin-left: auto;
}

#main-menu .main-menu ul li {
	margin-inline-end: clamp(16px, 0.625vw, 32px); /* Adjusts padding dynamically */
}
/* 
#main-menu .main-menu ul li a {
	font-size: 16px;
	line-height: 24px;
} */

#main-menu .menu-items li span,
#main-menu .menu-items li a span {
    padding-top: 10px;
    padding-bottom:10px;
    padding-left: 16px;
}

#main-menu .menu-items li:hover {
/*     background-color: #F9FAFF;
	border-radius: 5px; */
}

#main-menu .menu-items.has-category li:first-child span,
#main-menu .menu-items.has-category li:first-child a span {
    color: var(--green);
    font-weight: 700;
}

/* For 1920px viewport */
@media (max-width: 1920px) {
/* 	#main-menu .company-logo img {
		width: 321px;
	} */
	
}

/* For 1600px viewport */
@media (max-width: 1600px) {
	
	#main-menu .main-menu {
		margin-left: none;
	}
	
}

/* For 1440px viewport */
@media (max-width: 1440px) {
/* 	#main-menu .company-logo img {
		width: 321px;
	} */
}

/* For 1200px viewport */
@media (max-width: 1200px) {
/* 	#main-menu .company-logo img {
		width: 260px;
	} */
}

/* For 1024px viewport */
@media (max-width: 1024px) {
	
	#main-menu .e-n-menu-wrapper {
		padding: 10px 0px;
	}
	
	#main-menu .company-logo img {
		width: 300px;
	}
}

/* For 767px viewport and smaller (mobile-first design) */
@media (max-width: 767px) {
	#main-menu .company-logo img {
		width: 240px;
	}
} 


/*--------------------------------------------------------------
# Button Styles
-------------------------------------------------------------*/

/* For 1600px viewport */
@media (max-width: 1600px) {

}

/* For 1440px viewport */
@media (max-width: 1440px) {

}

/* For 1200px viewport */
@media (max-width: 1200px) {

}

/* For 1024px viewport */
@media (max-width: 1024px) {

}

/* For 767px viewport and smaller (mobile-first design) */
@media (max-width: 767px) {

} 


/*--------------------------------------------------------------
# 
--------------------------------------------------------------*/

.move-up {
   transition:all .4s ease;
}

.move-up:hover {
    transform: translateY(-16px);
    transition:all .4s ease;
/* 	background: var(--light); */
}

.page-content p {
	margin: 0!important;
	padding: 0!important;
}




/*--------------------------------------------------------------
# Accordion Styles
--------------------------------------------------------------*/
.accordion-style-4 details:first-child summary {
	border-color: var(--orange);
}

.accordion-style-4 details:nth-child(2) summary {
	border-color: var(--green);
}

.accordion-style-4 details:nth-child(3)  summary {
	border-color: var(--blue);
}

.accordion-style-4 details:nth-child(4)  summary {
	border-color: var(--yellow);
}

.accordion-style-4 details:nth-child(5)  summary {
	border-color: var(--orange);
}


/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/



/*--------------------------------------------------------------
# Card
--------------------------------------------------------------*/
.child-pages {
	display: flex!important;
	justify-content: center!important;
	width: 1920px!important;
}
.child-pages .elementor-widget-container {
	display: flex;
	flex-direction:row;
	flex-wrap: wrap;
	row-gap: 40px;
	column-gap: 20px;
	width: 1320px;
}

.loop-item {
	font-family: Poppins;
	width: 49.24%;
	border-radius: 10px;
	border-color:#231F2033;
}

.loop-item div{
	padding: 32px 40px 64px 40px;
}

.loop-item img {
	height: 275px;
	object-fit: cover;
	width: 100%x;
	max-width: 100%;
	border-top-left-radius: 10px!important;
	border-top-right-radius: 10px!important;
}

.loop-item h5 {
	font-size: clamp(20px, 3vw, 32px)!important;
font-weight: 275!important;
color: #231F20!important;
line-height: 48px;
}

.loop-item p {
	font-size: 18px;
	font-weight: 400;
	margin-bottom: 30px;

}

.loop-item a {
	font-size: 18px;
	font-weight: 400!important;
	line-height: 27px;
}


/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
 #footer .footer-links ul li:first-child span.elementor-icon-list-text {
    font-size: 16px;
    color: #FFFFFF;
    font-weight: 400;
    line-height: 24px;
	 margin-bottom: 4px;
}

#footer .footer-address {
	margin: 0 24px 0 auto;
}

@media only screen and (max-width : 1024px) {
    #footer .footer-address {
		margin: 0;
	}
}


#footer .social-links .elementor-icon-wrapper {
	line-height: 0;
}


/*--------------------------------------------------------------
# Media Resource
--------------------------------------------------------------*/
ul.media-resources {
	list-style: none;
	padding: 0;
	margin: 0;
}

ul.media-resources li {
	width: 100%;
	display: flex;
	justify-content: between;
	color: var(--blue);
	border-bottom: 1px solid var(--divider);
	padding: 12px 0;
}

ul.media-resources li span {
	width: 70%;	
}

ul.media-resources li a,
ul.media-resources li a:hover,
ul.media-resources li a:focus,
ul.media-resources li a:visited{
	color: var(--blue);
}


/*--------------------------------------------------------------
# Mega Menu & Footer Link Color Fix
# Overrides Bootstrap default blue on .elementor-icon-list-item a
--------------------------------------------------------------*/
#main-menu .menu-items .elementor-icon-list-item a {
    color: var(--body);
    text-decoration: none;
    transition: color 0.3s;
}

#main-menu .menu-items .elementor-icon-list-item a:hover {
    color: var(--blue);
}

#main-menu .menu-items.has-category .elementor-icon-list-item:first-child a {
    color: var(--green);
    font-weight: 700;
}

#footer .footer-links .elementor-icon-list-item a {
    color: var(--body);
    text-decoration: none;
    transition: color 0.3s;
}

#footer .footer-links .elementor-icon-list-item a:hover {
    color: var(--blue);
}

#footer .footer-links ul li:first-child a {
    color: var(--white);
}