*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    scroll-behavior: smooth;
    font-family: Arial, Helvetica, sans-serif;

}
ul{
    list-style: none;

}
a{
    text-decoration: none;
}
.body2{
       background:   #121212;
}
.body2 h1,p{
    color: white;
}
.header2{
    background: white;
}
.header2 h1{
       color: #1e90ff;
}
.header2 nav ul li a{
  font-size: 25px;
  color: black;
 

}
header{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 70px;

 
    margin-bottom: 0;
    margin-top: 0;
    box-shadow: 2px 2px 7px rgba(0,0,0,0.3) ;
}
header h1{
    color: #1e90ff;
    font-size: 40px;
   
}
header nav ul{
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

header nav ul li{
    margin-left: 15px;
    
}
header nav ul li{
    margin-left: 15px;
   
}
header nav ul li a{
  font-size: 25px;
  color: black;
 

}


#menu{
    display: none;

}
#monav2{
    z-index: 3;
    width: 100%;
    position: absolute;
    background: #121212;
  
}
.monav{
    z-index: 3;
    width: 100%;
    position: absolute;
    background: white;
    color: white;
  
}


.monav .main {
    display: flex;
    justify-content: end;
    flex-direction: column;
    align-items: end;
    padding-right: 30px;
    list-style: none;

display: none;




  
}
header i {
    margin: 4px;
    font-size: 23px;
}
.monav ul li{
    margin-bottom: 5px;
    padding-bottom: 10px;
    margin-top: 10px;
    width: 100%;
    border-bottom: 0.3px solid gray;

}
.monav ul li:hover{

padding-left:10px ;
}
.monav ul li a{
    font-size: 20px;
    color: black;
    
}
#monav2 ul li a{
    font-size: 20px;
    color: white;
    
}
#menu.active {
    display: none;
}
#close.active{
display: block;
}
#close{
display: none;
}
.main{
    display: none;
}
.main.active{
    display: flex;
}
@media(max-width: 1200px)
{
    header h1{
        font-size: 20px;
    }
   header nav ul li a{
        font-size: 20px;
    }
}
@media(max-width: 900px)
{
  
   header nav ul li a{
      display: none;
    }
    .logo{
        width: 100px;
    }
    #free{
        display: none;
    }
    #menu{
        display: block;
        z-index: 6;
    
    }
    .monav ul{
        display: flex;
    }
 @media(max-width:  600px){
    header{
        padding: 20px 30px;
    }
 }
}
.menu{
    width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.head{
    display: flex;
    justify-content:center ;

    align-items: center;
    margin: 40px 0;
}

.head h1{
   font-size: 25px;
    background: red;
    text-align: center;
    padding: 10px 20px;
    border-radius: 10px;
}


.card{
    width: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
}

.card  .con{
    width: 80%;
    display: flex;
    justify-content: center;
    align-items:start ;
    flex-wrap: wrap;
}

.card .con .box {
    width: 23%;

    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
    transition:.7s ease;
    cursor: pointer;
}
.card .con a {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
    transition:.7s ease;
    cursor: pointer;
}
.card .con .box:hover{
    scale: 1.05;
}
.card .con .box .im{
    width: 100%;
        height: 260px;

}
.card .con .box .im img{
    width: 100%;
    height: 100%;
        border-radius: 17px;
}

@media(max-width: 997px){
    .card .con .box .im{
    width: 100%;
        height: 200px;

}
.head h1{
    font-size: 20px;
}
}
@media(max-width: 779px){

    .card .con .box .im{
    width: 100%;
        height: 150px;

}
.card .con{
    width: 100%;
}
.card .con .box{
    width: 33%;

    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
    transition:.7s ease;
}
}


.info{
    width: 100%;
    padding-top: 100px;
    margin-top: 40px;
    
}

.info .con {
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.info .con .box {
    width: 45%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px;
}
.info .con .box .im{
    width: 100%;
    height: 500px;
}

.info .con .im img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
}


.info .con .text{
    width: 42%;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;

    height: 500px;
    padding: 20px;
}
.info .con .text h1{
    font-size: 40px;
    margin-bottom: 20px;
}
.info .con .text p{
    background: rgba(255, 255, 255, 0.1);
    margin-top: 20px;
padding: 20px;
border-radius: 10px;


}

@media(max-width:997px)
{
    .info .con {
        width: 100%;
    }
    .info .con .box .im {
        height: 300px;
    }
    .info .con .text {
        height: 300px;
    }
    .info .con .text h1 {
     font-size: 25px;
    }
    
}
@media(max-width:797px)
{
    .info .con {
        width: 100%;
        flex-direction: column;
    }
    .info .con .box  {
       width: 100%;
    }
    .info .con .box .im  {
       width: 90%;

    }
    .info .con .text {
     width: 90%;
    }
    .info .con .text h1 {
     font-size: 25px;
    }
    
}




.pay{
    width: 100%;
    padding-top: 100px;
    margin-bottom: 400px;
    
}

.pay .con {
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.pay .con .box {
    width: 45%;
    display: flex;
    justify-content: start;
    align-items: start;
    margin: 20px;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.1);
     border-radius: 10px;
     padding: 10px;

     margin-top: 80px;
}
.pay .con .box h2{
color: white;
}
.pay .con .box .coin {
 width: 100%;
    display: flex;
    justify-content: start;
    align-items: start;
   
    flex-wrap: wrap;

}
.pay .con .box .coin p {
 
  background: rgba(0, 0, 255, 0.5);
  font-size: 20px;
  margin: 10px;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  
}
.pay .con .form{
    width: 42%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

   
    padding: 20px;
}
.pay .con .form form{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
     background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;

    margin-top: 50px;
    padding: 20px;
}
.pay .con .form form div{
    width: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    flex-direction: column;
}
.pay .con .form form div i{
    position: absolute;
    left: 10px ;
    top: 15%;
    right:46%;
  font-size: 23px;
color: white;
}
.pay .con .form form input{
    width: 100%;
    padding: 15px 20px;
    margin-bottom: 20px;
    outline: none;
    font-size: 20px;
    border-radius: 10px;
    border: none;
    color: black;

}
.pay .con .form form div #col{
    color: transparent;
}

.paybtn{
    background: #3399ff;
    color: white;

}
.cartbtn{
    background: #9933cc;
    color: white;

}


@media(max-width:997px)
{
    .pay .con {
        width: 100%;
    }
    .pay .con .box .im {
        height: 300px;
    }
    .pay .con .form {

    }
    .pay .con .text h1 {
     font-size: 25px;
    }
    
}
@media(max-width:797px)
{
    .pay .con {
        width: 100%;
        flex-direction: column;
    }
    .pay .con .box  {
       width: 90%;
  
    }
    .pay .con .box .im  {
       width: 90%;

    }
    .pay .con .form {
     width: 90%;
     padding: 20px;
    }
    .pay .con .form form{
 
     padding: 20px;
    }
    .pay .con .form h1 {
     font-size: 25px;
    }
    
    .pay .con .form form div{
        width: 90%;
    }

    .pay .con .form form input{
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 20px;
    outline: none;
    font-size: 17px;
    border-radius: 6px;
    border: none;

}
.pay .con .box .coin p {
 
   background: rgba(0, 0, 255, 0.5);
  font-size: 18px;
  margin: 4px;
  padding: 4px;
  border-radius: 10px;
  cursor: pointer;
  
}
    
}

.total{
    padding:10px  30px;
    background: whitesmoke;
      border-radius: 10px;
      margin-top: 30px;

}
.total span{
        color: green;
        font-size: 20px;
      
}




















.pro{
    width: 100%;
    padding-top: 100px;
    margin-bottom: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.pro .con {
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    
}
.pro .con .info{
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: red;
    border-radius: 7px;
    flex-direction: column;
    padding: 40px;


}
.pro .con #info2{
    width: 6 0%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: blue;
    border-radius: 7px;
    flex-direction: column;
    padding: 40px;


}
.pro .con .info h1{
    margin-bottom: 20px;
    font-size: 25px;
    color: white;
}
.pro .con .info p{
    margin-bottom: 20px;
    font-size: 30px;
    color: white;
}
.pro .con .info  p span{
    padding: 6px;
}
@media(max-width: 997px)
{
    .pro .con .info{
        width: 50%;
    }
    .pro .con .info h1{
    margin-bottom: 10px;
    font-size: 20px;
    color: white;
}
.pro .con .info p{
    margin-bottom: 10px;
    font-size: 25px;
    color: white;

}
}
@media(max-width: 767px)
{
    .pro .con .info{
        width: 70%;
    }
}

.pro{
    width: 100%;
    padding-top: 100px;
    margin-bottom: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f2f2f2;
}

.pro .box {
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 7px;

    margin-top: 200px;
    padding: 30px;
       border: 1px solid gray;
    
}


.pro .box .go,.in{
    width: 97%;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
  border-radius: 7px;
    padding: 20px 50px ;
    border: 1px solid gray;
  margin: 4px;
}
.pro .box .go p{
    color: black;
        margin-bottom: 10px;

}
.pro .box .in p{
    color: black;
    margin-bottom: 10px;

}
.pro .box .go h1{
  font-size: 20px;

}
.pro .box .in h1{
     font-size: 20px;

}
.pro .box .go h2{
  font-size: 25px;
  color: red;

}
.pro .box .in h2{
     font-size: 25px;
     color: lightgreen;
}
.pro .box .go h2 span{
    padding: 6px;
}
.pro .box .in h2 span{
    padding: 6px;
}

.pro .box .top {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center ;
}

@media(max-width: 979px){
    .pro .box .go,.in{

    padding: 10px 20px ;

}
  

.pro .box .go h1{
     font-size: 18px;

}
.pro .box .in h1{
     font-size: 18px;

}
.pro .box .go h2{
     font-size: 18px;

}
.pro .box .in h2{
     font-size: 18px;

}
.pro .box .go p{
     font-size: 14px;

}
.pro .box .in p{
     font-size: 14px;

}

}

.top {
    width: 40%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

.top .mo{
    width: 45%;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    flex-direction: column;
    border-radius: 7px;
    cursor: pointer;
}
.top .mo a{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.top .mo h1{
    font-size: 20px;
    margin-top: 10px;
}
.top .mo i{
    font-size: 20px;

}
@media(max-width:979px){
    .top {
        width: 50%;
    }
}
@media(max-width:767px){
    .top {
        width: 70%;
    }
    .top .mo{
        height: 100px;
    }
}


.wall{
    font-size: 25px;
    border: none;
    outline: none;
    background: none;
    color: white;
    cursor: pointer;
}

 #alert-message {
        position: fixed;
        top: 40px;
        left: 50%;
        transform: translateX(-50%);
        background: #16a34a; /* أخضر */
        color: #fff;
        padding: 15px 10px;
        border-radius: 8px;
        font-size: 20px;
        font-weight: bold;
        box-shadow: 0 4px 10px rgba(0,0,0,0.3);
        z-index: 9999;
        opacity: 1;
        transition: opacity 0.7s ease, transform 0.7s ease;
    }
    @media(max-width: 797px){
       #alert-message{
        font-size: 15px;
       }
    }