  


<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>


  <!-- Google Tag Manager (Deferred until interaction) -->
  <script>
    let gtmLoaded = false;
    function loadGTM() {
      if (gtmLoaded) return;
      gtmLoaded = true;
      (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-TPKMT6DS');
    }
    // Load on user interaction to prevent blocking LCP/FCP
    ['scroll', 'mousemove', 'touchstart'].forEach(function (event) {
      window.addEventListener(event, loadGTM, { once: true, passive: true });
    });
    // Fallback: load after 5 seconds if no interaction
    setTimeout(loadGTM, 5000);
  </script>
  <!-- End Google Tag Manager -->



  <!-- metas -->
  <meta charset="utf-8">
  <meta name="author" content="Website Design Templates">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">




    <!-- Basic -->
  <title>IT Infrastructure &amp;amp; AV Solutions Saudi Arabia | Datacore</title>

  <!-- favicon -->
  <link rel="android-chrome" sizes="192x192" href="https://datacore.com.sa/assets1/imgaes/android-chrome-512x512.png">
  <link rel="apple-touch-icon" sizes="180x180" href="https://datacore.com.sa/assets1/images/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="https://datacore.com.sa/assets1/images/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="https://datacore.com.sa/assets1/images/favicon-16x16.png">

  <!-- Basic Meta -->
  <meta name="description" content="Datacore delivers IT infrastructure, AV, datacenter, surveillance &amp;amp; IPTV solutions across Saudi Arabia. Trusted by universities &amp;amp; enterprises. Get a quote." />
  <meta name="keywords" content="IT infrastructure solutions Saudi Arabia" />
  <meta name="author" content="DataCore Technology Solutions" />

  <!-- Open Graph -->
  <meta property="og:locale" content="en_US" />
  <meta property="og:site_name" content="DataCore Technology Solutions" />
  <meta property="og:title" content="IT Infrastructure &amp;amp; AV Solutions Saudi Arabia | Datacore" />
  <meta property="og:description" content="Datacore delivers IT infrastructure, AV, datacenter, surveillance &amp;amp; IPTV solutions across Saudi Arabia. Trusted by universities &amp;amp; enterprises. Get a quote." />
  <meta property="og:image" content="https://datacore.com.sa/assets1/images/Group1png.png" />
  <meta property="og:url" content="https://datacore.com.sa/" />
  <meta property="og:type" content="website" />

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="IT Infrastructure &amp;amp; AV Solutions Saudi Arabia | Datacore" />
  <meta name="twitter:description" content="Datacore delivers IT infrastructure, AV, datacenter, surveillance &amp;amp; IPTV solutions across Saudi Arabia. Trusted by universities &amp;amp; enterprises. Get a quote." />
  <meta name="twitter:image" content="https://datacore.com.sa/assets1/images/Group1png.png" />
  <meta name="twitter:site" content="@YOUR_TWITTER_HANDLE" />




  <!-- jQuery (deferred to prevent render blocking) -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" defer></script>

  <!-- Bootstrap Bundle JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" defer></script>

  <!-- Slick CSS -->
  <link rel="stylesheet" type="text/css" media="print" onload="this.media='all'"
    href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
  <link rel="stylesheet" type="text/css" media="print" onload="this.media='all'"
    href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />

  <!-- Slick JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" defer></script>




  <!-- limit -->


  <!-- Google Fonts & Icons -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" media="print"
    onload="this.media='all'" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet"
    media="print" onload="this.media='all'" />
  <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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
    rel="stylesheet" media="print" onload="this.media='all'">


      <link rel="preload" as="image" href="https://www.datacore.com.sa/imgserver/uploads/attachments/pcm__c2405f90-a6fe-43a1-ae85-53886a45d95b_0.jpg"
      fetchpriority="high">
  
  <!-- Vendor CSS Files -->
  <link href="https://datacore.com.sa/assets1/vendor/aos/aos.css" rel="stylesheet" media="print"
    onload="this.media='all'" />
  <link href="https://datacore.com.sa/assets1/vendor/glightbox/css/glightbox.min.css" rel="stylesheet" media="print"
    onload="this.media='all'" />
  <link href="https://datacore.com.sa/assets1/vendor/swiper/swiper-bundle.min.css" rel="stylesheet" media="print"
    onload="this.media='all'" />


  <!-- css -->
  <!-- <link rel="stylesheet" href="https://datacore.com.sa/assets1/css/blog-details.css"> -->
  <link rel="stylesheet" href="https://datacore.com.sa/assets1/css/alert.css" media="print" onload="this.media='all'">

  <!-- Preload Critical Fonts -->
  <link rel="preload" href="https://datacore.com.sa/fonts/TextaRegular.ttf" as="font" type="font/ttf" crossorigin>
  <link rel="preload" href="https://datacore.com.sa/fonts/TextaMedium.ttf" as="font" type="font/ttf" crossorigin>
  <link rel="preload" href="https://datacore.com.sa/fonts/TextaBold.ttf" as="font" type="font/ttf" crossorigin>
  <link rel="preload" href="https://datacore.com.sa/fonts/TextaHeavy.ttf" as="font" type="font/ttf" crossorigin>




  <style>
    @font-face {
      font-family: 'Texta';
      src: url(fonts/TextaRegular.ttf) format('truetype');
      font-weight: 400;
      /* Regular */
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'Texta';
      src: url(fonts/TextaMedium.ttf) format('truetype');
      font-weight: 500;
      /* Medium */
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'Texta';
      src: url(fonts/TextaBold.ttf) format('truetype');
      font-weight: 700;
      /* Bold */
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'Texta';
      src: url(fonts/TextaHeavy.ttf) format('truetype');
      font-weight: 800;
      /* Heavy */
      font-style: normal;
      font-display: swap;
    }

    html {
      scroll-behavior: smooth;
      font-family: 'Texta';
    }




    .container-fluid {
      /* overflow-x: hidden !important; */
      padding-right: 0px !important;
      padding-left: 0px !important;
    }

    /* html {
      font-size: 14px;
      max-width: 1920px;
      margin: 0 auto;
    } */
    .container {
      padding: 0px !important;
    }

    .mxy {
      margin: 0px 5.3rem;
    }

    body {
      overflow-x: hidden !important;
      margin: 0 auto;
      padding: 0px;
      top: 0px !important;

    }

    .goog-te-banner-frame.skiptranslate {
      display: none !important;
    }

    .custom-header-spacing {
      margin: 10px 84px !important;
    }

    .header {
      position: sticky;
      top: 0;
      width: 100%;
      z-index: 100;
      /* background-color: rgba(255, 255, 255, 80%) !important;  */
      background-color: rgba(255, 255, 255, 0.9);
      transition: all 0.5s;
    }

    .header .logo img {
      width: 145px;
      height: 79px;
    }

    .navmenu {
      margin-right: 14%;
    }

    .navmenu ul {
      list-style: none;
      display: flex;
      align-items: center;
      gap: 25px !important;
      margin: 0;
      padding: 0;
    }

    .bg-images {
      position: relative;
      z-index: 0;

    }




    .navmenu a {
      font-family: 'Texta';
      font-weight: 500 !important;
      font-size: 1rem;
      line-height: 146% !important;
      color: #1A1B1F !important;
      text-decoration: none !important;
    }



    #navmenu a {
      position: relative;
      padding: 10px 15px;

      transition: color 0.3s ease;
    }

    #navmenu a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 0;

      height: 2px;
      background: #05ACA1;
      transition: width 0.5s ease;
    }

    #navmenu a.active {

      color: #09bdb1cc ! important;
      font-weight: 600;
    }


    #navmenu a.active::after {
      width: 100%;
      /* auto underline on active page */

    }



    /* ........... */
    /* Navbar container */
    #navmenu {
      display: flex;
      justify-content: flex-start;
      /* items go left by default */
    }

    /* Remove absolute positioning */
    .right-item {
      position: relative;
      /* not absolute */
      margin-left: auto;
      /* pushes it to the opposite side */
    }

    /* RTL support */
    html[dir="rtl"] #navmenu {
      flex-direction: row-reverse;
      /* flip the menu */
    }

    html[dir="rtl"] .right-item {
      margin-left: 0 !important;
      position: relative !important;
      margin-right: auto !important;
      /* push language selector to left */

    }

    .icons-size {
      width: 32px;
      height: 32px;
    }



    /* Dropdowns */
    .right-item .dropdown {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      /* default for LTR */
    }

    html[dir="rtl"] .right-item .dropdown {
      left: auto;
      right: 0;
      /* align dropdown to the flipped side in RTL */
    }

    .right-item:hover .dropdown {
      display: block;
    }

    @media screen and (min-width: 1250px) and (max-width: 1550px) {
      .navmenu a {
        font-size: 16px;
      }
    }



    @media (min-width: 1400px) {

      .container,
      .container-lg,
      .container-md,
      .container-sm,
      .container-xl,
      .container-xxl {
        max-width: 1361px !important;
      }
    }

    .navmenu li a {
      position: relative;
      z-index: 1000;
    }


    .navmenu .right-item {
      position: absolute;
      right: 0;

    }


    .mobile-nav-toggle {
      display: none;
      font-size: 28px;
      color: #05ACA1;
      cursor: pointer;
    }

    .cont-p {
      padding-left: 0 !important;
    }

    .right-item {
      position: relative;
      color: #000 !important;
      text-decoration: none !important;
      margin-left: auto;
      /* pushes to the right */
      cursor: pointer;
      list-style: none;
    }

    #navmenu .right-item ::after {
      display: none !important;
    }

    .right-item .dropdown {
      display: none;
      position: absolute;
      top: 100%;
      /* below the menu item */
      left: 0;
      background: #fff;
      border: 1px solid #ddd;
      min-width: 120px;
      z-index: 1000;
    }


    .right-item .dropdown li a {
      display: block;
      padding: 8px 12px;
      color: #1A1B1F !important;
      text-decoration: none;
    }

    /* Active state for Language Dropdown - Teal color needed here */
    .right-item .dropdown li a.active {
      color: #05ACA1 !important;
      font-weight: 600;
    }

    .right-item:hover .dropdown {
      display: block;
    }


    .navmenu ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      align-items: center;
    }

    .navmenu ul li {
      position: relative;
      /* margin-right: 20px; */
    }



    .navmenu ul li.right-item ul.dropdown {
      display: none;
      position: absolute;
      top: 100%;
      right: 0;
      background: #fff;
      padding: 5px 0;
      list-style: none;
      min-width: 100px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      z-index: 1000;
    }

    .navmenu ul li.right-item:hover ul.dropdown {
      display: block;
    }

    .navmenu ul li.right-item ul.dropdown li {
      margin: 0;
    }

    .navmenu ul li.right-item ul.dropdown li a {
      display: block;
      padding: 5px 10px;
      text-decoration: none;
      color: #333;
    }







    @media (max-width: 1199px) {
      .mobile-nav-toggle {
        display: block;
        z-index: 1100;
      }


      .navmenu {
        position: fixed !important;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: #fff;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 80px 20px;
        transition: left 0.3s ease-in-out;
        z-index: 100;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
      }

      .navmenu ul {
        flex-direction: column;
        width: 100%;
        gap: 20px;
      }

      .navmenu ul li {
        width: 100%;
      }

      .navmenu a {
        font-size: 18px;
        display: block;
        width: 100%;
        padding: 10px 0;
        border-bottom: 1px solid #eee;
      }

      body.mobile-nav-active .navmenu {
        left: 0;
      }

      .mobile-nav-toggle.bi-x {
        position: fixed;
        top: 20px;
        left: calc(85% + 10px);
        font-size: 32px;
        padding: 6px 10px;
        z-index: 1101;
      }

      .navmenu ul li.right-item {
        position: relative !important;
        right: 0;
        align-self: flex-start !important;
      }


    }



    /* Prevent FOUC */
    .navmenu,
    .logo {
      visibility: hidden;
    }

    body.loaded .navmenu,
    body.loaded .logo {
      visibility: visible;
    }

    @media (max-width:768px) {
      .custom-header-spacing {
        margin: 20px 20px !important;
      }

      .mxy {
        margin: 0px 16px !important;

      }

      #navmenu a.active::after {
        width: 50%;
        /* auto underline on active page */
        display: none;

      }

      .right-bg {
        display: none;
      }



    }

    @media (max-width: 570px) {
      .header .logo img {
        padding-left: 12px !important;
      }

      .custom-header-spacing {
        margin: 13px 13px !important;
      }

      .header .logo img {
        width: 160px;
        height: 60px;
      }

      #navmenu a.active::after {
        width: 50%;
        /* auto underline on active page */

      }

    }



    /* Service Dropdown Styles */
    .has-dropdown {
      position: relative;
    }

    .has-dropdown .dropdown {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      background: #fff;
      border: 1px solid #ddd;
      min-width: 240px;
      z-index: 9999;
      padding: 0;
      list-style: none;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      border-radius: 4px;
    }

    .has-dropdown:hover .dropdown {
      display: block;
    }

    .has-dropdown .dropdown li {
      width: 100%;
      margin: 0;
      /* Reset margin */
    }

    /* Override global active state for dropdown items so they don't turn teal when active */
    #navmenu .has-dropdown .dropdown li a.active {
      color: #1A1B1F !important;
      /* Keep text dark */
      font-weight: 400 !important;
      /* Keep font weight normal */
    }

    /* Ensure hover effect affects both active and inactive dropdown items */
    #navmenu .has-dropdown .dropdown li a:hover,
    #navmenu .has-dropdown .dropdown li a.active:hover {
      background-color: #f8f9fa;
      color: #05ACA1 !important;
      padding-left: 20px;
    }


    #navmenu .has-dropdown .dropdown li a::after {
      background: #000;
      display: none;
    }



    .has-dropdown .dropdown li a {
      display: block;
      padding: 12px 15px;
      color: #1A1B1F !important;
      text-decoration: none !important;
      font-size: 16px;
      border-bottom: 1px solid #eee;
      white-space: normal;
      /* Allow text wrapping if needed */
      transition: all 0.2s ease;
      font-weight: 400 !important;
    }

    .has-dropdown .dropdown li a:hover {
      background-color: #f8f9fa;
      color: #05ACA1 !important;
      padding-left: 20px;
    }

    .has-dropdown .dropdown li:last-child a {
      border-bottom: none;
    }

    /* Mobile adjustments for service dropdown */
    @media (max-width: 1199px) {
      .has-dropdown .dropdown {
        position: static;
        box-shadow: none;
        border: none;
        width: 100%;
        display: none;
        background-color: #f9f9f9;
      }

      .has-dropdown:hover .dropdown {
        display: block;
      }

      .has-dropdown .dropdown li a {
        padding-left: 30px !important;
        font-size: 16px;
      }
    }
  </style>
</head>

<body>

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

  <!-- Header -->
  <header class="header d-flex align-items-center">
    <div
      class="  container-fluid custom-header-spacing d-flex align-items-center justify-content-between position-relative">
      <a href="https://datacore.com.sa/" class="logo d-flex ms-0 align-items-center">
        <img src="https://datacore.com.sa/assets1/images/Group.svg" alt="Logo" />
      </a>

      <nav id="navmenu" class="navmenu d-flex">
        <ul>
          <li><a href="https://datacore.com.sa/">HOME</a></li>
          <li><a href="https://datacore.com.sa/about-us">ABOUT US</a></li>
          <li class="has-dropdown">
            <a href="https://datacore.com.sa/services">SERVICES <i class="bi bi-chevron-down"
                style="color:#05ACA1;"></i></a>
            <ul class="dropdown">
              <li><a href="https://datacore.com.sa/services?id=network-infrastructure-services">Network Infrastructure Services</a></li><li><a href="https://datacore.com.sa/services?id=datacenter-solutions">Datacenter Solutions</a></li><li><a href="https://datacore.com.sa/services?id=surveillance-and-security-solutions">Surveillance And Security Solutions</a></li><li><a href="https://datacore.com.sa/services?id=meeting-room-solutions">Meeting Room Solutions</a></li><li><a href="https://datacore.com.sa/services?id=audio-visual-solutions">Audio-Visual Solutions</a></li><li><a href="https://datacore.com.sa/services?id=digital-signage-amp-video-walls">Digital Signage &amp; Video Walls</a></li><li><a href="https://datacore.com.sa/services?id=public-address-and-fire-alarm-system">Public Address And Fire Alarm System</a></li><li><a href="https://datacore.com.sa/services?id=iptv-solutions">IPTV Solutions</a></li><li><a href="https://datacore.com.sa/services?id=professional-services">Professional Services</a></li>            </ul>
          </li>
          <li><a href="https://datacore.com.sa/project">OUR PROJECTS</a></li>
          <li><a href="https://datacore.com.sa/contact-us">CONTACT US</a></li>





                      <li class="right-item">
              <a id="currentLang">ENGLISH<i class="bi bi-chevron-down" style="color:#05ACA1;"></i></a>

              <ul class="dropdown">
                <li><a href="?lang=en" class="active">English</a></li>
                <li><a href="?lang=ar" class="">العربية</a></li>
              </ul>
            </li>
                  </ul>




      </nav>

      <i class="mobile-nav-toggle bi bi-list d-xl-none"></i>





    </div>
    <div class="bg-images">

    </div>

  </header>




</body>

</html><style>

  .carousel-item {
    /* height: 107vh !important; */
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;


  }


  .carousel-indicators {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 80px !important;
    height: 4px !important;
  }

  .carousel-caption {
    position: absolute;
    right: 15% !important;

    left: 15%;
    padding-bottom: 4.25rem !important;
    color: #fff;
    text-align: center;
  }

  .carousel-item img {
    object-fit: cover;
    width: 100%;
    height: 90vh !important;
    object-position: center;
    display: block;
  }

  .brand {
    --bs-gutter-x: 0 !important;
    margin-bottom: 0px;

  }


  .carousel-indicators.custom-indicators button.active {
    background-color: #05ACA1 !important;
  }

  .carousel-indicators {
    margin-left: 11% !important;

  }

  .carousel-controls {
    position: absolute;
    /* bottom: -24%; */
    right: 12%;
    z-index: 10;
  }

  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    background-size: 100% 100%;
    width: 24px;
    height: 24px;
  }

  .swiper-count {
    font-size: 16px;
    font-weight: bold;
    color: #000;
    margin: 0 10px;
  }

  .carousel-box {
    width: 622px;

  }

  .carousel-caption {
    bottom: 36% !important;
    transform: translateY(48%);
    text-align: center;


    z-index: 2;
  }

  .carousel-caption h3,
  .carousel-caption h1 {
    color: #1A1B1F;
    text-transform: uppercase;

  }

  .carousel-caption h3 {
    font-family: 'Texta';
    font-weight: 400;
    font-size: 3.5rem !important;
    line-height: 120%;
    letter-spacing: 2px;
    text-align: center;
    color: #1A1B1F;
  }

  .carousel-caption h1 {
    /* font-family: TextaHeavy ; */
    font-family: 'Texta';
    font-weight: 800;
    font-size: 4rem;
    line-height: 120%;
    letter-spacing: 3px;
    text-align: center;
    padding-left: 17px !important;
  }

  /* 
    p {
      margin-top: 2rem;
      margin-bottom: 2rem;
    } */

  .paragraph-box {
    font-family: 'Texta' !important;
    max-width: 337px;
    font-weight: 500;
    font-size: 18px !important;
    color: #2E2F33;
    text-align: left;
    transform: translateX(59%);
    padding-bottom: 20px;
  }

  .get-btn {
    font-family: 'Texta';
    padding: 15px 24px;
    background: #05ACA1;
    color: #ffffff;
    text-decoration: none;
    font-weight: 800;
    font-size: .9rem;
    line-height: 160%;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-right: 9%;


  }


  .carousel-control-next {
    padding-left: 60px;
  }

  .prev {
    padding-right: 60px;
    height: 50px;
    width: 170px;
  }

  .next {
    padding-left: 60px;
    height: 50px;
    width: 170px;
  }

  .carousel-item::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100px;
    width: 100%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 80%);
    z-index: 2;
    pointer-events: none;
  }

  .home-logo {
    position: absolute;
    bottom: 20px;
    right: -8px;
    width: 96px;
    height: 96px;

  }

  .custom-indicators {
    position: absolute;
    bottom: 20px;
    left: 0 !important;
    transform: translateX(-50%);
    height: 25px !important;
    z-index: 2;
    bottom: 25px !important;
  }

  .custom-indicators button {
    width: 14px;
    height: 14px;
    background-color: #66686b !important;
    border: none;
    opacity: 1;
    transition: background-color 0.3s ease;
  }

  .custom-indicators button:hover {
    background-color: #0056b3;
  }

  @media (min-width:1600px) {}

  @media (max-width:1000px) {
    .carousel-item img {

      /* height: 38vh !important; */

    }

    .carousel-controls {
      display: none !important;
    }

    .carousel-indicators {

      width: 22px !important;
      height: 4px !important;
    }

    .paragraph-box {
      transform: none !important;
      margin-left: 32%;
    }



  }

  @media (max-width:768px) {

    .carousel-caption h3 {

      font-size: 2.3rem !important;

    }

    .carousel-caption h1 {
      font-size: 3.1rem;
      letter-spacing: 3px;
      padding-left: 17px !important;
    }


    .custom-indicators {
      left: 35px !important;
    }

    .carousel-item img {

      height: 75vh !important;

    }
  }




  @media (max-width:500px) {

    .carousel-caption h3 {

      font-size: 1.5rem !important;

    }

    .carousel-caption h1 {

      font-size: 2.5rem;



    }
  }

  @media (max-width:450px) {
    .carousel-item img {
      /* height: 55vh !important; */
    }


    .carousel-caption h1 {

      font-size: 2.4rem;
    }

    .paragraph-box {

      line-height: 100%;
      text-align: left;
      /* margin-left: 17%; */
      width: 217px;
      padding-bottom: 10px;

    }

    .paragraph-box {
      transform: none !important;
      margin-left: 39%;
    }

    .carousel-caption h3 {

      font-size: 1.4rem !important;
    }

    .get-btn {

      padding: 10px 10px;
      font-size: 14px;
      letter-spacing: 2px;
      margin-left: 8%;


    }

  }

  @media (max-width:400px) {
    .carousel-item img {
      /* height: 58vh !important; */
    }

    .carousel-caption h1 {

      font-size: 2.3rem;
    }

    .carousel-caption h3 {

      font-size: 1.3rem !important;
    }

    .paragraph-box {

      line-height: 100%;
      text-align: left;
      /* margin-left: 17%; */
      width: 217px;
      padding-bottom: 8px;

    }

    .get-btn {

      padding: 10px 10px;
      font-size: 14px;
      letter-spacing: 2px;
      margin-left: 8%;


    }
  }


  @media (max-width:380px) {
    .carousel-item img {
      /* height: 69vh !important; */
    }

    .carousel-caption h1 {

      font-size: 2.1rem;
    }

    .carousel-caption h3 {

      font-size: 1.2rem !important;
    }

    .paragraph-box {

      line-height: 100%;
      text-align: left;
      /* margin-left: 17%; */
      width: 217px;
      padding-bottom: 5px;

    }

    .get-btn {

      padding: 10px 10px;
      font-size: 14px;
      letter-spacing: 2px;
      margin-left: 8%;


    }
  }




  /* top */


  .mr {
    margin-right: 0px !important;
    margin-left: 0px !important;
    padding-right: 0px !important;
    padding-left: 0px !important;
  }

  .s-h,
  .news-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* Limit to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4em;
    /* Adjust line height */
    max-height: 2.7em;
    /* line-height × 2 */
  }

  .bottom-p,
  .s1,
  .s2,
  .s3 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .news-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    /* show only 4 lines */
    overflow: hidden;
    text-overflow: ellipsis;

    line-height: 1.5em;
    /* your line height */
    max-height: calc(1.7em * 4);
    /* 4 lines × 1.5em = 6em total height */
  }




  @media (max-width:400px) {

    .brand-trust {
      font-size: 40px !important;
      letter-spacing: 3px;
    }

  }



  .custom-indicators button {
    width: 14px;
    height: 14px;
    background-color: #ddd;
    border: none;
    opacity: 1;
    transition: background-color 0.3s ease;
  }

  .carousel-controls {

    right: 7%;
    bottom: 30px;
    /* z-index: 999; */

    padding: 8px 12px;


    gap: 10px;
  }

  .banner {
    position: absolute;
    top: 0;
    left: 50%;
    /* push to center */
    transform: translateX(-50%);
    /* truly center */
    width: 60%;
    /* 50% width of carousel */
    height: 100%;
    /* full height */
    background: url(assets1/vendor/aos/assets1/images/back.png) no-repeat center center;
    background-size: contain;
    /* keep full image inside */
    z-index: 1;
    /* below caption but above img */
  }




  .play-icon {
    width: 7px;
    height: 8px;
  }

  /* <!-- section2 --> */

  .section-2 {
    margin-top: 5% !important;
  }

  .icon-img {
    width: 32px;
    height: 52px;
  }


  .m-p {}

  .display-5 {
    font-family: 'Texta';
    font-weight: 400;
    font-size: 2.6rem !important;
    line-height: 120%;
    letter-spacing: 0px;
    text-transform: uppercase;
  }

  .display-5 span {
    font-family: 'Texta';
    font-weight: 800;
    letter-spacing: 3px;
  }

  .text-muted-2 {
    font-family: 'Texta';
    font-size: 1.1rem;
    line-height: 1.46;
    color: #2E2F33;
    text-align: left;
    padding-top: 6px;
    padding-right: 11%;
  }

  .s-h {
    font-family: 'Texta';
    font-weight: 800;
    font-size: 26px;
    line-height: 1.1;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #1A1B1F;

  }

  .s1,
  .s2,
  .s3 {
    font-family: 'Texta';
    font-weight: 400;
    font-size: .95rem;

    color: #46484D;
    line-height: var(--line-height);

  }

  /* .s1 { margin-right: 0rem; } */
  .s3 {
    margin-right: 2rem;
  }

  /* .s2 { margin-right: 4rem; } */

  .icon-img {
    max-width: 100%;
    padding-bottom: 20px;

  }

  .xc-2 {
    padding: 2rem 1rem !important
  }

  .READ_MORE,
  .right-img {
    font-family: 'Texta';
    font-weight: 800 !important;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #05ACA1;
    text-decoration: none;
    padding-left: 3px;
  }

  .image-container {
    padding-top: 40px !important;
  }

  .image-container img {
    width: 100%;
    height: 80%;
    object-fit: cover;

  }

  .heading-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
  }

  .heading-text {
    flex: 1 1 60%;
    /* padding-left: 18px !important; */
  }

  .heading-description {
    flex: 1 1 27%;
  }

  .heading-description {
    padding-right: 20px;
  }

  @media (min-width:1650px) {
    .image-container img {

      height: 65% !important;


    }

  }

  @media (max-width:1430px) {
    .image-container img {
      height: 85%;
    }
  }


  @media (max-width:1300px) {
    .s1 {
      margin-right: 0rem;
    }

    .s3 {
      margin-right: 0rem;
    }

    .s2 {
      margin-right: 0rem;
    }

    .image-container img {
      width: 100%;
      height: auto !important;
      object-fit: cover;

    }


  }

  @media (max-width:1300px) {
    .s1 {
      margin-right: 0rem;
    }

    .s3 {
      margin-right: 0rem;
    }

    .s2 {
      margin-right: 0rem;
    }

    .image-container img {
      width: 100%;

      object-fit: cover;

    }


  }




  @media (max-width: 991.98px) {
    .heading-container {
      flex-direction: column;
    }

    .heading-text,
    .heading-description {
      flex: 1 1 100%;
    }
  }


  /* ======= Responsive ======= */
  @media (max-width: 1100px) {
    .display-5 {
      font-size: 8vw;
    }

    .text-muted-2 {
      font-size: 16px;
    }

    .s-h {
      font-size: 20px;
    }

    .mxy {
      margin: 0px 16px !important;

    }

    .s1 {
      margin-right: 0rem;
    }

    .s3 {
      margin-right: 0rem;
    }

    .s2 {
      margin-right: 0rem;
    }
  }


  @media (max-width:768px) {
    .revers-row {
      display: flex;
      flex-direction: column-reverse !important;
    }

    .image-container {
      padding-top: 0px !important;
    }

    .xc-2 {
      padding-top: 2rem !important;
      /* padding-bottom:1.5rem !important; */


    }

    .heading-description {
      padding-bottom: 20px;
    }

  }


  @media (max-width: 575.98px) {
    .display-5 {
      font-size: 11vw;
    }

    .banner {
  
    
    /* truly center */
    width: 120%;
 
   
  }

    .col-lg-8 {
      padding: 10px !important;

    }

    .display-5 span {
      font-size: 10vw;
    }

    .icon-img {
      width: 50px;
      padding-bottom: 15px;
    }


  }


  @media (min-width:1000px) {
    .heading-text {

      padding-left: 18px;
    }


  }



  /* section3 */
  .section-2 {
    background-color: #ffffff;
  }

  .pyz {


    margin: 0px 5.3rem !important;


  }




  .center {
    text-align: center;
  }

  .end {
    text-align: right;

  }

  .section-2 .containerz {
    border: 1px solid #E2F2F1;
    padding: 2rem;

    background-image: linear-gradient(to bottom right, #ffffff, #F2FCFB);
  }

  .section-heading {
    font-family: 'Texta';
    font-weight: 400;
    font-size: 2.75rem;
    line-height: 120%;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: #1C1D20;
    margin-bottom: 0px;
  }

  .section-sub {
    font-family: 'Texta';
    font-weight: 800;
    font-size: 3.75rem;
    line-height: 120%;
    letter-spacing: 10px;
    text-transform: uppercase;
    color: #1C1D20;
  }

  .section-paragraph {
    font-family: 'Texta';
    font-weight: 400;
    font-size: 1.1rem;
    line-height: 146%;
    /* color: #2E2F33; */
    color: #46484d;
    /* padding-left:13%; */
  }

  .stat-block {
    text-align: left;
  }

  .stat-number {
    font-weight: 800;
    font-size: 5.5rem;
    color: #05ACA1;
    margin-bottom: 0.5rem;
    font-family: Texta;
    line-height: 120%;
    letter-spacing: 0%;
    text-transform: uppercase;

  }

  .stat-title {
    font-family: 'Texta' !important;
    font-weight: 500 !important;
    font-size: 18px !important;
    line-height: 146%;
    letter-spacing: 0%;
    color: #1A1B1F;


  }

  .left-right {
    padding-left: 10%;
    padding-right: 3%;
  }

  .fe {
    padding-left: 55px;
  }

  .fez {
    padding: 0px 55px;
  }

  .fe2 {
    /* padding-left:11% !important; */
  }


  .stats-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    /* allows stacking on small screens */
    gap: 80px;
    /* spacing between items */
  }

  .stat-block {
    flex: 1 1 200px;
    /* flexible width with min 200px */
    text-align: center;
  }


  @media (max-width: 1050px) {
    .fe {
      padding-left: 0px !important;
    }

    .pyz {


      margin: 0px 16px !important;


    }

  }

  @media (min-width:1000px) {
    .section-paragraph {


      padding-left: 11%;


    }
  }

  @media (max-width: 992px) {


    .col-md-5 {
      flex: 0 0 auto;
      width: 100% !important;
      /* text-align:left ; */
    }

    .stat-block {
      text-align: left !important;
    }


    .center {
      text-align: left;
    }

    .end {
      text-align: left;

    }


    .left-right {
      padding: 0 1rem;
    }

    .fe2 {
      padding-left: 0% !important;
    }

    .section-heading,
    .section-sub,
    .section-paragraph {
      text-align: left;
    }



    .stat-block {
      text-align: center;
    }

    .stat-number {
      font-size: 50px;
    }

    .section-heading {
      font-size: 28px;
    }

    .section-sub {
      font-size: 36px;
      letter-spacing: 6px;
    }

    .fe {
      padding-left: 0px !important;
    }

    .fe2 {
      padding-left: 0% !important;
    }
  }

  @media (max-width:768px) {
    .section-2 .containerz {

      padding: 2rem 0px !important;

    }

    .fez {
      padding: 0px 30px;
    }

    .m-p {
      padding: 0px 30px;
    }

  }

  @media (max-width:500px) {

    .section-heading,
    .section-sub,
    .stat-block {
      text-align: left;
    }

    .section-paragraph {
      text-align: left;
      /* margin-left: 10px; */

    }

    .heading-text {
      padding:
    }

  }


  /* section4 */

  .brands-section {
    margin: 4% 4% 0px;
    padding: 40px 0px;
  }

  /* .brand-img {

    width: 164.42px;

    Height: 60.89px
  } */

  .brands-header {
    text-align: left;
    margin: auto;
    margin-bottom: 30px;
  }


  .brand {
    font-family: 'Texta';
    font-weight: 400;
    font-size: 2.75rem;
    line-height: 120%;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #1C1D20;

  }

  .brand-trust {
    font-family: 'Texta';
    font-weight: 800;
    font-size: 3.625rem;
    line-height: 120%;
    letter-spacing: 3px;
    text-transform: uppercase;
    padding-bottom: 30px;

  }




  .carousel-container {
    overflow: hidden;
    margin: auto;
    position: relative;
  }

  .carousel-track {
    display: flex;
    width: 200%;
    transition: transform 0.5s ease-in-out;
    gap: 40px;

  }

  .carousel-pagez {
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    gap: 23px;
    /* spacing between logos */
  }



  .brand-logo {
    flex: 4 0 calc(15.5% - 34px);
    /* 8 items per row with gap */
    text-align: center;
  }

  .brand-logo img {
    width: 100%;
    max-height: 90px;
    object-fit: contain;
    transition: filter 0.3s ease;
  }

  .carousel-controlsz {
    margin-top: 55px;
    display: flex;
    justify-content: center;
    gap: 20px;
  }

  .carousel-controlsz button {
    border: 1px solid #ccc;
    background: white;
    border-radius: 50%;
    height: 40px;
    width: 40px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #000;

    /* Better centering approach */
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 0px;

  }

  .carousel-controlsz button:hover {
    background-color: #e9fdf9;
    border-color: #00b89f;
  }

  /* iOS-specific fix (Safari) */
  @supports (-webkit-touch-callout: none) {
    .carousel-controlsz button {
      padding-top: 3px;
      /* Slight upward adjustment for iOS */
    }
  }

  /* Android-specific fix */
  @media (max-width: 500px) {
    .carousel-controlsz button {
      padding-bottom: 3px;
      /* Slight downward adjustment for Android */
    }

    /* Override Android fix for iOS devices */
    @supports (-webkit-touch-callout: none) {
      .carousel-controlsz button {
        padding-top: 3px;
        padding-bottom: 0;
      }
    }
  }

  @media (max-width: 768px) {
    .brand-logo {
      flex: 0 0 calc(50% - 20px);
      /* 2 per row */
    }

  }

  /* 

    /* alllience */

  .alliances-section {
    padding: 65px 20px;
    background: #ffffff;
    border: 1px solid #E2F2F1;
  }

  .alliances-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* margin-bottom: 30px; */
  }

  .brand-heading {
    font-family: 'Texta';
    font-weight: 400;
    font-size: 44px;
    line-height: 120%;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #1C1D20;
    margin-bottom: 0px;
  }

  .brand-subheading {
    font-family: 'Texta';
    font-weight: 800;
    font-size: 3.65rem;
    line-height: 120%;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #1A1B1F;
    padding-bottom: 20px;
  }

  .brand-text {
    font-family: 'Texta';
    font-weight: 400;
    font-size: 1.1rem;
    line-height: 146%;
    letter-spacing: 0%;
    color: #2E2F33;
  }

  .right-img {
    text-decoration: none;
    color: #00b89f;
    font-weight: 600;
  }

  .logo-item {
    text-align: center;
    padding: 15px;
  }

  .logo-item img {
    max-width: 100%;
    height: 50px;
    object-fit: contain;
  }

  .carousel-desktop-container {
    display: block;
  }

  .carousel-mobile-container {
    display: none;
  }

  @media (max-width: 768px) {
    .carousel-desktop-container {
      display: none;
    }

    .carousel-mobile-container {
      display: block;
    }

    .mobile-carousel {
      direction: inherit;
    }

    .mobile-carousel .slick-dots {
      bottom: -30px;
    }

    .mobile-carousel .slick-dots li button:before {
      font-size: 10px;
    }

    .alliances-section {
      padding: 65px 0px;
    }
  }

  @media (min-width:801px) {
    .wd {
      width: 31% !important;
      /* margin-left:8%; */
      padding-bottom: 4% !important;
    }
  }

  @media (max-width:800px) {
    .wd {
      width: 100% !important;
      /* margin-left:8%; */
      padding-bottom: 4% !important;
    }
  }

  @media (max-width:400px) {
    .brand-subheading {
      font-size: 2.225rem;
    }
  }


  /* projects */


  .container {
    max-width: 1200px;
    margin: 0 auto;
  }

  .image-project {
    width: 100%;
    height: auto !important;



  }

  .project-head {
    font-family: 'Texta';
    font-weight: 400;
    font-size: 2.75rem !important;
    line-height: 120%;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-align: center;
    padding-bottom: 5%;

  }

  h1 strong {
    font-family: 'Texta';
    font-weight: 800;
    font-size: 3.75rem !important;
    line-height: 120%;
    letter-spacing: 5px;
    text-transform: uppercase;

  }

  .all-projects {
    margin: auto 1rem;
  }

  .search-filter {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
  }

  .search-filter input,
  .search-filter select {
    padding: 0.75rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
  }

  .grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .project-card {
    background: #fff;
    /* display: flex; */
    flex-direction: column;
    padding: 5% 0;
  }

  .project-card .imge {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  /* .project-content {
      padding-top: 1rem;
    } */

  .project-title {
    font-family: 'Texta';
    font-weight: 800;
    font-size: 2rem !important;
    line-height: 130%;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 1rem 0 0.5rem;
    color: #2D3748;
  }

  .project-desc {
    font-family: 'Texta';
    font-weight: 500;
    font-size: 16px;
    line-height: 145%;
    letter-spacing: 0%;
    padding-bottom: 1.5rem;
    padding-right: 6%;
    color: #616266;

  }


  .read7 {
    font-family: 'Texta';
    font-weight: 800;
    font-size: 14px;
    line-height: 120%;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #05ACA1;
    text-decoration: none;
    padding-left: 8px;
  }

  .search-container {
    width: 100%;
  }

  /* Tablet and up */
  @media (min-width: 768px) {
    .search-filter {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }

    .search-filter input {
      flex: 2;
      margin-right: 1rem;
    }

    .search-filter select {
      flex: 1;
    }

    .all-projects {
      margin: 0% 10% 15% 10% !important;
    }

    .grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 5rem;
      padding-top: 3%;

    }


    .grid .project-card:nth-child(even) {
      position: relative;
      top: 7rem;
    }

    /* Tighten spacing between rows */
    .grid .project-card {
      margin-bottom: -3rem;
      /* pull up the row after the stagger */
    }
  }

  /* Desktop */
  @media (min-width: 1024px) {
    h1 {
      font-size: 2.3rem;
    }

    h1 strong {
      font-size: 2.8rem;
    }
  }

  @media (max-width:350px) {

    h1 strong {
      font-size: 50px;
    }
  }


  .search-box {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    /* border-radius: 4px; */
    background-color: #fff;
    overflow: hidden;
    width: 100%;

  }

  .search-icon {
    padding: 0 12px;
    font-size: 18px;
    color: #888;
  }

  .search-input {
    height: 60px;
    flex: 1;
    padding: 13px;
    border: none;
    font-size: 16px;
    outline: none;
  }

  .search-select {
    height: 60px;
    border: none;
    /* border-left: 1px solid #eee; */
    background: #F2F3F5;
    padding: 9px 40px 12px 16px;
    font-size: 130px;
    color: #333;
    appearance: none;
    background-image: url(assets1/vendor/aos/assets1/images/down-arrow.svg);
    background-repeat: no-repeat;
    background-position: right 12px center;

    cursor: pointer;
  }

  .arrowdiv {
    display: flex;
    align-items: center;
    gap: 8px;
    /* spacing between image and text */
    flex-wrap: nowrap;
  }

  .search-select {
    font-family: 'Texta';
    font-weight: 500;
    font-size: 18px;
    line-height: 146%;
    letter-spacing: 0%;
    color: #1A1B1F;

  }

  .project-card a {
    text-decoration: none !important;
  }

  @media (max-width: 768px) {
    .project-card {
      padding: 0 !important;
      margin-bottom: 2% !important;
    }
  }

  @media (max-width: 600px) {
    .search-box {
      flex-direction: column;
      align-items: stretch;
    }

    .search-select {
      border-left: none;
      border-top: 1px solid #eee;
      width: 100%;
    }

    .search-input {
      width: 100%;
    }

    .search-select .options {
      width: 80% !important;

    }

    .search-icon {
      display: none;
    }
  }

  @media (max-width:500px) {

    .mpace,
    .project-content {
      margin: 0px 15px 0px;
    }

  }



  .project-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* Limit to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* text-overflow: ellipsis; */
    /* line-height: 1.4em;     */
    /* max-height: 2.8em;      */
  }

  .project-desc {
    display: -webkit-box;
    /* required for -webkit-line-clamp */
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    /* show 4 lines */
    overflow: hidden;
    /* text-overflow: ellipsis; */
    white-space: normal;
    /* ensure wrapping */
    line-height: 1.4;
    /* adjust to match your design */
    max-height: calc(1.4em * 4);
    /* graceful fallback for non-webkit */
    word-break: break-word;
  }




  /* voice */




  .section-6 {
    padding: 60px 0rem;
    background: #fff;
    text-align: center;
    /* background: linear-gradient(to bottom, #ffffff, #E1F2F1); */
    background-image: linear-gradient(to bottom right, #ffffff, #E1F2F1);
  }

  .carousel-container {
    padding: 0px 50px;
    /* 10% left and right padding */
  }

  .section-6 h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 10px;
  }

  .section-6 p.subheading {
    font-size: 18px;
    color: #666;
    margin-bottom: 40px;
  }

  .multiple-items .card-wrapper {
    padding: 40px 25px;
    /* spacing between cards (10px on each side) */
    box-sizing: border-box;
  }

  .card-wrapper {
    overflow: visible;
    /* important to show overflow */
  }

  .cardz {
    position: relative;
    padding: 35px 31px;
    /* creates space for image inside card */
    background: #fff;
    border-radius: 0 !important;
    border: none !important;
    text-align: center;
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); */
    overflow: visible;
    /* allow image to show outside */
    /* min-height: 300px; */
    ;
  }

  .cardz img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    position: absolute;
    top: -50px;
    /* pull it half outside */
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
  }

  .slick-slider {
    padding-top: 0% !important;
    padding-bottom: 0% !important;
  }


  .cardz h5 {
    font-family: 'Texta';
    font-weight: 800;
    font-size: 16px;
    line-height: 145%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;

  }

  .section-6 h3 {
    font-family: 'Texta';
    font-weight: 400;
    font-size: 44px;
    line-height: 120%;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
    color: #1C1D20;

  }

  .sub {
    font-family: 'Texta';
    font-weight: 800;
    font-size: 60px;
    line-height: 120%;
    letter-spacing: 8px;
    text-align: center;
    text-transform: uppercase;
    color: #1C1D20;

  }

  .cardz small {
    display: block;
    font-size: 14px;
    color: #888;
    margin-bottom: 15px;
  }

  .card {
    padding-bottom: 30px;
  }

  .cardz p {
    font-family: 'Texta';
    font-weight: 500;
    font-size: 1rem;
    line-height: 145%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    /* color:#46484D; */
    color: #2E2F33;

  }

  .location {
    font-family: 'Texta';
    font-weight: 500;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    color: #616266;

  }

  .carousel-track-wrapper {
    overflow: hidden;
  }

  .carousel-trackz {
    display: flex;
    transition: transform 0.5s ease-in-out;
    transform: translateX(-2005px);
  }

  .card-wrapper {
    flex: 0 0 25%;
    padding: 35px 25px;
  }


  .carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #ffffff;
    color: #000000;
    border: 1px solid #D0D1D5;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    z-index: 20;
    width: 40px;
    height: 40px;

    /* Add flexbox centering */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 0;

    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.3s ease;
  }

  .prevx {
    left: 2px !important;
  }

  .nextx {
    right: 2px !important;
  }

  /* iOS-specific fix (Safari) */
  @supports (-webkit-touch-callout: none) {
    .carousel-btn {
      padding-top: 2px;
    }
  }

  /* Android-specific fix */
  @media (max-width: 500px) {
    .carousel-btn {
      padding-bottom: 3px;
    }

    /* Override Android fix for iOS devices */
    @supports (-webkit-touch-callout: none) {
      .carousel-btn {
        padding-top: 3px;
        padding-bottom: 0;
      }
    }
  }

  .carousel-controls-mobile button:hover {
    background-color: #e9fdf9;
    border-color: #00b89f;
    color: #05ACA1;
  }





  @media (min-width: 1600px) {
    .card-wrapper {
      flex: 0 0 25%;
      /* 4 cards */
    }
  }

  @media (min-width: 1201px) and (max-width: 1599px) {
    .card-wrapper {
      flex: 0 0 33.33%;
      /* 3 cards */
    }
  }

  @media (min-width: 769px) and (max-width: 1200px) {
    .card-wrapper {
      flex: 0 0 50%;
      /* 2 cards */
    }
  }

  @media (max-width: 768px) {
    .card-wrapper {
      flex: 0 0 100%;
      /* 1 card */
    }
  }






  /* Medium screen */
  @media (max-width: 768px) {
    h3 {
      font-size: 22px;
    }

    h1.sub {
      font-size: 36px;
    }

    .carousel-btn {
      position: static !important;
      transform: none !important;
      /* margin: 0 10px; */
      width: 40px;
      height: 40px;
    }

    .carousel-controls-mobile {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20px;
      gap: 20px;
    }

    .carousel-btn-wrapper-desktop {
      display: none;
    }


  }

  @media (max-width:500px) {
    .card-wrapper {
      padding: 35px 8px;
    }

    .carousel-container {
      padding: 0px 0px;
      /* 10% left and right padding */
    }







  }

  /* Small screen */
  @media (max-width: 480px) {
    h3 {
      font-size: 18px;
    }

    h1.sub {
      font-size: 28px;
    }

  }

  @media (max-width:368px) {
    .sub {
      font-size: 70px;
      letter-spacing: 4px;

    }

  }


  html[dir="rtl"] .carousel-trackz {
    flex-direction: row-reverse !important;
    direction: ltr !important;
  }

  html[dir="rtl"] .carousel-track-wrapper {
    direction: ltr !important;
  }






  /* datacore */

  .news-card {
    background: transparent;
    border: none;
    padding: 0px 6px;
    position: relative;
    margin: 0 10px;
  }

  .news-slider a {
    text-decoration: none;
  }

  .datacore-img {
    /* width: 420px; */
    height: 228px;
    width: 100%;
    /* height: auto; */
    display: block;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }

  .card-content {
    background: #FAFAFA;
    margin-top: -25px;
    padding: 48px 30px;
    z-index: 2;
    position: relative;
    margin-right: 30px;
  }

  .news-title {
    font-family: 'Texta';
    font-weight: 800;
    font-size: 1.7rem;
    line-height: 120%;
    text-transform: uppercase;
    padding-bottom: 10px;
    color: #1A1B1F;
  }


  .news-desc {
    font-family: 'Texta';
    font-weight: 500;
    font-size: 1rem;
    line-height: 145%;
    margin-top: 0.75rem;
    /* padding: 14px 0px; */
    /* color: #46484D; */
    color: #2E2F33
  }


  .custom-arrows {
    display: flex;
    margin-top: 15px;
  }

  .arrodiv {
    padding-bottom: 30px;
  }

  .arrowbtn {
    font-family: 'Texta';
    font-weight: 800;
    font-size: 14px;
    line-height: 120%;
    text-transform: uppercase;
    text-decoration: none;
    padding: 20px 5px;
    color: #05ACA1;
  }

  .slick-slide img {
    display: inline-block;
  }

  .datacore {
    font-family: 'Texta';
    font-weight: 800;
    font-size: 47px;
    line-height: 120%;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #1A1B1F;
  }

  .date-block {
    display: inline-block;
  }

  .hr-under-date {
    width: 80px;
    height: 2px;
    background: #05ACA1 !important;
    border: none;
    margin: 4px 0 8px 0;
    opacity: 3.25;
  }

  .mb-6 {
    margin-left: 0px !important;
    padding-bottom: 50px;
  }

  .slick-prev-custom,
  .slick-next-custom {
    width: 40px;
    height: 40px;
    border: 1px solid #D0D1D5;
    border-radius: 50%;
    background-color: #ffffff;
    font-size: 16px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    color: #000;

    /* Better centering */
    padding: 0;
    line-height: 0;
    /* Changed from 1 to 0 */
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* iOS-specific fix (Safari) */
  @supports (-webkit-touch-callout: none) {

    .slick-prev-custom,
    .slick-next-custom,
    .project-arrow {
      padding-top: 3px;
    }
  }

  /* Android-specific fix */
  @media (max-width: 500px) {

    .slick-prev-custom,
    .slick-next-custom,
    .project-arrow {
      padding-bottom: 3px;
    }

    /* Override Android fix for iOS devices */
    @supports (-webkit-touch-callout: none) {

      .slick-prev-custom,
      .slick-next-custom,
      .project-arrow {
        padding-top: 3px;
        padding-bottom: 0;
      }
    }
  }

  .custom-arrows button:hover {
    background-color: #e9fdf9;
    border-color: #00b89f;
    color: #05ACA1;
  }




  .project-arrow {
    width: 40px;
    height: 40px;
    border: 1px solid #D0D1D5;
    border-radius: 50%;
    background-color: #ffffff;
    font-size: 16px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: #000;
    padding: 0;
    line-height: 0;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    z-index: 99;
  }

  .project-arrow:hover {
    background-color: #e9fdf9;
    border-color: #00b89f;
    color: #05ACA1;
  }


  .datacore-right {
    font-family: 'Texta';
    font-weight: 400;
    font-size: 0.875rem;
    /* color: #46484D; */
    color: #2E2F33;
    margin-top: 5px;
  }

  .slick-slide {
    /* display: none; */
  }

  .what {
    font-family: 'Texta';
    font-weight: 400;
    font-size: 32px;
    line-height: 120%;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #1C1D20;
  }

  .read7 {
    font-family: 'Texta';
    font-weight: 800;
    font-size: 0.875rem;
    line-height: 120%;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    color: #05ACA1;

  }



  .xc-p {
    padding-left: 23% !important;
  }

  .iconz {
    color: #D9D9D9;
    font-size: 5px;
    padding-right: 10px;
  }

  .news-meta {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: 'Texta';
    font-weight: 500;
    font-size: 12px;
    line-height: 120%;
    color: #616266;
    flex-wrap: wrap;
    /* responsive wrapping on small screens */
  }

  .date-block {
    display: flex;
    flex-direction: column;
  }

  .date {
    margin-bottom: 2px;
  }



  .sp {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .iconz {
    font-size: 6px;
    color: #C9C9C9;
    margin-top: 2px;
  }



  @media (max-width: 767px) {
    .custom-arrows {
      justify-content: center;
    }

    .news-card {
      margin-bottom: 30px;
    }
  }


  @media (max-width: 991px) {
    .datacore {
      font-size: 3.5rem;
      text-align: center;
    }

    .what {
      font-size: 2.1rem;
      text-align: center;
    }

    .datacore-right {
      text-align: center;

      padding-top: 10px;
    }

    .xc-p {
      padding-left: 0 !important;
    }

    .custom-arrows {
      justify-content: center;
      margin-top: 20px;
    }

    .card-content {
      padding: 30px 20px;
      margin-right: 0px;
    }

    .news-title {
      font-size: 22px;
      /* text-align: center; */
    }

    .news-desc {

      text-align: justify;
    }

    .arrowbtn {
      font-size: 12px;
    }

    .arrodiv {
      text-align: center;
    }

    .news-meta {
      text-align: center;
    }

    .sp {
      padding-right: 0;
      padding-top: 1px;
    }
  }

  @media (max-width: 576px) {

    .slick-prev-custom,
    .slick-next-custom,
    .project-arrow {
      width: 38px;
      height: 38px;
      font-size: 18px;
      line-height: 1;
      /* ✅ Helps icons/text stay centered */
      padding-bottom: 1px;

    }

    .what,
    .datacore-right,
    .datacore {

      text-align: left;
      padding: 0px 0px;
    }

    .what,
    .datacore {
      padding-left: 0px !important;

    }


    .card-content {
      padding: 25px 15px;
    }

    .news-title {
      font-size: 20px;
    }

    .datacore-img {
      width: 100%;
      height: auto;
    }

    .news-card {

      padding: 0px 0px;

      margin: 0 0px;
    }

    .core-data {
      padding: 0px;
    }
  }


  /* sucess */


  .success-stories-wrapper {
    padding: 80px 0px 0px 0px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /* max-width: 1400px; */

  }

  .case-studies {
    position: relative;
    padding-left: 20px;
    font-family: Texta;
    font-weight: 800;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 25px 0px;
    /* color:#1C1D20; */
    color: #1A1B1F;
  }

  .case-studies::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 18px;
    background-color: #05ACA1;
  }

  .custom-hr {
    border: 1px solid #C4C5C8;
    margin: 1rem 0;
    width: 100%;
  }

  .description-column {
    flex: 1;
    max-width: 500px;
  }

  .description-text {
    color: #333333;
    font-size: 18px;
    font-family: 'Texta';
    line-height: 1.7;
    margin-bottom: 30px;
    font-weight: 500;
    margin-top: 10px;
  }

  .case-study-link {
    display: inline-flex;
    align-items: center;
    color: #00b5ad;
    font-size: 14px;
    font-weight: 800;
    font-family: 'Texta';
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all 0.3s ease;
  }

  .case-study-link:hover {
    color: #008c84;
  }

  .case-study-link::before {
    content: "\25B6";
    /* Unicode for ▶ */
    display: inline-block;
    margin-right: 10px;
    font-size: 12px;
    vertical-align: middle;
    -webkit-text-stroke: 0.2px;
    /* improves Safari visibility */
    color: #00b5ad;
  }

  .heading-column {
    flex: 1;
    text-align: right;
    padding-left: 60px;
  }

  .section-label {
    color: #1C1D20;
    font-size: 44px;
    font-family: 'Texta';
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 10px;
  }

  .main-heading {
    color: #1a1a1a;
    font-size: 3.5rem;
    font-family: 'Texta';
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 2px;
    text-transform: uppercase;
  }

  @media (max-width: 1024px) {
    .success-stories-wrapper {
      flex-direction: column;
      padding: 60px 0px;
    }

    .heading-column {
      text-align: left;
      padding-left: 0;
      margin-bottom: 40px;
      order: -1;
    }

    .description-column {
      max-width: 100%;
    }

    .main-heading {
      font-size: 56px;
    }
  }

  @media (max-width: 640px) {
    .success-stories-wrapper {
      padding: 40px 0px;
    }

    .main-heading {
      font-size: 42px;
    }

    .description-text {
      font-size: 16px;
    }
  }



  /* rtl............................................................. */

  [dir="rtl"] .READ_MORE,
  .right-img {
    text-align: right;
  }

  [dir="rtl"] .datacore,
  [dir="rtl"] .what,
  [dir="rtl"] .datacore-right,
  [dir="rtl"] .brand-text {
    text-align: right;
    padding-right: 16px;
  }

  [dir="rtl"] .project-desc {
    padding-right: 0px;
  }

  [dir="rtl"] .custom-indicators {
    left: 0 !important;
    right: auto !important;
  }

  [dir="rtl"] .heading-column {

    text-align: left;
    padding-left: 0px;
  }

  [dir="rtl"] .read7 {
    padding-right: 8px;
  }

  [dir="rtl"] .s2,
  .s3 {
    margin-right: 0px !important;
  }

  [dir="rtl"] .text-muted-2,
  .heading-description {
    padding-right: 0px !important;
    text-align: right !important;
  }

  [dir="ltr"] .heading-description,
  .brands-header {
    text-align: left !important;
  }

  [dir="rtl"] .brands-header,
  [dir="rtl"] .text-start {
    text-align: right !important;
  }

  [dir="rtl"] .me-3 {
    margin-left: 1rem;
  }

  [dir="rtl"] .card-content {
    margin-right: 0px;
    margin-left: 30px;
    padding: 48px 35px 25px 5px;
  }


  /* Default (LTR) */
  #prevBtnz::before {
    content: "←";
  }

  #nextBtnz::before {
    content: "→";
  }

  #prevBtn::before {
    content: "←";
  }

  #nextBtn::before {
    content: "→";
  }

  /* RTL fix */
  [dir="rtl"] #prevBtnz::before {
    content: "→";
    /* reverse */
  }

  [dir="rtl"] #nextBtnz::before {
    content: "←";
    /* reverse */
  }

  [dir="rtl"] #prevBtn::before {
    content: "→";
    /* reverse */
  }

  [dir="rtl"] #nextBtn::before {
    content: "←";
    /* reverse */
  }

  [dir="rtl"] .nextx::before {
    content: "→";
    /* reverse */
  }

  [dir="rtl"] .prevx::before {
    content: "←";
    /* reverse */
  }

  [dir="ltr"] .nextx::before {
    content: "→";
    /* reverse */
  }

  [dir="ltr"] .prevx::before {
    content: "←";
    /* reverse */
  }


  @media (max-width:769px) {
    html[dir="rtl"] .nextx::before {
      content: "←";
      /* reverse */
    }

    html[dir="rtl"] .prevx::before {
      content: "→";
      /* reverse */
    }



  }



  [dir="rtl"] .section-heading,
  [dir="rtl"] .section-sub,
  [dir="rtl"] .section-paragraph,
  [dir="rtl"] .stat-block {
    text-align: right !important;
  }

  [dir="rtl"] .wd {
    margin-left: 0px;
  }

  [dir="rtl"] .paragraph-box {
    transform: translateX(-78%) !important;
    text-align: right;


  }

  [dir="rtl"] .get-btn {
    margin-right: 0px;


  }

  @media (max-width:450px) {
    [dir="rtl"] .paragraph-box {
      transform: translateX(-115%) !important;
      max-width: 250px;


    }

  }
</style>
<div class="container-fluid">
  <div id="customCarousel" class="carousel slide position-relative" data-bs-ride="carousel">


    <div class="carousel-indicators custom-indicators d-flex">
      <button type="button" aria-label="carousel-bttn" data-bs-target="#customCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button><button type="button" aria-label="carousel-bttn" data-bs-target="#customCarousel" data-bs-slide-to="1"  aria-label="Slide 2"></button>    </div>

    <div class="carousel-controls align-items-center">
      <button class="carousel-control-prev" type="button" data-bs-target="#customCarousel" data-bs-slide="prev">
        <img src="assets1/images/icons8-arrow-50.png" alt="Carousel images" class="prev">
      </button>
      <a href="https://datacore.com.sa/">
        <!-- <img src="assets1/images/home-logo.svg" alt="home logo" class="home-logo"> -->
      </a>
      <span class="swiper-count">1 / 2</span>
      <button class="carousel-control-next" type="button" data-bs-target="#customCarousel" data-bs-slide="next">
        <img src="assets1/images/icons8-arrow-50 (1).png" alt=" carousel next arrow images" class="next">
      </button>
    </div>


    <div class="carousel-inner">
                <div class="carousel-item active">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/pcm__c2405f90-a6fe-43a1-ae85-53886a45d95b_0.jpg" class="d-block w-100" alt="Home Banner images" fetchpriority="high" decoding="sync">
            <div class="banner"></div>

            <div class="carousel-caption d-flex flex-column justify-content-center align-items-center">
              <div class="carousel-box" data-aos="fade-up">

                <h3>Bringing Your</h3>
                <h1>Vision to Life</h1>

                <div class="paragraph-box">
                  <p>We start wherever you are and work with you to understand your needs. Our solution fits your design and is built just for you.</p>
                </div>

                <!-- ✔ Button visible only if data exists -->
                                  <a href="https://www.datacore.com.sa/contact-us" class="get-btn">
                    Get in Touch                  </a>
                
              </div>
            </div>
          </div>
                    <div class="carousel-item ">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/pcm__ddc79ac0-36d7-46aa-ac9d-52148440a2db_0.jpg" class="d-block w-100" alt="Home Banner images" loading="lazy" decoding="async">
            <div class="banner"></div>

            <div class="carousel-caption d-flex flex-column justify-content-center align-items-center">
              <div class="carousel-box" data-aos="fade-up">

                <h3>Intelligent Rooms</h3>
                <h1> Better Meetings</h1>

                <div class="paragraph-box">
                  <p>Experience effortless collaboration with unified AV, IT, and room automation that streamlines setup, enhances communication, and ensures productive, distraction-free meetings.</p>
                </div>

                <!-- ✔ Button visible only if data exists -->
                                  <a href="https://www.datacore.com.sa/contact-us" class="get-btn">
                    GET IN TOUCH                  </a>
                
              </div>
            </div>
          </div>
              </div>


  </div>
</div>





<section class="sub_service" style="margin-top:5rem;">
  <div class="mxy">



    <div class="heading-container ">
      <div class="heading-text " data-aos="fade-up" data-aos-delay="10">
        <h2 class="display-5">How we help <span>you succeed</span></span></h2>
      </div>
      <div class="heading-description">
        <p class="text-muted-2 mt-0" data-aos="fade-up" data-aos-delay="20">
          Harness the power of cutting-edge technology to streamline your operations, discover our services.        </p>
        <img src="https://datacore.com.sa/assets1/images/Vector 8.png" class="play-icon" alt="Succeed readmore images"
          data-aos="fade-up" data-aos-delay="30" loading="lazy">
        <a href="https://datacore.com.sa/services" class="right-img">Find out our all services</a>

      </div>
    </div>
    <div class="row g-3 revers-row " style="padding:0px">

      <div class="col-lg-7 p-0 ">
        <div class="row mr g-4">
          
        <div class="col-md-6">
          <div class="xc-2 h-100">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/secure_6d34572a-e025-4846-be84-18e3cb2fc0e3_0.png" alt="Service card images " class="icon-img" data-aos="fade-up" data-aos-delay="10" loading="lazy">
            <h3 class="s-h" data-aos="fade-up" data-aos-delay="10">Network Infrastructure Services</h3>
            <p class="s1" data-aos="fade-up" data-aos-delay="10">Our network infrastructure services are built to enhance your digital ecosystem, ensuring reliable performance, seamless connectivity, and efficient integration across all systems and devices.</p>
            <div class="mt-2" data-aos="fade-up" data-aos-delay="15">
              <img src="assets1/images/Vector 8.png" class="play-icon" alt="Service arrow  images" loading="lazy"/>
              <a href="https://datacore.com.sa/services?id=network-infrastructure-services" class="READ_MORE">READ MORE</a>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="xc-2 h-100">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/frame_1364ec4f-363f-421d-97e1-9829b76f651b_0.png" alt="Service card images " class="icon-img" data-aos="fade-up" data-aos-delay="10" loading="lazy">
            <h3 class="s-h" data-aos="fade-up" data-aos-delay="10">Public Address And Fire Alarm System</h3>
            <p class="s1" data-aos="fade-up" data-aos-delay="10">Our PAVA and FA systems are designed to strengthen your building’s safety ecosystem, delivering clear emergency communication, rapid fire alerts, and seamless coordination across all spaces.</p>
            <div class="mt-2" data-aos="fade-up" data-aos-delay="15">
              <img src="assets1/images/Vector 8.png" class="play-icon" alt="Service arrow  images" loading="lazy"/>
              <a href="https://datacore.com.sa/services?id=public-address-and-fire-alarm-system" class="READ_MORE">READ MORE</a>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="xc-2 h-100">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/server_18e1d97b-df7f-4512-a18c-527666cb2753_0.png" alt="Service card images " class="icon-img" data-aos="fade-up" data-aos-delay="10" loading="lazy">
            <h3 class="s-h" data-aos="fade-up" data-aos-delay="10">Datacenter Solutions</h3>
            <p class="s1" data-aos="fade-up" data-aos-delay="10">Safeguard your operations with our Data Centre services, ensuring secure performance, seamless scalability, and reliable infrastructure integration across storage, virtualization, and backup systems.
</p>
            <div class="mt-2" data-aos="fade-up" data-aos-delay="15">
              <img src="assets1/images/Vector 8.png" class="play-icon" alt="Service arrow  images" loading="lazy"/>
              <a href="https://datacore.com.sa/services?id=datacenter-solutions" class="READ_MORE">READ MORE</a>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="xc-2 h-100">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/audio_ecc653bf-fe04-44d1-b955-df33a141c61d_0.png" alt="Service card images " class="icon-img" data-aos="fade-up" data-aos-delay="10" loading="lazy">
            <h3 class="s-h" data-aos="fade-up" data-aos-delay="10">Audio-Visual Solutions</h3>
            <p class="s1" data-aos="fade-up" data-aos-delay="10">Audio-Visual Solutions from Datacore enhance communication and collaboration across modern workplaces. Our Audio-Visual Solutions deliver clear audio, vibrant visuals, and seamless meeting experiences for meeting rooms, conference spaces, auditoriums, and collaborative environments. Designed for smart performance, reliability, and easy integration, our solutions help organizations improve productivity and engagement.</p>
            <div class="mt-2" data-aos="fade-up" data-aos-delay="15">
              <img src="assets1/images/Vector 8.png" class="play-icon" alt="Service arrow  images" loading="lazy"/>
              <a href="https://datacore.com.sa/services?id=audio-visual-solutions" class="READ_MORE">READ MORE</a>
            </div>
          </div>
        </div>        </div>
      </div>

      <div class="col-lg-1"></div>

      <div class="col-lg-4  d-flex align-items-stretch">
        <div class="image-container w-100" data-aos="fade-up" data-aos-delay="10">
          <img src="https://datacore.com.sa/assets1/images/arabi.webp" class="img-fluidz" alt="Service arabi Images"
            loading="lazy" />
        </div>
      </div>
    </div>

  </div>
  </div>
</section>





<section class="section-2">
  <div class="mxy containerz">
    
    <!-- Heading Row -->
    <div class="row mb-5 fez">
      <div class="col-md-6 p-0 mb-4">
        <h3 class="section-heading" data-aos="fade-up" data-aos-delay="100">
      
proven
        </h3>
        <h2 class="section-sub" data-aos="fade-up" data-aos-delay="200">
        EXPERTISE
        </h2>
      </div>
       <div class="col-md-1 "></div>
      <div class="col-md-5 p-0 mt-2">
        <p class="section-paragraph" data-aos="fade-up" data-aos-delay="300">
      Our clients choose us for our trusted expertise, customized strategies, and consistent delivery of measurable results. Through innovation and a deep understanding of each client’s goals, we craft solutions that create real, lasting impact. Experience how true partnership transforms performance.
        </p>
      </div>
    </div>

    <div class="stats-row m-p">
      
  <div class="stat-block" data-aos="fade-up" data-aos-delay="400">
    <h2 class="stat-number" data-target="1000+">0</h2>
    <p class="stat-title">Satisfied Customers </p>
  </div>

  <div class="stat-block" data-aos="fade-up" data-aos-delay="400">
    <h2 class="stat-number" data-target="100+">0</h2>
    <p class="stat-title">Team Members</p>
  </div>

  <div class="stat-block" data-aos="fade-up" data-aos-delay="400">
    <h2 class="stat-number" data-target="03">0</h2>
    <p class="stat-title">Countries across the globe</p>
  </div>

  <div class="stat-block" data-aos="fade-up" data-aos-delay="400">
    <h2 class="stat-number" data-target="15+">0</h2>
    <p class="stat-title">Year’s experiense</p>
  </div>


    </div>


  </div>
</section>


<section class="brands-section  ">
  <div class="brands-header pyz">
    <h2 class="brand" data-aos="fade-up" data-aos-delay="100">
      BRANDS    </h2>
    <h3 class="brand-trust" data-aos="fade-up" data-aos-delay="200">
      THAT TRUST US    </h3>
  </div>

  <div class="carousel-container  ">
    <div class="carousel-track mt-2" id="carouselTrack">
      <!-- Page 1: Logos 1–8 -->
      <div class="carousel-pagez">
        <div class="brand-logo"><img src="https://datacore.com.sa/assets1/images/01.png" alt="log1"
            class="brand-img" data-aos="fade-up" data-aos-delay="300" loading="lazy"></div>
        <div class="brand-logo"><img src="https://datacore.com.sa/assets1/images/02.png" alt="log2" class="brand-img"
            data-aos="fade-up" data-aos-delay="350" loading="lazy"></div>
        <div class="brand-logo"><img src="https://datacore.com.sa/assets1/images/03.png" alt="log3" class="brand-img"
            data-aos="fade-up" data-aos-delay="400" loading="lazy"></div>
        <div class="brand-logo"><img src="https://datacore.com.sa/assets1/images/04.png" alt="log4" class="brand-img"
            data-aos="fade-up" data-aos-delay="450" loading="lazy"></div>
        <div class="brand-logo"><img src="https://datacore.com.sa/assets1/images/05.png" alt="log5"
            class="brand-img" data-aos="fade-up" data-aos-delay="500" loading="lazy"></div>
        <div class="brand-logo"><img src="https://datacore.com.sa/assets1/images/01.png" alt="log6" class="brand-img"
            data-aos="fade-up" data-aos-delay="550" loading="lazy"></div>

      </div>

      <!-- Page 2: Logos 9–16 -->
      <div class="carousel-pagez">
        <div class="brand-logo"><img src="https://datacore.com.sa/assets1/images/01.png" alt="log7"
            class="brand-img" loading="lazy"></div>
        <div class="brand-logo"><img src="https://datacore.com.sa/assets1/images/02.png" alt="log8" class="brand-img"
            loading="lazy"></div>
        <div class="brand-logo"><img src="https://datacore.com.sa/assets1/images/03.png" alt="log9" class="brand-img"
            loading="lazy"></div>
        <div class="brand-logo"><img src="https://datacore.com.sa/assets1/images/04.png" alt="log10" class="brand-img"
            loading="lazy"></div>
        <div class="brand-logo"><img src="https://datacore.com.sa/assets1/images/05.png" alt="log11"
            class="brand-img" loading="lazy"></div>
        <div class="brand-logo"><img src="https://datacore.com.sa/assets1/images/01.png" alt="log12" class="brand-img"
            loading="lazy"></div>

      </div>
    </div>
  </div>

  <div class="carousel-controlsz" data-aos="fade-up" data-aos-delay="400">
    <button id="prevBtnz" aria-label="control-carousel-next"></button>
    <button id="nextBtnz" aria-label="carousel-bttn-next"></button>
  </div>
</section>





<section>



  <div class="all-projects mxy" id="home-project">

    
  <section class="success-stories-wrapper">
        <div class="description-column">
            <p class="description-text"> Discover how our latest projects have helped clients transform challenges into success  boosting efficiency, productivity, and innovation through smart, technology-driven solutions.</p>
            <img src="https://datacore.com.sa/assets1/project/Vector 8.png" alt="Home project images" data-aos="fade-up" data-aos-delay="400" class="play-icon" style="height:11px; width:10px;"  >
            <a href="<?= SITE_URL ?>project" class="read7">Find out MORE PROJECTS</a>
        </div>
        <div class="heading-column">
            <p class="section-label">  latest</p>
            <h2 class="main-heading"> SUCCESS STORIES</h2>
        </div>
    </section>
    <div class="grid project-slider-mobile">
      
     <div class="project-card">  <a href="https://datacore.com.sa/projects/smart-modernization-of-aou-council-room">
        <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/pcm__1ceccfe0-b076-497d-b131-ab3e71141d07_0.jpg" alt="Project 1" class="image-project"  loading="lazy"/>
          <div class="vertical-bar-heading">
        <h3 class="case-studies">projects</h3>
      </div>
        <div class="project-content">
          <h3 class="project-title" data-aos="fade-up" data-aos-delay="100"> Smart Modernization of AOU Council Room</h3>
            <hr class="custom-hr" />
          <div class="project-desc" data-aos="fade-up" data-aos-delay="100"> Data Core Solutions transformed the Arab Open University’s council room with a fully integrated Audio-Visual system, delivering seamless UC compatibility, wireless BYOD connectivity, improved audio clarity, and simple, intuitive control for a modern, efficient meeting experience.</div>
        </div>
        <div class="mt-3 mpace arrowdiv">
    <img src="https://datacore.com.sa/assets1/project/Vector 8.png" alt="Home project readmore images "  class="play-icon"  loading="lazy">
<a href="https://datacore.com.sa/projects/smart-modernization-of-aou-council-room" class="read7">READ MORE</a>

        </div>
        </a>
      </div>
     <div class="project-card">  <a href="https://datacore.com.sa/projects/smart-classrooms-for-psau-campus">
        <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/pcm__e2a8b2a1-2f54-44f3-ba71-31d513c94338_0.jpg" alt="Project 1" class="image-project"  loading="lazy"/>
          <div class="vertical-bar-heading">
        <h3 class="case-studies">projects</h3>
      </div>
        <div class="project-content">
          <h3 class="project-title" data-aos="fade-up" data-aos-delay="100"> Smart Classrooms for PSAU Campus</h3>
            <hr class="custom-hr" />
          <div class="project-desc" data-aos="fade-up" data-aos-delay="100"> Data Core Solutions modernized PSAU’s classrooms, meeting rooms, and auditoriums with smart displays, advanced audio systems, UC-enabled setups, and centralized digital signage, creating a flexible, interactive, and future-ready learning environment across the university.</div>
        </div>
        <div class="mt-3 mpace arrowdiv">
    <img src="https://datacore.com.sa/assets1/project/Vector 8.png" alt="Home project readmore images "  class="play-icon"  loading="lazy">
<a href="https://datacore.com.sa/projects/smart-classrooms-for-psau-campus" class="read7">READ MORE</a>

        </div>
        </a>
      </div>
     <div class="project-card">  <a href="https://datacore.com.sa/projects/comprehensive-av-solution-for-taqeem-hq">
        <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/pcm__173ccab2-1ca6-45a4-b172-98d6724ba469_0.jpg" alt="Project 1" class="image-project"  loading="lazy"/>
          <div class="vertical-bar-heading">
        <h3 class="case-studies">projects</h3>
      </div>
        <div class="project-content">
          <h3 class="project-title" data-aos="fade-up" data-aos-delay="100"> COMPREHENSIVE AV SOLUTION FOR TAQEEM HQ</h3>
            <hr class="custom-hr" />
          <div class="project-desc" data-aos="fade-up" data-aos-delay="100"> Data Core Solutions upgraded TAQEEM’s headquarters with tailored AV systems across meeting rooms, offices, and a theater, integrating smart displays, advanced audio, wireless sharing, and intuitive controls to enhance collaboration, communication, and long-term scalability.</div>
        </div>
        <div class="mt-3 mpace arrowdiv">
    <img src="https://datacore.com.sa/assets1/project/Vector 8.png" alt="Home project readmore images "  class="play-icon"  loading="lazy">
<a href="https://datacore.com.sa/projects/comprehensive-av-solution-for-taqeem-hq" class="read7">READ MORE</a>

        </div>
        </a>
      </div>
     <div class="project-card">  <a href="https://datacore.com.sa/projects/auditorium-av-solution-for-university">
        <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/pcm__1fe8ffbe-4e6e-46f4-99d7-d71096772a98_0.jpg" alt="Project 1" class="image-project"  loading="lazy"/>
          <div class="vertical-bar-heading">
        <h3 class="case-studies">projects</h3>
      </div>
        <div class="project-content">
          <h3 class="project-title" data-aos="fade-up" data-aos-delay="100"> Auditorium AV Solution for University</h3>
            <hr class="custom-hr" />
          <div class="project-desc" data-aos="fade-up" data-aos-delay="100"> Data Core Solutions transformed AOU’s auditorium with a 4K LED video wall, advanced audio-video systems, BYOD connectivity, and intuitive iPad control, delivering a modern, automated, and user-friendly environment that enhances interaction, clarity, and overall presentation quality.</div>
        </div>
        <div class="mt-3 mpace arrowdiv">
    <img src="https://datacore.com.sa/assets1/project/Vector 8.png" alt="Home project readmore images "  class="play-icon"  loading="lazy">
<a href="https://datacore.com.sa/projects/auditorium-av-solution-for-university" class="read7">READ MORE</a>

        </div>
        </a>
      </div>
    </div>
  </div>
</section>






<section class="alliances-section ">
  <div class="alliances-header mxy">
    
  <div class="col-md-6 text-start" data-aos="fade-up" data-aos-delay="300">
    <h3 class="brand-heading "> trusted</h3>
    <h2 class="brand-subheading"> alliances</h2>
  </div>

  <div class="col-md-1"></div>

  <div class="col-md-5 wd " data-aos="fade-up" data-aos-delay="400">
    <p class="brand-text mt-2">
     Discover our trusted supplier network delivering cutting-edge technologies that drive innovation and empower your business success.
    </p>
    
  </div>  </div>


  <!-- <div class="carousel-desktop-container ">
    <div class="desktop-carousel mxy" data-aos="fade-up" data-aos-delay="500">
      <div class="logo-item"><img src="https://datacore.com.sa/assets1/images/log.png" alt=""  loading="lazy"></div>  
      <div class="logo-item"><img src="https://datacore.com.sa/assets1/images/log3.png" alt=""  loading="lazy"></div>
      <div class="logo-item"><img src="https://datacore.com.sa/assets1/images/log4.png" alt=""  loading="lazy"></div>
      <div class="logo-item"><img src="https://datacore.com.sa/assets1/images/log5.png" alt=""  loading="lazy"></div>
      <div class="logo-item"><img src="https://datacore.com.sa/assets1/images/log6.png" alt=""  loading="lazy"></div>
      <div class="logo-item"><img src="https://datacore.com.sa/assets1/images/log7.png" alt=""  loading="lazy"></div>
      <div class="logo-item"><img src="https://datacore.com.sa/assets1/images/log.png" alt=""  loading="lazy"></div>  
      <div class="logo-item"><img src="https://datacore.com.sa/assets1/images/log3.png" alt=""  loading="lazy"></div>
      <div class="logo-item"><img src="https://datacore.com.sa/assets1/images/log4.png" alt=""  loading="lazy"></div>
      <div class="logo-item"><img src="https://datacore.com.sa/assets1/images/log5.png" alt=""  loading="lazy"></div>
      <div class="logo-item"><img src="https://datacore.com.sa/assets1/images/log6.png" alt=""  loading="lazy"></div>
      <div class="logo-item"><img src="https://datacore.com.sa/assets1/images/log7.png" alt=""  loading="lazy"></div>
    </div>
  </div> -->


  <!-- <div class="carousel-mobile-container mxy">
    <div class="mobile-carousel" data-aos="fade-up" data-aos-delay="500">
      <div class="logo-item"><img src="https://datacore.com.sa/assets1/images/log.png" alt="" loading="lazy"></div>
      <div class="logo-item"><img src="https://datacore.com.sa/assets1/images/log3.png" alt="" loading="lazy"></div>
      <div class="logo-item"><img src="https://datacore.com.sa/assets1/images/log4.png" alt=""  loading="lazy"></div>
      <div class="logo-item"><img src="https://datacore.com.sa/assets1/images/log5.png" alt=""  loading="lazy"></div>
      <div class="logo-item"><img src="https://datacore.com.sa/assets1/images/log6.png" alt=""  loading="lazy"></div>
      <div class="logo-item"><img src="https://datacore.com.sa/assets1/images/log7.png" alt=""  loading="lazy"></div>
      <div class="logo-item"><img src="https://datacore.com.sa/assets1/images/log.png" alt="" loading="lazy"></div>
      <div class="logo-item"><img src="https://datacore.com.sa/assets1/images/log3.png" alt="" loading="lazy"></div>
      <div class="logo-item"><img src="https://datacore.com.sa/assets1/images/log4.png" alt="" loading="lazy"></div>
      <div class="logo-item"><img src="https://datacore.com.sa/assets1/images/log5.png" alt="" loading="lazy"></div>
      <div class="logo-item"><img src="https://datacore.com.sa/assets1/images/log6.png" alt="" loading="lazy"></div>
      <div class="logo-item"><img src="https://datacore.com.sa/assets1/images/log7.png" alt="" loading="lazy"></div>
    </div>
  </div> -->

  
  <div class="carousel-desktop-container">
    <div class="desktop-carousel mxy" data-aos="fade-up" data-aos-delay="500">
                        <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_18_0.png"
              alt="1" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_19_0.png"
              alt="2" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_20_0.png"
              alt="3" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_21_0.png"
              alt="4" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_22_0.png"
              alt="5" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_23_0.png"
              alt="6" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_24_0.png"
              alt="6" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_25_0.png"
              alt="7" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_26_0.png"
              alt="8" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_27_0.png"
              alt="10" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_28_0.png"
              alt="11" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_29_0.png"
              alt="12" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_30_0.png"
              alt="13" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_31_0.png"
              alt="14" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_32_0.png"
              alt="15" loading="lazy">
          </div>
        
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_18_0.png"
              alt="1" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_19_0.png"
              alt="2" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_20_0.png"
              alt="3" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_21_0.png"
              alt="4" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_22_0.png"
              alt="5" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_23_0.png"
              alt="6" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_24_0.png"
              alt="6" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_25_0.png"
              alt="7" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_26_0.png"
              alt="8" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_27_0.png"
              alt="10" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_28_0.png"
              alt="11" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_29_0.png"
              alt="12" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_30_0.png"
              alt="13" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_31_0.png"
              alt="14" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_32_0.png"
              alt="15" loading="lazy">
          </div>
                  </div>
  </div>


  <div class="carousel-mobile-container mxy">
    <div class="mobile-carousel" data-aos="fade-up" data-aos-delay="500">
                        <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_18_0.png"
              alt="1" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_19_0.png"
              alt="2" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_20_0.png"
              alt="3" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_21_0.png"
              alt="4" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_22_0.png"
              alt="5" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_23_0.png"
              alt="6" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_24_0.png"
              alt="6" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_25_0.png"
              alt="7" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_26_0.png"
              alt="8" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_27_0.png"
              alt="10" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_28_0.png"
              alt="11" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_29_0.png"
              alt="12" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_30_0.png"
              alt="13" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_31_0.png"
              alt="14" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_32_0.png"
              alt="15" loading="lazy">
          </div>
        
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_18_0.png"
              alt="1" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_19_0.png"
              alt="2" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_20_0.png"
              alt="3" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_21_0.png"
              alt="4" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_22_0.png"
              alt="5" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_23_0.png"
              alt="6" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_24_0.png"
              alt="6" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_25_0.png"
              alt="7" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_26_0.png"
              alt="8" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_27_0.png"
              alt="10" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_28_0.png"
              alt="11" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_29_0.png"
              alt="12" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_30_0.png"
              alt="13" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_31_0.png"
              alt="14" loading="lazy">
          </div>
                  <div class="logo-item">
            <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/ugxcms_32_0.png"
              alt="15" loading="lazy">
          </div>
                  </div>
  </div>
</section>


<!-- 
<section class="section-6">
  <div class="mxy">
  <h3>voices of</h3>
  <h2 class="sub">satisfaction</h2>

  <div class="carousel-container">
  
    <button class="carousel-btn prevx carousel-btn-wrapper-desktop"  aria-label="voice-bttn-next"></button>
    <button class="carousel-btn nextx carousel-btn-wrapper-desktop"  aria-label="voice-bttn-next"></button>

<div class="carousel-track-wrapper" dir="ltr"><div class="carousel-trackz">
        <div class="card-wrapper">
          <div class="cardz">
            <img src="https://phpstack-795051-5712964.cloudwaysapps.com/imgserver/uploads/attachments/pcm__958894ff-7cc2-4559-b5b9-f494545b20da_0.png" alt="Testimonials images" loading="lazy">
            <h5 class="m-0">Jasper Roll</h5>
            <small class="location">Brainpan</small>
            <p>Wow... I am very happy to use this VPN, it turned out to be more than my expectations and so far there have been no problems. LaslesVPN always the best</p>
          </div>
        </div>
        <div class="card-wrapper">
          <div class="cardz">
            <img src="https://datacore.com.sa/imgserver/uploads/attachments/pcm__28ab2c5f-e8a2-4ca1-afe5-e2f8cbc295d1_0.png" alt="Testimonials images" loading="lazy">
            <h5 class="m-0">Mark Twain</h5>
            <small class="location">Brainpan</small>
            <p>“Wow... I am very happy to use this VPN, it turned out to be more than my expectations and so far there have been no problems. LaslesVPN always the best”.</p>
          </div>
        </div>
        <div class="card-wrapper">
          <div class="cardz">
            <img src="https://datacore.com.sa/imgserver/uploads/attachments/pcm__c92d7513-bbf7-482d-a806-e2f742f73723_0.png" alt="Testimonials images" loading="lazy">
            <h5 class="m-0">Abdul Jaleel</h5>
            <small class="location">Brainpan</small>
            <p>“Wow... I am very happy to use this VPN, it turned out to be more than my expectations and so far there have been no problems. LaslesVPN always the best”.</p>
          </div>
        </div></div></div>


    <div class="carousel-controls-mobile">
      <button class="carousel-btn prevx"  aria-label="vmobile-bttn-next"></button>
      <button class="carousel-btn nextx"  aria-label="vmobile-bttn-next"></button>
    </div>
  </div>
  </div>
</section>
 -->





<section class="py-5 ">
  <div class="mxy">
    <div class="row mb-6  align-items-start">
      
      <div class="col-md-6 core-data" >
        <h3 class="text-uppercase what  "data-aos="fade-up" data-aos-delay="100"> Technology Insights </h3>
        <h2 class="datacore" data-aos="fade-up" data-aos-delay="200"> That Matter</h2>
      </div>

      <div class="col-md-2 "></div>
      <div class="col-md-4 p-0" data-aos="fade-up" data-aos-delay="300">
        <p class="datacore-right">
        Dive into the latest insights, updates, and trends happening at digital world by exploring our comprehensive blog section.
        </p>
        <div class="custom-arrows" >
          <button class="slick-prev-custom me-3" id="prevBtn"  aria-label="blog-bttn-next"></button>
          <button class="slick-next-custom" id="nextBtn"  aria-label="blog-bttn-next"></button>
        </div>
      </div>
          </div>




    <div class="news-slider">

      
                  
      <div class="news-card" data-aos="fade-up" data-aos-delay="500">
          <a href="https://datacore.com.sa/blogs/what-is-a-public-address-system-">
        <img src="https://www.datacore.com.sa/imgserver/uploads/attachments/pcm__f91bd1e2-504f-40b6-b816-779310b1883d_0.jpg" alt="Blog images"  class="datacore-img" />
        <div class="card-content"  data-limit="10">
          <h2 class="news-title" data-limit="45">WHAT IS A PUBLIC ADDRESS SYSTEM? </h2>
          <div class="news-meta">
            <div class="date-block">
              <span class="date">3 March, 2026</span>
              <hr class="hr-under-date" />
            </div>
            <span class="sp"><i class="bi bi-circle-fill iconz"></i>Admin </span>
          </div>
          <p class="news-desc">Have you ever attended a concert, been at an airport, or walked through a mall and heard announcements loud and clear? That’s all thanks to a Public Address System (PA System)—a technology used to amplify sound</p>
          <div class="arrowdiv">
           <img src="https://datacore.com.sa/assets1/project/Vector 8.png" alt="Blog readmore images" data-aos="fade-up" data-aos-delay="400" loading="lazy">
<a href="https://datacore.com.sa/blogs/what-is-a-public-address-system-" class="read7">READ MORE</a>
          </div>
        </div>
        
          </a>
      </div>
      
                  
      <div class="news-card" data-aos="fade-up" data-aos-delay="500">
          <a href="https://datacore.com.sa/blogs/the-impact-of-5g-on-passive-network">
        <img src="https://www.datacore.com.sa/imgserver/uploads/compressed/pcm__c5c73f14-a0f8-4e81-b990-c70cb5f6e205_0.png" alt="Blog images"  class="datacore-img" />
        <div class="card-content"  data-limit="10">
          <h2 class="news-title" data-limit="45">The Impact of 5G on Passive Network</h2>
          <div class="news-meta">
            <div class="date-block">
              <span class="date">16 February, 2026</span>
              <hr class="hr-under-date" />
            </div>
            <span class="sp"><i class="bi bi-circle-fill iconz"></i>Admin </span>
          </div>
          <p class="news-desc">5G is transforming the digital landscape, bringing ultra-fast speeds, low latency, and massive connectivity. While most discussions focus on its impact on user experience, an often-overlooked aspect is passive network infrastructure—the foundational components like fiber optics, towers, antennas, and data centers that support 5G.</p>
          <div class="arrowdiv">
           <img src="https://datacore.com.sa/assets1/project/Vector 8.png" alt="Blog readmore images" data-aos="fade-up" data-aos-delay="400" loading="lazy">
<a href="https://datacore.com.sa/blogs/the-impact-of-5g-on-passive-network" class="read7">READ MORE</a>
          </div>
        </div>
        
          </a>
      </div>
      
                  
      <div class="news-card" data-aos="fade-up" data-aos-delay="500">
          <a href="https://datacore.com.sa/blogs/what-is-passive-network">
        <img src="https://www.datacore.com.sa/imgserver/uploads/compressed/pcm__7309e5ed-9985-43a8-bdac-dda75b2da33c_0.png" alt="Blog images"  class="datacore-img" />
        <div class="card-content"  data-limit="10">
          <h2 class="news-title" data-limit="45">What is Passive Network?</h2>
          <div class="news-meta">
            <div class="date-block">
              <span class="date">3 March, 2026</span>
              <hr class="hr-under-date" />
            </div>
            <span class="sp"><i class="bi bi-circle-fill iconz"></i>Admin </span>
          </div>
          <p class="news-desc">In the world of telecommunications and networking, there are two major components: Active Network Infrastructure and Passive Network Infrastructure. While active infrastructure includes devices like routers, switches, and servers that process data, passive network infrastructure forms the backbone that supports data transmission without actively manipulating it.</p>
          <div class="arrowdiv">
           <img src="https://datacore.com.sa/assets1/project/Vector 8.png" alt="Blog readmore images" data-aos="fade-up" data-aos-delay="400" loading="lazy">
<a href="https://datacore.com.sa/blogs/what-is-passive-network" class="read7">READ MORE</a>
          </div>
        </div>
        
          </a>
      </div>
      

    </div>
  </div>
</section>


<script>
  document.addEventListener('DOMContentLoaded', function () {
    const carousel = document.querySelector('#customCarousel');
    const counter = document.querySelector('.swiper-count');
    const totalSlides = document.querySelectorAll('#customCarousel .carousel-item').length;

    if (carousel && counter) {
      // Initialize counter
      counter.textContent = `1 / ${totalSlides}`;

      // Update count on slide change
      carousel.addEventListener('slid.bs.carousel', function (event) {
        const currentIndex = event.to + 1; // Bootstrap gives 0-based index
        counter.textContent = `${currentIndex} / ${totalSlides}`;
      });
    }
  });
</script>


<style>
  /* Mobile 2x2 format layout for statistics numbers (1, 2 / 3, 4) */
  @media (max-width: 768px) {
    .stats-row.m-p {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 20px 10px !important;
      /* vertical, horizontal */
    }

    .stats-row .stat-block {
      width: 100% !important;
      margin: 0 !important;
      /* Optional: ensure center alignment for items in the 2x2 format */
      text-align: center !important;
    }
  }
</style>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Footer Example</title>

  <!-- Bootstrap 5 CSS -->


  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
    rel="stylesheet" media="print" onload="this.media='all'" />




  <script type="text/javascript"
    src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js" defer></script>
  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.0/sweetalert.min.js"  defer></script> -->
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11" defer></script>





  <style>
    @font-face {
      font-family: 'Texta';
      src: url(fonts/TextaHeavy.ttf) format('truetype');
      font-weight: 800;
      /* Heavy */
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'Texta';
      src: url(fonts/TextaMedium.ttf) format('truetype');
      font-weight: 500;
      /* Medium */
      font-style: normal;
      font-display: swap;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }


    body {
      font-family: 'Poppins', sans-serif;
      margin: 0;
      padding: 0;
      top: 0px !important;
      width: 100%;
      overflow-x: clip;
      -webkit-overflow-scrolling: touch;
      /* Chrome mobile fixes */
      min-height: 100vh;
      min-height: -webkit-fill-available;
      position: relative;

    }


    .margin-xy {
      margin: 0px 5.3rem;
    }

    .custom-footer {
      background-color: #1A1B1F;
      color: #fff;
      padding: 40px 0;
    }

    .custom-footer a {
      color: #ccc !important;
      text-decoration: none;
      font-weight: 400;

    }

    .footer-divider {
      border-color: #ffffff;
      margin: 20px 0;
    }

    .footer-logo img {
      width: 150px;
      height: 80px;
    }


    .social-links a {
      /* margin: 0 0px; */
      white-space: nowrap;
      padding-right: 20px;
      color: #ffffff !important;
      height: 24px;
    }

    .align-item {
      align-items: center;
    }

    .footer-icon img {
      color: #05ACA1;
      text-align: center;
      width: 24px;
      height: 24px;


    }

    .copy-right {
      font-size: 1rem;
      color: #C4C5C8;
    }

    .footer-links a {
      font-size: .9rem;
      color: #ccc !important;
    }

    .top-links a {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      font-size: 1rem;

    }

    .footer-links a,
    .copy-right,
    .top-links a {
      font-family: "Poppins", sans-serif;
    }

    .align-left {
      text-align: right;
    }

    .top-links a span {
      width: 10px;
      height: 1px;
      background-color: #00ACA1;
      margin-right: 8px;
    }

    /* .copy-right a, */
    .footer-links a:hover {
      color: #00ACA1 !important;
    }

    .top-links a:hover {
      color: #00ACA1 !important;
    }

    .social-links a:hover {
      color: #ffffff !important;

    }


    @media (max-width:992px) {
      .align-left {
        text-align: center;
      }

    }


    @media (min-width: 600px) {
      .footer-links a {
        margin: 0px 15px !important;

      }

    }

    @media (max-width: 600px) {

      .footer-logo,
      .footer-links,
      .social-links,
      .copy-right {
        text-align: left !important;
        padding: 0 0px;


      }

      .pd-left {
        padding-left: 0px !important;

      }

      .footer-links a {
        margin: 0 0px !important;
        white-space: nowrap;
      }

      .margin-xy {
        margin: 0px 16px !important;
        padding: 0px !important;
      }

      .footer-logo {
        width: 60%;
      }

      .social-links {
        padding: 0px;
        justify-content: flex-start !important;

      }

      .justify-content-center {
        justify-content: left;
      }

      .footer-links {
        flex-direction: column;
        align-items: flex-start !important;
        padding: 0;
        gap: 8px;
      }

      .footer-bottom {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px;
      }

      .top-links {
        flex-direction: column;
        gap: 10px;
        padding: 0 0px;
      }

      .copy-right {
        margin-top: 10px;
      }
    }




    .expert-section {
      background: linear-gradient(to bottom, #d4e5e5 0%, #d7e2e2 100%);
      padding: 60px 84px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .left-content h1 {
      color: #00a89d;
      font-size: 2.8rem;
      font-weight: 800;
      line-height: 1.1;
      padding-bottom: 0 !important;
      margin-bottom: 0 !important;
      font-family: 'Texta';
    }

    .left-content p {
      color: #1a1a1a;
      font-size: 2rem;
      font-weight: 500;
      font-family: 'Texta';
      line-height: 1.2;
      margin-top: 0 !important;
      margin-bottom: 0 !important;
    }

    .right-content {
      text-align: right;
    }

    .right-content p {
      color: #1a1a1a;
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 25px;
      line-height: 1.5;
      max-width: 440px;
      text-align: left;
      font-family: 'Texta'
    }

    .buttons {
      display: flex;
      gap: 16px;
      justify-content: flex-end;
      border-radius: none !important;
    }

    .btnn {
      padding: 18px 18px;
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      border: none;
      font-family: 'Texta';
      cursor: pointer;
      transition: all 0.3s ease;
      border-radius: none !important;

    }

    .btn-connect {
      background-color: #00a89d;


    }

    .btn-connect a {
      color: white;
      text-decoration: none !important;
    }

    .btn-connect:hover {
      background-color: #008c84;
    }

    .btn-download {
      background-color: #1a1a1a;
      color: white;
    }

    .btn-download:hover {
      background-color: #333333;
    }

    .develped {
      font-size: 9px;
      margin-top: 5px;
      color: #7b7b7bc2;
    }

    .develped:hover {

      color: #ffffff7b;
    }

    @media (max-width: 920px) {
      .expert-section {
        flex-direction: column;
        text-align: center;
        padding: 50px 40px;
      }

      .right-content {
        text-align: center;
        margin-top: 0px;
      }

      .right-content p {
        max-width: 100%;
      }

      .buttons {
        justify-content: center;
      }

      .left-content h1 {
        font-size: 48px;
      }

      .left-content p {
        font-size: 36px;
      }
    }

    @media (max-width: 640px) {
      .expert-section {
        padding: 40px 20px;
      }

      .left-content h1 {
        font-size: 36px;
      }

      .left-content p {
        font-size: 28px;
      }

      .buttons {
        flex-direction: column;
        gap: 15px;
      }

      .btn {
        width: 100%;
      }
    }

    @media (max-width: 500px) {
      .buttons {
        display: flex !important;
        flex-direction: column !important;

      }

      .expert-section {

        align-items: normal;
        text-align: left;
      }

      .right-content p {
        color: #1a1a1a;
        font-size: 14px;

      }
    }







    /* RTL............................................................. */

    @media (max-width: 500px) {

      html[dir="rtl"] .footer-logo,
      [dir="rtl"] .align-left {

        text-align: right !important;

      }
    }



    @media (max-width: 500px) {
      html[dir="rtl"] .justify-content-center {

        justify-content: right !important;

      }
    }

    @media (max-width: 500px) {
      html[dir="rtl"] .social-links a {
        padding-left: 20px !important;
        padding-right: 0 !important;
      }
    }

    @media (max-width: 991px) {
      [dir="rtl"] .text-lg-start {
        text-align: center;
      }
    }


    @media (max-width: 601px) {
      [dir="rtl"] .footer-logo {
        text-align: right !important;
      }

      [dir="rtl"] .justify-content-center {
        text-align: right !important;
      }

      [dir="rtl"] .copy-right {
        text-align: right !important;
      }
    }




    [dir="rtl"] .right-content p {
      text-align: right;
    }

    [dir="rtl"] .left-content {
      text-align: right;
    }

    [dir="rtl"] .text-lg-start {
      text-align: right;
    }


    [dir="rtl"] .text-lg-end {
      text-align: left !important;
    }
  </style>
</head>

<body>


  <section class="expert-section">
    <div class="left-content">
      <h1>Speak with an expert</h1>
      <p>We’d love to hear from you</p>
    </div>
    <div class="right-content">
      <p>Reach out to us with any questions or feedback –  we’re here <br> to help and happy to connect!</p>
      <div class="buttons">
        <button class="btnn btn-connect" aria-label="connect-bttn-next"><a
            href="https://datacore.com.sa/contact-us">LET’S CONNECT</a></button>
        <a href="assets1/images/DC COMPANY PROFILE.pdf" download="DatacoreSolutions.pdf"
          style="text-decoration:none !important;">
          <div class="btnn btn-download" aria-label="download-bttn-next">
            DOWNLOAD BROCHURE          </div>
        </a>
      </div>
    </div>
  </section>



  <!-- Footer Section -->
  <footer class="custom-footer">
    <div class="container-fluid">
      <div class="margin-xy">
        <!-- Top Links -->
        <div class="d-flex justify-content-between w-100 top-links flex-wrap">
          <a href="https://datacore.com.sa/about-us"><span></span>About Us</a>
          <a href="https://datacore.com.sa/services"><span></span>Services</a>
          <a href="https://datacore.com.sa/project"><span></span>Projects</a>
          <a href="https://datacore.com.sa/career"><span></span>Careers</a>
          <a href="https://datacore.com.sa/blog"><span></span>Blog</a>
        </div>

        <!-- Divider -->
        <hr class="footer-divider" />

        <!-- Footer Content Row -->
        <div class="row text-center align-item text-lg-start mr m-0">

          <!-- Logo -->
          <div class="col-12 col-lg-2 mb-3 mb-lg-0 p-0 pd-left">
            <a href="https://datacore.com.sa/" class="footer-logo d-block">
              <img src="https://datacore.com.sa/assets1/images/footer.svg" alt="logo-datacore" />
            </a>
          </div>

          <!-- Links -->
          <div class="col-12 col-lg-5 mb-3 mb-lg-0 pd-left">
            <div class="d-flex justify-content-center justify-content-lg-start footer-links">
              <a href="https://datacore.com.sa/terms-service">Terms of Service</a>
              <a href="https://datacore.com.sa/privacy-policy">Privacy Policy</a>
            </div>
          </div>

          <!-- Social Icons -->
          <div class="col-12 col-lg-2 mb-3 m-0 p-0  ">
            <div class="d-flex justify-content-center m-0 justify-content-lg-start social-links">
              <a target="_blank" href="https://www.facebook.com/www.datacore.com.sa" class="footer-icon"><img
                  src="https://datacore.com.sa/./assets1/images/face.svg" alt=""></a>
              <a target="_blank" href="https://twitter.com/yourhandle" class="footer-icon"><img
                  src="https://datacore.com.sa/./assets1/images/twt.svg" alt=""></a>
              <a target="_blank" href="https://www.instagram.com/datacore_sa?igsh=MWhncGVybTdtaWx1NQ=="
                class="footer-icon"><img src="https://datacore.com.sa/./assets1/images/insta.svg" alt=""></a>
              <a target="_blank" href="https://www.youtube.com/yourchannel" class="footer-icon"><img
                  src="https://datacore.com.sa/./assets1/images/icon.svg" alt=""></a>
              <a target="_blank" href="#" class="footer-icon"><img
                  src="https://datacore.com.sa/./assets1/images/linkedin.svg" alt=""></a>
            </div>
          </div>

          <!-- Copyright -->
          <div class="col-12 col-lg-3 p-0">
            <div class="copy-right  align-left">

              &copy; <span class="current-year"> </span> Datacore
              <a target="_blank" href="https://www.xpertconsortium.com/">
                <p class=" text develped mb-0"> Designed And Developed By<br> XpertConsortium Technologies LLP.</p>
              </a>
            </div>

          </div>

        </div>
      </div>
    </div>

  </footer>



  <!-- aos -->

  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" media="print" onload="this.media='all'">

  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js" defer></script>

  <!-- faddown -->
  <script>
    window.addEventListener('load', function() {
      AOS.init();
    });
  </script>


  <!-- header -->

  <script>
    document.addEventListener("DOMContentLoaded", function () {
      const toggleBtn = document.querySelector(".mobile-nav-toggle");
      const body = document.body;

      toggleBtn.addEventListener("click", function () {
        body.classList.toggle("mobile-nav-active");
        toggleBtn.classList.toggle("bi-list");
        toggleBtn.classList.toggle("bi-x");
      });

      // Show header after load
      window.addEventListener("load", () => {
        document.body.classList.add("loaded");
      });
    });
  </script>





  <!-- home-pages count j -->
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const carousel = document.querySelector('#customCarousel');
      const counter = document.querySelector('.swiper-count');
      const totalSlides = document.querySelectorAll('#customCarousel .carousel-item').length;

      if (carousel && counter) {
        // Initialize counter
        counter.textContent = `1 / ${totalSlides}`;

        // Update count on slide change
        carousel.addEventListener('slid.bs.carousel', function (event) {
          const currentIndex = event.to + 1; // Bootstrap gives 0-based index
          counter.textContent = `${currentIndex} / ${totalSlides}`;
        });
      }
    });
  </script>

  <script>
    document.addEventListener("DOMContentLoaded", () => {
      let currentPath = window.location.pathname;

      if (currentPath.length > 1 && currentPath.endsWith("/")) {
        currentPath = currentPath.slice(0, -1);
      }

      document.querySelectorAll("#navmenu a").forEach(link => {
        let linkPath = new URL(link.getAttribute("href"), window.location.origin).pathname;

        if (linkPath.length > 1 && linkPath.endsWith("/")) {
          linkPath = linkPath.slice(0, -1);
        }

        if (linkPath === currentPath) {
          link.classList.add("active");
        }
      });
    });
  </script>

  <!-- home -->





  <!-- limit -->


  <!-- recaptcha -->

  <script src="https://www.google.com/recaptcha/api.js?render=6LexCY0sAAAAADwsumAwonq10KerZKyKwwx-Y57Z" async
    defer></script>


  <script>
    function getRecaptchaToken() {
      grecaptcha.ready(function () {
        grecaptcha.execute('6LexCY0sAAAAADwsumAwonq10KerZKyKwwx-Y57Z', { action: 'contact_form' })
          .then(function (token) {
            document.getElementById('gtoken').value = token;
          });
      });
    }

    getRecaptchaToken();

    setInterval(getRecaptchaToken, 90000);
  </script>



  <!-- blog limli -->
  <script>
    document.querySelectorAll('.news-desc').forEach(el => {
      const limit = el.dataset.limit;
      const text = el.innerText;
      if (text.length > limit) {
        el.innerText = text.substring(0, limit) + '...';
      }
    });


    document.querySelectorAll('.news-title').forEach(el => {
      const limit = el.dataset.limit;
      const text = el.innerText;
      if (text.length > limit) {
        el.innerText = text.substring(0, limit) + '...';
      }
    });
  </script>
  <!-- counting number -->
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const counters = document.querySelectorAll('.stat-number');
      const duration = 2000;

      const startCounting = (counter) => {
        const targetText = counter.getAttribute('data-target').trim();
        const suffix = targetText.replace(/[0-9.]/g, '');
        const numericPart = targetText.replace(/[^\d]/g, '');
        const hasLeadingZero = /^0\d+/.test(numericPart);
        const target = parseInt(numericPart, 10) || 0;

        let current = 0;
        const increment = target / (duration / 20);

        const updateCounter = () => {
          current += increment;
          if (current >= target) {
            counter.textContent = (hasLeadingZero ? ('0' + target).slice(-numericPart.length) : target) + suffix;
          } else {
            let displayNumber = Math.ceil(current);
            if (hasLeadingZero) {
              displayNumber = ('0' + displayNumber).slice(-numericPart.length);
            }
            counter.textContent = displayNumber + suffix;
            requestAnimationFrame(updateCounter);
          }
        };

        updateCounter();
      };

      const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const counters = entry.target.querySelectorAll('.stat-number');
            counters.forEach(counter => {
              counter.textContent = '0'; // Reset before recount
              startCounting(counter);
            });
          }
        });
      }, { threshold: 0.4 });

      // Observe the full section
      const section = document.querySelector('.section-2');
      if (section) {
        observer.observe(section);
      }
    });
  </script>


  <!-- brand -->


  <script>
    const track = document.getElementById("carouselTrack");
    const totalPages = 2;
    let offset = 0;

    // Detect RTL direction
    const isRTL = document.dir === 'rtl' || document.documentElement.dir === 'rtl' ||
      getComputedStyle(document.body).direction === 'rtl';

    function updateCarousel() {
      const pageWidth = track.offsetWidth / totalPages;
      // For RTL, use positive translateX values instead of negative
      const translateValue = isRTL ? offset : -offset;
      track.style.transform = `translateX(${translateValue}px)`;
    }

    document.getElementById("nextBtnz").addEventListener("click", () => {
      const pageWidth = track.offsetWidth / totalPages;
      offset += pageWidth;
      if (offset >= pageWidth * totalPages) {
        offset = 0;
      }
      updateCarousel();
    });

    document.getElementById("prevBtnz").addEventListener("click", () => {
      const pageWidth = track.offsetWidth / totalPages;
      offset -= pageWidth;
      if (offset < 0) {
        offset = pageWidth * (totalPages - 1);
      }
      updateCarousel();
    });

    window.addEventListener("resize", () => {
      offset = 0;
      updateCarousel();
    });

    updateCarousel();
  </script>


  <!-- allience -->
  <script>
    window.addEventListener('DOMContentLoaded', function () {
      var isRTL = ($("html").attr("dir") === "rtl") ? true : false;

      // Desktop carousel
      $('.desktop-carousel').slick({
        slidesToShow: 6,
        slidesToScroll: 1,
        speed: 4000,
        autoplay: true,
        autoplaySpeed: 0,
        infinite: true,
        arrows: false,
        dots: false,
        cssEase: 'linear',
        pauseOnHover: false,
        pauseOnFocus: false,
        rtl: isRTL
      });

      // Mobile carousel
      $('.mobile-carousel').slick({
        slidesToShow: 2,
        slidesToScroll: 1,
        speed: 4000,
        autoplay: true,
        autoplaySpeed: 0,
        infinite: true,
        arrows: false,
        dots: false,
        cssEase: 'linear',
        pauseOnHover: false,
        pauseOnFocus: false,
        rtl: isRTL
      });
    });
  </script>


  <!-- Mobile Auto Scroll with Infinite Loop -->

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const track = document.getElementById('mobileTrack');
      const pages = track.children;
      const pageCount = pages.length;
      let currentPage = 1;

      // Clone first and last page for seamless loop
      const firstClone = pages[0].cloneNode(true);
      const lastClone = pages[pageCount - 1].cloneNode(true);
      track.insertBefore(lastClone, pages[0]);
      track.appendChild(firstClone);

      const updatedPages = track.children;
      const totalPages = updatedPages.length;

      // Initialize at real page 1 (index 1)
      track.style.transform = `translateX(-100%)`;

      function goToPage(index) {
        track.style.transition = 'transform 0.5s ease-in-out';
        track.style.transform = `translateX(-${index * 100}%)`;
        currentPage = index;
      }

      function autoScroll() {
        currentPage++;
        goToPage(currentPage);

        // Handle seamless loop reset
        setTimeout(() => {
          if (currentPage === totalPages - 1) {
            track.style.transition = 'none';
            currentPage = 1;
            track.style.transform = `translateX(-100%)`;
          }
        }, 510); // slightly more than CSS transition
      }

      setInterval(autoScroll, 3000);
    });
  </script>


  <!-- blog -->

  <script>
    window.addEventListener('DOMContentLoaded', function () {
      const $slider = $('.news-slider');

      const isRTL = $('html').attr('dir') === 'rtl'; // detect Arabic (RTL)

      $slider.slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        arrows: false,
        dots: false,
        rtl: isRTL, // 👈 important fix for Arabic
        responsive: [
          {
            breakpoint: 992,
            settings: { slidesToShow: 2 }
          },
          {
            breakpoint: 768,
            settings: { slidesToShow: 1 }
          }
        ]
      });

      $('#prevBtn').on('click', function () {
        $slider.slick('slickPrev');
      });

      $('#nextBtn').on('click', function () {
        $slider.slick('slickNext');
      });

      // Project mobile slider
      function initProjectMobileSlider() {
        const $projectSlider = $('.project-slider-mobile');
        if ($projectSlider.length) {
          if ($(window).width() <= 768) {
            if (!$projectSlider.hasClass('slick-initialized')) {
              $projectSlider.css('display', 'block'); // Override grid for slider
              $projectSlider.slick({
                slidesToShow: 1,
                slidesToScroll: 1,
                autoplay: true,
                autoplaySpeed: 2000,
                arrows: true,
                prevArrow: '<button class="project-arrow project-prev" aria-label="Previous" style="position: absolute; top: -60px; padding-top:2px; ' + (isRTL ? 'left' : 'right') + ': 65px; z-index: 1000;">' + (isRTL ? '&#8594;' : '&#8592;') + '</button>',
                nextArrow: '<button class="project-arrow project-next" aria-label="Next" style="position: absolute; top: -60px;  padding-top:2px;' + (isRTL ? 'left' : 'right') + ': 15px; z-index: 1000;">' + (isRTL ? '&#8592;' : '&#8594;') + '</button>',
                dots: false,
                rtl: isRTL
              });
            }
          } else {
            if ($projectSlider.hasClass('slick-initialized')) {
              $projectSlider.slick('unslick');
              $projectSlider.css('display', ''); // Restore grid display
            }
          }
        }
      }

      initProjectMobileSlider();
      $(window).on('resize', function () {
        initProjectMobileSlider();
      });

    });
  </script>




  <!-- testimonial -->

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const track = document.querySelector('.carousel-trackz');
      const prevBtns = document.querySelectorAll('.carousel-btn.prevx');
      const nextBtns = document.querySelectorAll('.carousel-btn.nextx');

      const isRTL = document.dir === 'rtl' || document.documentElement.dir === 'rtl';

      // Preserve originals before clearing
      const originalSlides = Array.from(track.children);

      let slideWidth = 0;
      let slidesToShow = 1;
      let currentIndex = 0;
      let isTransitioning = false;

      function getSlidesToShow() {
        const width = window.innerWidth;
        if (width <= 768) return 1;
        if (width <= 1200) return 2;
        if (width < 1600) return 3;
        return 4;
      }

      function updateSlideWidth() {
        const firstCard = document.querySelector('.card-wrapper');
        slideWidth = firstCard ? firstCard.offsetWidth : 0;
      }

      function cloneSlides() {
        // Always re-clone fresh
        track.innerHTML = '';
        slidesToShow = getSlidesToShow();

        const clonesBefore = originalSlides.slice(-slidesToShow).map(s => s.cloneNode(true));
        const clonesAfter = originalSlides.slice(0, slidesToShow).map(s => s.cloneNode(true));

        if (isRTL) {
          // Important: keep same DOM order, but just reverse flex direction
          clonesBefore.forEach(clone => track.appendChild(clone));
          originalSlides.forEach(slide => track.appendChild(slide));
          clonesAfter.forEach(clone => track.appendChild(clone));
          track.style.flexDirection = 'row-reverse';
        } else {
          clonesBefore.forEach(clone => track.appendChild(clone));
          originalSlides.forEach(slide => track.appendChild(slide));
          clonesAfter.forEach(clone => track.appendChild(clone));
          track.style.flexDirection = 'row';
        }

        updateSlideWidth();
        currentIndex = slidesToShow;
        goToSlide(currentIndex, false);
      }

      function goToSlide(index, animate = true) {
        track.style.transition = animate ? 'transform 0.5s ease-in-out' : 'none';

        const translateValue = index * slideWidth;
        track.style.transform = isRTL
          ? `translateX(${translateValue}px)`
          : `translateX(-${translateValue}px)`;
      }

      function nextSlide() {
        if (isTransitioning) return;
        isTransitioning = true;
        currentIndex++;
        goToSlide(currentIndex);

        track.addEventListener('transitionend', () => {
          if (currentIndex >= originalSlides.length + slidesToShow) {
            currentIndex = slidesToShow;
            goToSlide(currentIndex, false);
          }
          isTransitioning = false;
        }, { once: true });
      }

      function prevSlide() {
        if (isTransitioning) return;
        isTransitioning = true;
        currentIndex--;
        goToSlide(currentIndex);

        track.addEventListener('transitionend', () => {
          if (currentIndex < slidesToShow) {
            currentIndex = originalSlides.length + slidesToShow - 1;
            goToSlide(currentIndex, false);
          }
          isTransitioning = false;
        }, { once: true });
      }

      // Button events
      nextBtns.forEach(btn => btn.addEventListener('click', () => {
        isRTL ? prevSlide() : nextSlide();
      }));

      prevBtns.forEach(btn => btn.addEventListener('click', () => {
        isRTL ? nextSlide() : prevSlide();
      }));

      // Arrow symbols for RTL


      window.addEventListener('resize', cloneSlides);

      // Initialize
      cloneSlides();
    });
  </script>


  <!-- 
services -->


  <!--Start of Tawk.to Script-->
  <script type="text/javascript">
    var Tawk_API = Tawk_API || {}, Tawk_LoadStart = new Date();
    (function () {
      var s1 = document.createElement("script"), s0 = document.getElementsByTagName("script")[0];
      s1.async = true;
      s1.src = 'https://embed.tawk.to/6971de344e6a21197c2fec61/1jfico00p';
      s1.charset = 'UTF-8';
      s1.setAttribute('crossorigin', '*');
      s0.parentNode.insertBefore(s1, s0);
    })();

    // Position the widget after it loads
    Tawk_API.onLoad = function () {
      Tawk_API.setAttributes({
        'widget-position': 'br' // bottom-right
      });
    };
  </script>

  <style>
    /* Adjust the widget position */


    #tawkchat-container {
      bottom: 80px !important;
      right: 20px !important;
    }
  </style>

  <!--End of Tawk.to Script-->


  <script>
    document.querySelector(".current-year").textContent = new Date().getFullYear();
  </script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js" defer></script>




</body>

</html>
</body>

</html>