/*===============================================
Template Name: DreamHub - Electronics repair
Author:  
Version: 
Description: Description
Text Domain: DreamHub
Tags:   Electornices Repair, shipping, courier, shipping company, storage, transport, transport company, warehouse.
================================================*/
    
/*TABLE OF CONTENTS*/
/*=====================
01. DreamHub Top Bar Area Css
02. DreamHub Header Area Csss
03. DreamHub Nav Menu Area Css
04. DreamHub Section Title Css
05. DreamHub About Area Css
06. DreamHub Service Area Css
07. DreamHub Service Details Area Css
08. DreamHub Testimonial Area Css
09. DreamHub Pricing Area Css
10. DreamHub Team Area Css
11. DreamHub Counter Area Css
12. DreamHub Contact Area Css
14. DreamHub Shope Css
15. DreamHub Shope Details Css
16. DreamHub Working Precces Css
17. DreamHub Blog Area Css
18. DreamHub Blog Details Area Css
19. DreamHub My Account Css
20. DreamHub Faq Area Css
21. DreamHub Account Details Css
22. DreamHub Footer Area CSS
23. DreamHub Scrollup Section
24. DreamHub Loader Css
15. DreamHub Hero Area Css
16. DreamHub Google Map Css

=======================*/




/*==========================
<--start-top-bar-Area-->
===========================*/
.top-bar-area {
    background: #2f39e1;
    padding: 11px 0;
    position: relative;
    z-index: 1;
}

.top-bar-area:before {
    position: absolute;
    content: "";
    width: 53%;
    height: 100%;
    top: 0;
    left: -17px;
    background-color: #0F158F;
    z-index: -1;
    transform: skew(-38deg);
}

.top-bar-text p {
    color: #fff;
    font-size: 14px;
}

.top-bar-info {
    text-align: right;
}

.top-bar-info ul li {
    display: inline-block;
    list-style: none;
    margin-left: 21px;
}

.top-bar-info ul li a{
    display: inline-block;
    color: #fff;
    font-size: 14px;
}

.top-bar-info ul li i {
    display: inline-block;
    color: #fff;
    font-size: 14px;
    margin-right: 6px;
}



/*==========================
<--start-header-Area-->
===========================*/
.header-menu {
    text-align: right;
}

.header-menu ul {
    display: inline-block;
    list-style: none;
}

.header-menu ul li {
    display: inline-block;
}

.header-menu ul li a {
    display: inline-block;
    margin-right: 23px;
    padding: 36px 0;
    font-weight: 500;
}

.header-menu ul li a:hover{
    color: #2f39e1;
}

.header-menu ul li i {
    display: inline-block;
    font-size: 15px;
    margin-left: 5px;
    color: #2f39e1;
}

.header-button {
    display: inline-block;
}

.header-button a {
    display: inline-block;
    color: #fff;
    padding: 12px 32px;;
    border: 1px solid  #2f39e1;
    background-image: -webkit-linear-gradient(30deg, #2f39e1 50%, transparent 50%);
    background-image: linear-gradient(30deg, #2f39e1 50%, transparent 50%);
    background-size: 500px;
    background-repeat: no-repeat;
    background-position: 0%;
    -webkit-transition: background 300ms ease-in-out;
    transition: background 300ms ease-in-out;
}

.header-button a:hover{
  background-position: 100%;
   color: #2f39e1;
}

.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: #fff !important;
    transition: 0.5s;
    z-index: 999;
    webkit-animation: 300ms running fadeInDown;
    animation: 500ms running fadeInUp;
    animation-name: slideInDown;
}

/*--sub-menu-css--*/
.header-menu ul li .sub-menu {
    position: absolute;
    text-align: center;
    background: #fff;
    padding: 0px 0;
    border-radius: 3px;
    top: 115%;
    opacity: 0;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    z-index: 9999;
    visibility: hidden;
    width: 250px;
    border-top: 3px solid #2f39e1;
    box-shadow: 0 0 2px #2f39e1;
}

.add-new-menubar:hover .sub-menu{
    visibility:visible;
    top:100%;
    opacity:1;
}

.header-menu ul li .sub-menu ul li {
    display: block;
}

.header-menu ul li .sub-menu ul {
    display: block;
    text-align: left;
    
}

.header-menu ul li .sub-menu ul li a {
    display: inline-block;
    padding: 6px 20px;
    font-size: 16px;
    color: #39374d;
    text-transform: capitalize;
    font-weight: 500;
    border: 1px solid #fff;
    width: 100%;
}

.header-menu ul li .sub-menu ul li a:hover{
    color: #2f39e1;
    background: #f3f1fa;
    width: 100%;
    border:1px solid #2f39e1;
}


/*==========================
<--start-hero-Area-->
===========================*/

.hero-area {
    background: url(assets/images/hero-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 800px;
}

.hero-sub-title h4 {
    font-size: 18px;
    color: #fff;
    font-weight: 500;
    margin-bottom: 19px;
}

.hero-main-titel h1 {
    font-size: 60px;
    color: #fff;
    text-transform: unset;
}

.hero-desc p {
    color: #fff;
    line-height: 28px;
    width: 83%;
    padding-top: 26px;
}

.hero-button a {
    padding: 12px 31px;
    color: #2f39e1;
    margin-right: 25px;
    margin-top: 43px;
    display: inline-block;
    font-weight: 500;
    border: 1px solid  #fff;
    background-image: -webkit-linear-gradient(30deg, #fff 50%, transparent 50%);
    background-image: linear-gradient(30deg, #fff 50%, transparent 50%);
    background-size: 500px;
    background-repeat: no-repeat;
    background-position: 0%;
    -webkit-transition: background 300ms ease-in-out;
    transition: background 300ms ease-in-out;
}

.hero-button a:hover{
  background-position: 100%;
   color: #fff;
}

.hero-button a.button-bg-none {
    background: transparent;
    padding: 12px 31px;
    color: #fff;
    margin-right: 25px;
    margin-top: 43px;
    display: inline-block;
    font-weight: 500;
    border: 1px solid #fff;
}

.hero-button a.button-bg-none:hover{
    background: #fff;
    color: #2f39e1;
}
.hero-thumb img {
    position: relative;
    margin-left: 52%;
}


/*==========================
<--start-services-Area-->
===========================*/

.services-area {
    padding: 55px 0 48px;
}

.single-services-box {
    text-align: center;
    border: 1px solid #EEEEEE;
    border-radius: 40px 0 40px 0;
    padding: 40px 26px 40px;
    transition: 0.5s;
}

.single-services-box:hover{
    border-radius: 0 40px 0 40px;
      border: 1px solid #2f39e1;
}

.services-box-content h4 {
    font-size: 22px;
    margin: 25px 0 21px;
}

.services-box-button a {
    color: #fff;
    padding: 12px 32px;
    display: inline-block;
    margin-top: 20px;
    border: 1px solid  #2f39e1;
    background-image: -webkit-linear-gradient(30deg, #2f39e1 50%, transparent 50%);
    background-image: linear-gradient(30deg, #2f39e1 50%, transparent 50%);
    background-size: 500px;
    background-repeat: no-repeat;
    background-position: 0%;
    -webkit-transition: background 300ms ease-in-out;
    transition: background 300ms ease-in-out;
}

.services-box-button a:hover{
  background-position: 100%;
   color: #2f39e1;
}

/*==========================
<--start-section-title-->
===========================*/

.section-title {
    margin-bottom: 51px;
}

.section-title.minus-marin-bottom {
    margin-bottom: 0px;
}

.section-title h4 {
    font-size: 16px;
    color: #102bf3;
    font-weight: 500;
}

.section-title h1 {
    font-size: 35px;
    color: #282828;
    text-transform: unset;
    margin-top: 18px;
}

.section-title p {
    margin-top: 28px;
}

/*=================================
<--start-working-process-area-->
=================================*/

.working-process-area {
    padding: 50px 0 50px;
    background: url(assets/images/working-procces-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}

.single-process-box {
    padding: 0 38px 0;
    position: relative;
}

.porcess-box-content h4 {
    font-size: 22px;
    color: #fff;
    margin: 36px 0 23px;
}

.porcess-box-content p {
    color: #fff;
    line-height: 28px;
}

/*=================================
<--start-about-area-->
=================================*/
.about-area {
    padding: 60px 0 101px;
}

.single-about-thumb img {
    width: 100%;
    margin-left: -10px;
}

.about-content {
    padding-left: 51px;
    position: relative;
}

.about-content-title h4 {
    margin: 0 0 30px;
    font-size: 18px;

}

.about-item-list {
    margin-left: 16px;
}

.about-item-list ul li {
    list-style: none;
    margin-bottom: 4px;
    position: relative;
}

.about-item-list ul li:before {
    position: absolute;
    content: "";
    width: 8px;
    height: 8px;
    left: -16px;
    top: 10px;
    background: #2F35C1;
    border-radius: 50px;
}

.about-button a {
    color: #fff;
    padding: 11px 30px;
    display: inline-block;
    margin-top: 35px;
    border: 1px solid  #2f39e1;
    background-image: -webkit-linear-gradient(30deg, #2f39e1 50%, transparent 50%);
    background-image: linear-gradient(30deg, #2f39e1 50%, transparent 50%);
    background-size: 500px;
    background-repeat: no-repeat;
    background-position: 0%;
    -webkit-transition: background 300ms ease-in-out;
    transition: background 300ms ease-in-out;
}

.about-button a:hover{
  background-position: 100%;
   color: #2f39e1;
}

/*=================================
<--start-counter-area-->
=================================*/

.counter-area {
    padding: 0px 0 113px;
}

.counter-area.inner-area-pd {
    padding: 100px 0 118px;
}

.single-counter-box {
    text-align: center;
}

.counter-content h1 {
    display: inline-block;
    font-size: 36px;
    position: relative;
}

.counter-content h1:before {
    position: absolute;
    content: "";
    width: 52px;
    height: 1px;
    background: #282828;
    left: 26px;
    bottom: -8px;
    display: inline-block;
}

.counter-content span {
    font-size: 36px;
    font-weight: 700;
    color: #282828;
    display: inline-block;
}

.counter-content p {
    font-size: 16px;
    font-weight: 500;
    color: #282828;
    margin-top: 21px;
}

/*=================================
<--start-blog-area-->
=================================*/

.blog-area {
    background-color: #f6f6f6;
    padding: 50px 0 ;
}

.blog-area.blog-grid {
    padding: 108px 0 105px;
}

.blog-area.blog-list-area {
    padding: 119px 0 106px;
}
.blog-area.blog-tow-column {
    padding: 60px 0 98px;
}
.single-blog-box {
    background: #ffff;
    padding: 32px 32px 22px;
    margin-bottom: 22px;
}

.blog-thumb{
    position: relative;
    overflow: hidden;
}

.blog-thumb img {
    width: 100%;
    transition: 0.5s;
}
 
.single-blog-box:hover .blog-thumb img{
    transform: scale(1.1);
}

.meta-price {
    position: absolute;
    left: 29px;
    top: 17px;
}

.meta-price span {
    display: inline-block;
    color: #2d34c0 !important;
    font-size: 12px;
    background: #fff;
    padding: 0px 17px;
    border-radius: 8px;
    font-weight: 600;
}

.blog-content h4 a {
    font-size: 22px;
    color: #000000;
    font-weight: 700;
    margin-top: 17px;
    display: inline-block;
}

.single-blog-box:hover .blog-content h4 a{
    color: #2f39e1;
}

.blog-content p {
    font-size: 16px;
    padding: 22px 0 22px;
}

.blog-box-button a {
    display: inline-block;
    color: #2f39e1;
    font-weight: 500;
}

/*--start-inner-blog-css--*/
.meta-blog {
    margin-top: 14px;
}

.time {
    display: inline-block;
}

.time span i {
    display: inline-block;
    color: #777777;
    font-size: 14px;
}

.lessons {
    display: inline-block;
    padding-left: 28px;
}

.lessons span i {
    font-size: 14px;
    display: inline-block;
}

.blog-content.inner-class h4 a {
    display: inline-block;
    margin-top: 3px;
    line-height: 30px;
}

.blog-content.inner-class p {
    padding: 12px 0 21px;
}

/*=================================
<--start-faqs-area-->
=================================*/

.faqs-area {
    padding: 96px 0 118px;
}

.faqs-content {
    margin-top: 27px;
}

.faqs-content h4 {
    font-size: 22px;
    margin-bottom: 11px;
    display: inline-block;
}

.accordion li {
    position: relative;
    list-style: none;
    background: #fff;
    margin-top: 22px;
    box-shadow: 0 0 1px #a59090;
    padding: 1px 0 15px;
}

.accordion li p {
    display: none;
    font-size: 16px;
    font-weight: 400;
    width: 75%;
    line-height: 25px;
    margin-left: 21px;
    margin-top: -6px;
}

.accordion h3 {
    width: 100%;
    display: block;
    cursor: pointer;
    font-weight: 700;
    line-height: 3;
    font-size: 14px;
    font-size: 0.875rem;
    text-indent: 31px;
    user-select: none;
    font-size: 18px;
    color: #000000;
}

.accordion h3::after {
    width: 8px;
    height: 8px;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    position: absolute;
    right: 23px;
    content: " ";
    top: 38px;
    transform: rotate(403deg);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.accordion p {
  font-size: 0.8125rem;
  line-height: 2;
  padding: 10px;
}

h3.active:after {
    transform: rotate(225deg);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
} 


/*=================================
<--start-teastimonail-area-->
=================================*/

.testimonail-area {
    background: url(assets/images/teasti-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 70px 0 50px;
}

.single-testi-box {
    padding: 22px 56px 24px;
    margin-top: 50px;
    margin-left: 28px;
    position: relative;
    background: url(../images/testi-box-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}


.testi-thumb {
    position: relative;
    margin-top: -67px;
}

.testi-content h4 {
    font-size: 18px;
    margin: 17px 0 10px;
}

.testi-content span {
    font-size: 14px;
    display: inline-block;
}

.testi-content p {
    font-size: 14px;
    padding: 13px 0 22px;
}

.testi-star-icon ul li {
    display: inline-block;
    color: #3979CF;
    font-size: 16px;
    font-weight: 600;
    margin-right: 3px;
}

.testi-star-icon ul li i {
    display: inline-block;
    color: #3979CF;
    font-size: 15px;
}

/*=================================
<--start-contact-area-->
=================================*/

.contact-area {
    padding: 118px 0 118px;
}

/*--add-bg-color-inner-team---*/
.contact-area.add-bg-color {
    background-color: #f6f6f6;
}

.contact-thumb img {
    width: 100%;
    margin-left: -25px;
}

.contact-right-content {
    box-shadow: 0 0 9px rgba(2,2,2,0.15);
    padding: 39px 53px 52px;
    background: #fff;
}

.contact-form input {
    display: inline-block;
    background: transparent;
    border: 1px solid #EEEEEE;
    width: 100%;
    outline: 0;
    margin-bottom: 22px;
    height: 70px;
    padding: 0 22px 0;
    border-radius: 3px;
}

.contact-form textarea {
    display: inline-block;
    width: 100%;
    height: 120px;
    padding: 18px 17px 0;
    outline: 0;
    border: 1px solid #EEEEEE;
}

.submit-button button {
    background: transparent;
    color: #fff;
    border: transparent;
    padding: 13px 19px;
    margin-top: 29px;
    border: 1px solid  #2f39e1;
    background-image: -webkit-linear-gradient(30deg, #2f39e1 50%, transparent 50%);
    background-image: linear-gradient(30deg, #2f39e1 50%, transparent 50%);
    background-size: 500px;
    background-repeat: no-repeat;
    background-position: 0%;
    -webkit-transition: background 300ms ease-in-out;
    transition: background 300ms ease-in-out;
}

.submit-button button:hover{
  background-position: 100%;
   color: #2f39e1;
}

/*=================================
<--start-google-mag-area-->
=================================*/

.google-map iframe {
    width: 100%;
    height: 600px;
    border: transparent;
}


/*=================================
<--start-footer-area-->
=================================*/

.footer-area {
    background: url(assets/images/footer-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 70px 0 30px;
    margin-top: -9px;
}

.footer-widget-desc p {
    font-size: 16px;
    color: #fff;
    padding: 32px 0px 23px;
}

.footer-social-icon ul li {
    display: inline-block;
    list-style: none;
    color: #fff;
    font-weight: 500;
    margin-right: 12px;
}

.footer-social-icon ul li i {
    display: inline-block;
    color: #fff;
    font-size: 15px;
    transition: 0.5s;
}

.footer-social-icon ul li i:hover{
    color:#2f39e1;
}

.footer-widget-title h4 {
    color: #fff;
    font-size: 22px;
    margin-bottom: 37px;
    position: relative;
}

.footer-widget-title h4:before {
    position: absolute;
    content: "";
    width: 58px;
    height: 1px;
    left: 4px;
    bottom: -17px;
    background: #fff;
    display: inline-block;
}

.footer-widget-link ul li {
    list-style: none;
    position: relative;
    margin-left: 14px;
}

.footer-widget-link ul li:before {
    position: absolute;
    content: "";
    width: 5px;
    height: 5px;
    top: 11px;
    left: -14px;
    background: #fff;
    border-radius: 50px;
}

.footer-widget-link ul li a {
    color: #fff;
    display: inline-block;
    margin-bottom: 6px;
}

.footer-widget-link ul li a:hover{
    color: #2f39e1;
}

.footer-widget-address-iocn i {
    float: left;
    margin-top: 11px;
    font-size: 25px;
    color: #ffff;
    margin-right: 17px;
}

.footer-widget-address-text h4 {
    font-size: 16px;
    color: #fff;
    text-transform: capitalize;
    font-weight: 400;
    margin-bottom: 4px;
}

.footer-widget-address-text p a {
    display: inline-block;
    color: #fff;
}

.footer-widget-address-text p a:hover{
    color:#2f39e1;
}

/*=================================
<--start-coppy-right-area-->
=================================*/
.coppy-right-area {
    padding: 5px 0;
}

.coppy-right-text span i {
    font-size: 12px;
    color: #2d34c0;
    display: inline-block;
    margin-right: 6px;
}

.coppy-right-text span {
    font-size: 16px;
    color: #2d34c0;
    display: inline-block;
    margin-right: 6px;
}

.coppy-right-menu {
    text-align: right;
}

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

.coppy-right-menu ul li a {
    display: inline-block;
    color: #2d34c0;
    font-size: 17px;
}


/*=================================
<--start-scroll-up-area-->
=================================*/

.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, #2f39e1 0%, #2f39e1 100%);
    background-image: -webkit-linear-gradient(0deg, #2f39e1 0%, #2f39e1 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, #2f39e1 0%, #2f39e1 100%);
    background-image: -ms-linear-gradient(0deg, #2f39e1 0%, #2f39e1 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: #2f39e1;
}

 .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, #2f39e1 0%, #2f39e1 100%);
    background-image: -webkit-linear-gradient(0deg, #2f39e1 0%, #2f39e1 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); } }




/*=================================
<--start-breadcumb-area-->
=================================*/

.breadcumb-area {
    background: url(assets/images/breadcumb-imgs.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 100px 0 110px;
}

.breadcumb-content h1 {
    font-size: 70px;
    color: #fff;
}

.breadcumb-content ul li {
    display: inline-block;
    list-style: none;
    font-size: 22px;
    color: #fff;
    margin-top: 14px;
}

.breadcumb-content ul li a {
    display: inline-block;
    color: #fff;
    font-size: 22px;
}

/*--inner-about-area--*/
.section-title.minus-marin-bottom h1 {
    line-height: 28px;
}
.about-button.add-class {
    margin-top: -36px;
}

/*=================================
<--start-pricing-area-->
=================================*/

.pricing-area {
    padding: 105px 0 117px;
}

.pricing-content {
    background-color: #f6f6f6;
    padding: 0 0 39px;
}

.pricing-head {
    border-bottom: 1px solid #e7e2e2ee;
}

.pricing-head-title h4 {
    background-color: #2f39e1;
    color: #fff;
    text-transform: capitalize;
    text-align: center;
    padding: 28px 0;
    font-size: 22px;
    margin: 0;
}

.pricing-rate h4 {
    text-align: center;
    font-size: 40px;
    color: #282828;
    padding: 16px 0 21px;
}

.pricing-head-text p {
    text-align: center;
    width: 50%;
    margin: auto;
    margin-bottom: 27px;
}

.pricing-body {
    margin-left: 29%;
    margin-top: 27px;
    position: relative;
}

.price-featur ul li {
    list-style: none;
    margin-bottom: 4px;
    position: relative;
}

.price-featur ul li:before {
    position: absolute;
    content: "";
    width: 8px;
    height: 8px;
    top: 11px;
    left: -22px;
    background: #2f39e1;
    border-radius: 60px;
}

.picing-button a {
    display: inline-block;
    color: #fff;
    padding: 12px 30px;
    border-radius: 5px;
    margin-top: 40px;
    border: 1px solid  #2f39e1;
    background-image: -webkit-linear-gradient(30deg, #2f39e1 50%, transparent 50%);
    background-image: linear-gradient(30deg, #2f39e1 50%, transparent 50%);
    background-size: 500px;
    background-repeat: no-repeat;
    background-position: 0%;
    -webkit-transition: background 300ms ease-in-out;
    transition: background 300ms ease-in-out;
}

.picing-button a:hover{
  background-position: 100%;
   color: #2f39e1;
}


/*=================================
<--start-servcies-area-tow-->
=================================*/

.servcies-area-tow {
    padding: 50px 0 ;
}

.single-services-box-tow {
    background-color: #f6f6f6;
 
    text-align: center;
    margin-bottom:40px;
}

.services-thumb{
    overflow: hidden;
}

.services-thumb img {
    width: 100%;
    transition: 0.5s;
}

.single-services-box-tow:hover .services-thumb img{
    transform: scale(1.1);
}

.servcies-content {
    padding: 10px 10px 20px ;
    text-align: center;
}

.servcies-content h4 a {
    font-size: 22px;
    color: #282828;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 22px;
}

.single-services-box-tow:hover .servcies-content h4 a{
    color:#2F39E1;
}

.servcies-box-butn a {
    display: inline-block;
    color: #fff;
    padding: 11px 31px;
    border: 1px solid  #2f39e1;
    background-image: -webkit-linear-gradient(30deg, #2f39e1 50%, transparent 50%);
    background-image: linear-gradient(30deg, #2f39e1 50%, transparent 50%);
    background-size: 500px;
    background-repeat: no-repeat;
    background-position: 0%;
    -webkit-transition: background 300ms ease-in-out;
    transition: background 300ms ease-in-out;
}

.servcies-box-butn a:hover{
  background-position: 100%;
   color: #2f39e1;
}

/*=================================
<--start-team-area-->
=================================*/

.team-area {
    padding: 106px 0 120px;
}

.single-team-box {
    background-color: #f6f6f6;
    padding: 25px 24px 29px;
    text-align: center;
    margin-right: 30px;
}

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

.team-content h4 a {
    font-size: 22px;
    color: #282828;
    font-weight: 700;
    display: inline-block;
    margin-top: 15px;
}

.team-content p {
    font-size: 14px;
    margin-top: 10px;
}

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

.team-social-icon ul li i {
    display: inline-block;
    font-size: 12px;
    margin-left: 3px;
    background: #C9C9C9;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #fff;
    border-radius: 50px;
    margin-top: 30px;
    transition: 0.5s;
}

.team-social-icon ul li i:hover{
    background: #2f39e1;
}



/*=================================
<--start-service-detials-area -->
=================================*/

.service-detials-area {
    padding: 120px 0 98px;
}

/*widget search*/

.widget_search {
    padding: 30px 30px 30px;
    border-radius: 4px;
    margin-bottom: 30px;
    background: #fff;
    box-shadow: 0px 0px 70px rgb(0 0 0 / 5%);
}


.widget_search form {
    position: relative;
}

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

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

/*widget categories box*/

.widget-categories-box {
    background: #fff;
    padding: 42px 20px 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 #2f39e1;
    padding: 0px 0 15px;
    margin: 0 0 30px;
    position: relative;
    padding-left: 10px;
}

.categories-title h4:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 24px;
    width: 3px;
    background: #2f39e1;
}

/*categories menu*/

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

.widget-categories-menu ul li {
    display: block;
    list-style: none;
    margin-bottom: 0px;
    background: transparent;
    padding: 0px 5px 0px 6px;
    border-radius: 4px;
    transition: .5s;
    border: 1px dashed #2f39e1;
    position: relative;
    z-index: 1;
}

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

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

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

.widget-categories-menu ul li a {
    display: block;
    color:#2f39e1;
    transition: .5s;
}

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

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


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

.widget-categories-menu ul li:hover a {
    color: #fff;
}
.widget-categories-menu ul  ul{
	margin:4px 0 12px;
}
.widget-categories-menu ul  ul li:hover a{
	color: #000;
}
.pdf-button a {
    display: block;
    background:#2f39e1;
    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: #F3F3F5;
    overflow: hidden;
}

.recent-widget-thumb {
    float: left;
    margin-right: 25px;
}

.sidber-widget-recent-post .recent-widget-content {
    padding: 10px 0 10px 10px;
}

.sidber-widget-recent-post .recent-widget-content a {
    color: #222;
    font-size: 18px;
    font-weight: 700;
    line-height: 26px;
}

.recent-widget-content a:hover{
    color:#2f39e1 ;
}

.sidber-widget-recent-post .recent-widget-content span i {
    margin-right: 7px;
    color: #222;
}

.recent-widget-content span {
    font-size: 14px;
    color: #2f39e1;
    padding-top: 0px;
    display: block;
}
/* 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;
}

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

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

/* 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 #2f39e1;
    padding: 3px 20px;
    margin: 4px 3px;
    border-radius: 2px;
    color: #2f39e1;
    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: #2f39e1;
    z-index: -1;
    border-radius: 3px;
    transition: .5s;
}

.widget-tags a:hover{
    color: #fff;
    border-color: #2f39e1;
}

.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: 36px;
    text-transform: capitalize;
}
.service-details-video-thumb {
    position: relative;
    padding-top: 20px;
}

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

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

.service-details-overview-text p {
    text-align: justify;
}


.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: #2f39e1;
    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: #F3F3F5;
    padding: 30px 30px 10px;
    margin-bottom: 30px;
    position: relative;
}

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

.service-details-number h2 {
    font-size: 48px;
    text-transform: none;
    margin: 0;
    margin: 0;
    color: transparent !important;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #0E1317;
    opacity: .5;
}

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

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

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

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



/*=================================
<--start-blog-detials-area -->
=================================*/

.blog-detials-area {
    padding: 60px 0 128px;
}

.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: #F3F3F5;
    padding: 16px 30px;
}

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

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

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

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

.blog-details-thumb img {
    
}
.sidber-widget-recent-post  img{
	width: 100%
}
.blog-details-des {
    padding: 30px 0 10px;
}

.blog-details-blockquote {
    background: rgba(240,40,48,0.1);
    padding: 40px 38px 26px;
    position: relative;
    margin-bottom: 10px;
}

.blog-details-blockquote::before {
    position: absolute;
    content: "";
    background: url(assets/images/resource/quite.png);
    top: 40px;
    left: 60px;
    height: 75px;
    width: 75px;
    background-repeat: no-repeat;
}

.blog-details-blockquote blockquote {
    font-size: 18px;
    color: #0E1317;
    font-weight: 500;
    font-family: 'Open Sans';
}

.blog-details-video-thumb {
    margin-top: 30px;
    position: relative;
}

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

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

.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 {
    width: 80px;
    height: 80px;
    line-height: 80px;
    display: inline-block;
    text-align: center;
    border-radius: 100%;
    position: relative;
    color: #2f39e1;
    -webkit-animation: ripple-white 1s linear infinite;
    animation: ripple-blue 1s linear infinite;
    -webkit-transition: .5s;
    background: #fff;
    font-size: 25px;
    z-index: 1;
}

@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)
    }
}


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

.blog-details-content-list {
    margin-bottom: 30px;
}

.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;
}

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

.blog-details-button a {
    display: inline-block;
    border: 2px solid #2f39e1;
    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: linear-gradient(to right, #2f39e1 6%, #2f39e1 96%);
    z-index: -1;
    border-radius: 3px;
    transition: .5s;
}

.blog-details-button a.active {
    border-color: #2f39e1;
    background: transparent;
    color: #2f39e1;
    transition: .5s;
    margin-left: 10px;
}

.blog-details-button a.active:before{
    background: transparent;
}

.blog-details-button a.active:hover:before{
    background: linear-gradient(to right, #2f39e1 6%, #2f39e1 96%);
}

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

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

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

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

/* Blog Details Author */

.blog-details-author {
    border-top: 2px solid #CED3D9;
    padding-top: 40px;
    margin-top: 32px;
}

.blog-details-author-inner {
    background: #F3F3F5;
    padding: 30px 30px 25px;
}

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

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

/* 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: linear-gradient(to right, #2f39e1 6%, #2f39e1 96%);
    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 #2f39e1;
}

/* Blog Details Contact */

.blog-details-contact {
    border-top: 2px solid #2f39e1;
    margin: 12px 20px 10px;
    padding-top: 8px;
}

.input-box input {
    outline: oldlace;
    width: 100%;
    height: 45px;
    margin-bottom: 25px;
    border-radius: 5px;
    border: 1px solid #EEEE;
    padding: 0 20px;
}

.input-box textarea {
    width: 100%;
    height: 200px;
    outline: 0;
    border: 1px solid #EEE;
    border-radius: 5px;
    padding: 12px 23px 0;
}

.input-button button {
    background: #2f39e1;
    color: #fff;
    border: transparent;
    padding: 12px 18px;
    border-radius: 5px;
    margin-top: 28px;
}




/*=================================
<--start-Product-area -->
=================================*/

.Product-area {
    padding: 60px 0 80px;
}
.single-product-box {
    position: relative;
    overflow: hidden;
    transition: 0.5s;
    margin-bottom: 40px;
}

.product-box-thumb {
    overflow: hidden;
    background: #F1F6FA;
}

.product-box-thumb img{
    width:100%;
    transition:0.5s;
}

.single-product-box:hover .product-box-thumb img{
    transform:scale(1.1)
}

.product-catagory {
    position: absolute;
    top: 1px;
    left: 0px;
}

.product-catagory span a {
    display: inline-block;
    font-size: 18px;
    color: #ffffff;
    text-align: center;
    background: #2f39e1;
    padding: 4px 25px;
    border-radius: 5px 0 0 0;
}

.product-box-icon {
    position: absolute;
    left: -206px;
    top: 55%;
    transition: 0.5s;
}

.single-product-box:hover .product-box-icon {
    left: 18%;
}

.product-box-icon ul li {
    display: inline-block;
    margin-right: 2px;
}

.product-box-icon ul li i {
    display: inline-block;
    background: #fff;
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    border-radius: 5px;
    color: black;
    font-size: 24px;
    transition:0.5s;
}

.product-box-icon ul li i:hover{
    background:#2f39e1;
    color:#fff;
}

.product-box-content {
    text-align: center;
    margin-top: 24px;
}

.product-box-content-title h6 {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
}

.product-box-content-title span i {
    display: inline-block;
    font-size: 20px;
    color: #2f39e1;
    margin: 2px -7px;
}

.dollar {
    font-size: 16px;
    color: #2f39e1;
}

.product-box-star-icon {
    text-align: center;
}

.product-box-star-icon ul li {
    display: inline-block;
}

.product-box-star-icon ul li i {
    display: inline-block;
    color: #2f39e1;
    margin-top: 9px;
} 
/*--end-Product-area-css--*/



/*=================================
<--start-product-detials-area -->
=================================*/

.product-detail-area {
    padding: 0 0 120px;
}

.pro-detalis-content h1 {
    font-size: 46px;
    font-weight: 500;
    margin-bottom: 30px;
}
.pro-detalis-text p {
    font-size: 16px;
    padding: 0 0 25px;
}
.pro-detalis-price {
    display: flex;
    padding-bottom: 18px;
}
.title h5 {
    font-size: 30px;
    margin-top: -18px;
    font-weight: 500;
}
.price p {
    font-size: 30px;
    font-weight: 500;
    color: #222;
    padding-left: 50px;
}

.title {
    float: left;
    margin-top: 17px;
    margin-right: 34px;
    position: relative;
    margin-bottom: 12px;
}

.point span {
    display: inline-block;
    cursor: pointer;
    margin: 0 -3px;
}
.minus {
    background:#2f39e1;
    display: inline-block;
    width: 45px;
    height: 41px;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    line-height: 41px;
    text-align: center;
    cursor: pointer;
}
.num {
    border: 1px solid #2f39e1;
    font-size: 22px;
    font-weight: 600;
    color: #222;
    width: 60px;
    height: 41px;
    line-height: 38px;
    text-align: center;
}
.plus {
    background: #2f39e1;
    display: inline-block;
    width: 45px;
    height: 41px;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    line-height: 41px;
    text-align: center;
    cursor: pointer;
}

.product-details-button {
    margin-bottom: 28px;
    margin-top: 22px;
    position: relative;
}

.product-details-button ul li {
    display: inline-block;
}

.product-details-button ul li a {
    display: inline-block;
    border: 1px solid black;
    padding: 7px 22px;
    color: #2f39e1;
    font-size: 16px;
    font-weight: 500;
}
.product-details-button ul li a:hover{
    background:#2f39e1;
    color:#fff;
    border:1px solid #2f39e1;
}
.product-details-button ul li .bg-transparent {
    border: transparent !important;
}
.product-details-button ul li i {
    display: inline-block;
    color: #2f39e1;
    border: 1px solid #222;
    padding: 7px 14px;
    border-radius: 5px;
    transition:0.5s;
}
.product-details-button ul li i:hover{
    background:#2f39e1;
    color:#fff;
    border:1px solid #2f39e1;
}
.product-social-share {
    display: flex;
}

.product-social-share ul li {
    display: inline-block;
}
.product-social-share ul li i {
    color: #2f39e1;
    font-size: 18px;
    transition: 0.5s;
    width: 41px;
    height: 41px;
    line-height: 40px;
    text-align: center;
    margin-top: -6px;
}
.product-social-share ul li i:hover {
    background: #2f39e1;
    border-radius: 3px;
    color: #fff;
}


.product-details-images img {
    width: 100%;
}

 /*start product-details-2-css*/

/* Position the image container (needed to position the left and right arrows) */
.container {
  position: relative;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev, .next {
    display: none;
}
/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-container {
    text-align: center;
    background-color: #2f39e1;
    padding: 6px 25px;
    color: white;
}
.caption-container p {
    margin-bottom: 0;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.column {
  float: left;
  width: 16.66%;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

/*--start-tab-area-css--*/
.col-lg-12.bd-t {
    border-top: 1px solid #222;
    padding-left: 0;
}

.tab-area {
    padding: 0 0 120px;
}

.tab-area .blog-details-comment {
    width: 48%;
}

.tab-area  .blog-details-comment.reply{
    margin-left: 0;
}

.w3-bar-item.add-active{
    background: #2f39e1;
}
.w3-bar-item {
    background: #222;
    color: #fff;
    border: transparent !important;
    padding: 14px 27px;
    margin-right: 9px;
    margin-bottom: 25px;
    transition: 0.5s;
}

.w3-bar-item:hover {
    background: #2f39e1;
}

#London p {
    font-size: 16px;
    width: 77%;
    text-align: justify;
    margin-top: 7px;
    margin-bottom: 12px;
    position: relative;
}

.pro-feature ul li a {
    display: inline-block;
    margin-top: 4px;
    margin-left: 20px;
}
.pro-feature ul li{
    list-style: none;
    position: relative;
}
.pro-feature ul li::before {
    position: absolute;
    content: "";
    width: 9px;
    height: 9px;
    background: #2f39e1;
    left: -1px;
    top: 13px;
    border-radius: 50px;
}
 
#Paris ul {
    list-style: none;
}

#Paris ul li a {
    display: inline-block;
    color: #222;
    line-height: 34px;
}

#Paris ul li a:hover {
    color: #2f39e1;
}

.author-comment-box.box-padding {
    width: 64%;
    margin-top: 65px;
}
/*--end-tab-area-css--*/





/*=================================
<--start-account-area -->
=================================*/
.account-area {
    padding: 120px 0 128px;
}

.account-content h3 {
    font-size: 24px;
    color: #282828;
    font-weight: 400;
}

.veiw-shope {
    float: right;
}

.veiw-shope a {
    display: inline-block;
    background: #2f39e1;
    color: #fff;
    font-size: 16px;
    padding: 6px 18px;
    border-radius: 5px;
}

.d-single-info {
    border: 1px solid #ccc;
    padding: 18px 19px;
    border-radius: 5px;
    margin-bottom: 55px;
    margin-top: 16px;
}

.user-name p {
    margin-bottom: 0;
    font-size: 16px;
    color: #282828;
}

.tab ul li {
    list-style: none;
    border-bottom: 1px solid #ccc;
    width: 95%;
}

.tab ul li a {
    display: inline-block;
    color: #222;
    padding: 20px 0px 20px;
}

.tab button {
    padding: 22px 0;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
    font-size: 16px;
    background: transparent;
}

/* Style the tab content */

.tabcontent {
    padding: 0 17px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.tabcontent h3 {
    font-size: 24px;
    font-weight: 500;
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
}

.tabcontent p {
    padding-top: 24px;
    padding-bottom: 24px;
    margin-bottom: 0;
}

.table.add-margin {
    margin-top: 30px;
}

.table.add-margin thead tr th {
    font-weight: 600;
}

.table thead th {
    border-bottom: 2px solid #999393;
}

.table td, .table th {
    padding: .75rem;
    border: transparent;
}

.add-border tr {
    border-bottom: 1px solid #ccc;
}

.add-border.bg tr td a {
    display: inline-block;
    background: #2f39e1;
    color: #fff;
    padding: 3px 11px;
    border-radius: 3px;
    font-size: 15px;
}

.add-border tr td {
    font-size: 16px;
}

.add-border tr td a {
    display: inline-block;
    background: #2f39e1;
    color: #fff;
    padding: 6px 8px;
    border-radius: 3px;
    font-size: 15px;
}

.tab button a {
    color: #222;
}




/*=================================
<--start-account-detials-area -->
=================================*/
.account-details-area {
    padding: 120px 0 130px;
}
.details-form {
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
    padding: 60px;
    padding-top: 24px;
    border-radius: 5px;
}

.input-radio {
    margin-bottom: 12px;
}

.account-input-box input {
    outline: 0;
    width: 100%;
    border: 1px solid #ccc;
    padding: 10px 0;
    border-radius: 5px;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 35px;
}

.slider {
    padding-left: 5px;
    color: #222;
}

.save-button button {
    background: #2f39e1;
    border: transparent;
    color: #fff;
    padding: 6px 20px;
    font-size: 18px;
    border-radius: 3px;
    margin-top: 20px;
    border: 1px solid #2f39e1;
    transition: 0.5s;
}

.save-button button:hover{
    background:transparent;
    border:1px solid #2f39e1;
    color:#2f39e1;
}


/*===========================
<-- DreamHub 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: 9999;
}
.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: #9A241C;
    -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: #2f39e1;
    -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;
}