/*===============================================
Template Name: dreamhub-Fitness HTML5 Template
Version: 0.1
================================================*/

/*TABLE OF CONTENTS*/
/*=====================
01. Start dreamhub Header Menu Area
02. Start dreamhub Hero Area
03. Start dreamhub About Area
04. Start dreamhub Program Area
05. Start dreamhub Courses Area
06. Start dreamhub Register Area
07. Start dreamhub Protfolio Area
08. Start dreamhub Faq Area
09. Start dreamhub News  Area
10. Start dreamhub Foter Area
=======================*/

/*================================================
 <--Start dreamhub Header Menu Area Css-->
=================================================*/


/* dreamhub btn */
.header-area .dreamhub-btn {
    text-align: right;
}
.dreamhub-btn a {
  display: inline-block;
  background: #0067ce;
  padding: 8px 22px;
  font-size: 16px;
  color: #fefeff;
  font-weight: 500;
  position: relative;
  z-index: 1;
  transition: .5s;
  text-decoration: none;
}

.dreamhub-btn a::before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #090909;
  clip-path: polygon(50% 0,50% 0,50% 50%,50% 100%,50% 100%,50% 50%);
  z-index: -1;
  transition: .5s;
}
.dreamhub-btn a:hover::before{
  clip-path: polygon(25% -70%,75% -70%,120% 50%,75% 170%,25% 170%,-20% 50%);
}

.dreamhub-btn a i {
    display: inline-block;
    padding-left: 8px;
} 

/*header-sitcky*/
.sticky-nav {
    left: 0;
    margin: auto;
    position: fixed !important;
    top: 0;
    width: 100%;
    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;
}


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

.header-area {
    position: relative;
}

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

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

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

.header-menu ul li a {
    display: inline-block;
    font-size: 17px;
    margin-right: 40px;
    padding: 35px 0;
    font-weight: 500;
    color: #090909;
    position: relative;
    font-family: "Barlow";
}

.header-menu ul li a::before {
    position: absolute;
    content: "";
    width: 0%;
    height: 1px;
    bottom: 30px;
    left: 0;
    background: #2D69FF;
    transition: 0.5s;
}

.header-menu ul li a i {
    font-size: 14px;
    padding-left: 3px;
    display: inline-block;
}

.header-menu ul li a:hover::before{
    width: 100%;
}

.header-menu ul li a:hover {
  color: #0067ce;
}


/*sub-menu*/

.header-menu ul li .sub-menu {
    position: absolute;
    width: 200px;
    display: block;
    text-align: left;
    background: #2D69FF;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
    top: 150%;
}

.header-menu ul li:hover .sub-menu{
    opacity: 1;
    top: 100%;
    visibility: visible;
}

.header-menu ul li .sub-menu li a {
    display: block;
    padding: 9px 19px;
    color: #fff;
    width: 200px;
    border: 1px solid #2D69FF;
}

.header-menu ul li .sub-menu li a:hover{
    background: #fff;
    color: #2D69FF;
    border: 1px solid #2D69FF;
}

.header-menu ul li .sub-menu li a:before {
    position: inherit !important;
}



/* hero btn */
.dreamhub-btn.hero {
  margin: 0;
}
.dreamhub-btn.hero a {
  padding: 14px 32px;
  transition: .5s;
}
.dreamhub-btn.hero a:hover{
  color:#0067ce ;
}
.dreamhub-btn.hero a::before{
  background: #ffff;
}
.dreamhub-btn.hero a i {
  margin-left: 8px;
}

/* feature area btn */
.dreamhub-btn.hero.feature a::before {
  background: #090909;
}
.dreamhub-btn.hero.feature a:hover{
  color: #fff;
}

/* about btn */
.dreamhub-btn.about {
  margin: 24px 0 0;
}
.dreamhub-btn.about a {
  padding: 11px  29px;
}

/* call do action btn */
.dreamhub-btn.call {
  margin-left: 0;
}
.dreamhub-btn.call a {
  background: #ffffff;
  color: #090808;
  font-weight: 600;
  padding: 12px 25px;
}
.dreamhub-btn.call a:hover{
  color: #0067ce;
}
/*================================================
 <--Start dreamhub Hero  Area Css-->
=================================================*/

.hero-area {
  background: url(assets/images/hero-bg.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 30px 0 0;
}
.hero-content-sub-title h5 {
  font-size: 18px;
  line-height: 33px;
  color: #fefefe;
  font-weight: 500;
  font-family: "Poppins";
}
.hero-content-main-title h1 {
  font-size: 66px;
  line-height: 80px;
  color: #ffffff;
  font-weight: 700;
  font-family: "Poppins";
}
.hero-content-discription p {
  opacity: 0.502;
  font-size: 16px;
  line-height: 24px;
  color: #ffffff;
  font-weight: 400;
  font-family: "Rubik";
  margin: 13px 0 34px;
}


/*================================================
 <--Start dreamhub Section title  Css-->
=================================================*/
/* section title */
.section-main-title h2 {
  font-size: 46px;
  color: #0c0e27;
  font-weight: 600;
  font-family: "Poppins";
  margin-bottom: 10px;
}
.section-discription {
  width: 54%;
  margin: auto;
}
.section-discription p {
  font-size: 16px;
  line-height: 24px;
  color: #616161;
  font-weight: 400;
  font-family: "Poppins";
  margin-bottom: 62px;
}

/* feature area section title */
.section-sub-title.feature h5 {
  font-size: 18px;
  color: #0067ce;
  font-weight: 500;
  font-family: "Poppins";
  margin-bottom: 15px;
}
.section-main-title.feature h3 {
  font-size: 30px;
  line-height: 45px;
  color: #090909;
  text-transform: uppercase;
  font-weight: 600;
  font-family: "Poppins";
  margin: 0;
}
.section-discription.feature {
  width: 87%;
  margin-top: 60px;
  margin-bottom: 86px;
}

/* call do action section title */
.section-main-title.call h2 {
  color: #ffffff;
  margin-bottom: 18px;
}
.section-discription.call {
  width: 60%;
}
.section-discription.call p {
    color: #fff;
    margin-bottom: 28px;
    font-size: 15px;
    padding: 5px 0 5px;
}
/* call do action syle two section title */
.section-main-title.style-two h2 {
  color: #fff;
  position: relative;
  margin-left: 40px;
}
.section-main-title.style-two h2::before {
  position: absolute;
  content: "";
  width: 4px;
  height: 146px;
  background: #0066cb;
  left: -43px;
  top: -12px;
}
/*================================================
 <--Start dreamhub Feature  Area Css-->
=================================================*/
.feature-area {
  padding: 96px 0 100px;
}
.feature-single-box {
  position: relative;
  overflow: hidden;
  margin-bottom: 58px;
}
.feature-single-box::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 0;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  background: rgba(0,103,206,0.9);
  transition: .5s;
}
.feature-single-box:hover::before{
 width: 100%;
}
.feature-thumb img {
  width: 100%;
}
.feature-thumb-title {
  position: absolute;
  bottom: 32px;
  left: 21px;
  transition: .5s;
}
.feature-single-box:hover .feature-thumb-title{
  bottom: -28px;
  opacity: 0;
}
.feature-thumb-title h4 {
  font-size: 18px;
  color: #070707;
  font-weight: 600;
  font-family: "Poppins";
  padding: 7px 10px;
  background: #ffffff;
}

.feature-numbar {
  position: absolute;
  top: 13px;
  left: -38px;
  transition: .5s;
}
.feature-single-box:hover .feature-numbar{
  left: 35px;
}
.feature-numbar h3 {
  font-size: 30px;
  color: #ffffff;
  font-weight: 600;
  font-family: "Poppins";
}
.feature-content {
  position: absolute;
  bottom: -64px;
  left: 37px;
  transition: .5s;
}
.feature-single-box:hover .feature-content{
  bottom: 36px;
}

.feature-content h4 a{
  font-size: 20px;
  line-height: 20px;
  color: #ffffff;
  font-weight: 600;
  font-family: "Poppins";
}

.feature-content h6 {
  font-size: 16px;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 600;
  font-family: "Poppins";
}



/*================================================
 <--Start dreamhub Service  Area Css-->
=================================================*/
.service-area {
  background: #f0f9fc;
  padding: 100px 0 100px;
}
.service-single-box {
  background: #ffffff;
  filter: drop-shadow(0px 15px 125px rgba(0,0,0,0.14));
  text-align: center;
  padding: 56px 0 40px;
  margin-bottom: 65px;
}
.service-content h4 {
  font-size: 20px;
  color: #0c0e27;
  font-weight: 600;
  font-family: "Poppins";
  margin: 38px 0 4px;
}
.service-content p {
  font-size: 16px;
  color: #616161;
  font-weight: 400;
  font-family: "Poppins";
  margin: 0 0 8px;
}
.service-content a {
  display: inline-block;
  text-decoration: none;
  font-size: 16px;
  color: #000000;
  font-weight: 500;
  font-family: "Poppins";
  transition: .5s;
}
.service-single-box:hover .service-content a{
  color: #0067ce;
}


/*================================================
 <--Start dreamhub About  Area Css-->
=================================================*/
.about-sub-title h6 {
  font-size: 18px;
  line-height: 54px;
  color: #000000;
  font-weight: 500;
  font-family: "Barlow";
  margin-bottom: 7px;
}
.about-discription {
  width: 87%;
}
.about-list ul {
  list-style: none;
}
.about-list ul li {
  display: block;
  margin-top: 10px;
  font-size: 18px;
  color: #070707;
  font-weight: 500;
  font-family: "Barlow";
}
.about-list ul li i {
  margin-right: 9px;
  color: #0067ce;
}


/*================================================
 <--Start dreamhub Portfolio  Area Css-->
=================================================*/
.portfolio-area {
  padding: 100px 0 100px;
  background: #e8f0f2;
}


/* owl nav css */
.owl-nav {
  text-align: center;
  margin-top: 23px;
}
.owl-prev {
  display: inline-block;
}
.owl-prev i {
  height: 44px;
  width: 58px;
  border: 1px solid #0067ce;
  display: inline-block;
  text-align: center;
  line-height: 44px;
  color: #0067ce;
  font-size: 20px;
  transition: .5s;
}
.owl-prev i:hover{
  background:#0067ce;
  color: #ffff;
}
.owl-next {
  display: inline-block;
  margin-left: 23px;
}
.owl-next i {
  height: 44px;
  width: 58px;
  border: 1px solid #0067ce;
  display: inline-block;
  text-align: center;
  line-height: 44px;
  color: #0067ce;
  font-size: 20px;
  transition: .5s;
}
.owl-next i:hover{
  background:#0067ce;
  color: #ffff;
}

/* testimonial nav */
.testimonial-area .owl-nav {
  text-align: left;
  margin-top: 10px;
}

/*================================================
 <--Start dreamhub Team  Area Css-->
=================================================*/
.team-area{
  padding: 100px 0 100px;
}
.team-thumb {
  position: relative;
}
.team-thumb img {
  width: 100%;
}
.team-social-icon {
  position: absolute;
  bottom: 31px;
  right: 29%;
}
.team-social-icon ul {
  list-style: none;
  background: rgba(1,1,1,0.7);
  padding: 10px 20px;
}
.team-social-icon ul li {
  display: inline-block;
  margin: 0 10px 0;
}

.team-social-icon ul li a i {
    color: #ffff;
    transition: .5s;
}

.team-content {
  text-align: center;
  background: #ffffff;
  padding: 15px 0 0;
}
.team-content h4 {
  font-size: 20px;
  color: #000000;
  font-weight: 600;
  font-family: "Poppins";
}
.team-content h6 {
  font-size: 14px;
  color: #0067ce;
  font-weight: 400;
  font-family: "Poppins";
}

.team-social-icon ul li a:hover i {
    color: #0067ce;
}



/*================================================
 <--Start dreamhub Testimonial  Area Css-->
=================================================*/
.testimonial-area {
  background: #e8f0f2;
}
.testimonial-rating i {
  font-size: 16px;
  color: #0067ce;
  margin-right: 4px;
}
.testimonial-discription p {
  font-size: 24px;
  line-height: 40px;
  color: #070707;
  font-weight: 500;
  font-style: italic;
  font-family: "Poppins";
  margin: 20px 0 0;
  width: 95%;
}



/*================================================
 <--Start dreamhub Blog  Area Css-->
=================================================*/
.blog-area {
  padding: 100px 0 100px;
}
.blog-single-box {
  margin-bottom: 40px;
} 
.blog-thumb{
  position: relative;
}
.blog-thumb::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 0;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  background: rgba(0,103,206,0.7);
  transition: .5s;
}
.blog-single-box:hover .blog-thumb::before{
  width: 100%;
} 
.blog-thumb img {
  width: 100%;
}
.blog-content h4 a {
  font-size: 20px;
  line-height: 30px;
  text-transform: uppercase;
  color: #000000;
  font-weight: 600;
  font-family: "Poppins";
  margin: 27px 0 10px;
}
.blog-content a {
  display: inline-block;
  text-decoration: none;
  font-size: 16px;
  color: #000000;
  font-weight: 500;
  font-family: "Poppins";
  transition: .5s;
}
.blog-content a:hover{
  color: #0067ce;
}
.blog-content a i {
  margin-left: 12px;
  color: #0067ce;
}



/*================================================
 <--Start dreamhub Call Do Action  Area Css-->
=================================================*/
.call-do-action-area {
  padding: 0 0 100px;
}
.row.call {
  background: #0067ce;
  padding: 78px 0 80px;
}

/*================================================
 <--Start dreamhub Footer  Area Css-->
=================================================*/
.footer-area {
  padding: 100px 0 0;
  background: #070707;
}
.footer-wiget-text p {
  opacity: 0.702;
  font-size: 16px;
  line-height: 24px;
  color: #ffffff;
  font-weight: 400;
  font-family: "Barlow";
  margin: 52px 0 28px;
}
.footer-wiget-social ul {
  list-style: none;
}
.footer-wiget-social ul li {
  display: inline-block;
  margin-right: 18px;
}
.footer-wiget-social ul li a i {
  color: #ffff;
  font-size: 14px;
  background: #0067ce;
  height: 38px;
  width: 38px;
  display: inline-block;
  line-height: 38px;
  text-align: center;
  border-radius: 50%;
  transition: .5s;
}
.footer-wiget-social ul li a i:hover{
  background: #ffff;
  color: #0067ce;
}
.footer-wiget-title h4 {
  font-size: 22px;
  line-height: 24px;
  color: #ffffff;
  font-weight: 600;
  font-family: "Barlow";
  padding: 0 0 48px;
}
.footer-wiget-menu ul {
  list-style: none;
}
.footer-wiget-menu ul li {
  list-style: none;
  margin-top: 4px;
}
.footer-wiget-menu ul li a {
  display: inline-block;
  opacity: 0.702;
  font-size: 16px;
  color: #ffffff;
  font-weight: 400;
  font-family: "Barlow";
  text-decoration: none;
  transition: .5s;
}
.footer-wiget-menu ul li a:hover{
  color: #0067ce;
}
.footer-wiget-menu ul li a i {
  margin-right: 10px;
  font-size: 14px;
}


/* copyright text */
.row.text {
  margin-top: 110px;
}
.copyright-text p {
  opacity: 0.702;
  font-size: 16px;
  color: #ffffff;
  font-weight: 400;
  font-family: "Barlow";
}



/*================================================
 <--Start dreamhub All Inner Page   Css-->
=================================================*/

/* breatcome area */
.breatcome-area {
  background: url(assets/images/breatcome.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 450px;
}
.bratcome-title h1 {
  font-size: 60px;
  color: #fefefe;
  font-weight: 600;
  font-family: "Barlow";
}
.breatcome-text ul {
  list-style: none;
}
.breatcome-text ul li {
  display: inline-block;
  margin-right: 15px;
  color: #fff;
  font-weight: 600;
}
.breatcome-text ul li a {
  display: inline-block;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  position: relative;
  transition: .5s;
}
.breatcome-text ul li a:hover {
  color: #0067ce;
}
.breatcome-text ul li a::before {
  position: absolute;
  content: "/";
  left: 50px;
}




/*================================================
 <--Start dreamhub About Inner Page   Css-->
=================================================*/
.counter-area {
  background: #f8faff;
  padding: 85px 0 85px;
}
.counter-single-box {
  text-align: center;
}
.counter-number h1 {
  font-size: 40px;
  letter-spacing: -1px;
  color: #1d2124;
  font-weight: 500;
  font-family: "Barlow";
  margin-bottom: 10px;
}
.coounter-text p {
  font-size: 18px;
  color: #1e4699;
  font-weight: 400;
}


/*================================================
 <--Start dreamhub Service Inner Page   Css-->
=================================================*/

/* about style three */
.about-area.style-three {
  padding: 106px 0 108px;
}
.about-thumb.style-three {
  position: relative;
}
.about-thumb-content {
  position: absolute;
  bottom: 135px;
  width: 246px;
  height: 146px;
  background: #0067ce;
  left: 160px;
  padding: 38px 35px 0;
}
.about-thumb-content p {
  font-size: 22px;
  color: #ffffff;
  line-height: 35px;
  font-weight: 600;
  font-family: "Barlow";
}
.about-discription.style-three {
  margin-bottom: 46px;
}
.about-list.style-three ul li {
  font-weight: 600;
  font-size: 22px;
}


/* call do action style two */
.call-do-action-area.style-two {
  background: url(assets/images/action-bg.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 440px;
  padding: 0;
}
.single-video {
  text-align: -webkit-right;
}
.video-icon {
  height: 123px;
  width: 123px;
  line-height: 123px;
  background: #ffffff;
  text-align: center;
  border-radius: 100%;
  -webkit-animation: ripple-white 1s linear infinite;
  animation: ripple-blue 1s linear infinite;
  -webkit-transition: .5s;
}
.video-icon a {
  display: inline-block;
  text-decoration: none;
  font-size: 20px;
  line-height: 30px;
  color: #0067ce;
  font-weight: 600;
  font-family: "Poppins";
}



/*================================================
 <--Start dreamhub BLog Detail Inner Page   Css-->
=================================================*/
.blog-details-area {
  padding: 100px 0 100px;
}
.blog-details-title h1 {
  font-size: 46px;
  color: #000000;
  font-weight: 600;
  font-family: "Poppins";
}
.blog-detials-discription {
  width: 58%;
}
.blog-detials-discription p {
  font-size: 16px;
  line-height: 24px;
  color: #616161;
  font-weight: 400;
  font-family: "Poppins";
  padding: 12px 0 38px;
}

.blog-details-thumb {
  position: relative;
}
.blog-details-date {
  position: absolute;
  right: 187px;
  top: -10px;
  width: 85px;
  height: 140px;
  background-color: #0067ce;
  text-align: center;
  padding: 17px;
}
.blog-details-date-content h2 {
  font-size: 30px;
  letter-spacing: 8px;
  line-height: 24px;
  color: #fefefe;
  font-weight: 700;
  font-family: "Poppins";
}
.blog-details-date-content p {
  font-size: 16px;
  color: #fefefe;
  font-weight: 400;
  font-family: "Poppins";
  margin: 5px 0px 4px;
}
.blog-details-date-content span {
  font-size: 16px;
  line-height: 24px;
  color: #fefefe;
  font-weight: 400;
  font-family: "Poppins";
}



/*=================================
<--start-contact-area-->
=================================*/
.contact-area {
    padding: 150px 0 150px;
}

.contact-infor {
    box-shadow: 0px 15px 30px rgb(0 0 0 / 15%);
    padding: 36px 50px 19px;
}

.contact-infor h4 {
    font-size: 26px;
    margin-bottom: 39px;
}

.contact-infor-box {
    margin-bottom: 40px;
}

.contact-infor-icon {
    float: left;
}

.contact-infor-icon i {
    font-size: 40px;
    background: #2D69FF;
    color: #ffff;
    width: 70px;
    height: 70px;
    text-align: center;
    line-height: 70px;
    margin-right: 18px;
    display: inline-block;
}

.contact-content {
    overflow: hidden;
}

.contact-content h6 {
    font-size: 22px;
    margin-bottom: 10px;
    margin-top: 0;
    line-height: 20px;
    font-weight: 500;
}

.contact-content p {
    font-size: 15px;
    line-height: 23px;
    margin-bottom: 2px;
}

.contact-form {
    box-shadow: 0px 15px 30px rgb(0 0 0 / 15%);
    padding: 36px 34px 30px;
}

.contact-form h4 {
    font-size: 26px;
    margin-bottom: 39px;
}

.contact-form input {
    width: 100%;
    height: 46px;
    margin-bottom: 24px;
    padding: 0 13px;
    border: 1px solid rgba(119,119,119,.2);
}

.contact-form textarea {
    width: 100%;
    height: 130px;
    border: 1px solid rgba(119,119,119,.2);
    padding: 10px 13px;
}


/*portfolio area*/

.style-two .portfolio-single-box {
    margin-bottom: 30px;
}

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

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

.portfolio-content {
    position: absolute;
    bottom: -70px;
    right: 50%;
    background: #0067ce;
    width: 70%;
    padding: 5px 25px 15px;
    border-radius: 10px;
    transform: translateY(-50%);
    margin: auto;
    left: 46px;
    transition: .5s;
    opacity: 0;
}

.portfolio-title h4 a {
    font-size: 19px;
    font-weight: 600;
    color: #fff;
    display: inline-block;
}

.portfolio-title span {
    font-size: 14px;
    color: #fff;
}

.portfolio-icon {
    position: absolute;
    right: 22px;
    top: 27px;
}

.portfolio-icon i {
    background: #fff;
    height: 38px;
    width: 38px;
    line-height: 38px;
    text-align: center;
    border-radius: 50%;
    color: #0067ce;
    font-size: 20px;
    display: inline-block;
}

.portfolio-thumb:hover .portfolio-content {
  opacity: 1;
  bottom: 45px;
}


/*---Start casestudy-detail---*/
.casestudy-detail-area {
    padding: 111px 0 104px;
}
.casestudy-title-box h2 {
    font-size: 50px;
    line-height: 60px;
    padding-top: 0;
    padding-bottom: 26px;
}
p {
    font-size: 15px;
    line-height: 24px;
    color: #777777;
    font-weight: normal;
    margin-bottom: 12px;
}

.casestudy-detail-info-box {
    background-color: #0067ce;
    border-radius: 10px;
    padding: 35px 54px 35px;
}

.casestudy-detail-info-content {
    display: flex;
    align-items: center;
}

.casestudy-detail-info-text span:first-child {
    display: block;
    margin-bottom: 7px;
}

.casestudy-detail-info-text span:last-child {
    margin-top: 8px;
}

.casestudy-detail-info-text span {
    font-family: 'Rubik', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #ffffff;
}
.casestudy-detail-info-text.two {
    margin-left: 60px;
}
.casestudy-detail-info-content.two {
    margin-top: 28px;
}
.casestudy-detail-thumb {
    margin-top: 30px;
    margin-bottom: 50px;
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 10px;
}
.casestudy-detail-thumb img {
    width: 100%;
    transform: scale(1);
    border-radius: 10px;
    transition: .5s;
}
.points ul {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    text-decoration: none;
    margin-top: 20px;
}
.points ul li {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.point-object {
    width: 35px;
    height: 35px;
    border: solid 5px #0067ce;
    border-radius: 100%;
    margin-right: 20px;
}

.points ul li p {
    width: calc(100% - 55px);
    color: #10161b;
    font-family: 'Rubik', sans-serif;
    font-size: 15px;
    line-height: 24px;
    margin-bottom: 0;
}

.casestudy-detail-img-box {
    margin: 40px 0;
}
.casestudy-detail-img {
    overflow: hidden;
    margin: 21px 0 34px;
}
.casestudy-detail-img img {
    width: 100%;
}
.casestudy-detail-img img {
    width: 100%;
    transform: scale(1);
    border-radius: 10px;
    transition: .5s;
}
.casestudy-detail-img img {
    width: 100%;
    transform: scale(1);
    border-radius: 10px;
}
p {
    font-size: 15px;
    line-height: 24px;
    color: #777777;
    font-weight: normal;
    margin-bottom: 12px;
}
.casestudy-title-box2 h3 {
    font-family: 'Catamaran', sans-serif;
    font-size: 25px;
    color: #10161b;
    line-height: 35px;
    font-weight: 800;
    padding: 0 0 21px;
}
.casestudy-title-box2 p {
  font-size: 15px;
    line-height: 24px;
    color: #777777;
    font-weight: normal;
    margin-bottom: 12px;
}
.casestudy-detail-thumb img:hover {
    transform: scale(1.1);
}
.casestudy-detail-img img:hover {
    transform: scale(1.1);
  
}
/*---end casestudy-detail---*/


/*Blog Details
===============================*/


/*---start-blog-detail---*/
.blog-details-area {
    padding: 120px 0 80px;
}

.blog-details {
    padding: 0 0 110px;
}

.blog_dtl_thumb {
    overflow: hidden;
}

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

.blog_dtl_thumb img {
    width: 100%;
    transform: scale(1);
    transition: .5s;
}

.blog_details {
    box-shadow: 0 7px 16px rgba(0, 0, 0, 0.15);
    padding: 15px 20px;
}

.blog_dtl_content h2 {
    color: #0d1218;
    font-size: 35px;
    padding-top: 25px;
}

.dreamit-blog-meta-left {
    padding: 12px 0 35px;
}

.dreamit-blog-meta-left span {
    color: #0d1218;
    margin-right: 30px;
}

.dreamit-blog-meta-left i {
    margin-right: 10px;
}

.blog_dtl_content p {
    color: #0d1218;
}

.blog_dtl_content h3 {
    color: #0d1218;
    padding: 10px 0 20px;
    font-size: 28px;
}

.blog_details blockquote {
    margin: 37px 0 36px;
    font-size: 14px;
    border-left: 7px solid #0067ce;
    background: #f7fafd;
    font-style: italic;
    font-weight: 500;
    padding: 25px 35px 15px;
}

.blog_reply {
    overflow: hidden;
    margin-top: 50px;
    padding: 20px 15px 37px;
    box-shadow: 0 7px 16px rgba(0, 0, 0, 0.15);
}

.reply_ttl {
    margin-bottom: 36px;
}

.reply_ttl>h3 {
    font-size: 28px;
    color: #0d1218;
}

.blog_reply .form_field {
    width: 100%;
}

.blog_reply .form_field_inner {
    width: 50%;
    float: left;
}

.blog_reply .form_field_inner input, .blog_reply .form_field_inner textarea {
    width: 95%;
    background: #f7fafd;
    border: 0;
    height: 50px;
    padding-left: 15px;
    color: #151948;
    margin-bottom: 20px;
}

.blog_reply .text_area .form_field_inner {
    width: 100%;
}

.blog_reply .text_area .form_field_inner textarea {
    width: 97.5%;
    height: 150px;
    padding-top: 15px;
    outline: 0;
}

.contact_button button {
    background: #2D69FF;
    color: #fff;
    padding: 10px 20px;
    border: 1px solid #2D69FF;
    margin-top: 16px;
    position: relative;
    z-index: 1;
}

.contact_button button:before {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #070707;
    transform: scale(0.0, 1);
    transition: .5s;
    z-index: -1;
}

.contact_button button:hover:before {
  transform: scale(1);
}

.blog-left-side > div {
    background-color: #fff;
    margin-bottom: 30px;
    padding: 23px 30px 23px;
    box-shadow: 0 7px 16px rgba(0, 0, 0, 0.15);
}

.search {
    background: #f7f7f7;
    position: relative;
}

.search input[type="text"] {
    padding-left: 10px;
}

.search input {
    background: #fff none repeat scroll 0 0;
    border: 0 none;
    height: 54px;
    position: relative;
    width: 100%;
    box-shadow: 0 0 2px rgba(0,0,0,0.20);
    outline: 0;
}

.search button {
    background: #fff;
    border: 0 none;
    color: #fff;
    font-size: 18px;
    position: absolute;
    right: 0;
    top: 0;
    width: 16%;
    height: 100%;
    background: #0067ce;
}

.blog-left-side .widget h2 {
    color: #0d1218;
    display: block;
    font-size: 28px;
    text-transform: capitalize;
    margin-bottom: 36px;
}
.blog-left-side .widget ul {
    list-style: none;
    color: #0762f8;
}
.blog-left-side > .widget > ul > li {
    margin: 0 0 10px;
    padding: 8px 0 15px;
    border-bottom: 1px solid #ddd;
}
.blog-left-side .widget ul li a {
    color: #333;
}
.blog-left-side .widget ul li a i {
    margin-right: 2px;
    font-size: 13px;
}
.blog-left-side .widget ul li a span {
    float: right;
}
.single-widget-item {
    overflow: hidden;
}
.recent-post-item {
    margin-top: 25px;
}
.recent-post-image {
    float: left;
    margin-right: 3px;
}
.recent-post-image a {
    display: inline-block;
    margin-top: 6px;
    margin-bottom: 5px;
}
.recent-post-image img {
    max-width: 87%;
}
.recent-post-text {
    overflow: hidden;
}

.blog-grid .recent-post-text .rcomment {
    color: red;
    font-size: 12px;
}


span.rcomment {
    font-size: 15px;
}

.recent-post-text h4 {
    line-height: 25px;
    margin: 0;
}

.recent-post-text a {
    color: #090909;
    font-size: 18px;
    transition: .5s;
    font-weight: 500;
}

.recent-post-item {
    margin-top: 25px;
}

.recent-post-image a {
    display: inline-block;
    margin-top: 6px;
    margin-bottom: 5px;
}

.recent-post-image img {
    max-width: 87%;
    border-radius: 5px;
}

.tagcloud a {
    color: #606060;
    display: inline-block;
    margin: 0 2px 10px 0;
    padding: 4px 15px;
    text-align: center;
    background: #f7fafd;
    border-radius: 5px;
    transition: .5s;
}

.blog-left-side > div:last-child {
    margin-bottom: 0px;
}

.textwidget {
    padding: 0 0 223px;
}

.sbi_photo_wrap {
    float: left;
    margin: 1px;
}

.blog_dtl_thumb img:hover {
    transform: scale(1.1);
}
.tagcloud a:hover {
    background: #0067ce;
    color: #fff;
}

.blog-left-side .widget ul li a:hover {
    color: #0067ce;
    padding-left: 10px;
}

.recent-post-text a:hover {
    color: #0067ce;
}

/*---end-blog-detail---*/


/* 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, #f09a3e 0%, #f09a3e 100%);
    background-image: -webkit-linear-gradient(0deg, #f09a3e 0%, #f09a3e 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, #191514  0%, #191514  100%);
    background-image: -ms-linear-gradient(0deg, #191514  0%, #191514  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: #f09a3e;
}
 .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, #f09a3e 0%, #f09a3e 100%);
    background-image: -webkit-linear-gradient(0deg, #f09a3e 0%, #f09a3e 100%);
    border-radius: 100%;
}
.top-wrap .go-top-button:hover {
      background-color: #FF3C00;
      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); } }





/* Animation */

.rotateme {
    -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;
  }
  
  @keyframes rotateme {
    from {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
    }
  }

      
      @keyframes animationFramesOne {
        0% {
          -webkit-transform: translate(0px, 0px) rotate(0deg);
                  transform: translate(0px, 0px) rotate(0deg);
        }
        20% {
          -webkit-transform: translate(73px, -1px) rotate(36deg);
                  transform: translate(73px, -1px) rotate(36deg);
        }
        40% {
          -webkit-transform: translate(141px, 72px) rotate(72deg);
                  transform: translate(141px, 72px) rotate(72deg);
        }
        60% {
          -webkit-transform: translate(83px, 122px) rotate(108deg);
                  transform: translate(83px, 122px) rotate(108deg);
        }
        80% {
          -webkit-transform: translate(-40px, 72px) rotate(144deg);
                  transform: translate(-40px, 72px) rotate(144deg);
        }
        100% {
          -webkit-transform: translate(0px, 0px) rotate(0deg);
                  transform: translate(0px, 0px) rotate(0deg);
        }
      }
      
      @-webkit-keyframes animationFramesOne {
        0% {
          -webkit-transform: translate(0px, 0px) rotate(0deg);
        }
        20% {
          -webkit-transform: translate(73px, -1px) rotate(36deg);
        }
        40% {
          -webkit-transform: translate(141px, 72px) rotate(72deg);
        }
        60% {
          -webkit-transform: translate(83px, 122px) rotate(108deg);
        }
        80% {
          -webkit-transform: translate(-40px, 72px) rotate(144deg);
        }
        100% {
          -webkit-transform: translate(0px, 0px) rotate(0deg);
        }
      }

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

/*===========================
<--  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: 666;
}
.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: #f09a3e;
  -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: #012068;
  -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: #000;
    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;
}