@keyframes float1 {
  0%, 100% {
    transform: translateY(20);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes float2 {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(45px);
  }
}

@keyframes float3 {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(45px) rotate(5deg);
  }
  
}
.float3{
  transform:translateX(90px);

}
@keyframes float4 {
  0%, 100% {
    transform: translateY(20);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes float5 {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(45px);
  }
}

@keyframes float6 {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(45px) rotate(5deg);
  }
}

.float-animation-1 {
  animation: float1 6s ease-in-out infinite;
}

.float-animation-2 {
  animation: float2 7s ease-in-out infinite;
}

.float-animation-3 {
  animation: float3 5.5s ease-in-out infinite;
}

.float-animation-4 {
  animation: float4 6.5s ease-in-out infinite;
}

.float-animation-5 {
  animation: float5 7s ease-in-out infinite;
}

.float-animation-6 {
  animation: float6 6s ease-in-out infinite;
}

.animate-moveBall1 {
  animation:  0.5s ease-in-out infinite;
}

.animate-moveBall2 {
  animation:  0.5s ease-in-out ;
}

.animate-moveBall3 {
  animation: pulse 0.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    r: 8;
  }
  50% {
    opacity: 0.7;
    r: 6;
  }
}
.svg-container {
  position: fixed; /* Keep the SVGs fixed in place */
  top: 100px; /* Adjust based on your layout */
  left: 50px; /* Adjust based on your layout */
}
#line1 {
  position: fixed;
  top: 0px; /* Adjust positioning */
  left: 50px;
}

#line2 {
  position: fixed;
  /* top: 75px;  */
  left: 50px;
}

Head {
  color: inherit; /* Ensure the text is visible */
  visibility: visible;
  opacity: 1;
}
@keyframes spin2 {
  to {
    transform: rotate(360deg);
  }
}
.loader {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top: 3px solid #3498db;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes flight {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

.icon-flight {
  animation: flight 1s infinite;
}

.red-color {
  background-color: red;
}
.gradient-background2 {
  background: linear-gradient(
    to right,
    #fff4cb 100%,
    #e6ffe2 100%,
    #a9ff9b 100%
  );
}

.gradient-text {
  background: linear-gradient(90deg, #6369ff, #d274ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.default-btn {
  color: white;
  padding: 7px 20px;
  border-radius: 8px;
  background: rgb(233, 91, 74);
  background: linear-gradient(
    0deg,
    rgba(233, 91, 74, 1) 0%,
    rgba(177, 100, 196, 1) 100%
  );
}
.drop-box {
  border-radius: 20px;
  border: 1px dashed rgba(43, 68, 231, 0.25);
  background: var(--White, #fff);
  box-shadow: 0px 100px 80px 0px rgba(0, 0, 0, 0.07),
    0px 41.778px 33.422px 0px rgba(0, 0, 0, 0.05),
    0px 22.336px 17.869px 0px rgba(0, 0, 0, 0.04),
    0px 12.522px 10.017px 0px rgba(0, 0, 0, 0.04),
    0px 6.65px 5.32px 0px rgba(0, 0, 0, 0.03),
    0px 2.767px 2.214px 0px rgba(0, 0, 0, 0.02);
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

body {
  /* color: rgb(var(--foreground-rgb)); */
  background: linear-gradient(0deg, #f7f7f880, rgba(247, 247, 248, 0) 43.01%);
}

.custom-swiper-button-prev,
.custom-swiper-button-next {
  position: absolute;
  width: 10px;
  top: 50%;
  color: #034737 !important;
  transform: translateY(50%);
  border-radius: 50%;
  padding: 25px;
  cursor: pointer;
}

.custom-swiper-button-prev {
  left: 10px;
}

.custom-swiper-button-next {
  right: 10px;
}

::-webkit-scrollbar {
  width: 10px;
}

*::-webkit-scrollbar-track {
  background: var(--primary);
  border-radius: 5px;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--secondary);
  border-radius: 14px;
  border: 3px solid var(--primary);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--tertiary);
}

.container {
  max-width: 124rem;
  padding: 0px 200px;
  margin: 0 200px;
}

/* .heading {
  padding: 1rem 0;
  font-size: 3.5rem;
  text-align: center;
} */

.swiper_container {
  height: 52rem;
  padding: 2rem 0;
  position: relative;
}

.swiper-slide {
  /* width: 37rem;
  height: 42rem; */
  position: relative;
  /* padding: 80px 0px 0px 60px; */
  transition: transform 0.5s ease;
  z-index: 1;
  flex-shrink: 0;
  /* Ensure slides don't shrink */
}

.swiper-slide-active {
  z-index: 2;
  /* transform: scale(1.1); */
  /* Make the active slide slightly larger */
}

.swiper-slide img {
  width: 100%;
  height: 100%;
  /* border-radius: 2rem;
  object-fit: cover; */
}

/* @media (max-width: 500px) {
  .swiper_container {
    height: 47rem;
  }

  .swiper-slide {
    width: 28rem !important;
    height: 36rem !important;
  }

  .swiper-slide img {
    width: 28rem !important;
    height: 36rem !important;
  }
} */

.swiper-slide-shadow-left,
.swiper-slide-shadow-right {
  display: none;
}

.slider-controler {
  position: relative;
  bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-controler .swiper-button-prev,
.slider-controler .swiper-button-next {
  width: 3.5rem;
  height: 3.5rem;
}

.slider-controler .swiper-button-next {
  left: 58% !important;
  transform: translateX(-58%) !important;
}

@media (max-width: 990px) {
  .slider-controler .swiper-button-next {
    left: 70% !important;
    transform: translateX(-70%) !important;
  }
}

@media (max-width: 450px) {
  .slider-controler .swiper-button-next {
    left: 80% !important;
    transform: translateX(-80%) !important;
  }
}

@media (max-width: 990px) {
  .slider-controler .swiper-button-prev {
    left: 30% !important;
    transform: translateX(-30%) !important;
  }
}

@media (max-width: 450px) {
  .slider-controler .swiper-button-prev {
    left: 20% !important;
    transform: translateX(-20%) !important;
  }
}

.slider-controler .slider-arrow {
  background: var(--white);
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  left: 42%;
  transform: translateX(-42%);
  filter: drop-shadow(0px 8px 24px rgba(18, 28, 53, 0.1));
}

.slider-controler .slider-arrow ion-icon {
  font-size: 2rem;
  color: #222224;
}

.slider-controler .slider-arrow::after {
  content: "";
}

.swiper-pagination {
  position: relative;
  width: 15rem !important;
  bottom: 1rem;
}

.swiper-pagination .swiper-pagination-bullet {
  filter: drop-shadow(0px 8px 24px rgba(18, 28, 53, 0.1));
}

.swiper-pagination .swiper-pagination-bullet-active {
  background: var(--primary);
}

@font-face {
  font-family: "PoppinsRegular";
  src: url(/_next/static/media/Poppins-Regular.ec9d8e7c.woff2) format("woff2"),
    url(/_next/static/media/Poppins-Regular.aaea7ff1.woff) format("woff"),
    url(/_next/static/media/Poppins-Regular.778ccfde.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PoppinsMedium";
  src: url(/_next/static/media/Poppins-Medium.f26573e7.woff2) format("woff2"),
    url(/_next/static/media/Poppins-Medium.1c4c6847.woff) format("woff"),
    url(/_next/static/media/Poppins-Medium.77edf0c2.ttf) format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PoppinsBold";
  src: url(/_next/static/media/Poppins-Bold.9888d611.woff2) format("woff2"),
    url(/_next/static/media/Poppins-Bold.ab377f9c.woff) format("woff"),
    url(/_next/static/media/Poppins-Bold.67731366.ttf) format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

html {
  scroll-behavior: smooth;
}

body {
  overflow: auto;
  font-family: "PoppinsRegular" !important;
  /* overflow-x: clip; */
}

.container {
  max-width: 1408px;
  margin: 0 auto;
  padding: 0 15px;
  width: 100%;
}

@media (max-width: 1600px) {
  .container {
    max-width: 1230px !important;
  }
}

.container.fluid {
  width: 100%;
  max-width: none;
}

.container:after {
  display: block;
  clear: both;
  content: "";
}

.round {
  position: relative;
  margin-right: 14px;
  margin-top: 2px;
}

.round label {
  background-color: #fff;
  border: 2px solid #034737;
  border-radius: 50%;
  cursor: pointer;
  height: 20px;
  left: 0;
  position: absolute;
  top: 0;
  width: 20px;
}

.round label:after {
  border: 2px solid #fff;
  border-top: none;
  border-right: none;
  content: "";
  height: 4px;
  left: 5px;
  opacity: 0;
  position: absolute;
  top: 7px;
  transform: rotate(-45deg);
  width: 8px;
}

.round input[type="checkbox"] {
  visibility: hidden;
}

.round input[type="checkbox"]:checked + label {
  background-color: #034737;
  border-color: #034737;
}

.round input[type="checkbox"]:checked + label:after {
  opacity: 1;
}

.mySwipers .swiper {
  width: 100%;
  height: 100%;
}

.mySwipers {
  padding: 88px 0 !important;
}


.mySwipers .swiper-button-prev::after {
  margin-left: 10px;
}

.mySwipers .swiper-button-next::after {
  margin-right: 10px;
}

.line {
  position: relative;
}

.line::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(/svg_images/dashboard/line.png) no-repeat;
  z-index: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-size: cover;
}

/* width */

.workSlide .swiper-wrapper {
  padding: 0 0 0 20% !important;
}

.workSlide .swiper-slide-active {
  width: 60% !important;
}

@media screen and (max-width: 600px) {
  .workSlide .swiper-wrapper {
    padding: 0 !important;
  }

  .workSlide .swiper-slide-active {
    width: 100% !important;
  }
}

.sheen {
  position: relative;
  overflow: hidden;
}

.sheen:after {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  background: linear-gradient(
    180deg,
    hsla(21, 63%, 73%, 0),
    hsla(0, 0%, 100%, 0.2) 50%,
    hsla(21, 63%, 73%, 0)
  );
  transform: rotate(60deg) translate(-10em, 10em);
}

.sheen:hover:after {
  animation: sheen 1s forwards;
}

@keyframes sheen {
  to {
    transform: rotate(60deg) translate(1em, -9em);
  }
}

.image-thumbnails {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.thumbnail {
  width: 500px;
  height: 200px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.thumbnail-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.3s ease;
}

.thumbnail:hover .thumbnail-img {
  transform: scale(1.1);
}

@keyframes bounce-up {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }

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

.arrow-indicator {
  position: absolute;
  right: 10px;
  top: 20%;
  transform: translateY(60%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.gallery-container {
  display: flex;
  flex-direction: row;
  gap: 60px;
  align-items: center;
  width: 1150px;
  justify-content: space-between;
}

.image-thumbnails {
  display: flex;
  gap: 10px;
}

.thumbnail {
  cursor: pointer;
  position: relative;
}

.thumbnail img {
  width: 600px;
  height: auto;
}

.selected-content {
  position: relative;
  gap: 30px;
  display: flex;
  flex-direction: column;

  margin-top: 20px;
  text-align: center;
}

.progress-container {
  margin-top: 20px;
  position: relative;
  bottom: 0;
  left: 0;
  width: 512px;
  height: 2px;
  background-color: #6a6a6a26;
}
.progress-bar {
  height: 100%;
  background-color: blue;
  transition: width 0.2s ease;
}

/* 2nd loading  */
.gallery-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  width: 100%;
  justify-content: center;
  padding: 10px;
}

.thumbnail-gallery {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

.thumbnail-item {
  width: 100%; /* Full width on small screens */
  max-width: 100%;
  height: auto;
  overflow: hidden;
}

.thumbnail-image {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover; /* Ensures the image covers the thumbnail area */
}
.content-display {
  position: relative;
  gap: 15px;
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  text-align: center;
  width: 100%;
  max-width: 100%; /* Full width on small screens */
}

.progress-wrapper {
  margin-top: 20px;
  position: relative;
  width: 100%;
  height: 2px;
  background-color: #fafafa26;
}

.arrow-icon-wrapper {
  justify-content: end;
  display: flex;
  transform: translate(-24px, -64px);
}

.arrow-icon {
  color: white;
  font-size: 24px;
}

/* Responsive Design */
@media (min-width: 768px) {
  .gallery-wrapper {
    flex-direction: row;
    gap: 60px;
    align-items: flex-start;
    justify-content: space-between;
  }

  .content-display {
    gap: 30px;
    margin-top: 0;
    max-width: 600px; /* Restore max-width for larger screens */
  }

  .thumbnail-gallery {
    justify-content: flex-start;
  }

  .thumbnail-item {
    width: 80%; /* Scale up the width on medium screens */
    max-width: 800px; /* Restrict maximum width for larger screens */
    height: auto; /* Maintain aspect ratio */
  }

  .thumbnail-image {
    width: 100%;
    height: auto;
    max-height: 800px; /* Restrict maximum height for larger screens */
    -o-object-fit: cover;
       object-fit: cover;
  }
}

@media (min-width: 1024px) {
  .gallery-wrapper {
    width: 1150px;
  }

  .content-display {
    gap: 30px;
  }
  .thumbnail-item {
    width: 90%; /* Increase the width on larger screens */
    max-width: 1000px; /* Allow it to be even larger on big screens */
  }

  .thumbnail-image {
    max-height: 1000px; /* Restrict maximum height to maintain aspect ratio */
  }
}

.marquee-container {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  width: 100%;
  height: 160px;
}

.marquee-content {
  display: flex;
  white-space: nowrap;
}

.marquee-text {
  font-size: 92.11px;

  color: transparent;
  white-space: nowrap;
  -webkit-text-stroke: 1px #e9e9e9;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  padding: 0 2rem;
  animation: marquee 20s linear infinite;
}

/* Animation keyframes */
@keyframes marquee {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(-100%);
  }
}

/* .marquee-text:nth-child(2) {
  animation: marquee 12s linear infinite;
}

.marquee-text:nth-child(3) {
  animation: marquee 10s linear infinite;
}

.marquee-text:nth-child(4) {
  animation: marquee 8s linear infinite;
}

.marquee-text:nth-child(5) {
  animation: marquee 6s linear infinite; /* Fastest */

/* Adding delays to create staggering effect
.marquee-text:nth-child(1) {
  animation-delay: 0s;
}

.marquee-text:nth-child(2) {
  animation-delay: 2s;
}

.marquee-text:nth-child(3) {
  animation-delay: 4s;
}

.marquee-text:nth-child(4) {
  animation-delay: 6s;
}

.marquee-text:nth-child(5) {
  animation-delay: 8s;
}
 */

.custom-radio {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid #d1d5db;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  background-color: white;
}

.custom-radio:checked {
  border-color: #034737;
  /* Green border when selected */
  background-color: white;
  /* Green background when selected */
}

.custom-radio:checked::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #034737;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.dropdown-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1s ease-out, opacity 1s ease-out;
  /* Transition for max-height and opacity */
  opacity: 0;
  /* Initially hidden */
}

.dropdown-content.dropdown-open {
  max-height: 200px;
  /* Adjust the maximum height as needed */
  opacity: 1;
  /* Visible */
}

.dropdown-content2 {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1s ease-out, opacity 1s ease-out;
  /* Transition for max-height and opacity */
  opacity: 0;
  /* Initially hidden */
}

.dropdown-content2.dropdown-open {
  max-height: 1000px;
  /* Adjust the maximum height as needed */
  opacity: 1;
  /* Visible */
}

/* Custom styles for the radio buttons */
.custom-radio {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid #d1d5db;
  /* Default gray border */
  border-radius: 50%;
  display: inline-block;
  position: relative;
  background-color: white;
}

.custom-radio:checked {
  border-color: #034737;
  /* Green border when selected */
  background-color: white;
  /* Green background when selected */
}

.custom-radio:checked::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #034737;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.dropdown-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1s ease-out, opacity 1s ease-out;
  /* Transition for max-height and opacity */
  opacity: 0;
  /* Initially hidden */
}

.dropdown-content.dropdown-open {
  max-height: 200px;
  /* Adjust the maximum height as needed */
  opacity: 1;
  /* Visible */
}

.dropdown-content2 {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1s ease-out, opacity 1s ease-out;
  /* Transition for max-height and opacity */
  opacity: 0;
  /* Initially hidden */
}

.dropdown-content2.dropdown-open {
  max-height: 1000px;
  /* Adjust the maximum height as needed */
  opacity: 1;
  /* Visible */
}

.ReactCollapse--collapse {
  transition: height 300ms;
}

.custom-shadow {
  box-shadow: 0px 9px 0px #e7e7e7;
}

.shadow-top {
  box-shadow: 0px -15px 15px 0px rgba(0, 0, 0, 0.075);
}

.shadow-box {
  border-radius: 30px;
  background: #f9f9f9;
  box-shadow: 0px 100px 80px 0px rgba(0, 0, 0, 0.03),
    0px 41.778px 33.422px 0px rgba(0, 0, 0, 0.02),
    0px 22.336px 17.869px 0px rgba(0, 0, 0, 0.02),
    0px 12.522px 10.017px 0px rgba(0, 0, 0, 0.01),
    0px 6.65px 5.32px 0px rgba(0, 0, 0, 0.01),
    0px 2.767px 2.214px 0px rgba(0, 0, 0, 0.01);
}

.normal-box {
  border-radius: 30px;
  background: #f9f9f9;
}

.shadow-box-sm {
  box-shadow: 0px 100px 80px 0px rgba(0, 0, 0, 0.02),
    0px 41.778px 33.422px 0px rgba(0, 0, 0, 0.01),
    0px 22.336px 17.869px 0px rgba(0, 0, 0, 0.01),
    0px 12.522px 10.017px 0px rgba(0, 0, 0, 0.01),
    0px 6.65px 5.32px 0px rgba(0, 0, 0, 0.01),
    0px 2.767px 2.214px 0px rgba(0, 0, 0, 0.01);
}

.custom-transition {
  transition: left cubic-bezier(0.4, 0, 0.2, 1) 0.5s;
}

* {
  outline: none;
}

*:focus {
  --tw-outline-offset-shadow: var(--tw-outline-inset) 0 0 0
    var(--tw-outline-offset-width) var(--tw-outline-offset-color);
  --tw-outline-shadow: var(--tw-outline-inset) 0 0 0
    calc(3px + var(--tw-outline-offset-width)) var(--tw-outline-color);
  box-shadow: var(--tw-outline-offset-shadow), var(--tw-outline-shadow),
    var(--tw-shadow, 0 0 #0000);
  --tw-outline-color: #00203021;
}

.settings-inset-border {
  background: linear-gradient(#fbfbfb, #fbfbfb) padding-box,
    linear-gradient(#edeff0, #edeff0) bottom left/10000px 40px border-box;
  background-repeat: no-repeat;
  border-radius: 12px;
  border: 2px solid transparent;
}

.hover-card {
  position: relative;
}

.hover-card:before {
  opacity: 0;
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(180deg, #034737, #03473750, #ffffff00);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.hover-card:hover::before {
  opacity: 1;
  transition: all 1s;
}

.hover-card:hover {
  transition: all 500ms;
  box-shadow: 0px 100px 80px 0px rgba(0, 0, 0, 0.03),
    0px 41.778px 33.422px 0px rgba(0, 0, 0, 0.02),
    0px 22.336px 17.869px 0px rgba(0, 0, 0, 0.02),
    0px 12.522px 10.017px 0px rgba(0, 0, 0, 0.01),
    0px 6.65px 5.32px 0px rgba(0, 0, 0, 0.01),
    0px 2.767px 2.214px 0px rgba(0, 0, 0, 0.01);
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Apply the animation to elements with slide-reveal class */
.slide-reveal {
  animation: slideIn 0.5s ease forwards;
}

@keyframes rotateClockwise {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotateCounterClockwise {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

.animate-rotateClockwise {
  animation: rotateClockwise 100s linear infinite;
}

.animate-rotateCounterClockwise {
  animation: rotateCounterClockwise 100s linear infinite;
}


.border-animate {
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  transition: 1s ease-in-out !important;
}

@keyframes aiEffect {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.bg-pr {
  display: inline-block;
  animation: aiEffect 1.5s ease-in-out;
}

@keyframes glowing {
  0% {
    text-shadow: 0 0 5px #D2F1E6, 0 0 10px #D2F1E6, 0 0 20px #D2F1E6, 0 0 30px #D2F1E6;
  }
  50% {
    text-shadow: 0 0 5px #A4E2CC, 0 0 10px #A4E2CC, 0 0 20px #A4E2CC, 0 0 30px #A4E2CC; 
  }

  /* 75% {
    text-shadow: 0 0 20px #13745D, 0 0 30px #13745D, 0 0 40px #13745D, 0 0 50px #13745D;
  }
  100% {
    text-shadow: 0 0 20px #034737, 0 0 30px #034737, 0 0 40px #034737, 0 0 50px #034737;
  } */
}
@keyframes glowing-box {
  0% {
    box-shadow: 0 0 5px rgba(210, 241, 230, 0.8), 
                0 0 15px rgba(210, 241, 230, 0.6), 
                0 0 30px rgba(210, 241, 230, 0.4), 
                0 0 45px rgba(210, 241, 230, 0.3);
  }
  50% {
    box-shadow: 0 0 5px rgba(164, 226, 204, 0.8), 
                0 0 15px rgba(164, 226, 204, 0.6), 
                0 0 30px rgba(164, 226, 204, 0.4), 
                0 0 45px rgba(164, 226, 204, 0.3);
  }
  100% {
    box-shadow: 0 0 5px rgba(19, 116, 93, 0.8), 
                0 0 15px rgba(19, 116, 93, 0.6), 
                0 0 30px rgba(19, 116, 93, 0.4), 
                0 0 45px rgba(19, 116, 93, 0.3);
  }
}

.glowing-box {

 
  background-color: #fff;
  /* border-radius: 10px; */
  animation: glowing-box 3s infinite alternate;
}
.glowing-text {
  animation: glowing 4s infinite;
}

/* Blinking color effect for SVG using green variations */
@keyframes blink-colors {
  0% {
    fill: #D2F1E6; /* Dark Green */
  }

  50% {
    fill: #A4E2CC; /* Brighter Green */
  }

}

.blinking-colors {
  animation: blink-colors 2s infinite;
}

.svgclasses {
  width: 30px;
  height: 30px;
  margin-top: 10px;
  align-items:  center;
  justify-content: center;
  margin-left: 20px;
  margin-right: 10px;
}
.svgclasses2 {
  width: 16px;
  height: 16px;
  margin-top: 12px;
  align-items:  center;
  justify-content: center;
  margin-left: 10px;
  margin-right: 6px;
}

.path-group {
  transform-origin: center;
  animation: scalePath 3s infinite;
}

/* Animation for scaling paths */
@keyframes scalePath {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
}

.path-group-2 {
  animation-delay: 1s;
}

.path-group-3 {
  animation-delay: 2s;
}

.path-group-4 {
  animation-delay: 3s;
}
/* hero.css */
.animated-bg {
  animation: bgMove 15s ease-in-out infinite, bgPulse 10s ease-in-out infinite;
  background-size: cover;
  background-position: center;
}

/* Keyframe for background movement */
@keyframes bgMove {
  0% {
    background-position: center top;
  }
  50% {
    background-position: center bottom;
  }
  100% {
    background-position: center top;
}
}
/* Keyframe for subtle pulsing effect */
@keyframes bgPulse {
  0%, 100% {
    background-size: 100%;
  }
  50% {
    background-size: 105%;
  }
}