/* || Hero */
.hero { overflow: hidden; position: relative}
.hero__inner_container { display: flex; justify-content: space-between; align-items: center; gap: 20px; max-width: 1280px; min-height: 600px; margin-left: auto; margin-right: auto; padding: 0 var(--padding-page); }
.hero__content { position: relative; max-width: 500px; }
.hero__title { font-size: 48px; font-weight: 700; margin-bottom: 10px; line-height: 1;}
.subtitle--hero { text-align: left;margin-bottom: 10px;}
.hero__btns { display: flex; align-items:center; gap: 10px;}
.hero__blob { position: absolute; top: -20px; right: -40px; width: 800px; height: calc(100% + 180px); }
.hero__image__screens__image { box-shadow: none; width: 600px; height: 500px;}
.hero__image__screens__image img { object-fit: contain; }

@media screen and (max-width: 1366px) {
    .hero__content { max-width: 550px; padding-top: 50px; }
}
@media screen and (max-width: 1199px) {
    .hero__content { max-width: 460px; padding-top: 100px }
    .hero__image__screens__image { width: 550px;}
}
@media screen and (max-width: 1024px) {
    .hero__image__screens__image { width: 500px;}
}
@media screen and (max-width: 989px) {
    .hero__content { padding: 80px var(--padding-page) 0}
    .hero__image_container__screens { display: none }
}
@media screen and (max-width: 767px) {
    .hero { min-height: 450px}
    .hero__btns { flex-wrap: wrap;}
}
@media screen and (max-width: 600px) {
    .hero *:not(.btn) { color: var(--white-color) }
    .hero .btn--primary {
        background-color: var(--black-color);
        border-color: var(--black-color);
    }
}
/* |||| End Hero */



/* || About */
.about__content__image { width: 500px; height: 500px; }
.about__content__image img { object-fit: cover; }
@media screen and (max-width: 767px) {
    .about__content__image { width: 400px; height: 400px; }
}
@media screen and (max-width: 480px) {
    .about__content__image { width: 100%; height: 350px; }
}

.about__split { /*display: flex; /*display: grid; grid-template-columns: repeat(2, 1fr);*/ }
.about__split__section { padding: 50px 40px;  }
.about__split__section--left { background: var(--primary-color) }
.about__split__section--left h3, .about__split__section--left p { color: var(--white-color); }
.about__split__section--left .about__split__section__icon img { filter: var(--white-color-filter) }
.about__split__section--right { background: var(--gray-color) }
.about__split__section__content {max-width: 500px; text-align: center; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px;  }
.about__split__section__content h3 { font-size: 28px }
.about__split__section__content p { font-size: 18px }
.about__split__section__icon { width: 90px; min-width: 90px; height: 90px}

/*.about__split__section { max-width: 50%; width: 100%; transition: all 0.3s ease-out; height: 390px; overflow: hidden }
.about__split__section.active { max-width: 75%; max-width: 100%;}
.about__split__section.unactive { max-width: 25%; max-width: 40px; overflow: hidden; }
.about__split__section.unactive .about__split__section__content { overflow: hidden; height: 0 }*/


/*
.about__split__section { max-width: 50%; width: 100%; transition: all 0.3s ease-out; height: 390px; overflow: hidden }
.about__split__section.active { max-width: 75%; max-width: 100%;}
.about__split__section.unactive { max-width: 25%; max-width: 40px; overflow: hidden; }
*/

/*.about__split__section { display: flex; gap: 20px; align-items: center; }*/


.about__split { height: 450px; overflow: hidden; position: relative; }
.about__split__section { display: grid; grid-template-columns: 1fr 1fr; align-items: center; position: absolute; top: 0; height: 100%; transition: all 0.3s ease-out; width: 100% }
.about__split__section--right { transform: translateX(50%) }
.about__split__section__content__additional { max-width: 75%; }
.about__split__section__content__additional p + p { margin-top: 10px }
.about__split__close { width: 35px; min-width: 35px; height: 35px; filter: var(--white-color-filter) }

.about__split__section--left.active + .about__split__section--right { transform: translateX(90%)}
.about__split__section--right.active { transform: translateX(10%) }

.about__split__close { position:absolute; top: 5px; z-index:2; transition: all 0.3s ease-out; cursor:pointer }

.about__split__close--left {filter: var(--primary-color-filter); left: -3%;}
.about__split__close--right {filter: var(--gray-color-filter); right: 0;}

.about__split__section--left.active .about__split__close { right: 7%; }
.about__split__section--right.active .about__split__close { left: -3%; }




@media screen and (max-width: 989px) { 
    .about__split { height: 550px} 
    .about__split__section { padding: 50px var(--padding-page); } 
    .about__split__section__content{ padding:var(--padding-page) } 
}
@media screen and (max-width: 767px) { .about__split { height: 650px; grid-template-columns: 1fr }}
/* |||| End About */



/* || Functionalities */
.functionalities { padding: 0 10% }
.functionalities__content__title { margin-bottom: 15px }
.functionalities__content__text { max-width: 680px}
.functionalities__image { box-shadow: none; }
.functionalities__image img { object-fit: contain; }

.functionality { display: flex; gap: 10px;}
.functionality + .functionality { margin-top: 10px}
.functionality__icon { width: 35px; min-width: 35px; height: 35px}
.functionality__icon img { object-fit: contain;}

.functionalities__accent { background: var(--primary-color) }
.functionalities__accent__title { color: var(--white-color); font-size: 32px; font-weight: 700; line-height: 1.2; text-align: center; margin: 0 auto; padding: 60px var(--padding-page); }

.functionalities .horizontal_section { justify-content: space-between; max-width: 1000px; margin-left: auto; margin-right: auto }
.functionalities__section--bottom { position: relative; margin: 60px auto 100px; }
.functionalities__content__text--top { max-width: 630px }
.functionalities__content__text--bottom { max-width: 480px }
.functionalities__image--top { width: 300px; height: 450px }
.functionalities__image--bottom { width: 500px; height: 400px; margin-top: -40px;}


@media screen and (max-width: 767px) {
    .functionalities__image { width: 400px; height: 400px; }
}
@media screen and (max-width: 480px) {
    .functionalities__image { width: 100%; height: 350px; }
}
/* |||| End Functionalities */

/* || Advantages */
.advantages__title { max-width: 900px; width: 100%; margin: 0 auto 60px; text-align: center; }

.benefits { margin-top: 5px}

.advantages_section { position: relative }
.advantages_section__inner--horizontal { justify-content:center; gap: 0; margin-left: auto; margin-right: auto; }
.advantages__image { box-shadow: none; width: 800px; height: 800px; margin-right: -180px;  /*position: absolute; bottom: 0; left: 0; */}
.advantages__image img { object-fit: contain; }
.advantages__content__title { max-width: 840px; font-size: 32px; margin-bottom: 60px; font-weight: 700; line-height: 1.2; }
.advantages_container {     
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    grid-template-rows: 1fr 30px 1fr;
    gap: 10px;
    max-width: 800px;
    margin-left: auto;
}
.advantage {background: var(--primary-color);  padding: 25px 40px; }
.advantage * { color: var(--white-color) }
.advantage .advantage__icon img { filter: var(--white-color-filter) }

.advantage:first-child {grid-row: span 2; background: var(--gray-color) }
.advantage:first-child .advantage__icon img {filter: var(--primary-color-filter) }
.advantage:first-child * { color: var(--black-color) }
.advantage:last-child {grid-column: 2; grid-row: 2 / 4; background: var(--gray-color)}
.advantage:last-child .advantage__icon img {filter: var(--primary-color-filter) }
.advantage:last-child * { color: var(--black-color) }

.advantage:nth-child(3) { grid-column: 1; }

.advantage + .advantage { margin-top: 0}


@media screen and (max-width: 1439px) {
    .advantages__image { margin-left: -180px }
}
@media screen and (max-width: 1366px) {
    .advantages__image { margin-left: -280px }
}
@media screen and (max-width: 1199px) {
    .advantages__image { display:none }
    .advantages__content__title { text-align:center; margin-left:auto; margin-right:auto; margin-bottom: 30px }
    .advantages_container { max-width: 1000px; margin-left: auto; margin-right: auto }
}

@media screen and (max-width: 767px) {
    .advantages_container { display: flex; flex-direction:column; }
    .advantage { padding: 20px }
    .advantage__content h4 { margin-bottom: 5px }

    .advantage:nth-child(odd) {background: var(--gray-color) }
    .advantage:nth-child(odd) .advantage__icon img { filter: var(--primary-color-filter) }
    .advantage:nth-child(odd) * { color: var(--black-color) }
    .advantage:nth-child(even) {background: var(--primary-color) }
    .advantage:nth-child(even) .icon img {filter: var(--white-color-filter) }
    .advantage:nth-child(even) * { color: var(--white-color) }
}

/*@media screen and (max-width: 767px) {
    .advantages__image { width: 400px; height: 400px; }
}
@media screen and (max-width: 480px) {
    .advantages__image { width: 100%; height: 350px; }
}*/
/* |||| End Advantages */

/* || Testimonials */
.testimonials { background: var(--gray-color); padding: 60px 0; overflow: hidden; margin-top:0}
.testimonials__headings { padding: 0 var(--padding-page) }
.testimonials_container { /*padding: 20px 0;*/ min-height: 250px; display: flex; flex-direction: column; justify-content: center;}
.testimonial { background: var(--white-color); padding: 20px; border-radius: var(--border-radius); max-width: 520px; text-align: center;}
.testimonial__person { margin-bottom: 10px}
.testimonial__name { font-weight: 700; font-size: 20px;}
.testimonial__position { font-style: italic; font-size: 16px; color: var(--light-black-color)}
.testimonial__line { height: 2px; width: 300px; background: var(--primary-color); margin: 5px auto; }
.testimonial__stars { display: flex; justify-content: center; align-items: center; gap: 5px; }
.testimonial__star { width: 20px; min-width: 20px; height: 20px }

.js-marquee { display: flex; align-items: center; gap: 20px;}
/* || End Testimonials */

/* || Get Started */
.get_started__content__text { display: flex; justify-content: center; gap: 40px; margin: 60px auto 0; max-width: 1000px }
.get_started__item { max-width: 300px }
.get_started__item__title { font-weight: 600;}
.get_started__item__no {width: 60px; min-width: 60px; height: 60px; padding: 20px; margin-bottom: 10px; font-size: 40px; font-weight: 700; display: flex; justify-content: center; align-items: center; border-radius: 50%; background: var(--primary-color); color: var(--white-color); }

.key_benefits_section { background: var(--gray-color); padding-top: 100px; padding-bottom: 20px }
.key_benefits { display: flex; justify-content: space-evenly; align-items: center; gap: 20px; flex-wrap: wrap}
.key_benefit { display: flex; flex-direction: column; align-items: center; gap: 20px; flex: 1 0 23%; max-width: 300px; text-align: center;}
.key_benefit__icon { width: 90px; min-width: 90px; height: 90px;}
.key_benefit:hover .key_benefit__icon img { filter: var(--primary-color-filter);}

@media screen and (max-width: 989px) {
    .get_started__content__text { flex-direction: column; align-items: center; gap: 10px; margin-top: 40px }
    .get_started__item { display:flex; gap: 20px; max-width:620px }
    .get_started__item__title { margin-bottom: 5px }
}
@media screen and (max-width: 767px) {
    .get_started__item { flex-direction: row;}
    .key_benefit { flex: 1 0 45%;}
}
/* || End Get Started */


/* || Suitable For */
.suitable_for { background-color: var(--primary-color); color: var(--white-color); padding: 60px var(--padding-page); display: flex; justify-content: center; align-items: center; gap: 30px;}
.suitable_for * { color: var(--white-color); }
.suitable_for__title { max-width: 200px; text-align:left }
.suitables { display: flex; justify-content: space-between; align-items: center; gap: 40px;}
.suitable { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center;}
.suitable__icon { width: 100px; min-width: 100px; height: 100px;}
.suitable__icon img { filter: var(--white-color-filter)}

@media screen and (max-width: 767px) {
    .suitable_for { flex-direction:column }
    .suitable_for__title { max-width: unset; text-align:center }
    .suitables { justify-content: space-between; width: 100%; max-width: 500px; gap: 20px;}

}
@media screen and (max-width: 480px) {
    .suitables { flex-direction: column;}
    .suitable__icon { width: 90px; min-width: 90px; height: 90px; }
}
/* || End Suitable For */


/* || Form */
.request_demo {
    background-color: var(--gray-color);
    background-image: url('/assets/images/form_background_orange.png');
    background-repeat: no-repeat;
    background-position: 0% 0%;
    background-size: cover;
    padding-top: 130px;
    margin-top: 0;
}
.request_demo__image { height: 500px; box-shadow: unset; border-radius: unset; }
.request_demo__image img { border-radius: unset; }
.request_demo__content { max-width: 530px;}
.request_demo__content__title, .request_demo__content p { color: var(--white-color)}
#request_demo__form { scroll-margin: 180px }
/*.request_demo__form__submit { margin-left: auto;}*/

.request_demo__form__alert.alert-success {
    border-radius: var(--border-radius);
    text-align: center;
    scroll-margin: 100px;
    background: var(--primary-color);
    color: var(--white-color);
    padding: 40px 20px;
}
.request_demo__form__alert.alert-success .request_demo__form__alert__icon {
    margin: 0 auto;
    margin-bottom: 20px;
    width: 50px;
    min-width: 50px;
    height: 50px;
    filter: var(--white-color-filter);
}
.request_demo__form__alert.alert-success .request_demo__form__alert__title {
    color: var(--white-color);
    margin-bottom: 20px;
    font-size: 22px;
    font-weight: 700;
}
.request_demo__form__alert.alert-success .request_demo__form__alert__text {
    color: var(--white-color);
    text-align: center;
}
.request_demo__form__alert__text { font-weight: 500; }

.form__inputs {display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 20px; padding: 20px 0;}
.form-group { display: flex ;flex-direction: column; gap: 5px;}
.form-group_email-confirm {display: none;}
.form-group_questions { grid-column: span 2;}
.form-label { font-weight: 500; display: none}
.form-input, .form-dropdown {
    display: block;
    width: 100%;
    padding: 10px 15px;
    line-height: 1;    
    border: 1px solid var(--white-color);
    border-radius: var(--border-radius-btn);
    background-color: var(--white-color);
}
.form-input:focus-visible, .form-dropdown:focus-visible,
.form-input:focus, .form-dropdown:focus {
    outline: 1px solid var(--black-color);
}
.form-dropdown{ -webkit-appearance: none; -moz-appearance: none; cursor: pointer; }
.form-dropdown-wrapper { position: relative; cursor: pointer; }
.form-dropdown-wrapper::after {
    font-family: FontAwesome;
    content: "\f078";
    font-size: 14px;
    display: inline;
    position: absolute;
    top: 33%;
    right: 15px;  
    pointer-events: none;
}
.form-dropdown-placeholder { display: none; position: absolute; color: gray; top: 25%; left: 16px;pointer-events: none;}
.form-dropdown-placeholder.active { display:inline; }

@media screen and (max-width: 767px) {
    .request_demo { padding-bottom: 0;}
    .request_demo__content { padding: 0 var(--padding-page); width: 100%; max-width: unset; }
    .request_demo__form__submit { margin: 0 auto 20px; }
}
@media screen and (max-width: 480px) {
    .form__inputs { grid-template-columns: 1fr;}
    .form-group_questions { grid-column: unset;}
}
/* || End Form */

/* || Act Now */
.act_now {
    position: relative;
    background-image: url('/assets/images/food_side.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 100px var(--padding-page);
}
.act_now * { color: var(--white-color);}
.act_now__content { position: relative; z-index: 2;}
.act_now__overlay { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--black-color);
    opacity: 0.5;
    z-index: 1;
}
.act_now__subtitle { margin-bottom: 20px}
.act_now__btn { margin: 0 auto}
.act_now__btn:hover { background-color: var(--white-color);}

/* || End Act Now */