.color-one {background: var(--main-color) !important ; color: var(--main-color) !important}
.color-one :is(h1, h2, h3, h4, h5, h6, p, div) {color: var(--main-color-text) !important}
.color-one :is(a, .button) {background: var(--sec-color) !important; color: var(--sec-color-text) !important}

.color-two {background: var(--sec-color) !important; color: var(--sec-color) !important} /*#581921*/
.color-two :is(h1, h2, h3, h4, h5, h6, p, div) {color: var(--sec-color-text) !important}
.color-two :is(a, .button) {background: var(--main-color) !important; color: var(--main-color-text) !important}

.color-three {background: #f0f0f0 !important; color: #f0f0f0 !important} /*#581921*/

.e-con-inner {max-width: 100% !important; padding: 0 !important; margin: 0 !important}



.parent_container > div {max-width: 100% !important; padding: 0 !important}
@media(max-width: 1024px){
	.parent_container > div {max-width: 100% !important; padding: 0 !important}
}

@media(max-width: 767px){
	.parent_container > div {max-width: 100% !important; padding: 0 !important}
}



.parent_container_padding {padding: 5% 17.5% !important; width: 100%!important}
@media(max-width: 1024px){
	.parent_container_padding {padding: 10% 15% !important; width: 100%!important}
}

@media(max-width: 767px){
	.parent_container_padding {padding: 15% 7% !important; width: 100%!important}
}

.zero_container_padding {}



.hero-section {
padding-top : calc(5% + 80px) !important;
padding-bottom : calc(5% + 80px) !important;
overflow: hidden !important;
position: relative
}

.hero-section .hero-image {
position: absolute;
bottom: 0 !important;
scale: 1;
left: 10%;
height: calc(100% - 80px) !important;
width: clamp(30%, 500px, 80%);
display: flex;
align-items: end;
justify-content: center;
overflow: hidden !important;
}
.hero-section .hero-image img {
height: 100% !important;
object-fit: contain !important;
object-position: bottom center
}

@media(max-width: 1024px){
	.hero-section .hero-image {display: none !important}
}


@media(max-width: 767px){
	.hero-section {
		padding-top : calc(15% + 80px) !important;
		padding-bottom : calc(5% + 80px) !important;
	}
}


.three-lines {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}


.hero-rest {
    position: relative;
    top: -80px;
    background: none;
	margin: 0 !important;
	margin-bottom: -80px !important;
	padding: 0 17.5% !important
}
@media(max-width : 1024px){
    .hero-rest {
    position: relative;
    top: 0 !important;
    background: #f0f0f0;
	margin: 0 !important;
	padding: 10% 15% !important
}
}
@media(max-width : 767px){
    .hero-rest {
    position: relative;
    top: 0 !important;
    background: #f0f0f0;
	margin: 0 !important;
	padding: 15% 7% !important
}
}


.card {overflow: hidden !important; transition: 0.5s !important; border: 3px solid black !important}
.card:hover {box-shadow: 8px 8px 0 var(--main-color) !important; border: 3px solid black !important}
.elementor-button:hover {box-shadow: 4px 4px 0 #f4a8b6 !important}

.hero_flex_inner{padding: 0 !important;}
.hero_flex_inner > div{display: flex !important; flex-direction: row !important; padding: 0 !important; gap:20px !important}

@media(max-width : 1024px){
.hero_flex_inner  > div{display: flex !important; flex-direction: column !important ; padding: 0 !important}
}

.flex_inner{padding: 0 !important;}
.flex_inner > div{display: flex !important; flex-direction: row !important; padding: 0 !important; gap:60px !important}

@media(max-width : 1024px){
.flex_inner  > div{display: flex !important; flex-direction: column !important ; padding: 0 !important}
}

.flex_inner_reverse {padding: 0 !important;}
.flex_inner_reverse > div{display: flex !important; flex-direction: row !important; padding: 0 !important; gap:60px !important}

@media(max-width : 1024px){
.flex_inner_reverse  > div{display: flex !important; flex-direction: column-reverse !important ; padding: 0 !important}
}

.grid_four_two_one {padding: 0 !important;}
.grid_four_two_one > div {display: grid !important; grid-template-columns: repeat(4, 1fr) !important; padding: 0 !important;     margin: 0 !important;
    max-width: 100%;}
@media(max-width : 1024px){
.grid_four_two_one > div {display: grid !important; grid-template-columns: repeat(2, 1fr) !important; padding: 0 !important}

}
@media(max-width : 767px){
.grid_four_two_one > div {display: grid !important; grid-template-columns: repeat(1, 1fr) !important; padding: 0 !important}

}




.grid_three_two_one {padding: 0 !important;}
.grid_three_two_one > div {display: grid !important; grid-template-columns: repeat(3, 1fr) !important; padding: 0 !important;     margin: 0 !important;
    max-width: 100%; gap: 20px !Important}
@media(max-width : 1024px){
.grid_three_two_one > div {display: grid !important; grid-template-columns: repeat(2, 1fr) !important; padding: 0 !important}

}
@media(max-width : 767px){
.grid_three_two_one > div {display: grid !important; grid-template-columns: repeat(1, 1fr) !important; padding: 0 !important}

}


.logos img {filter: grayscale(100%); width: 64px !important; transition: 0.2s}
.logos img:hover {filter: grayscale(0%); scale: 0.9}
.logos figure.swiper-slide-inner {
    display: flex
;
}