/*
Author: Vise-All
Author URL: https://vise-all.com/
*/

html, body {
  font-family: "Raleway", sans-serif;
  color: #2b2e34;
}
h1,h2,h3,h4,h5,h6 {
  font-family: "Raleway", sans-serif;
}
.Thin{font-weight: 100;} .Extra_Light{Font-weight: 200;} .Light{font-weight: 300;} .Normal{font-weight: 400;} .Medium{font-weight: 500;}
.Semi_Bold{font-weight: 600;} .Bold{font-weight: 700;} .Extra_Bold{font-weight: 800;} .Heavy{font-weight: 900;}

.txt_blue{color:#2FAFE3}.txt_red{color:#F33E4C}.txt_blck{color:#2B2E34}.txt_wht{color:#FFFFFF}

.blue{background:#2FAFE3;}
.black{background:#2B2E34;}
.red{background:#F33E4C;}
/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 996;
  background: #127bc4;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}
.back-to-top i {
  font-size: 28px;
  color: #fff;
  line-height: 0;
}
.back-to-top:hover {
  background: #f33e4c;
  color: #fff;
}
.back-to-top.active {
  visibility: visible;
  opacity: 1;
}
/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
  background: #343a40;
  transition: all 0.5s;
  z-index: 997;
  padding: 30px 0;
}
@media (max-width: 992px) {
  #header {
    padding: 25px 0;
  }
}
#header .logo {
  font-size: 28px;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
#header .logo img {
  max-height: 60px;
}
.more-btn {
	margin-left: 20px;
	background: #fff;
	color: #2b2e34;
	border-radius: 4px;
	padding: 8px 25px;
	white-space: nowrap;
	transition: 0.3s;
	font-size: 16px;
	font-weight: 600;
	display: inline-block;
}
.more-btn:hover {
  background: #f33e4c;
  color: #fff;
}
a.more-btn{
	text-decoration: none;
	transition:0.5s all;
	-webkit-transition:0.5s all;
	-moz-transition:0.5s all;
	-o-transition:0.5s all;
	-ms-transition:0.5s all;
}
@media (max-width: 768px) {
  .more-btn {
    margin: 0 15px 0 0;
    padding: 6px 15px;
  }
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation 
*/
.navbar {
  padding: 0;
}
.navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
}
.navbar li {
  position: relative;
}
.navbar a,
.navbar a:focus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 10px 30px;
    font-family: "Raleway", sans-serif;
    font-size: 16px;
    color: #2fafe3;
    white-space: nowrap;
    transition: 0.3s;
    font-weight: 600;
    background: #fff;
    padding: 10px 30px;
    border: solid 1px #343a40;
    border-radius: 25px;
    margin: 15px;
}
.navbar a i,
.navbar a:focus i {
  font-size: 12px;
  line-height: 0;
  margin-left: 5px;
}
.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover>a {
	color: #fff;
    background: #2fafe3;
}
/**
* Mobile Navigation 
*/
.mobile-nav-toggle {
  color: #555555;
  font-size: 28px;
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: 0.5s;
}
.mobile-nav-toggle.bi-x {
  color: #fff;
}
@media (max-width: 991px) {
  .mobile-nav-toggle {
    display: block;
  }
  .navbar ul {
    display: none;
  }
}
.navbar-mobile {
  position: fixed;
  overflow: hidden;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(60, 60, 60, 0.9);
  transition: 0.3s;
  z-index: 999;
}
.navbar-mobile .mobile-nav-toggle {
  position: absolute;
  top: 15px;
  right: 15px;
}
.navbar-mobile ul {
	display: block;
	position: absolute;
	top: 55px;
	right: 15px;
	bottom: 15px;
	left: 15px;
	padding: 10px 0;
	border-radius: 8px;
	background-color: #fff;
	overflow-y: auto;
	transition: 0.3s;
}
.navbar-mobile a,
.navbar-mobile a:focus {
	padding: 10px 20px;
	font-size: 15px;
	color: #555555;
}
.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover>a {
	color: #2fafe3;
}
/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
	padding: 60px 0;
	overflow: hidden;
}
.section-bg {
	background-color: #fff;
}
/*--------------------------------------------------------------
# Sections S_1-S_2-S_3
--------------------------------------------------------------*/

#S_1 {
  width: 100%;
  position: relative;
  padding: 35px 0 0 0;
}
#S_1:before {
  content: "";
  background: #2FAFE3;
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}
#S_1 .S_1-img img {
	max-width: 250%;
	position:relative;
	right:28.25em;
	top:1em;
	z-index: 199;
}
#S_1 h1 {
	color: #2B2E34;
	background: #fff;
	font-size: 65px;
	font-weight: 800;
	line-height: 75px;
	padding: 0.5em 1em;
	border: 1px solid #707070;
	border-radius: 50px;
	/* width: 90%; */
	height: 3.5em;
	position: relative;
    top: 5px;
}
#S_1 h1 span {
	font-size: 90px;
    font-weight: 900;
    color: #127BC4;
}
#S_1 h2 {
    background: #2B2E34;
    color: #FFF;
    font-size: 36px;
    font-weight: 600;
    border-radius: 40px;
    border: 1px solid #707070;
    padding: 1em 1.5em;
    position: relative;
    top: -0.25em;
    left: -1.75em;
    z-index: 198;
}
#S_1 .S_1-title {
    position: relative;
    top: 6.25em;
    left: 6em;
}
#S_1 .icon-box {
    padding: 20px 0;
    position: relative;
    overflow: hidden;
    background: #2a2d32;
    transition: all 0.3s ease-in-out;
    border-radius: 100px;
    z-index: 1;
    height: 100%;
    width: 100%;
    text-align: center;
}
#S_1 .icon-boxes:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(25% + 20px);
    background-color: #fff;
}
.icon-box a {
    font-size: 30px;
    color: #fff;
    text-decoration: none;
}
.box1{
	color: #fff;
    padding: 14px 10px;
    border-radius: 50px;
    border: 1px solid #707070;
}
.zadorou {
    position: absolute;
    top: 3em;
    right: 4em;
}
.agence {
	position: absolute;
	z-index: 999;
	right: 30%;
	top: 23%;
	font-size: 35px;
	line-height:40px;
}

#S_2{
	background: #fff;
	padding:5em 0 3em 0;
	/* border-top: solid 1px #6a6a6a; */
}
#S_2 h2{
	font-size:39px;
	color:#2fafe3;
}
#S_2 h2 span{
	font-size:42px;
	font-weight:900;
}
.content-headline:after {
	content: "";
	display: block;
	width: 11%;
	padding-top: 15px;
	border-bottom: 3px solid #2fafe3;
}
.txt_s2{
	font-size:26px;	
    line-height: 35px;
	padding-left:0;
}
p.txt_s2 span{
	font-weight:800;
}
.img_s2 img{
    position: relative;
    top: 11em;
    right: 5em;
}
#S_3{
	background: #f33e4c;
	padding:5em 0 0.025em 0;
}
.S03_box{
	background: #fff;
	height: 21em;
	border-radius: 40px;
	border: 1px solid #707070;
	display: flex;
	justify-content: center;
	align-items: center;
}
#S_3 .icon-box {
    padding: 20px 0;
    position: relative;
    overflow: hidden;
    background: #2a2d32;
    transition: all 0.3s ease-in-out;
    border-radius: 100px;
    z-index: 1;
    height: 100%;
    width: 100%;
    text-align: center;
}
#S_3 .icon-boxes:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(25% + 20px);
    background-color: #fff;
}

.mibddle_box h2{
	color: #fff;
    font-weight: 900;
    font-size: 40px;
    line-height: 47px;
}
.mibddle_box h2 span{
	color: #fff;
    font-weight: 800;
    font-size: 28px;
    line-height: 25px;
}
.mibddle_box h3{
	background: #2C3E50;
	padding: 0.4em;
	font-size: 1.4em;
	color: #F39C12;
	font-weight: 400;
	line-height: 1.3em;
	margin-bottom: 0.7em;
}
.mibddle_box p{
    color: #FFF;
    font-size: 28px;
    line-height: 35px;
    font-weight: 800;
}
.mibddle_box:after{
	content: "";
	display: block;
	width: 30%;
	padding-top: 35px;
	border-bottom: 4px solid #fff;
}
img.heart_s3 {
    position: relative;
    top: 6.75em;
    left: -2.5em;
    height: 30%;
}
img.like_s3 {
    position: relative;
    top: -2.25em;
    left: 4em;
    height: 25%;
}
span.numb{
	font-size:110px;
	font-weight:900;
}
.S4_title h3{
	font-size:40px;
}
.S4_footer p{
	font-size: 24px;
    line-height: 30px;
	color:#2B2E34;
}
.P02_S1{
	background:#F33E4C;
	padding: 1em 0;
	height:40em;
	border-bottom:1px solid #707070;
}

.P03_S1{
	background:#b6b4b5;
	padding: 1em 0;
	height:40em;
}
img.icon {
    position: absolute;
    top: 3.75em;
    left: 38.5em;
    height: 9em;
    z-index: 299;
}
img.like{
    position: absolute;
    top: 6em;
    left: 39em;
    height: 35%;
    z-index: 299;
}
img.like_P2{
    position: relative;
    top: 2em;
    left: 26em;
    height: 6.5em;
}
img.heart{
    position: absolute;
	top: 26em;
	left: 67.5em;
}
img.media{
	position: absolute;
    top: 2em;
    left: 41em;
    height: 110%;
}

.S5_0 {
    background: #F6F6F6;
    border-radius: 50px;
    text-align: center;
    padding: 30px 60px;
    color: #2a2d34;
    font-size: 26px;
    font-weight: 600;
	line-height:30px;
    position: relative;
    z-index: 197;
}
.S5_1 {
    width: 77%;
    height: 5.3em;
    position: relative;
    top: 2em;
    left: -4em;
    z-index: 199;
}
.S5_2 {
    background: #2a2d32;
    border-radius: 50px;	
	border: 1px solid #707070;
    text-align: center;
    padding: 30px 30px;
    color: #fff;
    font-size: 26px;
    font-weight: 600;
    position: relative;
    top: -0.25em;
    left: 2em;
    z-index: 198;
}
.S5_3 {
    background: #f23e4a;
    border-radius: 50px;
	border: 1px solid #707070;
    text-align: center;
    padding: 30px 40px;
    color: #fff;
    font-size: 26px;
    font-weight: 600;
    position: relative;
    top: -1em;
    z-index: 196;
}



@media screen and (max-width: 1200px){

#S_1 h1 {
font-size: 50px;
line-height: 55px;
}
#S_1 h1 span {
font-size: 70px;
}
#S_1 h2 {
font-size: 27px;
width: 72%;
}
.m_01{
	position: relative;
    top: 8.75em;
    left: 6em;
    z-index: 98;
}
.m_0{
    font-size: 50px;
    font-weight: 800;
    padding: 0.5em 1em;
}
.S01_right{
    top: -31em;
    left: 47em;
}
.heart_1{
    top: -14.5em;
    left: -3.5em;
}
#S_2 h2{
	font-size:28px;
	color:#2fafe3;
}
#S_2 h2 span{
	font-size:30px;
	font-weight:900;
}
.txt_s2 {
    font-size: 20px;
    line-height: 30px;
    padding-left: 0;
}
.img_s2 img {
    position: absolute;
    top: 3em;
    right: 1em;
}
.mibddle_box h2 {
    font-size: 36px;
    line-height: 43px;
}
.mibddle_box p {
    font-size: 24px;
    line-height: 33px;
}
.S03_box h3{
	font-size:24px;
}
span.numb{
	font-size:92px;
	font-weight:900;
}

/* --- PAGE_02 --- */

h1.txt_line {
	font-size:2em;
}
}

@media (max-width: 1024px) {
	#S_1 {
	background-attachment: fixed;
	}
	#S_blck h2{
	/* color: ; */
	font-size: 30px;
	font-weight: 700;
	}
	.zadorou{
		visibility:hidden;
	}
}
@media (max-width: 991px) {
  #S_1 {
    padding-bottom: 65px;
  }
  #S_1 .S_1-img {
    text-align: center;
  }
  #S_1 .S_1-img img {
	max-width: 100%;
	right:0;
  }
  #S_1 h1 {
	font-size: 55px;
	line-height: 75px;
	margin-bottom: 10px;
	width: 70%;
    padding: 20px 100px;
  }
  #S_1 h2 {
    font-size: 30px;
    line-height: 45px;
    margin-bottom: 30px;
    padding: 20px 45px;
  }
#S_1 .S_1-head{
	padding-top:0!important;
	position:relative;
	top:-3em;
	}
	.btn_header1 a, .btn_header0 a {
    padding: 14px 28px;
	font-size:20px;
	font-weight:bold;
}
img.logo{
	width:75%;
}
#S_2 h2{
	font-size:24px;
	color:#2fafe3;
}#S_2 h2 span{
	font-size:25px;
	font-weight:900;
}.txt_s2 {
    font-size: 18px;
    line-height: 30px;
    padding-left: 0;
}.img_s2 img {
    position: absolute;
    top: 6em;
    right: -3em;
}.S03_box h3{
	font-size:22px;
}.mibddle_box h2 {
    font-size: 32px;
    line-height: 40px;
}.mibddle_box p {
    font-size: 22px;
    line-height: 31px;
}.S03_box h3{
	font-size:22px;
}
span.numb{
	font-size:88px;
	font-weight:900;
}
.mibddle_box{
	padding-bottom:30px;
}
img.iad {
	width:55%;
}
}
@media (max-width: 767px) {
	
#S_1 h1 {
	font-size: 50px;
	line-height: 60px;
	width: 90%;
	position: relative;
}
#S_1 h1 span {
font-size: 62px;
font-weight: 900;
color: #127BC4;
}
#S_1 h2 {
font-size: 28px;
font-weight: 600;
width: 85%;
}
#S_1 .S_1-title {
position: relative;
top: 6.25em;
left: 3.5em;
}

.img_s2 img {
	visibility: hidden;
}
}
@media (max-width: 575px) {
#S_1 .S_1-img img {
width: 80%;
}
#S_1 h1 {
	font-size: 42px;
	line-height: 60px;
	width: 90%;
	position: relative;
}
#S_1 h1 span {
font-size: 52px;
font-weight: 900;
color: #127BC4;
}
#S_1 h2 {
font-size: 24px;
line-height: 30px;
font-weight: 500;
width: 85%;
}
}

/*--------------------------------------------------------------
# Grid Section
--------------------------------------------------------------*/
.sec-grid-3 {
	padding: 60px 0;
}
.sec-grid-3 .service-item {
	padding: 40px;
	height: 100%;
	border-radius: 50px;

}
.sec-grid-3 .service-item .icon {
	width: 48px;
	height: 48px;
	position: relative;
	margin-bottom: 50px;
}
.sec-grid-3 .service-item .icon:before {
	position: absolute;
	content: "";
	height: 100%;
	width: 100%;
	background: #eeeeee;
	border-radius: 50px;
	z-index: 1;
	top: 10px;
	right: -20px;
	transition: 0.3s;
}
.sec-grid-3 .service-item h3 {
	font-size: 24px;
	color: #fff;
	position: relative;
	display: inline-block;
	transition: 0.3s;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {
  width: 100%;
  height: 50vh;
  background-color: #2b2e35;
  background-size: cover;
  margin-bottom: -200px;
}

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

@media (max-width: 992px) {
  #hero {
    margin-bottom: 0;
    height: 100vh;
  }
  #hero .container {
    padding-bottom: 63px;
  }

}

@media (max-height: 600px) {
  #hero {
    height: 110vh;
  }
}

/*--------------------------------------------------------------
# Registration
--------------------------------------------------------------*/
.registration .icon-boxes .icon-box {
  text-align: center;
  border-radius: 35px;
  background: #fff;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  padding: 65px 30px;
  width: 100%;
}

.registration .icon-boxes .icon-box i {
  font-size: 40px;
  color: #1977cc;
  margin-bottom: 30px;
}

.registration .icon-boxes .icon-box h4 {
  font-size: 22px;
  font-weight: 700;
  margin: 30px 0;
}

.registration .icon-boxes .icon-box p {
  font-size: 16px;
  color: #707070;
}
.btn-click{
	background-color: #2fafe3;
	color: #fff;
}
.btn-click:hover{
	color: #fff !important;
	background-color: #127bc4 !important;
}
.img-user{
	height:100px;
}
/*--------------------------------------------------------------
# login
--------------------------------------------------------------*/
.user_card {
	height: 475px;
	width: 450px;
	margin-top: auto;
	margin-bottom: auto;
	background: #2fafe3;
	position: relative;
	display: flex;
	justify-content: center;
	flex-direction: column;
	padding: 10px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 5px;
}
.brand_logo_container {
	position: absolute;
	height: 170px;
	width: 170px;
	top: -75px;
	border-radius: 50%;
	background: #fff;
	padding: 10px;
	text-align: center;
}
.form_container {
	margin-top: 100px;
}
.login_btn {
	width: 100%;
	background: #0d7bc4 !important;
	color: white !important;
}
.login_btn:focus {
	box-shadow: none !important;
	outline: 0px !important;
}
.login_container {
	padding: 0 2rem;
}
.input-group-text {
	background: #0d7bc4 !important;
	color: white !important;
	border: 0 !important;
	border-radius: 0.25rem 0 0 0.25rem !important;
}
.input-group-text {
	display: flex;
	align-items: center;
	padding: 0.75rem 0.75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #212529;
	text-align: center;
	white-space: nowrap;
	background-color: #e9ecef;
	border: 1px solid #ced4da;
	border-radius: 0.375rem;
}
.input_user,
.input_pass:focus {
	box-shadow: none !important;
	outline: 0px !important;
}
.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
	background-color: #0d7bc4 !important;
}

/*--------------------------------------------------------------
# log-content
--------------------------------------------------------------*/
.log-content {
  background-color: #fff;
  min-height: 40px;
  padding: 150px;
}
.log-content a{
	color:#fff;
	text-decoration: none;
	transition:0.5s all;
	-webkit-transition:0.5s all;
	-moz-transition:0.5s all;
	-o-transition:0.5s all;
	-ms-transition:0.5s all;
}
@media (max-width: 992px) {
  .log-content {
    margin-top: 70px;
  }
}
@media (max-width: 768px) {
  .log-content .d-flex {
    display: block !important;
  }
}
/*--------------------------------------------------------------
# banner
--------------------------------------------------------------*/
.banner {
  background: #2fafe3;
  color: #fff;
  background-size: cover;
  padding: 80px 0;
}
.banner h3 {
  font-size: 28px;
  font-weight: 300;
}
/*--------------------------------------------------------------
# Log-box
--------------------------------------------------------------*/
.log-box .box {
	padding: 20px;
	text-align: center;
	border-radius: 10px;
	position: relative;
	overflow: hidden;
}.log-box .box1 {
	background: #2b2e34;
}.log-box .box2 {
	background: #127bc4;
}
.log-box h3 {
	font-weight: 400;
	padding: 20px 15px;
	font-size: 24px;
	color: #fff;
}
.log-box .btn-wrap {
	margin-top: 20px;
	padding: 20px 15px;
	text-align: center;
}
.log-box .btn-log {
	background: #fff;
	display: inline-block;
	padding: 10px 35px;
	border-radius: 35px;
	color: #2b2e34;
	font-size: 18px;
	font-weight: 400;
	font-family: "Raleway", sans-serif;
	transition: 0.3s;
}
a.btn-log {
	text-decoration: none;
}
.log-box .btn-log:hover {
	color:#fff;
	background: #2fafe3;
	transition: 0.3s;
}
.log-box .featured {
	top: 30%;
}
.log-box .user-sign-in img {
	max-height: 115px;
    border: solid #fff 2px;
    border-radius: 100px;
	margin: 15px;
}
/* ----------------
	FORMULAIRE
---------------- */
.contact-form .content-1 {
	background: #2fafe3;
}
.contact-form .content-2 {
	background: #fff;
}
.form-control,
.form-group .form-control {
    border: 0;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#009688), to(#009688)), -webkit-gradient(linear, left top, left bottom, from(#D2D2D2), to(#D2D2D2));
    background-image: -webkit-linear-gradient(#009688, #009688), -webkit-linear-gradient(#D2D2D2, #D2D2D2);
    background-image: -o-linear-gradient(#009688, #009688), -o-linear-gradient(#D2D2D2, #D2D2D2);
    background-image: linear-gradient(#009688, #009688), linear-gradient(#D2D2D2, #D2D2D2);
    -webkit-background-size: 0 2px, 100% 1px;
    background-size: 0 2px, 100% 1px;
    background-repeat: no-repeat;
    background-position: center bottom, center -webkit-calc(100% - 1px);
    background-position: center bottom, center calc(100% - 1px);
    background-color: rgba(0, 0, 0, 0);
    -webkit-transition: background 0s ease-out;
    -o-transition: background 0s ease-out;
    transition: background 0s ease-out;
    float: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 0
}
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer{
	background-color: #2fafe3;
}
#footer .bg-ft{
	background-color: #fff;
}
#footer h4{
	color: #707070;
	font-size: 34px;
	font-weight: 400;
}
#footer p{
	line-height: 10px;
}
#footer p a{
	color: #fff;
	text-decoration: none;
}
.footer-top {
	background-color: #2fafe3;
	border-bottom: 1px solid #707070;
	padding: 20px 175px;
}
.ft-copyright {
	background-color: #2fafe3;
	display: flex;
}
.pb-2,
.py-2 {
	padding-bottom: .5rem !important;
	padding-top: .5rem !important;
}
.border-left {
	border-left: solid #fff 3px;
}