:root{
    --primary_color: #5584ff;
    --secondary_color: #001d3d;
}

/* blog section start */
.d2c_blog_section{
    padding: 100px 0px;
    font-family: 'Roboto', sans-serif;
    background: #f5f5f5;

}

/* blog section end */

.d2c_blog_section .carousel-inner .d2c_blog_main{
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.d2c_blog_section .carousel-inner .d2c_blog_main .d2c_blog_left{

}
.d2c_blog_section .carousel-inner .d2c_blog_main .d2c_blog_left .d2c_blog_left_img_wrapper{
    width: 500px;
    height: 333px;
    overflow: hidden;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.d2c_blog_section .carousel-inner .d2c_blog_main .d2c_blog_left .d2c_blog_left_img_wrapper img{
    width: 500px;
    height: 333px;
    object-fit: cover;
    overflow: hidden;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.d2c_blog_section .carousel-inner .d2c_blog_main .d2c_blog_right{
    color: var(--secondary_color);
    padding: 20px 10px;
}
.d2c_blog_section .carousel-inner .d2c_blog_main .d2c_blog_right .d2c_title{
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 10px;
}
.d2c_blog_section .carousel-inner .d2c_blog_main .d2c_blog_right small{
    font-size: 14px;
}
.d2c_blog_section .carousel-inner .d2c_blog_main .d2c_blog_right small label{
    font-weight: 600;
}
.d2c_blog_section .carousel-inner .d2c_blog_main .d2c_blog_right .d2c_date{
    font-size: 14px;
    font-weight: 600;
}
.d2c_blog_section .carousel-inner .d2c_blog_main .d2c_blog_right .d2c_like_share span{
    font-size: 14px;
}
.d2c_blog_section .carousel-inner .d2c_blog_main .d2c_blog_right .d2c_like_share span i{
    margin: 5px;
}
.d2c_blog_section .carousel-inner .d2c_blog_main .d2c_blog_right .d2c_text{
    font-size: 17px;
}
.d2c_blog_section .carousel-inner .d2c_blog_main .d2c_blog_right .btn{
    background: var(--primary_color);
    color: #fff;
    padding: 10px 35px 10px 35px;
    text-transform: uppercase;
    border-radius: 5px;
    transition: .4s all ease;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    -webkit-transition: .4s all ease;
    -moz-transition: .4s all ease;
    -ms-transition: .4s all ease;
    -o-transition: .4s all ease;
}
.d2c_blog_section .carousel-inner .d2c_blog_main .d2c_blog_right .btn:hover{
    background: var(--secondary_color);
    transition: .4s all ease;
    -webkit-transition: .4s all ease;
    -moz-transition: .4s all ease;
    -ms-transition: .4s all ease;
    -o-transition: .4s all ease;
}


/*------------------------------ vertical bootstrap slider----------------------------*/

.d2c_blog_section .carousel-inner> .carousel-item.carousel-item-next ,
.carousel-inner > .carousel-item.active.carousel-item-right{ 
    transform: translate3d(0, 100%, 0); 
    -webkit-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0); 
    -moz-transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);  
    top: 0;
    
}
.carousel-inner > .carousel-item.carousel-item-prev ,
.carousel-inner > { 
    /* .carousel-item.active.carousel-item-left */
    transform: translate3d(0,-100%, 0);
    -webkit-transform: translate3d(0,-100%, 0); 
    -moz-transform: translate3d(0,-100%, 0);
    -ms-transform: translate3d(0,-100%, 0);
    -o-transform: translate3d(0,-100%, 0);
    top: 0;
    
}
.carousel-inner > .carousel-item.next.carousel-item-left ,
.carousel-inner > 
.carousel-inner > .carousel-item.active{
    /* .carousel-item.carousel-item-prev.carousel-item-right , */
    transform:translate3d(0,0,0);
    -webkit-transform:translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);;
    -moz-transform:translate3d(0,0,0); 
    -o-transform:translate3d(0,0,0); 
    top:0;
    
}

/*------------------------------- vertical carousel indicators ------------------------------*/
.d2c_blog_section .carousel-indicators{
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
    height:20px;
    border-radius: 50%;
    right:-10%;
    left:auto;
    width:auto;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.d2c_blog_section .carousel-indicators li{
    display:block; 
    margin-bottom:5px;
    border:1px solid var(--primary_color); 
    
}
.d2c_blog_section .carousel-indicators li.active{
    margin-bottom:5px;
    background:var(--primary_color);
    
}



@media screen and (min-width: 0px) and (max-width: 479px){

    .d2c_blog_section{
        padding: 50px 0px;
    }
    .d2c_blog_section{
        height: auto;
    }
    .d2c_blog_section .carousel-inner .d2c_blog_main .d2c_blog_right .d2c_title{
        font-size: 18px;
    }
    .d2c_blog_section .carousel-inner .d2c_blog_main .d2c_blog_right .d2c_text{
        font-size: 15px;
    }
    
    .d2c_blog_section .carousel-inner .d2c_blog_main .d2c_blog_left .d2c_blog_left_img_wrapper{
        width: 100%;
        height: 250px;
    }
    .d2c_blog_section .carousel-inner .d2c_blog_main .d2c_blog_left .d2c_blog_left_img_wrapper img{
        width: 100%;
    }
    .d2c_blog_section .carousel-indicators{
        right: -18%;
    }
    .d2c_blog_section .carousel-inner .d2c_blog_main .d2c_blog_right .btn{
        width: 100%;
        padding: 7px 35px 7px 35px;
    }
}


@media screen and (min-width: 480px) and (max-width: 767px){
    .d2c_blog_section{
        padding: 50px 0px;
    }
    .d2c_blog_section .carousel-inner .d2c_blog_main .d2c_blog_right .d2c_title{
        font-size: 18px;
    }
    .d2c_blog_section .carousel-inner .d2c_blog_main .d2c_blog_right .d2c_text{
        font-size: 15px;
    }
    
    .d2c_blog_section .carousel-inner .d2c_blog_main .d2c_blog_left .d2c_blog_left_img_wrapper{
        width: 100%;
        height: 250px;
    }
    .d2c_blog_section .carousel-inner .d2c_blog_main .d2c_blog_left .d2c_blog_left_img_wrapper img{
        width: 100%;
    }
    .d2c_blog_section .carousel-indicators{
        right: -60px;
    }
    .d2c_blog_section .carousel-inner .d2c_blog_main .d2c_blog_right .btn{
        width: 100%;
        padding: 7px 35px 7px 35px;
    }

}


@media screen and (min-width: 768px) and (max-width: 991px){
    .d2c_blog_section{
        padding: 70px 0px;
    }
    .d2c_blog_section .carousel-inner .d2c_blog_main .d2c_blog_left .d2c_blog_left_img_wrapper{
        width: 100%;
    }
    .d2c_blog_section .carousel-inner .d2c_blog_main .d2c_blog_left .d2c_blog_left_img_wrapper img{
        width: 100%;
        height: 350px;
    }
    .d2c_blog_section .carousel-inner .d2c_blog_main .d2c_blog_right .d2c_title{
        font-size: 18px;
    }
    .d2c_blog_section .carousel-inner .d2c_blog_main .d2c_blog_right small{
        font-size: 10px;
    }
    .d2c_blog_section .carousel-inner .d2c_blog_main .d2c_blog_right .d2c_date{
        font-size: 10px !important;
    }
    .d2c_blog_section .carousel-inner .d2c_blog_main .d2c_blog_right .d2c_like_share span{
        font-size: 10px;
    }
    .d2c_blog_section .carousel-inner .d2c_blog_main .d2c_blog_right .d2c_text{
        font-size: 13px;
    }
    .d2c_blog_section .carousel-indicators{
        right: -12%;
    }
    .d2c_blog_section .carousel-inner .d2c_blog_main .d2c_blog_left .d2c_blog_left_img_wrapper{
        height: 350px;
    }
    .d2c_blog_section .carousel-inner .d2c_blog_main .d2c_blog_right .btn{
        padding: 7px 35px 7px 35px;
    }
    
}

@media screen and (min-width: 992px) and (max-width: 1199px){
    .d2c_blog_section{
        padding: 80px 0px;
    }
    .d2c_blog_section .carousel-inner .d2c_blog_main .d2c_blog_left .d2c_blog_left_img_wrapper{
        width: 100%;
    }
    .d2c_blog_section .carousel-inner .d2c_blog_main .d2c_blog_left .d2c_blog_left_img_wrapper img{
        width: 100%;
    }
}


/* 
    <!-- 
      KIT Name: 10+ Blog Card - Bootstrap Bundle
      Product URL: https://www.designtocodes.com/product/10-blog-card-bootstrap-bundle-2022/
      Product Description: The Blog Card kit is made of all the basic elements you need to create a stunning website, from the start.
      Author: designtocodes.com
      Author URI: https://www.designtocodes.com/
    -->
*/