@font-face {    font-family: 'uthman';    src: url('../../fonts/N_uthman.ttf') format('truetype');    font-weight: normal;    font-style: normal;}@font-face {    font-family: 'uthman';    src: url('../../fonts/B_uthman.ttf') format('truetype');    font-weight: bold;    font-style: normal;}@font-face {    font-family: 'ejaza';    src: url('../../fonts/ejaza.ttf') format('truetype');    font-weight: normal;    font-style: normal;}@font-face {    font-family: 'khalid';    src: url('../../fonts/khalid.ttf') format('truetype');    font-weight: bold;    font-style: normal;}@font-face {    font-family: 'times';    src: url('../../fonts/N_times.ttf') format('truetype');    font-weight: normal;    font-style: normal;}@font-face {    font-family: 'times';    src: url('../../fonts/B_times.ttf') format('truetype');    font-weight: bold;    font-style: normal;}::-webkit-scrollbar {  width: 10px;}::-webkit-scrollbar-track {  background-color: #0F1318;}::-webkit-scrollbar-thumb {  background-color: #007063;  border-radius: 8px;}::-webkit-scrollbar-thumb:hover {      background-color: #3F908D;}body {    display: flex;    font-family: 'Traditional Arabic', sans-serif;    justify-content: center;    align-items: center;    min-height: 100vh;    background-image: linear-gradient(to bottom, #00a8ff, #009cff, #008fff, #0081ff, #0072ff);    margin: 0;    box-sizing: border-box;}.main_header {    display: flex;    position: fixed;    top: 0;    right: 0;    width: 100%;    z-index: 999;    padding: 10px;    flex-wrap: wrap;    background-color: rgba(15, 19, 24, 0.8);    justify-content: center;    align-items: center;    box-sizing: border-box;    gap: 10px; }.blocks {    flex: 1;     display: flex;    justify-content: center;    align-items: center;}.rt_block {    color: beige;    font-family: 'ejaza';    font-size: 1.8em;    cursor: pointer;    padding-top: 10px;    order: 1;    transition: color 0.2s, opacity 0.4s ease-in-out, transform 0.4s ease-in-out;}    .rt_block.active {    opacity: 0;    cursor: default;}        .logo {    order: 2;    flex: 0 0 750px;}.logo img {    height: 75px;}    .lt_block {    color: beige;    fill:  beige;    cursor:pointer;    font-size: 18px;    order: 3;}.rtblock:hover, .ltblock:hover {    color: #739A77;    fill:  #739A77;}    details img{    margin-left: 35%;    height: 25px;    width: 50px;}details[open] summary {    border-bottom: 1px solid #aaa;    margin-bottom: .5em;}.menu_bg {    position: fixed;    top: 0;    left: 0;    padding: 0;    margin: 0;    width: 100%;    height: 100%;    background-color: rgba(15, 19, 24, 0.96);    opacity: 0;    visibility: hidden;    transition: opacity 0.4s ease-in-out;    z-index: 30;}.menu_bg.active {    opacity: 1;    visibility: visible;}.frontbar {    position: fixed;    width: 480px;    top: 50%;    left: 50%;    font-size: 1.4em;    font-family: 'khalid';    text-align: center;    visibility: hidden;    opacity: 0;    transform: translate(-50%, -50%) scale(0.8);    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;    z-index: 30;}.frontbar.active {    opacity: 1;    visibility: visible;    transform: translate(-50%, -50%) scale(1);    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;}.close_menu {    font-size: 50px;    font-weight: bold;    color: #E6EFFF;    cursor: pointer;    position: absolute;    top: 0px;    left: 15px;    transition: color 0.2s ease-in-out;}.frontbar .menu-list {    list-style-type: none;    padding-top: 30px;}.frontbar .menu-list li {    margin-bottom: 15px;    padding: 10px 0;}.frontbar .menu-list li a {    display: block;    text-decoration: none;    color: #E6EFFF;        font-weight: bold;    transition: color 0.3s;    padding: 10px;}.frontbar .menu-list li a:hover, .close_menu:hover {    color: #739A77;}.frontbar .menu-list li a.active-page {    color: #739A77;    font-weight: bold;    border-bottom: 2px solid #739A77;}.contact {    width: 480px;    margin: 70px auto 0;    color: #B3CFCD;    font-size: 18px;    font-weight: bold;    text-align: center;    padding: 40px;    border-radius: 12px;    background-color: #306A67;    box-shadow: 0 10px 30px rgba(0,0,0,0.25);    animation: slideIn 0.8s ease-out forwards;    transform: translateX(-50px);    opacity: 0;}@keyframes slideIn {    to { opacity: 1; transform: translateX(0); }}h2 {    font-size: 2.5em;}.row {    display: flex;    margin: 10px 0 0;    gap: 15px;}label {    display: block;    margin: 40px 0 5px;}textarea {    width: 94%;    padding: 14px;    margin: 5px 0 20px;    border: 1px solid #8B8C8C;    border-radius: 8px;    font-size: 0.9em;    line-height: 1.8;    font-family: 'uthman', 'times';    transition: border-color 0.3s ease, box-shadow 0.3s ease;    resize: none;    min-height: 300px;    background-color: #649E9A;    }textarea:focus {    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);    outline: none;}button {    width: 100%;    font-size: 1.2em;    font-weight: bold;    color: white;    background-color: #79B5BD;    padding: 16px 30px;    margin-bottom: 20px;    border: none;    border-radius: 8px;    cursor: pointer;    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;}button:hover {    background-color: #56BF80;    transform: translateY(-3px);    box-shadow: 0 8px 15px rgba(40, 167, 69, 0.3);}a {    color: #B0ECE8;    text-decoration: none;    font-weight: bold;    transition: color 0.3s ease;}a:hover {    opacity: 0.9;    text-decoration: underline;}.sent {    display: flex;    width: 100%;    min-height: 100vh;    margin: 0;    font-family: 'Cairo', sans-serif;    justify-content: center;    align-items: center;    background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);}.sent .contact {    animation: fadePop 0.7s ease-out forwards;    transform: scale(0.9);}@keyframes fadePop {    to { opacity: 1; transform: scale(1); }}.sent h2 {    color: #9EF6AB;    margin-bottom: 20px;}p {    font-size: 1.2em;    color: #ECFDFB;    line-height: 1.7;    margin-bottom: 30px;}@media (max-width: 700px) {    .logo {        flex: 0 0 100%;        order: 1 ;    }    .rt_block, .lt_block {        flex: unset;         order: 2;        min-width: 120px;    }    .frontbar {        width: 65%;    }}@media (max-width:600px){    .contact{        width: 70%;    }    .row{        font-size: 4vw;        flex-direction: column;        word-wrap: break-word;    }    textarea {        width: 90%;    }}@media (max-width: 475px) {        .main_header {        position:absolute;    }    .rtblock {         font-size: 5.5vw;    }     .ltblock {         font-size: 3vw;    }    .frontbar {        width: 85%;        font-size: 5vw;        left: 55%;    }    .close_menu {        font-size: 9vw;    }    h2{        font-size: 7vw;    }    p, button{        font-size: 4vw;    }}