/* .carousel h1{
  line-height: 7px;
} */

.slashed {
    position: relative;
    display: inline-block;
}

.linkpricing:hover{
color:rgb(65, 100, 255) !important;
}

.linkpricing{
     color: rgb(35, 35, 35) !important;
     font-weight: 700;
}


.slashed::after {
  content: '';
    position: absolute;
    left: 46px;
    top: -19px;
    right: 0;
    bottom: 0;
    background: rgb(241, 66, 66);
    width: 6px;
    height: 152px;
    transform: rotate(50deg);
    transform-origin: center;
}



    .active {
      text-decoration: underline;
      color: rgb(31, 216, 176);
      /* or any color you prefer */
    }

    .floating {
      position: absolute;
      animation-name: float;
      animation-duration: 3s;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
    }

    .floating2 {
      position: absolute;
      animation-name: float2;
      animation-duration: 3s;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
    }

    .floating6 {
      position: absolute;
      animation-name: float6;
      animation-duration: 3s;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
    }

    .floating9 {
      position: absolute;
      animation-name: float9;
      animation-duration: 3s;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
    }

    #float1 {
      animation-delay: 0s;
      top: 3rem;
      right: 7rem;
    }

    #float2 {
      animation-delay: 1s;
      bottom: 0px;
      left: 5px;
    }

    #float3 {
      animation-delay: 2s;
      top: 5rem;
      left: 3rem;
    }


    #float6 {
      animation-delay: 3s;
      top: 8rem;
      left: -4rem;
    }

    #float7 {
      animation-delay: 2.9s;
      right: 2rem;
      bottom: 8rem;
      z-index: 100000;
    }

    #float8 {
      animation-delay: 2.3s;
      top: 5rem;
      right: 3rem;
      z-index: 100000;
    }

    #float9 {
      animation-delay: 2.5s;
      bottom: 15rem;
      left: 0rem;
      z-index: 5;
    }

    @keyframes float {
      0% {
        transform: translateY(0px);
      }

      50% {
        transform: translateY(-20px);
        /* Adjust this value to control the amount of floating */
      }

      100% {
        transform: translateY(0px);
      }
    }

    @keyframes float2 {
      0% {
        transform: translateX(0px);
      }

      50% {
        transform: translateX(-20px);
        /* Adjust this value to control the amount of floating */
      }

      100% {
        transform: translateX(0px);
      }
    }


    @keyframes float6 {
      0% {
        transform: translateY(0px);
      }

      50% {
        transform: translateY(-11px);
        /* Adjust this value to control the amount of floating */
      }

      100% {
        transform: translateY(0px);
      }
    }

    @keyframes float9 {
      0% {
        transform: translateY(0px);
      }

      50% {
        transform: translateY(-15px);
        /* Adjust this value to control the amount of floating */
      }

      100% {
        transform: translateY(0px);
      }
    }

    .carousel {
      position: relative;

    }

    .change-word {
      overflow: hidden;
      height: 100px;
      /* Adjust this value to fit your text */
    }

    .change-inner {
      animation: rotate 15s ease-in-out infinite;
    }

    .change-inner-element h1 {
      line-height: 100px;
      /* Adjust this value to fit your text */
    }

    @keyframes rotate {

      0%,
      25% {
        transform: translateY(0);
      }

      30%,
      50% {
        transform: translateY(-100px);
        /* Adjust this value to match the height of your text elements */
      }

      55%,
      75% {
        transform: translateY(-200px);
        /* Adjust this value to match the height of your text elements */
      }

      80%,
      100% {
        transform: translateY(-300px);
        /* Adjust this value to match the height of your text elements */
      }
    }





    .benefit-card {
      position: relative;
    }

    .benefit-card:before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 10%;
      /* Adjust as needed to center the bar */
      width: 80%;
      /* Width of the blue border */
      height: 2px;
      /* Height of the blue border */
      background-color: #85cc18;
      /* Color of the blue border, adjust as needed */
      transform: scaleX(0);
      transform-origin: bottom right;
      transition: transform 0.25s ease-out;
    }

    .benefit-card:hover:before {
      transform: scaleX(1);
      transform-origin: bottom left;
    }


    .icon-container {
      position: relative;
      width: 60px;
      /* Adjust as needed */
      height: 60px;
      /* Adjust as needed */
      margin-top: 30px;
      /* Adjust as needed to center vertically on your page */
    }

    .hexagon {
      width: 100%;
      height: 100%;
      transition: fill 0.3s ease-in-out;
    }

    .icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transition: stroke 0.3s ease-in-out;
    }

    .benefit-card:hover .hexagon polygon {
      fill: #85cc18 !important;
    }

    .icon path {
      stroke: #85cc18;
      /* Initial stroke color */
      transition: stroke 0.3s ease-in-out;
    }

    .benefit-card:hover .icon path {
      stroke: white !important;
      /* Hover stroke color */
    }

    @keyframes shadow-pulse {
      0% {
        box-shadow: 0px 0px 5px 1px rgba(36, 99, 235, 0.2);
      }

      25% {
        box-shadow: 5px 5px 5px 1px rgba(36, 99, 235, 0.2);
      }

      50% {
        box-shadow: 0px 0px 5px 1px rgba(36, 99, 235, 0.2);
      }

      75% {
        box-shadow: -5px -5px 5px 1px rgba(36, 99, 235, 0.2);
      }

      100% {
        box-shadow: 0px 0px 5px 1px rgba(36, 99, 235, 0.2);
      }
    }

    .pulse-shadow {
      animation: shadow-pulse 3s infinite;
      backdrop-filter: blur(5px);
      /* Adjust blur value as needed */
      background-color: rgba(255, 255, 255, 0.7);
      /* You need some kind of background color for the blur effect to be visible */
    }


    .profession-section {
      background-image: url('src/images/background/wave-haikei\ \(1\).svg');
      background-size: cover;
      background-position: center;
    }

    .clicked-card {
      border: 2px solid #2463eb;
      /* Adjust the color as necessary */
    }

    input:checked~.dot {
      transform: translateX(100%);
      /* background-color: #132b50; */
    }


    nav {
      background-color: white;
      padding: 4px;
      position: -webkit-sticky;
      /* Safari */
      position: sticky;
      top: 0;
      z-index: 1000;
    }


    @media only screen and (max-width: 766px) {
      .change-word {
        overflow: hidden;
        height: 40px;
      }

      .change-inner-element h1 {
        line-height: 40px;
      }

      .change-inner {
        animation: rotate2 15s ease-in-out infinite;
      }

      .profession-section {
        background-image: none;


        background: white;

      }

      @keyframes rotate2 {

        0%,
        25% {
          transform: translateY(0);
        }

        30%,
        50% {
          transform: translateY(-40px);
          /* Adjust this value to match the height of your text elements */
        }

        55%,
        75% {
          transform: translateY(-80px);
          /* Adjust this value to match the height of your text elements */
        }

        80%,
        100% {
          transform: translateY(-120px);
          /* Adjust this value to match the height of your text elements */
        }
      }

    }



    @media only screen and (max-width: 1200px) {
   #imageprin{
    width: 50rem;
    height: auto;
   }
   #home-section-hero2{
    background-image: url('/src/images/background/NEW\ APPOIMENT\ \(4\).png') !important;
   }

   #float9 {
    animation-delay: 2.5s;
    bottom: 15rem;
    left: 0rem;
    z-index: 5;
}

#float8{
  top: 9rem;
    right: 1rem;
}

#float7 {
    animation-delay: 2.9s;
    right: 2rem;
    bottom: 4rem;
    z-index: 100000;
}

    }



    @media only screen and (max-width: 1200px) {
   #imageprin{
    width: 35rem;
    height: auto;
   }
   #home-section-hero2{
    background-image: url('/src/images/background/NEW\ APPOIMENT\ \(4\).png') !important;
   }
    }

    .current {
      font-weight: bold;
      color: #84cc16;
    }

    #home-section-hero2 {
      background-image: url(/src/images/background/6.png);
      background-size: cover;
      background-position: right;
    }