/* =========================================================
   MARKET DETAIL HERO
   ========================================================= */

.market-detail-hero {
    position: relative;
    width: 100%;
    height: 200vh;
    background: #ffffff;
}

.market-detail-hero-sticky {
    position: sticky;
    top: 0;

    width: 100%;
    height: 100vh;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    overflow: hidden;
}


/* =========================================================
   HERO SUBTITLE
   ========================================================= */

.market-detail-hero-subtitle {
    position: absolute;

    /*
     * Initial screenshot position:
     * below the DOOH heading
     */
    top: 40vh;
    left: 50%;

    width: 90%;

    transform: translateX(-50%);

    text-align: center;

    font-size: 11px;
    line-height: 1.4;

    font-weight: 500;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    color: #999999;

    z-index: 5;

    will-change: transform, color, opacity;
}


/* =========================================================
   HERO TITLE
   ========================================================= */

.market-detail-hero-title {
    position: absolute;

    /*
     * Initial screenshot position
     */
    top: 20vh;
    left: 50%;

    width: 90%;

    margin: 0;

    transform: translateX(-50%);

    text-align: center;

    font-size: clamp(60px, 7vw, 100px);

    line-height: 0.95;

    font-weight: 800;

    letter-spacing: -4px;

    text-transform: uppercase;

    color: #333333;

    z-index: 4;

    will-change: transform, opacity;
}


/* =========================================================
   HERO BUTTON
   ========================================================= */

.market-detail-hero-button {
    position: absolute;

    top: 60vh;
    left: 50%;

    transform: translateX(-50%);

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 130px;
    min-height: 38px;

    padding: 11px 20px;

    box-sizing: border-box;

    background: #01c30c;

    color: #ffffff;

    text-decoration: none;

    font-size: 10px;

    line-height: 1;

    font-weight: 600;

    letter-spacing: 0.5px;

    text-transform: uppercase;

    z-index: 5;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.market-detail-hero-button:hover {
    background: #00a90a;
    color: #ffffff;
}


/* =========================================================
   HERO VIDEO WRAPPER
   ========================================================= */

.market-detail-hero-video-wrap {
    position: absolute;

    /*
     * IMPORTANT:
     * This is the starting position from screenshot 1.
     */
    top: 70vh;
    left: 50%;

    /*
     * Small initial video
     */
    width: 35vw;

    /*
     * Keep 16:9 ratio initially
     */
    height: auto;

    aspect-ratio: 16 / 9;

    transform: translateX(-50%);

    overflow: hidden;

    background: #111111;

    z-index: 2;

    /*
     * GSAP will animate:
     *
     * top: 80vh -> 0
     * width: 35vw -> 100vw
     * height: 19.6875vw -> 100vh
     */
    will-change: top, width, height;
}


/* =========================================================
   HERO VIDEO / IMAGE
   ========================================================= */

.market-detail-hero-video,
.market-detail-hero-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    background: #111111;
}


.single-markets textarea {
    height: 150px;
}
@media (max-width: 767px) {

    .market-detail-hero {
        height: 180vh;
    }

    .market-detail-hero-title {
        top: 28vh;

        font-size: clamp(48px, 16vw, 76px);

        letter-spacing: -2px;
    }

    .market-detail-hero-subtitle {
        top: 46vh;

        font-size: 9px;

        letter-spacing: 1px;
    }

    .market-detail-hero-video-wrap {
        top: 72vh;

        width: 85vw;

        aspect-ratio: 16 / 9;
    }

}

/* =========================================================
   MARKET INTRODUCTION
========================================================= */

.market-introduction {
    width: 100%;

    padding: 100px 0 82px;

    background: #ffffff;
}

.market-introduction-container {
    width: calc(100% - 130px);

    max-width: 1340px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
       minmax(0, 1.8fr)
        minmax(300px, 1fr);

    gap: 0px;

    align-items: start;
}


/* =========================================================
   INTRO LEFT
========================================================= */

.market-introduction-content {
    padding-top: 5px;
}
.market_det_box2_clm1_r_tt {
    line-height: clamp(3.125rem, 2.934rem + 0.82vw, 3.75rem);
    /* padding-left: 30px; */
    margin-bottom: 35px;
    background: var(--hue);
    border-radius: 8px;
    font-size: clamp(1.125rem, 0.985rem + 0.59vw, 1.5rem);
    background: #01c30c;
    text-transform: uppercase;
    font-family: 'Oswald';
    text-align: center;
    color: #fff;
}
.market-introduction-heading {
    text-align: center;
    margin: 0 0 40px;

    max-width: 800px;

    font-size: 36px;

    line-height: 1.35;

    font-weight: 500;

    letter-spacing: -1.5px;

    text-transform: uppercase;

    color: #333333;
}

.market-introduction-heading::first-line {
    color: #01c30c;
}

.market-introduction-text {
    max-width: 790px;
    font-size: 20px;
    line-height: 1.55;
    color: #333;
    font-family: 'Roboto';
}

.market-introduction-text p {
    margin: 0 0 20px;
}

.market-introduction-text p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   CONTACT FORM
========================================================= */

.market-introduction-contact {
    width: 100%;
}

.market-contact-heading {
    display: flex;

    align-items: center;

    min-height: 44px;

    padding: 0 22px;

    margin-bottom: 14px;

    border-radius: 5px;

    background: #01c30c;

    color: #ffffff;

    font-size: 16px;

    line-height: 1.2;

    font-weight: 700;

    text-transform: uppercase;
}

.market-contact-form {
    width: 100%;
}

.market-contact-form input,
.market-contact-form textarea,
.market-contact-form select {
    width: 100%;

    box-sizing: border-box;

    border: 1px solid #dddddd;

    border-radius: 5px;

    background: #ffffff;

    color: #555555;

    font-family: inherit;

    font-size: 13px;

    padding: 11px 13px;

    margin-bottom: 13px;

    outline: none;
}

.market-contact-form input {
    height: 38px;
}

.market-contact-form textarea {
    min-height: 132px;

    resize: vertical;
}

.market-contact-form input:focus,
.market-contact-form textarea:focus,
.market-contact-form select:focus {
    border-color: #01c30c;
}

.market-contact-form button,
.market-contact-form input[type="submit"] {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: auto;

    min-width: 100px;

    height: 38px;

    padding: 0 22px;

    margin-top: 0;

    border: 0;

    border-radius: 5px;

    background: #01c30c;

    color: #ffffff;

    font-family: inherit;

    font-size: 14px;

    font-weight: 700;

    text-transform: uppercase;

    cursor: pointer;
}

.market-contact-form button:hover,
.market-contact-form input[type="submit"]:hover {
    background: #183b7b;
}

.market-contact-form label {
    font-size: 12px;

    line-height: 1.5;

    color: #01c30c;
}


/* =========================================================
   READ MORE
========================================================= */

.market-read-more {
    width: 100%;
    background: #ffffff;
    padding: 0 0 62px;
}

.market-read-more-container {
    width: calc(100% - 130px);
    max-width: 1340px;
    margin: 0 auto;
}


/* =========================================================
   MAIN READ MORE BUTTON
========================================================= */

.market-read-more-toggle {
    width: 100%;
    min-height: 48px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 0 20px;

    border: 0;

    background: #e9e9e9;

    color: #333333;

    font-family: inherit;
    font-size: 16px;
    font-weight: 700;

    text-align: left;

    cursor: pointer;
}


/* =========================================================
   READ MORE ICON
========================================================= */

.market-read-more-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 20px;
    height: 20px;

    border: 1px solid #666666;

    border-radius: 50%;

    font-size: 17px;
    line-height: 1;

    font-weight: 400;

    transition: transform 0.3s ease;
}


/* Rotate + into × */

.market-read-more-toggle[aria-expanded="true"]
.market-read-more-icon {
    transform: rotate(45deg);
}


/* =========================================================
   READ MORE CONTENT
========================================================= */

.market-read-more-content {
    display: grid;

    grid-template-rows: 0fr;

    opacity: 0;

    overflow: hidden;

    transition:
        grid-template-rows 0.45s ease,
        opacity 0.35s ease;
}


/* OPEN */

.market-read-more-toggle[aria-expanded="true"]
+ .market-read-more-content {

    grid-template-rows: 1fr;

    opacity: 1;
}


.market-read-more-content-inner {
    min-height: 0;
    overflow: hidden;
}




/* =========================================================
   ACCORDION TITLE
========================================================= */

.market-accordion-title {
    width: 100%;

    color: #333333;

    font-weight: 500;
    text-align: left;
    cursor: pointer;
    align-items: center;
    -webkit-align-items: center;
    -ms-align-items: center;
    line-height: 52px;
    background: #EAEAEA;
    padding: 0 6px;
    font-size: clamp(1.125rem, 0.985rem + 0.59vw, 1.5rem);
    font-family: 'Oswald';
    text-transform: uppercase;
}


/* =========================================================
   ACCORDION ICON
========================================================= */

.market-accordion-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    font-size: 24px;
    color: #555555;
    transition: transform 0.3s ease;
    border: 1px solid #333;
    border-radius: 999px;
    font-weight: 500;
    font-family: 'Oswald';
    margin-right: 6px;
    margin-left: 10px;
}
button.market-accordion-title:hover, button.market-accordion-title:focus {
    background: #eaeaea;
}

/* OPEN ICON */

.market-accordion-item.active
.market-accordion-icon {
    transform: rotate(45deg);
}
.single-markets input, .single-markets textarea {
    border-color: #DCDCDC !important;
}

/* =========================================================
   ACCORDION CONTENT
========================================================= */

.market-accordion-content {
    display: grid;

    grid-template-rows: 0fr;

    opacity: 0;
padding: 30px 0 0px;
    transition:
        grid-template-rows 0.4s ease,
        opacity 0.3s ease;
}

.market-accordion-content-inner h3 {
    font-size: 30px;
    font-family: 'Oswald';
    margin-bottom: 10px;
    color: #333;
}
/* OPEN */

.market-accordion-item.active
.market-accordion-content {

    grid-template-rows: 1fr;

    opacity: 1;
}


.market-accordion-content-inner {
    min-height: 0;
    overflow: hidden;
    padding: 0 0 25px;
    color: #333;
    font-size: 20px;
    line-height: 1.5;
    font-family: 'Roboto'
}


.market-accordion-content-inner p {
    margin: 0 0 15px;
}

.market-accordion-content-inner p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .market-read-more {
        padding-bottom: 45px;
    }

    .market-read-more-container {
        width: calc(100% - 40px);
    }

    .market-read-more-toggle {
        min-height: 42px;

        padding: 0 14px;

        font-size: 14px;
    }

    .market-accordion-title {
        padding: 17px 0;

        font-size: 14px;
    }

    .market-accordion-content-inner {
        padding-bottom: 20px;

        font-size: 13px;

        line-height: 1.6;
    }

}


/* =========================================================
   INSPIRING SCREENS
========================================================= */

.market-inspiring-screens {
    width: 100%;

    padding: 60px 0 50px;

    background: #ffffff;

    border-top: 1px solid #dddddd;

    overflow: hidden;
}

.market-inspiring-container {
    width: calc(100% - 130px);

    max-width: 1340px;

    margin: 0 auto;
}


/* =========================================================
   INSPIRING HEADING
========================================================= */

.market-inspiring-heading {
    margin: 0 0 14px;
    text-align: center;
    font-size: 30px;
    line-height: 1.5;
    font-weight: 500;
    /* letter-spacing: -0.5px; */
    text-transform: uppercase;
    color: #333;
}


/* =========================================================
   INSPIRING CONTENT
========================================================= */

.market-inspiring-content {
    max-width: 1000px;

    margin: 0 auto 42px;

    text-align: center;

    font-size: 14px;

    line-height: 1.5;

    color: #666666;
}

.market-inspiring-content p {
       margin: 0 0 12px;
    font-size: 22px;
    line-height: 1.66;
    font-family: 'Roboto';
}

.market-inspiring-content p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   SLIDER
========================================================= */

.inspiring-screens-slider {
    width: 100%;

    overflow: visible;
}

.inspiring-screens-slider .swiper-wrapper {
    align-items: stretch;
}

.inspiring-screens-slider .swiper-slide {
    height: auto;
}


/* =========================================================
   SLIDE
========================================================= */

.inspiring-screen-slide {
    display: grid;

    grid-template-columns: 38% 62%;

    width: 100%;

    min-height: 305px;
        gap: 20px;
}


/* =========================================================
   LEFT CARD
========================================================= */

.inspiring-screen-info {
    position: relative;

    display: flex;

    flex-direction: column;

    min-height: 305px;

    padding: 30px 30px 24px;

    box-sizing: border-box;

    background: #f4f4f4;

    border-radius: 15px;

    z-index: 2;
}

.inspiring-screen-title {
    margin: 0 0 12px;
    font-size: 30px;
    line-height: 1.5;
    font-weight: 500;
    text-transform: uppercase;
    color: #333333;
}

.inspiring-screen-description {
    max-width: 330px;

    font-size: 14px;

    line-height: 1.55;

    color: #666666;
}

.inspiring-screen-description p {
        margin: 0 0 12px;
    font-size: 20px;
    font-family: 'Roboto';
    line-height: 1.5;
    color: #333;
}

.inspiring-screen-description p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   BOTTOM CONTROLS
========================================================= */

.inspiring-screen-bottom {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: auto;
}

.inspiring-screen-arrows {
    display: flex;

    gap: 8px;
}

.inspiring-screens-prev,
.inspiring-screens-next {
    position: static;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    padding: 0;

    border: 1px solid #888888;

    border-radius: 50%;

    background: transparent;

    color: #555555;

    font-size: 20px;

    line-height: 1;

    cursor: pointer;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}

.inspiring-screens-prev:hover,
.inspiring-screens-next:hover {
    background: #01c30c;

    border-color: #01c30c;

    color: #ffffff;
}

.inspiring-screen-counter {
    color: #888888;

    font-size: 13px;

    font-weight: 400;

    white-space: nowrap;
}


/* =========================================================
   RIGHT IMAGE
========================================================= */

.inspiring-screen-image {
    position: relative;

    width: 100%;

    min-height: 305px;

    overflow: hidden;

    border-radius: 15px;

    background: #eeeeee;
}
.inspiring-screen-arrows button span {
    font-size: 22px !important;
    margin-top: -6px;
}
.inspiring-screen-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .market-detail-hero {
        height: 160vh;
    }

    .market-detail-hero-title {
        font-size: clamp(38px, 9vw, 70px);

        letter-spacing: -2.5px;
    }

    .market-detail-hero-video-wrap {
        width: min(72vw, 680px);

        top: 36vh;
    }

    .market-introduction-container,
    .market-read-more-container,
    .market-inspiring-container {
        width: calc(100% - 60px);
    }

    .market-introduction-container {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .market-introduction-content {
        max-width: none;
    }

    .inspiring-screen-slide {
        grid-template-columns: 40% 60%;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .market-detail-hero {
        height: 145vh;
    }

    .market-detail-hero-subtitle {
        top: 10vh;

        font-size: 10px;

        letter-spacing: 1px;
    }

    .market-detail-hero-title {
        top: 15vh;

        font-size: clamp(34px, 11vw, 55px);

        letter-spacing: -1.8px;
    }

    .market-detail-hero-button {
        top: 25vh;
    }

    .market-detail-hero-video-wrap {
        top: 34vh;

        width: calc(100% - 40px);
    }


    /* =====================================================
       INTRODUCTION
    ===================================================== */

    .market-introduction {
        padding: 45px 0 55px;
    }

    .market-introduction-container,
    .market-read-more-container,
    .market-inspiring-container {
        width: calc(100% - 40px);
    }

    .market-introduction-container {
        gap: 35px;
    }

    .market-introduction-heading {
        font-size: 31px;

        letter-spacing: -0.8px;
    }

    .market-introduction-text {
        font-size: 14px;

        line-height: 1.6;
    }


    /* =====================================================
       CONTACT
    ===================================================== */

    .market-contact-heading {
        min-height: 44px;

        padding: 0 15px;

        font-size: 14px;
    }


    /* =====================================================
       READ MORE
    ===================================================== */

    .market-read-more {
        padding-bottom: 45px;
    }

    .market-read-more-toggle {
        height: 42px;

        padding: 0 14px;

        font-size: 14px;
    }

    .market-accordion-title {
        padding: 17px 0;

        font-size: 14px;
    }

    .market-accordion-content-inner {
        font-size: 13px;

        line-height: 1.6;
    }


    /* =====================================================
       INSPIRING
    ===================================================== */

    .market-inspiring-screens {
        padding: 45px 0 60px;
    }

    .market-inspiring-heading {
        font-size: 23px;
    }

    .market-inspiring-content {
        margin-bottom: 30px;

        font-size: 13px;
    }


    /* =====================================================
       MOBILE SLIDE
    ===================================================== */

    .inspiring-screen-slide {
        display: flex;

        flex-direction: column;
    }

    .inspiring-screen-info {
        min-height: 230px;

        padding: 25px;

        border-radius: 6px 6px 0 0;
    }

    .inspiring-screen-image {
        min-height: 240px;

        border-radius: 0 0 6px 6px;
    }

    .inspiring-screen-title {
        font-size: 20px;
    }

    .inspiring-screen-description {
        font-size: 13px;
    }

    .inspiring-screens-prev,
    .inspiring-screens-next {
        width: 36px;
        height: 36px;
    }

}


/* =========================================================
   MARKET CASE STUDIES
   ========================================================= */

.market-case-studies {
    position: relative;

    width: 100%;

    margin: 0;
    padding: 22px 0 0px;

    background: #ffffff;
}


/* =========================================================
   GRID
   ========================================================= */

.market-case-studies-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    width: 100%;

    margin: 0;
    padding: 0;

    gap: 0;
}


/* =========================================================
   CASE STUDY
   ========================================================= */

.market-case-study {
    position: relative;

    width: 100%;

    /*
     * Screenshot ratio is approximately 16:9
     */
    aspect-ratio: 16 / 9;

    overflow: hidden;

    margin: 0;
    padding: 0;

    background: #222222;
}


/* =========================================================
   LINK
   ========================================================= */

.market-case-study-link {
    position: relative;

    display: block;

    width: 100%;
    height: 100%;

    overflow: hidden;

    color: #ffffff;

    text-decoration: none;
}


/* =========================================================
   IMAGE
   ========================================================= */

.market-case-study-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
}


.market-case-study-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    /*
     * Initial image is slightly zoomed
     */
    transform: scale(1.08);

    /*
     * Black/white default state
     */
   /* filter: grayscale(100%);*/

    opacity: 0.72;

    transform-origin: center center;

    transition:
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.7s ease,
        opacity 0.7s ease;
}


/* =========================================================
   DARK OVERLAY
   ========================================================= */

.market-case-study-overlay {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    /*
     * Gives screenshot-like faded appearance
     */
    background: rgba(0, 0, 0, 0.18);

    pointer-events: none;

    transition:
        opacity 0.7s ease,
        background 0.7s ease;

    z-index: 2;
}


/* =========================================================
   TITLE CONTENT
   ========================================================= */

.market-case-study-content {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;

    padding: 45px 50px;

    box-sizing: border-box;

    z-index: 3;

    pointer-events: none;

    transition:
        opacity 0.5s ease,
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   TITLE
   ========================================================= */

.market-case-study-title {
    margin: 0;

    max-width: 90%;

    color: #ffffff;

    line-height: 1.25;

        font-family: 'Oswald';
    font-size: 36px;
    font-weight: 500;

    letter-spacing: -0.5px;

    text-transform: uppercase;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.35);

    transition:
        opacity 0.45s ease,
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   HOVER
   ========================================================= */

/*
 * IMAGE:
 *
 * 1.08 → 1
 *
 * This creates the "zoom out" effect.
 *
 * grayscale → color
 *
 * opacity → 100%
 */

.market-case-study:hover
.market-case-study-image img {

    transform: scale(1);

    filter: grayscale(0%);

    opacity: 1;
}


/*
 * Remove dark/faded overlay
 */

.market-case-study:hover
.market-case-study-overlay {

    opacity: 0;

}


/*
 * Hide title smoothly
 */

.market-case-study:hover
.market-case-study-content {

    opacity: 0;

    transform: translateY(30px);

}


.market-case-study:hover
.market-case-study-title {

    opacity: 0;

    transform: translateY(20px);

}


/* =========================================================
   REMOVE DEFAULT LINK STYLES
   ========================================================= */

.market-case-study-link:hover,
.market-case-study-link:focus,
.market-case-study-link:active {

    color: #ffffff;

    text-decoration: none;
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.market-case-study-link:focus-visible {

    outline: 3px solid #ffffff;

    outline-offset: -3px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .market-case-studies-grid {

        grid-template-columns: repeat(2, 1fr);

    }


    .market-case-study-content {

        padding: 30px;

    }


    .market-case-study-title {

        font-size: clamp(22px, 3vw, 32px);

    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .market-case-studies-grid {

        grid-template-columns: 1fr;

    }


    .market-case-study {

        aspect-ratio: 16 / 10;

    }


    .market-case-study-content {

        padding: 25px;

    }


    .market-case-study-title {

        max-width: 95%;

        font-size: 25px;

        line-height: 1.2;

    }

}


/* =========================================================
   MARKET PRODUCT RANGE
========================================================= */

.market-product-range {

    width: 100%;

    padding: 75px 0 50px;

    background: #f7f7f7;

    box-sizing: border-box;

}

.market-product-slider .swiper-pagination {
    display: block !important;
}
/* =========================================================
   INNER
========================================================= */

.market-product-range-inner {

    width: 100%;

    max-width: 1280px;

    margin: 0 auto;

    padding: 0 20px;

    box-sizing: border-box;

}


/* =========================================================
   HEADER
========================================================= */

.market-product-range-header {

    width: 100%;

    max-width: 900px;

    margin: 0 auto 35px;

    text-align: center;

}


/* =========================================================
   HEADING
========================================================= */

.market-product-range-heading {
    margin: 0 0 20px;
    color: #333;
    font-size: clamp(28px, 3vw, 30px);
    line-height: 1.5;
    font-weight: 500;
    text-transform: uppercase;
    font-family: oswald;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.market-product-range-description {

    max-width: 900px;

    margin: 0 auto;

    color: #555555;

    font-size: 17px;

    line-height: 1.55;

    font-weight: 400;

}


.market-product-range-description p {

margin: 0;
    font-size: 16px;
    line-height: 1.66;
    font-family: 'Roboto';
    color: rgb(51, 51, 51, 0.7) !important;

}


/* =========================================================
   SLIDER
========================================================= */

.market-product-slider {

    width: 100%;

    overflow: hidden;

    padding: 0 0 45px;

}


/* =========================================================
   SWIPER SLIDE
========================================================= */

.market-product-slider
.swiper-slide {

    height: auto;

    box-sizing: border-box;

}


/* =========================================================
   PRODUCT CARD
========================================================= */

.market-product-card {

    width: 100%;

    height: 100%;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #dddddd;

    border-radius: 6px;

    box-sizing: border-box;

}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.market-product-card-image {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 280px;

    padding: 15px;

    background: #ffffff;

    box-sizing: border-box;

    overflow: hidden;

}


.market-product-card-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform 0.5s ease;

}


/* =========================================================
   IMAGE HOVER
========================================================= */

.market-product-card:hover
.market-product-card-image img {

    transform: scale(1.03);

}


/* =========================================================
   PRODUCT CONTENT
========================================================= */

.market-product-card-content {

    min-height: 155px;

    padding: 20px 15px 18px;

    text-align: center;

    border-top: 1px solid #eeeeee;

    box-sizing: border-box;

}


/* =========================================================
   PRODUCT TITLE
========================================================= */

.market-product-card-content h3 {

    margin: 0 0 10px;

    color: #333;

    font-size: 20px;

    line-height: 1.2;

    font-weight: 500;

    text-transform: uppercase;

}


.market-product-card-content h3 a {

    color: inherit;

    text-decoration: none;

}


.market-product-card-content h3 a:hover {

    color: inherit;

}


/* =========================================================
   PRODUCT DESCRIPTION
========================================================= */

.market-product-card-description {

    color: #333;

    font-size: 16px;

    line-height: 1.4;

    font-weight: 400;
    
    font-family: "Roboto";

}


.market-product-card-description p {

    margin: 0;

}


/* =========================================================
   SWIPER PAGINATION
========================================================= */

.market-product-slider {
    position: relative;

    width: 100%;

    overflow: hidden;

    padding-bottom: 70px !important;
}

/* =========================================================
   PAGINATION BULLETS
========================================================= */

.market-product-pagination {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 5px;

    width: 100%;

    text-align: center;

    z-index: 10;
}


/* Swiper dots */

.market-product-pagination .swiper-pagination-bullet {

    width: 12px;
    height: 12px;

    margin: 0 6px !important;

    background: #d1d1d1;

    opacity: 1;

    transition:
        background 0.25s ease,
        transform 0.25s ease;

}


.market-product-pagination .swiper-pagination-bullet-active {

    background: #214b9b;

    opacity: 1;

    transform: scale(1.05);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .market-product-range {

        padding: 60px 0 40px;

    }


    .market-product-card-image {

        height: 240px;

    }


    .market-product-card-content {

        min-height: 150px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .market-product-range {

        padding: 50px 0 35px;

    }


    .market-product-range-inner {

        padding: 0 15px;

    }


    .market-product-range-header {

        margin-bottom: 25px;

    }


    .market-product-range-heading {

        font-size: 28px;

    }


    .market-product-range-description {

        font-size: 15px;

        line-height: 1.5;

    }


    .market-product-card-image {

        height: 250px;

    }


    .market-product-card-content {

        min-height: 145px;

        padding: 18px 15px;

    }


    .market-product-card-content h3 {

        font-size: 20px;

    }


    .market-product-card-description {

        font-size: 15px;

    }

}