mg_uper.contacts-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.contact-item {
    min-width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
}

.contact-info {
    max-width: calc(100% - 46px);
    width: calc(100% - 46px);
}

       .contact-info :is(.contact-link, time, address) {
        color: var(--white2);
        font-size: var(--fs7);
    }

    .contact-info address { font-style: normal; }

.contact-title {
    color: var(--light-gray70);
    font-size: var(--fs8);
    text-transform: uppercase;
    margin-bottom: 2px;
}

.social-list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    padding-bottom: 4px;
    padding-left: 7px;
}

.social-item .social-link {
    color: var(--light-gray70);
    font-size: 18px;
}

    .social-item .social-link:hover { color: var(--light-gray); }

/*NAVBAR*/

.navbar {
  display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: hsla(240, 1%, 17%, .75);
    backdrop-filter: blur(10px);
    border: 1px solid var(--jet);
    border-radius: 12px 12px 0 0;
    box-shadow: var(--shadow2);
    z-index: 5;
}

.navbar-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
}
.navbar-item{
  margin: 0 8px;
}
.navbar-link {
    color: var(--light-gray);
    font-size: var(--fs8);
    padding: 20px 7px;
    transition: color var(--transition1);
}

    .navbar-link:hover, .navbar-link:focus { color: var(--light-gray70); }
    .navbar-link.active { color: var(--orange-yellow-crayola); }

/*ABOUT*/

.about .article-title { 
    margin-bottom: 15px;
    margin-top: 15px;
}

.about-text {
    color: var(--white2);
    font-size: var(--fs6);
    font-weight: var(--fw300);
    line-height: 1.6;
    z-index: 2;
    position: relative;
}

    .about-text p { 
        text-align: justify;
        padding-left: 10px;
        padding-right: 10px;
     }

/*RESUME*/

.article-title { margin-bottom: 30px; }

.timeline { margin-bottom: 30px; }

    .timeline .title-wrapper {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 25px;
    }

.timeline-list {
    font-size: var(--fs6);
    margin-left: 12px;
}

    .timeline-list span {
        color: var(--vegas-gold);
        font-weight: var(--fw400);
        line-height: 1.6;
    }

.timeline-item {
  position: relative; 
  margin-right: 3rem;
}

    .timeline-item:not(:last-child) { margin-bottom: 20px; }
        .timeline-item:not(:last-child)::before {
            content: '';
            position: absolute;
            top: -10px;
            right: -30px;
            width: 1px;
            height: calc(100% + 128px);
            background: var(--jet);
        }

    .timeline-item::after {
        content: '';
        position: absolute;
        top: 5px;
        right: -33px;
        height: 6px;
        width: 6px;
        border-radius: 50%;
        background: var(--text-gradient-yellow);
        box-shadow: 0 0 0 4px var(--jet);
    }

.timeline-item-title {
    font-size: var(--fs6);
    line-height: 1.3;
    margin-bottom: 7px;
}
mark {
    background: rgba(255, 255, 255, 0.15); /* شفافية خفيفة */
    padding: 4px 10px;
    border-radius: 20px; /* يجعل الشكل بيضاويًا */
    font-weight: bold;
    display: inline-block; /* يحافظ على الشكل الدائري حول النص */
    color: var(--white2);
}
.highlight {
    background: linear-gradient(transparent 40%,  40%);
    padding: 2px 4px;
    display: inline-block;
}

.timeline-text {
    color: var(--light-gray);
    font-weight: var(--fw300);
    line-height: 1.6;
    text-align: justify;
}
.prime_img{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 1rem 0 0;
  margin-right: -1.6rem;
}
.prime_img img{
  width: 160px;
}
/*SKILLS*/

.skills-title { margin-bottom: 20px; }

.skills-list { padding: 20px; }

.skills-item:not(:last-child) {margin-bottom: 15px; }

.skill .title-wrapper {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
}

    .skill .title-wrapper data {
        color: var(--light-gray);
        font-size: var(--fs7);
        font-weight: var(--fw300);
    }

.skills-progress-bg {
    background: var(--jet);
    width: 100%;
    height: 8px;
    border-radius: 10px;
}

.skills-progress-fill {
    background: var(--text-gradient-yellow);
    height: 100%;
    border-radius: inherit;
}

/*PORTFOLIO*/

.filter-list { display: none; }

.filter-select-box { 
    position: relative;
    margin-bottom: 25px;
}

.filter-select {
    background: var(--eerie-black2);
    color: var(--light-gray);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--jet);
    border-radius: 14px;
    font-size: var(--fs6);
    font-weight: var(--fw300);
}

    .filter-select.active .select-icon { transform: rotate(0.5turn); }

.select-list {
    background: var(--eerie-black2);
    position: absolute;
    top: calc(100% + 6px);
    width: 100%;
    padding: 6px;
    border: 1px solid var(--jet);
    border-radius: 14px;
    z-index: 9999;
    visibility: hidden;
    pointer-events: none;
    transition: 0.1s ease-in-out;
}

    .filter-select.active + .select-list {
        opacity: 1;
        visibility: visible;
        pointer-events: all;
    }

.select-item button {
    background: var(--eerie-black2);
    color: var(--light-gray);
    font-size: var(--fs6);
    font-weight: var(--fw300);
    text-align: right;
    width: 100%;
    padding: 8px 40px 0 0;
    border-radius: 8px;
}
.navbar-link::before {
    content: "✧"; /* يمكنك تغييره لأي رمز سهم آخر */
    position: relative;
    right: -16px; /* يتحكم في بعد السهم عن الحافة اليسرى */
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--fs6);
    color: var(--light-gray);
}

    .select-item button:hover { --eerie-black2: hsl(240, 2%, 20%); }

.project-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 10px;
}

.project-item {
  display: none; 
  border-bottom: 1px dashed #444;
  border-radius: 20px;
  padding: 4px 8px 16px;
}

    .project-item.active {
        display: block;
        animation: scaleUp .25s ease forwards;
    }

        @keyframes scaleUp {
            0% { transform: scale(0.5); }
            100% { transform: scale(1); }
        }

    .project-item > a { width: 100%; }

.project-img {
    position: relative;
    width: 100%;
    height: 200px;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 15px;
}

    .project-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: var(--transition1);
    }

    .project-img::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: transparent;
        z-index: 1;
        transition: var(--transition1);
    }

        .project-item > a:hover img { transform: scale(1.1); }

        .project-item > a:hover .project-img::before { background: hsla(0, 0%, 0%, .5); }

.project-item-icon-box {
    --scale: .8;

    background: var(--jet);
    color: var(--orange-yellow-crayola);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(var(--scale));
    font-size: 20px;
    padding: 18px;
    border-radius: 12px;
    opacity: 0;
    z-index: 1;
    transition: var(--transition1);
}

    .project-item > a:hover .project-item-icon-box {
        --scale: 1;
        opacity: 1;
    }

    .project-item-icon-box ion-icon { --ionicon-stroke-width: 50px; }

.project-title, .project-category { margin-left: 10px; }

    .project-title {
        color: var(--white2);
        font-size: var(--fs5);
        font-weight: var(--fw400);
        text-transform: capitalize;
        line-height: 1.3;
    }

    .project-category {
        color: var(--light-gray);
        font-size: var(--fs6);
        font-weight: var(--fw300);
    }

/*BLOG*/

.blog-posts { margin-bottom: 10px; }

.blog-posts-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 190px;
}

.blog-posts-item > a {
    position: relative;
    background: var(--border-gradient-onyx);
    height: 100%;
    box-shadow: var(--shadow4);
    border-radius: 16px;
    z-index: 1;
}

    .blog-posts-item > a::before {
        content: '';
        position: absolute;
        inset: 1px;
        border-radius: inherit;
        background: var(--eerie-black1);
        z-index: -1;
    }

.blog-banner-box {
    width: 100%;
    height: 200px;
    border-radius: 12px;
    overflow: hidden;
}

    .blog-banner-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: var(--transition1);
    }

.blog-content { padding: 15px; }

.blog-meta {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
}

    .blog-meta :is(.blog-category, time) {
        color: var(--light-gray70);
        font-size: var(--fs6);
        font-weight: var(--fw300);
    }

    .blog-meta .dot {
        background: var(--light-gray70);
        width: 4px;
        height: 4px;
        border-radius: 4px;
    }

.blog-item-title {
    margin-bottom: 10px;
    line-height: 1.3;
    transition: var(--transition1);
}

    .blog-post-item > a:hover .blog-item-title { color: var(--orange-yellow-crayola); }

.blog-text {
    color: var(--light-gray);
    font-size: var(--fs6);
    font-weight: var(--fw300);
    line-height: 1.6;
    text-align: justify;
}

/*setting*/
 .setting_section {
            background: var(--artic_bg);
            padding: 20px;
            border-radius: 10px;
            display: inline-block;
            box-shadow: 0px 16px 30px hsla(0, 0%, 0%, .25);
            width: 100%;
        }
        .setting_button_section {
          display: flex;
          flex-direction: column;
          gap: 0;
          
        }
        .setting_button {
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-direction: space-between;
          width: 16rem;
            padding: 16px 20px;
            margin: 10px;
            font-size: 16px;
            border: 1px solid var(--jet);
            cursor: pointer;
            border-radius: 5px;
            transition: 0.3s;
            background: var(--artic_bg); 
            color: var(--white2);
            
        }
/*CONTACT*/


.contact-form { margin-bottom: 10px; }
.form-btn {
    position: relative;
    width: 100%;
    background: var(--border-gradient-onyx);
    color: var(--orange-yellow-crayola);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 13px 20px;
    border-radius: 14px;
    font-size: var(--fs6);
    text-transform: capitalize;
    box-shadow: var(--shadow3);
    z-index: 1;
    transition: var(--transition1);
}
    .form-btn::before {
        content: '';
        position: absolute;
        inset: 1px;
        background: var(--bg-gradient-jet);
        border-radius: inherit;
        z-index: -1;
        transition: var(--transition1);
    }
    .form-btn:hover { background: var(--bg-gradient-yellow1); }
.form-title { margin-bottom: 20px; }

.input-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    margin-bottom: 25px;
}

.form-input {
    color: var(--white2);
    font-size: var(--fs8);
    font-weight: var(--fw400);
    padding: 13px 20px;
    border: 1px solid var(--jet);
    border-radius: 14px;
    outline: none;
}

    .form-input::placeholder { font-weight: var(--fw500); }
    .form-input:focus { border-color: var(--orange-yellow-crayola); }
        .form-input:focus:invalid { border-color: var(--bittersweet-shimmer); }

textarea.form-input {
    min-height: 100px;
    height: 120px;
    max-height: 200px;
    resize: vertical;
}


/*MEDIA QUERIES*/

@media (min-width: 450px) {

    .project-img, .blog-banner-box { height: auto; }
}

@media (min-width: 580px) {
    :root {
        --fs1: 32px;
        --fs2: 24px;
        --fs3: 26px;
        --fs4: 18px;
        --fs6: 15px;
        --fs7: 15px;
        --fs8: 12px;
    }

    .sidebar, article {
        width: 520px;
        margin-inline: auto;
        padding: 30px;
    }

    .article-title {
        font-weight: var(--fw600);
        padding-bottom: 15px;
    }

        .article-title::after {
            width: 40px;
            height: 5px;
        }

    .icon-box {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        font-size: 18px;
    }

    main {
        margin-top: 60px;
        margin-bottom: 100px;
    }

    .sidebar {
        max-height: 180px;
        margin-bottom: 30px;
    }

        .sidebar.active { max-height: 584px; }

    .sidebar-info { gap: 25px; }

    .avatar-box { border-radius: 30px; }
    .logo {
    border-radius: 520px;
    width:80px
}
.avatar-box-cover{
  position: absolute;
  top: -6px;
  left: 82px;
  width:96px
}

    .info-content .name {
      margin-right: -1rem;
      margin-top: 38px; }
      .home_bagdes_continer {
        position: absolute;
        right: -12px;
        margin-top: 1rem;
      }
    .info-content .title { padding: 5px 10px; }

    .info-more-btn {
        top: -30px;
        right: -30px;
        padding: 10px 15px;
    }

        .info-more-btn span {
            display: block;
            font-size: var(--fs8);
        }

        .info-more-btn i {display: none; }

    .separator { margin: 32px 0; }

    .contacts-list { gap: 20px; }

    .contact-info {
        max-width: calc(100% - 64px);
        width: calc(100% - 64px);
    }

    .navbar { border-radius: 20px 20px 0 0; }

    .navbar-list { gap: 20px; }
    .navbar-link { --fs8: 14px; }

    .about .article-title { margin-bottom: 20px; }
    .about-text { margin-bottom: 40px; }

    .testimonials-title { margin-bottom: 25px; }

    .testimonials-list {
        gap: 30px;
        margin: 0 -30px;
        padding: 30px;
        padding-bottom: 35px;
    }

    .content-card {
        padding: 30px;
        padding-top: 25px;
    }

    .testimonials-avatar-box {
        transform: translate(30px, -30px);
        border-radius: 28px;
    }

    .clients-list {
        gap: 25px;
        margin: 0 -30px;
        padding: 45px;
        scroll-padding-inline: 45px;
    }

    .timeline-list { margin-left: 65px; }

    .timeline-item:not(:last-child)::before { left: -40px; }

    .timeline-item::after {
        height: 8px;
        width: 8px;
        left: -43px;
    }

    .skills-item:not(:last-child) { margin-bottom: 25px; }

    .project-img, .blog-banner-box { border-radius: 16px; }

    .blog-posts-list { gap: 30px; }

    .blog-content { padding: 25px; }

    .input-wrapper {
        gap: 30px;
        margin-bottom: 30px;
    }

    .form-input { padding: 15px 20px; }

    textarea.form-input { margin-bottom: 30px; }
}

@media (min-width: 768px) {

    .sidebar, article { width: 700px; }

    .has-scrollbar::-webkit-scrollbar-button { width: 100px; }

    .contacts-list {
        grid-template-columns: 1fr 1fr;
        gap: 30px 15px;
    }

    .navbar-link { --fs8: 15px; }
    .article-title { padding-bottom: 20px; }
    .filter-select-box { display: none; }
    .filter-list {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 25px;
        padding-left: 5px;
        margin-bottom: 30px;
    }
    .filter-item button {
        color: var(--light-gray);
        font-size: var(--fs5);
        transition: var(--transition1);
    }
        .filter-item button:hover { color: var(--light-gray70); }
        .filter-item button.active { color: var(--orange-yellow-crayola); }

    .project-list, .blog-posts-list { grid-template-columns: 1fr 1fr; }

    .input-wrapper { grid-template-columns: 1fr 1fr; }
}
.sidebar_banner{
  display: none;
}
@media (min-width: 1024px) {
      :root {
        --shadow1: -4px 8px 24px hsla(0, 0%, 0%, .125);
        --shadow2: 0px 16px 30px hsla(0, 0%, 0%, .125);
        --shadow3: 0px 16px 40px hsla(0, 0%, 0%, .125);
    }
    .pc_hr{
      display: none;
    }
    .project-list { grid-template-columns: repeat(3, 1fr); }
    .blog-banner-box { height: 230px; }
    body::-webkit-scrollbar { width: 20px; }
    body::-webkit-scrollbar-track { background: var(--body_bg); }
    body::-webkit-scrollbar-thumb {
        border: 5px solid var(--body_bg);
        background: hsla(0, 0%, 100%, .1);
        border-radius: 20px;
        box-shadow: inset 1px 1px 0 hsla(0, 0%, 100%, .11), inset -1px -1px 0 hsla(0, 0%, 100%, .11);
    }
    body::-webkit-scrollbar-thumb:hover { background: hsla(0, 0%, 100%, .15); }
    body::-webkit-scrollbar-button { height: 60px; }
    .navbar {
        position: absolute;
        bottom: auto;
        top: 0;
        left: auto;
        right: 0;
        width: max-content;
        border-radius: 0 20px;
        padding: 0 20px;
        box-shadow: none;
    }
    .navbar-list {
        gap: 30px;
        padding: 0 20px;
    }
    .navbar-link { font-weight: var(--fw500); }
    .sidebar {
        min-width: 300px;
        box-shadow: var(--shadow5);
    }
    main {
        max-width: 1000px;
        margin-inline: auto;
        display: flex;
        justify-content: center;
        align-items: stretch;
        gap: 25px;
    }
    .main-content {
        min-width: 75%;
        width: 75%;
        margin: 0;
    }
    .content{
      display: flex;
      flex-direction: row;
      gap: 1rem;
    }
    .sidebar {
        position: sticky;
        top: 60px;
        max-height: max-content;
        height: 100%;
        margin-bottom: 0;
        padding-top: 60px;
        z-index: 1;
    }
    .sidebar_banner{
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      height: 100px;
      width: 100% ;
    }
    
    .sidebar::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--rr);
    background-size: 100% 40px; 
    background-position: right;
    background-repeat: no-repeat;
    filter: blur(0);
    z-index: -1;
}

    .sidebar-info { flex-direction: row; }

    .info-content .name {
        white-space: nowrap;
        text-align: center;
        font-size: 17px;
    }
    .info-content .title { margin: auto; }
    .info-more-btn { display: none; }
    .sidebar-info-more {
        opacity: 1;
        visibility: visible;
    }
          .sidebar-info-more_hr_pc{
        margin-top: 2rem;
      }

  .contacts-list { grid-template-columns: 1fr; }
    .contact-info :is(.contact-link) {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .contact-info :is(.contact-link, time, address) {
        --fs7: 14px;
        font-weight: var(--fw300);
    }
    .separator:last-of-type {
        margin: 15px 0;
        opacity: 0;
    }
    .social-list { justify-content: center; }
    .timeline-text { max-width: 700px; }
    .border{
      width: 300px;
    }
    .bmo{
      left: -310px;
    }
    .check{
  font-size: 16px;
  color: #009EF7;
  padding: 0;
  margin: 6px 4px 0;
}

}
hr {
  border: none;
  height: 1px;
  background-color: transparent;
  position: relative;
  width: 60%;
  margin: 6rem auto;
}

hr:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  background: radial-gradient(circle, #ff4500, transparent);
  top: -1px;
  left: 0;
}

/* tech stack */
.stack_cont{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}
.laung{
  padding: 1.2rem;
  border: 1px solid #333;
  border-radius: 8px;
  position: relative; /* حتى يتم تمركز التسمية داخلها */
    display: inline-block;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.laung:hover {
    transform: scale(1.1); /* رفع الأيقونة قليلاً */
}
.laung img{
  width: 96px;
  height: 96px;
}
.svg-label {
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    white-space: nowrap;
    display: none;
    left: 50%;
    transform: translateX(-50%);
    top: -40px; 
}
.mg_uper{
  margin-top: 64px;
}
.exp{
  max-width: 400px;
  width: 100%;
}
.btn {
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.btn {
  --primary-color: #eee;
  --hovered-color: #ededed;
  position: relative;
  display: flex;
  font-weight: 600;
  font-size: 20px;
  gap: 0.5rem;
  align-items: center;
  text-align: left;
  direction: rtl;
}

.btn p {
  margin: 0;
  position: relative;
  font-size: 16px;
  color: var(--primary-color);
}

.btn::after {
  position: absolute;
  content: "";
  width: 0;
  right: 0;
  bottom: -7px;
  background: var(--hovered-color);
  height: 2px;
  transition: 0.3s ease-out;
}


.btn:hover::after {
  width: 100%;
}

.btn:hover p::before {
  width: 100%;
}

.btn:hover svg {
  transform: translateX(-4px);
  fill: var(--hovered-color);
}

.btn svg {
  fill: var(--primary-color);
  transition: 0.2s;
  position: relative;
  width: 25px;
  transition-delay: 0.2s;
}
/
.btn2{
  padding: 0.6rem 1rem;
  border: 1px dashed #ede;
  border-radius: 20px;
  color: var(--white2);
  text-align: center;
}
/*
.banner {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;

}
.banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url(bg.jpg);
    background-size: cover;
    background-position: center;
    z-index: 0;
    mask-image: url(ink_lv2.gif);
    mask-size: cover;
    mask-position: center;
}
*/

        .book {
  width: 200px;
  height: 300px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(-30deg);
  transition: 1s ease;
  animation: 1s ease 0s 1 initAnimation;
  margin: 1rem 0 2rem;
}
.book-container {
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 600px;
}
.book-container:hover .book, 
.book-container:focus .book {
  transform: rotateY(0deg);
}
.book > :first-child {
  position: absolute;
  top: 0;
  left: 0;
  background-color: red;
  width: 200px;
  height: 300px;
  transform: translateZ(15px);
  background-color: #01060f;
  border-radius: 0 2px 2px 0;
  box-shadow: 5px 5px 20px #666;
}
.book::before {
  position: absolute;
  content: ' ';
  background-color: blue;
  left: 0;
  top: 1px;
  width: 28px;
  height: 298px;
  transform: translateX(184px) rotateY(90deg);
  background: linear-gradient(90deg, 
    #fff 0%,
    #f9f9f9 5%,
    #fff 10%,
    #f9f9f9 15%,
    #fff 20%,
    #f9f9f9 25%,
    #fff 30%,
    #f9f9f9 35%,
    #fff 40%,
    #f9f9f9 45%,
    #fff 50%,
    #f9f9f9 55%,
    #fff 60%,
    #f9f9f9 65%,
    #fff 70%,
    #f9f9f9 75%,
    #fff 80%,
    #f9f9f9 85%,
    #fff 90%,
    #f9f9f9 95%,
    #fff 100%
    );
}
.book::after {
  position: absolute;
  top: 0;
  left: 0;
  content: ' ';
  width: 200px;
  height: 300px;
  transform: translateZ(-15px);
  background-color: #01060f;
  border-radius: 0 2px 2px 0;
  box-shadow: -10px 0 50px 10px #666;
}
.book_section{
  padding:  1rem;
  width: 100%;
  border: 2px dashed #666;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background-color: #111;
  margin: 1.2rem 0 0;
}
.book_title{
  font-family: "Ruwudu", sans-serif;
  font-size: 1.6rem;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  width: 100%;
  padding: 1rem 8px;
  border: 2px dashed #666;
  color: #efefef;
  text-align: center;
}
.book_text{
  font-family: "Zain", sans-serif;
  font-weight: 900;
  font-size: 1.2rem;
  line-height: 1.4;
  color: #888;
  width: 100%;
  padding: 1rem 8px;
  border: 2px dashed #666;
  text-align: center;
}
.book_link{
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  width: 100%;
  padding: 1rem 8px;
  border: 1px dashed #444;
  text-align: center;
  background-color: hsl(45, 100%, 71%);
  color: black;
}
/* my acount */
.my_acount{
  
}
.card {
  position: relative;
  width: 19em;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  color: white;
  font-family: Montserrat;
  font-weight: bold;
  padding: 1em 2em 1em 1em;
  border-radius: 20px;
  z-index: 1;
  row-gap: 1em;
}
.card img {
  width: 12em;
  margin-right: 1em;
  animation: move 10s ease-in-out infinite;
  z-index: 5;
}
.image:hover {
  cursor: -webkit-grab;
  cursor: grab;
}
.icons svg {
  width: 20px;
  height: 20px;
}
.heading {
  z-index: 2;
  color: var(--white2);
  transition: 0.4s ease-in-out;
}
.card:hover .heading {
  letter-spacing: 0.025em;
}
.heading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  opacity: 1;
  box-shadow: 220px 118px #fff, 280px 176px #fff, 40px 50px #fff,
    60px 180px #fff, 120px 130px #fff, 180px 176px #fff, 220px 290px #fff,
    520px 250px #fff, 400px 220px #fff, 50px 350px #fff, 10px 230px #fff;
  z-index: -1;
  transition: 1s ease;
  animation: 1s glowing-stars linear alternate infinite;
  animation-delay: 0s;
}
.icons::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  opacity: 1;
  box-shadow: 140px 20px #fff, 425px 20px #fff, 70px 120px #fff, 20px 130px #fff,
    110px 80px #fff, 280px 80px #fff, 250px 350px #fff, 280px 230px #fff,
    220px 190px #fff, 450px 100px #fff, 380px 80px #fff, 520px 50px #fff;
  z-index: -1;
  transition: 1.5s ease;
  animation: 1s glowing-stars linear alternate infinite;
  animation-delay: 0.4s;
}
.icons::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  opacity: 1;
  box-shadow: 490px 330px #fff, 420px 300px #fff, 320px 280px #fff,
    380px 350px #fff, 546px 170px #fff, 420px 180px #fff, 370px 150px #fff,
    200px 250px #fff, 80px 20px #fff, 190px 50px #fff, 270px 20px #fff,
    120px 230px #fff, 350px -1px #fff, 150px 369px #fff;
  z-index: -1;
  transition: 2s ease;
  animation: 1s glowing-stars linear alternate infinite;
  animation-delay: 0.8s;
}
.card:hover .heading::before,
.card:hover .icons::before,
.card:hover .icons::after {
  filter: blur(3px);
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.heading::after {
  content: "";
  position: absolute;
  top: -8.5%;
  left: -8.5%;
  width: 7.5em;
  height: 7.5em;
  border-radius: 56px;
  background: #f9f9fb;
  box-shadow: 0px 0px 100px rgba(193, 119, 241, 0.8),
    0px 0px 100px rgba(135, 42, 211, 0.8), inset #9b40fc 0px 0px 40px -12px;
  z-index: -1;

  /* تطبيق الدوران المستمر */
  animation: spin 12s linear infinite;
}
.card:hover .heading::after {
  box-shadow: 0px 0px 200px rgba(193, 119, 241, 1),
    0px 0px 200px rgba(135, 42, 211, 1), inset #9b40fc 0px 0px 40px -12px;
}
.icons {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 225px;
  gap: 1em;
  z-index: 1;
  border: 1px dashed  hsl(0, 0%, 22%);
    backdrop-filter: blur(10px);
  border-radius: 8px;
  padding: 8px;
}
.icons ion-icon,.icons .bx{
  font-size: 2rem;
  color: var(--white2);
}
@keyframes shootingStar {
  0% {
    transform: translateX(0) translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateX(-55em) translateY(0);
    opacity: 1;
  }
  70% {
    transform: translateX(-70em) translateY(0);
    opacity: 0;
  }
  100% {
    transform: translateX(0) translateY(0);
    opacity: 0;
  }
}
@keyframes move {
  0% {
    transform: translateX(0em) translateY(0em);
  }
  25% {
    transform: translateY(-1em) translateX(-1em);
    rotate: -10deg;
  }
  50% {
    transform: translateY(1em) translateX(-1em);
  }
  75% {
    transform: translateY(-1.25em) translateX(1em);
    rotate: 10deg;
  }
  100% {
    transform: translateX(0em) translateY(0em);
  }
}
@keyframes glowing-stars {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* comments */
        .container {
            width: 100%;
            max-width: 1200px;
            margin: auto;
            padding: 2rem;
            box-sizing: border-box;
        }
        .container h1 {
            text-align: center;
            color: #ffffff;
            margin-bottom: 2rem;
            font-size: 2rem;
        }
        .review-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .review-item {
            display: flex;
            align-items: flex-start;
            padding: 1rem 0 2rem;
            margin: 0 0 2.4rem;
            border-bottom: 1px solid #333;
            position: relative;
        }
        .review-item img {
            border-radius: 50%;
            width: 50px;
            height: 50px;
            object-fit: cover;
            margin-left: 1rem;
        }
        .review-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: 0 0 1.3rem;
        }
        .reviewer {
          color: var(--white2);
            font-weight: bold;
            font-size: 1.1rem;
            margin-bottom: 0.2rem;
        }
        .review-text {
            color: var(--light-gray);
    font-size: var(--fs6);
    font-weight: var(--fw300);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
        }
        .stars {
            position: absolute;
            bottom: 8px;
            left: 0;
            
            color: #f5c518;
            font-size: 1.2rem;
        }
        .date_style  {
            position: absolute;
            bottom: 14px;
            right: 1.3rem;
            font-size: 0.8rem;
            color: #b0b0b0;

        }
        .bx_time_style{
          position: absolute;
          bottom: 18px;
          right: 0;
          font-size: 1rem;
          color: var(--white2);
        }
        .owner-like {
  position: absolute;
          left: -1rem;
          top: 0;
            display: flex;
            align-items: center;
            font-size: 0.9rem;
            color: #ff4444;
            font-weight: bold;
            margin-top: 0.5rem;
}

/* حركة بسيطة للأعلى والأسفل */
.heart-icon, .owner-like img {
  animation: floatUpDown 3s infinite ease-in-out;
}

.heart-icon{
  color: #ff4444;
            font-size: 1rem;
            margin-left: -0.8rem;
            margin-top: 0.8rem;
            z-index: 2;
            -webkit-text-stroke: 1px #eee; /* سماكة الحدود ولونها */
}
/* تحريك متدرج لمنع التزامن */
.owner-like:nth-child(1) .heart-icon,
.owner-like:nth-child(1) img {
  animation-delay: 0s;
}

.owner-like:nth-child(2) .heart-icon,
.owner-like:nth-child(2) img {
  animation-delay: 0.5s;
}

.owner-like:nth-child(3) .heart-icon,
.owner-like:nth-child(3) img {
  animation-delay: 1s;
}

.owner-like:nth-child(4) .heart-icon,
.owner-like:nth-child(4) img {
  animation-delay: 1.5s;
}

.owner-like:nth-child(5) .heart-icon,
.owner-like:nth-child(5) img {
  animation-delay: 2s;
}

@keyframes floatUpDown {
  0% { transform: translateY(0); }
  50% { transform: translateY(-5px); } /* يتحرك للأعلى قليلاً */
  100% { transform: translateY(0); }
}
        /* Responsive Design */
        @media (max-width: 768px) {
            .owner-like img  {
                width: 26px;
                height: 26px;
            }
        }
        .and_im{
          color: #eee;
        }
        .hello {
  text-align: center;
  color: #eee;
}
.inline{
    vertical-align: middle;
    display: inline;
    }

  .reves {
    margin-left: 4px;
    transform: rotateY(180deg);
  }
.best_font{
  font-family: "Zain", sans-serif;
  font-weight: 900;
}
.pin{
  font-size: 1.2rem;
}
.x-time-five{
  position: absolute;
  right: 0;
}
.form-group-label{
  bottom: -2rem;
  position: relative;
  
}
.map_article{
  margin-top: 1rem;
}
.back_to_map_button{
  display: flex;
  text-align: right;
  width: 100%;
  border: 1px dashed #555;
  color: var(--white2);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  margin: 0 0 2rem;
}
#bg{
  top: 6rem;
  left: -1rem;
  max-width: 400px;
  max-height: 500px;
  z-index: -1;
  position: absolute;
}
@media (min-width: 900px) {
    body::before {
        content: "الموقع لازال تحت البرمجة (قد تواجه بعض المشاكل أو الاخطاء خاصةً في الشاشات الكبيرة) ⚠️  ";
        display: block;
        background: red;
        color: white;
        text-align: center;
        padding: 10px;
        font-size: px;
        font-weight: bold;
    }
}
/* note */
.notice {
    background-color: #ffcc00;
    color: #333;
    text-align: center;
    padding: 10px;
    font-weight: bold;
}

/* mario button */

      /* From Uiverse.io by augustin_4687 */ 
.mario_section{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 4rem;
}
.mario_btn {
  --stone-50: #fafaf9;
  --stone-800: #292524;
  --yellow-300: #fde047;
  --yellow-400: #facc15;
  --yellow-500: #eab308;
  --black-25: rgba(0, 0, 0, 0.25);

  position: relative;
  display: block;
  width: 4rem;
  height: 4rem;
  cursor: pointer;

  & > button {
    cursor: pointer;
    display: inline-block;
    height: 100%;
    width: 100%;
    appearance: none;
    border: 2px solid var(--stone-800);
    border-radius: 0.25rem;
    background-color: var(--yellow-400);
    outline: 2px solid transparent;
    outline-offset: 2px;
    cursor: pointer;
    transition: background-color 0.2s;

    &:hover {
      background-color: var(--yellow-300);
    }

    &:checked {
      background-color: var(--stone-800);
      border-color: var(--stone-800);

      &:hover {
        background-color: #44403c;
      }
    }

    &:active {
      outline-color: var(--stone-800);
    }

    &:focus-visible {
      outline-color: var(--stone-800);
      outline-style: dashed;
    }
  }

  & > span:nth-child(2) {
    position: absolute;
    inset: 3px;
    pointer-events: none;
    background-color: var(--yellow-400);
    border-bottom: 2px solid var(--black-25);
    transition: transform 75ms;

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: radial-gradient(
          rgb(255 255 255 / 80%) 20%,
          transparent 20%
        ),
        radial-gradient(rgb(255 255 255 / 100%) 20%, transparent 20%);
      background-position:
        0 0,
        4px 4px;
      background-size: 8px 8px;
      mix-blend-mode: hard-light;
      opacity: 0.5;
      animation: dots 0.5s infinite linear;
    }
  }

  & > span:nth-child(3) {
    position: absolute;
    pointer-events: none;
    inset: 0;

    &::before {
      content: "";
      width: 0.375rem;
      height: 0.375rem;
      position: absolute;
      top: 0.25rem;
      left: 0.25rem;
      background-color: var(--stone-800);
      border-radius: 0.125rem;
      box-shadow:
        3.125em 0 var(--stone-800),
        0 3.125em var(--stone-800),
        3.125em 3.125em var(--stone-800);
    }
  }

  & > span:nth-child(4) {
    position: absolute;
    pointer-events: none;
    inset: 0;
    filter: drop-shadow(0.25em 0.25em 0 rgba(0, 0, 0, 0.2));
    transition: all 75ms;

    &::after {
      content: "";
      width: 0.25rem;
      height: 0.25rem;
      position: absolute;
      top: 0.875rem;
      left: 1rem;
      border-radius: 0.0625px;
      background-color: var(--stone-800);
      box-shadow:
        0.75em 2em var(--stone-800),
        1em 2em var(--stone-800),
        0.75em 1.75em var(--stone-800),
        1em 1.75em var(--stone-800),
        0.75em 1.25em var(--stone-800),
        1em 1.25em var(--stone-800),
        0.75em 1em var(--stone-800),
        1em 1em var(--stone-800),
        1em 0.75em var(--stone-800),
        1.5em 0.75em var(--stone-800),
        1.25em 0.75em var(--stone-800),
        1.25em -0.25em var(--stone-800),
        1.5em 0em var(--stone-800),
        1.25em 0.5em var(--stone-800),
        1.5em 0.5em var(--stone-800),
        1.25em 0.25em var(--stone-800),
        1.5em 0.25em var(--stone-800),
        1.25em 0 var(--stone-800),
        1em -0.25em var(--stone-800),
        0.75em -0.25em var(--stone-800),
        0.5em -0.25em var(--stone-800),
        0.25em -0.25em var(--stone-800),
        0.25em 0 var(--stone-800),
        0 0.25em var(--stone-800),
        0 0.5em var(--stone-800),
        0.25em 0.25em var(--stone-800),
        0.25em 0.5em var(--stone-800);
    }
  }

  & > span:nth-child(5) {
    position: absolute;
    background-color: var(--yellow-400);
    border: 2px solid var(--stone-800);
    border-radius: 0.75rem;
    pointer-events: none;
    z-index: -1;
    inset: 0.5rem 1.5rem;
    box-shadow:
      7px 0 0 0 var(--stone-800),
      inset 0 2px 0 0 var(--yellow-300),
      inset 0 -2px 0 0 var(--yellow-500);
    transition: all 0ms cubic-bezier(0, 0.5, 0.4, 1);
  }

  & button:active ~ span:nth-child(5) {
    transform: translateY(-200%);
    transition-duration: 200ms;
    opacity: 0;
  }

  & button:hover ~ span:nth-child(4) {
    filter: drop-shadow(0.125em 0.125em 0 rgba(0, 0, 0, 0.2));
  }
}

@keyframes dots {
  0% {
    background-position:
      0 0,
      4px 4px;
  }
  100% {
    background-position:
      8px 0,
      12px 4px;
  }
}

@media (prefers-color-scheme: dark) {
  .mario_btn {
    & button:active,
    & button:focus-visible {
      outline-color: var(--yellow-400);
    }
  }
}
/* achev */ 
.ach_text{
  border: 1px solid var(--jet);
  border-radius: 2px;
  padding: 2rem 1rem;
  background-color: #111;
}
.ach_text .h5{
  margin-right: 8px;
  display: flex;
  gap: 4px;
}
.ach_card{
  overflow: hidden;
  margin-bottom: 4rem;
}
.bronz_arch{
  color: #CD7F32;
}
.not_rare{
  color: #82aaff;
}
.fdoli{
  color: #09dd45;
}

/* Enhanced Moon with Craters */
.moon {
  height: 80px;
  width: 80px;
  background: linear-gradient(145deg, #f0f0f0, #ffffff);
  border-radius: 50%;
  position: absolute;
  left: 2rem;
  top: 12rem;
  box-shadow:
    0 0 60px rgba(173, 216, 230, 0.7),
    inset -8px -8px 20px rgba(0, 0, 0, 0.3);
  background: linear-gradient(145deg, #e0ffff, #ffffff);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}

/* Moon Craters */
.crater {
  position: absolute;
  background: rgba(200, 200, 200, 0.3);
  border-radius: 50%;
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.cr1 {
  width: 15px;
  height: 15px;
  top: 20px;
  left: 15px;
}
.cr2 {
  width: 20px;
  height: 20px;
  top: 45px;
  left: 40px;
}
.cr3 {
  width: 12px;
  height: 12px;
  top: 55px;
  left: 20px;
}

/* Enhanced Blubs (Falling Stars) */
.blub {
  position: absolute;
  top: 0;
  height: calc(3px * var(--j));
  width: calc(1px * var(--j));
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(173, 216, 230, 1) 100%
  );
  box-shadow:
    0 0 20px rgba(255, 255, 255, 0.8),
    0 0 30px rgba(173, 216, 230, 0.6);
  animation: animated linear infinite reverse;
  animation-duration: calc(40s / var(--i));
  rotate: 25deg;
  opacity: 0.8;
  filter: blur(calc(0.5px * var(--j)));
}

@keyframes animated {
  0% {
    transform: translateY(200px) scale(0.1) rotate(25deg);
  }
  100% {
    transform: translateY(-60px) scale(1.2) rotate(25deg);
  }
}

/* Hover Effects */
.moon_section:hover .moon {
  box-shadow:
    0 0 60px rgba(173, 216, 230, 0.7),
    inset -8px -8px 20px rgba(0, 0, 0, 0.3);
  background: linear-gradient(145deg, #e0ffff, #ffffff);
}

.moon_section:hover .blub {
  animation-duration: calc(30s / var(--i));
  opacity: 1;
}

        /* تأثير الاهتزاز */
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-8px); }
            50% { transform: translateX(8px); }
            75% { transform: translateX(-8px); }
        }
        .shake {
            animation: shake 0.3s ease-in-out;
        }
        .fox{
          margin: 1rem 0;
        }
        .kitsuba {
          background: linear-gradient(to bottom, 
        var(--eerie-black1), /* اللون الأسود في البداية */
        #faebd7 50%, /* لون المنتصف */
        #faebd7 80%, /* تثبيت لون المنتصف */
        var(--eerie-black2) /* اللون الأسود في النهاية */
    );
        }
        .kitsuba img{
          width: 100%;
          max-width: 600px;
          margin: 0 auto;
          mix-blend-mode: darken;
        }
        .center_txt{
  margin: 0 auto;
  direction: ltr;
  text-align: right;
}
/* From Uiverse.io by PhyoTP */ 
/* Minecraft switch made by: csozi | Website: english.csozi.hu*/

/* The switch - the box around the slider */
.switch {
  font-size: 30px;
  position: relative;
  display: inline-block;
  width: 4em;
  height: 0.3em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 1;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #900c3f;
  transition: 0.4s;
}

.off {
  position: absolute;
  content: "";
  height: 2em;
  width: 2em;
  background-color: transparent;
  border-radius: 20px;
  transition: 0.4s;
  image-rendering: pixelated;
  opacity: 1;
  left: 0;
  bottom: -1.6rem;
}


.on {
  position: absolute;
  content: "";
  height: 2em;
  width: 2em;
  background-color: transparent;
  border-radius: 20px;
  transition: 0.4s;
  image-rendering: pixelated;
  opacity: 0;
  left: 0;
  bottom: -1.6rem;
}

.switch input:checked + .slider {
  background-color: red;
}

  
.switch input:focus + .slider {
  box-shadow: 0 0 1px #c70039;
}

.switch input:checked ~ .off {
  transform: translateX(2em);
  opacity: 0;
}

.switch input:checked ~ .on {
  transform: translateX(2em);
  opacity: 1;
}
.hidden{
  display: none;
}
/* From Uiverse.io by elijahgummer */ 
.golden-button {
  touch-action: manipulation;
  display: inline-block;
  outline: none;
  font-family: inherit;
  font-size: 1em;
  box-sizing: border-box;
  border: none;
  border-radius: 0.3em;
  height: 2.75em;
  width: 100%;
  line-height: 2.5em;
  text-transform: uppercase;
  text-align: center;
  padding: 0 1em;
  margin: 0 auto;
  color: var(--white2);
  border: 1px solid #555;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}


/* chi3r */
.chi3r {
    border: var(--artic_border);
    border-radius: 20px;
    box-shadow: var(--artic_shadow);
    z-index: 1;
    padding: 15px;
    color: #111 !important;
}
.chi3r::before {
  content: "";
  position: fixed;
  margin: -15px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("../img/chi3r2.jpg");
  background-repeat: no-repeat;
  z-index: -1;
  filter: blur(5px);
  background-color: rgba(0, 0, 0, .5);
  background-blend-mode: darken;
  background-size: cover;
  background-position: center
}

   @font-face {
    font-family: dyaa;
    src: url(../font/اليد.otf);
}
   @font-face {
    font-family: المصمك;
    src: url(../font/المصمك.otf);
}

        .chi3r_section {
            box-sizing: border-box;
            direction: rtl;
            font-family: "dyaa";
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            gap: 2rem;
            text-align: right;
            padding: 20px 0;
        }

        .chi3r_container {
          background: #F8E9DA; 
            border: 1px dashed #333;
            padding: 0 8px 12px;
            margin: 6rem 1rem 0;
            border-radius: 15px;
           transition: 0.3s;
           width: 340px;
           position: relative;
        }
        
        .chi3r_card{
          padding: 2rem 0 0;
          border-top: 1px solid#00000033;
          border-bottom: 1px solid #00000033;
        }

      .chi3r_card_title {
    font-family: "المصمك";
            background: #111;
            color: rgb(156 220 254);
            padding: 25px;
            margin-top: -6rem;
            border-radius: 15px;
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 20px;
            font-size: 14px;
            line-height: 1;
            white-space: pre-wrap;
            text-align: right; /* المحافظة على اتجاه النص */
            direction: rtl; /* إجبار اتجاه النص */
        }
      .chi3r_number {
        color: #ededed;
        font-size: 1.6rem;
        position: absolute;
        top: -5rem;
        left: 1.6rem;
        }

        .line p, .line{
            display: flex;
            flex-direction: row;
            gap: 10px;
        }

        .number {
            color: rgba(255, 255, 255, 0.2);
            width: 20px;
            text-align: right;
        }

        .keyword { color: #ff79c6; } /* كلمات محجوزة */
        .function { color: rgb(86 156 214); } /* أسماء الدوال */
        .symbol { color: #8be9fd; } /* الرموز */
        .string { color: rgb(182 206 168); } /* النصوص */
        .brace { color: #bd93f9; } /* الأقواس */
        .italic { font-style: italic; }
        .indent-1 { margin-right: 16px; }
        .indent-2 { margin-right: 60px; }
        .indent-3 { margin-right: 90px; }
.editor-content .color-0 {
  color: rgb(86 156 214);
}

.editor-content .color-1 {
  color: rgb(182 206 168);
}

.editor-content .color-2 {
  color: rgb(156 220 254);
}

.editor-content .color-3 {
  color: rgb(207 146 120);
}

        .chi3r_1 {
            font-size: 18px;
            line-height: 1.8;
            margin-bottom: 14px;
            transition: transform 0.3s ease, color 0.3s ease;
        }


        .author {
            margin: 32px 0 8px;
            font-size: 18px;
            color: #111;
        }
        .chi3r_2{
          margin: 0 3rem 2rem 0;
        }
        .sen{
          width: 128px;
          position: absolute;
          left: 12px;
          bottom: -28px;
        }
    .root::before {
  content: "";
  position: fixed;
  margin: -15px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("../img/magisk.jpg");
  background-repeat: no-repeat;
  z-index: -1;
  filter: blur(5px);
  background-color: rgba(0, 0, 0, .5);
  background-blend-mode: darken;
  background-size: cover;
  background-position: center
}
/* ملاحظات أبيات الشعر */
#poetryAdviceForm{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.sending { color: blue; }
        .success { color: lime; }
        .error { color: red; }
        :root {
  --main-line-color: hsl(234, 62%, 86%);
  --side-line-color: hsl(350, 100%, 91%);
  --paper-color: hsl(0, 15%, 95%);
  --ink-color: hsl(0, 0%, 12%);
  --line-thickness: 3px;
  --top-space: 0.6rem;
}

.paper {
  background: var(--paper-color);
  margin: 0;
  padding: calc(var(--top-space) - 0.1lh) 1rem 0 0;
  font-size: 1.2rem;
  text-indent: 18px;
  line-height: 1.6;
  color: var(--ink-color);
  text-align: right;
  background-image: 
    
    /*  The top space  */
      linear-gradient(
        var(--paper-color),
        var(--paper-color) var(--top-space),
        transparent var(--top-space)
      ),
    /* the blue lines */
      repeating-linear-gradient(
        transparent,
        transparent calc(1lh - var(--line-thickness)),
        var(--main-line-color) calc(1lh - var(--line-thickness)),
        var(--main-line-color) 1lh,
        transparent 1lh
      );
  box-shadow: 0 0 1rem rgb(0 0 0 / 0.25);
}

.bug_contauner{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0 0 1rem;
}
.bug_contauner p{
  color: var(--light-gray);
    font-weight: var(--fw300);
    line-height: 1.6;
    text-align: justify;
    padding: 1rem;
    border: 1px dashed  #ededed84;
  border-radius: 8px;
  margin-bottom: 8px;
}