/*------------------------------------------------------------------------
* Template Name    : Crysiot | Responsive Bootstrap 4 Personal Template  * 
* Version          : 1.0.0                                               *
* Created          : october 2020                                        *
* File Description : changecolor Css file of the template                       *
*------------------------------------------------------------------------*/
.bgchangecolor .color-style{
background: #cbc57b;
color: #fff;
}
.bgchangecolor .color-style:hover {
color: #fff;
}
.bgchangecolor .text-custom {
color: #cbc57b !important;
}
.bgchangecolor #preloader {
  position:fixed;
  left:0;
  top:0;
  z-index:99999999999;
  width:100%;
  height:100%;
  overflow:visible;
  background:#f5f4f4;
  display:table;
  text-align:center
}
.bgchangecolor .loader {
  display:table-cell;
  vertical-align:middle;
  height:100%;
  width:100%;
  position:relative;
  width:200px;
  height:200px
}
.bgchangecolor .loader1 {
  width:50px;
  height:50px;
  border-right-color:transparent;
  border-radius:100%;
  position:relative;
  margin:0 auto
}
.bgchangecolor .loader1 span:nth-child(1) {
  width:50px;
  height:50px;
  border-right-color:transparent;
  border-radius:100%;
  position:absolute;
  animation:grow-shrink 2s infinite;
  left:0;
  right:0;
  margin:auto;
  top:0;
  bottom:0;
  background:#fab162;
  opacity:0
}
.bgchangecolor .loader1 span:nth-child(2) {
  width:40px;
  height:40px;
  border-right-color:transparent;
  border-radius:100%;
  position:absolute;
  animation:grow-shrink2 2s infinite .5s;
  left:0;
  right:0;
  margin:auto;
  top:0;
  bottom:0;
  background:#fab162;
  opacity:0
}
@keyframes grow-shrink {
  0% {
    transform:scale(.1);
    -moz-transform:scale(.1);
    -webkit-transform:scale(.1);
    -o-transform:scale(.1);
    -ms-transform:scale(.1);
    transform:scale(.1);
    opacity:0
  }
  50% {
    opacity:.2
  }
  100% {
    transform:scale(1.6);
    -moz-transform:scale(1.6);
    -webkit-transform:scale(1.6);
    -o-transform:scale(1.6);
    -ms-transform:scale(1.6);
    transform:scale(1.6);
    opacity:0
  }
}
@keyframes grow-shrink2 {
  0% {
    transform:scale(.1);
    -moz-transform:scale(.1);
    -webkit-transform:scale(.1);
    -o-transform:scale(.1);
    -ms-transform:scale(.1);
    transform:scale(.1);
    opacity:0
  }
  50% {
    opacity:.7
  }
  100% {
    transform:scale(1.6);
    -moz-transform:scale(1.6);
    -webkit-transform:scale(1.6);
    -o-transform:scale(1.6);
    -ms-transform:scale(1.6);
    transform:scale(1.6);
    opacity:0
  }
}
/* start menu color change css */
.bgchangecolor .navigation-menu > ul > li.active > a span {
color: #cbc57b;
}
.bgchangecolor .submenu > li > a > span:after{
      background-color: #cbc57b;
}
.bgchangecolor  .top-bar{
background: #cbc57b;
}
.bgchangecolor .navigation-menu > ul > li > a:before {
background-color: #cbc57b;
}
.bgchangecolor .submenu > li > a:hover {
color: #cbc57b;
}
.bgchangecolor .submenu {
border-bottom: 3px solid #cbc57b;
}
.bgchangecolor .navigation-menu > ul > li:hover > a span {
color: #cbc57b;
}
.bgchangecolor .social-details > a::before {
background: #232152;
}
.bgchangecolor .social-details > a {
color: #232152;
}
/* bluecolor headbg */
.bgchangecolor .bg-nav {
background: #232152;
}
.bgchangecolor .home-inner:before {
background: #232152bf;
}
.bgchangecolor .cta-blue {
background: #232152;
color: #cbc57b;
}
.bgchangecolor .cta-blue:hover{
background: #cbc57b;
color: #232152;
}
/* end menu color change css */

.bgchangecolor .progress .track {
stroke: #cbc57b99;
}
.bgchangecolor .progress.blue .fill {
stroke: rgb(203 197 123);
}
.bgchangecolor .funfact-box p {
color: #232152;
}
/*.bgchangecolor .services_icons img {
background: #232152;
}*/
.bgchangecolor .service-card:before {
  background: #232152;
}
.bgchangecolor .service-card:hover .services_icons img {
    background: #cbc57b;
}
.bgchangecolor .quote i {
    color: #cbc57b;
}
.bgchangecolor .pricing-box:before {
    background: linear-gradient(to top, #cbc57b,#ffffff);
  }
.bgchangecolor .portfolio_imgbox .portfolio_images .portfolio_overlay:after {
    background: #232152e0;
  }
.bgchangecolor .service-card {
border-bottom: 2px solid #232152;
}
.bgchangecolor .progress .fill {
fill: #232152;
}
.bgchangecolor .hero-title{
color: #cbc57b;
}
.bgchangecolor .cta-btn{
background: #cbc57b;
color: #232152;
}
.bgchangecolor .cta-btn:hover {
background: #141824;
color: #cbc57b;
}
.bgchangecolor .about_more i {
background: #cbc57b;
box-shadow: 0px 0px 0px 9px #cbc57ba8;
}
.bgchangecolor button {
  color: #232152;
  background: #cbc57b;
}
.bgchangecolor .btn {
  color: #cbc57b;
  background: #232152;
}
.bgchangecolor .orangesec_btn:before {
    background: #cbc57b;
  }
.bgchangecolor  .orangesec_btn:hover {
  color: #232152;
}
.bgchangecolor .about-us .cta-btn{
color: #fff;
}
.bgchangecolor .about-us .cta-btn:hover{
background: #cbc57b;
color: #141824;
}
.bgchangecolor .client-name{
color: #cbc57b;
}
.bgchangecolor .client-img{
border-bottom: 4px solid #cbc57b;
border-left: 4px solid #cbc57b;
}
.bgchangecolor .funfact-box h3{
color: #cbc57b;
}
.bgchangecolor .team-section img{
border-bottom-color: #cbc57b;
border-left-color: #cbc57b;
box-shadow: 0 4px 3px 0 rgba(0, 0, 0, 0.2), 0 6px 16px 0 rgba(0, 0, 0, 0.19);
border-radius: 16px !important;
}
.bgchangecolor .teamsoc_icon > a::before {
background: #222152;
}
.bgchangecolor .teamsoc_icon > a {
color: #cbc57b;
}
.bgchangecolor .owl-theme .owl-controls .owl-page span {
background: #cbc57b !important;
}
.bgchangecolor .pricing-box {
border-bottom-color: #cbc57b;
border-left-color: #cbc57b;
}
.bgchangecolor .portfolio_imgbox a{
border-bottom-color: #cbc57b;
border-left-color: #cbc57b;
}
.bgchangecolor .portfolio_menu li a:hover {
background-color: #cbc57b;
color: #222152 !important;
}
.bgchangecolor .portfolio_menu li a.active {
    background-color: #cbc57b;
    color: #ffffff;
}
.bgchangecolor .contact-form h3:after,
.bgchangecolor .contact-form h4:after {
    background: #cbc57b;
  }
.bgchangecolor .back_top {
background-color: #cbc57b;
transition: all 0.5s;
}
.bgchangecolor .copyright{
background-color: #cbc57b;
}
.bgchangecolor footer a {
color: #cbc57b;
}
.bgchangecolor footer hr {
background-color: #cbc57b;
}
.bgchangecolor .footer-social{
background-color: #cbc57b;
}
.bgchangecolor  .footer-social::after{
border-bottom: 30px solid #cbc57b;
}
.bgchangecolor footer {
   background: #222152;
}
/* animation circle */

.bgchangecolor .right_circle:before {
    background-image: url(../images/lightgreenbtm.png);
}
.bgchangecolor .right_circle {
    background-image: url(../images/smalllightgreenbtm.png);
}
.bgchangecolor .left_circle {
    background-image: url(../images/smalllightgreen.png);
}
.bgchangecolor .left_circle:before {
    background-image: url(../images/lightgreen.png);
}
.bgchangecolor .clientleft_circle {
     background-image: url(../images/smalllightgreen.png);
}
.bgchangecolor .clientleft_circle:before {
    background-image: url(../images/lightgreen.png);
}
.bgchangecolor .clientright_circle:before {
    background-image: url(../images/lightgreenbtm.png);
}
.bgchangecolor .clientright_circle {
    background-image: url(../images/smalllightgreenbtm.png);
}
.bgchangecolor .box:after {
    border: 4px solid #cbc57b;
  }