@import url('https://www.morriscoffee.ir/nowruz/css/fontiran.css');

@media only screen and (max-width:767px) {
  .pp{
      font-size: 30px !important;
  }
  .heading{
      font-size: 40px !important;
  }
  .bt{
      font-size: 30px !important;
  }
  .coming-soon p{
      font-size: 20px !important;
  }
  .fondo{
      width: 50px !important;
      height: 50px !important;
  }
  .icono{
      width: 100px !important;
      height: 100px !important;
  }
  .parte{
      width: 100px !important;
      height: 100px !important;
  }
  .nowruzcountdown h3{
      margin: 5px !important;
      font-size: 15pt !important;
  }
  .nowruzcountdown span{
      font-size: 14px !important;
  }
  .section-three {
    /* display: flex;
    justify-content: center;
    align-items: center;
    height: 7%; */
    margin:2% 0 !important;
  }
}

/*دکمه های حدمات*/
.bt {
  background-color: #ffd905;
  padding: 20px 30px;
  width: 35%;
  border-radius: 5px;
  font-size: 40px;
  color: black;
  text-decoration: none;
}


#myAudio {
    z-index: 999;
    position: fixed;
}

.wrapper {
  background-image: url(./haft-sin.jpg);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  text-align: center;
  /* height: 100vh; */
}

.coming-soon {
    margin: 20px 0px;
    text-align: center;
    width: 100%; 
    background: rgba(0,0,0, 0.7);

}
.pp {
    font-size: 35px;
    color: #ffd905;
    text-shadow: 0 0 17px #000;
    margin: 0;
}
.heading {
  display: inline-block;
  font-size: 60px;
  color: #ffd905;
  animation: text-animation 2.5s ease-in-out forwards;
  direction: rtl;
  text-shadow: 0 0 17px #000;
  margin: 40px 0px;
}
.coming-soon p {
  display: inline-block;
  font-size: 40px;
  color: #ffd905;
  direction: rtl;
}

.coming-soon .ctdown {
  font-weight: 700;
  font-size: 70px;
  display: flex;
  justify-content: center;
  min-height: 160px;
  opacity: 0;
  transition: opacity 2s ease-in-out;

}

.time-box {
  display: flex;
  flex-direction: column;
  color: #ffd905;
  align-items: center;
  justify-content: center;
  width: 25%;
  height: 25%;
}

.time-box:not(:last-child) {
  margin-right: 5px;
}

.time-box span {
  font-size: 30px;
  font-weight: 700;
}

@keyframes text-animation {
  from {
    transform: scale(0) rotateY(0deg);
  }
  to {
    transform: scale(1) rotateY(720deg);
  }
}
body {
	font-family: IRANSans ;
	font-weight: 700;
	margin: 0;
}
h1, h2, h3, h4, h5, h6,input, textarea,p {
	font-family: IRANSans ;
}
h1,p {
	font-weight: 500;
}


.nowruzcountdown span {
  font-size: 30pt;
  color: #ffd905;
  padding: 0 1% 0 0
}

.nowruzcountdown h3 {
  font-size: 30px;
  color: #ffd905;
}

.timer {
  text-align: center;
  font-size: 30px;
  color: #ffd905;
  margin: 2vw 0;
  background: rgba(0,0,0, 0.7);
  padding: 5px;
}


.section-one {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10%;
  margin:3% 0;
}


.section-two {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 7%;
  margin:3% 0;
}


.section-three {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 7%;
    margin: 0 auto;
}


.section-four {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20%;
  margin:3% 0;
}


.section-five {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 15%;
  margin:3% 0;
}

.section-six {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 15%;
  margin:3% 0;
}


#player-container #play-pause {
  cursor: pointer;
  margin: 10px auto;
  height:120px;
  width: 120px;
  padding: 12px 18px;
    border-radius: 30px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMiAyNHYtMjRsMjAgMTItMjAgMTJ6Ii8+PC9zdmc+);
    background-repeat: no-repeat!important;
    background-position: center;
    background-size: 100px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:100px;
  background-color: #ffd905;
}
.play {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMiAyNHYtMjRsMjAgMTItMjAgMTJ6Ii8+PC9zdmc+);
}
.pause {
   background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTAgMjRoLTZ2LTI0aDZ2MjR6bTEwLTI0aC02djI0aDZ2LTI0eiIvPjwvc3ZnPg==)!important;
}



/* The .page-wrap centers the clock on the page*/
.page-wrap {
  min-height: 3em;
  display: flex;
  justify-content: center;
  align-items: center;
      color: #FFD905;
    text-shadow: 0 0 10px #000;
}

.section-one img {
    background: #fff;
    border-radius: 50%;
}



.wavee {
animation-name: wavee;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
/* height: 55px; */
width: 55px;
border-radius: 50%;
}
@keyframes wavee {
  0% {box-shadow: 0 0 0px 0px #ffd905;}
  100% {box-shadow: 0 0 0px 60px rgba(255, 255, 255, 0);}
}



.clock-1 {
position: relative;
    z-index: 999;
    width: 70%;
    margin: 0 auto;
    text-align: center;
}
/* The .page-wrap centers the clock on the page*/
.page-wrap {
  min-height: 35em;
  display: flex;
  justify-content: center;
  align-items: center;
      color: #FFD905;
    text-shadow: 0 0 10px #000;
}

/* The .container creates spacing around the clock and the viewport edges */
.container {
    width: 70%;
    max-width: 650px;
    min-width: 250px;
    border-radius: 50%;
    background: #0005;
}
/* This div makes sure the clock stays square while adjusting to screen width */
.aspect-ratio-container {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  position: relative;
}
/* This is a background that serves as a border */
.clock-border {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 7%; /* Width of the clock border */
}
/* This gives the border and middle button a matching gradient */

/* This gives the border, middle button and hands a matching box-shadow */
.clock-border,
.center-button,
.clock-hands li {
box-shadow: 0 0px 0px 5px #FFD905;
}
/* This rounds everything that should be round */
.clock-border,
.clock-face,
.clock-face ul {
  border-radius: 50%;
}
/* This contains our clock hands and numbers */
.clock-face {
  position: relative;
  width: 100%;
  height: 100%;
}
/* Style the numbers ul and the hands ul to lay on top of eachother and cover the clock face */
.clock-face ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  width: 100%;
  height: 100%; 
}
/* Style the numbers as vertical bars that can be rotated around the center of the clock */
.clock-numbers li {
  height: 45%; /* This plus the top value creates margin between #s and clock edges */
  top: 5%; /* This plus the height value needs to add up to 50% */
  width: 3rem;
  text-align: center;
  font-size: 2rem;
  font-family: monospace;
}
/* Add a border radisu for visual effect */
.clock-hands li {
  border-radius: 5px;
}
/* Set Clock Numbers to have a fixed width */
.clock-numbers li {
}
/* Center the clock elements and set them to rotate from the middle of the clock */
.clock-numbers li,
.clock-hands li,
.clock-ticks li {
  position: absolute;
  left: 50%;
  transform-origin: bottom center;
}
/* rotate the number containers into place and adjust the digits back so that they're upright */

.clock-numbers li:nth-of-type(1) {
  transform: translateX(-50%) rotate(30deg);
}

.clock-numbers li:nth-of-type(1) div {
  transform: rotate(-30deg);
}

.clock-numbers li:nth-of-type(2) {
  transform: translateX(-50%) rotate(60deg);
}

.clock-numbers li:nth-of-type(2) div {
  transform: rotate(-60deg);
}

.clock-numbers li:nth-of-type(3) {
  transform: translateX(-50%) rotate(90deg);
}

.clock-numbers li:nth-of-type(3) div {
  transform: rotate(-90deg);
}

.clock-numbers li:nth-of-type(4) {
  transform: translateX(-50%) rotate(120deg);
}

.clock-numbers li:nth-of-type(4) div {
  transform: rotate(-120deg);
}

.clock-numbers li:nth-of-type(5) {
  transform: translateX(-50%) rotate(150deg);
}

.clock-numbers li:nth-of-type(5) div {
  transform: rotate(-150deg);
}

.clock-numbers li:nth-of-type(6) {
  transform: translateX(-50%) rotate(180deg);
}

.clock-numbers li:nth-of-type(6) div {
  transform: rotate(-180deg);
}

.clock-numbers li:nth-of-type(7) {
  transform: translateX(-50%) rotate(-150deg);
}

.clock-numbers li:nth-of-type(7) div {
  transform: rotate(150deg);
}

.clock-numbers li:nth-of-type(8) {
  transform: translateX(-50%) rotate(-120deg);
}

.clock-numbers li:nth-of-type(8) div {
  transform: rotate(120deg);
}

.clock-numbers li:nth-of-type(9) {
  transform: translateX(-50%) rotate(-90deg);
}

.clock-numbers li:nth-of-type(9) div {
  transform: rotate(90deg);
}

.clock-numbers li:nth-of-type(10) {
  transform: translateX(-50%) rotate(-60deg);
}

.clock-numbers li:nth-of-type(10) div {
  transform: rotate(60deg);
}

.clock-numbers li:nth-of-type(11) {
  transform: translateX(-50%) rotate(-30deg);
}

.clock-numbers li:nth-of-type(11) div {
  transform: rotate(30deg);
}
/* Number 12 just needs to be centered. Not rotated */
.clock-numbers li:nth-of-type(12),
.clock-hands li {
  transform: translateX(-50%);
}
/* Hand height plus top margin should equal 50% of the clock face */
.second-hand {
  top: 10%;
  height: 40%;
  width: 1.5%;
  background-color: #777;
}
/* Use smaller height and larger top values to create shorter hands */
.minute-hand {
  top: 15%;
  height: 35%;
  width: 2%;
  background-color: #0005;
  animation: tick 3600s linear infinite;
}
/* Use smaller height and larger top values to create shorter hands */
.hour-hand {
  top: 20%;
  height: 30%;
  width: 3%;
  background-color: #0005;
  animation: tick 43200s linear infinite;
}
/* Give the ticks a fluid width */
.clock-ticks li {
  display: flex;
  justify-content: center;
  width: 1%;
  height: 50%; /* This plus the top value creates margin between #s and clock edges */
  top: 0; /* This plus the height value needs to add up to 50% */
}
/* Make the ticks visible */
.clock-ticks div {
  width: 100%;
  height: 4%;
  background-color: #FFD905;
}
/* Rotate the ticks into place */
.clock-ticks li:nth-of-type(1) {
  transform: rotate(6deg);
}
.clock-ticks li:nth-of-type(2) {
  transform: rotate(12deg);
}
.clock-ticks li:nth-of-type(3) {
  transform: rotate(18deg);
}
.clock-ticks li:nth-of-type(4) {
  transform: rotate(24deg);
}
.clock-ticks li:nth-of-type(5) {
  transform: rotate(30deg);
}
.clock-ticks li:nth-of-type(6) {
  transform: rotate(36deg);
}
.clock-ticks li:nth-of-type(7) {
  transform: rotate(42deg);
}
.clock-ticks li:nth-of-type(8) {
  transform: rotate(48deg);
}
.clock-ticks li:nth-of-type(9) {
  transform: rotate(54deg);
}
.clock-ticks li:nth-of-type(10) {
  transform: rotate(60deg);
}
.clock-ticks li:nth-of-type(11) {
  transform: rotate(66deg);
}
.clock-ticks li:nth-of-type(12) {
  transform: rotate(72deg);
}
.clock-ticks li:nth-of-type(13) {
  transform: rotate(78deg);
}
.clock-ticks li:nth-of-type(14) {
  transform: rotate(84deg);
}
.clock-ticks li:nth-of-type(15) {
  transform: rotate(90deg);
}
.clock-ticks li:nth-of-type(16) {
  transform: rotate(96deg);
}
.clock-ticks li:nth-of-type(17) {
  transform: rotate(102deg);
}
.clock-ticks li:nth-of-type(18) {
  transform: rotate(108deg);
}
.clock-ticks li:nth-of-type(19) {
  transform: rotate(114deg);
}
.clock-ticks li:nth-of-type(20) {
  transform: rotate(120deg);
}
.clock-ticks li:nth-of-type(21) {
  transform: rotate(126deg);
}
.clock-ticks li:nth-of-type(22) {
  transform: rotate(132deg);
}
.clock-ticks li:nth-of-type(23) {
  transform: rotate(138deg);
}
.clock-ticks li:nth-of-type(24) {
  transform: rotate(144deg);
}
.clock-ticks li:nth-of-type(25) {
  transform: rotate(150deg);
}
.clock-ticks li:nth-of-type(26) {
  transform: rotate(156deg);
}
.clock-ticks li:nth-of-type(27) {
  transform: rotate(162deg);
}
.clock-ticks li:nth-of-type(28) {
  transform: rotate(168deg);
}
.clock-ticks li:nth-of-type(29) {
  transform: rotate(174deg);
}
.clock-ticks li:nth-of-type(30) {
  transform: rotate(180deg);
}
.clock-ticks li:nth-of-type(31) {
  transform: rotate(-6deg);
}
.clock-ticks li:nth-of-type(32) {
  transform: rotate(-12deg);
}
.clock-ticks li:nth-of-type(33) {
  transform: rotate(-18deg);
}
.clock-ticks li:nth-of-type(34) {
  transform: rotate(-24deg);
}
.clock-ticks li:nth-of-type(35) {
  transform: rotate(-30deg);
}
.clock-ticks li:nth-of-type(36) {
  transform: rotate(-36deg);
}
.clock-ticks li:nth-of-type(37) {
  transform: rotate(-42deg);
}
.clock-ticks li:nth-of-type(38) {
  transform: rotate(-48deg);
}
.clock-ticks li:nth-of-type(39) {
  transform: rotate(-54deg);
}
.clock-ticks li:nth-of-type(40) {
  transform: rotate(-60deg);
}
.clock-ticks li:nth-of-type(41) {
  transform: rotate(-66deg);
}
.clock-ticks li:nth-of-type(42) {
  transform: rotate(-72deg);
}
.clock-ticks li:nth-of-type(43) {
  transform: rotate(-78deg);
}
.clock-ticks li:nth-of-type(44) {
  transform: rotate(-84deg);
}
.clock-ticks li:nth-of-type(45) {
  transform: rotate(-90deg);
}
.clock-ticks li:nth-of-type(46) {
  transform: rotate(-96deg);
}
.clock-ticks li:nth-of-type(47) {
  transform: rotate(-102deg);
}
.clock-ticks li:nth-of-type(48) {
  transform: rotate(-108deg);
}
.clock-ticks li:nth-of-type(49) {
  transform: rotate(-114deg);
}
.clock-ticks li:nth-of-type(50) {
  transform: rotate(-120deg);
}
.clock-ticks li:nth-of-type(51) {
  transform: rotate(-126deg);
}
.clock-ticks li:nth-of-type(52) {
  transform: rotate(-132deg);
}
.clock-ticks li:nth-of-type(53) {
  transform: rotate(-138deg);
}
.clock-ticks li:nth-of-type(54) {
  transform: rotate(-144deg);
}
.clock-ticks li:nth-of-type(55) {
  transform: rotate(-150deg);
}
.clock-ticks li:nth-of-type(56) {
  transform: rotate(-156deg);
}
.clock-ticks li:nth-of-type(57) {
  transform: rotate(-162deg);
}
.clock-ticks li:nth-of-type(58) {
  transform: rotate(-168deg);
}
.clock-ticks li:nth-of-type(59) {
  transform: rotate(-174deg);
}
/* Add a button over top of the center of the clock for style and realism */
.center-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 7%;
  height: 7%;
  border-radius: 50%;
  z-index: 10;
  border: 3px solid #ccc;
}
/* JavaScript will apply this animation for the hands initially */
@keyframes tickThrough {
  100% {
    transform: translateX(-50%) rotate(360deg);
  }
}
/* When any hand hits 12 (zero rotation), JavaScript will add this animation which sets the hand to it's original point of zero rotation */
@keyframes tickRestart {
  0% {
    transform: translateX(-50%) rotate(0deg);
  }
  100% {
    transform: translateX(-50%) rotate(360deg);
  }
}

@media screen and (min-width: 320px) {
  .clock-numbers li {
    font-size: calc(2rem + 6 * ((100vw - 320px) / 680));
  }
}
@media screen and (min-width: 1000px) {
  .clock-numbers li {
    font-size: 3rem;
  }
}