*{
         font-family: "Poppins", sans-serif;
         }
         .txt-xxs {
         font-size: 9px;
         }
         .txt-xs {
         font-size: 12px;
         }
         .txt-sm {
         font-size: 14px;
         }
         .txt-md {
         font-size: 16px;
         }
         .txt-l {
         font-size: 18px;
         }
         .txt-lg {
         font-size: 22px;
         }
         .txt-xl {
         font-size: 28px;
         }
         .txt-xxl {
         font-size: 36px;
         }
         .txt-xxxl {
         font-size: 48px;
         }
         .airlod-btn{
         background-color: black !important;
         border-radius: 25px !important;
         color: #fff !important;
         padding: 13px !important;
         width: 100%;
         }
         .body{
         /*min-height: 100vh;*/
         background-color: #FFF;
         width: 100%;
         /*height: 100%;*/
         }
         .btn-p{
        background-color: #ffffff;
        border: 1px solid black;
        padding: 5px;
        padding-left: 15px;
        padding-right: 15px;
        font-size: 14px;
        border-radius: 8px;
        color: #000000;

         }
         .body-wrapper{
        
         flex: 1;
         background: url('/img/background.png');
         background-position:top;
         background-size: cover;
         height: 100%;
         position: absolute;
         top: 10%;
         height: 100%;
         width: 100%;
         }
         .purplebg{
         background: url('/img/purplebackground.png');
         background-position:center;
         background-size:contain;
         min-height: 30vh;
         z-index: 100;
         }
         .purplesep{
         background: url('/img/purplebackground.png');
         background-position:center;
         background-size: cover;
         }
         @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
         *{
         font-family: "Outfit", sans-serif;
         font-optical-sizing: auto;
         font-style: normal;
         }
         .square-container-content{
         position: absolute;
         height: 70px;
         width: 70px;
         background-color: rgba(255, 255, 255, 1);
         border-radius: 12px;
         bottom: 0px;
         left: 0px;
         }
         .square-container-content-new{
         position: absolute;
         height: 55px;
         width: 55px;
         background-color: #da1218;
         border-radius: 12px;
         bottom: 0px;
         left: 0px; 
         z-index: 99;
         }
         .square-container-v2{
         background-color: rgba(255, 255, 255, 1);
         padding: 20px;
         border-radius: 20px;
         box-shadow: rgba(149, 157, 165, 0.1) 0px 8px 24px;
         min-width: 180px;
         }
         .square-container{
         position: relative;
         max-height: 70px;
         max-width: 70px;
         height: 70px;
         width: 70px;
         }
         .square-container-shadow{
         position: absolute;
         height: 70px;
         width: 70px;
         background-color: rgba(255, 255, 255, 0.3);
         border-radius: 12px;
         bottom: -10px;
         left: -10px;
         }
         .square-container-shadow-right{
            position: absolute;
            height: 55px;
            width: 55px;
            background-color: f9dcdd;
            border-radius: 12px;
            bottom: -10px;
            right: 7px;
         }
         .square-container-shadow-left{
            position: absolute;
            height: 55px;
            width: 55px;
            background-color: f9dcdd;
            border-radius: 12px;
            bottom: -10px;
            left: -10px;
         }
         .imgs-shadow{
         box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
         }
         .dashboard-example-img{
         width: 1024px !important;
         }
         .header-hero{
         height: 100vh;
         }
         .menu-btn{
         display: none !important;
         }
         .header_about {
            background: url(/img/spingo_rent.png) no-repeat center / cover;
            padding: 80px;
        }
        .header_about_title{
            color: white;
        }
        .lign {
            border-top: 3px solid #E21912;
            padding: 30px;
            padding-bottom: 0px;
            padding-top: 0px;
        }
        .font-size-title{
            font-size: 21px;
        }
        .font-size-sous-title{
            font-size: 14px;
        }
        .sticky-header{
            position: sticky;
            top: 0;
            right: 0;
            left: 0;
            z-index: 1000;
            background: #ffffff;
        }
        /*.card-tarif-style{*/
        /*    background-color: #E21912;*/
        /*    border: 2px solid #E21912;*/
        /*    color: white;*/
        /*}*/
        /*.card-tarif-style:hover{*/
        /*    background-color: white;*/
        /*    border: 2px solid #E21912;*/
        /*    color: #000;*/
        /*}*/

.card-tarif-style {
  width: 100%;
  height: 300px; 
  background-color: #E21912;
  border: 2px solid #E21912;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px; 
  border-radius: 20px;
  overflow: hidden;
}

.card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.8s;  
}


.card-tarif-style:hover .card-inner {
  transform: rotateY(180deg);
}


.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px; 
}


.card-front {
  background-color: #E21912;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.card-front .content {
  text-align: left;
}

.card-front .txt-xl {
  font-size: 40px;
  font-weight: bold;
}

.card-front .txt-sm {
  font-size: 14px;
}


.card-back {
  background-color: #E21912;
  color: #fff;
  transform: rotateY(180deg);
}

.card-back .content {
  text-align: left;
}

.card-back button {
  padding: 5px 10px;
  background-color: #E21912;
  color: white;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
}

.card-back button:hover {
  background-color: #C0180F;
}


        .forfait-type{
            background: #fff;
            color: #E21912;
            padding: 3px;
            border-radius: 5px;
            font-weight: 500;
        }
        .slider-section {
              width: 100%;
              height: 100vh;
              background-image: url('/img/rently-pro_02.png');
              background-size: cover;
              background-position: center right;
              display: flex;
              justify-content: flex-start;
              align-items: center; 
              color: black;
            }
            
            .slider-content {
              margin-left: 50px; 
              max-width: 600px;
              padding: 0 20px;
            }
            
            .slider-content h2 {
              font-size: 36px;
              font-weight: bold;
            }
            
            .slider-content p {
              font-size: 18px;
            }
            .hero {
            min-height: 900px;
            height: 100vh;
            padding-bottom: 50px;
            width: 100%;
            background-size: cover;
            background-repeat: no-repeat;
            /*clip-path: ellipse(195% 100% at 0% 0%);*/
            position: relative;
            background: url(/img/rently-pro_02.png) top center;
            background-size: cover;
            }
            .firstc {
                padding-top: 200px;
            }
            
            .mobile-content {
                display: none;
              }
            
            .sticky-button {
            position: fixed;
            background-color: #25d366;
            bottom: 10px;
            right: 10px;
            border-radius: 50px;
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
            z-index: 99999999 !important;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 55px;
            height: 55px;
            -webkit-transition: all 0.2s ease-out;
            transition: all 0.2s ease-out;
        }
        .sticky-button svg {
            margin: auto;
            fill: #fff;
            width: 35px;
            height: 35px;
            z-index: 99999999;
        }
        .sticky-button a,
        .sticky-button label {
            cursor: pointer;
            display: flex;
            align-items: center;
            width: 55px;
            height: 55px;
            -webkit-transition: all 0.3s ease-out;
            transition: all 0.3s ease-out;
            z-index: 99999999;
        }
        /* style fomrulaire contact */
        .form-type-btn {
            flex: 1;
            padding: 10px 20px;
            background-color: #ccc;
            border: 1px solid #ddd;
            color: #333;
            text-align: center;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .form-type-btn:hover {
            background-color: #E21912;
        }
        
        .btn-active {
            background-color: #E21912;
            color: white;
            font-weight: bold;
        }
        
        .form-type-btn {
            margin: 0 5px;
            border: 1px solid #ddd;
        }
        
        .btn-active {
            background-color: #dc3545;
            color: white;
            border-color: #dc3545;
        }
        
        .card {
            border-radius: 8px;
            border: 1px solid #ddd;
        }
        
        .card h4 {
            font-weight: bold;
            text-transform: uppercase;
        }
        
        .card .form-group{
            display: flex;
            flex-direction: column;
            width: 100%;
            position: static;
        }
        
        .card .form-group label{
            font-size: 0.75rem;
            color: #dc3545;
            font-weight: 400;
            position: relative;
            top: 0.5rem;
            margin: 0 0 0 7px;
            padding: 0 3px;
            background: #fafafa;
            width: fit-content;
        }
        
        .card .form-group input, .card .form-group textarea, .card .form-group select{
            padding: 11px 10px;
            font-size: 14px;
           /*border: 2px #E21912 solid;*/
            border-radius: 5px;
            background: #fafafa;
        }
        
        .card .form-group input:focus {
          outline: none;
        }
        /* style for the social icons */
        .wrapper {
          display: inline-flex;
          list-style: none;
          height: 94px;
          width: 100%;
          padding-top: 20px;
          font-family: "Poppins", sans-serif;
          justify-content: flex-start;
          padding-left: unset;
        }
        
        .wrapper .icon {
          position: relative;
          background: #fff;
          border-radius: 20%;
          margin: 10px;
          width: 45px;
          height: 45px;
          font-size: 18px;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
          cursor: pointer;
          transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
          color: #E21912;
        }
        
        .wrapper .tooltip {
          position: absolute;
          top: 0;
          font-size: 14px;
          background: #fff;
          color: #fff;
          padding: 5px 8px;
          border-radius: 5px;
          box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
          opacity: 0;
          pointer-events: none;
          transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }
        
        .wrapper .tooltip::before {
          position: absolute;
          content: "";
          height: 8px;
          width: 8px;
          background: #fff;
          bottom: -3px;
          left: 50%;
          transform: translate(-50%) rotate(45deg);
          transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }
        
        .wrapper .icon:hover .tooltip {
          top: -45px;
          opacity: 1;
          visibility: visible;
          pointer-events: auto;
        }
        
        .wrapper .icon:hover span,
        .wrapper .icon:hover .tooltip {
          text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
        }
        
        .wrapper .facebook:hover,
        .wrapper .facebook:hover .tooltip,
        .wrapper .facebook:hover .tooltip::before {
          background: #1877f2;
          color: #fff;
        }
        
        .wrapper .twitter:hover,
        .wrapper .twitter:hover .tooltip,
        .wrapper .twitter:hover .tooltip::before {
          background: #0A66C2;
          color: #fff;
        }
        
        .wrapper .instagram:hover,
        .wrapper .instagram:hover .tooltip,
        .wrapper .instagram:hover .tooltip::before {
          background: #e4405f;
          color: #fff;
        }
         @media only screen and (max-width: 1000px) {
         .menu-btn{
         display: block !important;
         }
         .header-hero {
         height: 80vh;
         }
         .hide-on-1000{
         display: none;
         }
         }
         @media only screen and (max-width: 750px) {
         .header-hero {
         height: 78vh;
         }
         }
         @media only screen and (max-width: 500px) {
         .header-hero {
         height: 70vh;
         }
         .txt-xl {
         font-size: 24px;
         }
         .txt-xxl {
         font-size: 32px;
         }
         .txt-xxxl {
         font-size: 42px;
         }
         }
         /* Initial hidden state */
         .fade-in, .slide-in-left, .slide-in-up, .slide-in-top, .slide-in-bottom, .zoom-in, 
         .rotate-in, .flip-in, .bounce-in, .roll-in, .swing-in, .pulse {
         opacity: 0;
         transition: opacity 0.8s ease-out, transform 0.8s ease-out;
         }
         /* Fade-in animation */
         .fade-in.active {
         opacity: 1;
         }
         /* Slide-in from left animation */
         .slide-in-left.active {
         opacity: 1;
         transform: translateX(0);
         }
         .slide-in-left {
         transform: translateX(-100%);
         }
         /* Slide-in from right animation */
         .slide-in-up.active {
         opacity: 1;
         transform: translateX(0);
         }
         .slide-in-up {
         transform: translateX(100%);
         }
         /* Slide-in from top animation */
         .slide-in-top.active {
         opacity: 1;
         transform: translateY(0);
         }
         .slide-in-top {
         transform: translateY(-100%);
         }
         /* Slide-in from bottom animation */
         .slide-in-bottom.active {
         opacity: 1;
         transform: translateY(0);
         }
         .slide-in-bottom {
         transform: translateY(100%);
         }
         /* Zoom-in animation */
         .zoom-in.active {
         opacity: 1;
         transform: scale(1);
         }
         .zoom-in {
         transform: scale(0.5);
         }
         /* Rotate-in animation */
         .rotate-in.active {
         opacity: 1;
         transform: rotate(0deg);
         }
         .rotate-in {
         transform: rotate(-90deg);
         }
         /* Flip-in animation */
         .flip-in.active {
         opacity: 1;
         transform: rotateY(0deg);
         }
         .flip-in {
         transform: rotateY(90deg);
         }
         /* Bounce-in animation */
         .bounce-in.active {
         opacity: 1;
         animation: bounce 0.8s ease-out;
         }
         @keyframes bounce {
         0%, 20%, 50%, 80%, 100% {
         transform: translateY(0);
         }
         40% {
         transform: translateY(-30px);
         }
         60% {
         transform: translateY(-15px);
         }
         }
         /* Roll-in animation */
         .roll-in.active {
         opacity: 1;
         transform: translateX(0) rotate(0deg);
         }
         .roll-in {
         transform: translateX(-100%) rotate(-120deg);
         }
         /* Swing-in animation */
         .swing-in.active {
         opacity: 1;
         animation: swing 0.8s ease-out;
         }
         @keyframes swing {
         20% { transform: rotate(15deg); }
         40% { transform: rotate(-10deg); }
         60% { transform: rotate(5deg); }
         80% { transform: rotate(-5deg); }
         100% { transform: rotate(0deg); }
         }
         /* Pulse animation */
         .pulse.active {
         opacity: 1;
         animation: pulse 1.5s infinite;
         }
         @keyframes pulse {
         0% {
         transform: scale(1);
         }
         50% {
         transform: scale(1.1);
         }
         100% {
         transform: scale(1);
         }
         }
         body {
         margin: 0;
         padding: 0;
         overflow-x: hidden; /* Prevent horizontal scroll */
         }
         .plan{
         padding: 0px 15px;
         border-radius: 20px;
         }
         .accordionn {
         width: 100%;
         max-width: 600px;
         overflow: hidden;
         }
         .accordionn-item {
         margin-bottom: 20px;
         border: none !important;
         border-radius: 20px;
         }
         .accordionn-radio {
         display: none;
         }
         .accordionn-header {
         width: 100%;
         padding: 15px 20px;
         background-color: #fff;
         color: black;
         font-size: 18px;
         text-align: left;
         cursor: pointer;
         display: flex;
         justify-content: space-between;
         align-items: center;
         transition: background-color 0.3s ease;
         border-radius: 12px;
        box-shadow: rgb(149 157 165 / 15%) 0px -1px 24px;
         }
         .accordionn-header .icon {
         font-size: 20px;
         transition: transform 0.3s ease;
         }
         .accordionn-content {
         max-height: 0;
         overflow: hidden;
         transition: max-height 0.3s ease;
         background-color: transparent;
         padding: 0 20px;
         font-size: 14px;
         }
         .accordionn-content p {
         margin: 15px 0;
         color: #333;
         }
         .accordionn-radio:checked + .accordionn-header {
         background-color: #f0f0f0;
         }
         .accordionn-radio:checked + .accordionn-header .icon {
         transform: rotate(45deg);
         }
         .accordionn-radio:checked + .accordionn-header + .accordionn-content {
         max-height: 200px; /* Adjust this value according to your content */
         padding: 15px 20px;
         }
         /* Fullscreen Menu */
         .fullscreen-menu {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-color: #fff;
         display: none;
         justify-content: center;
         align-items: center;
         z-index: 999;
         }
         /* Close Button */
         .close-btn {
         position: absolute;
         top: 20px;
         right: 20px;
         background: none;
         border: none;
         color: #000;
         font-size: 40px;
         cursor: pointer;
         }
         /* Menu Items */
         .fullscreen-menu nav ul {
         list-style: none;
         padding: 0;
         }
         .fullscreen-menu nav ul li {
         margin: 20px 0;
         }
         .fullscreen-menu nav ul li a {
         color: #E21912;
         font-size: 34px;
         text-decoration: none;
         transition: color 0.3s;
         }
         .fullscreen-menu nav ul li a:hover {
         color: #E21912;
         }
         /* Prevent scrolling when menu is open */
         body.menu-open {
         overflow: hidden;
         }
         /* fieldset style */
         fieldset {
            border: 1px solid #ddd !important;
            padding: 10px !important;
            margin-bottom: 1rem !important;
            border-radius: 5px;
        }
        legend {
            font-weight: 400;
            /*padding: 0 10px !important;*/
            font-size: 18px !important;
        }
        .modal-header{
            border-bottom: unset !important;
        }
         .img-header{
                 position: relative;
                 z-index: 101;
                 background-position: center;
                 height: 150%;
                 top: -120px;
            }
           
         @media only screen and (max-width: 1000px) {
            .mobile-style{
            width: 50%;
            margin-left: unset !important;
            margin-right: unset !important;
            }
            
            .img-header{
                display:none;
                position: relative;
                z-index: -1;
                background-position: center;
                height: 70%;
                top: -438px;
                left: 135px;
            }
            .slider-section {
              display: none;
            }
            .hero{
                display: none;
            }
            .firstc {
                padding-top: unset;
            }
            .mobile-content {
              display: block; 
              text-align: center; 
              padding: 20px;
            }
            .mobile-content img {
              max-width: 100%;
              height: auto;
            }
            .mobile-content h1 {
              font-size: 1.5rem;
              font-weight: 500;
            }
            .mobile-content p {
              color: #929090;
              font-size: 1rem;
              font-weight: 300;
            }
            .plan {
                padding: 0px 30px;
                border-radius: 20px;
            }
            .mobile-logo-style{
                z-index: 1200;
            }
            .card{
                margin-top: 20px;
            }
        }
         @media only screen and (min-width: 1000px) and (max-width: 1023px){
            .slider-section {
                height: 50vh;
                background-size: contain;
                background-repeat: no-repeat;
            }
         }
         @media only screen and (min-width: 1024px) and (max-width: 1300px){
             .slider-section {
                height: 85vh;
                background-size: contain;
                background-repeat: no-repeat;
            }
            .firstc {
                padding-top: 92px;
            }
            .hero {
                min-height: 650px;
                height: 65vh;
            }
            .font-size-title {
                font-size: 17px;
            }
         }
         @media only screen and (min-width: 1300px) and (max-width: 1400px){
             .firstc {
                padding-top: 135px;
            }
            .hero {
                min-height: 750px;
                height: 65vh;
            }
         }
         /*@media only screen and (min-width: 1400px) and (max-width: 1500px){*/
         /*    .firstc {*/
         /*       padding-top: 155px;*/
         /*   }*/
         /*   .hero {*/
         /*       min-height: 400px;*/
         /*       height: 75vh;*/
         /*   }*/
         /*}*/
         /*@media only screen and (min-width: 1501px) and (max-width: 1550px){*/
         /*    .firstc {*/
         /*       padding-top: 180px;*/
         /*   }*/
         /*   .hero {*/
         /*       min-height: 750px;*/
         /*       height: 85vh;*/
         /*   }*/
         /*}*/