/*

TemplateMo 565 Onix Digital

https://templatemo.com/tm-565-onix-digital


------------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer
10. preloader
11. search
12. portfolio

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
  width: 50%;
}

.grid-item {
  float: left;
}

.grid-item img {
  display: block;
  max-width: 100%;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  background-color: #fff;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 15px;
  line-height: 30px;
  color: #2a2a2a;
}

img {
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: 'Poppins', sans-serif;
}

::selection {
  background: #03a4ed;
  color: #fff;
}

::-moz-selection {
  background: #03a4ed;
  color: #fff;
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.page-section {
  margin-top: 120px;
}

.section-heading h2 {
  font-size: 30px;
  text-transform: capitalize;
  color: rgb(54, 45, 28);
  font-weight: 700;
  letter-spacing: 0.25px;
  position: relative;
  z-index: 2;
  line-height: 44px;
  margin-bottom: -5px;
}

.section-heading h2 em {
  font-style: normal;
  color: #0d6efd;
}

.section-heading h2 span {
  color: orange;
  font-weight: 700;
  opacity: 1;
  text-transform: capitalize;
}

.section-heading span {
  font-size: 30px;
  text-transform: uppercase;
  font-weight: 700;
  color: olivedrab;
  opacity: 0.15;
}

.main-blue-button a {
  display: inline-block;
  background-color: #03a4ed;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
}

.main-blue-button-hover a {
  display: inline-block;
  background-color: #0d6efd;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  transition: all .3s;
}

.main-blue-button-hover a:hover {
  background-color: orange;
}

.main-red-button a {
  display: inline-block;
  background-color: rgb(47, 149, 218);
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
}

.main-red-button-hover a {
  display: inline-block;
  background-color: orange;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  transition: all .3s;
}

.main-red-button-hover a:hover {
  background-color: rgb(47, 149, 218);
}

.main-white-button a {
  display: inline-block;
  background-color: #fff;
  font-size: 15px;
  font-weight: 400;
  color: orange;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
}

/* 
---------------------------------------------
header
--------------------------------------------- 
*/

.background-header {
  background-color: #fff!important;
  height: 80px!important;
  position: fixed!important;
  top: 0px;
  left: 0px;
  right: 0px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
}

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #1e1e1e!important;
}

.background-header .main-nav .nav li:hover a {
  color: orange!important;
}

.background-header .nav li a.active {
  color: orange!important;
}

.header-area {
  background-color: #fafafa;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 100;
  height: 100px;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
}

.header-area .main-nav .logo {
  line-height: 100px;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.background-header .main-nav .logo {
  line-height: 75px;
}

.background-header .main-nav .nav {
  margin-top: 20px !important;
}

.header-area .main-nav .nav {
  float: right;
  margin-top: 30px;
  margin-right: 0px;
  background-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 20px;
  padding-right: 20px;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
  padding-left: 40px;
}

.header-area .main-nav .nav li:last-child a ,
.background-header .main-nav .nav li:last-child a {
  color: #191a20 !important;
  
}

.header-area .main-nav .nav li:last-child a:hover,
.header-area .main-nav .nav li:last-child a.active {
  color: orange !important;
}

.header-area .main-nav .nav li:last-child .main-red-button-hover a:hover,
.background-header .main-nav .nav li:last-child .main-red-button-hover a:hover {
  background-color: #03a4ed !important;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size: 15px;
  color: #2a2a2a;
  text-transform: capitalize;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}

.header-area .main-nav .nav li a {
  color: #2a2a2a;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: orange!important;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: orange!important;
  opacity: 1;
}

.header-area .main-nav .nav li.submenu {
  position: relative;
  padding-right: 30px;
}

.header-area .main-nav .nav li.submenu:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color: #2a2a2a;
  position: absolute;
  right: 18px;
  top: 12px;
}

.background-header .main-nav .nav li.submenu:after {
  color: #2a2a2a;
}

.header-area .main-nav .nav li.submenu ul {
  position: absolute;
  width: 200px;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  top: 50px;
  opacity: 0;
  transform: translateY(+2em);
  visibility: hidden;
  z-index: -1;
  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}

.header-area .main-nav .nav li.submenu ul li {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.header-area .main-nav .nav li.submenu ul li a {
  opacity: 1;
  display: block;
  background: #f7f7f7;
  color: #2a2a2a!important;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  font-size: 13px;
  font-weight: 400;
  border-bottom: 1px solid #eee;
}

.header-area .main-nav .nav li.submenu ul li a:hover {
  background: #fff;
  color: #ff685f!important;
  padding-left: 25px;
}

.header-area .main-nav .nav li.submenu ul li a:hover:before {
  width: 3px;
}

.header-area .main-nav .nav li.submenu:hover ul {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 23px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #1e1e1e;
}

.header-area.header-sticky {
  min-height: 80px;
}

.header-area .nav {
  margin-top: 30px;
}

.header-area.header-sticky .nav li a.active {
  color: orange;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 12px;
    padding-right: 12px;
  }
  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 992px) {
  .header-area .main-nav .nav li:last-child  ,
  .background-header .main-nav .nav li:last-child {
    display: none;
  }
  .header-area .main-nav .nav li:nth-child(6),
  .background-header .main-nav .nav li:nth-child(6) {
    padding-right: 0px;
  }
}

@media (max-width: 767px) {
  .background-header .main-nav .nav {
    margin-top: 80px !important;
  }
  .header-area .main-nav .logo {
    color: #1e1e1e;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: orange!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background-color: #f7f7f7;
    padding: 0px 15px;
    height: 100px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 30px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .background-header .nav {
    margin-top: 80px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area.header-sticky .nav {
    margin-top: 100px;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #e7e7e7;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
  }
  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: orange!important;
  }
  .header-area .main-nav .nav li.submenu ul {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s;
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.submenu ul.active {
    height: auto !important;
  }
  .header-area .main-nav .nav li.submenu:after {
    color: #3B566E;
    right: 25px;
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

@media (min-width: 767px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}

/* 
---------------------------------------------
preloader
--------------------------------------------- 
*/

.js-preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    z-index: 9999;
    -webkit-transition: opacity 0.25s ease;
    transition: opacity 0.25s ease;
}

.js-preloader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@-webkit-keyframes dot {
    50% {
        -webkit-transform: translateX(96px);
        transform: translateX(96px);
    }
}

@keyframes dot {
    50% {
        -webkit-transform: translateX(96px);
        transform: translateX(96px);
    }
}

@-webkit-keyframes dots {
    50% {
        -webkit-transform: translateX(-31px);
        transform: translateX(-31px);
    }
}

@keyframes dots {
    50% {
        -webkit-transform: translateX(-31px);
        transform: translateX(-31px);
    }
}

.preloader-inner {
    position: relative;
    width: 142px;
    height: 40px;
    background: #fff;
}

.preloader-inner .dot {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 12px;
    left: 15px;
    background: orange;
    border-radius: 50%;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation: dot 2.8s infinite;
    animation: dot 2.8s infinite;
}

.preloader-inner .dots {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    margin-top: 12px;
    margin-left: 31px;
    -webkit-animation: dots 2.8s infinite;
    animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
    display: block;
    float: left;
    width: 16px;
    height: 16px;
    margin-left: 16px;
    background: orange;
    border-radius: 50%;
}



/* 
---------------------------------------------
Banner Style
--------------------------------------------- 
*/

.main-banner {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 236px 0px 130px 0px;
  position: relative;
  overflow: hidden;
  /* Style pour les grands écrans (Ordinateurs) */
@media (min-width: 1024px) {
    .main-banner:after {
        content: '';
        background-image: url(../images/banner-test-left.png);
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        left: 0;
        top: 200px;
        width: 200px; /* Réduit pour ne pas gêner le texte */
        height: 400px;
        z-index: 1;
        opacity: 0.6; /* Optionnel : pour ne pas voler la vedette au texte */
    }

    .main-banner:before {
        content: '';
        background-image: url(../images/banner-right-image.png);
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        right: 0;
        top: 150px;
        width: 500px; /* Ajusté pour laisser de la place au contenu */
        height: 500px;
        z-index: 1;
    }
}

/* Désactivation sur mobile pour éviter de cacher le texte */
@media (max-width: 1023px) {
    .main-banner:after, .main-banner:before {
        display: none;
    }
}
}
@media only screen and (max-width: 767px) {
  .down-buttons .main-blue-button-hover {
    margin-bottom: 12px !important;
  }
}

.main-banner:after {
  content: '';
  background-image: url(../images/banner-test-left.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  left: 20px;
  top: 200px;
  width: 250px;
  height: 700px;
  z-index: 1;
  opacity: 0.5;
}
@media only screen and (max-width: 767px) {
  .main-banner::after {
    content: none !important;
    display: none !important;
    background-image: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
  }
}


.main-banner:before {
  content: '';
  background-image: url(../images/banner-right-image.png);
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  right: 20px;
  top: 150px;
  width: 819px;
  height: 674px;
}

.main-banner {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#services {
  margin-top: 0.6 !important;
  padding-top: 0.6 !important;
}

.main-banner .item {
  margin-right: 45px;
}

.main-banner .item h6 {
  text-transform: uppercase;
  font-size: 18px;
  color: #ff695f;
  margin-bottom: 15px;
}

.main-banner .item h2 {
  font-size: 50px;
  font-weight: 700;
  color: orange;
  line-height: 72px;
}

.main-banner .item h2 em {
  color: #413b30;
  font-style: normal;
}

.main-banner .item h2 span {
  color: #0d6efd;
}

.main-banner .item p {
  margin: 20px 0px;
}

.main-banner .item .down-buttons {
  display: inline-flex;
}

.main-banner .item .down-buttons .call-button i {
  margin-right: 5px;
  width: 46px;
  height: 46px;
  display: inline-block;
  text-align: center;
  line-height: 46px;
  border-radius: 50%;
  background: orange (255,104,95);
  background: linear-gradient(105deg, rgba(230,151,123) 0%, rgb(230, 151, 123) 100%);
  color: black;
  font-size: 20px;
}

.main-banner .item .down-buttons .call-button a {
  color: orange;
  font-size: 15px;
  font-weight: 500;
  margin-left: 30px;
}

.main-banner .owl-dots {
  margin-top: 60px;
  counter-reset: dots;
}

.main-banner .owl-dot:before {
  counter-increment:dots;
  content: counter(dots);
  font-size: 20px;
  font-weight: 500;
  margin-left: 10px;
  color: #2a2a2a;
  width: 15px;
  display: inline-block;
  text-align: center;
  border-bottom: 3px solid transparent;
  transition: all .5s;
}

.main-banner .active:before {
  color: orange;
  border-bottom: 3px solid orange;
}


/* 
---------------------------------------------
Services Style
--------------------------------------------- 
*/

.our-services .services-left-dec img {
  width: 387px;
  height: 638px;
  left: -80px;
  top: -140px;
  position: absolute;
  z-index: 1;
}

.our-services .services-right-dec img {
  width: 305px;
  height: 305px;
  right: 25px;
  bottom: -120px;
  position: absolute;
  z-index: 1;
}

.our-services .container {
  position: relative;
}

.our-services {
  position: relative;
  margin-top: 0px;
  padding-top: 120px;
}

.our-services .section-heading {
  text-align: center;
  margin-bottom: 45px;
}

.our-services .section-heading h2 {
  margin: 0px 60px;
  margin-bottom: -10px;
}

.our-services .item {
  text-align: center;
  margin: 15px;
  border-radius: 20px;
  background-color: #fff;
  padding: 30px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.05);
}

.our-services .item h4 {
  font-size: 20px;
  font-weight: 700;
  color: #2a2a2a;
  margin-bottom: 30px;
  line-height: 30px;
}

.our-services .item .icon {
  width: 45px;
  height: 45px;
  margin: 0 auto;
}

.our-services .item p {
  margin-top: 35px;
  padding-top: 30px;
  border-top: 1px solid #eee;
}

.our-services .owl-dots {
  text-align: center;
  margin-top: 40px;
}
.our-services .owl-dots .owl-dot {
  width: 6px;
  height: 6px;
  background-color: orange;
  border-radius: 50%;
  opacity: 0.3;
  margin: 0px 5px;
}

.our-services .owl-dots .active {
  opacity: 1;
  width: 10px;
  height: 10px;
}


/* 
---------------------------------------------
About
--------------------------------------------- 
*/

.about-us {
  margin-top: 0px;
  padding-top: 120px;
}

.about-us .left-image {
  margin-right: 30px;
}

.about-us .section-heading h2 {
  margin-right: 60px;
}

.about-us .section-heading p {
  margin-top: 50px;
}

.about-us .fact-item .icon {
  width: 45px;
  height: 45px;
}

.about-us .fact-item {
  margin-top: 45px;
}
.fact-item {
  height: 100%;
}


.about-us .fact-item .count-digit {
  font-size: 48px;
  font-weight: 700;
  color: orange;
  margin-top: 5px;
}

.about-us .fact-item .count-title {
  font-size: 15px;
  color: rgb(37, 31, 29);
}

.about-us .fact-item p {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}


/* 
---------------------------------------------
Portfolio
--------------------------------------------- 
*/

.our-portfolio .portfolio-left-dec img {
  width: 342px;
  height: 311px;
  left: 45px;
  top: 120px;
  position: absolute;
  z-index: 1;
}

.our-portfolio {
  padding-top: 120px;
  margin-top: 0px;
  position: relative;
}

.our-portfolio .section-heading {
  text-align: center;
  margin-bottom: 60px;
}

.our-portfolio .section-heading h2 {
  text-align: center;
  margin: 0px 60px 0px 60px;
  margin-bottom: -5px;
  position: relative;
  z-index: 1;
}

.our-portfolio {
  margin: 0px 15px;
}

.our-portfolio .item .thumb {
  position: relative;
}

.our-portfolio .item .thumb:hover .hover-effect {
  bottom: 30px;
}

.our-portfolio .item .thumb:hover img {
  opacity: 0.7;
}

/* FIX AFFICHAGE OWL ACADEMY */
.owl-portfolio .item .thumb img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.our-portfolio .item .hover-effect {
  position: absolute;
  background-image: url(../images/hover-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  transition: all .5s;
  bottom: -240px;
  right: 30px;
  width: 239px;
  height: 210px;
}

.our-portfolio .item .hover-effect .inner-content {
  position: absolute;
  right: 30px;
  bottom: 30px;
  text-align: right;
}

.our-portfolio .item .hover-effect .inner-content h4 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 15px;
}

.our-portfolio .item .hover-effect .inner-content span {
  font-size: 15px;
  color: #fff;
}

.our-portfolio .item .thumb img {
  border-radius: 20px;
  transition: all .3s;
}

.owl-portfolio .owl-nav {
  position: absolute;
  top: 42%;
  width: 100%;
}

.owl-portfolio .owl-nav .owl-prev {
  position: absolute;
  left: 25px;
}

.owl-portfolio .owl-nav .owl-next {
  position: absolute;
  right: 30px;
}

.owl-portfolio .owl-nav .owl-prev span {
    color: transparent;
}

.owl-portfolio .owl-nav .owl-prev span:hover::after{
  opacity: 1;
}

.owl-portfolio .owl-nav .owl-prev span:after {
  width: 46px;
  height: 46px;
  background-color: orange;
  display: inline-block;
  text-align: center;
  line-height: 46px;
  border-radius: 50%;
  color: #fff;
  content: '\f104';
  font-size: 22px;
  font-family: 'FontAwesome';
  transition: all .5s;
  opacity: 0.5;
}

.owl-portfolio .owl-nav .owl-next span {
    color: transparent;
}

.owl-portfolio .owl-nav .owl-next span:hover::after{
  opacity: 1;
}

.owl-portfolio .owl-nav .owl-next span:after {
  width: 46px;
  height: 46px;
  background-color: orange;
  display: inline-block;
  text-align: center;
  line-height: 46px;
  border-radius: 50%;
  color: #fff;
  content: '\f105';
  font-size: 22px;
  font-family: 'FontAwesome';
  transition: all .5s;
  opacity: 0.5;
}

.owl-portfolio .owl-dots {
  text-align: center;
  margin-top: 40px;
}
.owl-portfolio .owl-dots .owl-dot {
  width: 6px;
  height: 6px;
  background-color: orange;
  border-radius: 50%;
  opacity: 0.3;
  margin: 0px 5px;
}

.owl-portfolio .owl-dots .active {
  opacity: 1;
  width: 10px;
  height: 10px;
}

/* 
---------------------------------------------
Pricing
--------------------------------------------- 
*/

.pricing-tables .tables-left-dec img {
  width: 418px;
  height: 851px;
  left: 0;
  top: 120px;
  position: absolute;
  z-index: 1;
}

.pricing-tables .tables-right-dec img {
  width: 359px;
  height: 848px;
  right: 0;
  top: 45px;
  position: absolute;
  z-index: 1
}

.pricing-tables {
  z-index: 2;
  position: relative;
  padding-top: 120px;
  margin-top: 0px;
}

.pricing-tables .section-heading {
  text-align: center;
  margin-bottom: 60px;
}

.pricing-tables .section-heading h2 {
  text-align: center;
  margin: 0px 60px 0px 60px;
  margin-bottom: -5px;
  position: relative;
  z-index: 1;
}

.pricing-tables .item {
  position: relative;
  z-index: 2;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 60px;
  text-align: center;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  border-radius: 45px;
}

.pricing-tables .item h4 {
  font-size: 20px;
  font-weight: 700;
  color: #2a2a2a;
}

.pricing-tables .item em {
  color: #ff695f;
  font-size: 15px;
  display: block;
  margin-top: 25px;
  text-decoration: line-through;
  font-style: normal;
}

.pricing-tables .item span {
  font-size: 44px;
  color: #ff695f;
  font-weight: 700;
  display: block;
  margin-top: -5px;
}

.pricing-tables .item ul {
  margin-top: 30px;
}

.pricing-tables .item ul li {
  display: block;
  font-size: 15px;
  color: #7a7a7a;
  margin-bottom: 20px;
}

.pricing-tables .item .main-blue-button {
  margin-top: 40px;
}

.pricing-tables .first-item {
  background-image: url(../images/first-plan-bg.png);
}

.pricing-tables .second-item {
  background-image: url(../images/second-plan-bg.png);
}

.pricing-tables .third-item {
  background-image: url(../images/third-plan-bg.png);
}


/* 
---------------------------------------------
Subscribe
--------------------------------------------- 
*/

.subscribe {
  margin-top: 120px;
}

.subscribe .inner-content {
  background-image: url(../images/subscribe-bg.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-radius: 20px;
  padding: 60px 0px;
  width: 100%;
  position: relative;
}

.subscribe .inner-content:after {
  content: '';
  background-image: url(../images/subscribe-dec.png);
  position: absolute;
  width: 195px;
  height: 138px;
  background-repeat: no-repeat;
  background-position: center center;
  right: -20px;
  top: -20px;
}

.subscribe .inner-content h2 {
  font-size: 30px;
  color: #fff;
  font-weight: 700;
  text-align: center;
  margin-bottom: 25px;
}

.subscribe .inner-content form {
  width: 100%;
  height: 80px;
  border-radius: 40px;
  background-color: #fff;
}

.subscribe .inner-content form input {
  width: 38.5%;
  margin-top: 20px;
  line-height: 40px;
  background-color: transparent;
  border: none;
  outline: none;
  padding: 0px 20px;
  font-size: 15px;
  color: #2a2a2a;
}

.subscribe .inner-content form input#website {
  border-right: 1px solid #eee;
}

.subscribe .inner-content form input::placeholder {
  color: #afafaf;
}

.subscribe .inner-content form button {
  display: inline-block;
  background-color: #03a4ed;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  width: 20%;
  margin-right: 10px;
  text-transform: capitalize;
  padding: 12px 20px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  border: none;
  text-align: center;
  transition: all .3s;
}

.subscribe .inner-content form button:hover {
  background-color: #ff695f;
}


/* 
---------------------------------------------
Video
--------------------------------------------- 
*/

.our-videos .videos-left-dec img {
  width: 220px;
  height: 471px;
  left: 0;
  top: 120px;
  position: absolute;
}

.our-videos .videos-right-dec img {
  width: 730px;
  height: 523px;
  right: 0;
  top: 45px;
  position: absolute;
}

.our-videos {
  position: relative;
  margin-bottom: -30px;
  padding-top: 120px;
  margin-top: 0px;
}

.our-videos .naccs {
  position: relative;
}

.our-videos .naccs .menu div {
  margin-bottom: 30px;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.our-videos .naccs .menu div {
  transition: all 0.3s;
}

.our-videos .naccs .menu div.active .thumb .inner-content {
  text-align: center;
  width: 100%;
  height: 100%;
  border-radius: 23px;
}

.our-videos .naccs .menu div.active .thumb .inner-content h4 {
  top: 40%;
  transform: translateY(-55%);
  position: relative;
}

.our-videos .naccs .menu div.active .thumb .inner-content span {
  display: block;
  position: relative;
  top: 55%;
  transform: translateY(-55%);
}

.our-videos ul.nacc {
  position: relative;
  min-height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.our-videos ul.nacc li {
  opacity: 0;
  transform: translateX(-50px);
  position: absolute;
  list-style: none;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.our-videos ul.nacc li.active {
  transition-delay: 0.3s;
  position: relative;
  z-index: 2;
  opacity: 1;
  transform: translateX(0px);
}

.our-videos ul.nacc li {
  width: 100%;
}

.our-videos .nacc .thumb {
  position: relative;
  border-radius: 23px;
}

.our-videos .nacc .thumb iframe {
  border-radius: 23px;
  height: 675px;
}

.our-videos .nacc .thumb .overlay-effect {
  background: rgb(255,104,95);
  background: linear-gradient(105deg, rgba(255,104,95,1) 0%, rgba(255,144,104,1) 100%);
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  border-top-left-radius: 23px;
  border-bottom-right-radius: 23px;
  padding: 35px 30px;
  text-align: center;
}

.our-videos .nacc .thumb .overlay-effect h4 {
  font-size: 20px;
  margin-top: 5px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}

.our-videos .nacc .thumb .overlay-effect span {
  font-size: 15px;
  color: #fff;
}

.our-videos .menu .thumb {
  position: relative;
}

.our-videos .menu .thumb .inner-content {
  background: rgb(255,104,95);
  background: linear-gradient(105deg, rgba(255,104,95,1) 0%, rgba(255,144,104,1) 100%);
  border-top-left-radius: 23px;
  border-bottom-right-radius: 23px;
  position: absolute;
  left: 0;
  top: 0;
  padding: 20px 30px;
  transition: all 0.3s;
}

.our-videos .menu .thumb .inner-content h4 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  transition: all 0.3s;
}

.our-videos .menu .thumb .inner-content span {
  font-size: 15px;
  color: #fff;
  font-weight: 400;
  display: none;
  transition: all 0.3s;
}


/* 
---------------------------------------------
contact
--------------------------------------------- 
*/

.contact-dec img {
  position: absolute;
  z-index: 1;
  width: 459px;
  height: 702px;
  right: 0;
  bottom: -400px;
}

.contact-left-dec img {
  position: absolute;
  z-index: 1;
  width: 174px;
  height: 319px;
  left: 0;
  top: 120px;
}

.contact-us {
  z-index: 2;
  position: relative;
  padding-top: 120px;
  margin-top: 0px;
}

.contact-us .section-heading h2 {
  margin-right: 100px;
  margin-bottom: 40px;
}

.contact-us #map iframe {
  border-radius: 23px;
  position: relative;
  z-index: 2;
}

.contact-us .info {
  margin-top: 30px;
  position: relative;
  z-index: 5;
  display: inline-flex;
}

.contact-us .info span {
  opacity: 1;
  display: inline-flex;
  margin-right: 30px;
}

.contact-us .info span i {
  float: left;
  width: 46px;
  height: 46px;
  display: inline-block;
  text-align: center;
  line-height: 46px;
  background: rgb(255,104,95);
  background: linear-gradient(105deg, rgba(255,104,95,1) 0%, rgba(255,144,104,1) 100%);
  border-radius: 50%;
  color: #fff;
  font-size: 22px;
  margin-left: 30px;
  margin-right: 15px;
}

.contact-us .info span a {
  color: #ff685f;
  font-size: 14px;
  font-weight: 400;
  line-height: 25px;
  text-transform: none;
}

form#contact {
  margin-left: -100px;
  position: relative;
  z-index: 2;
  background-image: url(../images/contact-form-bg.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  padding: 60px 120px;
  border-radius: 20px;
}

form#contact input {
  width: 100%;
  height: 46px;
  border-radius: 0px;
  background-color: transparent;
  border-bottom: 1px solid #9bdbf8;
  border-top: none;
  border-left: none;
  border-right: none;
  outline: none;
  font-size: 15px;
  font-weight: 300;
  color: #2a2a2a;
  padding: 0px 0px;
  margin-bottom: 35px;
}

form#contact input::placeholder {
  color: #afafaf;
}

form#contact button {
  display: inline-block;
  background-color: #ff695f;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  border: none;
  outline: none;
  transition: all .3s;
}

form#contact button:hover {
  background-color: #03a4ed;
}


/* 
---------------------------------------------
Footer Style
--------------------------------------------- 
*/

.footer-dec {
  width: 100%;
  margin-top: 160px;
}

footer {
  margin-top: -50px;
  z-index: 2;
  position: relative;
}

footer .footer-item h4 {
  font-size: 18px;
  font-weight: 700;
  color: #2a2a2a;
  margin-bottom: 30px;
}

footer .about .logo img {
  width: 89px;
  margin-bottom: 30px;
}

footer .about a {
  color: #afafaf;
  font-weight: 300;
}

footer .about ul {
  margin-top: 20px;
}

footer .about ul li {
  display: inline-block !important;
  margin-right: 5px;
}

footer .about ul li a {
  width: 32px;
  height: 32px;
  background-color: #03a4ed;
  color: #fff !important;
  border-radius: 50%;
  text-align: center;
  display: inline-block;
  line-height: 32px;
  font-size: 15px;
}

footer .about ul li a:hover {
  background-color: #ff695f;
}

footer .footer-item ul li {
  display: block;
  margin-bottom: 12px;
}

footer .footer-item ul li:last-child {
  margin-bottom: 0px;
}

footer .footer-item ul li a {
  font-size: 15px;
  color: #afafaf;
  transition: all .3s;
}

footer .footer-item ul li a:hover {
  color: #ff695f;
}

footer .footer-item p {
  font-size: 15px;
  color: #afafaf;
  margin-top: -5px;
}

footer .footer-item form {
  background-color: #03a4ed;
  height: 46px;
  border-radius: 23px;
  position: relative;
  margin-top: 15px;
}

footer .footer-item form input {
  line-height: 46px;
  background-color: transparent;
  border: none;
  font-size: 14px;
  padding: 0px 20px;
  outline: none;
}

footer .footer-item form input::placeholder {
  color: #fff;
}

footer .footer-item form button {
  position: absolute;
  right: 20px;
  top: 10px;
  color: #fff;
  background-color: transparent;
  border: none;
  outline: none;
}

footer .copyright p {
  text-align: center;
  border-top: 1px solid #eee;
  color: #afafaf;
  margin-top: 50px;
  padding: 20px 0px;
  font-weight: 300;
}

footer .copyright p a {
  color: #ff695f;
}

/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/


@media (max-width: 1240px) {
  .main-banner::before {
    width: 640px;
    height: 526px;
  }

}

@media (max-width: 992px) {
  .main-banner::before {
    display: none;
  }
  .main-banner .item {
    margin-right: 0px;
  }
  .main-banner  {
    padding-bottom: 0px;
  }
  .about-us .section-heading h2 {
    margin-right: 0px;
  }
  .fact-item {
    text-align: center;
  }
  .fact-item .icon {
    margin: 0 auto;
  }
  .our-portfolio .section-heading h2,
  .pricing-tables .section-heading h2 {
    margin: 0px;
  }
  .pricing-tables .item {
    margin-bottom: 30px;
  }
  .subscribe .inner-content {
    padding: 60px 30px;
  }
  .our-videos ul.nacc {
    margin-bottom: 30px;
  }
  .our-videos .naccs .menu div img {
    border-radius: 50px;
  }
  .our-videos .menu .thumb .inner-content {
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
  }
  .contact-us .section-heading h2 {
    margin-right: 0px;
    text-align: center;
  }
  .our-videos ul.nacc li {
    transform: translateX(0px);
    transform: translateY(-50px);
  }
  .our-videos .nacc .thumb iframe {
    height: 500px;
  }
  form#contact {
    margin-left: 0px;
    margin-top: 60px;
  }
  form#contact {
    padding: 45px 30px;
  }
  .footer-item {
    margin-bottom: 45px;
  }
  .subscribe-newsletters {
    margin-bottom: 0px;
  }
}

@media (max-width: 767px) {
  .main-banner .item .down-buttons {
    display: inline-block;
  }
  .main-banner .item .down-buttons .main-blue-button {
    margin-right: 0px;
    margin-bottom: 15px;
  }
  .main-banner .item .down-buttons .call-button a {
    margin-left: 0px;
  }
  .subscribe .inner-content:after {
    z-index: -1;
  }
  .subscribe .inner-content {
    padding: 60px 30px 100px 30px;
  }
  .subscribe .inner-content form input {
    width: 49%;
  }
  .subscribe .inner-content form button {
    width: 100%;
    background-color: orange;
    margin-top: 30px;
  }
  .our-videos ul.nacc li {
    transform: translateX(0px);
    transform: translateY(-50px);
  }
  .contact-left-dec {
    display: none;
  }
  .contact-us .info {
    display: inline-block;
  }
  .contact-us .info span {
    margin-bottom: 20px;
  }
}
.academy-stats {
  background: #f9f9f9;
  padding: 60px 0;
}

.stat-box h2 {
  font-size: 42px;
  font-weight: 700;
  color: orange;
}

.stat-box p {
  margin-top: 10px;
  font-weight: 500;
}
.academy-form input,
.academy-form select {
  width: 100%;
  margin-bottom: 15px;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #ddd;
}

/* ----- Branding sur une ligne ----- */
.branding-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 30px;
    text-decoration: none;
    display: inline-flex; /* NET243 et SARL alignés */
    align-items: center;
    cursor: pointer;
    position: relative;
    transition: all 0.4s ease;
}

/* NET243 : dégradé animé circulaire + pulse */
.brand-main {
    background: linear-gradient(0deg, orange, red, yellow, orange);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientRotate 6s linear infinite, pulse 2s infinite alternate;
}

/* SARL : shine effect fluide */
.brand-sub {
    color: black;
    margin-left: 5px; /* petit espace */
    position: relative;
    overflow: hidden;
}
.brand-sub::before {
    content: '';
    position: absolute;
    top: 0; left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255,255,255,0.6), rgba(255,255,255,0));
    transform: skewX(-25deg);
    animation: shine 3s linear infinite;
}

/* Hover effects */
.branding-text:hover .brand-main {
    transform: scale(1.25);
}
.branding-text:hover .brand-sub {
    transform: scale(1.1);
}

/* Scroll effects */
.header-sticky.scrolled .brand-main {
    animation: gradientRotate 4s linear infinite, pulse 1.5s infinite alternate;
}
.header-sticky.scrolled .brand-sub {
    color: #FF6600;
}

/* ----- Animations ----- */
@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.08); opacity: 0.9; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes gradientRotate {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes shine {
    0% { left: -75%; }
    100% { left: 125%; }
}

/* Menu responsive */
.menu-trigger {
    display: none;
    cursor: pointer;
}
@media (max-width: 991px) {
    .nav { display: none; }
    .menu-trigger { display: block; }
}
.academy-whatsapp-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #e9f9ef;
    border-left: 4px solid #25D366;
    padding: 6px 10px;
    margin-bottom: 13px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
    color: #075e54;
 
}
.academy-form textarea#message {
    height: 100px;        /* même hauteur que les inputs */
    line-height: 24px;
    padding: 12px 15px;
    resize: none;        /* empêche l’utilisateur de l’agrandir */
}


.academy-whatsapp-badge img {
    width: 22px;
    height: 22px;
}
.academy-form input,
.academy-form select,
.academy-form textarea {
    width: 100%;
    height: 50px;            /* TAILLE IDENTIQUE */
    padding: 12px 15px;
    border-radius: 6px;
    border: 1px solid #ddd;
    font-size: 15px;
    font-family: inherit;
    box-sizing: border-box;
}
.academy-form textarea {
    resize: none;        /* empêche le redimensionnement manuel */
    line-height: 26px;
}
.academy-form textarea:focus {
    height: 120px;
    transition: height 0.3s ease;
}
/* Réduire l'espace entre les sections Academy */
#academy-register {
    margin-bottom: 20px; /* espace inférieur réduit */
}

.academy-stats {
    margin-top: 20px; /* optionnel si nécessaire */
}
@media (max-width: 767px) {
    #academy-register {
        margin-bottom: 15px;
    }
    .academy-stats {
        margin-top: 15px;
    }
}

/* Réduction espace bas - Academy register */
#academy-register.contact-us {
    padding-bottom: 40px;
}
.academy-stats {
    padding-top: 40px;
}
@media (max-width: 767px) {
    #academy-register.contact-us {
        padding-bottom: 20px;
    }
}
@media (max-width: 767px) {
    .academy-stats {
        padding-top: 20px;
    }
}

/* Image promo Starlink */
.starlink-promo {
    text-align: center;
    margin: 30px 0 50px 0;
}

.starlink-promo img {
    max-width: 520px;     /* LIMITE la largeur */
    width: 100%;
    max-height: 650px;    /* LIMITE la hauteur */
    object-fit: contain; /* conserve le ratio */
    height: auto;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.25);
}
.starlink-promo {
    background: #f8f9fc;
    padding: 25px;
    border-radius: 16px;
    display: flex;
    justify-content: center;
}

@media (max-width: 767px) {
    .starlink-promo img {
        max-width: 90%;
        max-height: 480px;
    }
}
.starlink-promo-row {
    margin: 30px 0 50px;
    align-items: center;
}

.starlink-promo {
    display: flex;
    justify-content: center;
}

.starlink-promo img {
    max-width: 100%;
    max-height: 500px;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.25);
}
@media (max-width: 767px) {
    .starlink-promo img {
        max-height: 380px;
        margin-bottom: 20px;
    }
}
/* Réduction espace entre Academy et Starlink */
#academy {
    margin-bottom: 40px !important;
    padding-bottom: 20px !important;
}

#starlink {
    margin-top: 20px !important;
    padding-top: 10px !important;
}
@media (max-width: 767px) {
    #academy {
        margin-bottom: 20px !important;
        padding-bottom: 10px !important;
    }

    #starlink {
        margin-top: 20px !important;
        padding-top: 10px !important;
    }
}
/* Réduire espace entre titre Starlink et images promo */
#starlink .section-heading {
    margin-bottom: 20px !important;
}

#starlink .starlink-promo-row {
    margin-top: 0 !important;
}
@media (max-width: 767px) {
    #starlink .section-heading {
        margin-bottom: 15px !important;
    }
}
/* Style section heading Starlink */
#starlink .section-heading {
    background: linear-gradient(135deg, #f8f9fc, #f7f7f7);
    padding: 30px 25px;
    border-radius: 16px;
    color: #000000;
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;
}

/* Effet léger décoratif */
#starlink .section-heading::before {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
}

/* Titre */
#starlink .section-heading h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #000000;
}

#starlink .section-heading h2 em {
    color: #ff7a00;
    font-style: normal;
}

/* Texte descriptif */
#starlink .section-heading p {
    max-width: 720px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.7;
    color: #0d1b2a;
}
@media (max-width: 767px) {
    #starlink .section-heading {
        padding: 22px 18px;
    }

    #starlink .section-heading h2 {
        font-size: 24px;
    }

    #starlink .section-heading p {
        font-size: 14px;
    }
}
#starlink .section-heading {
    padding-bottom: 15px;
    border-bottom: 2px solid #ff7a00;
}
/* Badge disponibilité Starlink */
#starlink .starlink-badge {
    display: inline-block;
    margin: 10px auto 15px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #0d1b2a;
    background: #ff7a00;
    border-radius: 20px;
    text-align: center;
    letter-spacing: 0.3px;
}
@media (max-width: 767px) {
    #starlink .starlink-badge {
        font-size: 12px;
        padding: 5px 12px;
        margin-bottom: 12px;
    }
}
@media (max-width: 767px) {

    /* Réduire espace entre les deux images promo */
    #starlink .starlink-promo-row {
        row-gap: 10px;        /* espace vertical entre les lignes */
    }

    #starlink .starlink-promo {
        margin-bottom: 0;    /* supprime marge inutile */
    }

    #starlink .starlink-promo img {
        margin-bottom: 0;
    }
}
/* Conteneur des offres */
.pricing-item {
    background-color: #ffffff; /* fond blanc */
    border: 2px solid #ff6600; /* bordure orange */
    border-radius: 8px;
    padding: 30px 20px;
    text-align: center;
    margin-bottom: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pricing-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* Titres */
.pricing-item h4 {
    color: #ff6600; /* orange */
    margin-bottom: 15px;
    font-weight: bold;
}

.pricing-item h1 {
    color: #000000; /* noir */
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.pricing-item h1 span {
    font-size: 1rem;
    color: #ffa500; /* orange pour /mois */
}

/* Liste des fonctionnalités */
.pricing-item ul {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

.pricing-item ul li {
    padding: 8px 0;
    border-bottom: 1px solid #ff6600; /* séparateur orange */
    color: #000000; /* texte noir */
}

/* Boutons */
.pricing-item .main-button a {
    display: inline-block;
    background-color: #ffa500; /* fond orange */
    color: #ffffff; /* texte blanc */
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
}

.pricing-item .main-button a:hover {
    background-color: #57443d; /* noir au survol */
    color: #ff6600; /* texte orange */
}
/* Section commande Starlink */
#starlink-commande {
    background-color: #ffffff;
    padding: 50px 20px;
    border-top: 1px solid #ff6600;
}

/* Titre */
#starlink-commande h4 {
    color: #ff6600;
    font-weight: 600;
    margin-bottom: 12px;
}

/* Texte */
#starlink-commande p {
    color: black;
    font-size: 0.95rem;
    margin-bottom: 25px;
}

/* Bouton WhatsApp */
#starlink-commande .main-button {
    display: inline-block;
    padding: 12px 30px;
    border: 1px solid #ff6600;
    background-color: #ff6600;
    color: #ffffff;
    font-weight: 500;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.25s ease;
}

#starlink-commande .main-button:hover {
    background-color: #ffffff;
    color: #ff6600;
}
.info span {
          display: flex;         /* Active le mode Flexbox */
          align-items: center;    /* Centre le texte verticalement par rapport à l'icône */
          margin-bottom: 15px;    /* Espace entre les lignes */
        }
        .info i {
          width: 30px;            /* Largeur fixe pour que tout soit bien aligné verticalement */
          font-size: 20px;        /* Taille de l'icône */
          margin-right: 10px;     /* Espace entre l'icône et le texte */
          text-align: center;     /* Centre l'icône dans sa zone de 30px */
        }
        .info a {
          text-decoration: none;  /* Enlève le soulignement des liens */
          color: inherit;         /* Garde la couleur du texte parent */
        }
        footer {
    padding: 20px 0; /* Ajoute un peu d'espace en haut et en bas */
    width: 100%;
}

footer .copyright {
    text-align: center; /* Centre le texte */
}

footer p {
    margin: 0; /* Évite les décalages imprévus */
}
/* Style pour la section Contact */
.info-details {
  margin-top: 30px;
}

.info-item-styled {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  background: #f9f9f9;
  padding: 15px;
  border-radius: 10px;
  transition: 0.3s;
}

.info-item-styled:hover {
  transform: translateX(10px);
  background: #fff;
  box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.icon-box {
  width: 50px;
  height: 50px;
  background: #03a4ed;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-right: 20px;
}

.text-box h5 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #2a2a2a;
}

.text-box a {
  color: #777;
  text-decoration: none;
  font-size: 14px;
}

/* Formulaire */
.contact-form-styled {
  background: #fff;
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 0 30px rgba(0,0,0,0.1);
}

.contact-form-styled input, .contact-form-styled textarea {
  width: 100%;
  padding: 12px 15px;
  margin-bottom: 20px;
  border: 1px solid #eee;
  border-radius: 5px;
  outline: none;
}

.contact-form-styled textarea { height: 150px; }

.main-button-styled {
  background: #03a4ed;
  color: #fff;
  border: none;
  padding: 12px 25px;
  border-radius: 25px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  transition: 0.3s;
}

.main-button-styled:hover { background: #fe3f40; }

/* Réduit l'espace au bas de la section contact */
#contact {
    padding-bottom: 0px !important;
    margin-bottom: -50px !important; /* Marge négative pour remonter le footer */
}

/* Réduit l'espace de la décoration du footer */
.footer-dec {
    height: 100px; /* Force une hauteur plus petite */
    overflow: hidden;
}

/* Ajuste l'espacement du footer lui-même */
footer {
    padding-top: 30px !important;
    margin-top: 0px !important;
}
/* Conteneur pour aligner les boutons côte à côte */
.d-flex.gap-3 {
    display: flex;
    gap: 15px; /* Espace entre les deux boutons */
}

.main-button-styled {
    flex: 2; /* Le bouton envoyer prend plus de place */
    background: #03a4ed;
    color: #fff;
    border: none;
    padding: 12px 25px;
    border-radius: 25px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.3s;
}

.cancel-button-styled {
    flex: 1; /* Le bouton annuler est plus petit */
    background: #f1f1f1; /* Couleur sobre */
    color: #666;
    border: 1px solid #ddd;
    padding: 12px 25px;
    border-radius: 25px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.3s;
}

.cancel-button-styled:hover {
    background: #e0e0e0;
    color: #333;
}
/* Conteneur pour mettre les boutons côte à côte */
.button-group-container {
    display: flex;
    gap: 15px; /* Espace entre les deux boutons */
    margin-top: 10px;
}

/* Style de base identique pour les deux boutons */
.btn-custom-contact {
    flex: 1; /* Force les deux boutons à avoir exactement la même largeur */
    padding: 12px 25px;
    border-radius: 25px;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    text-align: center;
    outline: none;
    
    /* Couleurs du bouton Envoyer (Bleu) */
    background: #03a4ed;
    color: #fff;
}

.btn-custom-contact:hover {
    background: #fe3f40; /* Devient rouge au survol */
}

/* Style spécifique pour le bouton Annuler (si vous voulez une nuance différente) */
/* Supprimez ou modifiez cette partie si vous les voulez 100% identiques en couleur */
.btn-secondary-contact {
    background: #4a4a4a; /* Gris foncé pour différencier l'action */
}

.btn-secondary-contact:hover {
    background: #2a2a2a;
}
/* --- HARMONISATION UNIVERSELLE DES BOUTONS --- */

/* Style de base pour tous les boutons (Envoi, Liens, Inscription) */
.main-button a, 
.main-button button, 
.main-button-styled, 
.btn-custom-contact,
.academy-form button[type="submit"],
.main-blue-button-hover a {
    display: inline-block !important;
    background: #03a4ed !important; /* Bleu NET243 */
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-transform: capitalize !important;
    padding: 12px 25px !important;
    border-radius: 25px !important;
    transition: all .3s !important;
    border: none !important;
    outline: none !important;
    text-decoration: none !important;
    cursor: pointer !important;
    text-align: center !important;
}

/* Style spécifique pour les boutons "Annuler" ou "Effacer" */
.cancel-button-styled, 
.academy-form button[type="reset"] {
    display: inline-block !important;
    background: #4a4a4a !important; /* Gris foncé professionnel */
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    padding: 12px 25px !important;
    border-radius: 25px !important;
    transition: all .3s !important;
    border: none !important;
    cursor: pointer !important;
    flex: 1; /* Pour l'alignement côte à côte */
}

/* Effet au survol (Hover) pour TOUS les boutons */
.main-button a:hover, 
.main-button button:hover, 
.main-button-styled:hover, 
.btn-custom-contact:hover,
.main-blue-button-hover a:hover,
.academy-form button[type="submit"]:hover {
    background: #fe3f40 !important; /* Rouge Onix au survol */
    color: #fff !important;
}

.cancel-button-styled:hover, 
.academy-form button[type="reset"]:hover {
    background: #2a2a2a !important;
    color: #fff !important;
}

/* Ajustement pour les groupes de boutons (Contact & Academy) */
.d-flex.gap-3, .button-group-container {
    display: flex !important;
    gap: 15px !important;
    margin-top: 15px !important;
}

.d-flex.gap-3 button, .button-group-container button {
    flex: 1; /* Donne la même largeur aux deux boutons */
}
.gap-3 {
    gap: 15px !important;
}
.pricing-item.featured {
    transform: scale(1.05); /* Met l'offre centrale en avant */
    border: 2px solid #03a4ed;
}
.qr-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  background: rgba(0,0,0,0.6);
  border-radius: 50%;

  opacity: 0;
  transition: 0.3s;
}
html {
  scroll-behavior: smooth;
}

.profil-membre:target {
  scroll-margin-top: 120px;
}
html {
  scroll-behavior: smooth;
}

#equipe [id] {
  scroll-margin-top: 120px; /* ajuste selon ton header */
}

/* effet visuel quand on arrive sur un profil */
.profil-membre:target {
  animation: highlight 1.2s ease;
  border: 3px solid #ff9900 !important;
  transform: scale(1.02);
}

@keyframes highlight {
  0% { background: transparent; }
  50% { background: rgba(255,153,0,0.15); }
  100% { background: transparent; }
}
html {
  scroll-behavior: smooth;
}

[id] {
  scroll-margin-top: 120px;
}

.profil-membre:target {
  border: 3px solid #ff9955;
  transform: scale(1.02);
  transition: 0.3s ease;
}
.modalOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modalCard {
  width: 320px;
  background: #fff;
  border-radius: 20px;
  padding: 25px;
  text-align: center;
  position: relative;
  animation: pop .25s ease;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

@keyframes pop {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.avatar {
  width: 120px;
  height: 120px;
  margin: auto;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #ff9900;
}

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

.modalCard h2 {
  margin-top: 15px;
  font-size: 18px;
}

.modalCard h4 {
  color: #ff9900;
  font-size: 13px;
}

.modalCard p {
  font-size: 13px;
  color: #555;
}

.btn {
  display: inline-block;
  margin-top: 15px;
  padding: 10px 20px;
  background: #25D366;
  color: white;
  border-radius: 25px;
  text-decoration: none;
}

.close {
  position: absolute;
  top: 10px;
  right: 15px;
  border: none;
  background: none;
  font-size: 18px;
  cursor: pointer;
}
html {
  scroll-behavior: smooth;
}

/* Empêche le header de cacher le profil */
[id] {
  scroll-margin-top: 120px;
}

/* Effet visible quand on arrive via QR */
[id]:target .card-inner {
  animation: focus 0.8s ease;
  border: 3px solid #ff9955;
  transform: scale(1.02);
}

@keyframes focus {
  0% { background: transparent; }
  50% { background: rgba(255,153,85,0.15); }
  100% { background: transparent; }
}
.profile-card {
    position: relative;
    overflow: hidden;
    transition: 0.3s ease;
}

.profile-card:hover {
    transform: translateY(-5px);
}

.profile-card:target {
    outline: 3px solid #ff6600;
    transform: scale(1.02);
    background: rgba(255,102,0,0.05);
}

.profile-img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 15px;
    position: relative;
}

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

/* QR overlay propre */
.qr-hover {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.3s ease;
}

.profile-card:hover .qr-hover {
    opacity: 1;
}

.qr-hover img {
    width: 120px;
    height: 120px;
    background: white;
    padding: 5px;
    border-radius: 10px;
}
.profil-membre {
    scroll-margin-top: 120px; /* ajuste selon ton header */
}
/* Ce style s'activera grâce au script ci-dessus */
.profil-selectionne {
    border: 4px solid #ff9955 !important;
    background-color: rgba(255, 102, 0, 0.1) !important;
    transform: scale(1.05);
    transition: all 0.5s ease;
}
/* Assurez-vous que votre Header est bien au premier plan */
header, .navbar {
    z-index: 9999 !important;
    position: sticky; /* ou fixed selon votre design */
    top: 0;
    background-color: #fff; /* Pour éviter la transparence derrière le menu */
}

/* Donnez une couche inférieure aux profils */
.profil-membre, .profil-selectionne {
    z-index: 1;
    position: relative;
}
/* --- NETTOYAGE FINAL MOBILE (NET243) --- */
@media (max-width: 768px) {
    /* Fixe la barre de navigation proprement en haut */
    header.header-area {
        position: fixed !important;
        top: 0 !important;
        background-color: #ffffff !important;
        z-index: 10000 !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        height: 80px !important;
        display: flex !important;
        align-items: center;
    }

    /* Force le logo à rester à gauche et visible */
    .header-area .main-nav .logo {
        line-height: 80px !important;
        float: left !important;
        margin-left: 15px !important;
    }

    /* Cache le menu lors d'un accès par scan QR Code */
    body.body-scanned .nav {
        display: none !important;
    }

    /* Espace pour ne pas que le contenu passe sous le logo */
    body {
        padding-top: 100px !important;
    }

    /* Zone d'arrêt pour le profil scanné */
    .profil-membre {
        scroll-margin-top: 120px !important;
    }
}

/* Style de l'encadré orange */
.profil-selectionne {
    border: 5px solid #ffbb00 !important;
    background-color: rgba(255, 102, 0, 0.05) !important;
    border-radius: 15px;
}