:root {
    --black: #000;
    --white: #fff;
    --grey: #F8F8F8
}

.city-sites .list>li .wrap .address,
.city-sites .list>li .wrap .content .note,
.city-sites .list>li .wrap .items li span,
.city-promo .list .description,
.city-features .description,
.page-template-city .in.breadcrumbs a,
.page-template-city .in.breadcrumbs,
.page-template-city .in.breadcrumbs span,
.city-sites .list>li .wrap .links li a.action-button
{
    font-size: 16px;
}
.website-section .action-button{
    font-size: 18px;   
}
.city-sites .list>li .wrap .address,
.city-sites .list>li .wrap .content .note{
      color: #666;  
}
.city-faq .list .question{
    font-size: 20px;
}
.website-section h2 {
    font-size: 45px;
    line-height: 50px
}
.website-section h1 {
    font-size: 55px;
    line-height: 55px
}
.city-hero .description {
    font-size: 24px;
}
.city-promo .list h3,
.city-features h3,
.city-sites .list>li .wrap h3{
    font-size: 28px;
    line-height: 34px
}




.website-section {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    background-color: var(--grey);
    padding-top: 80px;
    padding-bottom: 80px
}

.website-section .action-button {
    display: inline-block;
    line-height: 42px;
    min-width: 176px;
    text-align: center
}

.page-template-city .in.breadcrumbs {
    position: absolute;
    z-index: 1;
    right: 0;
    left: 0;
    margin: auto
}

.page-template-city .in.breadcrumbs a,
.page-template-city .in.breadcrumbs,
.page-template-city .in.breadcrumbs span {
    color: var(--white);
    background-image: none;
    padding-left: 0
}


.website-section .wrapper {
    width: 1130px;
    margin: auto;
    position: relative
}

.website-section h1 {
    color: var(--white);
}

.website-section p {
    padding: 0;
    margin: 0;
    font-size: inherit;
    color: inherit;
    font-family: inherit;
    line-height: inherit
}

.city-hero {
    height: 576px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center
}

.city-hero:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.6);
    z-index: -1
}

.city-hero .description {
    color: var(--white);
    padding-top: 14px;
    padding-bottom: 20px;
    max-width: 600px
}

.city-sites .list {
    margin: 0;
    padding: 0;
    list-style-type: none
}

.city-sites .list>li {
    margin-top: 24px;
    background-color: var(--white);
    border-radius: 8px;
    overflow: hidden
}

.city-sites .list>li .wrap {
    display: flex;
    align-items: center
}

.city-sites .list>li .wrap .gallery {
    padding: 0;
    flex-basis: 360px;
    display: block;
    direction: rtl;
    width: 360px;
    position: relative;
}
.city-sites .list>li .wrap .gallery .slick-arrow{
    background-image: url(gfx/arrow-city.svg);
    width: 32px;
    height: 32px;
    background-size: auto;
    background-position: center;
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: rgba(255,255,255,.4);
    opacity: 0;
    visibility: hidden;
}
.city-sites .list>li .wrap .gallery:hover .slick-arrow{
    opacity:1;
    visibility:visible;
}
.city-sites .list>li .wrap .gallery .slick-next{
    right: 24px;
    left:auto;
    transform: rotate(0deg)!important;
}
.city-sites .list>li .wrap .gallery .slick-prev{
    left: 24px;
    right:auto;
    transform: rotate(180deg)!important;
}
.city-sites .list>li .wrap .gallery ul.slick-dots{
    bottom: 24px;
}
.city-sites .list>li .wrap .gallery ul.slick-dots li{
    padding: 0 4px;
}
.city-sites .list>li .wrap .gallery ul.slick-dots li.slick-active button{
    opacity: 1;
}
.city-sites .list>li .wrap .gallery ul.slick-dots li button{
    width: 8px;
    height: 8px;
    opacity: .5;
}
.city-sites .list>li .wrap .content {
    flex-basis: calc(100% - 360px);
    padding-right: 24px;
    position: relative;
    height: 276px;
    padding-top: 20px;
    text-align: right;
}

.city-sites .list>li .wrap .gallery .item {
    height: 276px
}

.city-sites .list>li .wrap .gallery .item .image {
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}


.city-sites .list>li .wrap .items {
    padding: 0;
    list-style-type: none;
    margin: 0;
    font-size: 0;
    padding-top: 32px
}

.city-sites .list>li .wrap .items li {
    display: inline-block;
    margin-left: 8px;
    margin-bottom: 8px
}

.city-sites .list>li .wrap .items li span {
    background-color: #F8F8F8;
    border-radius: 40px;
    color: #666;
    padding: 8px 14px;
    display: inline-block
}


.city-sites .list>li .wrap .links {
    padding: 0;
    list-style-type: none;
    display: flex;
    align-items: center;
    column-gap: 20px;
    position: absolute;
    bottom: 24px
}

.city-sites .list>li .wrap .links li a.action-button,.city-sites .list>li .wrap .links li a.action-button-open-tour {
    line-height: 38px;
    font-size: 16px;
}
.city-sites .list>li .wrap .links li a.action-button-open-tour{
    color: var(--black);
    border: 1px solid var(--black);
    font-family: "Assistant",sans-serif;
    font-weight: 700;
    display: inline-block;
    padding-right: 10px;
    padding-left: 10px;
    min-width: 130px;
    text-align: center;
}
.city-sites .list>li .wrap .links li a.info {
    font-weight: 600;
    border-bottom: 1px solid
}

.city-sites .list>li .wrap .links li a.info:hover {
    border: none
}

.city-sites .list>li .wrap .content .note {
    position: absolute;
    left: 16px;
    top: 56px
}

.city-sites .list>li .wrap .content .cheked {
    color: #e11f3f
}

.city-promo {
    text-align: center;
    background-color: var(--white)
}

.city-promo .list {
    margin: auto;
    padding: 0;
    list-style-type: none;
    padding-top: 40px;
    display: flex;
    align-items: stretch;
    justify-content: center;
    column-gap: 24px;
    padding-bottom: 40px;
    flex-wrap: wrap;
}

.city-promo .list li {
    flex: 1
}

.city-promo .list h3 {
    line-height: 34px
}

.city-promo .list .description {
    padding-top: 8px
}

.city-features .descriptio,.city-promo .list .description,.city-features .description {
    color: #666
}

.city-promo .list .image {
    max-height: 200px
}
.city-promo .list .image img{
    max-width: 100%;
}

.city-features {
    text-align: center
}

.city-features h3 {
    padding-top: 28px;
    padding-bottom: 5px
}

.city-features .list {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    column-gap: 27px;
    padding-top: 40px
}

.city-features .list li {
    flex: 1
}

.city-features .image {
    height: 200px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

.city-features .wrap {
    text-align: right
}

.city-clients {
    background-color: var(--white);
    text-align: center
}

.city-clients .list {
    padding: 0;
    margin: 0;
    list-style-type: none;
    padding-top: 40px;
    font-size: 0;--cols: 7;          
  --gap: 12px;        
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    align-items: center;
    justify-content: center;
}

.city-clients li {
    width: 14%;
    height: 100%;
    box-sizing: border-box;
    flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
}
.city-clients li span{display: inline-block;}
.city-clients li img{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%); /* תאימות ישנה */
    max-width: 100%;
}
.city-clients li:hover img{
    filter: none;
    -webkit-filter: none; /* תאימות ישנה */    
}
.city-faq{
    
}
.city-faq .wrap{
    display: flex;
    column-gap: 94px;
}
.city-faq .image{
    flex-basis: 460px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.city-faq .content{
    flex-basis: calc(100% - 460px);
    padding: 94px 0;
}
.city-faq h2{
    
}
.city-faq .list{
    margin: 0;
    padding: 0;
    padding-top: 40px;
    list-style-type: none;
    text-align: right;
    padding-bottom: 28px;
}
.city-faq .list li{
    margin-bottom: 12px;
    background-color: var(--white);
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 4px 10px 0 rgba(0,0,0,.05);
    cursor: pointer;
}
.city-faq .list .question{
    font-weight: 700;
    position: relative;
}
.city-faq .list .answer{
    display: none;
    opacity: 0;
    visibility: hidden;
}
.city-faq .list i{
    background-image: url(gfx/arrow-faq.svg);
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background-size: auto;
    background-repeat: no-repeat;
    background-position: center;
}
.city-faq .list li.active i{
    transform: rotate(180deg);
}
.city-faq .list li.active .answer{
    display: block;
    opacity: 1;
    visibility: visible;
    padding-top: 10px;
}
@media (max-width: 1200px) {
  .website-section h1 {
    font-size: 45px;
    line-height: 45px
}  
.city-hero .description {
    font-size: 18px;
}
.city-hero {
    height: 500px;
}
.website-section h2 {
    font-size: 40px;
    line-height: 45px;
}
.city-promo .list h3,
.city-features h3,
.city-sites .list>li .wrap h3{
    font-size: 26px;
    line-height: 32px;
}
.city-sites .list>li .wrap .links li a.action-button-open-tour{
    min-width: auto;
    display: block;
}
.website-section .wrapper{
    text-align: center;
    width: calc(100% - 32px);
}
.city-hero .description{
    margin: auto;
}
.page-template-city .in.breadcrumbs{
    right: 16px;
}
.city-sites .list>li .wrap{
    display: block;
}
.city-sites .list>li .wrap .gallery{
    width: 100%;
}
.city-promo .list{
  --gap: 16px;
  flex-wrap: wrap;
  gap: var(--gap);
}
.city-sites .list>li .wrap .gallery .item{
    height: 400px;
}
.city-promo .list li{
  flex: 0 0 calc((100% - var(--gap)) / 2);  
}
.city-features .list{
    
--gap: 16px;           /* spacing between items */
    flex-wrap: wrap;
    gap: var(--gap);
}
.city-features .list li{
    flex: 0 0 calc((100% - var(--gap)) / 2);
}
.city-features .image{
    height: 300px;
}
.city-clients .list{
    
--cols: 4;
}
.website-section{
    padding-top: 60px;
    padding-bottom: 60px;
}
.city-faq{
     padding-top: 0px;   
}
.city-faq .wrap{
    display: block;
}
.city-faq .image{
    height: 400px;
    margin: 0 -16px;
}
.city-faq .content{
    padding: 60px 0 0;
}
}
@media (max-width: 479px) {
.city-sites .list>li .wrap .address,
.city-sites .list>li .wrap .content .note,
.city-sites .list>li .wrap .items li span,
.city-promo .list .description,
.city-features .description,
.page-template-city .in.breadcrumbs a,
.page-template-city .in.breadcrumbs,
.page-template-city .in.breadcrumbs span,
.city-sites .list>li .wrap .links li a.action-button
{
    font-size: 14px;
}
.city-features .image {
    height: 142px;
}
.website-section h1{
    font-size: 34px;
    line-height: 34px;
}
.website-section h1 br,.website-section h2 br{
    display:none;
}
.city-sites .list>li .wrap .items{
    padding-top: 20px;
}
.city-sites .list>li .wrap .links{
    position: relative;
    bottom: 0;
    margin-top: 22px;
    column-gap: 12px;
}
.city-sites .list>li .wrap .links li{
    flex-grow: 1;
}
.city-sites .list>li .wrap .content{
    height: auto;
    padding-top: 16px;
    padding-right: 16px;
    padding-left: 16px;
    padding-bottom: 24px;
}
.city-faq .list .question {
    font-size: 16px;
}
.city-features h3 {
    padding-top: 14px;
    padding-bottom: 5px
}
.city-sites .list>li .wrap .links li a.action-button{
    font-size: 16px;
    min-width: auto;
    padding-right: 15px;
    padding-left: 15px;
    display: block;
}
.city-hero{
    height: 560px;
}
.city-promo .list .description{
    display:none;
}
.city-hero .description{
    padding-top: 30px;
    padding-bottom: 40px;
}
.city-clients .list{
    
--cols: 3;
    row-gap: 5px;
}
.city-faq .image{
    height: 240px;
}
.city-hero .description {
    font-size: 16px;
}
.website-section h2{
    font-size: 32px;
    line-height: 34px;
}
.city-sites .list>li .wrap .gallery .item{
    height: 220px;
}
 .city-sites .list>li .wrap h3 {
    font-size: 22px;
    line-height: 28px;
}
.city-promo .list h3,.city-features h3{
    font-size: 20px;
    line-height: 24px;
}
.city-promo .list .image{
    max-width: 130px;
    margin: auto;
}
.city-sites .list>li .wrap .content .note {
    top: 47px;
}
}
@media (min-width: 1200px) {
  .website-section h1 {
    font-size: 45px;
    line-height: 45px
}  
.city-hero .description {
    font-size: 18px;
}
.city-hero {
    height: 500px;
}
.website-section h2 {
    font-size: 40px;
    line-height: 45px;
}
.city-promo .list h3,
.city-features h3,
.city-sites .list>li .wrap h3{
    font-size: 26px;
    line-height: 32px;
}
}
@media (min-width: 1500px) {
 .website-section h1 {
    font-size: 55px;
    line-height: 55px
} 
.city-hero .description {
    font-size: 24px;
}
.city-hero {
    height: 576px;
}
.website-section h2 {
    font-size: 45px;
    line-height: 50px
}
.city-promo .list h3,
.city-features h3,
.city-sites .list>li .wrap h3{
    font-size: 28px;
    line-height: 34px
}
}