body{
        font-family: 'Cairo', sans-serif;
            background-image:linear-gradient(to bottom, rgb(0 0 0 / 34%), rgb(0 0 0 / 55%)),
    url(https://lh3.googleusercontent.com/-wVUwkcJ_N3g/ZTiYo_C1udI/AAAAAAAAHTI/7HLpTFldke8JZgVYEKc8PuUVhkV6xfAZQCNcBGAsYHQ/s1900/14-jpg.webp);
    
    background-size: cover; /* لتمديد الصورة لتغطية الصفحة بأكملها */
    background-attachment: fixed; /* لجعل الصورة ثابتة عند التمرير */
    background-position: center; /* لتوسيط الصورة على الشاشة */
        
    }
    
    
    
    
    
    
    
    .main{
      display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 100vh;
    flex-direction: column;
    }

    .container.header{
	display: flex;
    justify-content: space-between;
    align-items: center;
	}
	
	.main .container{
	width: 90%;
    max-width: 800px;
    margin-bottom: 15px;
    background-color: #ffffffb0;
    padding: 15px;
    border-radius: 8px;
    }

.container.header a{
    color: black;
}
	
    .form-control {
    font-family: system-ui,auto;
}

    #fixedcopy {
position: fixed;
bottom: -50px;
width: 100%;
text-align: center;
opacity:0;
transition: bottom .25s;
z-index: 9;
}
.fixedcopy {
margin: 0 auto;
max-width: 200px;
border-radius: 3px;
}
.buts-group {
display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    }
.buts-group button{
display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    }
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}
.tools-btn{
	display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
}
.button-group{
display: flex;
gap: 10px;
margin: 10px 0;
justify-content: space-between;
}

  a{
    text-decoration: none;
    }









footer {
margin:20px 0 -15px 0 ;
font-size:12px;
    display: flex;
    justify-content: space-between;
}

.flags:before {
    content: "";
    display: inline-block;
    width: 40px;
    height: 40px;
    margin: 0 0 0 9px;
    top: 0;
    }
   .flags.right:before {
       background: url(https://lh3.googleusercontent.com/-EoogSKoELHs/ZTiSxUbiZkI/AAAAAAAAHS4/cAojqjXwUdcTSijMgCN2Jlul5IsTeMrwgCNcBGAsYHQ/h90/2211.png) 0 0 no-repeat;
	       background-size: 100%;
    background-position: center;
   }
      .flags.left:before {
       background: url(https://lh3.googleusercontent.com/-QzB6RjGibIg/ZTiSxaxDj2I/AAAAAAAAHS8/UuZVHpewBfkYeBmoRcY4zBtL5HXVN8begCNcBGAsYHQ/h90/221.png) 0 0 no-repeat;
	       background-size: 100%;
    background-position: center;
   } 
   .card-body{
   margin-top:20px;
   font-size: 14px;
    background-color: #ffdeab;
    padding: 10px;
    border-radius: 8px;
    line-height: 28px; 
    }
	
	
	
	
	
	
	
	
	

.ripple{
position:relative;
display:inline-table;
overflow:hidden;
}
.ripple>*{
z-index:1
}
.splash-wrapper{
bottom:0;
left:0;
overflow:hidden;
pointer-events:none;
position:absolute;
right:0;
top:0;
z-index:0
}
.splash{
background:#ccc;
border-radius:100%;
display:block;
opacity:.6;
position:absolute;
-webkit-transform:scale(0);
-ms-transform:scale(0);
transform:scale(0)
}
.splash.animate{
-webkit-animation:ripple-effect .4s linear;
animation:ripple-effect .4s linear
}
@-webkit-keyframes ripple-effect{
100%{
opacity:0;
-webkit-transform:scale(2.5);
transform:scale(2.5)
}
}
@keyframes ripple-effect{
100%{
opacity:0;
-webkit-transform:scale(2.5);
transform:scale(2.5)
}
}






.flat-button-black.ripple .splash{
background-color: rgb(48 48 48 / 50%)
}
.flat-button-blue.ripple .splash{
background-color:rgba(0, 123, 255, 0.18)
}
.flat-button-white.ripple .splash{
  background-color:rgba(255, 255, 255, 0.48)
  }

body.darktheme .flat-button-black.ripple .splash{
  background-color:rgba(255, 255, 255, 0.48)
}
.splash-black .splash{ background-color:rgb(48 48 48 / 50%)}
	
	
	
	
	
	
	
	
	
@media screen and (max-width:790px){
.button-group {
    display: flex;
    gap: 20px;
    margin: 10px;
    justify-content: space-between;
    flex-direction: column-reverse;
    align-items: center;
}

}	
@media screen and (max-width:400px){
.buts-group {
    display: flex;
    gap: 20px;
    margin: 10px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    }

}