/*================================

    Start Global

================================*/

@font-face {
    font-family: 'DroidArabicKufi';
    src: url('../font/DroidArabicKufi.eot');
    src: url('../font/DroidArabicKufi.eot?#iefix') format('embedded-opentype'), url('../font/DroidArabicKufi.woff') format('woff'), url('../font/DroidArabicKufi.ttf') format('truetype'), url('../font/DroidArabicKufi.svg#icons') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-family: 'DroidArabicKufi', sans-serif;
    -moz-font-family: 'DroidArabicKufi', sans-serif;
    -ms-font-family: 'DroidArabicKufi', sans-serif;
    -o-font-family: 'DroidArabicKufi', sans-serif;
    font-family: 'DroidArabicKufi', sans-serif;
    font-weight: normal;
    background: #fff;
    color: #000000;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    text-align: right;
    /*direction: rtl !important;*/
}

ul,
li {
    /*list-style: none;*/
    margin: 0;
    padding: 0;
    border: 0;
}

img,
video {
    width: 100%;
}

a,
a:hover,
a:focus,
a:active {
    text-decoration: none;
    outline: none;
    outline: 0;
}

button,
button:focus,
button:active {
    outline: none;
    outline: 0;
}

a {
    color: #001c97;
}

a:hover {
    color: #951428;
}

a,
button,
div {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

/*================================

    //End Global

================================*/

/*================================

    Start Global

================================*/

body,
h1,
h2,
h3,
h4,
h5,
h6,
input[type=text],
input[type=password],
input.text,
textarea,
input[type=submit],
.mobile-menu {
    font-family: 'DroidArabicKufi', sans-serif;
}

.border-title h1 span,
.border-title h2 span,
.border-title h3 span,
.border-title h4 span {
    *right: 49% !important;
}

.column {
    margin: 0px 0px 0px 2% !important;
    float: right !important;
}

#main,
#top-bar,
#logo,
#main-menu ul li,
#primary,
#secondary,
.entry-details,
.toggle-frame-set,
.testimonial,
blockquote,
.widget ul li,
ul.product_list_widget li a,
ul.recent-posts-widget li a.thumb,
.widget ul,
.blog-entry .entry-thumb-meta,
.breadcrumb,
.breadcrumb a,
.breadcrumb span,
.breadcrumb h1,
.j-pro [class*="j-span"],
.side-nav-container ul li a span,
.side-nav-container {
    float: right !important;
}

#top-bar .phone-no {
    float: right;
    background: url(images/phone-ico.png) right 3px no-repeat !important;
}

.social-icons,
#main-menu,
.main-phone-no,
blockquote cite {
    float: left !important;
}

.column.last {
    margin-left: 0 !important;
}

.carousel-arrows {
    right: auto !important;
    left: 0 !important;
}

.hr-invisible-small {
    float: right;
}

.fa-chevron-right:before {
    content: "\f054" !important;
}

.fa-chevron-left:before {
    content: "\f053" !important;
}

.faq h5.toggle-accordion {
    padding: 0 42px 0 0;
}

h5.toggle:before,
h5.toggle-accordion:before {
    /*left: auto;*/
    /*right: 0 !important;*/
}

.testimonial .author {
    float: right !important;
    left: auto;
    right: 0 !important;
}

.testimonial blockquote {
    margin-right: 65px;
    padding: 15px 120px 15px 25px;
}

#footer .widget ul li {
    padding: 7px 15px 7px 0px;
}

#footer .widget ul li:before {
    right: 0 !important;
    left: auto;
}

ul.product_list_widget li a {
    margin-left: 10px;
    margin-right: 0;
}

#footer .widget .social-icons li {
    margin: 0px 0px 0px 5px;
}

#secondary .widget ul li a:before {
    left: auto;
    right: 0;
}

#secondary {
    margin-left: 1%;
    margin-right: 0;
}

.widget ul ul {
    margin-left: 0;
    margin-right: 20px;
}

.widget_categories ul li a:hover {
    padding-right: 30px;
    color: #0a001f !important;
}

.blog-entry .entry-thumb-meta {
    margin: 0px 0px 0px 20px;
}

#top-bar .phone-no {
    padding: 0px 13px 0px 0px;
}

.contact.html_footer li i {
    left: auto;
    right: 0;
}

.speech img {
    float: left;
}

.j-pro label {
    text-align: right;
    font-family: 'DroidArabicKufi', sans-serif;
}

.j-pro .j-icon-right~input,
.j-pro .j-icon-right~textarea {
    padding-left: 58px;
    padding-right: 10px;
}

.j-pro .j-icon-right {
    border-left: none;
    border-right: 1px solid rgba(0, 0, 0, .54);
    left: 3px;
    right: auto;
}

.j-pro .j-header p,
.j-pro input[type="text"],
.j-pro input[type="password"],
.j-pro input[type="email"],
.j-pro input[type="search"],
.j-pro input[type="url"],
.j-pro textarea,
.j-pro select {
    font-family: 'DroidArabicKufi', sans-serif;
}

.contact.html-details p {
    padding-right: 25px;
}

.contact.html-details span {
    right: 0;
    left: auto;
}

#contact.html-form input[type="text"],
#contact.html-form input[type="email"] {
    font-family: 'DroidArabicKufi', sans-serif;
}

.ico-content.type2 {
    padding: 0px 50px 30px 0px;
}

.ico-content.type2 .icon {
    left: auto;
    right: 0;
}

.breadcrumb a {
    margin-top: 8px;
}

.breadcrumb span {
    margin: 15px 10px 0px;
}

.side-nav-container ul li a {
    border-right: none;
    border-left: 4px solid #ececec;
}

.side-nav-container ul li a:hover,
.side-nav-container ul li.current_page_item a {
    border-left: 4px solid #6392FA;
    border-right: none !important;
    color: #1e5980;
}

#no-more-tables td {
    font-size: 12px;
}

h5.toggle:before,
h5.toggle-accordion:before {
    right: 0;
    left: auto;
}

.faq .toggle-content {
    padding-right: 42px;
    padding-left: 0;
}

.toggle-frame h5.toggle-accordion:before,
.toggle-frame h5.toggle:before {
    left: auto;
    right: 15px;
}

.mobile-menu {
    background-position: center left !important;
}

.services_items li i {
    right: 0 !important;
    left: auto;
}

.testimonial blockquote:before {
    right: 90px;
    left: auto;
}

.contact.html_footer li p {
    padding-right: 30px;
    padding-left: 0;
}

table,
select,
option,
input {
    direction: rtl !important;
}

.custom_about {
    font-family: 'DroidArabicKufi', sans-serif !important;
}

.custom_about h1 {
    font-family: 'DroidArabicKufi', sans-serif !important;
}

.custom_about h1 p {
    font-family: 'DroidArabicKufi', sans-serif !important;
}

.custom_about h1 p b span {
    font-family: 'DroidArabicKufi', sans-serif !important;
    font-size: 16px;
}

.custom_about p span {
    font-family: 'DroidArabicKufi', sans-serif !important;
    /*font-size: 14px !important;*/
}

/*================================

    //End Global

================================*/

/*================================

    Start Global

================================*/

@media only screen and (max-width: 800px) {
    #no-more-tables td {
        padding-right: 50%;
        padding-left: 0;
        text-align: right;
    }
    #no-more-tables td:before {
        right: 6px;
        left: auto;
        padding-left: 10px;
        padding-right: 0;
        text-align: right;
    }
}

/*================================

    //End Global

================================*/

/*================================
    Start Global
================================*/

@media only screen and (max-width: 479px) {
    .testimonial blockquote {
        padding: 15px 40px 15px 15px;
    }
    .testimonial blockquote:before {
        right: 10px;
        top: 15px;
    }
}

/*================================
    //End Global
================================*/

#footer p,
#footer a,
#footer span,
#footer .widget .tweet_list li:before,
#footer .widget ul li:before {
    direction: rtl !important;
    text-align: justify;
}

/*================================
    Start Global
================================*/

#slider {
    direction: ltr !important;
    text-align: center;
    ;
}



/*================================
    //End Global
================================*/

/* =========================
   FINAL FIX – HYATEK Cards
   ========================= */

/* الكارت نفسه */
#primary .approuch.hy-card{
  padding-top: 150px !important; /* المسافة الحاسمة تحت الأيقونة */
  overflow: visible !important;
}

/* الأيقونة */
#primary .approuch.hy-card .hy-icon{
  top: 32px !important;  /* نزّلناها شوية */
}

/* العنوان */
#primary .approuch.hy-card .hy-title{
  display: block !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  text-align: center !important;
}

/* Fix ellipsis + weird wrap in hy-desc */
#primary .approuch.hy-card .hy-desc{
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  display: block !important;

  /* لو القالب بيستخدم line-clamp */
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
}

#primary .approuch.hy-card p.hy-desc{
  max-width: 280px !important;
  margin: 0 auto !important;
}


/* تأكيد منع أي تداخل */
#primary .approuch.hy-card *{
  box-sizing: border-box;
}
/* =========================
   HYATEK Cards - Equal Height + Full Text
   (No HTML changes)
   ========================= */

/* خلي نفس الارتفاع لكل كارت */
#primary .column.one-fourth{
  display: flex;                 /* يخلي الكارت يتمدد بنفس الارتفاع */
}

#primary .column.one-fourth .approuch.hy-card{
  width: 100%;
  min-height: 360px !important;  /* عدلي الرقم حسب اللي يعجبك */
  height: 100%;
  padding-bottom: 26px !important;
}

/* امنع قص العنوان والوصف (يلغي ... لو موجود من القالب) */
#primary .approuch.hy-card .hy-title,
#primary .approuch.hy-card .hy-desc{
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-height: none !important;
}

/* العنوان لو طويل يتكسر سطرين/3 بشكل طبيعي */
#primary .approuch.hy-card .hy-title{
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}

/* الوصف يكمل عادي */
#primary .approuch.hy-card .hy-desc{
  max-width: 280px !important;
}

/* لو فيه ستايل قديم عامل ellipsis على p جوّه .approuch */
#primary .approuch.hy-card p{
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* إخفاء كل القوائم الفرعية افتراضيًا */
.widget_categories ul ul {
    display: none;
    margin-right: 15px;
}

/* إظهار المستوى الأول عند الضغط/التركيز */
.widget_categories ul > li:hover > ul,
.widget_categories ul > li:focus-within > ul {
    display: block;
}

/* إظهار المستوى الثاني (النقاط تحت كل تخصص) فقط عند الضغط عليه */
.widget_categories ul ul > li:hover > ul,
.widget_categories ul ul > li:focus-within > ul {
    display: block;
}

/* تحسين شكل المؤشر */
.widget_categories li > a {
    cursor: pointer;
    display: block;
}

/* مسافة وشكل أنعم */
.widget_categories ul ul li a {
    font-size: 13px;
    padding-right: 10px;
}

/*new*/

/* ===== Fix multi-level dropdown for #main-menu (supports 3rd+ levels) ===== */

#main-menu ul li { position: relative; }

/* Level 2 */
#main-menu ul li ul{
  display: none;
  position: absolute;
  top: 100%;
  right: 0;     /* RTL */
  left: auto;
  z-index.html: 9999;
}

/* Show on hover (desktop) */
#main-menu ul li:hover > ul { display: block; }

/* Also show on click/focus without JS (works better than hover on some devices) */
#main-menu ul li:focus-within > ul { display: block; }

/* Level 3+ */
#main-menu ul li ul li ul{
  top: 0;
  right: 100%;  /* RTL: يظهر يمين القائمة الأم */
  left: auto;
}

/* Optional: make the whole anchor clickable block */
#main-menu ul li a { display: block; }


/* ===== Fix RTL columns + equal height (Secondary/Primary) ===== */
#main > .container > .container {
  display: flex;
  flex-direction: row-reverse; /* يخلي الـ sidebar يمين في RTL */
  align-items: stretch;        /* يخلي الطولين قد بعض -> نهاية سابقة الأعمال مع العمود اليمين */
  gap: 20px;
}

/* Sidebar */
#main > .container > .container > #secondary {
  flex: 0 0 280px;   /* عرض ثابت للسايدبار - عدليه لو عايزة */
}

/* Main content */
#main > .container > .container > #primary {
  flex: 1 1 auto;
  min-width: 0; /* مهم عشان العناصر جوه ما تكسرش العرض */
}

/* Responsive */
@media (max-width: 991px) {
  #main > .container > .container {
    flex-wrap: wrap;
  }
  #main > .container > .container > #secondary,
  #main > .container > .container > #primary {
    flex: 0 0 100%;
  }
}
/* ===== Reduce spacing between testimonials ===== */



/* شيل أي فراغات إضافية بين العناصر */
.testimonial + .testimonial {
  margin-top: 15px !important;
}

/* ===== Enlarge "Why Hayaatak" section text ===== */

/* العناوين (رسالتنا – رؤيتنا – قيمنا – استراتيجيتنا) */
.toggle-frame-set.faq h5.toggle-accordion a {
  font-size: 18px !important;
  font-weight: 700;
}

/* النص الظاهر مباشرة تحت العنوان */
.toggle-frame-set.faq > p {
  font-size: 15.5px !important;
  line-height: 1.9;
}

/* النص داخل المحتوى القابل للفتح */
.toggle-frame-set.faq .toggle-content p {
  font-size: 15px !important;
  line-height: 1.9;
}
.portfolio.three-column {
    background: #ffffff;
    border: 1px solid #e3e3e3;
    border-radius: 18px;
    overflow: hidden;              /* ضروري جدًا */
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.portfolio.three-column .portfolio-thumb {
    border-bottom: none;          /* إزالة الخط الفاصل السفلي */
    border-radius: 18px 18px 0 0; /* تدوير الزوايا العلوية */
}
.portfolio.three-column .portfolio-thumb img {
    border-radius: 18px 18px 0 0; /* تدوير زوايا الصورة العلوية */
}   
.portfolio-thumb img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
}
.portfolio.three-column .image-overlay {
    border-radius: 18px 18px 0 0; /* تدوير زوايا التراكب العلوية */
}
.portfolio.three-column .portfolio-details {
    padding: 20px;
}
.portfolio.three-column .portfolio-details h5 {
    font-size: 18px;
    margin-bottom: 10px;
}
/* 1) وحّد الإطار الخارجي لكل كروت السلايدر (عادي/نشط/مركز) */
.portfolio-carousel li.portfolio.three-column,
.portfolio-carousel li.portfolio.three-column.active,
.portfolio-carousel li.portfolio.three-column.center,
.portfolio-carousel li.portfolio.three-column.current,
.portfolio-carousel li.portfolio.three-column.slick-center,
.portfolio-carousel li.portfolio.three-column.owl-item.active {
    background: #fff !important;
    border: 1px solid #e3e3e3 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08) !important;
}

/* 2) اقفل أي إطار مرسوم بـ pseudo-elements (ده السبب الشائع) */
.portfolio-carousel li.portfolio.three-column:before,
.portfolio-carousel li.portfolio.three-column:after,
.portfolio-carousel li.portfolio.three-column.active:before,
.portfolio-carousel li.portfolio.three-column.active:after,
.portfolio-carousel li.portfolio.three-column.center:before,
.portfolio-carousel li.portfolio.three-column.center:after {
    content: none !important;
    display: none !important;
}

/* 3) امنع العناصر الداخلية تعمل بوردر/راديوس خاص يكسر شكل الإطار */
.portfolio-carousel .portfolio-thumb,
.portfolio-carousel .portfolio-detail {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.portfolio-carousel-wrapper .owl-item,
.portfolio-carousel-wrapper .slick-slide {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}


.fade-slider {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.fade-slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: fadeSlider 12s infinite;
}

/* Timing control */
.fade-slider img:nth-child(1) {
  animation-delay: 0s;
}
.fade-slider img:nth-child(2) {
  animation-delay: 4s;
}
.fade-slider img:nth-child(3) {
  animation-delay: 8s;
}

@keyframes fadeSlider {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  33%  { opacity: 1; }
  41%  { opacity: 0; }
  100% { opacity: 0; }
}