/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/
/*header*/
header#header.transparent{
    background: rgba(0,0,0,0);
}
header#header{
    position: fixed;
    top: 0;
    z-index: 10;
    width: 100%;
}
.primary-menu-open header#header.full-header.transparent{
    background: #000;
}
header#header #header-wrap{
    background-color: var(--cnvs-header-sticky-bg);
}
.is-expanded-menu header#header.sticky-header.sticky-header-shrink #header-wrap{
    background-color: var(--cnvs-header-sticky-bg);
}
header#header.transparent #header-wrap{
    background-color: rgba(0,0,0,0);
}
@media screen and (min-width: 992px) {
    header#header #header-wrap a div {
        font-size: 20px;
        line-height: 1.8rem;
        font-weight: 500;
    }
    header#header.sticky-header.sticky-header-shrink #header-wrap a div{
        font-size: 16px;
        line-height: 1.6rem;
    }
}
/* scroll down arrow */
#scroll-to-content:before {
    content: '';
    display: block;
    position: absolute;
    left: 15px;
    bottom: 10px;
    height: 30px;
    width: 30px;
    border: 2px solid #fff;
    transform: rotate(45deg) translateX(-50%);
}
#scroll-to-content {
    display: block;
    position: absolute;
    left: 50%;
    bottom: 20px;
    z-index: 5;
    cursor: pointer;
    height: 1.5em;
    width: 3.5em;
    font-size: 16px;
    font-size: 1rem;
    overflow: hidden;
    opacity: .5;
    transform: translateX(-50%);
    animation: pulseopacity 2s ease-out infinite;
}
@keyframes pulseopacity {
    0%{
        opacity: 1;
    }
    50%{
        opacity:0.5;
    }
    100%{
        opacity: 1;
    }
}
#scroll-to-content .screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}
/* gallery */
@media screen and (min-width: 768px) {
    .gallery .row {
        gap: 20px;
    }
    .gallery .col-md-4 {
        width: calc(33.33% - 14px);
        background-position: top;
        aspect-ratio: 1.5;
        background-size: contain;
    }
}
@media screen and (max-width: 767px){
    .gallery .row .col-md-4,
    .img-text-section .row .col-md-5{
        aspect-ratio: 16 / 10;
    }
    .gallery .row .col-md-4 img{
        object-fit: contain;
        margin-bottom: 20px;
    }
    .gallery{
        margin-top: -2rem;
    }
    .img-text-section .col-md-7.pt-0.col-padding{
        padding-left: calc(var(--bs-gutter-x)* 0.5);
        padding-right: calc(var(--bs-gutter-x)* 0.5);
    }
}

/* img text */
@media screen and (min-width: 768px) {
    .img-text-section .row .col-md-5{
        background-position: top;
    }
    .section.img-text-section:nth-child(2n) .row{
        flex-direction: row-reverse;
    }
}

/* comments */
.mr-3-rem{
    margin-right: 2rem;
}
@media screen and (min-width: 768px){
    .mr-3-rem{
        margin-right: 3rem;
    }
}

/* custom colors */
.bg-white{
    background: white !important;
}
.bg-highlight{
    background: red;
}
.bg-light-gray{
    background: lightgray;
}
.bg-black{
    background: black;
}
/* text position */
.text-right{
    text-align: right;
}
/* text color */
.c-highlight{
    color: red;
}
.c-white{
    color: white;
}
.c-lightgray{
    color: lightgray;
}
.c-black{
    color: black;
}
/* border */
.border-bottom-1{
    border-bottom: 1px solid;
}
/* border color */
.b-c-gray{
    border-color: gray;
}
.b-c-lightgray{
    border-color: gray;
}
.divider::after{
    border-color: var(--cnvs-contrast-300);
}
/* text hover */
.hover-highlight:hover, .hover-highlight:hover i{
    color: red !important;
}
/* custom height */
.h-40-px{
   height: 40px;
}
.min-h-40-px{
    min-height: 40px;
}
/*comments custom gap*/
.comments-section ~ .comments-section{
    margin-top: -6rem !important;
}
.comments-section ~ .comments-section .heading-block{
    display: none;
}
.comments-section ~ .comments-section,
.comments-section ~ .comments-section .content-wrap{
    padding-top: 0 !important;
}
.d-flex.min-h-40-px .d-block{
    width: 100%;
}
.d-flex.min-h-40-px .d-block p{
    margin-bottom: 0;
}
@media screen and (max-width: 768px){
    .comments-section .d-flex.border-bottom-1{
        flex-wrap: wrap;
    }
}
@media screen and (min-width: 1400px){
    .row.gap-30 {
        gap: 26px;
    }
    .row.gap-30 .col-xxl-5 {
        width: calc(41.66666667% - 13px);
    }
    .row.gap-30 .col-xxl-7 {
        width: calc(58.33333333% - 13px);
    }
}
/* perks */
@media screen and (min-width: 992px) {
    .perks .col-md-3{
        max-width: calc(25% - 6px);
    }
}
/* footer */
body a,
#footer a{
    color: #ff0000;
}
body a:hover,
#footer a:hover{
    color: #fff;
}
button.button.bg-highlight:hover{
    background: #fff;
    color: #000;
}