@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;}body {    display: flex;    justify-content: center;    align-items: center;    background-position:center;    margin: 0;    background-color: black;    font-family: 'uthman', 'times';}::-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;}.background {    background: url("../../images/askBack.jpg") rgba(0, 0, 0, 0.6);    background-repeat: no-repeat;    background-size: cover;    background-blend-mode: darken;    position: absolute;    position: fixed;    top: 0;    bottom: 0;    left: 0;    right: 0;}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 400px;}.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;}.tight_container {    position: relative;    display: flex;    width:65%;    justify-content: center;    margin: 480px 0 0;}.wide_container {    width:100%;    padding: 40px;    text-align: center;    border-radius: 8px;    background-color: rgba(10, 20, 10, 0.8);    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);    z-index: 1;}.Gman {    position: absolute;    top: -295px;    left: 50%;     transform: translateX(-50%);    width: 280px;    z-index: 2;}.Gman img {    max-width: 100%;    height: auto;}.Gman .shape {    position: absolute;    animation: Updown 3s linear infinite alternate;}@keyframes Updown {    0% { transform: translateY(40px) rotate(0); }    100% { transform: translateY(0) rotate(0.4turn); }}.Gman .Xshape {    width: 26px;    height: 26px;    top: 50px;    right: 45px;}.Gman .Oshape {    width: 22px;    height: 22px;    bottom: 20px;    left: 65px;}.ask {    font-family: 'ejaza';    font-weight: bold;    font-size: 3em;    margin: 50px 0;    background: linear-gradient(to right, #8e44ad, #c0392b);    -webkit-background-clip: text;    -webkit-text-fill-color: transparent;    animation: strike 4.8s ease-in-out infinite;}@keyframes strike {    0% {      text-shadow: 0 0 5px rgba(142, 68, 173, 0.7), 0 0 10px rgba(142, 68, 173, 0.7);    }    16.66% {      text-shadow: 0 0 10px rgba(142, 68, 173, 0.9), 0 0 20px rgba(142, 68, 173, 0.9), 0 0 30px rgba(142, 68, 173, 0.9);    }    33.32% {      text-shadow: 0 0 5px rgba(142, 68, 173, 0.7), 0 0 10px rgba(142, 68, 173, 0.7);    }    66.66% {       text-shadow: 0 0 5px rgba(142, 68, 173, 0.7), 0 0 10px rgba(142, 68, 173, 0.7);    }    100% {      text-shadow: 0 0 5px rgba(142, 68, 173, 0.7), 0 0 10px rgba(142, 68, 173, 0.7);    }  }.grid-list {    list-style: none;    padding: 0;    margin: 0 0 7%;    gap: 40px;    text-align: left;}.summary {    display: flex;    flex-direction: row;    align-items: center;    text-align: justify;    padding: 20px;    margin: 10px 0;    gap: 20px;    transition: all 0.7s ease;}.summary img {    display: block;    width: 32%;    height: 300px;    border-radius: 8px;}.sizing {    flex: 1;}.title {    font-size: 1.5em;    color: #f1c40f;    color: #FFD700;    padding-left: 15px;}.text {    line-height: 2;    font-size: 1.2em;    color: #bdc3c7;    padding: 5px 15px 0;}.separator {    margin: 40px auto;    border: 0;    border-top: 2px dashed #7f8c8d;     width: 95%;    }.grid-list > li:nth-child(even) .summary {flex-direction: row-reverse;}.poem {    width: 65%;    margin: 5px auto;    border-radius: 12px;    border-right: 3px solid #FFD700;    border-left: 3px solid #FFD700;}.bait {    display: flex;    flex-direction: column;    text-align: left;    margin-bottom: 20px;    padding: 0 10px;    font-size: 1.2em;    line-height: 0.8;    color: #bdc3c7;}.bait p:nth-child(even) {    text-align: right;}  .compare {    width: 90%;    max-width: 900px;    margin: 0 auto;    border-collapse: collapse;    border-radius: 12px;    overflow: hidden;    line-height: 1.5;    font-size: 1.2em;}.compare th, .compare td {    padding: 15px 20px;    text-align: center;    border-bottom: 2px dashed rgba(236, 240, 241, 0.5);    width: 33%;    color: #D9EDDF;    }.compare td {    padding: 25px 20px;}.compare thead th {    background-color: #1F404D;    font-weight:     color: #D9EDDF;    }.compare tbody td:nth-child(1) {    font-weight: bold;}.compare tbody tr:nth-child(odd) {    background-color: #4F6F7D;}.compare tbody tr:nth-child(even) {    background-color: #3E5E6C;}.compare tbody tr:hover {    background-color: #2c3e50;    transition: background-color 0.3s ease;}.status-cell .correct {    color: #97DA6B;}.status-cell .incorrect {    color: #F58200;}.compare tbody tr:last-child td {    border-bottom: none;}    .divider {    width: 80%;    height: 2px;    background: linear-gradient(to right, #ccc, #3498db, #ccc);    margin: 50px auto;    border-radius: 5px;    position: relative;}.divider::before, .divider::after {    content: '';    position: absolute;    top: 50%;    transform: translateY(-50%);    width: 10px;    height: 10px;    background-color: #3498db;    border-radius: 50%;}.divider::before {    left: 0;}.divider::after {    right: 0;}.form_cover {    display: flex;    width: 60%;    height: 40vh;    text-decoration: none;    justify-content: center;    align-items: center;    background: linear-gradient( rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),url('../../images/analytic.jpg') no-repeat;    background-size: cover;    background-position: center;    border: 1px solid #3498db;    border-radius: 12px;    margin: 7vh auto 50px;    transition: 0.7s ease;}.form_cover h1 {    font-size: 2em;    font-weight: bold;    color: #CED9E5;    text-shadow: 0 0 10px #000, 0 0 20px rgba(0, 0, 0, 0.3);}.form_cover:hover {    transform: scale(1.05);    opacity: 0.8;}.form_cover:hover h1 {    color: #3498db;}@media (max-width: 1400px) {    .Gman {        width: 260px;        top: -270px;    }    .Gman .Xshape {        width: 22px;        height: 22px;        top: 50px;        right: 40px;    }    .Gman .Oshape {        width: 18px;        height: 18px;        bottom: 20px;        left: 60px;    }    .ask {        margin: 40px 0;    }    .summary {        flex-direction: column;        text-align: center;    }    .summary img {        width: 60%;        height: 340px;        margin-bottom: 15px;    }    .grid-list > li:nth-child(even) .summary {        flex-direction: column;    }    .section-content {        padding: 20px 10px;    }    .title {        padding: 0;    }    .text {        text-align: justify;        line-height: 2.2;        padding: 5px 20px 0;    }    .divider {        margin: 30px auto;        width: 90%;    }    .form_cover {        width: 80%;    }}@media (max-width: 1200px) {    .poem {        width: 75%;    }}@media (max-width: 1130px) {    .summary img {        width: 70%;        height: 300px;    }    .title {        font-size: 1.4em;    }}@media (max-width: 1000px) {    .poem {        width: 80%;    }    .bait p{        width: 100%;    }    .bait p:nth-child(even) {        margin-bottom: 20px;    }    .form_cover {        width: 90%;        height: 30vh;    }}@media (max-width: 950px) {    .tight_container {        width:65%;        margin: 400px 0 0;    }    .Gman {        width: 220px;        top: -230px;    }    .Gman .Xshape {        width: 18px;        height: 18px;        top: 50px;        right: 30px;    }    .Gman .Oshape {        width: 14px;        height: 14px;        bottom: 10px;        left: 50px;    }        .ask {        font-size: 2.6em;    }}@media (max-width: 900px) {    .compare {        width: 100%;        font-size: 1em;    }    .compare th, .compare td {        padding: 5px;    }}@media (max-width: 820px) {    .summary img {        width: 80%;        height: 260px;    }    .title {        font-size: 1.3em;    }    .text {        padding: 5px 0 0;    }}@media (max-width: 770px) {    .tight_container {        width:65%;        margin: 350px 0 0;    }    .Gman {        width: 180px;        top: -187px;    }    .Gman .Xshape {        right: 20px;    }    .Gman .Oshape {        left: 40px;    }    .ask {        margin: 20px 0;    }}@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%;    }    .summary img {        width: 100%;        height: auto;    }    .summary {        padding: 20px 0 0;        margin: 0;        gap: 0;    }    .title {        font-size: 4vw;    }    .text {        font-size: 3.5vw;    }    .form_cover {        width: 100%;    }}@media (max-width: 650px) {    .poem {        width: 95%;        border-right: 1px solid #007bff;        border-left: 1px solid #007bff;    }    .bait {        font-size: 3vw;    }    .compare {        font-size: 1.5vw;    }}@media (max-width: 550px) {    .ask {        font-size: 8vw;    }}@media (max-width: 475px) {    header {        position:absolute;    }    .frontbar {        width: 85%;        font-size: 5vw;        left: 55%;    }    .close_menu {        font-size: 9vw;    }    .Gman {        width: 150px;        top: -157px;    }    .Gman .Xshape {        width: 15px;        height: 15px;        top: 35px;        right: 20px;    }    .Gman .Oshape {        width: 11px;        height: 11px;        bottom: 10px;        left: 35px;    }    .form_cover h1 {        font-size: 6.5vw;    }}