/*---------------------------------------------------------------------------------------
  home zone 0 : image slider 
---------------------------------------------------------------------------------------*/
.image-slider-zone {
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;   
    transition: background 2s ease-in-out;
    width: 100%;
    height: 35vw;
}
 
/* texts */
.image-slider-zone > .texts {
    position: absolute;
    display: flex;
    flex-direction: column;
    left: var(--ImageSlider-Texts-Left);
    top: 28%;
    color: white;
    max-width: var(--ImageSlider-Texts-MaxWidth);
}

.image-slider-zone > .texts > .text1 {
    font-weight: var(--HeavyBold);
    font-size: var(--ImageSlider-Title-FontSize);  /* 40px; 3.2vw;  */ 
    cursor: pointer;
}

.image-slider-zone > .texts > .text2 {
    font-weight: var(--SemiBold);
    font-size: var(--ImageSlider-Text-FontSize);  /* 14px; 1vw; */
    padding: 3% 0 0 0;
    cursor: pointer;
}

/* info, prev-next buttons etc. */
.image-slider-zone > .info {
    position: absolute;
    display: none;          /* flex - mariag */
    align-items: center;
    justify-content: space-evenly;
    left: 0;
    bottom: 0;
    background-color: white;
    z-index: 100;
    font-size: var(--ImageSlider-Info-Text-FontSize);
    font-weight: bold;
    width: var(--ImageSlider-Info-Width);
    height: var(--ImageSlider-Info-Height);
}

.image-slider-zone > .info > * {
    position: relative;
    display: flex;
    justify-content: center;
}

.image-slider-zone > .info > .buttons {
    display: flex;
    align-items: center;
    font-size: var(--ImageSlider-Buttons-FontSize);
    font-weight: var(--HeavyBold);        
}

.image-slider-zone > .info > .buttons button {
    background-color: transparent;
}

.image-slider-zone > .info > .buttons .btn-prev {
    padding: 0 8px 0 0;
}

.image-slider-zone > .info > .buttons .btn-next {
    padding: 0 0 0 8px;
}

.image-slider-zone > .info > .products {
    white-space: nowrap;
    cursor: pointer;
}

.image-slider-zone > .info > .products .text {
     border-bottom: 5px solid var(--Yellow);
}

/*---------------------------------------------------------------------------------------
  home yellow zone 
---------------------------------------------------------------------------------------*/

.yellow-zone {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    background-color: var(--Yellow);
    align-items: center;
    font-weight: bolder;
}

.yellow-zone > .part-1 {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    height: var(--Home-YellowZone-Part-Height);
    width: var(--Home-YellowZone-Part1-Width);
    padding: var(--Home-YellowZone-Part1-Padding);
}

.yellow-zone > .part-1 .title {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.6;    
}

.yellow-zone > .part-1 > .text {
    font-size: var(--Home-YellowZone-Part1-Text-FontSize);
    font-weight: normal;
    line-height: 1.6;    
}

.yellow-zone > .part-2 {
    display: flex;
    position: relative;
    align-items: center;
    height: var(--Home-YellowZone-Part-Height);
    width: var(--Home-YellowZone-Part2-Width);
    padding: var(--Home-YellowZone-Part2-Padding);
}

.yellow-zone > .part-2 > .sign-up {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* clip-path: polygon(0 0, 85% 0%, 100% 100%, 0% 100%); */    
    height: 65px;
    width: 50%;
    background-color: white;
    white-space: nowrap;
}

.yellow-zone > .part-2 > .login {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 10%;
    width: 50%;    
}


/*---------------------------------------------------------------------------------------
  home zone : services 
---------------------------------------------------------------------------------------*/
/* services-zone items 
.services-zone .items {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    font-size: var(--Home-Services-Item-FontSize);
    font-weight: var(--HeavyBold);
    color: var(--White);
}

.services-zone .items > .item {
    position: relative; 
    min-height: var(--Home-Services-Item-Height);
    border-top: var(--Home-Services-Item-BorderTop);
}

.services-zone .items > .item .image-container {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;   
    width: 100%;
    height: 100%;
}

.services-zone .items > .item .image-container > .title-container {
    position: absolute;
    display: flex;
    bottom: 20%;
    left: 3.5%;
    max-width: 65%;
}

.services-zone .items > .item .image-container > .title-container > .title {
    position: relative;
    display: flex;
    flex-wrap: wrap;   
    color: var(--White);
    text-shadow: 1px 1px black;   
    text-decoration: underline var(--Yellow) solid; 
    text-decoration-thickness: 4px;
    text-decoration-skip-ink: none;
}
*/
/* hover 
.services-zone .items > .item:hover .image-container > .title-container {
    display: none;
}

.services-zone .items > .item .image-container > .hover-container {
    position: relative;
    display: none;
    flex-direction: column;
    height: 100%;
    width: 76%;
    background-color: var(--Yellow);
    color: var(--Black);
    opacity: 0.85;    
    padding: 11% 10% 7% 10%;
    font-size: 14px;
}

.services-zone .items > .item .image-container > .hover-container > .title {
    position: relative;
    display: flex;
    font-size: 28px;
    font-weight: var(--HeavyBold);
    margin: 0 0 20px 0;
}

.services-zone .items > .item .image-container > .hover-container > .text {
    position: relative;
    display: flex;
    font-weight: bold;
}

.services-zone .items > .item .image-container > .hover-container > .btn-more {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--Black);
    color: var(--White);
    font-weight: bold;
    height: 50px;
    width: 160px;
}

.services-zone .items > .item:hover .image-container > .hover-container {
    display: flex;
}

*/


/*---------------------------------------------------------------------------------------
  home zone : popular products 
---------------------------------------------------------------------------------------*/
.popular-products-zone .title {
    height: var(--Home-Zone-Title-Height);
}