/*bread*/
.top_br-ab {
	display: flex;
	flex-direction: column;
	font-family: Nunito Sans;
	font-size: 17px;
	font-weight: 400;
	line-height: 22px;
	text-align: left;
	max-width: 1400px;
	margin: 7% auto 0;
	padding: 40px 0;
}

.top_br-ab hr {
	background-color: #258F67;
	border: 0;
	height: 2px;
	margin-bottom: 1.5em;
	width: 7%;
	margin-left: 0;
	transition: width 0.5s ease; 
}

.top_br_wr-ab {
	display: flex;
	flex-direction: row;
	gap: 10px;
}

.top_br_wr-ab a, .top_br_wr-ab a:visited {
	color: #258F67;
	text-decoration: none;
}

.top_br_wr-ab:hover ~ .top_br_line-ab, .top_br_wr-ab:hover > .top_br_line-ab {
	width: 10%;
}

/*main*/
.about-main {
	max-width: 1400px;
	margin: 0 auto;
	padding: 40px 0;
	
	display: flex;
	flex-direction: row;
}
.about-main-left {
	flex: 1;
}
.about-main-right {
	flex:1;
}
.ab-h1 {
	color: var(--h1-color);   
	width: 470px;
	font-family: Nunito Sans;
font-size: 40px;
font-weight: 900;
line-height: 40px;
text-align: left;
margin-bottom: 37px;
}
.ab-h1 span {
	color: var(--h1-y);
}
.ab-h1-gray {
	color:#2148427A;
	margin-bottom:10px;
}
.about-main-left p {
	font-family: Montserrat;
font-size: 17px;
font-weight: 400;
line-height: 24px;
text-align: left;
	color: var(--p-color);
	    width: 90%;
}

/*why*/
.why-about {
	max-width: 1400px;
	margin: 0 auto;
	padding: 40px 0;
}
.why-about-h1 {
    text-align: center;
	color: var(--h1-color);   
	font-family: Nunito Sans;
	font-size: 36px;
	font-weight: 800;
	line-height: 44px;
	text-align: center;
	margin-bottom: 50px;
}
.why-about-grid {
	    display: flex;
    flex-direction: row;
	    gap: 75px;
}
.about-grid-elem {
	display: flex;
    flex-direction: column;   
    align-items: center;

}
.why-about-img {
	width: 100px;
	margin-bottom: 20px;
}
.about-why-large {
	font-family: Nunito Sans;
	font-size: 22px;
	font-weight: 700;
	line-height: 27px;
	text-align: center;
	color:#214842;
	margin-bottom: 15px;
}
.about-why-small {
	font-family: Montserrat;
	font-size: 17px;
	font-weight: 400;
	line-height: 24px;
	text-align: center;
	color: var(--p-color);
}
/*ourprod*/
.ourprod {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 0;	
}

.ourprod-grid {
	    display: grid;
    grid-template-columns: repeat(2, 1fr);
	gap: 30px 10px;
}

.ourprod h2 {
	font-family: Nunito Sans;
	font-size: 40px;
	font-weight: 900;
	line-height: 40px;
	text-align: left;
	color: var(--h1-color);
	margin-bottom: 20px;
	max-width: 500px;
	width: 100%;
}

.ourprod p, .ourprod li {
	font-family: Montserrat;
font-size: 17px;
font-weight: 400;
line-height: 24px;
text-align: left;
color: var(--p-color);
	width: 520px;
}

.ourprod-grid-4 h2, .ourprod-grid-4 p {
	padding-left: 50px;
}


/*yellow*/
.yellow-about {
	max-width: 100%;    
    padding: 40px 0;
    background-color: #EFC368;
    position: relative;
    min-height: 650px;
}
.yellow-about-block {
	    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 0;
}
.y-about-text h1 {
		font-family: Nunito Sans;
font-size: 40px;
font-weight: 900;
line-height: 40px;
text-align: left;
color: var(--h1-color);
	margin-bottom:25px;
}
.y-about-text p  {
	font-family: Montserrat;
font-size: 24px;
font-weight: 400;
line-height: 31px;
text-align: left;
margin-bottom:25px;
	width: 50%;
	color: var(--h1-color);
}
.yellow-about-button {
	font-family: Nunito Sans;
    display: inline-block;
    padding: 10px 20px;
    background-color: #214842;
    color: #EFC368;
    text-decoration: none;
    border-radius: 24px;
    font-weight: 700;
	margin-bottom:25px;
}
.ab-bottom {
	display: flex;
	flex-direction:row;
	justify-content: space-between;
}
.ab-bottom p {
	font-family: Montserrat;
font-size: 16px;
font-style: italic;
font-weight: 500;
line-height: 23px;
text-align: left;
color: var(--h1-color);
}
.ab-soc {
	display: flex;
	flex-direction:row;
	gap: 20px;
	z-index:3;
	    margin-right: 10%;
}
.y-img-1-ab {
	position: absolute;
    top: -2%;
    right: 35%;
}
.y-img-2-ab {
	    position: absolute;
    right: 20%;
    top: 20%;
}
.y-img-3-ab {
	position: absolute;
    bottom: 0;
    right: 0%;
	width: 650px;
}
/*1525*/
@media (max-width: 1525px) {
	.top_br-ab, .about-main, .why-about, .ourprod, .yellow-about-block {
		width:80%;
	}
}

/*1400*/
@media (max-width: 1400px) {

	.top_br-ab {	
		    margin-top: 10%;
	}	
	.ab-h1 {
		margin-bottom: 17px;
	}
.ab-h1-gray {
	margin-bottom:0px;
	}
	.about-grid-elem {

    width: 400px;
}
	
	.y-img-3-ab {  
    width: 40%;
}
	.y-img-2-ab {   
    right: 15%;   
    width: 30%;
}
	.y-img-1-ab {   
    right: 25%;
}
	.ab-soc {
    margin-right: 5%;
}
	
}

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

}

/*800 mob*/
@media (max-width: 800px) {
	
	.top_br-ab, .about-main, .why-about, .ourprod, .yellow-about-block {
		width:90%;
		padding: 30px 0;
	}
	.top_br-ab {
		display: none;
	}

	.about-main {
		flex-direction: column-reverse;
		    align-items: center;
		margin-top:25%;
	}
	.about-main-left {
		    margin-top: 33px;
	}
.ab-h1 {	
	width:100%;
	}
	.about-grid-elem {
	width:90%;
	}
	.why-about-grid {   
    flex-direction: column;  
			    align-items: center;
   
			    gap: 20px;
	}
	
	.ourprod-grid {
        display: grid;
        grid-template-columns: 1fr; 
        grid-template-areas: 
            "ourprod-grid-2"
            "ourprod-grid-1"
            "ourprod-grid-3"
            "ourprod-grid-4"
            "ourprod-grid-6"
            "ourprod-grid-5";
        gap: 20px;
    }   
    .ourprod-grid-1 { grid-area: ourprod-grid-1; }
    .ourprod-grid-2 { grid-area: ourprod-grid-2; }
    .ourprod-grid-3 { grid-area: ourprod-grid-3; }
    .ourprod-grid-4 { grid-area: ourprod-grid-4; }
    .ourprod-grid-5 { grid-area: ourprod-grid-5; }
    .ourprod-grid-6 { grid-area: ourprod-grid-6; }
	
	.ourprod-grid img {
		width:100%;
	}
	.ourprod-grid-4 h2, .ourprod-grid-4 p {
    padding-left: 0px;
}
	.ourprod h1, .ourprod p, .ourprod li {
		width:90%;
	}
		.yellow-about {   
    padding: 0 0 40px 0;
	}
	.yellow-about-block {
		padding: 0;
	}
	.y-img-1-ab, .y-img-2-ab, .y-img-3-ab {
		display: none;
	}
	.y-about-text {
		    display: flex;
    flex-direction: column;
    align-items: center;
	}
	.y-about-text h1 {	
		text-align: center;
	}
		.y-about-text p {
		width:90%;
				text-align: center;
	}
	.ab-soc {
		display: none;
	}
	
	/*Fonts 800*/
	.ab-h1, .ab-h1-gray {
		font-family: Nunito Sans;
font-size: 24px;
font-weight: 900;
line-height: 25px;
text-align: center;
	}
	.about-main-left p {
		font-family: Montserrat;
		font-size: 14px;
		font-weight: 400;
		line-height: 20px;
		text-align: center;
		width:100%;
	}
	.why-about-h1{
		font-family: Nunito Sans;
font-size: 24px;
font-weight: 800;
line-height: 25px;
text-align: center;

	}
	.about-why-large {
		font-family: Nunito Sans;
font-size: 22px;
font-weight: 700;
line-height: 27px;
text-align: center;

	}
	.about-why-small {
		font-family: Montserrat;
font-size: 17px;
font-weight: 400;
line-height: 24px;
text-align: center;

	}
	
	.ourprod h2 {
		font-family: Nunito Sans;
		font-size: 24px;
		font-weight: 900;
		line-height: 20px;
		text-align: left;

	}
	.ourprod p, .ourprod li {
		font-family: Montserrat;
font-size: 14px;
font-weight: 400;
line-height: 20px;
text-align: left;

	}
	.y-about-text h2 {
		font-family: Nunito Sans;
font-size: 24px;
font-weight: 900;
line-height: 25px;
text-align: center;

	}
	.y-about-text p {
		font-family: Montserrat;
font-size: 14px;
font-weight: 400;
line-height: 20px;
text-align: center;

	}
	
}
/*600 mob*/
@media (max-width: 600px) {
.about-main {

		margin-top:35%;
	}
}
/*400 mob*/
@media (max-width: 400px) {
.about-main {

		margin-top:40%;
	}
}