*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body , html{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
}
.clearfix::after{
    content:"";
    clear: both;
    display: block;
}

.active{
    background-color: silver;
}


/*header starts here*/
.header{
  width: 100%;
  height: 284px;
  background-color:#fff;
}
    .inner1{
    width: 100vw;
    max-width: 1200px;
    margin: 0 auto;
    background-color: #fff;
    height: 100%;
    }

        /*header navbar starts here*/
        .navbar{
        margin: 0 auto;
        width: 100%;
        height: 125px;
        background-color:black;
        display:flex;
        display:-webkit-flex;
        display:-webkit-box;
        display:-ms-flexbox;
        justify-content:space-between;
        }
        
        .navbar img{
        height: 100%;
        margin-left: 2.5%;
        }
        
        .navbar ul{
        list-style: none;
        z-index: 100;
        }
        .navbar ul li{
        display: inline-block;
        line-height: 125px;
        }
        .navbar ul li a{
        text-decoration: none;
        padding: 15px;
        color: #fff;
        font-size: 20px;
        font-weight: 500;
        }
        .navbar ul li hr{
            width: 92%;
            margin-left: 4%;
            margin-right: 4% ;
            display: none;
        }
        .navbar #check{
        display: none;
        }
        .navbar #checkbtn{
        line-height: 125px;
        font-size: 30px;
        display: none;
        margin-right: 2.5%;
        color: #fff;
        }

        .navbar ul li a:hover{
            background-color: silver;
        }

        #check:checked ~ ul{
        left: 0;
        position: fixed;

        }

        @media screen and (max-width:1200px){
        .navbar #checkbtn{
        display: block;
        position:absolute;
        right:2.5%;
        }
        .navbar ul{
        width: 100%;
        height: 100vh;
        background-color: #fff;
        position: fixed;
        top: 125px;
        left: -100%;
        transition: .5s;
        }
        .navbar ul li{
        display: block;
        text-align: center;
        line-height: 9vh;
        }
        
        .navbar ul li hr{
            display: block;
        }
        .navbar ul li a{
        color: black;
        display: block;
        padding: 0;
        width: 92%;
        margin-left: 4%;
        margin-right: 4%;
        }
        }
        /*header navbar ends here*/

        /*header slider starts here*/


        .slider{
        width: 100%;
        overflow-x: scroll;
        margin: 0 auto;
        margin-top: 17px;
        }

        .boxcontainer{
        width: 1600px;
       /* display: flex; */
        height: 125px;
       /* overflow-y: hidden;*/
       /* justify-content: space-evenly;*/
        }

        .iconbox{
        width: 125px;
        height: 125px;
        border-radius: 20px;
        float: left;
        margin-left: 8px;
        }
        
        .iconbox img{
            height: 100%;
        }
        .iconbox .icontext{
            width: 90px;
            height: 20px;
            background-color:rgba(0, 0, 0, 0.4);
            margin: 0 auto;
            margin-top: 105px;
            color: #fff;
            text-align: center;
            border-radius: 3px;

        }

        .iconbox:hover{
            opacity: .5;
        }
        .icon1{
            background-image: url("../img/topslider/curtain.jpg");
            background-size: cover;
        }
        .icon2{
            background-image: url("../img/topslider/bedsheets.jpg");
            background-size: cover;
            background-position: center center;
        }
        .icon3{
            background-image: url("../img/topslider/mattress.jpg");
            background-size: cover;
        }
         .icon4{
            background-image: url("../img/topslider/sofacover.jpg");
            background-size: cover;
            background-position: bottom;
        }
        .icon5{
            background-image: url("../img/topslider/doormat.webp");
            background-size: cover;
        }
        .icon6{
            background-image: url("../img/topslider/cushion.jpg");
            background-size: cover;
        }
        .icon7{
            background-image: url("../img/topslider/blinds.jpg");
            background-size: cover;
        }
         .icon8{
            background-image: url("../img/topslider/blanket.jpg");
            background-size: cover;
        }
         .icon9{
            background-image: url("../img/topslider/tablecover.jpg");
            background-size: cover;
        }
        .icon10{
            background-image: url("../img/topslider/rugs.jpg");
            background-size: cover;
        }
        .icon11{
            background-image: url("../img/topslider/acset.jpg");
            background-size: cover;
            background-position: center center;
        }
         .icon12{
            background-image: url("../img/topslider/foodmat.jpg");
            background-size: cover;
        }


        /*header slider ends here*/

/*header ends here*/

/*carousel starts here*/
.carousel{
    width: 100vw;
    max-width: 1200px;
    overflow-x: hidden;
    margin: 0 auto;
}
    .carousel-container{
        width: 500vw;
        display: flex;
        position: relative;
        animation-name: carousel;
        animation-duration: 15s;
        animation-direction: alternate;
        animation-delay: 1s;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(3,3,3,3);
    }
    @keyframes carousel{
        0%{right: 0%;}
        25%{right: 100%;}
        50%{right: 200%;}
        75%{right: 300%;}
        100%{right: 400%;}
    }
        .carousel-container-box{
            width: 100vw;
            max-width: 1200px;
            height:46.875vw;
            max-height:562.5px;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: bottom;
        }
            .banner1{
                background-image: url("../img/carousel/banner7.jpg");
                background-position: center center;
            }
            .banner2{
                background-image: url("../img/carousel/curtainbanner1.jpg");
            }
            .banner3{
                background-image: url("../img/carousel/banner3.jpg");
            }
            .banner4{
                background-image: url("../img/carousel/banner41.jpg");
            }
            .banner5{
                background-image: url("../img/carousel/banner6.jpg");
            }

/*carousel ends here*/

/*5 images grid starts here */

.grid-container{
    width: 100vw;
    height: 200vw;
    max-width: 1200px;
    max-height: 2400px;
    margin: 7.5px auto;
    align-content: space-between;
    justify-content: space-evenly;

    display: grid;
    grid-template-columns: 45% 45%;
    grid-template-rows:22.5% 45% 22.5% ;
}
.item{
    border-radius: 10%;
}
    .item1{
        background-image: url("../img/grid/grid1.jpg");
        background-size: cover;
    }
    .item2{
        background-image: url("../img/grid/grid4.jpg");
        background-size: cover;
    }
    .item3{
        grid-column-start: 1;
        grid-column-end: 3;
        background-image: url("../img/grid/grid3.jpg");
        background-size: cover;

    }
    .item4{
        background-image: url("../img/grid/grid2.webp");
        background-size: cover;
    }
    .item5{
        background-image: url("../img/grid/grid5.webp");
        background-size: cover;
    }

/*5 images grid ends here*/




/*slider css starts here*/



.wrapper{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 75px;
}

 .wrapper h2{
        margin-left: 5%;
    }
.master{
    width: 90vw;
    max-width: 1080px;
    margin: 0 auto;
    margin-top: 20px;
    border-radius: 5px;
    border: 1px solid gray ;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
.viewall{
    background-color: red;
    width: 10vmax;
    max-width: 120px;
    height:3.33vmax;
    max-height:40px;
    text-align: center;
    float: right;
    margin-right: 10vw;
    box-sizing: content-box;
    display:flex;
    justify-content:space-around;
}

  .viewall a{
        line-height: 100%;
        text-transform:capitalize;
        text-decoration: none;
        font-weight: 400;
        color: #fff;
        align-self:center;
    }
@media screen and (max-width:768px){
     .viewall{
         position:relative;
         top:1.1vmax;
     }
}
.inner{
    width: 90vw;
    max-width: 1080px;
    display: flex;
    align-items: flex-start;
}
.box{
    width: 45vw;
    max-width: 540px;
    margin-bottom: 10px;
    margin-top: 1.75vmax;
    padding-left: 4vw;
    padding-right: 4vw;
    padding-top: 10px;
}

 .box h2{
        margin-left: 0;
        margin-top: 15px;
        margin-bottom: 3px;
        font-size: 1rem;
        font-weight: 400;
        }
    .box h3{
        margin-bottom: 30px;
        font-size: 0.85rem;
    }
    .box h4{
        color: red;
        font-size: .75rem;
    }
    
.master .inner .box img{
width: 100%;
}

.wrapper hr{
        width: 10rem;
        margin-left: 5vw;
        margin-top: 5px;
        }
.bold{
    height: 2.5px;
    background-color: gray;
}
   
 

/*footer starts here*/
.footer{
    margin-top:20px;
    width: 100%;
    height: 25vh;
    background-color: black;
}
.footerlogo{
    height: 100%;
    width: 280px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

  .footerlogo img{
        height: 100%;
        align-self: flex-end;
    }


.whatsapp{
    width: 15vmin;
    position: fixed;
    top: 70vh;
    right: 0px;
}