/*
---------------------------------------------
أي محاولة لاستخدام أو نسخ أو التعديل على أي جزء من هذا العمل أو المعلومات المضمنة فيه، دون الحصول على إذن رسمي وموافقة قانونية، تُعد خرقًا صارخًا للحقوق الفكرية. يُحظر تمامًا الاستفادة من أي محتوى أو كود أو تصميم مملوك لهذا العمل. من يقوم بذلك يعرض نفسه للمسؤولية القانونية والعواقب الوخيمة. جميع الحقوق محفوظة وفقًا للقوانين المحلية والدولية، وسيتم اتخاذ كافة التدابير القانونية المناسبة ضد أي انتهاك. لا مجال للتساهل أو التهاون في هذا الشأن.

Any attempt to use, copy, or modify any part of this work or the information contained herein, without obtaining official permission and legal approval, is considered a serious violation of intellectual property rights. The use of any content, code, or design owned by this work is strictly prohibited. Anyone who does so exposes themselves to legal responsibility and severe consequences. All rights are reserved according to local and international laws, and all appropriate legal measures will be taken against any infringement. There will be no tolerance or leniency in this matter.
---------------------------------------------
*/


/* 
---------------------------------------------
Start Main Style
--------------------------------------------- 
*/ 

body {
  text-align: center;  /* محاذاة جميع النصوص في المنتصف */
  margin-top: 24px;
  background: #EDEAE9;
}

/* إعداد خط SFProAR للعربية */
@font-face {
  font-family: 'SFProAR';
  src: url('/static.font/iScan-font/alfont_com_SFProAR_semibold.ttf') format('truetype');
  font-weight: lighter;
  font-style: lighter;
}/* تعديل خاصية الاتجاه للغة العربية فقط مع الحفاظ على الفراغات */
/* تخصيص تصميم للغة العربية بشكل عام */
html[lang="ar"], body[lang="ar"] {
  direction: rtl;        /* الاتجاه من اليمين لليسار عند استخدام اللغة العربية */
  text-align: right;     /* محاذاة النص إلى اليمين */
}

/* تحسين تنسيق العناصر الخاصة في اللغة العربية */
html[lang="ar"] .status-line,
html[lang="ar"] .modal-header,
html[lang="ar"] .save-contact,
html[lang="ar"] .save-cv,
html[lang="ar"] .FlexBook-icon-container {
  direction: rtl;
  text-align: right;
  gap: 8px;  /* تقليل المسافة بين العناصر إذا لزم الأمر */
}

html[lang="ar"] .save-contact {
  margin-left: 20px; /* تقليل الفراغ المتبقي */
}

html[lang="ar"] .day-list {
  direction: rtl;
}

/* تطبيق الخط الافتراضي بناءً على اللغة على جميع العناصر */
html[lang="ar"] * {
  font-family: 'SFProAR', sans-serif; /* الخط العربي عند اختيار اللغة العربية */
}

html[lang="en"] * {
  font-family: 'SFProAR', sans-serif; /* الخط الإنجليزي عند اختيار اللغة الإنجليزية */
}

/* استثناء Font Awesome */
.status-icon i, .modal-header i {
  font-family: 'Font Awesome 5 Free'; /* الخط الخاص بأيقونات Font Awesome */
  font-weight: 900;
}



/* محاذاة العناصر المحددة في المنتصف دائمًا */
h1,
.BioBank,
.name,
.account-info,
.iban,
.swift-code,
.copied-message,
.name-english,
.iban-english,
.swift-code-english,
.name-arabic,
.iban-arabic,
.swift-code-arabic {
  display: flex;
  justify-content: center;  /* محاذاة المحتوى أفقيًا في المنتصف */
  align-items: center;      /* محاذاة المحتوى عموديًا في المنتصف */
  text-align: center;       /* التأكد من محاذاة النص في المنتصف */
}

/* تنسيقات العناوين */
h1 {
  font-weight: lighter;
  font-size: 28px;
  line-height: 40px;
  animation: popIn 0.6s ease-out;
  direction: LTR;

}

/* تنسيق الفقرات */
p {
  font-weight: lighter;
  font-size: 22px;
  color: black;
  animation: popIn 0.6s ease-out;
  direction: LTR;

}

/* الحركات */
@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(10px);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}


/* إعدادات الشاشات الصغيرة */
@media screen and (max-width: 300px) {
  h1 {
    font-size: 24px;
    line-height: 32px;
  }

  p {
    font-weight: lighter;
    font-size: 22px;
    color: black;
    animation: popIn 0.6s ease-out;
  }
}


/* 
---------------------------------------------
End Main Style
--------------------------------------------- 
*/

/* 
---------------------------------------------
Start image Style
--------------------------------------------- 
*/

.banner {
  width: 350px;
  height: 160px;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  position: relative;
  margin: 20px auto 0;
  animation: popIn 0.6s ease-out;
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(10px);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  animation: popIn 0.6s ease-out;
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(10px);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.profile-img {
  width: 120px;  /* تقليل الحجم بدلاً من القص */
  height: 120px;  
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 123px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  animation: popInProfile 0.5s ease-out;
  object-fit: cover; /* يضمن عدم تشويه الصورة */
}


@keyframes popInProfile {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.8);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.1);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

.profile-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  text-align: center;
  margin-top: 10px;
  animation: popIn 0.6s ease-out;
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(10px);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@media screen and (max-width: 300px) {
  .banner {
    width: 90%;
    animation: popIn 0.6s ease-out;
  }
  
  @keyframes popIn {
    0% {
      opacity: 0;
      transform: scale(0.8) translateY(10px);
    }
    50% {
      opacity: 1;
      transform: scale(1.05) translateY(-5px);
    }
    100% {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  .profile-img {
    width: 100px;
    height: 100px;
    bottom: -50px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    animation: popIn 0.6s ease-out;
  }
  
  @keyframes popIn {
    0% {
      opacity: 0;
      transform: scale(0.8) translateY(10px);
    }
    50% {
      opacity: 1;
      transform: scale(1.05) translateY(-5px);
    }
    100% {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }
}
/* 
---------------------------------------------
End image Style
--------------------------------------------- 
*/

/* 
---------------------------------------------
Start iScan-Link Style
--------------------------------------------- 
*/

.iscan-link {
  list-style: none;
  padding: 0;
  font-size: 18px;
  animation: popIn 0.6s ease-out;
  direction: LTR;
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(10px);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Rest of the CSS remains the same */

.iscan-link > li {
  margin: 9px 0;
  animation: popIn 0.6s ease-out;
}

.iscan-link > li a {
  color: #EDEAE9;
  background: #303030;
  border-radius: 50px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  padding: 18px 24px;  /* Increased padding */
  text-decoration: none;
  max-width: 400px;  /* Increased max-width for larger buttons */
  width: 80%;
  display: flex;  /* Use flexbox to center content */
  align-items: center;  /* Center content vertically */
  justify-content: center;  /* Center content horizontally */
  margin: 0 auto;
  animation: popIn 0.6s ease-out;
}

.iscan-link > li a:hover,
.iscan-link > li a:focus {
  color: white;
  background: #090e0f;
  animation: popIn 0.6s ease-out;
}

/* Adding custom size for icons if needed */
.iscan-link > li a img {
  width: 24px;  /* Set a fixed width for icons */
  height: 24px;  /* Set a fixed height for icons */
  margin-right: 8px;  /* Space between icon and text */
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(10px);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* 
---------------------------------------------
End iScan-Link Style
--------------------------------------------- 
*/



/* 
---------------------------------------------
Start WorkPro Style
--------------------------------------------- 
*/
#status {
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: transform 0.3s ease;
  background: #ff000000;
  border-radius: 5px;
  margin: 20px;
}

.status-icon {
  font-size: 20px;
  transition: transform 0.3s ease, color 0.3s ease;
}

.working .status-icon {
  color: green;
}

.not-working .status-icon {
  color: red;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal.show {
  display: flex;
  opacity: 1;
  animation: fadeIn 0.3s ease, scaleUp 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleUp {
  from { transform: scale(0.9); }
  to { transform: scale(1); }
}

.modal-content {
  background: #fff;
  padding: 20px;
  border-radius: 30px;
  width: 80%;
  max-width: 800px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  position: relative;
  display: flex;
  flex-direction: column;
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

.modal.show .modal-content {
  transform: scale(1);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.5em;
}

.modal-header .fa-times {
  cursor: pointer;
  color: black;
}

.day-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  border-left: 2px solid #ddd;
  padding-left: 20px;
}

.day-list .day {
  text-align: left;
  padding-right: 10px;
}

.day-list .hours {
  text-align: right;
}

.status-line {
  margin-top: 20px;
  text-align: center;
}

.status-line .status {
  font-size: 15px;
  margin: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-line .status-icon {
  font-size: 25px;
  margin-right: 10px;
  margin-top: -3px;
  transition: transform 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-line .status-online .status-icon {
  color: green;
}

.status-line .status-offline .status-icon {
  color: red;
}

@keyframes bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.animate-status {
  animation: bounce 0.3s ease;
}

.green-text {
  color: green;
}

.red-text {
  color: red;
}
/* 
---------------------------------------------
End WorkPro Style
--------------------------------------------- 
*/

/* 
---------------------------------------------
Start ContactBook+ Style
--------------------------------------------- 
*/

.save-contact {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #303030;
  color: #ffffff;
  font-size: 25px;
  padding: 12px 24px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  height: 12px 24px;
  position: relative;
  /* Start change.CSS-0001*/
  margin-right: 25px;
  /* End change.CSS-0001*/

  animation: popIn 0.6s ease-out;
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(10px);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
  
  .save-contact svg {
  margin-right: 10px;
  animation: popIn 0.6s ease-out;
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(10px);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
  
  .flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
  animation: popIn 0.6s ease-out;
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(10px);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* 
---------------------------------------------
End ContactBook+ Style EN
--------------------------------------------- 
*/

/* 
---------------------------------------------
Start ContactBook+ Style AR
--------------------------------------------- 
*/
:lang(ar) .save-contact {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #303030;
  color: #ffffff;
  font-size: 15px;
  padding: 12px 24px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  width: 250px;  /* تحديد العرض */
  height: 50px;  /* تحديد الطول */
  position: relative;
  /* Start change.CSS-0001*/
  margin-right: 2px;
  /* End change.CSS-0001*/
  
  animation: popIn 0.6s ease-out;
  
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(10px);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
  
:lang(ar) .save-contact svg {
  margin-right: 10px;
  animation: popIn 0.6s ease-out;
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(10px);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
  
:lang(ar) .flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
  animation: popIn 0.6s ease-out;
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(10px);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* 
---------------------------------------------
End ContactBook+ Style AR
--------------------------------------------- 
*/


/* 
---------------------------------------------
Start FlexBook Style
--------------------------------------------- 
*/

.FlexBook-icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 47px;
  height: 47px;
  background-color: #303030;
  border-radius: 50%;
  animation: popIn 0.6s ease-out;
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(10px);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.FlexBook-icon-container svg {
  width: 21px;
  height: 21px;
  animation: popIn 0.6s ease-out;
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(10px);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* 
---------------------------------------------
End FlexBook Style
--------------------------------------------- 
*/

/* 
---------------------------------------------
Start CvLink Style En
--------------------------------------------- 
*/
/* باقي التنسيق الذي لم يتغير */
.save-cv {
  width: 335px; /* Adjust the width as needed */
  height: 50px; /* Adjust the height as needed */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #303030;
  color: #ffffff;
  font-size: 25px;
  padding: 12px 24px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  position: relative;
  margin: 0 auto;
  animation: popIn 0.6s ease-out;
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(10px);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* CSS لتنسيق الأيقونة والنص */
.save-cv-link {
  display: flex;
  align-items: center; /* لضبط الأيقونة والنص في نفس المحاذاة */
  justify-content: center;
  text-decoration: none; /* إزالة التسطير من الرابط */
  color: inherit; /* الحفاظ على لون النص */
}

.save-cv-icon {
  margin-right: 10px; /* مسافة بين الأيقونة والنص */
}

.save-cv-text {
  margin-left: 5px; /* إضافات صغيرة إذا كنت ترغب في مسافة أخرى */
}

/* 
---------------------------------------------
End CvLink Style En
--------------------------------------------- 
*/

/* 
---------------------------------------------
Start CvLink Style AR
--------------------------------------------- 
*/
/* باقي التنسيق الذي لم يتغير */
:lang(ar) .save-cv {
  width: 335px; /* Adjust the width as needed */
  height: 47px; /* Adjust the height as needed */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #303030;
  color: #ffffff;
  font-size: 22px;
  padding: 12px 24px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  position: relative;
  margin: 0 auto;
  animation: popIn 0.6s ease-out;
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(10px);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* CSS لتنسيق الأيقونة والنص */
:lang(ar) .save-cv-link {
  display: flex;
  align-items: center; /* لضبط الأيقونة والنص في نفس المحاذاة */
  justify-content: center;
  text-decoration: none; /* إزالة التسطير من الرابط */
  color: inherit; /* الحفاظ على لون النص */
}

:lang(ar) .save-cv-icon {
  margin-right: 10px; /* مسافة بين الأيقونة والنص */
}

:lang(ar) .save-cv-text {
  margin-left: 5px; /* إضافات صغيرة إذا كنت ترغب في مسافة أخرى */
}
/* 
---------------------------------------------
End CvLink Style AR
--------------------------------------------- 
*/

/* 
---------------------------------------------
Start BioBank Style
--------------------------------------------- 
*/

@import url('https://fonts.googleapis.com/css2?family=Solaris+Medium&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');




.rectangle {
    width: 330px;
    height: 229px;
    max-width: 360px;
    width: 90%;
    background-color: #e0dddc;
    border-radius: 50px;
    border: 1px solid black;
    position: relative;
    margin: 14px auto;
    padding: 10px;
    box-shadow: 0 0 9px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Solaris Medium', sans-serif;
    border: 3px solid #a4a4a4;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    z-index: 1;
    overflow: hidden;
    animation: popIn 0.6s ease-out;
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(10px);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}


        .bank-logo {
          width: 90px;
          border-radius: 100%;
          margin-top: -11px;
          margin-left: 1px;
          animation: popIn 0.6s ease-out;
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(10px);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

        .name {
          font-size: 27px;
          text-align: center;
          margin: 7px 0;
          margin-right: 14.5px;
          animation: popIn 0.6s ease-out;
          direction: LTR;

}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(10px);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

        .account-info {
          font-size: 22px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin-right: 19px;
          margin-left: 3.75px;
          animation: popIn 0.6s ease-out;
          direction: LTR;

}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(10px);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

        .iban {
          font-size: 22px;
          text-align: center;
          margin: 8px 0;
          animation: popIn 0.6s ease-out;
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(10px);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

        .swift-code {
          font-size: 22px;
          text-align: center;
          margin: 2px 0;
          margin-left: 4.5px;
          cursor: pointer; /* Change cursor to pointer */
          text-decoration: none; /* Remove underline */
          animation: popIn 0.6s ease-out;
          direction: LTR;

}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(10px);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

        .copied-message {
          position: fixed;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          background: lightgreen;
          padding: 5px;
          width: 100px;
          height: 30px;
          border-radius: 15px;
          display: flex;
          justify-content: center;
          align-items: center;
          animation: slideUp 3s forwards;
          font-family: 'Solaris Medium', sans-serif;
          z-index: 2;
          direction: LTR;

        }

        /* English font */
.name-english {
  font-size: 27px;
  text-align: center;
  margin: 7px 0;
  margin-right: 14.5px;
  font-family: 'Ostende Sans Bold', sans-serif;
  direction: LTR;

}

.iban-english, .swift-code-english {
  font-size: 22px;
  text-align: center;
  margin: 8px 0;
  font-family: 'Ostende Sans Bold', sans-serif;
  direction: LTR;

}

/* Arabic font */
.name-arabic {
  font-size: 27px;
  text-align: center;
  margin: 7px 0;
  margin-right: 14.5px;
  font-family: 'Tajawal', sans-serif;
  direction: LTR;

}
/* Import for margin */
.iban-arabic, .swift-code-arabic {
  font-size: 22px;
  text-align: center;
  margin: 12px 0;
  font-family: 'Tajawal', sans-serif;
  direction: LTR;

}

        @keyframes slideUp {
          0% {
            bottom: -40px;
          }

          50% {
            bottom: 3%;
          }

          100% {
            bottom: -40px;
          }
        }

        @media screen and (max-width: 430px){
          .rectangle {
            width: 330px;
            height: 220px;
            width: 90%;
            background-color: #e0dddc;
            border-radius: 50px;
            border: 1px solid black;
            position: relative;
            margin: 12px auto;
            padding: 10px;
            box-shadow: 0 0 9px rgba(0, 0, 0, 0.5);
            display: flex;
            flex-direction: column;
            align-items: center;
            font-family: 'Solaris Medium', sans-serif;
            border: 3px solid #a4a4a4;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
            z-index: 1;
            overflow: hidden;
            direction: LTR;

          }

          .bank-logo {
            width: 90px;
            border-radius: 100%;
            margin-top: -11px;
            margin-left: 1px;
          }

          .name {
            font-size: 25px;
            text-align: center;
            margin: 7px 0;
            margin-right: 14.5px;
            direction: LTR;

          }

          .account-info {
            font-size: 22px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-right: 19px;
            margin-left: 3.75px;
            direction: LTR;

          }

          .iban {
            font-size: 22px;
            text-align: center;
            margin: 8px 0;
            direction: LTR;

          }

          .swift-code {
            font-size: 20px;
            text-align: center;
            margin: 14px 0;
            margin-left: 4.5px;
            color: transparent;
            direction: LTR;

          }

   /* English font */
   .name {
  font-size: 25px;
  text-align: center;
  margin: 7px 0;
  margin-right: 14.5px;
  font-family: 'Ostende Sans Bold', sans-serif;
  direction: LTR;

}

.iban, .swift-code {
  font-size: 20px;
  text-align: center;
  margin: 8px 0;
  font-family: 'Ostende Sans Bold', sans-serif;
  color:black

}

          /* Arabic font */
.name-arabic {
  font-size: 27px;
  text-align: center;
  margin: 7px 0;
  margin-right: 14.5px;
  font-family: 'Tajawal', sans-serif;
  direction: LTR;

}

.iban-arabic, .swift-code-arabic {
  font-size: 20px;
  text-align: center;
  margin: 8px 0;
  font-family: 'Tajawal', sans-serif;
  direction: LTR;

}

        }
        
/* 
---------------------------------------------
End BioBank Style
--------------------------------------------- 
*/