
/************ FONTS**************/




@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}




/**********************************/


:root {
	--cs_color: #277454;
	--cs_white: #ffffff;
}

 

body{ 
	height: 100%;
	font-family: 'Roboto';
	color: #404040;

 }

a { 
	text-decoration:none;
	color: inherit;
}

a:hover , a:active{
	
	color:inherit;
}

a:hover:not(.btn) {
    text-decoration: underline;
    text-underline-offset: 8px;
}

h2 {
    font-size: 42px;
    margin-bottom: 36px;
	font-weight: 400;
}

@media (max-width: 575.98px) { 
	
	h2 {
		font-size: 32px;
		margin-bottom: 24px;
		font-weight: 400;
	}
	
}

.btn.btn-outline-light {
    border-radius: 8px;
    font-size: 18px;
    font-weight: 500;
    border-width: 2px;
}

.btn.btn-custom:hover {
    background: var(--cs_color);
    color: var(--cs_white);
}
.btn.btn-custom {
    border-radius: 8px;
    font-size: 18px;
    font-weight: 500;
    border-width: 2px;
    color: var(--cs_color);
    border-color: var(--cs_color);
}


/***** HEADER  ****/
header{ 
	height:72px;
	background-color: var(--cs_color);
	color: var(--cs_white);
	font-size: 18px;
	position: relative;
	display:flex;
}

.header_content {
    height: 100%;
}

.logo img {
    height: 52px;
}

.menu .menu_item{ 
	margin-left: 20px;
	
}

.menu_icon{
	
	cursor: pointer;
}

@media (max-width: 575.98px) { 
	.menu {
		position: absolute;
		display: none;
		top: 72px;
		background: #277454;
		width: 100%;
		left: 0px;
		text-align: end;
		padding: 20px;
	}
	
	.menu .menu_item{ 
		margin-bottom: 8px;
	
	}
}


/***** HOME BANNER  ****/
section.home_banner {
    /* background: aliceblue; */
    background-image: linear-gradient(rgb(0 0 0 / 60%), rgb(0 0 0 / 60%)), url('../img/banner_3.jpg');
    height: 800px;
    background-size: cover;
    background-position: center center;
	
	padding-top: 256px;
    padding-bottom: 256px;
	
	color: var(--cs_white);
}


    
}
section.home_banner .container{
	
	height: 100%
}

.banner_content{
	
/*	height: 100% */
}


.banner_title {
    font-size: 48px;
    line-height: 56px;
}

.banner_text {
    font-size: 24px;
}

@media (max-width: 575.98px) { 

	section.home_banner {
		padding-top: 96px;
		padding-bottom: 96px;
		
	}
	
	.banner_title {
		font-size: 36px;
	}
	
	.banner_text {
		font-size: 20px;
	}
}

/***** HOW IT WORK BLOCK ******/
section.how_work {
    background-color: var(--cs_color);
    color: var(--cs_white);
    padding: 96px 0px;
}

.how_work_block {
    /*padding: 64px 0px;*/
}
.how_work_block .item_title {
    font-size: 24px;
    font-weight: 700;
}

/***** HOW IT WORK BLOCK ******/
section.despre {
    background-color: var(--cs_color);
    color: var(--cs_white);
    padding: 56px 0px;
}

.despre_block .item_title {
    font-size: 24px;
    font-weight: 700;
}

@media (max-width: 575.98px) { 
	
	.how_work_block .item_title {
		font-size: 20px;
		font-weight: 700;
	}
}


.how_work_block .how_item {
    margin: 48px 0px;
    padding-left: 120px;
    min-height: 100px;
}

.how_work_block .item_text {
    font-size: 18px;
}


/*** SOCIAL SECTION ****/

.social i{
	
	font-size: 40px;
    color: var(--cs_color);
	
}	

section.social {
    margin: 96px 0px;
}

section.social .social_icons {
    display: flex;
    justify-content: center;
    margin-top: 64px;
	flex-wrap: wrap;
}

section.social .social_icons a {
    /*margin: 0px 60px;*/
}



section.avantaje {
    margin: 96px 0px;
}

section.titlu {
    margin: 56px 0px;
}

.av_item {
    background: #f5f5f5;
	border-radius: 8px;
	height: 100%;
}

.av_title {
    font-weight: 500;
    font-size: 18px;
}

.av_item img {
    width: 48px;
    margin-bottom: 8px;
}


/********** FOOTER ****/
footer{
	background-color: var(--cs_color);
    color: var(--cs_white);
	padding: 48px 0px;
	font-size: 18px;
}

footer h2{
	
	margin-bottom: 24px;
}

a.footer_contact img {
    width: 32px;
    margin-right: 16px;
}

a.footer_contact {
    display: inline-flex;
    align-items: center;
	margin: 8px 0px;
}

.copyright {
    margin: 8px 0px;
    height: 32px;
}

/******** BLOG *************/

section.blog {
    padding: 96px 0px;
    background: #f5f5f5;
}

.blog_item {
    background: var(--cs_white);
    height: 100%;
}

.b_image img {
    max-width: 100%;
}

.blog_item {
    background: var(--cs_white);
    height: 100%;
}

.b_title {
    font-weight: 500;
    font-size: 18px;
	margin: 4px;
	display: block;
}

a.b_title:hover {
    color: #277454;
}

.b_image {
    max-height: 240px;
    overflow: hidden;
}

.b_text {
	margin: 16px;
}



/********** CALCULATOR ********/

section.calc {
    background: #f5f5f5;
    padding: 96px 0px;
}

.calc_content {
    max-width: 800px;
    margin: 0px auto;
}


select.form-select {
    min-height: 48px;
    padding-left: 20px;
}

input[type=file] {
    min-height: 48px;
    line-height: 34px;
	padding-left: 20px;
}


.calc label:not(.input-group-text) {
    font-size: 18px;
    margin-bottom: 4px;
}

a.cs_help {
    color: #ff6d01;
}

/*
input[type="file"]{
   -webkit-appearance: none;
   text-align: left;
   -webkit-rtl-ordering:  left;
}
/*
input[type="file"]::-webkit-file-upload-button{
   -webkit-appearance: none;
   float: right;
   margin: 0 0 0 10px;
   border: 1px solid #aaaaaa;
   border-radius: 4px;
   background-image: -webkit-gradient(linear, left bottom, left top, from(#d2d0d0), to(#f0f0f0));
   background-image: -moz-linear-gradient(90deg, #d2d0d0 0%, #f0f0f0 100%);
}*/
input[type=file]::file-selector-button {
  display: none;
}