@font-face {
   font-family: "Jost";
   src: url("/fonts/Jost-Regular.otf") format("opentype");
   ;
   font-weight: 400;
   font-style: normal;
 }

 @font-face {
   font-family: "Jost";
   src: url("/fonts/Jost-Medium.otf") format("opentype");
   ;
   font-weight: 500;
   font-style: normal;
 }

 @font-face {
   font-family: "Jost";
   src: url("/fonts/Jost-SemiBold.otf") format("opentype");
   ;
   font-weight: 600;
   font-style: normal;
 }

 @font-face {
   font-family: "Jost";
   src: url("/fonts/Jost-Bold.otf") format("opentype");
   ;
   font-weight: 700;
   font-style: normal;
 }


 html,
 body {
   font-family: "Jost", sans-serif;
 }

 select {
   appearance: none;
   border-radius: 0;
   /* Prevents Safari’s rounding */
   background-image: url("data:image/svg+xml;utf8,<svg fill='gray' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
   background-repeat: no-repeat;
   background-position: right 0.75rem center;
   background-size: 2rem;
   padding-right: 2.5rem;
   /* Space for the arrow */
   -webkit-appearance: none;
   /* For Safari */
   -moz-appearance: none;
   /* For Firefox */
 }

 ::selection {
   background-color: #00b15c;
   color: white;
 }

 #copyright>p>a {
   transition: all;
   transition-duration: 300ms;
 }

 #copyright>p>a:hover {
   color: #00b15c;
 }

 #scrollToTopBtn {
   position: fixed;
   right: 20px;
   bottom: 20px;
   border: none;
   outline: none;
   border-radius: 50%;
   width: 50px;
   height: 50px;
   font-size: 24px;
   text-align: center;
   cursor: pointer;
   z-index: 9998;
   opacity: 0;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   visibility: hidden;
   transition: opacity 0.3s ease, visibility 0.3s ease;
 }

 .iti__selected-flag {
   background-color: transparent !important;
   padding-bottom: 1rem !important;
 }

 @keyframes gradient-texture {
   0% {
     background-position: 0% 0%;
   }

   100% {
     background-position: 100% 0%;
   }
 }

 .animate-gradient-texture {
   animation: gradient-texture 6s linear infinite;
 }


 @keyframes marqueeScroll {
   0% {
     transform: translateX(100%);
   }

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

 .marquee {
   animation: marqueeScroll 20s linear infinite;
 }


 .footer-social-icons .social-icon .social-img {
   filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
 }


 .footer-social-icons .social-icon:hover .social-img {
   filter: invert(48%) sepia(96%) saturate(936%) hue-rotate(94deg) brightness(98%) contrast(94%);
 }