:where([class^="ri-"])::before { content: "\f3c2"; }
@font-face {
    font-family: 'din next';
    font-style: normal;
    font-weight: 300;
    font-display: auto;
    src: url('../fonts/ArbFONTS-DINNEXTLTARABIC-LIGHT-1.ttf') format('truetype');
}

@font-face {
    font-family: 'din next';
    font-style: normal;
    font-weight: normal;
    font-display: auto;
    src: url('../fonts/ArbFONTS-DINNextLTArabic-Regular-2.ttf') format('truetype');
}

@font-face {
    font-family: 'din next';
    font-style: normal;
    font-weight: 500;
    font-display: auto;
    src: url('../fonts/ArbFONTS-DINNextLTArabic-Medium-2.ttf') format('truetype');
}

@font-face {
    font-family: 'din next';
    font-style: normal;
    font-weight: 700;
    font-display: auto;
    src: url('../fonts/ArbFONTS-DINNextLTArabic-Bold-2.ttf') format('truetype');
}

@font-face {
    font-family: 'din next';
    font-style: normal;
    font-weight: 800;
    font-display: auto;
    src: url('../fonts/ArbFONTS-DINNextLTArabic-Heavy-1.ttf') format('truetype');
}
body {
font-family: 'DIN Next', sans-serif;
}
h3,h2,span,p,button,div,a{
    font-family: 'DIN Next', sans-serif;
}
.modal-fade-enter {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.modal-fade-enter-active {
opacity: 1;
transform: translateY(0);
}
.p-3.bg-gray-100 {
transition: opacity 0.3s ease;
}
.story-circle {
width: 70px;
height: 70px;
border-radius: 50%;
padding: 3px;
background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}
#chatbot-panel {
    z-index: 9999; /* تأكد من أن z-index أعلى من أي عناصر أخرى */
}
.story-circle-inner {
background-color: white;
border-radius: 50%;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.chatbot-container {
max-height: 400px;
overflow-y: auto;
}
.chatbot-message {
max-width: 80%;
margin-bottom: 10px;
padding: 10px 15px;
border-radius: 18px;
}
.bot-message {
background-color: #f0f0f0;
border-bottom-right-radius: 4px;
align-self: flex-start;
}
.user-message {
background-color: #4f46e5;
color: white;
border-bottom-left-radius: 4px;
align-self: flex-end;
}
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #FEC800;
}
input:checked + .slider:before {
transform: translateX(26px);
}
.custom-checkbox {
appearance: none;
width: 18px;
height: 18px;
border: 2px solid #d1d5db;
border-radius: 4px;
position: relative;
cursor: pointer;
outline: none;
}
.custom-checkbox:checked {
background-color: #FEC800;
border-color: #FEC800;
}
.custom-checkbox:checked::after {
content: '';
position: absolute;
left: 5px;
top: 2px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.custom-radio {
appearance: none;
width: 18px;
height: 18px;
border: 2px solid #d1d5db;
border-radius: 50%;
position: relative;
cursor: pointer;
outline: none;
}
.custom-radio:checked {
border-color: #FEC800;
}
.custom-radio:checked::after {
content: '';
position: absolute;
left: 3px;
top: 3px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #FEC800;
}

   body {
      margin: 0;
      font-family: Arial, sans-serif;
    }

    .header {
      position: fixed;
      top: 0;
      width: 100%;
      background-color: #111827;
      /*لونداكنمثلالموجودفيالصورة*/color: white;
      padding: 15px;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: all 0.3s ease;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
}

    .header-top {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }

    .icon {
      font-size: 20px;
      color: #00ff9f;
      cursor: pointer;
      padding: 0 15px;
    }

    .logo {
      font-size: 28px;
      font-weight: bold;
      color: #ffc107;
    }

    #centerName {
  opacity: 1;
  height: auto;
  transition: opacity 1s ease, height 1s ease;
  overflow: hidden;
  margin-top: 5px;
  align-self: flex-start;
  font-family: 'DIN Next', sans-serif;
  -webkit-transition: opacity 1s ease, height 1s ease;
  -moz-transition: opacity 1s ease, height 1s ease;
  -ms-transition: opacity 1s ease, height 1s ease;
  -o-transition: opacity 1s ease, height 1s ease;
}
    .center-name{
     transition: display 1s;
     text-align: right;
    font-weight: 700;
    line-height: 67px;
    color: #FFFFFF;

     -webkit-transition: display 1s;
     -moz-transition: display 1s;
     -ms-transition: display 1s;
     -o-transition: display 1s;
}

    .hide {
     opacity: 0;
  height: 0;
  padding: 0;
  margin: 0;
    }
/*
    .content {
      margin-top: 400px;
      padding: 20px;
      height: 2000px;
    } */