@media only screen and (max-width: 600px) {
  .item1 {grid-area: 1 / span 6;}
  .item2 {grid-area: 2 / span 6;}
  .item3 {grid-area: 3 / span 6;}
  .item4 {grid-area: 4 / span 6;}
  .item5 {grid-area: 5 / span 6;}
}

@media only screen and (min-width: 600px) {
  .item1 {grid-area: 1 / span 6;}
  .item2 {grid-area: 2 / span 1;}
  .item3 {grid-area: 2 / span 4;}
  .item4 {grid-area: 3 / span 6;}
  .item5 {grid-area: 4 / span 6;}
}

@media only screen and (min-width: 768px) {
  .item1 {grid-area: 1 / span 6;}
  .item2 {grid-area: 2 / span 1;}
  .item3 {grid-area: 2 / span 4;}
  .item4 {grid-area: 2 / span 1;}
  .item5 {grid-area: 3 / span 6;}
}



body {
    margin: 0;
    font-family: 'Inter';
	direction: rtl;
	
}

.header {
    width: 100%;
    height:100%;
   position: relative;
   text-align: center;
	overflow: hidden;
}

.header-bg {
    width: 100%;
}

.message-wrap {
    width:100%;
	height: auto;
    color: #ffffff;
    position: absolute;
	text-align: center;
   
}

.message-title {
    font-size:2rem;
	
}

.message-sentence {
    font-size: 1.5rem;
    line-height: 1.2rem;
}

.blur-motion {
    position: relative;
    height:auto;
}

.blur-001 {
    width: 100px;
    height: 100%;
    background-color: #11a207;
    border-radius: 50px;
    position: absolute;
    top: -30%;
    left: -20%;
    mix-blend-mode: color-dodge;
}

.blur-002 {
    width: 750px;
    height:100%;
    background-color: #0752a2;
    border-radius: 300px;
    position: absolute;
    top: 130%;
    left: 130%;
    mix-blend-mode: color-dodge;
}

.blur-003 {
    width: 500px;
    height: 100%;
    background-color: #07a21c;
    border-radius: 200px;
    position: absolute;
    top: 130%;
    left: -30%;
    mix-blend-mode: color-dodge;
}

.blur-004 {
    width: 200px;
    height: 100%;
    background-color: #a20773;
    border-radius: 200px;
    position: absolute;
    top: -50%;
    left: 50%;
    mix-blend-mode: color-dodge;
}

.blur-005 {
    width: 200px;
    height:100%;
    background-color: #0748a2;
    border-radius: 200px;
    position: absolute;
    top: 50%;
    left: -50%;
    mix-blend-mode: color-dodge;
}

.rounded-4
 {
	 --bs-border-radius-xl:1rem;
 border-radius:var(--bs-border-radius-xl)!important;
 }
	 .ysf-bar{
		
		 padding-left: 17%;
		 padding-right: 17%;
		 height: auto;
		 padding-bottom: 100px;
	 }
	
	
  .spans {

    display: inline-block;
    width: 50%;
    height: 200px;
    margin: 2px;
    background-color: rgba(65,253,0,0.15);
	 
}
.footter{
	
	text-align: center;
	height: 50px;
	left: 0;
  bottom: 0;
  width: 100%;
	direction: rtl;
	
}
hr
{
	color: darkgreen;
	align-items: center;
}
.gtext{
	color: #649425;
}
.audioPlayer{
  display: block;
  border-radius: 20px;
  margin:0 auto;
}
.submit{
	background-color: rgba(100,228,4,0.15);

	width:50px;
	height: 30px;
	color: aliceblue;
	font-size: 20;
}
.submit:hover{
	background-color: rgba(75,224,0,0.50);
	
}