/* 
Author: M Ahammad Ullah Rifat
Author url: msoftbd.com
*/
/*
CSS LIST========>
1. scroll-bar
2. bubbles-style
3. mouse-cursor
4. scroll-top
5. page-loading
=========>>COMMON CSS */
:root {
  --rb-theme-color:#0081FF; 
  --rb-theme-hover:#CAFE00; 
  --rb-green:#0081FF; 
  --rb-light-green:#30D181;
  --rb-yellow:#CAFE00; 
  --rb-red:#F81F01;
  --rb-pink:#EE076E; 
  --rb-sime-pink:#F43F5F;
  --rb-teal:#06DBB4;
  --rb-sime-teal:#1CCAA1;
  --rb-indigo:#6366F1;
  --rb-orange:#F59E0B;
  --font-sans: 'Open Sans';
  --font-roboto: 'Roboto';
  --font-raleway: 'Raleway';
  --font-oswald: 'Oswald';
  --font-rubik: 'Rubik';
}
/*==============================================
   Theme Color Css
===============================================*/


.btn-one,
.thm_clr1,
.main-slider .content h2 span,
.sec-title p,
.twitter-feed-box span,
.twitter-feed-box .bottom .comments a i,
.single-service-style3 .overlay-content .title-holder p,
.slogan-content .quote-button a,
.mobile-menu .navigation li.current > a,
.mobile-menu .navigation li > a:hover,
.main-menu .navigation>li>ul>li>a:hover,
.main-menu .navigation> li> ul> li> a:before,
.main-menu .navigation> li> ul> li:hover > a,
.main-menu .navigation> li> ul> li> ul> li> a:hover,
.main-menu .navigation>li>ul>li>ul>li a:before,
.main-menu.style2 .navigation>li:hover>a,
.main-menu.style2 .navigation>li.current>a,
.main-menu.style2.clr-white .navigation>li:hover>a,
.main-menu.style2.clr-white .navigation>li.current>a,
.sticky-header .main-menu .navigation>li:hover>a, 
.sticky-header .main-menu .navigation>li.current>a,
.outer-search-box-style1 .seach-toggle:hover,
.outer-search-box-style1 .seach-toggle.active,
.single-footer-widget .page-links li a:hover,
.single-service-style3 .overlay-content .title-holder h3 a:hover,
.header-social-links .social-links-style1 li a:hover,
.header-menu ul li a:hover,
.quote-button a span:before,
.about-style1-text-box .title p,
.about-style1-text-box .title h1 b,
.login-register-area .form .right h6 span,
.single-service-style2 .overlay-content .inner-content .text-holder .title h3 a:hover,
.single-fact-counter .count-box h1,
.project-filter li:hover .filter-text, 
.project-filter li.active .filter-text,
.single-blog-post .text-holder .blog-title a:hover,
.single-blog-post .text-holder .bottom .author-name a span:before,
.single-blog-post .text-holder .bottom .read-more-button a,
.single-portfolio-style1 .img-holder .title-holder p span:before,
.single-testimonial-style1:before,
.single-testimonial-style1 .client-info .icon-box span:before,
.single-testimonial-style1 .client-info .title-box h3,
.payment-tab .tab-btns li:hover i, 
.payment-tab .tab-btns li.active-btn i,
.product-tab-box .review-form .shop-page-title p b,
.product-tab-box .review-form .add-rating-box .review-box ul li i,
.product-tab-box .review-form .input-box p span,
.review-box-holder .single-review-box .text-holder .top .review-box ul li i,
.comment-meta-box li a:hover,
.single-product-item .img-holder .overlay-content a:hover,
.rating-box ul li a:hover,
.breadcrumb-area .breadcrumb-menu ul li a:hover,
.brochures-box ul li .left .icon span:before,
.brochures-box ul li .left h5 a,
.header-contact-info ul li .title h6 a:hover,
.single-blog-post-style3 .text-holder .blog-title a:hover,
.styled-pagination li a:hover,
.styled-pagination li a.active,
.portfolio-details-content-box .tag,
.add-comment-box #add-comment-form button:hover,
.single-blog-post-style3 .text-holder h4,
.single-blog-post-style3 .text-holder .button-box .readmore a.btn-one:hover,
.single-blog-post-style3 .img-holder .overlay a,
.single-sidebar .project-box .project-lists li a:hover,
.categories li a:hover,
.single-contact-info-box .icon span:before,
.contact-form form button:hover,
.error-content .title,
.single-service-style2 .overlay-content .inner-content .icon,
.footer-menu ul li a:hover,
.video-holder-box.style2 .icon .inner a span:before,
.single-portfolio-style2 .overlay-content .title-holder p,
.single-portfolio-style2 .overlay-content .title-holder h3 a:hover,
.breadcrumb-area .breadcrumb-menu ul li.active,
.single-sidebar .ratting-box .ratting-lists li a:hover,

.service-style1-area .title h1 a{
    color: #0081FF;    
}



.main-menu.style4 .navigation>li:hover>a, 
.main-menu.style4 .navigation>li.current>a,
.service-style4-area .title h1 a,
.about-style4-text-box .inner-contant ul li:before,
.portfolio-item-style4-content .title-holder span.tag,
.single-price-box .title h3,
.header-social-links-style5 .social-links-style2 li a:hover,
.header-contact-info-style5 li .title h5 a:hover,
.main-menu.style5 .navigation>li:hover>a,
.main-menu.style5 .navigation>li.current>a,
.quote-button-style5 a,
.service-style6-area .title h1 a,
.single-service-style6 .text-holder .icon,
.single-service-style7 h3 a:hover,
.service-style7-text-box .button-box a:hover,
.single-portfolio-style5 .title-holder span.tag,
.single-portfolio-style5 .title-holder h5 a:hover {
    color: #0081FF;
}






/*==============================================
   Theme Background Css
===============================================*/
.thm_bgclr1,
.social-links-style1 li a:hover i,
.main-menu .navigation>li>a span.homeicon,
.single-portfolio-style1 .img-holder .title-holder:before,
.testimonial-style1-title-box:before,
.main-menu.style2 .navigation>li>a span.homeicon,
.single-service-style3 .overlay-content .icon-holder,
.video-holder-box-style3 a span:before,
.slogan-area,
.slogan-content.style2 .quote-button a,
.quote-button.style3 a,
.video-holder-box-style5 .icon .inner a span:before,
.btn-one:hover,
.btn-one:focus,
.owl-nav-style-one.owl-theme .owl-nav [class*="owl-"]:hover,
.single-footer-widget .page-links li a:hover:before,
.owl-carousel.owl-dot-style1 .owl-dots .owl-dot.active,
.accordion-box .accordion .accord-btn.active,
.slogan-content .quote-button a:hover,
.quote-button a:hover,
.main-slider .owl-theme .owl-dots .owl-dot.active,
.main-slider .owl-theme .owl-dots .owl-dot.active:before,
.single-service-style1 .text-holder .count-box:before,
.video-holder-box .icon .inner a span:before,
.about-style1-text-box .title h1 span,
.single-service-style2 .img-holder .static-content .icon a,
.single-portfolio-style1 .img-holder .inner-box .zoom-button a span:before,
.single-team-member .title-holder:before,
.single-blog-post .img-holder .post-date p,
.copyright-text:before,
.quote-button.style2 a,
.video-holder-box-style4 a span:before,
.about-style2-area,
.single-portfolio-style2 .overlay-content .icon-holder,
.styled-pagination li.next a,
.portfolio-single-video-box a span:before,
.project-info-box,
.project-info-box.style2,
.add-comment-box #add-comment-form button,
.team-member-info-box .social-links-style1 li a:hover i,
.single-partner-logo-box-style2:hover a img,
.single-blog-post-style3 .text-holder .button-box .readmore a.btn-one,
.single-blog-post-style3 .quote-box .icon,
.single-sidebar .popular-tag li a:before,
.sidebar-bottom-box .img-holder .overlay a span:before,
.blog-single-quote-box,
.contact-form form button,
.nav-outer .mobile-nav-toggler .inner,
.single-product-item .img-holder .product-info,
.single-product-item .img-holder .overlay-content a,
.shorting-box .selects-box .dropdown-item.active,
.shorting-box .selects-box .dropdown-item:active,
.shorting-box .selects-box .dropdown-item:hover,
.showing-box .selects-box .dropdown-item.active,
.showing-box .selects-box .dropdown-item:active,
.showing-box .selects-box .dropdown-item:hover,
.product-info-box .product-size ul li:hover a,
.product-info-box .product-size ul li.active a,
.addto-cart-box .cart-box button.addtocart span:before,
.addto-cart-box .menu-box ul li a:hover,
.product-tab-box .tab-btns .tab-btn.active-btn span, 
.product-tab-box .tab-btns .tab-btn:hover span,
.estimate-form-box .button-box button:hover,
.discount-form-box .button-box button:hover,
.checkout-form-box .button-box button:hover,
.login-register-area .form button:hover,
.login-register-area .form .social-icon li a:hover i,
.share-products-socials ul li a:hover i,
.single-testimonial-style1.style3 .client-info .icon-box span:before,
.main-slider .content .btns-box .btn-one,
.main-slider .content .btns-box .btn-two:hover{
    background: #0081FF;
    background-color: #0081FF;
}



.quote-button-style4 a,
.service-style4-area .title h1 a:before,
.single-service-style4 .text-holder:before,
.single-service-style5 .counting:before,
.single-service-style5:before,
.progress-levels .progress-box .bar .bar-fill,
.single-team-member-style2 .title-holder:before,
.contact-style4-area .layer-outer .bg-color,
.quote-button-style5 a:before,
.quote-button-style5 a:hover,
.service-style6-area .title h1 a:before,
.single-service-style6 .img-holder .inner:before,
.service-style7-text-box .button-box a,
.testimonial-style5-area .owl-nav-style-one.owl-theme .owl-nav [class*="owl-"]:hover,
.single-service-style5 .icon:before,
.single-testimonial-style4 .inner-content .quote-box:before {
    background: #0081FF;
}







/*==============================================
   Theme Border Color Css
===============================================*/
.login-register-area .form button:hover,
.login-register-area .form .social-icon li a:hover i,
.share-products-socials ul li a:hover i,
.main-slider .content .btns-box .btn-one,
.main-slider .content .btns-box .btn-two:hover{
    border-color: #0081FF;    
}




.single-testimonial-style4 .inner-content:before{
    border: 4px solid #0081FF;
}









.single-testimonial-style1.style3 .client-info .icon-box span:before {
    border: 1px solid #0081FF;
}
.scroll-top {
    border: 3px solid #0081FF;
}
.btn-one {
    border: 2px solid #0081FF;
}
.btn-one:hover,
.btn-one:focus{
    border: 2px solid #0081FF;
}
.single-blog-post-style3.withbdr {
    border: 5px solid #0081FF;
}
.mobile-menu .navigation li > a:before {
    border-left: 5px solid #0081FF;
}
.single-product-item .img-holder .product-info:before {
    border-right: 20px solid #0081FF;
}
.service-style1-area .title h1 a{
    border-bottom: 1px solid #0081FF;
}
.single-service-style2 .img-holder .static-content .title:before {
    border: 2px solid #0081FF;
}
.single-service-style2 .overlay-content .inner-content .text-holder .title:before {
    border: 2px solid #0081FF;
}




.video-galler-outer-bg:before {
    background-color: rgba(8, 214, 101, 0.80);
}
.main-slider .content h3:before{
    background: rgba(8, 214, 101, 0.40);
}
.single-portfolio-slider .slider-pager .thumb-box li a .img-holder:before{
    background-color: rgba(8, 214, 101, 0.50);
}
.single-product-image-holder .slider-pager .thumb-box li .img-holder:before{
    background-color: rgba(8, 214, 101, 0.70);
}
.single-service-style1 .text-holder .count-box {
    background: #ffeee7;
}
.about-style1-text-box.style2 .title h1 span {
    background: #14A65A;
}
.main-menu .navigation>li:hover>a,
.main-menu .navigation>li.current>a{
  color: #fff;
}
.single-portfolio-style1 .img-holder .title-holder span.tag {
    color: #0081FF;
    background: rgba(8, 214, 101, 0.20);
}







.portfolio-item-style4-content .title-holder span.tag,
.single-portfolio-style5 .title-holder span.tag {
    background: rgba(8, 214, 101, 0.20);    
}
.single-service-style7:before{
    border: 2px solid #0081FF;
}




/*
==========================
	1. scroll-bar	
==========================
*/
body::-webkit-scrollbar {width: 12px;}
body {scrollbar-width: thin;scrollbar-color: #999 #fff;}
body:-webkit-scrollbar-track {background: #fff;}
body::-webkit-scrollbar-thumb {background-color: #999;border-radius: 6px;border: 3px solid #fff;}
body::-webkit-scrollbar-thumb:hover {background-image: linear-gradient(to bottom right, var(--rb-theme-color), var(--rb-theme-hover));}
::-moz-selection {color: #fff;background: var(--rb-theme-color);text-shadow: none}
::selection {color: #fff;background: var(--rb-theme-color);text-shadow: none}
/*
==========================
	2. bubbles-style
==========================
*/
.bubbles_wrap {position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 99999999999999999;overflow: hidden;pointer-events: none;}
@-webkit-keyframes animateBubble {0% {margin-top: 20%}to {margin-top: -30%}}
@-moz-keyframes animateBubble {0% {margin-top: 20%}to {margin-top: -30%}}
@keyframes animateBubble{0{margin-top:20%}to{margin-top:-30%}}
@-webkit-keyframes sideWays{0{margin-left:0}to{margin-left:25px}}
@-moz-keyframes sideWays{0{margin-left:0}to{margin-left:25px}}
@keyframes sideWays{0{margin-left:0}to{margin-left:25px}}
.x1{-webkit-animation:animateBubble 15s linear infinite,sideWays 2s ease-in-out infinite alternate;animation:animateBubble 15s linear infinite,sideWays 2s ease-in-out infinite alternate;left:6%;top:45%;background:#22C55E}
.x2{-webkit-animation:animateBubble 10s linear infinite,sideWays 4s ease-in-out infinite alternate;animation:animateBubble 10s linear infinite,sideWays 4s ease-in-out infinite alternate;left:5%;top:80%;background:#CAFE00}
.x3{-webkit-animation:animateBubble 18s linear infinite,sideWays 2s ease-in-out infinite alternate;animation:animateBubble 18s linear infinite,sideWays 2s ease-in-out infinite alternate;left:10%;top:40%;background:#F81F01}
.x4{-webkit-animation:animateBubble 12s linear infinite,sideWays 3s ease-in-out infinite alternate;animation:animateBubble 12s linear infinite,sideWays 3s ease-in-out infinite alternate;left:20%;top:0;background:#EE076E}
.x5{-webkit-animation:animateBubble 19s linear infinite,sideWays 4s ease-in-out infinite alternate;animation:animateBubble 19s linear infinite,sideWays 4s ease-in-out infinite alternate;left:30%;top:50%;background:#30D181}
.x6{-webkit-animation:animateBubble 11s linear infinite,sideWays 2s ease-in-out infinite alternate;animation:animateBubble 11s linear infinite,sideWays 2s ease-in-out infinite alternate;left:50%;top:0;background:#1CCAA1}
.x7{-webkit-animation:animateBubble 10s linear infinite,sideWays 2s ease-in-out infinite alternate;animation:animateBubble 10s linear infinite,sideWays 2s ease-in-out infinite alternate;left:65%;top:70%;background:#06DBB4}
.x8{-webkit-animation:animateBubble 12s linear infinite,sideWays 3s ease-in-out infinite alternate;animation:animateBubble 12s linear infinite,sideWays 3s ease-in-out infinite alternate;left:80%;top:10%;background:#6366F1}
.x9{-webkit-animation:animateBubble 19s linear infinite,sideWays 4s ease-in-out infinite alternate;animation:animateBubble 19s linear infinite,sideWays 4s ease-in-out infinite alternate;left:90%;top:50%;background:#F59E0B}
.x10{-webkit-animation:animateBubble 16s linear infinite,sideWays 2s ease-in-out infinite alternate;animation:animateBubble 16s linear infinite,sideWays 2s ease-in-out infinite alternate;left:80%;top:80%;background:#F43F5F}
.bubble{position:absolute;border-radius:50%;box-shadow:none;width:6px;height:6px}.bubbles_wrap[data-magic-bubbles="hide"]{display:none;opacity:0;visibility:hidden;position:absolute;z-index:-1111}
/*
==========================
	3. mouse-cursor
==========================
*/
.mouse-cursor{position:fixed;left:0;top:0;pointer-events:none;border-radius:50%;-webkit-transform:translateZ(0);transform:translateZ(0);visibility:hidden}
.cursor-inner{margin-left:-6px;margin-top:-6px;width:12px;height:12px;z-index:99999999999999999;background-color:var(--rb-theme-color);-webkit-transition:width .3s ease-in-out,height .3s ease-in-out,margin .3s ease-in-out,opacity .3s ease-in-out;transition:width .3s ease-in-out,height .3s ease-in-out,margin .3s ease-in-out,opacity .3s ease-in-out}
.cursor-inner.cursor-hover{margin-left:-40px;margin-top:-40px;width:80px;height:80px;background-color:var(--rb-theme-hover);opacity:.2}
.cursor-outer{margin-left:-20px;margin-top:-20px;width:40px;height:40px;border:4px solid var(--rb-theme-color);-webkit-box-sizing:border-box;box-sizing:border-box;z-index:99999999999999999;opacity:.5;-webkit-transition:all .08s ease-out;transition:all .08s ease-out}
.cursor-outer.cursor-hover {opacity: 0;}
.rb_tm_all_wrap[data-magic-cursor="hide"] .mouse-cursor {display: none;opacity: 0;visibility: hidden;position: absolute;z-index: -99999999999999999;}
@media (max-width: 1040px) {.mouse-cursor {display: none;}}
/*
==========================
  4. scroll-top
==========================
*/
.scroll-top{position:fixed;right:50px;bottom:50px;height:46px;width:46px;cursor:pointer;display:block;border-radius:50px;box-shadow:rgba(50,50,93,0.25) 0 13px 27px -5px,rgba(0,0,0,0.3) 0 8px 16px -8px;z-index:999;opacity:0;visibility:hidden;transform:translateY(15px);-webkit-transition:all 200ms linear;transition:all 200ms linear;background:linear-gradient(to bottom right,var(--rb-theme-color),var(--rb-theme-hover));background-size:200% 100%;background-position:left center;font-size:20px;color:#fff}
.scroll-top:hover{background-position:right center;color:#fff;box-shadow:rgba(0,0,0,0.16) 0 3px 6px,rgba(0,0,0,0.23) 0 3px 6px}  
.scroll-top.active-progress{opacity:1;visibility:visible;transform:translateY(0)}
.scroll-top i{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);line-height:10px;-webkit-transition:all 200ms linear;transition:all 200ms linear}
.scroll-top:hover i{animation:swipe .6s linear infinite alternate}
@keyframes swipe{from{margin-top:-3px}to{margin-top:3px}}
.scroll-top svg path{fill:none}
.scroll-top svg.scroll-top-circle path{stroke:white;stroke-width:5;box-sizing:border-box;-webkit-transition:all 200ms linear;transition:all 200ms linear}
/*
==========================
  5. page-loading
==========================
*/
@-webkit-keyframes loader {
    0%,
    10%,
    100% {
        width: 80px;
        height: 80px;
    }
    65% {
        width: 150px;
        height: 150px;
    }
}

@keyframes loader {
    0%,
    10%,
    100% {
        width: 80px;
        height: 80px;
    }
    65% {
        width: 150px;
        height: 150px;
    }
}

@-webkit-keyframes loaderBlock {
    0%,
    30% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    55% {
        background-color: #fff;
    }
    100% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
}

@keyframes loaderBlock {
    0%,
    30% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    55% {
        background-color: #fff;
    }
    100% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
}

@-webkit-keyframes loaderBlockInverse {
    0%,
    20% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    55% {
        background-color: #fff;
    }
    100% {
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }
}

@keyframes loaderBlockInverse {
    0%,
    20% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    55% {
        background-color: #fff;
    }
    100% {
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }
}

.loader {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    -webkit-transform: translate(-50%, -50%) rotate(45deg) translate3d(0, 0, 0);
    transform: translate(-50%, -50%) rotate(45deg) translate3d(0, 0, 0);
    -webkit-animation: loader 1.2s infinite ease-in-out;
    animation: loader 1.2s infinite ease-in-out;
}

.loader span {
    position: absolute;
    display: block;
    width: 40px;
    height: 40px;
    background-color: #fff;
    -webkit-animation: loaderBlock 1.2s infinite ease-in-out both;
    animation: loaderBlock 1.2s infinite ease-in-out both;
}

.loader span:nth-child(1) {
    top: 0;
    left: 0;
}

.loader span:nth-child(2) {
    top: 0;
    right: 0;
    -webkit-animation: loaderBlockInverse 1.2s infinite ease-in-out both;
    animation: loaderBlockInverse 1.2s infinite ease-in-out both;
}

.loader span:nth-child(3) {
    bottom: 0;
    left: 0;
    -webkit-animation: loaderBlockInverse 1.2s infinite ease-in-out both;
    animation: loaderBlockInverse 1.2s infinite ease-in-out both;
}

.loader span:nth-child(4) {
    bottom: 0;
    right: 0;
}

.preloader {
  background: #0081FF;
    overflow: hidden;
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999999999999999;
}