body{
    /* background-color: black; */
background-image: url("../img/onsportfm_New.jpeg");
background-origin: border-box;
    background-repeat:no-repeat;
    background-size: cover;
}
.main{
    display: flex;
    flex-direction: row;
}
#img{
    position:relative;
}
.audio{
    margin: 20px auto 20px;
    width:100%;
    height:89%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:start;
    align-items: top;
    
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    /* ================= */
}

.ads1{
    height:200px;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    background-image: url("../img/2026/fixed/4.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 15px;
    
}

.ads1-1{
    height:200px;
    text-align: center;
    padding-top: 50px;
    color: whitesmoke;
    background-color: rgb(4, 4, 71);
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    font-family:cursive;
    opacity: 0;

}
.ads1-1:hover{
    opacity: 1;
    background:  rgba(15, 8, 82, 0.726);
}

.ads2{
    height:200px;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    background-image: url("../img/2026/fixed/5.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 15px;
}
.ads2-1{
    height:200px;
    text-align: center;
    padding-top: 50px;
    color: whitesmoke;
    background-color: rgb(4, 4, 71);
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    font-family:cursive;
    opacity: 0;
}
.ads2-1:hover{
    opacity: 1;
    background:  rgba(15, 8, 82, 0.726);
}
.ads3{
    height:200px;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    background-image: url("../img/2026/fixed/6.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgb(103, 103, 124);
}
.ads3-1{
    height:200px;
    text-align: center;
    padding-top: 50px;
    color: whitesmoke;
    background-color: rgb(4, 4, 71);
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    font-family:cursive;
    opacity: 0;
}
.ads3-1:hover{
    opacity: 1;
    background:  rgba(15, 8, 82, 0.726);
}
.secand{
    box-sizing: border-box;
    position: relative;
} 

/* audio::-webkit-media-controls-play-button,
     audio::-webkit-media-controls-panel {
     background-color: rgb(240, 214, 66);
     color: #000;
     }

*/
.ads4{
    height:200px;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    background-image: url("../img/2026/fixed/1.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgb(103, 103, 124);
    margin-bottom: 15px;
}
.ads4-1{
    height:200px;
    text-align: center;
    padding-top: 50px;
    color: whitesmoke;
    background-color: rgb(4, 4, 71);
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    font-family:cursive;
    opacity: 0;
}
.ads4-1:hover{
    opacity: 1;
    background:  rgba(15, 8, 82, 0.726);
}


.ads5{
    height:200px;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    background-image: url("../img/2026/fixed/2.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgb(103, 103, 124);
    margin-bottom: 15px;

}
.ads5-1{
    height:200px;
    text-align: center;
    padding-top: 50px;
    color: whitesmoke;
    background-color: rgb(4, 4, 71);
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    font-family:cursive;
    opacity: 0;
}
.ads5-1:hover{
    opacity: 1;
    background:  rgba(15, 8, 82, 0.726);
}

.ads6{
    height:200px;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    background-image: url("../img/2026/fixed/3.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgb(103, 103, 124);
}
.ads6-1{
    height:200px;
    text-align: center;
    padding-top: 50px;
    color: whitesmoke;
    background-color: rgb(4, 4, 71);
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    opacity: 0;
    font-family:cursive;
}
.ads6-1:hover{
    opacity: 1;
    background:  rgba(15, 8, 82, 0.726);
}
/* ================Swiper================ */

.swiper1{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 20vh;
    overflow: hidden;
}

.swiper-container {
    width: 100%;
    padding-top: 0px;
    padding-bottom: 300px;
  }

  .swiper-slide {
    background-position: center;
    background-size: cover;
    width: 400px;
    height: 100px;
    background-color: black;
    -webkit-box-reflect:  below 1px linear-gradient(transparent,transparent,#0006);
  }
  .page{
    margin-top: 20px;
    margin-bottom: 20px;
    color: rgba(245, 245, 245, 0.644);
}
strong{
    width: 40px;
    border-left: 1px solid whitesmoke;
    border-radius: 10px;
    text-align: center;
}

/* ============End off swiper */
@media (min-width: 200px) and (max-width: 990px)
{
.main{
    display: flex;
    flex-direction: column;
}




/* 
h2{
    font-size:large;
}
h3{
    font-size:large;

}
h5{
    font-size:small;
 
} */

    p{
        font-size:6px;
    }

    /* .ads1{
        height:200px;
        border-radius: 30px;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        -ms-border-radius: 30px;
        -o-border-radius: 30px;
        background-image: url("../img/download12.jfif");
        background-size: cover;
        margin-bottom: 15px;
        
    }
    .ads2{
        height:200px;
        border-radius: 30px;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        -ms-border-radius: 30px;
        -o-border-radius: 30px;
        background-image: url("../img/waled.jpg");
        background-repeat: no-repeat;
        background-size:cover;
        margin-bottom: 15px;
    } */
    
}