/* ------------------------- Components -------------------------------------------------- */

/* ------------------------- Shape Round -------------------------------------------------- */

/* ------------------------- Shape Round -------------------------------------------------- */

.shape-round {
   --height-percentage: 10;
   position: absolute;
   width: 100%;
   padding-top: calc(var(--height-percentage) * 1%);
   pointer-events: none;
   overflow: hidden;
}

.shape-round::after {
   pointer-events: all;
   --width-round: 266vw;
   content: "";
   width: var(--width-round);
   height: var(--width-round);
   display: block;
   background-color: var(--color-offwhite);
   left: 50%;
   transform: translateX(-50%);
   position: absolute;
   border-radius: 50%;
}

.shape-round.dark::after {
   background-color: var(--color-dark);
}

.shape-round.light::after {
   background-color: var(--color-offwhite);
}

.shape-round.primary::after {
   background-color: var(--color-primary);
}

.shape-round.beige::after {
   background-color: var(--color-beige);
}


/* Variants */

.shape-round.bottom {
   transform-origin: bottom;
   bottom: -1px;
}

.shape-round.bottom::after {
   top: 0;
}

.shape-round.top {
   transform-origin: top;
   top: -1px;
}

.shape-round.top::after {
   bottom: 0;
}

.shape-round.grow {
   transform: scaleY(0);
}

.shape-round.shrink {
   transform: scaleY(1);
}
 
 /* ------------------------- Half Image 50/50 -------------------------------------------------- */
 
.section-half-image-50-50 {
    overflow: hidden;
    padding-top: calc(var(--section-padding) * 1.25);
    padding-bottom: calc(var(--section-padding) * 1.25);
}
 
.section-half-image-50-50.image-right .thumbnail {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 50%;
    overflow: hidden;
}
 
.section-half-image-50-50.image-left .thumbnail {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 50%;
    overflow: hidden;
}
  
@media (hover: hover) {
    /* Loco Styling */
    .section-half-image-50-50 .thumbnail img {
       width: 100%;
       height: calc(100% + 20vh);
       top: 0vh;
    }
}
  
.section-half-image-50-50.full-width.image-right .row {
    align-items: center;
    justify-content: flex-start;
    padding-right: var(--container-padding);
}
 
.section-half-image-50-50.image-right .row {
    align-items: center;
    justify-content: space-between;
}
 
.section-half-image-50-50.full-width.image-left .row {
    align-items: center;
    justify-content: flex-end;
    padding-left: var(--container-padding);
}
 
.section-half-image-50-50.image-left .row {
    align-items: center;
    justify-content: space-between;
}
 
.section-half-image-50-50 .row .col {
    width: calc(50% - (var(--gap-padding-big) * 0.5));
}
 
.section-half-image-50-50 .content-block {
    padding-right: calc(var(--gap-padding-big) * 0.5);
    display: flex;
    flex-direction: column;
}
 
.section-half-image-50-50 .styled-content {
    padding-top: 1.75em;
}
 
.section-half-image-50-50 .styled-content p {
    color: rgba(var(--color-light-rgb), 0.8);
}
 
.section-half-image-50-50 .btn-row .arrow.second .arrow-fill {
    background: var(--color-secondary);
}
 
.section-half-image-50-50 .btn-row .arrow.first .arrow-fill {
    background: var(--color-primary);
}
 
.section-half-image-50-50 .btn-row .btn-content .btn-fill {
    background: var(--color-light);
}
 
.section-half-image-50-50 .btn-row .btn-content .btn-text {
    color: var(--color-dark-medium);
}
  
.section-half-image-50-50 .line-decoration {
    top: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(-1);
}
 
.section-half-image-50-50 .line-decoration .line {
    background: var(--color-dark-medium);
    background: rgba(var(--color-light-rgb), 0.2);
}
 
.section-half-image-50-50 .image:before {
    content: "";
    padding-top: 100%;
    display: block;
}
 
.image-left .col-content {
    order: 2;
}
 
.image-left .col-image {
    order: 1;
}
 
.image-right .col-content {
    order: 1;
}
 
.image-right .col-image {
    order: 2;
}

.col-image img {
    border-radius: var(--border-radius);
}
  
@media screen and (max-width: 1024px) {
  
.section-half-image-50-50 {
    padding-top: 0;
    padding-bottom: var(--section-padding);
}
 
.section-half-image-50-50 .container {
    padding-left: 0;
    padding-right: 0;
}

.section-half-image-50-50 .row {
    justify-content: center;
    /* padding-top: var(--section-padding); */
}

.section-half-image-50-50 .row .col.col-image {
    padding-top: var(--container-padding);
    margin-bottom: var(--container-padding);
}

.section-half-image-50-50 .row .col.col-image img {
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.section-half-image-50-50 .row .col.col-content {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}
 
.section-half-image-50-50 .row .col {
    width: 100%;
    /* max-width: 36em; */
}


 
.section-half-image-50-50 .content-block {
    padding: 0;
}
 
.section-half-image-50-50.image-left .thumbnail {
    position: relative;
    width: 100%;
    aspect-ratio: 2/3;
    border-radius: var(--border-radius-medium);
}
 
.section-half-image-50-50.image-right .thumbnail {
    position: relative;
    width: 100%;
    aspect-ratio: 2/3;
    border-radius: var(--border-radius-medium);
}
 
.section-half-image-50-50 .line-decoration {
    display: none;
}
}
 
/* ------------------------- Bullet List -------------------------------------------------- */
 
ul.bulleted-list {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}
 
ul.bulleted-list.horizontal {
    display: flex;
    flex-direction: row;
}
 
ul.bulleted-list li {
    position: relative;
    padding-left: 1.83em;
}
 
ul.bulleted-list li::before {
    content: "";
    position: absolute;
    left: 0.75em;
    top: 0.8em;
    transform: translateY(-50%);
    width: 0.33em;
    height: 0.33em;
    background: var(--color-primary);
    border-radius: 1em;
}
 
/* -- FAQ -- */
 
section.section.accordion .col {
    flex-direction: row;
}
 
section.section.faq .row:not(:last-child) {
    padding-bottom: var(--container-padding);
    justify-content: space-between;
    align-items: center;
    gap: 2em;
}

section.section.faq .row .line {
    position: relative;
    z-index: 2;
    flex-grow: 1;
    flex-shrink: 1;
    margin: calc(var(--font-size-h-sm)* var(--font-height-h-sm)* .5 + .1rem) 0 0;
    width: auto;
    height: .1667rem;
    background: var(--color-black);
}

section.section.faq .row .line:before, section.section.faq .row .line:after {
    position: absolute;
    top: calc(50% - .33335rem);
    box-sizing: border-box;
    width: .6667rem;
    height: .6667rem;
    border: .1667rem solid var(--color-black);
    border-radius: 50%;
    content: ""
}

section.section.faq .row .line:before {
    left: -0.6667rem
}

section.section.faq .row .line:after {
    right: -0.6667rem
}
 
.faq-question {
    font-weight: 900;
}
 
.faq-item {
    padding-bottom: 1em;
}

ul.accordion {
    display: flex;
    flex-direction: column;
    gap: .5em;
}

ul.accordion .col {
    gap: 0;
}

.bottom-wrap p {
    padding-bottom: var(--gap-padding);
}

.section.theme-light span.chevron svg path {
    stroke: var(--color-text);
}

.section.theme-dark span.chevron svg path {
    stroke: var(--color-text-light);
}

.accordion-icon {
    width: 18px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.accordion-icon-line {
    width: 15px;
    height: 2px;
    background: var(--primary-color);
    transition: background .07s linear;
    position: absolute;
    display: block;
}

.accordion-icon-line:first-child {
    transition: transform .2s cubic-bezier(0.645, 0.045, 0.355, 1), background .07s linear;
    transform: rotate(90deg);
}
 
.accordion .single-accordion-item svg {
    transition: var(--animation-primary);
    transform: rotate(0deg);
}
 
.accordion .single-accordion-item[data-accordion-status="active"] svg {
    transform: rotate(-180deg);
}

.accordion .single-accordion-item[data-accordion-status="active"] .accordion-icon-line:first-child {
    transform: rotate(0deg);
}
 
.accordion .single-accordion-item {
    /* flex-basis: 45%;  */
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--color-border);
}
  
.section.theme-light .accordion .single-accordion-item {
    border-bottom: 1px solid rgba(var(--color-black-rgb), 0.1);
    background-color: var(--color-offwhite-dark);
    border-radius: var(--border-radius-small);
}

.accordion .single-accordion-item .top {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--col-gap);
    justify-content: space-between;
    padding: 1em;
}
 
.accordion .single-accordion-item .bottom {
    display: grid;
    grid-template-rows: 0fr;
    transition: var(--animation-primary);
    position: relative;
    padding: 0 1em;
}
 
.accordion .single-accordion-item .bottom-wrap {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: left;
}
 
@media screen and (max-width: 860px) {
 
ul.accordion {
    flex-direction: column;
}
}
 
/* Active */
 
.accordion .single-accordion-item[data-accordion-status="active"] .bottom {
     grid-template-rows: 1fr;
} 
 
@media screen and (max-width: 540px) {
.single-accordion-item {
    flex-basis: 100%; /* Each item takes up 45% width */
}
}
 
/* ------------------------- Blog grid -------------------------------------------------- */

nav.filters-nav-grid {
	padding-top: var(--gap-padding);
	padding-bottom: var(--gap-padding);
	display: flex;
	align-items: center;
    justify-content: center;
}

ul.filters-menu {
	display: flex;
	gap: 1em;
}

.single-post-item {
    display: flex;
    flex-direction: column;
}

ul.blog-posts-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--section-padding-blog) var(--gap);
    --gap: var(--gap-padding);
    --columns: 3;
}

ul.blog-posts-grid li {
    width: calc((100% - (var(--gap-padding) * (var(--columns) - 1))) / var(--columns));
}

ul.filters-menu li a {
	border: 1px solid var(--color-primary-light);
    border-radius: 12px;
    padding: 8px 16px;
	color: #1A1A1A80;
}

ul.filters-menu li a.active {
	border: 1px solid;
    border-radius: 12px;
    padding: 8px 16px;
	color: var(--color-text);
}

@media (hover: hover) {

ul.filters-menu li a:hover {
	border: 1px solid var(--color-text);
    border-radius: 12px;
    padding: 8px 16px;
	color: var(--color-text);
}
}

@media screen and (max-width: 860px) {

ul.blog-posts-grid li {
	width: 100%;
}

nav.filters-nav-grid {
    justify-content: flex-start;
	width: 100%;
    overflow-x: auto;
	-ms-overflow-style: none;  
    scrollbar-width: none;
}

.filters-nav-grid::-webkit-scrollbar {
    display: none;  
}

ul.filters-menu {
	gap: 0;
	flex-wrap: nowrap;
}

ul.filters-menu li {
    flex: 0 0 auto;
}
}

/** Blog section **/

.blog-section-header {
	text-align: center;
	margin-bottom: 2em;
}

.pre-header {
	opacity: .5;
}

.blog-image img {
	border-radius: var(--border-radius-small);
	width: 100%;
	height: auto;
}

.blog-content {
	padding: 1.5em 0 0 0;
    display: flex;
    flex-direction: column;
    gap: .5em;
}

.blog-content h3{
	/* font-weight: 600; */
	line-height: 1.4;
    margin-bottom: .5em;
}

.blog-meta {
	display: flex;
	gap: .5em;
	opacity: .5;
	align-items: center;
}

.post-categories {
	opacity: .5;
}

.blog-item h3 {
	margin-bottom: 0;
    line-height: 1.2;
}

.recent-blogs-grid {
	display: flex;
	gap: 1em;
}

.blog-section .btn-row {
	display: flex;
    justify-content: center;
}

.section.blog .container {
	display: flex;
    flex-direction: column;
    gap: 2em;
}

@media screen and (max-width: 1024px) {
.blog-item {
	width: calc(50% - (var(--gap-padding-big) * 0.5))
}
}

@media screen and (max-width: 860px) {

.recent-blogs-grid {
	flex-direction: column;
}

.blog-item {
	width: 100%;
}
}

/* ------------------------- Cards -------------------------------------------------- */

.cards .single-card {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
 }
 
 .cards .single-card .card-image {
    width: 100%;
    overflow: hidden;
    position: relative;
    border-radius: var(--border-radius);
 }
 
 .cards .single-card .card-image::before {
    content: "";
    padding-top: 133.333%;
    display: block;
 }
 
 .cards .single-card .overlay-gradient {
    background: linear-gradient(0deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.2) 100%);
    transform: scale(1,1);
 }
 
 .cards .single-card .overlay-dark {
    transition: all var(--animation-smooth);
    opacity: 0;
 }
 
 .cards .single-card .card-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 1.5);
    justify-content: space-between;
    padding: calc(var(--gap) * 1.5) var(--gap);
 }
 
 .cards .single-card .card-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    z-index: 2;
 }
 
 .cards .single-card .card-row-info {
    gap: 1em;
    padding-top: 2.5em;
 }
 
 .cards .single-card .card-content .card-row-eyebrow {
    padding-top: 1.25em;
 }
 
 .cards .single-card .card-content .eyebrow {
    color: var(--color-white);
    opacity: 0.66;
 }
 
 .cards .single-card .card-content h3 {
    color: var(--color-white);
 }
 
 .cards .single-card .card-content p {
    color: var(--color-text-light);
 }
 
 .cards .single-card .card-content .btn .btn-content {
    background-color: var(--color-primary-dark);
    border: 1px solid var(--color-primary-dark);
 }
 
 .cards .single-card .card-content .btn .btn-content span {
    color: var(--color-text-light);
 }

 .cards .single-card .card-content .card-row.btn .btn.btn-fill:hover {
    color: var(--color-text-light);
    border: 1px solid var(--color-text-light);
 }
 
 @media screen and (max-width: 1024px) {
 
    .cards .single-card .card-image::before {
       content: "";
       padding-top: 100%;
       display: block;
    }
 
    .cards .single-card .card-row-info {
       padding-top: 0.5em;
       gap: 0.75em;
    }
 
 }
 
 @media (hover: hover) { 
    @media screen and (min-width: 1025px) {
 
        .cards .single-card a:hover .overlay-dark {
          opacity: 0.7;
       }
 
       /* .single-card:hover .btn .btn-content span {
          transition: all var(--animation-smooth);
          transform: translateY(calc(var(--btn-shadow-distance) * -1)) rotate(0.001deg);
          color: transparent;
          text-shadow: 0px var(--btn-shadow-distance) var(--color-white);
       } */
    }
 }

 

 /* ------------------------- Filter -------------------------------------------------- */

.filter {
    display: flex;
    gap: 0.25em;
 }
 
 .single-filter {
    border: 1px solid #F7F7FA;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--animation-primary);
    cursor: pointer;
 }
 
 .single-filter span {
    padding: 0.3em 1em;
    font-size: 0.75em;
    white-space: nowrap;
    color: var(--color-dark);
    transition: var(--animation-primary);
 }
 
 .single-filter[data-card-status="active"] {
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
 }
 
 .single-filter[data-card-status="active"] span {
    color: var(--color-text-light);
 }
 
 /* ------------------------- Dots -------------------------------------------------- */
 
 .dots {
    display: flex;
    gap: 0.4em;
 }
 
 .single-dot {
    border: 1px solid var(--color-text);
    border-radius: 100em;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--animation-primary);
    width: 0.6em;
    height: 0.6em;
    cursor: pointer;
 }
 
 .single-dot[data-card-status="active"] {
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
 }

 /* ------------------------- Styled Title Row -------------------------------------------------- */

.styled-title-row {
    padding-bottom: calc(var(--gap) * 2.5);
 }
 
 .styled-title-row .col {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 0.5);
    max-width: calc(var(--title-size) * 7);
 }
 
 .styled-title-row.centered {
    justify-content: center;
 }
 
 .styled-title-row.centered .col {
    align-items: center;
    text-align: center;
 }