/* @tailwind base;
@tailwind components;
@tailwind utilities; */
/*@import url(./font.css);*/
/*@import url(./section-title.css);*/

/* @layer components {
    .btn-white {
      @apply relative before:absolute before:-top-[10px] before:-right-[10px] before:border-[1px] before:border-border before:rounded-[40px] before:w-full before:-z-10  before:duration-300 before:h-full  hover:before:top-[0px] hover:before:right-0 px-6 py-3  whitespace-nowrap bg-white text-green font-messiri rounded-[40px] text-lg ;
    }
} */

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

::-webkit-scrollbar-thumb {
  background: #434343;
  color: #5a8ead;
}



*{
  scroll-behavior: smooth;
}

.btn{
  font-family:messiri;
  border-radius:40px;
  position: relative; 
  padding: 0.75rem 1.5rem;
  font-size: 1.125rem;
  line-height: 1.75rem; 
  white-space: nowrap; 
  width:fit-content;
  z-index:20;
}
.btn::before{
  position:absolute;
  content:"";
  top:-10px;
  right:-10px;
  border-radius:40px;
  width:100%;
  height:100%;
  transition:300ms;
}
.btn:hover::before{
  top:0;
  right:0;
}
.btn-white{
  color:#15594D;
  background-color: #ffffff;
}
.btn-green{
  color:#ffffff;
  background-color:#15594D;
}
.btn-white::before{
  border:1px solid #fff;
}
.btn-green::before{
  border:1px solid #15594D;
}
@media only screen and (max-width:768px){
  .btn{
    padding: 0.5rem 1rem;
    font-size: 1rem;
  }
  .btn::before{
    top:-7px;
    right:-7px;
  }
}
@media only screen and (max-width:450px){
  .btn{
    padding: 0.5rem 0.9rem;
    font-size: 0.9rem;
  }
  .btn::before{
    top:-5px;
    right:-5px;
  }
}
.splide {
  pointer-events: none;
}
.splide__slide {
  opacity: 0.6;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.splide__slide.is-active {
  opacity: 1;
}

.animation-scale{
  animation: animation-header 15s ease-in-out infinite alternate;
}
@keyframes animation-header {
  0% {
    transform: scale(1.0);
}
100% {
    transform: scale(1.2);
}
}



.splide {
  margin: 0 auto;
}

.thumbnails {
  display: flex;
  margin: 1rem auto 0;
  padding: 0;
  justify-content: center;
}

.thumbnail {
  width: 70px;
  height: 70px;
  overflow: hidden;
  list-style: none;
  margin: 0 0.2rem;
  cursor: pointer;
  opacity: 0.3;
}

.thumbnail.is-active {
  opacity: 1;
}

.thumbnail img {
  width: 100%;
  height: auto;
}
html{
  overflow-x: hidden !important;
}