/* ===================================================================
 * # INFORMATION SECTION
 *
 *
 * ------------------------------------------------------------------- */
 .info {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    padding: var(--vspace-1) 0;
    margin-top: 80px;
}

/* --------------------------------------------------------------------
 * # PRODUCTS - HEAD
 * -------------------------------------------------------------------- */

.info-title {
    line-height: 1.5;
    color: var(--color-black);
    padding: 0 calc(var(--gutter) * 2) 0 calc(var(--gutter) * 2 + var(--vspace-0_25));
    position: relative;
    font-family: 'Monument Extended Ultra Bold';
    margin: 0;
    font-size: var(--text-display-2);
    text-align: center;
}

.info-subtitle {
    line-height: 1.25;
    color: var(--color-black);
    padding: var(--vspace-0_25) calc(var(--gutter) * 2) var(--vspace-0_25) var(--vspace-0_25);
    position: relative;
    font-family: 'Monument Extended Regular';
    margin: 0;
}

.date {
    height: fit-content;
    padding: 0 0 0 calc(var(--gutter) * 2 + var(--vspace-0_25));
}

.date p {
    font-family: 'Montserrat SemiBold';
    font-size: var(--text-sm);
    color: var(--color-gray-14);
}

/* --------------------------------------------------------------------
 * # INFORMATION - BODY
 * -------------------------------------------------------------------- */

.info-body {
    height: fit-content;
    padding-bottom: 30px;
}

.info-body-wrapper {
    margin: var(--vspace-1) 0;
    padding: 0 calc(var(--gutter)* 2);
    display: flex;
    flex-flow: row wrap;
}

.info-body-wrapper .column {
    margin: 0 0 var(--vspace-0_5) 0;
}

.info-body-wrapper .column.text {
    padding: var(--vspace-0_25) 0;
}

.info-body-wrapper .column.text ul li {
    font-family: 'Montserrat Medium';
    font-size: var(--text-md);
    line-height: 1.5;
    padding: var(--vspace-0_175) 0;
    margin: 0 0 0 var(--vspace-1);
    text-align: justify;
}

.info-body-wrapper .column.text ol li {
    font-family: 'Montserrat Medium';
    font-size: var(--text-md);
    line-height: 1.5;
    padding: var(--vspace-0_175) 0;
    margin: 0 0 0 var(--vspace-1);
    text-align: justify;
}

.info-body-wrapper .column.text p {
    font-family: 'Montserrat Medium';
    font-size: var(--text-md);
    line-height: 1.5;
    padding: var(--vspace-0_25) var(--vspace-0_25) var(--vspace-0_25) var(--vspace-0_25);
    text-align: justify;
}

/* @media screen and (max-width: 1400px) {
    .info-title {
        font-size: var(--text-display-1);
    }
}

@media screen and (max-width: 1100px) {
    .info-title {
        font-size: var(--text-xxl);
    }
} */

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

    .info-title {
        padding: 0 var(--gutter) 0 calc(var(--gutter) * 1 + var(--vspace-0_25));
        line-height: 1.375;
        font-size: var(--text-display-1);
    }

    .info-subtitle {
        padding: 0 var(--gutter) 0 var(--vspace-0_25);
    }

    .info-body-wrapper {
        padding: 0 calc(var(--gutter) * 1);
    }

    .date {
        height: fit-content;
        padding: 0 0 0 calc(var(--gutter) * 1 + var(--vspace-0_25));
    }
}

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

    .info-title {
        padding: 0 calc(var(--gutter) * 0.5) 0 calc(var(--gutter) * 0.5 + var(--vspace-0_25));
        font-size: var(--text-display-1);
        line-height: 1.25;
    }

    .info-subtitle {
        padding: 0 var(--gutter) 0 var(--vspace-0_25);
        font-size: var(--text-sm);
    }

    .info-body-wrapper {
        padding: 0  calc(var(--gutter) * 0.5);
    }

    .info-body-wrapper .column {
        margin-bottom: 0;
    }

    .info-body-wrapper .column.text p {
        font-size: var(--text-sm);
    }

    .info-body-wrapper .column.text ul li {
        font-size: var(--text-sm);
    }

    .info-body-wrapper .column.text ol li {
        font-size: var(--text-sm);
    }

    .date {
        height: fit-content;
        padding: 0 0 0 calc(var(--gutter) * 0.5 + var(--vspace-0_25));
    }
}

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

    .info-title {
        font-size: var(--text-xxxl);
    }
}




/* ===================================================================
 * # testimonials
 *
 *
 * ------------------------------------------------------------------- */

.testimony-wrapper {
    display: flex;
    justify-content: center;
}

 .s-testimonials {
    padding-top    : var(--vspace-4_5);
    padding-bottom : var(--vspace-4);
}

.s-testimonials .swiper-container {
    padding-bottom : var(--vspace-2);
}

.s-testimonials__content {
    /* margin-left: var(--vspace-0_25); */
    margin-bottom: var(--vspace-0_625);
    /* margin-right: var(--vspace-0_25); */
    display: flex;
    width: 90vw;
    row-gap: 25px;
}

.s-testimonials__content > .column {
    padding: 0 30px 60px 30px;
}

.s-testimonials__content > div > .card {
    background-color: var(--color-gray-4);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    padding: 5px 25px 25px 25px;
}

.s-testimonials__content > div > .card-header {
    background-color: var(--color-gray-9);
    border-radius: 10px 10px 0 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    padding: 15px 25px 10px 25px;
}

/* ------------------------------------------------------------------- 
 * ## testimonial slider 
 * ------------------------------------------------------------------- */
.s-testimonials__slide {
    position : relative;
}

.s-testimonials__author {
    display       : inline-block;
    min-height    : var(--vspace-2);
    /* margin-bottom : var(--vspace-0_625); */
    padding-left  : calc(2.25 * var(--space));
    position      : relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 20px var(--vspace-0_625) 20px;
    width: 100% !important;
}

.s-testimonials__author .testimonial-img {
    width: 75px;
    border-radius: 5px;
    margin-right: 15px;
  }

  .s-testimonials__author .testimonial-info {
    width: 75px;
    height: 75px;
    border-radius: 5px;
    opacity: 0;
    position: absolute;
    left: 30px;
    top: 30px;
    z-index: 3;
    transition: all ease-in-out 0.5s;
    background: color-mix(in srgb, var(--default-color), transparent 25%);
    padding: 15px;
    align-content: center;
    text-align: center;
    font-size: larger;
  }

  .s-testimonials__author .testimonial-info:hover {
    opacity: 1;
  }

  .s-testimonials__author .testimonial-info a {
    color: white;
  }

.s-testimonials__avatar {
    margin: 20px;
    width         : 50px;
    height        : 50px;
    border-radius : 100%;
    outline       : none;
    position      : absolute;
    top           : 0;
    left          : 20px;
}

.s-testimonials__cite {
    display : block;
    margin-left: 25px;
}

.s-testimonials__cite strong,
.s-testimonials__cite span {
    font-style : normal;
    transition : all 0.3s ease-in-out;
}

.s-testimonials__cite strong {
    font-size   : calc(var(--text-size) * 0.9444);
    font-weight : 500;
    line-height : var(--vspace-0_75);
    color       : var(--color-text-dark);
}

.s-testimonials__cite span {
    display     : block;
    font-size   : var(--text-xs);
    font-weight : 400;
    line-height : var(--vspace-0_5);
    color       : var(--color-text-light);
}

/* ------------------------------------------------------------------- 
 * responsive:
 * testimonials
 * ------------------------------------------------------------------- */
@media screen and (max-width: 1200px) {
    .s-testimonials__content {
        max-width : 960px;
    }
}

@media screen and (max-width: 800px) {
    .s-testimonials__content {
        max-width : 600px;
    }

    .s-testimonials__slide {
        text-align : center;
    }

    .s-testimonials__cite {
        text-align : left;
    }
}

@media screen and (max-width: 1200px) {
    /* .s-testimonials__author {
        display       : flex;
    } */

    .s-testimonials__author > .s-testimonial__user {
        display: flex;
        align-items: center;
    }

    .s-testimonials__author > .s-testimonial__user > .s-testimonials__avatar {
        position: relative;
        left          : 0px;
    }

    .s-testimonials__author {
        padding-left: 20px;
    }
}


/* ------------------------------------------------------------------- 
 * ## bricks masonry 
 * ------------------------------------------------------------------- */

.s-testimonial__images {
    display  : block;
    /* height: 75px;
    overflow: hidden; */
    /* position : relative; */
}

.s-testimonial__images .brick {
    display: flex;
    width : 75px;
    /* height: 75px; */
    align-items: center;
    justify-content: center;
    float   : left;
    border : 1px solid rgba(255, 255, 255, 0.05);
}

.entry__thumb > img {
    height: 75px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* ------------------------------------------------------------------- 
 * ## masonry entries 
 * ------------------------------------------------------------------- */
.s-testimonial__images .entry {
    overflow : hidden;
    position : relative;
}

.s-testimonial__images .entry__link {
    display  : block;
    position : relative;
}

.s-testimonial__images .entry__link img {
    vertical-align : bottom;
    transition     : all 0.3s ease-in-out;
    margin         : 0;
}

.s-testimonial__images .entry__link::before {
    z-index    : 1;
    content    : "";
    display    : block;
    background : rgba(0, 0, 0, 0.6);
    opacity    : 0;
    visibility : hidden;
    width      : 100%;
    height     : 100%;
    transition : all, 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
    position   : absolute;
    top        : 0;
    left       : 0;
}

.s-testimonial__images .entry__link::after {
    z-index        : 1;
    display        : block;
    content        : "";
    background-image: url(../images/icons/icon-view.svg);
    background-size: 20px 20px; /* Set the background image to 50px */
    background-position: center center;
    height         : 20px; /* Set height to 50px */
    width          : 20px; /* Set width to 50px */
    margin-left    : -10px; /* Adjusted to center the image (50px / 2) */
    margin-top     : -10px; /* Adjusted to center the image (50px / 2) */
    opacity        : 0;
    visibility     : hidden;
    transition     : all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
    position       : absolute;
    left           : 50%;
    top            : 50%;
}




.s-testimonial__images .entry {
    position : relative;
}

.s-testimonial__images .entry__info {
    z-index    : 2;
    transform  : translateY(-100%);
    opacity    : 0;
    visibility : hidden;
    transition : all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
    position   : absolute;
    top        : var(--vspace-0_75);
    left       : var(--vspace-0_75);
}

.s-testimonial__images .entry__cat,
.s-testimonial__images .entry__title {
    font-family : var(--font-2);
}

.s-testimonial__images .entry__cat {
    font-size   : calc(var(--text-size) * 0.7778);
    line-height : 1.8;
    color       : rgba(255, 255, 255, 0.3);
}

.s-testimonial__images .entry__title {
    font-weight : 500;
    font-size   : calc(var(--text-size) * 0.9444);
    line-height : 1.2;
    margin      : 0;
    color       : white;
}

/* on hover
 */
.s-testimonial__images .entry:hover .entry__link::before {
    opacity    : 1;
    visibility : visible;
}

.s-testimonial__images .entry:hover .entry__link::after {
    opacity    : 1;
    visibility : visible;
    transform  : scale(1);
}

.s-testimonial__images .entry:hover .entry__link img {
    transform : scale(1.05);
}

.s-testimonial__images .entry:hover .entry__info {
    opacity    : 1;
    visibility : visible;
    transform  : translateY(0);
}

/* ------------------------------------------------------------------- 
 * ## modal popup
 * ------------------------------------------------------------------- */
.modal-popup {
    max-width        : 75vh;
    background-color : var(--color-gray-18);
    font-size        : calc(var(--text-size) * 0.25);
    line-height      : var(--vspace-0_75);
    color            : white;
    overflow-y       : auto;
    position         : relative;
    text-align : center;
    margin: 0 var(--vspace-1);
    padding: var(--vspace-1) 0;
}

.modal-popup .column {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-popup img {
    margin-bottom : 0;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.modal-popup img::after {
    content: 'asdasd';
}



.modal-popup h5 {
    font-family   : var(--font-1);
    font-size     : var(--text-size);
    line-height   : var(--vspace-1);
    font-weight   : 700;
    color         : white;
    margin-top    : 0;
    margin-bottom : var(--vspace-0_25);
}

.modal-popup__desc {
    padding : 0;
}

.modal-popup__desc p {
    font-size     : calc(var(--text-size) * 0.75);
    margin-bottom: var(--vspace-1);
    text-align: justify;
}

.modal-popup__cat {
    list-style   : none;
    margin-left  : 0;
    font-size    : var(--text-sm);
    line-height  : var(--vspace-0_5);
    color        : rgba(0, 0, 0, 0.6);
    padding-left : calc(0.875 * var(--space));
    position     : relative;
}

.modal-popup__cat::before {
    content             : "";
    display             : block;
    height              : calc(0.625 * var(--space));
    width               : calc(0.625 * var(--space));
    background-repeat   : no-repeat;
    background-position : center;
    background-size     : contain;
    background-image    : url(../images/icons/icon-tag.svg);
    position            : absolute;
    left                : 0;
    top                 : -0.15em;
}

.modal-popup__learn-more {
    z-index       : 2;
    display       : flex;
    /* margin-bottom : var(--vspace-1); */
    position      : relative;
    display: block;
}

.modal-popup__learn-more-btn {
    color            : white;
    background-color : white;
    border-color     : white;
    margin-bottom    : 0;
    display         : flex;
    align-items     : center;
    justify-content : center;
}

.modal-popup__learn-more-btn svg {
    height    : var(--vspace-0_75);
    width     : var(--vspace-0_75);
    transform : translate(2px, 0);
    margin-right: var(--vspace-0_5);;
}

.modal-popup__cat li {
    display      : inline;
    padding-left : 0;
}

.modal-popup__cat li::after {
    content : ", ";
}

.modal-popup__cat li:last-child::after {
    display : none;
}

.modal-popup__details {
    background-color : rgba(0, 0, 0, 0.3);
    font-size        : var(--text-xs);
    line-height      : var(--vspace-1_25);
    color            : white;
    padding          : 0 1.2rem;
    position         : absolute;
    /* top              : var(--vspace-1);
    left             : var(--vspace-1); */
}

.modal-popup__details:focus,
.modal-popup__details:hover {
    background-color : var(--color-gray-19);
    color            : white;
}

/* ------------------------------------------------------------------- 
 * responsive:
 * portfolio
 * ------------------------------------------------------------------- */
@media screen and (max-width: 1200px) {
    .s-testimonial__images {
        padding: 0 0 0 25px;
    }

    .s-testimonial__images .entry__cat {
        font-size : calc(var(--text-size) * 0.6667);
    }

    .s-testimonial__images .entry__title {
        font-size : calc(var(--text-size) * 0.8333);
    }

    .s-testimonials__content > .column {
        padding: 0 15px 60px 15px;
    }
}

@media screen and (max-width: 1000px) {
    .modal-popup {
        max-height: 75vh;
    }
    
    .s-testimonial__images .grid-sizer,
    .s-testimonial__images .brick {
        width : 75px;
    }

    .bricks .column {
        flex         : none;
        width        : 100%;
        margin-left  : 0;
        margin-right : 0;
        padding      : 0;
    }
}

@media screen and (max-width: 800px) {
    .modal-popup {
        max-height: 75vh;
    }

    .modal-popup img {
        max-width: 50%;
        margin-bottom : var(--vspace-0_75);
    }

    .modal-popup__desc {
        padding : 0 var(--vspace-0_125) var(--vspace-0_25);
    }

    .s-folio {
        padding-top    : var(--vspace-4);
    }
}

@media screen and (max-width: 600px) {
    .modal-popup {
        max-height: 80vh;
    }

    .modal-popup img {
        max-width: 100%;
    }

    /* .s-testimonial__images .grid-sizer,
    .s-testimonial__images .brick {
        width : 75px;
        float : none;
        margin-top: 0;
    } */

    .s-testimonials__author {
        padding-left: 10px !important;
    }
}

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

    .s-testimonials__author {
        padding-left: 0 !important;
    }
}

.s-testimonials__slide > p {
    text-align: left;
}