/*** Home Page ***/


/*** Header ***/
@media (min-width: 992px) {
    .header {
        margin-top: -80px;
    }
}

.owl-dots{
    display:none;
}
.header-carousel .owl-nav {
    position: absolute;
    top: 50%;
    left: -25px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
}




@media (max-width: 768px) {
    .header-carousel .owl-nav {
        left: 25px;
    }
}

.bg-texture1 {
    background-image: url(../img/bg5.jpg);
    background-repeat: repeat;
}


.header-carousel .owl-nav .owl-prev, .header-carousel .owl-nav .owl-next {
    margin: 7px 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF !important;
    background: var(--primary) !important;
    border-radius: 40px;
    font-size: 20px;
    transition: .5s;
    /*display: none;*/
}

.header-carousel .owl-nav .owl-prev:hover, .header-carousel .owl-nav .owl-next:hover {
    background: var(--dark) !important;
}






/*** About ***/
.about-img img {
    position: relative;
    z-index: 2;
}

.about-img::before {
    position: absolute;
    content: "";
    top: 0;
    left: -50%;
    width: 100%;
    height: 100%;
    background: var(--primary);
    transform: skew(20deg);
    z-index: 1;
}





/*** Category ***/
.cat-item div {
    background: rgba(0, 0, 0, 0.3);
    border: 1px dashed rgba(255, 255, 255);
    transition: .5s;
    height: 200px;
}
.cat-item h3 {
    color: white;
}

.cat-item:hover div {
    background: rgba(255, 255, 255, 0.5);
    border-color: transparent;
}

.cat-item div * {
    transition: .5s;
}

.cat-item:hover div * {
    color: #000 !important;
}

.carpets {
    background-image: url('https://dm.charnwoodflooring.uk/resize/image?qlty=50&otype=webp&path=front/img/carpets.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}
.lvt {
    background-image: url('https://dm.charnwoodflooring.uk/resize/image?qlty=50&otype=webp&path=front/img/lvt.jpeg');
    background-repeat: no-repeat;
    background-size: cover;
}
.laminate {
    background-image: url('https://dm.charnwoodflooring.uk/resize/image?qlty=50&otype=webp&path=front/img/laminate.jpeg');
    background-repeat: no-repeat;
    background-size: cover;
}
.vinyl {
    background-image: url('https://dm.charnwoodflooring.uk/resize/image?qlty=50&otype=webp&path=front/img/vinyl.jpeg');
    background-repeat: no-repeat;
    background-size: cover;
}

.cushion {
    background-image: url('https://dm.charnwoodflooring.uk/resize/image?qlty=50&otype=webp&path=front/img/cushion.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}
.carpet-tiles {
    background-image: url('https://dm.charnwoodflooring.uk/resize/image?qlty=50&otype=webp&path=front/img/carpet_tiles.jpeg');
    background-repeat: no-repeat;
    background-size: cover;
}
.accessories {
    background-image: url('https://dm.charnwoodflooring.uk/resize/image?qlty=50&otype=webp&path=front/img/accessories.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

.engineer-wood {
    background-image: url('https://dm.charnwoodflooring.uk/resize/image?qlty=50&otype=webp&path=front/img/engineer-wood.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}
.contract-carpets {
    background-image: url('https://dm.charnwoodflooring.uk/resize/image?qlty=50&otype=webp&path=front/img/contract-carpets.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

.carpet-stairs-rod{
     background-image: url('https://dm.charnwoodflooring.uk/resize/image?qlty=50&otype=webp&path=front/img/capet-stair-rods.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}
.corner-protectors{
     background-image: url('https://dm.charnwoodflooring.uk/resize/image?qlty=50&otype=webp&path=front/img/corner-protectors.webp');
    background-repeat: no-repeat;
    background-size: cover;
}


/***  Call to Action Start ***/

@media (max-width: 480px){
    .spac{
        margin-top: 10px;
    }
}



.testi-carousel .carousel-buttons.carousel-control-prev,
.testi-carousel .carousel-buttons.carousel-control-next {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF !important;
    background: var(--primary) !important;
    border-radius: 40px;
    font-size: 20px;
    opacity: 1;
    transition: .5s;
}

.testi-carousel .carousel-buttons.carousel-control-prev:hover,
.testi-carousel .carousel-buttons.carousel-control-next:hover {
    background: var(--dark) !important;
}



















.header-slider-d .carousel-buttons{
    position: absolute;
    top: 50%;
    left: -25px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
}




@media (max-width: 768px) {
    .header-slider-d .carousel-buttons {
        left: 10px;
    }
}

.bg-texture1 {
    background-image: url(../img/bg5.jpg);
    background-repeat: repeat;
}


.header-slider-d .carousel-buttons.carousel-control-prev, .header-slider-d .carousel-buttons.carousel-control-next {
    margin: 7px 0;
    width: 50px;
    opacity: 1;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF !important;
    background: var(--primary) !important;
    border-radius: 40px;
    font-size: 20px;
    transition: .5s;
    /*display: none;*/
}

.header-slider-d .carousel-buttons.carousel-control-next {
    top: 40%;
}

.header-slider-d .carousel-buttons.carousel-control-prev:hover, .header-slider-d .carousel-buttons.carousel-control-next:hover {
    background: var(--dark) !important;
}












@media (max-width: 767px) {
    .testi-carousel .carousel-inner .carousel-item > div {
        display: none;
    }
    .testi-carousel .carousel-inner .carousel-item > div:first-child {
        display: block;
    }
}

.testi-carousel .carousel-inner .carousel-item.active,
.testi-carousel .carousel-inner .carousel-item-next,
.testi-carousel .carousel-inner .carousel-item-prev {
    display: flex;
}

/* medium and up screens */
@media (min-width: 768px) {
    
    .testi-carousel .carousel-inner .carousel-item-end.active,
    .testi-carousel .carousel-inner .carousel-item-next {
      transform: translateX(50%);
    }
    
    .testi-carousel .carousel-inner .carousel-item-start.active, 
    .testi-carousel .carousel-inner .carousel-item-prev {
      transform: translateX(-50%);
    }
}

.testi-carousel .carousel-inner .carousel-item-end,
.testi-carousel .carousel-inner .carousel-item-start { 
  transform: translateX(0);
}