:root {
    --main-primary: #2196f3;
    --main-white: #ffffff;
    --main-black: #333;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: none;
    line-height: 1.5;
    font-size: 16px;
    color: #181818;
    max-width: 100%;
    /* overflow-x: hidden; */
    scroll-behavior: smooth;
}

.text-justify {
    text-align: justify;
}
.text-center {
    text-align: center;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    object-fit: cover;
    object-position: 50% 50%;
    vertical-align: middle;
    width: 100%;
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.418);
}

table, th, td {
    border: 1px solid;
}

#leadsDialog {
    padding: 0;
    width: 670px;
    height: 64%;
    border-radius: 12px;
}

#leadsDialog .content {
    display: flex;
    gap: 1vw;
    height: 100%;
    flex-direction: row-reverse;
}

#leadsDialog .bg-area {
    flex: 1;
    background-image: url('../img/maxresdefault.webp');
    background-size: cover;
    background-position: center;
}

#leadsDialog .form-area {
    flex: 4;
    display: flex;
    justify-content: center;
    align-items: center;
}

#leadsDialog #cancelBtn {
    float: right;
    position: absolute;
    right: 4px;
    top: 4px;
    width: 32px;
    height: 32px;
    border-radius: 12px;
    background: transparent;
    border: transparent;
}

#leadsDialog form {
    display: flex;
    flex-direction: column;
    gap: 4vh;
    width: 75%;
}

#leadsDialog form .form-title {
    font-weight: 600;
    font-size: 17px;
}

#leadsDialog form .input-area {
    display: flex;
    flex-direction: column;
    gap: 2vh;
}

#leadsDialog form .input-area input {
    width: 100%;
    border: 1px solid #333;
    border-radius: 8px;
}

#leadsDialog form .button-area {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    gap: 1vw;
}

#leadsDialog form .btn-area button {
    width: 100%;
    padding: 2vh;
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.5px;
    font-size: 16px;
    background: #17a130;
    color: #fff;


}

#confirmBtn {
    &:hover {
        background-color: #17a130 !important;
    }
}

@media only screen and (max-width: 600px) {
    #leadsDialog {
        height: 70%;
    }

    #leadsDialog form {
        width: 90%;
    }

    #leadsDialog form .form-title {
        font-size: 17px;
        letter-spacing: 0.5px;
    }

    #leadsDialog form .btn-area button {
        font-size: 14px;
    }
}

::selection {
    background: var(--main-primary);
    color: var(--main-black);
}

::-moz-selection {
    background: var(--main-primary);
    color: var(--main-black);
}

::-webkit-scrollbar-thumb {
    background: #000;
    border-radius: 1rem;
}

strong {
    font-weight: 700;
}

p,
h1 {
    margin: 0;
}

.pluto-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: flex-start;

    &.column {
        flex-direction: column;
    }

    &.row {
        flex-direction: row;
    }

    &.items-start {
        align-items: flex-start;
    }

    &.items-center {
        align-items: center;
    }

    &.items-end {
        align-items: flex-end;
    }

    &.justify-between {
        justify-content: space-between;
    }

    &.gap-1 {
        gap: 0.5vh;
    }

    &.gap-2 {
        gap: 1vh;
    }

    &.text-sm {
        font-size: 0.85rem;
    }

    &.z-10 {
        z-index: 10;
    }

    &.absolute {
        position: absolute;
    }

    &.w-100 {
        width: 100%;
    }

    &.p-05 {
        padding: 0.5rem;
    }

    &.p-1 {
        padding: 1rem;
    }

    &.mb-1 {
        margin-bottom: 1rem;
    }
}

.mainlogo {
    max-width: 120px !important;
    display: block;
    transition: 0.1s ease;
}

.mainlogo:hover {
    opacity: 0.8;
}

.nav-wrap {
    background-color: #fff;
    max-width: 1240px;
    margin: auto;
    padding: 5px 20px;
    justify-content: space-between;
    transition: 0.3s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    border-radius: 1rem;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

nav {
    position: sticky;
    top: 0;
    width: 100%;
    background: transparent;
    z-index: 1000;
}

.nav-space {
    margin-top: 1px !important;
}

.nav-scroll {
    top: -150px;
    transition: 0.3s ease;
}

.nav-scroll-show {
    position: fixed;
    top: 0px;
    transition: 0.3s ease;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
    border-bottom: 0;
}

.nav-wrap-scroll {
    padding: 10px 20px;
}

.mainlogo-scroll {
    max-width: 190px;
}

/* submenu */
.nav-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0;
}

.nav-menu>ul>li {
    display: inline-block;
    margin-right: 30px;
}

.nav-menu>ul>li:first-child {
    margin-right: 40px;
}

.nav-menu>ul>li:last-child {
    margin-right: 0px;
}

.nav-menu ul li {
    position: relative;
}

.nav-menu>ul>li.home>a {
    color: #000;
}

.nav-menu>ul>li>a {
    position: relative;
    display: block;
    color: #000;
    text-decoration: none;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.7px;
    /* transition: all 0.3s ease-in-out; */
}

.nav-menu ul li a.whatsapp {
    top: -2px;
}

.nav-menu ul.submenu {
    position: absolute;
    right: -16px;
    margin-top: 10px;
    top: 150%;
    width: 300px;
    text-align: left;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
    flex-direction: column;
    text-align: right;
    align-items: flex-end;
    background: #fff;
    color: #000;
    border-radius: 3px;
    padding: 0;
    width: 160px;
    box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    border-radius: 1rem;
    height: auto;
    max-height: 350px;
    overflow: scroll;
}

.nav-menu ul.submenu li:first-child {
    border-top: none;
}

.nav-menu ul.submenu>li {
    border-top: 1px solid #e0e0e0;
}

.nav-menu ul.submenu>li>a {
    display: block;
    color: #000;
    text-decoration: none;
    margin-left: 0;
    line-height: 32px;
    padding-right: 15px;
    font-size: 14px;
}

.nav-menu ul li:hover>ul.submenu {
    top: 100%;
    opacity: 1;
    visibility: visible;
}

.nav-menu a:hover,
.nav-menu ul.submenu>li>a:hover {
    font-weight: 700;
}

.nav-menu a.products {
    position: relative;
}

.nav-menu a.products::after {
    content: "";
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-color: #000 transparent transparent transparent;
    position: absolute;
    top: 8px;
    right: -15px;
    transform: rotate(0deg);
}

nav a.whatsapp {
    display: block;
    width: 22px;
}

nav a.whatsapp:hover {
    opacity: 0.7;
}

input,
textarea {
    -webkit-appearance: none;
    border-radius: 0;
    border: 0;
}

select {
    border-radius: 0;
    border: 0;
}

/* search and dropdown */
.search-form {
    width: 450px;
}

input,
select {
    border: 0;
    border-radius: 0;
    background-color: transparent;
    color: #000;
    padding: 0px 15px;
    height: 40px;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    letter-spacing: 0.5px;
}

input {
    width: 65%;
}

select {
    width: 35%;
    cursor: pointer;
}

button {
    width: 40px;
    vertical-align: middle;
    display: block;
    background: #fff;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    color: #000;
    border: 0;
    height: 100%;
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;

    &:hover {
        background: #fff !important;
    }
}

button img {
    width: 16px;
}

button:hover {
    background: #CECECE;
}

.search-form-wrap {
    width: 100%;
    height: 40px;
    border: 2px solid #000;
    border-radius: 0.5rem;
}

span.separator {
    width: 1px;
    background-color: #d1d1d1;
    height: 20px;
    position: relative;
    right: 2px;
}

.select-hidden {
    display: none;
    visibility: hidden;
    padding-right: 20px;
}

.select {
    cursor: pointer;
    display: inline-block;
    position: relative;
    font-size: 14px;
    color: #000;
    letter-spacing: 0.5px;
    width: 35%;
    height: 36px;
}

.select-styled {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #ffffff;
    padding: 8px 15px;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    border-radius: 1rem;
}

.select-styled:after {
    content: "";
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-color: #414042 transparent transparent transparent;
    position: absolute;
    top: 16px;
    right: 10px;
}

.select-styled:hover {
    /*background-color: #fafafa;*/
}


/*.select-styled:active, .select-styled.active {
  background-color: #f2f2f2;
}*/

.select-styled:active:after,
.select-styled.active:after {
    top: 10px;
    border-color: transparent transparent #414042 transparent;
}

.select-options {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 999;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: #fff;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

.select-options li {
    margin: 0;
    padding: 5px 0;
    text-indent: 8px;
    font-size: 12px;
    border-top: 1px solid #e6e6e6;
    -moz-transition: all 0.15s ease-in;
    -o-transition: all 0.15s ease-in;
    -webkit-transition: all 0.15s ease-in;
    transition: all 0.1s ease-in;
}

.select-options li:hover {
    font-weight: 700;
}

.select-options li[rel="hide"] {
    display: none;
}

.wp-header-wrap {
    align-items: flex-start;
    justify-content: space-between;
    max-width: 1240px;
    margin: auto;
    padding: 25px 20px;
}

.browse-categories {
    display: none !important;
    border: 1px solid var(--main-black);
    font-size: 15px;
    font-weight: 600;
    width: 207px;
}

.browse-categories .title-wrap {
    background-color: #323232;
    color: var(--main-white);
    padding: 7px 20px 8px 20px;
}

.browse-categories .title-wrap img {
    width: 16px;
    margin-right: 5px;
    position: relative;
    top: -2px;
}

.browse-categories ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
}

.browse-categories ul li {
    padding: 5.9px 18px;
    border-top: 1px solid #e0e0e0;
    position: relative;
}

.browse-categories ul li:hover {
    background-color: #ffea8f;
}

.browse-categories ul li:after {
    content: "";
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-color: #414042 transparent transparent transparent;
    position: absolute;
    top: 11px;
    right: 10px;
    transform: rotate(-90deg);
}

.hero-carousel {
    width: 100%;
    height: 377px;

    .swiper-container {
        @media (min-width: 768px) {
            border-radius: 1rem;
        }
    }
}

.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.swiper-pagination-bullet {
    width: 5px;
    height: 5px;
    opacity: 0.9;
    background-color: #171717;
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 6px;
}

.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal>.swiper-pagination-bullets {
    bottom: 28px;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--main-primary);
}

.hero-carousel-content {
    width: 100%;
    position: relative;
    color: var(--main-white);
    line-height: normal;
}

.hero-carousel-content .img {
    /* position: relative;
    width: 100px;
    height: 500px;
    z-index: 5;
    left: 0;
    top: 0; */
}

.hero-carousel-content .content-overlay {
    position: relative;
    z-index: 10;
    /* max-width: 968px; */
    height: 377px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    &.main {
        .content-overlay-wrap {
            width: unset;
        }
    }
}

.hero-carousel-content .content-overlay::after {
    position: absolute;
    content: ' ';
    width: 100%;
    height: 100%;
    /* background-color: rgba(0, 0, 0, 0.3); */
    left: 0;
    top: 0;
}

.hero-carousel-content .logo {
    width: 186px;
    margin: auto;
    margin-bottom: 10px;
}

.hero-carousel-content .content-overlay-wrap {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    text-align: center;
    width: 95%;
    z-index: 10;
    /*border: 3px solid var(--main-primary);*/
    padding: 65px;
}

.hero-carousel-content h1,
.hero-carousel-content h2,
.hero-carousel-content p {
    margin: 0;
}

.hero-carousel-content h1 {
    font-size: 25px;
}

.hero-carousel-content p {
    font-size: 13px !important;
    ;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 25px;
    text-shadow: 2px 2px 4px #000000;
}

a.btn {
    display: flex;
    align-items: center;
    background-color: var(--main-primary);
    color: var(--main-black);
    font-weight: 600;
    width: max-content;
    margin: auto;
    text-transform: uppercase;
    padding: 9px 20px 11px 20px;
    letter-spacing: 0.5px;
    border: 1px solid #333;
    border-radius: 1rem;
    background-color: #fff;
    cursor: pointer;
    transition: 0.2s ease;
}

a.btn:hover {
    background-color: #f8f8f8;
}

.featured-services {
    margin: auto;
    padding: 2vh 0 2vh 0;
}

.featured-services-wrap {
    margin: auto;
    justify-content: center;
    gap: 8vw;
    @media (max-width: 768px) {
        gap: 1vw;
    }
}

.featured-services .each .ico {
    width: auto;
    height: 37px;

    @media (max-width: 768px) {
        height: 32px;
    }

    img {
        width: auto;
        height: 37px;
        @media (max-width: 768px) {
            height: 32px;
        }
    }
}

.featured-services .title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin-left: 10px;
}

.main-separator {
    margin: auto;
    max-width: 1200px;
    height: 1px;
    background-color: #D2D2D2;
}

.quickfinder {
    display: none !important;
}

select#quickfinder {
    width: 50%;
}

.quickfinder-content-wrap {
    max-width: 1240px;
    margin: auto;
    padding: 0px 20px;
}

.quickfinder-title {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 26px;
    letter-spacing: 0.35;
    text-transform: uppercase;
}

.quickfinder-title {
    width: 206px;
    background-color: var(--main-primary);
    text-align: center;
    height: 76px;
    line-height: 76px;
    position: relative;
    padding-left: 25px;
}

.quickfinder-title::after {
    content: ' ';
    position: absolute;
    width: 30px;
    height: 100%;
    background-color: var(--main-primary);
    clip-path: polygon(0 0, 100% 0%, 70% 100%, 0% 100%);
}

.quickfinder-form {
    width: 100%;
}

.quickfinder .search-form-wrap {
    border: 0;
    background-color: #434343;
    height: 76px;
    padding: 0 25px;
}

.quickfinder-input-title {
    color: #fff;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-right: 30px;
}

.quickfinder button {
    display: block;
    background-color: var(--main-primary);
    color: var(--main-black);
    font-weight: 700;
    width: max-content;
    margin: auto;
    text-transform: uppercase;
    padding: 5px 30px 7px 30px;
    letter-spacing: 0.2px;
    border: 0;
    cursor: pointer;
    transition: 0.2s ease;
    height: 36px;
    font-size: 16px;
    font-family: "Inter", sans-serif;
}

.quickfinder button:hover {
    background-color: #CECECE;
}

.search-kebutuhan,
.search-rangeharga {
    width: 50%;
}

.quickfinder .select {
    width: 60%;
}

.featured-product-wrap {
    max-width: 1240px;
    margin: 50px auto 0 auto;
    padding: 25px 20px;
    justify-content: space-between;
}

.section-title {
    font-weight: 700;
    font-size: 28px;
    letter-spacing: -1px;
    text-transform: capitalize;
    text-align: center;
}

.section-title p.title-stories {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 28px;
    letter-spacing: -1px;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
}

.section-title .separator {
    display: none !important;
    margin: auto;
    max-width: 128px;
    height: 2px;
    background-color: var(--main-primary);
    margin-top: 5px;
    border-radius: 1rem;
}

.featured-product-content {
    justify-content: space-between;
    margin: 2rem auto 50px auto;
    flex-wrap: wrap;
}

.featured-product-content-each {
    margin-bottom: 70px;
    cursor: pointer;
}

.featured-product-content-each .product-img {
    width: 208px;
    height: 150px;
    position: relative;
}

.featured-product-content-each .product-img .img {
    position: relative;
    z-index: 5;
}

.product-img img {
    transition: 0.3s ease;
}

/* .featured-product-content-each .product-img img {
    width: 208px;
    max-height: 150px;
} */

.circle-accent {
    display: none !important;
    position: absolute;
    width: 164px;
    height: 164px;
    background-color: #F2DA60;
    border-radius: 100%;
    z-index: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.23s ease;
}

.featured-product-content-each a.btn {
    padding: 5px 20px 6px 20px;
    margin-top: 50px;
}

.featured-product-content-each:hover .product-img img {
    transform: translate(0px, -20px);
}

.featured-product-content-each:hover .circle-accent {
    width: 200px;
    height: 200px;
}

.section-title-alt {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    text-align: left;
}

.section-title-alt .separator {
    display: none !important;
    max-width: 128px;
    height: 5px;
    background-color: var(--main-primary);
    margin-top: 5px;
}

.product-carousel {
    margin-top: 3vh;
}

.product-carousel-wrap {
    width: 100%;
    border-bottom: 1px solid #fafafa;
}

.product-carousel-wrap:last-child {
    border-bottom: 0;
}

.product-carousel-content {
    max-width: 1240px;
    margin: auto;
    padding: 25px 20px;
    padding-right: 0 !important;

    .btn-lihatsemua {
        @media only screen and (max-width: 768px) {
            padding-right: 3.5vw;
        }
    }
}

.title-viewall {
    justify-content: space-between;
    width: 100%;
    padding: 0 5px;
    margin-bottom: 1vh;
    @media only screen and (max-width: 768px) {
        margin-bottom: 3vh;
    }
}

a.btn-outline {
    background-color: transparent;
    padding: 6px 30px 8px 30px;
}

.product-list-wrap {
    margin-top: 2vh;
    position: relative;

    .swiper-slide {
        max-width: 250px;
    }

    @media only screen and (max-width: 768px) {
        width: 100% !important;
        margin: 0 !important;
        .swiper-slide {
            max-width: 150px;
        }
        .swiper-button-next,
        .swiper-button-prev {
            display: none !important;
        }
    }
}

.product-list-each {
    width: 250px;
    letter-spacing: 0;
    line-height: normal;
    transition: 0.2s ease;

    img {
        max-width: 250px;
        height: 250px;
        border: 1px solid #ccc;
        border-radius: 1rem;
        background-color: #fefefe;

        @media (max-width: 768px) {
            height: 150px;
            min-height: 150px;
        }
    }

    .price {
        display: flex;
        flex-direction: row-reverse;
        gap: 1vh;

        .strike-price {
            display: flex;
            align-items: center;
            font-weight: 600 !important;
            font-size: 0.6rem !important;

            &::after {
                top: auto;
                height: 1px;
            }
        }
    }

    &.no-interaction {
        display: none !important;
    }
}

.product-grid-wrap {
    max-width: 950px;
    margin-top: 45px;
    margin-bottom: 50px;

    .product-list-each {
        width: auto;
        letter-spacing: 0;
        line-height: normal;
        transition: 0.2s ease;

        img {
            max-width: max-content;
            height: max-content;
            border: 1px solid #ccc;
            border-radius: 1rem;
            background-color: #fefefe;

            @media (max-width: 768px) {
                max-width: 200px;
                height: 200px;
            }

            @media (max-width: 376px) {
                max-width: 165px;
                height: 165px;
            }
        }
    }
}


.product-list-each:hover {
    opacity: 0.7;
}

.product-list-each .summary {
    margin-top: 10px;

    .meta {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        font-size: 0.7rem;
        gap: 0.3rem;
        color: #7f7f7f;

        .separator {
            width: 3px;
            height: 3px;
            border-radius: 100%;
            left: 1px;
            right: 1px;
        }

        .location {
            display: flex;
            width: 100%;
            justify-content: flex-start;
        }
    }
}

.price-wrap {
    justify-content: space-between;
}

.product-list-each .strike-price {
    max-width: max-content;
    font-size: 18px;
    font-weight: 900;
    color: #9D9D9D;
    position: relative;
}

.product-list-each .strike-price::after {
    content: ' ';
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #b9b9b9;
    left: 0;
    top: 12px;
}

.product-list-each .fix-price {
    font-size: 0.7rem !important;
    font-weight: 700;
    color: #333;
}

.product-list-each .discount {
    display: none !important;
    width: 46px;
    height: 46px;
    font-size: 18px;
    background-color: #FF3D3D;
    color: #fff;
    text-align: center;
    line-height: 46px;
    border-radius: 100%;
}

.product-list-title-wrap {
    text-align: left;
}

.product-list-title-wrap .title {
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1;
    margin: 5px auto 5px auto;
    text-transform: capitalize;
}

.product-list-title-wrap .tag {
    display: none !important;
    font-size: 0.5rem;
}

.product-list-title-wrap .tag a {
    margin-right: 5px;
    transition: 0.1s ease;
}

.product-list-title-wrap .tag a:hover {
    color: #9D9D9D;
}

.product-list-title-wrap .tag a::after {
    content: ',';
}

.product-list-title-wrap .tag a:last-child::after {
    display: none;
}

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
    right: -80px;
    left: auto;
}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
    left: -80px;
    right: auto;
}

.swiper-button-prev,
.swiper-button-next {
    width: 49px;
    height: 49px;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    opacity: 0.3;
}

.swiper-button-prev:after,
.swiper-container-rtl .swiper-button-next:after {
    content: ' ';
    background-image: url('../img/ico-arrow-left.svg');
    width: 15px !important;
    height: 15px !important;
    background-repeat: no-repeat;
    background-size: contain;
}

.swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after {
    content: ' ';
    background-image: url('../img/ico-arrow-right.svg');
    width: 15px !important;
    height: 15px !important;
    background-repeat: no-repeat;
    background-size: contain;
}

.galleryPage .gallery-content-each {
    width: 340px;
    margin: 10px;
}

.sl-wrapper .sl-image .sl-caption {
    font-size: 16px;
    letter-spacing: 2px;
    padding: 10px 15px;
    background: rgba(0, 0, 0, 0.7);
}

.sl-wrapper .sl-counter {
    display: none !important;
}

.gallery-thumb {
    max-width: 1340px;
    margin: auto;
    padding: 25px 0px;
    flex-wrap: wrap;
}

.gallery-content-each {
    width: 100%;
    height: 315px;
    /* padding: 5px; */
    display: block;
    position: relative;
    transition: 0.2s ease;
    margin: 10px;
}

.gallery-content-each-70 {
    width: 60%;
}

.gallery-content-each-30 {
    width: 30%;
}

.gallery-content-each img {
    height: 315px;
}

.gallery-content-each:hover {
    opacity: 0.7;
}

.gallery-content-each .caption {
    position: absolute;
    background-color: rgba(255, 239, 96, 0.8);
    bottom: 0;
    width: 100%;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 20px;
    padding: 10px 20px;
}

.sl-wrapper button:hover {
    background-color: transparent;
    opacity: 0.5;
}

.clients-wrap {
    width: 100%;
    margin: 30px auto;
    padding-top: 50px;
}

.clients-content-wrap {
    position: relative;
}

.clients-content {
    max-width: 1100px;
    margin: auto;
    padding: 25px 20px;
}

.clients-each {
    height: 100px;
}

.clients-each img {
    width: auto;
    height: 100px;
}

section.gallery {
    display: none !important;
}

section.newsletter {
    background-color: #3d3d3d;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 2rem;

    @media (max-width: 768px) {
        padding: 20px 15px;
    }

    &.wa {
        padding: 0;
        .newsletter-wrap  {
            padding: 3rem 1rem;
            background: #0000006b;
            max-width: 100%;
            justify-content: center;

            @media (max-width: 768px) {
                padding: 2rem 1rem;
            }

            .newsletter-content {
                width: 100%;
                max-width: 1024px;
                padding: 0;
            }
        }
        
        .newsletter-content {
            display: flex;
            flex-direction: column;
            gap: 1vh;
            line-height: normal;
        }
        a {
            width: max-content;
            background-color: var(--main-primary);
            color: #fff;
            padding: 12px;
            border-radius: 1rem;
            text-shadow: none;

            @media (max-width: 768px) {
                width: 100%;
                text-align: center;
            }
        }
    }
}

.newsletter-wrap {
    flex-direction: row-reverse;
    max-width: 1240px;
    margin: auto;
    padding: 0px 20px;
    justify-content: space-between;
    letter-spacing: 0;
    line-height: 1;
}

.newsletter-wrap .title {
    font-size: 48px;
    font-weight: 600;
}

.newsletter-wrap .desc {
    font-size: 1.2rem;
    font-weight: 500;
    text-align: justify;
    margin: 1vh 0;
    line-height: 1.5;
}

.newsletter-content {
    color: #fff;
    width: 50%;
    padding: 0 10px;
}

.newsletter-bg {
    width: 50%;
}

input.inputType {
    width: 70%;
    background-color: #fff;
    height: 43px;
    border-radius: 1rem;
}

input.inputType::placeholder {
    text-transform: uppercase;
}

input.btn {
    display: block;
    background-color: var(--main-primary);
    color: var(--main-black);
    font-weight: 700;
    width: max-content;
    margin: 0;
    text-transform: uppercase;
    height: auto;
    padding: 9px 50px 10px 50px;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: 0.2s ease;
    border-radius: 1rem;
}

input.btn:hover {
    background-color: #CECECE;
}

input.btn-newsletter {
    margin-top: 10px;
}

.blog-articles-wrap {
    max-width: 1240px;
    margin: 75px auto;
    padding: 0px 20px;
}

.blog-articles-list {
    margin-top: 35px;
    padding: 0 5px;
    justify-content: space-between;

    .thumb {
        height: 250px;
        img {
            border-radius: 1rem;
            height: 250px;
            max-height: 250px;
        }

        @media (max-width: 768px) {
            height: 150px;
            img {
                height: 150px;
                max-height: 150px;
            }
        }
    }
}

.blog-articles-each {
    letter-spacing: 0;
    width: 32%;
}

.blog-articles-each .title {
    font-size: 1.2rem !important;
    font-weight: 700;
    line-height: 1;
    margin-top: 8px;
}

.blog-articles-each .summary {
    font-size: 18px;
    height: 81px;
    margin: 5px auto 15px auto;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog-articles-each a.btn {
    margin: 0;
    height: 32px;
    padding: 0px 20px 0px 20px;
}
section.gallery-delivery {
    position: relative;
    z-index: 10;
    max-width: 1240px;
    margin: auto;
    padding: 25px 20px;
    padding-right: 0;
    padding-left: 0;

    .section-title {
        margin-bottom: 1rem;
        text-transform: capitalize;
    }

    .gallery-delivery-content {
        min-height: 450px;
        position: relative;

        .swiper-container {
             @media (max-width: 768px) {
                padding-left: 1rem;
            }
        }

        img {
            height: 400px;
            border-radius: 1rem;
        }

        .usp {
            position: absolute;
            bottom: 0;
            z-index: 99999;
            margin: auto;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;

            p {
                padding: 1rem;
                background: #fff;
                border-radius: 1rem;
                box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
                text-align: center;
                margin-bottom: 3vh;

                 @media (max-width: 768px) {
                    max-width: 200px;
                    font-size: 0.8rem;
                 }
            }
        }
    }
}

section.links-stories {
    background: #121212 !important;
    color: #fff;
}

section.links-stories-all {
    font-weight: 600;
    background: #161616;
    background-size: contain;
    background-repeat: no-repeat;
    background-position-y: 220px;
    color: #fff;
    background-attachment: fixed;
}

.links-stories-wrap {
    max-width: 1240px;
    padding: 55px 20px;
    margin: auto;
}

.tabs {
    width: 100%;
}

ul#tabs-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: auto;

    @media (max-width: 768px) {
        display: flex;
        overflow: auto;

        li {
            min-width: max-content
        }
    }
}

ul#tabs-nav li {
    font-size: 0.8rem;
    font-weight: 700;
    margin-right: 70px;
    padding: 10px 0px;
    cursor: pointer;
    color: #C6C6C6;
    display: inline-block;
    transition: 0.2s ease;
}

ul#tabs-nav li:hover,
ul#tabs-nav li.active {
    border-bottom: 2px solid var(--main-primary);
    color: #fff;
}

#tabs-nav li a {
    text-decoration: none;
}

.tab-content {
    padding: 30px 0 50px 0;
    border-bottom: 1px solid #C7C7C7;
}

.links-wrap ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 2;
    letter-spacing: 0.5px;
    margin-right: 2rem;
}

.links-wrap .tab-content ul li {
    transition: 0.3s ease;
    display: block;
    text-align: left;
    width: max-content;
}

.links-wrap .tab-content ul li:hover {
    opacity: 0.5;
}

.internal-links {
    flex-wrap: wrap;
    justify-content: flex-start;
}

.links-wrap .tab-content {
    justify-content: space-between;
    align-items: flex-start;
    overflow: auto;
}

.links-wrap .tab-content-col {
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
}

.stories-content {
    justify-content: space-between;
    margin-top: 40px;

    ol {
        @media (max-width: 768px) {
            grid-template-columns: repeat(1,1fr);
        }
    }

    .story-fade {
        height: 50px;
        background: linear-gradient(#12121212, #121212);
        margin-top: -50px;
        position: relative;
        display: block;
    }

    .show-more-btn {
        display: flex;
        align-items: center;
        width: max-content;
        background-color: transparent;
        color: #fff;
        padding: 0;
        position: relative;

        span {
            text-transform: capitalize;
            font-size: 1rem;
        }

        &:hover {
            background: transparent !important;
        }
    }
}

.stories-content .column {
    width: 48%;
}

.stories-wrap {
    padding: 1rem;
    margin-top: 60px;

    table {
        margin: 1vh 0;
    }
}

.stories-wrap h3 {
    font-size: 18px;
    margin: 0;
    padding: 1vh 0 0.5vh;
}

.stories-wrap p {
    font-size: 14px;
    line-height: 1.7;
    margin-top: 0;
    margin-bottom: 30px;
}

footer {
    background-color: #000;
    color: var(--main-white);
}

footer a {
    transition: 0.2s ease;
}

footer a:hover {
    opacity: 0.7;
}

.footer-wrap {
    max-width: 1440px;
    margin: auto;
    padding: 1rem 7rem;
}

footer .address {
    display: none;
    font-weight: 700;
    font-size: 18px;
}

footer .address .separator {
    margin: 10px 0 25px 0;
    max-width: 128px;
    height: 5px;
    background-color: var(--main-primary);
}

.address-links,
.telp-mail,
.links-wrap {
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: flex-start;
}

footer .address-wrap {
    width: 500px;
}

footer .links-wrap {
    width: 400px;
    align-items: flex-start;
}

footer .telp-mail span {
    font-weight: 300;
}

footer .links-wrap .title {
    margin-bottom: 15px;
    font-weight: 700;
}

footer .links-wrap a {
    margin-bottom: 5px;
    font-weight: 300;
}

footer a {
    display: block;
}

footer .socmed {
    margin: auto;
    margin-top: 50px;
    text-align: center;
}

footer .socmed img {
    width: 35px;
    margin: 0 7px;
}

footer .copyright {
    background-color: #000;
    color: #a7a7a7;
    text-align: center;
    font-size: 12px;
    padding: 10px;
    letter-spacing: 0.2px;
}

footer .developer {
    display: none;
}

.ux-backtotop {
    display: none !important;
    position: fixed;
    width: 50px;
    height: 50px;
    bottom: 50px;
    right: 50px;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    user-select: none;
    transition: 0.3s ease;
}

.ux-backtotop:hover {
    opacity: 0.7;
}

.ux-backtotop-show {
    opacity: 1;
    pointer-events: all;
    user-select: all;
}

nav.narrowScreen {
    z-index: 1500;

    .topsection {
        height: 55px;
        background: #fff;
        position: sticky;
        display: block;
        top: 0;
        z-index: 999;
    }
}

nav.narrowScreen .search-form-wrap {
    width: 85%;
    flex-direction: row;
}

nav.narrowScreen input {
    width: 50%;
    padding: 0px 0px 0 8px;
    font-size: 13px;
}

nav.narrowScreen .select {
    width: 50%;
    padding: 0px 0px 0 8px;
    font-size: 13px;
}

nav.narrowScreen .select-options li {
    text-indent: 15px;
}

nav.narrowScreen .search-form {
    position: relative;
    top: 14px;
    left: 10px;
}

nav.narrowScreen ul {
    list-style: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0;
}

nav.narrowScreen>ul>li {
    display: inline-block;
    margin-right: 30px;
}

nav.narrowScreen a.products {
    position: relative;
}

nav.narrowScreen a.whatsapp {
    display: block;
    width: 25px;
    right: 15px;
    top: 0px;
    position: relative;
}

nav.narrowScreen .burger {
    font-size: 30px;
    cursor: pointer;
}

nav.narrowScreen .burger:hover {
    opacity: 0.7;
}

nav.narrowScreen a.whatsapp img {
    vertical-align: bottom;
}

nav.narrowScreen a.products::after {
    content: "";
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-color: #000 transparent transparent transparent;
    position: absolute;
    top: 20px;
    left: 110px;
    transform: rotate(0deg);
}

nav.narrowScreen ul.submenu a {
    padding-left: 35px;
}

nav.narrowScreen .overlay .submenu a {
    font-size: 16px;
}

nav.narrowScreen .overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #fff;
    overflow-x: hidden;
    transition: 0.3s;
}

nav.narrowScreen .overlay-content {
    position: relative;
    top: 5%;
    width: 100%;
    text-align: center;
}

nav.narrowScreen .overlay a {
    padding: 5px 20px;
    text-decoration: none;
    font-size: 20px;
    color: #000;
    display: block;
    transition: 0.3s;
    text-align: left;
    border-bottom: 1px solid #D4D4D4;
}

nav.narrowScreen .overlay a:hover,
nav.narrowScreen .overlay a:focus {
    color: #757575;
}

nav.narrowScreen .overlay .closebtn {
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 3rem;
    line-height: 1;
    color: #000;
    border-bottom: 0;
}

nav.wideScreen,
.hero-banner-wide {
    display: block;
}

nav.narrowScreen,
.hero-banner-narrow {
    display: none;
}

.menubar {
    justify-content: space-between;
    padding: 10px 15px;
    background-color: #fff;
}

.menubar a.logo {
    display: block;
    width: 80px;
}

.hero-carousel-content .content-overlay-wrap--regional {
    padding: 102px;
}

.container-checkbox {
    display: block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 5px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.container-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.container-checkbox .checkmark {
    position: absolute;
    top: 3px;
    left: 0;
    height: 14px;
    width: 14px;
    background-color: #fff;
    border: 1px solid #878787;
    border-radius: 1rem;
}

.container-checkbox:hover input~.checkmark {
    background-color: #ccc;
}

.container-checkbox input:checked~.checkmark {
    background-color: var(--main-primary);
    border: 0;
}

.container-checkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.filter-product .ico-filter {
    width: 15px;
    margin-right: 7px;
    vertical-align: middle;
}

.no-interaction {
    pointer-events: none;
    user-select: none;
}

.filter-wrap {
    .apply-filter {
        position: sticky;
        bottom: 0;
        background-color: white;
        padding: 1vh;
    }
}

.filter-wrap .main-title {
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #E8E8E8;
    padding: 5px 10px;

    @media (max-width: 900px) {
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 999;
    }
}

.filter-wrap .category {
    border-bottom: 1px solid #E8E8E8;
    padding: 5px 10px;
}

.filter-wrap .category--kategori {
    border-bottom: 2px solid #434343;
}

.filter-wrap .category .title {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 7px;
}

.filter-wrap .checklist-product .container-checkbox {
    font-size: 14px;
}

.filter-product {
    width: 100%;
    max-height: 710px;
    overflow: auto;
    overflow-x: hidden;
    border-radius: 1rem;
    position: sticky;
    top: 5vh;
}

.filter-wrap .expand-title {
    position: relative;
    font-weight: 600;
    font-size: 14px;
}

.expand-title:after {
    content: "";
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-color: #414042 transparent transparent transparent;
    position: absolute;
    top: 9px;
    left: 85px;
}

.product-list-header .hero-carousel-content .content-overlay {
    position: relative;
    z-index: 10;
    width: 950px;
    height: 220px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 1rem;
}

.product-list-header .hero-carousel-content .content-overlay-wrap {
    padding: 0;
    background-color: #0c0a0a30;
    height: 190px;
    border-radius: 1rem;
}

.product-list-header .hero-carousel-content .content-overlay-wrap .content {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 100%;
    text-align: center;
}

.filter-header-product {
    justify-content: start;
    gap: 3vw;
    align-items: flex-start;
    max-width: 1240px;
    margin: auto;
    padding: 0px 20px;

    .product-list-header {
        width: 100%;
    }
}

.product-list-header .hero-carousel-content p {
    text-transform: none;
    letter-spacing: -0.5px;
    max-width: 510px;
    margin: auto;
}

section.breadcrumbs {
    justify-content: flex-start;
    flex-wrap: wrap;
    max-width: 1240px;
    margin: auto;
    padding: 25px 20px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.5px;

    span {
        &:last-child {
            a::after {
                display: none;
            }
        }
    }
}

section.breadcrumbs a {
    margin-right: 36px;
    display: block;
    position: relative;
}

section.breadcrumbs a:hover {
    color: #9D9D9D;
}

section.breadcrumbs a:after {
    content: "";
    width: 8px;
    height: 8px;
    position: absolute;
    top: 5px;
    right: -22px;
    background: url('data:image/svg+xml,<svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" fill="%23000000" version="1.1" baseProfile="tiny" id="Layer_1" width="800px" height="800px" viewBox="0 0 42 42" xml:space="preserve"><polygon fill-rule="evenodd" points="11,38.32 28.609,21 11,3.68 13.72,1 34,21.01 13.72,41 "/></svg>');
    background-size: contain;

    :last-child {
        background: none;
    }
}

section.breadcrumbs a:last-child::after {
    display: none;
}

.sortby {
    border: 2px solid #000;
    width: 300px;
    margin-bottom: 30px;
    border-radius: 1rem;
}

.sortby .title {
    font-size: 12px;
    width: 20%;
    padding-left: 0.5vw;

    @media (max-width: 900px) {
        padding-left: 1vw;
    }
}

.sortby .select {
    width: 80%;
}

.sortby .select-options li {
    text-indent: 15px;
}

.product-grid {
    justify-content: flex-start;
    flex-wrap: wrap;
    min-height: 300px;
    gap: 1vw;

    @media (max-width: 768px) {
        gap: 3vw;
    }
}

.product-grid .product-list-each {
    width: 32%;
    margin-bottom: 1vh;
}

.filter-narrow {
    display: none;
}

.sortby-filter {
    justify-content: flex-start;
}

.filter-wrap .closebtn {
    position: absolute;
    top: -7px;
    right: 10px;
    font-size: 60px;
    line-height: 1;
    color: #000;
    border-bottom: 0;
    font-weight: 300;

    @media (min-width: 768px) {
        visibility: hidden;
    }
}

.apply-filter a.btn {
    padding: 5px 15px 6px 15px;
    font-size: 14px;
    margin: 10px auto;
    background: transparent;
}

.apply-filter a.btn:hover {
    background: #CECECE;
}

.gallery-top {
    height: 80%;
    width: 100%;
    cursor: pointer;
}

.gallery-thumbs {
    height: 20%;
    box-sizing: border-box;
    padding: 10px 0;
    cursor: pointer;
    display: none !important;
}

.gallery-thumbs .swiper-slide:hover {
    opacity: 0.95;
}

.gallery-thumbs .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.4;
    transition: 0.3s ease;
}

.gallery-thumbs .swiper-slide-thumb-active {
    opacity: 1;
}

.product-details-wrap {
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1240px;
    margin: auto;
    padding: 0px 20px;

    .product-list-each .fix-price {
        font-size: 1.2rem !important;
        font-weight: 700;
        color: #333;
    }
}

.product-details-wrap .content {
    position: relative;
    width: 48%;
}

.product-details-wrap .content .product-rating {
    display: flex;
    gap: 8px;
    flex-direction: column;
    margin-top: 1vh;
    font-size: 0.85rem;

    .meta {
        display: flex;
        align-items: center;
    }
}

/* Regions styling */
.regions {
    padding: 0;
    min-height: 500px;

    h2 {
        text-align: center;
        margin: 0;

        @media (max-width: 1024px) {
            font-size: 1rem;
        }
    }

    .region-subtitle {
        text-align: justify;
        @media (max-width: 1024px) {
            font-size: 0.8rem;
        }
    }
}

.regions .container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 1rem;
}

.regions .tabs {
    margin-top: 20px;
}

.regions .region-tabs-nav {
    list-style: none;
    display: flex;
    justify-content: start;
    gap: 1rem;
    padding: 0;
    overflow: auto;
}

.regions .region-tabs-nav a {
    width: max-content;
    text-decoration: none;
    padding: 10px 20px;
    display: block;
    color: #333;
    background: #f0f0f0;
    border-radius: 1rem;
    font-size: 0.8rem;
}

.regions .region-tabs-nav a.active {
    background: #000;
    color: #fff;
}

.regions .region-tab-content {
    display: none;
}

.regions .region-tab-content.active {
    display: block;
}

.regions .region-section {
    margin-bottom: 40px;
}

.regions .region-section h3 {
    margin-bottom: 20px;
    font-size: 1.5rem;
}

.regions .region-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;

    @media (max-width: 1024px) {
        grid-template-columns: repeat(2, 1fr);
    }
}

.regions .region-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    border-radius: 1rem;
    height: 250px;

    @media (max-width: 1024px) {
        height: 125px;
    }

    .overlay {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        background: #00000073;
        z-index: 1;
        border-radius: 1rem;
    }

    img {
        max-width: 100%;
        height: 100%;
        border-radius: 1rem;
    }

    h4 {
        flex: 3;
        margin: 0;
        font-size: 1.2rem;
        position: relative;
        color: #fff;

        @media (max-width: 1024px) {
            font-size: 0.8rem;
        }
    }

    svg {
        flex: 1;
        position: relative;
        right: 0;
        @media (max-width: 1024px) {
            width: 16px;
            height: 16px;
        }
    }
}

.gallery-top .swiper-slide {
    height: 435px;
    object-fit: contain;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid #f1f1f1;
    border-radius: 1rem;
}

.gallery-thumbs .swiper-slide {
    height: 100px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.product-details .product-list-title-wrap .title {
    font-size: 1rem;
    @media (min-width: 768px) {
        font-size: 1.2rem;
    }
}

.product-details .product-list-title-wrap .title {
    margin: 0 auto 5px auto;
}

.product-details .price-wrap {
    max-width: 300px;
    margin: 1vh 0;

    &.top {
        padding-bottom: 0.5vh;
        margin-top: 0;
        @media (min-width: 768px) {
            display: none;
        }
    }

    &.bottom {
        padding-top: 1vh;
        padding-bottom: 1vh;
        @media (max-width: 768px) {
            display: none;
        }
    }
}

.product-details .product-list-each {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;

    .strike-price {
        font-size: 0.9rem !important;
    }
    
    @media (max-width: 768px) {
        padding: 1rem;
    }
}

.product-details .product-list-each .summary {
    margin-top: 0;
}

.product-details .product-list-each:hover {
    opacity: 1;
}

.deskripsi-wrap .title {
    color: #000;
    font-weight: 600;
    font-size: 0.85rem;
}

.deskripsi-wrap {
    color: #696969;
    line-height: 1.5;
    margin: 0.5vh 0 1vh;
    @media (max-width: 768px) {
        margin-top: 1vh;
    }
}

.product-details .share-wrap {
    display: none;
    font-size: 14px;
}

.product-details .share-wrap a img {
    width: 24px;
    margin-left: 7px;
}

.product-details .share-wrap a {
    transition: 0.3s ease;
}

.product-details .share-wrap a:hover {
    opacity: 0.7;
}

.product-details a.btn,
.product-details button.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40px;
    font-size: 1rem;
    margin: 0;
    margin-top: 0.5vh;
    text-transform: none;
    border-radius: 1rem;
    border: 0;
    font-weight: 600;
    background-color: #1db437;
    color: #fff;

    &:hover {
        background-color: #1db437 !important;
    }
}

.product-details .desc {
    position: relative;
    padding: 10px 0;
    font-size: 0.85rem;

    &.location {
        margin-top: 0;
        overflow: scroll;
        max-height: 80px;
        ul {
            margin: 0;
            padding:0;
            display: flex;
            flex-wrap: wrap;
            gap: 3px;
        }
    }

    &.lists {
        display: flex;
        flex-direction: column;
        padding: 0;

        .list-item {
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #e2e2e2;
            padding: 1vh 0;

            p {
                font-size: 0.85rem;

                &.ready {
                    color: #58bd7b !important;
                    font-weight: 600;
                }
            }

            p:first-child {
                flex: 2 0 0px;
            }
            p:last-child {
                flex: 8 1 0px;
                color: #000;

                @media (max-width: 768px) {
                    flex: 5 1 0px;
                }
            }
        }
    }
}

.product-details .desc::after {
    top: auto;
    bottom: 0;
}

.product-page .product-carousel-wrap {
    margin-bottom: 0;
}

.search-results-title {
    line-height: 1.3;
}

.search-results-title .main-title {
    font-size: 48px;
    font-weight: 700;
    letter-spacing: -3px;
    line-height: 1;
    margin-bottom: 5px;
}

.search-results-title .search-keyword {
    font-size: 30px;
    letter-spacing: -1px;
}

.search-results-title .separator {
    margin: 0;
    max-width: 128px;
    height: 5px;
    background-color: var(--main-primary);
    margin-top: 15px;
}

.search-results-title .f-size-med {
    font-size: 24px;
}

.search-keyword span {
    font-weight: 700;
}

.search-wrap {
    max-width: 1240px;
    margin: auto;
    padding: 25px 20px;
}

.search-result-page .product-carousel-wrap {
    margin-top: 50px;
}

.article-thumbnails-wrap {
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 790px;
}

.blog-thumbnails-wrap {
    justify-content: space-between;
    flex-direction: row-reverse;
    align-items: flex-start;
    max-width: 1240px;
    margin: auto;
    padding: 0px 20px;

    .article-thumbnails {
        h1 {
            margin: 1vh;
        }
    }
}

.category-articles-panel {
    position: sticky;
    top: 12vh;
}

.category-articles-panel-wrap {
    width: 380px;
    padding: 20px;
}

.category-articles-panel-wrap .title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.5px;
    border-bottom: 3px solid #000;
    padding-bottom: 7px;
    margin-bottom: 10px;
}

.category-articles-panel-wrap .links a {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.5px;
    display: block;
    border-bottom: 1px solid #CDCDCD;
    padding-bottom: 10px;
    margin-bottom: 10px;
    transition: 0.1s ease;
}

.category-articles-panel-wrap .links a:hover {
    color: #979797;
}

.category-articles-panel-wrap .links a:last-child {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

.blog-thumbnails .blog-articles-each {
    width: 48%;
    margin-bottom: 70px;

    img {
        border-radius: 1rem;
    }
}

.blog-thumbnails .blog-articles-each .title {
    margin-top: 12px;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* number of lines to show */
    overflow: hidden;
    line-clamp: 2; /* standard property for newer browsers */
}

.articles-wrap {
    max-width: 1240px;
    margin: auto;
    padding: 0px 20px;
    align-items: flex-start;
    justify-content: space-between;
}

.content-article .share img {
    width: 28px;
    margin-left: 7px;
}

.content-article .share a {
    transition: 0.1s ease;
}

.content-article .share a:hover {
    opacity: 0.7;
}

.content-article h1 {
    font-size: 48px;
    letter-spacing: -0.5px;
    line-height: 1;
    margin: 0;
}

.publish-date-share {
    justify-content: space-between;
    margin: 15px auto 25px auto;
}

.publish-date-share span {
    font-weight: 700;
}

.content-article .caption {
    color: #4F4F4F;
    font-size: 14px;
    letter-spacing: 0.5px;
    margin: 10px auto;
}

.content-article h3 {
    margin: 0;
}

.content-article p {
    margin: 0px 0 20px 0;
}

.articles-wrap .content-article {
    width: 69%;
}

.articles-wrap .content-article--about {
    max-width: 840px;
    margin: auto;
    margin-bottom: 100px;
}

.articles-wrap .content-related {
    position: sticky;
    top: 12vh;
    width: 28%;
    padding: 10px 20px;
    margin-top: 163px;
}

.content-related .title {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.5px;
    border-bottom: 3px solid #000;
    padding-bottom: 7px;
    margin-bottom: 30px;
}

.content-related img {
    width: 85px;
    height: 85px;
    border-radius: 1rem;
}

.content-related .each {
    margin-bottom: 25px;
}

.content-related .each:last-child {
    margin-bottom: 10px;
}

.content-related .related-title {
    font-size: 18px;
    line-height: 1;
    margin-left: 20px;
}

.content-article article {
    margin-top: 30px;
    text-align: justify;
}

.photo-article-inparagraph {
    margin: 30px auto;
}

.contactus {
    max-width: 1240px;
    margin: auto;
    padding: 25px 20px;
}

.contactus-wrap {
    justify-content: space-between;
    align-items: flex-start;
}

.content-contact .title {
    font-weight: 700;
    font-size: 48px;
    letter-spacing: -1px;
}

.content-contact .address {
    margin: 30px 0 100px 0;
}

.content-contact .address .title {
    font-weight: 700;
    font-size: 24px;
}

.content-contact .address .desc {
    font-weight: 600;
    font-size: 20px;
    line-height: 1.2;
}

.content-maps .title-wrap {
    justify-content: space-between;
}

.content-maps .title-wrap a {
    margin: 0;
}

.content-maps .title,
.contact-form .title {
    font-weight: 700;
    font-size: 36px;
    letter-spacing: -1px;
    text-align: center;
}

.content-contact .telp-mail {
    justify-content: space-between;
}

.content-contact .telp-mail a.each {
    display: block;
    transition: 0.1s ease;
}

.content-contact .telp-mail a.each:hover {
    opacity: 0.5;
}

.content-contact,
.content-maps {
    width: 47%;
}

.maps {
    margin-top: 35px;
    border-radius: 10px;
    overflow: hidden;
}

.maps iframe {
    width: 100%;
    height: 244px;
}

.contact-form {
    max-width: 650px;
    margin: 100px auto;
}

.contact-form a.btn {
    margin: 0;
}

.contact-form .btn img {
    width: 16px;
}

.contact-form .subtitle-wrap {
    margin: 25px auto;
    justify-content: space-between;
}

.contact-form .subtitle {
    width: 380px;
}

.contact-form form input,
.contact-form form textarea {
    width: 100%;
    border: 2px solid #000;
    margin-bottom: 20px;
}

.contact-form form textarea::placeholder {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    letter-spacing: 0.5px;
    padding: 5px 12px;
}

.contact-form button {
    display: block;
    background-color: var(--main-primary);
    color: var(--main-black);
    font-weight: 700;
    width: max-content;
    margin: 0;
    text-transform: uppercase;
    padding: 9px 20px 9px 20px;
    letter-spacing: 0.5px;
    border: 3px solid #000;
    cursor: pointer;
    transition: 0.2s ease;
}

.contact-form button:hover {
    background-color: #CECECE;
}

.notfound {
    padding: 20px 20px 50px 20px;
}

.notfound-wrap {
    max-width: 670px;
    margin: auto;
}

.notfound-wrap .big-title {
    font-size: 144px;
    letter-spacing: -1px;
    font-weight: 900;
    line-height: 1;
}

.notfound-wrap .title {
    font-weight: 700;
    font-size: 48px;
    letter-spacing: -1px;
}

.notfound-wrap .subtitle {
    font-size: 24px;
    letter-spacing: -1px;
    font-weight: 600;
    margin: 15px 0 30px 0;
}

.notfound-wrap a.btn {
    margin: 0;
    position: relative;
    padding-left: 30px;
}

.expandable-things__item {
    /* margin: 5px auto; */
}

.expandable-things__item .expandable-things__title {
    position: relative;
    display: block;
    padding: 0px 20px 5px 0px;
    /* margin-bottom: 2px; */
    font-size: 14px;
    -webkit-transition: background-color 0.2s;
    transition: background-color 0.2s;
    cursor: pointer;
}

.expandable-things__item .expandable-things__title:hover {
    /* background-color: #e5e4e4; */
    color: #9D9D9D;
    transition: all 0.1s ease-out;
}

.expandable-things__item .expandable-things-active {
    /* background-color: #e5e4e4; */
    /* color: #9D9D9D; */
}

.expandable-things__item .expandable-things__title .expandable-things__arrow {
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-color: #414042 transparent transparent transparent;
    position: absolute;
    top: 9px;
    right: 0px;
    transform: rotate(0deg);
}

.expandable-things__item .expandable-things__rotate {
    top: 4px !important;
    transform: rotate(-180deg) !important;
}

.expandable-things__item .expandable-things__content {
    padding: 0 15px;
    margin-bottom: 2px;
    font-size: 14px;
    display: none;
    /* background-color: #f3f3f3; */
}

.expandable-things__item .expandable-things__arrow-item {
    /* font-weight: 700; */
}

.expandable-things__item .expandable-things__content a {
    display: block;
    margin-bottom: 5px;
    transition: 0.1s ease;
}

.expandable-things__item .expandable-things__content a:hover {
    color: #9D9D9D;
}

.bottom-nav {
    display: none;

    @media (max-width: 768px) {
        display: flex;
        z-index: 999;
        align-items: center;
        gap: 3vw;
        padding: 2vw;
        position: sticky;
        bottom: 0;
        background-color: #ffffffc9;

        .item {
            display: flex;
            justify-content: center;
            flex: 1;
            align-items: center;
            padding: 0;
            width: auto;
            height: 4svh;
            border-radius: 1rem;
            background-color: #1db437;
            color: #fff;

            &.call {
                background-color: #000;

                &:hover, &:active, &:focus {
                    background-color: #000 !important;
                    cursor: pointer;    
                }
            }

            img {
                width: 1rem;
            }

            &:hover, &:active, &:focus {
                background-color: #1db437 !important;
                cursor: pointer;    
            }
        }
    }
}

.floating-wa {
    position: fixed;
    width: auto;
    bottom: 3vh;
    right: 2.5vw;
    height: max-content;
    transition: 0.2s ease;
    z-index: 1000;

    span {
        background-color: #f8f8f8;
        border-radius: 1rem;
        padding: 8px 12px;
    }

    @media (max-width: 768px) {
        display: none !important;
        bottom: 2vh !important;
        right: 4vw !important;
    }
}

.floating-wa img {
    width: 37px;

    @media (max-width: 768px) {
        width: 10vw !important;
    }
}

.floating-wa:hover {
    cursor: pointer;
    opacity: 1;
}

@media (max-width: 1366px) {
    .product-carousel-content {
        max-width: 1190px;
        margin: auto;
        padding: 25px 20px;
    }

    .swiper-button-prev,
    .swiper-button-next {
        width: 40px;
        height: 40px;
    }

    .swiper-button-prev:after,
    .swiper-container-rtl .swiper-button-next:after {
        width: 40px;
        height: 40px;
    }

    .swiper-button-next:after,
    .swiper-container-rtl .swiper-button-prev:after {
        width: 40px;
        height: 40px;
    }

    .swiper-button-next,
    .swiper-container-rtl .swiper-button-prev {
        right: -55px;
        left: auto;
    }

    .swiper-button-prev,
    .swiper-container-rtl .swiper-button-next {
        left: -55px;
        right: auto;
    }

    .links-stories-wrap {
        max-width: 1240px;
        padding: 55px 20px;
        margin: auto;
    }

    .links-wrap ul {
        margin-right: 50px;
    }

    .footer-wrap {
        max-width: 1240px;
    }
}

@media (max-width: 1280px) {
    .nav-wrap {
        max-width: 1020px;
        padding: 10px 15px;
    }

    .nav-menu>ul>li {
        margin-right: 15px;
    }

    .nav-menu>ul>li:first-child {
        margin-right: 27px;
    }

    .mainlogo {
        max-width: 180px;
    }

    .search-form {
        width: 410px;
    }

    .browse-categories {
        font-size: 13px;
        width: 155px;
    }

    .browse-categories .title-wrap img {
        width: 18px;
        margin-right: 5px;
        top: -3px;
    }

    .browse-categories ul li {
        padding: 3.15px 10px;
    }

    .browse-categories .title-wrap {
        padding: 7px 10px 8px 10px;
    }

    .browse-categories ul li:after {
        top: 8px;
    }

    .nav-space {
        margin-top: 61px;
    }

    .wp-header-wrap {
        max-width: 1020px;
        padding: 20px 15px;
    }

    .hero-carousel {
        /* width: 820px; */
        height: 319px;
    }

    .hero-carousel-content .content-overlay-wrap {
        padding: 37px;
    }

    .hero-carousel-content .content-overlay-wrap--regional {
        padding: 75px;
    }

    .swiper-pagination-fraction,
    .swiper-pagination-custom,
    .swiper-container-horizontal>.swiper-pagination-bullets {
        bottom: 23px;
    }

    /* .featured-services-wrap {
        max-width: 1020px;
        padding: 20px 15px;
    } */

    .featured-services .title {
        font-size: 0.7rem;
    }

    .quickfinder .search-form-wrap {
        height: 55px;
        padding: 0 15px;
    }

    .quickfinder-content-wrap {
        max-width: 1020px;
        margin: auto;
        padding: 0px 15px;
    }

    .quickfinder-title {
        width: 180px;
        height: 55px;
        line-height: 55px;
        padding-left: 15px;
        font-size: 22px;
    }

    .featured-product-wrap {
        max-width: 1020px;
        margin: 10px auto 0 auto;
        padding: 25px 15px 0 15px;
    }

    .main-separator {
        max-width: 991px;
    }

    .featured-product-content-each {
        margin-bottom: 50px;
    }

    .featured-product-content-each a.btn {
        margin-top: 35px;
    }

    .featured-product-content-each .product-img {
        width: 170px;
        height: 123px;
    }

    .circle-accent {
        width: 150px;
        height: 150px;
    }

    .featured-product-content-each:hover .circle-accent {
        width: 170px;
        height: 170px;
    }

    a.btn {
        font-size: 14px;
    }

    .featured-product-content-each a.btn {
        padding: 4px 20px 4px 20px;
    }

    .section-title-alt {
        font-size: 1.2rem;
    }

    .product-list-wrap {
        margin-top: 20px;
        position: relative;
    }

    .product-carousel-content {
        max-width: 925px;
        padding: 20px 15px;
    }

    .swiper-button-prev,
    .swiper-button-next {
        width: 30px;
        height: 30px;
        display: none !important;
    }

    .swiper-button-prev:after,
    .swiper-container-rtl .swiper-button-next:after {
        width: 30px;
        height: 30px;
    }

    .swiper-button-next:after,
    .swiper-container-rtl .swiper-button-prev:after {
        width: 30px;
        height: 30px;
    }

    .product-list-each .strike-price {
        font-size: 16px;
    }

    .product-list-each .fix-price {
        font-size: 20px;
    }

    .product-list-title-wrap .title {
        font-size: 20px;
        margin: 5px auto 5px auto;
    }

    .product-list-title-wrap .tag {
        font-size: 14px;
    }

    .product-carousel-wrap {
    }

    .section-title {
        font-size: 26px;
    }

    .section-title p.title-stories {
        font-size: 26px;
    }

    .gallery-content-each .caption {
        font-size: 16px;
        padding: 7px 20px;
    }

    .gallery-content-each,
    .gallery-content-each img {
        height: 275px;
    }

    .product-carousel {
        margin-bottom: 30px;
    }

    .clients-wrap {
        margin: 10px auto;
        padding-top: 30px;
    }

    .clients-each {
        height: 80px;
    }

    .clients-each img {
        height: 80px;
    }

    .clients-content {
        max-width: 850px;
        margin: auto;
        padding: 10px 20px;
    }

    .newsletter-wrap .title {
        font-size: 40px;
    }

    .newsletter-wrap .desc {
        font-size: 20px;
        margin: 10px 0 20px 0;
    }

    input.btn {
        padding: 5px 50px 5px 50px;
    }

    input.inputType {
        height: 35px;
    }

    .blog-articles-wrap {
        max-width: 100%;
        margin: 50px auto;
        padding: 0px 15px;
    }

    .blog-articles-each .title {
        font-size: 26px;
    }

    .blog-articles-each .summary {
        font-size: 16px;
    }

    .blog-articles-each a.btn {
        height: 28px;
    }

    .from-ceo-wrap .logo {
        width: 260px;
    }

    .from-ceo-wrap {
        max-width: 100%;
        margin: 55px auto 0 auto;
        padding: 15px 15px;
    }

    .from-ceo-wrap .title {
        font-size: 30px;
    }

    .from-ceo-wrap .subtitle {
        font-size: 18px;
    }

    .from-ceo-wrap .motto-title,
    .from-ceo-wrap .motto-desc {
        font-size: 18px;
    }

    .from-ceo-summary {
        font-size: 14px;
    }

    .from-ceo-summary p {
        margin: 10px 0;
    }

    .from-ceo-summary strong {
        font-size: 16px;
    }

    .links-stories-wrap {
        max-width: 100%;
        padding: 20px 15px;
    }

    .tab-content {
        padding: 20px 0 30px 0;
    }

    .links-wrap ul {
        font-size: 13px;
        margin-right: 35px;
    }

    .stories-wrap {
        margin-top: 40px;
    }

    .stories-wrap h3 {
        font-size: 16px;
    }

    .stories-wrap p {
        font-size: 12px;
        line-height: 1.6;
        margin-bottom: 20px;
    }

    .footer-wrap {
        max-width: 100%;
        padding: 20px 15px;
    }

    footer .address {
        font-size: 16px;
    }

    .telp-mail {
        font-size: 14px;
    }

    footer .links-wrap a {
        margin-bottom: 3px;
        font-size: 14px;
    }

    footer .socmed {
        margin-top: 35px;
    }

    footer .socmed img {
        width: 28px;
    }

    footer .copyright {
        font-size: 10px;
        padding: 7px;
    }

    footer .address-wrap {
        width: 450px;
    }

    footer .links-wrap {
        width: 320px;
    }

    section.breadcrumbs,
    .filter-header-product {
        max-width: 1020px;
        padding: 1vh;
    }

    .product-list-header .hero-carousel-content .content-overlay {
        width: 750px;
    }

    .product-grid-wrap {
        width: 750px;
    }

    .product-grid .product-list-each {
        width: 240px;
        margin-bottom: 50px;
    }

    .product-grid-wrap {
        margin-bottom: 0;
    }

    .product-page .product-carousel {
        margin-bottom: 0;
    }

    .product-page .product-details-wrap {
        max-width: 1020px;
        padding: 0;
    }

    .search-wrap {
        max-width: 1020px;
        padding: 25px 15px;
    }

    .blog-thumbnails-wrap {
        max-width: 1020px;
        padding: 0px 15px;
    }

    .category-articles-panel-wrap {
        width: 250px;
        padding: 15px;
    }

    .category-articles-panel-wrap .title {
        font-size: 22px;
        padding-bottom: 5px;
        margin-bottom: 7px;
    }

    .category-articles-panel-wrap .links a {
        font-size: 16px;
        padding-bottom: 7px;
        margin-bottom: 7px;
    }

    .article-thumbnails-wrap {
        max-width: 710px;
    }

    .articles-wrap {
        max-width: 1020px;
        padding: 0px 15px;
    }

    .content-related .related-title {
        font-size: 16px;
    }

    .articles-wrap .content-article--about {
        margin-bottom: 60px;
    }

    .photo-article-inparagraph {
        margin: 20px auto;
    }

    .contactus {
        max-width: 1020px;
        padding: 0px 15px;
    }

    .notfound-wrap a.btn::before {
        top: 14px;
    }
}

@media (max-width: 960px) {

    .browse-categories,
    .header-separator {
        display: none;
    }

    nav.narrowScreen,
    .hero-banner-narrow {
        display: block;
    }

    nav.wideScreen,
    .hero-banner-wide {
        display: none;
    }

    .featured-services-wrap {
        flex-direction: row;
        flex-wrap: wrap;
        text-align: center;
        align-items: baseline;
        gap: 1rem;
    }

    .featured-services .each {
        flex: 1 1;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-right: 10px;
        margin-left: 10px;
        gap: 1vh;
        justify-content: center;
        align-content: center;
    }

    .featured-services .title {
        margin: 0;
    }

    .hero-carousel {
        width: 100%;
    }

    .hero-carousel-content .content-overlay {
        background-size: cover;
        background-position: left;

        &.not-main {
            background-position: 77%;
        }
    }

    .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
    }

    .quickfinder-title::after {
        display: none;
    }

    .quickfinder-title {
        width: 100%;
        font-style: normal;
        font-size: 18px;
        height: 40px;
        line-height: 40px;
        padding-left: 0;
    }

    .quickfinder-content-wrap,
    .search-form-wrap {
        flex-direction: column;
    }

    .quickfinder .search-form-wrap {
        height: auto;
        padding-top: 10px;
    }

    .search-kebutuhan,
    .search-rangeharga {
        width: 100%;
        justify-content: space-between;
        margin: 5px auto;
    }

    .quickfinder button {
        margin: 10px auto;
        height: 30px;
    }

    .section-title {
        font-size: 22px;
    }

    .section-title .separator {
        max-width: 110px;
        height: 3px;
        margin-top: 3px;
    }

    a.btn {
        font-size: 12px;
    }

    a.btn-outline {
        padding: 6px 15px 8px 15px;
    }

    .title-viewall {
        padding: 0;
    }

    .section-title-alt {
        font-size: 20px;
        letter-spacing: -1px;
    }

    .featured-product-content {
        margin: 60px auto 20px auto;
        flex-wrap: wrap;
        justify-content: center;
    }

    .featured-product-content-each {
        margin: 10px;
        margin-bottom: 50px;
    }

    .featured-product-content-each .product-img {
        width: 160px;
        height: 116px;
    }

    .product-list-each .strike-price {
        font-size: 15px;
    }

    .product-list-each .strike-price::after {
        top: 9px;
    }

    .product-list-each .fix-price {
        font-size: 18px;
    }

    .product-list-title-wrap .title {
        font-size: 0.7rem;
    }

    .product-list-each .discount {
        width: 35px;
        height: 35px;
        font-size: 14px;
        line-height: 35px;
    }

    .gallery-content-each-70,
    .gallery-content-each-30 {
        width: 45%;
    }

    .gallery-content-each,
    .gallery-content-each img {
        height: 200px;
    }

    .clients-content {
        max-width: 80%;
    }

    .newsletter-wrap .title {
        font-size: 32px;
    }

    .newsletter-wrap .desc {
        font-size: 1rem;
        margin: 10px 0 15px 0;
    }

    ul#tabs-nav li {
        margin-right: 50px;
    }

    .from-ceo-wrap .title {
        font-size: 26px;
    }

    .from-ceo-wrap .subtitle {
        font-size: 16px;
    }

    .from-ceo-wrap .motto-title,
    .from-ceo-wrap .motto-desc {
        font-size: 16px;
    }

    .links-wrap .tab-content {
        flex-wrap: wrap;
        padding: 20px 0 10px 0;
    }

    .links-wrap ul {
        margin-bottom: 20px;
    }

    .address-links {
        flex-direction: column;
    }

    footer .address {
        text-align: center;
    }

    footer .address .separator {
        margin: 10px auto 25px auto;
    }

    footer .address-wrap {
        margin-bottom: 30px;
    }

    footer .links-wrap .title {
        margin-bottom: 5px;
    }

    .ux-backtotop {
        right: 20px;
    }

    .floating-wa {
        right: 20px;
    }

    .product-list-wrap {
        margin: 20px auto 0 auto;
    }

    .blog-articles-each .title {
        font-size: 20px;
    }

    .blog-articles-each .summary {
        font-size: 14px;
        height: 65px;
        margin: 5px auto 10px auto;
    }

    .blog-articles-each a.btn {
        height: 28px;
        line-height: 22px;
    }

    .hero-carousel-content .content-overlay-wrap--regional {
        padding: 64px;
    }

    .product-list-header .hero-carousel-content .content-overlay {
        width: 750px;
    }

    .product-grid-wrap {
        width: 750px;
    }

    .product-grid .product-list-each {
        width: 240px;
        margin-bottom: 50px;
    }

    .product-grid-wrap {
        margin-bottom: 0;
    }

    .product-list-header .hero-carousel-content .content-overlay {
        width: 550px;
        height: 170px;
    }

    .product-grid-wrap {
        width: 550px;
    }

    .product-grid .product-list-each {
        width: 175px;
        margin-bottom: 30px;
    }

    .filter-product {
        width: auto;
    }

    .product-grid-wrap {
        margin-bottom: 0;
    }

    .filter-header-product {
        padding-top: 0;
    }

    .nav-space {
        margin-top: 65px;
    }

    .product-list-header .hero-carousel-content .content-overlay-wrap {
        height: 150px;
    }

    .product-list-header .hero-carousel-content h1 {
        font-size: 1.2rem;
    }

    .product-grid-wrap {
        margin-top: 25px;
    }

    .sortby {
        margin-bottom: 15px;
    }

    .product-details .product-list-title-wrap .title {
        font-size: 1rem;
    }

    .search-results-title .main-title {
        font-size: 36px;
        letter-spacing: -2px;
    }

    .search-results-title .search-keyword {
        font-size: 24px;
    }

    .search-results-title .f-size-med {
        font-size: 18px;
    }

    .category-articles-panel-wrap {
        width: 200px;
        padding: 10px;
    }

    .category-articles-panel-wrap .title {
        font-size: 20px;
    }

    .category-articles-panel-wrap .links a {
        font-size: 15px;
    }

    .blog-thumbnails .blog-articles-each {
        margin-bottom: 40px;
    }

    .article-thumbnails-wrap {
        max-width: 520px;
    }

    .articles-wrap .content-related {
        padding: 10px;
    }

    .content-related .title {
        font-size: 20px;
        padding-bottom: 7px;
        margin-bottom: 18px;
    }

    .content-related img {
        width: 60px;
        height: 60px;
    }

    .content-related .related-title {
        font-size: 14px;
        margin-left: 10px;
    }

    .content-related .each {
        margin-bottom: 15px;
    }

    .content-article h1 {
        font-size: 38px;
    }

    .publish-date-share {
        font-size: 14px;
        margin: 10px auto 20px auto;
    }

    .content-article .caption {
        font-size: 12px;
    }

    .content-article article {
        margin-top: 20px;
    }

    .content-article h3 {
        font-size: 17px;
    }

    .content-article p {
        font-size: 14px;
    }

    .articles-wrap .content-article--about {
        width: 100%;
    }

    .content-contact .title {
        font-size: 36px;
    }

    .maps {
        margin-top: 20px;
    }

    .content-contact .address .title {
        font-size: 20px;
    }

    .content-contact .address .desc {
        font-size: 16px;
    }

    .content-contact .telp-mail {
        flex-direction: column;
        align-items: flex-start;
    }

    .content-contact .address {
        margin: 30px 0 75px 0;
    }

    .notfound {
        margin-top: 150px;
    }

    .notfound-wrap a.btn::before {
        top: 12px;
    }
}

@media (max-width: 767px) {
    nav {
        border-bottom: 0;
    }

    .featured-product-content-each .product-img {
        width: 130px;
        height: 94px;
    }

    .circle-accent {
        width: 120px;
        height: 120px;
    }

    .featured-product-content-each:hover .circle-accent {
        width: 150px;
        height: 150px;
    }

    .featured-product-content-each a.btn {
        padding: 4px 10px 4px 10px;
    }

    .product-list-each .fix-price {
        font-size: 16px;
    }

    .product-list-each .discount {
        width: 30px;
        height: 30px;
        font-size: 12px;
        line-height: 30px;
    }

    .swiper-button-prev,
    .swiper-button-next,
    .swiper-button-next:after,
    .swiper-container-rtl .swiper-button-prev:after,
    .swiper-button-next:after,
    .swiper-container-rtl .swiper-button-prev:after {
        width: 20px;
        height: 20px;
    }

    .swiper-button-next,
    .swiper-container-rtl .swiper-button-prev {
        right: -32px;
        left: auto;
    }

    .swiper-button-prev,
    .swiper-container-rtl .swiper-button-next {
        left: -32px;
        right: auto;
    }

    .gallery-content-each-70,
    .gallery-content-each-30 {
        width: 100%;
    }

    .gallery-content-each .caption {
        font-size: 14px;
        padding: 7px 10px;
    }

    .newsletter-bg {
        display: none;
    }

    .newsletter-content {
        width: 100%;
        padding: 10px;
    }

    .newsletter-wrap {
        padding: 0px 5px;
    }

    .blog-articles-each {
        width: 48%;
    }

    .blog-articles-each:last-child {
        display: none;
    }

    .blog-articles-wrap {
        margin: 30px auto;
    }

    .from-ceo-wrap {
        margin: 35px auto 0 auto;
        flex-direction: column;
    }

    .from-ceo-wrap .content {
        width: 100%;
        text-align: left;
    }

    .from-ceo-wrap .motto {
        padding: 15px 0 20px 0;
        margin-top: 20px;
        margin-bottom: 15px;
    }

    .from-ceo-wrap .product-rating {
        padding: 0;
    }

    ul#tabs-nav li {
        margin-right: 10px;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0px;
    }

    .links-stories-wrap {
        padding: 10px;
    }

    .links-wrap ul {
        font-size: 12px;
        margin-bottom: 10px;
    }

    .stories-wrap {
        margin-top: 20px;
    }

    .stories-content {
        margin-top: 20px;
        flex-wrap: wrap;
    }

    .stories-content .column {
        width: 100%;
    }

    .telp-mail {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    footer .address {
        font-size: 14px;
    }

    footer .address-wrap,
    footer .links-wrap {
        width: 100%;
    }

    .hero-carousel-content h1 {
        font-size: 15px !important;
    }

    .hero-carousel-content h2 {
        font-size: 18px;
        margin-bottom: 7px;
    }

    .hero-carousel-content .logo {
        margin-bottom: 5px;
    }

    .hero-carousel-content .content-overlay-wrap {
        padding: 5px;
        border: 0;
    }

    .hero-carousel-content .content-overlay,
    .hero-carousel {
        height: 225px;
    }

    .swiper-pagination-fraction,
    .swiper-pagination-custom,
    .swiper-container-horizontal>.swiper-pagination-bullets {
        bottom: 2px;
    }

    .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
    }

    .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
        margin: 0 5px;
    }

    .wp-header-wrap {
        padding: 0;
        margin-bottom: 20px;
    }

    .ux-backtotop {
        right: 25px;
    }

    .section-title {
        font-size: 19px;
    }

    .section-title p.title-stories {
        font-size: 19px;
    }

    footer .copyright {
        font-size: 9px;
    }

    .nav-space {
        margin-top: 65px;
    }

    .hero-carousel-content .content-overlay-wrap--regional h1 {
        font-size: 30px;
    }

    .hero-carousel-content .content-overlay-wrap--regional h2 {
        font-size: 14px;
    }

    .filter-product {
        display: none;
        /* width: 0; */
        position: fixed;
        background: #fff;
        width: 100%;
        z-index: 5000;
        left: 0;
        bottom: 0;
        height: 100vh;
    }

    .filter-wrap .main-title {
        padding: 10px;
    }

    .apply-filter a.btn {
        font-size: 14px;
        padding: 7px 20px 7px 20px;
        margin: 20px auto;
    }

    .product-list-header .hero-carousel-content .content-overlay,
    .product-grid-wrap {
        width: 100%;
    }

    .product-list-header .hero-carousel-content p {
        font-size: 16px;
    }

    .product-grid .product-list-each {
        width: 48%;
        margin-bottom: 30px;
    }

    .sortby-filter {
        justify-content: space-between;
    }

    .sortby {
        width: 65%;
    }

    .sortby .title {
        width: 30%;
    }

    .filter-narrow {
        display: flex;
        border: 2px solid #000;
        height: 40px;
        line-height: 35px;
        padding: 0 10px;
        margin-bottom: 15px;
        font-size: 14px;
        border-radius: 1rem;
    }

    .filter-narrow img {
        width: 18px;
        margin-right: 5px;
    }

    .filter-narrow:hover {
        background-color: #d3d3d3;
    }

    .product-page .product-details-wrap {
        flex-direction: column;
    }

    .product-details-wrap .content {
        width: 100%;
    }

    .gallery-top .swiper-slide {
        height: max-content;
        border-radius: 0;
        /* min-height: 398px; */
    }

    .gallery-thumbs .swiper-slide {
        height: 60px;
    }

    .product-details .product-list-title-wrap .title {
        font-size: 1rem;
    }

    .product-details .price-wrap {
        max-width: 100%;
    }

    .deskripsi-wrap p {
        font-size: 14px;
    }

    .product-page .product-carousel-wrap {
        /* margin-top: 60px; */
    }

    .category-articles-panel-wrap {
        width: 100%;
    }

    .article-thumbnails-wrap {
        width: 100%;
        max-width: 100%;
    }

    .category-articles-panel {
        width: 100%;
    }

    .blog-thumbnails-wrap {
        flex-direction: column-reverse;
    }

    .blog-thumbnails .blog-articles-each .title {
        margin-top: 7px;
        margin-bottom: 5px;
    }

    .blog-thumbnails-wrap .blog-articles-each:last-child {
        display: block;
    }

    .articles-wrap .content-article,
    .articles-wrap .content-related {
        width: 100%;
    }

    .articles-wrap {
        flex-direction: column;
    }

    .publish-date-share {
        font-size: 12px;
        margin: 10px auto;
    }

    .content-article h1 {
        font-size: 30px;
    }

    .contactus-wrap {
        flex-direction: column;
    }

    .content-contact,
    .content-maps {
        width: 100%;
    }

    .content-contact .address {
        margin: 20px auto;
    }

    .content-contact .telp-mail a.each {
        text-align: left;
    }

    .content-maps {
        margin-top: 50px;
    }

    .subtitle-wrap {
        flex-direction: column;
    }

    .contact-form .subtitle {
        width: 100%;
        text-align: center;
    }

    .contact-form a.btn {
        margin-top: 20px;
    }

    .content-contact .address {
        margin: 20px auto;
        margin-top: 10px;
    }

    .contact-form .subtitle-wrap {
        margin-top: 10px;
    }

    .notfound {
        margin-top: 100px;
    }

    .notfound-wrap {
        max-width: 100%;
        margin: auto;
        padding: 0 15px;
    }

    .notfound-wrap .big-title {
        font-size: 80px;
    }

    .notfound-wrap .title {
        font-size: 32px;
        line-height: 1.2;
    }

    .notfound-wrap .subtitle {
        font-size: 18px;
        line-height: 1.5;
    }

    a.btn {
        padding: 5px 20px 6px 20px;
    }

    .floating-wa {
        right: 2vw;
        bottom: 12vh;
    }

    .floating-wa:hover {
        right: 2vw;
        bottom: 12vh;
    }

    .floating-wa img {
        width: 20vw;
    }
}

/* Pagination Styles */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pagination-btn,
.pagination-current {
    padding: 8px 14px;
    border: 1px solid #ddd;
    border-radius: 1rem;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
    background: #fff;
    color: #333;
    text-decoration: none;
    display: inline-block;
    min-width: 40px;
    text-align: center;
}

.pagination-btn:hover {
    background: var(--main-primary);
    color: #fff;
    border-color: var(--main-primary);
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
}

.pagination-current {
    background: var(--main-primary);
    color: #fff;
    border-color: var(--main-primary);
    cursor: default;
}

.pagination-btn:active {
    transform: translateY(0);
}

@media screen and (max-width: 768px) {
    .pagination {
        gap: 6px;
        margin: 20px 0;
    }
    
    .pagination-btn,
    .pagination-current {
        padding: 6px 10px;
        font-size: 13px;
        min-width: 35px;
    }
}
/*stars*/
.rating-stars {
    color: #ffd700; 
}

/* Price Comparison Styles */
.price-comparison {
    margin: 1vh 0;

    h3 {
        font-size: 0.85rem;
        font-weight: 600;
        margin: 0 0 1.5vh 0;
        color: #000;
        text-align: left;
    }

    .comparison-list {
        display: flex;
        flex-direction: column;
        gap: 1vh;
    }

    .comparison-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .comparison-item .florist-name {
        font-weight: 400;
        color: #696969;
        flex: 2 0 0px;
        font-size: 0.85rem;
    }

    .comparison-item .price {
        flex-direction: unset;
        gap: 1vh;
        font-weight: 400;
        color: #000;
        flex: 8 1 0px;
        text-align: center;
        font-size: 0.8rem;

        @media screen and (max-width: 768px) {
            flex: 5 1 0px;
        }

        .fix-price, .strike-price {
            font-size: 0.8rem !important;
        }
    }

    .comparison-item .badge {
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .comparison-item .badge.best-price {
        background: #28a745;
        color: white;
    }

    .comparison-item .badge.higher-price {
        background: #dc3545;
        color: white;
    }

    .comparison-item:first-child {
        .price {
            font-weight: 700;
        }
    }
}