<!DOCTYPE html>
<html class="light">
<head>
<!-- Basic -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>STC Agile Index</title>
<meta name="keywords" content="STC" />
<meta name="description" content="STC Digital Platform">
<meta name="author" content="stc.com">
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
<!-- Mobile Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, shrink-to-fit=no">
<!-- Web Fonts -->
<link id="googleFonts" href="https://fonts.googleapis.com/css?family=family=Lora:400,400i,700,700i|Poppins:300,400,500,600,700,800,900&display=swap" rel="stylesheet" type="text/css">
<!-- Vendor CSS -->
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="vendor/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="vendor/animate/animate.compat.css">
<link rel="stylesheet" href="vendor/simple-line-icons/css/simple-line-icons.min.css">
<link rel="stylesheet" href="vendor/owl.carousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="vendor/owl.carousel/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="vendor/magnific-popup/magnific-popup.min.css">
<!-- Theme CSS -->
<link rel="stylesheet" href="css/theme.css">
<link rel="stylesheet" href="css/theme-elements.css">
<link rel="stylesheet" href="css/theme-blog.css">
<link rel="stylesheet" href="css/theme-shop.css">
<!-- Demo CSS -->
<link rel="stylesheet" href="css/demos/demo-digital-agency-2.css">
<!-- Skin CSS -->
<link id="skinCSS" rel="stylesheet" href="css/skins/skin-digital-agency-2.css">
<!-- Theme Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<!-- Head Libs -->
<script src="vendor/modernizr/modernizr.min.js"></script>
</head>
<body>
<div class="body">
<header id="header" class="header-transparent header-effect-shrink" data-plugin-options="{'stickyEnabled': true, 'stickyEffect': 'shrink', 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': false, 'stickyChangeLogo': false, 'stickyStartAt': 1, 'stickyHeaderContainerHeight': 100}">
<div class="header-body border-top-0 bg-color-dark box-shadow-none">
<div class="header-top bg-light border-0">
<div class="container">
<div class="header-row">
<div class="header-column">
<div class="header-row">
<ul class="list list-unstyled list-inline mb-0">
<li class="list-inline-item text-color-dark me-md-4 mb-0 d-none d-md-inline-block">
<span class="text-color-default text-2">Any Questions?</span>
</li>
<li class="list-inline-item me-4 mb-0">
<i class="icons icon-phone text-color-primary text-4 position-relative top-4 me-1"></i>
<a href="tel:+1234567890" class="text-color-secondary text-color-hover-primary font-weight-semibold text-decoration-none text-2">
(+966) 123-4567
</a>
</li>
<li class="list-inline-item me-4 mb-0 d-none d-md-inline-block">
<i class="icons icon-envelope text-color-primary text-4 position-relative top-4 me-1"></i>
<a href="mailto:info@stc.com.sa" class="text-color-secondary text-color-hover-primary font-weight-semibold text-decoration-none text-2">
info@stc.com.sa
</a>
</li>
</ul>
</div>
</div>
<div class="header-column justify-content-end">
<div class="header-row">
<ul class="list list-unstyled list-inline mb-0">
<li class="list-inline-item mb-0">
<i class="icons icon-user text-color-primary text-6 position-relative top-4 me-1"></i>
<a href="page-login.html" class="text-color-secondary font-weight-semibold text-decoration-none text-4">
Welcome, Ali Mohamed |
</a>
<a href="page-login.html" class="text-color-secondary text-color-hover-primary font-weight-semibold text-decoration-none text-4">
Sign out
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="header-container container">
<div class="header-row ">
<div class="header-column header-column-logo">
<div class="header-row">
<div class="header-logo">
<a href="index.html">
<img alt="STC" width="139" height="59" src="img/demos/digital-agency-2/logos/logo-1.png">
</a>
</div>
</div>
</div>
<div class="header-column header-column-nav-menu justify-content-end w-100">
<div class="header-row">
<div class="header-nav header-nav-links header-nav-dropdowns-dark header-nav-light-text order-2 order-lg-1">
<div class="header-nav-main header-nav-main-mobile-dark header-nav-main-square header-nav-main-dropdown-no-borders header-nav-main-effect-2 header-nav-main-sub-effect-1">
<nav class="collapse">
<ul class="nav nav-pills" id="mainNav">
<li class="dropdown">
<a class="nav-link dropdown-toggle text-capitalize custom-text-5" href="learning-hub.html">
Learning HUB
</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item font-weight-normal" href="learning-hub.html">
Educator Centre
</a>
</li>
<li>
<a class="dropdown-item font-weight-normal" href="learning-hub.html">
Training Centre
</a>
</li>
<li>
<a class="dropdown-item font-weight-normal" href="learning-hub.html">
Get Certified
</a>
</li>
</ul>
</li>
<li class="dropdown-primary">
<a class="nav-link text-capitalize custom-text-5" href="learning-path.html">
learning Path Builder
</a>
</li>
<li class="dropdown">
<a class="nav-link dropdown-toggle text-capitalize custom-text-5 active" class="dropdown-toggle" href="agile-index.html">
Agile Index
</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item font-weight-normal" href="index.html">
Operating Model
</a>
</li>
<li>
<a class="dropdown-item font-weight-normal" href="index.html">
Playbooks
</a>
</li>
<li>
<a class="dropdown-item font-weight-normal" href="index.html">
Templates
</a>
</li>
<li>
<a class="dropdown-item font-weight-normal" href="index.html">
KPI's Dictionary
</a>
</li>
</ul>
</li>
<li class="dropdown">
<a class="nav-link dropdown-toggle text-capitalize custom-text-5" href="social.html">
Social & collaboration
</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item font-weight-normal" href="social.html">
Top News
</a>
</li>
<li>
<a class="dropdown-item font-weight-normal" href="social.html">
Champions BIOs
</a>
</li>
<li>
<a class="dropdown-item font-weight-normal" href="social.html">
Events
</a>
</li>
</ul>
</li>
<li class="dropdown">
<a class="nav-link dropdown-toggle text-capitalize custom-text-5" href="adminstration.html">
Administration
</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item font-weight-normal" href="adminstration.html">
User Management
</a>
</li>
<li>
<a class="dropdown-item font-weight-normal" href="adminstration.html">
Content Management
</a>
</li>
<li>
<a class="dropdown-item font-weight-normal" href="adminstration.html">
Exams and Question Bank
</a>
</li>
<li>
<a class="dropdown-item font-weight-normal" href="adminstration.html">
Training Scheduler
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<button class="btn header-btn-collapse-nav" data-bs-toggle="collapse" data-bs-target=".header-nav-main nav">
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</div>
<div class="header-column justify-content-end d-none d-lg-flex">
<div class="header-row">
<div class="header-nav-features header-nav-features-no-border">
<div class="header-nav-feature header-nav-features-search d-inline-flex">
<a href="#" class="header-nav-features-toggle text-decoration-none" data-focus="headerSearch">
<i class="icons icon-magnifier header-nav-top-icon font-weight-bold text-4 top-2 text-color-primary"></i>
</a>
<div class="header-nav-features-dropdown header-nav-features-dropdown-mobile-fixed" id="headerTopSearchDropdown">
<form role="search" action="page-search-results.html" method="get">
<div class="simple-search input-group">
<input class="form-control text-1" id="headerSearch" name="q" type="search" value="" placeholder="Search...">
<button class="btn" type="submit">
<i class="icons icon-magnifier header-nav-top-icon font-weight-bold text-color-dark text-4 text-color-hover-primary top-2"></i>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<div role="main" class="main">
<section class="page-header page-header-modern page-header-background bg-color-dark p-relative z-index-1 lazyload" data-bg-src="img/agile-index-bg.jpg">
<span class="custom-circle custom-circle-1 bg-color-light custom-circle-blur appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="400"></span>
<span class="custom-circle custom-circle-2 bg-color-primary appear-animation" data-appear-animation="zoomIn" data-appear-animation-delay="500"></span>
<span class="custom-circle custom-circle-3 bg-color-primary appear-animation" data-appear-animation="zoomIn" data-appear-animation-delay="600"></span>
<div class="container">
<div class="row mt-5">
<div class="col">
<ul class="breadcrumb breadcrumb-light custom-title-with-icon-primary d-block">
<!--<li><a href="#">Home</a></li>-->
</ul>
<h1 class="custom-text-10 font-weight-bold">Agile Index</h1>
</div>
</div>
</div>
</section>
<section class="our-approach py-5 mb-4 mb-xl-5 mt-4 mt-xl-0" id="intro">
<div class="container p-relative z-index-2">
<div class="row">
<div class="col-lg-6">
<h1 class="custom-text-11 mb-4 pb-5 custom-title-with-icon custom-title-with-icon-primary appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="100">Follow up with latest approved published processes, JIRA improvements, new technology and Playbooks.</h1>
</div>
<div class="col-lg-6 appear-animation pb-5 mb-5" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="100">
<img width="120%" src="img/agile-photo.jpg" />
</div>
</div>
</div>
</section>
<section class="our-services p-relative pt-0 pb-5 mb-4">
<span class="custom-circle custom-circle-2 bg-color-quaternary appear-animation" data-appear-animation="zoomIn" data-appear-animation-delay="100"></span>
<div class="container">
<div class="row justify-content-center">
<h4 class="text-color-dark custom-text-10 font-weight-bold text-center custom-title-with-icon-center custom-title-with-icon custom-title-with-icon-primary pb-5 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">Achievements Board</h4>
</div>
<div class="row">
<div class="col-xl-4 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="200">
<a href="#" class="text-decoration-none">
<div class="service-card mb-4 bg-color-tertiary bg-color-hover-dark text-color-hover-light w-100 font-weight-semibold custom-text-6 line-height-6 text-color-dark p-relative">
<span class="text-color-primary">35%</span> Improving in process
</div>
</a>
</div>
<div class="col-xl-4 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="300">
<a href="#" class="text-decoration-none">
<div class="service-card mb-4 bg-color-dark bg-color-hover-tertiary text-color-hover-dark w-100 font-weight-semibold custom-text-6 line-height-6 text-color-light p-relative">
<span class="text-color-primary">40%</span> Improving in process
</div>
</a>
</div>
<div class="col-xl-4 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="400">
<a href="#" class="text-decoration-none">
<div class="service-card mb-4 bg-color-tertiary bg-color-hover-dark text-color-hover-light w-100 font-weight-semibold custom-text-6 line-height-6 text-color-dark p-relative">
<span class="text-color-primary">20%</span> Improving in process
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-xl-4 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="500">
<a href="#" class="text-decoration-none">
<div class="service-card mb-4 bg-color-dark bg-color-hover-tertiary text-color-hover-dark w-100 font-weight-semibold custom-text-6 line-height-6 text-color-light p-relative">
<span class="text-color-primary">50%</span> Improving in process
</div>
</a>
</div>
<div class="col-xl-4 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="600">
<a href="#" class="text-decoration-none">
<div class="service-card mb-4 bg-color-tertiary bg-color-hover-dark text-color-hover-light w-100 font-weight-semibold custom-text-6 line-height-6 text-color-dark p-relative">
<span class="text-color-primary">65%</span> Improving in process
</div>
</a>
</div>
<div class="col-xl-4 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="700">
<a href="#" class="text-decoration-none">
<div class="service-card mb-4 bg-color-dark bg-color-hover-tertiary text-color-hover-dark w-100 font-weight-semibold custom-text-6 line-height-6 text-color-light p-relative">
<span class="text-color-primary">80%</span> Improving in process
</div>
</a>
</div>
</div>
<div class="row py-5 mb-5">
<div class="col-xl-3 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="500">
<a href="#" class="text-decoration-none">
<div class="mb-4 p-relative">
<img style="width: 90%" src="img/icon1.jpg">
</div>
</a>
</div>
<div class="col-xl-3 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="600">
<a href="#" class="text-decoration-none">
<div class="mb-4 p-relative">
<img style="width: 90%" src="img/icon2.jpg">
</div>
</a>
</div>
<div class="col-xl-3 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="700">
<a href="#" class="text-decoration-none">
<div class="mb-4 p-relative">
<img style="width: 90%" src="img/icon3.jpg">
</div>
</a>
</div>
<div class="col-xl-3 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="700">
<a href="#" class="text-decoration-none">
<div class="mb-4 p-relative">
<img style="width: 90%" src="img/icon4.jpg">
</div>
</a>
</div>
</div>
<div class="row justify-content-center">
<div class="col-xl-9">
<div id="sidebar" class="side-menu-our-work sidebar position-relative">
<div data-plugin-sticky data-plugin-options="{'minWidth': 991, 'containerSelector': '.sticky-container', 'padding': {'top': 100}}">
<div class="pb-4 my-2 ps-0 pe-0">
<ul class="list-unstyled sort-source sort-source-light">
<li class="nav-item" data-option-value="*">
<h4><a href="demo-digital-agency-2-our-work.html" class="text-color-secondary text-color-hover-quaternary text-decoration-none mb-2 p-0 d-block font-weight-medium">STC Operating Model</h4></a>
<span><p>Seamless transition & adaption through published strategy design, processes, and related JIRA improvements.</p>
</span>
</li>
<li class="nav-item" data-option-value=".ui-design">
<h4><a href="demo-digital-agency-2-our-work.html" class="text-color-secondary text-color-hover-quaternary text-decoration-none mb-2 p-0 d-block font-weight-medium">Playbooks</a></h4>
<span><p>Professional guidance to enable users to advance and sustain the transformation and also to onboard new commers.</p></span>
</li>
<li class="nav-item" data-option-value=".web-development">
<h4><a href="demo-digital-agency-2-our-work.html" class="text-color-secondary text-color-hover-quaternary text-decoration-none mb-2 p-0 d-block font-weight-medium">Used Templates</a></h4>
<span><p>Explore templates and best practices to be used and implemented according to published operating model.</p></span>
</li>
<li class="nav-item" data-option-value=".ui-design">
<h4><a href="demo-digital-agency-2-our-work.html" class="text-color-secondary text-color-hover-quaternary text-decoration-none mb-2 p-0 d-block font-weight-medium">KPI's Dictionary</a></h4>
<span><p>Raise awareness about agile performance indicators on enterprise & teams level to accelerate value creation & time to market.</p></span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="get-in-touch bg-color-after-secondary overlay overlay-color-primary overlay-show p-relative overflow-hidden" style="background-image: url('img/get-in-touch.jpg'); background-size: cover; background-position: center;">
<span class="custom-circle custom-circle-1 bg-color-light appear-animation" data-appear-animation="zoomIn" data-appear-animation-delay="100"></span>
<span class="custom-circle custom-circle-2 bg-color-light appear-animation" data-appear-animation="zoomIn" data-appear-animation-delay="100"></span>
<div class="container">
<div class="row">
<div class="col-lg-8">
<p class="mb-2 text-color-tertiary custom-text-7 custom-title-with-icon custom-title-with-icon-light appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="200">Let’s Get in Touch</p>
<h4 class="text-color-light font-weight-bold custom-text-10 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="400">
We’re interested in talking<br/>
about your business.
</h4>
</div>
<div class="col-lg-4 d-flex align-items-center justify-content-start justify-content-lg-end mt-5 mt-lg-0">
<a herf="#" class="btn btn-outline custom-btn-outline btn-light border-white rounded-0 px-4 py-3 text-color-light text-color-hover-dark bg-color-hover-light custom-text-6 line-height-6 font-weight-semibold custom-btn-with-arrow appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="600">Let’s Talk!</a>
</div>
</div>
</div>
</section>
</div>
<footer id="footer" class="mt-0 py-5">
<div class="container py-5">
<div class="row justify-content-between">
<div class="col-sm-12 col-lg-6 col-xl-6">
<div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="100">
<h4 class="custom-font-primary custom-newsletter-title font-weight-bold mb-4 custom-text-7">Join for Company Updates</h4>
<div class="alert alert-success d-none" id="newsletterSuccess">
<strong>Success!</strong> You've been added to our email list.
</div>
<div class="alert alert-danger d-none" id="newsletterError"></div>
<form id="newsletterForm" action="php/newsletter-subscribe.php" method="POST" class="me-0 mb-3 mb-md-0 opacity-10">
<div class="input-group custom-newsletter">
<input class="form-control form-control-sm custom-newsletter-input rounded-0 bg-transparent border-0 ps-0 custom-text-2 text-color-light box-shadow-none" placeholder="Your E-mail Address" name="newsletterEmail" id="newsletterEmail" type="email">
<button class="btn text-color-light custom-text-4 font-weight-semibold custom-btn-with-arrow custom-btn-with-arrow-light" type="submit">Sign Up</button>
</div>
</form>
</div>
</div>
<div class="col-sm-12 col-lg-6 col-xl-4 col-info-footer mt-4 mt-sm-5 mt-lg-0">
<div class="row">
<div class="col-md-6">
<span class="d-block text-start text-lg-end text-color-light font-weight-semibold text-5 pb-2 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="100">Popular pages</span>
<p class="mb-0 text-start text-lg-end text-4 font-weight-medium appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="150"><a href="#" class="text-color-default">Mofawtar 4</a></p>
<p class="mb-0 text-start text-lg-end text-4 font-weight-medium appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200"><a href="#" class="text-color-default">Sawa post plus</a></p>
<p class="mb-0 text-start text-lg-end text-4 font-weight-medium appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="250"><a href="#" class="text-color-default">Baity 5G</a></p>
</div>
<div class="col-md-6 mt-3 mt-md-0">
<span class="d-block text-start text-lg-end text-color-light font-weight-semibold text-5 pb-2 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="100">Support</span>
<p class="mb-0 text-start text-lg-end text-4 font-weight-medium appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="150"><a href="#" class="text-color-default">FAQS</a></p>
<p class="mb-0 text-start text-lg-end text-4 font-weight-medium appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200"><a href="#" class="text-color-default">Contact us</a></p>
<p class="mb-0 text-start text-lg-end text-4 font-weight-medium appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="250"><a href="#" class="text-color-default">Support library</a></p>
</div>
</div>
</div>
</div>
<div class="row justify-content-between">
<div class="col-sm-12 col-lg-7 col-xl-6 d-none d-sm-flex">
<div class="nav-footer w-100 pt-5 mt-0 mt-lg-4">
<div class="row justify-content-between">
<div class="col-auto me-auto">
<div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">
<div class="footer-nav footer-nav-links">
<nav>
<ul class="nav" id="footerNav">
<li>
<a class="text-color-hover-primary font-weight-semibold custom-text-2 text-capitalize" href="learning-hub.html">Learning Hub</a>
</li>
<li>
<a class="text-color-hover-primary font-weight-semibold custom-text-2 text-capitalize" href="learning-path.html">Learning Path Builder</a>
</li>
<li>
<a class="text-color-hover-primary font-weight-semibold custom-text-2 text-capitalize" href="agile-index.html">Agile Index</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="col-auto">
<div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="100">
<ul class="header-social-icons social-icons social-icons-clean social-icons-icon-light social-icons-big d-none d-lg-block m-0 p-relative bottom-10">
<li class="social-icons-instagram"><a href="http://www.instagram.com/" target="_blank" class="text-4" title="Instagram"><i class="fab fa-instagram"></i></a></li>
<li class="social-icons-twitter"><a href="http://www.twitter.com/" target="_blank" class="text-4" title="Twitter"><i class="fab fa-twitter"></i></a></li>
<li class="social-icons-facebook"><a href="http://www.facebook.com/" target="_blank" class="text-4" title="Facebook"><i class="fab fa-facebook-f"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-5 col-xl-6">
<div class="d-flex justify-content-end custom-footer-copywriting pt-5 mt-0 mt-lg-4">
<p class="mb-0 text-start text-lg-end d-block w-100 appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="300">all rights reserved © 2022 stc</p>
</div>
</div>
</div>
</div>
</footer>
</div>
<!-- Vendor -->
<script src="vendor/plugins/js/plugins.min.js"></script>
<!-- Theme Base, Components and Settings -->
<script src="js/theme.js"></script>
<!-- Current Page Vendor and Views -->
<script src="js/views/view.contact.js"></script>
<!-- Theme Custom -->
<script src="js/custom.js"></script>
<!-- Theme Initialization Files -->
<script src="js/theme.init.js"></script>
</body>
</html>