@charset "utf-8";
/* CSS Document */

/* Float Elements 
---------------------------------*/


/* Clear Floated Elements
---------------------------------*/
.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.clearfix:before,
.clearfix:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.clearfix:after {
  clear: both;
}
ul{ list-style:none;}

.figure{ margin:0px;}

img{ max-width:110%;}

a, a:hover, a:active{ outline:0px !important}



/* Primary Styles
---------------------------------*/

h2{
	
	color:#A21047;
	font-family:'roboto';
	font-weight:900;
	margin:35px 0 25px 0;
	text-align:center;
	text-transform:uppercase;
	font-size: 45px;
  
  position: relative;
	
}



/* Header Styles
---------------------------------*/




	

	

	


	




/* Happy Clients
---------------------------------*/



#client_outer{
	padding:0px 0px;
	}
	
.client_area{
	 width:960px;
	margin:0px auto;
	
}

.client_section{
	padding:0px 0 0 0;

	}
	
.client_section.btm{
	padding:20px 0 0 0;
	}


.client_profile{
	float:left;
	text-align:center;
	}
	
.client_profile.flt{
	float:right;
	}
	
.client_profile_pic{
	border-radius:50%;
	border:2px solid #f5f5f5;
	margin:0 0 50px 0;
	width:270px;
	height:250px;
	margin-right: -70px;
	}
	
.client_profile_pic img{
	border-radius:50%;
	border:3px solid #f5f5f5;
	
	}
	
.client_profile h3{
	font-size:18px;
	color:#A21047;
	margin:0 0 0 0;
	
	}
	
.client_profile span{

	display:block;
	font-size:16px;
	color:#CCB524;
	
	}
	
.quote_section{
	width:700px;
	
	position:relative;
	padding:40px 30px;
	float:left;
	margin:35px 0 0 30px;
	}
	
.quote_section.flt{
	float:left;
	}
	
.quote_section p{
	
	font-style: normal;
	font-size:18px;
	font-weight: 380;
	color:#666666;
	text-align:center;
	position:relative;
	font-family:Times New Roman  ;
	text-align: left;
	margin-left: -100px;
	margin-right: -300px;
	}
	
.quote_section p b{
    display: inline-block;
    font-size: 23px;
    left: -9px;
    position: relative;
    top: -6px;
	}
	
.quote_section p small{
	display: inline-block;
	right: -9px;
    position: relative;
    top:4px;
	}
	
/* Media Query pour tablettes en orientation portrait (600px à 900px) */
@media (max-width: 900px) {
    .client_profile_pic {
        width: 220px; /* Réduire la taille de l'image */
        height: 200px; /* Réduire la hauteur de l'image */
        margin-right: -40px; /* Réduire le décalage à droite */
    }

    .quote_section p {
        font-size: 16px; /* Réduire la taille de la police */
        margin-left: -50px; /* Réduire la marge gauche */
		 margin-right: -50px; /* Réduire la marge gauche */
    }
}

/* Media Query pour les petits écrans (mobiles en portrait - jusqu'à 600px) */
@media (max-width: 600px) {
    .client_profile_pic {
        width: 180px; /* Réduire encore la taille de l'image */
        height: 160px; /* Réduire la hauteur de l'image */
        margin-right: 0; /* Supprimer le décalage à droite */
    }

    .quote_section p {
        font-size: 14px; /* Réduire la taille du texte */
        margin-left: 0; /* Annuler la marge gauche */
        text-align: left; /* Assurer que le texte est aligné à gauche */
		margin-right: 0; /* Réduire la marge gauche */
    }
}

/* Media Query pour tablettes en orientation paysage (601px à 1024px) */
@media (max-width: 1024px) and (min-width: 601px) {
    .client_profile_pic {
        width: 240px; /* Ajuster la taille de l'image pour les tablettes en paysage */
        height: 220px; /* Ajuster la hauteur de l'image */
        margin-right: -60px; /* Ajuster la marge droite */
    }

    .quote_section p {
        font-size: 16px; /* Ajuster la taille du texte */
        margin-left: 0; /* Annuler la marge gauche */
    }
}

/* Styles pour le titre .hero h2 */
.hero h2 {
    margin: 0;
    font-size: 24px; /* Taille du texte pour .hero h2 */
    font-weight: 700; /* Poids de la police */
    font-family: 'Roboto', sans-serif; /* Police utilisée */
}

/* Media Query pour les tablettes (600px à 900px) */
@media (max-width: 900px) {
    .hero h2 {
        font-size: 20px; /* Réduire la taille du titre sur les tablettes */
    }
}

/* Media Query pour les petits écrans (mobiles jusqu'à 600px) */
@media (max-width: 600px) {
    .hero h2 {
        font-size: 18px; /* Réduire encore la taille du titre sur les mobiles */
    }
}