/*  
Theme Name: ES Studio
Theme URI:
Description: ES Studio
Version: 2.1
 
*/

.media-controls-container {
	display: none!important;
}
*::-webkit-media-controls-panel {
  display: none!important;
  -webkit-appearance: none;
}

/* Old shadow dom for play button */

*::-webkit-media-controls-play-button {
  display: none!important;
  -webkit-appearance: none;
}

/* New shadow dom for play button */

/* This one works! */

*::-webkit-media-controls-start-playback-button {
  display: none!important;
  -webkit-appearance: none;
}
video::-webkit-media-controls {
  display: none;
}

/* Could Use thise as well for Individual Controls */
video::-webkit-media-controls-play-button {}

video::-webkit-media-controls-volume-slider {}

video::-webkit-media-controls-mute-button {}

video::-webkit-media-controls-timeline {}

video::-webkit-media-controls-current-time-display {}
body {
	max-width: 1920px;
	margin-left: auto;
	margin-right: auto;
	font-family: 'Wix Madefor Display', sans-serif;
	background-color: #fcfcff;

}

a {
	color: inherit;
	text-decoration: none;
}

.container {
	max-width: 1600px;
	overflow: hidden;

}
header {
	position: relative;
	z-index: 10;
}
.navbar {
	justify-content: space-between;
	background-color: inherit;
}
#navbarNav {
	justify-content: center;
}
.navbar {
	padding-left: 30px;
	padding-right: 30px;
}
.navbar-nav {
	align-items: center;
}
.navbar .nav-link {
	font-size: 18px;
	line-height: 1;
	font-weight: 400;
	text-align: center;
	transition:  .3s all;
	color: #000000;
	position: relative;
}
.navbar .nav-link::after {
	content: '';
	position: absolute;
	width: 100%;
	transform: scaleX(0);
	height: 2px;
	bottom: -4px;
	left: 0;
	background-color: #000000;
	transform-origin: bottom left;
	transition: transform 0.25s ease-out;
}

.navbar .nav-link:hover::after {
	transform: scaleX(1);
	transform-origin: bottom left;
}
.navbar-expand-lg .navbar-nav .nav-link {
	padding-right: 0px;
	padding-left: 0px;
	margin-left: 20px;
	margin-right: 20px;
}
.head-contacts img{
	width: 35px;
}
.navbar-brand {
	padding: 16px 0;
}
#head-logo {
	width: 224px;
	max-width: 100%;
	height: auto;
}

#home-top {
	padding: 70px 15px 78px;
	background-image: url('img/map.svg');
	background-color: #141e24;
	border-radius: 20px;
	margin-top: 32px;
	margin-bottom: 70px;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #fff;
	text-align: center;
}

#home-top  img {
	width: 856px;
	max-width: 100%;
	margin-bottom: 50px;
}
#home-top h1 {
	margin-bottom: 50px;
	font-size: 50px;
	line-height: 1;
}
#home-top p {
	font-size: 20px;
	line-height: 28px;
	width: 476px;
	max-width: 100%;
	margin-bottom: 45px;
}
#home-top .btn {
	background-color: #be2025;
	color: #fff;
	font-size: 24px;
	line-height: 1;
	padding: 20px 68px;
	border-radius: 12px;
}
.section-content {
	width: 1200px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.section-title {
	font-size: 30px;
	line-height: 1;
	color: #303131;
	margin-bottom: 60px;
}

#about {
	margin-bottom: 40px;
}
#about .logo {
	width: 677px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 60px;
}

#about h4 {
	font-size: 50px;
	line-height: 1;
	text-align: center;
	font-weight: 400;
	margin-bottom: 60px;
	    height: 150px;
    display: flex
;
    align-items: center;
}
#about p {
	font-size: 20px;
	line-height: 28px;
	text-align: left;
	font-weight: 400;
	margin-bottom: 20px;
	width: 470px;
	max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}


#middle-logo-section {
	min-height: 450px;
	background-image: url('img/es_studio.svg');
	background-repeat: no-repeat;
	background-position: center 140%;
	background-color: #141e24;
	padding: 110px 15px 0;
	margin-bottom: 85px;
}
#middle-logo-section h2 {
	width: 1130px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	line-height: 1;
	font-size: 35px;
	color: #ffffff;
	text-align: center;
}

#philosophy .section-title {
	margin-bottom: 80px;
}
#philosophy {
	margin-bottom: 110px;
}
#philosophy h2 {
	font-size: 50px;
	line-height: 1;
	text-align: center;
	margin-bottom: 30px;
}
.line-text {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}
#philosophy .line-text img {
	width: 190px;
	height: auto;
	margin-left: 35px;
	margin-right: 35px;
	margin-top: 25px;
}
#philosophy .line-text p {
	margin-bottom: 0;
	font-size: 80px;
	line-height: 1;
}
#philosophy .section-content > p {
	font-size: 20px;
	line-height: 1;
	width: 440px;
	max-width: 100%;
	margin-left: auto;
    margin-right: 40px;
}
#philosophy .section-content > p span {
	background-color: #be2025;
	color: #ffffff;
	padding: 0 10px;
	position: relative;
	z-index: 2;
}
#philosophy .section-content > p span:last-child {
	z-index: 1;
	position: relative;
}

#general {
	padding-bottom: 60px;
	padding-top: 60px;
	background-image: url('img/map_sphera.svg');
	background-color: #f0f3f9;
	background-repeat: no-repeat;
	background-position: center 90px;
	background-size: 1300px;
}
#general h2 {
	font-size: 60px;
	line-height: 1;
	margin-bottom: 60px;
	width: 660px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
#general .single-item {
	transition: all .3s;
	height: 680px;
	padding: 54px 30px;
	color: #ffffff;
	background-repeat: no-repeat;
	background-size: cover;
}
#general .single-item p {
	font-size: 14px;
	line-height: 1;
	margin-bottom: 20px;
	text-transform: uppercase;
}
#general .single-item h4 {
	font-size: 26px;
	line-height: 28px;
	margin-bottom: 20px;
}
#general-export {
	background-image: url(img/IMG/01_export.webp);
}
#general-export:hover {
	background-image: url(img/IMG/01_export_hover.webp);
}

#general-marketing {
	background-image: url(img/IMG/02_marketing.webp);
}
#general-marketing:hover {
	background-image: url(img/IMG/02_marketing_hover.webp);
}
#general-document {
	background-image: url(img/IMG/03_doc.webp);
}
#general-document:hover {
	background-image: url(img/IMG/03_doc_hover.webp);
}
#general-consulting {
	background-image: url(img/IMG/04_cons.webp);
}
#general-consulting:hover {
	background-image: url(img/IMG/04_cons_hover.webp);
}
#general > p {
	font-size: 40px;
	line-height: 45px;
	width: 650px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.owl-general {
	margin-bottom: 60px;
}

#service {
	padding-top: 70px;
	padding-bottom: 108px;
}
#service .col-md-6 {
	margin-bottom: 15px;
}
#service .single-item {
	display: flex;
	align-items: center;
	border-radius: 20px;
	padding: 30px 30px;
	background-color: #f5f5f7;
	transition: all .3s;
    height: 100%;

}
/*#service .single-item:hover {
	background-color: #2f3c44;
	color: #ffffff;

}*/
#service .single-item img {
	width: 42px;
	height: auto;
}
#service .single-item p {
	margin-bottom: 0;
	font-size: 22px;
	line-height: 26px;
	padding-left: 44px;
}


#who {
	margin-bottom: 30px;
}
#who .col-md-3 {
	margin-bottom: 30px;
}
#who .single-item {
	aspect-ratio: 1 / 1;
	background-color: #2f3c44;
	border-radius: 20px;
	padding: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	position: relative;
}
#who .single-item .logo {
	width: 120px;
    height: 120px;
	background-size: contain;
	margin-bottom: 50px;
	position: absolute;
	top: 30%;
	left: 50%;
	transform: translateX(-50%);
}
#who .col-md-3:nth-child(1) .logo {
	background-image: url('img/ICON-2/01_icon_help.svg');

}
#who .col-md-3:nth-child(2) .logo {
	background-image: url('img/ICON-2/02_icon_help.svg');

}
#who .col-md-3:nth-child(3) .logo {
	background-image: url('img/ICON-2/03_icon_help.svg');

}
#who .col-md-3:nth-child(4) .logo {
	background-image: url('img/ICON-2/04_icon_help.svg');

}
#who .col-md-3:nth-child(5) .logo {
	background-image: url('img/ICON-2/05_icon_help.svg');

}
#who .col-md-3:nth-child(6) .logo {
	background-image: url('img/ICON-2/06_icon_help.svg');

}
#who .single-item p {
	font-size: 22px;
	text-align: center;
	line-height: 25px;
	color: #ffffff;
	    margin-top: auto;
}


#bottom-info {
	padding: 60px 15px;
	background-color: #f5f5f7;
}
#bottom-info .section-title {
	text-align: center;
}
#bottom-info .logo {
	overflow: hidden;
	text-align: center;
	margin-bottom: 60px;
}
#bottom-info .logo img{
	max-width: 100%;
}
#bottom-info .col-md-4 {
	margin-bottom: 30px;
}
#bottom-info .single-item {
	height: 100%;
	min-height: 98px;
	background-color: #ffffff;
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .3s;
	margin-left: 12px;
	margin-right: 12px;

}
#bottom-info .single-item:hover {
	background-color: #2f3c44;
	color: #ffffff;
}
#bottom-info .single-item p {
	margin-bottom: 0;
	text-align: center;
	font-size: 22px;
	line-height: 24px;
	max-width: 80%;
}

#contact-section {
	padding-top: 94px;
}
#contact-section .section-title {
	text-align: center;
	font-size: 40px;
	line-height: 1;
	margin-bottom: 70px;
	font-weight: 400;
}
#contact-section input{
	max-width: 100%;
	width: 560px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 8px;
	height: 70px;
}
#contact-section button{
	margin-top: 8px;
	margin-left: auto;
	margin-right: auto;
	display: block;
    background-color: #be2025;
    color: #fff;
    font-size: 24px;
    line-height: 1;
    padding: 20px 68px;
    border-radius: 12px;
}

.form-block{
	background-color: #2f3c44;
	border-radius: 20px;
	padding: 54px 20px 10px;
}
.form-block #contat-form p {
	text-align: center;
	color: #ffffff;
	font-size: 14px;
	line-height: 1;

}
.footer-text {
	width: 525px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	font-size: 14px;
	line-height: 18px;
	text-align: center;
	margin-top: 25px;
	margin-bottom: 60px;
}
#contact-section .logo {
	width: 600px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 80px;
}
footer > p {
	font-size: 14px;
	line-height: 1;
	margin-bottom: 20px;
	text-align: center;
} 

footer hr {
	margin: 0;
	height: 20px;
	background-color: #2f3c44;
	opacity: 1;
}

#projects {
	background-color: #f5f5f7;
	padding: 50px 20px;
}
#projects .scriptum {
	
}
#projects .single-item{
	padding: 50px;
	color: #ffffff;
	border-radius: 20px;
	height: 100%;
}

#projects .scriptum img {
	max-width: 80%;
}
#projects .kognitiqa img {
	max-width: 40%;
}
#projects .single-item h4 {
	font-size: 20px;
	line-height: 24px;
	font-weight: 400;
	text-transform: uppercase;
	margin-bottom: 20px;
	margin-top: 20px;
	width: 300px;
	max-width: 100%;
}
#projects .single-item p {
	font-size: 18px;
	line-height: 22px;
	margin-bottom: 30px;
}
#projects .single-item a {
	font-size: 18px;
	line-height: 1;
	padding: 12px 30px;
	color: #000000;
}
#projects .scriptum a {
	background-color: #e5580a;
	color: #ffffff;
}
#projects .kognitiqa a {
	background-color: #000000;
	color: #ffffff;
}
#projects .scriptum .single-item{
	background-color: #000000;
}
#projects .kognitiqa .single-item{
	color: #000000;
	background-color: #ffffff;
	padding-top: 20px;
}


@media (max-width: 1600px) {
	#home-top {
		border-radius: 0;
	}
}




@media (max-width: 1200px) {
	.head-contacts {
		display: none;
	}
	#middle-logo-section {
	    background-position: center 100%;
	}
	#philosophy .line-text p {
		font-size: 50px;
	}
	#general .single-item h4 {
		font-size: 22px;
	}
	#who .single-item .logo {
		position: relative;
		margin-bottom: 20px;
		margin-left: auto;
		margin-right: auto;
		top: 0;
		left: 0;
		transform: none;
	}
}

@media (max-width: 992px) {
	#about h4 {
	    font-size: 30px;
	    margin-bottom: 0;
	}
	#about p {
		text-align: center;
	}
	#middle-logo-section h2 {
		font-size: 30px;
	}
    #philosophy .line-text p {
        font-size: 35px;
    }
    #philosophy h2 {
	    font-size: 44px;
	}
	#general .single-item {
		background-position: center;
	}
	#who .single-item {
	    aspect-ratio: auto;
	}
	#contact-section .section-title {
	    font-size: 36px;
	}
	#general-export:hover {
		background-image: url(img/IMG/01_export.webp);
	}
	#general-marketing:hover {
		background-image: url(img/IMG/02_marketing.webp);
	}
	#general-consulting:hover {
		background-image: url(img/IMG/04_cons.webp);
	}
	#general-document:hover {
	background-image: url(img/IMG/03_doc.webp);
}
}


@media (max-width: 768px) {
	#home-top h1 {
		font-size: 36px;
	}
	#about .logo {
		margin-bottom: 20px;
	}
    #philosophy h2 {
        font-size: 32px;
    }
    #philosophy .line-text img {
	    width: 80px;
        margin-left: 15px;
	    margin-right: 15px;
	    margin-top: 10px;
	}
    #philosophy .line-text p {
        font-size: 25px;
    }
    #philosophy .section-content > p {
    	font-size: 17px;
    }
    #general h2 {
    	font-size: 40px;
    }
    .section-title {
    	font-size: 20px;
    }
    #general > p {
	    font-size: 25px;
	    line-height: 29px;
	}
	#projects .scriptum {
		margin-bottom: 20px;
	}
	#philosophy .section-content > p span:last-child {
		text-wrap-mode: nowrap;
	}
}


@media (max-width: 410px) {
	.navbar {
	    padding-left: 0px;
	    padding-right: 0px;
	}
	#head-logo {
	    width: 180px;
	}
    #philosophy .line-text p {
        font-size: 17px;
    }
    #philosophy .line-text img {
    	margin-top: 7px;
    }
    #philosophy .section-content > p {
        font-size: 14px;
    }
    #service .single-item {
    	padding: 15px;
    }
    #service .single-item p {
    	padding-left: 15px;
    }
    #service .single-item p {
    	font-size: 16px;
    }
}