<?

$params['Home'] = Home;
$params['News'] = News;
$params['pages']= pages;
$params['Solutions']= Solutions;
$params['Partners']= Partners;
$params['Projects']= Projects;
$params['Products']= Products;
$params['Services']= Services;
$params['Files_Center']= Files_Center;
$params['Clients']= Clients;
$params['Career']= Career;
$params['About']= About;
$params['Contact']= Contact;
$params['Video']= Video;
$params['Programs']= Programs;
$params['Library']= Library;
$params['Gallery']= Gallery;
$params['Directory1']= Directory1;
$params['Users']= Users;
$params['Events']= Events;


$params['Send_Msg'] = Send_Msg;
$params['Name'] = Name;
$params['EMail'] = EMail;
$params['Subject'] = Subject;
$params['Phone'] = Phone;
$params['Tel'] = Tel;
$params['To'] = To;
$params['Message'] = Message;
$params['About_US'] = About_US;
$params['More'] = More;
$params['Succ_Send_Msg'] = Succ_Send_Msg;
$params['PLEASE_WAIT'] = PLEASE_WAIT;
$params['Send'] = Send;
$params['Select'] = Select;
$params['View'] = View;

$params['You_are_here'] = You_are_here;
$params['Error'] = Error;
$params['Error_Follow_Wrong_Url'] = Error_Follow_Wrong_Url;
$params['Back'] = Back;

$params['Date_Var'] = Date_Var;
$params['News_Archives'] = News_Archives;
$params['Date_Const'] = Date_Const;

$params['Next_Page'] = Next_Page;
$params['Previous_Page'] = Previous_Page;
$params['Our_Clients'] = Our_Clients;
$params['Our_partners'] = Our_partners;

$params['Release_Date'] = Release_Date;
$params['Categories'] = Categories;
$params['Our_Products'] = Our_Products;
$params['RelatedProducts'] = RelatedProducts;
$params['Download_Product'] = Download_Product;
$params['Tweet'] = Tweet;
$params['Category'] = Category;
$params['Details'] = Details;
$params['Price'] = Price;
$params['Product_gallery'] = Product_gallery;
$params['Click_Img'] = Click_Img;
$params['Read_More'] = Read_More;
$params['RelatedServices'] = RelatedServices;
$params['RelatedProjects'] = RelatedProjects;
$params['RANDOM_PROJECT'] = RANDOM_PROJECT;
$params['RANDOM_PRODUCT'] = RANDOM_PRODUCT;
$params['RelatedSolutions'] = RelatedSolutions;
$params['RANDOM_SOLUTION'] = RANDOM_SOLUTION;
$params['FILE_TITLE'] = FILE_TITLE;
$params['PDF'] = PDF;
$params['Download'] = Download;

$params['RelatedVideos'] = RelatedVideos;

$params['Careers'] = Careers;

$params['Send'] = Send;
$params['UPLOAD_APP'] = UPLOAD_APP;
$params['Post_CV_Msg'] = Post_CV_Msg;
$params['First_Name'] = First_Name;
$params['Last_Name'] = Last_Name;
$params['EMail'] = EMail;
$params['Position'] = Position;
$params['Phone'] = Phone;
$params['JobVacancy'] = JobVacancy;
$params['Select_Country'] = Select_Country;
$params['Message'] = Message;
$params['File_Types'] = File_Types;
$params['Result'] = Result;
$params['Error_CV_Upload_Msg'] = Error_CV_Upload_Msg;
$params['CV_Sent_Succ_Msg'] = Succ_CV_Sent_Msg;
$params['Thank_You'] = Thank_You;
$params['Sorry'] = Sorry;
$params['Error'] = Error;
$params['Error_CV_Sent_Msg'] = Error_CV_Sent_Msg;

$params['Event_Details'] = Event_Details;
$params['Organizer'] = Organizer;
$params['Website_URL'] = Website_URL;
$params['Address'] = Address;
$params['Tel1'] = Tel1;
$params['Tel2'] = Tel2;
$params['Site_MAP'] = Site_MAP;
$params['All_Events_List'] = All_Events_List;
$params['Today'] = Today;
$params['Events_Calendar'] = Events_Calendar;

$params['Page_Facebook'] = Page_Facebook;
$params['Page_Tiwtter'] = Page_Tiwtter;
$params['Page_Instagram'] = Page_Instagram;
$params['Page_Youtube'] = Page_Youtube;
$params['Page_Linkedin'] = Page_Linkedin;
$params['Whatsapp'] = Whatsapp;
$params['Android_URL'] = Android_URL;
$params['IOS_URL'] = IOS_URL;

$params['RelatedDirectory'] = RelatedDirectory;
$params['Representatives'] = Representatives;
$params['Relatednews'] = Relatednews;
$params['Select_To'] = Select_To;
$params['Finduson'] = Finduson;
$params['FollowUs'] = FollowUs;
$params['Followers'] = Followers;
$params['Succ_Send_Msg_Email'] = Succ_Send_Msg_Email;


$params['YourName'] = YourName;
$params['Email_Address'] = Email_Address;
$params['Your_Comment'] = Your_Comment;
$params['Search'] = Search;
$params['Search_Result'] = Search_Result;
$params['Load_More'] = Load_More;


?><!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>العروض</title>
<base href="https://exo-films.com/">

<meta name="keywords" content="" />
<meta name="description" content="" />
 <meta name="author" content="DevelopWay DWCMS" />
 
 
 <!-- Open Graph -->
<meta property="og:title" content="العروض">
<meta property="og:description" content="">
<meta property="og:image" content="https://exo-films.com/assets/images/default-share.jpg">
<meta property="og:url" content="https://exo-films.com/%D8%A7%D9%84%D8%B9%D8%B1%D9%88%D8%B6/">
<meta property="og:type" content="website">
<meta property="og:locale" content="ar_AR">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="العروض">
<meta name="twitter:description" content="">
<meta name="twitter:image" content="https://exo-films.com/assets/images/default-share.jpg">
<meta name="twitter:url" content="https://exo-films.com/%D8%A7%D9%84%D8%B9%D8%B1%D9%88%D8%B6/">


 <!-- fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Alexandria:wght@100..900&display=swap" rel="stylesheet">


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">

   <!-- <link rel="stylesheet" href="assets/css/bootstrap.min.css">-->
    <link rel="stylesheet" href="assets/css/animate.min.css">
    <link rel="stylesheet" href="assets/css/custom-animate.css">
    <link rel="stylesheet" href="assets/css/swiper.min.css">
    <link rel="stylesheet" href="assets/css/font-awesome-all.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
    <link rel="stylesheet" href="assets/css/jarallax.css">
    <link rel="stylesheet" href="assets/css/jquery.magnific-popup.css">
    <link rel="stylesheet" href="assets/css/flaticon.css">
    <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="assets/css/owl.theme.default.min.css">
    <link rel="stylesheet" href="assets/css/nice-select.css">
    <link rel="stylesheet" href="assets/css/jquery-ui.css">
    <link rel="stylesheet" href="assets/css/aos.css">
    <link rel="stylesheet" href="assets/css/odometer.min.css">
    <link rel="stylesheet" href="assets/css/twentytwenty.css">

    <!-- template styles -->
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/responsive.css">

 
<style>
.dw-alt-services-section{
    position:relative;
    overflow:hidden;
}

.dw-alt-services-section .download-app-one__inner{
    position:relative;
    z-index:2;
}

.dw-alt-list{
    width:100%;
    margin-top:45px;
}

/* كل خدمة صف كامل */
.dw-alt-item{
    width:100%;
    display:table !important;
    table-layout:fixed !important;
    border-collapse:separate !important;
    border-spacing:38px 0 !important;
    margin-bottom:55px !important;
    direction:ltr !important;
}

.dw-alt-item:not(:last-child){
    border-bottom:1px solid rgba(255,255,255,.14) !important;
    padding-bottom:45px !important;
}

/* الخلايا */
.dw-alt-cell{
    display:table-cell !important;
    vertical-align:middle !important;
}

.dw-alt-media{
    width:430px !important;
    position:relative !important;
}

.dw-alt-content{
    width:auto !important;
    direction:rtl !important;
    text-align:right !important;
    color:#fff !important;
}

/* الصورة */
.dw-alt-img-wrap{
    width:430px !important;
    height:270px !important;
    position:relative !important;
    overflow:visible !important;
}

.dw-alt-img-link{
    display:block !important;
    width:100% !important;
    height:100% !important;
    border-radius:5px !important;
    overflow:hidden !important;
    position:relative !important;
    z-index:2 !important;
    background:#111 !important;
}

.dw-alt-img-link img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block !important;
    transition:transform .45s ease !important;
}

.dw-alt-item:hover .dw-alt-img-link img{
    transform:scale(1.05) !important;
}

/* الزخرفة البيضاء */
.dw-alt-img-wrap:before,
.dw-alt-img-wrap:after{
    content:"" !important;
    position:absolute !important;
    width:85px !important;
    height:85px !important;
    z-index:3 !important;
    pointer-events:none !important;
}

.dw-alt-img-wrap:before{
    top:-8px !important;
    right:-8px !important;
    border-top:5px solid #fff !important;
    border-right:5px solid #fff !important;
}

.dw-alt-img-wrap:after{
    left:-8px !important;
    bottom:-8px !important;
    border-left:5px solid #fff !important;
    border-bottom:5px solid #fff !important;
}

/* عكس الزخرفة عندما تكون الصورة يسار */
.dw-alt-item--left .dw-alt-img-wrap:before{
    right:auto !important;
    left:-8px !important;
    border-right:0 !important;
    border-left:5px solid #fff !important;
}

.dw-alt-item--left .dw-alt-img-wrap:after{
    left:auto !important;
    right:-8px !important;
    border-left:0 !important;
    border-right:5px solid #fff !important;
}

/* التصنيف */
.dw-alt-tag{
    position:absolute !important;
    right:16px !important;
    bottom:16px !important;
    z-index:4 !important;
    background:#111 !important;
    color:#fff !important;
    padding:8px 16px !important;
    border-radius:5px !important;
    font-size:14px !important;
    font-weight:700 !important;
    line-height:1.4 !important;
    direction:rtl !important;
}

.dw-alt-item--left .dw-alt-tag{
    right:auto !important;
    left:16px !important;
}

/* الشعار */
.dw-alt-logo{
    margin-bottom:14px !important;
}

.dw-alt-logo img{
    max-width:115px !important;
    height:auto !important;
    display:block !important;
}

/* العنوان */
.dw-alt-title{
    margin:0 0 14px !important;
    font-size:32px !important;
    line-height:1.4 !important;
    font-weight:800 !important;
    color:#fff !important;
}

.dw-alt-title a{
    color:#fff !important;
    text-decoration:none !important;
}

.dw-alt-title a:hover{
    color:#24a9d8 !important;
}

/* الوصف */
.dw-alt-desc{
    margin:0 0 20px !important;
    font-size:16px !important;
    line-height:1.9 !important;
    color:rgba(255,255,255,.88) !important;
}
.dw-alt-more{
    display:inline-flex !important;
    align-items:center !important;
    gap:8px !important;
    margin-right:auto !important;
    margin-left:0 !important;
}


/* التابلت والموبايل */
@media (max-width:991px){

    .dw-alt-list{
        margin-top:30px !important;
        overflow:hidden !important;
    }

    .dw-alt-item{
        display:flex !important;
        flex-direction:column !important;
        width:100% !important;
        table-layout:auto !important;
        border-spacing:0 !important;
        margin-bottom:35px !important;
        direction:rtl !important;
        overflow:hidden !important;
    }

    .dw-alt-cell{
        display:block !important;
        width:100% !important;
        max-width:100% !important;
    }

    .dw-alt-media{
        order:1 !important;
        width:100% !important;
        max-width:100% !important;
        margin-bottom:20px !important;
    }

    .dw-alt-content{
        order:2 !important;
        width:100% !important;
        max-width:100% !important;
        text-align:right !important;
        padding:0 2px !important;
    }

    .dw-alt-img-wrap{
        width:100% !important;
        max-width:100% !important;
        height:240px !important;
        margin:0 auto !important;
        overflow:visible !important;
    }

    .dw-alt-title{
        font-size:24px !important;
        line-height:1.45 !important;
        margin-bottom:12px !important;
    }

    .dw-alt-desc{
        font-size:15px !important;
        line-height:1.8 !important;
        margin-bottom:18px !important;
    }

    .dw-alt-logo img{
        max-width:95px !important;
    }

    .dw-alt-more{
        margin-right:auto !important;
        margin-left:0 !important;
    }

    .dw-alt-img-wrap:before,
    .dw-alt-img-wrap:after{
        width:65px !important;
        height:65px !important;
    }

    .dw-alt-img-wrap:before{
        top:-5px !important;
        right:5px !important;
        left:auto !important;
        border-top:4px solid #fff !important;
        border-right:4px solid #fff !important;
        border-left:0 !important;
    }

    .dw-alt-img-wrap:after{
        left:5px !important;
        right:auto !important;
        bottom:-5px !important;
        border-left:4px solid #fff !important;
        border-bottom:4px solid #fff !important;
        border-right:0 !important;
    }

    .dw-alt-item--left .dw-alt-img-wrap:before{
        left:5px !important;
        right:auto !important;
        border-left:4px solid #fff !important;
        border-right:0 !important;
    }

    .dw-alt-item--left .dw-alt-img-wrap:after{
        right:5px !important;
        left:auto !important;
        border-right:4px solid #fff !important;
        border-left:0 !important;
    }
}

/* الموبايل الصغير */
@media (max-width:575px){

    .dw-alt-item{
        margin-bottom:30px !important;
        padding-bottom:34px !important;
    }

    .dw-alt-img-wrap{
        height:210px !important;
    }

    .dw-alt-title{
        font-size:21px !important;
    }

    .dw-alt-desc{
        font-size:14px !important;
    }

    .dw-alt-tag{
        font-size:12px !important;
        padding:7px 11px !important;
        right:12px !important;
        bottom:12px !important;
    }

    .dw-alt-item--left .dw-alt-tag{
        left:12px !important;
        right:auto !important;
    }

    .dw-alt-more{
        padding:9px 18px !important;
        font-size:14px !important;
    }
}


  /* ===== Compare Table ===== */
  .service-details__table-wrap {
    width: 100%;
    margin: 30px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  }

  .service-details__compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    font-family: inherit;
    text-align: right;
    direction: rtl;
    min-width: 560px; /* يمنع الضغط الشديد على الموبايل */
  }

  .service-details__compare-table thead tr {
  background-color: var(--thm-primary, #259eca);
    color: #ffffff;
  }

  .service-details__compare-table thead th {
    padding: 14px 18px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.3px;
    white-space: nowrap;
    border: none;
  }

  .service-details__compare-table tbody tr {
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s ease;
  }

  .service-details__compare-table tbody tr:last-child {
    border-bottom: none;
  }

  .service-details__compare-table tbody tr:nth-child(odd) {
    background-color: #ffffff;
  }

  .service-details__compare-table tbody tr:nth-child(even) {
    background-color: #f8f8f8;
  }

  .service-details__compare-table tbody tr:hover {
    background-color: #d9f3fc;
  }

  .service-details__compare-table tbody td {
    padding: 13px 18px;
    color: #444;
    font-size: 14px;
    line-height: 1.6;
    border: none;
  }

  .service-details__compare-table tbody td:first-child {
    color: #1a1a1a;
    font-weight: 600;
  }

  /* ===== Badge للقيم ===== */
  .service-details__compare-table tbody td:not(:first-child):not(:last-child) {
    text-align: center;
  }

  /* ===== Responsive — Mobi Card Layout ===== */
  @media (max-width: 600px) {
    .service-details__table-wrap {
      box-shadow: none;
      border-radius: 0;
      overflow-x: visible;
    }

    .service-details__compare-table {
      min-width: unset;
      display: block;
    }

    .service-details__compare-table thead {
      display: none; /* إخفاء الهيدر وعرضه كـ label */
    }

    .service-details__compare-table tbody {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .service-details__compare-table tbody tr {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      border: 1px solid #e8e8e8;
      border-radius: 10px;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    }

    .service-details__compare-table tbody td {
      padding: 10px 14px;
      font-size: 13px;
      border-bottom: 1px solid #f0f0f0;
      border-left: none;
      position: relative;
    }

    /* اسم الفيلم يأخذ عرض كامل */
    .service-details__compare-table tbody td:first-child {
      grid-column: 1 / -1;
      background-color: var(--thm-primary, #e8272a);
      color: #fff !important;
      font-size: 14px;
      font-weight: 700;
      text-align: center;
      border-bottom: none;
      padding: 12px 14px;
    }

    /* label من data-label */
    .service-details__compare-table tbody td:not(:first-child)::before {
      content: attr(data-label);
      display: block;
      font-size: 11px;
      font-weight: 700;
      color: #999;
      margin-bottom: 4px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .service-details__compare-table tbody td:not(:first-child):not(:last-child) {
      text-align: right;
    }
  }
  
  
  .fbc{
      justify-content: center!important;  align-items: center!important;
  }
  
  
  @media (max-width: 768px) {

    .why-choose-three__list{
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px;
        padding: 0 !important;
        margin: 0 !important;
    }

    .why-choose-three__list > li{
        flex: 0 0 calc(33.333% - 8px) !important;
        max-width: calc(33.333% - 8px) !important;
        display: flex !important;
        min-width: 0 !important;
    }

    .why-choose-three__list-single{
        padding: 20px 10px !important;
        width: 100%;
        text-align: center;
    }

    .why-choose-three__list-title{
        font-size: 15px !important;
        line-height: 1.4 !important;
        margin: 0 !important;
    }

    .why-choose-three__list .icon span{
        font-size: 28px !important;
    }

    /* تصحيح الميل لليمين */
    .why-choose-three__list-arrow{
        right: auto !important;
        left: auto !important;
    }
}

.shadow-box li a {
    font-size: 13px !important; /* تصغير واضح ~30–35% حسب خطك */
}

@media (max-width: 768px) {
    .shadow-box li a {
        line-height: 1.9 !important;
        padding: 6px 10px !important;
        display: block;
    }
}
  
  
  @media (max-width: 768px) {

    /* إلغاء أي تحديد ارتفاع من الثيم */
    ul.shadow-box {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    ul.shadow-box li {
        height: auto !important;
        position: relative !important;
    }

    ul.shadow-box li a {
        display: block !important;
        padding: 14px 14px !important;
        line-height: 2 !important;
        white-space: normal !important;
        height: auto !important;
        position: relative !important;
    }

}


@media (max-width: 768px) {

    ul.shadow-box {
        right: 0 !important;
        left: 0 !important;
        margin: 0 auto !important;
        transform: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: right !important;
    }

}


.mobile-nav__social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  direction: ltr; /* مهم جدًا لمنع كسر RTL داخل الأيقونات */
}

.mobile-nav__social a {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  text-align: center;

  font-size: 16px;
  line-height: 1;

  color: var(--servixa-white);
  transition: 0.5s;
}


@media (max-width: 768px) {

  .mobile-nav__social {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    flex-wrap: nowrap !important;   /* مهم: يمنع النزول */
    gap: 4px !important;            /* تقليل المسافة */

    width: 100% !important;

    overflow-x: auto !important;   /* لو ضاق فقط سكرول خفيف */
    overflow-y: hidden !important;
  }

  .mobile-nav__social a {
    width: 28px !important;
    height: 28px !important;

    flex: 0 0 28px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;

    font-size: 12px !important;
    line-height: 1 !important;

    margin: 0 !important;

    transition: transform 0.2s ease !important;
  }

  .mobile-nav__social a:active {
    transform: scale(1.05) !important;
  }
}


.site-footer-three__social {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  gap: 10px !important;
}

/* مهم: تصفير أي margin قديم */
.site-footer-three__social a {
  margin: 0 !important;
}


@media (max-width: 767px) {

    .pricing-two__price-list li .content-inner{
        max-width: calc(100% - 85px);
    }

    .pricing-two__price-list li .content{
        padding-right: 25px;
        padding-left: 55px;
    }

    .pricing-two__price-list-2 li .content{
        padding-right: 55px;
        padding-left: 25px;
    }

}


@media (max-width: 767px){

    .pricing-two__price-list li .content-inner{
        max-width: calc(100% - 110px);
        width: 100%;
    }

    .pricing-two__price-list li .content{
        padding-left: 45px;
        padding-right: 45px;
    }

    .pricing-two__price-list-2 li .content{
        padding-right: 40px;
        padding-left: 30px;
    }

    .pricing-two__price span{
        width: 46px;
        height: 46px;
        font-size: 13px;
    }

}


.faq-one__left .faq-one-accrodion .accrodion-title h4{
    position: relative;
    padding-left: 60px;
}

/* السهم */
.faq-one__left .faq-one-accrodion .accrodion-title h4::before{
    left: 0 !important;
    right: auto !important;
}

/* موبايل */
@media (max-width: 767px){

    .faq-one__left .faq-one-accrodion .accrodion-title{
        direction: rtl;
    }

    .faq-one__left .faq-one-accrodion .accrodion-title h4{
        padding-left: 55px !important;
        padding-right: 0 !important;
    }

    .faq-one__left .faq-one-accrodion .accrodion-title h4::before{
        left: 0 !important;
        right: auto !important;
    }
}


@media (max-width: 767px){

    .service-details__title-1{
        font-size: 24px;
        line-height: 1.5 !important;
        margin-top: 25px;
        margin-bottom: 30px;
        color:#259dc9;
    }

}
</style>
	
	
	<link rel="apple-touch-icon" sizes="57x57" href="images/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="images/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="images/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="images/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="images/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="images/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="images/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
<link rel="manifest" href="images/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="images/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">


<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-18105921021">
</script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'AW-18105921021');
</script>


<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-4K9QN0F6SE"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-4K9QN0F6SE');
</script>


<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-M7XM77CG');</script>
<!-- End Google Tag Manager -->


    </head>

<body class="custom-cursor">
    
    
    <!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-M7XM77CG"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
    
    
    <div class="custom-cursor__cursor"></div>
    <div class="custom-cursor__cursor-two"></div>


    <!--Start Preloader-->
<div id="preloader">
    <div class="preloader">
        <span></span>
        <span></span>
    </div>
</div>
<!--End Preloader-->


    <div class="page-wrapper">
	
	
    <!-- Header Start -->
	
	        <header class="main-header-three">
    <div class="main-menu-three__top">
        <div class="container">
            <div class="main-menu-three__top-inner">
                <ul class="list-unstyled main-menu-three__contact-list">
                    <li>
                        <div class="icon">
                          <i class="icon-phone-call"></i>
                        </div>
                        <div class="text"><!--تواصل مع مركز الخدمة-->
                            <p><a href="tel:0543635677">0543635677</a></p>
                        </div>
                    </li>
                    <li>
                        <div class="icon">
                            <i class="icon-email"></i>
                        </div>
                        <div class="text">
                            <p><a href="mailto:info@exo-films.com">info@exo-films.com</a>
                            </p>
                        </div>
                    </li>
                </ul>
                <div class="main-menu-three__top-right"  >
             
                    <div class="main-menu-three__social" >
                        <a href=""><i class="fbc fab fa-brands fa-x-twitter"></i></a>
                        <a href=""><i class="fbc fab fa-facebook"></i></a>
                        <a href="Youtube"><i class="fbc fab fa-youtube"></i></a>
                        <a href=""><i class="fbc fab fa-instagram"></i></a>
						<a href=""><i class="fbc fab fa-brands fa-tiktok"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
	
	
    <nav class="main-menu">
        <div class="main-menu-three__wrapper">
            <div class="container">
                <div class="main-menu-three__wrapper-inner">
                    <div class="main-menu-three__left">
                        <div class="main-menu-three__logo">
                            <a href="/"><img src="assets/images/resources/logo-1.png" alt=""></a>
                        </div>
                    </div>
                    <div class="main-menu-three__main-menu-box">
                        <a href="#" class="mobile-nav__toggler"><i class="fa fa-bars"></i></a>
                        <ul class="main-menu__list">
						
	<li >
                <a class="nav-link"href="/">الرئيسية</a>
                                   
 </li>
<li class="dropdown">
 <a  href="#">الخدمات</a>

<ul class="shadow-box">
    <li>
        <a href="خدماتنا/1/1/تظليل-زجاج-السيارة-بفيلم-عازل-حراري-احترافي">تظليل زجاج السيارة بفيلم عازل حراري احترافي
        </a>
    </li>
    <li>
        <a href="خدماتنا/1/2/حماية-طلاء-السيارة-ppf-(فلم-حماية-شفاف)">حماية طلاء السيارة PPF (فلم حماية شفاف)
        </a>
    </li>
    <li>
        <a href="خدماتنا/1/3/نانو-سيراميك-للسيارات-—-حماية-طلاء-تدوم-سنوات-ولمعان-لا-يُضاهى">نانو سيراميك للسيارات — حماية طلاء تدوم سنوات ولمعان لا يُضاهى
        </a>
    </li>
    <li>
        <a href="خدماتنا/1/4/تلميع-سيارات-احترافي-—-استعد-لمعان-طلاء-سيارتك-وتخلص-من-الخدوش-الخفيفة">تلميع سيارات احترافي — استعد لمعان طلاء سيارتك وتخلص من الخدوش الخفيفة
        </a>
    </li>
    <li>
        <a href="خدماتنا/1/5/تجليد-سيارات-بالفينيل-—-غيّر-لون-سيارتك-وشخصيتها-بدون-دهان-وبدون-التزام-دائم">تجليد سيارات بالفينيل — غيّر لون سيارتك وشخصيتها بدون دهان وبدون التزام دائم
        </a>
    </li>
    <li>
        <a href="خدماتنا/1/6/تنجيد-سيارات-احترافي-|-تجديد-كراسي-وأرضيات-وداخلية-السيارة">تنجيد سيارات احترافي | تجديد كراسي وأرضيات وداخلية السيارة
        </a>
    </li>
    <li>
        <a href="خدماتنا/1/7/إصلاح-وتقويم-جنوط-السيارات-|-تلوين-وبودر-كوت-احترافي">إصلاح وتقويم جنوط السيارات | تلوين وبودر كوت احترافي
        </a>
    </li>
    <li>
        <a href="خدماتنا/1/8/تركيب-داش-كام-للسيارات-|-كاميرا-مراقبة">تركيب داش كام للسيارات | كاميرا مراقبة
        </a>
    </li>
    <li>
        <a href="خدماتنا/2/9/عازل-حراري-للمباني-(تظليل-زجاج-المنازل-والمكاتب)">عازل حراري للمباني (تظليل زجاج المنازل والمكاتب)
        </a>
    </li>
</ul>
</li><li>
    <a class="nav-link" href="/العروض/">العروض
    </a>
</li>

<li>
    <a class="nav-link" href="/من-نحن/">من نحن
    </a>
</li>

<li>
    <a class="nav-link" href="/اتصل-بنا/">إتصل بنا
    </a>
</li>

</ul>


                    </div>
                   <!-- <div class="main-menu-three__right">
                        <div class="main-menu-three__right-content">
                           
                            <div class="main-menu-three__btn-box">
                                <a href="%D8%A7%D8%AD%D8%AC%D8%B2-%D9%85%D9%88%D8%B9%D8%AF%D9%83-%D8%A7%D9%84%D8%A2%D9%86/" class="thm-btn">احجز موعدك الآن!
                                    <span><i class="icon-back"></i></span>
                                </a>
                            </div>
                        </div>
                    </div> -->
                </div>
            </div>
        </div>
    </nav>
</header>


<div class="stricky-header stricked-menu main-menu main-menu-three">
    <div class="sticky-header__content"></div><!-- /.sticky-header__content -->
</div>


<!-- Error page because of error cat/id pass --><!-- end check_cat_id --><!-- main offers page -- without cat parameter pass-->
	
	
	    <section class="page-header">
    <div class="page-header__bg" style="background-image: url(assets/images/backgrounds/offers02.jpg);">
    </div>
    <div class="container">
        <div class="page-header__inner">
         
            <h3>العروض</h3>
            <div class="thm-breadcrumb__inner">
                <ul class="thm-breadcrumb list-unstyled">
                    <li><a href="/">الرئيسية</a></li>
                    <li><span class="fas fa-angle-right"></span></li>
                    <li>العروض</li>
                </ul>
            </div>
        </div>
    </div>
</section>


    <!--Project Page Start-->
    <section class="project-page">
        <div class="container">
            <div class="project-page__inner">
                <div class="row">				
                    <!--Project One Single Start-->
                    <div class="col-xl-4 col-lg-4 col-md-6">
                        <div class="project-one__single">
                            <div class="project-one__img-box">
                                <div class="project-one__img">
                                    <img src="offers/21.jpg
" alt="عرض النانو سيراميك">
                                </div>
                                <div class="project-one__arrow">
                                    <a href="offers/21.jpg
" class="img-popup"><span class="icon-next"></span></a>
                                </div>
                                <div class="project-one__content-inner">
                                    <div class="project-one__content">
                                        <div class="project-one__sub-title-and-shape">
                                            <span class="project-one__sub-title">تفاصيل العرض</span>
                                            <div class="project-one__sub-title-bdr"></div>
                                        </div>
                                        <h3 class="project-one__title">   <a class="btn-main fx-slide" href="العروض/6/%D8%B9%D8%B1%D8%B6-%D8%A7%D9%84%D9%86%D8%A7%D9%86%D9%88-%D8%B3%D9%8A%D8%B1%D8%A7%D9%85%D9%8A%D9%83">عرض النانو سيراميك</a></h3>
                                    </div>
                              
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--Project One Single End-->	
                </div>
            </div>
        </div>
    </section>
    <!--Project Page End--><!-- end check_main --><!-- end check_err -->


        <!--Site Footer Three Start-->
<footer class="site-footer-three">
    <div class="site-footer-three__bg-color"></div>
    <div class="site-footer-three__bg-shape" style="background-image: url(assets/images/shapes/site-footer-three-bg-shape.png);"></div>
    <div class="container">
        <div class="site-footer-three__top">
            <div class="row">
                <div class="col-xl-3 wow fadeInUp" data-wow-delay="100ms">
                    <div class="footer-widget-three__column footer-widget-three__about">
                        <div class="footer-widget-three__logo">
                            <a href="/"><img src="assets/images/resources/logo-1.png" alt=""></a>
                        </div>
                        <p class="footer-widget-three__about-text">.. </p>
                 
                    </div>
                </div>
                <div class="col-xl-9">
                    <div class="footer-widget-three__right">
             
                        <div class="footer-widget-three__right-bottom">
                            <div class="row">
                                <div class="col-xl-4 col-lg-4 col-md-4 wow fadeInUp" data-wow-delay="200ms">
                                    <div class="footer-widget-three__column footer-widget-three__usefull-link">
                                        <div class="footer-widget-three__title-box">
                                            <h3 class="footer-widget-three__title"></h3>
                                        </div>
                                        <div class="footer-widget-three__link-box">
                                            <ul class="footer-widget-three__link list-unstyled">
                                                     	 <li><a href="/">الرئيسية</a></li>  
                           
                        <li><a href="/خدماتنا/">الخدمات</a></li>
<li>    
              
    <a  href="/العروض/">العروض
    </a>
</li>

<li>
    <a  href="/من-نحن/">من نحن
    </a>
</li>

<li>
    <a  href="/اتصل-بنا/">إتصل بنا
    </a>
</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-4 col-lg-4 col-md-4 wow fadeInUp" data-wow-delay="300ms">
                                    <div class="footer-widget-three__column footer-widget-three__services">
                                        <div class="footer-widget-three__title-box">
                                            <h3 class="footer-widget-three__title">الخدمات</h3>
                                        </div>
                                        <ul class="footer-widget-three__link list-unstyled">
    <li>
        <a href="خدماتنا/1/1/تظليل-زجاج-السيارة-بفيلم-عازل-حراري-احترافي">تظليل زجاج السيارة بفيلم عازل حراري احترافي
        </a>
    </li>
    <li>
        <a href="خدماتنا/1/2/حماية-طلاء-السيارة-ppf-(فلم-حماية-شفاف)">حماية طلاء السيارة PPF (فلم حماية شفاف)
        </a>
    </li>
    <li>
        <a href="خدماتنا/1/3/نانو-سيراميك-للسيارات-—-حماية-طلاء-تدوم-سنوات-ولمعان-لا-يُضاهى">نانو سيراميك للسيارات — حماية طلاء تدوم سنوات ولمعان لا يُضاهى
        </a>
    </li>
    <li>
        <a href="خدماتنا/1/4/تلميع-سيارات-احترافي-—-استعد-لمعان-طلاء-سيارتك-وتخلص-من-الخدوش-الخفيفة">تلميع سيارات احترافي — استعد لمعان طلاء سيارتك وتخلص من الخدوش الخفيفة
        </a>
    </li>
    <li>
        <a href="خدماتنا/1/5/تجليد-سيارات-بالفينيل-—-غيّر-لون-سيارتك-وشخصيتها-بدون-دهان-وبدون-التزام-دائم">تجليد سيارات بالفينيل — غيّر لون سيارتك وشخصيتها بدون دهان وبدون التزام دائم
        </a>
    </li>
    <li>
        <a href="خدماتنا/1/6/تنجيد-سيارات-احترافي-|-تجديد-كراسي-وأرضيات-وداخلية-السيارة">تنجيد سيارات احترافي | تجديد كراسي وأرضيات وداخلية السيارة
        </a>
    </li>
    <li>
        <a href="خدماتنا/1/7/إصلاح-وتقويم-جنوط-السيارات-|-تلوين-وبودر-كوت-احترافي">إصلاح وتقويم جنوط السيارات | تلوين وبودر كوت احترافي
        </a>
    </li>
    <li>
        <a href="خدماتنا/1/8/تركيب-داش-كام-للسيارات-|-كاميرا-مراقبة">تركيب داش كام للسيارات | كاميرا مراقبة
        </a>
    </li>
    <li>
        <a href="خدماتنا/2/9/عازل-حراري-للمباني-(تظليل-زجاج-المنازل-والمكاتب)">عازل حراري للمباني (تظليل زجاج المنازل والمكاتب)
        </a>
    </li>

                                        </ul>
                                    </div>
                                </div>
                                <div class="col-xl-4 col-lg-4 col-md-4 wow fadeInUp" data-wow-delay="400ms">
                                    <div class="footer-widget-three__contact-box">
                                        <div class="footer-widget-three__title-box">
                                            <h3 class="footer-widget-three__title">إتصل بنا</h3>
                                        </div>
                                        <ul class="footer-widget-three__contact list-unstyled">
                                            <li>
                                                <div class="icon">
                                                    <span class="icon-call"></span>
                                                </div>
                                                <div class="content">
                                                    <p><a href="tel:الهاتف">0543635677</a></p>
                                                 
                                                </div>
                                            </li>
                                            <li>
                                                <div class="icon">
                                                    <span class="icon-mail"></span>
                                                </div>
                                                <div class="content">
                                                    <p><a href="mailto:البريد الإلكتروني">info@exo-films.com</a>
                                                    </p>
                                                   
                                                </div>
                                            </li>
                                            <li>
                                                <div class="icon">
                                                    <span class="icon-pin"></span>
                                                </div>
                                                <div class="content">
                                                    <p>طريق الأمير سلطان الفرعي، جدة
</p>
                                                </div>
                                            </li>
                                        </ul>
										
										
				<div class="site-footer-three__social">
                                <a href="" class="fab fa-twitter"></a>
                <a href="" class="fab fa-facebook-square"></a>
                <a href="" class="fab fa-youtube"></a>
                <a href="" class="fab fa-instagram"></a>
				<a href="" class="fab fa-tiktok"></a>
                            </div>
							
							
                                    </div>
                                </div>
                            </div>
          
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="site-footer-three__bottom">
        <div class="container">
            <div class="site-footer-three__bottom-inner">
			   <ul class="list-unstyled site-footer-three__bottom-menu">
                    <li><a href="/">© 2026 جميع الحقوق محفوظة لـ EXOFILM </a></li>
                  
                </ul>
				
                <p class="site-footer-three__bottom-text">Powered By <a style="color:#fff;" href="http://www.developway.com" target="_blank">DevelopWay</a></span>  </p>
             
            </div>
        </div>
    </div>
</footer>
<!--Site Footer Three End-->
    </div>
	
	
    <div class="mobile-nav__wrapper">
    <div class="mobile-nav__overlay mobile-nav__toggler"></div>
    <!-- /.mobile-nav__overlay -->
    <div class="mobile-nav__content">
        <span class="mobile-nav__close mobile-nav__toggler"><i class="fa fa-times"></i></span>
        <div class="logo-box">
            <a href="/" aria-label="logo image"><img src="assets/images/resources/logo-1.png" width="140" alt=""></a>
        </div>
        <!-- /.logo-box -->
        <div class="mobile-nav__container"></div>
        <!-- /.mobile-nav__container -->

        <ul class="mobile-nav__contact list-unstyled">
            <li>
                <i class="fa fa-envelope"></i>
                <a href="mailto:البريد الإلكتروني">البريد الإلكتروني</a>
            </li>
            <li>
                <i class="fas fa-phone"></i>
                <a href="tel:0543635677">0543635677</a>
            </li>
        </ul><!-- /.mobile-nav__contact -->
        <div class="mobile-nav__top">
            <div class="mobile-nav__social">
                <a href="" class="fab fa-twitter"></a>
                <a href="" class="fab fa-facebook-square"></a>
                <a href="" class="fab fa-youtube"></a>
                <a href="" class="fab fa-instagram"></a>
				<a href="" class="fab fa-tiktok"></a>
	 
            </div><!-- /.mobile-nav__social -->
        </div><!-- /.mobile-nav__top -->

    </div>
    <!-- /.mobile-nav__content -->
</div>
  

<!-- End Search Popup -->
    <a href="#" data-target="html" class="scroll-to-target scroll-to-top">
    <span class="scroll-to-top__wrapper"><span class="scroll-to-top__inner"></span></span>
    <span class="scroll-to-top__text"> الانتقال للأعلى</span>
</a>
    <script src="assets/js/jquery-latest.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/jarallax.min.js"></script>
<script src="assets/js/jquery.ajaxchimp.min.js"></script>
<script src="assets/js/jquery.appear.min.js"></script>
<script src="assets/js/swiper.min.js"></script>
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<script src="assets/js/jquery.validate.min.js"></script>
<script src="assets/js/wNumb.min.js"></script>
<script src="assets/js/wow.js"></script>
<script src="assets/js/isotope.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<script src="assets/js/jquery-ui.js"></script>
<script src="assets/js/jquery.nice-select.min.js"></script>
<script src="assets/js/marquee.min.js"></script>
<script src="assets/js/countdown.min.js"></script>
<script src="assets/js/jquery-sidebar-content.js"></script>
<script src="assets/js/aos.js"></script>
<script src="assets/js/odometer.min.js"></script>
<script src="assets/js/twentytwenty.js"></script>
<script src="assets/js/jquery.event.move.js"></script>
<script src="assets/js/jquery.circle-progress.min.js"></script>
<script src="assets/js/gsap/gsap.js"></script>
<script src="assets/js/gsap/ScrollTrigger.js"></script>
<script src="assets/js/gsap/SplitText.js"></script>
<script src="assets/js/script.js"></script>


<div class="dock">

  <!-- زر الاتصال -->
  <div class="btn-wrap">
    <div class="glow-ring blue"></div>
    <a href="tel:0543635677" class="fab blue" aria-label="اتصل بنا الآن">
      <div class="fab-icon blue-ic">
        <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18">
          <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 10.8 19.79 19.79 0 01.4 2.13 2 2 0 012.4.13h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 15v1.92z"/>
        </svg>
      </div>
      <div class="fab-text">
        <span class="fab-text-main">اتصل الآن</span>
        <span class="fab-text-sub">متاح 24/7 ساعة</span>
      </div>
    </a>
  </div>

  <!-- زر واتساب -->
  <div class="btn-wrap">
    <div class="glow-ring green"></div>
    <a href="https://wa.me/966543635677" target="_blank" class="fab green" aria-label="راسلنا على واتساب">
      <div class="fab-icon green-ic">
        <svg viewBox="0 0 24 24" fill="#fff" width="18" height="18">
          <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
        </svg>
      </div>
      <div class="fab-text">
        <span class="fab-text-main">واتساب</span>
        <span class="fab-text-sub">رد فوري الآن</span>
      </div>
    </a>
  </div>

  <!-- نص التواصل -->
  <div class="cta-text">
    <span class="cta-line1"><span class="cta-dot"></span> جاهزون للإجابة على استفساراتك</span>
    <span class="cta-line2">تواصل معنا الآن — فريقنا في خدمتك</span>
  </div>

</div>


<style>
/* ===== TORNADO FLOATING CONTACT BUTTONS ===== */

.dock {
  position: fixed;
  left: 22px;
  bottom: 92px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  z-index: 9999;
 
}

.btn-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

/* --- حلقة التوهج النابضة --- */
.glow-ring {
  position: absolute;
  left: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  pointer-events: none;
}
.glow-ring.blue  { animation: blueGlow  2s ease-in-out infinite; }
.glow-ring.green { animation: greenGlow 2s ease-in-out infinite 1s; }

@keyframes blueGlow {
  0%,100% { box-shadow: 0 0 0 0   rgba(56,139,255,0.7), 0 0 0 0   rgba(56,139,255,0.3); }
  50%     { box-shadow: 0 0 0 10px rgba(56,139,255,0.15),0 0 0 20px rgba(56,139,255,0.04); }
}
@keyframes greenGlow {
  0%,100% { box-shadow: 0 0 0 0   rgba(37,211,102,0.6), 0 0 0 0   rgba(37,211,102,0.2); }
  50%     { box-shadow: 0 0 0 10px rgba(37,211,102,0.12),0 0 0 20px rgba(37,211,102,0.03); }
}

/* --- الزر الرئيسي --- */
.fab {
  display: flex;
  align-items: center;
  height: 56px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(15,15,25,0.85);
  cursor: pointer;
  overflow: hidden;
  width: 59px;
  text-decoration: none;
  position: relative;
  z-index: 1;
  transition: width 0.45s cubic-bezier(.34,1.3,.64,1),
              border-color 0.3s,
              background 0.3s;
}
.fab:hover { width: 190px; }

.fab.blue:hover {
  border-color: rgba(56,139,255,0.6);
  background: rgba(12,30,70,0.9);
}
.fab.green:hover {
  border-color: rgba(37,211,102,0.5);
  background: rgba(10,35,20,0.9);
}

/* --- أيقونة الزر --- */
.fab-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0 9px;
  transition: transform 0.3s ease;
}
.fab:hover .fab-icon { transform: scale(1.12) rotate(-8deg); }

.fab-icon.blue-ic  { background: linear-gradient(135deg, #1a6fff, #0a3fc2); }
.fab-icon.green-ic { background: linear-gradient(135deg, #25D366, #0a8a40); }

/* --- نص الزر --- */
.fab-text {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.2s ease 0.1s, transform 0.2s ease 0.1s;
}
.fab:hover .fab-text {
  opacity: 1;
  transform: translateX(0);
}

.fab-text-main {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0.6px;
  font-family:"Alexandria", sans-serif;
  
}
.fab-text-sub {
  font-size: 10px;
  white-space: nowrap;
  letter-spacing: 0.4px;
  margin-top: 1px;
    font-family:"Alexandria", sans-serif;
}

.fab.blue  .fab-text-main { color: #7eb8ff; }
.fab.blue  .fab-text-sub  { color: rgba(126,184,255,0.5); }
.fab.green .fab-text-main { color: #5edc8a; }
.fab.green .fab-text-sub  { color: rgba(94,220,138,0.5); }

/* --- نص الدعوة للتواصل --- */
.cta-text {
  position: absolute;
  bottom: 31px;
  left: 70px;
  direction: rtl;
  opacity: 0;
  animation: fadeUp 0.7s ease 1.2s forwards;
  
  background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 7px 12px 7px 10px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.07);
}
@keyframes fadeUp {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

.cta-line1 {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  white-space: nowrap;
  letter-spacing: 0.3px;
}
.cta-line2 {
  display: block;
  font-size: 10px;
  color: rgba(255,255,255,0.28);
  white-space: nowrap;
  margin-top: 3px;
  letter-spacing: 0.4px;
}

.cta-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #25D366;
  margin-left: 5px;
  vertical-align: middle;
  animation: blink 1.4s ease-in-out infinite;
}
@keyframes blink {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.2; }
}


</style>


</body>

</html>