@font-face {
  font-family: dana-black;
  src: url(../font/dana-black.woff);
}

@font-face {
  font-family: dana-bold;
  src: url(../font/dana-bold.woff);
}

@font-face {
  font-family: dana-demibold;
  src: url(../font/dana-demibold.woff);
}

@font-face {
  font-family: dana-extrabold;
  src: url(../font/dana-extrabold.woff);
}

@font-face {
  font-family: dana-extralight;
  src: url(../font/dana-extralight.woff);
}

@font-face {
  font-family: dana-light;
  src: url(../font/dana-light.woff);
}

@font-face {
  font-family: dana-medium;
  src: url(../font/dana-medium.woff);
}

@font-face {
  font-family: dana-regular;
  src: url(../font/dana-regular.woff);
}

@font-face {
  font-family: dana-thin;
  src: url(../font/dana-thin.woff);
}

a:link{
  text-decoration: none;
  color: unset;
}
a:hover{
  transition: all  0.3s;
  color: #6d0957;
}
.dana-black {
  font-family: dana-black;
}

.dana-bold {
  font-family: dana-bold;
}

.dana-demibold {
  font-family: dana-demibold;
}

.dana-extrabold {
  font-family: dana-extrabold;
}

.dana-extralight {
  font-family: dana-extralight;
}

.dana-light {
  font-family: dana-light;
}

.dana-demibold {
  font-family: dana-demibold;
}

.dana-regular {
  font-family: dana-regular;
}

.dana-thin {
  font-family: dana-thin;
}

.dana-medium {
  font-family: dana-medium;
}

#searchbox::placeholder {
  color: #FFF;
}

#searchbox {
  background-color: rgba(0, 0, 0, 0);
  border-color: #fff;
}

.box {
  background-color: #FFF;
  border-radius: 7px;
  box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.2);
  margin: 7px;
  padding: 1rem;
  overflow: hidden;
}

.img-box {
  overflow: hidden;
}

.img-box img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 7px;
}

.date-card {
  margin: -3.2rem 0.8rem 0 0;
  padding: 10px 15px;
  color: #FFF;
  background-color: #6d0957;
  border-radius: 5px;
}

.fs-7 {
  font-size: 0.9rem;
}

.circle {
  width: 15rem;
  height: 15rem;
  border-radius: 100%;
  border: 5px solid #fff;
  box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.2);
  z-index: 1;
}
.circle:hover{
  transition: all ease-in-out 0.4s;
  border: 5px solid #6d0957;

}

.circle img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border-radius: 100%;
  z-index: 1;
}

.icon-circle {
  width: 5rem;
  height: 5rem;
  position: absolute;
  top: 70%;
  left: 3%;
  border-radius: 100%;
  background-color: white;
  border: 2px solid #fff;
  box-shadow: 0px 0px 20px 2px rgba(255, 255, 255, 0.9);
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto;
  z-index: 2;
}

#icon-circle-bg1 {
  background-image: url(https://www.oico.ir/Portals/0/Images/s01.jpg);
}

#icon-circle-bg2 {
  background-image: url(https://www.oico.ir/Portals/0/Images/s02.jpg);
}

#icon-circle-bg3 {
  background-image: url(https://www.oico.ir/Portals/0/Images/s03.jpg);
}

#icon-circle-bg4 {
  background-image: url(https://www.oico.ir/Portals/0/Images/s04.jpg);
}

.circular-progress {
  --size: 150px;
  --half-size: calc(var(--size) / 2);
  --stroke-width: 10px;
  --radius: calc((var(--size) - var(--stroke-width)) / 2);
  --circumference: calc(var(--radius) * pi * 2);
  --dash: calc((var(--progress) * var(--circumference)) / 100);
  animation: progress-animation 5s linear 0s 1 forwards;
}

.circular-progress circle {
  cx: var(--half-size);
  cy: var(--half-size);
  r: var(--radius);
  stroke-width: var(--stroke-width);
  fill: none;
  stroke-linecap: round;
}

.circular-progress circle.bg {
  stroke: #ddd;
}

.circular-progress circle.fg {
  transform: rotate(-90deg);
  transform-origin: var(--half-size) var(--half-size);
  stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
  transition: stroke-dasharray 0.3s linear 0s;
  stroke: #6d0957;
}

.circular-progress text {
  font: 2rem dana-bold;
}

@property --progress {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

@keyframes progress-animation {
  from {
    --progress: 0;
  }

  to {
    --progress: 80;
  }
}

.section1 {
  background-image: url(../img/section1.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.card {
  position: relative;
  border-radius: 5px;
  overflow: hidden;
}

.card:hover .card-caption {
  transition: 0.7s;
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.card-img {
  width: 100%;
}

.card-caption {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-20px);
  transition: all 0.5s ease;
  width: 100%;
  height: 100%;
  background-color: rgba(109, 9, 87, 0.4);
  color: #FFF;
  text-align: center;
  padding: 15px 20px;
  font: 1rem dana-regular;
}

.section2 {
  background-image: url(../img/section2.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}

.card2 {
  position: relative;
  border-radius: 5px;
  overflow: hidden;
}

.card2 i {
  font-size: 5rem;
}

.card2:hover .card2-caption {
  transition: 0.7s;
  background-color: rgba(109, 9, 87, 0.4);
}

.card2-img {
  width: 100%;
}

.card2-caption {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transition: all 0.5s ease;
  width: 100%;
  height: 100%;
  background-color: rgba(109, 9, 87, 0);
  color: #FFF;
  text-align: center;
  padding: 15px 20px;
  font: 1rem dana-regular;
}


.section3 {
  position: relative;
  background-image: url(../img/section3.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}
.section3::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(109, 9, 87, 0.1);
  z-index: 1;
}
.section3 > .container{
  position: relative;
  z-index: 2;
}
.section3 i{
  font-size: 5rem;
  color: white;
  text-align: left;
}
.section3 h3{
  color: white;
  font-family: dana-bold;
  text-align: right;
}
.section3 h5{
  color: white;
  font-family: dana-demibold;
  text-align: right;
}

.footer{
  position: relative;
}
.footer::after{
  content: 'طراحی و توسعه توسط شرکت رضا صالحی';
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: #777;
  text-align: center;
  font-family: dana-regular;
  padding: 10px;
}
.footer .big-logo{
  width: 80%;
  max-width: 80%;
}