
html, body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}



p {
  font-size: 15px;
}

.second-clr {
color:var(--second-color);
}


/* HEADER */ 

.bx-static {
    padding: 10px 0;
  }

header .navbar-brand img {
width: 50px;
}

.offcanvas 
{
  background-color: rgba(0,0,0,.9);
}

.offcanvas nav ul li a
{
  color: #fff;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  font-size: 18px;
  line-height: 1.2;
  padding: 12px 0;
  text-transform: uppercase;
}

#head-header 
{
  
  z-index: 88;
  width: 100%;
  position: fixed;
}


.offcanvas-backdrop {
  display:none!important;
}

@media only screen and (max-width: 1199px) {
  .navbar-nav .nav-item a {
    font-size: 18px;
  }
}

.offcanvas-end {
  width: 100%;
  border-left: 0;
}

.offcanvas-body {
  padding: 4rem 1rem;
}

#home h1
{
    color:white;
    text-align: center;
    font-size:1.6rem;
    padding-bottom:6vh;
}

.bx-home .profile-img
{
    -webkit-animation: SlowFloat 2s infinite  alternate;
	animation: SlowFloat 2s infinite  alternate;
}

@media only screen and (max-width: 575px) {
    .bx-home .profile-img {
      max-width: 361px;
    }
  }

.p-12
{
    padding:12vh 0 15vh 0;
}

@media only screen and (max-width: 767px) {
.bx-home .profile-img {
    display: block;
    margin: 0 auto;
    }
}

.bx-home {
background-image: url("https://www.jellypir.at/bienvenue/wp-content/uploads/2022/10/piratundersea-1.jpg");
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}

  /* Définissez d'abord le style pour les écrans de moins de 767px */
  @media only screen and (max-width: 767px) {
    .bx-home  {
      background-image: url(../img/bg/bg-home-mob.jpg);
      background-attachment: scroll;
  }
  }


.parallax 
{
    mix-blend-mode: lighten;
}

.bx-home #shape2 {
    width: 25px;
  }


  .bg {
    background-color: #0000008c;
  }

  header .nav-sec .navbar-nav .nav-link {
    color: #fff;
    text-transform:uppercase;
  }

  header .nav-sec .navbar-nav .nav-link:hover , header .nav-sec .navbar-nav .nav-link:focus {
    color: #89f4ff;
  }

  @media only screen and (max-width: 767px) {
    header .nav-sec .navbar-nav .nav-link {
        color: #001883;
        text-transform:uppercase;
        text-align:center;
      }
    header .nav-sec .navbar-nav .nav-link:hover {
        color: #001883;
        }
    }
    @media only screen and (max-width: 991px) {
      .navbar-dark .navbar-toggler i {
        color: #ffffff;
    
      }
    }

/* ABOUT */ 

    .title--about
    {
        color: rgba(99,115,129,.5);
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        line-height: 26px;
        letter-spacing: 1.6px;
    }

    .about-h2--italic
    {
        color: #252930;
    font-size: 43px;
    font-weight: 400;
    line-height: 72px;
    letter-spacing: 0px;
    }

      .about-h2--italic .primary-clr
      {
        color:var(--first-color);
      }

    #about .div-mission-vision--p p
    {
        color: #546985;
        letter-spacing: 0;
        line-height: 26px;
        font-family: 'Hind', sans-serif;
    }

    .signature-pia {
        width:20%;
      }

      button.btn.btn-dark
      {
        background-color: rgba(37,41,48,.94);
        border-color: rgba(22,32,47,0);
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.3px;
        border-style: solid;
        border-width: 2px;
        border-radius: 0;
        padding: 18px 46px;
         -webkit-transition: all .3s ease-out!important;-moz-transition:  all .3s ease-out!important;-ms-transition: all .3s ease-out!important;-o-transition:  all .3s ease-out!important;transition: all .3s ease-out!important;
      }

      button.btn.btn-dark a 
      {
        color: #fff;
      }

      button.btn.btn-dark:hover {
        transform: translateY(-8px);
      }

      @media only screen and (max-width: 575px) {
        .cont-serv--obj div.col-6{
          margin:2rem auto;
        }
      }

/* SERVICE */ 


    .bx-experience-section::after {
      content: "";
      width: 100%;
      height: 250px;
      background-image: url(../img/bg/hero-shape-2.png);
      background-position: center;
      background-size: cover;
      position: absolute;
      bottom: -1px;
      left: 0;
      z-index: 5;
    }

    .bx-experience-section {
        background-image: url("https://www.jellypir.at/bienvenue/wp-content/uploads/2022/10/sea-1.jpg");
        background-position: top center;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
    }

  /* Définissez d'abord le style pour les écrans de moins de 767px */
  @media only screen and (max-width: 767px) {
    .bx-experience-section {
      background-image: url(../img/bg/bg-service-mob.jpg);
      background-attachment: scroll;
  }
  }


    .bx-experience-section .shape-1::before,.bx-experience-section .shape-2::before,.bx-experience-section .shape-2::after {
        mix-blend-mode: lighten;
      }


      .bx-experience-section .shape-1::after {
        content: "";
        background-color: #f1c7a100;
        background-image: url(../img/achievement/shape-1.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        height: 50px;
        width: 50px;
        position: absolute;
        top: 20%;
        left: 10%;
        mix-blend-mode: lighten;
      }





      section .title p.light-txt {
        color: rgb(204, 240, 255);
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        line-height: 26px;
        letter-spacing: 1.6px;
      }

      .list-service .col-md-4
      {
        padding:20px;
      }

      .list-service img
      {
        width: 35%;
        -webkit-animation: SlowFloat 2s infinite  alternate;
        animation: SlowFloat 2s infinite  alternate;
      }
      .bx-news-section {
        background-color: white;
      }

      .bx-news-section .title {
        padding-top: 0;
        text-align: center;
      }


      .footer.bg-clr {
        padding: 30px;
        background-color: #ffffff;

      }

      footer.footer * {
        color:  var(--first-color)!important;
      }



      .bx-contact-section {
        background-image: url("https://www.jellypir.at/bienvenue/wp-content/uploads/2022/10/fond-marin-flore-rouge.jpg");
        background-position: top center;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        padding:30vh 0;
        position: relative;
    }

/* Définissez d'abord le style pour les écrans de moins de 767px */
@media only screen and (max-width: 767px) {
    .bx-contact-section {
      background-image: url(../img/bg/bg-contact-mob.jpg);
      background-attachment: scroll;
  }
}


    .bx-contact-section::before {
      content: "";
      width: 100%;
      height: 250px;
      background-image: url(../img/bg/wave-double.svg);
      background-position: center;
      background-size: cover;
      position: absolute;
      top: -1px;
      left: 0;
      z-index: 5;
    }

    .bx-contact-section::after {
      content: "";
      width: 100%;
      height: 250px;
      background-image: url(../img/bg/wave-double-invert.svg);
      background-position: center;
      background-size: cover;
      position: absolute;
      bottom: -1px;
      left: 0;
      z-index: 5;
    }


    .icon-rs a 
    {
      box-shadow: 10px 10px 30px 0 rgba(47,120,255,.25);
      color: #fff;
      margin-left: 5px;
      transition: all .5s;
      background-image: linear-gradient(to right,#2e79ff 0,#18b5ff 51%,#2e79ff 100%);
      background-size: 200%;
      width: 90px;
      height: 90px;
      line-height: 90px;
      border-radius: 100%;
      font-size: 49px;
      display: inline-block;
      margin :0.4rem;
        }

    .icon-rs a:hover {
      background-position: right center;
    }




/* ANIMATION */ 
      @-webkit-keyframes SlowFloat
{
	0%
	{
		transform: translateY(0);
	}

	100%
	{
		transform: translateY(-25px);
	}
}

