/*-----------------------------------------------------------------------------------

    Template Name: Smash - Bootstrap Template
    Template URI: uideck.com
    Author: UIdeck
    Version: 1.0

-----------------------------------------------------------------------------------

    CSS INDEX
    ===================

    01. Theme default CSS
	02. Header
    03. Hero
	04. Footer

-----------------------------------------------------------------------------------*/
/*===========================
            01.COMMON css
===========================*/
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600;700&display=swap');
@import "https://www.nerdfonts.com/assets/css/webfont.css";
/* @import url("https://fonts.googleapis.com/css?family=Fredoka:300,400,500,600,700,800"); */
@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html {
  scroll-behavior: smooth;
}

:root,
.loader{
  --size:16px;
  --fond: #654987;
  --fond-flxxx:#d7d7d7;
  --fond-roadmap:#d7d7d7;
  --fond-box:#f0f0f0;
  --text-titre:#efefef;
  --text:#3a3a3a;
  --text-box:#313131;
  --radius:16px;
  --touch:#d75e19;
  --gradient: linear-gradient(#1b1b1b 0%, #654987 100%);
  --box-hight:linear-gradient(#dedede40 0%, #3d77ad44 100%);
  --btn: #654987;
  --btn-border:#efefef;
  --btn-text:#efefef;
  --box-border-price: #654987;
}

body.dark,
.loader{
  --fond:#1b1b1b;
  --fond-flxxx:#262524;
  --fond-roadmap:#262524;
  --fond-box:#292f35;
  --text-titre:#efefef;
  --text:#efefef;
  --text-box:#ffffff;
  --radius:16px;
  --touch:#d75e19;
  --gradient: linear-gradient(#1b1b1b 0%, #654987 100%);
  --box-hight:linear-gradient(#1b1b1b50 0%, #1a1a1a 100%);
  --btn: #654987;
  --btn-border:#efefef;
  --btn-text:#efefef;
  --box-border-price:var(--touch)
}

.nav {
	--bs-nav-link-padding-x: 1rem;
	--bs-nav-link-padding-y: 0.25rem;
	--bs-nav-link-font-weight: ;
	--bs-nav-link-color: var(--text-titre);
	--bs-nav-link-hover-color: var(--bs-link-hover-color);
	--bs-nav-link-disabled-color: var(--bs-secondary-color);
	display: flex;
	flex-wrap: wrap;
	padding-left: 0;
	margin-bottom: 0;
	list-style: none;
  background: var(--fond) !important;
}

.navbar-brand {
	padding-top: var(--bs-navbar-brand-padding-y);
	padding-bottom: var(--bs-navbar-brand-padding-y);

	/* font-size: var(--bs-navbar-brand-font-size); */
	font-size:14px;
  font-weight: 600;
	text-decoration: none;
	/* white-space: nowrap; */
	color: #d2d2d2;
}
.navbar-brand:focus, .navbar-brand:hover {
	color: #979797;
  transition: all 0.3s ease-out 0s;
}

.fixed-top {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 10;
	padding-top: 120px;
	background: var(--fond) !important;

  text-transform: uppercase;

}

.hidden-div {
	position: sticky;
	background: var(--fond);
	height: 100vh;
	z-index: 1100;
	top: 0;
}

.explain{
  padding-top:200px;
  position: relative;
}

.brand{
  font-size: 30px;
  color:var(--text-titre);
  font-weight: 700;
}
.pointer{
  cursor: pointer;
}

gmp-map {
  height: 500px;
  border-radius: var(--radius);
}

.scroll{
  height: 650px; /* ou la hauteur que tu veux */
  overflow: auto; /* Ajoute une barre de défilement si le contenu dépasse les dimensions définies */

}

.touch{
  /* color:#d75e19; */
  color: #654987;
  font-size: 22px;
  font-weight: 400;
}

.m-small{
  font-size: 10px;
}

.touch-rouge{
  /* color:#d75e19; */
  color: #654987;
  /* font-size: 22px;
  font-weight: 400; */
}

.barre {
  text-decoration: line-through;
  /* text-decoration-color: red; */
  text-decoration-style: #ff0000 2px wavy;
  color: #fff;
}

.slider_area{
  min-height: 900px;
  background-color: var(--fond);
}

.sous-titre{
  font-size: 22px;
}

.text-muted{
  color:#333;
}
.compt{
  min-width: 80px;
  text-align: right;
  font-size: 30px;
  font-weight: 600;
}
.bilan{
  font-weight: 700;
  border : 1px dotted #333333;
  margin-top:15px;
  border-radius: var(--radius);
  padding: 20px;
  background: #292f3550;
/*
background: linear-gradient(#65498750 0%, hsla(0, 0%, 13%, 1) 100%);

background: -moz-linear-gradient(#65498750 0%, hsla(0, 0%, 13%, 1) 100%);

background: -webkit-linear-gradient(#65498750 0%, hsla(0, 0%, 13%, 1) 100%);
  */

}

/* organigramme */
.organigramme {
  display: flex;
  flex-direction: column;
  align-items: center;
}
 .organigramme p i{
  font-size:40px;

 }

.client
 {
  width:75%;
  padding: 20px;
  margin: 5px;
  text-align: left;
  border-radius: var(--radius);
  border:1px #333 solid;
  background: var(--box-hight);
}


.devis,
.production,
.facturation,
.reglement,
.depenses {
  width:75%;
  padding: 20px;
  margin: 5px;
  text-align: left;
  border-radius: var(--radius);
  border:1px #333 solid;
  background: var(--box-hight);
}

.client {
  order: 1; /* Met le client en haut */
}

.devis {
  order: 2;
}

.production,
.facturation {
  order: 3;
}

.reglement {
  order: 4;
}

.depenses {
  order: 5; /* Met les dépenses en bas */
}

/* fin organigramme ****** */

body {
  font-family: "Fredoka", sans-serif;
  font-weight: normal;
  font-style: normal;
  color: var(--text-titre); }

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

img {
  max-width: 100%; }

a:focus,
input:focus,
textarea:focus,
button:focus {
  text-decoration: none;
  outline: none; }

a:focus,
a:hover {
  text-decoration: none; }

        a {
          color: #654987
        }
i,
span,
a {
  display: inline-block; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  color: var(--text-titre);
  margin: 0px; }

h1 {
  font-size: 48px; }

h2 {
  font-size: 36px; }

h3 {
  font-size: 28px; }

h4 {
  font-size: 22px; }

h5 {
  font-size: 18px; }

h6 {
  font-size: 16px; }

ul, ol {
  margin: 0px;
  padding: 0px;
  list-style-type: none; }

p {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--text);
  margin: 0px; }

.bg_cover {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%; }

.myborder{
  border: var(--btn-border) 1px solid;
  border-radius: var(--radius);
}
.myborder-detail{
  border: #4d4d4d 2px dotted;
  border-radius: var(--radius);
  margin-bottom: 5px;
}

.pointer {
  cursor: pointer;
}
.periode{
  display:flex;
  border-radius: 16px;
  border: #4d4d4d 2px dotted;
   margin-top: 16px;
}

.pull-right{
  float:right;
  clear: both;
}

.periode_detail{
  flex:  25%; /* Les colonnes occupent 30% de la largeur du conteneur */
  border-right:3px solid #fff;
  font-size: 80%;
    box-sizing: border-box; /* Garantit que la bordure est comprise dans la largeur définie */
   margin:0;
   padding:1px;
}

.periode_detail i {
	margin-right: -17px;
	position: absolute;
	top: -77px;
}

.fleche {
	/* background: #852147; */
	position: absolute;
	right: -40px;
	top: 120px;
	z-index: 900;
}

.mb-6{
  margin-bottom:60px;
}


.p-50{
  padding:50px;

  border-bottom: 3px solid #333;
}

.drop{
  position: relative;font-size: 14px;
}

.hight {
	text-align: right;
  /* min-height: 309px;
	position: absolute;
	top: 25%;right: 23%;*/
	width: 100%;
	border-radius: var(--radius);
	border: #333 dotted 1px;

	/*padding-top: 15px;
   margin-top:-25px; */
}

.hight:hover{
  -webkit-box-shadow: inset 0px 0px 21px 3px rgba(51, 51, 51, 0.6);
box-shadow:  0px 0px 21px 3px rgba(51,51,51,0.6);
}

.hight img{
  border-radius: var(--radius);
}

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

.home_area {
	min-height: 900px;
	background-color: var(--fond);
	padding-top: 120px;
  line-height: 25px;
}

.home_area h1 {
  font-size: 300%;
}

.py-20 {
  padding-top: 9rem/* 80px */;
  padding-bottom: 7rem/* 80px */;
}

/* Style par défaut du curseur */
input[type="range"] {
	-webkit-appearance: none;
	width: 80%;
	height: 10px;
  background: #654987;
	outline: none;
	opacity: 0.7;
	-webkit-transition: 0.2s;
	transition: opacity 0.2s;
	border-radius: 6px;
}

/* Style du curseur lorsqu'il est survolé */
input[type="range"]:hover {
  opacity: 1;
}

/* Style du curseur lorsqu'il est actif (clic dessus) */
input[type="range"]:active {
  opacity: 1;
}

/* Style personnalisé de la "track" (la ligne) */
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  background: #4caf50; /* Couleur de fond de la track */
}

/* Style personnalisé du "thumb" (le curseur) */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Masquer le style par défaut de WebKit */
  width: 20px; /* Largeur du thumb */
  height: 20px; /* Hauteur du thumb */
  background: #ffffff; /* Couleur de fond du thumb */
  border: 1px solid #4caf50; /* Bordure du thumb */
  border-radius: 50%; /* Forme arrondie du thumb */
  cursor: pointer;
  margin-top: -5px; /* Ajustement pour centrer le thumb sur la track */
}

/* Style personnalisé du thumb lorsqu'il est survolé */
input[type="range"]::-webkit-slider-thumb:hover {
  background: #45a049; /* Couleur de fond du thumb en survol */
}

/* Style personnalisé du thumb lorsqu'il est actif (clic dessus) */
input[type="range"]::-webkit-slider-thumb:active {
  background: #45a049; /* Couleur de fond du thumb lorsqu'il est actif */
}


.form-range{
  background: #654987;
  margin-top:30px;
  width:100%;
  height: 20px;
}

.sous-menu {

  display:none;
	position: absolute;
	left: 0px;
	top: 31px;
	z-index: 900;
	background: #121212;
	width: 150px;
	padding: 5px;
	border-radius: 6px;
	border: 1px solid #333333;
}
/* .menu detail{
background: #121212;
} */


.client-head{
  font-size: 105px;
  text-align: center;
  background: #654987;
  border-radius: 50%;
  color:#efefef;
  width:150px;
  height: 150px;
  margin:auto;
}

.btn-fonction{
  margin-top:20px;
    padding: 3px 16px;
    font-size: 15px;
    text-transform: uppercase;
    font-weight: 600;
    color: #654987;
    border: 1px solid;
    border-radius: 8px;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;

}

.number{
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #efefef;
  font-size: 25px;
  font-weight: 700;
  color: #654987;
  margin-right: 20px;
  margin-bottom: 15px;
}


.modal {
	--bs-modal-zindex: 1055;
	--bs-modal-width: 100%;
	--bs-modal-padding: 5px;
	--bs-modal-margin: 10px;

	position: fixed;
	top: 0;
	left: 0;
	z-index: var(--bs-modal-zindex);
	display: none;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	outline: 0;
}


.modal-dialog {
	position: relative;
	width: 100%;
	margin: 5px;
	pointer-events: none;
}

.modal-content {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
  max-width: 100%;
  margin:0;
  height: 99vh;
	color: var(--text);
	pointer-events: auto;
	background-color: var(--fond);
	background-clip: padding-box;
	border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
	border-radius: var(--radius);
	outline: 0;
}

/*===== All Slick Slide Outline Style =====*/
.slick-slide {
  outline: 0; }


/*  new footer*/


footer {
    position: absolute;
    bottom: 0px;
    background-color: var(--footer-background);
    min-width: 300px;
    width: 100vw;
    bottom: 0px;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.footer-wrapper {
    display: flex;
    background: var(--footer-background);
    flex-direction: column;
    max-width: 1320px;
    padding: 16px;
}

/*? top section */
.footer-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: start;
    padding: 16px 0px;
    justify-content: space-between;
}

.footer-line {
    display: block;
    width: 100%;
    height: 8px;
}

/*? footer subscribe */
.footer-subscribe {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.footer-subscribe > input {
    border: 1px solid var(--button-border);
    color: var(--text-color);
    outline: none;
    min-height: 36px;
    background-color: var(--footer-background);
    font-size: 1.2rem;
    flex: 1 0 120px;
    padding: 8px 12px;
    border-radius: 8px;
}

.footer-subscribe > input::placeholder {
    color: var(--text-color);
}

.footer-subscribe > button {
    cursor: pointer;
    background-color: var(--button-color);
    border-radius: 8px;
    color: white;
    font-size: 1.25rem;
    min-width: 120px;
    min-height: 36px;
    flex: 1 0 80px;
    white-space: nowrap;
    padding: 8px 12px;
    border: 0px;
    outline: none;
    border: 1px solid var(--button-border);
}

/*? footer columns */
.footer-columns {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
    align-items: start;
    flex: 2 0 140px;
    width: 100%;
    gap: 16px;
    padding: 24px 8px 16px 8px;
    margin: 0 auto;
}

.footer-columns ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.footer-columns ul a {
    color: var(--text-color);
    text-decoration: none;
}

.footer-columns ul a:hover{
    text-decoration: underline;
}

.footer-columns ul li {
    margin-bottom: 16px;
}

.footer-columns h3 {
    color: var(--text-primary);
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 1.125rem;
}

.footer-centering {
    margin: 0 auto;
}

.footer-columns > section {
    min-width: 150px;
}

.footer-logo {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    gap: 16px;
    color: var(--text-color);
    margin-bottom: 60px;
}

.footer-logo svg {
    stroke: var(--text-color);
    stroke-width: 8px;
    width: 50px;
    height: 50px;
}


/*? Footer bottom */

.footer-bottom {
    text-align: center;
    margin-top: 48px;
    display: flex;
    align-items: center;
    width: 100%;
    gap: 16px;
    padding: 16px 0px;
    flex-wrap: wrap;
    justify-content: space-between;
    color: var(--text-gray);
}

.footer-bottom > small {
    font-size: 16px;
    margin: 0 4px;
}

.footer-headline > h2 {
    margin: 0px;
    color: var(--text-primary);
}

.footer-headline > p {
    color: var(--text-gray);
    margin: 4px 0px 20px 0px;
}

.footer-line {
    display: block;
    min-width: 40px;
    height: 2px;
    background-color: var(--text-gray);
}

/*? socials */

.social-links {
    display: flex;
    gap: 8px;
    align-items: center;
}

.social-text {
    display: flex;
    align-items: center;
    gap: 8px;
}

.social-links img {
    width: 24px;
    height: 24px;
    transition: all 0.2s ease-in-out;
}

.social-links img:hover {
    transform: scale(1.1);
}

.social-links ul {
    display: flex;
    gap: 12px;
    list-style-type: none;
}

/*? mobile */

@media (max-width: 800px) {
    .footer-top {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 16px 8px 32px 8px;
    }

    .footer-bottom {
        display: flex;
        flex-direction: column-reverse;
        align-items: space-between;
        justify-content: center;
        margin: 0 auto;
    }
}


/* fin new footer*/

.gradient-border {
  position: relative;
  height: 100px; /* Hauteur de la ligne */
  background: var(--fond);
  overflow: hidden;
}

.gradient-border::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--fond-box);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 0 100%); /* Crée une courbe de droite à gauche */
}

/* fin Gradient border */


/* Timeline */

a {
  text-decoration: none;
  color: #74628a
}
a:hover {
  color: #654987
}
/* h4{text-align:center;margin:5px 0;color:#444} */
.main-timeline{position:relative}
.main-timeline:before{content:"";width:5px;height:100%;border-radius:20px;margin:0 auto;background:var(--touch);position:absolute;top:0;left:0;right:0}
.main-timeline .timeline{display:inline-block;margin-bottom:50px;position:relative}
.main-timeline .timeline:before {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid var(--fond-roadmap);
  background: #654987;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%)
}

.main-timeline .timeline-icon {
  display: inline-block;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 3px solid #654987;
  padding: 13px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 30%;
  transform: translateY(-50%)
}

.main-timeline .timeline-icon p {
  display: block;
  border-radius: 50%;
  background: #654987;
  font-size: 30px;
  font-weight: 500;
  color: var(--text-titre);
  line-height: 100px;
  z-index: 1;
  position: relative
}

.main-timeline .timeline-icon i {
  display: block;
  border-radius: 50%;
  background: #654987;
  font-size: 60px;
  color: #fff;
  line-height: 99px;
  z-index: 1;
  position: relative
}

.main-timeline .timeline-icon:after,
.main-timeline .timeline-icon:before {
  content: "";
  width: 100px;
  height: 3px;
  background: #654987;
  position: absolute;
  top: 50%;
  right: -100px;
  transform: translateY(-50%)
}
.main-timeline .timeline-icon:after{width:70px;height:50px;background:var(--fond-box);top:89px;right:-30px}
.main-timeline .timeline-content{width:50%;padding:0 50px;margin:52px 0 0;float:right;position:relative}
.main-timeline .timeline-content:before {
  content: "";
  width: 70%;
  height: 30%;
  border: 3px solid #654987;
  border-top: none;
  border-right: none;
  position: absolute;
  bottom: -18px;
  left: 35px
}

.main-timeline .timeline-content:after {
  content: "";
  width: 37px;
  height: 0px;
  background: #654987;
  position: absolute;
  top: 18px;
  left: 0
}

.main-timeline .title {
  font-size: 20px;
  font-weight: 600;
  color: #654987;
  text-transform: uppercase;
  margin: 0 0 5px
}
.main-timeline .description{display:inline-block;font-size:16px;color:var(--text);line-height:25px;
  /* letter-spacing:1px; */
  margin:0}
.main-timeline .timeline:nth-child(even) .timeline-icon{left:auto;right:30%}
.main-timeline .timeline:nth-child(even) .timeline-icon:before{right:auto;left:-100px}
.main-timeline .timeline:nth-child(even) .timeline-icon:after{right:auto;left:-30px}
.main-timeline .timeline:nth-child(even) .timeline-content{float:left}
.main-timeline .timeline:nth-child(even) .timeline-content:before{left:auto;right:35px;transform:rotateY(180deg)}
.main-timeline .timeline:nth-child(even) .timeline-content:after{left:auto;right:0}
.main-timeline .timeline:nth-child(2n) .timeline-content:after,
.main-timeline .timeline:nth-child(2n) .timeline-icon i,
.main-timeline .timeline:nth-child(2n) .timeline-icon:before,
.main-timeline .timeline:nth-child(2n):before {
  background: #654987
}

.main-timeline .timeline:nth-child(2n) .timeline-icon {
  border-color: #654987
}

.main-timeline .timeline:nth-child(2n) .title {
  color: #654987
}

.main-timeline .timeline:nth-child(2n) .timeline-content:before {
  border-left-color: #654987;
  border-bottom-color: #654987
}

.main-timeline .timeline:nth-child(3n) .timeline-content:after,
.main-timeline .timeline:nth-child(3n) .timeline-icon i,
.main-timeline .timeline:nth-child(3n) .timeline-icon:before,
.main-timeline .timeline:nth-child(3n):before {
  background: #654987
}

.main-timeline .timeline:nth-child(3n) .timeline-icon {
  border-color: #654987
}

.main-timeline .timeline:nth-child(3n) .title {
  color: #654987
}

.main-timeline .timeline:nth-child(3n) .timeline-content:before {
  border-left-color: #654987;
  border-bottom-color: #654987
}

.main-timeline .timeline:nth-child(4n) .timeline-content:after,.main-timeline .timeline:nth-child(4n) .timeline-icon i,.main-timeline .timeline:nth-child(4n) .timeline-icon:before,.main-timeline .timeline:nth-child(4n):before{background:#d75e19}
.main-timeline .timeline:nth-child(4n) .timeline-icon{border-color:#d75e19}
.main-timeline .timeline:nth-child(4n) .title{color:#d75e19}
.main-timeline .timeline:nth-child(4n) .timeline-content:before{border-left-color:#d75e19;border-bottom-color:#d75e19}

.main-timeline .timeline:nth-child(5n) .timeline-content:after,.main-timeline .timeline:nth-child(5n) .timeline-icon i,.main-timeline .timeline:nth-child(5n) .timeline-icon:before,.main-timeline .timeline:nth-child(5n):before{background:#d75e19}
.main-timeline .timeline:nth-child(5n) .timeline-icon{border-color:#d75e19}
.main-timeline .timeline:nth-child(5n) .title{color:#d75e19}
.main-timeline .timeline:nth-child(5n) .timeline-content:before{border-left-color:#d75e19;border-bottom-color:#d75e19}

@media only screen and (max-width:1200px){.main-timeline .timeline-icon:before{width:50px;right:-50px}
.main-timeline .timeline:nth-child(even) .timeline-icon:before{right:auto;left:-50px}
.main-timeline .timeline-content{margin-top:75px}
}
@media only screen and (max-width:990px){.main-timeline .timeline{margin:0 0 10px}
.main-timeline .timeline-icon{left:25%}
.main-timeline .timeline:nth-child(even) .timeline-icon{right:25%}
.main-timeline .timeline-content{margin-top:115px}
}
@media only screen and (max-width:767px){.main-timeline{padding-top:50px}
.main-timeline:before{left:80px;right:0;margin:0}
.main-timeline .timeline{margin-bottom:70px}
.main-timeline .timeline:before{top:0;left:83px;right:0;margin:0}
.main-timeline .timeline-icon{width:60px;height:60px;line-height:40px;padding:5px;top:0;left:0}
.main-timeline .timeline:nth-child(even) .timeline-icon{left:0;right:auto}
.main-timeline .timeline-icon:before,.main-timeline .timeline:nth-child(even) .timeline-icon:before{width:25px;left:auto;right:-25px}
.main-timeline .timeline-icon:after,.main-timeline .timeline:nth-child(even) .timeline-icon:after{width:25px;height:30px;top:44px;left:auto;right:-5px}
.main-timeline .timeline-icon i{font-size:30px;line-height:45px}
.main-timeline .timeline-content,.main-timeline .timeline:nth-child(even) .timeline-content{width:100%;margin-top:-15px;padding-left:130px;padding-right:5px}
.main-timeline .timeline:nth-child(even) .timeline-content{float:right}
.main-timeline .timeline-content:before,.main-timeline .timeline:nth-child(even) .timeline-content:before{width:50%;left:120px}
.main-timeline .timeline:nth-child(even) .timeline-content:before{right:auto;transform:rotateY(0)}
.main-timeline .timeline-content:after,.main-timeline .timeline:nth-child(even) .timeline-content:after{left:85px}
}
@media only screen and (max-width:479px){.main-timeline .timeline-content,.main-timeline .timeline:nth-child(2n) .timeline-content{padding-left:110px}
.main-timeline .timeline-content:before,.main-timeline .timeline:nth-child(2n) .timeline-content:before{left:99px}
.main-timeline .timeline-content:after,.main-timeline .timeline:nth-child(2n) .timeline-content:after{left:65px}
}


/* fin Timeline */




/*===== All Section Title Style =====*/
.section-title .title {
  font-size: 44px;
  font-weight: 600;
  color: var(--text-box);
  line-height: 55px; }
  @media (max-width: 767px) {
    .section-title .title {
      font-size: 30px;
      line-height: 35px; } }
.section-title .text {
  font-size: 16px;
  line-height: 24px;
  color: var(--text-box);
  margin-top: 24px; }

/*===== All Preloader Style =====*/
.preloader {
  /* Body Overlay */
  position: fixed;
  top: 0;
  left: 0;
  display: table;
  height: 100%;
  width: 100%;
  /* Change Background Color */
  background: var(--fond);
  z-index: 99999; }
  .preloader .loader {
    display: table-cell;
    vertical-align: middle;
    text-align: center; }
    .preloader .loader .ytp-spinner {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 64px;
      margin-left: -32px;
      z-index: 18;
      pointer-events: none; }
      .preloader .loader .ytp-spinner .ytp-spinner-container {
        pointer-events: none;
        position: absolute;
        width: 100%;
        padding-bottom: 100%;
        top: 50%;
        left: 50%;
        margin-top: -50%;
        margin-left: -50%;
        -webkit-animation: ytp-spinner-linspin 1568.23529647ms linear infinite;
        -moz-animation: ytp-spinner-linspin 1568.23529647ms linear infinite;
        -o-animation: ytp-spinner-linspin 1568.23529647ms linear infinite;
        animation: ytp-spinner-linspin 1568.23529647ms linear infinite; }
        .preloader .loader .ytp-spinner .ytp-spinner-container .ytp-spinner-rotator {
          position: absolute;
          width: 100%;
          height: 100%;
          -webkit-animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
          -moz-animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
          -o-animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
          animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
          .preloader .loader .ytp-spinner .ytp-spinner-container .ytp-spinner-rotator .ytp-spinner-left {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            overflow: hidden;
            right: 50%; }
          .preloader .loader .ytp-spinner .ytp-spinner-container .ytp-spinner-rotator .ytp-spinner-right {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            overflow: hidden;
            left: 50%; }
    .preloader .loader .ytp-spinner-circle {
      box-sizing: border-box;
      position: absolute;
      width: 200%;
      height: 100%;
      border-style: solid;
      /* Spinner Color */
      border-color: #654987 #654987 #efefef;
      border-radius: 50%;
      border-width: 5px; }
    .preloader .loader .ytp-spinner-left .ytp-spinner-circle {
      left: 0;
      right: -100%;
      border-right-color: #efefef;
      -webkit-animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
      -moz-animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
      -o-animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
      animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
    .preloader .loader .ytp-spinner-right .ytp-spinner-circle {
      left: -100%;
      right: 0;
      border-left-color: #efefef;
      -webkit-animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
      -moz-animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
      -o-animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
      animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }

/* Preloader Animations */
@-webkit-keyframes ytp-spinner-linspin {
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }
@keyframes ytp-spinner-linspin {
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }
@-webkit-keyframes ytp-spinner-easespin {
  12.5% {
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg); }
  25% {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg); }
  37.5% {
    -webkit-transform: rotate(405deg);
    -moz-transform: rotate(405deg);
    -ms-transform: rotate(405deg);
    -o-transform: rotate(405deg);
    transform: rotate(405deg); }
  50% {
    -webkit-transform: rotate(540deg);
    -moz-transform: rotate(540deg);
    -ms-transform: rotate(540deg);
    -o-transform: rotate(540deg);
    transform: rotate(540deg); }
  62.5% {
    -webkit-transform: rotate(675deg);
    -moz-transform: rotate(675deg);
    -ms-transform: rotate(675deg);
    -o-transform: rotate(675deg);
    transform: rotate(675deg); }
  75% {
    -webkit-transform: rotate(810deg);
    -moz-transform: rotate(810deg);
    -ms-transform: rotate(810deg);
    -o-transform: rotate(810deg);
    transform: rotate(810deg); }
  87.5% {
    -webkit-transform: rotate(945deg);
    -moz-transform: rotate(945deg);
    -ms-transform: rotate(945deg);
    -o-transform: rotate(945deg);
    transform: rotate(945deg); }
  to {
    -webkit-transform: rotate(1080deg);
    -moz-transform: rotate(1080deg);
    -ms-transform: rotate(1080deg);
    -o-transform: rotate(1080deg);
    transform: rotate(1080deg); } }
@keyframes ytp-spinner-easespin {
  12.5% {
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg); }
  25% {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg); }
  37.5% {
    -webkit-transform: rotate(405deg);
    -moz-transform: rotate(405deg);
    -ms-transform: rotate(405deg);
    -o-transform: rotate(405deg);
    transform: rotate(405deg); }
  50% {
    -webkit-transform: rotate(540deg);
    -moz-transform: rotate(540deg);
    -ms-transform: rotate(540deg);
    -o-transform: rotate(540deg);
    transform: rotate(540deg); }
  62.5% {
    -webkit-transform: rotate(675deg);
    -moz-transform: rotate(675deg);
    -ms-transform: rotate(675deg);
    -o-transform: rotate(675deg);
    transform: rotate(675deg); }
  75% {
    -webkit-transform: rotate(810deg);
    -moz-transform: rotate(810deg);
    -ms-transform: rotate(810deg);
    -o-transform: rotate(810deg);
    transform: rotate(810deg); }
  87.5% {
    -webkit-transform: rotate(945deg);
    -moz-transform: rotate(945deg);
    -ms-transform: rotate(945deg);
    -o-transform: rotate(945deg);
    transform: rotate(945deg); }
  to {
    -webkit-transform: rotate(1080deg);
    -moz-transform: rotate(1080deg);
    -ms-transform: rotate(1080deg);
    -o-transform: rotate(1080deg);
    transform: rotate(1080deg); } }
@-webkit-keyframes ytp-spinner-left-spin {
  0% {
    -webkit-transform: rotate(130deg);
    -moz-transform: rotate(130deg);
    -ms-transform: rotate(130deg);
    -o-transform: rotate(130deg);
    transform: rotate(130deg); }
  50% {
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    transform: rotate(-5deg); }
  to {
    -webkit-transform: rotate(130deg);
    -moz-transform: rotate(130deg);
    -ms-transform: rotate(130deg);
    -o-transform: rotate(130deg);
    transform: rotate(130deg); } }
@keyframes ytp-spinner-left-spin {
  0% {
    -webkit-transform: rotate(130deg);
    -moz-transform: rotate(130deg);
    -ms-transform: rotate(130deg);
    -o-transform: rotate(130deg);
    transform: rotate(130deg); }
  50% {
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    transform: rotate(-5deg); }
  to {
    -webkit-transform: rotate(130deg);
    -moz-transform: rotate(130deg);
    -ms-transform: rotate(130deg);
    -o-transform: rotate(130deg);
    transform: rotate(130deg); } }
@-webkit-keyframes ytp-right-spin {
  0% {
    -webkit-transform: rotate(-130deg);
    -moz-transform: rotate(-130deg);
    -ms-transform: rotate(-130deg);
    -o-transform: rotate(-130deg);
    transform: rotate(-130deg); }
  50% {
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    transform: rotate(5deg); }
  to {
    -webkit-transform: rotate(-130deg);
    -moz-transform: rotate(-130deg);
    -ms-transform: rotate(-130deg);
    -o-transform: rotate(-130deg);
    transform: rotate(-130deg); } }
@keyframes ytp-right-spin {
  0% {
    -webkit-transform: rotate(-130deg);
    -moz-transform: rotate(-130deg);
    -ms-transform: rotate(-130deg);
    -o-transform: rotate(-130deg);
    transform: rotate(-130deg); }
  50% {
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    transform: rotate(5deg); }
  to {
    -webkit-transform: rotate(-130deg);
    -moz-transform: rotate(-130deg);
    -ms-transform: rotate(-130deg);
    -o-transform: rotate(-130deg);
    transform: rotate(-130deg); } }
/*===========================
        11.BUTTON css
===========================*/
.buttons-title .title {
  font-size: 36px;
  line-height: 45px;
  color: var(--text-titre); }
  @media (max-width: 767px) {
    .buttons-title .title {
      font-size: 24px;
      line-height: 35px; } }

.main-btn {
  display: inline-block;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  padding: 0 16px;
  font-size: 16px;
  line-height: 30px;
  color: #654987;
  cursor: pointer;
  z-index: 5;
  -webkit-transition: all 0.4s ease-out 0s;
  -moz-transition: all 0.4s ease-out 0s;
  -ms-transition: all 0.4s ease-out 0s;
  -o-transition: all 0.4s ease-out 0s;
  transition: all 0.4s ease-out 0s;
  position: relative;
  text-transform: uppercase; }
  @media (max-width: 767px) {
    .main-btn {
      font-size: 14px;
      padding: 0 20px;
      line-height: 40px; } }

/*===== standard Buttons =====*/
.standard-buttons ul li {
  display: inline-block;
  margin-left: 18px;
  margin-top: 20px; }
  @media (max-width: 767px) {
    .standard-buttons ul li {
      margin-left: 0; } }
  .standard-buttons ul li:first-child {
    margin-left: 0; }
.standard-buttons .standard-one {
  border-color: #654987;
  }
  .standard-buttons .standard-one:hover {
    color: #654987;
    background-color: rgba(0, 103, 244, 0.4); }
.standard-buttons .standard-two {
  color: #fff;
  background-color: #654987;
    border-color: #654987;
  }
  .standard-buttons .standard-two:hover {
    color: #654987;
    background-color: transparent; }
.standard-buttons .standard-three {
  overflow: hidden;
  line-height: 50px;
  color: #fff;
  background: -webkit-linear-gradient(left, #654987 0%, #2bdbdc 50%, #654987 100%);
    background: -o-linear-gradient(left, #654987 0%, #2bdbdc 50%, #654987 100%);
    background: linear-gradient(to right, #654987 0%, #2bdbdc 50%, #654987 100%);
  border: 0;
  line-height: 52px;
  background-size: 200% auto; }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .standard-buttons .standard-three {
      line-height: 44px; } }
  @media (max-width: 767px) {
    .standard-buttons .standard-three {
      line-height: 44px; } }
  .standard-buttons .standard-three:hover {
    background-position: right center; }
.standard-buttons .standard-four {
  border-color: #654987;
  padding-left: 60px; }
  @media (max-width: 767px) {
    .standard-buttons .standard-four {
      padding-left: 40px; } }
  .standard-buttons .standard-four span {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    overflow: hidden;
    left: 30px;
    line-height: normal; }
    @media (max-width: 767px) {
      .standard-buttons .standard-four span {
        left: 15px; } }
  .standard-buttons .standard-four:hover {
    color: #654987;
    background-color: rgba(0, 103, 244, 0.4); }
    .standard-buttons .standard-four:hover i {
      animation: iconTranslateY 0.5s forwards; }
.standard-buttons .standard-five {
  color: #fff;
  background-color: #654987;
    border-color: #654987;
  padding-left: 60px; }
  @media (max-width: 767px) {
    .standard-buttons .standard-five {
      padding-left: 40px; } }
  .standard-buttons .standard-five span {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    overflow: hidden;
    left: 30px;
    line-height: normal; }
    @media (max-width: 767px) {
      .standard-buttons .standard-five span {
        left: 15px; } }
  .standard-buttons .standard-five:hover {
    color: #654987;
    background-color: transparent; }
    .standard-buttons .standard-five:hover i {
      animation: iconTranslateY 0.5s forwards; }
.standard-buttons .standard-six {
  padding-right: 60px;
  overflow: hidden;
  line-height: 50px;
  color: #fff;
  background: -webkit-linear-gradient(left, #654987 0%, #2bdbdc 50%, #654987 100%);
    background: -o-linear-gradient(left, #654987 0%, #2bdbdc 50%, #654987 100%);
    background: linear-gradient(to right, #654987 0%, #2bdbdc 50%, #654987 100%);
  border: 0;
  line-height: 52px;
  background-size: 200% auto; }
  @media (max-width: 767px) {
    .standard-buttons .standard-six {
      padding-right: 40px;
      line-height: 44px; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .standard-buttons .standard-six {
      line-height: 44px; } }
  .standard-buttons .standard-six span {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    overflow: hidden;
    right: 30px;
    line-height: normal; }
    @media (max-width: 767px) {
      .standard-buttons .standard-six span {
        right: 15px; } }
  .standard-buttons .standard-six:hover {
    background-position: right center; }
    .standard-buttons .standard-six:hover i {
      -webkit-animation: iconTranslateY 0.5s forwards;
      -moz-animation: iconTranslateY 0.5s forwards;
      -o-animation: iconTranslateY 0.5s forwards;
      animation: iconTranslateY 0.5s forwards; }

/*===== Light Rounded Buttons =====*/
.light-rounded-buttons ul li {
  display: inline-block;
  margin-left: 18px;
  margin-top: 20px; }
  @media (max-width: 767px) {
    .light-rounded-buttons ul li {
      margin-left: 0; } }
  .light-rounded-buttons ul li:first-child {
    margin-left: 0; }
.light-rounded-buttons .main-btn {
  border-radius: var(--radius); }
.light-rounded-buttons .light-rounded-one {
  border-color: #654987;
  }
  .light-rounded-buttons .light-rounded-one:hover {
    color: #654987;
    background-color: rgba(0, 103, 244, 0.4); }
.light-rounded-buttons .light-rounded-two {
  color: #fff;
  background-color: #654987;
    border-color: #654987;
  }
  .light-rounded-buttons .light-rounded-two:hover {
    color: #654987;
    background-color: transparent; }
.light-rounded-buttons .light-rounded-three {
  overflow: hidden;
  line-height: 50px;
  color: #fff;
  background: -webkit-linear-gradient(left, #654987 0%, #2bdbdc 50%, #654987 100%);
    background: -o-linear-gradient(left, #654987 0%, #2bdbdc 50%, #654987 100%);
    background: linear-gradient(to right, #654987 0%, #2bdbdc 50%, #654987 100%);
  background-size: 200% auto;
  line-height: 52px;
  border: 0; }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .light-rounded-buttons .light-rounded-three {
      line-height: 44px; } }
  @media (max-width: 767px) {
    .light-rounded-buttons .light-rounded-three {
      line-height: 44px; } }
  .light-rounded-buttons .light-rounded-three:hover {
    background-position: right center; }
.light-rounded-buttons .light-rounded-four {
  border-color: #654987;
  padding-left: 60px; }
  @media (max-width: 767px) {
    .light-rounded-buttons .light-rounded-four {
      padding-left: 40px; } }
  .light-rounded-buttons .light-rounded-four span {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    overflow: hidden;
    left: 30px;
    line-height: normal; }
    @media (max-width: 767px) {
      .light-rounded-buttons .light-rounded-four span {
        left: 15px; } }
  .light-rounded-buttons .light-rounded-four:hover {
    color: #654987;
    background-color: rgba(0, 103, 244, 0.4); }
    .light-rounded-buttons .light-rounded-four:hover i {
      -webkit-animation: iconTranslateY 0.5s forwards;
      -moz-animation: iconTranslateY 0.5s forwards;
      -o-animation: iconTranslateY 0.5s forwards;
      animation: iconTranslateY 0.5s forwards; }
.light-rounded-buttons .light-rounded-five {
  color: #fff;
  background-color: #654987;
    border-color: #654987;
  padding-left: 60px; }
  @media (max-width: 767px) {
    .light-rounded-buttons .light-rounded-five {
      padding-left: 40px; } }
  .light-rounded-buttons .light-rounded-five span {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    overflow: hidden;
    left: 30px;
    line-height: normal; }
    @media (max-width: 767px) {
      .light-rounded-buttons .light-rounded-five span {
        left: 15px; } }
  .light-rounded-buttons .light-rounded-five:hover {
    color: #654987;
    background-color: transparent; }
    .light-rounded-buttons .light-rounded-five:hover i {
      -webkit-animation: iconTranslateY 0.5s forwards;
      -moz-animation: iconTranslateY 0.5s forwards;
      -o-animation: iconTranslateY 0.5s forwards;
      animation: iconTranslateY 0.5s forwards; }
.light-rounded-buttons .light-rounded-six {
  padding-right: 60px;
  overflow: hidden;
  line-height: 50px;
  color: #fff;
  background: -webkit-linear-gradient(left, #654987 0%, #2bdbdc 50%, #654987 100%);
    background: -o-linear-gradient(left, #654987 0%, #2bdbdc 50%, #654987 100%);
    background: linear-gradient(to right, #654987 0%, #2bdbdc 50%, #654987 100%);
  background-size: 200% auto;
  line-height: 52px;
  border: 0; }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .light-rounded-buttons .light-rounded-six {
      line-height: 44px; } }
  @media (max-width: 767px) {
    .light-rounded-buttons .light-rounded-six {
      padding-right: 40px;
      line-height: 44px; } }
  .light-rounded-buttons .light-rounded-six span {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    overflow: hidden;
    right: 30px;
    line-height: normal; }
    @media (max-width: 767px) {
      .light-rounded-buttons .light-rounded-six span {
        right: 15px; } }
  .light-rounded-buttons .light-rounded-six:hover {
    background-position: right center; }
    .light-rounded-buttons .light-rounded-six:hover i {
      -webkit-animation: iconTranslateY 0.5s forwards;
      -moz-animation: iconTranslateY 0.5s forwards;
      -o-animation: iconTranslateY 0.5s forwards;
      animation: iconTranslateY 0.5s forwards; }

/*===== Semi Rounded Buttons =====*/
.semi-rounded-buttons ul li {
  display: inline-block;
  margin-left: 18px;
  margin-top: 20px; }
  @media (max-width: 767px) {
    .semi-rounded-buttons ul li {
      margin-left: 0; } }
  .semi-rounded-buttons ul li:first-child {
    margin-left: 0; }
.semi-rounded-buttons .main-btn {
  border-radius: var(--radius); }
.semi-rounded-buttons .semi-rounded-one {
  border-color: #654987;
  }
  .semi-rounded-buttons .semi-rounded-one:hover {
    color: #654987;
    background-color: rgba(0, 103, 244, 0.4); }
.semi-rounded-buttons .semi-rounded-two {
  color: #fff;
  background-color: #654987;
    border-color: #654987;
  }
  .semi-rounded-buttons .semi-rounded-two:hover {
    color: #654987;
    background-color: transparent; }
.semi-rounded-buttons .semi-rounded-three {
  overflow: hidden;
  line-height: 52px;
  background: -webkit-linear-gradient(left, #654987 0%, #2bdbdc 50%, #654987 100%);
    background: -o-linear-gradient(left, #654987 0%, #2bdbdc 50%, #654987 100%);
    background: linear-gradient(to right, #654987 0%, #2bdbdc 50%, #654987 100%);
  background-size: 200% auto;
  border: 0;
  color: #fff; }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .semi-rounded-buttons .semi-rounded-three {
      line-height: 44px; } }
  @media (max-width: 767px) {
    .semi-rounded-buttons .semi-rounded-three {
      line-height: 44px; } }
  .semi-rounded-buttons .semi-rounded-three:hover {
    background-position: right center; }
.semi-rounded-buttons .semi-rounded-four {
  border-color: #654987;
  padding-left: 60px; }
  @media (max-width: 767px) {
    .semi-rounded-buttons .semi-rounded-four {
      padding-left: 40px; } }
  .semi-rounded-buttons .semi-rounded-four span {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    overflow: hidden;
    left: 30px;
    line-height: normal; }
    @media (max-width: 767px) {
      .semi-rounded-buttons .semi-rounded-four span {
        left: 15px; } }
  .semi-rounded-buttons .semi-rounded-four:hover {
    color: #654987;
    background-color: rgba(0, 103, 244, 0.4); }
    .semi-rounded-buttons .semi-rounded-four:hover i {
      -webkit-animation: iconTranslateY 0.5s forwards;
      -moz-animation: iconTranslateY 0.5s forwards;
      -o-animation: iconTranslateY 0.5s forwards;
      animation: iconTranslateY 0.5s forwards; }
.semi-rounded-buttons .semi-rounded-five {
  color: #fff;
  background-color: #654987;
    border-color: #654987;
  padding-left: 60px; }
  @media (max-width: 767px) {
    .semi-rounded-buttons .semi-rounded-five {
      padding-left: 40px; } }
  .semi-rounded-buttons .semi-rounded-five span {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    overflow: hidden;
    left: 30px;
    line-height: normal; }
    @media (max-width: 767px) {
      .semi-rounded-buttons .semi-rounded-five span {
        left: 15px; } }
  .semi-rounded-buttons .semi-rounded-five:hover {
    color: #654987;
    background-color: transparent; }
    .semi-rounded-buttons .semi-rounded-five:hover i {
      -webkit-animation: iconTranslateY 0.5s forwards;
      -moz-animation: iconTranslateY 0.5s forwards;
      -o-animation: iconTranslateY 0.5s forwards;
      animation: iconTranslateY 0.5s forwards; }
.semi-rounded-buttons .semi-rounded-six {
  padding-right: 60px;
  overflow: hidden;
  line-height: 52px;
  background: -webkit-linear-gradient(left, #654987 0%, #2bdbdc 50%, #654987 100%);
    background: -o-linear-gradient(left, #654987 0%, #2bdbdc 50%, #654987 100%);
    background: linear-gradient(to right, #654987 0%, #2bdbdc 50%, #654987 100%);
  background-size: 200% auto;
  border: 0;
  color: #fff; }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .semi-rounded-buttons .semi-rounded-six {
      line-height: 44px; } }
  @media (max-width: 767px) {
    .semi-rounded-buttons .semi-rounded-six {
      padding-right: 40px;
      line-height: 44px; } }
  .semi-rounded-buttons .semi-rounded-six span {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    overflow: hidden;
    right: 30px;
    line-height: normal; }
    @media (max-width: 767px) {
      .semi-rounded-buttons .semi-rounded-six span {
        right: 15px; } }
  .semi-rounded-buttons .semi-rounded-six:hover {
    background-position: right center; }
    .semi-rounded-buttons .semi-rounded-six:hover i {
      -webkit-animation: iconTranslateY 0.5s forwards;
      -moz-animation: iconTranslateY 0.5s forwards;
      -o-animation: iconTranslateY 0.5s forwards;
      animation: iconTranslateY 0.5s forwards; }

/*===== Rounded Buttons =====*/
.rounded-buttons ul li {
  display: inline-block;
  margin-left: 18px;
  margin-top: 20px; }
  @media (max-width: 767px) {
    .rounded-buttons ul li {
      margin-left: 0; } }
  .rounded-buttons ul li:first-child {
    margin-left: 0; }
.rounded-buttons .main-btn {
  border-radius: 6px; }
  .rounded-buttons .rounded-one {
    border-color: #efefef;
    background: #654987;
    color: #efefef;
  }
  .rounded-buttons .rounded-one:hover {
    color: #654987;
    background-color: rgba(0, 103, 244, 0.4); }
.rounded-buttons .rounded-two {
  color: #fff;
  background-color: #654987;
    border-color: #654987;
  }
  .rounded-buttons .rounded-two:hover {
    color: #654987;
    background-color: transparent; }
.rounded-buttons .rounded-three {
  overflow: hidden;
  line-height: 52px;
  background: -webkit-linear-gradient(left, #654987 0%, #2bdbdc 50%, #654987 100%);
    background: -o-linear-gradient(left, #654987 0%, #2bdbdc 50%, #654987 100%);
    background: linear-gradient(to right, #654987 0%, #2bdbdc 50%, #654987 100%);
  background-size: 200% auto;
  color: #fff;
  border: 0; }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .rounded-buttons .rounded-three {
      line-height: 44px; } }
  @media (max-width: 767px) {
    .rounded-buttons .rounded-three {
      line-height: 44px; } }
  .rounded-buttons .rounded-three:hover {
    background-position: right center; }
.rounded-buttons .rounded-four {
  border-color: #654987;
  padding-left: 60px; }
  @media (max-width: 767px) {
    .rounded-buttons .rounded-four {
      padding-left: 40px; } }
  .rounded-buttons .rounded-four span {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    overflow: hidden;
    left: 30px;
    line-height: normal; }
    @media (max-width: 767px) {
      .rounded-buttons .rounded-four span {
        left: 15px; } }
  .rounded-buttons .rounded-four:hover {
    color: #654987;
    background-color: rgba(0, 103, 244, 0.4); }
    .rounded-buttons .rounded-four:hover i {
      -webkit-animation: iconTranslateY 0.5s forwards;
      -moz-animation: iconTranslateY 0.5s forwards;
      -o-animation: iconTranslateY 0.5s forwards;
      animation: iconTranslateY 0.5s forwards; }
.rounded-buttons .rounded-five {
  color: #fff;
  background-color: #654987;
    border-color: #654987;
  padding-left: 60px; }
  @media (max-width: 767px) {
    .rounded-buttons .rounded-five {
      padding-left: 40px; } }
  .rounded-buttons .rounded-five span {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    overflow: hidden;
    left: 30px;
    line-height: normal; }
    @media (max-width: 767px) {
      .rounded-buttons .rounded-five span {
        left: 15px; } }
  .rounded-buttons .rounded-five:hover {
    color: #654987;
    background-color: transparent; }
    .rounded-buttons .rounded-five:hover i {
      -webkit-animation: iconTranslateY 0.5s forwards;
      -moz-animation: iconTranslateY 0.5s forwards;
      -o-animation: iconTranslateY 0.5s forwards;
      animation: iconTranslateY 0.5s forwards; }
.rounded-buttons .rounded-six {
  padding-right: 60px;
  overflow: hidden;
  line-height: 52px;
  background: -webkit-linear-gradient(left, #654987 0%, #2bdbdc 50%, #654987 100%);
    background: -o-linear-gradient(left, #654987 0%, #2bdbdc 50%, #654987 100%);
    background: linear-gradient(to right, #654987 0%, #2bdbdc 50%, #654987 100%);
  background-size: 200% auto;
  color: #fff;
  border: 0; }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .rounded-buttons .rounded-six {
      line-height: 44px; } }
  @media (max-width: 767px) {
    .rounded-buttons .rounded-six {
      padding-right: 40px;
      line-height: 44px; } }
  .rounded-buttons .rounded-six span {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    overflow: hidden;
    right: 30px;
    line-height: normal; }
    @media (max-width: 767px) {
      .rounded-buttons .rounded-six span {
        right: 15px; } }
  .rounded-buttons .rounded-six:hover {
    background-position: right center; }
    .rounded-buttons .rounded-six:hover i {
      -webkit-animation: iconTranslateY 0.5s forwards;
      -moz-animation: iconTranslateY 0.5s forwards;
      -o-animation: iconTranslateY 0.5s forwards;
      animation: iconTranslateY 0.5s forwards; }

/*===== Success Buttons =====*/
.success-buttons ul li {
  display: inline-block;
  margin-left: 18px;
  margin-top: 20px; }
  @media (max-width: 767px) {
    .success-buttons ul li {
      margin-left: 0; } }
  .success-buttons ul li:first-child {
    margin-left: 0; }
.success-buttons .success-one {
  border-color: #4da422;
  color: #4da422; }
  .success-buttons .success-one:hover {
    color: #4da422;
    background-color: rgba(77, 164, 34, 0.4); }
.success-buttons .success-two {
  color: #fff;
  background-color: #4da422;
  border-color: #4da422; }
  .success-buttons .success-two:hover {
    color: #4da422;
    background-color: transparent; }
.success-buttons .success-three {
  overflow: hidden;
  line-height: 52px;
  color: #fff;
  border: 0;
  background: -webkit-linear-gradient(left, #4da422 0%, #69e02e 50%, #4da422 100%);
  background: -o-linear-gradient(left, #4da422 0%, #69e02e 50%, #4da422 100%);
  background: linear-gradient(to right, #4da422 0%, #69e02e 50%, #4da422 100%);
  background-size: 200% auto; }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .success-buttons .success-three {
      line-height: 44px; } }
  @media (max-width: 767px) {
    .success-buttons .success-three {
      line-height: 44px; } }
  .success-buttons .success-three:hover {
    background-position: right center; }
.success-buttons .success-four {
  padding-left: 60px;
  border-color: #4da422;
  color: #4da422; }
  @media (max-width: 767px) {
    .success-buttons .success-four {
      padding-left: 40px; } }
  .success-buttons .success-four span {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    overflow: hidden;
    left: 30px;
    line-height: normal; }
    @media (max-width: 767px) {
      .success-buttons .success-four span {
        left: 15px; } }
  .success-buttons .success-four:hover {
    color: #4da422;
    background-color: rgba(77, 164, 34, 0.4); }
    .success-buttons .success-four:hover i {
      -webkit-animation: iconTranslateY 0.5s forwards;
      -moz-animation: iconTranslateY 0.5s forwards;
      -o-animation: iconTranslateY 0.5s forwards;
      animation: iconTranslateY 0.5s forwards; }
.success-buttons .success-five {
  padding-left: 60px;
  color: #fff;
  background-color: #4da422;
  border-color: #4da422; }
  @media (max-width: 767px) {
    .success-buttons .success-five {
      padding-left: 40px; } }
  .success-buttons .success-five span {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    overflow: hidden;
    left: 30px;
    line-height: normal; }
    @media (max-width: 767px) {
      .success-buttons .success-five span {
        left: 15px; } }
  .success-buttons .success-five:hover {
    color: #4da422;
    background-color: transparent; }
    .success-buttons .success-five:hover i {
      -webkit-animation: iconTranslateY 0.5s forwards;
      -moz-animation: iconTranslateY 0.5s forwards;
      -o-animation: iconTranslateY 0.5s forwards;
      animation: iconTranslateY 0.5s forwards; }
.success-buttons .success-six {
  padding-right: 60px;
  overflow: hidden;
  line-height: 52px;
  color: #fff;
  border: 0;
  background: -webkit-linear-gradient(left, #4da422 0%, #69e02e 50%, #4da422 100%);
  background: -o-linear-gradient(left, #4da422 0%, #69e02e 50%, #4da422 100%);
  background: linear-gradient(to right, #4da422 0%, #69e02e 50%, #4da422 100%);
  background-size: 200% auto; }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .success-buttons .success-six {
      line-height: 44px; } }
  @media (max-width: 767px) {
    .success-buttons .success-six {
      padding-right: 40px;
      line-height: 44px; } }
  .success-buttons .success-six span {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    overflow: hidden;
    right: 30px;
    line-height: normal; }
    @media (max-width: 767px) {
      .success-buttons .success-six span {
        right: 15px; } }
  .success-buttons .success-six:hover {
    background-position: right center; }
    .success-buttons .success-six:hover i {
      -webkit-animation: iconTranslateY 0.5s forwards;
      -moz-animation: iconTranslateY 0.5s forwards;
      -o-animation: iconTranslateY 0.5s forwards;
      animation: iconTranslateY 0.5s forwards; }

/*===== Warning Buttons =====*/
.warning-buttons ul li {
  display: inline-block;
  margin-left: 18px;
  margin-top: 20px; }
  @media (max-width: 767px) {
    .warning-buttons ul li {
      margin-left: 0; } }
  .warning-buttons ul li:first-child {
    margin-left: 0; }
.warning-buttons .warning-one {
  border-color: #ffb400;
  color: #ffb400; }
  .warning-buttons .warning-one:hover {
    color: #ffb400;
    background-color: rgba(255, 180, 0, 0.4); }
.warning-buttons .warning-two {
  color: #fff;
  background-color: #ffb400;
  border-color: #ffb400; }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .warning-buttons .warning-two {
      line-height: 44px; } }
  @media (max-width: 767px) {
    .warning-buttons .warning-two {
      padding-right: 40px;
      line-height: 44px; } }
  .warning-buttons .warning-two:hover {
    color: #ffb400;
    background-color: transparent; }
.warning-buttons .warning-three {
  overflow: hidden;
  line-height: 52px;
  color: #fff;
  border: 0;
  background: -webkit-linear-gradient(left, #ffb400 0%, #f7e500 50%, #ffb400 100%);
  background: -o-linear-gradient(left, #ffb400 0%, #f7e500 50%, #ffb400 100%);
  background: linear-gradient(to right, #ffb400 0%, #f7e500 50%, #ffb400 100%);
  background-size: 200% auto; }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .warning-buttons .warning-three {
      line-height: 44px; } }
  @media (max-width: 767px) {
    .warning-buttons .warning-three {
      line-height: 44px; } }
  .warning-buttons .warning-three:hover {
    background-position: right center; }
.warning-buttons .warning-four {
  padding-left: 60px;
  border-color: #ffb400;
  color: #ffb400; }
  @media (max-width: 767px) {
    .warning-buttons .warning-four {
      padding-left: 40px; } }
  .warning-buttons .warning-four span {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    overflow: hidden;
    left: 30px;
    line-height: normal; }
    @media (max-width: 767px) {
      .warning-buttons .warning-four span {
        left: 15px; } }
  .warning-buttons .warning-four:hover {
    color: #ffb400;
    background-color: rgba(255, 180, 0, 0.4); }
    .warning-buttons .warning-four:hover i {
      -webkit-animation: iconTranslateY 0.5s forwards;
      -moz-animation: iconTranslateY 0.5s forwards;
      -o-animation: iconTranslateY 0.5s forwards;
      animation: iconTranslateY 0.5s forwards; }
.warning-buttons .warning-five {
  padding-left: 60px;
  color: #fff;
  background-color: #ffb400;
  border-color: #ffb400; }
  @media (max-width: 767px) {
    .warning-buttons .warning-five {
      padding-left: 40px; } }
  .warning-buttons .warning-five span {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    overflow: hidden;
    left: 30px;
    line-height: normal; }
    @media (max-width: 767px) {
      .warning-buttons .warning-five span {
        left: 15px; } }
  .warning-buttons .warning-five:hover {
    color: #ffb400;
    background-color: transparent; }
    .warning-buttons .warning-five:hover i {
      -webkit-animation: iconTranslateY 0.5s forwards;
      -moz-animation: iconTranslateY 0.5s forwards;
      -o-animation: iconTranslateY 0.5s forwards;
      animation: iconTranslateY 0.5s forwards; }
.warning-buttons .warning-six {
  padding-right: 60px;
  overflow: hidden;
  line-height: 52px;
  color: #fff;
  border: 0;
  background: -webkit-linear-gradient(left, #ffb400 0%, #f7e500 50%, #ffb400 100%);
  background: -o-linear-gradient(left, #ffb400 0%, #f7e500 50%, #ffb400 100%);
  background: linear-gradient(to right, #ffb400 0%, #f7e500 50%, #ffb400 100%);
  background-size: 200% auto; }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .warning-buttons .warning-six {
      line-height: 44px; } }
  @media (max-width: 767px) {
    .warning-buttons .warning-six {
      padding-right: 40px;
      line-height: 44px; } }
  .warning-buttons .warning-six span {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    overflow: hidden;
    right: 30px;
    line-height: normal; }
    @media (max-width: 767px) {
      .warning-buttons .warning-six span {
        right: 15px; } }
  .warning-buttons .warning-six:hover {
    background-position: right center; }
    .warning-buttons .warning-six:hover i {
      -webkit-animation: iconTranslateY 0.5s forwards;
      -moz-animation: iconTranslateY 0.5s forwards;
      -o-animation: iconTranslateY 0.5s forwards;
      animation: iconTranslateY 0.5s forwards; }

/*===== Info Buttons =====*/
.info-buttons ul li {
  display: inline-block;
  margin-left: 18px;
  margin-top: 20px; }
  @media (max-width: 767px) {
    .info-buttons ul li {
      margin-left: 0; } }
  .info-buttons ul li:first-child {
    margin-left: 0; }
.info-buttons .info-one {
  border-color: #00b8d8;
  color: #00b8d8; }
  .info-buttons .info-one:hover {
    color: #00b8d8;
    background-color: rgba(0, 184, 216, 0.4); }
.info-buttons .info-two {
  color: #fff;
  background-color: #00b8d8;
  border-color: #00b8d8; }
  .info-buttons .info-two:hover {
    color: #00b8d8;
    background-color: transparent; }
.info-buttons .info-three {
  overflow: hidden;
  line-height: 52px;
  color: #fff;
  border: 0;
  background: -webkit-linear-gradient(left, #00b8d8 0%, #32fbfc 50%, #00b8d8 100%);
  background: -o-linear-gradient(left, #00b8d8 0%, #32fbfc 50%, #00b8d8 100%);
  background: linear-gradient(to right, #00b8d8 0%, #32fbfc 50%, #00b8d8 100%);
  background-size: 200% auto; }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .info-buttons .info-three {
      line-height: 44px; } }
  @media (max-width: 767px) {
    .info-buttons .info-three {
      line-height: 44px; } }
  .info-buttons .info-three:hover {
    background-position: right center; }
.info-buttons .info-four {
  padding-left: 60px;
  border-color: #00b8d8;
  color: #00b8d8; }
  @media (max-width: 767px) {
    .info-buttons .info-four {
      padding-left: 40px; } }
  .info-buttons .info-four span {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    overflow: hidden;
    left: 30px;
    line-height: normal; }
    @media (max-width: 767px) {
      .info-buttons .info-four span {
        left: 15px; } }
  .info-buttons .info-four:hover {
    color: #00b8d8;
    background-color: rgba(0, 184, 216, 0.4); }
    .info-buttons .info-four:hover i {
      -webkit-animation: iconTranslateY 0.5s forwards;
      -moz-animation: iconTranslateY 0.5s forwards;
      -o-animation: iconTranslateY 0.5s forwards;
      animation: iconTranslateY 0.5s forwards; }
.info-buttons .info-five {
  padding-left: 60px;
  color: #fff;
  background-color: #00b8d8;
  border-color: #00b8d8; }
  @media (max-width: 767px) {
    .info-buttons .info-five {
      padding-left: 40px; } }
  .info-buttons .info-five span {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    overflow: hidden;
    left: 30px;
    line-height: normal; }
    @media (max-width: 767px) {
      .info-buttons .info-five span {
        left: 15px; } }
  .info-buttons .info-five:hover {
    color: #00b8d8;
    background-color: transparent; }
    .info-buttons .info-five:hover i {
      -webkit-animation: iconTranslateY 0.5s forwards;
      -moz-animation: iconTranslateY 0.5s forwards;
      -o-animation: iconTranslateY 0.5s forwards;
      animation: iconTranslateY 0.5s forwards; }
.info-buttons .info-six {
  padding-right: 60px;
  overflow: hidden;
  line-height: 52px;
  color: #fff;
  border: 0;
  background: -webkit-linear-gradient(left, #00b8d8 0%, #32fbfc 50%, #00b8d8 100%);
  background: -o-linear-gradient(left, #00b8d8 0%, #32fbfc 50%, #00b8d8 100%);
  background: linear-gradient(to right, #00b8d8 0%, #32fbfc 50%, #00b8d8 100%);
  background-size: 200% auto; }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .info-buttons .info-six {
      line-height: 44px; } }
  @media (max-width: 767px) {
    .info-buttons .info-six {
      padding-right: 40px;
      line-height: 44px; } }
  .info-buttons .info-six span {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    overflow: hidden;
    right: 30px;
    line-height: normal; }
    @media (max-width: 767px) {
      .info-buttons .info-six span {
        right: 15px; } }
  .info-buttons .info-six:hover {
    background-position: right center; }
    .info-buttons .info-six:hover i {
      -webkit-animation: iconTranslateY 0.5s forwards;
      -moz-animation: iconTranslateY 0.5s forwards;
      -o-animation: iconTranslateY 0.5s forwards;
      animation: iconTranslateY 0.5s forwards; }

/*===== Danger Buttons =====*/
.danger-buttons ul li {
  display: inline-block;
  margin-left: 18px;
  margin-top: 20px; }
  @media (max-width: 767px) {
    .danger-buttons ul li {
      margin-left: 0; } }
  .danger-buttons ul li:first-child {
    margin-left: 0; }
.danger-buttons .danger-one {
  border-color: #fc3832;
  color: #fc3832; }
  .danger-buttons .danger-one:hover {
    color: #fc3832;
    background-color: rgba(252, 56, 50, 0.4); }
.danger-buttons .danger-two {
  color: #fff;
  background-color: #fc3832;
  border-color: #fc3832; }
  .danger-buttons .danger-two:hover {
    color: #fc3832;
    background-color: transparent; }
.danger-buttons .danger-three {
  overflow: hidden;
  line-height: 52px;
  color: #fff;
  border: 0;
  background: -webkit-linear-gradient(left, #fc3832 0%, #dc312b 50%, #fc3832 100%);
  background: -o-linear-gradient(left, #fc3832 0%, #dc312b 50%, #fc3832 100%);
  background: linear-gradient(to right, #fc3832 0%, #dc312b 50%, #fc3832 100%);
  background-size: 200% auto; }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .danger-buttons .danger-three {
      line-height: 44px; } }
  @media (max-width: 767px) {
    .danger-buttons .danger-three {
      line-height: 44px; } }
  .danger-buttons .danger-three:hover {
    background-position: right center; }
.danger-buttons .danger-four {
  padding-left: 60px;
  border-color: #fc3832;
  color: #fc3832; }
  @media (max-width: 767px) {
    .danger-buttons .danger-four {
      padding-left: 40px; } }
  .danger-buttons .danger-four span {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    overflow: hidden;
    left: 30px;
    line-height: normal; }
    @media (max-width: 767px) {
      .danger-buttons .danger-four span {
        left: 15px; } }
  .danger-buttons .danger-four:hover {
    color: #fc3832;
    background-color: rgba(252, 56, 50, 0.4); }
    .danger-buttons .danger-four:hover i {
      -webkit-animation: iconTranslateY 0.5s forwards;
      -moz-animation: iconTranslateY 0.5s forwards;
      -o-animation: iconTranslateY 0.5s forwards;
      animation: iconTranslateY 0.5s forwards; }
.danger-buttons .danger-five {
  padding-left: 60px;
  color: #fff;
  background-color: #fc3832;
  border-color: #fc3832; }
  @media (max-width: 767px) {
    .danger-buttons .danger-five {
      padding-left: 40px; } }
  .danger-buttons .danger-five span {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    overflow: hidden;
    left: 30px;
    line-height: normal; }
    @media (max-width: 767px) {
      .danger-buttons .danger-five span {
        left: 15px; } }
  .danger-buttons .danger-five:hover {
    color: #fc3832;
    background-color: transparent; }
    .danger-buttons .danger-five:hover i {
      -webkit-animation: iconTranslateY 0.5s forwards;
      -moz-animation: iconTranslateY 0.5s forwards;
      -o-animation: iconTranslateY 0.5s forwards;
      animation: iconTranslateY 0.5s forwards; }
.danger-buttons .danger-six {
  padding-right: 60px;
  overflow: hidden;
  line-height: 52px;
  color: #fff;
  border: 0;
  background: -webkit-linear-gradient(left, #fc3832 0%, #dc312b 50%, #fc3832 100%);
  background: -o-linear-gradient(left, #fc3832 0%, #dc312b 50%, #fc3832 100%);
  background: linear-gradient(to right, #fc3832 0%, #dc312b 50%, #fc3832 100%);
  background-size: 200% auto; }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .danger-buttons .danger-six {
      line-height: 44px; } }
  @media (max-width: 767px) {
    .danger-buttons .danger-six {
      padding-right: 40px;
      line-height: 44px; } }
  .danger-buttons .danger-six span {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    overflow: hidden;
    right: 30px;
    line-height: normal; }
    @media (max-width: 767px) {
      .danger-buttons .danger-six span {
        right: 15px; } }
  .danger-buttons .danger-six:hover {
    background-position: right center; }
    .danger-buttons .danger-six:hover i {
      -webkit-animation: iconTranslateY 0.5s forwards;
      -moz-animation: iconTranslateY 0.5s forwards;
      -o-animation: iconTranslateY 0.5s forwards;
      animation: iconTranslateY 0.5s forwards; }

@-webkit-keyframes iconTranslateY {
  49% {
    -webkit-transform: translateY(100%); }
  50% {
    opacity: 0;
    -webkit-transform: translateY(-100%); }
  51% {
    opacity: 1; } }
@-moz-keyframes iconTranslateY {
  49% {
    -webkit-transform: translateY(100%); }
  50% {
    opacity: 0;
    -webkit-transform: translateY(-100%); }
  51% {
    opacity: 1; } }
@keyframes iconTranslateY {
  49% {
    -webkit-transform: translateY(100%); }
  50% {
    opacity: 0;
    -webkit-transform: translateY(-100%); }
  51% {
    opacity: 1; } }
.lg-btn {
  line-height: 64px !important;
  font-size: 18px; }
  @media (max-width: 767px) {
    .lg-btn {
      font-size: 16px;
      ine-height: 52px; } }

.el-btn {
  line-height: 80px !important;
  font-size: 20px; }
  @media (max-width: 767px) {
    .el-btn {
      font-size: 18px;
      line-height: 74px; } }

.sm-btn {
  line-height: 40px !important;
  font-size: 12px; }

/*===== Regular Icon Buttons =====*/
.regular-icon-buttons ul li {
  display: inline-block;
  margin-left: 10px;
  margin-top: 20px; }
  .regular-icon-buttons ul li:first-child {
    margin-left: 0; }
  .regular-icon-buttons ul li .regular-icon-light-one {
    width: 40px;
    height: 40px;
    line-height: 36px;
    border: 2px solid #654987;
    text-align: center;
    font-size: 24px;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    overflow: hidden;
    color: #654987;
    }
    .regular-icon-buttons ul li .regular-icon-light-one:hover {
      color: #fff;
      background-color: #654987;
      }
  .regular-icon-buttons ul li .regular-icon-light-two {
    width: 40px;
    height: 40px;
    line-height: 36px;
    border: 2px solid #654987;
    text-align: center;
    font-size: 24px;
     border-radius:var(--radius);
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    overflow: hidden;
    color: #654987;
    }
    .regular-icon-buttons ul li .regular-icon-light-two:hover {
      color: #fff;
      background-color: #654987;
      }
  .regular-icon-buttons ul li .regular-icon-light-three {
    width: 40px;
    height: 40px;
    line-height: 36px;
    border: 2px solid #654987;
    text-align: center;
    font-size: 24px;
    border-radius: var(--radius);
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    overflow: hidden;
    color: #654987;
    }
    .regular-icon-buttons ul li .regular-icon-light-three:hover {
      color: #fff;
      background-color: #654987;
      }
  .regular-icon-buttons ul li .regular-icon-light-four {
    width: 40px;
    height: 40px;
    line-height: 36px;
    border: 2px solid #654987;
    text-align: center;
    font-size: 24px;
    border-radius: var(--radius);
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    overflow: hidden; }
    .regular-icon-buttons ul li .regular-icon-light-four:hover {
      color: #fff;
      background-color: #654987;
      }
  .regular-icon-buttons ul li .regular-icon-light-five {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border: 0;
    text-align: center;
    font-size: 24px;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    position: relative;
    z-index: 5;
    overflow: hidden;
    color: #fff;
    background: -webkit-linear-gradient(left, #654987 0%, #2bdbdc 50%, #654987 100%);
      background: -o-linear-gradient(left, #654987 0%, #2bdbdc 50%, #654987 100%);
      background: linear-gradient(to right, #654987 0%, #2bdbdc 50%, #654987 100%);
    background-size: 200% auto; }
    .regular-icon-buttons ul li .regular-icon-light-five:hover {
      background-position: right center; }
  .regular-icon-buttons ul li .regular-icon-light-six {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border: 0;
    text-align: center;
    font-size: 24px;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    position: relative;
    z-index: 5;
    overflow: hidden;
    color: #fff;
    background: -webkit-linear-gradient(left, #654987 0%, #2bdbdc 50%, #654987 100%);
      background: -o-linear-gradient(left, #654987 0%, #2bdbdc 50%, #654987 100%);
      background: linear-gradient(to right, #654987 0%, #2bdbdc 50%, #654987 100%);
    background-size: 200% auto;
    border-radius: var(--radius); }
    .regular-icon-buttons ul li .regular-icon-light-six:hover {
      background-position: right center; }
  .regular-icon-buttons ul li .regular-icon-light-seven {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border: 0;
    text-align: center;
    font-size: 24px;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    position: relative;
    z-index: 5;
    overflow: hidden;
    color: #fff;
    background: -webkit-linear-gradient(left, #654987 0%, #2bdbdc 50%, #654987 100%);
      background: -o-linear-gradient(left, #654987 0%, #2bdbdc 50%, #654987 100%);
      background: linear-gradient(to right, #654987 0%, #2bdbdc 50%, #654987 100%);
    background-size: 200% auto;
    border-radius: var(--radius); }
    .regular-icon-buttons ul li .regular-icon-light-seven:hover {
      background-position: right center; }
  .regular-icon-buttons ul li .regular-icon-light-eight {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border: 0;
    text-align: center;
    font-size: 24px;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    position: relative;
    z-index: 5;
    overflow: hidden;
    color: #fff;
    background: -webkit-linear-gradient(left, #654987 0%, #2bdbdc 50%, #654987 100%);
      background: -o-linear-gradient(left, #654987 0%, #2bdbdc 50%, #654987 100%);
      background: linear-gradient(to right, #654987 0%, #2bdbdc 50%, #654987 100%);
    background-size: 200% auto;
    border-radius: var(--radius); }
    .regular-icon-buttons ul li .regular-icon-light-eight:hover {
      background-position: right center; }
  .regular-icon-buttons ul li .regular-icon-light-nine {
    width: 40px;
    height: 40px;
    line-height: 36px;
    border: 2px solid #654987;
    text-align: center;
    font-size: 24px;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    overflow: hidden;
    color: #fff;
    background-color: #654987;
    }
    .regular-icon-buttons ul li .regular-icon-light-nine:hover {
      color: #654987;
      background-color: transparent; }
  .regular-icon-buttons ul li .regular-icon-light-ten {
    width: 40px;
    height: 40px;
    line-height: 36px;
    border: 2px solid #654987;
    text-align: center;
    font-size: 24px;
    border-radius: var(--radius);
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    overflow: hidden;
    color: #fff;
    background-color: #654987;
    }
    .regular-icon-buttons ul li .regular-icon-light-ten:hover {
      color: #654987;
      background-color: transparent; }
  .regular-icon-buttons ul li .regular-icon-light-eleven {
    width: 40px;
    height: 40px;
    line-height: 36px;
    border: 2px solid #654987;
    text-align: center;
    font-size: 24px;
    border-radius: var(--radius);
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    overflow: hidden;
    color: #fff;
    background-color: #654987;
    }
    .regular-icon-buttons ul li .regular-icon-light-eleven:hover {
      color: #654987;
      background-color: transparent; }
  .regular-icon-buttons ul li .regular-icon-light-twelve {
    width: 40px;
    height: 40px;
    line-height: 36px;
    border: 2px solid #654987;
    text-align: center;
    font-size: 24px;
    border-radius: var(--radius);
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    overflow: hidden;
    color: #fff;
    background-color: #654987;
    }
    .regular-icon-buttons ul li .regular-icon-light-twelve:hover {
      color: #654987;
      background-color: transparent; }

/*===== Group Buttons =====*/
.group-buttons .btn-group {
  margin-left: 30px; }
.group-buttons .group-one {
  margin-left: 0; }
  .group-buttons .group-one .main-btn {
    background: none;
    border: 2px solid #654987;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s; }
    .group-buttons .group-one .main-btn:first-child {
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
      border-right: 0; }
    .group-buttons .group-one .main-btn:last-child {
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
      border-left: 0; }
    .group-buttons .group-one .main-btn:hover {
      background-color: #654987;
      color: #fff; }
.group-buttons .group-two .main-btn {
  background: none;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  overflow: hidden;
  color: #fff;
  line-height: 52px;
  background: -webkit-linear-gradient(#654987 0%, #2bdbdc 50%, #654987 100%);
    background: -o-linear-gradient(#654987 0%, #2bdbdc 50%, #654987 100%);
    background: linear-gradient(#654987 0%, #2bdbdc 50%, #654987 100%);
  background-size: auto 200%;
  border-top: 0;
  border-bottom: 0;
  border-color: rgba(244, 246, 247, 0.2); }
  .group-buttons .group-two .main-btn:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-right: 0; }
  .group-buttons .group-two .main-btn:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-left: 0; }
  .group-buttons .group-two .main-btn:hover {
    background-position: bottom center; }
.group-buttons .group-three .main-btn {
  background: none;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  overflow: hidden;
  color: #fff;
  line-height: 52px;
  background: -webkit-linear-gradient(left, #654987 0%, #2bdbdc 50%, #654987 100%);
    background: -o-linear-gradient(left, #654987 0%, #2bdbdc 50%, #654987 100%);
    background: linear-gradient(to right, #654987 0%, #2bdbdc 50%, #654987 100%);
  background-size: 200% auto;
  border: 0; }
  .group-buttons .group-three .main-btn:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-right: 0; }
  .group-buttons .group-three .main-btn:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-left: 0; }
  .group-buttons .group-three .main-btn:hover {
    background-position: right center; }
.group-buttons .group-four {
  margin-left: 0; }
  .group-buttons .group-four .main-btn {
    background: none;
    border: 2px solid #654987;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    padding: 0 12px; }
    .group-buttons .group-four .main-btn i {
      font-size: 24px; }
    .group-buttons .group-four .main-btn:first-child {
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
      border-right: 0; }
    .group-buttons .group-four .main-btn:last-child {
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
      border-left: 0; }
    .group-buttons .group-four .main-btn:hover {
      background-color: #654987;
      color: #fff; }
.group-buttons .group-five .main-btn {
  background: none;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  overflow: hidden;
  color: #fff;
  line-height: 52px;
  background: -webkit-linear-gradient(#654987 0%, #2bdbdc 50%, #654987 100%);
    background: -o-linear-gradient(#654987 0%, #2bdbdc 50%, #654987 100%);
    background: linear-gradient(#654987 0%, #2bdbdc 50%, #654987 100%);
  background-size: auto 200%;
  border-top: 0;
  border-bottom: 0;
  border-color: rgba(244, 246, 247, 0.2);
  padding: 0 16px; }
  .group-buttons .group-five .main-btn:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-right: 0; }
  .group-buttons .group-five .main-btn:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-left: 0; }
  .group-buttons .group-five .main-btn:hover {
    background-position: bottom center; }
.group-buttons .group-six .main-btn {
  background: none;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  overflow: hidden;
  color: #fff;
  line-height: 52px;
  background: -webkit-linear-gradient(left, #654987 0%, #2bdbdc 50%, #654987 100%);
    background: -o-linear-gradient(left, #654987 0%, #2bdbdc 50%, #654987 100%);
    background: linear-gradient(to right, #654987 0%, #2bdbdc 50%, #654987 100%);
  background-size: 200% auto;
  border: 0;
  padding: 0 16px; }
  .group-buttons .group-six .main-btn:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-right: 0; }
  .group-buttons .group-six .main-btn:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-left: 0; }
  .group-buttons .group-six .main-btn:hover {
    background-position: right center; }

/*===========================
        06.FORM ELEMENTS css
===========================*/
.form-elements-title {
  font-size: 36px;
  font-weight: 600;
  line-height: 45px;
  color: #6c6c6c; }
  @media (max-width: 767px) {
    .form-elements-title {
      font-size: 24px;
      line-height: 35px; } }

.form-group {
  margin-bottom: 0; }

.form-input .help-block {
  margin-top: 2px; }
  .form-input .help-block .list-unstyled li {
    font-size: 12px;
    line-height: 16px;
    color: #fc3832; }
.form-input label {
  font-size: 12px;
  line-height: 18px;
  color: #6c6c6c;
  margin-bottom: 8px;
  display: inline-block; }
.form-input .input-items {
  position: relative; }
  .form-input .input-items input, .form-input .input-items textarea {
    width: 100%;
    height: 44px;
    border: 2px solid;
    padding-left: 44px;
    padding-right: 12px;
    position: relative;
    font-size: 16px; }
  .form-input .input-items textarea {
    padding-top: 8px;
    height: 130px;
    resize: none; }
  .form-input .input-items i {
    position: absolute;
    top: 11px;
    left: 13px;
    font-size: 20px;
    z-index: 9; }
  .form-input .input-items.default input, .form-input .input-items.default textarea {
    border-color: #333333;
    color: #6c6c6c; }
    .form-input .input-items.default input:focus, .form-input .input-items.default textarea:focus {
      border-color: #654987;
      }
    .form-input .input-items.default input::placeholder, .form-input .input-items.default textarea::placeholder {
      color: #6c6c6c;
      opacity: 1; }
    .form-input .input-items.default input::-moz-placeholder, .form-input .input-items.default textarea::-moz-placeholder {
      color: #6c6c6c;
      opacity: 1; }
    .form-input .input-items.default input::-moz-placeholder, .form-input .input-items.default textarea::-moz-placeholder {
      color: #6c6c6c;
      opacity: 1; }
    .form-input .input-items.default input::-webkit-input-placeholder, .form-input .input-items.default textarea::-webkit-input-placeholder {
      color: #6c6c6c;
      opacity: 1; }
  .form-input .input-items.default i {
    color: #6c6c6c; }
  .form-input .input-items.active input, .form-input .input-items.active textarea {
    border-color: #654987;
    color: var(--text-titre); }
    .form-input .input-items.active input::placeholder, .form-input .input-items.active textarea::placeholder {
      color: var(--text-titre);
      opacity: 1; }
    .form-input .input-items.active input::-moz-placeholder, .form-input .input-items.active textarea::-moz-placeholder {
      color: var(--text-titre);
      opacity: 1; }
    .form-input .input-items.active input::-moz-placeholder, .form-input .input-items.active textarea::-moz-placeholder {
      color: var(--text-titre);
      opacity: 1; }
    .form-input .input-items.active input::-webkit-input-placeholder, .form-input .input-items.active textarea::-webkit-input-placeholder {
      color: var(--text-titre);
      opacity: 1; }
  .form-input .input-items.active i {
    color: #654987;
    }
  .form-input .input-items.error input, .form-input .input-items.error textarea {
    border-color: #fc3832;
    color: #fc3832; }
    .form-input .input-items.error input::placeholder, .form-input .input-items.error textarea::placeholder {
      color: #fc3832;
      opacity: 1; }
    .form-input .input-items.error input::-moz-placeholder, .form-input .input-items.error textarea::-moz-placeholder {
      color: #fc3832;
      opacity: 1; }
    .form-input .input-items.error input::-moz-placeholder, .form-input .input-items.error textarea::-moz-placeholder {
      color: #fc3832;
      opacity: 1; }
    .form-input .input-items.error input::-webkit-input-placeholder, .form-input .input-items.error textarea::-webkit-input-placeholder {
      color: #fc3832;
      opacity: 1; }
  .form-input .input-items.error i {
    color: #fc3832; }
  .form-input .input-items.success input, .form-input .input-items.success textarea {
    border-color: #4da422;
    color: #4da422; }
    .form-input .input-items.success input::placeholder, .form-input .input-items.success textarea::placeholder {
      color: #4da422;
      opacity: 1; }
    .form-input .input-items.success input::-moz-placeholder, .form-input .input-items.success textarea::-moz-placeholder {
      color: #4da422;
      opacity: 1; }
    .form-input .input-items.success input::-moz-placeholder, .form-input .input-items.success textarea::-moz-placeholder {
      color: #4da422;
      opacity: 1; }
    .form-input .input-items.success input::-webkit-input-placeholder, .form-input .input-items.success textarea::-webkit-input-placeholder {
      color: #4da422;
      opacity: 1; }
  .form-input .input-items.success i {
    color: #4da422; }
  .form-input .input-items.disabled input, .form-input .input-items.disabled textarea {
    border-color: #a4a4a4;
    color: #6c6c6c;
    background: none; }
    .form-input .input-items.disabled input::placeholder, .form-input .input-items.disabled textarea::placeholder {
      color: #6c6c6c;
      opacity: 1; }
    .form-input .input-items.disabled input::-moz-placeholder, .form-input .input-items.disabled textarea::-moz-placeholder {
      color: #6c6c6c;
      opacity: 1; }
    .form-input .input-items.disabled input::-moz-placeholder, .form-input .input-items.disabled textarea::-moz-placeholder {
      color: #6c6c6c;
      opacity: 1; }
    .form-input .input-items.disabled input::-webkit-input-placeholder, .form-input .input-items.disabled textarea::-webkit-input-placeholder {
      color: #6c6c6c;
      opacity: 1; }
  .form-input .input-items.disabled i {
    color: #6c6c6c; }

.form-style-two .form-input .input-items input, .form-style-two .form-input .input-items textarea {
  border-radius: 8px;
  padding-left: 12px;
  padding-right: 44px;
background: #333333; }
.form-style-two .form-input .input-items i {
  left: auto;
  right: 13px; }

.form-style-three .form-input {
  text-align: center; }
  .form-style-three .form-input .input-items input, .form-style-three .form-input .input-items textarea {
    border-radius: 50px;
    text-align: center; }

.form-style-four .form-input label {
  padding-left: 44px;
  margin-bottom: 0; }
.form-style-four .form-input .input-items input, .form-style-four .form-input .input-items textarea {
  border-top: 0;
  border-left: 0;
  border-right: 0; }

.form-style-five .form-input {
  position: relative; }
  .form-style-five .form-input label {
    position: absolute;
    top: -10px;
    left: 10px;
    background-color: #fff;
    z-index: 5;
    padding: 0 5px; }
  .form-style-five .form-input .input-items input, .form-style-five .form-input .input-items textarea {
    border-radius: var(--radius); }


/* .single-features .features-content .text {
font-size: 15px;
line-height: 20px;
color: var(--text-titre);
margin-top: 16px;
}   */
/*===========================
                09.NAVBAR css
===========================*/
.navbar-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 10px 0;
  z-index: 99; }
  .navbar-area .navbar {
    position: relative;
    padding: 0; }
    .navbar-area .navbar .navbar-toggler .toggler-icon {
      width: 30px;
      height: 2px;
      background-color: #fff;
      margin: 5px 0;
      display: block;
      position: relative;
      -webkit-transition: all 0.3s ease-out 0s;
      -moz-transition: all 0.3s ease-out 0s;
      -ms-transition: all 0.3s ease-out 0s;
      -o-transition: all 0.3s ease-out 0s;
      transition: all 0.3s ease-out 0s; }
    .navbar-area .navbar .navbar-toggler.active .toggler-icon:nth-of-type(1) {
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
      top: 7px; }
    .navbar-area .navbar .navbar-toggler.active .toggler-icon:nth-of-type(2) {
      opacity: 0; }
    .navbar-area .navbar .navbar-toggler.active .toggler-icon:nth-of-type(3) {
      -webkit-transform: rotate(135deg);
      -moz-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
      -o-transform: rotate(135deg);
      transform: rotate(135deg);
      top: -7px; }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .navbar-area .navbar .navbar-collapse {
        position: absolute;
        top: 115%;
        left: 0;
        width: 100%;
        background-color: #1b1b1b;
        z-index: 8;
        padding: 10px 0;
        -webkit-box-shadow: 0px 10px 25px 0px rgba(18, 18, 18, 0.05);
        -moz-box-shadow: 0px 10px 25px 0px rgba(18, 18, 18, 0.05);
        box-shadow: 0px 10px 25px 0px rgba(18, 18, 18, 0.05); } }
    @media (max-width: 767px) {
      .navbar-area .navbar .navbar-collapse {
        position: absolute;
        top: 115%;
        left: 0;
        width: 100%;
        background-color: #1b1b1b;
        z-index: 8;
        padding: 10px 0;
        -webkit-box-shadow: 0px 10px 25px 0px rgba(18, 18, 18, 0.05);
        -moz-box-shadow: 0px 10px 25px 0px rgba(18, 18, 18, 0.05);
        box-shadow: 0px 10px 25px 0px rgba(18, 18, 18, 0.05); } }
    .navbar-area .navbar .navbar-nav .nav-item {
      margin: 0 16px;
      position: relative; }
      .navbar-area .navbar .navbar-nav .nav-item a {
        font-size: 16px;
        line-height: 24px;
        font-weight: 700;
        padding: 26px 0;
        color: #fff;
        text-transform: uppercase;
        position: relative;
        opacity: 0.8;
        -webkit-transition: all 0.3s ease-out 0s;
        -moz-transition: all 0.3s ease-out 0s;
        -ms-transition: all 0.3s ease-out 0s;
        -o-transition: all 0.3s ease-out 0s;
        transition: all 0.3s ease-out 0s; }
        @media only screen and (min-width: 768px) and (max-width: 991px) {
          .navbar-area .navbar .navbar-nav .nav-item a {
            padding: 10px 0;
            display: block;
            color: var(--text-titre); } }
        @media (max-width: 767px) {
          .navbar-area .navbar .navbar-nav .nav-item a {
            padding: 10px 0;
            display: block;
            color: var(--text-titre); } }
        .navbar-area .navbar .navbar-nav .nav-item a::before {
          position: absolute;
          content: '';
          width: 32px;
          height: 4px;
          background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.1) 0%, white 100%);
          background: -o-linear-gradient(left, rgba(255, 255, 255, 0.1) 0%, white 100%);
          background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 0%, white 100%);
          left: 50%;
          margin: 0 2px;
          bottom: 14px;
          -webkit-transition: all 0.3s ease-out 0s;
          -moz-transition: all 0.3s ease-out 0s;
          -ms-transition: all 0.3s ease-out 0s;
          -o-transition: all 0.3s ease-out 0s;
          transition: all 0.3s ease-out 0s;
          -webkit-transform: translate(-50%) scaleX(0);
          -moz-transform: translate(-50%) scaleX(0);
          -ms-transform: translate(-50%) scaleX(0);
          -o-transform: translate(-50%) scaleX(0);
          transform: translate(-50%) scaleX(0); }
          @media only screen and (min-width: 768px) and (max-width: 991px) {
            .navbar-area .navbar .navbar-nav .nav-item a::before {
              display: none; } }
          @media (max-width: 767px) {
            .navbar-area .navbar .navbar-nav .nav-item a::before {
              display: none; } }
      .navbar-area .navbar .navbar-nav .nav-item.active > a, .navbar-area .navbar .navbar-nav .nav-item:hover > a {
        opacity: 1;
        color: #fff; }
        @media only screen and (min-width: 768px) and (max-width: 991px) {
          .navbar-area .navbar .navbar-nav .nav-item.active > a, .navbar-area .navbar .navbar-nav .nav-item:hover > a {
            color: var(--text-titre); } }
        @media (max-width: 767px) {
          .navbar-area .navbar .navbar-nav .nav-item.active > a, .navbar-area .navbar .navbar-nav .nav-item:hover > a {
            color: var(--text-titre); } }
        .navbar-area .navbar .navbar-nav .nav-item.active > a::before, .navbar-area .navbar .navbar-nav .nav-item:hover > a::before {
          -webkit-transform: translate(-50%) scaleX(1);
          -moz-transform: translate(-50%) scaleX(1);
          -ms-transform: translate(-50%) scaleX(1);
          -o-transform: translate(-50%) scaleX(1);
          transform: translate(-50%) scaleX(1); }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .navbar-area .navbar .navbar-btn {
        position: absolute;
        right: 70px;
        top: 7px; } }
    @media (max-width: 767px) {
      .navbar-area .navbar .navbar-btn {
        position: absolute;
        right: 60px;
        top: 7px; } }
    .navbar-area .navbar .navbar-btn li {
      display: inline-block;
      margin-right: 5px; }
      .navbar-area .navbar .navbar-btn li a {
        /* padding: 3px 16px; */
        font-size: 15px;
        text-transform: uppercase;
        font-weight: 600;
        color: #fff;
        border: 1px solid;
        border-radius: 6px;
        -webkit-transition: all 0.3s ease-out 0s;
        -moz-transition: all 0.3s ease-out 0s;
        -ms-transition: all 0.3s ease-out 0s;
        -o-transition: all 0.3s ease-out 0s;
        transition: all 0.3s ease-out 0s; }
        .navbar-area .navbar .navbar-btn li a.light {
          border-color: #fff; }
          .navbar-area .navbar .navbar-btn li a.light:hover {
            background-color: rgba(255, 255, 255, 0.4); }
        .navbar-area .navbar .navbar-btn li a.solid {
          background-color: #65498750;
          /* border-color: #fff; */
          color: var(--text-titre); }
          .navbar-area .navbar .navbar-btn li a.solid:hover {
            background-color: transparent;
            color: #fff; }
  .navbar-area.sticky {
    background-color: var(--fond);
    z-index: 999;
    position: fixed;
    -webkit-box-shadow: 0px 10px 25px 0px rgba(18, 18, 18, 0.05);
    -moz-box-shadow: 0px 10px 25px 0px rgba(18, 18, 18, 0.05);
    box-shadow: 0px 10px 25px 0px rgba(18, 18, 18, 0.05); }
    .navbar-area.sticky .navbar .navbar-toggler .toggler-icon {
      background-color: var(--fond); }
    .navbar-area.sticky .navbar .navbar-nav .nav-item a {
      color:var(--text-titre);
      opacity: 0.7; }
      .navbar-area.sticky .navbar .navbar-nav .nav-item a::before {
        background: -webkit-linear-gradient(left, rgba(18, 18, 18, 0) 0%, var(--text-titre) 100%);
        background: -o-linear-gradient(left, rgba(18, 18, 18, 0) 0%, var(--text-titre) 100%);
        background: linear-gradient(to right, rgba(18, 18, 18, 0) 0%, var(--text-titre) 100%); }
    .navbar-area.sticky .navbar .navbar-nav .nav-item.active, .navbar-area.sticky .navbar .navbar-nav .nav-item:hover {
      color: var(--text-titre);
      opacity: 1; }
    .navbar-area.sticky .navbar .navbar-btn li a.light {
      /* border-color: #654987; */
      color: var(--text-titre); }
    .navbar-area.sticky .navbar .navbar-btn li a.solid {
      /* border-color: #654987; */
      background-color: var(--fond);
      color: var(--text-titre); }

/*===========================
             10.SLIDER css
===========================*/
.carousel-item {
  /* background-color: #654987; */
  background-color: var(--fond);
  position: relative; }

  /* .carousel-item::before {
    position: absolute;
    content: '';
    width: 33%;
    height: 100%;
    border-radius: var(--radius);
    background: -webkit-linear-gradient(rgba(0, 103, 244, 0.3) 0%, rgba(43, 219, 220, 0.3) 100%);
    background: -o-linear-gradient(rgba(0, 103, 244, 0.3) 0%, rgba(43, 219, 220, 0.3) 100%);
    background: linear-gradient(rgba(0, 103, 244, 0.3) 0%, rgba(43, 219, 220, 0.3) 100%);
    top: 0;
    right: 15%;
    -webkit-transform: skewX(20deg);
    -moz-transform: skewX(20deg);
    -ms-transform: skewX(20deg);
    -o-transform: skewX(20deg);
    transform: skewX(20deg); } */
    .carousel-item::before {
      position: absolute;
      content: '';
      width: 100%;
      height: 60%;
      border-radius: 10px;
      /* background: -webkit-linear-gradient(rgba(0, 103, 244, 0.3) 0%, rgba(43, 219, 220, 0.3) 100%);
      background: -o-linear-gradient(rgba(0, 103, 244, 0.3) 0%, rgba(43, 219, 220, 0.3) 100%);
      background: linear-gradient(rgba(0, 103, 244, 0.3) 0%, rgba(43, 219, 220, 0.3) 100%); */
      background: var(--gradient);
      background: var(--gradient);
      background: var(--gradient);
      top: 22%;
      right: 30%;
      -webkit-transform: skewX(20deg);
        -moz-transform: skewX(20deg);
        -ms-transform: skewX(20deg);
      -o-transform: skewX(20deg);
      transform: skewX(20deg);
      /* background-color: #654987; */
    }

    @media only screen and (min-width: 992px) and (max-width: 1199px) {
      .carousel-item::before {
        width: 40%; } }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .carousel-item::before {
        width: 60%; } }
    @media (max-width: 767px) {
      .carousel-item::before {
        width: 50%;
        right: 45%; } }
    @media only screen and (min-width: 576px) and (max-width: 767px) {
      .carousel-item::before {
        right: 25%; } }
  .carousel-item .slider-image-box {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    z-index: 9; }
    .carousel-item .slider-image-box .slider-image {
      max-width: 680px;
      width: 100%;margin-bottom:28%;margin-left:25% }

.slider-content {
  position: relative;
  z-index: 9;
  padding-top: 240px;
  padding-bottom: 200px; }
  @media (max-width: 767px) {
    .slider-content {
      padding-top: 190px;
      padding-bottom: 150px; } }
  .slider-content .title {
    font-size: 88px;
    line-height: 96px;
    color: var(--text-titre);
    font-weight: 700; }
    @media only screen and (min-width: 992px) and (max-width: 1199px) {
      .slider-content .title {
        font-size: 58px;
        line-height: 80px; } }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .slider-content .title {
        font-size: 72px;
        line-height: 90px; } }
    @media (max-width: 767px) {
      .slider-content .title {
        font-size: 34px;
        line-height: 45px; } }
  .slider-content .text {
    color: #fff;
    font-size: 16px;
    line-height: 24px;
    margin-top: 16px; }
  .slider-content .slider-btn {
    padding-top: 16px; }
    .slider-content .slider-btn li {
      display: inline-block;
      margin: 16px 8px 0; }
      @media (max-width: 767px) {
        .slider-content .slider-btn li {
          margin: 16px 3px 0; } }
      .slider-content .slider-btn li a.rounded-one {
        background-color: #fff;
        border-color: #fff; }
        .slider-content .slider-btn li a.rounded-one:hover {
          background-color: transparent;
          color: #fff; }
      .slider-content .slider-btn li a.rounded-two {
        border-color: #fff; }
        .slider-content .slider-btn li a.rounded-two:hover {
          background-color: #fff;
          color: #654987;
          }

.carousel-indicators {
  margin-bottom: 50px; }
  .carousel-indicators li {
    display: block;
    width: 8px;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50px;
    border: 0;
    margin: 0px 2px; }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .carousel-indicators li {
        width: 13px;
        height: 13px; } }
    @media (max-width: 767px) {
      .carousel-indicators li {
        width: 13px;
        height: 13px; } }
    .carousel-indicators li.active {
      background-color: #fff;
      width: 16px;
      border-radius: 50px; }
      @media only screen and (min-width: 768px) and (max-width: 991px) {
        .carousel-indicators li.active {
          width: 23px; } }
      @media (max-width: 767px) {
        .carousel-indicators li.active {
          width: 23px; } }

.carousel .carousel-control-prev, .carousel .carousel-control-next {
  top: 50%;
  font-size: 32px;
  color: #fff;
  bottom: auto;
  left: 60px;
  right: auto;
  opacity: 1;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 99;
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  border: 0px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius); }
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .carousel .carousel-control-prev, .carousel .carousel-control-next {
      left: 30px; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .carousel .carousel-control-prev, .carousel .carousel-control-next {
      display: none; } }
  @media (max-width: 767px) {
    .carousel .carousel-control-prev, .carousel .carousel-control-next {
      display: none; } }
.carousel .carousel-control-next {
  right: 60px;
  left: auto; }
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .carousel .carousel-control-next {
      right: 30px; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .carousel .carousel-control-next {
      right: 30px; } }
  @media (max-width: 767px) {
    .carousel .carousel-control-next {
      right: 30px; } }

/*===========================
            17.FEATURES css
===========================*/
/*===== features TWO =====*/


.features-roadmap {

  background-color: var(--fond-roadmap);

  padding-top: 120px;
  /* padding-bottom: 130px; */
 }



.features-area {
  background-color: var(--fond-box);

  padding-top: 120px;
  /* padding-bottom: 130px; */
 }

.single-features {
 padding: 40px 20px 52px;
 background: var(--box-hight);
 border-radius:var(--radius);
/* border-bottom:10px var(--box-border-price) solid ; */
min-height:200px;
border: 1px #333 solid;
}
  .single-features .features-title-icon .features-title a {
    font-size: 30px;
    line-height: 45px;
    color: var(--text-box);
    /* text-transform: uppercase; */
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    font-weight: 600; }
    @media only screen and (min-width: 992px) and (max-width: 1199px) {
      .single-features .features-title-icon .features-title a {
        font-size: 24px;
        line-height: 35px; } }
    @media (max-width: 767px) {
      .single-features .features-title-icon .features-title a {
        font-size: 24px;
        line-height: 35px; } }
    @media only screen and (min-width: 576px) and (max-width: 767px) {
      .single-features .features-title-icon .features-title a {
        font-size: 36px;
        line-height: 45px; } }
    .single-features .features-title-icon .features-title a:hover {
      color: #654987;
      }
  .single-features .features-title-icon .features-icon {
    position: relative;
    display: inline-block; }
    .single-features .features-title-icon .features-icon i {
      font-size: 88px;
      line-height: 70px;
      color: #654987;
      position: relative;
      z-index: 5; }
    .single-features .features-title-icon .features-icon .shape {
      position: absolute;
      top: 0;
      left: 0; }
  .single-features .features-content .text {
    font-size: 16px;
    line-height: 25px;
    color: var(--text-box);
    margin-top: 15px; }
  .single-features .features-content .features-btn {
    color: #654987;
    font-size: 16px;
    font-weight: 700;
    margin-top: 29px;
    position: absolute;
    bottom: 15px;
    right: 30px;
  }

/*===========================
            18.PORTFOLIO css
===========================*/
.portfolio-area {
  padding-top: 120px;
  padding-bottom: 130px; }

.portfolio-menu ul li {
  font-size: 16px;
  font-weight: 700;
  color: #6c6c6c;
  line-height: 48px;
  padding: 0 30px;
  position: relative;
  z-index: 5;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  cursor: pointer;
  width: 100%;
  border-radius: 50px;
  overflow: hidden;
  margin-top: 4px;
  text-transform: uppercase; }
  .portfolio-menu ul li:last-child {
    margin-right: 0; }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .portfolio-menu ul li {
      font-size: 14px;
      padding: 0 26px; } }
  @media (max-width: 767px) {
    .portfolio-menu ul li {
      font-size: 14px;
      padding: 0 22px;
      line-height: 42px; } }
  .portfolio-menu ul li::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(left, #654987 0%, #2bdbdc 100%);
      background: -o-linear-gradient(left, #654987 0%, #2bdbdc 100%);
      background: linear-gradient(to right, #654987 0%, #2bdbdc 100%);
    z-index: -1;
    opacity: 0;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s; }
  .portfolio-menu ul li:hover, .portfolio-menu ul li.active {
    color: #fff; }
    .portfolio-menu ul li:hover::before, .portfolio-menu ul li.active::before {
      opacity: 1; }

.single-portfolio .portfolio-image {
  position: relative;
  overflow: hidden; }
  .single-portfolio .portfolio-image img {
    width: 100%;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s; }
  .single-portfolio .portfolio-image .portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.5s ease-out 0s;
    -moz-transition: all 0.5s ease-out 0s;
    -ms-transition: all 0.5s ease-out 0s;
    -o-transition: all 0.5s ease-out 0s;
    transition: all 0.5s ease-out 0s;
    background-color: rgba(255, 255, 255, 0.8);
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
    border-radius: 8px; }
    .single-portfolio .portfolio-image .portfolio-overlay .portfolio-content {
      padding: 16px; }
      .single-portfolio .portfolio-image .portfolio-overlay .portfolio-content .portfolio-icon {
        position: relative;
        display: inline-block;
        margin: 0 20px; }
        .single-portfolio .portfolio-image .portfolio-overlay .portfolio-content .portfolio-icon a {
          font-size: 48px;
          color: #654987;
          position: relative;
          z-index: 5;
          line-height: 50px; }
        .single-portfolio .portfolio-image .portfolio-overlay .portfolio-content .portfolio-icon .shape {
          position: absolute;
          top: 7px;
          left: 0; }
.single-portfolio:hover .portfolio-overlay {
  opacity: 1;
  visibility: visible; }

/*===========================
            16.PRICING css
===========================*/
.pricing-area {
  /* background-color: #f4f6f7; */
  background-color: var(--box-hight);
  padding-top: 120px;
  padding-bottom: 130px; }

/*===== PRICING STYLE NINE =====*/
.pricing-style {
  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  padding: 24px 20px 38px;
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  background: -webkit-linear-gradient(#2bdbdc 0%, #654987 100%);
    background: -o-linear-gradient(#2bdbdc 0%, #654987 100%);
    background: var(--box-hight);
  /* background: -webkit-linear-gradient(#2bdbdc 0%, #654987 100%);
    background: -o-linear-gradient(#2bdbdc 0%, #654987 100%);
    background: linear-gradient(#2bdbdc 0%, #654987 100%);
  border-bottom: 10px var(--box-border-price) solid;*/
}
  .pricing-style .pricing-icon img {
    width: 200px; }
  .pricing-style .pricing-header .sub-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 25px;
    color: var(--text-box);
    position: relative;
    margin-top: 24px; }
    .pricing-style .pricing-header .title {
      font-size: 40px;
      font-weight: 600;
      line-height: 25px;
      color: var(--text-box);
      position: relative;
      margin-top: 24px;margin-bottom:24px }
  .pricing-style .pricing-header .month {
    font-size: 20px;
    font-weight: 300;
    line-height: 25px;
    color: var(--text-box);
    margin-top: 3px; }
    .pricing-style .pricing-header .month .price {
      font-size: 36px;
      font-weight: 600;
      line-height: 45px;
      color: var(--text-box);
      margin-top: 8px; }
      @media only screen and (min-width: 576px) and (max-width: 767px) {
        .pricing-style .pricing-header .month .price {
          font-size: 24px;
          margin-top: 32px;
          line-height: 30px; } }
  .pricing-style .pricing-list {
    margin-top: 24px; }
    .pricing-style .pricing-list ul li {
      font-size: 16px;
      line-height: 24px;
      color: var(--text-box);
      margin-top: 16px; }
      @media only screen and (min-width: 992px) and (max-width: 1199px) {
        .pricing-style .pricing-list ul li {
          font-size: 14px;
          margin-top: 12px; } }
      @media (max-width: 767px) {
        .pricing-style .pricing-list ul li {
          font-size: 14px;
          margin-top: 12px; } }
      @media only screen and (min-width: 576px) and (max-width: 767px) {
        .pricing-style .pricing-list ul li {
          font-size: 16px;
          margin-top: 16px; } }
      .pricing-style .pricing-list ul li i {
        color: var(--text-box);
        margin-right: 8px; }
  .pricing-style .pricing-btn {
    margin-top: 31px; }
    .pricing-style .pricing-btn .main-btn {
      background-color: var(--btn);
      border-color: var(--btn-border);color:var(--btn-text) }
      .pricing-style .pricing-btn .main-btn:hover {
        color: var(--btn-text);
        -webkit-box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.16);
        -moz-box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.16);
        box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.16); }

/*===========================
             15.ABOUT css
===========================*/
.about-area {
  padding-top: 80px;
  /* padding-bottom: 130px; */
  background-color: var(--fond-box);
  position: relative; }
  .about-area .about-title .sub-title {
    font-size: 18px;
    font-weight: 400;
    color: #654987;
    text-transform: uppercase; }
    @media (max-width: 767px) {
      .about-area .about-title .sub-title {
        font-size: 16px; } }
  .about-area .about-title .title {
    font-size: 30px;
    padding-top: 10px; }
    @media only screen and (min-width: 992px) and (max-width: 1199px) {
      .about-area .about-title .title {
        font-size: 26px; } }
    @media (max-width: 767px) {
      .about-area .about-title .title {
        font-size: 22px; } }
  .about-area .about-accordion .accordion .card {
    border: 0;
    background: none; }
    .about-area .about-accordion .accordion .card .card-header {
      padding: 0;
      border: 0;
      background: none;
      margin-top: 40px; }
      .about-area .about-accordion .accordion .card .card-header a {
        font-size: 18px;
        font-weight: 500;
        color: #654987;
        display: block;
        position: relative;
        padding-right: 20px; }
        @media only screen and (min-width: 992px) and (max-width: 1199px) {
          .about-area .about-accordion .accordion .card .card-header a {
            font-size: 16px; } }
        @media (max-width: 767px) {
          .about-area .about-accordion .accordion .card .card-header a {
            font-size: 16px; } }
        .about-area .about-accordion .accordion .card .card-header a::before {
          content: '\ea58';
          font-family: 'LineIcons';
          position: absolute;
          top: 50%;
          right: 0;
          -webkit-transform: translateY(-50%);
          -moz-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
          -o-transform: translateY(-50%);
          transform: translateY(-50%);
        color:var(--text) }
      .about-area .about-accordion .accordion .card .card-header .collapsed::before {
        content: '\ea5c'; }
    .about-area .about-accordion .accordion .card .card-body {
      padding: 20px 20px 0; }
  .about-area .about-image img {
    width: 100%; }

/*===========================
            26.TESTIMONIAL css
===========================*/
/*===== TESTIMONIAL STYLE THREE =====*/
.testimonial-area {
  padding-top: 80px;
  padding-bottom: 130px;
  background-color: #f4f6f7; }
  .testimonial-area .testimonial-left-content .sub-title {
    font-size: 18px;
    font-weight: 400;
    color: #654987;
    text-transform: uppercase; }
    @media (max-width: 767px) {
      .testimonial-area .testimonial-left-content .sub-title {
        font-size: 16px; } }
  .testimonial-area .testimonial-left-content .title {
    font-size: 32px;
    padding-top: 10px;
    color: var(--text-titre); }
    @media only screen and (min-width: 992px) and (max-width: 1199px) {
      .testimonial-area .testimonial-left-content .title {
        font-size: 30px; } }
    @media (max-width: 767px) {
      .testimonial-area .testimonial-left-content .title {
        font-size: 24px; } }
  .testimonial-area .testimonial-left-content .testimonial-line {
    padding-top: 10px; }
    .testimonial-area .testimonial-left-content .testimonial-line li {
      height: 5px;
      background-color: #654987;
      opacity: 0.2;
      display: inline-block;
      border-radius: 50px;
      margin-right: 3px; }
      .testimonial-area .testimonial-left-content .testimonial-line li:nth-of-type(1) {
        width: 40px; }
      .testimonial-area .testimonial-left-content .testimonial-line li:nth-of-type(2) {
        width: 15px; }
      .testimonial-area .testimonial-left-content .testimonial-line li:nth-of-type(3) {
        width: 10px; }
      .testimonial-area .testimonial-left-content .testimonial-line li:nth-of-type(4) {
        width: 5px; }
  .testimonial-area .testimonial-left-content .text {
    padding-top: 15px; }
  .testimonial-area .testimonial-right-content {
    position: relative;
    background-color: #e9ecef;
    -webkit-box-shadow: 0px 30px 70px 0px rgba(0, 0, 0, 0.07);
    -moz-box-shadow: 0px 30px 70px 0px rgba(0, 0, 0, 0.07);
    box-shadow: 0px 30px 70px 0px rgba(0, 0, 0, 0.07);
    border-radius: 50px;
    max-width: 500px;
    padding-top: 50px; }
    .testimonial-area .testimonial-right-content .quota {
      position: absolute;
      top: 10px;
      left: 15px;
      -webkit-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      -o-transform: rotate(180deg);
      transform: rotate(180deg);
      opacity: 0.1; }
      .testimonial-area .testimonial-right-content .quota i {
        font-size: 130px;
        line-height: 95px;
        color: #654987;
        }
  .testimonial-area .testimonial-content-wrapper {
    position: relative;
    left: 70px; }
    @media only screen and (min-width: 992px) and (max-width: 1199px) {
      .testimonial-area .testimonial-content-wrapper {
        left: 0; } }
    @media (max-width: 767px) {
      .testimonial-area .testimonial-content-wrapper {
        left: 0; } }

.single-testimonial {
  background-color: #fff;
  padding: 40px 30px 50px;
  border-radius: 50px; }
  .single-testimonial .testimonial-text .text {
    font-size: 24px;
    font-weight: 400;
    line-height: 36px;
    color: var(--text-titre);
    padding-bottom: 25px; }
    @media (max-width: 767px) {
      .single-testimonial .testimonial-text .text {
        font-size: 18px;
        line-height: 32px; } }
  .single-testimonial .testimonial-author {
    border-top: 1px solid #e9ecef;
    padding-top: 50px; }
    .single-testimonial .testimonial-author .author-info .author-image img {
      border-radius: var(--radius);
      width: 70px; }
    .single-testimonial .testimonial-author .author-info .author-name {
      padding-left: 30px; }
      .single-testimonial .testimonial-author .author-info .author-name .name {
        font-size: 16px;
        font-weight: 700;
        color: var(--text-titre); }
      .single-testimonial .testimonial-author .author-info .author-name .sub-title {
        font-size: 14px;
        color: #a4a4a4;
        margin-top: 5px; }
    @media (max-width: 767px) {
      .single-testimonial .testimonial-author .author-review {
        padding-left: 100px;
        padding-top: 15px; } }
    @media only screen and (min-width: 576px) and (max-width: 767px) {
      .single-testimonial .testimonial-author .author-review {
        padding-left: 0;
        padding-top: 15px; } }
    .single-testimonial .testimonial-author .author-review .star li {
      display: inline-block;
      font-size: 14px;
      color: #ffb400; }
    .single-testimonial .testimonial-author .author-review .review {
      font-size: 14px;
      color: #000;
      margin-top: 5px; }

.testimonial-active .slick-arrow {
  position: absolute;
  bottom: 0;
  left: -635px;
  font-size: 22px;
  cursor: pointer;
  color: #a4a4a4;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s; }
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .testimonial-active .slick-arrow {
      left: -480px; } }
  .testimonial-active .slick-arrow:hover {
    color: #000; }
  .testimonial-active .slick-arrow.next {
    left: -600px; }
    @media only screen and (min-width: 992px) and (max-width: 1199px) {
      .testimonial-active .slick-arrow.next {
        left: -445px; } }

/*===========================
                13.TEAM css
===========================*/
/*===== TEAM STYLE ELEVEN =====*/
.team-style-eleven {
  position: relative;
  -webkit-box-shadow: 0px 8px 16px 0px rgba(72, 127, 255, 0.1);
  -moz-box-shadow: 0px 8px 16px 0px rgba(72, 127, 255, 0.1);
  box-shadow: 0px 8px 16px 0px rgba(72, 127, 255, 0.1); }
  .team-style-eleven .team-image img {
    width: 100%; }
  .team-style-eleven .team-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    padding-top: 25px;
    padding-bottom: 25px;
    z-index: 5;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s; }
    @media (max-width: 767px) {
      .team-style-eleven .team-content {
        padding-top: 15px;
        padding-bottom: 15px; } }
    .team-style-eleven .team-content::before {
      position: absolute;
      content: '';
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: -webkit-linear-gradient(left, #654987 0%, #2bdbdc 100%);
        background: -o-linear-gradient(left, #654987 0%, #2bdbdc 100%);
        background: linear-gradient(to right, #654987 0%, #2bdbdc 100%);
      z-index: -1;
      -webkit-transition: all 0.3s ease-out 0s;
      -moz-transition: all 0.3s ease-out 0s;
      -ms-transition: all 0.3s ease-out 0s;
      -o-transition: all 0.3s ease-out 0s;
      transition: all 0.3s ease-out 0s;
      opacity: 0; }
    .team-style-eleven .team-content .team-social {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      -webkit-transition: all 0.3s ease-out 0s;
      -moz-transition: all 0.3s ease-out 0s;
      -ms-transition: all 0.3s ease-out 0s;
      -o-transition: all 0.3s ease-out 0s;
      transition: all 0.3s ease-out 0s;
      visibility: hidden;
      opacity: 0; }
      .team-style-eleven .team-content .team-social .social {
        background-color: #fff;
        display: inline-block;
        padding: 10px 20px 6px;
        border-radius: 50px; }
        .team-style-eleven .team-content .team-social .social li {
          display: inline-block;
          margin: 0 8px; }
          .team-style-eleven .team-content .team-social .social li a {
            font-size: 16px;
            color: #a4a4a4;
            -webkit-transition: all 0.3s ease-out 0s;
            -moz-transition: all 0.3s ease-out 0s;
            -ms-transition: all 0.3s ease-out 0s;
            -o-transition: all 0.3s ease-out 0s;
            transition: all 0.3s ease-out 0s; }
            .team-style-eleven .team-content .team-social .social li a:hover {
              color: #654987;
              }
    .team-style-eleven .team-content .team-name a {
      color: var(--text-titre);
      font-size: 24px;
      font-weight: 600;
      -webkit-transition: all 0.3s ease-out 0s;
      -moz-transition: all 0.3s ease-out 0s;
      -ms-transition: all 0.3s ease-out 0s;
      -o-transition: all 0.3s ease-out 0s;
      transition: all 0.3s ease-out 0s; }
      @media (max-width: 767px) {
        .team-style-eleven .team-content .team-name a {
          font-size: 18px; } }
    .team-style-eleven .team-content .sub-title {
      font-size: 16px;
      color: #654987;
      -webkit-transition: all 0.3s ease-out 0s;
      -moz-transition: all 0.3s ease-out 0s;
      -ms-transition: all 0.3s ease-out 0s;
      -o-transition: all 0.3s ease-out 0s;
      transition: all 0.3s ease-out 0s; }
      @media (max-width: 767px) {
        .team-style-eleven .team-content .sub-title {
          font-size: 14px; } }
  .team-style-eleven:hover .team-content {
    padding-top: 50px; }
    @media (max-width: 767px) {
      .team-style-eleven:hover .team-content {
        padding-top: 35px; } }
    .team-style-eleven:hover .team-content::before {
      opacity: 1; }
    .team-style-eleven:hover .team-content .team-social {
      top: -20px;
      visibility: visible;
      opacity: 1; }
    .team-style-eleven:hover .team-content .team-name a {
      color: #fff; }
    .team-style-eleven:hover .team-content .sub-title {
      color: #fff; }

/*===========================
            19.CONTACT css
===========================*/
.contact-area {
  padding-top: 120px;
  /* padding-bottom: 130px; */
  background-color: var(--fond); }

p.form-message.success, p.form-message.error {
  font-size: 16px;
  color: #333;
  background: var(--fond-box);
  padding: 10px 15px;
  margin-top: 15px;
  margin-left: 15px; }
  p.form-message.success.form-message.error, p.form-message.error.form-message.error {
    color: #f00; }

.contact-map iframe {
  width: 100%;
  height: 550px; }
  @media (max-width: 767px) {
    .contact-map iframe {
      height: 350px; } }

.contact-info .single-contact-info .contact-info-icon i {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 32px;
  color: #fff;
  border-radius: var(--radius); }
.contact-info .single-contact-info .contact-info-content {
  padding-left: 20px;}
  .contact-info .single-contact-info .contact-info-content .text {
    color: var(--text-titre); }
.contact-info .single-contact-info.contact-color-1 .contact-info-icon i {
  background-color: var(--text-titre); }
.contact-info .single-contact-info.contact-color-2 .contact-info-icon i {
  background-color: #fc3832; }
.contact-info .single-contact-info.contact-color-3 .contact-info-icon i {
  background-color: #005ad5; }

.contact-wrapper .contact-title {
  font-size: 32px;
  font-weight: 700;
  color: #000; }
  @media (max-width: 767px) {
    .contact-wrapper .contact-title {
      font-size: 26px; } }
  .contact-wrapper .contact-title i {
    color: var(--text-titre);
    margin-right: 8px; }
  .contact-wrapper .contact-title span {
    font-weight: 400; }

/*===========================
        21.FOOTER css
===========================*/
/*===== FOOTER FIVE =====*/
.footer-area {
  background-color: #f4f6f7;
  padding-top: 90px;
  padding-bottom: 120px; }
  .footer-area .social li {
    display: inline-block;
    margin: 0 5px; }
    .footer-area .social li a {
      font-size: 24px;
      color: #6c6c6c;
      -webkit-transition: all 0.3s ease-out 0s;
      -moz-transition: all 0.3s ease-out 0s;
      -ms-transition: all 0.3s ease-out 0s;
      -o-transition: all 0.3s ease-out 0s;
      transition: all 0.3s ease-out 0s; }
      .footer-area .social li a:hover {
        color: #654987;
        }
  .footer-area .footer-support {
    padding-top: 21px; }
    .footer-area .footer-support span {
      font-size: 16px;
      line-height: 24px;
      color: var(--text-titre);
      font-weight: 600;
      margin-top: 9px;
      display: block; }
      @media (max-width: 767px) {
        .footer-area .footer-support span {
          display: block; } }
  .footer-area .footer-app-store {
    padding-top: 27px; }
    .footer-area .footer-app-store ul li {
      display: inline-block;
      margin-right: 8px; }
      @media only screen and (min-width: 992px) and (max-width: 1199px) {
        .footer-area .footer-app-store ul li {
          margin-right: 6px; } }
      .footer-area .footer-app-store ul li:last-child {
        margin-right: 0; }
      @media (max-width: 767px) {
        .footer-area .footer-app-store ul li {
          width: 120px; } }
      @media only screen and (min-width: 576px) and (max-width: 767px) {
        .footer-area .footer-app-store ul li {
          width: auto; } }
  .footer-area .copyright .text {
    color: var(--text-titre); }
  .footer-area.footer-dark {
    background-color: #121212; }
    .footer-area.footer-dark .social li a {
      color: #fff; }
    .footer-area.footer-dark .footer-support {
      padding-top: 21px; }
      .footer-area.footer-dark .footer-support span {
        color: #fff; }
    .footer-area.footer-dark .footer-app-store {
      padding-top: 27px; }
      .footer-area.footer-dark .footer-app-store ul li {
        color: #fff; }
    .footer-area.footer-dark .copyright .text {
      color: #fff; }

/*===== BACK TO TOP =====*/
.back-to-top {
  font-size: 30px;
  color: #fff;
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 45px;
  height: 45px;
  line-height: 45px;
  padding-top:0px;
  border-radius: 50%;
  /* background-color: var(--touch); */
  text-align: center;
  z-index: 20099;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  display: none; }
  .back-to-top:hover {
    color: #fff;
    background-color: #654987;
    }

/*# sourceMappingURL=style.css.map */