.about_machine {
margin: 50px 0;
}
.about_machine .container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
gap: 50px;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.about_machine .left, .about_machine .right {
width: 50%;
}
.about_machine .left .highlighted_text {
color: var(--pink);
font-size: 16px;
font-weight: 700;
}
.about_machine .left .title {
color: var(--black);
font-size: 42px;
font-weight: 800;
font-family: "Sofia Sans Extra Condensed", sans-serif;
margin: 15px 0;
}
.about_machine .left .text {
color: var(--black);
font-size: 16px;
font-weight: 500;
line-height: 28px;
margin: 0 0 20px 0;
}
.about_machine .left .buttons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
gap: 15px;
margin: 30px 0 0;
}
.about_machine .left .buttons .btn {
border-radius: 50px;
text-align: center;
font-weight: 700;
font-size: 16px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transition: 0.3s all ease-in-out;
-o-transition: 0.3s all ease-in-out;
transition: 0.3s all ease-in-out;
}
.about_machine .left .buttons .btn.request {
color: #fff;
background: rgb(23, 138, 225);
background: -webkit-gradient(linear, left top, right top, from(rgba(23, 138, 225, 1)), to(rgba(13, 72, 117, 1)));
background: -o-linear-gradient(left, rgba(23, 138, 225, 1) 0%, rgba(13, 72, 117, 1) 100%);
background: linear-gradient(90deg, rgba(23, 138, 225, 1) 0%, rgba(13, 72, 117, 1) 100%);
padding: 18px 34px;
gap: 18px;
}
.about_machine .left .buttons .btn.request:hover {
background: -webkit-gradient(linear, left top, right top, from(rgba(23, 138, 225, 1)), color-stop(0%, rgba(23, 138, 225, 1)));
background: -o-linear-gradient(left, rgba(23, 138, 225, 1) 0%, rgba(23, 138, 225, 1) 0%);
background: linear-gradient(90deg, rgba(23, 138, 225, 1) 0%, rgba(23, 138, 225, 1) 0%);
}
.about_machine .left .buttons .btn.about {
color: #21598b;
border: 2px solid #d2dbe1;
padding: 18px 40px;
}
.about_machine .left .buttons .btn.about:hover {
background-color: #21598b;
color: #fff;
}
.about_machine .left .buttons svg {
width: 10px;
color: var(--green);
margin: 8px 0 0;
}
.about_machine .left .highlight_card {
background-color: #fffffff0;
border-radius: 20px;
padding: 16px 24px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 15px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-shadow: 0 0 10px #a1a1a136;
box-shadow: 0 0 10px #a1a1a136;
margin: 0 0 15px;
}
.about_machine .left .highlight_card .content {
width: 80%;
}
.about_machine .left .highlight_card .title_highlight {
color: #070707;
font-weight: 700;
font-size: 14px;
font-family: inherit;
}
.about_machine .left .highlight_card .text_highlight {
color: #070707;
font-weight: 500;
font-size: 12px;
line-height: 18px;
margin: 4px 0;
}
.about_machine .right {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
position: relative;
}
.about_machine .right .box-image {
position: relative;
}
.about_machine .right img {
position: relative;
border-radius: 25px;
z-index: 1;
}
.about_machine .right .box-image::before {
background-color: var(--pink);
height: 100%;
width: 100%;
content: '';
position: absolute;
right: -20px;
bottom: -15px;
border-radius: 25px;
z-index: 0;
}
.all_products .title {
color: var(--black);
font-size: 32px;
font-weight: 800;
font-family: "Sofia Sans Extra Condensed", sans-serif;
margin: 0 0 40px;
}
.products_category {
padding: 0 0 26px;
margin: 0 0 30px;
overflow: hidden;
position: relative;
}
.products_category .border {
width: 100%;
height: 3px;
background-color: #e4e4e4;
z-index: 0;
position: absolute;
bottom: 3px;
left: 0;
}
.products_category .category_btn {
cursor: pointer;
color: var(--blue);
font-weight: 600;
font-size: 16px;
-webkit-transition: 0.3s all ease-in-out;
-o-transition: 0.3s all ease-in-out;
transition: 0.3s all ease-in-out;
position: relative;
width: auto;
margin: 0 60px 0 0;
}
.products_category .category_btn::before {
visibility: hidden;
content: '';
width: 100%;
height: 5px;
border-radius: 50px;
background-color: var(--green);
position: absolute;
-webkit-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
bottom: -24px;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
}
.products_category .category_btn:hover::before,
.products_category .category_btn.active::before {
visibility: visible;
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
.products_category .category_btn:hover,
.products_category .category_btn.active {
color: var(--pink);
}
.category_products_box {
display: none;
}
.category_products_box.active {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 1%;
}
.products_box .products {
border: 1px solid #e4e4e4;
line-height: 0;
background-color: #fff;
padding: 18px;
width: 13.4%;
margin: 0 0 1%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.products_box .products img{
max-width: 101px;
}
@media only screen and (max-width:1500px) {
.about_machine .left .highlighted_text {
font-size: 14px;
}
.about_machine .left .title {
font-size: 38px;
margin: 12px 0;
}
.about_machine .left .text {
font-size: 14px;
line-height: 24px;
}
.about_machine .left .buttons .btn {
font-size: 14px;
}
}
@media only screen and (max-width:1300px) {
.about_machine .left .buttons .btn.request {
padding: 14px 26px;
gap: 12px;
}
.about_machine .left .buttons .btn.about {
padding: 14px 35px;
}
.about_machine .left .highlight_card {
padding: 15px;
}
.about_machine .left .highlight_card .title_highlight {
font-size: 13px;
}
}
@media only screen and (max-width:1024px) {
.about_machine .container {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.about_machine .left, .about_machine .right {
width: 100%;
}
.about_machine .right {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.products_box .products {
width: 15.8%;
}
}
@media only screen and (max-width:850px) {
.products_box .products {
width: 24.2%;
}
}
@media only screen and (max-width:550px) {
.products_box .products {
width: 32.6%;
}
}
@media only screen and (max-width:470px) {
.about_machine .left .buttons {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
@media only screen and (max-width:420px) {
.products_box .products {
width: 49%;
}
}