/*===============================================
Template Name: Personal Advisor
Description: Description
Version: 1.0.0
Text Domain: Personal Advisor
Tags:
================================================*/

/*TABLE OF Personal Advisor*/
/*=======================
01. Personal Advisor Header Section Css
02. Personal Advisor Hero Section Css
03. Personal Advisor About Section Css
04. Personal Advisor Service Section Css
05. Personal Advisor Header Section Css
06. Personal Advisor Brand Section Css
07. Personal Advisor Testimonial Section Css
08. Personal Advisor Counter Section Css
09. Personal Advisor Footer Section Css
10. Personal Advisor Team Section Css
11. Personal Advisor Faq Section Css
12. Personal Advisor Contact Section Css
13. Personal Advisor Service Details Section Css
14. Personal Advisor Blog Section Css
15. Personal Advisor Blog Two Section Css
16. Personal Advisor Blog Details Section Css
18. Personal Advisor Protfolio Section Css
19. Personal Advisor Protfolio Details Section Css
20. Personal Advisor Shop Section Css
21. Personal Advisor Shop Two Section Css
22. Personal Advisor Shop Details Section Css
23. Personal Advisor  Loader Css
=======================*/



/*=====================================
<--  Dreamhub Personal Advisor Header Section Css -->
=======================================*/
.header-section {
    background: #fff;
}
.logo {
    text-align: left;
}
/*sticky*/
.sticky {
    left: 0;
    margin: auto;
    position: fixed !important;
    top: 0;
    width: 100%;
    -webkit-box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.1);
    background: #2488f2!important;
    transition: .5s;
    z-index: 44;
    animation: 500ms running fadeInUp;
    animation-name: slideInDown;
}
/*stiky header logo*/

.header-section a.active {
    display: block !important;
}
.sticky a.active {
    display: none !important;
}

a.active-sticky {
    display: none !important;
}
.sticky a.active-sticky {
    display: block !important;
}



/*stiky header button*/
.sticky .header-menu ul li a {
    color: #fff;
}
.sticky .header-menu-btn a {
    border: 1px solid #fff;
    color: #fff;
}
.sticky .header-menu-btn a:hover {
    color: #2488f2;
    background: #fff;
    border: 1px solid #2488f2;
}


/*header-menu*/
.header-menu {
    text-align: right;
}
.header-menu ul {
    display: inline-block;
}
.header-menu ul li {
    display: inline-block;
    list-style: none;
    position: relative;
    margin: 0 0 0 35px;
}

.header-menu ul li a {
    display: inline-block;
    padding: 25px 0;
    font-weight: 600;
    font-size: 16px;
    line-height: 50px;
    color: #010e22;
}

.header-menu ul li a:hover {
    color: #2488f2;
}


.sticky .header-menu ul li a:hover{
   color: #fff; 
}

.header-menu-btn a:hover {
    background: #3a79cf;
    border: 1px solid #3a79cf;
    color: #fff;
}

/*header menu  button*/
.header-menu-btn {
    display: inline-block;
    margin-left: 65px;
}

.header-menu-btn a {
    border-radius: 5px;
    display: inline-block;
    font-size: 16px;
    color: #010e22;
    font-weight: 500;
    font-family: "Nunito";
    padding: 10px 40px;
    border: 1px solid #2871ff;
}
.header-menu-btn a i {
    font-size: 22px;
    position: relative;
    top: 3px;
    margin-left: 6px;
}

/*sub-menu*/
.header-menu ul li .sub-menu {
    position: absolute;
    top: 95px;
    left: 0;
    background: #fff;
    width: 250px;
    border-radius: 3px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    margin-top: 20px;
    border-top: 2px solid #3a79cf;
    visibility: hidden;
    opacity: 0;
    box-shadow: 0 0 23px rgb(0 0 0 / 10%);
    border-bottom: 2px solid #3a79cf;
    z-index: 99;
}
.header-menu ul li:hover .sub-menu{
    top: 78px;
    visibility: visible;
    opacity: 1;
}
.header-menu ul li .sub-menu li {
    display: block;
    margin-left: 0;
}
.header-menu ul li .sub-menu li a {
    display: inline-block;
    padding: 0px 24px;
    margin: 0;
    font-size: 16px;
    color: #39374d;
    text-transform: capitalize;
    width: 100%;
    text-align: left;
}
.header-menu ul li .sub-menu li a:hover{
    background: #3a79cf;
    color: #fff;
}




/*================================
 <-- Personal Advisor Hero Section  Css-->
==================================*/
.hero-section {
    padding-top: 100px;
}

.hero-sub-title h5 {
    font-size: 16px;
    color: #2871ff;
    font-weight: 600;
    font-family: "Mulish";
    position: relative;
    z-index: 1;
    padding-left: 35px;
    margin-bottom: 17px;
}

.hero-sub-title h5:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    background: url(../image/icon.png);
    z-index: -1;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
}

.hero-main-title {
    position: relative;
}
.hero-main-title:before {
    position: absolute;
    left: 0px;
    top: 4px;
    height: 115px;
    width: 6px;
    background: #2871ff;
    content: "";
}

.hero-main-title h1 {
    font-size: 55px;
    line-height: 64px;
    color: #1d263a;
    font-weight: 800;
    font-family: "Mulish";
    padding-left: 26px;
}

.hero-description p {
    width: 83%;
    margin-top: 12px;
    margin-bottom: 40px;
}

.hero-button {
    float: left;
}

.hero-button a {
    display: inline-block;
    font-size: 16px;
    color: #1d263a;
    font-weight: 700;
    font-family: "Nunito";
    border: 1px solid #2871ff;
    padding: 10px 30px;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}

.hero-button a:hover {
    color: #fff;
}

.hero-button a:before {
    transition: .5s;
    border: 1px solid #2871ff;
    position: absolute;
    content: "";
    left: 0;
    top: -2px;
    height: 0%;
    width: 100%;
    background: #2871ff;
    z-index: -1;
}
.hero-button a:after {
    border: 1px solid #2871ff;
    position: absolute;
    content: "";
    left: 0;
    bottom: -4px;
    height: 0%;
    width: 100%;
    background: #2871ff;
    z-index: -1;
    transition: .5s;
}

.hero-button a:hover:after {
    height: 56%;
}

.hero-button a:hover:before {
    height: 56%;
}

.hero-button a i {
    font-size: 22px;
    position: relative;
    top: 3px;
    margin-left: 4px;
}

.hero-video-icon a {
    display: inline-block;
    width: 52px;
    height: 52px;
    border: 1px solid #2871ff;
    border-radius: 50%;
    line-height: 52px;
    text-align: center;
    color: #2871ff;
    margin-left: 20px;
    position: relative;
    z-index: 1;
}

.hero-video-icon a:before {
    position: absolute;
    content: "";
    width: 35px;
    height: 35px;
    left: 7px;
    top: 7px;
    background-color: #2871ff;
    z-index: -1;
    border-radius: 50px;
    -webkit-animation: ripple 1.6s ease-out infinite;
    -moz-animation: ripple 1.6s ease-out infinite;
}
@keyframes ripple {
  0%, 35% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 1; }
  50% {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.8; }
  100% {
    opacity: 0;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }

.video-button i {
    display: inline-block;
    background: #ff3838;
    color: #fff;
    width: 65px;
    height: 65px;
    text-align: center;
    line-height: 65px;
    font-size: 25px;
    border-radius: 50px;
}
.hero-video-icon span {
    font-size: 16px;
    color: #1d263a;
    font-weight: 700;
    margin-left: 17px;
    border-bottom: 1px solid #1d263a;
}
.slider-video-button a {
    display: inline-block;
    width: 55px;
    height: 55px;
    line-height: 55px;
    background: #fff;
    text-align: center;
    border-radius: 50%;
    color: #2488f2;
    margin-left: 20px;
    -webkit-animation: ripple-white 1s linear infinite;
    animation: ripple-blue 1s linear infinite;
} 
@-webkit-keyframes ripple-blue {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3);
        box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3)
    }
    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0)
    }
}

@keyframes ripple-blue {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3);
        box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3)
    }
    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3), 0 0 0 30px rgba(255,255,255, 0);
        box-shadow: 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3), 0 0 0 30px rgba(255,255,255, 0)
    }
}

.header-menu ul li a i {
    font-size: 10px;
    margin-left: 10px;
}


.hero-left {
    position: relative;
    right: -53px;
}
.hero-counter-box {
    text-align: center;
    background-color: #ffffff;
    border: 1px solid rgba(40,113,255,0.15);
    display: inline-block;
    padding: 40px 72px 35px;
    border-radius: 50px 5px 5px 5px;
    position: absolute;
    bottom: 0;
    left: 66px;
}
.counter-icon {
    margin-bottom: 8px;
}
.hero-counter-number-content h1 {
    display: inline-block;
    font-size: 48px;
    color: #1d263a;
    font-weight: 900;
    font-family: "Mulish";
}
.hero-counter-number-content h1 span {
    color: #2871ff;
}
.hero-counter-title {
    margin-top: 10px;
}
.hero-counter-title p {
    margin: -4px;
    font-size: 17px;
}

.hero-shape {
    position: absolute;
    top: 44%;
    left: -16%;
}




/*================================
 <--Start  Dreamhub Personal Advisor    Sention Title   Css-->
=================================*/
.section-title {
    margin-bottom: 45px;
}
.section-sub-title h4 {
    font-size: 16px;
    color: #2871ff;
    font-weight: 700;
    text-transform: uppercase;
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
    display: inline-block;
}

.section-sub-title h4:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    background: url(../image/icon.png);
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
}

.section-main-title h1 {
    font-size: 45px;
    font-weight: 800;
    font-family: "Mulish";
    line-height: 64px;
}

/*================================
 <--Start  Dreamhub Personal Advisor   About Sention   Css-->
=================================*/
.about-section {
    padding: 120px 0  120px;
    background: #fafbfc;
}

.about-section.style-Two {
    background: #b3cfeb21;
}

.about-section .section-main-title {
    margin-bottom: 17px;
}

.about-section .section-description p {
    width: 94%;
}

.about-section .section-title {
    margin-bottom: 0;
}

.about-left {
    position: relative;
    margin-left: 33px;
}
.about-shape {
    position: absolute;
    bottom: -11px;
    right: 90px;
}

.dance5 {
    -webkit-animation: dance 2s alternate infinite;
    animation: dance 2s alternate infinite;
  }
  
  @keyframes dance {
    0% {
      -webkit-transform: scale(0.5);
    }
  
    100% {
      -webkit-transform: scale(1.2);
    }
  }
  .dance6 {
    -webkit-animation: dance 1s alternate infinite;
    animation: dance 1s alternate infinite;
  }
  
  @keyframes dance {
    0% {
      -webkit-transform: scale(0.8);
    }
  
    100% {
      -webkit-transform: scale(1.2);
    }
  }

.about-button a {
    display: inline-block;
    font-size: 16px;
    color: #1d263a;
    font-weight: 700;
    font-family: "Nunito";
    border: 1px solid #2e75ff;
    padding: 10px 31px;
    border-radius: 5px;
    position: relative;
    margin-top: 20px;
    overflow: hidden;
    z-index: 1;
}

.about-button a:hover{
    color: #ffff;
}

.about-button a:before {
    transition: .5s;
    border: 1px solid #2871ff;
    position: absolute;
    content: "";
    left: 0;
    top: -2px;
    height: 0%;
    width: 100%;
    background: #2871ff;
    z-index: -1;
}
.about-button a:after {
    border: 1px solid #2871ff;
    position: absolute;
    content: "";
    left: 0;
    bottom: -4px;
    height: 0%;
    width: 100%;
    background: #2871ff;
    z-index: -1;
    transition: .5s;
}

.about-button a:hover:after {
    height: 56%;
}

.about-button a:hover:before {
    height: 56%;
}

.about-button a i {
    font-size: 22px;
    position: relative;
    top: 4px;
    margin-left: 4px;
}



/*================================
 <--Start Personal Advisor  Service Section Css-->
=================================*/

.service-section {
    padding: 113px 0 120px;
}

.service-single-box {
    border-radius: 5px;
    box-shadow: 0 9px 60px rgba(228,229,238,0.5);
    background-color: #ffffff;
    margin-bottom: 30px;
    overflow: hidden;
}

.service-thumb {
    z-index: 1;
}

.service-content {
    padding: 0 35px 0;
    position: relative;
    z-index: 1;
}

.service-content:before {
    position: absolute;
    content: "";
    right: -60px;
    bottom: -127px;
    width: 110px;
    height: 110px;
    border-radius: 60px;
    background-color: #2871ff;
    transition: .5s;
    z-index: -1;
}

.service-single-box:hover .service-content:before {
    width: 100%;
    height: 183%;
    bottom: -68px;
    border-radius: 5px;
    right: 0;
}

.service-title h3 {
    font-size: 25px;
    color: #1d263a;
    margin-bottom: 12px;
    transition: .5s;
}


.service-description p {
    font-size: 16px;
    line-height: 27px;
    color: #616161;
    margin-bottom: 10px;
    transition: .5s;
}

.service-button a {
    font-size: 15px;
    color: #1d263a;
    font-weight: 700;
    font-family: "Mulish";
    display: inline-block;
}

.service-button a i {
    position: relative;
    top: 4px;
    font-size: 22px;
    margin-left: 4px;
}
/*all hober*/
.service-single-box:hover .service-title h3{
    color: #fff;
}
.service-single-box:hover .service-description p{
    color: #fff;
}
.service-single-box:hover .service-button a{
    color: #fff;
}


/*================================
 <--Start Personal Advisor  Brand Section   Css-->
=================================*/
.brand-section {
    background: #fafbfc;
    padding: 120px 0 120px;
    text-align: center;
}

.brand-section.style-Two {
    background: #fafbfc33;
}

.brand-section .owl-carousel .owl-item img {
    display: inline-block;
}
/*================================
 <--Start Personal Advisor  Testimonial Section   Css-->
=================================*/
.testimonial-section {
    padding: 120px 0 410px;
}

.testimonial-text {
    position: relative;
    margin-bottom: 40px;
}

.testimonial-text:before {
    content: "";
    position: absolute;
    left: 9%;
    top: 100%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-top: 20px solid #fafbfc;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    transition: .5s;
    background: radial-gradient(black, transparent);
    transition: .5s;
}

.testimonial-single-box:hover .testimonial-text:before{
    border-top: 20px solid #2871ff;
}

.testimonial-text p {
    font-size: 16px;
    line-height: 27px;
    color: #1e1f24;
    font-weight: 600;
    font-style: italic;
    background: #fafbfc;
    padding: 50px 60px 45px 80px;
    border-radius: 5px;
    transition: .5s;
}


.testimonial-single-box:hover .testimonial-text p {
    background: #2871ff;
    color: #fff;
}

.testimonial-single-box:hover .testi-icon img {
    filter: brightness(0)invert(1);
}

/*testi ivon*/
.testi-icon {
    left: 22px;
    position: absolute;
    top: 51px;
}

.testi-icon img {
    filter: brightness(1)invert(0);
    transition: .5s;
}

.testimonial-thumb {
    float: left;
    margin-right: 20px;
    margin-left: 20px;
}
/*testi title*/
.testi-title {
    top: 12px;
    position: relative;
}
.testi-title h3 {
    font-size: 17px;
    color: #1e1f24;
    font-weight: 700;
}
.testi-title p {
    font-size: 14px;
    color: #616161;
    font-weight: 400;
    margin-top: 2px;
}


/*owl dots*/
.testimonial-section .owl-dots {
    text-align: center;
    position: absolute;
    right: 0;
    bottom: -84px;
    left: 0;
    cursor: pointer;
}

.testimonial-section .owl-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    border: 1px solid #616161;
    margin-right: 10px;
}

.testimonial-section .owl-dot.active {
    background: #2871ff;
    width: 10px;
    height: 10px;
}

/*================================
 <--Start  Dreamhub Personal Advisor   Counter Sention   Css-->
=================================*/
.counter-section {
    padding: 120px 0 110px;
    background: #fafbfc;
}
.row.counter_bg {
    position: relative;
    background: url(../image/counter.png);
    background-repeat: no-repeat;
    background-position: center center;
    padding: 50px 0 50px;
    background-size: cover;
    filter: drop-shadow(0 0 30px rgba(229,230,236,0.4));
    margin: 0;
    margin-top: -336px;
}

.row.counter-right .section-main-title h1 {
    line-height: 58px;
    color: #fff;
}

.counter-left {
    position: relative;
    bottom: -50px;
    right: -85px;
}

.row.counter-right {
    position: relative;
    padding-right: 92px;
}

.counter-sinlge-box {
    border: 2px solid #ffffff85;
    padding: 39px 0 40px;
    text-align: center;
    margin-bottom: 30px;
}

.conter-nember h1 {
    font-size: 45px;
    color: #fefeff;
    font-weight: 800;
    display: inline-block;
}

.counter-title span {
    display: inline-block;
    color: #ffffff;
    font-weight: 700;
    font-family: "Mulish";
    margin-top: 4px;
}



/*counter upper*/
.row.counter_upper {
    margin-top: 105px;
}

.counter-title h1 {
    font-size: 45px;
    line-height: 55px;
    color: #1d263a;
    font-weight: 800;
}

.counter-description p {
    width: 88%;
}

.counter-button {
    text-align: right;
}

.counter-button a {
    display: inline-block;
    font-size: 16px;
    line-height: 27px;
    color: #1d263a;
    font-weight: 700;
    border: 1px solid #2871ff;
    padding: 10px 32px;
    border-radius: 5px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.counter-button a:hover{
    color: #ffff;
}

.counter-button a:before {
    transition: .5s;
    border: 1px solid #2871ff;
    position: absolute;
    content: "";
    left: 0;
    top: -2px;
    height: 0%;
    width: 100%;
    background: #2871ff;
    z-index: -1;
}

.counter-button a:after {
    border: 1px solid #2871ff;
    position: absolute;
    content: "";
    left: 0;
    bottom: -4px;
    height: 0%;
    width: 100%;
    background: #2871ff;
    z-index: -1;
    transition: .5s;
}

.counter-button a:hover:after {
    height: 56%;
}

.counter-button a:hover:before {
    height: 56%;
}

.counter-button a i {
    font-size: 22px;
    position: relative;
    top: 3px;
    margin-left: 4px;
}






/*================================
 <--Start Personal Advisor  Footer Section   Css-->
=================================*/
.footer-section {
    background: #131823;
    padding: 120px 0 32px;
    position: relative;
}

.row.footer_bg {
    position: relative;
    margin-bottom: 106px;
}

.row.footer_bg:before {
    position: absolute;
    content: "";
    left: 13px;
    bottom: -80px;
    height: 1px;
    width: 98%;
    background: #fff;
    opacity: 0.149;
}

/*footer-widget-title*/
.footer-widget-title h2 {
    font-size: 22px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 47px;
}

.footer-widget-description p {
    margin-top: 40px;
    opacity: 0.702;
    line-height: 25px;
    color: #ffffff;
    width: 81%;
}

.footer-widget-follow ul li {
    list-style: none;
    display: inline-block;
}

.footer-widget-follow ul li a {
    display: inline-block;
    color: #ffffffa8;
    height: 25px;
    width: 25px;
    line-height: 25px;
    background: #ffffff2b;
    border-radius: 2px;
    text-align: center;
    margin-right: 10px;
    margin-top: 10px;
    transition: .5s;
    position: relative;
    z-index: 1;
    overflow: hidden;
    font-size: 14px;
}

.footer-widget-follow a:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: #2871ff;
    border-radius: 2px;
    z-index: -1;
    transition: .5s;
}

.footer-widget-follow a:hover:before {
    width: 100%;
}
.footer-widget-follow ul li a:hover {
    background: #2871ff;
    color: #fff;
}

/*company widget info*/
.company-widget-info ul li {
    list-style: none;
}
.company-widget-info ul li a {
    opacity: 0.702;
    color: #ffffff;
    display: inline-block;
    margin-bottom: 14px;
}

.company-widget-info ul li a:hover {
    color: #2871ff;
}

.company-widget-info-list ul li {
    list-style: none;
}

/*company widget info list*/
.company-widget-info-list ul li a {
    display: inline-block;
    color: #fff;
    opacity: 0.702;
    margin-bottom: 14px;
    transition: .5s;
}

.company-widget-info-list ul li a:hover {
    color: #2871ff;
    opacity: 1;
}
/*footer widget des*/
.footer-widget-des p {
    color: #fff;
    opacity: 0.702;
}

.footer-widget-button a {
    display: inline-block;
    font-size: 15px;
    color: #ffffffad;
    text-align: center;
    border: 1px solid #ffffffad;
    padding: 10px 36px;
    border-radius: 5px;
    margin-top: 15px;
    background: transparent;
    overflow: hidden;
    z-index: 1;
    position: relative;
}

.footer-widget-button a:hover{
    color: #ffff;
    border: 1px solid #2871ff;
}

.footer-widget-button a:before {
    transition: .5s;
    border: 1px solid #2871ff;
    position: absolute;
    content: "";
    left: 0;
    top: -2px;
    height: 0%;
    width: 100%;
    background: #2871ff;
    z-index: -1;
}

.footer-widget-button a:after {
    border: 1px solid #2871ff;
    position: absolute;
    content: "";
    left: 0;
    bottom: -4px;
    height: 0%;
    width: 100%;
    background: #2871ff;
    z-index: -1;
    transition: .5s;
}

.footer-widget-button a:hover:after {
    height: 56%;
}

.footer-widget-button a:hover:before {
    height: 56%;
}


.footer-widget-button a i {
    font-size: 22px;
    position: relative;
    top: 4px;
    margin-left: 4px;
}



/*footer bottom*/
.footer-bottom-content p {
    opacity: 0.702;
    font-size: 14px;
    color: #ffffff;
    font-weight: 300;
    margin: 0;
}

.footer-bottom-content p span {
    color: #0055ff;
}


.footer-bottom-right {
    text-align: right;
}

.footer-bottom-right a {
    display: inline-block;
    opacity: 0.702;
    font-size: 14px;
    color: #ffffff;
    font-weight: 300;
    padding-left: 10px;
    transition: .5s;
}

.footer-bottom-right a:hover{
    color: #2871ff;
}




/*
<!-- ============================================================== -->
<!--   Dreamhub Personal Advisor breadcumb-Section -->
<!-- ============================================================== -->*/
.breadcumb-area {
    background: url(../image/bridcumb.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 390px;
    position: relative;
}
.breadcumb-area:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: rgba(23,129,241,0.7);
}
.breacumb-content {
    position: relative;
}
.breadcumb-title h1 {
    font-size: 70px;
    color: #fff;
    margin-bottom: 4px;
    font-weight: 700;
}

.breadcumb-content-text a {
    transition: .5s;
    font-size: 22px;
    line-height: 28px;
    color: #ffffff;
    font-weight: 500;
}
.breadcumb-content-text i {
    color: #fff;
    font-size: 18px;
    margin: 0 5px 0;
}

.breadcumb-content-text span {
    font-size: 22px;
    line-height: 28px;
    color: #ffffff;
    font-weight: 500;
}



/*================================
 <--Start Personal Advisor  Team Section   Css-->
=================================*/
.team-section {
    padding: 110px 0 120px;
    background: #fafcff;
}

.team-section .section-description p {
    width: 45%;
}

.single-team-box {
    box-shadow: 0 0 30px rgba(229,230,236,0.4);
}

.team-thumb {
    position: relative;
} 

.team-thumb img {
    width: 100%;
} 

.team-social-icon {
    position: absolute;
    bottom: 28px;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    opacity: 0;
    transition: .5s;
}

.team-social-icon ul li {
    list-style: none;
    display: inline-block;
}

.team-social-icon ul li a {
    overflow: hidden;
    width: 40px;
    height: 40px;
    border-radius: 30px;
    filter: drop-shadow(0 0 0px rgba(0,0,0,0.35));
    background-color: #ffffff;
    display: inline-block;
    line-height: 40px;
    font-size: 16px;
    margin-right: 5px;
    position: relative;
    color: #1781f1;
    z-index: 1;
    transition: .5s;
}

.team-social-icon ul li a:hover{
    color: #fff;
}

.team-social-icon ul li a::before {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: #1781f1;
    border-radius: 15px;
    transition: .5s;
    z-index: -1;
}

.team-social-icon ul li a:hover:before {
    width: 100%;
    left: 0;
}

.team-content {
    padding: 25px 0 20px;
    text-align: center;
}

.team-name-title h3 {
    font-size: 22px;
    margin-bottom: 3px;
}
.team-name-title span {
    font-size: 14px;
}

/*all hover*/
.single-team-box:hover .team-social-icon {
    bottom: 0px;
    opacity: 1;
}

/*================================
 <--Start Personal Advisor  Feature Section   Css-->
=================================*/
.feature-section {
    padding: 110px 0 87px;
} 

.feature-single-box {
    background: #fafcff;
    padding: 40px 70px 15px;
    position: relative;
    z-index: 1;
    margin-bottom: 30px;
    transition: .5s;
    border-radius: 10px;
    text-align: center;
}

.feature-single-box:before {
    transition: .5s;
    z-index: -1;
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    transform: scale(0);
    background: #2871ff;
    height: 100%;
    width: 100%;
    border-radius: 10px;
}

.feature-single-box:hover:before {
    transform: scale(1);
} 

.feature-icon {
    z-index: 1;
    margin-bottom: 25px;
    background: #2871ff;
    height: 90px;
    width: 90px;
    line-height: 90px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    overflow: hidden;
}

.feature-icon:before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #fff;
    content: "";
    transform: skew(-90deg) translateY(100%);
    transform-origin: left;
    transform-style: preserve-3d;
    transition: all 900ms ease 100ms;
    transition-property: all;
    transition-duration: 900ms;
    transition-timing-function: ease;
    transition-delay: 100ms;
    z-index: -1;
}

.feature-icon img {
    filter: brightness(0)invert(1);
    transition: .5s;
}

.feature-title h3 {
    font-weight: 700;
    margin-bottom: 11px;
    transition: .5s;
    font-size: 25px;
    color: #1d263a;
}

.feature-description p{
    transition: .5s;
}

/*all hover*/
.feature-single-box:hover .feature-title h3 {
    color: #fff;
}

.feature-single-box:hover .feature-description p {
    color: #fff;
}

.feature-single-box:hover .feature-icon img {
    filter: brightness(1)invert(0);
}

.feature-single-box:hover .feature-icon:before {
    transform: skew(0deg) translateY(0);
}




/*================================
 <--Start Personal Advisor  Google Section   Css-->
=================================*/
.mapouter.fixed-height {
    height: 600px;
}

.gmap_canvas {
    width: 100%;
    height: 100%;
}

.mapouter iframe {
    width: 100%;
    height: 100%;
}


/*================================
 <--Start Personal Advisor  Service  Section style Two   Css-->
=================================*/


.service-section.style-Two .service-thumb img {
    width: 100%;
}

.service-section.style-Two .service-single-box {
    padding: 0;
}
.service-section.style-Two .service-content:before {
    display: none;
}

.service-section.style-Two .service-content {
    padding: 35px 40px 30px;
    box-shadow: 0 0 30px rgba(229,230,236,0.4);
}

.service-section.style-Two  .service-button a i {
    margin-left: 232px;
}
.service-section.style-Two .service-button {
    border-top: 1px solid #61616154;
    padding-top: 10px;
    margin-top: 10px;
}

.service-section.style-Two .service-button a:hover {
    color: #2871ff;
}



/*================================
 <--Start Personal Advisor  Service  Details Area   Css-->
=================================*/
.service-detials-area {
    padding: 120px 0 90px;
}
/*widget search*/

.widget_search {
    padding: 30px 30px 30px;
    border-radius: 4px;
    margin-bottom: 30px;
    background: rgba(36,136,242,0.8);
    box-shadow: 0px 0px 70px rgb(0 0 0 / 5%);
}

.service-detials-area .widget_search {
    background: rgba(36,136,242,0.8);
    box-shadow: none;
}

.widget_search form {
    position: relative;
}

.widget_search input {
    border-radius: 4px;
    padding-left: 20px;
    height: 60px;
    width: 100%;
    position: relative;
    color: #232323;
    border: 0;
    outline: 0;
    background: #fff;
}

.widget_search input::placeholder{
    color: #232323;
}

button.icons {
    border: 0;
    font-size: 18px;
    color: #fff;
    padding: 1px 15px;
    position: absolute;
    right: 0;
    top: 0;
    height: 60px;
    width: 60px;
    background: #2488f2;
    border-radius: 0 4px 4px 0;
}

/*widget categories box*/

.service-detials-area .widget-categories-box {
    background: rgba(36,136,242,0.8);
    padding: 42px 40px 25px;
    border-radius: 5px;
    margin-bottom: 30px;
    box-shadow: none;
}

.widget-categories-box {
    background: rgba(36,136,242,0.7);
    padding: 42px 40px 25px;
    border-radius: 5px;
    margin-bottom: 30px;
    box-shadow: 0px 0px 70px rgb(0 0 0 / 5%);
}

/*title*/

.categories-title h4 {
    font-size: 24px;
    font-weight: 700;
    line-height: 24px;
    border-bottom: 2px solid rgb(255 255 255 / 44%);
    padding: 0px 0 15px;
    margin: 0 0 30px;
    position: relative;
    padding-left: 10px;
    color: #fff;
}

.categories-title h4:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 24px;
    width: 3px;
    background: #2488f2;
}
/*categories menu*/

.widget-categories-menu ul {
    display: block;
}

.widget-categories-menu ul li {
    display: block;
    list-style: none;
    margin-bottom: 15px;
    background: #fff;
    padding: 16px 20px 16px;
    border-radius: 4px;
    transition: .5s;
    border: 2px solid #fff;
    position: relative;
    z-index: 1;
}

.widget-categories-menu ul li:hover {
    border: 2px solid #2488f2;
}

.widget-categories-menu ul li:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: #2488f2;
    transition: .5s;
    z-index: -1;
}

.widget-categories-menu ul li:hover:before{
    width: 100%;
}

.widget-categories-menu ul li a {
    display: block;
    color: #2488f2;
    transition: .5s;
}
.widget-categories-menu ul li a span {
    display: inline-block;
    float: right;
    background: #2488f2;
    height: 22px;
    width: 22px;
    font-size: 12px;
    text-align: center;
    margin-top: 6px;
    color: #fff;
    line-height: 22px;
    transition: .5s;
}

.widget-categories-menu ul li:hover a span {
    background: #fff;
    color: #0E1317;
}

.widget-categories-menu ul li:hover a {
    color: #fff;
}

.pdf-button a {
    display: block;
    background: #2488f2;
    padding: 15px 30px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}

.pdf-button a i {
    float: right;
    font-size: 20px;
    margin-top: 2px;
}

/* Sidber Recent Post */

.sidber-widget-recent-post {
    margin-bottom: 20px;
    background: #fff;
    overflow: hidden;
}

.sidber-widget-recent-post .recent-widget-content {
    padding-top: 20px;
}
.recent-widget-content a {
    color: #2488f2 !important;
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    display: block;
    line-height: 26px;
    transition: .5s;
    margin-bottom: 7px;
}
.recent-widget-thumb {
    float: left;
    margin-right: 25px;
}

.sidber-widget-recent-post .recent-widget-content a {
    color: #2488f2;
    font-size: 18px;
}
.sidber-widget-recent-post .recent-widget-content span {
    color: #2488f2;
}
.sidber-widget-recent-post .recent-widget-content span i {
    margin-right: 7px;
    color: #2488F2;
}

/* Sidber Achivement CSS */

.widget-achivement ul li {
    list-style: none;
    margin-bottom: 6px;
}

.widget-achivement ul li a i {
    font-size: 17px;
    margin-right: 3px;
}

.widget-achivement ul li a {
    font-weight: 600;
    transition: .5s;
    color: #fff;
}

.widget-achivement ul li a span {
    float: right;
}

.widget-achivement ul li a:hover {
    color: #000;
}

/* Sidber Widget Gallery CSS */

.widget-gallery {
    overflow: hidden;
}

.widget-gallery-thumb {
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}

/* Sidber Widget Tags CSS */

.widget-tags a {
    display: inline-block;
    border: 2px solid #fff;
    padding: 3px 20px;
    margin: 4px 3px;
    border-radius: 2px;
    color: #fff;
    font-weight: 500;
    position: relative;
    transition: .5s;
    z-index: 1;
}

.widget-tags a:before {
    position: absolute;
    content: "";
    left: -2px;
    top: 0px;
    height: 102%;
    width: 0%;
    background: #074783;
    z-index: -1;
    border-radius: 3px;
    transition: .5s;
}

.widget-tags a:hover{
    color: #fff;
    border-color: #2488f2;
}

.widget-tags a:hover:before{
    width: 102%;
}

/* Service Details Content CSS */

.service-details-main-title {
    padding: 20px 0 18px;
}

.service-details-main-title h1 {
	font-size: 50px;
	font-weight: 700;
}

.service-details-video-thumb {
    position: relative;
    padding-top: 20px;
}
.video-icon {
    left: 50%;
    position: absolute;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    padding-top: 8px;
}
.video-icon a i {
    height: 80px;
    line-height: 80px;
    width: 80px;
    display: inline-block;
    background: #fff;
    border-radius: 50%;
    font-size: 20px;
    color: #074883;
    text-align: center;
    -webkit-animation: ripple-white 1s linear infinite;
    animation: ripple-blue 1s linear infinite;
} 
@-webkit-keyframes ripple-blue {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3);
        box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3)
    }
    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0)
    }
}

@keyframes ripple-blue {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3);
        box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3)
    }
    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3), 0 0 0 30px rgba(255,255,255, 0);
        box-shadow: 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3), 0 0 0 30px rgba(255,255,255, 0)
    }
}



.service-details-overview-title {
    padding: 22px 0 15px;
}

.service-details-overview-title h2 {
    font-size: 30px;
}

.service-details-overview-list ul li {
    list-style: none;
    position: relative;
    padding-left: 30px;
    padding-right: 12px;
    padding-bottom: 12px;
}

.service-details-overview-list ul li::before {
    position: absolute;
    content: "";
    left: 0;
    top: 9px;
    height: 12px;
    width: 12px;
    background: #2488f2;
    border-radius: 50%;
}

.service-details-choose-us {
    padding-bottom: 10px;
}

.service-details-choose-us-title {
    padding: 5px 0 15px;
}

.service-details-choose-us-title h2 {
    font-size: 30px;
}

.service-details-box {
    background: rgba(36,136,242,0.8);
    padding: 30px 30px 10px;
    margin-bottom: 30px;
    position: relative;
}

.service-details-number {
    position: absolute;
    right: 60px;
}

.service-details-number h2 {
    -webkit-text-stroke-width: 1px;
    color: transparent;
    -webkit-text-stroke-color: rgba(255,255,255,0.2);
    font-size: 48px;
    font-weight: 600;
    font-family: "Rubik";
}

.service-details-icon i {
    font-size: 50px;
    color: #fff;
}

.service-details-content h2 {
    font-size: 20px;
    padding-bottom: 10px;
    padding-top: 10px;
    color: #fff;
}

.service-details-box .service-details-content p {
    color: #fff;
}

.service-details-thumb img {
    width: 100%;
}

.service-details-video-thumb-inner img {
    width: 100%;
}


/*================================
 <-- Personal Advisor   Blgo   Section Css-->
==================================*/
.blog-section {
    padding: 120px 0 90px;
}

.blog-section.tow {
    padding: 120px 0 90px;
}

.blog-section.tow .blog-content {
    padding: 25px 42px 30px 30px;
}

/*single blog box*/
.single-blog-box {
    margin-bottom: 30px;
}
.blog-thumb {
    overflow: hidden;
}
.blog-thumb img {
    width: 100%;
    transform: scale(1.1);
    transition: .5s;
}
.single-blog-box:hover .blog-thumb img {
    transform: scale(1.2);
}
/*single content*/
.blog-content {
    background: #fff;
    padding: 25px 51px 30px 31px;
    box-shadow: 0 5px 20px rgb(88 82 174 / 10%);
}
/* blog meta*/
span.meta-blog-date {
    margin-right: 10px;
}
.meta-blog span i {
    margin-right: 10px;
    color: #2871ff;
}
/* blog title*/
.blog-title {
    margin: 14px 0 21px;
}
.blog-title h3 a {
    display: inline-block;
    color: #232323;
    font-size: 22px;
    font-weight: 800;
}
/* blog button*/
.blog-button {
    border-top: 1px solid rgba(56,66,251,0.300);
    padding-top: 30px;
}
.blog-button a {
    padding: 10px 40px;
    display: inline-block;
    border: 1px solid #2871ff;
    color: #2871ff;
    position: relative;
    z-index: 1;

}
.blog-button a:hover{
    color: #fff;
}
.blog-button a:before {
    position: absolute;
    right: 0;
    top: 0;
    content: "";
    height: 100%;
    width: 0;
    background: #2871ff;
    transition: .5s;
    z-index: -1;
    
}
.blog-button a:hover:before{
    width: 100%;
    left: 0;

}
.single-blog-box:hover .blog-title h3 a{
    color: #2871ff;
}

/*================================
 <-- Personal Advisor   Blgo Details  Area Css-->
==================================*/
.blog-detials-area {
    padding: 120px 0 120px;
}

.blog-grid-area {
    padding: 120px 0 90px;
}

.blog-details-main {
    background: #fff;
    padding: 30px;
    box-shadow: 0px 0px 70px rgba(0, 0, 0, 0.05);
}
.blog-details-meta {
    background: #2488f2;
    padding: 16px 30px;
}

.blog-details-meta span {
    margin-right: 30px;
    color: #fff;
}

.blog-details-meta span i {
    color: #fff;
    padding-right: 5px;
}

.blog-details-content {
    padding: 20px 0 18px;
}

.blog-details-content h2 {
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 15px;
}

.blog-details-thumb img {
    width: 100%;
}

.blog-details-des {
    padding: 30px 0 10px;
}

.blog-details-blockquote {
    background: rgba(36,136,242,0.8);
    padding: 40px 38px 26px;
    position: relative;
    margin-bottom: 10px;
}

.blog-details-blockquote blockquote {
    font-size: 18px;
    color: #fff;
}
.blog-details-video-thumb {
    margin-top: 30px;
    position: relative;
}

.blog-details-video-thumb img {
    width: 100%;
}

.blog-details-video-thumb-inner img {
    width: 100%;
}

.blog-details-content h3 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 15px;
}

.blog-details-content-list p i {
    font-size: 14px;
    height: 32px;
    width: 32px;
    border: 1px solid #ddd;
    text-align: center;
    line-height: 31px;
    border-radius: 100%;
    margin-right: 15px;
    color: #2488f2;
}

.blog-detials-area .blog-content {
    padding: 20px 30px 38px;
}

.blog-details-button a {
    display: inline-block;
    border: 2px solid #2488f2;
    padding: 3px 20px;
    position: relative;
    z-index: 1;
    color: #fff;
    border-radius: 3px;
    margin-bottom: 10px;
}

.blog-details-button a:before {
    position: absolute;
    content: "";
    left: -2px;
    top: -1px;
    height: 104%;
    width: 104%;
    background: #2488f2;
    z-index: -1;
    border-radius: 3px;
    transition: .5s;
}

.blog-details-button a.active {
    background: transparent;
    transition: .5s;
    margin-left: 10px;
    color: #2488f2;
}
.blog-details-button a.active:before{
    background: transparent;
}

.blog-details-button a.active:hover:before{
    background: #2488f2;
}

.blog-details-button a.active:hover{
    color: #fff;
    border-color: #2488f2;
}

.blog-details-social {
    text-align: right;
}

.blog-details-social a {
    display: inline-block;
    border: 2px solid #2488f2;
    height: 40px;
    width: 40px;
    line-height: 38px;
    text-align: center;
    border-radius: 100%;
    font-size: 14px;
    transition: .5s;
    margin-left: 5px;
    color: #074783;
}

.blog-details-social a:hover{
    background: #2488f2;
    border-color: #2488f2;
    color: #fff;
}

/* Blog Details Author */

.blog-details-author {
    border-top: 2px solid rgba(255,255,255,0.2);
    padding-top: 40px;
    margin-top: 32px;
}

.blog-details-author-inner {
    background: #2488f2;
    padding: 30px 30px 70px;
}

.blog-details-author-thumb {
    float: left;
    margin-right: 30px;
}

.blog-details-author-content h2 {
    font-size: 22px;
    margin-top: 0;
    margin-bottom: 12px;
    color: #ffff;
}
.blog-details-author-content p {
    color: #ffffffbd;
}

/* Comment CSS */

.blog-details-comment {
    margin-bottom: 10px;
    position: relative;
}

.blog-details-comment-thumb {
    float: left;
    margin-right: 30px;
}

.blog-details-comment-content {
    overflow: hidden;
}

.blog-details-comment-content h2 {
    font-size: 18px;
    margin-top: 0;
}

.blog-details-comment-content span {
    font-size: 14px;
    margin-bottom: 6px;
    display: block;
}

.blog-details-comment-reply {
    position: absolute;
    right: 25px;
}

.blog-details-comment-reply a {
    background: #2488f2;
    padding: 3px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    border-radius: 2px;
    display: inline-block;
}

.blog-details-comment.reply {
    margin-left: 70px;
    padding-top: 35px;
    border-top: 2px solid rgba(255,255,255,0.2);
}

/* Blog Details Contact */

.blog-details-contact {
    border-top: 2px solid rgba(255,255,255,0.2);
    margin: 12px 10px 10px;
    padding-top: 8px;
}
/*input-box*/
.input-box input {
    width: 100%;
    height: 50px;
    border: 1px solid #0202021a;
    margin-bottom: 30px;
    padding: 0 20px;
    outline: 0;
    border-radius: 3px;
}

.input-box textarea {
    width: 100%;
    height: 207px;
    outline: 0;
    border: 1px solid  #0202021a;
    padding: 22px 20px 0;
    border-radius: 3px;
}

/*input button*/
.input-button {
    margin-top: 27px;
}
.input-button button {
    display: inline-block;
    padding: 13px 39px;
    outline: 0;
    border: 0;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 1px;
    font-weight: 500;
    background: #2488f2;
    border: 1px solid #2488f2;
    transition: .5s;
}
.input-button button:hover {
    border: 1px solid #2488f2;
    color: #2488f2;
    background: none;
}
.input-button button i {
    margin-left: 10px;
}

/*================================
 <--  Personal Advisor  Faq Section Css-->
==================================*/
.faq-section {
    background: url(../image/faq-banner.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 120px 0 120px;
    position: relative;
    z-index: 1;
    background-attachment: fixed;
}

.faq-section:before {
    position: absolute;
    content: "";
    z-index: -1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(36,136,242,0.5);
}
.faq-section .section-title {
    margin-bottom: 37px;
}
.faq-section .section-main-title h1 {
    color: #fff;
}

/*accordion*/
.accordion li {
    list-style: none;
    padding: 2px 0px 15px;
    position: relative;
    z-index: 1;
}

.accordion li:before {
    position: absolute;
    content: "";
    z-index: -1;
    right: 20px;
    top: 16px;
    width: 28px;
    height: 28px;
    line-height: 28px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.10196078431372549);
    border: 1px solid rgba(36,136,242,0.7);
}

.active .accordion li:before {
    background-color: rgba(255, 255, 255, 0.10196078431372549) !important;
}

.accordion li a {
    position: relative;
    width: 100%;
    display: block;
    cursor: pointer;
    font-weight: 400;
    font-size: 18px;
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.050980392156862744);
    border: 1px solid #2871ff;
    padding: 14px 20px 14px 28px;
    border-radius: 30px;
    z-index: 1;
}

.accordion li p {
    display: none;
    font-size: 16px;
    color: #fff;
    padding: 25px 0 10px 30px;
    margin: 0;
}

.accordion a:before {
    width: 2px;
    height: 10px;
    background: #fff;
    position: absolute;
    right: 32px;
    content: " ";
    top: 22px;
    transform: rotate(0deg);
    transition: all 0.2s ease-in-out;
}

.accordion a:after {
    width: 10px;
    height: 2px;
    background: #fff;
    position: absolute;
    right: 28px;
    content: " ";
    top: 26px;
    transition: all 0.2s ease-in-out;
}


.faq-section  a.active {
    color: #fff !important;
    border: 1px solid #2871ff!important;
    background: #2871ff!important;
}
.accordion li a span {
    position: relative;
    z-index: 1;
}


/*contact form bg*/

.contract-form-bg {
    padding: 15px 35px 40px;
    background: #fff;
    border-radius: 3px;
    width: 430px;
    position: relative;
    z-index: 1;
    left: 100px;
}

.contract-form-bg:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 147px;
    width: 100%;
    background: #2871ff;
    z-index: -1;
    border-radius: 3px 3px 0 0;
}

.contract-form-bg:after {
    position: absolute;
    content: "";
    top: 137px;
    left: 0;
    height: 100%;
    width: 100%;
    background: url(../image/faq-contact-shape.png);
    z-index: -1;
    background-repeat: no-repeat;
    background-size: contain;
}

.contact-form-title {
    padding: 0 0 100px;
}
.contact-form-title h4 {
    font-size: 30px;
    line-height: 50px;
    font-weight: 600;
    color: #fff;
}
.contact-form-title p {
    color: #fff;
    font-size: 18px;
    padding: 10px 0 0;
}

.contract-form-bg .form_box input {
    width: 100%;
    height: 50px;
    padding-left: 25px;
    background: #fafcff;
    border-radius: 30px;
    color: #232323;
    border: 1px solid rgba(36,136,242,0.7);
    transition: .5s;
    margin-bottom: 20px;
    outline: 0;
}

.contract-form-bg .form_box textarea {
    width: 100%;
    background: #fafcff;
    padding-left: 25px;
    padding-top: 20px;
    height: 135px;
    border: 1px solid rgba(36,136,242,0.7);
    border-radius: 30px;
    color: #232323;
    transition: .5s;
    outline: 0;
}

.contract-form-bg .quote_button {
    text-align: center;
    margin-top: 20px;
}
.contract-form-bg .quote_button button.btn {
    color: #fff;
    background: #2871ff;
    padding: 13px 102px;
    border-radius: 30px;
    border: 1px solid transparent;
    position: relative;
    z-index: 1;
    overflow: hidden;
    transition: .5s;
}

.quote_button button.btn:hover{
    color: #2871ff;
}
.quote_button button.btn:before {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    background: #fff;
    height: 100%;
    width: 0%;
    border: 1px solid #2871ff;
    z-index: -1;
    border-radius: 30px;
    transition: .5s;
}

.quote_button button.btn:hover:before {
    left: 0;
    width: 100%;
}


/*================================
 <--Start Personal Advisor  Case Study Section   Css-->
=================================*/

.case-study-section {
    padding: 115px 0 110px;
}
.case-study-single-box {
    overflow: hidden;
    position: relative;
    transition: .5s;
}
.case-study-thumb {
    position: relative;
	transition:.5s

}
.case-study-thumb {
    transform: scale(1.04);
}

.case-study-thumb::after {
    position: absolute;
    content: "";
    background: rgba(12,90,219,0.85);
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    opacity: 0;
    z-index: 1;
	transition:.5s;
}
.case-study-single-box:hover .case-study-thumb::after{
	opacity:1;
}

.case-study-thumb img {
    width: 100%;
}

.case-study-content {
    z-index: 1;
    transform: translateY(-50%);
    text-align: center;
    position: absolute;
    top: 70%;
    left: 0;
    right: 0;
    background: #fff;
    width: 80%;
    margin: auto;
    padding: 20px 10px;
    border-radius: 5px;
    opacity: 0;
    transition: .5s;
}



.case-study-title h3 a {
    font-size: 22px;
    font-weight: 800;
    display: inline-block;
}


.case-study-section .owl-dots {
    text-align: center;
    position: relative;
    right: 0;
    left: 0;
    cursor: pointer;
    margin-top: 25px;
}

.case-study-section .owl-dot {
    width: 30px;
    height: 5px;
    line-height: 30px;
    background: #ccc;
    display: inline-block;
    border-radius: 30px;
    margin-right: 10px;
    transition: .5s;
}
.case-study-section .owl-dot.active {
    background: #2871ff;
    width: 40px;
}

/*all hover*/
.case-study-single-box:hover .case-study-content{
    opacity: 1;
    top: 50%;
}

.portfolio-detials-area {
    padding: 95px 0 100px;
}
.portfolio-details-main-title {
    padding: 0 0 18px;
}

.portfolio-details-text {
    padding-bottom: 1px;
}

.portfolio-details-overview-title {
    padding: 22px 0 15px;
}

.portfolio-details-overview-title h2 {
    font-size: 30px;
    font-weight: 700;
}

.portfolio-details-overview-list ul li {
    list-style: none;
    position: relative;
    padding-left: 30px;
    padding-right: 12px;
    padding-bottom: 12px;
}

.portfolio-details-overview-list ul li::before {
    position: absolute;
    content: "";
    left: 0;
    top: 9px;
    height: 12px;
    width: 12px;
    background: #2871ff;
    border-radius: 50%;
}

.portfolio-details-thumb img {
    width: 100%;
}

.portfolio-details-thumb {
    margin-top: 20px;
}

.portfolio-details-clients-title {
    padding-bottom: 10px;
}

.portfolio-details-clients-title h2 {
    font-size: 30px;
    font-weight: 800;
}
/*<!-- ============================================================== -->
<!-- dreamhub  Auto Service Contact Area Css -->
<!-- ============================================================== -->*/
.contact-section {
    padding: 110px 0 156px;
}

.contact-thumb {
    position: relative;
}

.row.contact_bg {
    padding: 43px 23px 50px;
    background: #fff;
    box-shadow: 0px 5px 15px rgb(88 82 174 / 10%);
    position: relative;
}
.row.contact_bg p {
    color: #1d263a;
    margin-bottom: 25px;
    font-size: 20px;
    font-weight: 700;
}
.form_box input {
    border: 1px solid rgba(100,100,100,0.1);
    width: 100%;
    height: 50px;
    padding: 0 18px;
    margin-bottom: 20px;
    outline: 0;
}
.form_box input::placeholder {
    color: rgba(100,100,100,0.8);
}
.form_box textarea {
    width: 100%;
    height: 135px;
    padding: 14px 18px;
    border:  1px solid rgba(100,100,100,0.1);
    outline: 0;
}
.form_box textarea::placeholder {
    color: rgba(100,100,100,0.8);
}
.contact-form-button button {
    background: #2871ff;
    color: #fff;
    border: 1px solid #2871ff;
    padding: 11px 33px;
    margin-top: 35px;
    position: relative;
    z-index: 1;
    transition: .5s;
}
.contact-form-button button:hover {
    color: #2871ff;
}
.contact-form-button button:before {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    background: #fff;
    height: 100%;
    transition: .5s;
    width: 0;
    z-index: -1;
}
.contact-form-button button:hover:before {
    width: 100%;
    left: 0;
}
.contact-form-button button i {
    margin-left: 10px;
}




/*
<!-- ============================================================== -->
<!--  Shop Details  Css -->
<!-- ============================================================== -->*/

.shop-detials {
    padding: 100px 0 70px;
}

.style-three.tab {
    position: relative;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    border: 1px solid rgba(6,36,98,0.1);
    padding: 15px 44px 15px;
    border-radius: 10px;
    margin-right: 15px;
}

.style-three .tabs li a {
    background: inherit;
    color: #fff;
    font-weight: 600;
    display: inline-block;
    outline: none;
    padding: 5px;
    transition: all 0.5s ease-in-out;
    margin-right: 20px;
    border-radius: 5px;
}

.style-three .tabs li.current:before {
    background: transparent;
}

.style-three li.current a {
    border: 1px solid #2871ff;
}

/*Shop dtls Right
============================*/

.shop-dtls-info {
    padding-left: 30px;
}

.category-title h2 {
    font-size: 31px;
    font-weight: 700;
    line-height: 26px;
    padding: 0px 0 23px;
}

.category-icon-list ul li {
    list-style: none;
    display: inline-block;
    color: #2871ff;
    letter-spacing: .4em;
    font-size: 16px;
}

li.category-text {
    letter-spacing: 0 !important;
    color: #67686C!important;
    padding-left: 6px;
}

.category-price h1 {
    font-weight: 500;
    font-size: 18px;
    line-height: 26px;
    color: #2871ff;
    padding: 6px 0 19px;
}

.category-price span {
    color: #616161;
    padding-left: 14px;
    text-decoration: line-through;
}

.category-color p {
    color: #062462;
    line-height: 26px;
    font-weight: 500;
    font-size: 16px;
    padding: 18px 0 6px;
}

.category-color span {
    color: #67686C;
    padding-left: 20px;
    position: relative;
}

.category-color span:before {
    position: absolute;
    content: ":";
    left: 4px;
    top: -3px;
}

/* --- Quantity button 
================================*/

.category-count-button {
    display: inline-flex;
    padding: 8px 0 30px;
} 

.quantity-with_btn {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    vertical-align: middle;
}

.quantity .cart-plus-minus {
    position: relative;
    width: 170px;
    text-align: left;
    height: 54px;
    overflow: hidden;
    border-radius: 5px;
}

.quantity .cart-plus-minus > .ctnbutton {
    cursor: pointer;
    position: absolute;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    width: 38px;
    -webkit-box-align: center;
    align-items: center;
    vertical-align: middle;
    color: #fff;
    -webkit-transition: .5s;
    background: #2871ff;
}

.quantity .cart-plus-minus > .cart-plus-minus-box {
    border: 0;
    height: 54px;
    text-align: center;
    width: 170px;
    font-size: 16px;
    font-weight: 600;
    color: #062461;
    background-color: #fff !important;
    background: linear-gradient(90deg, #2871ff 50%, transparent 0) repeat-x, linear-gradient(90deg, #2871ff 50%, transparent 0) repeat-x, linear-gradient(0deg, #2871ff 50%, transparent 0) repeat-y, linear-gradient(0deg, #2871ff 50%, transparent 0) repeat-y;
    background-size: 6px 2px, 6px 2px, 2px 6px, 2px 7px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    -webkit-animation: linearGradientMove 0.3s infinite linear;
    animation: linearGradientMove 0.3s infinite linear;
}

.quantity .cart-plus-minus > .ctnbutton.dec {
    top: 50%;
    left: 0%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    display: -webkit-box;
    display: flex;
    -webkit-justify-content: center;
    height: 100%;
    border-radius: 0 30px 30px 0;
}

.quantity .cart-plus-minus > .ctnbutton.inc {
    top: 50%;
    right: 0%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    height: 100%;
    border-radius: 30px 0 0 30px;
}

/*categories button
=========================*/

.category-button {
    display: inline-block;
    padding-left: 20px;
}

.category-button a {
    padding: 13px 25px;
    font-size: 15px;
    font-weight: 500;
    background: #2871ff;
    border-radius: 4px;
    color: #fff;
    display: inline-block;
    position: relative;
    z-index: 1;
}

.category-button a:before {
    position: absolute;
    z-index: -1;
    content: "";
    top: 0;
    right: 0;
    height: 100%;
    width: 0;
    background: #062461;
    border-radius: 4px;
    transition: .5s;
}

.category-button a i {
    padding-left: 10px;
    font-size: 16px;
}

.category-button a:hover:before {
    left: 0;
    width: 100%;
}

/* table
================*/

table.category-table {
    padding: 2px 0 0;
    display: inline-block;
}

table.category-table td.table-title {
    font-size: 16px;
    color: #062461;
    font-weight: 500;
}

table.category-table tr td {
    padding-right: 25px;
    padding-bottom: 12px;
}

table.category-table td.table-title {
    font-size: 16px;
    color: #0D0E14;
    font-weight: 500;
}

table.category-table td.table-text {
    color: #616161;
    position: relative;
    z-index: 1;
    font-size: 16px;
    font-weight: 400;
    font-family: 'Inter';
}

table.category-table td.table-text:before {
    position: absolute;
    content: ":";
    left: -15px;
    top: 0;
    font-size: 20px;
    color: #0D0E14;
}

/*shop tab style
=====================*/

.appoinment-tab .tabs li a {
    font-size: 15px;
    background: #fff;
    border: 1px solid rgba(13,14,20,0.1);
    color: #062462;
    font-family: 'Inter';
    font-weight: 500;
    display: inline-block;
    outline: none;
    padding: 9px 29px;
    transition: all 0.5s ease-in-out;
    margin-right: 20px;
    border-radius: 5px;
}

.appoinment-tab li.current a {
    background: #2871ff;
    color: #fff;
}

/*tabs items table
=======================*/

table.tab-items-table {
    border-bottom: 1px solid #e7e7e7;
    border-top: 1px solid #e7e7e7;
}

table.tab-items-table tr {
    background: #fff;
    height: 66px;
    border-radius: 4px;
    width: 100%;
    display: inline-block;
    padding: 20px 0 0 30px;
}

tr.tabs-bg {
    background: #F5F5F5 !important;
}

table.tab-items-table tr td {
    padding-right: 100px;
}

table.tab-items-table td.table-title {
    font-size: 16px;
    color: #062462;
    font-weight: 500;
}

table.tab-items-table td.table-text {
    color: #0d0e14;
    font-weight: 400;
}

table.tab-items-table td.table-text i {
    color: #2871ff!important;
    margin-left: 10px !important;
}


/*post comment box
===================*/ 

.post-comment-thumb {
    float: left;
    margin-right: 20px;
}

.post-content {
    overflow: hidden;
}

/*comment icon list*/

ul.comment-icon-list li {
    list-style: none;
    display: inline-block;
    color: #2871ff;
    letter-spacing: .2em;
    font-size: 14px;
}

/*post title*/

h4.post-title {
    font-size: 17px;
    font-weight: 500;
    line-height: 26px;
    margin-top: 0;
    padding: 2px 0 9px;
}

h4.post-title span {
    padding-left: 31px;
    font-size: 15px;
    color: #616161;
    font-weight: 400;
    position: relative;
}

.post-title span:before {
    position: absolute;
    content: "";
    left: 6px;
    top: 9px;
    height: 1px;
    width: 15px;
    background: #0D0E14;
}

/*right reply*/

span.rights-reply {
    font-weight: 500;
    color: #062461;
    cursor: pointer;
}

.posts-reply span i {
    display: inline-block;
    margin-right: 5px;
}

/*sidebar title*/

.product-details-respond {
    padding: 35px 0 0;
}

.sidebar-title h2 {
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
}

/*sidebar desc*/

.sidebar-description p {
    font-size: 15px;
    margin: 6px 0 25px;
}

/*sidebar rating list*/

p.sidebar-text {
    display: inline-block;
}

.sidebar-rating-list ul {
    display: inline-block;
    padding-left: 15px;
}

.sidebar-rating-list ul li {
    list-style: none;
    display: inline-block;
    color: #2871ff;
    letter-spacing: .4em;
    font-size: 15px;
}

/*from box*/

.contact-form-box2 {
    padding: 25px 0 0;
}

p.form_text {
    color: #000;
    margin-bottom: 10px;
    padding: 10px 0 0;
}

h6.form-title {
    font-size: 15px;
    font-weight: 500;
    padding: 0 0 13px;
    margin: 0;
}

.contact-form-box2 .form-box input {
    height: 54px;
    background-color: #fff;
    border: 1px solid rgba(13,14,20,0.1);
    transition: .5s;
    padding: 0px 25px;
    display: block;
    width: 100%;
    color: #616161;
    margin-bottom: 30px;
    border-radius: 4px;
}

.contact-form-box2 .from-box input::placeholder {
    color: #616161;
    opacity: .6;
}

.contact-form-box2 .form-box textarea {
    height: 155px;
    background-color: #fff;
    border: 1px solid rgba(13,14,20,0.1);
    transition: .5s;
    padding: 15px 25px;
    display: block;
    width: 100%;
    border-radius: 4px;
}

.contact-form-box2 .from-box textarea::placeholder {
    color: #616161;
    opacity: .6;
}

.product-item-title h2 {
    font-size: 30px;
    font-weight: 700;
    line-height: 42px;
    padding: 20px 0 30px;
}

/*contact form button*/

.style-Two.contact-form button {
    padding: 11px 53px;
    color: #fff;
    display: inline-block;
    margin-top: 40px;
    border-radius: 5px;
    position: relative;
    z-index: 1;
    border: 2px solid transparent;
    background: #2871ff;
    transition: 0.5s;
    font-weight: 500;
}

.style-Two.contact-form button i {
    padding-left: 6px;
    position: relative;
    top: 2px;
}

.style-Two.contact-form button:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    background: #fff;
    z-index: -1;
    transition: 0.5s;
    transform: scale(0.0, 1);
    opacity: 0;
}

.style-Two.contact-form button:hover:before {
    transform: scale(1);
    opacity: 1;
}

.style-Two.contact-form button:hover {
    color: #062461;
}

/*
Shop style Two
=====================*/

.shops-section {
    padding: 100px 0 40px;
}

.shops-section .row.products {
    padding-left: 0;
}

.single-products-box2 {
    display: flex;
    margin-bottom: 35px;
}

.single-products-box2 .products-thumb img {
    width: inherit;
    transition: .5s;
    border-radius: 4px;
    margin-right: 30px;
}

.single-products-box2 .product-content2 {
    text-align: left;
}

.single-products-box2 .product-title h2 {
    font-size: 24px;
    line-height: 15px;
}

.single-products-box2 .product-price p {
    margin-bottom: 5px;
}

p.description {
    padding: 12px 0 4px;
}

.product-thumb-icon2 a {
    font-size: 14px;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    border-radius: 30px;
    background-color: #062462;
    color: #ffff;
    transition: .5s;
    margin-right: 6px;
    position: relative;
    z-index: 1;
    display: inline-block;
}

.product-thumb-icon2 a:after {
    position: absolute;
    content: "";
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background: #2871ff;
    transform: scale(0);
    transition: .5s;
}

.product-thumb-icon2 a:hover:after {
    transform: scale(1);
}

/*Tab style
======================*/

.shops-section .tab {
    position: relative;
    overflow: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
    text-align: right;
    padding: 5px 0 0;
}

.shops-section .tabs {
    display: inline;
}

.shops-section  .tabs li.current:before {
    position: inherit;
}

.shops-section .tabs li a {
    font-size: 35px;
    width: 52px;
    height: 52px;
    line-height: 52px;
    text-align: center;
    color: #fff;
    background: #062462 !important;
    display: inline-block;
    margin-right: 0;
    margin-left: 10px;
    padding: 0;
}

.shops-section li.current a {
    color: #fff !important;
    background: #2871ff !important;
}

/*widget
==============*/

.widget {
    display: inline-block;
}

.widget select {
    padding: 15px 13px;
    width: 85%;
    display: inline-block;
    position: relative;
    top: -6px;
    color: #6A6E49;
}


/*================================
 <--Start Personal Advisor  Shop Section   Css-->
=================================*/


.shop-section {
    padding: 100px 0 100px;
}

/* Shop Form*/

.form_box {
    padding: 11px 0 0;
}

p.form-text {
    display: inline-block;
    font-size: 16px;
    font-weight: 300;
    padding-right: 12px;
}

.form_box select {
    width: 30%;
    height: 38px;
    padding-left: 15px;
    background: #fff;
    border-radius: 4px;
    font-size: 16px;
    color: #062462;
    border: 1px solid rgba(6,36,98,0.4);
    transition: .5s;
}

.upper.widget_search {
    margin-bottom: 40px;
    background: inherit;
    text-align: right;
}

.widget_search form {
    position: relative;
}

.upper.widget_search input {
    height: 60px;
    width: 73%;
    color: #062461;
    background: #f6f6f6;
    border: 0;
    border-radius: 4px 0px 0px 4px;
    padding: 0 20px 0;
}

button.icons {
    border: 0;
    font-size: 18px;
    color: #fff;
    padding: 1px 15px;
    position: absolute;
    right: 0;
    top: 0;
    height: 60px;
    width: 60px;
    background: #2871ff;
    border-radius: 0 4px 4px 0;
}

/*Shop Left*/


.categories-title h4 {
    font-size: 24px;
    font-weight: 600;
    border-bottom: 2px solid rgba(6,36,97,0.10196078431372549);
    padding: 0px 0 25px;
    margin: 0 0 30px;
    position: relative;
    color: #fff;
}

.categories-title h4:before {
    position: absolute;
    content: "";
    left: -35px;
    top: 0;
    height: 29px;
    width: 3px;
    background: #fff;
}

.widget-check-box {
    padding: 40px 35px 18px;
    background: #fff;
    box-shadow: 0px 10px 50px rgba(231, 231, 231, 0.5);
    border-radius: 4px;
    margin-bottom: 30px;
}

/* Create a custom checkbox */

.checkmark {
    position: absolute;
    top: 3px;
    left: 0;
    height: 22px;
    width: 22px;
    border-radius: 2px;
    border: 1px solid rgba(6,36,98,0.1);
    background-color: rgba(7,72,131,0);
}

.widget-check {
    display: block;
    position: relative;
    padding-left: 40px;
    margin-bottom: 20px;
    cursor: pointer;
    font-size: 16px;
    font-family: 'Inter';
    user-select: none;
    color: #062461;
}

.widget-check input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

label.widget-check p {
    display: inline;
    float: right;
}

.widget-check:hover input ~ .checkmark {
  background-color: #ccc;
}


.widget-check input:checked ~ .checkmark {
    background-color: #2871ff;
}


.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}


.widget-check input:checked ~ .checkmark:after {
  display: block;
}


.widget-check .checkmark:after {
    left: 7px;
    top: 2px;
    width: 7px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
}




/*Price Range
===========================*/


.range-wrapper-box {
    padding: 40px 35px 40px;
    background: #fff;
    box-shadow: 0px 10px 50px rgb(231 231 231 / 50%);
    border-radius: 4px;
    margin-bottom: 30px;
}

.slider-labels {
    margin-top: 35px;
}

.text-right.caption {
    display: inline-block;
}

.caption {
    display: inline-block;
}

.caption strong {
    width: 74px;
    height: 34px;
    line-height: 35px;
    background: #2871ff;
    display: inline-block;
    text-align: center;
    font-size: 14px;
    font-family: 'Inter';
    color: #fff;
    border-radius: 3px;
    margin-right: 10px;
}

span#slider-range-value1, span#slider-range-value2 {
    font-size: 16px;
    font-family: 'Inter';
    font-weight: 400;
    color: #062462;
}



.noUi-target,
.noUi-target * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -ms-touch-action: none;
  touch-action: none;
  -ms-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.noUi-target {
  position: relative;
  direction: ltr;
}

.noUi-base {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  /* Fix 401 */
}

.noUi-origin {
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;
}

.noUi-handle {
  position: relative;
  z-index: 1;
}

.noUi-stacking .noUi-handle {
  z-index: 10;
}

.noUi-state-tap .noUi-origin {
  -webkit-transition: left 0.3s, top 0.3s;
  transition: left 0.3s, top 0.3s;
}

.noUi-state-drag * {
  cursor: inherit !important;
}

/* Painting and performance;
 */

.noUi-base,
.noUi-handle {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* Slider size and handle placement;
 */

.noUi-horizontal {
  height: 5px;
}

.noUi-horizontal .noUi-handle {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    left: -7px;
    top: -6px;
    background-color: #2871ff;
}

.noUi-background {
  background: #ececec;
}

.noUi-connect {
  background: #2871ff;
  -webkit-transition: background 450ms;
  transition: background 450ms;
}

.noUi-origin {
  border-radius: 2px;
}

.noUi-target {
  border-radius: 2px;
}

.noUi-target.noUi-connect {
}

/* Handles and cursors;
 */

.noUi-draggable {
  cursor: w-resize;
}

.noUi-vertical .noUi-draggable {
  cursor: n-resize;
}

.noUi-handle {
  cursor: default;
  -webkit-box-sizing: content-box !important;
  -moz-box-sizing: content-box !important;
  box-sizing: content-box !important;
}

.noUi-handle:active {
    border: 8px solid rgba(237, 28, 37, 0.38);
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    left: -14px;
    top: -14px;
}

/* Disabled state;
 */

[disabled].noUi-connect,
[disabled] .noUi-connect {
  background: #b8b8b8;
}

[disabled].noUi-origin,
[disabled] .noUi-handle {
  cursor: not-allowed;
}

/*Product 
======================*/

.product-categories-box {
    padding: 30px 30px 20px;
    background: #fff;
    box-shadow: 0px 10px 50px rgba(231, 231, 231, 0.5);
    border-radius: 4px;
    margin-bottom: 30px;
}

.products-collection {
    margin-bottom: 20px;
}

.product-thumb {
    float: left;
    padding-right: 17px;
}

.products-title h6 {
    font-size: 16px;
    font-weight: 500;
    line-height: 21px;
}

.product-price span {
    font-size: 15px;
    font-weight: 400;
    color: #2871ff;
}

.product-icon-list ul {
    line-height: 20px;
}

.product-icon-list ul li {
    list-style: none;
    display: inline-block;
    color: #2871ff;
    letter-spacing: 4px;
    font-size: 14px;
}


/*Shop Right 
======================*/

.row.products {
    padding-left: 80px;
}

.single-products-box {
    text-align: center;
    margin-bottom: 30px;
}

.products-thumb {
    position: relative;
    z-index: 1;
}

.products-thumb:before {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    background: #6588cc;
    opacity: .8;
    transition: .5s;
    border-radius: 4px 4px 0 0;
}

.products-thumb img {
    width: 100%;
    transition: .5s;
    border-radius: 4px 4px 0 0;
}

.product-sale {
    position: absolute;
    top: 20px;
    left: 20px;
}

.product-sale span {
    padding: 4px 20px;
    font-size: 14px;
    font-weight: 400;
    font-family: 'Inter';
    line-height: 24px;
    background: #2871ff;
    color: #fff;
    border-radius: 4px;
    display: inline-block;
}

.product-thumb-icon a {
    font-size: 20px;
    width: 46px;
    height: 46px;
    line-height: 47px;
    border-radius: 50%;
    text-align: center;
    background: #fff;
    color: #0D0E14;
    transition: .7s;
    display: inline-block;
    position: relative;
    bottom: 40%;
    z-index: 1;
    overflow: hidden;
}

.product-thumb-icon a:before {
    position: absolute;
    content: "";
    z-index: -1;
    right: 0;
    height: 100%;
    width: 0;
    border-radius: 50%;
    background: #2871ff;
    transition: .6s;
}

.product-thumb-icon a:nth-child(1) {
    position: absolute;
    left: 0;
    opacity: 0;
}

.product-thumb-icon a:nth-child(2) {
    position: absolute;
    right: 0;
    opacity: 0;
}

.product-content {
    padding: 23px 0 6px;
    border: 1px solid rgba(6,36,98,0.1);
    border-top: 0;
    border-radius: 0 0 4px 4px;
}

ul.product-rating li {
    list-style: none;
    display: inline-block;
    color: #2871ff;
    letter-spacing: .3em;
    font-size: 14px;
}

.product-title h2 {
    font-size: 18px;
    font-weight: 600;
    color: #062462;
    line-height: 17px;
}

.product-price p {
    font-size: 15px;
    font-family: 'Inter';
    padding: 14px 0 0px;
    color: #2871ff;
}

.product-price p span {
    color: #616161;
    text-decoration: line-through;
    margin-left: 5px;
}

.product-thumb-icon a:hover {
    color: #fff;
}

.product-thumb-icon a:hover:before {
    left: 0;
    width: 100%;
}

.single-products-box:hover .products-thumb:before{
    height: 100%;
    top: 0;
}

.single-products-box:hover .product-thumb-icon a:nth-child(1) {
    opacity: 1;
    left: 92px;
}

.single-products-box:hover .product-thumb-icon a:nth-child(2) {
    opacity: 1;
    right: 92px;
}





/*pagination
==================*/

.pagination-menu {
    padding-top: 30px;
}

.pagination-menu ul {
    display: inline-block;
}

.pagination-menu ul li {
    display: inline-block;
    list-style: none;
    margin-right: 8px;
}

.pagination-menu ul li a {
    width: 46px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    border-radius: 50%;
    background: #F5F5F5;
    display: inline-block;
    color: #062462;
    font-size: 20px;
    position: relative;
    z-index: 1;
    transition: .5s;
}

.pagination-menu ul li a:before {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #2871ff;
    border-radius: 50%;
    transform: scale(0);
    transition: .5s;
    z-index: -1;
}

.pagination-menu ul li a:hover:before {
    transform: scale(1);
}

.pagination-menu ul li a:hover {
    color: #fff;
}



/*================================
 <--Start Personal Advisor  Product Section   Css-->
=================================*/
.product-section {
    padding: 120px 0 120px;
}

.product-single-box {
    box-shadow: 0 0 25px rgba(235,237,241);
    background: #fff;
    text-align: center;
    border-radius: 5px;
    transition: .5s;
    border: 1px solid #F1F5F6;
    margin-bottom: 30px;
}

.product-single-box:hover {
    border: 1px solid #2871ff;
}

.product-thumbs {
    display: inline-block;
    border: 15px solid #e7ecea;
    border-radius: 50%;
    position: relative;
    transition: 0.5s;
    margin-top: 45px;
    margin-bottom: 90px;
}

.product-single-box:hover .product-thumbs {
    border: 15px solid #2871ff;
}

.product-icon {
    z-index: 1;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    margin: auto;
    bottom: -62px;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background-color: #2871ff;
    line-height: 62px;
    color: #fff;
    font-size: 20px;
}

.product-icon:before {
    border: 10px solid #f1f5f6;
    position: absolute;
    content: "";
    left: -10px;
    top: -10px;
    height: 135%;
    width: 135%;
    z-index: -1;
    border-radius: 50%;
}

.product-icon:after {
    position: absolute;
    left: -12px;
    top: -12px;
    content: "";
    height: 88px;
    width: 88px;
    border: 1px dashed #2871ff;
    border-radius: 50%;
    -webkit-animation-name: rotateme;
    animation-name: rotateme;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    transition: 5s;
}

/*product content*/

.product_content {
    background: #f1f5f6;
    text-align: left;
    padding: 25px 96px 10px 30px;
    border-radius: 0 0 5px 5px;
}

/*product rating star icon*/

.product-rating-star-icon ul li {
    list-style: none;
    display: inline-block;
}

.product-rating-star-icon ul li i {
    color: #2871ff;
    margin-left: 2px;
}

.product-title h3 a {
    font-size: 22px;
    color: #0a1328;
    font-weight: 500;
    display: inline-block;
    line-height: 30px;
    margin-top: -5px;
}

p.product-price {
    font-size: 16px;
    letter-spacing: 1px;
    color: #0a1328;
    font-weight: 500;
    margin-top: 10px;
}




/*Tab Items
=======================*/

.tab {
    padding-top: 50px;
    position: relative;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

.tabs {
    display: table;
    position: relative;
    overflow: hidden;
    margin: 0;
    width: 100%;
}

.tabs li {
    line-height: 38px;
    margin-bottom: 30px;
    position: relative;
    display: inline-block;
}

.tabs li a {
    font-size: 20px;
    background: url(https://html.ditsolution.net/drtheme/dreamhub/images/resource/tab1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: #fff;
    font-family: 'Inter';
    font-weight: 600;
    display: inline-block;
    outline: none;
    padding: 21px 92px;
    transition: all 0.5s ease-in-out;
    margin-right: 30px;
    border-radius: 5px;
}

.tabs li a span {
    font-size: 22px;
    padding-right: 10px;
    color: #2871ff;
}

.tabs_item {
    display: none;
    padding: 30px 0;

}

.tabs_item:first-child {
    display: block;
}

.tab-thumb {
    margin-right: 65px;
    position: relative;
    z-index: 1;
}

.tab-thumb:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    clip-path: polygon(0 0, 100% 0%, 0% 100%);
    transform: scale(0);
    transform-origin: top left;
    background-image: linear-gradient(-86deg, #062462 0%, #062462 100%);
    pointer-events: none;
    transition: all 500ms linear;
    border-radius: 5px;
    opacity: .25;
}

.tab-thumb img {
    width: 100%;
    border-radius: 5px;
}

li.current a {
    background: url(https://html.ditsolution.net/drtheme/dreamhub/images/resource/active-tab.jpg);
    color: #fff;
}

li.current a span {
    color: #fff;
}

.tabs li.current:before {
    position: absolute;
    content: "";
    z-index: 1;
    left: 0;
    right: 30px;
    bottom: -10px;
    height: 20px;
    margin: auto;
    width: 19px;
    background: #2871ff;
    transform: rotate(45deg);
    transition: .5s;
}

.tabs_item .Personal Advisor-section-title p {
    padding: 17px 0 5px;
}

.tabs_item .Personal Advisor-section-title h4 {
    margin-top: 0;
}

.tabs_item .Personal Advisor-button a {
    margin-top: 30px;
}

.tab-thumb:hover:before {
    transform: scale(1);
}

/*================================
 <--Start Personal Advisor  Cart Section  Css-->
=================================*/
.cart-section {
    padding: 100px 0 100px;
}

.cart-empty p {
    padding: 18px 25px;
    position: relative;
    background-color: #F6F7F9;
    border-bottom: 2px solid #062462;
    display: inline-block;
    width: 100%;
    color: #062462;
}

.cart-empty p i {
    color: #062462;
    padding-right: 10px;
}

.Advisor-button a {
    font-size: 15px;
    padding: 15px 30px;
    background: #131823;
    color: #fff;
    font-weight: 500;
    display: inline-block;
    border-radius: 5px;
    position: relative;
    z-index: 1;
    transition: .5s;
}

.Advisor-button a:before {
    position: absolute;
    content: "";
    z-index: -1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: 5px;
    background: #2488F2;
    transform: scale(0);
    transition: .5s;
}

.Advisor-button a i {
    font-size: 18px;
    position: relative;
    top: 3px;
    padding-left: 3px;
    color: #2488F2;
    transition: .5s;
}

.Advisor-button a:hover::before {
    transform: scale(1);
}

.Advisor-button a:hover i {
    color: #fff;
}

/*================================
 <--Start Personal Advisor  shop Nav Sidebar button   Css-->
=================================*/
/*nav button*/

.nav-btn.navSidebar-button {
    display: inline-block;
    float: left;
    padding: 10px 0 0;
}

.nav-btn.navSidebar-button a i {
    padding-right: 10px;
    font-size: 20px;
}

.xs-sidebar-group .xs-overlay {
    left: 100%;
    top: 0;
    position: fixed;
    z-index: 101;
    height: 100%;
    opacity: 0;
    width: 100%;
    visibility: hidden;
    -webkit-transition: all 0.4s ease-in 0.8s;
    -o-transition: all 0.4s ease-in 0.8s;
    transition: all 0.4s ease-in 0.8s;
}

.xs-sidebar-group .widget-heading {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 0;
}

.xs-sidebar-widget {
    position: fixed;
    left: -100%;
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: 360px;
    z-index: 999999;
    overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: #fff;
    -webkit-transition: all 0.5s cubic-bezier(0.9, 0.03, 0, 0.96) 0.6s;
    visibility: hidden;
    opacity: 0;
}

.xs-sidebar-group.isActive .xs-overlay {
    opacity: 0.4;
    visibility: visible;
    -webkit-transition: all 0.8s ease-out 0s;
    -o-transition: all 0.8s ease-out 0s;
    transition: all 0.8s ease-out 0s;
    left: 0;
}

.xs-sidebar-group.isActive .xs-sidebar-widget {
    opacity: 1;
    visibility: visible;
    left: 0;
    -webkit-transition: all 0.7s cubic-bezier(0.9, 0.03, 0, 0.96) 0.4s;
    transition: all 0.7s cubic-bezier(0.9, 0.03, 0, 0.96) 0.4s;
}

.sidebar-textwidget {
    padding: 40px 32px;
}

.close-side-widget i {
    color: #062462;
    font-size: 28px;
    display: block;
}

.sidebar-widget-container {
    position: relative;
    top: 150px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s ease-in 0.3s;
    -o-transition: all 0.3s ease-in 0.3s;
    transition: all 0.3s ease-in 0.3s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.xs-sidebar-group.isActive .sidebar-widget-container {
    top: 0px;
    opacity: 1;
    visibility: visible;
    -webkit-transition: all 1s ease-out 1.2s;
    -o-transition: all 1s ease-out 1.2s;
    transition: all 1s ease-out 1.2s;
    -webkit-backface-visibility: hidden;
  
    backface-visibility: hidden;
}

.xs-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0.5;
    z-index: 0;
}

.xs-bg-black {
    background-color: #062462;
}


/*html css*/
.nav-logo {
    padding: 0 0 40px;
}

.nav-btn.navSidebar-button a {
    color: #062462;
}

.sidebar-info-contents .widget-search {
    padding: 0 0 15px;
}

.sidebar-info-contents .widget {
    display: block;
} 

.sidebar-info-contents h3.widget-title {
    font-size: 25px;
    padding: 8px 0 20px;
    margin-bottom: 10px;
    border-bottom: 1px solid #e9e9e9;
    font-style: italic;
}

.sidebar-info-contents h3.widget-title {
    font-size: 25px;
    padding: 15px 0 15px;
}

.widget form {
    position: relative;
}

.widget input {
    border-radius: 4px;
    padding-left: 20px;
    height: 56px;
    width: 100%;
    color: #fff;
    border: 1px solid #e9e9e9;
}

button.icon {
    border: 0;
    font-size: 18px;
    color: #fff;
    padding: 1px 15px;
    position: absolute;
    right: 0;
    top: 0;
    height: 56px;
    width: 60px;
    background: #2871ff;
    border-radius: 0 4px 4px 0;
}

ul.list-style-one li {
    display: block;
    list-style: none;
    color: #fff;
    padding: 16px 0 0;
    overflow: hidden;
}

ul.list-style-one li span {
    font-size: 16px;
    font-weight: 600;
    color: #062462;
    float: right;
    display: inline-block;
    padding: 0 5px;
}

ul.list-style-one li a {
    transition: .5s;
    color: #062462;
}

ul.list-style-one li a i {
    background: #2871ff;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    display: inline-block;
    border-radius: 30px;
    color: #fff;
    margin-right: 5px;
}

a.white-bg i {
    background: #e9e9e9 !important;
}

a.yellow-bg i {
    background: #eeee22 !important;
}

a.green-bg i {
    background: #9BC45C !important;
}

/*Tag
=======*/

.sidebar-tag-menu {
    padding: 12px 0 0;
}

.sidebar-tag-menu ul li {
    display: inline-block;
    list-style: none;
    margin-right: 6px;
    color: #062462;
    padding: 0 0 12px;
}

/*social icon*/

ul.social-icon {
    padding: 20px 0 0;
}

ul.social-icon li {
    display: inline-block;
    list-style: none;
    margin: 0 10px 0 0;
}

ul.social-icon li a {
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 36px;
    text-align: center;
    background: #fff;
    color: #062462;
    transition: .5s;
    font-size: 18px;
    border-radius: 3px;
}

ul.social-icon li a:hover {
    background: #2871ff;
    color: #fff;
}

ul.list-style-one li a:hover span {
    background: #2871ff;
    border-radius: 30px;
    color: #fff;
} 

ul.list-style-one li a:hover {
    color: #2871ff;
}




/*
<!-- ============================================================== -->
<!--  Scrollup  Section -->
<!-- ============================================================== -->*/


.scroll-area{
    position: relative;
    z-index: 999;
   }
  
  .scroll-area .go-top {
      position: fixed;
      cursor: pointer;
      top: 0;
      right: 30px;
      color: #ffffff;
      background-image: -moz-linear-gradient(0deg, #1781f1 0%, #573FEB 100%);
      background-image: -webkit-linear-gradient(0deg, #1781f1 0%, #573FEB 100%);
      z-index: 9999;
      width: 45px;
      text-align: center;
      height: 45px;
      line-height: 42px;
      opacity: 0;
      visibility: hidden;
      -webkit-transition: all 0.9s ease-out 0s;
      -moz-transition: all 0.9s ease-out 0s;
      border-radius: 10px; 
  }
  
  .scroll-area .go-top i {
        position: absolute;
        top: 50%;
        left: -4px;
        right: 0;
        margin: 0 auto;
        font-size: 15px;
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        -webkit-transition: all 0.5s ease-out 0s;
        -moz-transition: all 0.5s ease-out 0s;
    }
  
  .scroll-area .go-top i:last-child {
      opacity: 0;
      visibility: hidden;
      top: 60%; 
  }
  
  .scroll-area .go-top::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      background-image: linear-gradient(to right, #1781f1 0%, #232353 100%);
      background-image: -ms-linear-gradient(0deg, #232353 0%, #1781f1 100%);
      opacity: 0;
      visibility: hidden;
      -webkit-transition: all 0.5s ease-out 0s;
      -moz-transition: all 0.5s ease-out 0s;
      border-radius: 100%;
  }
  
  .scroll-area .go-top:focus, .scroll-area .go-top:hover {
        color: #fff; 
    }
  
  .scroll-area .go-top:focus::before, .scroll-area .go-top:hover::before {
          opacity: 1;
          visibility: visible; 
  }
  
  .scroll-area .go-top:focus i:first-child, .scroll-area .go-top:hover i:first-child {
          opacity: 0;
          top: 0;
          visibility: hidden;
   }
  
  .scroll-area .go-top:focus i:last-child, .scroll-area .go-top:hover i:last-child {
          opacity: 1;
          visibility: visible;
          top: 50%; 
  }
  
  .scroll-area .go-top.active {
      top: 95%;
      -webkit-transform: translateY(-98%);
      -moz-transform: translateY(-98%);
      opacity: 1;
      visibility: visible;
      border-radius: 0;
      right: 30px;
      border-radius:100%;
  }
  
  .top-wrap {
    position: relative; 
  }
  
  .top-wrap .go-top-button {
      display: inline-block;
      width: 50px;
      height: 50px;
      line-height: 40px;
      text-align: center;
      color: #fff;
      top: 3px;
      z-index: 1;
      background: #1781f1;
  }
  
   .top-wrap .go-top-button i {
        font-size: 20px;
        font-weight: 700;
        padding-left: 4px;
        color: #fff;
   }
  
  .top-wrap .go-top-button::after {
      z-index: -1;
      content: "";
      position: absolute;
      left: 3px;
      top: 3px;
      width: 45px;
      height: 45px;
      -webkit-animation: ripple 1.6s ease-out infinite;
      -moz-animation: ripple 1.6s ease-out infinite;
      opacity: 0;
      background-image: -moz-linear-gradient(0deg, #1781f1 0%, #3173b1 100%);
      background-image: -webkit-linear-gradient(0deg, #1781f1 0%, #7db1e2 100%);
      border-radius: 100%;
  }
  
  .top-wrap .go-top-button:hover {
        background-color: #222;
        color: #fff; 
    }
  @keyframes ripple {
    0%, 35% {
      -webkit-transform: scale(0);
      -moz-transform: scale(0);
      -ms-transform: scale(0);
      -o-transform: scale(0);
      transform: scale(0);
      opacity: 1; }
    50% {
      -webkit-transform: scale(1.5);
      -moz-transform: scale(1.5);
      -ms-transform: scale(1.5);
      -o-transform: scale(1.5);
      transform: scale(1.5);
      opacity: 0.8; }
    100% {
      opacity: 0;
      -webkit-transform: scale(2);
      -moz-transform: scale(2);
      -ms-transform: scale(2);
      -o-transform: scale(2);
      transform: scale(2); } 
    
    }
  
/*===========================
<-- Personal Advisor  Loader Css -->
=============================*/
.loader-wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    transition: 0.8s 1s ease;
    z-index: 999;
}

.loader {
    position: relative;
    display: block;
    z-index: 201;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
    border-radius: 50%;
    transition: all 1s 1s ease;
    border: 3px solid transparent;
    border-top-color: #1781f1;
    -webkit-animation: spin 1.5s linear infinite;
    -moz-animation: spin 1.5s linear infinite;
    -o-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}

.loader:before {
    position: absolute;
    content: '';
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-left-color: #074783;
    -webkit-animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    -o-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

.loader:after {
    position: absolute;
    content: '';
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-right-color: #fff;
    -webkit-animation: spin 2.5s linear infinite;
    -moz-animation: spin 2.5s linear infinite;
    -o-animation: spin 2.5s linear infinite;
    animation: spin 2.5s linear infinite;
}

/*/ Here comes the Magic /*/

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.loader-wrapper .loder-section {
    position: fixed;
    top: 0;
    width: 50%;
    height: 100%;
    background: #111;
    z-index: 2;
}

.loader-wrapper .loder-section.left-section {
    left: 0;
    transition: 1s 1.4s ease;
}

.loader-wrapper .loder-section.right-section {
    right: 0;
    transition: 1s 1.4s ease;
}

/*/ When page loaded /*/
.loaded .loder-section.left-section {
    left: -100%;
}

.loaded .loder-section.right-section {
    right: -100%;
}

.loaded .loader-wrapper {
    visibility: hidden;
}

.loaded .loader {
    top: -100%;
    opacity: 0;
}