@font-face {
    font-family: 'BNazanin';
    src: url('/fonts/BNazanin.woff') format('woff'),
    url('/fonts/BNazanin.woff2') format('woff2'),
         url('/fonts/BNazanin.eot') format('eot'),
         url('/fonts/BNazanin.ttf') format('truetype');
  }

body {
    background-color: #019ba5;
    font-family: 'BNazanin', Arial, sans-serif;
    margin: 2%;
    padding: 2%;
    margin-bottom: 12%;
    /*background-color: #f4f4f4;*/
    direction: rtl;
    text-align: right;
}

img {
    width: 70%;
    mix-blend-mode: normal;
    background-color: transparent;
    display:block;
    /* margin-top: -10%; */
    /*margin-bottom: -2%;*/
    /*margin-right:auto;*/
    /*margin-left:auto;*/
    margin:auto;
    }

h1 {
    font-family: "BNazanin";
    font-weight: bold;
    color: #322d35d3;
    text-align: center;
    font-size: 250%;
    margin-bottom: -3%;
    margin-top: 5%;
    color:#fff;
    text-shadow: 0.8px 1.5px 3px rgba(0, 0, 0, 1);
}

.button-container {
    display:grid;
    grid-template-columns:23% 23% 23% 23%;
    /* background-color: #2196F3; */
    /* padding: 50px; */
    margin-right: 10%;
    margin-left: 10%;
    margin-top: 10%;
    row-gap: 2%;
    column-gap: 4%;
    justify-content:center;
    flex-direction: column;
    align-items: center;
    }

.icon-button {
    /*border: 0.7px solid rgba(189, 189, 189, 0.452);*/
    border: 0.7px solid #c5c4c498;
    border-radius: 10%;
    text-align: center;
    display:inline-block;
    text-decoration:none;
    transition: transform 0.3s ease, box-shadow 20s ease;
    box-shadow: 0px 8px 15px rgba(37, 37, 37, 0.521);
    cursor:pointer;
    background-color: #80a3a87a;
}


.icon-button span {
    position: relative;
    /*font-family:"b_titrbold";*/
    font-weight: bold;
    display: block;
    margin-top: 5%; /* Space between image and text */
    color: #000000; /* Text color */
    font-size: 150%; /* Font size */
    text-align: center;
    margin-bottom: 8%;
    }

.icon-button img {
    width: 90%;
    height: 90%; 
    /* border-radius: 10px; */
    transition: transform 0.3s ease;
    /* mix-blend-mode:multiply; */
    background-color: transparent;
    margin-top: 5%;
    /* border:solid 3px ; */
    /* border-color: #520072; */
    }

.icon-button:hover {
    transform: scale(1.05); 
    /* border-color: #5108c5d5; */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    }
    
@media (min-width: 600px) and (max-width: 1024px) {
    
    body{
        margin-bottom:15%;
    }
    
    .button-container {
    /*grid-template-columns:30% 30% 30%;*/
    }
    
    .icon-button span {
        font-size: 110%; /* Adjust this value as needed */
    }
    
    .icon-button span:lang(en) {
        font-size: 110%; /* Adjust this value as needed */
    }
    
    h1 {
        font-size: 190%; /* Adjust this value as needed */
    }
}

@media (max-width: 600px) {
    body{
        margin-bottom:50%;
    }
    .button-container {
    grid-template-columns:40% 40%;
    column-gap: 6%;
    }
    
    .icon-button span {
        font-size: 110%; /* Adjust this value as needed */
    }
    
    .icon-button span:lang(en) {
        font-size: 110%; /* Adjust this value as needed */
    }
    
    h1 {
        margin-top:7%;
        font-size: 180%; /* Adjust this value as needed */
    }
}