/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
:root {
  scroll-behavior: smooth;
}

body {
  font-family: 'Montserrat', sans-serif;
  color: #444444; font-size: 14px;
}

a {
  color: #70655e;
  text-decoration: none;
}

a:hover {
  color: #efcd9e;;
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Cinzel Decorative', cursive;
}

/*--------------------------------------------------------------
# Sections
--------------------------------------------------------------*/
section {
  padding: 60px 0;
  overflow: hidden;
}

.section-header {
  text-align: center;
  padding-bottom: 40px;
}

.section-header h2 {
  font-size: 2.5rem;
  letter-spacing: 1px;
  font-weight: 500;
  margin: 0;
  color: #2f2a27;
}

.section-header p {
  margin: 10px 0 0 0;
  padding: 0;
  font-size: 1rem;
  line-height: 24px;
  font-weight: 600;
  color: #2f2a27;
}

@media (max-width: 768px) {
  .section-header p {
    font-size: 1rem;
    line-height: 32px;
  }
}

/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
  padding: 15px 0;
  background: #2f2a27;
  min-height: 75px!important;
  margin-top: 100px;
  color: #f7e0c1;  
}
.breadcrumbs h2 {
  font-size: 2.8rem;
  font-weight: 500;
}
.breadcrumbs h2 span {
  font-size: 2rem;
  font-weight: 400;
  font-family: 'Montserrat', sans-serif;
}

@media (max-width: 992px) {
  .breadcrumbs {
    
  }
  .breadcrumbs h2 {
    font-size: 2rem;}
}




/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background: #2f2a27;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.back-to-top i {
  font-size: 24px;
  color: #fff;
  line-height: 0;
}

.back-to-top:hover {
  background: #3e3834;
  color: #fff;
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.header {
  transition: all 0.5s;  
  padding: 20px 0px;  
}

.header.header-scrolled {
  height:100px; background-color: #fff;position: fixed;
  padding: 15px 0;
  box-shadow: 0px 2px 20px rgba(1, 41, 112, 0.1); z-index: 1000!important;
}

.header .logo {
  line-height: 0;position: static; z-index: 0!important; 
}

.header .logo img {
  max-height: 40px;
  margin-right: 6px;
}

.header .logo span {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-top: 3px;
}

@media (max-width: 991px) {
.header .logo {  height:70px;}
}
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation 
*/
.navbar {
  padding: 0;
}

.navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
}

.navbar li {
  position: relative;
}

.navbar a, .navbar a:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px; margin: 10px 10px 0px 10px;
  font-size: 16px;
  font-weight: 400;
  color: #2f2a27;
  white-space: nowrap;
  transition: 0.3s;
}

.navbar a i, .navbar a:focus i {
  font-size: 12px;
  line-height: 0;
  margin-left: 5px;
}

.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a {
  background: #2f2a27; 
  border-radius: 4px;
  color: #fff!important;
}



/**
* Mobile Navigation 
*/
.mobile-nav-toggle {
  color: #2f2a27;
  font-size: 28px;
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: 0.5s;
}

.mobile-nav-toggle.bi-x {
  color: #fff;
}

@media (max-width: 991px) {
  .mobile-nav-toggle {
    display: block;
  }
  .navbar ul {
    display: none;
  }
}

.navbar-mobile {
  position: fixed;
  overflow: hidden;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: #70655e;
  transition: 0.3s;
}

.navbar-mobile .mobile-nav-toggle {
  position: absolute;
  top: 15px;
  right: 15px;
}

.navbar-mobile ul {
  display: block;
  position: absolute;
  top: 55px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  padding: 10px 0;
  border-radius: 10px;
  background-color: #fff;
  overflow-y: auto;height:300px;
  transition: 0.3s;
}

.navbar-mobile a {
  padding: 10px 20px;
  font-size: 15px;
  color: #444444;
}

.navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a {
  color: #70655e;
}



/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  width: 100%;
  /*height: 100vh;*/
  background:#f7e0c1 url("../img/bg1.png")repeat-x;
}

.hero h1 {
  margin-top:120px;
  font-size:3.5rem;
  font-weight: 500;
  color: #2f2a27;
}

.hero p {
  color: #2f2a27;
  margin: 15px 0 0 0;
  font-size: 1rem;
}
.hero p a {
  color: #70655e;
}

.hero p a:hover {
  color: #3b2a31; text-decoration: underline;
}


.hero .btn-get-started {
  margin-top: 30px;
  line-height: 0;
  padding: 15px 40px;
  border-radius: 4px;
  transition: 0.5s;
  color: #fff;
  background: #2f2a27;
  box-shadow: 0px 5px 30px rgba(35, 32, 30, 0.4);
}

.hero .btn-get-started span {
  
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 1px;
}

.hero .btn-get-started i {
  margin-left: 5px;
  font-size: 1rem;
  transition: 0.3s;
}

.hero .btn-get-started:hover i {
  transform: translateX(5px);
}

.hero .hero-img {
  text-align: center; margin-top:50px;
}
.hero .hero-img img {width:80%;}

@media (min-width: 1024px) {
  .hero {
    background-attachment: fixed;
  }
}

@media (max-width: 991px) {
  .hero {
    height: auto;
    padding: 120px 0 60px 0;
  }
  .hero .hero-img {
    text-align: center;
    margin-top: 80px;
  }
  .hero .hero-img img {
    width: 80%;
  }
}

@media (max-width: 768px) {
  .hero {
    text-align: center;
  }
  .hero h1 {
    font-size:2.5rem; margin-top:50px;
  }
  .hero h2 {
    font-size:2.8rem;
  }
  .hero .hero-img img {
    width: 100%;
  }
}

/*--------------------------------------------------------------
# Index Page
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
.about {
  background-color: #2f2a27;
  padding: 40px 0px;
}

.about .content {
  padding: 40px; text-align:center;
}


.about h2 {
  font-size:2.8rem;
  font-weight: 500;
  color: #fff;
}

.about p {
  margin: 40px 0 40px 0; color:#fff;
  line-height: 24px; font-size:1rem;
}

.about .btn-read-more {
  line-height: 0;
  padding: 15px 40px;
  border-radius: 4px;
  transition: 0.5s;
  color: #fff;
  border:2px solid #fff;
  box-shadow: 0px 5px 25px rgba(247, 224, 193, 0.3);
}

.about .btn-read-more span {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 1px;
}

.about .btn-read-more i {
  margin-left: 5px;
  font-size: 18px;
  transition: 0.3s;
}

.about .btn-read-more:hover i {
  transform: translateX(5px);
}

/*--------------------------------------------------------------
# category
--------------------------------------------------------------*/
.category { background:#f7e0c1 url("../img/bg2.png") no-repeat bottom left; }

.category h2 {
  font-size: 2.8rem;
  font-weight: 500;
  color: #2f2a27;
}

.category p {
  margin: 40px 0 40px 0; color:#2f2a27;
  line-height: 24px; font-size:18px;
}

.category .box {
  padding:0px; border-radius:20px; margin:30px 0px;
  box-shadow: 0px 0 30px rgba(247, 224, 193, 0.3);
  text-align: center;
  transition: 0.3s;
  overflow:hidden; position:relative;
}

.category .box-2 { margin-top:0px;}
.category .box img { width:100%; height:auto;
  padding: 0px;
  transition: 0.5s;
  transform: scale(1.1); object-fit: cover;position:relative;
}

.category .box .title { width:100%;
   margin-bottom: 0; position:absolute; bottom:0px;  height:80px;
  background: linear-gradient(0deg, rgba(0, 0, 0, .6) 50%, rgba(255, 255 ,255 , 0) 100%);
			transition: .3s;
}

.category .box .title h3 {
  font-size:2rem; text-align:left; padding:20px 5px 0px 30px;
  color: #fff;
  font-weight:500;
  
}

.category .box:hover {
  box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
}

.category .box:hover img {
  transform: scale(1);
}
@media only screen and (max-width: 375px) {
   .category .box-2 { margin-top:0px!important;}
}


/*--------------------------------------------------------------
# Recent Blog Posts
--------------------------------------------------------------*/

.recent-blog-posts .post-box {
  box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
  transition: 0.3s;
  height: 100%;
  overflow: hidden;
  padding: 30px;
  border-radius: 8px;
  position: relative;
  display: flex;
  flex-direction: column; 
}

.recent-blog-posts .post-box .post-img {
  overflow: hidden;
  margin: -30px -30px 15px -30px;
  position: relative;
}

.recent-blog-posts .post-box .post-img img {
  transition: 0.5s;
}



.recent-blog-posts .post-box .post-title {
  font-size: 1.5rem;
  color: #2f2a27;
  font-weight: 700;
  margin-bottom: 18px;
  position: relative;
  transition: 0.3s;
}

.recent-blog-posts .post-box .readmore {
  display: flex;
  align-items: center;
  font-weight: 600;
  line-height: 1;
  transition: 0.3s;
}

.recent-blog-posts .post-box .readmore i {
  line-height: 0;
  margin-left: 4px;
  font-size: 1rem;
}

.recent-blog-posts .post-box:hover .post-title {
  color: #2f2a27;
}

.recent-blog-posts .post-box:hover .post-img img {
  transform: rotate(6deg) scale(1.2);
}

/*  courses page*/
.pricing-section { padding-top: 0px!important;}
.pricing-item {
	text-align: center;
	background: #fff;
	padding-bottom: 40px;
	margin: 15px 0;
	border-radius: 13px;
	overflow: hidden;
	-webkit-box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.pricing-item:hover {
	-webkit-box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
}

.pricing-item .pi-top {
	height: 176px;y
	padding-top: 26px;
	background: #f65d5d;
}

.pricing-item .pi-top h4 {
	color: #fff;
font-size: 1.5rem;
font-weight: 600;
text-transform: uppercase;
padding-top: 20px;
}
.pricing-item .pi-top p {
	color: #fff;
	font-size: .9rem;
font-weight: 400;
}

.pricing-item .pi-price {
	width:80%;
	height:120px;
	margin: -51px auto 30px;
	padding-top: 35px;
	border-radius: 2%;
	background: #fff;
	-webkit-box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
}

.pricing-item .pi-price h3 {
	font-size: 30px;
	font-weight: 700;
	color: #666666;
}
.pricing-item .pi-price h3 span {
	font-size: 15px;}

.pricing-item .pi-price p {
	text-transform: uppercase; font-size: 14px;
	color: #f2786f; font-weight:600;
}

.pricing-item ul {
	list-style: none;
	margin-bottom: 20px; margin-right: 15px;
}

.pricing-item ul li {
	font-size: 16px;
	color: #666666;
	margin-bottom: 12px; list-style-type: square;
    text-align: left; border-bottom: 1px solid rgba(72, 105, 114, 0.15);
}

.pricing-item.begginer .pi-top {
	background: #fdb07d;
}

.pricing-item.entermediate .pi-top {
	background: #fa8f70;
}

.pricing-item.advanced .pi-top {
	background: #f2786f;
}

.pricing-item.professional .pi-top {
	background: #f65d5d;
}

/*about page*/
.vission-statement{
   border-radius: .5rem;  
  width: 100%;
  padding:0;background-color:#fdeacf; border:1px solid #fff;
}

.vission-statement h3{
  font-weight:700;
  font-size: 20px; padding:10px 20px;font-size: 1.6rem;
  color: #444444;background-color: #f7e0c1;
}

.vission-statement p{
 color: #444444;
  font-size: 15px;
  padding: 1.5rem 2rem;
}

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact {padding-top: 0px;}
.contact .info-box {
  color: #444444;
  background: #fce9cf;
  padding:25px; min-height:210px;
}

.contact .info-box i {
  font-size:1.5rem;
  line-height: 0;
  color: #2f2a27;
}

.contact .info-box h3 {
  font-size:1.5rem;
  color: #2f2a27;
  font-weight: 700;
  margin: 20px 0 10px 0;
}

.contact .info-box p {
  padding: 0;
  line-height: 24px;
  font-size: .90rem;
  margin-bottom: 0;
}
.contact .info-box p a:hover {color: #2f2a27; text-decoration: underline;}
.contact .php-email-form {
  background: #fafbff;
  padding: 30px;
  height: 100%;
}

.contact .php-email-form .error-message {
  display: none;
  color: #fff;
  background: #ed3c0d;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .sent-message {
  display: none;
  color: #fff;
  background: #18d26e;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  background: #fff;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid #18d26e;
  border-top-color: #eee;
  -webkit-animation: animate-loading 1s linear infinite;
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input, .contact .php-email-form textarea {
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
  border-radius: 0;
}

.contact .php-email-form input:focus, .contact .php-email-form textarea:focus {
  border-color: #4154f1;
}

.contact .php-email-form input {
  padding: 10px 15px;
}

.contact .php-email-form textarea {
  padding: 12px 15px;
}

.contact .php-email-form button[type="submit"] {
  background: #2f2a27;
  border: 0;
  padding: 10px 30px;
  color: #fff;
  transition: 0.4s;
  border-radius: 4px;
}

.contact .php-email-form button[type="submit"]:hover {
  background: #3a3430;
}

@-webkit-keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Blog
--------------------------------------------------------------*/
.blog {
  padding: 40px 0 20px 0;
}


/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {
  background: #f6f9ff;
  padding: 0 0 0px 0;
  font-size: 16px;
}

.footer .footer-newsletter {
  padding: 50px 0;
  background: #f7e0c1;
  border-top: 1px solid #efcd9e;
}

.footer .footer-newsletter h4 {
  font-size: 2rem;
  margin: 0 0 10px 0;
  padding: 0;
  line-height: 1;
  font-weight: 700;
  color: #2f2a27;
}
.footer .footer-newsletter p a:hover {color: #2f2a27; text-decoration: underline;}

.footer .footer-newsletter form {
  margin-top: 20px;
  background: #fff;
  padding: 6px 10px;
  position: relative;
  border-radius: 4px;
  border: 1px solid #70655e;
}

.footer .footer-newsletter form input[type="email"] {
  border: 0;
  padding: 8px;
  width: calc(100% - 140px);
}

.footer .footer-newsletter form input[type="submit"] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
  font-size:1rem;
  padding: 0 30px;
  margin: 3px;
  background: #2f2a27;
  color: #fff;
  transition: 0.3s;
  border-radius: 4px;
}

.footer .footer-newsletter form input[type="submit"]:hover {
  background: #3e3834;
}

.footer .footer-top {
  background: #24201e;
  padding: 60px 0 0px 0;
}

@media (max-width: 992px) {
  .footer .footer-top {
    background-position: center bottom;
  }
}

.footer .footer-top .footer-info {
  margin-bottom: 30px; text-align:center;
  
}

.footer .footer-top .footer-info .logo {
}

.footer .footer-top .footer-info .logo img {
 margin-bottom:20px;
}

.footer .footer-top .footer-info .logo span {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #70655e;
  font-family: "Nunito", sans-serif;
  margin-top: 3px;
}

.footer .footer-top .footer-info p {
  font-size:1rem;
  line-height: 20px;
  margin-bottom: 0; color:#70655e;
}

.footer .footer-top .social-links a {
  font-size:1rem;
  display: inline-block;
  color: #70655e;
  line-height: 0;
  margin-right: 10px;
  transition: 0.3s;
}

.footer .footer-top .social-links a:hover {
  color: #f8e4ca;
}

.footer .footer-top h4 {
  font-size:1rem;
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 12px;
}

.footer .footer-top .footer-links {
  margin-bottom: 30px;
}

.footer .footer-top .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .footer-top .footer-links ul i {
  padding-right: 2px;
  color: #70655e;
  font-size: 1rem;
  line-height: 0;
}

.footer .footer-top .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer .footer-top .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-top .footer-links ul a {
  color: #70655e;
  transition: 0.3s;
  display: inline-block;
  line-height: 1;
}

.footer .footer-top .footer-links ul a:hover {
  color: #f8e4ca;
}

.footer .footer-top .footer-contact p {
  line-height: 26px;color: #70655e;
}

.footer .copyright {
  text-align: center;
  padding: 15px 0px;
  color: #70655e;
}

.footer .credits {
  padding-top: 10px;
  text-align: center;
  font-size: 1rem; 
  color: #70655e; 
}
.footer-bottom {background:#2f2a27;padding: 10px 0 10px 0;}

/*Inner-pages*/
.inner-page h2 {
  font-size: 2.8rem;
  letter-spacing: 1px;
  font-weight: 500;
  margin: 0;
  color: #2f2a27;
}
.inner-page p {
  font-size: .95rem;}
.nancy-remark { padding: 15px; border-radius: 5px; font-size:1.3rem; font-style: italic;}
.inner-page ul li {margin-bottom: 14px;}

.galler-section { background:#f7e0c1 url("../img/bg1.png") repeat;}
.galler-section h2 { font-size:2.8rem; text-align: center; margin-bottom: 30px;}
.event-name {color: #ea830e; font-weight: 600; text-transform: uppercase;}
.event-img, .event-img ul { margin: 0; padding: 0;}
.event-img ul li{ float:none; margin-bottom:5px; display: block; width:98%;}
.event-img ul li img { border-radius: 4px;}

.btn  {
  border-radius: 4px;
  background-color: #2f2a27;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 1rem; min-width:100px;
  padding:5px 8px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.btn span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.btn span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -10px;
  transition: 0.5s;
}

.btn:hover span {
  padding-right: 15px; color:#fff;
}

.btn:hover span:after {
  opacity: 1;
  right: 0;color:#fff;
}
.btn1  {
  border-radius: 4px; width:99%;
  background-color: #eae8e9;
  border: none;
  color: #2f2a27;
  text-align: center;
  font-size:1rem; 
  padding:8px 8px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}
.btn1:hover {background-color: #2f2a27;  color: #fff;}


.button{
  font-size: 1rem;
  padding: 10px 10px;
  background:#2f2a27;
  text-transform: capitalize;
  color: #fff;
  letter-spacing: 0.25px; 
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;border:1px solid #fff!important; margin-bottom:15px;
}
.button:hover {background-color: #221e1c;transform: scale(1.1);}


.testim {
  width: 100%;
  background:#f7e0c1 url("../img/testimomy-bg.png") no-repeat bottom left; background-size: cover;
  -webkit-transform: translatey(-50%);
  -moz-transform: translatey(-50%);
  -ms-transform: translatey(-50%);
  -o-transform: translatey(-50%);
  transform: translatey(0px);
}

.testim .wrap {
  position: relative;
  width: 100%;
  max-width: 1020px;
  padding: 40px 20px;
  margin: auto;
}

.testim .arrow {
  display: block;
  position: absolute;
  color: #24201e;
  cursor: pointer;
  font-size: 2em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all .3s ease-in-out;    
  -ms-transition: all .3s ease-in-out;    
  -moz-transition: all .3s ease-in-out;    
  -o-transition: all .3s ease-in-out;    
  transition: all .3s ease-in-out;
  padding: 5px;
  z-index: 22222222;
}

.testim .arrow:before {
  cursor: pointer;
}

.testim .arrow:hover {
  color: #ea830e;
}
  

.testim .arrow.left {
  left: 10px;
}

.testim .arrow.right {
  right: 10px;
}

.testim .dots {
  text-align: center;
  position: absolute;
  width: 100%;
  bottom: 60px;
  left: 0;
  display: block;
  z-index: 3333;
  height: 12px;
}

.testim .dots .dot {
  list-style-type: none;
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid #24201e;
  margin: 0 10px;
  cursor: pointer;
  -webkit-transition: all .5s ease-in-out;    
  -ms-transition: all .5s ease-in-out;    
  -moz-transition: all .5s ease-in-out;    
  -o-transition: all .5s ease-in-out;    
  transition: all .5s ease-in-out;
  position: relative;
}

.testim .dots .dot.active,
.testim .dots .dot:hover {
  background: #ea830e;
  border-color: #ea830e;
}

.testim .dots .dot.active {
  -webkit-animation: testim-scale .5s ease-in-out forwards;   
  -moz-animation: testim-scale .5s ease-in-out forwards;   
  -ms-animation: testim-scale .5s ease-in-out forwards;   
  -o-animation: testim-scale .5s ease-in-out forwards;   
  animation: testim-scale .5s ease-in-out forwards;   
}
  
.testim .cont {
  position: relative;
  overflow: hidden;
}

.testim .cont > div {
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 0 70px 0;
  opacity: 0;
}

.testim .cont > div.inactive {
  opacity: 1;
}
  

.testim .cont > div.active {
  position: relative;
  opacity: 1;
}
  

.testim .cont div .img img {
  display: block;
  width: 100px;
  height: 100px;
  margin: auto;
  border-radius: 50%;
}

.testim .cont div h2 {
  color: #ea830e;
  font-size: 1.4em;
  margin: 15px 0;
}

.testim .cont div p {
  font-size: 1.15em;
  color: #24201e;
  width: 80%;
  margin: auto;
}

.testim .cont div.active .img img {
  -webkit-animation: testim-show .5s ease-in-out forwards;            
  -moz-animation: testim-show .5s ease-in-out forwards;            
  -ms-animation: testim-show .5s ease-in-out forwards;            
  -o-animation: testim-show .5s ease-in-out forwards;            
  animation: testim-show .5s ease-in-out forwards;            
}

.testim .cont div.active h2 {
  -webkit-animation: testim-content-in .4s ease-in-out forwards;    
  -moz-animation: testim-content-in .4s ease-in-out forwards;    
  -ms-animation: testim-content-in .4s ease-in-out forwards;    
  -o-animation: testim-content-in .4s ease-in-out forwards;    
  animation: testim-content-in .4s ease-in-out forwards;    
}

.testim .cont div.active p {
  -webkit-animation: testim-content-in .5s ease-in-out forwards;    
  -moz-animation: testim-content-in .5s ease-in-out forwards;    
  -ms-animation: testim-content-in .5s ease-in-out forwards;    
  -o-animation: testim-content-in .5s ease-in-out forwards;    
  animation: testim-content-in .5s ease-in-out forwards;    
}

.testim .cont div.inactive .img img {
  -webkit-animation: testim-hide .5s ease-in-out forwards;            
  -moz-animation: testim-hide .5s ease-in-out forwards;            
  -ms-animation: testim-hide .5s ease-in-out forwards;            
  -o-animation: testim-hide .5s ease-in-out forwards;            
  animation: testim-hide .5s ease-in-out forwards;            
}

.testim .cont div.inactive h2 {
  -webkit-animation: testim-content-out .4s ease-in-out forwards;        
  -moz-animation: testim-content-out .4s ease-in-out forwards;        
  -ms-animation: testim-content-out .4s ease-in-out forwards;        
  -o-animation: testim-content-out .4s ease-in-out forwards;        
  animation: testim-content-out .4s ease-in-out forwards;        
}

.testim .cont div.inactive p {
  -webkit-animation: testim-content-out .5s ease-in-out forwards;    
  -moz-animation: testim-content-out .5s ease-in-out forwards;    
  -ms-animation: testim-content-out .5s ease-in-out forwards;    
  -o-animation: testim-content-out .5s ease-in-out forwards;    
  animation: testim-content-out .5s ease-in-out forwards;    
}

@-webkit-keyframes testim-scale {
  0% {
      -webkit-box-shadow: 0px 0px 0px 0px #eee;
      box-shadow: 0px 0px 0px 0px #eee;
  }

  35% {
      -webkit-box-shadow: 0px 0px 10px 5px #eee;        
      box-shadow: 0px 0px 10px 5px #eee;        
  }

  70% {
      -webkit-box-shadow: 0px 0px 10px 5px #ea830e;        
      box-shadow: 0px 0px 10px 5px #ea830e;        
  }

  100% {
      -webkit-box-shadow: 0px 0px 0px 0px #ea830e;        
      box-shadow: 0px 0px 0px 0px #ea830e;        
  }
}

@-moz-keyframes testim-scale {
  0% {
      -moz-box-shadow: 0px 0px 0px 0px #eee;
      box-shadow: 0px 0px 0px 0px #eee;
  }

  35% {
      -moz-box-shadow: 0px 0px 10px 5px #eee;        
      box-shadow: 0px 0px 10px 5px #eee;        
  }

  70% {
      -moz-box-shadow: 0px 0px 10px 5px #ea830e;        
      box-shadow: 0px 0px 10px 5px #ea830e;        
  }

  100% {
      -moz-box-shadow: 0px 0px 0px 0px #ea830e;        
      box-shadow: 0px 0px 0px 0px #ea830e;        
  }
}

@-ms-keyframes testim-scale {
  0% {
      -ms-box-shadow: 0px 0px 0px 0px #eee;
      box-shadow: 0px 0px 0px 0px #eee;
  }

  35% {
      -ms-box-shadow: 0px 0px 10px 5px #eee;        
      box-shadow: 0px 0px 10px 5px #eee;        
  }

  70% {
      -ms-box-shadow: 0px 0px 10px 5px #ea830e;        
      box-shadow: 0px 0px 10px 5px #ea830e;        
  }

  100% {
      -ms-box-shadow: 0px 0px 0px 0px #ea830e;        
      box-shadow: 0px 0px 0px 0px #ea830e;        
  }
}

@-o-keyframes testim-scale {
  0% {
      -o-box-shadow: 0px 0px 0px 0px #eee;
      box-shadow: 0px 0px 0px 0px #eee;
  }

  35% {
      -o-box-shadow: 0px 0px 10px 5px #eee;        
      box-shadow: 0px 0px 10px 5px #eee;        
  }

  70% {
      -o-box-shadow: 0px 0px 10px 5px #ea830e;        
      box-shadow: 0px 0px 10px 5px #ea830e;        
  }

  100% {
      -o-box-shadow: 0px 0px 0px 0px #ea830e;        
      box-shadow: 0px 0px 0px 0px #ea830e;        
  }
}

@keyframes testim-scale {
  0% {
      box-shadow: 0px 0px 0px 0px #eee;
  }

  35% {
      box-shadow: 0px 0px 10px 5px #eee;        
  }

  70% {
      box-shadow: 0px 0px 10px 5px #ea830e;        
  }

  100% {
      box-shadow: 0px 0px 0px 0px #ea830e;        
  }
}

@-webkit-keyframes testim-content-in {
  from {
      opacity: 0;
      -webkit-transform: translateY(100%);
      transform: translateY(100%);
  }
  
  to {
      opacity: 1;
      -webkit-transform: translateY(0);        
      transform: translateY(0);        
  }
}

@-moz-keyframes testim-content-in {
  from {
      opacity: 0;
      -moz-transform: translateY(100%);
      transform: translateY(100%);
  }
  
  to {
      opacity: 1;
      -moz-transform: translateY(0);        
      transform: translateY(0);        
  }
}

@-ms-keyframes testim-content-in {
  from {
      opacity: 0;
      -ms-transform: translateY(100%);
      transform: translateY(100%);
  }
  
  to {
      opacity: 1;
      -ms-transform: translateY(0);        
      transform: translateY(0);        
  }
}

@-o-keyframes testim-content-in {
  from {
      opacity: 0;
      -o-transform: translateY(100%);
      transform: translateY(100%);
  }
  
  to {
      opacity: 1;
      -o-transform: translateY(0);        
      transform: translateY(0);        
  }
}

@keyframes testim-content-in {
  from {
      opacity: 0;
      transform: translateY(100%);
  }
  
  to {
      opacity: 1;
      transform: translateY(0);        
  }
}

@-webkit-keyframes testim-content-out {
  from {
      opacity: 1;
      -webkit-transform: translateY(0);
      transform: translateY(0);
  }
  
  to {
      opacity: 0;
      -webkit-transform: translateY(-100%);        
      transform: translateY(-100%);        
  }
}

@-moz-keyframes testim-content-out {
  from {
      opacity: 1;
      -moz-transform: translateY(0);
      transform: translateY(0);
  }
  
  to {
      opacity: 0;
      -moz-transform: translateY(-100%);        
      transform: translateY(-100%);        
  }
}

@-ms-keyframes testim-content-out {
  from {
      opacity: 1;
      -ms-transform: translateY(0);
      transform: translateY(0);
  }
  
  to {
      opacity: 0;
      -ms-transform: translateY(-100%);        
      transform: translateY(-100%);        
  }
}

@-o-keyframes testim-content-out {
  from {
      opacity: 1;
      -o-transform: translateY(0);
      transform: translateY(0);
  }
  
  to {
      opacity: 0;
      transform: translateY(-100%);        
      transform: translateY(-100%);        
  }
}

@keyframes testim-content-out {
  from {
      opacity: 1;
      transform: translateY(0);
  }
  
  to {
      opacity: 0;
      transform: translateY(-100%);        
  }
}

@-webkit-keyframes testim-show {
  from {
      opacity: 0;
      -webkit-transform: scale(0);
      transform: scale(0);
  }
  
  to {
      opacity: 1;
      -webkit-transform: scale(1);       
      transform: scale(1);       
  }
}

@-moz-keyframes testim-show {
  from {
      opacity: 0;
      -moz-transform: scale(0);
      transform: scale(0);
  }
  
  to {
      opacity: 1;
      -moz-transform: scale(1);       
      transform: scale(1);       
  }
}

@-ms-keyframes testim-show {
  from {
      opacity: 0;
      -ms-transform: scale(0);
      transform: scale(0);
  }
  
  to {
      opacity: 1;
      -ms-transform: scale(1);       
      transform: scale(1);       
  }
}

@-o-keyframes testim-show {
  from {
      opacity: 0;
      -o-transform: scale(0);
      transform: scale(0);
  }
  
  to {
      opacity: 1;
      -o-transform: scale(1);       
      transform: scale(1);       
  }
}

@keyframes testim-show {
  from {
      opacity: 0;
      transform: scale(0);
  }
  
  to {
      opacity: 1;
      transform: scale(1);       
  }
}

@-webkit-keyframes testim-hide {
  from {
      opacity: 1;
      -webkit-transform: scale(1);       
      transform: scale(1);       
  }
  
  to {
      opacity: 0;
      -webkit-transform: scale(0);
      transform: scale(0);
  }
}

@-moz-keyframes testim-hide {
  from {
      opacity: 1;
      -moz-transform: scale(1);       
      transform: scale(1);       
  }
  
  to {
      opacity: 0;
      -moz-transform: scale(0);
      transform: scale(0);
  }
}

@-ms-keyframes testim-hide {
  from {
      opacity: 1;
      -ms-transform: scale(1);       
      transform: scale(1);       
  }
  
  to {
      opacity: 0;
      -ms-transform: scale(0);
      transform: scale(0);
  }
}

@-o-keyframes testim-hide {
  from {
      opacity: 1;
      -o-transform: scale(1);       
      transform: scale(1);       
  }
  
  to {
      opacity: 0;
      -o-transform: scale(0);
      transform: scale(0);
  }
}

@keyframes testim-hide {
  from {
      opacity: 1;
      transform: scale(1);       
  }
  
  to {
      opacity: 0;
      transform: scale(0);
  }
}

@media all and (max-width: 300px) {
body {
  font-size: 14px;
}
}

@media all and (max-width: 500px) {
.testim .arrow {
  font-size: 1.5em;
}

.testim .cont div p {
  line-height: 25px;
}

} 

.animated-txt {display: inline-block;color: #fff;transition: all 0.8s; padding: 8px;  border-radius: 8px;
  position: relative;overflow: hidden;z-index: 1; border:2px solid #fff; background:#ff3870;
  -webkit-box-shadow: 0 10px 15px 0px rgba(56, 0, 189, .2);box-shadow: 0 10px 15px 0px rgba(56, 0, 189, .2);}
  
  .animated-txt:before {  content: "";  position: absolute;  left: 0;width: 100%;  height: 0%; background: #ff3870;
     transition: 0.8s;z-index: -2;}
  
.animated-txt:before {
  content: "";position: absolute;bottom: 0;left: 0;width: 0%;height: 100%;background: #ff0048;
  background: -moz-linear-gradient(left, #ff0048 0%, #ea830e; 100%);
  background: -webkit-linear-gradient(left, #ff0048 0%, #ea830e; 100%);
  background: linear-gradient(to right, #ff0048 0%, #ea830e; 100%);transition: all 0.8s;
  z-index: -1;}
  
  .animated-txt:a, .animated-txt a:hover {color:#fff;}
  .animated-txt:hover,  {color: #fff;}
  .animated-txt:hover:before {width: 100%;}