/*card_css*/

body.single-card {font-size: 18px;}
body.single-card h1{font-size: 2rem; line-height: 1;}
body.single-card h2{font-size: 1.6rem; line-height: 1;}
body.single-card h3{font-size: 1.2rem; line-height: 1;}

main.card{max-width: 380px;
    margin: 100px auto; display:block;}

.single-card header{display:none;}

ul.card-icons {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    justify-content: space-evenly;
    align-items:  center;
    align-content: center;
    padding-inline-start: unset; grid-gap: 20px; margin: 0 20px;
}
ul.basic_link {list-style: none;display: grid;grid-template-columns: repeat(2, 1fr);grid-template-rows: auto;
    justify-content: space-evenly;
    align-items:  center;
    align-content: center;
    padding-inline-start: unset; grid-gap: 20px; margin: 20px;
}

ul.card-icons li, ul.basic_link li{text-align: center;  justify-self: stretch; vertical-align: middle;}
ul.card-icons li a{display: flex;flex-direction: column;aspect-ratio: 1/1;justify-content: center;}
ul.card-icons li a i{font-size: 1.5rem; }
ul.card-icons li a span{font-size: 0.9rem;}
ul.basic_link li a{display: flex;flex-direction: row;align-content: center;justify-content: center;align-items: center;flex-wrap: nowrap;padding:10px 20px;gap: 10px;}
.elementor-location-popup p{font-size: 16px;}
.card-template-default .elementor-location-popup .elementor-post__title{font-size: 2rem;}

#main_slider.elementor-skin-slideshow .elementor-main-swiper{height: 600px;}
#main_slider.elementor-skin-slideshow .elementor-main-swiper .elementor-carousel-image{aspect-ratio: 16/9; object-fit: cover; height: auto;}
#main_slider .elementor-skin-slideshow .elementor-thumbnails-swiper .swiper-slide:not(.swiper-slide-active) .elementor-carousel-image{background-color: #898989; height: 2px;}
#main_slider .elementor-swiper .elementor-thumbnails-swiper{margin-top: 20px;}
#main_slider .elementor-swiper .elementor-thumbnails-swiper .swiper-wrapper .swiper-slide-active .elementor-carousel-image{background-color: #000000; height: 2px;}

#main_slider .swiper-slide{display: flex; flex-direction: column;}

.swiper-image-stretch .swiper-slide .swiper-slide-image{width: 100%; object-fit: cover; aspect-ratio: 6/4;}
#main_slider .swiper-slide .content{text-align: center; padding: 20px; }

#main_slider .swiper-container-rtl .elementor-swiper-button-next {right: 10px;}
#main_slider .swiper-container-rtl .elementor-swiper-button-prev {left:10px; right: unset;}

.container {  display: grid;
    grid-auto-flow: row dense;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 40px 40px 40px 60px;
    /*gap: 20px 20px;*/
    grid-auto-flow: row;
    grid-template-areas:
    "left-long top-wide"
    "left-long middel-wide"
    "left-long about-button"
    "bottom-wide bottom-wide";
    margin: 0 20px;
}

.left-long { grid-area: left-long; padding-left: 20px; }

.left-long img {
    -webkit-mask-image: url(https://z-d.co.il/wp-content/plugins/elementor/assets//mask-shapes/circle.svg);
    -webkit-mask-size: contain;
    -webkit-mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    align-self: stretch;
    grid-area: left-long;}

.top-wide { grid-area: top-wide; }
.about-button {grid-area: about-button; }
.bottom-wide a{border: 1px solid;border-radius: 20px;padding: 0 15px;}
.middel-wide { grid-area: middel-wide; }

.bottom-wide {justify-self: right;align-self: center;grid-area: bottom-wide; }
@keyframes slidein{
    from{left:-80px;}
    to{left:0px;}
}
@keyframes slideout{
    from{left:0px;}
    to{left:-80px;}
}

#share_all{ width: fit-content;  position: absolute; bottom: 80px; left:-80px; z-index: 10; display: block; animation-duration: 2s; animation-name: slideout; }
#share_all.open {left: 0; display: block!important; animation-duration: 2s; animation-name: slidein;}
#share_all .elementor-widget-container{display: flex; flex-direction: row;  align-items: flex-start; }

div#share {background: #fff; padding: 10px 5px; border-radius: 0 10px 10px 0;}
#share_all #share a{display: inline-flex; flex-direction: column; gap: 10px;}
#share_all #share span{ writing-mode: tb-rl; transform: rotate(-180deg);}

div#share_but { background-color: #ffffff;  border-radius: 0 0 20px 0; }
#share_but ul{list-style: none; padding-inline-start: unset; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-between; align-items: center; width: 80px; aspect-ratio: 1/1; gap: 15px; margin: 15px auto;}
#share_but ul li{}
#share_but ul li a{display: block; width: 50px;line-height: 50px;object-fit: cover;max-width: 100%;text-align: center; border: 1px solid; border-radius: 50%;}

@media screen and (max-width: 767px){
    main.card{ max-width: 100%; margin: 0;}
}