@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

/* common css start */
body {
    font-family: "Outfit", sans-serif;
    background: #fff;
}

img {
    max-width: 100%;
    height: auto;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

p {
    font-size: 16px;
    font-weight: 400;
}

.sec-title {
    position: relative;
    font-size: 32px;
    font-weight: 600;
    color: #837A67;
    text-align: center;
    margin-bottom: 50px;
}

.sec-title::before {
    position: absolute;
    content: '';
    width: 180px;
    height: 1px;
    background: #000000;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
}

/* common css end */

/* main header css start */
.header {
    position: sticky;
    top: 0;
    padding: 20px 0;
    z-index: 999;
    background: #fff;
    transition: 0.3s all;
}

.main-logo {
    position: relative;
    z-index: 99;
}

.header.active .main-logo .mb-logo {
    display: block;
}

.header.active .main-logo .desk-logo {
    display: none;
}

.header .main-logo .mb-logo {
    display: none;
}

.mb-btn {
    display: none;
}

.menu-toggle {
    display: none;
}

.nav-list {
    position: relative;
    height: 100%;
}

.ul-list {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.ul-list .li-list:not(:last-child) {
    margin-right: 30px;
}

.ul-list .li-list {
    transition: 0.3s all;
    height: 100%;
}

.ul-list .li-list .a-link {
    color: #000;
    font-size: 16px;
    font-weight: 500;
    transition: 0.3s all;
    display: flex;
    align-items: center;
    height: 100%;
}

.ul-list .li-list .a-link i {
    margin-left: 5px;
    transition: 0.3s all;
}

.ul-list .li-list .a-link:hover {
    color: #837A67;
}

.ul-list .li-list .a-link:hover i {
    transform: rotate(-180deg);
}

.header-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
}

.downloadBtn {
    outline: none;
    font-size: 16px;
    font-weight: 400;
    color: #837A67;
    border: 1px solid #837A67;
    border-radius: 5px;
    padding: 20px;
    background: #fff;
}

.sub-ul-list {
    position: absolute;
    top: 100%;
    background: #F4F4F4;
    padding: 15px 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 50px;
    row-gap: 10px;
    opacity: 0;
    visibility: hidden;
    border-radius: 0 0 5px 5px;
}

.ul-list .li-list:hover .sub-ul-list {
    opacity: 1;
    visibility: visible;
}

.sub-ul-list .sub-li-list .sub-a-link {
    font-size: 16px;
    font-weight: 400;
    color: #000;
    transition: 0.3s all;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.sub-ul-list .sub-li-list .sub-a-link svg {
    fill: #837A67;
    width: 20px;
}

.sub-ul-list .sub-li-list .sub-a-link:hover {
    color: #837A67;
}

/* main header css end */

/* main banner css start */
.main-banner {
    position: relative;
}

.bg-slide {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 250px 0;
    text-align: center;
}

.bg-slide.first-slide {
    background-image: url('../images/banner-img1.png');
}

.bg-slide.second-slide {
    background-image: url('../images/banner-img2.png');
}

.bg-slide.third-slide {
    background-image: url('../images/banner-img3.png');
}

.bg-slide.fourth-slide {
    background-image: url('../images/banner-img4.png');
}

.bg-slide h1 {
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 20px;
}

.white-btn {
    background: #fff;
    border-radius: 5px;
    padding: 18px 13px;
    font-size: 16px;
    font-weight: 400;
    border: 0;
    outline: none;
    color: #000;
    display: inline-block;
}

.bg-slide .black-btn {
    background: #222221;
    border-radius: 24px;
    padding: 18px 43px;
    font-size: 16px;
    font-weight: 400;
    border: 0;
    outline: none;
    color: #fff;
}

.banner-slider .slide-arrow.prev-arrow {
    left: 0;
}

.banner-slider .slide-arrow.next-arrow {
    right: 0;
}

/* main banner css end */

/* slider button css start */
.slide-arrow {
    width: 40px;
    height: 40px;
    background: #BCB6A9;
    border-radius: 5px;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: 0.3s all;
    border: 0;
    outline: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.slide-arrow:hover {
    color: #837A67;
    background: #fff;
}

/* slider button css end */

/* collection sec css start */
.collection-sec {
    position: relative;
    padding: 40px 0;
}

.slide-box {
    margin: 0 10px;
}

.collection-slider img {
    width: 100%;
}

.collection-slider h5 {
    margin: 15px 0;
    color: #837A67;
    font-size: 22px;
    font-weight: 500;
}

.collection-slider p {
    font-size: 16px;
    font-weight: 400;
    color: #000;
    margin: 0;
}

.collection-slider .slide-arrow.prev-arrow {
    left: -10px;
}

.collection-slider .slide-arrow.next-arrow {
    right: -10px;
}


/* collection sec css end */

/* living sec css start */
.living-sec {
    position: relative;
    padding: 185px 0;
    background-image: url('../images/living-sec-bg.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.living-sec h1 {
    color: #fff;
    font-size: 32px;
    font-weight: 600;
    margin: 0;
}

.living-sec p {
    font-size: 16px;
    font-weight: 400;
    margin: 20px 0 28px;
    color: #fff;
}

/* living sec css end */

/* about sec css start */
.about-sec {
    position: relative;
    padding: 40px 0;
}

.about-sec .about-img {
    width: 100%;
}

.about-sec .p-text {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 20px;
    color: #000;
}

.about-sec .p-text span {
    font-weight: 600;
    color: #837A67;
}

.top-line {
    border-top: 1px solid #D1D1D1;
    padding-top: 30px;
    margin-top: 30px;
}

.info-sec {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    width: 80%;
    margin: 0 auto;
}

.box {
    text-align: center;
}

.box p {
    margin: 19px 0 0;
    color: #000;
    font-size: 16px;
    font-weight: 500;
}

/* about sec css end */

/* detail sec css start */
.detail-sec {
    position: relative;
    padding: 40px 0;
    background: #F2F2F2;
}

.detail-box img {
    width: 100%;
}

.detail-box h5 {
    margin: 15px 0;
    font-size: 22px;
    font-weight: 500;
    color: #837A67;
}

.detail-box p {
    margin: 0;
}

/* detail sec css end */

/* choice sec css start */
.choice-sec {
    position: relative;
    padding: 40px 0;
}

.choice-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: self-start;
    height: 100%;
}

.choice-text h6 {
    font-size: 32px;
    font-weight: 600;
    color: #837A67;
    margin-bottom: 15px;
}

.choice-text p {
    color: #837A67;
    margin-bottom: 30px;
}

.choice-text a {
    border-radius: 5px;
    border: 0;
    outline: none;
    padding: 15px 50px;
    background: #837A67;
    font-size: 16px;
    font-weight: 400;
    color: #fff;
}

.choice-img img {
    width: 100%;
}

/* choice sec css end */

/* tabbing sec css start */
.tabbing-sec {
    position: relative;
    padding: 40px 0;
}

.tabbing-sec h2 {
    margin: 0 auto 15px;
    font-size: 32px;
    font-weight: 600;
    color: #837A67;
    width: 40%;
    text-align: center;
}

.tabbing-sec .p-text {
    color: #837A67;
    width: 40%;
    text-align: center;
    margin: 0 auto 30px;
}

.nav-tabs {
    border-radius: 5px;
    background: #E9E9E9;
    width: max-content;
    margin: 0 auto 30px;
}

.nav-tabs .nav-link {
    border-radius: 5px;
    color: #000;
    padding: 18px 24px;
    font-size: 16px;
    font-weight: 500;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link.active {
    background: #837A67;
    color: #fff;
}

.tab-box {
    padding: 20px 15px;
    border-radius: 5px;
    background: #E9E9E9;
    height: 100%;
}

.tab-box ul {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.tab-box .title {
    position: relative;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    color: #837A67;
    margin-bottom: 25px;
}

.tab-box .title::before {
    position: absolute;
    content: '';
    width: 50px;
    height: 1px;
    background: #000;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
}

.tab-box ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tab-box ul li:not(:last-child) {
    margin-bottom: 15px;
}

.tab-box ul li span {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 500;
    color: #837A67;
}

.tab-box ul li p {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

.tab-box h5 {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    color: #837A67;
    margin: 30px 0 10px;
}

.tab-box p {
    margin: 0;
    text-align: center;
}

/* tabbing sec css end */

/* footer sec css start */
.footer-sec {
    position: relative;
    padding: 40px 0 0;
    background: #000;
}

.footer-logo p {
    margin: 20px 0 0;
    color: #fff;
}

.ftr-ul span {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 600;
    color: #837A67;
    display: block;
}

.ftr-ul li:not(:last-child) {
    margin-bottom: 15px;
}

.ftr-ul li a {
    font-size: 16px;
    font-weight: 400;
    color: #fff;
}

.ftr-ul p {
    color: #fff;
    margin: 0 0 15px;
}

.social-link {
    display: flex;
    gap: 20px;
    align-items: center;
}

.social-link li a {
    color: #fff;
    font-size: 20px;
}

.last-ftr {
    margin-top: 30px;
    padding: 20px 0;
    border-top: 1px solid #C0BDB7;
}

.last-ftr p {
    margin: 0;
    color: #fff;
    text-align: center;
}

.last-ftr p a {
    color: #837A67;
}


/* footer sec css end */


/* product view page css start */
.product-sec {
    position: relative;
    background-image: url('../images/chair-bg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 170px 0;
}

.product-sec.dining-table {
    background-image: url('../images/dining-table-bg.png');
}

.product-sec.coffee-table {
    background-image: url('../images/coffe-table-bg.png');
}

.product-sec.desk {
    background-image: url('../images/desk-bg.png');
}

.product-sec.side-table {
    background-image: url('../images/side-table-bg.png');
}

.product-sec.cupboard {
    background-image: url('../images/cupboard-bg.png');
}

.product-sec.center-table {
    background-image: url('../images/center-table-bg.png');
}

.product-sec.bed-table {
    background-image: url('../images/bed-bg.png');
}

.product-sec.sofa-table {
    background-image: url('../images/sofa-table-bg.png');
}

.product-sec.bedside-table {
    background-image: url('../images/beside-table-bg.png');
}

.product-sec.console {
    background-image: url('../images/console-table-bg.png');
}

.product-sec.door {
    background-image: url('../images/door-bg.png');
}

.breadcrumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.breadcrumb li {
    position: relative;
}

.breadcrumb li:not(:last-child):before {
    position: absolute;
    content: '/';
    top: 50%;
    right: -4px;
    color: #C6BEAF;
    transform: translateY(-50%);
}

.breadcrumb li .breadcrumb-list {
    color: #C6BEAF;
    padding: 0 8px;
    font-size: 18px;
    font-weight: 400;
}

.breadcrumb li .breadcrumb-list.active {
    color: #fff;
}

.product-sec span {
    text-align: center;
    display: block;
    color: #fff;
    font-size: 32px;
    font-weight: 600;
}

.product-list {
    position: relative;
    padding: 40px 0;
}

.product-list .p-title {
    width: 60%;
    margin: 0 auto 40px;
    text-align: center;
}

.product-box {
    position: relative;
    margin-bottom: 20px;
    transition: 0.3s all;
    display: block;
}

.product-box span {
    text-align: center;
    margin-top: 20px;
    font-size: 22px;
    text-transform: uppercase;
    font-weight: 600;
    color: #000;
    display: block;
    transition: 0.3s all;
}

.product-box .img-box {
    background: #EFEFEF;
    transition: 0.3s all;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 280px;
}

.product-box:hover span {
    color: #837A67;
}

.product-box:hover .img-box {
    border: 1px solid #837A67;
}

/* product view page css end */

/* product detail page css start */
.product-detail {
    position: relative;
    padding: 40px 0;
}

.product-info {
    padding: 30px;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.15);
    background: #FFFFFF;
}

.product-info h2 {
    font-size: 32px;
    font-weight: 600;
    color: #837A67;
    border-bottom: 1px solid #D1D1D1;
    margin-bottom: 20px;
    padding-bottom: 20px;
    text-transform: uppercase;
}

.product-info .contact-us {
    padding: 18px 50px;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    border-radius: 5px;
    background: #837A67;
    outline: none;
    border: none;
    margin: 30px 0 70px;
    display: inline-block;
}

.product-info .note {
    font-size: 12px;
    font-weight: 400;
    color: #F02828;
    margin: 0;
}

.product-gallery {
    /* width: 450px; */
    height: 100%;
}

.main-slider img {
    width: 100%;
    height: 485px;
    /* object-fit: cover; */
    background: #EFEFEF;
}

.thumbnail-slider {
    margin-top: 20px;
}

.thumbnail-slider img {
    /* width: 90px;
      height: 90px; */
    object-fit: cover;
    border: 1px solid transparent;
    cursor: pointer;
    background: #EFEFEF;
}

.thumbnail-slider .slick-slide {
    margin: 0 5px;
}

.thumbnail-slider .slick-current img {
    border-color: #837A67;
}

/* product detail page css end */

/* responsive start */
@media (max-width:1400px) {
    .main-slider img {
        height: 575px;
    }
}

@media (max-width:1200px) {

    /* tabbing sec css start */
    .tabbing-sec h2 {
        width: 70%;
    }

    .tabbing-sec .p-text {
        width: 100%;
    }

    /* tabbing sec css end */
    .main-slider img {
        height: 645px;
    }
}

@media (max-width:992px) {

    /* common css start */
    .sec-title {
        font-size: 26px;
    }

    /* common css end */

    .header .container {
        max-width: 100%;
        padding: 0 15px;
    }

    .header.active {
        background: #837A67;
    }

    .main-logo img {
        width: 230px;
    }

    .nav-list {
        height: 100vh;
        position: fixed;
        top: 85px;
        opacity: 0;
        left: -100%;
        width: 100%;
        background: #998E78;
        z-index: 4;
        overflow-x: auto;
        padding: 0 0 200px;
        transition: .3s;
    }

    .nav-list.toggled {
        transition: .3s;
        opacity: 1;
        left: 0;
    }

    .ul-list {
        display: unset;
    }

    .ul-list .li-list {
        width: 100%;
        border-bottom: 1px solid #BDB39D;
        height: unset;
    }

    .ul-list .li-list:not(:last-child) {
        margin: 0;
    }

    .ul-list .li-list .a-link {
        padding: 5px 30px 10px;
        width: 100%;
        display: block;
        color: #fff;
        font-weight: 400;
        height: unset;
        display: flex;
        justify-content: space-between;
    }

    .ul-list .li-list .a-link:hover {
        color: #fff;
    }

    .menu-toggle {
        padding: 0;
        margin: 0;
        border: 0;
        width: 40px;
        height: 40px;
        display: block !important;
        position: absolute;
        right: 15px;
        top: 50%;
        border-radius: 0;
        outline: 0 !important;
        background: 0 0;
        z-index: 100;
        transition: .5s all;
        transform: translate(0, -50%);
        border-radius: 50%
    }

    .menu-toggle span {
        width: 25px;
        margin-bottom: 0;
        height: 3px;
        background: #837A67;
        border-radius: 0;
        position: absolute;
        top: 50%;
        z-index: 1;
        transition: .3s all;
        left: 50%;
        transform: translate(-50%, -50%)
    }

    .menu-toggle span:first-child {
        top: 13px;
    }

    .menu-toggle span:last-child {
        top: 27px;
    }

    .menu-toggle.active span {
        opacity: 0;
        background-color: #fff
    }

    .menu-toggle.active span:first-child {
        transform: rotate(-45deg);
        opacity: 1;
        width: 22px;
        left: 22%;
        top: 45%
    }

    .menu-toggle.active span:last-child {
        transform: rotate(45deg);
        width: 22px;
        opacity: 1;
        left: 22%;
        top: 45%
    }

    .header-btn {
        display: none;
    }

    .sub-ul-list {
        position: unset;
        grid-template-columns: 1fr;
        background: transparent;
        opacity: 1;
        visibility: visible;
        padding: 0 30px 5px;
    }

    .sub-ul-list .sub-li-list .sub-a-link svg,
    .sub-ul-list .sub-li-list .sub-a-link {
        color: #fff;
        fill: #fff;
    }

    .sub-ul-list .sub-li-list .sub-a-link:hover {
        color: #fff;
    }

    .mb-btn {
        text-align: center;
        display: block;
        margin-top: 70px;
    }

    .mb-btn .downloadBtn {
        background: transparent;
        color: #fff;
        border-color: #fff;
    }

    .mb-btn button {
        outline: none;
        font-size: 16px;
        font-weight: 400;
        color: #fff;
        border: 1px solid #fff;
        border-radius: 5px;
        padding: 20px;
        background: transparent;
    }

    .bg-slide {
        padding: 100px 0;
    }

    .bg-slide h1 {
        font-size: 22px;
    }

    .collection-slider .slide-arrow.prev-arrow {
        left: 10px;
    }

    .collection-slider .slide-arrow.next-arrow {
        right: 10px;
    }

    .living-sec {
        padding: 100px 0;
    }

    .living-sec h1 {
        font-size: 26px;
    }

    .about-sec .about-img {
        margin-bottom: 30px;
    }

    .info-sec {
        width: 100%;
    }

    .detail-sec {
        padding: 40px 0 20px;
    }

    .detail-box {
        margin-bottom: 20px;
    }

    .choice-text {
        margin-bottom: 20px;
        display: block;
    }

    .choice-text h6 {
        font-size: 26px;
    }

    .tabbing-sec h2 {
        width: 100%;
    }

    .tab-box {
        margin-bottom: 20px;
        height: unset;
    }

    .footer-logo {
        margin-bottom: 25px;
    }

    .ftr-ul {
        margin-bottom: 25px;
    }

    /* product list page css start */
    .product-list .p-title {
        width: 100%;
    }

    .product-sec {
        padding: 80px 0;
        /* background-position: 70% center; */
    }

    /* product list page css end */

    /* product detail page css start */
    .main-slider img {
        height: auto;
    }

    .product-info {
        padding: 15px;
        margin-top: 20px;
    }

    /* product detail page css end */
}

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

@media (max-width:450px) {
    .nav-tabs .nav-link {
        padding: 10px;
    }
}

/* responsive end */