/* ========= [ * page-home_1 ]  =========*/
.home-st1 {
  position: relative; }

@media screen and (max-width: 991px) {
  .home-st1 .fsz-70 {
    font-size: 40px !important; }
  .home-st1 .pt-120 {
    padding-top: 60px !important; }
  .home-st1 .pb-120 {
    padding-bottom: 60px !important; }
  .home-st1 .mb-60 {
    margin-bottom: 40px !important; } }

.ui-navbar-st1 {
  position: relative;
  padding: 30px 0 0;
  z-index: 99; }
  .ui-navbar-st1 .navbar-brand {
    height: 30px; }
  .ui-navbar-st1 .navbar-collapse {
    position: relative; }
  .ui-navbar-st1 .navbar-nav {
    position: relative;
    border-radius: 10px;
    border: 1px solid #444;
    background-color: rgba(113, 110, 110, 0.08);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 0 30px; }
    .ui-navbar-st1 .navbar-nav .nav-link {
      position: relative;
      font-size: 14px;
      text-transform: uppercase;
      padding: 15px; }
      .ui-navbar-st1 .navbar-nav .nav-link::before {
        position: absolute;
        content: "";
        left: calc(50% - 2px);
        bottom: 8px;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background-color: #fff;
        opacity: 0;
        -webkit-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease; }
      .ui-navbar-st1 .navbar-nav .nav-link:hover::before, .ui-navbar-st1 .navbar-nav .nav-link.active::before {
        opacity: 1; }

@media screen and (max-width: 991px) {
  .ui-navbar-st1 .navbar-nav {
    margin-top: 30px;
    padding: 10px; }
    .ui-navbar-st1 .navbar-nav .nav-link::before {
      display: none; } }

.ui-header-st1 {
  position: relative;
  padding: 120px 0; }
  .ui-header-st1 h1 {
    position: relative;
    font-size: 150px;
    line-height: 1;
    text-align: center; }

@media screen and (max-width: 991px) {
  .ui-header-st1 {
    padding: 60px 0; }
    .ui-header-st1 h1 {
      font-size: 50px;
      margin-bottom: 30px; } }

.ui-about-st1 {
  position: relative; }
  .ui-about-st1 .txt {
    text-indent: 80px; }
  .ui-about-st1 .rotate-box {
    position: relative;
    width: 180px;
    height: 180px;
    display: block;
    margin-top: 350px;
    -webkit-margin-start: -5px;
    margin-inline-start: -5px; }
    .ui-about-st1 .rotate-box .icon {
      position: absolute;
      left: 50%;
      top: 50%;
      padding: 5px;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      text-align: center;
      font-size: 24px; }
    .ui-about-st1 .rotate-box .rotate-text {
      -webkit-animation: rotateText 20s linear infinite;
      animation: rotateText 20s linear infinite;
      text-transform: capitalize;
      position: absolute;
      left: 0;
      top: 0;
      border-radius: 50%;
      font-size: 21px;
      font-weight: 300; }
    .ui-about-st1 .rotate-box .rotate-circle svg {
      width: 180px;
      height: 180px;
      fill: #fff;
      -webkit-transform: scale(1.3);
      -ms-transform: scale(1.3);
      transform: scale(1.3);
      outline-offset: -50px;
      border-radius: 50%; }

@-webkit-keyframes rotateText {
  0% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); } }

@keyframes rotateText {
  0% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); } }
  .ui-about-st1 .marq-slider {
    position: relative;
    z-index: 20;
    margin-top: -80px;
    overflow: hidden; }
    .ui-about-st1 .marq-slider h2 {
      font-size: 150px; }
    .ui-about-st1 .marq-slider .swiper-wrapper {
      -webkit-transition-timing-function: linear !important;
      -o-transition-timing-function: linear !important;
      transition-timing-function: linear !important;
      position: relative;
      pointer-events: none; }
      .ui-about-st1 .marq-slider .swiper-wrapper .swiper-slide {
        width: -webkit-max-content !important;
        width: -moz-max-content !important;
        width: max-content !important; }

@media screen and (max-width: 991px) {
  .ui-about-st1 {
    overflow: hidden; }
    .ui-about-st1 .marq-slider {
      margin-top: 30px; }
      .ui-about-st1 .marq-slider h2 {
        font-size: 50px; }
    .ui-about-st1 .rotate-box {
      margin-top: 50px; }
    .ui-about-st1 .th-650 {
      height: 350px !important;
      margin-top: 30px; } }

.ui-portfolio-st1 {
  position: relative;
  padding: 60px 0; }
  .ui-portfolio-st1 .portfolio-slider {
    position: relative;
    -webkit-perspective: 2000px;
    perspective: 2000px;
    -webkit-perspective-origin: 50%;
    perspective-origin: 50%;
    z-index: 10; }
    .ui-portfolio-st1 .portfolio-slider .item {
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
      margin: 60px 0; }
  .ui-portfolio-st1 .lg-title {
    position: absolute;
    top: 7vh;
    left: 0;
    width: 100%;
    font-size: 250px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    z-index: 1;
    color: #282828; }

@media screen and (max-width: 991px) {
  .ui-portfolio-st1 .portfolio-slider .item {
    margin: 20px 0; } }

.ui-services-st1 {
  position: relative; }
  .ui-services-st1 .service-card {
    position: relative;
    padding: 50px 40px;
    border-radius: 15px;
    background-color: #212121; }
    .ui-services-st1 .service-card .card-title {
      font-size: 28px;
      margin-bottom: 30px; }
    .ui-services-st1 .service-card .dot-list {
      position: relative;
      margin-top: 30px; }
      .ui-services-st1 .service-card .dot-list li {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin: 10px 0;
        -webkit-padding-start: 15px;
        padding-inline-start: 15px;
        text-transform: uppercase; }
        .ui-services-st1 .service-card .dot-list li::before {
          position: absolute;
          content: "";
          width: 3px;
          height: 3px;
          left: 0;
          top: 8px;
          border-radius: 50%;
          background-color: #fff;
          -webkit-margin-end: 5px;
          margin-inline-end: 5px; }

@media screen and (max-width: 991px) {
  .ui-services-st1 .service-card {
    padding: 30px 20px; } }

.ui-testimonials-st1 {
  position: relative;
  padding: 120px 0; }
  .ui-testimonials-st1 .testimonials-slider {
    position: relative;
    overflow: hidden; }
  .ui-testimonials-st1 .testi-card {
    position: relative;
    padding: 40px;
    border-radius: 15px;
    border: 1px solid #444;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px); }
  .ui-testimonials-st1 .avatars {
    position: relative;
    overflow: hidden;
    height: 320px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
    .ui-testimonials-st1 .avatars .gallery-thumbs {
      position: relative;
      height: 250px;
      overflow: hidden; }
    .ui-testimonials-st1 .avatars .avatar-wrapper {
      cursor: pointer;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease; }
      .ui-testimonials-st1 .avatars .avatar-wrapper .arrow {
        opacity: 0; }
      .ui-testimonials-st1 .avatars .avatar-wrapper .avatar {
        border: 1px solid transparent;
        -webkit-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease; }
    .ui-testimonials-st1 .avatars .swiper-slide-thumb-active .avatar-wrapper {
      margin-left: 0; }
      .ui-testimonials-st1 .avatars .swiper-slide-thumb-active .avatar-wrapper .arrow {
        opacity: 1; }
      .ui-testimonials-st1 .avatars .swiper-slide-thumb-active .avatar-wrapper .avatar {
        border-color: #fff2;
        padding: 5px; }

@media screen and (max-width: 991px) {
  .ui-testimonials-st1 .avatars {
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content; }
    .ui-testimonials-st1 .avatars .gallery-thumbs {
      height: -webkit-max-content;
      height: -moz-max-content;
      height: max-content; }
      .ui-testimonials-st1 .avatars .gallery-thumbs .avatar-wrapper {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column; }
        .ui-testimonials-st1 .avatars .gallery-thumbs .avatar-wrapper .arrow {
          -webkit-transform: rotate(90deg);
          -ms-transform: rotate(90deg);
          transform: rotate(90deg);
          margin: 0 !important; } }

.ui-footer-st1 {
  position: relative;
  padding: 120px 0 60px;
  background-color: #212121;
  z-index: 10; }
  .ui-footer-st1 .body-lines span {
    border-top: 0;
    border-bottom: 0; }
  .ui-footer-st1 .js-title {
    white-space: nowrap; }
  .ui-footer-st1 .title-side {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    .ui-footer-st1 .title-side .avatar {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      -webkit-margin-end: 40px;
      margin-inline-end: 40px;
      -ms-flex-negative: 0;
      flex-shrink: 0;
      margin-top: 10px; }
  .ui-footer-st1 .social-links {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 30px; }
    .ui-footer-st1 .social-links a {
      position: relative;
      font-size: 16px;
      text-transform: uppercase;
      padding: 5px 30px;
      border: 1px solid #fff2;
      border-radius: 30px; }
      .ui-footer-st1 .social-links a:hover {
        background-color: #fff;
        border-color: #fff;
        color: #212121; }
  .ui-footer-st1 .btn-up {
    position: relative;
    width: 45px;
    height: 70px;
    border: 1px solid #fff;
    border-radius: 30px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 18px; }
    .ui-footer-st1 .btn-up:hover {
      background-color: #fff;
      border-color: #fff;
      color: #212121; }

@media screen and (max-width: 991px) {
  .ui-footer-st1 .title-side {
    display: block; }
    .ui-footer-st1 .title-side .fsz-100 {
      font-size: 40px !important;
      margin-top: 30px; }
  .ui-footer-st1 .social-links {
    gap: 10px;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start; }
    .ui-footer-st1 .social-links a {
      font-size: 13px;
      padding: 5px 15px; }
  .ui-footer-st1 .btn-up {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: auto; } }

.ui-about-st2 {
  position: relative;
  padding: 150px 0; }
  .ui-about-st2 .numbers {
    position: relative;
    padding: 15px;
    border-radius: 15px;
    margin-top: 60px;
    background: #716e6e14;
    -webkit-backdrop-filter: blur(2.5px);
    backdrop-filter: blur(2.5px); }
    .ui-about-st2 .numbers .item {
      position: relative;
      padding: 30px 15px;
      background-color: #181818;
      border-radius: 15px;
      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: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      height: 100%; }

@media screen and (max-width: 991px) {
  .ui-about-st2 {
    padding: 60px 0; }
    .ui-about-st2 .th-550 {
      height: 300px !important;
      margin-bottom: 30px; }
    .ui-about-st2 .fsz-35 {
      font-size: 20px !important; }
    .ui-about-st2 .numbers .item {
      margin: 10px 0;
      height: -webkit-max-content;
      height: -moz-max-content;
      height: max-content; } }

.ui-experience-st2 {
  position: relative; }
  .ui-experience-st2 .content {
    position: relative;
    padding-top: 120px;
    border-top: 1px solid #fff6; }
  .ui-experience-st2 .exp-years .years-slider {
    position: relative;
    height: 400px;
    overflow: hidden;
    padding-top: 20px; }
    .ui-experience-st2 .exp-years .years-slider h5 {
      font-size: 24px;
      opacity: 0.8;
      -webkit-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease; }
    .ui-experience-st2 .exp-years .years-slider .swiper-slide-thumb-active h5 {
      font-size: 50px;
      font-weight: bold;
      opacity: 1;
      margin-top: -20px; }
  .ui-experience-st2 .exp-years .exp-slider {
    position: relative;
    overflow: hidden; }
    .ui-experience-st2 .exp-years .exp-slider .item {
      position: relative;
      text-transform: uppercase;
      padding: 40px 30px;
      background: rgba(113, 110, 110, 0.08);
      -webkit-backdrop-filter: blur(5px);
      backdrop-filter: blur(5px);
      border-radius: 10px;
      margin-bottom: 70px; }
      .ui-experience-st2 .exp-years .exp-slider .item .icon-wrapper {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center; }
      .ui-experience-st2 .exp-years .exp-slider .item .date {
        position: relative;
        padding-top: 30px;
        border-top: 1px solid #fff6;
        margin-top: 30px;
        font-size: 18px; }
  .ui-experience-st2 .progress-sec {
    position: relative; }
    .ui-experience-st2 .progress-sec .progress {
      position: relative;
      margin-top: 90px;
      height: 2px;
      background-color: transparent;
      overflow: visible; }
      .ui-experience-st2 .progress-sec .progress::before {
        position: absolute;
        content: "";
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background-color: #fff;
        opacity: 0.5; }
      .ui-experience-st2 .progress-sec .progress .progress-bar {
        position: relative;
        background-color: #fff;
        overflow: visible; }
        .ui-experience-st2 .progress-sec .progress .progress-bar small {
          position: absolute;
          top: -40px;
          left: 100%;
          -webkit-transform: translateX(-50%);
          -ms-transform: translateX(-50%);
          transform: translateX(-50%);
          padding: 5px 15px;
          background-color: #181818;
          font-size: 14px; }

@media screen and (max-width: 991px) {
  .ui-experience-st2 .progress-sec .progress {
    margin-top: 50px; } }

.ui-pricing-st3 {
  position: relative; }
  .ui-pricing-st3 .content {
    position: relative;
    padding-top: 120px;
    border-top: 1px solid #fff6; }
    .ui-pricing-st3 .content .accordion .accordion-item {
      position: relative;
      background: #d9d9d914;
      border: 1px solid #4A4A4A;
      -webkit-backdrop-filter: blur(5px);
      backdrop-filter: blur(5px);
      border-radius: 15px 15px 0 0;
      margin-bottom: 5px;
      color: #fff;
      text-transform: uppercase;
      padding: 0 20px; }
      .ui-pricing-st3 .content .accordion .accordion-item:last-of-type {
        border-radius: 15px; }
      .ui-pricing-st3 .content .accordion .accordion-item .accordion-header .accordion-button {
        background-color: transparent;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
        margin: 0;
        color: #fff;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding: 20px 0; }
        .ui-pricing-st3 .content .accordion .accordion-item .accordion-header .accordion-button::after {
          display: none; }
        .ui-pricing-st3 .content .accordion .accordion-item .accordion-header .accordion-button .price {
          font-size: 35px; }
          .ui-pricing-st3 .content .accordion .accordion-item .accordion-header .accordion-button .price small {
            font-size: 16px;
            opacity: 0.8; }
      .ui-pricing-st3 .content .accordion .accordion-item .accordion-body {
        padding: 20px 0;
        border-top: 1px solid #fff6; }
        .ui-pricing-st3 .content .accordion .accordion-item .accordion-body .check-list {
          position: relative;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -ms-flex-wrap: wrap;
          flex-wrap: wrap; }
          .ui-pricing-st3 .content .accordion .accordion-item .accordion-body .check-list li {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            color: #BEBEBE;
            margin: 10px 0;
            -webkit-margin-end: 30px;
            margin-inline-end: 30px; }
            .ui-pricing-st3 .content .accordion .accordion-item .accordion-body .check-list li i {
              -webkit-margin-end: 10px;
              margin-inline-end: 10px;
              -ms-flex-negative: 0;
              flex-shrink: 0;
              font-size: 16px; }

.ui-portfolio-st4 {
  position: relative;
  text-transform: uppercase; }
  .ui-portfolio-st4 .project-card {
    position: relative;
    overflow: hidden;
    margin-bottom: 120px; }
    .ui-portfolio-st4 .project-card .img {
      position: relative;
      border-radius: 30px;
      overflow: hidden; }
      .ui-portfolio-st4 .project-card .img::after {
        position: absolute;
        content: "";
        left: 0;
        bottom: 0;
        width: 100%;
        height: 50%;
        background-image: -webkit-gradient(linear, left bottom, left top, from(#000000b5), to(transparent));
        background-image: -webkit-linear-gradient(bottom, #000000b5, transparent);
        background-image: -o-linear-gradient(bottom, #000000b5, transparent);
        background-image: linear-gradient(to top, #000000b5, transparent); }
    .ui-portfolio-st4 .project-card .marq-slider {
      position: absolute;
      width: 100%;
      left: 0;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      z-index: 10; }
      .ui-portfolio-st4 .project-card .marq-slider .swiper-wrapper {
        -webkit-transition-timing-function: linear !important;
        -o-transition-timing-function: linear !important;
        transition-timing-function: linear !important;
        position: relative;
        pointer-events: none; }
        .ui-portfolio-st4 .project-card .marq-slider .swiper-wrapper .swiper-slide {
          width: -webkit-max-content !important;
          width: -moz-max-content !important;
          width: max-content !important; }
          .ui-portfolio-st4 .project-card .marq-slider .swiper-wrapper .swiper-slide h2 {
            font-size: 40px;
            line-height: 1; }
    .ui-portfolio-st4 .project-card .tags {
      position: absolute;
      left: 0;
      bottom: 40px;
      z-index: 10;
      width: 100%;
      text-align: center;
      font-size: 16px; }
    .ui-portfolio-st4 .project-card.cntr-card {
      margin-top: -100px;
      margin-bottom: 150px; }

@media screen and (max-width: 991px) {
  .ui-portfolio-st4 .project-card {
    margin-bottom: 50px !important;
    margin-top: 0 !important; }
    .ui-portfolio-st4 .project-card .img {
      height: 350px !important; } }

.ui-contact-st5 {
  position: relative;
  padding: 120px 0;
  text-transform: uppercase; }
  .ui-contact-st5 .main-img {
    position: relative;
    height: 670px;
    border-radius: 20px;
    overflow: hidden; }
    .ui-contact-st5 .main-img .img-title {
      font-size: 35px;
      font-weight: bold;
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      padding: 40px 30px; }
  .ui-contact-st5 .form {
    position: relative; }
    .ui-contact-st5 .form .form-group {
      position: relative;
      margin-bottom: 40px; }
      .ui-contact-st5 .form .form-group .form-control {
        background: #ffffff0d;
        border: 1px solid #FCFCFC33;
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
        border-radius: 10px;
        margin-top: 10px;
        min-height: 60px; }
        .ui-contact-st5 .form .form-group .form-control:focus {
          border-color: #FCFCFC; }
  .ui-contact-st5 .link-arrow {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
    .ui-contact-st5 .link-arrow .arrow {
      font-size: 14px;
      -webkit-margin-start: 10px;
      margin-inline-start: 10px;
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      width: 35px;
      height: 35px;
      border: 1px solid #fff6;
      border-radius: 50%; }

@media screen and (max-width: 991px) {
  .ui-contact-st5 {
    padding: 60px 0; }
    .ui-contact-st5 .main-img {
      height: 350px;
      margin-bottom: 30px; }
    .ui-contact-st5 .main-img .img-title {
      font-size: 25px; } }



      /* ========= [ * helper ]  =========*/
/* --------------- helper classes --------------- */
/* --------------- radius classes --------------- */
.radius-1 {
  border-radius: 3px !important; }

.radius-2 {
  border-radius: 5px !important; }

.radius-3 {
  border-radius: 8px !important; }

.radius-4 {
  border-radius: 10px !important; }

.radius-5 {
  border-radius: 12px !important; }

.radius-6 {
  border-radius: 15px !important; }

.radius-7 {
  border-radius: 20px !important; }

.radius-8 {
  border-radius: 25px !important; }

.radius-9 {
  border-radius: 30px !important; }

.radius-10 {
  border-radius: 50px !important; }

/* --------------- margin classes --------------- */
.mt-10 {
  margin-top: 10px !important; }

.mt-15 {
  margin-top: 15px !important; }

.mt-20 {
  margin-top: 20px !important; }

.mt-30 {
  margin-top: 30px !important; }

.mt-40 {
  margin-top: 40px !important; }

.mt-50 {
  margin-top: 50px !important; }

.mt-60 {
  margin-top: 60px !important; }

.mt-70 {
  margin-top: 70px !important; }

.mt-80 {
  margin-top: 80px !important; }

.mt-90 {
  margin-top: 90px !important; }

.mt-100 {
  margin-top: 100px !important; }

.mt-120 {
  margin-top: 120px !important; }

.mt-150 {
  margin-top: 150px !important; }

.mt-200 {
  margin-top: 200px !important; }

.mb-10 {
  margin-bottom: 10px !important; }

.mb-15 {
  margin-bottom: 15px !important; }

.mb-20 {
  margin-bottom: 20px !important; }

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

.mb-40 {
  margin-bottom: 40px !important; }

.mb-50 {
  margin-bottom: 50px !important; }

.mb-60 {
  margin-bottom: 60px !important; }

.mb-70 {
  margin-bottom: 70px !important; }

.mb-80 {
  margin-bottom: 80px !important; }

.mb-90 {
  margin-bottom: 90px !important; }

.mb-100 {
  margin-bottom: 100px !important; }

.mb-120 {
  margin-bottom: 120px !important; }

.mb-150 {
  margin-bottom: 150px !important; }

.mb-200 {
  margin-bottom: 200px !important; }

.ms-10 {
  -webkit-margin-start: 10px !important;
  margin-inline-start: 10px !important; }

.ms-15 {
  -webkit-margin-start: 15px !important;
  margin-inline-start: 15px !important; }

.ms-20 {
  -webkit-margin-start: 20px !important;
  margin-inline-start: 20px !important; }

.ms-30 {
  -webkit-margin-start: 30px !important;
  margin-inline-start: 30px !important; }

.ms-40 {
  -webkit-margin-start: 40px !important;
  margin-inline-start: 40px !important; }

.ms-50 {
  -webkit-margin-start: 50px !important;
  margin-inline-start: 50px !important; }

.ms-60 {
  -webkit-margin-start: 60px !important;
  margin-inline-start: 60px !important; }

.ms-70 {
  -webkit-margin-start: 70px !important;
  margin-inline-start: 70px !important; }

.ms-80 {
  -webkit-margin-start: 80px !important;
  margin-inline-start: 80px !important; }

.ms-90 {
  -webkit-margin-start: 90px !important;
  margin-inline-start: 90px !important; }

.ms-100 {
  -webkit-margin-start: 100px !important;
  margin-inline-start: 100px !important; }

.ms-120 {
  -webkit-margin-start: 120px !important;
  margin-inline-start: 120px !important; }

.ms-150 {
  -webkit-margin-start: 150px !important;
  margin-inline-start: 150px !important; }

.ms-200 {
  -webkit-margin-start: 200px !important;
  margin-inline-start: 200px !important; }

.me-10 {
  -webkit-margin-end: 10px !important;
  margin-inline-end: 10px !important; }

.me-15 {
  -webkit-margin-end: 15px !important;
  margin-inline-end: 15px !important; }

.me-20 {
  -webkit-margin-end: 20px !important;
  margin-inline-end: 20px !important; }

.me-30 {
  -webkit-margin-end: 30px !important;
  margin-inline-end: 30px !important; }

.me-40 {
  -webkit-margin-end: 40px !important;
  margin-inline-end: 40px !important; }

.me-50 {
  -webkit-margin-end: 50px !important;
  margin-inline-end: 50px !important; }

.me-60 {
  -webkit-margin-end: 60px !important;
  margin-inline-end: 60px !important; }

.me-70 {
  -webkit-margin-end: 70px !important;
  margin-inline-end: 70px !important; }

.me-80 {
  -webkit-margin-end: 80px !important;
  margin-inline-end: 80px !important; }

.me-90 {
  -webkit-margin-end: 90px !important;
  margin-inline-end: 90px !important; }

.me-100 {
  -webkit-margin-end: 100px !important;
  margin-inline-end: 100px !important; }

.me-120 {
  -webkit-margin-end: 120px !important;
  margin-inline-end: 120px !important; }

.me-150 {
  -webkit-margin-end: 150px !important;
  margin-inline-end: 150px !important; }

.me-200 {
  -webkit-margin-end: 200px !important;
  margin-inline-end: 200px !important; }

/* --------------- padding classes --------------- */
.p-10 {
  padding: 10px !important; }

.p-15 {
  padding: 15px !important; }

.p-20 {
  padding: 20px !important; }

.p-30 {
  padding: 30px !important; }

.p-40 {
  padding: 40px !important; }

.p-50 {
  padding: 50px !important; }

.p-60 {
  padding: 60px !important; }

.p-70 {
  padding: 70px !important; }

.p-80 {
  padding: 80px !important; }

.p-90 {
  padding: 90px !important; }

.p-100 {
  padding: 100px !important; }

.p-120 {
  padding: 120px !important; }

.p-150 {
  padding: 150px !important; }

.p-200 {
  padding: 200px !important; }

.ps-10 {
  -webkit-padding-start: 10px !important;
  padding-inline-start: 10px !important; }

.ps-15 {
  -webkit-padding-start: 15px !important;
  padding-inline-start: 15px !important; }

.ps-20 {
  -webkit-padding-start: 20px !important;
  padding-inline-start: 20px !important; }

.ps-30 {
  -webkit-padding-start: 30px !important;
  padding-inline-start: 30px !important; }

.ps-40 {
  -webkit-padding-start: 40px !important;
  padding-inline-start: 40px !important; }

.ps-50 {
  -webkit-padding-start: 50px !important;
  padding-inline-start: 50px !important; }

.ps-60 {
  -webkit-padding-start: 60px !important;
  padding-inline-start: 60px !important; }

.ps-70 {
  -webkit-padding-start: 70px !important;
  padding-inline-start: 70px !important; }

.ps-80 {
  -webkit-padding-start: 80px !important;
  padding-inline-start: 80px !important; }

.ps-90 {
  -webkit-padding-start: 90px !important;
  padding-inline-start: 90px !important; }

.ps-100 {
  -webkit-padding-start: 100px !important;
  padding-inline-start: 100px !important; }

.ps-120 {
  -webkit-padding-start: 120px !important;
  padding-inline-start: 120px !important; }

.ps-150 {
  -webkit-padding-start: 150px !important;
  padding-inline-start: 150px !important; }

.ps-200 {
  -webkit-padding-start: 200px !important;
  padding-inline-start: 200px !important; }

.pe-10 {
  -webkit-padding-end: 10px !important;
  padding-inline-end: 10px !important; }

.pe-15 {
  -webkit-padding-end: 15px !important;
  padding-inline-end: 15px !important; }

.pe-20 {
  -webkit-padding-end: 20px !important;
  padding-inline-end: 20px !important; }

.pe-30 {
  -webkit-padding-end: 30px !important;
  padding-inline-end: 30px !important; }

.pe-40 {
  -webkit-padding-end: 40px !important;
  padding-inline-end: 40px !important; }

.pe-50 {
  -webkit-padding-end: 50px !important;
  padding-inline-end: 50px !important; }

.pe-60 {
  -webkit-padding-end: 60px !important;
  padding-inline-end: 60px !important; }

.pe-70 {
  -webkit-padding-end: 70px !important;
  padding-inline-end: 70px !important; }

.pe-80 {
  -webkit-padding-end: 80px !important;
  padding-inline-end: 80px !important; }

.pe-90 {
  -webkit-padding-end: 90px !important;
  padding-inline-end: 90px !important; }

.pe-100 {
  -webkit-padding-end: 100px !important;
  padding-inline-end: 100px !important; }

.pe-120 {
  -webkit-padding-end: 120px !important;
  padding-inline-end: 120px !important; }

.pe-150 {
  -webkit-padding-end: 150px !important;
  padding-inline-end: 150px !important; }

.pe-200 {
  -webkit-padding-end: 200px !important;
  padding-inline-end: 200px !important; }

.pt-10 {
  padding-top: 10px !important; }

.pt-15 {
  padding-top: 15px !important; }

.pt-20 {
  padding-top: 20px !important; }

.pt-30 {
  padding-top: 30px !important; }

.pt-40 {
  padding-top: 40px !important; }

.pt-50 {
  padding-top: 50px !important; }

.pt-60 {
  padding-top: 60px !important; }

.pt-70 {
  padding-top: 70px !important; }

.pt-80 {
  padding-top: 80px !important; }

.pt-90 {
  padding-top: 90px !important; }

.pt-100 {
  padding-top: 100px !important; }

.pt-120 {
  padding-top: 120px !important; }

.pt-150 {
  padding-top: 150px !important; }

.pt-200 {
  padding-top: 200px !important; }

.pb-10 {
  padding-bottom: 10px !important; }

.pb-15 {
  padding-bottom: 15px !important; }

.pb-20 {
  padding-bottom: 20px !important; }

.pb-30 {
  padding-bottom: 30px !important; }

.pb-40 {
  padding-bottom: 40px !important; }

.pb-50 {
  padding-bottom: 50px !important; }

.pb-60 {
  padding-bottom: 60px !important; }

.pb-70 {
  padding-bottom: 70px !important; }

.pb-80 {
  padding-bottom: 80px !important; }

.pb-90 {
  padding-bottom: 90px !important; }

.pb-100 {
  padding-bottom: 100px !important; }

.pb-120 {
  padding-bottom: 120px !important; }

.pb-150 {
  padding-bottom: 150px !important; }

.pb-200 {
  padding-bottom: 200px !important; }

/* --------------- opacity classes --------------- */
.op-1 {
  opacity: 0.1; }

.op-2 {
  opacity: 0.2; }

.op-3 {
  opacity: 0.3; }

.op-4 {
  opacity: 0.4; }

.op-5 {
  opacity: 0.5; }

.op-6 {
  opacity: 0.6; }

.op-7 {
  opacity: 0.7; }

.op-8 {
  opacity: 0.8; }

.op-9 {
  opacity: 0.9; }

.op-10 {
  opacity: 1; }

/* --------------- lineHeight classes --------------- */
.lh-1 {
  line-height: 1 !important; }

.lh-2 {
  line-height: 1.2 !important; }

.lh-3 {
  line-height: 1.4 !important; }

.lh-4 {
  line-height: 1.6 !important; }

.lh-5 {
  line-height: 1.8 !important; }

.lh-6 {
  line-height: 2 !important; }

.lh-7 {
  line-height: 2.5 !important; }

.lh-8 {
  line-height: 3 !important; }

/* --------------- border color classes --------------- */
.brd-light1 {
  border-color: #fff2 !important; }

.brd-light2 {
  border-color: #fff4 !important; }

.brd-gray {
  border-color: #d9d9d9 !important; }

.brd-gray2 {
  border-color: #999 !important; }

/* ---------------  color classes --------------- */
.cr-000 {
  color: #000 !important; }

.cr-111 {
  color: #111 !important; }

.cr-222 {
  color: #222 !important; }

.cr-333 {
  color: #333 !important; }

.cr-444 {
  color: #444 !important; }

.cr-555 {
  color: #555 !important; }

.cr-666 {
  color: #666 !important; }

.cr-777 {
  color: #777 !important; }

.cr-888 {
  color: #888 !important; }

.cr-999 {
  color: #999 !important; }

.cr-ccc {
  color: #cccccc !important; }

/* ---------------  bg classes --------------- */
.bg-000 {
  background-color: #000 !important; }

.bg-111 {
  background-color: #111 !important; }

.bg-222 {
  background-color: #222 !important; }

.bg-333 {
  background-color: #333 !important; }

.bg-444 {
  background-color: #444 !important; }

.bg-555 {
  background-color: #555 !important; }

.bg-666 {
  background-color: #666 !important; }

.bg-777 {
  background-color: #777 !important; }

.bg-888 {
  background-color: #888 !important; }

.bg-999 {
  background-color: #999 !important; }

.bg-ccc {
  background-color: #cccccc !important; }

.bg-f0 {
  background-color: #f0f0f0 !important; }

.bg-f1 {
  background-color: #f1f1f1 !important; }

.bg-f2 {
  background-color: #f2f2f2 !important; }

.bg-f3 {
  background-color: #f3f3f3 !important; }

.bg-f4 {
  background-color: #f4f4f4 !important; }

.bg-f5 {
  background-color: #f5f5f5 !important; }

.bg-f6 {
  background-color: #f6f6f6 !important; }

.bg-f7 {
  background-color: #f7f7f7 !important; }

.bg-f8 {
  background-color: #f8f8f8 !important; }

.bg-f9 {
  background-color: #f9f9f9 !important; }

.bg-black {
  background-color: #000 !important; }

.bg-dark1 {
  background-color: #1C1C1C !important; }

/* --------------- icons size --------------- */
.icon-3 {
  width: 3px;
  height: 3px; }

.icon-6 {
  width: 6px;
  height: 6px; }

.icon-8 {
  width: 8px;
  height: 8px; }

.icon-10 {
  width: 10px;
  height: 10px; }

.icon-15 {
  width: 15px;
  height: 15px; }

.icon-20 {
  width: 20px;
  height: 20px; }

.icon-25 {
  width: 25px;
  height: 25px; }

.icon-30 {
  width: 30px;
  height: 30px; }

.icon-35 {
  width: 35px;
  height: 35px; }

.icon-40 {
  width: 40px;
  height: 40px; }

.icon-45 {
  width: 45px;
  height: 45px; }

.icon-50 {
  width: 50px;
  height: 50px; }

.icon-55 {
  width: 55px;
  height: 55px; }

.icon-60 {
  width: 60px;
  height: 60px; }

.icon-65 {
  width: 65px;
  height: 65px; }

.icon-70 {
  width: 70px;
  height: 70px; }

.icon-75 {
  width: 75px;
  height: 75px; }

.icon-80 {
  width: 80px;
  height: 80px; }

.icon-85 {
  width: 85px;
  height: 85px; }

.icon-90 {
  width: 90px;
  height: 90px; }

.icon-95 {
  width: 95px;
  height: 95px; }

.icon-100 {
  width: 100px;
  height: 100px; }

.icon-125 {
  width: 125px;
  height: 125px; }

.icon-150 {
  width: 150px;
  height: 150px; }

.icon-175 {
  width: 175px;
  height: 175px; }

.icon-200 {
  width: 200px;
  height: 200px; }

/* --------------- img classes --------------- */
.img-cover {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  display: inherit; }

.img-contain {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  display: inherit; }

.imgrotate-scale-hover {
  overflow: hidden; }
  .imgrotate-scale-hover img {
    -webkit-transition: all 2s ease;
    -o-transition: all 2s ease;
    transition: all 2s ease; }
  .imgrotate-scale-hover:hover img {
    -webkit-transform: rotate(-10deg) scale(1.2);
    -ms-transform: rotate(-10deg) scale(1.2);
    transform: rotate(-10deg) scale(1.2); }

/* --------------- height classes --------------- */
.th-10 {
  height: 10px !important; }

.th-20 {
  height: 20px !important; }

.th-30 {
  height: 30px !important; }

.th-40 {
  height: 40px !important; }

.th-50 {
  height: 50px !important; }

.th-60 {
  height: 60px !important; }

.th-70 {
  height: 70px !important; }

.th-80 {
  height: 80px !important; }

.th-90 {
  height: 90px !important; }

.th-100 {
  height: 100px !important; }

.th-120 {
  height: 120px !important; }

.th-140 {
  height: 140px !important; }

.th-160 {
  height: 160px !important; }

.th-180 {
  height: 180px !important; }

.th-200 {
  height: 200px !important; }

.th-230 {
  height: 230px !important; }

.th-250 {
  height: 250px !important; }

.th-280 {
  height: 280px !important; }

.th-300 {
  height: 300px !important; }

.th-330 {
  height: 330px !important; }

.th-350 {
  height: 350px !important; }

.th-380 {
  height: 380px !important; }

.th-400 {
  height: 400px !important; }

.th-425 {
  height: 425px !important; }

.th-450 {
  height: 450px !important; }

.th-475 {
  height: 475px !important; }

.th-500 {
  height: 500px !important; }

.th-525 {
  height: 525px !important; }

.th-550 {
  height: 550px !important; }

.th-575 {
  height: 575px !important; }

.th-600 {
  height: 600px !important; }

.th-650 {
  height: 650px !important; }

.th-700 {
  height: 700px !important; }

.th-750 {
  height: 750px !important; }

.th-800 {
  height: 800px !important; }

.th-900 {
  height: 900px !important; }

.th-1000 {
  height: 1000px !important; }

.text-pretty {
  text-wrap: pretty !important; }

.text-balance {
  text-wrap: balance !important; }

/* --------------- letter spacing classes --------------- */
.ltspc-0 {
  letter-spacing: 0 !important; }

.ltspc-1 {
  letter-spacing: 1px !important; }

.ltspc-2 {
  letter-spacing: 2px !important; }

.ltspc-3 {
  letter-spacing: 3px !important; }

.ltspc-4 {
  letter-spacing: 4px !important; }

.ltspc-5 {
  letter-spacing: 5px !important; }

.ltspc-8 {
  letter-spacing: 8px !important; }

.ltspc-10 {
  letter-spacing: 10px !important; }

.ltspc-12 {
  letter-spacing: 12px !important; }

.ltspc-15 {
  letter-spacing: 15px !important; }

.ltspc-17 {
  letter-spacing: 17px !important; }

.ltspc-20 {
  letter-spacing: 20px !important; }

.ltspc--1 {
  letter-spacing: -1px !important; }

.ltspc--2 {
  letter-spacing: -2px !important; }

.ltspc--3 {
  letter-spacing: -3px !important; }

.fsz-10 {
  font-size: 10px !important; }

.fsz-11 {
  font-size: 11px !important; }

.fsz-12 {
  font-size: 12px !important; }

.fsz-13 {
  font-size: 13px !important; }

.fsz-14 {
  font-size: 14px !important; }

.fsz-15 {
  font-size: 15px !important; }

.fsz-16 {
  font-size: 16px !important; }

.fsz-17 {
  font-size: 17px !important; }

.fsz-18 {
  font-size: 18px !important; }

.fsz-19 {
  font-size: 19px !important; }

.fsz-20 {
  font-size: 20px !important;
  color: #dddddf;
}

.fsz-21 {
  font-size: 21px !important; }

.fsz-22 {
  font-size: 22px !important; }

.fsz-23 {
  font-size: 23px !important; }

.fsz-24 {
  font-size: 24px !important; }

.fsz-25 {
  font-size: 25px !important; }

.fsz-26 {
  font-size: 26px !important; }

.fsz-27 {
  font-size: 27px !important; }

.fsz-28 {
  font-size: 28px !important; }

.fsz-29 {
  font-size: 29px !important; }

.fsz-30 {
  font-size: 30px !important; }

.fsz-35 {
  font-size: 35px !important; }

.fsz-40 {
  font-size: 40px !important; }

.fsz-45 {
  font-size: 45px !important; }

.fsz-50 {
  font-size: 50px !important; }

.fsz-55 {
  font-size: 55px !important; }

.fsz-60 {
  font-size: 60px !important; }

.fsz-65 {
  font-size: 65px !important; }

.fsz-70 {
  font-size: 70px !important; }

.fsz-75 {
  font-size: 75px !important; }

.fsz-80 {
  font-size: 80px !important; }

.fsz-85 {
  font-size: 85px !important; }

.fsz-90 {
  font-size: 90px !important; }

.fsz-95 {
  font-size: 95px !important; }

.fsz-100 {
  font-size: 100px !important; }

.fw-100 {
  font-weight: 100 !important; }

.fw-200 {
  font-weight: 200 !important; }

.fw-300 {
  font-weight: 300 !important; }

.fw-400 {
  font-weight: 400 !important; }

.fw-500 {
  font-weight: 500 !important; }

.fw-600 {
  font-weight: 600 !important; }

.fw-700 {
  font-weight: 700 !important; }

.fw-800 {
  font-weight: 800 !important; }

.fw-900 {
  font-weight: 900 !important; }

.znd1 {
  z-index: 1; }

.znd2 {
  z-index: 2; }

.znd3 {
  z-index: 3; }

.znd4 {
  z-index: 4; }

.znd5 {
  z-index: 5; }

.znd6 {
  z-index: 6; }

.znd7 {
  z-index: 7; }

.znd8 {
  z-index: 8; }

.znd9 {
  z-index: 9; }

.znd10 {
  z-index: 10; }

.znd25 {
  z-index: 25; }

.znd50 {
  z-index: 50; }

.znd75 {
  z-index: 75; }

.znd100 {
  z-index: 100; }

.znd200 {
  z-index: 200; }

.znd999 {
  z-index: 999; }

.tr-delay1 {
  -webkit-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  transition-delay: 0.2s; }

.tr-delay2 {
  -webkit-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  transition-delay: 0.4s; }

.tr-delay3 {
  -webkit-transition-delay: 0.6s;
  -o-transition-delay: 0.6s;
  transition-delay: 0.6s; }

.tr-delay4 {
  -webkit-transition-delay: 0.8s;
  -o-transition-delay: 0.8s;
  transition-delay: 0.8s; }

.tr-delay5 {
  -webkit-transition-delay: 1s;
  -o-transition-delay: 1s;
  transition-delay: 1s; }

.hover-underline:hover {
  text-decoration: underline !important; }

.hover-white:hover {
  color: #fff; }
  .hover-white:hover * {
    color: #fff; }

/* ========= [ * global ]  =========*/
/* --------------- global --------------- */
@font-face {
  font-family: 'telegraf';
  src: url("../fonts/PPTelegraf/PPTelegraf-Regular.otf") format("woff2"); }

@font-face {
  font-family: 'telegraf-light';
  src: url("../fonts/PPTelegraf/PPTelegraf-UltraLight.otf") format("woff2"); }

*,
* button:focus {
  outline: 0;
  margin: 0; }

html::-webkit-scrollbar {
  height: 20px;
  width: 10px;
  background: #f1f1f1;
  border-radius: 0; }

html::-webkit-scrollbar-thumb {
  background: #999;
  -webkit-border-radius: 0;
  border-radius: 10px; }

html::-webkit-scrollbar-corner {
  background: #999;
  border-radius: 10px; }

body {
  font-family: 'telegraf';
  text-decoration: none;
  font-size: 14px;
  overflow-x: hidden;
  position: relative;
  background-color: #1C1C1C;
  color: #fff;
  z-index: 1; }
  body .body-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    display: none;
    display: flex;
    padding: 0 30px;
    gap: 30px;
    min-height: 100vh;
    z-index: -1;
    pointer-events: none; }
    body .body-lines span {
      -webkit-box-flex: 1;
      -ms-flex-positive: 1;
      flex-grow: 1;
      border: 0px solid #74747433; }
  body .body-back {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    z-index: -1;
    pointer-events: none;
    background-color: #000000; }

canvas {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2; }

.text-light {
  font-family: 'telegraf-light'; }

/* --------------- swiper slider --------------- */
.swiper-container {
  overflow: hidden; }

.swiper-notification {
  display: none; }

.arrows-st1 {
  position: relative;
  width: 120px;
  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: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100%;
  width: 100%; }
  .arrows-st1::after {
    position: absolute;
    content: "";
    height: calc(100% - 100px);
    width: 1px;
    background-color: #fff;
    top: 50px;
    left: 50%; }
  .arrows-st1 .swiper-button-next,
  .arrows-st1 .swiper-button-prev {
    position: relative;
    left: 0;
    top: 0;
    bottom: 0;
    margin: 0;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: transparent;
    z-index: 10; }
    .arrows-st1 .swiper-button-next::after,
    .arrows-st1 .swiper-button-prev::after {
      content: "\f175";
      font-family: "Font Awesome 6 Pro";
      font-weight: 300;
      font-size: 20px;
      color: #fff; }
  .arrows-st1 .swiper-button-prev::after {
    content: "\f176"; }

@media screen and (max-width: 991px) {
  .arrows-st1 {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    margin-bottom: 20px; }
    .arrows-st1 .swiper-button-next, .arrows-st1 .swiper-button-prev {
      -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      transform: rotate(-90deg); } }

/* --------------- end swiper slider --------------- */
.form-group {
  position: relative;
  margin-bottom: 10px; }
  .form-group .form-control {
    position: relative;
    min-height: 50px;
    background-color: #151515;
    border: 1px solid #fff1;
    border-radius: 0;
    color: #fff; }
    .form-group .form-control::-webkit-input-placeholder {
      color: #fff;
      opacity: 0.3; }
    .form-group .form-control:-ms-input-placeholder {
      color: #fff;
      opacity: 0.3; }
    .form-group .form-control::-ms-input-placeholder {
      color: #fff;
      opacity: 0.3; }
    .form-group .form-control::placeholder {
      color: #fff;
      opacity: 0.3; }
    .form-group .form-control:focus {
      background-color: #151515;
      border: 1px solid #fff5;
      -webkit-box-shadow: none;
      box-shadow: none; }

.navbar {
  z-index: 99; }

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6,
.sub-font {
  margin: 0;
  line-height: 1.3; }

/* --------------- section-head-st1 --------------- */
.section-head-st1 {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding-top: 20px;
  border-top: 1px solid #fff6; }

.container,
.container-fluid {
  position: relative;
  z-index: 5; }

body a:focus {
  outline: 0; }



   a:hover {
                cursor: pointer;
                color: #673DE6;
                text-decoration: underline;
            }

body ul {
  list-style-type: square;
  margin: 0; }

.btn-default:active,
.btn-default:active:focus,
.btn-default:active:hover,
.btn-default:focus,
.btn-default:hover,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn:not(:disabled):not(.disabled).active,
.btn:not(:disabled):not(.disabled):active {
  -webkit-appearance: none; }

.btn:active,
.btn:active:focus,
.btn:active:hover,
.btn:focus,
.btn:hover,
.btn:not(:disabled):not(.disabled).active,
.btn:not(:disabled):not(.disabled):active {
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
  outline: 0; }

a,
span,
img,
strong {
  display: inline-block;
  color: inherit;
  text-decoration: none; }

a:not(.no-transition) {
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease; }
  a:not(.no-transition) * {
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease; }

ul {
  padding: 0; }

img {
  max-width: 100%;
  max-height: 100%; }

p {
  font-size: 14px;
  line-height: 1.7;
  margin: 0; }

i,
.bi {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex; }

.text {
  font-size: 14px;
  line-height: 1.4;
  color: #C4C4C4; }

.txt-stroke {
  color: transparent;
  -webkit-text-stroke: 1px #111; }

.txt-stroke-wh {
  color: transparent;
  -webkit-text-stroke: 1px #fff; }

.small,
small {
  font-size: 12px;
  display: inline-block; }

small.text {
  font-size: 12px; }

.section-padding {
  padding: 140px 0; }

.df-center {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  -webkit-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important; }

.dnf-center {
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  -webkit-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important; }

.bg-img {
  background-size: cover; }

.clippy-img {
  -webkit-clip-path: polygon(25% 0, 75% 0, 75% 100%, 25% 100%);
  clip-path: polygon(25% 0, 75% 0, 75% 100%, 25% 100%);
  opacity: 0;
  -webkit-transform: rotate(-7deg) scale(1.3);
  -ms-transform: rotate(-7deg) scale(1.3);
  transform: rotate(-7deg) scale(1.3);
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  -webkit-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  transition-delay: 0.2s; }
  .clippy-img.animated {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    opacity: 1;
    -webkit-transform: rotate(0) scale(1);
    -ms-transform: rotate(0) scale(1);
    transform: rotate(0) scale(1); }

@media screen and (max-width: 991px) {
  .clippy-img {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    opacity: 1;
    -webkit-transform: rotate(0) scale(1);
    -ms-transform: rotate(0) scale(1);
    transform: rotate(0) scale(1); } }

.float-cursor-container {
  position: relative;
  cursor: none; }
  .float-cursor-container * {
    cursor: none; }
  .float-cursor-container .float-cursor {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    -webkit-transform: scale(0) translate(-50%, -50%);
    -ms-transform: scale(0) translate(-50%, -50%);
    transform: scale(0) translate(-50%, -50%);
    -webkit-transition: opacity 0.4s ease, all 0.1s linear, -webkit-transform 0.4s ease;
    transition: opacity 0.4s ease, all 0.1s linear, -webkit-transform 0.4s ease;
    -o-transition: opacity 0.4s ease, transform 0.4s ease, all 0.1s linear;
    transition: opacity 0.4s ease, transform 0.4s ease, all 0.1s linear;
    transition: opacity 0.4s ease, transform 0.4s ease, all 0.1s linear, -webkit-transform 0.4s ease; }

@media screen and (max-width: 991px) {
  .float-cursor-container {
    cursor: auto; }
    .float-cursor-container * {
      cursor: auto; }
    .float-cursor-container .float-cursor {
      display: none !important; } }

/* Preloader
-----------------------------------------------------------------*/
.loader-wrap {
  position: fixed;
  z-index: 10;
  height: 100vh;
  width: 100%;
  left: 0;
  top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: transparent;
  z-index: 99999999999999; }

.loader-wrap svg {
  position: absolute;
  top: 0;
  width: 100vw;
  height: 110vh;
  fill: #000; }

.loader-wrap .loader-wrap-heading .load-text {
  font-size: 20px;
  font-weight: 200;
  letter-spacing: 15px;
  text-transform: uppercase;
  z-index: 20;
  color: #fff; }

.load-text span {
  -webkit-animation: loading 1s infinite alternate;
  animation: loading 1s infinite alternate; }

.load-text span:nth-child(1) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s; }

.load-text span:nth-child(2) {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s; }

.load-text span:nth-child(3) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s; }

.load-text span:nth-child(4) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s; }

.load-text span:nth-child(5) {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s; }

.load-text span:nth-child(6) {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s; }

.load-text span:nth-child(7) {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s; }

@-webkit-keyframes loading {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes loading {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

/* ====================== [ Start mouse-cursor ] ====================== */
.swiper-wrapper.curs-scroll {
  cursor: none; }

.mouse-cursor {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  border-radius: 50%;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  visibility: hidden; }

.cursor-inner {
  margin-left: -4px;
  margin-top: -4px;
  width: 8px;
  height: 8px;
  z-index: 10000001;
  background-color: var(--cr-orng1);
  -webkit-transition: width .3s ease-in-out,
 height .3s ease-in-out,
 margin .3s ease-in-out,
 opacity .3s ease-in-out;
  -o-transition: width .3s ease-in-out,
 height .3s ease-in-out,
 margin .3s ease-in-out,
 opacity .3s ease-in-out;
  transition: width .3s ease-in-out,
 height .3s ease-in-out,
 margin .3s ease-in-out,
 opacity .3s ease-in-out; }

.cursor-inner.cursor-hover {
  opacity: 1; }

.cursor-outer {
  margin-left: -20px;
  margin-top: -20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  opacity: .5;
  z-index: 10000000;
  -webkit-transition: width .3s ease-in-out,
 height .3s ease-in-out,
 margin .3s ease-in-out,
 background-color .3s,
 opacity .3s;
  -o-transition: width .3s ease-in-out,
 height .3s ease-in-out,
 margin .3s ease-in-out,
 background-color .3s,
 opacity .3s;
  transition: width .3s ease-in-out,
 height .3s ease-in-out,
 margin .3s ease-in-out,
 background-color .3s,
 opacity .3s;
  opacity: 1;
  -webkit-transition: all 0.1s linear;
  -o-transition: all 0.1s linear;
  transition: all 0.1s linear;
  background: transparent;
  border: 1px solid var(--cr-orng1);
  height: 40px;
  width: 40px;
  -webkit-box-shadow: rgba(255, 255, 255, 0) 0px 0px 0px 5px;
  box-shadow: rgba(255, 255, 255, 0) 0px 0px 0px 5px; }

.cursor-outer.cursor-hover {
  opacity: 1;
  margin-left: -30px;
  margin-top: -30px;
  width: 60px;
  height: 60px;
  background-color: #086AD822 !important;
  opacity: 0.5 !important; }

/* ====================== [ End mouse-cursor ] ====================== */
.parallaxed {
  -webkit-transition: all 0.1s linear;
  -o-transition: all 0.1s linear;
  transition: all 0.1s linear; }

/* --------------- dropdown --------------- */
.dropdown {
  position: relative; }
  .dropdown .dropdown-toggle::after {
    position: relative;
    top: 3px;
    opacity: 0.8;
    content: "\f067";
    display: inline-block;
    font-family: "Font Awesome 5 Pro";
    border: 0;
    line-height: 1;
    font-size: 0.8em; }
  .dropdown .dropdown-menu {
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 200px;
    padding: 0;
    border-radius: 0;
    border: 0;
    -webkit-box-shadow: 0 0 20px #0001;
    box-shadow: 0 0 20px #0001;
    top: 100%;
    overflow: hidden;
    background-color: #111;
    color: #fff;
    display: block;
    -webkit-transform: translateY(15px);
    -ms-transform: translateY(15px);
    transform: translateY(15px);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease; }
    .dropdown .dropdown-menu .dropdown-item {
      padding: 10px 20px;
      font-size: 14px;
      border-bottom: 1px solid #fff2;
      background-color: #111;
      color: #fff;
      text-transform: capitalize; }
      .dropdown .dropdown-menu .dropdown-item:hover {
        background-color: var(--cr-orng1); }
  .dropdown:hover .dropdown-menu {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
    visibility: visible; }

/* --------------- forms --------------- */
select:focus,
input:focus {
  -webkit-box-shadow: none !important;
  box-shadow: none !important; }

/* --------------- to_top button --------------- */
.to_top {
  position: fixed;
  z-index: 9999;
  bottom: 3vw;
  right: -80px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: #999;
  border: 1px solid #999;
  font-size: 11px;
  text-align: center;
  padding: 7px;
  line-height: 1;
  opacity: 0;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  font-size: 18px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }
  .to_top small {
    display: block;
    text-transform: uppercase;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
    font-size: 8px; }
  .to_top i {
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease; }
  .to_top.show {
    right: 3vw;
    opacity: 1; }

/**
 * ----------------------------------------
 * animation rotate-center
 * ----------------------------------------
*/
.rotate-center {
  -webkit-animation: rotate-center 100s linear infinite both;
  animation: rotate-center 100s linear infinite both; }
  .rotate-center.reverse {
    -webkit-animation: rotate-center 100s linear infinite both reverse;
    animation: rotate-center 100s linear infinite both reverse; }

@-webkit-keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

/**
 * ----------------------------------------
 * animation slide_up_down
 * ----------------------------------------
*/
.slide-up-down {
  -webkit-animation: slide_up_down 1.7s ease-in-out infinite alternate both;
  animation: slide_up_down 1.7s ease-in-out infinite alternate both; }

/* ------- */
@-webkit-keyframes slide_up_down {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  100% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px); } }

@keyframes slide_up_down {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  100% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px); } }

.left_to_right_apperance {
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition: all .8s ease-in-out;
  -o-transition: all .8s ease-in-out;
  transition: all .8s ease-in-out;
  -webkit-transition-delay: .4s;
  -o-transition-delay: .4s;
  transition-delay: .4s;
  -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); }
  .left_to_right_apperance.no_scale {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); }
  .left_to_right_apperance.animated {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }

.clip-to-right {
  -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  -webkit-transition: all 1.5s ease-in-out;
  -o-transition: all 1.5s ease-in-out;
  transition: all 1.5s ease-in-out; }
  .clip-to-right.animated {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }

@media screen and (max-width: 991px) {
  br {
    display: none; }
  .fsz-100 {
    font-size: 60px !important; }
  .fsz-50 {
    font-size: 30px !important; }
  .fsz-45 {
    font-size: 25px !important; }
  .fsz-40 {
    font-size: 25px !important; }
  .mb-90 {
    margin-bottom: 40px !important; }
  .fsz-30 {
    font-size: 18px !important; }
  .mb-50 {
    margin-bottom: 30px !important; }
  .mt-5 {
    margin-top: 2rem !important; }
  .fsz-60 {
    font-size: 35px !important; } }

/* ========= [ * buttons ]  =========*/
/* --------------- buttons style --------------- */
.butn {
  position: relative;
  z-index: 10;
  padding: 12px 30px;
  border: 1px solid #fff3;
  border-radius: 30px;
  font-size: 16px;
  text-align: center; }
  .butn i {
    position: relative;
    right: 0;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease; }
  .butn:hover {
    background-color: #fff;
    color: #111; }
    .butn:hover i {
      right: -10px;
      -webkit-transform: scale(1.5);
      -ms-transform: scale(1.5);
      transform: scale(1.5); }

/* --------------- circle-btn --------------- */
.circle-btn {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }
  .circle-btn * {
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease; }
  .circle-btn .btn-txt {
    position: relative;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%); }
  .circle-btn .arrow {
    position: relative;
    font-size: 25px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 1px solid #fff2;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    outline: 1px solid transparent; }
  .circle-btn:hover {
    color: #111; }
    .circle-btn:hover .arrow {
      background-color: #fff;
      outline: 1px solid #fff2;
      outline-offset: 10px; }
      .circle-btn:hover .arrow i {
        -webkit-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        transform: translateY(-10px); }
    .circle-btn:hover .btn-txt {
      -webkit-transform: translateX(calc(-50% - 75px)) translateY(20px);
      -ms-transform: translateX(calc(-50% - 75px)) translateY(20px);
      transform: translateX(calc(-50% - 75px)) translateY(20px); }

/* ========= [ * variable ]  =========*/
/* --------------- variable --------------- */
:root {
  --cr-blue1:#614CE1;
  --cr-dark1:#151515;
  --cr-light1:#BEBEBE; }

.cr-blue1 {
  color: var(--cr-blue1) !important; }

.bg-blue1 {
  background: var(--cr-blue1) !important;
  color: #fff !important; }

.border-blue1 {
  border-color: var(--cr-blue1) !important; }

.hover-blue1:hover {
  color: var(--cr-blue1) !important; }

.hover-bg-blue1:hover {
  background: var(--cr-blue1) !important;
  border-color: var(--cr-blue1) !important;
  color: #fff !important; }
  .hover-bg-blue1:hover * {
    color: #fff !important; }

.cr-light1 {
  color: var(--cr-light1) !important; }

.bg-light1 {
  background: var(--cr-light1) !important;
  color: var(--cr-dark1) !important; }

.border-light1 {
  border-color: var(--cr-light1) !important; }

.hover-light1:hover {
  color: var(--cr-light1) !important; }

.hover-bg-light1:hover {
  background: var(--cr-light1) !important;
  border-color: var(--cr-light1) !important;
  color: #fff !important; }
  .hover-bg-light1:hover * {
    color: #fff; }

.cr-dark1 {
  color: var(--cr-dark1) !important; }

.bg-dark1 {
  background: var(--cr-dark1) !important;
  color: #fff !important; }

.border-dark1 {
  border-color: var(--cr-dark1) !important; }

.hover-dark1:hover {
  color: var(--cr-dark1) !important; }

.hover-bg-dark1:hover {
  background: var(--cr-dark1) !important;
  border-color: var(--cr-dark1) !important;
  color: #fff !important; }
  .hover-bg-dark1:hover * {
    color: #fff; }

.hover-white:hover {
  color: #fff !important; }

.hover-bg-white:hover {
  background-color: #fff !important;
  color: #000 !important; }
  .hover-bg-white:hover * {
    color: #000; }

.hover-black:hover {
  color: #000 !important; }

.hover-bg-black:hover {
  background-color: #000 !important;
  color: #fff !important; }
  .hover-bg-black:hover * {
    color: #fff; }

.border-black {
  border-color: #000; }


@charset "UTF-8";.fancybox-enabled{overflow:hidden;}
.fancybox-enabled body{overflow:visible;height:100%;}
.fancybox-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:99993;-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.fancybox-container ~ .fancybox-container{z-index:99992;}
.fancybox-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:#0f0f11;opacity:0;transition-timing-function:cubic-bezier(0.55, 0.06, 0.68, 0.19);-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.fancybox-container--ready .fancybox-bg{opacity:0.87;transition-timing-function:cubic-bezier(0.22, 0.61, 0.36, 1);}
.fancybox-controls{position:absolute;top:0;left:0;right:0;text-align:center;opacity:0;z-index:99994;transition:opacity .2s;pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;direction:ltr;}
.fancybox-show-controls .fancybox-controls{opacity:1;}
.fancybox-infobar{display:none;}
.fancybox-show-infobar .fancybox-infobar{display:inline-block;pointer-events:all;}
.fancybox-infobar__body{display:inline-block;width:70px;line-height:44px;font-size:13px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;text-align:center;color:#ddd;background-color:rgba(30, 30, 30, 0.7);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:subpixel-antialiased;}
.fancybox-buttons{position:absolute;top:0;right:0;display:none;pointer-events:all;}
.fancybox-show-buttons .fancybox-buttons{display:block;}
.fancybox-slider-wrap{overflow:hidden;direction:ltr;}
.fancybox-slider-wrap,
.fancybox-slider{position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;z-index:99993;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-tap-highlight-color:transparent;}
.fancybox-slide{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0;overflow:auto;outline:none;white-space:normal;box-sizing:border-box;text-align:center;z-index:99994;-webkit-overflow-scrolling:touch;}
.fancybox-slide::before{content:'';display:inline-block;vertical-align:middle;height:100%;width:0;}
.fancybox-slide > *{display:inline-block;position:relative;padding:24px;margin:44px 0 44px;border-width:0;vertical-align:middle;text-align:left;background-color:#fff;overflow:auto;box-sizing:border-box;}
.fancybox-slide--image{overflow:hidden;}
.fancybox-slide--image::before{display:none;}
.fancybox-content{display:inline-block;position:relative;margin:44px auto;padding:0;border:0;width:80%;height:calc(100% - 88px);vertical-align:middle;line-height:normal;text-align:left;white-space:normal;outline:none;font-size:16px;font-family:Arial, sans-serif;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-overflow-scrolling:touch;}
.fancybox-iframe{display:block;margin:0;padding:0;border:0;width:100%;height:100%;background:#fff;}
.fancybox-slide--video .fancybox-content,
.fancybox-slide--video .fancybox-iframe{background:transparent;}
.fancybox-placeholder{position:absolute;top:0;left:0;margin:0;padding:0;border:0;z-index:99995;background:transparent;cursor:default;overflow:visible;-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;background-size:100% 100%;background-repeat:no-repeat;-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.fancybox-image,
.fancybox-spaceball{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0;border:0;max-width:none;max-height:none;background:transparent;background-size:100% 100%;}
.fancybox-controls--canzoomOut .fancybox-placeholder{cursor:-webkit-zoom-out;cursor:zoom-out;}
.fancybox-controls--canzoomIn .fancybox-placeholder{cursor:-webkit-zoom-in;cursor:zoom-in;}
.fancybox-controls--canGrab .fancybox-placeholder{cursor:-webkit-grab;cursor:grab;}
.fancybox-controls--isGrabbing .fancybox-placeholder{cursor:-webkit-grabbing;cursor:grabbing;}
.fancybox-spaceball{z-index:1;}
.fancybox-tmp{position:absolute;top:-9999px;left:-9999px;visibility:hidden;}
.fancybox-error{position:absolute;margin:0;padding:40px;top:50%;left:50%;width:380px;max-width:100%;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);background:#fff;cursor:default;}
.fancybox-error p{margin:0;padding:0;color:#444;font:16px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;}
.fancybox-close-small{position:absolute;top:0;right:0;width:44px;height:44px;padding:0;margin:0;border:0;border-radius:0;outline:none;background:transparent;z-index:10;cursor:pointer;}
.fancybox-close-small:after{content:'×';position:absolute;top:5px;right:5px;width:30px;height:30px;font:20px/30px Arial,"Helvetica Neue",Helvetica,sans-serif;color:#888;font-weight:300;text-align:center;border-radius:50%;border-width:0;background:#fff;transition:background .2s;box-sizing:border-box;z-index:2;}
.fancybox-close-small:focus:after{outline:1px dotted #888;}
.fancybox-slide--video .fancybox-close-small{top:-36px;right:-36px;background:transparent;}
.fancybox-close-small:hover:after{color:#555;background:#eee;}
.fancybox-caption-wrap{position:absolute;bottom:0;left:0;right:0;padding:60px 30px 0 30px;z-index:99998;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-sizing:border-box;background:linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.1) 20%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.6) 80%, rgba(0, 0, 0, 0.8) 100%);opacity:0;transition:opacity .2s;pointer-events:none;}
.fancybox-show-caption .fancybox-caption-wrap{opacity:1;}
.fancybox-caption{padding:30px 0;border-top:1px solid rgba(255, 255, 255, 0.4);font-size:14px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:#fff;line-height:20px;-webkit-text-size-adjust:none;}
.fancybox-caption a,
.fancybox-caption button{pointer-events:all;}
.fancybox-caption a{color:#fff;text-decoration:underline;}
.fancybox-button{display:inline-block;position:relative;width:44px;height:44px;line-height:44px;margin:0;padding:0;border:0;border-radius:0;cursor:pointer;background:transparent;color:#fff;box-sizing:border-box;vertical-align:top;outline:none;}
.fancybox-button--disabled{cursor:default;pointer-events:none;}
.fancybox-infobar__body, .fancybox-button{background:rgba(30, 30, 30, 0.6);}
.fancybox-button:hover{background:rgba(0, 0, 0, 0.8);}
.fancybox-button::before,
.fancybox-button::after{content:'';pointer-events:none;position:absolute;border-color:#fff;background-color:currentColor;color:currentColor;opacity:0.9;box-sizing:border-box;display:inline-block;}
.fancybox-button--disabled::before,
.fancybox-button--disabled::after{opacity:0.5;}
.fancybox-button--left::after{left:20px;top:18px;width:6px;height:6px;background:transparent;border-top:solid 2px currentColor;border-right:solid 2px currentColor;-webkit-transform:rotate(-135deg);-ms-transform:rotate(-135deg);transform:rotate(-135deg);}
.fancybox-button--right::after{right:20px;top:18px;width:6px;height:6px;background:transparent;border-top:solid 2px currentColor;border-right:solid 2px currentColor;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}
.fancybox-button--left{border-bottom-left-radius:5px;}
.fancybox-button--right{border-bottom-right-radius:5px;}
.fancybox-button--close{float:right;}
.fancybox-button--close::before, .fancybox-button--close::after{content:'';display:inline-block;position:absolute;height:2px;width:16px;top:calc(50% - 1px);left:calc(50% - 8px);}
.fancybox-button--close::before{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}
.fancybox-button--close::after{-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);}
.fancybox-loading{border:6px solid rgba(100, 100, 100, 0.4);border-top:6px solid rgba(255, 255, 255, 0.6);border-radius:100%;height:50px;width:50px;-webkit-animation:fancybox-rotate .8s infinite linear;animation:fancybox-rotate .8s infinite linear;background:transparent;position:absolute;top:50%;left:50%;margin-top:-25px;margin-left:-25px;z-index:99999;}
@-webkit-keyframes fancybox-rotate{from{-webkit-transform:rotate(0deg);transform:rotate(0deg);}
to{-webkit-transform:rotate(359deg);transform:rotate(359deg);}
}
@keyframes fancybox-rotate{from{-webkit-transform:rotate(0deg);transform:rotate(0deg);}
to{-webkit-transform:rotate(359deg);transform:rotate(359deg);}
}
@media all and (max-width:800px){.fancybox-controls{text-align:left;}
.fancybox-button--left,
.fancybox-button--right,
.fancybox-buttons button:not(.fancybox-button--close){display:none !important;}
.fancybox-caption{padding:20px 0;margin:0;}
}
.fancybox-button--fullscreen::before{width:15px;height:11px;left:15px;top:16px;border:2px solid;background:none;}
.fancybox-button--play::before{top:16px;left:18px;width:0;height:0;border-top:6px inset transparent;border-bottom:6px inset transparent;border-left:10px solid;border-radius:1px;background:transparent;}
.fancybox-button--pause::before{top:16px;left:18px;width:7px;height:11px;border-style:solid;border-width:0 2px 0 2px;background:transparent;}
.fancybox-button--thumbs span{font-size:23px;}
.fancybox-button--thumbs::before{top:20px;left:21px;width:3px;height:3px;box-shadow:0 -4px 0, -4px -4px 0, 4px -4px 0, 0 0 0 32px inset, -4px 0 0, 4px 0 0, 0 4px 0, -4px 4px 0, 4px 4px 0;}
.fancybox-container--thumbs .fancybox-controls,
.fancybox-container--thumbs .fancybox-slider-wrap,
.fancybox-container--thumbs .fancybox-caption-wrap{right:220px;}
.fancybox-thumbs{position:absolute;top:0;right:0;bottom:0;left:auto;width:220px;margin:0;padding:5px 5px 0 0;background:#fff;z-index:99993;word-break:normal;-webkit-overflow-scrolling:touch;-webkit-tap-highlight-color:transparent;box-sizing:border-box;}
.fancybox-thumbs > ul{list-style:none;position:absolute;position:relative;width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:auto;font-size:0;}
.fancybox-thumbs > ul > li{float:left;overflow:hidden;max-width:50%;padding:0;margin:0;width:105px;height:75px;position:relative;cursor:pointer;outline:none;border:5px solid #fff;border-top-width:0;border-right-width:0;-webkit-tap-highlight-color:transparent;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-sizing:border-box;}
li.fancybox-thumbs-loading{background:rgba(0, 0, 0, 0.1);}
.fancybox-thumbs > ul > li > img{position:absolute;top:0;left:0;min-width:100%;min-height:100%;max-width:none;max-height:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.fancybox-thumbs > ul > li:before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;border-radius:2px;border:4px solid #4ea7f9;z-index:99991;opacity:0;transition:all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.fancybox-thumbs > ul > li.fancybox-thumbs-active:before{opacity:1;}
@media all and (max-width:800px){.fancybox-thumbs{display:none !important;}
.fancybox-container--thumbs .fancybox-controls,
.fancybox-container--thumbs .fancybox-slider-wrap,
.fancybox-container--thumbs .fancybox-caption-wrap{right:0;}
}

/*ajout du 8 juillet 2025*/


.ui-header-st1 h2{

  font-size: var(--step-4); line-height: 1.1;
  position: relative;
  
  text-align: center;

}


 .alt-section {
      padding: 4rem 0;
    }
    .alt-img {
      max-width: 100%;
      border-radius: 1rem;
    }
    .cta-fixed {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 1050;
    }





/* --- Orbiting “Hire Me” --- */
.orbit-wrap {
position: relative; /* Place le cercle par rapport à ce bloc */
width: 199px; /* ✏️ Taille du cercle */
height: 500px;
margin-inline: auto; /* Centre sur la page */
}
.orbit-link {
position: absolute;
inset: 0;
display: grid;
place-items: center;
text-decoration: none;
color: var(--fg);
pointer-events: auto;
}
.orbit { /* L’anneau en SVG qui tourne */
width: 100%;
height: 100%;
}

.orbit {
  animation: spin 10s linear infinite;
}
@keyframes spin { 
  to { transform: rotate(360deg); } 
}


.orbit text {
  fill: #ff4fa3; /* ta couleur, ex. rose vif */
  background: radial-gradient(1200px 800px at 50% 0%, #171a24 0%, #0f1016 60%);
}


/*text qui defile*/





.scroll-container {
 position: absolute;
  left: 50px;
  width: calc(100% - 100px);
  border: 1px solid black;
  background-color: transparent;
  padding: 5px;
  text-align: center;
}

.scroll-text {
display: inline-block;
white-space: break-spaces;
padding-left: 100%; /* Démarre en dehors de la boîte */
animation: scroll-left 16s linear infinite;
font-size: calc(100% - 210px);
font-weight: 600;
}


@keyframes scroll-left {
from { transform: translateX(0); }
to { transform: translateX(-100%); }
}
/* --- Ticker défilant (sans <marquee>) --- */
.ticker {
--gap: 2rem;
--duration: 18s;
margin: 24px auto 8px;
overflow: hidden;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.16);
background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
-webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.ticker__track {
display: flex;
width: max-content;
gap: var(--gap);
will-change: transform;
animation: ticker-scroll var(--duration) linear infinite;
padding: 10px 0;
}
.ticker__content { display: flex; gap: var(--gap); }
.ticker__item {
white-space: nowrap;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
opacity: .9;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }




.links.text.fsz-16.text-uppercase.mt-4.mt-lg-0.text-lg-end a {
  color: yellow;
  background: green;
}

.cbutton--effect-milan::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -35px 0 0 -35px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}

.cbutton--effect-milan::after,
.cbutton--effect-milan::before {
    border: 4px solid rgba(111,148,182,0.1);
}

.cbutton--effect-milan.cbutton--click::after {
    -webkit-animation-name: anim-effect-milan-3, anim-effect-milan-1;
    animation-name: anim-effect-milan-3, anim-effect-milan-1;
    -webkit-animation-duration: 5s, 2s;
    animation-duration: 5s, 2s;
    -webkit-animation-iteration-count: 1, infinite;
    animation-iteration-count: 1, infinite;
    -webkit-animation-timing-function: ease, linear;
    animation-timing-function: ease, linear;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.cbutton--effect-milan.cbutton--click::before {
    -webkit-animation-name: anim-effect-milan-3, anim-effect-milan-2;
    animation-name: anim-effect-milan-3, anim-effect-milan-2;
    -webkit-animation-duration: 5s, 2s;
    animation-duration: 5s, 2s;
    -webkit-animation-iteration-count: 1, infinite;
    animation-iteration-count: 1, infinite;
    -webkit-animation-timing-function: ease, linear;
    animation-timing-function: ease, linear;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes anim-effect-milan-1 {
    0% {
        -webkit-transform: perspective(1000px) rotate3d(1, 1, 1, 0deg);
        transform: perspective(1000px) rotate3d(1, 1, 1, 0deg);
    }
    100% {
        -webkit-transform: perspective(1000px) rotate3d(1, 1, 1, 360deg);
        transform: perspective(1000px) rotate3d(1, 1, 1, 360deg);
    }
}

@keyframes anim-effect-milan-1 {
    0% {
        -webkit-transform: perspective(1000px) rotate3d(1, 1, 1, 0deg);
        transform: perspective(1000px) rotate3d(1, 1, 1, 0deg);
    }
    100% {
        -webkit-transform: perspective(1000px) rotate3d(1, 1, 1, 360deg);
        transform: perspective(1000px) rotate3d(1, 1, 1, 360deg);
    }
}

@-webkit-keyframes anim-effect-milan-2 {
    0% {
        -webkit-transform: perspective(1000px) rotate3d(-1, -1, -1, 0deg);
        transform: perspective(1000px) rotate3d(-1, -1, -1, 0deg);
    }
    100% {
        -webkit-transform: perspective(1000px) rotate3d(-1, -1, -1, 360deg);
        transform: perspective(1000px) rotate3d(-1, -1, -1, 360deg);
    }
}

@keyframes anim-effect-milan-2 {
    0% {
        -webkit-transform: perspective(1000px) rotate3d(1, -1, 1, 0deg);
        transform: perspective(1000px) rotate3d(1, -1, 1, 0deg);
    }
    100% {
        -webkit-transform: perspective(1000px) rotate3d(1, -1, 1, 360deg);
        transform: perspective(1000px) rotate3d(1, -1, 1, 360deg);
    }
}

@-webkit-keyframes anim-effect-milan-3 {
    0%, 100% {
        opacity: 0;
    }
    25%, 75% {
        opacity: 1;
    }
}

@keyframes anim-effect-milan-3 {
    0%, 100% {
        opacity: 0;
    }
    25%, 75% {
        opacity: 1;
    }
}



.container1{
  text-align: center;
}

.nav-link, .media-library-view--widget .view-header a {
  display: block;
  padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
  font-size: var(--bs-nav-link-font-size);
  font-weight: var(--bs-nav-link-font-weight);
  color: white !important;
  text-decoration: none;
  background: none;
  border: 0;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  font-weight: bold;
}


.title-gradient-anim a{
  background: linear-gradient(90deg, #ff4d4f, #ffcd3c, #22d3ee, #a78bfa, #ff4d4f);
  background-size: 300% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  animation: gradient-move 10s linear infinite;
}

@keyframes gradient-move {
  to { background-position: -200% 0; }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
  .title-gradient-anim { animation: none; }
  .title-swipe { transition: none; }
}



.pt-perspective {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1200px;
  transform-style: preserve-3d;
}

.pt-page {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  overflow: hidden;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

.pt-page-current,
.no-js .pt-page {
  visibility: visible;
}

.no-js body {
  overflow: auto;
}

.pt-page-ontop {
  z-index: 999;
}


/* scale and fade */

.pt-page-scaleDown {
  animation: scaleDown .7s ease both;
}

.pt-page-scaleUp {
  animation: scaleUp .7s ease both;
}

.pt-page-scaleUpDown {
  animation: scaleUpDown .5s ease both;
}

.pt-page-scaleDownUp {
  animation: scaleDownUp .5s ease both;
}

.pt-page-scaleDownCenter {
  animation: scaleDownCenter .4s ease-in both;
}

.pt-page-scaleUpCenter {
  animation: scaleUpCenter .4s ease-out both;
}

/************ keyframes ************/

/* scale and fade */

@keyframes scaleDown {
  to { opacity: 0; transform: scale(.8); }
}

@keyframes scaleUp {
  from { opacity: 0; transform: scale(.8); }
}

@keyframes scaleUpDown {
  from { opacity: 0; transform: scale(1.2); }
}

@keyframes scaleDownUp {
  to { opacity: 0; transform: scale(1.2); }
}

@keyframes scaleDownCenter {
  to { opacity: 0; transform: scale(.7); }
}

@keyframes scaleUpCenter {
  from { opacity: 0; transform: scale(.7); }
}





/* --- Titre “Neo Dust 2025” --- */
.title-neo-dust{
  position:relative; display:inline-block;
  font-weight:800; letter-spacing:.01em;
  background: linear-gradient(90deg,var(--c1),var(--c2),var(--c3));
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.06));
  /* Fallback démarrage auto (désactivé si AOS est là) */
  animation: textShimmer 2.2s cubic-bezier(.2,.8,.2,1) both;
}

/* Poussière (particules + halo) */
.title-neo-dust::before{
  content:""; position:absolute; inset:-14% -10%;
  /* 3 nappes de micro-particules */
  background:
    radial-gradient(circle at 18% 32%, var(--dust) 1.3px, transparent 1.6px) 0 0/9px 9px,
    radial-gradient(circle at 72% 64%, var(--dust) 1.2px, transparent 1.5px) 3px 4px/10px 10px,
    radial-gradient(circle at 40% 78%, var(--dust) 1.1px, transparent 1.4px) 1px 6px/8px 8px;
  opacity:.75; filter: blur(.2px);
  pointer-events:none;
  transform: translateY(10px) translateX(-8px) scale(1.02) rotate(-2deg);
  animation:
    dustBurst 1.15s ease-out both,
    dustDrift 2.4s ease-out .5s both;
}
@media (prefers-color-scheme: dark){
  .title-neo-dust::before{
    background:
      radial-gradient(circle at 18% 32%, var(--dust-dark) 1.3px, transparent 1.6px) 0 0/9px 9px,
      radial-gradient(circle at 72% 64%, var(--dust-dark) 1.2px, transparent 1.5px) 3px 4px/10px 10px,
      radial-gradient(circle at 40% 78%, var(--dust-dark) 1.1px, transparent 1.4px) 1px 6px/8px 8px;
  }
}

/* Lueur/chatoiement fin au-dessus du texte */
.title-neo-dust::after{
  content:""; position:absolute; inset:-2px; pointer-events:none;
  background: conic-gradient(from 210deg at 50% 50%,
    transparent 0 10%, rgba(255,255,255,.25) 18%, transparent 28% 100%);
  mix-blend-mode: screen; opacity:.0;
  animation: sheen 1.2s ease-out .25s both;
}

/* Déclenchement via AOS (quand .aos-animate arrive) */
.title-neo-dust[data-aos].aos-animate{
  animation: textShimmer 1.8s cubic-bezier(.2,.8,.2,1) both;
}
.title-neo-dust[data-aos].aos-animate::before{
  animation: dustBurst 1s ease-out both, dustDrift 2s ease-out .4s both;
}
.title-neo-dust[data-aos].aos-animate::after{
  animation: sheen 1s ease-out .2s both;
}

/* Hover: relance un chatoiement discret */
.title-neo-dust:hover{ animation: textShimmer 1.2s ease-out both; }
.title-neo-dust:hover::after{ animation: sheen .9s ease-out both; }

/* --- Keyframes --- */
@keyframes textShimmer{
  0%{ background-position:0% 0; filter: blur(.4px) drop-shadow(0 10px 28px rgba(0,0,0,.08)); opacity:.0 }
  35%{ opacity:1 }
  100%{ background-position:100% 0; filter:none; opacity:1 }
}
@keyframes dustBurst{
  0%{ opacity:.8; transform: translateY(12px) translateX(-10px) scale(1.02) rotate(-3deg) }
  60%{ opacity:.45 }
  100%{ opacity:0; transform: translateY(-28px) translateX(28px) scale(1.08) rotate(2deg) }
}
@keyframes dustDrift{
  0%{ filter: blur(.2px) }
  100%{ filter: blur(.8px) }
}
@keyframes sheen{
  0%{ opacity:.0; transform: translateX(-8%) }
  40%{ opacity:.6 }
  100%{ opacity:0; transform: translateX(12%) }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce){
  .title-neo-dust, .title-neo-dust::before, .title-neo-dust::after{
    animation: none !important; opacity:1 !important; filter:none !important;
  }
}

/* Bonus: scroll-timeline (progressif si supporté) */
@supports (animation-timeline: view()){
  .title-neo-dust{
    animation-timeline: view();
    animation-range: entry 10% cover 35%;
  }
}


.marquee {
  overflow: hidden;
  white-space: nowrap;
}
.marquee .track {
  display: inline-flex;
  gap: var(--marquee-gap);
  will-change: transform;
}
@keyframes marqueeX {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* on défile la moitié car on duplique le contenu */
}
/* AOS ajoute .aos-animate : on lance l’anim uniquement à l’apparition */
.marquee.aos-animate .track {
  animation: marqueeX var(--marquee-speed) linear infinite;
}
/* Pause au hover */
.marquee:hover .track { animation-play-state: paused; }

/* Accessibilité */
@media (prefers-reduced-motion: reduce){
  .marquee .track { animation: none !important; }
}






/* Zone d’arrière-plan animée */
.js-bg-area{
  position: relative;
  overflow: hidden;
  color: #fff;

  /* Variables animées par GSAP */
  --ang: 0deg;     /* angle pour le conic-gradient */
  --mx: 50%;       /* x du hotspot */
  --my: 50%;       /* y du hotspot */

  /* Couche de base sombre */
  background-color: #2b4e9500;

  /* Couche 1 : halo radial qui suit souris/scroll */
  background-image:
    radial-gradient(800px 600px at var(--mx) var(--my),
      rgba(255,255,255,0.08) 0%,
      rgba(255,255,255,0.04) 30%,
      rgba(255,255,255,0.0) 60%),

  /* Couche 2 : conic gradient subtil qui tourne */
    conic-gradient(from var(--ang),
      rgba(14,165,233,0.18) 0%,
      rgba(147,51,234,0.18) 25%,
      rgba(14,165,233,0.18) 50%,
      rgba(99,102,241,0.18) 75%,
      rgba(14,165,233,0.18) 100%);
  background-blend-mode: screen;
}

/* Optionnel : un léger grain/noise pour casser les aplats */
.js-bg-area::after{
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0 0.06'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' /%3E%3C/svg%3E");
  opacity: .35;
  mix-blend-mode: overlay;
}



.navbar-brand img {
  height: 175px !important;
}

/* Zone bokeh */
.js-bokeh-area{
  position: relative;
  overflow: hidden;
  isolation: isolate;           /* pour les mix-blend-mode sans side effects */
  background: #0b1220;          /* base sombre (change si besoin) */
}

/* Calque contenant les orbs */
.js-bokeh-layer{
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;                   /* contenu au-dessus (z-index: auto) */
}

/* Une orb */
.bokeh-orb{
  position: absolute;
  width: 240px; height: 240px;  /* sera surchargé en JS */
  border-radius: 50%;
  filter: blur(18px);
  opacity: .55;
  mix-blend-mode: screen;
  will-change: transform;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), rgba(255,255,255,0) 60%);
}

/* Optionnel : grain très léger */
.js-bokeh-area::after{
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .25;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0 0.06'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' /%3E%3C/svg%3E");
}


.bg-grid{
  position: relative;  color:#fff; isolation:isolate;
}
.bg-grid::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.22;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 28px 28px;
  transform: translateZ(0);
  animation: gridDrift 16s linear infinite;
}
.bg-grid::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background: radial-gradient(600px 400px at 70% 30%, rgba(99,102,241,.25), transparent 60%);
  animation: glowPan 14s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}
@keyframes gridDrift{
  0%   { background-position:0 0, 0 0; }
  100% { background-position:28px 28px, 28px 28px; }
}
@keyframes glowPan{
  0%   { background-position: 60% 30%; }
  100% { background-position: 40% 70%; }
}
@media (prefers-reduced-motion: reduce){
  .bg-grid::before, .bg-grid::after{ animation:none; }
}



.bg-mesh{
  position: relative; overflow:hidden; isolation:isolate;
  background: #0e0f17;
}
.bg-mesh::before{
  content:"";
  position:absolute; inset:-25%;
  background:
    radial-gradient(30% 30% at 20% 30%, #5eead4 0%, transparent 20%),
    radial-gradient(35% 35% at 80% 30%, #a78bfa 0%, transparent 20%),
    radial-gradient(30% 30% at 40% 80%, #f472b6 0%, transparent 10%),
    radial-gradient(25% 25% at 75% 75%, #60a5fa 0%, transparent 20%);
  filter: blur(38px);
  transform: translateZ(0);
  animation: meshShift 22s cubic-bezier(.6,.2,.2,1) infinite alternate;
  z-index:-1;
}
@keyframes meshShift{
  0%   { transform: translate(-2%, -1%) scale(1.05) rotate(0deg); }
  50%  { transform: translate(3%,  2%) scale(1.08) rotate(6deg); }
  100% { transform: translate(-1%, 3%) scale(1.02) rotate(-6deg); }
}
@media (prefers-reduced-motion: reduce){
  .bg-mesh::before{ animation:none; }
}



.bg {
  animation:slide 3s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
  bottom:0;
  left:-50%;
  opacity:.5;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
}

.bg2 {
  animation-direction:alternate-reverse;
  animation-duration:4s;
}

.bg3 {
  animation-duration:5s;
}



h1 {
  font-family:monospace;
}

@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}



  /* Make each .item a positioning context for its ribbon */
  .ui-portfolio-st1 .item { position: relative; }

  /* Diagonal ribbon */
  .ribbon {
   
    background: var(--ribbon-bg);
    color: var(--ribbon-color);
    padding: 10px 64px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: .5px;
    text-transform: uppercase;
    transform: rotate(0deg);
    transform-origin: top right;
    box-shadow: 0 6px 16px rgba(0,0,0,.18);
    z-index: 10;
    border-radius: 3px;
  }
  .ribbon:hover { background: var(--ribbon-bg-hover); }

  /* Nice triangle tails (optional) */
  .ribbon::before,
  .ribbon::after{
    content:"";
    position:absolute;
    inset: 0;
    pointer-events: none;
  }

  /* Small screens: convert to a clean vertical tab to keep readability */
  @media (max-width: 575.98px){
    .ribbon{
      right: 10px;
      top: 10px;
      transform: none;
      padding: 8px 12px;
      border-radius: 999px;
      font-size: 12px;
      box-shadow: 0 4px 10px rgba(0,0,0,.15);
    }
  }

.dark2{
  background:black;
}


h2 {
  /* clamp(min, preferred, max) */
  font-size: clamp(
    1.5rem,                  /* minimum font size */
    calc(1rem + 2vw),        /* preferred fluid size */
    3rem                     /* maximum font size */
  );
}


/* Base fluid typography system */
:root {
  /* You can tweak these variables to adjust globally */
  --step--2: clamp(0.75rem, calc(0.65rem + 0.4vw), 0.9rem);
  --step--1: clamp(0.9rem, calc(0.8rem + 0.5vw), 1rem);
  --step-0:  clamp(1rem, calc(0.9rem + 0.6vw), 1.125rem);
  --step-1:  clamp(1.25rem, calc(1rem + 1vw), 1.5rem);
  --step-2:  clamp(1.5rem, calc(1.25rem + 1.2vw), 2rem);
  --step-3:  clamp(2rem, calc(1.5rem + 1.5vw), 2.5rem);
  --step-4:  clamp(2.5rem, calc(2rem + 2vw), 3.5rem);
  --step-5:  clamp(3rem, calc(2.5rem + 3vw), 4.5rem);
}

/* Body text */
body {
  font-size: var(--step-0);
  line-height: 1.6;
  font-family: system-ui, sans-serif;
}

/* Headings */
h1 { font-size: var(--step-5); line-height: 1.1; }
h2 { font-size: var(--step-4); line-height: 1.2; }
h3 { font-size: var(--step-3); line-height: 1.3; }
h4 { font-size: var(--step-2); line-height: 1.3; }
h5 { font-size: var(--step-1); line-height: 1.4; }
h6 { font-size: var(--step-0); line-height: 1.4; }
p  { font-size: var(--step-0); margin-bottom: 1em; }
small { font-size: var(--step--1); }




/* helper: returns a fluid value between min and max over the vw range */
@supports (font-size: clamp(1rem, 2vw, 3rem)) {
  :root{
    /* Body/base size */
    --step-0-min: 1rem;     /* ~16px */
    --step-0-max: 1.125rem; /* ~18px */

    /* Smaller / larger steps mapped to your fsz-* classes */
    --step--1-min: 0.9rem;   --step--1-max: 1rem;     /* ~14.4→16 */
    --step--2-min: 0.75rem;  --step--2-max: 0.9rem;   /* ~12→14.4 */
    --step-1-min:  1.25rem;  --step-1-max: 1.5rem;    /* ~20→24  */
    --step-2-min:  1.5rem;   --step-2-max: 2rem;      /* ~24→32  */
    --step-3-min:  2rem;     --step-3-max: 2.5rem;    /* ~32→40  */
    --min-vw: 320;   /* design’s narrow viewport in px */
  --max-vw: 1440;  /* design’s wide viewport in px */
    --vw-range: calc(var(--max-vw) - var(--min-vw));
      --c1:#7c3aed; /* violet */
  --c2:#06b6d4; /* cyan */
  --c3:#22c55e; /* vert */
  --dust: rgba(0,0,0,.18);        /* couleur particules (clair) */
  --dust-dark: rgba(255,255,255,.18); /* (sombre) */
    --marquee-speed: 18s; /* + grand = plus lent */
  --marquee-gap: 3rem;
    --ribbon-bg: #ff6f61;      /* accent color */
    --ribbon-bg-hover: #d94b3f;/* hover */
    --ribbon-color: #fff;
  }

  /* fluid() = clamp(min, calc(min + slope * (vw - minVW)), max) */
  
  .fluid-0 { font-size: clamp(var(--step-0-min),
                   calc(var(--step-0-min) + (var(--step-0-max) - var(--step-0-min)) * 
                        ( (100vw - calc(var(--min-vw)*1px)) / var(--vw-range) )),
                   var(--step-0-max)); }

  .fluid--1{ font-size: clamp(var(--step--1-min),
                   calc(var(--step--1-min) + (var(--step--1-max) - var(--step--1-min)) * 
                        ( (100vw - calc(var(--min-vw)*1px)) / var(--vw-range) )),
                   var(--step--1-max)); }

  .fluid--2{ font-size: clamp(var(--step--2-min),
                   calc(var(--step--2-min) + (var(--step--2-max) - var(--step--2-min)) * 
                        ( (100vw - calc(var(--min-vw)*1px)) / var(--vw-range) )),
                   var(--step--2-max)); }

  .fluid-1 { font-size: clamp(var(--step-1-min),
                   calc(var(--step-1-min) + (var(--step-1-max) - var(--step-1-min)) * 
                        ( (100vw - calc(var(--min-vw)*1px)) / var(--vw-range) )),
                   var(--step-1-max)); }

  .fluid-2 { font-size: clamp(var(--step-2-min),
                   calc(var(--step-2-min) + (var(--step-2-max) - var(--step-2-min)) * 
                        ( (100vw - calc(var(--min-vw)*1px)) / var(--vw-range) )),
                   var(--step-2-max)); }

  .fluid-3 { font-size: clamp(var(--step-3-min),
                   calc(var(--step-3-min) + (var(--step-3-max) - var(--step-3-min)) * 
                        ( (100vw - calc(var(--min-vw)*1px)) / var(--vw-range) )),
                   var(--step-3-max)); }
}

/* Map your existing classes to the new fluid sizes */
.fsz-15 { composes: fluid--1; } /* ~14–16px */
.fsz-16 { composes: fluid-0;  } /* ~16–18px */
.fsz-20 { composes: fluid-1;  } /* ~20–24px */
.fsz-25 { composes: fluid-2;  } /* ~24–32px */
.fsz-27 { composes: fluid-3;  } /* ~32–40px for big labels */

/* If your build doesn’t support `composes`, use class lists in HTML:
   e.g. <p class="fsz-20 fluid-1">...</p> and remove the composes rules above. */

/* Optional: letter-spacing & text-indent using calc() */
.text-uppercase { 
  letter-spacing: calc(0.04em + 0.4px);
}
.indent-lg { text-indent: calc(1em + 8px); }

/* Utility for balanced headings (where supported) */
.text-balance { text-wrap: balance; }

/* Video and image helpers you already use */
.img-cover { object-fit: cover; width: 100%; height: 100%; }

/* Marquee: reduce motion for accessibility */
@media (prefers-reduced-motion: reduce){
  .track { animation: none !important; transform: none !important; }
}


.bg-secondary {
  --bs-bg-opacity: 1;
  background-color: black !important;
}

.bg-dark {
  --bs-bg-opacity: 1;
 background-color: black !important;
}

#block-bootstrap5-page-title {
  display: none;
}



a.first:after{
  left:0;
}
a.second:after{
  right:0;
}
a.third:after,a.sixth:before,a.sixth:after{
  left:50%;
  -webkit-transform:translateX(-50%);
          transform:translateX(-50%);
}
a.fourth:before,a.fourth:after{
  left:0;
}
a.fifth:before,a.fifth:after{
  right:0;
}
a.seventh:before{
  right:0;
}
a.seventh:after{
  left:0;
}
a.eigth:before{
  left:0;
}
a.eigth:after{
  right:0;
}
a.before:hover:before,a.after:hover:after{
  width:100%;
}
.square{
  box-sizing:border-box;
  margin-left:-0.4em;
  position:relative;
  font-size:2.5em;
  overflow:hidden;
}
.square a{
  position:static;
  font-size:100%;
  padding:0.2em 0.4em;
}
.square:before,.square:after{
  content: "";
  box-sizing:border-box;
  transition:0.25s all ease;
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
  position:absolute;
  width:5px;
  width:0.35rem;
  height:0;
  background:#d73444;
}
.square:before{
  left:0;
  bottom:-0.2em;
}
.square.individual:before{
  transition-delay:0.6s;
}
.square:after{
  right:0;
  top:-0.2em;
}
.square.individual:after{
  transition-delay:0.2s;
}
.square a:before{
  left:0;
  transition:0.25s all ease;
}
.square a:after{
  right:0;
  transition:0.25s all ease;
}
.square.individual a:after{
  transition:0.25s all ease 0.4s;
}
.square:hover:before,.square:hover:after{
  height:calc(100% + 0.4em);
}
.square:hover a:before,.square:hover a:after{
  width:100%;
}

.wrapper{
  margin:3em 0;
}

.grid-bg{
    position: fixed;
    inset: 0;
    pointer-events: none;
    /* Two layers: horizontal & vertical lines */
    background-image:
      repeating-linear-gradient(0deg,   var(--line) 0 1px, transparent 1px var(--size)),
      repeating-linear-gradient(90deg,  var(--line) 0 1px, transparent 1px var(--size));
    background-size: var(--size) var(--size), var(--size) var(--size);
    animation: grid-drift var(--speed) linear infinite;
  }

  /* Optional soft vignette for depth */
  .grid-bg::after{
    content:"";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(120% 80% at 50% -10%, rgba(0,180,255,.12), transparent 60%),
      radial-gradient(80% 80% at 120% 120%, rgba(255,90,0,.08), transparent 60%);
    mix-blend-mode: screen;
    animation: glow 10s ease-in-out infinite alternate;
  }

  @keyframes grid-drift{
    to{
      /* Move horizontal layer right, vertical layer down by one cell */
      background-position: var(--size) 0, 0 var(--size);
    }
  }

  @keyframes glow{
    0%   { opacity: .6; transform: translate3d(0,0,0) }
    100% { opacity: .95; transform: translate3d(0,-2%,0) }
  }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce){
    .grid-bg{ animation: none }
    .grid-bg::after{ animation: none }
  }


  :root { --radius: 1.2rem; }

.ui-pricing-st3 { border-top:1px solid rgba(255,255,255,.08); }
.section-title { letter-spacing:.06em; }


#grid-node { position: relative; overflow: hidden; border-radius: var(--radius); }
#grid-node .content-wrap { position: relative; z-index: 2; }


#grid-node {
background-image:
linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
background-size: 22px 22px;
background-position: 0 0;
}


#grid-node .grid-overlay {
position: absolute;
inset: -40%;
pointer-events: none;
opacity: .22;
background-image:
linear-gradient(to right, rgba(255,255,255,.18) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,.18) 1px, transparent 1px);
background-size: 22px 22px;
transform: translate3d(0,0,0);
}


.service-card { background:#111216; border:1px solid rgba(255,255,255,.08); border-radius: var(--radius); height:100%; }
.service-card h3 { color:#fff; }
.service-card p { color:#cbd5df; }
.service-card .badge { font-weight:600; }
.shadow-soft { box-shadow: 0 18px 40px rgba(0,0,0,.35); }

.list-inline i {
  font-size: 2.3rem;
  line-height: 1;
  color: #e6e2dd;
  margin: 10px;
}

.social-inline a {
  transition: color 0.3s ease, transform 0.3s ease;
  color: #fff; /* couleur par défaut */
}

.social-inline a:hover {
  color: #ff6b6b; /* couleur au survol (ex. rouge/rose) */
  transform: scale(1.2); /* zoom léger */
}

.social-inline a[href*="facebook.com"]:hover { color: #1877f2; }
.social-inline a[href*="instagram.com"]:hover { color: #e4405f; }
.social-inline a[href*="linkedin.com"]:hover { color: #0a66c2; }
.social-inline a[href*="x.com"],
.social-inline a[href*="twitter.com"]:hover { color: #1da1f2; }
.social-inline a[href*="youtube.com"]:hover { color: #ff0000; }
.social-inline a[href*="tiktok.com"]:hover { color: #000000; }

/* Motion safety */
@media (prefers-reduced-motion: reduce) {
  .page-transition {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Base */
.page-transition {
  will-change: transform, opacity;
  opacity: 1;
  transform: translateX(0);
  transition: transform 0.55s ease, opacity 0.55s ease;
}

/* État avant entrée (venant de la droite) */
.page-transition.is-entering.slide-in-right {
  opacity: 0;
  transform: translateX(40px);
}

/* État avant entrée (venant de la gauche — pour retour navigateur) */
.page-transition.is-entering.slide-in-left {
  opacity: 0;
  transform: translateX(-40px);
}

/* Sortie vers la gauche (navigation « avant ») */
.page-transition.is-exiting.slide-out-left {
  opacity: 0;
  transform: translateX(-40px);
}

/* Sortie vers la droite (navigation « retour ») */
.page-transition.is-exiting.slide-out-right {
  opacity: 0;
  transform: translateX(40px);
}

/* Option : léger “lift” du contenu principal pendant l’anim (si tu veux)
main, .region-content {
  transition: transform 0.55s ease;
}
.page-transition.is-entering main,
.page-transition.is-exiting main {
  transform: translateY(-2px);
} */


/* Only apply if the browser supports view() timelines */
@supports (animation-timeline: view()) {
  /* Each element gets its own per-element view timeline */
  .view .view-content .views-row {
    /* start state (also used as fallback if no support) */
    opacity: 0;
    transform: translateY(12px);

    /* the animation */
    animation-name: row-reveal;
    animation-duration: 1s;            /* total time to interpolate from 0→100% */
    animation-timing-function: cubic-bezier(.2,.7,.2,1);
    animation-fill-mode: both;         /* keep end state */

    /* the magic: tie it to the element’s own view timeline */
    animation-timeline: view();        /* per-element view timeline */
    /* When does the animation run relative to scroll? 
       From when the element starts entering (20% in) until it is 40% covered. */
    animation-range: entry 20% cover 40%;
    will-change: transform, opacity;
  }

  @keyframes row-reveal {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* Reduced motion: keep content visible, no animation */
@media (prefers-reduced-motion: reduce) {
  .view .view-content .views-row { opacity: 1 !important; transform: none !important; animation: none !important; }
}


/* Wrapper with image background */
.webform-cta-download-wrap {
  position: relative;
  padding: 3rem 2rem;
  border-radius: 16px;
  overflow: hidden;
  background: center / cover no-repeat url("/sites/default/files/cta-bg.jpg");
}

/* Optional dark overlay for readability */
.webform-cta-download-wrap::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.45));
  backdrop-filter: saturate(120%) blur(2px);
}

/* Keep form above overlay */
.webform-cta-download {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 0 auto;
}

/* Minor cosmetic tweaks */
.webform-cta-download input[type="email"] {
  background: rgba(255,255,255,.95);
  border-radius: 10px;
}
.webform-cta-download .webform-actions .button {
  border-radius: 10px;
}

/* Responsive */
@media (max-width: 768px) {
  .webform-cta-download-wrap { padding: 2rem 1.25rem; border-radius: 12px; }
}


/* Conteneur horizontal + responsive */
.social-media-sharing .share{
  display:flex;
  flex-wrap:wrap;                 /* passe à la ligne si trop long */
  gap:.5rem .75rem;               /* espace entre les boutons */
  align-items:center;
  margin:0;
  padding:0;
  list-style:none;
}

/* Nettoyage des <li> */
.social-media-sharing .share > li{
  margin:0;
  padding:0;
}

/* Style de base des liens */
.social-media-sharing .share a{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding:.45rem .75rem;
  border:1px solid #e5e7eb;       /* gris léger */
  border-radius:999px;            /* pill */
  text-decoration:none;
  font-size:.875rem;              /* 14px */
  line-height:1;
  color:#111827;                  /* gris foncé */
  background:#fff;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  white-space:nowrap;
}

/* Icône image éventuelle */
.social-media-sharing .share a img{
  height:1em;                     /* aligne sur le texte */
  width:auto;
  vertical-align:middle;
  margin-right:.45rem;
}

/* Hover/Focus */
.social-media-sharing .share a:hover,
.social-media-sharing .share a:focus{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  outline:none;
}

/* Variantes (optionnel) – couleurs des plateformes */
.social-media-sharing .share .share--facebook{ border-color:#1877F2; color:#1877F2; }
.social-media-sharing .share .share--x{ border-color:#111; color:#111; }
.social-media-sharing .share .share--linkedin{ border-color:#0A66C2; color:#0A66C2; }
.social-media-sharing .share .share--whatsapp{ border-color:#25D366; color:#25D366; }
.social-media-sharing .share .share--telegram{ border-color:#229ED9; color:#229ED9; }
.social-media-sharing .share .share--email{ border-color:#6B7280; color:#374151; }

.social-media-sharing .share .share--facebook:hover{ background:rgba(24,119,242,.06); }
.social-media-sharing .share .share--x:hover{ background:rgba(17,17,17,.06); }
.social-media-sharing .share .share--linkedin:hover{ background:rgba(10,102,194,.06); }
.social-media-sharing .share .share--whatsapp:hover{ background:rgba(37,211,102,.08); }
.social-media-sharing .share .share--telegram:hover{ background:rgba(34,158,217,.08); }
.social-media-sharing .share .share--email:hover{ background:rgba(107,114,128,.08); }

/* Accessibilité : réduit les animations si demandé */
@media (prefers-reduced-motion: reduce){
  .social-media-sharing .share a{ transition:none; }
}

/* Option compact (mobile serré) */
@media (max-width:480px){
  .social-media-sharing .share a{
    padding:.4rem .6rem;
    font-size:.82rem;
  }
}


/* Couleur Instagram */
.social-media-sharing .share .share--instagram{
  border-color:#E1306C;
  color:#E1306C;
}
.social-media-sharing .share .share--instagram:hover{
  background:rgba(225,48,108,.08);
}

/* Feedback quand copié */
.social-media-sharing .share .share--instagram.copied{
  background:rgba(225,48,108,.12);
}
.social-media-sharing .share a .icon{
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  display: inline-block;
}

/* couleurs déjà proposées précédemment ; ajoute Instagram */
.social-media-sharing .share .share--instagram{ border-color:#E1306C; color:#E1306C; }
.social-media-sharing .share .share--instagram:hover{ background:rgba(225,48,108,.08); }


:root{
  --bg: #0b0d13;              /* fond page (optionnel) */
  --bubble-bg: #11151d;       /* fond bulle */
  --bubble-fg: #eaf2ff;       /* texte */
  --shadow: 0 14px 32px rgba(0,0,0,.28);
}

/* page dark (optionnel) */
body{ background: var(--bg); }

.bubble-thought{
  position: relative;
  display: inline-block;
  max-width: min(46ch, 92%);
  padding: 1.1rem 1.35rem;
  color: var(--bubble-fg);
  background:
    linear-gradient(var(--bubble-bg), var(--bubble-bg)) padding-box,
    conic-gradient(from 0deg, #ff6b6b, #845ef7, #22b8cf, #ff6b6b) border-box;
  border: 2px solid transparent;
  border-radius: 1.75rem;
  box-shadow: var(--shadow);
  line-height: 1.5;
  isolation: isolate;
}

/* petites bulles (queue) */
.bubble-thought::before, .bubble-thought::after{
  content:"";
  position: absolute;
  border-radius: 50%;
  background: var(--bubble-bg);
  border: 2px solid transparent;
  background:
    linear-gradient(var(--bubble-bg), var(--bubble-bg)) padding-box,
    conic-gradient(from 0deg, #ff6b6b, #845ef7, #22b8cf, #ff6b6b) border-box;
  width: 14px; height: 14px;
  box-shadow: var(--shadow);
  transform-origin: center;
}

/* orientation gauche */
.bubble-thought.left::before{ left: -10px; bottom: 20px; }
.bubble-thought.left::after { left: -24px; bottom: 6px;  width: 10px; height: 10px; }

/* orientation droite */
.bubble-thought.right::before{ right: -10px; bottom: 20px; }
.bubble-thought.right::after { right: -24px; bottom: 6px;  width: 10px; height: 10px; }

/* === ANIMATIONS === */
.animate{ animation: floatY 5.5s ease-in-out infinite; }
@keyframes floatY{
  0%,100%{ transform: translateY(0); }
  50%    { transform: translateY(-6px); }
}

/* contour dégradé qui tourne lentement */
.animate{
  --spin: 0deg;
  animation:
    floatY 5.5s ease-in-out infinite,
    borderSpin 10s linear infinite;
}
@keyframes borderSpin{
  to{ filter: hue-rotate(360deg); }
}

/* pulsation des petites bulles (décalées) */
.bubble-thought.animate::before{
  animation: pulse 1.4s ease-in-out infinite;
}
.bubble-thought.animate::after{
  animation: pulse 1.4s ease-in-out infinite .25s;
}
@keyframes pulse{
  0%,100%{ transform: scale(1); opacity: .9; }
  50%    { transform: scale(1.25); opacity: 1; }
}

/* option : légère déformation “organique” */
.bubble-thought.animate{
  animation:
    floatY 5.5s ease-in-out infinite,
    borderSpin 10s linear infinite,
    blob 12s ease-in-out infinite alternate;
}
@keyframes blob{
  0%  { border-radius: 28px 30px 26px 30px / 30px 26px 32px 28px; }
  100%{ border-radius: 32px 26px 30px 26px / 26px 32px 26px 30px; }
}

/* accessibilité */
@media (prefers-reduced-motion: reduce){
  .bubble-thought.animate,
  .bubble-thought.animate::before,
  .bubble-thought.animate::after{ animation: none !important; }
}


/* Panneau centre */
.binary-panel{
  position: relative;
  overflow: hidden;
  background: rgba(12,14,20,.65);
  backdrop-filter: blur(8px) saturate(120%);
  border: 1px solid rgba(255,255,255,.08);
}

/* Grille de colonnes de chiffres */
.binary-matrix{
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, 1fr);     /* nb de colonnes logique */
  gap: 0 10px;
  height: 100%;
  min-height: 360px;                         /* ajuste selon ton design */
  padding: 16px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;
  font-size: 14px;
  line-height: 1.1;
  color: #22b8cf;                            /* cyan */
}

/* Colonne individuelle */
.binary-matrix .bm-col{
  position: relative;
  overflow: hidden;
  filter: drop-shadow(0 6px 12px rgba(34,184,207,.18));
}

/* Deux copies empilées pour une boucle fluide */
.binary-matrix .bm-col pre{
  margin: 0;
  white-space: pre;
  user-select: none;
  opacity: .9;
  letter-spacing: .5px;
  animation: bm-scroll var(--dur, 10s) linear infinite;
  transform: translateY(-100%);
}
.binary-matrix .bm-col pre:nth-child(2){
  animation-delay: calc(var(--dur, 10s) / -2);
}

/* Effet scintillant vertical (lumière) */
.binary-panel::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.06) 50%, transparent 100%);
  mix-blend-mode: screen;
  animation: sweep 5s ease-in-out infinite;
  pointer-events: none;
}

/* Teinte animée légère */
.binary-panel{ animation: hue 12s linear infinite; }

/* Keyframes */
@keyframes bm-scroll{
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(0%); }
}
@keyframes sweep{
  0%,100%{ opacity:.15; transform: translateY(-15%); }
  50%   { opacity:.35; transform: translateY(15%); }
}
@keyframes hue{ to{ filter: hue-rotate(20deg); } }

/* Responsive : moins de colonnes sur petit écran */
@media (max-width: 991.98px){
  .binary-matrix{ grid-template-columns: repeat(6, 1fr); min-height: 300px; }
}
@media (max-width: 575.98px){
  .binary-matrix{ grid-template-columns: repeat(4, 1fr); min-height: 240px; }
}



/* Conteneur plein écran derrière tout */
.lasso-bg {
  position: fixed;
  inset: 0;
  z-index: 0;            /* sous le contenu */
  pointer-events: none;
  opacity: 0.2;          /* valeur initiale, animée en JS */
}

.lasso-bg svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Lueur douce via filtre */
.lasso-bg .lasso-path {
  filter: drop-shadow(0 12px 28px rgba(34,184,207,.25));
}

/* Respecte l’accessibilité */
@media (prefers-reduced-motion: reduce) {
  .lasso-bg { display: none; }
}




  html{ scroll-behavior:smooth; }

/* Conteneur principal = référentiel */
.ui-portfolio-st1 .container {
  position: relative;
}

.side-nav.dots {
  position: fixed;
  top: 100px;
  left: 40px;   /* ou right:40px si à droite */
  z-index: 1000;
}

  .side-nav.dots ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .side-nav.dots a{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    outline: none;
  }

  /* Pastille */
  .side-nav.dots .dot{
    width: 10px; height: 10px; border-radius: 50%;
    background: #bdb8c7;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.06) inset, 0 2px 8px rgba(0,0,0,0.25);
    transition: transform .18s ease, background .18s ease;
  }

  /* Label caché par défaut (s’ouvre au hover/focus/active) */
  .side-nav.dots .label{
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1;
    color: #eae7ef;
    background: rgba(20,18,26,0.65);
    backdrop-filter: blur(6px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    transition: max-width .22s ease, opacity .2s ease;
  }

  /* Expansion au survol du bloc de nav (ou focus/active lien) */
  .side-nav.dots:hover .label{ max-width: 220px; opacity: 1; }
  .side-nav.dots a:focus .label,
  .side-nav.dots a.active .label{ max-width: 220px; opacity: 1; }

  /* État actif / hover : dot plus grande + dégradé */
  .side-nav.dots a:hover .dot,
  .side-nav.dots a.active .dot{
    transform: scale(1.6);
    background: linear-gradient(90deg,#efb7d4,#c7ace0,#b7efeb);
  }

  /* Masquer sur mobile (optionnel) */
  @media (max-width: 991.98px){
    .side-nav.dots{ display:none; }
  }

.page-wrapper {
  will-change: transform;
}


.block-views-blockblocknewshome .view-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* tablette */
@media (max-width: 991px) {
  .block-views-blockblocknewshome .view-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* mobile */
@media (max-width: 575px) {
  .block-views-blockblocknewshome .view-content {
    grid-template-columns: 1fr;
  }
}


.node__links {
  display: none;
}


        }
       
        header h1 {
            margin: 0;
            font-size: 2rem;
        }
        .pricing-container {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin: 40px 0;
            padding: 0 10px;
        }
        .pricing-plan {
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            width: 280px;
            text-align: center;
            transition: transform 0.3s;
        }
        .pricing-plan:hover {
            transform: scale(1.05);
        }
        .pricing-plan h2 {
            color: #0070f3;
            font-size: 1.5rem;
            margin-bottom: 15px;
        }
        .pricing-plan .price {
            font-size: 2rem;
            font-weight: 700;
            color: #333;
        }
        .pricing-plan .duration {
            font-size: 1.2rem;
            color: #555;
            margin-bottom: 15px;
        }
        .pricing-plan ul {
            list-style-type: none;
            padding: 0;
            margin: 20px 0;
        }
        .pricing-plan ul li {
            font-size: 1rem;
            color: #333;
            margin-bottom: 10px;
        }
        .cta-button {
            background-color: #0070f3;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            text-transform: uppercase;
            font-weight: 600;
        }
        .cta-button:hover {
            background-color: #005bb5;
        }