.sand-logo{width:200px;margin-top:-15px !important;}
.section-header h3{
  /* color:#ea7724; */
 /* color:#4d448b;*/
   color:#21bed5; 

}
.nav-menu li:hover > a, .nav-menu > .menu-active > a{
  color:#21bed5;
}
.nav-menu a{
  /* color:#FDDF7E; */
  color:#fff;
}
.section-header h3::after{
  /* background:#707070; */
   background:#4d448b; 
  /*background: #21bed5;*/
}


.text-or{color:#ea7724;}
.text-white{color:#fff;}
.text-blue{color:#4d448b;}
.text-sky{color:#21bed5;}
.bold{font-weight: bold;}
.cursor-pointer{
  cursor:pointer
}

#featured-services i{color:#fff;}
#services .icon i{
  /* color:#ea7724; */
  color:#4d448b;
}

#featured-services {
    /* background: #ec8236; */
    background:#21bed5;
}
#featured-services h4 a:hover {
  color: #4d448b;
}

#featured-services .box-bg {
    /* background-image: linear-gradient(0deg, #ec8236 0%, #d57028 50%, #ec8236 100%); */
    background-image: linear-gradient(0deg, #21bed5 0%, #3685b3 50%, #21bed5 100%);
}

#about .about-col .icon{background:#ea7724;}
#about .about-col:hover i {
    color: #ea7724;
}
#about .about-col h2 a:hover{
  /* color:#ea7724; */
  color:#4d448b;
}
#services .box:hover .title a{
  /* color:#ea7724; */
  color:#4d448b;
}
#facts .counters span{color:#ea7724;}
#portfolio #portfolio-flters li:hover, #portfolio #portfolio-flters li.filter-active {
    background: #e87624;
}

#contact .form button[type="submit"]{background-color:#ea7724;}
#intro .btn-get-started{background-color:#ea7724;}
#intro .btn-get-started:hover{color:#ea7724;}

#footer .footer-top h4::after{background:#21bed5;}

#footer .footer-top{
background:#353535;
}
.back-to-top{
  /* background:#ea7724; */
  background: #4d448b;
}


#contact .contact-info i{color:#ea7724;}

#contact .contact-address i {
 -webkit-animation: jump 1.5s ease 0s infinite normal ;
 animation: jump 1.5s ease 0s infinite normal ;
 -moz-animation: jump 1.5s ease 0s infinite normal ;
 -o-animation: jump 1.5s ease 0s infinite normal ;
}

@-webkit-keyframes jump {
  0%{
	-webkit-transform: translateY(0);
	transform: translateY(0);
	 -moz-transform:translateY(0);
  -ms-transform:translateY(0);
  -o-transform:translateY(0);
  }
  20%{
	-webkit-transform: translateY(0);
	transform: translateY(0);
	 -moz-transform:translateY(0);
  -ms-transform:translateY(0);
  -o-transform:translateY(0);
  }
  40%{
	-webkit-transform: translateY(-30px);
	transform: translateY(-30px);
	 -moz-transform:translateY(-30px);
  -ms-transform:translateY(-30px);
  -o-transform:translateY(-30px);
  }
  50%{
	-webkit-transform: translateY(0);
	transform: translateY(0);
	 -moz-transform:translateY(0);
  -ms-transform:translateY(0);
  -o-transform:translateY(0);
  }
  60%{
	-webkit-transform: translateY(-15px);
	transform: translateY(-15px);
	-moz-transform:translateY(-15px);
  -ms-transform:translateY(-15px);
  -o-transform:translateY(-15px);
  }
  80%{
	-webkit-transform: translateY(0);
	transform: translateY(0);
	 -moz-transform:translateY(0);
  -ms-transform:translateY(0);
  -o-transform:translateY(0);
  }
  100%{
	-webkit-transform: translateY(0);
	transform: translateY(0);
	 -moz-transform:translateY(0);
  -ms-transform:translateY(0);
  -o-transform:translateY(0);
  }
}

@keyframes jump {
  0%{
	transform: translateY(0);
	 -webkit-transform:translateY(0);
  -moz-transform:translateY(0);
  -ms-transform:translateY(0);
  -o-transform:translateY(0);
  }
  20%{
	transform: translateY(0);
	 -webkit-transform:translateY(0);
  -moz-transform:translateY(0);
  -ms-transform:translateY(0);
  -o-transform:translateY(0);
  }
  40%{
	transform: translateY(-30px);
	 -webkit-transform:translateY(-30px);
  -moz-transform:translateY(-30px);
  -ms-transform:translateY(-30px);
  -o-transform:translateY(-30px);
  }
  50%{
	transform: translateY(0);
	 -webkit-transform:translateY(0);
  -moz-transform:translateY(0);
  -ms-transform:translateY(0);
  -o-transform:translateY(0);
  }
  60%{
	transform: translateY(-15px);
	-webkit-transform:translateY(-15px);
  -moz-transform:translateY(-15px);
  -ms-transform:translateY(-15px);
  -o-transform:translateY(-15px);
  }
  80%{
	transform: translateY(0);
	-webkit-transform:translateY(0);
  -moz-transform:translateY(0);
  -ms-transform:translateY(0);
  -o-transform:translateY(0);
  }
  100%{
	transform: translateY(0);
	-webkit-transform:translateY(0);
  	-moz-transform:translateY(0);
  	-ms-transform:translateY(0);
  	-o-transform:translateY(0);
  }
}






#contact .contact-phone i {
 animation: wiggle .1s infinite alternate;
 -webkit-animation: wiggle .1s infinite alternate;
 -o-animation: wiggle .1s infinite alternate;
 -moz-animation: wiggle .1s infinite alternate;
 
 
  transform-origin: center 60%;
  -webkit-transform-origin: center 60%;
  -moz-transform-origin: center 60%;
  -ms-transform-origin: center 60%;
  -o-transform-origin: center 60%;
}

@keyframes wiggle {
  0% { 
  transform: rotate(-8deg); 
  -webkit-transform:rotate(-8deg); 
  -moz-transform:rotate(-8deg); 
  -ms-transform:rotate(-8deg);
  -o-transform:rotate(-8deg); 
  }
  100% { 
  transform: rotate(8deg); 
  -webkit-transform:rotate(8deg); 
  -moz-transform:rotate(8deg); 
  -ms-transform:rotate(8deg); 
  -o-transform:rotate(8deg); 
  }
}

#contact .contact-email i {
 animation: eml 1s infinite alternate;
  transform-origin: center 50%;
  -webkit-transform-origin: center 50%;
  -moz-transform-origin: center 50%;
  -ms-transform-origin: center 50%;
  -o-transform-origin: center 50%;
}

@keyframes eml {
  0% { 
  transform: rotate(45deg); 
  -webkit-transform:rotate(45deg); 
  -moz-transform:rotate(45deg); 
  -ms-transform:rotate(45deg); 
  -o-transform:rotate(45deg); 
  }
  100% { 
  transform: rotate(0deg); 
  -webkit-transform:rotate(0deg); 
  -moz-transform:rotate(0deg); 
  -ms-transform:rotate(0deg); 
  -o-transform:rotate(0deg); 
  }
}












/* Our Valus Section
--------------------------------*/
#values {
  background: url("../img/about-bg.jpg") center top no-repeat fixed;
  background-size: cover;
  padding: 60px 0 40px 0;
  position: relative;
}

#values::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.92);
  z-index: 9;
}

#values .container {
  position: relative;
  z-index: 10;
}

#values .about-col {
  background: #fff;
  border-radius: 0 0 4px 4px;
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
}

#values .about-col .img {
  position: relative;
}

#values .about-col .img img {
  border-radius: 4px 4px 0 0;
}

#values .about-col .icon {
  width: 64px;
  height: 64px;
  padding-top: 8px;
  text-align: center;
  position: absolute;
  background-color: #18d26e;
  border-radius: 50%;
  text-align: center;
  border: 4px solid #fff;
  left: calc( 50% - 32px);
  bottom: -30px;
  transition: 0.3s;
}

#values .about-col i {
  font-size: 36px;
  line-height: 1;
  color: #fff;
  transition: 0.3s;
}

#values .about-col:hover .icon {
  background-color: #fff;
}

#values .about-col:hover i {
  color: #18d26e;
}

#values .about-col h2 {
  color: #000;
  text-align: center;
  font-weight: 700;
  font-size: 20px;
  padding: 0;
  margin: 40px 0 12px 0;
}

#values .about-col h2 a {
  color: #000;
}

#values .about-col h2 a:hover {
  color: #18d26e;
}

#values .about-col p {
  font-size: 14px;
  line-height: 24px;
  color: #333;
  margin-bottom: 0;
  padding: 0 20px 20px 20px;
}

#values .about-col .icon{
  /* background:#ea7724; */
  background: #4d448b;
}
#values .about-col:hover i {
    /* color: #ea7724; */
    color:#4d448b;
}
#values .about-col h2 a:hover{
  /* color:#ea7724; */
  color:#4d448b;
}



 
/* Services Section
--------------------------------*/
#whysan {
  background: #fff;
  background-size: cover;
  padding: 60px 0 40px 0;
}

#whysan .box {
  margin-bottom: 30px;
}

#whysan .icon {
  float: left;
}

#whysan .icon i {
  color: #4d448b;
  font-size: 36px;
  line-height: 1;
  transition: 0.5s;
}

#whysan .title {
  margin-left: 60px;
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 18px;
}

#whysan .title a {
  color: #111;
}

#whysan .box:hover .title a {
  color: #4d448b;
}

#whysan .description {
  font-size: 14px;
  margin-left: 60px;
  line-height: 24px;
  margin-bottom: 0;
}



/* Our Valus Section
--------------------------------*/
#courses_list {
  /* background: url("../img/about-bg.jpg") center top no-repeat fixed;
  background-size: cover; */
  padding: 60px 0 40px 0;
  position: relative;
}

#courses_list::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  /* background: rgba(255, 255, 255, 0.92); */
  z-index: 9;
}

#courses_list .container {
  position: relative;
  z-index: 10;
}

#courses_list .about-col {
  background: #fff;
  border-radius: 0 0 4px 4px;
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
}

#courses_list .about-col .img {
  position: relative;
}

#courses_list .about-col .img img {
  border-radius: 4px 4px 0 0;
}

#courses_list .about-col .icon {
  width: 100px;
  height: 55px;
  text-align: center;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.8);
 /*  border-radius: 50%; 
   padding-top: 8px;*/
  text-align: center;
 /* border: 4px solid #fff;
   left: calc( 50% - 32px);
  bottom: -30px; */
  left:0px;
  bottom: 0px;
  transition: 0.3s;
  align-items: center;
  justify-content: center;
  display: flex;
  border-top-right-radius: 5px;
}

#courses_list .about-col .icon .course-logo{
  width:auto;
  height:55px;
  padding: 5px;
}

#courses_list .about-col i {
  font-size: 36px;
  line-height: 1;
  color: #fff;
  transition: 0.3s;
}

/* #courses_list .about-col:hover .icon {
  background-color: #fff;
} 

#courses_list .about-col:hover i {
  color: #18d26e;
}*/

#courses_list .about-col h2 {
  color: #000;
  text-align: left;
  font-weight: 700;
  font-size: 20px;
  padding: 0;
  margin: 40px 0 12px 0;
  padding: 0px 20px;
}

#courses_list .about-col h2 a {
  color: #000;
}

#courses_list .about-col h2 a:hover {
  color: #18d26e;
}

#courses_list .about-col p {
  font-size: 14px;
  line-height: 24px;
  color: #333;
  margin-bottom: 0;
  padding: 0 20px 20px 20px;
}

/* #courses_list .about-col .icon{background:#ea7724;}
#courses_list .about-col:hover i {
    color: #ea7724;
}
#courses_list .about-col h2 a:hover{color:#ea7724;} */






/** Our Services Sections Starts**/

#services .icon .f-ico {
      width: 75px;
    height: 75px;
    border: 2px solid #4d448b;
    border-radius: 50%;
    padding: 16px;
    margin: 0 auto;
    margin-bottom: 20px;
}
#services .service-box{
	    background: #fff;
    border-radius: 0 0 4px 4px;
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.08);
    -webkit-box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.08);
	padding:20px 25px;
}

/** Our Services Sections Ends**/



/**Contact US**/
   #contact{
    background-color: #212529;
    background-image: url(../img/site/map-image.png);
    background-repeat: no-repeat;
    background-position: center;
   }
   #contact .contact-info address, #contact .contact-info p, 
   #contact .contact-info h3,
   #contact .contact-info a,
   #contact .section-header p{color:#fff;}
   
   
   #contact .contact-info i{color:#FDDF7E;}
   

   @media screen and (min-width: 768px) and (max-width:991px) {
    #mobile-nav-toggle{margin:20px 40px 0 0 !important;}
  }

   @media screen and (max-width:767px){
    .logo{width:200px !important; max-height: auto !important; margin-top:-10px !important;}
    #header #logo img {max-height: auto !important;}
   }