﻿/* ============================================
   HOME2 CSS - USING THEME VARIABLES
   ALL STYLES PRESERVED - NOTHING REMOVED
   ============================================ */

.home-video-banner {
    width: 102vw;
    overflow: var(--home2-hero-area-overflow, hidden);
    position: relative;
}

.hero-area img {
    width: 100vw !important;
}

.tag-image {
    border-radius: 5px !important;
}

.hometab {
    color: var(--home2-hometab-color, var( --web-secondary)) !important;
}

    .hometab.active {
        color: var(--home2-hometab-active-color, var(--web-primary)) !important;
    }

@media (max-width: 1028px) {
    .mobile-hero-area {
        width: 100%;
        margin-top: 20%;
        overflow: hidden;
    }
}

@media (max-width: 850px) {
    .mobile-hero-area {
        width: 100%;
        margin-top: 23%;
        overflow: hidden;
    }
}

.mobile-slide {
    width: 100%;
}

.mobile-media {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: var(--home2-mobile-media-border-radius, 35px);
    padding: 10px;
    background: var(--home2-mobile-media-bg, #fff);
}

.hero-area {
    width: var(--home2-hero-area-width, 100vw);
    overflow: var(--home2-hero-area-overflow, hidden);
    background: var(--home2-hero-area-bg, #fff);
}

.slider-item.ratio-wide {
    aspect-ratio: 2.5/1;
}

.slider-item.ratio-16by9 {
    aspect-ratio: 16/9;
}

.sliderParent,
.home-slideshow,
.slider-item {
    width: 100%;
}

.banner-content-wrapper {
    width: 100%;
/*    padding: clamp(8px, 1.2vw, 16px);*/
    display: flex;
    background: var(--home2-banner-content-wrapper-bg, #fff);
    align-items: center;
    justify-content: center;
}

    .banner-content-wrapper video,
    .banner-content-wrapper img {
        width: 98.5vw;
        height: 100%;
        object-fit: contain;
        display: block;
        border-radius: 0px !important;
    }

@media (max-width: 900px) {
    .banner-content-wrapper video,
    .banner-content-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        border-radius: 0px !important;
    }

    .mobile-hero-slider .banner-content-wrapper {
        padding: 0px !important;
    }
}

:root {
    --header-offset: 0px;
}

.mobile-hero-area {
    margin-top: var(--home2-mobile-hero-area-margin-top, var(--header-offset) !important);
    padding: var(--home2-mobile-hero-area-padding, 0px 0);
}

.banner-content-wrapper {
/*    padding: var(--home2-banner-content-wrapper-padding, 15px);*/
}

.home-banner-video,
.banner-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 0px;
}

.mobile-hero-area {
    padding: 0px 0;
}

.custom-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--home2-custom-arrow-bg, rgba(255,255,255,.9));
    border: var(--home2-custom-arrow-border, 1px solid rgba(93,17,67,.1));
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .3s ease;
    box-shadow: 0 4px 12px var(--home2-custom-arrow-shadow, rgba(93,17,67,.1));
}

    .custom-arrow:hover {
        background: var(--home2-custom-arrow-hover-bg, rgba(93,17,67,.9));
        transform: translateY(-50%) scale(1.05);
    }

        .custom-arrow:hover svg {
            stroke: var(--home2-custom-arrow-hover-svg-stroke, #fff);
        }

    .custom-arrow svg {
        stroke: var(--home2-custom-arrow-svg-stroke, var(--web-primary));
        width: 24px;
        height: 24px;
        transition: stroke .3s ease;
    }

.slick-prev {
    left: 30px !important;
}

.slick-next {
    right: 30px !important;
}

.mobile-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--home2-mobile-arrow-bg, rgba(255,255,255,.9));
    border: var(--home2-mobile-arrow-border, 1px solid rgba(93,17,67,.1));
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .3s ease;
    box-shadow: 0 4px 12px var(--home2-mobile-arrow-shadow, rgba(93,17,67,.1));
}

    .mobile-arrow:hover {
        background: var(--home2-mobile-arrow-hover-bg, rgba(93,17,67,.9));
    }

        .mobile-arrow:hover svg {
            stroke: var(--home2-mobile-arrow-hover-svg-stroke, #fff);
        }

    .mobile-arrow svg {
        stroke: var(--home2-mobile-arrow-svg-stroke, var(--web-primary));
        width: 20px;
        height: 20px;
        transition: stroke .3s ease;
    }

.mobile-hero-slider .slick-prev {
    left: 15px;
}

.mobile-hero-slider .slick-next {
    right: 15px;
}

.custom-dots-container {
    position: absolute;
    bottom: 12%;
    left: 0;
    right: 0;
    display: flex !important;
    justify-content: center;
    gap: 12px;
    z-index: 10;
}

    .custom-dots-container li {
        list-style: none;
        margin: 0;
        width: 10px;
        height: 10px;
    }

        .custom-dots-container li button {
            width: 10px;
            height: 10px;
            padding: 0;
            border-radius: 50%;
            background: var(--home2-dots-bg, rgba(255,255,255,.5));
            border: var(--home2-dots-border, 1px solid rgba(93,17,67,.3));
            font-size: 0;
            cursor: pointer;
            transition: all .3s ease;
        }

        .custom-dots-container li.slick-active button {
            background: var(--home2-dots-active-bg, var(--web-primary));
            border-color: var(--home2-dots-active-border, var(--web-primary));
            transform: scale(1.2);
        }

.mobile-dots-container {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    display: flex !important;
    justify-content: center;
    gap: 10px;
    z-index: 10;
}

    .mobile-dots-container li {
        list-style: none;
        margin: 0;
        width: 8px;
        height: 8px;
    }

        .mobile-dots-container li button {
            width: 8px;
            height: 8px;
            padding: 0;
            border-radius: 50%;
            background: var(--home2-dots-bg, rgba(255,255,255,.5));
            border: var(--home2-dots-border, 1px solid rgba(93,17,67,.3));
            font-size: 0;
            cursor: pointer;
            transition: all .3s ease;
        }

        .mobile-dots-container li.slick-active button {
            background: var(--home2-dots-active-bg, var(--web-primary));
            border-color: var(--home2-dots-active-border, var(--web-primary));
            transform: scale(1.2);
        }

@media (min-width: 1400px) {
    .custom-arrow {
        width: 60px;
        height: 60px;
    }

        .custom-arrow svg {
            width: 28px;
            height: 28px;
        }

    .slick-prev {
        left: 50px !important;
    }

    .slick-next {
        right: 50px !important;
    }
}

@media (max-width: 1199.98px) {
    .banner-content-wrapper {
/*        padding: 20px;*/
    }

    .home-banner-video,
    .banner-image {
/*        max-height: 70vh;*/
    }
}

@media (max-width: 991.98px) {
    .banner-content-wrapper {
/*        padding: 15px;*/
    }

    .home-banner-video,
    .banner-image {
        max-height: 100%;
        border-radius: 0px;
    }
    body{
        padding-top:1rem !important;
    }
    .custom-arrow {
        width: 45px;
        height: 45px;
    }

        .custom-arrow svg {
            width: 22px;
            height: 22px;
        }

    .slick-prev {
        left: 20px !important;
    }

    .slick-next {
        right: 20px !important;
    }
}

@media (max-width: 767.98px) {
    .banner-content-wrapper {
/*        padding: 10px;*/
    }

    .home-banner-video,
    .banner-image {
/*        max-height: 50vh;*/
        border-radius: 0px;
    }

    .custom-arrow {
        width: 40px;
        height: 40px;
        display: none !important;
    }

    .custom-dots-container {
        bottom: 20px;
    }
}

@media (max-width: 575.98px) {
    .mobile-hero-area {
/*        padding: 0px 10px 9px;*/
    }

    .mobile-hero-slider .banner-content-wrapper {
        padding: 8px;
    }

    .mobile-hero-slider .banner-image {
        max-height: 100vh;
        border-radius: 0px;
    }

    .mobile-arrow {
        width: 35px;
        height: 35px;
    }

        .mobile-arrow svg {
            width: 18px;
            height: 18px;
        }

    .mobile-dots-container {
        bottom: 15px;
    }
}

.home-video-banner {
    position: relative;
}

.home-banner-video {
    height: auto;
}

.home-slideshow .slider-item,
.mobile-hero-slider .slider-item {
    outline: none;
}

.slick-dots {
    display: block !important;
}

.slick-prev:before,
.slick-next:before {
    font-size: 50px !important;
}

.left-banner-img {
    max-height: 420px;
    object-fit: cover;
    width: 100%;
}

@media (min-width: 1400px) {
    .left-banner-img {
        max-height: 480px;
    }
}

.right-section {
    background: var(--home2-right-section-bg, #fff);
    border-radius: var(--home2-right-section-border-radius, 8px);
}

.viewbtn {
    background: var(--home2-viewbtn-bg, linear-gradient(135deg, var(--web-primary), var(--web-primary-soft)));
}

.design-img {
    width: 110%;
    max-width: 150px;
    border-radius: var(--home2-design-img-border-radius, 8px);
    padding: 4px;
    background: var(--home2-design-img-bg, #fff);
    transition: transform .3s ease;
}

    .design-img:hover {
        transform: scale(1.07);
    }

.tab-button {
    padding: 0;
    border: none;
    background: 0 0;
    cursor: pointer;
    font-size: 15px !important;
    color: var(--web-text-dark, #000);
    font-weight: 700 !important;
}

.slick-dotted.slick-slider {
    margin-bottom: 12px !important;
}

.pb-60 {
    padding-bottom: 20px;
}

@media (max-width: 1608px) {
    .p-20 {
        padding: 20px;
    }

    .right-section {
        background: var(--home2-right-section-bg, #fff);
        border-radius: var(--home2-right-section-border-radius, 8px);
    }
}

.pc {
    padding-left: .25rem !important;
    padding-right: .25rem !important;
}

@media (max-width: 1208px) {
    .fullborderradius {
        border-radius: 12px !important;
    }

    .tag5margin {
        margin-bottom: 10px;
    }
}

#designTypeSlider {
    position: relative;
}

.designtype-slick-prev,
.designtype-slick-next {
    position: absolute !important;
    bottom: -15px !important;
    top: auto !important;
    transform: none;
    z-index: 10 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.designtype-slick-prev {
    left: 0 !important;
}

.designtype-slick-next {
    left: 60px !important;
}

    .designtype-slick-prev:before,
    .designtype-slick-next:before {
        font-size: 40px !important;
        color: var(--home2-designtype-arrow-color, #562f59 !important);
        opacity: 1;
    }

    .designtype-slick-prev:hover:before,
    .designtype-slick-next:hover:before {
        color: var(--home2-designtype-arrow-hover-color, #fff !important);
    }

@media (max-width: 1300px) {
    #designTypeSlider-mobile .design-img-mobile {
        filter: drop-shadow(0 2px 4px rgba(0,0,0,.1));
        max-width: 80px;
        height: auto;
        width: 100%;
    }

    #designTypeSlider-mobile .singlePartner {
        padding: .25rem !important;
    }
}

.trust-slider-container {
    width: 100%;
    overflow: hidden;
    background: var(--web-bg-main, #fff);
    margin: 0;
    position: relative;
}

.trust-slider-track {
    display: flex;
    width: max-content;
    animation: scrollLoop 40s linear infinite;
    animation-play-state: running;
}

    .trust-slider-track:hover {
        animation-play-state: paused;
    }

@keyframes scrollLoop {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.trust-card {
    min-width: 280px;
    max-width: 280px;
    height: 170px;
    border-radius: 24px;
    padding: 32px 28px;
    color: var(--home2-trust-card-color, #333);
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    transition: all .3s ease;
    backdrop-filter: var(--home2-trust-card-bg-blur, blur(10px));
    border: var(--home2-trust-card-border, 1px solid rgba(255,255,255,.3));
    margin: 0 12px;
    box-sizing: border-box;
    flex-shrink: 0;
    text-decoration: none;
    position: relative;
}

    .trust-card i {
        font-size: 40px;
        margin-bottom: 12px;
        opacity: .9;
    }

    .trust-card img {
        margin-bottom: 12px;
        width: 60px;
        height: 60px;
        object-fit: contain;
    }

    .trust-card h3 {
        font-size: 18px;
        font-weight: 700;
        margin: 0 0 8px;
        color: var(--home2-trust-card-h3-color, #2d1a3a);
    }

    .trust-card p {
        font-size: 14px;
        margin: 0;
        line-height: 1.5;
        opacity: .85;
    }

.card-1 {
    background: var(--home2-card-1, linear-gradient(135deg, #f2e0eb, #e8d0e0));
}

.card-2 {
    background: var(--home2-card-2, linear-gradient(135deg, #e8d9e9, #d9c8e0));
}

.card-3 {
    background: var(--home2-card-3, linear-gradient(135deg, #fdf8f2, #f5ede6));
}

.card-4 {
    background: var(--home2-card-4, linear-gradient(135deg, #d0e6e8, #c8e0e6));
}

.card-5 {
    background: var(--home2-card-5, linear-gradient(135deg, #e8d4ed, #d9c8e5));
}

.card-6 {
    background: var(--home2-card-6, linear-gradient(135deg, #f0f0f0, #e0e4e8));
}

.card-7 {
    background: var(--home2-card-7, linear-gradient(135deg, #d6e4ed, #c8d8e8));
}

.card-8 {
    background: var(--home2-card-8, linear-gradient(135deg, #f0e0e8, #e8d5e2));
}

@media (min-width: 992px) {
    .trust-card {
        min-width: 415px;
        max-width: 415px;
        height: 170px;
        margin: 0 5px;
        padding: 32px 28px;
    }

        .trust-card i {
            font-size: 56px;
            margin-bottom: 16px;
        }

        .trust-card h3 {
            font-size: 20px;
        }

        .trust-card p {
            font-size: 15px;
        }
}

@media (min-width: 768px) and (max-width: 991px) {
    .trust-card {
        min-width: 320px;
        max-width: 320px;
        margin: 0 5px;
    }
}

@media (max-width: 767px) {
    .trust-slider-track {
        display: none;
    }

    .trust-mobile-slider {
        display: block;
    }

    .trust-card {
        min-width: 280px;
        max-width: 280px;
        margin: 0 5px;
    }

    .slick-dots {
        bottom: -30px !important;
    }

        .slick-dots li button:before {
            font-size: 10px;
        }
}

.trust-mobile-slider {
    display: none;
}

.trust-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,0));
    opacity: 0;
    transition: opacity .3s ease;
}

.trust-card:hover::after {
    opacity: 1;
}

.banner-3-wrapper {
    padding-bottom: 0 !important;
}

@media (max-width: 1568px) {
    .review-carousel .item {
        padding: 30px;
        box-sizing: border-box;
    }
}

.radius-left {
    border-radius: var(--home2-radius-left, 12px 0 0 12px !important);
}

.radius-right {
    border-radius: var(--home2-radius-right, 0 12px 12px 0 !important);
}

.radius-topleft {
    border-radius: var(--home2-radius-topleft, 12px 0 0 0 !important);
}

.radius-topright {
    border-radius: var(--home2-radius-topright, 0 12px 0 0 !important);
}

.radius-bottomleft {
    border-radius: var(--home2-radius-bottomleft, 0 0 0 12px !important);
}

.radius-bottomright {
    border-radius: var(--home2-radius-bottomright, 0 0 12px 0 !important);
}

.custom-banner-dual {
    margin: 0;
    padding: 0;
}

.pt-60 {
    padding-top: 10px;
}

.faq-wrapper {
    padding: 0.5rem;
}

.faq-container {
    max-width: var(--home2-faq-container-max-width, 960px);
    margin: 0 auto;
}

.faq-title {
    font-size: var(--home2-faq-title-font-size, 37px);
    color: var(--home2-faq-title-color, var(--web-primary));
    text-align: center;
    margin: 0 0 20px;
    letter-spacing: 1.8px;
    font-family: var(--home2-faq-title-font-family, var(--theme-font-primary););
}

.faq-subtitle {
    text-align: center;
    color: var(--home2-faq-subtitle-color, var(--web-primary));
    margin-bottom: 4px;
}

.faq-accordion details {
    border-bottom: var(--home2-faq-accordion-border, 1px solid var(--web-primary-soft));
    padding: var(--home2-faq-accordion-padding, 22px 0);
}

    .faq-accordion details:last-child {
        border-bottom: none;
    }

.faq-accordion summary {
    list-style: none;
    cursor: pointer;
    font-size: var(--home2-faq-summary-font-size, 16px);
    font-weight: 600;
    color: var(--web-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 10px;
}

    .faq-accordion summary::-webkit-details-marker {
        display: none;
    }

    .faq-accordion summary::after {
        content: "+";
        font-size: 16px;
        color: var(--home2-faq-summary-after-color, var(--web-primary-soft));
        transition: transform .35s ease;
    }

.faq-accordion details[open] summary::after {
    transform: rotate(180deg);
    color: var(--home2-faq-details-open-after-color, var(--web-primary));
}

.faq-accordion .accordion-content {
    padding: var(--home2-faq-content-padding, 20px 0 10px);
    font-size: var(--home2-faq-content-font-size, 13.5px);
    line-height: 1.7;
    color: var(--home2-faq-content-color, var( --web-secondary));
}

.faq-btn-wrapper {
    text-align: center;
    margin-top: var(--home2-faq-btn-wrapper-margin-top, 70px);
}

.btn-faq {
    display: inline-block;
    background: black;
    color: white;
    padding: var(--home2-btn-faq-padding, 16px 48px);
    border-radius: 0px;
    font-size:15px;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s ease;
}

    .btn-faq:hover {
        background: var(--home2-btn-faq-hover-bg, #FFF);
        color: black;
        transform: translateY(-4px);
    }

.banner-3-item {
    animation-duration: var(--home2-banner-3-animation-duration, 2s !important);
    animation-timing-function: var(--home2-banner-3-animation-timing, cubic-bezier(.22, .61, .36, 1));
}

@media (max-width: 991.98px) {
    .offcanvas-bottom {
        --bs-offcanvas-height: var(--home2-offcanvas-bottom-height, 80vh);
    }

    .globalSlider {
        padding: var(--home2-global-slider-padding, 1rem);
    }

    .product-item {
        margin-bottom: 1rem;
    }
}

body {
    padding-bottom: var(--home2-body-padding-bottom, env(safe-area-inset-bottom));
}
