:root {
	/* backgrounds */
	--main-background-color: #ffffff;
	--second-background-color: #F3F5F7;
	/* colors */
	--main-dark-text-color: #141718;
	--main-light-text-color: #6C7275;
	--sec-text-color: #38CB89;
	--disaple-color: #B1B5C3;
	--light-color: #ffffff;
	--dark-color: #000000;
	--v-rare-color: #377DFF;
	--stars-color: #343839;
	--blue-black-color: #23262F;
	--input-border: #CBCBCB;
		--note-color:#807E7E;
	/* border color */
	--border-color: #E8ECEF;
	/* fonts */
	--v-s-fonts: 12px;
	--sm-fonts: 14px;
	--main-fonts: 16px;
	--md-vs-fonts: 18px;
	--md-s-fonts: 20px;
	--md-fonts: 24px;
	--lg-fonts: 30px;
	--xl-fonts: 40px;
	--xxl-fonts: 54px;
	--xxxl-fonts: 72px;
	/* transition */
	--main-transition: all 0.2s;
}

/*media for fonts var  */
@media screen and (max-width: 1200px) {
	:root {
		--main-fonts: 15px;
		--v-s-fonts: 12px;
		--sm-fonts:14px;
		--md-s-fonts: 18px;
		--md-vs-fonts: 16px;
		--md-fonts:20px;
		--lg-fonts:28px;
		--xl-fonts: 38px;
		--xxl-fonts : 48px;
		--xxxl-fonts : 60px;
	}
}
@media screen and (max-width: 991px) {
	:root {
		--main-fonts: 14px;
		--v-s-fonts: 12px;
		--sm-fonts:12px;
		--md-vs-fonts: 14px;
		--md-s-fonts: 16px;
		--md-fonts:18px;
		--lg-fonts:26px;
		--xl-fonts: 34px;
		--xxl-fonts : 40px;
		--xxxl-fonts : 50px;
	}
}
@media screen and (max-width: 766px) {
	:root {
		--main-fonts: 12px;
		--v-s-fonts: 10px;
		--sm-fonts:10px;
		--md-fonts:16px;
		--md-vs-fonts: 12px;
			--md-s-fonts: 14px;
			--lg-fonts:24px;
			--xl-fonts: 30px;
			--xxl-fonts : 34px;
			--xxxl-fonts : 40px;
    }
}
.head-image{
	height: 425px;
  background-image: url('../images/proj_2/blog-main.png');
  background-size: cover;
  background-position: center center;
}
.head-image-text{
	top: 50%;
  color: var(--main-dark-text-color);
  left: 50%;
  font-size: var(--md-s-fonts);
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}
.head-image-text ol li ,
.head-image-text ol li a{
	font-size: var(--sm-fonts);
  color: var(--main-light-text-color);
}
.head-image-text ol li.active{
	color: var(--main-dark-text-color);
}
.head-image-text h1{
	font-size: var(--xxl-fonts);
	color: var(--dark-color);
	font-weight: 500;
}
.head-image-text p{
	font-size: var(--md-s-fonts);
	color: var(--main-dark-text-color);
}
/* blog all sec ------------- */
.controle ul li{
	cursor: pointer;
	font-size: var(--main-fonts);
	color: var(--note-color);
	font-weight: 600;
}
.controle ul li.active{
	color: var(--main-dark-text-color);
	border-bottom: 1px solid var(--main-dark-text-color);
}
.controle > div:first-of-type select{
	border: 2px solid var(--main-light-text-color);
}
.controle select{
	background-color: var(--light-color);
	cursor: pointer;
}
.controle .disply-methods{
	border: 1px solid var(--border-color);
}
.controle .disply-methods img{
	cursor: pointer;
	min-width: 30px;
}
.controle .disply-methods img:hover,
.controle .disply-methods img.active{
	background-color: var(--second-background-color);
}
.controle .disply-methods img:not(:last-of-type){
	border-inline-end: 1px solid var(--border-color);
}
.a-prod{
	width: calc(100% / 3 - 16px);
}
.a-prod.just-tow{
	width: calc(100% / 2 - 12px);
}
.a-prod.row-design{
	display: flex;
	width: 100%;
}
.a-prod .img-holder img{
	object-fit: cover;
	width: 100%;
	height: 100%;
	min-width: 115px;
}
.a-prod.row-design .text-info{
	margin-inline-start: 20px;
	justify-content: space-around;
}
.a-prod .text-info p{
	font-size: var(--md-s-fonts);
	color: var(--blue-black-color);
	font-weight: 500;
}	
.a-prod .text-info span{
	font-size: var(--v-s-fonts);
	color: var(--main-light-text-color);
}

/* article page -------------------------------------- */
nav ol li a,
nav ol li{
	color: var(--main-dark-text-color) !important;
	font-size: var(--sm-fonts);
	font-weight: 500;
}
nav ol li a{
	color: var(--main-light-text-color) !important;
}
.top-titles h5{
	font-weight: 700;
	font-size: var(--v-s-fonts);
	color: var(--dark-color);
}
.top-titles h1{
	font-weight: 500;
	font-size: var(--xxl-fonts);
	color: var(--main-dark-text-color);
	max-width: 850px;
}
.top-titles p{
	font-size: var(--main-fonts);
	max-width: 850px;
	color: var(--main-light-text-color);
}
.top-titles > div span{
	color: var(--main-light-text-color);
	font-size: var(--main-fonts);
}
.top-titles > div >span span{
	font-size: var(--md-s-fonts);
}
article .top-articale{
	color: var(--main-dark-text-color);
}
article .top-articale > div img,
.mid-articale > div img,
.articale-footer > div img{
	object-fit: cover;
	width: 100%;
	height: 100%;
}
article .top-articale p,
article .mid-articale p,
article .articale-footer p{
	font-size: var(--main-fonts);
}
article .top-articale h3,
article .mid-articale h3,
article .articale-footer h3{
	font-size: var(--lg-fonts);
}
.mid-articale > div.img-con{
	width: calc(50% - 8px);
}
.articale-footer > div{
	flex: 1;
	min-width: 250px;
}

/*contact us page -----------------  */
.the-main-sec h2{
	font-size: var(--xl-fonts);
	color: var(--main-dark-text-color);
	font-weight: 500;
}
.contact-info div{
	min-width: 200px;
}
.contact-info div h4{
	font-size: var(--main-fonts);
	color: var(--main-light-text-color);
	font-weight: 700;
}
.contact-info div span{
	font-weight: 600;
	font-size: var(--main-fonts);
	color: var(--main-dark-text-color);
}

.map-message > div{
	flex: 1;
	min-width: 300px;
}
.map-message > div img:first-child{
	object-fit: cover;
	width: 100%;
	height: 100%;
}
.map-message > div img:last-child{
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
}
.message h3{
	font-size: var(--md-s-fonts);
	font-weight: 500;
	color: var(--dark-color);
}
.message label{
	font-size: var(--v-s-fonts);
	font-weight: 700;
	color: var(--main-light-text-color);
	text-transform: uppercase;
}
.message input,
.message textarea{
	border: 1px solid var(--input-border);
	font-size: var(--main-fonts);
	color: var(--main-light-text-color);
	background-color: var(--light-color);
}
.message textarea{
	resize: none;
	height: 100px;
}
.message > a{
	width: fit-content;
}

.features-show{
	background-color: var(--second-background-color);
}