html {
  scroll-behavior: smooth;
}
@font-face {
  font-family: 'Vazir';
  src: url('/static/assets/fonts/vazir-font-v29.1.0/Vazir-Black.woff2') format('woff2'),
       url('/static/assets/fonts/vazir-font-v29.1.0/Vazir-Black.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

.vazir {
    font-family: 'Vazir', sans-serif;
}


.request{
  background-color: chocolate !important;
  color: white !important;
  
  border:  5px white;
  padding: 5px ;
  border-radius: 10px;
  text-decoration: none;
}
.bg3{
  background-color: chocolate !important;
  color: white !important;
  
  border:  5px white;
  padding: 5px ;
  border-radius: 10px;
  text-decoration: none;
}
.justify{
    text-align: justify;
}
.request:hover{
  background-color: rgb(139, 69, 20) !important;}

.icons{
    
    color: whitesmoke;
    background-color: #A5D6A7;
    display: inline-flex;
    padding: 5px;
    border-radius: 10px;
}

.logo{
    display:inline-flex ;
}
@keyframes myAnim {
	0% {
		opacity: 1;
		transform: translateY(45px);
	}
	24% {
		opacity: 1;
	}
	40% {
		transform: translateY(24px);
	}
	65% {
		transform: translateY(12px);
	}
	82% {
		transform: translateY(6px);
	}
	93% {
		transform: translateY(4px);
	}
	25%, 55%, 75%, 87%, 100% {
		transform: translateY(0px);
		opacity: 1;
	}
}
@keyframes bounceFadeIn {
    0% {
      opacity: 0;
      transform: scale(0.5) translateY(100px);
    }
    60% {
      opacity: 1;
      transform: scale(1.05) translateY(-10px);
    }
    80% {
      transform: scale(0.98) translateY(5px);
    }
    100% {
      transform: scale(1) translateY(0);
    }
  }
  
  .animated-box {
    animation: myAnim 15s ease 0s infinite normal forwards;
  }
  
.fancy-appear {
animation: bounceFadeIn 1.5s ease-out forwards;
}
.team-card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    overflow: hidden;
    text-align: center;
  }
  .team-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
  }
  .team-card-body {
    padding: 20px;
  }
  .team-name {
    font-weight: bold;
    font-size: 1.2rem;
    color: #2c3e50;
  }
  .team-position {
    font-style: italic;
    color: #7f8c8d;
  }
  .social-icons a {
    margin: 0 5px;
    color: #7f8c8d;
    transition: color 0.3s;
  }
  .social-icons a:hover {
    color: #000;
  }
  .padding-left{
    padding-left: 15px !important;
  }
  .bg {
    background-image: url("/static/assets/images/bg/Untitled-2.png");
    background-size: cover;
}
.bg2{
    background-image: url("/static/assets/images/bg/Untitled-1.png");
    background-size: cover;
}
.blur{
    /* From https://css.glass */
background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.ekar-banner {
    width: 100%;
    height: auto;
    object-fit: cover; /* یا contain بسته به نیاز */
  }
  .bg-about {
    background-image: url("/images/1.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 400px;
  }
  #okar-loader {
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .spinner {
    width: 60px;
    height: 60px;
    border: 6px solid #d4d4d4;
    border-top: 6px solid #198454;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  
  .loading-text {
    margin-top: 20px;
    font-size: 18px;
    color: #198454;
    font-weight: bold;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
@keyframes waveMove {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
.white{
  background-color: #FFFFFF !important;
}
.blue{
  background-color: #A5D6A7 !important;
}
.geray{
  background-color: #F1F3F4 !important;
}
.green{
  background-color: #4FC3F7 !important;
}
.pink{
  background-color: #F8BBD0 !important;
}
.yellow{
  
}
.yellow:hover{
  background-color: #FFF59D !important;
  color: white;
}