/*** 

====================================================================
	STYLE DE BASE
====================================================================

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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
    color: #333; /* Couleur de texte plus foncée */
}


ul {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}

a {
  text-decoration: none;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -ms-transition: all 0.2s;
  transition: all 0.2s;
}

a:hover {
  text-decoration: none;
}




.themed-grid-col {
  padding-top: .75rem;
  padding-bottom: .75rem;
  background-color: rgba(86, 61, 124, .15);
  border: 1px solid rgba(86, 61, 124, .2);
}

.themed-container {
  padding: .75rem;
  margin-bottom: 1.5rem;
  background-color: rgba(0, 123, 255, .15);
  border: 1px solid rgba(0, 123, 255, .2);
} 
.header-container {
background-color: #142440 !important
} 
.container-fluid
{
	padding-right:4%;padding-left:4%;
}
.main-container
{
	background-color: #e5e2e2 !important;
}

/*** 

====================================================================
	breadcrumbs 
====================================================================

***/



/*** 

====================================================================
	BTN 
====================================================================

***/
.btn-1 {
    background-color: #34ccff;
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s, width 0.3s;
    border-radius: 0 25px 25px 0;

        }
        .btn-1:hover {
background-color: #142440;
color:#fff;
        }

/*** 

====================================================================
	tab 
====================================================================

***/
.tab-container{
position:relative;top:-42px;z-index:3; margin-bottom:-49px;
}
@media (max-width: 768px) {
.tab-container{
position:relative;top:-42px;z-index:3; margin-bottom:-49px;
}
}
.nav-tabs {--bs-nav-tabs-border-color: none;

} 


.nav-tabs .nav-link {
background-color:#142440;
color:#fff;
}
/*** 

====================================================================
	navbar 
====================================================================

***/

      .nav-item .nav-link:hover {
    
    border-bottom: 2px solid #0dcaf0; /* Change la couleur de la bordure au survol */
 
    background-color: rgba(0, 123, 255, 0.1); /* Ajoute un léger fond au survol */
		 
		 
         }
		 
        .nav-item .nav-link.active
		 {
   
    border-bottom: 2px solid #0dcaf0; /* Change la couleur de la bordure au survol */
    background-color: rgba(0, 123, 255, 0.1); /* Ajoute un léger fond au survol */
         }		 
		 
.dropdown-item:hover {
    border: 1px solid #0dcaf0; /* Change la couleur de la bordure au survol */
    border-radius: 10px; /* Applique le border-radius */
    background-color: rgba(0, 123, 255, 0.1); /* Ajoute un léger fond au survol */
		 margin-left:15px;
		 
         }
		 
		 
.dropdown-menu { 
padding-right:30px;
    width:200px;
		 
         }
.navbar {
z-index: 15000;
    background-color: rgb(47 45 45 / 51%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.30);
    transition: background-color 0.3s ease;
}


.navbar-blue {
    background-color: #142440 !important; /* Utilisez !important si nécessaire pour remplacer les styles existants */
}


.navbar-collapse{
	flex-grow:0;    margin-bottom: 15px;
	}	
	
	
/*** 

====================================================================
	Carousel 
====================================================================

***/

         .carousel-item {
         height: 520px;
         overflow: hidden;
         }
         .carousel-item img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         transform: scale(1); /* État initial */
         transition: transform 5s ease; /* Effet de zoom doux */
         }
         /* Zoom sur la première image au chargement de la page */
         .carousel-item.active img,
         .carousel-item:first-of-type img {
         transform: scale(1.1); /* Effet de zoom */
         }
         /* Animation spécifiquement pour la première image au chargement */
         .carousel-item:first-of-type img {
         animation: zoomIn 10s ease forwards;
         }
         /* Keyframes pour l'animation de zoom */
         @keyframes zoomIn {
         0% {
         transform: scale(1);
         }
         100% {
         transform: scale(1.1);
         }
         }  
   


.carousel
{
position:relative;top:-75px; margin-bottom:-70px;
}
@media (max-width: 992px) {
    .carousel {
        position:relative;top:-70px;margin-bottom:-65px;
    }
}

.carousel-indicators{
	visibility:hidden;
}



         /* Animations des légendes */
.carousel-caption {
    position: absolute; /* Pour s'assurer que le contenu est en position absolue par rapport à l'image */
    top: 50%; /* Centrer verticalement */
    left: 50%; /* Centrer horizontalement */
    transform: translate(-50%, -50%); /* Utiliser la transformation pour le centrage parfait */
    text-align: center; /* Centrer le texte */z-index:2;
} 
	

@media (max-width: 768px) {
		
.carousel-caption h1{
font-size:18px;
	}
.carousel-caption h5{
font-size:16px;
	}	
}
	
	
	
.carousel-control-next, .carousel-control-prev {

    width: 5%;

}

@keyframes slideInRight {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInUp {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}



.carousel-title, .carousel-text, .carousel-btn {
  animation: slideInUp 0.5s forwards; /* Animation pour le texte et le bouton */
  opacity: 0; /* Initialement invisible */
}

/* Animation avec délai pour chaque élément */
.carousel-title {
  animation-delay: 0.5s; /* Délai pour le titre */
}

.carousel-text {
  animation-delay: 0.7s; /* Délai pour le texte */
}

.carousel-btn {
  animation-delay: 0.9s; /* Délai pour le bouton */
}


.carousel-control-prev-icon,
.carousel-control-next-icon {
    display: none; /* Masquer par défaut */
}

.carousel:hover .carousel-control-prev-icon,
.carousel:hover .carousel-control-next-icon {
    display: block; /* Afficher lors du survol */
}

.overlay-1 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Couleur de l'overlay */
    z-index: 1; /* Assure que l'overlay est au-dessus du flou et de l'image */
}

/*** 

====================================================================
	TEMOIGNAGES 
====================================================================

***/
.testimonial-footer {
    display: flex;
    justify-content: space-between; /* Espace entre le texte et l'image */
    align-items: center; /* Aligne verticalement les éléments */
    margin-top: 10px;
}

.author-logo {
    width: 100px;
    height: auto;
    margin-left: 10px; /* Espacement entre le texte et l'image */
            border: 1px solid #ddd; /* Bordure autour du contenu */
            border-radius: 0.5rem; /* Coins arrondis */
            background-color: #fff; /* Couleur de fond du contenu */	
}


#writeReviewBtn {
    margin-left: auto; /* Pousse le bouton à droite */
}

.testimonial-container {
    position: relative;
    width: 100%;
    overflow: hidden;background: #34ccff;
	border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;	  overflow: hidden; /* Cacher le débordement par défaut */border: 6px solid #d4f1fa;
	padding:15px;
}

.testimonial-cards {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.testimonial-card {
    min-width: 100%;
    box-sizing: border-box;
  	padding:15px;

}
.testimonial-title {
    color: #fff;	
}


.testimonial-text {
    max-height: 6em; /* Hauteur maximale pour environ 4 lignes */
    overflow: hidden; /* Cacher le débordement par défaut */
    transition: max-height 0.3s ease; /* Transition douce */
	color:white;
}

/* Afficher le scroll lorsque la souris passe dessus */
.testimonial-card:hover .testimonial-text {
    max-height: 100px; /* Ajustez pour permettre le défilement */
    overflow-y: auto; /* Affiche le scroll lorsque le texte déborde */
}

@media (max-width: 768px) {
    .author-logo {
        width: 80px; /* Ajuster la taille de l'image pour les petits écrans */
    }
}






/*** 

====================================================================
	sec-title 
====================================================================

***/

	
.sec-title {
    position: relative;
    padding-left: 30px;
    margin-bottom: 35px;
	margin-top: 15px;
}	
.sec-title h2 {
    position: relative;
    display: block;
    font-size: 36px;
    line-height: 1.2em;
    color: #1a1d1f;
    font-weight: 700;
    text-transform: uppercase;
}	
.sec-title:before {
position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background-color: #34ccff;
    content: '';
}	
.sec-title:after {
    position: absolute;
    left: 10px;
    top: 0;
    height: 40px;
    width: 2px;
    background-color: #34ccff;
    content: '';
}
.sec-title .title {
    position: relative;
    display: block;
    font-size: 15px;
    line-height: 1.2em;
    color: #34ccff;
    font-weight: 700;
    top: -4px;
    text-transform: uppercase;
    margin-bottom: 6px;
}



/*** 

====================================================================
	service-single
====================================================================

***/

.service-single{
  overflow: hidden;
}
.service-single{
  position: relative;
  overflow: hidden;
  transition: all .3s;
  margin-bottom: 30px;height: 260px;    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.service-content{
    padding: 29px 40px 20px;
    position: absolute;
    left: 0;
    top: 68%;
    width: 100%;
    height: 100%;
    padding-left: 100px;
    background: #142440;
    transition: all .3s;
    opacity:.8;
}

.service-single:hover .service-content{
  top: 0;
 display: flex;
 justify-content: center;
 flex-direction: column;
 width: 100%;
 height: 100%;

}



.service-icon{
color:white;position:relative;left:-80px;font-size:50px;top:-20px;
}

.service-name{
color:white;position:relative;left:-60px;
}


.service-content h3{
  font-size:20px;
  font-family: 'Roboto', sans-serif;
  position: relative;
  color:#fff;
}



.service-content p{
  padding: 15px 0 0px;
  color:#fff;
  line-height: 30px;
}
.service-content a{
  color:#34ccff;
}

/* Définir la largeur du conteneur d'image*/
        .service-image {
            width: 100%; /* Définir la largeur du conteneur */
            height: 300px; /* Ajuste la hauteur en fonction de l'aspect ratio de l'image */
            position: relative;
        }

        .service-image img {
            width: 100%; /* Largeur de l'image = 100% du conteneur */
            height: 100%; /* Hauteur de l'image = 100% du conteneur */
            object-fit: cover; /* Ajuste l'image pour couvrir le conteneur tout en conservant l'aspect ratio */
        }


/*** 

====================================================================
	Services Section Two
====================================================================

***/

.services-section-two{
	position:relative;
	padding:90px 0px 70px;
	background-color:#f2f0f8;
	
}

.service-block-two{
	position:relative;
	margin-bottom:30px;
}

.service-block-two .inner-box{
	position:relative;
	padding:35px 25px 30px;
	background-color:#ffffff;    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.service-block-two .inner-box:before{
	position:absolute;
	content:'';
	left:0px;
	top:0px;
	height:100%;
	width:0px;
	background-color:#34ccff;
	-webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    transition: all 500ms ease;
}



.service-block-two .inner-box:hover::before,
.service-block-two .inner-box:hover::after{
	width:100%;
}

.service-block-two .inner-box .service-content-two{
	position:relative;
	padding-left:82px;
	z-index:1;
}
.service-block-two .inner-box .service-content-two {

    text-align: left;

}

.service-block-two .inner-box .service-content-two .icon-box{
     position: absolute;
    left: 10px;
    top: 0px;
    color: #34ccff;
    font-size: 30px;
    line-height: normal;
    -webkit-transition: all 1200ms ease;
    -ms-transition: all 1200ms ease;
    -o-transition: all 1200ms ease;
    -moz-transition: all 1200ms ease;
    transition: all 1200ms ease;
    border: 2px solid #34ccff;
    border-radius: 80px;
    padding: 5px 10px;
}
.service-block-two .inner-box .service-content-two .icon {
    margin-right: 0px;
    transition: transform 0.3s;
}
.service-block-two .inner-box:hover .service-content-two .read-more,
.service-block-two .inner-box:hover .service-content-two .text,
.service-block-two .inner-box:hover .service-content-two h3 a{
	color:#ffffff; 
}

.service-block-two .inner-box:hover .service-content-two .icon-box{
	color:#ffffff;    border: 2px solid #ffffff;
}
.service-block-two .inner-box .service-content-two h3{
	position:relative;
	color:#222222;
	font-size:21px;
	font-weight:700;
	line-height:1.3em;	height:60px;
}

.service-block-two .inner-box .service-content-two h3 a{
	position:relative;
	color:#222222;
	-webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    transition: all 500ms ease;

}

.service-block-two .inner-box .service-content-two .text{
	position:relative;
	color:#898989;
	font-size:1rem;
	
	margin-top:12px;
	-webkit-transition: all 50ms ease;
    -ms-transition: all 50ms ease;
    -o-transition: all 50ms ease;
    -moz-transition: all 50ms ease;
    transition: all 50ms ease;
}

.service-block-two .inner-box .service-content-two .read-more{
	position:relative;
	color:#34ccff;
	font-size:15px;
	font-weight:600;
	margin-top:15px;
	display:inline-block;
	text-decoration:underline;
	font-family: 'Poppins', sans-serif;
	-webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    transition: all 500ms ease;
}
.service-block-two .inner-box .service-content-two.text {
    display: -webkit-box;        /* Affiche le contenu comme une boîte flexible */
    -webkit-box-orient: vertical; /* Orienter la boîte verticalement */
    -webkit-line-clamp: 3;      /* Limiter à 3 lignes */
    overflow: hidden;            /* Masquer le texte débordant */
    text-overflow: ellipsis;    /* Ajouter des points de suspension à la fin */
}
.service-block-two .inner-box .service-content-two h3 {
    display: -webkit-box;        /* Affiche le contenu comme une boîte flexible */
    -webkit-box-orient: vertical; /* Orienter la boîte verticalement */
    -webkit-line-clamp: 3;      /* Limiter à 3 lignes */
    overflow: hidden;            /* Masquer le texte débordant */
    text-overflow: ellipsis;    /* Ajouter des points de suspension à la fin */
}




/*** 

====================================================================
	mycard 
====================================================================

***/
.mycard {
    position: relative;
    overflow: hidden;
    border: none;
    border-radius: 10px; /* Coins arrondis */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Ombre douce */
    transition: transform 0.3s, box-shadow 0.3s; /* Animation de la carte */
	margin-bottom:30px;
}

.mycard:hover {
    transform: translateY(-5px); /* Légère élévation lors du survol */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); /* Ombre renforcée au survol */
}

.mycard-content {
    position: relative;
}

.mycard-img {
    width: 100%; 
    height: auto; 
    border-radius: 10px 10px 0 0; /* Coins arrondis sur le haut */
    transition: transform 0.3s; /* Transition de l'image */
}

.mycard:hover .mycard-img {
    transform: scale(1.05); /* Zoom de l'image au survol */
}

.mycard-body {
    position: relative; 
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; 
  
    display: flex;
    flex-direction: column; 
    justify-content: flex-end; /* Aligner vers le bas */
     
    border-radius: 0 0 10px 10px; /* Coins arrondis en bas */
}

.container-subtitle {
    padding:20px;
 
    background-color: white; /* Fond légèrement plus foncé */	
	
	
	
	
	
	
}
.container-subtitle h5 {
   
   display: -webkit-box;        /* Affiche le contenu comme une boîte flexible */
    -webkit-box-orient: vertical; /* Orienter la boîte verticalement */
    -webkit-line-clamp: 2;      /* Limiter à 3 lignes */
    overflow: hidden;            /* Masquer le texte débordant */
    text-overflow: ellipsis;    /* Ajouter des points de suspension à la fin */
	line-height: 1.8;  
	height: 4em; 
	font-size: 1rem;
	
}


.icon-subtitle {
    font-size: 1rem; /* Taille de l'icône */
    color: #34ccff; /* Couleur de l'icône */
	
   
}
.icon-subtitle:hover {
    font-size: 2rem; /* Taille de l'icône */
    color: #142440; /* Couleur de l'icône */
   
}
.mycard-subtitle {
    color: #34ccff; /* Couleur du texte */
   
   
    border-radius: 5px; /* Coins arrondis pour le titre */
    flex-grow: 1; /* Prendre l'espace disponible */
    text-align: left; /* Alignement du texte à droite */
}


.mycard-subtitle i {
    margin-right: 5px;
}

.description {
    display: none; 
        background-color: rgb(52 204 255 / 91%);
    color: white;
    padding: 10px;
    border-radius: 5px; /* Coins arrondis pour la description */
    transition: opacity 0.3s; /* Animation de la description */
}

.description p {
    color: white;  font-size: 1rem; /* Taille de l'icône */
}

.mycard:hover .description {
    display: block; 
    opacity: 1; /* Assurez-vous que la description est visible */
}


/*** 

====================================================================
	Contact Form Section
====================================================================

***/

.contact-form-section{
	position:relative;
	padding:15px 0px 0px;
	background-position:right bottom;
	background-repeat:no-repeat;
}

.contact-form-section .form-column{
	margin-bottom:20px;	
}

/*** 

====================================================================
	Contact Form
====================================================================

 ***/

.contact-form{
	position:relative;
}

.contact-form .form-group{
	position:relative;
	margin-bottom:20px;
}

.contact-form .form-group input[type="text"],
.contact-form .form-group input[type="tel"],
.contact-form .form-group input[type="email"],
.contact-form .form-group select,
.contact-form .form-group textarea{
	position:relative;
	display:block;
	width:100%;
	line-height:28px;
	padding:10px 25px;
	color:#797979;
	height:48px;
	font-size:16px;
	border-radius:3px;
	background:#ffffff;
	border:1px solid #ededed;
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	transition:all 300ms ease;
}

.contact-form .form-group input[type="text"]:focus,
.contact-form .form-group input[type="tel"]:focus,
.contact-form .form-group input[type="email"]:focus,
.contact-form .form-group textarea:focus{
	border-color:#dfb162;
}

.contact-form .form-group textarea::-webkit-input-placeholder,
.contact-form .form-group input::-webkit-input-placeholder{
	color:#888888;
}

.contact-form .form-group textarea{
	height:200px;
	resize:none;
}

.contact-form button{
	cursor: pointer;
	margin-top:10px;
}

.contact-form button:before{
	background-color: #101010;
}

.contact-form button:hover{
	color: #ffffff;
}

.contact-form input.error,
.contact-form select.error,
.contact-form textarea.error{
	border-color:#ff0000 !important;	
}

.contact-form label.error{
	display:block;
	line-height:24px;
	padding:5px 0px 0px;
	margin:0px;
	text-transform:uppercase;
	font-size:12px;
	color:#ff0000;
	font-weight:500;	
}

.contact-form-section .info-column{
	position:relative;
}

.contact-form-section .info-column .inner-column{
	position:relative;
	padding-top:10px;
	padding-left:100px;
}

.contact-form-section .info-column .contact-info-list{
	position:relative;
	margin-bottom:45px;
}

.contact-form-section .info-column .contact-info-list li{
	position:relative;
	color:#797979;
	font-size:16px;
	margin-bottom:4px;
	line-height:2em;
}

.contact-form-section .info-column .contact-info-list li a{
	position:relative;
	color:#797979;
	font-size:16px;
}

.contact-form-section .info-column .contact-info-list li a:hover{
	color:#dfb162;
	text-decoration:underline;	
}

.contact-form-section .info-column .contact-info-list li strong{
	position:relative;
	color:#242424;
	font-size:20px;
	font-family: 'Rufina', serif;
}
/*** 

====================================================================
	MAIN FOOTER
====================================================================

***/

.main-footer{
	position:relative;
	background-color:#142440;
	
}

.main-footer .widgets-section{
	position:relative;
	padding:40px 0px 0px;
	margin-top:2%;
	margin-left:3%;
	margin-right:3%;
}

.main-footer .footer-widget{
	position:relative;
	margin-bottom:30px;
}

.main-footer .footer-widget h2{
	position:relative;
	font-size:20px;
	font-weight:400;
	color:#ffffff;
	padding-bottom:16px;
	margin-bottom:20px;
}

.main-footer .footer-widget h2:after{
	position:absolute;
	content:'';
	left:0px;
	bottom:0px;
	width:30px;
	height:1px;
	background-color:#34ccff;
}

.main-footer .logo-widget{
	position:relative;
}

.main-footer .logo-widget .logo{
	position:relative;
	margin-bottom:12px;
}
.main-footer .logo-widget .logo span{
color:#fff;
}
.main-footer .logo-widget .text{
	position:relative;
	color:#a8a8a8;
	font-size:14px;
	font-weight:400;
	padding-right:60px;
	margin-bottom:35px;
	line-height:1.9em;
}

.main-footer .logo-widget .social-icons{
	position:relative;
}

.main-footer .logo-widget .social-icons li{
	position:relative;
	margin-right:10px;
	display:inline-block;
}

.main-footer .logo-widget .social-icons li a{
	position:relative;
	width:36px;
	height:36px;
	font-size:14px;
	text-align:center;
	border-radius:50%;
	line-height:34px;
	color:#ffffff;
	font-weight:400;
	display:inline-block;
	border:1px solid rgba(255,255,255,0.30);
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	transition:all 300ms ease;
}

.main-footer .logo-widget .social-icons li a:hover{
	color:#34ccff;
	border-color:#34ccff;
}


/*** 

====================================================================
	widget
====================================================================

***/
.links-widget{
	position:relative;
}

.links-widget .list{
	position:relative;
}

.links-widget .list li{
	position:relative;
	margin-bottom:12px;
}

.links-widget .list li a{
	position:relative;
	color:#a8a8a8;
	font-size:15px;
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	transition:all 300ms ease;
}

.links-widget .list li a:hover{
	color:#ffffff;
}

/* Contact Widget */

.contact-widget .contact-number{
	position:relative;
	color:#a8a8a8;
	font-size:20px;
	font-weight:400;
	margin-bottom:10px;
	display:inline-block;
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	transition:all 300ms ease;
}

.contact-widget .contact-number:hover{
	color:#ffffff;
}

.contact-widget ul{
	position:relative;
}

.contact-widget ul li{
	position:relative;
	color:#a8a8a8;
	font-size:15px;
	line-height:1.9em;
	margin-bottom:6px;
}

.contact-widget ul li a{
	position:relative;
	color:#a8a8a8;
	font-size:15px;
	line-height:1.9em;
	margin-left:4px;
	display:inline-block;
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	transition:all 300ms ease;
}

.contact-widget ul li a:hover{
	color:#ffffff;
}


.main-footer .footer-bottom{
	position:relative;
	padding:25px 0px;
	margin-left:3%;
	margin-right:3%;
	border-top:1px solid rgba(255,255,255,0.10);
}

.main-footer .footer-bottom .copyright{
	position:relative;
	color:#767676;
	font-size:14px;
}



/*** 

====================================================================
	Scroll To Top style
====================================================================

***/
        .scroll-to-top {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 48px;
            height: 48px;
            color: #ffffff;
            font-size: 20px;
            line-height: 48px;
            text-align: center;
            z-index: 10000;
            cursor: pointer;
            background: #1b1a1c;
            display: none; /* Commence caché */
            border-radius: 5px;
            transition: all 300ms ease;
        }

        .scroll-to-top:hover {
            background: #34ccff;
        }
		



/*** 

====================================================================
		Property Section
====================================================================

***/

.property-section{
	position: relative;
	padding: 120px 0 80px;
	overflow: hidden !important;
}

.property-section.alternate{
	padding-top: 0;
}

.property-block{
	position: relative;
	margin-bottom: 40px;
}

.property-block .inner-box{
	position: relative;
}

.property-block .image-box{
	position: relative;
	overflow: hidden;
}

.property-block .image-box .single-item-carousel{
	position: relative;
}

.property-block .image-box .owl-nav{
	position: absolute;
	left: 0;
	width: 100%;
	top: 50%;
	margin-top: -50px;
}

.property-block .image-box .owl-nav .owl-next,
.property-block .image-box .owl-nav .owl-prev{
	position: absolute;
	width: 25px;
	height: 100px;
	text-align: center;
	line-height: 100px;
	font-size: 18px;
	color: #ffffff;
	font-weight: 400;
	background-color: rgba(34,34,34,.50);
	-webkit-border-radius: 0 8px 8px 0;
	-moz-border-radius: 0 8px 8px 0;
	-ms-border-radius: 0 8px 8px 0;
	-o-border-radius: 0 8px 8px 0;
	border-radius: 0 8px 8px 0;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.property-block .image-box .owl-nav .owl-next{
	left: auto;
	right: 0;
	-webkit-border-radius: 8px 0 0 8px;
	-moz-border-radius: 8px 0 0 8px;
	-ms-border-radius: 8px 0 0 8px;
	-o-border-radius: 8px 0 0 8px;
	border-radius: 8px 0 0 8px;
}

.property-block .image-box .owl-nav .owl-next:hover,
.property-block .image-box .owl-nav .owl-prev:hover{
	background-color: rgba(0,0,0,.80);
}

.property-block .image-box .image{
	position: relative;
	margin: 0;
}

.property-block .image-box .image a{
	position: relative;
	display: block;
	z-index: 9;
}

.property-block .image-box .image:before{
	position: absolute;
	left: 0;
	bottom: 0;
	height: 40%;
	width: 100%;
	background: -moz-linear-gradient(top, rgba(34,34,34,0) 0%, rgba(34,34,34,0.99) 99%, rgba(34,34,34,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(34,34,34,0) 0%,rgba(34,34,34,0.99) 99%,rgba(34,34,34,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(34,34,34,0) 0%,rgba(34,34,34,0.99) 99%,rgba(34,34,34,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00222222', endColorstr='#222222',GradientType=0 ); /* IE6-9 */
	content: "";
	z-index: 99;
}



.property-block .image-box .image img{
	display: block;
	width: 100%;
    height: 250px;
    object-fit: cover;
}


.property-block .inner-box:hover .for:before{
	border-top-color: #2b2b2b;
}

.property-block .image-box .option-box{
	position: absolute;
	display: inline-block;
	top: 50%;
	margin-top: -30px;
	display: block;
	width: 100%;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.property-block .inner-box:hover .image-box .option-box{
	opacity: 1;
	visibility: visible;
}

.property-block .image-box .option-box li{
	position: relative;
	display: inline-block;
	height: 60px;
	width: 60px;
	background-color: #0dcaf0;
	text-align: center;
	margin:0 -30px;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.property-block .image-box .option-box li:nth-child(2){
	z-index: 9;
}

.property-block .inner-box:hover .image-box .option-box li{
	margin: 0 -2px;
	-webkit-transition-delay: 300ms;
	-moz-transition-delay: 300ms;
	-ms-transition-delay: 300ms;
	-o-transition-delay: 300ms;
	transition-delay: 300ms;
}

.property-block .image-box .option-box li:before{
	position: absolute;
	top: 0;
	right: -2px;
	font-size: 20px;
	line-height: 60px;
	color: rgba(255,255,255,0.20);
	content: "|"
}

.property-block .image-box .option-box li a{
	color: #ffffff;
	display: block;
	font-size: 20px;
	line-height: 60px;
	font-weight: 400;
	text-align: center;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.property-block .image-box .option-box li a:hover{
	color: #222222;
}

.property-block .image-box .featured{
	position: absolute;
	right: 0;
	top: 25px;
	font-size: 12px;
	line-height: 20px;
	color: #ffffff;
	font-weight: 700;
	text-transform: uppercase;
	padding: 0 7px;
	z-index: 9;
	background-color: #0dcaf0;
}

.property-block .image-box .featured:before{
	position: absolute;
	left: -10px;
	top: 0;
	width: 0;
	height: 0;
	border-top: 20px solid #0dcaf0;
	border-left: 10px solid transparent;
	content: "";
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition : all 300ms ease;
}


.property-block .lower-content{
	position: relative;
	padding: 20px 0 0;
}

.property-block .lower-content .thumb{
	position: absolute;
	right: 25px;
	top: -35px;
	height: 70px;
	width: 70px;
	border-radius: 50%;
	border: 5px solid rgba(255,255,255,0.30);
	overflow: hidden;
	z-index: 99;
}

.property-block .tags{
	position: relative;
	margin-bottom: 7px;
}

.property-block .tags li{
	position: relative;
	display: inline-block;
	font-size: 14px;
	line-height: 24px;
	color: #222222;
	font-weight: 400;
}

.property-block .tags li a{
	color: #222222;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition : all 300ms ease;
}

.property-block .tags li a:hover{
	color: #222222;
}

.property-block h3{
	position: relative;
	display: block;
	font-size: 24px;
	line-height: 1.2em;
	color: #222222;
	font-weight: 700;
	margin-bottom: 7px;
}

.property-block h3 a{
	color: #222222;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition : all 300ms ease;
} 

.property-block h3 a:hover{
	color: #0dcaf0;
}

.property-block .lucation{
	position: relative;
	display: block;
	font-size: 14px;
	line-height: 24px;
	color: #777777;
	font-weight: 400;
	margin-bottom: 18px;
}

.property-block .lucation i{
	color: #0dcaf0;
	font-size: 18px;
	margin-right: 4px;
}

.property-block .property-info{
	position: relative;
	margin-bottom: 30px;
}

.property-block .property-info li{
	position: relative;
	float: left;
	width: 50%;
	padding-left: 45px;
	font-size: 14px;
	line-height: 45px;
	color: #777777;
	cursor: default;
	font-weight: 400;
}

.property-block .property-info li i{
	position: absolute;
	left: 0;
	top: 0;
	font-size: 24px;
	color: #0dcaf0;
	line-height: 40px;
}

.property-block .property-price{
	position: relative;
}

.property-block .property-price:before{
	position: absolute;
	left: 50%;
	top: 0;
	margin-left: -10px;
	height: 40px;
	width: 20px;
	content: '';
	content: "";
	background-color: #ffffff;
	z-index: 9;
	-webkit-transform: skew(-24deg);
	-moz-transform: skew(-24deg);
	-ms-transform: skew(-24deg);
	-o-transform: skew(-24deg);
	transform: skew(-24deg);
}

.property-block .property-price .read-more{
	position: relative;
	float: left;
	width: 50%;
	background-color: #0dcaf0;
	transition: all 300ms ease;
}

.property-block .property-price .read-more .theme-btn{
	position: relative;
	display: block;
	line-height: 20px;
	padding: 10px 20px;
	font-size: 10px;
	color: #ffffff;
	text-align: center;
	margin-right: 20px;
	text-transform: uppercase;
	font-weight: 700;
}

.property-block .property-price .read-more:hover{
	background-color: #222222;
}

.property-block .property-price .price{
	position: relative;
	float: 	right;
	width: 50%;
	font-size: 10px;
	line-height: 20px;
	color: #ffffff;
	font-weight: 700;
	padding: 10px 20px;
	background-color: #222222;
	text-align: center;
	padding-left:25px;
}



/*** 

====================================================================
		Slide show room
====================================================================

***/




    .slideshow {
        position: relative; /* Ensure the buttons can be positioned absolutely */
    }

    .slideshow .slide {
        display: none;
        text-align: center;
    }

    .slideshow .active {
        display: block;
    }

    .slideshow .slide img {
        width: 100%;
        height: 320px;
        margin: 0;
        object-fit: cover;
        border-radius: 8px;
    }

    .button-container {
        display: flex; /* Use flexbox for layout */
        justify-content: space-between; /* Space between buttons */
        margin-bottom: 10px; /* Add some space below buttons */
		position: relative;
		top:-50%;
        opacity: 0; /* Hidden by default */
        transition: opacity 0.3s ease; /* Smooth transition */		
    }
	
    .button-container:hover {
        opacity: 1; /* Show on hover */
    }



    button:hover {
        background-color: #0056b3;
    }
	
	
	
	
	

/*** 

====================================================================
	breadcrumbs 
====================================================================

***/

.breadcrumb-container {
    position: relative;
    width: 100%; /* Allow full width until max-width is reached */
    margin: 0 auto; /* Center the container */
    overflow: hidden; /* Ensure no overflow from the images */
	top:-80px;
	margin-bottom:-80px;
}

.breadcrumb-image1 {
    width: 100%; /* Make the background image cover the entire width of the container */
    height: 400px; /* Set a fixed height of 400 pixels */
    object-fit: cover; /* Ensures the image covers the area without distortion */
    display: block; /* Ensure no extra space below the image */
}

.breadcrumb-image2 {
    position: absolute;
    bottom: 20px; /* Adjust to place the second image as needed */
    right: 20px; /* Adjust to place the second image as needed */
    max-width: 320px; /* Set a width for the second image */
    height: auto; /* Keep the aspect ratio */
    border-radius: 15px; /* Rounded corners */
    z-index: 1; /* Ensure this appears above the background */
}

.breadcrumb-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Black overlay with 50% opacity */
    z-index: 0; /* Below the title and images */
}

.breadcrumb-title {
    position: absolute; /* Positioned above the overlay */
    top: 50%; /* Center vertically */
    left: 20px; /* Align left with some padding */
    transform: translateY(-50%); /* Adjust for vertical centering */
    z-index: 2; /* Ensure this appears above the overlay */
    color: white; /* Change text color for visibility */
    text-align: left; /* Align text to the left */
    padding: 20px; /* Add some padding */
}
.inline-list {
    list-style: none; /* Remove bullet points */
    padding: 0; /* Remove default padding */
    display: flex; /* Use flexbox for horizontal layout */
    justify-content: flex-start; /* Align items to the left */
    margin-top: 10px; /* Space between title and list */
    white-space: nowrap; /* Prevent line breaks between list items */
}

.inline-list li {
    margin-right: 15px; /* Space between items */
}

.inline-list li:not(:last-child)::after { /* Add separator after each item except the last */
    content: '/'; /* Use "/" as separator */
    margin-left: 15px; /* Space between the item and separator */
    color: white; /* Change separator color if necessary */
}

.inline-list a {
    color: white; /* Change link color for visibility */
    text-decoration: none; /* Remove underline */
}


/* Media Queries for Mobile Devices */
@media (max-width: 768px) { /* Adjust the max-width as needed for your breakpoints */
    .breadcrumb-title h2 {
        font-size: 1.5em; /* Reduce title size for mobile */
    }

    .inline-list li {
        font-size: 0.6em; /* Reduce font size for list items */
        margin-right: 10px; /* Reduce space between items */
		white-space: nowrap; /* Prevent line breaks between list items */
    }

    .inline-list li:not(:last-child)::after {
        margin-left: 10px; /* Adjust space for separator */
    }

.breadcrumb-image2 {
    display:none;
}
}