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

    Template Name:
    Template URI:
    Description: This is html5 template
    Author: Kaji Hasibur Rahman
    Author URI:
    Version: 1.0

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

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



-----------------------------------------------------------------------------------*/
/*----------------------------------------*/
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,400i,500,600,700,800|Open+Sans:300i,400,400i,600,700,800');
*{
	margin:0;
	padding:0;
}
body {
	color: #ecf0f1;
	font-family: 'Open Sans', sans-serif;
	line-height: 1.6;
	background: linear-gradient(135deg, #1a1a1a 0%, #2c3e50 50%, #1a1a1a 100%);
	background-attachment: fixed;
	font-weight: 400;
	cursor: none !important;
	padding-top: 0;
	margin: 0;
	overflow-x: hidden;
	position: relative;
}

/* Motif géométrique subtil en arrière-plan sombre */
body::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: 
		radial-gradient(circle at 20% 80%, rgba(212, 175, 55, 0.08) 0%, transparent 50%),
		radial-gradient(circle at 80% 20%, rgba(44, 62, 80, 0.06) 0%, transparent 50%),
		radial-gradient(circle at 40% 40%, rgba(212, 175, 55, 0.04) 0%, transparent 50%);
	background-size: 800px 800px, 600px 600px, 1000px 1000px;
	background-position: 0 0, 100px 100px, 200px 200px;
	pointer-events: none;
	z-index: -1;
	animation: backgroundFloat 20s ease-in-out infinite;
}

@keyframes backgroundFloat {
	0%, 100% { 
		transform: translateY(0px) rotate(0deg) scale(1); 
		opacity: 0.3;
	}
	25% { 
		transform: translateY(-10px) rotate(0.5deg) scale(1.02); 
		opacity: 0.4;
	}
	50% { 
		transform: translateY(-20px) rotate(1deg) scale(1.05); 
		opacity: 0.5;
	}
	75% { 
		transform: translateY(-10px) rotate(0.5deg) scale(1.02); 
		opacity: 0.4;
	}
}

/* Effet de parallaxe pour les sections */
.parallax-bg {
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* Animation subtile pour les éléments */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.animate-on-scroll {
	animation: fadeInUp 0.8s ease-out forwards;
}

/* Custom Cursor */
.cursor {
  position: fixed;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #3498db;
  pointer-events: none;
  z-index: 9999;
  transition: transform 0.1s ease;
  mix-blend-mode: difference;
}

.cursor-follower {
  position: fixed;
  width: 40px;
  height: 40px;
  border: 2px solid #3498db;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transition: transform 0.15s ease;
  opacity: 0.3;
}

.cursor.hover {
  transform: scale(1.5);
  background: #e74c3c;
}

.cursor-follower.hover {
  transform: scale(1.2);
  border-color: #e74c3c;
  opacity: 0.6;
}

.cursor.click {
  transform: scale(0.8);
  background: #2c3e50;
}

.cursor-follower.click {
  transform: scale(0.6);
  border-color: #2c3e50;
}

/* Hide cursor on touch devices */
@media (hover: none) {
  .cursor, .cursor-follower {
    display: none;
  }
  
  body {
    cursor: auto;
  }
}
.floatleft {float:left}
.floatright {float:right}
img {
	max-width:100%;
	height:auto
}
.fix {overflow:hidden}
p {
	margin:0px;
	color: #fff;
}
h1,h2, h3, h4, h6 {
    color: #2c3e50;
    margin-bottom: 10px;
    margin-top: 0px;
    font-family: 'Montserrat', sans-serif;
}
h5 {
  color: #2c3e50;
  margin-bottom: 10px;
  font-family: 'Montserrat', sans-serif;
  line-height:26px;
}

input:focus,select:focus{
	outline:none;
}
input, button{
    transition:all .3s;
    -webkit-transition:all .3s;
    -moz-transition:all .3s;
}
a {
	-webkit-transition:all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
    -webkit-transition:all .3s;
    -moz-transition:all .3s;
	text-decoration:none;
	color:#fff;
	font-size:14px;
}
a:hover{
    color:#3498db;
}
a:active, a:hover, a:focus {
	outline: none;
	text-decoration:none;
}
button:focus{
	outline:none;
}
ul{
	list-style: outside none none;
	margin: 0;
	padding: 0;
}
:before,:after{
  -webkit-transition: all .3s;
  transition: all .3s;
}
.bg-1{
	background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
	position: relative;
	overflow: hidden;
}

.bg-1::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle at 30% 70%, rgba(212, 175, 55, 0.1) 0%, transparent 50%);
	pointer-events: none;
}

.bg-2{
	background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
	position: relative;
	overflow: hidden;
}

.bg-2::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle at 70% 30%, rgba(212, 175, 55, 0.08) 0%, transparent 50%);
	pointer-events: none;
}

.ptb-130{padding: 130px 0px}
.ptb-100{padding: 100px 0px}
.pt-130{padding-top: 130px}
.pt-100{padding-top: 100px}
.pb-130{padding-bottom: 130px}

.mb-30{margin-bottom: 30px;}

.bg-img-1{background: url(../images/bg/1.jpg)no-repeat center center / cover}
.bg-img-2{background: url(../images/bg/2.jpg)no-repeat center center / cover}
.bg-img-3{background: url(../images/bg/3.jpg)no-repeat center center / cover}
.bg-img-4{background: url(../images/bg/4.jpg)no-repeat center center / cover}
.bg-img-5{background: url(../images/bg/6.jpg)no-repeat center center / cover}

.black-opacity{
  position: relative;
  z-index: 9;
}
.black-opacity:before{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  content: "";
  z-index: -9;
  opacity: .8;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
/* Anciens styles de header supprimés - remplacés par les nouveaux styles plus bas */
/* Anciens styles de menu supprimés - remplacés par les nouveaux styles plus bas */
/* Anciens styles de search-wrap supprimés - plus utilisés */
/* Ancien style sticky supprimé - remplacé par le nouveau header fixe */
/* Ancien style header-bottom supprimé */
/*---------header-area start---------*/
/* Anciens styles responsive-menu-wrap supprimés - remplacés par le nouveau menu mobile */
/* Anciens styles responsive-menu-wrap supprimés - remplacés par le nouveau menu mobile */
/*---------slider-area start---------*/
.slider-items {
  position: relative;
  z-index: 9;
}
.slider-items:before{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background: #000;
  content: "";
  height: 100%;
  opacity: .7;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}
.slider-items img{
  visibility: hidden;
}
.single-slider {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-top: 80px;
}
.single-slider h2{
  font-size: 62px;
  line-height: 62px;
  margin-bottom: 25px;
  font-weight: 600;
}
.single-slider p{
  font-size: 16px;
  line-height: 26px;
  margin-bottom: 25px;
  padding-right: 50px;
}
.single-slider2.single-slider p{
  padding: 0px 0px 0px 50px;
}
.single-slider a{
  display: inline-block;
  padding:10px 30px;
  background: #fb9902;
  color: #fff;
  text-transform: uppercase;
  color: #fff;
  border-radius: 3px;
}
.single-slider a:hover{
  background: #fff;
  color: #fb9902;
}
.slider-active .owl-dots{
  position: absolute;
  left: 0;
  bottom: 20px;
  right: 0;
  text-align: center;
  width: 100%;
}
.slider-active .owl-dot {
  height: 12px;
  width: 4px;
  background: #fff;
  display: inline-block;
  margin:0px 2px;
  border-radius: 50%;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.slider-active .owl-dot.active{
  background: #fb9902;
  height: 17px;
}
/*---------slider-area end---------*/
/*---------about-area start---------*/
.section-title{
  margin-bottom: 45px;
}
.section-title h2{
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 20px;
}
.section-title p{
  font-style: italic;
  font-size: 16px;
}
.about-wrap {
  padding: 75px 0px;
}
.about-wrap h3{
  font-size: 23px;
  font-weight: 700;
  margin-bottom: 25px;
}
.about-wrap p{
  margin-bottom: 20px;
}
.about-wrap a{
  display: inline-block;
  padding:10px 30px;
  background: #fff;
  color: #222;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 10px;
  border-radius: 3px;
}
.about-wrap a:hover{
  background: #fb9902;
  color: #fff;
}
.about-img img{
  visibility: hidden;
}
/*---------about-area end---------*/

/*---------wedo-area start---------*/
.wedo-wrap {
  overflow: hidden;
  background: #0d0f11;
}
.wedo-icon {
  background: #191b1e;
  float: left;
  margin-right: 10px;
  padding: 30px;
}
.wedo-icon span {
  display: block;
  padding-top: 15px;
}
.wedo-icon span:before{
  font-size: 50px;
  color: #fb9902;
}
.wedo-info {
    overflow: hidden;
    padding: 17px 0px;
}
.wedo-info h3{
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}
.wedo-img {
    padding: 33px 0;
}
/*---------wedo-area end---------*/

/*---------project-area start---------*/
.project-area{
  padding: 130px 0px 100px;
}
.project-menu{
  text-align: center;
  margin-bottom: 45px;
}
.project-menu button{
  padding: 8px 20px;
  background: #fff;
  color: #222;
  border-radius: 3px;
  border: none;
  text-transform: uppercase;
  font-weight: 600;
  margin:0px 2px;
}
.project-menu button.active{
  background: #fb9902;
}
.project-wrap{
  position: relative;
  margin-bottom: 30px;
  z-index: 9;
}
.project-wrap:before{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  content: "";
  z-index: 9;
  opacity:0;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  transition: all .3s;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
}
.project-wrap:hover:before{
  opacity: .5;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
.project-wrap img{
  width: 100%;
}
.project-wrap a{
  display: block;
  height: 50px;
  width: 50px;
  position: absolute;
  left: 50%;
  top: 50%;
  text-align: center;
  transform: translate(-50%,-50%) rotate(45deg);
  -webkit-transform: translate(-50%,-50%) rotate(45deg);
  -moz-transform: translate(-50%,-50%) rotate(45deg);
  background: #fb9902;
  color: #fff;
  line-height: 50px;
  font-size: 16px;
  opacity: 0;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  z-index: 99;
}
.project-wrap:hover a{
  opacity: 1;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.project-wrap a:hover{
  background: #fff;
  color: #222;
}
.project-wrap a i{
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
}
/*---------project-area end---------*/
/*---------team-area start---------*/
.team-area{
  padding: 130px 0px 100px;
}
.team-wrap{
  margin-bottom: 30px;
}
.team-img{
  position: relative;
}
.team-img img{
  width: 100%;
}
.team-img:before{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  content: "";
  opacity: 0;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  z-index: 9;
  transition: all .3s;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
}
.team-wrap:hover .team-img:before{
  opacity: .5;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
.team-icon{
  position: absolute;
  right: 0;
  bottom: 5px;
  width: 125px;
  z-index: 9;
  opacity: 0;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  visibility: hidden;
    transition: all .5s;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
}
.team-wrap:hover .team-icon{
  opacity: 1;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  visibility: visible;
}
.team-icon ul{
  text-align: center;
  margin-bottom: 5px;
}
.team-icon ul li{
  display: inline-block;
  margin: 0px 3px;
}
.team-icon ul li a{
  display: block;
  height: 30px;
  width: 30px;
  border: 2px solid #fff;
  color: #fff;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
}
.team-icon ul li a:hover{
  background: #fb9902;
  border-color: #fb9902;
}
.team-content{
  background: #0d0f11;
  transition: all .3s;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  text-align: center;
  padding: 25px 0px;
}
.team-content h3{
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 0px;
}
.team-content p{
  font-size:13px;
  font-style: italic;
}
/*---------team-area end---------*/

/*---------pricing-area start---------*/
.pricing-area{
  padding: 130px 0px 100px;
}
.pricing-wrap{
  margin-bottom: 30px;
  background: #131619;
  border-radius: 10px;
  overflow: hidden;
  padding-bottom: 40px;
}
.pricing-content{
  padding: 30px 0px 50px 0px;
  position: relative;
  margin-bottom: 50px;
  z-index: 9;
}
.pricing-content:before {
    position: absolute;
    left: 0;
    top: -225px;
    width: 103%;
    z-index: -9;
    height: 185%;
    background: #fff;
    content: "";
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    border-radius: 25px;
}
.pricing-wrap.active .pricing-content:before{
  background: #fb9902;
} 
.pricing-content h2{
  font-weight: 700;
  font-size: 34px;
  color: #131619;
  margin-bottom: 20px;
}
.pricing-wrap.active .pricing-content h2{
  color: #fff;
}
.pricing-content h3{
  font-size: 62px;
  line-height: 62px;
  color: #131619;
  font-weight: 700;
}
.pricing-wrap.active .pricing-content h3{
  color: #fff;
}
.pricing-wrap ul li{
  line-height: 40px;

}
.pricing-wrap button{
  padding:8px 20px;
  text-transform: uppercase;
  font-size: 12px;
  color: #222;
  background: #fff;
  border-radius: 3px;
  font-weight: 700;
  margin-top: 30px;
  border: none;
}
.pricing-wrap.active  button{
  background: #fb9902;
  color: #fff;
}
.pricing-wrap button:hover{
  background: #fb9902;
  color: #fff;
}
.pricing-wrap.active button:hover{
  background: #fff;
  color: #222;
}
/*---------pricing-area end---------*/
/*---------booknow-area start---------*/
.booknow-wrap{
  padding: 120px 0px;
}
.booknow-wrap p{
  margin-bottom: 5px;
  font-style: italic;
}
.booknow-wrap input,.booknow-wrap select{
  margin-bottom: 25px;
  width: 100%;
  height: 40px;
  background: transparent;
  border-radius: 3px;
  border: 1px solid #fff;
  padding-left: 15px;
  font-size: 12px;
}
.booknow-wrap select option{
  color: #222;
}
.booknow-wrap input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  opacity: 1;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  color:#fff;
}
.booknow-wrap input::-moz-placeholder { /* Firefox 19+ */
  opacity: 1;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  color:#fff;
}
.booknow-wrap input:-ms-input-placeholder { /* IE 10+ */
  opacity: 1;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  color:#fff;
}
.booknow-wrap input:-moz-placeholder { /* Firefox 18- */
  opacity: 1;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  color:#fff;
}
.booknow-wrap button{
  padding: 8px 30px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  background: #fb9902;
  border-radius: 3px;
  border: none;
}
.booknow-wrap button:hover{
  background: #fff;
  color: #222;
}
/*---------booknow-area end---------*/

/*---------blog-area start---------*/
.blog-area{
  padding: 130px 0px 100px;
}
.blog-wrap{
  margin-bottom: 30px;
  background: #131619;
}
.blog-img img{
  width: 100%;
}
.blog-content{
  overflow: hidden;
  padding: 10px 20px 30px;
}
.blog-content ul {
  margin-bottom: 10px;
}
.blog-content ul li{
  display: inline-block;
  margin-right: 10px;
}
.blog-content ul li:last-child{
  margin-right: 0px;
}
.blog-content ul li a{
  display: block;
  color: #ccc;
  font-size: 12px;
}
.blog-content h3{
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 20px;
  text-transform: capitalize;
}
.blog-content  p{
  margin-bottom: 15px;
}
.blog-content a{
  display: inline-block;
  float: right;
  color: #fff;
}
.blog-content a:hover{
  color: #fb9902;
}
/*---------blog-area end---------*/
/*---------footer-area start---------*/
.footer-top{
  padding: 100px 0px 70px;
}
.footer-widget {
  margin-bottom: 30px;
}
.footer-widget h2{
  padding-bottom: 10px;
  margin-bottom: 25px;
  position: relative;
  font-size: 24px;
  font-weight: 700;
}
.footer-widget h2:before{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 2px;
  background: #fff;
  content: "";
}
.footer-widget p{
  margin-bottom: 20px;
}
.footer-content ul li{
  display: block;
  margin-bottom: 5px;
  line-height: 30px;
  padding-left: 30px;
  position: relative;
}
.footer-content ul li i{
  position: absolute;
  left: 0;
  color: #fb9902;
  font-size: 18px;
  top: 7px;
}
.footer-time ul li span.color{
  color: #fb9902;
}
.footer-menu ul li a{
  display: block;
  position: relative;
  padding-left: 20px;
  margin-bottom: 5px;
}
.footer-menu ul li a:before{
  position: absolute;
  left: 0;
  top: 0;
  content: "\f061";
  color: #fff;
  font-size: 12px;
  font-family: fontawesome;
  transition: all .3s;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
}
.footer-menu ul li a:hover:before{
  padding-left: 5px;
}
.instragram ul{
  overflow: hidden;
}
.instragram ul li{
  float: left;
  margin:3px 3px;
  width: 23%;
}
.instragram ul li a{
  display: block;
  position: relative;
}
.instragram ul li a:before{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  content: "";
  opacity: 0;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  transition: all .3s;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
}
.instragram ul li a img{
  width: 100%;
}
.instragram ul li a:hover:before{
  opacity: .5;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
.footer-bottom-area{
  padding: 20px 0px;
  background: #fb9902;
}

.copyright p a{
  font-weight: 600;
  color: #222;
}
.socil-media-icon {
  text-align: right;
}
.socil-media-icon ul li{
  display: inline-block;
}
.socil-media-icon ul li a{
  height: 30px;
  width: 30px;
  line-height: 30px;
  text-align: center;
  display: block;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
}
.socil-media-icon ul li a:hover{
  background: #fff;
  color: #222;
}
a#scrollUp {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
}
a#scrollUp:hover{
  color: #222;
}
a#scrollUp i:before{
  font-size: 40px;
}
/*---------footer-area end---------*/


/*=======================================
      home page two style here
=======================================
*/
.about-area2 .about-wrap{
  padding: 0px;
}
.wedo-area2{
  padding: 130px 0px 100px;
}
.wedo-area2 .wedo-wrap {
    text-align: center;
    padding: 40px 40px 30px;
    margin-bottom: 30px;
}
.wedo-area2 .wedo-icon {
    background: #191b1e;
    float: none;
    margin-right: 0;
    height: 110px;
    padding: 30px;
    width: 110px;
    margin:0px  auto 10px;
    border-radius: 50%;
}

/*-----------fanfact-area start-----------*/
.fanfact-area{
  padding: 120px 0px;
}
.fanfact-wrap{
  overflow: hidden;
  padding: 0px 40px;
}
.fanfact-content{
  float: left;
  margin-right: 20px;
}
.fanfact-content h2{
  font-size: 35px;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.fanfact-content h3{
  font-size: 67px;
  color: #fff;
  margin-bottom: 0px;
  font-weight: 700;
  width: 170px;
}
.fanfact-icon{
  overflow: hidden;
}
.fanfact-icon i{
  font-size: 100px;
  color: #fb9902;
}
/*-----------fanfact-area end-----------*/
.banner-area{
  height: 750px;
}
/*--------------------tetsmonial-area start--------------------*/
.test-active{
  padding-bottom: 70px;
}
.test-img{
  height: 180px;
  width: 180px;
  overflow: hidden;
  margin:0px auto 30px;
  border-radius: 50%;
}
.test-items h2{
  font-size: 24px;
  margin-bottom: 20px;
  font-weight: 700;
}
.test-items p{
  font-size: 16px;
  padding: 0px 10px;
}
.test-active .owl-dots{
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
}
.test-active .owl-dot{
  height: 15px;
  width: 15px;
  border-radius: 50%;
  display: inline-block;
  margin: 0px 3px;
  background: #fff;
}
.test-active .owl-dot.active{
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  background: #fb9902;
}
/*--------------------tetsmonial-area end--------------------*/

/*===========================================
      home page three style here
===========================================
*/
.about-area3 .about-wrap{
  padding: 0px;
}
.faq-wrap {
    margin-top: 30px;
}
.faq-wrap .panel-default > .panel-heading {
  background-color: transparent;
  border-color: #e1e1e1;
  padding:0px;
  font-weight: 700;
}
.about-wrap .faq-wrap .panel-title > .small, .panel-title > .small > a, .panel-title > a, .panel-title > small, .panel-title > small > a {
  padding: 12px 20px;
}
.faq-wrap  .panel-body p {
  margin-bottom:0px;
  color: #fff;
}
.faq-wrap .panel-body {
    padding: 20px 20px;
	background: #131619;
}
.faq-wrap .panel-default a {
  display: block;
  position: relative;
  background:#fb9902;
  color:#fff;
  overflow:hidden;
  font-size:14px;
  margin-top: 0px;
}
.faq-wrap .panel-default a:before{
    position: absolute;
    right: -15px;
    top: 0;
    width: 57px;
    height: 100%;
    background: #fb9902;
    content: "";
    transform: skew(-20deg);
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
}
.faq-wrap .panel-default a.collapsed{
  background: #131619;
}
.faq-wrap .panel-default a:after {
  content: "";
  font-family: fontawesome;
  font-size: 16px;
  position: absolute;
  right: 0;
  background: #fb9902;
  height: 100%;
  top: 0;
  width: 35px;
  color: #fff;
  text-align: center;
  line-height: 38px;
  border:1px solid #fb9902;
}
.faq-wrap .panel {
    margin-bottom: 10px;
    background-color: #fff;
    border:none;
    border-radius: 4px;
    box-shadow:none;
    -moz-box-shadow:none;
    color: #222;
}
.faq-wrap .panel-default a.collapsed:after{
  content:"\f107";
}

.wedo-area3 .wedo-wrap{
  padding: 0px;
  background: transparent;
}
.wedo-area3 .wedo-info{
  padding-bottom: 0px;
}
.wedo-area3{
  padding-bottom: 0px;
}
.wedo-area3 .wedo-img{
  padding:0px;
}
/*-------------------quote-area start-------------------*/
.quote-area{
  padding: 125px 0px;
}
.quote-wrap p{
  text-align: center;
  font-size: 16px;
  padding: 0px 10px;
}
.quote-wrap p span{
  color: #fb9902;
}
/*-------------------quote-area end-------------------*/

/*-------------------shop-area start-------------------*/
.shop-area{
  padding: 130px 0px 100px;
}
.shop-wrap{
  background: #131619;
  text-align: center;
  margin-bottom: 30px;
}
.shop-img{
  position: relative;
  padding: 30px 0px;
  overflow: hidden;
}
.shop-img ul{
  position: absolute;
  right: 0;
  height: 100%;
  background: #fb9902;
  top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0px 15px;
  transition: all .3s;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  transform: scaleX(0);
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  transform-origin: right;
  -webkit-transform-origin: right;
  -moz-transform-origin: right;
  visibility: hidden;
  opacity: 0;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.shop-wrap:hover .shop-img ul{
  transform: scaleX(1);
  -webkit-transform: scaleX(1);
  -moz-transform: scaleX(1);
  visibility: visible;
  opacity: 1;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.shop-img ul li{
  margin-bottom: 20px;
}
.shop-img ul li a{
  font-size: 25px;
}
.shop-img ul li a:hover{
  color: #222;
}
.shop-content{
  background: #222;
  padding: 30px 0px;
}
.shop-content h3{
  font-size: 20px;
  color: #fff;
  margin-bottom: 0px;
}

/*-------------------shop-area end-------------------*/

/*-------------------discount-area start-------------------*/
.discount-area{
  padding: 100px 0px;
}
.discount-area.black-opacity:before{
  opacity: .9;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
}
.discount-wrap h2{
  font-weight: 700;
  margin-bottom: 25px;
  text-transform: uppercase;
}
.discount-wrap p{
  font-size: 16px;
  font-style: italic;
  margin-bottom: 30px;
}
.discount-wrap a{
  display: inline-block;
  padding: 10px 30px;
  text-transform: uppercase;
  background: #fff;
  color: #222;
  font-weight: 600;
  border-radius: 3px;
}
.discount-wrap a:hover{
  background: #fb9902;
  color: #fff;
}
/*-------------------discount-area start-------------------*/

/*-------------------breadcumb-area start-------------------*/
.breadcumb-area{
  height: 450px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.breadcumb-wrap{
  padding-top: 70px;
}
.breadcumb-wrap h2{
  font-size: 50px;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
}
.breadcumb-wrap ul li{
  display: inline-block;
  margin: 0px 2px;
  font-size: 16px;
  font-weight: 600;
}
.breadcumb-wrap ul li.active{
  color: #fb9902;
}
/*-------------------breadcumb-area end-------------------*/
.about-area3 .about-img {
    height: 636px !important;
}

/*=============================================
            service-page start
=============================================
*/
.service-page-wrap h3{
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 25px;
}
.service-page-wrap p{
  margin-bottom: 20px;
}

/*--------work-area start--------*/
.work-area{
  padding: 100px 0px 70px;
}
.work-wrap {
  margin-bottom: 30px;
  text-align: center;
}
.work-wrap i{
  height: 100px;
  width: 100px;
  background: #131619;
  border-radius: 50%;
  line-height: 100px;
  font-size: 30px;
  color: #fb9902;
  margin-bottom: 25px;
}
.work-wrap h3{
  font-size: 20px;
  color: #fff;
  font-weight: 700;
  margin-bottom: 0px;
}
/*--------work-area end--------*/

/*--------working-time-area start--------*/
.working-time-wrap {
    padding: 115px 0;
}
.working-time-wrap h2{
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 25px;
}
.working-time-wrap ul{
  overflow: hidden;
}
.working-time-wrap ul li{
  margin-bottom: 5px;
  position: relative;
}
.working-time-wrap ul li:before{
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform:translate(-50%,-50%);
          transform:translate(-50%,-50%);
  content: "";
  border-bottom: 1px dashed #fff;
  width: 100px;
}
.working-time-wrap ul li.weekend{
  color: #fb9902;
}
.working-time-wrap ul li.weekend:before{
  border-bottom: 1px dashed #fb9902; 
}
/*--------working-time-area end--------*/
.wedo-area.bg-2.wedo-area2.wedo-area3.pt-100 {
    padding-top: 100px;
}

/*-------------------------single-team-area start-------------------------*/
.single-team-img img{
  visibility: hidden;
}
.single-team-wrap h3{
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 0px;
}
.single-team-wrap span.single-team{
  display: block;
  margin-bottom: 25px;
  font-style: italic;
  font-weight: 600;
}
.single-team-wrap p{
  margin-bottom: 20px;
}
.progress-wrap{
  width: 80%;
  overflow: hidden;
}
.progress-wrap .progress {
    height: 20px;
    margin-bottom: 25px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: none;
    overflow:visible;
}
.progress-wrap .progress-bar {
    float: left;
    width: 0;
    height: 100%;
    color: #fff;
    text-align: center;
    background-color: #fb9902;
    box-shadow: none;
    -webkit-transition: width .6s ease;
    transition: width .6s ease;
    border-radius: 10px;
    position: relative;
}
.progress-wrap .progress-bar span{
  position: absolute;
  right: 0;
  top: -15px;
  font-size: 16px;
  font-weight: 600;
}
.progress-wrap p{
  margin-bottom: 10px;
  font-size: 16px;
}
a.appoinment-btn{
  padding: 10px 30px;
  text-transform: uppercase;
  background: #fb9902;
  font-weight: 700;
  font-size: 12px;
  border-radius: 3px;
  display: inline-block;
  margin-top: 20px;
}
a.appoinment-btn:hover{
  background: #fff;
  color: #222;
}
.socil-icon{
  margin-top: 30px;
}
.socil-icon ul li{
  display: inline-block;
  margin-right: 3px;
}
.socil-icon ul li a{
  height: 30px;
  width: 30px;
  line-height: 30px;
  border-radius: 50%;
  border: 2px solid #fff;
  display: block;
  text-align: center;
}
.socil-icon ul li a:hover{
  background: #fff;
}
/*-------------------------single-team-area end-------------------------*/

/*-------------------------hero-area start-------------------------*/
.hero-area {
    position: relative;
    height: 100vh;
    min-height: 700px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.hero-slider {
    height: 100%;
    width: 100%;
    position: relative;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    display: flex;
    align-items: center;
}

.hero-slide.active {
    opacity: 1;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.1);
    transition: transform 20s ease-out;
}

.hero-slide:hover .hero-bg {
    transform: scale(1.05);
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(44, 62, 80, 0.85), rgba(52, 152, 219, 0.75), rgba(155, 89, 182, 0.6));
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
    width: 100%;
}

.hero-text {
    color: #fff;
    text-align: left;
    max-width: 800px;
    padding: 60px 0;
}

.hero-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

.hero-title {
    font-size: 56px;
    font-weight: 800;
    margin-bottom: 20px;
    color: #fff;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
    line-height: 1.2;
    background: linear-gradient(135deg, #fff, #ecf0f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 28px;
    font-weight: 300;
    margin-bottom: 30px;
    color: #ecf0f1;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    font-style: italic;
}

.hero-description {
    font-size: 20px;
    line-height: 1.8;
    margin-bottom: 50px;
    color: #bdc3c7;
    max-width: 700px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.hero-buttons {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
    margin-bottom: 60px;
}

.hero-stats {
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.stat-item {
    text-align: center;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 20px 30px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    min-width: 120px;
}

.stat-item:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.15);
}

.stat-number {
    display: block;
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 5px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.stat-label {
    font-size: 14px;
    font-weight: 500;
    color: #ecf0f1;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-primary {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: #fff;
    padding: 18px 35px;
    border-radius: 35px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.4s ease;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-align: center;
    box-shadow: 0 8px 30px rgba(52, 152, 219, 0.3);
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(52, 152, 219, 0.4);
    background: linear-gradient(135deg, #2980b9, #1f4e79);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    color: #fff;
    padding: 18px 35px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 35px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.4s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 100%;
    pointer-events: none;
}

.hero-prev, .hero-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    pointer-events: all;
}

.hero-prev:hover, .hero-next:hover {
    background: rgba(255, 255, 255, 0.3);
}

.hero-prev {
    left: 30px;
}

.hero-next {
    right: 30px;
}

.hero-dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 10px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background: #3498db;
}

.dot:hover {
    background: rgba(255, 255, 255, 0.8);
}

/* Responsive Hero */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.2rem;
    }
    
    .hero-description {
        font-size: 1rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .btn-primary, .btn-secondary {
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }
    
    .hero-prev, .hero-next {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    
    .hero-prev {
        left: 15px;
    }
    
    .hero-next {
        right: 15px;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .hero-description {
        font-size: 0.9rem;
    }
}
/*-------------------------hero-area end-------------------------*/

/*-------------------------testimonials-area start-------------------------*/
.testimonials-area {
    background: #f8f9fa;
}

.testimonials-rating {
    margin-bottom: 60px;
}

.rating-stars {
    display: inline-block;
    text-align: center;
}

.rating-number {
    font-size: 3rem;
    font-weight: 700;
    color: #2c3e50;
    display: block;
    margin-bottom: 10px;
}

.rating-stars .stars {
    margin-bottom: 10px;
}

.rating-stars .stars i {
    color: #f39c12;
    font-size: 1.5rem;
    margin: 0 2px;
}

.rating-text {
    color: #7f8c8d;
    font-size: 1rem;
    margin: 0;
}

.testimonial-card {
    background: #fff;
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.testimonial-content {
    margin-bottom: 20px;
}

.testimonial-content .stars {
    margin-bottom: 15px;
}

.testimonial-content .stars i {
    color: #f39c12;
    font-size: 1rem;
    margin-right: 2px;
}

.testimonial-content p {
    color: #2c3e50;
    font-style: italic;
    line-height: 1.6;
    margin: 0;
    font-size: 1rem;
}

.testimonial-author {
    border-top: 1px solid #ecf0f1;
    padding-top: 20px;
    text-align: center;
}

.testimonial-author h4 {
    color: #2c3e50;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.testimonial-author span {
    color: #7f8c8d;
    font-size: 0.9rem;
    font-style: italic;
}

/* Responsive Testimonials */
@media (max-width: 768px) {
    .testimonial-card {
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .rating-number {
        font-size: 2.5rem;
    }
    
    .testimonial-content p {
        font-size: 0.9rem;
    }
}
/*-------------------------testimonials-area end-------------------------*/

/*-------------------------creations-area start-------------------------*/
.creations-area {
    background: #fff;
}

.creation-card {
    text-align: center;
    padding: 40px 30px;
    margin-bottom: 30px;
    border-radius: 15px;
    transition: all 0.3s ease;
    background: #fff;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    height: 100%;
}

.creation-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.creation-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 25px;
    background: linear-gradient(135deg, #3498db, #2980b9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.creation-card:hover .creation-icon {
    transform: scale(1.1);
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.creation-icon i {
    font-size: 2rem;
    color: #fff;
}

.creation-card h3 {
    color: #2c3e50;
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.creation-card p {
    color: #7f8c8d;
    line-height: 1.6;
    margin: 0;
    font-size: 1rem;
}

/* Responsive Creations */
@media (max-width: 768px) {
    .creation-card {
        padding: 30px 20px;
        margin-bottom: 20px;
    }
    
    .creation-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 20px;
    }
    
    .creation-icon i {
        font-size: 1.5rem;
    }
    
    .creation-card h3 {
        font-size: 1.1rem;
    }
    
    .creation-card p {
        font-size: 0.9rem;
    }
}
/*-------------------------creations-area end-------------------------*/

/*-------------------------about-area start-------------------------*/
.about-area {
    background: #fff;
}

.about-content .section-title h2 {
    color: #2c3e50;
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.about-content .section-title p {
    color: #7f8c8d;
    font-size: 1.1rem;
    margin-bottom: 30px;
}

.about-content p {
    color: #7f8c8d;
    line-height: 1.8;
    margin-bottom: 20px;
    font-size: 1rem;
}

.about-features {
    margin-top: 40px;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
}

.feature-item i {
    font-size: 2rem;
    color: #3498db;
    margin-right: 20px;
    margin-top: 5px;
}

.feature-item h4 {
    color: #2c3e50;
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.feature-item p {
    color: #7f8c8d;
    margin: 0;
    font-size: 0.9rem;
}

.about-img {
    position: relative;
}

.about-img img {
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.about-experience {
    position: absolute;
    bottom: 30px;
    right: 30px;
    background: #3498db;
    color: #fff;
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(52, 152, 219, 0.3);
}

.about-experience h3 {
    font-size: 2.5rem;
    margin: 0;
    font-weight: 700;
}

.about-experience p {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Responsive About */
@media (max-width: 768px) {
    .about-content .section-title h2 {
        font-size: 2rem;
    }
    
    .feature-item {
        flex-direction: column;
        text-align: center;
    }
    
    .feature-item i {
        margin-right: 0;
        margin-bottom: 10px;
    }
    
    .about-experience {
        position: static;
        margin-top: 20px;
        display: inline-block;
    }
}
/*-------------------------about-area end-------------------------*/

/*-------------------------services-area start-------------------------*/
.services-area {
    background: #f8f9fa;
    color: #2c3e50;
}

.service-card {
    background: #fff;
    padding: 40px 30px;
    border-radius: 15px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    height: 100%;
    margin-bottom: 30px;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.service-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 25px;
    background: linear-gradient(135deg, #3498db, #2980b9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.service-card:hover .service-icon {
    transform: scale(1.1);
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.service-icon i {
    font-size: 2rem;
    color: #fff;
}

.service-card h3 {
    color: #2c3e50;
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.service-card p {
    color: #7f8c8d;
    line-height: 1.6;
    margin-bottom: 20px;
    font-size: 1rem;
}

.service-link {
    color: #3498db;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.service-link:hover {
    color: #e74c3c;
}

.service-link i {
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.service-link:hover i {
    transform: translateX(5px);
}

/* Responsive Services */
@media (max-width: 768px) {
    .service-card {
        padding: 30px 20px;
        margin-bottom: 20px;
    }
    
    .service-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 20px;
    }
    
    .service-icon i {
        font-size: 1.5rem;
    }
    
    .service-card h3 {
        font-size: 1.1rem;
    }
    
    .service-card p {
        font-size: 0.9rem;
    }
}
/*-------------------------services-area end-------------------------*/

/*-------------------------portfolio-area start-------------------------*/
.portfolio-area {
    background: #fff;
    color: #2c3e50;
}

.portfolio-item {
    margin-bottom: 30px;
}

.portfolio-img {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.portfolio-img img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.portfolio-item:hover .portfolio-img img {
    transform: scale(1.05);
}

.portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(52, 152, 219, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
}

.portfolio-item:hover .portfolio-overlay {
    opacity: 1;
}

.portfolio-content {
    text-align: center;
    color: #fff;
}

.portfolio-content h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.portfolio-content p {
    font-size: 1rem;
    margin-bottom: 20px;
    opacity: 0.9;
}

.portfolio-link {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: #fff;
    color: #3498db;
    border-radius: 50%;
    line-height: 50px;
    text-align: center;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.portfolio-link:hover {
    background: #e74c3c;
    color: #fff;
    transform: scale(1.1);
}

/* Responsive Portfolio */
@media (max-width: 768px) {
    .portfolio-img img {
        height: 250px;
    }
    
    .portfolio-content h3 {
        font-size: 1.2rem;
    }
    
    .portfolio-content p {
        font-size: 0.9rem;
    }
}
/*-------------------------portfolio-area end-------------------------*/

/*-------------------------cta-area start-------------------------*/
.cta-area {
    padding: 60px 0;
}

.cta-content h3 {
    color: #fff;
    font-size: 2rem;
    margin-bottom: 15px;
    font-weight: 600;
}

.cta-content p {
    color: #e9ecef;
    font-size: 1.1rem;
    margin: 0;
    line-height: 1.6;
}

.cta-button .btn {
    padding: 15px 40px;
    font-size: 1.1rem;
    font-weight: 600;
}

/* Responsive CTA */
@media (max-width: 768px) {
    .cta-area {
        text-align: center;
    }
    
    .cta-content h3 {
        font-size: 1.5rem;
    }
    
    .cta-content p {
        font-size: 1rem;
        margin-bottom: 20px;
    }
    
    .cta-button {
        text-align: center !important;
    }
}
/*-------------------------cta-area end-------------------------*/

/*-------------------------gallery-filter-area start-------------------------*/
.gallery-filter-area {
    background: #f8f9fa;
    color: #2c3e50;
}

.gallery-filter {
    margin-bottom: 60px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.filter-btn {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    color: #2c3e50;
    border: 2px solid rgba(52, 152, 219, 0.2);
    padding: 15px 30px;
    border-radius: 35px;
    font-weight: 600;
    font-size: 14px;
    text-transform: none;
    letter-spacing: 0.5px;
    transition: all 0.4s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.filter-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(52, 152, 219, 0.1), transparent);
    transition: left 0.5s ease;
}

.filter-btn:hover::before {
    left: 100%;
}

.filter-btn:hover {
    background: rgba(52, 152, 219, 0.1);
    color: #3498db;
    border-color: #3498db;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(52, 152, 219, 0.2);
}

.filter-btn.active {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: #fff;
    border-color: #3498db;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(52, 152, 219, 0.3);
}

.filter-btn i {
    font-size: 16px;
}

.gallery-items {
    margin-top: 30px;
}

.gallery-item {
    margin-bottom: 30px;
    transition: all 0.4s ease;
    opacity: 1;
    transform: scale(1);
}

.gallery-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease;
    background: #fff;
}

.gallery-wrap:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.gallery-img {
    position: relative;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
}

.gallery-img img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.gallery-wrap:hover .gallery-img img {
    transform: scale(1.08);
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.9), rgba(155, 89, 182, 0.8));
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.4s ease;
    backdrop-filter: blur(5px);
}

.gallery-wrap:hover .gallery-overlay {
    opacity: 1;
}

.gallery-content {
    text-align: center;
    color: #fff;
    padding: 30px 20px;
    transform: translateY(20px);
    transition: transform 0.4s ease;
}

.gallery-wrap:hover .gallery-content {
    transform: translateY(0);
}

.gallery-content h3 {
    font-size: 1.8rem;
    margin-bottom: 15px;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.gallery-content p {
    font-size: 1.1rem;
    margin-bottom: 25px;
    opacity: 0.95;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.gallery-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.9);
    color: #3498db;
    border-radius: 50%;
    font-size: 1.4rem;
    transition: all 0.4s ease;
    text-decoration: none;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.gallery-link:hover {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: #fff;
    transform: scale(1.15) rotate(5deg);
    box-shadow: 0 8px 25px rgba(52, 152, 219, 0.4);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Responsive Gallery */
@media (max-width: 768px) {
    .hero-gallery-title {
        font-size: 36px;
    }
    
    .hero-gallery-subtitle {
        font-size: 20px;
    }
    
    .hero-gallery-description {
        font-size: 16px;
    }
    
    .hero-gallery-stats {
        gap: 20px;
    }
    
    .stat-item {
        min-width: 100px;
        padding: 15px 20px;
    }
    
    .filter-btn {
        padding: 12px 20px;
        font-size: 13px;
        gap: 5px;
    }
    
    .filter-btn i {
        font-size: 14px;
    }
    
    .gallery-img img {
        height: 280px;
    }
    
    .gallery-content h3 {
        font-size: 1.5rem;
    }
    
    .gallery-content p {
        font-size: 1rem;
    }
    
    .gallery-link {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .hero-gallery-title {
        font-size: 28px;
    }
    
    .hero-gallery-subtitle {
        font-size: 18px;
    }
    
    .hero-gallery-description {
        font-size: 14px;
    }
    
    .hero-gallery-stats {
        flex-direction: column;
        gap: 15px;
    }
    
    .stat-item {
        min-width: 80px;
        padding: 12px 15px;
    }
    
    .filter-btn {
        padding: 10px 15px;
        font-size: 12px;
    }
    
    .gallery-img img {
        height: 250px;
    }
    
    .gallery-content p {
        font-size: 0.9rem;
    }
}
/*-------------------------gallery-filter-area end-------------------------*/

/*-------------------------pricing-area start-------------------------*/
.pricing-area {
    background: #fff;
    color: #2c3e50;
}

.pricing-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(52, 152, 219, 0.1);
}

.pricing-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    border-color: rgba(52, 152, 219, 0.3);
}

.pricing-card.featured {
    border: 2px solid #3498db;
    transform: scale(1.02);
    box-shadow: 0 15px 40px rgba(52, 152, 219, 0.2);
}

.pricing-card.featured:hover {
    transform: scale(1.02) translateY(-15px);
    box-shadow: 0 30px 60px rgba(52, 152, 219, 0.3);
}

.pricing-badge {
    position: absolute;
    top: 20px;
    right: -30px;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #fff;
    padding: 8px 50px;
    font-size: 0.9rem;
    font-weight: 700;
    transform: rotate(45deg);
    z-index: 1;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
}

.pricing-header {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: #fff;
    padding: 50px 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.pricing-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.pricing-card:hover .pricing-header::before {
    left: 100%;
}

.pricing-card.featured .pricing-header {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.pricing-header h3 {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.price {
    margin-bottom: 20px;
    position: relative;
}

.currency {
    font-size: 2rem;
    vertical-align: top;
    font-weight: 600;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.amount {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, #fff, #ecf0f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pricing-header p {
    margin: 0;
    font-size: 1.1rem;
    opacity: 0.95;
    font-weight: 500;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.pricing-content {
    padding: 40px 30px;
    background: #f8f9fa;
}

.pricing-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pricing-content li {
    padding: 15px 0;
    border-bottom: 1px solid rgba(52, 152, 219, 0.1);
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    color: #2c3e50;
    font-weight: 500;
}

.pricing-content li:hover {
    background: rgba(52, 152, 219, 0.05);
    padding-left: 10px;
    border-radius: 8px;
    margin: 0 -10px;
}

.pricing-content li:last-child {
    border-bottom: none;
}

.pricing-content li i {
    color: #27ae60;
    margin-right: 15px;
    font-size: 1.2rem;
    width: 20px;
    text-align: center;
}

.pricing-footer {
    padding: 30px;
    text-align: center;
    background: #fff;
    border-radius: 0 0 20px 20px;
}

.pricing-footer .btn {
    width: 100%;
    padding: 15px 30px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 35px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.pricing-footer .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.pricing-footer .btn:hover::before {
    left: 100%;
}

.pricing-footer .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
}

/* Responsive Pricing */
@media (max-width: 768px) {
    .pricing-card.featured {
        transform: none;
        margin-bottom: 20px;
    }
    
    .pricing-card.featured:hover {
        transform: translateY(-5px);
    }
    
    .pricing-header {
        padding: 30px 20px;
    }
    
    .pricing-header h3 {
        font-size: 1.1rem;
    }
    
    .amount {
        font-size: 2.5rem;
    }
    
    .pricing-content {
        padding: 20px;
    }
    
    .pricing-footer {
        padding: 0 20px 20px;
    }
}
/*-------------------------pricing-area end-------------------------*/

/*-------------------------individual-pricing-area start-------------------------*/
.individual-pricing-area {
    background: #f8f9fa;
}

.individual-pricing-area .pricing-card {
    background: #fff;
}

.individual-pricing-area .pricing-header {
    background: linear-gradient(135deg, #2c3e50, #34495e);
}

.individual-pricing-area .pricing-card.featured .pricing-header {
    background: linear-gradient(135deg, #3498db, #2980b9);
}
/*-------------------------individual-pricing-area end-------------------------*/

/*-------------------------pregnancy-pricing-area start-------------------------*/
.pregnancy-pricing-area {
    background: #fff;
}

.pregnancy-pricing-area .pricing-header {
    background: linear-gradient(135deg, #e91e63, #c2185b);
}

.pregnancy-pricing-area .pricing-card.featured .pricing-header {
    background: linear-gradient(135deg, #9c27b0, #7b1fa2);
}
/*-------------------------pregnancy-pricing-area end-------------------------*/

/*-------------------------header-area start-------------------------*/
.header-area {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(52, 152, 219, 0.1);
}

.header-area.scrolled {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.12);
}

.header-bottom {
    padding: 20px 0;
    position: relative;
}

.logo img {
    max-height: 50px;
    width: auto;
    object-fit: contain;
    transition: all 0.3s ease;
}

.logo img:hover {
    transform: scale(1.05);
}

/* Menu principal - Règles supprimées car gérées par les règles principales */

/* Sous-menus - Règles supprimées car gérées par les règles principales */
    transform: translateX(5px);
}

/* Actions du header - Supprimé (définition unifiée plus bas) */

.header-actions .btn {
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #3498db, #2980b9);
    border: none;
    border-radius: 25px;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
}

.header-actions .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
    background: linear-gradient(135deg, #2980b9, #1f4e79);
}

/* Menu mobile */
/* Menu hamburger - Masqué par défaut */
/* Règle mobile-menu-toggle déplacée vers .header-wrapper */

.mobile-menu-toggle:hover {
    background: rgba(52, 152, 219, 0.1);
}

.mobile-menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background: #ffffff;
    margin: 3px 0;
    transition: all 0.3s ease;
    border-radius: 2px;
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
    background: #3498db;
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
    transform: scale(0);
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
    background: #3498db;
}

/* Animation fluide du menu hamburger */
.mobile-menu-toggle span {
    transform-origin: center;
}

.mobile-menu-toggle.active {
    transform: rotate(0deg);
}

/* Responsive - Règles supprimées car gérées par les règles principales */
    
    .mobile-menu-toggle {
        display: flex;
    }
    
    .header-bottom {
        padding: 15px 0;
    }
    
    .logo img {
        max-height: 45px;
    }
    
    .header-actions {
        display: none;
    }
    
    .hero-title {
        font-size: 42px;
    }
    
    .hero-subtitle {
        font-size: 22px;
    }
    
    .hero-description {
        font-size: 18px;
    }
    
    .hero-buttons {
        flex-direction: column;
        gap: 15px;
    }
    
    .btn-primary, .btn-secondary {
        width: 100%;
        justify-content: center;
    }
    
    .hero-stats {
        gap: 20px;
        justify-content: center;
    }
    
    .stat-item {
        min-width: 100px;
        padding: 15px 20px;
    }
    
    .stat-number {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    /* Règles supprimées car gérées par les règles principales */
    
    .hero-title {
        font-size: 36px;
    }
    
    .hero-subtitle {
        font-size: 20px;
    }
    
    .hero-description {
        font-size: 16px;
    }
    
    .hero-buttons {
        gap: 10px;
    }
    
    .btn-primary, .btn-secondary {
        padding: 15px 25px;
        font-size: 14px;
    }
    
    .hero-stats {
        flex-direction: column;
        gap: 15px;
    }
    
    .stat-item {
        min-width: 80px;
        padding: 12px 15px;
    }
    
    .stat-number {
        font-size: 20px;
    }
    
    .stat-label {
        font-size: 12px;
    }
}
/*-------------------------hero-gallery-area start-------------------------*/
.hero-gallery-area {
    position: relative;
    height: 70vh;
    min-height: 500px;
    overflow: hidden;
    display: flex;
    align-items: center;
    margin-top: 80px;
}

.hero-gallery-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.1);
    transition: transform 20s ease-out;
}

.hero-gallery-area:hover .hero-gallery-bg {
    transform: scale(1.05);
}

.hero-gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(44, 62, 80, 0.85), rgba(52, 152, 219, 0.75), rgba(155, 89, 182, 0.6));
    z-index: 1;
}

.hero-gallery-content {
    position: relative;
    z-index: 2;
    color: #fff;
    padding: 60px 0;
}

.hero-gallery-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

.hero-gallery-title {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 20px;
    color: #fff;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
    line-height: 1.2;
    background: linear-gradient(135deg, #fff, #ecf0f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-gallery-subtitle {
    font-size: 24px;
    font-weight: 300;
    margin-bottom: 20px;
    color: #ecf0f1;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    font-style: italic;
}

.hero-gallery-description {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 50px;
    color: #bdc3c7;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.hero-gallery-stats {
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
    justify-content: center;
}

/*-------------------------hero-gallery-area end-------------------------*/

/*-------------------------hero-pricing-area start-------------------------*/
.hero-pricing-area {
    position: relative;
    height: 70vh;
    min-height: 500px;
    overflow: hidden;
    display: flex;
    align-items: center;
    margin-top: 80px;
}

.hero-pricing-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.1);
    transition: transform 20s ease-out;
}

.hero-pricing-area:hover .hero-pricing-bg {
    transform: scale(1.05);
}

.hero-pricing-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(44, 62, 80, 0.85), rgba(52, 152, 219, 0.75), rgba(155, 89, 182, 0.6));
    z-index: 1;
}

.hero-pricing-content {
    position: relative;
    z-index: 2;
    color: #fff;
    padding: 60px 0;
}

.hero-pricing-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

.hero-pricing-title {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 20px;
    color: #fff;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
    line-height: 1.2;
    background: linear-gradient(135deg, #fff, #ecf0f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-pricing-subtitle {
    font-size: 24px;
    font-weight: 300;
    margin-bottom: 20px;
    color: #ecf0f1;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    font-style: italic;
}

.hero-pricing-description {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 50px;
    color: #bdc3c7;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.hero-pricing-stats {
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
    justify-content: center;
}

/*-------------------------hero-pricing-area end-------------------------*/

/*-------------------------hero-contact-area start-------------------------*/
.hero-contact-area {
    position: relative;
    height: 70vh;
    min-height: 500px;
    overflow: hidden;
    display: flex;
    align-items: center;
    margin-top: 80px;
}

.hero-contact-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.1);
    transition: transform 20s ease-out;
}

.hero-contact-area:hover .hero-contact-bg {
    transform: scale(1.05);
}

.hero-contact-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(44, 62, 80, 0.85), rgba(52, 152, 219, 0.75), rgba(155, 89, 182, 0.6));
    z-index: 1;
}

.hero-contact-content {
    position: relative;
    z-index: 2;
    color: #fff;
    padding: 60px 0;
}

.hero-contact-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

.hero-contact-title {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 20px;
    color: #fff;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
    line-height: 1.2;
    background: linear-gradient(135deg, #fff, #ecf0f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-contact-subtitle {
    font-size: 24px;
    font-weight: 300;
    margin-bottom: 20px;
    color: #ecf0f1;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    font-style: italic;
}

.hero-contact-description {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 50px;
    color: #bdc3c7;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.hero-contact-stats {
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
    justify-content: center;
}

/*-------------------------hero-contact-area end-------------------------*/

/*-------------------------hero-about-area start-------------------------*/
.hero-about-area {
    position: relative;
    height: 70vh;
    min-height: 500px;
    overflow: hidden;
    display: flex;
    align-items: center;
    margin-top: 80px;
}

.hero-about-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.1);
    transition: transform 20s ease-out;
}

.hero-about-area:hover .hero-about-bg {
    transform: scale(1.05);
}

.hero-about-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(44, 62, 80, 0.85), rgba(52, 152, 219, 0.75), rgba(155, 89, 182, 0.6));
    z-index: 1;
}

.hero-about-content {
    position: relative;
    z-index: 2;
    color: #fff;
    padding: 60px 0;
}

.hero-about-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

.hero-about-title {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 20px;
    color: #fff;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
    line-height: 1.2;
    background: linear-gradient(135deg, #fff, #ecf0f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-about-subtitle {
    font-size: 24px;
    font-weight: 300;
    margin-bottom: 20px;
    color: #ecf0f1;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    font-style: italic;
}

.hero-about-description {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 50px;
    color: #bdc3c7;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.hero-about-stats {
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
    justify-content: center;
}

/*-------------------------hero-about-area end-------------------------*/

/*-------------------------hero-mariage-area start-------------------------*/
.hero-mariage-area {
    position: relative;
    height: 70vh;
    min-height: 500px;
    overflow: hidden;
    display: flex;
    align-items: center;
    margin-top: 80px;
}

.hero-mariage-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.1);
    transition: transform 20s ease-out;
}

.hero-mariage-area:hover .hero-mariage-bg {
    transform: scale(1.05);
}

.hero-mariage-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(44, 62, 80, 0.85), rgba(52, 152, 219, 0.75), rgba(155, 89, 182, 0.6));
    z-index: 1;
}

.hero-mariage-content {
    position: relative;
    z-index: 2;
    color: #fff;
    padding: 60px 0;
}

.hero-mariage-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

.hero-mariage-title {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 20px;
    color: #fff;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
    line-height: 1.2;
    background: linear-gradient(135deg, #fff, #ecf0f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-mariage-subtitle {
    font-size: 24px;
    font-weight: 300;
    margin-bottom: 20px;
    color: #ecf0f1;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    font-style: italic;
}

.hero-mariage-description {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 50px;
    color: #bdc3c7;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.hero-mariage-stats {
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
    justify-content: center;
}

/*-------------------------hero-mariage-area end-------------------------*/

/*-------------------------hero-lifestyle-area start-------------------------*/
.hero-lifestyle-area {
    position: relative;
    height: 70vh;
    min-height: 500px;
    overflow: hidden;
    display: flex;
    align-items: center;
    margin-top: 80px;
}

.hero-lifestyle-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.1);
    transition: transform 20s ease-out;
}

.hero-lifestyle-area:hover .hero-lifestyle-bg {
    transform: scale(1.05);
}

.hero-lifestyle-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(44, 62, 80, 0.85), rgba(52, 152, 219, 0.75), rgba(155, 89, 182, 0.6));
    z-index: 1;
}

.hero-lifestyle-content {
    position: relative;
    z-index: 2;
    color: #fff;
    padding: 60px 0;
}

.hero-lifestyle-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

.hero-lifestyle-title {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 20px;
    color: #fff;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
    line-height: 1.2;
    background: linear-gradient(135deg, #fff, #ecf0f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-lifestyle-subtitle {
    font-size: 24px;
    font-weight: 300;
    margin-bottom: 20px;
    color: #ecf0f1;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    font-style: italic;
}

.hero-lifestyle-description {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 50px;
    color: #bdc3c7;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.hero-lifestyle-stats {
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
    justify-content: center;
}

/*-------------------------hero-lifestyle-area end-------------------------*/

/*-------------------------hero-actualites-area start-------------------------*/
.hero-actualites-area {
    position: relative;
    height: 70vh;
    min-height: 500px;
    overflow: hidden;
    display: flex;
    align-items: center;
    margin-top: 80px;
}

.hero-actualites-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.1);
    transition: transform 20s ease-out;
}

.hero-actualites-area:hover .hero-actualites-bg {
    transform: scale(1.05);
}

.hero-actualites-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(44, 62, 80, 0.85), rgba(52, 152, 219, 0.75), rgba(155, 89, 182, 0.6));
    z-index: 1;
}

.hero-actualites-content {
    position: relative;
    z-index: 2;
    color: #fff;
    padding: 60px 0;
}

.hero-actualites-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

.hero-actualites-title {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 20px;
    color: #fff;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
    line-height: 1.2;
    background: linear-gradient(135deg, #fff, #ecf0f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-actualites-subtitle {
    font-size: 24px;
    font-weight: 300;
    margin-bottom: 20px;
    color: #ecf0f1;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    font-style: italic;
}

.hero-actualites-description {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 50px;
    color: #bdc3c7;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.hero-actualites-stats {
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
    justify-content: center;
}

/*-------------------------hero-actualites-area end-------------------------*/

/*-------------------------hero-prestations-area start-------------------------*/
.hero-prestations-area {
    position: relative;
    height: 70vh;
    min-height: 500px;
    overflow: hidden;
    display: flex;
    align-items: center;
    margin-top: 80px;
}

.hero-prestations-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.1);
    transition: transform 20s ease-out;
}

.hero-prestations-area:hover .hero-prestations-bg {
    transform: scale(1.05);
}

.hero-prestations-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(44, 62, 80, 0.85), rgba(52, 152, 219, 0.75), rgba(155, 89, 182, 0.6));
    z-index: 1;
}

.hero-prestations-content {
    position: relative;
    z-index: 2;
    color: #fff;
    padding: 60px 0;
}

.hero-prestations-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

.hero-prestations-title {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 20px;
    color: #fff;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
    line-height: 1.2;
    background: linear-gradient(135deg, #fff, #ecf0f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-prestations-subtitle {
    font-size: 24px;
    font-weight: 300;
    margin-bottom: 20px;
    color: #ecf0f1;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    font-style: italic;
}

.hero-prestations-description {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 50px;
    color: #bdc3c7;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.hero-prestations-stats {
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
    justify-content: center;
}

/*-------------------------hero-prestations-area end-------------------------*/

/*-------------------------hero-team-area start-------------------------*/
.hero-team-area {
    position: relative;
    height: 70vh;
    min-height: 500px;
    overflow: hidden;
    display: flex;
    align-items: center;
    margin-top: 80px;
}

.hero-team-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.1);
    transition: transform 20s ease-out;
}

.hero-team-area:hover .hero-team-bg {
    transform: scale(1.05);
}

.hero-team-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(44, 62, 80, 0.85), rgba(52, 152, 219, 0.75), rgba(155, 89, 182, 0.6));
    z-index: 1;
}

.hero-team-content {
    position: relative;
    z-index: 2;
    color: #fff;
    padding: 60px 0;
}

.hero-team-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

.hero-team-title {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 20px;
    color: #fff;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
    line-height: 1.2;
    background: linear-gradient(135deg, #fff, #ecf0f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-team-subtitle {
    font-size: 24px;
    font-weight: 300;
    margin-bottom: 20px;
    color: #ecf0f1;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    font-style: italic;
}

.hero-team-description {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 50px;
    color: #bdc3c7;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.hero-team-stats {
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
    justify-content: center;
}

/*-------------------------hero-team-area end-------------------------*/

/*-------------------------section-header start-------------------------*/
.section-header {
    margin-bottom: 80px;
}

.section-badge {
    display: inline-block;
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: #fff;
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.section-title {
    font-size: 42px;
    font-weight: 800;
    color: #2c3e50;
    margin-bottom: 20px;
    line-height: 1.2;
}

.section-subtitle {
    font-size: 20px;
    color: #3498db;
    margin-bottom: 20px;
    font-weight: 300;
}

.section-description {
    font-size: 16px;
    color: #7f8c8d;
    line-height: 1.8;
    max-width: 600px;
    margin: 0 auto;
}

/*-------------------------section-header end-------------------------*/

/*-------------------------about-cards start-------------------------*/
.about-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(52, 152, 219, 0.1);
    transition: all 0.3s ease;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}

.about-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(52, 152, 219, 0.1), transparent);
    transition: left 0.5s ease;
}

.about-card:hover::before {
    left: 100%;
}

.about-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(52, 152, 219, 0.2);
}

.about-card-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #3498db, #2980b9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    color: #fff;
    font-size: 32px;
    transition: all 0.3s ease;
}

.about-card:hover .about-card-icon {
    transform: scale(1.1);
    box-shadow: 0 10px 20px rgba(52, 152, 219, 0.3);
}

.about-card h3 {
    font-size: 24px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 15px;
}

.about-card p {
    color: #7f8c8d;
    line-height: 1.6;
    margin-bottom: 25px;
}

.about-card-number {
    font-size: 36px;
    font-weight: 800;
    color: #3498db;
    margin-bottom: 5px;
}

.about-card-label {
    font-size: 14px;
    color: #7f8c8d;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/*-------------------------about-cards end-------------------------*/

/*-------------------------service-cards start-------------------------*/
.service-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(52, 152, 219, 0.1);
    transition: all 0.3s ease;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(52, 152, 219, 0.1), transparent);
    transition: left 0.5s ease;
}

.service-card:hover::before {
    left: 100%;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(52, 152, 219, 0.2);
}

.service-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.service-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #3498db, #2980b9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    transition: all 0.3s ease;
}

.service-card:hover .service-icon {
    transform: scale(1.1);
    box-shadow: 0 10px 20px rgba(52, 152, 219, 0.3);
}

.service-number {
    font-size: 48px;
    font-weight: 800;
    color: #ecf0f1;
    line-height: 1;
}

.service-card h3 {
    font-size: 24px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 15px;
}

.service-card p {
    color: #7f8c8d;
    line-height: 1.6;
    margin-bottom: 25px;
}

.service-features {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    text-align: left;
}

.service-features li {
    padding: 8px 0;
    color: #7f8c8d;
    display: flex;
    align-items: center;
}

.service-features li i {
    color: #27ae60;
    margin-right: 10px;
    font-size: 14px;
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: transparent;
    border: 2px solid #3498db;
    color: #3498db;
    text-decoration: none;
    border-radius: 25px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background: #3498db;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
}

/*-------------------------service-cards end-------------------------*/

/*-------------------------portfolio-cards start-------------------------*/
.portfolio-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(52, 152, 219, 0.1);
    transition: all 0.3s ease;
    margin-bottom: 30px;
    position: relative;
}

.portfolio-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(52, 152, 219, 0.2);
}

.portfolio-card-img {
    position: relative;
    overflow: hidden;
    height: 300px;
}

.portfolio-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.portfolio-card:hover .portfolio-card-img img {
    transform: scale(1.1);
}

.portfolio-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.9), rgba(155, 89, 182, 0.8));
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
}

.portfolio-card:hover .portfolio-card-overlay {
    opacity: 1;
}

.portfolio-card-content {
    text-align: center;
    color: #fff;
    padding: 20px;
}

.portfolio-card-content h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
}

.portfolio-card-content p {
    font-size: 16px;
    margin-bottom: 20px;
    opacity: 0.9;
}

.portfolio-card-stats {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.portfolio-card-stats span {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: 600;
}

.portfolio-card-info {
    padding: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.portfolio-card-info h4 {
    font-size: 20px;
    font-weight: 700;
    color: #2c3e50;
    margin: 0;
}

.portfolio-card-info p {
    color: #7f8c8d;
    margin: 5px 0 0 0;
    font-size: 14px;
}

.portfolio-card-link {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #3498db, #2980b9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
}

.portfolio-card-link:hover {
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
}

.bg-light {
    background-color: #f8f9fa;
}

/*-------------------------portfolio-cards end-------------------------*/

/*-------------------------gallery-filters start-------------------------*/
.gallery-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin-bottom: 60px;
}

.filter-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 25px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(52, 152, 219, 0.2);
    border-radius: 15px;
    color: #2c3e50;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-width: 120px;
}

.filter-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(52, 152, 219, 0.1), transparent);
    transition: left 0.5s ease;
}

.filter-btn:hover::before {
    left: 100%;
}

.filter-btn:hover,
.filter-btn.active {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: #fff;
    border-color: #3498db;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(52, 152, 219, 0.3);
}

.filter-btn i {
    font-size: 20px;
    margin-bottom: 5px;
}

.filter-btn span {
    font-size: 14px;
    font-weight: 600;
}

.filter-count {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    min-width: 24px;
    text-align: center;
}

.filter-btn:not(.active) .filter-count {
    background: rgba(52, 152, 219, 0.1);
    color: #3498db;
}

/*-------------------------gallery-filters end-------------------------*/

/*-------------------------gallery-cards start-------------------------*/
.gallery-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(52, 152, 219, 0.1);
    transition: all 0.3s ease;
    margin-bottom: 30px;
    position: relative;
}

.gallery-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(52, 152, 219, 0.2);
}

.gallery-card-img {
    position: relative;
    overflow: hidden;
    height: 300px;
}

.gallery-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-card:hover .gallery-card-img img {
    transform: scale(1.1);
}

.gallery-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.9), rgba(155, 89, 182, 0.8));
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
}

.gallery-card:hover .gallery-card-overlay {
    opacity: 1;
}

.gallery-card-content {
    text-align: center;
    color: #fff;
    padding: 20px;
}

.gallery-card-content h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
}

.gallery-card-content p {
    font-size: 16px;
    margin-bottom: 20px;
    opacity: 0.9;
}

.gallery-card-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.gallery-link {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.gallery-link:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.gallery-card-info {
    padding: 25px;
    background: #fff;
}

.gallery-card-info h4 {
    font-size: 20px;
    font-weight: 700;
    color: #2c3e50;
    margin: 0 0 8px 0;
}

.gallery-card-info p {
    color: #7f8c8d;
    margin: 0 0 15px 0;
    font-size: 14px;
}

.gallery-card-meta {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.gallery-card-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: #7f8c8d;
    font-weight: 600;
}

.gallery-card-meta i {
    color: #e74c3c;
}

/*-------------------------gallery-cards end-------------------------*/

/*-------------------------pricing-cards start-------------------------*/
.pricing-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(52, 152, 219, 0.1);
    transition: all 0.3s ease;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.pricing-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(52, 152, 219, 0.1), transparent);
    transition: left 0.5s ease;
}

.pricing-card:hover::before {
    left: 100%;
}

.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(52, 152, 219, 0.2);
}

.pricing-card.featured {
    border: 2px solid #3498db;
    box-shadow: 0 15px 35px rgba(52, 152, 219, 0.2);
    transform: scale(1.05);
}

.pricing-card.featured:hover {
    transform: scale(1.05) translateY(-10px);
}

.pricing-card-header {
    position: relative;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    padding: 30px 25px 20px;
    text-align: center;
    border-bottom: 1px solid rgba(52, 152, 219, 0.1);
}

.pricing-card.featured .pricing-card-header {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: #fff;
}

.pricing-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #3498db, #2980b9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: #fff;
    font-size: 24px;
    transition: all 0.3s ease;
}

.pricing-card:hover .pricing-icon {
    transform: scale(1.1);
    box-shadow: 0 10px 20px rgba(52, 152, 219, 0.3);
}

.pricing-card.featured .pricing-icon {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.pricing-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: #fff;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pricing-card.featured .pricing-badge {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.pricing-card-body {
    padding: 30px 25px;
    text-align: center;
}

.pricing-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 15px;
}

.pricing-card.featured h3 {
    color: #fff;
}

.pricing-price {
    margin-bottom: 15px;
}

.pricing-price .currency {
    font-size: 24px;
    font-weight: 600;
    color: #3498db;
    vertical-align: top;
}

.pricing-card.featured .pricing-price .currency {
    color: #fff;
}

.pricing-price .amount {
    font-size: 48px;
    font-weight: 800;
    color: #2c3e50;
    line-height: 1;
}

.pricing-card.featured .pricing-price .amount {
    color: #fff;
}

.pricing-price .period {
    font-size: 16px;
    color: #7f8c8d;
    margin-left: 5px;
}

.pricing-card.featured .pricing-price .period {
    color: rgba(255, 255, 255, 0.8);
}

.pricing-description {
    color: #7f8c8d;
    font-size: 14px;
    margin-bottom: 25px;
    line-height: 1.5;
}

.pricing-card.featured .pricing-description {
    color: rgba(255, 255, 255, 0.9);
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    text-align: left;
}

.pricing-features li {
    padding: 10px 0;
    color: #2c3e50;
    display: flex;
    align-items: center;
    font-size: 14px;
}

.pricing-card.featured .pricing-features li {
    color: #fff;
}

.pricing-features li i {
    color: #27ae60;
    margin-right: 12px;
    font-size: 16px;
    width: 20px;
}

.pricing-card-footer {
    padding: 0 25px 30px;
    text-align: center;
}

.pricing-info {
    background: #f8f9fa;
    border-radius: 20px;
    padding: 40px 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pricing-info h3 {
    font-size: 28px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 30px;
    text-align: center;
}

.pricing-benefits {
    margin-bottom: 40px;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
    padding: 20px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.benefit-item:hover {
    transform: translateX(10px);
    box-shadow: 0 10px 25px rgba(52, 152, 219, 0.1);
}

.benefit-item i {
    color: #27ae60;
    font-size: 24px;
    margin-right: 15px;
    margin-top: 5px;
}

.benefit-item h4 {
    font-size: 18px;
    font-weight: 700;
    color: #2c3e50;
    margin: 0 0 8px 0;
}

.benefit-item p {
    color: #7f8c8d;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.pricing-cta {
    text-align: center;
}

/*-------------------------pricing-cards end-------------------------*/

/*-------------------------contact-form start-------------------------*/
.contact-form-wrapper {
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(52, 152, 219, 0.1);
    margin-bottom: 30px;
}

.contact-form-header {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 2px solid #f8f9fa;
}

.contact-form-header h3 {
    font-size: 28px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 15px;
}

.contact-form-header p {
    color: #7f8c8d;
    font-size: 16px;
    margin: 0;
}

.contact-form .form-group {
    margin-bottom: 25px;
}

.contact-form label {
    display: block;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 8px;
    font-size: 14px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 15px 20px;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    font-size: 16px;
    color: #2c3e50;
    background: #fff;
    transition: all 0.3s ease;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
    transform: translateY(-2px);
}

.contact-form textarea {
    resize: vertical;
    min-height: 120px;
}

.checkbox-group {
    margin-bottom: 30px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: #2c3e50;
    position: relative;
    padding-left: 35px;
}

.checkbox-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkmark {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 20px;
    width: 20px;
    background-color: #fff;
    border: 2px solid #e9ecef;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.checkbox-label:hover .checkmark {
    border-color: #3498db;
}

.checkbox-label input:checked ~ .checkmark {
    background-color: #3498db;
    border-color: #3498db;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-label input:checked ~ .checkmark:after {
    display: block;
}

/*-------------------------contact-form end-------------------------*/

/*-------------------------contact-info start-------------------------*/
.contact-info-wrapper {
    background: #f8f9fa;
    border-radius: 20px;
    padding: 40px 30px;
    height: 100%;
}

.contact-info-header {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 2px solid #e9ecef;
}

.contact-info-header h3 {
    font-size: 24px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 10px;
}

.contact-info-header p {
    color: #7f8c8d;
    font-size: 14px;
    margin: 0;
}

.contact-info-cards {
    margin-bottom: 40px;
}

.contact-info-card {
    background: #fff;
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(52, 152, 219, 0.1);
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.contact-info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(52, 152, 219, 0.1);
}

.contact-info-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #3498db, #2980b9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.contact-info-card:hover .contact-info-icon {
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
}

.contact-info-content h4 {
    font-size: 18px;
    font-weight: 700;
    color: #2c3e50;
    margin: 0 0 8px 0;
}

.contact-info-content p {
    color: #7f8c8d;
    margin: 0 0 10px 0;
    font-size: 14px;
}

.contact-link {
    color: #3498db;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.contact-link:hover {
    color: #2980b9;
    text-decoration: underline;
}

.contact-note {
    font-size: 12px;
    color: #95a5a6;
    font-style: italic;
}

.contact-social {
    text-align: center;
    padding-top: 30px;
    border-top: 2px solid #e9ecef;
}

.contact-social h4 {
    font-size: 18px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 20px;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.social-link {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    transition: all 0.3s ease;
}

.social-link.facebook {
    background: #3b5998;
}

.social-link.instagram {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.social-link.twitter {
    background: #1da1f2;
}

.social-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/*-------------------------contact-info end-------------------------*/

/*-------------------------about-content start-------------------------*/
.about-content {
    padding: 20px 0;
}

.about-text h3 {
    font-size: 28px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 20px;
}

.about-text p {
    color: #7f8c8d;
    line-height: 1.8;
    margin-bottom: 20px;
    font-size: 16px;
}

.about-features {
    margin-top: 40px;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
    padding: 25px;
    background: #f8f9fa;
    border-radius: 15px;
    transition: all 0.3s ease;
}

.feature-item:hover {
    transform: translateX(10px);
    box-shadow: 0 10px 25px rgba(52, 152, 219, 0.1);
    background: #fff;
}

.feature-item i {
    color: #3498db;
    font-size: 24px;
    margin-right: 20px;
    margin-top: 5px;
    width: 30px;
}

.feature-item h4 {
    font-size: 18px;
    font-weight: 700;
    color: #2c3e50;
    margin: 0 0 8px 0;
}

.feature-item p {
    color: #7f8c8d;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

.about-image-wrapper {
    position: relative;
}

.about-image {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.about-image img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.about-image:hover img {
    transform: scale(1.05);
}

.about-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    padding: 30px;
    color: #fff;
}

.about-stats {
    display: flex;
    justify-content: space-around;
    text-align: center;
}

.about-stats .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about-stats .stat-number {
    font-size: 32px;
    font-weight: 800;
    color: #3498db;
    line-height: 1;
    margin-bottom: 5px;
}

.about-stats .stat-label {
    font-size: 14px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/*-------------------------about-content end-------------------------*/

/*-------------------------mission-content start-------------------------*/
.mission-image-wrapper {
    position: relative;
}

.mission-image {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.mission-image img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.mission-image:hover img {
    transform: scale(1.05);
}

.mission-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.8), rgba(155, 89, 182, 0.6));
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
}

.mission-image:hover .mission-overlay {
    opacity: 1;
}

.mission-quote {
    text-align: center;
    color: #fff;
    padding: 30px;
}

.mission-quote i {
    font-size: 48px;
    margin-bottom: 20px;
    opacity: 0.8;
}

.mission-quote p {
    font-size: 24px;
    font-weight: 300;
    font-style: italic;
    margin: 0;
    line-height: 1.4;
}

.mission-content h3 {
    font-size: 28px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 20px;
}

.mission-content p {
    color: #7f8c8d;
    line-height: 1.8;
    margin-bottom: 30px;
    font-size: 16px;
}

.mission-commitments {
    margin-top: 30px;
}

.commitment-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
    padding: 20px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.commitment-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(52, 152, 219, 0.1);
}

.commitment-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #3498db, #2980b9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    margin-right: 20px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.commitment-item:hover .commitment-icon {
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
}

.commitment-content h4 {
    font-size: 18px;
    font-weight: 700;
    color: #2c3e50;
    margin: 0 0 8px 0;
}

.commitment-content p {
    color: #7f8c8d;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

/*-------------------------mission-content end-------------------------*/

/*-------------------------value-cards start-------------------------*/
.value-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(52, 152, 219, 0.1);
    transition: all 0.3s ease;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.value-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(52, 152, 219, 0.1), transparent);
    transition: left 0.5s ease;
}

.value-card:hover::before {
    left: 100%;
}

.value-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(52, 152, 219, 0.2);
}

.value-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #3498db, #2980b9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    color: #fff;
    font-size: 32px;
    transition: all 0.3s ease;
}

.value-card:hover .value-icon {
    transform: scale(1.1);
    box-shadow: 0 10px 20px rgba(52, 152, 219, 0.3);
}

.value-content h3 {
    font-size: 24px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 15px;
}

.value-content p {
    color: #7f8c8d;
    line-height: 1.6;
    margin-bottom: 25px;
    font-size: 14px;
}

.value-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.value-feature {
    background: rgba(52, 152, 219, 0.1);
    color: #3498db;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/*-------------------------value-cards end-------------------------*/

/*-------------------------mariage-content start-------------------------*/
.mariage-content-wrapper {
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(52, 152, 219, 0.1);
    margin-bottom: 30px;
}

.mariage-approach {
    margin-bottom: 50px;
    padding-bottom: 40px;
    border-bottom: 2px solid #f8f9fa;
}

.mariage-approach h3 {
    font-size: 28px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 20px;
}

.mariage-approach p {
    color: #7f8c8d;
    line-height: 1.8;
    margin-bottom: 30px;
    font-size: 16px;
}

.approach-features {
    display: flex;
    gap: 30px;
    margin-top: 30px;
}

.approach-item {
    flex: 1;
    text-align: center;
    padding: 30px 20px;
    background: #f8f9fa;
    border-radius: 15px;
    transition: all 0.3s ease;
}

.approach-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(52, 152, 219, 0.1);
    background: #fff;
}

.approach-item i {
    font-size: 48px;
    color: #3498db;
    margin-bottom: 20px;
}

.approach-item h4 {
    font-size: 20px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 10px;
}

.approach-item p {
    color: #7f8c8d;
    margin: 0;
    font-size: 14px;
}

.mariage-services h3 {
    font-size: 28px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 30px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

.service-item {
    display: flex;
    align-items: flex-start;
    padding: 25px;
    background: #f8f9fa;
    border-radius: 15px;
    transition: all 0.3s ease;
}

.service-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(52, 152, 219, 0.1);
    background: #fff;
}

.service-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #3498db, #2980b9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    margin-right: 20px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.service-item:hover .service-icon {
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
}

.service-content h4 {
    font-size: 18px;
    font-weight: 700;
    color: #2c3e50;
    margin: 0 0 8px 0;
}

.service-content p {
    color: #7f8c8d;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

/*-------------------------mariage-content end-------------------------*/

/*-------------------------mariage-sidebar start-------------------------*/
.mariage-sidebar {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.sidebar-card {
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(52, 152, 219, 0.1);
    transition: all 0.3s ease;
}

.sidebar-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(52, 152, 219, 0.15);
}

.sidebar-card h3 {
    font-size: 22px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 25px;
    text-align: center;
}

.why-choose-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.why-item {
    display: flex;
    align-items: center;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.why-item:hover {
    background: #e3f2fd;
    transform: translateX(5px);
}

.why-item i {
    color: #27ae60;
    font-size: 18px;
    margin-right: 15px;
}

.why-item span {
    color: #2c3e50;
    font-weight: 600;
    font-size: 14px;
}

.pricing-preview {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 25px;
}

.price-item {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 15px;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.price-item.featured {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: #fff;
    border-color: #3498db;
    transform: scale(1.05);
}

.price-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.2);
}

.price-item.featured:hover {
    transform: scale(1.05) translateY(-3px);
}

.price-item h4 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 10px 0;
}

.price-item.featured h4 {
    color: #fff;
}

.price-item .price {
    font-size: 24px;
    font-weight: 800;
    color: #3498db;
    margin-bottom: 10px;
}

.price-item.featured .price {
    color: #fff;
}

.price-item p {
    font-size: 12px;
    margin: 0;
    line-height: 1.4;
}

.price-item.featured p {
    color: rgba(255, 255, 255, 0.9);
}

.contact-quick {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 25px;
}

.contact-item {
    display: flex;
    align-items: center;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.contact-item:hover {
    background: #e3f2fd;
    transform: translateX(5px);
}

.contact-item i {
    color: #3498db;
    font-size: 20px;
    margin-right: 15px;
    width: 25px;
}

.contact-item strong {
    display: block;
    color: #2c3e50;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 5px;
}

.contact-item p {
    color: #7f8c8d;
    margin: 0;
    font-size: 13px;
}

/*-------------------------mariage-sidebar end-------------------------*/

/*-------------------------lifestyle-content start-------------------------*/
.lifestyle-content-wrapper {
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(52, 152, 219, 0.1);
    margin-bottom: 30px;
}

.lifestyle-approach {
    margin-bottom: 50px;
    padding-bottom: 40px;
    border-bottom: 2px solid #f8f9fa;
}

.lifestyle-approach h3 {
    font-size: 28px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 20px;
}

.lifestyle-approach p {
    color: #7f8c8d;
    line-height: 1.8;
    margin-bottom: 30px;
    font-size: 16px;
}

.approach-highlights {
    display: flex;
    gap: 30px;
    margin-top: 30px;
}

.highlight-item {
    flex: 1;
    text-align: center;
    padding: 30px 20px;
    background: #f8f9fa;
    border-radius: 15px;
    transition: all 0.3s ease;
}

.highlight-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(52, 152, 219, 0.1);
    background: #fff;
}

.highlight-item i {
    font-size: 48px;
    color: #3498db;
    margin-bottom: 20px;
}

.highlight-item h4 {
    font-size: 20px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 10px;
}

.highlight-item p {
    color: #7f8c8d;
    margin: 0;
    font-size: 14px;
}

.lifestyle-types {
    margin-bottom: 50px;
    padding-bottom: 40px;
    border-bottom: 2px solid #f8f9fa;
}

.lifestyle-types h3 {
    font-size: 28px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 30px;
}

.types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

.type-card {
    display: flex;
    align-items: flex-start;
    padding: 25px;
    background: #f8f9fa;
    border-radius: 15px;
    transition: all 0.3s ease;
}

.type-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(52, 152, 219, 0.1);
    background: #fff;
}

.type-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #3498db, #2980b9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    margin-right: 20px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.type-card:hover .type-icon {
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
}

.type-content h4 {
    font-size: 18px;
    font-weight: 700;
    color: #2c3e50;
    margin: 0 0 8px 0;
}

.type-content p {
    color: #7f8c8d;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

.lifestyle-locations h3 {
    font-size: 28px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 30px;
}

.locations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
}

.location-item {
    display: flex;
    align-items: flex-start;
    padding: 25px;
    background: #f8f9fa;
    border-radius: 15px;
    transition: all 0.3s ease;
}

.location-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(52, 152, 219, 0.1);
    background: #fff;
}

.location-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    margin-right: 20px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.location-item:hover .location-icon {
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3);
}

.location-content h4 {
    font-size: 18px;
    font-weight: 700;
    color: #2c3e50;
    margin: 0 0 8px 0;
}

.location-content p {
    color: #7f8c8d;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

/*-------------------------lifestyle-content end-------------------------*/

/*-------------------------lifestyle-sidebar start-------------------------*/
.lifestyle-sidebar {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.process-steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 25px;
}

.step-item {
    display: flex;
    align-items: flex-start;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 15px;
    transition: all 0.3s ease;
}

.step-item:hover {
    background: #e3f2fd;
    transform: translateX(5px);
}

.step-number {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #3498db, #2980b9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    margin-right: 20px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.step-item:hover .step-number {
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
}

.step-content h4 {
    font-size: 16px;
    font-weight: 700;
    color: #2c3e50;
    margin: 0 0 5px 0;
}

.step-content p {
    color: #7f8c8d;
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
}

.tips-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 25px;
}

.tip-item {
    display: flex;
    align-items: center;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.tip-item:hover {
    background: #e8f5e8;
    transform: translateX(5px);
}

.tip-item i {
    color: #27ae60;
    font-size: 18px;
    margin-right: 15px;
}

.tip-item span {
    color: #2c3e50;
    font-weight: 600;
    font-size: 14px;
}

/*-------------------------lifestyle-sidebar end-------------------------*/

/*-------------------------social-cards start-------------------------*/
.social-card {
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(52, 152, 219, 0.1);
    transition: all 0.3s ease;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}

.social-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(52, 152, 219, 0.1), transparent);
    transition: left 0.5s ease;
}

.social-card:hover::before {
    left: 100%;
}

.social-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(52, 152, 219, 0.2);
}

.social-card.facebook {
    border-left: 5px solid #3b5998;
}

.social-card.facebook-alt {
    border-left: 5px solid #3b5998;
}

.social-card.instagram {
    border-left: 5px solid #e4405f;
}

.social-card.newsletter {
    border-left: 5px solid #3498db;
}

.social-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 32px;
    margin-bottom: 25px;
    transition: all 0.3s ease;
}

.social-card.facebook .social-icon {
    background: linear-gradient(135deg, #3b5998, #2d4373);
}

.social-card.facebook-alt .social-icon {
    background: linear-gradient(135deg, #3b5998, #2d4373);
}

.social-card.instagram .social-icon {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.social-card.newsletter .social-icon {
    background: linear-gradient(135deg, #3498db, #2980b9);
}

.social-card:hover .social-icon {
    transform: scale(1.1);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.social-content h3 {
    font-size: 24px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 15px;
}

.social-content p {
    color: #7f8c8d;
    line-height: 1.6;
    margin-bottom: 20px;
    font-size: 14px;
}

.social-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
}

.social-stats span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #7f8c8d;
    font-weight: 600;
}

.social-stats i {
    color: #3498db;
}

.btn-social {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: #fff;
    text-decoration: none;
    border-radius: 25px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn-social::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.btn-social:hover::before {
    left: 100%;
}

.btn-social:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(52, 152, 219, 0.3);
}

.social-card.facebook .btn-social {
    background: linear-gradient(135deg, #3b5998, #2d4373);
}

.social-card.instagram .btn-social {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.social-card.newsletter .btn-social {
    background: linear-gradient(135deg, #3498db, #2980b9);
}

/*-------------------------social-cards end-------------------------*/

/*-------------------------news-cards start-------------------------*/
.news-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(52, 152, 219, 0.1);
    transition: all 0.3s ease;
    margin-bottom: 30px;
    position: relative;
}

.news-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(52, 152, 219, 0.2);
}

.news-image {
    position: relative;
    overflow: hidden;
    height: 250px;
}

.news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.news-card:hover .news-image img {
    transform: scale(1.1);
}

.news-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.9), rgba(155, 89, 182, 0.8));
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
}

.news-card:hover .news-overlay {
    opacity: 1;
}

.news-link {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    font-size: 24px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.news-link:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.news-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.news-content {
    padding: 30px;
}

.news-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
    font-size: 14px;
    color: #7f8c8d;
}

.news-meta span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.news-meta i {
    color: #3498db;
}

.news-content h3 {
    font-size: 22px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 15px;
    line-height: 1.3;
}

.news-content h3 a {
    color: #2c3e50;
    text-decoration: none;
    transition: color 0.3s ease;
}

.news-content h3 a:hover {
    color: #3498db;
}

.news-content p {
    color: #7f8c8d;
    line-height: 1.6;
    margin-bottom: 20px;
    font-size: 14px;
}

/*-------------------------news-cards end-------------------------*/

/*-------------------------prestations-content start-------------------------*/
.prestations-content-area {
    background: #f8f9fa;
}

.prestations-image-wrapper {
    position: relative;
}

.prestations-image {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.prestations-image img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.prestations-image:hover img {
    transform: scale(1.05);
}

.image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    padding: 30px;
    color: #fff;
}

.overlay-content h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
}

.overlay-content p {
    font-size: 16px;
    margin: 0;
    opacity: 0.9;
}

.prestations-content {
    padding: 20px 0;
}

.prestations-content h3 {
    font-size: 28px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 20px;
}

.prestations-content p {
    color: #7f8c8d;
    line-height: 1.8;
    margin-bottom: 20px;
    font-size: 16px;
}

.prestations-features {
    margin-top: 40px;
}

.prestations-features .feature-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
    padding: 25px;
    background: #fff;
    border-radius: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.prestations-features .feature-item:hover {
    transform: translateX(10px);
    box-shadow: 0 10px 25px rgba(52, 152, 219, 0.1);
}

.prestations-features .feature-item i {
    color: #3498db;
    font-size: 24px;
    margin-right: 20px;
    margin-top: 5px;
    width: 30px;
}

.prestations-features .feature-item h4 {
    font-size: 18px;
    font-weight: 700;
    color: #2c3e50;
    margin: 0 0 8px 0;
}

.prestations-features .feature-item p {
    color: #7f8c8d;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

/*-------------------------prestations-content end-------------------------*/

/*-------------------------services-grid start-------------------------*/
.services-grid-area {
    background: #f8f9fa;
}

.service-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(52, 152, 219, 0.1);
    transition: all 0.3s ease;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(52, 152, 219, 0.1), transparent);
    transition: left 0.5s ease;
}

.service-card:hover::before {
    left: 100%;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(52, 152, 219, 0.2);
}

.service-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #3498db, #2980b9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 32px;
    margin: 0 auto 25px;
    transition: all 0.3s ease;
}

.service-card:hover .service-icon {
    transform: scale(1.1);
    box-shadow: 0 10px 20px rgba(52, 152, 219, 0.3);
}

.service-content h3 {
    font-size: 24px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 15px;
    text-align: center;
}

.service-content p {
    color: #7f8c8d;
    line-height: 1.6;
    margin-bottom: 25px;
    font-size: 14px;
    text-align: center;
}

.service-features {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}

.service-features li {
    display: flex;
    align-items: center;
    padding: 8px 0;
    color: #2c3e50;
    font-size: 14px;
}

.service-features li i {
    color: #27ae60;
    margin-right: 12px;
    font-size: 16px;
    width: 20px;
}

.service-content .btn {
    width: 100%;
    justify-content: center;
}

/*-------------------------services-grid end-------------------------*/

/*-------------------------team-cards start-------------------------*/
.team-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(52, 152, 219, 0.1);
    transition: all 0.3s ease;
    margin-bottom: 30px;
    position: relative;
}

.team-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(52, 152, 219, 0.2);
}

.team-image {
    position: relative;
    overflow: hidden;
    height: 300px;
}

.team-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.team-card:hover .team-image img {
    transform: scale(1.1);
}

.team-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.9), rgba(155, 89, 182, 0.8));
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
}

.team-card:hover .team-overlay {
    opacity: 1;
}

.team-social {
    display: flex;
    gap: 15px;
}

.team-social a {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.team-social a:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.team-content {
    padding: 30px;
    text-align: center;
}

.team-content h3 {
    font-size: 24px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 10px;
}

.team-content p {
    color: #7f8c8d;
    font-size: 16px;
    margin-bottom: 20px;
}

.team-specialties {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.specialty {
    background: rgba(52, 152, 219, 0.1);
    color: #3498db;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/*-------------------------team-cards end-------------------------*/

/*-------------------------faq-section start-------------------------*/
.faq-section {
    background: transparent;
}

.faq-accordion {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: rgba(45, 55, 72, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    margin-bottom: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    box-shadow: 0 10px 25px rgba(52, 152, 219, 0.15);
    transform: translateY(-2px);
}

.faq-question {
    padding: 25px 30px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.05);
}

.faq-question:hover {
    background: rgba(255, 255, 255, 0.1);
}

.faq-question h4 {
    font-size: 18px;
    font-weight: 700;
    color: #2c3e50;
    margin: 0;
    flex: 1;
    padding-right: 20px;
}

.faq-question i {
    color: #3498db;
    font-size: 20px;
    transition: all 0.3s ease;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(52, 152, 219, 0.1);
    border-radius: 50%;
}

.faq-item.active .faq-question i {
    transform: rotate(45deg);
    background: #3498db;
    color: #fff;
}

.faq-answer {
    padding: 0 30px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.02);
}

.faq-item.active .faq-answer {
    padding: 0 30px 30px;
    max-height: 500px;
}

.faq-answer p {
    color: #7f8c8d;
    line-height: 1.8;
    margin-bottom: 15px;
    font-size: 15px;
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

.faq-answer strong {
    color: #2c3e50;
    font-weight: 700;
}

/*-------------------------faq-section end-------------------------*/

/*-------------------------client-testimonials start-------------------------*/
.client-testimonials-area {
    background: #f8f9fa;
}

.testimonial-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(52, 152, 219, 0.1);
    transition: all 0.3s ease;
    margin-bottom: 30px;
    position: relative;
    height: 100%;
}

.testimonial-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(52, 152, 219, 0.2);
}

.testimonial-content {
    margin-bottom: 30px;
    position: relative;
}

.quote-icon {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #3498db, #2980b9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
}

.testimonial-content p {
    color: #7f8c8d;
    line-height: 1.8;
    font-size: 16px;
    font-style: italic;
    margin: 0;
    padding-left: 20px;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 20px;
}

.author-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.author-info h4 {
    font-size: 18px;
    font-weight: 700;
    color: #2c3e50;
    margin: 0 0 5px 0;
}

.author-info span {
    color: #7f8c8d;
    font-size: 14px;
    margin-bottom: 10px;
    display: block;
}

.rating {
    display: flex;
    gap: 3px;
}

.rating i {
    color: #f39c12;
    font-size: 14px;
}

/*-------------------------client-testimonials end-------------------------*/

/*-------------------------process-section start-------------------------*/
.process-section {
    background: #f8f9fa;
}

.process-step {
    text-align: center;
    padding: 40px 20px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(52, 152, 219, 0.1);
    transition: all 0.3s ease;
    margin-bottom: 30px;
    position: relative;
    height: 100%;
}

.process-step:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(52, 152, 219, 0.2);
}

.step-number {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #3498db, #2980b9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    margin: 0 auto 30px;
    transition: all 0.3s ease;
}

.process-step:hover .step-number {
    transform: scale(1.1);
    box-shadow: 0 10px 20px rgba(52, 152, 219, 0.3);
}

.step-content h3 {
    font-size: 24px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 20px;
}

.step-content p {
    color: #7f8c8d;
    line-height: 1.8;
    font-size: 15px;
    margin: 0;
}

/*-------------------------process-section end-------------------------*/

/*-------------------------responsive design start-------------------------*/
@media (max-width: 1200px) {
    .hero-title {
        font-size: 48px;
    }
    
    .hero-subtitle {
        font-size: 20px;
    }
    
    .section-title {
        font-size: 36px;
    }
}

@media (max-width: 992px) {
    .hero-title {
        font-size: 42px;
    }
    
    .hero-subtitle {
        font-size: 18px;
    }
    
    .section-title {
        font-size: 32px;
    }
    
    .main-menu {
        gap: 20px;
    }
    
    .main-menu li a {
        font-size: 14px;
    }
    
    .approach-features,
    .approach-highlights {
        flex-direction: column;
        gap: 20px;
    }
    
    .types-grid,
    .locations-grid {
        grid-template-columns: 1fr;
    }
    
    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 36px;
    }
    
    .hero-subtitle {
        font-size: 16px;
    }
    
    .section-title {
        font-size: 28px;
    }
    
    .hero-stats {
        flex-direction: column;
        gap: 20px;
    }
    
    .main-menu {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: block;
    }
    
    .header-actions {
        display: none;
    }
    
    .hero-buttons {
        flex-direction: column;
        gap: 15px;
    }
    
    .btn {
        width: 100%;
        justify-content: center;
    }
    
    .gallery-filter {
        flex-direction: column;
        align-items: center;
    }
    
    .filter-btn {
        width: 100%;
        max-width: 300px;
    }
    
    .pricing-preview {
        flex-direction: column;
    }
    
    .price-item.featured {
        transform: none;
    }
    
    .price-item.featured:hover {
        transform: translateY(-3px);
    }
    
    .social-stats {
        flex-direction: column;
        gap: 10px;
    }
    
    .news-meta {
        flex-direction: column;
        gap: 10px;
    }
    
    .process-steps {
        gap: 15px;
    }
    
    .step-item {
        flex-direction: column;
        text-align: center;
    }
    
    .step-number {
        margin: 0 auto 15px;
    }
    
    .team-specialties {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 28px;
    }
    
    .hero-subtitle {
        font-size: 14px;
    }
    
    .section-title {
        font-size: 24px;
    }
    
    .hero-badge {
        padding: 8px 16px;
        font-size: 12px;
    }
    
    .section-badge {
        padding: 6px 12px;
        font-size: 12px;
    }
    
    .btn {
        padding: 12px 20px;
        font-size: 14px;
    }
    
    .btn-lg {
        padding: 15px 25px;
        font-size: 16px;
    }
    
    .card,
    .service-card,
    .team-card,
    .news-card,
    .social-card {
        padding: 20px;
    }
    
    .gallery-card-img,
    .news-image,
    .team-image {
        height: 200px;
    }
    
    .pricing-card-header {
        padding: 30px 20px;
    }
    
    .pricing-price .amount {
        font-size: 36px;
    }
    
    .contact-form-wrapper,
    .contact-info-wrapper {
        padding: 25px;
    }
    
    .sidebar-card {
        padding: 20px;
    }
    
    .why-choose-list,
    .tips-list {
        gap: 10px;
    }
    
    .why-item,
    .tip-item {
        padding: 12px;
    }
    
    .step-item {
        padding: 15px;
    }
    
    .team-social {
        gap: 10px;
    }
    
    .team-social a {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}

/*-------------------------responsive design end-------------------------*/

/*-------------------------custom cursor start-------------------------*/
/* Curseur personnalisé amélioré - TOUJOURS VISIBLE */
.custom-cursor {
    position: fixed !important;
    width: 12px !important;
    height: 12px !important;
    background: linear-gradient(135deg, #D4AF37, #B8941F) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    z-index: 9999999 !important; /* Au-dessus de tout, même des modales */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.8) !important;
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
    transform: translate(-50%, -50%) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    mix-blend-mode: normal !important;
}

.custom-cursor.hover {
    width: 50px !important;
    height: 50px !important;
    background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
    box-shadow: 0 0 30px rgba(231, 76, 60, 0.8) !important;
    border: 3px solid rgba(255, 255, 255, 0.9) !important;
}

.custom-cursor.click {
    width: 8px !important;
    height: 8px !important;
    background: linear-gradient(135deg, #f39c12, #e67e22) !important;
    box-shadow: 0 0 25px rgba(243, 156, 18, 0.9) !important;
    border: 2px solid rgba(255, 255, 255, 1) !important;
}

.cursor-follower {
    position: fixed !important;
    width: 30px !important;
    height: 30px !important;
    border: 2px solid rgba(212, 175, 55, 0.6) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    z-index: 9999998 !important; /* Juste en dessous du curseur principal */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: translate(-50%, -50%) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    mix-blend-mode: normal !important;
}

.cursor-follower.hover {
    width: 60px !important;
    height: 60px !important;
    border-color: rgba(231, 76, 60, 0.6) !important;
    box-shadow: 0 0 20px rgba(231, 76, 60, 0.3) !important;
}

.cursor-follower.click {
    width: 25px !important;
    height: 25px !important;
    border-color: rgba(243, 156, 18, 0.6) !important;
    box-shadow: 0 0 15px rgba(243, 156, 18, 0.4) !important;
}

/* Masquer le curseur par défaut */
* {
    cursor: none !important;
}

/* Curseur visible sur les éléments interactifs */
a, button, .btn, input, textarea, select, [role="button"], [tabindex] {
    cursor: none !important;
}

/* S'assurer que le curseur est visible sur tous les fonds */
.custom-cursor,
.cursor-follower {
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.8)) !important;
    backdrop-filter: none !important;
}

/* Curseur visible sur les sections sombres */
.section-bg-primary .custom-cursor,
.section-bg-content .custom-cursor,
.section-bg-contact .custom-cursor,
.artbook-section .custom-cursor,
.artbook-item .custom-cursor {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Curseur visible sur mobile */
@media (max-width: 768px) {
    .custom-cursor,
    .cursor-follower {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* Forcer la visibilité du curseur sur tous les éléments */
.custom-cursor,
.cursor-follower {
    position: fixed !important;
    z-index: 9999999 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    pointer-events: none !important;
}

/* Curseur visible même sur les overlays et modales */
.modal .custom-cursor,
.overlay .custom-cursor,
.popup .custom-cursor,
.lightbox .custom-cursor {
    z-index: 9999999 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Forcer le curseur au-dessus de TOUS les éléments */
.custom-cursor {
    z-index: 9999999 !important;
    position: fixed !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    pointer-events: none !important;
}

.cursor-follower {
    z-index: 9999998 !important;
    position: fixed !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    pointer-events: none !important;
}

/* S'assurer que le curseur n'est jamais masqué */
* {
    cursor: none !important;
}

/* Exception pour les éléments qui pourraient masquer le curseur */
.custom-cursor,
.cursor-follower {
    cursor: none !important;
}

/* ========== PLEINE LARGEUR ========== */

/* Container pleine largeur */
.container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 20px !important;
}

/* Sections pleine largeur */
section {
    width: 100% !important;
    max-width: 100% !important;
}

/* Row pleine largeur */
.row {
    margin: 0 !important;
    width: 100% !important;
}

/* Colonnes pleine largeur */
.col-md-12, .col-md-6, .col-md-4, .col-md-3 {
    padding: 0 10px !important;
}

/* Header pleine largeur */
.header-area {
    width: 100% !important;
    max-width: 100% !important;
}

/* Footer pleine largeur */
.footer-area {
    width: 100% !important;
    max-width: 100% !important;
}

/* Backgrounds de sections pleine largeur */
.section-bg-primary,
.section-bg-content,
.section-bg-contact {
    width: 100% !important;
    max-width: 100% !important;
    margin: 40px 0 !important;
    padding: 60px 40px !important;
}

/* ========== PRESTATIONS MODERNES ========== */

/* Section prestations */
.prestations-section {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(20, 20, 20, 0.9) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    margin: 60px 0;
    padding: 60px 40px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
}

.prestations-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 20%, rgba(212, 175, 55, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 70% 80%, rgba(44, 62, 80, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.prestations-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
}

.prestations-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 20px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.prestations-subtitle {
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    color: #bdc3c7;
    text-align: center;
    max-width: 600px;
    margin: 0 auto 50px auto;
    line-height: 1.6;
}

/* Grille des prestations */
.prestations-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 30px;
    width: 100% !important;
    max-width: 100% !important;
}

.prestations-grid-small {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    width: 100% !important;
    max-width: 100% !important;
}

/* Cartes de prestations */
.prestation-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    cursor: pointer;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    min-height: 400px;
}

.prestation-card:hover {
    transform: translateY(-10px);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
}

.prestation-card.large {
    grid-column: span 1;
}

.prestation-card.portrait {
    grid-column: span 1;
    grid-row: span 2;
}

.prestation-card.small {
    grid-column: span 1;
}

/* Badge de prestation */
.prestation-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 3;
}

.prestation-badge-icon {
    font-size: 1.1rem;
    color: #D4AF37;
}

.prestation-badge-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Image de prestation */
.prestation-image {
    width: 100%;
    height: 300px;
    background: linear-gradient(135deg, #1a1a1a, #2c2c2c);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px 20px 0 0;
}

.prestation-image.large {
    height: 350px;
}

.prestation-image.small {
    height: 250px;
}

.prestation-image.portrait {
    height: 500px;
}

.prestation-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.prestation-card:hover .prestation-image img {
    transform: scale(1.05);
}

/* Contenu de la carte */
.prestation-content {
    padding: 30px;
    position: relative;
    z-index: 2;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 0 0 20px 20px;
}

.prestation-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 15px;
    line-height: 1.3;
    text-align: center;
}

.prestation-title.small {
    font-size: 1.1rem;
}

.prestation-description {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9rem;
    color: #bdc3c7;
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: center;
}

.prestation-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 25px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    backdrop-filter: blur(10px);
    width: 100%;
}

.prestation-button:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2));
    border-color: rgba(255, 255, 255, 0.5);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Responsive */
@media (max-width: 1200px) {
    .prestations-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .prestations-grid-small {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .prestations-section {
        padding: 40px 20px;
        margin: 40px 0;
    }
    
    .prestations-title {
        font-size: 2.5rem;
    }
    
    .prestations-grid-small {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .prestation-content {
        padding: 20px;
    }
    
    .prestation-title {
        font-size: 1.2rem;
    }
    
    .prestation-title.small {
        font-size: 1rem;
    }
}

/*-------------------------custom cursor end-------------------------*/

/* ========== SECTION CONTACT MODERNE ========== */

/* Section contact principale */
.contact-section {
    padding: 60px 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-radius: 30px;
    margin: 60px 0;
    overflow: hidden;
    position: relative;
}

/* En-tête de contact */
.contact-header {
    text-align: center;
    margin-bottom: 50px;
    padding: 0 20px;
}

.contact-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 20px;
    line-height: 1.2;
}

.contact-highlight {
    color: #D4AF37;
    position: relative;
}

.contact-subtitle {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.1rem;
    color: #bdc3c7;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Bloc principal de contact */
.contact-block {
    background: linear-gradient(135deg, rgba(44, 62, 80, 0.8) 0%, rgba(26, 26, 26, 0.9) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px;
    margin: 0 20px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Images de studio */
.contact-images {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.studio-collage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

.studio-image {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.studio-image:hover {
    transform: scale(1.05);
}

.studio-image img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
}

.studio-credit {
    font-size: 0.85rem;
    color: #bdc3c7;
    text-align: center;
    font-style: italic;
}

/* Contenu de contact */
.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

/* Informations de contact */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.contact-info-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.contact-item:hover {
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(212, 175, 55, 0.3);
}

.contact-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #D4AF37, #B8941F);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-icon i {
    color: #1a1a1a;
    font-size: 1.1rem;
}

.contact-details {
    flex: 1;
}

.contact-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: #D4AF37;
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.contact-value {
    color: #ffffff;
    font-size: 0.95rem;
    line-height: 1.4;
}

/* Réseaux sociaux */
.contact-social {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    justify-content: center;
}

.social-icon {
    width: 45px;
    height: 45px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #D4AF37;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-icon:hover {
    background: #D4AF37;
    color: #1a1a1a;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.3);
}

/* Formulaire de contact */
.contact-form {
    background: rgba(0, 0, 0, 0.2);
    padding: 30px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-form-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 25px;
}

.form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: #ffffff;
    font-size: 0.9rem;
}

.required {
    color: #D4AF37;
}

.form-group input,
.form-group textarea {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 12px 15px;
    color: #ffffff;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    font-family: 'Open Sans', sans-serif;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #D4AF37;
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #bdc3c7;
}

.form-help {
    font-size: 0.8rem;
    color: #bdc3c7;
    margin-top: 5px;
}

.btn-submit {
    background: linear-gradient(135deg, #D4AF37, #B8941F);
    color: #1a1a1a;
    border: none;
    border-radius: 25px;
    padding: 15px 30px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.btn-submit:hover {
    background: linear-gradient(135deg, #B8941F, #D4AF37);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
}

/* Responsive */
@media (max-width: 1024px) {
    .contact-block {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .contact-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .contact-section {
        margin: 30px 0;
        padding: 40px 0;
    }
    
    .contact-title {
        font-size: 2rem;
    }
    
    .contact-block {
        margin: 0 10px;
        padding: 25px;
    }
    
    .studio-collage {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    
    .studio-image img {
        height: 100px;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .contact-social {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .contact-title {
        font-size: 1.8rem;
    }
    
    .contact-subtitle {
        font-size: 1rem;
    }
    
    .contact-block {
        padding: 20px;
    }
    
    .contact-item {
        padding: 15px;
    }
    
    .contact-form {
        padding: 20px;
    }
}

/*-------------------------modern theme start-------------------------*/
/* Modern Theme Variables - Palette Sombre Artbook */
:root {
    --primary-color: #1a1a1a;        /* Noir profond et élégant */
    --secondary-color: #2c3e50;      /* Bleu marine sombre */
    --accent-color: #D4AF37;         /* Or classique et sophistiqué */
    --accent-hover: #B8941F;         /* Or foncé au survol */
    --accent-secondary: #34495e;     /* Bleu marine plus clair */
    --text-primary: #ecf0f1;         /* Blanc cassé pour le texte principal */
    --text-secondary: #bdc3c7;       /* Gris clair pour le texte secondaire */
    --text-light: #ffffff;           /* Blanc pur pour les textes clairs */
    --bg-primary: #1a1a1a;           /* Noir profond */
    --bg-secondary: #2c3e50;         /* Bleu marine pour les cartes */
    --bg-dark: #0f0f0f;              /* Noir très profond */
    --bg-accent: rgba(212, 175, 55, 0.1); /* Accent doré subtil */
    --border-color: rgba(212, 175, 55, 0.2); /* Bordure dorée */
    --border-accent: rgba(212, 175, 55, 0.4); /* Bordure dorée accent */
    --shadow-light: 0 2px 8px rgba(0,0,0,0.3);    /* Ombre sombre */
    --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-heavy: 0 8px 24px rgba(0, 0, 0, 0.5);
    --radius: 12px;                  /* Rayon des bordures plus doux */
    --gap: 16px;                     /* Espacement harmonieux */
}

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap');

/* ========== FONDS AMÉLIORÉS ========== */

/* Fond pour les sections principales */
.section-bg-primary {
	background: linear-gradient(135deg, rgba(26, 26, 26, 0.95) 0%, rgba(44, 62, 80, 0.9) 100%);
	position: relative;
	overflow: hidden;
}

.section-bg-primary::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: 
		radial-gradient(circle at 10% 20%, rgba(212, 175, 55, 0.08) 0%, transparent 30%),
		radial-gradient(circle at 90% 80%, rgba(44, 62, 80, 0.06) 0%, transparent 30%);
	pointer-events: none;
	z-index: 0;
}

/* Fond pour les sections avec contenu */
.section-bg-content {
	background: linear-gradient(135deg, rgba(44, 62, 80, 0.95) 0%, rgba(26, 26, 26, 0.9) 100%);
	position: relative;
	overflow: hidden;
}

.section-bg-content::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: 
		linear-gradient(45deg, transparent 48%, rgba(212, 175, 55, 0.03) 49%, rgba(212, 175, 55, 0.03) 51%, transparent 52%),
		linear-gradient(-45deg, transparent 48%, rgba(44, 62, 80, 0.02) 49%, rgba(44, 62, 80, 0.02) 51%, transparent 52%);
	background-size: 60px 60px, 60px 60px;
	pointer-events: none;
	z-index: 0;
}

/* Fond pour les sections de contact */
.section-bg-contact {
	background: linear-gradient(135deg, rgba(26, 26, 26, 0.95) 0%, rgba(44, 62, 80, 0.9) 100%);
	position: relative;
	overflow: hidden;
}

.section-bg-contact::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: 
		radial-gradient(circle at 25% 25%, rgba(212, 175, 55, 0.08) 0%, transparent 40%),
		radial-gradient(circle at 75% 75%, rgba(44, 62, 80, 0.06) 0%, transparent 40%);
	pointer-events: none;
	z-index: 0;
}

/* Assurer que le contenu soit au-dessus des fonds */
.section-bg-primary > *,
.section-bg-content > *,
.section-bg-contact > * {
	position: relative;
	z-index: 1;
}

/* ========== HEADER AMÉLIORÉ ========== */

/* Header avec fond moderne sombre */
.header-area {
	background: linear-gradient(135deg, rgba(26, 26, 26, 0.95) 0%, rgba(44, 62, 80, 0.9) 100%);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(212, 175, 55, 0.2);
	position: relative;
	z-index: 1000;
}

.header-area::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: 
		radial-gradient(circle at 20% 50%, rgba(212, 175, 55, 0.08) 0%, transparent 40%),
		radial-gradient(circle at 80% 50%, rgba(44, 62, 80, 0.06) 0%, transparent 40%);
	pointer-events: none;
	z-index: -1;
}

/* ========== FOOTER AMÉLIORÉ ========== */

/* Footer avec fond moderne */
.footer-area {
	background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
	position: relative;
	overflow: hidden;
}

.footer-area::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: 
		radial-gradient(circle at 30% 20%, rgba(212, 175, 55, 0.1) 0%, transparent 50%),
		radial-gradient(circle at 70% 80%, rgba(212, 175, 55, 0.05) 0%, transparent 50%);
	pointer-events: none;
	z-index: 0;
}

.footer-area > * {
	position: relative;
	z-index: 1;
}

/* ========== CENTRAGE ET ALIGNEMENT ========== */

/* Centrage parfait des sections */
.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-header .section-badge {
    display: inline-block;
    margin-bottom: 15px;
}

.section-header .section-title {
    margin-bottom: 15px;
    text-align: center;
}

.section-header .section-subtitle {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

/* Centrage des grilles */
.artbook-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    justify-items: center;
    align-items: start;
}

/* Centrage des cartes */
.artbook-item {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

/* Centrage des boutons */
.btn-center {
    display: block;
    margin: 0 auto;
    text-align: center;
}

/* Boutons dans les cartes */
.artbook-item .btn {
    display: inline-block;
    margin: 15px auto 0 auto;
    text-align: center;
}

/* Centrage des listes */
.artbook-item ul {
    text-align: left;
    margin: 15px auto;
    max-width: 300px;
}

.artbook-item li {
    text-align: left;
}

/* Centrage des contenus dans les colonnes */
.col-md-6, .col-md-4, .col-md-3, .col-md-12 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Centrage des textes */
.text-center {
    text-align: center !important;
}

/* Centrage des éléments flex */
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ========== DESIGN MODERNE ARTBOOK PHOTOGRAPHY ========== */

/* Cartes modernes Artbook */
.artbook-card {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 12px;
    text-align: left;
    border-radius: var(--radius);
    border: 2px solid var(--border-color);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-light);
    cursor: pointer;
    position: relative;
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.artbook-card:hover { 
    transform: translateY(-2px); 
    border-color: #dcdcdc; 
    box-shadow: var(--shadow-medium);
}

.artbook-card.is-active { 
    border-color: var(--accent-color); 
    background: var(--bg-primary); 
}

/* Image des cartes */
.artbook-card__img {
    width: 88px; 
    height: 88px;
    border-radius: 10px; 
    overflow: hidden; 
    background: #fafafa;
    display: grid; 
    place-items: center;
}

.artbook-card__img img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

/* Texte des cartes */
.artbook-card__title { 
    font-size: 15px; 
    font-weight: 600; 
    line-height: 1.2; 
    margin: 0 0 6px; 
    color: var(--text-primary);
}

.artbook-card__price { 
    font-weight: 700; 
    color: var(--accent-color);
}

/* Check visuel */
.artbook-card__check::after {
    content: "";
    width: 18px; 
    height: 18px;
    border-radius: 50%;
    border: 2px solid #bbb;
    position: absolute; 
    right: 12px; 
    top: 12px;
    background: #fff;
}

.artbook-card.is-active .artbook-card__check::after {
    border-color: var(--accent-color);
    background: radial-gradient(var(--accent-color) 55%, #fff 56%);
}

/* Skeleton pour le prix quand pas encore chargé */
.artbook-skel {
    display: inline-block; 
    width: 80px; 
    height: 14px; 
    border-radius: 6px; 
    background: linear-gradient(90deg, #eee, #f6f6f6, #eee);
    animation: artbookShimmer 1.2s infinite;
}

@keyframes artbookShimmer { 
    0% { background-position: -80px 0 } 
    100% { background-position: 80px 0 } 
}

/* Mobile : pile verticalement */
@media (max-width: 480px) {
    .artbook-card { 
        grid-template-columns: 70px 1fr; 
    }
    .artbook-card__img { 
        width: 70px; 
        height: 70px; 
    }
}

/* ========== SECTIONS MODERNES ARTBOOK ========== */

/* Section moderne Artbook */
.artbook-section {
    background: linear-gradient(135deg, rgba(44, 62, 80, 0.95) 0%, rgba(26, 26, 26, 0.9) 100%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: var(--radius);
    margin: 40px 0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    color: var(--text-light);
    width: 100% !important;
    max-width: 100% !important;
}

/* Header de section avec gradient doré */
.artbook-section-header {
    background: linear-gradient(45deg, var(--accent-color) 0%, var(--accent-hover) 100%);
    color: white;
    padding: 18px 25px;
    margin: 0;
    border: none;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 15px rgba(255, 171, 7, 0.2);
}

.artbook-section-header:hover {
    background: linear-gradient(45deg, var(--accent-hover) 0%, var(--accent-color) 100%);
    transform: translateY(-1px);
}

/* Texte du header */
.artbook-section-header .artbook-heading-text {
    color: white;
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Icône emoji avant le titre */
.artbook-section-header .artbook-heading-text::before {
    content: '📸';
    font-size: 1.2rem;
}

/* Grille des éléments */
.artbook-grid {
    padding: 25px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 25px;
    background: transparent;
    margin: 0 auto;
    width: 100% !important;
    max-width: 100% !important;
    justify-items: center;
    align-items: start;
}

/* Cartes individuelles */
.artbook-item {
    background: linear-gradient(135deg, rgba(44, 62, 80, 0.8) 0%, rgba(26, 26, 26, 0.9) 100%);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: var(--radius);
    padding: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    cursor: default;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    color: var(--text-light);
    text-align: center;
}

/* Effet shimmer subtil */
.artbook-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 171, 7, 0.08), transparent);
    transition: left 0.5s ease;
    z-index: 1;
}

/* Déclenchement du shimmer au survol */
.artbook-item:hover::before {
    left: 100%;
}

/* Effet survol de la carte */
.artbook-item:hover {
    background: linear-gradient(135deg, rgba(44, 62, 80, 0.9) 0%, rgba(26, 26, 26, 0.95) 100%);
    transform: translateY(-2px);
    border-color: var(--accent-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Titre des éléments */
.artbook-item h3 {
    color: var(--text-light);
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 15px 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: color 0.3s ease;
    line-height: 1.4;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    text-align: center;
}

/* Icône utilisateur */
.artbook-item h3::before {
    content: '👤';
    font-size: 1.1rem;
    background: rgba(212, 175, 55, 0.1);
    color: var(--accent-color);
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    transition: all 0.3s ease;
    flex-shrink: 0;
    border: 1px solid rgba(212, 175, 55, 0.2);
}

/* Effet survol de l'icône */
.artbook-item:hover h3::before {
    background: rgba(212, 175, 55, 0.2);
    border-color: rgba(212, 175, 55, 0.4);
    transform: scale(1.05);
}

/* Couleur du nom au survol */
.artbook-item:hover h3 {
    color: var(--accent-color);
}

/* Animations d'apparition */
.artbook-item {
    opacity: 0;
    animation: fadeInUp 0.5s ease forwards;
}

/* Délais d'animation */
.artbook-item:nth-child(1) { animation-delay: 0.1s; }
.artbook-item:nth-child(2) { animation-delay: 0.15s; }
.artbook-item:nth-child(3) { animation-delay: 0.2s; }
.artbook-item:nth-child(4) { animation-delay: 0.25s; }
.artbook-item:nth-child(5) { animation-delay: 0.3s; }
.artbook-item:nth-child(6) { animation-delay: 0.35s; }
.artbook-item:nth-child(n+7) { animation-delay: 0.4s; }

/* Keyframe pour l'animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== RESPONSIVE COMPLET ========== */

/* Desktop Large (1200px+) */
@media (min-width: 1200px) {
    .container {
        padding: 0 40px;
    }
    
    .artbook-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        padding: 40px;
    }
    
    .prestations-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
    
    .prestations-grid-small {
        grid-template-columns: repeat(4, 1fr);
        gap: 25px;
    }
    
    .prestations-title {
        font-size: 4rem;
    }
    
    .prestation-card.portrait {
        grid-row: span 2;
    }
}

/* Desktop (992px - 1199px) */
@media (max-width: 1199px) and (min-width: 992px) {
    .container {
        padding: 0 30px;
    }
    
    .artbook-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
        padding: 30px;
    }
    
    .prestations-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    
    .prestations-grid-small {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    
    .prestations-title {
        font-size: 3.2rem;
    }
}

/* Tablette (768px - 991px) */
@media (max-width: 991px) and (min-width: 768px) {
    .container {
        padding: 0 25px;
    }
    
    .artbook-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 25px;
    }
    
    .prestations-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    .prestations-grid-small {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .prestations-title {
        font-size: 2.8rem;
    }
    
    .prestation-card.portrait {
        grid-row: span 1;
    }
    
    .prestation-image.portrait {
        height: 350px;
    }
    
    .artbook-section-header {
        padding: 20px 25px;
    }
    
    .artbook-item {
        padding: 20px;
    }
}

/* Mobile Large (576px - 767px) */
@media (max-width: 767px) and (min-width: 576px) {
    .container {
        padding: 0 20px;
    }
    
    .artbook-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px;
    }
    
    .prestations-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .prestations-grid-small {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .prestations-title {
        font-size: 2.5rem;
    }
    
    .prestations-section {
        padding: 40px 20px;
        margin: 30px 0;
    }
    
    .prestation-image {
        height: 250px;
    }
    
    .prestation-image.large {
        height: 280px;
    }
    
    .prestation-image.portrait {
        height: 300px;
    }
    
    .prestation-content {
        padding: 20px;
    }
    
    .artbook-section-header {
        padding: 15px 20px;
    }
    
    .artbook-section-header .artbook-heading-text {
        font-size: 1.3rem;
    }
    
    .artbook-item {
        padding: 15px;
    }
    
    .artbook-item h3 {
        font-size: 1.1rem;
    }
}

/* Mobile (max-width: 575px) */
@media (max-width: 575px) {
    .container {
        padding: 0 15px;
    }
    
    .artbook-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 15px;
    }
    
    .prestations-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .prestations-grid-small {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .prestations-title {
        font-size: 2rem;
    }
    
    .prestations-subtitle {
        font-size: 1rem;
    }
    
    .prestations-section {
        padding: 30px 15px;
        margin: 20px 0;
        border-radius: 15px;
    }
    
    .prestation-image {
        height: 200px;
    }
    
    .prestation-image.large {
        height: 220px;
    }
    
    .prestation-image.portrait {
        height: 250px;
    }
    
    .prestation-content {
        padding: 15px;
    }
    
    .prestation-title {
        font-size: 1.2rem;
    }
    
    .prestation-title.small {
        font-size: 1rem;
    }
    
    .prestation-description {
        font-size: 0.9rem;
    }
    
    .prestation-button {
        padding: 10px 20px;
        font-size: 0.8rem;
    }
    
    .artbook-section-header {
        padding: 12px 15px;
    }
    
    .artbook-section-header .artbook-heading-text {
        font-size: 1.1rem;
    }
    
    .artbook-item {
        padding: 12px;
    }
    
    .artbook-item h3 {
        font-size: 1rem;
        justify-content: center;
    }
    
    .artbook-item h3::before {
        min-width: 30px;
        height: 30px;
        font-size: 0.9rem;
    }
    
    .artbook-section {
        margin: 20px 0;
        border-radius: 15px;
    }
}

/* Très petit mobile (max-width: 375px) */
@media (max-width: 375px) {
    .container {
        padding: 0 10px;
    }
    
    .prestations-section {
        padding: 20px 10px;
        margin: 15px 0;
    }
    
    .prestations-title {
        font-size: 1.8rem;
    }
    
    .prestation-image {
        height: 180px;
    }
    
    .prestation-image.large {
        height: 200px;
    }
    
    .prestation-image.portrait {
        height: 220px;
    }
    
    .prestation-content {
        padding: 12px;
    }
    
    .prestation-title {
        font-size: 1.1rem;
    }
    
    .prestation-description {
        font-size: 0.85rem;
    }
    
    .artbook-grid {
        padding: 10px;
        gap: 12px;
    }
    
    .artbook-item {
        padding: 10px;
    }
}

/* ========== RESPONSIVE HEADER & MENU ========== */

/* Header responsive */
@media (max-width: 991px) {
    .header-area {
        padding: 15px 0;
    }
    
    .header-wrapper {
        flex-direction: column;
        gap: 15px;
    }
    
    .logo {
        order: 1;
    }
    
    .main-menu {
        order: 2;
        width: 100%;
    }
    
    .header-actions {
        order: 3;
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .header-area {
        padding: 10px 0;
    }
    
    .logo img {
        max-height: 40px;
    }
    
    .mobile-menu-toggle {
        display: flex !important;
        position: absolute !important;
        right: 20px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 1001 !important;
    }
    
    .main-menu {
        display: none !important;
    }
    
    .header-wrapper {
        position: relative !important;
        justify-content: space-between !important;
    }
    
    .header-wrapper .logo {
        order: 1 !important;
        flex: 0 0 auto !important;
    }
    
    .header-wrapper .main-menu {
        display: none !important;
    }
    
    .header-wrapper .header-actions {
        order: 3 !important;
        display: flex !important;
        align-items: center !important;
        gap: 1rem !important;
        flex: 0 0 auto !important;
    }
    
    .main-menu.active {
        display: block;
    }
    
    .main-menu nav ul {
        flex-direction: column;
        gap: 0;
    }
    
    .main-menu nav ul li {
        width: 100%;
        border-bottom: 1px solid rgba(212, 175, 55, 0.1);
    }
    
    .main-menu nav ul li a {
        padding: 15px 0;
        text-align: center;
        font-size: 1.1rem;
    }
    
    .main-menu nav ul li .submenu {
        position: static;
        display: none;
        background: rgba(44, 62, 80, 0.8);
        border-radius: 10px;
        margin: 10px 0;
        box-shadow: none;
    }
    
    .main-menu nav ul li .submenu.show {
        display: block;
    }
    
    .main-menu nav ul li .submenu li {
        border-bottom: none;
    }
    
    .main-menu nav ul li .submenu li a {
        padding: 10px 20px;
        font-size: 0.95rem;
    }
}

/* ========== RESPONSIVE SECTIONS GÉNÉRALES ========== */

/* Sections responsives */
@media (max-width: 768px) {
    .section-header {
        margin-bottom: 30px;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .section-subtitle {
        font-size: 1rem;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .btn {
        padding: 12px 24px;
        font-size: 0.9rem;
    }
    
    .btn-lg {
        padding: 15px 30px;
        font-size: 1rem;
    }
}

@media (max-width: 575px) {
    .section-title {
        font-size: 1.8rem;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .btn {
        padding: 10px 20px;
        font-size: 0.85rem;
    }
    
    .btn-lg {
        padding: 12px 24px;
        font-size: 0.9rem;
    }
}

/* ========== RESPONSIVE FOOTER ========== */

@media (max-width: 768px) {
    .footer-area {
        padding: 40px 0 20px 0;
    }
    
    .footer-content {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }
    
    .footer-section {
        width: 100%;
        margin-bottom: 20px;
    }
    
    .footer-section h4 {
        font-size: 1.2rem;
        margin-bottom: 15px;
    }
    
    .footer-section p,
    .footer-section li {
        font-size: 0.9rem;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .footer-bottom p {
        font-size: 0.8rem;
    }
}

@media (max-width: 575px) {
    .footer-area {
        padding: 30px 0 15px 0;
    }
    
    .footer-content {
        gap: 25px;
    }
    
    .footer-section h4 {
        font-size: 1.1rem;
    }
    
    .footer-section p,
    .footer-section li {
        font-size: 0.85rem;
    }
}

/* ========== RESPONSIVE CURSOR ========== */

@media (max-width: 768px) {
    .custom-cursor,
    .cursor-follower {
        display: none !important;
    }
    
    * {
        cursor: auto !important;
    }
}

/* ========== RESPONSIVE HERO SECTION ========== */

@media (max-width: 768px) {
    .hero-area {
        padding: 80px 0 60px 0;
        min-height: 70vh;
    }
    
    .hero-badges {
        flex-direction: column;
        gap: 10px;
    }
    
    .hero-badge {
        font-size: 0.7rem;
        padding: 0.4rem 1rem;
    }
    
    .scrolling-banner {
        padding: 8px 0;
    }
    
    .scrolling-text {
        font-size: 14px;
    }
}

@media (max-width: 575px) {
    .hero-area {
        padding: 60px 0 40px 0;
        min-height: 60vh;
    }
    
    .hero-title {
        font-size: 1.8rem;
        line-height: 1.2;
    }
    
    .hero-subtitle {
        font-size: 0.9rem;
    }
    
    .hero-badge {
        font-size: 0.65rem;
        padding: 0.3rem 0.8rem;
    }
    
    .scrolling-text {
        font-size: 12px;
    }
}

/* ========== RESPONSIVE PORTFOLIO ========== */

@media (max-width: 768px) {
    .portfolio-filter {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .filter-btn {
        padding: 8px 16px;
        font-size: 0.85rem;
    }
    
    .portfolio-item {
        margin-bottom: 20px;
    }
}

@media (max-width: 575px) {
    .portfolio-filter {
        flex-direction: column;
        align-items: center;
    }
    
    .filter-btn {
        width: 100%;
        max-width: 200px;
        padding: 10px 16px;
    }
}

/* Dark Theme Base - CORRECTED */
body {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(135deg, #0f0f0f, #1a1a1a, #2d2d2d);
    background-attachment: fixed;
    color: #f7fafc;
    line-height: 1.6;
    opacity: 1;
    visibility: visible;
}

/* Fallback pour la visibilité */
* {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Typography - DARK THEME */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    color: #f7fafc !important;
    line-height: 1.2;
}

.section-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    font-weight: 600;
    color: #f7fafc !important;
    margin-bottom: 1rem;
}

.section-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    color: #e2e8f0 !important;
    margin-bottom: 1rem;
}

.section-description {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: #a0aec0 !important;
    line-height: 1.7;
}

/* Dark Header - FORCED */
.header-area {
    background: rgba(26, 32, 44, 0.95) !important;
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(52, 152, 219, 0.2) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3) !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    transition: all 0.3s ease;
}

.header-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 1rem 0 !important;
    min-height: 70px !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
    position: relative !important;
}

.header-wrapper .logo {
    flex: 0 0 auto !important;
    order: 1 !important;
}

.header-wrapper .main-menu {
    flex: 0 1 auto !important;
    margin: 0 2rem !important;
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    min-height: 60px !important;
    padding: 10px 0 !important;
    order: 2 !important;
}

.header-wrapper .header-actions {
    flex: 0 0 auto !important;
    order: 3 !important;
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
}

.mobile-menu-toggle {
    display: none !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 40px !important;
    height: 40px !important;
    cursor: pointer !important;
    padding: 8px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    z-index: 1001 !important;
    order: 2 !important;
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Règles Bootstrap supprimées - conflit avec flexbox */

.logo img {
    height: 50px;
    transition: all 0.3s ease;
}

.logo img:hover {
    transform: scale(1.05);
}

/* Menu Navigation - REFONTE COMPLÈTE */
/* Règle dupliquée supprimée - gérée par .header-wrapper .main-menu */

.main-menu ul {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.3rem;
}

.main-menu ul li {
    position: relative;
}

.main-menu ul li a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    color: #ffffff;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 0.6rem 1rem;
    position: relative;
    border-radius: 4px;
    display: block;
    white-space: nowrap;
}

.main-menu ul li a:hover {
    color: #ffffff;
    background: rgba(45, 55, 72, 0.8);
}

.main-menu ul li a.active {
    color: #ffffff;
    background: rgba(45, 55, 72, 0.8);
}

/* Submenu - NOUVEAU DESIGN CORRIGÉ */
.main-menu ul li.has-submenu .submenu {
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(26, 32, 44, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    min-width: 220px;
    z-index: 1000;
    padding: 10px 0;
    margin-top: 10px;
    display: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-15px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.main-menu ul li.has-submenu:hover .submenu {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.main-menu ul li.has-submenu .submenu li {
    margin: 0;
}

.main-menu ul li.has-submenu .submenu li a {
    display: block;
    padding: 12px 20px;
    font-size: 0.9rem;
    color: #a0aec0;
    transition: all 0.3s ease;
    border-radius: 0;
    margin: 0;
}

.main-menu ul li.has-submenu .submenu li a:hover {
    background: rgba(52, 152, 219, 0.1);
    color: #3498db;
    padding-left: 25px;
}

.main-menu ul li.has-submenu .submenu li:first-child a {
    border-radius: 12px 12px 0 0;
}

.main-menu ul li.has-submenu .submenu li:last-child a {
    border-radius: 0 0 12px 12px;
}


/* Header Actions */
/* Header actions - Version unifiée */
.header-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    height: 100% !important;
    gap: 1rem !important;
    flex-shrink: 0 !important;
    flex: 0 0 auto !important;
}

.header-actions .btn {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Règles dupliquées supprimées */

/* Menu Principal - Style de base (sera surchargé par les media queries) */

/* Menu Principal - Style Desktop - SUPPRIMÉ */

/* CSS FORCÉ POUR TOUTES LES PAGES */
.main-menu nav ul {
    display: flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.main-menu nav ul li {
    position: relative !important;
    margin: 0 !important;
}

.main-menu nav ul li a {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500 !important;
    font-size: 1rem !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    padding: 0.8rem 1.2rem !important; /* Padding augmenté */
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    min-height: 40px !important; /* Hauteur minimale pour zone de survol */
    border-radius: 4px !important;
    white-space: nowrap !important;
}

.main-menu nav ul li a:hover,
.main-menu nav ul li.active a {
    color: #ffffff !important;
    background: rgba(45, 55, 72, 0.8) !important;
}

.main-menu nav ul li.has-submenu:hover > a {
    background: rgba(45, 55, 72, 0.8) !important;
}

/* Zone de survol étendue pour les éléments avec sous-menus */
.main-menu nav ul li.has-submenu {
    position: relative !important;
    padding: 10px 0 !important; /* Padding vertical pour zone de survol */
}

.main-menu nav ul li.has-submenu::before {
    content: '' !important;
    position: absolute !important;
    top: -15px !important;
    left: -15px !important;
    right: -15px !important;
    bottom: -15px !important;
    z-index: -1 !important;
    background: transparent !important;
}

/* Zone de survol invisible étendue */
.main-menu nav ul li.has-submenu::after {
    content: '' !important;
    position: absolute !important;
    top: -20px !important;
    left: -20px !important;
    right: -20px !important;
    bottom: -20px !important;
    z-index: 1 !important;
    background: transparent !important;
}

/* Anciennes règles supprimées - remplacées par les nouvelles */

/* SOUS-MENUS AMÉLIORÉS */
.main-menu nav ul li.has-submenu > ul {
    position: absolute !important;
    top: calc(100% + 5px) !important; /* Moins d'espace pour plus de stabilité */
    left: 50% !important;
    background: rgba(26, 32, 44, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
    min-width: 250px !important; /* Largeur encore plus grande */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-50%) translateY(5px) !important; /* Moins de décalage */
    transition: all 0.2s ease !important; /* Transition plus rapide */
    z-index: 1000 !important;
    border-radius: 12px !important;
    padding: 15px 0 !important; /* Padding encore plus grand */
    border: 1px solid rgba(52, 152, 219, 0.3) !important;
    display: block !important;
    pointer-events: none !important;
}

.main-menu nav ul li.has-submenu:hover > ul {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
    pointer-events: auto !important;
}

.main-menu nav ul li.has-submenu > ul:hover {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
    pointer-events: auto !important;
}

/* Zone de survol invisible pour les sous-menus */
.main-menu nav ul li.has-submenu > ul::before {
    content: '' !important;
    position: absolute !important;
    top: -10px !important;
    left: -10px !important;
    right: -10px !important;
    bottom: -10px !important;
    z-index: -1 !important;
    background: transparent !important;
}

/* Règle CSS pure pour maintenir les sous-menus ouverts */
.main-menu nav ul li.has-submenu:hover > ul,
.main-menu nav ul li.has-submenu > ul:hover {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
    pointer-events: auto !important;
    display: block !important;
}

/* Forcer l'affichage des sous-menus au survol */
.main-menu nav ul li.has-submenu:hover > ul {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Liens des sous-menus */
.main-menu nav ul li.has-submenu > ul li {
    margin: 0 !important;
    width: 100% !important;
}

.main-menu nav ul li.has-submenu > ul li a {
    color: #ffffff !important;
    padding: 12px 20px !important;
    display: block !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    font-size: 14px !important;
    border-radius: 0 !important;
}

.main-menu nav ul li.has-submenu > ul li a:hover {
    background: rgba(52, 152, 219, 0.2) !important;
    color: #ffffff !important;
    padding-left: 25px !important;
}

.main-menu nav ul li.has-submenu > ul li:first-child a {
    border-radius: 12px 12px 0 0 !important;
}

.main-menu nav ul li.has-submenu > ul li:last-child a {
    border-radius: 0 0 12px 12px !important;
}

/* Responsive Menu - Tablette */
@media (max-width: 1024px) and (min-width: 769px) {
    .main-menu nav ul li.has-submenu > ul {
        min-width: 200px !important;
        font-size: 13px !important;
    }
    
    .main-menu nav ul li.has-submenu > ul li a {
        padding: 10px 15px !important;
        font-size: 13px !important;
    }
    
    /* Règles supprimées car gérées par les règles principales */
}

/* MENU BURGER MOBILE - UNIQUEMENT SUR MOBILE */
@media (max-width: 768px) {
    /* Masquer le menu principal sur mobile */
    .main-menu {
        display: none !important;
    }
    
    /* Masquer spécifiquement le ul du menu sur mobile */
    .main-menu ul {
        display: none !important;
    }
    
    /* Masquer le nav du menu sur mobile */
    .main-menu nav {
        display: none !important;
    }
    
    /* Afficher le menu burger sur mobile */
    .mobile-menu-toggle {
        display: flex !important;
    }
    
    /* Menu mobile ouvert */
    .main-menu.active {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        background: rgba(26, 32, 44, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        z-index: 1000 !important;
        padding: 80px 20px 20px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* Empêcher le scroll horizontal quand le menu mobile est ouvert */
    body.menu-open {
        overflow-x: hidden !important;
        position: fixed !important;
        width: 100% !important;
    }
    
    /* Afficher le nav et ul quand le menu mobile est actif */
    .main-menu.active nav {
        display: block !important;
    }
    
    .main-menu.active nav ul {
        display: flex !important;
    }
    
    .main-menu.active nav ul {
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .main-menu.active nav ul li {
        width: 100% !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(52, 152, 219, 0.1) !important;
    }
    
    .main-menu.active nav ul li:last-child {
        border-bottom: none !important;
    }
    
    .main-menu.active nav ul li a {
        display: block !important;
        padding: 20px !important;
        text-align: left !important;
        font-size: 18px !important;
        color: #ffffff !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
        border-radius: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    .main-menu.active nav ul li a:hover {
        background: rgba(52, 152, 219, 0.1) !important;
        color: #ffffff !important;
        padding-left: 30px !important;
    }
    
    /* Sous-menus mobile */
    .main-menu.active nav ul li.has-submenu > ul {
        position: static !important;
        display: none !important;
        background: rgba(45, 55, 72, 0.8) !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border: none !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    
    .main-menu.active nav ul li.has-submenu > ul.show {
        display: block !important;
    }
    
    .main-menu.active nav ul li.has-submenu > ul li a {
        padding: 15px 40px !important;
        font-size: 16px !important;
        color: #b0c4de !important;
        border-bottom: 1px solid rgba(52, 152, 219, 0.05) !important;
    }
    
    .main-menu.active nav ul li.has-submenu > ul li:last-child a {
        border-bottom: none !important;
    }
    
    .main-menu.active nav ul li.has-submenu > ul li a:hover {
        background: rgba(52, 152, 219, 0.1) !important;
        color: #ffffff !important;
        padding-left: 50px !important;
    }
    
    /* Indicateur de sous-menu */
    .main-menu.active nav ul li.has-submenu > a::after {
        content: '+' !important;
        float: right !important;
        font-size: 20px !important;
        transition: transform 0.3s ease !important;
    }
    
    .main-menu.active nav ul li.has-submenu > a.active::after {
        content: '-' !important;
        transform: rotate(180deg) !important;
    }
}

/* Responsive Menu - Mobile - Règles supprimées car gérées par les règles principales */

/* Modern Buttons */
.btn {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-primary {
    background: #3498db !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3) !important;
}

.btn-primary:hover {
    background: #2980b9 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4) !important;
    color: #ffffff !important;
}

.btn-outline {
    background: transparent !important;
    color: #f7fafc !important;
    border: 2px solid #f7fafc !important;
}

.btn-outline:hover {
    background: #f7fafc !important;
    color: #1a202c !important;
    transform: translateY(-2px);
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1rem;
}

/* Dark Sections - CORRECTED */
.ptb-130 {
    padding: 5rem 0;
    background-color: transparent !important;
}

.bg-1 {
    background: linear-gradient(135deg, #2d3748, #4a5568) !important;
}

.bg-2 {
    background: linear-gradient(135deg, #1a202c, #2d3748) !important;
}

/* Dark Cards - CORRECTED */
.card, .service-card, .team-card, .news-card, .social-card, .testimonial-card, .faq-item, .process-step, .gallery-card, .pricing-card {
    background: rgba(45, 55, 72, 0.8) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 15px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease;
    overflow: hidden;
}

.card:hover, .service-card:hover, .team-card:hover, .news-card:hover, .social-card:hover, .testimonial-card:hover, .faq-item:hover, .process-step:hover, .gallery-card:hover, .pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4) !important;
}

/* Dark Text - FORCED */
.section-title, .hero-title, h1, h2, h3, h4, h5, h6 {
    color: #f7fafc !important;
}

.section-subtitle, .hero-subtitle {
    color: #e2e8f0 !important;
}

.section-description, .hero-description, p {
    color: #a0aec0 !important;
}

/* Dark Forms - FORCED */
.form-control {
    background: #4a5568 !important;
    border: 2px solid rgba(52, 152, 219, 0.2) !important;
    border-radius: 10px;
    color: #f7fafc !important;
    font-family: 'Inter', sans-serif;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
}

.form-control:focus {
    background: #4a5568 !important;
    border-color: #3498db !important;
    color: #f7fafc !important;
    box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25) !important;
}

.form-control::placeholder {
    color: #a0aec0 !important;
}

/* Dark Footer - FORCED */
.footer-area {
    background: #2d3748 !important;
    color: #f7fafc !important;
}

.footer-widget h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #f7fafc !important;
    margin-bottom: 1.5rem;
}

.footer-widget p, .footer-widget li {
    color: #f7fafc !important;
    opacity: 0.8;
}

.footer-widget a {
    color: #f7fafc !important;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.footer-widget a:hover {
    color: #3498db !important;
    opacity: 1;
}

.copyright p {
    color: #f7fafc !important;
    opacity: 0.6;
}

/* Modern Portfolio */
.portfolio-overlay {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(212, 175, 55, 0.9)) !important;
}

.portfolio-content h3 {
    color: var(--text-light);
    font-family: 'Playfair Display', serif;
}

.portfolio-content p {
    color: var(--text-light);
    opacity: 0.9;
}

/* Modern Pricing */
.pricing-card.featured {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
    color: var(--bg-primary);
    transform: scale(1.05);
}

.pricing-price .amount {
    color: var(--accent-color);
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    font-weight: 700;
}

/* Modern FAQ */
.faq-question {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
}

.faq-question:hover {
    background: var(--bg-secondary);
}

.faq-answer {
    background: var(--bg-primary);
}

/* Modern Testimonials */
.quote-icon {
    background: var(--accent-color);
    color: var(--bg-primary);
}

.testimonial-content p {
    color: var(--text-secondary);
    font-style: italic;
}

.author-info h4 {
    color: var(--text-primary);
    font-family: 'Montserrat', sans-serif;
}

.author-info span {
    color: var(--text-secondary);
}

/* Modern Process */
.step-number {
    background: var(--accent-color);
    color: var(--bg-primary);
    font-family: 'Playfair Display', serif;
}

.step-content h3 {
    color: var(--text-primary);
    font-family: 'Playfair Display', serif;
}

.step-content p {
    color: var(--text-secondary);
}

/* Modern CTA */
.cta-content h3 {
    color: var(--text-primary);
    font-family: 'Playfair Display', serif;
}

.cta-content p {
    color: var(--text-secondary);
}

/* Modern Stats */
.stat-number {
    color: var(--accent-color);
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    font-weight: 700;
}

.stat-label {
    color: var(--text-secondary);
    font-family: 'Montserrat', sans-serif;
}

/* Modern Icons */
.service-icon, .team-icon, .step-number, .quote-icon {
    background: var(--accent-color);
    color: var(--bg-primary);
}

/* Modern Badges */
.section-badge, .hero-badge, .news-badge {
    background: var(--accent-color);
    color: var(--bg-primary);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Modern Links */
a {
    color: var(--accent-color);
    transition: all 0.3s ease;
}

a:hover {
    color: var(--accent-hover);
}

/* Menu Mobile - REFONTE COMPLÈTE */
/* Règles dupliquées supprimées - gérées par le CSS principal */

/* Menu mobile actif */
.main-menu.active {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(26, 32, 44, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    margin-top: 10px;
    padding: 20px;
    z-index: 1000;
}

.main-menu.active ul {
    flex-direction: column;
    gap: 0;
}

.main-menu.active ul li {
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.main-menu.active ul li:last-child {
    border-bottom: none;
}

.main-menu.active ul li a {
    padding: 15px 0;
    text-align: center;
    border-radius: 8px;
    margin: 5px 0;
}

.main-menu.active ul li.has-submenu .submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    background: rgba(255, 255, 255, 0.05);
    margin: 10px 0 0 20px;
    border-radius: 8px;
    padding: 10px 0;
}

.main-menu.active ul li.has-submenu .submenu li a {
    padding: 10px 20px;
    text-align: left;
}

/* Modern Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-hover);
}

/* Responsive Design - REFONTE COMPLÈTE */
/* Règle dupliquée supprimée - gérée par la règle principale ci-dessus */
    
    .section-title {
        font-size: 2rem;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .btn-lg {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
    }
    
    /* Ajustements pour les sous-menus mobiles */
    .main-menu.active ul li.has-submenu .submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        background: rgba(255, 255, 255, 0.05);
        margin: 10px 0 0 20px;
        border-radius: 8px;
        padding: 10px 0;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 1rem;
    }
    
    .section-title {
        font-size: 1.8rem;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.85rem;
    }
    
    .main-menu.active {
        margin: 5px;
        padding: 15px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 1rem;
    }
    
    .section-title {
        font-size: 1.8rem;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.85rem;
    }
    
    /* Menu hamburger sur très petits écrans */
    .mobile-menu-toggle {
        right: 15px !important;
        width: 35px !important;
        height: 35px !important;
    }
    
    .mobile-menu-toggle span {
        width: 20px !important;
        height: 2px !important;
    }
    
    /* Correction du menu mobile qui dépasse */
    .main-menu.active {
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 80px 15px 20px !important;
        box-sizing: border-box !important;
    }
    
    .main-menu.active nav ul li a {
        padding: 15px !important;
        font-size: 16px !important;
    }
}

/* FORCE DARK THEME ON ALL ELEMENTS */
* {
    box-sizing: border-box;
}

/* Force dark backgrounds - CORRECTED */
.hero-area {
    background: linear-gradient(135deg, #000000, #1a1a1a) !important;
}

.services-area, .portfolio-area, .about-area, .testimonials-area, .cta-area, .contact-area, .mariage-content-area, .lifestyle-content-area, .actualites-area, .prestations-area, .team-area, .faq-section, .process-section, .client-testimonials-area {
    background-color: transparent !important;
}

/* Force dark text on all elements - CORRECTED */
p, span, div, li, td, th, label, small, strong, em, i, b, u, mark, del, ins, sub, sup, code, pre, blockquote, cite, q, abbr, acronym, address, var, samp, kbd, dfn {
    color: #a0aec0;
}

/* Force dark headings - CORRECTED */
h1, h2, h3, h4, h5, h6, .title, .heading, .section-title, .hero-title, .page-title, .widget-title, .entry-title, .post-title, .article-title {
    color: #f7fafc;
}

/* Force dark links - CORRECTED */
a, .link, .btn-link, .nav-link, .menu-link, .footer-link, .social-link {
    color: #3498db;
}

a:hover, .link:hover, .btn-link:hover, .nav-link:hover, .menu-link:hover, .footer-link:hover, .social-link:hover {
    color: #2980b9;
}

/* Force dark cards and containers - CORRECTED */
.card, .box, .widget, .panel, .tile, .item, .element, .component, .module, .block {
    /* Styles appliqués seulement si nécessaire */
}

/* Force dark forms - CORRECTED */
input, textarea, select, .form-control, .form-input, .form-textarea, .form-select, .input, .textarea, .select {
    background-color: #4a5568;
    border-color: rgba(52, 152, 219, 0.2);
    color: #f7fafc;
}

input::placeholder, textarea::placeholder, .form-control::placeholder, .form-input::placeholder, .form-textarea::placeholder {
    color: #a0aec0;
}

/* Force dark buttons - CORRECTED */
button, .btn, .button, .submit, .action, .cta {
    background-color: #3498db;
    color: #ffffff;
    border-color: #3498db;
}

button:hover, .btn:hover, .button:hover, .submit:hover, .action:hover, .cta:hover {
    background-color: #2980b9;
    border-color: #2980b9;
}

/* Force dark tables - CORRECTED */
table, .table, .data-table, .grid-table {
    background-color: #2d3748;
    color: #f7fafc;
}

th, .th, .header, .table-header {
    background-color: #4a5568;
    color: #f7fafc;
}

td, .td, .cell, .table-cell {
    background-color: #2d3748;
    color: #a0aec0;
}

/* Force dark lists - CORRECTED */
ul, ol, li, .list, .menu, .nav, .breadcrumb, .pagination {
    background-color: transparent;
    color: #a0aec0;
}

/* Force dark images with dark overlay */
img, .image, .photo, .picture, .gallery-item, .portfolio-item {
    filter: brightness(0.9) contrast(1.1);
}

/* Force dark scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #1a202c;
}

::-webkit-scrollbar-thumb {
    background: #3498db;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #2980b9;
}

/*-------------------------trust section start-------------------------*/
.trust-area {
    background: transparent;
}

.trust-card {
    background: rgba(45, 55, 72, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 40px 30px;
    text-align: center;
    transition: all 0.3s ease;
    height: 100%;
}

.trust-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.trust-logo {
    margin-bottom: 20px;
}

.trust-card h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #f7fafc;
    margin-bottom: 15px;
}

.trust-card p {
    color: #a0aec0;
    line-height: 1.6;
    margin: 0;
}

/*-------------------------formation section start-------------------------*/
.formation-card {
    background: rgba(45, 55, 72, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    transition: all 0.3s ease;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.formation-card.featured {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: #ffffff;
    transform: scale(1.05);
}

.formation-card.featured .formation-content h3,
.formation-card.featured .formation-content p,
.formation-card.featured .formation-features li {
    color: #ffffff;
}

.formation-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #e74c3c;
    color: #ffffff;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.formation-icon {
    width: 80px;
    height: 80px;
    background: #3498db;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    transition: all 0.3s ease;
}

.formation-card:hover .formation-icon {
    transform: scale(1.1);
    background: #2980b9;
}

.formation-icon i {
    font-size: 2rem;
    color: #ffffff;
}

.formation-content h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    font-weight: 600;
    color: #f7fafc;
    margin-bottom: 20px;
}

.formation-content p {
    color: #a0aec0;
    line-height: 1.6;
    margin-bottom: 30px;
}

.formation-features {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}

.formation-features li {
    color: #a0aec0;
    padding: 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.formation-features li i {
    color: #3498db;
    font-size: 0.9rem;
}

.formation-price {
    margin-bottom: 30px;
}

.formation-price .price {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 700;
    color: #3498db;
}

.formation-price .duration {
    color: #a0aec0;
    font-size: 1rem;
}

/*-------------------------formation section end-------------------------*/

/*-------------------------animations start-------------------------*/
/* Animations de base */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-on-scroll.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Transitions entre sections */
.section-transition {
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.section-transition.section-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Animation de chargement de la page - CORRECTED */
body {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

body.loaded {
    opacity: 1;
}

/* Animation du hero - CORRECTED */
.hero-area {
    opacity: 1;
    transform: scale(1);
    transition: all 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-area.hero-loaded {
    opacity: 1;
    transform: scale(1);
}

/* Animation des cartes */
.card, .service-card, .team-card, .news-card, .social-card, .testimonial-card, .faq-item, .process-step, .gallery-card, .pricing-card, .trust-card, .formation-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

/* Animation des boutons */
.btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn:hover::before {
    left: 100%;
}

/* Animation des images */
img {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

img.image-loaded {
    opacity: 1;
    transform: scale(1);
}

img.image-reveal {
    opacity: 1;
    transform: translateY(0);
}

/* Effet de frappe */
.typing-effect {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid #3498db;
    animation: blink 1s infinite;
}

.typing-cursor::after {
    content: '|';
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Animation des compteurs */
.counter, .stat-number {
    transition: all 0.5s ease;
}

/* Barre de progression de scroll */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, #3498db, #D4AF37);
    z-index: 9999;
    transition: width 0.1s ease;
}

/* Curseur personnalisé amélioré */
.custom-cursor {
    position: fixed;
    width: 8px;
    height: 8px;
    background: #3498db;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transition: all 0.1s ease;
    mix-blend-mode: difference;
}

.custom-cursor.hover {
    width: 40px;
    height: 40px;
    background: rgba(52, 152, 219, 0.2);
    border: 2px solid #3498db;
}

.custom-cursor.click {
    width: 12px;
    height: 12px;
    background: #e74c3c;
}

.cursor-follower {
    position: fixed;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(52, 152, 219, 0.3);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transition: all 0.3s ease;
}

.cursor-follower.hover {
    width: 60px;
    height: 60px;
    border-color: rgba(52, 152, 219, 0.5);
}

.cursor-follower.click {
    width: 30px;
    height: 30px;
    border-color: #e74c3c;
}

/* Animations des éléments de menu */
.main-menu ul li a {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.main-menu ul li a::before {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: #3498db;
    transition: width 0.3s ease;
}

.main-menu ul li a:hover::before {
    width: 100%;
}

/* Animation des sous-menus */
.submenu {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(-10px);
}

.main-menu ul li.has-submenu:hover .submenu {
    transform: translateY(0);
}

/* Animation des badges */
.hero-badge, .section-badge {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Animation des icônes */
.service-icon, .team-icon, .formation-icon, .trust-logo i {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card:hover .service-icon,
.team-card:hover .team-icon,
.formation-card:hover .formation-icon,
.trust-card:hover .trust-logo i {
    transform: scale(1.1) rotate(5deg);
}

/* Animation des formulaires */
.form-control {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-control:focus {
    transform: scale(1.02);
    box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
}

/* Animation des FAQ */
.faq-item {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-question {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-answer {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animation des témoignages */
.testimonial-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.testimonial-card:hover {
    transform: translateY(-10px) scale(1.02);
}

/* Animation des étapes de processus */
.process-step {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.step-number {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.process-step:hover .step-number {
    transform: scale(1.1) rotate(5deg);
}

/* Animation des galeries */
.gallery-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.gallery-card img {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-card:hover img {
    transform: scale(1.1);
}

/* Animation des prix */
.pricing-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.pricing-card.featured {
    animation: featuredPulse 3s infinite;
}

@keyframes featuredPulse {
    0%, 100% { transform: scale(1.05); }
    50% { transform: scale(1.08); }
}

/* Animation de révélation progressive */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Animation de chargement */
.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1a202c;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s ease;
}

.loading.hidden {
    opacity: 0;
    pointer-events: none;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(52, 152, 219, 0.3);
    border-top: 3px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Animations responsives */
@media (max-width: 768px) {
    .animate-on-scroll {
        transform: translateY(20px);
    }
    
    .section-transition {
        transform: translateY(30px);
    }
    
    /* Curseur personnalisé toujours visible même sur mobile */
    .custom-cursor,
    .cursor-follower {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/*-------------------------animations end-------------------------*/

/*-------------------------page transitions start-------------------------*/
/* Écran de chargement */
.page-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1a202c;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s ease;
}

.page-loading.fade-out {
    opacity: 0;
    pointer-events: none;
}

.loading-content {
    text-align: center;
    color: #f7fafc;
}

.loading-logo img {
    width: 100px;
    height: auto;
    margin-bottom: 2rem;
    animation: logoFloat 2s ease-in-out infinite;
}

@keyframes logoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(52, 152, 219, 0.3);
    border-top: 3px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

.loading-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    color: #a0aec0;
}

/* Animation de sortie de page */
.page-exiting {
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.3s ease;
}

/* Page chargée */
.page-loaded {
    opacity: 1;
    transform: scale(1);
}

/* Révélation de contenu */
.content-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.content-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Animation des éléments de menu mobile */
.main-menu.active li {
    animation: slideInFromLeft 0.5s ease forwards;
}

@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* États actifs du menu */
.main-menu ul li a.active {
    color: #3498db;
    position: relative;
}

.main-menu ul li a.active::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #3498db;
}

/*-------------------------page transitions end-------------------------*/

/*-------------------------modern theme end-------------------------*/

/*-------------------------header-area end-------------------------*/

/*-------------------------sidebar-area start-------------------------*/
.widget{
  margin-bottom: 40px;
}
.search-wrap form{
  position: relative;
}
.search-wrap input{
  width: 100%;
  height: 40px;
  padding-right: 45px;
  border:none;
  border-bottom: 1px solid #fff;
  background: transparent;
}
.search-wrap button{
  position: absolute;
  right: 0px;
  background: transparent;
  border:none;
  color: #fff;
  height: 40px;
  top: 0px;
}
.search-wrap button:hover{
  color: #fb9902;
}
.search-wrap input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  opacity: 1;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  color:#fff;
}
.search-wrap input::-moz-placeholder { /* Firefox 19+ */
  opacity: 1;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  color:#fff;
}
.search-wrap input:-ms-input-placeholder { /* IE 10+ */
  opacity: 1;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  color:#fff;
}
.search-wrap input:-moz-placeholder { /* Firefox 18- */
  opacity: 1;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  color:#fff;
}
.widget .widget-title{
  font-size: 18px;
  font-weight: 600;
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
}
.sidebar-menu ul li{
  line-height: 30px;
}
.sidebar-menu ul li a{
  position: relative;
  padding-left: 20px;
}
.sidebar-menu ul li a:before{
  position: absolute;
  left: 0;
  top: 50%;
  content: "\f101";
  font-family: fontawesome;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.sidebar-menu ul li a:hover:before{
  left: 5px;
}
.recent-post ul li{
  overflow: hidden;
  margin-bottom: 20px;
}
.recent-post ul li:last-child{
  margin-bottom: 0px;
}
.post-img{
  float: left;
  margin-right: 15px;
}
.post-content{
  overflow: hidden;
}
.post-content a{
  display: block;
  font-weight: 600;
  line-height: 24px;
  margin-bottom: 10px;
}
.post-content p{
  font-size: 12px;
  font-style: italic;
}
.tag-wrap ul li{
  display: inline-block;
  margin-bottom: 5px;
}
.tag-wrap ul li a{
  display: block;
  padding: 6px 20px;
  border:1px solid #fff;
  font-weight: 500;
  border-radius: 3px;
}
.tag-wrap ul li a:hover{
  color: #fff;
  background: #fb9902;
  border-color: #fb9902;
}
.tag-wrap{
  margin-bottom: 0px;
}
.pagination-wrap{
  margin: 20px 0px 30px;
}
.pagination-wrap ul li{
  display: inline-block;
}
.pagination-wrap ul li a,.pagination-wrap ul li span{
  height: 35px;
  width: 35px;
  line-height: 35px;
  background: #fff;
  color: #222;
  font-weight: 600;
  font-size: 16px;
  display: block;
}
.pagination-wrap ul li span,.pagination-wrap ul li:hover a{
  background: #fb9902;
  color: #fff;
}

/*------------ price-range start-----------*/
.price-range {
  overflow: hidden;
  padding: 10px 0px 30px;
}
.ui-slider-horizontal .ui-slider-handle {
  background: #ffffff none repeat scroll 0 0;
  border: 3px solid #fb9902;
  border-radius: 50%;
  height: 15px;
  top: -4px;
  outline:none;
  width: 15px;
}
.ui-slider-horizontal .ui-slider-range {
  background: #fb9902 none repeat scroll 0 0;
}
.ui-slider-horizontal {
  background: #e9e9e9 none repeat scroll 0 0;
  border: medium none;
  border-radius: 0;
  height: 7px;
}
.value {
  color: #fff;
  display: block;
  font-size: 14px;
  font-weight: normal;
  left: 50%;
  margin: 0 0 0 -20px;
  position: absolute;
  text-align: center;
  top: 15px;
  width: 40px;
}
.price-range-both.value {
  margin: 0 0 0 500px;
  top: 26px;
  width: 100px;
}
/*------------ recent-product-area-----------*/
.recent-product-wrap ul li{
  overflow:hidden;
  margin-bottom:10px;
  padding-bottom:10px;
  border-bottom:1px solid #eee;
}
.recent-product-wrap ul li:last-child{
  border-bottom:none;
   margin-bottom:0px;
  padding-bottom:0px;
}
.recent-product-img {
  float: left;
  margin-right: 20px;
}
.recent-product-content {
  overflow: hidden;
}
.recent-product-content a {
  color: #fb9902;
  font-size: 16px;
  display: block;
}
.recent-product-content a:hover{color:#fb9902}
.recent-product-content span {
  display: block;
  margin-bottom: 5px;
}
.recent-product-content i{
  color:#f5bc00;
}
/*-------------------------sidebar-area end-------------------------*/
.blog-details-area{
  padding: 130px 0px;
}
.blog-details-area .blog-content h3{
  color: #fff;
  font-size: 18px;
  color: #fff;
  margin-bottom: 0px;
}
.blog-details-wrap p{
  margin-bottom: 25px;
}
.blog-details-wrap blockquote {
    background: #131619;
    padding: 30px 25px 30px 40px;
    font-size: 16px;
    font-style: italic;
    margin: 40px 0;
    border-left: 10px solid #fb9902;
}
.socila-link{
  margin-bottom: 100px;
}
.socila-link ul li{
  display: inline-block;
  color: #fb9902;
}
.socila-link ul li a{
  font-size: 16px;
  margin-left: 7px;
}
.blog-form h3{
  margin-bottom: 25px;
  font-weight: 700;
}
.blog-form span{
  display: block;
  margin-bottom: 3px;
}
.blog-form input,.blog-form textarea,.contact-form input,.contact-form textarea{
  width: 100%;
  height: 45px;
  margin-bottom: 25px;
  border-radius: 3px;
  background: transparent;
  border:1px solid #fff;
  padding-left: 20px;
}
.blog-form textarea,.contact-form textarea{
  height: 200px;
  padding-top: 10px;
}
.blog-form button,.contact-form button{
  padding:10px 30px;
  background: #fb9902;
  color: #fff;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 700;
  border-radius: 3px;
  border:none;
}
.blog-form button:hover,.contact-form button:hover{
  background: #fff;
  color: #222;
}
/*-------------------------contact-area start-------------------------*/
.contact-area{
  padding-top: 130px;
}
.contact-form textarea{
  height: 270px;
}
.contact-wrap ul li{
  position: relative;
  padding:30px 20px 30px 100px;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 600;
  background: #131619;
  margin-bottom: 25px;
  border-radius: 5px;
}
.contact-wrap ul li:last-child{
  margin-bottom: 0px;
}
.contact-wrap ul li i{
  position: absolute;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  top: 50%;
  left: 30px;
  font-size: 35px;
  color: #fb9902;
}
.contact-wrap ul li p{
  font-size: 14px;
  margin-top: 8px;
  font-weight: 400;
  text-transform: capitalize;
}
.contact-wrap ul li p span{
  display: block;
}
#googleMap{
  margin-top: 100px;
  height: 550px;
  width: 100%;
}
/*-------------------------contact-area end-------------------------*/

/*-------------------------error-area start-------------------------*/
.error-area{
  padding: 130px 0px;
}
.error-wrap{
  text-align: center;
}
.error-wrap img{
  margin-bottom: 50px;
}
.error-wrap h3{
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 20px;
}
.error-wrap p{
  margin-bottom: 30px;
}
.error-wrap ul li{
  display: inline-block;
  margin:0px 3px;
}
.error-wrap ul li a{
  padding: 10px 30px;
  border-radius: 5px;
  background: #fff;
  color: #222;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  display: block;
}
.error-wrap ul li a:hover{
  background: #fb9902;
  color: #fff;
}
/*-------------------------error-area end-------------------------*/

/*-------------------------shop-area start-------------------------*/
.view-wrap{
  background:#131619;
  padding:15px 20px;
  margin-bottom:30px;
}
.shop-title {
  font-size: 18px;
  font-weight: 600;
  margin: 7px 0px;
  text-transform: uppercase;
}
.selector{float:right;}
.selector select {
  border: 1px solid #e1e1e1;
  border-radius: 5px;
  height: 35px;
  padding: 0 10px;
  width: 215px;;
  background: transparent;
}
.selector select option{
  color: #222;
  font-size: 14px;
}
/*-------------------------shop-area end-------------------------*/

/*-------- checkout-area start ----------*/
.checkout-title{
  padding:20px 30px;
  background:#fb9902;
  color:#fff;
  font-size:20px;
  font-weight:600;
  text-transform: uppercase;
  margin-bottom:0px;
}
.checkout-form{
  background:#131619;
  padding:30px 30px 30px;
}
.checkout-form p,.account-area .checkout-form span{
  color:#fb9902;
  font-weight:600;
  margin-bottom:5px;
  font-size:14px;
}
.checkout-form p span,.account-area .checkout-form span.star{
  color:#fb9902;
}
.checkout-form input, .checkout-form select {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: 1px solid #cdd5d9;
  border-radius: 5px;
  color: #6a6a6a;
  font-weight: 400;
  height: 50px;
  margin-bottom: 25px;
  padding-left: 15px;
  width: 100%;
}
.checkout-form input[type="checkbox"]{
  width:auto;
  margin:0px 5px 25px 0px;
  height:auto;
}
.checkout-form ul li{
  overflow:hidden;
  color:#fb9902;
  padding-bottom:20px;
  margin-bottom:20px;
  border-bottom:1px solid #e1e1e1;
  position:relative;
}
.checkout-form ul li.last{
  padding-bottom:0px;
  margin-bottom:0px;
  border-bottom:transparent;
}
.checkout-form ul li strong{
  float:right;
  font-family:raleway;
  font-size:16px;
  color:#fb9902;
}
.checkout-form ul li span{
  position:absolute;
  left:50%;
  top:0;
  font-size:16px;
  color:#fb9902;
}
.checkout-form ul li b{
  font-size:16px;
  color:#fb9902;
  font-weight:800;
}
.checkout-form .panel-default > .panel-heading {
  background: transparent none repeat scroll 0 0;
  border-color: transparent;
  color: #fb9902;
  padding: 10px 35px;
  border-bottom: 1px solid #ccc;
}
.checkout-form .panel-body {
  border-top: medium none;
  padding: 15px 35px;
}
.checkout-form .panel {
  background-color: #0d0f11;
  border: 1px solid transparent;
  border-radius: 4px;
  box-shadow: none;
  margin-bottom: 0px;
}
.checkout-form .panel-group .panel-heading + .panel-collapse > .list-group, .panel-group .panel-heading + .panel-collapse > .panel-body {
    border-top: medium none transparent;
}
.checkout-form .panel-title > .small, .panel-title > .small > a, .panel-title > a, .panel-title > small, .panel-title > small > a {
  position: relative;
}
.checkout-form .panel-default a::before {
    background: rgba(0, 0, 0, 0) url(../images/image-1.png) no-repeat scroll center center / cover;
    border-radius: 5px;
    content: "";
    height: 25px;
    left: -30px;
    position: absolute;
    top: 8px;
    width: 25px;
    z-index: 9;
}
.checkout-form .panel-default a.collapsed::after{
  background: #f1f1f1 none repeat scroll 0 0;
  border: 1px solid #ddd;
  border-radius: 50%;
  content: "";
  height: 25px;
  left: -30px;
  position: absolute;
  top: 8px;
  width: 25px;
  background-image:none;
  z-index:999;
}
.checkout-form a.order,.checkout-form button{
  display:block;
  width:100%;
  height:50px;
  line-height:50px;
  color:#fff;
  font-weight:700;
  background:#fb9902;
  border-radius:5px;
  text-align:center;
  font-size:16px;
}
.checkout-form a.order:hover{background:#222}
/*-------- checkout-area end ----------*/

/*-------- cart-area start ----------*/
.shoping-cart-wrap thead{
  background:#fb9902;
  color:#fff;
  height:50px;
}
.shoping-cart-wrap thead tr th{
  text-align:center;
  border-right:1px solid #fff;
  padding: 15px;
}
.shoping-cart-img{width:150px;}
.shoping-cart-name{width:285px;}
.shoping-cart-price{width:120px;}
.shoping-cart-quantity{width:150px;}
.shoping-cart-total{width:120px;}
.shoping-cart-remove{width:150px;}
.table-wrap{
  padding:20px 0px;
}
.table-wrap tr {
    border-bottom: 1px solid #e1e1e1;
    display: block;
    margin-bottom: 20px;
    padding-bottom: 20px;
}
.table-wrap tr td{
  text-align:center;
  font-size:16px;
  color:#fb9902;
  font-weight: 600;
}

.shoping-cart-name a,.shoping-cart-remove a{
  color:#fb9902;
  font-size: 16px;
  font-weight: 700;
}
.shoping-cart-name a:hover,.shoping-cart-remove a:hover{
  color:#fff;
}
.shoping-cart-quantity input{
  width:80px;
  height:50px;
  background:#f2f2f2;
  border-radius:5px;
  border:1px solid #f2f2f2;
  padding-left:10px;
  position:relative;
}
.shoping-cart-btn {
  float: right;
  margin-bottom: 30px;
  padding-right: 20px;
}
.shoping-cart-btn a{
  display:inline-block;
  padding:10px 40px;
  background:#fb9902;
  color:#fff;
  font-weight:600;
  margin-left:5px;
  border-radius:5px;
}
.shoping-cart-btn a:hover{
  background: #fff;
  color: #222;
}
.cart-form-wrap {
  padding:30px 20px;
}
.cart-form-wrap input,.cart-form-wrap select{
  background:transparent;
  width: 100%;
  height: 45px;
  margin-bottom:10px;
  border:1px solid #cdd5d9;
  padding-left: 20px;
}
.cart-form-wrap select option{
  color: #222;
}
.cart-form-wrap button{
  width:100%;
  height:45px;
  border-radius:5px;
  border:transparent;
  background:#fb9902;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 14px;
  margin-top: 10px;
}
.cart-form-wrap button:hover{
  background:#fff;
  color: #222;
}
.cart-form-wrap ul li{
  padding-bottom:25px;
  margin-bottom:25px;
  color:#fb9902;
  font-size:16px;
  overflow:hidden;
  border-bottom:1px solid #cdd5d9;
}
.cart-form-wrap ul li span{float:right}
.cart-form-wrap h3.widget-title{
  font-size: 20px;
  margin-bottom: 20px;
  text-transform: uppercase;
  font-weight: 600;
  border:none;
}
/* -------- cart-area end ----------*/