
/************************************************************************
       Breadcrumbs
************************************************************************/
.breadcrumb{
    padding: 0 6rem;
    margin-top: 4rem;
}
.breadcrumb ul {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--gray-color);
    list-style: none;
    display: flex;
}

.breadcrumb ul li:not(:last-of-type) {
    margin-right: 1rem;
    position: relative;
}


.breadcrumb ul li:not(:last-of-type) i {
    margin: 0 0.5rem;
}



/***********************************************
            Image Gallery - Details
*************************************************/

.image-grid {
    --gap: 1rem;
    --num-cols: 3;
    --row-height: 30rem;

    box-sizing: border-box;

    display: grid;
    grid-template-columns: repeat(var(--num-cols), 1fr);
    grid-auto-rows: var(--row-height);
    gap: var(--gap);
    margin-top: 2rem;
}
  
  .image-grid > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1.5rem;
    cursor: pointer;
  }
  
  .image-grid-col-2 {
    grid-column: span 2;
  }
  
  .image-grid-row-2 {
    grid-row: span 2;
  }


  .slick-dots {
        top: -5rem;
    }

.slick-dots li.slick-active button:before {
    color: var(--primary-color);
}

.slick-next{
    z-index: 555;
}

.gallery-image {
    margin-top: 6rem;
}

.slick-list{
    max-height: 60rem;
    overflow: hidden;
}


/************************************************************************
       Description section
************************************************************************/

.description article {
    padding: 3rem 6rem;
}

.description article div.more {
    height: 40rem;
    overflow: hidden;
}

.description article:nth-of-type(even) {
    background:var(--background-gray);
}

.description article h4 {
    font-size: 2.4rem;
    margin-bottom: 1.5rem;
}

.description article p {
    color:var(--text-gray-color);
}

.description article .link {
    margin-top: 1.5rem;
}

.description article .link button {
    display: inline-block;
    border: 1px solid var(--primary-color);
    padding:1rem 2rem;
    color:var(--primary-color);
    border-radius: .5rem;
}




.start-planning{
    margin: 4rem 0;

}

.start-planning a {
    text-transform: uppercase;
    padding: 1rem 2.5rem;
}



/************************************************************************
      FAST Facts
************************************************************************/

.fast-facts {
    padding: 3rem 6rem;
    
}
.fast-facts > div {
    display:grid;
    --gap: 2rem;
    --num-cols: 6;
    grid-template-columns: repeat(var(--num-cols), 1fr);
    gap: var(--gap)
}

.fast-facts > div > article {
    padding:2rem;
    border: 1px solid var(--border-color);

}
.fast-facts > div > article:nth-of-type(even){
    background:var(--background-gray);
}

.fast-facts > div > article header {
    
    color:var(--primary-color);
    font-size: 1.8rem;
    padding: .5rem 1rem;
}

.fast-facts > div > article p {
    color:var(--text-gray-color);
    font-size: 1.4rem;
    padding:1rem;
}

.fast-facts h4 {
    font-size: 2.4rem;
    margin-bottom: 1.5rem;
}


  @media screen and (max-width: 767px) {
    .image-grid {
      --num-cols: 1;
      --row-height: 200px;
    }

    .image-grid > img:not(:nth-of-type(1)){
        display:none;
    }
    .image-grid-row-2 {
        grid-row: span 1;
    }
    .section-padding {
        padding:2rem;
    }
    .description article, .fast-facts {
        padding: 3rem;
    }

    .fast-facts > div {

        --num-cols: 1;

    }
	.po-interset-breadcrumbs {
        flex-direction: column-reverse;
		gap: 1rem;
    }
    .po-interset-breadcrumbs ul li {
        text-wrap: nowrap;
    }
	.po-interset-breadcrumbs ul {
        justify-content: center !important;
    }
  }


  @media (min-width: 768px) and (max-width: 991px) {
    .fast-facts > div {
        --num-cols: 2;
    }
  }

  @media (min-width: 992px) and (max-width: 1400px) {
    .fast-facts > div {
        --num-cols: 4;
    }
  }

  @media screen and (max-width:460px) {
    .po-interset-breadcrumbs ul {
        flex-wrap: wrap;
    }
  }