@font-face {    font-family: 'arabic';    src: url('img&font/normal_arabic.woff2') format('truetype');    font-weight: normal;    font-style: normal;}@font-face {    font-family: 'arabic';    src: url('img&font/bold_arabic.woff2') format('truetype');    font-weight: bold;    font-style: normal;}@font-face {    font-family: 'Emoji';    src: url('img&font/Noto_Emoji.woff2') format('truetype');    font-weight: normal;    font-style: normal;}html {    font-size: 24px;}body {    margin: 0;    padding: 0;    background-color: #0F1318;    justify-content: center;    align-items: center;    box-sizing: border-box;    overflow-x: hidden;    background-image:         linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)),        url('img&font/body_bg.jpg');    background-size: cover;    background-position: center;    background-attachment: fixed;    font-family: 'arabic';    font-display: swap;    scroll-behavior: smooth; }::-webkit-scrollbar {  display: none;}header {    position: absolute;    display: flex;    top: 0;    right: 0;    width: 100%;    z-index: 999;    padding: 10px;    flex-wrap: wrap;    background-color: rgba(0, 0, 0, 0.08);    justify-content: center;    align-items: center;    box-sizing: border-box;    gap: 10px; }.blocks {    flex: 1;     display: flex;    justify-content: center;    align-items: center;    text-decoration: none;}.blocks i {    font-size: 1.2em;    font-style: normal;    font-family: 'Emoji';    margin-left: 5px;} .lt_block {    color: #bda5ad;    font-size: 1.1em;    cursor:pointer;    order: 3;    transition: color 0.2s;}.rt_block {    color: #bda5ad;    font-size: 1.1em;    cursor: pointer;    order: 1;    transition: color 0.2s;}.rt_block:hover, .lt_block:hover {    color: #d8f3ff;}     .logo {    order: 2;    flex: 0 0 450px;}.logo img {    height: 75px;    filter: contrast(50%);}   .main {    display: flex;    width: 100%;    height: 100vh;    top: 0;    right: 0;    flex-direction: column;    justify-content: center;    align-items: center;    background-color: #0F1318;    background: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)),url('img&font/moon-flower-ai-generated-image-750x420.png') no-repeat;    background-size: cover;    background-position: center;    font-weight: bold;}.main h1 {    /*font-size: clamp(3rem, 10vw, 6rem);*/    font-size: 3em;    color: #ECF5CE;    text-shadow: 0 0 10px #000, 0 0 20px rgba(0, 0, 0, 0.3);    margin: -50px  0 0;    opacity: 0;    animation: fadeInDown 1s ease-out forwards;}.main h2 {    color: #C1D297;    font-size: 2.5em;    margin-top: 10px;    text-shadow: 0 0 10px #A9AD9B, 0 0 10px rgba(0, 0, 0, 0.6);    opacity: 0;    animation: fadeInDown 1s ease-out forwards;}@keyframes fadeInDown {    from { opacity: 0; transform: translateY(-30px); filter: blur(10px); }    to { opacity: 1; transform: translateY(0); filter: blur(0); }}.arrow {    position: absolute;    bottom: 30px;    left: 50%;    transform: translateX(-50%);    cursor: pointer;    z-index: 10;    animation: bounce 3s infinite;    transition: 0.3s;}.arrow:hover {    filter: drop-shadow(0 0 10px #fff);}.arrow svg {    fill: #ECF5CE;    width: 40px;    height: 40px;}@keyframes bounce {    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }    40% { transform: translateX(-50%) translateY(-10px); }    60% { transform: translateX(-50%) translateY(-5px); }}.story {    display: flex;    width: 55%;    padding: 25px;    border-radius: 25px;    margin: 10vh auto;    background: linear-gradient(135deg, rgba(18, 31, 50, 0.1) 0%, rgba(163, 207, 205, 0.1) 100%);        backdrop-filter: blur(8px);    box-sizing: border-box;    transition: all 0.3s;}.story_item {    display: flex;    align-items: center;}.pic {    height: 300px;    width: 300px;    flex-shrink: 0;    border-radius: 20px;    background-color: transparent;    box-shadow: 4px 1px 20px 1px rgba(153, 186, 226, 0.2);    margin-right: -10%;}.pic img {    width: 100%;    height: 100%;    object-fit: cover;    border-radius: 20px;}.story_item h3 {    font-size: 1.2em;    font-weight: bold;    line-height: 1;    color: #99bae2;    margin-bottom: 20px;/*    margin-right: -10%;*/    text-align: center;}.story_item h4 {    font-size: 1em;    font-weight: normal;    line-height: 2;    color: white;    padding: 0 22px;    margin-bottom: 30px;    text-align: justify;}    .frame {    width: 68%;    border: 3px double #506484;    margin: 40px auto;    padding: 40px 20px;    border-radius: 20px;    text-align: center;    backdrop-filter: blur(8px);}.frame_title {    position: relative;    display: block;    padding: 20px 50px;    text-align: center;    border-bottom: 2px solid #506484;}.frame_title h3 {    font-size: 1.8em;    color: #98accf;    margin: 0;    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);}.frame_title::after {    position: absolute;    content: '';    width: 100%;    right: 0;    margin-top: 15px;    border-bottom: 2px dashed #506484;}.frame_item {    display: flex;    align-items: center;    gap: 40px;    padding: 60px;}.frame_item:nth-child(even) {    flex-direction: row-reverse;}.frame_text {    flex: 1;}.frame_text h4 {    font-size: 1.2em;    line-height: 2.5;    text-align: justify;    color: #99bae2;}.frame_pic {    flex: 1;}.frame_pic img {    width: 100%;    aspect-ratio: 4 / 2;    object-fit: cover;    border-radius: 10px;}:root {      --plyr-color-main: #6366f1;  }.video-container {    width: 79%;    margin: 40px auto;    direction: ltr;    border-radius: 12px;    overflow: hidden;    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);    position: relative;     z-index: 1;}.services {    display: flex;    flex-wrap: wrap;    margin: 60px 0;    gap: 80px;    justify-content: center;    padding: 20px;}.services_box {    position: relative;    display: flex;    width: 460px;    padding: 15px;    border-radius: 4px;    border-right: 5px solid #4b5f7f;    box-sizing: border-box;     background-color: rgba(163, 207, 205, 0.1);    backdrop-filter: blur(20px);    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);    cursor: pointer;    gap: 10px;     transition: transform 0.3s ease;}.services_box:hover {    transform: translateY(5px);}.services_box span {    direction: ltr;    position: absolute;    top: 0;    left: 0;    background-color: #2d4361;    color: #fff3f9;    padding: 6px 14px;    font-size: 0.8em;    font-weight: bold;    border-radius: 4px;    box-shadow: 0 3px 6px rgba(0,0,0,0.25);    clip-path: polygon(0% 0%, 75% 0%, 100% 47%, 78% 100%, 0% 100%);}.frame_text h5 {    font-size: 1em;    color: #cfe3ff;    margin: 0 0 10px 0;}.frame_text h6 {    font-size: 1em;    color: #889cbe;    line-height: 1.4;    margin: 0;}.services_box img {    margin: 0 auto;    width: 150px;    height: 150px;    object-fit: contain;    border-radius: 4px;    flex-shrink: 0;}.container-img {    width: 100%;    height: 100%;    object-fit: cover;    border-radius: 6px;}.services_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('img&font/p8.jpg') no-repeat;    background-size: cover;    background-position: center;    border: 1px solid #506484;    border-radius: 12px;    margin: 7vh auto 50px;    transition: 0.7s ease;}.services_cover h1 {    font-size: 2em;    font-weight: bold;    color: #889cbe;    text-shadow: 0 0 10px #000, 0 0 20px rgba(0, 0, 0, 0.3);}.services_cover:hover {    transform: scale(1.05);    opacity: 0.8;}.services_cover:hover h1 {    color: #cfe3ff;}@media (max-width: 1300px) {    .story {        margin: 25vh auto 10vh;    }    .story_item {        flex-direction: column;    }    .pic {        margin: -180px 0 30px;        padding: 0;        width: 90%;    }    .frame_item, .frame_item:nth-child(even) {        flex-direction: column;        gap: 5px;        padding: 15px;    }    .frame_text {        flex: unset;        width: 90%;}    .frame_pic  {        flex: unset;        width: 90%;    }    .frame_pic img {        aspect-ratio: unset;    }}@media (max-width: 1100px) {    html {        font-size: 20px;    }}@media (max-width: 1000px) {    .story {        width: 70%;    }    .services_cover {        width: 90%;    }    .logo {        flex: 0 0 250px;    }}@media (max-width: 730px) {    .services_box {        flex-direction: column-reverse;    }    header {        flex-direction: column;        height: auto;        padding-bottom: 0;    }    .header_block {        display: flex;        width: 100%;        order: 1;        flex-direction: row;        justify-content: center;     }    .logo {        width: 100%;        order: -1;        flex: unset;        margin-bottom: 0;        padding-bottom: 0;        margin: 10px 0 -10px;    }    .logo img {        max-width: 100px;        max-height: 75px;    }    .blocks {        flex: unset;         width: 100%;         margin: 5px 0;         order: 0;    }}